Create a single-file scrollytelling data-story benchmark with narrative sections, annotated charts, paced reveal logic, responsive layout, and no external images.

## Story brief

Build a live HTML scrollytelling explainer called **The Cool Street Dividend**. The story follows a fictional but plausible city heat programme, showing how shade, reflective roofs, transit shelters, water access, and street retrofits change heat exposure across neighbourhoods.

## Section outline

1. **The afternoon baseline** — establish the heat-risk problem and introduce the reader-controlled progress rail.
2. **Heat does not land evenly** — compare neighbourhood heat burden, canopy cover, and vulnerable population share.
3. **The intervention stack** — reveal the relative effect of shade, cool roofs, shelters, and water stops.
4. **A day in the corridor** — animate hourly heat index changes before and after street upgrades.
5. **Where the budget bends the curve** — show a cost-versus-benefit bubble chart for retrofit options.
6. **What changes by 2030** — finish with an outcome dashboard and a reader-adjustable ambition control.

## Chart plan

- Sticky chapter map with saved position.
- SVG heat-burden bar chart with annotations.
- Layered intervention diagram with scroll-triggered highlights.
- Hourly line chart comparing baseline and retrofit conditions.
- Cost-benefit bubble chart with keyboard-focusable points.
- Scenario dashboard driven by a range input.

## Visual direction

Editorial, high-contrast, calm but urgent. Use deep ink, warm heat colours, cool blue relief accents, rounded cards, tactile controls, and large readable chart labels. Use only inline HTML, CSS, SVG, and JavaScript. Do not use external images, fonts, scripts, or remote assets.