/* ============================================================
   MARKET WEATHER — design system v3 ("Meridian")
   Symmetric minimal publication system (2026-09-23).
   Research: Swiss grid discipline + Japanese Ma (emptiness as
   potential, generous intervals) + Stripe Press restraint +
   disciplined brutalist-minimal ledger details.

   THE RULES (encoded below):
   - One grid, one container, one measure. Symmetry = equal
     margins + one shared width + one spacing scale.
   - One paper tone site-wide (#FAF6ED). ONE accent (#1D4ED8),
     used only for interactive elements + key data emphasis.
     Green/red strictly semantic (market direction).
   - Type: Fraunces (display only: wordmark, headlines),
     Inter (everything else: body, UI, labels),
     IBM Plex Mono (data + metadata, tabular numerals).
     Max 3 weights per document: 400 / 500 / 600.
   - Hairline rules are the only ornament. No shadows, no
     gradients, no rounded cards, no zebra section backgrounds.
   - Heads may center; body paragraphs are justified symmetrically
     (text-align: justify, inter-word, auto hyphenation).
   - Theme tokens under :root; html[data-theme="dark"] overrides them.
   - Spacing scale: 8px base, steps 1/2/3/4/6/8/12.
   ============================================================ */

/* ---------- fonts (self-hosted woff2, latin subsets) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-normal-100-900.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic-100-900.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-normal-100-900.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: fallback;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-italic-100-900.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: fallback;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-normal-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-normal-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-normal-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --u: 8px;
  --paper: #FAF6ED;
  --ink: #17140F;
  --ink-2: #55504A;
  --ink-3: #7A746A;
  --accent: #1D4ED8;
  --accent-ink: #1743B4;
  --up: #15803D;
  --down: #B3261E;
  --hairline: #E2DAC6;

  --container: 1120px;
  --measure: 65ch;
  --narrow: 720px;

  --brandbar-h: 54px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-1: clamp(2.4375rem, 5vw, 3.875rem);    /* 39-62 display */
  --fs-2: clamp(1.9375rem, 3.6vw, 2.4375rem);  /* 31-39 */
  --fs-3: 1.5625rem;                           /* 25 */
  --fs-4: 1.25rem;                             /* 20 */
  --fs-body: 1.0625rem;                        /* 17 */
  --fs-small: 0.9375rem;                       /* 15 */
  --fs-meta: 0.75rem;                          /* 12 */
}

/* ---------- dark theme: same system, inverted tokens ---------- */
html[data-theme="dark"] {
  --paper: #141310;
  --ink: #F1ECE1;
  --ink-2: #B9B2A4;
  --ink-3: #857E70;
  --accent: #7FA6FF;
  --accent-ink: #A8C1FF;
  --up: #4ADE80;
  --down: #F87171;
  --hairline: #2D2A23;
}
html[data-theme="dark"] ::selection { background: rgba(127, 166, 255, 0.28); }
html[data-theme="dark"] .verdict-mixed { color: #D9A441; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(29, 78, 216, 0.16); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 calc(var(--u) * 3);
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Justified list items read cleanly next to justified paragraphs. */
.article-body li, .tldr li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* Narrow rails never justify — columns are too thin for even word spacing. */
.article-rail p, .rail-box p { text-align: left; -webkit-hyphens: none; hyphens: none; }

a {
  color: var(--accent-ink);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
}
.prose {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}
.narrow {
  width: 100%;
  max-width: var(--narrow);
  margin-inline: auto;
  text-align: center;
}

/* One identical section rhythm everywhere. */
.section { padding-block: calc(var(--u) * 12); }

/* Identical section heads, always centered — except on the
   magazine homepage, where they align with the grid. */
.section-head { text-align: center; margin-bottom: calc(var(--u) * 6); }
.home .section-head { text-align: left; }
.section-head .kicker { margin-bottom: calc(var(--u) * 2); }
.section-head h2 { font-size: var(--fs-2); }
.section-head::after {
  content: "";
  display: block;
  border-top: 1px solid var(--hairline);
  margin-top: calc(var(--u) * 4);
}

.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kicker .no {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-3);
  margin-right: calc(var(--u) * 1);
}

.more-link {
  display: block;
  text-align: center;
  margin-top: calc(var(--u) * 6);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* ---------- accessibility ---------- */
.skip-link {
  position: absolute;
  left: 16px; top: -48px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 100;
  font-size: var(--fs-small); font-weight: 500;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ============================================================
   MASTHEAD — slim and useful.
   A thin utility strip (dateline + theme toggle) that scrolls away,
   and one compact sticky brand bar: logo left, sections right.
   ============================================================ */
.masthead { background: var(--paper); }

.utility {
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  padding: 6px 0;
}
.utility .dateline, .utility .strap {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.utility .sep { color: var(--ink-3); margin: 0 calc(var(--u) * 1.5); }

/* ---------- theme toggle ---------- */
.utility .wrap { position: relative; }
.theme-toggle {
  position: absolute;
  right: clamp(24px, 5vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle svg { width: 14px; height: 14px; display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (max-width: 640px) {
  .theme-toggle .theme-label { display: none; }
  .theme-toggle { padding: 5px 8px; }
  .utility .strap, .utility .sep { display: none; }
}

/* Slim sticky brand bar: logo + wordmark left, sections right. */
.brandbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.brandbar-row {
  height: var(--brandbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.25);
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.front-mark { width: 24px; height: 24px; color: var(--ink); }
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.sitenav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
}
.sitenav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 4px 2px;
  white-space: nowrap;
}
.sitenav a:hover { color: var(--accent-ink); text-decoration: none; }
.sitenav a[aria-current="page"] {
  color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.sitenav a.nav-accent { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 640px) {
  .wordmark { font-size: 1.0625rem; }
  .sitenav a { font-size: var(--fs-meta); }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* Front page — magazine grid: lead story + tape rail. */
.front-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: calc(var(--u) * 8);
  align-items: start;
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 10);
}
.front-lead { grid-column: span 8; }
.front-lead .kicker { margin-bottom: calc(var(--u) * 3); }
.front-lead h1 {
  font-size: var(--fs-1);
  letter-spacing: -0.015em;
  margin-bottom: calc(var(--u) * 3);
}
.front-lead .dek {
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 calc(var(--u) * 4);
}
/* Tape rail — the snapshot lives beside the lead, not below it. */
.tape-rail {
  grid-column: span 4;
  border-left: 1px solid var(--hairline);
  padding-left: calc(var(--u) * 6);
}
.tape-rail .kicker { margin-bottom: calc(var(--u) * 2); }
.tape-rail .tape-table th, .tape-rail .tape-table td {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1);
}
.tape-note {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin: calc(var(--u) * 3) 0 0;
}
.byline-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: calc(var(--u) * 4);
}
.byline-row .rule {
  width: 32px;
  border-top: 1px solid var(--hairline);
}
.prob-chips {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin: 0 0 calc(var(--u) * 4);
  padding: 0;
}
.prob-chips li {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 6px 12px;
  background: transparent;
}
.prob-chips li.top {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.read-link {
  font-weight: 600;
  font-size: var(--fs-body);
}

/* The tape — one centered ledger table. */
.tape-table { width: 100%; border-collapse: collapse; }
.tape-table caption {
  caption-side: bottom;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  padding-top: calc(var(--u) * 3);
  letter-spacing: 0.02em;
}
.tape-table th, .tape-table td {
  padding: calc(var(--u) * 2) calc(var(--u) * 1);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  text-align: left;
  vertical-align: baseline;
}
.tape-table tr:last-child th, .tape-table tr:last-child td {
  border-bottom: 1px solid var(--hairline);
}
.tape-table th { font-weight: 500; color: var(--ink); }
.tape-table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}
.tape-table td.num.up { color: var(--up); }
.tape-table td.num.down { color: var(--down); }

/* Recent editions — asymmetric feature grid on a 12-column rhythm. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--u) * 8);
}
.feature-cell { border-top: 2px solid var(--ink); padding-top: calc(var(--u) * 3); }
.feature-cell.span-7 { grid-column: span 7; }
.feature-cell.span-5 { grid-column: span 5; }
.feature-cell .kicker { margin-bottom: calc(var(--u) * 2); }
.cell-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: calc(var(--u) * 2);
}
.feature-cell.span-5 .cell-title { font-size: var(--fs-4); }
.cell-dek {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: calc(var(--u) * 2);
}
.feature-cell a { color: inherit; }
.feature-cell a:hover { text-decoration: none; }
.feature-cell a:hover .cell-title { color: var(--accent-ink); text-decoration: underline; }
.archive-promo .more-link { font-size: var(--fs-body); }
.cell-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The index — a dense two-column ledger of every edition. */
.river {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--u) * 8);
  border-bottom: 1px solid var(--hairline);
}
.river li { border-top: 1px solid var(--hairline); }
.river a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: calc(var(--u) * 2);
  align-items: baseline;
  padding: calc(var(--u) * 2) 0;
  color: var(--ink);
}
.river a:hover { text-decoration: none; }
.river-date {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.river-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.45;
}
.river a:hover .river-title { color: var(--accent-ink); text-decoration: underline; }

/* Method — four ruled columns, left-aligned. */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.method-cell { text-align: left; padding: 0 0 0 calc(var(--u) * 4); }
.method-cell:first-child { padding-left: 0; }
.method-cell + .method-cell { border-left: 1px solid var(--hairline); }
.method-cell .m-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: calc(var(--u) * 2);
}
.method-cell h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: calc(var(--u) * 1.5);
}
.method-cell p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }

/* ============================================================
   SUBSCRIBE — the one deliberate inverted band.
   ============================================================ */
.subscribe-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: calc(var(--u) * 12);
  text-align: center;
}
.subscribe-band .kicker { color: rgba(250, 246, 237, 0.6); margin-bottom: calc(var(--u) * 2); }
.subscribe-band h2 {
  color: var(--paper);
  font-size: var(--fs-2);
  margin-bottom: calc(var(--u) * 2);
}
.subscribe-band .lede {
  color: rgba(250, 246, 237, 0.78);
  font-size: var(--fs-body);
  max-width: 52ch;
  margin: 0 auto calc(var(--u) * 4);
}
.band-form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--u) * 1.5);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 3);
}
.band-form .hp { display: none; }
.band-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(250, 246, 237, 0.35);
  border-radius: 2px;
  padding: 14px 18px;
  min-width: min(340px, 100%);
}
.band-form input[type="email"]::placeholder { color: rgba(250, 246, 237, 0.45); }
.band-form input[type="email"]:focus {
  outline: none;
  border-color: var(--paper);
}
.band-form button {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 14px 32px;
  cursor: pointer;
}
.band-form button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.subscribe-band .fine {
  font-size: var(--fs-small);
  color: rgba(250, 246, 237, 0.55);
  margin: 0;
}

/* Dark mode: the band stays a dark panel — it never inverts to light,
   because its children use fixed light-ink colors by design. */
html[data-theme="dark"] .subscribe-band {
  background: #201D16;
  color: var(--ink);
}
html[data-theme="dark"] .subscribe-band h2 { color: var(--ink); }
html[data-theme="dark"] .band-form input[type="email"] {
  color: var(--ink);
  border-color: rgba(241, 236, 225, 0.35);
}
html[data-theme="dark"] .band-form input[type="email"]:focus { border-color: var(--ink); }

/* Inline (article) subscribe — hairline box, centered. */
.article-subscribe {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: calc(var(--u) * 8) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 10);
  text-align: center;
}
.article-subscribe h2 { font-size: var(--fs-3); margin-bottom: calc(var(--u) * 2); }
.article-subscribe p { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: calc(var(--u) * 4); }
.inline-form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--u) * 1.5);
  flex-wrap: wrap;
}
.inline-form .hp { display: none; }
.inline-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  padding: 13px 18px;
  min-width: min(320px, 100%);
}
.inline-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.inline-form button {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 13px 30px;
  cursor: pointer;
}
.inline-form button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* ============================================================
   FOOTER — centered colophon.
   ============================================================ */
.site-footer {
  border-top: 3px solid var(--ink);
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 6);
  text-align: center;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.site-footer a.footer-wordmark:hover { text-decoration: none; }
.footer-mission {
  color: var(--ink-2);
  font-size: var(--fs-small);
  max-width: 56ch;
  margin: calc(var(--u) * 2) auto calc(var(--u) * 4);
}
.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 4);
}
.footer-nav a { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.footer-nav a:hover { color: var(--accent-ink); text-decoration: none; }
.colophon {
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--u) * 3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1) calc(var(--u) * 3);
}
.colophon .disc {
  flex-basis: 100%;
  max-width: 72ch;
  margin: calc(var(--u) * 2) auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: 1.6;
  letter-spacing: 0;
}

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-intro {
  text-align: center;
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 6);
  max-width: 720px;
  margin-inline: auto;
}
.archive-intro .kicker { margin-bottom: calc(var(--u) * 3); }
.archive-intro h1 { font-size: var(--fs-1); margin-bottom: calc(var(--u) * 3); }
.archive-intro p { color: var(--ink-2); font-size: var(--fs-4); margin: 0; }

.issue-list { list-style: none; margin: 0 0 calc(var(--u) * 12); padding: 0; }
.issue-list li { border-top: 1px solid var(--hairline); }
.issue-list li:last-child { border-bottom: 1px solid var(--hairline); }
.issue-list a {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: calc(var(--u) * 3);
  align-items: baseline;
  padding: calc(var(--u) * 3) calc(var(--u) * 1);
  color: var(--ink);
}
.issue-list a:hover { text-decoration: none; background: rgba(23, 20, 15, 0.025); }
.issue-no {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.issue-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-4);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.issue-list a:hover .issue-title { color: var(--accent-ink); text-decoration: underline; }
.issue-dek {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.5;
  max-width: 68ch;
}
.issue-meta { text-align: right; white-space: nowrap; }
.issue-meta .d {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
}
.issue-meta .thesis {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-head {
  text-align: center;
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 5);
}
.article-head .kicker { margin-bottom: calc(var(--u) * 3); }
.article-head h1 {
  font-size: var(--fs-1);
  margin-bottom: calc(var(--u) * 3);
}
.article-head .dek {
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0 auto;
}
.article-byline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 5);
  border-bottom: 1px solid var(--hairline);
}
.article-byline .by { font-weight: 600; color: var(--ink); }

/* Article — magazine layout: main column + sticky rail. */
.article-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: calc(var(--u) * 8);
  align-items: start;
  margin-top: calc(var(--u) * 9);
}
.article-main { grid-column: span 8; min-width: 0; }
/* Rail — the guide lives beside the article, not below it. */
.article-rail {
  grid-column: span 4;
  border-left: 1px solid var(--hairline);
  padding-left: calc(var(--u) * 6);
  position: sticky;
  top: calc(var(--u) * 6);
  display: grid;
  gap: calc(var(--u) * 9);
  align-content: start;
}
.rail-box .kicker { display: block; margin-bottom: calc(var(--u) * 3); }
.rail-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 2);
  counter-reset: toc;
}
.rail-toc li { counter-increment: toc; }
.rail-toc a {
  display: flex;
  gap: calc(var(--u) * 2);
  align-items: baseline;
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.rail-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  flex-shrink: 0;
}
.rail-toc a:hover { color: var(--ink); text-decoration: underline; }
/* Thesis — the call, set as a pull quote. */
.rail-thesis {
  border-top: 2px solid var(--ink);
  padding-top: calc(var(--u) * 4);
}
.rail-thesis p {
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.rail-latest ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 3);
}
.rail-latest a { text-decoration: none; display: grid; gap: 2px; }
.rail-latest a:hover .rl-title { text-decoration: underline; }
.rl-date {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rl-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.article-body { font-size: var(--fs-body); }
.article-body > p { margin-bottom: calc(var(--u) * 3); }
.article-body h2 {
  font-size: var(--fs-3);
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--u) * 5);
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 3);
}
.article-body h3 {
  font-size: var(--fs-4);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 2);
}
.article-body ul, .article-body ol {
  margin: 0 0 calc(var(--u) * 3);
  padding-left: calc(var(--u) * 3);
}
.article-body li { margin-bottom: calc(var(--u) * 1.5); }
.article-body li::marker { color: var(--ink-3); }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: calc(var(--u) * 4) 0;
  font-size: var(--fs-small);
}
.article-body th, .article-body td {
  text-align: left;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1);
  border-top: 1px solid var(--hairline);
  vertical-align: top;
}
.article-body thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 2px solid var(--ink);
}
.article-body tbody tr:last-child td { border-bottom: 1px solid var(--hairline); }
.article-body td.num, .article-body th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(23, 20, 15, 0.05);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Scenario blocks — stacked, ruled, never cards. */
.scenario {
  border-top: 1px solid var(--hairline);
  padding: calc(var(--u) * 4) 0;
}
.scenario-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 2);
}
.scenario-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scenario-kind.bullish { color: var(--up); }
.scenario-kind.bearish { color: var(--down); }
.scenario-kind.neutral { color: var(--ink-2); }
.scenario-prob {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.scenario h3 {
  font-size: var(--fs-4);
  margin: 0 0 calc(var(--u) * 2);
}
.scenario .thesis-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 3px 10px;
  margin-left: auto;
  white-space: nowrap;
}
.chain {
  border-top: 3px solid var(--accent);
  margin-top: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 4);
}
.chain .lbl { color: var(--accent-ink); }

/* Structured lead-ins: Tell: / Invalidation: / Spark: ... */
.lbl {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.verdict-right { color: var(--up); }
.verdict-wrong { color: var(--down); }
.verdict-mixed { color: #9A6A00; }

.article-foot {
  margin-top: calc(var(--u) * 8);
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--hairline);
}
.article-foot .disc {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin: 0;
}

/* Edition flow — mirrored older/newer pair, hairline above closes the article. */
.edition-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
  margin-top: calc(var(--u) * 8);
}
.ed-cell { display: block; padding: calc(var(--u) * 4) calc(var(--u) * 2); color: var(--ink); }
a.ed-cell:hover { text-decoration: none; }
a.ed-cell:hover .ed-when { color: var(--accent-ink); text-decoration: underline; }
.ed-older { text-align: left; border-right: 1px solid var(--hairline); }
.ed-newer { text-align: right; }
.ed-dir {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: calc(var(--u) * 1);
}
.ed-when {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.ed-muted .ed-dir,
.ed-muted .ed-when { color: var(--ink-3); }
.ed-all {
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding: calc(var(--u) * 3) 0;
  margin: 0;
}
.ed-all a {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ed-all a:hover { color: var(--accent-ink); }

/* Archive pagination — one centered, symmetric row. */
.pagination { margin-top: calc(var(--u) * 10); }
.pg-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: calc(var(--u) * 4);
}
.pg-side {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
a.pg-side:hover { color: var(--accent-ink); }
.pg-older { text-align: right; }
.pg-newer { text-align: left; }
.pg-muted { color: var(--ink-3); }
.pg-nums {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--u) * 2);
}
.pg-num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  padding: calc(var(--u) * 1);
}
a.pg-num:hover { color: var(--accent-ink); }
.pg-num[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.pg-ellipsis { color: var(--ink-3); }
.pg-caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: calc(var(--u) * 3) 0 0;
}

/* ---------- 404 / thanks ---------- */
.notfound {
  text-align: center;
  padding: calc(var(--u) * 14) 0;
  max-width: 560px;
  margin-inline: auto;
}
.notfound .kicker { margin-bottom: calc(var(--u) * 3); }
.notfound h1 { font-size: var(--fs-1); margin-bottom: calc(var(--u) * 3); }
.notfound p { color: var(--ink-2); }
.thanks-wrap {
  text-align: center;
  padding: calc(var(--u) * 12) 0;
}
/* ============================================================
   DYNAMIC BASE — fluid, touch-ready, notch-aware (all viewports).
   Spacing and type breathe with the viewport: the layout is
   continuously adaptive, not just broken at one breakpoint.
   ============================================================ */

/* Fluid section rhythm — padding scales with the viewport. */
.section { padding-block: clamp(48px, 9vw, 96px); }

/* Guard against any stray wide element; no sticky in use. */
html, body { overflow-x: clip; }

/* Touch behavior. */
a, button { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(29, 78, 216, 0.12); }

/* Notch-aware container: safe-area insets never clip content. */
.wrap {
  padding-inline: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Nicer rag on narrow measures. */
p { text-wrap: pretty; }

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

/* Future-proof: any table the CMS emits scrolls instead of breaking. */
.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- tablet and down ---------- */
@media (max-width: 900px) {
  .front-grid { grid-template-columns: 1fr; padding: calc(var(--u) * 6) 0; }
  .front-lead { grid-column: 1 / -1; }
  .tape-rail {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: calc(var(--u) * 6);
    margin-top: calc(var(--u) * 2);
  }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-cell.span-7, .feature-cell.span-5 { grid-column: 1 / -1; }
  /* Method: one ruled column, each principle on its own line. */
  .method-grid { grid-template-columns: 1fr; row-gap: 0; }
  .method-cell { padding: calc(var(--u) * 4) 0; }
  .method-cell + .method-cell { border-left: none; border-top: 1px solid var(--hairline); }
  .river { grid-template-columns: 1fr; }
  .issue-list a { grid-template-columns: 48px 1fr; }
  .issue-meta { grid-column: 2; text-align: left; display: flex; gap: calc(var(--u) * 2); }
  .issue-meta .thesis { margin-top: 0; }
  .edition-flow { grid-template-columns: 1fr; }
  .ed-older { border-right: none; border-bottom: 1px solid var(--hairline); text-align: center; }
  .ed-newer { text-align: center; }
  /* Article: one column; the rail stacks below the article. */
  .article-grid { grid-template-columns: 1fr; margin-top: calc(var(--u) * 6); }
  .article-main, .article-rail { grid-column: 1 / -1; }
  .article-rail {
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: calc(var(--u) * 8);
    position: static;
  }
  .pg-row { grid-template-columns: 1fr; text-align: center; gap: calc(var(--u) * 3); }
  .pg-older, .pg-newer { text-align: center; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  /* Masthead: slim utility strip, compact brand bar. */
  .utility { padding: calc(var(--u) * 1.25) 0; }
  .utility .wrap {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2px calc(var(--u) * 1.5);
  }
  .utility .sep { margin: 0; }

  /* Nav: four links in one slim row, no wrap. */
  .sitenav { gap: calc(var(--u) * 1.75); }

  /* Rhythm + reading. */
  .section { padding-block: clamp(40px, 12vw, 64px); }
  .subscribe-band { padding-block: calc(var(--u) * 8); }
  .article-head { padding: calc(var(--u) * 6) 0 calc(var(--u) * 4); }
  .archive-intro { padding: calc(var(--u) * 6) 0 calc(var(--u) * 4); }
  .article-body { -webkit-hyphens: auto; hyphens: auto; }
  .article-body h2 { margin-top: calc(var(--u) * 6); }
  .byline-row, .article-byline { flex-wrap: wrap; row-gap: calc(var(--u) * 1); }
  .scenario-head { flex-wrap: wrap; row-gap: calc(var(--u) * 1); }
  .scenario .thesis-tag { margin-left: 0; }

  /* Forms: full-width stacked, thumb-sized. */
  .band-form, .inline-form { flex-direction: column; align-items: stretch; }
  .band-form input[type="email"], .inline-form input[type="email"] {
    min-width: 0; width: 100%;
  }
  .band-form button, .inline-form button { width: 100%; padding: 15px 30px; }

  /* Archive ledger: denser rows, dek tucks away on phones. */
  .issue-list { margin-bottom: calc(var(--u) * 8); }
  .issue-list a { padding: calc(var(--u) * 2.5) calc(var(--u) * 1); gap: calc(var(--u) * 2); }
  .issue-dek { display: none; }
  .issue-title { font-size: var(--fs-body); }
  /* Meta line wraps instead of forcing the row wider than the phone. */
  .issue-meta { flex-wrap: wrap; row-gap: calc(var(--u) * 0.75); }

  /* Pagination: 44px targets, compact centered stack. */
  .pg-row { gap: calc(var(--u) * 2); }
  .pg-nums { gap: calc(var(--u) * 1); flex-wrap: wrap; }
  .pg-num {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  a.pg-side { display: inline-block; padding: 12px 10px; }

  /* Edition flow: roomier stacked cells. */
  .ed-cell { padding: calc(var(--u) * 3) calc(var(--u) * 2); }

  /* Footer: notch clearance, larger tap rows. */
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom) + calc(var(--u) * 4)); }
  .footer-nav a { padding: 10px 6px; }
}

/* ---------- very small phones ---------- */
@media (max-width: 380px) {
  .sitenav { gap: calc(var(--u) * 1.25); }
  .sitenav a { font-size: 0.6875rem; }
  .wordmark { font-size: 1rem; }
  .issue-list a { grid-template-columns: 40px 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- SEO hub pages (v9) ---- */
.explore { padding: calc(var(--u) * 10) 0 0; }
.hub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 4); margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); }
.hub-card { display: block; border: 1px solid var(--hairline); padding: calc(var(--u) * 5); text-decoration: none; color: inherit; background: #fff; }
.hub-card:hover { border-color: var(--ink); }
.hub-card h3 { font-size: 1.05rem; margin: 0 0 calc(var(--u) * 2); }
.hub-card p { margin: 0 0 calc(var(--u) * 3); color: var(--ink-3); font-size: .95rem; }
.hub-n { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 4); margin: calc(var(--u) * 8) 0; }
.stat { border-top: 3px solid var(--ink); padding-top: calc(var(--u) * 3); }
.stat-n { display: block; font-size: 1.8rem; font-weight: 700; }
.stat-l { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.table-scroll { overflow-x: auto; margin: calc(var(--u) * 6) 0; }
.track-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
.track-table th, .track-table td { text-align: left; padding: calc(var(--u) * 3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.track-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.track-table .num { white-space: nowrap; }
.vr { color: #166534; font-weight: 600; } .vw { color: #b91c1c; font-weight: 600; } .vu { color: var(--ink-3); }
.dim { color: var(--ink-3); font-size: .82rem; }
.fine { color: var(--ink-3); font-size: .9rem; max-width: 62ch; }
.glossary { margin: calc(var(--u) * 8) 0; }
.gloss-item { border-top: 1px solid var(--hairline); padding: calc(var(--u) * 4) 0; }
.gloss-item:last-child { border-bottom: 1px solid var(--hairline); }
.gloss-item dt { font-weight: 700; font-size: 1.1rem; margin-bottom: calc(var(--u) * 1.5); }
.gloss-item dd { margin: 0; color: var(--ink); }
@media (max-width: 900px) {
  .hub-cards { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v10 readability upgrades (2026-09-23) — Meridian idiom:
   hairlines only, one accent, square corners, no shadows.
   ============================================================ */

/* Section kickers */
.sec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: calc(var(--u) * 1);
}

/* Sticky in-edition nav — docks under the sticky brand bar. */
.secnav {
  position: sticky;
  top: var(--brandbar-h);
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.secnav .wrap {
  display: flex;
  gap: calc(var(--u) * 3);
  overflow-x: auto;
  padding-top: calc(var(--u) * 1.5);
  padding-bottom: calc(var(--u) * 1.5);
}
.secnav a {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.secnav a:hover { color: var(--accent); }

/* Hero figure (the edition's social card) */
.hero {
  margin: 0 0 calc(var(--u) * 4);
  border: 1px solid var(--hairline);
}
.hero img { display: block; width: 100%; height: auto; }
.hero figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-top: 1px solid var(--hairline);
}

/* Read time chip in the byline */
.readtime {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  padding: 2px 10px;
  margin-left: calc(var(--u) * 1.5);
  white-space: nowrap;
}

/* The tape in 30 seconds */
.tldr {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  padding: calc(var(--u) * 3);
  margin: 0 0 calc(var(--u) * 4);
}
.tldr h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 calc(var(--u) * 2);
}
.tldr ul { list-style: none; margin: 0; padding: 0; }
.tldr li {
  position: relative;
  font-size: var(--fs-small);
  padding-left: calc(var(--u) * 3);
  margin-bottom: var(--u);
}
.tldr li:last-child { margin-bottom: 0; }
.tldr li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Tape at a glance — levels grid */
.levels { margin: 0 0 calc(var(--u) * 4); }
.lgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: calc(var(--u) * 2);
}
.tile {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: calc(var(--u) * 1.5) var(--u);
}
.tile .l {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tile .v {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.tile .d { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }

/* Since-the-last-edition delta strip */
p.delta {
  font-size: var(--fs-small);
  color: var(--ink-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: calc(var(--u) * 2) 0;
  margin: 0 0 calc(var(--u) * 4);
}
p.delta strong { color: var(--ink); }

/* Pull quote (blockquote) */
.article-body blockquote.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-4);
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--u) * 3);
  margin: calc(var(--u) * 4) 0;
}

/* Story subheads (### in the brief) */
.article-body h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--hairline);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 2);
}
.article-body h4.tbl-head {
  border-top: none;
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.article-body h4.tbl-head span {
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Baselines table */
.article-body table.base { margin-top: calc(var(--u) * 2); }
.article-body table.base td:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}
.article-body table.base td:nth-child(2) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Glossary auto-links */
a.gloss {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Thesis grade status */
.gradebox {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ink-3);
  padding: calc(var(--u) * 3);
  margin: calc(var(--u) * 4) 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.gradebox.is-right { border-top-color: var(--up); }
.gradebox.is-wrong { border-top-color: var(--down); }
.gradebox.is-mixed { border-top-color: var(--accent); }
.gradebox strong { color: var(--ink); }
.gradebox a { color: var(--accent-ink); }

/* Key events checklist */
.article-body .events ul { list-style: none; padding-left: 0; }
.article-body .events li {
  position: relative;
  padding-left: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 2);
}
.article-body .events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink-3);
}
.article-body .events .t {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  padding: 1px 8px;
  margin-right: var(--u);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lgrid { grid-template-columns: repeat(2, 1fr); }
}