:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  background: #f7f8f4;
  color: #202c28;
}
body { max-width: 45rem; margin: auto; padding: 0 1.25rem; line-height: 1.85; }
header, footer { padding: 1.2rem 0; color: #41544a; }
header { border-bottom: 1px solid #c8d3c9; }
footer { border-top: 1px solid #c8d3c9; font-size: .875rem; }
nav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
a { color: #155640; text-underline-offset: .22em; }
a[aria-current="page"] { font-weight: 700; }
a:focus-visible { outline: 2px solid #155640; outline-offset: 4px; }
main { padding: 2.4rem 0; overflow-wrap: anywhere; }
.draft { color: #41544a; font-size: .875rem; font-weight: 700; }
h1 { font-size: clamp(1.65rem, 5vw, 2.8rem); line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; line-height: 1.5; margin-bottom: .5rem; }
section { margin-top: 1.9rem; }
section p { margin-top: .35rem; }
.intro { font-size: 1.1rem; }
code { font-size: .95em; }