Fix public contrast, tap targets, skip link, and 390px header

[drumpat01]

Lighthouse on journeydeck.me (Oct 12) reported color contrast, tap target, skip-link, and header-wrap issues on the public site.

This PR adds web/public-a11y.css and a skip-to-content link on /, /privacy, /support, /terms, /apple-music-soundtrack, /private-driving-journal, and the 404 page. After #263 and #275 landed on main, this branch merged main again so the soundtrack/journal heroes keep the has-photo srcset, the current App Store copy, and this overlay still wins via section.hero.has-photo::before.

Fixes

• Contrast: the first overlay (#081832f8 / f4 / e8, about 95% solid) hid the forest photo. Review follow-up lightens it to #081832cc behind the text column, fading to #081832b3 then #08183280 on the photo side. On viewports 620px and below the text is full width, so the overlay stays #081832cc to #081832c6. Header nowrap and skip-link rules are unchanged.
• Tap targets: nav, footer, text links, feature CTAs, and tour dots are at least 24px with spacing.
• Skip link: Skip to content points at main#main.
• 390px header: flex-wrap: nowrap plus tighter padding so Menu and Get the app stay on one row.

CSP is unchanged. No em or en dashes were added.

WCAG AA contrast (rechecked after the lighter overlay)

Gold #d4b15a, ivory #f6f0e2, and lede #e4e3df on navy #081832, plus worst-case #081832cc over white:

Text	Size	vs solid navy	vs #081832cc over white	AA
Gold eyebrow	10.88px / 700	8.62:1	4.63:1	Pass (4.5:1)
Ivory h1	37.6 to 72px	15.57:1	8.37:1	Pass (large 3:1)
Lede	16 to 18.88px	13.78:1	7.40:1	Pass (4.5:1)

#081832b3 (70%) over white would drop gold to 3.23:1, so that stop is only on the photo side, not under the text.

Tests

server/tests/public-a11y.test.ts asserts the stylesheet (?v=2), skip link, #main, the #081832cc / #081832b3 overlay, and CSP on each public page.

Do not merge or deploy from this PR.

Hero screenshots after the lighter overlay (1280x800 and 390x844)

Captured after merging #263's has-photo markup so the photo and overlay are the production stack. The journal phone frame was reshot after #275 so it shows the current lede (no dash line) and Download on the App Store, not Start free on iPhone.

Header, skip link, and earlier shots

  

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-12T19:10:34.877265Z	6c18bfe	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6c18bfe3ff

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Limit the overlay rule to public-page heroes

Because beta.html now imports this stylesheet and the / front cover is also a <section class="hero section-shell">, this selector unintentionally applies the forest background to the entire home-page hero. That changes the existing plain cover design and eagerly downloads the 322 KB full-size image, even though the homepage previously used responsive, lazy-loaded variants only in its later scenic section. Scope these background rules to the public-page hero variant while retaining the shared header and tap-target fixes on /.

Useful? React with 👍 / 👎.