/* Hallmark · genre: editorial · macrostructure: Ecosystem Index (home) + Long Document (article)
 * theme: custom · vibe: "Dutch tricolour, newsroom, bold red, Delft blue"
 * paper oklch(100% 0 0) · red oklch(46% 0.17 24) (#AE1C28) · blue oklch(40% 0.12 262) (#21468B) · oranje + cool grey support
 * axes: light / high-contrast-serif / warm (red lead, cool second)
 * nav: N6 Newspaper masthead on a blue bar · footer: Ft4 Dense typographic on navy
 * type: Fraunces display / Spectral text / Space Grotesk labels · FT page rules: docs/FT_PAGE_GUIDE.md §8
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */

:root {
  color-scheme: light;
  --color-paper:   oklch(100% 0 0);
  --color-paper-2: oklch(96.2% 0.006 255);   /* FT-style grey panel */
  --color-paper-3: oklch(92.5% 0.010 255);
  --color-ink:     oklch(21% 0.035 262);
  --color-ink-2:   oklch(40% 0.030 262);
  --color-ink-3:   oklch(54% 0.020 262);
  --color-rule:    oklch(88% 0.010 255);
  --color-red:     oklch(46% 0.170 24);
  --color-red-2:   oklch(93% 0.035 20);
  --color-blue:    oklch(40% 0.120 262);
  --color-blue-2:  oklch(30% 0.100 262);
  --color-blue-3:  oklch(70% 0.080 255);
  --color-oranje:  oklch(70% 0.170 52);
  --color-on-dark: oklch(98% 0.005 255);
  --color-on-dark-2: oklch(82% 0.030 255);
  --color-focus:   oklch(70% 0.170 52);

  --font-display: 'Fraunces', Georgia, serif;
  --font-text:    'Spectral', Georgia, serif;
  --font-ui:      'Space Grotesk', system-ui, sans-serif;

  /* FT o-typography scale: 12/14/16/18/20/24/28/32/40/48 */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 1rem;    --text-lg: 1.125rem;
  --text-xl: 1.25rem;  --text-2xl: 1.5rem;  --text-3xl: 1.75rem; --text-4xl: 2rem;
  --text-5xl: 2.5rem;  --text-6xl: 3rem;

  /* 4-pt scale (FT o-spacing) */
  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px;
  --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px;

  --rule-hair: 1px;
  --rule-strong: 2px;
  --rule-heavy: 4px;
  --measure: 65ch;
  --page-max: 1220px;
  --page-gutter: 16px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 740px) { :root { --page-gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-lg)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 1220px) { body { font-size: var(--text-xl); } }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }
.skip { position: absolute; left: -999px; } .skip:focus { left: var(--page-gutter); top: var(--space-2xs); background: var(--color-paper); padding: var(--space-2xs); z-index: 2; }
.num, time { font-variant-numeric: tabular-nums; }

/* ── N6 masthead: tricolour stripe, centred nameplate, blue section bar ── */
.mast { text-align: center; }
.mast::before { content: ""; display: block; height: 12px;
  background: linear-gradient(var(--color-red) 0 33.3%, var(--color-paper) 33.3% 66.6%, var(--color-blue) 66.6%); }
.mast-line { margin: var(--space-sm) 0 0; font: 500 var(--text-xs)/1.4 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-2); }
.mast-name { display: inline-block; margin: var(--space-2xs) 0 0; font: 700 clamp(3rem, 10vw, 5.25rem)/0.9 var(--font-display); letter-spacing: -0.035em; text-decoration: none; color: var(--color-ink); }
.mast-name span { color: var(--color-red); }
.mast-tag { margin: var(--space-2xs) 0 var(--space-sm); font: 400 var(--text-md)/1.4 var(--font-text); color: var(--color-ink-2); }
.mast-nav { background: var(--color-blue); border-top: var(--rule-heavy) solid var(--color-blue-2); }
.mast-nav ul { display: flex; justify-content: center; list-style: none; margin: 0 auto; padding: 0 var(--page-gutter); max-width: var(--page-max);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.mast-nav a { display: block; padding: var(--space-xs) var(--space-sm); font: 600 var(--text-sm)/1 var(--font-ui); letter-spacing: 0.04em; text-decoration: none; color: var(--color-on-dark);
  box-shadow: inset 0 -4px 0 transparent; transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.mast-nav a:hover { background: var(--color-blue-2); }
.mast-nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--color-red); background: var(--color-blue-2); }
@media (max-width: 739px) { .mast-nav ul { justify-content: flex-start; } .mast-nav a { padding: var(--space-xs) var(--space-xs); } }

/* ── Shared atoms ───────────────────────────────────────────── */
.kicker { font: 700 var(--text-xs)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-red); text-decoration: none; }
.kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); font: 400 var(--text-sm)/1.3 var(--font-ui); color: var(--color-ink-3); }
.meta .src { display: inline-flex; align-items: center; gap: 6px; color: var(--color-blue); }
.meta .src svg { width: 14px; height: 14px; }
.meta .num { font-weight: 600; color: var(--color-ink); }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--color-blue); }
.dots i.on { background: var(--color-blue); }

/* Section band: heavy ink rule with a red tab, like a newspaper page head */
.band { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  border-top: var(--rule-strong) solid var(--color-ink); padding-top: var(--space-xs); margin: var(--space-2xl) 0 var(--space-md); }
.band::before { content: ""; position: absolute; left: 0; top: -6px; width: 56px; height: 6px; background: var(--color-red); }
.band h2 { margin: 0; font: 700 var(--text-3xl)/1.1 var(--font-display); letter-spacing: -0.015em; }
.band a { font: 600 var(--text-sm)/1 var(--font-ui); color: var(--color-blue); text-decoration: none; white-space: nowrap; }
.band a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Home: lead + latest rail ───────────────────────────────── */
.front { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-lg); }
@media (min-width: 980px) { .front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl); } }
.lead a { text-decoration: none; }
.lead h2 { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
@media (min-width: 490px) { .lead h2 { font-size: var(--text-5xl); } }
@media (min-width: 980px) { .lead h2 { font-size: 3.5rem; } }
.lead a:hover h2 { color: var(--color-blue); }
.lead .dek { margin: 0 0 var(--space-sm); font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink-2); max-width: 54ch; }
.lead > .kicker { display: inline-block; padding: 5px 8px 4px; background: var(--color-red); color: var(--color-on-dark); }

.latest { align-self: start; background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-blue); padding: var(--space-sm) var(--space-md) var(--space-2xs); }
.latest h2 { margin: 0 0 var(--space-2xs); font: 700 var(--text-sm)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); }
.latest ol { list-style: none; margin: 0; padding: 0; }
.latest li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.latest li a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) 0; text-decoration: none; }
.latest time { font: 700 var(--text-sm)/1.5 var(--font-ui); color: var(--color-red); }
.latest span { font: 600 var(--text-lg)/1.3 var(--font-display); }
.latest a:hover span { color: var(--color-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Seconds under the lead: column rule between them */
.seconds { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-strong) solid var(--color-ink); }
@media (min-width: 740px) { .seconds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .seconds .teaser:nth-child(2) { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); }
  .seconds .teaser:nth-child(1) { padding-right: var(--space-md); } }

/* ── Teaser grid: newspaper column rules ───────────────────── */
.teasers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.teasers .teaser { padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.teasers .teaser:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 740px) {
  .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teasers .teaser { border-top: 0; padding: 0 var(--space-md) var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
  .teasers .teaser:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 980px) {
  .teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teasers .teaser:nth-child(2n+1) { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); }
  .teasers .teaser:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
.teaser a { text-decoration: none; }
.teaser h3 { margin: var(--space-2xs) 0; font-size: var(--text-2xl); line-height: 1.15; text-wrap: balance; }
.teaser a:hover h3 { color: var(--color-blue); }
.teaser p { margin: 0 0 var(--space-xs); font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); }

/* ── Article: topper + body + context rail ──────────────────── */
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-xl); }
@media (min-width: 980px) { .article { grid-template-columns: minmax(0, 680px) 320px; justify-content: space-between; } }
.topper .kicker { display: inline-block; padding: 5px 8px 4px; background: var(--color-red); color: var(--color-on-dark); }
.topper h1 { margin: var(--space-sm) 0 var(--space-sm); font-size: var(--text-4xl); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 490px) { .topper h1 { font-size: var(--text-5xl); } }
@media (min-width: 980px) { .topper h1 { font-size: var(--text-6xl); line-height: 1.04; } }
.topper .dek { margin: 0 0 var(--space-md); font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink-2); }
.byline { padding: var(--space-xs) 0; border-top: var(--rule-strong) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.byline .who { font: 700 var(--text-sm)/1.3 var(--font-ui); margin-bottom: var(--space-3xs); color: var(--color-blue); }
.body { max-width: var(--measure); }
.body p { margin: 0 0 var(--space-md); }
.body > p:first-child { margin-top: var(--space-lg); }
.body h2 { margin: var(--space-xl) 0 14px; font: 700 var(--text-3xl)/1.15 var(--font-display); letter-spacing: -0.015em; }
.body h2::before { content: ""; display: block; width: 32px; height: var(--rule-heavy); background: var(--color-red); margin-bottom: var(--space-xs); }

/* Context terms: FT-style grey highlight, links to the rail */
a.ctx { text-decoration: none; background: var(--color-paper-3); box-shadow: inset 0 -2px 0 var(--color-blue); padding: 0 2px; border-radius: 2px;
  transition: background-color 160ms var(--ease-out); }
a.ctx:hover { background: var(--color-blue-3); }

blockquote { position: relative; margin: var(--space-xl) 0; padding: var(--space-lg) 0 0; border-top: var(--rule-hair) solid var(--color-rule);
  font: 600 var(--text-2xl)/1.3 var(--font-display); max-width: 56ch; }
blockquote::before { content: "\201C"; position: absolute; top: -0.12em; left: 0; font: 700 4.5rem/1 var(--font-display); color: var(--color-red); background: var(--color-paper); padding-right: var(--space-2xs); }
blockquote cite { display: block; margin-top: var(--space-xs); font: 700 var(--text-xs)/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue); font-style: normal; }

figure { margin: var(--space-xl) 0; border-top: var(--rule-strong) solid var(--color-ink); padding-top: var(--space-xs); }
figure h3 { margin: 0 0 var(--space-xs); font: 700 var(--text-lg)/1.3 var(--font-ui); }
figure svg { width: 100%; height: auto; font: 13px var(--font-ui); fill: var(--color-ink); }
figure .bar { fill: var(--color-blue); } figure .bar.neg { fill: var(--color-red); } figure .axis { stroke: var(--color-ink-3); }
figure .line { fill: none; stroke: var(--color-red); stroke-width: 3; } figure .val { font-weight: 700; }
figure .seg.s0 { fill: var(--color-blue); } figure .seg.s1 { fill: var(--color-red); } figure .seg.s2 { fill: var(--color-oranje); } figure .seg.s3 { fill: var(--color-blue-3); } figure .seg.s4 { fill: var(--color-paper-3); }
figcaption { font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--color-ink-3); margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: var(--rule-hair) solid var(--color-rule); }

.bignum { margin: var(--space-xl) 0; padding: var(--space-sm) 0; border-top: var(--rule-heavy) solid var(--color-red); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bignum .n { font: 700 clamp(3rem, 9vw, 4.5rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-red); }
.bignum .d { margin-top: var(--space-2xs); font: 500 var(--text-lg)/1.45 var(--font-ui); color: var(--color-ink-2); max-width: 60ch; }

.innum, .blist, .tline, .spectrum { margin: var(--space-xl) 0; }
.innum h3, .blist h3, .tline h3, .spectrum h3 { margin: 0 0 var(--space-xs); font: 700 var(--text-lg)/1.3 var(--font-ui); }
.innum { background: var(--color-paper-2); padding: var(--space-md); border-top: var(--rule-heavy) solid var(--color-blue); }
.innum h3 { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); }
.innum dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.innum dl > div { padding: 0 var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); }
.innum dl > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 489px) { .innum dl { grid-template-columns: minmax(0, 1fr); }
  .innum dl > div { border-left: 0; padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .innum dl > div:first-child { border-top: 0; padding-top: 0; } }
.innum dt { font: 700 var(--text-4xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-red); overflow-wrap: anywhere; }
.innum dd { margin: var(--space-2xs) 0 0; font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--color-ink-2); }

.blist ul, .blist ol { margin: 0; padding-left: 1.2em; } .blist li { margin: var(--space-2xs) 0; }
.blist li::marker { color: var(--color-red); font-weight: 700; }
.tline ol { list-style: none; margin: 0; padding: 0; border-left: var(--rule-strong) solid var(--color-blue); }
.tline li { position: relative; padding: 0 0 var(--space-md) var(--space-md); }
.tline li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-red); box-shadow: 0 0 0 3px var(--color-paper); }
.tline .tl-when { display: block; font: 700 var(--text-sm)/1.3 var(--font-ui); color: var(--color-blue); }

.tbl { overflow-x: auto; } .tbl table { border-collapse: collapse; width: 100%; font: 400 var(--text-md)/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2xs); }
.tbl th { text-align: left; font-weight: 700; border-bottom: var(--rule-strong) solid var(--color-ink); padding: 6px var(--space-xs) 6px 0; }
.tbl td { border-bottom: var(--rule-hair) solid var(--color-rule); padding: 6px var(--space-xs) 6px 0; }
.tbl tbody tr:nth-child(even) td { background: var(--color-paper-2); }
.tbl td.num, .tbl th.num { text-align: right; }

.spectrum { padding: var(--space-md); background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-red); }
.spectrum dl { margin: 0; } .spectrum dt { font: 700 var(--text-md)/1.3 var(--font-ui); margin-top: var(--space-sm); color: var(--color-blue); }
.spectrum dt:first-child { margin-top: 0; }
.spectrum dd { margin: var(--space-3xs) 0 0; color: var(--color-ink-2); }

/* Rail: grey FT context panels */
.rail h2 { margin: 0 0 var(--space-xs); font: 700 var(--text-xs)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); }
.rail h2.more { margin-top: var(--space-xl); padding-top: var(--space-xs); border-top: var(--rule-strong) solid var(--color-ink); }
@media (min-width: 980px) { .rail-inner { position: sticky; top: var(--space-md); } }
.ctxbox { padding: var(--space-sm); margin-bottom: var(--space-2xs); background: var(--color-paper-2); border-left: var(--rule-heavy) solid var(--color-blue);
  font: 400 var(--text-md)/1.5 var(--font-text); scroll-margin-top: var(--space-md); transition: background-color 200ms var(--ease-out); }
.ctxbox:target { background: var(--color-red-2); border-left-color: var(--color-red); }
.ctxbox h3 { margin: 0 0 var(--space-3xs); font: 700 var(--text-md)/1.3 var(--font-ui); }
.ctxbox p { margin: 0; color: var(--color-ink-2); }
.ctxbox a { color: var(--color-blue); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; }
.more ~ .ctxbox { background: none; border-left: 0; padding: var(--space-xs) 0; margin: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.more ~ .ctxbox h3 { font: 600 var(--text-lg)/1.3 var(--font-display); margin-top: var(--space-3xs); }
.ctxbox h3 a { text-decoration: none; color: var(--color-ink); font: inherit; } .ctxbox h3 a:hover { color: var(--color-blue); }

.reported { margin: var(--space-xl) 0 0; padding: var(--space-md); background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-ink); max-width: var(--measure); }
.reported h2 { margin: 0 0 var(--space-2xs); font: 700 var(--text-md)/1.3 var(--font-ui); }
.reported p { margin: 0 0 var(--space-xs); font: 400 var(--text-md)/1.5 var(--font-ui); color: var(--color-ink-2); }
.reported ul { margin: 0; padding-left: 1.2em; font: 400 var(--text-sm)/1.5 var(--font-ui); color: var(--color-ink-2); }
.reported li { margin: var(--space-3xs) 0; } .reported a { color: var(--color-blue); font-weight: 600; }

/* ── Ft4 colophon on navy, tricolour edge ──────────────────── */
.colophon { margin-top: var(--space-3xl); background: var(--color-blue-2); color: var(--color-on-dark); padding: var(--space-lg) 0 var(--space-xl);
  border-top: var(--rule-heavy) solid var(--color-red); }
.colophon .wordmark { font: 700 var(--text-4xl)/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; color: var(--color-on-dark); }
.colophon .wordmark span { color: var(--color-oranje); }
.colophon p { margin: var(--space-sm) 0 0; max-width: 70ch; font: 400 var(--text-sm)/1.6 var(--font-ui); color: var(--color-on-dark-2); }
.colophon a:focus-visible { outline-color: var(--color-oranje); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }
@media (max-width: 489px) { .mast-extra { display: none; } }
.ctxbox a.kicker { color: var(--color-red); font: 700 var(--text-xs)/1.2 var(--font-ui); }