frontend/src/lib/timeline/TimelineView.svelte

@@ -90,6 +90,14 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 {/if}
 
 <style>
+/* Establish a stacking context so the spine (z-index: -1) sits behind the
+	   in-flow cards/pills/strips but still in front of the canvas — the line is
+	   always background; the badges, dots and markers ride on top of it. */
+.timeline-axis {
+	position: relative;
+	z-index: 0;
+}
+
 /* Phone (< 1024px): a single left-anchored spine. Desktop (≥ 1024px): a
 	   centered spine the bands' alternating cards sit on either side of. The
 	   spine is decorative — the chronology lives in the <ol> DOM order. */
@@ -100,6 +108,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 	bottom: 0;
 	left: 0.5rem;
 	width: 2px;
+	z-index: -1;
 	/* Three-stop life-thread: mint → navy → slate. Slate lives only as
 	   --c-tag-slate (there is no --palette-slate). REQ-006/013. */
 	background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate));

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

@@ -254,10 +254,13 @@ describe('TimelineView', () => {
 			});
 			const axis = document.querySelector('.timeline-axis') as HTMLElement;
 			expect(axis).not.toBeNull();
-			const bg = getComputedStyle(axis, '::before').backgroundImage;
+			const before = getComputedStyle(axis, '::before');
+			const bg = before.backgroundImage;
 			expect(bg).toContain('gradient');
 			// three colour stops: mint, navy, slate
 			expect((bg.match(/rgb/g) ?? []).length).toBe(3);
+			// the spine is always background: behind the in-flow cards/pills/strips.
+			expect(before.zIndex).toBe('-1');
 		} finally {
 			root.style.removeProperty('--palette-mint');
 			root.style.removeProperty('--palette-navy');