/* ==========================================================================
   Evercomm reference build - FLUX edition

   The site as a signal environment. The architecture, in six decisions:

   1. No menu bar and no top strip. The page is a WebGL particle field with
      the content floating over it. Chrome is reduced to corner instruments:
      a wordmark chip top left, an index trigger top right, a progress rail
      on the right edge. The index is a full-screen overlay built on a
      <details>, so the whole site still navigates with no script at all.
   2. The field is the brand. A GLSL point terrain, acid lime on carbon,
      driven by time, scroll and pointer. Each page sets its own energy
      level: the home page runs hot, reading pages run calm. If WebGL or
      motion is unavailable, the field steps down to a still frame, then to
      the CSS gradient underneath, and the page never notices.
   3. No bands. Sections are transparent and let the field through. The
      alternate section is a slightly deeper veil, the dark section is the
      void itself, and rhythm comes from distance, not from stripes.
   4. Grids are circuit boards. Cells are separated by 1px seams of light,
      so a card grid reads as one connected instrument rather than a row of
      boxes. No radius anywhere: Flux is all edge.
   5. Numbers are structural. Step counters are ghost numerals drawn in
      outline, eyebrows are mono coordinates, and every label that can be a
      readout is set in Plex Mono.
   6. Type does the shouting. Space Grotesk at poster sizes, sentence case,
      tight tracking, with a single blinking caret after the home headline
      as the only decoration a headline is allowed.

   Signature element: the living field itself, plus the edge rail that
   reports scroll progress the way a flight instrument reports altitude.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-var-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* the void and what floats on it */
  --void: #060806;
  --void-2: #0A0D0A;
  --veil: rgba(8, 11, 8, .72);
  --veil-deep: rgba(6, 8, 6, .9);
  --panel: #0D110D;
  --panel-2: #111611;
  --glass: rgba(13, 17, 13, .66);

  /* ink */
  --ink: #EDF3E8;
  --mute: #98A496;
  --faint: #626E60;

  /* the single signal colour, and its supporting states */
  --acc: #C8F542;
  --acc-soft: #DFFF7A;
  --acc-deep: #8FBE1E;
  --acc-ink: #141A05;
  --acc-dim: rgba(200, 245, 66, .14);
  --glow: rgba(200, 245, 66, .07);
  --yes: #82E892;
  --err: #FF7D6E;
  --warn: #E5C15A;
  --info: #6FC7E3;

  /* hairlines */
  --line: rgba(196, 224, 178, .13);
  --line-strong: rgba(196, 224, 178, .3);

  /* aliases the shared content markup writes inline */
  --brand: var(--acc);
  --brand-bright: var(--acc-soft);
  --brand-deep: var(--acc-deep);
  --amber: var(--warn);
  --muted: var(--mute);

  --disp: "Space Grotesk", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap-w: 1330px;
  --gutter: clamp(20px, 5vw, 80px);
  --sec: clamp(4.5rem, 9vw, 8.5rem);

  /* motion: deliberate, mechanical. Nothing bounces. */
  --in: 180ms;
  --out: 700ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
  background: var(--void);
  /* The still frame under the WebGL canvas: the edition's look with no
     script, no GL context, or reduced data. It is the same composition the
     shader draws: a low horizon of signal over carbon. */
  background-image:
    radial-gradient(120% 60% at 50% 108%, rgba(200, 245, 66, .1), transparent 62%),
    radial-gradient(70% 42% at 18% -6%, rgba(200, 245, 66, .05), transparent 60%),
    radial-gradient(56% 40% at 88% 4%, rgba(111, 199, 227, .04), transparent 60%);
  background-attachment: fixed;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 16.25px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body.menu-lock { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
  /* everything sits over a live field: a soft halo keeps the words first */
  text-shadow: 0 2px 26px rgba(3, 5, 3, .9), 0 0 8px rgba(3, 5, 3, .55);
}
h1 { font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.6rem); font-weight: 700; letter-spacing: -.034em; line-height: .96; }
h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.014em; line-height: 1.25; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .18em;
  transition: color var(--in) var(--ease), text-decoration-color var(--in) var(--ease);
}
a:hover { color: var(--acc-soft); text-decoration-color: var(--acc); }

ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .3rem; }
strong, b { color: var(--ink); font-weight: 650; }
em, i { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; }
small { font-size: .8125rem; }
code { font-family: var(--mono); font-size: .85em; color: var(--acc-soft); }
::selection { background: var(--acc); color: var(--acc-ink); }

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

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 14px; top: -80px; z-index: 300;
  background: var(--acc); color: var(--acc-ink);
  padding: 10px 16px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.muted { color: var(--mute); }
.mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; }
.nowrap { white-space: nowrap; }
.ext { font-size: .72em; opacity: .7; }
.m { font-family: var(--mono); }

/* ---------- the field ---------- */
.field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

main, .ftr { position: relative; z-index: 1; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap-w));
  margin-inline: auto;
}
.wrap--narrow { max-width: 880px; }

/* ==========================================================================
   1. CORNER INSTRUMENTS
   ========================================================================== */

/* wordmark chip, top left */
.mark {
  position: fixed; top: 18px; left: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 9px 13px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--in) var(--ease);
}
.mark:hover { border-color: var(--line-strong); }
.mark__sq {
  width: 9px; height: 9px; background: var(--acc);
  box-shadow: 0 0 12px rgba(200, 245, 66, .55);
}
.mark__word { font-weight: 650; font-size: .9375rem; letter-spacing: -.01em; }
.mark__ed {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acc);
  border-left: 1px solid var(--line-strong); padding-left: .55rem;
}

/* ---------- the index overlay ---------- */
.omenu { position: fixed; top: 18px; right: 20px; z-index: 70; }
.omenu__btn {
  list-style: none;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 10px 15px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em;
  text-transform: uppercase;
  transition: border-color var(--in) var(--ease), color var(--in) var(--ease);
  user-select: none;
}
.omenu__btn::-webkit-details-marker { display: none; }
.omenu__btn:hover { border-color: var(--acc); color: var(--acc-soft); }
.omenu__ico { position: relative; width: 11px; height: 11px; }
.omenu__ico::before, .omenu__ico::after {
  content: ""; position: absolute; background: var(--acc);
  transition: transform var(--in) var(--ease);
}
.omenu__ico::before { left: 0; top: 5px; width: 11px; height: 1.5px; }
.omenu__ico::after { left: 5px; top: 0; width: 1.5px; height: 11px; }
.omenu[open] .omenu__ico::after { transform: rotate(90deg) scaleY(0); }
.omenu[open] .omenu__ico::before { transform: rotate(180deg); }
.omenu[open] .omenu__btn { border-color: var(--acc); }

.omenu__panel {
  position: fixed; inset: 0; z-index: 69;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(5, 7, 5, .9);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  padding: clamp(84px, 14vh, 130px) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  animation: omenu-in 340ms var(--ease);
}
/* A closed index is gone entirely: some engines still lay out fixed
   descendants of a closed <details>, and an invisible fixed panel still
   stretches the page. */
.omenu:not([open]) .omenu__panel { display: none; }
@keyframes omenu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.omenu__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--wrap-w); margin-inline: auto;
}
.omenu__nav { min-width: 0; }
.omenu__lbl { letter-spacing: inherit; }
.omenu__h {
  margin: 0 0 1.1rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint);
}
.omenu__hn { color: var(--acc); margin-left: .6em; }
.omenu__root { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.mnav__group { break-inside: avoid; margin-bottom: 1.8rem; }
.mnav__title {
  margin: 0 0 .55rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--acc);
}
.mnav__list { margin: 0; padding: 0; list-style: none; }
.mnav__sub, .mnav__link {
  display: block; padding: .14rem 0;
  font-family: var(--disp); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.16;
  color: var(--ink); text-decoration: none;
  transition: color var(--in) var(--ease), transform var(--in) var(--ease);
}
.mnav__sub:hover, .mnav__link:hover { color: var(--acc-soft); transform: translateX(6px); }
.mnav__link { color: var(--acc); }

.omenu__side { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.omenu__block { width: 100%; }
.omenu__meta { font-family: var(--mono); font-size: .75rem; line-height: 1.7; color: var(--faint); max-width: 34ch; }

/* this-page index inside the overlay */
.pidx { margin: 0; padding: 0; list-style: none; }
.pidx__i { margin: 0; }
.pidx__a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--in) var(--ease), color var(--in) var(--ease);
}
.pidx__a:hover { color: var(--acc-soft); border-color: var(--line-strong); }
.pidx__n { font-family: var(--mono); font-size: .6875rem; color: var(--acc); }
.pidx__l { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.pidx__t { margin-left: auto; font-size: .8125rem; color: var(--faint); text-align: right; }

/* edition switch, inside the overlay and in the footer */
.ed__switch { display: flex; flex-direction: column; align-items: flex-start; }
.ed__opt, .ed__all {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .3rem 0;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: none;
  transition: color var(--in) var(--ease), transform var(--in) var(--ease);
}
.ed__opt:hover, .ed__all:hover { color: var(--acc-soft); transform: translateX(4px); }
.ed__dot { width: 8px; height: 8px; background: var(--faint); }
.ed__opt--console .ed__dot { background: #2DD4A7; }
.ed__opt--logbook .ed__dot { background: #D8A24A; }
.ed__opt--datum .ed__dot { background: #5EA8E8; }
.ed__opt--aurora .ed__dot { background: #9E8CFF; }
.ed__opt--flux .ed__dot { background: var(--acc); }
.ed__all { margin-top: .5rem; color: var(--faint); text-transform: uppercase; font-size: .6875rem; letter-spacing: .2em; }

/* ---------- the edge rail ---------- */
.edge {
  position: fixed; right: 26px; top: 50%; z-index: 40;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}
.edge__sec {
  margin: 0; writing-mode: vertical-rl;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--faint);
  max-height: 34vh; overflow: hidden;
}
.edge__rail { position: relative; width: 1px; height: 30vh; background: var(--line-strong); }
.edge__fill {
  position: absolute; left: -0.5px; top: 0; width: 2px; height: 100%;
  background: var(--acc); transform-origin: top; transform: scaleY(0);
  box-shadow: 0 0 10px rgba(200, 245, 66, .5);
}
@media (max-width: 900px) { .edge { display: none; } }

/* ==========================================================================
   2. THE HERO: a full viewport of field with the argument floating on it
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: clamp(6.5rem, 13vh, 10rem) 0 clamp(3rem, 7vh, 5rem);
}
.hero h1 { margin-bottom: .35em; }
/* the caret: the one decoration a headline is allowed */
.hero:not(.hero--page) h1::after {
  content: ""; display: inline-block;
  width: .4em; height: .74em; margin-left: .1em;
  background: var(--acc); vertical-align: -.05em;
  box-shadow: 0 0 26px rgba(200, 245, 66, .5);
  animation: caret 1.7s steps(2, jump-none) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__in { position: relative; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero__sub {
  font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem); font-weight: 500;
  letter-spacing: -.012em; line-height: 1.32; color: var(--ink);
  max-width: 30ch; margin-bottom: .9rem;
}
.hero__body, .hero__sub, .lede, .quote p { text-shadow: 0 1px 18px rgba(3, 5, 3, .85), 0 0 6px rgba(3, 5, 3, .5); }
.hero__body { color: var(--mute); max-width: 54ch; font-size: 1rem; }
.hero--page .hero__body { font-size: 1.0625rem; }

/* inner pages: the same instrument, run lower and tighter */
.hero--page {
  min-height: 0;
  padding-top: clamp(7.5rem, 17vh, 12rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero--page h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem); }

/* the scroll cue lives only on the home hero */
.hero:not(.hero--page)::after {
  content: "Scroll";
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--faint);
  padding-bottom: 26px;
  background: linear-gradient(var(--acc), var(--acc)) 50% 100% / 1px 18px no-repeat;
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { background-size: 1px 10px; opacity: .7; }
  50% { background-size: 1px 20px; opacity: 1; }
}

/* breadcrumbs: coordinates, not a trail */
.crumbs {
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .2rem .8rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.crumbs li { margin: 0; display: flex; gap: .8rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--acc); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--acc-soft); }

/* ==========================================================================
   3. SECTIONS: transparent chapters over the field
   ========================================================================== */
.sec { position: relative; padding: var(--sec) 0; }
.sec--tight { padding: calc(var(--sec) * .62) 0; }
/* the alternate section: a deeper veil, not a band */
.sec--alt {
  background: linear-gradient(180deg, transparent, rgba(4, 6, 4, .72) 12%, rgba(4, 6, 4, .72) 88%, transparent);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* the dark section is the void itself: no veil at all */
.sec--dark { background: transparent; }
.sec--line { border-top: 1px solid var(--line); }

.eyebrow {
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--acc);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--acc); flex: none; }

.sec-head { margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.sec-head h2 { max-width: 20ch; }
.sec-head .lede { max-width: 58ch; }
.sec-head--split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.lede {
  color: var(--mute); font-size: 1.0625rem; line-height: 1.6;
  text-shadow: 0 1px 14px rgba(3, 5, 3, .95), 0 0 10px rgba(3, 5, 3, .7), 0 0 3px rgba(3, 5, 3, .8);
}
.lede--lg { font-size: clamp(1.15rem, 1rem + .8vw, 1.375rem); line-height: 1.5; color: var(--ink); }
.balance { text-wrap: balance; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.grid--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sticky { position: sticky; top: 90px; }

/* ==========================================================================
   4. CONTROLS
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.5rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--ink);
  background: transparent; cursor: pointer;
  transition: background var(--in) var(--ease), color var(--in) var(--ease),
              border-color var(--in) var(--ease), transform var(--in) var(--ease),
              box-shadow var(--in) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn--primary:hover {
  background: var(--acc-soft); border-color: var(--acc-soft); color: var(--acc-ink);
  box-shadow: 0 8px 34px -8px rgba(200, 245, 66, .45);
}
.btn--ghost, .btn--onDark { color: var(--ink); }
.btn--ghost:hover, .btn--onDark:hover { border-color: var(--acc); color: var(--acc-soft); }
.btn--sm { padding: .7rem 1.05rem; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--acc);
  display: inline-flex; gap: .5rem; align-items: center;
}
.link-arrow:hover { color: var(--acc-soft); }

/* ==========================================================================
   5. GRIDS AND CARDS: circuit boards, not boxes
   ========================================================================== */
.grid { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--veil);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--mute);
  transition: background var(--in) var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.card:hover { background: var(--veil-deep); }
.card:hover::before { transform: scaleX(1); }
.card h3 { color: var(--ink); }
.card p { font-size: .9375rem; }
.card__num {
  display: block; margin-bottom: 1.1rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--acc);
}
.card__k {
  display: block; margin-bottom: .55rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.card__foot {
  margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .75rem; color: var(--faint);
}
.card--hl { background: linear-gradient(160deg, var(--acc-dim), var(--veil) 55%); }
.card--hl::before { transform: scaleX(1); }
.card--pad { padding: clamp(1.6rem, 3vw, 2.4rem); }
.card--link { color: var(--mute); text-decoration: none; }
.card--link::after {
  content: "\2197"; position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--mono); color: var(--faint);
  transition: color var(--in) var(--ease), transform var(--in) var(--ease);
}
.card--link:hover::after { color: var(--acc); transform: translate(3px, -3px); }

/* ==========================================================================
   6. THE TERMINAL PANEL: the engine made visible
   ========================================================================== */
.panel {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 90px var(--glow), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.panel__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  color: var(--faint);
}
.panel__dot { width: 7px; height: 7px; border: 1px solid var(--line-strong); }
.panel__dot:first-child { background: var(--acc); border-color: var(--acc); }
.panel__title { margin-left: .4rem; }
.panel__badge {
  margin-left: auto; padding: 2px 7px;
  border: 1px solid var(--acc); color: var(--acc);
  text-transform: uppercase; letter-spacing: .18em; font-size: .5625rem;
}
.panel__body { padding: 1.1rem 1.2rem 1.2rem; }
.panel__q {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.6;
  color: var(--ink); margin-bottom: 1rem;
}
.panel__prompt {
  display: inline-block; margin-right: .7rem; padding: 1px 8px;
  background: var(--acc); color: var(--acc-ink);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
}
.panel__tbl { font-family: var(--mono); font-size: .75rem; margin-bottom: 1rem; }
.panel__tbl th {
  text-align: left; padding: .45rem .6rem .45rem 0;
  font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  font-size: .5625rem; color: var(--faint); border-bottom: 1px solid var(--line-strong);
}
.panel__tbl td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.panel__tbl td:last-child, .panel__tbl th:last-child { text-align: right; padding-right: 0; color: var(--ink); }
.panel__tbl .is-total td { color: var(--acc); border-bottom-color: var(--acc); font-weight: 500; }
.panel__foot { font-family: var(--mono); font-size: .6875rem; color: var(--mute); margin-bottom: .35rem; }
.panel__ok { color: var(--yes); }

/* ==========================================================================
   7. READOUTS: the stat rail, the trust strip, the wordmark wall
   ========================================================================== */
.rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-strong); background: var(--veil);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.rail__i { padding: 1.05rem 1.2rem; border-left: 1px solid var(--line); }
.rail__i:first-child { border-left: 0; }
.rail__k {
  margin: 0 0 .4rem; font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.rail__v { margin: 0; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; color: var(--ink); }

.strip__lead {
  max-width: 62ch; margin: 0 auto 1.8rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; text-align: center; color: var(--faint); line-height: 1.9;
}
.wall {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.2rem clamp(1.8rem, 4vw, 3.4rem);
}
.wall__i {
  margin: 0; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.7rem);
  color: var(--faint); white-space: nowrap;
  transition: color var(--in) var(--ease);
}
.wall__i:hover { color: var(--acc-soft); }

/* ==========================================================================
   8. STRUCTURES: layers, ladder, journey, pipe, ticks
   ========================================================================== */
.layers { border-top: 1px solid var(--line-strong); }
.layer {
  position: relative; display: grid;
  grid-template-columns: 132px minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 1.2rem; align-items: baseline;
  padding: 1.15rem .2rem; border-bottom: 1px solid var(--line);
  transition: background var(--in) var(--ease), padding-left var(--in) var(--ease);
}
.layer:hover { background: var(--acc-dim); padding-left: .8rem; }
.layer__k { font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.layer__t { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.layer__d { margin: 0; font-size: .9375rem; color: var(--mute); }
.layer__tag {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc);
  border: 1px solid var(--acc-dim); padding: 2px 7px; margin-left: .6rem;
  vertical-align: .12em; display: inline-block;
}
.layer--hl { border-left: 2px solid var(--acc); padding-left: .8rem; }

.ladder { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ladder__i { position: relative; background: var(--veil); padding: clamp(1.3rem, 2.4vw, 1.9rem); overflow: hidden; }
.ladder__n {
  margin: 0 0 .9rem;
  font-family: var(--mono); font-weight: 700; font-size: 3.1rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--faint);
  transition: -webkit-text-stroke-color var(--in) var(--ease);
}
.ladder__i:hover .ladder__n { -webkit-text-stroke-color: var(--acc); }
.ladder__t { color: var(--ink); }
.ladder__d { margin: 0; font-size: .9375rem; color: var(--mute); }

.journey {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.journey__i { position: relative; padding: 1.6rem 1.2rem 0 0; }
.journey__i::before {
  content: ""; position: absolute; top: -4.5px; left: 0;
  width: 8px; height: 8px; background: var(--void); border: 1px solid var(--acc);
  transition: background var(--in) var(--ease);
}
.journey__i:hover::before { background: var(--acc); }
.journey__s {
  margin: 0 0 .7rem; font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acc);
}
.journey__i h3 { font-size: 1.0625rem; }
.journey__i p:last-child { font-size: .875rem; color: var(--mute); }

/* the pipeline figure: stages on a rail, engine as the base plate */
.pipe { margin: 0; }
.pipe__row {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong);
}
.pipe__i { background: var(--veil); padding: 1.2rem 1.2rem 1.35rem; }
.pipe__i h3 { font-size: 1rem; }
.pipe__i p:last-child { font-size: .875rem; color: var(--mute); margin: 0; }
.pipe__k {
  margin: 0 0 .8rem; font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
}
.pipe__i--hl { background: linear-gradient(160deg, var(--acc-dim), var(--veil) 60%); }
.pipe__i--hl .pipe__k { color: var(--acc); }
.pipe__base {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 1.2rem; border: 1px solid var(--line-strong); border-top: 0;
  background: var(--veil-deep);
  font-size: .8125rem; color: var(--mute);
}
.pipe__base p { margin: 0; }
.pipe__badge {
  flex: none; font-family: var(--mono); font-size: .5625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--acc-ink); background: var(--acc);
  padding: 3px 9px;
}
.pipe figcaption, .fig figcaption {
  margin-top: .9rem; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--faint);
}

.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 2rem; }
.ticks li { margin: 0; padding-left: 1.5rem; position: relative; color: var(--mute); font-size: .9375rem; }
.ticks li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  font-family: var(--mono); color: var(--acc); font-weight: 500;
}

/* ==========================================================================
   9. QUOTES, FIGURES, ACCORDIONS, DEFINITIONS, NOTES, CHIPS
   ========================================================================== */
.quote { margin: 0; position: relative; padding-left: 1.6rem; }
.quote::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
  width: 2px; background: var(--acc); box-shadow: 0 0 16px rgba(200, 245, 66, .4);
}
.quote p {
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.75rem); font-weight: 500;
  line-height: 1.34; letter-spacing: -.016em;
}
.quote footer { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; }

.fig { margin: 0; padding: 1.2rem; border: 1px solid var(--line-strong); background: var(--veil); }
.fig svg .m { font-family: var(--mono); }
.fig--dark { background: var(--veil-deep); }

.acc { border-top: 1px solid var(--line-strong); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.05rem 2.2rem 1.05rem .2rem;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.012em; color: var(--ink);
  transition: color var(--in) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 400; font-size: 1.1rem; color: var(--acc);
  transition: transform var(--in) var(--ease);
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc summary:hover { color: var(--acc-soft); }
.acc__body { padding: 0 .2rem 1.3rem; color: var(--mute); font-size: .9375rem; max-width: 68ch; }

.deflist { margin: 0; display: grid; gap: .7rem; }
.deflist dt {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .2rem;
}
.deflist dd { margin: 0; color: var(--ink); font-size: .9375rem; }

.note {
  padding: 1rem 1.2rem; border: 1px solid var(--line-strong);
  border-left: 2px solid var(--acc); background: var(--veil);
  color: var(--mute); font-size: .9375rem;
}
.note__h {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--acc);
}
.note--amber { border-left-color: var(--warn); }
.note--amber .note__h { color: var(--warn); }
.note--brand { border-left-color: var(--acc); }

.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { margin: 0; }
.chip {
  display: inline-block; padding: .42rem .8rem;
  border: 1px solid var(--line-strong); color: var(--mute);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
}
.chip--brand { border-color: var(--acc); color: var(--acc); }
.chip--dark { background: var(--veil-deep); }

.badge {
  display: inline-block; margin-left: .5rem; padding: 2px 8px;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; vertical-align: .16em;
  border: 1px solid var(--line-strong); color: var(--faint);
}
.badge--soon { border-color: var(--warn); color: var(--warn); }

/* ==========================================================================
   10. TABLES: ledger lines on the void
   ========================================================================== */
.tablewrap { overflow-x: auto; border: 1px solid var(--line-strong); background: var(--veil); }
.tbl { font-size: .875rem; min-width: 560px; }
.tbl th {
  text-align: left; padding: .85rem 1rem;
  font-family: var(--mono); font-weight: 400; font-size: .5625rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.tbl td {
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  color: var(--mute); vertical-align: top;
}
.tbl tbody tr { transition: background var(--in) var(--ease); }
.tbl tbody tr:hover { background: var(--acc-dim); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child, .tbl th:first-child { color: var(--ink); font-weight: 500; }
.tbl th:first-child { font-weight: 400; color: var(--faint); }
.tbl a { color: var(--acc-soft); text-decoration-color: transparent; }
.tbl a:hover { text-decoration-color: var(--acc); }
.tbl .yes { color: var(--yes); font-weight: 500; }
.tbl .no { color: var(--faint); }
.tbl__hl { background: var(--acc-dim); }

/* ==========================================================================
   11. FORMS: fields as instrument inputs
   ========================================================================== */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: grid; gap: .45rem; align-content: start; }
.field label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.req { color: var(--acc); }
.input, .select, .textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--veil); border: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--disp); font-size: .9375rem;
  border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color var(--in) var(--ease), box-shadow var(--in) var(--ease);
}
.select {
  background-image: linear-gradient(45deg, transparent 49%, var(--acc) 50%, transparent 60%);
  background-size: 9px 9px; background-position: right 1rem center; background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.textarea { min-height: 130px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 0 26px -6px rgba(200, 245, 66, .4);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err); }
.err { margin: 0; font-family: var(--mono); font-size: .6875rem; color: var(--err); min-height: 1em; }
.err:empty { display: none; }
.hint { margin: 0; font-size: .75rem; color: var(--faint); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .8125rem; color: var(--mute); }
.consent input { margin-top: .2em; accent-color: var(--acc); width: 15px; height: 15px; flex: none; }
.formmsg {
  margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--err);
  background: rgba(255, 125, 110, .09); color: var(--err);
  font-family: var(--mono); font-size: .8125rem;
}
.formmsg--ok { border-color: var(--acc); background: var(--acc-dim); color: var(--acc-soft); }
.formmsg a { color: inherit; }
.field--err .input, .field--err .textarea { border-color: var(--err); }
.field--err label { color: var(--err); }

/* ==========================================================================
   12. PAGE FURNITURE: pagenav, people, offices
   ========================================================================== */
.pagenav {
  padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
}
.pagenav ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
}
.pagenav li { margin: 0; }
.pagenav a { color: var(--mute); text-decoration: none; }
.pagenav a::before { content: "# "; color: var(--acc); }
.pagenav a:hover { color: var(--acc-soft); }

.person { text-align: left; }
.person__av {
  width: 52px; height: 52px; margin: 0 0 1.1rem;
  display: grid; place-items: center;
  border: 1px solid var(--acc); color: var(--acc);
  font-family: var(--mono); font-size: .875rem; letter-spacing: .06em;
}
.person h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.person__r { font-size: .8125rem; color: var(--mute); margin-bottom: .25rem; }
.person__o { font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

.office { font-style: normal; }
.office h3 { font-size: 1rem; margin-bottom: .5rem; }
.office p { font-size: .875rem; color: var(--mute); }
.office a { color: var(--acc-soft); }

/* ==========================================================================
   13. THE CLOSING ARGUMENT
   ========================================================================== */
.cta { padding: calc(var(--sec) * 1.05) 0; border-top: 1px solid var(--line); }
.cta__in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.cta h2 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); margin-bottom: .3em; }
.cta p { color: var(--mute); max-width: 46ch; }
.cta .btn-row { justify-content: flex-end; }

/* ==========================================================================
   14. FOOTER: the wordmark, set once at poster size
   ========================================================================== */
.ftr { border-top: 1px solid var(--line); padding: clamp(3rem, 7vh, 5rem) 0 2rem; background: linear-gradient(180deg, transparent, rgba(4, 6, 4, .85)); }
.ftr__word {
  margin: 0 0 clamp(2rem, 5vh, 3.4rem);
  font-weight: 700; letter-spacing: -.04em; line-height: .9;
  font-size: clamp(3.6rem, 13vw, 11rem);
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
  transition: color var(--out) var(--ease), -webkit-text-stroke-color var(--out) var(--ease);
}
.ftr__word:hover { color: var(--acc); -webkit-text-stroke-color: var(--acc); }
.ftr__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
  gap: clamp(2rem, 5vw, 5rem); margin-bottom: 3rem;
}
.ftr__brand { min-width: 0; }
.ftr__blurb { color: var(--mute); max-width: 36ch; }
.ftr__contact { font-family: var(--mono); font-size: .75rem; line-height: 1.9; color: var(--faint); }
.ftr__contact a { color: var(--acc-soft); text-decoration: none; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.ftr__h {
  margin: 0 0 .9rem; font-family: var(--mono); font-weight: 400;
  font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
}
.ftr__cols ul { margin: 0; padding: 0; list-style: none; }
.ftr__cols li { margin: 0 0 .45rem; }
.ftr__cols a { color: var(--mute); text-decoration: none; font-size: .875rem; }
.ftr__cols a:hover { color: var(--acc-soft); }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .6875rem; color: var(--faint);
}
.ftr__bottom p { margin: 0; }
.ftr__meta { margin-left: auto; display: flex; gap: .9rem; flex-wrap: wrap; }
.ftr__meta span { color: var(--acc); }
.ftr__meta a { color: var(--mute); text-decoration: none; }
.ftr__meta a:hover { color: var(--acc-soft); }

/* ==========================================================================
   15. ENTRANCE: one calm rise, staggered by the script
   ========================================================================== */
.rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--out) var(--ease), transform var(--out) var(--ease);
  will-change: opacity, transform;
}
.rv.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   16. SMALLER VIEWPORTS
   ========================================================================== */
@media (max-width: 1100px) {
  .hero__grid, .sec-head--split, .split, .split--wide-left, .cta__in { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: clamp(7rem, 16vh, 10rem); }
  .grid--sidebar { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta .btn-row { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .omenu__grid { grid-template-columns: 1fr; }
  .omenu__root { columns: 1; }
  .ftr__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .mark { top: 12px; left: 12px; }
  .mark__ed { display: none; }
  .omenu { top: 12px; right: 12px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-strong); }
  .journey__i { padding: 0 0 1.6rem 1.4rem; }
  .journey__i::before { top: .4em; left: -4.5px; }
  .pipe__row { grid-template-columns: 1fr; }
  .layer { grid-template-columns: 1fr; gap: .3rem; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__i:nth-child(odd) { border-left: 0; }
  .rail__i:nth-child(n+3) { border-top: 1px solid var(--line); }
  .form__row { grid-template-columns: 1fr; }
  .ticks--2 { grid-template-columns: 1fr; }
  /* award names can be longer than a phone is wide */
  .wall__i { white-space: normal; text-align: center; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__meta { margin-left: 0; }
  .pidx__t { display: none; }
}

/* ==========================================================================
   17. REDUCED MOTION: the field stands still, everything simply is
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .rv { opacity: 1; transform: none; }
  .hero:not(.hero--page) h1::after { animation: none; }
  .hero:not(.hero--page)::after { animation: none; }
}