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

html {
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
  overflow-x: clip;
  /* scrollbar-width intentionally omitted — "thin" fails SC 2.5.8 (24px min target size)
     once scrollbars are author-customised. Browser default width preserves the
     user-agent exception. scrollbar-color alone does not forfeit that exception. */
  scrollbar-color: color-mix(in srgb, var(--color-text) 60%, transparent) transparent;
  /* Always reserve the scrollbar gutter so content width is constant whether
     a scrollbar is visible or not. Prevents layout shift on classic-scrollbar systems.
     Does not affect scrollbar dimensions — SC 2.5.8 compliance unaffected. */
  scrollbar-gutter: stable;
}

body {
  min-height: 100svh;
  line-height: var(--rhythm);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1 {
  line-height: var(--leading-display);
}

h2 {
  line-height: var(--rhythm-xl);
}

h3 {
  line-height: var(--rhythm-lg);
}

h4, h5, h6 {
  line-height: var(--rhythm);
}

p {}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

a {
  color: inherit;
}

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