:root { color-scheme: light; --ink: #17342d; --paper: #f5f1e8; --accent: #b84f34; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 18px/1.7 Georgia, serif; }
a { color: var(--accent); }
.masthead { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 5vw; border-bottom: 1px solid #c9c0af; }
.brand { color: var(--ink); font: 700 1.15rem/1.2 system-ui, sans-serif; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; font: .85rem/1.2 system-ui, sans-serif; }
main { width: min(760px, 90vw); margin: 5rem auto; }
.eyebrow { color: var(--accent); font: 700 .75rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 16ch; font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .98; letter-spacing: -.04em; }
.content p:first-child { font-size: 1.25rem; }
.sources { margin-top: 3rem; padding: 1.5rem; border-left: 4px solid var(--accent); background: #fff9; }
footer { display: flex; justify-content: space-between; padding: 2rem 5vw; color: #f5f1e8; background: var(--ink); font: .85rem/1.4 system-ui, sans-serif; }
footer a { color: inherit; }
@media (max-width: 650px) { .masthead { display: block; } nav { margin-top: 1rem; } main { margin: 3rem auto; } }