Chart Prompts

Restyle my chart in the "Honey Grades" 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 small apiary's harvest sheet set in a warm, soft serif, where each bar is filled with the actual color of the product it measures, like jars of honey lined up on a cream shelf, from pale to dark.

Colors (use these exact values):
- Page: #FFFBF2 (cream). Ink for title, values and labels: #3B230C. Secondary text: #8C7458. Gridlines: #E8DCC6. Eyebrow: #B07A22.
- The six-step grade scale used to fill the bars, pale to dark, each with a 1.2px outline in its darker edge color: Extra white #F4E3A1 (edge #C9B064), White #EDCB6A (edge #BE9A32), Extra light amber #E3B048 (edge #B0801C), Light amber #D9952E (edge #A66A12), Amber #A5621C (edge #7E4610), Dark amber #6B3A12 (edge #4A270A).
- If my data has no natural color scale, map my categories (or a second attribute) onto these six steps in order and explain the mapping in the scale bar.

Typography (Google Fonts):
- Fraunces throughout. Eyebrow 12px 600 uppercase, 2.6px letter-spacing. Title 32px 600 stating the finding. Subtitle 16px italic 400 in #8C7458 with measure, unit, ordering and the total.
- Values above bars 18px 600. Category label 14px 600 under the axis with a 12px italic #8C7458 second line. A 12px 600 reading inside the bar foot (ink on the four pale grades, #FFF3DC on Amber and Dark amber). Y labels 12px.

Layout:
- 56px margins. Eyebrow y 58, title y 100, subtitle y 128. Plot from x 72 to 904, baseline at y 432, top of the scale at y 170. Categories ordered by grade, pale to dark, so the bars read as a gradient.
- Under the category labels a color scale bar: 832px wide, 10px tall, six equal segments with a 0.8px #3B230C outline around the whole strip, "COLOR GRADE" (10.5px 600, 2px letter-spacing) above its left end and an italic note on the right naming the unit. Each segment carries its grade name (12px 600) and range (11.5px, #8C7458) below it.
- "Source: ..." 12px at the bottom left.

Axes and grid:
- Horizontal 1px #E8DCC6 gridlines at round steps with 12px labels right-aligned 10px left of the plot; a small italic unit label above the top value. A 1.2px #3B230C baseline. No y-axis line.

Marks:
- Bar chart: 58px bars (about 56% of the band) with 6px rounded top corners and square feet, filled with their grade color and outlined 1.2px in the matching edge color. A 5px-wide white highlight strip at 28% opacity, radius 2.5, runs down each bar 7px in from its left edge, like light through a jar. Value labels 10px above each bar.
- Line chart: a 2.5px #3B230C line whose points are 8px circles filled with each point's grade color and outlined in its edge color, over faint vertical grade-colored stripes (15% opacity) for each category; the same scale bar below.

Avoid: rainbow or cool colors, gradients inside a single bar, heavy outlines, sans-serif type, a separate legend box (the scale bar is the legend).

When you're done, render the chart and check that every bar's color matches its grade on the scale bar, the palest bars still have a visible outline against the cream page, and no category labels collide.