/* Purpo Gelato. Tokens first (DESIGN.md is the source of truth), then layout, then components. */
@font-face{font-family:'Britney';src:url('../fonts/britney-1000.woff2') format('woff2');font-weight:1000;font-style:normal;font-display:swap}
@font-face{font-family:'Amulya';src:url('../fonts/amulya-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Amulya';src:url('../fonts/amulya-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Amulya';src:url('../fonts/amulya-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#22163A; --ink-2:#4B4060; --panna:#FFF4E2; --coral:#F2553C; --rule:#E2D3BB;
  --f-display:'Britney','Bodoni 72',Didot,'Bodoni MT',serif;
  --f-text:'Amulya',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-h1:clamp(42px,5.4vw,80px); --t-h2:clamp(38px,5vw,72px); --t-h3:clamp(26px,2.4vw,34px);
  --t-body:18px; --t-small:15px; --t-label:12px; --t-pill:15px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(16px,4vw,48px); --section:clamp(64px,10vw,128px); --wrap:1320px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  /* the current flavour world; JS and [data-world] blocks override these */
  --ground:#D6DB9E; --word:#46561C; --skin:#8E9A4E; --text:var(--ink);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--panna);color:var(--ink);font:400 var(--t-body)/1.5 var(--f-text);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* two-tone ring: the ink line shows on light grounds, the cream halo on dark ones */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--panna)}
h1,h2,h3{font-family:var(--f-display);font-weight:1000;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.95}
h2{font-size:var(--t-h2);line-height:.95}
h3{font-size:var(--t-h3);line-height:1}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.label{font:700 var(--t-label)/1.2 var(--f-text);letter-spacing:.16em;text-transform:uppercase}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.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}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--ink);color:var(--panna);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- worlds: any block with data-world takes its two tones ---------- */
[data-world]{background:var(--ground);color:var(--text)}
[data-world="fiordilatte"]{--ground:#E9DFCB;--word:#22163A;--skin:#FFFFFF;--text:var(--ink)}
[data-world="pistacchio"]{--ground:#D6DB9E;--word:#46561C;--skin:#8E9A4E;--text:var(--ink)}
[data-world="fragola"]{--ground:#F9C4CC;--word:#B4213C;--skin:#E9505F;--text:var(--ink)}
[data-world="limone"]{--ground:#FFE27A;--word:#8A5F00;--skin:#E8A800;--text:var(--ink)}
[data-world="nocciola"]{--ground:#E8C9A0;--word:#5E3417;--skin:#B7793F;--text:var(--ink)}
[data-world="cioccolato"]{--ground:#5B3123;--word:#F0C79B;--skin:#C27A50;--text:var(--panna)}
[data-world="amarena"]{--ground:#F5D3DC;--word:#7A1033;--skin:#A11D43;--text:var(--ink)}
[data-world="cielo"]{--ground:#A9DCF5;--word:#17479A;--skin:#3C8DDE;--text:var(--ink)}
[data-world="inchiostro"]{--ground:#22163A;--word:#FFF4E2;--skin:#2E2050;--text:var(--panna)}
[data-world="panna"]{--ground:var(--panna);--word:var(--ink);--skin:var(--coral);--text:var(--ink)}
[data-world="ink"]{--ground:var(--ink);--word:var(--panna);--skin:var(--coral);--text:var(--panna)}

/* ---------- Purpo ---------- */
.purpo,.purpo-reach{overflow:visible}
.purpo .p-body,.purpo-reach .p-arm{fill:var(--skin,var(--coral))}
.purpo .p-arm,.purpo .p-head,.purpo-reach .p-arm{transition:fill .5s var(--ease) calc(var(--i,8) * 45ms)}
.purpo .p-dots,.purpo-reach .p-dots{fill:var(--p-eye,#FFF4E2);opacity:.5}
.purpo .p-eyes{fill:var(--p-eye,#FFF4E2)}
.purpo .p-pupils{fill:var(--p-ink,#22163A)}
.purpo .p-glints{fill:var(--p-eye,#FFF4E2)}
.purpo .p-look{transition:transform .25s linear}
.purpo .p-eyes,.purpo .p-look{transform-box:fill-box;transform-origin:center}
.purpo.is-blinking .p-eyes,.purpo.is-blinking .p-look{transform:scaleY(.12)}
.purpo .p-eyes{transition:transform .09s linear}
@media (prefers-reduced-motion:no-preference){
  .purpo--stand .p-arm,.purpo--hang .p-arm{transform-box:fill-box;transform-origin:50% 0;animation:sway 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.45s)}
  .purpo--hang .p-arm{animation-duration:4.4s}
}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:2px solid currentColor;border-radius:999px;font:700 var(--t-pill)/1 var(--f-text);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--spring)}
.pill:hover{background:var(--text,var(--ink));color:var(--ground,var(--panna));border-color:var(--text,var(--ink))}
.pill--coral{background:var(--coral);border-color:var(--ink);color:var(--ink)}
.pill--coral:hover{background:var(--ink);color:var(--panna);border-color:var(--ink)}
.pill:active{transform:scale(.97)}
.pill svg{width:18px;height:18px}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;border:1.5px solid currentColor;border-radius:999px;font:700 12px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase}
.tag--diet{border-style:dashed}

/* ---------- header ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--gutter);color:var(--hdr,var(--ink));transition:color .6s var(--ease)}
.hdr-dark .site-header{--hdr:var(--panna)}
.hdr-dark .site-header .wordmark{--wm-eye:var(--ink)}
.brand{display:block;width:clamp(104px,10vw,140px);color:inherit;text-decoration:none}
.brand svg{width:100%;height:auto}
.wordmark{--wm-eye:var(--panna)}
.hdr-actions{display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 6px;font:700 16px/1 var(--f-text);letter-spacing:.04em}
.menu-btn i{display:grid;gap:4px;width:24px}
.menu-btn i::before,.menu-btn i::after,.menu-btn i span{content:"";display:block;height:2.5px;border-radius:2px;background:currentColor}
.menu-btn i::after{width:16px}
.float-menu{position:fixed;right:var(--gutter);top:16px;z-index:40;background:var(--panna);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:0 18px;transform:translateY(-140%);transition:transform .45s var(--spring)}
.float-menu.is-on{transform:none}
@media (max-width:560px){.site-header .pill--coral{display:none}}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:60;background:var(--panna);color:var(--ink);display:grid;grid-template-rows:auto 1fr auto;padding:22px var(--gutter) 28px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.menu__top{display:flex;justify-content:space-between;align-items:center}
.menu__close{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:700 16px/1 var(--f-text);letter-spacing:.04em}
.menu__close i{position:relative;width:22px;height:22px}
.menu__close i::before,.menu__close i::after{content:"";position:absolute;left:0;top:10px;width:22px;height:2.5px;background:currentColor;transform:rotate(45deg)}
.menu__close i::after{transform:rotate(-45deg)}
.menu nav{align-self:center;margin:var(--s-5) 0}
.menu nav ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,1vw,10px)}
.menu nav a{font:1000 clamp(36px,min(8.5vw,10.5svh),120px)/.95 var(--f-display);text-decoration:none;letter-spacing:-.01em;display:inline-block;transition:color .2s,transform .3s var(--spring)}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--hc,var(--coral));transform:translateX(10px)}
.menu nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}
.menu__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}
.menu__purpo{width:clamp(110px,14vw,180px);--skin:var(--coral)}
.menu .label{color:var(--ink-2)}

/* ---------- billboard word ---------- */
.billboard{display:inline-block;padding:0 .14em 0 .04em;font:1000 100px/.8 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:var(--word);user-select:none}
.billboard .ch{display:inline-block;transition:transform .55s var(--ease),opacity .4s}
.billboard.is-out .ch{transform:translateY(-105%);opacity:0}
.billboard.is-in .ch{transform:translateY(105%);opacity:0;transition:none}
.say{display:inline-flex;flex-wrap:wrap;gap:.5em;align-items:center}
.nw{white-space:nowrap}
.say b{font-weight:700}
.say em{font-style:normal;opacity:.75}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(100svh,700px);overflow:hidden;transition:background-color .6s var(--ease),color .6s var(--ease);isolation:isolate}
.hero__copy{position:relative;z-index:4;padding:clamp(108px,14svh,150px) var(--gutter) 0;max-width:calc(480px + var(--gutter) * 2)}
.hero__copy .label{display:block;margin-bottom:18px}
.hero__copy h1{margin-bottom:20px}
.hero__line{font-size:clamp(17px,1.35vw,20px);max-width:38ch;margin-bottom:26px;min-height:3em}
.hero .pills{margin-bottom:30px}
.switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.switch__label{flex-basis:100%;margin-bottom:6px}
.switch button{width:44px;height:44px;border-radius:50%;border:2px solid currentColor;background:var(--ground);font:700 16px/1 var(--f-text);display:grid;place-items:center;transition:background-color .25s,color .25s,transform .3s var(--spring)}
.switch button:hover{transform:translateY(-3px)}
.switch button[aria-checked="true"]{background:var(--text);color:var(--ground)}
/* the cup grows with tall screens and stands on the middle of the word, so nothing above it is left empty */
.hero__stage{position:absolute;z-index:2;left:64%;bottom:clamp(60px,21svh,300px);height:min(68svh,860px);aspect-ratio:1421/2075;transform:translateX(-50%)}
.hero__cup,.hero__cup img{position:absolute;inset:0;width:100%;height:100%}
.hero__cup img{object-fit:contain;filter:drop-shadow(14px 10px 0 var(--word));transition:filter .6s var(--ease)}
.hero__cup{z-index:2;transition:transform .6s var(--spring)}
.hero__cup.is-swap{transform:translateY(18px) rotate(-3deg) scale(.94)}
.hero__purpo{position:absolute;z-index:1;width:68%;left:-50%;top:32%;cursor:pointer;transition:transform .4s var(--spring)}
.hero__purpo:hover{transform:rotate(-4deg)}
.hero__purpo.is-squish{transform:scale(1.08,.9)}
.purpo-reach{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero__bb{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:clamp(14px,2.6svh,36px);line-height:0}
.hero__say{position:absolute;z-index:3;right:var(--gutter);top:clamp(120px,17svh,180px);text-align:right;max-width:22ch;color:var(--text)}
.hero__say .label{display:block;line-height:1.7}
@media (max-width:1100px){
  .hero{display:flex;flex-direction:column;min-height:auto;padding:100px 0 26px}
  .hero__copy{display:contents}
  .hero__copy>*{margin-left:var(--gutter);margin-right:var(--gutter)}
  .hero__copy>.label{order:1;margin-bottom:12px}
  .hero__copy h1{order:2;margin-bottom:14px}
  .hero__line{order:3;min-height:0;margin-bottom:0}
  .hero__stage{position:relative;left:auto;bottom:auto;transform:none;order:4;align-self:flex-start;width:auto;height:min(42svh,360px);margin:14px 0 0 max(120px,32%)}
  .hero__purpo{width:62%;left:-48%}
  .hero__bb{position:relative;left:auto;right:auto;bottom:auto;transform:none;order:5;margin:-14px var(--gutter) 0;line-height:.8}
  .switch{order:6;margin-top:20px}
  .hero__say{position:relative;inset:auto;text-align:left;order:7;margin:14px var(--gutter) 0;padding:0;max-width:none}
  .hero .pills{order:8;margin-top:20px;margin-bottom:0}
}

/* ---------- sections ---------- */
.section{padding:var(--section) 0}
.section-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:880px}
.section-head .label{color:var(--ink-2)}
[data-world] .section-head .label,[data-world] .label{color:inherit}

/* proof: the loud octopus next to the honest gelato */
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.proof__item{display:grid;gap:14px}
.proof__pair{position:relative;aspect-ratio:4/5;display:grid;place-items:end center;background:var(--ground);overflow:hidden;border-radius:999px 999px 0 0}
.proof__pair img{width:68%;margin-bottom:6%;filter:drop-shadow(10px 8px 0 var(--word))}
.proof__pair .purpo{position:absolute;width:42%;left:4%;top:9%}
.proof__item p{font-size:var(--t-small);color:var(--ink-2)}
.proof__item h3{font-size:clamp(24px,2vw,30px)}
@media (max-width:820px){.proof__grid{grid-template-columns:1fr;max-width:420px}}

/* ---------- The Eight ---------- */
.eight-intro{padding:var(--section) 0 clamp(48px,7vw,80px)}
.eight-intro__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:end}
.eight-intro__rules{display:grid;gap:12px;font-size:var(--t-small)}
.eight-intro__rules li{display:flex;gap:12px;align-items:baseline;border-top:1px dotted var(--rule);padding-top:12px}
.eight-intro__rules b{font:1000 24px/1 var(--f-display);min-width:1.4em}
@media (max-width:820px){.eight-intro__grid{grid-template-columns:1fr}}
.eight{position:relative}
.world{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:0 var(--gutter);isolation:isolate}
.world__bb{position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(84px,12svh,130px);z-index:0}
.world__copy{position:relative;z-index:3;max-width:470px;align-self:end;margin-bottom:clamp(40px,9svh,96px)}
.world__no{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.world__no b{font:1000 34px/1 var(--f-display)}
.world__copy h3{font-size:clamp(28px,3vw,44px);margin-bottom:14px}
.world__copy p{margin-bottom:16px;max-width:42ch}
.world__origin{display:block;margin-bottom:14px}
.world__tags{display:flex;flex-wrap:wrap;gap:8px}
.world__stage{position:relative;z-index:2;justify-self:center;align-self:end;height:min(64svh,600px);aspect-ratio:1421/2075;margin-bottom:clamp(24px,4svh,48px)}
.world__stage>img:not(.world__ing){width:100%;height:100%;object-fit:contain;filter:drop-shadow(14px 10px 0 var(--word))}
.world__ing{position:absolute;z-index:3;width:56%;right:-52%;top:6%;filter:drop-shadow(10px 8px 0 var(--word));will-change:transform}
.world__ing--tall{width:24%;right:-26%;top:20%}
@media (max-width:820px){
  .world{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:start;height:auto;min-height:100svh;padding-top:96px;padding-bottom:96px}
  .world__bb{position:relative;left:auto;right:auto;top:auto;grid-row:1}
  .world__stage{grid-row:2;height:min(46svh,380px);margin:18px 0 8px;justify-self:start;margin-left:14%}
  .world__copy{grid-row:3;margin:0}
  .world__ing{width:62%;right:-66%}
}

/* the hidden Purpo: camouflaged in the world's ground, eyes give him away */
.hide{position:absolute;z-index:4;width:clamp(64px,7vw,92px);padding:6px;border-radius:24px;--skin:color-mix(in srgb,var(--ground) 86%,var(--word));--p-eye:color-mix(in srgb,var(--ground) 70%,#fff);transition:transform .42s var(--spring)}
.hide .purpo{width:100%;height:auto}
.hide:hover{transform:translateY(-4px)}
.hide.is-found{--skin:var(--coral);--p-eye:var(--panna);transform:scale(1.15)}
.hide[data-spot="cup"]{right:-30%;top:46%}
.hide[data-spot="ing"]{right:-44%;top:-6%}
.hide[data-spot="word"]{right:20%;top:calc(clamp(84px,12svh,130px) - 52px)}
.hide[data-spot="corner"]{right:var(--gutter);bottom:18px}
.hide[data-spot="copy"]{left:var(--gutter);top:96px}
@media (max-width:820px){.hide[data-spot="cup"]{right:-6%;top:40%}.hide[data-spot="ing"]{right:2%;top:-8%}.hide[data-spot="word"]{top:40px;right:auto;left:34%}.hide[data-spot="copy"]{top:40px}}
.hide__say{position:absolute;left:50%;bottom:100%;transform:translate(-50%,6px);white-space:nowrap;background:var(--panna);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 14px;font:1000 20px/1 var(--f-display);box-shadow:4px 4px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--spring)}
.hide.is-saying .hide__say{opacity:1;transform:translate(-50%,-6px)}

/* found tracker */
.tracker{position:fixed;left:var(--gutter);top:16px;z-index:35;display:flex;align-items:center;gap:12px;background:var(--panna);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 8px 6px 6px;box-shadow:4px 4px 0 var(--ink);transform:translateY(-160%);transition:transform .45s var(--spring)}
.tracker.is-on{transform:none}
.tracker svg{width:44px;height:44px}
.tracker__seg{fill:none;stroke-width:7;stroke:var(--rule)}
.tracker__seg.is-found{stroke:var(--c)}
.tracker__count{font:1000 22px/1 var(--f-display)}
.tracker__hint{font:700 13px/1 var(--f-text);padding:10px 12px;border-radius:999px;background:var(--ink);color:var(--panna)}

/* ---------- the Deep: secret ninth ---------- */
.deep{position:relative;overflow:hidden}
.deep__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.deep__lock{aspect-ratio:1;max-width:420px;border:3px dashed color-mix(in srgb,var(--panna) 45%,transparent);border-radius:50%;display:grid;place-items:center;text-align:center;padding:12%;margin:auto}
.deep__lock b{display:block;font:1000 clamp(64px,9vw,120px)/.8 var(--f-display);margin-bottom:12px}
.deep[data-unlocked] .deep__lock{display:none}
.deep:not([data-unlocked]) .deep__open{display:none}
.deep__open{display:grid;gap:22px;justify-items:start}
.deep__cup{width:min(320px,70%);filter:drop-shadow(12px 9px 0 var(--coral))}
@media (max-width:820px){.deep__grid{grid-template-columns:1fr}}

/* the biglietto: a counter ticket with scalloped ends */
.ticket{--bg:var(--panna);position:relative;width:min(100%,460px);background:var(--bg);color:var(--ink);padding:26px 34px;display:grid;grid-template-columns:72px 1fr;gap:8px 18px;align-items:center;-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket h3{font-size:34px;grid-column:1/-1}
.ticket__code{font:1000 clamp(28px,3vw,38px)/1 var(--f-display);letter-spacing:.02em;white-space:nowrap}
.ticket .purpo{grid-row:span 2;width:72px;--skin:var(--coral)}
.ticket .label{grid-column:2}
.ticket p{font-size:var(--t-small);grid-column:1/-1;border-top:1px dotted var(--ink);padding-top:10px}

/* ---------- lids (pozzetti) ---------- */
.lids__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center}
.lids__media{position:relative}
.lids__photo{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5}
.lids__photo img{width:100%;height:100%;object-fit:cover}
.lids__video{position:absolute;right:-6%;bottom:-8%;width:52%;aspect-ratio:16/9;border:6px solid var(--panna);overflow:hidden;background:var(--ink)}
.lids__video video{width:100%;height:100%;object-fit:cover}
.lids__copy{display:grid;gap:22px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.facts div{padding:16px 12px 0 0}
.facts b{display:block;font:1000 clamp(36px,4vw,56px)/1 var(--f-display);margin-bottom:6px}
.facts span{font-size:14px;color:var(--ink-2);line-height:1.35;display:block}
@media (max-width:860px){.lids__grid{grid-template-columns:1fr}.lids__video{right:4%;width:58%}}

/* ---------- honest receipt ---------- */
.receipt{max-width:980px;margin:0 auto;background:#FFFBF3;border:2px solid var(--ink);padding:clamp(22px,4vw,48px);position:relative}
.receipt__head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:6px}
.receipt__row{display:grid;grid-template-columns:40px minmax(150px,1fr) 2fr minmax(140px,1fr);gap:16px;padding:16px 0;border-bottom:1px dotted var(--ink-2);align-items:baseline}
.receipt__row b{font:1000 22px/1 var(--f-display)}
.receipt__row .n{font:700 14px/1 var(--f-text);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.receipt__row p{font-size:var(--t-small);color:var(--ink-2)}
.receipt__row .al{font:700 12px/1.4 var(--f-text);letter-spacing:.06em;text-transform:uppercase}
.receipt__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:var(--t-small);color:var(--ink-2)}
@media (max-width:760px){.receipt__row{grid-template-columns:32px 1fr}.receipt__row p,.receipt__row .al{grid-column:2}}

/* ---------- tub (three.js) ---------- */
.tub__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.tub__canvas{position:relative;aspect-ratio:1;max-width:620px;width:100%;margin:auto;border-radius:50%;background:color-mix(in srgb,var(--ground) 72%,#fff);transition:background-color .6s var(--ease);touch-action:pan-y;cursor:grab}
.tub__canvas:active{cursor:grabbing}
.tub__canvas canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.tub__canvas .tub__fallback{position:absolute;inset:12%;width:76%;object-fit:contain;filter:drop-shadow(10px 8px 0 var(--word))}
.tub__canvas.is-3d .tub__fallback{display:none}
.tub__hint{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);white-space:nowrap}
.dots{display:flex;flex-wrap:wrap;gap:10px}
.dots button{width:40px;height:40px;border-radius:50%;background:var(--c);border:2px solid var(--ink);transition:transform .3s var(--spring)}
.dots button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--panna),0 0 0 5px var(--ink);transform:scale(1.08)}
@media (max-width:820px){.tub__grid{grid-template-columns:1fr}}

/* ---------- visit teaser ---------- */
.visit__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.visit__photo{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5}
.visit__photo img{width:100%;height:100%;object-fit:cover}
.hours{display:grid;gap:0;margin:8px 0 6px;max-width:440px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dotted var(--ink-2);font-variant-numeric:tabular-nums}
.placeholder{background:color-mix(in srgb,var(--coral) 22%,transparent);padding:0 .25em;border-radius:4px}
@media (max-width:820px){.visit__grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{position:relative;background:var(--ink);color:var(--panna);padding:clamp(96px,12vw,150px) 0 28px;margin-top:clamp(40px,6vw,80px)}
.site-footer .wordmark{--wm-eye:var(--ink)}
.footer__purpo{position:absolute;top:0;right:max(12%,calc(var(--gutter) + 150px));width:clamp(120px,14vw,190px);transform:translateY(-58%);--skin:var(--coral);--p-eye:var(--panna)}
.footer__purpo .purpo{width:100%}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;margin-bottom:clamp(48px,7vw,96px)}
.footer__grid h2{font-size:clamp(30px,3vw,44px);max-width:14ch}
.footer__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer__grid a{text-decoration:none;opacity:.88}
.footer__grid a:hover{opacity:1;text-decoration:underline}
.footer__grid .label{display:block;margin-bottom:14px;opacity:.7}
.footer__wm{display:block;width:100%;color:var(--panna)}
.footer__small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:22px;font-size:14px;opacity:.75}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}}

/* ---------- inner pages ---------- */
.page-hero{position:relative;padding:clamp(120px,16vw,190px) 0 0;overflow:hidden}
.page-hero__bb{margin:clamp(28px,4vw,56px) var(--gutter) 0;line-height:0;transform:translateY(10%)}
.page-hero h1{max-width:13ch;margin:16px 0 22px}
.page-hero .purpo{position:absolute;right:calc(var(--gutter) + 2vw);top:clamp(100px,12vw,150px);width:clamp(120px,16vw,240px)}
@media (max-width:700px){.page-hero .purpo{position:relative;right:auto;top:auto;margin:18px 0 0 var(--gutter);width:120px}}
.crumbs{font:700 13px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase}
.crumbs a{text-decoration:none;opacity:.75}
.crumbs a:hover{opacity:1;text-decoration:underline}

/* menu board (flavors page) */
.board{display:grid;gap:0;border-top:2px solid var(--ink)}
.board__row{display:grid;grid-template-columns:72px minmax(0,1.1fr) 200px minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(20px,3vw,36px) 0;border-bottom:1px dotted var(--ink-2);position:relative}
.board__row .n{font:1000 48px/1 var(--f-display);color:var(--word)}
.board__row h2{font-size:clamp(40px,5vw,72px);color:var(--word)}
.board__row .say{margin-top:8px}
.board__cup{width:100%;max-width:200px;justify-self:center;background:var(--ground);border-radius:999px 999px 0 0;padding:14px 18px 0}
.board__cup img{filter:drop-shadow(8px 6px 0 var(--word))}
.board__row .kid{font:1000 22px/1.1 var(--f-display);margin-bottom:8px}
.board__row p{font-size:var(--t-small);color:var(--ink-2);margin-bottom:12px}
@media (max-width:860px){.board__row{grid-template-columns:48px 1fr;}.board__cup{grid-column:2;justify-self:start;max-width:170px}.board__row>div:last-child{grid-column:2}.board__row .n{font-size:34px}}

/* steps (story page) */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:120px 1fr 1fr;gap:clamp(16px,4vw,56px);padding:clamp(28px,4vw,48px) 0;border-top:2px solid var(--ink);align-items:start}
.step b{font:1000 clamp(64px,8vw,110px)/.8 var(--f-display);color:var(--coral)}
.step h2{font-size:clamp(32px,3.6vw,52px)}
.step p{color:var(--ink-2)}
@media (max-width:820px){.step{grid-template-columns:64px 1fr}.step p{grid-column:2}}
.wide-photo{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:16/9}
.wide-photo img,.wide-photo video{width:100%;height:100%;object-fit:cover}

/* visit page */
.counter-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.counter-card dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0}
.counter-card dt{font:700 12px/1.6 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.counter-card dd{margin:0}
@media (max-width:820px){.counter-card{grid-template-columns:1fr}}
.party{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:clamp(28px,4vw,56px);border-radius:28px}
@media (max-width:760px){.party{grid-template-columns:1fr}}

/* reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .rv.is-in{opacity:1;transform:none}
}

@media print{
  /* one page: only the ticket */
  .skip,.site-header,.float-menu,.menu,.tracker,.site-footer,main>*:not(.deep),.deep__grid>:first-child,.deep__lock,.deep__cup,.deep__open .pills,.parade,.wmark,.confetti{display:none!important}
  .deep{padding:0;background:#fff;color:#000}
  .ticket{border:2px solid #000;-webkit-mask:none;mask:none}
}
.wordmark .wm-white{fill:var(--wm-eye,#FFF4E2)}
.no-tx,.no-tx *{transition:none!important}
@media (max-width:700px){
  .tracker{top:auto;bottom:14px;left:50%;transform:translate(-50%,160%)}
  .tracker.is-on{transform:translate(-50%,0)}
}

/* review fixes */
[data-page="home"] .site-header .pill--coral,[data-page="404"] .site-header .pill--coral{display:none}
[data-page="404"] .footer__purpo{display:none}
.dots button[aria-pressed="true"]:focus-visible,.tracker :focus-visible{outline-offset:7px}
.board__row--faq{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
@media (max-width:760px){.board__row--faq{grid-template-columns:1fr;gap:10px}}
.tub__canvas:focus-visible{outline-offset:6px}
/* laptops with short screens: smaller stage and headline so the switcher clears the billboard */
@media (min-width:1101px) and (max-height:900px){
  .hero__copy{padding-top:96px}
  .hero__copy h1{font-size:clamp(38px,4.2vw,62px)}
  .hero__line{margin-bottom:18px;min-height:0}
  .hero .pills{margin-bottom:20px}
  .hero__stage{height:min(60svh,520px);bottom:clamp(60px,17svh,160px)}
}
@media (min-width:1101px) and (max-width:1280px){.hero__stage{left:66%}.hero__purpo{width:64%;left:-46%}}
@media (prefers-reduced-motion:reduce){
  .hide,.hide.is-found,.hero__purpo,.float-menu,.tracker,.pill,.switch button,.hero__cup,.menu nav a,.dots button{transition:none!important}
  .hide.is-found,.hide:hover,.hero__purpo:hover,.switch button:hover,.dots button[aria-pressed="true"]{transform:none}
}
@media (max-width:600px){.switch{display:grid;grid-template-columns:repeat(4,44px);gap:10px 12px}.switch__label{grid-column:1/-1}}
.tracker__count{white-space:nowrap}

/* ===================== motion & richness pass ===================== */
/* paper grain: a whisper of texture so flat colour reads as print, not screen */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:url('../img/grain.webp') 0 0/128px 128px;opacity:.55}
@media print{body::after{display:none}}

/* parade: the eight cups on their plates */
.parade{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px);overflow:hidden}
.parade__head{margin-bottom:clamp(16px,2vw,28px)}
.parade__head .label{font-size:12px;color:var(--ink-2)}
.parade__row{list-style:none;margin:0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,22px)}
.parade__item a{position:relative;display:grid;justify-items:center;text-decoration:none;color:var(--ink);padding-top:clamp(8px,1vw,16px)}
.parade__plate{position:absolute;left:4%;right:4%;top:22%;aspect-ratio:1;border-radius:50%;background:var(--ground);transition:transform .45s var(--spring)}
.parade__cup{position:relative;display:block;width:80%}
.parade__cup img{width:100%;filter:drop-shadow(7px 5px 0 var(--word));transition:transform .45s var(--spring)}
.parade__name{position:relative;margin-top:clamp(8px,1vw,14px);font:1000 clamp(15px,1.45vw,22px)/1 var(--f-display);text-align:center;white-space:nowrap}
.parade__no{position:absolute;top:0;right:6%;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--panna);display:grid;place-items:center;font:700 13px/1 var(--f-text);transform:scale(0);transition:transform .35s var(--spring)}
.parade__item a:hover .parade__cup img,.parade__item a:focus-visible .parade__cup img{transform:translateY(-14px) rotate(-7deg)}
.parade__item a:hover .parade__plate,.parade__item a:focus-visible .parade__plate{transform:scale(1.1)}
.parade__item a:hover .parade__no,.parade__item a:focus-visible .parade__no{transform:scale(1)}
@media (max-width:900px){
  .parade__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
  .parade__row::-webkit-scrollbar{display:none}
  .parade__item{flex:0 0 36vw;scroll-snap-align:start}
}

/* hero floaters: the flavour's ingredients hang around the cup */
.hero__float{position:absolute;z-index:3;pointer-events:none;transform:translate3d(calc(var(--px,0) * var(--d) * 22px),calc(var(--py,0) * var(--d) * 16px),0);transition:transform .5s var(--ease)}
.hero__float img{width:100%;filter:drop-shadow(8px 6px 0 var(--word));transition:filter .6s var(--ease)}
.hero__float--a{width:52%;right:-62%;top:15%}
.hero__float--b{width:30%;right:-40%;bottom:-3%;z-index:1}
.hero__float--c{width:22%;left:-34%;top:-4%}
.hero.is-tall .hero__float--a{width:20%;right:-30%;top:18%}
.hero.is-tall .hero__float--b{width:12%;right:-22%}
.hero.is-tall .hero__float--c{width:9%;left:-14%}
.hero__cup{transform:perspective(1000px) rotateY(calc(var(--px,0) * 7deg)) rotateX(calc(var(--py,0) * -4deg))}
.hero__cup.is-swap{transform:translateY(18px) rotate(-3deg) scale(.94)}
@media (max-width:1100px){
  .hero__float--a{width:42%;right:-30%;top:-4%}
  .hero__float--b{display:none}
  .hero__float--c{width:22%;left:-46%;top:-8%}
}

/* world confetti: the ingredient, scattered at a few depths */
.confetti{position:absolute;inset:0;z-index:1;pointer-events:none}
.cf{position:absolute;width:clamp(70px,8vw,140px);filter:drop-shadow(6px 5px 0 var(--word));will-change:transform}
.cf--1{left:36%;top:30%;width:clamp(90px,10vw,170px)}
.cf--2{left:54%;top:64%;width:clamp(56px,5vw,90px)}
.cf--3{right:6%;top:70%;width:clamp(60px,6vw,110px)}
.cf--4{left:46%;top:78%;width:clamp(48px,4.4vw,80px)}
.confetti--tall .cf{width:clamp(28px,2.6vw,48px)}
.confetti--tall .cf--3,.confetti--tall .cf--4{display:none}
@media (max-width:820px){.cf--1{left:auto;right:-6%;top:22%}.cf--2{left:auto;right:30%;top:14%}.cf--3,.cf--4{display:none}}

/* watermark words behind the calm sections */
.has-wmark{position:relative;overflow:hidden;isolation:isolate}
.has-wmark>.wrap{position:relative;z-index:1}
.wmark{position:absolute;left:-2vw;right:-2vw;top:clamp(10px,3vw,40px);z-index:0;line-height:0;--word:#F3E4C8;pointer-events:none}

/* idle life */
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes bobTilt{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes rainbow{to{filter:hue-rotate(360deg)}}
@keyframes cupDrop{0%{transform:translateY(-55%) rotate(-8deg);opacity:0}55%{transform:translateY(4%) scale(1.04,.94);opacity:1}75%{transform:translateY(-2%) scale(.98,1.03)}100%{transform:none}}
@keyframes peekUp{0%{transform:translateY(45%) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes riseIn{from{transform:translateY(70%)}to{transform:none}}
@keyframes popIn{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}
@keyframes popUp{0%{transform:translateY(40px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hero__float img{animation:bobTilt 6s ease-in-out infinite}
  .hero__float--b img{animation-duration:7.4s;animation-delay:-2s}
  .hero__float--c img{animation-duration:5.2s;animation-delay:-1s}
  .parade__cup{animation:bob 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.42s)}
  .js .parade .parade__item{opacity:0}
  .parade.is-in .parade__item{animation:popUp .7s var(--spring) both;animation-delay:calc(var(--i) * 70ms)}
  .proof__pair .purpo{animation:bob 3.2s ease-in-out infinite}
  .proof__item:nth-child(2) .proof__pair .purpo{animation-delay:-1.1s}
  .proof__item:nth-child(3) .proof__pair .purpo{animation-delay:-2.2s}
  .proof__pair:hover .purpo{animation:bob 3.2s ease-in-out infinite,rainbow 1.4s linear infinite}
  .world__stage>img:not(.world__ing){animation:bob 4.6s ease-in-out infinite}
  /* first arrival: the cup drops in, the word rises, Purpo peeks up, the ingredients pop */
  .hero.intro .hero__cup img{animation:cupDrop .95s var(--spring) both .15s}
  .hero.intro .hero__bb .billboard{animation:riseIn .9s var(--ease) both}
  .hero.intro .hero__purpo{animation:peekUp .9s var(--spring) both .55s}
  .hero.intro .purpo-reach{animation:peekUp .9s var(--spring) both .7s}
  .hero.intro .hero__float{animation:popIn .7s var(--spring) both .9s}
  .hero.intro .hero__float--b{animation-delay:1.05s}
  .hero.intro .hero__float--c{animation-delay:1.2s}
  /* headings rise word by word */
  .js .rv .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .1em 0;margin:0 -.12em -.1em 0}
  .js .rv .wd>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease) calc(var(--wi) * 55ms)}
  .js .rv.is-in .wd>span{transform:none}
  /* the receipt prints row by row */
  .js .receipt .receipt__row{clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease) calc(var(--ri) * 90ms + 200ms)}
  .js .receipt.is-in .receipt__row{clip-path:inset(0)}
}
@media (max-width:600px){.hero__float--c{display:none}}