/* ==========================================================================
   Article sections — one component per Section#kind, plus the styling "knobs"
   (width / tint / spacing / emphasis) stored on Section#style.
   Every section stays on the Warm Paper system by construction.
   ========================================================================== */

.article-body { padding-block: var(--space-8) var(--space-12); }

/* -- The section wrapper: width, tint, spacing, emphasis knobs -- */
.sec { margin-inline: auto; }
.sec + .sec { margin-top: var(--space-8); }

.sec--reading { max-width: var(--reading-width); }
.sec--wide    { max-width: var(--wide-width); }
.sec--full    { max-width: var(--content-width); }

.sec--tight  { margin-top: var(--space-4); }
.sec--loose  { margin-top: var(--space-16); }

.sec--tint-paper,
.sec--tint-band { border-radius: var(--radius); padding: var(--space-6) var(--space-6); }
.sec--tint-paper { background: var(--paper-raised); border: 1px solid var(--hair); }
.sec--tint-band  { background: var(--band); }

.sec--emphasis { border-left: 3px solid var(--signal-current); padding-left: var(--space-5); }

/* ==========================================================================
   Masthead — renders the article's own title/standfirst/byline
   ========================================================================== */
.sec--masthead { max-width: var(--wide-width); margin-bottom: var(--space-4); }
.masthead-block .kicker { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-4); }
.masthead-block .kicker .kind { color: var(--signal-current); }
.masthead-block h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
.masthead-block .standfirst { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35; color: var(--ink-quiet);
  max-width: 46rem; margin: var(--space-5) 0 0; font-style: normal; }
.masthead-block .byline { font-family: var(--font-data); font-size: 0.82rem; color: var(--ink-quiet);
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule);
  display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }
.masthead-block .byline .author { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Prose — Lexxy rich text rendered into the reading column
   ========================================================================== */
.prose { font-family: var(--font-serif); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.7rem; margin: 2em 0 0.4em; }
.prose h3 { font-size: 1.25rem; margin: 1.6em 0 0.3em; }
.prose a { text-decoration: underline; text-decoration-color: var(--rule); }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding-left: var(--space-5); border-left: 3px solid var(--rule); color: var(--ink-quiet); font-style: italic; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin: 0.3em 0; }
.prose code { font-family: var(--font-num); font-size: 0.9em; background: var(--band); padding: 0.1em 0.35em; border-radius: var(--radius); }
.prose pre { font-family: var(--font-num); font-size: 0.85rem; background: var(--paper-raised); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; line-height: 1.45; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.prose img { max-width: 100%; height: auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-family: var(--font-data); font-size: 0.8rem; color: var(--ink-quiet); margin-top: var(--space-2); }

/* ==========================================================================
   Exhibit & chart — figure + caption + provenance
   ========================================================================== */
.exhibit { margin: 0; }
.exhibit__body { max-width: 100%; overflow-x: auto; }
.exhibit__body svg, .exhibit__body img, .exhibit__body canvas, .exhibit__body table { max-width: 100%; }
.exhibit__caption, .chart-shell__caption {
  font-family: var(--font-serif); font-size: 1rem; color: var(--ink); margin: 0 0 var(--space-3); font-weight: 600;
}
.chart-shell { margin: 0; }
.chart-shell__figure { position: relative; }
.chart-shell canvas { display: block; max-width: 100%; }
.chart-shell__fallback { font-family: var(--font-data); font-size: 0.8rem; color: var(--ink-quiet); }

/* ==========================================================================
   Documentation box (provenance) — the Tufte source line
   ========================================================================== */
.docbox {
  border-top: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-family: var(--font-data);
  font-size: 0.72rem;
  line-height: 1.45;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
}
.docbox strong { color: var(--ink); font-weight: 600; }
.docbox a { color: var(--ink-quiet); }
.sec--docbox .docbox { margin-top: 0; }

/* ==========================================================================
   Supertable — data table with optional sparkline column
   ========================================================================== */
.supertable { border-collapse: collapse; font-family: var(--font-data); font-variant-numeric: tabular-nums lining-nums; width: 100%; }
.supertable caption { text-align: left; font-family: var(--font-serif); font-weight: 600; margin-bottom: var(--space-3); }
.supertable th { border-bottom: 1.5px solid var(--ink); font-weight: 600; padding: var(--space-1) var(--space-3); text-align: right; font-size: 0.85rem; }
.supertable td { border: 0; padding: 0.2rem var(--space-3); text-align: right; font-size: 0.9rem; }
.supertable td.name, .supertable th.name { text-align: left; }
.supertable td.spark { padding: 0.1rem var(--space-2); }
.supertable tr + tr td { border-top: 1px solid var(--hair); }
.supertable .positive { color: var(--signal-positive); }
.supertable .negative { color: var(--signal-negative); }

/* ==========================================================================
   Key figure — a single number in context, with a sparkline
   ========================================================================== */
.key-figure { display: flex; flex-direction: column; gap: var(--space-1); }
.key-figure .kf-label { font-family: var(--font-data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-quiet); }
.key-figure .kf-value { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.key-figure .kf-value .unit { font-size: 0.4em; color: var(--ink-quiet); margin-left: 0.25em; }
.key-figure .kf-change { font-family: var(--font-data); font-size: 0.95rem; }
.key-figure .kf-change.positive { color: var(--signal-positive); }
.key-figure .kf-change.negative { color: var(--signal-negative); }
.key-figure .kf-context { font-family: var(--font-serif); color: var(--ink-quiet); font-size: 0.95rem; }
.key-figure .spark { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   Pull quote
   ========================================================================== */
.pull-quote { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.28;
  letter-spacing: -0.01em; margin: 0; padding-left: var(--space-6); border-left: 3px solid var(--signal-current); }
.pull-quote cite { display: block; font-family: var(--font-data); font-size: 0.85rem; font-style: normal;
  color: var(--ink-quiet); margin-top: var(--space-3); }

/* ==========================================================================
   Watch list — dated, falsifiable predictions
   ========================================================================== */
.watch-list { list-style: none; margin: 0; padding: 0; }
.watch-list__title { font-family: var(--font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 var(--space-4); }
.watch-list li { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4); padding-block: var(--space-3);
  border-top: 1px solid var(--hair); align-items: baseline; }
.watch-list li:first-child { border-top: 1.5px solid var(--ink); }
.watch-list .when { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--signal-current); font-weight: 600; }
.watch-list .claim { font-family: var(--font-serif); }
.watch-list .claim .basis { display: block; font-family: var(--font-data); font-size: 0.8rem; color: var(--ink-quiet); margin-top: var(--space-1); }

/* ==========================================================================
   Divider — a quiet Tufte rule
   ========================================================================== */
.sec--divider { max-width: var(--reading-width); }
.tufte-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.tufte-rule--space { margin-block: var(--space-8); }

/* ==========================================================================
   Sparkline (inline SVG, word-sized) — house signature
   ========================================================================== */
.spark svg { display: inline-block; vertical-align: middle; }
.spark .spark-band { fill: var(--band); }
.spark .spark-line { fill: none; stroke: var(--ink); stroke-width: 1; }
.spark .spark-endpoint { fill: var(--signal-current); }

/* -- Paywall gate teaser -- */
.gate { margin-top: var(--space-8); padding: var(--space-8) var(--space-6); text-align: center;
  border-top: 2px solid var(--ink); background: var(--paper-raised); border-radius: var(--radius); }
.gate h3 { font-size: 1.4rem; margin: 0 0 var(--space-2); }
.gate p { color: var(--ink-quiet); max-width: 34rem; margin: 0 auto var(--space-5); }

@media (max-width: 34rem) {
  .watch-list li { grid-template-columns: 1fr; gap: var(--space-1); }
}