/* ==========================================================
   ht-acc / base.css
   Reset, document, accessibility floor.
   Reads only from tokens.css.
   ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;

  /* clip, not hidden. overflow-x: hidden forces overflow-y to
     auto, which makes html and body scroll containers, and
     position: sticky then resolves against them instead of the
     viewport and silently stops working. The site header is
     sticky, so this matters. clip prevents the same sideways
     overflow without creating a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  text-wrap: pretty;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
dd { margin: 0; }

img,
svg { display: block; max-inline-size: 100%; }

/* Every link on this site is either classed or sits in prose.
   Prose links take --accent-strong rather than --accent,
   because --accent is 4.23:1 on paper and fails AA for text.
   --accent stays what it is for non-text fills. */
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--text-primary); }

button { font: inherit; color: inherit; }

/* Clears the sticky header so an in-page anchor does not land
   underneath it. The source had a sticky header and in-page
   anchors and no scroll margin, so every anchor arrived with
   its heading hidden behind the bar. */
[id] { scroll-margin-block-start: var(--sticky-top); }

/* ─ skip link ───────────────────────────────────────────────
   Off-canvas until focused, so it never affects layout.
   ────────────────────────────────────────────────────────── */

.ds-skip {
  position: absolute;
  inset-inline-start: var(--sp-16);
  inset-block-start: calc(var(--sp-16) * -1);
  transform: translateY(-100%);
  z-index: var(--z-top);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-24);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-medium);
}

.ds-skip:focus-visible {
  inset-block-start: var(--sp-16);
  transform: none;
  color: var(--text-inverse);
}

/* ─ focus floor ─────────────────────────────────────────────
   Every interactive element gets a visible ring. Two rings,
   one for the paper field and one for the ink and accent
   fields, so the ring always carries contrast against what is
   behind it.
   ────────────────────────────────────────────────────────── */

:focus-visible {
  outline: var(--ring-w) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}

:where(.site-header.is-stuck, .stats, .cta, .footer, .nav-drawer, .tile--feature, .serve__card.is-active)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* ─ hit-area expansion ──────────────────────────────────────
   Grows a small control to --tap-min without touching layout.

   The nav capsule's links are 40px tall by design, which is
   under the 44px floor. Changing the height would grow the
   capsule and move the header, so the target is grown instead
   of the box. Applied only where the neighbouring pitch leaves
   room, so two targets never overlap.
   ────────────────────────────────────────────────────────── */

.tap { position: relative; }

.tap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tap-min);
  transform: translateY(-50%);
  min-width: var(--tap-min);
}

.tap-box { position: relative; }

.tap-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tap-min);
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

/* ─ reduced motion ────────────────────────────────────────── */

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