Chart Prompts

Restyle my chart in the "Climograph" 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 climate panel from a reference atlas. Cool blue-gray paper, a framed station sidebar with the key facts, and a dual-axis chart where every axis wears the color of its series.

Colors (use these exact values):
- Page: #E8EDF2 (light blue-gray). Sidebar card and highlighted-period shading: #F6F8FA. Card border: #AEBBC8, 1px, with a 4px #1C2733 top rule.
- Primary series (bars): #5B7FDB (cornflower blue). Secondary series (line): #B23A2E (brick red).
- Ink: #1C2733. Secondary text: #5B6876. Gridlines and sidebar row rules: #C9D2DC.

Typography (Google Fonts):
- Barlow Semi Condensed for the title (700, 29px, ink, stating the finding), the station name in the sidebar (700, 30px), small uppercase labels (600, 11px, 1.4 to 2px letter-spacing, #5B6876) and the two big sidebar figures (700, 38px, in their series colors, with the unit as a 17px Barlow 500 suffix).
- Barlow for everything else: subtitle 16px #5B6876; sidebar rows 13.5px (key in #5B6876 left, value 600 in ink right-aligned); axis tick labels 13px 500 in their series color; axis unit labels ("mm", "°C") 13px 700 in their series color; category labels 13px 500 ink; legend 13px 500; source 12px.

Layout:
- 48px margins. Title at y 62, subtitle at y 90.
- Left sidebar card at x 48, y 124, 226 x 414px: "CLIMATE STATION" label, the station name, a one-line description, then five key/value rows separated by 1px rules 30px apart (elevation, coordinates, wettest and warmest periods), then two headline figures (the line series' mean and the bars' total), each under a small uppercase label.
- Plot from x 352 to 872 and y 158 to 486. Legend at y 552 under the plot, source at y 572 on the left and a scale note at the right.

Axes and grid:
- Left axis for the bars and right axis for the line, each drawn as a 1.5px vertical line in its series color, with tick labels in the same color (left labels right-aligned 10px from the plot, right labels 10px outside). Choose the scales so their gridlines coincide (here 0 to 200 mm and 0 to 20 °C, a 10:1 ratio) and state that ratio in the footer.
- Horizontal gridlines at the shared ticks, 1px #C9D2DC. A 1.2px ink baseline.
- Optionally shade a meaningful span of periods with #F6F8FA at 0.8 opacity and label it in small uppercase above the plot.

Marks:
- Bar chart: bars 62% of the band in solid #5B7FDB with 2px rounded top corners, square at the baseline. Label only the extreme bar with its value (13px 700, cornflower) 10px above it.
- Line chart: a 2.5px #B23A2E polyline with straight segments and round joins, drawn over a 6px page-colored halo so it separates from anything beneath; round markers r 4.5 filled brick red with a 2px #E8EDF2 ring. Label only the peak point (13px 700, brick red) 14px above it. When the chart is only a line, keep the sidebar and color-matched axis.

Avoid: 3D, gradients, shadows, unmatched axis colors, a line without markers, and more than the two series colors.

When you're done, render the chart and check that each axis matches its series color, the two axes' gridlines line up, the sidebar figures (mean and total) are computed from the data, and the line and markers stay readable where they cross the bars.