:root {
  --paper: #F3F1F6; --surface: #FFFFFF; --ink: #1C2238; --muted: #585D76; --line: #DAD6E3; --accent: #9E2342;
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #12141F; --surface: #1B1E2C; --ink: #ECE9F2; --muted: #A4A7BD; --line: #2E3246; --accent: #E46A86; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.65;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px));
}
main { max-width: 42rem; margin: 0 auto; }
.brand { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.6rem; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1; margin: 40px 0 8px; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
.date { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.todo { background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 0 4px; border-radius: 4px; }
a { color: var(--accent); }
.cta { display: inline-block; margin-top: 24px; background: var(--accent); color: var(--paper); text-decoration: none; font-weight: 600; padding: 12px 24px; border-radius: 999px; }