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/partials/base.html.twig

@@ -8,6 +8,7 @@
     {% do assets.addCss('theme://css/style.css') %}
     {% do assets.addCss('theme://css-compiled/main.css') %}
     {% do assets.addJs('theme://js/main.js', {group: 'bottom'}) %}
+    {% do assets.addJs('theme://js/nav.js', {group: 'bottom'}) %}
     {% block map_assets %}{% endblock %}
     {{ assets.css()|raw }}
     {{ assets.js()|raw }}
@@ -17,7 +18,12 @@
     <header class="site-header">
         <a class="site-title" href="{{ base_url_absolute }}">into the east</a>
         {% block nav %}
-        <nav class="site-nav" aria-label="Main navigation">
+        <button class="nav-toggle" type="button" aria-label="Open menu" aria-controls="site-nav" aria-expanded="false">
+            <span class="nav-toggle__bar"></span>
+            <span class="nav-toggle__bar"></span>
+            <span class="nav-toggle__bar"></span>
+        </button>
+        <nav class="site-nav" id="site-nav" aria-label="Main navigation">
             <a href="{{ base_url_absolute }}"{% if page.template == 'home' %} aria-current="page"{% endif %}>Home</a>
             <a href="{{ base_url_absolute }}/trips"{% if page.template == 'trips' %} aria-current="page"{% endif %}>Past Trips</a>
         </nav>

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>