/* ==========================================================================
   Anti — Reset, base elements and layout primitives
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + var(--space-6));
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-synthesis-weight: none;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { height: auto; }

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

button { background: none; border: 0; }

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

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

p { text-wrap: pretty; }

/* --- Headings ------------------------------------------------------------
   Sizes come from the type scale. Heading levels are chosen for document
   structure; if a level needs a different size, use a modifier class rather
   than reaching for the wrong tag. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-extra);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-extra);
  line-height: 1.14;
  letter-spacing: var(--tracking-display);
}

h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

/* --- Focus ---------------------------------------------------------------
   One visible, high-contrast focus ring everywhere. Never removed. */

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

.is-inverse :focus-visible,
.is-inverse:focus-visible {
  outline-color: var(--color-accent);
}

/* --- Selection ----------------------------------------------------------- */

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

/* --- Layout primitives --------------------------------------------------- */

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}

.section__lede {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 30rem;
}

.stack { display: grid; gap: var(--space-4); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* --- Accessibility utilities --------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* --- Motion preferences ---------------------------------------------------
   Honour the OS setting: no transforms, no scroll animation, no counters. */

@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;
  }
}

/* --- Icon sprite ----------------------------------------------------------
   The <symbol> definitions live in the document but must never render or
   take up space. Clip-based hiding keeps <use> references reliable. */

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}