/* ===========================================================
   Section-specific scrollytelling layouts.
   The "scrolly" pattern: sticky chart + scrolling text steps.
   =========================================================== */

.scrolly {
  position: relative;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: grid;
  /* chart takes remainder; text column fixed-but-clamped for readability */
  grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 520px);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  padding: 0 1.5rem;
}

.scrolly-graphic {
  position: sticky;
  top: 8vh;
  height: 84vh;
  align-self: start;
  display: flex;
  align-items: center;
}
.scrolly-graphic .chart-frame {
  width: 100%;
}

.scrolly-text {
  display: flex;
  flex-direction: column;
  gap: 42vh;
  padding: 22vh 0 32vh;
}

.step {
  opacity: 0.32;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.step.is-active {
  opacity: 1;
}

.step-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  color: var(--gold);
  margin: 0 0 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.step p {
  font-size: clamp(1.08rem, 1.25vw, 1.22rem);
  color: var(--ink);
  opacity: 0.92;
  margin: 0 0 1rem;
  line-height: 1.7;
}

.step b.hl {
  color: var(--crisis);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 1.08em;
  text-shadow: 0 0 12px var(--crisis-glow);
}
.step-q {
  text-shadow: 0 0 18px var(--gold-glow);
}

@media (max-width: 900px) {
  .scrolly {
    grid-template-columns: 1fr;
  }
  .scrolly-graphic {
    position: sticky;
    top: 8vh;
    height: 56vh;
  }
  .scrolly-text {
    gap: 30vh;
    padding: 6vh 0 20vh;
  }
}