:root {
  --oat: #f6efe3;
  --paper: #fffdf8;
  --ink: #26302e;
  --ink-soft: #5b6664;
  --teal: #1f6f6b;
  --teal-wash: #dfeeec;
  --rule: #e4dccb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --oat: #1b1f1e;
    --paper: #232827;
    --ink: #ece7dc;
    --ink-soft: #b4b0a6;
    --teal: #7cc7c0;
    --teal-wash: #1f3433;
    --rule: #343b39;
  }
}
* { box-sizing: border-box; }
html { background: var(--oat); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--oat);
  font: 17px/1.55 -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 760px; margin: 0 auto; padding: 20px 16px 8px;
}
.brand {
  font-family: "New York", "Iowan Old Style", Georgia, serif;
  font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
}
.brand span { color: var(--teal); }
.masthead nav a { color: var(--teal); text-decoration: none; margin-left: 18px; font-weight: 600; }
.masthead nav a:hover { text-decoration: underline; }
.page {
  max-width: 760px; margin: 12px auto 40px; padding: 28px 24px 32px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
}
.page h1 {
  font-family: "New York", "Iowan Old Style", Georgia, serif;
  font-size: 34px; line-height: 1.15; margin: 0 0 8px;
}
.page h2 {
  font-family: "New York", "Iowan Old Style", Georgia, serif;
  font-size: 22px; margin: 28px 0 8px;
}
.page p, .page li { color: var(--ink); }
.page .meta { color: var(--ink-soft); font-size: 15px; }
.page a { color: var(--teal); }
.callout {
  background: var(--teal-wash); border-left: 4px solid var(--teal);
  padding: 12px 16px; border-radius: 8px;
}
.hero h1 { font-size: 36px; }
.colophon {
  max-width: 760px; margin: 0 auto; padding: 0 16px 40px;
  color: var(--ink-soft); font-size: 14px;
}
.colophon a { color: var(--teal); }
@media (max-width: 480px) {
  .page { margin: 8px 16px 32px; padding: 20px 16px 24px; }
  .page h1 { font-size: 28px; }
  .hero h1 { font-size: 28px; }
}