` 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"
+```