/* ==========================================================================
   TEMassist — BASE
   Reset, page shell, the type utilities that carry the three-voice rule,
   focus, and the reduced-motion contract.

   CASCADE NOTE: everything here is single-class or element scoped.  Section
   files (acts.css, brief.css) may override, and are loaded after.  Nothing
   in this file uses an id or a compound selector, so a later single class
   always wins without !important.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   THE THREE VOICES (CD §6)
   -------------------------------------------------------------------------- */

.u-display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  text-wrap: balance;
}


/* The mono micro-label — the instrument-panel register.  Kickers, panel
   names, column heads.  Uppercase, letterspaced, muted or signal. */
.u-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  font-weight: 500;
}

/* THE DATA-VOICE RULE — the signature typographic move (CD §6).
   Any number that is REAL FLIGHT DATA is set in mono, slightly larger than
   the copy around it, tabular, and may carry the amber signal.  This is what
   distinguishes fact from copy at a glance. */
.u-data {
  font-family: var(--mono);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}

/* ⚠ `.u-serif`, `.u-signal` AND `.u-muted` ARE DELETED. Utilities nothing applies are dead
   weight that reads as intent — and `.u-muted` is an orphan of this session's own work: its only
   user was the scramble glyph in the decode line's motion, removed one commit ago. A utility
   LAYER is a palette, but a palette entry no brush has ever touched is just paint. The three that
   earn their place — `u-label`, `u-data`, `u-display` — stay. */
.u-measure { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   SHELL & GRID (CD §9 — asymmetric, generous negative space)
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5);
}

@media (max-width: 60rem) {
  .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.act {
  position: relative;
  padding-block: var(--sp-9);
}

/* The hairline that separates acts.  A LINE, not a decoration (blueprint,
   Act I "the quiet-luxury move"). */
.act + .act::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: 1px;
  background: var(--hairline);
}

/* --------------------------------------------------------------------------
   FOCUS & SKIP (CD §14, blueprint §Accessibility)
   The token table gives --accent the "interactive" role, so the focus ring
   is accent.  CD §14 asks for an amber hairline; the two are reconciled by
   giving the ring an amber outer hairline at night, where --signal exists.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-140%);
  z-index: 100;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  transition: transform var(--t-micro) var(--ease);
}
.skip:focus { transform: translateY(20%); }

/* --------------------------------------------------------------------------
   REVEALS — one shared mechanism (blueprint §Motion budget: fade + 12px
   rise, ≤600ms, once, on scroll into view).
   The resting state is VISIBLE.  `.js-on` is set by motion.js only after it
   confirms motion is wanted, so with JS off — or with reduced motion — every
   element is already in its final state and nothing is parked at opacity 0.
   -------------------------------------------------------------------------- */

/* ⛔ THE FADE-AND-RISE FROM-STATE IS GONE — CD §10 NAMES IT ON THE *NEVER* LIST: "fade-and-rise
   on every section." It ran on six sections plus a child-stagger, which is every section, and it
   is the commonest tell of a generated page. The direction's model is one orchestrated moment per
   page (Act 0's power-up, Act III's line-draw) and state change everywhere else.

   ⚠ THE CSS HAD TO GO IN THE SAME COMMIT AS THE OBSERVER, and this is the half that would have
   bitten: the from-state is `opacity: 0` armed under `.js-on`, so deleting only the JS leaves
   every one of those sections invisible forever — to exactly the readers who did NOT ask for
   reduced motion. A from-state and the thing that releases it are one change. */

/* --------------------------------------------------------------------------
   THE REDUCED-MOTION CONTRACT (CD §11 — a hard rule)
   Everything snaps to its final state.  Drift stops, decode becomes plain
   text, parallax is static, the tilt is removed.  Fully readable at zero
   motion.  "The product never fakes; the motion never fakes either."
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

}