/* ============================================================
   3Powers — the real run, scroll-driven.
   The terminal sticks; the seven stage notes scroll past it and
   drive which frame is showing. Transport still works: touching
   it takes manual control until you scroll again.
   ============================================================ */

.run { background: var(--surface-ink); color: var(--text-on-ink); padding: var(--space-22) 0 var(--space-26); }
.run .section-head { margin-bottom: var(--space-12); }
.run .section-head h2 { color: var(--text-on-ink); }

.run-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-16);
  align-items: stretch;
}

/* the grid item stretches to the notes' full height; the inner wrapper is
   what sticks, so it has room to travel. */
.run-stage-col { height: 100%; }
.run-sticky { position: sticky; top: calc(var(--header-height) + 28px); }

.run-notes { display: grid; }
.run-note {
  padding: var(--space-14) 0;
  border-top: 1px solid var(--code-border);
  opacity: 0.34;
  transition: opacity 0.35s ease;
}
.run-note:first-child { border-top: 0; padding-top: 0; }
.run-note[data-active="true"] { opacity: 1; }

.run-note .rn-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: var(--space-4);
}
.run-note .rn-head span:last-child { color: var(--text-on-ink-muted); font-weight: 400; letter-spacing: 0.08em; }
.run-note h3 { color: var(--text-on-ink); margin: 0 0 var(--space-4); font-size: 1.22rem; line-height: 1.35; }
.run-note p { margin: 0; color: var(--text-on-ink-muted); font-size: var(--text-body); line-height: 1.65; }
.run-note[data-accent="red"] .rn-head { color: var(--term-red); }
.run-note[data-accent="green"] .rn-head { color: var(--term-green); }

.run-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-14);
  padding-top: var(--space-6);
  border-top: 1px solid var(--code-border);
}

@media (max-width: 1040px) {
  .run-layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .run-stage-col { height: auto; }
  .run-sticky { position: static; }
  .run-note { padding: var(--space-8) 0; opacity: 1; }
}