feat(roadmap): Jesse's journey — alternating timeline with era chapters (#132)

[eaitbrahim]

Closes #132 — the journey becomes Jesse's vertical historical map instead of a one-sided card list: a center spine, entries alternating sides, era chapters, story-first entries.

What changed

• Center spine, alternating entries (≥ 64rem — the site's own lg): one 2px spine drawn behind everything; entries are half-width cards justified to the start/end column, each with an accent dot bead on the spine. Sides come from the server-computed journey index, not :nth-child, so the zigzag carries across chapter boundaries instead of restarting with each chapter.
• Era chapters: the timeline breaks at each new month in the closedAt dates — July 2026 (3 entries) → August 2026 (11 entries). Labels derive from the data via a new c.formatEra i18n field: Intl.DateTimeFormat with timeZone: "UTC" and calendar: "gregory", so a label can't drift with the build machine's timezone. Localized as juillet 2026 / يوليوز 2026 — ar-MA deliberately, for Moroccan month names in Western digits matching the site's numeric dates.
• Story-first entries: milestone title (linked to the milestone) + the first sentence of the description as prose + ship date + item count. Two guards on the lede, both from the real data: a one-word sentence (BLOCKING.) accumulates sentences up to a 24-char floor, and a one-giant-sentence change log (Phase 13's is ~800 characters) cuts at 220 on a word boundary with an ellipsis. Where the description continues past the lede, the entry links "View this milestone on GitHub →" — previously dead copy in the i18n file, now earning its keep.
• Mobile (< 64rem): the spine hugs the inline-start edge, every entry sits on one side, and the era markers run inline as pills breaking the rail.
• The story leads the page: the journey moved above the open-milestones section (the issue asks for story-first, open "below") and out of the 66ch reading column to the container's width — the map needs the breadth; its prose stays ≤ 58ch. The open section's framing is untouched, and the fetch is untouched.

Pure CSS — grid plus logical properties only, so the Arabic edition mirrors spine, sides and dots. Zero JS.

Verification

• npx astro check (cache cleared): 0 errors (4 pre-existing hints in untouched files). npm run build: 70 pages.
• Puppeteer (Chrome) /en/roadmap/ @ 1280: 14 entries, strict odd/even alternation down the page (s e s e s e s e s e s e s e; start-left 96.0 vs end-left 670.4), eras ["July 2026", "August 2026"] in reading order. A device-pixel probe (dsf 8) confirms every dot's painted center sits exactly on the spine column (Δ 0px).
• /ar/roadmap/ @ 1280: mirrored — the start side is the right half (670.4 vs 96.0), alternation intact, eras يوليوز 2026 / غشت 2026.
• 390px × en/ar/fr: single side (all entry lefts equal), era markers inline, document.scrollWidth = 390 in all three — zero overflow, zero offending elements.
• Degraded state re-checked: with milestones.json absent, the stale banner renders and no timeline does.

Screenshots

Desktop 1280 — en (alternating, era chapters centered on the spine):

Desktop 1280 — ar (RTL: spine and sides mirror; entries still alternate):

Mobile 390 — single side, inline era markers (en / ar / fr):

en	ar	fr

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud