/* ==========================================================================
   IRA AEROSPACE — VIEW LAYOUTS
   The landing entry, the shared section-view frame, and the pieces each
   section needs. Every colour resolves through --accent, so these layouts
   serve all four themes without a per-section stylesheet.
   ========================================================================== */

/* ==========================================================================
   LANDING — the scope
   One edge-to-edge scene. The HUD sits in the four corners over the canvas;
   the rotors of the mark are the doors.
   ========================================================================== */

.landing { padding: 0 0 clamp(3rem, 6vw, 5rem); }

.hero {
  position: relative;
  /* break out of the shell so the scene runs edge to edge */
  margin-inline: calc(var(--gutter) * -1);
  height: calc(100svh - 74px);
  min-height: 560px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--void);
}
.hero > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* --hero-p is 0 while the scene is on screen and 1 once you have scrolled
     past it: the scope sinks, the HUD lifts away faster, the picture recedes */
  transform: translateY(calc(var(--hero-p, 0) * 14vh)) scale(calc(1 - var(--hero-p, 0) * 0.06));
  opacity: calc(1 - var(--hero-p, 0) * 0.85);
  transform-origin: 50% 60%;
  will-change: transform, opacity;
}
.hero__hud { transform: translateY(calc(var(--hero-p, 0) * -9vh)); opacity: calc(1 - var(--hero-p, 0) * 1.1); will-change: transform, opacity; }
.hero__hotspots { opacity: calc(1 - var(--hero-p, 0) * 2); }

/* --- HUD corners ------------------------------------------------------- */

.hero__hud {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.hero__hud > * { pointer-events: auto; }

.hero__tl { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s-4); max-width: 34ch; }
.hero__tr { grid-column: 2; grid-row: 1; justify-self: end; }
.hero__bl { grid-column: 1; grid-row: 3; align-self: end; max-width: min(52ch, 40vw); }
.hero__br { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4); }

.hero__etym { display: flex; gap: var(--s-5); }
.hero__tel { display: flex; gap: var(--s-5); }
.hero__tel .tel { border-top: 0; padding-block: 0; }

.hero__headline {
  font-size: clamp(2rem, 4.7vw, 5.2rem);
  font-weight: 800;
  font-stretch: 120%;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
}
.hero__word { animation: wordIn 900ms var(--ease-out-expo) both 120ms; }
.hero__amp  { color: var(--accent); font-weight: 400; -webkit-text-stroke: 0; }
.hero__word--out { color: transparent; -webkit-text-stroke: 1.3px var(--platinum-2); animation-delay: 300ms; }

@keyframes wordIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero__standfirst {
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.1vw, 1.15rem);
  color: var(--platinum-2);
  line-height: 1.6;
  animation: wordIn 900ms var(--ease-out-expo) both 480ms;
}

.hero__hudline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
}
.hero__hud-mode { color: var(--accent); }
.hero__hud-hint { color: var(--platinum-3); text-transform: none; letter-spacing: 0.06em; max-width: 30ch; }
.hero.is-hovering .hero__hud-mode { color: rgb(var(--hover-rgb, var(--accent-rgb))); }

.hero__cue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.hero__cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cueDrop 1.8s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}

/* --- the rotor hotspots ------------------------------------------------ */

.hero__hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hotspot { pointer-events: auto; }

.hotspot {
  position: absolute;
  display: block;
  border-radius: 50%;
  color: inherit;
  --door: rgb(var(--door-rgb));
}
.hotspot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out-expo);
}
.hotspot:hover .hotspot__ring,
.hotspot:focus-visible .hotspot__ring { border-color: rgba(var(--door-rgb), 0.45); transform: scale(1.12); }
.hotspot:focus-visible { outline: none; }

.hotspot__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 15ch;
  max-width: 24ch;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out-expo);
  pointer-events: none;
}
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label { opacity: 1; transform: none; }

/* label sits outward along the bearing: right of right-hand rotors, left of
   left-hand rotors; above the upper pair, below the lower pair */
.hotspot--right .hotspot__label { left: calc(100% + 14vmin); text-align: left; }
.hotspot:not(.hotspot--right) .hotspot__label { right: calc(100% + 14vmin); text-align: right; align-items: flex-end; }
.hotspot--below .hotspot__label { top: calc(100% + 6vmin); }
.hotspot:not(.hotspot--below) .hotspot__label { bottom: calc(100% + 6vmin); }

.hotspot__coord {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  color: var(--door);
}
.hotspot__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--platinum);
}
.hotspot__title { font-size: var(--t-small); color: var(--platinum-3); line-height: 1.4; }

/* --- the index under the fold ------------------------------------------ */

.landing__index { border-top: 0; padding-top: clamp(2rem, 4vw, 3.5rem); }

.landing__prompt {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.landing__prompt-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule), transparent);
}

.etym {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--s-4);
  border-left: 1px solid var(--rule);
}
.etym__script {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.etym__meaning {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--platinum);
}
.etym__note { font-size: var(--t-small); color: var(--platinum-3); }

.tel { display: flex; flex-direction: column; gap: 2px; padding-block: var(--s-3); border-top: 1px solid var(--rule-faint); }
.tel__k { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--platinum-4); }
.tel__v { font-family: var(--font-mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: 0.04em; }
.tel__v span { color: var(--platinum-3); margin-left: 3px; }

@media (max-width: 980px) {
  .hero { height: auto; min-height: 0; max-height: none; }
  .hero > canvas { position: absolute; }
  .hero__hud { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; min-height: 88svh; row-gap: var(--s-5); }
  .hero__tl { grid-column: 1; grid-row: 1; }
  .hero__tr { grid-column: 1; grid-row: 4; justify-self: start; padding-top: var(--s-3); border-top: 1px solid var(--rule-faint); width: 100%; }
  .hero__bl { grid-column: 1; grid-row: 3; max-width: 60ch; }
  .hero__br { grid-column: 1; grid-row: 2; align-items: flex-start; justify-self: start; align-self: start; padding-block: 34vh 0; }
  .hero__hudline { align-items: flex-start; text-align: left; }
  .hero__etym, .hero__tel { flex-wrap: wrap; gap: var(--s-4); }
  .hotspot__label { display: none; }     /* the index below carries the names */
  .hero__cue { display: none; }
}

/* --- the doors ----------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--rule-neutral);
  border: 1px solid var(--rule-neutral);
}

/* Each door previews its own section's accent — the theme is the signpost. */
.door[data-door="survey"]    { --accent: var(--teal);   --accent-rgb: var(--teal-rgb); }
.door[data-door="analytics"] { --accent: var(--violet); --accent-rgb: var(--violet-rgb); }
.door[data-door="training"]  { --accent: var(--amber);  --accent-rgb: var(--amber-rgb); }
.door[data-door="fleet"]     { --accent: var(--ice);    --accent-rgb: var(--ice-rgb); }

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--strata-01);
  color: inherit;
  overflow: hidden;
  transition: background var(--dur-2) var(--ease), transform 520ms var(--ease-out-expo);
}
.doors { perspective: 1200px; }
.door::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-sharp);
}
.door:hover, .door:focus-visible { background: var(--strata-02); }
.door:hover::after, .door:focus-visible::after { transform: scaleX(1); }

.door__coord {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  font-stretch: 120%;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--accent-rgb), var(--rule-c));
  transition: color var(--dur-2) var(--ease);
}
.door:hover .door__coord { color: rgba(var(--accent-rgb), 0.16); }

.door__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.door__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--platinum);
}
.door__line { font-size: var(--t-small); color: var(--platinum-3); line-height: 1.55; }
.door__keys { display: flex; flex-wrap: wrap; gap: 5px; }

.door__go {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--platinum-4);
  transition: color var(--dur-1) var(--ease);
}
.door:hover .door__go { color: var(--accent); }
.door__arrow { transition: transform var(--dur-2) var(--ease); }
.door:hover .door__arrow { transform: translateX(5px); }


/* ==========================================================================
   SHARED SECTION-VIEW FRAME
   ========================================================================== */

.view { padding-bottom: clamp(2rem, 5vw, 4rem); }

/* The opener already carries the section's breathing room; the first section
   under it does not need a second helping of top padding. */
.view__open + .section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

.view__open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 2.5vw, 2rem);
}

.view__coord { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }

.view__coord-n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  font-stretch: 122%;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
}
.view__coord-rule { flex: 1; width: 1px; background: linear-gradient(to bottom, var(--rule), transparent); }

.view__open-body { display: flex; flex-direction: column; gap: var(--s-4); }

.view__title {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.032em;
  max-width: 22ch;
}
.view__intro { max-width: 66ch; }

@media (max-width: 700px) {
  .view__open { grid-template-columns: minmax(0, 1fr); }
  .view__coord { flex-direction: row; align-items: center; }
  .view__coord-rule { width: auto; height: 1px; flex: 1; background: linear-gradient(to right, var(--rule), transparent); }
}

/* --- generic two-column and card grids ---------------------------------- */

.twocol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.twocol > * { min-width: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-neutral);
  border: 1px solid var(--rule-neutral);
}
.cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--tight { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards--wide { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--strata-01);
  transition: background var(--dur-2) var(--ease);
}
.card:hover { background: var(--strata-02); }
/* a register mark in the corner that draws in on hover — the card has been
   picked up by the instrument */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease), transform 500ms var(--ease-out-expo);
  pointer-events: none;
}
.card::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; transform: translate(6px, 6px); }
.card::after  { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; transform: translate(-6px, -6px); }
.card:hover::before, .card:hover::after { opacity: 1; transform: none; }

.card__n {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: rgba(var(--accent-rgb), 0.8);
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.card__body { font-size: var(--t-small); color: var(--platinum-3); line-height: 1.55; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.card__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  font-stretch: 106%;
  letter-spacing: -0.015em;
}
.card--product { gap: var(--s-4); }

/* ==========================================================================
   01 · SURVEY
   ========================================================================== */

.heritage__stage { height: clamp(300px, 42vw, 440px); margin-bottom: var(--s-5); }

.heritage__scrub { display: flex; align-items: center; gap: var(--s-4); }
.heritage__scrub .label { flex: none; }
.heritage__scrub input[type="range"] { flex: 1; }

.domain { display: flex; flex-direction: column; gap: var(--s-4); }

.domain__root {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.domain__script {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.domain__meaning {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-4);
}
.domain__title { font-size: var(--t-h2); font-stretch: 108%; }

/* ==========================================================================
   02 · ANALYTICS
   ========================================================================== */

.sim {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(240px, 0.9fr);
  gap: var(--s-5);
  align-items: start;
}
.sim > * { min-width: 0; }
.sim__main { display: flex; flex-direction: column; gap: var(--s-4); }

.sim__stages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--rule-neutral);
}
.stage-btn {
  position: relative;
  padding: 0.72rem var(--s-3);
  border: 0;
  border-right: 1px solid var(--rule-neutral);
  background: var(--strata-00);
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sim__stages .stage-btn:last-child { border-right: 0; }
.stage-btn:hover { background: var(--strata-02); color: var(--platinum-2); }
.stage-btn[aria-selected="true"] { background: var(--accent); color: var(--void); }
.stage-btn__i { display: block; font-size: var(--t-micro); letter-spacing: 0.2em; opacity: 0.65; margin-bottom: 2px; }

.sim__stage-canvas { height: clamp(320px, 44vw, 480px); }

.sim__caption {
  min-height: 3.2em;
  font-size: var(--t-small);
  color: var(--platinum-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
}

.sim__side { display: flex; flex-direction: column; gap: var(--s-5); }
.sim__layers { display: flex; flex-direction: column; gap: 6px; }
.sim__readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }

@media (max-width: 980px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
  .sim__readouts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ==========================================================================
   03 · TRAINING — a stepped approach path
   ========================================================================== */

.tracks { display: flex; flex-direction: column; gap: 0; }

.track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule-faint);
}
.tracks .track:last-child { border-bottom: 1px solid var(--rule-faint); }

.track__rail { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.track__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  color: var(--accent);
}
.track__line { flex: 1; width: 1px; background: linear-gradient(to bottom, var(--rule), transparent); }

.track__body { display: flex; flex-direction: column; gap: var(--s-3); }
.track__title { font-size: var(--t-h3); font-stretch: 106%; }

/* ==========================================================================
   04 · FLEET — a drawing sheet
   ========================================================================== */

.fleet {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 2fr);
  gap: var(--s-5);
  align-items: start;
}
.fleet > * { min-width: 0; }

.fleet__list { display: flex; flex-direction: column; border: 1px solid var(--rule-neutral); }

.plat-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-4);
  border: 0;
  border-bottom: 1px solid var(--rule-neutral);
  background: var(--strata-00);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.fleet__list .plat-tab:last-child { border-bottom: 0; }
.plat-tab:hover { background: var(--strata-02); }
.plat-tab[aria-selected="true"] { background: var(--accent-wash); }

.plat-tab__code {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--platinum-4);
}
.plat-tab[aria-selected="true"] .plat-tab__code { color: var(--accent); }
.plat-tab__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  font-stretch: 106%;
  letter-spacing: -0.015em;
  color: var(--platinum);
}
.plat-tab__role { font-size: var(--t-micro); color: var(--platinum-3); line-height: 1.4; }

.fleet__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.fleet__sheet > * { min-width: 0; }
.fleet__drawing { height: clamp(320px, 40vw, 460px); }

.fleet__detail { display: flex; flex-direction: column; gap: var(--s-3); }
.fleet__detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.fleet__detail-title { font-size: var(--t-h2); font-stretch: 108%; }

@media (max-width: 1080px) {
  .fleet { grid-template-columns: minmax(0, 1fr); }
  .fleet__list { flex-direction: row; overflow-x: auto; }
  .plat-tab { border-bottom: 0; border-right: 1px solid var(--rule-neutral); min-width: 190px; }
}
@media (max-width: 820px) {
  .fleet__sheet { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CALCULATORS — one layout serves all three
   ========================================================================== */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.calc > * { min-width: 0; }

.calc__inputs { display: flex; flex-direction: column; gap: var(--s-5); }
.calc__output { display: flex; flex-direction: column; gap: var(--s-5); }

.calc__bigrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
.calc__bigval {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  font-stretch: 114%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  color: var(--accent);
  line-height: 1;
}
.calc__bigunit {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-3);
  text-align: right;
}
.calc__note {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--platinum-4);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   VAULT
   ========================================================================== */

.vault { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

.vault__gate {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.vault__gate > * { min-width: 0; }
.vault__gate-left, .vault__gate-right { display: flex; flex-direction: column; gap: var(--s-4); }

.vault__redacted { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }

.redacted { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.redacted__label { font-size: var(--t-small); color: var(--platinum-3); }
.redacted__bar {
  flex: 1;
  height: 12px;
  min-width: 40px;
  background: repeating-linear-gradient(
    90deg,
    rgba(var(--accent-rgb), 0.30) 0 10px,
    rgba(var(--accent-rgb), 0.12) 10px 16px
  );
}

.vault__form { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
.vault__status {
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.vault__dl { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }

.vault__content:empty { display: none; }
.vault__doc { display: flex; flex-direction: column; gap: var(--s-7); margin-top: var(--s-8); }
.vault__doc-head { display: flex; flex-direction: column; gap: var(--s-3); }
.vault__doc-sub {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum-3);
}

.vault__sec { display: flex; flex-direction: column; gap: var(--s-4); }
.vault__sec-head { display: flex; align-items: baseline; gap: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.vault__sec-n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--accent);
}
.vault__sec-title { font-size: var(--t-h2); font-stretch: 108%; }

.vault__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
.vault__split > * { min-width: 0; }

.vault__phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--rule-neutral); border: 1px solid var(--rule-neutral); }
.vault__phase { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--strata-01); }
.vault__phase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.vault__phase-title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; font-stretch: 106%; line-height: 1.15; }

@media (max-width: 860px) {
  .vault__gate { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.contact > * { min-width: 0; }

.contact__channels { display: flex; flex-direction: column; }

.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border: 0;
  border-top: 1px solid var(--rule-faint);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.contact__channels .channel:last-child { border-bottom: 1px solid var(--rule-faint); }
.channel:hover { background: rgba(var(--accent-rgb), 0.04); }

.channel__code {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--accent);
  padding-top: 5px;
}
.channel__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 106%;
  margin-bottom: 4px;
}
.channel__body { display: block; font-size: var(--t-small); color: var(--platinum-3); line-height: 1.55; }

.contact__form { display: grid; gap: var(--s-4); }
.contact__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.contact__status {
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6) var(--s-7);
  margin-top: var(--s-7);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.footer__mark { display: flex; align-items: center; gap: var(--s-4); }
.footer__mark canvas { width: 56px; height: 56px; flex: none; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.86;
  color: rgba(var(--platinum-rgb), 0.12);
}

.footer__domains { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.footer__domains a {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease);
}
.footer__domains a:hover { border-bottom-color: var(--accent); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--platinum-4);
}
.footer__meta span.is-bright { color: var(--platinum-3); }

@media (max-width: 720px) {
  .footer__domains { align-items: flex-start; }
}

/* ==========================================================================
   MEDIA SLOTS — space held for film that does not exist yet
   ========================================================================== */

.media { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.media__frame {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 9);
  max-height: min(56vh, 620px);
  max-width: 100%;
  background: var(--strata-00);
  border: 1px solid var(--rule-neutral);
  overflow: hidden;
}
.media__frame > canvas,
.media__frame > video,
.media__empty { width: 100%; height: 100%; }

.media__video { object-fit: cover; background: #000; }

.media__empty { position: relative; }
.media__empty canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.media__empty-label {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media__empty-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  color: var(--platinum-2);
}

.media__caption {
  font-size: var(--t-small);
  color: var(--platinum-3);
  max-width: 62ch;
  line-height: 1.55;
}

/* ==========================================================================
   COUNTED FIGURES
   ========================================================================== */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--rule);
}
.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-right: 1px solid var(--rule-faint);
}
.figures .figure:last-child { border-right: 0; }

.figure__v {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  font-stretch: 114%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.figure__u {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--platinum-3);
}
.figure__k {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-4);
  margin-top: var(--s-2);
}

/* ==========================================================================
   PINNED SEQUENCE — the analytics pipeline, driven by scroll
   ========================================================================== */

.pin { padding-block: 0; }

html.can-pin .pin { height: var(--pin-h, 300vh); }
html.can-pin .pin__inner {
  position: sticky;
  top: 84px;
  padding-block: var(--s-5) var(--s-6);
}

.pin__hint {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.pin__hint-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule), transparent);
}
html:not(.can-pin) .pin__hint { display: none; }

/* The stage meter under the stepper: how far through the pipeline you are. */
.sim__meter {
  height: 2px;
  background: rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
}
.sim__meter i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--accent);
  transition: width 90ms linear;
}
html:not(.can-pin) .sim__meter { display: none; }

@media (max-width: 899px) {
  .pin { padding-block: clamp(3rem, 7vw, 6rem); }
}

/* ==========================================================================
   FOOTER — the restricted entrance lives here, as small print
   ========================================================================== */

.footer__end {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.footer__restricted {
  color: var(--platinum-4);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.footer__restricted:hover,
.footer__restricted:focus-visible {
  color: var(--platinum-3);
  border-bottom-color: var(--rule-neutral);
}


/* ==========================================================================
   PINNED SURVEY SCENE — sticky captions beside the section canvas
   ========================================================================== */

.stagepin { display: grid; grid-template-columns: minmax(200px, 0.5fr) minmax(0, 2fr); gap: var(--s-5); align-items: center; }
.stagepin > * { min-width: 0; }
.stagepin .heritage__stage { height: clamp(320px, 62vh, 620px); }

.stagepin__caps { display: flex; flex-direction: column; gap: var(--s-6); }
.stagecap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  opacity: 0.32;
  transform: translateX(-6px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease-out-expo);
}
.stagecap.is-on { opacity: 1; transform: none; }
.stagecap__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.stagecap__note { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-4); }

@media (max-width: 899px) {
  .stagepin { grid-template-columns: minmax(0, 1fr); }
  .stagepin__caps { flex-direction: row; gap: var(--s-5); }
  .stagecap { opacity: 1; transform: none; }
}

/* ==========================================================================
   NEXT DOOR — the way out of every section
   ========================================================================== */

.nextdoor {
  display: block;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--rule);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 60%);
  color: inherit;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease), transform 520ms var(--ease-out-expo);
}
.nextdoor:hover, .nextdoor:focus-visible {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03) 70%);
}

.nextdoor__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.nextdoor__rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--rule), transparent); }

.nextdoor__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

.nextdoor__coord {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
  font-stretch: 122%;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
  transition: color var(--dur-3) var(--ease);
}
.nextdoor:hover .nextdoor__coord { color: rgba(var(--accent-rgb), 0.18); }

.nextdoor__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.nextdoor__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.nextdoor__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 800;
  font-stretch: 114%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nextdoor__arrow {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--accent);
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.nextdoor:hover .nextdoor__arrow { transform: translateX(10px); }

@media (max-width: 640px) {
  .nextdoor__row { grid-template-columns: minmax(0, 1fr); }
  .nextdoor__arrow { display: none; }
}