* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; font-size: var(--font-base); line-height: var(--lh-relaxed); color: #203a35; background: #fffefa; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 3px solid #1d7461; outline-offset: 5px; }
section, article { scroll-margin-top: 30px; }
.container { width: min(1180px, 100%); margin: 0 auto; padding: var(--sp-lg); }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; background: #fff; padding: var(--sp-sm); }
.skip-link:focus { top: 16px; }
.site-header { background: #fff; border-bottom: 1px solid #dfe6e0; }
.site-header__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-md); }
.brand img { width: 220px; height: auto; max-height: 60px; object-fit: contain; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-lg); font-size: var(--font-sm); font-weight: var(--fw-strong); }
.site-nav a { padding: var(--sp-xs) 0; }
.site-nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero { background: #edf2e9; }
.hero__inner { display: grid; gap: var(--sp-2xl); padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.eyebrow { font-size: var(--font-xs); font-weight: var(--fw-strong); letter-spacing: .1em; line-height: var(--lh-normal); text-transform: uppercase; color: #406859; }
h1 { font-size: var(--font-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -.035em; margin-top: var(--sp-md); }
.hero__description { margin-top: var(--sp-lg); margin-bottom: var(--sp-xl); max-width: 490px; color: #4c6259; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); background: #205646; color: #fff; padding: var(--sp-md) var(--sp-xl); border-radius: var(--radius-full); font-weight: var(--fw-strong); }
.button:hover { background: #153d32; }
.hero__feature { overflow: hidden; background: #fffefa; border-radius: var(--radius-lg); box-shadow: 0 10px 35px #203a3510; }
.hero__feature > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero__caption { padding: var(--sp-xl); }
h2 { font-size: var(--font-3xl); font-weight: var(--fw-strong); line-height: var(--lh-snug); letter-spacing: -.025em; }
.hero__caption h2 { margin-top: var(--sp-sm); margin-bottom: var(--sp-md); }
.hero__caption > span:last-child { font-size: var(--font-sm); font-weight: var(--fw-strong); }
.topics, .articles { padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.topics__grid, .articles__grid { display: grid; gap: var(--sp-lg); margin-top: var(--sp-xl); }
.topics__grid > a { display: grid; grid-template-columns: 1fr auto; padding: var(--sp-xl); border: 1px solid #d7e2d8; border-radius: var(--radius-md); background: #f6f7f0; }
.topics__number { grid-column: 1 / -1; color: #678075; font-size: var(--font-sm); margin-bottom: var(--sp-sm); }
h3 { font-size: var(--font-xl); line-height: var(--lh-snug); font-weight: var(--fw-strong); }
.topics__grid p { grid-column: 1; font-size: var(--font-sm); color: #52675c; margin-top: var(--sp-sm); }
.topics__grid > a > span:last-child { grid-column: 2; grid-row: 2; }
.topics__grid > a:hover { border-color: #205646; }
.section-heading { display: grid; gap: var(--sp-md); }
.section-heading h2 { margin-top: var(--sp-sm); }
.section-heading > p { font-size: var(--font-sm); color: #52675c; }
.article-card { border: 1px solid #dfe6e0; border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.article-card > a { display: flex; height: 100%; flex-direction: column; }
.article-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-xl); }
.article-card h3 { margin-top: var(--sp-md); margin-bottom: var(--sp-sm); }
.article-card__body > p:not(.eyebrow) { color: #52675c; font-size: var(--font-sm); margin-bottom: var(--sp-lg); }
.article-card__link { margin-top: auto; font-size: var(--font-sm); font-weight: var(--fw-strong); }
.article-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.about { background: #edf2e9; margin-top: var(--sp-xl); }
.about__inner { display: grid; gap: var(--sp-xl); padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.about h2 { margin-top: var(--sp-md); max-width: 420px; }
.about__note { margin-top: var(--sp-lg); font-size: var(--font-sm); color: #52675c; }
.site-footer { background: #203a35; color: #fff; font-size: var(--font-sm); }
.site-footer__inner, .site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-lg); justify-content: space-between; }
.site-footer__inner { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
@media (min-width: 768px) {
    .hero__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-3xl); }
    .topics__grid, .articles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .section-heading { display: flex; align-items: end; justify-content: space-between; }
    .about__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}