/* ---------------------------------------------------------------------------
   Paprika — marketing landing page
   Tokens mirror DESIGN.md. The 3D kitchen behind the story lives in
   kitchen-scene.js; everything here is the paper it is printed on.
   --------------------------------------------------------------------------- */

:root {
  --bg: #fbf9f6;
  --bg-story: #f4ede3;
  --paper: #ffffff;
  --paper-low: #f5f3f0;
  --paper-warm: #f6f3ee;

  --ink: #1b1c1a;
  --ink-soft: #52443c;
  --ink-muted: #85746b;

  --terra: #864e2c;
  --terra-lite: #a45a33;
  --peach: #ffdbc9;
  --line: #d7c2b8;
  --hairline: rgba(215, 194, 184, 0.5);

  --green: #567a3c;
  --green-chip: #78a55a;
  --amber: #8a6a1c;
  --coral: #e8734a;

  --dark: #1b1c1a;

  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-card: 0 18px 44px -22px rgba(90, 68, 54, 0.35);
  --shadow-float: 0 24px 60px -28px rgba(90, 68, 54, 0.4);

  --gutter: 72px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the fixed nav must not clip an anchored beat */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-lite); }
::selection { background: var(--peach); }

/* A single sheet of cold-press paper laid over the whole document. It is the
   one thing every section shares, so the 3D render, the photography and the
   flat type all sit in the same grain. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background-image: url('img/paper-grain.webp');
  background-size: 620px 620px;
  mix-blend-mode: multiply;
  opacity: 0.38;
}

/* ----------------------------------------------------------------- nav ---- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px;
  background: rgba(251, 249, 246, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(215, 194, 184, 0.4);
}

.nav__brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nav__word {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav__logo { display: block; height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a:not(.btn) { font-size: 14px; color: var(--ink-soft); }
.nav__links a:not(.btn):hover { color: var(--terra); }
/* The way in for a cook who already has an account (#741). It stays in the bar
   on a phone, where the section links are dropped. */
.nav__links a.nav__signin { color: var(--ink); font-weight: 500; white-space: nowrap; }

.btn {
  display: inline-block;
  border-radius: 24px;
  font-weight: 500;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }

/* nav CTA: secondary to the hero button, so it sits in the bar rather than
   fighting it. Outline keeps the translucent cream reading through. */
.btn--dark {
  background: transparent;
  color: var(--terra);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(134, 78, 44, 0.45);
}
.btn--dark:hover { background: var(--terra); color: #fff; border-color: var(--terra); }

.btn--primary {
  background: linear-gradient(135deg, var(--terra) 0%, #a36642 100%);
  color: #fff;
  padding: 15px 26px;
  font-size: 14px;
  box-shadow: 0 12px 26px -14px rgba(134, 78, 44, 0.9);
}
.btn--primary:hover { color: #fff; box-shadow: 0 18px 34px -14px rgba(134, 78, 44, 0.95); }

.btn--peach { background: var(--peach); color: var(--ink); padding: 16px 30px; font-size: 15px; }
.btn--peach:hover { background: #ffe7da; color: var(--ink); }

/* --------------------------------------------------------------- story ---- */

.story {
  position: relative;
  height: 832vh;              /* 8 beats × 104vh, matching the source design */
  background: var(--bg-story);
}

.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

kitchen-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* warm bounce light off the floor, so the render meets the page rather than
   ending at it */
.story__floorglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -90px 90px -60px rgba(180, 158, 138, 0.45);
}

/* The poster: a still of the scene's first frame, shown until the canvas has
   a textured frame of its own (and for good without WebGL).

   The camera is orthographic with a fixed vertical extent, so the live room
   scales with the stage's HEIGHT and is anchored horizontally where the
   stage-0 pan puts it: 60% across below the 820px breakpoint (pan -0.25 × the
   narrow factor 0.4), 75% above it (pan -0.25). Sizing the still to the
   height and pinning that same point to the same place lines the two up for
   any stage no wider than the still; a wider stage falls back to cover. */
.story__poster img {
  position: absolute;
  top: 0;
  left: 60%;
  height: 100%;
  width: auto;
  min-width: 100%;
  transform: translateX(-60%);
  object-fit: cover;
  object-position: 60% 50%;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 820px) {
  .story__poster img {
    left: 75%;
    transform: translateX(-75%);
    object-position: 75% 50%;
  }
}

/* The canvas paints over the poster only once it is worth seeing. */
kitchen-scene canvas { opacity: 0; transition: opacity 0.5s ease; }
.story__stage[data-ready='true'] kitchen-scene canvas { opacity: 1; }
/* …and not at all once the scene has failed, even after it was shown: a lost
   context draws nothing, so snap back to the poster rather than fade a blank
   over it (#779). Outranks the rule above; failing always marks the stage ready. */
.story__stage[data-ready='true'] kitchen-scene[data-failed='true'] canvas { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  kitchen-scene canvas { transition: none; }
}

.beats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.beat {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  position: relative;
}
.beat--left { justify-content: flex-start; }
.beat--right { justify-content: flex-end; }
.beat--centre { justify-content: center; align-items: flex-end; padding: 0 40px 6vh; }

/* Legibility scrim, angled away from the card so the kitchen stays visible on
   the opposite side of the frame. */
.beat--left::before,
.beat--right::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  pointer-events: none;
}
.beat--left::before {
  background: linear-gradient(100deg,
    rgba(244, 237, 227, 0.9) 0%, rgba(244, 237, 227, 0.72) 30%,
    rgba(244, 237, 227, 0.3) 54%, rgba(244, 237, 227, 0) 72%);
}
.beat--right::before {
  background: linear-gradient(260deg,
    rgba(244, 237, 227, 0.9) 0%, rgba(244, 237, 227, 0.72) 30%,
    rgba(244, 237, 227, 0.3) 54%, rgba(244, 237, 227, 0) 72%);
}

.hero { padding: 104px var(--gutter) 24px; }
.hero::before {
  background: linear-gradient(100deg,
    rgba(244, 237, 227, 0.96) 0%, rgba(244, 237, 227, 0.9) 34%,
    rgba(244, 237, 227, 0.62) 56%, rgba(244, 237, 227, 0.22) 72%,
    rgba(244, 237, 227, 0) 84%);
}

.hero__inner {
  position: relative;
  max-width: 620px;
  pointer-events: auto;
  animation: papFadeUp 0.9s ease both;
  /* centred in the first screen, not the beat: see the scroll cue below */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 104px - var(--cue-room));
  min-height: calc(100svh - 104px - var(--cue-room));
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  text-wrap: balance;
}

.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 30em;
  text-wrap: pretty;
}

.hero__cta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.hero__signin { margin: 0; font-size: 14px; color: var(--ink-soft); }
.hero__signin a { color: var(--terra); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.hero__signin a:hover { color: var(--ink); }

/* The scroll cue (#735). The reader sees 100svh of the hero (the screen with
   the browser's toolbars showing), and the hero beat is taller than that — it
   grows to fit, 944px on a 793px phone — so centring the copy in the beat put
   it low and left nothing to say the page goes on. The copy now centres in the
   first screen, minus the nav above and the cue's room below, and the cue
   sits at the bottom of that screen. vh first, for a browser without svh. */
.hero.beat { align-items: flex-start; --cue-room: 96px; }
.scroll-cue {
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;         /* centred without a transform: papFadeUp owns it */
  top: calc(100vh - 88px);
  top: calc(100svh - 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  pointer-events: auto;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 0.4s ease, visibility 0.4s;
  animation: papFadeUp 0.9s ease 0.6s both;
}
.scroll-cue:hover { color: var(--terra); }
.scroll-cue__chevron {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(251, 249, 246, 0.92);
  color: var(--terra);
  box-shadow: var(--shadow-card);
  animation: papBob 1.8s ease-in-out 1.5s infinite;
}
.scroll-cue--gone { opacity: 0; visibility: hidden; }
/* An iPhone SE with Safari's toolbars up shows ~550px: the chevron alone. */
@media (max-height: 620px) {
  .hero.beat { --cue-room: 60px; }
  .scroll-cue { top: calc(100vh - 50px); top: calc(100svh - 50px); padding: 4px 14px; }
  /* No room for a second line under the button; the nav keeps « Sign in ». */
  .hero__signin { display: none; }
  .scroll-cue__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------ beat card --- */

.card {
  pointer-events: auto;
  max-width: 430px;
  background: rgba(251, 249, 246, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(215, 194, 184, 0.55);
  border-radius: 16px;
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
}
.card--wide { max-width: 450px; }

/* the beat index, set as a Newsreader italic numeral bleeding off the card's
   top-left corner — the "cover moment" from DESIGN.md */
.card { position: relative; }
.card__num {
  position: absolute;
  top: -26px;
  left: -18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--terra);
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
}

.card__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
.card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.finale {
  pointer-events: auto;
  max-width: 640px;
  text-align: center;
  background: rgba(251, 249, 246, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 40px 44px;
  box-shadow: var(--shadow-float);
}
.finale h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.finale p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto 24px;
  max-width: 34em;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ beat rail --- */

.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rail.on { opacity: 1; }
.rail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: auto;
  color: var(--ink-muted);
}
.rail__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.rail__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #cdb9ac;
  transition: background 0.3s ease, transform 0.3s ease;
  flex: none;
}
/* hover only: on a right-aligned beat the label would otherwise land on the card */
.rail__item:hover .rail__label { opacity: 1; transform: none; }
.rail__item[aria-current='true'] .rail__dot { background: var(--terra); transform: scale(1.5); }
.rail__item:hover .rail__dot { background: var(--terra-lite); }

/* ------------------------------------------------------------- editorial -- */

.table-week {
  position: relative;
  background: var(--bg);
  padding: 112px var(--gutter) 96px;
  overflow: hidden;
}
.shell { max-width: 1180px; margin: 0 auto; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20em;
}
.section-head h2 em { font-style: italic; color: var(--terra); }
.section-head p { font-size: 14px; color: var(--ink-muted); margin: 0; max-width: 24em; }

/* Circular food photography colliding with Newsreader italic day labels —
   the signature Paprika layout, alternating vertical offsets to break the grid. */
.plates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.plate { position: relative; text-align: center; }
.plate:nth-child(even) { margin-top: 54px; }

.plate__disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(90, 68, 54, 0.55);
  will-change: transform;
}
.plate__disc img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.plate:hover .plate__disc img { transform: scale(1.06); }
/* warm rim, so a photo on cream paper still has an edge */
.plate__disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(134, 78, 44, 0.18),
              inset 0 -30px 50px -30px rgba(90, 68, 54, 0.5);
}

.plate__day {
  position: absolute;
  top: -18px;
  left: -6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1;
  color: var(--ink);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plate__meta { margin-top: 18px; }
.plate__meal { font-size: 15px; font-weight: 500; color: var(--ink); }
.plate__note {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- detail -- */

.detail { background: var(--bg); padding: 0 var(--gutter) 104px; }
.detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
}
/* Tonal cards rather than the hairline grid — DESIGN.md's no-line rule. */
.detail__cell {
  background: var(--paper-low);
  border-radius: 16px;
  padding: 30px 26px 34px;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.detail__cell:hover {
  transform: translateY(-4px);
  background: var(--paper);
  box-shadow: 0 24px 48px -26px rgba(82, 68, 60, 0.4);
}
.detail__cell .kicker { margin-bottom: 18px; }
.detail__cell h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.detail__cell p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------------- cta -- */

.cta {
  position: relative;
  background: var(--dark);
  color: var(--bg);
  padding: 104px var(--gutter);
  overflow: hidden;
}
/* the botanical print, dropped almost to black and used as a texture */
.cta__art {
  position: absolute;
  right: -6%;
  top: 50%;
  width: min(560px, 46%);
  transform: translateY(-50%);
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta__art img { width: 100%; display: block; filter: saturate(0.7) contrast(1.1); }
.cta__art {
  -webkit-mask-image: radial-gradient(ellipse at 62% 50%, #000 24%, transparent 72%);
  mask-image: radial-gradient(ellipse at 62% 50%, #000 24%, transparent 72%);
}
.cta__glow {
  position: absolute;
  left: 8%; top: 20%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255, 182, 141, 0.16), rgba(255, 182, 141, 0) 68%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(251, 249, 246, 0.72);
  margin: 0;
  max-width: 30em;
  text-wrap: pretty;
}
.cta__actions { display: flex; flex-direction: column; gap: 12px; }
.cta__fine { font-size: 12px; color: rgba(251, 249, 246, 0.55); text-align: center; }

.foot { background: var(--dark); color: rgba(251, 249, 246, 0.5); padding: 0 var(--gutter) 48px; }
.foot__inner {
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid rgba(251, 249, 246, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
}
.foot__word { font-family: var(--serif); font-size: 18px; color: var(--bg); }
.foot__links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot__links a { color: rgba(251, 249, 246, 0.6); }
.foot__links a:hover { color: var(--peach); }


/* --------------------------------------------------- app screenshots ------ */

/* Every beat card shows the real app screen: in a slim device frame beside the
   copy above the mobile breakpoint, as a cropped window below it. */
.card--shot {
  max-width: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  column-gap: 24px;
  align-items: center;
}
.card--shot > .card__eyebrow, .card--shot > h2, .card--shot > p { grid-column: 1; }

.card__screen {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: -44px -10px -44px 0;
  align-self: center;
}
.card__screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 7px solid #2a2723;
  background: #2a2723;
  box-shadow: 0 24px 48px -20px rgba(60, 45, 35, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.finale--shot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  column-gap: 26px;
  align-items: center;
  text-align: left;
  max-width: 720px;
}
.finale--shot .finale__copy p { margin-left: 0; }
.finale--shot .card__screen { grid-row: 1; margin: -18px -12px; }

/* --------------------------------------------------------------- motion --- */

@keyframes papFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes papBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .plates { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .plate:nth-child(even) { margin-top: 0; }
  .plate:nth-child(2) ~ .plate { margin-top: 8px; }
}

@media (max-width: 900px) {
  .nav { padding: 14px 20px; }
  .nav__logo { height: 30px; }
  .nav__links { gap: 14px; }
  .nav__links a:not(.btn):not(.nav__signin) { display: none; }

  :root { --gutter: 20px; }

  /* Cards drop to the bottom of the frame so the kitchen keeps the top half. */
  .beat { align-items: flex-end; padding: 0 var(--gutter) 10vh; }
  .beat--left, .beat--right, .beat--centre { justify-content: center; }
  .beat--left::before, .beat--right::before {
    background: linear-gradient(to top,
      rgba(244, 237, 227, 0.97) 0%, rgba(244, 237, 227, 0.9) 46%,
      rgba(244, 237, 227, 0.4) 72%, rgba(244, 237, 227, 0) 92%);
  }
  .hero { padding: 88px var(--gutter) 24px; }
  .hero__inner {
    min-height: calc(100vh - 88px - var(--cue-room));
    min-height: calc(100svh - 88px - var(--cue-room));
  }
  .hero::before {
    background: linear-gradient(to top,
      rgba(244, 237, 227, 0.9) 0%, rgba(244, 237, 227, 0.86) 40%,
      rgba(244, 237, 227, 0.8) 70%, rgba(244, 237, 227, 0.5) 100%);
  }
  .card, .card--wide, .finale { max-width: 560px; width: 100%; padding: 24px 22px; }
  .card--shot, .finale--shot { display: block; }
  .finale--shot { text-align: center; }
  .finale { padding: 30px 24px; }
  .card__num { top: -20px; left: -6px; font-size: 46px; }
  .card h2 { font-size: 27px; }
  .rail { display: none; }
  .table-week { padding: 72px var(--gutter) 64px; }
  .detail { padding: 0 var(--gutter) 72px; }
  .cta { padding: 72px var(--gutter); }
  .cta__actions { width: 100%; }
  .foot { padding: 0 var(--gutter) 36px; }
  .section-head { margin-bottom: 36px; }
}

@media (max-width: 560px) {
  .plates { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .plate__day { font-size: 34px; top: -12px; }
  .plate__meal { font-size: 13px; }
  /* tracked-out caps in a half-width column break into orphans */
  .plate__note { font-size: 9px; letter-spacing: 0.06em; text-wrap: balance; }
  .plate__meta { text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__inner { animation: none; }
  .scroll-cue, .scroll-cue__chevron { animation: none; }
  .scroll-cue { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .plate__disc img { transition: none; }
  .btn:hover, .detail__cell:hover { transform: none; }
}

/* ------------------------------------------------------------ Du Chef ---
   The sous-chef speaks. Two components, one idea: Du Chef is present in
   every section rather than described from outside it.
     .said  a spoken line signed with the mark (every beat + the closing panel)
     .seal  the mark alone, holding a section head open
   ------------------------------------------------------------------------- */

.said { display: flex; align-items: flex-start; gap: 11px; }
.said__mark {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #fdf0e6;
  box-shadow: inset 0 0 0 1px rgba(215, 194, 184, 0.75);
  display: grid; place-items: center;
}
.said__mark img { display: block; width: 23px; height: auto; }
.said .said__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 5px;
  text-wrap: pretty;
}

/* inside a beat card the line sits under the prose, holding the card's rhythm */
.card > .said, .finale__copy > .said { margin: -4px 0 20px; }

/* The phone used to span every grid row, so its height was distributed across
   them and pushed eyebrow, headline and body apart — and a .said sibling would
   auto-place into the phone's column. Take it out of the flow: the copy keeps
   its own rhythm and the device bleeds past the card as before. */
.card--shot { display: block; position: relative; }
.card--shot > .card__eyebrow,
.card--shot > h2,
.card--shot > p,
.card--shot > .said { max-width: calc(100% - 196px); }
.card--shot > .said { margin-bottom: 0; }
.card--shot > .card__screen {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 178px;
  margin: 0;
  transform: translateY(-50%);
}

/* two screens in one beat: the pair sits where the single phone would, the
   second one dropped half a step so they read as a sequence, not a spread */
.card--pair { max-width: 760px; }
.card--pair > .card__eyebrow,
.card--pair > h2,
.card--pair > p,
.card--pair > .said { max-width: calc(100% - 336px); }
.card--pair > .card__screens {
  position: absolute;
  top: 50%;
  right: -10px;
  display: flex;
  gap: 14px;
  transform: translateY(-50%);
}
.card__screens .card__screen { width: 150px; margin: 0; }
.card__screens .card__screen + .card__screen { margin-top: 56px; }

/* hero: the introduction the page never had — a called-out panel, not a footnote.
   The mark is big enough to read as a character and the name carries the brand. */
.said--hero {
  margin: 6px 0 28px;
  max-width: 33rem;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 18px;
  background: #fdf0e6;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(215, 194, 184, 0.7), 0 10px 26px -18px rgba(111, 63, 34, 0.5);
}
.said--hero .said__mark {
  width: 62px; height: 62px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(215, 194, 184, 0.9);
}
.said--hero .said__mark img { width: 45px; }
.said--hero .said__line {
  font-size: 19px;
  line-height: 1.5;
  padding-top: 0;
  color: var(--ink);
}
.said__name {
  font-style: normal;
  font-weight: 600;
  color: var(--terra);
}
.said--hero .said__line em { color: var(--ink-soft); }

/* on the dark closing panel the line has to hold 4.5:1 */
.cta .said { margin-top: 16px; }
.cta .said .said__line { color: rgba(251, 249, 246, 0.92); }

.seal {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: #fdf0e6;
  box-shadow: inset 0 0 0 1px rgba(215, 194, 184, 0.75);
}
.seal img { display: block; width: 33px; height: auto; }
/* the seal joins the heading instead of pushing it across the space-between */
.section-head--signed { justify-content: flex-start; gap: 20px; }
.section-head .seal { margin-bottom: 4px; }
.seal--dark { width: 30px; height: 30px; background: rgba(251, 249, 246, 0.92); }
.seal--dark img { width: 22px; }
.foot__brand { display: flex; align-items: center; gap: 12px; }

@media (max-width: 900px) {
  .card--shot > .card__eyebrow,
  .card--shot > h2,
  .card--shot > p,
  .card--shot > .said { max-width: none; }
  .card--shot > .said { margin-bottom: 0; }
  .finale--shot .said { justify-content: center; }

  /* The phone rises out of the card's bottom edge, showing the band of the
     screen the beat is about: --crop on each figure is the object-position y
     (0% = top of the screen, 100% = bottom). */
  .card--shot > .card__screen,
  .finale--shot .card__screen {
    position: static;
    transform: none;
    width: 200px;
    height: clamp(150px, 30vh - 28px, 228px);
    margin: 18px auto -24px;
    overflow: hidden;
  }
  .card--pair > .card__eyebrow,
  .card--pair > h2,
  .card--pair > p,
  .card--pair > .said { max-width: none; }
  .card--pair > .card__screens {
    position: static;
    transform: none;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 -24px;
  }
  .card__screens .card__screen {
    width: 146px;
    height: clamp(150px, 30vh - 28px, 228px);
    overflow: hidden;
  }
  .card__screens .card__screen + .card__screen { margin-top: 0; }
  .finale--shot .card__screen { margin-bottom: -30px; }
  .card__screen img {
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--crop, 0%);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -10px 28px -18px rgba(82, 68, 60, 0.45),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .said--hero { margin-bottom: 22px; padding: 15px 18px 15px 15px; gap: 14px; }
  .said--hero .said__line { font-size: 16.5px; }
  .said--hero .said__mark { width: 50px; height: 50px; }
  .said--hero .said__mark img { width: 36px; }
  .section-head .seal { width: 38px; height: 38px; }
  .section-head .seal img { width: 27px; }
}