diff --git a/static/style.css b/static/style.css
index 4973be3..e462cae 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1848,16 +1848,27 @@ details.hub-country > summary:hover { color: var(--accent); }
 }
 .unusual-card { scroll-snap-align: start; flex: 0 0 auto; }
 .unusual-card a {
-  display: grid; gap: 2px; min-width: 150px; padding: 12px 14px;
-  background: var(--surface); border: 1px solid var(--border);
+  display: grid; gap: 2px; min-width: 190px; padding: 12px 14px;
+  /* A wash of the band colour, so the card reads as its grade at a glance and
+     the strip isn't a row of identical grey boxes. */
+  background: color-mix(in oklab, var(--cat, var(--surface)) 10%, var(--surface));
+  border: 1px solid color-mix(in oklab, var(--cat, var(--border)) 25%, var(--border));
   border-left: 4px solid var(--cat, var(--border));
   border-radius: 11px; text-decoration: none; color: var(--text);
 }
 .unusual-card a:hover { border-color: var(--accent); }
 .unusual-city { font-weight: 600; font-size: 14px; }
-.unusual-pct { font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
-              color: color-mix(in oklab, var(--cat, var(--text)) 78%, var(--text)); }
-.unusual-band { font-size: 12px; color: var(--muted); }
+/* The reading itself leads: a percentile with no value attached says nothing
+   about what the weather actually is. */
+/* 50% is the most band colour these can carry and still clear 4.5:1 against the
+   tinted card in BOTH schemes — measured across the ramp, worst case being the
+   deliberately-dark --rec-cold/--rec-hot "Near Record" tiers. Raising it fails
+   dark mode; the band word carries the meaning anyway, colour only reinforces. */
+.unusual-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
+                 color: color-mix(in oklab, var(--cat, var(--text)) 50%, var(--text)); }
+.unusual-band { font-size: 13px; font-weight: 600;
+                color: color-mix(in oklab, var(--cat, var(--text)) 50%, var(--text)); }
+.unusual-meta { font-size: 12px; color: var(--muted); }
 .unusual-more { margin: 2px 0 0; font-size: 14px; }
 .unusual-more a { color: var(--accent); text-decoration: none; }
 
@@ -1874,11 +1885,19 @@ details.hub-country > summary:hover { color: var(--accent); }
 @media (min-width: 1400px) { .explore-cards { grid-template-columns: repeat(4, 1fr); } }
 .explore-card {
   display: grid; gap: 4px; padding: 14px 16px;
-  background: var(--surface); border: 1px solid var(--border);
+  /* Each card is tinted by its own token so the row carries the product's
+     palette instead of reading as four identical grey boxes. */
+  background: color-mix(in oklab, var(--cat, var(--surface)) 9%, var(--surface));
+  border: 1px solid color-mix(in oklab, var(--cat, var(--border)) 28%, var(--border));
+  border-left: 4px solid var(--cat, var(--border));
   border-radius: 11px; text-decoration: none; color: var(--text);
 }
 .explore-card:hover { border-color: var(--accent); }
-.explore-name { font-weight: 600; }
+.explore-name { font-weight: 600;
+                color: color-mix(in oklab, var(--cat, var(--text)) 45%, var(--text)); }
+/* The nine grade tiers in order — a miniature of the calendar itself. */
+.explore-ramp { display: flex; gap: 2px; margin: 2px 0 1px; }
+.explore-ramp i { flex: 1 1 0; height: 6px; border-radius: 2px; }
 .explore-desc { color: var(--muted); font-size: 14px; line-height: 1.4; }
 
 /* --- city chips ---------------------------------------------------------- */
@@ -1889,7 +1908,10 @@ details.hub-country > summary:hover { color: var(--accent); }
   background: var(--surface); border: 1px solid var(--border);
   color: var(--text); text-decoration: none; font-size: 14px;
 }
-.city-chips a:hover { border-color: var(--accent); }
+.city-chips a:hover {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
+}
 .city-hub > p a { color: var(--accent); text-decoration: none; }
 
 /* --- digest form (site-wide footer pattern) ------------------------------ */