refactor(timeline): single-source the spine X position via --spine-x

The spine offset (0.5rem phone / 50% desktop) was hard-coded in both
TimelineView's .timeline-axis::before and YearBand's .year-node/.letter-dot,
kept in sync only by a comment. Declare --spine-x once on .timeline-axis
and have the markers consume it by inheritance, so a change to the spine
position moves the markers with it. Add a test that the year-node tracks
the token.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/timeline/TimelineView.svelte

@@ -92,8 +92,12 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 <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. */
+	   always background; the badges, dots and markers ride on top of it.
+	   --spine-x is the single source of truth for the spine's X position; the
+	   year-node and connector dots in YearBand consume it via inheritance so the
+	   markers can never desync from the line. */
 .timeline-axis {
+	--spine-x: 0.5rem;
 	position: relative;
 	z-index: 0;
 }
@@ -106,7 +110,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	left: 0.5rem;
+	left: var(--spine-x);
 	width: 2px;
 	z-index: -1;
 	/* Three-stop life-thread: mint → navy → slate. Slate lives only as
@@ -115,8 +119,10 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 }
 
 @media (min-width: 1024px) {
+	.timeline-axis {
+		--spine-x: 50%;
+	}
 	.timeline-axis::before {
-		left: 50%;
 		transform: translateX(-50%);
 	}
 }