*{margin:0;padding:0;box-sizing:border-box;}

/* scrollbar-gutter:stable reserves the scrollbar's width permanently,
     even while it's hidden (see body.nav-open below). Without this,
     opening/closing the mobile nav — which toggles overflow:hidden on
     <body> — makes the page's content area a scrollbar's-width wider
     or narrower for a frame, which reads as a little horizontal
     "bump" the instant a nav link is tapped. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;}

@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
}

body{background:var(--bg);color:var(--body);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

img{display:block;max-width:100%;height:auto;}

a{color:inherit;text-decoration:none;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:1400px;margin:0 auto;padding:0 48px;}

@media (max-width:980px){
.wrap{padding-left:24px;padding-right:24px;}
}