feat(mockups): 16 voyage readable (Inter labels, listen & lyrics tab, combined paths)

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

docs/design/002-direction-round-notes.md

@@ -310,6 +310,10 @@ What is in `~/epic-the-musical-content/` (1.5 GB, checked 2026-10-30):
   `.lrc` lyrics and the actual Odyssey passage). Implemented as spec `docs/specs/003-content-mount.md`.
 - Note: Butler's translation uses Roman names (Ulysses, Minerva, Jove). Worth a line in the UI.
 
+- **16 is finished and committed**; report in `docs/design/002-sea-chart-spikes/16-voyage-readable-report.md`.
+  Preview rebuilt with 01–16 and the content folder mounted. Known: timeline at its height budget with
+  3 motif rows; the panel strip still shows numbers only; ribbon labels sit on the mountain face.
+
 ## Open questions (in priority order)
 
 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9).

docs/design/002-sea-chart-spikes/16-voyage-readable-report.md

@@ -0,0 +1,123 @@
+# 16 Voyage, readable — report
+
+Status: **done** (not committed). Built from `16-voyage-readable-brief.md`, starting from a copy of 15.
+
+## What was built
+
+`src/mockups/16-voyage-readable/` is 15 (look 2, five beats, toon/ink 3D, meander accents on every
+menu, panel and HUD, beat 2's colours, placeholders) with three changes. URL params: `?beat=` `?t=`
+`?play=` `?panel=0` as before, plus **`?tab=about|listen|paths|fan`**, **`?timeline=open|closed`**
+(default open), **`?ribbons=1`**, **`?motif=<id>`** and **`?t_play=<s>`**. `t_play` starts the
+first song's player at that second, playing, so a screenshot can show playback.
+
+1. **Readable type.** 15's small Cormorant capitals with wide tracking are gone from every label.
+   - **Inter** (400/500/600) is used for all UI: caption eyebrow (15px), HUD (14px), tabs (15px,
+     sentence case), fact labels, panel eyebrow, strip and timeline labels, saga names, "you are
+     here", B labels and fan-work types. Tracking is 0 everywhere except the frieze's vertical saga
+     name (0.06em).
+   - **Cormorant** is kept only for big display text: the caption title, the panel song title, section
+     headings (22px), part headings in the lyrics, italic lyric lines (19px), the About fact (20px) and
+     the frieze inscriptions. These are now 27 units, which is about 19px on screen (15 used 19 units,
+     about 13px).
+   - **Nothing under 13px on screen.** This includes the SVG text: timeline titles, stop numbers and
+     saga names are 13px. The frieze's saga column and thread names are Inter at about 14px. The route
+     chart's 7px port numbers are hidden, and its place names were enlarged. Panel body text is 15px.
+     Text uses iron `#2b2118`, iron-soft `#5a4836` and clay-deep `#9a4520` on vellum, all about 5:1 or
+     better.
+2. **Listen & lyrics, one tab** (`player.ts`, `panel.ts`). Tabs: About · Listen & lyrics · Paths · Fan
+   works. About keeps the facts, the Odyssey, parts and singers, and Watch. It also gains a "Listen
+   with the lyrics" button.
+   - **Player card** at the top of the tab, with a meander edge. It has a 56px play/pause button, the
+     current part and its singers, elapsed / total time, and a scrub bar with ticks at the part starts
+     (click or drag it; ←/→ seek 5s). Below the bar is one button per part ("Verse 2 0:50"), and the
+     current part is filled terracotta. The note under it reads "Preview player: no audio file yet.
+     Playback is simulated."
+   - **Lyrics by part** below the card. Each part heading is a button (▶ Verse 2 0:50) that jumps the
+     player there and plays. The current part gets a terracotta wash, an ink outline and a "Now
+     playing" chip, and it scrolls into view when the part changes. Singer pills and motif chips stay;
+     motif picks still dim and highlight parts.
+   - **Simulated playback.** A rAF clock runs over a made-up, stable duration per song (2:30–4:10).
+     Part starts use `part.startSec` when the data has it, and are otherwise spread evenly across the
+     song. If `song.audio` exists, a real `<audio>` element drives the same UI instead. The shared
+     `audio-slot.ts` is untouched.
+   - **Header play button.** A 52px terracotta disc beside the song title, always visible. One click
+     starts the song and switches to Listen & lyrics; a second click pauses. While a song plays, the
+     header eyebrow reads "Playing · Verse 1 · 0:41 / 3:52". Moving to a new song on the voyage loads
+     that song's player, stopped at 0:00.
+3. **Paths combined.** The A/B/C toggle is removed.
+   - **The timeline at the bottom is home, open by default.** It shows all songs titled in Inter 13px,
+     saga dividers and names, the here-band, the sailing ship with "you are here", and the current
+     song's motif threads. Titles are measured and split into the narrowest one or two lines, and the
+     stops are spaced by title width, so neighbouring titles never touch. The HUD is **182px** tall,
+     under the 190px budget.
+   - **Collapse.** A "Hide timeline ⌄" pill at the right of the HUD row collapses it to a slim course:
+     the beat row plus numbered stop discs, saga ticks, and the ship with "you are here · Polyphemus".
+     It is about 113px tall in total.
+   - **The panel strip appears only when collapsed.** 15's A strip is pinned between the header and the
+     tabs. It now uses 13px numbers and motif names and gets the "Motif paths" heading. When the
+     timeline is open, the strip is hidden.
+   - **"Threads on the sea" switch** (role=switch, off by default). It turns on the 3D ribbons and their
+     labels, and the frieze's thread register in beats 1 and 4.
+   - **The label fix for 15's B.** Labels are grouped by the knot they point at. In landfall, the two
+     motifs returning in Survive now share one label, "Next: 7. Survive", with each motif as its own
+     button. Each label is lifted 96px above its knot on an ink leader line with a ring at the knot, so
+     it sits on the mountain above the cave mouth, not over it. Labels stack against each other using
+     measured sizes, and stay below the caption card.
+   - One motif pick still highlights everywhere: timeline, panel strip, Paths tab, lyrics chips and
+     parts, frieze threads, ribbons and labels.
+   - **Framing.** The stage lifts the 3D picture by part of the HUD height. Both cameras render a window
+     into a taller frame (`setViewOffset` with a compensated fov), so nothing zooms and the image only
+     shifts up. The frieze box's bottom inset follows the HUD's measured height. The morph's horizon
+     lock accounts for the shift.
+
+Files: `main.ts` (HUD row, switch, timeline open/closed, label grouping and placement, framing),
+`panel.ts` (tabs, header play, Listen & lyrics), `player.ts` (new), `threads.ts` (measured timeline
+layout, slim strip, readable sizes), `scene.ts` (`setFrameShift`), `frieze.ts` (thread rows and names),
+`style.css` (new type system and new components), and `chart.ts`, `fanworks.ts`, `figures.ts`,
+`ribbons.ts` copied from 15.
+
+## Screenshots (1440×900, `screenshots/`)
+
+- `16-voyage-readable-beat1.png` … `-beat5.png`: timeline open, ribbons off
+- `-listen.png`: beat 3, Listen & lyrics, `?t_play=40`, playing Verse 1
+- `-collapsed.png`: timeline closed, strip pinned in the panel
+- `-ribbons.png`: beat 3, ribbons on, `?motif=polyphemus`
+- `-fan.png`: Fan works tab
+- Extra: `-beat1-ribbons.png` (frieze thread register, `?motif=warrior`), `-beat2-ribbons.png`,
+  `-beat5-ribbons.png` (cave), `-paths-tab.png` (Paths tab, collapsed), `-panel-closed.png`
+
+The credits footer is fully visible in every one.
+
+## What works
+
+- **It reads.** At 100%, every label in every screenshot reads without effort: the HUD, the timeline
+  titles, the tabs, the fact rows, the strip, the B labels and the frieze inscriptions. The meander
+  bands, the terracotta/black accents and beat 2's sea and sky keep 15's cohesion. Only the type
+  changed.
+- **Listen is one click.** The header button is always there, and playing lands you in the lyrics with
+  the current part lit. The parts are the player's chapters, so listening and lyrics are one thing.
+- **Paths no longer have to be chosen.** The timeline gives the overview. Collapsing it moves the
+  threads into the panel, so they are never hidden. The sea ribbons are an opt-in flourish, and their
+  labels no longer pile up on the cave (`-ribbons`, `-beat2-ribbons`, `-beat5-ribbons`).
+- The landfall and cave are framed above the open timeline. In the cave the flock and the giant are
+  fully visible (`-beat5`).
+- Checked: `bun test` (62 pass), `bun run typecheck` (clean) and a production build to the scratchpad. A scratch happy-dom run
+  (deleted afterwards) checked that the header play opens Listen & lyrics and plays, a part heading
+  jumps to 0:50 and highlights that part and chip, and pause works.
+
+## What doesn't, or is rough
+
+- **The timeline is still 182px of stage.** With three motif rows it is at the limit, and a song with
+  four motifs would need about 16px more. The thread rows are 16px apart, which is readable but snug.
+- **Timeline spacing is uneven by design.** Stops are spaced by title width, so the voyage's rhythm is
+  not to scale; Survive and Remember Them sit closer than the others. Slim mode is evenly spaced.
+- **The frieze thread names in beat 1** sit just under the ground line, close to the saga column's
+  rules. When a motif is picked, the other names dim to low contrast on clay, as intended.
+- **B labels are lifted 96px on leader lines.** In landfall the label sits on the mountain's face. In
+  the open sea, ribbons near the camera still sweep under the HUD.
+- **The pinned strip in the panel is dense.** Stops are 21px apart, so it shows numbers, not titles;
+  the titles are in the tooltips and the Paths tab.
+- **The simulated player is a timer,** and real audio was not tested. With `?t_play` under headless
+  virtual time the clock advances a few seconds (40 → 0:41 in the shot). Desktop 1440×900 only.
+- With the panel closed, a ring from 14's sun shows at the stage's right edge (`-panel-closed`). This is
+  inherited and unchanged.