/* Pop Street Dispatch page: the scroll story. The words are real HTML in a numbered list; the canvas only illustrates them.
   Without JavaScript, on a phone, with reduced motion or on a software renderer the list and the still map are all there is.
   The pinned layout switches on only when dispatch-story.js adds .is-pinned. */
.dd-note { margin: 1em 0 0; font-size: .92rem; color: var(--ink-mute); max-width: 40em; }
.dd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px 24px; margin-top: 18px; }
.dd-story { padding: clamp(32px, 5vw, 64px) 0; background: linear-gradient(180deg, var(--cream-50), var(--cream)); }
.dd-grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .dd-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.dd-steps { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 1.1em; }
.dd-step { display: flex; gap: 14px; padding-left: 14px; border-left: 3px solid var(--greige); transition: opacity .5s var(--ease), border-color .5s var(--ease), transform .7s var(--ease-out); }
.dd-step__n { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--sage-800); color: var(--cream-50); font: 600 .9rem/1.9em var(--sans); text-align: center; }
.dd-step__h { font: 600 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 .3em; text-wrap: balance; }
.dd-step p { margin: 0; color: var(--ink-soft); max-width: 34em; line-height: 1.55; }
.dd-stage { position: relative; margin: 0; width: 100%; aspect-ratio: 1.4; max-height: 70svh; }
.dd-stage:before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--sage-50), var(--cream-200)); }
.dd-poster, .dd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dd-poster { padding: 3%; box-sizing: border-box; transition: opacity .6s var(--ease); }
.dd-canvas { opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; display: none; }
.dd-rail { position: absolute; left: 14px; right: 14px; bottom: 12px; display: none; flex-wrap: wrap; gap: 6px; font: 600 .78rem/1 var(--sans); }
.dd-rail span { padding: .45em .8em; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-mute); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }

@media (min-width: 900px) {
  .dd-story.is-pinned { height: 700vh; padding: 0; }
  .dd-story.is-pinned .dd-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 72px; box-sizing: border-box; overflow: hidden; }
  .dd-story.is-pinned .dd-stage { height: min(68svh, 620px); max-height: none; aspect-ratio: auto; }
  .dd-story.is-pinned .dd-canvas { display: block; }
  .dd-story.is-pinned.is-3d .dd-canvas { opacity: 1; }
  .dd-story.is-pinned.is-3d .dd-poster { opacity: 0; }
  .dd-story.is-pinned .dd-rail { display: flex; }
  .dd-story.is-pinned .dd-steps { display: grid; margin-top: 1em; }
  .dd-story.is-pinned .dd-step { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); pointer-events: none; }
  .dd-story.is-pinned[data-scene="1"] [data-step="1"], .dd-story.is-pinned[data-scene="2"] [data-step="2"], .dd-story.is-pinned[data-scene="3"] [data-step="3"],
  .dd-story.is-pinned[data-scene="4"] [data-step="4"], .dd-story.is-pinned[data-scene="5"] [data-step="5"], .dd-story.is-pinned[data-scene="6"] [data-step="6"] { opacity: 1; transform: none; pointer-events: auto; border-left-color: var(--sage); }
  .dd-story.is-pinned[data-scene="1"] [data-rail="1"], .dd-story.is-pinned[data-scene="2"] [data-rail="2"], .dd-story.is-pinned[data-scene="3"] [data-rail="3"],
  .dd-story.is-pinned[data-scene="4"] [data-rail="4"], .dd-story.is-pinned[data-scene="5"] [data-rail="5"], .dd-story.is-pinned[data-scene="6"] [data-rail="6"] { background: var(--sage-800); color: var(--cream-50); border-color: transparent; }
}