:root {
  --bg: #f7f6f2; --ink: #1d1f22; --muted: #62666d; --line: #dedbd2; --accent: #2d5b7a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141619; --ink: #e6e4df; --muted: #9ba0a7; --line: #2b2f35; --accent: #8fbadb; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 17px/1.6 "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
  padding-inline: 20px;
}
main, footer { width: 100%; max-width: 620px; margin: 0 auto; }
main { flex: 1; padding-block: 16vh 56px; }
main.doc { padding-block: 48px 56px; }
.name { font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 600; margin: 0 0 10px; text-wrap: balance; }
.doc h1 { font-size: 28px; }
h2 { font-size: 19px; margin: 30px 0 6px; }
.lede { font-size: 19px; color: var(--muted); margin: 0 0 24px; }
.meta { color: var(--muted); margin-top: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
footer {
  border-top: 1px solid var(--line); padding-block: 16px 28px;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--muted);
}