/**
 * Editorial pages.
 *
 * Deliberately standalone rather than sharing the app's stylesheet: the point
 * of a static article is that it renders fully without the bundle, so it must
 * not wait on anything the SPA owns. The tokens below are copied from
 * `app/globals.css` and should be kept in step with it.
 */

:root {
  --background: #f3efe7;
  --background-lift: #f8f4ec;
  --background-deep: #e9e1d5;
  --surface: #fbf8f2;
  --surface-raised: #fffdf8;
  --surface-muted: #eee8de;
  --ink: #181714;
  --ink-soft: #49453f;
  --muted: #817b72;
  --line: #dcd3c5;
  --line-strong: #c4b8a8;
  --teal: #0c7472;
  --teal-dark: #075a58;
  --teal-soft: #d9eae7;
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  /* One measure, used by the header, the article and the footer alike. */
  --measure: 740px;
}

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

body {
  margin: 0;
  color: var(--ink);
  /* The app's page gradient, to the same two tones. Kept in step with
     `app/globals.css` — moving between an editorial page and the app should
     not look like moving between two sites. */
  background-color: var(--background);
  background-image: linear-gradient(168deg, var(--background-lift) 0%, var(--background) 38%, var(--background-deep) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal); }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------- chrome --- */

/* The app's topbar: same height, same padding rule, same translucent bar. */
.site-header {
  height: 70px;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 max(32px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid rgba(196,184,168,.72);
  background: rgba(243,239,231,.88);
  backdrop-filter: blur(18px);
}
/* The masthead, matching the app's exactly — same sizes, same weights, same
   arc. The per-letter transforms are written inline by the template; these
   rules are the frame they sit in. `space-between` pins the strapline to the
   name's width, so whatever the glyphs do not fill becomes the letter spacing.
   Copied from `app/globals.css` and kept in step with it. */
.wordmark { display: inline-flex; flex-direction: column; align-items: stretch; width: fit-content; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 650; letter-spacing: -.03em; text-decoration: none; }
.wordmark-text { display: inline-flex; align-items: baseline; }
.wordmark-text > span { display: inline-block; }
.wordmark-sub { display: flex; justify-content: space-between; margin-top: -3px; color: var(--muted); font-family: var(--font-sans); font-size: 11.5px; font-weight: 780; letter-spacing: 0; text-transform: uppercase; transition: color 200ms ease; }
.wordmark-sub > span { display: inline-block; }
.wordmark-sub .wordmark-space { width: .18em; }
.wordmark:hover .wordmark-sub { color: var(--teal); }
.wordmark-text .wordmark-space { width: .27em; }
.site-nav { display: flex; gap: 29px; }
.site-nav a { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

.site-footer {
  margin-top: 72px; padding: 34px clamp(16px, 5vw, 40px) 54px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; text-align: center;
}
.site-footer p { margin: 4px 0; }

/* ------------------------------------------------------------ article --- */

.article-page { width: min(var(--measure), calc(100% - 40px)); margin: 0 auto; padding-top: 30px; }
@media (max-width: 640px) { .article-page { width: calc(100% - 36px); padding-top: 20px; } }

/* The app's mobile header: the wordmark centred on its own, and the text nav
   dropped rather than allowed to run off the edge. The app replaces it with a
   fixed bottom bar; a static article has no such bar, so the way on from here
   is the wordmark, the call to action in the article, and the footer links.
   Breakpoint matched to the app's. */
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 58px; justify-content: center; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
  .site-nav { display: none; }
  .wordmark { font-size: 19px; }
}

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.breadcrumbs li + li::before { content: "→"; margin-right: 8px; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }

.article-eyebrow { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.article-head h1 { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(34px, 6vw, 52px); font-weight: 600; line-height: 1.03; letter-spacing: -.035em; }
.article-subtitle { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 24px); font-weight: 400; line-height: 1.28; color: var(--ink-soft); }
.article-excerpt { margin: 0 0 20px; color: var(--ink-soft); font-size: 18.5px; line-height: 1.6; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

.article-hero { margin: 0 0 34px; }
.article-hero img { width: 100%; border-radius: 10px; }
.article-hero figcaption { margin-top: 8px; color: var(--muted); font-size: 11.5px; }

.article-body > *:first-child { margin-top: 0; }
/* A `#` in an author's Markdown. The page title above is already the H1, so
   this is smaller than that and set tight — unstyled it took the body's 1.65
   line height, which on a 34px heading is enormously airy. */
.article-body h1 { margin: 46px 0 14px; font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.article-body h1:first-child { margin-top: 0; }
.article-body h2 { margin: 46px 0 14px; font-family: var(--font-display); font-size: clamp(25px, 3.4vw, 32px); font-weight: 600; line-height: 1.14; letter-spacing: -.025em; }
.article-body h3 { margin: 34px 0 10px; font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 23px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.article-body h4 { margin: 26px 0 8px; font-size: 17px; font-weight: 750; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--teal); }
.article-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--teal); color: var(--ink-soft);
  font-family: var(--font-display); font-size: 20px; line-height: 1.5;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.article-body img { border-radius: 8px; }
.article-body code { padding: 2px 5px; border-radius: 4px; background: var(--surface-muted); font-size: .9em; }
.article-body pre { overflow-x: auto; margin: 0 0 22px; padding: 16px 18px; border-radius: 8px; background: var(--surface-muted); }
.article-body pre code { padding: 0; background: none; }

/* Wide tables scroll inside the column rather than stretching the measure. */
.article-table { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); border-radius: 8px; }
.article-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-table th, .article-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.article-table th { background: var(--surface-muted); font-weight: 750; }
.article-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- CTA --- */

.article-cta {
  margin: 48px 0; padding: 28px clamp(20px, 4vw, 32px);
  border: 1px solid var(--teal-soft); border-radius: 12px;
  background: var(--teal-soft);
}
.article-cta h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--teal-dark); }
.article-cta p { margin: 0 0 18px; color: var(--ink-soft); }
.cta-button {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border-radius: 7px; background: var(--teal); color: #fff;
  font-size: 12px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; text-decoration: none;
}
.cta-button:hover { background: var(--teal-dark); color: #fff; }

/* ------------------------------------------------- sources and related --- */

.article-sources { margin: 48px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.article-sources h2, .article-related h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.article-sources ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.article-sources li { margin-bottom: 7px; }

.article-related { margin-top: 52px; }
.article-related > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.related-card {
  display: grid; gap: 5px; padding: 17px 19px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised);
  text-decoration: none; color: var(--ink);
  transition: border-color 170ms ease, transform 170ms ease;
}
.related-card:hover { border-color: var(--line-strong); transform: translateY(-1px); color: var(--ink); }
.related-section { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.related-card strong { font-family: var(--font-display); font-size: 18px; font-weight: 590; line-height: 1.2; }
.related-excerpt { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ----------------------------------------------------- section indexes --- */

.index-head { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.index-head h1 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(36px, 6vw, 54px); font-weight: 600; letter-spacing: -.04em; }
.index-grid { display: grid; gap: 12px; }
.index-card {
  display: grid; gap: 6px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised);
  text-decoration: none; color: var(--ink);
  transition: border-color 170ms ease, transform 170ms ease;
}
.index-card:hover { border-color: var(--line-strong); transform: translateY(-1px); color: var(--ink); }
.index-card strong { font-family: var(--font-display); font-size: 22px; font-weight: 590; line-height: 1.18; letter-spacing: -.02em; }
.index-card span { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.index-card small { color: var(--muted); font-size: 11.5px; }
.index-empty { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .related-card, .index-card { transition: none; }
}

/* -------------------------------------------------------------------------
   Charts and quizzes embedded in an article
   ------------------------------------------------------------------------- */

.article-chart { margin: 34px 0; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.chart-title { margin: 0 0 16px; font-family: var(--font-display); font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
.chart-plot { position: relative; display: grid; gap: 10px; }
.chart-row { display: grid; grid-template-columns: minmax(70px, 26%) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.chart-label { color: var(--ink-soft); font-size: 13px; line-height: 1.3; }
.chart-track { height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.chart-bar { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: linear-gradient(90deg, var(--teal) 0%, #3f9a92 100%); }
.chart-value { color: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The threshold sits over the bars in the same column they are drawn in, so
   the eye reads "this one clears it, this one does not" without arithmetic. */
.chart-target { position: absolute; top: -4px; bottom: -4px; left: calc(26% + 12px); right: 0; pointer-events: none; }
.chart-target::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; border-radius: 2px; background: repeating-linear-gradient(var(--red) 0 4px, transparent 4px 8px); }
.chart-target span { position: absolute; top: -2px; left: var(--at); padding: 1px 6px; border-radius: 3px; color: #fff; background: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.chart-caption { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.article-quiz { margin: 38px 0; padding: 24px 24px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-raised); }
.article-quiz > header h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 620; letter-spacing: -.02em; }
.article-quiz > header p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.quiz-questions { margin: 0; padding: 0 0 0 0; list-style: none; counter-reset: quiz; }
.quiz-question { padding: 16px 0; border-top: 1px solid var(--line); counter-increment: quiz; }
.quiz-question:first-child { border-top: 0; padding-top: 0; }
.quiz-stem { margin: 0 0 11px; font-size: 15.5px; font-weight: 620; line-height: 1.4; }
.quiz-stem::before { content: counter(quiz) ". "; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-options { display: grid; gap: 6px; }
.quiz-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 14px; line-height: 1.4; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.quiz-option:hover { border-color: var(--line-strong); }
.quiz-option input { flex: none; accent-color: var(--teal); }
/* Marking only paints once the quiz has been checked, so a half-finished
   sheet gives nothing away. */
/* Marking has to be readable at a glance and without relying on colour alone,
   so each marked option carries a tick or a cross as well as its tint. */
.marked .quiz-option.correct { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
.marked .quiz-option.chosen:not(.correct) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.marked .quiz-option.correct::after, .marked .quiz-option.chosen:not(.correct)::after { margin-left: auto; font-size: 14px; font-weight: 800; }
.marked .quiz-option.correct::after { content: "✓ Correct"; color: var(--success); font-size: 11px; letter-spacing: .04em; }
.marked .quiz-option.chosen:not(.correct)::after { content: "✗ Your answer"; color: var(--red); font-size: 11px; letter-spacing: .04em; }
.marked .quiz-option input { pointer-events: none; }
.quiz-explanation { display: none; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--teal); color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.marked .quiz-explanation { display: block; }
/* One question at a time, once the script has said so. Until then every
   question is on the page — see QUIZ_SCRIPT. */
.paged .quiz-question { display: none; }
.paged .quiz-question.current { display: block; border-top: 0; padding-top: 0; }
/* A CSS counter only counts what is rendered, so while paged every question
   would number itself "1." — and the pager already says which one this is. */
.paged .quiz-stem::before { content: none; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
/* The pager is meaningless when every question is visible, so it only appears
   alongside the paging it describes. */
.quiz-back, .quiz-next, .quiz-step { display: none; }
.paged .quiz-back, .paged .quiz-next { display: inline-block; }
.paged .quiz-step { display: inline-block; order: -1; margin-right: auto; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.quiz-back[disabled] { opacity: .4; cursor: not-allowed; }
/* Scoped, not global: `hidden` has to beat the pager's own display rule
   without overriding it everywhere else on the page. */
.article-quiz [hidden] { display: none !important; }
.quiz-check, .quiz-reset, .quiz-next, .quiz-back { padding: 10px 18px; border: 1px solid var(--teal-dark); border-radius: 7px; color: #fff; background: var(--teal-dark); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.quiz-reset, .quiz-back, .quiz-next { color: var(--ink-soft); background: transparent; border-color: var(--line-strong); }
.quiz-next { color: #fff; background: var(--teal-dark); border-color: var(--teal-dark); }
.quiz-next:hover, .quiz-check:hover { background: var(--teal); border-color: var(--teal); }
.quiz-check:hover { background: var(--teal); border-color: var(--teal); }
.quiz-result { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.quiz-result.short { color: var(--muted); font-weight: 550; }

@media (max-width: 620px) {
  .article-chart { padding: 16px 14px 14px; }
  .chart-row { grid-template-columns: minmax(58px, 32%) minmax(0, 1fr) auto; gap: 8px; }
  .chart-label { font-size: 12px; }
  .chart-target { left: calc(32% + 8px); }
  .article-quiz { padding: 18px 16px 16px; }
}