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/YearBand.svelte.spec.ts

@@ -145,4 +145,23 @@ describe('YearBand', () => {
 			card.getBoundingClientRect().left + 0.5
 		);
 	});
+
+	it('positions the year-node from the inherited --spine-x token (REQ-003/004)', async () => {
+		await page.viewport(375, 800);
+		// The spine X lives once on .timeline-axis as --spine-x; the markers must
+		// track that token, not a hard-coded offset, so they never desync.
+		document.documentElement.style.setProperty('--spine-x', '3rem');
+		try {
+			render(YearBand, { year: makeYear(1914, [makeEntry()]) });
+			const node = document.querySelector('[data-testid="year-node"]') as HTMLElement;
+			const section = document.querySelector('section') as HTMLElement;
+			const n = node.getBoundingClientRect();
+			const s = section.getBoundingClientRect();
+			const nodeCenter = n.left + n.width / 2;
+			// --spine-x:3rem = 48px from the band's left edge
+			expect(Math.abs(nodeCenter - s.left - 48)).toBeLessThan(2);
+		} finally {
+			document.documentElement.style.removeProperty('--spine-x');
+		}
+	});
 });