/* Fruzo Coffee — the stylesheet.
   One typeface, six drink colours, no photographs. Colour and scale carry
   the page; the liquid carries the identity.

   Motion fails open: everything below renders visible. Only `html.anim`
   (added by the inline head script when motion is allowed) hides elements
   before their reveal. */

/* ── Poppins, self-hosted ───────────────────────────────────── */
/* Latin subset, the files Google Fonts serves (v24). Local, so the wordmark's
   800 can be preloaded instead of waiting on two extra origins. OFL: assets/fonts/OFL.txt */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin.woff2) format('woff2'); }

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --ink:      #0E0B08;
  --ink-2:    #17110E;
  --ink-3:    #241B16;
  --cream:    #F5EFE6;
  --muted:    #B9A992;
  --gold:     #C8A14A;
  --gold-lit: #DEC08A;
  --night:    #070A14;
  --neon:     #5E93FF;
  --neon-hot: #D8E6FF;

  --espresso:   #6B3A1E;
  --orange:     #F5821F;
  --matcha:     #7FA650;
  --strawberry: #E8628C;
  --caramel:    #C98A3C;
  --blueberry:  #5B6BB5;
  --tiramisu:   #C8A77E;
  --darkchoc:   #4A2B1B;
  --mango:      #F7B928;
  --berry:      #E25A7C;
  --bluefruz:   #3A9BF4;
  --pistachio:  #A9BE6E;
  --kajukatli:  #E0A33E;
  --matchalatte: #3E6B3F;

  --line:      rgba(245, 239, 230, 0.14);
  --line-soft: rgba(245, 239, 230, 0.08);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter:   clamp(20px, 5vw, 80px);
  --header-h: 76px;
  --btn-h:    48px;
  --section:  clamp(80px, 12vh, 160px);   /* one rhythm: every section pads top and bottom by this */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  --ground: var(--ink);
  --hfg:    var(--cream);   /* header foreground, follows the section under it */
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font: 400 15.5px/1.6 var(--font);
  letter-spacing: -0.005em;
  color: var(--cream);
  background: var(--ground);
  transition: background-color 1.1s var(--ease-io);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Shared voices ──────────────────────────────────────────── */
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}
.h2 {
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}
.lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--muted); max-width: 44ch; }

/* Buttons. Hover scales *down*; the press is the feedback. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap;
  background: var(--gold); color: var(--ink);
  transition: transform 120ms var(--ease-out), background-color 160ms, color 160ms;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: scale(0.975); background: var(--gold-lit); }
.btn:active { transform: scale(0.95); }
.btn--ghost {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--ink-3); }

/* Text link with a rule that draws itself */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; padding: 12px 0; margin: -12px 0;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 6px; height: 1.5px; width: 100%;
  background: currentColor; transform-origin: left; transform: scaleX(0.28);
  transition: transform 420ms var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink svg { width: 16px; height: 16px; transition: transform 320ms var(--ease-out); }
.tlink:hover svg { transform: translateX(3px); }

/* Live status chip */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 14px 0 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  background: color-mix(in srgb, currentColor 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
.chip i {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: #4CD47B; flex: none;
}
.chip i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid #4CD47B; opacity: 0;
}
.anim .chip.is-open i::after { animation: ping 2.6s var(--ease-out) infinite; }
.chip.is-soon i { background: var(--gold); }
.chip.is-soon i::after { border-color: var(--gold); }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* ── Grain ──────────────────────────────────────────────────── */
/* Grey noise blended with overlay, so it textures light slabs (orange, mango) as well as dark ones.
   Oversized by 120px so the film-flicker jitter never shows an edge. */
.grain {
  position: fixed; inset: -120px; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.32;
}
.anim .grain { animation: grain 0.9s steps(1) infinite; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(-48px, 26px); }
  28%  { transform: translate(34px, -62px); }
  42%  { transform: translate(-76px, -18px); }
  57%  { transform: translate(58px, 44px); }
  71%  { transform: translate(-22px, 80px); }
  85%  { transform: translate(84px, -36px); }
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--hfg);
  transition: color 400ms var(--ease-io), transform 500ms var(--ease-out);
}
/* A frosted band, fading out downwards, so whatever scrolls under the
   header softens instead of colliding with it. On a slab it is invisible. */
.header::before {
  content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.logo { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 44px; }
.logo .badge { width: 42px; height: 42px; --badge-disc: var(--ink); --badge-ring: var(--gold); --badge-mark: var(--gold); }
.logo .word { font-size: 14px; font-weight: 600; letter-spacing: 0.22em; padding-left: 2px; }
.logo .word small { display: block; font-size: 8.5px; letter-spacing: 0.3em; font-weight: 400; opacity: 0.7; }
.nav {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.nav a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  transition: background-color 160ms;
}
.nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.header-cta { justify-self: end; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--header-h) + 44px) var(--gutter) 44px;
  overflow: hidden;
}
.hero-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.hero-top .label { color: var(--cream); }
.hero-top .sep { width: 22px; height: 1px; background: var(--line); }

.wm-wrap { position: relative; align-self: center; padding: 4vh 0 3vh; }
.wm-box { position: relative; }
.wm { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.wm-box { touch-action: pan-y; }
/* The WebGL liquid. Sits under the SVG outline, clipped to the same letters.
   Hidden until the sim is running; the SVG liquid carries the page until then. */
.wm-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.gl .wm-gl { display: block; }
.gl .wm-liquid { display: none; }
.gl .wm-glow { display: none; }
.wm-t {
  font-family: var(--font); font-weight: 800; font-size: 290px;
  letter-spacing: 0.02em;
  /* SVG text hit-tests on its whole character cell, which hangs ~30px below .wm-box and
     covered the hero buttons on short windows. The box still takes the pointer. */
  pointer-events: none;
}
.wm-glass {
  fill: rgba(245, 239, 230, 0.035);
  stroke: rgba(245, 239, 230, 0.3);
  stroke-width: 2; stroke-linejoin: round; paint-order: stroke;
}
.wm-liquid { color: #A05C2C; }
.wm-liquid, .wm-glow { animation: liq 48s ease-in-out infinite 7s; }
.wave-b { fill: color-mix(in srgb, currentColor 78%, black); }
.wave-a { fill: currentColor; }
.wm-shade { fill: url(#wm-shade); }
.wm-crema { fill: rgba(255, 246, 232, 0.3); }
.wm-beans { opacity: 0.72; }
.gl .wm-beans { display: none; }
.wm-heap { opacity: 0.9; }
.gl .wm-heap { display: none; }
/* The cursor over the wordmark: a gold ring on a spring (Motion), the arrow hidden. */
.cur {
  position: fixed; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--gold); pointer-events: none; z-index: 60; opacity: 0;
  transition: opacity 220ms; will-change: transform;
}
.cur i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold); }
.cur.on { opacity: 1; }
@media (pointer: fine) { .cur-on .wm-box { cursor: none; } }
.wm-glow {
  position: absolute; left: 50%; top: 58%; width: 80%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, currentColor, transparent 70%);
  opacity: 0; filter: blur(30px); pointer-events: none; z-index: -1;
  transition: opacity 2.2s ease 1.1s;
}
.poured .wm-glow { opacity: 0.32; }

.hero-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px 48px; }
.tagline {
  font-size: clamp(28px, 3.9vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
.tagline b { font-weight: 600; }
.hero-lead { color: var(--muted); font-size: 15.5px; margin-top: 14px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

@keyframes liq {
  0%, 12%   { color: #A05C2C; }
  18%, 26%  { color: var(--orange); }
  32%, 40%  { color: var(--matcha); }
  46%, 54%  { color: var(--strawberry); }
  60%, 68%  { color: var(--caramel); }
  74%, 82%  { color: var(--blueberry); }
  88%, 100% { color: #A05C2C; }
}
@keyframes wave-a { to { transform: translateX(-250px); } }
@keyframes wave-b { to { transform: translateX(-180px); } }
.anim .wave-a-g { animation: wave-a 6.5s linear infinite; }
.anim .wave-b-g { animation: wave-b 10s linear infinite reverse; }

/* The load sequence. Outline draws, then the pour, then the words. */
.anim .wm-glass { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.anim.fonts .wm-glass { animation: draw 1.6s var(--ease-io) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.anim .wm-liquid { transform: translateY(250px); transition: transform 2.6s cubic-bezier(0.2, 0.9, 0.25, 1); }
.anim.poured .wm-liquid { transform: none; }
.anim .wm { opacity: 0; transition: opacity 400ms; }
.anim.fonts .wm { opacity: 1; }

/* ── Reveals (used everywhere below the hero) ───────────────── */
.anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0s); }
.anim [data-reveal].in { opacity: 1; transform: none; }
/* Line mask: the text rises out of an overflow-hidden box, settling 3° */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask > span { display: block; }
.anim .mask > span { transform: translateY(112%) rotate(3deg); transform-origin: left bottom; transition: transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.anim .in .mask > span, .anim .mask.in > span { transform: none; }

/* ── Statement ──────────────────────────────────────────────── */
.statement {
  position: relative; padding: var(--section) var(--gutter);
  max-width: 1320px;
}
.statement .label { color: var(--gold); margin-bottom: 28px; }
.statement .line {
  font-size: clamp(30px, 4.8vw, 78px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.02;
  text-wrap: balance;
}
.statement .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.08em 0; margin-right: 0.18em; margin-bottom: -0.08em; }
.statement .w > span { display: inline-block; }
.anim .statement .w > span { transform: translateY(110%) rotate(3deg); transform-origin: left bottom; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 32ms); }
.anim .statement.in .w > span { transform: none; }
.statement .branch { position: absolute; right: var(--gutter); top: 50%; width: clamp(120px, 16vw, 240px); color: var(--gold); opacity: 0.16; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }

/* ── Signature slabs ────────────────────────────────────────── */
.sigs { position: relative; }
.slab {
  position: sticky; top: 0; scroll-margin-top: 0;
  height: 100svh; overflow: hidden;
  background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  padding: calc(var(--header-h) + 12px) var(--gutter) 40px;
  transform: scale(calc(1 - var(--cov, 0) * 0.06));
  transform-origin: 50% 40%;
  /* --cov changes every scroll frame. On their own layers, the recede, the darkening and the cup's
     lift are GPU work; painted into the slab, the whole screen (drink photo included) was
     repainted and the photo re-decoded at each new scale. */
  will-change: transform;
}
.slab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 72% 52%, rgba(255, 255, 255, 0.22), transparent 70%);
}
.slab::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: calc(var(--cov, 0) * 0.55);
  will-change: opacity;
}
.slab[data-fg="cream"]::before { background: radial-gradient(ellipse 40% 60% at 72% 52%, rgba(255, 255, 255, 0.1), transparent 70%); }

.slab-copy { position: relative; z-index: 1; display: grid; gap: 22px; align-content: center; }
.slab-eyebrow { display: flex; align-items: center; gap: 12px; opacity: 0.85; }
.slab-eyebrow .tag { padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.slab-name {
  font-size: clamp(44px, 7.8vw, 118px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9;
}
.slab-blurb { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; max-width: 36ch; opacity: 0.86; }
.slab-cta { margin-top: 6px; }
.slab-cup {
  position: relative; z-index: 1; justify-self: center;
  width: min(36vw, 34svh, 360px); aspect-ratio: 220 / 400;
  transform: translateY(calc(var(--cov, 0) * -40px));
  will-change: transform;
}
.slab-cup svg { width: 100%; height: 100%; overflow: visible; }

/* Flavour chips on the peak */
.flavours { display: flex; flex-wrap: wrap; gap: 8px; }
.flavours li {
  height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--cream); background: var(--c);
}
.flavours li i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.slab.peak .slab-name { font-size: clamp(50px, 9vw, 140px); }
.hold { height: 55vh; }
.sigs-tail { height: 60vh; }

/* ── The cup, rendered (Blender). Same box as the SVG cup; rises and settles on reveal. ── */
/* Renders are cropped tight (1100×1500), so the box is the drink: ~70% of the slab's height.
   Doubled class so the short-window rule for the SVG cup doesn't shrink it. */
.slab-cup.slab-cup--render { aspect-ratio: 1100 / 1500; width: min(100%, 52svh, 520px); }
.cup-render { display: block; width: 100%; height: 100%; object-fit: contain; transform: translateY(10%) scale(0.96); opacity: 0; transition: transform 1.4s var(--ease-out) 150ms, opacity 800ms ease 150ms; will-change: transform; }
.slab.in .cup-render, .in .cup-render { transform: none; opacity: 1; }
/* Idle float once the cup has risen in. It runs on `translate`, separate from the reveal's
   `transform`, so the two never fight. The contact shadow underneath tightens and fades as the cup
   lifts. --shadow-y is where the drink's base sits in its frame (the cake slice sits higher). */
.slab-cup--render { --shadow-y: 97%; }
.slab[data-accent="pistachio"] .slab-cup--render { --shadow-y: 72%; }
.slab-cup--render::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 18%; right: 18%; top: var(--shadow-y); height: 7%; translate: 0 -50%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.12) 60%, transparent);
  opacity: 0; transition: opacity 1s ease 900ms;
}
.slab.in .slab-cup--render::after { opacity: 1; }
.anim .slab.in .cup-render { animation: cup-float 6s ease-in-out 1.6s infinite; }
.anim .slab.in .slab-cup--render::after { animation: cup-shadow 6s ease-in-out 1.6s infinite; }
@keyframes cup-float { 50% { translate: 0 -12px; } }
@keyframes cup-shadow { 50% { scale: 0.82; opacity: 0.6; } }
/* Light sweep: a diagonal band masked to the cup's own silhouette (the same webp as the mask), so
   it only ever lands on the drink. Plays once as the cup settles, again on hover. It floats with
   the cup (same animation, same delay) so the band stays glued to the plastic. */
.cup-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  /* mask-image is inline (build.mjs): a url() carried in a custom property resolves against this
     stylesheet's folder, not the page. */
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.cup-shine::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  /* 300% wide, band at its middle: background-position 100% puts the band off the left edge, 0% off
     the right, so 100% -> 0% sweeps it across left to right. */
  background: linear-gradient(110deg, transparent 44%, rgba(255, 255, 255, 0.12) 47.5%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.12) 52.5%, transparent 56%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
}
.anim .slab.in .cup-shine { animation: cup-float 6s ease-in-out 1.6s infinite; }
.anim .slab.in .cup-shine::before { animation: cup-sweep 1.5s cubic-bezier(0.4, 0, 0.3, 1) 1.3s 1 both; }
@media (hover: hover) { .anim .slab.in .slab-cup--render:hover .cup-shine::before { animation: cup-sweep-again 1.2s cubic-bezier(0.45, 0, 0.25, 1) 1 both; } }
@keyframes cup-sweep { 0% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0% 0; opacity: 1; } }
@keyframes cup-sweep-again { 0% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0% 0; opacity: 1; } }
/* ── Floating ingredients behind the cup (build.mjs BITS) ──────── */
/* Three independent properties: transform for the pop-in, translate + rotate for the drift.
   Depth 0 is far: small, soft, slow. Above ::before's glow, under the copy, the cup and ::after's darkening. */
.bits { position: absolute; inset: 0; pointer-events: none; }
.bit {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); object-fit: contain;
  translate: -50% -50%; rotate: var(--r);
  opacity: 0; transform: scale(0.3);
  transition: opacity 700ms ease, transform 1.1s cubic-bezier(0.34, 1.5, 0.64, 1);
  transition-delay: calc(500ms + var(--i) * 90ms);
}
.bit--d0 { filter: blur(2.5px); --o: 0.55; --dur: 15s; }
.bit--d1 { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); --o: 0.95; --dur: 11s; }
.bit--d2 { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28)); --o: 1; --dur: 8.5s; }
.slab.in .bit { opacity: var(--o); transform: none; }
.anim .slab.in .bit { animation: bit-drift var(--dur) ease-in-out infinite; animation-delay: calc(var(--i) * -1.9s); }
@keyframes bit-drift {
  0%, 100% { translate: -50% -50%; rotate: var(--r); }
  33% { translate: calc(-50% + 7px) calc(-50% - 16px); rotate: calc(var(--r) + 12deg); }
  66% { translate: calc(-50% - 6px) calc(-50% - 6px); rotate: calc(var(--r) - 8deg); }
}
/* ── The cup (SVG) ──────────────────────────────────────────── */
.cup .liquid { transform: translateY(300px); transition: transform 1.7s cubic-bezier(0.2, 0.9, 0.25, 1) 250ms; }
.slab.in .cup .liquid, .in .cup .liquid { transform: none; }
.anim .cup .wave-c { animation: wave-c 4.8s linear infinite; }
@keyframes wave-c { to { transform: translateX(-80px); } }
.cup .boba { transform: translateY(-330px); }
.slab.in .cup .boba { animation: drop 900ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards; animation-delay: calc(700ms + var(--i) * 48ms); }
@keyframes drop { to { transform: translateY(0); } }
.cup .pop { transform-origin: center; transform: scale(0.2); opacity: 0; }
.slab.in .cup .pop { animation: pop 1.1s var(--ease-out) forwards; animation-delay: calc(1.9s + var(--i) * 140ms); }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
.cup .ice { transform-origin: center; }
.anim .cup .ice { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.cup .bubble { opacity: 0.4; }
.anim .cup .bubble { animation: rise 3.6s linear infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.55; } 85% { opacity: 0.35; } 100% { transform: translateY(-64px); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(2deg); } }

/* ── Menu board ─────────────────────────────────────────────── */
.board { position: relative; padding: var(--section) var(--gutter); }
.board-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.board-head .label { color: var(--gold); margin-bottom: 20px; }
.board-nav { display: none; } /* phone only, see max-width: 600px */
.board-cols { columns: 3; column-gap: clamp(32px, 4vw, 72px); margin-top: 8px; }
.board-col { break-inside: avoid; }
.board-col h3 { display: flex; justify-content: space-between; align-items: baseline; padding: 28px 0 14px; color: var(--muted); }
.board-col h3 span { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); opacity: 0.7; }
.board-col li { border-bottom: 1px solid var(--line-soft); transition: opacity 300ms; }
.board-col li > * { display: flex; align-items: center; gap: 12px; padding: 15px 0; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -0.02em; line-height: 1.25; min-height: 56px; }
.board-col li a { transition: color 200ms, padding-left 300ms var(--ease-out); }
@media (hover: hover) { .board-col li a:hover { color: var(--c); padding-left: 6px; } }
/* Menu peek (site.js #9): the signature's cup, by the pointer. Positioned by JS; the img carries the
   offset so it sits up-right of the cursor and never under it. */
.peek { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; will-change: transform; }
.peek img {
  display: block; width: 170px; height: auto; translate: 22px calc(-100% - 14px);
  opacity: 0; scale: 0.6; transform-origin: 0% 100%;
  transition: opacity 220ms ease, scale 380ms var(--ease-out);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}
.peek.on img { opacity: 1; scale: 1; }
.board-col li .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.board-col li .sig { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) {
  .board-cols:hover li { opacity: 0.42; }
  .board-cols li:hover { opacity: 1; }
}

/* ── Events ─────────────────────────────────────────────────── */
.events { position: relative; padding: var(--section) var(--gutter); background: var(--ink-2); overflow: hidden; }
.events-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.events-head .label { color: var(--gold); margin-bottom: 20px; }
.events-list { margin-top: 64px; border-top: 1px solid var(--line); }
.event { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 24px 40px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.event .kind { color: var(--muted); }
.event h3 { font-size: clamp(26px, 3.2vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.event p { color: var(--muted); max-width: 40ch; }
.events .branch { position: absolute; right: -2vw; bottom: -4vw; width: clamp(220px, 26vw, 400px); color: var(--gold); opacity: 0.09; pointer-events: none; }

.board-more { margin-top: 44px; }
.board-more .btn svg { width: 18px; height: 18px; }

/* ── Menu page (menu/index.html) ───────────────────────────── */
.mp-hero { padding: calc(var(--header-h) + 64px) var(--gutter) 40px; }
.mp-crumbs { display: flex; gap: 10px; color: var(--muted); margin-bottom: 26px; }
.mp-crumbs a { color: var(--gold); }
.mp-crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mp-title { max-width: 14ch; }
.mp-hero-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-top: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.mp-hero-foot .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.mp-nav {
  position: sticky; top: var(--header-h); z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px var(--gutter) 16px;
  background: linear-gradient(to bottom, var(--ground) 80%, transparent);
}
.mp-nav::-webkit-scrollbar { display: none; }
.mp-nav a {
  flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line); transition: background 200ms, color 200ms;
}
.mp-nav a:hover, .mp-nav a:active { background: var(--gold); color: var(--ink); }

.mp-groups { padding: 8px var(--gutter) var(--section); }
.mp-group { scroll-margin-top: calc(var(--header-h) + 72px); padding-top: 48px; }
.mp-group-h {
  display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.035em;
}
.mp-group-h span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* Signature cards: the drink's own colour, its cup leaning out of the card. */
.mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; margin-bottom: 20px; }
.mp-card {
  --tone: var(--ink);
  position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 8px;
  min-height: 280px; padding: 18px 26px 18px 10px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 25% 55%, rgba(255, 255, 255, 0.22), transparent 70%), var(--c);
  color: var(--tone);
}
.mp-card[data-tone="cream"] { --tone: var(--cream); }
.mp-cup { width: 100%; height: 250px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.28)); transition: transform 600ms var(--ease-out); }
div.mp-cup svg { width: 100%; height: 100%; }
@media (hover: hover) { .mp-card:hover .mp-cup { transform: translateY(-8px) rotate(-3deg) scale(1.03); } }
.mp-card-copy { display: grid; gap: 10px; }
.mp-tag { opacity: 0.75; font-size: 11px; }
.mp-card h3 { font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.mp-blurb { font-size: 15px; line-height: 1.45; opacity: 0.86; }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 6px; }
.mp-see { font-size: 14px; opacity: 0.75; text-decoration: underline; text-underline-offset: 4px; }
.mp-see:hover { opacity: 1; }
.mp-price { margin-left: 10px; font-weight: 600; font-size: 0.7em; opacity: 0.8; letter-spacing: 0; }

/* The rest of the board: rows, two columns wide. */
.mp-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); column-gap: clamp(32px, 4vw, 72px); }
.mp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.mp-name { flex: 1 1 auto; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; line-height: 1.25; }
/* Flavours: a coloured dot and quiet text, the board's signature mark, not a row of filled pills. */
.mp-flavours { display: flex; flex-wrap: wrap; gap: 6px 18px; order: 3; flex-basis: 100%; }
.mp-flavours i { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: 13.5px; letter-spacing: 0.01em; color: var(--muted); }
.mp-flavours i::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.28);
}
.mp-order {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
  transition: background 200ms, color 200ms;
}
.mp-order svg { width: 16px; height: 16px; }
.mp-order:hover { background: var(--gold); color: var(--ink); }

.mp-visit { padding: var(--section) var(--gutter); }
.mp-visit .label { color: var(--gold); margin-bottom: 20px; }
.mp-visit-info { display: grid; gap: 14px; margin-top: 32px; color: var(--muted); font-style: normal; }
.mp-visit-info address { font-style: normal; color: var(--cream); font-size: 18px; line-height: 1.5; }
.mp-visit-info .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@media (max-width: 600px) {
  .mp-hero { padding-top: calc(var(--header-h) + 32px); }
  .mp-nav { padding-left: var(--gutter); padding-right: var(--gutter); }
  .mp-card { grid-template-columns: 120px minmax(0, 1fr); min-height: 0; padding: 14px 18px 14px 6px; border-radius: 22px; }
  .mp-cup { height: 170px; }
  .mp-blurb { font-size: 14px; }
  .mp-row { min-height: 56px; }
  .mp-name { font-size: 18px; }
  .mp-order span { display: none; }
  .mp-order { width: 40px; padding: 0; justify-content: center; }
}

/* ── Find us ────────────────────────────────────────────────── */
.find { position: relative; padding: var(--section) var(--gutter); }
.find-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.find-head .label { color: var(--gold); margin-bottom: 20px; }
.outlets { margin-top: 64px; display: grid; gap: 24px; }
.outlet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; padding: clamp(20px, 2.4vw, 28px);
  border-radius: 22px; background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.outlet-info { display: grid; gap: 22px; align-content: start; padding: clamp(4px, 1vw, 12px) 0; }
.outlet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.outlet-head h3 { font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.outlet-info address { font-style: normal; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; max-width: 30ch; }
.outlet-facts { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.outlet-facts > div { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.outlet-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.outlet-facts dd { font-size: 15.5px; }
.outlet-facts dd a { display: inline-block; padding: 10px 0; margin: -10px 0; border-bottom: 1px solid var(--line); }
.outlet-info .row { display: flex; gap: 10px; flex-wrap: wrap; }
.outlet-info .row .btn { flex: 1 1 auto; }
/* The map is a picture that opens Maps. The embed underneath is not for scrolling. */
.outlet-map {
  position: relative; display: block; order: 2; border-radius: 14px; overflow: hidden; min-height: 320px;
  background: var(--ink-3); transform: translateZ(0);
}
.outlet-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none;
  filter: invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.86) contrast(1.05);
}
.outlet-map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 0 80px rgba(14, 11, 8, 0.55);
}
/* Our marker, on our shop. The embed is locked and centred on the coordinates,
   so the centre of the box is the door. Badge above the point, tail on it. */
.pin { position: absolute; left: 50%; top: 50%; z-index: 1; width: 46px; height: 46px; transform: translate(-50%, calc(-100% - 8px)); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.pin .badge { width: 46px; height: 46px; --badge-disc: var(--ink); --badge-ring: var(--gold); --badge-mark: var(--gold); }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -7px 0 0 -6px; background: var(--ink); border: 1.5px solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pin i { position: absolute; left: 50%; top: calc(100% + 8px); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.anim .pin i { animation: ping 2.6s var(--ease-out) infinite; }
.outlet-map-cta {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--cream);
  background: rgba(14, 11, 8, 0.78); box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color 160ms;
}
.outlet-map-cta svg { width: 16px; height: 16px; }
.outlet-map:hover .outlet-map-cta { background: rgba(14, 11, 8, 0.95); }
.outlet--soon { grid-template-columns: 1fr; padding: 28px clamp(24px, 3vw, 40px); }
.outlet--soon .outlet-info { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.outlet--soon h3 { font-size: clamp(28px, 3.4vw, 44px); }
.outlet--soon p { color: var(--muted); }

/* ── Close (the sign, at night) ─────────────────────────────── */
.close {
  position: relative; background: var(--night); color: var(--cream);
  padding: var(--section) var(--gutter) 40px; text-align: center; overflow: hidden;
}
.close::before {
  content: ""; position: absolute; left: 50%; top: 32%; width: 70vw; height: 40vh; pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(94, 147, 255, 0.22), transparent 70%);
  opacity: 0; transition: opacity 2.4s ease 1.2s;
}
.close.lit::before { opacity: 1; }
.neon { position: relative; width: min(92vw, 880px); margin: 0 auto; }
.neon svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 14px rgba(94, 147, 255, 0.7)) drop-shadow(0 0 46px rgba(94, 147, 255, 0.35)); }
.neon text {
  font-family: var(--font); font-weight: 600; font-size: 190px; letter-spacing: 0.16em;
  fill: none; stroke: var(--neon-hot); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round;
}
.neon .sub {
  margin-top: 10px; font-size: clamp(12px, 1.4vw, 16px); letter-spacing: 0.42em; font-weight: 400;
  color: var(--neon-hot); text-shadow: 0 0 8px var(--neon), 0 0 24px rgba(94, 147, 255, 0.6);
}
.anim .neon text { stroke-dasharray: 2800; stroke-dashoffset: 2800; }
.anim .neon .sub { opacity: 0; }
.anim .close.lit .neon text { animation: draw-neon 2.4s var(--ease-io) forwards, flicker 900ms steps(1) 2.3s; }
.anim .close.lit .neon .sub { animation: neon-in 600ms ease 2.7s forwards, flicker 900ms steps(1) 2.3s; }
@keyframes draw-neon { to { stroke-dashoffset: 0; } }
@keyframes neon-in { to { opacity: 1; } }
/* One stutter as the tube warms up. It runs once, the way a real sign would. */
@keyframes flicker { 0% { opacity: 1; } 12% { opacity: 0.22; } 20% { opacity: 0.85; } 30% { opacity: 0.1; } 38% { opacity: 1; } 100% { opacity: 1; } }
.close-tag { margin-top: 56px; font-size: clamp(22px, 2.8vw, 38px); letter-spacing: -0.03em; line-height: 1.1; }
.close-tag b { font-weight: 600; }
.close-line { color: var(--muted); margin-top: 10px; }
.socials { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 36px; }
.socials a {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  background: rgba(245, 239, 230, 0.06); box-shadow: inset 0 0 0 1px rgba(245, 239, 230, 0.1);
  transition: background-color 160ms, transform 120ms var(--ease-out);
}
.socials a:hover { background: rgba(245, 239, 230, 0.11); transform: scale(0.975); }
.socials svg { width: 17px; height: 17px; }
.legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(245, 239, 230, 0.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }

/* ── Mobile dock ────────────────────────────────────────────── */
.dock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40;
  transform: translateX(-50%);
  display: none; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(23, 17, 14, 0.82); color: var(--cream);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 40px rgba(0, 0, 0, 0.45);
}
.dock a { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.dock a.btn { height: 44px; }

/* ── Breakpoints ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .slab { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; --section: clamp(72px, 8vh, 96px); } /* min 72 keeps the dock off the last line */
  .nav { display: none; }
  .header { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .dock { display: flex; }
  body { padding-bottom: 0; }
  .logo .badge { width: 36px; height: 36px; }

  /* Phones: no forced full screen. One tight stack, then the page begins. */
  .hero { min-height: 0; grid-template-rows: auto auto auto; row-gap: 28px; padding-top: calc(var(--header-h) + 20px); padding-bottom: var(--section); }
  .hero-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-foot { grid-template-columns: 1fr; row-gap: 20px; }
  .tagline { font-size: clamp(30px, 9vw, 40px); }
  .hero-lead { margin-top: 8px; text-wrap: pretty; max-width: 30ch; }
  .cta-row { flex-wrap: nowrap; }
  .cta-row .btn { flex: 1 1 0; padding: 0 10px; min-width: 0; font-size: 13.5px; gap: 8px; }
  .cta-row .btn:first-child { flex-grow: 1.4; }
  .cta-row .btn--ghost svg { display: none; }
  .statement .label { margin-bottom: 20px; }
  .board-head { padding-bottom: 24px; }
  .events-list, .outlets { margin-top: 40px; }
  .close-tag { margin-top: 40px; }
  .cta-row { justify-content: flex-start; }
  .wm-wrap { padding: 2vh 0; }

  .slab {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
    align-items: end; row-gap: 12px;
    padding: calc(var(--header-h) + 8px) var(--gutter) var(--section);
  }
  .slab::before { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 255, 255, 0.2), transparent 70%); }
  /* The cup takes whatever height the copy leaves it, never more. */
  .slab-cup { order: -1; align-self: center; justify-self: center; width: auto; height: 100%; max-height: 27svh; max-width: 42vw; aspect-ratio: 220 / 400; }
  .slab-cup.slab-cup--render { max-height: 46svh; max-width: 80vw; aspect-ratio: 1100 / 1500; }
  /* Stacked, the copy fills the lower half: the same six slots move to the cup's flanks, top 55%
     only. !important because the desktop slot rides on the inline style. */
  .bits .bit:nth-child(1) { --x: 85% !important; --y: 12% !important; --s: 58px !important; }
  .bits .bit:nth-child(2) { --x: 93% !important; --y: 31% !important; --s: 30px !important; }
  .bits .bit:nth-child(3) { --x: 8% !important;  --y: 36% !important; --s: 40px !important; }
  .bits .bit:nth-child(4) { --x: 14% !important; --y: 15% !important; --s: 20px !important; }
  .bits .bit:nth-child(5) { --x: 91% !important; --y: 50% !important; --s: 42px !important; }
  .bits .bit:nth-child(6) { --x: 10% !important; --y: 54% !important; --s: 26px !important; }
  .slab-copy { gap: 10px; }
  .slab-name { font-size: clamp(38px, 11vw, 64px); }
  .slab.peak .slab-name { font-size: clamp(40px, 12vw, 70px); }
  .slab-blurb { max-width: none; font-size: 15px; }
  .flavours li { height: 30px; padding: 0 12px; font-size: 12px; }
  .wm-wrap { margin: 0 calc(var(--gutter) * -1 + 8px); padding: 0; }
  .hold { height: 40vh; }
  .sigs-tail { height: 30vh; }

  .board-head, .events-head, .find-head { grid-template-columns: 1fr; row-gap: 20px; }
  .board-cols { columns: 2; column-gap: 32px; }
  .event { grid-template-columns: 1fr; gap: 8px; }
  .outlet { grid-template-columns: 1fr; gap: 20px; padding: 14px 14px 20px; }
  .outlet-info { padding: 0 6px; gap: 18px; }
  .outlet--soon .outlet-info { grid-template-columns: 1fr; }
  .outlet-map { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .outlet-info .row .btn { flex: 1 1 0; }
  .statement .branch { display: none; }
  .legal { justify-content: center; text-align: center; padding-bottom: 72px; margin-top: 40px; }
  .close-line { max-width: 34ch; margin-left: auto; margin-right: auto; }
  .socials { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 32px; border-top: 1px solid rgba(245, 239, 230, 0.1); text-align: left; }
  .socials a {
    height: 54px; padding: 0 4px; border-radius: 0; justify-content: flex-start; gap: 14px;
    background: none; box-shadow: none; border-bottom: 1px solid rgba(245, 239, 230, 0.1); font-size: 15px;
  }
  .socials a::after { content: "→"; margin-left: auto; color: var(--muted); font-weight: 400; }
  .socials a:hover { background: none; transform: none; }
  .socials svg { width: 18px; height: 18px; color: var(--neon-hot); }
}
@media (max-width: 600px) {
  /* The board on a phone: a sticky row of jump links, and each group as its own card.
     The jump row is plain anchors, so it works with no script. */
  .board-nav {
    position: sticky; top: var(--header-h); z-index: 5;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) 14px;
    background: linear-gradient(to bottom, var(--ink) 78%, transparent);
  }
  .board-nav::-webkit-scrollbar { display: none; }
  .board-nav a {
    flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--cream);
    box-shadow: inset 0 0 0 1px var(--line); transition: background 200ms, color 200ms;
  }
  .board-nav a:active { background: var(--gold); color: var(--ink); }
  .board-cols { columns: 1; display: grid; gap: 12px; margin-top: 2px; }
  /* No reveal here: two screens of list would sit blank until 18% of it showed, and anything
     easing in on its own while a thumb drags the page reads as jerky. It just scrolls. */
  .anim .board-cols[data-reveal] { opacity: 1; transform: none; transition: none; }
  .board-col {
    scroll-margin-top: calc(var(--header-h) + 72px);
    padding: 2px 18px 4px; border-radius: 18px;
    background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft);
  }
  .board-col h3 { padding: 18px 0 8px; color: var(--gold); }
  .board-col li:last-child { border-bottom: 0; }
  .board-col li > * { font-size: 17px; padding: 11px 0; min-height: 48px; letter-spacing: -0.01em; }
  /* Plain drinks line up with the signature ones, which carry a dot, in groups that have any. */
  .board-col:has(.dot) li > span { padding-left: 22px; }
  .board-col li .sig { font-size: 10px; letter-spacing: 0.12em; }
}
@media (max-width: 480px) {
  .hero-top .sep { display: none; }
}
@media (max-height: 640px) {
  .slab-cup { width: min(30vw, 30svh); }
}
/* Phones on their side: too short to stack the cup over the copy. */
@media (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .slab {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); grid-template-rows: none;
    align-items: center; column-gap: 24px;
    padding: calc(var(--header-h) + 4px) var(--gutter) 24px;
  }
  .slab-cup { order: 0; align-self: center; width: min(22vw, 32svh); }
  .slab-cup.slab-cup--render { width: min(26vw, 44svh); height: auto; max-height: none; max-width: none; }
  .slab-copy { gap: 8px; }
  .slab-name, .slab.peak .slab-name { font-size: clamp(30px, 7vw, 60px); }
  .slab-blurb { font-size: 14px; }
  .flavours li { height: 28px; font-size: 11.5px; padding: 0 10px; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 16px); padding-bottom: 88px; }
  .wm-wrap { justify-self: center; width: 72vw; margin: 0; padding: 8px 0; }
  .hero-foot { grid-template-columns: 1fr auto; }
  /* Wide enough for the header to carry the order button; the dock would sit on the copy. */
  .dock { display: none; }
  .header { grid-template-columns: 1fr auto; }
  .header-cta { display: inline-flex; }
  .cta-row { justify-content: flex-end; }
  .sigs-tail, .hold { height: 30vh; }
}

/* ── Reduced motion: colour and shadow stay, travel goes ────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim [data-reveal], .anim .mask > span, .anim .statement .w > span, .anim .wm-liquid, .cup .liquid, .cup .boba {
    transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important;
  }
  .anim .wm { opacity: 1; }
  .anim .wm-glass { stroke-dashoffset: 0; animation: none; }
  .wm-liquid, .wm-glow, .wave-a-g, .wave-b-g, .cup .wave-c, .cup .ice, .cup .bubble, .chip i::after { animation: none !important; }
  .wm-glow { opacity: 0.32; }
  .anim .neon text { stroke-dashoffset: 0; animation: none; }
  .anim .neon .sub { opacity: 1; animation: none; }
  .close::before { opacity: 1; }
  .slab { transform: none; }
  .cup .pop { display: none; }
  .grain, .cup-render, .slab-cup--render::after, .bit, .cup-shine, .cup-shine::before { animation: none !important; }
  .bit { transform: none !important; transition: opacity 700ms ease !important; }
}