/* ─────────────────────────────────────────────────────────────────────────────
   Tasteful — tastefor2.com
   Tokens taken verbatim from the app's DesignSystem/Colors.swift and
   Typography.swift, by way of the generated design-system document. If you need
   a value that isn't here, add it to the tokens rather than to a rule.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── The app's own bundled variable faces ─────────────────────────────────── */
/* Fraunces and DM Sans are Latin subsets with no CJK coverage, so the
   Chinese page (/zh/quiz.html) falls through to the faces named after them
   in every stack below: PingFang for body copy, a Song serif for display
   type. Latin and digits still render in the brand faces, glyph by glyph,
   so the English pages are unaffected. */
@font-face {
  font-family: "DM Sans";
  src: url(fonts/dm-sans.woff2) format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url(fonts/fraunces.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand — the one accent, plus the two gradient stops it lives between */
  --brand:        #DD3834;  /* primaryOrange      */
  --brand-dark:   #B82E2A;  /* primaryOrangeDark  */
  --brand-light:  #ED7976;  /* primaryOrangeLight */
  --ai:           #A855F7;  /* purple500 — AI surfaces only */

  /* Page chrome */
  --ground:       #FBFBFC;
  --ground-sunk:  #F3F4F6;
  --ink:          #26333D;  /* charcoal        */
  --ink-soft:     #5A6472;
  --ink-faint:    #8A93A2;
  --rule:         #E3E6EB;
  --rule-strong:  #CFD5DE;
  --canvas:       #FFFFFF;

  --accent:       var(--brand);
  --accent-soft:  rgba(221, 56, 52, 0.10);
  --ai-soft:      rgba(168, 85, 247, 0.12);

  --measure: 66ch;
  --shell:   1120px;
  --pad:     clamp(20px, 5vw, 56px);
}

/* The accent lightens in dark mode — #DD3834 on #101520 fails contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #101520;
    --ground-sunk: #171D2A;
    --ink:         #E4E8EF;
    --ink-soft:    #A3ACBC;
    --ink-faint:   #737D8E;
    --rule:        #262E3C;
    --rule-strong: #38414F;
    --canvas:      #171D2A;
    --accent:      #F2635F;
    --accent-soft: rgba(242, 99, 95, 0.14);
    --ai-soft:     rgba(168, 85, 247, 0.18);
  }
}
:root[data-theme="dark"] {
  --ground:      #101520;
  --ground-sunk: #171D2A;
  --ink:         #E4E8EF;
  --ink-soft:    #A3ACBC;
  --ink-faint:   #737D8E;
  --rule:        #262E3C;
  --rule-strong: #38414F;
  --canvas:      #171D2A;
  --accent:      #F2635F;
  --accent-soft: rgba(242, 99, 95, 0.14);
  --ai-soft:     rgba(168, 85, 247, 0.18);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--canvas);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  z-index: 10;
}
.skip:focus { left: var(--pad); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}


/* ── Landing page ────────────────────────────────────────────────────────
   Warm, full-bleed hero. The eight archetype characters do the explaining:
   a visitor should understand "food personality system" before reading a
   word. Copy stays short on purpose.                                     */

/* Sticky top bar — the quiz CTA is always one click away. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.topbar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand .wordmark {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Buttons — one shape, three sizes. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 52%, var(--brand-dark) 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(221, 56, 52, 0.30);
  transition: transform 130ms ease-in-out, box-shadow 130ms ease-in-out;
}
.btn:hover { box-shadow: 0 12px 30px rgba(221, 56, 52, 0.40); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }

.btn-sm { padding: 10px 20px; font-size: 15px; gap: 8px; }
.btn-apple { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.btn-xl {
  padding: 22px 44px;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.01em;
}

/* The App Store badge on the result page.
   Apple's own lockup rather than one of our pills: at the bottom of the result
   page the job is "this is an iPhone app you can download", and the badge says
   that faster than any wording of ours. Black in both themes, as Apple
   specifies, with the white keyline their guidelines call for on dark grounds.

   Note this is a faithful rebuild in markup, not Apple's supplied artwork. It
   scales and themes better than a PNG, but the Identity Guidelines ask for the
   official asset -- see the note in README before launch. */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px 9px 15px;
  min-height: 54px;
  border-radius: 11px;
  background: #000;
  border: 1px solid #000;
  color: #fff;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, sans-serif;
  transition: opacity 130ms ease-in-out;
}
.appstore-badge:hover { opacity: 0.86; }
.appstore-badge:active { opacity: 0.72; }

.appstore-logo {
  width: 26px;
  height: 26px;
  fill: #fff;
  flex: 0 0 auto;
  margin-top: -2px;  /* the glyph is bottom-heavy; this optically centres it */
}
.appstore-words { display: block; text-align: left; }
.appstore-kicker {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.appstore-name {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Apple asks for a white keyline when the badge sits on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appstore-badge { border-color: rgba(255, 255, 255, 0.55); }
}
:root[data-theme="dark"] .appstore-badge { border-color: rgba(255, 255, 255, 0.55); }

.btn-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

/* Hero — atmospheric wash rather than a flat page colour. */
.hero-full {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) var(--pad) 0;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(237, 121, 118, 0.30), transparent 62%),
    radial-gradient(760px 520px at 12% 8%,  rgba(250, 244, 230, 0.95), transparent 60%),
    radial-gradient(820px 560px at 88% 4%,  rgba(255, 237, 213, 0.85), transparent 58%),
    var(--ground);
}
:root[data-theme="dark"] .hero-full,
:root:not([data-theme="light"]) .hero-full {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(221, 56, 52, 0.30), transparent 62%),
    radial-gradient(760px 520px at 12% 8%,  rgba(168, 85, 247, 0.14), transparent 60%),
    radial-gradient(820px 560px at 88% 4%,  rgba(242, 99, 95, 0.16), transparent 58%),
    var(--ground);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-full {
    background:
      radial-gradient(1100px 620px at 50% -8%, rgba(237, 121, 118, 0.30), transparent 62%),
      radial-gradient(760px 520px at 12% 8%,  rgba(250, 244, 230, 0.95), transparent 60%),
      radial-gradient(820px 560px at 88% 4%,  rgba(255, 237, 213, 0.85), transparent 58%),
      var(--ground);
  }
}

.hero-copy { max-width: 1080px; margin: 0 auto; text-align: center; }

.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(221, 56, 52, 0.18);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 26px;
}
:root[data-theme="dark"] .kicker { background: rgba(255,255,255,0.06); color: var(--accent); }

.hero-full h1 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 800;
  /* Sized so the longer of the two sentences still sets on one line at the
     shell width; below that each span wraps on its own. */
  font-size: clamp(30px, 5.2vw, 61px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 auto 22px;
  max-width: 100%;
  text-wrap: balance;
}
.hero-full h1 span { display: block; }
.hero-full h1 span + span { color: var(--brand-dark); }
:root[data-theme="dark"] .hero-full h1 span + span { color: var(--accent); }

.hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 38px;
  text-wrap: pretty;
}

.hero-note {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 20px 0 0;
}

/* The eight characters — the fastest explanation of the product there is. */
.specimen-rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(8px, 1.4vw, 18px);
  max-width: 1240px;
  margin: clamp(44px, 7vw, 76px) auto 0;
  padding-bottom: clamp(36px, 6vw, 64px);
}
.specimen {
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.specimen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: #FAF4E6;
  border: 1px solid rgba(38, 51, 61, 0.08);
  box-shadow: 0 10px 26px rgba(38, 51, 61, 0.10);
  transition: transform 200ms ease-in-out;
}
.specimen:hover img { transform: translateY(-6px); }
.specimen span {
  display: block;
  margin-top: 10px;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Axes band */
.band {
  padding: clamp(56px, 9vw, 104px) 0;
  background: var(--ground-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band-title {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 clamp(36px, 6vw, 60px);
}

.axes { display: grid; gap: clamp(22px, 4vw, 34px); max-width: 760px; margin: 0 auto; }
.axis {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  position: relative;
  padding-top: 22px;
}
.axis-name {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.axis-pole {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.axis-pole:first-of-type { text-align: right; }
.axis-line {
  display: block;
  width: clamp(60px, 14vw, 150px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--ai));
  opacity: 0.65;
}

/* Three terse tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding-top: clamp(56px, 9vw, 96px);
  padding-bottom: clamp(56px, 9vw, 96px);
}
.tile {
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 30px 26px 32px;
}
.tile h3 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: clamp(21px, 2.4vw, 25px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 8px;
}
.tile p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.tile-ai h3 { color: var(--ai); }

/* Closing */
.closer-full {
  text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--pad);
  background:
    radial-gradient(760px 420px at 50% 110%, rgba(237, 121, 118, 0.28), transparent 66%),
    var(--ground-sunk);
  border-top: 1px solid var(--rule);
}
.closer-full h2 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 62px);
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 0 0 34px;
}
.closer-note { font-size: 15px; color: var(--ink-faint); margin: 22px 0 0; }

/* Footer */
footer { padding-top: 36px; padding-bottom: 44px; font-size: 14px; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
.copyright { color: var(--ink-faint); margin: 0; }

@media (max-width: 900px) {
  .specimen-rail { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .btn-xl { width: 100%; padding: 20px 28px; }
  .axis { grid-template-columns: 1fr; justify-items: center; gap: 6px; text-align: center; }
  .axis-pole:first-of-type { text-align: center; }
  .axis-line { width: 3px; height: 26px; background: linear-gradient(180deg, var(--brand), var(--ai)); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ── Legal pages (privacy, terms) ────────────────────────────────────────── */
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 8px var(--pad) 72px;
}
.legal h1 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 24px 0 8px;
}
.legal h2 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.3px;
  margin-top: 2em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.legal h3 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.legal p, .legal li { color: var(--ink-soft); }
.legal li { margin-bottom: 8px; }
.legal ul { padding-left: 1.4em; }
.legal hr { border: none; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.legal .updated {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 0;
}
.legal .back { margin-top: 3em; font-size: 14px; }
.legal strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Quiz ────────────────────────────────────────────────────────────────
   Reuses the tokens above — no new colors, no new type families. The result
   art is black ink on white, so it always sits on a light "card" surface
   regardless of theme rather than glaring out of a dark page.            */

.quiz {
  padding-top: clamp(24px, 5vw, 48px);
  padding-bottom: clamp(56px, 8vw, 88px);
  max-width: 720px;
}

.quiz-panel[hidden] { display: none; }

.quiz-panel { text-align: center; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}

.credibility {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 22px auto 0;
  max-width: 44ch;
}

.quiz h1 {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 auto 20px;
  max-width: 14ch;
  text-wrap: balance;
}

.quiz .lede {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 32px;
  text-wrap: pretty;
}

/* Progress ---------------------------------------------------------------- */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 5vw, 40px);
}

.quiz-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.quiz-back:hover { border-color: var(--rule-strong); color: var(--ink); }
.quiz-back[hidden] { visibility: hidden; display: block; }

.progress-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--ground-sunk);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light), var(--brand));
  transition: width 220ms ease-in-out;
}

.progress-count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Question ---------------------------------------------------------------- */
.q-figure {
  margin: 0 0 clamp(20px, 4vw, 28px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
}
.q-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.q-text {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 700;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 auto clamp(24px, 4vw, 32px);
  max-width: 20ch;
  text-wrap: balance;
}

.q-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.q-option {
  width: 100%;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease-in-out, transform 120ms ease-in-out;
}
.q-option:hover { border-color: var(--accent); }
.q-option:active { transform: scale(0.98); }
.q-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Loading / error --------------------------------------------------------- */
.spinner {
  width: 32px;
  height: 32px;
  margin: 40px auto 20px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--ink-faint); font-size: 14px; }

/* Result ------------------------------------------------------------------ */
/* The collage art carries its own cream ground, and the exact cream drifts a
   little between pieces (it is textured paper), so the image bleeds to the
   frame edge rather than sitting on a card colour that would never quite
   match. Fixed light surround in both themes to suit the artwork. */
.card-frame {
  width: min(300px, 74vw);
  margin: 8px auto 28px;
  border-radius: 20px;
  overflow: hidden;
  background: #FAF4E6;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 36px rgba(38, 51, 61, 0.16);
}
.card-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.r-name {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-weight: 800;
  font-size: clamp(32px, 5.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 10px;
}
.r-catch {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 auto 22px;
  max-width: 34ch;
}

.r-axes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.r-axes li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

.r-desc {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 auto clamp(32px, 5vw, 44px);
  text-wrap: pretty;
}

.r-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  text-align: left;
  margin-bottom: clamp(32px, 5vw, 44px);
}
.r-block {
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px;
}
.r-block h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.r-block ul { margin: 0; padding-left: 1.1em; }
.r-block li { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 6px; }
.r-block li:last-child { margin-bottom: 0; }

/* "You eat like" — the historical figures matched to this archetype.
   Stacked rows rather than a grid: each row carries a quote, and three columns
   of quoted prose is unreadable on a phone and not much better on a desktop.

   Headed like a chapter, not like the eyebrow labels on .r-block: this is the
   most shareable thing on the page and the last thing read before the CTA, so
   it announces itself instead of blending into the detail cards above it. */
.r-people {
  text-align: left;
  margin-bottom: clamp(32px, 5vw, 44px);
  padding-top: clamp(30px, 5vw, 44px);
  border-top: 1px solid var(--rule);
}
.r-people[hidden] { display: none; }

.r-people-head {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: clamp(27px, 4.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  text-align: center;
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.r-people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  overflow: hidden;
}

.r-person {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 24px;
  border-top: 1px solid var(--rule);
}
.r-person:first-child { border-top: none; }

.r-person-face {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  /* The portraits are old photographs and engravings on assorted paper
     grounds. A soft ring keeps the pale ones from dissolving into the card in
     light mode and the dark ones from floating in dark mode. */
  box-shadow: 0 0 0 1px var(--rule-strong);
  background: var(--ground-sunk);
}
/* Fallback when a portrait is missing or we chose not to ship one. */
.r-person-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

.r-person-body { min-width: 0; }

.r-person-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}
.r-person-name {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.r-person-lived {
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.r-person-line {
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.r-person-quote {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent-soft);
}
.r-person-quote p {
  margin: 0;
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.r-person-quote p::before { content: "\201C"; }
.r-person-quote p::after  { content: "\201D"; }
.r-person-quote cite {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-style: normal;
  color: var(--ink-faint);
}

.r-people-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

.r-cta { border-top: 1px solid var(--rule); padding-top: clamp(28px, 5vw, 40px); }
.r-pitch {
  font-family: "Fraunces", Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.28;
  margin: 0 auto 26px;
  max-width: 26ch;
}

.linkish {
  display: block;
  margin: 22px auto 0;
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--accent); }

@media (max-width: 640px) {
  .card-frame { width: min(260px, 68vw); }
  .r-person { gap: 14px; padding: 20px 17px; }
  .r-person-face { width: 56px; height: 56px; }
  .r-person-mono { font-size: 22px; }
  .r-person-name { font-size: 19px; }
}