+
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/working/plans/2026-06-18-ui-redesign.md
+git commit -m "docs: add UI redesign spec, plan, and visual QA checklist"
+```
diff --git a/docs/superpowers/plans/2026-06-19-gpx-manager.md b/docs/superpowers/plans/2026-06-19-gpx-manager.md
new file mode 100644
index 0000000..486b21c
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-19-gpx-manager.md
@@ -0,0 +1,309 @@
+# GPX Manager Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a protected admin page at `/gpx-manager` that lists all trip GPX files and supports upload and deletion via the Grav API.
+
+**Architecture:** A Grav page (`user/pages/03.gpx-manager/`) with a custom Twig template. Access is enforced by the Login plugin via `access.admin.login: true` in page frontmatter. The template renders a section per trip using the Grav page tree, then vanilla JavaScript calls the existing Grav API (`/api/v1/pages{route}/media`) using the browser's live session cookie — no JWT or separate login needed.
+
+**Tech Stack:** Grav 2.0 Twig, Vanilla JS (fetch API), Grav API plugin v1, Grav Login plugin (page access control)
+
+## Global Constraints
+
+- Grav 2.0.0-rc.9 + Admin2 v2.0.0-rc.15; theme `intotheeast` at `user/themes/intotheeast/`
+- API base URL: `/api/v1` (`route: /api`, `version_prefix: v1` in `user/plugins/api/api.yaml`)
+- Session auth: all fetch calls use `credentials: 'include'` — no JWT handling (`session_enabled: true` in api.yaml)
+- API media routes (confirmed from `user/plugins/api/classes/Api/ApiRouter.php:333`):
+ - `GET /api/v1/pages{route}/media` — list; response `{ data: [{ filename, size, modified, type }] }`
+ - `POST /api/v1/pages{route}/media` — multipart file upload
+ - `DELETE /api/v1/pages{route}/media/{filename}` — delete single file
+ - `{route}` is the full Grav route including leading slash, e.g. `/trips/italy-2025`
+- Style: teal `#1F6B5A`, warm border `#e0ddd6`, font-family `'DM Sans', sans-serif` — match existing theme tokens
+- No new plugins, no npm, no build step. All changes inside `user/` only.
+- The page must be `visible: false` — must not appear in site navigation.
+- Trip pages live at `user/pages/01.trips//`; retrieved via `grav.pages.find('/trips').children.published()`
+
+---
+
+### Task 1: Page definition
+
+**Files:**
+- Create: `user/pages/03.gpx-manager/gpx-manager.md`
+
+**Interfaces:**
+- Produces: Grav page routed at `/gpx-manager`, protected by Login plugin, hidden from nav, using template `gpx-manager`
+
+- [ ] **Step 1: Create the page file**
+
+Create `user/pages/03.gpx-manager/gpx-manager.md` with this exact content:
+
+```
+---
+title: 'GPX Manager'
+template: gpx-manager
+visible: false
+routable: true
+access:
+ admin.login: true
+---
+```
+
+- [ ] **Step 2: Verify protection (no template yet)**
+
+With the dev server running, open `http://localhost:8081/gpx-manager` while **logged out** of admin. You should be redirected to the login page. While **logged in**, you'll see a blank page or a Twig error (template missing) — that's fine at this stage.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add pages/03.gpx-manager/gpx-manager.md
+git -C user commit -m "feat: add gpx-manager page definition (access-protected)"
+```
+
+---
+
+### Task 2: Template — layout and trip sections
+
+**Files:**
+- Create: `user/themes/intotheeast/templates/gpx-manager.html.twig`
+
+**Interfaces:**
+- Consumes: `grav.pages.find('/trips').children.published()` — each trip object exposes `.route` (string, e.g. `/trips/italy-2025`), `.title` (string), `.slug` (string, e.g. `italy-2025`)
+- Produces: one `.gpx-trip[data-route]` section per trip; `data-route` = full route string (e.g. `/trips/italy-2025`); `data-trip-route` on upload form = same value
+
+- [ ] **Step 1: Create the template**
+
+Create `user/themes/intotheeast/templates/gpx-manager.html.twig`:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set trips_page = grav.pages.find('/trips') %}
+{% set trips = trips_page ? trips_page.children.published() : [] %}
+
+
+
GPX Files
+
+ {% if trips is empty %}
+
No trips found.
+ {% else %}
+ {% for trip in trips %}
+
+ {% endfor %}
+ {% endif %}
+