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

/* Components below set display:flex/grid, which would otherwise beat the
   [hidden] attribute's display:none and leave menus permanently open. */
[hidden] { display: none !important; }

html { scroll-behavior: auto; font-size: 16px; }

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--color-primary); }
nav a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--space-16) 0;
}

/* Utility */
.text-center { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus visible for keyboard users */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}