/* text-safe bronze for small labels on bone (>= 4.5:1) */
.scene-asym, .scene-ten { --bronze-text: #6a5a37; }
/* Four narrative scenes (asymmetry, operating loop, scope, ten people).
   One material language with the opening: the champagne thread is infrastructure,
   the gold ring is a person's judgment, platinum slips are work, grey slips are coordination burden. */

.scene { position: relative; }
.scene-stage { padding: 110px var(--gutter) 64px; display: grid; gap: 4vh; }
.scene-head .display { font-size: clamp(1.9rem, 3.5vw, 3.4rem); max-width: 20ch; }
.scene-head { display: grid; gap: 22px; align-content: start; }
.scene-head .body { max-width: 46ch; }

/* pinned choreography only when motion runs; otherwise everything reads in flow */
.has-motion .scene-asym { height: 340vh; }
.has-motion .loop-pin { height: 620vh; }
.has-motion .loop-pin > .scene-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.has-motion .scene-scope { height: 400vh; }
.has-motion .ten-pin { height: 380vh; }
.has-motion .ten-pin > .scene-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.has-motion .scene > .scene-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }

/* beats: three short states synced to the art, all readable at once without motion */
.scene-beats { display: grid; gap: 14px; counter-reset: beat; }
.scene-beats li { position: relative; padding-left: 22px; max-width: 44ch; font-size: .98rem; line-height: 1.5; color: rgba(4, 0, 30, .74); transition: opacity var(--beat) var(--ease), color var(--beat) var(--ease); }
.scene-beats li b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.22rem; color: var(--ink); margin-bottom: 2px; }
.scene-beats li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bronze); transition: background var(--beat) var(--ease); }
.has-motion .scene-beats li { color: rgba(4, 0, 30, .6); }
.has-motion .scene-beats li b { color: rgba(4, 0, 30, .62); }
.has-motion .scene-beats li.is-on, .has-motion .scene-beats li.is-on b { color: var(--ink); }
.has-motion .scene-beats li.is-on { color: rgba(4, 0, 30, .8); }
.scene-beats li.is-on::before { background: var(--satin); border-color: var(--satin); }

figure figcaption { font-size: .78rem; color: rgba(4, 0, 30, .6); }
.world-obsidian figure figcaption { color: rgba(216, 213, 206, .62); }

/* ================= 1 · ASYMMETRY ================= */
.scene-asym .scene-stage { grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); align-items: center; gap: 4vw; }
.asym-art { position: relative; height: min(68svh, 640px); }
.asym-art figcaption { position: absolute; left: 0; bottom: -28px; }
.gate { position: absolute; top: 0; bottom: 0; width: 1px; display: block; }
.gate:nth-child(1) { left: 31%; } .gate:nth-child(2) { left: 42%; } .gate:nth-child(3) { left: 53%; }
.gate i { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--satin) 12%, var(--satin) 88%, transparent); transform-origin: 50% 0; transform: scaleY(var(--g, 1)); }
.gate b, .gate small { position: absolute; left: 8px; white-space: nowrap; opacity: var(--g, 1); }
.gate b { top: -2px; font-family: var(--f-display); font-weight: 400; font-size: 1rem; color: var(--ink); }
.gate small { top: 22px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-text); }
.lane { position: absolute; left: 60%; right: 0; opacity: var(--g, 1); }
.lane[data-lane="0"] { top: 22%; } .lane[data-lane="1"] { top: 54%; } .lane[data-lane="2"] { top: 86%; }
.asym-lanes .lane { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--bronze-text); line-height: 1; padding-bottom: 8px; transform: translateY(-100%); border-bottom: 1px solid rgba(130, 113, 78, .35); }
.asym-lanes .lane.is-human { color: var(--ink); border-bottom-color: var(--satin); }
.asym-person { position: absolute; left: 90%; top: 54%; width: 120px; margin-left: -60px; margin-top: -70px; display: grid; justify-items: center; gap: 10px; opacity: var(--p, .45); transition: opacity var(--beat) var(--ease); z-index: 1; }
.asym-person span { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--ink); }
.ring { display: block; width: 62px; height: 84px; border-radius: 50%; border: 2px solid var(--satin); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 30px -18px rgba(130, 113, 78, .7); }
.asym-slips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.asym-slips li { padding: 9px 13px; border-radius: 7px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(130, 113, 78, .28); font-size: .82rem; color: rgba(4, 0, 30, .78); white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(4, 0, 30, .35); }
.asym-slips.is-placed { position: absolute; inset: 0; display: block; z-index: 2; }
.asym-slips.is-placed li { position: absolute; left: 0; top: 0; will-change: transform; transition: background var(--half) var(--ease), border-color var(--half) var(--ease); }
.asym-slips li.to-human { background: #fffaf0; border-color: var(--satin); color: var(--ink); }
.asym-slips li.is-routed { padding-left: 22px; }
.asym-slips li.is-routed::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--satin); }

/* ================= 2 · OPERATING LOOP ================= */
.scene-loop .scene-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; gap: 4vw; }
.loop-now { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid rgba(227, 199, 122, .35); border-bottom: 1px solid rgba(227, 199, 122, .2); min-height: 9.5em; }
.loop-step { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.loop-now strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.7rem); color: var(--bone); line-height: 1.2; }
.loop-now p { color: rgba(216, 213, 206, .78); max-width: 42ch; }
.loop-art { position: relative; aspect-ratio: 1000 / 620; width: 100%; }
.loop-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-path { fill: none; stroke: rgba(216, 213, 206, .16); stroke-width: 1.5; }
.loop-path-run { fill: none; stroke: var(--champagne); stroke-width: 2; stroke-linecap: round; }
.loop-boundary line { stroke: rgba(227, 199, 122, .55); stroke-width: 1; stroke-dasharray: 3 5; }
.loop-boundary text { font-family: var(--f-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: rgba(227, 199, 122, .7); }
.loop-node circle { fill: var(--obsidian); stroke: rgba(216, 213, 206, .4); stroke-width: 1.2; transition: stroke var(--half) var(--ease), fill var(--half) var(--ease); }
.loop-node text { font-family: var(--f-body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: rgba(216, 213, 206, .55); transition: fill var(--half) var(--ease); }
.loop-node.is-past circle { stroke: var(--satin); fill: rgba(227, 199, 122, .25); }
.loop-node.is-on circle { stroke: var(--champagne); fill: var(--champagne); }
.loop-node.is-on text, .loop-node.is-past text { fill: var(--champagne); }
.loop-node.human ellipse { fill: none; stroke: var(--champagne); stroke-width: 2.4; }
.loop-node.human .human-label { font-size: 14px; fill: var(--champagne); letter-spacing: .16em; }
.loop-node.human.is-on ellipse { stroke-width: 3; }
.loop-token { position: absolute; left: 0; top: 0; width: min(270px, 42%); padding: 14px 16px; border-radius: 12px; display: grid; gap: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(227, 199, 122, .4);
  backdrop-filter: blur(8px) saturate(1.3); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); will-change: transform; z-index: 2; }
.loop-token small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(216, 213, 206, .62); }
.loop-token q { font-family: var(--f-display); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: var(--bone); quotes: "“" "”"; }
.loop-token ul { list-style: none; display: grid; gap: 4px; }
.loop-token li { font-size: .76rem; line-height: 1.4; color: rgba(216, 213, 206, .72); padding-left: 12px; position: relative; }
.loop-token li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--satin); }
.loop-token li.is-new { color: var(--champagne); }
.loop-token.at-human { border-color: var(--champagne); }
.loop-caption { position: absolute; left: 0; bottom: -30px; }
.proof-reading { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; padding: 40px var(--gutter) 80px; counter-reset: step; }
.proof-reading li { counter-increment: step; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(216, 213, 206, .2); color: rgba(216, 213, 206, .7); font-size: .82rem; }
.proof-reading li::before { content: counter(step, decimal-leading-zero); font-size: .72rem; letter-spacing: .12em; color: var(--satin); }
.proof-reading strong { color: var(--bone); font-weight: 500; }
.proof-reading li.is-on { border-top-color: var(--champagne); }

/* ================= 3 · SCOPE ================= */
.scene-scope .scene-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; gap: 4vw; }
.scope-beats { display: grid; gap: 16px; }
.scope-beats li { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid rgba(216, 213, 206, .2); transition: opacity var(--beat) var(--ease), border-color var(--beat) var(--ease); }
.scope-beats b { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; color: var(--bone); }
.scope-beats b em { color: var(--satin); }
.scope-beats p { color: rgba(216, 213, 206, .74); max-width: 44ch; font-size: .95rem; }
.scope-status { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(227, 199, 122, .8); }
.has-motion .scope-beats li b, .has-motion .scope-beats li p { color: rgba(216, 213, 206, .62); }
.has-motion .scope-beats li.is-on { border-left-color: var(--champagne); }
.has-motion .scope-beats li.is-on b { color: var(--bone); }
.has-motion .scope-beats li.is-on p { color: rgba(216, 213, 206, .82); }
.scope-art { position: relative; height: min(74svh, 700px); }
.scope-art svg { width: 100%; height: 100%; overflow: hidden; }
.scope-art figcaption { position: absolute; left: 0; bottom: -26px; }
.unit-loop { fill: none; stroke: var(--champagne); stroke-width: 1.4; opacity: .85; }
.unit-dot { fill: rgba(227, 199, 122, .7); }
.unit-ring { fill: none; stroke: var(--champagne); stroke-width: 2; }
.unit-core { fill: rgba(227, 199, 122, .18); }
.unit-link { fill: none; stroke: rgba(216, 213, 206, .45); stroke-width: 1; stroke-dasharray: 2 5; }
.cluster-link { fill: none; stroke: rgba(227, 199, 122, .55); stroke-width: 1.4; }
.scope-tag { font-family: var(--f-display); font-style: italic; font-size: 18px; fill: rgba(245, 242, 234, .82); }

/* ================= 4 · TEN PEOPLE ================= */
.scene-ten .scene-stage { grid-template-rows: auto 1fr; gap: 3vh; }
.scene-ten .scene-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 4vw; }
.scene-ten .scene-head .display { max-width: 24ch; font-size: clamp(1.8rem, 3vw, 3rem); }
.ten-art { position: relative; display: grid; gap: 14px; align-content: center; }
.ten-note { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-text); }
.people { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3vh 2vw; }
.person { position: relative; display: grid; justify-items: start; gap: 4px; padding: 12px 0 18px; }
.person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--satin); transform-origin: 0 50%; transform: scaleX(var(--rail, 1)); }
.person-ring { width: 40px; height: 54px; border-radius: 50%; border: 2px solid var(--satin); opacity: var(--lit, 1); transition: opacity var(--half) var(--ease); margin-bottom: 6px; box-shadow: 0 12px 22px -14px rgba(130, 113, 78, .8); }
.person b { font-family: var(--f-display); font-weight: 400; font-size: 1.08rem; color: var(--ink); }
.person em { font-style: italic; font-family: var(--f-display); font-weight: 300; font-size: .98rem; color: rgba(4, 0, 30, .74); opacity: var(--lit, 1); transition: opacity var(--half) var(--ease); max-width: 18ch; }
.burdens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.burden { font-size: .7rem; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(130, 113, 78, .3); color: rgba(4, 0, 30, .6); background: rgba(255, 255, 255, .5); }
.has-motion .burdens { position: absolute; left: 0; top: 0; margin: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.has-motion .burden { position: absolute; left: 0; top: 0; will-change: transform; transition: background var(--half) var(--ease), color var(--half) var(--ease); background: rgba(232, 228, 219, .95); }
.has-motion .burden.is-carried { background: var(--bone); color: rgba(130, 113, 78, .95); border-color: rgba(201, 179, 106, .6); }
.ten-art figcaption { margin-top: 6px; }
.scene-cta { padding: 48px var(--gutter) 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.scene-cta .cta-context { max-width: 52ch; color: rgba(4, 0, 30, .72); }

/* ================= phones and tablets: composed, not shrunk ================= */
@media (max-width: 960px) {
  .scene-asym .scene-stage, .scene-loop .scene-stage, .scene-scope .scene-stage { grid-template-columns: 1fr; align-content: start; gap: 3vh; padding-top: 88px; }
  .scene-head .display { font-size: clamp(1.6rem, 6.4vw, 2.4rem); }
  .has-motion .scene-asym .scene-beats li:not(.is-on), .has-motion .scope-beats li:not(.is-on) { display: none; }
  .has-motion .scene-loop .scene-head .body, .has-motion .scene-loop .scene-head .cta-context, .has-motion .scene-loop .scene-head .btn,
  .has-motion .scene-scope .scene-head .body { display: none; }
  .asym-art { height: 46svh; }
  .gate b { font-size: .82rem; } .gate small { display: none; }
  .gate:nth-child(1) { left: 6%; } .gate:nth-child(2) { left: 24%; } .gate:nth-child(3) { left: 42%; }
  .gate b { writing-mode: vertical-rl; transform: rotate(180deg); top: 4px; left: 6px; letter-spacing: .04em; }
  .lane { left: 54%; }
  .asym-lanes .lane { white-space: normal; max-width: 44vw; line-height: 1.3; }
  .asym-person { left: 88%; }
  .asym-person .ring { width: 44px; height: 60px; }
  .scope-art { height: 40svh; }
  .loop-now { min-height: 8.5em; padding: 12px 0; }
  .loop-token { position: relative; left: auto; top: auto; transform: none !important; width: 100%; margin-top: 12px; padding: 10px 12px; }
  .loop-token q { font-size: .92rem; }
  .loop-token li:not(.is-new) { display: none; }
  .loop-art { aspect-ratio: auto; }
  .loop-art svg { position: relative; inset: auto; height: auto; aspect-ratio: 1000 / 620; }
  .loop-node text { font-size: 22px; }
  .loop-node:not(.is-on):not(.human) text { display: none; }
  .proof-reading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene-ten .scene-head { grid-template-columns: 1fr; }
  .has-motion .ten-pin { height: auto; }
  .has-motion .ten-pin > .scene-stage { position: relative; height: auto; overflow: visible; }
  .has-motion .scene-ten .scene-beats li { opacity: 1; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .person { min-height: 190px; }
}

/* static: final states, fully readable */
.is-static .scene > .scene-stage { position: relative; height: auto; overflow: visible; }
.is-static .loop-token { position: relative; left: auto; top: auto; transform: none !important; width: auto; max-width: 420px; margin-top: 16px; }
.is-static .loop-art { aspect-ratio: auto; }
.is-static .loop-art svg { position: relative; inset: auto; height: auto; aspect-ratio: 1000 / 620; }
.is-static .loop-caption { position: static; display: block; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before { transition: none !important; }
}

/* fit the pinned columns to the screen height as well as its width */
.has-motion .scene .scene-stage, .has-motion .loop-pin > .scene-stage { padding-top: clamp(76px, 11vh, 110px); padding-bottom: clamp(40px, 7vh, 64px); }
.scene-head .display { font-size: clamp(1.6rem, min(3.4vw, 5.4vh), 3.4rem); }
.scene-head { gap: clamp(12px, 2.2vh, 22px); }
.loop-now { min-height: 0; padding: clamp(10px, 1.6vh, 18px) 0; }
.loop-now strong { font-size: clamp(1.15rem, min(1.8vw, 3vh), 1.7rem); }
@media (min-width: 961px) and (max-height: 860px) {
  .has-motion .scene-loop .scene-head .body, .has-motion .scene-scope .scene-head .body { display: none; }
  .has-motion .scene-loop .cta-context { display: none; }
  .scene-beats li { font-size: .9rem; }
  .scope-beats { gap: 10px; }
}
@media (min-width: 961px) and (max-height: 700px) {
  .has-motion .scene-beats li:not(.is-on) { display: none; }
  .has-motion .scope-beats li:not(.is-on) { display: none; }
}

/* ten people on shorter screens: tighter figures so all ten stay in view */
@media (min-width: 961px) and (max-height: 860px) {
  .people { gap: 1.6vh 2vw; }
  .person { padding: 6px 0 14px; }
  .person-ring { width: 30px; height: 40px; margin-bottom: 2px; }
  .person b { font-size: .98rem; } .person em { font-size: .9rem; }
  .scene-ten .scene-head .display { font-size: clamp(1.5rem, min(2.6vw, 4.6vh), 2.6rem); }
  .has-motion .ten-art figcaption { display: none; }
}