/* ============================================================
   VAQUERO PERFORMANCE — Execution
   Same typeface family as Racecraft Labs, opposite width axis:
   condensed, stacked, banner-set. Bronze is reflective where the
   Labs' amber is emissive. Discipline, not decoration.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --void:        #000000;
  --hide:        #0A0908;
  --rule:        rgba(237,230,217,0.10);
  --rule-strong: rgba(237,230,217,0.22);

  --bone:        #EDE6D9;   /* primary type — warm white, not paper */
  --steel:       #8A9199;   /* secondary, data, meta */
  --dim:         #3F423F;

  --amber:       #FFA61F;   /* the accent. struck metal, then heat. */
  --amber-lo:    #8A5410;
  --ember:       #B8541E;   /* mascot secondary only. never type. */
  --fault:       #C2381F;
  --nominal:     #7FA37A;

  --gutter: clamp(20px, 4.4vw, 72px);
  --maxw: 1680px;
  --hair: 1px;

  --ease-mass: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-snap: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.24s;
  --t-mid:  0.55s;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { background: var(--void); -webkit-text-size-adjust: 100%; scrollbar-color: #2a2724 #000; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  background: var(--void);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body.is-locked { overflow: hidden; height: 100vh; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--amber); color: #000; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 10px 16px; background: var(--amber); color: #000;
  font-family: 'Plex Mono', monospace; font-size: 12px; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ============================================================
   TYPE — condensed display, stacked
   ============================================================ */
.display, h1, h2 {
  font-variation-settings: 'wdth' 70, 'wght' 700;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: 0.002em;
  font-weight: 700;
}

/* the hero is three stacked lines — cap against viewport height as well as
   width so a short window never pushes it under the horizon bar */
.t-hero { font-size: clamp(3.2rem, min(10.6vw, 17svh), 11.8rem); }
.t-mega { font-size: clamp(3.2rem, 10vw, 11rem); }
.t-h2   { font-size: clamp(2.3rem, 5.4vw, 5.4rem); }
.t-h3   {
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
  font-variation-settings: 'wdth' 76, 'wght' 700;
  text-transform: uppercase; line-height: 0.92; letter-spacing: 0.004em;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.44; letter-spacing: -0.011em;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  max-width: 32ch;
}
.body {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.64; color: var(--steel); max-width: 46ch;
  font-variation-settings: 'wdth' 100, 'wght' 400;
}
.body strong { color: var(--bone); font-variation-settings: 'wdth' 100, 'wght' 500; }

.mono, .legend {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.688rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 500; color: var(--steel); font-variation-settings: normal;
}
.legend { display: flex; align-items: center; gap: 0.7em; }
.legend::before {
  content: ''; width: 5px; height: 5px; flex: none; background: var(--amber);
}
.legend--dim::before { background: var(--dim); }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(78px, 9.4vw, 148px); }
.section--tight { padding-block: clamp(58px, 6.6vw, 104px); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.2vw, 34px); }

.sec-head {
  display: grid; grid-template-columns: minmax(0,3fr) minmax(0,9fr);
  gap: clamp(18px, 2.2vw, 34px);
  padding-top: 22px; border-top: var(--hair) solid var(--rule);
  align-items: start;
}
.sec-head__index { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   THE MARK — single-ink engraving
   The single-ink amber conversion is baked into the asset, not
   computed at runtime. It used to be an SVG filter plus a screen
   blend, which meant re-evaluating a filter graph on every repaint
   of a position:fixed nav — expensive, and it showed. The ramp now
   runs once, offline, and ships as a transparent PNG.
   ============================================================ */
.mark {
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* ============================================================
   BOOT — "The Brand"
   A brand is a mark of ownership made with heat and iron. It burns
   in from the base, holds at white heat, then cools to the amber
   line the rest of the site is drawn in.
   ============================================================ */
#boot {
  position: fixed; inset: 0; z-index: 200; background: var(--void);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--gutter);
}
#boot[hidden] { display: none; }

.boot__brand {
  position: relative;
  width: min(380px, 56vw);
  aspect-ratio: 432 / 250;
}
.boot__brand .mark {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.boot__cool { opacity: 0; }
.boot__hot { opacity: 0; }

.boot__name {
  margin-top: 22px; text-align: center;
  font-variation-settings: 'wdth' 70, 'wght' 700;
  text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 0.9; letter-spacing: 0.01em;
  opacity: 0;
}
.boot__name span { display: block; font-family: 'Plex Mono', monospace;
  font-size: 0.563rem; letter-spacing: 0.28em; color: var(--steel);
  font-variation-settings: normal; margin-top: 10px; }

.boot__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); }
.boot__bar { position: relative; height: var(--hair); width: 100%; background: rgba(237,230,217,0.12); margin-bottom: 16px; }
.boot__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--amber); }
.boot__row { display: flex; justify-content: space-between; align-items: baseline; }
.boot__pct { font-family: 'Plex Mono', monospace; font-size: 0.688rem; color: var(--amber); letter-spacing: 0.1em; }

@media (prefers-reduced-motion: reduce) {
  .boot__cool { opacity: 1; }
  .boot__name { opacity: 1; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--t-mid) var(--ease-mass);
}
.nav::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: var(--hair);
  background: var(--rule); opacity: 0; transition: opacity var(--t-mid) var(--ease-mass);
}
/* No backdrop-filter. A fixed, full-width blur is re-computed every scroll
   frame and its cost scales with whatever is behind it — which, now that
   full-bleed photographs pass underneath, is expensive. On a black page a
   near-opaque fill is visually indistinguishable and free. */
.nav.is-stuck { background: rgba(0,0,0,0.9); }
.nav.is-stuck::after { opacity: 1; }

/* nav lockup: the mark carries the equity, the type carries the discipline */
.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark { width: 50px; height: auto; flex: none; }
.brand__txt { display: flex; flex-direction: column; gap: 4px; }
.brand__name {
  font-variation-settings: 'wdth' 72, 'wght' 700;
  text-transform: uppercase; font-size: 1.06rem; letter-spacing: 0.04em; line-height: 1;
}
.brand__sub {
  font-family: 'Plex Mono', monospace; font-weight: 500;
  font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); line-height: 1;
}
@media (max-width: 520px) {
  .brand__mark { width: 40px; }
  .brand__name { font-size: 0.94rem; }
  .brand__sub { font-size: 0.44rem; letter-spacing: 0.16em; }
}

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav__link {
  position: relative; font-family: 'Plex Mono', monospace; font-weight: 500;
  font-size: 0.688rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--steel); padding: 6px 0; transition: color var(--t-fast) var(--ease-snap);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: var(--hair); width: 100%;
  background: var(--amber); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-mass);
}
.nav__link:hover { color: var(--bone); }
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current='page'] { color: var(--amber); }

.nav__cross {
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--hair) solid var(--rule-strong); padding: 9px 14px;
  font-family: 'Plex Mono', monospace; font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.nav__cross:hover { color: #000; background: var(--bone); border-color: var(--bone); }
.nav__toggle { display: none; }

/* ============================================================
   CURTAIN
   ============================================================ */
#curtain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: var(--void); transform: scaleY(0); transform-origin: bottom;
  display: flex; align-items: center; justify-content: center;
}
#curtain .curtain__label {
  font-family: 'Plex Mono', monospace; font-size: 0.688rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); opacity: 0;
}

/* ============================================================
   THE HORIZON — the signature
   One line, always present: run-sheet progress, section marker,
   and the flat edge of the world. It never leaves the viewport.
   ============================================================ */
.horizon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  pointer-events: none; opacity: 0;
}
.horizon__rule { position: relative; height: var(--hair); background: rgba(237,230,217,0.13); }
/* scaleX, not width: width is a layout property and this updates on every
   scroll frame for the whole length of the page. The head is a separate
   element so it can translate instead of being squashed by the scale. */
.horizon__fill {
  position: absolute; inset: 0; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--amber-lo), var(--amber));
  will-change: transform;
}
.horizon__head {
  position: absolute; left: 0; top: -2px;
  width: 4px; height: 5px; background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(255,166,31,0.7);
  will-change: transform;
}
.horizon__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px var(--gutter) 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.horizon__mark { color: var(--amber); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 104px 0 clamp(74px, 6vw, 96px);   /* bottom clears the horizon bar */
  overflow: hidden;
}
.hero__gl { position: absolute; inset: 0; z-index: 0; }
.hero__gl canvas { width: 100%; height: 100%; display: block; }
.hero__gl::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 88% at 62% 58%, transparent 30%, rgba(0,0,0,0.5) 72%, rgba(0,0,0,0.95) 100%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.3) 18%, transparent 40%, rgba(0,0,0,0.6) 92%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: var(--hair) solid var(--rule);
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; }
.hero__title .lamp {
  display: inline-block; width: 0.09em; height: 0.09em; margin-left: 0.05em;
  background: var(--amber); vertical-align: baseline;
  box-shadow: 0 0 30px 4px rgba(255,166,31,0.4);
}
.hero__foot {
  display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  gap: clamp(20px, 3vw, 48px); align-items: end; margin-top: 32px;
}
.hero__scroll { display: flex; align-items: center; gap: 12px; justify-self: end; }
.hero__scroll-track { width: 54px; height: var(--hair); background: var(--rule-strong); position: relative; overflow: hidden; }
.hero__scroll-track::after {
  content: ''; position: absolute; inset: 0; background: var(--amber);
  animation: sweep 2.6s var(--ease-snap) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* ============================================================
   PAGE HEADER — inner pages
   ============================================================ */
.page-head {
  position: relative; min-height: 60svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 140px clamp(30px, 4vw, 54px); overflow: hidden;
}
.page-head__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: var(--hair) solid var(--rule);
}
.page-head__title { max-width: 15ch; }
.page-head__title .ln { display: block; overflow: hidden; }
.page-head__title .ln > span { display: block; }
.page-head__lede { margin-top: 28px; max-width: 44ch; }

/* ============================================================
   MANIFEST — the two divisions, stated as a mechanism
   ============================================================ */
.manifest { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 3vw, 54px); }
.manifest__side { display: flex; flex-direction: column; gap: 14px; }
.manifest__name {
  font-variation-settings: 'wdth' 72, 'wght' 700; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 0.9;
}
.manifest__link { color: var(--amber); }
/* the coupling between the two divisions, drawn rather than described */
.manifest__gear {
  position: relative; align-self: stretch;
  width: var(--hair); min-height: 180px;
  background: linear-gradient(to bottom, transparent, var(--rule-strong) 20%, var(--rule-strong) 80%, transparent);
  color: var(--amber); font-family: 'Plex Mono', monospace; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.manifest__gear::before {
  content: '\21C4'; position: absolute;
  background: var(--void); padding: 10px 6px; line-height: 1;
}
@media (max-width: 820px) {
  .manifest { grid-template-columns: 1fr; }
  .manifest__gear { display: none; }
}

/* ============================================================
   SERVICE ROLL — what Vaquero actually does
   ============================================================ */
.roll { border-top: var(--hair) solid var(--rule); }
.roll__item {
  position: relative; display: grid;
  grid-template-columns: 74px minmax(0,5fr) minmax(0,6fr);
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(18px, 2.1vw, 28px) 0;
  border-bottom: var(--hair) solid var(--rule);
  align-items: baseline;
  transition: background 0.5s var(--ease-mass);
}
.roll__item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s var(--ease-mass);
}
.roll__item:hover { background: rgba(237,230,217,0.02); }
.roll__item:hover::before { transform: scaleY(1); }
.roll__n { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em; color: var(--dim); padding-left: 16px; transition: color var(--t-fast); }
.roll__item:hover .roll__n { color: var(--amber); }
.roll__name {
  font-variation-settings: 'wdth' 76, 'wght' 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.5vw, 2.3rem); line-height: 0.94;
}
.roll__body { color: var(--steel); font-size: 0.95rem; line-height: 1.6; max-width: 56ch; }
@media (max-width: 900px) {
  .roll__item { grid-template-columns: 54px 1fr; }
  .roll__body { grid-column: 2; }
}

/* ============================================================
   DIVISION CARDS
   ============================================================ */
.divisions { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hair) solid var(--rule); }
.division {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: clamp(30px, 4vw, 62px) clamp(22px, 3vw, 52px) clamp(34px, 4vw, 62px);
  border-bottom: var(--hair) solid var(--rule);
  overflow: hidden;
  transition: background 0.6s var(--ease-mass);
}
.division + .division { border-left: var(--hair) solid var(--rule); }
.division::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform 0.65s var(--ease-mass);
}
.division:hover { background: rgba(255,166,31,0.045); }
.division:hover::after { transform: scaleX(1); }
.division__title {
  font-variation-settings: 'wdth' 70, 'wght' 700; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 0.86; margin-block: 6px 4px;
}
.division__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
.division__list li {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel);
  border: var(--hair) solid var(--rule); padding: 6px 9px;
}
.division__go {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Plex Mono', monospace; font-size: 0.688rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone);
}
.division__go span:last-child { transition: transform 0.45s var(--ease-mass); }
.division:hover .division__go span:last-child { transform: translateX(6px); }
@media (max-width: 860px) {
  .divisions { grid-template-columns: 1fr; }
  .division + .division { border-left: 0; }
}

/* ============================================================
   PIPELINE — the signal path, drawn as one
   Four nodes on a rail with a pulse running it. The section is
   about data moving through a chain, so it is drawn as a chain.
   ============================================================ */
.pipeline { position: relative; padding-top: 40px; }
.pipeline__rail {
  position: absolute; top: 5px; left: 0; right: 0; height: var(--hair);
  background: rgba(237,230,217,0.13); overflow: hidden;
}
.pipeline__pulse {
  position: absolute; inset: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: translateX(-110%);
}
.pipeline.is-live .pipeline__pulse { animation: pipePulse 4.2s var(--ease-snap) infinite; }
@keyframes pipePulse { to { transform: translateX(400%); } }

.pipeline__nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 34px); }
.pnode { position: relative; display: flex; flex-direction: column; gap: 12px; padding-right: 8px; }
.pnode__dot {
  position: absolute; top: -40px; left: 0;
  width: 9px; height: 9px; margin-top: 1px;
  background: var(--dim);
  transition: background 0.4s var(--ease-mass), box-shadow 0.4s var(--ease-mass);
}
.pnode.is-armed .pnode__dot { background: var(--amber); box-shadow: 0 0 14px 2px rgba(255,166,31,0.55); }
.pnode__n {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem;
  letter-spacing: 0.18em; color: var(--dim);
  transition: color 0.4s var(--ease-mass);
}
.pnode.is-armed .pnode__n { color: var(--amber); }
.pnode__title {
  font-variation-settings: 'wdth' 74, 'wght' 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1;
}
.pnode__body { color: var(--steel); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 900px) {
  .pipeline__nodes { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .pnode:nth-child(n+3) .pnode__dot { display: none; }
}
@media (max-width: 560px) {
  .pipeline { padding-top: 0; }
  .pipeline__rail { display: none; }
  .pipeline__nodes { grid-template-columns: 1fr; row-gap: 30px; }
  .pnode__dot { display: none !important; }
}

/* ============================================================
   WORKBENCH — show the screens instead of listing them
   A tab rail on the left, a schematic of the actual workspace on
   the right. Not a screenshot: a diagram of what you would be
   looking at, drawn in the same ink as the rest of the site.
   ============================================================ */
.workbench {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 48px);
  border-top: var(--hair) solid var(--rule);
}
.wb__tabs { display: flex; flex-direction: column; }
.wb__tab {
  position: relative; text-align: left;
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px;
  padding: 18px 14px 18px 0;
  border-bottom: var(--hair) solid var(--rule);
  transition: background 0.4s var(--ease-mass);
}
.wb__tab::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s var(--ease-mass);
}
.wb__tab:hover { background: rgba(237,230,217,0.02); }
.wb__tab[aria-selected='true']::before { transform: scaleY(1); }
.wb__tab-n {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em;
  color: var(--dim); padding-left: 14px; transition: color var(--t-fast);
}
.wb__tab[aria-selected='true'] .wb__tab-n { color: var(--amber); }
.wb__tab-name {
  font-variation-settings: 'wdth' 82, 'wght' 700; text-transform: uppercase;
  font-size: 1.12rem; line-height: 1; color: var(--steel);
  transition: color var(--t-fast);
}
.wb__tab[aria-selected='true'] .wb__tab-name { color: var(--bone); }
.wb__tab-desc { grid-column: 2; color: var(--steel); font-size: 0.88rem; line-height: 1.5; }

.wb__stage { position: relative; min-height: 372px; }
.wb__panel {
  position: absolute; inset: 0;
  border: var(--hair) solid var(--rule);
  background: linear-gradient(180deg, rgba(237,230,217,0.025), transparent 55%);
  padding: 20px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.wb__panel[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
.wb__cap {
  margin-top: auto; padding-top: 16px;
  font-family: 'Plex Mono', monospace; font-size: 0.563rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.wb__hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: var(--hair) solid var(--rule);
}
.wb__hdr .mono { color: var(--amber); }
.wb__hdr span:last-child { color: var(--steel); }

/* --- schematic: setup comparison --- */
.sch-row {
  display: grid; grid-template-columns: 1fr 62px 62px 58px;
  gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: var(--hair) solid rgba(237,230,217,0.05);
  font-size: 0.86rem;
}
.sch-row span:nth-child(2), .sch-row span:nth-child(3) {
  font-family: 'Plex Mono', monospace; font-size: 0.75rem; text-align: right; color: var(--steel);
}
.sch-row span:nth-child(3) { color: var(--bone); }
.sch-row__d { font-family: 'Plex Mono', monospace; font-size: 0.75rem; text-align: right; color: var(--amber); }
.sch-row__d--flat { color: var(--dim); }

/* --- schematic: bars (corner map, history) --- */
.sch-bars { display: flex; align-items: flex-end; gap: 5px; height: 190px; margin-bottom: 12px; }
.sch-bar { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.sch-bar i {
  display: block; width: 100%; background: var(--amber-lo); transform-origin: bottom;
  transform: scaleY(0);
}
.sch-bar--loss i { background: var(--amber); }
.sch-bar b {
  font-family: 'Plex Mono', monospace; font-size: 0.5rem; font-weight: 400;
  color: var(--dim); text-align: center; padding-top: 6px;
}

/* --- schematic: stint timeline --- */
.sch-stints { display: flex; flex-direction: column; gap: 12px; }
.sch-stint { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.sch-stint > span:first-child { font-family: 'Plex Mono', monospace; font-size: 0.625rem; color: var(--steel); }
.sch-track { position: relative; height: 22px; background: rgba(237,230,217,0.05); overflow: hidden; }
.sch-track i {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--amber-lo));
  transform-origin: left; transform: scaleX(0);
}
.sch-track b {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bone);
  font-size: 0; opacity: 0.55;
}

/* --- schematic: gameplan lines --- */
.sch-plan { display: flex; flex-direction: column; gap: 14px; }
.sch-plan li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; line-height: 1.4; }
.sch-plan li > span:first-child { font-family: 'Plex Mono', monospace; font-size: 0.625rem; color: var(--amber); padding-top: 3px; }
.sch-plan li > span:last-child { color: var(--bone); }

/* --- schematic: sparkline --- */
.sch-spark { width: 100%; height: 196px; overflow: visible; }
.sch-spark path { fill: none; vector-effect: non-scaling-stroke; }
.sch-spark .trace { stroke: var(--amber); stroke-width: 1.6; }
.sch-spark .trend { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 3 4; }
.sch-spark rect { fill: var(--amber); }

@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; }
  .wb__stage { min-height: 400px; }
}

/* ============================================================
   SESSION REPORT — the product's actual output, as the visual
   Findings arrive one at a time under a scanning line, each with
   the corner it was found in and what it is worth in lap time.
   ============================================================ */
.report {
  position: relative;
  border: var(--hair) solid var(--rule);
  background: linear-gradient(180deg, rgba(237,230,217,0.028), transparent 60%);
  overflow: hidden;
}
.report::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--hair);
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: translateX(-100%);
}
.report.is-scanning::before { animation: reportScan 2.6s var(--ease-snap) infinite; }
@keyframes reportScan { to { transform: translateX(100%); } }

.report__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 18px; border-bottom: var(--hair) solid var(--rule);
}
.report__head .mono { color: var(--amber); }
.report__head .report__stamp { color: var(--steel); }

.report__row {
  display: grid; grid-template-columns: 42px 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 15px 18px;
  border-bottom: var(--hair) solid var(--rule);
  opacity: 0;
}
.report__corner {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.1em;
  color: var(--amber);
}
.report__what {
  font-variation-settings: 'wdth' 96, 'wght' 500;
  font-size: 1rem; line-height: 1.25;
}
.report__what em {
  display: block; font-style: normal; margin-top: 5px;
  font-family: 'Plex Mono', monospace; font-size: 0.563rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel);
  font-variation-settings: normal;
}
.report__gain {
  font-family: 'Plex Mono', monospace; font-size: 0.875rem;
  color: var(--amber); font-feature-settings: 'tnum' 1; white-space: nowrap;
}
.report__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 17px 18px; background: rgba(255,166,31,0.05);
}
.report__sum {
  font-variation-settings: 'wdth' 78, 'wght' 700;
  font-size: 1.9rem; line-height: 1; color: var(--amber);
  font-feature-settings: 'tnum' 1;
}
@media (prefers-reduced-motion: reduce) {
  .report__row { opacity: 1; }
  .report.is-scanning::before { animation: none; }
}

/* ============================================================
   PLATE — full-bleed photographic band
   The sources vary in colour temperature, so each is pulled toward
   neutral and faded into black top and bottom — the image emerges
   from the page rather than sitting on it. The grade is baked into
   the file: a CSS filter here would be re-rasterised every frame of
   the scroll-tied drift, on a layer the width of the viewport.
   ============================================================ */
.plate {
  position: relative;
  width: 100%;
  height: clamp(300px, 48vh, 560px);
  overflow: hidden;
  margin: 0;
}
.plate img {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%;
  object-fit: cover;
  will-change: transform;
}
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.22) 66%, #000 100%),
    radial-gradient(135% 96% at 50% 50%, transparent 42%, rgba(0,0,0,0.45) 100%);
}
.plate__cap {
  position: absolute; left: var(--gutter); bottom: 24px; z-index: 2;
  color: var(--steel);
}
@media (prefers-reduced-motion: reduce) { .plate img { transform: none !important; } }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull {
  border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule);
  padding-block: clamp(60px, 9vw, 140px); text-align: center; position: relative; overflow: hidden;
}
.pull__line {
  font-variation-settings: 'wdth' 70, 'wght' 700; text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 5.6rem); line-height: 0.88;
}
.pull__line--amber { color: var(--amber); }
.pull__line--dim { color: var(--dim); }

/* ============================================================
   LEDGER / LISTS
   ============================================================ */
.ledger { border-top: var(--hair) solid var(--rule); }
.ledger__row {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(14px, 2vw, 32px); padding: 18px 0;
  border-bottom: var(--hair) solid var(--rule); align-items: baseline;
  transition: background 0.4s var(--ease-mass);
}
.ledger__row:hover { background: rgba(237,230,217,0.02); }
.ledger__k { font-variation-settings: 'wdth' 92, 'wght' 500; font-size: 1.05rem; }
.ledger__v { color: var(--steel); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 720px) { .ledger__row { grid-template-columns: 1fr; gap: 6px; } }

.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); border-top: var(--hair) solid var(--rule); border-left: var(--hair) solid var(--rule); }
.tag {
  border-right: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule);
  padding: 18px; min-height: 96px; display: flex; flex-direction: column; gap: 12px;
  transition: background 0.45s var(--ease-mass);
}
.tag:hover { background: rgba(255,166,31,0.05); }
.tag__idx { font-family: 'Plex Mono', monospace; font-size: 0.563rem; letter-spacing: 0.18em; color: var(--dim); }
.tag__name { font-variation-settings: 'wdth' 94, 'wght' 500; font-size: 1.02rem; line-height: 1.16; margin-top: auto; }

.stack { border-top: var(--hair) solid var(--rule); }
.stack__row {
  border-bottom: var(--hair) solid var(--rule); padding-block: clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0,3fr) minmax(0,9fr); gap: clamp(18px, 2.4vw, 40px);
}
.stack__head { display: flex; flex-direction: column; gap: 12px; }
.stack__badge {
  align-self: flex-start; font-family: 'Plex Mono', monospace; font-size: 0.563rem;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 9px;
  border: var(--hair) solid var(--rule-strong); color: var(--steel);
}
.stack__badge--live { color: var(--amber); border-color: rgba(255,166,31,0.5); }
.stack__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 24px; }
.stack__list li { font-size: 0.95rem; line-height: 1.5; color: var(--steel); padding: 7px 0 7px 18px; position: relative; }
.stack__list li::before { content: ''; position: absolute; left: 0; top: 0.86em; width: 6px; height: var(--hair); background: var(--dim); }
.stack__row--live .stack__list li { color: var(--bone); }
.stack__row--live .stack__list li::before { background: var(--amber); }
@media (max-width: 1080px) { .stack__row { grid-template-columns: 1fr; gap: 18px; } .sec-head { grid-template-columns: 1fr; } }

/* ============================================================
   CTA / LINKS
   ============================================================ */
.cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  align-self: flex-start; width: fit-content;
  padding: 17px 26px; border: var(--hair) solid var(--bone);
  font-family: 'Plex Mono', monospace; font-weight: 500;
  font-size: 0.688rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone); overflow: hidden;
  transition: color 0.45s var(--ease-mass), border-color 0.45s var(--ease-mass);
}
.cta::before {
  content: ''; position: absolute; inset: 0; background: var(--amber);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-mass);
}
.cta > * { position: relative; z-index: 1; }
.cta:hover { color: #000; border-color: var(--amber); }
.cta:hover::before { transform: scaleX(1); transform-origin: left; }
.cta__arrow { transition: transform 0.45s var(--ease-mass); }
.cta:hover .cta__arrow { transform: translateX(4px); }

.link-inline { border-bottom: var(--hair) solid var(--dim); color: var(--bone); transition: border-color var(--t-fast), color var(--t-fast); }
.link-inline:hover { border-color: var(--amber); color: var(--amber); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative; overflow: hidden;
  border-top: var(--hair) solid var(--rule);
  padding-block: clamp(46px, 6vw, 84px) 56px;
}
.footer__grid { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,3fr) minmax(0,3fr); gap: clamp(24px, 3vw, 48px); }

/* the third and final sighting of the mark, at ghost weight */
.footer__mark {
  position: absolute; right: calc(var(--gutter) * -0.2); bottom: -4%;
  width: min(560px, 42vw); opacity: 0.11;
  pointer-events: none; z-index: 0;
}
.footer .shell { position: relative; z-index: 1; }

.footer__word {
  font-variation-settings: 'wdth' 68, 'wght' 700; text-transform: uppercase;
  line-height: 0.8; letter-spacing: 0.004em;
  font-size: clamp(3.4rem, 14vw, 15rem);
  margin-top: clamp(40px, 6vw, 90px);
}
.footer__word span {
  display: block; color: var(--dim);
  font-family: 'Plex Mono', monospace; font-variation-settings: normal;
  font-size: clamp(0.6rem, 1.32vw, 1.05rem);
  letter-spacing: 0.34em; margin-top: 14px;
}
@media (max-width: 860px) { .footer__mark { width: 60vw; opacity: 0.08; } }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: 0.92rem; color: var(--steel); transition: color var(--t-fast); width: fit-content; }
.footer__col a:hover { color: var(--amber); }
.footer__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(30px, 4vw, 56px); padding-top: 20px; border-top: var(--hair) solid var(--rule);
}

/* ============================================================
   FORM
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: var(--hair) solid var(--rule-strong);
  color: var(--bone); font-family: 'Archivo', sans-serif; font-size: 1.02rem;
  padding: 12px 0; width: 100%; transition: border-color var(--t-fast);
}
.field select { appearance: none; cursor: pointer; }
.field select option { background: #0F0D0B; color: var(--bone); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field textarea { resize: vertical; min-height: 96px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-note { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.form-note[data-state='error'] { color: var(--fault); }
.form-note[data-state='ok'] { color: var(--nominal); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   REVEALS / CURSOR
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(24px); }
.js-off [data-reveal] { opacity: 1; transform: none; }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 180; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  /* no blend mode: this element moves every frame, and a blend forces the
     compositor to re-read the backdrop under it each time */
  border: var(--hair) solid rgba(255,166,31,0.85); border-radius: 50%;
  opacity: 0;
  transition: width 0.32s var(--ease-mass), height 0.32s var(--ease-mass), margin 0.32s var(--ease-mass), opacity 0.3s;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hot { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.cursor__dot { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--amber); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .hero__foot { grid-template-columns: 1fr; gap: 26px; }
  .hero__scroll { justify-self: start; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
    position: fixed; inset: 0; z-index: 95; background: var(--void);
    padding: 96px var(--gutter) var(--gutter); justify-content: flex-start;
  }
  .nav__links.is-open .nav__link { font-size: 1.05rem; letter-spacing: 0.1em; color: var(--bone); }
  .nav__toggle { display: flex; flex-direction: column; gap: 5px; z-index: 100; padding: 8px; }
  .nav__toggle span { display: block; width: 22px; height: var(--hair); background: var(--bone); transition: transform 0.3s var(--ease-mass), opacity 0.2s; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .footer__grid { grid-template-columns: 1fr; }
  .horizon__row .mono:nth-child(2) { display: none; }
}
@media (max-width: 620px) { .roll__item { grid-template-columns: 44px 1fr; } .roll__n { padding-left: 0; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cursor { display: none; }
  .hero__scroll-track::after { animation: none; transform: none; }
}