/* ==========================================================================
   Base — reset, document defaults, typography, accessibility primitives.
   Mobile-first: unqualified rules target small screens; layout.css adds
   min-width media queries for larger viewports.
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
* { margin:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .25s ease, color .25s ease;
}

img, svg{ display:block; max-width:100%; }
img{ height:auto; }

h1, h2, h3, h4{
  font-family:var(--font-display);
  color:var(--text-primary);
  font-weight:700;
  line-height:1.15;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(30px, 6vw, 44px); }
h2{ font-size:clamp(24px, 4vw, 30px); }
h3{ font-size:17px; font-weight:600; }
h4{ font-size:15px; font-weight:600; }

p{ max-width:70ch; }
ul, ol{ padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent-hover); }

button{
  font-family:inherit;
  background:none;
  border:none;
  cursor:pointer;
  color:inherit;
}

::selection{ background:var(--accent-tint-strong); color:var(--text-primary); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-hover);
  font-weight:500;
  margin-bottom:var(--space-2);
}

.lede{
  color:var(--text-muted);
  font-size:16.5px;
  max-width:56ch;
}

.sr-only{
  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:absolute;
  left:var(--space-4);
  top:-100px;
  background:var(--brand-navy);
  color:#fff;
  padding:12px 20px;
  border-radius:var(--radius-s);
  font-size:14px;
  font-weight:600;
  z-index:200;
  transition:top .2s ease;
}
.skip-link:focus{ top:var(--space-4); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
