:root {
  --bg: #fbf8f2;
  --text: #2a2622;
  --muted: #6b6259;
  --rule: #ddd4c6;
  --link: #7a3b16;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1b18;
    --text: #ece6dc;
    --muted: #a99f92;
    --rule: #403a33;
    --link: #e3a77c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 19px/1.65 Georgia, "Times New Roman", serif;
}
main { max-width: 42rem; margin: 0 auto; padding: 1rem 16px 4rem; }
nav {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  padding: 0.6rem 16px; text-align: center;
  font: 16px/1.4 -apple-system, "Segoe UI", sans-serif;
}
nav a { margin: 0 0.6rem; color: var(--link); text-decoration: none; }
h1 { font-size: 1.9rem; line-height: 1.25; margin-top: 1.5rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin-top: 2.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
h3 { font-size: 1.15rem; margin-top: 2rem; }
a { color: var(--link); }
img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto 0.4rem; border: 1px solid var(--rule); }
figcaption, .caption { color: var(--muted); font-size: 0.85rem; text-align: center; margin-bottom: 1.5rem; }
figure { margin: 0; }
table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.85rem; margin: 1.5rem 0; }
th, td { border: 1px solid var(--rule); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }