/* ===========================================================================
   base.css — reset, typography, layout primitives, utilities
   (reorganized from the prototype's styles.css — visuals unchanged)
   =========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #1F1F1F; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type utilities ---------- */
.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red);
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 18px; }

/* ---------- Icon wrapper (sprite <svg><use>) ---------- */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: currentColor; }
.icon svg { display: block; width: 22px; height: 22px; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  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: 12px; top: -48px; z-index: 200;
  background: var(--red); color: #fff; font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Visible focus for keyboard users on every interactive element */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(155,45,45,0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll-reveal initial state. Elements with data-animate start hidden; the JS
   engine in main.js animates them in (Web Animations API) once, when they enter
   the viewport, then adds .is-revealed so the element hands back to its own CSS.
   The :not() guard keeps this winning the cascade over per-element opacity. */
[data-animate]:not(.is-revealed) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1 !important; } /* no motion → always visible */
}