:root {
  --canvas: #F4F1EA;
  --panel: #FBF9F4;
  --ink: #2B2823;
  --ink-soft: #6E675C;
  --rule: #DDD6C7;
  --accent: #4E7A5E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1A1815;
    --panel: #232019;
    --ink: #EDE8DC;
    --ink-soft: #A39B8C;
    --rule: #3A352C;
    --accent: #7FA98C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 44rem; margin: 0 auto; }

header {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}

.subtitle { color: var(--ink-soft); font-size: 15px; margin: 0; }

h2 {
  font-size: 19px;
  margin: 36px 0 12px;
  font-weight: 600;
}

p, li { color: var(--ink); }
li { margin-bottom: 8px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 20px 0;
}

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--ink-soft); font-weight: 600; }

a { color: var(--accent); }

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
}

nav { margin-top: 14px; font-size: 15px; }
nav a { margin-right: 18px; }