/* ============================================================
   CHROME — sticky top rail + latent left egress gauge.
   The instrument reads as live from first paint.
   ============================================================ */

/* —— TOP RAIL —— */
/* FIXED (not sticky/in-flow): an in-flow rail pushed the cover down by its own height, so the cover
   image scrolled up that much before its sticky stage engaged. Fixed = the cover stage sits at the
   true top and pins from scroll 0 (no first-load image scroll). */
.rail{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  background:color-mix(in srgb, var(--travertine) 86%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--edge);
  transition:background var(--t-stage) var(--ease-stone), border-color var(--t-stage) var(--ease-stone);
}
.rail[data-tone="dark"]{ background:color-mix(in srgb, var(--obsidian) 84%, transparent); border-color:var(--obsidian-edge); }

.rail-left{ display:flex; align-items:center; gap:var(--s-3); }
.rail-center{ display:flex; justify-content:center; }
.rail-right{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s-3); }

/* wordmark lockup — purely typographic, read as a program designation */
.wordmark{ display:inline-flex; align-items:center; gap:.6ch; cursor:pointer; background:none; border:0; white-space:nowrap; }
.wordmark .mark,.wordmark .suffix{ white-space:nowrap; }
.rail-pip{ width:6px; height:6px; background:var(--lapis); box-shadow:var(--glow-lapis); flex-shrink:0; }
.rail[data-tone="dark"] .rail-pip{ background:var(--phosphor); box-shadow:0 0 8px var(--phosphor-dim); }
.wordmark .mark{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:650; font-size:var(--t-ui);
  letter-spacing:.18em; text-transform:uppercase; color:var(--on-ground); }
.wordmark .suffix{ font-family:var(--f-mono); font-weight:400; font-size:var(--t-telemetry);
  letter-spacing:var(--track-telemetry); text-transform:uppercase; color:var(--ink-mute); }
.rail[data-tone="dark"] .wordmark .mark{ color:var(--bone); }
.rail[data-tone="dark"] .wordmark .suffix{ color:rgba(231,225,211,.5); }

.av-clock{ color:var(--ink-mute); }
.rail[data-tone="dark"] .av-clock{ color:var(--phosphor); text-shadow:0 0 10px var(--phosphor-dim); }

/* —— PAGE TABS (THE UNIT / ARCHIVE), centre of the rail, shared with /archive —— */
.rail-tabs{ display:flex; justify-content:center; align-items:center; gap:var(--s-4); }
.rail-tab{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:600;
  font-size:var(--t-telemetry); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  padding-bottom:3px; border-bottom:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:color var(--t-act), border-color var(--t-act); }
.rail-tab:hover{ color:var(--ink-soft); }
.rail-tab.is-current{ color:var(--on-ground); border-color:var(--gilt-deep); }
.rail[data-tone="dark"] .rail-tab{ color:rgba(231,225,211,.55); }
.rail[data-tone="dark"] .rail-tab:hover{ color:var(--bone); }
.rail[data-tone="dark"] .rail-tab.is-current{ color:var(--bone); border-color:var(--phosphor-dim); }


.rail-enlist{ font-family:var(--f-civic); font-weight:600; font-size:var(--t-ui);
  letter-spacing:var(--track-ui); text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--gilt-deep); padding-bottom:2px; cursor:pointer; background:none;
  border-top:0; border-left:0; border-right:0; transition:color var(--t-act), border-color var(--t-act); }
.rail-enlist:hover{ color:var(--gilt-deep); border-color:var(--gilt); }
.rail[data-tone="dark"] .rail-enlist{ color:var(--bone); border-color:var(--phosphor-dim); }
.rail[data-tone="dark"] .rail-enlist:hover{ color:var(--phosphor); border-color:var(--phosphor); }

@media (max-width:760px){
  .rail{ grid-template-columns:1fr auto; padding:var(--s-2) var(--s-3); }
  .rail-right{ display:none; }                 /* signup is reachable by scrolling; keep page tabs */
  .rail-tabs{ gap:var(--s-3); justify-content:flex-end; }
  .rail-tab{ font-size:9px; letter-spacing:.14em; }
  .wordmark .suffix{ display:none; }
}

/* —— EGRESS GAUGE (latent, desktop-left, vertical) —— */
.egress{ position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none;
  opacity:0; transition:opacity 1200ms var(--ease-stone); }
.egress.live{ opacity:.85; }
.egress-cap,.egress-read{ font-family:var(--f-mono); font-size:8px; letter-spacing:.22em; color:var(--ink-mute); writing-mode:vertical-rl; }
.egress-rail{ position:relative; width:1px; height:34vh; background:var(--ink-faint); }
.egress-waypoint{ position:absolute; left:-2px; width:5px; height:1px; background:var(--ink-faint); }
.egress-tick{ position:absolute; left:-3px; top:0; width:7px; height:7px; border:1px solid var(--gilt-deep);
  background:var(--travertine); transform:translateY(calc(var(--p,0) * (34vh - 7px))); transition:transform 120ms linear; }
.egress-ring{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--lapis); writing-mode:vertical-rl; }
body[data-near-dark] .egress-ring{ color:var(--phosphor); text-shadow:0 0 8px var(--phosphor-dim); }
body[data-near-dark] .egress-tick{ border-color:var(--phosphor); background:var(--obsidian); box-shadow:0 0 10px var(--phosphor-dim); }
@media (max-width:980px){ .egress{ display:none; } }
@media (prefers-reduced-motion: reduce){ .egress{ opacity:.85; } .egress-tick{ transition:none; } }

/* —— SKIP LINK (accessibility) —— */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:9998; background:var(--ink); color:var(--travertine-hi);
  font-family:var(--f-mono); font-size:12px; padding:10px 16px; }
.skip-link:focus{ left:var(--s-3); top:var(--s-3); }