:root {
  color-scheme: light;
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: #132824;
  background: #f6f5ee;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #145d4e; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #b25c20; outline-offset: 4px; }
.wrap { width: min(69rem, calc(100% - 2rem)); margin-inline: auto; }
.top { background: #fffdf7; border-bottom: 1px solid #d5dcd0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; padding-block: .9rem; }
.brand { color: inherit; font-size: 1.45rem; font-weight: 800; text-decoration: none; letter-spacing: -.05em; }
.brand span { color: #b25c20; }
nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
nav a { font-size: .95rem; }
.skip { position: absolute; top: -5rem; left: 1rem; background: white; padding: .5rem; }
.skip:focus { top: .5rem; }
h1, h2 { line-height: 1.15; text-wrap: balance; }
h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 500; font-size: clamp(2.45rem, 7vw, 4.8rem); margin: 0; }
h2 { font-size: 1.4rem; margin: 0 0 .65rem; }
p { margin: 0; }
ul { padding-left: 1.25rem; margin: 0; }
li + li { margin-top: .45rem; }
.hero { padding: clamp(2rem, 6vw, 5rem); margin: 1.5rem 0; background: #17483d; color: #fffdf7; border-radius: 1.25rem; }
.hero h1 { max-width: 15ch; }
.hero p { max-width: 45ch; margin-top: 1rem; font-size: 1.15rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card, .resources { padding: 1.4rem; background: #fffdf7; border: 1px solid #d5dcd0; border-radius: 1rem; }
.article { max-width: 46rem; margin: clamp(2rem, 7vw, 5rem) auto; }
.article header { border-bottom: 1px solid #d5dcd0; padding-bottom: 1.5rem; }
.article h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin-top: .6rem; }
.article section { margin-top: 1.8rem; }
.intro { margin-top: .85rem; color: #425953; font-size: 1.15rem; }
.topic { font-weight: 700; }
.footer { margin-top: 2.5rem; padding-block: 1.2rem; border-top: 1px solid #d5dcd0; display: flex; gap: 1.25rem; }
@media (max-width: 39rem) { .grid { grid-template-columns: 1fr; } }