:root{--bg:#fffaf0;--ink:#1b2b34;--muted:#4a5c66;--sea:#0b6e8a;--sea-dark:#08516a;--sand:#f6e7c8;--foam:#e6f4f7;--coral:#c2410c;--line:#e3d5b5}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65}
a{color:var(--sea-dark);text-decoration:underline}
a:hover,a:focus{color:var(--coral)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
header.site{background:var(--sea);color:#fff}
header.site .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between;padding:.9rem 1rem}
header.site a{color:#fff}
.brand{font-weight:700;font-size:1.15rem;text-decoration:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1rem}
nav a{font-size:.95rem}
.wrap{max-width:46rem;margin:0 auto;padding:0 1rem}
main{padding:1.5rem 0 2rem}
h1{font-size:2rem;line-height:1.2;margin:.5rem 0 1rem;color:var(--sea-dark)}
h2{font-size:1.4rem;margin:2rem 0 .5rem;color:var(--sea-dark)}
.crumbs{font-size:.9rem;color:var(--muted)}
.lede{font-size:1.15rem;color:var(--muted)}
.box{background:var(--foam);border:2px solid var(--sea);border-radius:12px;padding:1rem 1.25rem;margin:2rem 0}
.box h2{margin-top:0}
.btn{display:inline-block;background:var(--coral);color:#fff;padding:.7rem 1.2rem;border-radius:8px;font-weight:700;text-decoration:none}
.btn:hover,.btn:focus{background:#9a3412;color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;list-style:none;padding:0;margin:1.5rem 0}
.cards li{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:1rem}
.cards h3{margin:0 0 .4rem;font-size:1.1rem}
.cards p{margin:0;font-size:.95rem}
.note{background:var(--sand);border-left:4px solid var(--coral);padding:.75rem 1rem;border-radius:6px}
footer{background:var(--sand);border-top:1px solid var(--line);padding:1.5rem 0;font-size:.95rem;color:var(--muted);text-align:center}
@media(max-width:480px){h1{font-size:1.65rem}}