:root{--fg:#111;--bg:#fff;--muted:#666;--ring:#000}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:980px;margin:auto;padding:24px}
.nav{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 16px}
a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--fg)}
h1{font-size:clamp(28px,4vw,40px);margin:.25em 0 .4em}
h2{font-size:clamp(20px,3vw,28px);margin:1.2em 0 .5em}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted)}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
figure{margin:0}
img{width:100%;height:auto;border-radius:12px;display:block}
.btn{display:inline-block;padding:.7rem 1rem;border:1px solid var(--fg);border-radius:.6rem}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
section{scroll-margin-top:80px}