/* ============================================================
   REFIT: the Inngest / Railway pass, loaded after the theme.
   What it borrows, and from where:
     · Inngest: a fine static grain over the whole page with soft
       charcoal blooms; a solid uppercase display line paired with an
       outlined one; mono uppercase taglines and buttons; square
       bullets; the floating nav; the footer's meshed cube.
     · Railway: the vertical rail with one node per feature, a small
       tinted mono pill over a bold sans heading, a product card beside
       each block, the segmented tab control, and the departure-board
       readout before the close.
   Everything else (fluid hero, mesh scroll, industries stage, ambition
   list, Lenis, entrances) is untouched. Tokens come from orange-theme.
   ============================================================ */

/* ---------- Static: a fine monochrome grain over the whole page ----------
   One fixed, full-viewport layer (assets/grain.png, a 256px tile of
   light-only speckle) sitting above every section and below the nav.
   Fixed, so it behaves like grain on the glass: the pinned stages and
   the scroll set-pieces move underneath it and it never scrolls with
   them. Nothing is blended, so it costs one compositor layer. */
/* the page black under the grain, a step darker than the theme's #0d0d0c
   so the speckle reads as light on black rather than on charcoal */
:root { --bg: #030303; --bg-rgb: 3,3,3; --bg-2: #0a0a0a; --black: #030303; }
.static { position: fixed; inset: 0; z-index: 15; pointer-events: none; }

/* ---------- Bloom: soft charcoal glows under the grain ----------
   Painted on the fixed grain layer itself, not on sections, so there is
   no section edge for a glow to stop at. Two glows sit at fixed spots
   in the viewport, so the light drifts as the content scrolls under it,
   and the mesh/industries canvases (transparent bg) show it too. Peaks
   stay dark charcoal; edges fall back to the page black. */
.static {
  background:
    radial-gradient(55% 60% at 80% 22%, rgba(255, 255, 255, 0.05), transparent 68%),
    radial-gradient(50% 55% at 14% 72%, rgba(255, 255, 255, 0.035), transparent 68%),
    url("assets/grain.png?v=2") 0 0 / 256px 256px repeat;
}

/* the industries header smoke is an RGBA plate now (its old baked-in
   #0d0d0c black is transparent), so it sits on the page black like
   everything else instead of showing as a lighter band */
.indx::before { background-image: url("assets/header-smoke3.png?v=2"); }

/* ---------- Nav: a floating bar, inset from the top and sides ----------
   Near-pure black, a shade under the page, with a hairline edge and a
   light blur so it holds over the hero art and the mesh scroll alike.
   --nav-h stays 4.5rem for the layout offsets below it: the bar is
   3.4rem tall plus its top inset, so those offsets still clear it. */
.nav {
  --nav-inset: clamp(0.6rem, 1.4vw, 1.1rem);
  top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset);
  height: 3.4rem; padding: 0 clamp(0.9rem, 2vw, 1.5rem);
  background: rgba(5, 5, 5, 0.86); border: 1px solid rgba(238, 235, 225, 0.09); border-radius: 6px;
  backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav.is-stuck { background: rgba(5, 5, 5, 0.9); border-color: rgba(238, 235, 225, 0.11); }
/* the scroll progress hairline moves to the top edge of the viewport,
   full width, since there is no longer a bar edge for it to sit on */
.scrollprog { top: 0; background: transparent; z-index: calc(var(--z-nav) + 1); }
.nav__link { font-size: 0.66rem; }
.brand__mark { height: 22px; }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid:hover { background: #fff; border-color: #fff; box-shadow: none; }
.nav__cta.cta-mono > span { opacity: 0.7; }

/* ---------- Buttons: mono, uppercase, square-cornered ---------- */
.btn {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; border-radius: 3px;
  padding: 1.05em 1.4em;
}
.btn--gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); box-shadow: none; }
.btn--ghost { background: transparent; backdrop-filter: none; border-color: rgba(236, 234, 229, 0.55); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); box-shadow: none; }
.hero__actions.ha-wipe .btn:nth-child(2) { --i: 1; }

/* ---------- Hero: solid line, then an outlined line ---------- */
.hero__title {
  font-weight: 600; text-transform: uppercase; line-height: 0.94; letter-spacing: -0.005em;
  font-size: clamp(2.5rem, 1.1rem + 3vw, 4.8rem); text-wrap: initial;
}
.hero__l { display: block; }
.hero__l--outline {
  margin-top: 0.16em; color: transparent;
  -webkit-text-stroke: 1.25px rgba(236, 234, 229, 0.92);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px #fff) { .hero__l--outline { color: var(--muted); } }

.hero__sub {
  font-family: var(--font-mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; line-height: 1.75; color: var(--ink);
  font-size: clamp(0.7rem, 0.64rem + 0.3vw, 0.84rem); max-width: 52ch;
  margin-top: clamp(1.4rem, 3.4vh, 2.1rem);
}
.hero__sub .num { font-size: 1em; color: var(--gold); word-spacing: normal; }

/* ---------- Interlude: the same pairing, one line each ---------- */
.il2__pre {
  text-transform: uppercase; font-weight: 600; line-height: 0.96; letter-spacing: -0.005em;
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 5.4rem);
}
.il2__pre b { font-weight: 600; color: var(--gold); }
.il2__out {
  display: block; margin-top: 0.14em;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  line-height: 0.96; letter-spacing: -0.005em;
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 5.4rem);
  color: transparent; -webkit-text-stroke: 1.25px rgba(236, 234, 229, 0.9);
}
@supports not (-webkit-text-stroke: 1px #fff) { .il2__out { color: var(--muted); } }

/* ---------- Section headings: solid, with the key phrase outlined ---------- */
.h2 { text-transform: uppercase; font-weight: 600; line-height: 0.96; letter-spacing: -0.005em;
  font-size: clamp(2.2rem, 1.3rem + 2.8vw, 4.2rem); }
.h2 em { color: transparent; -webkit-text-stroke: 1.25px rgba(236, 234, 229, 0.92); }
@supports not (-webkit-text-stroke: 1px #fff) { .h2 em { color: var(--muted); } }

/* ---------- Pill: the small tinted mono label ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em; width: max-content; max-width: 100%;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1.2; color: var(--muted);
  padding: 0.42em 0.75em; border: 1px solid var(--line-2); border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.pill--orange { color: var(--gold); border-color: rgba(255, 79, 0, 0.45); background: rgba(255, 79, 0, 0.08); }
.flow__head .pill { margin-bottom: 1.1rem; }

/* the mesh-scroll step tags and the industries mode line read as the same pill */
.mstep__tag, .spec-env__mode {
  display: inline-flex; align-items: center; width: max-content; max-width: 100%;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  color: var(--gold); padding: 0.42em 0.75em; border: 1px solid rgba(255, 79, 0, 0.45);
  border-radius: 4px; background: rgba(255, 79, 0, 0.08);
}
.spec-env--game .spec-env__text .spec-env__mode,
.spec-env--aero .spec-env__text .spec-env__mode { margin-left: auto; }
.spec-env__name { margin-top: 0.9rem; }
@media (max-width: 760px) {
  .spec-env--game .spec-env__text .spec-env__mode,
  .spec-env--aero .spec-env__text .spec-env__mode { margin-left: 0; }
}

/* ---------- Industries switcher: a segmented control ---------- */
.spec-rail {
  gap: 0; padding: 3px; border: 1px solid var(--line-2); border-radius: 8px;
  background: rgba(var(--bg-rgb), 0.72); backdrop-filter: blur(8px);
}
.spec-rail button { padding: 0.55em 0.95em; border-radius: 5px; font-size: 0.64rem;
  transition: background 0.25s var(--ease-expo), color 0.25s var(--ease-expo); }
.spec-rail button.active { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.spec-rail button:focus-visible { outline-offset: 0; }
@media (max-width: 760px) {
  .spec-rail button { min-height: 40px; padding: 0 0.8em; }
}

/* ============================================================
   PIPELINE RAIL. One vertical line, one node per phase, copy in
   the middle column, a small product card on the right. The fill
   climbs down the line with the scroll and lights each node as it
   passes (pages.js). The Gate → Mesh retry is a dotted loop drawn
   back up the left of the rail, with a pulse running it.
   ============================================================ */
.flow { padding-top: clamp(5rem, 13vh, 9rem); }
.flow__head { position: relative; max-width: none; display: grid;
  grid-template-columns: minmax(0, 46ch) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.flow__head > * { grid-column: 1; }
/* the pipeline in miniature, in the header's open right half */
.flow__map { grid-column: 2; grid-row: 1 / span 3; justify-self: end; align-self: center;
  width: min(100%, 420px); height: auto; overflow: visible; }
.flow__map-line { fill: none; stroke: var(--line-2); stroke-width: 1; }
.flow__map-loop { fill: none; stroke: rgba(255, 79, 0, 0.6); stroke-width: 1; stroke-dasharray: 2 4; }
.flow__map-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 18 600; animation: map-run 5s linear infinite; }
@keyframes map-run { to { stroke-dashoffset: -618; } }
.flow__map-nodes circle { fill: var(--bg); stroke: var(--line-2); stroke-width: 1; }
.flow__map-nodes circle.is-gate { stroke: var(--gold); }
.flow__map-labels text { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--faint); text-anchor: middle; }
.flow__map-retry { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--gold); text-anchor: middle; }
@media (max-width: 900px) {
  .flow__head { grid-template-columns: 1fr; }
  .flow__map { display: none; }
}
.rail {
  --node: 28px;
  --gutter: clamp(2.5rem, 6vw, 6rem);
  /* the loop bulges left of the rail; on phones it stops 4px short of the viewport edge */
  --bulge: min(3.4rem, calc(var(--pad-x) + var(--node) / 2 - 4px));
  list-style: none; margin: clamp(6rem, 14vh, 10rem) 0 0; padding: 0; position: relative;
}
.rail__track { position: absolute; top: 0; bottom: 0; left: calc(var(--node) / 2 - 0.5px); width: 1px;
  background: var(--line); z-index: 0; }
.rail__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(to bottom, rgba(255, 79, 0, 0.25), var(--gold) 18%, var(--gold)); }
.rail__fill::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px;
  transform: translateX(-50%); border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px 3px rgba(255, 79, 0, 0.55); }

.rail__loop { position: absolute; z-index: 1; top: 0; height: 100%; width: var(--bulge);
  left: calc(var(--node) / 2 - var(--bulge)); overflow: visible; pointer-events: none; }
.rail__loop-path { fill: none; stroke: rgba(255, 79, 0, 0.6); stroke-width: 1; stroke-dasharray: 2 4; }
.rail__loop-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 22 var(--L, 1000); stroke-dashoffset: 22; opacity: 0; }
.rail.is-looping .rail__loop-pulse { opacity: 1; animation: loop-run 3.6s linear infinite; }
@keyframes loop-run { to { stroke-dashoffset: calc(-1 * var(--L, 1000)); } }
.rail__loop-text { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; fill: var(--gold); text-anchor: middle; }

.rail__step { position: relative; display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: var(--gutter); align-items: start;
  padding: 0 0 clamp(8rem, 20vh, 14rem); }
.rail__step:last-child { padding-bottom: 0; }
/* a dotted tie from the node across to the phase pill: the rail branches
   into the copy the way a graph edge meets a node */
.rail__step::before { content: ""; position: absolute; z-index: 1; left: var(--node); width: var(--gutter);
  top: calc(var(--node) / 2 - 0.5px); border-top: 1px dotted var(--line-2); }
.rail__step.is-active::before, .rail__step.is-past::before { border-top-color: rgba(255, 79, 0, 0.5); }

.rail__node { position: relative; z-index: 2; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); display: grid; place-items: center;
  transition: border-color 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo); }
.rail__node i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
  transition: background 0.4s var(--ease-expo), transform 0.4s var(--ease-expo); }
.rail__step.is-past .rail__node { border-color: rgba(255, 79, 0, 0.55); }
.rail__step.is-past .rail__node i { background: var(--gold); }
.rail__step.is-active .rail__node { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 79, 0, 0.14); }
.rail__step.is-active .rail__node i { background: var(--gold); transform: scale(1.35); }

.rail__copy { padding-top: 0.15rem; max-width: 44ch; }
.rail__copy .pill { margin-bottom: 1.4rem; }
.rail__h { margin: 0; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.05rem); line-height: 1.12; color: var(--ink); text-wrap: balance; }
.rail__p { margin: 0.95rem 0 0; color: var(--muted); line-height: 1.65; max-width: 48ch; text-wrap: pretty;
  font-size: clamp(0.92rem, 0.9rem + 0.15vw, 1rem); }
.rail__facts { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rail__facts li { display: inline-flex; align-items: center; gap: 0.6em; }
.rail__facts li::before { content: ""; width: 5px; height: 5px; background: var(--gold); flex: none; }

/* the product card: a small readout window for that phase */
.card { position: relative; border: 1px solid var(--line-2); border-radius: 10px;
  background: #121211; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); font-family: var(--font-mono);
  transition: border-color 0.5s var(--ease-expo); margin-top: 0.1rem; }
.card > * { position: relative; }
.card__bar { border-radius: 10px 10px 0 0; }
/* the card's input port: a small socket on its left edge, level with the bar */
.card::before { content: ""; position: absolute; left: -5px; top: 15px; width: 9px; height: 9px; border-radius: 50%;
  background: #121211; border: 1px solid var(--line-2); transition: border-color 0.5s var(--ease-expo); }
.rail__step.is-active .card::before { border-color: var(--gold); background: var(--gold); }
.rail__step.is-active .card { border-color: rgba(236, 234, 229, 0.3); }
.card__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.card__st { color: var(--muted); white-space: nowrap; }
.card__st--ok { color: #5fcf8a; }
.card__body { padding: 0.35rem 0.95rem 0.6rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.72rem; line-height: 1.4; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--faint); }
.kv b { font-weight: 500; color: var(--ink); text-align: right; }
.kv--ask b em { font-style: normal; color: var(--gold); border: 1px solid rgba(255, 79, 0, 0.5); border-radius: 3px;
  padding: 0.05em 0.45em; margin-left: 0.45em; font-size: 0.86em; letter-spacing: 0.08em; text-transform: uppercase; }
.kv--fail span { color: var(--faint); }
.kv--fail b { color: var(--gold); }
.card__body--log { padding-top: 0.2rem; }
.ln { display: flex; align-items: center; gap: 0.65em; padding: 0.5rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.72rem; color: var(--muted); }
.ln:last-child { border-bottom: 0; }
.ln::before { content: ""; width: 7px; height: 7px; flex: none; }
.ln--ok { color: var(--ink); }
.ln--ok::before { background: var(--ink); }
.ln--run { color: var(--ink); }
.ln--run::before { background: var(--gold); animation: blink 1s steps(2) infinite; }
.ln--dim { color: var(--faint); }
.ln--dim::before { border: 1px solid var(--line-2); }

@media (max-width: 900px) {
  .rail__step { grid-template-columns: var(--node) minmax(0, 1fr); row-gap: 2rem;
    padding-bottom: clamp(5rem, 12vh, 8rem); }
  .rail__copy { max-width: none; }
  .card { grid-column: 2; }
  .card::before { display: none; }
}
@media (max-width: 560px) {
  .rail { --node: 24px; --gutter: 1rem; }
  .rail__loop-text { display: none; }
}

/* ============================================================
   READOUT BOARD. A departure board: label left, value right, every
   character on its own split-flap tile. Tiles flip in on first view,
   then the board keeps itself alive: now and then one tile flips
   through a glyph or two and lands back, and a cursor tile blinks at
   the end of the last value.
   ============================================================ */
.board {
  position: relative; z-index: var(--z-content);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
  background-color: var(--bg);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* one cell size drives everything: the backing grid, every tile, every gap,
   so each character sits inside a cell of the matrix instead of over it.
   The grid is drawn on the rows box and anchored to its RIGHT edge, which
   is where the values are flush, so right-aligned tiles land on cells. */
.board { --cell: clamp(18px, 14px + 0.6vw, 26px); --gutter: 3px; overflow: hidden; }
.board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: #151514; opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.board__rows { position: relative; width: min(100%, 1240px); margin: 0 auto; display: grid;
  gap: calc(var(--cell) + var(--gutter)); }
/* cells: the gutter sits at the START of each cell horizontally (anchored
   right, so a tile ends flush at the right edge) and at the END vertically
   (anchored top, so a tile starts flush at the row's top) */
.board__rows::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: calc(var(--cell) * -6); bottom: calc(var(--cell) * -6); left: -100vw; right: -100vw;
  background:
    linear-gradient(transparent calc(100% - var(--gutter)), var(--bg) calc(100% - var(--gutter))) right top / 100% var(--cell),
    linear-gradient(90deg, var(--bg) var(--gutter), transparent var(--gutter)) right top / var(--cell) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.board__row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
  align-items: start; gap: 1rem; }
.board__row dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
  line-height: calc(var(--cell) - var(--gutter)); }
/* tiles are laid on the cell pitch: a tile is one cell minus the gutter,
   lines of tiles are one gutter apart, words one empty cell apart */
.board__row dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end;
  column-gap: calc(var(--cell) + var(--gutter)); row-gap: var(--gutter); }
.flap__w { display: inline-flex; gap: var(--gutter); }
.flap__c {
  position: relative; display: inline-grid; place-items: center; width: calc(var(--cell) - var(--gutter)); height: calc(var(--cell) - var(--gutter));
  font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0;
  font-size: calc(var(--cell) * 0.56); line-height: 1; color: var(--ink);
  background: #1b1b1a; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 2px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-variant-numeric: tabular-nums; overflow: hidden;
}
/* the split-flap hinge: a hairline across the middle of every tile */
.flap__c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.flap__c--sep { background: transparent; border-color: transparent; box-shadow: none; color: var(--gold); }
.flap__c--sep::after { display: none; }
.flap__c.is-spinning { color: var(--muted); }
/* the idle flip: the top half drops, the glyph swaps, the bottom half settles */
.flap__c.is-flip { animation: flap 0.34s cubic-bezier(0.4, 0, 0.6, 1); }
@keyframes flap {
  0%   { transform: perspective(160px) rotateX(0);      filter: brightness(1); }
  45%  { transform: perspective(160px) rotateX(-88deg); filter: brightness(0.6); }
  55%  { transform: perspective(160px) rotateX(88deg);  filter: brightness(0.6); }
  100% { transform: perspective(160px) rotateX(0);      filter: brightness(1); }
}
/* the live dot: a cursor tile that blinks at the end of the last value */
.flap__c--cursor { background: transparent; border-color: transparent; box-shadow: none; }
.flap__c--cursor::after { display: none; }
.flap__c--cursor i { width: 40%; height: 40%; background: var(--gold); animation: blink 1.1s steps(2) infinite; }
@media (max-width: 640px) {
  .board { --cell: 17px; }
  .board__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .board__row dd { justify-content: flex-start; }
  /* values are flush LEFT here, so the grid anchors left and the
     horizontal gutter moves to the end of each cell */
  .board__rows::before {
    background:
      linear-gradient(transparent calc(100% - var(--gutter)), var(--bg) calc(100% - var(--gutter))) left top / 100% var(--cell),
      linear-gradient(90deg, transparent calc(100% - var(--gutter)), var(--bg) calc(100% - var(--gutter))) left top / var(--cell) 100%;
  }
}

/* ============================================================
   FOOTER. The pitch and capture sit left with a warm glow behind
   them; the meshed cube is the footer's background on the right.
   Link columns are set in the body face.
   ============================================================ */
.footer--end { font-family: var(--font-body); }
.fend__lead { position: relative; isolation: isolate; }
.fend__lead::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(70vw, 760px); height: min(46vh, 380px);
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 79, 0, 0.18), rgba(255, 79, 0, 0.05) 55%, transparent 75%);
  filter: blur(24px);
}
.fend__h { text-transform: uppercase; font-weight: 600; line-height: 0.96; letter-spacing: -0.005em;
  font-size: clamp(2.1rem, 1rem + 3.8vw, 4.6rem); max-width: 16ch; }
.fend__h em { color: transparent; -webkit-text-stroke: 1.25px rgba(236, 234, 229, 0.92); }
@supports not (-webkit-text-stroke: 1px #fff) { .fend__h em { color: var(--muted); } }
.fend__capture { border-radius: 6px; background: rgba(var(--bg-rgb), 0.72); }
.fend__submit { border-radius: 3px; }
.fend__submit:hover { background: var(--gold-soft); }
.fend__note { font-family: var(--font-mono); }

.fend__foot { gap: clamp(1.4rem, 3vh, 2rem); }
/* the mesh mark is the footer's background: full-bleed, behind the pitch and the columns */
.fend__mark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.fend__lead, .fend__foot { position: relative; z-index: 1; }
/* narrow: leave a band above the pitch for the cube */
@media (max-width: 999px) { .fend__lead { padding-top: 46vh; justify-content: flex-start; } }
/* wide: the pitch and capture sit left, leaving the right half of the lead to the cube */
@media (min-width: 1000px) {
  /* the pitch, capture and note are capped to the left 56% of the lead
     (a percentage of the lead's own width, so it holds at any screen size) */
  .fend__lead { width: min(100%, 1100px); margin: 0 auto; align-items: flex-start; text-align: left; }
  .fend__lead > * { max-width: 56%; }
  .fend__lead::before { left: 24%; }
  /* three lines, set by the <br>s in the markup, at a size that fits the column */
  .fend__h { max-width: none; text-wrap: initial; white-space: nowrap; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }
  .fend__capture { width: 100%; max-width: 560px; flex-wrap: nowrap; }
  .fend__email { flex: 1 1 auto; width: 100%; min-width: 12ch; }
  .fend__submit { flex: 0 0 auto; }
}
.fend__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; width: min(100%, 1100px); margin: 0.5rem auto 0; }
.fend__col { gap: 0.7rem; }
.fend__col-h { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 0.4rem; }
.fend__col a { font-family: var(--font-body); font-size: 0.9rem; color: var(--muted); }
.fend__col a:hover { color: var(--ink); }
.fend__bar { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0; text-transform: none; width: min(100%, 1100px); margin: 0 auto; }
.fend__bar a { font-size: 0.74rem; }
@media (max-width: 640px) {
  .fend__nav { grid-template-columns: 1fr 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rail__fill { height: 100% !important; }
  .rail__fill::after, .rail__loop-pulse { display: none; }
  .rail__node, .rail__node i, .card { transition: none; }
  .ln--run::before, .flap__c--cursor i { animation: none; }
  .flap__c.is-flip { animation: none; }
}