/* Hallmark · genre: editorial · macrostructure: Index-First (home) + Long Document (articles)
 * theme: Almanac · enrichment: none (typography only) · nav: N6 Newspaper masthead · footer: Ft4 Dense colophon
 * axes: paper=light(cream) · display=roman-serif · accent=warm(oxblood)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * SoloForge Tools — the solo-tool almanac.
 * Single source of truth for every page. Nothing here may be overridden inline.
 */

/* ══════════════════════════════════════════════════════════════
   1 · TOKENS
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper & ink ──────────────────────────────────────────── */
  --color-paper:        oklch(97.2% 0.008 85);   /* warm cream — never #fff */
  --color-paper-2:      oklch(94.6% 0.011 82);   /* banded sections, table zebra */
  --color-paper-3:      oklch(91.2% 0.014 80);   /* inset blocks */
  --color-ink:          oklch(23%   0.014 55);   /* warm near-black — never #000 */
  --color-ink-2:        oklch(43%   0.012 55);   /* secondary prose */
  --color-ink-3:        oklch(50%   0.012 58);   /* labels, metadata — 5.5:1 on paper */
  --color-rule:         oklch(85%   0.012 78);   /* hairlines */
  --color-rule-strong:  oklch(32%   0.014 55);   /* masthead double-rule */

  /* ── Accent — single warm hue, held under 5% of any viewport ─ */
  --color-accent:       oklch(45%   0.150 28);   /* oxblood */
  --color-accent-hover: oklch(38%   0.155 28);
  --color-accent-wash:  oklch(93.5% 0.032 38);   /* mark band, hover fill */
  --color-focus:        oklch(45%   0.150 28);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs:  0.6875rem;  /* 11px — footnote markers */
  --text-xs:   0.75rem;    /* 12px — mono labels */
  --text-sm:   0.8125rem;  /* 13px — table cells, metadata */
  --text-base: 1.0625rem;  /* 17px — body */
  --text-lg:   1.1875rem;  /* 19px — lead paragraph */
  --text-xl:   1.4375rem;  /* 23px — h3 */
  --text-2xl:  1.75rem;    /* 28px — h2 */
  --text-3xl:  2.25rem;    /* 36px — article h1 small */
  --text-display-s: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem);
  --text-display:   clamp(2.5rem,   1.5rem + 4.2vw, 4.25rem);

  --measure: 68ch;
  --leading-prose: 1.65;
  --leading-tight: 1.15;

  /* ── Space — 4pt scale ────────────────────────────────────── */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2.25rem;  /* 36 */
  --space-xl:  3.5rem;   /* 56 */
  --space-2xl: 5rem;     /* 80 */
  --space-3xl: 7rem;     /* 112 */

  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max: 78rem;
  --prose-max: 44rem;

  /* ── Rules & shape ────────────────────────────────────────── */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius: 2px;             /* printed box, not app card */

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 90ms;
  --dur-short:   160ms;
  --dur-medium:  260ms;

  /* ── Layers ───────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:       oklch(19%   0.012 55);
    --color-paper-2:     oklch(23.5% 0.014 55);
    --color-paper-3:     oklch(28%   0.016 55);
    --color-ink:         oklch(93%   0.010 82);
    --color-ink-2:       oklch(76%   0.012 80);
    --color-ink-3:       oklch(62%   0.012 78);
    --color-rule:        oklch(34%   0.014 60);
    --color-rule-strong: oklch(72%   0.012 78);
    --color-accent:      oklch(72%   0.130 32);
    --color-accent-hover:oklch(80%   0.120 34);
    --color-accent-wash: oklch(29%   0.045 32);
    --color-focus:       oklch(72%   0.130 32);
  }
}

/* ══════════════════════════════════════════════════════════════
   2 · BASE
   ══════════════════════════════════════════════════════════════ */

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

html {
  overflow-x: clip;               /* never `hidden` — breaks position:sticky */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;             /* headers are roman. always. */
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

a { color: inherit; }

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

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius);
  /* never transitioned — the ring is instant or it is useless */
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--color-accent-wash); color: var(--color-ink); }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-ink-3); }

.skip-link {
  position: absolute; left: var(--space-sm); top: var(--space-sm);
  z-index: var(--z-overlay);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  font: 500 var(--text-sm)/1 var(--font-mono);
  text-decoration: none;
  transform: translateY(-400%);
  transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════
   3 · LAYOUT
   ══════════════════════════════════════════════════════════════ */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.wrap--prose { max-width: calc(var(--prose-max) + var(--page-gutter) * 2); }

/* ══════════════════════════════════════════════════════════════
   4 · N6 · NEWSPAPER MASTHEAD
   ══════════════════════════════════════════════════════════════ */

.mast {
  padding-block: var(--space-md) 0;
  text-align: center;
}

.mast__line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.mast__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1rem + 5vw, 3.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-block: var(--space-xs) var(--space-3xs);
}
.mast__name a { text-decoration: none; }
.mast__name a:hover { color: var(--color-accent); }

.mast__tagline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-ink-2);
  /* roman, not italic — no italic cut of Newsreader is self-hosted, and a
     synthesised oblique on a display serif is worse than none */
}

.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  list-style: none;
  margin-block: var(--space-sm) var(--space-xs);
}
.mast__nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-2);
  white-space: nowrap;             /* clickable text never wraps */
  padding-block: var(--space-3xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.mast__nav a:hover,
.mast__nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.rule-double {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  height: 4px;
  margin: 0;
}

.rule-hair {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   5 · INDEX-FIRST · the almanac index
   ══════════════════════════════════════════════════════════════ */

.preamble {
  padding-block: var(--space-xl) var(--space-lg);
  max-width: 52rem;
}
.preamble p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink);
}
.preamble p + p {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink-2);
}

/* Ledger — the counts strip. Every figure below is machine-counted
   from the corpus at build time; nothing here is estimated. */
.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.ledger__item { min-width: 0; }
.ledger__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ledger__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: var(--space-3xs);
}

.shelf { padding-block: var(--space-xl) 0; }

.shelf__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-thick) solid var(--color-rule-strong);
}
.shelf__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  white-space: nowrap;
}

.shelf__blurb {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 64ch;
  padding-block: var(--space-2xs) var(--space-3xs);
}

.entries { list-style: none; }

.entry { border-bottom: var(--rule-hair) solid var(--color-rule); }

.entry__link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-sm);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.entry__link:hover { background: var(--color-accent-wash); }
.entry__link:hover .entry__title { color: var(--color-accent); }

.entry__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.entry__body { min-width: 0; }

.entry__title {
  display: block;                  /* spans, so this is load-bearing */
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  transition: color var(--dur-short) var(--ease-out);
}

.entry__note {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-top: var(--space-3xs);
  max-width: 60ch;
}

.entry__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.entry__meta span { display: block; }

@media (max-width: 46rem) {
  .entry__link {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    row-gap: var(--space-3xs);
  }
  .entry__meta {
    grid-column: 2;
    text-align: left;
  }
  .entry__meta span { display: inline; }
  .entry__meta span + span::before { content: " · "; }
}

/* ══════════════════════════════════════════════════════════════
   6 · METHOD PANEL — the honesty device
   ══════════════════════════════════════════════════════════════ */

.method {
  margin-block: var(--space-2xl);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}
.method__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
}
.method__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-md);
}
.method__item { min-width: 0; }
.method__term {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3xs);
}
.method__def {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   7 · LONG DOCUMENT · article
   ══════════════════════════════════════════════════════════════ */

.article { padding-block: var(--space-xl) var(--space-2xl); }

.article__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.article__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.article__standfirst {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  padding-block: var(--space-2xs);
  border-block: var(--rule-hair) solid var(--color-rule);
  font-variant-numeric: tabular-nums;
}

.prose { max-width: var(--measure); }

.prose > * + * { margin-top: var(--space-sm); }

.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-3xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.prose h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: var(--space-lg);
}
.prose h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: var(--space-md);
}

.prose p { color: var(--color-ink); }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }        /* body-copy emphasis only */

.prose ul, .prose ol { padding-left: var(--space-md); }
.prose li + li { margin-top: var(--space-3xs); }
.prose ul { list-style: none; padding-left: var(--space-sm); }
.prose ul > li { position: relative; padding-left: var(--space-sm); }
.prose ul > li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--color-ink-3);
}
.prose ol { list-style: decimal; }
.prose ol::marker { font-family: var(--font-mono); }

.prose a:not(.btn) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-thickness var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.prose a:not(.btn):hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

.prose blockquote {
  border-left: var(--rule-thick) solid var(--color-accent);
  padding-left: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-paper-3);
  padding: 0.1em 0.32em;
  border-radius: var(--radius);
}

.prose mark {
  background: var(--color-accent-wash);
  color: var(--color-ink);
  padding: 0.05em 0.15em;
}

/* Lead paragraph gets a drop cap — one per article, editorial licence */
.prose > p.lead::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 500;
  padding-right: 0.08em;
  margin-top: 0.06em;
  color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════
   8 · F3 · TABULAR SPEC SHEET — the almanac's hero element
   ══════════════════════════════════════════════════════════════ */

.table-wrap {
  overflow-x: auto;
  margin-top: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
  /* scroll affordance without a fake scrollbar */
  scrollbar-width: thin;
}

.table-wrap > table { margin: 0; border: 0; }

.prose table,
.table-wrap table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
}

.prose th,
.table-wrap th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule-thick) solid var(--color-rule-strong);
  white-space: nowrap;
}

.prose td,
.table-wrap td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
  line-height: 1.5;
}

.prose tbody tr:nth-child(even),
.table-wrap tbody tr:nth-child(even) { background: var(--color-paper-2); }

.table-caption,
.prose table caption {
  caption-side: bottom;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
  padding-top: var(--space-2xs);
}

/* ══════════════════════════════════════════════════════════════
   9 · NOTES, DISCLOSURE, CALLOUTS
   ══════════════════════════════════════════════════════════════ */

.note {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-left: var(--rule-thick) solid var(--color-rule-strong);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.note__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-3xs);
}

.note--disclosure { border-left-color: var(--color-accent); }

.toc {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
}
.toc__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-2xs);
}
.toc ol {
  list-style: none;
  columns: 2;
  column-gap: var(--space-lg);
  font-size: var(--text-sm);
}
@media (max-width: 40rem) { .toc ol { columns: 1; } }
.toc li { break-inside: avoid; padding-block: 2px; }
.toc a {
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.toc a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════
   10 · BUTTONS & LINKS — 8 states
   ══════════════════════════════════════════════════════════════ */

.btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-paper);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--rule-hair) solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;              /* never wraps to two lines */
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:hover, .btn.is-hover { --btn-bg: var(--color-accent); border-color: var(--color-accent); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.btn[data-state="loading"] { cursor: progress; opacity: 0.7; }
.btn[data-state="error"]   { --btn-bg: var(--color-accent); border-color: var(--color-accent); }
.btn[data-state="success"] { --btn-bg: var(--color-ink-2); border-color: var(--color-ink-2); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  border-color: var(--color-rule-strong);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-paper);
  border-color: var(--color-ink);
}

/* Typographic CTA — the almanac's preferred call to action */
.cta-type {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--rule-thick) solid var(--color-accent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.cta-type:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* ══════════════════════════════════════════════════════════════
   11 · NEWSLETTER
   ══════════════════════════════════════════════════════════════ */

.signup {
  margin-block: var(--space-2xl);
  padding-block: var(--space-lg);
  border-block: var(--rule-thick) solid var(--color-rule-strong);
}
.signup__title { font-size: var(--text-2xl); }
.signup__sub {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 48ch;
}
.signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  max-width: 30rem;
}
.signup__field { flex: 1 1 14rem; min-width: 0; }
.signup__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-3xs);
}
.signup input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out);
}
.signup input[type="email"]:hover { border-color: var(--color-ink-2); }
.signup input[type="email"]:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-ink-2);   /* border-width never changes between states */
}
.signup input[type="email"]:disabled,
.signup input[type="email"][aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper-2);
}
.signup input[type="email"]::placeholder { color: var(--color-ink-3); }
.signup__submit { align-self: flex-end; }
@media (max-width: 30rem) {
  .signup__submit { align-self: stretch; justify-content: center; }
}

.signup__note {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
}

/* ══════════════════════════════════════════════════════════════
   12 · Ft4 · DENSE COLOPHON
   ══════════════════════════════════════════════════════════════ */

.colophon {
  margin-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  padding-block: var(--space-lg) var(--space-xl);
}
.colophon__body {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-ink-2);
  max-width: 62ch;
}
.colophon__body a {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.colophon__body a:hover { color: var(--color-accent); }
.colophon__mark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xs);
  color: var(--color-ink);
}

/* ══════════════════════════════════════════════════════════════
   13 · MOTION — one orchestrated entrance, nothing else
   ══════════════════════════════════════════════════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.mast, .preamble {
  animation: rise var(--dur-medium) var(--ease-out) both;
}
.preamble { animation-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mast, .preamble { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   14 · PRINT
   ══════════════════════════════════════════════════════════════ */

@media print {
  .mast__nav, .signup, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ══════════════════════════════════════════════════════════════
   15 · IN-ARTICLE COMPONENTS
   The 39 articles carry a shared class vocabulary (faq-*, pricing-*,
   verdict-*, callout, rec-box, cta-box, tbl-scroll …) plus ~330 one-off
   class names. Rather than rewrite 39 bodies, the vocabulary is given one
   Almanac treatment here, and anything unrecognised falls back to plain
   prose — which is what the old per-page stylesheets should have done.
   ══════════════════════════════════════════════════════════════ */

/* Section divider — was a coloured <hr> in 38 different flavours */
.prose hr,
.prose .divider {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-block: var(--space-lg);
  height: 0;
}

/* Horizontally scrollable table shell used by the articles */
.prose .tbl-scroll {
  overflow-x: auto;
  margin-top: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
  scrollbar-width: thin;
}
.prose .tbl-scroll > table { min-width: 32rem; }

/* Callouts, recommendation boxes, verdicts, stat boxes — one voice */
.prose .callout,
.prose .rec-box,
.prose .verdict-card,
.prose .who-card,
.prose .stat-box,
.prose .cta-box,
.prose .note-box {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-left: var(--rule-thick) solid var(--color-rule-strong);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.prose .callout > *:first-child,
.prose .rec-box > *:first-child,
.prose .verdict-card > *:first-child { margin-top: 0; }

.prose .callout-title,
.prose .verdict-title,
.prose .who-title,
.prose .rec-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3xs);
}
.prose .callout-icon,
.prose .cta-sub { color: var(--color-ink-3); }
.prose .callout-icon:empty { display: none; }

/* Score / stat figures */
.prose .score-row,
.prose .stat-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.prose .score,
.prose .stat-num,
.prose .val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink);
}

/* Pricing / comparison grids — cards become a ruled column set */
.prose .pricing-grid,
.prose .verdict-grid,
.prose .h2h-grid,
.prose .pros-cons,
.prose .tool-grid,
.prose .use-grid,
.prose .who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.prose .pricing-card,
.prose .tool-card,
.prose .h2h-col,
.prose .pros,
.prose .cons {
  min-width: 0;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper);
  font-size: var(--text-sm);
}
.prose .pricing-card.featured,
.prose .tool-card.winner { border-color: var(--color-accent); }

.prose .pricing-plan-name,
.prose .tool-name,
.prose .feature-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.prose .pricing-price {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-block: var(--space-3xs);
}
.prose .pricing-subs { display: block; color: var(--color-ink-3); font-size: var(--text-xs); }
.prose .pricing-divider { display: none; }

/* Ticks and crosses stay as typographic marks — they belong in tables */
.prose .check { color: var(--color-ink); font-weight: 600; }
.prose .cross { color: var(--color-ink-3); }

/* Chips: tags, badges, verdict labels */
.prose .badge,
.prose .tag-chip,
.prose .win,
.prose .criterion {
  display: inline-block;
  padding: 2px var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  background: transparent;
  line-height: 1.6;
}
.prose .badge-green, .prose .win { border-color: var(--color-accent); color: var(--color-accent); }
.prose .article-tags { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: var(--space-md); }

/* Fee / spec rows */
.prose .fee-row,
.prose .step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* FAQ — a definition list in almanac dress */
.prose .faq { margin-top: var(--space-md); }
.prose .faq-item {
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.prose .faq-item:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.prose .faq-q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}
.prose .faq-a {
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* In-article CTA — typographic, never a gradient pill */
.prose .cta-btn {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--rule-thick) solid var(--color-accent);
  padding-bottom: 1px;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.prose .cta-btn:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.prose .cta-sub { display: block; font-size: var(--text-xs); margin-top: var(--space-3xs); }

/* Related reading — the index row, reused */
.related { margin-top: var(--space-2xl); }
.related__title {
  font-size: var(--text-2xl);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-thick) solid var(--color-rule-strong);
}

/* Any one-off container the old stylesheets styled and this one does not:
   let it be a plain block rather than an orphaned card. */
.prose div:not([class]) { margin-top: var(--space-sm); }

/* ── Corrections found by rendering the rebuilt articles ────────── */

/* The TOC sits outside .prose, so the first paragraph had no top margin. */
.prose { margin-top: var(--space-lg); }
.prose > *:first-child { margin-top: 0; }

/* Score figure: "9" is the number, "/10" is a unit — not two headlines. */
.prose .score-row { align-items: center; gap: var(--space-md); }
.prose .score-circle {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.prose .score-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
}
.prose .score-den {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.prose .score-text { min-width: 0; }
.prose .score-text h3 { margin-top: 0; font-size: var(--text-lg); }
.prose .score-text p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* `.feature-name` serves two masters in the corpus: a label inside a pricing
   card, and the first column of a comparison table. As a table cell it is the
   row's heading and must read as body text, not as an 11px muted mono label. */
.prose td.feature-name,
.prose th.feature-name {
  display: table-cell;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

/* ══════════════════════════════════════════════════════════════
   N · DATA CHARTS  (inline SVG)
   Marks reference the same tokens as the prose, so a chart inverts
   with the page in dark mode instead of staying a light rectangle.
   No fills beyond one 6%-opacity band: this is a typographic index,
   and a chart here is a figure, not an illustration.
   ══════════════════════════════════════════════════════════════ */
.prose .chart { margin: var(--space-lg) 0; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__cap {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}
.ch-axis      { stroke: var(--color-rule-strong); stroke-width: 1; }
.ch-grid      { stroke: var(--color-rule); stroke-width: 1; }
.ch-band      { fill: var(--color-accent-wash); }
.ch-band-edge { stroke: var(--color-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-line      { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-line--1   { stroke: var(--color-accent); }
.ch-line--2   { stroke: var(--color-ink-2); }
.ch-dot--1    { fill: var(--color-accent); }
.ch-dot--2    { fill: var(--color-ink-2); }
.ch-tick, .ch-note, .ch-key {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--color-ink-3);
}
.ch-key       { font-weight: 600; }
.ch-key--1    { fill: var(--color-accent); }
.ch-key--2    { fill: var(--color-ink-2); }
.ch-note      { fill: var(--color-accent); }