/* ============================================================
   DARTLEAP — teaser stylesheet  ·  rev. 06  "cobalt instrument"
   ------------------------------------------------------------
   One typeface (IBM Plex Mono), warm monochrome near-black.
   The living field of nodes stays the only WHITE light.
   A single electric-cobalt signal carries the instrumentation:
   index numbers, the live readout, the scrollbar, state dot,
   row hovers. Cobalt = signal, never decoration.
   ============================================================ */

/* ---- TOKENS ----------------------------------------------- */
:root{
  --void:    #080808;
  --void-2:  #0c0b0a;
  --ink:     #e9e5dc;
  --ink-2:   rgba(233,229,220,0.56);
  --ink-3:   rgba(233,229,220,0.30);
  --ink-4:   rgba(233,229,220,0.14);
  --ink-5:   rgba(233,229,220,0.07);

  /* electric cobalt signal (tuned a touch brighter than #345cff) */
  --accent:      #3d63ff;
  --accent-2:    #6f8bff;
  --accent-soft: rgba(61,99,255,0.13);
  --accent-glow: rgba(61,99,255,0.55);

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --tk-data:  0.26em;
  --tk-wide:  0.18em;
  --tk-tight: -0.01em;

  --t-slow:   1400ms;
  --t-mid:     600ms;
  --t-fast:    260ms;
  --e-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:      cubic-bezier(0.65, 0, 0.35, 1);

  --edge: clamp(20px, 4.2vw, 56px);
}

/* ---- RESET ------------------------------------------------ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* reserve the scrollbar gutter so locking scroll never shifts layout */
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
html, body{ min-height:100%; }
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--mono);
  font-weight:400;
  font-feature-settings:"tnum" 1, "ss01" 1;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  cursor:default;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; }
ul, ol{ list-style:none; }
img, svg{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#050505; }

/* cobalt scrollbar (webkit) */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--accent); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-2); }

/* faint instrument grid — echoes the field's shader grid */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, var(--ink-5) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 120% 120% at 50% 40%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 120% 120% at 50% 40%, #000 35%, transparent 100%);
}

/* ============================================================
   DATA / LABEL primitives
   ============================================================ */
.data{
  font-size:clamp(9.5px, 0.78vw, 11px);
  letter-spacing:var(--tk-data);
  text-transform:uppercase;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.data--ink{ color:var(--ink); }
.data--sig{ color:var(--accent); }
.sep{ color:var(--ink-4); padding:0 0.55em; }

/* ============================================================
   TOP BAR  ·  brandmark / live state / menu trigger
   Header sits ABOVE the menu (z), so the close control is
   always visible. This is the fix for the stuck/hidden X.
   ============================================================ */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:210;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:clamp(18px,2.4vw,26px) var(--edge);
  pointer-events:none;
}
.bar > *{ pointer-events:auto; }

/* ---- brandmark with logotype -> mark morph --------------- */
.brandmark{
  justify-self:start; position:relative; display:inline-block;
  height:clamp(24px, 2.2vw, 32px); width:auto; line-height:0;
  padding:6px; margin:-6px;
}
.brandmark:hover{ opacity:0.8; }
.brandmark:focus-visible{ outline:1px solid var(--ink-3); outline-offset:6px; }
.brandmark__word{
  display:block; height:100%; width:auto; transform-origin:left center;
  transition:opacity .3s var(--e-io), transform .44s var(--e-io), filter .32s var(--e-io);
}
.brandmark__word svg{ height:100%; width:auto; }
.brandmark__word svg path, .brandmark__word svg polygon, .brandmark__word svg rect{ fill:var(--ink); }

/* the gooey field and the crisp mark share one box, anchored where the
   wordmark collapses to. The mark is the same metaball language as the hero. */
.brandmark__goo, .brandmark__mark{
  position:absolute; left:6px; top:50%;
  height:clamp(34px, 3.25vw, 48px); width:clamp(38px, 3.55vw, 52px);
  transform:translateY(-50%);
  filter:drop-shadow(0 0 8px var(--accent-glow));
  pointer-events:none;
}
/* gooey metaball field — nine blobs grow and fuse into the three trefoils */
.brandmark__goo{ opacity:0; transition:opacity .3s var(--e-out); }
.brandmark__goo .goo-svg{ width:100%; height:100%; display:block; overflow:visible; }
.brandmark__goo circle{
  fill:#fff; transform:scale(0); transform-box:fill-box; transform-origin:center;
  transition:transform .46s cubic-bezier(.2,1.18,.3,1);
}
.brandmark__goo::before, .brandmark__goo::after{
  content:""; position:absolute; left:50%; top:50%; width:62%; height:62%;
  border:1.5px solid var(--accent); border-radius:50%;
  transform:translate(-50%,-50%) scale(.2); opacity:0; pointer-events:none;
}
/* crisp official mark — locks in over the fused field */
.brandmark__mark{
  opacity:0; transform:translateY(-50%) scale(.5) rotate(-10deg);
  transition:opacity .28s var(--e-out), transform .4s var(--e-out), filter .4s var(--e-out);
}
.brandmark__mark img{ height:100%; width:100%; object-fit:contain; }

/* ---- morph sequence: collapse → coalesce → lock → pulse ---- */
.brandmark.is-morph .brandmark__word{
  opacity:0; transform:scaleX(.06) scaleY(.7); filter:blur(6px);
  transition:opacity .26s var(--e-io), transform .4s var(--e-io), filter .3s var(--e-io);
}
.brandmark.is-morph .brandmark__goo{ opacity:1; transition:opacity .26s var(--e-out) .05s; }
.brandmark.is-morph .goo-cl circle{ transform:scale(1); }
.brandmark.is-morph .goo-cl--2 circle{ transition-delay:.07s; }
.brandmark.is-morph .goo-cl--3 circle{ transition-delay:.14s; }
.brandmark.is-morph .brandmark__goo::before{ animation:dl-burst .8s var(--e-out) .12s; }
.brandmark.is-morph .brandmark__goo::after{ animation:dl-burst .8s var(--e-out) .26s; }
.brandmark.is-morph .brandmark__mark{
  opacity:1; transform:translateY(-50%) scale(1) rotate(0deg);
  filter:drop-shadow(0 0 13px var(--accent-glow));
  transition:opacity .3s var(--e-out) .36s, transform .52s cubic-bezier(.18,1.24,.32,1) .36s, filter .5s var(--e-out) .36s;
}
@keyframes dl-burst{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  20%{ opacity:.55; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.8); }
}

/* ---- live header state ----------------------------------- */
.bar__state{
  justify-self:center; display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.14em;
  color:var(--ink-3); text-transform:uppercase; white-space:nowrap;
}
.signal-dot{
  width:5px; height:5px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:0.4; box-shadow:0 0 0 7px transparent, 0 0 4px var(--accent); } }

/* ---- menu trigger (two-line burger, MENU / CLOSE) -------- */
.trigger{
  justify-self:end; position:relative; width:38px; height:38px;
  margin:-9px; padding:9px; z-index:220;
  -webkit-tap-highlight-color:transparent;
}
.trigger::before{
  content:"MENU"; position:absolute; right:36px; top:13px;
  font-family:var(--mono); font-size:8px; letter-spacing:0.14em;
  color:var(--ink-3); transition:opacity var(--t-fast) var(--e-out);
}
.trigger__line{
  position:absolute; right:8px; width:20px; height:1.4px;
  background:var(--ink); transform-origin:center;
  transition:transform var(--t-mid) var(--e-io), width var(--t-mid) var(--e-io);
}
.trigger__line--t{ top:15px; }
.trigger__line--b{ top:23px; width:12px; }
.trigger:hover .trigger__line--b{ width:20px; }
.trigger.is-open::before{ content:"CLOSE"; }
.trigger.is-open .trigger__line--t{ transform:translateY(4px) rotate(45deg); }
.trigger.is-open .trigger__line--b{ width:20px; transform:translateY(-4px) rotate(-45deg); }

/* ============================================================
   LIVE READOUT  (centered HUD line, persistent while scrolling)
   ============================================================ */
.telemetry{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:clamp(13px,2vw,19px); z-index:90;
  display:flex; gap:18px; align-items:center; pointer-events:none;
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em;
  color:var(--ink-4); white-space:nowrap;
  opacity:0; transition:opacity var(--t-slow) var(--e-out) 800ms;
}
.is-ready .telemetry{ opacity:0.9; }
.telemetry span{ display:inline-flex; align-items:center; gap:7px; }
.telemetry b{ color:var(--accent); font-weight:400; font-variant-numeric:tabular-nums; }

/* ============================================================
   FIELD  (WebGL canvas, fixed behind the hero)
   ============================================================ */
.field{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100dvh; display:block;
  background:var(--void);
}
.field__note{
  position:fixed; right:var(--edge); bottom:clamp(18px,2.4vw,26px);
  z-index:10; text-align:right; pointer-events:none;
  opacity:0; transition:opacity var(--t-slow) var(--e-out) 600ms;
}
.is-ready .field__note{ opacity:1; }
/* the index marker is the easter-egg trigger; keep it clickable
   even though its container ignores pointer events. */
#eggTrigger{ pointer-events:auto; cursor:pointer; transition:opacity var(--t-fast) var(--e-out); }
#eggTrigger:hover{ opacity:0.6; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:10;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(105px,13vh,136px) var(--edge) clamp(26px,5vh,40px);
  pointer-events:none;
}
.hero__topline{
  display:flex; justify-content:space-between; gap:16px;
  opacity:0; transition:opacity var(--t-slow) var(--e-out) 200ms;
}
.is-ready .hero__topline{ opacity:1; }
.hero__bottom{ margin-top:auto; display:flex; flex-direction:column; }
.hero__inner{ max-width:920px; }
.hero__inner > *{ pointer-events:auto; }

.hero__eyebrow{ margin-bottom:clamp(16px,2.6vh,26px); }
.hero__eyebrow span{ color:var(--ink); }
.hero__line{
  font-size:clamp(26px, 5.2vw, 62px);
  font-weight:500; line-height:1.04; letter-spacing:var(--tk-tight);
  color:var(--ink); max-width:22ch;
}
.hero__line .dim{ color:var(--ink-3); }
.hero__sub{
  margin-top:clamp(16px,2.4vh,24px);
  font-size:clamp(13px,1.05vw,15.5px);
  line-height:1.65; color:var(--ink-2); max-width:50ch; font-weight:400;
}

/* hero specimen strip (cobalt live state) */
.specimen{
  margin-top:clamp(18px,2.6vh,28px); padding-top:12px;
  border-top:1px solid var(--ink-4);
  display:flex; gap:clamp(22px,5vw,58px); max-width:560px; flex-wrap:wrap;
  pointer-events:auto;
}
.specimen div{ display:flex; flex-direction:column; gap:5px; }
.specimen dt{ font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.specimen dd{ font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2); }
.specimen .live{ color:var(--accent); }

/* hero foot (form line + scroll cue) */
.hero__foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  margin-top:clamp(28px,5vh,52px);
  opacity:0; transition:opacity var(--t-slow) var(--e-out) 1100ms;
}
.is-ready .hero__foot{ opacity:1; }
.scroll-cue{
  pointer-events:auto; display:inline-flex; gap:12px; align-items:center;
  color:var(--ink-3); transition:color var(--t-fast) var(--e-out);
}
.scroll-cue:hover{ color:var(--ink); }
.scroll-cue b{ color:var(--accent); font-weight:400; animation:cue 2.6s var(--e-io) infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:0.6; } 50%{ transform:translateY(3px); opacity:1; } }

/* ============================================================
   DECODE REVEAL  (signature type treatment)
   ============================================================ */
[data-decode]{ opacity:0; }
[data-decode].is-armed{ opacity:1; }
.glyph-noise{ color:var(--ink-3); }

/* ============================================================
   CONTENT
   ============================================================ */
.doc{ position:relative; z-index:20; background:var(--void); }

.block{
  padding:clamp(80px,14vh,170px) var(--edge);
  border-top:1px solid var(--ink-4);
}
.block__wrap{ max-width:1180px; margin:0 auto; }

.block__head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:clamp(34px,6vh,66px);
}
.block__plate{ color:var(--accent); }       /* the little cobalt index number */
.block__kicker{ color:var(--ink); }

.split{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px); align-items:start;
}
.split__title{
  font-size:clamp(24px,3.6vw,46px);
  font-weight:500; line-height:1.1; letter-spacing:var(--tk-tight);
  color:var(--ink); max-width:15ch;
}
.split__title .dim{ color:var(--ink-3); }
.split__aside{ display:flex; flex-direction:column; }
.prose p{
  font-size:clamp(13.5px,1.02vw,16px);
  line-height:1.72; color:var(--ink-2); max-width:54ch;
}
.prose p + p{ margin-top:1.25em; }
.prose strong{ color:var(--ink); font-weight:500; }

/* a cobalt live tag (e.g. STATE / UNDER LOAD) */
.tag-live{
  align-self:flex-start; margin-bottom:22px;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.tag-live b{ color:var(--accent); font-weight:400; }

/* ============================================================
   PROTOCOL  (Observe / Isolate / Compute / Recode + icons)
   ============================================================ */
.protocol{
  margin-top:clamp(42px,7vh,84px);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink-4); border-bottom:1px solid var(--ink-4);
}
.protocol__step{
  position:relative; min-height:178px;
  padding:18px 18px 22px 0; border-right:1px solid var(--ink-4);
  display:grid; grid-template-rows:auto 1fr auto;
}
.protocol__step:not(:first-child){ padding-left:18px; }
.protocol__step:last-child{ border-right:0; }
.protocol__num{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.protocol__name{
  align-self:center;
  font-size:clamp(22px,2.45vw,36px); font-weight:500;
  letter-spacing:var(--tk-tight); color:var(--ink);
}
.protocol__cap{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.protocol__icon{
  position:absolute; right:14px; bottom:12px;
  font-size:23px; line-height:1; color:var(--ink-2); opacity:0.4;
}

/* legacy single-line sequence (kept for fallback) */
.sequence{ margin-top:clamp(40px,7vh,80px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 4px; }
.sequence__step{ font-size:clamp(13px,1.5vw,19px); font-weight:500; letter-spacing:var(--tk-wide); text-transform:uppercase; color:var(--ink); }
.sequence__arrow{ color:var(--ink-4); font-size:clamp(13px,1.5vw,19px); padding:0 8px; }

/* ============================================================
   VIDEO PLATE
   ============================================================ */
.plate-video{
  margin-top:clamp(30px,5vh,60px);
  border:1px solid var(--ink-4); background:var(--void-2);
  position:relative; overflow:hidden;
}
.plate-video__frame{
  position:relative; aspect-ratio:16/9; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.plate-video__media{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) brightness(0.92) saturate(0.85);
}
.plate-video__placeholder{
  position:absolute; inset:0; z-index:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background-image:radial-gradient(circle, var(--ink-5) 1px, transparent 1.4px);
  background-size:22px 22px;
}
.plate-video__placeholder .mark{
  width:46px; height:46px; border:1px solid var(--ink-3); border-radius:50%; position:relative;
}
.plate-video__placeholder .mark::after{
  content:""; position:absolute; inset:13px; border:1px solid var(--accent); border-radius:50%;
}
.plate-video__cap{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:13px 16px; border-top:1px solid var(--ink-4); flex-wrap:wrap;
  position:relative; z-index:2; background:var(--void-2);
}

/* ============================================================
   SIGNALS TABLE  (open research records)
   ============================================================ */
.signals__intro{ margin-bottom:clamp(40px,6vh,80px); max-width:62ch; }
.signals__intro h2{
  margin-top:14px;
  font-size:clamp(24px,3.4vw,44px); font-weight:500;
  line-height:1.12; letter-spacing:var(--tk-tight); color:var(--ink); max-width:24ch;
}
.record-head, .signal-row{
  display:grid;
  grid-template-columns:84px minmax(180px,0.72fr) 1fr 104px;
  gap:clamp(14px,2vw,24px);
}
.record-head{ padding:0 0 12px; color:var(--ink-3); }
.signal-row{
  align-items:baseline; min-height:108px; padding:24px 0;
  border-top:1px solid var(--ink-4);
  transition:background var(--t-mid) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.signal-row:last-child{ border-bottom:1px solid var(--ink-4); }
.signal-row > span, .signal-row > b{
  font-family:var(--mono); font-size:clamp(9px,0.78vw,11px);
  letter-spacing:0.06em; color:var(--ink-3); font-weight:400;
}
.signal-row strong{
  font-size:clamp(21px,2.1vw,32px); font-weight:500;
  letter-spacing:var(--tk-tight); color:var(--ink);
  transition:transform var(--t-mid) var(--e-out);
}
.signal-row em{
  font-size:clamp(13px,1.05vw,15.5px); line-height:1.5;
  color:var(--ink-2); font-style:normal;
}
.signal-row:hover{ border-color:var(--ink-3); background:linear-gradient(90deg, var(--accent-soft), transparent 46%); }
.signal-row:hover strong{ transform:translateX(7px); }
.signal-row:hover b{ color:var(--accent); }

/* redacted texture lines */
.redact{ margin-top:clamp(34px,5vh,56px); display:grid; gap:12px; max-width:560px; }
.redact__row{ display:flex; align-items:center; gap:14px; }
.redact__bar{ height:11px; background:var(--ink-5); flex:1 1 auto; }
.redact__bar--a{ max-width:70%; } .redact__bar--b{ max-width:46%; }
.redact__bar--c{ max-width:88%; } .redact__bar--d{ max-width:38%; }

/* ============================================================
   ACCESS / FOOTER
   ============================================================ */
.access .split__title{ max-width:16ch; }
.mail{
  display:inline-block; margin-top:6px;
  font-size:clamp(15px,1.4vw,20px); color:var(--ink);
  border-bottom:1px solid var(--ink-3); padding-bottom:3px;
  transition:border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mail:hover{ border-color:var(--accent); color:var(--accent); }

.colophon{
  margin-top:clamp(60px,10vh,120px);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}
.colophon__cities span{ color:var(--ink-2); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity 900ms var(--e-out), transform 900ms var(--e-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   FULL-SCREEN MENU  (field index)
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:200;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(78px,11vh,108px) var(--edge) clamp(26px,5vh,44px);
  background:rgba(8,8,8,0.985);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
  transition:opacity var(--t-mid) var(--e-io), transform 650ms var(--e-out), visibility 0s linear var(--t-mid);
}
.menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity var(--t-mid) var(--e-io), transform 650ms var(--e-out), visibility 0s linear 0s;
}
/* faint 4-column field behind the list */
.menu__field{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr);
  padding:0 var(--edge); opacity:0.22; pointer-events:none;
}
.menu__field span{ border-left:1px solid var(--ink-4); }
.menu__field span:last-child{ border-right:1px solid var(--ink-4); }
.menu__meta{
  position:relative; display:flex; justify-content:flex-start; gap:24px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.1em; color:var(--ink-3);
  text-transform:uppercase;
}
.menu__list{ position:relative; align-self:center; max-width:1160px; width:100%; }
.menu__item{
  opacity:0; transform:translateY(14px);
  transition:opacity 600ms var(--e-out), transform 600ms var(--e-out);
}
.menu.is-open .menu__item{ opacity:1; transform:none; }
.menu.is-open .menu__item:nth-child(1){ transition-delay:90ms; }
.menu.is-open .menu__item:nth-child(2){ transition-delay:150ms; }
.menu.is-open .menu__item:nth-child(3){ transition-delay:210ms; }
.menu.is-open .menu__item:nth-child(4){ transition-delay:270ms; }
.menu__item a{
  display:grid; grid-template-columns:74px minmax(220px,0.7fr) minmax(280px,1fr);
  align-items:baseline; gap:clamp(16px,2vw,28px);
  padding:clamp(13px,1.9vh,22px) 0; border-top:1px solid var(--ink-4);
}
.menu__item:last-child a{ border-bottom:1px solid var(--ink-4); }
.menu__index{ font-family:var(--mono); font-size:9px; letter-spacing:0.08em; color:var(--accent); text-transform:uppercase; }
.menu__name{
  font-size:clamp(34px,4.6vw,68px); font-weight:500;
  letter-spacing:var(--tk-tight); line-height:0.98; color:var(--ink);
  transition:transform var(--t-mid) var(--e-out), color var(--t-fast) var(--e-out);
}
.menu__desc{
  font-family:var(--mono); font-size:10px; line-height:1.55;
  letter-spacing:0.02em; color:var(--ink-3); text-transform:none; max-width:58ch;
  transition:color var(--t-fast) var(--e-out);
}
.menu__item a:hover .menu__name{ color:var(--accent); transform:translateX(9px); }
.menu__item a:hover .menu__desc{ color:var(--ink-2); }
.menu__item a[aria-current="page"] .menu__name{ color:var(--accent); }
.menu__foot{
  position:relative; display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9px; letter-spacing:0.09em; color:var(--ink-3);
  text-transform:uppercase;
}
.menu__foot [data-clock]{ color:var(--accent); }

/* ============================================================
   EASTER EGG  (triple-click the index marker)
   ============================================================ */
.egg{
  position:fixed; inset:0; z-index:240;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,8vw,120px);
  background:rgba(8,8,8,0.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t-mid) var(--e-out), visibility 0s linear var(--t-mid);
}
.egg.is-visible{
  opacity:1; visibility:visible; pointer-events:auto; cursor:pointer;
  transition:opacity var(--t-mid) var(--e-out), visibility 0s linear 0s;
}
.egg__text{
  font-size:clamp(18px,2.6vw,32px); font-weight:500;
  line-height:1.4; letter-spacing:var(--tk-tight); color:var(--ink);
  text-align:center; max-width:22ch; transform:translateY(10px);
  transition:transform var(--t-slow) var(--e-out);
}
.egg.is-visible .egg__text{ transform:none; }

/* ============================================================
   SUBPAGES
   ============================================================ */
.subpage{
  position:relative; z-index:20;
  min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  gap:clamp(40px,8vh,90px);
  padding:clamp(96px,14vh,150px) var(--edge) clamp(28px,5vh,48px);
}
.subpage__body{ max-width:880px; margin:auto 0; width:100%; }
.subpage__plate{ display:block; margin-bottom:clamp(22px,4vh,34px); }
.subpage__plate b{ color:var(--accent); font-weight:400; }
.subpage__title{
  font-size:clamp(30px,5vw,64px); font-weight:500;
  line-height:1.08; letter-spacing:var(--tk-tight); color:var(--ink);
  margin-bottom:clamp(26px,4vh,40px); max-width:18ch;
}
.subpage__title .dim{ color:var(--ink-3); }
.subpage__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);
  padding-top:24px; border-top:1px solid var(--ink-4);
}
.subpage__grid h2{
  margin-bottom:24px; font-family:var(--mono); font-size:10px;
  letter-spacing:0.12em; font-weight:400; color:var(--ink); text-transform:uppercase;
}
.subpage__grid p{ font-size:clamp(13.5px,1.05vw,16px); line-height:1.66; color:var(--ink-2); max-width:52ch; }
.subpage__grid p + p{ margin-top:1.2em; }
.subpage__list{ display:grid; }
.subpage__list li{
  display:flex; justify-content:space-between; gap:20px; padding:14px 0;
  border-bottom:1px solid var(--ink-4);
  font-family:var(--mono); font-size:10px; letter-spacing:0.04em;
  color:var(--ink-2); text-transform:uppercase;
}
.subpage__list li b{ color:var(--accent); font-weight:400; }
.subpage__text p{ font-size:clamp(13.5px,1.05vw,16px); line-height:1.72; color:var(--ink-2); max-width:54ch; }
.subpage__text p + p{ margin-top:1.2em; }
.subpage__status{ margin-top:clamp(40px,6vh,60px); }
.subpage__status b{ color:var(--accent); font-weight:400; }
.subpage__foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .telemetry{ display:none; }
  .menu__item a{ grid-template-columns:54px 1fr; }
  .menu__desc{ display:none; }
}
@media (max-width:760px){
  .split{ grid-template-columns:1fr; gap:clamp(22px,5vh,34px); }
  .split__title{ max-width:18ch; }
  .colophon{ flex-direction:column; align-items:flex-start; gap:14px; }
  .menu__foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .subpage__foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .subpage__grid{ grid-template-columns:1fr; gap:clamp(28px,6vh,42px); }
  .hero__line{ max-width:20ch; }
  .protocol{ grid-template-columns:1fr 1fr; }
  .protocol__step:nth-child(2){ border-right:0; }
  .protocol__step:nth-child(-n+2){ border-bottom:1px solid var(--ink-4); }
  .record-head{ display:none; }
  .signal-row{ grid-template-columns:58px 1fr 70px; gap:14px; }
  .signal-row em{ grid-column:2; }
  .signal-row b{ grid-column:3; grid-row:1; }
}
@media (max-width:520px){
  .menu__field{ grid-template-columns:1fr 1fr; }
  .menu__field span:nth-child(n+3){ display:none; }
  .protocol{ grid-template-columns:1fr; }
  .protocol__step{ min-height:120px; border-right:0; border-bottom:1px solid var(--ink-4); padding-left:0 !important; }
  .protocol__step:last-child{ border-bottom:0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  [data-decode]{ opacity:1; }
  .scroll-cue, .field__note, .telemetry, .hero__topline, .hero__foot{ opacity:1; }
}

/* Cleanup for reduced microcopy in rev.06.1 */
.bar__state,.hero__topline,.field__note{display:none!important;}