:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.65; color: #25332f; background: #f6f5f0; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 52rem; padding: 0 1.5rem; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid #d2d8ce; }
header > a { font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 1.25rem; }
main { padding: 3.5rem 0; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.12; letter-spacing: -0.04em; max-width: 20ch; margin: 0.75rem 0 1.5rem; }
h2 { font-size: 1.25rem; line-height: 1.35; margin: 0 0 0.75rem; }
p { margin: 0 0 1rem; }
.eyebrow { color: #54665b; font-size: 0.85rem; letter-spacing: 0.07em; text-transform: uppercase; }
.lead { font-size: 1.18rem; max-width: 62ch; }
section { margin-top: 2.5rem; }
a { color: #146c55; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #146c55; outline-offset: 4px; border-radius: 2px; }
aside { margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: #e7ede4; border-left: 3px solid #146c55; }
aside p { margin: 0; }
footer { border-top: 1px solid #d2d8ce; padding: 1.5rem 0 2.5rem; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) {
  :root { color: #e6ede5; background: #19221e; }
  header, footer { border-color: #3b4941; }
  a { color: #a1dfc0; }
  a:focus-visible { outline-color: #a1dfc0; }
  .eyebrow { color: #afc0b3; }
  aside { background: #26352c; border-color: #a1dfc0; }
}