/* sections.css — pathways route + sticky chapter cards + impact card,
   and the systems horizontal accordion (incl. its no-js fallback).
   Chapter media carries diegetic HUD microcopy; the accordion opens with
   machined stagger choreography. Scrub-side effects live in home/sections.js. */

.pathways {
  position: relative;
  border-top: 1px solid var(--hairline-soft);
}

.path-route {
  position: absolute;
  z-index: var(--z-routes);
  top: 8rem;
  bottom: 8rem;
  left: 50%;
  width: 1px;
  background: var(--hairline);
  /* Both terminals dissolve instead of hard-stopping against neighbors. */
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}

.path-route-line,
.path-route-progress {
  position: absolute;
  inset: 0;
}

.path-route-progress {
  transform: scaleY(0);
  transform-origin: top;
  background: var(--phosphor);
  box-shadow: 0 0 10px rgba(var(--phosphor-rgb), 0.45);
}

/* Data packet riding the route line (created by home/sections.js). */
.path-route-packet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--phosphor);
  box-shadow:
    0 0 2px rgba(var(--phosphor-rgb), 1),
    0 0 14px rgba(var(--phosphor-rgb), 0.8);
}

.pathways-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(3rem, 8vw, 9rem);
}

.pathways-intro {
  min-width: 0;
}

.pathways-sticky {
  position: sticky;
  top: 8.5rem;
  max-width: 39rem;
}

.pathways-intro h2 {
  margin-top: 1.6rem;
}

.pathways-intro h2 + p {
  max-width: 35rem;
  margin-top: 2rem;
  color: var(--paper-soft);
  font-family: var(--body);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  font-weight: 350;
  line-height: 1.62;
}

.path-legend {
  display: grid;
  gap: 0.8rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}

.path-legend span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.path-legend i {
  width: 1.8rem;
  height: 1px;
  background: var(--phosphor);
}

.path-legend span:last-child i {
  background: repeating-linear-gradient(90deg, var(--phosphor) 0 3px, transparent 3px 6px);
}

/* Live scrub readout under the legend (unhidden by home/sections.js). */
.path-telemetry {
  margin-top: 1.3rem;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.path-telemetry span {
  color: var(--phosphor);
}

.path-chapters {
  display: grid;
}

.chapter-card {
  position: sticky;
  top: 7rem;
  display: grid;
  grid-template-rows: minmax(20rem, 1fr) auto;
  min-height: min(44rem, calc(100svh - 9rem));
  margin-bottom: 24vh;
  border: 1px solid var(--hairline);
  background: var(--panel);
  box-shadow:
    0 -0.4rem 1.2rem rgba(var(--ink-rgb), 0.55),
    0 -2rem 4.6rem rgba(var(--ink-rgb), 0.8);
}

.chapter-card:nth-child(2) {
  top: 8rem;
}

.chapter-card:nth-child(3) {
  top: 9rem;
  margin-bottom: 0;
}

/* Deck veil — scrubbed by home/sections.js as the next chapter slides over. */
.chapter-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgb(var(--ink-rgb));
  opacity: 0;
  pointer-events: none;
}

.chapter-visual {
  position: relative;
  z-index: var(--z-media);
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background: var(--charcoal);
}

.chapter-visual > picture {
  position: absolute;
  inset: 0;
}

.chapter-visual > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.52) contrast(1.15) brightness(0.72);
  transform: scale(1.08);
}

/* Atmosphere scrims: top scrim seats the HUD row, edges fall away like a
   focal plane; the heavy bottom lift now belongs to .chapter-atmos. */
.chapter-flight::before,
.chapter-intelligence::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.44), transparent 24%),
    linear-gradient(180deg, transparent 60%, rgba(var(--ink-rgb), 0.55)),
    radial-gradient(130% 100% at 50% 12%, transparent 60%, rgba(var(--ink-rgb), 0.38));
  content: "";
  pointer-events: none;
}

.chapter-flight::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--phosphor-rgb), 0.09) 1px, transparent 1px),
    linear-gradient(rgba(var(--phosphor-rgb), 0.09) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3) 55%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3) 55%, transparent 90%);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------ */
/* Scene atmosphere — volumetric depth layered over the photography:
   a phosphor bloom keyed to the light source in each plate, plus a
   foreground haze band that drifts like slow air. */
.chapter-atmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.chapter-atmos::before,
.chapter-atmos::after {
  position: absolute;
  inset: -12% -6%;
  content: "";
}

/* Bloom: light behaves like it has air to move through. */
.chapter-flight .chapter-atmos::before {
  background:
    radial-gradient(26rem 15rem at 71% 24%, rgba(var(--phosphor-rgb), 0.15), transparent 62%),
    radial-gradient(52rem 13rem at 26% 36%, rgba(var(--paper-rgb), 0.055), transparent 72%);
  mix-blend-mode: screen;
}

.chapter-intelligence .chapter-atmos::before {
  background:
    radial-gradient(30rem 13rem at 50% 55%, rgba(var(--phosphor-rgb), 0.13), transparent 64%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(var(--ink-rgb), 0.4));
}

/* Foreground haze: a low paper mist that drifts laterally. */
.chapter-flight .chapter-atmos::after,
.chapter-intelligence .chapter-atmos::after {
  background:
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.4), transparent 30%),
    radial-gradient(48rem 9rem at 32% 94%, rgba(var(--paper-rgb), 0.05), transparent 72%),
    radial-gradient(38rem 7rem at 78% 100%, rgba(var(--paper-rgb), 0.035), transparent 76%);
}

@media (prefers-reduced-motion: no-preference) {
  .chapter-flight .chapter-atmos::after,
  .chapter-intelligence .chapter-atmos::after {
    animation: atmos-drift 26s var(--ease-standard) infinite alternate;
  }
}

@keyframes atmos-drift {
  from { transform: translateX(-1.6%); }
  to { transform: translateX(1.6%); }
}

/* ------------------------------------------------------------------ */
/* Glass HUD chips pinned to physical points on the hardware —
   an anchor square on the airframe/optics, a leader line, and a
   backdrop-blur data card hanging off it. Static without JS. */
.chapter-chip {
  position: absolute;
  z-index: var(--z-nodes);
  pointer-events: none;
}

.chapter-flight .chapter-chip { top: 19%; left: 70.5%; }
.chapter-intelligence .chapter-chip { top: 47%; left: 22.5%; }

.chip-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid rgba(var(--phosphor-rgb), 0.95);
  background: rgba(var(--ink-rgb), 0.45);
  transform: translate(-50%, -50%);
}

.chip-anchor::after {
  position: absolute;
  inset: 0.14rem;
  background: var(--phosphor);
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  .chip-anchor::before {
    position: absolute;
    inset: -0.34rem;
    border: 1px solid rgba(var(--phosphor-rgb), 0.55);
    animation: anchor-ping 2.8s var(--ease-out-expo) infinite;
    content: "";
  }
}

@keyframes anchor-ping {
  0% { opacity: 1; transform: scale(0.55); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}

.chip-line {
  position: absolute;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--phosphor-rgb), 0.9), rgba(var(--phosphor-rgb), 0.2));
}

.chip-down .chip-line { top: 0.4rem; height: 3.1rem; }

.chip-up .chip-line {
  top: -3.5rem;
  height: 3.1rem;
  background: linear-gradient(0deg, rgba(var(--phosphor-rgb), 0.9), rgba(var(--phosphor-rgb), 0.2));
}

.chip-body {
  position: absolute;
  display: grid;
  gap: 0.3rem;
  min-width: 10rem;
  padding: 0.6rem 0.75rem 0.65rem;
  border: 1px solid rgba(var(--paper-rgb), 0.16);
  background:
    linear-gradient(180deg, rgba(var(--paper-rgb), 0.06), transparent 46%),
    rgba(var(--ink-rgb), 0.42);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 1.6rem 2.8rem -1.4rem rgba(var(--ink-rgb), 0.95);
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-down .chip-body {
  top: 3.5rem;
  left: 0.5px;
  transform: translateX(-100%);
}

.chip-up .chip-body {
  bottom: 3.5rem;
  left: 0;
}

.chip-body span:first-child { color: var(--phosphor); }
.chip-body span:last-child { color: rgba(var(--paper-rgb), 0.72); }

/* Corner-anchored diegetic telemetry over the media. */
.chapter-hud {
  position: absolute;
  z-index: var(--z-nodes);
  top: 1.15rem;
  right: 1.25rem;
  left: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(var(--paper-rgb), 0.62);
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(var(--ink-rgb), 0.85);
  pointer-events: none;
}

.chapter-hud span:first-child {
  color: var(--phosphor);
}

/* Mission-state chip straddling the media/copy seam — the one element
   that stitches scene and caption into a single composition. */
.chapter-node {
  position: absolute;
  z-index: var(--z-nodes);
  top: 0;
  right: clamp(1.25rem, 2.6vw, 2.4rem);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(var(--phosphor-rgb), 0.55);
  background: rgba(var(--ink-rgb), 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0.9rem 1.8rem -0.9rem rgba(var(--ink-rgb), 0.95);
  color: var(--phosphor);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.chapter-node::before {
  width: 0.32rem;
  height: 0.32rem;
  flex: none;
  background: currentColor;
  animation: node-pulse 2.4s var(--ease-standard) infinite;
  content: "";
}

@keyframes node-pulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.chapter-copy {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(12rem, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: clamp(1.3rem, 2.8vw, 2.5rem);
}

.chapter-copy h3 {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.chapter-copy p {
  padding-left: clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid var(--hairline-soft);
  color: var(--paper-soft);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 350;
  line-height: 1.62;
}

/* The cube array's light spills across the seam onto the copy deck. */
.chapter-card:nth-child(2) .chapter-copy::before {
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 3.5rem;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--phosphor-rgb), 0.07), transparent 78%);
  content: "";
  pointer-events: none;
}

.chapter-intelligence {
  background: var(--charcoal);
}

.chapter-intelligence::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.06), rgba(var(--ink-rgb), 0.5)),
    linear-gradient(90deg, transparent 49.9%, rgba(var(--phosphor-rgb), 0.14) 50%, transparent 50.1%);
  content: "";
  pointer-events: none;
}

.chapter-intelligence > picture > img {
  object-position: 50% 56%;
  filter: saturate(0.82) contrast(1.08) brightness(0.83);
}

.chapter-impact {
  display: grid;
  place-items: center;
  background: var(--phosphor);
  color: var(--ink);
}

/* Halftone dither field rising from the lower edge — print-material grain. */
.chapter-impact::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.34) 1px, transparent 1.4px);
  background-size: 7px 7px;
  content: "";
  mask-image: linear-gradient(160deg, transparent 58%, black 100%);
  -webkit-mask-image: linear-gradient(160deg, transparent 58%, black 100%);
  pointer-events: none;
}

.chapter-impact .chapter-hud,
.chapter-impact .chapter-hud span:first-child {
  color: rgba(var(--ink-rgb), 0.78);
  text-shadow: none;
}

.impact-word {
  position: relative;
  z-index: var(--z-content);
  font-family: var(--display);
  font-size: clamp(3.8rem, 8vw, 8rem);
  letter-spacing: -0.08em;
  line-height: 0.72;
  text-align: center;
}

.impact-cursor {
  display: inline-block;
  width: 0.4em;
  height: 0.66em;
  margin-left: 0.14em;
  background: var(--ink);
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

.impact-route {
  position: absolute;
  inset: 0;
}

.impact-route::before,
.impact-route::after,
.impact-route span {
  position: absolute;
  background: var(--ink);
  content: "";
}

.impact-route::before { top: 14%; right: 8%; left: 8%; height: 1px; }
.impact-route::after { top: 14%; bottom: 14%; left: 8%; width: 1px; }
.impact-route span:nth-child(1) { top: 12.8%; left: 7.35%; width: 0.7rem; height: 0.7rem; }
.impact-route span:nth-child(2) { right: 7.35%; bottom: 12.8%; width: 0.7rem; height: 0.7rem; }
.impact-route span:nth-child(3) { right: 8%; bottom: 14%; left: 8%; height: 1px; }

.systems {
  border-top: 1px solid var(--hairline);
  background: rgba(13, 16, 14, 0.62);
}

.systems-heading {
  margin-bottom: 3.5rem;
}

.system-accordions {
  display: flex;
  min-height: 37rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--hairline);
  gap: 1px;
}

.system-panel {
  position: relative;
  display: flex;
  min-width: 4.7rem;
  flex: 0.64 1 0;
  overflow: hidden;
  background: var(--charcoal);
  transition:
    flex var(--dur-8) var(--ease-in-out-quart),
    background-color var(--dur-3) var(--ease-standard),
    box-shadow var(--dur-3) var(--ease-standard);
}

.system-panel:nth-child(2n) {
  background: var(--panel);
}

.system-panel:not(.is-active):hover {
  background: var(--panel-raised);
}

.system-panel.is-active {
  flex: 5 1 0;
  background:
    radial-gradient(90% 130% at 6% 0%, rgba(var(--phosphor-rgb), 0.1), transparent 52%),
    radial-gradient(70% 90% at 96% 104%, rgba(var(--phosphor-rgb), 0.06), transparent 62%),
    var(--panel-raised);
  box-shadow: inset 0 1px 0 rgba(var(--phosphor-rgb), 0.3);
}

.system-tab {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex: 0 0 4.7rem;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0.9rem;
  border-right: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
}

.system-tab:hover {
  background: var(--phosphor-faint);
}

.system-tab:focus-visible {
  outline-offset: -4px;
}

/* Index letter reads as a machine key — the cell lights when pressed. */
.system-index {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(var(--phosphor-rgb), 0.32);
  color: var(--phosphor);
  font-family: var(--display);
  font-size: 0.7rem;
  transition:
    background-color var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard);
}

.system-tab:hover .system-index,
.system-tab:focus-visible .system-index,
.system-panel.is-active .system-index {
  border-color: var(--phosphor);
  background: var(--phosphor);
  color: var(--ink);
}

.system-name {
  color: var(--paper);
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  transition: color var(--dur-2) var(--ease-standard), letter-spacing var(--dur-4) var(--ease-glide);
}

.system-tab:hover .system-name,
.system-tab:focus-visible .system-name {
  color: var(--phosphor);
  letter-spacing: 0.16em;
}

/* Closed panels whisper their hardware plate on hover (the plate itself
   is painted by texture.css; we only lift its exposure as the reward). */
.system-panel:not(.is-active):hover::after {
  opacity: 0.12;
}

.system-ord {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  transition: color var(--dur-2) var(--ease-standard);
}

.system-panel.is-active .system-ord,
.system-tab:hover .system-ord {
  color: var(--phosphor);
}

/* Oversized ghost ordinal composing the panel's negative space. */
.system-ghost {
  position: absolute;
  z-index: 1;
  right: clamp(1.2rem, 2.5vw, 3rem);
  bottom: -0.12em;
  color: rgba(var(--phosphor-rgb), 0.07);
  font-family: var(--display);
  font-size: clamp(9rem, 15vw, 16rem);
  letter-spacing: -0.06em;
  line-height: 1;
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity var(--dur-8) var(--ease-out-expo), transform var(--dur-8) var(--ease-out-expo);
  pointer-events: none;
  user-select: none;
}

.system-panel.is-active .system-ghost {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

.system-body {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  min-width: min(39rem, calc(100vw - 28rem));
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 4.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-standard);
}

.system-panel.is-active .system-body {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms;
}

/* Machined content reveal: each instrument row lands on its own beat.
   Gated on .js so the no-js directory stays fully visible. */
.js .system-body .system-meta,
.js .system-body .pixel-icon,
.js .system-body .system-type,
.js .system-body h3,
.js .system-body h3 + p,
.js .system-body .system-tags,
.js .system-body > a {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-7) var(--ease-out-expo), transform var(--dur-7) var(--ease-out-expo);
}

.js .system-panel.is-active .system-body .system-meta,
.js .system-panel.is-active .system-body .pixel-icon,
.js .system-panel.is-active .system-body .system-type,
.js .system-panel.is-active .system-body h3,
.js .system-panel.is-active .system-body h3 + p,
.js .system-panel.is-active .system-body .system-tags,
.js .system-panel.is-active .system-body > a {
  opacity: 1;
  transform: none;
}

.js .system-panel.is-active .system-body .system-meta { transition-delay: 160ms; }
.js .system-panel.is-active .system-body .pixel-icon { transition-delay: 215ms; }
.js .system-panel.is-active .system-body .system-type { transition-delay: 270ms; }
.js .system-panel.is-active .system-body h3 { transition-delay: 325ms; }
.js .system-panel.is-active .system-body h3 + p { transition-delay: 385ms; }
.js .system-panel.is-active .system-body .system-tags { transition-delay: 440ms; }
.js .system-panel.is-active .system-body > a { transition-delay: 495ms; }

/* A plotter-head seam sweeps the body as it opens; content lands behind it. */
@media (prefers-reduced-motion: no-preference) {
  .js .system-panel.is-active .system-body::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 4%, rgba(var(--phosphor-rgb), 0.75), transparent 96%);
    box-shadow: 0 0 16px rgba(var(--phosphor-rgb), 0.45);
    animation: system-scan 880ms var(--ease-in-out-quart) 140ms both;
    content: "";
    pointer-events: none;
  }
}

@keyframes system-scan {
  0% { opacity: 0; transform: translateX(0); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateX(min(44rem, 58vw)); }
}

.system-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.system-meta span:last-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--phosphor);
}

.system-meta span:last-child::before {
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  background: currentColor;
  animation: node-pulse 2.4s var(--ease-standard) infinite;
  content: "";
}

.system-body .pixel-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 2rem;
}

.system-body h3 {
  max-width: 14ch;
  margin-top: 1.25rem;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(2rem, 4.15vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.88;
  text-transform: uppercase;
}

.system-body h3 + p {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--paper-soft);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.62;
}

/* Spec rail — machined micro-tags that reward close reading. */
.system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.7rem;
}

.system-tags span {
  padding: 0.34rem 0.55rem;
  border: 1px solid var(--hairline-soft);
  background: rgba(var(--paper-rgb), 0.02);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}

.system-tags span:hover {
  border-color: rgba(var(--phosphor-rgb), 0.45);
  color: var(--phosphor);
}

.system-body > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 22rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  color: var(--phosphor);
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color var(--dur-2) var(--ease-standard);
}

.system-body > a img {
  transition: transform var(--dur-2) var(--ease-glide);
}

.system-body > a:hover,
.system-body > a:focus-visible {
  border-top-color: rgba(var(--phosphor-rgb), 0.55);
}

.system-body > a:hover img,
.system-body > a:focus-visible img {
  transform: translateX(0.45rem);
}

@media (max-width: 1240px) {
  .chapter-copy {
    grid-template-columns: auto 1fr;
  }

  .chapter-copy p {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }

  .system-body {
    min-width: min(35rem, calc(100vw - 25rem));
    padding: 2.5rem;
  }

  .system-body h3 {
    font-size: clamp(2rem, 3.7vw, 4.3rem);
  }
}

@media (max-width: 980px) {
  .path-route {
    display: none;
  }

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

  .pathways-sticky {
    position: relative;
    top: auto;
    max-width: 44rem;
  }

  .path-chapters {
    margin-top: 1rem;
  }

  .chapter-card,
  .chapter-card:nth-child(2),
  .chapter-card:nth-child(3) {
    top: 6rem;
    min-height: min(44rem, calc(100svh - 7rem));
  }

  .system-accordions {
    min-height: 34rem;
  }

  .system-panel {
    min-width: 4.15rem;
  }

  .system-tab {
    flex-basis: 4.15rem;
  }

  .system-body {
    min-width: calc(100vw - 22rem);
    padding: 2rem;
  }
}

@media (max-width: 760px) {
  .chapter-card,
  .chapter-card:nth-child(2),
  .chapter-card:nth-child(3) {
    position: relative;
    top: auto;
    grid-template-rows: 19rem auto;
    min-height: 0;
    margin-bottom: 1rem;
    box-shadow: none;
  }

  .chapter-hud {
    font-size: 0.54rem;
  }

  /* Chips compress but stay pinned — the scene reads at phone scale too. */
  .chip-body {
    gap: 0.26rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    font-size: 0.5rem;
  }

  .chip-down .chip-line { height: 2.2rem; }
  .chip-down .chip-body { top: 2.6rem; }
  .chip-up .chip-line { top: -2.6rem; height: 2.2rem; }
  .chip-up .chip-body { bottom: 2.6rem; }

  .chapter-copy {
    grid-template-columns: auto 1fr;
    padding: 1.6rem 1.35rem 1.35rem;
  }

  .chapter-copy p {
    grid-column: 1 / -1;
  }

  .impact-word {
    font-size: clamp(3.8rem, 18vw, 6.5rem);
  }

  .system-accordions {
    display: grid;
    min-height: 0;
    overflow: visible;
  }

  .system-panel,
  .system-panel.is-active {
    display: grid;
    min-width: 0;
    flex: none;
    transition: background-color var(--dur-2) var(--ease-standard);
  }

  .system-ghost {
    display: none;
  }

  .system-tab {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto;
    align-items: center;
    min-height: 4.7rem;
    padding: 1rem 1.2rem;
    border-right: 0;
    text-align: left;
  }

  .system-tab::after {
    color: var(--phosphor);
    font-family: var(--display);
    content: "+";
  }

  .system-panel.is-active .system-tab::after {
    content: "−";
  }

  .system-ord {
    margin-right: 0.9rem;
  }

  .system-name {
    writing-mode: initial;
    transform: none;
  }

  .system-body {
    display: grid;
    min-width: 0;
    max-height: 0;
    padding: 0 1.2rem;
    overflow: hidden;
    opacity: 0;
    transform: none;
    transition: max-height var(--dur-7) var(--ease-glide), opacity var(--dur-2) var(--ease-standard), padding var(--dur-5) var(--ease-standard);
  }

  .system-panel.is-active .system-body {
    max-height: 44rem;
    padding: 2rem 1.2rem 1.4rem;
    opacity: 1;
    transition-delay: 0ms;
  }

  .system-meta {
    margin-bottom: 1.8rem;
  }

  .system-body h3 {
    max-width: 13ch;
    font-size: clamp(2.4rem, 10vw, 4.2rem);
  }

  .system-body > a {
    margin-top: 3rem;
  }
}

@media (max-width: 480px) {
  .chapter-card,
  .chapter-card:nth-child(2),
  .chapter-card:nth-child(3) {
    grid-template-rows: 16rem auto;
  }
}

/* The systems directory is a complete static grid until JavaScript enhances it. */
.no-js .system-accordions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: visible;
}

.no-js .system-panel,
.no-js .system-panel.is-active {
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr);
  min-width: 0;
  min-height: 27rem;
  overflow: visible;
}

.no-js .system-panel:last-child {
  grid-column: 1 / -1;
}

.no-js .system-tab {
  cursor: default;
  pointer-events: none;
}

.no-js .system-ghost {
  display: none;
}

.no-js .system-body,
.no-js .system-panel.is-active .system-body {
  display: flex;
  min-width: 0;
  max-height: none;
  padding: 2rem;
  overflow: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .no-js .system-accordions {
    grid-template-columns: 1fr;
  }

  .no-js .system-panel,
  .no-js .system-panel.is-active {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .no-js .system-panel:last-child {
    grid-column: auto;
  }

  .no-js .system-body,
  .no-js .system-panel.is-active .system-body {
    padding: 1.5rem 1.2rem 2rem;
  }
}