:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; color: #18251d; background: #f7f9f5; }
a { color: #215e3a; text-underline-offset: 3px; }
a:hover { color: #123d25; }
.skip { position: absolute; left: -10000px; top: auto; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem; background: white; }
header { border-bottom: 1px solid #dbe5da; background: #fff; }
.nav { max-width: 920px; margin: auto; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { color: #1f4b31; font-size: 1.1rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
nav a { font-size: .94rem; }
main { max-width: 760px; margin: 0 auto; padding: 3.25rem 1.5rem 5rem; }
.eyebrow { margin: 0 0 .5rem; color: #49745a; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { margin: 2.5rem 0 .7rem; font-size: 1.35rem; line-height: 1.3; }
p, li { font-size: 1rem; }
li { margin: .4rem 0; }
.intro { color: #43534a; font-size: 1.15rem; max-width: 65ch; }
.card { margin: 2rem 0; padding: 1.35rem 1.5rem; background: #eaf2e9; border: 1px solid #cfdfcd; border-radius: 14px; }
.card h2 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.grid .card { margin: 0; }
.meta { color: #56655b; font-size: .9rem; }
.button { display: inline-block; padding: .7rem 1rem; border-radius: 9px; background: #205b38; color: white; font-weight: 650; text-decoration: none; }
.button:hover { color: white; background: #154229; }
footer { border-top: 1px solid #dbe5da; padding: 1.4rem 1.5rem; text-align: center; color: #56655b; font-size: .86rem; }
footer a { margin: 0 .5rem; }
@media (prefers-color-scheme: dark) {
  body { color: #e3ece3; background: #121b15; }
  header { background: #17231b; border-color: #314235; }
  .brand, a { color: #a4dbb2; }
  a:hover { color: #d6f0db; }
  .eyebrow { color: #9ccb9f; }
  .intro, .meta, footer { color: #bdcdbf; }
  .card { background: #1d3022; border-color: #3b5a42; }
  footer { border-color: #314235; }
  .skip:focus { background: #17231b; }
}