:root { --bg:#ff3d5a; --deep:#c4122f; --ink:#2b0a12; --cream:#fff4e3; --pop:#ffe14d; --leave:650; --e:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); transition:background .8s; scroll-behavior:smooth; overflow-x:clip; }
body { color:var(--ink); font-family:'Nunito',sans-serif; font-weight:700; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
html.has-cur, html.has-cur * { cursor:none !important; }
.display, h1, h2, h3 { font-family:'Bagel Fat One',sans-serif; font-weight:400; line-height:.9; letter-spacing:-.01em; }

/* Layers: section backgrounds < ghost type (1) < WebGL canvas (2) < copy (3) */
#c { position:fixed; inset:0; width:100%; height:100vh; height:100lvh; z-index:2; pointer-events:none; }
.over { position:relative; z-index:3; }
.ghost { position:relative; z-index:1; }
html.no-gl #c { display:none; }

/* Cursor */
.k-cur i { position:absolute; width:18px; height:18px; margin:-9px; border-radius:50%; background:var(--cream); border:2.5px solid var(--ink); transition:transform .3s var(--e), background .3s; }
.k-cur.on i { transform:scale(3); background:var(--pop); }
.k-cur span { position:absolute; transform:translate(-50%,-50%); font-weight:900; font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .2s; }
.k-cur.label i { transform:scale(5.2); background:var(--pop); } .k-cur.label span { opacity:1; }

/* Curtain: a bubble that swallows the page between routes */
.curtain { position:fixed; inset:0; z-index:100; background:var(--ink); color:var(--cream); display:grid; place-items:center; clip-path:circle(150% at 50% 50%); transition:clip-path .75s cubic-bezier(.7,0,.2,1); }
html.ready .curtain { clip-path:circle(0% at 50% 50%); pointer-events:none; }
html.leaving .curtain { clip-path:circle(150% at 50% 100%); transition-duration:.6s; }
.curtain-in { text-align:center; }
.curtain-in b { display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(54px,11vw,150px); color:var(--bg); animation:bob 1.1s ease-in-out infinite alternate; }
.curtain-in span { font-weight:900; letter-spacing:.3em; font-size:14px; font-variant-numeric:tabular-nums; }
html:not(.first) .curtain-in span { visibility:hidden; }
@keyframes bob { to { transform:translateY(-12px) rotate(-2deg); } }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:95; display:flex; align-items:center; gap:22px; padding:18px 4vw; transition:transform .5s var(--e); }
html.down:not(.menu-open) .nav { transform:translateY(-130%); }
.logo { font-family:'Bagel Fat One'; font-size:34px; color:var(--cream); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; margin-right:auto; transition:transform .3s var(--e); }
.logo:hover { transform:rotate(-4deg) scale(1.06); }
.nav nav { display:flex; gap:6px; background:var(--cream); padding:6px; border-radius:50px; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.nav nav a { padding:9px 18px; border-radius:40px; font-weight:900; font-size:14px; transition:background .25s, color .25s; }
.nav nav a:hover, .nav nav a[aria-current] { background:var(--ink); color:var(--cream); }
.dots { display:flex; gap:8px; }
.dots button { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--ink); background:var(--d); transition:transform .3s var(--e); }
.dots button.on { transform:scale(1.35); box-shadow:2px 2px 0 var(--ink); }
.pill { display:inline-block; background:var(--cream); color:var(--ink); padding:12px 22px; border-radius:40px; border:2.5px solid var(--ink); font-weight:900; box-shadow:4px 4px 0 var(--ink); transition:box-shadow .2s, background .2s; white-space:nowrap; }
.pill:hover { box-shadow:7px 7px 0 var(--ink); background:var(--pop); }
.pill.dark { background:var(--ink); color:var(--cream); box-shadow:4px 4px 0 var(--cream); border-color:var(--ink); } .pill.dark:hover { background:var(--deep); }
.pill.xl { font-size:clamp(18px,2vw,26px); padding:20px 38px; }
.burger { display:none; width:48px; height:48px; border-radius:50%; border:2.5px solid var(--ink); background:var(--cream); box-shadow:3px 3px 0 var(--ink); position:relative; }
.burger i { position:absolute; left:13px; right:13px; height:3px; background:var(--ink); border-radius:2px; top:18px; transition:transform .35s var(--e), top .35s var(--e); }
.burger i + i { top:26px; }
html.menu-open .burger i { top:22px; transform:rotate(45deg); } html.menu-open .burger i + i { transform:rotate(-45deg); }
.menu { position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--cream); display:flex; flex-direction:column; justify-content:center; padding:0 7vw; clip-path:circle(0% at calc(100% - 44px) 42px); transition:clip-path .7s cubic-bezier(.7,0,.2,1); visibility:hidden; }
html.menu-open .menu { clip-path:circle(150% at calc(100% - 44px) 42px); visibility:visible; }
.menu a { font-family:'Bagel Fat One'; font-size:clamp(54px,15vw,110px); line-height:1.02; translate:0 40px; opacity:0; transition:translate .6s var(--e), opacity .4s, color .2s; }
html.menu-open .menu a { translate:0; opacity:1; transition-delay:calc(.12s + var(--n) * .06s); }
.menu a:hover, .menu a[aria-current] { color:var(--bg); }
.menu small { margin-top:34px; font-weight:700; opacity:.6; letter-spacing:.08em; }

/* Shared type + furniture */
.kicker { display:inline-block; background:var(--ink); color:var(--cream); padding:7px 14px; border-radius:30px; font-weight:900; font-size:13px; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-2deg); }
h2 { font-size:clamp(50px,7.4vw,124px); }
.huge { font-size:clamp(84px,17vw,300px); letter-spacing:-.03em; }
.lede { font-size:clamp(17px,1.5vw,22px); line-height:1.5; max-width:30em; }
.stroke { color:var(--cream); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; }
section { position:relative; }
.cream { background:var(--cream); } .ink { background:var(--ink); color:var(--cream); }
.wrap { padding:0 4vw; }
.ticker { background:var(--ink); color:var(--cream); font-family:'Bagel Fat One'; font-size:clamp(24px,2.6vw,38px); white-space:nowrap; overflow:hidden; padding:14px 0; transform:rotate(-2deg) skewX(calc(var(--sv,0) * -14deg)); margin:-24px -20px; position:relative; z-index:6; }
.ticker.b { transform:rotate(1.5deg) skewX(calc(var(--sv,0) * 14deg)); background:var(--pop); color:var(--ink); border-block:3px solid var(--ink); }
.ticker div { display:inline-block; animation:tk 22s linear infinite; } .ticker.b div { animation-direction:reverse; }
@keyframes tk { to { transform:translateX(-50%); } }
.badge { position:absolute; width:clamp(96px,10vw,150px); aspect-ratio:1; animation:turn 14s linear infinite; }
.badge text { font-family:'Nunito'; font-weight:900; font-size:13.5px; letter-spacing:.17em; fill:var(--ink); }
@keyframes turn { to { transform:rotate(360deg); } }

/* ── Home: hero ── */
.top { height:100vh; height:100svh; min-height:600px; overflow:hidden; }
.big { position:absolute; left:0; right:0; top:50%; transform:translateY(-52%); z-index:1; font-family:'Bagel Fat One'; font-size:clamp(110px,24vw,420px); line-height:.8; text-align:center; color:var(--cream); letter-spacing:-.02em; white-space:nowrap; }
.big.pop { animation:pop .7s var(--e); }
@keyframes pop { 0% { transform:translateY(-52%) scale(.7) rotate(-4deg); opacity:0; } 60% { transform:translateY(-52%) scale(1.05); } }
.top .side { position:absolute; left:4vw; bottom:34px; z-index:3; max-width:250px; font-size:15px; line-height:1.45; }
.top .side b { display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:30px; margin-bottom:6px; }
.top .badge { right:4vw; bottom:30px; z-index:3; }
.flavours { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:6px; background:var(--cream); padding:7px; border-radius:50px; border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.flavours button { border:0; background:none; padding:12px 20px; border-radius:40px; font-weight:900; font-size:15px; white-space:nowrap; transition:background .25s, color .25s; }
.flavours button.on { background:var(--ink); color:var(--cream); }

/* ── Home: story beats ── */
.beat { min-height:125vh; display:flex; align-items:center; padding:16vh 4vw; }
.beat .copy { width:min(46%,640px); }
.beat.r .copy { margin-left:auto; }
.beat h2 { margin:22px 0 26px; }
.beat .huge { margin:10px 0 16px -0.04em; }
.ings { list-style:none; margin-top:30px; display:none; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(30px,3.4vw,54px); line-height:1.08; }
html[data-f=cherry] .ings.cherry, html[data-f=lime] .ings.lime, html[data-f=mango] .ings.mango { display:block; }
.ings li { display:flex; align-items:baseline; gap:14px; border-bottom:3px solid var(--ink); padding:8px 0; }
.ings small { font-family:'Nunito'; font-weight:900; font-size:13px; letter-spacing:.1em; margin-left:auto; }

.pinned { height:320vh; }
.pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:3; }
/* sticky makes its own stacking context, so ghost type that must sit behind the canvas gets a separate pin */
.pin.back { z-index:1; } .pin.back + .pin { margin-top:-100vh; margin-top:-100svh; }
.facts .pin > h2 { position:absolute; top:13vh; left:0; right:0; text-align:center; z-index:3; font-size:clamp(40px,5.4vw,90px); }
.facts .num { position:absolute; inset:0; display:grid; place-items:center; font-family:'Bagel Fat One'; font-size:clamp(220px,46vw,760px); line-height:.7; color:var(--bg); opacity:.22; transform:scale(calc(.8 + var(--p) * .5)); }
.sticker { position:absolute; z-index:3; background:var(--cream); border:3px solid var(--ink); border-radius:26px; padding:18px 24px; box-shadow:7px 7px 0 var(--ink); width:clamp(150px,17vw,250px);
  --k:clamp(0, calc((var(--p) - var(--at)) * 9), 1); opacity:var(--k); transform:rotate(var(--r)) scale(calc(.5 + var(--k) * .5)) translateY(calc((1 - var(--k)) * 60px)); }
.sticker b { display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(38px,4.6vw,76px); line-height:.9; }
.sticker span { font-weight:900; font-size:clamp(12px,1vw,15px); line-height:1.3; display:block; margin-top:6px; }
.sticker.s1 { left:9vw; top:30%; background:var(--pop); } .sticker.s2 { right:9vw; top:24%; } .sticker.s3 { left:13vw; bottom:12%; } .sticker.s4 { right:12vw; bottom:16%; background:var(--bg); }

.lineup { height:230vh; }
.lineup h2 { position:absolute; top:12vh; left:0; right:0; text-align:center; z-index:3; }
.trio { position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); z-index:3; display:grid; grid-template-columns:repeat(3,1fr); width:min(1130px,92vw); gap:14px; }
.trio a { text-align:center; background:var(--cream); border:3px solid var(--ink); border-radius:22px; padding:14px 10px; box-shadow:5px 5px 0 var(--ink); transition:transform .3s var(--e), box-shadow .3s, background .3s;
  --k:clamp(0, calc((var(--p) - .12 - var(--n) * .08) * 8), 1); opacity:var(--k); translate:0 calc((1 - var(--k)) * 50px); }
.trio a:hover { transform:translate(-3px,-5px) rotate(-1.5deg); box-shadow:9px 10px 0 var(--ink); background:var(--c); }
.trio b { display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(20px,2.4vw,38px); }
.trio span { font-size:13px; font-weight:900; opacity:.75; }

.cta { min-height:110vh; display:grid; place-items:center; text-align:center; padding:14vh 4vw; overflow:hidden; }
.cta .huge { color:var(--cream); transform:scale(calc(.7 + var(--p) * .45)); }
.cta p { margin:10px auto 34px; }

footer { position:relative; z-index:3; background:var(--ink); color:var(--cream); padding:70px 4vw 34px; }
footer .fbig { font-family:'Bagel Fat One'; font-size:clamp(70px,19vw,330px); line-height:.8; color:var(--bg); letter-spacing:-.03em; text-align:center; transition:color .8s; }
footer .cols { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px 40px; margin-top:50px; font-size:14px; }
footer .cols a { display:block; padding:3px 0; opacity:.8; } footer .cols a:hover { opacity:1; color:var(--bg); }
footer small { opacity:.55; }

/* ── Flavours ── */
.phead { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; padding:18vh 4vw 0; }
.phead h1 { font-size:clamp(64px,13vw,230px); color:var(--cream); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; }
.phead p { margin-top:20px; }
.chapter { min-height:170vh; padding:0 4vw; display:flex; align-items:center; }
.chapter .gname { position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; pointer-events:none; overflow:clip; }
.chapter .gname b { position:sticky; top:30vh; display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(110px,27vw,470px); line-height:.8; color:var(--cream); opacity:.9; white-space:nowrap; text-align:center; transform:translateX(calc((var(--p) - .5) * -30vw)); }
.chapter .copy { width:min(44%,600px); background:var(--cream); border:3px solid var(--ink); border-radius:34px; padding:clamp(24px,3vw,46px); box-shadow:10px 10px 0 var(--ink); }
.chapter.r .copy { margin-left:auto; }
.chapter h2 { font-size:clamp(44px,5.4vw,88px); margin:18px 0; }
.notes { margin:24px 0; border-top:3px solid var(--ink); }
.notes div { display:flex; gap:18px; padding:12px 0; border-bottom:3px solid var(--ink); line-height:1.4; }
.notes dt { flex:0 0 74px; font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding-top:3px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.chips span { border:2.5px solid var(--ink); border-radius:40px; padding:7px 14px; font-weight:900; font-size:13px; }

/* ── Story ── */
.step { min-height:150vh; display:flex; align-items:center; padding:0 4vw; }
.step .copy { width:min(44%,600px); }
.step.r .copy { margin-left:auto; }
.step .no { font-family:'Bagel Fat One'; font-size:clamp(90px,13vw,220px); line-height:.8; color:var(--cream); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; display:block; }
.step h2 { font-size:clamp(44px,5.6vw,96px); margin:12px 0 22px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:90px 4vw; }
.stats div { border:3px solid var(--ink); border-radius:28px; padding:26px; background:var(--cream); box-shadow:7px 7px 0 var(--ink); }
.stats div:nth-child(2n) { transform:rotate(1.5deg); background:var(--pop); } .stats div:nth-child(3) { transform:rotate(-1.5deg); }
.stats b { display:block; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(46px,5.4vw,92px); line-height:1; }
.stats b i { font-style:normal; font-size:.5em; }
.quote { padding:14vh 4vw 60vh; text-align:center; }
.quote blockquote { font-family:'Bagel Fat One'; font-size:clamp(34px,5vw,84px); line-height:1; max-width:16em; margin:0 auto 24px; }

/* ── Shop ── */
.build { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px 4vw 60px; }
.build .copy { width:min(46%,620px); }
.build h1 { font-size:clamp(60px,9vw,150px); color:var(--cream); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; margin:18px 0 20px; }
.adders { display:grid; gap:12px; margin:28px 0 18px; }
.adders button { display:flex; align-items:center; gap:14px; background:var(--cream); border:3px solid var(--ink); border-radius:22px; padding:12px 18px; box-shadow:5px 5px 0 var(--ink); font-weight:900; font-size:18px; text-align:left; transition:transform .15s, box-shadow .15s; }
.adders button:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.adders button:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }
.adders i { width:30px; height:30px; border-radius:50%; background:var(--d); border:2.5px solid var(--ink); flex:none; }
.adders em { margin-left:auto; font-style:normal; font-family:'Bagel Fat One'; font-weight:400; font-size:26px; min-width:1.4em; text-align:right; }
.adders em::before { content:'×'; font-size:.6em; margin-right:3px; }
.tools { display:flex; gap:10px; flex-wrap:wrap; }
.tools button { background:none; border:2.5px solid var(--ink); border-radius:40px; padding:9px 16px; font-weight:900; font-size:14px; transition:background .2s, color .2s; }
.tools button:hover { background:var(--ink); color:var(--cream); }
.sum { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:3px solid var(--ink); }
.sum .n { font-family:'Bagel Fat One'; font-size:56px; line-height:1; } .sum .n small { font-size:.45em; }
.sum .price { font-family:'Bagel Fat One'; font-size:40px; }
.sum button:disabled { opacity:.4; pointer-events:none; }
#packNote { flex-basis:100%; font-size:15px; min-height:22px; }
.finder { min-height:100vh; display:flex; align-items:center; padding:12vh 4vw; }
.finder .copy { width:min(48%,640px); margin-left:auto; }
.finder form { display:flex; border:3px solid var(--ink); border-radius:50px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); background:#fff; margin-top:30px; }
.finder input { flex:1; border:0; padding:20px 26px; font:inherit; font-size:18px; outline:0; min-width:0; color:var(--ink); }
.finder form button { border:0; background:var(--ink); color:var(--cream); padding:0 28px; font-weight:900; }
.result { margin-top:18px; font-size:18px; font-weight:900; min-height:26px; }
.faq { padding:12vh 4vw 16vh; }
.faq .copy { width:min(52%,700px); }
.faq details { border-bottom:3px solid var(--ink); }
.faq details:first-of-type { border-top:3px solid var(--ink); margin-top:34px; }
.faq summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:22px 0; font-family:'Bagel Fat One'; font-weight:400; font-size:clamp(22px,2.4vw,36px); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; transition:transform .3s var(--e); } .faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 0 24px; line-height:1.55; max-width:34em; }

@media (max-width:860px) {
  .nav { padding:14px 4vw; gap:12px; } .nav nav, .nav .pill { display:none; } .burger { display:block; }
  .logo { font-size:30px; }
  .top .side { display:none; } .top .badge { bottom:auto; top:84px; right:4vw; }
  .flavours { bottom:26px; } .flavours button { padding:11px 13px; font-size:13px; }
  .beat, .step { align-items:flex-start; padding:12vh 5vw 66vh; min-height:130vh; }
  .beat .copy, .beat.r .copy, .step .copy, .step.r .copy { width:100%; margin:0; }
  .sticker { padding:12px 14px; border-radius:18px; box-shadow:4px 4px 0 var(--ink); width:40vw; }
  .sticker.s1 { left:4vw; top:21%; } .sticker.s2 { right:4vw; top:24%; } .sticker.s3 { left:4vw; bottom:9%; } .sticker.s4 { right:4vw; bottom:12%; }
  .facts .pin > h2 { top:11vh; }
  .trio { gap:6px; bottom:9vh; } .trio a { padding:10px 4px; border-radius:16px; box-shadow:3px 3px 0 var(--ink); } .trio span { display:none; }
  .lineup h2 { top:13vh; padding:0 4vw; }
  .chapter { align-items:flex-start; padding:12vh 5vw 70vh; min-height:175vh; }
  .chapter .copy, .chapter.r .copy { width:100%; margin:0; box-shadow:6px 6px 0 var(--ink); }
  .chapter .gname b { top:58vh; }
  .stats { grid-template-columns:1fr 1fr; gap:12px; padding:60px 5vw; } .stats div { padding:18px; }
  .build { align-items:flex-end; padding:0 5vw 22px; } .build .copy, .finder .copy, .faq .copy { width:100%; }
  .build .lede, .build .kicker { display:none; } .build h1 { font-size:46px; margin:0 0 12px; -webkit-text-stroke-width:2px; }
  .adders { grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 12px; }
  .adders button { flex-direction:column; align-items:flex-start; gap:6px; padding:10px; font-size:14px; line-height:1.15; border-radius:16px; box-shadow:3px 3px 0 var(--ink); position:relative; }
  .adders em { position:absolute; top:8px; right:10px; font-size:20px; }
  .sum { margin-top:14px; padding-top:12px; gap:8px 16px; } .sum .n { font-size:40px; } .sum .price { font-size:28px; } #packNote { font-size:13px; }
  .finder { align-items:flex-start; padding:8vh 5vw 60vh; min-height:0; }
  .faq { padding:6vh 5vw 12vh; }
  footer .cols { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .ticker div, .badge, .curtain-in b { animation:none; } .curtain, .menu { transition:none; } }