/* Change only these tokens when MILCH's permanent palette is ready. */
:root{--bg:#181818;--surface:#202020;--cream:#f7f3eb;--cream-muted:#595650;--cream-line:#d8d2c9;--white:#fff;--muted:#b7b7b7;--line:#414141;--gutter:clamp(1.25rem,4.4vw,5rem);color-scheme:dark;color:var(--white);background:var(--bg);font-family:Arial,Helvetica,sans-serif;font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:2rem}
*{box-sizing:border-box}
body{margin:0;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
p,h1,h2{margin:0}
::selection{color:var(--bg);background:var(--white)}
a:focus-visible{outline:2px solid white;outline-offset:7px;border-radius:2px}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:20;padding:1rem;color:var(--bg);background:var(--white);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.hero{max-width:110rem;margin:auto;min-height:100vh;min-height:100svh;padding:1.65rem var(--gutter) 1.5rem;display:flex;flex-direction:column;gap:2.2rem}
.topline{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.small-brand{font-size:1.25rem;font-weight:900;letter-spacing:-.055em;display:flex;align-items:center;min-height:44px}
.small-brand span{font-size:.65rem;align-self:flex-start;margin-top:.6rem;margin-left:.25rem}
.launch-label{font-size:.8125rem;text-transform:uppercase;letter-spacing:.09em;line-height:1.5;text-align:right}
.logo-stage{display:grid;place-items:center;flex:1;padding:1rem 0;min-height:0}
.logo-scroll{position:relative;width:min(88%,70rem,max(26rem,calc((100svh - 21rem)*2.15)));transform-origin:50% 61%}
.logo-tail,.falling-drop{display:none;pointer-events:none}
/* Display the exact supplied logo, cropping transparent margins in CSS. */
.wordmark{position:relative;width:100%;aspect-ratio:1625/756;overflow:hidden}
.wordmark img{position:absolute;display:block;width:123.076923%;max-width:none;height:auto;left:-11.138462%;top:-85.582011%;color:white}
.hero-copy{display:grid;grid-template-columns:1.55fr 1fr;gap:2rem 5rem;align-items:end}
.hero-copy>*,.attitude>*{min-width:0}
h1{font-size:clamp(2rem,3.7vw,4rem);line-height:1.1;letter-spacing:-.053em;font-weight:500}
.hero-description{max-width:24rem;justify-self:end;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.55;letter-spacing:-.015em}
.scroll-cue{align-self:flex-start;display:flex;align-items:center;gap:.85rem;min-height:44px;font-size:.75rem;letter-spacing:.02em;color:var(--muted)}
.scroll-line{display:block;height:1.65rem;width:1px;background:var(--muted);transform-origin:top;transition:transform .25s}
.scroll-cue:hover{color:white}.scroll-cue:hover .scroll-line{transform:scaleY(1.2);background:white}
.quality-strip{background:var(--cream);color:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.65rem var(--gutter);border-block:1px solid var(--cream-line);font-size:clamp(.875rem,1.25vw,1.2rem);letter-spacing:-.025em}
.quality-drop{display:block;width:14px;height:14px;flex:none}
.section-pad{padding:clamp(5rem,10vw,10rem) var(--gutter);max-width:110rem;margin:auto}
.section-index{font-size:.75rem;letter-spacing:.09em;line-height:1.6;color:var(--muted)}
.attitude{display:grid;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:end;min-height:36rem}
.attitude h2{font-size:clamp(2.6rem,5.4vw,5.7rem);line-height:1.06;letter-spacing:-.06em;font-weight:500;margin-top:2rem}
h1 em,.attitude h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-synthesis:style;color:var(--white);font-weight:400;letter-spacing:-.065em}
.attitude-copy{max-width:30rem;justify-self:end}
.daily-list{font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.6;letter-spacing:-.035em}
.daily-list span{display:block}
.service-copy{font-size:1rem;line-height:1.75;color:var(--muted);margin-top:2rem}
.closing{background:var(--cream);color:var(--bg);max-width:none;padding-inline:max(var(--gutter),calc((100% - 110rem)/2 + var(--gutter)));border-radius:2.5rem 2.5rem 0 0;padding-top:4rem;padding-bottom:3.5rem}
.closing h2{font-size:clamp(3.6rem,10.5vw,11.5rem);line-height:.98;letter-spacing:-.065em;font-weight:500;margin:3rem 0 4rem}
.closing-brand{font-weight:900;letter-spacing:-.075em}
.closing-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.meaning{max-width:26rem;font-size:1rem;line-height:1.6;color:var(--muted)}
.first-sip{font-size:clamp(1rem,1.5vw,1.4rem);letter-spacing:-.025em}
.footer{max-width:110rem;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;padding:1.5rem var(--gutter);font-size:.75rem;line-height:1.5;color:var(--muted)}
.footer-brand{font-size:1.5rem;letter-spacing:-.06em;font-weight:900;color:white}
.footer a{min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1800px){.quality-strip{justify-content:center;gap:5rem}}
@media (max-width:760px){
 .hero{padding-top:1.15rem;gap:1.75rem}
 .launch-label{font-size:.75rem;max-width:14rem;letter-spacing:.06em}
 .small-brand{font-size:1.1rem}
 .logo-stage{padding-block:2.8rem}
 .logo-scroll{width:100%}
 .hero-copy{grid-template-columns:1fr;gap:1.35rem}
 h1{font-size:clamp(1.7rem,5.7vw,2.8rem)}
 .hero-description{justify-self:start;max-width:25rem;font-size:1rem;line-height:1.6}
 .scroll-cue{font-size:.75rem}
 .quality-strip{flex-direction:column;gap:.75rem;padding-block:1.5rem;font-size:1rem}
 .quality-drop{width:10px;height:10px}
 .attitude{grid-template-columns:1fr;gap:2.5rem;min-height:0}
 .attitude h2{font-size:clamp(2.7rem,8.5vw,4.8rem);margin-top:1.75rem}
 .attitude-copy{justify-self:start}
 .daily-list{font-size:1.25rem}
 .service-copy{margin-top:1.5rem}
 .closing{border-radius:1.5rem 1.5rem 0 0;padding-top:3rem;padding-bottom:2.5rem}
 .closing h2{font-size:clamp(3.5rem,13.5vw,6rem);margin-block:2.5rem 3.5rem}
 .closing-bottom{align-items:flex-start;flex-direction:column;gap:1.75rem}
 .footer{flex-wrap:wrap;gap:.5rem 1rem;font-size:.75rem}
 .footer p{order:3;flex-basis:100%}
}
@media (max-height:600px) and (min-width:761px){.logo-scroll{width:min(60%,40rem)}.hero{min-height:0}.logo-stage{padding-block:1rem}}
/* Scroll scene: only enabled after the logo loads and the content fits. */
.scroll-reveal .hero-scroll{height:calc(var(--scene-height) + var(--scroll-distance))}
.scroll-reveal .hero{position:sticky;top:0;min-height:0;height:var(--scene-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(.85rem,2.5vh,1.5rem)}
.scroll-reveal .logo-stage{padding:1rem 0}
.scroll-reveal .logo-body-reveal{will-change:clip-path}
.scroll-reveal #hero-logo{clip-path:inset(0 0 35% 0)}
.scroll-reveal .logo-tail{display:block;position:absolute;left:0;top:65%;width:100%;height:35%;transform-origin:50% 0}
.tail-window{position:absolute;inset:0;overflow:hidden}
.tail-window .wordmark{position:absolute;left:0;top:-185.714286%;width:100%;height:285.714286%;aspect-ratio:auto}
.scroll-reveal .falling-drop{display:block;position:absolute;left:50.5%;top:0;width:clamp(1rem,2.8vw,2.5rem);aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform,opacity}
.falling-drop>span{display:block;width:100%;height:100%;background:white;border-radius:55% 55% 55% 0;transform:rotate(135deg)}
.scroll-reveal .scroll-cue{justify-self:start}
@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.logo-scroll{transform:none!important}.wordmark,.logo-body-reveal{clip-path:none!important}.logo-tail,.falling-drop{display:none!important}.scroll-reveal .hero-scroll{height:auto}.scroll-reveal .hero{position:relative;height:auto;min-height:100svh}}
@media (forced-colors:active){.wordmark{forced-color-adjust:none}.closing{border:1px solid CanvasText}.quality-strip{border-color:CanvasText}}

/* Quiet footer links and a matching, readable privacy page. */
.footer-links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center;font-size:.875rem}
.legal-header{padding:1.5rem var(--gutter);max-width:110rem;margin:auto}
.legal-header>a:last-child{display:flex;align-items:center;min-height:44px;font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
.legal-main{max-width:52rem;padding:clamp(3rem,7vw,6rem) var(--gutter);margin:auto;line-height:1.7}
.legal-main h1{font-size:clamp(2.8rem,7vw,5rem);margin-bottom:1.5rem}
.legal-intro{font-size:1.125rem;color:var(--muted);max-width:36rem}
.legal-draft{border-left:2px solid var(--muted);padding:.8rem 1.1rem;margin:2rem 0;color:var(--muted);font-size:.875rem}
.legal-main section{margin-top:2.5rem;scroll-margin-top:2rem}
.legal-main h2{font-size:1.3rem;line-height:1.3;letter-spacing:-.03em;margin-bottom:.8rem;font-weight:500}
.legal-main section p{color:var(--muted);margin-top:.75rem}
.legal-main a{text-decoration:underline;text-underline-offset:4px}
.legal-details{margin:1rem 0;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.5rem 1rem;font-size:1rem}
.legal-details dt{color:var(--muted)}.legal-details dd{margin:0}
.legal-footer{border-top:1px solid var(--line)}
@media(max-width:760px){.footer-links{gap:.25rem 1rem}.legal-details{grid-template-columns:1fr;gap:.1rem}.legal-details dd{margin-bottom:.7rem}}

.footer-company{display:flex;flex-direction:column;gap:.1rem}.footer-company>span:last-child{font-size:.75rem}

.legal-updated{font-size:.875rem;color:var(--muted);margin-top:1.25rem}

/* Milk-white panels give the dark logo scene room to breathe. */
.closing .section-index,.closing .meaning{color:var(--cream-muted)}
.home-footer{background:var(--cream);color:var(--cream-muted);max-width:none;padding-inline:max(var(--gutter),calc((100% - 110rem)/2 + var(--gutter)))}
.home-footer .footer-brand{color:var(--bg)}
.home-footer a:focus-visible{outline-color:var(--bg)}
@media(forced-colors:active){.quality-drop{forced-color-adjust:none}}