:root {
  color-scheme: light dark;
  --page: #f6f1e7;
  --ink: #32291f;
  --link: #704224;
  --link-hover: #392013;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.65;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1b1714;
    --ink: #e4dacb;
    --link: #d8a77c;
    --link-hover: #f2cfab;
  }
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 3rem, 46rem); margin-inline: auto; padding-block: 3rem; }
footer { width: min(100% - 3rem, 46rem); margin-inline: auto; padding-bottom: 2rem; font-size: 0.85rem; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; }
h2 { margin: 2rem 0 1rem; font-size: 1.25rem; line-height: 1.35; }
p { margin-block: 1rem; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }