:root {
  --bg: #f6f4ef;
  --fg: #22211f;
  --muted: #7a766d;
  --accent: #a2552b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a18;
    --fg: #e6e2d9;
    --muted: #8f8a7f;
    --accent: #d98a5c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
}
main {
  max-width: 34rem;
  margin: 12vh auto 0;
}
h1 {
  margin: 0 0 .4em;
  font: 600 2.6rem/1.1 ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: -.03em;
  color: var(--accent);
}
h2 {
  margin: 2.2em 0 .5em;
  font: 600 .8rem/1.2 ui-monospace, "SF Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.lead { font-size: 1.15rem; margin: 0; }
ul { margin: 0; padding-left: 1.1em; }
li { margin: .25em 0; }
.muted { color: var(--muted); }
a { color: var(--accent); }
footer {
  max-width: 34rem;
  margin: 4em auto 3em;
  font: .8rem/1.4 ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--muted);
}