:root { color-scheme: light; --paper:#f3efdf; --sheet:#fffdf4; --ink:#171713; --muted:#59584f; --lime:#c8f04a; --blue:#2441b8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 Georgia, Cambria, serif; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 4px solid #3559e0; outline-offset: 3px; }
.skip-link { position:fixed; left:12px; top:8px; z-index:10; padding:8px 12px; border:3px solid var(--ink); color:var(--ink); background:var(--lime); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
header, footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px max(20px, calc((100vw - 820px)/2)); border-bottom:3px solid var(--ink); background:var(--sheet); font-family:Arial, sans-serif; }
header nav { display:flex; gap:20px; }
header a, footer a { min-height:44px; display:inline-flex; align-items:center; color:var(--ink); font-weight:800; }
.brand { font-family:"Arial Black", Arial, sans-serif; text-decoration:none; text-transform:uppercase; }
.brand span { display:grid; place-items:center; width:32px; height:32px; margin-right:9px; border:2px solid var(--ink); background:var(--lime); }
main { max-width:820px; margin:0 auto; padding:72px 20px 100px; }
.eyebrow { font:800 .76rem/1.3 Arial, sans-serif; letter-spacing:.1em; text-transform:uppercase; }
h1, h2 { font-family:"Arial Black", Arial, sans-serif; line-height:.98; letter-spacing:-.045em; }
h1 { max-width:13ch; margin:18px 0 24px; font-size:clamp(3rem, 9vw, 5rem); text-transform:uppercase; }
h2 { margin-bottom:12px; font-size:1.55rem; }
.lede { max-width:62ch; font-size:1.22rem; }
section { padding:28px 0; border-top:2px solid var(--ink); }
section p { max-width:68ch; margin-bottom:0; }
code { padding:2px 4px; background:var(--sheet); border:1px solid var(--ink); overflow-wrap:anywhere; }
footer { border-top:3px solid var(--ink); border-bottom:0; }
@media (max-width:520px) { header { align-items:flex-start; flex-direction:column; } main { padding-top:52px; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }