/* ==========================================================================
   PRIME Lab — site.css
   Components. Every value comes from tokens.css; there is no raw colour here.
   Read brief/art-direction.md before changing anything in this file.

   Vocabulary (the park words from the bible):
     .gate        the hero            .horizon    the 1px connective line
     .land        a lab               .rail       the left wayfinding column
     .ride        a facility          .ledger     the numbers
     .tickets     the audience selector
   ========================================================================== */


/* ==========================================================================
   1. Page frame
   ========================================================================== */

body {
  background: var(--c-void);
  color: var(--c-text);
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap--wide { max-width: var(--w-wide); }
.wrap--narrow { max-width: var(--w-narrow); }

.measure { max-width: var(--w-prose); }
.measure-lead { max-width: 52ch; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  /* A <table> ignores a width smaller than its own min-content unless the
     layout is fixed, so without this the Prime Curve's hidden data table is
     423px wide and gives the whole page a horizontal scrollbar on a phone. */
  table-layout: fixed;
}

/* The rail is part of the grid, so main content is inset by its width rather
   than sliding under it. Below ~667px --rail-w resolves to 0 and it vanishes. */
main { padding-inline-start: var(--rail-w); }

.rail {
  position: fixed;
  inset-block: var(--nav-h) 0;
  inset-inline-start: 0;
  width: var(--rail-w);
  z-index: var(--z-rail);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  border-inline-end: 1px solid var(--c-line);
}

.rail__track {
  width: 1px;
  height: min(38vh, 22rem);
  background: var(--c-line-strong);
  position: relative;
  align-self: center;
}

.rail__thumb {
  position: absolute;
  inset-inline: -1px;
  top: 0;
  height: calc(var(--progress, 0) * 100%);
  background: var(--c-land);
  box-shadow: var(--glow-sm);
}

.rail__label {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-low);
  transform: rotate(180deg);
  padding-block: var(--s-5);
}

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


/* ==========================================================================
   2. Nav — one rule doing three jobs: hairline, progress, current land
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--c-void) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: transform var(--t-4) var(--ease-glide);
}

.header.is-hidden { transform: translateY(-100%); }
.header:focus-within { transform: none; }

@supports not (backdrop-filter: blur(4px)) {
  .header { background: var(--c-void); }
}

@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--c-void); backdrop-filter: none; }
}

/* The bottom hairline IS the progress bar, and it wears the current land. */
.header::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background:
    linear-gradient(to right, var(--c-land) 0 calc(var(--progress, 0) * 100%),
                    var(--c-line-strong) calc(var(--progress, 0) * 100%) 100%);
}

.header__inner {
  height: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--pad-x);
  transform: translateY(-150%);
  z-index: var(--z-skip);
  background: var(--c-base-700);
  color: var(--c-text-hi);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  transition: transform var(--t-2) var(--ease-snap);
}

.skip:focus-visible { transform: translateY(25%); }

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-variation-settings: "wdth" 108;
  font-size: var(--fs-md);
  letter-spacing: var(--track-d4);
  color: var(--c-text-hi);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__mark {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--c-land);
  border-radius: var(--r-full);
  box-shadow: var(--glow-sm);
}

.wordmark__thin { font-weight: var(--fw-thin); }

.nav { margin-inline-start: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--c-text-mid);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color var(--t-3) var(--ease-snap), border-color var(--t-3) var(--ease-snap);
}

.nav__link:hover { color: var(--c-text-hi); }

.nav__link[data-land="brain"]:hover { border-block-end-color: var(--c-brain); }
.nav__link[data-land="body"]:hover { border-block-end-color: var(--c-body); }
.nav__link[data-land="environment"]:hover { border-block-end-color: var(--c-env); }

.nav__link[aria-current="page"] {
  color: var(--c-text-hi);
  border-block-end-color: var(--c-land);
}

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

.langswitch {
  display: inline-flex;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}

.langswitch__btn {
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding-inline: var(--s-2);
  background: transparent;
  border: 0;
  color: var(--c-text-low);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--t-2) var(--ease-snap), color var(--t-2) var(--ease-snap);
}

.langswitch__btn.is-active {
  background: var(--c-base-600);
  color: var(--c-text-hi);
}

.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  padding: 0.75rem 0.6rem;
}

.burger span {
  display: block;
  height: 1px;
  background: var(--c-text);
  transition: transform var(--t-3) var(--ease-snap);
}

.burger span + span { margin-block-start: 5px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.drawer {
  background: var(--c-base-900);
  border-block-start: 1px solid var(--c-line);
  padding: var(--s-4) var(--pad-x) var(--s-6);
}

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer .nav__link {
  padding-block: var(--s-4);
  font-size: var(--fs-lg);
  border-block-end: 1px solid var(--c-line);
}

@media (max-width: 1199px) {
  .nav { display: none; }
  .burger { display: block; }
}

@media (min-width: 1200px) {
  .drawer { display: none; }
}


/* ==========================================================================
   3. The horizon — the connective device
   ========================================================================== */

.horizon {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, var(--c-line-strong), var(--c-land) 78%, transparent);
  transform-origin: left center;
}

.horizon--fade {
  background: linear-gradient(to right, transparent, var(--c-land), transparent);
}

.is-motion .horizon[data-beam] {
  transform: scaleX(0);
  transition: transform var(--t-6) var(--ease-beam);
}

.is-motion .horizon[data-beam].is-revealed { transform: scaleX(1); }


/* ==========================================================================
   4. Section anatomy — eyebrow, title, lead, substance, horizon
   ========================================================================== */

.section {
  padding-block: var(--sect-y);
  position: relative;
}

.section--lg { padding-block: var(--sect-y-lg); }
.section--tint { background: var(--c-base-900); }
.section--land { background: var(--c-land-tint); }

.sect__head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-8);
}

/* A second, quieter head inside a section: used where one section carries two ideas
   and a full section break between them would lose the connection. */
.sect__sub {
  display: grid;
  gap: var(--s-3);
  max-width: var(--w-prose);
  margin-block-end: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}

.sect__sub p { color: var(--c-text-mid); margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-land);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

.eyebrow--plain::after { display: none; }

.display {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--c-text-hi);
  margin: 0;
  text-wrap: balance;
}

.display--d1 { font-size: var(--fs-d1); letter-spacing: var(--track-gate); line-height: var(--lh-gate); }
.display--d2 { font-size: var(--fs-d2); }
.display--d3 { font-size: var(--fs-d3); }
.display--d4 { font-size: var(--fs-d4); letter-spacing: var(--track-d4); line-height: var(--lh-d4); }

:lang(nl) .display { --wdth-display: 92; }

.lead {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--c-text);
  max-width: 52ch;
  margin: 0;
}

.body-lg { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--c-text); }

/* The acronym. Set in mono because it is a reading of the mark, not a tagline, and
   the five initials carry the ink so PRIME stays visible inside the sentence. */
.acronym {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  color: var(--c-text-low);
  margin: 0;
}

.acronym b {
  font-weight: var(--fw-med);
  color: var(--c-text-hi);
}

.footer .acronym { margin-block-start: var(--s-3); }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-mono);
  color: var(--c-land);
  margin-block-start: var(--s-6);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  color: var(--c-text-mid);
}

/* Two-column split: title rail on the left, substance on the right. */
.split {
  display: grid;
  gap: var(--s-7) var(--gutter);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9) var(--s-8); }
  .split--lead-narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.split__body > * + * { margin-block-start: var(--s-5); }

.split--spaced { margin-block-start: var(--s-8); }


/* ==========================================================================
   5. Buttons and tags
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-text-hi);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-2) var(--ease-snap), background var(--t-2) var(--ease-snap);
}

.btn::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 1px solid currentColor;
  border-block-start: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-3) var(--ease-glide);
}

.btn:hover { border-color: var(--c-line-hover); background: var(--c-base-700); }
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.btn--primary {
  background: var(--c-land-tint);
  border-color: var(--c-land);
  color: var(--c-text-hi);
  box-shadow: var(--glow-land);
}

.btn--primary:hover { background: var(--c-base-600); border-color: var(--c-land); }

.btn--lg { min-height: 3.25rem; padding-inline: var(--s-6); font-size: var(--fs-md); }
.btn--sm { min-height: var(--target-min); padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
.btn--sm::after { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
}

.actions--tight { margin-block-start: var(--s-4); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-mid);
}

.tag[data-land="brain"] { color: var(--c-brain); border-color: color-mix(in srgb, var(--c-brain) 40%, transparent); }
.tag[data-land="body"] { color: var(--c-body); border-color: color-mix(in srgb, var(--c-body) 40%, transparent); }
.tag[data-land="environment"] { color: var(--c-env); border-color: color-mix(in srgb, var(--c-env) 40%, transparent); }
.tag[data-status="planned"] { color: var(--c-status-planned); border-color: color-mix(in srgb, var(--c-status-planned) 40%, transparent); }
.tag[data-status="exploring"] { color: var(--c-status-exploring); border-color: color-mix(in srgb, var(--c-status-exploring) 40%, transparent); }
.tag[data-knvb] { color: var(--c-knvb); border-color: color-mix(in srgb, var(--c-knvb) 40%, transparent); }

/* Status is shape first, colour second — three distinct silhouettes. */
.dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--r-full);
  flex: none;
}

.dot[data-status="live"] { background: var(--c-status-live); }
.dot[data-status="planned"] {
  background: linear-gradient(to right, var(--c-status-planned) 50%, transparent 50%);
  border: 1px solid var(--c-status-planned);
}
.dot[data-status="exploring"] {
  border: 1px dashed var(--c-status-exploring);
}


/* ==========================================================================
   6. The Gate (hero)
   ========================================================================== */

.gate {
  position: relative;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-8);
  display: grid;
  align-content: center;
  overflow: hidden;
  isolation: isolate;
}

.gate__sky {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;
}

.gate__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.85) contrast(1.05);
}

.gate__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--c-void) 0%, color-mix(in srgb, var(--c-void) 55%, transparent) 22%, transparent 62%, var(--c-void) 100%),
    linear-gradient(to right, var(--c-void) 0%, color-mix(in srgb, var(--c-void) 40%, transparent) 42%, transparent 78%);
}

/* Three blooms below the horizon — the lands, lit up in the distance. */
.bloom {
  position: absolute;
  inset-block-start: var(--horizon-y);
  width: var(--bloom-size);
  height: var(--bloom-size);
  translate: -50% -30%;
  border-radius: var(--r-full);
  opacity: var(--bloom-opacity);
  filter: blur(60px);
  transition: opacity var(--t-5) var(--ease-beam);
  pointer-events: none;
}

/* The bloom core mixes a little of the land's key colour into its deep tone: the deep
   tones alone are dark enough to disappear entirely once blurred over a photograph. */
.bloom[data-land="brain"] {
  inset-inline-start: 20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-brain) 26%, var(--c-brain-deep)), transparent 64%);
}

.bloom[data-land="body"] {
  inset-inline-start: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-body) 22%, var(--c-body-deep)), transparent 64%);
}

.bloom[data-land="environment"] {
  inset-inline-start: 80%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-env) 22%, var(--c-env-deep)), transparent 64%);
}

.is-motion .bloom { animation: drift var(--t-amb) var(--ease-drift) infinite alternate; }
.is-motion .bloom[data-land="body"] { animation-duration: calc(var(--t-amb) * 1.4); }
.is-motion .bloom[data-land="environment"] { animation-duration: calc(var(--t-amb) * 1.8); }

@keyframes drift {
  from { translate: -50% -30%; }
  to { translate: -46% -34%; }
}

.gate:has(.landgate[data-land="brain"]:hover) .bloom[data-land="brain"],
.gate:has(.landgate[data-land="body"]:hover) .bloom[data-land="body"],
.gate:has(.landgate[data-land="environment"]:hover) .bloom[data-land="environment"] {
  opacity: calc(var(--bloom-opacity) * 1.3);
}

.gate__horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--horizon-y);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-text-low) 14%, var(--c-text-low) 86%, transparent);
  opacity: 0.7;
  z-index: var(--z-horizon);
}

/* A soft floor glow just under the line, so the horizon reads as a lit edge
   rather than as a border someone drew across the photograph. */
.gate__horizon::after {
  content: "";
  position: absolute;
  inset-inline: 10%;
  inset-block-start: 0;
  height: 14vh;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-text-hi) 10%, transparent), transparent);
  pointer-events: none;
}

.gate__body {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  gap: var(--s-5);
}

/* PRIME standing on the horizon with its own reflection under it. The display face
   overshoots its box at --lh-gate, so the reflection is pushed down by the overshoot
   rather than sitting at 100% — otherwise it prints straight through the headline. */
.gate__title {
  position: relative;
  margin: 0;
  padding-block-end: 0.1em;
}

.gate__title .display--d1 { display: block; }

.gate__reflection {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% - 0.06em);
  display: block;
  color: var(--c-text-low);
  opacity: 0.16;
  transform: scaleY(-0.45);
  transform-origin: top;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.7), transparent 62%);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 719px) {
  .gate__reflection { display: none; }
}

/* On a phone the gate's content is taller than the screen, so it stops trying to be a
   full-height stage and simply becomes the top of the page. Centring a stack that
   overflows its own box is what pushes the headline through the section below it. */
@media (max-width: 719px) {
  .gate {
    min-height: auto;
    padding-block: calc(var(--nav-h) + var(--s-7)) var(--s-8);
    align-content: start;
  }

  .gate__hint { display: none; }
}

.gate__hint {
  position: absolute;
  inset-block-end: var(--s-6);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-content);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-low);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.gate__hint::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(45deg);
}

.is-motion .gate__hint::after { animation: bob 2.4s var(--ease-drift) infinite; }

@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}

/* The three land gates: columns divided by rules, never cards. */
.landgates {
  display: grid;
  grid-template-columns: 1fr;
  margin-block-start: var(--s-7);
  border-block-start: 1px solid var(--c-line-strong);
}

@media (min-width: 720px) {
  .landgates { grid-template-columns: repeat(3, 1fr); }
}

.landgate {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  text-decoration: none;
  color: var(--c-text-mid);
  border-block-end: 1px solid var(--c-line);
}

@media (min-width: 720px) {
  .landgate { border-block-end: 0; padding-inline: var(--s-5); }
  .landgate:first-child { padding-inline-start: 0; }
  .landgate + .landgate { border-inline-start: 1px solid var(--c-line-strong); }
}

.landgate::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  height: 3px;
  width: 2.5rem;
  background: var(--c-land);
  transition: width var(--t-3) var(--ease-beam);
}

.landgate:hover::before,
.landgate:focus-visible::before { width: 100%; }

.landgate__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: var(--fw-bold);
  font-size: var(--fs-d4);
  line-height: var(--lh-d4);
  color: var(--c-text-hi);
}

.landgate__theme {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-land);
}

.landgate__spec {
  font-size: var(--fs-sm);
  color: var(--c-text-mid);
}


/* ==========================================================================
   7. The Prime Curve
   ========================================================================== */

.curve {
  display: grid;
  gap: var(--s-5);
  margin: 0;
}

.curve__figure { position: relative; }
.curve svg { display: block; width: 100%; height: auto; overflow: visible; }

.curve__axisline,
.curve__axis line { stroke: var(--c-line-strong); stroke-width: 1; }

.curve__axis text {
  font-family: var(--font-mono);
  font-size: 15px;
  fill: var(--c-text-low);
}

.curve__label {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-med);
  fill: var(--c-text);
}

.curve__years {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--c-text-low);
  opacity: 0;
  transition: opacity var(--t-3) var(--ease-snap);
}

/* One band per capacity. Colour says which domain it belongs to, so the figure
   doubles as the site's colour legend — introduced before the lands themselves. */
.curve__bar { fill: var(--c-land); }
.curve__glow { fill: var(--c-land); opacity: 0.18; filter: blur(6px); }

.curve__band[data-domain="brain"] { --c-land: var(--c-brain); }
.curve__band[data-domain="body"] { --c-land: var(--c-body); }
.curve__band[data-domain="environment"] { --c-land: var(--c-env); }

.curve__band > * { transition: opacity var(--t-3) var(--ease-snap); }

.curve.is-focused .curve__band { opacity: 0.3; }
.curve.is-focused .curve__band.is-lit { opacity: 1; }
.curve__band.is-lit .curve__years { opacity: 1; }
.curve__band.is-lit .curve__glow { opacity: 0.34; }

/* The focus ring, two-tone, drawn as geometry because SVG children take neither
   box-shadow nor a usefully-shaped outline. Both rects are inert until focus. */
.curve__ring { fill: none; stroke: none; pointer-events: none; }
.curve__band:focus-visible .curve__ring--halo { stroke: var(--c-focus); stroke-width: 2; }
.curve__band:focus-visible .curve__ring--core { stroke: var(--c-focus-core); stroke-width: 2; }

.curve__bradyline { stroke: var(--c-knvb); stroke-width: 1; stroke-dasharray: 2 5; }
.curve__bradydot { fill: var(--c-knvb); }
.curve__bradylabel { font-family: var(--font-mono); font-size: 14px; fill: var(--c-knvb); }

.curve__bradynote {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  line-height: var(--lh-mono);
  color: var(--c-knvb);
  margin: 0;
}

/* The beam-in: bands wipe open from their own left edge, in age order. */
.is-motion .curve__band .curve__bar,
.is-motion .curve__band .curve__glow {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-6) var(--ease-beam) var(--beam-delay, 0ms), opacity var(--t-3) var(--ease-snap);
}

.is-motion .curve.is-drawn .curve__band .curve__bar,
.is-motion .curve.is-drawn .curve__band .curve__glow { transform: scaleX(1); }

.curve__readout {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-mid);
  min-height: 1.5em;
  margin: 0;
}

.curve__note { font-size: var(--fs-sm); color: var(--c-text-low); margin: 0; }

/* Type sizes belong to the geometry, not to the viewport: the narrow build has its
   own viewBox, so it states its own sizes and they land at roughly the same optical
   size on screen as the wide build does. */
/* The narrow build is sized for a phone, so it is capped rather than allowed to
   scale up into a tablet column where 20px units would render at nearly 30px. */
.curve svg[data-layout="narrow"] { max-width: 30rem; }
.curve svg[data-layout="narrow"] .curve__label { font-size: 20px; }
.curve svg[data-layout="narrow"] .curve__years { font-size: 18px; }
.curve svg[data-layout="narrow"] .curve__axis text { font-size: 18px; }

/* Between --bp-sm and --bp-md the wide viewBox is drawn at its smallest scale, which
   is where the capacity names would otherwise fall to about 11px. */
@media (min-width: 720px) and (max-width: 959px) {
  .curve svg[data-layout="wide"] .curve__label { font-size: 22px; }
  .curve svg[data-layout="wide"] .curve__years,
  .curve svg[data-layout="wide"] .curve__axis text,
  .curve svg[data-layout="wide"] .curve__bradylabel { font-size: 19px; }
}


/* ==========================================================================
   8. The lab triptych
   ========================================================================== */

.triptych {
  display: grid;
  grid-template-columns: 1fr;
  border-block: 1px solid var(--c-line);
}

@media (min-width: 960px) {
  .triptych { grid-template-columns: repeat(3, 1fr); }
}

.land {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-land-tint);
  transition: filter var(--t-4) var(--ease-snap), background var(--t-4) var(--ease-snap);
}

.land + .land { border-block-start: 1px solid var(--c-line); }

@media (min-width: 960px) {
  .land + .land { border-block-start: 0; border-inline-start: 1px solid var(--c-line); }
}

.land::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--c-land);
}

.land.is-dim { filter: saturate(0.4) brightness(0.72); }

.land__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-void);
}

.land__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity var(--t-4) var(--ease-snap), scale var(--t-6) var(--ease-glide);
}

.land:hover .land__img { opacity: 0.8; scale: 1.03; }

.land__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-5) var(--ease-beam);
}

.land__canvas.is-live { opacity: 1; }

.land__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: var(--fw-black);
  font-size: var(--fs-d4);
  line-height: var(--lh-d4);
  color: var(--c-text-hi);
}

.land__theme {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-land);
}

.land__claim {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 96;
  font-weight: var(--fw-med);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--c-text);
}

.land__text { color: var(--c-text-mid); font-size: var(--fs-sm); line-height: var(--lh-body); }

.land__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  border-block-start: 1px solid var(--c-line);
  padding-block-start: var(--s-4);
}

.land__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-mid);
}

.land__list li span:last-child { margin-inline-start: auto; color: var(--c-text-low); }

.land__go {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--c-text-hi);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.land__go::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 1px solid currentColor;
  border-block-start: 1px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--t-3) var(--ease-glide);
}

.land:hover .land__go::after { translate: 3px 0; }


/* ==========================================================================
   9. The Ticket Hall — audience selector
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}

.chip {
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-5);
  background: var(--c-base-800);
  border: 1px solid var(--c-line-strong);
  border-block-end-width: 2px;
  border-radius: var(--r-2);
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  cursor: pointer;
  transition: background var(--t-2) var(--ease-snap), color var(--t-2) var(--ease-snap);
}

.chip:hover { background: var(--c-base-700); color: var(--c-text-hi); }

.chip.is-active {
  background: var(--c-base-600);
  border-block-end-color: var(--c-text-hi);
  color: var(--c-text-hi);
}

.context {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--c-text-hi);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: var(--fw-med);
  margin: var(--s-6) 0;
  min-height: 3em;
}

.mechs {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--c-line-strong);
}

@media (min-width: 720px) { .mechs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mechs { grid-template-columns: repeat(4, 1fr); } }

.mech {
  padding: var(--s-5);
  border-block-end: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

@media (min-width: 720px) {
  .mech { border-inline-start: 1px solid var(--c-line); }
  .mech:first-child { border-inline-start: 0; }
}

.mech__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text-hi);
  margin: 0;
}

.mech__body { font-size: var(--fs-sm); color: var(--c-text-mid); margin: 0; }

.mech__example {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text);
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--c-line-strong);
}

.mech__route {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  gap: var(--s-2);
}

.mech__route[data-land="brain"] { color: var(--c-brain); }
.mech__route[data-land="body"] { color: var(--c-body); }
.mech__route[data-land="environment"] { color: var(--c-env); }


/* ==========================================================================
   10. Tables — the catalogue and the ledger
   ========================================================================== */

.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-low);
  padding-block-end: var(--s-4);
}

.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-low);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--c-line-strong);
  white-space: nowrap;
  background: var(--c-base-900);
}

.table td {
  padding: var(--s-4);
  border-block-end: 1px solid var(--c-line);
  color: var(--c-text);
  vertical-align: top;
}

.table tbody tr {
  transition: background var(--t-2) var(--ease-snap);
  border-inline-start: 2px solid transparent;
}

.table tbody tr:hover,
.table tbody tr.is-lit { background: var(--c-base-700); }

.table tbody tr[data-land="brain"]:hover { box-shadow: inset 2px 0 0 var(--c-brain); }
.table tbody tr[data-land="body"]:hover { box-shadow: inset 2px 0 0 var(--c-body); }
.table tbody tr[data-land="environment"]:hover { box-shadow: inset 2px 0 0 var(--c-env); }

.table .num { text-align: right; white-space: nowrap; }
.table .name { color: var(--c-text-hi); font-weight: var(--fw-med); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  white-space: nowrap;
}

@media (max-width: 719px) {
  .table--reflow thead { display: none; }
  .table--reflow tr {
    display: grid;
    gap: var(--s-1);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--c-line);
  }
  .table--reflow td { border: 0; padding: 0; display: flex; gap: var(--s-3); }
  .table--reflow td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-low);
    min-width: 8rem;
  }
  .table--reflow .num { text-align: left; }
}

/* The ledger's composition bar, linked both ways with the table. */
.compbar {
  display: flex;
  width: 100%;
  height: 2.5rem;
  border: 1px solid var(--c-line-strong);
  margin-block: var(--s-6) var(--s-3);
}

.compbar__seg {
  background: var(--c-base-600);
  border: 0;
  border-inline-end: 1px solid var(--c-void);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-2) var(--ease-snap);
}

.compbar__seg:last-child { border-inline-end: 0; }
.compbar__seg:hover,
.compbar__seg.is-lit { background: var(--c-plaus-strong); }
.compbar__seg[data-plaus="depends"]:hover, .compbar__seg[data-plaus="depends"].is-lit { background: var(--c-plaus-depends); }
.compbar__seg[data-plaus="ambitious"]:hover, .compbar__seg[data-plaus="ambitious"].is-lit { background: var(--c-plaus-ambitious); }
.compbar__seg[data-plaus="growth"]:hover, .compbar__seg[data-plaus="growth"].is-lit { background: var(--c-plaus-growth); }

.ledger__total {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: var(--fw-black);
  font-size: var(--fs-d2);
  line-height: var(--lh-display);
  color: var(--c-text-hi);
  font-variant-numeric: tabular-nums;
  margin: 0;
}


/* ==========================================================================
   11. Rides — facility detail blocks, kit lists, tiles
   ========================================================================== */

.kit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

@media (min-width: 720px) { .kit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .kit { grid-template-columns: repeat(3, 1fr); } }

.kit__item {
  background: var(--c-base-800);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  transition: background var(--t-3) var(--ease-snap);
}

.kit__item:hover { background: var(--c-base-700); }

.kit__item h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text-hi);
  margin: 0;
}

.kit__item p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mid); }

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 720px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

.tile {
  border-block-start: 2px solid var(--c-land);
  padding-block-start: var(--s-4);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.tile h3 { margin: 0; font-size: var(--fs-lg); color: var(--c-text-hi); font-weight: var(--fw-semi); }
.tile p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mid); }

.figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 720px) { .figures { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }

.figure__value {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: var(--fw-black);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  color: var(--c-text-hi);
  font-variant-numeric: tabular-nums;
}

.figure__label { font-size: var(--fs-sm); color: var(--c-text-mid); }

/* "Prime is also a verb" is a sentence, not a measurement, so it is body type
   doing the explaining rather than a third display element competing with the
   section title and the figure for the same screen. */
.verb {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-line-strong);
}

.verb__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--c-text-hi);
}

.verb__body { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mid); }


/* ==========================================================================
   12. Full-bleed plates
   ========================================================================== */

.plate {
  position: relative;
  min-height: 60svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.plate--tall { min-height: 84svh; }

.plate__img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  z-index: var(--z-below);
  translate: 0 var(--parallax, 0px);
  opacity: 0.55;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background: linear-gradient(to top, var(--c-void) 6%, color-mix(in srgb, var(--c-void) 55%, transparent) 55%, var(--c-void) 100%);
}

.plate__body {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--s-9);
  display: grid;
  gap: var(--s-5);
}

.shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--c-base-900);
  border: 1px solid var(--c-line);
}

.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--portrait { aspect-ratio: 4 / 5; }

/* Four scenes, uncropped. These plates were shot 16:9 with the subject to one side and
   air on the other; forcing them into a portrait cell cuts the subject out, which is
   exactly the thing the section is trying to show. So the frame matches the plate and
   each one is captioned — the picture no longer has to carry the label on its own. */
.scenes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 720px) {
  .scenes { grid-template-columns: repeat(2, 1fr); }
}

.scene-cell {
  position: relative;
  margin: 0;
  border: 1px solid var(--c-line);
  background: var(--c-void);
  overflow: hidden;
}

.scene-cell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.scene-cell__label {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-hi);
  background: linear-gradient(to top, var(--c-void), color-mix(in srgb, var(--c-void) 60%, transparent) 55%, transparent);
}


/* ==========================================================================
   13. Quotes, people, closing
   ========================================================================== */

.quote { margin: 0; display: grid; gap: var(--s-4); }

.quote__text {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 96;
  font-weight: var(--fw-med);
  font-size: var(--fs-d4);
  line-height: var(--lh-d4);
  letter-spacing: var(--track-d4);
  color: var(--c-text-hi);
  margin: 0;
}

.quote__name { font-weight: var(--fw-semi); color: var(--c-text-hi); margin: 0; }
.quote__line { color: var(--c-text-mid); font-size: var(--fs-sm); margin: 0; }

.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--c-line-strong);
}

@media (min-width: 960px) { .people { grid-template-columns: repeat(3, 1fr); } }

.person {
  padding: var(--s-6) var(--s-5);
  border-block-end: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  position: relative;
}

@media (min-width: 960px) {
  .person { border-block-end: 0; }
  .person + .person { border-inline-start: 1px solid var(--c-line); }
}

.person::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--c-land);
}

.person__name { margin: 0; font-size: var(--fs-lg); color: var(--c-text-hi); font-weight: var(--fw-semi); }
.person__role { margin: 0; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-land); }
.person__line { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mid); }

.labswitch {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--c-line-strong);
  margin-block-start: var(--s-9);
}

@media (min-width: 720px) { .labswitch { grid-template-columns: repeat(2, 1fr); } }

.labswitch__link {
  padding: var(--s-6) var(--pad-x);
  text-decoration: none;
  display: grid;
  gap: var(--s-2);
  border-block-end: 1px solid var(--c-line);
  transition: background var(--t-3) var(--ease-snap);
}

.labswitch__link:hover { background: var(--c-land-tint); }

@media (min-width: 720px) {
  .labswitch__link + .labswitch__link { border-inline-start: 1px solid var(--c-line); }
}

.labswitch__label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-land); }
.labswitch__name { font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: var(--fw-bold); font-size: var(--fs-d4); color: var(--c-text-hi); }


/* ==========================================================================
   14. Scene canvases and their posters
   ========================================================================== */

.scene {
  position: relative;
  margin-block: var(--s-7);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-void);
  isolation: isolate;
}

.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-5) var(--ease-beam);
}

.scene__canvas.is-live { opacity: 1; }

.scene__poster {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}

/* BRAIN poster: a stippled cortex with three photon arcs. */
.poster--brain {
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--c-brain-deep) 70%, transparent), transparent 58%),
    var(--c-void);
}

.poster--brain::before {
  content: "";
  position: absolute;
  inset: 18% 22%;
  border-radius: 50%;
  background-image: radial-gradient(var(--c-brain) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
  opacity: 0.35;
}

/* BODY poster: a projected floor grid in perspective with a heat spot. */
.poster--body { background: var(--c-void); }

.poster--body::before {
  content: "";
  position: absolute;
  inset: var(--horizon-y) -40% -10% -40%;
  background:
    repeating-linear-gradient(to right, var(--c-line-strong) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--c-line-strong) 0 1px, transparent 1px 48px);
  transform: perspective(400px) rotateX(72deg);
  transform-origin: top center;
  opacity: 0.55;
}

.poster--body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 42% 76%, color-mix(in srgb, var(--c-body) 55%, transparent), transparent 42%);
}

/* ENVIRONMENT poster: LED pixel pitch fading toward a horizon. */
.poster--environment {
  background:
    radial-gradient(ellipse at 50% var(--horizon-y), color-mix(in srgb, var(--c-env-deep) 90%, transparent), var(--c-void) 70%);
}

.poster--environment::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--c-env) 40%, transparent) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-env) 40%, transparent) 0 2px, transparent 2px 6px);
  mask-image: linear-gradient(to bottom, transparent 18%, rgb(0 0 0 / 0.9) var(--horizon-y), transparent 92%);
  opacity: 0.5;
}

.poster__horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--horizon-y);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-land), transparent);
}


/* ==========================================================================
   15. Footer
   ========================================================================== */

.footer {
  border-block-start: 1px solid transparent;
  background: var(--c-base-900);
  padding-block: var(--s-9) var(--s-6);
  position: relative;
  margin-inline-start: var(--rail-w);
}

.footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 6rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-land) 55%, transparent), transparent);
  opacity: 0.25;
  pointer-events: none;
}

.footer__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 960px) { .footer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

.footer__wordmark {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: var(--fw-black);
  font-size: var(--fs-d4);
  color: var(--c-text-hi);
  margin: 0;
}

.footer__claim { color: var(--c-text); margin: var(--s-3) 0 0; max-width: 32ch; }
.footer__meta { color: var(--c-text-low); font-size: var(--fs-sm); margin: var(--s-3) 0 0; }

.footer__nav {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.footer__head {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-low);
  margin: 0 0 var(--s-3);
}

.footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer__nav a, .footer__nav span { font-size: var(--fs-sm); color: var(--c-text-mid); text-decoration: none; }
.footer__nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.footer__nav a:hover { color: var(--c-text-hi); }

.footer__base {
  max-width: var(--w-content);
  margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--pad-x) 0;
  border-block-start: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-mono);
  color: var(--c-text-low);
}


/* ==========================================================================
   16. Reveals — RAISE, and its reduced form
   ========================================================================== */

[data-reveal] { opacity: 0; }

.is-motion [data-reveal] {
  transform: translateY(24px);
  transition:
    opacity var(--t-5) var(--ease-settle) var(--reveal-delay, 0ms),
    transform var(--t-5) var(--ease-settle) var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* No JS, no motion preference, or an old browser: nothing may stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; transition: opacity 120ms linear; }
}


/* ==========================================================================
   17. Print — the jury prints this
   ========================================================================== */

@media print {
  .header, .rail, .gate__sky, .scene__canvas, .drawer, .progress { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .plate { min-height: 0; }
  .plate__img { display: none; }
}


/* ==========================================================================
   18. Page instruments
   Added for audiences / facilities / platform / goals / visit. Nothing here
   is a new look — it is the plumbing four specified components need:
   the Ticket Hall's SWITCH, the catalogue filters, the campus map, the
   plausibility marks and the contact form. Tokens only, no raw values.
   ========================================================================== */

/* ── The Ticket Hall ───────────────────────────────────────────────────────
   Only the fragments that genuinely change are animated. The four mechanism
   headings sit outside every [data-panel], so they cannot move by a pixel —
   that stillness is the argument the component makes. */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  text-align: center;
}

.hall [data-panel].is-active {
  animation: switch-in var(--t-4) var(--ease-snap) both;
}

@keyframes switch-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hall [data-panel].is-active { animation: none; }
}

.hall .context { max-width: 24ch; }
.hall .mech__example { min-height: 3.5em; }

/* ── Filter bars ─────────────────────────────────────────────────────────── */

.filters {
  display: grid;
  gap: var(--s-5);
  margin-block-end: var(--s-6);
}

@media (min-width: 960px) {
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-8); }
}

.filters__set { display: grid; gap: var(--s-3); align-content: start; }
.filters__set .chips { margin-block-end: 0; }

.filters__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-mid);
  margin: 0;
}

.chip--sm { padding-inline: var(--s-4); font-size: var(--fs-xs); }

.count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  color: var(--c-text-mid);
  margin-block-start: var(--s-4);
}

/* ── Catalogue table extras ──────────────────────────────────────────────── */

.table__note {
  display: block;
  margin-block-start: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-reg);
  color: var(--c-text-mid);
}

.table .cell-status { white-space: nowrap; }
.table .cell-spec { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-mid); }

/* ── Plausibility marks — four silhouettes, never colour alone ───────────── */

.dot[data-plaus="strong"] { background: var(--c-plaus-strong); }

.dot[data-plaus="depends"] {
  background: linear-gradient(to right, transparent 50%, var(--c-plaus-depends) 50%);
  border: 1px solid var(--c-plaus-depends);
}

.dot[data-plaus="ambitious"] { border: 2px solid var(--c-plaus-ambitious); }
.dot[data-plaus="growth"] { border: 1px dashed var(--c-plaus-growth); }
.dot[data-plaus="other"] { border: 1px solid var(--c-text-low); }

/* ── The Ledger's composition bar ────────────────────────────────────────── */

.compbar { height: 2.75rem; min-width: 34rem; }

.compbar__seg {
  flex: var(--seg, 1) 1 0;
  min-width: 0.75rem;
  position: relative;
}

.compbar__seg:focus-visible { z-index: var(--z-content); }

.compbar__readout {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  color: var(--c-text-mid);
  min-height: 1.6em;
  margin: 0;
}

.compbar__readout span { display: none; }
.compbar__readout span.is-lit { display: inline; color: var(--c-text-hi); }
.compbar__readout:not(.has-lit) [data-line-name="none"] { display: inline; }

/* ── The Map ─────────────────────────────────────────────────────────────── */

.map { display: grid; gap: var(--s-7); }

@media (min-width: 960px) {
  .map { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
}

.map__plan {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-base-900);
}

/* Below 960px the plan is decoration that no longer fits; the list is the content. */
@media (max-width: 959px) { .map__plan { display: none; } }

.map__plate {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  opacity: 0.18;
  translate: 0 var(--parallax, 0px);
  z-index: var(--z-below);
}

.map__svg { position: relative; display: block; width: 100%; height: auto; }

.map__svg .zone { fill: none; stroke-width: 2; }
.map__svg .zone[data-zone-land="brain"] { stroke: var(--c-brain); }
.map__svg .zone[data-zone-land="body"] { stroke: var(--c-body); }
.map__svg .zone[data-zone-land="environment"] { stroke: var(--c-env); }
.map__svg .zone[data-zone-land="none"] { stroke: var(--c-line-hover); }

/* Dashed KNVB orange, and only here, means: this building already exists. */
.map__svg .zone--existing { stroke: var(--c-knvb); stroke-width: 1; stroke-dasharray: 5 4; }

.map__svg .zonelabel {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: -0.01em;
  fill: var(--c-text-hi);
}

.map__svg .zoneitem { font-family: var(--font-mono); font-size: 9.5px; fill: var(--c-text-mid); }
.map__svg .zonenum { font-family: var(--font-mono); font-size: 11px; fill: var(--c-knvb); }

.map__svg .zonegroup { transition: opacity var(--t-3) var(--ease-snap); }
.map__svg.has-lit .zonegroup { opacity: 0.3; }
.map__svg.has-lit .zonegroup.is-lit { opacity: 1; }
.map__svg .zonegroup.is-lit .zone { stroke-width: 3; }
.map__svg .zonegroup.is-lit .zone--existing { stroke-width: 2; }

.maplist { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-line-strong); }
.maplist__item { border-block-end: 1px solid var(--c-line); }

.maplist__btn {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-4) var(--s-2);
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-2) var(--ease-snap);
}

.maplist__btn:hover,
.maplist__item.is-lit .maplist__btn { background: var(--c-base-700); }

.maplist__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-knvb); }
.maplist__name { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-text-hi); }
.maplist__meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--c-text-mid); white-space: nowrap; }
.maplist__note { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--c-text-mid); }

.legend {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-mid);
}

.legend li { display: flex; align-items: center; gap: var(--s-3); }
.legend__swatch { width: 1.5rem; height: 0.75rem; border: 2px solid var(--c-text-mid); flex: none; }
.legend__swatch--existing { border: 1px dashed var(--c-knvb); }

/* ── Platform: 27 functions, grouped so they can be scanned ──────────────── */

.fgroups { display: grid; gap: var(--s-7); }

@media (min-width: 720px)  { .fgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fgroups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fgroup__title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-hi);
  margin: 0 0 var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--c-line-strong);
}

.fgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.fgroup li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-text-mid); }

.fgroup li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-block-start: 0.6em;
  background: var(--c-land);
  flex: none;
}

/* ── Visit: the contact form. A real mailto, never a fake POST ───────────── */

.form { display: grid; gap: var(--s-5); max-width: 42rem; }

.field { display: grid; gap: var(--s-2); }

.field__label,
.form fieldset legend {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-mid);
  padding: 0;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-4);
  background: var(--c-base-800);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2);
  color: var(--c-text-hi);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  transition: border-color var(--t-2) var(--ease-snap);
}

.field textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }
.field input:hover, .field textarea:hover { border-color: var(--c-line-hover); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-low); }

.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }

.options { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.option {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  background: var(--c-base-800);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--t-2) var(--ease-snap), border-color var(--t-2) var(--ease-snap);
}

.option:hover { background: var(--c-base-700); }
.option input { width: 1rem; height: 1rem; accent-color: var(--c-focus); flex: none; }
.option:has(input:checked) { background: var(--c-base-600); border-color: var(--c-text-hi); color: var(--c-text-hi); }
.option:has(input:focus-visible) { outline: 2px solid var(--c-focus-core); outline-offset: 2px; box-shadow: 0 0 0 4px var(--c-focus); }

.form__note { font-size: var(--fs-sm); color: var(--c-text-mid); max-width: var(--w-prose); }

/* Kit items that end in an action should not stretch the button across the cell. */
.kit__item .btn, .tile .btn { justify-self: start; }

/* Spacing utilities used between blocks inside a section. */
.stack    { margin-block-start: var(--s-6); }
.stack--lg { margin-block-start: var(--s-7); }
.stack--xl { margin-block-start: var(--s-8); }

/* A zone needs a hit area, but must not read as a filled shape: a fill at 1%%
   opacity gives the pointer something to find and the eye nothing to see. */
.map__svg .zone { fill: var(--c-void); fill-opacity: 0.01; }

/* ── 18b. What the narrow viewport does to these components ──────────────── */

/* In the reflowed table the facility name is the block heading, so it drops its
   label and takes the full width instead of sharing a flex row with its note. */
@media (max-width: 719px) {
  .table--reflow td.name { display: block; padding-block-end: var(--s-2); }
  .table--reflow td.name::before { content: none; }
  .table--reflow td.name .table__note { margin-block-start: var(--s-1); }
}

/* The composition bar is a second reading of the same numbers and it needs width
   to be one. Below 720px the table carries them alone — the same call the map
   makes about its plan. */
@media (max-width: 719px) {
  .compbar, .compbar__readout { display: none; }
}

/* Hold the plan beside the list it explains while the list scrolls past it. */
@media (min-width: 960px) {
  .map__plan { position: sticky; inset-block-start: calc(var(--nav-h) + var(--s-5)); }
}

/* A four-item kit reads as two rows of two; three-and-one leaves a dead cell. */
@media (min-width: 1200px) {
  .kit--pairs { grid-template-columns: repeat(2, 1fr); }
}

/* The plausibility tiles wear their own colour on the top rule. The written
   qualifier inside still carries the meaning — the colour only confirms it. */
.tile[data-plaus="strong"]    { border-block-start-color: var(--c-plaus-strong); }
.tile[data-plaus="depends"]   { border-block-start-color: var(--c-plaus-depends); }
.tile[data-plaus="ambitious"] { border-block-start-color: var(--c-plaus-ambitious); }
.tile[data-plaus="growth"]    { border-block-start-color: var(--c-plaus-growth); }