/* Olive — four pillars pinned scroll narrative (section 05).
   Uses the scoped white/green product tokens defined in landing.css. */

.narrative-section { padding-block: var(--rhythm); }

.pillar-index { border-top: 1px solid var(--line); }
.pillar-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.pillar-index__head .mono { color: var(--signal); }
.pillar-index__head .body-m { color: var(--text-3); font-size: 14px; text-align: right; }
.pillar-item { border-bottom: 1px solid var(--line); }
.pillar-item__summary {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.pillar-item__summary::-webkit-details-marker { display: none; }
.pillar-item__summary:hover .pillar-item__name { color: var(--signal); }
.pillar-item__num { color: var(--signal); font-size: 11px; }
.pillar-item__label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pillar-item__role { color: var(--text-3); font-size: 9px; letter-spacing: .14em; }
.pillar-item__name {
  color: var(--cream);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
  transition: color var(--motion-fast) var(--ease-out);
}
.pillar-item__toggle {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
}
.pillar-item__toggle::before,
.pillar-item__toggle::after {
  content: "";
  position: absolute;
  background: var(--text-3);
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.pillar-item__toggle::before { top: 6px; left: 0; width: 14px; height: 1px; }
.pillar-item__toggle::after { top: 0; left: 6px; width: 1px; height: 14px; }
.pillar-item[open] .pillar-item__toggle::before { background: var(--signal); }
.pillar-item[open] .pillar-item__toggle::after { transform: scaleY(0); }
.pillar-item__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 48px;
  padding: 0 0 28px 76px;
}
.pillar-item__body p { max-width: 60ch; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.pillar-item__body .tlink { margin-top: 18px; }
.pillar-item__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 8px;
  list-style: none;
}
.pillar-item__tags li {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 9px;
}
.pillar-index__foundation {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.pillar-index__foundation .mono { flex: none; color: var(--signal); }
.pillar-index__foundation > span:nth-child(2) { flex: 1; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.pillar-index__foundation svg {
  flex: none;
  color: var(--text-3);
  transition: color var(--motion-fast) var(--ease-out), transform var(--motion-standard) var(--ease-out);
}
.pillar-index__foundation:hover svg { color: var(--signal); transform: translateX(4px); }
.narrative__lead-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.narrative__lead-in p:first-child { flex: none; color: var(--signal); }
.narrative__lead-in p:last-child { max-width: 52ch; color: var(--text-2); font-size: 15px; text-align: right; }
.narrative { margin-top: 8px; }
.narrative__more { margin-top: 22px; }

.narrative__grid {
  display: grid;
  grid-template-columns: minmax(340px, .66fr) minmax(0, 1.34fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.narrative__copy { min-width: 0; }

.narrative__chapter {
  min-height: 92vh;
  padding: 8vh 0 6vh;
  border-top: 1px solid var(--line);
}
.narrative__chapter:first-child { border-top: 0; padding-top: 2vh; }
.narrative__chapter--finale { min-height: 70vh; padding-bottom: 12vh; }
@media (min-width: 900px) { .narrative__chapter--finale { padding-bottom: 60vh; } }

.narrative__kicker {
  color: var(--signal);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  transition: color 250ms var(--ease-out);
}
.narrative__chapter.is-active .narrative__kicker { color: var(--highlight); }

.narrative__title {
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}
.narrative__lede {
  margin-top: 14px;
  max-width: 44ch;
  color: var(--cream);
  font-size: 18px;
  line-height: 1.45;
}
.narrative__chapter p {
  margin-top: 14px;
  max-width: 50ch;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.58;
}
.narrative__list {
  list-style: none;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.narrative__list li {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.narrative__list .mono {
  color: var(--signal);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.narrative__list li > span:last-child {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.narrative__rwa {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--signal);
  border-radius: 0 4px 4px 0;
}
.narrative__rwa > p:first-child {
  margin: 0;
  color: var(--signal);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.narrative__rwa p {
  margin-top: 10px;
  max-width: 52ch;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}
.narrative__rwa-foot {
  color: var(--text-3) !important;
  font-size: 9.5px !important;
  letter-spacing: .04em;
  line-height: 1.55 !important;
  text-transform: none !important;
}
.narrative__note {
  margin-top: 24px;
  color: var(--text-3);
  font-size: 9.5px;
  letter-spacing: .05em;
}
.narrative__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* sticky product canvas */
.narrative__visual { position: relative; align-self: stretch; min-width: 0; }
.narrative__sticky {
  position: sticky;
  top: calc(72px + 24px);
  height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  box-shadow: var(--ui-shadow);
}
.narrative__chrome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 14px;
  background: var(--ui-soft);
  border-bottom: 1px solid var(--ui-line);
}
.narrative__chrome-label {
  color: var(--ui-ink-2);
  font-size: 9px;
  letter-spacing: .12em;
}
.narrative__chapter-label {
  margin-left: auto;
  color: var(--ui-green);
  font-size: 9px;
  letter-spacing: .12em;
}
.narrative__tag {
  color: var(--ui-muted);
  font-size: 8px;
  letter-spacing: .08em;
  border: 1px solid var(--ui-line-strong);
  border-radius: 2px;
  padding: 3px 5px;
  white-space: nowrap;
}
.narrative__progress-bar { height: 2px; background: var(--ui-line); flex: none; }
.narrative__progress-bar span {
  display: block;
  width: calc(var(--story, 0) * 100%);
  height: 100%;
  background: var(--ui-green);
  transition: width 80ms linear;
}
.narrative__canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--ui-screen);
  border-inline: 1px solid var(--ui-line);
}
.system { display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; }
.system rect,
.system circle,
.system line,
.system path { vector-effect: non-scaling-stroke; }

.narrative__progress {
  display: flex;
  flex: none;
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-line);
}
.narrative__progress a {
  flex: 1;
  padding: 9px 8px;
  color: var(--ui-faint);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-right: 1px solid var(--ui-line);
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.narrative__progress a:last-child { border-right: 0; }
.narrative__progress a span { color: var(--ui-green); margin-right: 3px; }
.narrative__progress a:hover { color: var(--ui-ink); }
.narrative__progress a.is-active { color: var(--ui-ink); background: var(--ui-soft); }

/* SVG scene */
.system text { font-family: var(--font-mono); }
.sys-h1 { font-family: var(--font-sans); font-size: 26px; font-weight: 500; fill: var(--ui-ink); }
.sys-kicker { font-size: 10px; letter-spacing: .14em; fill: var(--ui-green); }
.sys-sub { font-size: 10px; fill: var(--ui-muted); }
.sys-label-green { font-size: 9.5px; letter-spacing: .08em; fill: var(--ui-green); }
.sys-label-muted { font-size: 9px; fill: var(--ui-ink-2); }
.sys-label-faint { font-size: 8px; letter-spacing: .06em; fill: var(--ui-faint); }
.sys-chip-num { font-size: 10px; fill: var(--ui-green); }
.sys-chip-name { font-family: var(--font-sans); font-size: 12px; fill: var(--ui-ink); }
.sys-chip-tag { font-size: 8px; letter-spacing: .1em; fill: var(--ui-muted); }
.sys-card-num { font-size: 10px; fill: var(--ui-green); }
.sys-card-title { font-family: var(--font-sans); font-size: 14px; fill: var(--ui-ink); }
.sys-card-role { font-size: 8px; letter-spacing: .1em; fill: var(--ui-green); }
.sys-station-title { font-family: var(--font-sans); font-size: 12px; fill: var(--ui-ink); }
.sys-station-role { font-size: 8px; letter-spacing: .08em; fill: var(--ui-green); }
.sys-station-num { font-size: 8px; fill: var(--ui-muted); }
.sys-wallet-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: var(--ui-ink); }
.sys-wallet-sub { font-size: 8px; letter-spacing: .1em; fill: var(--ui-muted); }
.sys-system { font-size: 9px; letter-spacing: .1em; fill: var(--ui-green); }

.sys-grid line { stroke: var(--ui-line); stroke-width: 1; opacity: .45; }
.sys-panel { fill: var(--ui-surface); stroke: var(--ui-line-strong); }
.sys-line-soft { fill: none; stroke: var(--ui-line-strong); }
.sys-line { fill: none; stroke: var(--ui-green); }
.sys-boundary { fill: none; stroke: var(--ui-line-strong); stroke-dasharray: 3 6; }
.sys-dash { fill: none; stroke: var(--ui-green-2); stroke-dasharray: 3 5; opacity: .6; }
.sys-draw {
  fill: none;
  stroke: var(--ui-green-2);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 120ms linear;
}
.sys-net-dot { fill: var(--ui-surface); stroke: var(--ui-green-2); stroke-width: 1; }
.sys-net-line { fill: none; stroke: var(--ui-green-2); stroke-width: 1; opacity: .5; }
.sys-hub { fill: var(--ui-surface); stroke: var(--ui-green); }
.sys-line,
.sys-line-soft,
.sys-draw,
.sys-dash,
.sys-net-line,
.sys-boundary,
.sys-rwa-line,
.sys-loop-path,
.sys-rwa-thread,
.sys-rail-line,
.sys-spine,
.sys-loop-arrow { stroke-linecap: butt; stroke-linejoin: miter; }
.sys-loop-path,
.sys-rwa-thread { stroke-linejoin: round; }
.sys-station > circle:first-of-type { fill: var(--ui-surface); stroke: var(--ui-green); }
.sys-mark-ink { color: var(--ui-ink); }

.sys-rail-line { stroke: var(--ui-line-strong); }
.sys-chip { opacity: .55; transition: opacity 300ms var(--ease-out); }
.sys-chip-box { fill: var(--ui-surface); stroke: var(--ui-line-strong); transition: stroke 300ms var(--ease-out); }
.sys-chip-bar { fill: var(--ui-line-strong); transition: fill 300ms var(--ease-out); }
.narrative__sticky[data-act="1"] .sys-chip[data-chip="1"],
.narrative__sticky[data-act="2"] .sys-chip[data-chip="2"],
.narrative__sticky[data-act="3"] .sys-chip[data-chip="3"],
.narrative__sticky[data-act="4"] .sys-chip[data-chip="4"],
.narrative__sticky[data-act="5"] .sys-chip { opacity: 1; }
.narrative__sticky[data-act="1"] .sys-chip[data-chip="1"] .sys-chip-box,
.narrative__sticky[data-act="2"] .sys-chip[data-chip="2"] .sys-chip-box,
.narrative__sticky[data-act="3"] .sys-chip[data-chip="3"] .sys-chip-box,
.narrative__sticky[data-act="4"] .sys-chip[data-chip="4"] .sys-chip-box,
.narrative__sticky[data-act="5"] .sys-chip .sys-chip-box { stroke: var(--ui-green); }
.narrative__sticky[data-act="1"] .sys-chip[data-chip="1"] .sys-chip-bar,
.narrative__sticky[data-act="2"] .sys-chip[data-chip="2"] .sys-chip-bar,
.narrative__sticky[data-act="3"] .sys-chip[data-chip="3"] .sys-chip-bar,
.narrative__sticky[data-act="4"] .sys-chip[data-chip="4"] .sys-chip-bar,
.narrative__sticky[data-act="5"] .sys-chip .sys-chip-bar { fill: var(--ui-green); }

.sys-rwa-line { stroke: var(--ui-green-2); stroke-dasharray: 3 6; opacity: .55; }
.sys-rwa-product rect { fill: var(--ui-surface); stroke: var(--ui-line-strong); }
.sys-spine { stroke: var(--ui-green-2); }
.sys-spine-dot circle { fill: var(--ui-lime); stroke: var(--ui-green); }
.sys-spine-dot { animation: sys-rise 4.5s linear infinite; }
@keyframes sys-rise {
  0% { transform: translateY(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(-64px); opacity: 0; }
}
.sys-wallet-box { fill: var(--ui-surface); stroke: var(--ui-green-2); }
.sys-wallet-bar { fill: var(--ui-green); }

.sys-engine > rect,
.sys-strategy > rect,
.sys-dossier > rect,
.sys-agent > rect,
.sys-execution > rect,
.sys-holdings > rect,
.sys-rwa-holdings > rect,
.sys-activity > rect,
.sys-rwa-inline rect,
.sys-rwa-product rect {
  fill: var(--ui-surface);
  stroke: var(--ui-line-strong);
}
.sys-soft-box { fill: var(--ui-screen); stroke: var(--ui-line); }
.sys-bar { fill: var(--ui-line-strong); }
.sys-protocols rect { fill: var(--ui-surface); stroke: var(--ui-line-strong); }
.sys-protocols text { font-size: 7.5px; fill: var(--ui-ink-2); }
.sys-field-values rect { fill: var(--ui-screen); stroke: var(--ui-line); }
.sys-ring-base { fill: none; stroke: var(--ui-line-strong); stroke-width: 10; }
.sys-ring-arc {
  fill: none;
  stroke: var(--ui-green);
  stroke-width: 10;
  stroke-dasharray: .38 1;
  stroke-dashoffset: .05;
  transform: rotate(-90deg);
  transform-origin: 660px 318px;
}
.sys-exec-dot { fill: var(--ui-lime); stroke: var(--ui-green); }
.sys-legend rect:nth-of-type(1) { fill: var(--ui-green); }
.sys-legend rect:nth-of-type(2) { fill: var(--ui-green-2); }
.sys-legend rect:nth-of-type(3) { fill: var(--ui-lime); }
.sys-alloc-arc { fill: none; stroke-width: 12; }
.sys-alloc-arc--a { stroke: var(--ui-green); stroke-dasharray: .32 .68; stroke-dashoffset: .04; }
.sys-alloc-arc--b { stroke: var(--ui-green-2); stroke-dasharray: .24 .76; stroke-dashoffset: -.28; }
.sys-alloc-arc--c { stroke: var(--ui-lime); stroke-dasharray: .18 .82; stroke-dashoffset: -.52; }
.sys-alloc-arc { transform: rotate(-90deg); transform-origin: 410px 330px; }

.sys-loop-path {
  fill: none;
  stroke: var(--ui-green-2);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease-out) 100ms;
}
.sys-rwa-thread {
  fill: none;
  stroke: var(--ui-green-2);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: .45;
}
.sys-loop-station > circle:first-of-type { fill: var(--ui-surface); stroke: var(--ui-green); }
.sys-station-ring { fill: none; stroke: var(--ui-green); stroke-width: 2; }
.sys-station-line { fill: none; stroke: var(--ui-green); }
.sys-station-dot { fill: var(--ui-green); }
.sys-loop-arrow { fill: none; stroke: var(--ui-green); stroke-width: 1; }
.sys-center { fill: none; stroke: var(--ui-green); }

/* act visibility */
.sys-act {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), visibility 0s 0s;
}
.narrative__sticky[data-act="0"] .sys-act[data-act-group="0"],
.narrative__sticky[data-act="1"] .sys-act[data-act-group="1"],
.narrative__sticky[data-act="2"] .sys-act[data-act-group="2"],
.narrative__sticky[data-act="3"] .sys-act[data-act-group="3"],
.narrative__sticky[data-act="4"] .sys-act[data-act-group="4"],
.narrative__sticky[data-act="5"] .sys-act[data-act-group="5"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), visibility 0s 0s;
}
.narrative__sticky[data-act="1"] .sys-draw,
.narrative__sticky[data-act="2"] .sys-draw { stroke-dashoffset: calc(1 - var(--p, 0)); }
.narrative__sticky[data-act="5"] .sys-loop-path { stroke-dashoffset: 0; }

.sys-frag { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.sys-act[data-act-group="1"] .sys-frag--a { opacity: 0; transform: translate(-30px, -18px); }
.sys-act[data-act-group="1"] .sys-frag--b { opacity: 0; transform: translate(30px, -18px); }
.sys-act[data-act-group="1"] .sys-frag--c { opacity: 0; transform: translate(-30px, 18px); }
.sys-act[data-act-group="1"] .sys-frag--d { opacity: 0; transform: translate(30px, 18px); }
.narrative__sticky[data-act="1"] .sys-frag--a,
.narrative__sticky[data-act="1"] .sys-frag--b,
.narrative__sticky[data-act="1"] .sys-frag--c,
.narrative__sticky[data-act="1"] .sys-frag--d { opacity: 1; transform: none; }
.narrative__sticky[data-act="1"] .sys-frag--a { transition-delay: 80ms; }
.narrative__sticky[data-act="1"] .sys-frag--b { transition-delay: 160ms; }
.narrative__sticky[data-act="1"] .sys-frag--c { transition-delay: 240ms; }
.narrative__sticky[data-act="1"] .sys-frag--d { transition-delay: 320ms; }

.sys-row {
  --row-p: clamp(0, calc((var(--p, 0) - var(--i) * 0.1) * 12), 1);
  opacity: var(--row-p);
  transform: translateY(calc((1 - var(--row-p)) * 6px));
}
.sys-access-bridge,
.sys-gate-bridge { opacity: 0; transition: opacity 300ms var(--ease-out); }
.narrative__sticky[data-act="1"] .sys-access-bridge,
.narrative__sticky[data-act="3"] .sys-gate-bridge { opacity: 1; }
.sys-rwa-dot {
  fill: var(--ui-lime);
  stroke: var(--ui-green);
  stroke-width: 1;
  transform: translateX(calc(var(--story, 0) * 540px));
}

/* Chapter 04 progressive portfolio sequence */
.sys-input > rect:first-of-type { fill: var(--ui-surface); stroke: var(--ui-line-strong); }
.sys-skeleton {
  fill: var(--ui-screen);
  stroke: var(--ui-line-strong);
  stroke-dasharray: 2 3;
}
.sys-input { transition: transform 80ms linear; }
.narrative__sticky[data-act="4"][data-phase="0"] .sys-input {
  transform: translate(calc(var(--p, 0) * var(--dx, 0px)), calc(var(--p, 0) * var(--dy, 0px)));
}
.sys-spark {
  fill: none;
  stroke: var(--ui-green);
  stroke-width: 1.5;
}

.narrative__phase-dots { display: none; align-items: center; gap: 4px; }
.narrative__phase-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ui-line-strong);
  transition: background-color 200ms var(--ease-out);
}
.narrative__sticky[data-act="4"] .narrative__phase-dots { display: inline-flex; }
.narrative__sticky[data-act="4"][data-phase="0"] .narrative__phase-dots i:nth-child(1),
.narrative__sticky[data-act="4"][data-phase="1"] .narrative__phase-dots i:nth-child(2),
.narrative__sticky[data-act="4"][data-phase="2"] .narrative__phase-dots i:nth-child(3),
.narrative__sticky[data-act="4"][data-phase="3"] .narrative__phase-dots i:nth-child(4),
.narrative__sticky[data-act="4"][data-phase="4"] .narrative__phase-dots i:nth-child(5) { background: var(--ui-green); }

.narrative__sticky[data-act="4"] .sys-inputs,
.narrative__sticky[data-act="4"] .sys-portfolio,
.narrative__sticky[data-act="4"] .sys-holdings,
.narrative__sticky[data-act="4"] .sys-activity,
.narrative__sticky[data-act="4"] .sys-rwa-holdings,
.narrative__sticky[data-act="4"] .sys-final-note {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s 320ms;
}
.narrative__sticky[data-act="4"][data-phase="0"] .sys-inputs,
.narrative__sticky[data-act="4"][data-phase="1"] .sys-portfolio,
.narrative__sticky[data-act="4"][data-phase="2"] .sys-portfolio,
.narrative__sticky[data-act="4"][data-phase="2"] .sys-holdings,
.narrative__sticky[data-act="4"][data-phase="3"] .sys-portfolio,
.narrative__sticky[data-act="4"][data-phase="3"] .sys-holdings,
.narrative__sticky[data-act="4"][data-phase="3"] .sys-activity,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-portfolio,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-holdings,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-activity,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-rwa-holdings,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-final-note {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.narrative__sticky[data-act="4"] .sys-alloc-arc { opacity: 0; transition: opacity 300ms var(--ease-out); }
.narrative__sticky[data-act="4"][data-phase="2"] .sys-alloc-arc,
.narrative__sticky[data-act="4"][data-phase="3"] .sys-alloc-arc,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-alloc-arc { opacity: 1; }
.narrative__sticky[data-act="4"] .sys-performance-row { opacity: 0; transition: opacity 300ms var(--ease-out); }
.narrative__sticky[data-act="4"][data-phase="3"] .sys-performance-row,
.narrative__sticky[data-act="4"][data-phase="4"] .sys-performance-row { opacity: 1; }
.narrative__sticky[data-act="4"] .sys-activity-row[data-row-phase="4"] { opacity: 0; transition: opacity 300ms var(--ease-out); }
.narrative__sticky[data-act="4"][data-phase="4"] .sys-activity-row[data-row-phase="4"] { opacity: 1; }

.mobile-phase { display: none; }
.narrative__sticky[data-act="4"][data-phase="0"] .mobile-act[data-mobile-act="4"] .mobile-phase[data-mobile-phase="0"],
.narrative__sticky[data-act="4"][data-phase="1"] .mobile-act[data-mobile-act="4"] .mobile-phase[data-mobile-phase="1"],
.narrative__sticky[data-act="4"][data-phase="2"] .mobile-act[data-mobile-act="4"] .mobile-phase[data-mobile-phase="2"],
.narrative__sticky[data-act="4"][data-phase="3"] .mobile-act[data-mobile-act="4"] .mobile-phase[data-mobile-phase="3"],
.narrative__sticky[data-act="4"][data-phase="4"] .mobile-act[data-mobile-act="4"] .mobile-phase[data-mobile-phase="4"] { display: block; }

/* mobile fallback stage */
.narrative__mobile { display: none; }
.mobile-act { display: none; }
.mobile-act p { color: var(--ui-green); font-size: 10px; letter-spacing: .14em; }
.mobile-act h4 {
  margin: 10px 0 18px;
  color: var(--ui-ink);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.mobile-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-chips span {
  padding: 8px 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--ui-ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.mobile-hub, .mobile-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin-bottom: 18px;
  border: 1px solid var(--ui-green);
  border-radius: 50%;
  color: var(--ui-green);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-align: center;
}
.mobile-hub { border-radius: 10px; width: 100%; height: auto; padding: 14px; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.mobile-hub span { border: 1px solid var(--ui-line-strong); padding: 7px 9px; border-radius: 3px; font-size: 9px; }

@media (min-width: 900px) {
  .narrative__chapter[data-chapter="4"] { min-height: 150vh; }
}
@media (max-width: 1199px) {
  .narrative__grid { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: 40px; }
  .narrative__title { font-size: 30px; }
}
@media (max-width: 1299px) {
  .system { display: none; }
  .narrative__mobile { display: block; height: 100%; padding: 16px 18px; overflow: hidden; }
  .narrative__sticky[data-act="0"] .mobile-act[data-mobile-act="0"],
  .narrative__sticky[data-act="1"] .mobile-act[data-mobile-act="1"],
  .narrative__sticky[data-act="2"] .mobile-act[data-mobile-act="2"],
  .narrative__sticky[data-act="3"] .mobile-act[data-mobile-act="3"],
  .narrative__sticky[data-act="4"] .mobile-act[data-mobile-act="4"],
  .narrative__sticky[data-act="5"] .mobile-act[data-mobile-act="5"] { display: flex; flex-direction: column; justify-content: center; height: 100%; }
}
@media (max-width: 899px) {
  .narrative__chapter[data-chapter="4"] { min-height: 120vh; }
  .narrative__grid { display: flex; flex-direction: column; }
  .narrative__copy { order: 2; margin-top: 18px; }
  .narrative__visual { order: 1; }
  .narrative__visual {
    position: sticky;
    top: 72px;
    z-index: 10;
    height: 46svh;
    min-height: 300px;
    margin-bottom: 10px;
  }
  .narrative__sticky { position: relative; top: auto; height: 100%; border-radius: 0 0 4px 4px; }
  .narrative__chrome { padding: 8px 10px; }
  .narrative__chrome-label { display: none; }
  .narrative__chapter-label { margin-left: 0; }
  .narrative__canvas { border-inline: 0; }
  .narrative__chapter { min-height: 0; padding: 64px 0 56px; }
  .narrative__chapter:first-child { padding-top: 24px; }
  .narrative__chapter--finale { padding-bottom: 72px; }
  .narrative__title { font-size: 28px; }
  .narrative__list { margin-top: 20px; }
  .narrative__progress a { padding: 7px 4px; font-size: 7.5px; letter-spacing: .02em; text-align: center; }
  .narrative__progress a span { display: block; margin: 0 0 2px; }
}
@media (max-width: 619px) {
  .narrative__visual { height: 42svh; min-height: 270px; }
  .narrative__title { font-size: 26px; }
  .narrative__lede { font-size: 16px; }
  .narrative__list li { grid-template-columns: 88px 1fr; gap: 10px; }
  .narrative__list li > span:last-child { font-size: 13.5px; }
  .narrative__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .narrative__grid { display: block; }
  .narrative__visual { position: static; height: auto; min-height: 0; margin-bottom: 24px; }
  .narrative__sticky { position: static; height: auto; }
  .narrative__canvas { min-height: 440px; }
  .narrative__chapter { min-height: 0; padding: 48px 0; }
  .narrative__chapter[data-chapter="4"] { min-height: 0; }
  .narrative__chapter:first-child { padding-top: 24px; }
  .narrative__chapter--finale { padding-bottom: 64px; }
  .narrative__progress { display: none; }
  .narrative__progress-bar span { transition: none; }
  .narrative__sticky .sys-act { opacity: 0 !important; visibility: hidden !important; transform: none !important; transition: none !important; }
  .narrative__sticky .sys-act[data-act-group="5"] { opacity: 1 !important; visibility: visible !important; }
  .narrative__mobile .mobile-act { display: none !important; }
  .narrative__mobile .mobile-act[data-mobile-act="5"] { display: flex !important; flex-direction: column; justify-content: center; height: 100%; }
  .sys-chip { opacity: 1; }
  .sys-chip-box { stroke: var(--ui-green); }
  .sys-chip-bar { fill: var(--ui-green); }
  .sys-frag, .sys-row, .sys-draw, .sys-loop-path { transition: none; }
  .sys-frag { opacity: 1; transform: none; }
  .sys-row { opacity: 1; transform: none; }
  .sys-draw, .sys-loop-path { stroke-dashoffset: 0; }
  .sys-spine-dot { animation: none; }
}

@media (max-width: 899px) {
  .pillar-index__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pillar-index__head .body-m { text-align: left; }
  .pillar-item__summary { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; padding: 18px 0; }
  .pillar-item__name { font-size: 22px; }
  .pillar-item__body { grid-template-columns: 1fr; gap: 18px; padding: 0 0 24px 52px; }
  .pillar-item__tags { justify-content: flex-start; }
  .pillar-index__foundation { flex-wrap: wrap; gap: 6px 12px; }
  .pillar-index__foundation .mono { flex-basis: 100%; }
  .pillar-index__foundation > span:nth-child(2) { flex: 1; font-size: 13px; }
  .pillar-index__foundation svg { order: 3; }
  .narrative__lead-in { flex-direction: column; align-items: flex-start; gap: 6px; }
  .narrative__lead-in p:last-child { text-align: left; }
}