:root{--red:#ef242d;--black:#080808;--ink:#111;--cream:#f4ead8;--white:#fff;--grey:#aaa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* never scroll sideways: everything is sized to fit the width; clip is a safety net for anything that
   still pokes out (unlike overflow:hidden it doesn't make body a scroll container) */
body{margin:0;background:var(--black);color:#fff;font-family:'DM Sans',Arial,sans-serif;overflow-x:clip}
img{max-width:100%;display:block}
.hidden{display:none!important}
/* the site isn't rendered until the age gate is passed, so lazy images and backgrounds don't load behind it */
.locked{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* buttons & type */
.btn{display:inline-block;border:2px solid var(--red);padding:15px 24px;font:800 14px/1 'DM Sans',Arial,sans-serif;letter-spacing:1px;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.primary{background:var(--red);color:#fff}
.outline{background:transparent;color:#fff}
.dark{background:var(--black);border-color:var(--black);color:#fff}
.eyebrow{color:var(--red);font-weight:800;letter-spacing:4px;font-size:13px;margin:0}
h1 em,h2 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--red);font-weight:800}
.hero h1,.flavors h2,.vibe h2,.cta h2,.split h2,.carry h2{font:clamp(52px,7.4vw,112px)/.88 Anton,Impact,sans-serif;margin:14px 0 24px;letter-spacing:-1px;text-wrap:balance;overflow-wrap:break-word}

/* age gate */
/* never scrolls: fills the screen exactly and everything scales with the screen height (svh = with browser bars showing) */
.gate{position:fixed;z-index:9999;inset:0;height:100vh;height:100svh;overflow:hidden;overscroll-behavior:none;background:radial-gradient(circle at 50% 35%,#3b0d10 0,#100506 38%,#050505 70%);display:grid;place-items:center;padding:clamp(10px,3vh,24px) 20px}
.gate-card{text-align:center;width:100%;max-width:650px}
.gate-logo{height:clamp(70px,28vh,292px);width:auto;max-width:70vw;margin:0 auto clamp(4px,1vh,10px)}
.gate h1{font:clamp(28px,7vh,52px)/1 Anton,Impact,sans-serif;letter-spacing:1px;margin:clamp(6px,2.5vh,22px) 0 clamp(4px,1.2vh,10px)}
.gate p{color:#c8c0ba;margin:clamp(4px,1.6vh,16px) 0}
.gate small{color:#8d8580}
.gate:focus{outline:none}
.gate-form{max-width:380px;margin:clamp(10px,3.4vh,28px) auto clamp(8px,2.6vh,22px)}
.dob{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:12px}
.dob label{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:11px;font-weight:800;letter-spacing:2px;color:#c8c0ba;text-transform:uppercase}
.dob input{width:100%;min-width:0;background:#0009;border:2px solid #5a2a2c;border-radius:0;color:#fff;font:clamp(20px,3.4vh,26px)/1 Anton,Impact,sans-serif;letter-spacing:2px;padding:clamp(8px,1.8vh,14px) 10px;text-align:center}
.dob input::placeholder{color:#6d5a58}
.dob input:focus,.dob input[aria-invalid=true]{border-color:var(--red)}
.gate-error{min-height:1.4em;margin:clamp(4px,1.4vh,12px) 0 0;color:#ff6b6b;font-size:14px;font-weight:700}
.gate-form .btn{width:100%;margin-top:clamp(4px,1.2vh,10px);font-size:15px;padding-block:clamp(11px,2vh,15px)}
/* short, wide screens (phones sideways, small laptop windows): logo left, form right */
@media(max-height:520px) and (min-aspect-ratio:4/3){
  .gate-card{max-width:760px;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(20px,5vw,48px);align-items:center;text-align:left}
  .gate-logo{grid-row:1 / span 4;height:min(72vh,260px);max-width:34vw;margin:0}
  .gate-form{margin-inline:0}
}
.denied{position:fixed;z-index:10000;inset:0;background:var(--black);display:grid;place-items:center;text-align:center;padding:24px}
.denied-logo{width:240px;margin:0 auto}
.denied h1{font:clamp(48px,20vw,72px) Anton,Impact,sans-serif;margin:15px}
.denied p{color:var(--grey)}

/* header */
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:absolute;top:0;z-index:10;width:100%;background:linear-gradient(#000c,transparent)}
.brand img{height:52px;width:auto}
nav{display:flex;gap:30px;align-items:center}
nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1.5px}
nav a:hover{color:var(--red)}
.nav-cta{border:2px solid var(--red);padding:10px 16px}
.menu{display:none;background:none;border:0;color:#fff;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}

/* hero: rotating lifestyle photos */
.hero{height:100vh;min-height:700px;max-height:1000px;position:relative;display:flex;align-items:center;overflow:hidden;background:#000}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,50%);opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 7s ease-out}
.hero-slides img.on{opacity:1;transform:scale(1)}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#000d 0,#0008 38%,#0001 70%),linear-gradient(0deg,#080808 0,transparent 22%)}
.hero-copy{position:relative;z-index:2;width:min(650px,86vw);margin-left:7vw}
.lead{font-size:20px;line-height:1.5;max-width:560px;margin:0 0 34px;color:#eee7de}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-place{position:absolute;right:5vw;bottom:40px;z-index:2;margin:0;font-size:12px;font-weight:800;letter-spacing:3px;color:#fff;background:#0009;padding:10px 14px}

/* split */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:700px} /* minmax(0,..): columns may shrink below their longest word */
.split .copy{padding:100px 7vw;background:var(--cream);color:var(--ink)}
.split h2{font-size:clamp(48px,6vw,88px)}
.split img{width:100%;height:100%;object-fit:cover}
.split .copy>p:not(.eyebrow){font-size:18px;line-height:1.7;max-width:650px}
.stats{display:flex;gap:40px;margin-top:45px;border-top:1px solid #aaa;padding-top:28px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font:50px Anton,Impact,sans-serif;color:var(--red)}
.stats b small{font-size:24px;margin-left:2px}
.stats span{font-size:11px;font-weight:800;letter-spacing:1px}

/* flavors: interactive 3D lineup */
.flavors{padding:36px 0 56px;background:radial-gradient(70% 60% at 50% 60%,#2a0b0d 0,#080808 70%)}
.flavors-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:0 7vw;flex-wrap:wrap}
.flavors-head h2{margin-bottom:10px}
.hint{margin:0 0 18px;color:#9a9a9a;font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.lineup{position:relative;padding-bottom:130px}
.stage{position:relative;background-size:cover;background-position:center;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.stage.live canvas{opacity:1}
/* short stage; script.js tightens the 3D camera to match (frameH / frameW / lookY / fov) */
.stage-lineup{height:clamp(310px,26.5vw,420px);background-color:#080808;background-size:contain;background-repeat:no-repeat}
/* .near is added by script.js as the section approaches the viewport (lazy fallback still) */
.stage-lineup.near{background-image:url(assets/renders/lineup.webp)}
.labels{position:absolute;left:0;right:0;top:0;height:0}
.flabel{position:absolute;transform:translate(-50%,0);transition:transform .3s ease;width:280px;background:none;border:0;padding:6px 8px;color:#fff;text-align:center;cursor:pointer;font-family:'DM Sans',Arial,sans-serif}
.fl-name{display:block;font:22px/1 Anton,Impact,sans-serif;letter-spacing:.5px;color:#8a8a8a;transition:color .25s ease,font-size .25s ease,transform .25s ease}
.fl-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .3s ease}
/* collapsed until active */
.fl-in{overflow:hidden;min-height:0}
.fl-meta{display:block;margin-top:10px;font-size:11px;font-weight:800;letter-spacing:2px;color:#bdbdbd}
.fl-tag{display:block;margin-top:8px;font:italic 800 18px/1.3 'Playfair Display',Georgia,serif;color:#fff}
.flabel.on .fl-name,.flabel:hover .fl-name,.flabel:focus-visible .fl-name{color:var(--fl);font-size:34px}
.flabel.on .fl-more,.flabel:hover .fl-more,.flabel:focus-visible .fl-more{grid-template-rows:1fr;opacity:1}
.lineup.has-on .flabel:not(.on) .fl-name{color:#4a4a4a}
.flabel.on{transform:translate(-50%,16px);z-index:2}
.proof{margin:0;padding:0 7vw;color:#8a8a8a;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:center}

/* vibe */
.vibe{padding:110px 5vw;background:var(--cream);color:var(--ink)}
.vibe-more{padding-top:0}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* same 3:2 shape as the photos, so nothing is cropped */
.gallery figure{margin:0;aspect-ratio:3/2;overflow:hidden;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.025)}
.gallery figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;background:var(--black);color:#fff;font:800 12px 'DM Sans',Arial,sans-serif;letter-spacing:2.5px}

/* cta: sizes (nips / box / jugs) on the red band */
.cta{background:var(--red);padding:0 8vw}
.cta .eyebrow{color:var(--ink)}
.cta h2{font-size:clamp(68px,8.4vw,128px);margin-bottom:0}
.cta .tag{font:italic 800 30px 'Playfair Display',Georgia,serif;margin:0}
/* left: the wordmark reads into each size on the right ("Just Lickher" + NIPS / BOX / JUGS) */
.sizes-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:stretch}
.sizes-brand{align-self:center;padding-block:80px}
.cta .sizes-mark{margin:clamp(10px,2vh,18px) 0}
/* flat white wordmark (brand/logo/lickher-wordmark-mono.svg) with a crisp dark-red offset shadow:
   the grey-shadow version is made for the black cup sleeve and looks muddy on red */
.sizes-mark img{width:min(100%,480px);height:auto;max-height:38vh;object-fit:contain;object-position:left;filter:drop-shadow(clamp(3px,.4vw,6px) clamp(3px,.4vw,6px) 0 #9c0f17)}
/* right: accordion, exactly one open (script.js) */
/* the stack runs the full height of the section, cards touching; the open card takes the spare height */
.size-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;box-shadow:0 0 60px #0003}
/* --slide is the open/close timing (script.js SLIDE_MS matches it) */
.size-list{--slide:.6s}
.size{background:var(--cream);color:var(--ink);border-top:1px solid #11111124;display:flex;flex-direction:column;flex:0 1 auto;transition:flex-grow var(--slide) cubic-bezier(.22,.61,.36,1)}
.size:first-child{border-top:0}
.size.open{flex-grow:1}
.size-panel{flex:1 1 auto}
.size-head{margin:0}
.size-toggle{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;padding:clamp(12px,2.2vh,20px) 24px;color:inherit;text-align:left;cursor:pointer;font-family:'DM Sans',Arial,sans-serif}
.size-toggle[aria-disabled=true]{cursor:default}
.size-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.size-name{transition:color .3s ease}
.size:not(.open) .size-toggle:hover .size-name{color:var(--red)}
.size-name{font:clamp(34px,6vh,54px)/1 Anton,Impact,sans-serif;letter-spacing:.5px}
.size-spec{color:var(--red);font-size:12px;font-weight:800;letter-spacing:2.5px}
/* panel: animates open with the 0fr -> 1fr grid trick; hidden panels are invisible to screen readers and tabbing */
.size-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--slide) cubic-bezier(.22,.61,.36,1),visibility 0s linear var(--slide)}
.size.open .size-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--slide) cubic-bezier(.22,.61,.36,1),visibility 0s}
.size-in{overflow:hidden;min-height:0;display:flex;align-items:center;gap:24px;padding:0 24px;opacity:0;transition:opacity .3s ease,padding-bottom var(--slide) cubic-bezier(.22,.61,.36,1)}
.size.open .size-in{opacity:1;transition:opacity .45s ease .18s,padding-bottom var(--slide) cubic-bezier(.22,.61,.36,1)} /* content fades in just after the card starts opening */
.size.open .size-in{padding-bottom:clamp(14px,2.6vh,24px)}
.size-art{display:block;flex:none;height:clamp(90px,20vh,170px);width:auto}
.size-copy{margin:0;font-size:clamp(15px,2.3vh,18px);line-height:1.55;max-width:34ch}
/* not available yet (Box, Jugs): greyed out, "Coming soon" tag in the header, stamp over the drawing */
.size.soon{background:#e2d9c9}
.size.soon .size-name{color:#8c8479}
.size.soon .size-spec{color:#a0978a}
.size.soon .size-copy{color:#6b645b}
.size.soon .size-art{filter:grayscale(1);opacity:.45}
.size.soon:not(.open) .size-toggle:hover .size-name{color:#5a544c}
.soon-badge{margin-left:auto;flex:none;border:2px solid var(--red);color:var(--red);font:800 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;padding:6px 9px;transform:rotate(-3deg)}
.size-art-wrap{position:relative;flex:none;display:grid;place-items:center}
.soon-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);white-space:nowrap;font:clamp(18px,3.2vh,28px)/1 Anton,Impact,sans-serif;letter-spacing:1.5px;color:var(--red);border:3px solid var(--red);padding:6px 12px;background:#e2d9c9e6;box-shadow:0 6px 18px #0002}

/* trade call to action: one centered ask on its own screen */
.carry{text-align:center;padding:clamp(64px,14vh,150px) 7vw;background:radial-gradient(60% 70% at 50% 55%,#2a0b0d 0,#080808 70%)}
.carry h2{margin:16px auto 22px}
.carry-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:#e2dad2;max-width:620px;margin:0 auto 34px}
.carry-btn{font-size:16px;padding:20px 40px}
.carry-mail{margin:22px 0 0;color:#9a9a9a;font-size:14px}
.carry-mail a{color:#fff}

/* footer */
footer{text-align:center;padding:80px 5vw;background:#050505;color:var(--grey);border-top:1px solid #1c1c1c}
.footer-logo{width:200px;margin:0 auto 20px}
footer a{color:#fff}
.warning{font-size:11px;line-height:1.6;max-width:720px;margin:36px auto 0;color:#777}
.legal{font-size:11px;margin-top:18px}

/* ---- fit each section in one screen (laptops and up) ----
   Type and spacing scale with viewport height as well as width, so a 1366x650 laptop
   window shows every section whole. --display is the big Anton headline size. */
@media(min-width:851px){
  :root{--display:clamp(40px,min(7.4vw,10.5vh),112px);--pad:clamp(28px,7vh,90px)}
  .hero h1,.flavors h2,.vibe h2,.cta h2,.split h2,.carry h2{font-size:var(--display)}
  .hero{min-height:520px;padding-top:60px}
  .lead{font-size:clamp(16px,2.6vh,20px);margin-bottom:clamp(18px,4vh,34px)}

  .split{min-height:0}
  .split .copy{padding:var(--pad) 6vw}
  .split h2{font-size:clamp(40px,min(6vw,9vh),88px)}
  .split .copy>p:not(.eyebrow){font-size:clamp(15px,2.4vh,18px);line-height:1.6}
  .stats{margin-top:clamp(16px,4vh,45px);padding-top:clamp(12px,3vh,28px)}
  .stats b{font-size:clamp(34px,6.5vh,50px)}

  .flavors{padding:clamp(16px,3.5vh,36px) 0 clamp(18px,4vh,56px)}
  .stage-lineup{height:clamp(240px,min(26.5vw,40vh),420px)}
  .lineup{padding-bottom:152px} /* room for the expanded label under an open cup */

  /* gallery: two screens, two uncropped 3:2 photos side by side on each. The row is as wide as
     the page allows, but never so wide that the photos (height = width/2 per photo / 1.5) outgrow the
     screen height minus --reserve (padding, plus the heading on the first screen). */
  .vibe{--vpad:clamp(24px,5vh,72px);--hgap:clamp(12px,2.5vh,24px);padding:var(--vpad) 5vw;
    /* 2 × padding + eyebrow (17) + h2 top margin (14) + h2 line (.88 × --display) + h2 bottom margin + slack */
    --reserve:calc(var(--vpad) * 2 + 17px + 14px + var(--display) * .88 + var(--hgap) + 10px)}
  .vibe-more{--reserve:calc(var(--vpad) + 10px);padding-top:0}
  .vibe>*{width:min(100%,calc((100vh - var(--reserve)) * 3 + 14px));width:min(100%,calc((100svh - var(--reserve)) * 3 + 14px));margin-inline:auto}
  .vibe h2{margin-bottom:var(--hgap)}

  .cta{padding:0 8vw}
  .sizes-brand{padding-block:var(--pad)}
  .cta .tag{font-size:clamp(22px,3.6vh,30px)}
}
/* wide screens: the flavors headline fits on one line */
@media(min-width:1100px){
  .flavors h2 br{display:none}
}

/* responsive */
@media(max-width:850px){
  nav{display:none;position:absolute;right:20px;top:70px;flex-direction:column;align-items:flex-start;background:#111;padding:25px;gap:20px}
  nav.open{display:flex}
  .menu{display:flex}
  .hero{min-height:680px;align-items:flex-end;padding-bottom:110px}
  .hero-copy{margin:0 7vw}
  .shade{background:linear-gradient(0deg,#000e 0,#0009 55%,#0003 100%)}
  .hero-place{bottom:30px;left:7vw;right:auto}
  .split{grid-template-columns:minmax(0,1fr)}
  /* headlines scale with the width on phones so the longest word always fits (e.g. ANYWHERE., LICKHER?) */
  .hero h1,.flavors h2,.vibe h2,.cta h2,.split h2,.carry h2{font-size:clamp(30px,12.5vw,52px)}
  .split img{height:500px}
  .flavors{padding:32px 0 40px}
  .stage-lineup{height:330px}
  .stage-lineup.near{background-image:url(assets/renders/lineup-m.webp)}
  .lineup{padding:0 16px 24px}
  .lineup .stage-lineup{margin:0 -16px}
  .labels{position:static;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
  .flabel,.flabel.on{position:static;transform:none;width:auto;border:1px solid #333;padding:10px 14px;min-height:44px}
  .fl-name{font-size:17px;color:#cfcfcf}
  .flabel.on{flex-basis:100%;border-color:var(--fl);padding:16px}
  .flabel.on .fl-name,.flabel:hover .fl-name{font-size:30px}
  .flabel:not(.on):hover .fl-more{grid-template-rows:0fr;opacity:0}
  .flabel:not(.on):hover .fl-name{font-size:17px}
  /* the hidden tagline would otherwise stretch every chip to full width */
  .flabel:not(.on) .fl-more{display:none}
  .cta{padding:0 7vw}
  .sizes-brand{padding-block:44px 0}
  /* phones: wordmark on top, accordion below */
  .sizes-grid{grid-template-columns:1fr;gap:22px}
  .sizes-mark img{width:min(62%,260px);max-height:none}
  .cta .tag{font-size:24px}
  .size-toggle{padding:14px 16px;gap:12px;flex-wrap:wrap}
  .size-name{font-size:34px}
  .size-spec{font-size:11px;letter-spacing:2px}
  .size-in{padding:0 16px;gap:16px}
  .size-art{height:96px}
  .soon-stamp{font-size:13px;letter-spacing:1px;padding:4px 7px;border-width:2px}
  .soon-badge{font-size:10px;letter-spacing:1.5px;padding:5px 7px}
  /* phones: the two photos of each gallery screen stack, full width */
  .vibe{padding:48px 5vw}
  .vibe-more{padding-top:0}
  .gallery{grid-template-columns:1fr;gap:10px}
  .stats{gap:20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.gallery img,.hero-slides img,.fl-name,.fl-more,.size,.size-panel,.size.open .size-panel,.size-in,.size.open .size-in{transition:none}
}