/* ==========================================================================
   Modern Macro Technologies — theme stylesheet
   Ported from mmt-site-prototype.html (Layer 1 approved design prototype).
   Token values and component rules are intentionally kept 1:1 with the
   prototype; anything below the "Ghost-specific" banner is new surface area
   the prototype did not cover (article body, archive, paywall, portal).
   ========================================================================== */

/* ---------- type: three registers, three faces ----------
   Claims are set in a news serif, the interface in the US government's own
   typeface, and every measured figure in mono. The registers are the point:
   a claim, an interface, and a reading are different kinds of statement, and
   the reader can tell which is which without being told. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var-italic.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* Ghost Admin -> Design can override the first two via --gh-font-*; the
     reading face is ours and is never overridden. */
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Charter, "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-font: var(--gh-font-body, var(--font-sans));
  --display-font: var(--gh-font-heading, var(--font-serif));

  --plane: #f9f9f7;
  --surface-1: #fcfcfb;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  /* Tuned per theme to clear 4.5:1 on its own ground. The light value is
     darker than the dark-mode one: #898781 measures 3.41:1 on the paper
     plane, which fails for the eyebrows, dates and captions that use it. */
  --muted: #747265;
  --grid: #e1e0d9;
  /* Control edges only — input, ghost button, theme switch, nav toggle, chart
     axis. Tuned per theme to clear 3:1 on both grounds (1.4.11), which the old
     #c3c2b7 did not: it measured 1.75:1 against Raised Paper, so the email
     field had no visible boundary. Text that used to borrow this token now
     uses --muted; decorative caps use --grid. */
  --baseline: #8e8d82;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --accent-deep: #1c5cab;
  --chip-pro: #1c5cab; /* white text = 6.63:1 */
  --success-text: #006300;
  --wash: rgba(11, 11, 11, 0.035);
  --pattern-ink: rgba(11, 11, 11, 0.13);
  --btn-bg: #0b0b0b;
  --btn-fg: #ffffff;
}

/* Dark mode follows the OS — there is no manual switch. The dark values are
   a hand-tuned second token set, not an inversion (Re-Tokenization Rule). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface-1: #1a1a19;
    --ink-1: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #686865;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
    --accent-deep: #86b6ef;
    --chip-pro: #2166bb; /* white text = 5.70:1; edge vs plane = 3.41:1 */
    --success-text: #0ca30c;
    --wash: rgba(255, 255, 255, 0.05);
    --pattern-ink: rgba(255, 255, 255, 0.12);
    --btn-bg: #ffffff;
    --btn-fg: #0b0b0b;
  }
}

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

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

body {
  font-family: var(--ui-font);
  background: var(--plane);
  color: var(--ink-1);
  line-height: 1.55;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}

/* Display type is opt-in via .serif, exactly as in the prototype — headings
   like .pub h3 and .foot h5 are deliberately UI-sans there. Article body
   headings are handled separately, further down. */
.serif { font-family: var(--display-font); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface-1); color: var(--ink-1);
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 28px; height: 60px; }
/* display:contents keeps .nav and .topbar-cta as direct flex children of
   .topbar-inner, so the desktop bar lays out exactly as if the wrapper
   were not there. Below 920px the wrapper becomes the dropdown sheet. */
.topbar-collapse { display: contents; }
/* Caps come from CSS, not the markup, so the Ghost title setting can be
   written normally and still render as the prototype's wordmark. */
/* The lockup, per design/logos/mmt-lockup-*.png: sentence case, semibold,
   normal tracking — not the old uppercase tracked treatment. Text is live
   HTML in the lockup's own face (Public Sans), so it stays crisp,
   selectable, and on --ink-1/--accent in both modes. */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink-1); }
.wordmark svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.foot .wordmark svg { width: 18px; height: 18px; }
.nav { display: flex; gap: 22px; margin-left: 8px; }
.nav a { font-size: 13.5px; color: var(--ink-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink-1); }
.nav a.active { color: var(--ink-1); border-bottom-color: var(--accent); }
.topbar-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.signin { font-size: 13.5px; color: var(--ink-2); background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.signin:hover { color: var(--ink-1); }

.btn {
  display: inline-block; font-size: 13.5px; font-weight: 650;
  font-family: inherit;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 9px 18px; border-radius: 8px; border: 1px solid var(--btn-bg);
  cursor: pointer; transition: opacity .15s ease;
}
.btn:hover { opacity: 0.85; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink-1); border: 1px solid var(--baseline); }
.btn-ghost:hover { background: var(--wash); opacity: 1; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-block { display: block; text-align: center; width: 100%; }

/* mobile nav toggle. --baseline, not --border: it is a control sitting beside
   .btn-ghost in the same bar, and a container edge and a control edge are
   different jobs. */
.nav-toggle {
  display: none; margin-left: auto; background: transparent;
  border: 1px solid var(--baseline); border-radius: 8px;
  color: var(--ink-2); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer;
}

/* ---------- the dateline ----------
   Masthead furniture: a single hairline strip in the reading face, stating
   when the record was last added to and when the next reading lands. */
.dateline { border-bottom: 1px solid var(--grid); background: var(--plane); }
.dateline-inner {
  display: flex; align-items: center; gap: 10px;
  height: 30px; overflow: hidden;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--muted); white-space: nowrap;
}
.dateline .dl-date { color: var(--ink-2); }
.dateline .dl-sep { color: var(--baseline); }
.dateline .dl-narrow { display: none; }
/* Drop-priority: the strip never truncates mid-word. Below 620px the
   archive count goes first; below 430px the models item follows. What
   remains is always whole. */
@media (max-width: 620px) {
  .dateline .dl-notes { display: none; }
}
@media (max-width: 430px) {
  .dateline .dl-models { display: none; }
}

@media (max-width: 620px) {
  .dateline-inner { font-size: 10.5px; gap: 8px; }
  .dateline .dl-wide { display: none; }
  .dateline .dl-narrow { display: inline; }
}

/* ---------- shared ---------- */
/* What survives as a label is always informational — a topic, an analyst, a
   tag — so it joins the reading register instead of decorating a heading. */
.eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sec { padding: 68px 0; }
.sec-tight { padding: 48px 0; }
.sec-band { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-head2 { margin-bottom: 28px; }
.sec-head-center { text-align: center; }
/* An access label, not a kicker: it states which tier the section belongs to,
   which is information the reader needs before they read the section. */
.access-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-deep);
  border: 1px solid currentColor; border-radius: 99px;
  padding: 2px 9px; display: inline-block; margin-bottom: 10px;
}
.sec-head2 h2 { font-size: 28px; line-height: 1.2; margin-top: 6px; font-weight: 700; }
.sec-head2 p { color: var(--ink-2); margin-top: 8px; max-width: 640px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; }

.chip {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 2.5px 9px; border-radius: 99px; border: 1px solid var(--baseline);
  color: var(--ink-2); vertical-align: middle; white-space: nowrap;
}
.chip-free { color: var(--muted); }
.chip-ind { color: var(--ink-1); border-color: var(--ink-1); }
/* The one filled chip. Its fill is a per-theme token, not the accent: white
   text on the accent measures 4.42:1 light / 3.64:1 dark — both under the
   4.5:1 Legibility Floor. --chip-pro is tuned per theme to clear it. */
.chip-pro { color: #fff; background: var(--chip-pro); border-color: var(--chip-pro); }

/* ---------- hero ---------- */
/* The hero carries a faint punch grid — the dot field of a data sheet. It is
   a pseudo-element so no markup changes, and it fades out before the copy
   below so it never competes with the content or the panel. */
.hero { position: relative; overflow: hidden; padding: 72px 0 64px; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, var(--pattern-ink) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 94%);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; margin-top: 14px; }
.hero .sub { font-size: 17px; color: var(--ink-2); margin-top: 18px; max-width: 520px; }
.hero .sub b { color: var(--ink-1); font-weight: 650; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.capture { margin-top: 26px; max-width: 440px; }
.capture-row { display: flex; gap: 8px; }
.capture input {
  flex: 1; font: inherit; font-size: 14px; padding: 10px 14px;
  border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--ink-1); min-width: 0;
}
.capture input::placeholder { color: var(--muted); }
.capture .note { font-size: 12px; color: var(--muted); margin-top: 7px; }
.capture .msg { font-size: 12.5px; margin-top: 7px; display: none; }
.capture .msg.on { display: block; }
.capture .msg-ok { color: var(--success-text); }
.capture .msg-err { color: var(--ink-2); }

/* hero dashboard preview */
.preview { padding: 20px 20px 16px; position: relative; }
.preview .ph { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.preview .pt { font-size: 13px; font-weight: 700; }
/* Two marks, one register: .illus labels synthetic figures, .asof carries
   a dated source for real readings (the hero panel and the dashboard tiles
   are this state). 11px is the functional-text floor — it was 10.5px. */
.illus, .asof { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
/* The schematic's settlement dots hold still for users who ask for less
   motion; the arrows already state the direction. */
@media (prefers-reduced-motion: reduce) {
  .preview .flow-dots { display: none; }
}
/* Map-label halo: edge labels knock out whatever passes beneath them —
   curves and travelling dots slip behind the words, never through them. */
.preview .flow-labels text {
  stroke: var(--surface-1);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.preview svg { display: block; width: 100%; height: auto; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.stat { border-top: 2px solid var(--grid); padding-top: 8px; }
.stat .k { font-family: var(--ui-font); font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.stat .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; margin-top: 3px; letter-spacing: -0.02em; }
.stat .v small { font-size: 11px; font-weight: 600; color: var(--success-text); margin-left: 4px; }

/* ---------- circulation strip ----------
   A masthead circulation line, not a stat block: the figures are stated the
   way a paper states its print run. Ruled top and bottom, no accent spend. */
.circ { border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 13px 0; }
.circ-inner { display: flex; align-items: baseline; gap: 8px 26px; flex-wrap: wrap; }
.circ-label {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.circ-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.circ-list li { font-size: 13.5px; color: var(--ink-2); }
.circ-list b {
  font-family: var(--font-mono); letter-spacing: -0.02em;
  font-size: 14.5px; font-weight: 700; color: var(--ink-1);
  font-variant-numeric: tabular-nums; margin-right: 3px;
}

/* ---------- endorsement ----------
   The rule spans the full measure like a printed one; only the text is
   constrained. A rule that stops at the text width aligns to nothing. */
.endorse { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--grid); }
.endorse-q { font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -0.005em; max-width: 640px; }
.endorse-by { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.endorse-by .who { font-size: 13px; font-weight: 650; }
.endorse-by .what { font-size: 12.5px; color: var(--muted); }

/* ---------- 3-up publish ---------- */
/* Three columns of an editorial page, not three cards. A rule at the top of
   each column does the dividing a box used to do, which suits a publication
   and drops a container that was carrying nothing. */
.three-up { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 36px; }
.pub { padding: 16px 0 0; border-top: 2px solid var(--ink-1); }
.pub h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.pub p { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.pub .tierline {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--grid);
  letter-spacing: 0.01em;
}

/* ---------- post list ---------- */
.postlist { border-top: 1px solid var(--grid); }
.post-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px;
  align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--grid);
}
.post-row:hover { background: var(--wash); }
.post-row .date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.post-row h4 { font-size: 18px; font-weight: 650; line-height: 1.35; }
.post-row .dek { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.post-more { display: inline-block; margin-top: 18px; font-size: 13.5px; font-weight: 650; color: var(--accent-deep); }

/* ---------- framework band ---------- */
.pull { font-size: 30px; line-height: 1.25; font-weight: 700; max-width: 700px; margin-top: 10px; letter-spacing: -0.01em; }
.pull em { font-style: normal; color: var(--accent-deep); }
.tenets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 36px; }
.tenet { border-top: 1px solid var(--grid); padding-top: 14px; }
.tenet h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.tenet p { font-size: 13.5px; color: var(--ink-2); margin-top: 5px; }
.fw-link { display: inline-block; margin-top: 30px; font-size: 13.5px; font-weight: 650; color: var(--accent-deep); }

/* screen-reader-only utility (heading outline fixes) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- institutional ----------
   Four capabilities read as a 2x2, not 3+orphan; the three engagement
   steps in the band keep the 3-up. */
.page-institutional .sec:not(.sec-band) .tenets { grid-template-columns: repeat(2, 1fr); }
.page-institutional .container-narrow .sub { color: var(--ink-2); }
/* the proof row: the work, one click from the ask */
.proof-row { border-top: 1px solid var(--grid); margin-top: 34px; padding-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.proof-row a { color: var(--accent-deep); font-weight: 650; text-decoration: none; white-space: nowrap; }
.proof-row a:hover { text-decoration: underline; }
.proof-row .sep { color: var(--baseline); margin: 0 6px; }
.quiet-link { color: var(--accent-deep); }
.quiet-link:hover { text-decoration: underline; }
.band-alt { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.band-alt a { color: var(--accent-deep); font-weight: 650; }
.band-alt a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .page-institutional .sec:not(.sec-band) .tenets { grid-template-columns: 1fr; }
}

/* ---------- dashboards strip ----------
   Each tile is a miniature instrument, not a decorated link: a bespoke
   chart of the real series, a mono reading, and a dated source line. The
   chart forms differ because the data differs — bars for daily flows, a
   zero-referenced line for growth rates, an area for a level, regime
   bands for the model. */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash { padding: 16px 16px 14px; display: block; }
/* overflow visible: end-point dots sit ON the last data point (cx=140,
   the viewBox edge) and render into the card padding rather than being
   half-clipped. */
.dash svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.dash .dn { font-size: 13.5px; font-weight: 700; }
.dash .dh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash .cad { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.dash .dd { font-size: 12px; color: var(--muted); margin-top: 1px; }
.dash .dash-go { font-size: 12px; font-weight: 650; color: var(--accent-deep); margin-top: 10px; }
a.dash:hover { border-color: var(--accent); }

/* chart internals — all colors from tokens so dark mode re-tokenizes */
.dash .bars rect { fill: var(--accent); }
.dash .bars .neg { fill: var(--baseline); }
.dash .axis { stroke: var(--baseline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash .zero { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dash .line { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash .line.step { stroke-linejoin: miter; }
.dash .area { fill: var(--accent); opacity: 0.08; }
.dash .dot { fill: var(--accent); stroke: var(--surface-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dash .bands rect { fill: var(--wash); }
.dash .bands .mid { fill: var(--accent); opacity: 0.09; }

/* the reading: same register as .stat — a figure is a figure everywhere */
.dash .reading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.dash .rv { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; }
.dash .rk { font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; }

/* ---------- pricing teaser ---------- */
.ptr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.ptr { padding: 22px; text-align: center; display: block; }
.ptr .n { font-size: 15px; font-weight: 700; }
.ptr .p { font-family: var(--display-font); font-size: 22px; font-weight: 700; margin-top: 8px; letter-spacing: -0.02em; }
/* Prices are claims, not readings: the display face, not the instrument
   mono. Tabular so the three cards align down the column. */
.ptr .p.is-figure { font-variant-numeric: tabular-nums; }
.ptr .p small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.ptr .d { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.ptr-feat { border-color: var(--accent); }
/* The continuity line for existing subscribers, and the page's last word —
   so the final felt moment is reassurance, not an unaccompanied price tag. */
.ptr-note { text-align: center; font-size: 12.5px; color: var(--muted); margin: 18px auto 0; max-width: 56ch; }
.ptr-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ptr-note a:hover { color: var(--ink-1); }

/* ---------- pricing page ---------- */
.price-hero { padding: 64px 0 8px; text-align: center; }
.price-hero h1 { font-size: 40px; line-height: 1.1; margin-top: 12px; letter-spacing: -0.015em; }
.price-hero .sub { color: var(--ink-2); margin-top: 12px; font-size: 16px; }
.plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 40px; align-items: stretch; }
.plan { padding: 26px 26px 22px; position: relative; display: flex; flex-direction: column; }
.plan-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--baseline); border-radius: 12px 12px 0 0; }
.plan-feat .plan-accent { background: var(--accent); }
.plan-feat { border-color: var(--accent); box-shadow: 0 8px 28px rgba(42, 120, 214, 0.10); }
.plan .kick { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.plan .kick-feat { color: var(--accent-deep); }
.plan h3 { font-size: 21px; margin-top: 3px; }
.plan .who { font-size: 13px; color: var(--ink-2); font-style: italic; margin-top: 2px; }
.plan .amt { font-family: var(--display-font); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 16px; }
.plan .amt.is-figure { font-variant-numeric: tabular-nums; }
.plan .amt small { font-size: 13.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.plan ul { list-style: none; margin: 16px 0 20px; flex: 1; }
.plan li { padding: 7px 0 7px 24px; border-top: 1px solid var(--grid); font-size: 13.5px; color: var(--ink-2); position: relative; }
.plan li::before { content: "\2713"; position: absolute; left: 2px; color: var(--success-text); font-weight: 700; font-size: 12px; }
.plan li b { color: var(--ink-1); font-weight: 600; }
.plan li.inherit { color: var(--muted); }
.plan li.inherit::before { content: "+"; color: var(--muted); }
.plan .current { text-align: center; font-size: 12.5px; color: var(--muted); padding: 9px 0; }
.plan-brand { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); color: var(--ink-1); }
.plan-brand svg { height: 28px; width: auto; display: block; }
.plan-brand-note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13.5px; }
.cmp th, .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--grid); text-align: center; }
.cmp th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp td:first-child { color: var(--ink-2); }
.cmp .feat-col { background: var(--wash); }
.cmp .yes { color: var(--success-text); font-weight: 700; }
/* The "—" carries information — this tier does not include this row — so it
   is text and sits on --muted, not on an edge token. */
.cmp .no { color: var(--muted); }
.cmp .txt { font-size: 12.5px; color: var(--ink-2); }
.cmp thead tr:last-child th { font-family: var(--ui-font); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp-wrap { overflow-x: auto; }

/* FAQ */
.faq { max-width: 760px; margin: 24px auto 0; }
.faq details { border-bottom: 1px solid var(--grid); padding: 4px 0; }
.faq summary { cursor: pointer; font-size: 15px; font-weight: 650; padding: 12px 0; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--muted); font-size: 18px; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { font-size: 14px; color: var(--ink-2); padding: 0 0 16px; max-width: 680px; }

/* institutional band */
.inst { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; padding: 34px 36px; border-left: 3px solid var(--accent); }
.inst h3 { font-size: 22px; }
.inst p { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.inst .inst-cta { text-align: right; }
.inst .mail { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ---------- stub / simple page ---------- */
.stub { padding: 110px 0 130px; text-align: center; }
.stub-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
/* The address under the CTAs: visible, selectable, quiet. mailto-only pages
   die silently on locked-down desks; the text IS the fallback channel. */
.cta-mail { font-size: 12.5px; color: var(--muted); margin-top: 12px; user-select: all; -webkit-user-select: all; }
.stub h1 { font-size: 32px; margin-top: 10px; }
.stub p { color: var(--ink-2); margin: 14px auto 0; max-width: 460px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); background: var(--surface-1); padding: 44px 0 36px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
.foot-social { display: flex; gap: 14px; margin-top: 16px; }
.foot-social:empty { display: none; }
.foot-social a { color: var(--muted); display: inline-flex; transition: color .15s ease; }
.foot-social a:hover { color: var(--ink-1); }
.foot .wordmark { font-size: 14px; }
.foot .tag { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; max-width: 320px; }
.foot h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.foot ul { list-style: none; }
.foot li { padding: 3px 0; }
.foot li a { font-size: 13px; color: var(--ink-2); }
.foot li a:hover { color: var(--ink-1); }
/* 72ch, not a px width: at 11.5px the old 820px measure ran ~170 characters
   per line, which is unreadable even for fine print. */
/* The colophon. A base rule spanning the page: standing disclaimer left at a
   scannable measure, copyright right. Constraining the disclaimer alone left
   it orphaned in the corner, so the row does the spanning instead. */
.foot-bottom {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px 40px;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--grid); flex-wrap: wrap;
}
.legal { font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 78ch; flex: 1 1 42ch; }
.foot-copy { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   Ghost-specific surface area (not covered by the Layer 1 prototype)
   ========================================================================== */

/* ---------- archive header ---------- */
.arch-head { padding: 56px 0 20px; }
.arch-head h1 { font-size: 38px; line-height: 1.15; margin-top: 8px; letter-spacing: -0.015em; }
/* A comfortable measure with a balanced rag — the old 620px cap stranded a
   stubby second line under a full-width headline. */
.arch-head .sub { color: var(--ink-2); margin-top: 12px; max-width: 58ch; font-size: 17px; text-wrap: pretty; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; font-size: 13.5px; }
.pagination a { font-weight: 650; color: var(--accent-deep); }
.pagination .page-number { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- article ---------- */
.article { padding: 56px 0 0; }
.article-head { max-width: 720px; margin: 0 auto; text-align: left; padding: 0 28px; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.article-meta time, .article-meta .rt { font-family: var(--font-mono); letter-spacing: -0.01em; }
/* .dot has no color of its own: a separator sits at the same weight as the
   items it separates. Quieter than --muted is below the legibility floor. */
.article h1 { font-size: 38px; line-height: 1.15; letter-spacing: -0.015em; margin-top: 12px; }
.article .excerpt { font-size: 17.5px; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.article-byline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.article-byline .who { font-weight: 650; color: var(--ink-1); }

.feature-image { max-width: 1120px; margin: 34px auto 0; padding: 0 28px; }
.feature-image img { width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; }

.article-content { max-width: 720px; margin: 0 auto; padding: 34px 28px 10px; font-size: 17px; line-height: 1.68; color: var(--ink-1); }
.article-content > * + * { margin-top: 1.15em; }
.article-content p { color: var(--ink-1); }
.article-content h2,
.article-content h3,
.article-content h4 { font-family: var(--display-font); }
.article-content h2 { font-size: 26px; line-height: 1.25; margin-top: 1.9em; letter-spacing: -0.01em; }
.article-content h3 { font-size: 20px; line-height: 1.3; margin-top: 1.6em; }
.article-content h4 { font-size: 17px; margin-top: 1.5em; }
.article-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-content ul, .article-content ol { padding-left: 1.3em; }
.article-content li + li { margin-top: 0.4em; }
.article-content blockquote {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 20px;
  color: var(--ink-2); font-style: italic;
}
.article-content hr { border: 0; border-top: 1px solid var(--grid); margin: 2.2em 0; }
.article-content img, .article-content figure img { border-radius: 10px; }
.article-content figcaption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: var(--wash); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.article-content pre {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.5;
}
.article-content pre code { background: none; border: 0; padding: 0; }
.article-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article-content th, .article-content td { padding: 9px 12px; border-bottom: 1px solid var(--grid); text-align: left; }
.article-content th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* Koenig width cards inside the narrow measure */
.article-content :where(.kg-width-wide) { max-width: 1000px; margin-left: calc(50% - 500px); }
.article-content :where(.kg-width-full) { max-width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
@media (max-width: 1060px) {
  .article-content :where(.kg-width-wide) { max-width: 100%; margin-left: 0; }
}

/* ---------- paywall / upgrade CTA ---------- */
.paywall {
  max-width: 720px; margin: 10px auto 0; padding: 0 28px;
}
.paywall-inner {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 34px 34px 30px; text-align: center; position: relative;
  border-top: 3px solid var(--accent);
}
.paywall .kick { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.paywall-brand { display: flex; justify-content: center; margin-top: 16px; color: var(--ink-1); }
.paywall-brand svg { height: 30px; width: auto; }
.paywall h2 { font-size: 24px; line-height: 1.25; margin-top: 8px; }
.paywall p { font-size: 14.5px; color: var(--ink-2); margin: 10px auto 0; max-width: 460px; }
.paywall .actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.paywall .fineprint { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.paywall .fineprint a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.paywall ul { list-style: none; margin: 18px auto 0; max-width: 420px; text-align: left; }
.paywall ul li { font-size: 13.5px; color: var(--ink-2); padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--grid); }
.paywall ul li::before { content: "\2713"; position: absolute; left: 2px; color: var(--success-text); font-weight: 700; font-size: 12px; }

/* ---------- footer signup band ---------- */
.signup-band { padding: 56px 0; text-align: center; }
.signup-band h2 { font-size: 26px; line-height: 1.25; }
.signup-band p { color: var(--ink-2); margin-top: 10px; }
.signup-band .capture { margin: 22px auto 0; }

/* ---------- read next ---------- */
.readnext { padding: 56px 0 0; }

/* ---------- error ---------- */
.err { padding: 120px 0 140px; text-align: center; }
.err .code { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; color: var(--muted); }
.err h1 { font-size: 28px; margin-top: 8px; }
.err p { color: var(--ink-2); margin-top: 12px; }
.err .actions { margin-top: 26px; }

/* ---------- responsive ----------

   Three thresholds, deliberately not the same number. The bar runs out of
   room well before the page does, so it collapses on its own. */

/* The bar keeps only the wordmark and the toggle; everything else moves into
   the sheet. This is what guarantees the header cannot overflow.

   1060 rather than a phone width because the bar stops fitting long before it
   stops being a desktop: the shipped configuration — a 25-character title,
   five nav items, and the theme/sign-in/subscribe cluster — needs 1012px of
   viewport to lay out at all. Below that, flex has to shrink something, and
   "Sign in" is the softest target, so it wrapped to two lines. Collapsing at
   920 left a 92px band where the bar was over-full but still trying to be a
   bar. A breakpoint belongs where the layout breaks, not at a device name.

   The 1012px figure is a function of the site title and the nav-item count,
   both Ghost settings: a sixth nav item or a much longer title re-opens the
   squeeze above 1060, and this number has to move with it. */
@media (max-width: 1060px) {
  .topbar-collapse { display: none; }
  .topbar-collapse.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--plane); border-bottom: 1px solid var(--border);
    padding: 8px 28px 18px;
  }
  .topbar-collapse.open .nav { display: flex; flex-direction: column; gap: 0; margin-left: 0; }
  .topbar-collapse.open .nav a { padding: 10px 0; border-bottom: 1px solid var(--grid); }
  .topbar-collapse.open .topbar-cta { margin: 14px 0 0; gap: 10px; }
  .topbar-collapse.open .signin { margin-right: auto; }
  .nav-toggle { display: inline-block; margin-left: auto; }
}

/* Layout grids. Independent of the bar above — these are about the page
   running out of column room, not the header running out of line. */
@media (max-width: 920px) {
  .hero-grid, .inst { grid-template-columns: 1fr; gap: 32px; }
  .three-up, .tenets, .ptr-grid, .plans, .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: 12px; }
  .three-up { gap: 28px 0; }
  .tenets { gap: 26px; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 36px; }
  .inst .inst-cta { text-align: left; }
  .article h1 { font-size: 30px; }
  .price-hero h1 { font-size: 32px; }
}

@media (max-width: 620px) {
  .container, .container-narrow { padding: 0 20px; }
  /* The wordmark is the one element that cannot be allowed to force a
     horizontal scrollbar, so it is both scaled down and made shrinkable —
     a longer site title truncates instead of overflowing the page. */
  .topbar-inner { gap: 12px; }
  .wordmark { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .wordmark svg { width: 20px; height: 20px; }
  .topbar-collapse.open { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 48px 0 44px; }
  .sec { padding: 48px 0; }
  .hero h1 { font-size: 30px; }
  .article h1 { font-size: 26px; }
  .article-content { font-size: 16.5px; padding-left: 20px; padding-right: 20px; }
  .paywall, .feature-image { padding-left: 20px; padding-right: 20px; }
  .paywall-inner { padding: 26px 22px 24px; }
  .post-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 2px; }
  .post-row .chip { justify-self: start; }
  .dash-grid { grid-template-columns: 1fr; }
  .capture-row { flex-direction: column; }
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-top-width: 1px; }
  .pull { font-size: 24px; }
  .price-hero h1 { font-size: 28px; }
  .inst { padding: 26px 22px; }
  /* Stack the label above the figures: on one line with column-gap 0 the
     strip rendered as "CIRCULATION896 members" at phone widths. */
  .circ-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .circ-list { flex-direction: column; gap: 3px; }
  .endorse-q { font-size: 19px; }
}

/* Smallest phones (iPhone SE and similar): one more step down on the
   wordmark so the full name still fits beside the toggle rather than
   falling back to the ellipsis. */
@media (max-width: 380px) {
  .wordmark { font-size: 14px; }
  .wordmark svg { width: 18px; height: 18px; }
}

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