/* ==========================================================================
   Nairobi Brisket King — site styles
   --------------------------------------------------------------------------
   Night → morning. The page follows the real overnight cook: the hero is 6 PM
   in charcoal, (01) The cook runs the clock to 11 AM and the page dawns into
   paper, the board is served on kraft at eleven, and the footer is dusk again.
   Each zone declares data-theme="night" | "paper" | "kraft", which sets --bg,
   --fg, --fg-muted, --line and --accent for everything inside it.

   Colour ownership (keep it this way, or the order button stops being the
   loudest thing on the page):
     --ember   WhatsApp ORDER buttons only, label always --char (5.5:1), and
               only on a dark surface. On paper/kraft it fails (2.8:1), so every
               order module on a light section is a dark docket card.
     --glow    decoration only (firebox light, the ruler marker). Never text.
     --oxblood the day accent: section numbers, stamp, tags, margin notes.
   One radius (--r: 4px) everywhere: signage and dockets, not app pills.

   Motion: everything is visible by default. Elements only start hidden when
   <html> has .motion-ok (set inline in <head> when the visitor hasn't asked for
   reduced motion or Save-Data), and site.js removes .motion-ok again if the
   animation scripts don't arrive.
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks (measured with fontTools), so headlines keep their
   line breaks when the webfonts land. Impact on Windows/macOS, Arial Bold or
   Roboto Bold elsewhere; Arial or Roboto for the body. */
@font-face {
  font-family: "BS Fallback";
  src: local("Impact");
  font-weight: 100 900;
  size-adjust: 92.9%;
  ascent-override: 106.1%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "BS Fallback 2";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 100 900;
  size-adjust: 69%;
  ascent-override: 142.8%;
  descent-override: 31.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.4%;
  ascent-override: 89.2%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback 2";
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 100%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Night */
  --char: #14100d;
  --bark: #2a1d15;
  --cream: #f2e6d3;
  --smoke: #a89a8b;
  /* The order button, and nothing else */
  --ember: #e8601f;
  --ember-hi: #f0712e;
  /* Decoration only */
  --glow: #f2a65a;
  /* Day */
  --paper: #f1e7d6;
  --kraft: #e8d8bf;
  --ink: #22170f;
  --ink-muted: #5e4e42;
  --oxblood: #6b2216;

  /* Type */
  --display: "Big Shoulders", "BS Fallback", "BS Fallback 2", Impact, sans-serif;
  --sans: "Archivo", "Archivo Fallback", "Archivo Fallback 2", Arial, sans-serif;
  --fs-h1: clamp(2.5rem, min(12.6vw, 2.2rem + 5vw, 14svh), 6.25rem);
  --fs-h2: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);
  --fs-clock: clamp(6rem, min(13vw, 26svh), 13rem);
  --fs-stage-time: clamp(3.25rem, 2.2rem + 5vw, 5rem);
  --fs-item: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-price: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);

  /* Space and shape */
  --r: 4px;
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --wrap: 1240px;
  --pad-x: clamp(1rem, 4vw, 3rem);
  --header-h: 56px;
  --bar-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Print grain, rendered once per tile (no animation, no blend modes) */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .12  0 0 0 0 .06  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) { :root { --header-h: 72px; } }

[data-theme="night"] {
  --bg: var(--char);
  --fg: var(--cream);
  --fg-muted: var(--smoke);
  --line: rgb(242 230 211 / 0.14);
  --line-strong: rgb(242 230 211 / 0.32);
  --accent: var(--smoke);
  --grain: var(--grain-light);
  --marker: var(--glow);
}
[data-theme="paper"], [data-theme="kraft"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --line: rgb(34 23 15 / 0.14);
  --line-strong: rgb(34 23 15 / 0.34);
  --accent: var(--oxblood);
  --grain: var(--grain-dark);
  --marker: var(--oxblood);
}
[data-theme="kraft"] { --bg: var(--kraft); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: calc(var(--bar-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  background: var(--char);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
button, input { font: inherit; }
b { font-weight: 700; }
[hidden] { display: none !important; }

[data-theme] { background-color: var(--bg); color: var(--fg); }
[data-zone] { background-image: var(--grain); }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: var(--r); }
::selection { background: var(--glow); color: var(--char); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.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;
}
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cream); color: var(--char); padding: 10px 16px; border-radius: var(--r);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Shared type ---------- */
.eyebrow, .kicker, .chapter__num, .docket__what, .chip, .spec dt, .docket__facts dt, .poster__top, .tag, .clock-out__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.chapter__num { display: flex; align-items: center; gap: 0.9em; color: var(--accent); margin-bottom: 1rem; }
.chapter__num span { display: inline-flex; align-items: center; gap: 0.9em; font-variant-numeric: tabular-nums; }
.chapter__num span::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.6; }
.chapter__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--fg-muted); max-width: 36rem; }
.lede b { color: var(--fg); }
.kicker { color: var(--fg-muted); margin-bottom: 0.75rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.6875rem; letter-spacing: 0.12em; line-height: 1;
  padding: 4px 6px; border: 1px solid currentColor; border-radius: var(--r);
  color: var(--accent); vertical-align: middle;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-weight: 600; font-size: 0.9375rem;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.32em;
}
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease); }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow--inline { min-height: 0; font-size: inherit; }
.link-arrow--inline svg { width: 14px; height: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.4rem;
  border: 0; border-radius: var(--r);
  font: 600 1rem/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--cta { background: var(--ember); color: var(--char); }
.btn--cta:hover { background: var(--ember-hi); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.btn--line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line:hover { background: rgb(34 23 15 / 0.06); }
.btn--sm { min-height: 40px; padding: 0 1rem; font-size: 0.875rem; }
.btn--sm svg { width: 17px; height: 17px; }
.btn--block { width: 100%; }

/* ---------- Photos as prints (stand-ins from the WhatsApp broadcast) ---------- */
.print { position: relative; overflow: hidden; border-radius: 2px; background: var(--bark); }
.print img { width: 100%; height: 100%; object-fit: cover; }
.print::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(242 230 211 / 0.12); pointer-events: none; }
.chip {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 0.625rem; letter-spacing: 0.1em; line-height: 1;
  padding: 5px 7px; border-radius: var(--r);
  background: rgb(20 16 13 / 0.78); color: var(--cream);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform 0.45s var(--ease), background-color 0.35s, color 0.35s, border-color 0.35s;
}
.site-header.is-scrolled { background-color: var(--bg); border-bottom-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--fg); margin-right: auto; }
.brand__mark { width: 26px; height: 30px; flex: none; }
.brand__type { display: grid; line-height: 0.9; text-transform: uppercase; font-family: var(--display); }
.brand__city { font-weight: 700; font-size: 0.625rem; letter-spacing: 0.34em; color: var(--fg-muted); }
.brand__name { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; }
.clock-out { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.clock-out__label { display: none; color: var(--fg-muted); font-size: 0.625rem; }
.clock-out__time {
  display: inline-block; min-width: 4.6em; text-align: right;
  font: 700 1.0625rem/1 var(--display); letter-spacing: 0.04em;
  transition: opacity 0.3s;
}
html.is-cooking .clock-out { opacity: 0; }
.clock-out { transition: opacity 0.3s; }
.nav { display: none; gap: 1.5rem; font-size: 0.9375rem; }
.nav a { text-decoration: none; opacity: 0.86; }
.nav a:hover { opacity: 1; text-decoration: underline; }
/* The header pill stays a ghost while another order button is on screen; one ember per viewport */
.header-cta { display: none; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.header-cta:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.header-cta.is-live { background: var(--ember); color: var(--char); box-shadow: none; }
.header-cta.is-live:hover { background: var(--ember-hi); }
.site-header:not([data-theme="night"]) .header-cta.is-live { background: var(--char); color: var(--ember); }
.site-header:not([data-theme="night"]) .header-cta.is-live:hover { background: var(--bark); }
@media (min-width: 760px) {
  .header-cta { display: inline-flex; }
  .clock-out__label { display: inline; }
  .brand__mark { width: 30px; height: 35px; }
  .brand__name { font-size: 1.375rem; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
}
@media (min-width: 1100px) { .nav { gap: 1.75rem; } }

/* ---------- Hero · 6:00 PM ---------- */
.hero { position: relative; overflow: clip; padding: calc(var(--header-h) + 18px) 0 0; }
.hero__glow {
  position: absolute; inset: auto 0 0; height: 70%; pointer-events: none;
  background: radial-gradient(90% 60% at 30% 100%, rgb(242 166 90 / 0.2), rgb(232 96 31 / 0.06) 45%, transparent 72%);
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__eyebrow { color: var(--fg-muted); margin-bottom: 10px; }
.hero__title {
  font-family: var(--display); font-weight: 800; font-size: var(--fs-h1);
  line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase;
  margin-bottom: 14px; text-wrap: balance;
}
.hero__title span { display: block; }
.hero__sub { font-size: 0.9375rem; line-height: 1.45; color: var(--fg-muted); max-width: 30rem; margin-bottom: 16px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-bottom: 12px; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-muted); }
.proof li { display: inline-flex; align-items: center; }
.proof li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 10px; opacity: 0.7; }
.hero__photo { margin: 22px calc(var(--pad-x) * -1) 0; aspect-ratio: 16 / 10; border-radius: 0; }
.hero__photo img { object-position: 50% 42%; }
.serial { display: none; }
@media (min-width: 640px) {
  .hero__sub { font-size: 1.0625rem; }
  .hero__photo { margin-inline: 0; border-radius: 2px; aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 3svh) 0 5svh; }
  .hero__grid {
    width: 100%;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    column-gap: clamp(40px, 6vw, 96px); align-items: center;
  }
  .hero__title { max-width: none; margin-bottom: 18px; }
  .hero__sub { font-size: 1.125rem; margin-bottom: 26px; }
  .hero__actions { margin-bottom: 22px; }
  .hero__photo { margin: 0; aspect-ratio: 4 / 5; width: 100%; max-height: min(68svh, 540px); justify-self: end; }
  .serial {
    display: block; position: absolute; right: calc(var(--pad-x) * -0.5 - 6px); top: 50%;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); white-space: nowrap;
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-muted);
  }
}

/* ---------- (01) The cook ----------
   Default = flow: night stages, a dawn band, day stages. The pinned desktop
   mode further down only applies with .motion-ok at >= 1024 x 600. */
.cook { position: relative; }
.cook__layer { position: relative; }
.cook__layer--night { padding-top: var(--section-y); overflow: clip; }
.cook__glow {
  position: absolute; inset: auto 0 0; height: 60%; pointer-events: none; opacity: var(--glow-o, 1);
  background: radial-gradient(70% 60% at 22% 100%, rgb(242 166 90 / 0.2), rgb(232 96 31 / 0.05) 50%, transparent 74%);
}
.cook__inner { position: relative; }
.cook__head { max-width: 40rem; margin-bottom: 12px; }
.cook__head .chapter__title { margin-bottom: 0.9rem; }
.skip-cook {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px;
  font-size: 0.875rem; color: var(--fg-muted);
}
.skip-cook svg { width: 14px; height: 14px; }
.cook__clock, .ruler, .cook__head--copy { display: none; }
.stages { list-style: none; }
.stage {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: 14px 16px; padding: 30px 0; border-top: 1px solid var(--line);
}
.stage__head { grid-column: 1 / -1; display: grid; gap: 6px; }
.stage__time {
  font-family: var(--display); font-weight: 800; font-size: var(--fs-stage-time);
  line-height: 0.85; text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap;
}
.stage__title { font: 800 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg-muted); }
.stage__photo { aspect-ratio: 4 / 5; }
.stage__text { align-self: end; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-muted); }
.stage__sig { display: block; margin-top: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }
.cook__dawn {
  height: 42svh; position: relative;
  background: linear-gradient(var(--char), #2c1d13 22%, #6a4329 48%, #c79466 74%, var(--paper));
}
.cook__dawn span {
  position: absolute; left: var(--pad-x); top: 18%;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke);
}
.cook__layer--day { padding-bottom: calc(var(--section-y) * 0.6); }
.cook__layer--day .stage:first-child { border-top: 0; }
@media (min-width: 640px) {
  .stage { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 28px; }
  .stage__text { font-size: 1rem; max-width: 30rem; }
}
@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0, 17rem) minmax(0, 17rem) minmax(0, 1fr); align-items: end; }
  .stage__time { font-size: 4rem; }
  .stage__head { grid-column: 1; align-self: end; }
  .stage__photo { grid-column: 2; }
  .stage__text { grid-column: 3; }
}

/* Pinned desktop mode: CSS sets the whole layout at first paint (no JS pin-spacer, no shift) */
@media (min-width: 1024px) and (min-height: 600px) {
  .motion-ok .cook { height: calc(100svh + 320svh); }
  .motion-ok .cook__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
  .motion-ok .cook__layer { position: absolute; inset: 0; padding: 0; }
  .motion-ok .cook__dawn { display: none; }
  .motion-ok .cook__glow { height: 75%; }
  /* the layer rises, its box clips, and the content inside counter-moves so it stays put */
  .motion-ok .cook__layer--day { transform: translateY(100%); background: none; }
  .motion-ok .cook__day-inner { position: absolute; inset: 0; overflow: clip; background-color: var(--paper); background-image: var(--grain-dark); }
  .motion-ok .cook__day-inner > .cook__inner { transform: translateY(-100%); }
  /* the horizon: a band of first light rides just ahead of the day layer */
  .motion-ok .cook__layer--day::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34svh; pointer-events: none;
    background: linear-gradient(transparent, rgb(242 166 90 / 0.16) 70%, rgb(242 166 90 / 0.32));
  }
  .motion-ok .cook__layer--day::after {
    content: "Sunrise, about 6:30 AM"; position: absolute; left: var(--pad-x); top: 0; z-index: 2;
    transform: translateY(-140%);
    font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
  }
  .motion-ok .cook__inner {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head" "clock stages" "ruler ruler";
    column-gap: clamp(32px, 5vw, 80px);
    padding-top: calc(var(--header-h) + 2.5svh);
    padding-bottom: 3.5svh;
  }
  .motion-ok .cook__head {
    grid-area: head; max-width: none; margin: 0;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(32px, 5vw, 80px);
    align-items: end;
  }
  .motion-ok .cook__head .chapter__num { grid-column: 1 / -1; margin-bottom: 0.6rem; }
  .motion-ok .cook__head .chapter__title { font-size: clamp(2.5rem, 4.4vw, 4.75rem); margin: 0; white-space: nowrap; }
  .motion-ok .cook__head .lede { font-size: 1rem; max-width: 30rem; }
  .motion-ok .cook__head .skip-cook { position: absolute; right: var(--pad-x); top: calc(var(--header-h) + 2.5svh - 12px); margin: 0; }
  .motion-ok .cook__head--copy { display: grid; }
  .motion-ok .cook__clock { display: block; grid-area: clock; align-self: center; }
  .motion-ok .ruler { display: block; grid-area: ruler; }
  .motion-ok .stages { grid-area: stages; display: grid; align-self: center; min-height: 0; }
  .motion-ok .stage {
    grid-area: 1 / 1; padding: 0; border: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "photo ." "photo head" "photo text";
    column-gap: 28px; row-gap: 12px; align-items: end;
  }
  .motion-ok .stage__photo { grid-area: photo; height: min(52svh, 460px); width: auto; aspect-ratio: 4 / 5; }
  .motion-ok .stage__head { grid-area: head; }
  .motion-ok .stage__text { grid-area: text; max-width: 22rem; }
  .motion-ok .stage__time { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1; color: var(--fg-muted); letter-spacing: 0.04em; }
  .motion-ok .stage__title { font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: 0.92; color: var(--fg); }
  /* stages after the first in each layer start out of view; motion.js brings them in */
  .motion-ok .stage[data-stage="2"], .motion-ok .stage[data-stage="3"], .motion-ok .stage[data-stage="5"] { opacity: 0; }
  .motion-ok .stage[data-stage="2"] .stage__photo, .motion-ok .stage[data-stage="3"] .stage__photo, .motion-ok .stage[data-stage="5"] .stage__photo { clip-path: polygon(0% 0%, 0% 0%, -18% 100%, 0% 100%); }
  html.is-cooking :is(.reel__strip, .cook__layer--day, .cook__day-inner > .cook__inner, .ruler__marker) { will-change: transform; }
}

/* The big clock: odometer reels, transform only. --h, --m10, --m1 and --ap are set on
   the stage by motion.js; each copy (cream at night, ink by day) reads the same values. */
.bigclock {
  display: flex; align-items: flex-start;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-clock);
  line-height: 0.9; letter-spacing: -0.01em;
  --cell: 0.9em;
}
.reel { display: block; height: var(--cell); overflow: hidden; }
.reel { width: 0.5em; }
.reel__strip { display: flex; flex-direction: column; text-align: center; transform: translate3d(0, calc(var(--pos, 0) * -1 * var(--cell)), 0); }
.reel__strip > span { display: block; height: var(--cell); }
[data-reel="h"] { --pos: var(--h, 0); }
[data-reel="m10"] { --pos: var(--m10, 0); }
[data-reel="m1"] { --pos: var(--m1, 0); }
[data-reel="ap"] { --pos: var(--ap, 0); }
.reel--h { width: 0.98em; }
.reel--h .reel__strip { text-align: right; }
.bigclock__colon { padding: 0 0.04em; transform: translateY(-0.04em); }
.reel--ap { width: auto; font-size: 0.34em; margin-left: 0.16em; margin-top: 0.06em; letter-spacing: 0.04em; }
.bigclock__sw { margin-top: 14px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-muted); }
.bigclock__sw::after { content: " · Swahili time"; font-weight: 400; letter-spacing: 0; opacity: 0.8; }

.ruler { padding-top: 10px; }
.ruler__track {
  position: relative; height: 14px; overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / 17)) 0 100% / 100% 7px no-repeat;
}
.ruler__marker {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--t, 0) * 100% - 100%), 0, 0);
  background: linear-gradient(90deg, transparent, rgb(242 166 90 / 0.12));
  border-right: 3px solid var(--marker);
}
[data-theme="paper"] .ruler__marker { background: linear-gradient(90deg, transparent, rgb(107 34 22 / 0.08)); }
.ruler__labels { list-style: none; position: relative; height: 1.6em; margin-top: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.ruler__labels li { position: absolute; top: 0; }
.ruler__labels li:nth-child(1) { left: 0; }
.ruler__labels li:nth-child(2) { left: calc(100% * 6 / 17); transform: translateX(-50%); }
.ruler__labels li:nth-child(3) { left: calc(100% * 12 / 17); transform: translateX(-50%); }
.ruler__labels li:nth-child(4) { right: 0; }

/* ---------- (02) The board · 11:00 AM ---------- */
.board { padding: var(--section-y) 0; }
.board__head { position: relative; max-width: 46rem; margin-bottom: clamp(28px, 5vw, 56px); }
.stamp {
  position: absolute; right: 0; top: -6px;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 10px 7px; border: 2px solid var(--oxblood); border-radius: var(--r);
  color: var(--oxblood); transform: rotate(-6deg);
  font: 800 0.9375rem/0.9 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
}
.stamp span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.board__grid { display: grid; gap: 40px; grid-template-areas: "menu" "side" "voices"; }
.board__menu { grid-area: menu; min-width: 0; }
.board__side { grid-area: side; min-width: 0; }
.voices { grid-area: voices; }
@media (min-width: 1024px) {
  .stamp { right: auto; left: calc(100% + 24px); top: 10px; font-size: 1.125rem; }
  .board__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    grid-template-areas: "menu side" "voices side";
    column-gap: clamp(40px, 6vw, 96px); align-items: start;
  }
  .board__side { align-self: stretch; }
  .board__side .docket { position: sticky; top: calc(var(--header-h) + 24px); }
}

.group { padding-top: 22px; border-top: 2px solid var(--fg); }
.group + .group { margin-top: clamp(40px, 6vw, 64px); }
.group__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.group__title { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/0.9 var(--display); text-transform: uppercase; padding-top: 4px; }
.group__photo { flex: none; width: 44%; max-width: 280px; aspect-ratio: 4 / 3; transform: rotate(1.4deg); }
.group:nth-of-type(even) .group__photo { transform: rotate(-1.2deg); }
.item { padding: 20px 0 18px; border-bottom: 1px dashed var(--line-strong); }
.item:last-of-type { border-bottom: 0; }
.item__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 800 var(--fs-item)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.item__desc { font-size: 0.9375rem; color: var(--fg-muted); max-width: 38rem; margin: 6px 0 8px; }
.lines { list-style: none; }
.line {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(14px, 1fr) auto auto;
  align-items: center; column-gap: 10px; min-height: 52px;
}
.line__label { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.line__dots {
  height: 4px; align-self: center; transform-origin: left center;
  background: radial-gradient(circle, var(--line-strong) 1.1px, transparent 1.5px) 0 50% / 7px 4px repeat-x;
}
.line__price { font: 800 var(--fs-price)/1 var(--display); text-align: right; }
.line__single { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 6px; font-size: 0.875rem; font-weight: 600; }
.line--ask .line__dots { grid-column: 2 / 4; }
.note { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--oxblood); max-width: 32rem; font-size: 0.8125rem; line-height: 1.45; color: var(--oxblood); }
.also { margin-top: 14px; font-size: 0.875rem; color: var(--fg-muted); }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--fg); border-radius: var(--r); }
.stepper button {
  width: 42px; height: 42px; border: 0; border-radius: 2px;
  background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.stepper button:hover { background: rgb(34 23 15 / 0.08); }
.stepper button:disabled { opacity: 0.3; cursor: default; background: transparent; }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.line.is-on .line__label, .line.is-on .line__price { color: var(--oxblood); }

.ask { display: inline-flex; position: relative; cursor: pointer; }
.ask input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ask span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
  border: 1.5px solid var(--fg); border-radius: var(--r); font-size: 0.875rem; font-weight: 600;
}
.ask span::before { content: "+"; margin-right: 6px; font-weight: 700; }
.ask input:checked + span { background: var(--ink); color: var(--kraft); }
.ask input:checked + span::before { content: "✓"; }
.ask input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }

.platter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin: 6px 0 2px; }
.platter__sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.platter__sizes label { position: relative; cursor: pointer; }
.platter__sizes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.platter__sizes span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--fg); border-radius: var(--r);
  font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em;
}
.platter__sizes input:checked + span { background: var(--ink); color: var(--kraft); }
.platter__sizes input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.platter__price { display: flex; align-items: baseline; gap: 0.25em; font: 800 clamp(2.5rem, 2rem + 2.2vw, 3.75rem)/1 var(--display); }
.platter__kes { font-size: 0.38em; letter-spacing: 0.1em; }
.platter__reel { display: inline-block; height: 1em; overflow: hidden; }
.platter__strip { display: flex; flex-direction: column; transition: transform 0.5s var(--ease); }
.platter__strip > span { display: block; height: 1em; line-height: 1; }
.group--platter:has(input[value="4"]:checked) .platter__strip, .platter[data-size="4"] .platter__strip { transform: translateY(-1em); }
.group--platter:has(input[value="6"]:checked) .platter__strip, .platter[data-size="6"] .platter__strip { transform: translateY(-2em); }
.platter__single { grid-column: 1 / -1; }
.platter__single a { display: none; }
.group--platter:has(input[value="2"]:checked) .platter__single [data-size="2"],
.group--platter:has(input[value="4"]:checked) .platter__single [data-size="4"],
.group--platter:has(input[value="6"]:checked) .platter__single [data-size="6"] { display: inline-flex; }
@supports not selector(:has(*)) { .platter__single [data-size="2"] { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .platter__strip { transition: none; } }

/* The docket: every order module on a light section is a dark card */
.docket, .ticket {
  position: relative; border-radius: var(--r);
  background: var(--bark); color: var(--cream);
  --fg: var(--cream); --fg-muted: var(--smoke);
  --line: rgb(242 230 211 / 0.14); --line-strong: rgb(242 230 211 / 0.32);
  padding: 30px 20px 22px;
}
.docket__tear {
  position: absolute; left: 0; right: 0; top: -1px; height: 7px;
  background: radial-gradient(circle at 5px 0, var(--tear, var(--kraft)) 4.4px, transparent 5px) 0 0 / 10px 7px repeat-x;
}
.docket__what { color: var(--smoke); }
.docket__title { font: 800 2.125rem/0.9 var(--display); text-transform: uppercase; margin: 4px 0 14px; }
.docket__lines { list-style: none; border-top: 1px dashed var(--line-strong); padding: 10px 0; }
.docket__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 0.9375rem; line-height: 1.35; }
.docket__lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.docket__empty { color: var(--fg-muted); }
.docket__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line-strong); padding-top: 12px; font-size: 0.875rem; color: var(--fg-muted); }
.docket__total output { font: 800 2rem/1 var(--display); color: var(--fg); }
.docket__plus { text-align: right; font-size: 0.8125rem; color: var(--fg-muted); margin: 4px 0 16px; }
.docket__when { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.docket__when legend { padding: 0; margin-bottom: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); }
.docket__when label { position: relative; cursor: pointer; }
.docket__when input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.docket__when span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 0.875rem; }
.docket__when input:checked + span { background: var(--cream); color: var(--char); border-color: var(--cream); }
.docket__when input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.docket__area { display: grid; gap: 6px; margin-bottom: 16px; font-size: 0.8125rem; color: var(--fg-muted); }
.docket__area small { font-size: inherit; opacity: 0.8; }
.docket__area input {
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: rgb(20 16 13 / 0.4); color: var(--cream);
}
.docket__area input::placeholder { color: rgb(168 154 139 / 0.8); }
.docket__area input:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.docket__facts { margin-top: 20px; display: grid; gap: 8px; font-size: 0.8125rem; line-height: 1.4; }
.docket__facts div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 10px; }
.docket__facts dt { color: var(--smoke); font-size: 0.6875rem; padding-top: 1px; }
.docket__facts dd { color: var(--cream); }
.docket__lines li.is-new { animation: docket-in 0.25s var(--ease); }
@keyframes docket-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .docket__lines li.is-new { animation: none; } }

.voices ul { list-style: none; display: grid; gap: 10px; }
.voice--pending { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 16px 18px; color: var(--fg-muted); font-size: 0.9375rem; }
.voice span { display: block; margin-top: 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 760px) and (max-width: 1023px) { .voices ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- (03) Walk in · 1:00 PM ---------- */
.walkin { padding: var(--section-y) 0; }
.walkin__grid { display: grid; gap: 32px; }
.walkin__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.walkin__copy .lede { margin-bottom: 26px; }
.spec { max-width: 32rem; }
.spec__row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; font-size: 0.9375rem; }
.spec__row::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line-strong); transform-origin: left; }
.spec__row:last-child { border-bottom: 1px solid var(--line-strong); }
.spec dt { color: var(--fg-muted); font-size: 0.6875rem; }
.spec dd { font-weight: 600; text-align: right; }
.walkin__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.walkin__photo { aspect-ratio: 5 / 4; transform: rotate(-1deg); }
@media (min-width: 900px) {
  .walkin__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
}

/* ---------- (04) Fire for hire · 3:00 PM ---------- */
.hire { padding-top: var(--section-y); overflow: clip; }
.hire__head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.hire__grid { display: grid; gap: 24px; }
.poster { border-radius: var(--r); padding: 26px 22px 24px; background-image: var(--grain-light); }
.poster__top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--smoke); }
.poster__title { font: 800 clamp(2.75rem, 1.8rem + 4.6vw, 5.75rem)/0.86 var(--display); text-transform: uppercase; letter-spacing: -0.01em; margin: 22px 0 8px; text-wrap: balance; }
.poster__edition { font: 700 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke); margin-bottom: 22px; }
.poster__facts { display: grid; border-top: 1px dashed var(--line-strong); }
.poster__facts div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); font-size: 0.9375rem; }
.poster__facts dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); padding-top: 3px; }
.poster__quote { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1 var(--display); text-transform: uppercase; margin-top: 24px; max-width: 20ch; }
.poster__next { margin-top: 14px; font-size: 0.875rem; color: var(--smoke); }
.hire__side { display: grid; gap: 22px; align-content: start; }
.hire__card { border-top: 2px solid var(--fg); padding-top: 14px; }
.hire__card-text { font-size: 1rem; }
.hire__photo { aspect-ratio: 4 / 3; transform: rotate(1.2deg); }
.ticket { --tear: var(--paper); }
.ticket__title { font: 800 2.125rem/0.9 var(--display); text-transform: uppercase; margin: 4px 0 10px; }
.ticket__text { font-size: 0.9375rem; color: var(--smoke); margin-bottom: 18px; }
@media (min-width: 900px) {
  .hire__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px; align-items: start; }
  .poster { padding: 34px 32px 30px; }
}
.ticker { margin-top: var(--section-y); padding: 16px 0; border-block: 1px solid var(--line-strong); overflow: hidden; }
.ticker__line {
  display: inline-block; white-space: nowrap; padding-left: var(--pad-x);
  font: 800 clamp(2rem, 1.4rem + 3vw, 4.25rem)/1 var(--display); text-transform: uppercase; color: var(--oxblood);
}
.ticker__line i { font-style: normal; color: var(--ink-muted); padding: 0 0.28em; }
html:not(.motion-ok) .ticker__line { white-space: normal; padding-right: var(--pad-x); }
html:not(.motion-ok) .ticker__dup { display: none; }

/* ---------- (05) FAQ · 5:00 PM ---------- */
.faq { padding: var(--section-y) 0; }
.faq__grid { display: grid; gap: 28px; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0;
  font: 800 1.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-muted); max-width: 60ch; padding-bottom: 22px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; } }

/* ---------- Dusk · 6:00 PM ---------- */
.close { position: relative; overflow: clip; padding: var(--section-y) 0 calc(28px + var(--bar-h) + env(safe-area-inset-bottom)); }
.close__glow {
  position: absolute; inset: auto 0 0; height: 80%; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 100%, rgb(242 166 90 / 0.24), rgb(232 96 31 / 0.08) 42%, transparent 70%);
}
.close__grid { position: relative; display: grid; gap: 30px; }
.close__title { font: 800 clamp(3rem, 1.4rem + 7.4vw, 8.75rem)/0.86 var(--display); text-transform: uppercase; letter-spacing: -0.01em; max-width: 11ch; }
.close__note { max-width: 34rem; color: var(--fg-muted); }
.close__note p + p { margin-top: 12px; }
.close__gloss { font-size: 0.875rem; opacity: 0.85; }
.close__sign { margin-top: 20px !important; font: 800 1.875rem/1 var(--display); text-transform: uppercase; color: var(--cream); }
.close__sign span { display: block; margin-top: 6px; font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; color: var(--smoke); }
.close__flourish { width: 190px; height: auto; margin-top: 8px; color: var(--smoke); }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.close__base { position: relative; display: grid; gap: 14px; margin-top: clamp(48px, 8vw, 96px); padding-top: 22px; border-top: 1px solid var(--line); }
.brand--footer { margin: 0; }
.close__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.close__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 0.9375rem; }
.close__links a:hover { text-decoration: underline; }
.close__small { font-size: 0.8125rem; color: var(--fg-muted); }
@media (min-width: 760px) { .close { padding-bottom: 32px; } }
@media (min-width: 900px) {
  .close__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; column-gap: 64px; }
  .close__actions { grid-column: 1 / -1; }
  .close__base { grid-template-columns: auto 1fr; align-items: center; column-gap: 40px; }
  .close__links { justify-content: flex-end; }
  .close__small { grid-column: 1 / -1; }
}

/* ---------- Mobile sticky order bar ---------- */
.action-bar {
  position: fixed; inset: auto 0 0; z-index: 40;
  display: flex; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bark); border-top: 1px solid rgb(242 230 211 / 0.12);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar .btn { flex: 1; min-height: 48px; }
html:not(.js) .action-bar { display: none; }
@media (min-width: 760px) { .action-bar { display: none; } }

/* ---------- Motion initial states (only with JS + motion allowed) ---------- */
.motion-ok [data-reveal] { opacity: 0; transform: translateY(24px); }
.motion-ok [data-split] { visibility: hidden; }
.motion-ok [data-draw] { opacity: 0; }
.motion-ok [data-stamp] { opacity: 0; }
.motion-ok [data-rules] .line__dots { transform: scaleX(0); transition: transform 0.9s var(--ease) calc(var(--i, 0) * 110ms); }
.motion-ok [data-rules] .line__price { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 110ms + 0.45s); }
.motion-ok [data-rules].is-in .line__dots { transform: none; }
.motion-ok [data-rules].is-in .line__price { opacity: 1; }
.motion-ok [data-rules] .spec__row::before { transform: scaleX(0); transition: transform 0.9s var(--ease) calc(var(--i, 0) * 90ms); }
.motion-ok [data-rules].is-in .spec__row::before { transform: none; }

/* Hero entrance is pure CSS, so the first screen never waits on the animation scripts.
   The h1 only moves (never starts invisible), so it can paint as the LCP at once. */
.motion-ok [data-hero-in] { animation: hero-rise 1s var(--ease) both; animation-delay: var(--d, 0s); }
.motion-ok .hero__title[data-hero-in] { animation-name: hero-lift; }
.motion-ok [data-hero-photo] { animation: slice-in 1.1s cubic-bezier(0.7, 0, 0.2, 1) 0.25s both; }
.motion-ok [data-hero-photo] img { animation: settle 2s var(--ease) 0.25s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hero-lift { from { transform: translateY(22px); } to { transform: none; } }
@keyframes slice-in {
  from { clip-path: polygon(0% 0%, 0% 0%, -18% 100%, 0% 100%); }
  to { clip-path: polygon(0% 0%, 118% 0%, 100% 100%, 0% 100%); }
}
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
.split-line { display: block; }

@media print {
  .site-header, .action-bar, .ticker, .cook__dawn, .skip-cook { display: none !important; }
  [data-theme], [data-zone] { background: #fff !important; color: #000 !important; }
  .cook { height: auto !important; }
  .cook__stage { position: static !important; height: auto !important; }
  .motion-ok :is([data-reveal], [data-split], [data-draw], [data-stamp], .stage, .line__price) { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
}