:root{--ink:#1c2b33;--sea:#0e6b7a;--sand:#f6f1e7}
*{box-sizing:border-box}
body{margin:0;font:18px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff}
.hero{background:var(--sea);color:#fff;padding:64px 20px 40px;text-align:center}
.hero h1{margin:0 0 12px;font-size:clamp(2rem,6vw,3.2rem)}
.hero p{max-width:40rem;margin:0 auto 24px}
nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
nav a{color:#fff;border:1px solid #fff;border-radius:999px;padding:4px 14px;text-decoration:none;font-size:.9rem}
nav a:hover,nav a:focus{background:#fff;color:var(--sea)}
main{max-width:64rem;margin:0 auto;padding:16px 20px}
section{padding:32px 0 8px}
h2{margin:0;font-size:1.6rem}
.lead{margin:4px 0 16px;color:#4a5a63}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:block;height:100%;padding:16px;background:var(--sand);border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35}
.card:hover,.card:focus{outline:2px solid var(--sea)}
footer{text-align:center;padding:40px 20px;font-size:.9rem}
footer a{color:var(--sea)}
/* content pages */
.hero.slim{padding:40px 20px 28px}
.hero.slim h1{font-size:clamp(1.6rem,5vw,2.4rem)}
.hero.slim p{margin-bottom:16px}
main.prose{max-width:46rem}
main.prose h2{margin:32px 0 8px}
main.prose h3{margin:20px 0 4px;font-size:1.15rem}
main.prose a{color:var(--sea)}
main.prose a.card{color:var(--ink)}
main.prose ul{padding-left:1.2rem}
main.prose ul.cards{padding-left:0;margin-top:12px}
.note{background:var(--sand);border-left:4px solid var(--sea);padding:12px 16px;border-radius:6px;margin:16px 0}
.sources{font-size:.9rem;color:#4a5a63}
.sources h2{font-size:1.2rem}