@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --paper:#f6f8fc; --panel:#fff; --ink:#0f1b3d; --muted:#4b5876; --line:#d3dcee; --blue:#2f55ea; --warn:#5e4700; --warn-bg:#fff3c4; }
@media (prefers-color-scheme: dark) { :root { --paper:#0b1226; --panel:#121b36; --ink:#eaf0ff; --muted:#a9b5d4; --line:#28345e; --blue:#7d98ff; --warn:#ffd23f; --warn-bg:#3a2f08; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.7 "Atkinson Hyperlegible", system-ui, sans-serif; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 16px 56px; }
header { padding: 16px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:800 1.35rem "Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.02em; }
h1, h2 { font-family:"Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.02em; line-height:1.15; }
h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin: 24px 0 6px; }
h2 { font-size: 1.4rem; margin: 2em 0 .4em; }
p, li { max-width: 66ch; }
a { color: var(--blue); }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.meta { color: var(--muted); margin-bottom: 1.5em; }
.draft { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 14px 18px; margin: 20px 0; }
footer { border-top:1px solid var(--line); margin-top:48px; padding-top:20px; color:var(--muted); font-size:.95rem; }