Chart Prompts

Restyle my chart in the "Layered Type" 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 mid-1990s magazine data page where type is the layout. A giant pale numeral sits behind everything, bright safety orange carries the story against a dark gray comparison, and small labels turn sideways.

Colors (use these exact values):
- Page: #FAF8F4 (warm white).
- Main series: #FF5B14 (safety orange). Comparison series: #3B3B3B (charcoal).
- Giant background numeral: #E6E1D8.
- Ink for title, baseline, rules and year labels: #1A1A1A. Secondary text: #77736B.

Typography (Google Fonts):
- Big Shoulders Display 800 for the title (60px, uppercase, 0.5px letter-spacing, stating the finding) and period labels under the axis (24px); weight 900 at 620px for the background numeral (-12px letter-spacing).
- Courier Prime for everything else: kicker 11px 700 uppercase with 3px letter-spacing in orange above the title; subtitle 15px #77736B; legend 12px 700 uppercase with 2px letter-spacing; axis numbers 12px; category labels 11px; value labels 11px 700; the side caption 9px with 1.6px letter-spacing; source 12px.

Layout:
- 44px left margin. Kicker at y 30, title baseline at y 96, subtitle at y 128, legend (14px squares) at y 148 to 162.
- A 1px #1A1A1A hairline runs the full canvas width at y 40, between the kicker and the title, sitting just clear above the title's cap height (never through the letters).
- The background numeral (the final year's last two digits, "97") sits behind the chart from about x 400, cropped by the bottom edge.
- A vertical 0.8px #1A1A1A rule at x 914 runs the full height; right of it a single line of tiny caption text rotated 90 degrees reads top to bottom (publication, figure number, measure, unit).
- Chart area x 86 to 888, baseline at y 494, top of scale at y 196.

Axes and grid:
- Value axis numbers on the left, right-aligned 10px from the plot. Gridlines 0.8px #1A1A1A at 16% opacity. Baseline 1.5px #1A1A1A.
- Category labels (Q1 to Q4) centered 18px below the baseline; below them period labels left-aligned inside 48px-tall 0.8px vertical dividers that separate each year.

Marks:
- Bar chart: grouped square-cornered bars 19px wide with a 2px gap between the pair, orange first, charcoal second. Every value label is rotated -90 degrees and set inside the top of its bar in #FAF8F4 Courier Prime 11px 700, reading bottom to top, its end 6px below the bar top.
- Line chart: a 4px #FF5B14 line and a 2.5px #3B3B3B comparison line, straight segments, square 7px markers on the orange line only; value labels rotated -90 degrees just above each orange marker in 11px Courier Prime 700.

Avoid: rounded corners, gradients, shadows, more than one bright color, horizontal value labels crowding the bars, and letting the background numeral compete with the data (keep it pale and behind).

When you're done, render the chart and check that the hairline clears the title letters, every rotated label fits inside its bar, the background numeral is cropped by the canvas edge, and the side caption fits on the canvas.