/* ==========================================================================
   Salvant v2 — editorial-security system
   Command Navy / Paper planes, hairline registers, local IBM Plex,
   Operational Teal routing, rationed Signal Orange witness marks.
   Depth comes from contrast, hairlines, cropping and occlusion. No shadows.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* fields */
  --command-navy: #0B1F33;
  --command-navy-deep: #061522;
  --paper: #F7F5EF;
  --system-mist: #E8EDF1;

  /* ink */
  --field-slate: #526171;
  --slate-on-navy: #8E99A4;

  /* states */
  --operational-teal: #167C72;
  --teal-on-navy: #60A49E;
  --signal-orange: #E85D3F;
  --orange-on-navy: #EA7459;

  /* rules */
  --hairline-light: #CED7DE;
  --hairline-dark: #294257;

  /* radii */
  --r-sm: 2px; --r-md: 6px; --r-capsule: 9999px;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 72px; --s-8: 112px; --s-section: 144px;

  /* grid */
  --max-w: 1280px;
  /* 12 columns with eleven 24px gaps needs 264px of gap alone. On a 320px
     viewport that exceeds the container, so `1fr` columns fall back to their
     min-content width and the grid overflows. The gutter has to scale. */
  --gutter: clamp(10px, 1.9vw, 24px);
  --margin: clamp(20px, 5vw, 96px);

  /* z scale */
  --z-media: 0; --z-scrim: 1; --z-content: 10;
  --z-masthead: 50; --z-menu: 60; --z-skiplink: 70;

  /* type */
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-display: clamp(40px, 6.2vw, 76px);
  --t-head-lg: clamp(30px, 4.2vw, 52px);
  --t-head-md: clamp(22px, 2.6vw, 32px);
  --t-head-sm: clamp(19px, 1.9vw, 23px);
  --t-body-lg: clamp(17px, 1.4vw, 20px);
  --t-body-md: 17px;
  --t-body-sm: 15px;
  --t-label: 13px;

  color-scheme: dark light;
  font-synthesis: none;
  scroll-behavior: auto;
}

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

html { min-width: 320px; background: var(--command-navy); scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; min-width: 320px;
  background: var(--paper);
  color: var(--command-navy);
  font-family: var(--font-sans);
  font-size: var(--t-body-md);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--r-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-3); top: -100px;
  z-index: var(--z-skiplink);
  background: var(--signal-orange); color: var(--command-navy-deep);
  padding: 0 18px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
  font: 500 var(--t-label)/1.2 var(--font-sans); text-decoration: none;
}
.skip-link:focus-visible { top: var(--s-3); }

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

/* ---------- shared atoms ---------- */

.instrument-label {
  font: 400 var(--t-label)/1.35 var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--operational-teal);
}
.how .instrument-label, .contact .instrument-label, .hero .instrument-label,
.response-clock .instrument-label, .boundary-tower .instrument-label { color: var(--teal-on-navy); }

.soft { color: var(--field-slate); }
.hero .soft, .how .soft, .contact .soft { color: var(--slate-on-navy); }

.status {
  display: inline-block;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--r-sm);
  border: 1px solid currentColor; white-space: nowrap;
}
.status--current, .status--validation { color: var(--operational-teal); }
.status--planned { color: var(--field-slate); }
.status--not-offered {
  color: var(--command-navy-deep);
  background: var(--signal-orange);
  border-color: var(--signal-orange);
}
.hero .status--current, .hero .status--validation,
.how .status--current, .how .status--validation,
.contact .status--validation, .boundary-tower .status--validation { color: var(--teal-on-navy); }
.hero .status--planned, .how .status--planned, .contact .status--planned { color: var(--slate-on-navy); }

/* ---------- masthead ---------- */

/* Fixed, not sticky. Sticky reserves 79px of flow above the hero, which
   pushes the navy field down and leaves the masthead sitting on the body's
   paper background. The references both overlay their nav on the media. */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-masthead);
  background: transparent; color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 240ms linear, border-color 240ms linear, color 240ms linear;
}
.masthead[data-tone="navy"] { background: var(--command-navy); border-bottom-color: var(--hairline-dark); color: var(--paper); }
.masthead[data-tone="paper"] { background: var(--paper); border-bottom-color: var(--hairline-light); color: var(--command-navy); }
.masthead[data-tone="hero"] { background: transparent; border-bottom-color: transparent; color: var(--paper); }

.masthead__inner {
  width: 100%; max-width: var(--max-w); margin-inline: auto;
  padding: var(--s-3) var(--margin);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-4);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; min-width: 44px; flex: 0 0 auto;
  text-decoration: none; color: inherit;
}
.brand__mark { width: 42px; height: auto; flex: 0 0 auto; }
.brand__word { width: 116px; height: auto; flex: 0 0 auto; }
.brand--footer .brand__mark { width: 38px; }
.brand--footer .brand__word { width: 104px; }

/* The signature assets carry a navy-to-blue gradient built for white stationery.
   On a Command Navy field the dark end measures about 1.4:1 and the wordmark
   disappears. On dark fields the wordmark is reduced to the Paper ink it sits
   in, which keeps the dot-matrix form that is the actual identity, and the mark
   is lifted so both halves of its gradient stay separable. Paper sections use
   the artwork exactly as delivered. */
.masthead[data-tone="navy"] .brand__word,
.masthead[data-tone="hero"] .brand__word,
.brand--footer .brand__word {
  filter: brightness(0) invert(1) opacity(.94);
}
.masthead[data-tone="navy"] .brand__mark,
.masthead[data-tone="hero"] .brand__mark,
.brand--footer .brand__mark {
  filter: brightness(1.5) saturate(1.2);
}
@media (forced-colors: active) {
  .brand__mark, .brand__word { filter: none; }
}

.primary-nav {
  justify-self: center; display: flex; gap: 2px;
  border: 1px solid currentColor; border-radius: var(--r-capsule); padding: 3px;
}
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border-radius: var(--r-capsule);
  font: 400 var(--t-body-sm)/1 var(--font-sans);
  text-decoration: none; opacity: .72;
  transition: color 200ms linear, background-color 200ms linear, opacity 200ms linear;
}
.primary-nav a:hover { opacity: 1; }
.primary-nav a[aria-current="true"] { opacity: 1; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.masthead[data-tone="navy"] .primary-nav a[aria-current="true"],
.masthead[data-tone="hero"] .primary-nav a[aria-current="true"] { background: rgba(247, 245, 239, .14); }
.masthead[data-tone="paper"] .primary-nav a[aria-current="true"] { background: rgba(11, 31, 51, .09); }

.masthead__controls { display: flex; align-items: center; gap: var(--s-2); }

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 14px;
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: var(--r-capsule);
  font: 400 var(--t-label)/1 var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: color 200ms linear, background-color 200ms linear;
}
.menu-toggle:hover { background: rgba(232, 93, 63, .18); }

.menu-toggle { display: none; }
.menu-toggle__mark { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-toggle__mark i { width: 14px; height: 1.5px; background: currentColor; }

/* ==========================================================================
   HERO — zoned.
   Measured on all 193 frames of the source clip: the copy zone peaks at
   L99 0.0050 (Paper text 17.5:1). The texture zone peaks at L99 0.9572,
   where no scrim value lifts a mid-tone stroke to 3:1. Nothing is drawn
   on the texture zone.
   ========================================================================== */

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--command-navy-deep); color: var(--paper);
  overflow: hidden; isolation: isolate;
}

/* Full-bleed media. The study fills the viewport and the argument sits on top of
   it. Slightly oversized and centre-anchored so no edge is revealed while the
   frame moves. */
.hero__texture {
  position: absolute; inset: 0; z-index: var(--z-media);
  background-image: url("assets/motion/photoelastic-tension-field-poster.jpg");
  background-size: cover; background-position: center center;
  transform: scale(1.08); transform-origin: center center;
  overflow: hidden;
}
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0; transition: opacity 700ms linear;
}
.hero__video[data-playing="true"] { opacity: 1; }

/* Text now sits directly over the brightest part of the clip, which peaks at
   relative luminance 0.9572. Paper ink over that raw measures 1.05:1. Three
   stacked layers bring the composite under L 0.164, the point where Paper
   clears 4.5:1, while leaving the upper right bright enough to read as an
   image rather than a flat panel:
     1. a base wash for the whole frame,
     2. a left-weighted pass under the copy column,
     3. a bottom pass into the strip.
   Verified against rendered pixels, not theory. Re-measure if the crop,
   the source, or the copy position changes. */
.hero__scrim {
  position: absolute; inset: 0; z-index: var(--z-scrim);
  background:
    linear-gradient(100deg,
      rgba(6, 21, 34, .95) 0%,
      rgba(6, 21, 34, .88) 34%,
      rgba(6, 21, 34, .66) 58%,
      rgba(6, 21, 34, .42) 78%,
      rgba(6, 21, 34, .30) 100%),
    linear-gradient(to bottom,
      rgba(6, 21, 34, .72) 0%,
      rgba(6, 21, 34, .34) 26%,
      rgba(6, 21, 34, .34) 62%,
      rgba(6, 21, 34, .80) 100%);
}

.hero__layout {
  position: relative; z-index: var(--z-content); flex: 1;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-content: center;
  padding-block: 88px var(--s-2);
}

.hero__copy { grid-column: 1 / span 7; }

.opening-boundary {
  border-left: 3px solid var(--signal-orange);
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  font: 400 var(--t-label)/1.5 var(--font-mono);
  color: var(--paper); max-width: 46ch;
}

/* The hero H1 uses a lower ceiling than --t-display so the headline, the lead,
   the action, the sequence line and the bottom strip all fit inside one
   100svh viewport at 1440x900. At 76px it ran to five lines and the hero
   grew to 1276px, which broke the flush bottom strip. */
.hero h1 {
  margin-top: var(--s-4);
  font-size: clamp(32px, 3.9vw, 54px); line-height: .99;
  letter-spacing: -.035em; max-width: 26ch;
}

.hero__lead { margin-top: var(--s-4); font-size: var(--t-body-lg); line-height: 1.5; max-width: 40ch; }

.hero__actions { margin-top: var(--s-5); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }

.action { display: inline-flex; align-items: stretch; gap: 1px; text-decoration: none; }
.action__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; min-height: 48px;
  background: var(--signal-orange); color: var(--command-navy-deep);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  transition: background-color 200ms linear;
}
.action__plate {
  display: inline-flex; align-items: center; padding: 0 var(--s-4); min-height: 48px;
  background: var(--paper); color: var(--command-navy);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font: 500 var(--t-body-sm)/1.2 var(--font-sans);
  transition: background-color 200ms linear;
}
.action:hover .action__tile { background: var(--orange-on-navy); }
.action:hover .action__plate { background: #fff; }
.action:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.text-link {
  font: 400 var(--t-body-sm)/1 var(--font-sans);
  color: var(--slate-on-navy); text-decoration: underline; text-underline-offset: 4px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color 200ms linear;
}
.text-link:hover { color: var(--paper); }

.noscript-note { margin-top: var(--s-4); font-size: var(--t-body-sm); color: var(--slate-on-navy); max-width: 52ch; }

/* The designed sequence, stated in words. There is deliberately no diagram
   here: the sequence is a list of five named steps and prose carries it
   without a decorative instrument. */
.hero__sequence {
  /* Must be pinned to the copy column. Without an explicit span it auto-places
     into column 8, which is a 120px-wide strip sitting in the bright part of the
     frame where Paper ink measures 2.03:1. */
  grid-column: 1 / span 7;
  margin-top: var(--s-5);
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--t-body-sm); line-height: 1.5;
  color: var(--paper); max-width: 56ch;
}
.hero__sequence .status { flex: 0 0 auto; }

/* bottom strip, flush to the viewport floor */
.hero__strip {
  position: relative; z-index: var(--z-content);
  border-top: 1px solid var(--hairline-dark);
  background: rgba(6, 21, 34, .9);
}
.hero__strip-inner {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter); align-items: center; padding-block: var(--s-3);
}
/* The strip answers "what is this" inside the first viewport, then indexes the
   three parts. Category, mechanism, and the three product roles are all legible
   without scrolling. */
.hero__definition { grid-column: 1 / span 5; }
.hero__definition-copy {
  margin-top: var(--s-2);
  font-size: var(--t-body-sm); line-height: 1.5;
  color: var(--paper); max-width: 46ch;
}
.index-rows { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.index-rows a {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 3px var(--s-2);
  min-height: 74px; padding: var(--s-3);
  background: rgba(232, 237, 241, .06); text-decoration: none;
  transition: background-color 200ms linear, color 200ms linear;
}
.index-rows a:hover { background: rgba(232, 237, 241, .13); }
.index-rows span { grid-column: 1; font-size: var(--t-body-sm); font-weight: 600; letter-spacing: -.01em; }
.index-rows em {
  grid-column: 1; font-style: normal;
  font-size: 13px; line-height: 1.35; color: var(--slate-on-navy);
}
.index-rows b {
  grid-column: 1; margin-top: 2px;
  font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-on-navy);
}
.index-rows li:last-child b { color: var(--orange-on-navy); }
.index-rows i { grid-column: 2; grid-row: 1; }
.index-rows i { color: var(--orange-on-navy); font-style: normal; transition: transform 200ms linear; }
.index-rows a:hover i { transform: translateX(2px); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section { padding-block: clamp(var(--s-7), 9vw, var(--s-section)); }
/* What is now a navy environment: a dark studio clip runs behind its planes, so
   navy ink on mist would be unreadable over it. This also keeps the
   paper / navy alternation intact down the page. */
.how, .contact, .what { background: var(--command-navy); color: var(--paper); }
.why, .boundary, .status-section { background: var(--paper); }

.section-heading { max-width: 60ch; }
.section-heading h2 { font-size: var(--t-head-lg); line-height: 1.02; letter-spacing: -.035em; }
.status-section__note { margin-top: var(--s-4); font-size: var(--t-body-md); color: var(--field-slate); max-width: 60ch; }

/* ---------- WHY ---------- */

.why__open { max-width: 48ch; }
.sourced { border-left: 2px solid var(--operational-teal); padding-left: var(--s-3); font-size: var(--t-body-sm); color: var(--field-slate); }

.why__poles { margin-top: clamp(var(--s-6), 7vw, var(--s-8)); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.pole--left { grid-column: 1 / span 6; font-size: var(--t-head-lg); line-height: 1.02; letter-spacing: -.035em; }
.pole--right { grid-column: 8 / span 5; align-self: end; text-align: right; margin-top: var(--s-7); font-size: var(--t-body-lg); line-height: 1.5; }

.clock-register { margin-top: clamp(var(--s-6), 7vw, var(--s-8)); display: grid; grid-template-columns: repeat(12, 1fr); border: 1px solid var(--hairline-light); overflow: hidden; }
.response-clock {
  grid-column: 1 / span 5; position: relative; overflow: hidden;
  background: var(--command-navy); color: var(--paper); padding: var(--s-6) var(--s-5);
}
.response-clock__dial {
  position: absolute; right: -24%; top: 64%;
  width: min(340px, 72%); aspect-ratio: 1;
  transform: translateY(-50%); border: 1px solid var(--hairline-dark); border-radius: 50%;
}
.response-clock__dial::after { content: ""; position: absolute; inset: 22%; border: 1px solid var(--hairline-dark); border-radius: 50%; }
/* The clock is the moment the response interval starts, so it carries the
   chapter's orange. Elapsed arc plus hand, both Signal Orange. */
.response-clock__dial::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: var(--signal-orange);
  transform: rotate(-28deg);
}
.response-clock__hand {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 2px;
  transform-origin: left center; background: var(--signal-orange); transform: rotate(38deg);
}
.response-clock__pin { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3px 0 0 -3px; border: 1px solid var(--paper); border-radius: 50%; }
.response-clock h3 {
  position: relative; margin-top: var(--s-3);
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px); letter-spacing: -.02em;
}
.response-clock h3 span {
  display: inline-block;
  background: var(--signal-orange); color: var(--command-navy-deep);
  font-size: .42em; padding: 4px 7px; border-radius: var(--r-sm);
  vertical-align: .34em; margin-right: var(--s-2);
}
.response-clock > p { position: relative; margin-top: var(--s-4); font-size: var(--t-body-sm); color: var(--slate-on-navy); max-width: 44ch; }
.clock-key { position: relative; margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); border-top: 1px solid var(--hairline-dark); padding-top: var(--s-4); }
.clock-key dt { font: 400 11px/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--slate-on-navy); }
.clock-key dd { margin-top: var(--s-1); font-size: var(--t-body-sm); }

.evidence-register {
  grid-column: 6 / span 7; padding: var(--s-6) var(--s-5);
  background:
    radial-gradient(circle at 1px 1px, var(--hairline-light) 1px, transparent 0) 0 0 / 14px 14px,
    var(--paper);
  border-left: 1px solid var(--hairline-light);
}
.evidence-register h3 { margin-top: var(--s-2); font-size: var(--t-head-md); letter-spacing: -.025em; }
.evidence-register__note { margin-top: var(--s-3); font-size: var(--t-body-sm); color: var(--field-slate); max-width: 56ch; }

.ledger { margin-top: var(--s-5); border-top: 1px solid var(--hairline-light); }
.ledger > li { display: grid; grid-template-columns: 62px 1fr auto; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline-light); }
.ledger__id { font: 400 var(--t-label)/1.4 var(--font-mono); color: var(--operational-teal); }
.ledger__body h4 { font-size: var(--t-body-md); line-height: 1.35; letter-spacing: -.01em; max-width: 46ch; }
.ledger__body dl { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.ledger__body dl > div { display: grid; grid-template-columns: 152px 1fr; gap: var(--s-3); }
.ledger__body dt { font: 400 11px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--field-slate); }
.ledger__body dd { font-size: var(--t-body-sm); color: var(--field-slate); }
.ledger__state { padding-top: 2px; }
.evidence-register__standard { margin-top: var(--s-5); font-size: var(--t-body-sm); color: var(--field-slate); max-width: 70ch; }

/* ---------- studies ---------- */

/* ==========================================================================
   FIELD — a studio clip running behind an instrument's own text, the same way
   the hero works. Replaces the standalone study bands.

   Measured across every frame: witness-pin peaks at relative luminance 0.7942,
   prepared-relay at 0.7989. Paper ink on the raw frame is 1.14:1 and 1.13:1.
   An 80% scrim reaches exactly 4.49:1, which leaves no margin for a brighter
   re-export, so the scrim is 88% and measures about 6.3:1.
   ========================================================================== */

.field { position: relative; isolation: isolate; overflow: hidden; }
.field > *:not(.field__media):not(.field__scrim) { position: relative; z-index: 2; }

.field__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.field__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
  opacity: 0; transition: opacity 700ms linear;
}
.field__video[data-playing="true"] { opacity: 1; }
/* Masks the loop seam. Measured first-to-last deltas run 1.8 to 10.5. */
.field__video[data-seam="true"] { opacity: .28; }

.field__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(6, 21, 34, .88);
}

.field__note {
  margin-top: var(--s-4);
  font-size: var(--t-body-sm); line-height: 1.55;
  color: var(--field-slate); max-width: 76ch;
}
.field__note b { font-weight: 500; color: var(--command-navy); }
.how .field__note, .what .field__note { color: var(--slate-on-navy); }
.how .field__note b, .what .field__note b { color: var(--paper); }

/* ---------- HOW: mechanism ---------- */

.mechanism { margin-top: clamp(var(--s-6), 7vw, var(--s-8)); border: 1px solid var(--hairline-dark); }
.mechanism__header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5); border-bottom: 1px solid var(--hairline-dark); }
.mechanism__header h3 { margin-top: var(--s-2); font-size: var(--t-head-md); letter-spacing: -.025em; }
.mechanism__header > p { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body-sm); color: var(--slate-on-navy); }

.mechanism__rail { display: grid; grid-template-columns: repeat(5, 1fr); }
.mechanism__rail button {
  display: grid; gap: var(--s-2); text-align: left; align-content: start;
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: transparent; color: var(--paper);
  border: 0; border-right: 1px solid var(--hairline-dark); border-top: 3px solid var(--hairline-dark);
  cursor: pointer; min-height: 44px; font-family: inherit;
  transition: background-color 200ms linear, border-color 240ms linear, border-top-width 240ms linear;
}
.mechanism__rail button:last-child { border-right: 0; }
.mechanism__rail strong { font-size: var(--t-body-lg); font-weight: 600; letter-spacing: -.02em; }
/* Secondary text inside a field uses Hairline Light rather than Slate-on-navy.
   Measured over the scrimmed acceptance field, Slate reaches only 3.64:1 where
   body text needs 4.5. Hairline Light is an existing token and measures 7.2:1
   there, so no new hue enters the system. */
.mechanism__rail small { font-size: var(--t-body-sm); color: var(--hairline-light); }
/* The status chip sits on the acceptance field, where Teal-on-navy measures only
   3.67:1 at 11px. Each chip gets its own near-opaque plate, which restores the
   documented 5.78:1 for Teal-on-navy and matches the Accept chip that already
   carries a Signal Orange plate. */
.mechanism__rail em {
  font: 400 11px/1 var(--font-mono); letter-spacing: .07em;
  text-transform: uppercase; font-style: normal;
  color: var(--teal-on-navy);
  background: rgba(6, 21, 34, .88);
  padding: 4px 7px; border-radius: var(--r-sm); justify-self: start;
}
.mechanism__rail button:hover { background: rgba(232, 237, 241, .05); }
.mechanism__rail button[aria-pressed="true"] { background: rgba(232, 237, 241, .09); }
.mechanism__rail button[data-signal="true"] { border-top-color: var(--signal-orange); border-top-width: 5px; }
.mechanism__rail button[data-signal="true"] em {
  color: var(--command-navy-deep); background: var(--signal-orange);
  padding: 4px 7px; border-radius: var(--r-sm); justify-self: start;
}
.mechanism__rail button[data-signal="true"][aria-pressed="true"] { border-top-width: 10px; background: rgba(232, 93, 63, .19); }
/* Accept is the only stage where a boundary is crossed, so its explanation
   carries the mark too. */
.mechanism__inspector[data-stage-panel="accept"] { border-left: 5px solid var(--signal-orange); }

.mechanism__inspectors { border-top: 1px solid var(--hairline-dark); }
.mechanism__inspector { display: grid; grid-template-columns: 120px 1fr 230px; gap: var(--s-5); align-items: start; padding: var(--s-5); }
.mechanism__inspector > span { font: 400 var(--t-label)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hairline-light); }
.mechanism__inspector h4 { font-size: var(--t-head-sm); letter-spacing: -.02em; }
.mechanism__inspector p { margin-top: var(--s-3); font-size: var(--t-body-sm); color: var(--hairline-light); max-width: 60ch; }
.mechanism__inspector dl { display: grid; gap: var(--s-3); }
.mechanism__inspector dl > div { display: grid; grid-template-columns: 78px 1fr; gap: var(--s-3); border-bottom: 1px solid var(--hairline-dark); padding-bottom: var(--s-2); }
.mechanism__inspector dt { font: 400 11px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hairline-light); }
.mechanism__inspector dd { font-size: var(--t-body-sm); }
.mechanism__inspector + .mechanism__inspector { border-top: 1px solid var(--hairline-dark); }
.js .mechanism__inspector { display: none; }
.js .mechanism__inspector[data-active="true"] { display: grid; }

/* ---------- BOUNDARY LABORATORY ---------- */

.boundary-lab__grid { margin-top: clamp(var(--s-6), 7vw, var(--s-8)); display: grid; grid-template-columns: repeat(12, 1fr); border: 1px solid var(--hairline-light); }
.boundary-tower { grid-column: 1 / span 4; background: var(--command-navy); color: var(--paper); padding: var(--s-6) var(--s-5); }
.boundary-tower h3 { margin-top: var(--s-2); font-size: var(--t-head-sm); letter-spacing: -.02em; }
.tower { margin-top: var(--s-5); border: 1px solid var(--hairline-dark); }
.tower__level { padding: var(--s-4); }
.tower__level span, .tower__open span { display: block; font: 400 11px/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--slate-on-navy); }
.tower__level strong { display: block; margin-top: var(--s-2); font-size: var(--t-body-sm); font-weight: 400; }
.tower__level--existing { background: rgba(232, 237, 241, .05); }
.tower__level--proposed { background: var(--operational-teal); }
.tower__level--proposed span { color: rgba(247, 245, 239, .85); }
.tower__separator { background: var(--signal-orange); color: var(--command-navy-deep); padding: var(--s-3) var(--s-4); }
.tower__separator span { font: 500 11px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.tower__open { padding: var(--s-4); background: var(--command-navy-deep); }
.tower__open p { margin-top: var(--s-2); font-size: var(--t-body-sm); }
.tower__note { margin-top: var(--s-4); font-size: var(--t-body-sm); color: var(--slate-on-navy); }

.score { grid-column: 5 / span 8; padding: var(--s-6) var(--s-5); border-left: 1px solid var(--hairline-light); }
.score h3 { margin-top: var(--s-2); font-size: var(--t-head-md); letter-spacing: -.025em; }
.score__readout { margin-top: var(--s-5); display: flex; align-items: baseline; gap: var(--s-2); border-block: 1px solid var(--hairline-light); padding-block: var(--s-4); }
.score__readout strong { font-family: var(--font-mono); font-weight: 400; font-size: clamp(46px, 5.4vw, 74px); line-height: 1; letter-spacing: -.03em; }
.score__readout span { font-family: var(--font-mono); color: var(--field-slate); }
.score__readout em { margin-left: auto; font-style: normal; font: 400 var(--t-label)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; border: 1px solid var(--command-navy); padding: 8px 12px; border-radius: var(--r-sm); }

.score__controls { margin-top: var(--s-5); display: grid; gap: var(--s-5); }
.score__controls label { display: grid; gap: var(--s-2); }
.score__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.score__name b { font-size: var(--t-body-md); font-weight: 500; }
.score__name output { font: 400 var(--t-label)/1 var(--font-mono); color: var(--field-slate); }
.score__controls small { font-size: var(--t-body-sm); color: var(--field-slate); }
.score__controls input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--operational-teal); background: transparent; cursor: pointer; }
.score__bar { display: block; height: 3px; background: var(--hairline-light); }
.score__bar i { display: block; height: 100%; width: 33%; background: var(--operational-teal); transition: width 120ms linear; }

.score__explanation { margin-top: var(--s-5); border-left: 3px solid var(--signal-orange); padding: var(--s-4); background: var(--system-mist); }
.score__explanation h4 { font-size: var(--t-head-sm); letter-spacing: -.02em; }
.score__explanation p { margin-top: var(--s-2); font-size: var(--t-body-sm); color: var(--field-slate); }
.score__denial { margin-top: var(--s-4); font-size: var(--t-body-sm); color: var(--field-slate); max-width: 70ch; }
.score__nojs { margin-top: var(--s-3); font-size: var(--t-body-sm); color: var(--field-slate); }
.js .score__nojs { display: none; }

/* ---------- WHAT ---------- */

.architecture-field {
  margin-top: clamp(var(--s-6), 7vw, var(--s-8));
  border: 1px solid var(--hairline-dark);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.architecture { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.plane { border-top: 3px solid var(--paper); padding-top: var(--s-4); }
.plane--a { grid-column: 1 / span 4; }
.plane--b { grid-column: 5 / span 4; margin-top: var(--s-7); border-top-color: var(--teal-on-navy); }
.plane--c { grid-column: 9 / span 4; margin-top: calc(var(--s-7) * 2); border-top-color: var(--signal-orange); }
.plane__mark { margin-bottom: var(--s-3); }
.plane h3 { font-size: var(--t-head-md); letter-spacing: -.025em; }
.plane dl { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.plane dl > div { border-top: 1px solid var(--hairline-dark); padding-top: var(--s-2); }
.plane dt { font: 400 11px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hairline-light); }
.plane dd { margin-top: var(--s-1); font-size: var(--t-body-sm); }
.plane__gate { margin-top: var(--s-4); font: 400 var(--t-label)/1.5 var(--font-mono); color: var(--teal-on-navy); }
.architecture__chain { margin-top: clamp(var(--s-6), 6vw, var(--s-7)); border-top: 1px solid var(--paper); padding-top: var(--s-4); font-size: var(--t-body-lg); max-width: 58ch; }

/* ---------- STATUS ---------- */

.status-definitions { margin-top: clamp(var(--s-6), 7vw, var(--s-8)); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline-light); }
.status-definitions > div { padding: var(--s-4) var(--s-5); border-right: 1px solid var(--hairline-light); border-bottom: 1px solid var(--hairline-light); }
.status-definitions > div:nth-child(2n) { border-right: 0; }
.status-definitions > div:nth-last-child(-n+2) { border-bottom: 0; }
.status-definitions dd { margin-top: var(--s-3); font-size: var(--t-body-sm); }

.limits-register { margin-top: clamp(var(--s-6), 6vw, var(--s-7)); }
.limits-register header { max-width: 40ch; }
.limits-register h3 { margin-top: var(--s-2); font-size: var(--t-head-md); letter-spacing: -.025em; }
.limits-register article { margin-top: var(--s-5); display: grid; grid-template-columns: 300px 1fr; gap: var(--s-5); border-top: 1px solid var(--command-navy); padding-top: var(--s-4); }
.limits-register h4 { font-size: var(--t-head-sm); letter-spacing: -.02em; }
.limits-register p { font-size: var(--t-body-sm); color: var(--field-slate); max-width: 62ch; }

.denial-register {
  margin-top: clamp(var(--s-6), 6vw, var(--s-7));
  background: var(--command-navy); color: var(--paper);
  border-left: 8px solid var(--signal-orange);
  padding: var(--s-6) var(--s-5);
  display: grid; grid-template-columns: 260px 1fr; gap: var(--s-5);
}
.denial-register > p:last-child { font-size: var(--t-body-lg); line-height: 1.45; }

/* ---------- CONTACT ---------- */

.contact__layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.contact__head { grid-column: 1 / span 6; }
.contact__head h2 { margin-top: var(--s-3); font-size: var(--t-head-lg); line-height: 1.02; letter-spacing: -.035em; }
.contact__state { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-2); font: 400 var(--t-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.contact__body { grid-column: 8 / span 5; align-self: end; }
.contact__body > p { font-size: var(--t-body-md); color: var(--slate-on-navy); }
.contact__audiences { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.contact__audiences > div { border-top: 1px solid var(--hairline-dark); padding-top: var(--s-3); }
.contact__audiences dt { font-size: var(--t-body-md); font-weight: 500; }
.contact__audiences dd { margin-top: var(--s-2); font-size: var(--t-body-sm); color: var(--slate-on-navy); }

/* ---------- FOOTER ---------- */

.footer { background: var(--command-navy-deep); color: var(--paper); padding-block: var(--s-6); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.footer p { font: 400 var(--t-label)/1.4 var(--font-mono); letter-spacing: .05em; color: var(--slate-on-navy); }
.footer__controls { display: flex; align-items: center; gap: var(--s-4); }
.footer a { font-size: var(--t-body-sm); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1279px) {
}

@media (max-width: 1023px) {
  /* The texture band leads on mobile, so the fixed masthead would sit on the
     bright polymer. It becomes a solid bar and the hero reserves its height. */
  .masthead[data-tone="hero"] {
    background: var(--command-navy); border-bottom-color: var(--hairline-dark);
  }
  .hero { padding-top: 62px; }
  .hero__copy, .hero__sequence { grid-column: 1 / span 12; }
  /* Mobile is recomposed, not stacked: the physical field leads, cropped to a
     band directly under the masthead, then the argument follows on solid navy.
     Placing it last put the only imagery below the fold. */
  .hero__texture {
    position: relative; inset: auto; order: -1;
    height: 23vh; min-height: 170px; transform: none;
    background-position: 58% center;
    border-bottom: 1px solid var(--hairline-dark);
  }
  .hero__scrim { display: none; }
  .hero__layout { padding-block: var(--s-5) var(--s-6); }
  .hero__definition, .index-rows { grid-column: 1 / span 12; }
  .index-rows { margin-top: var(--s-4); }

  .response-clock, .evidence-register { grid-column: 1 / span 12; }
  .evidence-register { border-left: 0; border-top: 1px solid var(--hairline-light); }
  .pole--left, .pole--right { grid-column: 1 / span 12; text-align: left; margin-top: 0; }
  .pole--right { margin-top: var(--s-5); }

  .boundary-tower, .score { grid-column: 1 / span 12; }
  .score { border-left: 0; border-top: 1px solid var(--hairline-light); }

  .mechanism__rail { grid-template-columns: repeat(2, 1fr); }
  .mechanism__rail button:nth-child(2n) { border-right: 0; }
  .mechanism__inspector { grid-template-columns: 1fr; gap: var(--s-4); }

  .plane--a, .plane--b, .plane--c { grid-column: 1 / span 12; margin-top: var(--s-5); }

  .contact__head, .contact__body { grid-column: 1 / span 12; }
  .contact__body { margin-top: var(--s-6); }
  .denial-register, .limits-register article { grid-template-columns: 1fr; }
}

/* Media suppression: below 900px no video is ever attached. Posters only. */
@media (max-width: 899px) {
  .hero__video { display: none; }
}

@media (max-width: 767px) {
  /* Every child already spans the full width here, so the twelve-column track
     only costs gap. Collapsing to one column removes the min-content floor
     entirely. */
  .hero__layout, .hero__strip-inner, .why__poles, .architecture, .contact__layout {
    grid-template-columns: 1fr;
  }
  .masthead__inner { grid-template-columns: auto auto; justify-content: space-between; padding-block: var(--s-2); }
  .menu-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: 68px var(--s-3) auto var(--s-3); z-index: var(--z-menu);
    flex-direction: column; gap: 0;
    background: var(--command-navy); color: var(--paper);
    border: 1px solid var(--hairline-dark); border-radius: var(--r-md);
    padding: var(--s-2);
  }
  .js .primary-nav { display: none; }
  .js body.nav-open .primary-nav { display: flex; }
  html:not(.js) .primary-nav {
    position: static; inset: auto; display: flex; flex-direction: row; flex-wrap: wrap;
    grid-column: 1 / -1; margin-top: var(--s-2);
    background: transparent; border-radius: var(--r-capsule);
  }
  .primary-nav a { min-height: 48px; justify-content: flex-start; }
  body.nav-open { overflow: hidden; }

  .status-definitions { grid-template-columns: 1fr; }
  .status-definitions > div { border-right: 0; border-bottom: 1px solid var(--hairline-light); }
  .status-definitions > div:last-child { border-bottom: 0; }
  .index-rows { grid-template-columns: 1fr; }
  .clock-key { grid-template-columns: 1fr; }
  .ledger > li { grid-template-columns: 1fr; gap: var(--s-2); }
  .ledger__body dl > div { grid-template-columns: 1fr; gap: 0; }
  .mechanism__rail { grid-template-columns: 1fr; }
  .mechanism__rail button { border-right: 0; border-bottom: 1px solid var(--hairline-dark); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  /* At 320px the masthead controls squeezed the brand link down to 37px wide,
     below the 44px target minimum. The masthead motion control keeps only its
     mark; its accessible name is on the button, and the footer control keeps a
     full text label. */
  .brand__mark { width: 34px; }
  .brand__word { width: 92px; }

  .hero h1 { max-width: none; }
  .response-clock, .evidence-register, .boundary-tower, .score,
  .mechanism__header, .mechanism__inspector, .denial-register { padding: var(--s-5) var(--s-4); }
  .score__readout em { margin-left: 0; }
}

/* ==========================================================================
   MOTION, STILL MODE, FORCED COLORS, PRINT
   ========================================================================== */

/* The OS preference suppresses looping vector animation and transitions. It does
   NOT remove the background study: Windows "adjust for best performance" reports
   `reduce` for reasons unrelated to motion sensitivity, and gating the hero media
   on it blanked the field entirely. The visible motion control, persisted under
   `salvant:motion`, is the switch that stops everything including video. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, :root { scroll-behavior: auto; }
}

/* Ambient motion is always on and there is no control, so there is no still
   mode to style. Motion still stops entirely under forced colors, below 900px,
   on a data-saving or slow connection, when the page is hidden, and whenever a
   study scrolls out of view. */

@media (forced-colors: active) {
  .hero__texture, .hero__video, .hero__scrim { display: none; }
  .field__video, .field__media, .field__scrim { display: none; }
  .hero, .how, .contact, .what, .response-clock, .boundary-tower, .denial-register,
  .architecture-field { background: Canvas; color: CanvasText; }
  .status, .action__tile, .action__plate, .tower__separator, .tower__level--proposed,
  .tower__open, .skip-link {
    forced-color-adjust: none;
    background: Canvas; color: CanvasText; border: 1px solid CanvasText;
  }
  :focus-visible { outline: 2px solid Highlight; }
}

/* Reduced transparency is about layering legibility, not about deleting
   imagery. Make the copy zone fully opaque and let the texture zone remain.
   Note: headless Chromium reports this query as `reduce` by default, so an
   override that replaced the whole gradient with a solid fill silently
   removed the hero media from every automated screenshot. */
@media (prefers-reduced-transparency: reduce) {
  .hero__scrim {
    background: linear-gradient(100deg,
      var(--command-navy-deep) 0%,
      var(--command-navy-deep) 44%,
      rgba(6, 21, 34, .55) 58%,
      rgba(6, 21, 34, 0) 74%);
  }
  .hero__strip { background: var(--command-navy-deep); }
}

@media print {
  .masthead, .hero__video, .field__video, .field__media, .field__scrim, .menu-toggle,
  .skip-link, .footer__controls, .hero__strip { display: none !important; }
  .hero, .how, .contact, .what, .response-clock, .boundary-tower, .denial-register,
  .tower__level--proposed, .tower__separator, .architecture-field {
    background: #fff !important; color: #000 !important;
  }
  .plane, .architecture__chain { border-top-color: #000 !important; }
  .hero { min-height: auto; }
  .hero__texture { position: relative; inset: auto; height: 200px; transform: none; }
  .js .mechanism__inspector { display: grid !important; }
  body { font-size: 11pt; }
  .section { padding-block: 18pt; }
  a { text-decoration: none; }
}