:root { --bg: #fdfbf8; --ink: #1b1a17; --ink-3: #8a8882; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 15px/1.6 'Archivo', Arial, sans-serif; padding: 48px 24px 80px; }
main { max-width: 640px; margin: 0 auto; }
.logo { font: 800 34px/0.95 'Archivo', Arial, sans-serif; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 56px; }
.logo span { display: block; padding-left: .45em; }
.logo a { color: inherit; text-decoration: none; }
h1 { font: 800 22px/1.2 'Archivo', Arial, sans-serif; text-transform: uppercase; margin: 0 0 8px; }
h2 { font: 500 11px/1.4 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 36px 0 8px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 18px; }
.date { font: 400 11px/1.4 'IBM Plex Mono', monospace; color: var(--ink-3); margin-bottom: 32px; }
nav { margin-top: 56px; font: 500 11px/1.4 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 24px; flex-wrap: wrap; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 4px; }