:root { --ink:#07090d; --paper:#f3f5f1; --lime:#b7c77b; --orange:#ff6540; --muted:#586860; --line:#c5cec6; --mono:"DM Mono",monospace; --sans:"Space Grotesk",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.55 var(--sans); }
a { color:inherit; text-decoration-color:var(--orange); text-underline-offset:3px; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1180px; min-height:78px; margin:auto; padding:0 28px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.07em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--lime); font:500 12px var(--mono); letter-spacing:-1px; }.brand-slash { color:#6d8130; }
.site-header nav { display:flex; gap:24px; font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.site-header nav a { text-decoration:none; }
.hero { padding:86px 28px 68px; background:var(--ink); color:#edf5ef; }.hero-inner,.article,.related { max-width:1060px; margin:auto; }.eyebrow { margin:0 0 18px; color:var(--lime); font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.hero h1 { max-width:900px; margin:0; font-size:clamp(48px,8vw,91px); line-height:.84; letter-spacing:-.09em; }.hero h1 em { color:var(--lime); font-style:normal; }.lede { max-width:720px; margin:28px 0 0; color:#c3cfca; font-size:22px; }.breadcrumbs { margin:0 0 28px; color:#9fb0a8; font:500 12px var(--mono); }.breadcrumbs a { color:#dce8e1; }
.article { padding:72px 28px 36px; }.article h2 { margin:72px 0 18px; font-size:clamp(31px,4.4vw,53px); line-height:.95; letter-spacing:-.065em; }.article h3 { margin:0 0 9px; font-size:25px; line-height:1; letter-spacing:-.045em; }.article p,.article li { max-width:820px; }.article ul { display:grid; gap:10px; padding-left:24px; }.article li::marker { color:var(--orange); }.quick-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:30px; background:var(--line); border:1px solid var(--line); }.quick-list article { padding:28px; background:#f9faf7; }.quick-list article:nth-child(4n+2) { background:#e3e9df; }.quick-list article:nth-child(4n+3) { background:#e7e4d8; }.quick-list p { margin:0; color:var(--muted); font-size:16px; }.callout { margin:38px 0; padding:28px; border-left:5px solid var(--orange); background:#e3e9df; }.callout p { margin:0; font-size:19px; }.source-list { padding:24px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.source-list p { margin:0; color:var(--muted); font-size:16px; }.related { margin-top:46px; padding:54px 28px 82px; }.related h2 { margin:0 0 22px; font-size:34px; letter-spacing:-.06em; }.related a { display:inline-flex; align-items:center; min-height:48px; padding:12px 16px; background:var(--lime); color:#17201d; font:500 13px var(--mono); letter-spacing:.04em; text-decoration:none; }.site-footer { padding:31px 28px; background:var(--ink); color:#c3cfca; text-align:center; font:13px var(--mono); }
@media (max-width:650px) { body { font-size:17px; }.site-header { padding:0 20px; }.site-header nav { display:none; }.hero { padding:62px 22px 54px; }.article,.related { padding-right:22px; padding-left:22px; }.quick-list { grid-template-columns:1fr; }.article h2 { margin-top:54px; }.lede { font-size:19px; } }
