/* ═══════════════════════════════════════════════════════════════════
   ORBITAL COMMON — style.css
   A creative technology research studio.

   This stylesheet is the entire design system for this world. It is
   deliberately not shared with any sibling world: the brief forbids a
   common palette, a common type pairing and a common page template.

   PALETTE   space navy #111B3A · violet #5D4CC4 · lavender #A98CFF
             electric lime #C8F36B · soft cyan #84E7E0 · white #F7F7FF

   TYPE      geometric display / neutral sans / technical mono.
             No webfonts are downloaded. Display is a geometric stack
             (Futura, Avenir Next, Century Gothic, …) with a fallback.
             Data and labels are always mono, uppercase, tracked out.

   SHAPE     Instrument, not brochure. Hairline rules, corner brackets,
             tick marks, mono labels. Cards are open frames, not pills.

   MOTION    One idea only: the orbital field is a camera. Everything
             else is quiet.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --navy:    #111B3A;
  --navy-2:  #0B1229;
  --navy-3:  #18244C;
  --violet:  #5D4CC4;
  --lavender:#A98CFF;
  --lime:    #C8F36B;
  --cyan:    #84E7E0;
  --white:   #F7F7FF;

  /* derived surfaces — all from the six colours above */
  --line:      color-mix(in srgb, var(--lavender) 26%, transparent);
  --line-soft: color-mix(in srgb, var(--lavender) 13%, transparent);
  --dim:       color-mix(in srgb, var(--white) 58%, transparent);
  --dimmer:    color-mix(in srgb, var(--white) 38%, transparent);

  /* type */
  /* Chakra Petch is the instrument face — squared terminals, engineered
     skeleton, reads as bench equipment rather than a poster. Space Mono
     carries the telemetry. Both are webfonts loaded in index.html; the
     local names behind them are only fallbacks for an offline load. */
  --display: "Chakra Petch", "Futura", "Avenir Next", "Century Gothic",
             "URW Gothic", system-ui, sans-serif;
  --sans:    "Chakra Petch", ui-sans-serif, system-ui, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, "JetBrains Mono", "IBM Plex Mono",
             Menlo, Consolas, "Liberation Mono", monospace;
  /* measure + rhythm */
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --stack:  clamp(4.5rem, 10vw, 8.5rem);
  --maxw:   74rem;
}

/* ── reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* deep space wash behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58rem 42rem at 78% -8%,  color-mix(in srgb, var(--violet) 40%, transparent), transparent 62%),
    radial-gradient(44rem 40rem at 6% 14%,   color-mix(in srgb, var(--lavender) 17%, transparent), transparent 66%),
    radial-gradient(50rem 46rem at 50% 108%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 64%),
    var(--navy);
}

/* faint starfield — the studio's coordinate frame */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, var(--lavender) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 14%, var(--cyan) 40%, transparent 41%),
    radial-gradient(1px 1px at 34% 72%, var(--white) 35%, transparent 36%),
    radial-gradient(1px 1px at 86% 63%, var(--lavender) 45%, transparent 46%),
    radial-gradient(1px 1px at 51% 41%, var(--white) 28%, transparent 29%),
    radial-gradient(1px 1px at 22% 88%, var(--cyan) 32%, transparent 33%);
  background-size: 100% 100%;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--lime);
  color: var(--navy);
  padding: .7rem 1.1rem;
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Film grain over the WHOLE viewport, not one element — two octaves, a
   fine tooth and a coarse clump, so the navy has surface rather than
   being a flat fill with gradients painted on it.

   Opacity .6, not .3, and that number is measured rather than guessed.
   On this dark ground overlay deposits nothing below roughly .5: with the
   scene animation frozen, grain-on vs grain-off luminance sd deltas were
   .3 -> 1.37 / 0.80 / 0.84 / 1.14 across four patches, all under the
   2-level floor (i.e. invisible), while .6 gives 2.91 / 1.78 / 1.96 / 2.37.
   Navy at luminance ~40-60 has little tonal range for the blend to bite
   into, so the tooth has to be pushed harder here than on a pale ground. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 140px 140px, 420px 420px;
}

/* ═══ TOPBAR ═══════════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: .8rem var(--gutter);
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.mark {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--lavender);
  text-decoration: none;
  flex: none;
}
.mark__glyph { width: 26px; height: 26px; overflow: visible; }
.mark__glyph ellipse { transform-origin: center; }
.mark__core { fill: var(--lime); }
.mark:hover .mark__glyph { color: var(--cyan); }
.mark__name {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
}

.nav {
  display: flex;
  gap: clamp(.9rem, 2.2vw, 1.9rem);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .22s, border-color .22s;
}
.nav a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* signal strength — fills as content is revealed */
.sig {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .3rem .6rem;
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.sig__label { color: var(--dimmer); }
.sig__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sig__bars i {
  width: 3px;
  background: color-mix(in srgb, var(--cyan) 22%, transparent);
  transition: background .3s, box-shadow .3s;
}
.sig__bars i:nth-child(1) { height: 4px; }
.sig__bars i:nth-child(2) { height: 6px; }
.sig__bars i:nth-child(3) { height: 8px; }
.sig__bars i:nth-child(4) { height: 10px; }
.sig__bars i:nth-child(5) { height: 12px; }
.sig__bars i.on {
  background: var(--cyan);
  box-shadow: 0 0 7px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.sig__val { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* ═══ HERO / ORBITAL FIELD ═════════════════════════════════════ */
.hero {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(1rem, 3vw, 2rem);
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}
.tick {
  width: 7px; height: 7px;
  background: var(--lime);
  box-shadow: 0 0 9px var(--lime);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.field {
  position: relative;
  /* always square, and never taller than the fold */
  width: min(100%, 44rem, 76svh);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.field.is-dragging { cursor: grabbing; }
.field:focus-visible { outline: 2px dashed var(--lime); outline-offset: 6px; }

/* on touch, let the page scroll vertically — the camera still turns on
   horizontal drag rather than trapping the reader mid-page */
@media (hover: none) and (pointer: coarse) {
  .field { touch-action: pan-y; }
}

.field__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 46%, transparent) 0%, transparent 68%);
  filter: blur(38px);
  opacity: .85;
  transition: opacity .6s;
}
.field[data-mode="echo"] .field__glow { opacity: .5; }
.field[data-mode="array"] .field__glow { opacity: 1; }

/* ── the painted ground ────────────────────────────────────────────
   Three layers stacked inside the orbit: a warped galactic plane, two
   nebula banks that counter-drift, and the bloom at dead centre. The
   rings and the logotype sit ON this, which is what turns the wireframe
   from a diagram into a scene with somewhere to look. */
.field__scene {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.field__scene > * { transform-box: fill-box; transform-origin: center; }

.scene__halo {
  animation: oc-bloom 13s ease-in-out infinite;
  will-change: transform, opacity;
}
.scene__bank {
  animation: oc-bank 104s ease-in-out infinite alternate;
  will-change: transform;
}
.scene__heat {
  animation: oc-heat 7.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.scene__neb--a {
  animation: oc-drift-a 74s ease-in-out infinite alternate;
  will-change: transform;
}
.scene__neb--b {
  animation: oc-drift-b 96s ease-in-out infinite alternate;
  will-change: transform;
}
.scene__scrim { mix-blend-mode: multiply; }

.scene__plane {
  animation: oc-plane 58s ease-in-out infinite alternate;
  will-change: transform;
}
.scene__dust {
  animation: oc-dust 46s linear infinite;
  will-change: transform, opacity;
}
.scene__dust circle { animation: oc-twinkle 6s ease-in-out infinite; }
.scene__dust circle:nth-child(3n)   { animation-duration: 8.5s; animation-delay: -2s; }
.scene__dust circle:nth-child(3n+1) { animation-duration: 7s;   animation-delay: -4.5s; }
.scene__dust circle:nth-child(4n)   { animation-duration: 10s;  animation-delay: -1s; }
.scene__scan { animation: oc-scan 19s linear infinite; will-change: transform; }
.scene__atmo {
  animation: oc-atmo 82s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.scene__lane {
  animation: oc-lane 120s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes oc-bloom {
  0%, 100% { transform: scale(.9);  opacity: .82; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes oc-heat {
  0%, 100% { transform: scale(1);    opacity: .9; }
  38%      { transform: scale(1.09); opacity: 1; }
  64%      { transform: scale(.97);  opacity: .78; }
}
@keyframes oc-bank {
  0%   { transform: translate(-8px, 5px)  rotate(-.5deg) scale(1.02); opacity: .82; }
  100% { transform: translate(12px, -9px) rotate(.9deg)  scale(1.1);  opacity: 1; }
}

@keyframes oc-drift-a {
  0%   { transform: translate(-10px, 6px)  rotate(-1.2deg) scale(1.02); }
  100% { transform: translate(16px, -10px) rotate(1.6deg)  scale(1.1); }
}
@keyframes oc-drift-b {
  0%   { transform: translate(12px, -8px) rotate(1.4deg) scale(1.06); }
  100% { transform: translate(-14px, 12px) rotate(-1.8deg) scale(1); }
}
@keyframes oc-plane {
  0%   { transform: translateX(-24px) scaleY(1);   opacity: .8; }
  100% { transform: translateX(26px)  scaleY(1.5); opacity: 1; }
}
@keyframes oc-dust {
  0%   { transform: translate(0, -18px)   rotate(0deg);   opacity: .7; }
  50%  { opacity: 1; }
  100% { transform: translate(-14px, 18px) rotate(2.5deg); opacity: .7; }
}
@keyframes oc-twinkle {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}
@keyframes oc-scan {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translateX(1260px); opacity: 0; }
}

@keyframes oc-atmo {
  0%   { transform: rotate(-1.4deg) scale(.97); opacity: .78; }
  100% { transform: rotate(2deg)    scale(1.06); opacity: 1; }
}

@keyframes oc-lane {
  0%   { transform: translate(-32px, 14px) rotate(-.6deg); opacity: .55; }
  100% { transform: translate(34px, -16px) rotate(.8deg); opacity: 1; }
}


.field__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1;

  opacity: .5;
  vector-effect: non-scaling-stroke;
  transition: stroke .5s, opacity .5s;
}
.ring--2 { stroke: var(--lavender); opacity: .38; }
.ring--3 { stroke: var(--cyan); opacity: .3; }
.ring--4 { stroke: var(--lavender); opacity: .22; }
.field[data-mode="array"] .ring--1 { stroke: var(--lime); opacity: .6; }
.field[data-mode="array"] .ring--3 { stroke: var(--lime); opacity: .3; }
.field[data-mode="echo"] .ring--2 { stroke: var(--lime); opacity: .5; }

.field__reticle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.field__reticle span {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
}
.field__reticle span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.field__reticle span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.field__reticle span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.field__reticle span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* studio name at the centre of the orbit */
.core {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .45rem;
  pointer-events: none;
  padding: 0 18%;
}
.core__over {
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.5vw, .72rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
}
.core__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 7.4vw, 4.1rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: .15em 0 .1em;
}
.core__name span { display: block; }
.core__name span:last-child {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--lavender);
}
.core__sub {
  font-family: var(--mono);
  font-size: clamp(.62rem, 1.6vw, .74rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  max-width: 22ch;
  margin-inline: auto;
}

/* ── satellites ── */
.sat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: .38rem;
  text-decoration: none;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(var(--s, 1));
  will-change: transform;
}
.sat__body {
  position: relative;
  width: 15px; height: 15px;
  display: grid;
  place-items: center;
}
.sat__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--lavender);
  opacity: var(--s, 1);
}
.sat__body i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lavender);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lavender) 70%, transparent);
}
.sat__tag {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  opacity: var(--s, 1);
  transition: color .2s;
}
.sat:hover .sat__tag,
.sat:focus-visible .sat__tag { color: var(--lime); }
.sat:hover .sat__body::before { border-color: var(--lime); }
.sat.is-track .sat__body i { background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.sat.is-track .sat__body::before { border-color: var(--lime); }
.sat.is-track .sat__tag { color: var(--lime); }

/* ghost echoes — only present in echo mode. They share the field's
   coordinate space with the satellites, not the satellite's. */
.sat__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--cyan);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--s, 1));
  transition: opacity .4s;
  z-index: 4;
}
.field[data-mode="echo"] .sat__ghost { opacity: calc(var(--g, 0) * .38); }

/* ── lock readout ── */
.lock {
  position: absolute;
  left: 0;
  bottom: 2%;
  width: min(15rem, 46%);
  display: grid;
  gap: .4rem;
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--navy-2) 74%, transparent);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--lime);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 7;
}
.lock__row { display: flex; justify-content: space-between; gap: .6rem; }
.lock__k { color: var(--dimmer); }
.lock__v { color: var(--lime); font-variant-numeric: tabular-nums; }
.lock__meter { height: 3px; background: color-mix(in srgb, var(--white) 12%, transparent); overflow: hidden; }
.lock__meter i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--lime);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lime) 70%, transparent);
  transition: width .25s linear;
}
.lock__hint { color: var(--dim); text-transform: none; letter-spacing: .04em; font-size: .68rem; }

.hero__foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
  padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--line-soft);
}
.hero__note {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ── the CTA: a bracketed instrument button, not a rounded pill ── */
.cta {
  --c: var(--lime);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .72rem 1.5rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--c);
  text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .25s, background .25s, transform .25s;
}
.cta::after {
  content: "→";
  transition: transform .25s;
}
.cta:hover { background: var(--cyan); transform: translateX(3px); }
.cta:hover::after { transform: translateX(4px); }
.cta--big { padding: .95rem 2rem; font-size: .8rem; }

/* ═══ SECTION SHELLS ═════════════════════════════════════════════
   Five sections, five different structures. There is deliberately no
   shared head wrapper, no shared kicker and no shared title class: a
   heading here is placed by whatever instrument the section is — a
   nameplate, a banner, a console legend, a rail, a held column.
   ═════════════════════════════════════════════════════════════ */

/* ── MANIFEST — a nameplate plate; counters live in the right cell ── */
.manifest {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: var(--stack) var(--gutter) calc(var(--stack) * .85);
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line-soft);
}
.manifest__plate {
  display: grid;
  grid-template-areas:
    "stamp  tallies"
    "head   tallies"
    "brief  tallies";
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: 1rem clamp(1.4rem, 3.6vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.3rem) clamp(1.2rem, 2.6vw, 2.1rem);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--navy-3) 74%, transparent),
    color-mix(in srgb, var(--navy-2) 62%, transparent));
  border: 1px solid var(--line-soft);
  /* plate with one corner milled off */
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.manifest__stamp {
  grid-area: stamp;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.manifest__h {
  grid-area: head;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--white);
}
.manifest__brief {
  grid-area: brief;
  color: var(--dim);
  max-width: 52ch;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
}
.manifest__tallies {
  grid-area: tallies;
  align-self: stretch;
  align-content: start;
  display: grid;
  gap: .6rem;
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
  border-left: 1px solid var(--line-soft);
}
.manifest__tallies > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.manifest__tallies dt {
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.manifest__tallies dd {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lavender);
  font-variant-numeric: tabular-nums;
}
.manifest__cols {
  display: grid;
  gap: clamp(1.3rem, 2.6vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
}
.manifest__col { border-top: 2px solid var(--line); padding-top: .9rem; }
.manifest__col h3 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .65rem;
}
.manifest__col p { color: var(--dim); font-size: .97rem; }

/* ── SWEEP — the heading is the banner; status and caption sit below ── */
.sweep {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) var(--stack);
  /* cards enter on a horizontal trajectory; clip the sideways reach so
     narrow viewports never gain a scrollbar. clip (not hidden) keeps
     anchor scrolling and vertical overflow untouched. */
  overflow-x: clip;
}
.sweep__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.012em;
  text-transform: none;
  color: var(--white);
  max-width: 19ch;
  padding: calc(var(--stack) * .95) 0 1rem;
  border-bottom: 1px solid var(--line);
}
.sweep__tray {
  display: grid;
  grid-template-areas: "state caption";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: .8rem clamp(1.5rem, 4vw, 3rem);
  padding: 1.05rem 0 clamp(1.6rem, 3.4vw, 2.6rem);
}
.sweep__state {
  grid-area: state;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.sweep__led {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 70%, transparent);
  animation: oc-sweep 1.9s steps(1, end) infinite;
}
@keyframes oc-sweep { 0%, 62% { opacity: 1 } 63%, 100% { opacity: .18 } }
.sweep__caption { grid-area: caption; color: var(--dim); max-width: 54ch; }
.sweep__grid {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}


/* cards arrive along an orbital trajectory */
.exp {
  position: relative;
  display: flex;
  flex-direction: column;
  /* satellite links land here — clear the sticky bar */
  scroll-margin-top: 7rem;
  opacity: 0;
  transform: translate3d(var(--tx, 0), var(--ty, -60px), 0) rotate(var(--tr, 0deg)) scale(.965);
}
.exp.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s cubic-bezier(.22,.7,.2,1),
    transform 1.05s cubic-bezier(.16,.9,.24,1);
}
.exp:nth-child(2).is-in { transition-delay: .07s; }
.exp:nth-child(3).is-in { transition-delay: .14s; }
.exp:nth-child(4).is-in { transition-delay: .05s; }
.exp:nth-child(5).is-in { transition-delay: .12s; }
.exp:nth-child(6).is-in { transition-delay: .19s; }

/* a card currently locked onto by the field */
.exp.is-target .exp__frame {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 35%, transparent),
              0 24px 60px -30px color-mix(in srgb, var(--lavender) 70%, transparent);
}

.exp__frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.35rem 1.3rem 1.5rem;
  background: linear-gradient(168deg, color-mix(in srgb, var(--navy-3) 82%, transparent), color-mix(in srgb, var(--navy-2) 88%, transparent));
  border: 1px solid var(--line-soft);
  /* clipped corner — instrument panel, not a card */
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: border-color .35s, box-shadow .35s;
}
.exp__code {
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
}
.exp__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.exp__desc { color: var(--dim); font-size: .96rem; }
.exp__meter {
  height: 3px;
  margin-top: auto;
  background: color-mix(in srgb, var(--white) 10%, transparent);
}
.exp__meter i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--violet), var(--lavender));
}
.exp__stat {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.exp__stat b { color: var(--cyan); font-weight: 400; }

/* ── unique detail: the physical lab-note tab ── */
.tab {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: -1px -1.3rem 0 0;
  padding: .5rem .9rem .45rem 1rem;
  background: var(--navy-3);
  border: 1px solid var(--line-soft);
  border-top: 0;
  /* the tab itself is torn out of a slip of paper */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 9px));
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition: color .22s, background .22s;
}
.tab__grip {
  width: 8px; height: 2px;
  background: currentColor;
  opacity: .6;
  box-shadow: 0 4px 0 currentColor;
}
.tab:hover { color: var(--lime); background: var(--violet); }
.tab[aria-expanded="true"] { color: var(--navy); background: var(--white); }

/* the note slides out of a physical-looking drawer */
.note {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.3,.8,.3,1);
}
.note.is-open { grid-template-rows: 1fr; }
.note[hidden] { display: grid; }
.note__inner {
  overflow: hidden;
  min-height: 0;   /* grid items default to min-height:auto, which pins a 0fr track open */
  background: var(--white);
  color: var(--navy);
  padding: 0 1.15rem;
  font-size: .9rem;
  /* a slip of paper resting on the panel, slightly askew */
  transform-origin: top right;
  box-shadow: 4px 6px 0 -1px color-mix(in srgb, var(--lavender) 35%, transparent);
}
.note.is-open .note__inner {
  padding: 1rem 1.15rem 1.15rem;
  transform: rotate(-.35deg);
}
.note__inner p + p { margin-top: .7rem; }
.note__meta {
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: .6rem !important;
  padding-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 18%, transparent);
}

/* ── CONSOLE — the h2 IS the frame legend; no shell sits above it ── */
.console {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) var(--stack);
  border-top: 1px solid var(--line-soft);
}
.console__frame {
  display: grid;
  grid-template-areas:
    "legend legend"
    "modes  scope";
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1px;
  margin-top: var(--stack);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.console__legend {
  grid-area: legend;
  background: var(--navy-2);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.9vw, 1.85rem);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lavender);
  padding: .95rem clamp(1.3rem, 3vw, 2rem);
}
.console__modes { grid-area: modes; }
.console__scope { grid-area: scope; }
.console__modes, .console__scope { background: var(--navy); padding: clamp(1.3rem, 3vw, 2rem); }
.console__label {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 1rem;
}
.modes { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }

.mode {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.05rem;
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .22s, border-color .22s, background .22s;
}
.mode:hover { color: var(--white); border-color: var(--lavender); }
.mode[aria-pressed="true"] {
  color: var(--navy);
  background: var(--lime);
  border-color: var(--lime);
}
.mode__i { width: 12px; height: 12px; border: 1px solid currentColor; flex: none; }
.mode__i--drift { border-radius: 50%; }
.mode__i--array { transform: rotate(45deg); }
.mode__i--echo  { border-style: dashed; border-radius: 50%; }

.console__hint {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--dim);
  text-transform: none;
  border-left: 2px solid var(--cyan);
  padding-left: .7rem;
}
.console__foot {
  margin-top: 1.1rem;
  padding-left: .85rem;
  border-left: 2px solid var(--lavender);
  color: var(--dim);
  max-width: 62ch;
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
}

.tele { display: grid; gap: .1rem; margin-bottom: 1.4rem; }
.tele > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.tele dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.tele dd {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* little oscilloscope that follows the field */
.scope {
  position: relative;
  height: 5.5rem;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: color-mix(in srgb, var(--navy-2) 70%, transparent);
}
.scope__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem;
  opacity: .7;
}
.scope__beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 75%, transparent);
  transform: translate(var(--bx, 0), var(--by, 0));
  transition: transform .12s linear;
}

/* ── LEDGER — the heading sits in a left rail beside the entries ── */
.ledger {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: calc(var(--stack) * .95) var(--gutter) var(--stack);
  display: grid;
  grid-template-areas: "rail body";
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3.2rem);
}
.ledger__rail {
  grid-area: rail;
  align-self: start;
  padding-left: 1.15rem;
  border-left: 1px solid var(--line);
}
.ledger__window {
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: .85rem;
}
.ledger__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--white);
}
.ledger__body { grid-area: body; min-width: 0; }
.ledger__caption {
  color: var(--dim);
  max-width: 58ch;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line-soft);
}
.ledger__entries {
  display: grid;
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.entry {
  background: var(--navy);
  padding: clamp(1.3rem, 2.8vw, 1.9rem);
  display: grid;
  gap: .55rem;
}
.entry__date {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
}
.entry__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: .01em;
}
.entry p:not(.entry__date) { color: var(--dim); max-width: 60ch; }
.entry__by { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--cyan) !important; }

/* ── INQUIRY — terms held left, heading spanning both rows on the right ── */
.inquiry {
  max-width: var(--maxw);
  width: calc(100% - var(--gutter) * 2);
  margin: 0 auto var(--stack);
  display: grid;
  grid-template-areas:
    "tag   head"
    "terms head";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 2.6vw, 2rem) clamp(1.6rem, 4vw, 3.6rem);
  padding: clamp(1.7rem, 4.4vw, 3.4rem) clamp(1.3rem, 3.4vw, 2.7rem);
  background: linear-gradient(178deg,
    color-mix(in srgb, var(--navy-3) 82%, transparent),
    color-mix(in srgb, var(--navy-2) 92%, transparent));
  border: 1px solid var(--line-soft);
  /* plate with the lower-right corner milled off */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.inquiry__tag {
  grid-area: tag;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lime);
}
.inquiry__h {
  grid-area: head;
  align-self: center;
  text-align: right;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.85rem, 5.4vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.008em;
  color: var(--white);
}
.inquiry__terms {
  grid-area: terms;
  align-self: end;
  color: var(--dim);
  max-width: 46ch;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
}
.inquiry__actions {
  margin-top: 1.7rem;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
}
.inquiry__meta {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dimmer);
  max-width: 30ch;
}

/* ═══ FOOTER ══════════════════════════════════════════════════ */
.foot {
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding: clamp(2.2rem, 5vw, 3.4rem) var(--gutter);
  display: grid;
  gap: .6rem;
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
}
.foot__mark {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lavender);
}
.foot__mark .mark__glyph { width: 20px; height: 20px; }
.foot__legal {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--dimmer);
  max-width: 62ch;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */

/* stack the telemetry under the modes sooner */
@media (max-width: 62rem) {
  .core { padding: 0 15%; }
}

@media (max-width: 46rem) {
  :root { --gutter: 1.05rem; }
  html { scroll-padding-top: 4.5rem; }

  .topbar { flex-wrap: wrap; gap: .55rem .9rem; padding-block: .6rem; }
  .nav { order: 3; width: 100%; margin-left: 0; padding-bottom: .15rem; }
  .sig { margin-left: auto; }

  .field { max-width: none; max-height: 74svh; }
  .core { padding: 0 13%; }
  .lock { width: min(13rem, 58%); bottom: 1%; padding: .55rem .6rem; font-size: .58rem; }
  .lock__hint { font-size: .6rem; }

  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .manifest__tallies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.4rem;
    padding-left: 0;
    padding-top: 1.1rem;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  /* label above value — a 320px cell cannot carry both on one line */
  .manifest__tallies > div {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  .manifest__tallies dd { font-size: 1.4rem; }
  .manifest__plate {
    grid-template-areas:
      "stamp"
      "head"
      "brief"
      "tallies";
    grid-template-columns: minmax(0, 1fr);
  }
  .manifest__cols { padding-left: 0; }

  .sweep__tray {
    grid-template-areas: "state" "caption";
    grid-template-columns: minmax(0, 1fr);
  }

  .console__frame {
    grid-template-areas: "legend" "modes" "scope";
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger {
    grid-template-areas: "rail" "body";
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .ledger__rail { padding-left: 0; padding-bottom: 1.1rem; border-left: 0; border-bottom: 1px solid var(--line); }

  .inquiry {
    grid-template-areas: "tag" "head" "terms";
    grid-template-columns: minmax(0, 1fr);
  }
  .inquiry__h { text-align: left; align-self: start; }
  .note__inner { box-shadow: 3px 4px 0 -1px color-mix(in srgb, var(--lavender) 30%, transparent); }
}

@media (max-width: 30rem) {
  .mark__name { font-size: .82rem; letter-spacing: .12em; }
  .sig__label { display: none; }
  .lock { width: 62%; }
}

/* very short/landscape phones — don't let the orbit eat the fold */
@media (max-height: 34rem) and (orientation: landscape) {
  .field { max-height: 80svh; }
  .hero { padding-top: 1.2rem; }
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════
   Kill drift, pulses, reveals and transitions. The field stays
   fully usable by drag — it simply stops moving on its own, and
   the cards are already in place.
   ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .tick { opacity: 1; }
  .sweep__led { opacity: 1; }
  .field__glow { filter: blur(30px); }

  .exp {
    opacity: 1;
    transform: none;
  }

  .cta:hover { transform: none; }
  .note.is-open .note__inner { transform: none; }
  .field__rings .ring { opacity: .45; }

  /* The painted field stops moving but does NOT thin out. Every layer is
     pinned to its mid-composition value, so the scene a reduced-motion
     reader sees is the same scene — the nebula, the haze arcs, the bloom
     and the dust are all still there, simply held still. */
  .field__scene { transform: none; }
  .scene__halo  { transform: scale(1);    opacity: 1; }
  .scene__heat  { transform: scale(1.04); opacity: 1; }
  .scene__bank  { transform: translate(2px, -2px) rotate(.2deg) scale(1.06); opacity: .95; }
  .scene__neb--a { transform: translate(3px, -2px)  rotate(.2deg)  scale(1.06); }
  .scene__neb--b { transform: translate(-1px, 2px)  rotate(-.2deg) scale(1.03); }
  .scene__plane { transform: translateX(1px) scaleY(1.25); opacity: .92; }
  .scene__atmo  { transform: rotate(.3deg) scale(1.02); opacity: .92; }
  .scene__lane  { transform: translate(1px, -1px) rotate(.1deg); opacity: .85; }
  .scene__dust  { transform: translate(-7px, 0); opacity: .9; }
  .scene__dust circle { opacity: .85; }
  .scene__scan  { transform: translateX(430px); opacity: .35; }
}

/* print — the lab notes should survive being read on paper */
@media print {
  body::before, body::after, .grain, .topbar, .field, .lock { display: none; }
  body { background: #fff; color: #000; }
  .manifest, .console, .ledger__entries, .entry { border-color: #ccc; }
  .manifest__plate, .inquiry { background: none; }
  .sweep__led { display: none; }
  .exp { opacity: 1; transform: none; }
  .note[hidden] { display: grid !important; }
  .note__inner { box-shadow: none; color: #000; }
}