:root { color-scheme: light dark; --page: #f5f8f4; --ink: #1e3025; --muted: #495d50; --accent: #1f6748; --rule: #d1dfd4; }
@media (prefers-color-scheme: dark) {
  :root { --page: #151d18; --ink: #ecf5ed; --muted: #becdc2; --accent: #a9e2bf; --rule: #3e5144; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 1rem/1.75 system-ui, sans-serif; }
header { border-bottom: 1px solid var(--rule); }
nav, main, footer { max-width: 47rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem); }
nav { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem 1.5rem; flex-wrap: wrap; }
nav div { display: flex; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 750; color: var(--ink); }
main { padding-block: clamp(2rem, 7vw, 4.25rem); }
h1, h2 { line-height: 1.32; }
h1 { margin: 0 0 1.35rem; font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin: 1.55rem 0 .45rem; font-size: 1.18rem; }
p { margin: .4rem 0 1rem; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: .25rem; }
footer { border-top: 1px solid var(--rule); color: var(--muted); }