*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/*
  overflow-x: hidden lives on body only, never on html. iOS Safari has a
  long-standing bug where overflow-hidden on the <html> element breaks the
  containing block for position:fixed descendants (like the mobile nav
  drawer), causing them to render clipped/mispositioned instead of sliding
  in. body-level clipping is sufficient and doesn't carry that risk.
*/
body { min-height: 100vh; overflow-x: hidden; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchored sections clear the sticky header + any sticky sub-nav. */
[id] { scroll-margin-top: calc(var(--header-h, 72px) + var(--subnav-h, 0px) + var(--space-8)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}