/* ============================================================
   Mission Critical AI Summit
   One hue (215°), full tonal range. Live signal used as signal.
   Instrumented, not animated.
   ============================================================ */

:root {
  /* ---- the single material: hue 216°, carried at real chroma
         so the darks read as deep blue-slate, not neutral black ---- */
  --t-000: #060b13;
  --t-050: #09101b;
  --t-100: #0c1522;
  --t-150: #0f1a29;
  --t-200: #152133;
  --t-300: #1d2b3e;
  --t-400: #2b3a50;
  --t-500: #405068;
  --t-600: #5e6f87;
  --t-700: #8a96a8;
  --t-800: #b4bbc6;
  --t-900: #d6dae0;
  --t-950: #eaedf0;
  --t-975: #f6f7f9;

  /* channel values for canvas + rgba() work, kept in one place */
  --rgb-deep: 6, 11, 19;
  --rgb-line: 138, 150, 168;
  --rgb-node: 180, 187, 198;
  --rgb-ink: 21, 33, 51;

  /* ---- the only permitted flourish ---- */
  --signal: #00e08a;
  --signal-deep: #00a063;
  /* the signal, darkened enough to clear AA when it carries small text
     on the bright register — see .is-light */
  --signal-ink: var(--signal);
  --signal-dim: rgba(0, 224, 138, 0.28);
  --signal-glow: rgba(0, 224, 138, 0.16);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 68ch;
  --rule: 1px;

  /* damped hardware timing */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-switch: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-mid: 340ms;
  --t-slow: 760ms;

  /* per-section tone contract */
  --fg: var(--t-900);
  --fg-dim: var(--t-700);
  --fg-faint: var(--t-600);
  --line: rgba(var(--rgb-node), 0.11);
  --line-hard: rgba(var(--rgb-node), 0.2);
}

.is-light {
  --fg: var(--t-100);
  --fg-dim: var(--t-500);
  --fg-faint: var(--t-600);
  --signal-ink: #00794a;
  --line: rgba(var(--rgb-ink), 0.12);
  --line-hard: rgba(var(--rgb-ink), 0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--t-000);
  color: var(--t-900);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.55vw + 0.86rem, 1.075rem);
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--signal); color: var(--t-000); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--t-975); color: var(--t-000);
  font: 500 0.8rem/1 var(--mono);
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  width: 100%; max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   continuous tonal grade — the arc is ridden, not stepped
   ============================================================ */

.arc {
  position: fixed; inset: 0; z-index: -2;
  background: var(--t-000);
  transition: background-color 220ms linear;
}

/* ============================================================
   formwork — construction rules, near-subliminal parallax
   ============================================================ */

.formwork {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  opacity: 0.55;
}
.formwork span {
  border-left: var(--rule) solid rgba(var(--rgb-line), 0.075);
  will-change: transform;
}
.formwork span:first-child { border-left-color: transparent; }
/* on the bright register the formwork drops to a whisper */
.is-inverted-page .formwork { opacity: 0.4; }
.is-inverted-page .formwork span { border-left-color: rgba(var(--rgb-ink), 0.055); }

/* ============================================================
   readout + reticle
   ============================================================ */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: rgba(var(--rgb-line), 0.14);
  pointer-events: none;
}
.progress__bar {
  display: block; height: 100%; width: 0;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal-glow);
  transition: width 90ms linear;
}

.reticle {
  position: fixed; top: 0; left: 0; z-index: 55;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.reticle.is-on { opacity: 1; }
.reticle__h, .reticle__v {
  position: absolute;
  background: rgba(0, 224, 138, 0.22);
}
.reticle__h { left: -26px; top: 0; width: 52px; height: 1px; }
.reticle__v { top: -26px; left: 0; height: 52px; width: 1px; }
.reticle__ring {
  position: absolute; left: -9px; top: -9px;
  width: 18px; height: 18px;
  border: 1px solid rgba(0, 224, 138, 0.3);
  border-radius: 50%;
}
@media (pointer: coarse), (max-width: 900px) { .reticle { display: none; } }

/* ============================================================
   masthead
   ============================================================ */

.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: var(--rule) solid transparent;
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
/* the nav sits directly on a photograph before it sticks, so it carries
   its own soft scrim — dropped on the bright register where it would
   read as a smudge */
.masthead:not(.is-inverted)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--rgb-deep), 0.62), rgba(var(--rgb-deep), 0.28) 62%, transparent);
}
.masthead.is-stuck::before { opacity: 0; }

.masthead.is-stuck {
  background: rgba(var(--rgb-deep), 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: rgba(var(--rgb-node), 0.12);
}
.masthead.is-stuck.is-inverted {
  background: rgba(246, 247, 249, 0.82);
  border-bottom-color: rgba(var(--rgb-ink), 0.14);
}

.masthead__inner {
  max-width: 1240px; margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--t-900);
  transition: color var(--t-mid) var(--ease-switch);
}
.wordmark__mark { font: 600 0.86rem/1 var(--mono); letter-spacing: 0.14em; }
.wordmark__rule { width: 1.6rem; height: var(--rule); background: currentColor; opacity: 0.4; }
.wordmark__text { font: 500 0.78rem/1 var(--mono); letter-spacing: 0.22em; opacity: 0.72; }
.masthead.is-inverted .wordmark { color: var(--t-100); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }

.nav__link {
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t-700); text-decoration: none;
  transition: color var(--t-fast) var(--ease-switch);
}
.nav__link:hover { color: var(--signal); }
.masthead.is-inverted .nav__link { color: var(--t-500); }
.masthead.is-inverted .nav__link:hover { color: var(--signal-deep); }

/* announced-but-not-yet: reads as a real nav item that is coming, not as a
   dead link. No hover, no pointer — there is nothing to go to yet. */
.nav__link--soon {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  color: var(--t-600); cursor: default;
}
.nav__link--soon:hover { color: var(--t-600); }
.masthead.is-inverted .nav__link--soon,
.masthead.is-inverted .nav__link--soon:hover { color: var(--t-600); }

.nav__badge {
  font-style: normal;
  font-size: 0.6rem; letter-spacing: 0.16em;
  padding: 0.22rem 0.42rem;
  border: var(--rule) solid currentColor;
  opacity: 0.6;
}

@media (max-width: 820px) { .nav__link { display: none; } }

/* ============================================================
   section rail
   ============================================================ */

.rail {
  position: fixed; right: clamp(0.9rem, 2vw, 2rem);
  top: 50%; transform: translateY(-50%); z-index: 45;
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; justify-items: end; }
.rail a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.rail__tick {
  display: block; width: 1.15rem; height: var(--rule);
  background: var(--t-600); opacity: 0.5;
  transition: width var(--t-mid) var(--ease), background var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.rail__label {
  font: 500 0.64rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-600); opacity: 0; transform: translateX(4px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.rail a:hover .rail__tick { width: 1.9rem; opacity: 0.95; }
.rail a:hover .rail__label { opacity: 0.85; transform: none; }
.rail a.is-current .rail__tick {
  width: 2.4rem; background: var(--signal); opacity: 1;
  box-shadow: 0 0 10px var(--signal-glow);
}
.rail a.is-current .rail__label { opacity: 1; color: var(--t-800); transform: none; }

.rail.is-inverted .rail__tick { background: var(--t-500); }
.rail.is-inverted .rail__label { color: var(--t-500); }
.rail.is-inverted a.is-current .rail__tick { background: var(--signal-deep); box-shadow: none; }
.rail.is-inverted a.is-current .rail__label { color: var(--t-300); }

@media (max-width: 960px) { .rail { display: none; } }

/* ============================================================
   sections
   ============================================================ */

.section {
  position: relative;
  color: var(--fg);
  padding-block: clamp(6rem, 14vh, 11rem);
}
.section + .section { border-top: var(--rule) solid var(--line); }

/* atmosphere: a faint cool pool per dark section, so the material reads
   as lit rather than filled. One hue, varied luminance — not new colours. */
.section:not(.is-light)::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 56% at var(--pool-x, 76%) var(--pool-y, 22%), rgba(94, 111, 135, 0.11), transparent 68%),
    radial-gradient(ellipse 54% 50% at 6% 88%, rgba(43, 58, 80, 0.18), transparent 72%);
}
.section:not(.is-light) > .wrap { position: relative; z-index: 1; }

.hero::before { content: none; }
.entry { --pool-x: 84%; --pool-y: 40%; }
.entry--flip { --pool-x: 14%; --pool-y: 44%; }
.agenda { --pool-x: 26%; --pool-y: 26%; }

/* ============================================================
   typography
   ============================================================ */

.display {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.5rem, 7.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--t-950);
}
.hero .display { font-size: clamp(2.5rem, 6.6vw, 5rem); }
.display__soft { color: var(--t-600); }
/* the only place the signal is allowed to carry display type */
.display__signal { color: var(--signal); }
.display--close {
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  color: var(--t-050);
  letter-spacing: -0.028em;
}

.lede {
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 0.7vw + 0.92rem, 1.32rem);
  line-height: 1.56;
  color: var(--fg-dim);
  font-weight: 300;
}

.kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem;
  margin: 0 0 clamp(2rem, 5vh, 3.25rem);
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.kicker__sep { width: 1.4rem; height: var(--rule); background: currentColor; opacity: 0.35; }
.kicker__text--dim { opacity: 0.62; }

/* live marker — lume, not paint */
.status { display: inline-flex; width: 0.5rem; height: 0.5rem; position: relative; }
.status__dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal-dim);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 var(--signal-dim); }
  35%           { box-shadow: 0 0 0 6px rgba(0, 224, 138, 0); }
}

/* section head — number engraved into a rule that draws itself */
.shead {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  position: relative;
}
.shead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--rule); background: var(--line-hard);
}
.shead__rule {
  position: absolute; left: 0; bottom: 0;
  height: var(--rule); width: 100%;
  background: linear-gradient(to right, var(--fg-faint), transparent 55%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1100ms var(--ease) 120ms;
}
.reveal.is-in .shead__rule, .shead.is-in .shead__rule { transform: scaleX(1); }
.shead--center { justify-content: center; }
.shead__num { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.2em; color: var(--signal-ink); }
.shead__title {
  margin: 0;
  font: 500 clamp(0.82rem, 1.4vw, 0.95rem)/1.6 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim);
}

.statement {
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  max-width: 30ch;
  font-size: clamp(1.85rem, 4.4vw, 3.1rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -0.024em;
  color: var(--fg);
  text-wrap: balance;
}
.statement--tight { max-width: 24ch; }

/* one saturated line under a critical claim */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em;
  height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease) 220ms;
}
.reveal.is-in .mark::after, .is-in .mark::after { transform: scaleX(1); }
.mark--heavy::after { height: 3px; box-shadow: 0 0 18px var(--signal-glow); }
@media (max-width: 560px) { .mark { white-space: normal; } }

/* a marked phrase long enough to wrap can't use an absolutely positioned
   rule — draw it as an inline background so every line fragment gets one */
.mark--multi {
  white-space: normal;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 900ms var(--ease) 220ms;
}
.mark--multi::after { content: none; }
.reveal.is-in .mark--multi, .is-in .mark--multi { background-size: 100% 2px; }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
  gap: clamp(1.75rem, 5vw, 4.5rem);
  max-width: var(--measure);
}
.col p { margin: 0; color: var(--fg-dim); }
.col p::first-line { color: var(--fg); }

.link {
  color: var(--fg); text-decoration: none;
  border-bottom: var(--rule) solid var(--line-hard);
  padding-bottom: 0.12em;
  font: 500 0.78rem/1.6 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-switch), border-color var(--t-fast) var(--ease-switch);
}
.link:hover { color: var(--signal); border-bottom-color: var(--signal); }
.is-light .link:hover { color: var(--signal-deep); border-bottom-color: var(--signal-deep); }

/* ============================================================
   hero — living sensor field
   ============================================================ */

.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(8rem, 18vh, 12rem);
  overflow: hidden;
}

/* the building, ghosted into the base material — architecture as substrate */
.hero__plate {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__plate img {
  position: absolute;
  top: 50%; left: 50%;
  width: max(132%, 1700px); height: auto;
  transform: translate(-46%, -44%) scale(1.04);
  /* keep a trace of the real light, then tint it into the hue */
  filter: grayscale(0.4) saturate(1.5) contrast(1.15) brightness(1) hue-rotate(-8deg);
  opacity: 0.95;
  will-change: transform;
}
/* hue-lock the photograph into the material — tint, don't just darken */
.hero__plateveil {
  position: absolute; inset: 0;
  background:
    /* scrim over the copy column only — the type has to hold at
       AA against a photograph that is allowed to stay a photograph */
    linear-gradient(to right,
      rgba(var(--rgb-deep), 0.66) 0%,
      rgba(var(--rgb-deep), 0.56) 30%,
      rgba(var(--rgb-deep), 0.32) 58%,
      rgba(var(--rgb-deep), 0) 82%),
    linear-gradient(112deg,
      rgba(var(--rgb-deep), 0.32) 0%,
      rgba(var(--rgb-deep), 0.18) 24%,
      rgba(var(--rgb-deep), 0.08) 54%,
      rgba(var(--rgb-deep), 0.06) 80%,
      rgba(var(--rgb-deep), 0.14) 100%),
    linear-gradient(to bottom,
      rgba(var(--rgb-deep), 0.2) 0%,
      rgba(var(--rgb-deep), 0.05) 42%,
      rgba(var(--rgb-deep), 0.32) 90%,
      var(--t-000) 100%),
    /* cool cast pulling the whole exposure onto hue 216 */
    linear-gradient(150deg, rgba(29, 43, 62, 0.3), rgba(64, 80, 104, 0.15) 60%, rgba(21, 33, 51, 0.3));
}
/* raster: the environment arrives as a scanned signal, not a photo */
.hero__scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--rgb-deep), 0) 0px,
    rgba(var(--rgb-deep), 0) 2px,
    rgba(var(--rgb-deep), 0.15) 3px,
    rgba(var(--rgb-deep), 0.15) 4px
  );
  opacity: 0.08;
}

.hero__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 92% 82% at 56% 46%, #000 22%, transparent 82%);
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* two cool pools of light, so the field is not one flat wash */
    radial-gradient(ellipse 54% 46% at 72% 34%, rgba(94, 111, 135, 0.08), transparent 70%),
    radial-gradient(ellipse 46% 40% at 22% 74%, rgba(45, 64, 92, 0.12), transparent 72%),
    linear-gradient(to bottom, transparent 64%, rgba(var(--rgb-deep), 0.45));
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.hero__lead { max-width: 60rem; }

/* the hero copy sits over a photograph, so it runs one step brighter
   than the same elements do on flat material */
.hero .kicker { color: var(--t-900); }
.hero .lede { color: var(--t-950); }
.hero .btn--ghost { color: var(--t-800); }

.scramble { display: inline-block; }

.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem;
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
}

.hero__foot {
  position: absolute; left: var(--gutter); bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.9rem; z-index: 1;
}
.hero__scroll {
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--t-600);
}
.hero__line {
  width: 4.5rem; height: var(--rule);
  background: linear-gradient(to right, var(--t-600), transparent);
  animation: sweep 3.6s var(--ease) infinite;
  transform-origin: left;
}
@keyframes sweep {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1); opacity: 0.9; }
}

/* specification table */
.specs {
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  max-width: 44rem;
  border-top: var(--rule) solid var(--line-hard);
}
.specs__row {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: 1rem; padding: 0.8rem 0;
  border-bottom: var(--rule) solid var(--line);
}
.specs dt {
  font: 500 0.7rem/1.6 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}
.specs dd {
  margin: 0;
  font: 500 0.86rem/1.6 var(--mono);
  letter-spacing: 0.03em; color: var(--t-800);
}
.specs .pending { color: var(--fg-faint); }
.specs__unit { color: var(--fg-faint); font-size: 0.72rem; letter-spacing: 0.14em; }
.clock { font-variant-numeric: tabular-nums; }
/* the same table has to read on the bright register too */
.is-light .specs dd { color: var(--t-200); }
.specs--venue { margin-top: 0; max-width: none; }

/* ============================================================
   buttons — a switch thrown to a detent
   ============================================================ */

.btn {
  --btn-pad: 0.95rem 1.6rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: var(--btn-pad);
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  border: var(--rule) solid var(--line-hard);
  color: var(--t-900); background: transparent;
  transition: background var(--t-fast) var(--ease-switch),
              color var(--t-fast) var(--ease-switch),
              border-color var(--t-fast) var(--ease-switch),
              box-shadow var(--t-mid) var(--ease);
}
.btn--sm { --btn-pad: 0.7rem 1.1rem; font-size: 0.72rem; white-space: nowrap; }
@media (max-width: 480px) {
  .btn--sm { --btn-pad: 0.6rem 0.85rem; font-size: 0.66rem; letter-spacing: 0.12em; }
  .wordmark__text, .wordmark__rule { display: none; }
}
.btn__glyph { transition: transform var(--t-mid) var(--ease); }
.btn:hover .btn__glyph { transform: translateX(4px); }

/* the one button that has to be read from across the page */
.btn--primary {
  font-weight: 700;
  color: var(--t-975);
  border-color: rgba(0, 224, 138, 0.45);
  background: rgba(0, 224, 138, 0.06);
}
.btn--primary:hover {
  border-color: var(--signal);
  background: rgba(0, 224, 138, 0.13);
  box-shadow: 0 0 22px var(--signal-glow);
}
.btn--ghost { color: var(--fg-dim); }
.btn--ghost:hover { color: var(--fg); border-color: var(--fg-faint); }
.btn--quiet { border-color: transparent; color: var(--fg-faint); }
.btn--quiet:hover { border-color: var(--line-hard); color: var(--fg); }

.masthead.is-inverted .btn--sm { color: var(--t-100); border-color: rgba(var(--rgb-ink), 0.24); }
.masthead.is-inverted .btn--sm:hover { border-color: var(--signal-deep); background: rgba(0, 224, 138, 0.1); }

/* ============================================================
   dateline band — the particulars, stated once
   Nothing in here is simulated. Every value is a stated fact.
   ============================================================ */

.dateline {
  position: relative;
  border-block: var(--rule) solid var(--line);
  padding-block: clamp(2rem, 5vh, 3.25rem);
  background: rgba(var(--rgb-line), 0.018);
}
.dateline__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(1.75rem, 4vh, 2.5rem) clamp(1.25rem, 3vw, 2.75rem);
}
.fact { display: grid; gap: 0.55rem; align-content: start; }
.fact__label {
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal-ink);
}
.fact__value {
  font: 500 clamp(1.35rem, 2vw, 1.7rem)/1.15 var(--mono);
  letter-spacing: -0.005em; color: var(--t-950);
  font-variant-numeric: tabular-nums;
}
.fact__unit {
  font: 400 0.74rem/1.5 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-700);
}

/* ============================================================
   hosts — three marks, normalised on optical HEIGHT not width,
   because all three lockups have different aspect ratios.

   --logo-h  rendered height of a mark. NVIDIA's floor for the
             horizontal lockup is 15px; 36px sits well clear.
   --clear   NVIDIA requires clear space of at least the n-height,
             measured off their own diagram as 0.66 × logo height.
             AWS and Zensors publish no figure, so the strictest
             rule in the set governs all three.
   ============================================================ */

.hosts {
  --pool-x: 70%; --pool-y: 26%;
  /* the target height of the VISIBLE mark, which every host is tuned to hit.
     Each file wastes a different amount of its own box, so --logo-h differs
     per host while the mark inside lands at roughly this size. */
  --mark-h: 2.8rem;
  /* one lockup height for all three, so the marks share a baseline and the
     captions below them line up */
  --lock-h: 7rem;
  /* NVIDIA: clear space >= the n-height, 0.66 x the visible mark. AWS and
     Zensors publish no figure, so the strictest governs all three. */
  --clear: calc(var(--mark-h) * 0.66);
  --logo-h: var(--mark-h);
}

/* the three names run long, so this statement gets more measure than the
   30ch default and lands on two lines instead of four */
.statement--hosts { max-width: 40ch; }

.hosts__row {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* grid rows, not per-card flex: the lockup row and the caption row are shared
   across all three, so the captions land on one horizontal line regardless of
   how tall or short each mark is */
.hosts__row { align-items: stretch; }
.host {
  display: grid;
  grid-template-rows: var(--lock-h) auto;
  align-content: start;
}

/* the logo box: flat WHITE ground, clear space as padding.
   White because the supplied marks are the light-background variants —
   NVIDIA green-eyemark-plus-black-wordmark, AWS navy-plus-orange. Putting
   them on white is what lets us use both files exactly as issued, with no
   recolouring, which is the thing the guidelines actually forbid.
   Opaque, so the section's radial pools never reach behind a mark. */
/* No chip, no frame, no white slab. All three supplied files are transparent
   and dark-on-light — NVIDIA green eyemark + black wordmark, Zensors purple,
   AWS navy + orange smile — so on this bright section they sit straight on the
   material, used exactly as issued. The lockup is a fixed-height row purely so
   the captions beneath share one baseline. */
.host__lockup {
  display: flex; align-items: center; justify-content: flex-start;
  height: var(--lock-h);
  margin-bottom: var(--clear);
}
/* height drives the size; width follows the file's own ratio, so a mark
   can never be scaled non-uniformly */
.host__logo {
  display: block;
  height: var(--logo-h);
  width: auto; max-width: 100%;
}


/* NVIDIA's vertical lockup sits in a 16:9 frame and fills ~72% of its height,
   so the img box runs larger to land the visible mark near 51px — clear of
   NVIDIA's 38px minimum for the VERTICAL orientation */
.host--nvidia { --logo-h: 5.2rem; }

/* Zensors and AWS both have tight bounding boxes, so img height IS mark height */
.host--zensors { --logo-h: var(--mark-h); }

/* AWS must render less prominently than the host's own mark */
.host--aws { --logo-h: calc(var(--mark-h) * 0.8); }

/* the card settles into place, but the mark is never drawn at partial
   opacity — a faded logo is an unapproved treatment */
.host.reveal { opacity: 1; transform: translateY(14px); }
.host.reveal.is-in { transform: none; }

/* no filter, tint, blend or animation may ever touch a mark */
.host__logo, .host:hover .host__logo { filter: none; opacity: 1; }
/* typographic stand-in until the official files land — deliberately the
   page's own type, not an imitation of anyone's mark */
.host__wordmark {
  font: 500 calc(var(--logo-h) * 0.62)/1 var(--mono);
  letter-spacing: 0.24em; text-indent: 0.24em;
  color: var(--t-900);
  white-space: nowrap;
}

/* the role line is the whole caption now, sitting under a hairline so each
   host still reads as its own column without a box around it */
.host__role {
  display: block;
  padding-top: clamp(1rem, 2.5vw, 1.4rem);
  border-top: var(--rule) solid var(--line);
  font: 500 0.7rem/1.5 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--signal-ink);
}


/* ============================================================
   centrepiece — PASSIVE → UNIFIED, scroll-scrubbed
   ============================================================ */

.unify { padding: 0; height: 320vh; }
.unify__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.unify__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.unify__overlay { position: relative; text-align: center; }

.unify__state {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.75rem);
  margin: 0;
}
.unify__word {
  font-size: clamp(1.9rem, 6vw, 4.4rem);
  font-weight: 600; letter-spacing: -0.03em;
  color: var(--t-500);
  transition: color var(--t-slow) var(--ease);
}
.unify__word.is-on { color: var(--t-950); }
.unify__word[data-unify-word="b"].is-on { color: var(--t-975); }
.unify__arrow {
  display: block; position: relative;
  width: clamp(3rem, 10vw, 7rem); height: 2px;
  background: var(--line-hard);
  /* leave room for the head so it never overhangs the flex gap */
  margin-right: 0.5rem;
}
.unify__arrowline {
  position: absolute; inset: 0;
  background: var(--signal);
  box-shadow: 0 0 14px var(--signal-glow);
  transform: scaleX(0); transform-origin: left;
}
/* the head: an actual arrow, not just a rule */
.unify__arrow::after {
  content: "";
  position: absolute; right: -2px; top: 50%;
  width: 0.6rem; height: 0.6rem;
  margin-top: -0.3rem;
  border-top: 2px solid var(--line-hard);
  border-right: 2px solid var(--line-hard);
  transform: rotate(45deg);
  transition: border-color var(--t-slow) var(--ease);
}
/* it lights once the far state is the live one — no extra JS needed */
.unify__state:has([data-unify-word="b"].is-on) .unify__arrow::after {
  border-top-color: var(--signal);
  border-right-color: var(--signal);
}

.unify__caption {
  position: relative;
  margin: clamp(1.75rem, 4vh, 2.5rem) auto 0;
  max-width: 46ch; min-height: 3.4em;
  font-size: clamp(0.98rem, 0.5vw + 0.88rem, 1.15rem);
  font-weight: 300; color: var(--t-700);
}
.unify__caption span {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.unify__caption span.is-on { opacity: 1; transform: none; position: relative; }

.unify__meter {
  display: flex; align-items: center; gap: 0.9rem;
  width: min(22rem, 70%);
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
}
.unify__metertrack {
  flex: 1; position: relative;
  height: 3px;
  background: rgba(var(--rgb-line), 0.16);
}
.unify__meterfill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal-glow);
}
.unify__meterval {
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.16em; color: var(--t-700);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em; text-align: right;
}

/* ============================================================
   floor entries + technical plates
   ============================================================ */

.entry { padding-block: clamp(4.5rem, 11vh, 8rem); }
.entry__item {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: 1080px;
}
.entry--flip .entry__item > .entry__body { order: 2; }
.entry--flip .entry__item > .plate { order: 1; }
@media (max-width: 820px) {
  .entry__item { grid-template-columns: 1fr; gap: 2.25rem; }
  .entry--flip .entry__item > .entry__body { order: 0; }
  .entry--flip .entry__item > .plate { order: 0; }
}

.entry__num {
  display: block; margin-bottom: 1rem;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg-faint);
}
.entry__body h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.9vw, 2.15rem);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.018em;
  color: var(--t-950); text-wrap: balance;
}
.entry__body p { margin: 0; max-width: 52ch; color: var(--fg-dim); font-weight: 300; }

/* engineering drawing, not stock photography */
.plate {
  margin: 0;
  border: var(--rule) solid var(--line);
  background: rgba(var(--rgb-line), 0.022);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  color: var(--t-700);
}
.plate svg { display: block; width: 100%; height: auto; }
.plate__note {
  font: 500 7px/1 var(--mono);
  letter-spacing: 0.18em;
  fill: var(--t-600);
}

/* a plate can also hold a photograph — barely graded, framed the same */
.plate--photo { padding: clamp(0.5rem, 1.2vw, 0.85rem); }
.plate--photo img {
  display: block; width: 100%; height: auto;
  background: var(--t-000);
}

/* stroke-dashoffset draw-on */
.draw__g path, .draw__g rect { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.plate.is-in .draw__g path, .plate.is-in .draw__g rect {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease);
}

.plate__tiles rect {
  fill: rgba(0, 224, 138, 0.14); stroke: rgba(0, 224, 138, 0.4); stroke-width: 1;
  opacity: 0; transition: opacity 500ms var(--ease);
}
.plate.is-in .plate__tiles rect { opacity: 1; }
.plate.is-in .plate__tiles rect:nth-child(n) { transition-delay: calc(600ms + var(--i, 0) * 55ms); }

.plate__leds circle { fill: var(--signal); opacity: 0; }
.plate.is-in .plate__leds circle { animation: led 2.6s var(--ease) infinite; }
@keyframes led {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

.plate__route {
  stroke: var(--signal); stroke-width: 1.6;
  stroke-dasharray: 460; stroke-dashoffset: 460;
  filter: drop-shadow(0 0 5px var(--signal-glow));
}
.plate.is-in .plate__route { transition: stroke-dashoffset 2200ms var(--ease) 500ms; stroke-dashoffset: 0; }

.plate__lidar path {
  stroke: rgba(0, 224, 138, 0.5); stroke-width: 1; fill: none;
  opacity: 0;
}
.plate.is-in .plate__lidar path { animation: ping 3.2s var(--ease) infinite; }
.plate.is-in .plate__lidar path:nth-child(2) { animation-delay: 0.45s; }
.plate.is-in .plate__lidar path:nth-child(3) { animation-delay: 0.9s; }
@keyframes ping {
  0%   { opacity: 0.65; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

.plate__waypoints circle { fill: none; stroke: var(--t-700); stroke-width: 1; }
.plate.is-in .plate__waypoints circle:nth-child(2) { stroke: var(--signal); fill: rgba(0, 224, 138, 0.2); }

.plate__loop path {
  stroke: rgba(0, 224, 138, 0.35); stroke-width: 1.2;
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.plate.is-in .plate__loop path { transition: stroke-dashoffset 1800ms var(--ease) 400ms; stroke-dashoffset: 0; }
.plate__flow circle { fill: var(--signal); opacity: 0; }
.plate.is-in .plate__flow circle {
  opacity: 1;
  offset-path: path("M190 30 V230");
  animation: coolant 4.5s linear infinite;
}
@keyframes coolant {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ============================================================
   agenda — one plan, three overlays
   ============================================================ */

.agenda__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .agenda__grid { grid-template-columns: 1fr; } }

.topo {
  position: sticky; top: 22vh;
  border: var(--rule) solid var(--line);
  background: rgba(var(--rgb-line), 0.02);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  color: var(--t-800);
}
@media (max-width: 900px) { .topo { position: relative; top: 0; } }
.topo__svg { display: block; width: 100%; height: auto; }

.topo__layer { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.topo[data-topo-state="a"] .topo__layer--a,
.topo[data-topo-state="b"] .topo__layer--b,
.topo[data-topo-state="c"] .topo__layer--c,
.topo[data-topo-state="d"] .topo__layer--d { opacity: 1; }

/* C · economics — a spine everything hangs off */
.topo__spine path {
  stroke: var(--signal); stroke-width: 1.8; fill: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px var(--signal-glow));
  stroke-dasharray: 300; stroke-dashoffset: 300;
}
.topo[data-topo-state="c"] .topo__spine path { animation: trace 1600ms var(--ease) forwards; }
.topo__links path {
  stroke: rgba(0, 224, 138, 0.4); stroke-width: 1; fill: none;
  vector-effect: non-scaling-stroke;
}

/* B · applications — the decision path traced end to end */
.topo__decision {
  stroke: var(--signal); stroke-width: 1.6;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  filter: drop-shadow(0 0 5px var(--signal-glow));
}
.topo[data-topo-state="b"] .topo__decision { animation: trace 2600ms var(--ease) forwards; }
.topo[data-topo-state="b"] .topo__decision:nth-of-type(2) { animation-delay: 300ms; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.topo__act circle { fill: var(--signal); }
.topo[data-topo-state="b"] .topo__act circle,
.topo[data-topo-state="c"] .topo__act circle { animation: led 2s var(--ease) infinite; }

/* A · capital asset transition — installed against transitioned */
.topo__legacy rect { fill: rgba(var(--rgb-line), 0.1); stroke: var(--t-600); stroke-width: 1; }
.topo__new rect { fill: rgba(0, 224, 138, 0.16); stroke: var(--signal); stroke-width: 1; }

/* D · governance — a perimeter that never stops being checked */
.topo__layer--d rect { stroke: var(--signal); stroke-width: 1; }
.topo[data-topo-state="d"] .topo__layer--d rect { animation: crawl 30s linear infinite; }
@keyframes crawl { to { stroke-dashoffset: -100; } }
.topo__seal circle { fill: var(--signal); }

.topo__tag {
  font: 500 8px/1 var(--mono);
  letter-spacing: 0.2em; fill: var(--signal);
}
.topo__readout {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: var(--rule) solid var(--line);
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint);
}

/* the subjects section runs on the bright register, so the parts that
   were tuned for a dark ground need re-pointing */
.agenda.is-light .topo { color: var(--t-500); background: rgba(var(--rgb-ink), 0.022); }
.agenda.is-light .topo__tag { fill: var(--signal-ink); }
.agenda.is-light .topo__legacy rect { fill: rgba(var(--rgb-ink), 0.07); stroke: var(--t-500); }
.agenda.is-light .topo__new rect { fill: rgba(0, 121, 74, 0.14); stroke: var(--signal-deep); }
.agenda.is-light .topo__spine path,
.agenda.is-light .topo__decision { stroke: var(--signal-deep); filter: none; }
.agenda.is-light .topo__links path { stroke: rgba(0, 121, 74, 0.4); }
.agenda.is-light .topo__act circle,
.agenda.is-light .topo__seal circle { fill: var(--signal-deep); }
.agenda.is-light .topo__layer--d rect { stroke: var(--signal-deep); }
.agenda.is-light .subject h3 { color: var(--t-050); }
.agenda.is-light .subject.is-active .subject__id {
  color: var(--signal-ink); border-color: rgba(0, 121, 74, 0.4);
}
.agenda.is-light .subject.is-active::before { background: var(--signal-deep); }

.subjects { list-style: none; margin: 0; padding: 0; display: grid; }
.subject {
  padding: clamp(1.5rem, 4vh, 2.4rem) 0;
  border-top: var(--rule) solid var(--line);
  position: relative;
  transition: opacity var(--t-slow) var(--ease);
  opacity: 0.6;
}
.subject:last-child { border-bottom: var(--rule) solid var(--line); }
.subject.is-active { opacity: 1; }
.subject::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 0; height: var(--rule); background: var(--signal);
  transition: width var(--t-slow) var(--ease);
}
.subject.is-active::before { width: 3.5rem; }

.subject__id {
  display: inline-block; margin-bottom: 1.1rem;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg-faint);
  padding: 0.35rem 0.6rem;
  border: var(--rule) solid var(--line-hard);
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.subject.is-active .subject__id { color: var(--signal); border-color: rgba(0, 224, 138, 0.4); }
.subject h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--t-950); text-wrap: balance;
}
.subject p { margin: 0; font-size: 0.98rem; color: var(--fg-dim); font-weight: 300; }

/* ============================================================
   the room
   ============================================================ */

.room__sub {
  margin: -1rem 0 clamp(2.5rem, 6vh, 3.5rem);
  max-width: 54ch;
  font-size: 1.02rem; font-weight: 300; color: var(--fg-dim);
}

.domains {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  border-top: var(--rule) solid var(--line-hard);
  border-bottom: var(--rule) solid var(--line-hard);
}
.domains li {
  flex: 1 1 auto;
  display: grid; gap: 0.9rem;
  padding: clamp(1.4rem, 4vh, 2.4rem) clamp(1rem, 2.5vw, 2rem);
  border-left: var(--rule) solid var(--line);
  transition: background var(--t-mid) var(--ease);
}
.domains li:first-child { border-left: 0; padding-left: 0; }
.domains li:hover { background: rgba(var(--rgb-ink), 0.035); }
.domains__n { font: 500 0.62rem/1 var(--mono); letter-spacing: 0.2em; color: var(--fg-faint); }
.domains li > span:last-child {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t-300); white-space: nowrap;
}
@media (max-width: 700px) {
  .domains li > span:last-child { white-space: normal; }
}

/* ── who you hear from ── */

.voices__head {
  margin: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(1.5rem, 4vh, 2.25rem);
  font: 500 clamp(0.82rem, 1.4vw, 0.95rem)/1.6 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.voices {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: var(--rule) solid var(--line-hard);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
}
.voices li { display: grid; gap: 0.6rem; align-content: start; }
.voices__n {
  font: 500 0.62rem/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg-faint);
}
.voices strong {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 500; line-height: 1.24; letter-spacing: -0.01em;
  color: var(--t-100);
}
.voices li > span:last-child {
  font-size: 0.92rem; font-weight: 300; line-height: 1.55;
  color: var(--fg-dim);
}

/* ============================================================
   venue — a real building, at a real address
   ============================================================ */

.venue__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .venue__grid { grid-template-columns: 1fr; } }

.venue__shot { margin: 0; }
.venue__shot img {
  display: block; width: 100%; height: auto;
  border: var(--rule) solid var(--line-hard);
  /* the photograph is evidence here — barely graded, not ghosted */
  filter: saturate(1.04) contrast(1.02);
}
.venue__shot figcaption {
  margin-top: 0.8rem;
  font: 500 0.66rem/1.6 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}

.venue__addr {
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font: 500 clamp(1rem, 1.8vw, 1.18rem)/1.7 var(--mono);
  letter-spacing: 0.02em; color: var(--t-100);
}
.venue__links {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
}

/* what you see on site, folded into the venue rather than given its own
   section — same place, so one section */
.venue__floor {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
}
.venue__floorhead {
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  font: 500 clamp(0.82rem, 1.4vw, 0.95rem)/1.6 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.venue__floor .entry__item + .entry__item { margin-top: clamp(3rem, 8vh, 5rem); }
/* alternate the sides so the two read as a pair, not a stack */
.venue__floor .entry__item:nth-child(odd) > .entry__body { order: 2; }
.venue__floor .entry__item:nth-child(odd) > .plate { order: 1; }
@media (max-width: 820px) {
  .venue__floor .entry__item:nth-child(odd) > .entry__body,
  .venue__floor .entry__item:nth-child(odd) > .plate { order: 0; }
}

/* the plates were drawn for a dark ground; re-point them for the bright one */
.is-light .plate { border-color: var(--line-hard); background: rgba(var(--rgb-ink), 0.022); color: var(--t-500); }
.is-light .plate__note { fill: var(--t-500); }
.is-light .plate__route,
.is-light .plate__lidar path { stroke: var(--signal-deep); filter: none; }
.is-light .plate__waypoints circle { stroke: var(--t-500); }
.is-light .plate.is-in .plate__waypoints circle:nth-child(2) {
  stroke: var(--signal-deep); fill: rgba(0, 121, 74, 0.18);
}
.is-light .entry__body h3 { color: var(--t-050); }
.is-light .entry__num { color: var(--signal-ink); }

/* ============================================================
   access gate — request, review, confirmation
   ============================================================ */

.gate {
  list-style: none; margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: var(--rule) solid var(--line-hard);
}
.gate__step {
  position: relative;
  padding-top: clamp(1.5rem, 4vh, 2.25rem);
}
.gate__step::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 2.75rem; height: 2px; background: var(--signal-deep);
}
.gate__n {
  display: block; margin-bottom: 0.9rem;
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg-faint);
}
.gate__step h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--t-050);
}
.gate__step p {
  margin: 0; max-width: 30ch;
  font-size: 0.92rem; font-weight: 300; color: var(--fg-dim);
}

/* ============================================================
   decision — machined bezel
   ============================================================ */

.close { padding-block: clamp(7rem, 20vh, 13rem); }
.close__inner { max-width: 62rem; }
.close__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}
.close__note {
  font: 400 0.74rem/1.6 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-600);
}

.bezel {
  position: relative; display: inline-block;
  padding: 5px;
  border: var(--rule) solid rgba(var(--rgb-ink), 0.2);
  background: linear-gradient(160deg, rgba(var(--rgb-ink), 0.05), rgba(var(--rgb-ink), 0.01));
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.bezel__inner {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 1.2rem 2.2rem;
  border: var(--rule) solid rgba(0, 160, 99, 0.5);
  background: rgba(0, 224, 138, 0.08);
  font: 700 0.84rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-050);
  transition: background var(--t-fast) var(--ease-switch), border-color var(--t-fast) var(--ease-switch);
}
.bezel__glyph { transition: transform var(--t-mid) var(--ease); }
.bezel:hover { border-color: rgba(0, 160, 99, 0.35); box-shadow: 0 0 30px rgba(0, 224, 138, 0.2); }
.bezel:hover .bezel__inner { background: rgba(0, 224, 138, 0.18); border-color: var(--signal-deep); }
.bezel:hover .bezel__glyph { transform: translateX(5px); }

.bezel__sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(0, 224, 138, 0.28), transparent);
  transform: translateX(-140%);
  pointer-events: none;
}
.bezel.is-in .bezel__sweep { animation: bezel-sweep 1500ms var(--ease) 300ms 1 forwards; }
@keyframes bezel-sweep {
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(320%); }
}

/* ============================================================
   footer
   ============================================================ */

.footer {
  position: relative;
  color: var(--fg-dim);
  border-top: var(--rule) solid var(--line-hard);
  padding-block: 2.25rem;
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  align-items: baseline; justify-content: space-between;
  font: 500 0.7rem/1.6 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.footer__mark { color: var(--t-100); }
.footer__dates { color: var(--signal-deep); }
.footer__meta { color: var(--t-600); }

/* ============================================================
   reveal — settle, never spring
   ============================================================ */

.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: 90ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 180ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 270ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 360ms; }
.reveal[data-reveal-delay="5"] { transition-delay: 450ms; }

/* ============================================================
   reduced motion — instruments hold still
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mark::after, .shead__rule { transform: scaleX(1); transition: none; }
  .mark--multi { background-size: 100% 2px; transition: none; }
  .status__dot, .hero__line,
  .plate__leds circle, .plate__lidar path, .plate__flow circle,
  .topo__layer--d rect, .topo__act circle,
  .bezel__sweep { animation: none; }
  .draw__g path, .draw__g rect, .plate__route, .plate__loop path,
  .topo__decision, .topo__spine path {
    stroke-dashoffset: 0 !important;
  }
  .plate__tiles rect { opacity: 1; }
  .hero__scanlines { opacity: 0.3; }
  .unify { height: auto; }
  .unify__sticky { position: relative; height: auto; padding-block: 6rem; }
  .unify__caption span { position: relative; opacity: 1; transform: none; }
  * { transition-duration: 1ms !important; }
}