frontend/src/lib/timeline/YearBand.svelte

@@ -89,13 +89,19 @@ const rows = $derived.by<Row[]>(() => {
 	   (left: 0.5rem phone / left: 50% desktop) — keep the two in sync so the
 	   markers never desync from the spine. #833 REQ-003/004/005. */
 
-/* Phone (< 1024px): badge sits at the left spine, clearing the node marker. */
+/* Phone (< 1024px): badge sits at the left spine, clearing the node marker.
+	   The badge sits above the node (z-index) so on desktop, where the centered
+	   pill covers the centered node, the white year text is never occluded. */
 .year-label {
 	display: inline-block;
 	margin-left: 1.75rem;
+	position: relative;
+	z-index: 2;
 }
 
-/* Navy node marker on the spine so the badge visibly interrupts the axis. */
+/* Navy node marker on the spine. On phone it shows to the left of the badge;
+	   on desktop it sits behind the centered pill, which is itself the
+	   axis interruption. */
 .year-node {
 	position: absolute;
 	top: 50%;
@@ -104,7 +110,7 @@ const rows = $derived.by<Row[]>(() => {
 	height: 11px;
 	border-radius: 9999px;
 	transform: translate(-50%, -50%);
-	z-index: 2;
+	z-index: 1;
 }
 
 /* Per-letter connector dot (white fill via bg-surface, mint ring) on the spine. */

frontend/src/lib/timeline/YearBand.svelte.spec.ts

@@ -126,6 +126,11 @@ describe('YearBand', () => {
 		const n = node.getBoundingClientRect();
 		const l = label.getBoundingClientRect();
 		expect(n.right).toBeLessThanOrEqual(l.left + 0.5);
+		// The badge must paint above the node so the centered desktop pill never
+		// occludes the white year text (regression guard).
+		expect(Number(getComputedStyle(label).zIndex)).toBeGreaterThan(
+			Number(getComputedStyle(node).zIndex)
+		);
 	});
 
 	it('renders one connector dot per letter row, each clearing its card on phone (REQ-005)', async () => {