Chart Prompts

Restyle my chart in the "Small Multiples" 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 analyst's comparison grid. Instead of one tangled chart with many series, a tidy grid of tiny charts on identical scales, each spotlighting one series against the ghosts of all the others. Quiet, clean, and honest.

Colors (use these exact values):
- Background: #FFFFFF. Ink (title, panel titles): #1D2327. Secondary text (subtitle, tick labels, source): #5F6B76.
- Highlight: #0B6E99 (deep cerulean) for each panel's own series, its change figure and its end label.
- Exception: #C8553D (terracotta) replaces the highlight in the one panel that bucks the trend the title describes. Use it for at most one panel; if nothing bucks the trend, don't use it.
- Context series (every other series, drawn in every panel): #D3D8DD. Gridlines and the footer rule: #ECEFF2. Panel baselines: #9AA3AB.

Typography (Google Fonts): Public Sans throughout.
- Title 700, 30px, -0.4px letter-spacing, stating the finding. Subtitle 400, 16px, #5F6B76: the measure, unit and period, plus a short note on how to read the grid.
- Panel titles 700, 16px, left-aligned over each panel. Change figure 600, 13px, right-aligned on the same baseline, in the panel's highlight color, with a true minus sign (U+2212), e.g. "−33 pts".
- Tick labels 400, 12px. End-value labels 700, 13px in the highlight color. Source 12px.

Layout:
- One panel per series (6 to 8), in a grid of 4 columns by 2 rows (3 x 2 for six), with 30px between columns and about 32px between rows. Every panel is exactly the same size.
- Order panels meaningfully, e.g. by the latest value, and say so in the footer.
- Each panel: a 30px title strip, then the plot. 56px outer margins; a 1px #ECEFF2 rule above a one-line source/footnote at the bottom.

Axes and grid:
- One shared y-scale for every panel, starting at zero. Never give panels independent scales.
- Two faint gridlines per panel (at the midpoint and the top), 1px #ECEFF2, and a 1px #9AA3AB baseline.
- Y tick labels only on the left column of panels (0, midpoint, max), right-aligned 8px left of the plot. X labels only on the bottom row: just the first and last period, flush with the panel edges. No axis lines.

Marks:
- Line chart: in every panel, first draw ALL the other series as 1px #D3D8DD lines, then the panel's own series as a 2.4px line in the highlight color with round joins, over an area fill of the same color at 8% opacity. Mark the first point with an open circle (r 2.6, white fill, 1.5px stroke) and the last with a filled dot (r 3.6, 1.5px white ring). Put the latest value just above the line near the right end, placed above the highest of the last few points so it never touches the line.
- Bar chart: one small bar chart per category, same shared scale; the panel's own bars solid in the highlight color, with the other categories' values shown as 1px #D3D8DD outline ticks at the same x positions for context. Label only the latest bar's value.

Avoid: legends (the panel titles are the labels), independent y-scales, more than two hues, heavy axes or boxes around panels, gradients, shadows, and axis labels repeated on inner panels.

When you're done, render the chart and check that every panel shares the same scale, the gray context lines sit behind the highlight, no end label touches a line, and the title's claim holds in every panel.