@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-grotesk-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --paper: #f3eee4; --ink: #1c1a17; --muted: #5f594f; --tomato: #e4472b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 "Familjen Grotesk", system-ui, sans-serif; }
main { width: min(720px, 100% - 32px); margin: 0 auto; padding: 32px 0 80px; }
a { color: var(--tomato); }
.back { display: inline-block; margin-bottom: 40px; color: var(--ink); font-weight: 600; text-decoration: none; }
h1, h2 { font-family: "Young Serif", Georgia, serif; font-weight: 400; line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0 0 24px; }
h2 { font-size: 1.4rem; margin: 40px 0 8px; }
p, li { color: var(--muted); }
.todo { background: #e9b94955; color: var(--ink); padding: 0 .25em; border-radius: 4px; }