Chart Prompts

Restyle my chart in the "Retiree Ratio" 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: a demographic explainer from a public policy institute. Countable unit squares on dark wine, cream for the recorded past and hatched rose for the projected future, technical mono figures.

Colors (use these exact values):
- Background: #241018 (dark wine).
- Recorded units: #F1E2C8 (warm cream). Projected units: #C98896 (muted rose) as a 45 degree hatch (2px strokes every 5px over a 28% rose tint) with a 1px rose outline.
- Headline text: #F7EEE4. Secondary text: #A38590. Gridlines: #3A1E29.

Typography (Google Fonts):
- Space Grotesk for the two-line title (700, 30px, -0.5px letter-spacing; first line #F7EEE4 for the past, second line #C98896 for the projection), subtitle (15px #A38590 explaining what one square means), legend (13px 500) and the annotation (15px, first line 600).
- Space Mono for all figures: counts above columns 16px 700, axis and category labels 12px, the "PROJECTED" bracket label 11px with 2px letter-spacing.

Layout:
- 56px side margins. Title lines at y 70 and 106, subtitle at y 136, a two-swatch legend at the top right (y 62).
- Plot from x 104 to 904 with the baseline at y 504. A thin rose bracket 41px under the baseline spans the projected categories with "PROJECTED" beneath it.

Axes and grid:
- A few 1px #3A1E29 gridlines aligned with square tops, labeled in Space Mono 12px at the left. One threshold line (for example 3) as a 1.2px dashed rose line (dash 3 4) with its label in bold rose.

Marks:
- Bar chart: columns of 30px squares with 4px gaps, one square per unit; a fractional remainder is a partial square (same color, proportional height) on top. Recorded columns solid cream, projected columns hatched rose. The count sits 12px above each column with a 6px background-colored halo; if it would touch the threshold line, move it to the nearest spot at least 5px clear of the line (above it, or below it when there is room over the column).
- Line chart: a stepped line of small 10px squares at each value (cream recorded, hatched rose projected) joined by a 1.5px cream line that turns dashed rose for projections; same threshold line and bracket.

Labels and annotation: one annotation near where the series crosses the threshold, three short lines with a thin curved 1px leader to the first column below it.

Avoid: gradients, rounded squares, icons of people, a legend that duplicates the bracket, and more than two data colors.

When you're done, render the chart and check that the number of whole squares matches each value, partial squares are proportional, projected columns are unmistakably hatched at thumbnail size, and the threshold annotation points to the right column.