and <desc> naming the flavours, which surfaces as a hover tooltip. Removed in markup; the accessible name is now an aria-label on the container instead. */ /* 1 - let the header be genuinely fixed again */ html{overflow-x:visible!important} body{overflow-x:visible!important;max-width:none!important} #milk-mustache-database{overflow-x:visible!important} #milk-mustache-database>header{ position:fixed!important; top:0!important; left:0!important; right:0!important; transform:none!important; will-change:auto!important; } /* 2 - close the gap: tighter band, art anchored to the bottom */ #milk-mustache-database{--mm-fixed-header-height:268px!important} #milk-mustache-database>header{min-height:286px!important;padding-bottom:0!important} html{scroll-padding-top:302px!important} #milk-mustache-database>header.top{padding-bottom:4px!important} #milk-mustache-database>header.nav{margin-bottom:0!important} #milk-mustache-database>header.mm-smiley-stage{ position:absolute; z-index:1; left:0; right:0; bottom:0; height:132px; pointer-events:none; overflow:hidden; } @media (max-width:820px){ #milk-mustache-database{--mm-fixed-header-height:246px!important} #milk-mustache-database>header{min-height:246px!important} html{scroll-padding-top:262px!important} #milk-mustache-database>header.mm-smiley-stage{height:96px} } /* v235. Restores gallery centring, which an earlier v226 responsive pass broke. There was a working rule: grid-template-columns: repeat(auto-fit, minmax(235px, 320px)); justify-content: center; A MAX track size of 320px means the tracks do not fill the row, leaving slack that justify-content:center can distribute evenly. v226 replaced the 320px cap with 1fr to stop narrow-screen overflow - but 1fr makes every track expand to fill the row, so there was no slack left to centre. 493 of the 968 galleries hold a single asset, and that asset was being stretched across the full panel. Fixed by keeping the max cap AND making the minimum responsive: minmax(min(220px,100%), 320px) The min() collapses the floor on narrow screens so nothing overflows, while the 320px ceiling preserves the slack that centring needs. */ #milk-mustache-database .gallery{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),320px)) !important; justify-content:center !important; justify-items:center !important; align-items:start !important; } #milk-mustache-database .gallery >.asset{ width:100% !important; max-width:320px !important; justify-self:center !important; } /* the merch and collection grids had the same 1fr problem */ #milk-mustache-database .merchgrid{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important; justify-content:center !important; } #milk-mustache-database .keygrid, #milk-mustache-database .buygrid, #milk-mustache-database .sourcegrid{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),340px)) !important; justify-content:center !important; } /* category card grids: centre the final short row rather than leaving it ragged left */ #milk-mustache-database .grid.category-grid{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important; justify-content:center !important; } /* and centre what sits inside each asset */ #milk-mustache-database .gallery.assetimg, #milk-mustache-database .gallery.assetlinks{ margin-left:auto !important; margin-right:auto !important; } #milk-mustache-database .gallery.assetlinks{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4em; } /* v238. The art moves OUT of the header into its own band. Why: inside the header the art sat at z-index 1 beneath the brand plate (rgba(0,0,0,.78), up to 1100px wide) and the nav plate (rgba(0,0,0,.82), up to 1500px wide), both at z-index 8. Two nearly-opaque full-width black bars over the top of it. No repositioning inside the header could fix that. Now: the header is compact and holds only the brand and nav, so it stays fixed and never scrolls. The smileys get a full-bleed band immediately below it with nothing layered over them at all. */ /* header returns to a compact bar - brand and nav only */ #milk-mustache-database{--mm-fixed-header-height:184px!important} #milk-mustache-database>header{ min-height:184px!important; position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:2147483000!important; } html{scroll-padding-top:212px!important} #milk-mustache-database>header.mm-smiley-stage{display:none!important} /* the band: full bleed, nothing over it */ .mm-smiley-band{ position:relative; z-index:1; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); height:clamp(150px,17vw,250px); background:#05090c; overflow:hidden; border-bottom:1px solid rgba(224,246,255,.14); display:block; } .mm-smiley-band.mm-smileys{display:block;width:100%;height:100%} @media (max-width:820px){ #milk-mustache-database{--mm-fixed-header-height:172px!important} #milk-mustache-database>header{min-height:172px!important} html{scroll-padding-top:198px!important} .mm-smiley-band{height:clamp(112px,26vw,160px)} } @media (max-width:520px){ .mm-smiley-band{height:104px} } /* v239. The smileys move into the Welcome panel. The standalone band worked but sat apart from anything. Putting the art at the head of the welcome makes it the opening image of the collector's own introduction, which is where it belongs. The panel has 18px padding and an 8px radius, so the art is bled out to the panel edges with negative margins and given matching top corners. */ .mm-smiley-band{display:none!important} #milk-mustache-database #home.campaign-intro{ padding-top:0 !important; overflow:hidden; } #milk-mustache-database #home.mm-welcome-art{ display:block; margin:0 -18px 18px; height:clamp(158px,17vw,240px); background:#05090c; border-bottom:1px solid rgba(224,246,255,.16); overflow:hidden; position:relative; } #milk-mustache-database #home.mm-welcome-art.mm-smileys{ display:block;width:100%;height:100%; } /* the welcome panel is forced black with white text, so the art sits flush */ #milk-mustache-database #home.campaign-intro.campaign-copy{padding-top:2px} @media (max-width:820px){ #milk-mustache-database #home.mm-welcome-art{height:clamp(118px,26vw,168px)} } @media (max-width:520px){ #milk-mustache-database #home.mm-welcome-art{height:96px} } /* v240. The site's blue applied to every section outline and every button. Before, panels were outlined in rgba(224,246,255,.28) - a near-white at 28%, which composites to #444e54 over the panel background and reads as grey. The palette blue was only appearing on a handful of pale elements. Now every container is outlined in --blue at 55% (#527d8f as rendered) and every interactive control gets it at full strength (#8fd8f6), so buttons and inputs read as the brightest blue on the page - which is what you want them to be. */ /* --- sections and containers ------------------------------------------- */ #milk-mustache-database .panel, #milk-mustache-database .card, #milk-mustache-database .stat, #milk-mustache-database .stats.stat, #milk-mustache-database .tablewrap, #milk-mustache-database .detailtitle, #milk-mustache-database .asset, #milk-mustache-database .merchcard, #milk-mustache-database .campaign-intro, #milk-mustache-database .campaign-history-standalone, #milk-mustache-database .archive-intro, #milk-mustache-database .archive-search-panel, #milk-mustache-database .browser-find, #milk-mustache-database .year-heading, #milk-mustache-database .keycard, #milk-mustache-database .buycard, #milk-mustache-database .sourcecard, #milk-mustache-database .subpanel, #milk-mustache-database .category-heading, #milk-mustache-database details.variantblock{ border:1px solid rgba(143,216,246,.55) !important; } /* the welcome panel gets the accent rule it always had, in the palette blue */ #milk-mustache-database #home.campaign-intro{ border-top:4px solid #8fd8f6 !important; } #milk-mustache-database #home.mm-welcome-art{ border-bottom:1px solid rgba(143,216,246,.55) !important; } /* nested panels sit a shade quieter so the hierarchy still reads */ #milk-mustache-database .panel.panel, #milk-mustache-database .panel.subpanel{ border-color:rgba(143,216,246,.34) !important; } /* --- buttons and inputs: full-strength blue ---------------------------- */ #milk-mustache-database button, #milk-mustache-database .archive-search-row button, #milk-mustache-database .checklist-tools button, #milk-mustache-database #home.archive-search-panel button, #milk-mustache-database input[type="text"], #milk-mustache-database input[type="search"], #milk-mustache-database .archive-search-row input, #milk-mustache-database select{ border:1px solid #8fd8f6 !important; border-radius:8px !important; } #milk-mustache-database button:hover, #milk-mustache-database button:focus, #milk-mustache-database .archive-search-row input:focus, #milk-mustache-database input[type="text"]:focus, #milk-mustache-database input[type="search"]:focus{ border-color:#cbedfc !important; box-shadow:0 0 0 3px rgba(143,216,246,.22) !important; outline:none !important; } /* --- pills keep their own lighter edge, brightened to the palette ------ */ #milk-mustache-database .badge, #milk-mustache-database .chip, #milk-mustache-database .chronology-tag, #milk-mustache-database .yearcount, #milk-mustache-database .variant-tag, #milk-mustache-database .back, #milk-mustache-database .year-index a{ border:1px solid rgba(143,216,246,.62) !important; } /* --- nav and masthead -------------------------------------------------- */ #milk-mustache-database .nav{border:1px solid rgba(143,216,246,.45) !important} #milk-mustache-database .brand{border:1px solid rgba(143,216,246,.34) !important} #milk-mustache-database>header{border-bottom:1px solid rgba(143,216,246,.55) !important} /* --- keyboard focus, everywhere ---------------------------------------- */ #milk-mustache-database a:focus-visible, #milk-mustache-database button:focus-visible, #milk-mustache-database summary:focus-visible, #milk-mustache-database input:focus-visible{ outline:2px solid #8fd8f6 !important; outline-offset:2px !important; } /* the pale panels keep a darker blue edge so they do not glare */ #milk-mustache-database .site-footer{border-top:1px solid #91cee8 !important} #milk-mustache-database .visual-record-note{border:1px solid #91cee8 !important} #milk-mustache-database th{border-bottom:1px solid rgba(143,216,246,.62) !important} /* v242. Centres EVERY card grid on the site, not one at a time. The recurring cause: repeat(auto-fill, minmax(N, 1fr)). - auto-fill creates empty tracks to pad the row out - 1fr then gives those empty tracks real width So a row with one card puts it in track 1 and leaves the rest as empty columns beside it. Nothing is left over for justify-content to centre. v235 fixed.gallery and.grid.category-grid but missed plain.grid, which is what the chronological year rows use - and seven of those hold a single card. This does all of them at once so it stops recurring. The pattern throughout: auto-fit (collapses empty tracks) + a MAX track size (leaves slack) + justify-content:center (distributes the slack) + min(N,100%) as the floor (so narrow screens still cannot overflow). */ #milk-mustache-database .grid, #milk-mustache-database .grid.category-grid, #milk-mustache-database .category-grid{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important; justify-content:center !important; justify-items:center !important; } #milk-mustache-database .grid >.card, #milk-mustache-database .category-grid >.card{ width:100% !important; max-width:300px !important; } #milk-mustache-database .gallery{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),320px)) !important; justify-content:center !important; justify-items:center !important; } #milk-mustache-database .merchgrid{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important; justify-content:center !important; } #milk-mustache-database .keygrid, #milk-mustache-database .buygrid, #milk-mustache-database .sourcegrid{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),340px)) !important; justify-content:center !important; } #milk-mustache-database .mm-wb-grid{ grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),260px)) !important; justify-content:center !important; } #milk-mustache-database .stats{ grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),220px)) !important; justify-content:center !important; } /* the year-row heading and its count centre with the cards beneath them */ #milk-mustache-database .year-heading{ justify-content:center !important; text-align:center !important; } /*.txgrid holds label/value rows inside a record, not cards - left-aligned is correct there, so it is deliberately untouched. */ /* v243. Proper prose typography for the home-page sections. The paragraphs had no measure at all - they ran the full 1440px panel width, which at 16px is roughly 180 characters a line. Comfortable reading is 45-75. That is why the text read as a slab instead of flowing. Set to 68ch, centred in the panel, with real spacing between paragraphs and a slightly looser line-height. */ #milk-mustache-database #home.campaign-intro p, #milk-mustache-database #home.campaign-history p, #milk-mustache-database #home #mm-mustache-facts p, #milk-mustache-database #home.mm-era-panel p{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; margin-block:0 0 1.05em !important; line-height:1.72 !important; font-size:16.5px !important; text-align:left !important; hyphens:none; } #milk-mustache-database #home.campaign-intro p:last-child, #milk-mustache-database #home.campaign-history p:last-child, #milk-mustache-database #home #mm-mustache-facts p:last-child{ margin-bottom:0 !important; } /* headings and eyebrows share the same column so nothing sits off-axis */ #milk-mustache-database #home.campaign-intro h2, #milk-mustache-database #home.campaign-history h2, #milk-mustache-database #home.campaign-intro.eyebrow, #milk-mustache-database #home.campaign-history.eyebrow, #milk-mustache-database #home #mm-mustache-facts h3, #milk-mustache-database #home #mm-mustache-facts.eyebrow, #milk-mustache-database #home.mm-era-panel h3, #milk-mustache-database #home.mm-era-panel.eyebrow{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; text-align:left !important; } #milk-mustache-database #home.campaign-intro h2, #milk-mustache-database #home.campaign-history h2{ margin-bottom:.5em !important; } #milk-mustache-database #home.campaign-history.eyebrow, #milk-mustache-database #home #mm-mustache-facts.eyebrow, #milk-mustache-database #home.mm-era-panel.eyebrow{ margin-top:1.6em !important; } /* the era chip rows keep the same column, wrapping rather than stretching */ #milk-mustache-database #home.mm-era-panel.linkchips{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; display:flex; flex-wrap:wrap; gap:.45em; justify-content:flex-start; } #milk-mustache-database #home.mm-era-panel #mm-era-note{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; } /* v244. Title alignment audited and made consistent. The stylesheet carried 82 separate text-align declarations. Resolving each heading context against the cascade found 1,498 headings across four contexts that were NOT centred while everything comparable was: 1451 card titles (.cardbody h2) - explicitly left 29.buycard h3 - no rule at all, browser default 15.merchcard h3 - no rule at all 3.sourcecard h3 - no rule at all Already correct and left alone: record titles (953), panel headings (3,713), sub-panel headings (826), primary-meta headings (606), gallery asset titles (1,757), variant headings (874), year and category headings, checklist categories. */ /* the four that were out of step */ #milk-mustache-database .cardbody, #milk-mustache-database .cardbody h2, #milk-mustache-database .cardbody.eyebrow, #milk-mustache-database .cardbody.meta, #milk-mustache-database .buycard h3, #milk-mustache-database .merchcard h3, #milk-mustache-database .merchcard.eyebrow, #milk-mustache-database .sourcecard h3{ text-align:center !important; } #milk-mustache-database .cardbody.badge{ display:inline-block; margin-left:auto; margin-right:auto; } #milk-mustache-database .cardbody{ display:flex; flex-direction:column; align-items:center; } /* PROSE HEADINGS: centred, but over their own 68ch column rather than the full panel. A heading centred on 1440px sits visibly off-axis from a 610px column of text beneath it, which reads as a mistake rather than a choice. */ #milk-mustache-database #home.campaign-intro h2, #milk-mustache-database #home.campaign-history h2, #milk-mustache-database #home.campaign-intro.eyebrow, #milk-mustache-database #home.campaign-history.eyebrow, #milk-mustache-database #home #mm-mustache-facts h3, #milk-mustache-database #home #mm-mustache-facts.eyebrow, #milk-mustache-database #home.mm-era-panel h3, #milk-mustache-database #home.mm-era-panel.eyebrow{ text-align:center !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; } /* body copy stays left - centred paragraphs are hard to read at any length */ #milk-mustache-database #home.campaign-intro p, #milk-mustache-database #home.campaign-history p, #milk-mustache-database #home #mm-mustache-facts p, #milk-mustache-database #home.mm-era-panel p, #milk-mustache-database .panel p, #milk-mustache-database .panel li, #milk-mustache-database td{ text-align:left !important; } /* table headers follow their columns */ #milk-mustache-database th{text-align:left !important} /* v246. The wordmark replaces the plain h1. The logo is black lettering with a white outline and milk drips, on a transparent background. Composited over the site's #05090c header the black fill reads as hollow letterforms carried by the white outline and the drips - which suits a milk wordmark, so no backing plate is needed. The h1 is kept for search engines and screen readers, with its text visually hidden rather than removed. */ #milk-mustache-database .brand{ background:transparent !important; border:0 !important; padding:6px 14px 4px !important; box-shadow:none !important; } #milk-mustache-database .brand h1{ margin:0 !important; line-height:0 !important; font-size:0 !important; text-shadow:none !important; } #milk-mustache-database .brand h1.mm-logo{ display:block; width:min(100%,760px); height:auto; margin:0 auto; filter:drop-shadow(0 2px 10px rgba(143,216,246,.18)); } #milk-mustache-database .brand h1.mm-logo-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } @media (max-width:820px){ #milk-mustache-database .brand h1.mm-logo{width:min(100%,520px)} } @media (max-width:520px){ #milk-mustache-database .brand h1.mm-logo{width:min(100%,340px)} } /* v247. Thicker blue outlines. Everything was 1px - the thinnest a border can be - and at 55% opacity that reads as a hairline, not an outline. Widths go up AND opacity with them, because a thick line at low opacity just looks like a smudge. containers 1px -> 2px, opacity.55 ->.70 small cards 1px -> 2px, opacity.55 ->.62 pills 1px -> 2px, opacity.62 ->.78 buttons 1px -> 2px at full strength inputs 1px -> 2px at full strength welcome rule 4px -> 6px header edge 1px -> 2px Radii nudge up 8px -> 10px so a 2px border does not look pinched at the corners. */ #milk-mustache-database .panel, #milk-mustache-database .card, #milk-mustache-database .stat, #milk-mustache-database .stats.stat, #milk-mustache-database .tablewrap, #milk-mustache-database .detailtitle, #milk-mustache-database .campaign-intro, #milk-mustache-database .campaign-history-standalone, #milk-mustache-database .archive-intro, #milk-mustache-database .archive-search-panel, #milk-mustache-database .browser-find, #milk-mustache-database .year-heading, #milk-mustache-database .keycard, #milk-mustache-database .buycard, #milk-mustache-database .sourcecard, #milk-mustache-database .category-heading, #milk-mustache-database details.variantblock{ border:2px solid rgba(143,216,246,.70) !important; border-radius:10px !important; } #milk-mustache-database .asset, #milk-mustache-database .merchcard, #milk-mustache-database .subpanel{ border:2px solid rgba(143,216,246,.62) !important; border-radius:10px !important; } /* nested panels stay a step quieter so the hierarchy still reads */ #milk-mustache-database .panel.panel, #milk-mustache-database .panel.subpanel{ border:2px solid rgba(143,216,246,.42) !important; } /* interactive controls: thicker and full strength */ #milk-mustache-database button, #milk-mustache-database .archive-search-row button, #milk-mustache-database .checklist-tools button, #milk-mustache-database #home.archive-search-panel button, #milk-mustache-database input[type="text"], #milk-mustache-database input[type="search"], #milk-mustache-database .archive-search-row input, #milk-mustache-database select{ border:2px solid #8fd8f6 !important; border-radius:10px !important; } #milk-mustache-database button:hover, #milk-mustache-database button:focus, #milk-mustache-database input:focus{ border-color:#cbedfc !important; box-shadow:0 0 0 4px rgba(143,216,246,.24) !important; } /* pills */ #milk-mustache-database .badge, #milk-mustache-database .chip, #milk-mustache-database .chronology-tag, #milk-mustache-database .yearcount, #milk-mustache-database .variant-tag, #milk-mustache-database .back, #milk-mustache-database .year-index a{ border:2px solid rgba(143,216,246,.78) !important; } /* masthead and footer */ #milk-mustache-database .nav{border:2px solid rgba(143,216,246,.60) !important;border-radius:12px !important} #milk-mustache-database>header{border-bottom:2px solid rgba(143,216,246,.70) !important} #milk-mustache-database .site-footer{border-top:2px solid #91cee8 !important} #milk-mustache-database .visual-record-note{border:2px solid #91cee8 !important;border-radius:10px !important} #milk-mustache-database th{border-bottom:2px solid rgba(143,216,246,.78) !important} /* the welcome panel's accent rule */ #milk-mustache-database #home.campaign-intro{ border:2px solid rgba(143,216,246,.70) !important; border-top:6px solid #8fd8f6 !important; border-radius:10px !important; } #milk-mustache-database #home.mm-welcome-art{ border-bottom:2px solid rgba(143,216,246,.70) !important; } /* focus rings scale with everything else */ #milk-mustache-database a:focus-visible, #milk-mustache-database button:focus-visible, #milk-mustache-database summary:focus-visible, #milk-mustache-database input:focus-visible{ outline:3px solid #8fd8f6 !important; outline-offset:2px !important; } /* v248b. The nav BUTTONS, which the v240 blue pass and the v247 thickening both missed - they only ever targeted.nav, the container. Resolving.nav a against the cascade, the winning rule was: border: 1px solid #444 !important A 1px GREY border. So the menu buttons were neither blue nor thick while everything around them had become both. */ #milk-mustache-database .nav a{ border:2px solid rgba(143,216,246,.70) !important; border-radius:10px !important; padding:.42em.8em !important; background:rgba(143,216,246,.10) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; text-decoration:none !important; transition:border-color.12s ease, background.12s ease; } #milk-mustache-database .nav a:hover, #milk-mustache-database .nav a:focus{ border-color:#8fd8f6 !important; background:rgba(143,216,246,.24) !important; color:#fff !important; } #milk-mustache-database .nav a:focus-visible{ outline:3px solid #8fd8f6 !important; outline-offset:2px !important; } /* the current view reads as selected */ #milk-mustache-database .nav a:active{ border-color:#cbedfc !important; background:rgba(143,216,246,.32) !important; } /* v250. Footer centring, made explicit and belt-and-braces. text-align:center was already declared on.site-footer, but as the ONLY declaration in that v228 rule without !important - everything around it (border, background, padding, margin) carried the flag and it did not. That makes it fragile: any later rule, or a plain.site-footer{text-align:left} from the original stylesheet, takes it. Rather than rely on that, the footer is now centred three ways: the text, the block itself, and its inline children. */ #milk-mustache-database .site-footer{ text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:.3em; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; padding:1.5em 1.2em !important; box-sizing:border-box !important; } #milk-mustache-database .site-footer strong, #milk-mustache-database .site-footer a, #milk-mustache-database .site-footer p, #milk-mustache-database .site-footer div, #milk-mustache-database .site-footer span{ text-align:center !important; } /* the wordmark line reads as a heading above the credit */ #milk-mustache-database .site-footer strong{ font-size:1.08em; letter-spacing:.01em; display:block; } /* the <br> is redundant once the footer is a flex column */ #milk-mustache-database .site-footer br{display:none} /* v253. A design system, replacing ad-hoc values with a scale. The audit found 22 distinct font sizes, 26 distinct px spacing values, a flat #000 background and 3 transitions across the whole site. Nothing was on a scale, so nothing felt deliberate. This layer sits ON TOP of the corrections already made - centring, white pills, thick blue outlines all survive. It changes depth, rhythm, type and motion. */ #milk-mustache-database{ /* spacing: a 4px base, doubling */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* type: a 1.2 modular scale */ --t-xs:11px; --t-sm:13px; --t-base:16px; --t-md:19px; --t-lg:23px; --t-xl:28px; --t-2xl:34px; /* surfaces, layered rather than flat */ --surface-0:#05090c; --surface-1:#0a1116; --surface-2:#0f1920; --edge:rgba(143,216,246,.70); --edge-soft:rgba(143,216,246,.42); --glow:rgba(143,216,246,.16); } /* ---- DEPTH: the page is no longer flat black ------------------------- */ html,body{background:#04070a !important} #milk-mustache-database{ background: radial-gradient(1200px 600px at 50% -8%, rgba(143,216,246,.075), transparent 62%), radial-gradient(900px 500px at 12% 32%, rgba(143,216,246,.045), transparent 58%), radial-gradient(900px 500px at 88% 68%, rgba(143,216,246,.038), transparent 58%), #04070a !important; background-attachment:fixed !important; } /* ---- SURFACES: panels sit on the page, not in it --------------------- */ #milk-mustache-database .panel, #milk-mustache-database .campaign-intro, #milk-mustache-database .campaign-history-standalone, #milk-mustache-database .archive-intro, #milk-mustache-database .archive-search-panel, #milk-mustache-database .tablewrap, #milk-mustache-database .detailtitle{ background:linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45) !important; } /* ---- CARDS: objects you can pick up ---------------------------------- */ #milk-mustache-database .card{ background:linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(0,0,0,.4) !important; transition:transform.18s cubic-bezier(.2,.7,.3,1), box-shadow.18s ease, border-color.18s ease !important; overflow:hidden; } #milk-mustache-database .card:hover, #milk-mustache-database .card:focus-within{ transform:translateY(-4px) !important; border-color:#8fd8f6 !important; box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 16px 38px rgba(0,0,0,.55), 0 0 0 1px rgba(143,216,246,.30), 0 0 34px rgba(143,216,246,.14) !important; } #milk-mustache-database .card.thumb{ background:radial-gradient(120% 100% at 50% 0%, rgba(143,216,246,.10), rgba(6,11,15,.9)) !important; overflow:hidden; } #milk-mustache-database .card.thumb img{ transition:transform.3s cubic-bezier(.2,.7,.3,1); } #milk-mustache-database .card:hover.thumb img{transform:scale(1.045)} /* ---- TYPE: a scale, and headings with presence ----------------------- */ #milk-mustache-database .cardbody h2{ font-size:var(--t-base) !important; line-height:1.3 !important; letter-spacing:-.012em !important; font-weight:800 !important; } #milk-mustache-database .cardbody.eyebrow, #milk-mustache-database .eyebrow{ font-size:var(--t-xs) !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:750 !important; color:#8fd8f6 !important; -webkit-text-fill-color:#8fd8f6 !important; opacity:.95; } #milk-mustache-database .cardbody.meta{ font-size:var(--t-xs) !important; opacity:.72; } #milk-mustache-database .detailtitle > h2{ font-size:clamp(24px,2.6vw,var(--t-2xl)) !important; line-height:1.14 !important; letter-spacing:-.022em !important; font-weight:850 !important; } #milk-mustache-database .panel > h3{ font-size:var(--t-md) !important; letter-spacing:-.01em !important; font-weight:800 !important; } #milk-mustache-database .year-heading h2{ font-size:clamp(26px,3vw,var(--t-2xl)) !important; letter-spacing:-.03em !important; font-weight:900 !important; } /* ---- YEAR HEADINGS: a divider with weight ---------------------------- */ #milk-mustache-database .year-heading{ background:linear-gradient(180deg, rgba(143,216,246,.10), rgba(143,216,246,.02)) !important; padding:var(--s4) var(--s5) !important; margin-block:var(--s7) var(--s4) !important; } /* ---- BADGES: smaller, sharper --------------------------------------- */ #milk-mustache-database .badge{ font-size:9.5px !important; letter-spacing:.08em !important; text-transform:uppercase !important; padding:3px 8px !important; font-weight:800 !important; border-width:1px !important; } /* ---- HERO IMAGES: the artwork is the point --------------------------- */ #milk-mustache-database .hero, #milk-mustache-database .assetimg{ background:radial-gradient(120% 100% at 50% 0%, rgba(143,216,246,.09), rgba(5,9,12,.92)) !important; box-shadow:0 1px 0 rgba(255,255,255,.05) inset !important; } #milk-mustache-database .asset{ transition:transform.18s cubic-bezier(.2,.7,.3,1), box-shadow.18s ease, border-color.18s ease; } #milk-mustache-database .asset:hover{ transform:translateY(-3px); border-color:#8fd8f6 !important; box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(143,216,246,.12) !important; } /* ---- MOTION on everything interactive -------------------------------- */ #milk-mustache-database a, #milk-mustache-database button, #milk-mustache-database summary, #milk-mustache-database .chip, #milk-mustache-database .back, #milk-mustache-database .year-index a{ transition:background.15s ease, border-color.15s ease, color.15s ease, transform.15s ease !important; } #milk-mustache-database .nav a:hover{transform:translateY(-1px)} #milk-mustache-database .back:hover{transform:translateX(-2px)} /* ---- RHYTHM ---------------------------------------------------------- */ #milk-mustache-database .panel{padding:var(--s5) !important;margin-bottom:var(--s4) !important} #milk-mustache-database .grid, #milk-mustache-database .gallery, #milk-mustache-database .category-grid{gap:var(--s4) !important} #milk-mustache-database .cardbody{padding:var(--s3) var(--s3) var(--s4) !important;gap:var(--s1)} /* ---- SELECTION + SCROLLBAR ------------------------------------------- */ #milk-mustache-database ::selection{background:rgba(143,216,246,.32);color:#fff} #milk-mustache-database{scrollbar-color:rgba(143,216,246,.4) transparent} @media (prefers-reduced-motion:reduce){ #milk-mustache-database *{transition:none !important} #milk-mustache-database .card:hover, #milk-mustache-database .asset:hover{transform:none !important} } .mm-news-list{display:flex;flex-direction:column;gap:10px;margin-top:12px} .mm-news-item{ display:block;padding:12px 14px;border-radius:10px;text-decoration:none; background:linear-gradient(180deg,#0f1920,#0a1116); border:2px solid rgba(143,216,246,.45); transition:transform.15s ease,border-color.15s ease,box-shadow.15s ease; } .mm-news-item:hover{transform:translateY(-2px);border-color:#8fd8f6; box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 22px rgba(143,216,246,.12)} .mm-news-item.t{display:block;font-weight:800;line-height:1.34;color:#fff;font-size:15px} .mm-news-item.m{display:block;margin-top:5px;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:#8fd8f6;opacity:.95} .mm-news-status{margin-top:10px;font-size:13px;color:#cbe8f6;opacity:.85} .mm-news-empty{font-size:13px;opacity:.8;padding:10px 0} /* v256. Art direction: PRINT plus MILK. Four inline SVG assets, about 1.6 KB total, no external requests: grain fractal-noise paper texture, overlay-blended halftone a 14px dot screen behind every image frame drip a poured-milk edge tiling under section headings watermark a large mustache silhouette repeating in the background */ #milk-mustache-database{ --milk:#f4fafd; --grain:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch' result='f'/><feTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='2' stitchTiles='stitch' result='c'/><feBlend in='f' in2='c' mode='multiply' result='b'/><feColorMatrix in='b' type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(#g)' opacity='0.5'/></svg>"); --halftone:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='0.00' cy='0.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='0.00' cy='24.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='24.00' cy='0.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='24.00' cy='24.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='6.00' cy='0.00' r='1.71' fill='%238fd8f6' opacity='0.28'/><circle cx='6.00' cy='24.00' r='1.71' fill='%238fd8f6' opacity='0.28'/><circle cx='12.00' cy='0.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='12.00' cy='24.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='18.00' cy='0.00' r='1.55' fill='%238fd8f6' opacity='0.25'/><circle cx='18.00' cy='24.00' r='1.55' fill='%238fd8f6' opacity='0.25'/><circle cx='3.00' cy='6.00' r='1.90' fill='%238fd8f6' opacity='0.31'/><circle cx='9.00' cy='6.00' r='1.83' fill='%238fd8f6' opacity='0.30'/><circle cx='15.00' cy='6.00' r='1.20' fill='%238fd8f6' opacity='0.19'/><circle cx='21.00' cy='6.00' r='1.56' fill='%238fd8f6' opacity='0.25'/><circle cx='0.00' cy='12.00' r='1.58' fill='%238fd8f6' opacity='0.25'/><circle cx='24.00' cy='12.00' r='1.58' fill='%238fd8f6' opacity='0.25'/><circle cx='6.00' cy='12.00' r='1.17' fill='%238fd8f6' opacity='0.18'/><circle cx='12.00' cy='12.00' r='1.81' fill='%238fd8f6' opacity='0.30'/><circle cx='18.00' cy='12.00' r='1.91' fill='%238fd8f6' opacity='0.31'/><circle cx='3.00' cy='18.00' r='1.52' fill='%238fd8f6' opacity='0.24'/><circle cx='9.00' cy='18.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='15.00' cy='18.00' r='1.73' fill='%238fd8f6' opacity='0.28'/><circle cx='21.00' cy='18.00' r='1.03' fill='%238fd8f6' opacity='0.16'/></svg>"); --drip:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='78' viewBox='0 0 240 78'><defs><linearGradient id='d' x1='0' y1='0' x2='.22' y2='1'><stop offset='0' stop-color='%23fffdfa'/><stop offset='.55' stop-color='%23f2efeb'/><stop offset='1' stop-color='%23c9c4bd'/></linearGradient></defs><g fill='url(%23d)'><path d='M0 0 L240 0 L240 16 C192 13 144 18 96 15 C48 13 19 17 0 16 Z'/><path d='M4.0 15.0 C4.0 17.7 8.2 17.7 8.2 20.4 C8.2 24.3 11.7 24.3 11.7 28.2 C11.7 33.6 11.8 33.6 11.8 39.0 C11.8 43.6 12.5 43.6 12.5 48.3 C12.5 51.0 13.8 51.0 13.8 53.7 L16.1 53.7 C16.1 51.0 17.5 51.0 17.5 48.3 C17.5 43.6 18.1 43.6 18.1 39.0 C18.1 33.6 18.3 33.6 18.3 28.2 C18.3 24.3 21.8 24.3 21.8 20.4 C21.8 17.7 26.0 17.7 26.0 15.0 Z'/><path d='M43.1 15.0 C43.1 16.9 48.5 16.9 48.5 18.9 C48.5 21.6 53.1 21.6 53.1 24.4 C53.1 28.3 54.3 28.3 54.3 32.1 C54.3 35.4 54.9 35.4 54.9 38.8 C54.9 40.7 56.3 40.7 56.3 42.6 L58.5 42.6 C58.5 40.7 59.8 40.7 59.8 38.8 C59.8 35.4 60.5 35.4 60.5 32.1 C60.5 28.3 61.7 28.3 61.7 24.4 C61.7 21.6 66.3 21.6 66.3 18.9 C66.3 16.9 71.7 16.9 71.7 15.0 Z'/><path d='M89.1 15.0 C89.1 15.9 94.2 15.9 94.2 16.8 C94.2 18.1 98.6 18.1 98.6 19.5 C98.6 21.3 99.6 21.3 99.6 23.1 C99.6 24.7 100.2 24.7 100.2 26.3 C100.2 26.9 97.6 26.9 97.6 27.4 C97.6 27.8 99.0 27.8 99.0 28.1 L106.2 28.1 C106.2 27.8 107.6 27.8 107.6 27.4 C107.6 26.9 105.0 26.9 105.0 26.3 C105.0 24.7 105.6 24.7 105.6 23.1 C105.6 21.3 106.7 21.3 106.7 19.5 C106.7 18.1 111.0 18.1 111.0 16.8 C111.0 15.9 116.1 15.9 116.1 15.0 Z'/><path d='M138.1 15.0 C138.1 16.4 142.8 16.4 142.8 17.8 C142.8 19.8 146.7 19.8 146.7 21.7 C146.7 24.5 148.3 24.5 148.3 27.3 C148.3 29.7 148.8 29.7 148.8 32.1 C148.8 33.4 149.7 33.4 149.7 34.8 L151.2 34.8 C151.2 33.4 152.1 33.4 152.1 32.1 C152.1 29.7 152.5 29.7 152.5 27.3 C152.5 24.5 154.1 24.5 154.1 21.7 C154.1 19.8 158.1 19.8 158.1 17.8 C158.1 16.4 162.8 16.4 162.8 15.0 Z'/><path d='M170.6 15.0 C170.6 16.8 173.8 16.8 173.8 18.5 C173.8 21.1 176.4 21.1 176.4 23.6 C176.4 27.1 176.3 27.1 176.3 30.6 C176.3 33.7 176.8 33.7 176.8 36.7 C176.8 37.8 174.6 37.8 174.6 39.0 C174.6 39.6 175.8 39.6 175.8 40.2 L182.0 40.2 C182.0 39.6 183.3 39.6 183.3 39.0 C183.3 37.8 181.0 37.8 181.0 36.7 C181.0 33.7 181.5 33.7 181.5 30.6 C181.5 27.1 181.4 27.1 181.4 23.6 C181.4 21.1 184.1 21.1 184.1 18.5 C184.1 16.8 187.2 16.8 187.2 15.0 Z'/><path d='M194.6 15.0 C194.6 17.2 198.3 17.2 198.3 19.4 C198.3 22.5 201.4 22.5 201.4 25.7 C201.4 30.1 201.3 30.1 201.3 34.5 C201.3 38.2 202.0 38.2 202.0 42.0 C202.0 44.2 203.3 44.2 203.3 46.4 L205.5 46.4 C205.5 44.2 206.8 44.2 206.8 42.0 C206.8 38.2 207.4 38.2 207.4 34.5 C207.4 30.1 207.3 30.1 207.3 25.7 C207.3 22.5 210.5 22.5 210.5 19.4 C210.5 17.2 214.2 17.2 214.2 15.0 Z'/><path d='M230.4 15.0 C230.4 16.0 236.1 16.0 236.1 16.9 C236.1 18.3 240.8 18.3 240.8 19.6 C240.8 21.6 241.9 21.6 241.9 23.5 C241.9 25.1 242.6 25.1 242.6 26.7 C242.6 27.4 239.7 27.4 239.7 28.0 C239.7 28.3 241.3 28.3 241.3 28.7 L249.2 28.7 C249.2 28.3 250.8 28.3 250.8 28.0 C250.8 27.4 247.9 27.4 247.9 26.7 C247.9 25.1 248.5 25.1 248.5 23.5 C248.5 21.6 249.7 21.6 249.7 19.6 C249.7 18.3 254.4 18.3 254.4 16.9 C254.4 16.0 260.1 16.0 260.1 15.0 Z'/><ellipse cx='15' cy='63' rx='2.0' ry='2.6'/></g><g fill='%23ffffff'><ellipse cx='12.1' cy='30' rx='1.1' ry='6.6' opacity='0.5'/><ellipse cx='53.7' cy='26' rx='1.4' ry='4.7' opacity='0.5'/><ellipse cx='99.1' cy='20' rx='1.4' ry='2.2' opacity='0.5'/><ellipse cx='147.2' cy='23' rx='1.2' ry='3.4' opacity='0.5'/><ellipse cx='176.8' cy='25' rx='0.8' ry='4.3' opacity='0.5'/><ellipse cx='201.8' cy='28' rx='1.0' ry='5.3' opacity='0.5'/><ellipse cx='241.4' cy='20' rx='1.5' ry='2.3' opacity='0.5'/></g></svg>"); --stache:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='240' viewBox='0 0 560 240'><path d='M170 88 L179 92 L179 97 L191 98 L200 102 L212 118 L210 122 L218 120 L231 130 L241 129 L246 134 L253 133 L267 138 L273 134 L277 137 L296 142 L302 141 L310 138 L321 134 L327 138 L333 144 L342 141 L350 136 L368 129 L371 126 L378 132 L391 128 L397 120 L406 115 L419 109 L420 109 L423 108 L433 102 L437 92 L449 88 L445 136 L436 149 L429 149 L425 156 L417 168 L418 175 L408 173 L404 185 L384 186 L378 191 L378 191 L362 197 L356 205 L345 207 L332 207 L323 205 L323 204 L305 209 L305 211 L294 207 L286 205 L269 203 L270 196 L256 202 L251 197 L236 192 L225 184 L224 181 L212 181 L210 170 L200 165 L187 157 L180 148 L173 145 L174 133 Z' fill='%238fd8f6' opacity='0.055'/></svg>"); } #milk-mustache-database::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--stache);background-size:420px auto;background-repeat:repeat;opacity:.85; } #milk-mustache-database::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--grain);opacity:.11;mix-blend-mode:overlay; } #milk-mustache-database > header, #milk-mustache-database > main, #milk-mustache-database .mm-smiley-band{position:relative;z-index:1} #milk-mustache-database .thumb, #milk-mustache-database .hero, #milk-mustache-database .assetimg{position:relative} #milk-mustache-database .thumb::before, #milk-mustache-database .hero::before, #milk-mustache-database .assetimg::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--halftone);opacity:.5; } #milk-mustache-database .thumb img, #milk-mustache-database .hero img, #milk-mustache-database .assetimg img, #milk-mustache-database .hero.placeholder{position:relative;z-index:1} #milk-mustache-database .year-heading, #milk-mustache-database .category-heading{position:relative;overflow:visible} #milk-mustache-database .year-heading::after, #milk-mustache-database .category-heading::after{ content:"";position:absolute;left:-2px;right:-2px;bottom:-60px;height:78px; background-image:var(--drip);background-size:240px 78px;background-repeat:repeat-x; opacity:.92;pointer-events:none;z-index:2; } #milk-mustache-database .year-heading{margin-bottom:52px !important} #milk-mustache-database #home.campaign-intro{position:relative;overflow:visible} #milk-mustache-database #home.campaign-intro::after{ content:"";position:absolute;left:-2px;right:-2px;bottom:-59px;height:78px; background-image:var(--drip);background-size:240px 78px;background-repeat:repeat-x; opacity:.55;pointer-events:none;z-index:2; } #milk-mustache-database .detailtitle > h2, #milk-mustache-database .year-heading h2{ color:var(--milk) !important;-webkit-text-fill-color:var(--milk) !important; text-shadow:0 2px 22px rgba(143,216,246,.14); } #milk-mustache-database .brand h1.mm-logo{filter:drop-shadow(0 3px 16px rgba(143,216,246,.24))} #milk-mustache-database .thumb img, #milk-mustache-database .assetimg img{box-shadow:0 6px 22px rgba(0,0,0,.55)} #milk-mustache-database .companion-record.visual-record-note{background:#fff4e6!important;border:2px solid #d8a24a!important;color:#3a2a10!important}#milk-mustache-database .companion-record.visual-record-note *{color:#3a2a10!important}#milk-mustache-database .companion-record.detailtitle>h2{color:#ffd9a0!important;-webkit-text-fill-color:#ffd9a0!important}#milk-mustache-database #companion.card.badge{background:rgba(216,162,74,.30)!important;border-color:rgba(255,217,160,.62)!important} /* v258. Karat Medium enforced across the entire site. Three problems found: 1.mm-trade-out (the trade-list textarea added in v255) was set to ui-monospace/Menlo/Consolas. That was my choice for a plain-text output box and it was wrong - it is the only element on the site not in the brand face. 2. FORM CONTROLS AND <code> DO NOT INHERIT font-family. Browsers apply their own UI font to input, button, select and textarea, and a monospace default to code and pre, regardless of what the page font is. Nothing in the stylesheet told them otherwise, so 2,976 inputs, 389 code elements, 6 buttons and the textarea were all rendering in something other than Karat. 3. NO @font-face RULE EXISTS. The stack is declared as "KaratMedium Regular","KaratMedium",Arial,sans-serif but the font is never loaded, so it only appears for visitors who happen to have it installed locally. Everyone else has been seeing Arial. The scaffold is at the bottom of this block, commented, ready for the font files. */ /* --- every element, including the ones that opt out by default --- */ #milk-mustache-database, #milk-mustache-database *, #milk-mustache-database input, #milk-mustache-database button, #milk-mustache-database select, #milk-mustache-database textarea, #milk-mustache-database code, #milk-mustache-database pre, #milk-mustache-database table, #milk-mustache-database th, #milk-mustache-database td, #milk-mustache-database h1, #milk-mustache-database h2, #milk-mustache-database h3, #milk-mustache-database h4, #milk-mustache-database .mm-trade-out, #milk-mustache-database .mm-news-item, #milk-mustache-database .badge, #milk-mustache-database .chip, #milk-mustache-database .eyebrow, .mm-smiley-band, .mm-smiley-band *{ font-family:"KaratMedium Regular","KaratMedium","Karat Medium",Karat,Arial,sans-serif !important; } /* code keeps its tabular feel without leaving the family */ #milk-mustache-database code, #milk-mustache-database .mm-trade-out{ font-variant-numeric:tabular-nums; letter-spacing:.01em; } #milk-mustache-database .mm-trade-out{line-height:1.55} @font-face{ font-family:"KaratMedium"; src:url("KaratMedium.woff2") format("woff2"), url("KaratMedium.woff") format("woff"); font-weight:400 900; font-style:normal; font-display:swap; } /* v262. The design work from v253 and v256 was applied and winning the cascade, but pitched between 4% and 11% on a near-black page. Measured against the background, every layer sat 22-64 points out of 765 - below the threshold where a screen shows anything. It was invisible, not subtle. Everything below is the SAME design, turned up to where it reads. */ #milk-mustache-database{ --surface-1:#0d1721; --surface-2:#1a2a37; /* was #0f1920 - the gradient had 23 points of range */ --surface-3:#22323f; } /* ---- BACKGROUND: washes you can actually see -------------------------- */ html,body{background:#050a10 !important} #milk-mustache-database{ background: radial-gradient(1300px 680px at 50% -6%, rgba(143,216,246,.26), transparent 60%), radial-gradient(980px 560px at 8% 36%, rgba(143,216,246,.15), transparent 58%), radial-gradient(980px 560px at 92% 72%, rgba(143,216,246,.13), transparent 58%), linear-gradient(180deg,#0a141d 0%, #050a10 55%, #071019 100%) !important; background-attachment:fixed !important; } /* watermark and grain, raised from 5.5% and 11% */ #milk-mustache-database::before{opacity:1 !important} #milk-mustache-database::after{opacity:.34 !important; mix-blend-mode:soft-light !important} /* ---- SURFACES: a gradient with real range ----------------------------- */ #milk-mustache-database .panel, #milk-mustache-database .campaign-intro, #milk-mustache-database .campaign-history-standalone, #milk-mustache-database .archive-intro, #milk-mustache-database .archive-search-panel, #milk-mustache-database .tablewrap, #milk-mustache-database .detailtitle{ background:linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 62%, #0a1119 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.13) inset, 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(143,216,246,.10) !important; } #milk-mustache-database .panel.panel, #milk-mustache-database .subpanel{ background:linear-gradient(168deg,#1f303e,#131f2a) !important; } /* ---- CARDS: visible lift, visible glow -------------------------------- */ #milk-mustache-database .card{ background:linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 70%, #0a1119 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px rgba(0,0,0,.55) !important; } #milk-mustache-database .card:hover, #milk-mustache-database .card:focus-within{ background:linear-gradient(168deg, var(--surface-3) 0%, #16242f 70%, #0d1520 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 22px 48px rgba(0,0,0,.66), 0 0 0 2px rgba(143,216,246,.55), 0 0 46px rgba(143,216,246,.32) !important; } /* ---- IMAGE FRAMES: the halftone should be legible --------------------- */ #milk-mustache-database .thumb, #milk-mustache-database .hero, #milk-mustache-database .assetimg{ background:radial-gradient(130% 105% at 50% 0%, rgba(143,216,246,.30), rgba(6,12,18,.96)) !important; } #milk-mustache-database .thumb::before, #milk-mustache-database .hero::before, #milk-mustache-database .assetimg::before{opacity:1 !important} /* ---- YEAR HEADINGS: a real chapter break ------------------------------ */ #milk-mustache-database .year-heading{ background:linear-gradient(180deg, rgba(143,216,246,.30), rgba(143,216,246,.07)) !important; box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 12px 32px rgba(0,0,0,.5) !important; } /* ---- MILK DRIPS: they were at 92% but the sheet was near-transparent -- */ #milk-mustache-database .year-heading::after, #milk-mustache-database .category-heading::after{opacity:1 !important} #milk-mustache-database #home.campaign-intro::after{opacity:.85 !important} /* ---- EYEBROWS and accents --------------------------------------------- */ #milk-mustache-database .eyebrow{ color:#a7e0f8 !important; -webkit-text-fill-color:#a7e0f8 !important; opacity:1 !important; } #milk-mustache-database .detailtitle > h2, #milk-mustache-database .year-heading h2{ text-shadow:0 2px 30px rgba(143,216,246,.34) !important; } /* v263. More milk in the design. Three new assets, all inline SVG: coronet a milk-drop crown, 16 spikes on an ellipse merged by a gooey filter so they neck at the rim the way a real splash does rings the mark a glass leaves, wobbled off-round so it reads as a stain foam bubbles with specular dots, layered behind the halftone Plus a milk fill that rises inside a card when you hover it. */ #milk-mustache-database{ --coronet:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'><defs><filter id='g' x='-20%' y='-25%' width='140%' height='150%'><feGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/><feColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -11'/></filter></defs><g filter='url(#g)' opacity='0.9'><ellipse cx='200' cy='168' rx='104' ry='34' fill='%23ffffff'/><path d='M296 150 C300 115 306 106 306 87' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='306' cy='87' r='11.2' fill='%23ffffff'/><path d='M289 163 C292 125 298 114 298 93' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='298' cy='93' r='10.9' fill='%23ffffff'/><path d='M268 174 C271 137 275 127 275 107' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='275' cy='107' r='10.3' fill='%23ffffff'/><path d='M237 181 C238 150 241 142 241 124' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='241' cy='124' r='9.2' fill='%23ffffff'/><path d='M200 184 C200 149 200 140 200 121' fill='none' stroke='%23ffffff' stroke-width='13' stroke-linecap='round'/><circle cx='200' cy='121' r='8.1' fill='%23ffffff'/><path d='M163 181 C162 143 159 133 159 112' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='159' cy='112' r='9.2' fill='%23ffffff'/><path d='M132 174 C129 137 125 127 125 107' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='125' cy='107' r='10.3' fill='%23ffffff'/><path d='M111 163 C108 132 102 123 102 106' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='102' cy='106' r='10.9' fill='%23ffffff'/><path d='M104 150 C100 115 94 106 94 87' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='94' cy='87' r='11.2' fill='%23ffffff'/><path d='M111 137 C108 99 102 88 102 67' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='102' cy='67' r='10.9' fill='%23ffffff'/><path d='M132 126 C129 89 125 79 125 59' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='125' cy='59' r='10.3' fill='%23ffffff'/><path d='M163 119 C162 87 159 79 159 62' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='159' cy='62' r='9.2' fill='%23ffffff'/><path d='M200 116 C200 81 200 72 200 53' fill='none' stroke='%23ffffff' stroke-width='13' stroke-linecap='round'/><circle cx='200' cy='53' r='8.1' fill='%23ffffff'/><path d='M237 119 C238 80 241 70 241 49' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='241' cy='49' r='9.2' fill='%23ffffff'/><path d='M268 126 C271 89 275 79 275 59' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='275' cy='59' r='10.3' fill='%23ffffff'/><path d='M289 137 C292 106 298 97 298 80' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='298' cy='80' r='10.9' fill='%23ffffff'/></g></svg>"); --rings:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'><path d='M227.4 110.0 L227.9 113.1 L225.4 116.1 L221.2 118.9 L218.1 121.6 L214.4 124.3 L210.7 127.0 L206.3 129.6 L199.6 131.5 L192.9 133.2 L186.4 135.0 L178.2 135.7 L170.7 136.7 L162.7 137.0 L155.5 138.1 L148.0 139.3 L140.0 139.7 L131.6 140.7 L123.1 140.6 L115.3 139.3 L107.6 138.2 L99.9 137.0 L92.3 135.7 L86.0 133.7 L79.4 131.8 L72.7 129.9 L67.9 127.3 L63.6 124.7 L60.9 121.8 L59.8 118.8 L60.4 115.7 L60.6 112.8 L60.7 110.0 L60.1 107.2 L60.5 104.3 L61.8 101.5 L62.3 98.4 L66.2 95.8 L70.6 93.3 L76.5 91.2 L80.7 88.6 L86.5 86.5 L93.1 84.7 L99.2 82.5 L106.1 80.5 L114.1 79.3 L122.6 78.5 L131.5 79.0 L140.0 79.2 L148.2 80.1 L155.9 81.1 L163.8 81.7 L171.8 82.3 L179.4 83.5 L186.2 85.1 L192.6 86.9 L197.2 89.4 L202.1 91.7 L207.3 93.8 L211.1 96.3 L215.4 98.8 L220.7 101.2 L225.0 103.9 L227.6 106.9 L227.9 110.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='3.2' opacity='0.5'/><path d='M217.1 110.0 L215.6 112.7 L213.7 115.3 L210.5 117.7 L207.5 120.1 L205.5 122.6 L203.8 125.3 L200.6 127.9 L196.6 130.4 L190.9 132.3 L185.0 134.3 L177.7 135.4 L170.3 136.3 L162.8 137.0 L155.3 137.7 L147.9 138.7 L140.0 139.0 L132.1 139.0 L124.3 138.5 L117.3 137.0 L110.6 135.6 L104.4 134.0 L98.6 132.3 L92.8 130.7 L87.0 129.1 L82.2 127.1 L75.8 125.4 L70.8 123.3 L67.4 120.8 L65.4 118.1 L63.4 115.5 L63.2 112.7 L60.8 110.0 L60.4 107.2 L60.8 104.3 L62.2 101.5 L63.4 98.6 L68.0 96.1 L72.8 93.8 L79.1 92.0 L85.9 90.5 L92.3 89.1 L98.2 87.5 L104.5 86.1 L111.0 84.8 L117.8 83.6 L124.9 82.6 L132.6 82.9 L140.0 83.0 L147.4 82.8 L154.7 83.3 L162.4 83.4 L170.1 83.8 L177.9 84.5 L186.0 85.2 L191.9 87.2 L197.7 89.2 L201.8 91.8 L205.9 94.1 L208.3 96.9 L211.2 99.4 L214.6 101.9 L216.0 104.6 L217.7 107.2 L218.4 110.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='1.4' opacity='0.3'/><path d='M364.5 205.0 L364.2 207.3 L363.5 209.5 L360.3 211.6 L358.1 213.7 L354.9 215.6 L351.4 217.4 L348.5 219.3 L344.0 220.9 L339.8 222.5 L334.2 223.4 L328.5 224.2 L322.8 224.8 L317.2 225.4 L311.3 225.5 L305.7 226.0 L300.0 226.7 L293.9 227.3 L287.7 227.2 L281.7 226.8 L275.5 226.3 L270.6 224.8 L264.9 223.9 L260.4 222.4 L255.8 220.9 L251.1 219.4 L246.6 217.8 L242.5 216.1 L241.0 213.8 L239.4 211.6 L239.3 209.3 L240.3 207.1 L240.7 205.0 L241.9 202.9 L242.3 200.9 L242.7 198.7 L243.3 196.5 L245.8 194.6 L249.0 192.7 L252.5 191.0 L256.9 189.5 L261.4 188.1 L265.4 186.4 L270.2 184.9 L275.5 183.7 L281.0 182.5 L287.2 181.9 L293.6 181.5 L300.0 181.9 L306.1 182.7 L312.1 183.1 L317.4 184.3 L323.2 184.9 L328.9 185.5 L333.8 186.8 L338.9 187.9 L342.6 189.7 L346.7 191.2 L349.8 193.0 L352.4 194.9 L355.7 196.7 L358.0 198.7 L361.4 200.6 L363.6 202.7 L364.9 205.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='2.6' opacity='0.4'/><path d='M356.8 205.0 L356.6 207.0 L355.7 209.0 L355.3 211.0 L351.9 212.7 L349.3 214.5 L346.1 216.1 L341.4 217.2 L338.2 218.7 L334.6 220.2 L330.5 221.4 L326.7 223.0 L322.3 224.4 L317.0 225.2 L311.5 225.9 L305.7 225.8 L300.0 225.7 L294.4 225.5 L288.7 225.4 L282.9 225.3 L277.4 224.6 L272.0 223.9 L267.5 222.5 L263.2 221.2 L260.5 219.2 L257.7 217.5 L254.8 215.9 L252.1 214.2 L249.8 212.5 L247.6 210.7 L245.1 208.9 L243.7 207.0 L243.2 205.0 L242.9 203.0 L244.8 201.0 L245.2 199.0 L246.7 197.1 L249.3 195.2 L251.0 193.2 L253.7 191.3 L258.0 189.9 L262.3 188.4 L267.2 187.3 L273.3 187.0 L278.5 186.4 L284.1 186.1 L289.2 185.5 L294.5 184.9 L300.0 185.0 L305.4 185.1 L310.8 185.4 L316.2 185.8 L320.8 186.9 L325.6 187.7 L330.7 188.4 L336.1 189.2 L340.7 190.4 L345.5 191.6 L349.9 193.0 L352.5 194.9 L355.1 196.8 L355.7 198.9 L356.7 200.9 L357.4 203.0 L356.3 205.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='1.2' opacity='0.24'/></svg>"); --foam:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><circle cx='54.7' cy='66.7' r='7.1' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='52.6' cy='64.4' r='1.4' fill='%23ffffff' opacity='0.3'/><circle cx='60.9' cy='69.8' r='2.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.29'/><circle cx='74.5' cy='92.8' r='2.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.24'/><circle cx='14.2' cy='94.7' r='5.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.17'/><circle cx='12.4' cy='92.9' r='1.1' fill='%23ffffff' opacity='0.3'/><circle cx='114.0' cy='112.1' r='5.5' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.32'/><circle cx='112.4' cy='110.3' r='1.1' fill='%23ffffff' opacity='0.3'/><circle cx='21.6' cy='5.7' r='4.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='20.2' cy='4.2' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='25.3' cy='31.1' r='1.8' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='53.3' cy='98.4' r='4.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='51.9' cy='96.9' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='60.0' cy='78.2' r='4.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='58.7' cy='76.8' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='115.7' cy='115.5' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.34'/><circle cx='113.8' cy='113.4' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='39.3' cy='29.7' r='3.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='89.8' cy='48.8' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.26'/><circle cx='87.8' cy='46.7' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='111.3' cy='98.9' r='1.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.21'/><circle cx='106.0' cy='56.6' r='7.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.26'/><circle cx='103.7' cy='54.3' r='1.5' fill='%23ffffff' opacity='0.3'/><circle cx='12.2' cy='74.5' r='6.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='10.3' cy='72.5' r='1.2' fill='%23ffffff' opacity='0.3'/><circle cx='13.8' cy='41.2' r='7.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.36'/><circle cx='11.6' cy='38.9' r='1.5' fill='%23ffffff' opacity='0.3'/><circle cx='17.2' cy='31.6' r='2.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='93.3' cy='23.9' r='4.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='91.8' cy='22.3' r='1.0' fill='%23ffffff' opacity='0.3'/><circle cx='25.4' cy='86.0' r='2.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='17.0' cy='51.1' r='2.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='112.7' cy='94.0' r='3.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.39'/><circle cx='27.6' cy='48.2' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='25.6' cy='46.0' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='15.2' cy='114.8' r='2.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='90.5' cy='40.8' r='3.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='14.1' cy='69.3' r='3.0' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.32'/><circle cx='45.6' cy='54.8' r='7.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.29'/><circle cx='43.5' cy='52.4' r='1.5' fill='%23ffffff' opacity='0.3'/></svg>"); } /* ---- GLASS RINGS scattered across the page ---------------------------- */ #milk-mustache-database > main::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--rings); background-size:760px auto; background-repeat:repeat; opacity:.30; } /* ---- FOAM inside every image frame, behind the halftone --------------- */ #milk-mustache-database .thumb::after, #milk-mustache-database .hero::after, #milk-mustache-database .assetimg::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--foam); background-size:150px 150px; opacity:.5; } /* ---- CORONET marking every section heading ---------------------------- */ #milk-mustache-database .year-heading::before, #milk-mustache-database .category-heading::before{ content:"";position:absolute;right:18px;top:-30px; width:150px;height:86px; background-image:var(--coronet); background-size:contain;background-repeat:no-repeat;background-position:bottom right; opacity:.42;pointer-events:none;z-index:1; } #milk-mustache-database #home.campaign-intro{position:relative} /* ---- MILK RISES INSIDE A CARD ON HOVER -------------------------------- */ #milk-mustache-database .card{position:relative;isolation:isolate} #milk-mustache-database .card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:0; background:linear-gradient(180deg, rgba(244,250,253,.00) 0%, rgba(244,250,253,.16) 34%, rgba(232,243,250,.30) 100%); border-top:2px solid rgba(244,250,253,.78); transition:height.34s cubic-bezier(.3,.7,.3,1); pointer-events:none;z-index:0; } #milk-mustache-database .card:hover::after, #milk-mustache-database .card:focus-within::after{height:100%} #milk-mustache-database .card > *{position:relative;z-index:1} /* ---- A CORONET ON THE WELCOME PANEL ----------------------------------- */ #milk-mustache-database #home.campaign-intro::before{ content:"";position:absolute;right:22px;top:-38px; width:210px;height:118px; background-image:var(--coronet); background-size:contain;background-repeat:no-repeat;background-position:bottom right; opacity:.5;pointer-events:none;z-index:3; } @media (prefers-reduced-motion:reduce){ #milk-mustache-database .card::after{transition:none} } /* v264. The Filter by printed tagline panel is removed. The script that built it also drives variant families and checklist export, so the script stays and only the insertion is cut. This rule catches any other path that might append it. */#milk-mustache-database .mm-era-panel,#milk-mustache-database #mm-era-note{display:none!important} /* v266. The glass rings and the foam are removed. Both were thin outline circles at 30-50% opacity on a dark page, which is exactly what they looked like: scattered circles. They were not adding milk, they were adding noise. Replaced with a POUR - 36 overlapping blobs merged by a gooey filter with turbulence displacement, so the stream necks, pulses and widens as it falls before spreading into a pool. Opaque white on a gradient, with a specular core and seven droplets torn off the sides. It is heavy and it reads. */ /* --- OUT --- */ #milk-mustache-database > main::before{content:none !important;display:none !important} #milk-mustache-database .thumb::after, #milk-mustache-database .hero::after, #milk-mustache-database .assetimg::after{content:none !important;display:none !important} /* --- IN --- */ #milk-mustache-database{--pour:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='460' viewBox='0 0 340 460'><defs><filter id='g' x='-30%' y='-10%' width='160%' height='125%'><feGaussianBlur in='SourceGraphic' stdDeviation='11' result='b'/><feColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -12' result='g'/><feTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='g' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/></filter><linearGradient id='m' x1='0' y1='0' x2='.3' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f2f9fd'/><stop offset='1' stop-color='%23cfe2ee'/></linearGradient></defs><g filter='url(%23g)' fill='url(%23m)'><circle cx='170' cy='0' r='14'/><circle cx='171' cy='15' r='14'/><circle cx='172' cy='29' r='14'/><circle cx='174' cy='44' r='14'/><circle cx='175' cy='58' r='14'/><circle cx='176' cy='73' r='14'/><circle cx='177' cy='87' r='13'/><circle cx='178' cy='102' r='13'/><circle cx='179' cy='116' r='12'/><circle cx='179' cy='131' r='12'/><circle cx='180' cy='145' r='11'/><circle cx='181' cy='160' r='11'/><circle cx='181' cy='174' r='11'/><circle cx='181' cy='189' r='12'/><circle cx='182' cy='203' r='12'/><circle cx='182' cy='218' r='14'/><circle cx='182' cy='232' r='15'/><circle cx='182' cy='247' r='17'/><circle cx='182' cy='261' r='19'/><circle cx='181' cy='276' r='21'/><circle cx='181' cy='290' r='23'/><circle cx='180' cy='305' r='25'/><circle cx='180' cy='319' r='27'/><circle cx='179' cy='334' r='28'/><circle cx='178' cy='348' r='29'/><circle cx='177' cy='363' r='30'/><circle cx='176' cy='377' r='30'/><circle cx='102' cy='396' r='26'/><circle cx='119' cy='393' r='37'/><circle cx='136' cy='390' r='47'/><circle cx='153' cy='388' r='54'/><circle cx='170' cy='388' r='56'/><circle cx='187' cy='388' r='54'/><circle cx='204' cy='390' r='47'/><circle cx='221' cy='393' r='37'/><circle cx='238' cy='396' r='26'/><circle cx='239' cy='304' r='5'/><circle cx='214' cy='228' r='7'/><circle cx='217' cy='259' r='6'/><circle cx='139' cy='197' r='11'/><circle cx='119' cy='207' r='9'/><circle cx='134' cy='176' r='4'/><circle cx='114' cy='178' r='11'/></g><g filter='url(%23g)' fill='%23ffffff' opacity='.5'><circle cx='165' cy='0' r='4'/><circle cx='169' cy='44' r='4'/><circle cx='172' cy='87' r='4'/><circle cx='175' cy='131' r='4'/><circle cx='177' cy='174' r='3'/><circle cx='177' cy='218' r='4'/><circle cx='175' cy='261' r='6'/><circle cx='172' cy='305' r='8'/><circle cx='168' cy='348' r='9'/><circle cx='93' cy='396' r='8'/><circle cx='135' cy='388' r='16'/><circle cx='188' cy='390' r='14'/></g></svg>")} /* a pour down the left edge of the page, fixed so it stays as you scroll */ #milk-mustache-database > main::after{ content:"";position:fixed;left:-40px;top:0; width:300px;height:100vh;z-index:0;pointer-events:none; background-image:var(--pour); background-size:contain; background-repeat:no-repeat; background-position:left top; opacity:.20; } /* and a second, mirrored, on the right - smaller and fainter for depth */ #milk-mustache-database > header::after{ content:"";position:fixed;right:-70px;top:0; width:230px;height:88vh;z-index:0;pointer-events:none; background-image:var(--pour); background-size:contain;background-repeat:no-repeat;background-position:right top; transform:scaleX(-1);opacity:.13; } @media (max-width:1100px){ #milk-mustache-database > main::after, #milk-mustache-database > header::after{display:none} } /* the coronet was too small and too faint to read - make it count */ #milk-mustache-database .year-heading::before, #milk-mustache-database .category-heading::before{ width:210px !important;height:120px !important; top:-44px !important;right:22px !important; opacity:.75 !important; } #milk-mustache-database #home.campaign-intro::before{ width:280px !important;height:158px !important; top:-52px !important;opacity:.8 !important; } /* v267. The design reaches the header. Why it did not: the header is position:fixed with background:#000!important and overflow:hidden. It is a solid black box painted over the top of the page, so the mustache watermark, the paper grain and both pours - all of which live on ancestors or siblings - were rendering underneath it and never seen. The whole top strip of the site was bare while everything below it was decorated. The header now carries the same treatment as the page, applied to itself. */ #milk-mustache-database > header{ background: radial-gradient(900px 420px at 50% -40%, rgba(143,216,246,.30), transparent 62%), linear-gradient(180deg,#0d1a26 0%, #081119 62%, #050c13 100%) !important; overflow:visible !important; isolation:isolate; } /* mustache watermark, clipped to the header */ #milk-mustache-database > header::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--stache); background-size:420px auto;background-repeat:repeat; opacity:.85; } /* the header keeps its own pour, now visible against a non-black ground */ #milk-mustache-database > header::after{ content:"";position:absolute;right:-60px;top:-30px; width:250px;height:230px;z-index:0;pointer-events:none; background-image:var(--pour); background-size:contain;background-repeat:no-repeat;background-position:right top; transform:scaleX(-1);opacity:.30; } /* a second pour on the left of the header, mirroring the page */ #milk-mustache-database > header.top::before{ content:"";position:absolute;left:-90px;top:-34px; width:230px;height:240px;z-index:-1;pointer-events:none; background-image:var(--pour); background-size:contain;background-repeat:no-repeat;background-position:left top; opacity:.26; } #milk-mustache-database > header.top{position:relative} /* paper grain over the header, matching the page */ #milk-mustache-database > header.brand::after{ content:"";position:fixed;left:0;right:0;top:0;height:var(--mm-fixed-header-height,184px); z-index:0;pointer-events:none; background-image:var(--grain); opacity:.30;mix-blend-mode:soft-light; } /* milk drips off the bottom edge of the header, the same tile as the headings */ #milk-mustache-database > header{border-bottom:2px solid rgba(143,216,246,.70) !important} #milk-mustache-database > header.nav::after{ content:"";position:absolute;left:-50vw;right:-50vw;bottom:-72px;height:72px; background-image:var(--drip); background-size:240px 78px;background-repeat:repeat-x; opacity:.9;pointer-events:none;z-index:6; } #milk-mustache-database > header.nav{position:relative} /* the brand and nav plates were opaque black to hide the old art - they can now be translucent so the decoration shows through behind them */ #milk-mustache-database .brand{ background:rgba(6,13,20,.55) !important; backdrop-filter:blur(2px); } #milk-mustache-database .nav{ background:rgba(6,13,20,.62) !important; backdrop-filter:blur(2px); } #milk-mustache-database > header.top{z-index:8} /* v272. The header drips were landing on the smiley faces. The nav drip layer was set to bottom:-72px with height:72px at z-index 6, so it reached 72-144px BELOW the fixed header. Main begins immediately under the header and the welcome panel with the smiley art is the first thing in it, so the drips hung straight down across the faces. Two fixes, because either alone is fragile: 1. the header drips are pulled back so they hang inside the header's own bottom edge rather than past it 2. the smiley art is lifted above them, so even if a drip overshoots it passes behind the faces rather than over them */ /* 1 - drips stay within the header */ #milk-mustache-database > header.nav::after{ bottom:-30px !important; height:44px !important; z-index:2 !important; opacity:.75 !important; } /* 2 - the smiley band sits above any decoration that reaches it */ #milk-mustache-database #home.mm-welcome-art{ position:relative !important; z-index:12 !important; isolation:isolate; } #milk-mustache-database #home.mm-welcome-art.mm-smileys{ position:relative; z-index:2; } /* 3 - the welcome panel's own drips belong at its FOOT, below the text, not anywhere near the art at its head */ #milk-mustache-database #home.campaign-intro::after{ z-index:1 !important; opacity:.7 !important; } /* v275. The title and menu plates were still black. They LOOKED translucent in the CSS - rgba(6,13,20,.55) and.62 - but 6,13,20 is near-black, so at those opacities they rendered #1b2c38 and #172833 over a #345364 header. Dark boxes sitting on a lit background. Turning the opacity down was never going to help: the colour itself was the problem. Both plates now carry the palette blue instead of black, so they read as part of the header rather than as panels laid on top of it. */ #milk-mustache-database .brand{ background:linear-gradient(180deg, rgba(143,216,246,.17), rgba(143,216,246,.08)) !important; border:2px solid rgba(143,216,246,.34) !important; backdrop-filter:blur(3px); box-shadow:0 1px 0 rgba(255,255,255,.14) inset !important; } #milk-mustache-database .nav{ background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important; border:2px solid rgba(143,216,246,.44) !important; backdrop-filter:blur(3px); box-shadow:0 1px 0 rgba(255,255,255,.14) inset !important; } /* the buttons need to separate from a lighter plate now */ #milk-mustache-database .nav a{ background:linear-gradient(180deg, rgba(6,20,30,.50), rgba(6,20,30,.34)) !important; border:2px solid rgba(143,216,246,.62) !important; } #milk-mustache-database .nav a:hover, #milk-mustache-database .nav a:focus-visible{ background:linear-gradient(180deg, rgba(143,216,246,.34), rgba(143,216,246,.20)) !important; border-color:#8fd8f6 !important; } /* the header itself lifts a little so the plates have something to sit on */ #milk-mustache-database > header{ background: radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%), linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important; } /* v276. Nothing renders over the smiley faces. Ever. In v272 I moved the header drips off them but left the coronet, which sits top:-52px right:22px at 280x158px on the welcome panel - and the smiley art is that panel's FIRST child, so the coronet was landing on the faces. Fixing one layer at a time is how this keeps recurring, so this rule is categorical rather than another individual adjustment. */ /* 1 - the coronet comes off the welcome panel entirely. There is no position for it there that does not cross the art. */ #milk-mustache-database #home.campaign-intro::before{ content:none !important; display:none !important; } /* 2 - the panel's drips stay at its foot, well below the art */ #milk-mustache-database #home.campaign-intro::after{ z-index:0 !important; } /* 3 - CATEGORICAL GUARD: the smiley band outranks every decorative layer on the site. The art is z-index 40; nothing decorative goes above 12. */ #milk-mustache-database #home.mm-welcome-art{ position:relative !important; z-index:40 !important; isolation:isolate !important; } #milk-mustache-database #home.mm-welcome-art *{position:relative;z-index:1} /* 4 - and no pseudo-element may paint inside the art's own box */ #milk-mustache-database #home.mm-welcome-art::before, #milk-mustache-database #home.mm-welcome-art::after{ content:none !important; display:none !important; } /* v277. The black behind the title and menu was.top - the wrapper that holds both of them. In v275 I recoloured.brand and.nav but never touched the box they sit inside, which was background:#000!important. So two blue plates were sitting on a black slab, and the slab is what you could see. There was also a mobile rule at rgba(0,0,0,.90) that would have brought the black straight back below 760px. */ #milk-mustache-database .top{ background:transparent !important; border:0 !important; box-shadow:none !important; } @media (max-width:760px){ #milk-mustache-database .top, #milk-mustache-database .nav{ background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important; } #milk-mustache-database .top{background:transparent !important} } /* the skip links were unstyled, so they inherited whatever was behind them */ #milk-mustache-database .skip, #milk-mustache-database a[href="#home"].skip, #milk-mustache-database .skiplink, #milk-mustache-database .visually-hidden-focusable{ background:rgba(143,216,246,.22) !important; color:#ffffff !important; border:2px solid rgba(143,216,246,.6) !important; border-radius:8px; } /* and the header must not fall back to black at any width */ #milk-mustache-database > header{ background: radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%), linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important; } @media (max-width:760px){ #milk-mustache-database > header{ background: radial-gradient(700px 340px at 50% -30%, rgba(143,216,246,.30), transparent 62%), linear-gradient(180deg,#12222f 0%, #0a1622 60%, #08121c 100%) !important; } } /* v278. The full-width drip strip under the menu is removed. It was #milk-mustache-database > header.nav::after, stretched left:-50vw to right:-50vw so it ran the whole width of the page beneath the nav. Two rules had accumulated on it - the original at bottom:-72px and my v272 pull-back at -30px - so it is switched off at the source rather than repositioned again. Drips under the year and category headings are untouched. Those sit on an actual surface and read correctly; this one hung off nothing. */ #milk-mustache-database > header.nav::after{ content:none !important; display:none !important; background-image:none !important; height:0 !important; } /* v279. No solid black backgrounds anywhere on the site. Why the earlier passes missed these: every remaining black rule is written as #milk-mustache-database #home.foo - TWO ids - while every correction I wrote used #milk-mustache-database .foo, one id. Specificity (2,1,0) beats (1,1,0), so my gradients never applied to the home-page panels at all. The welcome panel holding the smiley faces was still #000 the whole time. Everything below matches or exceeds that specificity. */ #milk-mustache-database #home.campaign-intro, #milk-mustache-database #home.campaign-history, #milk-mustache-database #home.campaign-copy, #milk-mustache-database #home.campaign-history-standalone, #milk-mustache-database #home.archive-intro, #milk-mustache-database #home.archive-search-panel, #milk-mustache-database #home.year-index, #milk-mustache-database #home.stats, #milk-mustache-database #home.panel{ background:linear-gradient(168deg,#1a2a37 0%, #0d1721 62%, #0a1119 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.13) inset, 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(143,216,246,.10) !important; } /* the header, at every width */ #milk-mustache-database > header, #milk-mustache-database#milk-mustache-database > header{ background: radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%), linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important; } @media (max-width:760px){ #milk-mustache-database#milk-mustache-database .nav, #milk-mustache-database#milk-mustache-database .top{ background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important; } #milk-mustache-database#milk-mustache-database .top{background:transparent !important} } /* the page itself: a graduated ground rather than flat black */ html,body{ background:linear-gradient(180deg,#0a141d 0%, #070f17 45%, #050b12 100%) !important; background-attachment:fixed !important; } /* v280. The glass of milk, installed. It had only ever existed as a preview in chat - it was never in the file. It now replaces the coronet on section headings, which is the one decorative slot that was working, and appears at the head of the four index views. It never goes near the smiley band: the z-index 40 guard from v276 stands and nothing here exceeds 3. */ #milk-mustache-database{--glass:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400'> <defs> <linearGradient id='gm' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%23b4aca0'/><stop offset='.07' stop-color='%23e8e2d8'/> <stop offset='.25' stop-color='%23ffffff'/><stop offset='.45' stop-color='%23fcf9f3'/> <stop offset='.73' stop-color='%23e8e2d6'/><stop offset='.91' stop-color='%23c8c0b3'/> <stop offset='1' stop-color='%23a29a8d'/></linearGradient> <linearGradient id='sf' x1='0' y1='0' x2='.7' y2='1'> <stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f8f4ed'/> <stop offset='1' stop-color='%23d8d1c4'/></linearGradient> <linearGradient id='gw' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%23ffffff' stop-opacity='.36'/> <stop offset='.10' stop-color='%238fd8f6' stop-opacity='.07'/> <stop offset='.5' stop-color='%238fd8f6' stop-opacity='.03'/> <stop offset='.90' stop-color='%238fd8f6' stop-opacity='.09'/> <stop offset='1' stop-color='%23ffffff' stop-opacity='.40'/></linearGradient> <radialGradient id='cw' cx='.5' cy='.5' r='.5'> <stop offset='0' stop-color='%23fff6e4' stop-opacity='.5'/><stop offset='1' stop-color='%23fff6e4' stop-opacity='0'/></radialGradient> <radialGradient id='cc' cx='.5' cy='.5' r='.5'> <stop offset='0' stop-color='%238fd8f6' stop-opacity='.26'/><stop offset='1' stop-color='%238fd8f6' stop-opacity='0'/></radialGradient> <clipPath id='gc'><path d='M84 74 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L216 74 Z'/></clipPath> </defs> <ellipse cx='176' cy='366' rx='106' ry='20' fill='url(%23cw)'/> <ellipse cx='128' cy='368' rx='78' ry='15' fill='url(%23cc)'/> <ellipse cx='150' cy='359' rx='84' ry='12' fill='%23000000' opacity='.5'/> <g clip-path='url(%23gc)'> <path d='M88 120 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L212 120 Z' fill='url(%23gm)'/> <ellipse cx='150' cy='250' rx='40' ry='94' fill='%23a49c8f' opacity='.16'/> <ellipse cx='150' cy='327' rx='55' ry='19' fill='%23ffffff' opacity='.32'/> <path d='M88 120 L212 120 L210 135 L90 135 Z' fill='%23ffffff' opacity='.46'/> <ellipse cx='150' cy='120' rx='62' ry='13' fill='none' stroke='%23e9e2d6' stroke-width='2' opacity='.5'/> </g> <ellipse cx='150' cy='120' rx='62' ry='14' fill='url(%23sf)'/> <ellipse cx='150' cy='120' rx='62' ry='14' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='.7'/> <ellipse cx='150' cy='118' rx='54' ry='10' fill='none' stroke='%23ffffff' stroke-width='2.6' opacity='.32'/> <path d='M88 120 A62 14 0 0 0 212 120' fill='none' stroke='%23ffffff' stroke-width='3' opacity='.36'/> <path d='M84 74 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L216 74 Z' fill='url(%23gw)' stroke='rgba(255,255,255,.42)' stroke-width='2'/> <ellipse cx='150' cy='74' rx='66' ry='16' fill='none' stroke='rgba(255,255,255,.74)' stroke-width='2.6'/> <ellipse cx='150' cy='76' rx='60' ry='14' fill='none' stroke='rgba(143,216,246,.42)' stroke-width='1.4'/> <path d='M96 106 C100 180 105 258 110 322' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' fill='none' opacity='.48'/> <path d='M108 122 C112 186 116 254 120 310' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' fill='none' opacity='.28'/> <path d='M200 114 C196 182 192 256 188 318' stroke='%23ffffff' stroke-width='3.8' stroke-linecap='round' fill='none' opacity='.2'/> <path d='M99 330 Q100 344 114 344 L186 344 Q200 344 201 330 Z' fill='%23ffffff' opacity='.15'/> <ellipse cx='150' cy='344' rx='40' ry='6.5' fill='%23ffffff' opacity='.24'/> <g fill='%23ffffff' opacity='.3'><circle cx='115' cy='166' r='2.3'/><circle cx='124' cy='208' r='1.5'/> <circle cx='111' cy='242' r='1.9'/><circle cx='130' cy='280' r='1.3'/><circle cx='178' cy='182' r='2'/> <circle cx='186' cy='230' r='1.4'/><circle cx='174' cy='270' r='2.2'/><circle cx='120' cy='312' r='1.6'/></g> </svg>")} /* the coronet steps aside for it */ #milk-mustache-database .year-heading::before, #milk-mustache-database .category-heading::before{ background-image:var(--glass) !important; width:96px !important; height:128px !important; top:-52px !important; right:26px !important; opacity:.92 !important; background-position:bottom right !important; z-index:3 !important; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); } /* a larger one at the head of each index view, opposite the heading */ #milk-mustache-database #categories >.panel:first-of-type, #milk-mustache-database #merch >.panel:first-of-type, #milk-mustache-database #collateral >.panel:first-of-type, #milk-mustache-database #trade >.panel:first-of-type{ position:relative; padding-right:150px !important; overflow:visible; } #milk-mustache-database #categories >.panel:first-of-type::after, #milk-mustache-database #merch >.panel:first-of-type::after, #milk-mustache-database #collateral >.panel:first-of-type::after, #milk-mustache-database #trade >.panel:first-of-type::after{ content:"";position:absolute;right:16px;bottom:-14px; width:118px;height:158px; background-image:var(--glass); background-size:contain;background-repeat:no-repeat;background-position:bottom right; opacity:.9;pointer-events:none;z-index:2; filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)); } @media (max-width:820px){ #milk-mustache-database #categories >.panel:first-of-type::after, #milk-mustache-database #merch >.panel:first-of-type::after, #milk-mustache-database #collateral >.panel:first-of-type::after, #milk-mustache-database #trade >.panel:first-of-type::after{display:none} #milk-mustache-database #categories >.panel:first-of-type, #milk-mustache-database #merch >.panel:first-of-type, #milk-mustache-database #collateral >.panel:first-of-type, #milk-mustache-database #trade >.panel:first-of-type{padding-right:24px !important} #milk-mustache-database .year-heading::before, #milk-mustache-database .category-heading::before{width:68px !important;height:92px !important;top:-34px !important} } /* v281. Two things. 1. THE POURS ARE GONE. The one down the left was the --pour asset at position:fixed, 300px wide and 100vh tall, plus a mirrored one on the right of the header. Both were built from blurred circles rather than modelled, and that is exactly the abstract-milk problem: liquid with no container and no meniscus reads as a smear. The glass replaced the coronet; nothing replaces these, because the site does not need them. 2. THE SMILEY BAND MATCHES THE PANEL. It carried a hardcoded #05090c, darker than the welcome panel it sits inside, so it read as a black box cut into a lighter surface. It now uses the same gradient as the panel, with the top edge lifted so the faces sit on light rather than a hole. */ /* --- 1: the pours --- */ #milk-mustache-database > main::after, #milk-mustache-database > header::after{ content:none !important; display:none !important; background-image:none !important; } /* --- 2: the smiley backdrop --- */ #milk-mustache-database #home.mm-welcome-art, #milk-mustache-database#milk-mustache-database #home.mm-welcome-art{ background: radial-gradient(120% 150% at 50% 0%, rgba(143,216,246,.22), transparent 68%), linear-gradient(168deg,#1e303e 0%, #16242f 55%, #101a24 100%) !important; border-radius:12px !important; box-shadow:0 1px 0 rgba(255,255,255,.12) inset !important; margin:0 0 18px !important; } /* v282. The glass was never rendering. A blanket rule from the v221 legibility repair - the pass that stripped 7,612 decorative rings - sets content:none !important; display:none !important on ::before AND ::after for sixteen component types,.year-heading::before among them. That is exactly where I put the glass in v280, so it was switched off before it ever drew. Same for the index-view panels, which are.panel. Rather than fight that rule with pseudo-elements, the glass now goes in as a real element: an <img> injected into each heading. Nothing can hide it by accident, and it is inspectable in the DOM. */ #milk-mustache-database .mm-glass{ position:absolute; right:22px; bottom:-6px; width:88px; height:auto; opacity:.94; pointer-events:none; z-index:3; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); } #milk-mustache-database .year-heading, #milk-mustache-database .category-heading{position:relative;overflow:visible} #milk-mustache-database .mm-glass-lg{ position:absolute; right:18px; bottom:-10px; width:116px; height:auto; opacity:.92; pointer-events:none; z-index:3; filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)); } #milk-mustache-database .mm-glass-host{position:relative;overflow:visible;padding-right:150px !important} @media (max-width:820px){ #milk-mustache-database .mm-glass{width:60px;right:12px} #milk-mustache-database .mm-glass-lg{display:none} #milk-mustache-database .mm-glass-host{padding-right:24px !important} } /* v283. Nothing breaks mid-word or mid-link. Five rules from the v226 no-horizontal-scroll pass were doing it: overflow-wrap:anywhere on the root, paragraphs, headings and cells word-break:break-word on the same overflow-wrap:anywhere on code and links word-break:break-all on code and links word-break:break-all on.mm-wb-hit.t anywhere and break-all both split INSIDE a word with no regard for where. That is what was chopping record titles and URLs. The replacement is break-word, which only breaks a word when it genuinely cannot fit on a line by itself - so ordinary prose wraps between words as it should, and a 200-character URL still cannot force horizontal scroll. */ #milk-mustache-database, #milk-mustache-database *, #milk-mustache-database p, #milk-mustache-database li, #milk-mustache-database td, #milk-mustache-database th, #milk-mustache-database h1, #milk-mustache-database h2, #milk-mustache-database h3, #milk-mustache-database h4, #milk-mustache-database .card h2, #milk-mustache-database .cardbody, #milk-mustache-database .meta, #milk-mustache-database .eyebrow, #milk-mustache-database .badge, #milk-mustache-database .detailtitle h2, #milk-mustache-database .year-heading h2{ overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important; line-break:auto !important; } /* links and code: keep them whole. Only break if a single token is wider than its container on its own. */ #milk-mustache-database a, #milk-mustache-database code, #milk-mustache-database .source, #milk-mustache-database .assetlinks a, #milk-mustache-database .nav a, #milk-mustache-database .mm-news-item, #milk-mustache-database .mm-news-item.t, #milk-mustache-database .mm-wb-hit.t{ overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important; } /* short labels should never break at all */ #milk-mustache-database .badge, #milk-mustache-database .chip, #milk-mustache-database .yearcount, #milk-mustache-database .nav a, #milk-mustache-database .back, #milk-mustache-database button{ white-space:nowrap !important; overflow-wrap:normal !important; } /* v284. The back-to-top button is a milk splat. It was a black circle with a white border and a cow emoji. Now it is the splat itself - no plate, no ring, no border. The arrow sits in the middle of the pool, and the whole thing tilts and grows slightly on hover as if it just landed. */ #milk-mustache-database .cow-top-button{ background:none !important; background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><defs><radialGradient id='s' cx='.38' cy='.32' r='.72'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f7f3ec'/><stop offset='1' stop-color='%23cfc7ba'/></radialGradient></defs><g fill='url(%23s)'><path d='M92.4 50.0 Q76.8 55.6 93.9 68.0 Q71.0 63.1 73.9 74.4 Q59.5 63.4 56.6 68.8 Q50.7 67.5 45.7 87.6 Q43.4 70.0 33.0 77.0 Q33.6 65.8 13.9 74.1 Q23.8 60.4 1.6 59.5 Q32.9 52.5 43.4 48.7 Q40.6 44.7 26.4 34.2 Q35.6 33.9 27.3 13.8 Q41.6 27.2 45.7 12.8 Q51.3 31.1 58.4 26.1 Q56.8 38.3 63.5 36.2 Q59.1 43.7 65.9 43.5 Q68.1 48.0 92.4 50.0 Z'/><ellipse cx='34.4' cy='87.5' rx='3.2' ry='1.9'/><ellipse cx='21.7' cy='14.2' rx='2.9' ry='2.2'/><ellipse cx='74.9' cy='82.7' rx='1.6' ry='3.7'/><ellipse cx='54.2' cy='6.7' rx='2.8' ry='3.8'/><ellipse cx='19.1' cy='73.9' rx='2.2' ry='2.7'/><ellipse cx='64.4' cy='15.6' rx='3.1' ry='2.6'/></g><ellipse cx='40' cy='38' rx='9' ry='7' fill='%23ffffff' opacity='.75'/><ellipse cx='58' cy='62' rx='13' ry='9' fill='%23c9c1b4' opacity='.28'/></svg>") !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; border:0 !important; border-radius:0 !important; width:74px !important; height:74px !important; font-size:0 !important; box-shadow:none !important; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); transition:transform.22s cubic-bezier(.2,.7,.3,1), filter.22s ease !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* the arrow, drawn on top of the pool */ #milk-mustache-database .cow-top-button::after{ content:"" !important; display:block !important; width:15px;height:15px; margin-top:4px; border-left:3.5px solid #17242e; border-top:3.5px solid #17242e; transform:rotate(45deg); border-radius:1px; opacity:.85; } #milk-mustache-database .cow-top-button:hover, #milk-mustache-database .cow-top-button:focus-visible{ transform:scale(1.09) rotate(-7deg) !important; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(143,216,246,.4)); } #milk-mustache-database .cow-top-button:focus-visible{ outline:3px solid #8fd8f6 !important; outline-offset:4px !important; } @media (prefers-reduced-motion:reduce){ #milk-mustache-database .cow-top-button{transition:none !important} #milk-mustache-database .cow-top-button:hover{transform:none !important} } /* v285. Choose the clearest image, not the biggest. The hero was selected by size: where a URL exposes a dimension, it is the largest in 60 of 63 cases. Size is a poor proxy for clarity - a 1600px scan of a creased page loses to a sharp 800px one, and I cannot tell the difference because I cannot see images at all. So the choice moves to you. Every alternate image on a record gets a button that promotes it to main. The swap is instant, it persists, and it exports. */ #milk-mustache-database .mm-setmain{ display:block;width:100%;margin-top:6px; padding:5px 8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; font-weight:800;line-height:1.2;cursor:pointer; background:rgba(143,216,246,.14);color:#dff2fc; border:2px solid rgba(143,216,246,.5);border-radius:7px; white-space:nowrap; } #milk-mustache-database .mm-setmain:hover{background:rgba(143,216,246,.3);border-color:#8fd8f6} #milk-mustache-database .mm-setmain[data-current="1"]{ background:rgba(48,151,113,.34);border-color:rgba(143,216,246,.7);cursor:default; } #milk-mustache-database .mm-primary-bar{ display:flex;flex-wrap:wrap;gap:9px;align-items:center; margin-top:12px;padding:11px 13px;border-radius:10px; background:rgba(143,216,246,.10);border:2px solid rgba(143,216,246,.4); font-size:12.5px; } #milk-mustache-database .mm-primary-bar button{ padding:6px 11px;font-size:11.5px;font-weight:800;cursor:pointer; background:rgba(143,216,246,.16);color:#eaf7ff; border:2px solid rgba(143,216,246,.55);border-radius:8px;white-space:nowrap; } #milk-mustache-database .mm-primary-bar button:hover{background:rgba(143,216,246,.32)} #milk-mustache-database .mm-lead-panel{background:linear-gradient(168deg,#3a3020,#241d12)!important;border:2px solid rgba(216,162,74,.62)!important}#milk-mustache-database .mm-lead-panel.eyebrow{color:#f0c987!important;-webkit-text-fill-color:#f0c987!important} #milk-mustache-database .nav{display:block!important;text-align:center!important;padding:7px 0!important;line-height:2.05!important}#milk-mustache-database .navgroup{display:inline!important;}#milk-mustache-database .navlabel{display:inline!important;font-size:9.5px!important;letter-spacing:.12em!important;text-transform:uppercase!important;opacity:.55!important;color:#8fd8f6!important;-webkit-text-fill-color:#8fd8f6!important;font-weight:700!important;white-space:nowrap!important;padding:0 5px 0 0!important;vertical-align:middle!important}#milk-mustache-database .navgroup+.navgroup>.navlabel::before{content:"\00a0\00b7\00a0\00a0"!important;opacity:.5!important;letter-spacing:0!important}#milk-mustache-database .navgroup a{display:inline-flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important;padding:2px 7px!important;font-size:12.5px!important;border-radius:6px!important;line-height:1.25!important;margin:0 1px!important;vertical-align:middle!important}#milk-mustache-database .navcount{font-size:10px!important;opacity:.5!important;font-variant-numeric:tabular-nums!important;padding:0!important}@media(max-width:760px){#milk-mustache-database .nav{line-height:2!important}#milk-mustache-database .navgroup a{padding:2px 5px!important;font-size:12px!important}} #milk-mustache-database #milk-mustache-database .cow-top-button,html body.cow-top-button{background:none!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:0!important;text-indent:-9999px!important;overflow:visible!important;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'>%20<defs>%20<radialGradient%20id='p'%20cx='.40'%20cy='.33'%20r='.75'>%20<stop%20offset='0'%20stop-color='#ffffff'/><stop%20offset='.55'%20stop-color='#f7f4ef'/>%20<stop%20offset='1'%20stop-color='#ddd8d0'/></radialGradient>%20<radialGradient%20id='d'%20cx='.38'%20cy='.30'%20r='.8'>%20<stop%20offset='0'%20stop-color='#ffffff'/><stop%20offset='1'%20stop-color='#e8e3db'/></radialGradient>%20</defs>%20<g%20fill='url(#p)'>%20<path%20d='M60%2022c7.5%200%2010.5%205.5%2015.5%206.5%205%201%209-3%2012%201.5%203%204.5-2%208.5-1%2013%201%204.5%208%205.5%208.5%2011.5.5%206-6.5%207-8.5%2011.5-2%204.5%202.5%209.5-1.5%2013-4%203.5-9-1-13.5%200-4.5%201-6.5%208-12.5%208s-8.5-6.5-13.5-7.5c-5-1-9.5%204-13-.5-3.5-4.5%201.5-9%20.5-13.5-1-4.5-8-6-8-11.5s7-6.5%208-11c1-4.5-4-9%200-13s9%201.5%2013.5.5C50.5%2027.5%2052.5%2022%2060%2022z'/>%20<path%20d='M92%2030c4-5%209-8%2011-6s-1%207-5%2011-8%205-9%203%201-6%203-8z'/>%20<path%20d='M26%2034c-5-4-9-4-10-1s3%206%208%209%209%203%209%200-4-6-7-8z'/>%20<path%20d='M97%2078c5%202%209%206%208%209s-6%202-11-1-8-7-6-9%206-1%209%201z'/>%20<path%20d='M30%2092c-3%205-3%2010%200%2011s6-3%208-8%202-9-1-9-6%203-7%206z'/>%20<path%20d='M62%2014c1-6%203-10%205-9s3%205%202%2010-3%208-5%207-3-5-2-8z'/>%20</g>%20<g%20fill='url(#d)'>%20<circle%20cx='104'%20cy='24'%20r='4.2'/><circle%20cx='16'%20cy='28'%20r='3.4'/>%20<circle%20cx='110'%20cy='62'%20r='2.8'/><circle%20cx='12'%20cy='72'%20r='3.9'/>%20<circle%20cx='88'%20cy='104'%20r='3.2'/><circle%20cx='40'%20cy='108'%20r='2.5'/>%20<circle%20cx='70'%20cy='6'%20r='2.2'/>%20</g>%20<ellipse%20cx='47'%20cy='42'%20rx='11'%20ry='7'%20fill='#ffffff'%20opacity='.72'%20transform='rotate(-22%2047%2042)'/>%20<ellipse%20cx='72'%20cy='68'%20rx='6'%20ry='4'%20fill='#ffffff'%20opacity='.30'%20transform='rotate(14%2072%2068)'/>%20</svg>")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;width:76px!important;height:76px!important;position:fixed!important;right:18px!important;bottom:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))!important;transition:transform.18s ease, filter.18s ease!important;z-index:2147483001!important;text-decoration:none!important}#milk-mustache-database #milk-mustache-database .cow-top-button::after,html body.cow-top-button::after{content:""!important;display:block!important;position:static!important;width:16px!important;height:16px!important;margin-top:5px!important;border-left:4px solid #1b2b36!important;border-top:4px solid #1b2b36!important;transform:rotate(45deg)!important;border-radius:2px!important;opacity:.9!important;background:none!important;text-indent:0!important}#milk-mustache-database #milk-mustache-database .cow-top-button::before,html body.cow-top-button::before{content:none!important;display:none!important}html body.cow-top-button:hover,html body.cow-top-button:focus-visible{transform:scale(1.08) rotate(-8deg)!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(143,216,246,.45))!important;background-color:transparent!important;border:0!important}html body.cow-top-button:focus-visible{outline:3px solid #8fd8f6!important;outline-offset:5px!important}@media(max-width:760px){html body.cow-top-button{width:62px!important;height:62px!important;right:12px!important;bottom:12px!important}} #mm-ocean{position:fixed!important;left:0;right:0;bottom:0;height:230px;pointer-events:none!important;z-index:0;overflow:hidden;contain:layout paint;}#mm-ocean.sheen{position:absolute;left:0;right:0;bottom:0;height:250px;background:linear-gradient(to top,rgba(255,253,250,.30) 0%,rgba(210,236,250,.10) 42%,rgba(255,255,255,0) 100%);}#mm-ocean.w0{position:absolute;left:0;bottom:0px;width:400%;height:220px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20220'%20preserveAspectRatio='none'%20width='1200'%20height='220'><path%20d='M0,96%20C200,50%20400,50%20600,96%20C800,142%201000,142%201200,96%20L1200,220%20L0,220%20Z'%20fill='%23c9c4bd'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 220px;background-position:0 bottom;opacity:0.34;animation:mmdrift0 61s linear infinite;will-change:transform;}@keyframes mmdrift0{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w1{position:absolute;left:0;bottom:0px;width:400%;height:200px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20200'%20preserveAspectRatio='none'%20width='1200'%20height='200'><path%20d='M0,74%20C200,36%20400,36%20600,74%20C800,112%201000,112%201200,74%20L1200,200%20L0,200%20Z'%20fill='%23ddd8d0'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 200px;background-position:0 bottom;opacity:0.4;animation:mmdrift1 44s linear infinite;will-change:transform;}@keyframes mmdrift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w2{position:absolute;left:0;bottom:0px;width:400%;height:180px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20180'%20preserveAspectRatio='none'%20width='1200'%20height='180'><path%20d='M0,56%20C200,26%20400,26%20600,56%20C800,86%201000,86%201200,56%20L1200,180%20L0,180%20Z'%20fill='%23f2efeb'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 180px;background-position:0 bottom;opacity:0.46;animation:mmdrift2 33s linear infinite;will-change:transform;}@keyframes mmdrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w3{position:absolute;left:0;bottom:0px;width:400%;height:150px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20150'%20preserveAspectRatio='none'%20width='1200'%20height='150'><path%20d='M0,40%20C200,18%20400,18%20600,40%20C800,62%201000,62%201200,40%20L1200,150%20L0,150%20Z'%20fill='%23fffdfa'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 150px;background-position:0 bottom;opacity:0.52;animation:mmdrift3 24s linear infinite;will-change:transform;}@keyframes mmdrift3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.swell{animation:mmswell 13s ease-in-out infinite alternate;}@keyframes mmswell{from{transform:translateY(0)}to{transform:translateY(-9px)}}#milk-mustache-database{position:relative!important;z-index:1!important;}@media(max-width:760px){#mm-ocean{height:150px}}@media(prefers-reduced-motion:reduce){#mm-ocean.w0,#mm-ocean.w1,#mm-ocean.w2,#mm-ocean.w3,#mm-ocean.swell{animation:none!important}} html body #milk-mustache-database .site-footer{background:linear-gradient(180deg,rgba(10,20,28,.62),rgba(6,13,20,.80))!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;border:0!important;border-top:2px solid rgba(143,216,246,.42)!important;border-radius:0!important;color:#dff2fb!important;-webkit-text-fill-color:#dff2fb!important;padding:26px 20px 30px!important;margin-top:44px!important;text-align:center!important;box-shadow:none!important;position:relative!important;z-index:2!important;text-shadow:none!important}html body #milk-mustache-database .site-footer *{color:#dff2fb!important;-webkit-text-fill-color:#dff2fb!important;background:transparent!important;text-shadow:none!important}html body #milk-mustache-database .site-footer strong{display:block!important;font-size:1.14em!important;letter-spacing:.02em!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;margin-bottom:6px!important;font-weight:700!important}html body #milk-mustache-database .site-footer a{color:#8fd8f6!important;-webkit-text-fill-color:#8fd8f6!important;text-decoration:underline!important;text-decoration-color:rgba(143,216,246,.5)!important;text-underline-offset:3px!important;font-weight:600!important;border:0!important;padding:0!important}html body #milk-mustache-database .site-footer a:hover{color:#c7ecff!important;-webkit-text-fill-color:#c7ecff!important;text-decoration-color:#c7ecff!important}@media(max-width:760px){html body #milk-mustache-database .site-footer{padding:20px 14px 24px!important;margin-top:32px!important}} html body #milk-mustache-database,html body #milk-mustache-database>main,html body #milk-mustache-database>header,html body #milk-mustache-database>footer,html body #milk-mustache-database .top{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}html body #milk-mustache-database>main{padding-left:clamp(12px,3vw,48px)!important;padding-right:clamp(12px,3vw,48px)!important}html body #milk-mustache-database .top{padding-left:clamp(10px,2.5vw,32px)!important;padding-right:clamp(10px,2.5vw,32px)!important}html body #milk-mustache-database .mm-view,html body #milk-mustache-database .panel,html body #milk-mustache-database .year-group,html body #milk-mustache-database .tablewrap{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}html body #milk-mustache-database .grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr))!important;gap:clamp(10px,1.4vw,20px)!important;width:100%!important;max-width:100%!important;justify-content:center!important;align-items:stretch!important}html body #milk-mustache-database .grid>.card,html body #milk-mustache-database .grid>a.card{width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}html body #milk-mustache-database .gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))!important;gap:clamp(10px,1.4vw,18px)!important;width:100%!important;justify-content:center!important}html body #milk-mustache-database .gallery>.asset{width:100%!important;max-width:100%!important;margin:0!important}html body #milk-mustache-database .detailgrid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important;gap:clamp(14px,2vw,32px)!important;width:100%!important;align-items:start!important}html body #milk-mustache-database p,html body #milk-mustache-database li{max-width:none!important}html body #milk-mustache-database .panel>p{max-width:none!important;margin-left:auto!important;margin-right:auto!important}html body #milk-mustache-database img,html body #milk-mustache-database svg,html body #milk-mustache-database table,html body #milk-mustache-database iframe{max-width:100%!important;height:auto!important}html body #milk-mustache-database table{width:100%!important;table-layout:auto!important}html body #milk-mustache-database .tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}html body #milk-mustache-database .nav,html body #milk-mustache-database .year-index{width:100%!important;max-width:100%!important;box-sizing:border-box!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}@media(max-width:640px){html body #milk-mustache-database .grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))!important}html body #milk-mustache-database .gallery{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))!important}html body #milk-mustache-database .detailgrid{grid-template-columns:1fr!important}}@media(min-width:2100px){html body #milk-mustache-database>main{padding-left:clamp(48px,6vw,160px)!important;padding-right:clamp(48px,6vw,160px)!important}} /*mm-remove-waves-v1*/.milk-fluid-stage{display:none!important}#mm-ocean{display:none!important}.mm-welcome-art{margin-top:10px}.mm-welcome-art svg.mm-smileys{overflow:visible} a.cow-top-button.mm-splat-top{background:transparent !important;background-color:transparent !important;background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><defs><radialGradient id='s' cx='.38' cy='.32' r='.72'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f7f3ec'/><stop offset='1' stop-color='%23cfc7ba'/></radialGradient></defs><g fill='url(%23s)'><path d='M92.4 50.0 Q76.8 55.6 93.9 68.0 Q71.0 63.1 73.9 74.4 Q59.5 63.4 56.6 68.8 Q50.7 67.5 45.7 87.6 Q43.4 70.0 33.0 77.0 Q33.6 65.8 13.9 74.1 Q23.8 60.4 1.6 59.5 Q32.9 52.5 43.4 48.7 Q40.6 44.7 26.4 34.2 Q35.6 33.9 27.3 13.8 Q41.6 27.2 45.7 12.8 Q51.3 31.1 58.4 26.1 Q56.8 38.3 63.5 36.2 Q59.1 43.7 65.9 43.5 Q68.1 48.0 92.4 50.0 Z'/><ellipse cx='34.4' cy='87.5' rx='3.2' ry='1.9'/><ellipse cx='21.7' cy='14.2' rx='2.9' ry='2.2'/><ellipse cx='74.9' cy='82.7' rx='1.6' ry='3.7'/><ellipse cx='54.2' cy='6.7' rx='2.8' ry='3.8'/><ellipse cx='19.1' cy='73.9' rx='2.2' ry='2.7'/><ellipse cx='64.4' cy='15.6' rx='3.1' ry='2.6'/></g><ellipse cx='40' cy='38' rx='9' ry='7' fill='%23ffffff' opacity='.75'/><ellipse cx='58' cy='62' rx='13' ry='9' fill='%23c9c1b4' opacity='.28'/></svg>") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;color:transparent !important;-webkit-text-fill-color:transparent !important;font-size:0 !important;width:62px !important;height:62px !important;position:fixed !important;}a.cow-top-button.mm-splat-top::before{content:none !important;display:none !important;}a.cow-top-button.mm-splat-top::after{content:"" !important;display:block !important;position:absolute !important;left:50% !important;top:52% !important;width:15px !important;height:15px !important;transform:translate(-50%,-50%) rotate(45deg) !important;border-left:3.5px solid #17242e !important;border-top:3.5px solid #17242e !important;border-radius:1px !important;opacity:.9 !important;background:none !important;}a.cow-top-button.mm-splat-top:hover,a.cow-top-button.mm-splat-top:focus-visible{transform:scale(1.08) rotate(-8deg) !important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(143,216,246,.45)) !important;} #mm-loader{position:fixed;inset:0;z-index:2147483647;background:radial-gradient(120% 120% at 50% 30%,#16232e 0%,#0c1219 70%);display:flex;align-items:center;justify-content:center;transition:opacity .55s ease;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} #mm-loader.mm-hide{opacity:0;pointer-events:none;} #mm-loader .mm-l-in{text-align:center;color:#eaf6ff;} #mm-loader .mm-l-glass{width:60px;height:78px;margin:0 auto 20px;position:relative;border:3px solid #cfe8f5;border-top:0;border-radius:7px 7px 14px 14px;background:rgba(255,255,255,.04);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.5);} #mm-loader .mm-l-fill{position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(#ffffff,#e9f4fb);animation:mmfill 1.5s ease-in-out infinite;} #mm-loader .mm-l-fill:after{content:"";position:absolute;left:0;right:0;top:-5px;height:6px;border-radius:50%;background:#fff;opacity:.85;} @keyframes mmfill{0%{height:16%}50%{height:86%}100%{height:16%}} #mm-loader .mm-l-title{font-size:21px;font-weight:800;letter-spacing:.4px;text-shadow:0 2px 10px rgba(0,0,0,.5);} #mm-loader .mm-l-sub{font-size:12.5px;opacity:.72;margin-top:5px;letter-spacing:.3px;} @media(prefers-reduced-motion:reduce){#mm-loader .mm-l-fill{animation:none;height:60%}} /* Center image galleries so few items don't left-align with blank space */ #milk-mustache-database .gallery:not(.assetlinks){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;gap:clamp(10px,1.4vw,18px)!important} #milk-mustache-database .gallery:not(.assetlinks)>.asset{flex:0 1 235px!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important} @media(max-width:600px){#milk-mustache-database .gallery:not(.assetlinks)>.asset{flex-basis:150px!important}} /* Defer rendering of off-screen chronological year-groups for faster paint on the long timeline view */ .year-group{content-visibility:auto;contain-intrinsic-size:auto 1100px} html body #milk-mustache-database .grid.grid{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;gap:clamp(10px,1.4vw,18px)!important;grid-template-columns:none!important} html body #milk-mustache-database .grid.grid>.card{flex:0 1 280px!important;max-width:300px!important;width:auto!important;margin:0!important;box-sizing:border-box!important} html body #milk-mustache-database .year-heading{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:.25em!important} html body #milk-mustache-database .year-heading>.era-note{margin-left:0!important} html body #milk-mustache-database .year-heading>*:not(.mm-glass){position:relative!important;z-index:1!important} html body #milk-mustache-database .year-heading>.mm-glass{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;z-index:0!important;opacity:.45!important;pointer-events:none!important} .permalink{display:inline-block;margin:0 0 14px 10px;font-size:12px;color:#8fd8f6;text-decoration:underline} .mm-wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8em;margin-top:.9em} .mm-wb-hit{border:1px solid #91cee8;border-radius:10px;padding:.5em;background:#eefaff;color:#05090c} .mm-wb-hit img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:6px;display:block} .mm-wb-hit.t{font-size:.78em;line-height:1.3;margin-top:.4em;word-break:break-all} .mm-wb-hit a{color:#063d57!important} .mm-wb-bar{height:12px;background:#123;border:1px solid #91cee8;border-radius:99px;overflow:hidden;margin:.6em 0} .mm-wb-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fd8f6,#fff);width:0} .mm-wb-log{font-size:.82em;max-height:150px;overflow:auto;background:rgba(255,255,255,.05);border-radius:8px;padding:.5em.7em;margin-top:.5em} /*mm-tweak-about-v2*/#milk-mustache-database .campaign-history-standalone h2,#milk-mustache-database.campaign-history-standalone h2,html body #milk-mustache-database .campaign-history-standalone > h2{text-align:center!important;margin-left:auto!important;margin-right:auto!important}#milk-mustache-database .campaign-history-standalone p,#milk-mustache-database.campaign-history-standalone p,html body #milk-mustache-database .campaign-history-standalone > p{max-width:none!important;margin-left:0!important;margin-right:0!important} #mmdb-navtoggle{display:none} @media (max-width:820px){ #milk-mustache-database>header .brand h1{font-size:30px!important;line-height:1.02!important;margin:0!important} #milk-mustache-database>header .mm-tagline{font-size:11.5px!important;line-height:1.3!important;margin:4px 0 0!important} #milk-mustache-database>header .top{padding-top:10px!important;padding-bottom:8px!important} #mmdb-navtoggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:8px auto 2px;padding:11px 14px;font:700 15px/1 system-ui,-apple-system,sans-serif;letter-spacing:.02em;color:#eaf6ff;background:rgba(143,216,246,.15);border:1px solid rgba(143,216,246,.4);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent} #mmdb-navtoggle::after{content:"\25BE";font-size:12px;opacity:.85;transition:transform .2s} #milk-mustache-database>header nav.nav{max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .18s ease} #milk-mustache-database>header.mmdb-nav-open nav.nav{max-height:66vh;overflow-y:auto;opacity:1;-webkit-overflow-scrolling:touch} #milk-mustache-database>header.mmdb-nav-open #mmdb-navtoggle::after{transform:rotate(180deg)} } /* readable metadata: space after every "Label:" in an ad section */ #milk-mustache-database .record-view .panel b::after{content:" ";white-space:pre} /* keep asset/source links from running together */ #milk-mustache-database .record-view .assetlinks a,#milk-mustache-database .record-view .panel>a{display:inline-block;margin:3px 16px 3px 0} /* neutralize containing-block creators on gallery wrappers so the fixed lightbox escapes to the viewport */ #milk-mustache-database .gallery,#milk-mustache-database .gallery .asset,#milk-mustache-database .gallery .assetimg{transform:none!important;filter:none!important;perspective:none!important;will-change:auto!important;contain:none!important} /* Click-to-enlarge must be a true full-screen overlay for hero AND gallery images (a more-specific #id rule was pinning gallery labels to static, so they expanded in place and slid behind neighboring thumbnails). */ #milk-mustache-database .zoom-toggle:checked + .zoom-label{ position:fixed!important; inset:0!important; z-index:100000!important; width:100vw!important; height:100dvh!important; margin:0!important; background:rgba(0,0,0,.9)!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:20px!important; box-sizing:border-box!important; cursor:zoom-out!important; } #milk-mustache-database .zoom-toggle:checked + .zoom-label::before, #milk-mustache-database .zoom-toggle:checked + .zoom-label::after{ content:none!important; display:none!important; } #milk-mustache-database .zoom-toggle:checked + .zoom-label img{ position:relative!important; z-index:100001!important; width:auto!important; height:auto!important; max-width:96vw!important; max-height:92dvh!important; object-fit:contain!important; background:#fff!important; box-shadow:0 15px 70px #000!important; } #milk-mustache-database .zoom-toggle:checked ~ .zoom-close{ z-index:100002!important; } body:has(section.mm-view:not(#home):target) #home,body:has(section.mm-view:not(#home) span[id^="record-"]:target) #home{display:none}.mm-view:has(span[id^="record-"]:target){display:block}.mm-view:has(span[id^="record-"]:target)~#home{display:none} /* static pages */ #milk-mustache-database .mm-view{display:block!important} .static-crumbs{max-width:1440px;margin:18px auto 0;padding:0 24px;font-size:13px} .static-crumbs a{color:#8fd8f6}

html,body{background:#000!important;background-image:none!important;margin:0!important}#milk-mustache-database{--blue:#8fd8f6;--blue2:#dff5ff;--blue3:#bfeaff;--line:#91cee8;--ink:#000;font-family:"KaratMedium Regular","KaratMedium",Arial,sans-serif;background:#000;color:#000;min-height:100vh;line-height:1.42}#milk-mustache-database *{box-sizing:border-box}#milk-mustache-database a{color:inherit}#milk-mustache-database header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#071017,#102b39 58%,#0a151c);border-bottom:4px solid var(--blue);box-shadow:0 10px 30px #0008;overflow:hidden;color:#fff}#milk-mustache-database .top{max-width:1440px;margin:auto;padding:17px 24px 14px;position:relative;z-index:3}#milk-mustache-database .brand h1{font-size:clamp(30px,4vw,48px);line-height:1;margin:0 0 13px;font-weight:900;letter-spacing:-1.7px;color:#fff}#milk-mustache-database .milk-wave{position:absolute;left:0;right:0;top:52px;height:120px;z-index:1;pointer-events:none;opacity:.98}#milk-mustache-database .milk-wave svg{width:100%;height:100%;display:block}#milk-mustache-database .nav{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:7px;padding:8px;border-radius:15px;background:#bfeaff33;border:1px solid #dff5ff44}#milk-mustache-database .nav a{display:inline-block;text-decoration:none;background:linear-gradient(#f6fdff,#bfeaff);color:#000;border:1px solid #fff;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:800;box-shadow:0 2px 8px #0005}#milk-mustache-database .nav a:hover{background:#fff;outline:2px solid var(--blue)}#milk-mustache-database main{max-width:1440px;margin:auto;padding:24px 24px 80px}.mm-view{display:none;scroll-margin-top:280px}.mm-view:target{display:block}#home{display:block}.mm-view:target~#home{display:none}#home:target{display:block}.panel,.campaign-intro,.stat,.card,.archive-intro,.browser-find,.year-heading,.keycard,.buycard,.sourcecard,.merchcard{background:#f8fcff;color:#000;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 24px #0005}.campaign-intro{padding:24px 26px;margin-bottom:16px;border-top:4px solid #62bfe8}.campaign-intro h2{font-size:clamp(27px,3vw,40px);margin:5px 0 12px}.campaign-intro p{font-size:16px;line-height:1.65}.campaign-history{border-top:1px solid #b9dceb;margin-top:20px;padding-top:17px}.archive-credit{border-top:1px solid #b9dceb;padding-top:14px}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}.stat{padding:14px 15px}.stat b{display:block;font-size:26px}.stat span{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.archive-intro{display:flex;justify-content:space-between;align-items:end;padding:16px 18px;margin:20px 0 10px}.archive-intro h2{margin:0;font-size:clamp(28px,3vw,39px)}.archive-intro p{margin:5px 0 0}.chronology-tag{background:var(--blue3);border:1px solid #63bde5;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:850;text-transform:uppercase}.browser-find{padding:10px 13px;margin:10px 0}.year-index{display:flex;gap:6px;overflow-x:auto;padding:8px 0 14px}.year-index a{flex:0 0 auto;text-decoration:none;background:#f5fbfe;border:1px solid #85cce9;color:#000;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:800}.year-group{margin:0 0 35px;scroll-margin-top:280px}.year-heading{display:flex;align-items:center;gap:12px;padding:10px 13px;margin-bottom:13px;background:linear-gradient(#eefaff,#dff5ff)}.year-heading h2{margin:0;font-size:clamp(30px,4vw,48px)}.yearcount{background:var(--blue3);border:1px solid #63bde5;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:850}.era-note{margin-left:auto;font-size:11px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.card{text-decoration:none;display:flex;flex-direction:column;overflow:hidden;min-height:385px;transition:.15s}.card:hover{transform:translateY(-3px);border-color:#62bfe8;box-shadow:0 16px 36px #0007}.thumb{aspect-ratio:4/5;background:linear-gradient(145deg,#e5f7ff,#fff 52%,#d8f2fd);display:flex;align-items:center;justify-content:center;border-bottom:1px solid #b9e5f7;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}.placeholder{padding:20px;text-align:center;color:#586770}.cardbody{padding:13px 14px 15px}.eyebrow{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#345f72;font-weight:850}.card h2{font-size:18px;line-height:1.18;margin:5px 0 8px}.meta,.small{font-size:12px;color:#4e5d64}.badge{display:inline-block;margin-top:9px;border:1px solid #9bcfe5;background:#eef9fe;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:750}.badge.good{background:#edf7ef;border-color:#9fc0a5}.back{display:inline-block;text-decoration:none;background:#d9f3ff;border:1px solid #79c8e9;border-radius:9px;padding:9px 12px;font-weight:800;margin-bottom:14px}.detailgrid{display:grid;grid-template-columns:minmax(300px,530px) 1fr;gap:27px;align-items:start}.hero{background:linear-gradient(145deg,#d9dde0,#fff,#cfd4d7);border:1px solid #899198;border-radius:15px;min-height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.hero img{width:100%;height:auto;max-height:650px;object-fit:contain}.hero span{position:absolute;bottom:9px;background:#000c;color:#fff;padding:5px 8px;border-radius:999px;font-size:11px}.detailtitle h2{font-size:clamp(31px,4vw,50px);margin:5px 0 13px}.panel{padding:16px;margin:16px 0}.panel h2,.panel h3{margin-top:0}.subpanel{border-left:5px solid #72c7eb}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px}.asset{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px}.assetimg{height:315px;background:linear-gradient(145deg,#e2e5e7,#fff);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.assetimg img{width:100%;height:100%;object-fit:contain}.asset h4{margin:8px 0 4px}.zoom-toggle{position:absolute;opacity:0;pointer-events:none}.zoom-label{display:block;width:100%;height:100%;cursor:zoom-in}.zoom-toggle:checked+.zoom-label{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;background:#000e;display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}.zoom-toggle:checked+.zoom-label img{width:auto;height:auto;max-width:96vw;max-height:94vh;object-fit:contain;background:#fff;box-shadow:0 15px 70px #000}.zoom-close{display:none}.zoom-toggle:checked~.zoom-close{display:block;position:fixed;z-index:1001;right:18px;top:18px;background:#fff;color:#000;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.variantblock{margin:10px 0;border:1px solid #a9d5e8;background:#fbfdff;border-radius:9px;overflow:hidden}.variantblock>summary{cursor:pointer;padding:10px;font-weight:800;background:#eef9fd}.variantbody{padding:10px}.variantmeta{font-size:11px;line-height:1.48;margin-bottom:8px}.transcription{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.transcription summary{cursor:pointer;font-weight:800;font-size:12px}.txgrid{font-size:11px;margin-top:8px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;vertical-align:top;padding:8px 7px;border-bottom:1px solid #c9dce5}th{font-size:10px;text-transform:uppercase;background:#eef8fc}.linkchips{display:flex;gap:7px;flex-wrap:wrap}.chip,.source{color:#000;text-decoration:underline;text-underline-offset:2px}.chip{border:1px solid #9bcfe5;background:#eef9fe;border-radius:999px;padding:7px 9px;text-decoration:none}.keygrid,.buygrid,.sourcegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.keycard,.buycard,.sourcecard{padding:14px}.merchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.merchcard{padding:14px}.merchcard img{width:100%;height:250px;object-fit:contain;background:#eef8fc;border-radius:9px}.record-index{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}.record-index li{break-inside:avoid;border-bottom:1px solid #d7e8ef}.record-index a{display:flex;gap:10px;padding:8px 3px;text-decoration:none}.record-index a:hover{text-decoration:underline}.record-index span{min-width:48px;color:#55717d}.checklist{padding-left:28px}.checklist>li{margin:6px 0;break-inside:avoid}.checklist input{width:17px;height:17px;vertical-align:middle;margin-right:7px}.checklist label{cursor:pointer}.check-year{display:inline-block;min-width:48px;color:#55717d}.check-variants{list-style:none;margin:5px 0 8px 24px;padding:0}.check-variants li{margin:4px 0}.variant-tag{display:inline-block;background:#e8f6fc;border:1px solid #a9d5e8;border-radius:999px;padding:1px 5px;font-size:9px;text-transform:uppercase}.missing-check{border-top:5px solid #e29d9d}.site-footer{background:#f7fbfd;color:#000;border:1px solid var(--blue);border-radius:15px;padding:16px 18px;margin-top:30px}.source-entry{margin-bottom:12px}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.detailgrid{grid-template-columns:1fr}.record-index{columns:1}}@media(max-width:760px){#milk-mustache-database .top{padding:14px 13px}.milk-wave{top:68px!important;height:155px!important;left:-180px!important;right:-180px!important}.nav{gap:5px}.nav a{font-size:11px;padding:7px 8px}#milk-mustache-database main{padding:18px 12px 60px}.campaign-intro{padding:18px}.campaign-intro p{font-size:15px}.grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}.card{min-height:330px}.archive-intro{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr}.assetimg{height:auto;min-height:290px}.year-group{scroll-margin-top:220px}}@media print{html,body,#milk-mustache-database{background:#fff!important}.nav,.milk-wave,.back,.browser-find,.year-index{display:none!important}.mm-view{display:none!important}#checklist{display:block!important}.panel{box-shadow:none}.checklist{columns:2}.checklist input{appearance:auto}} .visual-record-note{margin:0 0 14px;padding:10px 12px;background:#eef9fd;border:1px solid #9fd8ef;border-left:5px solid #72c5e8;border-radius:10px;color:#000;font-size:12px;line-height:1.45}.visual-record-note b{color:#000} html{scroll-padding-top:280px}.mm-context{border-left:5px solid #62bfe8!important;background:linear-gradient(180deg,#eef8ff,#f8fcff)!important;margin:0 0 16px}.mm-context.eyebrow{color:#1f6f9e}.mm-context p{margin:4px 0 0;font-size:13px;line-height:1.6}.ad-slot{max-width:728px;margin:26px auto 8px;text-align:center;min-height:0}.ad-slot.ad-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#5f6b73;margin:0 0 4px;opacity:.6}.ad-slot ins{display:block}.ad-slot.ad-empty{display:none!important}/* user tweaks: full-width paragraphs + centered About title */#milk-mustache-database p{max-width:none!important}#milk-mustache-database .campaign-history-standalone h2{text-align:center}/*mm-seo-logo-fix*/#milk-mustache-database .mm-logo-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}#milk-mustache-database .brand h1{margin:0 0 6px}#milk-mustache-database .mm-logo{display:block;height:auto;max-width:min(620px,84vw)} #milk-mustache-database .milk-wave{top:54px!important;height:154px!important;opacity:1!important;filter:drop-shadow(0 10px 14px rgba(63,177,224,.26)) saturate(.94)!important} #milk-mustache-database .milk-wave svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important} #milk-mustache-database .nav{gap:9px!important;padding:10px 11px!important;border-radius:17px!important;background:rgba(191,234,255,.13)!important;border:1px solid rgba(223,245,255,.58)!important;backdrop-filter:blur(1.2px)!important} #milk-mustache-database .nav a{padding:10px 13px!important;border-radius:10px!important;font-size:clamp(15px,1.08vw,17px)!important;line-height:1.18!important;font-weight:850!important;letter-spacing:.005em!important;box-shadow:0 3px 10px rgba(0,0,0,.34)!important} #milk-mustache-database .nav a:hover,#milk-mustache-database .nav a:focus{background:#fff!important;outline:3px solid #8fd8f6!important;outline-offset:1px} @media(max-width:760px){#milk-mustache-database .milk-wave{top:52px!important;height:205px!important}#milk-mustache-database .nav{gap:7px!important;padding:8px!important}#milk-mustache-database .nav a{font-size:14px!important;padding:9px 11px!important}} #milk-mustache-database .category-heading{margin-bottom:14px}#milk-mustache-database .category-grid{margin-bottom:30px}#milk-mustache-database .category-grid.card{min-height:385px}@media(max-width:760px){#milk-mustache-database .category-grid.card{min-height:330px}} /* v151 standalone document refinements */ html{background:#000;color-scheme:dark;scroll-behavior:smooth} body{min-width:320px} .skip-link{position:fixed;left:12px;top:10px;z-index:10000;transform:translateY(-160%);background:#fff;color:#000!important;border:3px solid #8fd8f6;border-radius:9px;padding:10px 14px;font:800 15px/1.2 Arial,sans-serif;text-decoration:none;box-shadow:0 8px 28px #0008} .skip-link:focus{transform:translateY(0)} #milk-mustache-database :focus-visible{outline:3px solid #8fd8f6;outline-offset:3px} #milk-mustache-database .archive-search-panel{margin:14px 0 16px;padding:14px 15px;background:#eefaff;border:1px solid var(--line);border-radius:14px;color:#000;box-shadow:0 8px 22px #0002} #milk-mustache-database .archive-search-panel label{display:block;font-size:16px;margin-bottom:7px} #milk-mustache-database .archive-search-row{display:flex;gap:8px;align-items:stretch} #milk-mustache-database .archive-search-row input{flex:1;min-width:0;border:2px solid #77c7e9;border-radius:10px;padding:11px 12px;font:inherit;font-size:16px;color:#000;background:#fff} #milk-mustache-database .archive-search-row button,#milk-mustache-database .checklist-tools button{border:1px solid #528eaa;background:#dff5ff;color:#000;border-radius:10px;padding:10px 13px;font:inherit;font-weight:800;cursor:pointer} #milk-mustache-database .archive-search-row button:hover,#milk-mustache-database .checklist-tools button:hover{background:#fff} #milk-mustache-database .checklist-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 4px;font-weight:800} #milk-mustache-database .search-hidden{display:none!important} @media(max-width:600px){#milk-mustache-database .archive-search-row{flex-direction:column}#milk-mustache-database .archive-search-row button{width:100%}} /* v160: black-glass archive with immersive milk graphics */ html, body { background:#020305 !important; color:#fff !important; } body { min-height:100vh; } #milk-mustache-database { position:relative !important; isolation:isolate; background:transparent !important; color:#fff !important; min-height:100vh; } #milk-mustache-database > header, #milk-mustache-database > main, #milk-mustache-database > footer { position:relative; z-index:2; } .v160-milk-atmosphere { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; overflow:hidden; opacity:.94; filter:saturate(1.03); } .v160-milk-atmosphere svg { width:100%; height:100%; display:block; } #milk-mustache-database > header { background:linear-gradient(180deg, rgba(1,4,7,.52), rgba(1,4,7,.18)) !important; border-bottom:1px solid rgba(226,247,255,.28) !important; box-shadow:0 16px 48px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.07); backdrop-filter:blur(12px) saturate(1.08); } #milk-mustache-database .top { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; width:100% !important; margin-inline:auto !important; } #milk-mustache-database .brand { width:100% !important; text-align:center !important; margin-inline:auto !important; } #milk-mustache-database .brand h1 { width:100% !important; text-align:center !important; margin-inline:auto !important; color:#fff !important; text-shadow:0 2px 18px rgba(188,235,255,.26), 0 1px 2px #000; } #milk-mustache-database .nav { width:100% !important; justify-content:center !important; align-items:center !important; text-align:center !important; margin-inline:auto !important; } #milk-mustache-database .nav a { text-align:center !important; color:#fff !important; } #milk-mustache-database .nav a:hover, #milk-mustache-database .nav a:focus-visible { background:rgba(235,249,255,.16) !important; border-color:rgba(235,249,255,.62) !important; color:#fff !important; } #milk-mustache-database main { background:transparent !important; } #milk-mustache-database .panel, #milk-mustache-database .card, #milk-mustache-database .detailtitle, #milk-mustache-database .visual-record-note, #milk-mustache-database .year-heading, #milk-mustache-database .tablewrap, #milk-mustache-database .asset, #milk-mustache-database details.variantblock, #milk-mustache-database .checklist-category { background:linear-gradient(145deg, rgba(5,10,14,.88), rgba(10,18,24,.72)) !important; color:#fff !important; border-color:rgba(224,246,255,.28) !important; box-shadow:0 14px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(11px) saturate(1.06); } #milk-mustache-database .card:hover { border-color:rgba(231,249,255,.62) !important; box-shadow:0 18px 52px rgba(0,0,0,.40), 0 0 32px rgba(180,231,255,.08) !important; } #milk-mustache-database .thumb, #milk-mustache-database .hero, #milk-mustache-database .assetimg { background:rgba(255,255,255,.055) !important; } #milk-mustache-database, #milk-mustache-database h1, #milk-mustache-database h2, #milk-mustache-database h3, #milk-mustache-database h4, #milk-mustache-database p, #milk-mustache-database li, #milk-mustache-database label, #milk-mustache-database th, #milk-mustache-database td, #milk-mustache-database b, #milk-mustache-database strong, #milk-mustache-database summary, #milk-mustache-database .meta, #milk-mustache-database .small, #milk-mustache-database .check-year, #milk-mustache-database .yearcount, #milk-mustache-database .era-note { color:#fff !important; } #milk-mustache-database .eyebrow, #milk-mustache-database .source, #milk-mustache-database .back, #milk-mustache-database .chip, #milk-mustache-database .assetlinks a, #milk-mustache-database a:not(.card):not(.nav a) { color:#c8edff !important; } #milk-mustache-database .badge { color:#fff !important; border-color:rgba(255,255,255,.32) !important; } #milk-mustache-database .badge.good { background:rgba(48,151,113,.28) !important; } #milk-mustache-database .badge.warn { background:rgba(83,139,185,.25) !important; } #milk-mustache-database input[type="text"], #milk-mustache-database input[type="search"], #milk-mustache-database select { background:rgba(2,7,11,.88) !important; color:#fff !important; border-color:rgba(223,246,255,.36) !important; } #milk-mustache-database input[type="checkbox"] { accent-color:#bfeaff; } #milk-mustache-database .placeholder { color:#e8f7ff !important; background:rgba(255,255,255,.05) !important; } /* Center the site spine: title, menu, section/category/year headings. Keep card/body copy readable on the left. */ #milk-mustache-database .year-heading, #milk-mustache-database .index-view > h2, #milk-mustache-database .checklist-view >.panel > h2, #milk-mustache-database .checklist-category > h3, #milk-mustache-database .panel > h3, #milk-mustache-database .detailtitle > h2, #milk-mustache-database .detailtitle >.eyebrow, #milk-mustache-database .intro h2, #milk-mustache-database .intro h3, #milk-mustache-database #research > h2, #milk-mustache-database #collector > h2, #milk-mustache-database #merch > h2, #milk-mustache-database #taglines > h2 { text-align:center !important; } #milk-mustache-database .year-heading { justify-content:center !important; gap:.7rem 1rem !important; flex-wrap:wrap !important; } #milk-mustache-database .panel > h3 { width:100%; } #milk-mustache-database .cardbody, #milk-mustache-database .cardbody h2, #milk-mustache-database .detailtitle.panel, #milk-mustache-database .panel p, #milk-mustache-database .panel li, #milk-mustache-database td { text-align:left; } /* Refractive rings on dark panels */ #milk-mustache-database .panel, #milk-mustache-database .card { position:relative; overflow:hidden; } #milk-mustache-database .panel::after, #milk-mustache-database .card::after { content:""; position:absolute; pointer-events:none; width:120px; height:120px; right:-58px; top:-58px; border-radius:50%; border:1px solid rgba(235,250,255,.11); box-shadow:0 0 28px rgba(194,236,255,.06) inset; } .v160-history-evidence { display:grid; grid-template-columns:minmax(150px,240px) 1fr; gap:18px; align-items:center; margin-top:16px; padding:14px; border:1px solid rgba(222,246,255,.24); border-radius:18px; background:rgba(255,255,255,.045); } .v160-history-evidence img { width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.22); } .v160-history-evidence p { margin:.35rem 0; } @media (max-width:760px){ #milk-mustache-database .nav { justify-content:flex-start !important; } #milk-mustache-database .nav a { text-align:center !important; } .v160-history-evidence { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){.v160-milk-atmosphere * { animation:none !important; } } /* v161 contrast repair: milk art stays atmospheric; navigation and title stay legible. */ #milk-mustache-database > header{ background:linear-gradient(180deg,rgba(0,0,0,.97),rgba(2,7,11,.94) 64%,rgba(3,10,15,.92))!important; color:#fff!important; border-bottom:1px solid rgba(191,234,255,.38)!important; box-shadow:0 16px 48px rgba(0,0,0,.72),inset 0 -1px 0 rgba(255,255,255,.08)!important; backdrop-filter:blur(16px) saturate(.92)!important; } #milk-mustache-database > header.milk-wave{ opacity:.22!important; filter:drop-shadow(0 8px 12px rgba(143,216,246,.10)) saturate(.72)!important; } #milk-mustache-database .brand{ width:min(100%,1100px)!important; margin:0 auto 12px!important; padding:12px 22px 13px!important; background:rgba(0,0,0,.78)!important; border:1px solid rgba(223,245,255,.22)!important; border-radius:18px!important; box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)!important; backdrop-filter:blur(12px)!important; } #milk-mustache-database .brand h1{ color:#fff!important; text-shadow:0 2px 3px #000,0 0 20px rgba(191,234,255,.20)!important; } #milk-mustache-database .nav{ width:min(100%,1500px)!important; margin-inline:auto!important; justify-content:center!important; background:rgba(0,0,0,.82)!important; border:1px solid rgba(223,245,255,.30)!important; box-shadow:0 12px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)!important; backdrop-filter:blur(14px)!important; } #milk-mustache-database .nav a, #milk-mustache-database .nav a:link, #milk-mustache-database .nav a:visited{ background:linear-gradient(180deg,rgba(16,27,35,.98),rgba(3,8,12,.98))!important; color:#fff!important; border:1px solid rgba(191,234,255,.38)!important; box-shadow:0 3px 10px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06)!important; text-shadow:0 1px 2px #000!important; } #milk-mustache-database .nav a:hover, #milk-mustache-database .nav a:focus, #milk-mustache-database .nav a:focus-visible{ background:linear-gradient(180deg,rgba(31,55,68,.99),rgba(8,20,28,.99))!important; color:#fff!important; border-color:rgba(223,245,255,.78)!important; outline:2px solid rgba(143,216,246,.85)!important; outline-offset:2px!important; } /* Defensive contrast: no pale decorative layer may become the text background in the masthead. */ #milk-mustache-database > header.top, #milk-mustache-database > header.brand, #milk-mustache-database > header.nav{color:#fff!important;} @media(max-width:760px){ #milk-mustache-database .nav{justify-content:flex-start!important;background:rgba(0,0,0,.90)!important;} #milk-mustache-database .brand{padding:10px 14px 11px!important;} #milk-mustache-database > header.milk-wave{opacity:.16!important;} } html,body,#milk-mustache-database{background:#000!important;background-image:none!important;color:#fff!important;} body:before,body:after,#milk-mustache-database:before,#milk-mustache-database:after,header:before,header:after,.top:before,.top:after{content:none!important;display:none!important;background:none!important;background-image:none!important;} #milk-mustache-database>header,#milk-mustache-database .top{background:#000!important;background-image:none!important;color:#fff!important;box-shadow:none!important;} #milk-mustache-database .brand,#milk-mustache-database .brand h1{color:#fff!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;} #milk-mustache-database .nav{justify-content:center!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;} #milk-mustache-database .nav a{background:#111!important;background-image:none!important;color:#fff!important;border:1px solid #444!important;text-shadow:none!important;box-shadow:none!important;} #milk-mustache-database .nav a:hover,#milk-mustache-database .nav a:focus{background:#242424!important;color:#fff!important;border-color:#85d5ff!important;outline:none!important;} #milk-mustache-database #home.campaign-intro,#milk-mustache-database #home.campaign-copy,#milk-mustache-database #home.campaign-history,#milk-mustache-database #home.stats,#milk-mustache-database #home.archive-intro,#milk-mustache-database #home.archive-search-panel,#milk-mustache-database #home.year-index{background:#000!important;background-image:none!important;color:#fff!important;} #milk-mustache-database #home.campaign-intro *,#milk-mustache-database #home.campaign-history *,#milk-mustache-database #home.archive-intro *,#milk-mustache-database #home.archive-search-panel *,#milk-mustache-database #home.stats.stat,#milk-mustache-database #home.stats.stat b,#milk-mustache-database #home.stats.stat span{color:#fff!important;text-shadow:none!important;} #milk-mustache-database #home.campaign-intro a,#milk-mustache-database #home.campaign-history a{color:#8edaff!important;text-decoration:underline!important;} #milk-mustache-database #home.archive-search-panel input{background:#111!important;color:#fff!important;border:1px solid #555!important;} #milk-mustache-database #home.archive-search-panel input::placeholder{color:#bbb!important;} #milk-mustache-database #home.archive-search-panel button{background:#161616!important;color:#fff!important;border:1px solid #555!important;} #milk-mustache-database #home.year-index{justify-content:center!important;text-align:center!important;} #milk-mustache-database #home.year-index a{background:#111!important;color:#fff!important;border:1px solid #444!important;} #milk-mustache-database #home.year-index a:hover,#milk-mustache-database #home.year-index a:focus{background:#242424!important;color:#fff!important;border-color:#85d5ff!important;} #milk-mustache-database .archive-intro,#milk-mustache-database .archive-intro>div,#milk-mustache-database .year-heading,#milk-mustache-database .category-heading,#milk-mustache-database .index-view>.panel.category-heading{text-align:center!important;justify-content:center!important;} #milk-mustache-database .year-heading h2,#milk-mustache-database .category-heading h2,#milk-mustache-database .archive-intro h2,#milk-mustache-database .campaign-copy>h2,#milk-mustache-database .campaign-history>h2,#milk-mustache-database .campaign-copy>.eyebrow,#milk-mustache-database .campaign-history>.eyebrow{text-align:center!important;} #milk-mustache-database .category-heading{color:#fff!important;background:#0b0b0b!important;border-color:#333!important;} #milk-mustache-database .category-heading *{color:#fff!important;} .cow-top-button{position:fixed;right:20px;bottom:20px;z-index:99999;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:#0b0b0b;color:#fff;border:2px solid #fff;border-radius:50%;font-size:29px;line-height:1;text-decoration:none;box-shadow:0 7px 24px rgba(0,0,0,.55);transition:transform.15s ease,background.15s ease,border-color.15s ease;} .cow-top-button:hover,.cow-top-button:focus{background:#202020;border-color:#85d5ff;transform:translateY(-2px);outline:3px solid rgba(133,213,255,.28);outline-offset:2px;} @media(max-width:600px){.cow-top-button{right:12px;bottom:12px;width:46px;height:46px;font-size:24px}#milk-mustache-database .nav{justify-content:flex-start!important;text-align:left!important}} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* v170: advanced self-contained liquid milk masthead. Layer order is intentional: rear splash -> mid sheet -> front sheet. */ #milk-mustache-database>header{position:sticky!important;overflow:hidden!important;isolation:isolate!important;min-height:184px;background:#000!important;} #milk-mustache-database>header.top{position:relative!important;z-index:8!important;} #milk-mustache-database>header.milk-fluid-stage{position:absolute;z-index:1;left:-5vw;right:-5vw;bottom:-82px;height:310px;pointer-events:none;overflow:visible;opacity:1;filter:drop-shadow(0 13px 18px rgba(57,155,200,.12));transform:translateZ(0);} #milk-mustache-database>header.milk-fluid-stage svg{display:block;width:100%;height:100%;overflow:visible;} #milk-mustache-database>header.milk-depth-back,#milk-mustache-database>header.milk-depth-mid,#milk-mustache-database>header.milk-depth-front,#milk-mustache-database>header.milk-drop,#milk-mustache-database>header.milk-ribbon{transform-box:fill-box;transform-origin:center;will-change:transform;} #milk-mustache-database>header.milk-depth-back{opacity:.96;} #milk-mustache-database>header.milk-depth-mid{opacity:.96;} #milk-mustache-database>header.milk-depth-front{opacity:1;} #milk-mustache-database>header.milk-rear-gloss{mix-blend-mode:screen;opacity:.42;} #milk-mustache-database>header.milk-front-gloss{mix-blend-mode:screen;opacity:.66;} #milk-mustache-database>header.milk-shadow-line{mix-blend-mode:multiply;opacity:.22;} /* Homepage metric cards stay pale, so all metric text must be black. */ #milk-mustache-database #home.stats{background:transparent!important;background-image:none!important;} #milk-mustache-database #home.stats.stat{background:#f8fcff!important;background-image:none!important;color:#000!important;} #milk-mustache-database #home.stats.stat b,#milk-mustache-database #home.stats.stat span{color:#000!important;text-shadow:none!important;} /* Chronological date/category bars remain centered. */ #milk-mustache-database #home.year-heading{justify-content:center!important;text-align:center!important;flex-wrap:wrap!important;} #milk-mustache-database #home.year-heading h2,#milk-mustache-database #home.year-heading.yearcount,#milk-mustache-database #home.year-heading.era-note{text-align:center!important;} #milk-mustache-database #home.year-heading.era-note{margin-left:0!important;} /* Light-blue entry-count pills: black text, explicitly including every interaction state. */ #milk-mustache-database .yearcount,#milk-mustache-database .yearcount:hover,#milk-mustache-database .yearcount:focus{color:#000!important;text-shadow:none!important;} /* Light controls use black type. The cow overlay remains white. */ #milk-mustache-database .back,#milk-mustache-database .chip,#milk-mustache-database .year-index a,#milk-mustache-database .archive-search-row button,#milk-mustache-database .checklist-tools button{color:#000!important;text-shadow:none!important;} #milk-mustache-database .cow-top-button,.cow-top-button{color:#fff!important;} @media(max-width:760px){ #milk-mustache-database>header{min-height:214px;} #milk-mustache-database>header.milk-fluid-stage{left:-34vw;right:-34vw;bottom:-74px;height:336px;} } @media(prefers-reduced-motion:reduce){ #milk-mustache-database>header.milk-fluid-stage *,#milk-mustache-database>header.milk-fluid-stage{transform:none!important;} } /* v171: explicit contrast for the pale-blue Visual archive pill. */ #milk-mustache-database .chronology-tag, #milk-mustache-database .chronology-tag:hover, #milk-mustache-database .chronology-tag:focus { color:#000!important; text-shadow:none!important; } /* v171: the masthead is a true foreground layer. Archive content scrolls underneath it. */ html{scroll-padding-top:calc(var(--mm-fixed-header-height,184px) + 18px)!important;} #milk-mustache-database{ --mm-fixed-header-height:184px; padding-top:var(--mm-fixed-header-height)!important; } #milk-mustache-database>header{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; z-index:2147483000!important; margin:0!important; transform:translateZ(0); backface-visibility:hidden; } #milk-mustache-database>main, #milk-mustache-database>.mm-view{position:relative;z-index:1;} #milk-mustache-database .mm-view, #milk-mustache-database .year-group, #milk-mustache-database [id^="record-"]{ scroll-margin-top:calc(var(--mm-fixed-header-height,184px) + 18px)!important; } /* Keep overlays useful without allowing ordinary archive content above the masthead. */ #milk-mustache-database .cow-top-button,.cow-top-button{z-index:2147483001!important;} /* v172: hard contrast for the pale-blue Visual archive pill. */ #milk-mustache-database .archive-intro.chronology-tag, #milk-mustache-database .archive-intro.chronology-tag:hover, #milk-mustache-database .archive-intro.chronology-tag:focus, #milk-mustache-database .archive-intro.chronology-tag:active { color:#000!important; -webkit-text-fill-color:#000!important; text-shadow:none!important; } /* Center every recovered-image gallery and its associated title/captions. */ #milk-mustache-database .gallery { grid-template-columns:repeat(auto-fit,minmax(235px,320px))!important; justify-content:center!important; justify-items:stretch!important; align-items:start!important; width:100%!important; margin-left:auto!important; margin-right:auto!important; } #milk-mustache-database .gallery >.asset { width:100%!important; max-width:320px!important; justify-self:center!important; text-align:center!important; } #milk-mustache-database .gallery.assetimg, #milk-mustache-database .gallery.assetlinks { margin-left:auto!important; margin-right:auto!important; } #milk-mustache-database .detailtitle >.eyebrow, #milk-mustache-database .detailtitle > h2, #milk-mustache-database .primary-meta > h3, #milk-mustache-database h2:has(+.gallery), #milk-mustache-database h3:has(+.gallery), #milk-mustache-database h4:has(+.gallery), #milk-mustache-database .gallery.asset h4, #milk-mustache-database .gallery.asset.small, #milk-mustache-database .gallery.asset p { text-align:center!important; } @supports not selector(h3:has(+.gallery)) { #milk-mustache-database .panel > h3, #milk-mustache-database .variantbody > h4 {text-align:center;} } /* v175: global readability rule. No white/pale text may sit on pale-blue UI. */ #milk-mustache-database .chronology-tag, #milk-mustache-database .yearcount, #milk-mustache-database .badge, #milk-mustache-database .back, #milk-mustache-database .chip, #milk-mustache-database .variant-tag, #milk-mustache-database .year-index a, #milk-mustache-database .archive-search-row button, #milk-mustache-database .checklist-tools button, #milk-mustache-database details.variantblock > summary, #milk-mustache-database th, #milk-mustache-database .mm-auto-lightblue { color:#071015!important; -webkit-text-fill-color:#071015!important; text-shadow:none!important; } #milk-mustache-database .chronology-tag *, #milk-mustache-database .yearcount *, #milk-mustache-database .badge *, #milk-mustache-database .back *, #milk-mustache-database .chip *, #milk-mustache-database .variant-tag *, #milk-mustache-database .year-index a *, #milk-mustache-database .archive-search-row button *, #milk-mustache-database .checklist-tools button *, #milk-mustache-database details.variantblock > summary *, #milk-mustache-database th * { color:#071015!important; -webkit-text-fill-color:#071015!important; text-shadow:none!important; } /* Footer is intentionally pale: every readable item in it is dark. */ #milk-mustache-database .site-footer, #milk-mustache-database .site-footer * { color:#071015!important; -webkit-text-fill-color:#071015!important; text-shadow:none!important; } #milk-mustache-database .site-footer a {text-decoration-color:#17485e!important;} /* Preserve white lettering only on genuinely dark navigation/controls. */ #milk-mustache-database .nav a, #milk-mustache-database .cow-top-button { -webkit-text-fill-color:#fff!important; } /* Absolute contrast policy: never use white/pale lettering on light-blue UI. */ #milk-mustache-database .back,#milk-mustache-database .chronology-tag,#milk-mustache-database .yearcount,#milk-mustache-database .variant-tag,#milk-mustache-database .chip,#milk-mustache-database .year-index a,#milk-mustache-database details.variantblock>summary,#milk-mustache-database .checklist-tools button,#milk-mustache-database .archive-search-row button,#milk-mustache-database th,#milk-mustache-database .visual-record-note,#milk-mustache-database .mm-auto-lightblue{color:#05090c!important;-webkit-text-fill-color:#05090c!important;text-shadow:none!important} #milk-mustache-database .back *,#milk-mustache-database .chronology-tag *,#milk-mustache-database .yearcount *,#milk-mustache-database .variant-tag *,#milk-mustache-database .chip *,#milk-mustache-database .year-index a *,#milk-mustache-database details.variantblock>summary *,#milk-mustache-database .checklist-tools button *,#milk-mustache-database .archive-search-row button *,#milk-mustache-database th *,#milk-mustache-database .visual-record-note *,#milk-mustache-database .mm-auto-lightblue *{color:#05090c!important;-webkit-text-fill-color:#05090c!important;text-shadow:none!important} #milk-mustache-database .site-footer,#milk-mustache-database .site-footer *{color:#05090c!important;-webkit-text-fill-color:#05090c!important;text-shadow:none!important} #milk-mustache-database .site-footer a{color:#063d57!important;-webkit-text-fill-color:#063d57!important;text-decoration-color:#063d57!important;font-weight:750} #milk-mustache-database .nav a,#milk-mustache-database .cow-top-button{color:#fff!important;-webkit-text-fill-color:#fff!important} .mm-skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:#000;padding:.6em 1em;border:2px solid #91cee8;border-radius:0 0 8px 0;font:inherit}.mm-skip:focus{left:0} /* v206 CONTRAST REPAIR. Diagnosis: twelve successive contrast blocks (v147 through v176) accumulated and ended up contradicting each other. v162 set html, body and the site container were forced to background #000 with !important while v175 and v176 set dark lettering (#05090c / #071015 / #063d57) on the pale UI elements - their own comments say "No white/pale text may sit on pale-blue UI" and "Footer is intentionally pale". But those elements carry no background rule of their own, so they inherited #000 and the dark text landed on black. 42 selectors were affected. The dark-lettering rules were RIGHT; the pale backgrounds they were written for had gone missing. This restores them. Nothing here changes any text colour. */ #milk-mustache-database .site-footer{background:#eefaff!important;border-top:1px solid #91cee8!important;padding:1.1em 1.2em!important;border-radius:10px!important} #milk-mustache-database .site-footer a{text-decoration:underline!important} #milk-mustache-database .back, #milk-mustache-database .chip, #milk-mustache-database .chronology-tag, #milk-mustache-database .yearcount, #milk-mustache-database .variant-tag, #milk-mustache-database .badge, #milk-mustache-database .mm-auto-lightblue, #milk-mustache-database #home.year-index a, #milk-mustache-database .year-index a{ background:linear-gradient(180deg,#f6fdff,#bfeaff)!important; border:1px solid #91cee8!important; border-radius:999px!important; padding:.18em.72em!important; display:inline-block!important; } #milk-mustache-database .back:hover,#milk-mustache-database .back:focus, #milk-mustache-database .chronology-tag:hover,#milk-mustache-database .chronology-tag:focus, #milk-mustache-database .yearcount:hover,#milk-mustache-database .yearcount:focus, #milk-mustache-database .year-index a:hover,#milk-mustache-database .year-index a:focus{ background:#fff!important;border-color:#62bfe8!important; } #milk-mustache-database .archive-search-row button, #milk-mustache-database .checklist-tools button, #milk-mustache-database #home.archive-search-panel button{ background:linear-gradient(180deg,#f6fdff,#dff5ff)!important; border:1px solid #91cee8!important;border-radius:8px!important; } #milk-mustache-database th{background:#dff5ff!important;border-bottom:1px solid #91cee8!important} #milk-mustache-database details.variantblock>summary, #milk-mustache-database details.variantblock > summary{ background:linear-gradient(180deg,#f6fdff,#dff5ff)!important; border:1px solid #91cee8!important;border-radius:8px!important;padding:.45em.8em!important; } #milk-mustache-database .visual-record-note{ background:#eefaff!important;border:1px solid #91cee8!important; border-radius:8px!important;padding:.6em.9em!important; } #milk-mustache-database .visual-record-note,#milk-mustache-database .visual-record-note *{color:#05090c!important} /*.source links sit inside dark panels, so they must NOT be dark. The v160 rule already gives them #c8edff; this stops the stray `.source{color:#000}` from an earlier block winning on the unscoped selector. */ #milk-mustache-database .source{color:#c8edff!important} #milk-mustache-database .panel.source,#milk-mustache-database .assetlinks.source{color:#c8edff!important} #milk-mustache-database .site-footer.source{color:#063d57!important} /* Second pass: the remaining cases the audit surfaced. */ #milk-mustache-database .archive-intro.chronology-tag, #milk-mustache-database .archive-intro.chronology-tag:hover, #milk-mustache-database .archive-intro.chronology-tag:focus, #milk-mustache-database .archive-intro.chronology-tag:active{ background:linear-gradient(180deg,#f6fdff,#bfeaff)!important; border:1px solid #91cee8!important;border-radius:999px!important; padding:.18em.72em!important;display:inline-block!important; } #milk-mustache-database .site-footer a, #milk-mustache-database .site-footer.source{background:transparent!important;border:0!important;padding:0!important} #milk-mustache-database .visual-record-note b{color:#05090c!important} /*.stats.stat already carries a pale #f8fcff background; its children inherit it. */ /* v221 LEGIBILITY REPAIR. Three problems, all in the same decorative layer: 1. A 120x120px glowing ring was drawn half-off the TOP-RIGHT CORNER of every .panel and.card via ::after - 7,612 of them - landing exactly where headings sit. That is the vignette. 2. Those same elements had a TRANSLUCENT diagonal background linear-gradient(145deg, rgba(5,10,14,.88), rgba(10,18,24,.72)), so whatever sat behind a panel bled through unevenly across it. Contrast measured fine at both ends (~19:1 white on either), but a background that shifts under the text still reads as murky. 3. backdrop-filter: blur(11px) saturate(1.06) on all 7,612 - one of the most expensive properties in CSS, forcing the browser to sample and blur behind every panel on the page. Fix: remove the ring, flatten the background to a solid, drop the blur. No text colour changes. Borders and radii are untouched. */ #milk-mustache-database .panel::after, #milk-mustache-database .card::after{ content:none !important; display:none !important; } #milk-mustache-database .panel, #milk-mustache-database .card, #milk-mustache-database .detailtitle, #milk-mustache-database .visual-record-note, #milk-mustache-database .year-heading, #milk-mustache-database .tablewrap{ background:#070d11 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 8px 24px rgba(0,0,0,.30) !important; } /* Slightly lift nested panels so hierarchy is still readable without the gradient. */ #milk-mustache-database .panel.panel, #milk-mustache-database .panel.subpanel, #milk-mustache-database .subpanel{ background:#0b1319 !important; } /* The pale UI restored in v206 must stay pale - it carries dark text. */ #milk-mustache-database .site-footer{background:#eefaff !important;backdrop-filter:none !important} #milk-mustache-database .visual-record-note{background:#eefaff !important;color:#05090c !important} #milk-mustache-database .visual-record-note *{color:#05090c !important} #milk-mustache-database th{background:#dff5ff !important} #milk-mustache-database .thumb{background:linear-gradient(145deg,#e5f7ff,#fff 52%,#d8f2fd) !important} /* v223. Remove every decorative pseudo-element ring across ALL box classes, not just.panel and.card, and calm the corner radii so nothing reads as a pill. The original ring was scoped to.panel::after and.card::after only, but the same rounded-box base style is shared by eleven classes: .panel.campaign-intro.stat.card.archive-intro.browser-find .year-heading.keycard.buycard.sourcecard.merchcard This kills decoration on all of them and on their children, so no stray ring, glow or pill survives anywhere. */ #milk-mustache-database .panel::after, #milk-mustache-database .panel::before, #milk-mustache-database .card::after, #milk-mustache-database .card::before, #milk-mustache-database .stat::after, #milk-mustache-database .stat::before, #milk-mustache-database .stats::after, #milk-mustache-database .stats::before, #milk-mustache-database .campaign-intro::after, #milk-mustache-database .campaign-intro::before, #milk-mustache-database .archive-intro::after, #milk-mustache-database .archive-intro::before, #milk-mustache-database .browser-find::after, #milk-mustache-database .browser-find::before, #milk-mustache-database .year-heading::after, #milk-mustache-database .year-heading::before, #milk-mustache-database .keycard::after, #milk-mustache-database .keycard::before, #milk-mustache-database .buycard::after, #milk-mustache-database .buycard::before, #milk-mustache-database .sourcecard::after, #milk-mustache-database .sourcecard::before, #milk-mustache-database .merchcard::after, #milk-mustache-database .merchcard::before, #milk-mustache-database .detailtitle::after, #milk-mustache-database .detailtitle::before, #milk-mustache-database .visual-record-note::after, #milk-mustache-database .visual-record-note::before, #milk-mustache-database .tablewrap::after, #milk-mustache-database .tablewrap::before, #milk-mustache-database .subpanel::after, #milk-mustache-database .subpanel::before{ content:none !important; display:none !important; background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; } /* Calmer corners. 15px on a short wide box reads as a pill; 8px reads as a card. */ #milk-mustache-database .panel, #milk-mustache-database .card, #milk-mustache-database .stat, #milk-mustache-database .campaign-intro, #milk-mustache-database .archive-intro, #milk-mustache-database .browser-find, #milk-mustache-database .year-heading, #milk-mustache-database .keycard, #milk-mustache-database .buycard, #milk-mustache-database .sourcecard, #milk-mustache-database .merchcard, #milk-mustache-database .detailtitle, #milk-mustache-database .visual-record-note, #milk-mustache-database .tablewrap{ border-radius:8px !important; } /* Centre the third and fourth home sections, per request. */ #milk-mustache-database #home #mm-mustache-facts, #milk-mustache-database #home.mm-era-panel{ text-align:center; max-width:900px; margin-left:auto; margin-right:auto; } #milk-mustache-database #home #mm-mustache-facts.eyebrow, #milk-mustache-database #home.mm-era-panel.eyebrow{text-align:center} #milk-mustache-database #home.mm-era-panel.linkchips{justify-content:center} /* The mustache-production and campaign-eras blocks are now subsections inside Campaign history, so they must not carry their own panel chrome. */ #milk-mustache-database #home.campaign-history-standalone #mm-mustache-facts, #milk-mustache-database #home.campaign-history-standalone.mm-era-panel{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:1.6em 0 0 !important; max-width:none !important; text-align:left !important; } #milk-mustache-database #home.campaign-history-standalone #mm-mustache-facts.eyebrow, #milk-mustache-database #home.campaign-history-standalone.mm-era-panel.eyebrow{ text-align:left !important; margin-top:.4em; } #milk-mustache-database #home.campaign-history-standalone.mm-era-panel.linkchips{ justify-content:flex-start !important; } /* A hairline between the merged subsections so they still read as distinct. */ #milk-mustache-database #home.campaign-history-standalone #mm-mustache-facts, #milk-mustache-database #home.campaign-history-standalone.mm-era-panel{ border-top:1px solid rgba(224,246,255,.22) !important; padding-top:1.3em !important; } /* v226 RESPONSIVE / NO-HORIZONTAL-SCROLL. Causes found by auditing, not guessed at: 1. NO word-wrap rule existed anywhere except one small widget. The page carries 64-character SHA256 hashes inside

, plus long URLs in link text. A
      64-char unbreakable string forces its container wider than the viewport,
      which is what produces the horizontal scrollbar.
   2. table, pre, svg, iframe and video had no max-width guard. Only img did.
   3. Grid minimums were absolute:.grid used minmax(220px,1fr),.detailgrid used
      minmax(300px,530px),.gallery minmax(235px,320px). Below those widths the
      track cannot shrink and the row overflows.
   4.stats was locked to repeat(5,1fr) until the 900px breakpoint - five columns
      is too many between roughly 600 and 900px.

   Fixes are at the source. The overflow-x guard at the end is a backstop only,
   and uses clip rather than hidden so position:sticky keeps working. */

/* 1. long strings break instead of pushing the layout wide */
#milk-mustache-database,
#milk-mustache-database p,
#milk-mustache-database li,
#milk-mustache-database td,
#milk-mustache-database th,
#milk-mustache-database h1,
#milk-mustache-database h2,
#milk-mustache-database h3,
#milk-mustache-database .panel,
#milk-mustache-database .card,
#milk-mustache-database .cardbody,
#milk-mustache-database .small,
#milk-mustache-database .meta,
#milk-mustache-database .eyebrow{
  overflow-wrap:anywhere;
  word-break:break-word;
}
#milk-mustache-database code,
#milk-mustache-database a{
  overflow-wrap:anywhere;
  word-break:break-all;
}

/* 2. nothing may exceed its container */
#milk-mustache-database img,
#milk-mustache-database svg,
#milk-mustache-database table,
#milk-mustache-database pre,
#milk-mustache-database iframe,
#milk-mustache-database video,
#milk-mustache-database canvas{
  max-width:100% !important;
  height:auto;
}
#milk-mustache-database .tablewrap{max-width:100%;overflow-x:auto}

/* 3. grid tracks that can actually shrink. min() means the track never
      demands more than the space available. */
#milk-mustache-database .grid{
  grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)) !important;
}
#milk-mustache-database .gallery{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) !important;
}
#milk-mustache-database .detailgrid{
  grid-template-columns:minmax(min(300px,100%),530px) 1fr;
}
#milk-mustache-database .keygrid,
#milk-mustache-database .buygrid,
#milk-mustache-database .sourcegrid,
#milk-mustache-database .merchgrid{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)) !important;
}

/* 4. stats reflow by available width rather than a hard column count */
#milk-mustache-database .stats{
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)) !important;
}

/* 5. full width, centred, breathing room that scales with the screen */
#milk-mustache-database main,
#milk-mustache-database .top{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(12px,3vw,24px) !important;
  box-sizing:border-box;
}
#milk-mustache-database .brand,
#milk-mustache-database .nav{
  max-width:100%;
  box-sizing:border-box;
}
#milk-mustache-database .nav{flex-wrap:wrap}

/* 6. backstop. clip, not hidden - hidden would break the sticky masthead. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
#milk-mustache-database{max-width:100%;overflow-x:clip}

/* 7. narrow screens: single column where two would crush */
@media (max-width:560px){
  #milk-mustache-database .detailgrid{grid-template-columns:1fr}
  #milk-mustache-database .stats{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)) !important}
  #milk-mustache-database main{padding-inline:12px !important}
}


/* The footer kept border-radius:10px from the v206 contrast repair and was never
   added to the v223 flatten list, so it stayed rounded while everything else went
   to 8px. A full-width pale block with rounded corners on a black page reads as a
   pill. It is a footer - it should be a band. */

#milk-mustache-database .site-footer{
  border-radius:0 !important;
  border:0 !important;
  border-top:1px solid #91cee8 !important;
  background:#eefaff !important;
  padding:1.4em 1.2em !important;
  margin-top:2.4em !important;
  box-shadow:none !important;
  text-align:center;
}
#milk-mustache-database .site-footer::before,
#milk-mustache-database .site-footer::after{
  content:none !important;
  display:none !important;
}


/* The merch grid had two problems.

   1. An empty.merchgrid was left behind in the intro panel when the collateral
      split moved every card out of it - a blank grid gap. Removed in markup.
   2. Only 5 of 15 cards carry an image. Cards with one get a 250px image block,
      cards without get nothing, so the grid heights were wildly ragged. Every
      card now reserves the same block, and image-less cards show an explicit
      placeholder rather than collapsing. */

#milk-mustache-database .merchgrid{
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)) !important;
  align-items:stretch;
}
#milk-mustache-database .merchcard{
  display:flex;
  flex-direction:column;
  gap:.5em;
}
#milk-mustache-database .merchcard img{
  width:100%;
  height:200px;
  object-fit:contain;
  background:#eef8fc;
  border-radius:8px;
  margin:0;
}
/* image-less cards reserve the same space and say why it is empty */
#milk-mustache-database .merchcard.no-image::before{
  content:"Image not yet recovered";
  display:flex;
  align-items:center;
  justify-content:center;
  height:200px;
  background:#eef8fc;
  border:1px dashed #91cee8;
  border-radius:8px;
  color:#3d5a68;
  font-size:.78em;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#milk-mustache-database .merchcard.small{margin-top:auto}
#milk-mustache-database .merchcard h3{margin:.1em 0 0;font-size:1rem;line-height:1.25}


/* v232. Badges and pills go back to WHITE TEXT ON DARK, which is what the site's
   dark theme wants and what the original design intended.

   How it went wrong: an early rule gave badges white text on a tinted translucent
   background (green for.good, blue for.warn). v175/v176 then forced
   color:#071015 on them. the v206 contrast repair saw dark text with no background
   and supplied a PALE gradient to make it legible - which locked in the wrong half
   of that argument and left pale pills sitting on dark cards.

   Measured, white on the restored tints: good 13.1:1, warn 13.5:1, neutral 14.1:1.
   All far past the 4.5:1 minimum.

   Deliberately NOT changed: the footer and.visual-record-note stay pale blocks
   with dark text - those are intentional light panels, not pills. */

#milk-mustache-database .badge,
#milk-mustache-database .badge *,
#milk-mustache-database .chip,
#milk-mustache-database .chip *,
#milk-mustache-database .chronology-tag,
#milk-mustache-database .chronology-tag *,
#milk-mustache-database .archive-intro.chronology-tag,
#milk-mustache-database .yearcount,
#milk-mustache-database .yearcount *,
#milk-mustache-database .variant-tag,
#milk-mustache-database .variant-tag *,
#milk-mustache-database .back,
#milk-mustache-database .back *,
#milk-mustache-database .year-index a,
#milk-mustache-database #home.year-index a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}

/* the pill backgrounds themselves: dark and translucent, not pale */
#milk-mustache-database .chip,
#milk-mustache-database .chronology-tag,
#milk-mustache-database .archive-intro.chronology-tag,
#milk-mustache-database .yearcount,
#milk-mustache-database .variant-tag,
#milk-mustache-database .back,
#milk-mustache-database .year-index a,
#milk-mustache-database #home.year-index a{
  background:rgba(143,216,246,.16) !important;
  border:1px solid rgba(224,246,255,.34) !important;
}
#milk-mustache-database .chip:hover,
#milk-mustache-database .chronology-tag:hover,
#milk-mustache-database .yearcount:hover,
#milk-mustache-database .back:hover,
#milk-mustache-database .year-index a:hover,
#milk-mustache-database .chip:focus,
#milk-mustache-database .chronology-tag:focus,
#milk-mustache-database .yearcount:focus,
#milk-mustache-database .back:focus,
#milk-mustache-database .year-index a:focus{
  background:rgba(143,216,246,.28) !important;
  border-color:rgba(255,255,255,.6) !important;
}

#milk-mustache-database .badge{
  background:rgba(143,216,246,.16) !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
#milk-mustache-database .badge.good{background:rgba(48,151,113,.30) !important}
#milk-mustache-database .badge.warn{background:rgba(83,139,185,.28) !important}

/* table headers belong to the dark tablewrap, so they match it */
#milk-mustache-database th{
  background:rgba(143,216,246,.14) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-bottom:1px solid rgba(224,246,255,.32) !important;
}

/* variant summaries sit inside dark panels too */
#milk-mustache-database details.variantblock > summary,
#milk-mustache-database details.variantblock>summary{
  background:rgba(143,216,246,.14) !important;
  border:1px solid rgba(224,246,255,.30) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#milk-mustache-database details.variantblock > summary *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* search and checklist buttons, same reasoning */
#milk-mustache-database .archive-search-row button,
#milk-mustache-database .checklist-tools button,
#milk-mustache-database #home.archive-search-panel button{
  background:rgba(143,216,246,.18) !important;
  border:1px solid rgba(224,246,255,.36) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* v233. Replaces the masthead art with three smileys sipping chocolate, plain and
   strawberry milk, each left with a mustache in the colour of their drink.

   The old.milk-fluid-stage art is hidden rather than deleted, so it can be
   restored by removing this block. The header grows to fit the faces, and the
   scroll-padding variable grows with it so anchor links still land correctly. */

#milk-mustache-database>header.milk-fluid-stage{display:none!important}

#milk-mustache-database{--mm-fixed-header-height:322px!important}
#milk-mustache-database>header{min-height:322px!important}
html{scroll-padding-top:340px!important}

#milk-mustache-database>header.mm-smiley-stage{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  height:150px; pointer-events:none; overflow:hidden;
}
#milk-mustache-database>header.mm-smileys{display:block;width:100%;height:100%}

/* the sip cycle */
.mm-smileys .msGlass{animation:msGlass 9.5s cubic-bezier(.4,.05,.3,1) infinite;transform-origin:800px 306px}
.mm-smileys .msLevel{animation:msLevel 9.5s cubic-bezier(.45,0,.55,1) infinite}
.mm-smileys .msSlosh{animation:msSlosh 9.5s ease-in-out infinite;transform-origin:800px 256px}
.mm-smileys .msMus{animation:msMus 9.5s ease-out infinite;transform-origin:800px 202px}
.mm-smileys .msDrip{animation:msDrip 9.5s ease-in infinite;transform-origin:800px 216px}
.mm-smileys .msEye{animation:msEye 9.5s ease-in-out infinite}
@keyframes msGlass{0%{transform:translateY(200px) rotate(0deg);opacity:0}7%{opacity:1}19%{transform:translateY(0) rotate(0deg)}27%{transform:translateY(-7px) rotate(-16deg)}52%{transform:translateY(-9px) rotate(-20deg)}61%{transform:translateY(0) rotate(0deg)}74%{transform:translateY(200px) rotate(0deg);opacity:1}78%,100%{transform:translateY(200px) rotate(0deg);opacity:0}}
@keyframes msLevel{0%,25%{transform:translateY(0)}52%{transform:translateY(78px)}100%{transform:translateY(78px)}}
@keyframes msSlosh{0%,23%{transform:rotate(0deg)}31%{transform:rotate(3deg)}43%{transform:rotate(-1.8deg)}56%,100%{transform:rotate(0deg)}}
@keyframes msMus{0%,27%{opacity:0;transform:scaleX(.55) scaleY(.5)}34%{opacity:.5;transform:scaleX(.8) scaleY(.8)}46%{opacity:.9;transform:scaleX(1) scaleY(1.04)}54%{opacity:1;transform:scaleX(1) scaleY(1)}93%{opacity:1;transform:scaleX(1) scaleY(1)}100%{opacity:0;transform:scaleX(.95) scaleY(.9)}}
@keyframes msDrip{0%,60%{opacity:0;transform:translateY(-8px)}72%{opacity:1;transform:translateY(0)}94%{opacity:1}100%{opacity:0;transform:translateY(5px)}}
@keyframes msEye{0%,22%{transform:scaleY(1)}31%{transform:scaleY(.26)}55%{transform:scaleY(.26)}63%,100%{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
.mm-smileys .msGlass,.mm-smileys .msLevel,.mm-smileys .msSlosh,
.mm-smileys .msMus,.mm-smileys .msDrip,.mm-smileys .msEye{animation:none!important}
.mm-smileys .msGlass{opacity:0}
.mm-smileys .msMus,.mm-smileys .msDrip{opacity:1;transform:none}
}
@media (max-width:820px){
  #milk-mustache-database{--mm-fixed-header-height:268px!important}
  #milk-mustache-database>header{min-height:268px!important}
  html{scroll-padding-top:286px!important}
  #milk-mustache-database>header.mm-smiley-stage{height:104px}
}


/* v234. Three fixes.

   1. THE HEADER WAS SCROLLING. Cause: an earlier v226 no-horizontal-scroll backstop set
      overflow-x:clip on html and body. An overflow value other than visible on the
      root or body clips and detaches position:fixed, so the header rode down the
      page. The backstop is removed here - the real overflow fixes in v226 were the
      word-wrap rules and the min() grid tracks, and those stay.

   2. TOO MUCH SPACE ABOVE THE FACES. The art's viewBox was 0 0 1600 340 but nothing
      is drawn above y=60 or below y=286. That empty 60px was being scaled into the
      band. The viewBox is retargeted to the actual content bounds.

   3. TEXT IN THE ART. The SVG carried  and <desc> naming the flavours, which
      surfaces as a hover tooltip. Removed in markup; the accessible name is now an
      aria-label on the container instead. */

/* 1 - let the header be genuinely fixed again */
html{overflow-x:visible!important}
body{overflow-x:visible!important;max-width:none!important}
#milk-mustache-database{overflow-x:visible!important}
#milk-mustache-database>header{
  position:fixed!important; top:0!important; left:0!important; right:0!important;
  transform:none!important; will-change:auto!important;
}

/* 2 - close the gap: tighter band, art anchored to the bottom */
#milk-mustache-database{--mm-fixed-header-height:268px!important}
#milk-mustache-database>header{min-height:286px!important;padding-bottom:0!important}
html{scroll-padding-top:302px!important}
#milk-mustache-database>header.top{padding-bottom:4px!important}
#milk-mustache-database>header.nav{margin-bottom:0!important}
#milk-mustache-database>header.mm-smiley-stage{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  height:132px; pointer-events:none; overflow:hidden;
}
@media (max-width:820px){
  #milk-mustache-database{--mm-fixed-header-height:246px!important}
  #milk-mustache-database>header{min-height:246px!important}
  html{scroll-padding-top:262px!important}
  #milk-mustache-database>header.mm-smiley-stage{height:96px}
}


/* v235. Restores gallery centring, which an earlier v226 responsive pass broke.

   There was a working rule:
       grid-template-columns: repeat(auto-fit, minmax(235px, 320px));
       justify-content: center;
   A MAX track size of 320px means the tracks do not fill the row, leaving slack
   that justify-content:center can distribute evenly. v226 replaced the 320px cap
   with 1fr to stop narrow-screen overflow - but 1fr makes every track expand to
   fill the row, so there was no slack left to centre. 493 of the 968 galleries
   hold a single asset, and that asset was being stretched across the full panel.

   Fixed by keeping the max cap AND making the minimum responsive:
       minmax(min(220px,100%), 320px)
   The min() collapses the floor on narrow screens so nothing overflows, while the
   320px ceiling preserves the slack that centring needs. */

#milk-mustache-database .gallery{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),320px)) !important;
  justify-content:center !important;
  justify-items:center !important;
  align-items:start !important;
}
#milk-mustache-database .gallery >.asset{
  width:100% !important;
  max-width:320px !important;
  justify-self:center !important;
}

/* the merch and collection grids had the same 1fr problem */
#milk-mustache-database .merchgrid{
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important;
  justify-content:center !important;
}
#milk-mustache-database .keygrid,
#milk-mustache-database .buygrid,
#milk-mustache-database .sourcegrid{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),340px)) !important;
  justify-content:center !important;
}

/* category card grids: centre the final short row rather than leaving it ragged left */
#milk-mustache-database .grid.category-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important;
  justify-content:center !important;
}

/* and centre what sits inside each asset */
#milk-mustache-database .gallery.assetimg,
#milk-mustache-database .gallery.assetlinks{
  margin-left:auto !important; margin-right:auto !important;
}
#milk-mustache-database .gallery.assetlinks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4em;
}


/* v238. The art moves OUT of the header into its own band.

   Why: inside the header the art sat at z-index 1 beneath the brand plate
   (rgba(0,0,0,.78), up to 1100px wide) and the nav plate (rgba(0,0,0,.82), up to
   1500px wide), both at z-index 8. Two nearly-opaque full-width black bars over
   the top of it. No repositioning inside the header could fix that.

   Now: the header is compact and holds only the brand and nav, so it stays fixed
   and never scrolls. The smileys get a full-bleed band immediately below it with
   nothing layered over them at all. */

/* header returns to a compact bar - brand and nav only */
#milk-mustache-database{--mm-fixed-header-height:184px!important}
#milk-mustache-database>header{
  min-height:184px!important;
  position:fixed!important; top:0!important; left:0!important; right:0!important;
  z-index:2147483000!important;
}
html{scroll-padding-top:212px!important}
#milk-mustache-database>header.mm-smiley-stage{display:none!important}

/* the band: full bleed, nothing over it */
.mm-smiley-band{
  position:relative;
  z-index:1;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  height:clamp(150px,17vw,250px);
  background:#05090c;
  overflow:hidden;
  border-bottom:1px solid rgba(224,246,255,.14);
  display:block;
}
.mm-smiley-band.mm-smileys{display:block;width:100%;height:100%}

@media (max-width:820px){
  #milk-mustache-database{--mm-fixed-header-height:172px!important}
  #milk-mustache-database>header{min-height:172px!important}
  html{scroll-padding-top:198px!important}
.mm-smiley-band{height:clamp(112px,26vw,160px)}
}
@media (max-width:520px){
.mm-smiley-band{height:104px}
}


/* v239. The smileys move into the Welcome panel.

   The standalone band worked but sat apart from anything. Putting the art at the
   head of the welcome makes it the opening image of the collector's own
   introduction, which is where it belongs.

   The panel has 18px padding and an 8px radius, so the art is bled out to the
   panel edges with negative margins and given matching top corners. */

.mm-smiley-band{display:none!important}

#milk-mustache-database #home.campaign-intro{
  padding-top:0 !important;
  overflow:hidden;
}
#milk-mustache-database #home.mm-welcome-art{
  display:block;
  margin:0 -18px 18px;
  height:clamp(158px,17vw,240px);
  background:#05090c;
  border-bottom:1px solid rgba(224,246,255,.16);
  overflow:hidden;
  position:relative;
}
#milk-mustache-database #home.mm-welcome-art.mm-smileys{
  display:block;width:100%;height:100%;
}
/* the welcome panel is forced black with white text, so the art sits flush */
#milk-mustache-database #home.campaign-intro.campaign-copy{padding-top:2px}

@media (max-width:820px){
  #milk-mustache-database #home.mm-welcome-art{height:clamp(118px,26vw,168px)}
}
@media (max-width:520px){
  #milk-mustache-database #home.mm-welcome-art{height:96px}
}


/* v240. The site's blue applied to every section outline and every button.

   Before, panels were outlined in rgba(224,246,255,.28) - a near-white at 28%,
   which composites to #444e54 over the panel background and reads as grey. The
   palette blue was only appearing on a handful of pale elements.

   Now every container is outlined in --blue at 55% (#527d8f as rendered) and every
   interactive control gets it at full strength (#8fd8f6), so buttons and inputs
   read as the brightest blue on the page - which is what you want them to be. */

/* --- sections and containers ------------------------------------------- */
#milk-mustache-database .panel,
#milk-mustache-database .card,
#milk-mustache-database .stat,
#milk-mustache-database .stats.stat,
#milk-mustache-database .tablewrap,
#milk-mustache-database .detailtitle,
#milk-mustache-database .asset,
#milk-mustache-database .merchcard,
#milk-mustache-database .campaign-intro,
#milk-mustache-database .campaign-history-standalone,
#milk-mustache-database .archive-intro,
#milk-mustache-database .archive-search-panel,
#milk-mustache-database .browser-find,
#milk-mustache-database .year-heading,
#milk-mustache-database .keycard,
#milk-mustache-database .buycard,
#milk-mustache-database .sourcecard,
#milk-mustache-database .subpanel,
#milk-mustache-database .category-heading,
#milk-mustache-database details.variantblock{
  border:1px solid rgba(143,216,246,.55) !important;
}

/* the welcome panel gets the accent rule it always had, in the palette blue */
#milk-mustache-database #home.campaign-intro{
  border-top:4px solid #8fd8f6 !important;
}
#milk-mustache-database #home.mm-welcome-art{
  border-bottom:1px solid rgba(143,216,246,.55) !important;
}

/* nested panels sit a shade quieter so the hierarchy still reads */
#milk-mustache-database .panel.panel,
#milk-mustache-database .panel.subpanel{
  border-color:rgba(143,216,246,.34) !important;
}

/* --- buttons and inputs: full-strength blue ---------------------------- */
#milk-mustache-database button,
#milk-mustache-database .archive-search-row button,
#milk-mustache-database .checklist-tools button,
#milk-mustache-database #home.archive-search-panel button,
#milk-mustache-database input[type="text"],
#milk-mustache-database input[type="search"],
#milk-mustache-database .archive-search-row input,
#milk-mustache-database select{
  border:1px solid #8fd8f6 !important;
  border-radius:8px !important;
}
#milk-mustache-database button:hover,
#milk-mustache-database button:focus,
#milk-mustache-database .archive-search-row input:focus,
#milk-mustache-database input[type="text"]:focus,
#milk-mustache-database input[type="search"]:focus{
  border-color:#cbedfc !important;
  box-shadow:0 0 0 3px rgba(143,216,246,.22) !important;
  outline:none !important;
}

/* --- pills keep their own lighter edge, brightened to the palette ------ */
#milk-mustache-database .badge,
#milk-mustache-database .chip,
#milk-mustache-database .chronology-tag,
#milk-mustache-database .yearcount,
#milk-mustache-database .variant-tag,
#milk-mustache-database .back,
#milk-mustache-database .year-index a{
  border:1px solid rgba(143,216,246,.62) !important;
}

/* --- nav and masthead -------------------------------------------------- */
#milk-mustache-database .nav{border:1px solid rgba(143,216,246,.45) !important}
#milk-mustache-database .brand{border:1px solid rgba(143,216,246,.34) !important}
#milk-mustache-database>header{border-bottom:1px solid rgba(143,216,246,.55) !important}

/* --- keyboard focus, everywhere ---------------------------------------- */
#milk-mustache-database a:focus-visible,
#milk-mustache-database button:focus-visible,
#milk-mustache-database summary:focus-visible,
#milk-mustache-database input:focus-visible{
  outline:2px solid #8fd8f6 !important;
  outline-offset:2px !important;
}

/* the pale panels keep a darker blue edge so they do not glare */
#milk-mustache-database .site-footer{border-top:1px solid #91cee8 !important}
#milk-mustache-database .visual-record-note{border:1px solid #91cee8 !important}
#milk-mustache-database th{border-bottom:1px solid rgba(143,216,246,.62) !important}


/* v242. Centres EVERY card grid on the site, not one at a time.

   The recurring cause: repeat(auto-fill, minmax(N, 1fr)).
     - auto-fill creates empty tracks to pad the row out
     - 1fr then gives those empty tracks real width
   So a row with one card puts it in track 1 and leaves the rest as empty
   columns beside it. Nothing is left over for justify-content to centre.

   v235 fixed.gallery and.grid.category-grid but missed plain.grid, which is
   what the chronological year rows use - and seven of those hold a single card.
   This does all of them at once so it stops recurring.

   The pattern throughout: auto-fit (collapses empty tracks) + a MAX track size
   (leaves slack) + justify-content:center (distributes the slack) +
   min(N,100%) as the floor (so narrow screens still cannot overflow). */

#milk-mustache-database .grid,
#milk-mustache-database .grid.category-grid,
#milk-mustache-database .category-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important;
  justify-content:center !important;
  justify-items:center !important;
}
#milk-mustache-database .grid >.card,
#milk-mustache-database .category-grid >.card{
  width:100% !important;
  max-width:300px !important;
}

#milk-mustache-database .gallery{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),320px)) !important;
  justify-content:center !important;
  justify-items:center !important;
}
#milk-mustache-database .merchgrid{
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),300px)) !important;
  justify-content:center !important;
}
#milk-mustache-database .keygrid,
#milk-mustache-database .buygrid,
#milk-mustache-database .sourcegrid{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),340px)) !important;
  justify-content:center !important;
}
#milk-mustache-database .mm-wb-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),260px)) !important;
  justify-content:center !important;
}
#milk-mustache-database .stats{
  grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),220px)) !important;
  justify-content:center !important;
}

/* the year-row heading and its count centre with the cards beneath them */
#milk-mustache-database .year-heading{
  justify-content:center !important;
  text-align:center !important;
}

/*.txgrid holds label/value rows inside a record, not cards - left-aligned
   is correct there, so it is deliberately untouched. */


/* v243. Proper prose typography for the home-page sections.

   The paragraphs had no measure at all - they ran the full 1440px panel width,
   which at 16px is roughly 180 characters a line. Comfortable reading is 45-75.
   That is why the text read as a slab instead of flowing.

   Set to 68ch, centred in the panel, with real spacing between paragraphs and
   a slightly looser line-height. */

#milk-mustache-database #home.campaign-intro p,
#milk-mustache-database #home.campaign-history p,
#milk-mustache-database #home #mm-mustache-facts p,
#milk-mustache-database #home.mm-era-panel p{
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-block:0 0 1.05em !important;
  line-height:1.72 !important;
  font-size:16.5px !important;
  text-align:left !important;
  hyphens:none;
}
#milk-mustache-database #home.campaign-intro p:last-child,
#milk-mustache-database #home.campaign-history p:last-child,
#milk-mustache-database #home #mm-mustache-facts p:last-child{
  margin-bottom:0 !important;
}

/* headings and eyebrows share the same column so nothing sits off-axis */
#milk-mustache-database #home.campaign-intro h2,
#milk-mustache-database #home.campaign-history h2,
#milk-mustache-database #home.campaign-intro.eyebrow,
#milk-mustache-database #home.campaign-history.eyebrow,
#milk-mustache-database #home #mm-mustache-facts h3,
#milk-mustache-database #home #mm-mustache-facts.eyebrow,
#milk-mustache-database #home.mm-era-panel h3,
#milk-mustache-database #home.mm-era-panel.eyebrow{
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:left !important;
}
#milk-mustache-database #home.campaign-intro h2,
#milk-mustache-database #home.campaign-history h2{
  margin-bottom:.5em !important;
}
#milk-mustache-database #home.campaign-history.eyebrow,
#milk-mustache-database #home #mm-mustache-facts.eyebrow,
#milk-mustache-database #home.mm-era-panel.eyebrow{
  margin-top:1.6em !important;
}

/* the era chip rows keep the same column, wrapping rather than stretching */
#milk-mustache-database #home.mm-era-panel.linkchips{
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex; flex-wrap:wrap; gap:.45em; justify-content:flex-start;
}
#milk-mustache-database #home.mm-era-panel #mm-era-note{
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* v244. Title alignment audited and made consistent.

   The stylesheet carried 82 separate text-align declarations. Resolving each
   heading context against the cascade found 1,498 headings across four contexts
   that were NOT centred while everything comparable was:

     1451  card titles (.cardbody h2)   - explicitly left
       29.buycard h3                  - no rule at all, browser default
       15.merchcard h3                - no rule at all
        3.sourcecard h3               - no rule at all

   Already correct and left alone: record titles (953), panel headings (3,713),
   sub-panel headings (826), primary-meta headings (606), gallery asset titles
   (1,757), variant headings (874), year and category headings, checklist
   categories. */

/* the four that were out of step */
#milk-mustache-database .cardbody,
#milk-mustache-database .cardbody h2,
#milk-mustache-database .cardbody.eyebrow,
#milk-mustache-database .cardbody.meta,
#milk-mustache-database .buycard h3,
#milk-mustache-database .merchcard h3,
#milk-mustache-database .merchcard.eyebrow,
#milk-mustache-database .sourcecard h3{
  text-align:center !important;
}
#milk-mustache-database .cardbody.badge{
  display:inline-block;
  margin-left:auto; margin-right:auto;
}
#milk-mustache-database .cardbody{
  display:flex; flex-direction:column; align-items:center;
}

/* PROSE HEADINGS: centred, but over their own 68ch column rather than the full
   panel. A heading centred on 1440px sits visibly off-axis from a 610px column
   of text beneath it, which reads as a mistake rather than a choice. */
#milk-mustache-database #home.campaign-intro h2,
#milk-mustache-database #home.campaign-history h2,
#milk-mustache-database #home.campaign-intro.eyebrow,
#milk-mustache-database #home.campaign-history.eyebrow,
#milk-mustache-database #home #mm-mustache-facts h3,
#milk-mustache-database #home #mm-mustache-facts.eyebrow,
#milk-mustache-database #home.mm-era-panel h3,
#milk-mustache-database #home.mm-era-panel.eyebrow{
  text-align:center !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* body copy stays left - centred paragraphs are hard to read at any length */
#milk-mustache-database #home.campaign-intro p,
#milk-mustache-database #home.campaign-history p,
#milk-mustache-database #home #mm-mustache-facts p,
#milk-mustache-database #home.mm-era-panel p,
#milk-mustache-database .panel p,
#milk-mustache-database .panel li,
#milk-mustache-database td{
  text-align:left !important;
}
/* table headers follow their columns */
#milk-mustache-database th{text-align:left !important}


/* v246. The wordmark replaces the plain h1.

   The logo is black lettering with a white outline and milk drips, on a
   transparent background. Composited over the site's #05090c header the black
   fill reads as hollow letterforms carried by the white outline and the drips -
   which suits a milk wordmark, so no backing plate is needed.

   The h1 is kept for search engines and screen readers, with its text visually
   hidden rather than removed. */

#milk-mustache-database .brand{
  background:transparent !important;
  border:0 !important;
  padding:6px 14px 4px !important;
  box-shadow:none !important;
}
#milk-mustache-database .brand h1{
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  text-shadow:none !important;
}
#milk-mustache-database .brand h1.mm-logo{
  display:block;
  width:min(100%,760px);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 2px 10px rgba(143,216,246,.18));
}
#milk-mustache-database .brand h1.mm-logo-text{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}
@media (max-width:820px){
  #milk-mustache-database .brand h1.mm-logo{width:min(100%,520px)}
}
@media (max-width:520px){
  #milk-mustache-database .brand h1.mm-logo{width:min(100%,340px)}
}


/* v247. Thicker blue outlines.

   Everything was 1px - the thinnest a border can be - and at 55% opacity that
   reads as a hairline, not an outline. Widths go up AND opacity with them,
   because a thick line at low opacity just looks like a smudge.

     containers   1px -> 2px, opacity.55 ->.70
     small cards  1px -> 2px, opacity.55 ->.62
     pills        1px -> 2px, opacity.62 ->.78
     buttons      1px -> 2px at full strength
     inputs       1px -> 2px at full strength
     welcome rule 4px -> 6px
     header edge  1px -> 2px

   Radii nudge up 8px -> 10px so a 2px border does not look pinched at the
   corners. */

#milk-mustache-database .panel,
#milk-mustache-database .card,
#milk-mustache-database .stat,
#milk-mustache-database .stats.stat,
#milk-mustache-database .tablewrap,
#milk-mustache-database .detailtitle,
#milk-mustache-database .campaign-intro,
#milk-mustache-database .campaign-history-standalone,
#milk-mustache-database .archive-intro,
#milk-mustache-database .archive-search-panel,
#milk-mustache-database .browser-find,
#milk-mustache-database .year-heading,
#milk-mustache-database .keycard,
#milk-mustache-database .buycard,
#milk-mustache-database .sourcecard,
#milk-mustache-database .category-heading,
#milk-mustache-database details.variantblock{
  border:2px solid rgba(143,216,246,.70) !important;
  border-radius:10px !important;
}

#milk-mustache-database .asset,
#milk-mustache-database .merchcard,
#milk-mustache-database .subpanel{
  border:2px solid rgba(143,216,246,.62) !important;
  border-radius:10px !important;
}

/* nested panels stay a step quieter so the hierarchy still reads */
#milk-mustache-database .panel.panel,
#milk-mustache-database .panel.subpanel{
  border:2px solid rgba(143,216,246,.42) !important;
}

/* interactive controls: thicker and full strength */
#milk-mustache-database button,
#milk-mustache-database .archive-search-row button,
#milk-mustache-database .checklist-tools button,
#milk-mustache-database #home.archive-search-panel button,
#milk-mustache-database input[type="text"],
#milk-mustache-database input[type="search"],
#milk-mustache-database .archive-search-row input,
#milk-mustache-database select{
  border:2px solid #8fd8f6 !important;
  border-radius:10px !important;
}
#milk-mustache-database button:hover,
#milk-mustache-database button:focus,
#milk-mustache-database input:focus{
  border-color:#cbedfc !important;
  box-shadow:0 0 0 4px rgba(143,216,246,.24) !important;
}

/* pills */
#milk-mustache-database .badge,
#milk-mustache-database .chip,
#milk-mustache-database .chronology-tag,
#milk-mustache-database .yearcount,
#milk-mustache-database .variant-tag,
#milk-mustache-database .back,
#milk-mustache-database .year-index a{
  border:2px solid rgba(143,216,246,.78) !important;
}

/* masthead and footer */
#milk-mustache-database .nav{border:2px solid rgba(143,216,246,.60) !important;border-radius:12px !important}
#milk-mustache-database>header{border-bottom:2px solid rgba(143,216,246,.70) !important}
#milk-mustache-database .site-footer{border-top:2px solid #91cee8 !important}
#milk-mustache-database .visual-record-note{border:2px solid #91cee8 !important;border-radius:10px !important}
#milk-mustache-database th{border-bottom:2px solid rgba(143,216,246,.78) !important}

/* the welcome panel's accent rule */
#milk-mustache-database #home.campaign-intro{
  border:2px solid rgba(143,216,246,.70) !important;
  border-top:6px solid #8fd8f6 !important;
  border-radius:10px !important;
}
#milk-mustache-database #home.mm-welcome-art{
  border-bottom:2px solid rgba(143,216,246,.70) !important;
}

/* focus rings scale with everything else */
#milk-mustache-database a:focus-visible,
#milk-mustache-database button:focus-visible,
#milk-mustache-database summary:focus-visible,
#milk-mustache-database input:focus-visible{
  outline:3px solid #8fd8f6 !important;
  outline-offset:2px !important;
}


/* v248b. The nav BUTTONS, which the v240 blue pass and the v247 thickening both
   missed - they only ever targeted.nav, the container.

   Resolving.nav a against the cascade, the winning rule was:
       border: 1px solid #444 !important
   A 1px GREY border. So the menu buttons were neither blue nor thick while
   everything around them had become both. */

#milk-mustache-database .nav a{
  border:2px solid rgba(143,216,246,.70) !important;
  border-radius:10px !important;
  padding:.42em.8em !important;
  background:rgba(143,216,246,.10) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-decoration:none !important;
  transition:border-color.12s ease, background.12s ease;
}
#milk-mustache-database .nav a:hover,
#milk-mustache-database .nav a:focus{
  border-color:#8fd8f6 !important;
  background:rgba(143,216,246,.24) !important;
  color:#fff !important;
}
#milk-mustache-database .nav a:focus-visible{
  outline:3px solid #8fd8f6 !important;
  outline-offset:2px !important;
}
/* the current view reads as selected */
#milk-mustache-database .nav a:active{
  border-color:#cbedfc !important;
  background:rgba(143,216,246,.32) !important;
}


/* v250. Footer centring, made explicit and belt-and-braces.

   text-align:center was already declared on.site-footer, but as the ONLY
   declaration in that v228 rule without !important - everything around it
   (border, background, padding, margin) carried the flag and it did not. That
   makes it fragile: any later rule, or a plain.site-footer{text-align:left}
   from the original stylesheet, takes it.

   Rather than rely on that, the footer is now centred three ways: the text, the
   block itself, and its inline children. */

#milk-mustache-database .site-footer{
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.3em;
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:1.5em 1.2em !important;
  box-sizing:border-box !important;
}
#milk-mustache-database .site-footer strong,
#milk-mustache-database .site-footer a,
#milk-mustache-database .site-footer p,
#milk-mustache-database .site-footer div,
#milk-mustache-database .site-footer span{
  text-align:center !important;
}
/* the wordmark line reads as a heading above the credit */
#milk-mustache-database .site-footer strong{
  font-size:1.08em;
  letter-spacing:.01em;
  display:block;
}
/* the <br> is redundant once the footer is a flex column */
#milk-mustache-database .site-footer br{display:none}


/* v253. A design system, replacing ad-hoc values with a scale.

   The audit found 22 distinct font sizes, 26 distinct px spacing values, a flat
   #000 background and 3 transitions across the whole site. Nothing was on a
   scale, so nothing felt deliberate.

   This layer sits ON TOP of the corrections already made - centring, white
   pills, thick blue outlines all survive. It changes depth, rhythm, type and
   motion. */

#milk-mustache-database{
  /* spacing: a 4px base, doubling */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* type: a 1.2 modular scale */
  --t-xs:11px; --t-sm:13px; --t-base:16px; --t-md:19px; --t-lg:23px; --t-xl:28px; --t-2xl:34px;
  /* surfaces, layered rather than flat */
  --surface-0:#05090c;
  --surface-1:#0a1116;
  --surface-2:#0f1920;
  --edge:rgba(143,216,246,.70);
  --edge-soft:rgba(143,216,246,.42);
  --glow:rgba(143,216,246,.16);
}

/* ---- DEPTH: the page is no longer flat black ------------------------- */
html,body{background:#04070a !important}
#milk-mustache-database{
  background:
    radial-gradient(1200px 600px at 50% -8%, rgba(143,216,246,.075), transparent 62%),
    radial-gradient(900px 500px at 12% 32%, rgba(143,216,246,.045), transparent 58%),
    radial-gradient(900px 500px at 88% 68%, rgba(143,216,246,.038), transparent 58%),
    #04070a !important;
  background-attachment:fixed !important;
}

/* ---- SURFACES: panels sit on the page, not in it --------------------- */
#milk-mustache-database .panel,
#milk-mustache-database .campaign-intro,
#milk-mustache-database .campaign-history-standalone,
#milk-mustache-database .archive-intro,
#milk-mustache-database .archive-search-panel,
#milk-mustache-database .tablewrap,
#milk-mustache-database .detailtitle{
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45) !important;
}

/* ---- CARDS: objects you can pick up ---------------------------------- */
#milk-mustache-database .card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(0,0,0,.4) !important;
  transition:transform.18s cubic-bezier(.2,.7,.3,1),
             box-shadow.18s ease,
             border-color.18s ease !important;
  overflow:hidden;
}
#milk-mustache-database .card:hover,
#milk-mustache-database .card:focus-within{
  transform:translateY(-4px) !important;
  border-color:#8fd8f6 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,
             0 16px 38px rgba(0,0,0,.55),
             0 0 0 1px rgba(143,216,246,.30),
             0 0 34px rgba(143,216,246,.14) !important;
}
#milk-mustache-database .card.thumb{
  background:radial-gradient(120% 100% at 50% 0%, rgba(143,216,246,.10), rgba(6,11,15,.9)) !important;
  overflow:hidden;
}
#milk-mustache-database .card.thumb img{
  transition:transform.3s cubic-bezier(.2,.7,.3,1);
}
#milk-mustache-database .card:hover.thumb img{transform:scale(1.045)}

/* ---- TYPE: a scale, and headings with presence ----------------------- */
#milk-mustache-database .cardbody h2{
  font-size:var(--t-base) !important;
  line-height:1.3 !important;
  letter-spacing:-.012em !important;
  font-weight:800 !important;
}
#milk-mustache-database .cardbody.eyebrow,
#milk-mustache-database .eyebrow{
  font-size:var(--t-xs) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:750 !important;
  color:#8fd8f6 !important;
  -webkit-text-fill-color:#8fd8f6 !important;
  opacity:.95;
}
#milk-mustache-database .cardbody.meta{
  font-size:var(--t-xs) !important;
  opacity:.72;
}
#milk-mustache-database .detailtitle > h2{
  font-size:clamp(24px,2.6vw,var(--t-2xl)) !important;
  line-height:1.14 !important;
  letter-spacing:-.022em !important;
  font-weight:850 !important;
}
#milk-mustache-database .panel > h3{
  font-size:var(--t-md) !important;
  letter-spacing:-.01em !important;
  font-weight:800 !important;
}
#milk-mustache-database .year-heading h2{
  font-size:clamp(26px,3vw,var(--t-2xl)) !important;
  letter-spacing:-.03em !important;
  font-weight:900 !important;
}

/* ---- YEAR HEADINGS: a divider with weight ---------------------------- */
#milk-mustache-database .year-heading{
  background:linear-gradient(180deg, rgba(143,216,246,.10), rgba(143,216,246,.02)) !important;
  padding:var(--s4) var(--s5) !important;
  margin-block:var(--s7) var(--s4) !important;
}

/* ---- BADGES: smaller, sharper --------------------------------------- */
#milk-mustache-database .badge{
  font-size:9.5px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:3px 8px !important;
  font-weight:800 !important;
  border-width:1px !important;
}

/* ---- HERO IMAGES: the artwork is the point --------------------------- */
#milk-mustache-database .hero,
#milk-mustache-database .assetimg{
  background:radial-gradient(120% 100% at 50% 0%, rgba(143,216,246,.09), rgba(5,9,12,.92)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset !important;
}
#milk-mustache-database .asset{
  transition:transform.18s cubic-bezier(.2,.7,.3,1), box-shadow.18s ease, border-color.18s ease;
}
#milk-mustache-database .asset:hover{
  transform:translateY(-3px);
  border-color:#8fd8f6 !important;
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(143,216,246,.12) !important;
}

/* ---- MOTION on everything interactive -------------------------------- */
#milk-mustache-database a,
#milk-mustache-database button,
#milk-mustache-database summary,
#milk-mustache-database .chip,
#milk-mustache-database .back,
#milk-mustache-database .year-index a{
  transition:background.15s ease, border-color.15s ease, color.15s ease, transform.15s ease !important;
}
#milk-mustache-database .nav a:hover{transform:translateY(-1px)}
#milk-mustache-database .back:hover{transform:translateX(-2px)}

/* ---- RHYTHM ---------------------------------------------------------- */
#milk-mustache-database .panel{padding:var(--s5) !important;margin-bottom:var(--s4) !important}
#milk-mustache-database .grid,
#milk-mustache-database .gallery,
#milk-mustache-database .category-grid{gap:var(--s4) !important}
#milk-mustache-database .cardbody{padding:var(--s3) var(--s3) var(--s4) !important;gap:var(--s1)}

/* ---- SELECTION + SCROLLBAR ------------------------------------------- */
#milk-mustache-database ::selection{background:rgba(143,216,246,.32);color:#fff}
#milk-mustache-database{scrollbar-color:rgba(143,216,246,.4) transparent}

@media (prefers-reduced-motion:reduce){
  #milk-mustache-database *{transition:none !important}
  #milk-mustache-database .card:hover,
  #milk-mustache-database .asset:hover{transform:none !important}
}


.mm-news-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mm-news-item{
  display:block;padding:12px 14px;border-radius:10px;text-decoration:none;
  background:linear-gradient(180deg,#0f1920,#0a1116);
  border:2px solid rgba(143,216,246,.45);
  transition:transform.15s ease,border-color.15s ease,box-shadow.15s ease;
}
.mm-news-item:hover{transform:translateY(-2px);border-color:#8fd8f6;
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 22px rgba(143,216,246,.12)}
.mm-news-item.t{display:block;font-weight:800;line-height:1.34;color:#fff;font-size:15px}
.mm-news-item.m{display:block;margin-top:5px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#8fd8f6;opacity:.95}
.mm-news-status{margin-top:10px;font-size:13px;color:#cbe8f6;opacity:.85}
.mm-news-empty{font-size:13px;opacity:.8;padding:10px 0}


/* v256. Art direction: PRINT plus MILK.
   Four inline SVG assets, about 1.6 KB total, no external requests:
     grain      fractal-noise paper texture, overlay-blended
     halftone   a 14px dot screen behind every image frame
     drip       a poured-milk edge tiling under section headings
     watermark  a large mustache silhouette repeating in the background */

#milk-mustache-database{
  --milk:#f4fafd;
  --grain:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch' result='f'/><feTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='2' stitchTiles='stitch' result='c'/><feBlend in='f' in2='c' mode='multiply' result='b'/><feColorMatrix in='b' type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(#g)' opacity='0.5'/></svg>");
  --halftone:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='0.00' cy='0.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='0.00' cy='24.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='24.00' cy='0.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='24.00' cy='24.00' r='1.00' fill='%238fd8f6' opacity='0.15'/><circle cx='6.00' cy='0.00' r='1.71' fill='%238fd8f6' opacity='0.28'/><circle cx='6.00' cy='24.00' r='1.71' fill='%238fd8f6' opacity='0.28'/><circle cx='12.00' cy='0.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='12.00' cy='24.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='18.00' cy='0.00' r='1.55' fill='%238fd8f6' opacity='0.25'/><circle cx='18.00' cy='24.00' r='1.55' fill='%238fd8f6' opacity='0.25'/><circle cx='3.00' cy='6.00' r='1.90' fill='%238fd8f6' opacity='0.31'/><circle cx='9.00' cy='6.00' r='1.83' fill='%238fd8f6' opacity='0.30'/><circle cx='15.00' cy='6.00' r='1.20' fill='%238fd8f6' opacity='0.19'/><circle cx='21.00' cy='6.00' r='1.56' fill='%238fd8f6' opacity='0.25'/><circle cx='0.00' cy='12.00' r='1.58' fill='%238fd8f6' opacity='0.25'/><circle cx='24.00' cy='12.00' r='1.58' fill='%238fd8f6' opacity='0.25'/><circle cx='6.00' cy='12.00' r='1.17' fill='%238fd8f6' opacity='0.18'/><circle cx='12.00' cy='12.00' r='1.81' fill='%238fd8f6' opacity='0.30'/><circle cx='18.00' cy='12.00' r='1.91' fill='%238fd8f6' opacity='0.31'/><circle cx='3.00' cy='18.00' r='1.52' fill='%238fd8f6' opacity='0.24'/><circle cx='9.00' cy='18.00' r='1.94' fill='%238fd8f6' opacity='0.32'/><circle cx='15.00' cy='18.00' r='1.73' fill='%238fd8f6' opacity='0.28'/><circle cx='21.00' cy='18.00' r='1.03' fill='%238fd8f6' opacity='0.16'/></svg>");
  --drip:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='78' viewBox='0 0 240 78'><defs><linearGradient id='d' x1='0' y1='0' x2='.22' y2='1'><stop offset='0' stop-color='%23fffdfa'/><stop offset='.55' stop-color='%23f2efeb'/><stop offset='1' stop-color='%23c9c4bd'/></linearGradient></defs><g fill='url(%23d)'><path d='M0 0 L240 0 L240 16 C192 13 144 18 96 15 C48 13 19 17 0 16 Z'/><path d='M4.0 15.0 C4.0 17.7 8.2 17.7 8.2 20.4 C8.2 24.3 11.7 24.3 11.7 28.2 C11.7 33.6 11.8 33.6 11.8 39.0 C11.8 43.6 12.5 43.6 12.5 48.3 C12.5 51.0 13.8 51.0 13.8 53.7 L16.1 53.7 C16.1 51.0 17.5 51.0 17.5 48.3 C17.5 43.6 18.1 43.6 18.1 39.0 C18.1 33.6 18.3 33.6 18.3 28.2 C18.3 24.3 21.8 24.3 21.8 20.4 C21.8 17.7 26.0 17.7 26.0 15.0 Z'/><path d='M43.1 15.0 C43.1 16.9 48.5 16.9 48.5 18.9 C48.5 21.6 53.1 21.6 53.1 24.4 C53.1 28.3 54.3 28.3 54.3 32.1 C54.3 35.4 54.9 35.4 54.9 38.8 C54.9 40.7 56.3 40.7 56.3 42.6 L58.5 42.6 C58.5 40.7 59.8 40.7 59.8 38.8 C59.8 35.4 60.5 35.4 60.5 32.1 C60.5 28.3 61.7 28.3 61.7 24.4 C61.7 21.6 66.3 21.6 66.3 18.9 C66.3 16.9 71.7 16.9 71.7 15.0 Z'/><path d='M89.1 15.0 C89.1 15.9 94.2 15.9 94.2 16.8 C94.2 18.1 98.6 18.1 98.6 19.5 C98.6 21.3 99.6 21.3 99.6 23.1 C99.6 24.7 100.2 24.7 100.2 26.3 C100.2 26.9 97.6 26.9 97.6 27.4 C97.6 27.8 99.0 27.8 99.0 28.1 L106.2 28.1 C106.2 27.8 107.6 27.8 107.6 27.4 C107.6 26.9 105.0 26.9 105.0 26.3 C105.0 24.7 105.6 24.7 105.6 23.1 C105.6 21.3 106.7 21.3 106.7 19.5 C106.7 18.1 111.0 18.1 111.0 16.8 C111.0 15.9 116.1 15.9 116.1 15.0 Z'/><path d='M138.1 15.0 C138.1 16.4 142.8 16.4 142.8 17.8 C142.8 19.8 146.7 19.8 146.7 21.7 C146.7 24.5 148.3 24.5 148.3 27.3 C148.3 29.7 148.8 29.7 148.8 32.1 C148.8 33.4 149.7 33.4 149.7 34.8 L151.2 34.8 C151.2 33.4 152.1 33.4 152.1 32.1 C152.1 29.7 152.5 29.7 152.5 27.3 C152.5 24.5 154.1 24.5 154.1 21.7 C154.1 19.8 158.1 19.8 158.1 17.8 C158.1 16.4 162.8 16.4 162.8 15.0 Z'/><path d='M170.6 15.0 C170.6 16.8 173.8 16.8 173.8 18.5 C173.8 21.1 176.4 21.1 176.4 23.6 C176.4 27.1 176.3 27.1 176.3 30.6 C176.3 33.7 176.8 33.7 176.8 36.7 C176.8 37.8 174.6 37.8 174.6 39.0 C174.6 39.6 175.8 39.6 175.8 40.2 L182.0 40.2 C182.0 39.6 183.3 39.6 183.3 39.0 C183.3 37.8 181.0 37.8 181.0 36.7 C181.0 33.7 181.5 33.7 181.5 30.6 C181.5 27.1 181.4 27.1 181.4 23.6 C181.4 21.1 184.1 21.1 184.1 18.5 C184.1 16.8 187.2 16.8 187.2 15.0 Z'/><path d='M194.6 15.0 C194.6 17.2 198.3 17.2 198.3 19.4 C198.3 22.5 201.4 22.5 201.4 25.7 C201.4 30.1 201.3 30.1 201.3 34.5 C201.3 38.2 202.0 38.2 202.0 42.0 C202.0 44.2 203.3 44.2 203.3 46.4 L205.5 46.4 C205.5 44.2 206.8 44.2 206.8 42.0 C206.8 38.2 207.4 38.2 207.4 34.5 C207.4 30.1 207.3 30.1 207.3 25.7 C207.3 22.5 210.5 22.5 210.5 19.4 C210.5 17.2 214.2 17.2 214.2 15.0 Z'/><path d='M230.4 15.0 C230.4 16.0 236.1 16.0 236.1 16.9 C236.1 18.3 240.8 18.3 240.8 19.6 C240.8 21.6 241.9 21.6 241.9 23.5 C241.9 25.1 242.6 25.1 242.6 26.7 C242.6 27.4 239.7 27.4 239.7 28.0 C239.7 28.3 241.3 28.3 241.3 28.7 L249.2 28.7 C249.2 28.3 250.8 28.3 250.8 28.0 C250.8 27.4 247.9 27.4 247.9 26.7 C247.9 25.1 248.5 25.1 248.5 23.5 C248.5 21.6 249.7 21.6 249.7 19.6 C249.7 18.3 254.4 18.3 254.4 16.9 C254.4 16.0 260.1 16.0 260.1 15.0 Z'/><ellipse cx='15' cy='63' rx='2.0' ry='2.6'/></g><g fill='%23ffffff'><ellipse cx='12.1' cy='30' rx='1.1' ry='6.6' opacity='0.5'/><ellipse cx='53.7' cy='26' rx='1.4' ry='4.7' opacity='0.5'/><ellipse cx='99.1' cy='20' rx='1.4' ry='2.2' opacity='0.5'/><ellipse cx='147.2' cy='23' rx='1.2' ry='3.4' opacity='0.5'/><ellipse cx='176.8' cy='25' rx='0.8' ry='4.3' opacity='0.5'/><ellipse cx='201.8' cy='28' rx='1.0' ry='5.3' opacity='0.5'/><ellipse cx='241.4' cy='20' rx='1.5' ry='2.3' opacity='0.5'/></g></svg>");
  --stache:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='240' viewBox='0 0 560 240'><path d='M170 88 L179 92 L179 97 L191 98 L200 102 L212 118 L210 122 L218 120 L231 130 L241 129 L246 134 L253 133 L267 138 L273 134 L277 137 L296 142 L302 141 L310 138 L321 134 L327 138 L333 144 L342 141 L350 136 L368 129 L371 126 L378 132 L391 128 L397 120 L406 115 L419 109 L420 109 L423 108 L433 102 L437 92 L449 88 L445 136 L436 149 L429 149 L425 156 L417 168 L418 175 L408 173 L404 185 L384 186 L378 191 L378 191 L362 197 L356 205 L345 207 L332 207 L323 205 L323 204 L305 209 L305 211 L294 207 L286 205 L269 203 L270 196 L256 202 L251 197 L236 192 L225 184 L224 181 L212 181 L210 170 L200 165 L187 157 L180 148 L173 145 L174 133 Z' fill='%238fd8f6' opacity='0.055'/></svg>");
}
#milk-mustache-database::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--stache);background-size:420px auto;background-repeat:repeat;opacity:.85;
}
#milk-mustache-database::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.11;mix-blend-mode:overlay;
}
#milk-mustache-database > header,
#milk-mustache-database > main,
#milk-mustache-database .mm-smiley-band{position:relative;z-index:1}

#milk-mustache-database .thumb,
#milk-mustache-database .hero,
#milk-mustache-database .assetimg{position:relative}
#milk-mustache-database .thumb::before,
#milk-mustache-database .hero::before,
#milk-mustache-database .assetimg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--halftone);opacity:.5;
}
#milk-mustache-database .thumb img,
#milk-mustache-database .hero img,
#milk-mustache-database .assetimg img,
#milk-mustache-database .hero.placeholder{position:relative;z-index:1}

#milk-mustache-database .year-heading,
#milk-mustache-database .category-heading{position:relative;overflow:visible}
#milk-mustache-database .year-heading::after,
#milk-mustache-database .category-heading::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-60px;height:78px;
  background-image:var(--drip);background-size:240px 78px;background-repeat:repeat-x;
  opacity:.92;pointer-events:none;z-index:2;
}
#milk-mustache-database .year-heading{margin-bottom:52px !important}
#milk-mustache-database #home.campaign-intro{position:relative;overflow:visible}
#milk-mustache-database #home.campaign-intro::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-59px;height:78px;
  background-image:var(--drip);background-size:240px 78px;background-repeat:repeat-x;
  opacity:.55;pointer-events:none;z-index:2;
}
#milk-mustache-database .detailtitle > h2,
#milk-mustache-database .year-heading h2{
  color:var(--milk) !important;-webkit-text-fill-color:var(--milk) !important;
  text-shadow:0 2px 22px rgba(143,216,246,.14);
}
#milk-mustache-database .brand h1.mm-logo{filter:drop-shadow(0 3px 16px rgba(143,216,246,.24))}
#milk-mustache-database .thumb img,
#milk-mustache-database .assetimg img{box-shadow:0 6px 22px rgba(0,0,0,.55)}

#milk-mustache-database .companion-record.visual-record-note{background:#fff4e6!important;border:2px solid #d8a24a!important;color:#3a2a10!important}#milk-mustache-database .companion-record.visual-record-note *{color:#3a2a10!important}#milk-mustache-database .companion-record.detailtitle>h2{color:#ffd9a0!important;-webkit-text-fill-color:#ffd9a0!important}#milk-mustache-database #companion.card.badge{background:rgba(216,162,74,.30)!important;border-color:rgba(255,217,160,.62)!important}

/* v258. Karat Medium enforced across the entire site.

   Three problems found:

   1.mm-trade-out (the trade-list textarea added in v255) was set to
      ui-monospace/Menlo/Consolas. That was my choice for a plain-text output box
      and it was wrong - it is the only element on the site not in the brand face.

   2. FORM CONTROLS AND <code> DO NOT INHERIT font-family. Browsers apply their own
      UI font to input, button, select and textarea, and a monospace default to
      code and pre, regardless of what the page font is. Nothing in the stylesheet
      told them otherwise, so 2,976 inputs, 389 code elements, 6 buttons and the
      textarea were all rendering in something other than Karat.

   3. NO @font-face RULE EXISTS. The stack is declared as
      "KaratMedium Regular","KaratMedium",Arial,sans-serif but the font is never
      loaded, so it only appears for visitors who happen to have it installed
      locally. Everyone else has been seeing Arial. The scaffold is at the bottom
      of this block, commented, ready for the font files. */

/* --- every element, including the ones that opt out by default --- */
#milk-mustache-database,
#milk-mustache-database *,
#milk-mustache-database input,
#milk-mustache-database button,
#milk-mustache-database select,
#milk-mustache-database textarea,
#milk-mustache-database code,
#milk-mustache-database pre,
#milk-mustache-database table,
#milk-mustache-database th,
#milk-mustache-database td,
#milk-mustache-database h1,
#milk-mustache-database h2,
#milk-mustache-database h3,
#milk-mustache-database h4,
#milk-mustache-database .mm-trade-out,
#milk-mustache-database .mm-news-item,
#milk-mustache-database .badge,
#milk-mustache-database .chip,
#milk-mustache-database .eyebrow,
.mm-smiley-band,
.mm-smiley-band *{
  font-family:"KaratMedium Regular","KaratMedium","Karat Medium",Karat,Arial,sans-serif !important;
}

/* code keeps its tabular feel without leaving the family */
#milk-mustache-database code,
#milk-mustache-database .mm-trade-out{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
#milk-mustache-database .mm-trade-out{line-height:1.55}


@font-face{
  font-family:"KaratMedium";
  src:url("KaratMedium.woff2") format("woff2"),
      url("KaratMedium.woff") format("woff");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}


/* v262. The design work from v253 and v256 was applied and winning the cascade,
   but pitched between 4% and 11% on a near-black page. Measured against the
   background, every layer sat 22-64 points out of 765 - below the threshold
   where a screen shows anything. It was invisible, not subtle.

   Everything below is the SAME design, turned up to where it reads. */

#milk-mustache-database{
  --surface-1:#0d1721;
  --surface-2:#1a2a37;   /* was #0f1920 - the gradient had 23 points of range */
  --surface-3:#22323f;
}

/* ---- BACKGROUND: washes you can actually see -------------------------- */
html,body{background:#050a10 !important}
#milk-mustache-database{
  background:
    radial-gradient(1300px 680px at 50% -6%, rgba(143,216,246,.26), transparent 60%),
    radial-gradient(980px 560px at 8%  36%, rgba(143,216,246,.15), transparent 58%),
    radial-gradient(980px 560px at 92% 72%, rgba(143,216,246,.13), transparent 58%),
    linear-gradient(180deg,#0a141d 0%, #050a10 55%, #071019 100%) !important;
  background-attachment:fixed !important;
}

/* watermark and grain, raised from 5.5% and 11% */
#milk-mustache-database::before{opacity:1 !important}
#milk-mustache-database::after{opacity:.34 !important; mix-blend-mode:soft-light !important}

/* ---- SURFACES: a gradient with real range ----------------------------- */
#milk-mustache-database .panel,
#milk-mustache-database .campaign-intro,
#milk-mustache-database .campaign-history-standalone,
#milk-mustache-database .archive-intro,
#milk-mustache-database .archive-search-panel,
#milk-mustache-database .tablewrap,
#milk-mustache-database .detailtitle{
  background:linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 62%, #0a1119 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.13) inset,
             0 14px 40px rgba(0,0,0,.6),
             0 0 0 1px rgba(143,216,246,.10) !important;
}
#milk-mustache-database .panel.panel,
#milk-mustache-database .subpanel{
  background:linear-gradient(168deg,#1f303e,#131f2a) !important;
}

/* ---- CARDS: visible lift, visible glow -------------------------------- */
#milk-mustache-database .card{
  background:linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 70%, #0a1119 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px rgba(0,0,0,.55) !important;
}
#milk-mustache-database .card:hover,
#milk-mustache-database .card:focus-within{
  background:linear-gradient(168deg, var(--surface-3) 0%, #16242f 70%, #0d1520 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 22px 48px rgba(0,0,0,.66),
             0 0 0 2px rgba(143,216,246,.55),
             0 0 46px rgba(143,216,246,.32) !important;
}

/* ---- IMAGE FRAMES: the halftone should be legible --------------------- */
#milk-mustache-database .thumb,
#milk-mustache-database .hero,
#milk-mustache-database .assetimg{
  background:radial-gradient(130% 105% at 50% 0%, rgba(143,216,246,.30), rgba(6,12,18,.96)) !important;
}
#milk-mustache-database .thumb::before,
#milk-mustache-database .hero::before,
#milk-mustache-database .assetimg::before{opacity:1 !important}

/* ---- YEAR HEADINGS: a real chapter break ------------------------------ */
#milk-mustache-database .year-heading{
  background:linear-gradient(180deg, rgba(143,216,246,.30), rgba(143,216,246,.07)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 12px 32px rgba(0,0,0,.5) !important;
}

/* ---- MILK DRIPS: they were at 92% but the sheet was near-transparent -- */
#milk-mustache-database .year-heading::after,
#milk-mustache-database .category-heading::after{opacity:1 !important}
#milk-mustache-database #home.campaign-intro::after{opacity:.85 !important}

/* ---- EYEBROWS and accents --------------------------------------------- */
#milk-mustache-database .eyebrow{
  color:#a7e0f8 !important; -webkit-text-fill-color:#a7e0f8 !important; opacity:1 !important;
}
#milk-mustache-database .detailtitle > h2,
#milk-mustache-database .year-heading h2{
  text-shadow:0 2px 30px rgba(143,216,246,.34) !important;
}


/* v263. More milk in the design.

   Three new assets, all inline SVG:
     coronet  a milk-drop crown, 16 spikes on an ellipse merged by a gooey
              filter so they neck at the rim the way a real splash does
     rings    the mark a glass leaves, wobbled off-round so it reads as a stain
     foam     bubbles with specular dots, layered behind the halftone

   Plus a milk fill that rises inside a card when you hover it. */

#milk-mustache-database{
  --coronet:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'><defs><filter id='g' x='-20%' y='-25%' width='140%' height='150%'><feGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/><feColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -11'/></filter></defs><g filter='url(#g)' opacity='0.9'><ellipse cx='200' cy='168' rx='104' ry='34' fill='%23ffffff'/><path d='M296 150 C300 115 306 106 306 87' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='306' cy='87' r='11.2' fill='%23ffffff'/><path d='M289 163 C292 125 298 114 298 93' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='298' cy='93' r='10.9' fill='%23ffffff'/><path d='M268 174 C271 137 275 127 275 107' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='275' cy='107' r='10.3' fill='%23ffffff'/><path d='M237 181 C238 150 241 142 241 124' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='241' cy='124' r='9.2' fill='%23ffffff'/><path d='M200 184 C200 149 200 140 200 121' fill='none' stroke='%23ffffff' stroke-width='13' stroke-linecap='round'/><circle cx='200' cy='121' r='8.1' fill='%23ffffff'/><path d='M163 181 C162 143 159 133 159 112' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='159' cy='112' r='9.2' fill='%23ffffff'/><path d='M132 174 C129 137 125 127 125 107' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='125' cy='107' r='10.3' fill='%23ffffff'/><path d='M111 163 C108 132 102 123 102 106' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='102' cy='106' r='10.9' fill='%23ffffff'/><path d='M104 150 C100 115 94 106 94 87' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='94' cy='87' r='11.2' fill='%23ffffff'/><path d='M111 137 C108 99 102 88 102 67' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='102' cy='67' r='10.9' fill='%23ffffff'/><path d='M132 126 C129 89 125 79 125 59' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='125' cy='59' r='10.3' fill='%23ffffff'/><path d='M163 119 C162 87 159 79 159 62' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='159' cy='62' r='9.2' fill='%23ffffff'/><path d='M200 116 C200 81 200 72 200 53' fill='none' stroke='%23ffffff' stroke-width='13' stroke-linecap='round'/><circle cx='200' cy='53' r='8.1' fill='%23ffffff'/><path d='M237 119 C238 80 241 70 241 49' fill='none' stroke='%23ffffff' stroke-width='15' stroke-linecap='round'/><circle cx='241' cy='49' r='9.2' fill='%23ffffff'/><path d='M268 126 C271 89 275 79 275 59' fill='none' stroke='%23ffffff' stroke-width='17' stroke-linecap='round'/><circle cx='275' cy='59' r='10.3' fill='%23ffffff'/><path d='M289 137 C292 106 298 97 298 80' fill='none' stroke='%23ffffff' stroke-width='18' stroke-linecap='round'/><circle cx='298' cy='80' r='10.9' fill='%23ffffff'/></g></svg>");
  --rings:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'><path d='M227.4 110.0 L227.9 113.1 L225.4 116.1 L221.2 118.9 L218.1 121.6 L214.4 124.3 L210.7 127.0 L206.3 129.6 L199.6 131.5 L192.9 133.2 L186.4 135.0 L178.2 135.7 L170.7 136.7 L162.7 137.0 L155.5 138.1 L148.0 139.3 L140.0 139.7 L131.6 140.7 L123.1 140.6 L115.3 139.3 L107.6 138.2 L99.9 137.0 L92.3 135.7 L86.0 133.7 L79.4 131.8 L72.7 129.9 L67.9 127.3 L63.6 124.7 L60.9 121.8 L59.8 118.8 L60.4 115.7 L60.6 112.8 L60.7 110.0 L60.1 107.2 L60.5 104.3 L61.8 101.5 L62.3 98.4 L66.2 95.8 L70.6 93.3 L76.5 91.2 L80.7 88.6 L86.5 86.5 L93.1 84.7 L99.2 82.5 L106.1 80.5 L114.1 79.3 L122.6 78.5 L131.5 79.0 L140.0 79.2 L148.2 80.1 L155.9 81.1 L163.8 81.7 L171.8 82.3 L179.4 83.5 L186.2 85.1 L192.6 86.9 L197.2 89.4 L202.1 91.7 L207.3 93.8 L211.1 96.3 L215.4 98.8 L220.7 101.2 L225.0 103.9 L227.6 106.9 L227.9 110.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='3.2' opacity='0.5'/><path d='M217.1 110.0 L215.6 112.7 L213.7 115.3 L210.5 117.7 L207.5 120.1 L205.5 122.6 L203.8 125.3 L200.6 127.9 L196.6 130.4 L190.9 132.3 L185.0 134.3 L177.7 135.4 L170.3 136.3 L162.8 137.0 L155.3 137.7 L147.9 138.7 L140.0 139.0 L132.1 139.0 L124.3 138.5 L117.3 137.0 L110.6 135.6 L104.4 134.0 L98.6 132.3 L92.8 130.7 L87.0 129.1 L82.2 127.1 L75.8 125.4 L70.8 123.3 L67.4 120.8 L65.4 118.1 L63.4 115.5 L63.2 112.7 L60.8 110.0 L60.4 107.2 L60.8 104.3 L62.2 101.5 L63.4 98.6 L68.0 96.1 L72.8 93.8 L79.1 92.0 L85.9 90.5 L92.3 89.1 L98.2 87.5 L104.5 86.1 L111.0 84.8 L117.8 83.6 L124.9 82.6 L132.6 82.9 L140.0 83.0 L147.4 82.8 L154.7 83.3 L162.4 83.4 L170.1 83.8 L177.9 84.5 L186.0 85.2 L191.9 87.2 L197.7 89.2 L201.8 91.8 L205.9 94.1 L208.3 96.9 L211.2 99.4 L214.6 101.9 L216.0 104.6 L217.7 107.2 L218.4 110.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='1.4' opacity='0.3'/><path d='M364.5 205.0 L364.2 207.3 L363.5 209.5 L360.3 211.6 L358.1 213.7 L354.9 215.6 L351.4 217.4 L348.5 219.3 L344.0 220.9 L339.8 222.5 L334.2 223.4 L328.5 224.2 L322.8 224.8 L317.2 225.4 L311.3 225.5 L305.7 226.0 L300.0 226.7 L293.9 227.3 L287.7 227.2 L281.7 226.8 L275.5 226.3 L270.6 224.8 L264.9 223.9 L260.4 222.4 L255.8 220.9 L251.1 219.4 L246.6 217.8 L242.5 216.1 L241.0 213.8 L239.4 211.6 L239.3 209.3 L240.3 207.1 L240.7 205.0 L241.9 202.9 L242.3 200.9 L242.7 198.7 L243.3 196.5 L245.8 194.6 L249.0 192.7 L252.5 191.0 L256.9 189.5 L261.4 188.1 L265.4 186.4 L270.2 184.9 L275.5 183.7 L281.0 182.5 L287.2 181.9 L293.6 181.5 L300.0 181.9 L306.1 182.7 L312.1 183.1 L317.4 184.3 L323.2 184.9 L328.9 185.5 L333.8 186.8 L338.9 187.9 L342.6 189.7 L346.7 191.2 L349.8 193.0 L352.4 194.9 L355.7 196.7 L358.0 198.7 L361.4 200.6 L363.6 202.7 L364.9 205.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='2.6' opacity='0.4'/><path d='M356.8 205.0 L356.6 207.0 L355.7 209.0 L355.3 211.0 L351.9 212.7 L349.3 214.5 L346.1 216.1 L341.4 217.2 L338.2 218.7 L334.6 220.2 L330.5 221.4 L326.7 223.0 L322.3 224.4 L317.0 225.2 L311.5 225.9 L305.7 225.8 L300.0 225.7 L294.4 225.5 L288.7 225.4 L282.9 225.3 L277.4 224.6 L272.0 223.9 L267.5 222.5 L263.2 221.2 L260.5 219.2 L257.7 217.5 L254.8 215.9 L252.1 214.2 L249.8 212.5 L247.6 210.7 L245.1 208.9 L243.7 207.0 L243.2 205.0 L242.9 203.0 L244.8 201.0 L245.2 199.0 L246.7 197.1 L249.3 195.2 L251.0 193.2 L253.7 191.3 L258.0 189.9 L262.3 188.4 L267.2 187.3 L273.3 187.0 L278.5 186.4 L284.1 186.1 L289.2 185.5 L294.5 184.9 L300.0 185.0 L305.4 185.1 L310.8 185.4 L316.2 185.8 L320.8 186.9 L325.6 187.7 L330.7 188.4 L336.1 189.2 L340.7 190.4 L345.5 191.6 L349.9 193.0 L352.5 194.9 L355.1 196.8 L355.7 198.9 L356.7 200.9 L357.4 203.0 L356.3 205.0 Z' fill='none' stroke='%23e9f4fa' stroke-width='1.2' opacity='0.24'/></svg>");
  --foam:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><circle cx='54.7' cy='66.7' r='7.1' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='52.6' cy='64.4' r='1.4' fill='%23ffffff' opacity='0.3'/><circle cx='60.9' cy='69.8' r='2.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.29'/><circle cx='74.5' cy='92.8' r='2.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.24'/><circle cx='14.2' cy='94.7' r='5.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.17'/><circle cx='12.4' cy='92.9' r='1.1' fill='%23ffffff' opacity='0.3'/><circle cx='114.0' cy='112.1' r='5.5' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.32'/><circle cx='112.4' cy='110.3' r='1.1' fill='%23ffffff' opacity='0.3'/><circle cx='21.6' cy='5.7' r='4.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='20.2' cy='4.2' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='25.3' cy='31.1' r='1.8' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='53.3' cy='98.4' r='4.7' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='51.9' cy='96.9' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='60.0' cy='78.2' r='4.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='58.7' cy='76.8' r='0.9' fill='%23ffffff' opacity='0.3'/><circle cx='115.7' cy='115.5' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.34'/><circle cx='113.8' cy='113.4' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='39.3' cy='29.7' r='3.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='89.8' cy='48.8' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.26'/><circle cx='87.8' cy='46.7' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='111.3' cy='98.9' r='1.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.21'/><circle cx='106.0' cy='56.6' r='7.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.26'/><circle cx='103.7' cy='54.3' r='1.5' fill='%23ffffff' opacity='0.3'/><circle cx='12.2' cy='74.5' r='6.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='10.3' cy='72.5' r='1.2' fill='%23ffffff' opacity='0.3'/><circle cx='13.8' cy='41.2' r='7.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.36'/><circle cx='11.6' cy='38.9' r='1.5' fill='%23ffffff' opacity='0.3'/><circle cx='17.2' cy='31.6' r='2.2' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='93.3' cy='23.9' r='4.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.28'/><circle cx='91.8' cy='22.3' r='1.0' fill='%23ffffff' opacity='0.3'/><circle cx='25.4' cy='86.0' r='2.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='17.0' cy='51.1' r='2.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='112.7' cy='94.0' r='3.4' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.39'/><circle cx='27.6' cy='48.2' r='6.6' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.33'/><circle cx='25.6' cy='46.0' r='1.3' fill='%23ffffff' opacity='0.3'/><circle cx='15.2' cy='114.8' r='2.9' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.23'/><circle cx='90.5' cy='40.8' r='3.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.18'/><circle cx='14.1' cy='69.3' r='3.0' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.32'/><circle cx='45.6' cy='54.8' r='7.3' fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.29'/><circle cx='43.5' cy='52.4' r='1.5' fill='%23ffffff' opacity='0.3'/></svg>");
}

/* ---- GLASS RINGS scattered across the page ---------------------------- */
#milk-mustache-database > main::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--rings);
  background-size:760px auto;
  background-repeat:repeat;
  opacity:.30;
}

/* ---- FOAM inside every image frame, behind the halftone --------------- */
#milk-mustache-database .thumb::after,
#milk-mustache-database .hero::after,
#milk-mustache-database .assetimg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--foam);
  background-size:150px 150px;
  opacity:.5;
}

/* ---- CORONET marking every section heading ---------------------------- */
#milk-mustache-database .year-heading::before,
#milk-mustache-database .category-heading::before{
  content:"";position:absolute;right:18px;top:-30px;
  width:150px;height:86px;
  background-image:var(--coronet);
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;
  opacity:.42;pointer-events:none;z-index:1;
}
#milk-mustache-database #home.campaign-intro{position:relative}

/* ---- MILK RISES INSIDE A CARD ON HOVER -------------------------------- */
#milk-mustache-database .card{position:relative;isolation:isolate}
#milk-mustache-database .card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,
      rgba(244,250,253,.00) 0%,
      rgba(244,250,253,.16) 34%,
      rgba(232,243,250,.30) 100%);
  border-top:2px solid rgba(244,250,253,.78);
  transition:height.34s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;z-index:0;
}
#milk-mustache-database .card:hover::after,
#milk-mustache-database .card:focus-within::after{height:100%}
#milk-mustache-database .card > *{position:relative;z-index:1}

/* ---- A CORONET ON THE WELCOME PANEL ----------------------------------- */
#milk-mustache-database #home.campaign-intro::before{
  content:"";position:absolute;right:22px;top:-38px;
  width:210px;height:118px;
  background-image:var(--coronet);
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;
  opacity:.5;pointer-events:none;z-index:3;
}

@media (prefers-reduced-motion:reduce){
  #milk-mustache-database .card::after{transition:none}
}

/* v264. The Filter by printed tagline panel is removed. The script that built it also drives variant families and checklist export, so the script stays and only the insertion is cut. This rule catches any other path that might append it. */#milk-mustache-database .mm-era-panel,#milk-mustache-database #mm-era-note{display:none!important}

/* v266. The glass rings and the foam are removed. Both were thin outline circles
   at 30-50% opacity on a dark page, which is exactly what they looked like:
   scattered circles. They were not adding milk, they were adding noise.

   Replaced with a POUR - 36 overlapping blobs merged by a gooey filter with
   turbulence displacement, so the stream necks, pulses and widens as it falls
   before spreading into a pool. Opaque white on a gradient, with a specular
   core and seven droplets torn off the sides. It is heavy and it reads. */

/* --- OUT --- */
#milk-mustache-database > main::before{content:none !important;display:none !important}
#milk-mustache-database .thumb::after,
#milk-mustache-database .hero::after,
#milk-mustache-database .assetimg::after{content:none !important;display:none !important}

/* --- IN --- */
#milk-mustache-database{--pour:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='460' viewBox='0 0 340 460'><defs><filter id='g' x='-30%' y='-10%' width='160%' height='125%'><feGaussianBlur in='SourceGraphic' stdDeviation='11' result='b'/><feColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -12' result='g'/><feTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='g' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/></filter><linearGradient id='m' x1='0' y1='0' x2='.3' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f2f9fd'/><stop offset='1' stop-color='%23cfe2ee'/></linearGradient></defs><g filter='url(%23g)' fill='url(%23m)'><circle cx='170' cy='0' r='14'/><circle cx='171' cy='15' r='14'/><circle cx='172' cy='29' r='14'/><circle cx='174' cy='44' r='14'/><circle cx='175' cy='58' r='14'/><circle cx='176' cy='73' r='14'/><circle cx='177' cy='87' r='13'/><circle cx='178' cy='102' r='13'/><circle cx='179' cy='116' r='12'/><circle cx='179' cy='131' r='12'/><circle cx='180' cy='145' r='11'/><circle cx='181' cy='160' r='11'/><circle cx='181' cy='174' r='11'/><circle cx='181' cy='189' r='12'/><circle cx='182' cy='203' r='12'/><circle cx='182' cy='218' r='14'/><circle cx='182' cy='232' r='15'/><circle cx='182' cy='247' r='17'/><circle cx='182' cy='261' r='19'/><circle cx='181' cy='276' r='21'/><circle cx='181' cy='290' r='23'/><circle cx='180' cy='305' r='25'/><circle cx='180' cy='319' r='27'/><circle cx='179' cy='334' r='28'/><circle cx='178' cy='348' r='29'/><circle cx='177' cy='363' r='30'/><circle cx='176' cy='377' r='30'/><circle cx='102' cy='396' r='26'/><circle cx='119' cy='393' r='37'/><circle cx='136' cy='390' r='47'/><circle cx='153' cy='388' r='54'/><circle cx='170' cy='388' r='56'/><circle cx='187' cy='388' r='54'/><circle cx='204' cy='390' r='47'/><circle cx='221' cy='393' r='37'/><circle cx='238' cy='396' r='26'/><circle cx='239' cy='304' r='5'/><circle cx='214' cy='228' r='7'/><circle cx='217' cy='259' r='6'/><circle cx='139' cy='197' r='11'/><circle cx='119' cy='207' r='9'/><circle cx='134' cy='176' r='4'/><circle cx='114' cy='178' r='11'/></g><g filter='url(%23g)' fill='%23ffffff' opacity='.5'><circle cx='165' cy='0' r='4'/><circle cx='169' cy='44' r='4'/><circle cx='172' cy='87' r='4'/><circle cx='175' cy='131' r='4'/><circle cx='177' cy='174' r='3'/><circle cx='177' cy='218' r='4'/><circle cx='175' cy='261' r='6'/><circle cx='172' cy='305' r='8'/><circle cx='168' cy='348' r='9'/><circle cx='93' cy='396' r='8'/><circle cx='135' cy='388' r='16'/><circle cx='188' cy='390' r='14'/></g></svg>")}

/* a pour down the left edge of the page, fixed so it stays as you scroll */
#milk-mustache-database > main::after{
  content:"";position:fixed;left:-40px;top:0;
  width:300px;height:100vh;z-index:0;pointer-events:none;
  background-image:var(--pour);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left top;
  opacity:.20;
}
/* and a second, mirrored, on the right - smaller and fainter for depth */
#milk-mustache-database > header::after{
  content:"";position:fixed;right:-70px;top:0;
  width:230px;height:88vh;z-index:0;pointer-events:none;
  background-image:var(--pour);
  background-size:contain;background-repeat:no-repeat;background-position:right top;
  transform:scaleX(-1);opacity:.13;
}
@media (max-width:1100px){
  #milk-mustache-database > main::after,
  #milk-mustache-database > header::after{display:none}
}

/* the coronet was too small and too faint to read - make it count */
#milk-mustache-database .year-heading::before,
#milk-mustache-database .category-heading::before{
  width:210px !important;height:120px !important;
  top:-44px !important;right:22px !important;
  opacity:.75 !important;
}
#milk-mustache-database #home.campaign-intro::before{
  width:280px !important;height:158px !important;
  top:-52px !important;opacity:.8 !important;
}


/* v267. The design reaches the header.

   Why it did not: the header is position:fixed with background:#000!important and
   overflow:hidden. It is a solid black box painted over the top of the page, so
   the mustache watermark, the paper grain and both pours - all of which live on
   ancestors or siblings - were rendering underneath it and never seen. The whole
   top strip of the site was bare while everything below it was decorated.

   The header now carries the same treatment as the page, applied to itself. */

#milk-mustache-database > header{
  background:
    radial-gradient(900px 420px at 50% -40%, rgba(143,216,246,.30), transparent 62%),
    linear-gradient(180deg,#0d1a26 0%, #081119 62%, #050c13 100%) !important;
  overflow:visible !important;
  isolation:isolate;
}

/* mustache watermark, clipped to the header */
#milk-mustache-database > header::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--stache);
  background-size:420px auto;background-repeat:repeat;
  opacity:.85;
}

/* the header keeps its own pour, now visible against a non-black ground */
#milk-mustache-database > header::after{
  content:"";position:absolute;right:-60px;top:-30px;
  width:250px;height:230px;z-index:0;pointer-events:none;
  background-image:var(--pour);
  background-size:contain;background-repeat:no-repeat;background-position:right top;
  transform:scaleX(-1);opacity:.30;
}

/* a second pour on the left of the header, mirroring the page */
#milk-mustache-database > header.top::before{
  content:"";position:absolute;left:-90px;top:-34px;
  width:230px;height:240px;z-index:-1;pointer-events:none;
  background-image:var(--pour);
  background-size:contain;background-repeat:no-repeat;background-position:left top;
  opacity:.26;
}
#milk-mustache-database > header.top{position:relative}

/* paper grain over the header, matching the page */
#milk-mustache-database > header.brand::after{
  content:"";position:fixed;left:0;right:0;top:0;height:var(--mm-fixed-header-height,184px);
  z-index:0;pointer-events:none;
  background-image:var(--grain);
  opacity:.30;mix-blend-mode:soft-light;
}

/* milk drips off the bottom edge of the header, the same tile as the headings */
#milk-mustache-database > header{border-bottom:2px solid rgba(143,216,246,.70) !important}
#milk-mustache-database > header.nav::after{
  content:"";position:absolute;left:-50vw;right:-50vw;bottom:-72px;height:72px;
  background-image:var(--drip);
  background-size:240px 78px;background-repeat:repeat-x;
  opacity:.9;pointer-events:none;z-index:6;
}
#milk-mustache-database > header.nav{position:relative}

/* the brand and nav plates were opaque black to hide the old art - they can
   now be translucent so the decoration shows through behind them */
#milk-mustache-database .brand{
  background:rgba(6,13,20,.55) !important;
  backdrop-filter:blur(2px);
}
#milk-mustache-database .nav{
  background:rgba(6,13,20,.62) !important;
  backdrop-filter:blur(2px);
}
#milk-mustache-database > header.top{z-index:8}


/* v272. The header drips were landing on the smiley faces.

   The nav drip layer was set to bottom:-72px with height:72px at z-index 6, so it
   reached 72-144px BELOW the fixed header. Main begins immediately under the
   header and the welcome panel with the smiley art is the first thing in it, so
   the drips hung straight down across the faces.

   Two fixes, because either alone is fragile:
     1. the header drips are pulled back so they hang inside the header's own
        bottom edge rather than past it
     2. the smiley art is lifted above them, so even if a drip overshoots it
        passes behind the faces rather than over them */

/* 1 - drips stay within the header */
#milk-mustache-database > header.nav::after{
  bottom:-30px !important;
  height:44px !important;
  z-index:2 !important;
  opacity:.75 !important;
}

/* 2 - the smiley band sits above any decoration that reaches it */
#milk-mustache-database #home.mm-welcome-art{
  position:relative !important;
  z-index:12 !important;
  isolation:isolate;
}
#milk-mustache-database #home.mm-welcome-art.mm-smileys{
  position:relative;
  z-index:2;
}

/* 3 - the welcome panel's own drips belong at its FOOT, below the text, not
       anywhere near the art at its head */
#milk-mustache-database #home.campaign-intro::after{
  z-index:1 !important;
  opacity:.7 !important;
}


/* v275. The title and menu plates were still black.

   They LOOKED translucent in the CSS - rgba(6,13,20,.55) and.62 - but 6,13,20
   is near-black, so at those opacities they rendered #1b2c38 and #172833 over a
   #345364 header. Dark boxes sitting on a lit background. Turning the opacity
   down was never going to help: the colour itself was the problem.

   Both plates now carry the palette blue instead of black, so they read as part
   of the header rather than as panels laid on top of it. */

#milk-mustache-database .brand{
  background:linear-gradient(180deg, rgba(143,216,246,.17), rgba(143,216,246,.08)) !important;
  border:2px solid rgba(143,216,246,.34) !important;
  backdrop-filter:blur(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset !important;
}
#milk-mustache-database .nav{
  background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important;
  border:2px solid rgba(143,216,246,.44) !important;
  backdrop-filter:blur(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset !important;
}

/* the buttons need to separate from a lighter plate now */
#milk-mustache-database .nav a{
  background:linear-gradient(180deg, rgba(6,20,30,.50), rgba(6,20,30,.34)) !important;
  border:2px solid rgba(143,216,246,.62) !important;
}
#milk-mustache-database .nav a:hover,
#milk-mustache-database .nav a:focus-visible{
  background:linear-gradient(180deg, rgba(143,216,246,.34), rgba(143,216,246,.20)) !important;
  border-color:#8fd8f6 !important;
}

/* the header itself lifts a little so the plates have something to sit on */
#milk-mustache-database > header{
  background:
    radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%),
    linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important;
}


/* v276. Nothing renders over the smiley faces. Ever.

   In v272 I moved the header drips off them but left the coronet, which sits
   top:-52px right:22px at 280x158px on the welcome panel - and the smiley art is
   that panel's FIRST child, so the coronet was landing on the faces. Fixing one
   layer at a time is how this keeps recurring, so this rule is categorical
   rather than another individual adjustment. */

/* 1 - the coronet comes off the welcome panel entirely. There is no position
       for it there that does not cross the art. */
#milk-mustache-database #home.campaign-intro::before{
  content:none !important;
  display:none !important;
}

/* 2 - the panel's drips stay at its foot, well below the art */
#milk-mustache-database #home.campaign-intro::after{
  z-index:0 !important;
}

/* 3 - CATEGORICAL GUARD: the smiley band outranks every decorative layer on the
       site. The art is z-index 40; nothing decorative goes above 12. */
#milk-mustache-database #home.mm-welcome-art{
  position:relative !important;
  z-index:40 !important;
  isolation:isolate !important;
}
#milk-mustache-database #home.mm-welcome-art *{position:relative;z-index:1}

/* 4 - and no pseudo-element may paint inside the art's own box */
#milk-mustache-database #home.mm-welcome-art::before,
#milk-mustache-database #home.mm-welcome-art::after{
  content:none !important;
  display:none !important;
}


/* v277. The black behind the title and menu was.top - the wrapper that holds
   both of them. In v275 I recoloured.brand and.nav but never touched the box
   they sit inside, which was background:#000!important. So two blue plates were
   sitting on a black slab, and the slab is what you could see.

   There was also a mobile rule at rgba(0,0,0,.90) that would have brought the
   black straight back below 760px. */

#milk-mustache-database .top{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
@media (max-width:760px){
  #milk-mustache-database .top,
  #milk-mustache-database .nav{
    background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important;
  }
  #milk-mustache-database .top{background:transparent !important}
}

/* the skip links were unstyled, so they inherited whatever was behind them */
#milk-mustache-database .skip,
#milk-mustache-database a[href="#home"].skip,
#milk-mustache-database .skiplink,
#milk-mustache-database .visually-hidden-focusable{
  background:rgba(143,216,246,.22) !important;
  color:#ffffff !important;
  border:2px solid rgba(143,216,246,.6) !important;
  border-radius:8px;
}

/* and the header must not fall back to black at any width */
#milk-mustache-database > header{
  background:
    radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%),
    linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important;
}
@media (max-width:760px){
  #milk-mustache-database > header{
    background:
      radial-gradient(700px 340px at 50% -30%, rgba(143,216,246,.30), transparent 62%),
      linear-gradient(180deg,#12222f 0%, #0a1622 60%, #08121c 100%) !important;
  }
}


/* v278. The full-width drip strip under the menu is removed.

   It was #milk-mustache-database > header.nav::after, stretched left:-50vw to
   right:-50vw so it ran the whole width of the page beneath the nav. Two rules
   had accumulated on it - the original at bottom:-72px and my v272 pull-back at
   -30px - so it is switched off at the source rather than repositioned again.

   Drips under the year and category headings are untouched. Those sit on an
   actual surface and read correctly; this one hung off nothing. */

#milk-mustache-database > header.nav::after{
  content:none !important;
  display:none !important;
  background-image:none !important;
  height:0 !important;
}


/* v279. No solid black backgrounds anywhere on the site.

   Why the earlier passes missed these: every remaining black rule is written as
   #milk-mustache-database #home.foo - TWO ids - while every correction I wrote
   used #milk-mustache-database .foo, one id. Specificity (2,1,0) beats (1,1,0),
   so my gradients never applied to the home-page panels at all. The welcome
   panel holding the smiley faces was still #000 the whole time.

   Everything below matches or exceeds that specificity. */

#milk-mustache-database #home.campaign-intro,
#milk-mustache-database #home.campaign-history,
#milk-mustache-database #home.campaign-copy,
#milk-mustache-database #home.campaign-history-standalone,
#milk-mustache-database #home.archive-intro,
#milk-mustache-database #home.archive-search-panel,
#milk-mustache-database #home.year-index,
#milk-mustache-database #home.stats,
#milk-mustache-database #home.panel{
  background:linear-gradient(168deg,#1a2a37 0%, #0d1721 62%, #0a1119 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.13) inset,
             0 14px 40px rgba(0,0,0,.55),
             0 0 0 1px rgba(143,216,246,.10) !important;
}

/* the header, at every width */
#milk-mustache-database > header,
#milk-mustache-database#milk-mustache-database > header{
  background:
    radial-gradient(1000px 460px at 50% -34%, rgba(143,216,246,.34), transparent 62%),
    linear-gradient(180deg,#12222f 0%, #0a1622 58%, #08121c 100%) !important;
}
@media (max-width:760px){
  #milk-mustache-database#milk-mustache-database .nav,
  #milk-mustache-database#milk-mustache-database .top{
    background:linear-gradient(180deg, rgba(143,216,246,.20), rgba(143,216,246,.10)) !important;
  }
  #milk-mustache-database#milk-mustache-database .top{background:transparent !important}
}

/* the page itself: a graduated ground rather than flat black */
html,body{
  background:linear-gradient(180deg,#0a141d 0%, #070f17 45%, #050b12 100%) !important;
  background-attachment:fixed !important;
}


/* v280. The glass of milk, installed.

   It had only ever existed as a preview in chat - it was never in the file.
   It now replaces the coronet on section headings, which is the one decorative
   slot that was working, and appears at the head of the four index views.

   It never goes near the smiley band: the z-index 40 guard from v276 stands and
   nothing here exceeds 3. */

#milk-mustache-database{--glass:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400'> <defs> <linearGradient id='gm' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%23b4aca0'/><stop offset='.07' stop-color='%23e8e2d8'/> <stop offset='.25' stop-color='%23ffffff'/><stop offset='.45' stop-color='%23fcf9f3'/> <stop offset='.73' stop-color='%23e8e2d6'/><stop offset='.91' stop-color='%23c8c0b3'/> <stop offset='1' stop-color='%23a29a8d'/></linearGradient> <linearGradient id='sf' x1='0' y1='0' x2='.7' y2='1'> <stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f8f4ed'/> <stop offset='1' stop-color='%23d8d1c4'/></linearGradient> <linearGradient id='gw' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%23ffffff' stop-opacity='.36'/> <stop offset='.10' stop-color='%238fd8f6' stop-opacity='.07'/> <stop offset='.5' stop-color='%238fd8f6' stop-opacity='.03'/> <stop offset='.90' stop-color='%238fd8f6' stop-opacity='.09'/> <stop offset='1' stop-color='%23ffffff' stop-opacity='.40'/></linearGradient> <radialGradient id='cw' cx='.5' cy='.5' r='.5'> <stop offset='0' stop-color='%23fff6e4' stop-opacity='.5'/><stop offset='1' stop-color='%23fff6e4' stop-opacity='0'/></radialGradient> <radialGradient id='cc' cx='.5' cy='.5' r='.5'> <stop offset='0' stop-color='%238fd8f6' stop-opacity='.26'/><stop offset='1' stop-color='%238fd8f6' stop-opacity='0'/></radialGradient> <clipPath id='gc'><path d='M84 74 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L216 74 Z'/></clipPath> </defs> <ellipse cx='176' cy='366' rx='106' ry='20' fill='url(%23cw)'/> <ellipse cx='128' cy='368' rx='78' ry='15' fill='url(%23cc)'/> <ellipse cx='150' cy='359' rx='84' ry='12' fill='%23000000' opacity='.5'/> <g clip-path='url(%23gc)'> <path d='M88 120 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L212 120 Z' fill='url(%23gm)'/> <ellipse cx='150' cy='250' rx='40' ry='94' fill='%23a49c8f' opacity='.16'/> <ellipse cx='150' cy='327' rx='55' ry='19' fill='%23ffffff' opacity='.32'/> <path d='M88 120 L212 120 L210 135 L90 135 Z' fill='%23ffffff' opacity='.46'/> <ellipse cx='150' cy='120' rx='62' ry='13' fill='none' stroke='%23e9e2d6' stroke-width='2' opacity='.5'/> </g> <ellipse cx='150' cy='120' rx='62' ry='14' fill='url(%23sf)'/> <ellipse cx='150' cy='120' rx='62' ry='14' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='.7'/> <ellipse cx='150' cy='118' rx='54' ry='10' fill='none' stroke='%23ffffff' stroke-width='2.6' opacity='.32'/> <path d='M88 120 A62 14 0 0 0 212 120' fill='none' stroke='%23ffffff' stroke-width='3' opacity='.36'/> <path d='M84 74 L99 330 Q100 344 114 344 L186 344 Q200 344 201 330 L216 74 Z' fill='url(%23gw)' stroke='rgba(255,255,255,.42)' stroke-width='2'/> <ellipse cx='150' cy='74' rx='66' ry='16' fill='none' stroke='rgba(255,255,255,.74)' stroke-width='2.6'/> <ellipse cx='150' cy='76' rx='60' ry='14' fill='none' stroke='rgba(143,216,246,.42)' stroke-width='1.4'/> <path d='M96 106 C100 180 105 258 110 322' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' fill='none' opacity='.48'/> <path d='M108 122 C112 186 116 254 120 310' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' fill='none' opacity='.28'/> <path d='M200 114 C196 182 192 256 188 318' stroke='%23ffffff' stroke-width='3.8' stroke-linecap='round' fill='none' opacity='.2'/> <path d='M99 330 Q100 344 114 344 L186 344 Q200 344 201 330 Z' fill='%23ffffff' opacity='.15'/> <ellipse cx='150' cy='344' rx='40' ry='6.5' fill='%23ffffff' opacity='.24'/> <g fill='%23ffffff' opacity='.3'><circle cx='115' cy='166' r='2.3'/><circle cx='124' cy='208' r='1.5'/> <circle cx='111' cy='242' r='1.9'/><circle cx='130' cy='280' r='1.3'/><circle cx='178' cy='182' r='2'/> <circle cx='186' cy='230' r='1.4'/><circle cx='174' cy='270' r='2.2'/><circle cx='120' cy='312' r='1.6'/></g> </svg>")}

/* the coronet steps aside for it */
#milk-mustache-database .year-heading::before,
#milk-mustache-database .category-heading::before{
  background-image:var(--glass) !important;
  width:96px !important;
  height:128px !important;
  top:-52px !important;
  right:26px !important;
  opacity:.92 !important;
  background-position:bottom right !important;
  z-index:3 !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}

/* a larger one at the head of each index view, opposite the heading */
#milk-mustache-database #categories >.panel:first-of-type,
#milk-mustache-database #merch >.panel:first-of-type,
#milk-mustache-database #collateral >.panel:first-of-type,
#milk-mustache-database #trade >.panel:first-of-type{
  position:relative;
  padding-right:150px !important;
  overflow:visible;
}
#milk-mustache-database #categories >.panel:first-of-type::after,
#milk-mustache-database #merch >.panel:first-of-type::after,
#milk-mustache-database #collateral >.panel:first-of-type::after,
#milk-mustache-database #trade >.panel:first-of-type::after{
  content:"";position:absolute;right:16px;bottom:-14px;
  width:118px;height:158px;
  background-image:var(--glass);
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;
  opacity:.9;pointer-events:none;z-index:2;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
@media (max-width:820px){
  #milk-mustache-database #categories >.panel:first-of-type::after,
  #milk-mustache-database #merch >.panel:first-of-type::after,
  #milk-mustache-database #collateral >.panel:first-of-type::after,
  #milk-mustache-database #trade >.panel:first-of-type::after{display:none}
  #milk-mustache-database #categories >.panel:first-of-type,
  #milk-mustache-database #merch >.panel:first-of-type,
  #milk-mustache-database #collateral >.panel:first-of-type,
  #milk-mustache-database #trade >.panel:first-of-type{padding-right:24px !important}
  #milk-mustache-database .year-heading::before,
  #milk-mustache-database .category-heading::before{width:68px !important;height:92px !important;top:-34px !important}
}


/* v281. Two things.

   1. THE POURS ARE GONE. The one down the left was the --pour asset at
      position:fixed, 300px wide and 100vh tall, plus a mirrored one on the right
      of the header. Both were built from blurred circles rather than modelled, and
      that is exactly the abstract-milk problem: liquid with no container and no
      meniscus reads as a smear. The glass replaced the coronet; nothing replaces
      these, because the site does not need them.

   2. THE SMILEY BAND MATCHES THE PANEL. It carried a hardcoded #05090c, darker
      than the welcome panel it sits inside, so it read as a black box cut into a
      lighter surface. It now uses the same gradient as the panel, with the top
      edge lifted so the faces sit on light rather than a hole. */

/* --- 1: the pours --- */
#milk-mustache-database > main::after,
#milk-mustache-database > header::after{
  content:none !important;
  display:none !important;
  background-image:none !important;
}

/* --- 2: the smiley backdrop --- */
#milk-mustache-database #home.mm-welcome-art,
#milk-mustache-database#milk-mustache-database #home.mm-welcome-art{
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(143,216,246,.22), transparent 68%),
    linear-gradient(168deg,#1e303e 0%, #16242f 55%, #101a24 100%) !important;
  border-radius:12px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset !important;
  margin:0 0 18px !important;
}


/* v282. The glass was never rendering.

   A blanket rule from the v221 legibility repair - the pass that stripped 7,612
   decorative rings - sets content:none !important; display:none !important on
   ::before AND ::after for sixteen component types,.year-heading::before among
   them. That is exactly where I put the glass in v280, so it was switched off
   before it ever drew. Same for the index-view panels, which are.panel.

   Rather than fight that rule with pseudo-elements, the glass now goes in as a
   real element: an <img> injected into each heading. Nothing can hide it by
   accident, and it is inspectable in the DOM. */

#milk-mustache-database .mm-glass{
  position:absolute;
  right:22px; bottom:-6px;
  width:88px; height:auto;
  opacity:.94;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
#milk-mustache-database .year-heading,
#milk-mustache-database .category-heading{position:relative;overflow:visible}

#milk-mustache-database .mm-glass-lg{
  position:absolute;
  right:18px; bottom:-10px;
  width:116px; height:auto;
  opacity:.92;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
#milk-mustache-database .mm-glass-host{position:relative;overflow:visible;padding-right:150px !important}

@media (max-width:820px){
  #milk-mustache-database .mm-glass{width:60px;right:12px}
  #milk-mustache-database .mm-glass-lg{display:none}
  #milk-mustache-database .mm-glass-host{padding-right:24px !important}
}


/* v283. Nothing breaks mid-word or mid-link.

   Five rules from the v226 no-horizontal-scroll pass were doing it:
     overflow-wrap:anywhere   on the root, paragraphs, headings and cells
     word-break:break-word    on the same
     overflow-wrap:anywhere   on code and links
     word-break:break-all     on code and links
     word-break:break-all     on.mm-wb-hit.t

   anywhere and break-all both split INSIDE a word with no regard for where. That
   is what was chopping record titles and URLs.

   The replacement is break-word, which only breaks a word when it genuinely
   cannot fit on a line by itself - so ordinary prose wraps between words as it
   should, and a 200-character URL still cannot force horizontal scroll. */

#milk-mustache-database,
#milk-mustache-database *,
#milk-mustache-database p,
#milk-mustache-database li,
#milk-mustache-database td,
#milk-mustache-database th,
#milk-mustache-database h1,
#milk-mustache-database h2,
#milk-mustache-database h3,
#milk-mustache-database h4,
#milk-mustache-database .card h2,
#milk-mustache-database .cardbody,
#milk-mustache-database .meta,
#milk-mustache-database .eyebrow,
#milk-mustache-database .badge,
#milk-mustache-database .detailtitle h2,
#milk-mustache-database .year-heading h2{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
  line-break:auto !important;
}

/* links and code: keep them whole. Only break if a single token is wider than
   its container on its own. */
#milk-mustache-database a,
#milk-mustache-database code,
#milk-mustache-database .source,
#milk-mustache-database .assetlinks a,
#milk-mustache-database .nav a,
#milk-mustache-database .mm-news-item,
#milk-mustache-database .mm-news-item.t,
#milk-mustache-database .mm-wb-hit.t{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* short labels should never break at all */
#milk-mustache-database .badge,
#milk-mustache-database .chip,
#milk-mustache-database .yearcount,
#milk-mustache-database .nav a,
#milk-mustache-database .back,
#milk-mustache-database button{
  white-space:nowrap !important;
  overflow-wrap:normal !important;
}


/* v284. The back-to-top button is a milk splat.

   It was a black circle with a white border and a cow emoji. Now it is the splat
   itself - no plate, no ring, no border. The arrow sits in the middle of the
   pool, and the whole thing tilts and grows slightly on hover as if it just
   landed. */

#milk-mustache-database .cow-top-button{
  background:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><defs><radialGradient id='s' cx='.38' cy='.32' r='.72'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f7f3ec'/><stop offset='1' stop-color='%23cfc7ba'/></radialGradient></defs><g fill='url(%23s)'><path d='M92.4 50.0 Q76.8 55.6 93.9 68.0 Q71.0 63.1 73.9 74.4 Q59.5 63.4 56.6 68.8 Q50.7 67.5 45.7 87.6 Q43.4 70.0 33.0 77.0 Q33.6 65.8 13.9 74.1 Q23.8 60.4 1.6 59.5 Q32.9 52.5 43.4 48.7 Q40.6 44.7 26.4 34.2 Q35.6 33.9 27.3 13.8 Q41.6 27.2 45.7 12.8 Q51.3 31.1 58.4 26.1 Q56.8 38.3 63.5 36.2 Q59.1 43.7 65.9 43.5 Q68.1 48.0 92.4 50.0 Z'/><ellipse cx='34.4' cy='87.5' rx='3.2' ry='1.9'/><ellipse cx='21.7' cy='14.2' rx='2.9' ry='2.2'/><ellipse cx='74.9' cy='82.7' rx='1.6' ry='3.7'/><ellipse cx='54.2' cy='6.7' rx='2.8' ry='3.8'/><ellipse cx='19.1' cy='73.9' rx='2.2' ry='2.7'/><ellipse cx='64.4' cy='15.6' rx='3.1' ry='2.6'/></g><ellipse cx='40' cy='38' rx='9' ry='7' fill='%23ffffff' opacity='.75'/><ellipse cx='58' cy='62' rx='13' ry='9' fill='%23c9c1b4' opacity='.28'/></svg>") !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  width:74px !important;
  height:74px !important;
  font-size:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:transform.22s cubic-bezier(.2,.7,.3,1), filter.22s ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* the arrow, drawn on top of the pool */
#milk-mustache-database .cow-top-button::after{
  content:"" !important;
  display:block !important;
  width:15px;height:15px;
  margin-top:4px;
  border-left:3.5px solid #17242e;
  border-top:3.5px solid #17242e;
  transform:rotate(45deg);
  border-radius:1px;
  opacity:.85;
}
#milk-mustache-database .cow-top-button:hover,
#milk-mustache-database .cow-top-button:focus-visible{
  transform:scale(1.09) rotate(-7deg) !important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(143,216,246,.4));
}
#milk-mustache-database .cow-top-button:focus-visible{
  outline:3px solid #8fd8f6 !important;
  outline-offset:4px !important;
}
@media (prefers-reduced-motion:reduce){
  #milk-mustache-database .cow-top-button{transition:none !important}
  #milk-mustache-database .cow-top-button:hover{transform:none !important}
}


/* v285. Choose the clearest image, not the biggest.

   The hero was selected by size: where a URL exposes a dimension, it is the
   largest in 60 of 63 cases. Size is a poor proxy for clarity - a 1600px scan of
   a creased page loses to a sharp 800px one, and I cannot tell the difference
   because I cannot see images at all.

   So the choice moves to you. Every alternate image on a record gets a button
   that promotes it to main. The swap is instant, it persists, and it exports. */

#milk-mustache-database .mm-setmain{
  display:block;width:100%;margin-top:6px;
  padding:5px 8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;line-height:1.2;cursor:pointer;
  background:rgba(143,216,246,.14);color:#dff2fc;
  border:2px solid rgba(143,216,246,.5);border-radius:7px;
  white-space:nowrap;
}
#milk-mustache-database .mm-setmain:hover{background:rgba(143,216,246,.3);border-color:#8fd8f6}
#milk-mustache-database .mm-setmain[data-current="1"]{
  background:rgba(48,151,113,.34);border-color:rgba(143,216,246,.7);cursor:default;
}
#milk-mustache-database .mm-primary-bar{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin-top:12px;padding:11px 13px;border-radius:10px;
  background:rgba(143,216,246,.10);border:2px solid rgba(143,216,246,.4);
  font-size:12.5px;
}
#milk-mustache-database .mm-primary-bar button{
  padding:6px 11px;font-size:11.5px;font-weight:800;cursor:pointer;
  background:rgba(143,216,246,.16);color:#eaf7ff;
  border:2px solid rgba(143,216,246,.55);border-radius:8px;white-space:nowrap;
}
#milk-mustache-database .mm-primary-bar button:hover{background:rgba(143,216,246,.32)}

#milk-mustache-database .mm-lead-panel{background:linear-gradient(168deg,#3a3020,#241d12)!important;border:2px solid rgba(216,162,74,.62)!important}#milk-mustache-database .mm-lead-panel.eyebrow{color:#f0c987!important;-webkit-text-fill-color:#f0c987!important}
#milk-mustache-database .nav{display:block!important;text-align:center!important;padding:7px 0!important;line-height:2.05!important}#milk-mustache-database .navgroup{display:inline!important;}#milk-mustache-database .navlabel{display:inline!important;font-size:9.5px!important;letter-spacing:.12em!important;text-transform:uppercase!important;opacity:.55!important;color:#8fd8f6!important;-webkit-text-fill-color:#8fd8f6!important;font-weight:700!important;white-space:nowrap!important;padding:0 5px 0 0!important;vertical-align:middle!important}#milk-mustache-database .navgroup+.navgroup>.navlabel::before{content:"\00a0\00b7\00a0\00a0"!important;opacity:.5!important;letter-spacing:0!important}#milk-mustache-database .navgroup a{display:inline-flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important;padding:2px 7px!important;font-size:12.5px!important;border-radius:6px!important;line-height:1.25!important;margin:0 1px!important;vertical-align:middle!important}#milk-mustache-database .navcount{font-size:10px!important;opacity:.5!important;font-variant-numeric:tabular-nums!important;padding:0!important}@media(max-width:760px){#milk-mustache-database .nav{line-height:2!important}#milk-mustache-database .navgroup a{padding:2px 5px!important;font-size:12px!important}}
#milk-mustache-database #milk-mustache-database .cow-top-button,html body.cow-top-button{background:none!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:0!important;text-indent:-9999px!important;overflow:visible!important;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'>%20<defs>%20<radialGradient%20id='p'%20cx='.40'%20cy='.33'%20r='.75'>%20<stop%20offset='0'%20stop-color='#ffffff'/><stop%20offset='.55'%20stop-color='#f7f4ef'/>%20<stop%20offset='1'%20stop-color='#ddd8d0'/></radialGradient>%20<radialGradient%20id='d'%20cx='.38'%20cy='.30'%20r='.8'>%20<stop%20offset='0'%20stop-color='#ffffff'/><stop%20offset='1'%20stop-color='#e8e3db'/></radialGradient>%20</defs>%20<g%20fill='url(#p)'>%20<path%20d='M60%2022c7.5%200%2010.5%205.5%2015.5%206.5%205%201%209-3%2012%201.5%203%204.5-2%208.5-1%2013%201%204.5%208%205.5%208.5%2011.5.5%206-6.5%207-8.5%2011.5-2%204.5%202.5%209.5-1.5%2013-4%203.5-9-1-13.5%200-4.5%201-6.5%208-12.5%208s-8.5-6.5-13.5-7.5c-5-1-9.5%204-13-.5-3.5-4.5%201.5-9%20.5-13.5-1-4.5-8-6-8-11.5s7-6.5%208-11c1-4.5-4-9%200-13s9%201.5%2013.5.5C50.5%2027.5%2052.5%2022%2060%2022z'/>%20<path%20d='M92%2030c4-5%209-8%2011-6s-1%207-5%2011-8%205-9%203%201-6%203-8z'/>%20<path%20d='M26%2034c-5-4-9-4-10-1s3%206%208%209%209%203%209%200-4-6-7-8z'/>%20<path%20d='M97%2078c5%202%209%206%208%209s-6%202-11-1-8-7-6-9%206-1%209%201z'/>%20<path%20d='M30%2092c-3%205-3%2010%200%2011s6-3%208-8%202-9-1-9-6%203-7%206z'/>%20<path%20d='M62%2014c1-6%203-10%205-9s3%205%202%2010-3%208-5%207-3-5-2-8z'/>%20</g>%20<g%20fill='url(#d)'>%20<circle%20cx='104'%20cy='24'%20r='4.2'/><circle%20cx='16'%20cy='28'%20r='3.4'/>%20<circle%20cx='110'%20cy='62'%20r='2.8'/><circle%20cx='12'%20cy='72'%20r='3.9'/>%20<circle%20cx='88'%20cy='104'%20r='3.2'/><circle%20cx='40'%20cy='108'%20r='2.5'/>%20<circle%20cx='70'%20cy='6'%20r='2.2'/>%20</g>%20<ellipse%20cx='47'%20cy='42'%20rx='11'%20ry='7'%20fill='#ffffff'%20opacity='.72'%20transform='rotate(-22%2047%2042)'/>%20<ellipse%20cx='72'%20cy='68'%20rx='6'%20ry='4'%20fill='#ffffff'%20opacity='.30'%20transform='rotate(14%2072%2068)'/>%20</svg>")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;width:76px!important;height:76px!important;position:fixed!important;right:18px!important;bottom:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))!important;transition:transform.18s ease, filter.18s ease!important;z-index:2147483001!important;text-decoration:none!important}#milk-mustache-database #milk-mustache-database .cow-top-button::after,html body.cow-top-button::after{content:""!important;display:block!important;position:static!important;width:16px!important;height:16px!important;margin-top:5px!important;border-left:4px solid #1b2b36!important;border-top:4px solid #1b2b36!important;transform:rotate(45deg)!important;border-radius:2px!important;opacity:.9!important;background:none!important;text-indent:0!important}#milk-mustache-database #milk-mustache-database .cow-top-button::before,html body.cow-top-button::before{content:none!important;display:none!important}html body.cow-top-button:hover,html body.cow-top-button:focus-visible{transform:scale(1.08) rotate(-8deg)!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(143,216,246,.45))!important;background-color:transparent!important;border:0!important}html body.cow-top-button:focus-visible{outline:3px solid #8fd8f6!important;outline-offset:5px!important}@media(max-width:760px){html body.cow-top-button{width:62px!important;height:62px!important;right:12px!important;bottom:12px!important}}
#mm-ocean{position:fixed!important;left:0;right:0;bottom:0;height:230px;pointer-events:none!important;z-index:0;overflow:hidden;contain:layout paint;}#mm-ocean.sheen{position:absolute;left:0;right:0;bottom:0;height:250px;background:linear-gradient(to top,rgba(255,253,250,.30) 0%,rgba(210,236,250,.10) 42%,rgba(255,255,255,0) 100%);}#mm-ocean.w0{position:absolute;left:0;bottom:0px;width:400%;height:220px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20220'%20preserveAspectRatio='none'%20width='1200'%20height='220'><path%20d='M0,96%20C200,50%20400,50%20600,96%20C800,142%201000,142%201200,96%20L1200,220%20L0,220%20Z'%20fill='%23c9c4bd'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 220px;background-position:0 bottom;opacity:0.34;animation:mmdrift0 61s linear infinite;will-change:transform;}@keyframes mmdrift0{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w1{position:absolute;left:0;bottom:0px;width:400%;height:200px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20200'%20preserveAspectRatio='none'%20width='1200'%20height='200'><path%20d='M0,74%20C200,36%20400,36%20600,74%20C800,112%201000,112%201200,74%20L1200,200%20L0,200%20Z'%20fill='%23ddd8d0'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 200px;background-position:0 bottom;opacity:0.4;animation:mmdrift1 44s linear infinite;will-change:transform;}@keyframes mmdrift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w2{position:absolute;left:0;bottom:0px;width:400%;height:180px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20180'%20preserveAspectRatio='none'%20width='1200'%20height='180'><path%20d='M0,56%20C200,26%20400,26%20600,56%20C800,86%201000,86%201200,56%20L1200,180%20L0,180%20Z'%20fill='%23f2efeb'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 180px;background-position:0 bottom;opacity:0.46;animation:mmdrift2 33s linear infinite;will-change:transform;}@keyframes mmdrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.w3{position:absolute;left:0;bottom:0px;width:400%;height:150px;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20150'%20preserveAspectRatio='none'%20width='1200'%20height='150'><path%20d='M0,40%20C200,18%20400,18%20600,40%20C800,62%201000,62%201200,40%20L1200,150%20L0,150%20Z'%20fill='%23fffdfa'%20fill-opacity='1.0'/></svg>");background-repeat:repeat-x;background-size:1200px 150px;background-position:0 bottom;opacity:0.52;animation:mmdrift3 24s linear infinite;will-change:transform;}@keyframes mmdrift3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}#mm-ocean.swell{animation:mmswell 13s ease-in-out infinite alternate;}@keyframes mmswell{from{transform:translateY(0)}to{transform:translateY(-9px)}}#milk-mustache-database{position:relative!important;z-index:1!important;}@media(max-width:760px){#mm-ocean{height:150px}}@media(prefers-reduced-motion:reduce){#mm-ocean.w0,#mm-ocean.w1,#mm-ocean.w2,#mm-ocean.w3,#mm-ocean.swell{animation:none!important}}
html body #milk-mustache-database .site-footer{background:linear-gradient(180deg,rgba(10,20,28,.62),rgba(6,13,20,.80))!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;border:0!important;border-top:2px solid rgba(143,216,246,.42)!important;border-radius:0!important;color:#dff2fb!important;-webkit-text-fill-color:#dff2fb!important;padding:26px 20px 30px!important;margin-top:44px!important;text-align:center!important;box-shadow:none!important;position:relative!important;z-index:2!important;text-shadow:none!important}html body #milk-mustache-database .site-footer *{color:#dff2fb!important;-webkit-text-fill-color:#dff2fb!important;background:transparent!important;text-shadow:none!important}html body #milk-mustache-database .site-footer strong{display:block!important;font-size:1.14em!important;letter-spacing:.02em!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;margin-bottom:6px!important;font-weight:700!important}html body #milk-mustache-database .site-footer a{color:#8fd8f6!important;-webkit-text-fill-color:#8fd8f6!important;text-decoration:underline!important;text-decoration-color:rgba(143,216,246,.5)!important;text-underline-offset:3px!important;font-weight:600!important;border:0!important;padding:0!important}html body #milk-mustache-database .site-footer a:hover{color:#c7ecff!important;-webkit-text-fill-color:#c7ecff!important;text-decoration-color:#c7ecff!important}@media(max-width:760px){html body #milk-mustache-database .site-footer{padding:20px 14px 24px!important;margin-top:32px!important}}
html body #milk-mustache-database,html body #milk-mustache-database>main,html body #milk-mustache-database>header,html body #milk-mustache-database>footer,html body #milk-mustache-database .top{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}html body #milk-mustache-database>main{padding-left:clamp(12px,3vw,48px)!important;padding-right:clamp(12px,3vw,48px)!important}html body #milk-mustache-database .top{padding-left:clamp(10px,2.5vw,32px)!important;padding-right:clamp(10px,2.5vw,32px)!important}html body #milk-mustache-database .mm-view,html body #milk-mustache-database .panel,html body #milk-mustache-database .year-group,html body #milk-mustache-database .tablewrap{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}html body #milk-mustache-database .grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr))!important;gap:clamp(10px,1.4vw,20px)!important;width:100%!important;max-width:100%!important;justify-content:center!important;align-items:stretch!important}html body #milk-mustache-database .grid>.card,html body #milk-mustache-database .grid>a.card{width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}html body #milk-mustache-database .gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))!important;gap:clamp(10px,1.4vw,18px)!important;width:100%!important;justify-content:center!important}html body #milk-mustache-database .gallery>.asset{width:100%!important;max-width:100%!important;margin:0!important}html body #milk-mustache-database .detailgrid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important;gap:clamp(14px,2vw,32px)!important;width:100%!important;align-items:start!important}html body #milk-mustache-database p,html body #milk-mustache-database li{max-width:none!important}html body #milk-mustache-database .panel>p{max-width:none!important;margin-left:auto!important;margin-right:auto!important}html body #milk-mustache-database img,html body #milk-mustache-database svg,html body #milk-mustache-database table,html body #milk-mustache-database iframe{max-width:100%!important;height:auto!important}html body #milk-mustache-database table{width:100%!important;table-layout:auto!important}html body #milk-mustache-database .tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}html body #milk-mustache-database .nav,html body #milk-mustache-database .year-index{width:100%!important;max-width:100%!important;box-sizing:border-box!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}@media(max-width:640px){html body #milk-mustache-database .grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))!important}html body #milk-mustache-database .gallery{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))!important}html body #milk-mustache-database .detailgrid{grid-template-columns:1fr!important}}@media(min-width:2100px){html body #milk-mustache-database>main{padding-left:clamp(48px,6vw,160px)!important;padding-right:clamp(48px,6vw,160px)!important}}
/*mm-remove-waves-v1*/.milk-fluid-stage{display:none!important}#mm-ocean{display:none!important}.mm-welcome-art{margin-top:10px}.mm-welcome-art svg.mm-smileys{overflow:visible}
a.cow-top-button.mm-splat-top{background:transparent !important;background-color:transparent !important;background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><defs><radialGradient id='s' cx='.38' cy='.32' r='.72'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23f7f3ec'/><stop offset='1' stop-color='%23cfc7ba'/></radialGradient></defs><g fill='url(%23s)'><path d='M92.4 50.0 Q76.8 55.6 93.9 68.0 Q71.0 63.1 73.9 74.4 Q59.5 63.4 56.6 68.8 Q50.7 67.5 45.7 87.6 Q43.4 70.0 33.0 77.0 Q33.6 65.8 13.9 74.1 Q23.8 60.4 1.6 59.5 Q32.9 52.5 43.4 48.7 Q40.6 44.7 26.4 34.2 Q35.6 33.9 27.3 13.8 Q41.6 27.2 45.7 12.8 Q51.3 31.1 58.4 26.1 Q56.8 38.3 63.5 36.2 Q59.1 43.7 65.9 43.5 Q68.1 48.0 92.4 50.0 Z'/><ellipse cx='34.4' cy='87.5' rx='3.2' ry='1.9'/><ellipse cx='21.7' cy='14.2' rx='2.9' ry='2.2'/><ellipse cx='74.9' cy='82.7' rx='1.6' ry='3.7'/><ellipse cx='54.2' cy='6.7' rx='2.8' ry='3.8'/><ellipse cx='19.1' cy='73.9' rx='2.2' ry='2.7'/><ellipse cx='64.4' cy='15.6' rx='3.1' ry='2.6'/></g><ellipse cx='40' cy='38' rx='9' ry='7' fill='%23ffffff' opacity='.75'/><ellipse cx='58' cy='62' rx='13' ry='9' fill='%23c9c1b4' opacity='.28'/></svg>") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;color:transparent !important;-webkit-text-fill-color:transparent !important;font-size:0 !important;width:62px !important;height:62px !important;position:fixed !important;}a.cow-top-button.mm-splat-top::before{content:none !important;display:none !important;}a.cow-top-button.mm-splat-top::after{content:"" !important;display:block !important;position:absolute !important;left:50% !important;top:52% !important;width:15px !important;height:15px !important;transform:translate(-50%,-50%) rotate(45deg) !important;border-left:3.5px solid #17242e !important;border-top:3.5px solid #17242e !important;border-radius:1px !important;opacity:.9 !important;background:none !important;}a.cow-top-button.mm-splat-top:hover,a.cow-top-button.mm-splat-top:focus-visible{transform:scale(1.08) rotate(-8deg) !important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(143,216,246,.45)) !important;}

#mm-loader{position:fixed;inset:0;z-index:2147483647;background:radial-gradient(120% 120% at 50% 30%,#16232e 0%,#0c1219 70%);display:flex;align-items:center;justify-content:center;transition:opacity .55s ease;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#mm-loader.mm-hide{opacity:0;pointer-events:none;}
#mm-loader .mm-l-in{text-align:center;color:#eaf6ff;}
#mm-loader .mm-l-glass{width:60px;height:78px;margin:0 auto 20px;position:relative;border:3px solid #cfe8f5;border-top:0;border-radius:7px 7px 14px 14px;background:rgba(255,255,255,.04);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.5);}
#mm-loader .mm-l-fill{position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(#ffffff,#e9f4fb);animation:mmfill 1.5s ease-in-out infinite;}
#mm-loader .mm-l-fill:after{content:"";position:absolute;left:0;right:0;top:-5px;height:6px;border-radius:50%;background:#fff;opacity:.85;}
@keyframes mmfill{0%{height:16%}50%{height:86%}100%{height:16%}}
#mm-loader .mm-l-title{font-size:21px;font-weight:800;letter-spacing:.4px;text-shadow:0 2px 10px rgba(0,0,0,.5);}
#mm-loader .mm-l-sub{font-size:12.5px;opacity:.72;margin-top:5px;letter-spacing:.3px;}
@media(prefers-reduced-motion:reduce){#mm-loader .mm-l-fill{animation:none;height:60%}}


/* Center image galleries so few items don't left-align with blank space */
#milk-mustache-database .gallery:not(.assetlinks){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;gap:clamp(10px,1.4vw,18px)!important}
#milk-mustache-database .gallery:not(.assetlinks)>.asset{flex:0 1 235px!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
@media(max-width:600px){#milk-mustache-database .gallery:not(.assetlinks)>.asset{flex-basis:150px!important}}


/* Defer rendering of off-screen chronological year-groups for faster paint on the long timeline view */
.year-group{content-visibility:auto;contain-intrinsic-size:auto 1100px}


html body #milk-mustache-database .grid.grid{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;gap:clamp(10px,1.4vw,18px)!important;grid-template-columns:none!important}
html body #milk-mustache-database .grid.grid>.card{flex:0 1 280px!important;max-width:300px!important;width:auto!important;margin:0!important;box-sizing:border-box!important}
html body #milk-mustache-database .year-heading{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:.25em!important}
html body #milk-mustache-database .year-heading>.era-note{margin-left:0!important}
html body #milk-mustache-database .year-heading>*:not(.mm-glass){position:relative!important;z-index:1!important}
html body #milk-mustache-database .year-heading>.mm-glass{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;z-index:0!important;opacity:.45!important;pointer-events:none!important}

.permalink{display:inline-block;margin:0 0 14px 10px;font-size:12px;color:#8fd8f6;text-decoration:underline}

.mm-wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8em;margin-top:.9em}
.mm-wb-hit{border:1px solid #91cee8;border-radius:10px;padding:.5em;background:#eefaff;color:#05090c}
.mm-wb-hit img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:6px;display:block}
.mm-wb-hit.t{font-size:.78em;line-height:1.3;margin-top:.4em;word-break:break-all}
.mm-wb-hit a{color:#063d57!important}
.mm-wb-bar{height:12px;background:#123;border:1px solid #91cee8;border-radius:99px;overflow:hidden;margin:.6em 0}
.mm-wb-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fd8f6,#fff);width:0}
.mm-wb-log{font-size:.82em;max-height:150px;overflow:auto;background:rgba(255,255,255,.05);border-radius:8px;padding:.5em.7em;margin-top:.5em}
/*mm-tweak-about-v2*/#milk-mustache-database .campaign-history-standalone h2,#milk-mustache-database.campaign-history-standalone h2,html body #milk-mustache-database .campaign-history-standalone > h2{text-align:center!important;margin-left:auto!important;margin-right:auto!important}#milk-mustache-database .campaign-history-standalone p,#milk-mustache-database.campaign-history-standalone p,html body #milk-mustache-database .campaign-history-standalone > p{max-width:none!important;margin-left:0!important;margin-right:0!important}

#mmdb-navtoggle{display:none}
@media (max-width:820px){
  #milk-mustache-database>header .brand h1{font-size:30px!important;line-height:1.02!important;margin:0!important}
  #milk-mustache-database>header .mm-tagline{font-size:11.5px!important;line-height:1.3!important;margin:4px 0 0!important}
  #milk-mustache-database>header .top{padding-top:10px!important;padding-bottom:8px!important}
  #mmdb-navtoggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:8px auto 2px;padding:11px 14px;font:700 15px/1 system-ui,-apple-system,sans-serif;letter-spacing:.02em;color:#eaf6ff;background:rgba(143,216,246,.15);border:1px solid rgba(143,216,246,.4);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #mmdb-navtoggle::after{content:"\25BE";font-size:12px;opacity:.85;transition:transform .2s}
  #milk-mustache-database>header nav.nav{max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .18s ease}
  #milk-mustache-database>header.mmdb-nav-open nav.nav{max-height:66vh;overflow-y:auto;opacity:1;-webkit-overflow-scrolling:touch}
  #milk-mustache-database>header.mmdb-nav-open #mmdb-navtoggle::after{transform:rotate(180deg)}
}


/* readable metadata: space after every "Label:" in an ad section */
#milk-mustache-database .record-view .panel b::after{content:" ";white-space:pre}
/* keep asset/source links from running together */
#milk-mustache-database .record-view .assetlinks a,#milk-mustache-database .record-view .panel>a{display:inline-block;margin:3px 16px 3px 0}


  /* neutralize containing-block creators on gallery wrappers so the fixed lightbox escapes to the viewport */
#milk-mustache-database .gallery,#milk-mustache-database .gallery .asset,#milk-mustache-database .gallery .assetimg{transform:none!important;filter:none!important;perspective:none!important;will-change:auto!important;contain:none!important}
/* Click-to-enlarge must be a true full-screen overlay for hero AND gallery images
   (a more-specific #id rule was pinning gallery labels to static, so they expanded
   in place and slid behind neighboring thumbnails). */
#milk-mustache-database .zoom-toggle:checked + .zoom-label{
  position:fixed!important; inset:0!important; z-index:100000!important;
  width:100vw!important; height:100dvh!important; margin:0!important;
  background:rgba(0,0,0,.9)!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  padding:20px!important; box-sizing:border-box!important; cursor:zoom-out!important;
}
#milk-mustache-database .zoom-toggle:checked + .zoom-label::before,
#milk-mustache-database .zoom-toggle:checked + .zoom-label::after{ content:none!important; display:none!important; }
#milk-mustache-database .zoom-toggle:checked + .zoom-label img{
  position:relative!important; z-index:100001!important;
  width:auto!important; height:auto!important; max-width:96vw!important; max-height:92dvh!important;
  object-fit:contain!important; background:#fff!important; box-shadow:0 15px 70px #000!important;
}
#milk-mustache-database .zoom-toggle:checked ~ .zoom-close{ z-index:100002!important; }

body:has(section.mm-view:not(#home):target) #home,body:has(section.mm-view:not(#home) span[id^="record-"]:target) #home{display:none}.mm-view:has(span[id^="record-"]:target){display:block}.mm-view:has(span[id^="record-"]:target)~#home{display:none}
/* static pages */
#milk-mustache-database .mm-view{display:block!important}
.static-crumbs{max-width:1440px;margin:18px auto 0;padding:0 24px;font-size:13px}
.static-crumbs a{color:#8fd8f6}