/* ==========================================================================
   NEXUS — Base styles
   Element defaults and typography. No component styling here.
   Rules: .design/DESIGN.md §3 (type), §19 (hover), §21 (accessibility)
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header (DESIGN.md §18) */
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings — sentence case, never uppercase (DESIGN.md §3) ------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semi);
  text-wrap: balance;
  color: var(--c-ink);
}

.t-display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--fw-light);
}
/* The site's single sanctioned uppercase heading — the homepage hero only
   (DESIGN.md §3, exception H8). Tracking returns to 0: capitals need the air
   that the sentence-case display size takes away. */
.t-display-xl--caps {
  text-transform: uppercase;
  letter-spacing: 0;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-light);
}
h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3, .t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
}
h4, .t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: 0;
  font-weight: var(--fw-medium);
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-5); }

/* The UA gives <figure> a 40px inline margin, which quietly insets full-bleed
   media and breaks the gutter system. Spacing is set by the layout, not the UA. */
figure { margin: 0; }
blockquote { margin: 0; }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  /* Inherits, so it stays legible inside a dark band. Never hard-code Ink on
     a class that can appear on an inverted surface. */
  color: inherit;
}
.t-body-sm { font-size: var(--fs-body-sm); line-height: 1.6; }
.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-steel);
}

/* The system's signature: sans, uppercase, wide tracking. The ONLY uppercase
   allowed alongside the mono spec key (DESIGN.md §3). */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--c-aluminium);
  margin: 0;
}
.t-label--blue { color: var(--c-blue); }

/* IBM Plex Mono is reserved for genuinely technical data (DESIGN.md §3) */
.t-spec-key {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-spec-key);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--c-aluminium);
}
.t-data {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.t-muted { color: var(--c-steel); }

/* --- Links — Ink text with a NEXUS Blue underline (DESIGN.md §13, §21) ---
   Blue is never the text colour at body size: #0089B9 is only 3.7:1 on
   Canvas. The underline carries the signal, the text keeps 17.5:1. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-state);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}

/* --- Focus (DESIGN.md §21) ----------------------------------------------
   #0089B9 on light (3.7:1 vs Canvas), #00A4E7 on dark (6.7:1 vs Ink). */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.band--ink :focus-visible,
.band--deep :focus-visible {
  outline-color: var(--c-blue-bright);
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-canvas);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--s-2);
}

/* --- Media (DESIGN.md §9) ------------------------------------------------ */
img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius); /* photographs are rectangles */
}

/* Inline technical strings must never force the page wider than the viewport
   (DESIGN.md §20 — the body never scrolls horizontally). */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.94em;
  overflow-wrap: anywhere;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--s-8) 0;
}

::selection {
  background: var(--c-blue-wash);
  color: var(--c-ink);
}

/* --- Forms (DESIGN.md §13, §21) ------------------------------------------ */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--c-surface);
  border: var(--hairline);
  border-radius: var(--radius-ui);
  padding: var(--s-3) var(--s-4);
  width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--c-blue);
}

/* --- Reduced motion (DESIGN.md §21, mandatory) --------------------------- */
@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;
  }
}

/* Visually hidden, still read aloud — used by split headings (DESIGN.md §17) */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}