/* Reset + base element styles */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  overflow-x: hidden;
  /* Inherited by every text element site-wide (headings repeat it
     explicitly too, since inheritance alone is easy to accidentally
     break with an unrelated later rule) — the actual, universal
     guarantee that no single word, in any element, at any size, in any
     container, can force horizontal overflow. See base.css h1–h4 rule
     and CONTENT-GUIDE.md's "Keeping the site responsive" section for
     the other two overflow root-causes (grid tracks, tables) this
     doesn't cover. */
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  /* Root-cause fix, not a patch for one heading: h1–h4 all share the
     same size scale regardless of how narrow the container they end up
     in is (a card, a nested column, a mobile viewport). Normal wrapping
     only breaks at spaces — if a single word is wider than the
     container at the heading's font size, the browser lets it overflow
     rather than shrink it. overflow-wrap lets it break mid-word only
     when there's truly no other way to fit, which is what actually
     guarantees no heading can force horizontal overflow, independent of
     which page, container, or font size is involved. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-4xl);
}
h2 {
  font-size: var(--fs-3xl);
}
h3 {
  font-size: var(--fs-xl);
}
h4 {
  font-size: var(--fs-md);
}

p {
  color: var(--text-muted);
  text-wrap: pretty;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

fieldset {
  border: none;
  padding: 0;
}

label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

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

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-md);
  z-index: 1000;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-md);
}