` tag with:
-
-```twig
-
-
Trip Statistics
-```
-
-(Remove the inline `style` attribute from the existing h1.)
-
-- [ ] **Step 2: Replace Stats + Map + Mini-map CSS sections**
-
-Find `/* ── Map page ──` through end of `/* ── Mini-map on tracker feed ──`. Replace all three sections with:
-
-```css
-/* ── Map page ───────────────────────────────────────────────────────────────── */
-
-.map-page .site-main { max-width: none; padding: 0; }
-
-.map-container {
- height: calc(100vh - var(--site-header-height));
- width: 100%;
-}
-
-.map-empty {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- color: var(--color-ink-muted);
- font-style: italic;
-}
-
-/* ── Stats page ─────────────────────────────────────────────────────────────── */
-
-.stats-heading {
- font-family: var(--font-display);
- font-size: var(--text-2xl);
- font-weight: 400;
- margin-bottom: var(--space-8);
- color: var(--color-ink);
-}
-
-.stats-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-4);
- margin-bottom: var(--space-8);
-}
-
-.stat-block {
- background: var(--color-canvas);
- border: 1px solid var(--color-border);
- border-radius: var(--radius-md);
- padding: var(--space-6) var(--space-5);
- text-align: center;
- box-shadow: var(--shadow-sm);
-}
-
-.stat-value {
- display: block;
- font-family: var(--font-display);
- font-size: var(--text-3xl);
- font-weight: 400;
- color: var(--color-accent);
- line-height: 1.1;
- margin-bottom: var(--space-2);
-}
-
-.stat-label {
- display: block;
- font-size: var(--text-xs);
- font-weight: 600;
- color: var(--color-ink-muted);
- text-transform: uppercase;
- letter-spacing: 0.07em;
-}
-
-.stats-countries {
- font-size: var(--text-sm);
- color: var(--color-ink-2);
- text-align: center;
- line-height: 1.9;
-}
-
-.stats-countries-label {
- font-weight: 600;
- display: block;
- margin-bottom: var(--space-2);
- color: var(--color-ink);
- text-transform: uppercase;
- font-size: var(--text-xs);
- letter-spacing: 0.07em;
-}
-
-.stats-note {
- font-size: var(--text-xs);
- color: var(--color-ink-muted);
- text-align: center;
- margin-top: var(--space-6);
-}
-
-/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
-
-.feed-map-wrap {
- margin-bottom: var(--space-10);
- border-radius: var(--radius-md);
- overflow: hidden;
- border: 1px solid var(--color-border);
- box-shadow: var(--shadow-sm);
-}
-
-.feed-map {
- height: 240px;
- width: 100%;
-}
-
-@media (min-width: 520px) {
- .feed-map { height: 300px; }
-}
-
-.feed-map-link {
- display: block;
- text-align: right;
- font-size: var(--text-xs);
- font-weight: 500;
- color: var(--color-accent);
- text-decoration: none;
- padding: var(--space-2) var(--space-4);
- background: var(--color-paper);
- border-top: 1px solid var(--color-border);
-}
-
-.feed-map-link:hover { color: var(--color-accent-hover); }
-```
-
-- [ ] **Step 3: Update Leaflet marker colors**
-
-In `tracker.html.twig`, find the JS that sets marker colors. Update from `#0066cc` to `#1F6B5A` and from `#0044aa` to `#155244`:
-
-```js
-var color = isLatest ? '#155244' : '#1F6B5A';
-```
-
-Also update the polyline color:
-```js
-L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
-```
-
-Do the same in `map.html.twig` — update any hardcoded `#0066cc` colors to `#1F6B5A`.
-
-- [ ] **Step 4: Verify stats and map pages**
-
-Open `http://100.96.115.96:8081/stats`. Verify:
-- Heading in DM Serif Display
-- Numbers in DM Serif Display, teal color
-- Stat cards on warm white background with subtle shadow
-- Labels uppercase, muted gray
-
-Open `http://100.96.115.96:8081/map`. Verify:
-- Map fills viewport below header
-- Markers are teal circles
-- Route line is teal
-- No horizontal scroll or layout issues
-
-- [ ] **Step 5: Commit**
-
-```bash
-cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
-git add themes/intotheeast/templates/stats.html.twig themes/intotheeast/templates/tracker.html.twig themes/intotheeast/templates/map.html.twig themes/intotheeast/css/style.css
-git commit -m "feat: apply design tokens to stats, map, and mini-map"
-```
-
----
-
-### Task 8: Mobile polish + reduced motion + final QA
-
-**Files:**
-- Modify: `user/themes/intotheeast/css/style.css` (add responsive + motion CSS)
-
-**Interfaces:**
-- Produces: fully responsive, accessible design at 320px–1440px viewport widths
-
-- [ ] **Step 1: Add reduced-motion support**
-
-At the bottom of `style.css`, append:
-
-```css
-/* ── Accessibility ───────────────────────────────────────────────────────────── */
-
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
-}
-
-/* Keyboard focus ring: visible on all interactive elements */
-:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-```
-
-- [ ] **Step 2: Verify header on 320px (smallest phone)**
-
-Set browser devtools to 320px viewport. Verify:
-- Site title and nav links both visible and not overlapping
-- If title overflows, add this to style.css:
- ```css
- @media (max-width: 380px) {
- .site-title { font-size: var(--text-md); }
- .site-nav a { padding: var(--space-2); font-size: 0.8rem; }
- }
- ```
-
-- [ ] **Step 3: Verify post form on mobile**
-
-On a real phone (or devtools 375px), open `/post` and verify:
-- Inputs do not trigger zoom on focus (font-size is 1rem ≥ 16px — already set)
-- "Post Entry" button is thumb-reachable (full-width, 52px min height)
-- Get Location / Get Weather buttons are side-by-side, each at least 44px tall
-- Status feedback visible after tapping location/weather
-
-- [ ] **Step 4: Cross-page smoke test checklist**
-
-Check each of these manually in the browser:
-
-| Page | Check |
-|---|---|
-| `/tracker` | Feed loads, entry cards show hero photos with overlays |
-| `/tracker` | Text-only cards (no photo) show date+location meta above title |
-| `/tracker` | Mini-map renders, teal markers and route |
-| `/map` | Full-height map, teal markers, route polyline |
-| `/map` | Tap marker → popup with date, title, "Read entry →" link |
-| `/stats` | 2×2 grid of stat blocks, teal numbers, correct counts |
-| `/tracker/` | Hero image full-width at top (if photos exist) |
-| `/tracker/` | Title in DM Serif Display, large |
-| `/tracker/` | Photo gallery (2/3-col grid), lightbox opens on tap |
-| `/post` | Lat/lng fields NOT visible |
-| `/post` | Tap Post Entry → success message → redirects to /tracker |
-| Mobile 375px | All pages usable without horizontal scroll |
-| Mobile 375px | No font size < 14px for readable text |
-
-- [ ] **Step 5: Final commit**
-
-```bash
-cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
-git add themes/intotheeast/css/style.css
-git commit -m "feat: add reduced-motion support, keyboard focus, mobile polish"
-```
-
----
-
-### Task 9: Update documentation
-
-**Files:**
-- Modify: `user/docs/qa-test-plan.md` (add visual QA section)
-
-- [ ] **Step 1: Add visual design QA section to qa-test-plan.md**
-
-Append a new section to `user/docs/qa-test-plan.md`:
-
-```markdown
-## Visual Design QA — Redesign Checklist
-
-**Design spec:** `user/docs/design/design-spec.md`
-
-### Typography
-- [ ] DM Serif Display loads on entry titles, page headings, stats numbers, site title
-- [ ] DM Sans loads on all body text, nav, labels, form fields
-- [ ] No fallback font (Georgia/system-sans) visible in place of custom fonts
-
-### Colors
-- [ ] Page background is warm paper (#F7F5F2), not pure white
-- [ ] All links and CTAs use teal (#1F6B5A), not blue (#0066cc)
-- [ ] Active nav link is teal
-- [ ] Map markers and route polyline are teal
-
-### Entry cards
-- [ ] Cards with photos show full-bleed 16:9 image
-- [ ] Date + location overlay visible on photo gradient
-- [ ] Entry title below photo in DM Serif Display
-- [ ] Cards without photos show date/location meta row above title
-- [ ] Photo zoom on hover (desktop only)
-
-### Header
-- [ ] 3px teal bar at top of header
-- [ ] "into the east" title in DM Serif Display
-- [ ] Sticky on scroll
-
-### Post form
-- [ ] Lat/lng inputs not visible
-- [ ] "✓ Location captured" feedback in teal on success
-- [ ] Submit button full-width, teal, 52px+ height
-
-### Mobile
-- [ ] All interactive elements ≥ 44px touch target
-- [ ] No horizontal scroll at 375px
-- [ ] iOS: no font-size zoom on input focus
-```
-
-- [ ] **Step 2: Commit documentation**
-
-```bash
-cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
-git add docs/qa-test-plan.md docs/design/design-spec.md docs/superpowers/plans/2026-06-18-ui-redesign.md
-git commit -m "docs: add UI redesign spec, plan, and visual QA checklist"
-```