/* ==========================================================================
   BASE — reset, element typography, layout primitives, utilities.
   RETYPED AUG 13 2026 with the Archivo/Plex/Rajdhani system from
   design_handoff_full_system. Headings are Archivo at wdth 72 / wght 750,
   uppercase, set tight enough to lock up as a block.
   ========================================================================== */

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

:root {
  /* HOW HEAVY THE PAGE FEELS UNDER A MOUSE WHEEL. Read by js/scroll-weight.js,
     which damps wheel scrolling toward the position the browser would have
     jumped to. 0 is off and means genuinely native — at 0 the handler returns
     before it touches the event, so the page behaves exactly as it did before
     that file existed. 1 is the heaviest.

     It lives HERE rather than in css/spine-bg.css because it is a property of
     the whole site, not of the front page's background layer, and because
     spine-bg.css is loaded by index.html only. js/scroll-weight.js is currently
     also on index.html only — the rollout is one script tag per page once the
     number is settled, with nothing else to change.

     Wheel only. Touch keeps the OS's own momentum, the keyboard and every
     in-page anchor keep the smooth scroll-behavior above, and
     prefers-reduced-motion disables it outright. */
  --scroll-weight: 1;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

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

/* Headings are Archivo at wdth 72 / wght 750, uppercase, set tight enough to
   lock up as a block. Below ~1.6rem the -0.03em closes up, so h3/h4 loosen. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); letter-spacing: var(--tracking-heading); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h3); letter-spacing: var(--tracking-heading); line-height: var(--lh-heading); }

/* Showcase line — Archivo stretched wide (wdth 110 / wght 800). Replaces the
   retired Big Shoulders Stencil cut. Never below ~2.5rem: at small sizes the
   expansion just reads as loose tracking. .text-stencil is kept as an alias so
   existing markup keeps working. */
.text-showcase, .text-stencil {
  font-family: var(--font-showcase);
  font-weight: var(--showcase-wght);
  font-stretch: var(--showcase-stretch);
  font-variation-settings: "wdth" var(--showcase-wdth), "wght" var(--showcase-wght);
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.5),
    -0.5px -0.5px 0 rgba(228, 232, 235, 0.06);
}

p { margin: 0 0 var(--space-4); max-width: 65ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: var(--color-gray-400);
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: currentColor; color: var(--text-primary); }

/* Every piece of small interface type: nav, buttons, eyebrows, chips.
   MOVED TO RAJDHANI Aug 13 2026 — labels are INTERFACE type. Data readouts
   (record numbers, timestamps) stay on Plex Mono via .mono/.readout below. */
.label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Readouts, record numbers, timestamps — data, not interface. */
.mono, .readout {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Visible focus ring everywhere — never color-only, never suppressed */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-white);
  color: var(--color-black);
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  transition: top var(--motion-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout primitives */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-24);
}
@media (max-width: 768px) {
  .section { padding-block: var(--space-16); }
}

.section-header {
  margin-bottom: var(--space-8);
  max-width: 60ch;
}
.section-header .label { display: block; margin-bottom: var(--space-2); }

.grid {
  display: grid;
  gap: var(--grid-gap);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

.visually-loading { min-height: 4rem; }