/* ============================================================================
   site.css — base + foundation components on the token system.
   Components reference the SEMANTIC token tier only (CI-enforced).
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* native scroll only — no scroll-jacking, anywhere, ever */
  scroll-behavior: smooth;
  /* the deck fan + fly-out animations bleed past the edge by design;
     the page never grows a horizontal scrollbar for them */
  overflow-x: clip;
}

body {
  /* sticky footer: short pages keep the footer at the viewport bottom */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1 + p,
h2 + p {
  margin-top: var(--space-4);
}

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

/* ---- TYPE ---------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  line-height: var(--leading-tight);
  /* sentence case everywhere; ALL-CAPS lives only inside the receipt */
  text-transform: none;
}

h1 {
  font-size: var(--text-display);
}

h1,
h2,
h3 {
  /* no dangling last words on wrapped headings */
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
}

p {
  max-width: var(--measure-reading);
}

a {
  color: var(--color-text);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

a:hover {
  text-decoration-color: var(--color-accent-text);
}

/* ---- FOCUS (exempt from the paprika ration) ------------------------------ */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* ---- LAYOUT PRIMITIVES ---------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-7);
}

@media (min-width: 720px) {
  .section {
    padding-block: var(--space-9);
  }
}

/* ---- SKIP LINK (first focusable in every layout) -------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 0 0 var(--space-2) var(--space-2);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* ---- BUTTONS & LINKS ------------------------------------------------------
   One button style. If it isn't the decision, it's a quiet underlined link.
   No disabled states exist — unavailable means not rendered. */
.btn-action {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-text);
  font-size: var(--text-cta);
  font-weight: 700;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-align: center;
  transition: filter var(--motion-duration-snap) var(--motion-ease-out);
}

.btn-action:hover {
  filter: brightness(0.92);
}

.link-quiet {
  font-size: var(--text-small);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-text);
}

/* ---- HEADER ----------------------------------------------------------------
   mark + ≤3 links (8-char budget) + baton CTA. No hamburger — ever. */
.site-header {
  background: var(--color-bg);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav a {
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-3) var(--space-1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-nav a:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.site-nav a.is-active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
}

.post-back {
  margin-bottom: var(--space-4);
}

/* The baton: born quiet; .is-lit ignites when no other paprika moment is
   in the viewport (one flame, always exactly one, traveling the page). */
.nav-cta {
  font-weight: 600;
}

.nav-cta.is-lit {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}

@media (max-width: 540px) {
  .brand-word {
    /* below --bp-mark the wordmark crops to the mark */
    display: none;
  }
  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 var(--space-3);
  }
}

/* the narrowest band: tighter gaps keep five items on one line */
@media (max-width: 420px) {
  .site-nav {
    gap: 0 var(--space-2);
  }

  .site-nav a {
    padding-inline: 0;
  }
}

/* ---- FOOTER (the only home of legal + contact) ----------------------------- */
.site-footer {
  background: var(--color-surface-raised);
  margin-top: var(--space-7);
  padding-block: var(--space-7);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  justify-content: space-between;
  align-items: baseline;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer a {
  color: var(--color-text-muted);
  /* WCAG 2.2 target size: every link is a real target (axe-enforced) */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
}

/* ---- CARDS (the frozen swipe — poses are classes, never inline styles) ----- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-resting);
}

.card--lifted {
  transform: rotate(var(--tilt-lifted));
  box-shadow: var(--shadow-lifted);
}

.card--flying {
  transform: rotate(var(--tilt-flying));
  box-shadow: var(--shadow-flying);
}

.card-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  /* warm placeholder: never gray */
  background: var(--color-surface-raised);
}

/* bio overlay: lower-third scrim, real HTML text, two-line clamp */
.card-bio {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, var(--color-scrim) 38%);
  color: var(--color-bg);
}

.card-bio-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
}

.card-bio-line {
  font-size: var(--text-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- RECEIPT (Space Mono lives ONLY here; ALL-CAPS allowed ONLY here) ------ */
.receipt {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  line-height: var(--leading-reading);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-5);
  box-shadow: var(--shadow-lifted);
  max-width: var(--receipt-max);
}

.receipt-rule {
  border: 0;
  border-top: 1px dashed var(--color-text-muted);
  margin-block: var(--space-3);
}

/* ---- READING MODE (blog long-form) ----------------------------------------- */
.article-body {
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
  max-width: var(--measure-reading);
  margin-inline: auto;
}

.article-body h2 {
  /* document scale – long legal/post pages shouldn't shout per section */
  font-size: clamp(1.4rem, 1vw + 1.1rem, 1.75rem);
}

.article-body h2,
.article-body h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.article-body p + p {
  margin-top: var(--space-4);
}

[id] {
  scroll-margin-top: var(--space-8);
}

/* ---- PRINT (recipes want to hit paper) -------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .skip-link {
    display: none;
  }
}

/* ---- PLACEHOLDER HERO (story 1.6 — replaced by the demo hero in Epic 3) --- */
.hero-placeholder {
  min-height: 62svh;
  display: flex;
  align-items: center;
}

.hero-question {
  /* fits "What should we eat" on one line; "tonight?" takes the second */
  max-width: 20ch;
}

.hero-question em {
  font-style: normal;
  color: var(--color-accent);
}

.hero-sub {
  margin-top: var(--space-5);
  font-size: var(--text-reading);
  color: var(--color-text-muted);
}

.cta-group {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* ---- GRID CARDS (blog + recipes indexes; entrance-only) -------------------- */
.grid-cards {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
  gap: var(--space-5);
}

.grid-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-duration-snap) var(--motion-ease-out),
    box-shadow var(--motion-duration-snap) var(--motion-ease-out);
}

/* the lift is a HOVER affordance – touch taps must not move the card */
@media (hover: hover) {
  .grid-card:hover {
    transform: translateY(-4px) rotate(var(--tilt-lifted));
    box-shadow: var(--shadow-lifted);
  }

  /* an open recipe is being read – it sits still */
  .recipe-card:has(.recipe-fold[open]):hover {
    transform: none;
    box-shadow: var(--shadow-resting);
  }
}

.grid-card-photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-raised);
}

.grid-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.grid-card-meta {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.grid-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--color-text);
}

.grid-card-desc {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---- POST PAGE bits --------------------------------------------------------- */
.post-header {
  max-width: var(--measure-reading);
  margin-inline: auto;
  /* heroless posts: the header must not touch the first paragraph */
  margin-bottom: var(--space-6);
}

.post-meta {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.post-title {
  margin-top: var(--space-3);
}

.post-subtitle {
  margin-top: var(--space-4);
  font-size: var(--text-reading);
  color: var(--color-text-muted);
}

.post-hero {
  margin-block: var(--space-6);
}

.post-hero img {
  width: 100%;
  border-radius: var(--radius-card);
}

.post-faq details {
  border-top: 1px solid var(--color-surface-raised);
  padding-block: var(--space-4);
}

.post-faq summary,
.recipe-fold summary {
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
}

.post-faq summary::after,
.recipe-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--color-accent-text);
  flex: none;
}

details[open] > summary::after {
  content: "–";
}

.recipe-card {
  cursor: pointer;
}

.recipe-card .recipe-fold[open] {
  cursor: auto;
}

.fold-label-open {
  display: none;
}

.recipe-fold[open] .fold-label-closed {
  display: none;
}

.recipe-fold[open] .fold-label-open {
  display: inline;
}

.recipe-fold {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-surface-raised);
  padding-top: var(--space-2);
}

.recipe-fold .recipe-ingredients,
.recipe-fold .recipe-steps {
  font-size: var(--text-body);
  margin-top: var(--space-3);
}

.recipes-sub {
  margin-top: var(--space-7);
}

.recipes-note {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.eoa-cta {
  max-width: var(--measure-reading);
  margin: var(--space-8) auto 0;
  padding: var(--space-5);
}

.eoa-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
}

.eoa-line {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* page-level CTA rows: full-width primary on phones (thumb pattern) */
@media (max-width: 719px) {
  .cta-group--page {
    flex-direction: column;
    align-items: stretch;
    max-width: 24rem;
  }

  .cta-group--page .btn-action {
    width: 100%;
  }

  .cta-group--page .link-quiet {
    justify-content: center;
  }
}

/* ---- PRICING + CONTACT (story 2.7) ----------------------------------------- */
.pricing-receipt {
  margin-top: var(--space-6);
}

/* phones: the receipt sits on the page's center axis, like the CTA below */
@media (max-width: 719px) {
  .pricing-receipt {
    margin-inline: auto;
  }
}

.contact-address {
  margin-top: var(--space-6);
}

.address-copy {
  font-family: var(--font-text);
  /* fluid: the full address fits even at 320px */
  font-size: clamp(1.05rem, 5.5vw, 2.25rem);
  max-width: 100%;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0;
  border-radius: var(--space-2);
  box-shadow: var(--shadow-resting);
  padding: var(--space-4) var(--space-5);
  cursor: copy;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  user-select: text;
}

.address-postmark {
  font-size: var(--text-small);
  color: var(--color-accent-text);
}

.address-postmark:empty {
  display: none;
}

/* ---- D5 HERO + DECK STAGE (stories 3.1/3.3/3.4) ----------------------------
   The question block fills the viewport minus the peek: the first card
   crosses the fold cropped above its bio — pure food at 0s, the joke pays
   on the first scroll. The stage is FIXED HEIGHT: deck, partial state and
   reveal all play inside it (zero document growth under the thumb). */
/* Mobile hero: the question block owns the space above the fold-crossing
   deck (100svh minus the visible card), and distributes its slack 2:3 —
   breath above the question, lead-in below. Proportioned at any height. */
.hero-d5-question {
  min-height: calc(100svh - var(--peek-visible));
  display: grid;
  grid-template-rows:
    minmax(var(--space-8), 2fr)
    auto
    minmax(var(--space-7), 3fr);
}

.hero-q-group {
  grid-row: 2;
}

.hero-skip {
  margin-top: var(--space-5);
}

.deck-section {
  scroll-margin-top: var(--space-5);
}

.scene-slug {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.deck-stage {
  position: relative;
  min-height: calc(var(--card-h) + var(--space-8) + var(--space-7));
}

.deck {
  list-style: none;
  padding: 0;
  position: relative;
  /* fits 320px viewports: container padding + the depth-fan offset stay inside */
  width: min(var(--card-w), calc(100vw - var(--space-4) * 2 - var(--space-3)));
  height: var(--card-h);
}

.swipe-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--card-h);
  touch-action: pan-y;
  will-change: transform;
}

/* mouse affordance: the top card invites the grab */
.swipe-card.card--lifted {
  cursor: grab;
}

@media (hover: hover) {
  .deck:not([data-awake]) .swipe-card.card--lifted:hover {
    box-shadow: var(--shadow-flying);
  }
}

.swipe-card .card-photo {
  height: 100%;
  /* native image drag would hijack the pointer mid-swipe */
  -webkit-user-drag: none;
  user-select: none;
}

/* depth fan for the cards behind the top one — frozen-deck composition */
.swipe-card:nth-child(2) {
  transform: rotate(3deg) translateX(var(--space-2));
}

.swipe-card:nth-child(n + 3) {
  transform: rotate(5deg) translateX(var(--space-3));
}

/* idle sway: the pre-interaction invitation; dies at first touch
   (data-awake set by the demo module); reduced-motion zeroes the tilt */
@keyframes idle-sway {
  0%, 100% { transform: rotate(var(--tilt-lifted)); }
  50% { transform: rotate(calc(var(--tilt-lifted) * -0.6)); }
}

.deck:not([data-awake]) .swipe-card:first-child.card--lifted {
  animation: idle-sway calc(var(--motion-duration-settle) * 6) ease-in-out infinite;
}

.deck[data-awake] .swipe-card:first-child.card--lifted {
  animation: none;
}

.deck-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
  width: min(var(--card-w), calc(100vw - var(--space-4) * 2 - var(--space-3)));
}

.deck-btn {
  font-family: var(--font-text);
  /* large+bold (>=18.66px @700): paper-on-paprika passes AA at 3:1 */
  font-size: 1.1875rem;
  font-weight: 700;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-resting);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* paprika marks the decision: the yes button only */
.deck-btn--like {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
}

.deck-btn--skip {
  grid-row: 1;
  grid-column: 1;
}

.deck-btn--like {
  grid-row: 1;
  grid-column: 2;
}

.deck-tally {
  grid-row: 2;
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.deck-btn-short {
  display: none;
}

/* the narrowest band: compact labels keep both buttons on one row at AA size */
@media (max-width: 379px) {
  .deck-btn {
    padding-inline: var(--space-1);
  }

  .deck-btn-long {
    display: none;
  }

  .deck-btn-short {
    display: inline;
  }
}

/* mobile: the act is centered — deck, controls, slug share one axis */
@media (max-width: 719px) {
  /* the question joins the same centerline (desktop keeps the diagonal) */
  .hero-q-group {
    text-align: center;
  }

  .hero-q-group .hero-sub,
  .hero-question {
    margin-inline: auto;
  }

  .scene-slug {
    text-align: center;
  }

  .deck,
  .deck-controls {
    margin-inline: auto;
  }

  .deck-exit,
  .deck-partial-note,
  .sr-status + .deck-partial-note {
    margin-inline: auto;
    text-align: center;
    max-width: var(--card-w);
  }

  .deck-exit {
    display: flex;
    justify-content: center;
  }

  .deck-exit[hidden] {
    /* author display beats the hidden attr — make hidden win (again) */
    display: none;
  }
}

.deck-exit {
  margin-top: var(--space-3);
}

.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* dragging state — transform-only, tracked by pointer (story 3.3) */
.swipe-card.is-dragging {
  transition: none;
  cursor: grabbing;
}

.swipe-card.is-snapping {
  transition: transform var(--motion-duration-snap) var(--motion-ease-snap);
}

.swipe-card.is-flying {
  transition: transform var(--motion-duration-fly) var(--motion-ease-out),
    opacity var(--motion-duration-fly) var(--motion-ease-out);
  opacity: 0;
}

/* ---- THE REVEAL (story 3.4): the exhale — plays inside the stage ---------- */
.reveal[hidden] {
  display: none; /* author display beats the hidden attr — make hidden win */
}

.reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface-raised);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  overflow: auto;
}

/* ---- DESKTOP DIAGONAL (spec D5, >= --bp-deck-side) -------------------------
   One viewport, two corners: question upper-left, deck lower-right,
   like/skip beside the deck. No fold-crop on desktop — the whole hero
   composition is the first screen. */
@media (min-width: 720px) {
  .hero-d5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-8);
    align-items: center;
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
    /* tall windows don't stretch the composition — the diagonal is a
       BOUNDED stagger (margins below), never viewport-anchored corners */
    min-height: min(88svh, 56rem);
    padding-block: var(--space-7);
  }

  .hero-d5-question {
    display: block;
    min-height: 0;
  }

  /* sized to the COLUMN (deck + controls own the right side): lands the
     canonical wrap — "What should we eat" / paprika "tonight?" */
  .hero-d5 .hero-question {
    font-size: clamp(2.5rem, 2.2vw + 1rem, 3.05rem);
  }

  /* the demo column: slug, deck, buttons – one centered stack, vertically
     level with the question */
  .deck-section {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .deck-section .scene-slug {
    text-align: center;
  }

  .deck-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .deck-exit {
    margin-top: var(--space-3);
  }

  /* lower acts: editorial spread — heading column, content column */
  #outcome .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-8);
    align-items: start;
  }

  /* THE REVEAL takes the whole hero on desktop — the question is answered,
     the answer gets the stage. Receipt rides beside the recipe. */
  .hero-d5 {
    position: relative;
  }

  .deck-stage {
    position: static;
  }

  .reveal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(var(--grid-card-min), 1fr);
    grid-auto-rows: max-content;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    align-content: start;
    padding: var(--space-7);
  }

  .reveal[hidden] {
    display: none;
  }

  .reveal > * {
    grid-column: 1;
  }

  .reveal .reveal-receipt {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    justify-self: end;
  }
}

/* landing acts below the hero: tighter rhythm — the 9-step section scale
   stacked dead air between outcome and proof */
#outcome,
#proof,
#final-cta {
  padding-block: var(--space-7);
}

@media (min-width: 720px) {
  #outcome,
  #proof,
  #final-cta {
    padding-block: var(--space-8);
  }
}

/* the closing act: centered, definitive — the ring closes in the middle.
   The dashed rule is receipt vocabulary: end of the tape. */
#final-cta h2::before {
  content: "";
  display: block;
  width: var(--space-9);
  margin: 0 auto var(--space-6);
  border-top: 1px dashed var(--color-text-muted);
}

#final-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#final-cta h2 {
  max-width: 24ch;
}

#final-cta .cta-group {
  justify-content: center;
}

@media (max-width: 719px) {
  #final-cta .cta-group {
    width: 100%;
    max-width: 24rem;
    flex-direction: column;
    gap: var(--space-4);
  }

  #final-cta .btn-action {
    width: 100%;
  }
}

/* the proof: three lines, in-voice — set as a quiet manifesto, not body text */
.proof-block p {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-body);
  max-width: var(--measure-reading);
  margin-inline: auto;
  text-align: center;
}

.proof-block p + p {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-raised);
}

/* ---- REVEAL CONTENTS (story 3.4/3.5) ---------------------------------------- */
.reveal-kicker {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.reveal-title {
  color: var(--color-accent-text);
}

.reveal-mirror {
  color: var(--color-text-muted);
}

.reveal-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
}

.reveal-pick-label {
  color: var(--color-text-muted);
}

.recipe-subhead {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.reveal-recipe .recipe-ingredients {
  margin-bottom: var(--space-4);
}

/* the reveal is an overlay summary, not the arm's-length cooking view –
   body scale, tight rhythm; the recipe PAGES keep the large print */
.reveal .recipe-ingredients,
.reveal .recipe-steps {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.reveal .recipe-ingredients li + li,
.reveal .recipe-steps li + li {
  margin-top: var(--space-2);
}

.reveal .recipe-subhead {
  margin-top: var(--space-4);
}

.reveal-recipe h3 {
  margin-top: var(--space-2);
}

@media (min-width: 720px) {
  .reveal .recipe-ingredients {
    columns: 2;
    column-gap: var(--space-7);
  }

  .reveal .recipe-ingredients li {
    break-inside: avoid;
  }
}

.reveal-recipe h3 {
  margin-top: var(--space-4);
}

.recipe-ingredients,
.recipe-steps {
  padding-left: var(--space-5);
  font-size: var(--text-recipe-step);
  line-height: var(--leading-reading);
}

.recipe-steps li + li,
.recipe-ingredients li + li {
  margin-top: var(--space-3);
}

.reveal-receipt {
  align-self: flex-start;
  transform: rotate(1deg);
}

.reveal-doors {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.deck-partial-note {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  max-width: var(--card-w);
}

/* ---- ARTICLE TABLES (raw-HTML islands from migration) ----------------------
   Wide comparison tables scroll inside their own box — never the page. */
.article-body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

.article-body th,
.article-body td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-surface-raised);
  white-space: nowrap;
}

.article-body th {
  font-weight: 600;
}