Chart Prompts

Restyle my chart in the "Contribution Match" 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 page from a printed retirement plan statement. Cream paper, a bookish serif, double rules, and a boxed sidebar that reads like the fine print, all calm and trustworthy.

Colors (use these exact values):
- Page: #FBF7EE (cream). Ink #2A2618 for text, rules and the axis; secondary text #7A7261; gridlines and light rules #DDD3BD; sidebar fill #F4EEDF.
- Base segment (employee money, or the first series): #4D7C0F (deep sage).
- Top segment (employer match, or the second series): #CA8A04 (gold), also used for the big numerals in the sidebar.

Typography (Google Fonts):
- Gelasio: title 700 29px #2A2618 stating the finding; the value printed above each column 700 19px; sidebar numerals 700 22px gold and totals 700 15px.
- Lato for everything else: header eyebrows 700 11px uppercase with 2px letter-spacing (left in sage, right in #7A7261); subtitle 400 14.5px #7A7261; legend 13px; in-segment values 700 13px (cream on sage, ink on gold); the small-caps label under each column value ("participating") 700 11px, 1px letter-spacing, font-variant-caps all-small-caps, #7A7261; category labels 700 13px ink with an 11.5px #7A7261 detail line below; the sidebar note italic 12.5px.

Layout:
- 56px margins. A statement header: plan name eyebrow left, statement period right, then a double rule (1.5px ink at y 56, 0.6px ink at y 60). Title at y 100, subtitle at y 126.
- Chart on the left (plot x 96 to 636, baseline y 488), legend of square swatches (12px) above it.
- A boxed summary on the right (x 676, y 150, 228 x 338): 1px ink border, #F4EEDF fill, a 30px ink header band reading "MATCH RULES" in cream Lato 700 11.5px with 2.2px letter-spacing. Inside: each rule as a gold Gelasio numeral with a short Lato line beside it, separated by 1px #DDD3BD rules; an italic note; a 0.8px ink rule; then key totals as label-left, figure-right rows.
- A 1px #DDD3BD footer rule at y 548 with the source on the left and a page folio ("Page 3 of 8") on the right.

Axes and grid:
- 0.8px #DDD3BD gridlines, y labels in Lato 12px #7A7261 formatted like "$10K", right-aligned 12px left of the plot. A 1.2px ink baseline; no y-axis line.

Marks:
- Bar chart: square-cornered stacked columns 62px wide, the base segment in #4D7C0F and the top segment in #CA8A04, separated by a 2px cream gap. Values printed inside segments when they are at least 22px tall. Above each column: the headline percentage in Gelasio 700 19px, with the small-caps "participating" label between it and the column.
- Line chart: two 2.5px lines, #4D7C0F and #CA8A04 (the gold one dashed 6 on, 3 off), with 4px square markers; light #CA8A04 fill at 15% between them to show the match on top of the employee amount; the percentage label above each point on the upper line in the same Gelasio plus small-caps pairing.

Avoid: rounded corners, gradients, shadows, bright greens, sans-serif titles, and letting the sidebar box crowd the chart (keep a 40px gutter).

When you're done, render the chart and check that the sidebar totals are computed from the data, segments are distinguishable in grayscale (the cream gap and in-segment labels carry it), and every column label and percentage is centered on its column.