:root { color-scheme: light dark; --page:#f4f1e9; --paper:#fffdf8; --ink:#0f1e36; --muted:#6b4f3a; --line:rgba(15,30,54,.14); --accent:#a31d24; }
@media (prefers-color-scheme: dark) { :root { --page:#101722; --paper:#172235; --ink:#f7f2e8; --muted:#d8c8b8; --line:rgba(255,255,255,.14); --accent:#ff979b; } }
* { box-sizing:border-box; }
html { background:var(--page); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
body { margin:0; padding:clamp(18px,5vw,64px); }
main { width:min(760px,100%); margin:auto; }
nav { display:flex; justify-content:flex-end; margin-bottom:12px; }
nav a { padding:7px 13px; border:1px solid var(--line); border-radius:999px; }
article { padding:clamp(28px,7vw,64px); border:1px solid var(--line); border-radius:28px; background:var(--paper); box-shadow:0 24px 70px rgba(15,30,54,.1); }
.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1 { max-width:11ch; margin:12px 0; font-family:Georgia,serif; font-size:clamp(40px,8vw,68px); line-height:1; letter-spacing:-.04em; }
.lede { max-width:56ch; font-size:18px; }.date, section p, footer { color:var(--muted); }
section { padding-top:24px; margin-top:24px; border-top:1px solid var(--line); } h2 { font-family:Georgia,serif; }
a { color:var(--accent); font-weight:700; } footer { padding:24px; text-align:center; font-size:13px; }