/* ============================================================
   IJI — base layer: reset, document rhythm, utilities.
   Component rules live in components.css.
   Class naming follows the UI spec component library (§2): c-<component>,
   utilities are prefixed u-.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: var(--lh-heading); color: var(--color-heading); }
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.35; color: var(--color-heading); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-block: 0 var(--space-4); max-width: var(--measure-text); }
p:last-child { margin-block-end: 0; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; }
figure { margin: 0; }

/* Accessible focus — never removed, only restyled (WCAG 2.2 AA, §5.2). */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Skip link */
.c-skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--color-surface); color: var(--color-text);
  padding: 12px 20px; font-size: var(--fs-small); font-weight: 600;
}
.c-skip-link:focus { inset-inline-start: 0; }

/* ---------- Layout utilities ---------- */
.u-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.u-section { padding-block: var(--section-y); }
.u-section--alt { background: var(--color-bg-alt); }
.u-section--warm { background: var(--color-surface-warm); }
.u-section--dark { background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.u-section--brand { background: var(--color-surface-brand); color: var(--color-text-on-dark); }
.u-section--dark :is(h1,h2,h3,h4),
.u-section--brand :is(h1,h2,h3,h4) { color: var(--color-text-on-dark); }
.u-measure { max-width: var(--measure-text); }
.u-narrow { max-width: 820px; }
.u-center { margin-inline: auto; text-align: center; }
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Typographic utilities ---------- */
.c-eyebrow {
  display: block; margin-block-end: 16px;
  font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-text-muted);
}
.c-eyebrow--on-dark { color: var(--color-text-on-dark); opacity: .82; }
.c-lead { font-size: var(--fs-lead); }
.c-small { font-size: var(--fs-small); }
.c-muted { color: var(--color-text-muted); }
.c-source {
  margin-block-start: var(--space-5);
  font-size: var(--fs-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; opacity: .6;
}

/* ---------- Section head ---------- */
.c-section-head { margin-block-end: 40px; }
.c-section-head h2 { font-size: var(--fs-h2); }
.c-section-head .c-lead { margin-block-start: 12px; color: var(--color-text-muted); }

/* ---------- Scroll reveal (§6.7 — opacity + 16px translate, once) ---------- */
[data-anim] { opacity: 0; transform: translateY(16px); }
[data-anim].is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.no-js [data-anim] { opacity: 1; transform: none; }

/* Full-bleed sections break out with vw maths; clip absorbs the scrollbar
   remainder without creating a scroll container (which would kill sticky). */
html { overflow-x: clip; }