* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--body); font-weight:var(--regular); line-height:var(--leading); }
a { color:inherit; text-underline-offset:.25em; }
button { font:inherit; }
:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,h4 { font-family:var(--font-heading); }
h1 { font-size:var(--title); font-weight:var(--medium); line-height:var(--heading-leading); letter-spacing:var(--tracking); }
h2 { font-size:var(--h2); line-height:1.2; font-weight:var(--medium); }
h3 { font-size:var(--h3); font-weight:var(--medium); line-height:1.2; }
.wrap { width:min(var(--max), calc(100% - 2 * var(--space-3))); margin-inline:auto; }
.skip { position:absolute; top:-8rem; left:var(--space-2); padding:var(--space-2); background:var(--surface); z-index:10; }
.skip:focus { top:var(--space-2); }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

[hidden] { display:none !important; }