/* ============================================================
   USIDM — Base · FROZEN (Phase 2)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--s-4));
}

body {
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* ---- HEADINGS ---- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  color: var(--navy-900);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: var(--fw-semibold); letter-spacing: 0; }

/* ---- TEXT ----
   Reading measure is opt-in via .prose / .copy so it never
   constrains paragraphs inside cards, forms, footers or diagrams. */
.prose p, .copy p { max-width: var(--measure); }

/* Reading measure, selectively widened coverage (audit P1-C): long-form
   paragraphs cap at the token measure even outside an explicit .prose
   wrapper — institutional pages were rendering 86–99 characters per line.
   Paragraphs only: tables, cards, heroes and process layouts keep their
   width. (V2 pages carry their own tighter .lead measure, which wins.) */
.lead { max-width: var(--measure); }
.split p, .container--narrow p { max-width: var(--measure); }
.prose p + p, .copy p + p { margin-top: var(--s-4); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: 60ch; }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--text-tertiary); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--crimson-800);
  display: block;
  margin-bottom: var(--s-3);
}

/* ---- LINKS ----
   Underline with offset, never colour alone — colour-only
   links fail WCAG 1.4.1. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--link-underline);
  transition: text-decoration-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* ---- FOCUS ----
   :focus-visible only. The browser default for non-visible focus
   is left alone rather than globally suppressed. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -100px;
  background: var(--surface-inverse); color: var(--text-on-dark);
  padding: var(--s-3) var(--s-5); z-index: 100; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ---- LAYOUT ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

.section--dark { background: var(--surface-inverse); color: var(--text-on-dark-muted); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section--dark .eyebrow { color: var(--gold-400); }
.section--dark .lead { color: var(--text-on-dark-muted); }
.section--dark :focus-visible { outline: var(--focus-ring-dark); }

.section--crimson { background: var(--surface-accent); color: var(--text-on-crimson); }
.section--crimson h2, .section--crimson h3 { color: var(--text-on-dark); }
.section--crimson .eyebrow { color: var(--gold-400); }
.section--crimson .lead { color: var(--text-on-crimson); }
.section--crimson :focus-visible { outline: var(--focus-ring-dark); }

/* Editorial links on dark grounds only. Buttons control their own
   foreground and are untouched by these rules. */
.section--dark .prose a, .section--dark p a, .section--dark .text-link,
.section--crimson .prose a, .section--crimson p a, .section--crimson .text-link {
  color: var(--link-on-dark);
  text-decoration-color: var(--link-underline-dark);
}

.grid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gap); }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

hr, .rule { border: 0; border-top: var(--border-hairline) solid var(--border-default); margin-block: var(--s-6); }
.rule--gold { border-top: var(--border-rule) solid var(--gold-600); width: 56px; margin-inline: 0; }

.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;
}