@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --paper: #EEF2F8; --sheet: #FFFFFF; --ink: #18233A; --muted: #5A6680; --line: #D6DDE9; --blue: #1D4C9C; --red: #C8283B; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --paper: #0F1A31; --sheet: #172642; --ink: #E7ECF6; --muted: #9AA7C2; --line: #273A5E; --blue: #6F9BEA; --red: #EE6C7C; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 "Atkinson", system-ui, sans-serif; }
.band { height: 8px; background: repeating-linear-gradient(-45deg, var(--red) 0 9px, transparent 9px 14px, var(--blue) 14px 23px, transparent 23px 28px); }
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
header img { width: 40px; height: 40px; }
header a { font: 800 26px/1 "Bricolage", sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; }
h1 { font: 700 34px/1.15 "Bricolage", sans-serif; letter-spacing: -0.8px; margin: 0 0 8px; }
h2 { font: 650 21px/1.25 "Bricolage", sans-serif; margin: 32px 0 6px; }
.lede { color: var(--muted); margin: 0 0 8px; }
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; margin-top: 20px; }
a { color: var(--blue); }
footer { margin-top: 40px; color: var(--muted); font-size: 15px; }
footer a { margin-right: 14px; }
ul { padding-left: 22px; }
li { margin: 6px 0; }