Chart Prompts

Restyle my chart in the "Guided Reading" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: an annotation-first explainer from a public-interest newsroom. The chart is a guided tour: four numbered stops on the data, each explained in a short note in a row beneath the chart. Plain, clear and calm, with one warm accent that says "read this".

Colors (use these exact values):
- Background: #FFFFFF (plain white) for the whole canvas.
- Main data ink: #2B2B2B (charcoal) for the data line, points, bars, title and note headings.
- Reference: #4C78A8 (muted blue) for the single reference line (a norm, target or average) and its label.
- Callouts: #E4572E (tomato) for the numbered circles, leader lines and highlighted point rings. Never used for data.
- Secondary text #6B6B6B; note body text #3F3F3F; gridlines and rules #E7E7E7; baseline gridline #BDBDBD.

Typography (Google Fonts):
- Libre Franklin for the title (800, 27px, -0.4px letter-spacing, charcoal), subtitle (400, 15px, #6B6B6B), axis labels (400 or 500, 12px, #6B6B6B), reference label (600, 12px, blue), callout numerals (800, 15px, white, inside the chart circles; 800, 24px, tomato, inside the note circles) and note headings (700, 14px, charcoal).
- Source Serif 4 for the note bodies (400, 14px, #3F3F3F, 20px line height, three short lines each).

Layout:
- 56px side margins. Title at y 58 stating the finding with a number ("Saltmere households cut water use by 35% from the summer peak"), subtitle at y 86 with measure, unit and period.
- Plot from about y 128 to y 352, x 96 to 880. Month or category labels 22px below the baseline.
- A 1px #E7E7E7 rule at y 394, then a row of four equal note columns (214px apart): each starts with an outlined tomato circle (r 19, 2.5px stroke) holding the numeral, the heading beside it, and the serif note body below at y 480.
- A second 1px rule at y 540 and the source line ("Source: illustrative data...") in 12px Libre Franklin #6B6B6B at y 566.

Axes and grid:
- Horizontal gridlines only, 1px #E7E7E7, extending 28px left of the plot so the y labels sit at their end (right-aligned, 12px). The zero or bottom gridline is #BDBDBD. No axis lines, no tick marks.
- The reference line is a 1.5px #4C78A8 line dashed 6 on, 4 off across the whole plot, labeled in blue just above its left end ("Pre-drought norm, 320 L").

Marks:
- Line chart: one 3px charcoal line with straight segments, round joins and caps, and 3px-radius charcoal dots at each point.
- Bar chart: charcoal square-cornered bars about 55% of the band; the four callout bars keep the charcoal fill but get the numbered circle above them.

Callouts (the signature):
- Exactly four numbered stops, placed on the story's turning points (peak, first drop, low, recovery). The point itself gets a white-filled ring (r 6, 2px tomato stroke).
- A solid tomato circle (r 13) with a white numeral sits 46 to 62px away from its point, above or below, whichever side is empty. Join them with a thin elbow leader: 1px tomato, vertical from the point, then horizontal into the circle if it is offset sideways.
- The same numerals, in the outlined note circles, run left to right under the chart in story order.

Avoid: legends (label directly), color on the data line, more than four callouts, callouts that sit on top of the line or labels, leaders that cross each other, and notes longer than three lines.

When you're done, render the chart and check that every number in the title and notes is arithmetically true for the data, the numbered circles match their notes, no circle or label collides with the line or the reference label, and the four notes align on one baseline grid.