feat(header): mobile hamburger menu + alignment & typography pass

- Header: offset the 4px green ::before bar so content centres in the
  visible dark area, not the geometric box (fixes wordmark/nav/icon
  sitting ~2px high — the root cause behind the whole alignment saga)
- Mobile (≤768px): collapse nav into a slide-down hamburger panel
  (standalone js/nav.js); inline nav retained on desktop
- Nav: use the display serif in sentence case so it shares the
  wordmark's anatomy and aligns naturally (no optical nudge needed)
- Typography tokens: three-tier display tracking (--tracking-display,
  --tracking-display-sm), --tracking-caps, --color-error, paper-glass
  overlays, --text-story/--leading-story; applied across components
- trip-dates: move inline styles to a class

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BftDn9vu9SonFAY4vxu4uk

themes/intotheeast/templates/trip.html.twig

@@ -71,7 +71,7 @@
         <div class="home-trip-header">
             <h1 class="home-trip-name">{{ page.title }}</h1>
             {% if page.header.date_start %}
-            <p class="trip-dates" style="font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-1) 0 var(--space-2);">
+            <p class="trip-dates">
                 {{ page.header.date_start|date('d M Y') }}
                 {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
             </p>