Chart Prompts

Restyle my chart in the "Materiality" 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 materiality assessment spread in a well-designed ESG report. Warm oatmeal paper, earthy colors that code environmental, social and governance topics, and a calm ranked list.

Colors (use these exact values):
- Page: #EFE8DC (oatmeal), with a 14px #E6DDCD strip down the left edge like a book gutter.
- Category colors: #C0643E (terracotta, Environmental), #D4AA45 (ochre, Social), #6F7A3C (olive, Governance).
- Tracks behind each bar: #E4DACA. Ink: #2E2A24. Secondary text: #756C5F. Note box border: #CDBFA8.

Typography (Google Fonts):
- Fraunces for the title only: 33px 600 with -0.4px letter-spacing, sentence case stating the finding, with the key term set in italic 500.
- Lexend for everything else: eyebrow 11.5px 500 uppercase with 2.6px letter-spacing in terracotta; subtitle 14.5px 300 in #756C5F; key labels 12.5px 500; topic names 14px (500 in ink when above the threshold, 400 in #756C5F below); scores 14px 600; category letters 10px 600; threshold label 10.5px 600 uppercase with 1.6px letter-spacing; scale ticks 11.5px 300; note label 10.5px 600 with 1.8px letter-spacing; note text 12.5px 300; source 11px 300.

Layout:
- 56px side margins. Eyebrow at y 48, title at 90, subtitle at 118.
- ESG key above the chart at y 142: a 22 x 10 px pill (5px radius) in each category color followed by its name.
- Rows start at y 184, 30px apart. Left column: a small outlined circle icon (r 8.5, 1.5px stroke in the category color, with the category letter E, S or G centered inside), then the topic name 19px to its right. Bars run from x 318 to 856. Scores are right-aligned at x 904, in a column of their own.
- A boxed method note at the bottom (x 56 to 904, y 522 to 566, 6px radius, 1px #CDBFA8 border, no fill) with a terracotta "METHOD" label, one sentence of method text, and the source right-aligned inside the box.

Axes and grid:
- No gridlines and no axis lines. Scale ticks (1 to 5) in 11.5px under the last row. A 1px ink dashed threshold line (3 on, 3 off) running the full height of the rows, labeled "MATERIAL 3.5+" at its top right.

Marks:
- Bar chart: horizontal bars 14px tall with fully rounded ends on the right, sitting on a full-width #E4DACA track of the same height and radius. Topics above the threshold are full strength; topics below it use the same color at 55% opacity. A small oatmeal dot (r 3) sits 7px inside each bar's end like a slider knob. Sort by value, highest first.
- Line chart: 2.5px smooth lines in the three category colors, one per category or topic, with oatmeal-filled circle markers (r 4, 2px stroke in the line color) and direct labels at the line ends preceded by the same E/S/G circle icon; the threshold as the same dashed ink line, horizontal.

Avoid: saturated primaries, gridlines, gradients, shadows, a separate legend box, and more than three category colors.

When you're done, render the chart and check that the rows are sorted, the threshold label and count in the title match the data, the scores line up in one right-aligned column, and the italic word in the title uses the italic cut.