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

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

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-light);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 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. clip prevents the same sideways
     overflow without creating a scroll container. Inherited from
     the source, where it quietly broke the contact page's sticky
     heading too. */
  overflow-x: clip;
}

main { background: var(--paper); }

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

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

section { scroll-margin-top: var(--sp-80); }

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

.skip-link {
  position: absolute;
  left: var(--sp-24);
  top: 0;
  z-index: 1000;
  transform: translateY(-140%);
  padding: var(--sp-14) var(--sp-24);
  background: var(--paper);
  color: var(--accent);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-meta);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(var(--sp-12));
  outline: var(--sp-4) solid var(--accent);
  outline-offset: var(--sp-4);
}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: calc(var(--border) * 3) solid var(--accent);
  outline-offset: calc(var(--border) * 3);
  border-radius: var(--radius-sm);
}

/* .hero is deliberately absent from this list. It used to be an
   accent field and is now the pale FX/FACET one, so a white ring
   on it would be no ring at all. It takes the --accent ring
   above, like every other element on paper. The inner pages'
   .page-hero--accent is still navy and still belongs here. */
:where(.site-nav, .page-hero--accent, .site-footer, .sticky-call)
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--accent-ink);
}

/* ─ hit-area expansion ──────────────────────────────────────
   Grows a small control to --tap-min without touching layout.
   Applied only where the neighbouring pitch leaves room, so
   two targets never overlap. See md/README.md.
   ────────────────────────────────────────────────────────── */

.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) {
  html,
  body { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}