/* Onboard Bahamas: site styles. The system is written up in DESIGN.md.
   A sun-warmed hospitality book drawn in the Onboard hand. Pearl and almond grounds, the logo's wine
   as the one brand colour and the only dark, drinks colours as passing moments. Illustration imagines
   the product; photography proves it happened. */

@font-face { font-family: "Gloock"; src: url("../assets/fonts/Gloock-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../assets/fonts/SchibstedGrotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/Newsreader-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Yuji Syuku"; src: url("../assets/fonts/YujiSyuku-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ================= Tokens ================= */
:root {
  /* Primitives, sampled from the logo, the hero video, the carts and the cups */
  --pearl: #F6F1E6;         /* the canvas: the hero video's cream, warmed */
  --cream: #FBF8F1;
  --paper: #FFFDF8;         /* printed objects: menus, the boarding pass */
  --almond: #EFE5D3;        /* natural ground: wood, kraft, charcuterie */
  --oat: #E4D6BF;
  --kraft: #C49A6C;
  --oak: #B08958;
  --wine: #8F3939;          /* the logo */
  --wine-700: #742B2E;
  --wine-900: #3B1B22;      /* the only dark: deep wine, never black */
  --wine-950: #2C1B1D;      /* ink: wine-brown, reads as black on pearl */
  --blush: #F0CFC5;         /* drink moments, never permanent brand colours */
  --watermelon: #E0566B;
  --citrus: #F2B544;
  --sage: #A4AF94;
  --champagne: #EBDDBB;

  /* Semantic */
  --canvas: var(--pearl);
  --surface: var(--cream);
  --surface-natural: var(--almond);
  --surface-dark: var(--wine-900);
  --ink: var(--wine-950);
  --ink-muted: #6A5754;             /* 6.2:1 on pearl */
  --ink-on-dark: #F6F1E6;
  --ink-on-dark-muted: #D8C7C1;     /* 8.5:1 on deep wine */
  --brand: var(--wine);
  --line-art: var(--wine);
  --interactive: var(--wine);
  --hover: var(--wine-700);
  --focus: var(--wine);
  --rule: rgb(44 27 29 / 0.13);
  --rule-strong: rgb(44 27 29 / 0.26);
  --rule-on-dark: rgb(246 241 230 / 0.18);

  /* Type */
  --font-display: "Gloock", "Iowan Old Style", Georgia, serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-caption: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-stamp: "Yuji Syuku", Georgia, serif;
  --t-micro: 0.78rem;
  --t-body: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --t-lede: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --t-h3: clamp(1.6rem, 1.15rem + 1.5vw, 2.6rem);
  --t-h2: clamp(2.6rem, 1rem + 5vw, 6.5rem);
  --t-display: clamp(3rem, 1rem + 7vw, 9rem);

  /* Space, motion, layers */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3.25rem);
  --col-gap: clamp(0.75rem, 1.6vw, 2rem);
  --section: clamp(5.5rem, 3rem + 9vw, 11rem);
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-slosh: cubic-bezier(0.65, 0, 0.35, 1);
  --t-quick: 160ms;
  --t-ui: 280ms;
  --z-art: 2; --z-copy: 3; --z-overlay: 6; --z-mark: 7; --z-nav: 50; --z-sheet: 70;

  --grain: url("../assets/img/grain.webp");
  /* The pour line, as a ground under every drawing after the opening */
  --ground-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 180 7, 360 19, 600 12 S 1000 6, 1198 15' fill='none' stroke='%238F3939' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C60 88 180 88 240 100 S420 112 480 100 V300 H0Z'/%3E%3C/svg%3E");
  --surface-h: calc(100vw * 60 / 1440);
  color-scheme: light;
  accent-color: var(--wine);
  scrollbar-color: rgb(143 57 57 / 0.35) var(--canvas);
}

/* ================= Base and browser surfaces ================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--canvas) var(--grain); color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; caret-color: var(--wine);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; margin: 0; color: var(--ink); letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
img { max-width: 100%; }
figure { margin: 0; }
::selection { background: var(--wine); color: var(--pearl); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -3rem; z-index: 90; background: var(--wine); color: var(--pearl); padding: 0.6rem 1rem; }
.skip-link:focus { top: 0.75rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[data-tone="dark"] :focus-visible, .sheet :focus-visible, .pass__stub :focus-visible { outline-color: var(--champagne); }
[tabindex="-1"]:focus { outline: none; }
section[id] { scroll-margin-top: 4.5rem; }
.section-inner { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.section-lede { margin-top: 1rem; font-size: var(--t-lede); max-width: 32em; color: var(--ink-muted); }
/* The annotation voice: a book's italic caption. */
.note, figcaption, .chapter-note { font-family: var(--font-caption); font-style: italic; font-size: 1.08rem; line-height: 1.35; color: var(--ink-muted); }
.chapter-note { font-size: 1.12rem; }

/* ================= Buttons and links ================= */
.ticket-btn {
  --notch: 7px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.85rem 1.8rem;
  background: var(--interactive); color: var(--pearl);
  font: 600 0.98rem var(--font-body); letter-spacing: 0.01em; text-decoration: none;
  border: 0; border-radius: 3px; cursor: pointer;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  transition: transform var(--t-quick) var(--ease-out), color var(--t-ui) ease;
  -webkit-tap-highlight-color: transparent;
}
/* The button fills like a glass */
.ticket-btn::before {
  content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -16px; bottom: 0;
  background: var(--btn-fill, var(--hover)); border-radius: 50% 50% 0 0 / 16px 16px 0 0;
  transform: translateY(calc(100% + 2px)); transition: transform 440ms var(--ease-out);
}
.ticket-btn:hover::before, .ticket-btn:focus-visible::before { transform: translateY(0); }
.ticket-btn:active { transform: translateY(1px) scale(0.985); }
.ticket-btn--small { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.9rem; --notch: 5px; }
.ticket-btn--light { background: var(--pearl); color: var(--wine-900); --btn-fill: var(--champagne); }
.text-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 0.98rem var(--font-body); color: var(--interactive);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em;
  transition: text-decoration-thickness var(--t-quick) ease, color var(--t-quick) ease;
}
.text-link:hover { text-decoration-thickness: 2px; color: var(--hover); }
.text-link--light { color: var(--ink-on-dark); }

/* ================= Navigation ================= */
.nav {
  --nav-bg: var(--canvas);
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem);
  padding: 0.9rem var(--gutter); padding-top: max(0.9rem, env(safe-area-inset-top));
  color: var(--ink);
  transition: color var(--t-ui) ease, transform 500ms var(--ease-out), opacity 600ms ease;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in srgb, var(--nav-bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  transition: opacity var(--t-ui) ease, background-color var(--t-ui) ease;
}
/* Phones: an opaque bar costs nothing to repaint while the drawings scroll under it */
@media (pointer: coarse) { .nav::before { background: var(--nav-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.nav.is-scrolled::before { opacity: 1; }
.nav.is-dark { --nav-bg: var(--surface-dark); color: var(--ink-on-dark); }
.nav.is-away { transform: translateY(-110%); }
.nav__brand { display: inline-flex; margin-right: auto; color: var(--wine); transition: color var(--t-ui) ease, opacity 200ms ease; }
.nav.is-dark .nav__brand { color: var(--pearl); }
.nav__logo { width: 100px; height: auto; fill: currentColor; }
.nav__links { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__links a { position: relative; text-decoration: none; font-weight: 500; font-size: 0.92rem; padding: 0.4rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-ui) var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after, .nav__links a[aria-current="location"]::after { transform: scaleX(1); transform-origin: left; }
.nav.is-dark .nav__cta { background: var(--pearl); color: var(--wine-900); --btn-fill: var(--champagne); }
.nav__menu { display: none; align-items: center; min-height: 44px; padding: 0 0.2rem; border: 0; background: transparent; color: inherit; font: 600 0.93rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
}
/* The whole navigation waits for the opening to finish. */
html.js[data-hero="intro"] .nav, html.js[data-hero="resolve"] .nav { opacity: 0; pointer-events: none; }
html.js[data-hero="line"] .nav__brand { opacity: 0; }

/* Fullscreen menu: pours down from the top */
.sheet {
  position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(5rem + env(safe-area-inset-top)) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--surface-dark) var(--grain); color: var(--ink-on-dark);
  clip-path: inset(0 0 100% 0); transition: clip-path 620ms var(--ease-slosh);
}
.sheet.is-open { clip-path: inset(0 0 0 0); }
.sheet__links { display: grid; gap: 0.1rem; }
.sheet__links a { display: block; overflow: hidden; font-family: var(--font-display); font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1.06; letter-spacing: -0.02em; text-decoration: none; }
.sheet__links span { display: inline-block; transform: translateY(105%); transition: transform 700ms var(--ease-out); }
.sheet.is-open .sheet__links span { transform: none; }
.sheet.is-open .sheet__links a:nth-child(2) span { transition-delay: 60ms; }
.sheet.is-open .sheet__links a:nth-child(3) span { transition-delay: 120ms; }
.sheet.is-open .sheet__links a:nth-child(4) span { transition-delay: 180ms; }
.sheet.is-open .sheet__links a:nth-child(5) span { transition-delay: 240ms; color: var(--champagne); }
.sheet__contact { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; gap: 0.5rem; font-weight: 600; border-top: 1px solid var(--rule-on-dark); }
.sheet__logo { display: block; width: 100%; height: auto; color: var(--pearl); opacity: 0; transform: translateY(20px); transition: opacity 600ms ease 300ms, transform 800ms var(--ease-out) 300ms; }
.sheet.is-open .sheet__logo { opacity: 1; transform: none; }
.sheet__close { position: absolute; top: max(0.9rem, env(safe-area-inset-top)); right: var(--gutter); min-height: 44px; padding: 0 0.2rem; border: 0; background: transparent; color: var(--ink-on-dark); font: 600 0.93rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 0.35em; }

/* ================= Line art shared by every drawing ================= */
.cart, .made-cart, .studio-cart, .cat-art__draw, .ride-cart { color: var(--line-art); }
.cart > svg, .made-cart > svg, .studio-cart > svg, .cat-art__draw > svg, .ride-cart > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cart .part path, .made-cart .part path, .studio-cart .part path, .cat-art__draw .part path, .ride-cart .part path { fill: currentColor; }
.cart .brand-line, .made-cart .brand-line, .studio-cart .brand-line { fill: currentColor; opacity: 0.55; }
/* Drawn detail added to the traced line art: frosted tank glass, the drinks, a warm body, a soft shadow */
.art-glass { fill: rgb(255 255 255 / 0.55); }
.art-body { fill: var(--cream); }
.art-shadow { fill: url(#art-shadow-grad); }
.liquid rect { fill: var(--c, var(--blush)); }
.liquid .liquid__shine { fill: url(#art-shine-grad); pointer-events: none; }
.sketch path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ================= 0. The opening ================= */
.opening { position: relative; height: 100svh; background: var(--canvas) var(--grain); }
.opening__stage {
  --ground: 88svh; --art-h: min(72svh, 700px); --art-x: 67%;
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.opening__intro { position: absolute; inset: 0; z-index: 5; background: #F4F2E5; display: none; }
html.js .opening__intro { display: block; }
.opening__video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #F4F2E5;
  -webkit-mask: linear-gradient(to right, #0000, #000 8%, #000 92%, #0000), linear-gradient(to bottom, #0000, #000 8%, #000 92%, #0000);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(to right, #0000, #000 8%, #000 92%, #0000), linear-gradient(to bottom, #0000, #000 8%, #000 92%, #0000);
          mask-composite: intersect;
}
.hero__mark { position: absolute; z-index: var(--z-mark); left: 0; top: 0; width: min(58vw, 760px); margin: 0; color: var(--wine); pointer-events: none; transform-origin: 0 0; opacity: 0; }
.hero__logo { display: block; width: 100%; height: auto; overflow: visible; }
.opening__line { position: absolute; inset: 0; z-index: var(--z-overlay); width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.opening__line path { fill: none; stroke: var(--line-art); stroke-width: 2.4; stroke-linecap: round; }
.opening__ground { position: absolute; left: 0; right: 0; top: var(--ground); z-index: 1; height: 18px; transform: translateY(-50%); }
.opening__ground svg { display: block; width: 100%; height: 100%; }
.opening__ground path { fill: none; stroke: var(--line-art); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html.js:not([data-hero="done"]) .opening__ground { opacity: 0; }
.opening__art { position: absolute; z-index: var(--z-art); left: var(--art-x); top: calc(var(--ground) - var(--art-h)); height: var(--art-h); aspect-ratio: 1070 / 1719; transform: translateX(-50%); }
.opening__art .cart { width: 100%; height: 100%; }
html.js:not([data-hero="done"]):not([data-hero="line"]) .opening__art { visibility: hidden; }

.opening__hero {
  position: absolute; z-index: var(--z-copy); left: var(--gutter); top: 0; height: var(--ground);
  width: min(44vw, 38rem); padding: calc(6.5rem + env(safe-area-inset-top)) 0 clamp(2.5rem, 7svh, 4.5rem);
  display: flex; flex-direction: column;
}
.opening__hero { justify-content: space-between; }
.hero__note { max-width: 24em; font-family: var(--font-caption); font-style: italic; font-size: 1.1rem; line-height: 1.35; color: var(--ink-muted); }
.hero__headline { font-family: var(--font-display); font-size: clamp(3.2rem, 0.4rem + 6.6vw, 8.6rem); line-height: 0.88; letter-spacing: -0.035em; color: var(--ink); }
.hero__headline .line { display: block; overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.hero__headline .line > span { display: inline-block; }
.hero__foot { margin-top: clamp(1.25rem, 3svh, 2rem); display: grid; gap: 1.2rem; justify-items: start; }
.hero__lede { max-width: 30em; color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.opening__title { font-size: clamp(3rem, 1.2rem + 4.6vw, 6.8rem); line-height: 0.9; letter-spacing: -0.03em; }
.opening__type { font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
.opening__text { max-width: 30em; }
.hero__skip { position: absolute; z-index: 8; right: var(--gutter); bottom: calc(1.25rem + env(safe-area-inset-bottom)); min-height: 44px; background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer; font: 500 0.88rem var(--font-body); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 0.3em; }

/* Choreography states on <html>: intro → resolve → line → done (opening.js) */
html.js:not([data-hero="done"]) .opening__hero .hero-in { opacity: 0; transform: translateY(0.6em); }
html.js:not([data-hero="done"]) .hero__headline .hero-in { opacity: 1; transform: translateY(105%); }
html.js[data-hero="done"] .hero-in { transition: transform 1000ms var(--ease-out) calc(var(--i) * 80ms), opacity 700ms ease calc(var(--i) * 80ms); }

/* Past flavours: a set list with hairlines */
.flavours { border: 0; padding: 0; margin: 0.4rem 0 0; min-width: 0; }
.flavours legend { padding: 0; margin-bottom: 0.4rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.flavours__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--rule); }
.flavours label { position: relative; cursor: pointer; border-bottom: 1px solid var(--rule); }
.flavours input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.flavours span { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; font-size: 0.93rem; line-height: 1.25; transition: color var(--t-quick) ease; }
.flavours span::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 1px rgb(44 27 29 / 0.2); transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) ease; }
.flavours label:hover span { color: var(--interactive); }
.flavours label:hover span::before { transform: scale(1.25); }
.flavours input:checked + span { color: var(--interactive); font-weight: 600; }
.flavours input:checked + span::before { transform: scale(1.3); box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--interactive); }
.flavours input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 900px) {
  .opening { height: 100svh; }
  .opening__stage { --ground: 93svh; --art-h: 41svh; --art-x: 50%; }
  .opening__hero {
    left: var(--gutter); right: var(--gutter); width: auto;
    height: calc(var(--ground) - var(--art-h) - 0.5rem);
    padding: calc(4.6rem + env(safe-area-inset-top)) 0 0.75rem;
  }
  .opening__hero { justify-content: flex-start; gap: 0.9rem; }
  .hero__note { font-size: 0.98rem; }
  .hero__headline { font-size: clamp(2.7rem, 11.4vw, 4.6rem); }
  .hero__foot { margin-top: 0.4rem; gap: 0.9rem; }
  .hero__lede { font-size: 0.97rem; }
  .opening__title { font-size: clamp(2.4rem, 1.2rem + 5vw, 3.4rem); }
  .opening__type { font-size: 1rem; }
  .opening__text { font-size: 0.93rem; line-height: 1.5; }
  .flavours span { min-height: 38px; font-size: 0.86rem; }
  .chapter-note { display: none; }
}
@media (max-width: 900px) and (max-height: 720px) {
  /* Short phones: a smaller drawing, so the line saying what Onboard does still fits */
  .opening__stage { --art-h: 27svh; }
  .hero__lede { font-size: 0.9rem; line-height: 1.35; }
  .opening__text { display: none; }
}

/* ================= 1. Poured for ================= */
.credits {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 6vw, 6rem);
  width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.credits__title { font-family: var(--font-caption); font-style: italic; font-size: 1.12rem; letter-spacing: 0; color: var(--ink-muted); white-space: nowrap; }
.credits__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem clamp(2rem, 4vw, 3.5rem); }
.credits__item { display: block; line-height: 0; }
.credits__item img { display: block; width: auto; height: var(--h, 36px); filter: grayscale(1) sepia(0.45) hue-rotate(-18deg) saturate(1.1) contrast(1.05); mix-blend-mode: multiply; opacity: 0.62; transition: opacity var(--t-ui) ease, filter var(--t-ui) ease; }
a.credits__item:hover img, a.credits__item:focus-visible img { opacity: 1; filter: none; }
/* A client without a usable logo, set in type at the same visual weight as the marks around it */
.credits__name { display: block; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.02; letter-spacing: 0.005em; text-align: center; color: var(--ink-muted); opacity: 0.7; }
a.credits__item:hover .credits__name { opacity: 1; }
@media (max-width: 760px) {
  .credits { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; justify-items: center; text-align: center; }
  /* Five marks as three over two, never four and an orphan */
  .credits__logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: center; gap: 1.6rem 0.75rem; width: 100%; }
  .credits__logos > li { grid-column: span 2; }
  /* five marks: the last two share the second row; six: three and three */
  .credits__logos > li:nth-child(4):nth-last-child(2), .credits__logos > li:nth-child(5):last-child { grid-column: span 3; }
  .credits__item img { height: calc(var(--h, 36px) * 0.78); }
}

/* ================= 2. Statement ================= */
.statement { padding: clamp(2rem, 5vw, 5rem) var(--gutter) var(--section); }
.statement__text { width: min(100%, 1240px); margin: 0 auto; font-family: var(--font-display); font-size: clamp(2.1rem, 1rem + 3.8vw, 5.2rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
.statement__text .w { opacity: var(--o, 1); }

/* ================= 3. Charcuterie ================= */
.charc { background: var(--surface-natural) var(--grain); }
.charc__cart { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.charc__copy { grid-column: 1 / 6; display: grid; gap: 1rem; padding-bottom: clamp(1rem, 4vw, 3rem); }
.charc__copy h2 { font-size: clamp(3rem, 1.2rem + 4.6vw, 6.8rem); line-height: 0.9; letter-spacing: -0.03em; }
.charc__type { font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
.charc__text { max-width: 30em; }
.included { margin: 0.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.included li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.charc__art { grid-column: 7 / 13; justify-self: center; width: 100%; }
.charc__art .cart { width: min(100%, 520px); aspect-ratio: 1277 / 1811; margin-inline: auto; }

.cupstory { position: relative; height: 340svh; }
.cupstory__stage { position: sticky; top: 0; height: 100svh; width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.cupstory__copy { grid-column: 1 / 5; display: grid; gap: 1rem; align-self: center; }
.cupstory__title { font-size: clamp(2.6rem, 1rem + 4vw, 5.6rem); line-height: 0.92; letter-spacing: -0.03em; }
.cupstory__copy p { max-width: 24em; color: var(--ink-muted); }
.cupstory__art { grid-column: 5 / 13; position: relative; justify-self: center; height: min(88svh, 860px); aspect-ratio: 900 / 800; max-width: 100%; }
.cupstory__cup { position: absolute; inset: 0; color: var(--line-art); }
.cupstory__cup > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cupstory__notes { list-style: none; margin: 0; padding: 0; }
.cupstory__caption { display: none; min-height: 1.4em; margin: 0; font-family: var(--font-caption); font-style: italic; font-size: 1.08rem; text-align: center; color: var(--ink); }
.cupstory__notes li { position: absolute; left: var(--x, 70%); top: var(--y, 50%); transform: translateY(-50%); max-width: 13rem; font-family: var(--font-caption); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: var(--ink); opacity: 0; }
@media (max-width: 900px) {
  .charc__cart { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .charc__copy, .charc__art { grid-column: 1; }
  .charc__art .cart { width: min(78%, 420px); }
  .cupstory { height: 300svh; }
  .cupstory__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; padding-top: calc(4.6rem + env(safe-area-inset-top)); padding-bottom: 1rem; row-gap: 0.5rem; }
  .cupstory__copy, .cupstory__art { grid-column: 1; }
  .cupstory__copy { gap: 0.4rem; }
  .cupstory__copy p { font-size: 0.93rem; }
  .cupstory__title { font-size: clamp(2.2rem, 1rem + 5vw, 3rem); }
  .cupstory__art { height: 100%; width: 100%; aspect-ratio: auto; max-height: 66svh; }
  .cupstory__notes, .cupstory__cup .cc-notes { display: none; }
  .cupstory__caption { display: block; }
}

/* ================= 4. Made yours ================= */
.made { background: var(--canvas) var(--grain); padding-top: var(--section); overflow-x: clip;
  --made-colour: #E9A79E; --made-ink: #2C1B1D; --made-pale: #F7E5E0; }
.made__intro { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; }
.made__intro .liquid-type { font-size: clamp(3.4rem, 0.2rem + 14.5vw, 15rem); line-height: 0.86; letter-spacing: -0.035em; }
.made__intro-copy { margin: clamp(1.5rem, 3vw, 3rem) 0 0 auto; width: min(100%, 30rem); display: grid; gap: 0.6rem; }
.made__intro-copy .note { font-size: 1.15rem; }
.made__lede { font-size: var(--t-lede); }
.liquid-type { position: relative; color: transparent; -webkit-text-stroke: clamp(1.25px, 0.14vw, 2px) var(--brand); }
.liquid-type::after {
  content: attr(data-text); position: absolute; left: 0; right: 0; top: -0.3em; bottom: -0.3em; padding-top: 0.3em;
  color: var(--brand); -webkit-text-stroke: 0;
  -webkit-mask: var(--wave-mask) var(--wave-x, 0px) calc(var(--fill, 1) * 58%) / 480px 300% repeat-x;
          mask: var(--wave-mask) var(--wave-x, 0px) calc(var(--fill, 1) * 58%) / 480px 300% repeat-x;
}
/* Frozen or Charcuterie: two words, the chosen one underlined */
.made__modes, .studio__modes { display: flex; gap: clamp(1.4rem, 3vw, 2.5rem); }
.made__modes { width: min(100% - 2 * var(--gutter), 1320px); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.made__modes button, .studio__modes button, .studio__tabs button {
  position: relative; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 clamp(1.4rem, 1rem + 1vw, 2rem) var(--font-display); letter-spacing: -0.01em; color: var(--ink-muted);
  transition: color var(--t-ui) ease;
}
.made__modes button::after, .studio__modes button::after, .studio__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out); }
.made__modes button:hover, .studio__modes button:hover, .studio__tabs button:hover,
.made__modes button[aria-selected="true"], .studio__modes button[aria-selected="true"], .studio__tabs button[aria-selected="true"] { color: var(--ink); }
.made__modes button[aria-selected="true"]::after, .studio__modes button[aria-selected="true"]::after, .studio__tabs button[aria-selected="true"]::after { transform: scaleX(1); }

/* The scroller: one sticky scene, the beats scroll past it; a single scrubbed timeline drives both. */
.made__scroller { position: relative; width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.made__scene { grid-column: 6 / 13; grid-row: 1; position: sticky; top: 0; z-index: 1; align-self: start; height: 100svh; display: grid; place-items: center; padding: calc(5.5rem + env(safe-area-inset-top)) 0 5svh; }
/* The frame is a camera: the drawing's viewBox moves to whatever the active step customises (made.js) */
.made__frame { grid-area: 1 / 1; position: relative; width: 100%; height: min(74svh, 700px); max-height: 100%; overflow: hidden; }
.made__frame .made-cart > svg { overflow: hidden; }
.made__frame { contain: layout paint; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-composite: intersect; }
/* While a colour is being dragged on the wheel, the drawing follows it directly instead of easing after it */
.is-picking .made__scene *, .is-picking .made__scene *::before { transition: none !important; }
.made__scroller[data-mode="frozen"] .made__frame--charcuterie, .made__scroller[data-mode="charcuterie"] .made__frame--frozen { visibility: hidden; }
.made-cart { position: relative; width: 100%; height: 100%; }
.made__beats { grid-column: 1 / 6; grid-row: 1; z-index: 2; list-style: none; margin: 0; padding: 26svh 0 16svh; }
.beat { min-height: 50svh; display: grid; align-content: center; gap: 0.7rem; max-width: 28rem; }
.beat--colour { min-height: 66svh; }
.beat__n { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.beat h3 { font-size: clamp(2.2rem, 1rem + 3.2vw, 4.2rem); line-height: 0.95; letter-spacing: -0.025em; }
.beat h3 { color: rgb(44 27 29 / 0.55); transition: color 450ms ease; }
html:not(.js) .beat h3, .beat.is-on h3 { color: var(--ink); }
.beat.is-now h3 { color: var(--brand); }
.beat p:not(.beat__n) { color: var(--ink-muted); max-width: 26em; }
.made__note { margin-top: 1.5rem; padding-bottom: var(--section); font-family: var(--font-caption); font-style: italic; color: var(--ink-muted); text-align: right; }

/* Overlay pieces made.js draws inside each cart's own SVG (all positions in the drawing's units) */
.made-cart .liquid rect:not(.liquid__shine) { fill: var(--made-colour); transition: fill 600ms ease; }
.made-cart .liquid .tank-1 { fill: var(--made-pale); }
.mk-wrap { fill: var(--made-pale); transition: fill 600ms ease; }
.mk-wrap-name { fill: var(--made-ink); font-family: var(--font-display); transition: fill 600ms ease; }
.mk-wrap-line { fill: var(--made-ink); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; font-size: 34px; transition: fill 600ms ease; }
.mk-menu-bg { fill: var(--paper); }
.mk-menu-line { fill: rgb(44 27 29 / 0.45); }
.mk-menu-dot { stroke: var(--line-art); stroke-width: 2; }
.mk-menu-dot--0 { fill: var(--made-colour); }
.mk-menu-dot--1 { fill: var(--made-pale); }
.mk-string { fill: none; stroke: var(--line-art); stroke-width: 4; }
.mk-flag { stroke: var(--line-art); stroke-width: 3; stroke-linejoin: round; }
.mk-flag--0 { fill: var(--made-colour); }
.mk-flag--1 { fill: var(--paper); }
.mk-flag--2 { fill: var(--made-pale); }
.mk-cup__dome { fill: var(--made-colour); stroke: var(--line-art); stroke-width: 4; }
.mk-cup__body { fill: rgb(255 255 255 / 0.7); stroke: var(--line-art); stroke-width: 4; stroke-linejoin: round; }
.mk-cup__fill { fill: var(--made-colour); opacity: 0.75; }
.mk-cup__rim, .mk-cup__straw { fill: none; stroke: var(--line-art); stroke-width: 6; stroke-linecap: round; }
.mk-cup__mark { font-family: var(--font-display); font-size: 58px; fill: var(--made-ink); }
.mk-board { fill: #D8B585; stroke: var(--line-art); stroke-width: 4; stroke-linejoin: round; }
.mk-board__grain { fill: none; stroke: rgb(116 70 32 / 0.25); stroke-width: 2; }
.mk-engrave { fill: none; stroke: #5B3418; stroke-width: 2.4; opacity: 0.9; }
.mk-engrave-text { fill: none; stroke: #5B3418; stroke-width: 1.4; font-family: var(--font-display); font-size: 44px; }
.mk-kraft { fill: #C9A073; stroke: var(--line-art); stroke-width: 4; stroke-linejoin: round; }
.mk-stamp { fill: #4A2E22; opacity: 0.82; }
.mk-stamp-text { fill: #4A2E22; font-family: var(--font-display); opacity: 0.85; }
.mk-sprig { fill: none; stroke: #6F7A58; stroke-width: 3; stroke-linecap: round; }
.mk-bud { fill: #9C88C9; }

@media (max-width: 900px) {
  .made__intro-copy { margin-left: 0; }
  .made__modes { margin-top: 2rem; }
  .made__scroller { grid-template-columns: minmax(0, 1fr); }
  .made__scene {
    grid-column: 1; grid-row: 1; z-index: 2; height: 42svh;
    margin-inline: calc(-1 * var(--gutter)); padding: calc(4rem + env(safe-area-inset-top)) var(--gutter) 0.5rem;
    background: var(--canvas) var(--grain); border-bottom: 1px solid var(--rule);
  }
  .made__frame { height: 100%; }
  .made__beats { grid-column: 1; grid-row: 1; z-index: 1; padding: 44svh 0 10svh; }
  .beat { min-height: 38svh; align-content: start; padding-top: 1.5rem; max-width: none; gap: 0.5rem; }
  .beat--colour { min-height: 0; padding-bottom: 8svh; }
  .beat h3 { font-size: clamp(2rem, 1rem + 5vw, 2.8rem); }
  .made__note { text-align: left; }
}

/* ================= Describe your colour ================= */
.colour-field { display: grid; gap: 0.6rem; margin-top: 0.4rem; max-width: 26rem; }
.colour-field__input {
  width: 100%; min-height: 52px; padding: 0.45rem 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
  font: 400 clamp(1.3rem, 1rem + 0.8vw, 1.7rem) var(--font-display); color: var(--ink); letter-spacing: -0.005em;
}
.colour-field__input::placeholder { color: rgb(106 87 84 / 0.6); }
.colour-field__input:focus-visible { outline: none; border-bottom: 2px solid var(--brand); margin-bottom: -1px; }
/* The wheel sits at the end of the field's own line, like a swatch you can open */
.colour-field__line { display: flex; align-items: flex-end; gap: 0.75rem; }
.colour-field__line .colour-field__input { flex: 1; min-width: 0; }
.colour-field__line .colour-wheel { margin-bottom: 4px; }
.colour-field__options { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; min-height: 44px; align-items: center; }
.colour-opt { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 0.9rem var(--font-body); color: var(--ink-muted); transition: color var(--t-quick) ease; }
.colour-opt__sw { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.18); transition: box-shadow var(--t-ui) ease, transform var(--t-quick) var(--ease-out); }
.colour-opt:hover { color: var(--ink); }
.colour-opt:hover .colour-opt__sw { transform: scale(1.08); }
.colour-opt[aria-checked="true"] { color: var(--ink); }
.colour-opt[aria-checked="true"] .colour-opt__sw { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--ink); }
.colour-wheel {
  flex: none; position: relative; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 90deg, var(--watermelon), var(--citrus), var(--champagne), var(--sage), #93A1AE, #A99BC4, var(--blush), var(--watermelon));
  box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.15); transition: transform var(--t-quick) var(--ease-out);
}
.colour-wheel::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--wheel-core, var(--canvas)); box-shadow: 0 0 0 2px var(--canvas); }
.colour-wheel:hover { transform: rotate(18deg); }
.colour-wheel[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--ink); }
.colour-field__status { min-height: 1.4em; font-family: var(--font-caption); font-style: italic; font-size: 0.98rem; color: var(--ink-muted); }
/* The picker: hue, then how strong, then how light; each track shows exactly what it will do */
.picker { display: grid; gap: 0.7rem; padding: 0.9rem 0 0.2rem; border-top: 1px solid var(--rule); }
.picker label { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.picker input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.picker input[type="range"]::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: var(--track); box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.12); }
.picker input[type="range"]::-moz-range-track { height: 14px; border-radius: 7px; background: var(--track); box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.12); }
.picker input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -6px; border-radius: 50%; background: var(--thumb, #fff); border: 3px solid var(--paper); box-shadow: 0 0 0 1px rgb(44 27 29 / 0.35), 0 2px 6px rgb(44 27 29 / 0.25); }
.picker input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--thumb, #fff); border: 3px solid var(--paper); box-shadow: 0 0 0 1px rgb(44 27 29 / 0.35); }
.picker input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picker__hex { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.picker__hex input { width: 9rem; min-height: 40px; padding: 0.3rem 0; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; font: 500 0.95rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); text-transform: uppercase; }
.picker__hex input:focus-visible { outline: none; border-bottom-color: var(--brand); }

/* ================= 5. The studio ================= */
.studio { padding: var(--section) var(--gutter); background: var(--surface) var(--grain); }
.studio__head { width: min(100%, 1320px); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1rem; align-items: end; }
.studio__head h2 { grid-column: 1 / 8; font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.03em; }
.studio__lede { grid-column: 9 / 13; color: var(--ink-muted); }
.studio__desk { width: min(100%, 1320px); margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2rem; align-items: start; }
.studio__controls { grid-column: 1 / 5; display: grid; gap: 1.9rem; align-content: start; }
.studio__field { display: grid; gap: 0.5rem; position: relative; }
.studio__field > label:not(.upload), .field-label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.field-input { width: 100%; min-height: 48px; padding: 0.65rem 0.8rem; border-radius: 0; border: 1px solid var(--rule-strong); background: var(--paper); font: 400 1rem var(--font-body); color: var(--ink); }
.field-input--big { min-height: 64px; padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: 400 clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem) var(--font-display); letter-spacing: -0.01em; }
.field-input--big::placeholder { color: rgb(106 87 84 / 0.55); }
.field-input--big:focus-visible { outline: none; border-bottom: 2px solid var(--brand); margin-bottom: -1px; }
.upload { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; min-height: 56px; padding: 0.9rem 0; border-bottom: 1px solid var(--rule-strong); cursor: pointer; transition: border-color var(--t-quick) ease; }
.upload:hover, .upload.is-over { border-bottom-color: var(--ink); }
.upload span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--interactive); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.upload small { color: var(--ink-muted); font-size: 0.85rem; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__input:focus-visible { outline: none; }
.studio__field:has(.upload__input:focus-visible) .upload { outline: 2px solid var(--focus); outline-offset: 4px; }
.studio__status { min-height: 1.5em; font-family: var(--font-caption); font-style: italic; color: var(--brand); }
.print-colour { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.print-colour__opt { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 0.95rem var(--font-body); color: var(--ink-muted); }
.print-colour__opt[aria-checked="true"] { color: var(--ink); }
.print-colour__sw { width: 24px; height: 24px; border-radius: 50%; background: var(--sw, var(--wine)); box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.18); }
.print-colour__sw--original { background: conic-gradient(var(--wine) 0 25%, var(--citrus) 0 50%, var(--sage) 0 75%, var(--blush) 0); }
.print-colour__opt[aria-checked="true"] .print-colour__sw { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.colour-field--compact .colour-field__input { font-size: 1.2rem; min-height: 46px; }
.studio__controls .ticket-btn { justify-self: start; }

.studio__stage { grid-column: 5 / 13; position: relative; display: grid; gap: 0.6rem; min-width: 0; }
.studio__tabs { display: flex; flex-wrap: wrap; gap: 0 clamp(1.1rem, 2.5vw, 1.8rem); border-bottom: 1px solid var(--rule); }
.studio__tabs button { font: 500 0.98rem var(--font-body); letter-spacing: 0; }
.studio__tabs button::after { bottom: -1px; height: 2px; }
.studio__views { position: relative; min-height: clamp(420px, 66svh, 680px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; background: var(--canvas) var(--grain); }
.studio__views > .view { grid-area: 1 / 1; }
.view { width: 100%; min-width: 0; display: grid; justify-items: center; gap: 0.9rem; padding: clamp(1rem, 3vw, 2rem); }
.view.is-entering { animation: view-in 520ms var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cup-render, .stamp-render { position: relative; height: min(56svh, 560px); aspect-ratio: 360 / 480; max-width: 100%; }
.cup-render > svg, .stamp-render > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cup-render canvas, .stamp-render canvas { position: absolute; pointer-events: none; }
.board-render { position: relative; width: min(100%, 780px); aspect-ratio: 1000 / 600; }
.board-render canvas { display: block; width: 100%; height: 100%; }
.menu-card {
  --print: var(--wine);
  width: min(100%, 340px); aspect-ratio: 5 / 7; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; gap: 1rem;
  padding: 2.4rem 1.8rem; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 1px rgb(59 27 34 / 0.08), 0 20px 40px -30px rgb(59 27 34 / 0.45);
  outline: 1px solid var(--print); outline-offset: -12px; transform: rotate(-1deg);
}
.menu-card__mark { min-height: 4.5rem; display: grid; place-items: center; }
.menu-card__mark img { max-width: 72%; max-height: 4.5rem; object-fit: contain; }
.menu-card__mark p { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; color: var(--print); overflow-wrap: anywhere; }
.menu-card__kicker { font-family: var(--font-caption); font-style: italic; color: var(--print); }
.menu-card__drinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; align-content: center; }
.menu-card__drinks li { display: grid; gap: 0.15rem; }
.menu-card__drinks strong { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.menu-card__drinks span { font-size: 0.85rem; color: var(--ink-muted); }
.menu-card__foot { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.studio-cart { height: min(54svh, 540px); max-width: 100%; aspect-ratio: 1070 / 1719; }
.studio-cart .liquid rect:not(.liquid__shine) { fill: var(--blush); }
.studio-cart .liquid .tank-1 { fill: var(--watermelon); }
.sc-name { font-family: var(--font-display); }
.view__caption { font-family: var(--font-caption); font-style: italic; color: var(--ink-muted); text-align: center; }
@media (max-width: 900px) {
  .studio__head, .studio__desk { grid-template-columns: minmax(0, 1fr); }
  .studio__head h2, .studio__lede, .studio__controls, .studio__stage { grid-column: 1; }
  .studio__stage { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .studio__modes, .studio__tabs { padding-inline: var(--gutter); }
  .studio__views { min-height: 54svh; }
  .cup-render, .stamp-render, .studio-cart { height: 44svh; }
}

/* ================= 6. Made theirs ================= */
.cases { background: var(--canvas) var(--grain); }
.cases__head { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding: var(--section) 0 clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.cases__title { grid-column: 1 / 10; font-size: clamp(3.4rem, 1rem + 10vw, 12rem); line-height: 0.84; letter-spacing: -0.04em; }
.cases__lede { grid-column: 10 / 13; padding-bottom: 0.6rem; font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
/* The campaign: full bleed, in deep wine, photographs first */
.campaign { background: var(--surface-dark) var(--grain); color: var(--ink-on-dark); padding: 0 var(--gutter) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.campaign__hero { grid-column: 1 / 7; margin-left: calc(-1 * var(--gutter)); height: 100svh; overflow: hidden; }
.campaign__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign__copy { grid-column: 8 / 13; display: grid; gap: 1.1rem; align-content: center; }
.campaign__client { font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--champagne); }
.campaign__title { font-size: clamp(3.6rem, 1rem + 7.5vw, 10rem); line-height: 0.86; letter-spacing: -0.035em; color: var(--pearl); }
.campaign__stat { display: flex; align-items: baseline; gap: 0.8rem; font-family: var(--font-caption); font-style: italic; font-size: 1.1rem; color: var(--ink-on-dark-muted); }
.campaign__stat span { font-family: var(--font-display); font-style: normal; font-size: clamp(3rem, 1.6rem + 3.6vw, 5.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--pearl); font-variant-numeric: lining-nums tabular-nums; }
.campaign__brief { max-width: 32em; color: var(--ink-on-dark-muted); }
.campaign__drinks { list-style: none; margin: 0.4rem 0 0; padding: 0; border-top: 1px solid var(--rule-on-dark); }
.campaign__drinks li { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-on-dark); font-family: var(--font-display); font-size: clamp(1.7rem, 1.1rem + 1.8vw, 3rem); line-height: 1.05; color: var(--pearl); }
.campaign__drinks li::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgb(246 241 230 / 0.35); }
.campaign__drinks strong { font-weight: 400; }
.campaign__diptych { grid-column: 2 / 12; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--col-gap); }
.campaign__diptych figure:first-child { grid-column: 1 / 6; }
.campaign__diptych figure:last-child { grid-column: 6 / 11; margin-top: 18%; }
.campaign__diptych img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.campaign__diptych figcaption { margin-top: 0.6rem; color: var(--ink-on-dark-muted); }
.plates { background: var(--canvas) var(--grain); padding: var(--section) var(--gutter) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.plates__stat { grid-column: 1 / 9; font-family: var(--font-display); font-size: clamp(6rem, 1rem + 20vw, 23rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.plates__copy { grid-column: 9 / 13; display: grid; gap: 0.6rem; padding-bottom: 1rem; }
.plates__copy h3 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); }
.plates__copy p:not(.note) { color: var(--ink-muted); max-width: 24em; }
.index { background: var(--canvas) var(--grain); padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section); }
.index > * { width: min(100%, 1320px); margin-inline: auto; }
.ledger { list-style: none; margin-top: 0.8rem; padding: 0; border-top: 1px solid var(--rule-strong); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 0.6rem clamp(1.5rem, 4vw, 3rem); align-items: baseline; padding: clamp(1.25rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--rule); }
.ledger__name { transition: transform var(--t-ui) var(--ease-out); }
.ledger__row:hover .ledger__name { transform: translateX(0.5rem); }
.ledger h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); }
.ledger__client { margin-top: 0.3rem; font-family: var(--font-caption); font-style: italic; color: var(--ink-muted); }
.ledger__text { max-width: 34em; color: var(--ink-muted); }
.ledger__stat { color: var(--ink); font-weight: 600; }
.ledger__tags { font-family: var(--font-caption); font-style: italic; color: var(--ink-muted); text-align: right; }
@media (max-width: 900px) {
  .cases__head { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .cases__title, .cases__lede { grid-column: 1; }
  .campaign { grid-template-columns: minmax(0, 1fr); }
  .campaign__hero { grid-column: 1; height: 72svh; margin-right: calc(-1 * var(--gutter)); }
  .campaign__copy, .campaign__diptych { grid-column: 1; }
  .campaign__diptych { grid-template-columns: 1fr 1fr; }
  .campaign__diptych figure:first-child, .campaign__diptych figure:last-child { grid-column: auto; }
  .plates { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .plates__stat, .plates__copy { grid-column: 1; }
  .ledger__row { grid-template-columns: minmax(0, 1fr); }
  .ledger__tags { text-align: left; }
}

/* ================= 7. How it works ================= */
.how { background: var(--surface) var(--grain); padding-block: var(--section); }
.how h2 { font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem); line-height: 0.95; letter-spacing: -0.025em; }
.steps { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; counter-reset: step; border-top: 1px solid var(--rule-strong); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 4rem minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline; padding: clamp(1.25rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: "0" counter(step); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: clamp(2.2rem, 1rem + 4.2vw, 5.8rem); line-height: 0.95; letter-spacing: -0.03em; }
.steps p { max-width: 24em; color: var(--ink-muted); font-size: var(--t-lede); }
@media (max-width: 760px) { .steps li { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 0.6rem; } .steps p { grid-column: 2; font-size: 1rem; } }

/* ================= 8. From the counter ================= */
.gallery { background: var(--surface-natural) var(--grain); padding-block: var(--section); }
.gallery__head { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; }
.gallery h2 { font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.03em; }
.gallery__head p { max-width: 24em; font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
.reel { list-style: none; margin: clamp(1.75rem, 3vw, 2.75rem) 0 0; padding: 0 var(--gutter) 0.5rem; display: flex; align-items: flex-start; gap: clamp(1rem, 2.2vw, 2.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel::after { content: ""; flex: none; width: 1px; }
.reel__item { flex: none; scroll-snap-align: center; }
.reel__frame { overflow: hidden; background: var(--oat); }
.reel__item--xl .reel__frame { height: min(66svh, 740px); aspect-ratio: 3 / 4; }
.reel__item--md .reel__frame { height: min(48svh, 520px); aspect-ratio: 4 / 5; }
.reel__item--sm { align-self: flex-end; }
.reel__item--sm .reel__frame { height: min(30svh, 320px); aspect-ratio: 1; }
.reel__item--wide .reel__frame { height: min(42svh, 460px); aspect-ratio: 3 / 2; }
.reel__item--md:nth-child(4n) { margin-top: 8svh; }
.reel__frame img { display: block; width: 116%; max-width: none; height: 100%; margin-left: -8%; object-fit: cover; transform: translate3d(var(--drift, 0px), 0, 0); }
.reel figcaption { margin-top: 0.7rem; display: flex; gap: 0.7rem; align-items: baseline; max-width: 22rem; font-size: 1rem; }
.reel figcaption span { font-family: var(--font-body); font-style: normal; font-size: var(--t-micro); font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
html.js .gallery.is-pinned { height: calc(100svh + var(--reel-h, 0px) * 0.8); padding-block: 0; }
html.js .gallery.is-pinned .gallery__stage { position: sticky; top: 0; height: 100svh; padding-top: 4.5rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html.js .gallery.is-pinned .reel { overflow: visible; scroll-snap-type: none; will-change: transform; }
@media (max-width: 860px) {
  .reel__item--xl .reel__frame { height: 58svh; }
  .reel__item--md .reel__frame { height: 44svh; }
  .reel__item--sm .reel__frame { height: 28svh; }
  .reel__item--wide .reel__frame { height: 32svh; }
  .reel__item--md:nth-child(4n) { margin-top: 0; }
}

/* ================= 9. Good to know ================= */
.faq { padding-block: var(--section); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.faq h2 { font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem); line-height: 0.95; letter-spacing: -0.025em; position: sticky; top: 7rem; }
.faq__list { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); color: var(--ink); transition: color var(--t-quick) ease; }
.faq summary:hover { color: var(--interactive); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--ink-muted); max-width: 40em; }
.faq details[open] p { animation: faq-open var(--t-ui) var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .faq__inner { grid-template-columns: minmax(0, 1fr); } .faq h2 { position: static; } }

/* ================= 10. The boarding pass ================= */
.book { padding-block: 0 var(--section); }
.book__head { display: grid; gap: 0.6rem; padding-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--rule-strong); }
.book h2 { font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.03em; }
.pass { margin-top: clamp(2rem, 5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); filter: drop-shadow(0 18px 30px rgb(59 27 34 / 0.12)); }
.pass__main { background: var(--paper); border-radius: 10px 0 0 10px; padding: clamp(1.25rem, 3vw, 2.5rem);
  -webkit-mask: radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat; }
.pass__stub { position: relative; background: var(--surface-dark) var(--grain); color: var(--ink-on-dark); border-radius: 0 10px 10px 0; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem;
  -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat; }
.pass__stub::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 1.5px dashed rgb(246 241 230 / 0.45); }
.pass__logo { width: 140px; height: auto; fill: var(--pearl); }
.pass__summary { margin: 0; display: grid; gap: 0.8rem; }
.pass__summary div { display: grid; gap: 0.1rem; }
.pass__summary dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-on-dark-muted); }
.pass__summary dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.pass__route { --progress: 0; position: relative; list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pass__route::before, .pass__route::after { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 10px; }
.pass__route::before { border-top: 1.5px dashed var(--rule-strong); }
.pass__route::after { height: 1.5px; background: var(--brand); transform-origin: left; transform: scaleX(var(--progress)); transition: transform 700ms var(--ease-out); }
.pass__route li { display: grid; justify-items: center; }
.pass__route button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.5rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 0.86rem var(--font-body); color: var(--ink-muted); }
.pass__dot { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--rule-strong); background: var(--paper); transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.pass__route button[aria-current="step"] { color: var(--ink); }
.pass__route button[aria-current="step"] .pass__dot { border-color: var(--brand); background: var(--brand); transform: scale(1.1); box-shadow: 0 0 0 5px rgb(143 57 57 / 0.13); }
.pass__route li.is-done .pass__dot { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 38%, var(--paper) 42%); }
.pass__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.pass__step.is-entering { animation: step-in 440ms var(--ease-out) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.pass__nav { margin-top: 1.75rem; display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.field-label { grid-column: 1 / -1; margin-bottom: 0.2rem; }
.pass__carts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; margin-bottom: 1.75rem; }
.pick { position: relative; cursor: pointer; border-bottom: 1px solid var(--rule); }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick span { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; padding: 0.85rem 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; color: var(--ink); transition: color var(--t-quick) ease; }
.pick span::before { content: ""; grid-row: span 2; align-self: center; width: 1rem; height: 1rem; border: 1.5px solid var(--rule-strong); border-radius: 2px; transition: background-color var(--t-quick) ease, border-color var(--t-quick) ease, box-shadow var(--t-quick) ease; }
.pick--small span { font-family: var(--font-body); font-size: 0.93rem; }
.pick small { grid-column: 2; font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-muted); }
.pick:hover span { color: var(--interactive); }
.pick input:checked + span { color: var(--interactive); }
.pick input:checked + span::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 2.5px var(--paper); }
.pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pass__carts .field-error { grid-column: 1 / -1; }
.pass__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.4rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.optional { font-weight: 400; letter-spacing: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; font: 400 1.05rem var(--font-body); color: var(--ink); transition: border-color var(--t-quick) ease; }
.field select { cursor: pointer; }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--brand); margin-bottom: -1px; }
.field [aria-invalid="true"] { border-bottom-color: #A32A20; }
.field-error { margin: 0; font-size: 0.85rem; color: #A32A20; font-weight: 500; }
.pass__done { display: grid; gap: 0.8rem; }
.pass__stamp { justify-self: start; font-family: var(--font-stamp); font-size: 1.3rem; padding: 0.2rem 0.8rem; border: 1.5px solid var(--pearl); transform: rotate(-4deg); animation: stamp 600ms var(--ease-out) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.pass__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.pass__fallback { width: 100%; border: 0; padding: 0.6rem; font: 0.85rem/1.4 var(--font-body); color: var(--ink); background: var(--cream); }
.pass .pass__submit[disabled] { opacity: 0.7; cursor: progress; }
.reach { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; }
.reach p { font-family: var(--font-caption); font-style: italic; font-size: 1.08rem; color: var(--ink-muted); }
.reach ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.reach a { font-weight: 600; color: var(--interactive); }
@media (max-width: 820px) {
  .pass { grid-template-columns: minmax(0, 1fr); }
  .pass__main { border-radius: 10px 10px 0 0;
    -webkit-mask: radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom right / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom right / 51% 100% no-repeat; }
  .pass__stub { border-radius: 0 0 10px 10px;
    -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat; }
  .pass__stub::before { left: 18px; right: 18px; top: 0; bottom: auto; border-left: 0; border-top: 1.5px dashed rgb(246 241 230 / 0.45); }
  .pass__grid, .pass__carts { grid-template-columns: minmax(0, 1fr); }
  .pass__route button { font-size: 0.78rem; }
}

/* ================= 11. The final scene ================= */
.footer { position: relative; background: var(--surface-dark); padding: var(--section) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom)); color: var(--ink-on-dark); overflow: hidden; }
.footer.has-surface { background: var(--grain), linear-gradient(var(--canvas) 0 var(--surface-h), transparent var(--surface-h)), var(--surface-dark); padding-top: calc(var(--section) + var(--surface-h)); }
.pour__surface { position: absolute; left: 0; top: 0; display: block; width: 100%; height: calc(var(--surface-h) + 2px); fill: var(--chapter, var(--surface-dark)); pointer-events: none; }
.footer__scene { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.footer__line { grid-column: 1 / 10; font-family: var(--font-display); font-size: clamp(3rem, 1rem + 7.5vw, 9.5rem); line-height: 0.88; letter-spacing: -0.035em; color: var(--pearl); }
.footer__photo { grid-column: 10 / 13; }
.footer__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.footer__row { margin-top: clamp(3rem, 7vw, 6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; padding-top: 1.75rem; border-top: 1px solid var(--rule-on-dark); }
.footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.footer a:not(.ticket-btn) { color: var(--pearl); font-weight: 600; }
.footer__small { margin-left: auto; font-family: var(--font-caption); font-style: italic; color: var(--ink-on-dark-muted); }
.footer__giant { display: block; width: 100%; height: auto; margin-top: clamp(3rem, 8vw, 7rem); color: var(--pearl); overflow: visible; }
@media (max-width: 900px) {
  .footer__scene { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .footer__line, .footer__photo { grid-column: 1; }
  .footer__photo { width: 55%; justify-self: end; }
  .footer__small { margin-left: 0; }
}

/* ================= Services catalogue (/services/) ================= */
.cat-hero { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding: calc(8rem + env(safe-area-inset-top)) 0 clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.cat-hero h1 { grid-column: 1 / 9; font-size: clamp(3.6rem, 1rem + 10vw, 11.5rem); line-height: 0.84; letter-spacing: -0.04em; }
.cat-hero p { grid-column: 9 / 13; padding-bottom: 0.8rem; font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
.cat { list-style: none; margin: 0; padding: 0; }
.cat-item { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6.5rem) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; border-top: 1px solid var(--rule-strong); }
.cat-item:nth-child(even) .cat-art { grid-column: 1 / 6; grid-row: 1; }
.cat-item:nth-child(even) .cat-copy { grid-column: 7 / 13; }
.cat-art { grid-column: 8 / 13; grid-row: 1; position: relative; display: grid; place-items: center; min-height: clamp(320px, 52svh, 560px); }
.cat-art__draw { height: clamp(300px, 50svh, 540px); max-width: 100%; }
.cat-copy { grid-column: 1 / 7; grid-row: 1; display: grid; gap: 1rem; align-content: center; }
.cat-copy__n { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cat-copy h2 { font-size: clamp(2.8rem, 1rem + 5vw, 6.4rem); line-height: 0.9; letter-spacing: -0.03em; }
.cat-copy__type { font-family: var(--font-caption); font-style: italic; font-size: 1.2rem; color: var(--ink-muted); }
.cat-copy__text { max-width: 32em; }
.cat-copy .included { max-width: 30rem; }
.cat-copy .ticket-btn, .cat-copy .text-link { justify-self: start; margin-top: 0.4rem; }
.cat-item--soon .cat-art__draw { opacity: 0.55; }
.soon-stamp { justify-self: start; display: inline-block; font-family: var(--font-stamp); font-size: 1.15rem; color: var(--wine); border: 1.5px solid var(--wine); padding: 0.45rem 0.85rem 0.4rem; line-height: 1.1; transform: rotate(-3deg); }
.cat-end { width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding: var(--section) 0; border-top: 1px solid var(--rule-strong); display: grid; gap: 1.5rem; justify-items: start; }
.cat-end h2 { font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.03em; max-width: 12ch; }
@media (max-width: 900px) {
  .cat-hero { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding-top: calc(6rem + env(safe-area-inset-top)); }
  .cat-hero h1, .cat-hero p { grid-column: 1; }
  .cat-item, .cat-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .cat-art, .cat-copy, .cat-item:nth-child(even) .cat-art, .cat-item:nth-child(even) .cat-copy { grid-column: 1; grid-row: auto; }
  .cat-art { min-height: 0; }
  .cat-art__draw { height: 44svh; }
}

/* ================= Reveals ================= */
html.can-reveal [data-reveal] { overflow: clip; clip-path: inset(0 0 100% 0); transition: clip-path 1500ms var(--ease-out); }
html.can-reveal [data-reveal] img { transform: scale(1.08); transition: transform 1900ms var(--ease-out); }
html.can-reveal [data-reveal].is-in { clip-path: inset(0 0 0 0); }
html.can-reveal [data-reveal].is-in img { transform: none; }
html.can-reveal [data-lines].is-split .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
html.can-reveal [data-lines].is-split .wd > span { display: inline-block; transform: translateY(108%); transition: transform 900ms var(--ease-out) calc(var(--l, 0) * 90ms); }
html.can-reveal [data-lines].is-in .wd > span { transform: none; }

/* ================= Reduced motion: every scene is static and complete ================= */
@media (prefers-reduced-motion: reduce) {
  .opening, .cupstory { height: auto; }
  .opening__stage { position: relative; height: auto; min-height: 100svh; }
  .cupstory__stage { position: relative; height: auto; min-height: 100svh; }
  .cupstory__notes li { opacity: 1; }
  html.js .hero-in, html.js .hero__headline .hero-in { opacity: 1; transform: none; transition: none; }
  .nav, .sheet, .sheet__links span, .sheet__logo, .ticket-btn::before, .pass__route::after, .view.is-entering, .pass__step.is-entering, .pass__stamp, .faq details[open] p, .colour-wheel { transition: none; animation: none; }
}

/* ================= The pour line carries on: every drawing stands on it ================= */
.charc__art .cart, .cat-art__draw { position: relative; }
/* The line runs past the drawing but never past the page (clip keeps the sticky cup stage working) */
.charc, .cat { overflow-x: clip; }
.charc__art .cart::after, .cat-art__draw::after {
  content: ""; position: absolute; left: -38%; right: -38%; bottom: -9px; height: 18px; pointer-events: none;
  background: var(--ground-line) center / 100% 100% no-repeat;
}
.cat-art__draw--cup::after { left: -60%; right: -60%; }
@media (max-width: 760px) {
  .charc__art .cart::after, .cat-art__draw::after { left: -20%; right: -20%; }
}

/* ================= The pour: liquid chapters and their drips (restored from the earlier build) ================= */
/* A chapter marked .pour is a layer of slush: its top surface sloshes as you scroll and, with data-drip, its
   lower edge drips into the next chapter (pour.js). Drips never take pointer events. */
.pour { --chapter: var(--canvas); --on: var(--ink); position: relative; background-color: var(--chapter); color: var(--on); }
.pour--wine { --chapter: var(--wine); --on: var(--paper); }
.pour--deep { --chapter: var(--surface-dark); --on: var(--paper); }
.footer.pour { --chapter: var(--surface-dark); }
.pour.has-surface:not(.footer) {
  background: var(--grain), linear-gradient(var(--above, var(--canvas)) 0 var(--surface-h), transparent var(--surface-h)), var(--chapter);
}
.pour__drips { position: absolute; left: 0; top: calc(100% - 1px); z-index: 3; display: block; width: 100%; height: auto; fill: var(--chapter); pointer-events: none; overflow: visible; }

/* The introduction: the wine pour that bridges into the carts */
.statement.pour--wine { padding: calc(var(--surface-h) + clamp(3.5rem, 8vw, 7rem)) var(--gutter) clamp(4rem, 8vw, 7rem); }
.statement.pour--wine .statement__text { color: var(--paper); }
.statement__bridge { width: min(100%, 1240px); margin: clamp(1.6rem, 3vw, 2.6rem) auto 0; }
.statement__bridge a { font-family: var(--font-caption); font-style: italic; font-size: 1.18rem; color: var(--champagne); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.statement__bridge a:hover { color: var(--paper); }

/* ================= 3. The carts: the ride ================= */
/* Without motion (or before scripts) the stations simply stack, complete. */
.ride { position: relative; background: var(--canvas) var(--grain); }
.ride__stops, .ride__ground, .callouts { display: none; }
.station {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); grid-template-areas: "art copy photo";
  column-gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; padding-block: var(--section);
}
.station--charcuterie { background: var(--surface-natural); box-shadow: 0 0 0 100vmax var(--surface-natural); clip-path: inset(0 -100vmax); }
.station__art { grid-area: art; position: relative; }
.station__art .ride-cart { width: 100%; }
.station--frozen .ride-cart { aspect-ratio: 1070 / 1719; }
.station--charcuterie .ride-cart { aspect-ratio: 1277 / 1811; }
.station__copy { grid-area: copy; min-width: 0; }
.station__copy h3 { font-size: clamp(2.8rem, 1.2rem + 4vw, 5.8rem); line-height: 0.9; letter-spacing: -0.03em; }
.station__type { margin-top: 0.6rem; font-family: var(--font-caption); font-style: italic; font-size: 1.15rem; color: var(--ink-muted); }
.station__text { margin-top: 1rem; max-width: 30em; }
.station__steps { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.station__steps li { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; line-height: 1.35; color: var(--ink); transition: color 350ms ease; }
.station__steps li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transform: translateY(-0.05em); transition: background-color 350ms ease; }
.station__steps li.is-on::before { background: currentColor; }
.station .flavours { margin-top: 1.1rem; }
.station__photo { grid-area: photo; margin: 0; }
.station__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.station__photo figcaption { margin-top: 0.6rem; }
.ride-cart--exploding .edge-mend { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
@media (max-width: 760px) {
  .station { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "copy" "photo"; row-gap: 1.5rem; }
  .station__art .ride-cart { width: min(70%, 300px); margin-inline: auto; }
  .station__photo { width: min(60%, 260px); }
}

/* With motion: one pinned stage; the timeline in ride.js moves everything inside it */
html.js .ride:not(.is-static) { height: 520svh; }
html.js .ride:not(.is-static) .ride__stage { --ground: 88svh; --art-h: min(66svh, 640px); position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--canvas) var(--grain); }
html.js .ride:not(.is-static) .station { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; clip-path: none; }
html.js .ride:not(.is-static) .station__art { position: absolute; left: 52%; top: calc(var(--ground) - var(--art-h)); height: var(--art-h); }
html.js .ride:not(.is-static) .station--frozen .station__art { aspect-ratio: 1070 / 1719; }
html.js .ride:not(.is-static) .station--charcuterie .station__art { aspect-ratio: 1277 / 1811; }
html.js .ride:not(.is-static) .station__art .ride-cart { width: 100%; height: 100%; }
html.js .ride:not(.is-static) .station__copy {
  position: absolute; left: var(--gutter); top: 0; height: var(--ground); width: min(30rem, 31vw);
  display: flex; flex-direction: column; justify-content: center; padding-top: 5.5rem;
}
html.js .ride:not(.is-static) .station__steps li { color: var(--ink-muted); }
html.js .ride:not(.is-static) .station__steps li.is-on { color: var(--ink); }
html.js .ride:not(.is-static) .station__steps li.is-now { color: var(--brand); }
html.js .ride:not(.is-static) .station__photo { position: absolute; right: var(--gutter); top: 14svh; width: min(22vw, 330px); }
html.js .ride:not(.is-static) .station__photo img { aspect-ratio: 3 / 4; }
html.js .ride:not(.is-static) .ride__ground { display: block; position: absolute; left: 0; right: 0; top: calc(var(--ground) - 9px); width: 100%; height: 18px; fill: none; stroke: var(--line-art); stroke-width: 2.2; stroke-linecap: round; }
html.js .ride:not(.is-static) .ride__ground path { vector-effect: non-scaling-stroke; }
html.js .ride:not(.is-static) .ride__stops {
  display: flex; gap: clamp(1rem, 3vw, 2.5rem); position: absolute; left: var(--gutter); bottom: calc(100svh - var(--ground) + 1rem); z-index: 2;
  list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-muted);
}
.ride__stops li { display: inline-flex; align-items: center; gap: 0.5rem; transition: color 300ms ease; }
.ride__stops li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 300ms ease; }
.ride__stops li.is-here { color: var(--brand); }
.ride__stops li.is-here::before, .ride__stops li.is-past::before { background: currentColor; }
/* The charcuterie labels point at what's inside while the counter is open */
html.js .ride:not(.is-static) .callouts { display: block; position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.callout { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; transform: translateY(-50%); }
.callout::before { content: ""; flex: none; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--brand); }
.callout::after { content: ""; order: 1; flex: none; width: clamp(1.5rem, 3vw, 3.2rem); border-top: 1.5px solid var(--brand); }
.callout span { order: 2; width: max-content; max-width: clamp(10rem, 15vw, 13.5rem); padding: 0.3rem 0.55rem; background: color-mix(in srgb, var(--paper) 88%, transparent); font-family: var(--font-caption); font-style: italic; font-size: 0.98rem; line-height: 1.28; color: var(--ink); }
/* Below 1100px the labels would run off the screen: the synced list under the copy carries them instead */
@media (max-width: 1099px) { html.js .ride:not(.is-static) .callouts { display: none; } }
/* On desktop the labels carry the list; it stays available to screen readers */

/* Phones, and tablets held upright: the drawing above the ground line, the words below it */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html.js .ride:not(.is-static) { height: 560svh; }
  html.js .ride:not(.is-static) .ride__stage { --ground: calc(6.4rem + 36svh); --art-h: 33svh; }
  html.js .ride:not(.is-static) .station__art { left: 38%; }
  html.js .ride:not(.is-static) .callouts { display: none; }
  html.js .ride:not(.is-static) .station__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--ground) + 1rem); height: auto; width: auto; display: block; padding: 0; }
  html.js .ride:not(.is-static) .station__copy h3 { font-size: 2.4rem; }
  html.js .ride:not(.is-static) .station__type { margin-top: 0.3rem; font-size: 1rem; }
  html.js .ride:not(.is-static) .station__text { margin-top: 0.5rem; font-size: 0.95rem; }
  html.js .ride:not(.is-static) .station__steps { margin-top: 0.7rem; }
  html.js .ride:not(.is-static) .station__steps li { padding: 0.35rem 0; font-size: 0.88rem; }
  html.js .ride:not(.is-static) .station .flavours { margin-top: 0.7rem; }
  html.js .ride:not(.is-static) .station .flavours span { min-height: 36px; font-size: 0.85rem; }
  html.js .ride:not(.is-static) .station__photo { right: var(--gutter); top: calc(6.4rem + env(safe-area-inset-top)); width: 24vw; }
  html.js .ride:not(.is-static) .station__photo figcaption { display: none; }
  html.js .ride:not(.is-static) .ride__stops { font-size: 0.92rem; top: calc(4.4rem + env(safe-area-inset-top)); bottom: auto; }
}

/* ================= Choosing a colour: one wheel ================= */
.colour-field__label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); margin-top: 0.4rem; }
.picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem 1.2rem; padding: 0.4rem 0 0.2rem; }
.picker--inline { padding-top: 0.2rem; }
.picker__wheel { position: relative; width: clamp(150px, 15vw, 196px); aspect-ratio: 1; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: 0 0 0 1px rgb(44 27 29 / 0.14), 0 6px 18px rgb(59 27 34 / 0.12); }
.picker__wheel canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.picker__wheel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.picker__handle { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; will-change: transform; border-radius: 50%; background: var(--sw, #fff); border: 3px solid var(--paper); box-shadow: 0 0 0 1px rgb(44 27 29 / 0.45), 0 2px 6px rgb(44 27 29 / 0.3); pointer-events: none; }
.picker__readout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.7rem; min-width: 0; }
.picker__swatch { width: 40px; height: 40px; border-radius: 50%; background: var(--sw, var(--paper)); box-shadow: inset 0 0 0 1px rgb(44 27 29 / 0.16); }
.picker__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.picker__hex { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); }
.picker__hex input { width: min(6.5rem, 100%); min-width: 0; min-height: 40px; padding: 0.25rem 0; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; font: 500 0.92rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); text-transform: uppercase; }
.colour-field--compact .picker__wheel { width: 160px; }
.colour-field--compact .picker { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
@media (max-width: 900px) {
  .picker__wheel { width: 150px; }
  .picker__name { font-size: 1.15rem; }
}

/* ================= Made yours: the printed cup, garnish and the engraved board ================= */
.mk-cup__shadow { fill: rgb(59 27 34 / 0.14); }
.mk-cup__frost { fill: rgb(255 255 255 / 0.55); }
.mk-cup__mark { font-family: var(--font-display); fill: var(--made-ink); }
.mk-garnish { fill: #E7EE9E; stroke: var(--line-art); stroke-width: 4; }
.mk-garnish__seg { fill: none; stroke: var(--line-art); stroke-width: 2.5; }
/* Engraving: burnt into the wood, a darker cut with a faint lighter lip below it; never a coloured print */
.mk-engrave-text { fill: #4B2A16; fill-opacity: 0.88; stroke: #3A1F0F; stroke-width: 0.8; font-family: var(--font-display); }
.mk-engrave-edge { fill: #F2DDBB; fill-opacity: 0.55; font-family: var(--font-display); }

/* The studio's menu: our framed menu (menu.js) */
.studio-menu { width: min(100%, 720px); margin-inline: auto; }
.studio-menu > svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgb(59 27 34 / 0.18)); }

/* ================= Usability pass (Nielsen review) ================= */
.field-hint { margin: 0.3rem 0 0; font-family: var(--font-caption); font-style: italic; font-size: 0.98rem; line-height: 1.35; color: var(--ink-muted); }
.pass__carts .field-hint { grid-column: 1 / -1; }
.upload__remove { justify-self: start; min-height: 44px; }
/* Phones and upright tablets (the stacked studio): the preview stays in view while the controls below it are used */
@media (max-width: 900px) {
  .studio__stage { position: sticky; top: calc(var(--nav-h, 4.6rem) + env(safe-area-inset-top)); z-index: 3; transition: top 500ms var(--ease-out); background: var(--surface) var(--grain); box-shadow: 0 10px 18px -16px rgb(59 27 34 / 0.35); }
  .studio__views { min-height: 30svh; }
  .cup-render, .stamp-render, .studio-cart { height: 26svh; }
  .board-render { width: min(100%, 44svh); }
  .studio-menu { width: min(100%, 42svh); }
  .studio__stage .view__caption { display: none; }
}
@media (max-width: 767px) {
  .studio__views { min-height: 28svh; }
  .cup-render, .stamp-render, .studio-cart { height: 24svh; }
  .board-render { width: min(100%, 40svh); }
  .studio-menu { width: min(100%, 38svh); }
  .studio__stage .view__caption { display: none; }
  .studio__stage .view { padding: 0.6rem; gap: 0.4rem; }
  .studio__stage .view__caption { font-size: 0.88rem; }
}

/* Tablets held upright: the same layout as phones, at a size that fills the taller screen */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.js .ride:not(.is-static) .ride__stage { --ground: calc(6rem + 44svh); --art-h: 40svh; }
  html.js .ride:not(.is-static) .station__copy { top: calc(var(--ground) + 2rem); }
  html.js .ride:not(.is-static) .station__copy h3 { font-size: clamp(3rem, 6vw, 4rem); }
  html.js .ride:not(.is-static) .station__type { font-size: 1.15rem; }
  html.js .ride:not(.is-static) .station__text, html.js .ride:not(.is-static) .station__steps li { font-size: 1rem; }
  html.js .ride:not(.is-static) .station__photo { width: 22vw; }
}
/* The opening's video layer never takes clicks once the word is written */
html.js:not([data-hero="intro"]) .opening__intro { pointer-events: none; }
.pass__step:disabled { opacity: 0.6; }
/* The hero's words can't be pressed until they have arrived */
html.js:not([data-hero="done"]) .opening__hero { pointer-events: none; }
.pass__note { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-left: 2px solid var(--brand); background: var(--paper); font-style: normal; color: var(--ink); }
/* With the nav tucked away (reading down the page), the pinned studio preview moves up to the top edge */
.nav.is-away ~ main .studio__stage { top: env(safe-area-inset-top); }
.picker__hex input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-bottom-color: var(--brand); }
.picker__readout { min-width: 0; }
.reel__progress { width: min(100% - 2 * var(--gutter), 1320px); height: 2px; margin: 1.1rem auto 0; background: var(--brand); opacity: 0.55; transform: scaleX(0); transform-origin: left; display: none; }
html.js .gallery.is-pinned .reel__progress { display: block; }
/* Upright tablets: the hero's words sit centred in the space above the drawing */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  .opening__hero { justify-content: center; }
}
/* Colour fields: no empty rows, and the colour code never clipped on the smallest phones */
.colour-field__options:empty { display: none; }
.colour-field__status:empty { min-height: 0; }
.picker__hex input { min-width: 5.6rem; }
@media (max-width: 380px) {
  .picker { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
/* Anything scrolled into view by focus (keyboard, Shift+Tab back up the page) stops below the fixed nav */
html { scroll-padding-top: calc(var(--nav-h, 4.6rem) + 1rem); }
/* The colour code's focus ring stays on screen at the right edge */
.picker__hex { padding-right: 6px; }

.picker__hex input:focus-visible { outline-offset: 1px; }
.colour-field--compact .picker__hex { padding-right: 10px; }