/* ==========================================================================
   TELSTAR — telstar-scenes.css
   Homepage cinematic visual system & narrative spine.
   Midnight observatory × celestial archive × quiet library × navigational atlas.
   ========================================================================== */

/* -- 01. Layout & Staging ------------------------------------------------ */
.spine {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}

.spine__flow {
  min-width: 0;
}

.spine__visual {
  height: 100%;
  min-width: 0;
}

.spine__stage {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  height: calc(100svh - var(--nav-h) - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.scene__mobile {
  display: none;
}

.obj__svg {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 48px rgba(4, 5, 14, 0.75));
}

.obj__caption {
  margin-top: 1.25rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-3);
  min-height: 1.2em;
  transition: opacity 400ms ease;
}

/* State captions */
[data-state="closed"] .obj__caption::after { content: "KNOWLEDGE // DORMANT"; }
[data-state="opening"] .obj__caption::after { content: "FOLIO // UNBOUND"; }
[data-state="scatter"] .obj__caption::after { content: "DISCOVERY // SCATTERED SOURCES"; }
[data-state="align"] .obj__caption::after { content: "STRUCTURE // ARCHIVAL REGISTRY"; }
[data-state="constellate"] .obj__caption::after { content: "RELATIONSHIPS // DECISION NETWORK"; }
[data-state="bound"] .obj__caption::after { content: "GOVERNANCE // THREE ORBITS"; }
[data-state="handoff"] .obj__caption::after { content: ""; }

/* Sections inside spine flow */
.spine__flow .wrap {
  width: 100%;
  margin: 0;
}

/* The hero carries its own two-column visual again (the system diagram), so it
   is no longer collapsed here. The problem and scope sections still are: their
   visual is the shared sticky column, not a figure beside their copy. */
.spine__flow .problem__grid,
.spine__flow .orbit-grid {
  display: block;
}

.spine__flow section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.spine__flow .hero {
  padding-top: 4rem;
  min-height: calc(100svh - var(--nav-h));
}

.spine__flow h1 {
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
}

.spine__flow h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.spine__flow .hero__actions {
  gap: .8rem;
}

.spine__flow .btn {
  white-space: normal;
  line-height: 1.45;
}

.spine__flow .case {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.spine__flow .cases {
  background: transparent;
}

.spine__flow .sec-head {
  margin-bottom: 2rem;
}

.spine__flow .card-index {
  grid-template-columns: 1fr;
  background: transparent;
  border-inline: 0;
  border-radius: 0;
}

.spine__flow .card-index__item {
  background: transparent;
}

.spine__flow .card-index__q {
  font-family: var(--font-display);
  text-transform: none;
  font-size: 1.15rem;
}

.spine__flow .card-index__note {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.spine__flow .stage {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 1.5rem;
}

.spine__flow .model__row {
  grid-template-columns: 1fr;
}

.spine__flow .kana-ghost {
  opacity: .015;
}

/* -- 02. Celestial Observatory Reticles & Meridian Grid ------------------ */
.obj__celestial {
  opacity: .65;
  transition: opacity 1200ms ease;
}

.obj__frame {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.obj__cross {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: 1;
}

.obj__coord {
  fill: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.obj__coord--tl,
.obj__coord--tr,
.obj__coord--bl,
.obj__coord--br {
  transition: opacity 800ms ease;
}

.obj__meridian {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0;
  transition: opacity 1200ms ease;
}

:is(.spine__stage, .scene__mobile)[data-state="align"] .obj__meridian {
  opacity: .65;
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .obj__meridian {
  opacity: .3;
}

/* -- 03. Archival Folio / Ledger Case ------------------------------------ */
.obj__archive,
.obj__cover,
.plate,
.plate--front,
.plate--back,
.obj__spine,
.obj__interior,
.obj__inner-rule,
.obj__inner-point,
.obj__corner,
.obj__compass-ring,
.obj__compass-axis,
.obj__compass-star,
.obj__archive-title,
.obj__archive-sub,
.obj__archive-index,
.obj__archive-seal {
  transition: transform 1400ms var(--ease-weight), opacity 1100ms var(--ease-weight);
}

.obj__archive {
  opacity: 0;
  transform-origin: 300px 300px;
}

.obj__cover {
  transform-origin: 160px 300px;
}

.plate {
  transform-box: fill-box;
  transform-origin: center;
}

.plate--back {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.plate--front {
  fill: var(--surface);
  stroke: var(--signal-line);
  stroke-width: 1.2;
  transform-origin: 160px 300px;
}

.obj__spine {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 2;
}

.obj__interior {
  transition: opacity 1000ms var(--ease-weight);
}

.obj__inner-rule {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 1;
}

.obj__inner-point {
  fill: var(--moon);
  opacity: 0;
}

.obj__corner {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: 1;
}

.obj__compass-ring {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.obj__compass-axis {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: .8;
}

.obj__compass-star {
  fill: var(--moon);
}

.obj__archive-title {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 5px;
}

.obj__archive-sub {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 2px;
}

.obj__archive-index {
  fill: var(--signal);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.5px;
}

.obj__archive-seal {
  fill: var(--ink-4);
  font-family: var(--font-kana);
  font-size: 10px;
  letter-spacing: 2px;
  opacity: .7;
}

:is(.spine__stage, .scene__mobile)[data-state="closed"] .obj__archive,
:is(.spine__stage, .scene__mobile)[data-state="opening"] .obj__archive {
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="closed"] .obj__cover {
  transform: none;
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="opening"] .obj__cover {
  transform: scaleX(.08) skewY(-8deg);
  opacity: .2;
}

:is(.spine__stage, .scene__mobile)[data-state="opening"] .obj__inner-point {
  opacity: .7;
}

/* -- 04. Records, Leaves & Star Nodes ------------------------------------ */
.obj__network {
  transform-origin: 300px 300px;
  transform: scale(1);
  transition: transform 1400ms var(--ease-weight), opacity 1100ms var(--ease-weight);
}

.record {
  transition: transform 1400ms var(--ease-weight), opacity 1000ms var(--ease-weight);
  opacity: 1;
}

.record__sheet {
  fill: #0B0E1E;
  stroke: var(--signal-line);
  stroke-width: 1;
  transition: opacity 1000ms var(--ease-weight), stroke 800ms ease;
}

.record__tag {
  fill: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: .08em;
  transition: opacity 1000ms var(--ease-weight);
}

.record__label {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 500;
  transition: opacity 1000ms var(--ease-weight);
}

.record__rule {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: .8;
  opacity: .7;
  transition: opacity 1000ms var(--ease-weight);
}

.record__halo {
  fill: var(--signal);
  opacity: 0;
  transition: opacity 1000ms var(--ease-weight);
}

.node {
  fill: var(--moon);
  opacity: 0;
  transition: opacity 1000ms var(--ease-weight), fill 800ms ease;
}

:is(.spine__stage, .scene__mobile)[data-state="closed"] .record,
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record {
  opacity: 0;
}

:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record {
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="scatter"] .node {
  opacity: .4;
}

:is(.spine__stage, .scene__mobile)[data-state="align"] .record {
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="align"] .record--6 {
  opacity: .35;
}

:is(.spine__stage, .scene__mobile)[data-state="align"] .record--6 .record__sheet {
  stroke-dasharray: 4 3;
}

:is(.spine__stage, .scene__mobile)[data-state="align"] .node {
  opacity: .6;
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record__sheet,
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record__tag,
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record__label,
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record__rule,
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record__sheet,
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record__tag,
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record__label,
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record__rule,
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record__sheet,
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record__tag,
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record__label,
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record__rule {
  opacity: 0;
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .node {
  opacity: 1;
  fill: var(--ink);
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record__halo {
  opacity: .45;
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .obj__links {
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="constellate"] .obj__signals {
  opacity: 1;
}

:is(.spine__stage, .scene__mobile)[data-state="bound"] .node {
  opacity: .85;
}

:is(.spine__stage, .scene__mobile)[data-state="bound"] .record__halo {
  opacity: .3;
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .node {
  opacity: .7;
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record__halo {
  opacity: .2;
}

/* -- 05. Relationships & Travelling Signals ------------------------------ */
.obj__links {
  opacity: 0;
  transition: opacity 1100ms var(--ease-weight);
}

.link {
  stroke: var(--signal-line);
  stroke-width: 1;
  fill: none;
}

.obj__signals {
  opacity: 0;
  transition: opacity 1100ms var(--ease-weight);
}

.obj__signal-track {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 1.5;
  stroke-dasharray: 80 860;
  animation: signalRun 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.obj__signal-pulse {
  fill: var(--ink);
  filter: drop-shadow(0 0 6px var(--accent-bright));
}

.obj__signal-pulse--1 {
  animation: pulseBeacon 4s ease-in-out infinite;
}

.obj__signal-pulse--2 {
  animation: pulseBeacon 4s ease-in-out infinite 2s;
}

@keyframes signalRun {
  0% { stroke-dashoffset: 940; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pulseBeacon {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

:is(.spine__stage, .scene__mobile)[data-state="bound"] .obj__links {
  opacity: .75;
}

:is(.spine__stage, .scene__mobile)[data-state="bound"] .obj__signals {
  opacity: .5;
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .obj__links {
  opacity: .6;
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .obj__signals {
  opacity: 0;
}

/* -- 06. Concentric Automation Boundaries -------------------------------- */
.obj__boundaries {
  opacity: 0;
  transform-origin: 300px 300px;
  transform: scale(.84);
  transition: transform 1400ms var(--ease-weight), opacity 1200ms var(--ease-weight);
}

.obj__axis {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.bound {
  fill: none;
  stroke-width: 1;
}

.bound--inner {
  stroke: var(--signal-line);
  stroke-width: 1.2;
}

.bound--mid {
  stroke: var(--line-strong);
  stroke-dasharray: 4 6;
}

.bound--outer {
  stroke: var(--line);
  stroke-dasharray: 2 8;
}

.obj__bound-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .14em;
}

.obj__bound-label--inner { fill: var(--signal); }
.obj__bound-label--mid   { fill: var(--ink-3); }
.obj__bound-label--outer { fill: var(--ink-4); }

.obj__request {
  transition: opacity 1000ms var(--ease-weight);
}

.obj__req-dot,
.obj__req-ring {
  transition: opacity 1000ms var(--ease-weight);
}

.obj__request--1 .obj__req-dot  { fill: var(--signal); }
.obj__request--1 .obj__req-ring { fill: none; stroke: var(--signal); stroke-width: 1; opacity: .4; }

.obj__request--2 .obj__req-dot  { fill: var(--moon); }
.obj__request--2 .obj__req-ring { fill: none; stroke: var(--moon); stroke-width: 1; opacity: .4; }

.obj__request--3 .obj__req-dot  { fill: var(--warn); }
.obj__request--3 .obj__req-ring { fill: none; stroke: var(--warn); stroke-width: 1; opacity: .4; }

:is(.spine__stage, .scene__mobile)[data-state="bound"] .obj__network {
  transform: scale(.50);
}

:is(.spine__stage, .scene__mobile)[data-state="bound"] .obj__boundaries {
  opacity: 1;
  transform: scale(1);
}

/* -- 07. Sovereign Client Handover Seal ----------------------------------- */
.obj__handoff {
  opacity: 0;
  transform-origin: 300px 300px;
  transform: scale(.88);
  transition: transform 1400ms var(--ease-weight), opacity 1200ms var(--ease-weight);
}

.obj__seal-axis {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.obj__seal-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.4;
  stroke-dasharray: 6 3;
}

.obj__seal-core {
  fill: var(--surface);
  stroke: var(--moon);
  stroke-width: 1;
}

.obj__seal-star {
  fill: var(--ink);
}

.obj__seal-title {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
}

.obj__seal-meta {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.5px;
}

.obj__seal-kana {
  fill: var(--signal);
  font-family: var(--font-kana);
  font-size: 11px;
  letter-spacing: 2px;
  opacity: .8;
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .obj__network {
  transform: scale(.42);
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .obj__boundaries {
  opacity: .85;
  transform: scale(.92);
}

:is(.spine__stage, .scene__mobile)[data-state="handoff"] .obj__handoff {
  opacity: 1;
  transform: scale(1);
}

/* -- 08. Editorial Typography & Dashboard Reduction ---------------------- */
.nav__link-en {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--ink-2);
}

.nav__link:hover .nav__link-en {
  color: var(--ink);
}

.orbit-key {
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.orbit-key__row {
  display: grid;
  grid-template-columns: .6rem minmax(0, 1fr);
  gap: .4rem .8rem;
}

.orbit-key__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: .55rem;
}

.orbit-key__dot--inner { background: var(--signal); }
.orbit-key__dot--mid   { background: var(--moon); }
.orbit-key__dot--outer { background: var(--ink-3); }

.orbit-key__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.orbit-key__desc {
  grid-column: 2;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Model section: calm editorial steps rather than admin pills */
.spine__flow .model__step {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.spine__flow .model__step--act {
  color: var(--signal);
  font-weight: 600;
}

.spine__flow .model__step--human {
  color: var(--moon);
  font-weight: 600;
}

.spine__flow .model__label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .25rem;
}

.spine__flow .model__arrow {
  color: var(--ink-4);
  font-size: .85rem;
  margin-inline: .25rem;
}

.btn {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.no-js [data-reveal],
.no-js [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}

/* -- 09. Responsive (Mobile) --------------------------------------------- */
@media (max-width: 1000px) {
  .spine {
    display: block;
  }

  .spine__visual {
    display: none;
  }

  .scene__mobile {
    display: block;
    width: min(88vw, 19rem);
    margin: 0 auto 2rem;
  }

  .scene__mobile * {
    transition: none !important;
    animation: none !important;
  }

  .spine__flow .hero {
    min-height: auto;
  }

  .spine__flow section {
    padding-block: 3.5rem;
  }

  .spine__flow .hero__text {
    max-width: 40rem;
  }
}

@media (max-width: 720px) {
  .spine__flow .stage {
    grid-template-columns: 1fr;
  }

  .no-js .nav {
    position: relative;
    height: auto;
  }

  .no-js .nav__inner {
    flex-wrap: wrap;
    padding-block: 1rem;
  }

  .no-js .nav__toggle {
    display: none;
  }

  .no-js .nav__links {
    display: flex;
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
  }
}

/* -- 10. Reduced Motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .spine__stage *,
  .scene__mobile * {
    transition: none !important;
    animation: none !important;
  }

  /* Keyframe animations disabled: signalRun, pulseBeacon */
  .obj__signal-track {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .obj__signal-pulse--1,
  .obj__signal-pulse--2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   SEMANTIC COLOUR
   Colour carries meaning, not decoration. Each family is tied to one concept,
   and the page begins almost monochrome so that colour appearing IS the story:
   structure forms, then relationships clarify, then something resolves, and
   only at the end does the page warm.

   Restraint is the point. Saturation stays low; a reader should feel that the
   page became legible rather than that it became colourful.
   ========================================================================== */

/* -- Records gain roles -------------------------------------------------
   All eight records are otherwise identical, so the scatter scene reads as
   texture. With roles, the visitor can see *which* knowledge is which before
   any label is read — which is the whole argument of the section. */
.record__sheet { transition: transform 1400ms var(--ease-weight), opacity 1100ms var(--ease-weight), stroke 900ms var(--ease-weight); }

/* Current, authoritative: Telstar's own periwinkle register. */
.record--current .record__sheet { stroke: var(--signal-line); }
.record--current .record__tag { fill: var(--signal); }

/* Superseded: warm faded parchment. Visibly older, not merely dimmer —
   dimming would read as "less important" rather than "no longer true". */
.record--superseded .record__sheet {
  stroke: var(--parchment-dim);
  fill: color-mix(in srgb, var(--surface-2) 88%, var(--parchment) 12%);
}
.record--superseded .record__tag,
.record--superseded .record__label { fill: var(--parchment); opacity: .72; }

/* Disputed: a restrained coral edge. Not red, because nothing here is an
   error — it is a judgement call waiting for a person. */
.record--disputed .record__sheet { stroke: var(--dispute-line); }
.record--disputed .record__tag { fill: var(--dispute); }

/* Resolved: the one path that now runs itself. This is the only teal on the
   page, so "this resolved" is legible at a glance. */
.record--resolved .record__sheet { stroke: var(--resolved-line); }
.record--resolved .record__tag { fill: var(--resolved); }

/* -- A disputed record keeps its coral edge through every state ---------
   Conflict does not resolve itself as the page scrolls; it stays visible
   until a person deals with it. That persistence is the point. */
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--disputed .record__sheet {
  stroke: var(--dispute-line);
}
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--superseded .record__sheet {
  stroke-dasharray: 4 3;
}

/* -- The resolved path lights when the constellation forms -------------
   One teal node, arriving with the relationships. */
/* The node is a plain `.node`, and the halo sits behind it — that is where the
   resolution glow goes, because a single teal point is easy to miss. */
.record--resolved .node { fill: var(--resolved); }
.record--resolved .record__halo { fill: var(--resolved-dim); }
.record--disputed .record__halo { fill: var(--dispute-dim); }
.record--superseded .node { fill: var(--parchment); }

/* -- Approval and handoff introduce warmth ------------------------------
   Amber appears here and essentially nowhere earlier, so the final quarter of
   the page reads as human. Two moments earn it: a person authorises an
   action, and a client takes ownership of the system. */
.model__step--human {
  color: var(--human);
  border-color: var(--human-line);
  background: var(--human-soft);
}
.model__step--act { color: var(--resolved); border-color: var(--resolved-line); background: var(--resolved-dim); }

/* Handoff and Managed are not two identical cards: one is a clean handover,
   the other keeps a human relationship alive. Warmer surfaces, no boxes. */
.engagement-pair { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
.engagement-option { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.engagement-option--handoff { border-top-color: var(--human-line); }
.engagement-option--managed { border-top-color: var(--signal-line); }
.engagement-option__label { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.engagement-option__label .kana { font-size: var(--t-small); }
.engagement-option--handoff .engagement-option__name { color: var(--human); }
.engagement-option__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--signal);
  max-width: none;
}
.engagement-option p { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

/* The whole closing third of the page warms slightly. Subtle enough that a
   reader would not name it, strong enough that the end feels different from
   the beginning. */
.spine__flow section#principles,
.spine__flow section#engagement { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--human) 5%, transparent)); }

/* -- Diagram accents: teal only where a path genuinely resolves --------- */
.orbit-key__dot--inner { background: var(--resolved); box-shadow: 0 0 0 3px var(--resolved-dim); }
.orbit-key__dot--mid { background: var(--human); box-shadow: 0 0 0 3px var(--human-soft); }
.orbit-key__dot--outer { background: var(--dispute); box-shadow: 0 0 0 3px var(--dispute-dim); }

/* -- One large katakana wordmark, not subtitles -------------------------
   The nav subtitles are gone. What remains replaces them with something that
   has compositional presence: a cropped テルスター bleeding off the section
   edge, which is identity rather than translation. */
.kana-ghost--te { font-size: clamp(18rem, 46vw, 44rem); opacity: .02; }

@media (prefers-reduced-motion: reduce) {
  .record__sheet { transition: none !important; }
}

/* ==========================================================================
   EDITORIAL SCALE
   The brief's critique was that the page was minimal in the wrong way: lots of
   empty space containing tiny technical things. The fix is fewer, stronger
   elements — larger display type, warmer body copy, and monospace reduced from
   a pervasive register to a small accent.
   ========================================================================== */

/* -- Display type carries more weight ---------------------------------- */
.spine__flow h1 {
  font-size: clamp(2.75rem, 1.4rem + 5vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 500;
}
.spine__flow h2 {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.028em;
}
.spine__flow h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }

/* -- Body copy warmer and more confident ------------------------------- */
.spine__flow .sec-head > p,
.spine__flow .why-body p,
.spine__flow .model__note {
  font-size: var(--t-lead);
  line-height: 1.72;
  color: var(--ink-2);
}

/* The use-case statement is the emotional centre of the page; it gets the
   largest body type after the headline. */
.case__said {
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.case__do { font-size: var(--t-body); line-height: 1.7; color: var(--ink-3); }

/* -- Monospace demoted to an accent -----------------------------------
   It stays for section indices, diagram metadata and true record ids — the
   places where a machine is genuinely speaking. It stops being the register
   for prose, labels and button text. */
.spine__flow .micro,
.spine__flow .card-index__note,
.spine__flow .principle dd,
.spine__flow .stage p,
.spine__flow .orbit-key__desc,
.spine__flow .deploy li {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-3);
}

/* Section indices keep mono — they are genuinely structural markers. */
.spine__flow .sec-num,
.spine__flow .stage__num,
.spine__flow .card-index__num { font-family: var(--font-mono); }

/* Labels above a heading stay mono but get room to breathe. */
.spine__flow .sec-head__meta .micro { font-family: var(--font-mono); letter-spacing: var(--track-micro); text-transform: uppercase; font-size: var(--t-micro); }

/* -- Fewer containers -------------------------------------------------
   Where composition can carry the hierarchy, the box comes off. The symptom
   grid and the principle grid keep their hairlines but lose their panel fill,
   so they read as an editorial list rather than as cards. */
.spine__flow .card-index { background: transparent; border: 0; border-radius: 0; gap: 0; }
.spine__flow .card-index__item { background: transparent; padding-block: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.spine__flow .card-index__item::before { width: 1px; }
.spine__flow .principles { background: transparent; border: 0; border-radius: 0; gap: 0; }
.spine__flow .principle { background: transparent; padding-inline: 0; border-top: 1px solid var(--line-soft); }
.spine__flow .principle:hover { background: transparent; }

/* -- Larger spacing around the important things ----------------------- */
.spine__flow .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.spine__flow section { padding-block: clamp(4.5rem, 9vw, 9rem); padding-inline: clamp(1rem, 3.5vw, 2.5rem); }

/* ==========================================================================
   MATERIALITY
   The brief's sharpest note: "everything lives on one perfectly flat digital
   plane." The archive is the page's central object, so it has to feel like
   physical material — planes with thickness, a surface that catches light, and
   records that cast a shadow when they separate from the body.

   No photorealism and no 3D library. Depth here is occlusion, offset and a
   directional shadow, which is how the eye reads paper anyway.
   ========================================================================== */

/* The closed archive: a cover over a body, with the hinge as a dark seam. The
   offset shadow is what makes it a solid object rather than two rectangles. */
.plate--front {
  fill: color-mix(in srgb, var(--surface-3) 92%, var(--signal) 8%);
  stroke: var(--signal-line);
  filter: drop-shadow(6px 8px 14px rgba(4, 5, 14, .7));
}
.plate--back {
  fill: color-mix(in srgb, var(--surface-2) 88%, var(--parchment) 12%);
  stroke: var(--line-strong);
}
.obj__spine { stroke: var(--line-strong); stroke-width: 2; }

/* Records become sheets that cast a shadow, so scattering reads as coming
   *off* the archive rather than being drawn beside it. */
.record__sheet { filter: drop-shadow(3px 5px 9px rgba(4, 5, 14, .62)); }
.record--superseded .record__sheet {
  /* Aged paper sits lower in the stack, so it throws less. */
  filter: drop-shadow(2px 3px 6px rgba(4, 5, 14, .5));
}
.record--disputed .record__sheet {
  /* A disputed sheet sits proud of the stack — it is the one nobody has filed
     yet, which is exactly why it is still contested. */
  filter: drop-shadow(4px 5px 10px rgba(4, 5, 14, .72));
}

/* Depth in the scatter: fragments at slightly different scales read as
   occupying different distances, which is what makes it feel like gravity. */
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--superseded { opacity: .9; }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--disputed { opacity: 1; }

/* -- Handoff: the same object, now the client's, so the material warms ----
   Telstar withdraws and the structure stays. Nothing moves; the light changes,
   which is the quietest way to say ownership transferred. */
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .plate--front {
  fill: color-mix(in srgb, var(--surface-3) 84%, var(--human) 16%);
  stroke: var(--human-line);
}
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .bound--inner { stroke: var(--resolved-line); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .bound--mid { stroke: var(--human-line); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .bound--outer { stroke: var(--dispute-line); }