/* handoff.css — manymoats front door, spine-true rebuild 2026-08-08.

   Bible §V manymoats: hero = rail/spine as ONE machined object. Kill double-hero.
   Family Indigo · seed silk. Consume os-tokens + ss-motion; never re-encode spine.

   THE RULES THIS FILE ENFORCES
   - Ground: cool light (#F3F2F8). Zero amber. Zero paper/cream. Zero galaxy-as-hero.
   - Chroma: indigo #5B4FCF is the only colour. #806EF3 belongs to the moment of crossing.
   - Light: ONE soft key, upper-left. Every shadow falls down-right. (§2.1 one world, one light)
   - First paint: void + one-liner + spine object only. Chrome rises on scroll. (§3.3)
   - Motion: silk seed only. Handoff stage is secondary proof (#crossing), never hero.
   - Payload never animates. §XXX unbreakable text 320 → ultra-wide.

   Tokens from os-tokens.css + ss-motion.css. This file adds only door composition.
*/

:root {
  --hf-ground: #F3F2F8;
  --hf-ground-lo: #EBEAF2;
  --hf-paper: #FFFFFF;
  --hf-ink: #1B1922;
  --hf-ink-1: #54525E;
  /* tertiary ink. #85838E measured 3.73:1 on white and 3.04:1 on the proof gradient —
     26 elements sat under the 4.5:1 body floor on the LIGHT door (measured 2026-08-06,
     composited-paint method). This stop clears every light ground it lands on:
     5.65 white · 5.07 ground · 4.61 proof. */
  --hf-ink-2: #68666F;
  --hf-line: #E1E0E5;
  --hf-line-2: #D1D0D6;

  --hf-mark: #5B4FCF;   /* the only chroma */
  --hf-lift: #806EF3;   /* reserved: the moment of crossing */
  --hf-wash: rgba(91, 79, 207, .07);
  --hf-wash-soft: rgba(91, 79, 207, .06);
  --hf-wash-hover: rgba(91, 79, 207, .04);
  --hf-mark-press: #5246C2;
  --hf-mark-line: rgba(91, 79, 207, .40);
  --hf-paper-hi: #FCFCFE;
  --hf-nav-bg: rgba(243, 242, 248, .82);
  --hf-proof-a: #EFEEF6;
  --hf-proof-b: #E8E7F2;
  --hf-plate-shadow-c: rgba(27, 25, 34, .15);

  --hf-night: #191923;  /* gunmetal — the night act only */
  --hf-night-ink: #F2F3FA;
  --hf-night-ink-2: rgba(242, 243, 250, .66);

  /* ONE key light, upper-left. Every elevation below derives from it. */
  --hf-e1: 1px 2px 3px rgba(27, 25, 34, .05);
  --hf-e2: 3px 6px 14px rgba(27, 25, 34, .07);
  --hf-e3: 8px 16px 40px rgba(27, 25, 34, .10);
  --hf-e4: 14px 28px 70px rgba(27, 25, 34, .13);

  /* the seam sits on this line at every width */
  --hf-seam-x: clamp(22px, 8vw, 148px);
  --hf-gut: clamp(18px, 5vw, 64px);
  --hf-maxw: min(1180px, 92vw);
  --hf-act: clamp(96px, 13vh, 168px); /* the air between acts */
}

/* ─────────────────────────────────────────────────────────── base */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hf-ground);
  color: var(--hf-ink);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* §XXX — nothing on this page may break its container or split a word onto its own line */
body, body * { overflow-wrap: break-word; word-break: normal; hyphens: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display, var(--font-body));
  font-weight: 640;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

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

.hf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hf-paper); color: var(--hf-ink);
  padding: 12px 18px; border-radius: 8px; box-shadow: var(--hf-e3);
}
.hf-skip:focus { left: 12px; top: 12px; }

/* ─────────────────────────────────────────── THE SEAM
   One 1px indigo thread, full document height. Every act attaches to it.
   It is the spine made literal: the page IS one object's journey. Static
   under reduced motion; it never animates a payload; it is never decorative. */

.hf-seam {
  position: absolute;
  left: var(--hf-seam-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0,
    var(--hf-mark) 4vh,
    var(--hf-mark) calc(100% - 12vh),
    rgba(91, 79, 207, 0) 100%);
  opacity: .42;
  pointer-events: none;
  z-index: 2;
}
/* the travelling node — the object's position on the spine, driven by scroll */
.hf-seam-node {
  position: fixed;
  left: var(--hf-seam-x);
  top: calc(8px + var(--hf-scroll, 0) * (100vh - 40px));
  width: 7px; height: 7px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--hf-lift);
  box-shadow: 0 0 0 4px rgba(128, 110, 243, .16), 1px 2px 6px rgba(27, 25, 34, .18);
  z-index: 3;
  pointer-events: none;
}
html:not(.ss-js) .hf-seam-node { display: none; }

/* every act attaches to the seam with a visible 1px tie */
.hf-tie {
  position: absolute;
  left: var(--hf-seam-x);
  top: 0;
  height: 1px;
  width: calc(var(--hf-gut) * 0.8);
  background: var(--hf-mark);
  opacity: .30;
}

/* ────────────────────────────────────────────────── nav · §3.3 chrome deference */

.hf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 14px var(--hf-gut);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    background var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    transform var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1));
}
/* First paint: brand only. Links deferred until scroll rise. */
.hf-nav[data-chrome="deferred"] .hf-navlinks {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}
.hf-nav .hf-navlinks {
  transition:
    opacity var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    transform var(--ss-dur-in, 450ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1));
}
.hf-nav.is-risen,
.hf-nav.is-stuck {
  background: var(--hf-nav-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--hf-line);
}
.hf-nav.is-risen .hf-navlinks,
.hf-nav.is-stuck .hf-navlinks {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.hf-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; letter-spacing: -.015em; color: var(--hf-ink); }
.hf-brand .word { font-size: 17px; color: inherit; }
.hf-brand .m-tail { color: var(--hf-mark); }
/* Brand sits over light-pinned hero void always — never inherit night ink (§2.1 / LAW #0 night). */
.hf-nav .hf-brand { color: #1B1922; }
.hf-nav .hf-brand .word { color: #1B1922; }
.hf-nav .hf-brand .m-tail { color: #5B4FCF; }
.hf-navlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.hf-navlinks a {
  flex: 0 0 auto;              /* §XXX: never compress below the word */
  text-decoration: none;
  color: var(--hf-ink-1);
  font-size: 14.5px;
  padding: 9px 12px;
  border-radius: 8px;
  min-height: 40px;
  display: inline-flex; align-items: center;
  transition: color var(--ss-dur-hover, 250ms) var(--ss-ease, ease), background var(--ss-dur-hover, 250ms) var(--ss-ease, ease);
}
.hf-navlinks a:hover { color: var(--hf-ink); background: var(--hf-wash); }
.hf-navlinks a.is-key { color: var(--hf-mark); font-weight: 560; }

/* ─────────────────────────────────────────── ACT 0 · THE HERO — spine/rail true noun
   Bible §V / §6.1 / §1.7: ONE object — living continuity, NOT a machined metal bar. Void. One-liner + one CTA.
   Light mode cool ground — rail photography is light material, not night wallpaper.
   One key upper-left; contact pool + edge specular are the material proof (§2.1–2.3). */

.hf-hero {
  position: relative;
  /* First paint must hold object + one-liner + CTA inside one viewport (§6.1 / LAW #0). */
  min-height: 100svh;
  min-height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  padding: clamp(64px, 9vh, 88px) var(--hf-gut) clamp(20px, 3.5vh, 40px);
  overflow: hidden;
  isolation: isolate;
  color: var(--hf-ink);
  background: var(--hf-ground);
  box-sizing: border-box;
}
.hf-hero-void {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255, 255, 255, .72) 0%, transparent 55%),
    radial-gradient(90% 70% at 18% 88%, rgba(91, 79, 207, .06) 0%, transparent 50%),
    var(--hf-ground);
}
.hf-amb {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .78;
  -webkit-mask-image: radial-gradient(92% 96% at 72% 48%, #000 8%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.22) 78%, transparent 96%);
  mask-image: radial-gradient(92% 96% at 72% 48%, #000 8%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.22) 78%, transparent 96%);
}

/* Hero object: spine/rail — free silhouette, not a framed card (§6.4 matted) */
.hf-hero-object {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(820px, 88vw);
  margin: 0 auto;
  min-height: 0;
  max-height: 100%;
}
.hf-rail-stage {
  position: relative;
  width: 100%;
  max-height: 100%;
  transform: perspective(1400px) rotateX(3deg) rotateY(-2.5deg);
  transform-style: preserve-3d;
}
.hf-rail-pic {
  display: block;
  position: relative;
  z-index: 2;
  /* no card radius/frame — object is the subject */
  border-radius: 0;
  overflow: visible;
  max-height: min(46vh, 420px);
}
.hf-rail-pic img {
  width: 100%;
  height: auto;
  max-height: min(46vh, 420px);
  object-fit: contain;
  display: block;
  border-radius: 0;
  /* asset already carries contact light; avoid double-card frame */
  box-shadow: none;
  background: transparent;
}
/* Contact pool: one light, upper-left → falls down-right (§2.1) */
.hf-rail-contact {
  position: absolute;
  left: 10%; right: 8%;
  bottom: -6%;
  height: 22%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%,
    rgba(27, 25, 34, .16) 0%,
    rgba(27, 25, 34, .07) 40%,
    transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}
.hf-rail-edge {
  display: none; /* ban card-frame silhouette; material is in the photography */
}

/* Copy: below the object, always in-viewport — Linear restraint (§5.3) */
.hf-copy {
  position: relative;
  z-index: 3;
  grid-row: 2;
  max-width: min(560px, 92vw);
  margin: clamp(12px, 2.2vh, 28px) auto 0;
  text-align: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.hf-eyebrow {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hf-mark); font-weight: 600; margin-bottom: 10px;
}
.hf-hero h1 {
  font-size: clamp(1.85rem, 5.2vw, 3.35rem);
  letter-spacing: -0.034em;
  margin-bottom: 10px;
  color: var(--hf-ink);
  line-height: 1.04;
  overflow-wrap: anywhere;
}
.hf-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.1rem);
  color: var(--hf-ink-1);
  max-width: 42ch;
  margin: 0 auto 18px;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.hf-sub b { color: var(--hf-ink); font-weight: 580; }

.hf-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hf-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  border-radius: 10px;
  font-size: 15.5px; font-weight: 540;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform var(--ss-dur-press, 150ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    box-shadow var(--ss-dur-hover, 250ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    background var(--ss-dur-hover, 250ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    border-color var(--ss-dur-hover, 250ms) var(--ss-ease, cubic-bezier(0.32, 0.72, 0, 1));
}
/* CTA: primary INK fill (gate-button-ink · AA) — mark is accent only, never primary fill */
.hf-btn-primary { background: var(--hf-ink); color: #fff; box-shadow: var(--hf-e2); }
.hf-btn-primary:hover { background: #121018; box-shadow: var(--hf-e3); transform: translateY(-1px); }
.hf-btn-quiet { background: transparent; color: var(--hf-ink); border-color: var(--hf-line-2); }
.hf-btn-quiet:hover { border-color: var(--hf-mark); color: var(--hf-mark); background: var(--hf-wash); }
/* §3.8.3 press mass: 1–2% compression, silk release */
.hf-btn:active { transform: translateY(0) scale(.98); }
.hf-btn-primary.ss-motion:active { transform: scale(.97); }

/* Stage: THREE OBJECTS lying on the media, lower-left. Not a panel.
   COMPOSITION (F1 floor): row 1 = two instrument slabs across a real gutter; row 2 = the
   crossing object riding UP over their empty foot. Content-sized height so it fits inside
   the 100svh hero.

   DEPTHFIELD (DESIGN-BIBLE PART 6). There is no container card here and there must never
   be one again: seven independent vision seats across four passes named the single white
   container a banned rectangle. Each piece is now a true object — it has a face, a lit
   upper edge, FOUR PIXELS OF VISIBLE SIDE, a contact shadow that touches, and an ambient
   pool. The crossing object OCCLUDES both instruments and drops its shadow onto them,
   which is the depth cue that outranks every other one.

   WHY THE FACES STAY NEAR-WHITE IN NIGHT, deliberately. PASS-4 also asked for them darker
   on gunmetal. Measured, that request loses to the contrast floor: the instrument names
   paint in family INK, and rose (#D21F70, cohortcollab/lathe) measures 5.03:1 on #FFFFFF
   and 4.10:1 on a surface as light as #E8E7EF — under the 4.5:1 body floor before the
   tone-down is even visible. So the FACE keeps its luminance and night does its work
   where it is free: the sides darken, the contact and ambient pools deepen, and the one
   big white rectangle becomes three smaller lit objects separated by dark gutters. */
/* Stage lives in #crossing (secondary act) — never stacked into the hero. */
.hf-crossing {
  position: relative;
  max-width: var(--hf-maxw);
  margin: clamp(28px, 4vh, 48px) auto 0;
  margin-left: calc(var(--hf-seam-x) + var(--hf-gut) * 0.8);
  margin-right: var(--hf-gut);
  padding: 0;
}
.hf-stagewrap {
  position: relative;
  left: auto;
  bottom: auto;
  right: auto;
  top: auto;
  width: 100%;
  max-width: min(640px, 100%);
  margin: 0;
  perspective: 1500px;
  perspective-origin: 22% 40%;
}
.hf-stagewrap-act {
  width: min(640px, 100%);
}
.hf-hero .hf-stage { min-height: 0; }
.hf-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(13px, 2.3vw, 21px);
  row-gap: 0;
  align-items: stretch;
  transform-style: preserve-3d;
  transform: rotateY(-5.5deg) rotateX(1.6deg);
  transform-origin: 30% 100%;
  /* no card, no border, no radius, no shadow: the stage is a GROUP, not a surface */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
  /* plate14: stage sits inside .hf-hero (night-ink). Reset so labels paint dark on the slab
     faces. Without this, instrument names inherit #F2F3FA and measure ~1.08:1 on white. */
  color: var(--hf-ink);

  /* THE MATERIAL — one set of tokens, both modes, so the two paths can never disagree.
     Every offset is positive-Y / positive-X: the page's ONE key light is upper-left, so a
     slab's visible side is its BOTTOM-RIGHT and every pool falls down-right. */
  --hf-slab-face: linear-gradient(163deg, #FFFFFF 0%, #FBFBFD 46%, #F2F1F8 100%);
  --hf-slab-face-alt: linear-gradient(163deg, #FDFDFF 0%, #F8F8FC 46%, #EEEDF6 100%);
  /* the SIDE. Six stacked hairlines stepping darker = thickness you can SEE at the size
     these are actually looked at, plus a specular on the two edges the key light reaches
     (top and left) and a shaded return on the two it does not. */
  --hf-slab-side:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 1px 0 0 rgba(255, 255, 255, .80),
    inset 0 -1px 0 rgba(27, 25, 34, .09),
    inset -1px 0 0 rgba(27, 25, 34, .06),
    0 1px 0 #E7E5EF,
    0 2px 0 #DCDAE7,
    1px 3px 0 #D0CEDD,
    1px 4px 0 #C4C2D3,
    2px 5px 0 #B8B6C9,
    2px 6px 0 #ACAABE;
  --hf-slab-contact: 0 8px 11px -4px rgba(16, 14, 24, .44);
  --hf-slab-ambient: 0 28px 50px -18px rgba(10, 8, 18, .50);
  /* the crossing object is NEARER, so its side is deeper and its pools travel further */
  --hf-obj-side:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 1px 0 0 rgba(255, 255, 255, .86),
    inset 0 -1px 0 rgba(27, 25, 34, .10),
    inset -1px 0 0 rgba(27, 25, 34, .07),
    0 1px 0 #E4E2ED,
    0 2px 0 #D7D5E3,
    1px 3px 0 #CAC8D8,
    1px 4px 0 #BEBCCF,
    2px 5px 0 #B2B0C5,
    2px 6px 0 #A6A4BB,
    3px 7px 0 #9A98B1;
  --hf-obj-contact: 0 11px 15px -5px rgba(16, 14, 24, .52);
  --hf-obj-ambient: 8px 28px 54px -14px rgba(10, 8, 18, .58);
}
/* the instruments — typographic and material, never icons. Own row; full text always
   visible. The deep foot is load-bearing: it is the empty material the crossing object
   lands on, so occlusion never costs a single clipped glyph (the plate12/13 defect). */
.hf-frame {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: 15px 17px 38px;
  min-width: 0;
  align-self: stretch;
  border-radius: 13px;
  box-shadow: var(--hf-slab-side), var(--hf-slab-contact), var(--hf-slab-ambient);
}
/* the two instruments do not lie at the same depth: the one the object LEAVES is further
   into the scene than the one it arrives at, which is the story stated as geometry */
.hf-frame-from {
  grid-column: 1;
  background: var(--hf-slab-face);
  transform: translateZ(0);
}
.hf-frame-to {
  grid-column: 3;
  background: var(--hf-slab-face-alt);
  transform: translateZ(9px);
}
.hf-framehead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.hf-app {
  font-weight: 620; font-size: 14.5px; letter-spacing: -.012em;
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  /* on-light text uses family INK (never MARK) — set by handoff-stage.js as --hf-from-ink / --hf-to-ink */
  color: var(--hf-app-ink, var(--hf-ink));
}
.hf-app::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--hf-appdot, var(--hf-mark));
  box-shadow: 1px 1px 2px rgba(27,25,34,.16);
}
/* PLATE 24. The 7px square was a stand-in for a mark we had but never placed. Once the real
   mark is in the slot the stand-in is not a companion, it is a second bullet — so it goes. */
.hf-app:has(.mmk)::before { display: none; }

/* PLATE 24 · the thirteen instrument names carry their marks.
   .hf-sp-name is a GRID cell — the shared [data-brandmark] rule makes it an atomic inline
   box, which is what keeps mark and word from ever being split across a line without
   white-space:nowrap. overflow-wrap stays on the text so a long name still breaks inside
   itself at 320px rather than pushing the row. */
.hf-sp-name[data-brandmark] { display: flex; align-items: center; }
/* One fixed mark gutter down all thirteen rows. The marks have different natural widths, so
   without it every name starts at a different x and the column reads ragged — and the row
   whose mark is still owed (syntax) has to hold the same gutter or it breaks the same edge. */
.hf-spine .mmk-inline { --mmk-base: 1.08em; flex: 0 0 1.9em; width: 1.9em; justify-content: center; margin-inline-end: .55em; }
.hf-spine .mmk-inline > svg { max-width: 100%; }
.hf-spine .hf-sp-name[data-brandmark-gap] { padding-inline-start: calc(1.9em + .55em); }
/* Running copy: the mark rides the sentence, so it takes the sentence's size, not its own. */
.hf-plate-note b[data-brandmark] .mmk-inline { --mmk-base: .95em; }
.hf-frame-from { --hf-appdot: var(--hf-from, var(--hf-mark)); --hf-app-ink: var(--hf-from-ink, var(--hf-ink)); }
.hf-frame-to   { --hf-appdot: var(--hf-to,   var(--hf-mark)); --hf-app-ink: var(--hf-to-ink,   var(--hf-ink)); }
/* Secondary stage copy: ink-1 (7.65:1 on white), not ink-2 (3.73:1 — fails body floor). */
.hf-domain { font-size: 11.5px; color: var(--hf-ink-1); letter-spacing: .04em; text-transform: uppercase; }
.hf-step { font-size: 13px; color: var(--hf-ink-1); margin-top: 2px; }
.hf-framefoot { font-size: 11.5px; color: var(--hf-ink-1); margin-top: 10px; }

/* the seam BETWEEN the instruments — it runs in the open gutter now that there is no card,
   and it sits at the BACK of the stack so the crossing object passes visibly in front of it */
.hf-stage-seam {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(232, 231, 240, .55) 22%, rgba(232, 231, 240, .55) 78%, transparent);
  overflow: visible;
}
.hf-stage-seam::after {
  content: ""; position: absolute; left: -0.5px; top: 12%; bottom: 12%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--hf-lift), transparent);
  opacity: .55;
}

/* THE OBJECT — the nearest thing in the depthfield, and the reason the stage reads as a
   scene rather than a diagram. It rides UP over the instruments' empty foot and drops its
   own shadow onto their faces: real occlusion against a real neighbour.
   THE OVERLAP IS BUDGETED, not eyeballed — the frames carry 38px of empty bottom padding
   and the object climbs 26px of it, so 12px of clear material always remains under the
   last line of instrument text. No glyph is ever covered, at any width. */
.hf-object {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  z-index: 3;
  width: min(292px, 78%);
  max-width: calc(100% - 24px);
  margin: -26px auto 0;
  justify-self: center;
  transform: translateZ(30px);
  background: var(--hf-slab-face);
  border: 0;
  border-radius: 13px;
  box-shadow: var(--hf-obj-side), var(--hf-obj-contact), var(--hf-obj-ambient);
  padding: 13px 15px 12px;
}
/* what the object throws back off the polished surface it is lying on. A reflection is the
   cue that separates a thing IN a photograph from a thing pasted onto one, and it is the
   one cue CSS can give honestly here — it is light, not a second copy of the content. */
.hf-object::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%;
  bottom: -19px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(226, 226, 240, .17), rgba(226, 226, 240, 0) 78%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
html.ss-js .hf-object { animation: hf-cross 8s cubic-bezier(.32,.72,0,1) infinite; }
/* Travel stays inside the object band — never over the instrument frames above.
   Percentages are of the card itself; card is ≤78% of stage so ±22% stays in-band.
   translateZ rides along in every frame: dropping it mid-animation would flatten the
   object back into the plane the instant it started moving. */
@keyframes hf-cross {
  0%     { transform: translate3d(-22%, 0, 30px); }
  8%     { transform: translate3d(-22%, 0, 30px); }
  46%    { transform: translate3d(0, 0, 30px); }
  54%    { transform: translate3d(0, 0, 30px); }
  92%    { transform: translate3d(22%, 0, 30px); }
  92.01% { transform: translate3d(-22%, 0, 30px); }
  100%   { transform: translate3d(-22%, 0, 30px); }
}
.hf-obj-kicker {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hf-mark); font-weight: 640; margin-bottom: 6px;
}
.hf-obj-id {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px; color: var(--hf-ink); font-weight: 560;
  margin-bottom: 9px;
}
/* Each row is a plain-English NAME and, when the identifier adds something the name does
   not already say, the registry id in mono pushed to the right. Two columns, never one
   run-on phrase — juxtaposing them read as "a client client_record". */
.hf-state { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.hf-state li {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px;
  font-size: 12px; color: var(--hf-ink-1); min-width: 0;
}
.hf-state-name { min-width: 0; }
.hf-state li .hf-tok { margin-left: auto; text-align: right; }
.hf-state li::before {
  content: ""; flex: 0 0 auto; margin-top: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hf-mark);
}
.hf-state li[data-carried="0"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--hf-line-2); }
.hf-obj-foot {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hf-line);
  font-size: 10.5px; color: var(--hf-ink-1);
}
.hf-stage .hf-tok { color: var(--hf-ink-1); }

/* the honest provenance line — always visible, never a hover-reveal */
.hf-prov {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--hf-ink-2);
  max-width: 58ch;
}
.hf-prov code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; color: var(--hf-ink-1);
  background: var(--hf-wash); padding: 1px 5px; border-radius: 4px;
}

/* ───────────────────────────────────────────── act shell */

.hf-act {
  position: relative;
  padding: var(--hf-act) var(--hf-gut);
  scroll-margin-top: 72px;
}
.hf-act-in {
  max-width: var(--hf-maxw);
  margin-left: calc(var(--hf-seam-x) + var(--hf-gut) * 0.8);
  margin-right: auto;
}
.hf-actno {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; letter-spacing: .16em; color: var(--hf-mark);
  margin-bottom: 16px;
  /* NOT opacity:.8 — that composited MARK down to 3.7:1 on the light ground. Full
     strength measures 5.45 on ground / 6.06 on paper; the night act's opacity:1
     override was patching this one symptom in one act. */
}
.hf-act h2 {
  font-size: clamp(1.6rem, 4.6vw, 2.7rem);
  margin-bottom: 16px;
  max-width: 20ch;
}
.hf-lede { font-size: clamp(1rem, 2.1vw, 1.12rem); color: var(--hf-ink-1); max-width: 56ch; }

/* ───────────────────────── ACT · THE CLAIM
   The tonal step between the media hero and the stations list: large type, one tone
   change, no cards.

   IT IS NOT A FULL-VIEWPORT ACT, and this is the fix for the white void PASS-3 found.
   It used to carry `min-height:100svh` with `align-items:center`. This file has no
   border-box reset, so the 100svh landed on the CONTENT box and the act measured
   viewport + both paddings — 1152px at a 900px viewport — holding 342px of type. The
   result was 405px of empty white above the headline and 405px below it, starting
   exactly at the fold under the now-dark hero. An act is sized by what is in it plus
   the page's own act rhythm; a viewport is reserved for something that fills one. */
.hf-claim {
  padding: var(--hf-act) var(--hf-gut);
  background:
    radial-gradient(120% 80% at 12% 20%, var(--hf-wash-soft), transparent 55%),
    var(--hf-paper);
}
.hf-claim-in { max-width: min(720px, 100%); }
.hf-claim h2 {
  font-size: clamp(2rem, 6.2vw, 3.85rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 14ch;
  margin-bottom: 22px;
}
.hf-claim .hf-lede {
  max-width: 38ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
}

/* ───────────────────────── ACT 1 · THE STATIONS (spine continuum)
   Typographic list on the seam — not a thirteen-card tile stack. Real vertical air
   between rows; the commissioned rail sits below as a matted object. */

.hf-spine {
  list-style: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hf-line);
  max-width: min(920px, 100%);
}
.hf-spine li {
  border-bottom: 1px solid var(--hf-line);
  margin: 0;
}
.hf-spine a {
  display: grid;
  grid-template-columns: 2.6rem minmax(7.5rem, 11.5rem) minmax(6.5rem, 11rem) minmax(0, 1fr);
  gap: 8px 18px;
  align-items: baseline;
  padding: clamp(16px, 2.2vh, 22px) 4px clamp(16px, 2.2vh, 22px) 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: background .18s var(--ss-ease, ease);
}
.hf-spine a:hover { background: var(--hf-wash-hover); }
.hf-sp-n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--hf-ink-2); letter-spacing: .08em;
}
.hf-sp-name {
  font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; color: var(--hf-ink);
  min-width: 0; overflow-wrap: anywhere;
}
.hf-sp-dom {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--hf-mark); font-weight: 560; min-width: 0;
}
.hf-sp-job {
  font-size: 14px; color: var(--hf-ink-1); line-height: 1.45; min-width: 0;
  overflow-wrap: anywhere;
}

/* retained for any residual station markup elsewhere; not the door rhythm */
.hf-strip {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1px;
  background: var(--hf-line);
  border: 1px solid var(--hf-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--hf-e2);
}
.hf-station {
  background: var(--hf-paper);
  padding: 18px 17px 17px;
  min-width: 0;
  text-decoration: none;
  display: block;
  transition: background .22s var(--ss-ease, ease);
  position: relative;
}
.hf-station:hover { background: var(--hf-paper-hi); }
.hf-station::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--hf-stn, var(--hf-mark));
  opacity: 0; transition: opacity .22s var(--ss-ease, ease);
}
.hf-station:hover::after, .hf-station:focus-visible::after { opacity: .85; }
.hf-stn-n, .hf-stn-name, .hf-stn-dom, .hf-stn-job { display: block; min-width: 0; }
.hf-stn-n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--hf-ink-2); letter-spacing: .1em; margin-bottom: 9px;
}
.hf-stn-name { font-size: 16px; font-weight: 620; letter-spacing: -.015em; margin-bottom: 3px; color: var(--hf-ink); }
.hf-stn-dom { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--hf-stn, var(--hf-mark)); font-weight: 560; margin-bottom: 8px; }
.hf-stn-job { font-size: 13px; color: var(--hf-ink-1); line-height: 1.45; }

/* the registry token, shown beside its human name — it is an identifier, so it is set in
   mono and never translated into marketing language */
.hf-tok {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--hf-ink-2);
}
.hf-station[data-sealed] { background: var(--hf-ground-lo); }
.hf-station[data-sealed] .hf-stn-name { color: var(--hf-ink-2); }

/* Tonal steps so acts read as deliberate shifts, not one long white stack */
#instruments {
  padding-top: clamp(88px, 12vh, 140px);
  padding-bottom: clamp(96px, 14vh, 160px);
  background: var(--hf-ground);
}
#proof {
  background: linear-gradient(180deg, var(--hf-proof-a) 0%, var(--hf-proof-b) 18%, var(--hf-proof-b) 82%, var(--hf-ground) 100%);
  padding-top: clamp(88px, 12vh, 140px);
  padding-bottom: clamp(96px, 13vh, 150px);
}
#truth {
  padding-top: clamp(80px, 11vh, 128px);
  padding-bottom: clamp(88px, 12vh, 140px);
  background: var(--hf-paper);
}
#inside {
  padding-top: clamp(80px, 11vh, 128px);
  padding-bottom: clamp(96px, 13vh, 150px);
  background: var(--hf-ground);
}
#pass {
  padding-top: clamp(80px, 11vh, 128px);
  padding-bottom: clamp(88px, 12vh, 140px);
}

/* ─────────────────────── ACT 2 · same object, two states (proof) */

.hf-two {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
.hf-twocol > h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--hf-ink-2); font-weight: 600; margin-bottom: 14px;
}
.hf-idline {
  margin-top: 20px; font-size: 12.5px; color: var(--hf-ink-1);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
.hf-idline code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px;
  /* the wash carries the family; the glyphs take ink. MARK on this chip measured 4.45:1
     over the proof gradient at 320 — under the body floor, in light. */
  background: var(--hf-wash); color: var(--hf-ink); padding: 2px 7px; border-radius: 5px;
}

/* ─────────────────────────────── ACT 3 · truth glyphs V/D/C */

.hf-glyphs { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 18px; }
/* Typographic, not a third tile grid: no card, no border, no shadow. A hairline rule ties
   each mark to the act instead of boxing it. (Visual seam pass 1, findings 2 + 3.) */
.hf-glyphs-open .hf-glyph {
  background: transparent; border: 0; border-top: 1px solid var(--hf-line);
  border-radius: 0; padding: 20px 0 0; box-shadow: none;
}
.hf-glyph svg { width: 26px; height: 26px; margin-bottom: 13px; color: var(--hf-mark); }
.hf-glyph h3 { font-size: 15.5px; margin-bottom: 6px; }
.hf-glyph p { font-size: 13.5px; color: var(--hf-ink-1); }

.hf-removed {
  margin-top: 22px;
  border: 1px dashed var(--hf-line-2);
  border-radius: 12px;
  background: transparent;
}
.hf-removed summary {
  cursor: pointer; padding: 15px 19px; font-size: 14px; color: var(--hf-ink-1);
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 46px;
}
.hf-removed summary::-webkit-details-marker { display: none; }
.hf-removed summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hf-line-2);
}
.hf-removed[open] summary { border-bottom: 1px dashed var(--hf-line-2); }
.hf-removed .hf-drawer { padding: 15px 19px 18px; font-size: 13.5px; color: var(--hf-ink-1); }
.hf-removed .hf-drawer li { margin-bottom: 8px; }

/* ─────────────────── ACT 4 · seen from inside (matted objects) */

/* An alpha-matted object in the depthfield. NOT an image in a box: no card, no border,
   no radius, no frame. The asset is matted onto the same cool ground the page uses and
   carries its own baked key-light shadow, so the objects read as floating on the page.
   The edge is feathered so the asset's ground and the page's ground never show a seam. */
.hf-object-plate {
  position: relative;
  margin: clamp(34px, 5vh, 58px) 0 0;
  max-width: 100%;
  /* the plate sits UNDER the seam thread so the spine visibly passes in front of it:
     occlusion is what makes it an object in the depthfield rather than an insert */
  z-index: 0;

  /* THE FEATHER — an EDGE dissolve, never a centre-weighted vignette.
     WHAT WENT WRONG. This was a radial centred on the FRAME while the compositions are
     centred nowhere near it. Measured off work-three-objects (1600x900): the lathe card
     occupies x 6.1-43.8%, y 71.7-93.1% and togglesnap's panel runs out to x 87.3%. The
     old light radial (78% 82% at 50% 48%) put lathe's button row at ~33% alpha; the old
     night radial (64% 70% at 50% 46%) put it at ~0 and faded togglesnap to ~38%. That
     section's whole job is to be the receipt for "real product, not mockups", and the
     treatment was deleting the evidence — a proof turned back into a claim.
     WHAT IT IS NOW. Two linear feathers intersected, so alpha falls only at the OUTER
     margin and only where the composition is empty: generous down from the top (17%,
     which is pure ground in both plates), tight everywhere the content actually reaches
     (4.2% left, 90.5% right, 95.5% bottom). Every pixel of every captured surface sits
     inside the solid band, in BOTH modes. Legibility of the proof beats the effect. */
  --hf-feather-x: linear-gradient(to right,
    transparent 0, rgba(0,0,0,.5) 1.6%, #000 4.2%,
    #000 90.5%, rgba(0,0,0,.5) 96.4%, transparent 100%);
  --hf-feather-y: linear-gradient(to bottom,
    transparent 0, rgba(0,0,0,.26) 5.5%, #000 17%,
    #000 95.5%, rgba(0,0,0,.42) 98.4%, transparent 100%);

  /* the plate's material on NIGHT only — same language as the handoff stage's objects, so
     the whole door is built out of one kind of thing. Key light stays upper-left, so the
     side that shows is the bottom-right one. */
  --hf-plate-side:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 0 #B9B7C8, 0 2px 0 #A4A2B6, 1px 3px 0 #8E8CA2, 1px 4px 0 #78768C, 2px 5px 0 #64627A;
  --hf-plate-contact: 0 10px 16px -6px rgba(0, 0, 0, .70);
  --hf-plate-ambient: 8px 34px 66px -20px rgba(0, 0, 0, .80);
}
.hf-object-plate img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* matted, not corner-masked: the edge dissolves into the page's own ground so there is
     no card, no border and no visible rectangle boundary anywhere on the object.
     If a browser cannot composite mask layers the two feathers UNION instead of
     intersecting — which shows a soft edge rather than eating content. It fails toward
     legibility, which is the only direction this is allowed to fail in. */
  -webkit-mask-image: var(--hf-feather-x), var(--hf-feather-y);
  mask-image: var(--hf-feather-x), var(--hf-feather-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transform: perspective(2200px) rotateX(1.4deg);
  transform-origin: 50% 100%;
}
/* the object's own block: the contact pool's containing box, so the shadow lands at the
   OBJECT's base. With .hf-object-plate as the containing block the pool sat ~90px lower,
   behind the caption, which is both a lighting lie and a contrast breach (4.24:1). */
.hf-plate-obj { position: relative; }

/* the contact shadow the objects drop onto the page, from the page's one upper-left key */
/* The pool used to sit 2% INSIDE the plate, where the old radial had already dissolved the
   asset. With the feather holding solid to 95.5% the pool was hidden underneath its own
   object — a contact shadow you cannot see is not a contact shadow. It now sits at the
   base and reads out from under it, which is what makes the plate touch the page. */
.hf-plate-shadow {
  position: absolute;
  left: 9%; right: 5%;
  bottom: -11px;
  height: 38px;
  z-index: 0;
  background: radial-gradient(58% 100% at 52% 46%, var(--hf-plate-shadow-c), transparent 74%);
  filter: blur(13px);
  pointer-events: none;
}
.hf-object-plate figcaption { margin-top: clamp(14px, 2vh, 24px); max-width: 62ch; }
.hf-plate-note { font-size: 14.5px; color: var(--hf-ink-1); }
.hf-plate-note b { color: var(--hf-ink); font-weight: 600; }
.hf-plate-note code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
  color: var(--hf-mark); background: var(--hf-wash); padding: 1px 5px; border-radius: 4px;
}
.hf-plate-prov { font-size: 11.5px; color: var(--hf-ink-2); margin-top: 10px; letter-spacing: .02em; }

/* ─────────────────────────── ACT 5 · the night band (his canon) */

.hf-night {
  position: relative;
  /* the founder's 4K night plate under a gunmetal scrim, held in ONE act. The scrim was an
     inline style on the section, which meant night mode could not reach it; it lives here
     so the two modes can carry different weights. */
  --hf-night-scrim-a: color-mix(in srgb, var(--gun-base, #191923) 90%, transparent);
  --hf-night-scrim-b: color-mix(in srgb, var(--gun-base, #191923) 96%, transparent);
  background-color: var(--hf-night);
  background-image:
    linear-gradient(180deg, var(--hf-night-scrim-a), var(--hf-night-scrim-b)),
    url('/media/night/12-mw-indigo-violet.jpg');
  background-size: cover;
  background-position: center;
  color: var(--hf-night-ink);
  overflow: hidden;
  isolation: isolate;
}
.hf-night .hf-amb-night { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .62; }
.hf-night .hf-act-in { position: relative; z-index: 2; }
.hf-night h2 { color: var(--hf-night-ink); }
.hf-night .hf-lede { color: var(--hf-night-ink-2); }
/* LIFT is the on-dark accent stop (indigo family). Pure LIFT/gun = 4.52:1.
   Base .hf-actno carries opacity:.8 for light acts — that drops LIFT under the body floor
   on night, so night restores full opacity. Local hold scrim on .hf-act-in darkens the
   composite under the reading column (surround only — starfield/aurora forms untouched). */
.hf-night .hf-actno { color: var(--hf-lift); opacity: 1; }
.hf-night .hf-tie { background: var(--hf-lift); opacity: .5; }
.hf-night .hf-act-in {
  border-radius: 18px;
  /* Opaque local hold (no transparent mix) so the 4K plate cannot lighten the composite
     under body-size LIFT type. Starfield + aurora remain in the surround outside this column. */
  background: color-mix(in srgb, var(--hf-night) 94%, #000000);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hf-lift) 12%, transparent),
              0 18px 60px rgba(0, 0, 0, 0.35);
  padding: clamp(22px, 3.4vh, 40px) clamp(18px, 3.2vw, 44px);
  margin-inline: calc(-1 * clamp(18px, 3.2vw, 44px));
  max-width: min(52rem, 100%);
}

/* ──────────────────────────────── ACT 6 · the pass (sourced prices) */

.hf-rungs {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: 16px;
}
.hf-rung {
  background: var(--hf-paper); border: 1px solid var(--hf-line);
  border-radius: 12px; padding: 20px 19px; box-shadow: var(--hf-e1);
}
.hf-rung .hf-rung-name { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--hf-ink-2); font-weight: 600; margin-bottom: 12px; }
/* PAYLOAD — never animated, never revealed, never delayed */
.hf-rung .hf-price { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 640; letter-spacing: -.026em; }
.hf-rung .hf-per { font-size: 13px; color: var(--hf-ink-2); font-weight: 400; }
.hf-rung .hf-cr { font-size: 13px; color: var(--hf-ink-1); margin-top: 8px; }
[data-payload] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }

/* ─────────────────────────── the ledger footer (receipts as design) */

.hf-foot {
  position: relative;
  border-top: 1px solid var(--hf-line);
  padding: clamp(56px, 8vh, 92px) var(--hf-gut) 40px;
  background: var(--hf-ground-lo);
}
.hf-foot-in { max-width: var(--hf-maxw); margin-left: calc(var(--hf-seam-x) + var(--hf-gut) * 0.8); margin-right: auto; }
.hf-foot h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 8px; }
.hf-ledger { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hf-line); }
.hf-ledger li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hf-line);
  font-size: 13.5px;
  align-items: baseline;
}
.hf-ledger .hf-when {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; color: var(--hf-ink-2); letter-spacing: .02em;
}
.hf-ledger .hf-what { color: var(--hf-ink-1); min-width: 0; }
.hf-foot-note { margin-top: 26px; font-size: 12.5px; color: var(--hf-ink-2); max-width: 62ch; }
.hf-legal { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.hf-legal a { flex: 0 0 auto; color: var(--hf-ink-1); text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.hf-legal a:hover { color: var(--hf-mark); }

/* ──────────────────────────────── wide: crossing stage scale */

@media (min-width: 1000px) {
  .hf-stagewrap-act { max-width: min(640px, 100%); }
  .hf-object { width: min(300px, 72%); }
}

/* ──────────────────────────────── narrow: 390 and 320 must hold */

@media (max-width: 900px) {
  .hf-hero {
    min-height: 100svh;
    min-height: 100dvh;
    max-height: 100svh;
    max-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: clamp(60px, 8vh, 80px) var(--hf-gut) clamp(18px, 3vh, 32px);
  }
  .hf-hero-object { max-width: min(720px, 94vw); }
  .hf-rail-pic, .hf-rail-pic img { max-height: min(34vh, 280px); }
  .hf-rail-stage { transform: none; } /* §XXX: no perspective clip at mid width */
  .hf-copy { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
  .hf-cta { justify-content: flex-start; }
  .hf-crossing {
    margin-left: calc(var(--hf-seam-x) + var(--hf-gut) * 0.5);
    margin-right: var(--hf-gut);
  }
  .hf-stagewrap { perspective: none; }
  .hf-stage { transform: none; transform-style: flat; }
  .hf-frame-from, .hf-frame-to { transform: none; }
}

@media (max-width: 640px) {
  :root { --hf-seam-x: 20px; --hf-gut: 20px; --hf-act: clamp(72px, 10vh, 104px); }
  .hf-act-in, .hf-foot-in { margin-left: 34px; }
  .hf-hero {
    padding: 58px var(--hf-gut) 18px;
  }
  .hf-hero h1 { font-size: clamp(1.7rem, 8.2vw, 2.25rem); }
  .hf-rail-pic, .hf-rail-pic img { max-height: min(28vh, 220px); }
  .hf-sub { margin-bottom: 14px; font-size: 0.95rem; }
  .hf-copy { margin-top: 8px; }
  .hf-crossing {
    margin-left: var(--hf-gut);
    margin-right: var(--hf-gut);
  }
  /* Same three objects, stacked. The seam becomes a real 16px gutter of open media between
     the two instruments — at 320 that gap is what tells you they are two things. */
  .hf-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 16px auto auto;
    column-gap: 0;
    min-height: 0;
  }
  .hf-frame-from { grid-column: 1; grid-row: 1; }
  /* only the LOWER instrument carries the deep foot at narrow — it is the one the crossing
     object lands on. The upper one has nothing over it, so its foot is dead air. */
  .hf-frame-from { padding-bottom: 16px; }
  .hf-stage-seam { grid-column: 1; grid-row: 2; min-height: 16px; background: none; }
  .hf-frame-to   { grid-column: 1; grid-row: 3; }
  .hf-object {
    grid-column: 1;
    grid-row: 4;
    position: relative;
    left: auto; top: auto; bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    margin: -24px 14px 0;
    justify-self: stretch;
  }
  /* no polished surface visible under it at this crop — a reflection with nothing to
     reflect off is a lie about the material */
  .hf-object::after { display: none; }
  .hf-stage-seam::after {
    left: 12%; right: 12%; top: 50%; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--hf-lift), transparent);
  }
  html.ss-js .hf-object { animation: none; }
  .hf-spine a {
    grid-template-columns: 2.2rem 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 14px 0;
  }
  .hf-sp-dom { grid-column: 2; }
  .hf-sp-job { grid-column: 1 / -1; padding-left: calc(2.2rem + 12px); }
  .hf-strip { grid-template-columns: 1fr; }
  .hf-ledger li { grid-template-columns: 1fr; gap: 3px; }
  /* the feather runs at EVERY width now. It was nulled here while it was a centre-weighted
     radial (which at 320 ate most of the frame); an edge feather costs the plate nothing
     but its outer margin, and nulling it is what leaves a hard bordered rectangle behind. */
  /* same reason as the desktop rule: sized by its content, never by the viewport */
  .hf-claim { padding: var(--hf-act) var(--hf-gut); }
  /* the night hold bleeds into the gutter at desk width; at 320 that bleed is wider than
     the gutter it has and the panel's right edge measured 324px against a 320 viewport —
     a §XXX clip (scripts/gate-xxx-text.mjs). No bleed at narrow. */
  .hf-night .hf-act-in { margin-inline: 0; }
  .hf-claim h2 { max-width: 100%; }
}
@media (max-width: 420px) {
  .hf-navlinks a.is-wide { display: none; }
}
@media (max-width: 380px) {
  :root { --hf-gut: 14px; --hf-seam-x: 14px; }
  .hf-act-in, .hf-foot-in { margin-left: 24px; }
  .hf-copy { padding-left: var(--hf-gut); padding-right: var(--hf-gut); }
  .hf-stagewrap { margin-left: var(--hf-gut); margin-right: var(--hf-gut); }
  body { font-size: 16px; }
  .hf-navlinks a { padding: 8px 9px; font-size: 13.5px; }
  .hf-frame { padding: 16px 14px 17px; }
}

/* ═══════════════════════════════════════════════ NIGHT MODE · the dark dress
   F3 names the legal night forms; this door wears "an apple-level dark mode on the
   GUNMETAL material". The ladder is os-tokens' own gunmetal ramp — nothing here paints
   a neutral or a chroma that the house does not already own; the two grounds below
   gun-base are color-mix steps off gun-base, never a flat-black void.

   THE ONE RULE THAT SETS THE CEILING. os-tokens: "LIFT is for accents and large text on
   dark ONLY". Measured, LIFT #806EF3 clears the 4.5:1 body floor on gun-base (4.52) and
   fails on gun-surface (4.23) and gun-card (3.87). So every ground on this door in night
   is at or below gun-base, and the family colour is then legal on the 11.5px labels that
   carry it in light. That is why the ladder steps DOWN from gun-base instead of up.

   Explicit wins in both directions: the media query is scoped away from
   [data-theme="light"], and [data-theme="dark"] applies with no query at all. The two
   token blocks are duplicates ON PURPOSE and must be edited together.

   NOT redressed, deliberately: .hf-hero and the whole handoff stage inside it. The hero
   is commissioned dark media in BOTH modes and the stage is a white glass object lying on
   it, so it is pinned to the light ramp below — flipping it would put #F2F3FA ink on a
   #FFFFFF card. The night act (#rest) already carries the founder's 4K night plate and
   the aurora ambient; night mode does not touch it. */

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --hf-ground:    color-mix(in srgb, var(--gun-base, #191923) 82%, #000);
    --hf-ground-lo: color-mix(in srgb, var(--gun-base, #191923) 62%, #000);
    --hf-paper:     var(--gun-base, #191923);
    --hf-paper-hi:  var(--gun-card, #262633);
    --hf-ink:       var(--gun-ink-0, #F2F3FA);
    --hf-ink-1:     color-mix(in srgb, var(--gun-ink-0, #F2F3FA) 78%, var(--gun-base, #191923));
    --hf-ink-2:     var(--gun-ink-1, #8E90A6);
    --hf-line:      var(--gun-line, rgba(230,232,244,.10));
    --hf-line-2:    var(--gun-line-strong, rgba(230,232,244,.22));

    --hf-mark:       var(--indigo-lift, #806EF3);
    --hf-lift:       color-mix(in srgb, var(--indigo-lift, #806EF3) 62%, var(--gun-ink-0, #F2F3FA));
    --hf-mark-press: color-mix(in srgb, var(--indigo-lift, #806EF3) 78%, var(--gun-ink-0, #F2F3FA));
    --hf-mark-line:  rgba(128, 110, 243, .45);
    --hf-wash:       rgba(128, 110, 243, .14);
    /* the claim act's bloom. On light it LIGHTENS; on gunmetal it must DEEPEN — a
       lightening bloom pushes that act above gun-base and drops the 11.5px act number
       under the body floor (measured 4.25:1). A vignette keeps the ceiling. */
    --hf-wash-soft:  rgba(6, 6, 12, .38);
    --hf-wash-hover: rgba(128, 110, 243, .10);

    --hf-nav-bg: color-mix(in srgb, var(--gun-base, #191923) 78%, transparent);
    --hf-proof-a: color-mix(in srgb, var(--gun-base, #191923) 90%, #000);
    --hf-proof-b: var(--gun-base, #191923);
    --hf-plate-shadow-c: rgba(0, 0, 0, .55);

    /* same geometry, same upper-left key — only the shadow's colour changes, because a
       27,25,34 shadow is invisible on gunmetal */
    --hf-e1: 1px 2px 3px rgba(0, 0, 0, .42);
    --hf-e2: 3px 6px 14px rgba(0, 0, 0, .48);
    --hf-e3: 8px 16px 40px rgba(0, 0, 0, .55);
    --hf-e4: 14px 28px 70px rgba(0, 0, 0, .62);

    /* the loom component library reads the os-tokens neutrals; flip those too or the
       proof cards stay white cards on a gunmetal page */
    --card: var(--gun-card, #262633);
    --surface: var(--gun-surface, #1F1F2A);
    --ground: var(--gun-base, #191923);
    --line: var(--gun-line, rgba(230,232,244,.10));
    --line-strong: var(--gun-line-strong, rgba(230,232,244,.22));
    --ink-0: var(--gun-ink-0, #F2F3FA);
    --ink-1: color-mix(in srgb, var(--gun-ink-0, #F2F3FA) 78%, var(--gun-base, #191923));
    --ink-2: var(--gun-ink-1, #8E90A6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --hf-ground:    color-mix(in srgb, var(--gun-base, #191923) 82%, #000);
  --hf-ground-lo: color-mix(in srgb, var(--gun-base, #191923) 62%, #000);
  --hf-paper:     var(--gun-base, #191923);
  --hf-paper-hi:  var(--gun-card, #262633);
  --hf-ink:       var(--gun-ink-0, #F2F3FA);
  --hf-ink-1:     color-mix(in srgb, var(--gun-ink-0, #F2F3FA) 78%, var(--gun-base, #191923));
  --hf-ink-2:     var(--gun-ink-1, #8E90A6);
  --hf-line:      var(--gun-line, rgba(230,232,244,.10));
  --hf-line-2:    var(--gun-line-strong, rgba(230,232,244,.22));

  --hf-mark:       var(--indigo-lift, #806EF3);
  --hf-lift:       color-mix(in srgb, var(--indigo-lift, #806EF3) 62%, var(--gun-ink-0, #F2F3FA));
  --hf-mark-press: color-mix(in srgb, var(--indigo-lift, #806EF3) 78%, var(--gun-ink-0, #F2F3FA));
  --hf-mark-line:  rgba(128, 110, 243, .45);
  --hf-wash:       rgba(128, 110, 243, .14);
  --hf-wash-soft:  rgba(6, 6, 12, .38);   /* deepens, never lightens — see the note above */
  --hf-wash-hover: rgba(128, 110, 243, .10);

  --hf-nav-bg: color-mix(in srgb, var(--gun-base, #191923) 78%, transparent);
  --hf-proof-a: color-mix(in srgb, var(--gun-base, #191923) 90%, #000);
  --hf-proof-b: var(--gun-base, #191923);
  --hf-plate-shadow-c: rgba(0, 0, 0, .55);

  --hf-e1: 1px 2px 3px rgba(0, 0, 0, .42);
  --hf-e2: 3px 6px 14px rgba(0, 0, 0, .48);
  --hf-e3: 8px 16px 40px rgba(0, 0, 0, .55);
  --hf-e4: 14px 28px 70px rgba(0, 0, 0, .62);

  --card: var(--gun-card, #262633);
  --surface: var(--gun-surface, #1F1F2A);
  --ground: var(--gun-base, #191923);
  --line: var(--gun-line, rgba(230,232,244,.10));
  --line-strong: var(--gun-line-strong, rgba(230,232,244,.22));
  --ink-0: var(--gun-ink-0, #F2F3FA);
  --ink-1: color-mix(in srgb, var(--gun-ink-0, #F2F3FA) 78%, var(--gun-base, #191923));
  --ink-2: var(--gun-ink-1, #8E90A6);
}

/* THE HERO IS PINNED TO LIGHT RAMP. Spine/rail photography is cool-ground material
   (§V true noun). Night dress must not invert hero ink onto a pale object plate. */
.hf-hero {
  --hf-ground: #F3F2F8;
  --hf-ground-lo: #EBEAF2;
  --hf-paper: #FFFFFF;
  --hf-paper-hi: #FCFCFE;
  --hf-ink: #1B1922;
  --hf-ink-1: #54525E;
  --hf-ink-2: #68666F;
  --hf-line: #E1E0E5;
  --hf-line-2: #D1D0D6;
  --hf-mark: #5B4FCF;
  --hf-lift: #806EF3;
  --hf-mark-press: #5246C2;
  --hf-wash: rgba(91, 79, 207, .07);
  --hf-e1: 1px 2px 3px rgba(27, 25, 34, .05);
  --hf-e2: 3px 6px 14px rgba(27, 25, 34, .07);
  --hf-e3: 8px 16px 40px rgba(27, 25, 34, .10);
  --hf-e4: 14px 28px 70px rgba(27, 25, 34, .13);
  color: var(--hf-ink);
  background: var(--hf-ground);
}

/* Night dress — the handful of places a token flip alone does not carry.
   Both hooks, one rule, so the two paths can never disagree. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hf-actno { opacity: 1; }
  /* THE MATTE ON GUNMETAL. In light the plates dissolve because the asset's ground IS the
     page's ground. On night that is simply FALSE, and no mask can make it true: feathering
     a light-ground asset into a dark page does not dissolve it, it rings it in a white
     halo — which is the fogged window PASS-4 named, just with the content legible again.
     So on night the plate stops pretending and becomes what it honestly is: a lit print
     lying on a dark stage. Hard edge, but never a bare rectangle — it takes the SAME
     material the stage objects wear (a lit top, a stepped side you can see, a contact
     shadow that touches, an ambient pool), and the act's seam thread still passes in
     front of it. Exposure trim matches .mm-plate so every capture on this door is
     graded once. No recolour, no crop, no second grade. */
  :root:not([data-theme="light"]) .hf-object-plate img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: clamp(10px, 1.1vw, 15px);
    box-shadow: var(--hf-plate-side), var(--hf-plate-contact), var(--hf-plate-ambient);
    filter: brightness(.86) saturate(.98);
  }
  /* night sides + deeper pools on the three stage objects. The FACES do not move: family
     ink on them is already at the 4.5:1 floor (see the stage block). */
  :root:not([data-theme="light"]) .hf-stage {
    --hf-slab-side:
      inset 0 1px 0 rgba(255, 255, 255, .92),
      inset 0 -1px 0 rgba(12, 10, 20, .16),
      inset -1px 0 0 rgba(12, 10, 20, .10),
      0 1px 0 #C9C7D6, 0 2px 0 #B4B2C4, 1px 3px 0 #9E9CB1, 1px 4px 0 #86849A;
    --hf-slab-contact: 0 7px 11px -4px rgba(0, 0, 0, .68);
    --hf-slab-ambient: 0 30px 56px -20px rgba(0, 0, 0, .78);
    --hf-obj-side:
      inset 0 1px 0 rgba(255, 255, 255, .96),
      inset 0 -1px 0 rgba(12, 10, 20, .18),
      0 1px 0 #C4C2D2, 0 2px 0 #ACAABE, 1px 3px 0 #9593A9, 1px 4px 0 #7E7C92, 2px 5px 0 #6B6980;
    --hf-obj-contact: 0 10px 15px -5px rgba(0, 0, 0, .74);
    --hf-obj-ambient: 7px 26px 52px -14px rgba(0, 0, 0, .82);
  }
  :root:not([data-theme="light"]) .hf-stage-seam {
    background: linear-gradient(180deg, transparent, rgba(230, 232, 244, .22) 22%, rgba(230, 232, 244, .22) 78%, transparent);
  }
  :root:not([data-theme="light"]) .hf-removed { border-style: solid; }
  /* On a light page the night plate has to be crushed to 90-96% or the act screams next
     to white. On a gunmetal page it does not: the surround lifts and his sky is actually
     visible, which is the whole point of the act. The reading column keeps its own opaque
     hold, so nothing here touches type contrast. */
  :root:not([data-theme="light"]) .hf-night {
    --hf-night-scrim-a: color-mix(in srgb, var(--gun-base, #191923) 64%, transparent);
    --hf-night-scrim-b: color-mix(in srgb, var(--gun-base, #191923) 80%, transparent);
  }
  /* framed plates: a pale 16:9 print is the loudest thing on a gunmetal page. Exposure
     trim only — no recolour, no crop. */
  :root:not([data-theme="light"]) .mm-plate img { filter: brightness(.86) saturate(.98); }
  /* mono identifiers: the family colour is a 4.2:1 stop on these chip grounds, so the
     chip keeps the wash and the glyphs take the ink ramp */
  :root:not([data-theme="light"]) .hf-plate-note code { color: var(--hf-ink); }
  :root:not([data-theme="light"]) .mm-gen-chip { color: var(--hf-ink-1); }
}
:root[data-theme="dark"] .hf-actno { opacity: 1; }
:root[data-theme="dark"] .hf-object-plate img {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: clamp(10px, 1.1vw, 15px);
  box-shadow: var(--hf-plate-side), var(--hf-plate-contact), var(--hf-plate-ambient);
  filter: brightness(.86) saturate(.98);
}
:root[data-theme="dark"] .hf-stage {
  --hf-slab-side:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(12, 10, 20, .16),
    inset -1px 0 0 rgba(12, 10, 20, .10),
    0 1px 0 #C9C7D6, 0 2px 0 #B4B2C4, 1px 3px 0 #9E9CB1, 1px 4px 0 #86849A;
  --hf-slab-contact: 0 7px 11px -4px rgba(0, 0, 0, .68);
  --hf-slab-ambient: 0 30px 56px -20px rgba(0, 0, 0, .78);
  --hf-obj-side:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(12, 10, 20, .18),
    0 1px 0 #C4C2D2, 0 2px 0 #ACAABE, 1px 3px 0 #9593A9, 1px 4px 0 #7E7C92, 2px 5px 0 #6B6980;
  --hf-obj-contact: 0 10px 15px -5px rgba(0, 0, 0, .74);
  --hf-obj-ambient: 7px 26px 52px -14px rgba(0, 0, 0, .82);
}
:root[data-theme="dark"] .hf-stage-seam {
  background: linear-gradient(180deg, transparent, rgba(230, 232, 244, .22) 22%, rgba(230, 232, 244, .22) 78%, transparent);
}
:root[data-theme="dark"] .hf-removed { border-style: solid; }
:root[data-theme="dark"] .hf-night {
  --hf-night-scrim-a: color-mix(in srgb, var(--gun-base, #191923) 64%, transparent);
  --hf-night-scrim-b: color-mix(in srgb, var(--gun-base, #191923) 80%, transparent);
}
:root[data-theme="dark"] .mm-plate img { filter: brightness(.86) saturate(.98); }
:root[data-theme="dark"] .hf-plate-note code { color: var(--hf-ink); }
:root[data-theme="dark"] .mm-gen-chip { color: var(--hf-ink-1); }

/* ──────────────────────────────────────── reduced motion is law (§3.8.5 / styleseed)
   Meaning preserved: chrome fully risen, rail fully settled, no mid-flight pause. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.ss-js .hf-object { animation: none !important; transform: none !important; }
  .hf-seam-node { display: none !important; }
  .hf-nav, .hf-btn, .hf-station, .hf-station::after { transition: none !important; }
  .hf-nav[data-chrome="deferred"] .hf-navlinks {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .hf-rail-stage { transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .hf-seam, .hf-seam-node, .hf-amb, .hf-amb-night { display: none !important; }
  .hf-copy, .hf-act-in, .hf-foot-in, .hf-stagewrap { margin-left: 0 !important; }
}