:root { --ink:#171717; --muted:#4d4d4d; --line:#ebebeb; --soft:#fafafa; --blue:#0072f5; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:17px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.wrap { width:min(860px,calc(100% - 40px)); margin:auto; }
header { border-bottom:1px solid var(--line); }
nav { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; }
.brand { font-weight:650; letter-spacing:-.04em; text-decoration:none; }
.links { display:flex; gap:16px; color:var(--muted); }
main { padding:72px 0; }
.eyebrow { color:var(--blue); font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:14px 0 20px; font-size:clamp(40px,6vw,58px); line-height:1.05; letter-spacing:-.06em; }
h2 { margin:52px 0 16px; font-size:30px; line-height:1.2; letter-spacing:-.045em; }
h3 { margin:28px 0 8px; font-size:20px; letter-spacing:-.025em; }
p,li { color:var(--muted); }
.callout { margin:28px 0; padding:20px 24px; background:var(--soft); border-left:3px solid var(--blue); }
.subscription { display:block; padding:16px; overflow-wrap:anywhere; background:var(--soft); box-shadow:0 0 0 1px var(--line); border-radius:8px; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
footer { padding:30px 0 52px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
@media (max-width:640px) { .wrap { width:min(100% - 32px,860px); } .links { gap:10px; } main { padding:52px 0; } }