:root {
  color-scheme: light dark;
  --paper: #f5f1e8;
  --ink: #171612;
  --muted: #6f6b62;
  --line: #d8d1c3;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.65;
}

main {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

h1, h2 { line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); margin: 0 0 16px; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; }
p, li { max-width: 68ch; }
a { color: inherit; text-underline-offset: 0.18em; }
.meta { color: var(--muted); }
.language { display: flex; gap: 20px; margin: 28px 0 40px; }
.language a { font-family: ui-monospace, monospace; letter-spacing: 0.08em; }
.choice { border-top: 1px solid var(--line); padding: 24px 0; }
footer { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; }

@media (prefers-color-scheme: dark) {
  :root { --paper: #11110f; --ink: #f1ede4; --muted: #aaa398; --line: #34322d; }
}