:root {
  color-scheme: light dark;
  --canvas: #f5f2e9;
  --surface: #fffdf7;
  --ink: #172824;
  --muted: #586964;
  --han: #165d82;
  --jade: #26745d;
  --line: #d6d9cf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62;
}

header, main, footer { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
header { padding: 56px 0 24px; }
main { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 5vw, 48px); box-shadow: 0 18px 60px rgb(23 40 36 / 8%); }
footer { padding: 28px 0 56px; color: var(--muted); font-size: .9rem; }
h1 { font-size: clamp(2.25rem, 8vw, 4.2rem); line-height: 1; margin: 0 0 14px; letter-spacing: -.045em; }
h2 { margin-top: 2rem; line-height: 1.2; }
p, li { color: var(--muted); }
a { color: var(--han); font-weight: 650; }
.brand { color: var(--jade); font-weight: 750; letter-spacing: .02em; }
.lede { font-size: 1.18rem; max-width: 38rem; }
.nav { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; }
.nav a { text-decoration: none; }
.callout { border-left: 4px solid var(--jade); padding: 4px 0 4px 18px; }
.meta { font-size: .88rem; }

@media (prefers-color-scheme: dark) {
  :root { --canvas: #0d1715; --surface: #14221f; --ink: #f2f3eb; --muted: #bdc9c4; --han: #70bce8; --jade: #72c9aa; --line: #31423d; }
}