:root {
  --bg: #f4efe6; --fg: #1e2a3a; --muted: #5b6573; --accent: #1e2a3a; --rule: rgba(30, 42, 58, 0.14);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141b24; --fg: #e9e3d8; --muted: #a7adb5; --accent: #9db4d3; --rule: rgba(233, 227, 216, 0.14); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
header svg { width: 44px; height: 44px; flex: none; }
header a { color: inherit; text-decoration: none; font: 600 22px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
h1 { font: 600 34px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font: 600 20px/1.3 system-ui, -apple-system, sans-serif; margin: 36px 0 8px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 22px; }
.muted { color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0 20px; }
footer { font: 14px/1.5 system-ui, -apple-system, sans-serif; color: var(--muted); }