diff --git a/src/page.html b/src/page.html
index e38750f..bb89651 100644
--- a/src/page.html
+++ b/src/page.html
@@ -53,12 +53,11 @@ input{width:18ch}input::placeholder,textarea::placeholder{color:var(--faint)}
 .count{font-size:.76rem;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
 .lane.child .count{color:var(--faint)}
 .cursor{position:absolute;top:0;bottom:0;pointer-events:none;display:none;background:rgba(226,235,240,.08);border-left:1px solid var(--hot)}
-.axis .strip{height:34px;background:none}
+.axis .strip{height:28px;background:none}
 .axis .era{position:absolute;top:2px;height:2px;background:var(--faint)}
 .axis .era.live{background:var(--water)}
-.axis .era span{position:absolute;top:6px;left:0;font-size:.7rem;color:var(--dim);white-space:nowrap}
-.axis .era.live span{color:var(--water)}
-.axis .tick{position:absolute;top:20px;font-size:.7rem;color:var(--dim);white-space:nowrap}
+.axis .tick{position:absolute;top:8px;font-size:.7rem;color:var(--dim);white-space:nowrap}
+.axis .tick.era-tick{color:var(--ink)}
 .axis .tick.end{transform:translateX(-100%)}
 .reader{min-height:3rem;font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;line-height:1.6}
 .reader b{color:var(--hot);font-weight:400}.reader i{font-style:normal;color:var(--water)}
diff --git a/src/ui.js b/src/ui.js
index 91e06c3..ed2d89d 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -184,21 +184,27 @@ function render() {
   for (let bi = 1; bi <= n; bi++) {
     if (bi === n || eraOf(buckets[bi]) !== eraOf(buckets[start])) {
       const era = eraOf(buckets[start]);
-      const wide = bi - start > n / 6;
-      eras.push(`<div class="era ${era}" style="left:${(100 * start) / n}%;width:${(100 * (bi - start)) / n}%">${wide ? `<span>${ERA_LABEL[era]}</span>` : ""}</div>`);
+      eras.push(`<div class="era ${era}" style="left:${(100 * start) / n}%;width:${(100 * (bi - start)) / n}%"></div>`);
       start = bi;
     }
   }
+  // ticks: the first day of each era, then days spaced at least a tenth of the strip apart; the
+  // boundary between eras is always labelled even when the later era is a single column
   const ticks = [];
+  let lastAt = -Infinity;
+  const place = (bi, text, cls) => {
+    const at = bi / n;
+    if (at - lastAt < 0.1 && !cls) return;
+    ticks.push(`<span class="tick${at > 0.8 ? " end" : ""}${cls ? ` ${cls}` : ""}" style="left:${100 * at}%">${text}</span>`);
+    lastAt = at;
+  };
   let lastDay = "";
-  let lastAt = -1;
   for (let bi = 0; bi < n; bi++) {
     const day = dayFmt.format(new Date(buckets[bi].min_witnessed_at / 1000));
-    if (day !== lastDay && bi - lastAt > n / 8) {
-      ticks.push(`<span class="tick${bi > n * 0.8 ? " end" : ""}" style="left:${(100 * bi) / n}%">${day}</span>`);
-      lastDay = day;
-      lastAt = bi;
-    }
+    const eraStart = bi === 0 || eraOf(buckets[bi]) !== eraOf(buckets[bi - 1]);
+    if (eraStart) place(bi, `${ERA_LABEL[eraOf(buckets[bi])]} · ${day}`, "era-tick");
+    else if (day !== lastDay) place(bi, day);
+    lastDay = day;
   }
   const axis = `<div class="lane axis"><span></span><div class="strip">${eras.join("")}${ticks.join("")}</div><span></span></div>`;