/* base.css */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,6vw,3.25rem)}
h2{font-size:clamp(1.7rem,4vw,2.4rem)}
h3{font-size:clamp(1.2rem,3vw,1.5rem)}
p{max-width:60ch}
a{color:var(--c-ink);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--s-4)}
.section{padding-block:var(--s-7)}
.hr{height:1px;background:var(--c-line);border:0}
/* #1 anchored sections clear the sticky header when navigated to */
section[id]{scroll-margin-top:84px}
/* #4 tighten vertical rhythm on mobile (desktop keeps its airier --s-7) */
@media(max-width:640px){ .section{padding-block:2.5rem} }