diff --git a/static/style.css b/static/style.css
index ca409d5..48ee853 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1492,6 +1492,41 @@ table.normals-table tbody tr:hover { background: var(--surface-2); }
 
 .climate-records ul { margin: 8px 0; padding-left: 20px; }
 .climate-records li { margin: 4px 0; }
+.season-span { color: var(--muted); font-weight: 400; font-size: 13px; }
+
+/* Temperature heat-map tints — the interactive tool's diverging cold→hot palette
+   brought onto the static tables. The value itself stays in the ink token; the tint
+   is a wash behind it, so a record high glows red and a record low reads cold-blue.
+   Mix percentages are tuned per tier (saturated darks need less) to keep the number
+   legible in both themes; the date column stays muted and untinted. */
+td.t-cell { font-weight: 600; }
+td.rec-date { color: var(--muted); font-size: 13px; }
+.t-rec-cold  { background: color-mix(in srgb, var(--rec-cold) 26%, var(--surface)); }
+.t-very-cold { background: color-mix(in srgb, var(--very-cold) 26%, var(--surface)); }
+.t-cold      { background: color-mix(in srgb, var(--cold) 28%, var(--surface)); }
+.t-cool      { background: color-mix(in srgb, var(--cool) 34%, var(--surface)); }
+.t-normal    { background: color-mix(in srgb, var(--normal) 26%, var(--surface)); }
+.t-warm      { background: color-mix(in srgb, var(--warm) 40%, var(--surface)); }
+.t-hot       { background: color-mix(in srgb, var(--hot) 40%, var(--surface)); }
+.t-very-hot  { background: color-mix(in srgb, var(--very-hot) 40%, var(--surface)); }
+.t-rec-hot   { background: color-mix(in srgb, var(--rec-hot) 30%, var(--surface)); }
+.t-none      { background: transparent; }
+/* Inline tinted value (month-page hero numbers, record list) — same washes, padded
+   so the colour reads as a chip around the number. */
+.t-inline { padding: 1px 7px; border-radius: 7px; }
+
+/* Monthly temperature-range strip: one gradient bar per month, low→high on a shared
+   axis. The signature climate visual — colourful and unmistakably Thermograph. */
+.range-strip { display: grid; gap: 6px; margin: 16px 0 8px; max-width: 620px; }
+.range-row { display: grid; grid-template-columns: 34px 1fr 92px; align-items: center; gap: 10px; }
+.range-month { font-size: 13px; font-weight: 600; color: var(--muted); }
+.range-track { position: relative; height: 14px; background: var(--surface-2); border-radius: 999px; }
+.range-fill {
+  position: absolute; top: 0; bottom: 0; border-radius: 999px;
+  background: linear-gradient(90deg, var(--c1), var(--c2));
+}
+.range-vals { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+.range-note { font-size: 13px; margin-top: 6px; }
 .climate-foot { font-size: 14px; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; }
 .city-blurb { font-size: 15px; margin: 4px 0 14px; }
 .blurb-src { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; }