/* ==========================================================================
   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); }
/* The mark rides --accent-deep, not --accent: the brand blue was darkened to
   #1c5cab, which is the value --accent-deep already held. It also measures
   6.4:1 on the paper against --accent's 4.2:1, so the emblem got more legible,
   not just darker. Dark mode re-tokenizes to #86b6ef for the same reason it
   always did — #1c5cab on the dark plane is 2.8:1. */
.wordmark svg { width: 22px; height: 22px; flex: none; color: var(--accent-deep); }
.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;
}
/* The gate glyph. The one pictogram the chips are allowed: it marks EVERY
   gated row, so it reads as a system rather than decoration on one label.
   currentColor keeps it legible on the filled Professional chip for free. */
.chip .lock { width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
.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; }
/* The panel carries no title — the schematic states what it is. The dated
   source mark stays on the right edge it has always sat on, so dropping the
   title doesn't shift it: flex-end, not space-between (which would send a
   lone child to the left). */
.preview .ph { display: flex; align-items: baseline; justify-content: flex-end; margin-bottom: 6px; gap: 12px; }
/* 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; }
/* Reserve two lines for the audience line so the price sits on the same
   baseline in all three cards — "For investors who want the framework
   working for them" wraps where the others do not, and a price row that
   staggers reads as three unrelated cards rather than one comparison. */
.plan .who { font-size: 13px; color: var(--ink-2); font-style: italic; margin-top: 2px; min-height: 2.9em; }
@media (max-width: 900px) {
  /* Stacked cards are compared vertically, so the reserved line is dead
     space rather than an alignment aid. */
  .plan .who { min-height: 0; }
}
.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; }

/* ---------- archive controls ----------
   The filter rule: a single ruled band between the archive head and the list,
   in the dateline's register — mono labels, hairline borders, no card. The
   count sits at the right edge like a print run figure. Hidden until
   archive.js confirms it can fetch the index; the server-rendered list is the
   fallback, so this row must read as furniture, not as the feature. */
.arch-controls {
  display: flex; align-items: flex-end; gap: 16px 22px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 22px;
  border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
}
.ac-field { display: flex; flex-direction: column; gap: 5px; }
.ac-search { flex: 1 1 220px; }
.ac-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.arch-controls input[type="search"],
.arch-controls select {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-1);
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 9px; min-height: 32px;
}
.arch-controls input[type="search"] { width: 100%; }
.arch-controls input[type="search"]::placeholder { color: var(--muted); }
.ac-count {
  margin-left: auto; align-self: flex-end; padding-bottom: 7px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 720px) {
  .ac-search { flex-basis: 100%; }
  .ac-count { margin-left: 0; }
}

/* The member-only community band on the homepage. Ruled top and bottom like
   the circulation line rather than boxed — it is a standing notice to people
   already inside, not another card competing with the pricing tiles below. */
.community-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
  flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
}
.community-band h2 { font-size: 20px; letter-spacing: -0.01em; }
.community-band p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; max-width: 52ch; }
.community-band .btn { flex: none; }

/* The Discord affordance in the bar and the footer. Deliberately a quiet link
   rather than a filled button: connecting is a ONE-TIME action, and the theme
   has no way to know whether a member has already done it — the link state
   lives in the dashboard's database, not in Ghost. A permanent call-to-action
   that cannot tell whether it has been answered must not shout. The homepage
   band is the one place it gets button weight, because a page you scroll past
   is a different ask from a bar you see on every screen. */
.discord-link { display: inline-flex; align-items: center; gap: 6px; }
/* baseline, not center: if a label ever does wrap, a centred mark floats
   against the middle of the block instead of sitting with the first line. */
.discord-link { align-items: baseline; }
.discord-link svg { flex: none; opacity: 0.85; transform: translateY(2px); }
/* Same 13.5px as .signin and a centred 14px glyph with no translate: the bar
   centres BOXES, so the link's text only shares Account's baseline if both
   boxes are the same height with the same font metrics. The 16px glyph +
   translateY the other contexts use grew this box and dragged the label off
   the line. */
.topbar-cta .discord-link { font-size: 13.5px; font-weight: 600; color: var(--ink-2); align-items: center; }
.topbar-cta .discord-link svg { width: 14px; height: 14px; transform: none; }
.topbar-cta .discord-link:hover { color: var(--accent-deep); }
/* The mark is the only glyph among plain text links here, so it is sized down
   and dimmed further — enough to read as Discord, quiet enough not to look
   like one link got decorated by accident. */
.foot .discord-link { font-size: 13px; color: var(--ink-2); }
.foot .discord-link svg { width: 14px; height: 14px; opacity: 0.6; }
.foot .discord-link:hover { color: var(--ink-1); }
.foot .discord-link:hover svg { opacity: 1; }
.btn.discord-link { align-items: center; }
.btn.discord-link svg { transform: none; opacity: 1; }

/* ---------- discord / community page ----------
   The status strip is the only place the theme reports an outcome from the
   dashboard app, so it gets a ruled left edge rather than a coloured panel —
   the same restraint the tier chips use. Warn is muted ink, not red: none of
   these states is an error the member caused. */
.discord-status {
  margin: 22px 0 0; padding: 10px 0 10px 14px; font-size: 14px; line-height: 1.5;
  border-left: 2px solid var(--border); color: var(--ink-2);
}
.discord-status.is-ok { border-left-color: var(--success-text); color: var(--ink-1); }
.discord-status.is-warn { border-left-color: var(--accent-deep); }
.discord-cta { margin-top: 26px; }
.discord-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; max-width: 46ch; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); background: var(--surface-1); padding: 44px 0 36px; margin-top: 40px; }
/* Four columns normally; five when the member-only Community column renders.
   Without the :has() rule the fifth child wraps onto its own row and the
   footer grows a ragged second tier for paying members only — the visitors
   least likely to report it. Browsers without :has() get that wrap, which is
   untidy rather than broken. */
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid:has(> :nth-child(5)) { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.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; }
  /* Turning the colophon into a column turns flex-basis from a width into a
     HEIGHT, so .legal's `flex: 1 1 42ch` was reserving ~42ch of vertical space
     for three lines of fine print and stranding the copyright far below it.
     Reset the basis to auto here so the paragraph is only as tall as its text. */
  .foot-bottom { flex-direction: column; gap: 12px; }
  .legal { flex: 0 1 auto; }
  .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; }
}