:root {
  color-scheme: dark;
  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --font-mono: "DM Mono", "Cascadia Mono", monospace;
  --bg: #04060a;
  --ink: #f4f7fb;
  --muted: rgba(224, 231, 242, 0.62);
  --faint: rgba(224, 231, 242, 0.36);
  --line: rgba(220, 230, 244, 0.14);
  --line-strong: rgba(220, 230, 244, 0.26);
  --panel: rgba(9, 14, 22, 0.67);
  --accent: #92b8ff;
  --accent-rgb: 146, 184, 255;
  --fox: #ff8a4c;
  --fox-rgb: 255, 138, 76;
  --radius: 0.2rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  background: var(--bg);
}

body[data-mission="strategy"] {
  --accent: #91b7ff;
  --accent-rgb: 145, 183, 255;
}

body[data-mission="talks"] {
  --accent: #ffc278;
  --accent-rgb: 255, 194, 120;
}

body.dialog-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  color: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: #05070b;
  background: #fff;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---- Atmosphere ------------------------------------------------------- */

.atmosphere,
.atmosphere__bg,
.atmosphere__wash,
.atmosphere__light,
.atmosphere__grid,
.atmosphere__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.atmosphere {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 23%, rgba(var(--accent-rgb), 0.12), transparent 29%),
    linear-gradient(138deg, #030509 0%, #080d15 52%, #030509 100%);
  transition: background 700ms var(--ease);
}

/* Landscape ambient loop, blurred: unblurred it is a recognisable second face
   sitting behind the headline rather than texture. */
.atmosphere__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.07;
  filter: grayscale(0.5) saturate(0.7) contrast(1.05) brightness(0.6) blur(16px);
  transform: scale(1.12);
  transition: opacity 500ms ease;
}

.video-unavailable .atmosphere__bg {
  opacity: 0;
}

.atmosphere__wash {
  background:
    radial-gradient(ellipse at 62% 38%, transparent 0 16%, rgba(4, 6, 10, 0.42) 52%, #04060a 90%),
    linear-gradient(180deg, rgba(4, 6, 10, 0.55) 0%, rgba(4, 6, 10, 0.2) 40%, rgba(4, 6, 10, 0.78) 100%);
}

.atmosphere__light {
  opacity: 0.6;
  background:
    linear-gradient(108deg, transparent 0 50%, rgba(var(--accent-rgb), 0.045) 50.1% 50.3%, transparent 50.4%),
    radial-gradient(ellipse at 58% 49%, rgba(var(--accent-rgb), 0.08), transparent 48%);
}

.atmosphere__grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0, transparent 76%);
}

.atmosphere__grain {
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.orb {
  position: fixed;
  width: 24rem;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color 600ms ease, transform 900ms var(--ease);
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: inherit;
  border-radius: inherit;
}

.orb::after {
  inset: 42%;
}

.orb--one {
  top: 16vh;
  right: -10rem;
}

.orb--two {
  bottom: -15rem;
  left: 25%;
  width: 31rem;
  opacity: 0.32;
}

body[data-mission="strategy"] .orb--one {
  transform: rotate(18deg) scale(1.08);
}

body[data-mission="talks"] .orb--one {
  transform: rotate(-18deg) scale(0.92);
}

/* ---- Shell -------------------------------------------------------------
   No z-index here on purpose. These are positioned and come after
   .atmosphere in the markup, so they already paint above it — and staying
   out of their own stacking context is what lets the hero video's
   screen-blend reach the backdrop instead of a transparent group. */

.site-header,
main,
.site-footer {
  position: relative;
  width: min(calc(100% - clamp(2.5rem, 8vw, 10rem)), 104rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: 500 0.63rem/1 var(--font-mono);
  letter-spacing: -0.06em;
}

.primary-nav {
  display: flex;
  gap: clamp(1.1rem, 2vw, 2.3rem);
  color: var(--muted);
  font-size: 0.75rem;
}

.primary-nav a {
  position: relative;
  padding: 0.6rem 0;
  transition: color 180ms ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--ink);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Type --------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--accent);
  font: 500 0.63rem/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1 {
  max-width: 8ch;
  margin: 0;
  font-size: clamp(5rem, 9.5vw, 10rem);
  font-weight: 300;
  line-height: 0.75;
  letter-spacing: -0.075em;
}

h1 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(244, 247, 251, 0.82);
}

/* ---- 1 / Hero + the fork ------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(11rem, 0.4fr) minmax(27rem, 1fr) minmax(18rem, 0.6fr);
  align-items: end;
  min-height: calc(100svh - 6rem);
  padding: clamp(5rem, 13vh, 10rem) 0 clamp(5rem, 12vh, 9rem);
}

.hero__signal {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--faint);
  font: 400 0.62rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__signal span {
  width: 1px;
  height: 5rem;
  background: linear-gradient(transparent, var(--accent));
}

.hero__lead {
  max-width: 31rem;
  margin: clamp(2rem, 3.5vw, 3.2rem) 0 0;
  color: var(--muted);
  font-size: clamp(1.18rem, 1.7vw, 1.65rem);
  font-weight: 300;
  line-height: 1.35;
}

.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.2rem, 2.5vw, 2.6rem);
  max-width: 42rem;
  margin-top: 1.4rem;
}

.fork__lines {
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(3rem, 6vh, 4.6rem);
  overflow: visible;
}

.fork__stem,
.fork__line {
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fork-draw 1s var(--ease) 0.25s forwards;
}

.fork__stem {
  stroke: var(--line-strong);
}

.fork__line--herd {
  stroke: var(--line-strong);
  animation-delay: 0.7s;
}

.fork__line--fox {
  stroke: var(--fox);
  animation-delay: 0.95s;
  filter: drop-shadow(0 0 0.5rem rgba(var(--fox-rgb), 0.35));
}

@keyframes fork-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.fork__path {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  font-weight: 300;
  line-height: 1.45;
}

.fork__path--herd {
  color: var(--faint);
}

.fork__path--fox {
  border-top-color: rgba(var(--fox-rgb), 0.5);
  color: var(--ink);
}

.fork__path--fox b {
  color: var(--fox);
  font-weight: 500;
}

.scroll-cue {
  display: grid;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 1;
  margin-top: clamp(2rem, 4vh, 3rem);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--faint);
  font-size: 0.95rem;
  transition: color 200ms ease, border-color 200ms ease;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.scroll-cue span {
  animation: cue-drop 2.4s ease-in-out infinite;
}

@keyframes cue-drop {
  50% {
    transform: translateY(0.28rem);
  }
}

/* The character render is portrait 900x1600 with no alpha channel — a subject
   on solid black. Screening it over the backdrop dissolves the black instead
   of showing it as a box. */
.hero__marcos {
  align-self: end;
  justify-self: center;
  width: 100%;
  max-height: calc(100svh - 14rem);
  aspect-ratio: 9 / 16;
  pointer-events: none;
}

.hero__marcos video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: contrast(1.04);
  mix-blend-mode: screen;
}

.hero__marcos[hidden] {
  display: none !important;
}

/* ---- Section rhythm ------------------------------------------------------ */

.console,
.start {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--line);
}

.console__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: 78rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.console__intro h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.console--vias .console__intro {
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}

.console--vias .console__intro h2 {
  max-width: 14ch;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.98;
}

.console__sub {
  max-width: 36rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.55;
}

/* Only meaningful while the relato is pinned; in stacked mode every chapter
   is already on screen, so there is nothing to count. */
.console__progress {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--faint);
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.console__progress-n {
  color: var(--accent);
}

.console__progress-bar {
  position: relative;
  width: 4.5rem;
  height: 1px;
  background: var(--line-strong);
}

.console__progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--relato-progress, 0.2));
  transform-origin: left;
  transition: transform 340ms var(--ease);
}

/* ---- The console frame: rail + stage ------------------------------------- */

.console__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 0.3fr) minmax(0, 1fr);
  min-height: 26rem;
  border: 1px solid var(--line);
  background: rgba(5, 8, 13, 0.44);
  backdrop-filter: blur(18px);
}

.console--vias .console__frame {
  grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 1fr);
}

.console__rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 220ms ease;
}

.console__rail .rail-item:last-child {
  border-bottom: 0;
}

.rail-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 260ms var(--ease);
}

.rail-item:hover,
.rail-item:focus-visible,
.rail-item.is-active {
  outline: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.09), transparent 76%);
}

.rail-item:hover::before,
.rail-item:focus-visible::before,
.rail-item.is-active::before {
  transform: scaleY(1);
}

.rail-item__n {
  color: var(--faint);
  font: 500 0.62rem/1 var(--font-mono);
  transition: color 220ms ease;
}

.rail-item.is-active .rail-item__n {
  color: var(--accent);
}

.rail-item__t {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.3;
}

.rail-item__s {
  display: block;
  margin-top: 0.3rem;
  color: var(--faint);
  font: 400 0.58rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rail-item__a {
  color: var(--faint);
  font-size: 1.1rem;
  transform: rotate(45deg);
  transition: color 220ms ease, transform 260ms var(--ease);
}

.rail-item:hover .rail-item__a,
.rail-item:focus-visible .rail-item__a,
.rail-item.is-active .rail-item__a {
  color: var(--accent);
  transform: rotate(0deg);
}

.rail-item--big {
  padding: clamp(1.5rem, 3vw, 2.4rem) 1.5rem;
}

.rail-item--big .rail-item__t {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---- Panels --------------------------------------------------------------- */

.console__stage {
  min-width: 0;
}

.panel {
  display: none;
  padding: clamp(1.8rem, 4vw, 3.4rem);
}

.panel.is-active {
  display: block;
  animation: panel-in 420ms var(--ease) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
}

.panel__inner {
  max-width: 52rem;
}

.panel__title {
  max-width: 20ch;
  margin: 0 0 1.4rem;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.panel__lead {
  max-width: 42rem;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.58;
}

.panel__inner--doc {
  max-width: 46rem;
}

/* ---- The chapters, in motion -----------------------------------------------
   Only while the relato is pinned: a chapter that arrives on a full screen has
   to land, not just appear. The stack never runs any of this, and neither does
   reduced motion — .is-pinned is script's word for "motion is welcome here". */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(1.3rem);
  }
}

/* 01 · the hand is dealt, card by card, into its resting fan. */
@keyframes card-deal {
  from {
    opacity: 0;
    transform: translateY(3.2rem) rotate(0deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform:
      translateY(calc(var(--y, 0rem) - var(--near) * 1.3rem))
      rotate(var(--rot, 0deg))
      scale(calc(1 + var(--near) * 0.045));
  }
}

/* 02 · the wall of sameness swells in, then never quite stops repeating. */
@keyframes wall-in {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes wall-drift {
  to {
    background-position: 128px 76px;
  }
}

/* 03 · each slot lands lit and cools down, like an inventory filling up. */
@keyframes slot-fill {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
    border-color: rgba(var(--accent-rgb), 0.55);
  }
}

@keyframes slot-spark {
  0%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.console--relato.is-pinned .panel.is-active .panel__title,
.console--relato.is-pinned .panel.is-active .panel__lead,
.console--relato.is-pinned .panel.is-active .slot-overflow,
.console--relato.is-pinned .panel.is-active .proof__claim,
.console--relato.is-pinned .panel.is-active .proof__lead,
.console--relato.is-pinned .panel.is-active .proof__question,
.console--relato.is-pinned .panel.is-active .proof__cue {
  animation: rise-in 560ms var(--ease) backwards;
}

.console--relato.is-pinned .panel.is-active .panel__lead { animation-delay: 90ms; }
.console--relato.is-pinned .panel.is-active .slot-overflow { animation-delay: 620ms; }

.console--relato.is-pinned .panel.is-active .hand__card {
  animation: card-deal 640ms var(--ease) backwards;
}

  .console--relato.is-pinned .panel.is-active .hand__card:nth-child(1) { animation-delay: 60ms; }
  .console--relato.is-pinned .panel.is-active .hand__card:nth-child(2) { animation-delay: 155ms; }
  .console--relato.is-pinned .panel.is-active .hand__card:nth-child(3) { animation-delay: 250ms; }
  .console--relato.is-pinned .panel.is-active .hand__card:nth-child(4) { animation-delay: 345ms; }
  .console--relato.is-pinned .panel.is-active .hand__card:nth-child(5) { animation-delay: 440ms; }

.console--relato.is-pinned .panel.is-active .noise__wall {
  animation:
    wall-in 900ms var(--ease) backwards,
    wall-drift 26s linear infinite;
}

.console--relato.is-pinned .panel.is-active .noise__list li {
  animation: rise-in 520ms var(--ease) backwards;
}

  .console--relato.is-pinned .panel.is-active .noise__list li:nth-child(1) { animation-delay: 180ms; }
  .console--relato.is-pinned .panel.is-active .noise__list li:nth-child(2) { animation-delay: 310ms; }
  .console--relato.is-pinned .panel.is-active .noise__list li:nth-child(3) { animation-delay: 440ms; }

.console--relato.is-pinned .panel.is-active .slot {
  animation: slot-fill 520ms var(--ease) backwards;
}

.console--relato.is-pinned .panel.is-active .slot::after {
  animation: slot-spark 620ms var(--ease) backwards;
}

  .console--relato.is-pinned .panel.is-active .slot:nth-child(1) { animation-delay: 180ms; }
  .console--relato.is-pinned .panel.is-active .slot:nth-child(2) { animation-delay: 280ms; }
  .console--relato.is-pinned .panel.is-active .slot:nth-child(3) { animation-delay: 380ms; }
  .console--relato.is-pinned .panel.is-active .slot:nth-child(4) { animation-delay: 480ms; }
  .console--relato.is-pinned .panel.is-active .slot:nth-child(5) { animation-delay: 580ms; }
  .console--relato.is-pinned .panel.is-active .slot::after:nth-child(1) { animation-delay: 180ms; }
  .console--relato.is-pinned .panel.is-active .slot::after:nth-child(2) { animation-delay: 280ms; }
  .console--relato.is-pinned .panel.is-active .slot::after:nth-child(3) { animation-delay: 380ms; }
  .console--relato.is-pinned .panel.is-active .slot::after:nth-child(4) { animation-delay: 480ms; }
  .console--relato.is-pinned .panel.is-active .slot::after:nth-child(5) { animation-delay: 580ms; }

.console--relato.is-pinned .panel.is-active .moves__grid li {
  animation: rise-in 560ms var(--ease) backwards;
}

  .console--relato.is-pinned .panel.is-active .moves__grid li:nth-child(1) { animation-delay: 120ms; }
  .console--relato.is-pinned .panel.is-active .moves__grid li:nth-child(2) { animation-delay: 270ms; }
  .console--relato.is-pinned .panel.is-active .moves__grid li:nth-child(3) { animation-delay: 420ms; }

.console--relato.is-pinned .panel.is-active .proof__lead { animation-delay: 220ms; }
.console--relato.is-pinned .panel.is-active .proof__question { animation-delay: 380ms; }
.console--relato.is-pinned .panel.is-active .proof__cue { animation-delay: 560ms; }

/* ---- The relato ------------------------------------------------------------
   Two modes from one markup. The default — mobile, no JS, reduced motion — is
   a plain stack: every chapter visible, each under its own rail label, nothing
   to tap. Script adds .is-pinned on wide, tall viewports and the frame turns
   back into the console, driven by scroll instead of clicks. */

.console--relato {
  --relato-gap: clamp(1.5rem, 5vh, 3.5rem);
  --relato-open: 1;
  --relato-shut: calc(1 - var(--relato-open));
  --relato-scale: calc(1 - 0.66 * var(--relato-shut));
}

.console--relato .console__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The rail and the stage step out of the layout so their children interleave
   as label / chapter / label / chapter, without duplicating any text. */
.console--relato .console__rail,
.console--relato .console__stage {
  display: contents;
}

.console--relato .console__rail .rail-item:nth-child(1) { order: 1; }
.console--relato .console__stage .panel:nth-child(1) { order: 2; }
.console--relato .console__rail .rail-item:nth-child(2) { order: 3; }
.console--relato .console__stage .panel:nth-child(2) { order: 4; }
.console--relato .console__rail .rail-item:nth-child(3) { order: 5; }
.console--relato .console__stage .panel:nth-child(3) { order: 6; }
.console--relato .console__rail .rail-item:nth-child(4) { order: 7; }
.console--relato .console__stage .panel:nth-child(4) { order: 8; }
.console--relato .console__rail .rail-item:nth-child(5) { order: 9; }
.console--relato .console__stage .panel:nth-child(5) { order: 10; }

.console--relato .rail-item {
  grid-template-columns: 2rem 1fr;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  cursor: default;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 76%);
}

.console--relato .rail-item::before {
  transform: scaleY(1);
}

.console--relato .rail-item__n {
  color: var(--accent);
}

.console--relato .panel {
  display: block;
  border-bottom: 1px solid var(--line);
}

.console--relato .console__stage .panel:last-child {
  border-bottom: 0;
}

.relato__track {
  display: none;
}

@media (min-width: 901px) and (min-height: 640px) {
  .console--relato.is-pinned .console__frame {
    display: grid;
    grid-template-columns: minmax(15rem, 0.3fr) minmax(0, 1fr);
    min-height: 26rem;
  }

  .console--relato.is-pinned .console__rail {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
  }

  /* The chapters spread down the whole column: on a full screen a short list
     stuck to the top reads as a leftover, not as a menu. */
  .console--relato.is-pinned .rail-item {
    flex: 1 1 0;
  }

  /* The stage is much wider than the page column ever was, so the chapter sits
     in the middle of it and its furniture grows to match. */
  .console--relato.is-pinned .panel__inner {
    max-width: 64rem;
    margin-inline: auto;
  }

  .console--relato.is-pinned .panel__title {
    font-size: clamp(2rem, 3.1vw, 3.3rem);
  }

  .console--relato.is-pinned .panel__lead {
    max-width: 48rem;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
  }

  .console--relato.is-pinned .hand__cards {
    min-height: 22rem;
  }

  /* The floor stays where the base card has it: five of them plus the fan
     overlap have to fit the stage at 901px too, not just on a big screen. */
  .console--relato.is-pinned .hand__card {
    width: clamp(7.5rem, 12vw, 13rem);
  }

  .console--relato.is-pinned .panel {
    min-width: 0;
  }

  .console--relato.is-pinned .slot {
    min-height: 11rem;
  }

  .console--relato.is-pinned .console__stage {
    display: grid;
  }

  .console--relato.is-pinned .rail-item {
    cursor: pointer;
    background: transparent;
  }

  .console--relato.is-pinned .rail-item:hover,
  .console--relato.is-pinned .rail-item.is-active {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.09), transparent 76%);
  }

  .console--relato.is-pinned .console__rail .rail-item:last-child {
    border-bottom: 0;
  }

  .console--relato.is-pinned .rail-item::before {
    transform: scaleY(0);
  }

  .console--relato.is-pinned .rail-item:hover::before,
  .console--relato.is-pinned .rail-item:focus-visible::before,
  .console--relato.is-pinned .rail-item.is-active::before {
    transform: scaleY(1);
  }

  .console--relato.is-pinned .rail-item__n {
    color: var(--faint);
  }

  .console--relato.is-pinned .rail-item.is-active .rail-item__n {
    color: var(--accent);
  }

  /* The takeover: once the relato is reached the pin fills the screen edge to
     edge, out of the page column, and everything else is behind it. 100vw
     counts the scrollbar, so --sbw (set by script) takes it back off. */
  .console--relato.is-pinned .relato__pin {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100vw - var(--sbw, 0px));
    height: 100svh;
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    padding: var(--relato-gap) clamp(1.5rem, 5vw, 5rem);
    /* Only once the block has opened does the page behind it go dark. */
    background: rgba(3, 5, 9, calc(0.9 * var(--relato-open)));
    backdrop-filter: blur(calc(16px * var(--relato-open)));
  }

  .console--relato.is-pinned .relato__pin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 62%);
    opacity: var(--relato-open);
    pointer-events: none;
  }

  /* The headline arrives with the section, holds while the block is still shut,
     and gets out of the way as it opens. Same width rule as the page column so
     it lands exactly where it would have in normal flow. */
  .console--relato.is-pinned .console__intro {
    position: absolute;
    top: var(--relato-gap);
    left: 50%;
    width: min(calc(100% - clamp(2.5rem, 8vw, 10rem)), 104rem);
    margin: 0;
    transform: translateX(-50%);
    opacity: clamp(0, calc(1.15 - var(--relato-open) * 2.4), 1);
    pointer-events: none;
  }

  /* The block that extends. Scaling instead of resizing means the console never
     reflows on the way out — it is the same frame all along, just small first. */
  .console--relato.is-pinned .console__frame {
    flex: 1;
    width: 100%;
    max-width: 104rem;
    min-height: 0;
    margin-inline: auto;
    border-color: rgba(var(--accent-rgb), calc(0.12 + 0.3 * var(--relato-shut)));
    background: rgba(9, 14, 22, calc(0.3 + 0.42 * var(--relato-shut)));
    box-shadow:
      0 2rem 6rem rgba(0, 0, 0, calc(0.55 * var(--relato-shut))),
      0 0 5rem rgba(var(--accent-rgb), calc(0.14 * var(--relato-shut)));
    transform:
      translateY(calc(var(--relato-shut) * 4vh))
      scale(var(--relato-scale));
  }

  /* Kept dim rather than hidden: shrunk to a third the console is unreadable but
     still recognisable — a miniature of itself, which is what makes the block
     worth opening. The counter only earns its place once it can be read. */
  .console--relato.is-pinned .console__rail,
  .console--relato.is-pinned .console__stage {
    opacity: calc(0.45 + 0.55 * var(--relato-open));
  }

  .console--relato.is-pinned .console__progress {
    opacity: clamp(0, calc((var(--relato-open) - 0.35) / 0.45), 1);
  }

  /* Corner brackets, sized against the scale so they stay the same size on
     screen while the block grows, and gone by the time it is open. */
  .console--relato.is-pinned .console__frame::before,
  .console--relato.is-pinned .console__frame::after {
    content: "";
    position: absolute;
    width: calc(1.6rem / var(--relato-scale));
    height: calc(1.6rem / var(--relato-scale));
    border: calc(1px / var(--relato-scale)) solid var(--accent);
    opacity: calc(0.55 * var(--relato-shut));
    pointer-events: none;
  }

  .console--relato.is-pinned .console__frame::before {
    top: calc(-0.7rem / var(--relato-scale));
    left: calc(-0.7rem / var(--relato-scale));
    border-right: 0;
    border-bottom: 0;
  }

  .console--relato.is-pinned .console__frame::after {
    right: calc(-0.7rem / var(--relato-scale));
    bottom: calc(-0.7rem / var(--relato-scale));
    border-top: 0;
    border-left: 0;
  }

  /* Nothing is centred in the column any more — the chapter gets the height it
     wants inside a full-height stage. */
  .console--relato.is-pinned .panel {
    display: grid;
    align-content: center;
  }

  /* Along the bottom edge of the takeover, like a reel counter. */
  .console--relato.is-pinned .console__progress {
    display: flex;
    width: 100%;
    max-width: 104rem;
    margin: 0.9rem auto 0;
  }

  .console--relato.is-pinned .console__progress-bar {
    flex: 1;
  }

  /* All five chapters share one grid cell, so the frame is as tall as the
     tallest of them and nothing jumps as they cross-fade. */
  .console--relato.is-pinned .panel {
    grid-area: 1 / 1;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    transition: opacity 340ms var(--ease), visibility 0s linear 340ms;
  }

  .console--relato.is-pinned .panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 340ms var(--ease), visibility 0s;
  }

  /* Empty spacers: the only job of the track is to give the pin something to
     scroll through, one screenful per chapter. */
  .console--relato.is-pinned .relato__track {
    display: block;
  }

  .console--relato.is-pinned .relato__step {
    height: 74svh;
  }
}

/* Laptop screens: the frame has to fit whole between the pin gaps, and chapter
   03 is the tallest of the five, so the padding gives way before it does. */
@media (min-width: 901px) and (min-height: 640px) and (max-height: 820px) {
  .console--relato {
    --relato-gap: 1.4rem;
  }

  .console--relato.is-pinned .panel {
    padding: clamp(1.2rem, 2.4vw, 2rem);
  }

  .console--relato.is-pinned .rail-item {
    padding: 0.85rem 1.1rem;
  }

  .console--relato.is-pinned .slot {
    padding: 0.8rem;
  }

  .console--relato.is-pinned .panel__title {
    margin-bottom: 1rem;
  }

  .console--relato.is-pinned .panel__lead {
    margin-bottom: 1.3rem;
  }
}

/* ---- 01 / the hand of cards ------------------------------------------------ */

.hand__cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 18rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
}

.hand__card {
  --near: 0;
  position: relative;
  display: grid;
  align-items: end;
  width: clamp(7.5rem, 11vw, 10rem);
  aspect-ratio: 3 / 4.2;
  margin-inline: clamp(-1.5rem, -1.3vw, -0.85rem);
  padding: 1rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background:
    linear-gradient(168deg, rgba(var(--accent-rgb), 0.07), rgba(6, 10, 17, 0.92) 62%),
    #070b12;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
  transform:
    translateY(calc(var(--y, 0rem) - var(--near) * 1.3rem))
    rotate(var(--rot, 0deg))
    scale(calc(1 + var(--near) * 0.045));
  transition: transform 420ms var(--ease), border-color 300ms ease, box-shadow 300ms ease;
}

.hand__card:nth-child(1) { --rot: -9deg; --y: 1.6rem; }
.hand__card:nth-child(2) { --rot: -4.5deg; --y: 0.45rem; }
.hand__card:nth-child(3) { --rot: 0deg; --y: 0rem; }
.hand__card:nth-child(4) { --rot: 4.5deg; --y: 0.45rem; }
.hand__card:nth-child(5) { --rot: 9deg; --y: 1.6rem; }

.hand__card::before {
  content: "◆";
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  color: rgba(var(--accent-rgb), 0.55);
  font-size: 0.58rem;
}

.hand__card span {
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 400;
  line-height: 1.3;
}

.hand__card:hover,
.hand__card:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.6);
}

.hand__card:hover span,
.hand__card:focus-within span {
  color: var(--ink);
}

.hand__card--wild {
  border-color: rgba(var(--fox-rgb), 0.42);
  background:
    linear-gradient(168deg, rgba(var(--fox-rgb), 0.1), rgba(8, 8, 12, 0.94) 62%),
    #0a0709;
}

.hand__card--wild::before {
  content: "★";
  color: var(--fox);
}

.hand__card--wild span {
  color: rgba(244, 240, 236, 0.78);
}

/* ---- 02 / the wall of sameness --------------------------------------------- */

.panel--noise {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.noise__wall {
  position: absolute;
  z-index: -1;
  inset: 0 -10%;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='76'%3E%3Cg fill='none' stroke='rgba(224,231,242,0.16)' stroke-width='1'%3E%3Crect x='8' y='8' width='112' height='60' rx='3'/%3E%3Cpath d='M22 28h60M22 40h78M22 52h44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 76px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 76%);
}

.noise__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.noise__list li {
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  font-weight: 300;
  line-height: 1.48;
  background: rgba(4, 6, 10, 0.9);
  backdrop-filter: blur(4px);
}

.noise__list li:last-child {
  border-left-color: var(--accent);
  color: var(--ink);
}

/* ---- 03 / the RPG inventory ------------------------------------------------ */

.slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.slot {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 1.1rem;
  min-height: 9.5rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.022), transparent 60%);
  transition: border-color 260ms ease, background 260ms ease, transform 300ms var(--ease);
}

.slot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 260ms ease;
}

.slot:hover,
.slot:focus-within {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.09), transparent 62%);
  transform: translateY(-3px);
}

.slot:hover::after,
.slot:focus-within::after {
  opacity: 1;
}

.slot__key {
  color: var(--faint);
  font: 500 0.58rem/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.slot__glyph {
  display: block;
  width: 1.6rem;
  color: var(--accent);
  transition: transform 320ms var(--ease);
}

.slot:hover .slot__glyph {
  transform: translateY(-2px) scale(1.06);
}

.slot__glyph svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slot strong {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.slot-overflow {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.48;
  background: rgba(255, 255, 255, 0.014);
}

.slot-overflow__glyph {
  flex: 0 0 auto;
  width: 2.4rem;
  color: var(--faint);
}

.slot-overflow__glyph svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: currentColor;
  stroke-width: 1.1;
}

/* ---- 04 / the three moves --------------------------------------------------- */

.moves__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moves__grid li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.moves__grid li > span {
  color: var(--accent);
  font: 500 0.62rem/1 var(--font-mono);
}

.moves__grid p {
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

/* ---- 05 / proof and the handover question ----------------------------------- */

.panel--proof .panel__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.proof__claim {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.5;
}

.proof__count {
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.proof__brand {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line-strong);
}

.proof__lead {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  font-weight: 300;
  line-height: 1.5;
}

.proof__question {
  max-width: 22ch;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.proof__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}

.proof__cue:hover,
.proof__cue:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  outline: 0;
}

.proof__cue span {
  animation: cue-drop 2.4s ease-in-out infinite;
}

/* ---- The two doors, now console panels -------------------------------------- */

.door__slate {
  display: flex;
  gap: 0.26rem;
  margin-bottom: 1.4rem;
  opacity: 0.5;
}

.door__slate span {
  width: 1.4rem;
  height: 0.3rem;
  background: var(--accent);
  transform: skewX(-24deg);
}

.door__slate span:nth-child(even) {
  background: var(--line-strong);
}

.door__title {
  margin: 0 0 1.1rem;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.panel__inner--doc > p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.58;
}

.door__intro {
  color: var(--ink) !important;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
  line-height: 1.48 !important;
}

.door__aside {
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
  font-style: italic;
}

.door__role {
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.door__label {
  margin: 1.8rem 0 0.8rem !important;
  color: var(--faint) !important;
  font: 400 0.58rem/1 var(--font-mono) !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

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

.door__list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.4;
  transition: color 200ms ease, padding-left 260ms var(--ease);
}

.door__list li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0.1rem;
  width: 0.4rem;
  height: 1px;
  background: var(--accent);
  transition: width 260ms var(--ease);
}

.door__list li:hover {
  padding-left: 1.8rem;
  color: var(--ink);
}

.door__list li:hover::before {
  width: 0.8rem;
}

.door__list--formats {
  grid-template-columns: 1fr 1fr;
}

.door__list--formats li:nth-child(odd) {
  padding-right: 1rem;
}

.door__warning {
  margin: 1.8rem 0 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.035);
}

.door__warning-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.5;
}

.door__warning-lead b {
  color: var(--accent);
  font: 500 0.64rem/1 var(--font-mono);
  letter-spacing: 0.13em;
}

.door__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
}

.door__chips li {
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: 400 0.68rem/1 var(--font-mono);
  letter-spacing: 0.02em;
}

.door__punchline {
  margin: 0 0 0.6rem;
  font-size: clamp(0.98rem, 1.3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

.door__warning-close {
  margin: 0;
  color: var(--faint);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.48;
}

.door__actions {
  margin-top: 2rem;
}

.door__microcopy {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
}

/* ---- Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  min-height: 3.45rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms var(--ease);
}

.button:hover,
.button:focus-visible {
  outline: 0;
  transform: translateY(-2px);
}

.button--primary {
  border-color: var(--accent);
  color: #05070b;
  background: var(--accent);
}

.button--primary:hover,
.button--primary:focus-visible {
  box-shadow: 0 0 2.2rem rgba(var(--accent-rgb), 0.18);
}

.button--ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}

.button:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

/* ---- Closing: how we start, three steps in a row ----------------------------- */

.start__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.start__head h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.start__head p {
  max-width: 22rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.5;
}

.start__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.step {
  padding: 1.6rem clamp(1.2rem, 2.2vw, 2.2rem) 0 0;
  border-right: 1px solid var(--line);
}

.step:last-child {
  padding-right: 0;
  border-right: 0;
}

.step__index {
  display: block;
  margin-bottom: 1.6rem;
  color: var(--accent);
  font: 500 0.63rem/1 var(--font-mono);
  letter-spacing: 0.14em;
}

.step h3 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.step p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
}

.step__lead {
  color: var(--ink) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.step__sla {
  display: inline-block;
  margin: 0.2rem 0 1.3rem !important;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink) !important;
  font: 400 0.68rem/1.4 var(--font-mono) !important;
}

.step__plan {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.step__plan li {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.014);
}

.step__deal {
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
}

/* ---- Footer ------------------------------------------------------------------ */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 7rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 400 0.62rem/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-footer a {
  transition: color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent);
}

/* ---- Dialog, form, notice ------------------------------------------------------ */

.project-dialog {
  width: min(60rem, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: #080c13;
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.72);
}

.project-dialog::backdrop {
  background: rgba(2, 4, 7, 0.8);
  backdrop-filter: blur(10px);
}

.dialog-shell {
  padding: clamp(1.5rem, 4vw, 4rem);
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.dialog-header h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.dialog-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.dialog-intro {
  max-width: 43rem;
  margin: 1.7rem 0 3rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.55;
}

.project-form {
  display: grid;
  gap: 1.4rem;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.field {
  display: grid;
  gap: 0.65rem;
}

.field > span,
.commitment legend {
  color: var(--faint);
  font: 400 0.62rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 180ms ease, background 180ms ease;
}

.field input,
.field select {
  min-height: 3.2rem;
  padding: 0 0.9rem;
}

.field textarea {
  min-height: 6.5rem;
  padding: 0.9rem;
  resize: vertical;
}

.field select {
  color-scheme: dark;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: 0;
  background: rgba(var(--accent-rgb), 0.045);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(224, 231, 242, 0.28);
}

.commitment {
  display: grid;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
  padding: 0;
  border: 0;
}

.commitment legend {
  margin-bottom: 0.8rem;
}

.commitment label,
.legal-check {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.45;
  cursor: pointer;
}

.commitment input,
.legal-check input {
  accent-color: var(--accent);
}

.legal-check {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.legal-check a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.form-footer p {
  max-width: 32rem;
  margin: 0;
  color: #ffb0a8;
  font-size: 0.82rem;
}

.form-success {
  padding: 4rem 0;
  text-align: center;
}

.form-success > span {
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.5rem;
}

.form-success h3 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.form-success p {
  max-width: 36rem;
  margin: 1.4rem auto 2rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}

.notice {
  position: fixed;
  z-index: 300;
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(25rem, calc(100% - 2.5rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
  background: rgba(8, 12, 19, 0.96);
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 220ms ease, transform 240ms var(--ease);
}

.notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive ----------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 3rem minmax(24rem, 1fr) minmax(15rem, 0.5fr);
  }

  .slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .console__frame,
  .console--vias .console__frame {
    grid-template-columns: 1fr;
  }

  /* Same interleave trick as the relato, but the tabs stay: picking a path is
     the point here. What changes is that the panel opens right under the tab
     you tapped instead of below the whole row of tabs. */
  .console--vias .console__frame {
    display: flex;
    flex-direction: column;
  }

  .console--vias .console__rail,
  .console--vias .console__stage {
    display: contents;
  }

  .console--vias .console__rail .rail-item:nth-child(1) { order: 1; }
  .console--vias .console__stage .panel:nth-child(1) { order: 2; }
  .console--vias .console__rail .rail-item:nth-child(2) { order: 3; }
  .console--vias .console__stage .panel:nth-child(2) { order: 4; }

  .console--vias .rail-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .console__rail {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rail-item {
    flex: 1 1 auto;
    grid-template-columns: 1.6rem 1fr;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .rail-item__a {
    display: none;
  }

  .rail-item--big {
    grid-template-columns: 1.6rem 1fr;
  }
}

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

  /* The toast shares the bottom of the screen with the route dock. */
  .notice {
    bottom: 6.25rem;
  }

  .hero {
    position: relative;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2.5rem;
    min-height: calc(100svh - 6rem);
  }

  .hero__signal {
    display: none;
  }

  .hero__marcos {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(20rem, 46%);
    max-height: 66%;
    opacity: 0.3;
  }

  .console__intro,
  .start__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .console--vias .console__intro {
    gap: 0.8rem;
  }

  .slots {
    grid-template-columns: repeat(2, 1fr);
  }

  .start__steps {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 1.6rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .step:first-child {
    padding-top: 0;
  }

  .step:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .hand__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
    padding-top: 0;
  }

  .hand__card {
    --rot: 0deg;
    --y: 0rem;
    --near: 0;
    width: 100%;
    aspect-ratio: auto;
    margin-inline: 0;
    padding: 1rem 1rem 1rem 2.3rem;
    transform: none;
  }

  .hand__card::before {
    top: 1.1rem;
    left: 0.95rem;
  }

  .hand__card:hover,
  .hand__card:focus-within {
    transform: none;
  }

  .moves__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

@media (max-width: 560px) {
  .site-header,
  main,
  .site-footer {
    width: calc(100% - 2.5rem);
  }

  .site-header {
    min-height: 5rem;
  }

  .hero {
    min-height: calc(100svh - 5rem);
    padding: 4rem 0;
  }

  h1 {
    font-size: clamp(4.5rem, 25vw, 7rem);
  }

  .hero__lead {
    font-size: 1.15rem;
  }

  .hero__marcos {
    right: auto;
    left: 0;
    width: 100%;
    max-height: 70%;
    opacity: 0.18;
  }

  .fork {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .fork__lines {
    display: none;
  }

  .fork__path {
    padding: 0.9rem 0 0 0.9rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .fork__path--fox {
    border-left-color: var(--fox);
  }

  .console,
  .start {
    padding: 3.5rem 0;
  }

  .panel {
    padding: 1.6rem 1.1rem 2rem;
  }

  .slots {
    grid-template-columns: 1fr;
  }

  .slot {
    min-height: 0;
    gap: 0.9rem;
  }

  .slot-overflow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .door__list--formats {
    grid-template-columns: 1fr;
  }

  .door__list--formats li:nth-child(odd) {
    padding-right: 0;
  }

  .button {
    width: 100%;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
  }

  .project-dialog {
    width: 100%;
    max-height: 100svh;
    border-right: 0;
    border-left: 0;
  }

  .dialog-shell {
    padding: 1.5rem 1.25rem 2rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .form-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .atmosphere__bg,
  .hero__marcos {
    display: none;
  }

  .fork__stem,
  .fork__line {
    stroke-dashoffset: 0;
  }
}

/* The hidden attribute is only display:none from the browser stylesheet, so any
   author `display` rule silently defeats it. This puts it back. */
[hidden] {
  display: none !important;
}