diff --git a/static/calendar.js b/static/calendar.js
index 07bcfa3..ca46bc2 100644
--- a/static/calendar.js
+++ b/static/calendar.js
@@ -543,9 +543,12 @@ function renderTotals(visible) {
     const classes = days.map((r) => r.precip && r.precip.c).filter(Boolean);
     // Dry days scale independently of the rain-intensity buckets (wet) so a big dry
     // count doesn't crush the rain bars — and vice versa.
+    // Index 4 carries the rain-tier key (e.g. "wet-5") so a single crowded label —
+    // "Moderate", wedged between the two-line "Light–Mod"/"Mod–Heavy" — can be nudged
+    // in CSS without brittle text matching.
     buckets = [["Dry", drynessColor(7), classes.filter((c) => c === "dry").length, "dry"]]
       .concat(SCALE_RAIN.map((t) =>
-        [t.label, PRECIP_COLORS[t.c], classes.filter((c) => c === t.c).length, "wet"]));
+        [t.label, PRECIP_COLORS[t.c], classes.filter((c) => c === t.c).length, "wet", t.c]));
     title = "rain intensity";
   } else {
     const classes = days
@@ -600,12 +603,12 @@ function renderTotals(visible) {
   const maxByGroup = {};
   for (const b of buckets) maxByGroup[b[3]] = Math.max(maxByGroup[b[3]] || 1, b[2]);
   const LINE_MAX = 30;   // px — height of the tallest category in its group
-  const cols = buckets.map(([label, color, n, group]) => {
+  const cols = buckets.map(([label, color, n, group, cls]) => {
     const h = !n ? 0 : Math.max(2, Math.round(LINE_MAX * n / maxByGroup[group]));
     const line = h ? `<span class="ct-line" style="height:${h}px"></span>` : "";
     // Caption stacks the category name over its value; the name reserves two lines
     // so the value figures stay aligned across columns whether a name wraps or not.
-    return `<div class="ct-col" style="--c:${color}" ` +
+    return `<div class="ct-col${cls ? ` ct-${cls}` : ""}" style="--c:${color}" ` +
       `title="${label} · ${pctText(n, group)} (${n})">` +
       `<span class="ct-cap"><span class="ct-label">${label}</span>` +
       `<span class="ct-num${n ? "" : " ct-num-zero"}">${valText(n, group)}</span></span>` +
diff --git a/static/style.css b/static/style.css
index 67d67d5..cec026c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -743,6 +743,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   min-height: 2.2em; font-size: 10px; line-height: 1.1; font-weight: 600;
   color: var(--muted); text-align: center; overflow: hidden;
 }
+/* "Moderate" is a wide single word (can't wrap) sandwiched between the two-line
+   "Light–Mod"/"Mod–Heavy" labels, so on narrow screens its centered box spills over
+   their first line. Lift it into the empty gap above to clear the collision. */
+.ct-wet-5 .ct-label { transform: translateY(-0.85em); }
 .ct-num {
   font-size: 12px; font-weight: 700; line-height: 1;
   color: color-mix(in oklab, var(--c, var(--muted)), var(--text) 40%);