/* =========================================================================
   CENTER STREET CAFÉ
   One stylesheet, mobile-first, organized by section.
   COLOR RULE: every colour in this file is one of the tokens in :root, or is
   derived from one. Never introduce a new hue. See CLAUDE.md §3.
   ========================================================================= */

/* ------------------------------ 1. TOKENS ------------------------------ */
:root {
  /* The entire palette. Nothing else. */
  --red: #9e0f14;
  --red-deep: #6f0a0e;
  --blush: #f3dcdc;
  --ink: #141111;
  --paper: #fbf8f4;
  --stone: #e9e4dd;

  /* Derived, so shadows and scrims stay in-family */
  --ink-90: rgb(20 17 17 / 0.9);
  --ink-70: rgb(20 17 17 / 0.7);
  --ink-45: rgb(20 17 17 / 0.45);
  --ink-12: rgb(20 17 17 / 0.12);
  --ink-06: rgb(20 17 17 / 0.06);
  --paper-90: rgb(251 248 244 / 0.9);
  --paper-75: rgb(251 248 244 / 0.75);
  --paper-60: rgb(251 248 244 / 0.6);
  --paper-25: rgb(251 248 244 / 0.25);
  --paper-12: rgb(251 248 244 / 0.12);
  --red-30: rgb(158 15 20 / 0.3);
  --red-12: rgb(158 15 20 / 0.12);

  /* Type */
  --display: "League Gothic", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Caveat Brush", ui-rounded, cursive;

  /* Fluid space + measure */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-s: clamp(0.85rem, 2vw, 1.25rem);
  --space-m: clamp(1.5rem, 4vw, 2.5rem);
  --space-l: clamp(2.5rem, 7vw, 5rem);
  --space-xl: clamp(4rem, 11vw, 9rem);
  --gutter: clamp(1.15rem, 5vw, 3.5rem);
  --maxw: 78rem;
  --radius: 14px;
  --header-h: 4.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;

  color-scheme: light;
}

/* ------------------------------ 2. FONTS ------------------------------ */
@font-face { font-family: "League Gothic"; src: url("/fonts/league-gothic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("/fonts/caveat-brush.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ------------------------------ 3. RESET ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` (not `hidden`) so no scroll container is created and the sticky
     menu bar keeps working. On body alone this leaves the containing block at
     the full scroll width, which stretched fixed elements past the screen. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* long display type must never cause a sideways scroll */
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

/* CLARITY RULE (CLAUDE.md §3): nothing on this site is allowed to look soft.
   High-quality downscaling, and text that finishes animating on whole pixels. */
img { image-rendering: auto; }
.media img, .media video { backface-visibility: hidden; }
h1, h2, h3, .display, .menu-item__name, .brand__name {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  background: var(--red); color: var(--paper); padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
}
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------ 4. TYPE ------------------------------ */
.display {
  font-family: var(--display);
  font-size: clamp(2.75rem, 11vw, 6rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.eyebrow {
  font-size: clamp(0.66rem, 1.6vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow--light { color: var(--blush); }

.script {
  font-family: var(--script);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--red);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.section { padding-block: var(--space-xl); position: relative; }
.section-head { margin-bottom: var(--space-l); }
.section-head .eyebrow { margin-bottom: var(--space-xs); }
.section-head .script { margin-top: var(--space-xs); }
.section-head__note {
  margin-top: var(--space-s); font-size: 0.8rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-70);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.65rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--red { background: var(--red); color: var(--paper); }
.btn--red:hover { background: var(--red-deep); }
.btn--ghost { color: var(--paper); border: 1.5px solid var(--paper); background: rgb(20 17 17 / 0.35); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--outline { border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--space-s);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em;
  color: var(--red); text-decoration: none; border-bottom: 2px solid var(--red-30);
  padding-bottom: 2px; transition: border-color 0.25s var(--ease-soft);
}
.text-link:hover { border-color: var(--red); }

/* The printed menu's red rule with a dot in the middle */
.rule-dot { display: flex; align-items: center; gap: 0.75rem; }
.rule-dot::before, .rule-dot::after { content: ""; height: 2px; background: var(--red); flex: 1; }

/* ------------------------------ 5. HEADER ------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-s);
  max-width: var(--maxw); margin-inline: auto;
  padding: 0.7rem max(var(--gutter), env(safe-area-inset-right)) 0.7rem max(var(--gutter), env(safe-area-inset-left));
  min-height: var(--header-h);
}
.site-header.is-stuck { background: var(--paper-90); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 1px 0 var(--ink-12); }

.brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; line-height: 0.85; margin-right: auto; min-height: 2.75rem; }
.brand__name { font-family: var(--display); font-size: clamp(1.35rem, 4.2vw, 1.75rem); text-transform: uppercase; letter-spacing: 0.02em; }
.brand__cafe { font-size: clamp(0.5rem, 1.6vw, 0.6rem); letter-spacing: 0.55em; text-transform: uppercase; color: var(--red); font-weight: 700; }
/* On the transparent hero the header sits on photography, so it goes light. */
.site-header:not(.is-stuck) .brand { color: var(--paper); text-shadow: 0 1px 14px var(--ink-70); }
.site-header:not(.is-stuck) .brand__cafe { color: var(--blush); }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.site-nav__list a {
  text-decoration: none; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  position: relative; white-space: nowrap;
  /* 44px floor: laptops have touchscreens too. */
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0.5rem; width: 100%; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out);
}
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-header:not(.is-stuck) .site-nav__list a { color: var(--paper); text-shadow: 0 1px 10px var(--ink-70); }
.site-header:not(.is-stuck) .site-nav__list a::after { background: var(--blush); }
.site-nav__order { display: none; }

.status { display: none; align-items: center; gap: 0.45rem; white-space: nowrap; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-45); flex: none; }
.status.is-open .status__dot { background: var(--red); box-shadow: 0 0 0 0 var(--red-30); animation: pulse 2.4s var(--ease-soft) infinite; }
.site-header:not(.is-stuck) .status { color: var(--paper); text-shadow: 0 1px 10px var(--ink-70); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgb(158 15 20 / 0); } 100% { box-shadow: 0 0 0 0 rgb(158 15 20 / 0); } }

.nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -0.5rem; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 24px; height: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.2s linear, background-color 0.3s var(--ease-soft);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after { position: absolute; top: 7px; }
.site-header:not(.is-stuck) .nav-toggle__bars,
.site-header:not(.is-stuck) .nav-toggle__bars::before,
.site-header:not(.is-stuck) .nav-toggle__bars::after { background: var(--paper); }
[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav.is-open {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-m);
  position: fixed; inset: 0; z-index: 49;
  background: var(--red-deep); color: var(--paper);
  padding: calc(var(--header-h) + env(safe-area-inset-top)) var(--gutter) calc(var(--space-l) + env(safe-area-inset-bottom));
  animation: drawer 0.4s var(--ease-out);
}
/* The drawer is a child of the header, and an ancestor with `backdrop-filter`
   becomes the containing block for `position: fixed` descendants — which pinned
   this to the header's own ~108px box instead of the viewport, so it looked like
   it had no background at all. Drop the filter (and the stuck bar) while open. */
body.nav-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  box-shadow: none;
}
/* The bar now sits on the red drawer, so its marks have to read against it. */
body.nav-open .brand { color: var(--paper); text-shadow: none; }
body.nav-open .brand__cafe { color: var(--blush); }
body.nav-open .status { color: var(--paper); text-shadow: none; }
body.nav-open .nav-toggle__bars,
body.nav-open .nav-toggle__bars::before,
body.nav-open .nav-toggle__bars::after { background: var(--paper); }
/* The drawer is a sibling of these inside the header, so its z-index paints over
   them. Lift the wordmark and the close button back above it, or there is no way
   out of the menu. */
body.nav-open .brand,
body.nav-open .nav-toggle { position: relative; z-index: 50; }
@keyframes drawer { from { opacity: 0; transform: translateY(-1.5rem); } }
.site-nav.is-open .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.site-nav.is-open .site-nav__list a { font-family: var(--display); font-size: clamp(2rem, 11vw, 3rem); letter-spacing: 0.02em; color: var(--paper); text-shadow: none; }
.site-nav.is-open .site-nav__list a::after { background: var(--blush); }
.site-nav.is-open .site-nav__order { background: var(--paper); color: var(--red-deep); }
.site-nav.is-open .site-nav__order:hover { background: var(--blush); color: var(--red-deep); }
.site-nav.is-open .site-nav__order { display: inline-flex; align-self: flex-start; }
body.nav-open { overflow: hidden; }

/* ------------------------------ 5b. INTRO (mask reveal) ------------------------------
   A cream panel with the wordmark punched out of it, so the hero PHOTOGRAPH shows
   through the letters; the cut then rushes outward until it swallows the screen.

   It paints on the very first frame — no `hidden` attribute and no waiting on the
   deferred module — or the page would flash into view before the panel arrived.
   boot.js decides in <head> whether it runs at all. The letters stay closed until
   `.is-playing` is set, which is what keeps a half-loaded font from showing. */
.intro { display: none; }
.js .intro {
  display: block;
  position: fixed; inset: 0; z-index: 90;
  /* Covers instantly, before the script has sized the SVG to the viewport and
     any letterboxing could show the page. It MUST go once the cut starts, or it
     sits behind the mask and fills in the very holes the letters punch. */
  background: var(--paper);
}
.intro.is-playing { background: transparent; }
.js.intro-skip .intro { display: none; }
/* Hold the page still while the panel is up. The failsafe in boot.js adds
   .intro-skip if the module never loads, so this can never stick. */
.js:not(.intro-skip) body { overflow: hidden; }

.intro__svg { width: 100%; height: 100%; display: block; }
.intro__panel { fill: var(--paper); }

/* White keeps the panel, black punches the hole. */
.intro__word, .intro__sub { fill: #000; font-family: var(--display); text-transform: uppercase; }
.intro__word { font-size: 150px; }
.intro__sub { font-size: 48px; }

/* The cut-out stays STATIC. WebKit (every iPhone browser) does not re-render an
   SVG <mask> when the content inside it is animated, so animating the <g> here
   left the logo frozen on iOS. The whole <svg> is scaled instead: the mask is
   evaluated once and the composited result — panel plus holes — is transformed
   as a unit, which WebKit handles like any other element transform.
   Before `.is-playing`, the panel's own cream background covers the holes. */
.intro__cut { transform-box: view-box; }

.intro.is-playing .intro__svg {
  animation: intro-open 2.4s cubic-bezier(0.66, 0, 0.32, 1) forwards;
  transform-origin: 50% 50%;
  will-change: transform;
}
.intro.is-playing { animation: intro-out 0.4s linear 2.05s forwards; }

/* Never below 1: at scale 1 the SVG exactly covers the viewport, and anything
   smaller would let the page show around its edges. */
@keyframes intro-open {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.02); }
  44%  { transform: scale(1.05); }
  100% { transform: scale(34); }
}
@keyframes intro-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* While the panel is up, only the photograph should show through the letters —
   not the headline and chrome sitting on top of it. */
.js:not(.intro-skip) .hero__content,
.js:not(.intro-skip) .slide__caption,
.js:not(.intro-skip) .reel-controls,
.js:not(.intro-skip) .scroll-cue,
.js:not(.intro-skip) .site-header { visibility: hidden; }
/* The hero's dark scrim exists to make headline text readable. During the intro
   there is no headline, and it would leave the letters almost black on black —
   so lift it and let the photograph show at full brightness inside them. */
.js:not(.intro-skip) .hero__shade { opacity: 0; }
.hero__shade { transition: opacity 0.5s var(--ease-soft); }

.intro__skip {
  position: absolute; z-index: 2;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + var(--space-m));
  min-height: 44px; padding: 0.55rem 1.1rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink-12); border-radius: 999px;
  opacity: 0;
}
.intro.is-playing .intro__skip { animation: fade-up 0.5s var(--ease-out) 0.8s forwards; }
.intro__skip:hover { background: var(--ink); color: var(--paper); }

/* Reduced motion: the reveal still happens, just short and without the rush. */
@media (prefers-reduced-motion: reduce) {
  .intro.is-playing .intro__svg { animation: none; transform: scale(1); }
  .intro.is-playing { animation: intro-out 0.3s linear 0.45s forwards; }
  .intro__skip { display: none; }
}

/* ------------------------------ 6. HERO / REEL ------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  background: var(--ink);
  color: var(--paper);
}

.reel { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease-soft), visibility 0s linear 1.1s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-soft), visibility 0s; }

.media { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ink), var(--red-deep)); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* Hero clip layers over its own poster still and fades in once playing, so a
   blocked or slow video simply leaves the sharp still in place. */
.media--hero video { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.6s var(--ease-soft); }
.media--hero video.is-playing { opacity: 1; }

/* Fallback when a photo is missing: the label shows on the brand gradient. */
.media::after {
  content: attr(data-label);
  position: absolute; inset: auto 0 0; padding: 1rem;
  font-family: var(--display); font-size: 1.5rem; text-transform: uppercase;
  color: var(--paper-25); pointer-events: none;
}
.media:has(img.is-loaded)::after, .media:has(video.is-playing)::after { content: none; }

.media--hero { position: absolute; inset: 0; }
/* Heroes are composed with the subject in the right third; on narrow screens
   the crop must follow it instead of centring on empty space. */
.media--hero img, .media--hero video { object-position: 68% center; }
@media (min-width: 48em) { .media--hero img, .media--hero video { object-position: center; } }
.slide.is-active .media--hero img, .slide.is-active .media--hero video { animation: kenburns 9s var(--ease-soft) forwards; }
@keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1%, -0.8%, 0); } }

.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--ink) 2%, rgb(20 17 17 / 0.72) 30%, rgb(20 17 17 / 0.15) 62%, rgb(20 17 17 / 0.45) 100%),
    linear-gradient(to right, var(--ink-70) 0%, rgb(20 17 17 / 0.15) 55%, rgb(20 17 17 / 0) 100%);
}

.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) clamp(9rem, 22vh, 13rem) max(var(--gutter), env(safe-area-inset-left));
}
.hero__eyebrow { margin-bottom: var(--space-s); }
.hero__lede {
  max-width: 34ch; margin-top: var(--space-m);
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.2rem); color: var(--paper);
  text-shadow: 0 1px 20px var(--ink-70);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

/* --- animated wordmark --- */
.wordmark { font-weight: 400; line-height: 0.82; }
.wordmark__line { display: flex; flex-wrap: wrap; font-family: var(--display); font-size: clamp(3.2rem, 15vw, 9.5rem); text-transform: uppercase; letter-spacing: 0.005em; }
.wordmark__line > span { display: inline-block; transform: translateY(0.9em) rotate(6deg); opacity: 0; }
.wordmark__gap { width: 0.28em; }
.js .wordmark__line > span { animation: letter-in 0.85s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
@keyframes letter-in { to { transform: translateY(0) rotate(0); opacity: 1; } }

.wordmark__cafe { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.35rem; padding-left: 0.2rem; }
.wordmark__cafe-text { font-size: clamp(0.85rem, 3vw, 1.5rem); letter-spacing: 0.6em; text-transform: uppercase; font-weight: 600; color: var(--blush); white-space: nowrap; }
.wordmark__rule { height: 2px; background: var(--blush); flex: 1; max-width: 9rem; transform: scaleX(0); }
.js .wordmark__rule { animation: rule-out 0.9s var(--ease-out) 0.85s forwards; }
.wordmark__cafe .wordmark__rule:first-child { transform-origin: right; }
.wordmark__cafe .wordmark__rule:last-child { transform-origin: left; }
@keyframes rule-out { to { transform: scaleX(1); } }
.js .wordmark__cafe-text { opacity: 0; animation: fade-up 0.8s var(--ease-out) 0.75s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.js .hero__eyebrow, .js .hero__lede, .js .hero__ctas { opacity: 0; animation: fade-up 0.9s var(--ease-out) forwards; }
.js .hero__eyebrow { animation-delay: 0.1s; }
.js .hero__lede { animation-delay: 1s; }
.js .hero__ctas { animation-delay: 1.15s; }

.slide__caption {
  position: absolute; z-index: 2; left: max(var(--gutter), env(safe-area-inset-left)); right: var(--gutter);
  bottom: clamp(6.2rem, 15vh, 8rem);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-75);
  opacity: 0; transform: translateY(0.6rem); transition: opacity 0.6s var(--ease-out) 0.35s, transform 0.6s var(--ease-out) 0.35s;
}
.slide.is-active .slide__caption { opacity: 1; transform: none; }
.slide__num { color: var(--blush); font-weight: 700; margin-right: 0.5rem; }

/* --- reel controls (story-style progress bars) --- */
.reel-controls {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--space-s));
  display: flex; align-items: center; gap: var(--space-s);
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.reel-controls__list { display: flex; gap: 0.4rem; flex: 1; }
.reel-tab { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.8rem 0 0.45rem; display: block; text-align: left; }
.reel-tab__label {
  display: block; font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--paper-75); margin-bottom: 0.45rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.reel-tab__bar { display: block; height: 3px; border-radius: 3px; background: var(--paper-25); overflow: hidden; }
.reel-tab__fill { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.reel-tab[aria-current="true"] .reel-tab__label { opacity: 1; color: var(--paper); }
.reel-tab[aria-current="true"] .reel-tab__fill { animation: fill linear forwards; animation-duration: var(--slide-dur, 6.5s); }
.reel-tab.is-seen .reel-tab__fill { transform: scaleX(1); }
.reel-tab:hover .reel-tab__label { opacity: 1; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reel.is-paused .reel-tab__fill, .hero.is-paused .reel-tab__fill { animation-play-state: paused; }

.reel-pause { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--paper-25); }
.reel-pause__icon { width: 10px; height: 12px; border-left: 3px solid var(--paper); border-right: 3px solid var(--paper); }
.reel-pause[aria-pressed="true"] .reel-pause__icon {
  width: 0; height: 0; border: 0; border-left: 11px solid var(--paper);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px;
}

.scroll-cue { position: absolute; z-index: 3; right: var(--gutter); bottom: 45%; width: 44px; height: 44px; display: none; place-items: center; }
.scroll-cue span { display: block; width: 1px; height: 34px; background: linear-gradient(var(--paper-60), rgb(251 248 244 / 0)); }
.scroll-cue span::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 5px; height: 5px; margin-left: -2px;
  border-radius: 50%; background: var(--blush); animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(30px); opacity: 0; } 100% { opacity: 0; } }

/* ------------------------------ 7. MARQUEE ------------------------------ */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding-block: 0.85rem; }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.marquee__track span:nth-child(even) { color: var(--blush); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------ 8. REVEALS ------------------------------ */
/* Only hide things when JS is running, so content is never stuck invisible. */
.js [data-reveal] { opacity: 0; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: transform, opacity; }
.js [data-reveal="up"] { transform: translateY(2.75rem); }
.js [data-reveal="left"] { transform: translateX(-3.5rem); }
.js [data-reveal="right"] { transform: translateX(3.5rem); }
.js [data-reveal="pop"] { transform: translateY(3rem) scale(0.94); }
.js [data-reveal="scale"] { transform: scale(0.9); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-in { transition-delay: var(--delay, 0s); }

/* ------------------------------ 9. FAVORITES ------------------------------ */
.favorites { background: var(--paper); }
.dish-grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
.dish {
  background: var(--paper); border: 1px solid var(--ink-12); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-soft);
}
.dish:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px var(--ink-45); border-color: var(--red-30); }
.media--dish { aspect-ratio: 4 / 5; }
.media--dish img { transition: transform 0.9s var(--ease-out); }
.dish:hover .media--dish img { transform: scale(1.04); }
.dish__body { padding: var(--space-s); display: grid; gap: 0.3rem; }
.dish__tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.dish__name { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 1.9rem); text-transform: uppercase; font-weight: 400; line-height: 1; }
.dish__desc { font-size: 0.86rem; color: var(--ink-70); }
.dish__price { font-weight: 700; color: var(--red); font-size: 1.05rem; }

/* ------------------------------ 10. STORY ------------------------------ */
.story { background: var(--stone); }
.story__layout { display: grid; gap: var(--space-m); }
.story__stage { position: relative; }
.story__frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink);
  box-shadow: 0 26px 60px -34px var(--ink-70);
}
.media--stage { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.85s var(--ease-soft), transform 1.4s var(--ease-out); }
.media--stage.is-active { opacity: 1; transform: scale(1); }
.story__counter {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.12em; color: var(--paper);
  padding: 0.15rem 0.6rem; border-radius: 999px; background: rgb(20 17 17 / 0.55); backdrop-filter: blur(2px);
}

.story__cards { display: grid; gap: var(--space-m); }
.story-card {
  background: var(--paper); border-radius: var(--radius); padding: var(--space-m);
  border-left: 4px solid var(--red);
  box-shadow: 0 16px 40px -30px var(--ink-70);
}
.story-card__num { font-family: var(--display); font-size: 2.1rem; color: var(--red); line-height: 1; }
.story-card__title { font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.4rem); text-transform: uppercase; font-weight: 400; line-height: 1; margin-block: 0.35rem 0.6rem; }
.story-card p:last-child { color: var(--ink-70); }
/* Cards "pop out of the slide" as they arrive. */
.js .story-card { opacity: 0; transform: translateY(3.5rem) scale(0.96); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.js .story-card.is-in { opacity: 1; transform: none; }
.js .story-card.is-current { border-left-color: var(--red); box-shadow: 0 22px 50px -26px var(--ink-70); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); margin-top: var(--space-l); }
.stat { display: grid; padding: var(--space-s); background: var(--paper); border-radius: var(--radius); align-content: start; }
.stat__num { font-family: var(--display); font-size: clamp(2.6rem, 9vw, 4rem); line-height: 0.9; color: var(--red); }
.stat__unit { font-family: var(--display); font-size: 1.2rem; color: var(--red); margin-top: -0.4rem; }
.stat__label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); margin-top: 0.35rem; }

/* ------------------------------ 11. MENU ------------------------------ */
.menu { background: var(--paper); padding-bottom: var(--space-l); }
.menu-chips {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 20;
  background: var(--paper-90); backdrop-filter: blur(12px);
  border-block: 1px solid var(--ink-12);
  margin-bottom: var(--space-l);
}
.menu-chips__list {
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.7rem max(var(--gutter), env(safe-area-inset-left));
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.menu-chips__list::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1rem;
  border: 1px solid var(--ink-12); border-radius: 999px; white-space: nowrap; scroll-snap-align: start;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.is-current { background: var(--red); border-color: var(--red); color: var(--paper); }

.menu-cat { scroll-margin-top: 9rem; padding-bottom: var(--space-l); }
.menu-cat + .menu-cat { border-top: 1px solid var(--ink-12); padding-top: var(--space-l); }
.menu-cat__title { font-family: var(--display); font-size: clamp(2.4rem, 10vw, 4rem); text-transform: uppercase; font-weight: 400; line-height: 0.9; }
.menu-cat__title::after { content: ""; display: block; width: 3.5rem; height: 4px; background: var(--red); margin-top: 0.6rem; }
.menu-cat__intro { margin-top: var(--space-s); color: var(--ink-70); max-width: 34ch; }
.menu-cat__intro strong { color: var(--ink); display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.35rem; }
.menu-cat__head .script { margin-top: var(--space-s); }
.menu-cat__head .eyebrow { margin-bottom: 0.4rem; }

.menu-list { margin-top: var(--space-m); display: grid; gap: 0.15rem; }
.menu-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.5rem;
  padding-block: 0.7rem; border-bottom: 1px dotted var(--ink-12);
}
.menu-item__name { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.menu-item__dots { border-bottom: 2px dotted var(--ink-12); transform: translateY(-0.25rem); }
.menu-item__price { font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.menu-item__desc { grid-column: 1 / -1; font-size: 0.84rem; color: var(--ink-70); margin-top: 0.15rem; font-style: italic; }

/* Coffee menu: two sub-columns of short lists under one category. */
.menu-split { display: grid; gap: var(--space-m) var(--space-l); }
.menu-sub {
  font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem); text-transform: uppercase;
  font-weight: 400; line-height: 1; color: var(--red); margin-top: var(--space-m);
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.menu-split > div > .menu-sub:first-child { margin-top: 0; }
.menu-sub__note { font-family: var(--script); font-size: 0.85rem; color: var(--ink-70); text-transform: none; letter-spacing: 0; }
.menu-note { font-size: 0.78rem; font-style: italic; color: var(--ink-70); margin-top: 0.6rem; }
.menu-cat__intro strong.menu-cat__brand { display: inline; font-size: inherit; letter-spacing: 0.16em; text-transform: none; margin: 0; }
.menu-item__name abbr { text-decoration: none; color: var(--red); }

.callout { margin-top: var(--space-m); background: var(--blush); border-radius: var(--radius); padding: var(--space-s) var(--space-m); }
.callout--blush { background: var(--blush); }
.callout__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem; }
.callout__inline { font-size: 1.05rem; font-weight: 600; }
.callout__list { margin-top: 0.75rem; display: grid; gap: 0.35rem; }
.callout__list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.callout__list span:last-child { font-weight: 700; color: var(--red); }

.menu__fine { margin-top: var(--space-m); font-size: 0.78rem; color: var(--ink-70); text-align: center; }

/* ------------------------------ 12. BUILDER ------------------------------ */
.build { background: var(--ink); color: var(--paper); }
.section-head--light .display { color: var(--paper); }
.section-head--light .script { color: var(--blush); }
.build__layout { display: grid; gap: var(--space-l); }

.build__art { position: relative; }
.sandwich { width: 100%; max-width: 30rem; margin-inline: auto; overflow: visible; }
.sw-board { fill: rgb(251 248 244 / 0.07); }
.sw-board-rim { fill: none; stroke: var(--paper-12); stroke-width: 1.5; }
.sw-layer { transform-origin: 160px 130px; }

/* The sandwich builds itself, bottom slab upwards, when the section arrives. */
.js .sw-layer { opacity: 0; transform: translateY(-12px); }
.js .build.is-in .sw-layer { animation: stack 0.55s var(--ease-out) forwards; }
.js .build.is-in .sw-bread-bottom { animation-delay: 0.05s; }
.js .build.is-in .sw-lettuce { animation-delay: 0.13s; }
.js .build.is-in .sw-tomato { animation-delay: 0.21s; }
.js .build.is-in .sw-radish { animation-delay: 0.28s; }
.js .build.is-in .sw-protein { animation-delay: 0.36s; }
.js .build.is-in .sw-extra { animation-delay: 0.43s; }
.js .build.is-in .sw-avocado { animation-delay: 0.48s; }
.js .build.is-in .sw-cheese { animation-delay: 0.54s; }
.js .build.is-in .sw-sprouts { animation-delay: 0.62s; }
.js .build.is-in .sw-bread-top { animation-delay: 0.7s; }
@keyframes stack { to { opacity: 1; transform: none; } }

/* Focaccia: flat slabs, pale and dimpled, like the real loaf. */
.sw-bread-bottom rect, .sw-bread-top rect { fill: var(--blush); }
.sw-dimple { fill: var(--red-12); }
.sw-crumb { stroke: var(--red-12); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.sw-rosemary { stroke: var(--red-30); stroke-width: 2; stroke-linecap: round; fill: none; }

.sw-lettuce path { fill: var(--paper-60); }
.sw-tomato circle { fill: var(--red); opacity: 0.85; }
.sw-radish path { stroke: var(--red); stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.6; }
.sw-cheese path { fill: var(--blush); opacity: 0.8; }
.sw-avocado path { fill: var(--paper-25); }
/* The signature: fine strands spilling over the front edge. */
.sw-sprouts path { stroke: var(--paper-75); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.sw-protein-fill { fill: var(--red); }
.sw-protein-mark { stroke: var(--red-deep); stroke-width: 3; stroke-linecap: round; fill: none; }

/* Toggled layers */
.sw-extra, .sw-avocado { display: none; }
[data-has-extra] .sw-extra, [data-has-avocado] .sw-avocado { display: block; }
.sw-lettuce, .sw-tomato, .sw-radish, .sw-cheese { transition: opacity 0.4s var(--ease-soft); }
.is-off { opacity: 0 !important; }

/* Protein colour shifts with the pick — still inside the palette. */
[data-protein="turkey"] .sw-protein-fill, [data-protein="tuna"] .sw-protein-fill { fill: var(--blush); }
[data-protein="turkey"] .sw-protein-mark, [data-protein="tuna"] .sw-protein-mark { stroke: var(--red-30); }
[data-protein="portobello"] .sw-protein-fill, [data-protein="brisket"] .sw-protein-fill { fill: var(--red-deep); }
[data-protein="tonkatsu"] .sw-protein-fill { fill: var(--blush); }
[data-protein="tonkatsu"] .sw-protein-mark { stroke: var(--red); }

.build__step { margin-bottom: var(--space-m); }
.build__step legend { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-s); }
.build__stepnum { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--red); color: var(--paper); font-size: 0.8rem; }
.build__free { font-family: var(--script); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--blush); }

.option-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.option {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1px solid var(--paper-25); border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.option:hover { border-color: var(--blush); transform: translateX(3px); }
.option input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--paper-60); border-radius: 50%; flex: none; transition: border-color 0.25s, box-shadow 0.25s; }
.option input[type="checkbox"] { border-radius: 5px; }
.option input:checked { border-color: var(--red); box-shadow: inset 0 0 0 5px var(--red); }
.option input[type="checkbox"]:checked { box-shadow: inset 0 0 0 4px var(--red); }
.option span:nth-of-type(1) { flex: 1; font-size: 0.86rem; font-weight: 600; text-wrap: balance; }
.option__price { font-weight: 700; color: var(--blush); font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }
.option:has(input:checked) { border-color: var(--red); background: rgb(158 15 20 / 0.16); }

.topping-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topping { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.45rem 0.9rem; border: 1px solid var(--paper-25); border-radius: 999px; cursor: pointer; font-size: 0.78rem; transition: background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft); }
.topping input { appearance: none; width: 14px; height: 14px; border: 2px solid var(--paper-60); border-radius: 4px; flex: none; }
.topping input:checked { background: var(--blush); border-color: var(--blush); }
.topping:has(input:checked) { border-color: var(--blush); }
.topping:has(input:not(:checked)) { opacity: 0.72; }

.receipt { border: 1px solid var(--paper-25); border-radius: var(--radius); padding: var(--space-m); background: rgb(251 248 244 / 0.04); }
.receipt__lines { display: grid; gap: 0.4rem; margin-bottom: var(--space-s); }
.receipt__lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--paper-75); }
.receipt__lines li span:last-child { font-variant-numeric: tabular-nums; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: var(--space-s); border-top: 1px solid var(--paper-25); margin-bottom: var(--space-s); }
.receipt__total span:first-child { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.receipt__total span:last-child { font-family: var(--display); font-size: clamp(2.2rem, 8vw, 3rem); color: var(--blush); line-height: 1; font-variant-numeric: tabular-nums; }
.receipt__fine { font-size: 0.74rem; color: var(--paper-60); margin-top: var(--space-xs); text-align: center; }

/* ------------------------------ 13. VISIT ------------------------------ */
.visit { background: var(--stone); }
.visit__layout { display: grid; gap: var(--space-l); }
.visit__address { font-style: normal; font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.5; margin-top: var(--space-s); }
.visit .display { margin-top: var(--space-xs); }
.visit__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.visit__note { margin-top: var(--space-s); font-size: 0.8rem; color: var(--ink-70); }
.visit__links { margin-top: var(--space-m); display: grid; gap: 0.5rem; }
.visit__links a { font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; }

.hours { background: var(--paper); border-radius: var(--radius); padding: var(--space-m); align-self: start; }
.hours__title { font-family: var(--display); font-size: 2rem; text-transform: uppercase; font-weight: 400; margin-bottom: var(--space-s); }
.hours__table th, .hours__table td { text-align: left; padding-block: 0.6rem; border-bottom: 1px dotted var(--ink-12); font-size: 0.9rem; }
.hours__table th { font-weight: 600; }
.hours__table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-70); }
.hours__table tr.is-today th, .hours__table tr.is-today td { color: var(--red); font-weight: 700; }
.hours__tag { display: inline-block; margin-left: 0.5rem; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red-30); border-radius: 999px; padding: 0.1rem 0.5rem; }

/* ------------------------------ 14. FOOTER ------------------------------ */
.site-footer { background: var(--ink); color: var(--paper); padding-block: var(--space-l) calc(var(--space-m) + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: var(--space-s); text-align: center; justify-items: center; }
.brand--footer { color: var(--paper); display: flex; flex-direction: column; align-items: center; line-height: 0.85; }
.brand--footer .brand__name { font-size: clamp(2rem, 9vw, 3rem); }
.brand--footer .brand__cafe { color: var(--blush); }
.site-footer__by { font-family: var(--script); font-size: 1.2rem; color: var(--blush); }
.site-footer__meta { font-size: 0.88rem; color: var(--paper-75); }
.site-footer__meta a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer__fine { font-size: 0.72rem; color: var(--paper-60); max-width: 44ch; }

/* ------------------------------ 15. BREAKPOINTS ------------------------------ */
@media (min-width: 30em) { /* 480px */
  .dish-grid { grid-template-columns: repeat(2, 1fr); }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48em) { /* 768px — tablet */
  :root { --header-h: 5rem; }
  .status { display: flex; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .scroll-cue { display: grid; }
  .menu-cat { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-m) var(--space-l); align-items: start; }
  .menu-cat__head { position: sticky; top: 11rem; }
  .menu-list { margin-top: 0; }
  .menu-cat .callout { grid-column: 2; margin-top: var(--space-s); }
  /* The coffee category's two sub-columns sit in the list column. */
  .menu-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #m-coffee { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .visit__layout { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-l); align-items: start; }
  .site-footer__inner { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .site-footer__meta { justify-self: end; }
  .site-footer__fine { grid-column: 1 / -1; max-width: none; }
  .option-grid--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .receipt__lines li { font-size: 0.92rem; }
}

@media (min-width: 62em) { /* 992px — desktop */
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: var(--space-m); }
  .site-nav__order { display: inline-flex; min-height: 2.75rem; padding: 0.55rem 1.25rem; font-size: 0.7rem; }
  .dish-grid { grid-template-columns: repeat(3, 1fr); }
  .build__layout { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-l); align-items: start; }
  .build__art { position: sticky; top: 8rem; }
  .story__layout { grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: start; }
  .story__stage { position: sticky; top: 7.5rem; }
  .story__frame { aspect-ratio: 3 / 4; }
  .story__cards { gap: 45vh; padding-block: 20vh 30vh; } /* space so each card gets its own scroll moment */
  .hero__content { padding-bottom: clamp(10rem, 24vh, 15rem); }
  .reel-tab { padding-top: 1rem; }
}

@media (min-width: 62em) and (max-width: 78em) {
  .site-nav__list { gap: clamp(0.75rem, 1.6vw, 1.25rem); }
  .site-nav__list a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .site-nav__order { padding: 0.5rem 0.9rem; font-size: 0.64rem; }
  .status { font-size: 0.62rem; letter-spacing: 0.06em; }
}

@media (min-width: 100em) { /* 1600px+ — keep it from sprawling */
  :root { --maxw: 88rem; }
  .hero__lede { max-width: 42ch; }
}

/* Short landscape phones: the hero must not trap the content. */
@media (max-height: 34em) and (orientation: landscape) {
  .hero { min-height: 38rem; }
  .hero__content { padding-bottom: 7rem; }
  .slide__caption { display: none; }
  .scroll-cue { display: none; }
}

/* ------------------------------ 16. REDUCED MOTION ------------------------------
   Motion still plays — it just becomes short and small. Nothing is removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.18s !important;
  }
  .js [data-reveal] { transform: none !important; }
  .js .story-card { transform: none !important; }
  .js .wordmark__line > span { opacity: 1; transform: none; }
  .js .wordmark__rule { transform: scaleX(1); }
  .slide.is-active .media--hero img, .slide.is-active .media--hero video { animation: none; transform: scale(1.02); }
  .marquee__track { animation: none; transform: none; }
  .scroll-cue span::after { animation: none; }
}

/* ------------------------------ 17. PRINT ------------------------------ */
@media print {
  .site-header, .reel-controls, .scroll-cue, .marquee, .build, .hero__ctas, .visit__ctas { display: none !important; }
  .hero { min-height: auto; color: var(--ink); background: none; }
  .hero__shade, .reel { display: none; }
  body { background: none; }
  .section { padding-block: 1.5rem; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}