/* Base: font, reset, element defaults and the few global utilities. Nothing here is a component. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; }
img, svg, canvas { max-width: 100%; }
a { color: var(--teal-ink); }

h1 { margin: 0 0 var(--space-4); max-width: 26ch; font: 800 clamp(2.2rem, 4.8vw, 4rem)/1.04 var(--font); letter-spacing: -.03em; }
h2 { margin: 0 0 18px; max-width: 22ch; font: 800 clamp(1.8rem, 3.8vw, 2.8rem)/1.08 var(--font); letter-spacing: -.025em; }

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

/* intro paragraph under a page heading; a page can set --lead-gap on the container to tighten it */
.lead { max-width: 58ch; margin: 0 0 var(--lead-gap, var(--space-6)); color: var(--muted); font-size: 1.1rem; }

/* page container */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }

/* visually hidden but still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Respect reduced motion everywhere. This is the one place !important is allowed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}