/* Hallmark · shape: Index-First · genre: editorial · theme: Almanac (deal 2/3, seed usa-trending-news-explainer-3ee2·3398c1d6·2026-11-13·r0) · job: read · draw: manual-front-page
 * hero: Stage, lead explainer on the sheet · nav: masthead, edge-aligned · footer: colophon · imagery: none yet, slots reserved · signature: the dated Today index table in mono figures
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E, no photography yet so type and rules carry the page; photo slots are sized and captioned for later */
@import url("./tokens.css");
@import url("./base.css");

body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: var(--tracking-display); line-height: 1.05; }
a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-lg); }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; }
.wordmark span { color: var(--color-accent-2); }
nav.topics { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); }
nav.topics a { text-decoration: none; }
.btn { display: inline-block; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); background: transparent; text-decoration: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); }
.dateline { display: flex; justify-content: space-between; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-xl); margin-top: var(--space-lg); }
.kicker { font-size: var(--text-sm); color: var(--color-accent-2); font-family: var(--font-display); font-weight: 500; }
.lead h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.035em; line-height: 0.98; overflow-wrap: break-word; min-width: 0; margin-block: var(--space-sm); }
.dek { font-size: var(--text-lg); line-height: 1.45; max-width: 38rem; }
.keypoints { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-md); }
.keypoints h2 { font-size: var(--text-base); }
.keypoints li { margin-block: var(--space-xs); line-height: 1.5; }
section.block { margin-top: var(--space-2xl); }
section.block > h2 { font-size: var(--text-2xl); border-bottom: var(--rule-bar) solid var(--color-rule-2); padding-bottom: var(--space-sm); }
table.index { width: 100%; border-collapse: collapse; background: var(--color-sheet); }
table.index th { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); text-align: left; padding: var(--space-sm); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
table.index td { padding: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; line-height: 1.4; }
table.index td.time { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.index tr.lead-row td { color: var(--color-accent-2); }
table.index tr:hover { background: var(--color-paper-2); }
.hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-lg); }
.hub { border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-sm); }
.hub h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.hub p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.band { background: var(--color-ink); color: var(--color-paper); padding: var(--space-xl); margin-top: var(--space-2xl); }
.band h2 { color: var(--color-paper); }
.band .btn { border-color: var(--color-paper); color: var(--color-paper); }
footer.colophon { margin-top: var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule-2); padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; }
.byline { font-size: var(--text-sm); color: var(--color-muted); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); margin-block: var(--space-md); }
.article { max-width: 44rem; }
.article h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.article p { line-height: 1.6; margin-top: var(--space-md); }
.timeline td:first-child { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sources { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }
a:active, .btn:active { color: var(--color-accent-2); }
.btn--primary:active { background: var(--color-ink); }