/* base.css — reset, global typography, layout primitives.
   Loaded on every page, after variables.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
::selection { background: var(--indigo); color: var(--paper); }
a { color: var(--signal-blue); text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(36px, 6vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 17px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
  margin: 0 0 var(--space-2);
}
.lede {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 0 var(--space-4);
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
section { padding: var(--space-7) 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}