:root { color-scheme: light dark; font: 17px/1.65 system-ui, sans-serif; color: #17251f; background: #f6f8f5; }
* { box-sizing: border-box; }
body { max-width: 900px; margin: auto; padding: 32px 24px; }
a { color: #166941; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid #16b674; outline-offset: 4px; }
nav, footer { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
nav { justify-content: space-between; border-bottom: 1px solid #d9e2db; padding-bottom: 20px; }
.brand { color: inherit; font-size: 22px; font-weight: 750; text-decoration: none; }
h1 { font-size: clamp(32px, 7vw, 52px); line-height: 1.12; letter-spacing: -.035em; margin: 48px 0 20px; }
h2 { font-size: 23px; line-height: 1.3; margin-top: 36px; }
p, li { max-width: 74ch; }
.lead { font-size: 21px; color: #465a4d; }
.note { padding: 18px 22px; background: #e5f2e9; border-left: 4px solid #16804b; border-radius: 4px; }
footer { margin-top: 48px; border-top: 1px solid #d9e2db; padding-top: 20px; font-size: 14px; }
@media (prefers-color-scheme: dark) { :root { color: #e5ece6; background: #142019; } a { color: #7ed8a6; } .lead { color: #bdcdbf; } .note { background: #1e3527; } nav, footer { border-color: #3d5143; } }