:root { color-scheme: light; --paper:#f3ebd8; --raised:#fff9ea; --ink:#17201d; --muted:#4e5c55; --teal:#095c5b; --brass:#d49b2a; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; font-size:16px; line-height:1.65; background-image:radial-gradient(rgba(23,32,29,.1) .7px,transparent .7px); background-size:5px 5px; }
a { color:var(--teal); text-underline-offset:4px; } a:focus-visible { outline:3px solid var(--brass); outline-offset:3px; }
header, main, footer { width:min(760px,calc(100% - 32px)); margin:auto; } header { display:flex; align-items:center; justify-content:space-between; min-height:76px; border-bottom:2px solid var(--ink); }
.brand { color:var(--ink); font-weight:900; text-transform:uppercase; text-decoration:none; letter-spacing:.06em; } main { padding:64px 0 90px; }
.eyebrow { color:var(--teal); font-size:.76rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; } h1,h2 { font-family:"Arial Narrow",Arial,sans-serif; line-height:1; } h1 { max-width:12ch; font-size:clamp(3rem,9vw,5.4rem); letter-spacing:-.04em; } h2 { margin-top:48px; font-size:1.65rem; }
p,li { max-width:68ch; } .summary { padding:20px 24px; background:var(--raised); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
footer { padding:32px 0; border-top:2px solid var(--ink); color:var(--muted); font-size:.8rem; } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}