feat: add remote-fetch-content to pull user content repo on server

Separate from remote-fetch (main repo) since content sync is handled
by the git-sync plugin once configured; this is for one-off manual pulls.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr

.env.example

@@ -9,7 +9,7 @@ WEBROOT=/home/example.com/public_html
 SITE_CONFIG_DIR=/home/example.com/site-config
 
 # Grav
-GRAV_VERSION=1.7.52
+GRAV_VERSION=2.0.0-rc.10
 
 # Repos
 USER_REPO=https://gitea.example.com/org/intotheeast-user.git
@@ -19,3 +19,8 @@ MAIN_REPO=https://gitea.example.com/org/travel-blog-intotheeast.git
 GITEA_HOST=gitea.example.com
 GITEA_USER=deploy-user
 GITEA_TOKEN=your-gitea-personal-access-token
+
+# Test credentials — used by 'make test-post' (must be a valid Grav site login user)
+GRAV_TEST_USER=mischa
+GRAV_TEST_PASS=TravelBlog2026!
+GRAV_BASE_URL=http://localhost:8081

.gitignore

@@ -3,13 +3,24 @@
 
 # Grav CMS
 /user/
+!/user/
+!/user/plugins/
+!/user/plugins/cache-on-save/
 user/accounts/
 user/data/
 user/cache/
-user/plugins/
 
 # Claude
 .claude/
 
+# Tests
+node_modules/
+test-results/
+playwright-report/
+tests/.auth/
+
+# travel-memories state
+docs/immich-workflow/*.json
+
 # OS
 .DS_Store

CLAUDE.md

@@ -9,6 +9,60 @@
 - **./**: Grav CMS dev environment for intotheeast travel blog
 - **scripts/**: Server install and maintenance scripts
 - **user/**: Site content, config, pages, and theme (standalone git repo — do not modify from here)
+- **docs/**: All plans, specs, and project documentation (moved here from `user/docs/` on 2026-06-19)
+
+### Current stack
+
+- **Grav:** 2.0.0-rc.10 (baked into the custom Docker image via `Dockerfile`)
+- **Admin:** Admin2 v2.0.0-rc.15 (plugin slug: `admin2`, NOT `admin`)
+- **Docker image:** `getgrav/grav` with `GRAV_CHANNEL=beta`
+- **PHP session:** `session.save_path = /tmp` set in `php/php-local.ini`
+
+### Dev server
+
+The Docker dev server runs at **http://localhost:8081** (mapped from container port 80 in `docker-compose.yml`).
+
+### Trip entity architecture
+
+The site is structured around Trip entities. Key facts:
+- Active trip is set in `user/config/site.yaml` → `active_trip: japan-korea-2026`
+- Trip pages live at `user/pages/01.trips/<slug>/`
+- Each trip has: `01.dailies/`, `02.map/`, `03.stats/`, `04.stories/`
+- Site nav in `base.html.twig` has Home + Past Trips only — does not link to trip sub-sections
+- Post form parent (`post-form.md` → `pageconfig.parent`) **must be kept in sync** with `active_trip`
+- The trip page (`trip.html.twig`) uses a **client-side filter bar** (All content / Journal / Stories) — do NOT add nav links back to `/dailies`, `/stats`, `/stories` on the trip page
+- Stats are shown inline on the trip page via a toggle; the standalone `/stats` sub-page still exists as a URL but is not linked from the trip page
+- GPX route files live as media on the trip page itself, served via leaflet-gpx CDN
+- Manage GPX files (view/upload/delete) at `/gpx-manager` — requires admin login; filenames are auto-slugified on upload
+
+### GPX file management
+
+GPX files are stored as page media on the trip page (`user/pages/01.trips/<slug>/`). They are picked up automatically by `map.html.twig` via `trip_page.media.all`.
+
+The GPX manager page (`user/pages/03.gpx-manager/`) provides a browser UI at `/gpx-manager`:
+- **Auth:** enforced by Login plugin via `access.admin.login: true` in frontmatter — shows login form if not authenticated
+- **Template:** `user/themes/intotheeast/templates/gpx-manager.html.twig`
+- **API:** uses Grav API v1 with session cookie auth (`session_enabled: true` in `user/plugins/api/api.yaml`)
+  - List: `GET /api/v1/pages{route}/media`
+  - Upload: `POST /api/v1/pages{route}/media` (multipart)
+  - Delete: `DELETE /api/v1/pages{route}/media/{filename}`
+- **Slugification:** filenames are slugified client-side before upload (spaces/special chars → hyphens, lowercase); the file is sliced to a plain `Blob` so the third argument to `FormData.append` is always used as the filename
+- **Media type:** `.gpx` is registered in `user/config/media.yaml` so Grav serves and tracks these files
+
+To add GPX files without the browser UI, drop them directly into `user/pages/01.trips/<slug>/` and run `make content-push`.
+
+### Switching to a new trip
+
+Two places hardcode the active trip slug. Grav's config and page frontmatter are static YAML — no variable substitution is possible, so these cannot read from `site.yaml` automatically. **Both must be updated together** when starting a new trip, or entries will be posted to the wrong folder.
+
+| File | Key | Example value |
+|---|---|---|
+| `user/config/site.yaml` | `active_trip` | `italy-2027` |
+| `user/pages/02.post/post-form.md` | `pageconfig.parent` | `/trips/italy-2027/dailies` |
+
+Note: `system.yaml` `home.alias` is permanently set to `/home` (the real home page) and does **not** need to change when switching trips.
+
+After updating, also create the new trip's page tree under `user/pages/01.trips/<new-slug>/` with the standard four subfolders.
 
 ### Environment
 
@@ -23,7 +77,50 @@ Always use `make` commands for anything on the production server (`make remote-i
 - `make content-push` — commit and push `user/` to Gitea (triggers production pull via webhook)
 - `make content-pull` — pull latest from Gitea to local
 - `plugins.txt` is manually maintained — installing a plugin via Admin does NOT update it
+- `make demo-load` — load demo content into `italy-2026-demo` trip (12 journal entries + 4 stories + 7 GPX files); source in `user/docs/demo/trips/italy-2026-demo/`
+- `make demo-reset` — remove the entire `italy-2026-demo` pages folder and clear cache (full reset; re-run demo-load to restore)
 
 ### User repo gitignore
 
 Only these folders are tracked in the `user/` Git repo: `pages/`, `config/`, `accounts/`, `themes/`. The `plugins/` and `data/` folders are excluded.
+
+## 1. Environment modes
+
+### Rule: do not switch modes during development
+
+**Never toggle between development and production mode mid-session.** If a caching or config issue appears, fix it at the application level (plugin, template logic) rather than temporarily flipping a mode flag to work around it. Mode switches introduce inconsistent state and make bugs harder to reproduce.
+
+### Development mode (current)
+
+Active settings in `user/config/system.yaml`:
+
+| Setting | Dev value | Why |
+|---|---|---|
+| `twig.cache` | `false` | Theme file edits take effect immediately; no stale compile errors |
+
+With these settings, Grav rebuilds templates on every request. This is intentionally slower but means you never need to flush cache after editing a `.html.twig` file.
+
+### Production mode (not yet configured)
+
+Before going live, change in `user/config/system.yaml`:
+
+| Setting | Prod value | Why |
+|---|---|---|
+| `twig.cache` | `true` | Templates compiled once and reused; safe because theme files don't change at runtime |
+
+**Pre-launch smoke test required:** with `twig.cache: true`, submit one post via `/post` and confirm the entry appears in `/trips/italy-2026-demo/dailies` immediately. This verifies the cache-on-save plugin (BUG-001 fix) works correctly with caching enabled.
+
+### What the cache-on-save plugin handles
+
+The custom plugin at `user/plugins/cache-on-save/` clears Grav's page-tree cache on every `new-entry` form submission. This ensures new posts appear in the tracker feed immediately in both modes — it does not depend on whether Twig caching is on or off.
+
+## 2. Local development setup
+
+Full setup guide: [`docs/guides/local-setup.md`](docs/guides/local-setup.md)
+
+### Superpowers skill paths
+
+Specs: `docs/working/specs/YYYY-MM-DD-<topic>-design.md`
+Plans: `docs/working/plans/YYYY-MM-DD-<topic>.md`
+
+The brainstorming and writing-plans skills default to `docs/superpowers/`; these lines override that default.

Dockerfile

@@ -0,0 +1,18 @@
+FROM getgrav/grav
+
+RUN curl -sL 'https://github.com/getgrav/grav/releases/download/2.0.0-rc.10/grav-admin-v2.0.0-rc.10.zip' \
+        -o /tmp/grav-admin.zip \
+    && unzip -q /tmp/grav-admin.zip -d /tmp \
+    && cp -rf /tmp/grav-admin/assets /var/www/html/ \
+    && cp -rf /tmp/grav-admin/bin /var/www/html/ \
+    && cp -rf /tmp/grav-admin/system /var/www/html/ \
+    && cp -rf /tmp/grav-admin/vendor /var/www/html/ \
+    && cp -rf /tmp/grav-admin/webserver-configs /var/www/html/ \
+    && cp -f /tmp/grav-admin/index.php /var/www/html/ \
+    && cp -f /tmp/grav-admin/composer.json /var/www/html/ \
+    && cp -f /tmp/grav-admin/composer.lock /var/www/html/ \
+    && cp -f /tmp/grav-admin/CHANGELOG.md /var/www/html/ \
+    && cp -f /tmp/grav-admin/LICENSE.txt /var/www/html/ \
+    && cp -f /tmp/grav-admin/webserver-configs/htaccess.txt /var/www/html/.htaccess \
+    && rm -rf /tmp/grav-admin /tmp/grav-admin.zip \
+    && mkdir -p /var/www/html/logs /var/www/html/images /var/www/html/backup

Makefile

@@ -6,18 +6,65 @@ SSH := ssh -p $(REMOTE_PORT) $(REMOTE_USER)@$(REMOTE_HOST)
 WEBROOT ?= $(REMOTE_HOME)/public_html
 SITE_CONFIG_DIR ?= $(REMOTE_HOME)/site-config
 
+# ── Tests ─────────────────────────────────────────────────────────────────────
+
+test-config:
+	@bash scripts/test-form-config.sh
+
+test-post:
+	@bash scripts/test-post.sh
+
+test-ui:
+	@npx playwright test
+
+test: test-config test-post test-ui
+
 # ── Local dev ──────────────────────────────────────────────────────────────────
 
+build:
+	docker compose build
+
 start:
 	docker compose up -d
 
 stop:
 	docker compose down
 
-setup: start install-plugins
+setup: build start install-plugins fix-perms
+
+fix-perms:
+	docker exec intotheeast_grav bash -c "getent passwd 1000 > /dev/null || useradd -u 1000 -M hostuser"
+	docker exec intotheeast_grav chown -R 1000:1000 /var/www/html
+	docker exec intotheeast_grav apachectl graceful
+
 
 install-plugins:
-	docker exec intotheeast_grav php /app/www/public/bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y
+	docker exec -w /var/www/html intotheeast_grav php bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y
+
+# ── Demo content ──────────────────────────────────────────────────────────────
+
+demo-load:
+	# Load italy-2026-demo trip (create pages if absent)
+	docker exec intotheeast_grav bash -c "\
+		mkdir -p /var/www/html/user/pages/01.trips/italy-2026-demo/01.dailies /var/www/html/user/pages/01.trips/italy-2026-demo/02.map /var/www/html/user/pages/01.trips/italy-2026-demo/03.stats /var/www/html/user/pages/01.trips/italy-2026-demo/04.stories && \
+		cp /var/www/html/user/docs/demo/trips/italy-2026-demo/trip.md /var/www/html/user/pages/01.trips/italy-2026-demo/trip.md 2>/dev/null || true && \
+		cp /var/www/html/user/docs/demo/trips/italy-2026-demo/map.md /var/www/html/user/pages/01.trips/italy-2026-demo/02.map/map.md 2>/dev/null || true && \
+		cp /var/www/html/user/docs/demo/trips/italy-2026-demo/stats.md /var/www/html/user/pages/01.trips/italy-2026-demo/03.stats/stats.md 2>/dev/null || true && \
+		cp /var/www/html/user/docs/demo/trips/italy-2026-demo/stories.md /var/www/html/user/pages/01.trips/italy-2026-demo/04.stories/stories.md 2>/dev/null || true && \
+		cp -r /var/www/html/user/docs/demo/trips/italy-2026-demo/04.stories/. /var/www/html/user/pages/01.trips/italy-2026-demo/04.stories/ 2>/dev/null || true && \
+		cp -r /var/www/html/user/docs/demo/trips/italy-2026-demo/dailies/. /var/www/html/user/pages/01.trips/italy-2026-demo/01.dailies/ && \
+		cp /var/www/html/user/docs/demo/trips/italy-2026-demo/*.gpx /var/www/html/user/pages/01.trips/italy-2026-demo/ 2>/dev/null || true && \
+		chown -R 1000:1000 /var/www/html/user/pages/01.trips/italy-2026-demo && \
+		cd /var/www/html && php bin/grav clearcache"
+
+demo-reset:
+	docker exec intotheeast_grav bash -c "rm -rf /var/www/html/user/pages/01.trips/italy-2026-demo && cd /var/www/html && php bin/grav clearcache"
+
+pixelfed-import:
+	docker exec intotheeast_grav bash -c "which python3 || apt-get install -y python3 --no-install-recommends -q"
+	docker cp /home/mischa/Nextcloud/Downloads/pixelfed/pixelfed-statuses.json intotheeast_grav:/tmp/pixelfed-statuses.json
+	docker cp scripts/pixelfed-import.py intotheeast_grav:/tmp/pixelfed-import.py
+	docker exec -w /var/www/html intotheeast_grav python3 /tmp/pixelfed-import.py
 
 # ── Content sync (user repo ↔ Gitea) ──────────────────────────────────────────
 
@@ -58,11 +105,15 @@ remote-install:
 # ── Remote: ongoing maintenance ────────────────────────────────────────────────
 
 remote-fetch:
-	$(SSH) "git -C $(SITE_CONFIG_DIR) pull"
+	$(SSH) "git -C $(SITE_CONFIG_DIR) checkout main && git -C $(SITE_CONFIG_DIR) pull"
+
+remote-fetch-content:
+	$(SSH) "git -C $(WEBROOT)/user checkout main && git -C $(WEBROOT)/user pull"
 
 remote-install-plugins:
 	$(SSH) "cd $(WEBROOT) && php bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y"
 
+
 remote-upgrade-grav:
 	$(SSH) "cd $(WEBROOT) && php bin/grav upgrade"
 

README.md

@@ -131,6 +131,44 @@ Plugins are not committed to git. The full list is in `plugins.txt` — one plug
 
 ---
 
+## Template behaviour
+
+Key design decisions that affect how pages render:
+
+| Context | Sort order | Reason |
+|---------|------------|--------|
+| Trip page (`trip.html.twig`) | Ascending (oldest first) | Trip reads as a narrative from start to finish |
+| Homepage active-trip feed (`home.html.twig`) | Descending (newest first) | Visitors want to see what's happening right now |
+
+**Homepage modes** — controlled by `travelling` in `user/config/site.yaml`:
+
+| `travelling` | Homepage shows |
+|---|---|
+| `true` | Active trip map + chronological feed (newest first) |
+| `false` | Map with highlight markers + curated highlights grid (max 6, 1 per trip, random) |
+
+Entries and stories opt into the highlights grid via `featured: true` in their frontmatter. The `active_trip` field stores a full page route (e.g. `/trips/italy-2026-demo`), not a bare slug.
+
+**Per-trip map settings** — configurable in Admin2 under the Trip tab:
+
+| Setting | Values | Default | Notes |
+|---|---|---|---|
+| `use_gpx` | Yes / No | Yes | Draws uploaded GPX files as route lines on the map |
+| `autoconnect` | off / on / manual / intelligent_gpx | on | Controls connector lines between location markers |
+
+Connect markers behaviour:
+
+| Value | Behaviour |
+|---|---|
+| `off` | No connector lines; `force_connect` on entries is also ignored |
+| `on` | Dashed connector between every entry in date order |
+| `manual` | No automatic lines; only entries with `force_connect: true` are linked |
+| `intelligent_gpx` | Suppresses the connector where a GPX track covers the route; `force_connect` overrides. Requires `use_gpx` enabled — falls back to `on` if GPX is off or no files are present |
+
+`use_gpx` and `autoconnect` are independent: you can show GPX tracks without connector lines or vice versa.
+
+---
+
 ## Security
 
 - `.env` is gitignored. Never commit it — it contains your server credentials and Gitea token.

docker-compose.yml

@@ -1,12 +1,24 @@
 services:
   grav:
-    image: lscr.io/linuxserver/grav:latest
+    build: .
     container_name: intotheeast_grav
     environment:
-      - PUID=1000
-      - PGID=1000
+      - GRAV_CHANNEL=beta
+      - APACHE_RUN_USER=#1000
+      - APACHE_RUN_GROUP=#1000
     ports:
       - "8081:80"
     volumes:
-      - ./user:/config/www/user
+      - ./user:/var/www/html/user
+      - ./php/php-local.ini:/usr/local/etc/php/conf.d/php-local.ini
     restart: unless-stopped
+
+  travel-memories:
+    build: ./services/travel-memories
+    ports:
+      - "8082:8082"
+    volumes:
+      - ./docs/immich-workflow:/app/state
+      - ./user/pages:/app/pages
+    env_file: .env
+    user: "${UID}:${GID}"

docs/README.md

@@ -0,0 +1,30 @@
+# docs/
+
+## If you're Mischa
+
+**Doing something operational?** → [`guides/`](guides/)
+- [Posting a journal entry](guides/posting.md)
+- [Managing GPX files](guides/gpx-manager.md)
+- [Switching to a new trip](guides/trip-switching.md)
+- [Rebuilding local dev from scratch](guides/local-setup.md)
+
+**Checking project status?** → [`working/`](working/)
+- [Backlog](working/backlog.md)
+- [Production todo](working/production-todo.md)
+- [QA results](working/qa/results.md)
+
+**Design or architecture decisions?** → [`reference/`](reference/)
+- [Design system](reference/design-system.md)
+- [Architecture overview](reference/architecture.md)
+
+---
+
+## If you're Claude
+
+**Always-loaded project rules** → [`CLAUDE.md`](../CLAUDE.md) (repo root)
+
+**Active specs and plans** → [`working/specs/`](working/specs/) and [`working/plans/`](working/plans/)
+
+**Stable facts** → [`reference/`](reference/)
+
+**Raw research input** → [`research/`](research/)

docs/enrichment/central-asia-2023.md

@@ -0,0 +1,45 @@
+# central-asia-2023 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2023-08-28-pixelfed-1.entry | 2023-08-28 | Welcome to My Central Asian Picture Diary | Berlin | Germany | https://www.openstreetmap.org/#map=15/52.5200/13.4050 | 24 | sunny |
+| 2023-08-29-pixelfed-2.entry | 2023-08-29 | Last Beer Before the Foreign Land | Berlin | Germany | https://www.openstreetmap.org/#map=16/52.36402/13.50745 | 24 | sunny |
+| 2023-08-30-pixelfed-3.entry | 2023-08-30 | The UAZ Buchanka Counter Begins | Astana | Kazakhstan | https://www.openstreetmap.org/#map=17/51.140108/71.429747 | 15 | rainy |
+| 2023-08-31-pixelfed-4.entry | 2023-08-31 | Baiterek: Bird of Happiness in Astana | Astana | Kazakhstan | https://www.openstreetmap.org/#map=17/51.128246/71.430466 | 15 | cloudy |
+| 2023-09-02-pixelfed-5.entry | 2023-09-02 | Doshirak and Politics on the Night Train | Almaty | Kazakhstan | https://www.openstreetmap.org/#map=15/43.2220/76.8512 | 25 | sunny |
+| 2023-09-03-pixelfed-6.entry | 2023-09-03 | Plov and Street Art in Almaty | Almaty | Kazakhstan | https://www.openstreetmap.org/#map=15/43.2220/76.8512 | 24 | sunny |
+| 2023-09-04-pixelfed-7.entry | 2023-09-04 | Rain in Charyn Canyon, Manti for Dinner | Charyn Canyon | Kazakhstan | https://www.openstreetmap.org/#map=16/43.35102/79.08010 | 18 | cloudy with showers |
+| 2023-09-05-pixelfed-8.entry | 2023-09-05 | Kurt, Kumis and a UAZ Dream Ride | Kaindy / Kolsai | Kazakhstan | https://www.openstreetmap.org/#map=17/43.068370/78.412857 | 20 | sunny |
+| 2023-09-07-pixelfed-9.entry | 2023-09-07 | First Hike Up Toward Ala Kol | Karakol | Kyrgyzstan | https://www.openstreetmap.org/#map=15/42.4900/78.3936 | 0 | partly cloudy |
+| 2023-09-10-pixelfed-10.entry | 2023-09-10 | Tea Trails and No Seatbelts in Kyrgyzstan | Bishkek | Kyrgyzstan | https://www.openstreetmap.org/#map=18/42.876640/74.603745 | 16 | partly cloudy |
+| 2023-09-18-pixelfed-11.entry | 2023-09-18 | Stuck in No Man's Land at 4655m | Akbaital Pass | Tajikistan | https://www.openstreetmap.org/#map=18/39.384414/73.322529 | 16 | partly cloudy |
+| 2023-09-19-pixelfed-12.entry | 2023-09-19 | Black Water Lake on the Pamir Highway | Karakul | Tajikistan | https://www.openstreetmap.org/#map=16/39.01250/73.55978 | 15 | windy |
+| 2023-09-19-pixelfed-13.entry | 2023-09-19 | Warm Soup in a Village of Hundreds | Alichur | Tajikistan | https://www.openstreetmap.org/#map=18/37.755579/73.271513 | 15 | windy |
+| 2023-09-20-pixelfed-14.entry | 2023-09-20 | Farewell Vodka Under the World's Tallest Flag | Dushanbe | Tajikistan | https://www.openstreetmap.org/#map=15/38.5598/68.7870 | 28 | sunny |
+| 2023-10-02-pixelfed-15.entry | 2023-10-02 | Millionaires and Minarets in Bukhara | Bukhara | Uzbekistan | https://www.openstreetmap.org/#map=17/39.775957/64.416693 | 25 | sunny |
+| 2023-09-23-pixelfed-16.entry | 2023-09-23 | The Night the Beer Finally Arrived | Alichur | Tajikistan | https://www.openstreetmap.org/#map=19/37.755660/73.271591 | 15 | windy |
+| 2023-09-23-pixelfed-17.entry | 2023-09-23 | Afghanistan Just Across the Wakhan River | Zong | Tajikistan | https://www.openstreetmap.org/#map=19/37.032071/72.630602 | 28 | sunny |
+| 2023-10-01-pixelfed-18.entry | 2023-10-01 | Hot Springs and a Pamiri Homestay | Ishkashim / Bibi Fatima | Tajikistan | https://www.openstreetmap.org/#map=19/36.983527/72.264250 | 18 | sunny |
+| 2023-10-01-pixelfed-19.entry | 2023-10-01 | What Is Normal? Reflections from Khorog | Khorog | Tajikistan | https://www.openstreetmap.org/#map=16/37.49046/71.53921 | 25 | sunny |
+| 2023-10-03-pixelfed-20.entry | 2023-10-03 | Timur's Samarkand and a Badly Parked Truck | Samarkand | Uzbekistan | https://www.openstreetmap.org/#map=16/39.65841/66.98542 | 25 | sunny |
+| 2023-10-03-pixelfed-21.entry | 2023-10-03 | Four Weeks in Central Asia, Barely Enough | Baku | Azerbaijan |https://www.openstreetmap.org/#map=16/40.37660/49.84752 | 24 | sunny |
+| 2023-10-18-pixelfed-22.entry | 2023-10-18 | Hunting the Mother of Georgia from Above | Tbilisi | Georgia | https://www.openstreetmap.org/#map=15/41.6938/44.8015 | 20 | partly cloudy |
+
+---
+
+**Notes for reviewer:**
+
+- **Entry 3 (Aug 30, UAZ Buchanka):** City inferred as Astana — the trip narrative shows flight to Kazakhstan on Aug 29, and entry 4 is explicitly Astana on Aug 31. Frontmatter has blank city/country; confirm this is correct.
+- **Entry 7 (Sep 4, Charyn Canyon):** Day tour from Almaty. Charyn Canyon coordinates not in reference table — Map Link left as `?`. Correct city if this was based in Almaty rather than the canyon itself.
+- **Entry 8 (Sep 5, Kaindy/Kolsai lakes):** Day tour from Almaty area. Coordinates not in reference table — Map Link left as `?`.
+- **Entry 10 (Sep 10, Tea Trails):** Body mentions Karakol → Bishkek → Osh (OSU airport code). Entry ends in Osh; Osh not in reference table — Map Link left as `?`. Weather estimated using Karakol September values as nearest reference.
+- **Entry 11 (Sep 18, No Man's Land):** Crossing from Osh (KG) to Karakul (TJ) via Akbaital Pass (4655m). Location ambiguous — border crossing, no single city. Map Link left as `?`. Dates in content say "10-09" (September 10), but file date is 2023-09-18 (post was written later as a recap).
+- **Entry 12 (Sep 19, Black Water Lake):** Karakul, Tajikistan (on Pamir Highway). Not in reference table. Weather estimated using Dushanbe September values.
+- **Entry 13 (Sep 19, Warm Soup):** Alichur village, Tajikistan. Content date says "11-09". Not in reference table. Weather estimated using Dushanbe September values.
+- **Entry 15 (Sep 23, Bukhara):** Bukhara mentioned explicitly in body. Not in reference table — Map Link left as `?`. Weather estimated using Samarkand September values (nearest Uzbek city in table).
+- **Entry 16 (Sep 23, Beer Finally Arrived):** Alichur, Tajikistan. Content date says "PMU13-9". Chronology note: this entry was posted on Sep 23 but describes events from Sep 13. Weather estimated using Dushanbe September values.
+- **Entry 17 (Sep 23, Afghanistan):** Zong village, Wakhan valley, Tajikistan. Content date says "PMU14-9". Not in reference table. Weather estimated using Dushanbe September values.
+- **Entry 18 (Oct 1, Hot Springs):** Bibi Fatima hot springs in Ishkashim area, Wakhan corridor, Tajikistan. Content date says "PMU15-9". Not in reference table. Weather estimated using Dushanbe October values.
+- **Entry 19 (Oct 1, Khorog):** Khorog, Tajikistan explicitly mentioned. Not in reference table. Weather estimated using Dushanbe October values.

docs/enrichment/italy-2025.md

@@ -0,0 +1,15 @@
+# italy-2025 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2025-10-11-pixelfed-1.entry | 2025-10-11 | 600km of Tuscany Begins with an Aperitif | Venturina Terme | Italy | https://www.openstreetmap.org/#map=15/43.0183/10.6059 | 18 | partly cloudy |
+| 2025-10-16-pixelfed-2.entry | 2025-10-16 | Twelve Hundred Meters of Hills in Tuscany | Pienza | Italy | https://www.openstreetmap.org/#map=15/43.0765/11.6786 | 18 | partly cloudy |
+
+---
+
+**Notes for reviewer:**
+
+- **Entry 1 (Oct 11, 600km of Tuscany):** Venturina Terme is confirmed as the start location from the Day 1 GPX filename. The frontmatter has empty city/country fields. Coordinates placed at Venturina Terme town center (43.0183, 10.6059).
+- **Entry 2 (Oct 16, Twelve Hundred Meters):** This entry was posted on Oct 16 but describes Day 3 of the tour (actual event date 2025-10-13, based on the Day 3 GPX file). The entry title and body mention "about 1200 height meters" and hilly terrain. Based on the route (Venturina Terme → Orbetello → Sorano → Pienza → Siena → Florence → Volterra), Day 3 arrives in the Pienza/Montalcino area (Val d'Orcia region). The Day 3 GPX endpoint coordinates (42.682770, 11.714815) confirm this region. City set to Pienza as a representative location for this day. Weather estimated using October Tuscany values (18°C, partly cloudy — typical autumn conditions).

docs/enrichment/slovenia-2024.md

@@ -0,0 +1,15 @@
+# slovenia-2024 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2024-05-28-pixelfed-1.entry | 2024-05-28 | Ice Cream and Old Walls in Piran | Piran | Slovenia | https://www.openstreetmap.org/#map=15/45.5285/13.5680 | 21 | sunny |
+
+---
+
+**Notes:**
+
+- This entry was originally routed into `us-canada-mex-2024` because Pixelfed import bucketed all 2024 posts together. It belongs to a separate Slovenia 2024 trip.
+- The entry currently lives at `user/pages/01.trips/us-canada-mex-2024/01.dailies/2024-05-28-pixelfed-1.entry/` — it will need to be moved to a new `slovenia-2024` trip page tree when that trip is set up on the site.
+- Content will be added later. Enrichment can be applied once the trip page exists.

docs/enrichment/us-canada-mex-2024.md

@@ -0,0 +1,33 @@
+# us-canada-mex-2024 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2024-07-21-pixelfed-2.entry | 2024-07-21 | A Warm Welcome and Peanut Butter Pretzels | San Francisco | USA | https://www.openstreetmap.org/#map=16/37.76384/-122.47812 | 18 | partly cloudy |
+| 2024-07-21-pixelfed-3.entry | 2024-07-21 | Windmills, Craft Beer and Twin Peaks at Dusk | San Francisco | USA | https://www.openstreetmap.org/#map=17/37.765049/-122.508320 | 18 | partly cloudy |
+| 2024-07-22-pixelfed-4.entry | 2024-07-22 | Breakfast Burrito and an Illegal Beach Beer | Santa Cruz | USA | https://www.openstreetmap.org/#map=16/36.96356/-122.01813 | 18 | partly cloudy |
+| 2024-07-25-pixelfed-5.entry | 2024-07-25 | Cruising Highway 1 into the California Sunset | Big Sur | USA | https://www.openstreetmap.org/#map=13/37.23744/-122.41499 | 18 | partly cloudy |
+| 2024-07-29-pixelfed-6.entry | 2024-07-29 | The Near-Perfect Burrito and Fog on the Gate | San Francisco | USA | https://www.openstreetmap.org/#map=17/37.806046/-122.451843 | 18 | partly cloudy |
+| 2024-07-29-pixelfed-7.entry | 2024-07-29 | Eighteen Hours on Amtrak Through Epic Nature | Sacramento Valley | USA | https://www.openstreetmap.org/#map=13/40.75701/-122.31903 | 23 | sunny |
+| 2024-07-29-pixelfed-8.entry | 2024-07-29 | Portland: Seventy Breweries and the Hippest Streets | Portland | USA | https://www.openstreetmap.org/#map=15/45.52508/-122.67759 | 27 | sunny |
+| 2024-08-05-pixelfed-9.entry | 2024-08-05 | Wedding Days in Diverse and Vibrant Toronto | Toronto | Canada | https://www.openstreetmap.org/#map=18/43.683760/-79.322147 | 27 | sunny |
+| 2024-08-05-pixelfed-10.entry | 2024-08-05 | Red Ponchos and Mist at Niagara Falls | Niagara Falls | Canada | https://www.openstreetmap.org/#map=16/43.08677/-79.07249 | 26 | sunny |
+| 2024-08-05-pixelfed-11.entry | 2024-08-05 | Poutine and French Echoes in Old Montreal | Montreal | Canada | https://www.openstreetmap.org/#map=15/45.5017/-73.5673 | 26 | sunny |
+| 2024-08-07-pixelfed-12.entry | 2024-08-07 | Cocoa Beans and Aztec Gold in Mexico City | Mexico City | Mexico | https://www.openstreetmap.org/#map=15/19.4326/-99.1332 | 22 | partly cloudy |
+
+---
+
+**Notes for reviewer:**
+
+- **Entry 1 (Piran / Slovenia):** Moved to `docs/enrichment/slovenia-2024.md` — this is a separate trip. Entry will be relocated on the site when the `slovenia-2024` trip page is created.
+- **Entry 1 (Jul 21, Warm Welcome):** Body text reads "SF here we come!" and describes arrival by plane; city inferred as San Francisco. Content internal date "18.7" (July 18) but file date is 2024-07-21.
+- **Entry 3 (Jul 21, Windmills/Twin Peaks):** "SF Sunset district", "Golden Gate park windmills", "David Lynch's Twin Peaks" — all confirmed San Francisco. Internal date "19.7".
+- **Entry 4 (Jul 22, Breakfast Burrito):** Starts with a burrito in SF, then drives Highway 1 south to Santa Cruz. Base city assigned as San Francisco per reference table; if you prefer Santa Cruz as the destination, update to City=Santa Cruz, Lat=36.9741, Lng=-122.0308.
+- **Entry 5 (Jul 25, Highway 1):** Very short body — only mentions Highway 1 and California sunset. Assigned to San Francisco as the SF-area base per reference table. If this was shot further south (e.g. Big Sur), update accordingly.
+- **Entry 6 (Jul 29, Near-Perfect Burrito):** Body explicitly mentions "downtown SF" and "Golden Gate bridge" and "San Franciscan skies". Internal date "21.7". Confirmed San Francisco.
+- **Entry 7 (Jul 29, Amtrak 18 Hours):** Train journey from SF to Portland; assigned Portland (destination) per task brief. Internal date "22/23.7".
+- **Entry 8 (Jul 29, Portland Breweries):** Portland explicitly named throughout body. Internal date "24.7". Confirmed Portland.
+- **Entries 9–11 (Aug 5, three entries):** All three share the same file date (2024-08-05) but describe different cities visited at different points of the trip. Chronological order inferred from pixelfed sequence numbers and internal dates: pixelfed-9 = Toronto (25/29.7), pixelfed-10 = Niagara Falls (28.7), pixelfed-11 = Montreal (30.7). The Aug 5 file date appears to be when the posts were batch-uploaded rather than the visit dates.
+- **Entry 10 (Aug 5, Niagara Falls):** Body says "Even though the falls are in the US the best views are from the Canadian side" — assigned Canadian side (Niagara Falls, Canada).
+- **Entry 12 (Aug 7, Mexico City):** Body mentions "Museo de Chocolate" and Nahuatl/Aztec references. Internal date "1.8". Confirmed Mexico City.

docs/guides/gpx-manager.md

@@ -0,0 +1,85 @@
+# Managing GPX Files
+
+GPX route files live as media on the active trip page. The map picks them up automatically — any `.gpx` file in `user/pages/01.trips/<active_trip>/` appears on the trip map.
+
+---
+
+## Browser UI — /gpx-manager
+
+The GPX manager at `/gpx-manager` requires admin login (redirects to login form if not authenticated).
+
+### Upload a file
+
+1. Open `/gpx-manager` (login required)
+2. Click **Choose file** → select your `.gpx` file
+3. Click **Upload**
+4. The filename is auto-slugified before upload: spaces and special characters become hyphens, everything becomes lowercase.
+   - Example: `Day 1 — Arrival (Kyoto).gpx` → `day-1-arrival-kyoto.gpx`
+5. The file appears in the list immediately
+
+### Delete a file
+
+1. Find the file in the list at `/gpx-manager`
+2. Click **Delete** next to it
+3. Confirm — the file is removed from the trip media and will no longer appear on the map
+
+---
+
+## Without the browser UI
+
+Drop the file directly into the trip folder and push:
+
+```bash
+cp your-route.gpx /path/to/user/pages/01.trips/japan-korea-2026/
+make content-push
+```
+
+`make content-push` commits and pushes the `user/` repo to Gitea, which triggers a production pull via webhook.
+
+**Filename tip:** slug your filename before dropping it — lowercase, hyphens only:
+```
+day-1-kyoto.gpx         ✅
+Day 1 Kyoto.gpx         ⚠️  works but slugified on upload; skip this if dropping manually
+```
+
+---
+
+## Filename slugification rules
+
+The browser UI slugifies client-side before upload. Manually placed files are used as-is, so name them cleanly.
+
+Rules applied by the UI:
+- Lowercase everything
+- Replace spaces with hyphens
+- Replace non-alphanumeric characters (except `.`) with hyphens
+- Collapse multiple consecutive hyphens to one
+- Strip leading/trailing hyphens
+
+---
+
+## Komoot workflow (no API integration yet)
+
+Komoot doesn't offer GPX export via API without authentication. Current workaround:
+
+1. Open your tour in the Komoot app or website
+2. **More → Export → GPX track** (available on Komoot Premium; free users get a limited version)
+3. Save the `.gpx` file to your phone or laptop
+4. Upload via `/gpx-manager` or drop into the trip folder
+
+Future: a Komoot integration field in the GPX manager (paste tour URL → server fetches GPX) is in the backlog at [`working/backlog.md`](../working/backlog.md).
+
+---
+
+## How files are served
+
+GPX files are registered as a valid media type in `user/config/media.yaml`, so Grav stores and serves them alongside images. The map template picks them up via:
+
+```twig
+{% for file in trip_page.media.all %}
+  {% if file.filename ends with '.gpx' %}
+    {# add to map source list #}
+  {% endif %}
+{% endfor %}
+```
+
+No manual linking is needed — upload and it appears.

docs/guides/local-setup.md

@@ -0,0 +1,113 @@
+# Local Development Setup
+
+This guide covers setting up the dev environment from scratch after cloning the repo.
+
+---
+
+## First-time setup
+
+`user/plugins/` and `user/data/` are excluded from git but Grav requires them to exist. Create them once:
+
+```bash
+mkdir -p user/plugins user/data
+```
+
+Then run:
+
+```bash
+make setup
+```
+
+`make setup` = `build → start → install-plugins → fix-perms`. This builds the Docker image (Grav 2.0 baked in), starts the container, installs all plugins from `plugins.txt`, and fixes file ownership.
+
+The dev server runs at **http://localhost:8081**.
+
+---
+
+## After any docker compose down
+
+Always run `make setup` — not just `make start` — to ensure permissions are correct.
+
+`docker compose restart` (soft restart) preserves the image and is fine for quick restarts. Only `make setup` is needed after `docker compose down`.
+
+---
+
+## Fix 500 errors after plugin install
+
+If the site returns a 500 error after plugin installation or after recreating the container:
+
+```bash
+make fix-perms
+```
+
+This creates uid 1000 in the container, chowns `/var/www/html` to 1000:1000, and reloads Apache.
+
+---
+
+## Upgrading to a newer Grav RC
+
+Grav 2.0 is baked into the custom Docker image via `Dockerfile`. The base `getgrav/grav` image ships 1.7 — the `Dockerfile` downloads the 2.0 RC bundle from GitHub and overwrites the core files at build time.
+
+To upgrade:
+1. Update the bundle URL in `Dockerfile`
+2. Run `make setup` — Docker rebuilds the image layer automatically
+
+---
+
+## Required system.yaml settings (Grav 2.0)
+
+After upgrading, verify these are set in `user/config/system.yaml`:
+
+```yaml
+accounts:
+  type: flex      # required for Admin2 API
+pages:
+  type: flex      # required for Admin2 pages API
+```
+
+---
+
+## Admin user API permissions
+
+The admin user account needs `api.*` permissions for Admin2. In `user/accounts/<username>.yaml`:
+
+```yaml
+access:
+  admin:
+    login: true
+    super: true
+  api:
+    super: true
+    access: true
+```
+
+---
+
+## Disable the old admin plugin
+
+Both `admin` and `admin2` route to `/admin` and conflict. After installing `admin2`, disable the old one:
+
+In `user/plugins/admin/admin.yaml`:
+```yaml
+enabled: false
+```
+
+---
+
+## JWT secret
+
+Leave `jwt_secret: ''` in `user/plugins/api/api.yaml`. It works for local dev; production installs generate a secure secret automatically during `make remote-install`.
+
+---
+
+## Language URL prefix
+
+If Grav redirects to `/en/...` URLs, ensure `user/config/system.yaml` contains:
+
+```yaml
+languages:
+  supported: [en]
+  include_default_lang: false
+```
+
+Without `include_default_lang: false`, Grav adds a language prefix to all URLs even for single-language sites.

docs/guides/posting.md

@@ -0,0 +1,115 @@
+# Posting a Journal Entry
+
+Two ways to post: the **mobile form** at `/post` (quick, phone-friendly) or the **Admin panel** at `/admin` (drafts, scheduling, editing).
+
+---
+
+## Quick start — mobile form
+
+1. Open `/post` on your phone (login required)
+2. Fill in **Title** and **Content** (required)
+3. Tap **Get Location** → fills Lat/Lng automatically
+4. Tap **Get Weather** → fills weather fields using your coordinates
+5. Type **City** and **Country** (optional but nice)
+6. Attach photos (optional) — first photo becomes the hero image
+7. Tap **Submit** → entry appears in the feed immediately
+
+---
+
+## Form fields reference
+
+| Field | Required | Notes |
+|---|---|---|
+| Title | ✅ | Entry headline |
+| Content | ✅ | Markdown body |
+| Date | ✅ | Defaults to now — adjust if posting later |
+| Lat / Lng | — | Filled by Get Location; used for map marker |
+| City | — | Shown as `📍 Kyoto, Japan` on feed cards |
+| Country | — | Combined with City in location badge |
+| Weather | — | Filled by Get Weather (Open-Meteo, free, no key) |
+| Photos | — | All uploaded files appear in the gallery; first = hero |
+
+**Weather descriptions** (must be one of these if entered manually):
+`Sunny` · `Partly cloudy` · `Cloudy` · `Foggy` · `Drizzle` · `Rain` · `Snow` · `Thunderstorm`
+
+---
+
+## How it works (for debugging)
+
+```
+Browser → /post (post-form.md)
+         └─ Grav Form plugin validates fields
+         └─ add-page-by-form plugin
+              ├─ reads pageconfig.parent (/trips/<active_trip>/dailies)
+              ├─ writes user/pages/01.trips/<active_trip>/01.dailies/<slug>/entry.md
+              └─ moves uploaded photos into the page folder
+         └─ cache-on-save plugin
+              └─ calls $grav['cache']->deleteAll() → entry visible immediately
+         └─ form shows success message
+```
+
+**Slug format:** `<YYYY-MM-DD-HHmm>-<slugified-title>.entry`
+Example: `2026-07-20-0930-first-day-in-kyoto.entry`
+
+**Entry folder structure:**
+```
+user/pages/01.trips/japan-korea-2026/01.dailies/
+└─ 2026-07-20-0930-first-day-in-kyoto.entry/
+   ├─ entry.md       ← frontmatter + markdown body
+   ├─ temple.jpg     ← hero image (or set hero_image in frontmatter)
+   └─ market.jpg     ← additional gallery image
+```
+
+---
+
+## Admin panel — drafts and scheduling
+
+Use the Admin panel at `/admin` for drafts, scheduled posts, or editing existing entries.
+
+1. Log in at `/admin`
+2. **Pages → Add Page**
+3. Set **Parent Page** to `/trips/<active_trip>/dailies` and **Template** to `entry`
+4. Fill in the **Entry** tab (city, country, lat/lng, weather)
+5. Write content in the **Content** tab
+6. Upload photos in the **Media** tab
+7. **Drafts:** set `published: false` — won't appear until you flip it to `true`
+8. **Scheduling:** set `publish_date` in **Options → Scheduling**
+9. Save
+
+The Admin form fields are defined by `user/themes/intotheeast/blueprints/entry.yaml`.
+
+---
+
+## Frontmatter reference
+
+Every entry supports these frontmatter fields:
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | string | Required |
+| `date` | datetime | Format: `Y-m-d H:i` (e.g. `2026-06-17 10:00`) |
+| `template` | string | Always `entry` |
+| `published` | bool | `true` to show in feed |
+| `lat` | string | Decimal degrees (e.g. `52.3676`) |
+| `lng` | string | Decimal degrees (e.g. `4.9041`) |
+| `location_city` | string | e.g. `Kyoto` |
+| `location_country` | string | e.g. `Japan` |
+| `weather_desc` | string | One of the allowed values above |
+| `weather_temp_c` | number | Celsius, displayed rounded |
+| `hero_image` | string | Filename to pin as hero (e.g. `temple.jpg`); auto-selects first image if blank |
+
+---
+
+## Troubleshooting
+
+**Entry doesn't appear in feed after submit**
+→ Check that `active_trip` in `user/config/site.yaml` matches the parent in `user/pages/02.post/post-form.md` (`pageconfig.parent`). If they're out of sync, entries go to the wrong folder. See [trip switching guide](trip-switching.md).
+
+**Get Weather button shows an error**
+→ Fill in Lat/Lng first (tap Get Location or enter manually). Open-Meteo requires coordinates.
+
+**Photos not showing in gallery**
+→ Verify files were uploaded (check the entry folder in Admin → Media). Only jpg, jpeg, png, webp, gif are rendered.
+
+**500 error after posting**
+→ Run `make fix-perms` to restore container file ownership.

docs/guides/trip-switching.md

@@ -0,0 +1,89 @@
+# Switching to a New Trip
+
+When you start a new trip, **two files must be updated together** — if only one is changed, new entries will be posted to the wrong folder silently (no error, wrong trip).
+
+---
+
+## Checklist
+
+- [ ] Update `user/config/site.yaml` → `active_trip`
+- [ ] Update `user/pages/02.post/post-form.md` → `pageconfig.parent`
+- [ ] Create the new trip page tree (see below)
+- [ ] Run `make content-push` to push the changes to production
+
+---
+
+## Step 1 — Update site.yaml
+
+In `user/config/site.yaml`, set `active_trip` to the new trip slug:
+
+```yaml
+active_trip: japan-korea-2026   # ← change this
+```
+
+The slug must exactly match the folder name under `user/pages/01.trips/`.
+
+---
+
+## Step 2 — Update post-form.md
+
+In `user/pages/02.post/post-form.md`, set `pageconfig.parent` to the new dailies path:
+
+```yaml
+pageconfig:
+  parent: /trips/japan-korea-2026/dailies   # ← change this
+```
+
+**Why both?** Grav's config and page frontmatter are static YAML — no variable substitution is possible, so `post-form.md` can't read from `site.yaml` automatically. They must match manually.
+
+**What breaks if they're out of sync:** `active_trip` controls which trip page is featured on the home page and trip page. `pageconfig.parent` controls where new entries land. If they differ, new posts go to the old trip's dailies folder while the home page shows the new trip — entries appear to vanish.
+
+---
+
+## Step 3 — Create the new trip page tree
+
+Create the standard four subfolders under `user/pages/01.trips/<new-slug>/`:
+
+```
+user/pages/01.trips/japan-korea-2026/
+├─ trip.md                  ← title, date_start, date_end, cover_image, album_url
+├─ 01.dailies/
+│  └─ dailies.md            ← template: dailies (list page)
+├─ 02.map/
+│  └─ map.md                ← template: map
+├─ 03.stats/
+│  └─ stats.md              ← template: stats
+└─ 04.stories/
+   └─ stories.md            ← template: stories
+```
+
+Copy these files from an existing trip and update the frontmatter (especially `title` and `date_start` in `trip.md`).
+
+Fields in `trip.md` to update:
+
+| Field | Example | Notes |
+|---|---|---|
+| `title` | `Japan & Korea 2026` | Displayed in nav and trip header |
+| `date_start` | `2026-07-15` | Used for "X days on the road" stat |
+| `date_end` | *(leave blank while travelling)* | Set when you return |
+| `cover_image` | `cover.jpg` | Shown on the trips listing page |
+| `album_url` | `https://...` | Optional external album link |
+
+---
+
+## Step 4 — Push
+
+```bash
+make content-push
+```
+
+This commits and pushes the `user/` repo to Gitea. The webhook triggers a production pull automatically.
+
+---
+
+## Verify
+
+After pushing, check:
+1. Home page shows the new trip (title and date)
+2. Submit a test entry via `/post` — verify it lands under `user/pages/01.trips/<new-slug>/01.dailies/`
+3. Map at `/trips/<new-slug>/map` shows the correct (empty or GPX-only) state

docs/reference/architecture.md

@@ -0,0 +1,147 @@
+# Architecture Overview
+
+How the intotheeast site hangs together.
+
+---
+
+## Stack
+
+| Layer | Technology | Notes |
+|---|---|---|
+| CMS | Grav 2.0.0-rc.10 | Flat-file PHP CMS; no database |
+| Admin | Admin2 v2.0.0-rc.15 | Plugin slug: `admin2` (not `admin`) |
+| Container | Docker (`getgrav/grav` base + custom `Dockerfile`) | Grav 2.0 baked in at build time |
+| PHP session | `session.save_path = /tmp` | Set in `php/php-local.ini` |
+| Dev URL | http://localhost:8081 | Mapped from container port 80 |
+| Maps | MapLibre GL JS | Replaced Leaflet; all 3 map templates use it |
+| GPX rendering | maplibre-gl-leaflet-gpx (CDN) | Renders GPX files as route layers |
+
+---
+
+## Plugin roles
+
+The posting pipeline is a chain of three plugins:
+
+```
+Browser POST /post
+│
+├─ Grav Form plugin (built-in)
+│  └─ validates required fields; handles file uploads
+│
+├─ add-page-by-form (third-party, patched)
+│  └─ reads post-form.md config:
+│     ├─ pageconfig.parent → target folder (e.g. /trips/japan-korea-2026/dailies)
+│     ├─ pageconfig.slug_field → slug from date + title
+│     └─ pagefrontmatter → template: entry, published: true
+│  └─ writes entry.md to user/pages/01.trips/<trip>/01.dailies/<slug>.entry/
+│  └─ moves uploaded photos into the page folder
+│
+└─ cache-on-save (custom, user/plugins/cache-on-save/)
+   └─ calls $grav['cache']->deleteAll() on every new-entry form submission
+   └─ ensures entries appear in feed immediately in both dev and prod mode
+```
+
+Other notable plugins:
+
+| Plugin | Role |
+|---|---|
+| `login` | Auth for /post and /gpx-manager |
+| `api` (Grav API v1) | Used by /gpx-manager to list/upload/delete GPX files |
+| `admin2` | Admin panel at /admin |
+
+---
+
+## Template hierarchy
+
+All page templates extend `base.html.twig`:
+
+```
+templates/
+├─ base.html.twig          ← site shell: nav, fonts, CSS tokens
+├─ default.html.twig       ← extends base; generic page
+├─ home.html.twig          ← extends base; context-aware two-column layout
+├─ trip.html.twig          ← extends base; trip page with filter bar (All/Journal/Stories)
+├─ entry.html.twig         ← extends base; single journal entry (gallery, badges, map)
+├─ dailies.html.twig       ← extends base; journal feed list
+├─ map.html.twig           ← extends base; full-height MapLibre trip map
+├─ stats.html.twig         ← extends base; trip stats (days, distance, elevation)
+├─ stories.html.twig       ← extends base; stories grid
+├─ story.html.twig         ← extends base; single story (Ken Burns hero, shortcodes)
+└─ gpx-manager.html.twig   ← extends base; admin UI for GPX file management
+```
+
+Partials live in `templates/partials/`. Currently one partial: `base.html.twig` (the site shell extended by all page templates).
+
+---
+
+## Trip entity structure
+
+The site is organized around Trip entities. The active trip is set in `user/config/site.yaml` → `active_trip`.
+
+```
+user/pages/01.trips/
+└─ japan-korea-2026/
+   ├─ trip.md              ← template: trip; title, date_start, cover_image, album_url
+   ├─ *.gpx               ← GPX route files (served as page media; auto-detected by map.html.twig)
+   ├─ 01.dailies/         ← journal entries (template: dailies list + entry children)
+   ├─ 02.map/map.md       ← template: map
+   ├─ 03.stats/stats.md   ← template: stats
+   └─ 04.stories/         ← story pages (template: stories list + story children)
+```
+
+---
+
+## GPX data flow
+
+```
+GPX file uploaded to trip page media
+         │
+         ▼
+user/pages/01.trips/<slug>/*.gpx
+         │
+         ▼
+map.html.twig: trip_page.media.all → filter .gpx files → pass as JS array
+         │
+         ▼
+MapLibre source: each GPX file added as a GeoJSON source via maplibre-gl-leaflet-gpx
+         │
+         ▼
+Connector suppression: same-file 10km proximity check prevents spurious inter-track segments
+         │  (override with force_connect: true in trip frontmatter)
+         ▼
+Rendered as route polyline on map
+```
+
+---
+
+## Data flow for a post submission
+
+```
+1. User fills /post form and taps Submit
+2. Grav Form plugin validates: title and content required
+3. add-page-by-form reads post-form.md:
+     pageconfig.parent:  /trips/japan-korea-2026/dailies
+     pageconfig.slug:    {date}-{title|slugify}
+     pagefrontmatter:    template: entry, published: true
+4. New page written to:
+     user/pages/01.trips/japan-korea-2026/01.dailies/
+     └─ 2026-07-20-0930-first-day-in-kyoto.entry/
+        └─ entry.md
+5. Photos moved into the same folder
+6. cache-on-save calls $grav['cache']->deleteAll()
+7. Browser: form shows success message
+8. Feed at /trips/japan-korea-2026 immediately shows new entry
+```
+
+---
+
+## Key config files
+
+| File | Purpose |
+|---|---|
+| `user/config/site.yaml` | `active_trip` slug; site title/description |
+| `user/config/system.yaml` | Twig cache, flex accounts/pages, language prefix |
+| `user/config/media.yaml` | Registers `.gpx` as a valid media type |
+| `user/plugins/api/api.yaml` | `session_enabled: true` for GPX manager auth |
+| `user/themes/intotheeast/css/tokens.css` | Design tokens (colors, fonts, spacing) |
+| `CLAUDE.md` | Project rules and always-loaded context for Claude |

docs/reference/design-system-light.md

@@ -0,0 +1,32 @@
+# Design System — Light Mode Color Palette
+
+Light-mode counterpart to `design-system.md`. Only color tokens differ between themes — typography, spacing, radius, shadows, and layout are identical.
+
+---
+
+## Color palette
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--color-paper` | `#F7F5F2` | `#1A1814` | Page background |
+| `--color-canvas` | `#FFFFFF` | `#22201B` | Card surfaces, form backgrounds |
+| `--color-ink` | `#17171A` | `#EDE8DF` | Primary text |
+| `--color-ink-2` | `#4A4850` | `#B8B0A4` | Body text — muted |
+| `--color-ink-muted` | `#9896A0` | `#90887E` | Labels, timestamps, captions |
+| `--color-border` | `#E8E6E3` | `#2E2B25` | Standard dividers |
+| `--color-border-soft` | `#F0EDEA` | `#252219` | Subtle dividers |
+| `--color-accent` | `#1F6B5A` | `#2E9880` | Teal — brand color, links, CTAs |
+| `--color-accent-hover` | `#185647` | `#287A68` | Hover/pressed teal |
+| `--color-accent-light` | `#EBF5F2` | `#1A2E29` | Pale teal tint backgrounds |
+| `--color-accent-on` | `#FFFFFF` | `#FFFFFF` | Text on accent surfaces |
+| `--color-surface-raised` | `#F0EDE9` | `#2A2720` | Elevated surfaces: tooltips, hover |
+| `--color-ink-inverse` | `#FFFFFF` | `#17171A` | Text on accent-coloured buttons |
+
+### Notes on accent values
+
+The dark accent is `#2E9880` — a lightened version of the original `#1F6B5A` to maintain contrast against near-black backgrounds.
+
+### Notes on the two added tokens
+
+- **`--color-surface-raised`** (`#F0EDE9`): warm off-white, slightly darker than `--color-canvas` (`#FFFFFF`) to suggest elevation — mirrors the dark mode pattern of `#2A2720` sitting just above `#22201B`.
+- **`--color-ink-inverse`** (`#FFFFFF`): white text on the dark teal accent (`#1F6B5A`). Inverse of dark mode where the lightened accent (`#2E9880`) is bright enough to carry dark text (`#17171A`).

docs/reference/design-system.md

@@ -0,0 +1,365 @@
+# Into the East — Design Spec
+
+**Date:** 2026-06-18  
+**Status:** Implemented — dark theme (see `design-system-light.md` for the original light-mode palette)
+
+---
+
+## 1. Direction
+
+**The brief:** A personal travel journal, sole author, trip to East Asia. Three weeks to implement before departure. Audience is both friends/family and the occasional curious stranger.
+
+**The position:** Neither Polarsteps nor FindPenguins. Both optimize for social sharing of travel data. This site optimizes for **the story** — and should feel like reading a well-edited travel journal, not using an app.
+
+**What we steal from each:**
+- Polarsteps: photography-first hierarchy, airy whitespace, map as the emotional spine of the trip
+- FindPenguins: typography as brand identity, stats as trophy case, hierarchical trip → entry structure
+
+**What we do better than both:**
+- Web-native: fast, linkable, no install, works on any browser
+- Single author = pure editorial voice, no social noise
+- Full CSS control = real typographic identity, not generic app chrome
+- Editorial feel: more travel magazine, less productivity dashboard
+
+**Aesthetic direction:** Field notes. The kind of journal a thoughtful traveler would carry — clean, direct, lets the photography speak. Sophisticated without effort.
+
+**The one aesthetic risk:** Full-bleed hero photography with a translucent date+location overlay at the bottom of each card. The photo IS the entry card — not a thumbnail beside text. This is the single element that distinguishes this design from both reference apps and from typical blog layouts.
+
+---
+
+## 2. Color System
+
+### Palette (dark theme — as implemented)
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--color-paper` | `#1A1814` | Page background — warm near-black |
+| `--color-canvas` | `#22201B` | Card surfaces, form backgrounds |
+| `--color-ink` | `#EDE8DF` | Primary text — warm cream |
+| `--color-ink-2` | `#B8B0A4` | Body text — muted warm |
+| `--color-ink-muted` | `#90887E` | Labels, timestamps, captions |
+| `--color-border` | `#2E2B25` | Standard dividers |
+| `--color-border-soft` | `#252219` | Subtle dividers |
+| `--color-accent` | `#2E9880` | Teal — lightened for dark-background contrast |
+| `--color-accent-hover` | `#287A68` | Hover/pressed teal |
+| `--color-accent-light` | `#1A2E29` | Pale teal tint backgrounds |
+| `--color-accent-on` | `#FFFFFF` | Text on accent surfaces |
+| `--color-surface-raised` | `#2A2720` | Elevated surfaces: tooltips, hover |
+| `--color-ink-inverse` | `#17171A` | Text on accent-coloured buttons |
+
+### Rationale for accent color
+
+Teal was chosen for its associations with bamboo, celadon porcelain, ancient jade, and temple gardens — without being literal or kitsch. On the dark palette, the original `#1F6B5A` was too low-contrast; it was lightened to `#2E9880` to maintain readable contrast against the warm near-black backgrounds. See `design-system-light.md` for the original light-palette values.
+
+---
+
+## 3. Typography
+
+### Fonts
+
+| Role | Family | Fallback | Source |
+|---|---|---|---|
+| Display / Headings | DM Serif Display | Georgia, serif | Google Fonts |
+| UI / Body / Labels | DM Sans | -apple-system, BlinkMacSystemFont, sans-serif | Google Fonts |
+
+**Google Fonts URL:**
+```
+https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap
+```
+
+**Why this pairing:**
+DM Serif Display has a calligraphic quality — slightly editorial, authoritative but not stiff. Paired with DM Sans (its designed companion) the system is cohesive. DM Sans is neutral and highly legible at all sizes. Both are under-used relative to Inter/Lato/Playfair, so the combination has a distinctive voice without being trendy.
+
+### Type Scale
+
+| Token | Size | Line Height | Usage |
+|---|---|---|---|
+| `--text-xs` | 0.75rem (12px) | 1.5 | Badges, captions |
+| `--text-sm` | 0.875rem (14px) | 1.5 | Meta, timestamps, labels |
+| `--text-base` | 1rem (16px) | 1.65 | Body paragraphs |
+| `--text-md` | 1.125rem (18px) | 1.55 | Lead text, intro paragraphs |
+| `--text-lg` | 1.375rem (22px) | 1.35 | Subheadings, card titles (mobile) |
+| `--text-xl` | 1.75rem (28px) | 1.25 | Entry card titles |
+| `--text-2xl` | 2.25rem (36px) | 1.2 | Page headings, entry titles (desktop) |
+| `--text-3xl` | 3rem (48px) | 1.1 | Hero entry title |
+
+### Usage rules
+
+- Entry titles: `--font-display`, `--text-xl` (mobile) / `--text-2xl` (desktop)
+- Site title in header: `--font-display`, `--text-lg`
+- All other UI text: `--font-ui`
+- Body paragraphs: `--font-ui`, `--text-base`, `--leading-normal`
+- Timestamps/badges: `--font-ui`, `--text-xs`, uppercase, `letter-spacing: 0.07em`
+
+---
+
+## 4. Spacing & Layout
+
+### Spacing scale (4px base unit)
+
+| Token | Value |
+|---|---|
+| `--space-1` | 0.25rem (4px) |
+| `--space-2` | 0.5rem (8px) |
+| `--space-3` | 0.75rem (12px) |
+| `--space-4` | 1rem (16px) |
+| `--space-5` | 1.25rem (20px) |
+| `--space-6` | 1.5rem (24px) |
+| `--space-8` | 2rem (32px) |
+| `--space-10` | 2.5rem (40px) |
+| `--space-12` | 3rem (48px) |
+| `--space-16` | 4rem (64px) |
+
+### Layout
+
+- Content max-width: `720px` (comfortable reading at any font size)
+- Page horizontal padding: `1.25rem` (mobile), `1.5rem` (desktop ≥520px)
+- Header height: `60px` (fixed, for JS offset calculations)
+- Map page: full viewport, no content max-width constraint
+
+### Border radius
+
+| Token | Value | Usage |
+|---|---|---|
+| `--radius-sm` | 4px | Photo corners, small chips |
+| `--radius-md` | 8px | Cards, buttons, inputs |
+| `--radius-lg` | 12px | Large cards, modals |
+| `--radius-full` | 9999px | Pills, badges |
+
+### Shadows
+
+| Token | Value | Usage |
+|---|---|---|
+| `--shadow-sm` | `0 1px 3px rgba(0,0,0,0.08)` | Stat blocks, subtle elevation |
+| `--shadow-md` | `0 4px 12px rgba(0,0,0,0.10)` | Cards on hover, dropdowns |
+| `--shadow-lg` | `0 8px 24px rgba(0,0,0,0.14)` | Lightbox, modals |
+
+---
+
+## 5. Component Inventory
+
+### 5.1 Site Header
+
+```
+[ into the east ]                    [ Journal  Map  Stats ]
+← accent bar across top (3px) ───────────────────────────────
+```
+
+- Top border: `3px solid var(--color-accent)` — thin accent bar signals the brand color without decorating
+- Site title: DM Serif Display, `--text-lg`, no decoration
+- Nav links: DM Sans, `--text-sm`, weight 500, `--color-ink-2`
+- Active nav link: `--color-accent`, weight 600
+- Mobile: same layout, title slightly smaller, nav links compact
+- Background: `--color-canvas` (white), bottom border `1px solid var(--color-border)`
+
+### 5.2 Entry Feed Card — With Photo
+
+```
+┌─────────────────────────────────────┐
+│                                     │
+│           [photo]                   │ ← full-width, 16:9, rounded corners
+│                                     │
+│  18 JUN · 📍 Kyoto, Japan           │ ← overlaid at bottom, gradient mask
+└─────────────────────────────────────┘
+  Arrived in Tokyo                      ← DM Serif Display, --text-xl
+  After 14 hours of flying I finally    ← body excerpt, --color-ink-2
+  set foot on Japanese soil...
+  Read entry →                          ← --color-accent, --text-sm
+```
+
+- Photo: `aspect-ratio: 16/9`, `object-fit: cover`, `border-radius: var(--radius-md)`
+- Photo has a `linear-gradient(to top, rgba(0,0,0,0.55), transparent)` overlay at the bottom 40%
+- Date + location sit on top of gradient in white text (`rgba(255,255,255,0.92)`)
+- On hover: photo scales to 1.03 (subtle zoom, 0.4s ease)
+- Title below photo: DM Serif Display, hover turns `--color-accent`
+- Card separation: `padding-bottom: var(--space-12)` + `border-bottom: 1px solid var(--color-border)`
+
+### 5.3 Entry Feed Card — No Photo
+
+When no photo is available, fall back to a text-only layout:
+
+```
+  18 JUN 2026  · 📍 Kyoto, Japan        ← meta row, --text-sm, --color-ink-muted
+
+  Arrived in Tokyo                       ← DM Serif Display, --text-xl
+  After 14 hours of flying...
+  Read entry →
+```
+
+- No photo container
+- Meta (date + location) on one line above title, small + muted
+
+### 5.4 Single Entry Page
+
+```
+  Wednesday, 18 June 2026               ← --text-sm, --color-ink-muted, uppercase
+  📍 Kyoto, Japan  ·  ⛅ Partly cloudy · 22°C
+
+  Arrived in Tokyo                       ← DM Serif Display, --text-2xl / --text-3xl
+  ─────────────────────────────────────
+  Body text content...                   ← --font-ui, --text-base/md
+  
+  [Photo gallery — 2 or 3 col grid]
+  
+  ← Back to journal
+```
+
+- The entry title uses `--font-display` at largest scale
+- A thin `--color-border` rule separates the header from the body
+- Body text is `--text-md` (18px) for comfortable long-form reading
+- Full-bleed hero option: if a `hero_image` is set, it spans the full content width with a bottom margin
+
+### 5.5 Post Form (Author View)
+
+```
+  New Entry
+
+  Title *           [________________________]
+  Date & Time       [2026-06-18 14:30       ]
+  What happened     [                        ]
+  today?            [                        ]
+                    [                        ]
+
+  Photos            [  + Add photos (max 4)  ]
+
+  City              [________________________]
+  Country           [________________________]
+
+  [  📍 Get Location  ]  [ 🌤 Get Weather  ]
+     ✓ Location captured: Kyoto, Japan   ← status line
+
+  [         Post Entry          ]
+```
+
+UX changes from current:
+- Lat/lng inputs **hidden from the UI** (remain in the form as `display:none` for data capture, filled by JS)
+- Location status shows captured city/country + coordinates in a single line (not separate status paragraphs)
+- Photo upload area: larger touch target, visual indication of count
+- "Post Entry" button: `--color-accent` background, full-width on mobile, `min-height: 52px`
+- Form fields: `--radius-md` corners, `--color-border` border, focus ring in `--color-accent`
+- Section spacing: generous vertical rhythm on mobile
+
+### 5.6 Stats Page
+
+```
+  ┌────────────┐  ┌────────────┐
+  │     42     │  │     18     │
+  │ days on    │  │  entries   │
+  │  the road  │  │  posted    │
+  └────────────┘  └────────────┘
+  ┌────────────┐  ┌────────────┐
+  │      6     │  │  ~14,200   │
+  │ countries  │  │   km       │
+  │  visited   │  │ traveled   │
+  └────────────┘  └────────────┘
+
+  Countries visited
+  Japan · South Korea · Mongolia · Russia · Finland · Estonia
+```
+
+- Numbers: `--font-display`, `--text-3xl`, `--color-accent`
+- Labels: `--font-ui`, `--text-xs`, uppercase, `--color-ink-muted`
+- Cards: white, `--shadow-sm`, `--radius-md`, centered
+
+### 5.7 Map Page
+
+Minimal changes — the map itself is good. Style improvements:
+- MapLibre popups: match the new design (DM Sans, `--radius-md`, `--shadow-md`)
+- Markers: keep current circle style, update color to `--color-accent`
+- Feed mini-map wrapper: match `--radius-md`, `--border`
+
+---
+
+## 6. UX Flows
+
+### 6.1 Reader — First Visit
+
+1. Land on `/dailies` (journal feed)
+2. See mini-map above fold (if entries exist) — route tells the geographic story at a glance
+3. First entry card: full-bleed hero photo with date/location overlay — immediate emotional pull
+4. Scroll through chronological entries
+5. Tap/click entry → entry detail page
+6. Navigate back via "← Back to journal"
+
+**Key principle:** The reader should understand the journey spatially (mini-map) and emotionally (hero photo) before reading a single word.
+
+### 6.2 Reader — Navigation
+
+- Journal: primary destination, the feed
+- Map: geographic exploration mode
+- Stats: quick numbers, satisfying progress indicator
+- No account required, no social friction, no login prompt for readers
+
+### 6.3 Author — Posting from Mobile
+
+1. Navigate to `/post` (bookmark on home screen)
+2. Already logged in (Grav session persists) — form loads directly
+3. **Title**: tap → type (autofocused)
+4. **Date & Time**: auto-filled to now, adjust if needed
+5. **Content**: write what happened
+6. **Photos**: tap "Add photos" → camera or gallery → select up to 4
+7. **Location**: tap "📍 Get Location" → GPS fires → status shows "Kyoto, Japan · 34.985, 135.758" in one line
+8. **Weather**: tap "🌤 Get Weather" (works only if location was captured) → status shows "Partly cloudy · 22°C"
+9. **City/Country**: auto-populated from GPS is a nice-to-have for v2; in v1 type manually if needed
+10. Tap "Post Entry" → success message → 2-second pause → redirect to /dailies (new entry visible at top)
+
+**Key principles:**
+- One-thumb operation for all critical actions on mobile
+- Location/weather are conveniences, not blockers — can skip both
+- Visual feedback is immediate (status line updates on GPS response)
+- After submit: don't leave author on a success message page; redirect to see their new post
+
+---
+
+## 7. Mobile Specifics
+
+### Touch targets
+- All interactive elements: `min-height: 44px`, `min-width: 44px` (Apple HIG standard)
+- Form buttons: `min-height: 52px` on the post form (primary CTA)
+- Nav links: `padding: 0.5rem 0.75rem`
+
+### Viewport concerns
+- Map page: `height: calc(100vh - 60px)`, `touch-action: none` on map container — prevents scroll trap
+- Photo lightbox: full viewport overlay, swipe-friendly (keyboard + click already implemented)
+- Form on mobile: single-column, generous input padding `0.875rem 1rem`, `font-size: 1rem` (prevents iOS zoom on focus)
+
+### Performance
+- Google Fonts: loaded with `preconnect` hints
+- Images: `loading="lazy"` on all non-above-fold images (already in place)
+- MapLibre: loaded from CDN, only on pages that need it
+- No new JS frameworks — vanilla JS throughout
+
+---
+
+## 8. Tech Stack Decision
+
+**Keep Grav CMS.** With a 3-week timeline, replacing it would consume all available time on migration rather than design improvements.
+
+| Layer | Decision | Rationale |
+|---|---|---|
+| Backend | Grav CMS (PHP, Twig) — unchanged | Works, flat-file, no DB |
+| CSS | Vanilla CSS + custom properties (design tokens) | No build step, full control, ships as one file |
+| JS | Vanilla JS — unchanged | Current JS is well-structured, scope doesn't justify a framework |
+| Icons | Unicode + emoji (current) | No dependency, works everywhere |
+| Fonts | Google Fonts via CDN | Two fonts, display-swap, negligible impact |
+| Maps | MapLibre GL JS | Replaced Leaflet; all 3 map templates use it |
+| Build | None — no build pipeline | Grav's asset pipeline handles minification if needed |
+
+**No Alpine.js, no TypeScript, no Tailwind.** The site has clean vanilla JS and CSS today; a redesign is about visual quality, not framework migration. Introducing a build pipeline on a 3-week timeline is a distraction.
+
+---
+
+## 9. What Changes From Current Design
+
+| Area | Current | New |
+|---|---|---|
+| Typography | System sans-serif only | DM Serif Display for headings + DM Sans for UI |
+| Accent color | `#0066cc` (generic blue) | `#1F6B5A` (deep teal) |
+| Background | `#ffffff` (pure white) | `#F7F5F2` (warm paper) |
+| Entry cards | Thumbnail + text below | Full-bleed 16:9 photo with overlay |
+| Header | No visual identity | Accent top-border, typographic title |
+| Design tokens | Hardcoded values throughout | CSS custom properties throughout |
+| Post form | Lat/lng visible inputs | Lat/lng hidden, single status line |
+| Font loading | None | Google Fonts DM pairing |
+| Hover states | Minimal | Photo zoom, title color change |
+| Stat numbers | `#0066cc` | `--color-accent` (#1F6B5A) |

docs/research-findpenguins.md

@@ -0,0 +1,141 @@
+# FindPenguins — Feature Research
+
+*Researched June 2026. Source: findpenguins.com, App Store, support docs, reviews.*
+
+---
+
+## Overview
+
+FindPenguins is a German travel tracking and community app. Core features are free; premium subscription ($4.99/month or $32.99/year) unlocks more photos per post and ebook exports. Revenue comes from subscriptions and printed photo books ($40–240). It leans more social than Polarsteps — discovery, community, and inspiring other travelers are central to its identity.
+
+---
+
+## Core User Flow
+
+1. User creates a **Trip** (title, dates, cover)
+2. App runs in background with **automatic GPS + flight detection tracking**
+3. User creates **Footprints** — individual journal entries tied to a location and time
+4. Each Footprint can contain: location, title, date, text story, photos, video, weather
+5. Footprints appear in a **chronological timeline** per trip
+6. Trip is shareable; social followers can view, comment, react
+7. At the end, optionally order a printed **photo book**
+
+---
+
+## Map Features
+
+- **Automatic route tracking**: GPS + flight detection, works offline
+- **Interactive world map**: route lines drawn between footprints
+- **3D flyover video**: auto-generated cinematic route visualization, free
+- **Countries/continents highlighted**: on personal map
+- **Visited places completion**: stats on what % of a country/region visited
+- Battery usage: ~4% per day (comparable to Polarsteps)
+- Route visualized as path on map, not just pins
+
+---
+
+## Footprints (Journal Entries)
+
+Each "Footprint" is the core content unit:
+
+- **Location**: GPS-detected, shown as city/country; uses reverse geocoding (LocationIQ)
+- **Title**: required, user-set
+- **Date**: required, defaults to current time
+- **Text story**: freeform journal text
+- **Photos**: 6 (free) / 10 (premium) per footprint
+- **Videos**: 1 (free) / 2 (premium) per footprint
+- **Weather**: auto-populated at location + time; manually editable
+- **Place name**: auto-detected city/neighborhood/country, editable
+- **Selective sharing**: each footprint can be public, friends-only, or private
+- **Delayed posting**: option to share location with a time delay (privacy feature)
+
+---
+
+## Photo Handling
+
+- Up to 6 photos per footprint (free), 10 (premium)
+- 1 video per footprint (free), 2 (premium)
+- Photos displayed in carousel/grid within footprint
+- High-res stored for photobook printing
+- Cover photo selectable per trip
+
+---
+
+## Statistics
+
+- Countries visited (count + list + % world)
+- Continents visited
+- Total distance traveled
+- Number of footprints / trips
+- Days on the road
+- World coverage percentage
+- Shown on profile and within photo books
+
+---
+
+## Social & Discovery Features
+
+- **Follower system**: follow other travelers, see their public footprints
+- **Comments**: friends/followers can comment on individual footprints
+- **Reactions**: like/react to footprints
+- **Discovery**: browse 10M+ travel experiences from other users by destination
+- **Group trips**: invite co-travelers to add footprints to a shared trip (with known bug: co-travelers can delete each other's content)
+- **Travel inspiration**: browse community trips to plan your own
+- **Explore by destination**: search real traveler experiences for any city/country
+
+---
+
+## Privacy Controls
+
+- Per-footprint visibility: public / friends / private
+- **Delayed sharing**: share location with a configurable time delay (safety feature for solo travelers)
+- Trip-level privacy: whole trip can be private or public
+- Can hide real-time location from followers
+
+---
+
+## Photo Book (Premium)
+
+- Printed book with maps, photos, text, statistics, and friend comments
+- €40–€240 depending on size/format (hardcover or layflat)
+- Free ebook version for premium subscribers
+- 5% discount on books with premium
+
+---
+
+## 3D Flyover Video
+
+- Free feature: auto-generates a cinematic 3D video of your route
+- Shareable directly from the app
+- No native app required for viewing (shareable link)
+
+---
+
+## Offline Capability
+
+- Tracker works fully offline (GPS, flight detection)
+- Footprints can be created and edited offline
+- Syncs when connected
+
+---
+
+## What Makes FindPenguins Distinctive
+
+1. **Flight detection**: auto-detects flights and logs them on the route
+2. **3D flyover video**: compelling visual output, free
+3. **Delayed sharing**: useful for solo travelers worried about broadcasting real-time location
+4. **Richer social layer**: comments on individual footprints, community discovery
+5. **Destination exploration**: browse real traveler posts for any place (like a user-generated travel guide)
+6. **Premium photo books**: more polished physical product with friend comments included
+
+---
+
+## Limitations (relevant to our context)
+
+- Requires native app for GPS/flight tracking — not reproducible in a web CMS
+- Social discovery features irrelevant for a solo personal blog
+- Group trip feature has a bug (co-travelers can delete your content)
+- Premium paywall for basic things like more than 6 photos per post
+- Community/social focus means the UX is designed around a social graph we don't have
+- 3D flyover video requires proprietary rendering pipeline
+- Real-time delayed sharing is a privacy feature for apps broadcasting live location — moot for a blog that posts after the fact

docs/research-polarsteps.md

@@ -0,0 +1,137 @@
+# Polarsteps — Feature Research
+
+*Researched June 2026. Source: polarsteps.com, App Store, support docs, reviews.*
+
+---
+
+## Overview
+
+Polarsteps is a travel tracking and journaling app used by 20M+ travelers. It is ad-free, primarily free to use, with paid travel books as the main revenue stream. It positions itself as "by travelers, for travelers" — clean, minimal, focused on personal memory-keeping and sharing with close friends/family rather than a social discovery platform.
+
+---
+
+## Core User Flow
+
+1. User creates a **Trip** (name, start/end dates, cover photo)
+2. App runs in background and **auto-tracks GPS route** continuously (dots on map)
+3. App auto-generates **Step Suggestions** when you stay somewhere — a notification asks "Are you in [City]? Add a step?"
+4. User accepts or manually creates a **Step**: a journal entry tied to a location
+5. Each Step gets: title, text, photos/videos, date, and auto-populated metadata
+6. Steps appear in a **timeline feed** ordered chronologically
+7. Trip is shareable via link; friends/family can follow in real time
+
+---
+
+## Map Features
+
+- **Route tracking**: GPS + WiFi + cell towers → white dots plotted on world map as you move
+- **Offline tracking**: stores locally, syncs when connected
+- **Travel Tracker steps**: actual route taken (not straight lines), with transport mode tagging (car, bus, train, taxi, walk, fly)
+- **Route visualization**: colored line on map connecting all steps
+- **Countries/continents visited**: highlighted on world map
+- **Battery usage**: ~4% per day (very efficient)
+- **World completion %**: gamified stat showing % of the globe visited
+- Tracks distance, speed, and estimated travel time between steps
+
+---
+
+## Steps (Journal Entries)
+
+Each "Step" is the core content unit:
+
+- **Location**: auto-detected city/country, adjustable
+- **Title**: auto-suggested from location, editable
+- **Date/time**: auto from GPS
+- **Text**: rich freeform journal text
+- **Photos**: unlimited (mobile app), displayed in a grid/carousel
+- **Videos**: supported on mobile only, excluded from printed books
+- **Weather**: auto-populated (temperature, conditions) at time of step
+- **Altitude**: recorded from GPS
+- **GPS coordinates**: stored and displayed
+- **Transport**: mode of travel to reach this step (car/train/fly/etc.)
+
+---
+
+## Photo Handling
+
+- Add photos directly from camera roll per step
+- Choose cover photo for the trip
+- Photos displayed in gallery within each step
+- High-resolution stored for travel book printing
+- No hard per-step photo limit mentioned (effectively unlimited)
+- Videos supported on mobile, excluded from print
+
+---
+
+## Statistics
+
+Displayed on trip and profile level:
+- Total km/miles traveled
+- Countries visited (count + list)
+- Continents visited
+- Number of steps/entries
+- Days on the road
+- World completion percentage
+- Furthest point from home
+- Number of followers / following
+
+---
+
+## Sharing & Social Features
+
+- **Privacy**: "Only me", "Followers only", or "Public"
+- **Shareable link**: send a URL to anyone to follow the trip live
+- **Followers**: people can follow your profile and see all public trips
+- **Reactions/comments**: followers can react and comment on steps
+- **Social media sharing**: export to Facebook, Instagram, etc.
+- **Travel Buddy**: invite friends to join and co-document a trip together
+- **Editors' Choice**: curated featured trips for discovery (like a magazine)
+- **Trip Reels**: auto-generated short video from photos/videos + visited places, shareable
+
+---
+
+## Planning Features (2025 addition)
+
+- **AI Itinerary Builder**: generates multi-stop travel plan on the map, with transport modes
+- **Accommodation import**: forward booking confirmation emails to plan@polarsteps.app → appears on map
+- **Activity planning**: add stays, restaurants, activities to itinerary
+- **Travel DNA**: personality-based personalization for AI suggestions
+
+---
+
+## Travel Book
+
+- Print a hardback book of your trip (€30–80, 24–300 pages)
+- Each step on its own page: photo, text, map thumbnail, metadata
+- Statistics page at the end
+- Designed, high-quality output — main revenue for Polarsteps
+
+---
+
+## Offline Capability
+
+- Full offline posting (text, photos)
+- GPS route tracking continues offline
+- All data syncs when back online
+
+---
+
+## What Makes Polarsteps Distinctive
+
+1. **Simplicity** — minimal UI, auto-everything, almost no friction to log a day
+2. **Route tracking** — actually shows where you walked/drove, not just pins
+3. **"Step suggestions"** — proactive nudges to journal without opening the app
+4. **Printed book** — the premium product, excellent quality
+5. **Ad-free** — rare among free travel apps
+6. **Battery efficiency** — 4% per day, usable on long trips
+
+---
+
+## Limitations (relevant to our context)
+
+- Requires native mobile app for GPS tracking (cannot do in browser)
+- Videos excluded from print
+- Social/discovery features add little value for a solo personal blog
+- AI itinerary builder overkill for one-person blog
+- Travel Buddy / follower system assumes a social graph we don't have
+- Reels require the native app video processing pipeline

docs/research/findpenguins.md

@@ -0,0 +1,141 @@
+# FindPenguins — Feature Research
+
+*Researched June 2026. Source: findpenguins.com, App Store, support docs, reviews.*
+
+---
+
+## Overview
+
+FindPenguins is a German travel tracking and community app. Core features are free; premium subscription ($4.99/month or $32.99/year) unlocks more photos per post and ebook exports. Revenue comes from subscriptions and printed photo books ($40–240). It leans more social than Polarsteps — discovery, community, and inspiring other travelers are central to its identity.
+
+---
+
+## Core User Flow
+
+1. User creates a **Trip** (title, dates, cover)
+2. App runs in background with **automatic GPS + flight detection tracking**
+3. User creates **Footprints** — individual journal entries tied to a location and time
+4. Each Footprint can contain: location, title, date, text story, photos, video, weather
+5. Footprints appear in a **chronological timeline** per trip
+6. Trip is shareable; social followers can view, comment, react
+7. At the end, optionally order a printed **photo book**
+
+---
+
+## Map Features
+
+- **Automatic route tracking**: GPS + flight detection, works offline
+- **Interactive world map**: route lines drawn between footprints
+- **3D flyover video**: auto-generated cinematic route visualization, free
+- **Countries/continents highlighted**: on personal map
+- **Visited places completion**: stats on what % of a country/region visited
+- Battery usage: ~4% per day (comparable to Polarsteps)
+- Route visualized as path on map, not just pins
+
+---
+
+## Footprints (Journal Entries)
+
+Each "Footprint" is the core content unit:
+
+- **Location**: GPS-detected, shown as city/country; uses reverse geocoding (LocationIQ)
+- **Title**: required, user-set
+- **Date**: required, defaults to current time
+- **Text story**: freeform journal text
+- **Photos**: 6 (free) / 10 (premium) per footprint
+- **Videos**: 1 (free) / 2 (premium) per footprint
+- **Weather**: auto-populated at location + time; manually editable
+- **Place name**: auto-detected city/neighborhood/country, editable
+- **Selective sharing**: each footprint can be public, friends-only, or private
+- **Delayed posting**: option to share location with a time delay (privacy feature)
+
+---
+
+## Photo Handling
+
+- Up to 6 photos per footprint (free), 10 (premium)
+- 1 video per footprint (free), 2 (premium)
+- Photos displayed in carousel/grid within footprint
+- High-res stored for photobook printing
+- Cover photo selectable per trip
+
+---
+
+## Statistics
+
+- Countries visited (count + list + % world)
+- Continents visited
+- Total distance traveled
+- Number of footprints / trips
+- Days on the road
+- World coverage percentage
+- Shown on profile and within photo books
+
+---
+
+## Social & Discovery Features
+
+- **Follower system**: follow other travelers, see their public footprints
+- **Comments**: friends/followers can comment on individual footprints
+- **Reactions**: like/react to footprints
+- **Discovery**: browse 10M+ travel experiences from other users by destination
+- **Group trips**: invite co-travelers to add footprints to a shared trip (with known bug: co-travelers can delete each other's content)
+- **Travel inspiration**: browse community trips to plan your own
+- **Explore by destination**: search real traveler experiences for any city/country
+
+---
+
+## Privacy Controls
+
+- Per-footprint visibility: public / friends / private
+- **Delayed sharing**: share location with a configurable time delay (safety feature for solo travelers)
+- Trip-level privacy: whole trip can be private or public
+- Can hide real-time location from followers
+
+---
+
+## Photo Book (Premium)
+
+- Printed book with maps, photos, text, statistics, and friend comments
+- €40–€240 depending on size/format (hardcover or layflat)
+- Free ebook version for premium subscribers
+- 5% discount on books with premium
+
+---
+
+## 3D Flyover Video
+
+- Free feature: auto-generates a cinematic 3D video of your route
+- Shareable directly from the app
+- No native app required for viewing (shareable link)
+
+---
+
+## Offline Capability
+
+- Tracker works fully offline (GPS, flight detection)
+- Footprints can be created and edited offline
+- Syncs when connected
+
+---
+
+## What Makes FindPenguins Distinctive
+
+1. **Flight detection**: auto-detects flights and logs them on the route
+2. **3D flyover video**: compelling visual output, free
+3. **Delayed sharing**: useful for solo travelers worried about broadcasting real-time location
+4. **Richer social layer**: comments on individual footprints, community discovery
+5. **Destination exploration**: browse real traveler posts for any place (like a user-generated travel guide)
+6. **Premium photo books**: more polished physical product with friend comments included
+
+---
+
+## Limitations (relevant to our context)
+
+- Requires native app for GPS/flight tracking — not reproducible in a web CMS
+- Social discovery features irrelevant for a solo personal blog
+- Group trip feature has a bug (co-travelers can delete your content)
+- Premium paywall for basic things like more than 6 photos per post
+- Community/social focus means the UX is designed around a social graph we don't have
+- 3D flyover video requires proprietary rendering pipeline
+- Real-time delayed sharing is a privacy feature for apps broadcasting live location — moot for a blog that posts after the fact

docs/research/polarsteps.md

@@ -0,0 +1,137 @@
+# Polarsteps — Feature Research
+
+*Researched June 2026. Source: polarsteps.com, App Store, support docs, reviews.*
+
+---
+
+## Overview
+
+Polarsteps is a travel tracking and journaling app used by 20M+ travelers. It is ad-free, primarily free to use, with paid travel books as the main revenue stream. It positions itself as "by travelers, for travelers" — clean, minimal, focused on personal memory-keeping and sharing with close friends/family rather than a social discovery platform.
+
+---
+
+## Core User Flow
+
+1. User creates a **Trip** (name, start/end dates, cover photo)
+2. App runs in background and **auto-tracks GPS route** continuously (dots on map)
+3. App auto-generates **Step Suggestions** when you stay somewhere — a notification asks "Are you in [City]? Add a step?"
+4. User accepts or manually creates a **Step**: a journal entry tied to a location
+5. Each Step gets: title, text, photos/videos, date, and auto-populated metadata
+6. Steps appear in a **timeline feed** ordered chronologically
+7. Trip is shareable via link; friends/family can follow in real time
+
+---
+
+## Map Features
+
+- **Route tracking**: GPS + WiFi + cell towers → white dots plotted on world map as you move
+- **Offline tracking**: stores locally, syncs when connected
+- **Travel Tracker steps**: actual route taken (not straight lines), with transport mode tagging (car, bus, train, taxi, walk, fly)
+- **Route visualization**: colored line on map connecting all steps
+- **Countries/continents visited**: highlighted on world map
+- **Battery usage**: ~4% per day (very efficient)
+- **World completion %**: gamified stat showing % of the globe visited
+- Tracks distance, speed, and estimated travel time between steps
+
+---
+
+## Steps (Journal Entries)
+
+Each "Step" is the core content unit:
+
+- **Location**: auto-detected city/country, adjustable
+- **Title**: auto-suggested from location, editable
+- **Date/time**: auto from GPS
+- **Text**: rich freeform journal text
+- **Photos**: unlimited (mobile app), displayed in a grid/carousel
+- **Videos**: supported on mobile only, excluded from printed books
+- **Weather**: auto-populated (temperature, conditions) at time of step
+- **Altitude**: recorded from GPS
+- **GPS coordinates**: stored and displayed
+- **Transport**: mode of travel to reach this step (car/train/fly/etc.)
+
+---
+
+## Photo Handling
+
+- Add photos directly from camera roll per step
+- Choose cover photo for the trip
+- Photos displayed in gallery within each step
+- High-resolution stored for travel book printing
+- No hard per-step photo limit mentioned (effectively unlimited)
+- Videos supported on mobile, excluded from print
+
+---
+
+## Statistics
+
+Displayed on trip and profile level:
+- Total km/miles traveled
+- Countries visited (count + list)
+- Continents visited
+- Number of steps/entries
+- Days on the road
+- World completion percentage
+- Furthest point from home
+- Number of followers / following
+
+---
+
+## Sharing & Social Features
+
+- **Privacy**: "Only me", "Followers only", or "Public"
+- **Shareable link**: send a URL to anyone to follow the trip live
+- **Followers**: people can follow your profile and see all public trips
+- **Reactions/comments**: followers can react and comment on steps
+- **Social media sharing**: export to Facebook, Instagram, etc.
+- **Travel Buddy**: invite friends to join and co-document a trip together
+- **Editors' Choice**: curated featured trips for discovery (like a magazine)
+- **Trip Reels**: auto-generated short video from photos/videos + visited places, shareable
+
+---
+
+## Planning Features (2025 addition)
+
+- **AI Itinerary Builder**: generates multi-stop travel plan on the map, with transport modes
+- **Accommodation import**: forward booking confirmation emails to plan@polarsteps.app → appears on map
+- **Activity planning**: add stays, restaurants, activities to itinerary
+- **Travel DNA**: personality-based personalization for AI suggestions
+
+---
+
+## Travel Book
+
+- Print a hardback book of your trip (€30–80, 24–300 pages)
+- Each step on its own page: photo, text, map thumbnail, metadata
+- Statistics page at the end
+- Designed, high-quality output — main revenue for Polarsteps
+
+---
+
+## Offline Capability
+
+- Full offline posting (text, photos)
+- GPS route tracking continues offline
+- All data syncs when back online
+
+---
+
+## What Makes Polarsteps Distinctive
+
+1. **Simplicity** — minimal UI, auto-everything, almost no friction to log a day
+2. **Route tracking** — actually shows where you walked/drove, not just pins
+3. **"Step suggestions"** — proactive nudges to journal without opening the app
+4. **Printed book** — the premium product, excellent quality
+5. **Ad-free** — rare among free travel apps
+6. **Battery efficiency** — 4% per day, usable on long trips
+
+---
+
+## Limitations (relevant to our context)
+
+- Requires native mobile app for GPS tracking (cannot do in browser)
+- Videos excluded from print
+- Social/discovery features add little value for a solo personal blog
+- AI itinerary builder overkill for one-person blog
+- Travel Buddy / follower system assumes a social graph we don't have
+- Reels require the native app video processing pipeline

docs/research/story-editing.md

@@ -0,0 +1,174 @@
+# Story Editing Research
+
+Brainstorming session — 2026-06-20. Notes on options for improving the story editing
+experience in Admin2. Not a plan — a reference to revisit once real story writing reveals
+what actually matters.
+
+---
+
+## The core problem
+
+Stories use shortcode syntax (`[scrolly-section image="x.jpg"]…[/scrolly-section]`) authored
+in a single big markdown textarea in Admin2. Three pain points, roughly equal weight:
+
+1. **Fragile syntax** — easy to typo a shortcode and get no useful error
+2. **Writing blind** — no preview while editing; you don't see the result until you view the page
+3. **Mobile unusable** — Admin2 is desktop-focused; the markdown textarea on a phone is painful
+
+---
+
+## What Keystatic / Sanity / Shorthand taught us
+
+All three tools represent content as a **typed, ordered list of blocks** — not a text string.
+
+In Keystatic the editing flow is: write prose normally → click "+" → pick a block type from a
+list → fill in a form with labelled fields → the block appears as an opaque card in the editor.
+Authors never see markup. Each block type (hero, gallery, scrolly section) has a typed schema
+(image picker, text fields, selects). Sanity's Portable Text uses the same model. Shorthand
+(used by BBC, Reuters, National Geographic) is a purpose-built CMS for exactly this kind of
+immersive storytelling — their section vocabulary is the best reference for what block types
+matter in practice.
+
+**Key insight:** the gap between Grav and these tools is entirely on the authoring side.
+Grav's rendering (Twig templates, shortcodes, parallax effects) is perfectly capable.
+The problem is that Admin2 was not designed for structured block content authoring.
+
+---
+
+## Snow Fall block vocabulary
+
+The canonical block types that appear across all immersive storytelling platforms:
+
+| Block | What it does | Fields |
+|---|---|---|
+| **Hero** | Full-bleed opening image/video + title. Chapter opener. | image, headline, subtitle, text position, animation (static / ken-burns) |
+| **Narrative text** | Prose reading column. The writing block. | body (markdown) |
+| **Full-bleed media** | Single image/video edge-to-edge, no text. Visual pause. | image, caption, credit |
+| **Image + caption** | Photo at configurable width with caption below. | image, caption, credit, width (column / full / bleed) |
+| **Scrollytelling** | Text panels scroll over a fixed or animated background. | background image, panels (each: headline + body) |
+| **Photo gallery** | Multi-image carousel/grid → lightbox. | images (each: file + caption + credit) |
+| **Pull quote** | Typographically large extracted quote. | quote text, attribution, optional background |
+| **Chapter break** | Major section transition with background image. | image, title, chapter number |
+| **Grid / side-by-side** | 2–3 column photo+text pairs. | columns array |
+| **Embed** | YouTube, Vimeo, audio, map. | URL, caption |
+
+Current Grav shortcodes cover: hero (ken-burns), scrollytelling (scrolly-section), gallery
+(snap-gallery), pull-quote, chapter-break. Missing from the vocabulary: narrative text as an
+explicit block, full-bleed media, image+caption, grid, embed.
+
+---
+
+## The two fundamental approaches
+
+### A — Blueprint-as-blocks (no shortcodes)
+
+Replace the markdown body with a `list` field in the story blueprint. Each list item is a
+block with a `type` selector + type-specific sub-fields. Content lives in frontmatter YAML;
+the Twig template loops over blocks and renders each one with the right partial. No shortcode
+syntax at all.
+
+**Solves all three pain points.** Admin2 form fields are mobile-reasonable. Structure is
+explicit and impossible to mis-type.
+
+**One limitation:** Grav's native `list` field doesn't hide/show fields based on the selected
+type. Every block card shows ALL fields for ALL block types; the template ignores the unused
+ones. It's visually cluttered but functionally correct. This is a solvable UX problem (Grav
+roadmap, or a future Admin2 extension) — the data model stays the same when it improves.
+
+### B — Enhanced markdown (keep shortcodes, improve authoring UX)
+
+Keep the markdown textarea; add tooling on top to reduce friction. Multiple options here
+(see section below), but all hit an architectural constraint: Admin2 serves its SPA via
+`echo $html; exit` which bypasses Grav's entire output pipeline. Standard plugin hooks
+for injecting assets don't fire in Admin2. Any JS-based editor enhancement requires either
+a fragile output-buffering hack or patching Admin2's pre-built `app/index.html` directly.
+
+---
+
+## 15 options researched
+
+### Options that work natively (no Admin2 hacking required)
+
+**1. Blueprint-as-blocks** — structured YAML fields per block, native Admin2 form rendering.
+Best long-term solution for non-technical story editing and mobile. Medium effort (blueprint
+YAML + Twig template rework). The field-clutter limitation is real but acceptable.
+
+**2. page-inject sub-pages** — each story block is a standalone Grav sub-page; the parent
+story injects them in sequence via `[plugin:page-inject]`. Editing = opening sub-pages
+individually. More flexible than blueprint-as-blocks for reusable content but creates
+more pages to manage and Admin2 navigation friction.
+
+**3. New shortcodes via YAML + Twig** — shortcode-core supports YAML-configured Twig
+shortcodes out of the box (`shortcode-core.yaml` + a Twig file in the theme). No plugin
+needed. Used to add `full-bleed` and `image-caption` to the story-blocks plugin.
+
+**4. Obsidian + Gitea git sync** — write stories in Obsidian on desktop or mobile with
+snippet templates for shortcodes. Push to Gitea; webhook deploys to production. Zero dev
+work. Good mobile writing experience. No image upload from mobile; requires comfort with git.
+
+**5. `/story-editor` custom page** — a purpose-built page (like `/gpx-manager`) that presents
+story blocks as drag-reorderable cards with typed forms, talks to the Grav API, designed
+mobile-first. Highest effort; best mobile result. Would use the "one custom plugin" slot.
+
+### Options blocked by Admin2's architecture
+
+All of these require injecting JavaScript or CSS into Admin2 pages, which is architecturally
+blocked (Admin2 bypasses Grav's output pipeline with `echo $html; exit`):
+
+- EasyMDE / SimpleMDE drop-in (split-pane markdown preview)
+- CodeMirror 6 autocomplete + syntax highlighting for shortcodes
+- Toast UI Editor (WYSIWYG ↔ markdown toggle)
+- Tiptap custom shortcode nodes
+- Milkdown
+- Slash-command / shortcode palette
+- Toolbar-at-bottom CSS (mobile improvement)
+- Web Speech API dictation button
+
+**Workaround:** patch Admin2's pre-built `app/index.html` directly. Survives until the next
+Admin2 update; a `make patch-admin2` command would re-apply it. Viable for a personal blog
+but adds a maintenance step.
+
+### Paid option
+
+**Grav Editor Pro ($75)** — TipTap/ProseMirror-based WYSIWYM editor, confirmed Admin2-
+compatible (listed as an optional dependency in the Admin2 README ≥ v2.0.1). When paired
+with shortcode-core, shortcodes appear as visual green blocks with a modal form per type.
+This is the cleanest story editing experience available without building it yourself. Ruled
+out based on preference to avoid paid tools.
+
+---
+
+## Honest CMS comparison: Grav vs Keystatic for storytelling
+
+**Wrong conclusion:** Grav can't do Snow Fall storytelling.
+
+**Right conclusion:** Grav's rendering side (parallax, scrollytelling, ken-burns, galleries)
+is fully capable. The authoring experience for structured block content is the genuine weak
+point — and the options to improve it cleanly within Admin2 are limited.
+
+Keystatic + a modern frontend (Astro, Next.js) would give a better editorial experience for
+story authoring, but at the cost of migrating away from Grav and building a separate frontend.
+For a solo travel blogger who is the only author, Grav with an improved shortcode setup or
+blueprint-as-blocks is good enough. Keystatic's advantage is significant for publications with
+multiple non-technical editors writing daily.
+
+---
+
+## What was actually done (2026-06-20)
+
+- Added `full-bleed` shortcode to `story-blocks` plugin (PHP class + CSS)
+- Added `image-caption` shortcode to `story-blocks` plugin (PHP class + CSS), with
+  `width` parameter: `column` (default) / `full` / `bleed`
+- Next step when ready to revisit: write some actual stories, then decide whether
+  blueprint-as-blocks or the app/index.html patch route is worth pursuing
+
+---
+
+## References
+
+- [Keystatic content components](https://keystatic.com/docs/content-components)
+- [Sanity Portable Text](https://www.sanity.io/docs/portable-text)
+- [Shorthand storytelling sections](https://shorthand.com/features/sections/)
+- [Grav Editor Pro](https://getgrav.org/premium/editor-pro)
+- [Admin2 GitHub](https://github.com/getgrav/grav-plugin-admin2)
+- [shortcode-core](https://github.com/getgrav/grav-plugin-shortcode-core)

docs/working/backlog.md

@@ -0,0 +1,11 @@
+# Backlog
+
+Ideas and improvements not yet planned or scheduled.
+
+---
+
+## GPX Manager (`/gpx-manager`)
+
+- [ ] **Polish the UI** — the current design is functional but bare; align with the Field Notes aesthetic, add better empty states, drag-and-drop upload area
+- [ ] **Link from Admin2** — Admin2 is a compiled SPA so we can't inject a sidebar link; options: (1) add a link to the site's nav when logged in, (2) a bookmarklet, or (3) wait for Admin2 to support plugin-contributed sidebar entries
+- [ ] **Komoot integration** — explore how to pull GPX routes directly from Komoot without a manual export step. Komoot has an API (`api.komoot.de`) that returns GPX for a tour given its ID. Could be: a field on the GPX manager where you paste a Komoot tour URL/ID and it fetches + saves server-side, or a script run via `make`. Worth researching auth requirements (public tours may not need auth).

docs/working/bugs-and-fixes.md

@@ -0,0 +1,204 @@
+# Bugs & Fixes
+
+Backlog of confirmed bugs with root cause analysis and implementation spec for the fix.
+
+---
+
+## BUG-001 — New entry not visible after form submission
+
+**Status:** fixed 2026-06-18  
+**Reported:** 2026-06-18  
+
+### Symptom
+
+After submitting a new post via `/post`, the entry page file is created correctly on disk but does not appear in the `/trips/<active_trip>/dailies` feed or in the Grav Admin panel until the cache is manually flushed.
+
+### Root cause
+
+Grav's page-tree cache (`cache/doctrine/`) is not invalidated when `add-page-by-form` writes a new page to disk. The tracker template uses `page.children`, which Grav serves from cache — so the new child page is invisible until the cache is cleared.
+
+### Workaround (manual)
+
+Run in terminal after each submission:
+
+```bash
+docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+### Fix spec
+
+Wire cache-clear into the form process so it happens automatically on every successful submission.
+
+**Approach — custom Grav plugin event hook:**
+
+1. Create a small plugin `user/plugins/cache-on-save/` with one event listener:
+   - Listen on `onFormProcessed`
+   - When the form name is `new-entry`, call `$this->grav['cache']->deleteAll()` (note: `clear()` does not exist on `Grav\Common\Cache` in Grav 1.7)
+2. Enable the plugin in `user/config/plugins/cache-on-save.yaml`
+
+This is the cleanest approach: it fires exactly once per successful submission, requires no changes to `post-form.md`, and works for any future forms too.
+
+**Alternative — disable page cache entirely:**
+
+Set `cache: { enabled: false }` in `system.yaml`. Simpler but degrades frontend performance; not recommended for production.
+
+### Files to create/modify
+
+| File | Change |
+|------|--------|
+| `user/plugins/cache-on-save/cache-on-save.php` | New plugin, ~30 lines |
+| `user/plugins/cache-on-save/cache-on-save.yaml` | Plugin manifest, enabled: true |
+| `user/config/plugins/cache-on-save.yaml` | Runtime config, enabled: true |
+
+### Acceptance criteria
+
+1. Submit a new post via `/post`
+2. Navigate to `/trips/<active_trip>/dailies` — the new entry is visible immediately, no manual cache flush needed
+3. Grav Admin also shows the new page immediately
+
+---
+
+## BUG-002 — Stale Twig cache after theme file changes
+
+**Status:** fixed 2026-06-18  
+**Reported:** 2026-06-18  
+
+### Symptom
+
+After theme template files are added or modified (e.g., creating `partials/base.html.twig`), Grav's Twig compiled-template cache still holds the old compiled version. Pages that extend the changed file throw 500 errors like "Template partials/base.html.twig is not defined" even though the file exists on disk.
+
+### Root cause
+
+Grav caches compiled Twig templates in `cache/twig/`. When a new file is added, existing templates that reference it don't know to recompile — their cache entries are still valid from their own mtime perspective.
+
+### Workaround (manual)
+
+Run after any theme file is added or changed:
+
+```bash
+docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+### Fix spec
+
+Disable Twig template caching in development via `user/config/system.yaml`:
+
+```yaml
+twig:
+  cache: false
+```
+
+Acceptable for a single-user dev setup — eliminates both BUG-001's side-effect and this bug entirely. Performance cost is negligible at one-user scale. On production, leave Twig cache enabled (it's fine there because template files don't change at runtime).
+
+**Files to change:**
+
+| File | Change |
+|------|--------|
+| `user/config/system.yaml` | Add `twig: { cache: false }` under development section |
+
+### Acceptance criteria
+
+1. Add a new theme template file
+2. Reload any page — no 500 error, template works immediately without manual cache flush
+
+---
+
+## BUG-003 — One post per day limit; silent failure on duplicate date
+
+**Status:** fixed 2026-06-18
+**Reported:** 2026-06-18
+
+### Symptom
+
+Submitting a second post with the same date as an existing entry shows "Entry posted successfully!" but creates no file. The user's post is silently discarded.
+
+### Root cause
+
+The `add-page-by-form` plugin built the page slug from date only (`Y-m-d`), producing folder names like `2026-06-18.entry`. With `overwrite_mode: false`, if that folder already exists the plugin skips page creation but does not abort — the `message` process step runs regardless, showing a false success.
+
+### Fix
+
+Change the slug template in `user/pages/02.post/post-form.md` to include time and title:
+
+```twig
+{{ form.value.date|date('Y-m-d-Hi') }}-{{ form.value.title|lower|regex_replace('/[^a-z0-9]+/', '-')|trim('-') }}
+```
+
+Example: title "Arrived in Tokyo" at 14:30 on 2026-06-18 → `2026-06-18-1430-arrived-in-tokyo`
+
+The slug is locked at creation time. Renaming the title afterwards does not change the URL.
+
+### Acceptance criteria
+
+1. Submit two posts on the same day with different times or titles — both appear in `/trips/<active_trip>/dailies` as separate entries
+2. Renaming a post's title in the frontmatter does not break its URL
+
+---
+
+## BUG-004 — Admin2 shows empty dashboard after Grav 2.0 upgrade
+
+**Status:** fixed 2026-06-19
+
+### Symptom
+
+After installing Grav 2.0 + Admin2, logging in shows an empty dashboard with no sidebar navigation (only a Settings item visible). Pages and content are not accessible.
+
+### Root causes (three separate issues)
+
+**A) Wrong user account type.** `system.yaml` had `accounts.type: regular` (old file-based system). Admin2's API plugin uses the Flex user collection to look up accounts. With `regular`, the API saw zero users and entered setup-wizard mode.
+
+**B) Wrong pages type.** `system.yaml` had `pages.type: regular`. Admin2's pages API requires `pages.type: flex` to serve the page tree.
+
+**C) Missing `api.*` permissions on user account.** Grav 2.0 Admin2 uses a new `api.*` permission namespace (`api.super`, `api.access`, etc.) instead of the old `admin.super`. A user with only `access.admin.super: true` appears as a non-admin to Admin2.
+
+### Fix
+
+In `user/config/system.yaml`:
+```yaml
+accounts:
+  type: flex
+pages:
+  type: flex
+```
+
+In `user/accounts/<username>.yaml`:
+```yaml
+access:
+  admin:
+    login: true
+    super: true      # keep for backward compat
+  api:
+    super: true      # required by Admin2
+    access: true     # required by Admin2
+```
+
+### Notes
+
+- `api.super: true` causes Admin2 to grant all sub-permissions automatically (`api.pages`, `api.config`, etc.)
+- JWT secret in `user/plugins/api/api.yaml` can stay empty — HMAC-SHA256 works with an empty key locally; production generates its own secure secret
+- The old `admin` plugin must be disabled (`enabled: false`) to avoid route conflict with `admin2`
+
+---
+
+## BUG-005 — PHP session fails after Grav 2.0 container upgrade
+
+**Status:** fixed 2026-06-19
+
+### Symptom
+
+After replacing Grav core files inside the container, all pages return a CRITICAL error in `logs/grav.log`: `Failed to start session: session_start(): Failed to read session data: files (path: )`. Site is inaccessible.
+
+### Root cause
+
+The `getgrav/grav` Docker image's PHP configuration does not set `session.save_path`. Grav 1.7 worked because the image's default PHP config included it; the updated image layer did not.
+
+### Fix
+
+Add to `php/php-local.ini`:
+```ini
+session.save_path = /tmp
+```
+
+Restart the container to pick up the change. This file is bind-mounted into the container so no image rebuild is needed.
+
+---

docs/working/milestones/milestone-1.md

@@ -0,0 +1,193 @@
+# Milestone 1 Spec — Entry Enrichment
+
+**Goal:** Every entry is richer out of the box — location name shown, weather auto-captured, photos in a proper gallery, hero image visible on the feed.
+
+---
+
+## User Stories
+
+- As a traveler (Mischa), when I submit the post form, I want my current weather conditions auto-filled so I don't have to look them up manually.
+- As a traveler, I want to type my city and country once and have it appear on the entry and in the feed card, so readers know where I am without reading the whole post.
+- As a reader, when I scan the feed, I want to see a thumbnail photo and location for each entry so I can quickly get a sense of where Mischa is and whether to read the full entry.
+- As a reader, when I open an entry, I want to see all uploaded photos in a gallery I can browse, not a wall of raw images.
+- As a traveler, when I submit a form without photos, the entry should still display cleanly with no broken image placeholders.
+
+---
+
+## Feature Details
+
+### 1.1 — Location Name Field on Post Form
+
+**What:** Add two text fields to the post form: `location_city` and `location_country`.
+
+**Behavior:**
+- Both are optional (GPS coordinates are also optional)
+- Placeholder text: "e.g. Kyoto" and "e.g. Japan"
+- Displayed below the lat/lng fields
+- On submit, stored in entry frontmatter as `location_city` and `location_country`
+- On the form, shown as a single labeled group "Location Name" with two side-by-side inputs on desktop, stacked on mobile
+
+**Edge cases:**
+- If left blank: entry shows no location badge. No error, no broken UI.
+- Long city names (e.g. "Ulaanbaatar") must not overflow card layout.
+- Special characters (accents, non-Latin) must render correctly.
+
+**Mobile behavior:** Both fields full-width, stacked, 44px min touch targets.
+
+---
+
+### 1.2 — Weather Auto-Fetch on Post Form
+
+**What:** A "Get Weather" button on the post form that calls the Open-Meteo free API (no API key) using the lat/lng already entered, and fills hidden weather fields.
+
+**Fields to fetch and store:**
+- `weather_temp_c` — temperature in Celsius (integer)
+- `weather_desc` — short description: one of: Sunny, Partly cloudy, Cloudy, Foggy, Drizzle, Rain, Snow, Thunderstorm (derived from WMO weather code)
+
+**WMO code mapping (Open-Meteo uses WMO codes):**
+- 0 → Sunny
+- 1,2 → Partly cloudy
+- 3 → Cloudy
+- 45,48 → Foggy
+- 51,53,55,56,57 → Drizzle
+- 61,63,65,66,67,80,81,82 → Rain
+- 71,73,75,77,85,86 → Snow
+- 95,96,99 → Thunderstorm
+
+**API call:**
+```
+https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lng}&current=temperature_2m,weather_code&temperature_unit=celsius
+```
+
+**UX flow:**
+1. User fills in lat/lng (manually or via "Get Location" button)
+2. User taps "Get Weather" button
+3. Button shows "Fetching…" while loading
+4. On success: fills temp and desc fields (visible, editable text inputs)
+5. On failure (no network, no lat/lng): shows inline error "Could not fetch weather — enter manually"
+
+**Edge cases:**
+- If lat/lng not filled when button tapped: show inline error "Enter coordinates first"
+- Weather fields are always editable manually (auto-fill is a convenience, not mandatory)
+- If weather fields left blank: entry shows no weather badge. No broken UI.
+- Open-Meteo returns current conditions, not historical — this is fine for posting in real time
+
+**Mobile behavior:** "Get Weather" button is full-width, 44px height, placed immediately below the lat/lng + location name fields.
+
+---
+
+### 1.3 — Weather Display on Entry Page
+
+**What:** If `weather_temp_c` or `weather_desc` is present in frontmatter, display a weather badge on the entry page.
+
+**Display format:** `☀️ Sunny · 28°C` (icon + description + temperature)
+- Icon chosen from a small set based on `weather_desc`:
+  - Sunny → ☀️
+  - Partly cloudy → ⛅
+  - Cloudy → ☁️
+  - Foggy → 🌫️
+  - Drizzle → 🌦️
+  - Rain → 🌧️
+  - Snow → ❄️
+  - Thunderstorm → ⛈️
+
+**Placement:** In the entry header, between the date and the body text. Same line as GPS coordinates if those are shown.
+
+**Edge cases:**
+- Only temp, no desc → show temp only
+- Only desc, no temp → show desc only
+- Neither → hide weather section entirely
+- Temperature should always be integer (round if float)
+
+---
+
+### 1.4 — Location Badge on Feed Cards and Entry Page
+
+**What:** Display `location_city, location_country` as a small badge on tracker feed cards and at the top of entry pages.
+
+**Feed card:** Below the date, above the excerpt. Format: `📍 Kyoto, Japan`
+
+**Entry page:** In the header below the date, above the content. Format: `📍 Kyoto, Japan`
+
+**Edge cases:**
+- Only city, no country → `📍 Kyoto`
+- Only country, no city → `📍 Japan`
+- Neither → location badge hidden entirely
+- Long location names: truncate with ellipsis at 30 chars on cards (full text on entry page)
+
+---
+
+### 1.5 — Photo Gallery on Entry Page
+
+**What:** Photos uploaded to an entry should display in a responsive grid gallery with lightbox (click to enlarge).
+
+**Implementation approach:** Use Grav's native media collection for the entry page. Each `.entry` folder contains its photos. Render them in a grid in `entry.html.twig`. Use a minimal vanilla JS lightbox — no external framework.
+
+**Gallery behavior:**
+- Photos displayed in a 2-column grid on mobile, 3-column on desktop
+- Each thumbnail is square-cropped, 150px on mobile
+- Clicking/tapping a thumbnail opens a lightbox overlay
+- Lightbox: dark overlay, full-size image centered, tap/click outside or press Escape to close
+- Left/right navigation arrows in lightbox (swipe on mobile)
+- No captions needed for v1
+
+**Edge cases:**
+- 0 photos: gallery section hidden entirely
+- 1 photo: still uses grid (single item), lightbox works
+- Many photos (>10): gallery still renders (no hard limit on display)
+- Non-image files in the media folder: skip them (only render jpg, jpeg, png, webp, gif)
+
+---
+
+### 1.6 — Hero Image on Tracker Feed Cards
+
+**What:** If an entry has photos, the first photo (or the one named in `hero_image` frontmatter) appears as a thumbnail on the tracker feed card.
+
+**Implementation:** In `tracker.html.twig`, for each entry:
+1. If `entry.header.hero_image` is set, use `entry.media[entry.header.hero_image]`
+2. Else, use the first image in `entry.media` sorted by name
+3. Render as a 16:9 aspect-ratio thumbnail, full width of card, above the title
+
+**Edge cases:**
+- No photos: card shows no image, just text. No broken `<img>` tag.
+- `hero_image` set but file missing: fall back to first media file, or no image
+- Very tall/wide images: CSS `object-fit: cover` maintains card aspect ratio
+
+---
+
+## Out of Scope (Milestone 1)
+
+- Map features (Milestone 2)
+- Statistics page (Milestone 3)
+- Video support
+- Comments or reactions
+- Automated reverse geocoding (city name comes from form input, not auto-detected)
+- Altitude display (data may not be present)
+- Historical weather (Open-Meteo current endpoint only)
+
+---
+
+## Acceptance Criteria
+
+1. Post form has `location_city` and `location_country` fields that save to entry frontmatter
+2. Post form has "Get Weather" button that fills `weather_temp_c` and `weather_desc` via Open-Meteo when lat/lng are provided
+3. Entry page shows weather badge when weather fields are present; hidden when absent
+4. Entry page shows location badge `📍 City, Country` when location fields are present; hidden when absent
+5. Tracker feed card shows location badge when present
+6. Tracker feed card shows a hero image when photos exist for an entry
+7. Entry page shows a 2-col (mobile) / 3-col (desktop) photo grid
+8. Clicking any photo opens a full-screen lightbox with prev/next navigation
+9. Pressing Escape or clicking outside lightbox closes it
+10. All fields are optional — empty values produce no broken UI elements
+11. All interactive elements meet 44px minimum touch target on mobile
+12. Form submits correctly with all new fields populated or all blank
+
+---
+
+## Design Notes
+
+- Weather and location badges should be subtle — small text, muted color, not the visual focus
+- Use emoji icons for weather — universal, no icon font dependency
+- Gallery grid: `gap: 4px` between thumbs, no borders, square crops
+- Lightbox: `background: rgba(0,0,0,0.92)`, image centered with `max-height: 90vh`
+- Feed card image: `aspect-ratio: 16/9`, `object-fit: cover`, rounded top corners matching card

docs/working/milestones/milestone-2.md

@@ -0,0 +1,166 @@
+# Milestone 2 Spec — Interactive Map
+
+**Goal:** A `/map` page shows all entries as markers on an interactive Leaflet.js map, connected by a chronological route line, with popups linking to entries.
+
+---
+
+## User Stories
+
+- As a reader, I want to see a world map showing where Mischa has been so I can understand the journey at a glance without reading every entry.
+- As a reader, I want to click a map marker and see the entry date, title, and a thumbnail — and be able to click through to the full entry.
+- As a reader on mobile, I want to pan and pinch-zoom the map with my fingers without the page scrolling underneath.
+- As a traveler (Mischa), I want the map to automatically include every entry that has lat/lng data — I should not need to do any manual map maintenance.
+- As a reader, I want the map to show the route line connecting stops in the order they were visited, so the journey makes narrative sense.
+
+---
+
+## Feature Details
+
+### 2.1 — Map Page
+
+**Route:** `/map`
+
+**Template:** `map.html.twig` — extends `partials/base.html.twig`
+
+**Page file:** `user/pages/03.map/map.md`
+
+**Content:**
+- Full-viewport-height map container below the site header
+- Leaflet.js loaded from CDN (jsDelivr): `https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js`
+- Leaflet CSS from same CDN
+- Tile layer: OpenStreetMap (free, no API key): `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`
+- Attribution: "© OpenStreetMap contributors"
+
+**Map initialization:**
+- Default zoom: auto-fit to bounds of all markers (use `map.fitBounds()`)
+- If no entries with GPS data: show world view, zoom 2, centered at 0,0 with a message "No locations yet"
+- Min zoom: 2, Max zoom: 18
+
+---
+
+### 2.2 — Entry Data Serialization
+
+**How entries reach the map JS:**
+
+In `map.html.twig`, Grav's Twig will iterate all published entries under `/tracker` and serialize them to a JSON array embedded in a `<script>` tag:
+
+```js
+var ENTRIES = [
+  {
+    "lat": 48.8566,
+    "lng": 2.3522,
+    "title": "Paris morning",
+    "date": "2026-06-18",
+    "url": "/tracker/2026-06-18",
+    "hero": "/path/to/thumb.jpg"  // null if no photo
+  },
+  ...
+];
+```
+
+**Only entries with valid lat AND lng are included** (skip entries where either is empty/null).
+
+Entries sorted ascending by date (oldest first) so the route line is drawn in travel order.
+
+---
+
+### 2.3 — Route Polyline
+
+**What:** A colored line drawn between entry markers in chronological order.
+
+**Style:**
+- Color: `#0066cc` (brand blue, matches existing CSS)
+- Weight: 3px
+- Opacity: 0.7
+- No arrow heads for v1
+
+**Behavior:**
+- Line drawn between consecutive entries (by date) that have valid GPS
+- If only 1 entry: no line (just a single marker)
+- If two consecutive entries are very far apart (>5000km): line still drawn — it's a flight, expected
+
+---
+
+### 2.4 — Entry Markers
+
+**What:** One circular marker per entry with GPS coordinates.
+
+**Marker design:**
+- Custom circular marker (not default Leaflet teardrop)
+- Color: `#0066cc` fill, white border, 2px border
+- Size: 12px diameter on mobile, 14px on desktop
+- Most recent entry: larger (18px) and brighter color to indicate "current location"
+
+**Popup on click/tap:**
+```
+[thumbnail if available — 120px wide, 80px tall, cover cropped]
+📅 18 June 2026
+Paris morning
+[Read entry →]
+```
+- Popup width: 180px max
+- "Read entry →" links to the entry page
+- Tapping outside popup closes it
+
+**Edge cases:**
+- Two entries at the same lat/lng: Leaflet clusters or offsets them slightly (use small offset to prevent exact overlap — just add 0.0001° offset per duplicate)
+- Entry with GPS but no photo: popup shows no image, just date + title + link
+
+---
+
+### 2.5 — Mobile Map UX
+
+**Problem:** On mobile, a map inside a scrollable page creates a scroll-trap (finger intended for page scroll gets captured by map pan).
+
+**Solution:**
+- Map container is `height: calc(100vh - 60px)` (full viewport minus header)
+- Map is the primary content of the page — no scroll needed
+- `touch-action: none` on the map container prevents page scroll interference
+- Leaflet handles touch pan/zoom natively
+
+---
+
+### 2.6 — Navigation Link
+
+**What:** "Map" link added to the site header navigation.
+
+**Where:** `partials/base.html.twig` nav section — add `<a href="{{ base_url_absolute }}/map">Map</a>`
+
+---
+
+## Out of Scope (Milestone 2)
+
+- Filtering markers by date range
+- Clustering markers at low zoom levels
+- Heatmap or density visualization
+- Showing the route on the tracker feed page (Milestone 4)
+- Showing elevation profile
+- Country highlight/fill on the map
+- Offline map tiles
+
+---
+
+## Acceptance Criteria
+
+1. `/map` page exists and returns HTTP 200
+2. Page renders a full-height interactive map
+3. All published entries with valid lat/lng appear as markers
+4. Markers are connected by a route line in date order
+5. Clicking/tapping a marker shows a popup with date, title, and link
+6. Popup link navigates to the correct entry page
+7. Most recent entry marker is visually distinct (larger/brighter)
+8. If no entries have GPS: map renders at world zoom with "No locations yet" message
+9. Map is pannable and zoomable by touch on mobile
+10. "Map" link appears in site navigation and routes to `/map`
+11. Map auto-fits to show all markers on page load
+12. Entries without lat/lng are silently excluded (no JS errors)
+
+---
+
+## Design Notes
+
+- Map tile layer: OpenStreetMap default tiles. Clean, recognizable, free.
+- Keep the Grav site header visible above the map — don't go full-screen (users need the nav)
+- Popup design: minimal. White background, slight box-shadow, 8px border-radius
+- Do not use any Leaflet plugins beyond the core library — keep the dependency footprint tiny
+- The map page should load fast: Leaflet is ~42KB gzipped. Tile images load progressively. No blocking.

docs/working/milestones/milestone-3.md

@@ -0,0 +1,182 @@
+# Milestone 3 Spec — Statistics Page
+
+**Goal:** A `/stats` page showing key trip numbers: days on the road, entries posted, countries visited, and approximate distance traveled.
+
+---
+
+## User Stories
+
+- As a reader, I want to see a quick summary of how far Mischa has traveled and how many countries they've visited, without having to read every entry.
+- As a traveler (Mischa), I want to see my own trip stats at a glance — a satisfying progress indicator while traveling.
+- As a reader, I want stats that update automatically as new entries are posted — no manual maintenance.
+
+---
+
+## Feature Details
+
+### 3.1 — Stats Page
+
+**Route:** `/stats`
+
+**Template:** `stats.html.twig` — extends `partials/base.html.twig`
+
+**Page file:** `user/pages/04.stats/stats.md`
+
+**Computed in Twig** (server-side, from published entries under `/tracker`):
+
+---
+
+### 3.2 — Stat: Days on the Road
+
+**Definition:** Number of calendar days from the date of the first published entry to today.
+
+**Formula (Twig):**
+```twig
+{% set first_entry = entries|first %}
+{% set days = (now.timestamp - first_entry.date|date('U'))|round / 86400 %}
+{% set days_on_road = [days|round(0, 'floor'), 0]|max %}
+```
+
+**Display:** `42 days on the road`
+
+**Edge cases:**
+- No entries: show `0 days on the road` or `Trip not started yet`
+- Only one entry (today): show `1 day on the road`
+
+---
+
+### 3.3 — Stat: Entries Posted
+
+**Definition:** Count of all published entries under `/tracker`.
+
+**Display:** `17 entries posted`
+
+**Edge cases:**
+- 0 entries: `0 entries posted`
+- 1 entry: `1 entry posted` (singular)
+
+---
+
+### 3.4 — Stat: Countries Visited
+
+**Definition:** Unique values of `location_country` across all published entries, non-empty.
+
+**Display:** Count + list
+
+```
+6 countries visited
+Japan · South Korea · Mongolia · Russia · Finland · Estonia
+```
+
+**Edge cases:**
+- No entries have `location_country`: show `Countries: —`
+- Some entries missing `location_country`: count only those that have it; note "(based on X of Y entries)"
+- Duplicate country names are de-duplicated (case-insensitive)
+
+---
+
+### 3.5 — Stat: Approximate Distance Traveled
+
+**Definition:** Sum of great-circle (haversine) distances between consecutive entries that have valid lat/lng, in ascending date order.
+
+**Implementation:** Computed in Twig using a haversine formula macro.
+
+**Haversine in Twig:**
+```twig
+{% macro haversine(lat1, lng1, lat2, lng2) %}
+  {% set R = 6371 %}
+  {% set dLat = ((lat2 - lat1) * 3.14159265 / 180) %}
+  {% set dLng = ((lng2 - lng1) * 3.14159265 / 180) %}
+  {% set a = (dLat/2)|sin * (dLat/2)|sin + (lat1 * 3.14159265 / 180)|cos * (lat2 * 3.14159265 / 180)|cos * (dLng/2)|sin * (dLng/2)|sin %}
+  {% set c = 2 * a|sqrt|asin %}
+  {{ (R * c)|round }}
+{% endmacro %}
+```
+
+Note: Twig does not have `sin`/`cos`/`asin`/`sqrt` built-in. Use a JavaScript-side calculation instead:
+
+**Implementation:** Embed the entry GPS data as JSON in the template (same pattern as Milestone 2), compute distance in vanilla JS, and write the result into the DOM on page load.
+
+```js
+function haversine(lat1, lng1, lat2, lng2) {
+  var R = 6371;
+  var dLat = (lat2 - lat1) * Math.PI / 180;
+  var dLng = (lng2 - lng1) * Math.PI / 180;
+  var a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180) * Math.cos(lat2*Math.PI/180) * Math.sin(dLng/2)**2;
+  return R * 2 * Math.asin(Math.sqrt(a));
+}
+var total = 0;
+for (var i = 1; i < GPS_POINTS.length; i++) {
+  total += haversine(GPS_POINTS[i-1][0], GPS_POINTS[i-1][1], GPS_POINTS[i][0], GPS_POINTS[i][1]);
+}
+document.getElementById('stat-distance').textContent = Math.round(total).toLocaleString() + ' km';
+```
+
+**Display:** `~3,400 km traveled`
+
+**Edge cases:**
+- 0 or 1 GPS points: `Distance: —`
+- Very large numbers (trans-continental trip): use thousands separator: `12,400 km`
+- Disclaimer note: "approximate — based on straight lines between entry locations"
+
+---
+
+### 3.6 — Visual Layout
+
+**Layout:** 4 large stat blocks in a 2×2 grid on desktop, stacked on mobile.
+
+Each block:
+```
+┌─────────────────┐
+│       42        │
+│  days on road   │
+└─────────────────┘
+```
+
+- Number: large (3rem), bold, brand blue
+- Label: small (0.85rem), muted grey
+- Background: white, 1px border, 8px radius, subtle shadow
+- Mobile: 2-col grid (2 stats per row)
+
+Below the grid: list of countries visited (plain text, centered, muted).
+
+---
+
+### 3.7 — Navigation Link
+
+Add "Stats" to the site navigation in `partials/base.html.twig`.
+
+---
+
+## Out of Scope (Milestone 3)
+
+- Charts or graphs (bar charts, line graphs, etc.)
+- World map with highlighted countries (that's a visual enhancement, deferred)
+- Per-country breakdown (km in each country, days in each country)
+- Speed statistics (km/day average)
+- Elevation statistics
+- Historical comparison (vs. last trip)
+
+---
+
+## Acceptance Criteria
+
+1. `/stats` page exists and returns HTTP 200
+2. "Days on the road" shows correct count from first entry date to today
+3. "Entries posted" shows count of published entries
+4. "Countries visited" shows correct count + list of unique non-empty `location_country` values
+5. "Distance traveled" shows km sum of haversine distances between consecutive GPS entries
+6. All four stats display in a 2×2 grid on desktop
+7. On mobile (375px), stats stack into a 2-column responsive grid
+8. Stats auto-update when new entries are published (no manual maintenance)
+9. If no entries: all stats show 0 or `—`, no JS errors
+10. "Stats" link in navigation routes to `/stats`
+
+---
+
+## Design Notes
+
+- Stats should feel like a dashboard, not a table — big numbers, small labels
+- Do not use any external charting library for v1
+- Countries list below the grid: inline, separated by `·`, muted grey
+- The "approximate" disclaimer for distance should be in small print below the distance stat

docs/working/milestones/milestone-4.md

@@ -0,0 +1,91 @@
+# Milestone 4 Spec — Mini-Map on Tracker Feed
+
+**Goal:** Embed a compact interactive map above the entry feed on the tracker page, showing recent entry positions and the current location, giving readers immediate spatial context.
+
+---
+
+## User Stories
+
+- As a reader landing on the tracker feed, I want to immediately see where Mischa currently is without having to navigate to the full map page.
+- As a reader, I want to click a marker on the mini-map and jump to that entry.
+- As a traveler (Mischa), I want the feed page to feel like a live travel dashboard, not just a blog list.
+
+---
+
+## Feature Details
+
+### 4.1 — Mini-Map Placement
+
+**Where:** At the top of `tracker.html.twig`, before the entry card list.
+
+**Height:** 240px on mobile, 320px on desktop.
+
+**Width:** Full width of content column (max 680px).
+
+**Tile layer:** Same OpenStreetMap tiles as Milestone 2.
+
+**No duplicate Leaflet load:** Leaflet is already loaded on the map page; on the tracker page, load it only if needed. Check with `if (typeof L === 'undefined')` before initializing. (In practice, the CSS and JS are loaded unconditionally from the same CDN — caching handles it.)
+
+---
+
+### 4.2 — What's Shown
+
+- **All entries with GPS** shown as small markers (not just recent 10 — the map auto-fits to bounds)
+- **Route line** connecting them in chronological order (same style as Milestone 2)
+- **Most recent marker** highlighted (larger, brighter)
+- **No popups by default** — tapping a marker links directly to the entry (no popup intermediary for the mini-map, keeps it fast)
+- Map auto-fits bounds to all markers; if only 1 marker, zoom to 10
+
+---
+
+### 4.3 — Interaction
+
+- Tap/click marker → navigate to entry URL directly
+- Map is pannable and zoomable (same touch handling as M2)
+- "View full map →" link below the mini-map → navigates to `/map`
+
+---
+
+### 4.4 — Entry Data
+
+Same JSON serialization as Milestone 2 (embed `TRACKER_ENTRIES` in the Twig template). This can reuse the same data variable name if both map and tracker pages use the same template pattern.
+
+---
+
+### 4.5 — Empty State
+
+If no entries have GPS coordinates:
+- Mini-map hidden entirely (don't show an empty world map on the feed page)
+- Entry list still shows normally
+
+---
+
+## Out of Scope (Milestone 4)
+
+- Clustering markers at low zoom
+- Filtering by date
+- Satellite/terrain tile layers
+- Search on the mini-map
+
+---
+
+## Acceptance Criteria
+
+1. Mini-map appears above entry cards on the tracker feed page
+2. All entries with valid lat/lng appear as markers on the mini-map
+3. Route line connects markers in date order
+4. Most recent marker is visually distinct
+5. Clicking/tapping a marker navigates directly to that entry
+6. "View full map →" link appears below the mini-map and routes to `/map`
+7. If no entries have GPS, mini-map is hidden and entry list shows normally
+8. Mini-map is pannable and zoomable by touch on mobile
+9. Mini-map does not block page scrolling on mobile (map is fixed height, not full-screen)
+
+---
+
+## Design Notes
+
+- Mini-map border-radius should match the card design (8px)
+- Light 1px border or subtle shadow to separate from content
+- "View full map →" in small muted text, right-aligned
+- Keep the mini-map lightweight: same Leaflet instance, no additional plugins

docs/working/plans/2026-06-18-grav2-upgrade.md

@@ -0,0 +1,508 @@
+# Grav 2.0 Upgrade 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:** Upgrade the local dev Docker environment from linuxserver/grav 1.7 to getgrav/grav 2.0 RC, validate the full Milestone 1 posting workflow, and update the production install script for a fresh Grav 2.0 deploy.
+
+**Architecture:** Two tracks in sequence — (1) swap the Docker image and update all dependent config/paths, boot the site with `make setup`, run the existing test suite; (2) update `server-install.sh` so `make remote-install` deploys Grav 2.0 fresh on the production PHP 8.4 server. The `user/` directory (content, config, theme, custom plugins) is already isolated as a git repo and requires only a small compatibility addition to `cache-on-save`.
+
+**Tech Stack:** Grav CMS 2.0.0-rc.9, PHP 8.4 (production) / Docker `getgrav/grav` with PHP 8.3 (dev), Apache, Twig 3, Symfony 7, Playwright (UI tests).
+
+## Global Constraints
+
+- All work on branch `update-to-2.0` (already created)
+- Never read `.env` — contains sensitive credentials
+- Only modify files in the project root or `user/` subfolders
+- `user/config/system.yaml` is tracked in the **user/ git repo** — commit it with `git -C user add config/system.yaml && git -C user commit ...`, NOT from the main repo
+- `user/plugins/cache-on-save/` is tracked in the **main repo** (after adding `.gitignore` exception) — commit blueprints.yaml with `git add user/plugins/cache-on-save/blueprints.yaml` from the project root
+- Container name stays `intotheeast_grav`; local port stays `8081`
+- `make` commands are the only way to interact with the remote server
+- Grav 2.0 requires PHP ≥ 8.3 (dev container uses 8.3 default; production uses 8.4 — both compliant)
+- Production download URL format: `https://getgrav.org/download/core/grav-admin/${GRAV_VERSION}${GRAV_CHANNEL_SUFFIX}`
+
+---
+
+## Files Changed
+
+| File | Action | Reason |
+|---|---|---|
+| `docker-compose.yml` | Modify | Switch image, update volume + PHP ini path, add env var |
+| `Makefile` | Modify | Three `docker exec` targets hardcode linuxserver's `/app/www/public` path |
+| `.gitignore` | Modify | Add `!user/plugins/cache-on-save/` exception to track the custom plugin in the main repo |
+| `user/plugins/cache-on-save/blueprints.yaml` | Create | Grav 2.0 compat flag (required by GPM) — committed to main repo |
+| `user/config/system.yaml` | Modify | Switch GPM channel from `stable` to `testing` |
+| `scripts/server-install.sh` | Modify | Support `GRAV_CHANNEL_SUFFIX` for `?testing` query param on 2.0 RC download |
+
+---
+
+## Task 1: Swap Docker image and fix container paths
+
+**Files:**
+- Modify: `docker-compose.yml`
+- Modify: `Makefile`
+
+**Interfaces:**
+- Produces: A running Grav 2.0 container reachable at `http://localhost:8081` with `user/` mounted at `/var/www/html/user` and PHP upload limits applied via `/usr/local/etc/php/conf.d/php-local.ini`
+
+- [ ] **Step 1: Stop and remove the current container**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+docker compose down
+```
+
+Expected: container `intotheeast_grav` stops and is removed.
+
+- [ ] **Step 2: Update `docker-compose.yml`**
+
+Replace the entire contents of `docker-compose.yml` with:
+
+```yaml
+services:
+  grav:
+    image: getgrav/grav
+    container_name: intotheeast_grav
+    environment:
+      - GRAV_CHANNEL=beta
+    ports:
+      - "8081:80"
+    volumes:
+      - ./user:/var/www/html/user
+      - ./php/php-local.ini:/usr/local/etc/php/conf.d/php-local.ini
+    restart: unless-stopped
+```
+
+Key changes from old file:
+- `image`: `lscr.io/linuxserver/grav:latest` → `getgrav/grav`
+- `environment`: removed `PUID`/`PGID` (linuxserver-specific), added `GRAV_CHANNEL=beta`
+- `volumes[0]`: `/config/www/user` → `/var/www/html/user`
+- `volumes[1]`: `/config/php/php-local.ini` → `/usr/local/etc/php/conf.d/php-local.ini`
+
+- [ ] **Step 3: Update Makefile — three targets use the old container path**
+
+In `Makefile`, make these three targeted replacements:
+
+**`install-plugins` target** — change working directory flag:
+
+Old:
+```makefile
+install-plugins:
+	docker exec -w /app/www/public intotheeast_grav php bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y
+```
+
+New:
+```makefile
+install-plugins:
+	docker exec -w /var/www/html intotheeast_grav php bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y
+```
+
+**`demo-load` target** — change cache clear path:
+
+Old:
+```makefile
+demo-load:
+	cp -r user/docs/demo/tracker/. user/pages/01.tracker/
+	docker exec intotheeast_grav bash -c "cd /app/www/public && php bin/grav clearcache"
+```
+
+New:
+```makefile
+demo-load:
+	cp -r user/docs/demo/tracker/. user/pages/01.tracker/
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+**`demo-reset` target** — change cache clear path:
+
+Old:
+```makefile
+demo-reset:
+	@for dir in user/docs/demo/tracker/*/; do \
+		folder=$$(basename "$$dir"); \
+		rm -rf "user/pages/01.tracker/$$folder"; \
+	done
+	docker exec intotheeast_grav bash -c "cd /app/www/public && php bin/grav clearcache"
+```
+
+New:
+```makefile
+demo-reset:
+	@for dir in user/docs/demo/tracker/*/; do \
+		folder=$$(basename "$$dir"); \
+		rm -rf "user/pages/01.tracker/$$folder"; \
+	done
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+- [ ] **Step 4: Validate docker-compose syntax**
+
+```bash
+docker compose config
+```
+
+Expected: prints merged compose config with no errors. If you see `Error`, re-check the YAML indentation in `docker-compose.yml`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add docker-compose.yml Makefile
+git commit -m "feat: switch to getgrav/grav 2.0 RC docker image
+
+Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
+```
+
+---
+
+## Task 2: Add Grav 2.0 compat flag and switch GPM to testing channel
+
+**Files:**
+- Modify: `.gitignore` (add exception for `user/plugins/cache-on-save/`)
+- Create: `user/plugins/cache-on-save/blueprints.yaml` (committed to main repo)
+- Modify: `user/config/system.yaml` (committed to user/ git repo, not main repo)
+
+**Interfaces:**
+- Consumes: Running container from Task 1
+- Produces: GPM resolves 2.0-compatible plugin versions on install; `cache-on-save` is recognized as 2.0-compatible by Grav's plugin registry
+
+- [ ] **Step 1: Create `user/plugins/cache-on-save/blueprints.yaml`**
+
+Create the file with this exact content:
+
+```yaml
+name: Cache On Save
+version: 1.0.0
+description: Clears Grav cache on new-entry form submission
+author:
+  name: Mischa
+  email: mischa@gorinskat.nl
+license: MIT
+
+dependencies:
+  - { name: grav, version: '>=1.6.0' }
+
+grav:
+  version: ['1.7', '2.0']
+```
+
+- [ ] **Step 2: Update GPM channel in `user/config/system.yaml`**
+
+Find the `gpm:` section (around line 200 in the file) and change `releases: stable` to `releases: testing`:
+
+Old:
+```yaml
+gpm:
+  releases: stable
+  official_gpm_only: true
+```
+
+New:
+```yaml
+gpm:
+  releases: testing
+  official_gpm_only: true
+```
+
+- [ ] **Step 3: Add gitignore exception and commit blueprints.yaml to main repo**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+
+# Add exception so cache-on-save is tracked in the main repo
+# Insert after the existing "user/plugins/" line in .gitignore:
+# !user/plugins/cache-on-save/
+
+# Then commit to the main repo:
+git add .gitignore user/plugins/cache-on-save/blueprints.yaml
+git commit -m "feat: track cache-on-save plugin in main repo; add Grav 2.0 compat flag
+
+Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
+```
+
+- [ ] **Step 4: Commit system.yaml to the user/ git repo**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git -C user add config/system.yaml
+git -C user commit -m "feat: switch GPM to testing channel for Grav 2.0
+
+Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
+```
+
+---
+
+## Task 3: Boot Grav 2.0 and install plugins
+
+**Files:** None (runtime only)
+
+**Interfaces:**
+- Consumes: docker-compose.yml from Task 1, GPM config from Task 2
+- Produces: Running Grav 2.0 instance at `http://localhost:8081` with all plugins installed
+
+- [ ] **Step 1: Run setup**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+make setup
+```
+
+This starts the container and installs all plugins from `plugins.txt`. First run may take 1-2 minutes as `getgrav/grav` downloads and extracts Grav 2.0 RC.
+
+Expected output ends with something like:
+```
+GPM Packages Installed: admin, email, error, form, login, problems, add-page-by-form, shortcode-gallery-plusplus
+```
+
+If `make setup` fails on plugin install with a permission error, fix with:
+```bash
+docker exec intotheeast_grav chown -R www-data:www-data /var/www/html/cache /var/www/html/logs /var/www/html/tmp
+make install-plugins
+```
+
+- [ ] **Step 2: Verify PHP upload limits are applied**
+
+```bash
+docker exec intotheeast_grav php -r "echo ini_get('upload_max_filesize') . ' / ' . ini_get('post_max_size');"
+```
+
+Expected: `100M / 500M`
+
+If you see `2M / 8M` (PHP defaults), the ini mount path is wrong. Verify with:
+```bash
+docker exec intotheeast_grav php -r "echo php_ini_scanned_files();"
+```
+It should include `/usr/local/etc/php/conf.d/php-local.ini`.
+
+- [ ] **Step 3: Verify site loads**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/
+```
+
+Expected: `200`
+
+If you get `500`, check container logs:
+```bash
+docker logs intotheeast_grav --tail 50
+```
+
+- [ ] **Step 4: Verify Admin2 loads**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/admin
+```
+
+Expected: `200` (Admin2 SPA login page, not the old Twig admin)
+
+- [ ] **Step 5: Run config and HTTP tests**
+
+```bash
+make test-config
+make test-post
+```
+
+`test-config` validates the form YAML config. `test-post` submits the posting form via HTTP and checks an entry is created.
+
+Expected: both exit 0.
+
+If `test-post` fails, check the output of:
+```bash
+bash scripts/test-post.sh
+```
+This is the critical `add-page-by-form` go/no-go test. If it fails with a 500 or the entry isn't created, see the **If add-page-by-form fails** section at the bottom of this plan.
+
+- [ ] **Step 6: Commit task completion note**
+
+No new files to commit. Move to Task 4.
+
+---
+
+## Task 4: Run Playwright test suite and fix any Admin2 regressions
+
+**Files:**
+- Modify: `tests/*.spec.js` (only if tests fail due to Admin2 DOM changes)
+
+**Interfaces:**
+- Consumes: Running Grav 2.0 from Task 3
+- Produces: All Playwright tests passing (or updated for Admin2's new DOM)
+
+- [ ] **Step 1: Run the full UI test suite**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+make test-ui
+```
+
+Expected: 25 tests pass.
+
+- [ ] **Step 2: If any tests fail, classify the failure**
+
+For each failing test, determine whether it is:
+
+**A) A genuine regression** (e.g., posting form broken, tracker page missing entries, gallery not rendering) — these are blockers. Stop, investigate the root cause, and fix the underlying Grav/plugin issue before updating the test.
+
+**B) An Admin2 DOM change** (e.g., selectors targeting old admin HTML structure like `.admin-menu`, `.grav-nav`, admin-specific CSS classes) — these are acceptable test updates. Update the selector in the test file to match Admin2's new HTML.
+
+To inspect the current Admin2 DOM for a failing selector:
+```bash
+# Check what the admin page actually renders
+curl -s http://localhost:8081/admin | grep -o '<[^>]*class="[^"]*admin[^"]*"[^>]*>' | head -20
+```
+
+- [ ] **Step 3: Update any Admin2 selector regressions**
+
+For each type-(B) failure, open the relevant test file in `tests/` and update the selector. Example pattern for updating an admin navigation selector:
+
+Old (targeting classic admin):
+```js
+await page.click('.grav-nav-toggle')
+```
+
+New (targeting Admin2 SPA — find actual selector from step 2's output):
+```js
+await page.click('[data-testid="nav-toggle"]')  // replace with actual Admin2 selector
+```
+
+After each fix, re-run just that test:
+```bash
+npx playwright test tests/<filename>.spec.js --headed
+```
+
+- [ ] **Step 4: Re-run full suite to confirm all pass**
+
+```bash
+make test-ui
+```
+
+Expected: all tests pass.
+
+- [ ] **Step 5: Commit any test updates**
+
+If any test files were modified:
+```bash
+git add tests/
+git commit -m "test: update Playwright selectors for Admin2 DOM
+
+Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
+```
+
+If no test files changed, no commit needed.
+
+---
+
+## Task 5: Update production install script for Grav 2.0
+
+**Files:**
+- Modify: `scripts/server-install.sh`
+
+**Interfaces:**
+- Consumes: Nothing from prior tasks (independent of Docker)
+- Produces: `make remote-install` deploys a fresh Grav 2.0 on the production PHP 8.4 server when `GRAV_VERSION=2.0.0-rc.9` and `GRAV_CHANNEL_SUFFIX=?testing` are set in `.env`
+
+- [ ] **Step 1: Update the wget download line in `scripts/server-install.sh`**
+
+The script currently downloads Grav with:
+```bash
+wget --no-verbose "https://getgrav.org/download/core/grav-admin/$GRAV_VERSION" -O grav-admin.zip
+```
+
+Grav 2.0 RC requires `?testing` appended to the URL. Add `GRAV_CHANNEL_SUFFIX` support:
+
+Old (line ~15 in the file):
+```bash
+echo "==> Downloading Grav $GRAV_VERSION"
+cd "$WEBROOT"
+wget --no-verbose "https://getgrav.org/download/core/grav-admin/$GRAV_VERSION" -O grav-admin.zip
+```
+
+New:
+```bash
+echo "==> Downloading Grav $GRAV_VERSION"
+cd "$WEBROOT"
+wget --no-verbose "https://getgrav.org/download/core/grav-admin/${GRAV_VERSION}${GRAV_CHANNEL_SUFFIX:-}" -O grav-admin.zip
+```
+
+The `${GRAV_CHANNEL_SUFFIX:-}` expands to empty string if unset, keeping stable releases working without any changes to `.env`.
+
+- [ ] **Step 2: Add GRAV_CHANNEL_SUFFIX to the env var validation block**
+
+At the top of the script the required vars are validated. `GRAV_CHANNEL_SUFFIX` is optional, so do NOT add it to the `:?` required list. Instead, add a comment above the download step:
+
+After the `set -e` and required var block, add a comment before the download line:
+
+```bash
+# GRAV_CHANNEL_SUFFIX: optional, set to '?testing' for RC/beta releases (e.g. 2.0.0-rc.9)
+# Leave unset or empty for stable releases.
+```
+
+- [ ] **Step 3: Verify the script logic looks correct**
+
+```bash
+# Dry-run: simulate what the URL would be with 2.0 RC vars
+GRAV_VERSION=2.0.0-rc.9 GRAV_CHANNEL_SUFFIX='?testing' bash -c \
+  'echo "https://getgrav.org/download/core/grav-admin/${GRAV_VERSION}${GRAV_CHANNEL_SUFFIX:-}"'
+```
+
+Expected output:
+```
+https://getgrav.org/download/core/grav-admin/2.0.0-rc.9?testing
+```
+
+```bash
+# Dry-run: simulate stable release (no suffix)
+GRAV_VERSION=1.7.53 bash -c \
+  'echo "https://getgrav.org/download/core/grav-admin/${GRAV_VERSION}${GRAV_CHANNEL_SUFFIX:-}"'
+```
+
+Expected output:
+```
+https://getgrav.org/download/core/grav-admin/1.7.53
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add scripts/server-install.sh
+git commit -m "feat: support GRAV_CHANNEL_SUFFIX for Grav 2.0 RC production install
+
+Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
+```
+
+---
+
+## If `add-page-by-form` fails (contingency)
+
+If `make test-post` in Task 3 step 5 returns a non-zero exit code or the entry is not created, `add-page-by-form` is incompatible with Grav 2.0. The fallback is to write a custom replacement plugin.
+
+**Do not proceed to Task 4 if the posting workflow is broken.** Instead:
+
+1. Check the container logs for the specific error:
+```bash
+docker logs intotheeast_grav --tail 100 | grep -i "error\|exception\|warning"
+```
+
+2. Note the error, stop work, and report back. The custom replacement plugin is a separate task requiring design input from the project owner before implementation.
+
+The custom plugin would:
+- Hook `onFormProcessed` (same as `cache-on-save`)
+- Read form field values (`title`, `content`, `photo`)
+- Build the page path under `user/pages/01.tracker/`
+- Write the page file to disk using `Grav\Common\Page\Page`
+- Merge `cache-on-save` functionality (call `$this->grav['cache']->deleteAll()`)
+- Replace both `add-page-by-form` and `cache-on-save` with a single plugin
+
+This is ~200 lines of PHP and ~1 day of work. It should be planned separately.
+
+---
+
+## Final smoke test (after all tasks complete)
+
+Run the full test suite one last time:
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+make test
+```
+
+Expected: all three suites (`test-config`, `test-post`, `test-ui`) exit 0.
+
+Then verify the go/no-go criteria from the spec are all met before merging to `main` or deploying to production.

docs/working/plans/2026-06-19-dark-mode.md

@@ -0,0 +1,319 @@
+# Dark Mode & Visual Polish 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.
+
+**Status:** ✅ Complete (2026-06-20)
+
+**Goal:** Replace the warm-paper light theme with a warm-dark "notebook at night" aesthetic — dark-only, no toggle, paper grain texture, dark terrain map tiles, typography polish.
+
+**Architecture:** Pure CSS token swap in `tokens.css` (all components update automatically), grain overlay via `body::after` SVG data URI in `style.css`, map tile URL swap in two Twig templates. No new dependencies, no JS changes, no structural changes.
+
+**Tech Stack:** CSS custom properties, inline SVG noise filter, Stadia Maps Alidade Smooth Dark tile CDN, Leaflet.js (already present)
+
+## Global Constraints
+
+- All changes in `user/` — commit with `git -C user`, not main-repo git
+- Dark-only — no `prefers-color-scheme` media query, no light-mode fallback, no toggle
+- Existing token names in `tokens.css` must not change — only values swap
+- No new npm/JS dependencies
+- `make test-ui` must pass after every task (pre-existing P2 FilePond failure is acceptable)
+- Map tile URL: `https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png` (CartoDB — no API key required)
+- CartoDB attribution (exact): `© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>`
+- Note: Stadia Maps requires an API key even for local dev — CartoDB dark_all is the keyless alternative
+
+---
+
+### Task 1: Dark color tokens
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/tokens.css`
+
+**Interfaces:**
+- Produces: CSS custom properties consumed by every component in `style.css` and Twig templates
+
+- [x] **Step 1: Read the current tokens file**
+
+```bash
+cat user/themes/intotheeast/css/tokens.css
+```
+
+Confirm these token names exist before editing: `--color-paper`, `--color-canvas`, `--color-ink`, `--color-ink-2`, `--color-ink-muted`, `--color-border`, `--color-border-soft`, `--color-accent`, `--color-accent-hover`, `--color-accent-light`, `--color-accent-on`.
+
+- [x] **Step 2: Replace the color block in tokens.css**
+
+Replace the entire `:root` color block (from `--color-paper` through `--color-accent-on`) with:
+
+```css
+    /* ── Dark palette (warm notebook) ──────────────────────────────────────── */
+    --color-paper:          #1A1814;   /* page background — warm near-black */
+    --color-canvas:         #22201B;   /* card surfaces, form backgrounds */
+    --color-ink:            #EDE8DF;   /* primary text — warm cream */
+    --color-ink-2:          #B8B0A4;   /* body text — muted warm */
+    --color-ink-muted:      #7A7268;   /* labels, timestamps, captions */
+    --color-border:         #2E2B25;   /* standard dividers */
+    --color-border-soft:    #252219;   /* subtle dividers */
+    --color-accent:         #2A8C73;   /* teal — lightened for dark contrast */
+    --color-accent-hover:   #236655;   /* hover/pressed teal */
+    --color-accent-light:   #1A2E29;   /* pale teal tint backgrounds */
+    --color-accent-on:      #FFFFFF;   /* text on accent surfaces */
+    --color-surface-raised: #2A2720;   /* elevated surfaces: tooltips, hover */
+    --color-ink-inverse:    #17171A;   /* text on accent-coloured buttons */
+```
+
+Keep all non-color tokens (`--text-*`, `--leading-*`, `--space-*`, font variables, etc.) unchanged.
+
+- [x] **Step 3: Verify no syntax errors**
+
+```bash
+docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache" && curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/dailies
+```
+
+Expected: `200`
+
+- [x] **Step 4: Visual smoke check**
+
+```bash
+curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'color: var(--color-paper)' | head -3
+```
+
+Not a definitive check — just confirm the page renders. Open a browser and verify the background is dark and text is cream.
+
+- [x] **Step 5: Run test suite**
+
+```bash
+make test-ui
+```
+
+Expected: 24/25 pass (P2 FilePond is pre-existing failure, all others pass).
+
+- [x] **Step 6: Commit**
+
+```bash
+git -C user add themes/intotheeast/css/tokens.css
+git -C user commit -m "feat: switch to warm-dark color tokens"
+```
+
+---
+
+### Task 2: Paper grain texture + hardcoded color fixes + typography
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/style.css`
+
+**Interfaces:**
+- Consumes: dark color tokens from Task 1
+
+- [x] **Step 1: Find all hardcoded color literals in style.css**
+
+```bash
+grep -n '#[0-9a-fA-F]\{3,6\}\|background: white\|background:#fff\|color: #\|background-color: #' user/themes/intotheeast/css/style.css
+```
+
+Make note of every hit — each one is a candidate to replace with a token. Exceptions: the CSS SVG data URI you are about to add (the noise filter hex values are part of the graphic, not UI colors).
+
+- [x] **Step 2: Add paper grain texture to body**
+
+Find the `body` rule in `style.css`. It will look something like:
+
+```css
+body {
+    background-color: var(--color-paper);
+    color: var(--color-ink);
+    ...
+}
+```
+
+Add a `body::after` rule immediately after the `body` rule:
+
+```css
+body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9998;
+    opacity: 0.035;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 200px 200px;
+}
+```
+
+- [x] **Step 3: Fix hardcoded login form colors**
+
+Find this rule (around line 497):
+
+```css
+.login-form .button.secondary { background: #f0f0f0; color: #333; text-decoration: none; line-height: 44px; padding: 0 1rem; }
+```
+
+Replace with:
+
+```css
+.login-form .button.secondary { background: var(--color-canvas); color: var(--color-ink); text-decoration: none; line-height: 44px; padding: 0 1rem; }
+```
+
+- [x] **Step 4: Fix any other hardcoded colors found in Step 1**
+
+For each hardcoded literal found in Step 1 (excluding the data URI you added):
+- `#fff` / `white` → `var(--color-canvas)` (if a surface) or `var(--color-paper)` (if a page background)
+- `#333` / dark grays → `var(--color-ink)` or `var(--color-ink-2)`
+- `#eee` / light grays → `var(--color-border)` or `var(--color-border-soft)`
+- `#f0f0f0` / near-white → `var(--color-canvas)`
+
+Use judgment: if a hex is inside a gradient or SVG path data, leave it alone.
+
+- [x] **Step 5: Typography — increase entry body paragraph spacing**
+
+Find:
+
+```css
+.entry-body p { margin-bottom: 1.1em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); }
+```
+
+Change `margin-bottom: 1.1em` to `margin-bottom: 1.4em`.
+
+- [x] **Step 6: Typography — tighten h1/h2 tracking**
+
+Find the `h1` and `h2` rules. Any rule that applies `letter-spacing: -0.01em` to an `h1` or `h2` — change it to `-0.02em`. Do not touch h3/h4/h5/h6.
+
+- [x] **Step 7: Stats page — tabular numbers**
+
+Find any CSS rule targeting stats numbers (look for `.stat-value`, `.stats-number`, or similar). Add `font-variant-numeric: tabular-nums` to it. If no such specific rule exists, search the template:
+
+```bash
+grep -n 'stat\|number\|count' user/themes/intotheeast/templates/stats.html.twig | head -20
+```
+
+Then add a targeted rule in style.css for whatever class wraps the numeric values.
+
+- [x] **Step 8: Verify no syntax errors and visual check**
+
+```bash
+docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache" && curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/dailies
+```
+
+Expected: `200`. Open browser — grain should be subtly visible on the dark background.
+
+- [x] **Step 9: Run test suite**
+
+```bash
+make test-ui
+```
+
+Expected: 24/25 (P2 pre-existing).
+
+- [x] **Step 10: Commit**
+
+```bash
+git -C user add themes/intotheeast/css/style.css
+git -C user commit -m "feat: add paper grain texture, fix hardcoded colors, improve typography"
+```
+
+---
+
+### Task 3: Dark terrain map tiles
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/map.html.twig`
+- Modify: `user/themes/intotheeast/templates/dailies.html.twig`
+
+**Interfaces:**
+- Consumes: Leaflet.js already loaded in both templates
+- Produces: Stadia Alidade Smooth Dark tiles replacing OpenStreetMap tiles in both map views
+
+- [x] **Step 1: Read current tile setup in both templates**
+
+```bash
+grep -n "tileLayer\|openstreetmap\|attribution\|stadia" user/themes/intotheeast/templates/map.html.twig user/themes/intotheeast/templates/dailies.html.twig
+```
+
+Confirm the current tile URL pattern (`{s}.tile.openstreetmap.org`) in both files.
+
+- [x] **Step 2: Replace tile layer in map.html.twig**
+
+Find:
+
+```javascript
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+```
+
+Replace with:
+
+```javascript
+// TODO: add Stadia API key before launch — free dev use requires no key, production does
+L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
+    maxZoom: 20,
+    attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a> © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+```
+
+- [x] **Step 3: Replace tile layer in dailies.html.twig (mini-map)**
+
+Apply the identical tile swap to the mini-map `L.tileLayer` call in `dailies.html.twig`. Find the OpenStreetMap tile URL and replace it with the Stadia dark URL (same as Step 2, same attribution, same TODO comment).
+
+- [x] **Step 4: Verify tiles load**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/map
+```
+
+Expected: `200`.
+
+Check the tile URL is in the HTML:
+
+```bash
+curl -s http://localhost:8081/trips/japan-korea-2026/map | grep -o 'stadiamaps'
+```
+
+Expected: `stadiamaps` (appears in the tile URL).
+
+Open the map in a browser and confirm:
+- Dark terrain tiles render (not the default light OSM tiles)
+- GPX polyline is visible in teal on the dark background
+- Entry pins render correctly on top
+- Attribution footer is present
+
+- [x] **Step 5: Check mini-map on dailies page**
+
+```bash
+curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiamaps'
+```
+
+Expected: `stadiamaps`.
+
+- [x] **Step 6: Run test suite**
+
+```bash
+make test-ui
+```
+
+Expected: 24/25 (P2 pre-existing).
+
+- [x] **Step 7: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/dailies.html.twig
+git -C user commit -m "feat: switch to Stadia Alidade Smooth Dark map tiles"
+```
+
+---
+
+## Final verification
+
+After all 3 tasks:
+
+1. `make test-config && make test-post && make test-ui` — all pass
+2. Visual check list (browser, not curl):
+   - `/trips/japan-korea-2026/dailies` — dark warm background, cream text, grain visible, teal accents
+   - `/trips/japan-korea-2026/map` — dark terrain tiles, teal GPX polyline, entry pins
+   - `/trips/japan-korea-2026/dailies/<any-entry>` — dark canvas card, no white boxes
+   - `/post` — form fields readable, no black-on-black inputs
+   - `/trips/japan-korea-2026/stats` — numbers align (tabular-nums)
+3. Final hardcoded-literal check:
+   ```bash
+   grep -n '#[0-9a-fA-F]\{3,6\}' user/themes/intotheeast/css/style.css | grep -v 'data:image'
+   ```
+   All remaining hits should be either intentional (e.g. SVG path data) or documented.

docs/working/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/<slug>/`; 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() : [] %}
+
+<div class="gpx-manager">
+    <h1 class="gpx-manager__title">GPX Files</h1>
+
+    {% if trips is empty %}
+        <p>No trips found.</p>
+    {% else %}
+        {% for trip in trips %}
+        <section class="gpx-trip" data-route="{{ trip.route }}">
+            <h2 class="gpx-trip__name">{{ trip.title }}</h2>
+            <div class="gpx-file-list" id="files-{{ trip.slug }}">
+                <p class="gpx-loading">Loading…</p>
+            </div>
+            <form class="gpx-upload-form" data-trip-route="{{ trip.route }}">
+                <label class="gpx-upload-label">
+                    <input type="file" accept=".gpx,application/gpx+xml" name="file" class="gpx-file-input">
+                </label>
+                <button type="submit" class="gpx-upload-btn">Upload</button>
+                <span class="gpx-status"></span>
+            </form>
+        </section>
+        {% endfor %}
+    {% endif %}
+</div>
+
+<style>
+.gpx-manager { max-width: 720px; margin: 2rem auto; padding: 0 1rem; font-family: 'DM Sans', sans-serif; }
+.gpx-manager__title { font-family: 'DM Serif Display', serif; font-size: 1.75rem; margin-bottom: 2rem; }
+.gpx-trip { border: 1px solid #e0ddd6; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
+.gpx-trip__name { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem; }
+.gpx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 1rem; }
+.gpx-table th { text-align: left; color: #666; font-weight: 500; padding: 0.25rem 0.5rem; border-bottom: 1px solid #e0ddd6; }
+.gpx-table td { padding: 0.5rem; border-bottom: 1px solid #f0ede8; }
+.gpx-empty, .gpx-loading { color: #888; font-size: 0.875rem; margin-bottom: 0.75rem; }
+.gpx-upload-form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
+.gpx-upload-btn { background: #1F6B5A; color: #fff; border: none; border-radius: 5px; padding: 0.4rem 1rem; font-size: 0.875rem; cursor: pointer; }
+.gpx-upload-btn:disabled { opacity: 0.5; cursor: default; }
+.gpx-delete { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; color: #c0392b; }
+.gpx-delete:disabled { opacity: 0.5; }
+.gpx-status { font-size: 0.8rem; color: #555; }
+.gpx-status.error { color: #c0392b; }
+</style>
+
+<script>
+/* GPX manager JS — added in Task 3 */
+</script>
+
+{% endblock %}
+```
+
+- [ ] **Step 2: Verify trip sections render**
+
+Open `http://localhost:8081/gpx-manager` while logged in. You should see:
+- Heading "GPX Files"
+- One card per trip (Italy 2025, Japan-Korea 2026) each showing "Loading…" and an upload form with a file picker and Upload button.
+- The page header/nav from `base.html.twig` is present.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/gpx-manager.html.twig
+git -C user commit -m "feat: gpx-manager template layout with trip sections"
+```
+
+---
+
+### Task 3: JavaScript — list, upload, delete
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/gpx-manager.html.twig` — replace `/* GPX manager JS — added in Task 3 */` inside the existing `<script>` tag
+
+**Interfaces:**
+- Consumes: `.gpx-trip[data-route]` and `.gpx-upload-form[data-trip-route]` from Task 2
+- Consumes: Grav API at `/api/v1` (session cookie auth)
+- API list response: `{ data: [{ filename: string, size: number, modified: string, type: string }] }`
+- API upload: multipart `FormData` with field name `file`
+- API delete: `DELETE /api/v1/pages{route}/media/{encodedFilename}` → 200 or 204 on success
+
+- [ ] **Step 1: Replace the placeholder comment with the full script**
+
+In `user/themes/intotheeast/templates/gpx-manager.html.twig`, replace `/* GPX manager JS — added in Task 3 */` with:
+
+```javascript
+const API = '/api/v1';
+
+function formatSize(bytes) {
+    if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+    return (bytes / 1024).toFixed(0) + ' KB';
+}
+
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+async function apiFetch(url, options) {
+    const res = await fetch(url, { credentials: 'include', ...options });
+    if (res.status === 401) { window.location.href = '/admin'; return null; }
+    return res;
+}
+
+async function loadFiles(tripRoute) {
+    const res = await apiFetch(`${API}/pages${tripRoute}/media`);
+    if (!res || !res.ok) return [];
+    const data = await res.json();
+    return (data.data || []).filter(f => f.filename.toLowerCase().endsWith('.gpx'));
+}
+
+async function renderTrip(tripEl) {
+    const route = tripEl.dataset.route;
+    const list = tripEl.querySelector('.gpx-file-list');
+    list.innerHTML = '<p class="gpx-loading">Loading…</p>';
+
+    const files = await loadFiles(route);
+
+    if (files.length === 0) {
+        list.innerHTML = '<p class="gpx-empty">No GPX files.</p>';
+        return;
+    }
+
+    const rows = files.map(f =>
+        `<tr>
+            <td>${f.filename}</td>
+            <td>${formatSize(f.size)}</td>
+            <td>${formatDate(f.modified)}</td>
+            <td><button class="gpx-delete" data-filename="${f.filename}">Delete</button></td>
+        </tr>`
+    ).join('');
+
+    list.innerHTML = `<table class="gpx-table">
+        <thead><tr><th>File</th><th>Size</th><th>Modified</th><th></th></tr></thead>
+        <tbody>${rows}</tbody>
+    </table>`;
+
+    list.querySelectorAll('.gpx-delete').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            if (!confirm(`Delete ${btn.dataset.filename}?`)) return;
+            btn.disabled = true;
+            const res = await apiFetch(
+                `${API}/pages${route}/media/${encodeURIComponent(btn.dataset.filename)}`,
+                { method: 'DELETE' }
+            );
+            if (res && (res.ok || res.status === 204)) {
+                await renderTrip(tripEl);
+            } else {
+                btn.disabled = false;
+                alert('Delete failed — check console.');
+            }
+        });
+    });
+}
+
+function initUpload(formEl) {
+    formEl.addEventListener('submit', async e => {
+        e.preventDefault();
+        const route = formEl.dataset.tripRoute;
+        const fileInput = formEl.querySelector('input[type=file]');
+        const file = fileInput.files[0];
+        const status = formEl.querySelector('.gpx-status');
+        const btn = formEl.querySelector('.gpx-upload-btn');
+
+        if (!file) { status.textContent = 'Choose a file first.'; return; }
+
+        status.textContent = 'Uploading…';
+        status.className = 'gpx-status';
+        btn.disabled = true;
+
+        const fd = new FormData();
+        fd.append('file', file);
+
+        const res = await apiFetch(`${API}/pages${route}/media`, { method: 'POST', body: fd });
+        btn.disabled = false;
+
+        if (res && res.ok) {
+            status.textContent = 'Uploaded!';
+            fileInput.value = '';
+            await renderTrip(formEl.closest('.gpx-trip'));
+            setTimeout(() => { status.textContent = ''; }, 3000);
+        } else {
+            const err = res ? await res.json().catch(() => ({})) : {};
+            status.textContent = 'Error: ' + (err.detail || (res ? res.statusText : 'network error'));
+            status.className = 'gpx-status error';
+        }
+    });
+}
+
+document.querySelectorAll('.gpx-trip').forEach(renderTrip);
+document.querySelectorAll('.gpx-upload-form').forEach(initUpload);
+```
+
+- [ ] **Step 2: Test file listing**
+
+Open `http://localhost:8081/gpx-manager` while logged in. Open DevTools → Network tab.
+
+Expected:
+- `GET /api/v1/pages/trips/italy-2025/media` → 200, Italy 2025 section shows a table with 3 rows (day-5, day-6, day-8) with sizes (~1.8 MB, ~2.2 MB, ~1.9 MB) and dates.
+- `GET /api/v1/pages/trips/japan-korea-2026/media` → 200, Japan-Korea 2026 section shows "No GPX files."
+
+- [ ] **Step 3: Test upload**
+
+In the Japan-Korea 2026 section: click the file input, select any `.gpx` file from disk, click Upload.
+
+Expected:
+- Status shows "Uploading…" then "Uploaded!"
+- The file table re-renders with the new file listed.
+- DevTools shows `POST /api/v1/pages/trips/japan-korea-2026/media` → 200.
+
+- [ ] **Step 4: Test delete**
+
+Click Delete on the file just uploaded. Confirm the dialog.
+
+Expected:
+- The row disappears immediately.
+- DevTools shows `DELETE /api/v1/pages/trips/japan-korea-2026/media/<filename>` → 200 or 204.
+- Reload the page — file is gone.
+
+- [ ] **Step 5: Test 401 redirect**
+
+Log out of Admin2. In a new tab, navigate to `http://localhost:8081/gpx-manager`.
+
+Expected: redirected to login page (Login plugin enforces `access.admin.login: true` before the page renders, so the JS never runs).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/gpx-manager.html.twig
+git -C user commit -m "feat: gpx-manager list, upload, delete via Grav API session auth"
+```

docs/working/plans/2026-06-19-maplibre-migration.md

@@ -0,0 +1,538 @@
+# MapLibre GL Migration 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.
+
+**Status:** ✅ Complete (2026-06-20)
+
+**Goal:** Replace Leaflet JS across all three maps (full map, mini-map on dailies, home page map) with MapLibre GL JS, add an animated journey line, and improve map CSS using our design tokens.
+
+**Architecture:** A shared JS utility file (`maplibre-utils.js`) provides `animateJourneyLine`, `addJourneyLine`, and `createDotMarker` — reused by all three map templates. Each template loads MapLibre GL + the utility file, then calls these helpers. GPX rendering switches from `leaflet-gpx` to `@mapbox/togeojson` + MapLibre GeoJSON layers.
+
+**Tech Stack:** MapLibre GL JS 4.x (CDN), `@mapbox/togeojson` 0.16.2 (CDN), CARTO dark-matter vector style (free, no key), vanilla JS (no framework).
+
+## Global Constraints
+
+- MapLibre GL CDN: `https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js` and `.css`
+- toGeoJSON CDN: `https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js`
+- Map tile style URL: `https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json`
+- Accent colour (journey line, markers): `#2A8C73` — matches `--color-accent` in `tokens.css`
+- Latest-entry marker accent: `#155244` (same as current Leaflet code)
+- Animation duration: 5000ms, ease-out cubic
+- Respect `prefers-reduced-motion: reduce` — skip animation, show full line immediately
+- `cooperativeGestures` on embedded maps (mini-map, home map); full-page map uses default (free) gestures
+- No new Grav plugins, no npm — CDN only
+- Run `make content-push` after changes to sync to production git repo
+
+---
+
+### Task 1: CSS — Remove Leaflet override, add MapLibre design-token styles
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/style.css` (around line 371)
+
+**What:** Delete the one Leaflet-specific rule and add a MapLibre CSS block that styles navigation controls, attribution bar, popups, and cursor using design tokens.
+
+- [x] **Open style.css and find the Leaflet block**
+
+  Locate (around line 371):
+  ```css
+  /* match CartoDB dark tile background so no grey flash on load/zoom */
+  .leaflet-container { background: #282828 !important; }
+  ```
+
+- [x] **Delete that rule and replace with the MapLibre block**
+
+  Delete the line above. Immediately after the `.map-empty { ... }` block (around line 381), add:
+
+  ```css
+  /* ── MapLibre GL overrides ───────────────────────────────────────────────── */
+
+  /* Navigation controls (zoom +/−) */
+  .maplibregl-ctrl-group {
+      background: var(--color-canvas);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm);
+      box-shadow: var(--shadow-sm);
+  }
+  .maplibregl-ctrl-group button {
+      color: var(--color-ink-2);
+  }
+  .maplibregl-ctrl-group button:hover {
+      background: var(--color-surface-raised);
+      color: var(--color-ink);
+  }
+  .maplibregl-ctrl-group button + button {
+      border-top: 1px solid var(--color-border);
+  }
+
+  /* Attribution bar */
+  .maplibregl-ctrl-attrib {
+      background: rgba(26, 24, 20, 0.75) !important;
+      color: var(--color-ink-muted) !important;
+      font-family: var(--font-ui);
+      font-size: 0.7rem;
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+  }
+  .maplibregl-ctrl-attrib a {
+      color: var(--color-accent) !important;
+  }
+
+  /* Popup */
+  .maplibregl-popup-content {
+      background: var(--color-canvas);
+      color: var(--color-ink);
+      font-family: var(--font-ui);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      padding: var(--space-4);
+  }
+  .maplibregl-popup-tip {
+      border-top-color: var(--color-canvas) !important;
+  }
+  .maplibregl-popup-close-button {
+      color: var(--color-ink-muted);
+      font-size: 1.1rem;
+      padding: var(--space-1) var(--space-2);
+  }
+  .maplibregl-popup-close-button:hover {
+      color: var(--color-ink);
+      background: transparent;
+  }
+
+  /* Cursor */
+  .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
+  .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
+  ```
+
+- [x] **Verify: open `http://localhost:8081/map` in browser**
+
+  If no entries exist, run `make demo-load` first. Check:
+  - No JS errors in console
+  - Page layout unchanged (map still fills viewport below nav)
+
+- [x] **Commit**
+
+  ```bash
+  git -C user add themes/intotheeast/css/style.css
+  git -C user commit -m "style: swap Leaflet CSS override for MapLibre design-token styles"
+  ```
+
+---
+
+### Task 2: Shared JS utilities file
+
+**Files:**
+- Create: `user/themes/intotheeast/js/maplibre-utils.js`
+
+**Interfaces:**
+- Produces: `window.MapUtils.animateJourneyLine(map, coords, sourceId)`, `window.MapUtils.addJourneyLine(map, coords, sourceId)`, `window.MapUtils.createDotMarker(isLatest)`, `window.MapUtils.MAP_STYLE`, `window.MapUtils.ACCENT`
+- Loaded by: all three map templates via `<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>`
+
+**What:** Extract the animated journey line logic and marker factory into a single file so all three templates share one implementation.
+
+- [x] **Create `user/themes/intotheeast/js/maplibre-utils.js`**
+
+  ```js
+  /* Shared MapLibre GL utilities — loaded by map.html.twig, dailies.html.twig, home.html.twig */
+  (function (global) {
+    var ACCENT      = '#2A8C73';
+    var ACCENT_DIM  = '#155244';
+    var MAP_STYLE   = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+
+    /* Build a GeoJSON LineString feature */
+    function lineFeature(coords) {
+      return { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coords } };
+    }
+
+    /*
+     * Progressively draw the journey line using a requestAnimationFrame loop.
+     * coords: [[lng, lat], ...] in chronological order.
+     * sourceId: the MapLibre source id to update each frame.
+     */
+    function animateJourneyLine(map, coords, sourceId) {
+      if (coords.length < 2) return;
+
+      /* Cumulative Euclidean distance between waypoints */
+      var segDist = [0];
+      for (var i = 1; i < coords.length; i++) {
+        var dx = coords[i][0] - coords[i - 1][0];
+        var dy = coords[i][1] - coords[i - 1][1];
+        segDist.push(segDist[i - 1] + Math.sqrt(dx * dx + dy * dy));
+      }
+      var totalDist = segDist[segDist.length - 1];
+      var DURATION  = 5000;
+      var startTime = performance.now();
+
+      function frame(now) {
+        if (!map.getSource(sourceId)) return; /* map was removed */
+        var t      = Math.min((now - startTime) / DURATION, 1);
+        var eased  = 1 - Math.pow(1 - t, 3); /* ease-out cubic */
+        var target = eased * totalDist;
+
+        var animCoords = [coords[0]];
+        for (var j = 1; j < coords.length; j++) {
+          if (segDist[j] <= target) {
+            animCoords.push(coords[j]);
+          } else {
+            var frac = (target - segDist[j - 1]) / (segDist[j] - segDist[j - 1]);
+            animCoords.push([
+              coords[j - 1][0] + (coords[j][0] - coords[j - 1][0]) * frac,
+              coords[j - 1][1] + (coords[j][1] - coords[j - 1][1]) * frac
+            ]);
+            break;
+          }
+        }
+
+        map.getSource(sourceId).setData(lineFeature(animCoords));
+        if (t < 1) requestAnimationFrame(frame);
+      }
+
+      requestAnimationFrame(frame);
+    }
+
+    /*
+     * Add a journey line source + two layers (glow + main) to a loaded map,
+     * then animate or draw instantly based on prefers-reduced-motion.
+     */
+    function addJourneyLine(map, coords, sourceId) {
+      if (coords.length < 2) return;
+
+      map.addSource(sourceId, { type: 'geojson', data: lineFeature([coords[0]]) });
+
+      map.addLayer({
+        id: sourceId + '-glow', type: 'line', source: sourceId,
+        layout: { 'line-join': 'round', 'line-cap': 'round' },
+        paint:  { 'line-color': ACCENT, 'line-width': 6, 'line-opacity': 0.18 }
+      });
+
+      map.addLayer({
+        id: sourceId + '-line', type: 'line', source: sourceId,
+        layout: { 'line-join': 'round', 'line-cap': 'round' },
+        paint:  { 'line-color': ACCENT, 'line-width': 2.5, 'line-opacity': 0.85 }
+      });
+
+      var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (reducedMotion) {
+        map.getSource(sourceId).setData(lineFeature(coords));
+      } else {
+        animateJourneyLine(map, coords, sourceId);
+      }
+    }
+
+    /*
+     * Return a styled <div> element for a map marker dot.
+     * isLatest: make it larger with a teal ring.
+     */
+    function createDotMarker(isLatest) {
+      var el   = document.createElement('div');
+      var size = isLatest ? 18 : 12;
+      var bg   = isLatest ? ACCENT_DIM : ACCENT;
+      var ring = isLatest ? ',0 0 0 4px rgba(42,140,115,0.25)' : '';
+      el.style.cssText = [
+        'width:' + size + 'px',
+        'height:' + size + 'px',
+        'background:' + bg,
+        'border:2px solid #fff',
+        'border-radius:50%',
+        'box-shadow:0 1px 4px rgba(0,0,0,0.4)' + ring,
+        'cursor:pointer'
+      ].join(';');
+      return el;
+    }
+
+    global.MapUtils = { MAP_STYLE: MAP_STYLE, ACCENT: ACCENT, addJourneyLine: addJourneyLine, createDotMarker: createDotMarker };
+  })(window);
+  ```
+
+- [x] **Verify the file parses without syntax errors**
+
+  ```bash
+  node --check /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user/themes/intotheeast/js/maplibre-utils.js
+  ```
+
+  Expected: no output (clean parse).
+
+- [x] **Commit**
+
+  ```bash
+  git -C user add themes/intotheeast/js/maplibre-utils.js
+  git -C user commit -m "feat: add shared MapLibre GL utilities (journey line, markers)"
+  ```
+
+---
+
+### Task 3: Full map page — migrate map.html.twig
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/map.html.twig`
+
+**Interfaces:**
+- Consumes: `window.MapUtils` from Task 2 (`MAP_STYLE`, `addJourneyLine`, `createDotMarker`)
+- Twig data shape consumed unchanged: `map_entries` array with `lat`, `lng`, `title`, `date`, `url`, `hero` keys; `gpx_urls` array of strings
+
+**What:** Replace the Leaflet map + GPX rendering with MapLibre GL. Keep all Twig data-gathering logic at the top unchanged. Only the HTML/CSS/JS at the bottom changes.
+
+- [x] **Replace everything from `<div class="map-container"...>` to end of `{% endblock %}`**
+
+  The Twig data-gathering at the top (lines 1–33) is unchanged. Replace from line 35 onwards with:
+
+  ```twig
+  <div class="map-container" id="trip-map"></div>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+  <script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+
+  <script>
+  var ENTRIES  = {{ map_entries|json_encode|raw }};
+  var GPX_URLS = {{ gpx_urls|json_encode|raw }};
+
+  var map = new maplibregl.Map({
+      container: 'trip-map',
+      style: MapUtils.MAP_STYLE,
+      center: [20, 20],
+      zoom: 2
+  });
+
+  map.addControl(new maplibregl.NavigationControl(), 'top-right');
+
+  if (ENTRIES.length === 0) {
+      var empty = document.createElement('div');
+      empty.className = 'map-empty';
+      empty.textContent = 'No locations yet — entries with GPS will appear here.';
+      document.getElementById('trip-map').appendChild(empty);
+  }
+
+  map.on('load', function () {
+      /* ── GPX tracks ──────────────────────────────────────────── */
+      GPX_URLS.forEach(function (url, idx) {
+          fetch(url)
+              .then(function (r) { return r.text(); })
+              .then(function (text) {
+                  var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                  var geojson = toGeoJSON.gpx(xml);
+                  var sid     = 'gpx-' + idx;
+                  map.addSource(sid, { type: 'geojson', data: geojson });
+                  map.addLayer({
+                      id: sid + '-line', type: 'line', source: sid,
+                      layout: { 'line-join': 'round', 'line-cap': 'round' },
+                      paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
+                  });
+              })
+              .catch(function (err) { console.warn('GPX load failed:', url, err); });
+      });
+
+      if (ENTRIES.length === 0) return;
+
+      /* ── Markers ─────────────────────────────────────────────── */
+      var bounds = new maplibregl.LngLatBounds();
+      var coords = [];
+
+      ENTRIES.forEach(function (entry, i) {
+          var isLatest = (i === ENTRIES.length - 1);
+          var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+          coords.push(lngLat);
+          bounds.extend(lngLat);
+
+          var el = MapUtils.createDotMarker(isLatest);
+
+          var popupHtml = '<div style="min-width:160px;max-width:200px;">';
+          if (entry.hero) {
+              popupHtml += '<img src="' + entry.hero + '" alt="" style="width:100%;height:80px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;">';
+          }
+          popupHtml += '<div style="font-size:0.75rem;color:var(--color-ink-muted);margin-bottom:2px;">📅 ' + entry.date + '</div>';
+          popupHtml += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;color:var(--color-ink);">' + entry.title + '</div>';
+          popupHtml += '<a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.85rem;text-decoration:none;">Read entry →</a>';
+          popupHtml += '</div>';
+
+          new maplibregl.Marker({ element: el })
+              .setLngLat(lngLat)
+              .setPopup(new maplibregl.Popup({ offset: 10, maxWidth: '220px' }).setHTML(popupHtml))
+              .addTo(map);
+      });
+
+      /* ── Journey line ────────────────────────────────────────── */
+      MapUtils.addJourneyLine(map, coords, 'journey');
+
+      /* ── Fit bounds ──────────────────────────────────────────── */
+      if (ENTRIES.length === 1) {
+          map.jumpTo({ center: coords[0], zoom: 10 });
+      } else {
+          map.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+      }
+  });
+  </script>
+  {% endblock %}
+  ```
+
+- [x] **Verify in browser at `http://localhost:8081/trips/japan-korea-2026/map`**
+
+  With demo data loaded (`make demo-load`):
+  - Dark vector map fills the viewport
+  - 7 teal dot markers visible on Japan→Korea route
+  - Journey line animates in over ~5 seconds on load
+  - Click a marker → popup appears with date, title, "Read entry →" link
+  - Navigate controls (zoom +/−) are styled with dark background (design tokens)
+  - Attribution bar is dark/muted (not white)
+  - No console errors
+
+- [x] **Commit**
+
+  ```bash
+  git -C user add themes/intotheeast/templates/map.html.twig
+  git -C user commit -m "feat: migrate full map page to MapLibre GL with animated journey line"
+  ```
+
+---
+
+### Task 4: Embedded maps — migrate dailies mini-map and home map
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/dailies.html.twig` (mini-map section, around lines 37–78)
+- Modify: `user/themes/intotheeast/templates/home.html.twig` (map section, around lines 126–168)
+
+**Interfaces:**
+- Consumes: `window.MapUtils` from Task 2
+- Twig data shapes unchanged: `map_entries` (both files) with `lat`, `lng`, `title`, `slug`, `url` keys
+
+**What:** Both embedded maps follow the same pattern — no GPX, no popup (markers navigate on click), `cooperativeGestures: true` to prevent mobile scroll-trap, animated line via `MapUtils.addJourneyLine`.
+
+- [x] **Replace the map block in `dailies.html.twig`**
+
+  Find the `{% if map_entries|length > 0 %}` block (around line 31) and replace from there to the closing `{% endif %}` and the script block:
+
+  ```twig
+  {% if map_entries|length > 0 %}
+  <div class="feed-map-wrap">
+      <div class="feed-map" id="feed-map"></div>
+      <a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
+  </div>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+  <script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+  <script>
+  var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
+
+  var feedMap = new maplibregl.Map({
+      container: 'feed-map',
+      style: MapUtils.MAP_STYLE,
+      center: [20, 20],
+      zoom: 2,
+      cooperativeGestures: true
+  });
+
+  feedMap.on('load', function () {
+      var bounds = new maplibregl.LngLatBounds();
+      var coords = [];
+
+      FEED_ENTRIES.forEach(function (entry, i) {
+          var isLatest = (i === FEED_ENTRIES.length - 1);
+          var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+          coords.push(lngLat);
+          bounds.extend(lngLat);
+
+          var el = MapUtils.createDotMarker(isLatest);
+          el.addEventListener('click', function () {
+              window.location.href = entry.url;
+          });
+
+          new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
+      });
+
+      MapUtils.addJourneyLine(feedMap, coords, 'feed-journey');
+
+      if (FEED_ENTRIES.length === 1) {
+          feedMap.jumpTo({ center: coords[0], zoom: 10 });
+      } else {
+          feedMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
+      }
+  });
+  </script>
+  {% endif %}
+  ```
+
+- [x] **Replace the map block in `home.html.twig`**
+
+  Find the `{% if map_entries|length > 0 %}` block (around line 125) and replace from there to end of `{% endblock %}`:
+
+  ```twig
+  {% if map_entries|length > 0 %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+  <script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+  <script>
+  var HOME_ENTRIES = {{ map_entries|json_encode|raw }};
+
+  var homeMap = new maplibregl.Map({
+      container: 'home-map',
+      style: MapUtils.MAP_STYLE,
+      center: [20, 20],
+      zoom: 2,
+      cooperativeGestures: true
+  });
+
+  homeMap.on('load', function () {
+      var bounds = new maplibregl.LngLatBounds();
+      var coords = [];
+
+      HOME_ENTRIES.forEach(function (entry, i) {
+          var isLatest = (i === HOME_ENTRIES.length - 1);
+          var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+          coords.push(lngLat);
+          bounds.extend(lngLat);
+
+          var el = MapUtils.createDotMarker(isLatest);
+          el.addEventListener('click', function () {
+              var card = document.getElementById('entry-' + entry.slug);
+              if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          });
+
+          new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
+      });
+
+      MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
+
+      if (HOME_ENTRIES.length === 1) {
+          homeMap.jumpTo({ center: coords[0], zoom: 10 });
+      } else {
+          homeMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
+      }
+
+      setTimeout(function () { homeMap.resize(); }, 100);
+  });
+  </script>
+  {% endif %}
+  {% endblock %}
+  ```
+
+- [x] **Verify mini-map at `http://localhost:8081/trips/japan-korea-2026/dailies`**
+
+  - Mini-map appears above journal feed with dark vector tiles
+  - Journey line animates in
+  - Click a marker → navigates to that entry's page (not a popup)
+  - On mobile: pinch-zoom within the mini-map requires two fingers; one finger scrolls the page past it
+  - "View full map →" link works
+
+- [x] **Verify home map at `http://localhost:8081`**
+
+  - Left column sticky map shows dark vector tiles
+  - Journey line animates in
+  - Click a marker → page scrolls to the matching entry card in the right column
+  - On mobile (< 768px): map collapses to 40vh above the feed, touch-scroll works on page
+
+- [x] **Commit**
+
+  ```bash
+  git -C user add themes/intotheeast/templates/dailies.html.twig themes/intotheeast/templates/home.html.twig
+  git -C user commit -m "feat: migrate mini-map and home map to MapLibre GL"
+  ```
+
+- [x] **Final sync**
+
+  ```bash
+  make content-push
+  ```

docs/working/plans/2026-06-19-stats-redesign.md

@@ -0,0 +1,736 @@
+# Stats Redesign — Implementation Plan
+
+*Derived from spec: docs/working/specs/2026-06-19-stats-redesign.md*
+
+> **For agentic workers:** Use superpowers:subagent-driven-development to execute this plan task-by-task.
+
+**Status:** ✅ Complete (2026-06-20)
+
+**Goal:** Expand trip statistics from 4 to 6 stats (add cities visited + temperature range), add smart distance labelling (Mode A: GPX-based "km cycled" vs Mode B: entry-lat/lng "km roamed"), and add a collapsible cycling panel (only when GPX files are present) with 7 cycling-specific stats derived from GPX track data.
+
+**Architecture:** Twig server-side computation for new stats (cities, temp range, GPX detection, date_end-aware days-on-road). Client-side JS for: distance computation in both modes, GPX parsing, cycling panel population. No new pages, no Grav config changes.
+
+**Tech Stack:** Twig (Grav 2.0), vanilla JS (ES5), CSS custom properties
+
+---
+
+## Global Constraints
+
+- **ES5 JS only** — no `const`/`let`, no arrow functions `() =>`, no template literals `` ` `` — all scripts are inline Twig and run as plain `<script>` blocks
+- **CSS custom properties only** — no raw hex or pixel values; use tokens from `tokens.css`
+- **6 stats must be identical** between `stats.html.twig` and the inline stats block in `trip.html.twig` — same order, same labels, same Twig logic
+- `parseGpxFiles` function defined **once** in `trip.html.twig`; shared between distance Mode A update and cycling panel population
+- `stats.html.twig` does **not** have a cycling panel — GPX parsing there is simpler (only for distance)
+- Do **not** touch `dailies.html.twig`, `map.html.twig`, `stories.html.twig`, `entry.html.twig`, or any other template
+- Commit after each task in the `user/` sub-repo (cd to `user/` before `git add` / `git commit`)
+
+---
+
+## Reference: Existing Files
+
+- `user/themes/intotheeast/templates/stats.html.twig` — standalone stats page
+- `user/themes/intotheeast/templates/trip.html.twig` — trip page (has inline stats block + filter bar)
+- `user/themes/intotheeast/css/style.css`
+  - `.stats-grid` at line ~468: `grid-template-columns: repeat(2, 1fr)` — used by stats.html.twig
+  - `.stat-block`, `.stat-value`, `.stat-label` at lines ~475–502
+  - `.trip-stats-grid` at line ~987: `grid-template-columns: repeat(4, 1fr)` — used by trip inline block
+  - `.trip-stats-block`, `.trip-stats-note`, `.trip-stats-countries` at lines ~979–1008
+  - `.trip-stats-btn` at line ~789 — both Stats and Cycling buttons share this class
+
+---
+
+## The Six Stats (order matters — apply identically in both templates)
+
+| # | Stat | Label | Source | Notes |
+|---|---|---|---|---|
+| 1 | Days on the road | `day/days on the road` | `date_end - date_start` if `date_end` set; else `now - first entry date` | date_end-aware |
+| 2 | Entries posted | `entry/entries posted` | `all_entries\|length` | Unchanged |
+| 3 | Countries visited | `country/countries visited` | Dedup `location_country` | Unchanged |
+| 4 | Cities visited | `city/cities visited` | Dedup `location_city` | New |
+| 5 | Distance | `km cycled` (Mode A) or `km roamed` (Mode B) | GPX trackpoints (A) or entry lat/lng (B) | Label + JS value |
+| 6 | Temperature range | `°C range` | min/max `weather_temp_c` | New; value: `−2 → 28` or `18` if single; `—` if no data |
+
+**Distance stat stat-note text:**
+- Mode A (GPX): `"Distance based on GPS track data."`
+- Mode B (no GPX): `"Distance is approximate — straight lines between entry locations."`
+
+**Distance stat icon (in label, as emoji prefix):**
+- Mode A: `🚴 km cycled`
+- Mode B: `🧭 km roamed`
+
+---
+
+## GPX Parsing Algorithm (for both templates)
+
+```
+Master trackpoints = []
+for each GPX URL:
+  fetch URL → parse as XML via DOMParser
+  get all <trkpt> elements
+  for each <trkpt>:
+    lat = parseFloat(trkpt.getAttribute('lat'))
+    lon = parseFloat(trkpt.getAttribute('lon'))
+    ele = parseFloat(trkpt.querySelector('ele').textContent)  [or NaN if missing]
+    time = trkpt.querySelector('time').textContent  [ISO 8601 string]
+    push {lat, lon, ele, time} to Master
+
+Compute over Master (length n):
+  distance   = sum haversine(p[i-1], p[i]) for i=1..n-1        [km]
+  ele_gain   = sum max(0, ele[i]-ele[i-1]-1) for i=1..n-1      [m, 1m threshold]
+  ele_loss   = sum max(0, ele[i-1]-ele[i]-1) for i=1..n-1      [m, 1m threshold]
+  highest    = max(ele) across all trackpoints                    [m]
+  lowest     = min(ele) across all trackpoints                    [m]
+  dt_hrs[i]  = (Date.parse(time[i]) - Date.parse(time[i-1])) / 3600000   [hours]
+  speed[i]   = haversine(p[i-1], p[i]) / dt_hrs[i]             [km/h]
+  moving_time = sum dt_hrs[i] where speed[i] >= 1               [hours]
+  avg_speed  = distance / moving_time                            [km/h]
+  moving_time_fmt = floor(moving_time) + ':' + padded_minutes   [h:mm]
+```
+
+Skip segments where dt_hrs[i] is 0 or NaN (avoids divide-by-zero). Skip `ele` computation for trackpoints where ele is NaN.
+
+**Haversine function** (same as already used in trip.html.twig):
+```javascript
+function haversine(lat1, lng1, lat2, lng2) {
+    var R = 6371;
+    var dLat = (lat2 - lat1) * Math.PI / 180;
+    var dLng = (lng2 - lng1) * Math.PI / 180;
+    var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
+            Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
+            Math.sin(dLng/2)*Math.sin(dLng/2);
+    return R * 2 * Math.asin(Math.sqrt(a));
+}
+```
+
+---
+
+## Task 1: Update `stats.html.twig` — 6-stat grid + distance mode detection
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/stats.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css` (`.stats-grid` only)
+
+**What to build:**
+
+### Twig changes in stats.html.twig
+
+The trip page is `page.parent()`. Add after the existing Twig computation block (after the `gps_points` collection loop):
+
+**1. Date-end-aware days on road:**
+
+Replace the existing `first_ts`/`days_on_road` block with:
+```twig
+{% set trip_page = page.parent() %}
+{% set days_on_road = 0 %}
+{% if trip_page.header.date_end is not empty %}
+    {# Past trip: use declared end date #}
+    {% set start_ts = trip_page.header.date_start|date('U') %}
+    {% set end_ts = trip_page.header.date_end|date('U') %}
+    {% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
+{% else %}
+    {# Active trip: first entry to now #}
+    {% set first_ts = null %}
+    {% for entry in all_entries %}
+        {% set ts = entry.date|date('U') %}
+        {% if first_ts is null or ts < first_ts %}{% set first_ts = ts %}{% endif %}
+    {% endfor %}
+    {% if first_ts is not null %}
+        {% set diff_seconds = "now"|date('U') - first_ts %}
+        {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
+        {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
+    {% endif %}
+{% endif %}
+```
+
+**2. Cities dedup** (add after country dedup block, same pattern):
+```twig
+{% set seen_city_lower = [] %}
+{% set city_display = [] %}
+{% for entry in all_entries %}
+    {% if entry.header.location_city is not empty %}
+        {% set lower = entry.header.location_city|trim|lower %}
+        {% if lower not in seen_city_lower %}
+            {% set seen_city_lower = seen_city_lower|merge([lower]) %}
+            {% set city_display = city_display|merge([entry.header.location_city|trim]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+```
+
+**3. Temperature range** (add after cities block):
+```twig
+{% set temp_min = null %}
+{% set temp_max = null %}
+{% for entry in all_entries %}
+    {% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
+        {% set t = entry.header.weather_temp_c %}
+        {% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
+        {% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% endif %}
+    {% endif %}
+{% endfor %}
+```
+
+**4. GPX detection** (add after gps_points collection):
+```twig
+{% set gpx_urls = [] %}
+{% for name, media in trip_page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
+    {% endif %}
+{% endfor %}
+{% set has_gpx = gpx_urls|length > 0 %}
+```
+
+### HTML changes in stats.html.twig
+
+Replace the current 4-stat grid with a 6-stat grid in this order:
+
+```twig
+<div class="stats-grid">
+    <div class="stat-block">
+        <span class="stat-value">{{ days_on_road }}</span>
+        <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
+    </div>
+    <div class="stat-block">
+        <span class="stat-value">{{ entry_count }}</span>
+        <span class="stat-label">{{ entry_count == 1 ? 'entry' : 'entries' }} posted</span>
+    </div>
+    <div class="stat-block">
+        <span class="stat-value">{{ country_display|length }}</span>
+        <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
+    </div>
+    <div class="stat-block">
+        <span class="stat-value">{{ city_display|length }}</span>
+        <span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
+    </div>
+    <div class="stat-block">
+        <span class="stat-value" id="stat-distance">—</span>
+        <span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
+    </div>
+    <div class="stat-block">
+        {% if temp_min is not null %}
+        <span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
+        {% else %}
+        <span class="stat-value">—</span>
+        {% endif %}
+        <span class="stat-label">°C range</span>
+    </div>
+</div>
+```
+
+Update the stats note (below the countries list) to be mode-sensitive:
+```twig
+<p class="stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
+```
+
+### JS changes in stats.html.twig
+
+Replace the existing haversine/distance script entirely with mode-aware logic:
+
+```javascript
+<script>
+var GPS_POINTS = {{ gps_points|json_encode|raw }};
+var GPX_URLS = {{ gpx_urls|json_encode|raw }};
+
+function haversine(lat1, lng1, lat2, lng2) {
+    var R = 6371;
+    var dLat = (lat2 - lat1) * Math.PI / 180;
+    var dLng = (lng2 - lng1) * Math.PI / 180;
+    var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
+            Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
+            Math.sin(dLng/2)*Math.sin(dLng/2);
+    return R * 2 * Math.asin(Math.sqrt(a));
+}
+
+var distEl = document.getElementById('stat-distance');
+
+if (GPX_URLS.length > 0) {
+    // Mode A: sum haversine between all GPX trackpoints
+    var pending = GPX_URLS.length;
+    var masterPts = [];
+    GPX_URLS.forEach(function(url) {
+        fetch(url)
+            .then(function(r) { return r.text(); })
+            .then(function(text) {
+                var xml = new DOMParser().parseFromString(text, 'text/xml');
+                var trkpts = xml.querySelectorAll('trkpt');
+                trkpts.forEach(function(pt) {
+                    masterPts.push({
+                        lat: parseFloat(pt.getAttribute('lat')),
+                        lon: parseFloat(pt.getAttribute('lon'))
+                    });
+                });
+                pending--;
+                if (pending === 0) {
+                    var total = 0;
+                    for (var i = 1; i < masterPts.length; i++) {
+                        total += haversine(masterPts[i-1].lat, masterPts[i-1].lon,
+                                           masterPts[i].lat, masterPts[i].lon);
+                    }
+                    distEl.textContent = masterPts.length < 2 ? '—' : Math.round(total).toLocaleString();
+                }
+            })
+            .catch(function(err) { console.warn('GPX load failed:', url, err); pending--; });
+    });
+} else {
+    // Mode B: sum haversine between consecutive entry lat/lng points
+    var total = 0;
+    for (var i = 1; i < GPS_POINTS.length; i++) {
+        total += haversine(
+            parseFloat(GPS_POINTS[i-1][0]), parseFloat(GPS_POINTS[i-1][1]),
+            parseFloat(GPS_POINTS[i][0]), parseFloat(GPS_POINTS[i][1])
+        );
+    }
+    distEl.textContent = GPS_POINTS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
+}
+</script>
+```
+
+### CSS change in style.css
+
+Update `.stats-grid` from 2 to 3 columns:
+```css
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    margin-bottom: var(--space-8);
+}
+```
+
+Keep the mobile breakpoint if one exists; add one if not:
+```css
+@media (max-width: 600px) {
+    .stats-grid { grid-template-columns: repeat(2, 1fr); }
+}
+```
+
+### Commit
+
+```bash
+cd user && git add themes/intotheeast/templates/stats.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: expand stats page to 6 stats — cities, temp range, distance mode detection"
+```
+
+---
+
+## Task 2: Update `trip.html.twig` — inline stats + cycling panel
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+
+**What to build:**
+
+### Twig changes in trip.html.twig
+
+Add after the existing `{% set story_count %}` line (line ~19), mirroring Task 1's logic but using `page` directly (not `page.parent()`):
+
+**1. Date-end-aware days on road** — replace the existing `days_on_road` block:
+```twig
+{% set days_on_road = 0 %}
+{% if page.header.date_end is not empty %}
+    {% set start_ts = page.header.date_start|date('U') %}
+    {% set end_ts = page.header.date_end|date('U') %}
+    {% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
+{% else %}
+    {% set first_ts = null %}
+    {% for entry in journal_entries %}
+        {% set ts = entry.date|date('U') %}
+        {% if first_ts is null or ts < first_ts %}{% set first_ts = ts %}{% endif %}
+    {% endfor %}
+    {% if first_ts is not null %}
+        {% set diff_seconds = "now"|date('U') - first_ts %}
+        {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
+        {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
+    {% endif %}
+{% endif %}
+```
+
+**2. Cities dedup** (add after country dedup block):
+```twig
+{% set seen_city_lower = [] %}
+{% set city_display = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.location_city is not empty %}
+        {% set lower = entry.header.location_city|trim|lower %}
+        {% if lower not in seen_city_lower %}
+            {% set seen_city_lower = seen_city_lower|merge([lower]) %}
+            {% set city_display = city_display|merge([entry.header.location_city|trim]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+```
+
+**3. Temperature range** (add after cities block):
+```twig
+{% set temp_min = null %}
+{% set temp_max = null %}
+{% for entry in journal_entries %}
+    {% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
+        {% set t = entry.header.weather_temp_c %}
+        {% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
+        {% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% endif %}
+    {% endif %}
+{% endfor %}
+```
+
+**4. GPX detection** — `gpx_urls` already computed in trip.html.twig; add:
+```twig
+{% set has_gpx = gpx_urls|length > 0 %}
+```
+
+### HTML changes in trip.html.twig
+
+**A. Update filter bar** — add Cycling button next to Stats button (hidden if no GPX):
+
+Find the current filter bar:
+```twig
+<div class="trip-filter-bar">
+    <div class="trip-filter-group">
+        <button class="trip-filter-btn is-active" data-filter="all">All content</button>
+        <button class="trip-filter-btn" data-filter="journal">Journal</button>
+        <button class="trip-filter-btn" data-filter="story">Stories</button>
+    </div>
+    <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
+</div>
+```
+
+Replace with:
+```twig
+<div class="trip-filter-bar">
+    <div class="trip-filter-group">
+        <button class="trip-filter-btn is-active" data-filter="all">All content</button>
+        <button class="trip-filter-btn" data-filter="journal">Journal</button>
+        <button class="trip-filter-btn" data-filter="story">Stories</button>
+    </div>
+    <div class="trip-filter-group">
+        <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
+        {% if has_gpx %}
+        <button class="trip-stats-btn" id="trip-cycling-toggle">Cycling</button>
+        {% endif %}
+    </div>
+</div>
+```
+
+**B. Update inline stats block** — expand from 4 to 6 stats (same order as Task 1):
+
+Replace the current `.trip-stats-grid` content with:
+```twig
+<div id="trip-stats-block" class="trip-stats-block" style="display:none">
+    <div class="trip-stats-grid">
+        <div class="stat-block">
+            <span class="stat-value">{{ days_on_road }}</span>
+            <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value">{{ journal_count }}</span>
+            <span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value">{{ country_display|length }}</span>
+            <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value">{{ city_display|length }}</span>
+            <span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="stat-distance">—</span>
+            <span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
+        </div>
+        <div class="stat-block">
+            {% if temp_min is not null %}
+            <span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
+            {% else %}
+            <span class="stat-value">—</span>
+            {% endif %}
+            <span class="stat-label">°C range</span>
+        </div>
+    </div>
+    {% if country_display|length > 0 %}
+    <p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
+    {% endif %}
+    <p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
+</div>
+```
+
+**C. Add cycling panel** — immediately after the inline stats block, before `<div class="feed">`:
+```twig
+{% if has_gpx %}
+<div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
+    <div class="trip-cycling-header">
+        <span class="trip-cycling-icon">🚴</span>
+        <span class="trip-cycling-title">Cycling Stats</span>
+    </div>
+    <div class="trip-cycling-grid">
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-distance">—</span>
+            <span class="stat-label">km distance</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-ele-gain">—</span>
+            <span class="stat-label">m ↑ gain</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-ele-loss">—</span>
+            <span class="stat-label">m ↓ loss</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-highest">—</span>
+            <span class="stat-label">m highest</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-lowest">—</span>
+            <span class="stat-label">m lowest</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-moving-time">—</span>
+            <span class="stat-label">moving time</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="cyc-avg-speed">—</span>
+            <span class="stat-label">km/h avg speed</span>
+        </div>
+    </div>
+</div>
+{% endif %}
+```
+
+### JS changes in trip.html.twig
+
+The existing script block has: map setup, GPX route drawing for map, filter bar JS, stats distance + toggle JS.
+
+Make the following JS changes:
+
+**1. Replace the existing `STATS_GPS` + distance IIFE** with a unified GPX/distance function (place after the existing map + filter bar IIFE, before `</script>`):
+
+```javascript
+var STATS_GPS = {{ gps_points|json_encode|raw }};
+var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
+
+function haversineKm(lat1, lng1, lat2, lng2) {
+    var R = 6371;
+    var dLat = (lat2 - lat1) * Math.PI / 180;
+    var dLng = (lng2 - lng1) * Math.PI / 180;
+    var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
+            Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
+            Math.sin(dLng/2)*Math.sin(dLng/2);
+    return R * 2 * Math.asin(Math.sqrt(a));
+}
+
+function parseGpxFiles(urls, callback) {
+    var pending = urls.length;
+    var masterPts = [];
+    if (pending === 0) { callback({ error: 'no files' }); return; }
+    urls.forEach(function(url) {
+        fetch(url)
+            .then(function(r) { return r.text(); })
+            .then(function(text) {
+                var xml = new DOMParser().parseFromString(text, 'text/xml');
+                var trkpts = xml.querySelectorAll('trkpt');
+                trkpts.forEach(function(pt) {
+                    var eleEl = pt.querySelector('ele');
+                    var timeEl = pt.querySelector('time');
+                    masterPts.push({
+                        lat: parseFloat(pt.getAttribute('lat')),
+                        lon: parseFloat(pt.getAttribute('lon')),
+                        ele: eleEl ? parseFloat(eleEl.textContent) : NaN,
+                        time: timeEl ? timeEl.textContent : null
+                    });
+                });
+                pending--;
+                if (pending === 0) { computeAndCallback(); }
+            })
+            .catch(function(err) {
+                console.warn('GPX load failed:', url, err);
+                pending--;
+                if (pending === 0) { computeAndCallback(); }
+            });
+    });
+
+    function computeAndCallback() {
+        var n = masterPts.length;
+        if (n < 2) { callback({ distance: 0 }); return; }
+        var distance = 0, eleGain = 0, eleLoss = 0;
+        var highest = NaN, lowest = NaN, movingTime = 0;
+        for (var i = 1; i < n; i++) {
+            var p0 = masterPts[i-1], p1 = masterPts[i];
+            var d = haversineKm(p0.lat, p0.lon, p1.lat, p1.lon);
+            distance += d;
+            if (!isNaN(p0.ele) && !isNaN(p1.ele)) {
+                var dEle = p1.ele - p0.ele;
+                if (dEle > 1) eleGain += dEle - 1;
+                else if (dEle < -1) eleLoss += (-dEle) - 1;
+                if (isNaN(highest) || p1.ele > highest) highest = p1.ele;
+                if (isNaN(lowest)  || p1.ele < lowest)  lowest  = p1.ele;
+            }
+            if (p0.time && p1.time) {
+                var dtHrs = (Date.parse(p1.time) - Date.parse(p0.time)) / 3600000;
+                if (dtHrs > 0) {
+                    var speed = d / dtHrs;
+                    if (speed >= 1) movingTime += dtHrs;
+                }
+            }
+        }
+        // include first point in elevation range
+        if (!isNaN(masterPts[0].ele)) {
+            if (isNaN(highest) || masterPts[0].ele > highest) highest = masterPts[0].ele;
+            if (isNaN(lowest)  || masterPts[0].ele < lowest)  lowest  = masterPts[0].ele;
+        }
+        var avgSpeed = movingTime > 0 ? distance / movingTime : 0;
+        var movHours = Math.floor(movingTime);
+        var movMins  = Math.round((movingTime - movHours) * 60);
+        if (movMins === 60) { movHours++; movMins = 0; }
+        callback({
+            distance:    distance,
+            eleGain:     eleGain,
+            eleLoss:     eleLoss,
+            highest:     highest,
+            lowest:      lowest,
+            movingTime:  movHours + ':' + (movMins < 10 ? '0' : '') + movMins,
+            avgSpeed:    avgSpeed
+        });
+    }
+}
+
+(function() {
+    var distEl = document.getElementById('stat-distance');
+
+    if (HAS_GPX) {
+        parseGpxFiles(GPX_URLS, function(result) {
+            // Mode A: update distance stat
+            if (distEl) {
+                distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
+            }
+            // Populate cycling panel
+            function setText(id, val) {
+                var el = document.getElementById(id);
+                if (el) el.textContent = val;
+            }
+            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
+            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
+            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
+            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
+            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
+            setText('cyc-moving-time', result.movingTime || '—');
+            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
+        });
+    } else {
+        // Mode B: haversine between entry points
+        var total = 0;
+        for (var i = 1; i < STATS_GPS.length; i++) {
+            total += haversineKm(
+                parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
+                parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
+            );
+        }
+        if (distEl) {
+            distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
+        }
+    }
+
+    // Stats toggle
+    var statsToggle = document.getElementById('trip-stats-toggle');
+    var statsBlock  = document.getElementById('trip-stats-block');
+    if (statsToggle && statsBlock) {
+        statsToggle.addEventListener('click', function() {
+            var isOpen = statsBlock.style.display !== 'none';
+            statsBlock.style.display = isOpen ? 'none' : '';
+            statsToggle.classList.toggle('is-active', !isOpen);
+        });
+    }
+
+    // Cycling toggle (only present when has_gpx)
+    var cycToggle = document.getElementById('trip-cycling-toggle');
+    var cycBlock  = document.getElementById('trip-cycling-block');
+    if (cycToggle && cycBlock) {
+        cycToggle.addEventListener('click', function() {
+            var isOpen = cycBlock.style.display !== 'none';
+            cycBlock.style.display = isOpen ? 'none' : '';
+            cycToggle.classList.toggle('is-active', !isOpen);
+        });
+    }
+})();
+```
+
+**Important:** Remove the old `STATS_GPS` declaration and the old stats IIFE that's currently in the template (the one starting with `var STATS_GPS = ...`), replacing it entirely with the new unified block above. The `haversine` function used by `MapUtils.addJourneyLine` is in `maplibre-utils.js` — the new `haversineKm` function in this script is a local copy for stats; do not remove any map-related code.
+
+### CSS changes in style.css
+
+**1. Update `.trip-stats-grid`** from 4 to 3 columns (3 columns × 2 rows = 6 stats):
+```css
+.trip-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+```
+
+**2. Add cycling panel styles** (after the existing `.trip-stats-note` rule):
+```css
+/* ── Trip page cycling panel ─────────────────────────────────────────────────── */
+
+.trip-cycling-block {
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-6);
+    margin-bottom: var(--space-6);
+}
+
+.trip-cycling-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+}
+
+.trip-cycling-icon {
+    font-size: var(--text-xl);
+}
+
+.trip-cycling-title {
+    font-family: var(--font-display);
+    font-size: var(--text-lg);
+    color: var(--color-ink);
+}
+
+.trip-cycling-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-4);
+}
+
+@media (max-width: 600px) {
+    .trip-cycling-grid { grid-template-columns: repeat(2, 1fr); }
+}
+```
+
+### Commit
+
+```bash
+cd user && git add themes/intotheeast/templates/trip.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: expand trip inline stats to 6 stats + add cycling panel with GPX parsing"
+```
+
+---
+
+## Self-Review Checklist
+
+- [x] Both templates show exactly 6 stats in the same order (days, entries, countries, cities, distance, temp range)
+- [x] Distance label is server-side conditional: "🚴 km cycled" (GPX) vs "🧭 km roamed" (no GPX)
+- [x] Stats note text is conditional matching the mode
+- [x] GPX Mode A: fetches all GPX files, sums trackpoint haversine distances
+- [x] GPX Mode B: sums haversine between consecutive entry lat/lng points
+- [x] Cycling button only rendered when `has_gpx` is true
+- [x] Cycling panel hidden by default; toggled by cycling button
+- [x] Stats toggle and Cycling toggle are independent (opening one doesn't close the other)
+- [x] `parseGpxFiles` called once; results used for both distance stat and cycling panel
+- [x] Old haversine function and STATS_GPS IIFE removed and replaced in trip.html.twig
+- [x] `.stats-grid` updated to 3 columns
+- [x] `.trip-stats-grid` updated to 3 columns
+- [x] Cycling panel CSS added
+- [x] No raw hex/pixel values in CSS
+- [x] No ES6 syntax in inline JS

docs/working/plans/2026-06-19-trip-entity.md

@@ -0,0 +1,538 @@
+# Trip Entity Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` to implement this plan task-by-task.
+
+**Goal:** Restructure the site around a Trip entity — tracker/map/stats/stories become children of `/trips/japan-korea-2026/`, GPX route files live as media on the trip page, and `site.yaml` holds an `active_trip` slug so the nav can switch trips via config.
+
+**Architecture:** Trip = a Grav page (`trip.html.twig`) at `/trips/<slug>/`. Map/stats templates find the tracker via `page.parent().route ~ '/tracker'` instead of the hardcoded `/tracker` path. Leaflet-gpx (CDN) loads all `*.gpx` media files from the trip page. A `trips.html.twig` listing page provides the multi-trip root. Stories is stubbed with a placeholder template.
+
+**Tech Stack:** Grav CMS 1.7/2.0, Twig, Leaflet.js, leaflet-gpx (CDN, vanilla JS — consistent with existing inline JS pattern)
+
+## Global Constraints
+
+- All content/theme edits go in `user/` — commit with `git -C user`, not main-repo git
+- Entry URLs change: `/tracker/<slug>` → `/trips/japan-korea-2026/tracker/<slug>` — acceptable pre-launch
+- `make test-post` (6/6) and `make test-ui` (25/25) must pass after every task
+- No new JS framework dependencies; leaflet-gpx is 3KB vanilla JS
+- `user/config/media.yaml` must whitelist `.gpx` so Grav serves it as a file
+- The `02.post/post-form.md` `pageconfig.parent` must stay in sync with the tracker path
+
+---
+
+### Task 1: Restructure pages under `/trips/`
+
+**Files:**
+- Create: `user/pages/01.trips/trips.md`
+- Create: `user/pages/01.trips/japan-korea-2026/trip.md`
+- Create: `user/pages/01.trips/japan-korea-2026/01.tracker/tracker.md` (copy from `user/pages/01.tracker/tracker.md`, no content change)
+- Move: all `*.entry/` folders from `user/pages/01.tracker/` → `user/pages/01.trips/japan-korea-2026/01.tracker/`
+- Create: `user/pages/01.trips/japan-korea-2026/02.map/map.md` (copy from `user/pages/03.map/map.md`)
+- Create: `user/pages/01.trips/japan-korea-2026/03.stats/stats.md` (copy from `user/pages/04.stats/stats.md`)
+- Create: `user/pages/01.trips/japan-korea-2026/04.stories/stories.md`
+- Delete: `user/pages/01.tracker/`, `user/pages/03.map/`, `user/pages/04.stats/`
+- Modify: `user/config/site.yaml` — add `active_trip: japan-korea-2026`
+- Modify (create if absent): `user/config/media.yaml` — whitelist GPX
+
+- [ ] **Step 1: Verify current structure before touching anything**
+
+```bash
+find user/pages -name "*.md" | sort
+```
+Expected: entries under `01.tracker/`, map at `03.map/map.md`, stats at `04.stats/stats.md`.
+
+- [ ] **Step 2: Create trips hierarchy**
+
+```bash
+mkdir -p user/pages/01.trips/japan-korea-2026/01.tracker
+mkdir -p user/pages/01.trips/japan-korea-2026/02.map
+mkdir -p user/pages/01.trips/japan-korea-2026/03.stats
+mkdir -p user/pages/01.trips/japan-korea-2026/04.stories
+```
+
+- [ ] **Step 3: Write `trips.md`**
+
+`user/pages/01.trips/trips.md`:
+```yaml
+---
+title: Trips
+template: trips
+content:
+    items: '@self.children'
+    order:
+        by: date
+        dir: desc
+---
+```
+
+- [ ] **Step 4: Write `trip.md`**
+
+`user/pages/01.trips/japan-korea-2026/trip.md`:
+```yaml
+---
+title: 'Japan & Korea 2026'
+template: trip
+date: '2026-06-17'
+date_start: '2026-06-17'
+date_end: ''
+cover_image: ''
+content:
+    items: '@self.children'
+---
+```
+
+- [ ] **Step 5: Copy tracker.md, move entries**
+
+```bash
+cp user/pages/01.tracker/tracker.md user/pages/01.trips/japan-korea-2026/01.tracker/tracker.md
+mv user/pages/01.tracker/*.entry user/pages/01.trips/japan-korea-2026/01.tracker/
+```
+
+- [ ] **Step 6: Copy map.md and stats.md**
+
+```bash
+cp user/pages/03.map/map.md user/pages/01.trips/japan-korea-2026/02.map/map.md
+cp user/pages/04.stats/stats.md user/pages/01.trips/japan-korea-2026/03.stats/stats.md
+```
+
+- [ ] **Step 7: Write stories stub**
+
+`user/pages/01.trips/japan-korea-2026/04.stories/stories.md`:
+```yaml
+---
+title: Stories
+template: stories
+published: true
+---
+```
+
+- [ ] **Step 8: Delete old top-level pages**
+
+```bash
+rm -rf user/pages/01.tracker user/pages/03.map user/pages/04.stats
+```
+
+- [ ] **Step 9: Add `active_trip` to site.yaml**
+
+Add to `user/config/site.yaml`:
+```yaml
+active_trip: japan-korea-2026
+```
+
+- [ ] **Step 10: Whitelist GPX in media.yaml**
+
+`user/config/media.yaml` (create if absent):
+```yaml
+gpx:
+    type: file
+    extensions: ['gpx']
+    mime: application/gpx+xml
+```
+
+- [ ] **Step 11: Verify pages load at new URLs**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/tracker
+# Expected: 200
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/map
+# Expected: 200
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/stats
+# Expected: 200
+```
+
+- [ ] **Step 12: Commit**
+
+```bash
+git -C user add pages/01.trips config/site.yaml config/media.yaml
+git -C user rm -r --cached pages/01.tracker pages/03.map pages/04.stats
+git -C user commit -m "feat: restructure pages under trips/japan-korea-2026 entity"
+```
+
+---
+
+### Task 2: Update templates for trip-relative paths + new trip/trips/stories templates
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/map.html.twig` — change hardcoded `/tracker` path
+- Modify: `user/themes/intotheeast/templates/stats.html.twig` — same
+- Modify: `user/themes/intotheeast/templates/partials/base.html.twig` — nav uses `active_trip`
+- Create: `user/themes/intotheeast/templates/trip.html.twig`
+- Create: `user/themes/intotheeast/templates/trips.html.twig`
+- Create: `user/themes/intotheeast/templates/stories.html.twig`
+
+**Interfaces:**
+- Consumes: `config.site.active_trip` from site.yaml (set in Task 1)
+- Produces: map/stats find entries via `page.parent().route ~ '/tracker'`
+
+- [ ] **Step 1: Fix `map.html.twig` — tracker path**
+
+Replace:
+```twig
+{% set tracker_page = grav.pages.find('/tracker') %}
+{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
+```
+With:
+```twig
+{% set tracker_page = grav.pages.find(page.parent().route ~ '/tracker') %}
+{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
+```
+
+- [ ] **Step 2: Fix `stats.html.twig` — tracker path**
+
+Same replacement as Step 1 (identical pattern in stats.html.twig).
+
+- [ ] **Step 3: Update `base.html.twig` nav**
+
+Replace hardcoded nav href values with `active_trip`-driven paths. The pattern in base.html.twig currently sets hrefs to `/tracker`, `/map`, `/stats`. Replace with:
+
+```twig
+{% set active_trip = config.site.active_trip %}
+{% set trip_base = '/trips/' ~ active_trip %}
+```
+
+Nav links become:
+- Journal: `{{ trip_base }}/tracker`
+- Map: `{{ trip_base }}/map`
+- Stats: `{{ trip_base }}/stats`
+
+Active state detection: replace `page.url starts with '/tracker'` checks with `page.url starts with trip_base ~ '/tracker'` (and similarly for map/stats).
+
+- [ ] **Step 4: Create `trip.html.twig`**
+
+`user/themes/intotheeast/templates/trip.html.twig`:
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set tracker_page = grav.pages.find(page.route ~ '/tracker') %}
+{% set entries = tracker_page ? tracker_page.children.published() : [] %}
+
+<div class="trip-hero">
+    <h1>{{ page.title }}</h1>
+    {% if page.header.date_start %}
+    <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') }}{% endif %}
+    </p>
+    {% endif %}
+</div>
+
+<nav class="trip-nav">
+    <a href="{{ page.route }}/tracker">Journal</a>
+    <a href="{{ page.route }}/map">Map</a>
+    <a href="{{ page.route }}/stats">Stats</a>
+    <a href="{{ page.route }}/stories">Stories</a>
+</nav>
+
+{% if entries|length > 0 %}
+<section class="trip-recent">
+    <h2>Recent entries</h2>
+    {% for entry in entries|slice(0, 3) %}
+    <a href="{{ entry.url }}">
+        <span>{{ entry.date|date('d M Y') }}</span>
+        {{ entry.title }}
+        {% if entry.header.location_city %} · {{ entry.header.location_city }}{% endif %}
+    </a>
+    {% endfor %}
+</section>
+{% endif %}
+{% endblock %}
+```
+
+- [ ] **Step 5: Create `trips.html.twig`**
+
+`user/themes/intotheeast/templates/trips.html.twig`:
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+<h1>{{ page.title }}</h1>
+{% set trips = page.children.published() %}
+{% if trips|length == 0 %}
+<p>No trips yet.</p>
+{% else %}
+<ul class="trips-list">
+{% for trip in trips %}
+    <li>
+        <a href="{{ trip.url }}">
+            <strong>{{ trip.title }}</strong>
+            {% if trip.header.date_start %}
+            <span>{{ trip.header.date_start|date('d M Y') }}</span>
+            {% endif %}
+        </a>
+    </li>
+{% endfor %}
+</ul>
+{% endif %}
+{% endblock %}
+```
+
+- [ ] **Step 6: Create `stories.html.twig` stub**
+
+`user/themes/intotheeast/templates/stories.html.twig`:
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+<h1>{{ page.title }}</h1>
+<p>Stories coming soon.</p>
+{% endblock %}
+```
+
+- [ ] **Step 7: Verify templates render**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026
+# Expected: 200
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips
+# Expected: 200
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/stories
+# Expected: 200
+```
+
+Check nav links resolve correctly on tracker/map/stats pages.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/
+git -C user commit -m "feat: add trip/trips/stories templates, update nav and map/stats to use trip-relative paths"
+```
+
+---
+
+### Task 3: Add GPX route support to map template
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/map.html.twig`
+
+**Interfaces:**
+- Consumes: `*.gpx` files uploaded as media to the trip page (`page.parent()`)
+- Produces: GPX tracks rendered as colored polylines on the Leaflet map, underneath entry pins
+
+- [ ] **Step 1: Add leaflet-gpx script tag**
+
+In `map.html.twig`, after the existing Leaflet script tag, add:
+```html
+<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
+```
+
+- [ ] **Step 2: Collect GPX URLs from trip media**
+
+After the `{% set trip_page = page.parent() %}` line (add this at the top of the template, alongside the tracker_page lookup), add:
+
+```twig
+{% set gpx_urls = [] %}
+{% for name, media in trip_page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([media.url]) %}
+    {% endif %}
+{% endfor %}
+```
+
+- [ ] **Step 3: Pass GPX URLs to JavaScript**
+
+In the `<script>` block, after the map is initialized and before the entry markers loop, add:
+
+```javascript
+// GPX route tracks
+const gpxUrls = {{ gpx_urls|json_encode|raw }};
+gpxUrls.forEach(url => {
+    new L.GPX(url, {
+        async: true,
+        polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.7 },
+        marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
+    }).addTo(map);
+});
+```
+
+Disabling start/end markers keeps the map clean — the entry pins already mark key stops.
+
+- [ ] **Step 4: Test with a sample GPX**
+
+Create a minimal 3-point GPX file to test without a real Komoot export:
+
+```xml
+<?xml version="1.0"?>
+<gpx version="1.1" creator="test">
+  <trk><trkseg>
+    <trkpt lat="35.6762" lon="139.6503"><time>2026-03-25T10:00:00Z</time></trkpt>
+    <trkpt lat="35.0116" lon="135.7681"><time>2026-03-27T10:00:00Z</time></trkpt>
+    <trkpt lat="37.5665" lon="126.9780"><time>2026-04-01T10:00:00Z</time></trkpt>
+  </trkseg></trk>
+</gpx>
+```
+
+Upload via Grav Admin to the trip page media, then verify the map at `/trips/japan-korea-2026/map` renders the polyline. Remove the test file after verification.
+
+- [ ] **Step 5: Verify map still works without GPX**
+
+Confirm map renders normally when no `.gpx` files are present (gpxUrls = []).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/map.html.twig
+git -C user commit -m "feat: add GPX route rendering to trip map via leaflet-gpx"
+```
+
+---
+
+### Task 4: Update post form, Makefile, demo content, and tests
+
+**Files:**
+- Modify: `user/pages/02.post/post-form.md` — `pageconfig.parent`
+- Modify: `Makefile` — `demo-load` and `demo-reset` paths
+- Modify: `scripts/test-post.sh` — `TRACKER` variable
+- Modify: `scripts/test-form-config.sh` — expected parent value
+- Modify: `tests/ui/tracker.spec.js` — any hardcoded `/tracker` URL references
+- Modify: `user/docs/demo/` — move demo entries to new path structure
+
+- [ ] **Step 1: Update post form parent**
+
+In `user/pages/02.post/post-form.md`, change:
+```yaml
+pageconfig:
+    parent: '/tracker'
+```
+To:
+```yaml
+pageconfig:
+    parent: '/trips/japan-korea-2026/tracker'
+```
+
+- [ ] **Step 2: Update demo content structure**
+
+```bash
+mkdir -p user/docs/demo/trips/japan-korea-2026/tracker
+mv user/docs/demo/tracker/* user/docs/demo/trips/japan-korea-2026/tracker/
+rmdir user/docs/demo/tracker
+```
+
+- [ ] **Step 3: Update Makefile demo targets**
+
+In `Makefile`, update `demo-load` and `demo-reset`:
+
+```makefile
+demo-load:
+	cp -r user/docs/demo/trips/japan-korea-2026/tracker/. user/pages/01.trips/japan-korea-2026/01.tracker/
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+
+demo-reset:
+	@for dir in user/docs/demo/trips/japan-korea-2026/tracker/*/; do \
+		folder=$$(basename "$$dir"); \
+		rm -rf "user/pages/01.trips/japan-korea-2026/01.tracker/$$folder"; \
+	done
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+- [ ] **Step 4: Update `test-post.sh` TRACKER path**
+
+Find the line setting `TRACKER=` in `scripts/test-post.sh` and change it to:
+```bash
+TRACKER="user/pages/01.trips/japan-korea-2026/01.tracker"
+```
+
+- [ ] **Step 5: Update `test-form-config.sh` expected parent**
+
+Find the assertion that checks `parent: '/tracker'` and update to check for `parent: '/trips/japan-korea-2026/tracker'`.
+
+- [ ] **Step 6: Check Playwright tests for hardcoded paths**
+
+Search `tests/ui/` for any hardcoded `/tracker` URL references:
+```bash
+grep -rn "tracker\|/map\|/stats" tests/ui/
+```
+
+Update any that reference the old paths to use the new trip-scoped paths.
+
+- [ ] **Step 7: Run full test suite**
+
+```bash
+make test-config && make test-post && make test-ui
+```
+Expected: all pass (14/14, 6/6, 25/25).
+
+- [ ] **Step 8: Commit**
+
+```bash
+# Main repo changes (Makefile + test scripts)
+git add Makefile scripts/test-post.sh scripts/test-form-config.sh tests/
+git commit -m "fix: update paths for trips/japan-korea-2026 restructure"
+
+# User repo changes
+git -C user add pages/02.post/post-form.md docs/demo/
+git -C user commit -m "fix: update post form parent and demo content paths for trip structure"
+```
+
+---
+
+### Task 5: Admin blueprint for trip page type
+
+**Files:**
+- Create: `user/themes/intotheeast/blueprints/trip.yaml`
+
+**Interfaces:**
+- Produces: "Trip" tab in Grav Admin when editing the trip page, with date range and cover image fields
+
+- [ ] **Step 1: Create `trip.yaml` blueprint**
+
+`user/themes/intotheeast/blueprints/trip.yaml`:
+```yaml
+title: 'Trip'
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      type: tabs
+      active: 1
+      fields:
+        trip:
+          type: tab
+          title: Trip
+          fields:
+            header.date_start:
+              type: date
+              label: 'Start Date'
+              placeholder: '2026-06-17'
+              help: 'First day of the trip'
+
+            header.date_end:
+              type: date
+              label: 'End Date'
+              placeholder: ''
+              help: 'Leave blank if trip is ongoing'
+
+            header.cover_image:
+              type: text
+              label: 'Cover Image Filename'
+              placeholder: 'cover.jpg'
+              help: 'Used in the trips listing page'
+```
+
+- [ ] **Step 2: Verify blueprint appears in Admin**
+
+Open Grav Admin → Pages → Trips → Japan & Korea 2026 → Edit. Confirm the "Trip" tab appears with start date, end date, cover image fields.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add themes/intotheeast/blueprints/trip.yaml
+git -C user commit -m "feat: add Admin blueprint for trip page type"
+```
+
+---
+
+## Verification
+
+After all tasks, run end-to-end check:
+
+1. `make test-config && make test-post && make test-ui` — all must pass
+2. Navigate to `http://localhost:8081/trips/japan-korea-2026/tracker` — entries display in date order
+3. Navigate to `http://localhost:8081/trips/japan-korea-2026/map` — entry pins render, GPX polyline renders if a `.gpx` file is present on the trip page
+4. Navigate to `http://localhost:8081/trips/japan-korea-2026/stats` — stats compute correctly
+5. Navigate to `http://localhost:8081/trips` — trip listing shows Japan & Korea 2026
+6. Submit a post via `/post` — new entry appears under `/trips/japan-korea-2026/tracker`
+7. Grav Admin: edit the trip page → "Trip" tab visible with date fields

docs/working/plans/2026-06-19-trip-page-filter-bar.md

@@ -0,0 +1,472 @@
+# Trip Page Filter Bar — 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:** Replace the three unstyled nav links on the trip page with an in-page filter bar (All content / Journal / Stories) and an inline Stats toggle — no page navigation needed.
+
+**Architecture:** Pure client-side. `data-type` attributes on article cards let vanilla JS show/hide by content type. Stats computation is inlined into `trip.html.twig` from `stats.html.twig`. No new files, no Grav config changes, no page navigation.
+
+**Tech Stack:** Twig (Grav 2.0), vanilla JS (ES5), CSS custom properties
+
+## Global Constraints
+
+- CSS variables only — no raw hex values; use tokens from `tokens.css`
+- ES5 JS — no arrow functions, no `const`/`let`, no template literals (inline script in Twig)
+- Touch the minimum: only `trip.html.twig` and `style.css`
+- Do not modify `stats.html.twig`, `dailies.html.twig`, or any sub-page template
+
+---
+
+### Task 1: Story card border + data-type attributes
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig:77,119`
+- Modify: `user/themes/intotheeast/css/style.css:816-819`
+
+**Interfaces:**
+- Produces: `data-type="journal"` and `data-type="story"` attributes on all article cards — consumed by Tasks 3 and 4
+
+- [ ] **Step 1: Add data-type to journal article (trip.html.twig line 77)**
+
+Find this line:
+```twig
+<article class="entry-card" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+```
+Replace with:
+```twig
+<article class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+```
+
+- [ ] **Step 2: Add data-type to story article (trip.html.twig line 119)**
+
+Find this line:
+```twig
+<article class="entry-card entry-card--story" id="entry-{{ entry.slug }}">
+```
+Replace with:
+```twig
+<article class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story">
+```
+
+- [ ] **Step 3: Replace story card border in style.css**
+
+Find the existing `.entry-card--story` rule (around line 816):
+```css
+.entry-card--story {
+    border-left: 3px solid var(--color-accent);
+    padding-left: var(--space-5);
+}
+```
+Replace with:
+```css
+.entry-card--story {
+    border: 2px solid var(--color-accent);
+    border-radius: var(--radius-md);
+    padding: var(--space-6);
+    background: var(--color-canvas);
+}
+```
+
+- [ ] **Step 4: Verify visually**
+
+Open the trip page in the browser. In DevTools:
+- Select a journal article → confirm it has `data-type="journal"`
+- Select a story article → confirm it has `data-type="story"`
+- Story cards should now appear as a boxed card with a full teal border and rounded corners instead of a left-only bar
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css
+git commit -m "feat: add data-type attributes to feed cards; restyle story card with full border"
+```
+
+---
+
+### Task 2: Filter bar markup + CSS (static, no JS yet)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig:58-62`
+- Modify: `user/themes/intotheeast/css/style.css` (append after `.home-trip-counts` block, around line 694)
+
+**Interfaces:**
+- Consumes: nothing from prior tasks (static HTML)
+- Produces: `.trip-filter-bar`, `.trip-filter-btn`, `.trip-stats-btn` CSS classes consumed by Task 3
+
+- [ ] **Step 1: Replace nav with filter bar in trip.html.twig**
+
+Find the existing nav block (lines 58–62):
+```twig
+<nav class="trip-nav">
+    <a href="{{ page.route }}/dailies">Journal</a>
+    <a href="{{ page.route }}/stats">Stats</a>
+    <a href="{{ page.route }}/stories">Stories</a>
+</nav>
+```
+Replace with:
+```twig
+<div class="trip-filter-bar">
+    <div class="trip-filter-group">
+        <button class="trip-filter-btn is-active" data-filter="all">All content</button>
+        <button class="trip-filter-btn" data-filter="journal">Journal</button>
+        <button class="trip-filter-btn" data-filter="story">Stories</button>
+    </div>
+    <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
+</div>
+```
+
+- [ ] **Step 2: Add filter bar CSS to style.css**
+
+After the `.home-trip-counts` rule (around line 694), append:
+```css
+/* ── Trip page filter bar ────────────────────────────────────────────────────── */
+
+.trip-filter-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-top: var(--space-4);
+    flex-wrap: wrap;
+}
+
+.trip-filter-group {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.trip-filter-btn,
+.trip-stats-btn {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink-muted);
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: var(--space-1) var(--space-4);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.trip-filter-btn:hover,
+.trip-stats-btn:hover {
+    color: var(--color-ink);
+    border-color: var(--color-ink-muted);
+}
+
+.trip-filter-btn.is-active,
+.trip-stats-btn.is-active {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+    background: var(--color-accent-light);
+}
+```
+
+- [ ] **Step 3: Verify visually**
+
+Open the trip page. Confirm:
+- Three filter pills (All content / Journal / Stories) and a Stats button appear below the trip title
+- "All content" pill has teal active styling
+- Other pills are muted/bordered
+- Clicking the buttons does nothing yet (no JS)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css
+git commit -m "feat: add filter bar markup and pill button styles to trip page"
+```
+
+---
+
+### Task 3: Filter JS (show/hide cards by type)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig` (append to the existing `<script>` block at the bottom, before `</script>`)
+
+**Interfaces:**
+- Consumes: `data-type` on articles (Task 1); `.trip-filter-btn`, `data-filter` (Task 2)
+- Produces: working filter interaction
+
+- [ ] **Step 1: Add an empty-state element to the feed**
+
+In `trip.html.twig`, find the closing `</div>` of the `.feed` block (after the `{% else %}` empty message). Add a hidden filter-empty message right before `</div>`:
+```twig
+        <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
+    </div>
+```
+
+The full `.feed` block close should look like:
+```twig
+        {% else %}
+            <p class="feed-empty">No entries yet. The journey is about to begin.</p>
+        {% endif %}
+        <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
+    </div>
+```
+
+- [ ] **Step 2: Append filter JS to the existing script block**
+
+In `trip.html.twig`, find the closing `</script>` tag at the bottom. Insert before it:
+```javascript
+(function() {
+    var filterBtns = document.querySelectorAll('.trip-filter-btn');
+    var cards = document.querySelectorAll('[data-type]');
+    var filterEmpty = document.getElementById('feed-filter-empty');
+
+    filterBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            filterBtns.forEach(function(b) { b.classList.remove('is-active'); });
+            btn.classList.add('is-active');
+
+            var filter = btn.getAttribute('data-filter');
+            var visible = 0;
+
+            cards.forEach(function(card) {
+                var show = filter === 'all' || card.getAttribute('data-type') === filter;
+                card.style.display = show ? '' : 'none';
+                if (show) visible++;
+            });
+
+            if (filterEmpty) {
+                if (visible === 0) {
+                    filterEmpty.textContent = filter === 'story'
+                        ? 'No stories yet for this trip.'
+                        : 'No entries yet.';
+                    filterEmpty.style.display = '';
+                } else {
+                    filterEmpty.style.display = 'none';
+                }
+            }
+        });
+    });
+})();
+```
+
+- [ ] **Step 3: Verify filter behavior**
+
+Open the trip page. With demo entries loaded (run `make demo-load` if needed):
+- Click **Journal** → only journal cards visible, story cards hidden
+- Click **Stories** → only story cards visible, journal cards hidden
+- Click **All content** → all cards visible again
+- If no stories exist, clicking Stories shows "No stories yet for this trip."
+- "All content" pill always has active state after clicking it
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig
+git commit -m "feat: wire up feed filter — All content / Journal / Stories"
+```
+
+---
+
+### Task 4: Inline stats block (Twig computation + HTML + toggle JS)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css` (append after filter bar CSS from Task 2)
+
+**Interfaces:**
+- Consumes: `.trip-stats-btn#trip-stats-toggle` (Task 2); `journal_entries` variable already set at top of template
+- Produces: expandable stats block; `STATS_GPS` JS variable for haversine distance
+
+- [ ] **Step 1: Add stats Twig computation at the top of the template**
+
+In `trip.html.twig`, after line 19 (`{% set story_count = story_entries|length %}`), add:
+```twig
+{# Stats computation #}
+{% set days_on_road = 0 %}
+{% set first_ts = null %}
+{% for entry in journal_entries %}
+    {% set ts = entry.date|date('U') %}
+    {% if first_ts is null or ts < first_ts %}
+        {% set first_ts = ts %}
+    {% endif %}
+{% endfor %}
+{% if first_ts is not null %}
+    {% set now_ts = "now"|date('U') %}
+    {% set diff_seconds = now_ts - first_ts %}
+    {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
+    {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
+{% endif %}
+
+{% set seen_lower = [] %}
+{% set country_display = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.location_country is not empty %}
+        {% set lower = entry.header.location_country|trim|lower %}
+        {% if lower not in seen_lower %}
+            {% set seen_lower = seen_lower|merge([lower]) %}
+            {% set country_display = country_display|merge([entry.header.location_country|trim]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set gps_points = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
+        {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
+    {% endif %}
+{% endfor %}
+```
+
+- [ ] **Step 2: Add stats block HTML between filter bar and feed**
+
+In `trip.html.twig`, find the `<div class="feed">` line and insert the stats block immediately before it:
+```twig
+<div id="trip-stats-block" class="trip-stats-block" style="display:none">
+    <div class="trip-stats-grid">
+        <div class="stat-block">
+            <span class="stat-value">{{ days_on_road }}</span>
+            <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value">{{ journal_count }}</span>
+            <span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value">{{ country_display|length }}</span>
+            <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
+        </div>
+        <div class="stat-block">
+            <span class="stat-value" id="stat-distance">—</span>
+            <span class="stat-label">km traveled</span>
+        </div>
+    </div>
+    {% if country_display|length > 0 %}
+    <p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
+    {% endif %}
+    <p class="trip-stats-note">Distance is approximate — straight lines between entry locations.</p>
+</div>
+```
+
+- [ ] **Step 3: Add stats block CSS to style.css**
+
+Append after the filter bar CSS added in Task 2:
+```css
+/* ── Trip page inline stats block ───────────────────────────────────────────── */
+
+.trip-stats-block {
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-6);
+    margin-bottom: var(--space-6);
+}
+
+.trip-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+
+@media (max-width: 600px) {
+    .trip-stats-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+.trip-stats-countries {
+    font-size: var(--text-sm);
+    color: var(--color-ink-2);
+    margin-bottom: var(--space-2);
+}
+
+.trip-stats-note {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+}
+```
+
+Note: `.stat-block`, `.stat-value`, `.stat-label` are reused from `stats.html.twig` and already have CSS defined. Do not add duplicate rules.
+
+- [ ] **Step 4: Verify those existing CSS classes exist**
+
+Run:
+```bash
+grep -n "\.stat-block\|\.stat-value\|\.stat-label" user/themes/intotheeast/css/style.css
+```
+Expected: at least 3 matches. If not found, copy from `stats.html.twig`'s inline `<style>` block if one exists.
+
+- [ ] **Step 5: Add stats toggle JS + haversine distance**
+
+In `trip.html.twig`, append to the existing `<script>` block (before `</script>`):
+```javascript
+var STATS_GPS = {{ gps_points|json_encode|raw }};
+
+(function() {
+    function haversine(lat1, lng1, lat2, lng2) {
+        var R = 6371;
+        var dLat = (lat2 - lat1) * Math.PI / 180;
+        var dLng = (lng2 - lng1) * Math.PI / 180;
+        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+            Math.sin(dLng / 2) * Math.sin(dLng / 2);
+        return R * 2 * Math.asin(Math.sqrt(a));
+    }
+
+    var totalKm = 0;
+    for (var i = 1; i < STATS_GPS.length; i++) {
+        totalKm += haversine(
+            parseFloat(STATS_GPS[i - 1][0]), parseFloat(STATS_GPS[i - 1][1]),
+            parseFloat(STATS_GPS[i][0]), parseFloat(STATS_GPS[i][1])
+        );
+    }
+    var distEl = document.getElementById('stat-distance');
+    if (distEl) {
+        distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(totalKm).toLocaleString();
+    }
+
+    var statsToggle = document.getElementById('trip-stats-toggle');
+    var statsBlock = document.getElementById('trip-stats-block');
+    if (statsToggle && statsBlock) {
+        statsToggle.addEventListener('click', function() {
+            var isOpen = statsBlock.style.display !== 'none';
+            statsBlock.style.display = isOpen ? 'none' : '';
+            statsToggle.classList.toggle('is-active', !isOpen);
+        });
+    }
+})();
+```
+
+- [ ] **Step 6: Verify stats block**
+
+Open the trip page with demo entries loaded:
+- Click **Stats** → inline block expands between filter bar and feed; Stats button turns teal
+- Block shows: days on road, entries count, countries count, km distance (or `—` if < 2 GPS points)
+- Countries list shows below the grid if any entries have `location_country`
+- Click **Stats** again → block collapses, button returns to default style
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css
+git commit -m "feat: add inline stats block with toggle to trip page"
+```
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- ✅ Filter bar with All / Journal / Stories (Task 2, 3)
+- ✅ Mutually exclusive, one active at a time (Task 3 JS)
+- ✅ JS show/hide via data-type (Task 1, 3)
+- ✅ Empty state for Stories filter (Task 3)
+- ✅ Stats as inline expansion (Task 4)
+- ✅ Stats toggle with active state (Task 4)
+- ✅ Story card full border (Task 1)
+- ✅ Sub-pages untouched — no changes to stats.html.twig or dailies.html.twig
+
+**Placeholder scan:** None — all steps contain exact code.
+
+**Type consistency:**
+- `data-filter="story"` on button matches `data-type="story"` on article — comparison in Task 3 JS: `card.getAttribute('data-type') === filter` ✅
+- `id="trip-stats-toggle"` set in Task 2 HTML, read in Task 4 JS ✅
+- `id="trip-stats-block"` set in Task 4 HTML, read in Task 4 JS ✅
+- `id="feed-filter-empty"` set in Task 3 HTML, read in Task 3 JS ✅
+- `id="stat-distance"` set in Task 4 HTML, read in Task 4 JS ✅
+- `STATS_GPS` set in Task 4 JS, consumed in Task 4 haversine loop ✅
+- `.stat-block` / `.stat-value` / `.stat-label` reused from existing CSS — Task 4 Step 4 verifies they exist ✅

docs/working/plans/2026-06-19-tuscany-demo-stories.md

@@ -0,0 +1,301 @@
+# Tuscany Demo Stories 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:** Add three Italy 2025 Tuscany demo stories that showcase distinct story-mode composition patterns.
+
+**Architecture:** Three `story.md` files in `user/docs/demo/trips/italy-2025/04.stories/`, committed to the user repo. One Makefile line added to `demo-load` to copy the folder into pages, committed to the main repo. No image files — shortcode image params reference filenames that won't resolve without real photos, consistent with the existing Japan demo story.
+
+**Tech Stack:** Grav CMS page frontmatter (YAML), Markdown prose, story-blocks shortcodes (chapter-break, scrolly-section, pull-quote, snap-gallery), Makefile.
+
+## Global Constraints
+
+- Story pages live at `user/docs/demo/trips/italy-2025/04.stories/<n>.<slug>/story.md` (note: `user/` is a separate git repo — all story commits use `git -C user ...`)
+- Shortcode syntax: `[chapter-break title="..." number="..." image="..." alt="..." /]`, `[scrolly-section image="..." alt="..." caption="..."]...[/scrolly-section]`, `[pull-quote image="..."]...[/pull-quote]` (image param optional), `[snap-gallery images="a.jpg,b.jpg" captions="Cap 1,Cap 2" alts="Alt 1,Alt 2" /]`
+- ScrollySection steps separated by `---` on its own line inside the shortcode tags
+- All frontmatter fields required: `title`, `date`, `location_name`, `location_country`, `lat`, `lng`, `hero_image`, `hero_alt`, `published: true`
+- `end_date` optional (Story 2 only)
+- Makefile changes go in the **main repo** (`git add Makefile && git commit ...` — no `-C user`)
+- Dev server: `http://localhost:8081`, Docker container: `intotheeast_grav`
+
+---
+
+### Task 1: Three story.md files
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md`
+- Create: `user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md`
+- Create: `user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md`
+
+**Interfaces:**
+- Produces: three story pages loadable by `make demo-load` into `user/pages/01.trips/italy-2025/04.stories/`
+- Consumed by: Task 2 (Makefile verification)
+
+- [ ] **Create the demo stories directory**
+
+  ```bash
+  mkdir -p user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn
+  mkdir -p user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino
+  mkdir -p user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena
+  ```
+
+- [ ] **Create Story 1: `01.val-dorcia-dawn/story.md`**
+
+  Pattern: gallery-led. Demonstrates two snap-galleries, chapter-break as scene divider, text-only pull-quote (no image param).
+
+  ```markdown
+  ---
+  title: The Val d'Orcia at Dawn
+  date: 2025-09-05
+  location_name: Val d'Orcia
+  location_country: Italy
+  lat: 43.078
+  lng: 11.676
+  hero_image: hero.jpg
+  hero_alt: Cypress-lined dirt road at first light, Tuscany
+  published: true
+  ---
+  We left camp before the heat arrived. At six in the morning the Val d'Orcia belongs entirely to the light — long shadows, pale gold, not a car on the white roads. The kind of silence that has texture.
+
+  [snap-gallery images="dawn-wide.jpg,rolling-hills.jpg,cypress-allee.jpg,dirt-road.jpg" captions="First light on the valley floor,The hills fold endlessly east,The cypress road — every photo you have ever seen of Tuscany,Dust rising behind us on the gravel" alts="Wide valley at dawn with golden light,Rolling green hills under morning sky,Long avenue of cypress trees,White gravel road with dust cloud" /]
+
+  We stopped twice before nine. Once for a puncture, once because the view demanded it.
+
+  [chapter-break image="heat-haze.jpg" title="The Hour Before Heat" alt="Hazy hillside shimmering in early morning warmth" /]
+
+  By ten the temperature had shifted. The colours changed too — softer, more diffuse, the sky turning white at the edges. We dropped into the lower valley and the road surface changed from gravel to packed earth, then back again.
+
+  [snap-gallery images="gravel-detail.jpg,wheel-shadow.jpg,water-bottle.jpg,road-shadow.jpg" captions="The texture of Tuscan gravel — coarser than it looks,Long shadow at the day's first steep pitch,Half a litre left and forty kilometres to go,The road ahead disappears into the heat" alts="Close-up of pale gravel surface,Bicycle wheel casting shadow on road,Half-empty water bottle in cage,Road vanishing into bright haze" /]
+
+  [pull-quote]
+  The best hours of a cycling day are the ones nobody sees. Four in the morning to ten. Then it belongs to the sun.
+  [/pull-quote]
+
+  We made Pienza by noon. It was already thirty degrees and the ice cream queue was six deep.
+  ```
+
+- [ ] **Create Story 2: `02.long-climb-montalcino/story.md`**
+
+  Pattern: scrollytelling-led. Demonstrates two scrolly-sections with different step counts (3 vs. 5), pull-quote with image, chapter-break with number.
+
+  ```markdown
+  ---
+  title: The Long Climb to Montalcino
+  date: 2025-09-05
+  end_date: 2025-09-06
+  location_name: Montalcino
+  location_country: Italy
+  lat: 43.058
+  lng: 11.489
+  hero_image: hero.jpg
+  hero_alt: Hairpin road climbing through olive groves towards a hilltop town
+  published: true
+  ---
+  The profile showed fourteen kilometres at an average of six percent. In practice it was steeper at the bottom and gentler at the top, which is the worst possible arrangement. We started climbing at two in the afternoon, which was also the worst possible decision.
+
+  [scrolly-section image="climb-road.jpg" alt="Empty road rising steeply through olive groves" caption="SP55 — 14km, 840m elevation gain"]
+  The first kilometre is the most honest. You find out immediately whether your legs have anything to say.
+
+  ---
+
+  By the halfway point the olive groves had given way to scrub oak and the road had narrowed to a single lane. No cars had passed in forty minutes. The silence was absolute except for breathing.
+
+  ---
+
+  Then, at the last bend before the top, the town appeared. Just the outline of it — a tower, a wall, rooftops. It was enough.
+  [/scrolly-section]
+
+  [chapter-break image="town-gate.jpg" title="Montalcino" number="II" alt="Medieval town gate with stone archway" /]
+
+  [pull-quote image="vineyard.jpg" alt="Rows of Brunello vines descending from hilltop town"]
+  From the top you could see the whole valley we had spent two days riding through. It looked completely flat from up here.
+  [/pull-quote]
+
+  We found a bar in the main piazza. The owner brought two glasses of water without being asked. Then two more. Then a small plate of bread and oil that nobody ordered. We sat there for an hour.
+
+  [scrolly-section image="piazza.jpg" alt="Shaded medieval piazza with stone buildings" caption="Piazza del Popolo, Montalcino"]
+  The piazza at five in the afternoon is a different place from the piazza at noon. People have returned from wherever they go during the heat.
+
+  ---
+
+  A wine shop with barrels in the window and a handwritten list on a chalkboard. We looked at it for a long time and bought nothing. The prices were very reasonable and this felt suspicious.
+
+  ---
+
+  A cat on a warm stone wall, watching traffic that did not exist. It had clearly been watching this traffic for years.
+
+  ---
+
+  The fortress walls turn amber just before sunset. You could photograph this from a hundred different angles and it would look the same in all of them: very good.
+
+  ---
+
+  The descent back to the valley takes twenty minutes. The climb took two and a half hours. This ratio never stops feeling wrong.
+  [/scrolly-section]
+
+  We found the agriturismo by following a handwritten sign nailed to a cypress tree. It was exactly what it promised to be.
+  ```
+
+- [ ] **Create Story 3: `03.one-evening-siena/story.md`**
+
+  Pattern: mood/fragment piece. Demonstrates pull-quote as opening element, 2-step scrolly-section (minimum), snap-gallery as mid-story element, pull-quote with image as closing element.
+
+  ```markdown
+  ---
+  title: One Evening in Siena
+  date: 2025-09-05
+  location_name: Siena
+  location_country: Italy
+  lat: 43.318
+  lng: 11.330
+  hero_image: hero.jpg
+  hero_alt: The Piazza del Campo at dusk, terracotta rooftops fading to blue
+  published: true
+  ---
+  [pull-quote]
+  Siena is not a city that tries to impress you. It has been here for a thousand years and intends to be here for a thousand more. You fit around it.
+  [/pull-quote]
+
+  We rolled in at half past six, legs finished, panniers heavier than they started. The Campo appeared without warning at the end of a narrow street and we both stopped pedalling at exactly the same moment.
+
+  [scrolly-section image="campo.jpg" alt="Piazza del Campo seen from the upper rim, sloping shell-shaped square"]
+  The square fills from the edges inward as evening comes. First the locals — people who have been here before and know which bench faces west. Then the tourists, then the pigeons, then the shadows.
+
+  ---
+
+  A busker with a cello at the top of the slope. A couple arguing quietly in a language I couldn't place. Three children running in a circle for reasons nobody questioned. The ordinary business of a city at the end of a summer day.
+  [/scrolly-section]
+
+  [snap-gallery images="campo-dusk.jpg,doorway.jpg,gelato.jpg" captions="The Campo at the moment the light goes warm,A doorway on Via di Città — every doorway in Siena looks like this,The mandatory stop: stracciatella, obviously" alts="Wide shot of Campo at golden hour,Ornate stone doorway with iron lantern,Close-up of gelato cone with city behind" /]
+
+  We found a place to eat down three flights of stairs in a basement that appeared to have no ventilation and no menu. It was perfect. The relief of sitting down after eight hours on a bike is a specific physical sensation that is difficult to describe to anyone who has not experienced it.
+
+  [pull-quote image="sunset.jpg" alt="Sunset view over Siena rooftops from high vantage point"]
+  Cycling makes you earn every place you arrive at. Siena earned.
+  [/pull-quote]
+  ```
+
+- [ ] **Verify shortcode syntax in all three files**
+
+  Check that every shortcode tag opens and closes correctly:
+  ```bash
+  grep -n "\[chapter-break\|\[scrolly-section\|\[/scrolly-section\]\|\[pull-quote\|\[/pull-quote\]\|\[snap-gallery" \
+    user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md \
+    user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md \
+    user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md
+  ```
+
+  Expected: every `[scrolly-section` has a matching `[/scrolly-section]`, every `[pull-quote` has a matching `[/pull-quote]`.
+
+- [ ] **Commit to user repo**
+
+  ```bash
+  git -C user add docs/demo/trips/italy-2025/04.stories/
+  git -C user commit -m "docs: add three Tuscany demo stories (gallery-led, scrollytelling-led, mood-fragment)"
+  ```
+
+---
+
+### Task 2: Makefile update + end-to-end verification
+
+**Files:**
+- Modify: `Makefile` (main repo — no `-C user`)
+
+**Interfaces:**
+- Consumes: `user/docs/demo/trips/italy-2025/04.stories/` from Task 1
+- Produces: `make demo-load` copies all three stories into pages; stories listing shows 3 cards; each story page renders shortcode HTML
+
+- [ ] **Add the stories copy line to `demo-load`**
+
+  In `Makefile`, find this line:
+  ```makefile
+  	cp user/docs/demo/trips/italy-2025/stories.md user/pages/01.trips/italy-2025/04.stories/stories.md 2>/dev/null || true
+  ```
+
+  Add the following line immediately after it:
+  ```makefile
+  	cp -r user/docs/demo/trips/italy-2025/04.stories/. user/pages/01.trips/italy-2025/04.stories/ 2>/dev/null || true
+  ```
+
+  Note: use `04.stories/.` (trailing slash-dot) to copy the **contents** of the folder into the existing `04.stories/` directory (which already contains `stories.md`), rather than creating a nested `04.stories/04.stories/` structure.
+
+- [ ] **Run `make demo-load` and clear cache**
+
+  ```bash
+  make demo-load
+  ```
+
+  Expected output ends with Grav cache cleared.
+
+- [ ] **Verify stories listing shows 3 cards**
+
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories | grep -c 'story-card'
+  ```
+
+  Expected: `3` (one card per story).
+
+- [ ] **Verify Story 1 renders both snap-galleries and text-only pull-quote**
+
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/val-dorcia-dawn | grep -c 'pgallery\|pull-quote'
+  ```
+
+  Expected: at least `3` (2 pgallery divs + 1 pull-quote).
+
+  Also verify the text-only pull-quote (no background image div):
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/val-dorcia-dawn | grep 'pull-quote__inner--no-image'
+  ```
+
+  Expected: one match (the text-only pull-quote variant).
+
+- [ ] **Verify Story 2 renders two scrolly-sections**
+
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/long-climb-montalcino | grep -c 'class="scrolly"'
+  ```
+
+  Expected: `2` (two scrolly-section blocks).
+
+  Also verify pull-quote with image (should NOT have `--no-image` class):
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/long-climb-montalcino | grep 'pull-quote__bg'
+  ```
+
+  Expected: one match (the background image div for the pull-quote).
+
+- [ ] **Verify Story 3 renders pull-quote as opener and closer**
+
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/one-evening-siena | grep -c 'pull-quote'
+  ```
+
+  Expected: at least `4` (two pull-quote elements × ~2 class references each).
+
+  Verify the mid-story snap-gallery:
+  ```bash
+  curl -s http://localhost:8081/trips/italy-2025/stories/one-evening-siena | grep -c 'pgallery'
+  ```
+
+  Expected: at least `1`.
+
+- [ ] **Run `make demo-reset` and verify cleanup**
+
+  ```bash
+  make demo-reset
+  ```
+
+  Verify Italy stories are gone:
+  ```bash
+  ls user/pages/01.trips/italy-2025/ 2>/dev/null || echo "italy-2025 removed"
+  ```
+
+  Expected: `italy-2025 removed` (the entire italy-2025 folder is removed by `demo-reset`).
+
+- [ ] **Commit Makefile to main repo**
+
+  ```bash
+  git add Makefile
+  git commit -m "build: add Italy 2025 stories folder to demo-load target"
+  ```

docs/working/plans/2026-06-20-accessibility-audit.md

@@ -0,0 +1,841 @@
+# Accessibility Audit 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.
+
+**Status:** 🔄 In progress — Task 1 complete (skip link), Tasks 2–6 open
+
+**Goal:** Fix all eight WCAG 2.1 AA failures identified in the accessibility audit and add axe-core Playwright regression tests.
+
+**Architecture:** Six sequential tasks — each implements one audit finding (or related group), writes a Playwright test first, then implements the fix in the relevant template/CSS/JS files. All tests go into a new `tests/ui/accessibility.spec.js` file that grows task by task. Task 6 adds axe-core automated scans on top of the feature-specific checks.
+
+**Tech Stack:** Grav 2.0 Twig templates, CSS custom properties, vanilla JS, Playwright with `@axe-core/playwright`
+
+## Global Constraints
+
+- Target standard: WCAG 2.1 Level AA
+- Dev server: http://localhost:8081 (Docker container `intotheeast_grav`)
+- Two git repos: outer at `/home/mischa/Nextcloud/Projects/travel-blog-intotheeast`, user subrepo at `/home/mischa/Projects/travel-blog-intotheeast/user`
+- Template files are in the **user subrepo** (`user/themes/intotheeast/templates/`, `user/themes/intotheeast/css/`) — commit there first, then commit the outer repo with the updated `user/` pointer
+- Tests and `package.json` are in the **outer repo** only
+- Run all Playwright tests with: `cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast && npx playwright test --project=chromium`
+- Demo data must be loaded before running tests: `make demo-load` (run from outer repo)
+- Never read `.env`; pass it only to `make` / `docker compose`
+- Do NOT add comments to CSS or JS unless the WHY is non-obvious
+
+**Note on F8 (lightbox alt text):** The existing JS in `entry.html.twig` already handles this correctly — `open(index)` sets `lbImg.alt = btn.dataset.alt` which is populated from `{{ image.filename }}`. No code change needed for F8.
+
+---
+
+### Task 1: Skip link + `<main id="main-content">`
+
+**Fixes:** F1 (WCAG 2.4.1 Bypass Blocks)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/partials/base.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+- Create: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Produces: `.skip-link` element, `#main-content` id on `<main>` — both consumed by A1 test
+
+- [ ] **Step 1: Create the failing test**
+
+Create `tests/ui/accessibility.spec.js`:
+
+```js
+// @ts-check
+// Tests: A1–A5 (feature checks) and AX1–AX5 (axe scans)
+const { test, expect } = require('@playwright/test');
+
+// ── A1: Skip link ──────────────────────────────────────────────────────────────
+test('A1: skip link targets #main-content and is first focusable element', async ({ page }) => {
+    await page.goto('/');
+    const skipLink = page.locator('.skip-link');
+    await expect(skipLink).toBeAttached();
+    await expect(skipLink).toHaveAttribute('href', '#main-content');
+    await expect(page.locator('#main-content')).toBeAttached();
+});
+```
+
+- [ ] **Step 2: Run A1 to verify it fails**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: FAIL — `.skip-link` not found.
+
+- [ ] **Step 3: Add skip link to `base.html.twig`**
+
+In `user/themes/intotheeast/templates/partials/base.html.twig`:
+
+Change line 15–16 (the opening `<body>` and `<header>`):
+
+```html
+<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
+    <header class="site-header">
+```
+
+Replace with:
+
+```html
+<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+    <header class="site-header">
+```
+
+Then change line 25:
+
+```html
+    <main class="site-main">
+```
+
+Replace with:
+
+```html
+    <main class="site-main" id="main-content">
+```
+
+- [ ] **Step 4: Add skip-link CSS to `style.css`**
+
+In `user/themes/intotheeast/css/style.css`, find the `:focus-visible` rule (around line 782):
+
+```css
+:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+}
+```
+
+Add this block directly before it:
+
+```css
+.skip-link {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+.skip-link:focus-visible {
+    left: 0;
+    top: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    padding: var(--space-2) var(--space-4);
+    background: var(--color-accent);
+    color: var(--color-accent-on);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    text-decoration: none;
+    z-index: 9999;
+}
+
+```
+
+- [ ] **Step 5: Run A1 to verify it passes**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: PASS.
+
+- [ ] **Step 6: Run existing tests to check for regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/nav.spec.js tests/ui/home.spec.js tests/ui/dailies.spec.js
+```
+
+Expected: all pass.
+
+- [ ] **Step 7: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css
+git commit -m "feat(a11y): add skip-to-main link and main landmark id"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/accessibility.spec.js user
+git commit -m "test(a11y): add A1 skip link test"
+```
+
+---
+
+### Task 2: Color token contrast fixes
+
+**Fixes:** F2 (`--color-ink-muted` fails 4.5:1), F3 (`--color-accent` fails 4.5:1)
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/tokens.css`
+- Modify: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Consumes: `tests/ui/accessibility.spec.js` from Task 1
+- Produces: updated token values verified by A2 test
+
+- [ ] **Step 1: Add the failing test**
+
+Append to `tests/ui/accessibility.spec.js`:
+
+```js
+// ── A2: Color token contrast ───────────────────────────────────────────────────
+test('A2: contrast tokens meet WCAG AA 4.5:1 floor', async ({ page }) => {
+    await page.goto('/');
+    const [muted, accent] = await page.evaluate(() => [
+        getComputedStyle(document.documentElement).getPropertyValue('--color-ink-muted').trim(),
+        getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim(),
+    ]);
+    expect(muted.toLowerCase()).toBe('#90887e');
+    expect(accent.toLowerCase()).toBe('#2e9880');
+});
+```
+
+- [ ] **Step 2: Run A2 to verify it fails**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A2"
+```
+
+Expected: FAIL — values are `#7a7268` and `#2a8c73`.
+
+- [ ] **Step 3: Update `tokens.css`**
+
+In `user/themes/intotheeast/css/tokens.css`, make three changes:
+
+Change `--color-ink-muted`:
+```css
+    --color-ink-muted:      #7A7268;   /* labels, timestamps, captions */
+```
+→
+```css
+    --color-ink-muted:      #90887E;   /* labels, timestamps, captions */
+```
+
+Change `--color-accent`:
+```css
+    --color-accent:         #2A8C73;   /* teal — lightened for dark contrast */
+```
+→
+```css
+    --color-accent:         #2E9880;   /* teal — lightened for dark contrast */
+```
+
+Change `--color-accent-hover`:
+```css
+    --color-accent-hover:   #236655;   /* hover/pressed teal */
+```
+→
+```css
+    --color-accent-hover:   #287A68;   /* hover/pressed teal */
+```
+
+Contrast verification (for reference only — these numbers are correct):
+- `#90887E` on `#1A1814` = 5.07:1 ✓, on `#22201B` = 4.66:1 ✓
+- `#2E9880` on `#1A1814` = 5.00:1 ✓, on `#22201B` = 4.59:1 ✓
+- `#287A68` on `#1A1814` = 3.58:1 ✓ (non-text, needs 3:1)
+
+- [ ] **Step 4: Run A2 to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A2"
+```
+
+Expected: PASS.
+
+- [ ] **Step 5: Run all accessibility tests**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: A1 and A2 pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/css/tokens.css
+git commit -m "feat(a11y): fix --color-ink-muted and --color-accent contrast ratios"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/accessibility.spec.js user
+git commit -m "test(a11y): add A2 color contrast token test"
+```
+
+---
+
+### Task 3: ARIA states for filter buttons and toggle panels
+
+**Fixes:** F4 (filter buttons lack `aria-pressed`), F5 (toggle buttons lack `aria-expanded`)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Consumes: `tests/ui/accessibility.spec.js` from Task 2
+- Produces: `aria-pressed` on `.trip-filter-btn`, `aria-expanded` + `aria-controls` on `#trip-stats-toggle` and `#trip-cycling-toggle`
+
+- [ ] **Step 1: Add the failing tests**
+
+Append to `tests/ui/accessibility.spec.js`:
+
+```js
+// ── A3: Filter button aria-pressed + toggle aria-expanded ──────────────────────
+const TRIP_URL = '/trips/japan-korea-2026';
+
+test('A3a: All-content filter has aria-pressed="true" on load', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'false');
+    await expect(page.locator('.trip-filter-btn[data-filter="story"]')).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('A3b: clicking Journal filter toggles aria-pressed', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await page.click('.trip-filter-btn[data-filter="journal"]');
+    await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('A3c: Stats toggle has aria-expanded="false" and aria-controls on load', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-controls', 'trip-stats-block');
+});
+
+test('A3d: clicking Stats toggle sets aria-expanded="true" then back to false', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await page.click('#trip-stats-toggle');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'true');
+    await page.click('#trip-stats-toggle');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false');
+});
+```
+
+- [ ] **Step 2: Run A3a–A3d to verify they fail**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A3"
+```
+
+Expected: all four FAIL — attributes not present.
+
+- [ ] **Step 3: Add `aria-pressed` to filter buttons in template**
+
+In `user/themes/intotheeast/templates/trip.html.twig`, find lines 124–128:
+
+```html
+            <div class="trip-filter-group">
+                <button class="trip-filter-btn is-active" data-filter="all">All content</button>
+                <button class="trip-filter-btn" data-filter="journal">Journal</button>
+                <button class="trip-filter-btn" data-filter="story">Stories</button>
+            </div>
+```
+
+Replace with:
+
+```html
+            <div class="trip-filter-group">
+                <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
+                <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
+                <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
+            </div>
+```
+
+- [ ] **Step 4: Add `aria-expanded` + `aria-controls` to toggle buttons in template**
+
+Find lines 129–134:
+
+```html
+                <div class="trip-filter-group">
+                    <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
+                    {% if has_gpx %}
+                    <button class="trip-stats-btn" id="trip-cycling-toggle">Cycling</button>
+                    {% endif %}
+                </div>
+```
+
+Replace with:
+
+```html
+                <div class="trip-filter-group">
+                    <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
+                    {% if has_gpx %}
+                    <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
+                    {% endif %}
+                </div>
+```
+
+- [ ] **Step 5: Update the filter JS to toggle `aria-pressed`**
+
+In the same file, find the filter click handler inside the `<script>` block (around line 384):
+
+```js
+    filterBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            filterBtns.forEach(function(b) { b.classList.remove('is-active'); });
+            btn.classList.add('is-active');
+```
+
+Replace those four lines with:
+
+```js
+    filterBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            filterBtns.forEach(function(b) { b.classList.remove('is-active'); b.setAttribute('aria-pressed', 'false'); });
+            btn.classList.add('is-active');
+            btn.setAttribute('aria-pressed', 'true');
+```
+
+- [ ] **Step 6: Update the stats toggle JS to set `aria-expanded`**
+
+Find the stats toggle handler (around line 548):
+
+```js
+        statsToggle.addEventListener('click', function() {
+            var isOpen = statsBlock.style.display !== 'none';
+            statsBlock.style.display = isOpen ? 'none' : '';
+            statsToggle.classList.toggle('is-active', !isOpen);
+        });
+```
+
+Replace with:
+
+```js
+        statsToggle.addEventListener('click', function() {
+            var isOpen = statsBlock.style.display !== 'none';
+            statsBlock.style.display = isOpen ? 'none' : '';
+            statsToggle.classList.toggle('is-active', !isOpen);
+            statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+        });
+```
+
+- [ ] **Step 7: Update the cycling toggle JS to set `aria-expanded`**
+
+Find the cycling toggle handler (around line 560):
+
+```js
+        cycToggle.addEventListener('click', function() {
+            var isOpen = cycBlock.style.display !== 'none';
+            cycBlock.style.display = isOpen ? 'none' : '';
+            cycToggle.classList.toggle('is-active', !isOpen);
+        });
+```
+
+Replace with:
+
+```js
+        cycToggle.addEventListener('click', function() {
+            var isOpen = cycBlock.style.display !== 'none';
+            cycBlock.style.display = isOpen ? 'none' : '';
+            cycToggle.classList.toggle('is-active', !isOpen);
+            cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+        });
+```
+
+- [ ] **Step 8: Run A3a–A3d to verify they pass**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A3"
+```
+
+Expected: all four PASS.
+
+- [ ] **Step 9: Run the existing filter tests to check for regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/trip-filter.spec.js
+```
+
+Expected: all pass.
+
+- [ ] **Step 10: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/trip.html.twig
+git commit -m "feat(a11y): add aria-pressed to filter buttons and aria-expanded to stats/cycling toggles"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/accessibility.spec.js user
+git commit -m "test(a11y): add A3a-A3d aria-pressed and aria-expanded tests"
+```
+
+---
+
+### Task 4: Photo strip keyboard navigation
+
+**Fixes:** F6 (photo strip not keyboard-navigable)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/partials/base.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+- Modify: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Consumes: `tests/ui/accessibility.spec.js` from Task 3
+- Produces: `.strip-controls` div with `.strip-prev` / `.strip-next` buttons injected by JS for strips with `data-slides >= 2`; all strips get `role="region"` and `aria-label="Photo strip"`
+
+- [ ] **Step 1: Add the failing tests**
+
+Append to `tests/ui/accessibility.spec.js`:
+
+```js
+// ── A4: Photo strip keyboard navigation ───────────────────────────────────────
+test('A4a: all photo strips have role=region and aria-label', async ({ page }) => {
+    await page.goto('/trips/japan-korea-2026/dailies');
+    const strips = page.locator('.journal-photo-strip');
+    const count = await strips.count();
+    if (count === 0) return;
+    for (let i = 0; i < count; i++) {
+        await expect(strips.nth(i)).toHaveAttribute('role', 'region');
+        await expect(strips.nth(i)).toHaveAttribute('aria-label', 'Photo strip');
+    }
+});
+
+test('A4b: multi-slide photo strips have accessible prev/next controls', async ({ page }) => {
+    await page.goto('/trips/japan-korea-2026/dailies');
+    const multiCount = await page.locator('.journal-photo-strip').evaluateAll(
+        els => els.filter(el => parseInt(el.dataset.slides, 10) >= 2).length
+    );
+    if (multiCount === 0) return;
+    await expect(page.locator('.strip-prev').first()).toBeAttached();
+    await expect(page.locator('.strip-next').first()).toBeAttached();
+    await expect(page.locator('.strip-prev').first()).toHaveAttribute('aria-label', 'Previous photo');
+    await expect(page.locator('.strip-next').first()).toHaveAttribute('aria-label', 'Next photo');
+});
+```
+
+- [ ] **Step 2: Run A4a–A4b to verify they fail**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A4"
+```
+
+Expected: A4a FAIL (no `role` attribute), A4b PASS vacuously (no multi-slide strips in demo data).
+
+- [ ] **Step 3: Replace the dot-sync IIFE in `base.html.twig`**
+
+In `user/themes/intotheeast/templates/partials/base.html.twig`, find the IIFE (lines 30–41):
+
+```js
+<script>
+(function () {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+    });
+})();
+</script>
+```
+
+Replace with:
+
+```js
+<script>
+(function () {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        strip.setAttribute('role', 'region');
+        strip.setAttribute('aria-label', 'Photo strip');
+
+        var slideCount = parseInt(strip.dataset.slides, 10) || 1;
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+
+        if (slideCount < 2) return;
+
+        var prev = document.createElement('button');
+        prev.className = 'strip-prev';
+        prev.setAttribute('aria-label', 'Previous photo');
+        prev.textContent = '‹';
+        prev.addEventListener('click', function () {
+            strip.scrollBy({ left: -strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var next = document.createElement('button');
+        next.className = 'strip-next';
+        next.setAttribute('aria-label', 'Next photo');
+        next.textContent = '›';
+        next.addEventListener('click', function () {
+            strip.scrollBy({ left: strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var controls = document.createElement('div');
+        controls.className = 'strip-controls';
+        controls.appendChild(prev);
+        controls.appendChild(next);
+        dots.insertAdjacentElement('afterend', controls);
+    });
+})();
+</script>
+```
+
+- [ ] **Step 4: Add strip-controls CSS to `style.css`**
+
+In `user/themes/intotheeast/css/style.css`, find the `.journal-photo-dot.is-active` rule (around line 245):
+
+```css
+.journal-photo-dot.is-active {
+    background: var(--color-ink-muted);
+}
+```
+
+Add this block directly after it:
+
+```css
+.strip-controls {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-3);
+    margin-top: calc(-1 * var(--space-2));
+    margin-bottom: var(--space-4);
+}
+
+.strip-prev,
+.strip-next {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-ink-2);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-md);
+    line-height: 1;
+    cursor: pointer;
+}
+
+.strip-prev:hover,
+.strip-next:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+}
+
+```
+
+- [ ] **Step 5: Run A4a–A4b to verify they pass**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A4"
+```
+
+Expected: both PASS.
+
+- [ ] **Step 6: Run the full accessibility suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: A1–A4 all pass.
+
+- [ ] **Step 7: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css
+git commit -m "feat(a11y): add keyboard prev/next to photo strip and region landmark"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/accessibility.spec.js user
+git commit -m "test(a11y): add A4a-A4b photo strip keyboard tests"
+```
+
+---
+
+### Task 5: GPX delete button unique accessible names
+
+**Fixes:** F7 (delete buttons have no unique name)
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/gpx-manager.html.twig`
+- Modify: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Consumes: `tests/ui/accessibility.spec.js` from Task 4
+- Produces: delete buttons with `aria-label="Delete <filename>"`
+
+- [ ] **Step 1: Add the failing test**
+
+Append to `tests/ui/accessibility.spec.js`:
+
+```js
+// ── A5: GPX delete button unique accessible names ──────────────────────────────
+test('A5: GPX delete buttons have unique aria-labels per filename', async ({ page }) => {
+    await page.route('**/api/v1/pages**/media', async route => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                data: [
+                    { filename: 'tokyo-day1.gpx', size: 102400, modified: '2026-03-25T10:00:00Z' }
+                ]
+            })
+        });
+    });
+    await page.goto('/gpx-manager');
+    const deleteBtn = page.locator('.gpx-delete[data-filename="tokyo-day1.gpx"]');
+    await expect(deleteBtn).toBeVisible();
+    await expect(deleteBtn).toHaveAttribute('aria-label', 'Delete tokyo-day1.gpx');
+});
+```
+
+- [ ] **Step 2: Run A5 to verify it fails**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A5"
+```
+
+Expected: FAIL — `aria-label` attribute not present on the delete button.
+
+- [ ] **Step 3: Add `aria-label` to the delete button in `gpx-manager.html.twig`**
+
+In `user/themes/intotheeast/templates/gpx-manager.html.twig`, find line 99 inside the `rows` template string:
+
+```js
+            <td><button class="gpx-delete" data-filename="${f.filename}">Delete</button></td>
+```
+
+Replace with:
+
+```js
+            <td><button class="gpx-delete" data-filename="${f.filename}" aria-label="Delete ${f.filename}">Delete</button></td>
+```
+
+- [ ] **Step 4: Run A5 to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A5"
+```
+
+Expected: PASS.
+
+- [ ] **Step 5: Run full accessibility suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: A1–A5 all pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/gpx-manager.html.twig
+git commit -m "feat(a11y): add unique aria-label to GPX delete buttons"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/accessibility.spec.js user
+git commit -m "test(a11y): add A5 GPX delete button accessible name test"
+```
+
+---
+
+### Task 6: axe-core WCAG 2.1 AA regression scans
+
+**Adds:** AX1–AX5 automated axe scans across all main page types
+
+**Files:**
+- Modify: `package.json`
+- Modify: `tests/ui/accessibility.spec.js`
+
+**Interfaces:**
+- Consumes: `tests/ui/accessibility.spec.js` from Task 5
+- Produces: five axe scans that fail on any `critical` or `serious` WCAG violation
+
+- [ ] **Step 1: Install `@axe-core/playwright`**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npm install --save-dev @axe-core/playwright
+```
+
+After install, `package.json` devDependencies should include `"@axe-core/playwright": "^4.x.x"` (exact semver will vary).
+
+- [ ] **Step 2: Add the axe scans to `accessibility.spec.js`**
+
+Append to `tests/ui/accessibility.spec.js`:
+
+```js
+// ── AX1–AX5: axe-core WCAG 2.1 AA regression scans ───────────────────────────
+const { AxeBuilder } = require('@axe-core/playwright');
+
+const WCAG_TAGS = ['wcag2a', 'wcag2aa'];
+const BLOCKING = ['critical', 'serious'];
+
+function axeScan(id, url) {
+    test(`${id}: ${url} passes axe WCAG 2.1 AA (critical/serious)`, async ({ page }) => {
+        await page.goto(url);
+        const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
+        const violations = results.violations.filter(v => BLOCKING.includes(v.impact));
+        expect(
+            violations,
+            violations.map(v =>
+                `[${v.impact}] ${v.id}: ${v.description}\n  ` +
+                v.nodes.map(n => n.html).join('\n  ')
+            ).join('\n\n')
+        ).toHaveLength(0);
+    });
+}
+
+axeScan('AX1', '/');
+axeScan('AX2', '/trips/japan-korea-2026');
+axeScan('AX3', '/trips/japan-korea-2026/dailies');
+axeScan('AX4', '/trips/japan-korea-2026/dailies/2026-03-25-1540-wheels-down-narita');
+axeScan('AX5', '/trips');
+```
+
+- [ ] **Step 3: Run the axe scans**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "AX"
+```
+
+Expected: all five PASS (after Tasks 1–5 fixed the known violations). If any fail, read the violation output — it will name the rule ID, description, and offending HTML. Fix the violation if it represents a real issue, or note it in the ledger if it is a known limitation outside scope (e.g. map canvas element).
+
+- [ ] **Step 4: Run the full accessibility test suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/accessibility.spec.js
+```
+
+Expected: A1–A5 and AX1–AX5 all pass (10 tests total).
+
+- [ ] **Step 5: Run the full Playwright suite to check for regressions**
+
+```bash
+npx playwright test --project=chromium
+```
+
+Expected: all tests pass (or pre-existing failures only — check the progress ledger for known pre-existing failures before marking as blocker).
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add package.json package-lock.json tests/ui/accessibility.spec.js
+git commit -m "test(a11y): add axe-core WCAG 2.1 AA regression scans AX1-AX5"
+```

docs/working/plans/2026-06-20-demo-data-redesign.md

@@ -0,0 +1,969 @@
+# Demo Data Redesign 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:** Replace patchwork demo content with a single high-quality `italy-2026-demo` trip following the real 8-day Tuscan cycling loop, with 12 journal entries (with photos) and 4 stories exercising all shortcode types.
+
+**Architecture:** All demo source files live in `user/docs/demo/trips/italy-2026-demo/`. `make demo-load` copies them into `user/pages/01.trips/italy-2026-demo/` inside Docker. Images are downloaded once and committed to the demo source so the Makefile stays simple (cp -r copies everything). Tests in `tests/ui/stories.spec.js` reference story slugs that must match the new folder names.
+
+**Tech Stack:** Grav CMS page files (YAML frontmatter + Markdown), story-blocks shortcodes (`snap-gallery`, `scrolly-section`, `chapter-break`, `pull-quote`), picsum.photos placeholder images, Playwright tests, Make.
+
+## Global Constraints
+
+- All content paths are relative to project root: `/home/mischa/Nextcloud/Projects/travel-blog-intotheeast/`
+- `user/` is a **separate git repo** — commit content changes there with `git -C user commit`
+- Never read `.env`; never ssh directly to production
+- Demo trip slug: `italy-2026-demo`; fictional dates: 2026-09-01 to 2026-09-08
+- `hero_image: ''` in all entry frontmatter — template auto-selects `01.jpg` as hero
+- Story images: 1600×1000 from `https://picsum.photos/seed/<seed>/1600/1000`
+- Entry images: 1200×800 from `https://picsum.photos/seed/<seed>/1200/800`
+- Dev server: `http://localhost:8081`
+
+---
+
+### Task 1: Cleanup, GPX rename, trip.md, dailies.md
+
+**Files:**
+- Delete: `user/docs/demo/trips/japan-korea-2026/` (entire folder)
+- Delete: `user/docs/demo/trips/italy-2025/dailies/` (entries only)
+- Delete: `user/docs/demo/trips/italy-2025/04.stories/` (stories only)
+- Delete: `user/docs/demo/trips/italy-2026-demo/dailies/` (replace with new entries in later tasks)
+- Delete: `user/docs/demo/trips/italy-2026-demo/04.stories/` (replace with new stories in later tasks)
+- Rename: 4 GPX files in `user/docs/demo/trips/italy-2026-demo/`
+- Modify: `user/docs/demo/trips/italy-2026-demo/trip.md`
+- Create: `user/docs/demo/trips/italy-2026-demo/dailies/dailies.md`
+- Modify: `CLAUDE.md` (update demo-load description)
+
+- [ ] **Step 1: Remove old demo data**
+
+```bash
+rm -rf user/docs/demo/trips/japan-korea-2026
+rm -rf user/docs/demo/trips/italy-2025/dailies
+rm -rf user/docs/demo/trips/italy-2025/04.stories
+rm -rf user/docs/demo/trips/italy-2026-demo/dailies
+rm -rf user/docs/demo/trips/italy-2026-demo/04.stories
+```
+
+- [ ] **Step 2: Rename the 4 new GPX files**
+
+```bash
+cd user/docs/demo/trips/italy-2026-demo
+
+mv "2025-10-11_2627663255_TGE Tuscany 2025 Final Route - 8 days - Day 1 - from Venturina Terme to Sugherella.gpx" \
+   day-1-campiglia-to-sugherella.gpx
+
+mv "2025-10-12_2630489431_TGE Tuscany 2025 Final Route - 8 days - Day 2.gpx" \
+   day-2-sugherella-to-orbetello.gpx
+
+mv "2025-10-13_2632495944_TGE Tuscany 2025 Final Route - 8 days - Day 3.gpx" \
+   day-3-orbetello-to-sorano.gpx
+
+mv "2025-10-14_2634086364_TGE Tuscany 2025 Final Route - 8 days - Day 4.gpx" \
+   day-4-sorano-to-val-dorcia.gpx
+
+cd ../../../..
+```
+
+- [ ] **Step 3: Verify 7 GPX files exist with correct names**
+
+```bash
+ls user/docs/demo/trips/italy-2026-demo/*.gpx
+```
+
+Expected output (7 files):
+```
+day-1-campiglia-to-sugherella.gpx
+day-2-sugherella-to-orbetello.gpx
+day-3-orbetello-to-sorano.gpx
+day-4-sorano-to-val-dorcia.gpx
+day-5-val-dorcia-to-siena.gpx
+day-6-siena-to-florence.gpx
+day-8-coast-to-piombino.gpx
+```
+
+- [ ] **Step 4: Update trip.md**
+
+Write `user/docs/demo/trips/italy-2026-demo/trip.md`:
+
+```markdown
+---
+title: 'Tuscany 2026'
+template: trip
+date: '2026-09-01'
+date_start: '2026-09-01'
+date_end: '2026-09-08'
+cover_image: ''
+---
+```
+
+- [ ] **Step 5: Create dailies index page**
+
+Create `user/docs/demo/trips/italy-2026-demo/dailies/dailies.md`:
+
+```markdown
+---
+title: Journal
+template: dailies
+---
+```
+
+- [ ] **Step 6: Recreate empty story and entry directories**
+
+```bash
+mkdir -p user/docs/demo/trips/italy-2026-demo/dailies
+mkdir -p user/docs/demo/trips/italy-2026-demo/04.stories
+```
+
+- [ ] **Step 7: Update CLAUDE.md demo-load description**
+
+In `CLAUDE.md`, find the line:
+```
+- `make demo-load` — load demo entries for both trips (Japan/Korea 2026 + Italy 2025 with real GPX)
+```
+
+Replace with:
+```
+- `make demo-load` — load demo content into `italy-2026-demo` trip (journal entries + stories + GPX)
+```
+
+- [ ] **Step 8: Commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "chore(demo): cleanup old demo data, rename GPX files, update trip.md"
+
+git add CLAUDE.md
+git commit -m "docs: update demo-load description in CLAUDE.md"
+```
+
+---
+
+### Task 2: Update stories.spec.js for new story slugs
+
+**Files:**
+- Modify: `tests/ui/stories.spec.js`
+
+The existing tests point to old story slugs (`val-dorcia-dawn`, `long-climb-montalcino`). New slugs are `val-dorcia-at-dawn` and `sorano-rock-and-time`. The shortcode assertions stay identical — the new stories are designed to match them.
+
+- [ ] **Step 1: Update slug constants and comments in stories.spec.js**
+
+Replace the top of `tests/ui/stories.spec.js` (lines up to the first test):
+
+```javascript
+// @ts-check
+// Tests: S1–S7 — story mode rendering and navigation
+// Requires demo data: run `make demo-load` before this suite.
+const { test, expect } = require('@playwright/test');
+
+const STORIES_URL    = '/trips/italy-2026-demo/stories';
+const STORY_GALLERY  = '/trips/italy-2026-demo/stories/val-dorcia-at-dawn';       // gallery-led: snap-gallery × 2, chapter-break, text-only pull-quote
+const STORY_SCROLLY  = '/trips/italy-2026-demo/stories/sorano-rock-and-time';     // scrolly-led: scrolly-section × 2, chapter-break, pull-quote with image
+const DEMO_STORY     = '/trips/italy-2026-demo/stories/val-dorcia-at-dawn';       // used for cross-trip hero sanity check
+```
+
+- [ ] **Step 2: Update the two hardcoded URLs in S7**
+
+In `tests/ui/stories.spec.js`, find and replace the hardcoded URL in S7:
+
+Old:
+```javascript
+test('S7: story body back link has back-pill class', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories/val-dorcia-dawn');
+```
+
+New:
+```javascript
+test('S7: story body back link has back-pill class', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories/val-dorcia-at-dawn');
+```
+
+- [ ] **Step 3: Verify tests reference correct slugs**
+
+```bash
+grep -n "val-dorcia\|montalcino\|sorano\|florence-without" tests/ui/stories.spec.js
+```
+
+Expected: no references to `val-dorcia-dawn` or `long-climb-montalcino`; `val-dorcia-at-dawn` and `sorano-rock-and-time` appear.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add tests/ui/stories.spec.js
+git commit -m "test(stories): update story slugs to match new demo content"
+```
+
+---
+
+### Task 3: Write Story 1 — Sorano: Rock and Time
+
+**Target:** `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/`  
+**Test coverage:** `STORY_SCROLLY` — needs scrolly-section × 2, chapter-break, pull-quote with image
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/story.md`
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/hero.jpg`
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/photo-1.jpg`
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/photo-2.jpg`
+
+- [ ] **Step 1: Create story directory and download images**
+
+```bash
+mkdir -p user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time
+SDIR=user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time
+curl -sL "https://picsum.photos/seed/demo-s1-hero/1600/1000" -o "$SDIR/hero.jpg"
+curl -sL "https://picsum.photos/seed/demo-s1-1/1600/1000"   -o "$SDIR/photo-1.jpg"
+curl -sL "https://picsum.photos/seed/demo-s1-2/1600/1000"   -o "$SDIR/photo-2.jpg"
+```
+
+- [ ] **Step 2: Write story.md**
+
+Write `user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/story.md`:
+
+```markdown
+---
+title: 'Sorano: Rock and Time'
+date: '2026-09-03'
+location_name: Sorano
+location_country: Italy
+lat: 42.683
+lng: 11.715
+hero_image: hero.jpg
+hero_alt: Medieval town of Sorano clinging to pale tufa cliffs at dusk
+published: true
+---
+
+The road from Orbetello climbs inland through scrubland and heat. For most of the afternoon there is nothing on the horizon except sky and the occasional electricity pylon. Then, at the top of a ridge, Sorano appears — and the word "appears" does not quite cover it. The town has been carved from a cliff of tufa, a pale volcanic rock so soft you can score it with a fingernail. The buildings are the cliff and the cliff is the buildings.
+
+[scrolly-section image="hero.jpg" alt="Medieval town of Sorano seen from the approach road, perched on pale tufa cliffs" caption="Sorano — tufa cliff town, Grosseto province"]
+The approach by bike gives you an unusually long time to study it. The descent into the valley and the climb back up take perhaps forty minutes, and the town is visible for most of that time, doing nothing, requiring nothing.
+
+---
+
+Close up the rock is extraordinary. Hundreds of tomb niches cut into the cliff face — Etruscan graves, most of them open to the sky now, their contents long removed. The people who built this town chose to live surrounded by the evidence of their own mortality. This seems either very brave or very sensible.
+
+---
+
+The gate into the old town is fifteenth century and narrow enough that loaded bikes don't fit without turning sideways. Inside, the air is noticeably cooler and the alleys are steep, paved with the same pale tufa, worn smooth by centuries of feet.
+[/scrolly-section]
+
+We found a wall to lean the bikes against and sat looking south over the valley we had come from. The light was going amber. Below us, the road we had ridden was already in shadow.
+
+[chapter-break image="photo-1.jpg" title="After Dark" number="II" alt="Narrow medieval alley in Sorano at dusk, pale stone walls glowing warm" /]
+
+[pull-quote image="photo-1.jpg" alt="Stone alley in Sorano lit by a single lantern at night"]
+A town built on rock, carved from rock, returning slowly to rock. Two thousand years of human effort and the cliff remains indifferent.
+[/pull-quote]
+
+[scrolly-section image="photo-2.jpg" alt="View south from the tufa cliff walls of Sorano at dusk" caption="Val di Fiora, from the old walls"]
+One restaurant was open. The menu was four items. We had the pasta with wild boar and the pasta with truffles and a carafe of local wine that cost six euros and was excellent.
+
+---
+
+The owner sat at the next table watching a football match on his phone without headphones. Nobody minded. The town outside was completely quiet.
+[/scrolly-section]
+
+We were in bed before nine. Sorano at night is absolutely silent. It has been this quiet, in approximately this configuration, for a very long time.
+```
+
+- [ ] **Step 3: Verify shortcode counts match test S3 expectations**
+
+```bash
+grep -c "scrolly-section" user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/story.md
+grep -c "chapter-break" user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/story.md
+grep -c "pull-quote image=" user/docs/demo/trips/italy-2026-demo/04.stories/01.sorano-rock-and-time/story.md
+```
+
+Expected: `2` scrolly-section tags (opening tags only), `1` chapter-break, `1` pull-quote with image.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add story 1 — Sorano: Rock and Time"
+```
+
+---
+
+### Task 4: Write Story 2 — Val d'Orcia at Dawn
+
+**Target:** `user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/`  
+**Test coverage:** `STORY_GALLERY` — needs snap-gallery × 2, chapter-break, text-only pull-quote
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md`
+- Create: `hero.jpg`, `photo-1.jpg`, `photo-2.jpg` (same directory)
+
+- [ ] **Step 1: Create story directory and download images**
+
+```bash
+mkdir -p user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn
+SDIR=user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn
+curl -sL "https://picsum.photos/seed/demo-s2-hero/1600/1000" -o "$SDIR/hero.jpg"
+curl -sL "https://picsum.photos/seed/demo-s2-1/1600/1000"   -o "$SDIR/photo-1.jpg"
+curl -sL "https://picsum.photos/seed/demo-s2-2/1600/1000"   -o "$SDIR/photo-2.jpg"
+```
+
+- [ ] **Step 2: Write story.md**
+
+Write `user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md`:
+
+```markdown
+---
+title: "Val d'Orcia at Dawn"
+date: '2026-09-05'
+location_name: Val d'Orcia
+location_country: Italy
+lat: 43.078
+lng: 11.676
+hero_image: hero.jpg
+hero_alt: Wide Tuscan valley at dawn, long cypress shadows across pale gravel road
+published: true
+---
+
+We left before the heat arrived. The alarm was five-thirty and the sky outside the tent was still more grey than blue. The valley was invisible in the dark except as an absence — a vast silence below us where the shapes of hills ought to be. By six the light had changed. The Val d'Orcia is one of those landscapes that photographers wait years to shoot at this hour, and you can see why: the light arrives at an angle that makes everything look like something from a different century.
+
+[snap-gallery images="hero.jpg,photo-1.jpg,photo-2.jpg" captions="Six in the morning: the valley belongs entirely to the light,The Cypress Road — every photograph of Tuscany was taken here or somewhere like it,A farmhouse that has been sitting on this hill for four hundred years" alts="Wide misty Tuscan valley at dawn with long shadows,Straight road lined by tall cypress trees in morning light,Stone farmhouse on a hilltop with rolling landscape behind" /]
+
+The roads down here are white gravel — strade bianche — and the tyres make a particular sound on them that you don't get anywhere else. We rode for two hours without seeing a car. The only other people were two elderly men walking a dog in the opposite direction. They waved.
+
+[chapter-break image="photo-1.jpg" title="The Hour Before Heat" alt="Cypress road vanishing into a hazy summer morning" /]
+
+By nine the temperature had already shifted. The quality of the light changed — softer, more diffuse, the sky turning white at the edges. The windows of the farmhouses began to open. Dogs that had been invisible in the dark became visible on walls and in doorways, watching us with professional detachment.
+
+[snap-gallery images="photo-2.jpg,hero.jpg" captions="The road changes from asphalt to gravel to packed earth and back again without warning,The valley floor at nine: the shadows have shortened, the colours have flattened" alts="Farmhouse detail with terracotta roof and single cypress tree,Tuscan valley road in mid-morning haze" /]
+
+[pull-quote]
+The best hours of a cycling day are the ones nobody else sees. Before the heat arrives, before the cafes open, before the traffic comes. Everything belongs to you then.
+[/pull-quote]
+
+We reached Pienza at eleven-thirty. The ice-cream queue was eight deep and entirely justified.
+```
+
+- [ ] **Step 3: Verify shortcode counts match test S2 expectations**
+
+```bash
+grep -c "snap-gallery" user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md
+grep -c "chapter-break" user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md
+grep -c "pull-quote__inner--no-image\|^\[pull-quote\]" user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md
+```
+
+Simpler check — verify exactly 2 `[snap-gallery` tags and 1 `[pull-quote]` (no `image=`):
+
+```bash
+grep -c "\[snap-gallery" user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md
+grep "\[pull-quote" user/docs/demo/trips/italy-2026-demo/04.stories/02.val-dorcia-at-dawn/story.md
+```
+
+Expected: `2` snap-gallery, and the pull-quote line has no `image=` attribute.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add story 2 — Val d'Orcia at Dawn"
+```
+
+---
+
+### Task 5: Write Story 3 — One Evening in Siena
+
+**Target:** `user/docs/demo/trips/italy-2026-demo/04.stories/03.one-evening-siena/`  
+**Primary shortcode:** `pull-quote` with background image; also uses `chapter-break` and `scrolly-section`
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/03.one-evening-siena/story.md`
+- Create: `hero.jpg`, `photo-1.jpg` (same directory)
+
+- [ ] **Step 1: Create story directory and download images**
+
+```bash
+mkdir -p user/docs/demo/trips/italy-2026-demo/04.stories/03.one-evening-siena
+SDIR=user/docs/demo/trips/italy-2026-demo/04.stories/03.one-evening-siena
+curl -sL "https://picsum.photos/seed/demo-s3-hero/1600/1000" -o "$SDIR/hero.jpg"
+curl -sL "https://picsum.photos/seed/demo-s3-1/1600/1000"   -o "$SDIR/photo-1.jpg"
+```
+
+- [ ] **Step 2: Write story.md**
+
+Write `user/docs/demo/trips/italy-2026-demo/04.stories/03.one-evening-siena/story.md`:
+
+```markdown
+---
+title: 'One Evening in Siena'
+date: '2026-09-05'
+location_name: Siena
+location_country: Italy
+lat: 43.318
+lng: 11.330
+hero_image: hero.jpg
+hero_alt: Piazza del Campo at dusk, terracotta paving fading from gold to shadow
+published: true
+---
+
+[pull-quote image="hero.jpg" alt="Piazza del Campo seen from the upper rim at golden hour"]
+Siena is not a city that tries to impress you. It has been here for a thousand years and intends to be here for a thousand more. You fit around it, not the other way.
+[/pull-quote]
+
+We rolled in at half past six, legs finished, panniers heavier than they started. The Campo appeared without warning at the end of a narrow street and we both stopped pedalling at exactly the same moment. That particular square does something to people. It is partly the shape — a shallow bowl, a scallop shell, the way it holds you — and partly the light at that hour, which turns the terracotta pavement the colour of old copper.
+
+[chapter-break image="photo-1.jpg" title="The Campo" number="I" alt="Detail of Siena's herringbone brick pavement catching the last light" /]
+
+[scrolly-section image="hero.jpg" alt="Piazza del Campo filling with people as evening comes" caption="Campo, 19:00 — the square fills from the edges inward"]
+The locals arrive first. They know which spot faces west and which benches stay in the shade longest. Then the tourists, then the pigeons, then the long shadows.
+
+---
+
+A busker with an accordion near the Fonte Gaia. A group of students lying on the slope reading. Three children running in a circle for reasons nobody questioned.
+
+---
+
+We sat on the pavement with our backs against the warm brickwork of the Palazzo Pubblico and did not move for forty minutes. The relief of sitting still after eight hours on a bike is a specific physical sensation. It travels upward from your legs and settles somewhere just behind the sternum.
+[/scrolly-section]
+
+We found a place for dinner three streets away, down a flight of steps with no sign outside. The pasta was handmade, the wine was local, the bill was reasonable. We were in bed by ten. Tomorrow: Florence.
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add story 3 — One Evening in Siena"
+```
+
+---
+
+### Task 6: Write Story 4 — Florence Without a Map
+
+**Target:** `user/docs/demo/trips/italy-2026-demo/04.stories/04.florence-without-a-map/`  
+**Primary shortcode:** `chapter-break` as structural divider; also uses `snap-gallery`, `pull-quote` (text-only), `scrolly-section`
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2026-demo/04.stories/04.florence-without-a-map/story.md`
+- Create: `hero.jpg`, `photo-1.jpg` (same directory)
+
+- [ ] **Step 1: Create story directory and download images**
+
+```bash
+mkdir -p user/docs/demo/trips/italy-2026-demo/04.stories/04.florence-without-a-map
+SDIR=user/docs/demo/trips/italy-2026-demo/04.stories/04.florence-without-a-map
+curl -sL "https://picsum.photos/seed/demo-s4-hero/1600/1000" -o "$SDIR/hero.jpg"
+curl -sL "https://picsum.photos/seed/demo-s4-1/1600/1000"   -o "$SDIR/photo-1.jpg"
+```
+
+- [ ] **Step 2: Write story.md**
+
+Write `user/docs/demo/trips/italy-2026-demo/04.stories/04.florence-without-a-map/story.md`:
+
+```markdown
+---
+title: 'Florence Without a Map'
+date: '2026-09-07'
+location_name: Florence
+location_country: Italy
+lat: 43.769
+lng: 11.255
+hero_image: hero.jpg
+hero_alt: Arno river at midday with Ponte Vecchio, ochre buildings reflected in still water
+published: true
+---
+
+No route today. No GPS, no distance target, no reason to be anywhere by any particular time. After six days of forward motion this felt almost wrong — the instinct to check the elevation profile arriving at nothing. We put the bikes in the hotel basement and walked out into Florence on foot.
+
+[chapter-break image="hero.jpg" title="Day Seven" number="VII" alt="Arno river and Ponte Vecchio from Ponte Santa Trinita at midday" /]
+
+[snap-gallery images="hero.jpg,photo-1.jpg" captions="The Arno at noon — greener than expected, the bridges older than you remember,Via dei Servi: washing lines, shutters, a cat on a warm stone ledge that had been warm since morning" alts="Arno river with Ponte Vecchio reflected in still water at midday,Narrow Florence street with laundry strung between buildings" /]
+
+[pull-quote]
+Cycling makes you earn every city you arrive at. Florence, we got for free. It felt like a gift and a debt simultaneously.
+[/pull-quote]
+
+[scrolly-section image="photo-1.jpg" alt="Narrow Oltrarno street in afternoon light" caption="Oltrarno, 14:00"]
+The Uffizi had a queue that stretched around two corners and disappeared into a side street. We looked at it for a moment and went to find coffee instead. This felt correct.
+
+---
+
+A covered market in the Oltrarno that nobody had told us about. A man selling leather goods from a table he clearly reassembled each morning from identical components. A small dog sleeping under a fruit stall in a precisely calculated patch of shade.
+
+---
+
+We crossed the Ponte Vecchio at two in the afternoon, which is exactly the wrong time to cross the Ponte Vecchio, and it was still worth it. The light off the Arno at that hour is genuinely extraordinary and all the photographs in the world do not prepare you for it.
+[/scrolly-section]
+
+Dinner near the apartment, early. Feet sore in a different way from legs sore — a smaller, more concentrated complaint. Tomorrow: the last day. The coast road home.
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add story 4 — Florence Without a Map"
+```
+
+---
+
+### Task 7: Write Journal Entries — Days 1–4 (entries 1–6)
+
+**Target:** `user/docs/demo/trips/italy-2026-demo/dailies/`
+
+Each entry directory name: `<slug>.entry/`  
+Each entry contains: `entry.md` + numbered images `01.jpg`, `02.jpg`, …
+
+- [ ] **Step 1: Entry 1 — Setting Off from Campiglia (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-01-0700-setting-off-from-campiglia.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d1-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d1-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Setting Off from Campiglia'
+date: '2026-09-01 07:00'
+template: entry
+published: true
+hero_image: ''
+lat: 43.024
+lng: 10.603
+location_city: Campiglia Marittima
+location_country: Italy
+weather_temp_c: 27
+weather_desc: Sunny
+---
+
+Seven in the morning and the coast road is still cool. We loaded the bikes in the car park below the old town, the panniers heavier than they should be and the weather forecast saying nine consecutive days of sun. The route heads south first — down into the Maremma, then east, then a long loop back. Eight days. Nobody goes this way in September except cyclists and people who have got lost.
+```
+
+- [ ] **Step 2: Entry 2 — Maremma in Full Sun (3 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-02-1130-maremma-in-full-sun.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d2a-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d2a-2/1200/800" -o "$EDIR/02.jpg"
+curl -sL "https://picsum.photos/seed/demo-d2a-3/1200/800" -o "$EDIR/03.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Maremma in Full Sun'
+date: '2026-09-02 11:30'
+template: entry
+published: true
+hero_image: ''
+lat: 42.612
+lng: 11.171
+location_city: Maremma
+location_country: Italy
+weather_temp_c: 29
+weather_desc: Sunny
+---
+
+Eleven-thirty and already thirty degrees. The Maremma is agricultural land and scrubland and very little else, and in September it has the quality of a landscape that has given up trying. The road is straight, the sun is direct, the shadows are almost vertical. We stopped at a petrol station and drank two cans of something cold each. The man at the counter looked at us like people who had made a series of questionable decisions.
+```
+
+- [ ] **Step 3: Entry 3 — The Lagoon at Dusk (3 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-02-1900-the-lagoon-at-dusk.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d2b-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d2b-2/1200/800" -o "$EDIR/02.jpg"
+curl -sL "https://picsum.photos/seed/demo-d2b-3/1200/800" -o "$EDIR/03.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'The Lagoon at Dusk'
+date: '2026-09-02 19:00'
+template: entry
+published: true
+hero_image: ''
+lat: 42.442
+lng: 11.218
+location_city: Orbetello
+location_country: Italy
+weather_temp_c: 24
+weather_desc: Partly cloudy
+---
+
+Orbetello sits on a causeway between two lagoons and at dusk the light does something remarkable to the water. Pink flamingos — real ones, not ornamental — were standing in the shallows on the western side, perfectly still. We ate at a table outside overlooking the eastern lagoon. The sky turned orange and then purple and then a deep blue that was almost indistinguishable from the water. The wine was cold and the pasta had clams.
+```
+
+- [ ] **Step 4: Entry 4 — Orbetello Morning (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-03-0800-orbetello-morning.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d3a-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d3a-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Orbetello Morning'
+date: '2026-09-03 08:00'
+template: entry
+published: true
+hero_image: ''
+lat: 42.442
+lng: 11.217
+location_city: Orbetello
+location_country: Italy
+weather_temp_c: 22
+weather_desc: Sunny
+---
+
+The lagoon at eight in the morning is a different thing from the lagoon at eight in the evening. Flat, silver, nearly silent. A single fisherman in a small boat about two hundred metres out, not appearing to fish. We left before the town had properly woken up, heading northeast on roads that climbed immediately and steeply into a landscape of oak and limestone that felt nothing like the coast we had left behind twenty minutes before.
+```
+
+- [ ] **Step 5: Entry 5 — Tufa and Towers (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-03-1700-tufa-and-towers.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d3b-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d3b-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Tufa and Towers'
+date: '2026-09-03 17:00'
+template: entry
+published: true
+hero_image: ''
+lat: 42.683
+lng: 11.715
+location_city: Sorano
+location_country: Italy
+weather_temp_c: 26
+weather_desc: Sunny
+---
+
+Sorano appears on the horizon an hour before you reach it: a cluster of towers and walls on a pale cliff, floating above the valley. The closer you get the stranger it becomes. The town is not built on rock — the town is rock, volcanic tufa carved and inhabited over two thousand years. The Etruscans started it. Everyone since has just kept adding floors. We are staying the night and it already feels like somewhere that requires more time than we have.
+```
+
+- [ ] **Step 6: Entry 6 — The Long Climb North (4 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-04-1500-the-long-climb-north.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d4-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d4-2/1200/800" -o "$EDIR/02.jpg"
+curl -sL "https://picsum.photos/seed/demo-d4-3/1200/800" -o "$EDIR/03.jpg"
+curl -sL "https://picsum.photos/seed/demo-d4-4/1200/800" -o "$EDIR/04.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'The Long Climb North'
+date: '2026-09-04 15:00'
+template: entry
+published: true
+hero_image: ''
+lat: 43.077
+lng: 11.678
+location_city: "Val d'Orcia"
+location_country: Italy
+weather_temp_c: 23
+weather_desc: Partly cloudy
+---
+
+Today was the hardest day. The route from Sorano to the Val d'Orcia crosses the eastern slope of Monte Amiata, which sounds manageable on a map and is not manageable at all. By noon we had climbed eleven hundred metres. By two we were somewhere above Seggiano in thin cloud, the views long gone, legs complaining in a language that had become very specific. Then the cloud lifted and the Val d'Orcia was simply there below us: pale roads, dark cypress, the whole thing exactly as advertised. Sometimes the landscapes that have been photographed to death are still worth arriving at.
+```
+
+- [ ] **Step 7: Commit entries 1–6**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add journal entries days 1–4 with photos"
+```
+
+---
+
+### Task 8: Write Journal Entries — Days 5–8 (entries 7–12)
+
+- [ ] **Step 1: Entry 7 — Before the Heat Arrives (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-05-0830-before-the-heat-arrives.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d5a-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d5a-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Before the Heat Arrives'
+date: '2026-09-05 08:30'
+template: entry
+published: true
+hero_image: ''
+lat: 43.078
+lng: 11.676
+location_city: Pienza
+location_country: Italy
+weather_temp_c: 21
+weather_desc: Sunny
+---
+
+Six o'clock and the valley below Pienza is still in shadow. We left camp early on purpose — the route to Siena is long and September sun waits for no one. On the strade bianche the tyres make a sound like distant applause. No cars for the first two hours. Just the road and the light doing things to the cypress trees that would be embarrassing to describe in any other context.
+```
+
+- [ ] **Step 2: Entry 8 — Into Siena (3 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-05-1800-into-siena.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d5b-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d5b-2/1200/800" -o "$EDIR/02.jpg"
+curl -sL "https://picsum.photos/seed/demo-d5b-3/1200/800" -o "$EDIR/03.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Into Siena'
+date: '2026-09-05 18:00'
+template: entry
+published: true
+hero_image: ''
+lat: 43.318
+lng: 11.335
+location_city: Siena
+location_country: Italy
+weather_temp_c: 25
+weather_desc: Sunny
+---
+
+The approach to Siena by bike is through streets that get progressively older and steeper until suddenly the Campo is there. We had both seen it in photographs and the photographs are accurate in every way except one: they do not tell you how the square smells — stone and frying onions and the particular warm stillness of a Sienese summer evening. We sat on the pavement with our backs against the Palazzo Pubblico for forty minutes and did not want to be anywhere else.
+```
+
+- [ ] **Step 3: Entry 9 — Florence by Nightfall (3 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-06-2000-florence-by-nightfall.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d6-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d6-2/1200/800" -o "$EDIR/02.jpg"
+curl -sL "https://picsum.photos/seed/demo-d6-3/1200/800" -o "$EDIR/03.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Florence by Nightfall'
+date: '2026-09-06 20:00'
+template: entry
+published: true
+hero_image: ''
+lat: 43.767
+lng: 11.253
+location_city: Florence
+location_country: Italy
+weather_temp_c: 21
+weather_desc: Cloudy
+---
+
+A long day. Siena to Florence is ninety kilometres and involves two significant climbs before you reach the Chianti hills, after which it becomes more manageable but you have already used the legs you needed. We came in from the south as the light was going, the city materialising from a distance as a density of rooftops and towers. The Arno appeared between buildings and we crossed it and then we were in, which is always a slightly surprising moment after a long day.
+```
+
+- [ ] **Step 4: Entry 10 — One Rest Day (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-07-1400-one-rest-day.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d7-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d7-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'One Rest Day'
+date: '2026-09-07 14:00'
+template: entry
+published: true
+hero_image: ''
+lat: 43.769
+lng: 11.255
+location_city: Florence
+location_country: Italy
+weather_temp_c: 22
+weather_desc: Partly cloudy
+---
+
+The bikes stayed in the basement. We walked instead, which after six days of cycling felt simultaneously easier and harder — easier on the legs, harder on the feet, which are used to being passive. Florence does not require a plan. Every street contains something. We crossed the Arno four times from different bridges, each one giving a slightly different version of the same view, all of them good.
+```
+
+- [ ] **Step 5: Entry 11 — Dawn on the Cecina Coast (1 photo)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-08-0730-dawn-on-the-cecina-coast.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d8a-1/1200/800" -o "$EDIR/01.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Dawn on the Cecina Coast'
+date: '2026-09-08 07:30'
+template: entry
+published: true
+hero_image: ''
+lat: 43.553
+lng: 10.313
+location_city: Cecina
+location_country: Italy
+weather_temp_c: 20
+weather_desc: Sunny
+---
+
+The last day starts on the coast road south of Cecina, the sea visible between the pine trees. We have been inland for most of the week and the smell of salt water is a surprise. The road is flat, which after eight days of Tuscan hills feels almost suspicious. We rode in silence for the first hour. There was nothing that needed saying.
+```
+
+- [ ] **Step 6: Entry 12 — Home (2 photos)**
+
+```bash
+EDIR=user/docs/demo/trips/italy-2026-demo/dailies/2026-09-08-1630-home.entry
+mkdir -p "$EDIR"
+curl -sL "https://picsum.photos/seed/demo-d8b-1/1200/800" -o "$EDIR/01.jpg"
+curl -sL "https://picsum.photos/seed/demo-d8b-2/1200/800" -o "$EDIR/02.jpg"
+```
+
+Write `$EDIR/entry.md`:
+
+```markdown
+---
+title: 'Home'
+date: '2026-09-08 16:30'
+template: entry
+published: true
+hero_image: ''
+lat: 43.017
+lng: 10.587
+location_city: Campiglia Marittima
+location_country: Italy
+weather_temp_c: 26
+weather_desc: Sunny
+---
+
+The old town of Campiglia was visible on its hill for the last twenty kilometres, appearing and disappearing between the trees the way it had appeared on the horizon eight days ago when we left. The loop is complete: same car park, same view across the coast, different legs. The bikes went back in the car and we sat on a wall and counted the countries and the kilometres and the pasta dishes. Eight days, one loop, Tuscany in September. It was exactly what it was supposed to be.
+```
+
+- [ ] **Step 7: Verify 12 entry directories exist**
+
+```bash
+ls user/docs/demo/trips/italy-2026-demo/dailies/ | grep -c "\.entry$"
+```
+
+Expected: `12`
+
+- [ ] **Step 8: Commit entries 7–12**
+
+```bash
+git -C user add -A
+git -C user commit -m "feat(demo): add journal entries days 5–8 with photos"
+```
+
+---
+
+### Task 9: Verify with demo-load and run tests
+
+**Prerequisite:** Docker dev server running at `http://localhost:8081`
+
+- [ ] **Step 1: Reset any existing demo content**
+
+```bash
+make demo-reset
+```
+
+- [ ] **Step 2: Load demo content**
+
+```bash
+make demo-load
+```
+
+Expected: no errors; ends with `Cache cleared`.
+
+- [ ] **Step 3: Smoke check in browser**
+
+Open `http://localhost:8081/trips/italy-2026-demo` — verify:
+- Trip page shows "Tuscany 2026"
+- Filter bar shows All / Journal / Stories
+- Journal entries visible (should show most recent first)
+- Stories tab shows 4 story cards
+
+Open one entry (e.g. Entry 6 with 4 photos) and verify:
+- Hero image renders (01.jpg)
+- Gallery grid shows all 4 photos
+- Lightbox opens on click
+
+Open `http://localhost:8081/trips/italy-2026-demo/stories/sorano-rock-and-time` and verify:
+- `scrolly` sections render
+- `chapter-break` renders
+- `pull-quote` with background image renders
+
+Open `http://localhost:8081/trips/italy-2026-demo/map` and verify:
+- All 7 GPX routes render on the map
+- Entry markers appear at the correct coordinates
+
+- [ ] **Step 4: Run the full test suite**
+
+```bash
+npm run test:ui
+```
+
+Expected: all tests pass. Key tests to watch:
+- `S1`: stories listing shows ≥ 3 cards → passes (4 stories)
+- `S2`: gallery story has 2 snap-galleries, chapter-break, text-only pull-quote
+- `S3`: scrolly story has 2 scrolly-sections, chapter-break, pull-quote with image
+- `S4`: no JS errors on scrolly story
+- `S5`: back button navigates to stories listing
+- `S6/S7`: demo story hero renders, back-pill present
+
+If a test fails, diagnose before moving on — do not proceed to final commit with failing tests.
+
+- [ ] **Step 5: Final commit**
+
+```bash
+git -C user add -A
+git -C user commit -m "chore(demo): verify demo content complete — all tests passing"
+```
+
+---
+
+## Self-Review Checklist
+
+- [x] Spec § 1 Cleanup → Task 1
+- [x] Spec § 2 GPX rename (4 files) → Task 1, Step 2–3
+- [x] Spec § 3 Journal entries (12) → Tasks 7–8
+- [x] Spec § 4 Stories (4) → Tasks 3–6; shortcode counts designed to match S2/S3 test assertions
+- [x] Spec § 5 Makefile — existing `cp -r` commands already handle images; no Makefile changes needed
+- [x] Spec § 6 trip.md update → Task 1, Step 4
+- [x] Spec § 7 What is NOT changing — italy-2025 pages untouched, japan-korea-2026 pages untouched ✓
+- [x] stories.spec.js slug update → Task 2 (covers both constants and the hardcoded S7 URL)
+- [x] `dailies.md` index page → Task 1, Step 5 (needed for Grav to render the dailies listing after demo-reset)
+- [x] No placeholder text in any step
+- [x] All 4 shortcode types appear across 4 stories, with STORY_GALLERY and STORY_SCROLLY matching test assertion counts

docs/working/plans/2026-06-20-gpx-connector-logic.md

@@ -0,0 +1,935 @@
+# GPX Connector Logic 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:** Suppress the straight-line connector between adjacent map markers when a single GPX file covers both endpoints; keep connectors for uncovered gaps; add `force_connect` and `transport_mode` fields to entry/story blueprints.
+
+**Architecture:** Pure client-side. GPX files are already fetched to display tracks; their parsed trackpoints are reused to run a same-file proximity check per adjacent marker pair. Journey segments are built after all GPX fetches settle (Promise.all). The algorithm lives in `maplibre-utils.js` as pure functions exposed on `MapUtils`.
+
+**Tech Stack:** Vanilla JS (ES5 IIFE pattern matching existing code), MapLibre GL 4, `@mapbox/togeojson` 0.16.2, Grav 2 blueprint YAML, Playwright for tests.
+
+## Global Constraints
+
+- ES5 syntax only in all JS — no arrow functions, const/let, template literals, or modules (matching existing `maplibre-utils.js` style)
+- All JS functions inside the existing `maplibre-utils.js` IIFE
+- Grav blueprint fields use `header.<fieldname>` prefix in the `form.fields` tree
+- Proximity threshold: **10 km** (hardcoded, not configurable)
+- Trackpoints stored internally as `[lat, lng]` (latitude first); MapLibre coords are `[lng, lat]` (longitude first) — never mix these up
+- Demo data required for Playwright tests: run `make demo-load` before the test suite
+- Dev server runs at `http://localhost:8081`
+
+---
+
+### Task 1: Blueprint — add `force_connect` and `transport_mode` fields
+
+**Files:**
+- Modify: `user/themes/intotheeast/blueprints/entry.yaml`
+- Create: `user/themes/intotheeast/blueprints/story.yaml`
+
+**Interfaces:**
+- Produces: `entry.header.force_connect` (bool, default false), `entry.header.transport_mode` (string, default null) available in Twig templates and Admin2 UI
+
+- [ ] **Step 1: Add a Journey tab to `entry.yaml`**
+
+In `user/themes/intotheeast/blueprints/entry.yaml`, append this tab section after the `publishing:` tab block (before the closing of the `tabs.fields` block). The final file should end with:
+
+```yaml
+        journey:
+          type: tab
+          title: Journey
+          fields:
+            header.transport_mode:
+              type: select
+              label: How I arrived here
+              default: ''
+              options:
+                '': '— not specified —'
+                'walking': 'Walking'
+                'bicycle': 'Bicycle'
+                'bus': 'Bus'
+                'train': 'Train'
+                'car': 'Car'
+
+            header.force_connect:
+              type: toggle
+              label: Force connector line
+              help: 'When GPX tracks are present, always draw a connector from the previous marker to this one'
+              highlight: 1
+              default: 0
+              options:
+                1: 'Yes'
+                0: 'No'
+              validate:
+                type: bool
+```
+
+- [ ] **Step 2: Create `story.yaml` blueprint**
+
+Create `user/themes/intotheeast/blueprints/story.yaml` with this full content (covers all existing story frontmatter fields plus the new Journey tab):
+
+```yaml
+title: 'Story'
+
+form:
+  fields:
+    tabs:
+      type: tabs
+      active: 1
+      fields:
+
+        content:
+          type: tab
+          title: Content
+          fields:
+            header.title:
+              type: text
+              label: Title
+              validate:
+                required: true
+
+            header.date:
+              type: datetime
+              label: Date
+              format: 'Y-m-d H:i'
+              validate:
+                required: true
+
+            header.hero_image:
+              type: text
+              label: Hero Image
+              placeholder: 'hero.jpg'
+              help: 'Filename of the hero image (upload via Media tab)'
+
+            header.hero_alt:
+              type: text
+              label: Hero Image Alt Text
+              placeholder: 'Description of the hero image'
+
+            content:
+              type: markdown
+              label: Content
+              validate:
+                required: true
+
+        location:
+          type: tab
+          title: Location
+          fields:
+            header.location_name:
+              type: text
+              label: Location Name
+              placeholder: 'e.g. Val d''Orcia'
+
+            header.location_country:
+              type: text
+              label: Country
+              placeholder: 'e.g. Italy'
+
+            header.lat:
+              type: text
+              label: Latitude
+              placeholder: '43.0780'
+              help: 'GPS latitude (decimal degrees)'
+
+            header.lng:
+              type: text
+              label: Longitude
+              placeholder: '11.6760'
+              help: 'GPS longitude (decimal degrees)'
+
+        publishing:
+          type: tab
+          title: Publishing
+          fields:
+            header.published:
+              type: toggle
+              label: Published
+              highlight: 1
+              default: 1
+              options:
+                1: 'Yes'
+                0: 'No'
+              validate:
+                type: bool
+
+        journey:
+          type: tab
+          title: Journey
+          fields:
+            header.transport_mode:
+              type: select
+              label: How I arrived here
+              default: ''
+              options:
+                '': '— not specified —'
+                'walking': 'Walking'
+                'bicycle': 'Bicycle'
+                'bus': 'Bus'
+                'train': 'Train'
+                'car': 'Car'
+
+            header.force_connect:
+              type: toggle
+              label: Force connector line
+              help: 'When GPX tracks are present, always draw a connector from the previous marker to this one'
+              highlight: 1
+              default: 0
+              options:
+                1: 'Yes'
+                0: 'No'
+              validate:
+                type: bool
+```
+
+- [ ] **Step 3: Manual verification**
+
+Open Admin2 at `http://localhost:8081/admin` → edit any entry under a dailies folder → confirm a "Journey" tab appears with "How I arrived here" select and "Force connector line" toggle. Then open any story page → confirm the same "Journey" tab is present.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add user/themes/intotheeast/blueprints/entry.yaml user/themes/intotheeast/blueprints/story.yaml
+git commit -m "feat: add force_connect and transport_mode fields to entry and story blueprints"
+```
+
+---
+
+### Task 2: Algorithm functions in `maplibre-utils.js`
+
+**Files:**
+- Modify: `user/themes/intotheeast/js/maplibre-utils.js`
+- Create: `tests/ui/gpx-journey.spec.js`
+
+**Interfaces:**
+- Produces:
+  - `MapUtils.extractTrackpoints(geojson)` → `[[lat, lng], ...]`
+  - `MapUtils.buildJourneySegments(entries, allTrackpoints, thresholdKm)` → `[[lng, lat], ...][]`
+  - `MapUtils.addJourneySegments(map, segments, baseSourceId)` → void
+- Consumes: `toGeoJSON.gpx()` output (GeoJSON FeatureCollection)
+
+- [ ] **Step 1: Write failing Playwright tests**
+
+Create `tests/ui/gpx-journey.spec.js`:
+
+```javascript
+// @ts-check
+// Tests: G1–G4 — buildJourneySegments algorithm correctness
+// These tests load the italy-2025 map page (which has GPX) to get MapUtils in scope,
+// then call the functions with synthetic data via page.evaluate.
+// Requires demo data: run `make demo-load` before this suite.
+const { test, expect } = require('@playwright/test');
+
+async function getMapUtils(page) {
+    await page.goto('/trips/italy-2025/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+}
+
+// G1: No GPX → all pairs connected in one segment
+test('G1: all markers connected when no GPX files present', async ({ page }) => {
+    await getMapUtils(page);
+
+    var count = await page.evaluate(function () {
+        var entries = [
+            { lat: '43.0', lng: '11.0', force_connect: false },
+            { lat: '44.0', lng: '12.0', force_connect: false },
+            { lat: '45.0', lng: '13.0', force_connect: false }
+        ];
+        return MapUtils.buildJourneySegments(entries, [], 10).length;
+    });
+
+    expect(count).toBe(1);
+});
+
+// G2: Same GPX file covers both markers → connector suppressed (0 segments)
+test('G2: connector suppressed when same GPX file covers both markers', async ({ page }) => {
+    await getMapUtils(page);
+
+    var count = await page.evaluate(function () {
+        var e1 = { lat: '43.000', lng: '11.000', force_connect: false };
+        var e2 = { lat: '43.010', lng: '11.010', force_connect: false };
+        // Trackpoints covering both (stored as [lat, lng])
+        var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]];
+        return MapUtils.buildJourneySegments([e1, e2], [track], 10).length;
+    });
+
+    expect(count).toBe(0);
+});
+
+// G3: force_connect overrides GPX suppression
+test('G3: force_connect keeps connector even when GPX covers both markers', async ({ page }) => {
+    await getMapUtils(page);
+
+    var count = await page.evaluate(function () {
+        var e1 = { lat: '43.000', lng: '11.000', force_connect: false };
+        var e2 = { lat: '43.010', lng: '11.010', force_connect: true };
+        var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]];
+        return MapUtils.buildJourneySegments([e1, e2], [track], 10).length;
+    });
+
+    expect(count).toBe(1);
+});
+
+// G4: Markers near DIFFERENT GPX files → connector kept
+test('G4: connector kept when markers are near different GPX files', async ({ page }) => {
+    await getMapUtils(page);
+
+    var count = await page.evaluate(function () {
+        var e1 = { lat: '43.000', lng: '11.000', force_connect: false };
+        var e2 = { lat: '45.000', lng: '13.000', force_connect: false };
+        // Two separate files — each only covers one marker
+        var trackA = [[43.000, 11.000], [43.005, 11.005]]; // near e1 only
+        var trackB = [[45.000, 13.000], [45.005, 13.005]]; // near e2 only
+        return MapUtils.buildJourneySegments([e1, e2], [trackA, trackB], 10).length;
+    });
+
+    expect(count).toBe(1);
+});
+
+// G5: First pair suppressed, second pair kept → one segment [e2, e3]
+test('G5: suppressed first pair leaves one segment from e2 to e3', async ({ page }) => {
+    await getMapUtils(page);
+
+    var count = await page.evaluate(function () {
+        // e1→e2: covered by track → suppressed; e1 is orphaned (< 2 pts, not pushed)
+        // e2→e3: not covered → connector kept → segment [e2, e3]
+        var e1 = { lat: '43.000', lng: '11.000', force_connect: false };
+        var e2 = { lat: '43.010', lng: '11.010', force_connect: false };
+        var e3 = { lat: '45.000', lng: '13.000', force_connect: false };
+        var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]]; // covers e1 and e2 only
+        var segs = MapUtils.buildJourneySegments([e1, e2, e3], [track], 10);
+        return segs.length;
+    });
+
+    expect(count).toBe(1); // one segment: [e2 → e3]
+});
+```
+
+- [ ] **Step 2: Run tests to confirm they fail**
+
+```bash
+npx playwright test tests/ui/gpx-journey.spec.js
+```
+
+Expected: All 5 tests fail with `MapUtils.buildJourneySegments is not a function` (or similar).
+
+- [ ] **Step 3: Add algorithm functions to `maplibre-utils.js`**
+
+Inside the IIFE in `user/themes/intotheeast/js/maplibre-utils.js`, add the following functions **before** the `global.MapUtils = ...` line at the bottom:
+
+```javascript
+  /* ── GPX connector algorithm ────────────────────────────────────────── */
+
+  /* Haversine distance in km between two [lat, lng] points */
+  function haversineKm(lat1, lng1, lat2, lng2) {
+    var R    = 6371;
+    var dLat = (lat2 - lat1) * Math.PI / 180;
+    var dLng = (lng2 - lng1) * Math.PI / 180;
+    var a    = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+               Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+               Math.sin(dLng / 2) * Math.sin(dLng / 2);
+    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  }
+
+  /*
+   * Extract trackpoints from a toGeoJSON output.
+   * Returns [[lat, lng], ...] — latitude first (internal convention).
+   * GeoJSON coordinates are [lng, lat]; we flip them here.
+   */
+  function extractTrackpoints(geojson) {
+    var points = [];
+    (geojson.features || []).forEach(function (feat) {
+      var coords = [];
+      if (feat.geometry.type === 'LineString') {
+        coords = feat.geometry.coordinates;
+      } else if (feat.geometry.type === 'MultiLineString') {
+        feat.geometry.coordinates.forEach(function (line) {
+          coords = coords.concat(line);
+        });
+      }
+      coords.forEach(function (c) { points.push([c[1], c[0]]); }); // [lng,lat] → [lat,lng]
+    });
+    return points;
+  }
+
+  /*
+   * Check whether a marker is within thresholdKm of any trackpoint in the array.
+   * trackpoints: [[lat, lng], ...] (internal convention, latitude first).
+   * Samples every 10th point for performance; always checks the last point.
+   */
+  function isNearTrack(markerLat, markerLng, trackpoints, thresholdKm) {
+    if (!trackpoints || trackpoints.length === 0) return false;
+    var degLat = thresholdKm / 111;
+    var degLng = thresholdKm / (111 * Math.cos(markerLat * Math.PI / 180));
+    for (var i = 0; i < trackpoints.length; i += 10) {
+      var pt = trackpoints[i];
+      if (Math.abs(pt[0] - markerLat) > degLat || Math.abs(pt[1] - markerLng) > degLng) continue;
+      if (haversineKm(markerLat, markerLng, pt[0], pt[1]) <= thresholdKm) return true;
+    }
+    var last = trackpoints[trackpoints.length - 1];
+    return haversineKm(markerLat, markerLng, last[0], last[1]) <= thresholdKm;
+  }
+
+  /*
+   * Build journey line segments from entries and GPX trackpoints.
+   *
+   * entries:        [{lat, lng, force_connect}, ...] in chronological order
+   * allTrackpoints: [ [[lat,lng],...], ... ] — one sub-array per GPX file
+   * thresholdKm:    proximity radius (default 10)
+   *
+   * Returns array of segments, each segment being [[lng, lat], ...] in MapLibre
+   * coordinate order. A segment with < 2 points is omitted.
+   *
+   * Rules:
+   *   - No GPX files → all adjacent pairs connected (one segment)
+   *   - GPX present, pair covered by same file → connector suppressed
+   *   - GPX present, pair NOT covered by any single file → connector drawn
+   *   - force_connect on arriving entry → always draw connector
+   */
+  function buildJourneySegments(entries, allTrackpoints, thresholdKm) {
+    thresholdKm = thresholdKm || 10;
+    var hasGpx   = allTrackpoints && allTrackpoints.length > 0;
+    var segments = [];
+    var current  = [];
+
+    for (var i = 0; i < entries.length; i++) {
+      var e      = entries[i];
+      var lngLat = [parseFloat(e.lng), parseFloat(e.lat)]; // MapLibre: [lng, lat]
+
+      if (i === 0) {
+        current.push(lngLat);
+        continue;
+      }
+
+      var prev    = entries[i - 1];
+      var connect;
+
+      if (!hasGpx || e.force_connect) {
+        connect = true;
+      } else {
+        var pLat    = parseFloat(prev.lat);
+        var pLng    = parseFloat(prev.lng);
+        var cLat    = parseFloat(e.lat);
+        var cLng    = parseFloat(e.lng);
+        var covered = false;
+        for (var f = 0; f < allTrackpoints.length; f++) {
+          if (isNearTrack(pLat, pLng, allTrackpoints[f], thresholdKm) &&
+              isNearTrack(cLat, cLng, allTrackpoints[f], thresholdKm)) {
+            covered = true;
+            break;
+          }
+        }
+        connect = !covered;
+      }
+
+      if (connect) {
+        current.push(lngLat);
+      } else {
+        if (current.length >= 2) segments.push(current);
+        current = [lngLat]; // start new segment from this point
+      }
+    }
+
+    if (current.length >= 2) segments.push(current);
+    return segments;
+  }
+
+  /*
+   * Draw journey segments — calls addJourneyLine once per segment.
+   * baseSourceId: e.g. 'journey' → sources become 'journey-0', 'journey-1', ...
+   * (single segment gets plain 'journey' for backwards compatibility).
+   */
+  function addJourneySegments(map, segments, baseSourceId) {
+    segments.forEach(function (coords, i) {
+      var sid = segments.length === 1 ? baseSourceId : baseSourceId + '-' + i;
+      addJourneyLine(map, coords, sid);
+    });
+  }
+```
+
+- [ ] **Step 4: Update the `MapUtils` export**
+
+Replace the existing `global.MapUtils = ...` line at the bottom of the IIFE with:
+
+```javascript
+  global.MapUtils = {
+    MAP_STYLE:            MAP_STYLE,
+    ACCENT:               ACCENT,
+    addJourneyLine:       addJourneyLine,
+    addJourneySegments:   addJourneySegments,
+    buildJourneySegments: buildJourneySegments,
+    extractTrackpoints:   extractTrackpoints,
+    createDotMarker:      createDotMarker
+  };
+```
+
+- [ ] **Step 5: Run tests to confirm G1–G5 pass**
+
+```bash
+npx playwright test tests/ui/gpx-journey.spec.js
+```
+
+Expected: All 5 tests pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/js/maplibre-utils.js tests/ui/gpx-journey.spec.js
+git commit -m "feat: add GPX proximity algorithm to MapUtils (buildJourneySegments, extractTrackpoints)"
+```
+
+---
+
+### Task 3: Rewire `map.html.twig` to use the algorithm
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/map.html.twig`
+
+**Interfaces:**
+- Consumes: `MapUtils.extractTrackpoints`, `MapUtils.buildJourneySegments`, `MapUtils.addJourneySegments`
+- Consumes: `entry.header.force_connect` from Grav page frontmatter
+
+- [ ] **Step 1: Add `force_connect` to the Twig entry serialisation**
+
+In `map.html.twig`, the `map_entries` loop (lines 24–31) builds the entry JSON. Add `force_connect` to the merge array:
+
+```twig
+        {% set map_entries = map_entries|merge([{
+            'lat': entry.header.lat|number_format(6, '.', ''),
+            'lng': entry.header.lng|number_format(6, '.', ''),
+            'title': entry.title,
+            'date': entry.date|date('d M Y'),
+            'url': entry.url,
+            'hero': hero_url,
+            'force_connect': entry.header.force_connect ? true : false
+        }]) %}
+```
+
+- [ ] **Step 2: Restructure the JS section in `map.html.twig`**
+
+Replace the entire `<script>` block (lines 42–115) with the following. Key changes: GPX loading now returns Promises with extracted trackpoints; markers and bounds are set up before GPX loads; journey segments are drawn only after Promise.all resolves.
+
+```javascript
+<script>
+var ENTRIES  = {{ map_entries|json_encode|raw }};
+var GPX_URLS = {{ gpx_urls|json_encode|raw }};
+
+var map = new maplibregl.Map({
+    container: 'trip-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2
+});
+
+map.addControl(new maplibregl.NavigationControl(), 'top-right');
+
+if (ENTRIES.length === 0) {
+    var empty = document.createElement('div');
+    empty.className = 'map-empty';
+    empty.textContent = 'No locations yet — entries with GPS will appear here.';
+    document.getElementById('trip-map').appendChild(empty);
+}
+
+map.on('load', function () {
+    if (ENTRIES.length === 0) return;
+
+    /* ── Markers + bounds ──────────────────────────────────────── */
+    var bounds = new maplibregl.LngLatBounds();
+
+    ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(map); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
+    });
+
+    /* ── Fit bounds ─────────────────────────────────────────────── */
+    if (ENTRIES.length === 1) {
+        map.jumpTo({ center: [parseFloat(ENTRIES[0].lng), parseFloat(ENTRIES[0].lat)], zoom: 10 });
+    } else {
+        map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
+    }
+
+    /* ── GPX tracks + journey segments ─────────────────────────── */
+    Promise.all(GPX_URLS.map(function (url, idx) {
+        return fetch(url)
+            .then(function (r) { return r.text(); })
+            .then(function (text) {
+                var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                var geojson = toGeoJSON.gpx(xml);
+                var sid     = 'gpx-' + idx;
+                map.addSource(sid, { type: 'geojson', data: geojson });
+                map.addLayer({
+                    id: sid + '-line', type: 'line', source: sid,
+                    layout: { 'line-join': 'round', 'line-cap': 'round' },
+                    paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
+                });
+                return MapUtils.extractTrackpoints(geojson);
+            })
+            .catch(function (err) {
+                console.warn('GPX load failed:', url, err);
+                return [];
+            });
+    })).then(function (allTrackpoints) {
+        var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+        var segments = MapUtils.buildJourneySegments(ENTRIES, validTrackpoints, 10);
+        MapUtils.addJourneySegments(map, segments, 'journey');
+    });
+});
+</script>
+```
+
+- [ ] **Step 3: Verify the page loads without JS errors**
+
+```bash
+npx playwright test tests/ui/maps.spec.js --grep "M1|M2"
+```
+
+Expected: M1 and M2 pass (canvas renders, markers visible, no JS errors).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/map.html.twig
+git commit -m "feat: use buildJourneySegments in map.html.twig — suppress connectors covered by GPX"
+```
+
+---
+
+### Task 4: Rewire `trip.html.twig` mini-map to use the algorithm
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+
+**Interfaces:**
+- Consumes: `MapUtils.extractTrackpoints`, `MapUtils.buildJourneySegments`, `MapUtils.addJourneySegments`
+- Consumes: `item.page.header.force_connect` from Grav page frontmatter
+
+- [ ] **Step 1: Add `force_connect` to the Twig entry serialisation**
+
+In `trip.html.twig`, the `map_entries` loop (around line 89–100) currently builds:
+
+```twig
+        {% set map_entries = map_entries|merge([{
+            'lat': item.page.header.lat|number_format(6, '.', ''),
+            'lng': item.page.header.lng|number_format(6, '.', ''),
+            'slug': item.page.slug,
+            'title': item.page.title,
+            'url': item.page.url
+        }]) %}
+```
+
+Add `force_connect`:
+
+```twig
+        {% set map_entries = map_entries|merge([{
+            'lat': item.page.header.lat|number_format(6, '.', ''),
+            'lng': item.page.header.lng|number_format(6, '.', ''),
+            'slug': item.page.slug,
+            'title': item.page.title,
+            'url': item.page.url,
+            'force_connect': item.page.header.force_connect ? true : false
+        }]) %}
+```
+
+- [ ] **Step 2: Restructure the tripMap JS section**
+
+The tripMap JS block starts around line 303 (`tripMap.on('load', function () {`). Replace the entire `tripMap.on('load', ...)` block with the new version below. Everything outside `tripMap.on('load', ...)` (the `var tripMap = ...` declaration, `setTimeout(function() { tripMap.resize(); }, 100);`, and the filter bar JS) stays unchanged.
+
+Replace from `tripMap.on('load', function () {` through the closing `});` of that callback with:
+
+```javascript
+tripMap.on('load', function () {
+    if (TRIP_ENTRIES.length === 0) {
+        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
+        return;
+    }
+
+    /* ── Markers + bounds ──────────────────────────────────────── */
+    var bounds = new maplibregl.LngLatBounds();
+
+    TRIP_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === TRIP_ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(tripMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
+    });
+
+    /* ── Fit bounds ─────────────────────────────────────────────── */
+    if (TRIP_ENTRIES.length === 1) {
+        tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
+    } else {
+        tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    /* ── GPX tracks + journey segments ─────────────────────────── */
+    Promise.all(GPX_URLS.map(function (url, idx) {
+        return fetch(url)
+            .then(function (r) { return r.text(); })
+            .then(function (text) {
+                var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                var geojson = toGeoJSON.gpx(xml);
+                var sid     = 'gpx-' + idx;
+                tripMap.addSource(sid, { type: 'geojson', data: geojson });
+                tripMap.addLayer({
+                    id: sid + '-line', type: 'line', source: sid,
+                    layout: { 'line-join': 'round', 'line-cap': 'round' },
+                    paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
+                });
+                return MapUtils.extractTrackpoints(geojson);
+            })
+            .catch(function (err) {
+                console.warn('GPX load failed:', url, err);
+                return [];
+            });
+    })).then(function (allTrackpoints) {
+        var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+        var segments = MapUtils.buildJourneySegments(TRIP_ENTRIES, validTrackpoints, 10);
+        MapUtils.addJourneySegments(tripMap, segments, 'trip-journey');
+    });
+});
+```
+
+- [ ] **Step 3: Check the stats section — preserve any remaining JS below the map block**
+
+Scan `trip.html.twig` for `parseGpxFiles` (around line 494). This is a separate GPX parsing call for the stats section. **Do not modify it** — it is a different code path and uses its own GPX fetching logic.
+
+- [ ] **Step 4: Verify the trip page renders without JS errors**
+
+```bash
+npx playwright test tests/ui/maps.spec.js --grep "M4"
+```
+
+Expected: M4 passes (home map canvas renders, no JS errors).
+
+Also manually visit `http://localhost:8081/trips/italy-2025` in a browser and confirm the mini-map renders, markers appear, and the browser console shows no errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig
+git commit -m "feat: use buildJourneySegments in trip.html.twig mini-map"
+```
+
+---
+
+### Task 5: Rewire `dailies.html.twig` mini-map to use the algorithm
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/dailies.html.twig`
+
+**Interfaces:**
+- Consumes: `MapUtils.extractTrackpoints`, `MapUtils.buildJourneySegments`, `MapUtils.addJourneySegments`
+
+- [ ] **Step 1: Add GPX URL collection to the Twig section of `dailies.html.twig`**
+
+After the existing `{% set map_entries = [] %}` block (around line 18–29), add GPX URL collection from the parent trip page. Insert before the `{% if map_entries|length > 0 %}` line:
+
+```twig
+{# Collect GPX URLs from parent trip page for connector algorithm #}
+{% set trip_page = page.parent() %}
+{% set gpx_urls = [] %}
+{% for name, media in trip_page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
+    {% endif %}
+{% endfor %}
+```
+
+- [ ] **Step 2: Add `force_connect` to the Twig entry serialisation**
+
+In the existing `map_entries` loop (lines 21–28), add `force_connect`:
+
+```twig
+        {% set map_entries = map_entries|merge([{
+            'lat': item.page.header.lat,
+            'lng': item.page.header.lng,
+            'title': item.page.title,
+            'slug': item.page.slug,
+            'url': item.page.url,
+            'force_connect': item.page.header.force_connect ? true : false
+        }]) %}
+```
+
+- [ ] **Step 3: Add `togeojson` script and `GPX_URLS` variable to the JS section**
+
+Inside the `{% if map_entries|length > 0 %}` block, the existing script tags are (lines 37–39):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+```
+
+Add the toGeoJSON script between maplibre-gl.js and maplibre-utils.js:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+```
+
+And add the `GPX_URLS` variable immediately after `FEED_ENTRIES`:
+
+```javascript
+var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
+var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
+```
+
+- [ ] **Step 4: Restructure `feedMap.on('load', ...)` to use Promise.all**
+
+Replace the existing `feedMap.on('load', function () { ... });` block with:
+
+```javascript
+feedMap.on('load', function () {
+    var bounds = new maplibregl.LngLatBounds();
+
+    FEED_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === FEED_ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(feedMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
+    });
+
+    if (FEED_ENTRIES.length === 1) {
+        feedMap.jumpTo({ center: [parseFloat(FEED_ENTRIES[0].lng), parseFloat(FEED_ENTRIES[0].lat)], zoom: 10 });
+    } else {
+        feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    Promise.all(GPX_URLS.map(function (url, idx) {
+        return fetch(url)
+            .then(function (r) { return r.text(); })
+            .then(function (text) {
+                var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                var geojson = toGeoJSON.gpx(xml);
+                return MapUtils.extractTrackpoints(geojson);
+            })
+            .catch(function (err) {
+                console.warn('GPX load failed (feed-map):', url, err);
+                return [];
+            });
+    })).then(function (allTrackpoints) {
+        var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+        var segments = MapUtils.buildJourneySegments(FEED_ENTRIES, validTrackpoints, 10);
+        MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
+    });
+});
+```
+
+Note: the feed-map does **not** display GPX tracks as lines (it's a compact mini-map). GPX files are fetched solely for the proximity algorithm. This is intentional.
+
+- [ ] **Step 5: Verify no JS errors on the dailies page**
+
+```bash
+npx playwright test tests/ui/maps.spec.js --grep "M3"
+```
+
+Expected: M3 passes (dailies mini-map canvas renders, no JS errors).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/dailies.html.twig
+git commit -m "feat: apply GPX connector algorithm to dailies feed mini-map"
+```
+
+---
+
+### Task 6: Integration tests — verify algorithm is wired end-to-end
+
+**Files:**
+- Modify: `tests/ui/maps.spec.js`
+
+**Interfaces:**
+- Consumes: italy-2025 demo data (has GPX files); run `make demo-load` first
+
+- [ ] **Step 1: Add end-to-end tests to `maps.spec.js`**
+
+Append these tests to `tests/ui/maps.spec.js`:
+
+```javascript
+// ── M5: Italy map — no JS errors with GPX present ────────────────────────────
+test('M5: Italy map page renders without JS errors (GPX present)', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2025/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    // Wait for markers to confirm map.on('load') completed
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+    // Give Promise.all time to resolve
+    await page.waitForTimeout(3000);
+
+    expect(errors, 'No JS errors on Italy map page').toHaveLength(0);
+});
+
+// ── M6: Italy map — journey source exists after GPX loads ────────────────────
+test('M6: Italy map has a journey MapLibre source after GPX settles', async ({ page }) => {
+    await page.goto('/trips/italy-2025/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    // Wait until the journey source appears — addJourneySegments runs inside Promise.all.then()
+    // `var map = ...` in map.html.twig is a plain <script> var → available as window.map.
+    await page.waitForFunction(function () {
+        return window.map &&
+               (window.map.getSource('journey') !== undefined ||
+                window.map.getSource('journey-0') !== undefined);
+    }, { timeout: 15000 });
+
+    const hasSource = await page.evaluate(function () {
+        return !!(window.map.getSource('journey') || window.map.getSource('journey-0'));
+    });
+
+    expect(hasSource).toBe(true);
+});
+```
+
+- [ ] **Step 2: Run the full test suite**
+
+```bash
+npx playwright test
+```
+
+Expected: All existing tests (M1–M4, F1–F7, G1–G5, N-series, etc.) pass plus M5 and M6.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/ui/maps.spec.js
+git commit -m "test: add M5–M6 integration tests for GPX connector logic"
+```

docs/working/plans/2026-06-20-inline-journal-feed.md

@@ -0,0 +1,857 @@
+# Inline Journal Feed 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.
+
+**Status:** ✅ Complete (2026-06-20)
+
+**Goal:** Replace click-through journal entry cards with fully inline posts (photo strip + full text) across the trip page, dailies page, and home page.
+
+**Architecture:** Each journal entry becomes an `<article class="journal-post">` block that renders all its images in a CSS scroll-snap strip with dot indicators, followed by the full body text. The `id`, `data-type`, `data-lat`, `data-lng` attributes stay on the root so map targeting, filter JS, and flash animation continue to work. Story cards in all three feeds are unchanged.
+
+**Tech Stack:** Grav 2.0 Twig templates, CSS scroll-snap (no library), vanilla JS IntersectionObserver-free dot sync via scroll event, Playwright tests
+
+## Global Constraints
+
+- All CSS values must use design tokens (`var(--...)`) — no hard-coded colours, sizes, or radii
+- `id="entry-{{ entry.slug }}"` must remain on the journal post root (map scroll targeting)
+- `data-type="journal"` must remain on the journal post root (filter bar JS)
+- `data-lat` and `data-lng` must remain on the journal post root (map marker rendering)
+- Story cards (`<a class="entry-card entry-card--story">`) are not touched by any task
+- Two git repos: user content at `/home/mischa/Projects/travel-blog-intotheeast/user/` (separate git repo); outer repo at `/home/mischa/Nextcloud/Projects/travel-blog-intotheeast/`. Templates and CSS commit to the user subrepo; tests commit to the outer repo. Always update the outer repo's `user` submodule pointer in the same commit as the test changes.
+- Dev server: http://localhost:8081
+
+---
+
+## File Map
+
+| File | Change |
+|---|---|
+| `user/themes/intotheeast/css/style.css` | Add `.journal-post` component; remove journal-card-only rules; update `.is-highlighted` selector |
+| `user/themes/intotheeast/templates/partials/base.html.twig` | Add photo-strip dot-sync JS before `</body>` |
+| `user/themes/intotheeast/templates/dailies.html.twig` | Replace journal card block with `.journal-post`; add `weather_icons` |
+| `user/themes/intotheeast/templates/trip.html.twig` | Replace journal card block with `.journal-post`; add `weather_icons` |
+| `user/themes/intotheeast/templates/home.html.twig` | Replace journal card block with `.journal-post`; add `weather_icons` |
+| `tests/ui/dailies.spec.js` | Update T1 selector; update T2 selectors |
+| `tests/ui/maps.spec.js` | Update M7 selector |
+| `tests/ui/home.spec.js` | New file — H1 test |
+
+---
+
+### Task 1: CSS foundation + dot-sync JS
+
+Add all new `.journal-post` CSS and the photo-strip dot-sync JS. Remove CSS classes that are only used by the old journal entry card (not by story cards). This task has no template changes — existing tests must still pass at the end.
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/style.css`
+- Modify: `user/themes/intotheeast/templates/partials/base.html.twig`
+
+**Interfaces:**
+- Produces: `.journal-post`, `.journal-post-header`, `.journal-post-title`, `.journal-post-meta`, `.journal-post-permalink`, `.journal-post-location`, `.journal-post-weather`, `.journal-photo-strip`, `.journal-photo-slide`, `.journal-photo-dots`, `.journal-photo-dot.is-active`, `.journal-post-body`, `.journal-post.is-highlighted` — all usable by Tasks 2–4
+
+- [x] **Step 1: Add `.journal-post` CSS block to `style.css`**
+
+In `user/themes/intotheeast/css/style.css`, find the line:
+
+```css
+/* ── Single entry ────────────────────────────────────────────────────────────── */
+```
+
+Insert the following block **before** that comment:
+
+```css
+/* ── Journal post (inline feed) ─────────────────────────────────────────────── */
+
+.journal-post {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space-12);
+    margin-bottom: var(--space-12);
+}
+
+.journal-post-header {
+    margin-bottom: var(--space-4);
+}
+
+.journal-post-title {
+    font-family: var(--font-display);
+    font-size: var(--text-xl);
+    font-weight: 400;
+    line-height: var(--leading-snug);
+    color: var(--color-ink);
+    margin-bottom: var(--space-2);
+}
+
+.journal-post-meta {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.journal-post-permalink {
+    color: var(--color-ink-muted);
+    text-decoration: none;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+}
+
+.journal-post-permalink:hover { color: var(--color-accent); }
+
+.journal-post-location,
+.journal-post-weather {
+    color: var(--color-ink-muted);
+}
+
+.journal-photo-strip {
+    display: flex;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-3);
+}
+
+.journal-photo-strip::-webkit-scrollbar { display: none; }
+
+.journal-photo-slide {
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+    aspect-ratio: 3 / 2;
+    overflow: hidden;
+}
+
+.journal-photo-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.journal-photo-dots {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+}
+
+.journal-photo-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background: var(--color-border);
+    transition: background 0.2s;
+}
+
+.journal-photo-dot.is-active {
+    background: var(--color-ink-muted);
+}
+
+.journal-post-body {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-ink-2);
+}
+
+.journal-post-body p { margin-bottom: var(--space-4); }
+.journal-post-body p:last-child { margin-bottom: 0; }
+
+.journal-post.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+
+```
+
+- [x] **Step 2: Remove journal-card-only CSS rules from `style.css`**
+
+These rules are only used by the old journal entry card. Story cards do not use them. Remove each block exactly as shown.
+
+**Remove `.entry-card-photo-overlay` and its children:**
+
+```css
+.entry-card-photo-overlay {
+    position: absolute;
+    inset: auto 0 0 0;
+    padding: var(--space-5) var(--space-4) var(--space-3);
+    background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, transparent 100%);
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.entry-date-overlay {
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: rgba(255,255,255,0.92);
+}
+
+.entry-location-overlay {
+    font-size: var(--text-xs);
+    color: rgba(255,255,255,0.85);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+}
+```
+
+Replace with nothing (delete the block entirely).
+
+**Remove the text-only meta block and its comment:**
+
+```css
+/* Card: text-only variant */
+
+.entry-card-textmeta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.entry-date-plain {
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    color: var(--color-ink-muted);
+}
+
+.entry-location-plain {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+}
+```
+
+Replace with nothing.
+
+**Remove `.entry-excerpt` and `.entry-read-more`:**
+
+```css
+.entry-excerpt {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-ink-2);
+    margin-bottom: var(--space-3);
+}
+
+.entry-read-more {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-accent);
+}
+```
+
+Replace with nothing.
+
+**Replace `.entry-card.is-highlighted` with `.journal-post.is-highlighted`:**
+
+Find:
+```css
+.entry-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+Replace with:
+```css
+.journal-post.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+- [x] **Step 3: Add dot-sync JS to `base.html.twig`**
+
+In `user/themes/intotheeast/templates/partials/base.html.twig`, find:
+
+```twig
+    {{ assets.js('bottom')|raw }}
+</body>
+```
+
+Replace with:
+
+```twig
+    {{ assets.js('bottom')|raw }}
+<script>
+(function () {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+    });
+})();
+</script>
+</body>
+```
+
+- [x] **Step 4: Run existing tests to confirm nothing broke**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js
+```
+
+Expected: all existing tests pass (M7 still passes because `trip.html.twig` has not changed yet — the JS still adds `is-highlighted` to `.entry-card` elements, and the old M7 selector `.entry-card.is-highlighted` finds the element).
+
+- [x] **Step 5: Commit user subrepo**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/css/style.css themes/intotheeast/templates/partials/base.html.twig
+git commit -m "feat: add journal-post CSS component and dot-sync JS; remove stale journal-card-only rules"
+```
+
+---
+
+### Task 2: dailies.html.twig + T1/T2 test updates
+
+Replace the journal entry card in `dailies.html.twig` with the new `.journal-post` inline block. Update T1 and T2 tests to match the new structure.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/dailies.html.twig`
+- Modify: `tests/ui/dailies.spec.js`
+
+**Interfaces:**
+- Consumes: `.journal-post` CSS from Task 1
+- Produces: `/trips/japan-korea-2026/dailies` renders `.journal-post` blocks; T1 and T2 pass with new selectors
+
+- [x] **Step 1: Update T1 and T2 tests to their new selectors**
+
+In `tests/ui/dailies.spec.js`, make the following changes:
+
+**T1** — change `.entry-card` to `.journal-post`:
+
+```js
+// OLD
+await expect(page.locator('.entry-card').first()).toBeVisible();
+// NEW
+await expect(page.locator('.journal-post').first()).toBeVisible();
+```
+
+**T2** — replace the entire card locator + index block with id-based selectors:
+
+Find:
+```js
+    // Both fixture entries must be visible on the page
+    const newerCard = page.locator(`.entry-card[href*="${NEWER_SLUG}"]`);
+    const olderCard = page.locator(`.entry-card[href*="${OLDER_SLUG}"]`);
+
+    await expect(newerCard).toBeVisible();
+    await expect(olderCard).toBeVisible();
+
+    // The newer entry should appear higher in the DOM (lower index)
+    const newerIdx = await newerCard.evaluate(el => {
+        return [...document.querySelectorAll('.entry-card')].findIndex(c => c === el);
+    });
+    const olderIdx = await olderCard.evaluate(el => {
+        return [...document.querySelectorAll('.entry-card')].findIndex(c => c === el);
+    });
+```
+
+Replace with:
+```js
+    // Both fixture entries must be visible on the page
+    const newerCard = page.locator(`#entry-${NEWER_SLUG}`);
+    const olderCard = page.locator(`#entry-${OLDER_SLUG}`);
+
+    await expect(newerCard).toBeVisible();
+    await expect(olderCard).toBeVisible();
+
+    // The newer entry should appear higher in the DOM (lower index)
+    const newerIdx = await newerCard.evaluate(el => {
+        return [...document.querySelectorAll('.journal-post')].findIndex(c => c.id === el.id);
+    });
+    const olderIdx = await olderCard.evaluate(el => {
+        return [...document.querySelectorAll('.journal-post')].findIndex(c => c.id === el.id);
+    });
+```
+
+- [x] **Step 2: Run T1 and T2 to verify they fail**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T1:|T2:"
+```
+
+Expected: FAIL — `.journal-post` selector finds no elements (the page still renders `.entry-card`).
+
+- [x] **Step 3: Add `weather_icons` map and replace journal card in `dailies.html.twig`**
+
+In `user/themes/intotheeast/templates/dailies.html.twig`, find the line:
+
+```twig
+            {% if item.type == 'journal' %}
+            <a class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}" href="{{ entry.url }}">
+```
+
+This `{% if item.type == 'journal' %}` block ends at `</a>` before `{% else %}`. Replace the entire journal card block (from `{% if item.type == 'journal' %}` through the closing `</a>` of the journal branch, leaving the `{% else %}` story branch intact) with:
+
+```twig
+            {% if item.type == 'journal' %}
+            {% set weather_icons = {
+                'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+                'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+                'Snow': '❄️', 'Thunderstorm': '⛈️'
+            } %}
+            <article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+                <header class="journal-post-header">
+                    <h2 class="journal-post-title">{{ entry.title }}</h2>
+                    <p class="journal-post-meta">
+                        <a class="journal-post-permalink" href="{{ entry.url }}">
+                            <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+                        </a>
+                        {% if entry.header.location_city or entry.header.location_country %}
+                        <span class="journal-post-location">
+                            · 📍
+                            {%- set _loc = [] -%}
+                            {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                            {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                            {{ _loc|join(', ') }}
+                        </span>
+                        {% endif %}
+                        {% if entry.header.weather_desc %}
+                        <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+                        {% endif %}
+                    </p>
+                </header>
+
+                {% set images = entry.media.images %}
+                {% if images|length > 0 %}
+                <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                    {% for img in images %}
+                    <div class="journal-photo-slide">
+                        <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                    </div>
+                    {% endfor %}
+                </div>
+                {% if images|length > 1 %}
+                <div class="journal-photo-dots" aria-hidden="true">
+                    {% for img in images %}
+                    <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                {% endif %}
+
+                <div class="journal-post-body">{{ entry.content|raw }}</div>
+            </article>
+```
+
+The exact text to find and replace is the old journal branch. The old branch starts with:
+
+```twig
+            {% if item.type == 'journal' %}
+            <a class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}" href="{{ entry.url }}">
+                    {% if hero %}
+                    <div class="entry-card-photo">
+                        <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                        <div class="entry-card-photo-overlay">
+                            <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
+                                {{ entry.date|date('d M Y')|upper }}
+                            </time>
+                            {% if entry.header.location_city or entry.header.location_country %}
+                            <span class="entry-location-overlay">
+                                📍
+                                {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
+                                {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
+                                {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
+                            </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% else %}
+                    <div class="entry-card-textmeta">
+                        <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
+                            {{ entry.date|date('d M Y')|upper }}
+                        </time>
+                        {% if entry.header.location_city or entry.header.location_country %}
+                        <span class="entry-location-plain">
+                            {%- set _loc = [] -%}
+                            {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                            {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                            📍 {{ _loc|join(', ') }}
+                        </span>
+                        {% endif %}
+                    </div>
+                    {% endif %}
+                    <div class="entry-card-body">
+                        <h2 class="entry-title">{{ entry.title }}</h2>
+                        <p class="entry-excerpt">{{ entry.summary|striptags|slice(0, 250)|trim }}</p>
+                        <span class="entry-read-more">Read entry →</span>
+                    </div>
+            </a>
+```
+
+- [x] **Step 4: Run T1 and T2 to verify they pass**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T1:|T2:"
+```
+
+Expected: PASS.
+
+- [x] **Step 5: Run the full suite to check no regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js
+```
+
+Expected: all pass.
+
+- [x] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/dailies.html.twig
+git commit -m "feat: replace journal entry card with inline journal-post in dailies feed"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/dailies.spec.js user
+git commit -m "test: update T1/T2 selectors for inline journal-post structure"
+```
+
+---
+
+### Task 3: trip.html.twig + M7 test update
+
+Replace the journal entry card in `trip.html.twig` with the `.journal-post` block. Update M7 which currently tests `.entry-card.is-highlighted` on the trip page.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `tests/ui/maps.spec.js`
+
+**Interfaces:**
+- Consumes: `.journal-post` CSS and `.journal-post.is-highlighted` from Task 1; journal-post HTML pattern from Task 2
+- Produces: `/trips/japan-korea-2026` renders `.journal-post` blocks; M7 passes with `.journal-post.is-highlighted`
+
+- [x] **Step 1: Update M7 to the new selector**
+
+In `tests/ui/maps.spec.js`, find:
+
+```js
+    // Within 500ms of click + delay, one entry-card should have is-highlighted
+    await expect(page.locator('.entry-card.is-highlighted')).toBeVisible({ timeout: 1500 });
+```
+
+Replace with:
+
+```js
+    // Within 500ms of click + delay, one journal-post should have is-highlighted
+    await expect(page.locator('.journal-post.is-highlighted')).toBeVisible({ timeout: 1500 });
+```
+
+- [x] **Step 2: Run M7 to verify it fails**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
+```
+
+Expected: FAIL — `.journal-post.is-highlighted` not found (trip.html.twig still renders `<a class="entry-card">`).
+
+- [x] **Step 3: Replace journal card in `trip.html.twig`**
+
+In `user/themes/intotheeast/templates/trip.html.twig`, find and replace the journal branch of the `{% if item.type == 'journal' %}` block. The old branch to replace is:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    <a class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}" href="{{ entry.url }}">
+                            {% if hero %}
+                            <div class="entry-card-photo">
+                                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                                <div class="entry-card-photo-overlay">
+                                    <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
+                                        {{ entry.date|date('d M Y')|upper }}
+                                    </time>
+                                    {% if entry.header.location_city or entry.header.location_country %}
+                                    <span class="entry-location-overlay">
+                                        📍
+                                        {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
+                                        {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
+                                        {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
+                                    </span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            {% else %}
+                            <div class="entry-card-textmeta">
+                                <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
+                                    {{ entry.date|date('d M Y')|upper }}
+                                </time>
+                                {% if entry.header.location_city or entry.header.location_country %}
+                                <span class="entry-location-plain">
+                                    {%- set _loc = [] -%}
+                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                                    📍 {{ _loc|join(', ') }}
+                                </span>
+                                {% endif %}
+                            </div>
+                            {% endif %}
+                            <div class="entry-card-body">
+                                <h2 class="entry-title">{{ entry.title }}</h2>
+                                <p class="entry-excerpt">{{ entry.summary|striptags|slice(0, 250)|trim }}</p>
+                                <span class="entry-read-more">Read entry →</span>
+                            </div>
+                    </a>
+```
+
+Replace with:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    {% set weather_icons = {
+                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+                        'Snow': '❄️', 'Thunderstorm': '⛈️'
+                    } %}
+                    <article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+                        <header class="journal-post-header">
+                            <h2 class="journal-post-title">{{ entry.title }}</h2>
+                            <p class="journal-post-meta">
+                                <a class="journal-post-permalink" href="{{ entry.url }}">
+                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+                                </a>
+                                {% if entry.header.location_city or entry.header.location_country %}
+                                <span class="journal-post-location">
+                                    · 📍
+                                    {%- set _loc = [] -%}
+                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                                    {{ _loc|join(', ') }}
+                                </span>
+                                {% endif %}
+                                {% if entry.header.weather_desc %}
+                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+                                {% endif %}
+                            </p>
+                        </header>
+
+                        {% set images = entry.media.images %}
+                        {% if images|length > 0 %}
+                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                            {% for img in images %}
+                            <div class="journal-photo-slide">
+                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                            </div>
+                            {% endfor %}
+                        </div>
+                        {% if images|length > 1 %}
+                        <div class="journal-photo-dots" aria-hidden="true">
+                            {% for img in images %}
+                            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+                            {% endfor %}
+                        </div>
+                        {% endif %}
+                        {% endif %}
+
+                        <div class="journal-post-body">{{ entry.content|raw }}</div>
+                    </article>
+```
+
+- [x] **Step 4: Run M7 to verify it passes**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
+```
+
+Expected: PASS.
+
+- [x] **Step 5: Run full suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js
+```
+
+Expected: all pass.
+
+- [x] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/trip.html.twig
+git commit -m "feat: replace journal entry card with inline journal-post in trip feed"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/maps.spec.js user
+git commit -m "test: update M7 selector for journal-post.is-highlighted"
+```
+
+---
+
+### Task 4: home.html.twig + H1 test
+
+Replace the journal entry card in `home.html.twig` and add a minimal home page test.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/home.html.twig`
+- Create: `tests/ui/home.spec.js`
+
+**Interfaces:**
+- Consumes: `.journal-post` CSS from Task 1; journal-post HTML pattern from Task 2
+
+- [x] **Step 1: Write the failing H1 test**
+
+Create `tests/ui/home.spec.js`:
+
+```js
+// @ts-check
+// Tests: H1 — home page journal feed
+const { test, expect } = require('@playwright/test');
+
+// ── H1: Home page renders inline journal posts ─────────────────────────────────
+test('H1: home page shows at least one inline journal-post block', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('.journal-post').first()).toBeVisible();
+    await expect(page.locator('.site-header')).toBeVisible();
+});
+```
+
+- [x] **Step 2: Run H1 to verify it fails**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/home.spec.js
+```
+
+Expected: FAIL — `.journal-post` not found (home page still renders `<a class="entry-card">`).
+
+- [x] **Step 3: Replace journal card in `home.html.twig`**
+
+In `user/themes/intotheeast/templates/home.html.twig`, find the journal branch:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    <a class="entry-card" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}" href="{{ entry.url }}">
+                            {% if hero %}
+                            <div class="entry-card-photo">
+                                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                                <div class="entry-card-photo-overlay">
+                                    <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
+                                        {{ entry.date|date('d M Y')|upper }}
+                                    </time>
+                                    {% if entry.header.location_city or entry.header.location_country %}
+                                    <span class="entry-location-overlay">
+                                        📍
+                                        {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
+                                        {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
+                                        {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
+                                    </span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            {% else %}
+                            <div class="entry-card-textmeta">
+                                <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
+                                    {{ entry.date|date('d M Y')|upper }}
+                                </time>
+                                {% if entry.header.location_city or entry.header.location_country %}
+                                <span class="entry-location-plain">
+                                    {%- set _loc = [] -%}
+                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                                    📍 {{ _loc|join(', ') }}
+                                </span>
+                                {% endif %}
+                            </div>
+                            {% endif %}
+                            <div class="entry-card-body">
+                                <h2 class="entry-title">{{ entry.title }}</h2>
+                                <p class="entry-excerpt">{{ entry.summary|striptags|slice(0, 250)|trim }}</p>
+                                <span class="entry-read-more">Read entry →</span>
+                            </div>
+                    </a>
+```
+
+Replace with:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    {% set weather_icons = {
+                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+                        'Snow': '❄️', 'Thunderstorm': '⛈️'
+                    } %}
+                    <article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+                        <header class="journal-post-header">
+                            <h2 class="journal-post-title">{{ entry.title }}</h2>
+                            <p class="journal-post-meta">
+                                <a class="journal-post-permalink" href="{{ entry.url }}">
+                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+                                </a>
+                                {% if entry.header.location_city or entry.header.location_country %}
+                                <span class="journal-post-location">
+                                    · 📍
+                                    {%- set _loc = [] -%}
+                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                                    {{ _loc|join(', ') }}
+                                </span>
+                                {% endif %}
+                                {% if entry.header.weather_desc %}
+                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+                                {% endif %}
+                            </p>
+                        </header>
+
+                        {% set images = entry.media.images %}
+                        {% if images|length > 0 %}
+                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                            {% for img in images %}
+                            <div class="journal-photo-slide">
+                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                            </div>
+                            {% endfor %}
+                        </div>
+                        {% if images|length > 1 %}
+                        <div class="journal-photo-dots" aria-hidden="true">
+                            {% for img in images %}
+                            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+                            {% endfor %}
+                        </div>
+                        {% endif %}
+                        {% endif %}
+
+                        <div class="journal-post-body">{{ entry.content|raw }}</div>
+                    </article>
+```
+
+Note: `home.html.twig` journal posts do **not** include `data-type` (the home page has no filter bar) — this matches the existing `<a class="entry-card">` on home which also had no `data-type`.
+
+- [x] **Step 4: Run H1 to verify it passes**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+npx playwright test --project=chromium tests/ui/home.spec.js
+```
+
+Expected: PASS.
+
+- [x] **Step 5: Run the full suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js tests/ui/home.spec.js
+```
+
+Expected: all pass.
+
+- [x] **Step 6: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/home.html.twig
+git commit -m "feat: replace journal entry card with inline journal-post on home page"
+
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git add tests/ui/home.spec.js user
+git commit -m "test: add H1 home page journal-post test"
+```

docs/working/plans/2026-06-20-pixelfed-import.md

@@ -0,0 +1,546 @@
+# Pixelfed Import & Demo Reorganisation 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:** Import 36 Pixelfed posts into three permanent trips and reorganise the demo system so Italy demo content moves to a clearly-labelled `italy-2026-demo` trip and Japan demo content is retired.
+
+**Architecture:** Three independent tasks — demo cleanup first, then real trip scaffolding, then the Python import script that routes posts by year and downloads photos. All user-facing content lives in `user/pages/` and is committed to the `user/` git repo; the Makefile and import script are committed to the main repo.
+
+**Tech Stack:** Bash (file operations), Python 3 stdlib only (json, os, urllib.request, datetime), Grav Flat-File CMS YAML frontmatter.
+
+## Global Constraints
+
+- Dev server: `http://localhost:8081` — must be running (`make start`) to test cache clears
+- `user/` is a separate git repo — all commits to `user/pages/`, `user/docs/`, `user/themes/` use `git -C user commit`; Makefile and `scripts/` use the root `git commit`
+- Never read `.env` directly
+- All new trip pages use `template: trip` for `trip.md`, `template: dailies` for the dailies index, `template: map` for map, `template: stats` for stats, `template: stories` for stories — matching existing trips exactly
+- Input JSON: `/home/mischa/Nextcloud/Downloads/pixelfed/pixelfed-statuses.json` (36 posts)
+- Trip routing by `created_at` year: 2023 → `central-asia-2023`, 2024 → `us-canada-mex-2024`, 2025 → `italy-2025`
+
+---
+
+## File Map
+
+| File | Change | Repo |
+|---|---|---|
+| `user/docs/demo/trips/italy-2026-demo/` | New — copy of italy-2025 demo source with updated `trip.md` | user |
+| `user/pages/01.trips/italy-2026-demo/` | Not committed — created at runtime by `demo-load` | — |
+| `user/pages/01.trips/italy-2025/trip.md` | Update title to `Cycling Tuscany 2025` | user |
+| `user/pages/01.trips/italy-2025/01.dailies/dailies.md` | New — missing index page | user |
+| `user/pages/01.trips/italy-2025/04.stories/01.val-dorcia-dawn/` | Delete demo story | user |
+| `user/pages/01.trips/italy-2025/04.stories/02.long-climb-montalcino/` | Delete demo story | user |
+| `user/pages/01.trips/italy-2025/04.stories/03.one-evening-siena/` | Delete demo story | user |
+| `user/pages/01.trips/italy-2025/01.dailies/2025-09-*.entry/` | Delete 5 demo entries | user |
+| `user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-*.entry` + `2026-04-*.entry` | Delete 9 demo entries | user |
+| `user/pages/01.trips/japan-korea-2026/04.stories/01.the-thousand-gates/` | Delete demo story | user |
+| `user/pages/01.trips/central-asia-2023/` | New permanent trip page tree | user |
+| `user/pages/01.trips/us-canada-mex-2024/` | New permanent trip page tree | user |
+| `Makefile` | Replace `demo-load` and `demo-reset` targets | main |
+| `scripts/pixelfed-import.py` | New one-time import script | main |
+
+---
+
+## Task 1: Demo reorganisation
+
+**Files:**
+- Create: `user/docs/demo/trips/italy-2026-demo/` (copy + edit)
+- Modify: `user/pages/01.trips/italy-2025/trip.md`
+- Create: `user/pages/01.trips/italy-2025/01.dailies/dailies.md`
+- Delete: `user/pages/01.trips/italy-2025/04.stories/01.val-dorcia-dawn/`, `02.long-climb-montalcino/`, `03.one-evening-siena/`
+- Delete: `user/pages/01.trips/italy-2025/01.dailies/2025-09-*.entry/` (5 demo entries)
+- Delete: `user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-*.entry` + `2026-04-*.entry` (9 demo entries)
+- Delete: `user/pages/01.trips/japan-korea-2026/04.stories/01.the-thousand-gates/`
+- Modify: `Makefile`
+
+**Interfaces:**
+- Produces: `demo-load` and `demo-reset` targets that only touch `italy-2026-demo`; `italy-2025` is clean and ready for real content; `japan-korea-2026` has only the real `2026-06-17.entry`
+
+- [ ] **Step 1: Copy italy-2025 demo source to italy-2026-demo**
+
+```bash
+cp -r user/docs/demo/trips/italy-2025 user/docs/demo/trips/italy-2026-demo
+```
+
+- [ ] **Step 2: Update the trip.md in the new demo source**
+
+Edit `user/docs/demo/trips/italy-2026-demo/trip.md` to read:
+
+```yaml
+---
+title: 'Italy 2026 (Demo)'
+template: trip
+date: '2026-09-01'
+date_start: '2026-09-01'
+date_end: '2026-09-08'
+cover_image: ''
+---
+```
+
+- [ ] **Step 3: Remove italy-2025 demo stories from pages**
+
+```bash
+rm -rf user/pages/01.trips/italy-2025/04.stories/01.val-dorcia-dawn
+rm -rf user/pages/01.trips/italy-2025/04.stories/02.long-climb-montalcino
+rm -rf user/pages/01.trips/italy-2025/04.stories/03.one-evening-siena
+```
+
+- [ ] **Step 4: Remove italy-2025 demo dailies entries from pages**
+
+```bash
+rm -rf user/pages/01.trips/italy-2025/01.dailies/2025-09-05-0800-rolling-through-val-dorcia.entry
+rm -rf user/pages/01.trips/italy-2025/01.dailies/2025-09-05-1900-siena-at-dusk.entry
+rm -rf user/pages/01.trips/italy-2025/01.dailies/2025-09-06-1200-towers-of-san-gimignano.entry
+rm -rf user/pages/01.trips/italy-2025/01.dailies/2025-09-06-1800-into-florence.entry
+rm -rf user/pages/01.trips/italy-2025/01.dailies/2025-09-08-0900-tyrrhenian-coast.entry
+```
+
+Check actual folder names first in case any differ:
+
+```bash
+ls user/pages/01.trips/italy-2025/01.dailies/
+```
+
+Remove all folders listed (they are all demo content).
+
+- [ ] **Step 5: Add missing dailies.md to italy-2025**
+
+Create `user/pages/01.trips/italy-2025/01.dailies/dailies.md`:
+
+```yaml
+---
+title: 'The Journey'
+template: dailies
+content:
+    items: '@self.children'
+    order:
+        by: date
+        dir: desc
+    filter:
+        published: true
+---
+```
+
+- [ ] **Step 6: Update italy-2025 trip title**
+
+Edit `user/pages/01.trips/italy-2025/trip.md`:
+
+```yaml
+---
+title: 'Cycling Tuscany 2025'
+template: trip
+date: '2025-10-11'
+date_start: '2025-10-11'
+date_end: '2025-10-16'
+cover_image: ''
+---
+```
+
+- [ ] **Step 7: Remove japan demo content from pages**
+
+```bash
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-25-1540-wheels-down-narita.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-26-1000-sakura-in-ueno-park.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-27-0715-summit-clouds-and-snow.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-28-1130-thousand-torii-gates.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-29-1400-deer-of-nara.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-30-1800-dotonbori-after-dark.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-03-31-0730-last-morning-in-arashiyama.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-04-01-0900-seoul-calling.entry
+rm -rf user/pages/01.trips/japan-korea-2026/01.dailies/2026-04-02-1100-gyeongbokgung-and-beyond.entry
+rm -rf user/pages/01.trips/japan-korea-2026/04.stories/01.the-thousand-gates
+```
+
+- [ ] **Step 8: Update the Makefile demo targets**
+
+Replace the entire `demo-load` and `demo-reset` blocks (lines 42–64) with:
+
+```makefile
+demo-load:
+	# Load italy-2026-demo trip (create pages if absent)
+	mkdir -p user/pages/01.trips/italy-2026-demo/01.dailies user/pages/01.trips/italy-2026-demo/02.map user/pages/01.trips/italy-2026-demo/03.stats user/pages/01.trips/italy-2026-demo/04.stories
+	cp user/docs/demo/trips/italy-2026-demo/trip.md user/pages/01.trips/italy-2026-demo/trip.md 2>/dev/null || true
+	cp user/docs/demo/trips/italy-2026-demo/map.md user/pages/01.trips/italy-2026-demo/02.map/map.md 2>/dev/null || true
+	cp user/docs/demo/trips/italy-2026-demo/stats.md user/pages/01.trips/italy-2026-demo/03.stats/stats.md 2>/dev/null || true
+	cp user/docs/demo/trips/italy-2026-demo/stories.md user/pages/01.trips/italy-2026-demo/04.stories/stories.md 2>/dev/null || true
+	cp -r user/docs/demo/trips/italy-2026-demo/04.stories/. user/pages/01.trips/italy-2026-demo/04.stories/ 2>/dev/null || true
+	cp -r user/docs/demo/trips/italy-2026-demo/dailies/. user/pages/01.trips/italy-2026-demo/01.dailies/
+	cp user/docs/demo/trips/italy-2026-demo/*.gpx user/pages/01.trips/italy-2026-demo/ 2>/dev/null || true
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+
+demo-reset:
+	rm -rf user/pages/01.trips/italy-2026-demo
+	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+```
+
+- [ ] **Step 9: Verify demo-load and demo-reset work**
+
+```bash
+make demo-load
+```
+
+Expected: `italy-2026-demo` appears at `http://localhost:8081` trips listing. Confirm stories and GPX map load.
+
+```bash
+make demo-reset
+```
+
+Expected: `italy-2026-demo` disappears from the trips listing. `italy-2025` and `japan-korea-2026` are unaffected.
+
+- [ ] **Step 10: Commit user repo changes**
+
+Includes the new demo source, cleaned pages, updated italy-2025 title, and new dailies.md:
+
+```bash
+git -C user add -A
+git -C user commit -m "chore: move italy demo to italy-2026-demo; clean japan and italy-2025 demo content"
+```
+
+- [ ] **Step 11: Commit main repo changes (Makefile only)**
+
+```bash
+git add Makefile
+git commit -m "chore: update demo-load/demo-reset for italy-2026-demo; retire japan demo"
+```
+
+---
+
+## Task 2: Create real trip page trees
+
+**Files:**
+- Create: `user/pages/01.trips/central-asia-2023/` (trip.md + 4 subfolders with index pages)
+- Create: `user/pages/01.trips/us-canada-mex-2024/` (trip.md + 4 subfolders with index pages)
+
+**Interfaces:**
+- Produces: `central-asia-2023` and `us-canada-mex-2024` trip folder trees with `01.dailies/dailies.md` present — required for the import script to write entries into them
+
+- [ ] **Step 1: Create Central Asia 2023 trip tree**
+
+```bash
+mkdir -p user/pages/01.trips/central-asia-2023/01.dailies
+mkdir -p user/pages/01.trips/central-asia-2023/02.map
+mkdir -p user/pages/01.trips/central-asia-2023/03.stats
+mkdir -p user/pages/01.trips/central-asia-2023/04.stories
+```
+
+Create `user/pages/01.trips/central-asia-2023/trip.md`:
+
+```yaml
+---
+title: 'Central Asia 2023'
+template: trip
+date: '2023-08-28'
+date_start: '2023-08-28'
+date_end: '2023-10-18'
+cover_image: ''
+---
+```
+
+Create `user/pages/01.trips/central-asia-2023/01.dailies/dailies.md`:
+
+```yaml
+---
+title: 'The Journey'
+template: dailies
+content:
+    items: '@self.children'
+    order:
+        by: date
+        dir: desc
+    filter:
+        published: true
+---
+```
+
+Create `user/pages/01.trips/central-asia-2023/02.map/map.md`:
+
+```yaml
+---
+title: 'Trip Map'
+template: map
+---
+```
+
+Create `user/pages/01.trips/central-asia-2023/03.stats/stats.md`:
+
+```yaml
+---
+title: 'Trip Stats'
+template: stats
+---
+```
+
+Create `user/pages/01.trips/central-asia-2023/04.stories/stories.md`:
+
+```yaml
+---
+title: Stories
+template: stories
+published: true
+---
+```
+
+- [ ] **Step 2: Create Northern America 2024 trip tree**
+
+```bash
+mkdir -p user/pages/01.trips/us-canada-mex-2024/01.dailies
+mkdir -p user/pages/01.trips/us-canada-mex-2024/02.map
+mkdir -p user/pages/01.trips/us-canada-mex-2024/03.stats
+mkdir -p user/pages/01.trips/us-canada-mex-2024/04.stories
+```
+
+Create `user/pages/01.trips/us-canada-mex-2024/trip.md`:
+
+```yaml
+---
+title: 'Northern America 2024'
+template: trip
+date: '2024-05-28'
+date_start: '2024-05-28'
+date_end: '2024-08-07'
+cover_image: ''
+---
+```
+
+Create `user/pages/01.trips/us-canada-mex-2024/01.dailies/dailies.md`:
+
+```yaml
+---
+title: 'The Journey'
+template: dailies
+content:
+    items: '@self.children'
+    order:
+        by: date
+        dir: desc
+    filter:
+        published: true
+---
+```
+
+Create `user/pages/01.trips/us-canada-mex-2024/02.map/map.md`:
+
+```yaml
+---
+title: 'Trip Map'
+template: map
+---
+```
+
+Create `user/pages/01.trips/us-canada-mex-2024/03.stats/stats.md`:
+
+```yaml
+---
+title: 'Trip Stats'
+template: stats
+---
+```
+
+Create `user/pages/01.trips/us-canada-mex-2024/04.stories/stories.md`:
+
+```yaml
+---
+title: Stories
+template: stories
+published: true
+---
+```
+
+- [ ] **Step 3: Verify trips appear in the site**
+
+Open `http://localhost:8081` — the Past Trips section should list Central Asia 2023 and Northern America 2024.
+
+- [ ] **Step 4: Commit to user repo**
+
+```bash
+git -C user add user/pages/01.trips/central-asia-2023 user/pages/01.trips/us-canada-mex-2024
+git -C user commit -m "feat: add central-asia-2023 and us-canada-mex-2024 trip page trees"
+```
+
+---
+
+## Task 3: Pixelfed import script
+
+**Files:**
+- Create: `scripts/pixelfed-import.py`
+- Modify: `Makefile` (add `pixelfed-import` target)
+
+**Interfaces:**
+- Consumes: `user/pages/01.trips/{trip}/01.dailies/` folders from Task 2 and existing `italy-2025`
+- Produces: `{date}-pixelfed-{N}.entry/` folders with `entry.md` + downloaded photo files
+
+- [ ] **Step 1: Write the import script**
+
+Create `scripts/pixelfed-import.py`:
+
+```python
+#!/usr/bin/env python3
+"""One-time import of Pixelfed statuses into Grav entry pages."""
+
+import json
+import os
+import urllib.request
+from datetime import datetime, timezone
+
+INPUT_FILE = '/home/mischa/Nextcloud/Downloads/pixelfed/pixelfed-statuses.json'
+USER_PAGES = 'user/pages/01.trips'
+
+TRIP_MAP = {
+    '2023': 'central-asia-2023',
+    '2024': 'us-canada-mex-2024',
+    '2025': 'italy-2025',
+}
+
+EXT_MAP = {
+    'image/jpeg': 'jpg',
+    'image/png':  'png',
+    'image/gif':  'gif',
+    'image/webp': 'webp',
+}
+
+ENTRY_TEMPLATE = """\
+---
+title: '{title}'
+date: '{date}'
+template: entry
+published: true
+hero_image: '{hero_image}'
+lat: ''
+lng: ''
+location_city: '{location_city}'
+location_country: '{location_country}'
+weather_temp_c: ''
+weather_desc: ''
+---
+
+{body}
+"""
+
+
+def download(url, dest):
+    try:
+        urllib.request.urlretrieve(url, dest)
+        return True
+    except Exception as exc:
+        print(f'  Warning: download failed {url}: {exc}')
+        return False
+
+
+def main():
+    with open(INPUT_FILE) as f:
+        posts = json.load(f)
+
+    counters = {}
+
+    for post in posts:
+        year = post['created_at'][:4]
+        trip = TRIP_MAP.get(year)
+        if not trip:
+            print(f"Skip: no trip mapping for year {year} (post {post['id']})")
+            continue
+
+        counters[trip] = counters.get(trip, 0) + 1
+        n = counters[trip]
+
+        date_str = post['created_at'][:10]  # YYYY-MM-DD
+        folder = f'{date_str}-pixelfed-{n}.entry'
+        path = os.path.join(USER_PAGES, trip, '01.dailies', folder)
+
+        if os.path.exists(path):
+            print(f'Skip: {folder} already exists')
+            continue
+
+        os.makedirs(path)
+        print(f'Creating {trip}/{folder}')
+
+        hero_image = ''
+        for i, att in enumerate(post.get('media_attachments', []), 1):
+            ext = EXT_MAP.get(att.get('mime', ''), 'jpg')
+            filename = f'photo-{i}.{ext}'
+            if download(att['url'], os.path.join(path, filename)) and i == 1:
+                hero_image = filename
+
+        place = post.get('place') or {}
+        dt = datetime.fromisoformat(post['created_at'].replace('Z', '+00:00'))
+        date_fmt = dt.strftime('%Y-%m-%d %H:%M')
+
+        entry_md = ENTRY_TEMPLATE.format(
+            title=f'Pixelfed Import {n}',
+            date=date_fmt,
+            hero_image=hero_image,
+            location_city=place.get('name', ''),
+            location_country=place.get('country', ''),
+            body=post.get('content_text', '').strip(),
+        )
+
+        with open(os.path.join(path, 'entry.md'), 'w') as f:
+            f.write(entry_md)
+
+    print(f'\nDone. Posts per trip: {counters}')
+
+
+if __name__ == '__main__':
+    main()
+```
+
+- [ ] **Step 2: Add make target**
+
+In `Makefile`, after the `demo-reset` block, add:
+
+```makefile
+pixelfed-import:
+	python3 scripts/pixelfed-import.py
+```
+
+- [ ] **Step 3: Run the import**
+
+```bash
+make pixelfed-import
+```
+
+Expected output (approximately):
+
+```
+Creating central-asia-2023/2023-08-28-pixelfed-1.entry
+Creating central-asia-2023/2023-08-29-pixelfed-2.entry
+...
+Creating us-canada-mex-2024/2024-05-28-pixelfed-1.entry
+...
+Creating italy-2025/2025-10-11-pixelfed-1.entry
+Creating italy-2025/2025-10-16-pixelfed-2.entry
+
+Done. Posts per trip: {'central-asia-2023': 22, 'us-canada-mex-2024': 12, 'italy-2025': 2}
+```
+
+- [ ] **Step 4: Verify entries in the browser**
+
+Open `http://localhost:8081/trips/central-asia-2023/dailies` — confirm entries appear in reverse-date order with photos.
+
+Open one entry (e.g. the first Central Asia post) — confirm the hero image displays and the body text is readable.
+
+- [ ] **Step 5: Verify entries in Admin2**
+
+Log in at `http://localhost:8081/admin`. Navigate to Pages → find one of the new entry pages. Confirm the media tab shows the downloaded photos.
+
+- [ ] **Step 6: Commit main repo (script + Makefile)**
+
+```bash
+git add scripts/pixelfed-import.py Makefile
+git commit -m "feat: add pixelfed-import script and make target"
+```
+
+- [ ] **Step 7: Commit user repo (imported entries)**
+
+```bash
+git -C user add user/pages/01.trips/central-asia-2023/01.dailies
+git -C user add user/pages/01.trips/us-canada-mex-2024/01.dailies
+git -C user add user/pages/01.trips/italy-2025/01.dailies
+git -C user commit -m "feat: import 36 Pixelfed posts into central-asia-2023, us-canada-mex-2024, italy-2025"
+```
+
+- [ ] **Step 8: Push to Gitea**
+
+```bash
+make content-push
+```
+
+Expected: push completes, production webhook fires.

docs/working/plans/2026-06-20-ui-ux-alignment.md

@@ -0,0 +1,626 @@
+# UI/UX Alignment 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.
+
+**Status:** ✅ Complete (2026-06-20) — also extended to story map markers (white diamond) and story card flash highlight.
+
+**Goal:** Unify three micro-interaction patterns across the site: back navigation pills, card hover lift, and a map-to-card flash highlight.
+
+**Architecture:** CSS-first — shared `.back-pill` class drives visual consistency; entry card markup is collapsed from a two-level `article > a` to a flat `<a>` to align hover targets across all three card types; map flash is a short CSS keyframe triggered by a JS-added class.
+
+**Tech Stack:** Twig templates, vanilla CSS custom properties, vanilla JS, Playwright for tests.
+
+## Global Constraints
+
+- Dev server: `http://localhost:8081` — must be running (`make start`) before any Playwright run
+- Playwright: `npx playwright test --project=chromium tests/ui/<file>.spec.js` — always run the affected spec after changes
+- Demo data required for story/map tests: `make demo-load`
+- All CSS uses design tokens from `user/themes/intotheeast/css/tokens.css` — never hard-code colours
+- `--color-paper: #1A1814`, `--color-canvas: #22201B`, `--color-ink: #EDE8DF` — the site is dark-themed
+- `--site-header-height: 60px` — fixed pills must clear the site nav
+- Never read `.env` directly
+
+---
+
+## File Map
+
+| File | What changes |
+|---|---|
+| `user/themes/intotheeast/css/style.css` | Add `.back-pill` class; remove duplicate `.story-escape` block; migrate `.entry-card-inner` hover rules to `.entry-card`; add uniform card hover lift; add `@keyframes card-highlight` |
+| `user/themes/intotheeast/templates/story.html.twig` | Add `class="back-pill"` to story-footer back link (line 61) |
+| `user/themes/intotheeast/templates/entry.html.twig` | Add fixed top back pill before `<article class="entry">`; replace footer teal link with `.back-pill`; add `.entry-back-fixed` CSS |
+| `user/themes/intotheeast/templates/trip.html.twig` | Collapse `<article class="entry-card"><a class="entry-card-inner">` to `<a class="entry-card">` for both card variants; update marker click handler with flash delay |
+| `tests/ui/dailies.spec.js` | Update T2 selectors from `.entry-card a[href*="..."]` to `.entry-card[href*="..."]`; add T6 (back pills on entry page) |
+| `tests/ui/maps.spec.js` | Add M7 (marker click adds `is-highlighted` class) |
+
+---
+
+## Task 1: CSS foundation — `.back-pill`, card hover lift, flash keyframe, story-escape cleanup
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/style.css`
+
+**Interfaces:**
+- Produces: `.back-pill` class (surface pill), `.entry-card.is-highlighted` animation, uniform hover lift on `.trip-card:hover`, `.entry-card:hover`, `.story-card:hover`
+
+- [x] **Step 1: Add `.back-pill` surface pill class**
+
+Find the `/* ── Back to top pill ──` section (around line 1217). Insert the following block immediately **before** it:
+
+```css
+/* ── Back pill (shared navigation pill component) ───────────────────── */
+.back-pill {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink);
+    text-decoration: none;
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: 0.4rem 0.9rem;
+    transition: border-color 0.15s, color 0.15s;
+    cursor: pointer;
+}
+.back-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
+```
+
+- [x] **Step 2: Remove the duplicate `.story-escape` block**
+
+Around line 958 there is a `/* ── Story page escape link ──` section with a `.story-escape` rule that is overridden later by the story-section block. Remove this entire section:
+
+```css
+/* ── Story page escape link ──────────────────────────────────────────────────── */
+
+.story-escape {
+    position: fixed;
+    top: var(--space-5);
+    left: var(--space-5);
+    z-index: 200;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink);
+    text-decoration: none;
+    background: rgba(0,0,0,0.6);
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    backdrop-filter: blur(4px);
+}
+
+.story-escape:hover { color: var(--color-accent); }
+```
+
+The authoritative `.story-escape` definition remains in the `/* ── Story pages ──` section (~line 1056).
+
+- [x] **Step 3: Add uniform card hover lift + fix story-card transition**
+
+Find the `.trip-card:hover` rule (in `/* ── Past trips archive ──`). After the existing `.trip-card:hover` block, add:
+
+```css
+.trip-card:hover,
+.entry-card:hover,
+.story-card:hover {
+    background: var(--color-surface-raised);
+}
+```
+
+Then find `.story-card` in the `/* ── Stories listing ──` section and add `background 0.15s` to its existing transition so the lift animates:
+
+```css
+/* Before: */
+.story-card {
+    ...
+    transition: box-shadow 0.2s;
+}
+
+/* After: */
+.story-card {
+    ...
+    transition: box-shadow 0.2s, background 0.15s;
+}
+```
+
+- [x] **Step 4: Add map flash keyframe**
+
+At the end of the `/* ── Feed ──` section (after `.entry-card` and related rules, around line 210), add:
+
+```css
+@keyframes card-highlight {
+    0%   { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+    100% { background-color: transparent; }
+}
+
+.entry-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+- [x] **Step 5: Verify no JS errors on the site**
+
+```bash
+npx playwright test --project=chromium tests/ui/maps.spec.js -g "M1:"
+```
+
+Expected: PASS (map page loads without errors — confirms CSS is valid).
+
+- [x] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/css/style.css
+git commit -m "feat: add back-pill class, card hover lift, flash keyframe; remove duplicate story-escape"
+```
+
+---
+
+## Task 2: Story template — apply `.back-pill` to body back link
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/story.html.twig`
+
+**Interfaces:**
+- Consumes: `.back-pill` class from Task 1
+
+- [x] **Step 1: Write the failing test**
+
+Add to `tests/ui/stories.spec.js`:
+
+```js
+// ── S7: Story body back link is styled as a back-pill ────────────────────────
+test('S7: story body back link has back-pill class', async ({ page }) => {
+    await page.goto('/trips/italy-2025/stories/val-dorcia-dawn');
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    // Scroll past the hero to reveal the story body
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight * 1.5));
+    await page.waitForTimeout(300);
+    const bodyBack = page.locator('.story-footer .back-pill');
+    await expect(bodyBack).toBeAttached();
+    await expect(bodyBack).toHaveText(/← Back/);
+});
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+```bash
+npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
+```
+
+Expected: FAIL — "locator('.story-footer .back-pill')" found 0 elements.
+
+- [x] **Step 3: Apply `.back-pill` to the story footer back link + fix `.story-footer a` conflict**
+
+In `story.html.twig`, the story footer currently reads:
+
+```twig
+    <footer class="story-footer">
+        <a href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
+```
+
+Change the `<a>` to:
+
+```twig
+    <footer class="story-footer">
+        <a class="back-pill" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
+```
+
+Then in `style.css`, find `.story-footer a` and add `:not(.back-pill)` so it no longer overrides the pill colour:
+
+```css
+/* Before: */
+.story-footer a {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-accent);
+    text-decoration: none;
+}
+
+/* After: */
+.story-footer a:not(.back-pill) {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-accent);
+    text-decoration: none;
+}
+```
+
+- [x] **Step 4: Run test to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
+```
+
+Expected: PASS.
+
+- [x] **Step 5: Run full stories suite to check no regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/stories.spec.js
+```
+
+Expected: All S1–S7 pass.
+
+- [x] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/story.html.twig user/themes/intotheeast/css/style.css tests/ui/stories.spec.js
+git commit -m "feat: apply back-pill class to story footer back link"
+```
+
+---
+
+## Task 3: Entry page — fixed top back pill + footer back pill
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/entry.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+- Modify: `tests/ui/dailies.spec.js`
+
+**Interfaces:**
+- Consumes: `.back-pill` class from Task 1
+
+- [x] **Step 1: Write the failing test**
+
+Add to `tests/ui/dailies.spec.js`:
+
+```js
+const KNOWN_ENTRY = '/trips/japan-korea-2026/dailies/2026-03-25-1540-wheels-down-narita.entry';
+
+// ── T6: Entry page has a fixed top back pill and a footer back pill ───────────
+test('T6: entry page has fixed back pill at top and back pill in footer', async ({ page }) => {
+    await page.goto(KNOWN_ENTRY);
+    await expect(page.locator('article.entry')).toBeVisible();
+    // Fixed top pill (outside the article, before it)
+    const topPill = page.locator('.entry-back-fixed');
+    await expect(topPill).toBeVisible();
+    await expect(topPill).toHaveText(/← Back/);
+    // Footer pill
+    const footerPill = page.locator('.entry-footer .back-pill');
+    await expect(footerPill).toBeVisible();
+    await expect(footerPill).toHaveText(/← Back/);
+});
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
+```
+
+Expected: FAIL — `.entry-back-fixed` not found.
+
+- [x] **Step 3: Add fixed top back pill to entry template**
+
+In `entry.html.twig`, the content block currently starts with `<article class="entry">`. Add the fixed pill immediately before it:
+
+```twig
+<a class="back-pill entry-back-fixed" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
+
+<article class="entry">
+```
+
+- [x] **Step 4: Replace footer teal text link with `.back-pill`**
+
+The current entry footer (around line 124 of entry.html.twig):
+
+```twig
+    <footer class="entry-footer">
+        <a href="{{ page.parent().url }}" onclick="if(history.length>1){event.preventDefault();history.back()}">← Back</a>
+    </footer>
+```
+
+Replace with:
+
+```twig
+    <footer class="entry-footer">
+        <a class="back-pill" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
+    </footer>
+```
+
+- [x] **Step 5: Add `.entry-back-fixed` positioning to CSS**
+
+In `style.css`, in the `/* ── Single entry ──` section, add after the existing `.entry-hero` rules:
+
+```css
+.entry-back-fixed {
+    position: fixed;
+    top: calc(var(--site-header-height) + var(--space-3));
+    left: var(--space-4);
+    z-index: 100;
+}
+```
+
+- [x] **Step 6: Run test to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
+```
+
+Expected: PASS.
+
+- [x] **Step 7: Run full dailies suite to check no regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js
+```
+
+Expected: T1–T6 all pass.
+
+- [x] **Step 8: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/entry.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js
+git commit -m "feat: add fixed top and footer back pills to entry page"
+```
+
+---
+
+## Task 4: Entry card structural refactor + CSS migration
+
+Collapse the two-level `<article class="entry-card"><a class="entry-card-inner">` to a flat `<a class="entry-card">`, matching the structure of trip and story cards.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+- Modify: `tests/ui/dailies.spec.js`
+
+**Interfaces:**
+- Produces: `.entry-card` is now an `<a>` element; `id`, `data-type`, `data-lat`, `data-lng` attributes remain on the card root; `.entry-card-inner` class is eliminated
+
+- [x] **Step 1: Update T2 test selectors before touching the templates**
+
+In `tests/ui/dailies.spec.js`, find the T2 test and replace:
+
+```js
+// OLD — inner <a> is nested inside .entry-card
+const newerCard = page.locator(`.entry-card a[href*="${NEWER_SLUG}"]`);
+const olderCard = page.locator(`.entry-card a[href*="${OLDER_SLUG}"]`);
+
+await expect(newerCard).toBeVisible();
+await expect(olderCard).toBeVisible();
+
+const newerIdx = await newerCard.evaluate(el => {
+    return [...document.querySelectorAll('.entry-card')].findIndex(c => c.contains(el));
+});
+const olderIdx = await olderCard.evaluate(el => {
+    return [...document.querySelectorAll('.entry-card')].findIndex(c => c.contains(el));
+});
+```
+
+With:
+
+```js
+// NEW — .entry-card is itself the <a>
+const newerCard = page.locator(`.entry-card[href*="${NEWER_SLUG}"]`);
+const olderCard = page.locator(`.entry-card[href*="${OLDER_SLUG}"]`);
+
+await expect(newerCard).toBeVisible();
+await expect(olderCard).toBeVisible();
+
+const newerIdx = await newerCard.evaluate(el => {
+    return [...document.querySelectorAll('.entry-card')].findIndex(c => c === el);
+});
+const olderIdx = await olderCard.evaluate(el => {
+    return [...document.querySelectorAll('.entry-card')].findIndex(c => c === el);
+});
+```
+
+- [x] **Step 2: Run T2 to verify it fails (not yet refactored)**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
+```
+
+Expected: FAIL — `.entry-card[href*="..."]` finds 0 elements (the `href` is on the inner `<a>`, not the article).
+
+- [x] **Step 3: Refactor journal entry card markup in `trip.html.twig`**
+
+Find the journal card block:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    <article class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+                        <a class="entry-card-inner" href="{{ entry.url }}">
+```
+
+Replace with:
+
+```twig
+                    {% if item.type == 'journal' %}
+                    <a class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}" href="{{ entry.url }}">
+```
+
+And close the card with `</a>` instead of `</a></article>`. The closing tags currently are:
+
+```twig
+                        </a>
+                    </article>
+```
+
+Replace with:
+
+```twig
+                    </a>
+```
+
+- [x] **Step 4: Refactor story-in-feed card markup in `trip.html.twig`**
+
+Find the story-in-feed card block:
+
+```twig
+                    <article class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story">
+                        <a class="entry-card-inner" href="{{ entry.url }}">
+```
+
+Replace with:
+
+```twig
+                    <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
+```
+
+And its closing tags (currently `</a></article>`) become:
+
+```twig
+                    </a>
+```
+
+- [x] **Step 5: Migrate `.entry-card-inner` CSS rules to `.entry-card`**
+
+In `style.css`, find the `/* ── Feed ──` section. Currently:
+
+```css
+.entry-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-12); }
+
+.entry-card-inner {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+```
+
+Replace with (merge inner styles onto card, `.entry-card-inner` is eliminated):
+
+```css
+.entry-card {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space-12);
+    transition: background 0.15s;
+}
+```
+
+Then find the two `.entry-card-inner:hover` rules and rename them to `.entry-card:hover`:
+
+```css
+/* Before: */
+.entry-card-inner:hover .entry-card-photo img { transform: scale(1.04); }
+/* After:  */
+.entry-card:hover .entry-card-photo img { transform: scale(1.04); }
+```
+
+```css
+/* Before: */
+.entry-card-inner:hover .entry-title { color: var(--color-accent); }
+/* After:  */
+.entry-card:hover .entry-title { color: var(--color-accent); }
+```
+
+- [x] **Step 6: Run T2 to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
+```
+
+Expected: PASS.
+
+- [x] **Step 7: Run full test suites to check no regressions**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js
+```
+
+Expected: T1–T6, F1–F7, M1–M6 all pass.
+
+- [x] **Step 8: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js
+git commit -m "refactor: collapse entry card article+a to flat <a>, unify hover targets across card types"
+```
+
+---
+
+## Task 5: Map flash — JS update + test
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+- Modify: `tests/ui/maps.spec.js`
+
+**Interfaces:**
+- Consumes: `.entry-card.is-highlighted` CSS animation from Task 1; `id="entry-{{ slug }}"` on `<a class="entry-card">` from Task 4
+
+- [x] **Step 1: Write the failing test**
+
+Add to `tests/ui/maps.spec.js`:
+
+```js
+// ── M7: Clicking a trip-page map marker adds is-highlighted to the entry card ──
+test('M7: clicking map marker briefly highlights the corresponding entry card', async ({ page }) => {
+    await page.goto('/trips/japan-korea-2026');
+    // Wait for map canvas and at least one marker
+    await expect(page.locator('#trip-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    // Click the first marker
+    await page.locator('.maplibregl-marker').first().click();
+
+    // Within 500ms of click + delay, one entry-card should have is-highlighted
+    await expect(page.locator('.entry-card.is-highlighted')).toBeVisible({ timeout: 1500 });
+});
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+```bash
+npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
+```
+
+Expected: FAIL — `.entry-card.is-highlighted` not found.
+
+- [x] **Step 3: Update the marker click handler in `trip.html.twig`**
+
+Find the existing marker click handler in `trip.html.twig`:
+
+```js
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+```
+
+Replace with:
+
+```js
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (!card) return;
+            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            setTimeout(function () {
+                card.classList.add('is-highlighted');
+                setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+            }, 350);
+        });
+```
+
+- [x] **Step 4: Run test to verify it passes**
+
+```bash
+npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
+```
+
+Expected: PASS.
+
+- [x] **Step 5: Run full maps suite**
+
+```bash
+npx playwright test --project=chromium tests/ui/maps.spec.js
+```
+
+Expected: M1–M7 all pass.
+
+- [x] **Step 6: Run all affected suites for final check**
+
+```bash
+npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js tests/ui/stories.spec.js
+```
+
+Expected: All pass.
+
+- [x] **Step 7: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/trip.html.twig tests/ui/maps.spec.js
+git commit -m "feat: add map-to-card flash highlight on marker click"
+```

docs/working/plans/2026-06-21-entry-enrichment.md

@@ -0,0 +1,327 @@
+# Entry Enrichment 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:** Enrich all real trip journal entries with location, GPS coordinates, and approximate weather by generating per-trip Markdown review docs, letting the user correct them, then applying changes to YAML frontmatter.
+
+**Architecture:** Three round-trips (one per trip): Claude generates a review table → user edits the doc → Claude applies the approved values to `entry.md` frontmatter. No scripts — all edits via the Edit tool directly. Human review gates between each trip pair.
+
+**Tech Stack:** Grav YAML frontmatter, Markdown tables, OpenStreetMap URLs for coordinates.
+
+## Global Constraints
+
+- Never read `.env`
+- Only write to `user/` and `docs/` directories
+- `lat`/`lng` must be decimal degree strings (e.g. `'48.8566'`) — not integers
+- `weather_temp_c` must be a string integer (e.g. `'22'`)
+- `weather_desc` must be a single short phrase (e.g. `sunny`, `partly cloudy`, `rainy`)
+- Map Links use OSM format: `https://www.openstreetmap.org/#map=15/{lat}/{lng}`
+- All edits committed to the `user/` git repo via `make content-push` after all three trips are done
+
+---
+
+## File Map
+
+| File | Action | Purpose |
+|---|---|---|
+| `docs/enrichment/central-asia-2023.md` | Create | Review table, 22 rows |
+| `docs/enrichment/us-canada-mex-2024.md` | Create | Review table, 12 rows |
+| `docs/enrichment/italy-2025.md` | Create | Review table, 2 rows |
+| `user/pages/01.trips/central-asia-2023/01.dailies/*/entry.md` | Modify | Update 6 frontmatter fields (22 files) |
+| `user/pages/01.trips/us-canada-mex-2024/01.dailies/*/entry.md` | Modify | Update 6 frontmatter fields (12 files) |
+| `user/pages/01.trips/italy-2025/01.dailies/*/entry.md` | Modify | Update 6 frontmatter fields (2 files) |
+
+---
+
+## Task 1: Generate central-asia-2023 review doc
+
+**Files:**
+- Create: `docs/enrichment/central-asia-2023.md`
+- Read: `user/pages/01.trips/central-asia-2023/01.dailies/*/entry.md` (22 files)
+
+- [ ] **Step 1: Read all 22 entry.md files**
+
+Read each file at `user/pages/01.trips/central-asia-2023/01.dailies/{folder}/entry.md`. Extract: folder name, `date`, `title`, `location_city`, `location_country`, body text.
+
+- [ ] **Step 2: Infer location for each entry**
+
+For each entry:
+1. Read the title first — most locations are explicit.
+2. Fall back to body text if title is ambiguous.
+3. If neither reveals a location clearly, leave City/Country blank and put `?` in the Map Link cell.
+
+Known city → approximate coordinates mapping for this trip (use these; do not hallucinate unfamiliar coordinates):
+
+| City | Country | Lat | Lng |
+|---|---|---|---|
+| Berlin | Germany | 52.5200 | 13.4050 |
+| Astana (Nur-Sultan) | Kazakhstan | 51.1801 | 71.4460 |
+| Almaty | Kazakhstan | 43.2220 | 76.8512 |
+| Karakol | Kyrgyzstan | 42.4900 | 78.3936 |
+| Dushanbe | Tajikistan | 38.5598 | 68.7870 |
+| Samarkand | Uzbekistan | 39.6542 | 66.9597 |
+| Tbilisi | Georgia | 41.6938 | 44.8015 |
+
+- [ ] **Step 3: Estimate weather for each entry**
+
+Use typical daytime high (°C) and one-word description for the city + month. Reference values:
+
+| City | Aug | Sep | Oct |
+|---|---|---|---|
+| Berlin | 24, sunny | 19, partly cloudy | 13, cloudy |
+| Astana | 26, sunny | 17, partly cloudy | 5, cold |
+| Almaty | 28, sunny | 21, sunny | 12, partly cloudy |
+| Karakol | 24, sunny | 16, partly cloudy | 8, cold |
+| Dushanbe | 35, sunny | 28, sunny | 18, sunny |
+| Samarkand | 33, sunny | 25, sunny | 16, partly cloudy |
+| Tbilisi | 29, sunny | 23, sunny | 14, partly cloudy |
+
+- [ ] **Step 4: Write the review doc**
+
+Create `docs/enrichment/central-asia-2023.md` with this exact structure:
+
+```markdown
+# central-asia-2023 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2023-08-28-pixelfed-1.entry | 2023-08-28 | Welcome to My Central Asian Picture Diary | Berlin | Germany | https://www.openstreetmap.org/#map=15/52.5200/13.4050 | 24 | sunny |
+...
+```
+
+One row per entry, in date order.
+
+- [ ] **Step 5: Commit the generated doc**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast
+git add docs/enrichment/central-asia-2023.md
+git commit -m "docs: add central-asia-2023 enrichment review doc"
+```
+
+- [ ] **Step 6: Prompt user to review**
+
+Tell the user: "Review doc generated at `docs/enrichment/central-asia-2023.md`. Please open it, correct any locations or weather values, and let me know when it's ready to apply."
+
+---
+
+## Task 2: Apply central-asia-2023 enrichment (after user approval)
+
+**Files:**
+- Read: `docs/enrichment/central-asia-2023.md`
+- Modify: `user/pages/01.trips/central-asia-2023/01.dailies/*/entry.md` (22 files)
+
+**Prerequisite:** User has reviewed and approved `docs/enrichment/central-asia-2023.md`.
+
+- [ ] **Step 1: Read the reviewed doc**
+
+Read `docs/enrichment/central-asia-2023.md`. Parse each data row of the table.
+
+- [ ] **Step 2: Extract coordinates from Map Links**
+
+For each row where Map Link is not blank:
+
+- OSM format `https://www.openstreetmap.org/#map={zoom}/{lat}/{lng}` → split on `/`, take last two values as lat and lng.
+- Google Maps format `https://www.google.com/maps/@{lat},{lng},{zoom}z` → extract the `@lat,lng` portion.
+- If Map Link is blank or `?`, set lat and lng to `''`.
+
+- [ ] **Step 3: Apply to each entry.md**
+
+For each row, open `user/pages/01.trips/central-asia-2023/01.dailies/{entry}/entry.md` and update these six fields using the Edit tool:
+
+```yaml
+location_city: '{City}'
+location_country: '{Country}'
+lat: '{Lat}'
+lng: '{Lng}'
+weather_temp_c: '{Temp}'
+weather_desc: '{Weather}'
+```
+
+Replace the existing (likely empty) values. Keep all other frontmatter untouched.
+
+- [ ] **Step 4: Verify**
+
+For the first 3 and last entry, read back the file and confirm the six fields are set correctly.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast && git add user/pages/01.trips/central-asia-2023/01.dailies/
+git commit -m "content: enrich central-asia-2023 entries with location and weather"
+```
+
+---
+
+## Task 3: Generate us-canada-mex-2024 review doc
+
+**Files:**
+- Create: `docs/enrichment/us-canada-mex-2024.md`
+- Read: `user/pages/01.trips/us-canada-mex-2024/01.dailies/*/entry.md` (12 files)
+
+- [ ] **Step 1: Read all 12 entry.md files**
+
+Read each file at `user/pages/01.trips/us-canada-mex-2024/01.dailies/{folder}/entry.md`. Extract: folder name, `date`, `title`, body text.
+
+- [ ] **Step 2: Infer location for each entry**
+
+Known cities from titles for this trip:
+
+| Title hint | City | Country | Lat | Lng |
+|---|---|---|---|---|
+| Piran | Piran | Slovenia | 45.5285 | 13.5680 |
+| Portland / Amtrak (destination) | Portland | USA | 45.5231 | -122.6765 |
+| San Francisco / Golden Gate / Highway 1 | San Francisco | USA | 37.7749 | -122.4194 |
+| Los Angeles / burrito / beach | Los Angeles | USA | 34.0522 | -118.2437 |
+| Toronto | Toronto | Canada | 43.6532 | -79.3832 |
+| Niagara Falls | Niagara Falls | Canada | 43.0896 | -79.0849 |
+| Montreal | Montreal | Canada | 45.5017 | -73.5673 |
+| Mexico City | Mexico City | Mexico | 19.4326 | -99.1332 |
+| Twin Peaks / windmills / craft beer | San Francisco | USA | 37.7749 | -122.4194 |
+| Amtrak eighteen hours | (train — use Portland as destination) | USA | 45.5231 | -122.6765 |
+
+Use the title + body together to identify each city.
+
+- [ ] **Step 3: Estimate weather**
+
+Reference values (daytime high °C, description) for this trip's cities + months (May–Aug 2024):
+
+| City | May | Jul | Aug |
+|---|---|---|---|
+| Piran | 21, sunny | — | — |
+| San Francisco | — | 18, partly cloudy | 18, partly cloudy |
+| Los Angeles | — | 28, sunny | 29, sunny |
+| Portland | — | 27, sunny | 27, sunny |
+| Toronto | — | — | 27, sunny |
+| Niagara Falls | — | — | 26, sunny |
+| Montreal | — | — | 26, sunny |
+| Mexico City | — | — | 22, partly cloudy |
+
+- [ ] **Step 4: Write the review doc**
+
+Create `docs/enrichment/us-canada-mex-2024.md` with the same structure as the central-asia doc:
+
+```markdown
+# us-canada-mex-2024 Enrichment Review
+
+**Instructions:** Review each row. To correct coordinates, replace the Map Link with a new OSM link (`https://www.openstreetmap.org/#map=15/{lat}/{lng}`) or a Google Maps URL — coordinates are extracted from the link. Edit City, Country, Temp, and Weather cells directly. Leave Map Link blank if no location is known.
+
+| Entry | Date | Title | City | Country | Map Link | Temp °C | Weather |
+|---|---|---|---|---|---|---|---|
+| 2024-05-28-pixelfed-1.entry | 2024-05-28 | Ice Cream and Old Walls in Piran | Piran | Slovenia | https://www.openstreetmap.org/#map=15/45.5285/13.5680 | 21 | sunny |
+...
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast
+git add docs/enrichment/us-canada-mex-2024.md
+git commit -m "docs: add us-canada-mex-2024 enrichment review doc"
+```
+
+- [ ] **Step 6: Prompt user to review**
+
+Tell the user: "Review doc generated at `docs/enrichment/us-canada-mex-2024.md`. Please open it, correct any locations or weather values, and let me know when it's ready to apply."
+
+---
+
+## Task 4: Apply us-canada-mex-2024 enrichment (after user approval)
+
+**Files:**
+- Read: `docs/enrichment/us-canada-mex-2024.md`
+- Modify: `user/pages/01.trips/us-canada-mex-2024/01.dailies/*/entry.md` (12 files)
+
+**Prerequisite:** User has reviewed and approved `docs/enrichment/us-canada-mex-2024.md`.
+
+- [ ] **Step 1: Read the reviewed doc and parse rows** — same method as Task 2 Step 1.
+
+- [ ] **Step 2: Extract coordinates from Map Links** — same method as Task 2 Step 2.
+
+- [ ] **Step 3: Apply to each entry.md**
+
+For each row, open `user/pages/01.trips/us-canada-mex-2024/01.dailies/{entry}/entry.md` and update the six frontmatter fields.
+
+- [ ] **Step 4: Verify** — read back first 3 and last entry, confirm fields are set.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast && git add user/pages/01.trips/us-canada-mex-2024/01.dailies/
+git commit -m "content: enrich us-canada-mex-2024 entries with location and weather"
+```
+
+---
+
+## Task 5: Generate italy-2025 review doc
+
+**Files:**
+- Create: `docs/enrichment/italy-2025.md`
+- Read: `user/pages/01.trips/italy-2025/01.dailies/*/entry.md` (2 files)
+
+- [ ] **Step 1: Read both entry.md files.**
+
+- [ ] **Step 2: Infer location.**
+
+Entry 1 (2025-10-11): "600km of Tuscany Begins with an Aperitif" — route starts at Venturina Terme (from GPX filename). City: Venturina Terme, Italy. Lat: 43.0183, Lng: 10.6059.
+
+Entry 2 (2025-10-16): read title + body to determine.
+
+- [ ] **Step 3: Estimate weather.**
+
+Tuscany, October: 18°C, partly cloudy (typical autumn).
+
+- [ ] **Step 4: Write the review doc.**
+
+Create `docs/enrichment/italy-2025.md` with the same structure, 2 data rows.
+
+- [ ] **Step 5: Commit.**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast
+git add docs/enrichment/italy-2025.md
+git commit -m "docs: add italy-2025 enrichment review doc"
+```
+
+- [ ] **Step 6: Prompt user to review.**
+
+Tell the user: "Review doc generated at `docs/enrichment/italy-2025.md`. Please open it, correct any values, and let me know when ready to apply."
+
+---
+
+## Task 6: Apply italy-2025 enrichment (after user approval)
+
+**Files:**
+- Read: `docs/enrichment/italy-2025.md`
+- Modify: `user/pages/01.trips/italy-2025/01.dailies/*/entry.md` (2 files)
+
+**Prerequisite:** User has reviewed and approved `docs/enrichment/italy-2025.md`.
+
+- [ ] **Step 1: Read the reviewed doc and parse rows.**
+
+- [ ] **Step 2: Extract coordinates from Map Links.**
+
+- [ ] **Step 3: Apply to both entry.md files** — update six frontmatter fields.
+
+- [ ] **Step 4: Verify** — read both files back, confirm fields are set.
+
+- [ ] **Step 5: Commit and sync**
+
+```bash
+cd /home/mischa/Projects/travel-blog-intotheeast && git add user/pages/01.trips/italy-2025/01.dailies/
+git commit -m "content: enrich italy-2025 entries with location and weather"
+make content-push
+```
+
+---
+
+## Self-Review Notes
+
+- All 36 entries covered across 6 tasks (3 generate + 3 apply)
+- Human review gates are explicit: each "apply" task has a **Prerequisite** line
+- Coordinate extraction rules cover both OSM and Google Maps URL formats
+- Weather reference tables provide concrete values — no vague "look it up"
+- `make content-push` only runs after the final trip to avoid partial syncs
+- No test files needed — this is data enrichment; verification steps replace TDD

docs/working/plans/2026-06-21-homepage-redesign.md

@@ -0,0 +1,942 @@
+# Homepage Redesign 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:** Context-aware homepage with a persistent two-column map+feed layout: active-trip mode shows the live feed + GPX on the home map; between-trips mode shows a curated highlights grid from all trips with markers-only on the map.
+
+**Architecture:** Single `home.html.twig` with a `{% if config.site.travelling %}` branch. Active trip branch keeps the existing feed and adds GPX loading to the home map. Between-trips branch selects one random `featured:true` entry per trip (max 6), renders a highlight card grid, and passes coordinates to the map (no GPX, no journey line). Three blueprint files expose new data fields. A site-config blueprint exposes the mode switch and active-trip selector in Admin2.
+
+**Tech Stack:** Grav CMS 2.0 (PHP/Twig), MapLibre GL v4, toGeoJSON CDN, Playwright (Node.js)
+
+## Global Constraints
+
+- All `user/` file changes committed via `git -C user` from the project root (or `git` from within `user/`)
+- Test files in `tests/ui/` and `scripts/` committed via plain `git` from the project root
+- No new Grav plugins
+- No JS build pipeline — plain CSS and vanilla JS only
+- `config.site.active_trip` stores a **full page route**: `/trips/italy-2026-demo` (not a bare slug)
+- `config.site.travelling` is `true` for active-trip mode, `false` for between-trips mode
+- `entry.header.featured` and `story.header.featured` (bool) gate highlight eligibility — no type-based auto-include; both stories and journal entries use the same flag
+- `trip.header.tagline` (string) is the trip description shown on highlight cards
+- Dev server at `http://localhost:8081` must be running (`make start`) for all Playwright tests
+- Demo data must be loaded (`make demo-load`) before running Playwright tests
+- Playwright test IDs continue sequentially: next map test is M8; next home tests are H2–H5
+
+---
+
+### Task 1: Blueprints, config, and demo seed data
+
+**Files:**
+- Create: `user/blueprints/config/site.yaml`
+- Modify: `user/themes/intotheeast/blueprints/trip.yaml` — add `tagline` field in Trip tab
+- Modify: `user/themes/intotheeast/blueprints/entry.yaml` — add `featured` toggle in Entry tab
+- Modify: `user/themes/intotheeast/blueprints/story.yaml` — add `featured` toggle in Publishing tab
+- Modify: `user/config/site.yaml` — change `active_trip` to full route, add `travelling: true`
+- Modify: `user/pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md` — add `featured: true`
+- Modify: first journal entry under `user/pages/01.trips/italy-2026-demo/01.dailies/` — add `featured: true`
+- Modify: matching demo source files in `user/docs/demo/trips/italy-2026-demo/` — mirror the `featured: true` additions
+
+**Interfaces:**
+- Produces: `config.site.travelling` (bool) — read in Twig as `config.site.travelling`
+- Produces: `config.site.active_trip` (string, full route) — used in Task 2 path lookups
+- Produces: `entry.header.featured` / `story.header.featured` (bool) — used in Task 3 selection logic
+- Produces: `trip.header.tagline` (string) — used in Task 3 card rendering
+
+- [ ] **Step 1: Record baseline test result**
+
+```bash
+make test
+```
+
+Expected: 13 passed, 1 failed (`parent set to /trips/japan-korea-2026/dailies` — pre-existing). Record this so you can verify nothing changed after your edits.
+
+- [ ] **Step 2: Create `user/blueprints/config/site.yaml`**
+
+```yaml
+form:
+  validation: loose
+  fields:
+    active_trip:
+      type: pages
+      label: Active Trip
+      start_route: '/trips'
+      show_root: false
+      show_slug: true
+
+    travelling:
+      type: toggle
+      label: Currently Travelling
+      highlight: 1
+      default: false
+      options:
+        1: 'Yes'
+        0: 'No'
+      validate:
+        type: bool
+```
+
+Note: `type: pages` is confirmed present in Admin2's JS bundle but untested in a site config blueprint. If it fails to render in Admin2, fall back to `type: select` with explicit `options:` entries — one per trip slug — and no other code changes are needed.
+
+- [ ] **Step 3: Add `tagline` to `user/themes/intotheeast/blueprints/trip.yaml`**
+
+In the `trip` tab's `fields` block, after `header.album_url`, add:
+
+```yaml
+            header.tagline:
+              type: text
+              label: Tagline
+              placeholder: '6 weeks from Venice to Sicily by train'
+              help: 'Short description shown on homepage highlight cards'
+```
+
+- [ ] **Step 4: Add `featured` toggle to `user/themes/intotheeast/blueprints/entry.yaml`**
+
+In the `entry` tab's `fields` block, after `header.force_connect`, add:
+
+```yaml
+            header.featured:
+              type: toggle
+              label: Featured highlight
+              help: 'Show as a homepage highlight when not travelling'
+              highlight: 1
+              default: 0
+              options:
+                1: 'Yes'
+                0: 'No'
+              validate:
+                type: bool
+```
+
+- [ ] **Step 5: Add `featured` toggle to `user/themes/intotheeast/blueprints/story.yaml`**
+
+In the `publishing` tab's `fields` block, after `header.published`, add:
+
+```yaml
+            header.featured:
+              type: toggle
+              label: Featured highlight
+              help: 'Show as a homepage highlight when not travelling'
+              highlight: 1
+              default: 0
+              options:
+                1: 'Yes'
+                0: 'No'
+              validate:
+                type: bool
+```
+
+- [ ] **Step 6: Update `user/config/site.yaml`**
+
+Replace the file contents with:
+
+```yaml
+title: 'Into the East'
+description: 'A travel blog by Mischa'
+author:
+  name: Mischa
+  email: mischa@gorinskat.nl
+taxonomies: [category, tag]
+metadata:
+  description: 'Into the East — travel journal'
+active_trip: /trips/italy-2026-demo
+travelling: true
+```
+
+- [ ] **Step 7: Mark the demo story as featured**
+
+Open `user/pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md` and add `featured: true` to its YAML frontmatter block. For example, if the existing frontmatter ends with `published: true`, add the line after it:
+
+```yaml
+featured: true
+```
+
+- [ ] **Step 8: Mark one demo journal entry as featured**
+
+Find the first entry folder:
+
+```bash
+ls user/pages/01.trips/italy-2026-demo/01.dailies/ | head -1
+```
+
+Open `user/pages/01.trips/italy-2026-demo/01.dailies/<that-slug>/entry.md` and add `featured: true` to its YAML frontmatter. Ensure the entry has `lat` and `lng` set — if the first entry doesn't, pick the first one that does (check with `grep -l "^lat:" user/pages/01.trips/italy-2026-demo/01.dailies/*/entry.md | head -1`).
+
+- [ ] **Step 9: Mirror featured flags to demo source**
+
+The demo source lives in `user/docs/demo/trips/italy-2026-demo/`. Apply the same `featured: true` additions to:
+- `user/docs/demo/trips/italy-2026-demo/stories/val-dorcia-at-dawn/story.md`
+- The matching journal entry in `user/docs/demo/trips/italy-2026-demo/dailies/<slug>/entry.md`
+
+This ensures featured flags survive `make demo-reset`.
+
+- [ ] **Step 10: Verify tests unchanged**
+
+```bash
+make test
+```
+
+Expected: identical to Step 1 (13 passed, 1 pre-existing failure). These are YAML-only changes — no template or script changed.
+
+- [ ] **Step 11: Commit**
+
+```bash
+git -C user add blueprints/config/site.yaml \
+    themes/intotheeast/blueprints/trip.yaml \
+    themes/intotheeast/blueprints/entry.yaml \
+    themes/intotheeast/blueprints/story.yaml \
+    config/site.yaml \
+    pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md \
+    docs/demo/trips/italy-2026-demo/stories/val-dorcia-at-dawn/story.md
+git -C user commit -m "feat: add blueprints for active_trip/travelling config, tagline, featured fields"
+```
+
+Then commit the journal entry (substitute the actual slug discovered in Step 8):
+
+```bash
+git -C user add pages/01.trips/italy-2026-demo/01.dailies/<slug>/entry.md \
+    docs/demo/trips/italy-2026-demo/dailies/<slug>/entry.md
+git -C user commit -m "chore: mark demo entries as featured for homepage highlight testing"
+```
+
+---
+
+### Task 2: Active trip mode — route-based lookup + GPX on home map
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/home.html.twig` — full replacement
+- Modify: `tests/ui/maps.spec.js` — add M8
+
+**Interfaces:**
+- Consumes: `config.site.travelling` (bool) — Task 1
+- Consumes: `config.site.active_trip` (full route string) — Task 1
+- Produces: `window.homeMap` global (already existed — now with GPX sources `home-gpx-0` … and `home-journey`)
+- Produces: `{% else %}` placeholder in template for Task 3 to fill
+
+- [ ] **Step 1: Write failing test M8**
+
+Add to `tests/ui/maps.spec.js`:
+
+```js
+// ── M8: Home map has GPX journey source on active trip ────────────────────────
+test('M8: home map has a journey source after GPX settles (active trip)', async ({ page }) => {
+    // Requires travelling: true in user/config/site.yaml (set in Task 1).
+    // Requires GPX files attached to the active trip (italy-2026-demo has 7).
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/');
+    await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('#home-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    await page.waitForFunction(function () {
+        return window.homeMap &&
+               (window.homeMap.getSource('home-journey') !== undefined ||
+                window.homeMap.getSource('home-gpx-0') !== undefined);
+    }, { timeout: 20000 });
+
+    const hasSource = await page.evaluate(function () {
+        return !!(window.homeMap.getSource('home-journey') || window.homeMap.getSource('home-gpx-0'));
+    });
+
+    expect(hasSource, 'Home map has a journey or GPX source').toBe(true);
+    expect(errors, 'No JS errors on home page').toHaveLength(0);
+});
+```
+
+Run to confirm it fails:
+
+```bash
+npx playwright test tests/ui/maps.spec.js --grep "M8"
+```
+
+Expected: FAIL (GPX sources not yet added to home map).
+
+- [ ] **Step 2: Replace `home.html.twig` with the active-trip-mode version**
+
+Replace the entire file with:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set trip_route = config.site.active_trip %}
+{% set trip = grav.pages.find(trip_route) %}
+
+{% if config.site.travelling %}
+{# ══════════════════════════════════════════════════════════ ACTIVE TRIP MODE #}
+
+{% set dailies_page = grav.pages.find(trip_route ~ '/dailies') %}
+{% set stories_page = grav.pages.find(trip_route ~ '/stories') %}
+{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
+{% set story_entries = stories_page ? stories_page.children.published() : [] %}
+
+{% set all_items = [] %}
+{% for e in journal_entries %}
+    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
+{% endfor %}
+{% for s in story_entries %}
+    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
+{% endfor %}
+{% set all_items = all_items|sort_by_key('date', 3) %}
+
+{% set journal_count = journal_entries|length %}
+{% set story_count = story_entries|length %}
+
+{% set map_entries = [] %}
+{% for item in all_items %}
+    {% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
+        {% set map_entries = map_entries|merge([{
+            'lat': item.page.header.lat|number_format(6, '.', ''),
+            'lng': item.page.header.lng|number_format(6, '.', ''),
+            'slug': item.page.slug,
+            'title': item.page.title,
+            'url': item.page.url,
+            'force_connect': item.page.header.force_connect ? true : false
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+{% set home_gpx_urls = [] %}
+{% if trip %}
+    {% for name, media in trip.media.all %}
+        {% if name|split('.')|last == 'gpx' %}
+            {% set home_gpx_urls = home_gpx_urls|merge([trip.url ~ '/' ~ name]) %}
+        {% endif %}
+    {% endfor %}
+{% endif %}
+
+<div class="home-layout">
+    <div class="home-map-col">
+        <div class="home-map" id="home-map"></div>
+    </div>
+
+    <div class="home-feed-col">
+        <div class="home-trip-header">
+            <h1 class="home-trip-name">{{ trip ? trip.title : trip_route }}</h1>
+            <span class="home-trip-counts">
+                {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
+                {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
+            </span>
+        </div>
+
+        <div class="feed">
+            {% if all_items|length > 0 %}
+                {% for item in all_items %}
+                    {% set entry = item.page %}
+
+                    {% if item.type == 'journal' %}
+                    {% set weather_icons = {
+                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+                        'Snow': '❄️', 'Thunderstorm': '⛈️'
+                    } %}
+                    <article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+                        <header class="journal-post-header">
+                            <h2 class="journal-post-title">{{ entry.title }}</h2>
+                            <p class="journal-post-meta">
+                                <a class="journal-post-permalink" href="{{ entry.url }}">
+                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+                                </a>
+                                {% if entry.header.location_city or entry.header.location_country %}
+                                <span class="journal-post-location">
+                                    · 📍
+                                    {%- set _loc = [] -%}
+                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                                    {{ _loc|join(', ') }}
+                                </span>
+                                {% endif %}
+                                {% if entry.header.weather_desc %}
+                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+                                {% endif %}
+                            </p>
+                        </header>
+
+                        {% set images = entry.media.images %}
+                        {% if images|length > 0 %}
+                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                            {% for img in images %}
+                            <div class="journal-photo-slide">
+                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                            </div>
+                            {% endfor %}
+                        </div>
+                        {% if images|length > 1 %}
+                        <div class="journal-photo-dots" aria-hidden="true">
+                            {% for img in images %}
+                            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+                            {% endfor %}
+                        </div>
+                        {% endif %}
+                        {% endif %}
+
+                        <div class="journal-post-body">{{ entry.content|raw }}</div>
+                    </article>
+                    {% else %}
+                    {% set hero = null %}
+                    {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
+                        {% set hero = entry.media[entry.header.hero_image] %}
+                    {% elseif entry.media.images|length > 0 %}
+                        {% set hero = entry.media.images|first %}
+                    {% endif %}
+                    <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" href="{{ entry.url }}">
+                        {% if hero %}
+                        <div class="entry-card-photo entry-card-photo--story">
+                            <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                        </div>
+                        {% endif %}
+                        <div class="entry-card-body">
+                            <span class="story-badge">✦ Story</span>
+                            <h2 class="entry-title">{{ entry.title }}</h2>
+                        </div>
+                    </a>
+                    {% endif %}
+                {% endfor %}
+            {% else %}
+                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% if map_entries|length > 0 %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+{% if home_gpx_urls|length > 0 %}
+<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+{% endif %}
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+<script>
+var HOME_ENTRIES  = {{ map_entries|json_encode|raw }};
+var HOME_GPX_URLS = {{ home_gpx_urls|json_encode|raw }};
+
+var homeMap = new maplibregl.Map({
+    container: 'home-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2
+});
+
+homeMap.on('load', function () {
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = [];
+
+    HOME_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === HOME_ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        coords.push(lngLat);
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
+    });
+
+    /* Draw simple journey line immediately; replaced below if GPX is present */
+    MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
+
+    if (HOME_ENTRIES.length === 1) {
+        homeMap.jumpTo({ center: coords[0], zoom: 10 });
+    } else {
+        homeMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    setTimeout(function () { homeMap.resize(); }, 100);
+
+    if (HOME_GPX_URLS.length > 0) {
+        Promise.all(HOME_GPX_URLS.map(function (url, idx) {
+            return fetch(url)
+                .then(function (r) { return r.text(); })
+                .then(function (text) {
+                    var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                    var geojson = toGeoJSON.gpx(xml);
+                    var sid     = 'home-gpx-' + idx;
+                    homeMap.addSource(sid, { type: 'geojson', data: geojson });
+                    homeMap.addLayer({
+                        id: sid + '-line', type: 'line', source: sid,
+                        layout: { 'line-join': 'round', 'line-cap': 'round' },
+                        paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
+                    });
+                    return MapUtils.extractTrackpoints(geojson);
+                })
+                .catch(function (err) { console.warn('GPX load failed:', url, err); return []; });
+        })).then(function (allTrackpoints) {
+            if (homeMap.getLayer('home-journey')) homeMap.removeLayer('home-journey');
+            if (homeMap.getSource('home-journey')) homeMap.removeSource('home-journey');
+            var valid    = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+            var segments = MapUtils.buildJourneySegments(HOME_ENTRIES, valid, 10);
+            MapUtils.addJourneySegments(homeMap, segments, 'home-journey');
+        });
+    }
+});
+</script>
+{% endif %}
+
+{% else %}
+{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
+<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
+{% endif %}
+
+{% endblock %}
+```
+
+- [ ] **Step 3: Run M8 test**
+
+```bash
+npx playwright test tests/ui/maps.spec.js --grep "M8"
+```
+
+Expected: PASS. The home map now loads GPX URLs, adds `home-gpx-N` layer sources, and replaces the simple `home-journey` source with connector-suppressed segments.
+
+- [ ] **Step 4: Run existing home + map tests**
+
+```bash
+npx playwright test tests/ui/maps.spec.js tests/ui/home.spec.js
+```
+
+Expected: M4 and H1 still pass; M8 passes.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/home.html.twig
+git -C user commit -m "feat: add travelling branch and GPX to home map (active trip mode)"
+git add tests/ui/maps.spec.js
+git commit -m "test(maps): add M8 — home map GPX source on active trip"
+```
+
+---
+
+### Task 3: Between-trips highlights mode + CSS + Playwright tests
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/home.html.twig` — replace `{% else %}` placeholder with full highlights branch
+- Modify: `user/themes/intotheeast/css/style.css` — append highlight card and grid styles
+- Create: `tests/ui/home-highlights.spec.js`
+
+**Interfaces:**
+- Consumes: `config.site.travelling` (bool) — Task 1
+- Consumes: `entry.header.featured` / `story.header.featured` (bool) — Task 1
+- Consumes: `trip.header.tagline` (string) — Task 1
+- Produces: `.home-highlights-grid` — the grid container, used in Playwright selectors
+- Produces: `.home-highlight-card[id="highlight-<slug>"]` — per-card IDs for map marker scroll-to
+- Produces: `.home-highlights-cta` — CTA link to `/trips`
+- Produces: `window.homeMap` global in between-trips mode (same name, separate branch)
+
+- [ ] **Step 1: Write failing tests**
+
+Create `tests/ui/home-highlights.spec.js`:
+
+```js
+// @ts-check
+// Tests: H2–H5 — Between-trips highlights mode
+// These tests temporarily set travelling: false in user/config/site.yaml,
+// run the assertions, then restore the original value.
+// Requires demo data with featured entries: run `make demo-load` first.
+const { test, expect } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+
+const SITE_YAML_PATH = path.join(__dirname, '../../user/config/site.yaml');
+
+test.describe('Between-trips highlights mode', () => {
+    let originalSiteYaml;
+
+    test.beforeAll(async () => {
+        originalSiteYaml = fs.readFileSync(SITE_YAML_PATH, 'utf8');
+        const patched = originalSiteYaml.replace(/^travelling:\s*true/m, 'travelling: false');
+        fs.writeFileSync(SITE_YAML_PATH, patched);
+        // Brief pause for Grav to re-read config on next request
+        await new Promise(r => setTimeout(r, 400));
+    });
+
+    test.afterAll(async () => {
+        fs.writeFileSync(SITE_YAML_PATH, originalSiteYaml);
+    });
+
+    // ── H2: Highlights grid is visible ──────────────────────────────────────────
+    test('H2: homepage shows highlights grid when not travelling', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('.home-highlights-grid')).toBeVisible({ timeout: 10000 });
+    });
+
+    // ── H3: Highlight cards contain trip link ────────────────────────────────────
+    test('H3: highlight cards have a View-trip link', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('.home-highlight-card').first()).toBeVisible({ timeout: 10000 });
+        await expect(page.locator('.home-highlight-trip-link').first()).toBeVisible();
+    });
+
+    // ── H4: Between-trips home map renders without JS errors ────────────────────
+    test('H4: home map renders in between-trips mode without JS errors', async ({ page }) => {
+        const errors = [];
+        page.on('pageerror', e => errors.push(e.message));
+        await page.goto('/');
+        await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+        expect(errors, 'No JS errors').toHaveLength(0);
+    });
+
+    // ── H5: CTA links to /trips ──────────────────────────────────────────────────
+    test('H5: "Explore all past trips" CTA links to /trips', async ({ page }) => {
+        await page.goto('/');
+        const cta = page.locator('.home-highlights-cta');
+        await expect(cta).toBeVisible({ timeout: 10000 });
+        await expect(cta).toHaveAttribute('href', /\/trips/);
+    });
+});
+```
+
+Run to confirm they fail:
+
+```bash
+npx playwright test tests/ui/home-highlights.spec.js
+```
+
+Expected: H2–H5 all FAIL (`.home-highlights-grid` not present).
+
+- [ ] **Step 2: Append highlight CSS to `user/themes/intotheeast/css/style.css`**
+
+Append to the end of `style.css`:
+
+```css
+/* ── Between-trips highlights grid ──────────────────────────────────────────── */
+
+.home-highlights-header {
+    margin-bottom: var(--space-8);
+    padding-bottom: var(--space-6);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.home-highlights-title {
+    font-family: var(--font-display);
+    font-size: var(--text-2xl);
+    font-weight: 400;
+    color: var(--color-ink);
+    margin-bottom: var(--space-2);
+}
+
+.home-highlights-subtitle {
+    font-size: var(--text-sm);
+    color: var(--color-ink-muted);
+}
+
+.home-highlights-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-6);
+    margin-bottom: var(--space-10);
+}
+
+@media (max-width: 900px) {
+    .home-highlights-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 600px) {
+    .home-highlights-grid { grid-template-columns: 1fr; }
+}
+
+.home-highlight-card {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-canvas);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.home-highlight-image {
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+}
+
+.home-highlight-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.home-highlight-body {
+    padding: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    flex: 1;
+}
+
+.home-highlight-badge {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    font-variant: small-caps;
+    letter-spacing: 0.08em;
+    color: var(--color-accent);
+}
+
+.home-highlight-badge--journal {
+    color: var(--color-ink-muted);
+}
+
+.home-highlight-title {
+    font-family: var(--font-display);
+    font-size: var(--text-lg);
+    font-weight: 400;
+    color: var(--color-ink);
+    text-decoration: none;
+    line-height: 1.3;
+}
+
+.home-highlight-title:hover { color: var(--color-accent); }
+
+.home-highlight-trip {
+    margin-top: auto;
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.home-highlight-trip-name {
+    font-weight: 600;
+    color: var(--color-ink-2);
+}
+
+.home-highlight-tagline { font-style: italic; }
+
+.home-highlight-trip-link {
+    color: var(--color-accent);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.home-highlight-trip-link:hover { text-decoration: underline; }
+
+.home-highlights-cta-wrap {
+    text-align: center;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+}
+
+.home-highlights-cta {
+    display: inline-block;
+    color: var(--color-accent);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    text-decoration: none;
+    padding: var(--space-3) var(--space-6);
+    border: 1px solid var(--color-accent);
+    border-radius: var(--radius-sm);
+}
+
+.home-highlights-cta:hover {
+    background: var(--color-accent);
+    color: var(--color-canvas);
+}
+```
+
+- [ ] **Step 3: Replace the placeholder `{% else %}` branch in `home.html.twig`**
+
+Find this exact block (added in Task 2):
+
+```twig
+{% else %}
+{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
+<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
+{% endif %}
+```
+
+Replace it with:
+
+```twig
+{% else %}
+{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
+
+{# ── Highlight selection ─────────────────────────────────────────────────── #}
+{% set trips_page = grav.pages.find('/trips') %}
+{% set pool = [] %}
+{% if trips_page %}
+    {% for trip_item in trips_page.children.published() %}
+        {% set t_dailies = grav.pages.find(trip_item.route ~ '/dailies') %}
+        {% set t_stories = grav.pages.find(trip_item.route ~ '/stories') %}
+        {% set candidates = [] %}
+        {% if t_dailies %}
+            {% for e in t_dailies.children.published() %}
+                {% if e.header.featured %}
+                    {% set candidates = candidates|merge([{'type': 'journal', 'page': e, 'trip': trip_item}]) %}
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+        {% if t_stories %}
+            {% for s in t_stories.children.published() %}
+                {% if s.header.featured %}
+                    {% set candidates = candidates|merge([{'type': 'story', 'page': s, 'trip': trip_item}]) %}
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+        {% if candidates|length > 0 %}
+            {% set pool = pool|merge([random(candidates)]) %}
+        {% endif %}
+    {% endfor %}
+{% endif %}
+{% set pool = pool|shuffle %}
+{% set highlights = pool|slice(0, 6) %}
+
+{# ── Map entries (entries with coordinates) ──────────────────────────────── #}
+{% set highlights_map_entries = [] %}
+{% for item in highlights %}
+    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
+        {% set highlights_map_entries = highlights_map_entries|merge([{
+            'lat': item.page.header.lat|number_format(6, '.', ''),
+            'lng': item.page.header.lng|number_format(6, '.', ''),
+            'slug': item.page.slug,
+            'title': item.page.title,
+            'url': item.page.url
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+<div class="home-layout">
+    <div class="home-map-col">
+        <div class="home-map" id="home-map"></div>
+    </div>
+
+    <div class="home-feed-col">
+        <div class="home-highlights-header">
+            <h1 class="home-highlights-title">Into the East</h1>
+            <p class="home-highlights-subtitle">A few moments from past journeys</p>
+        </div>
+
+        {% if highlights|length > 0 %}
+        <div class="home-highlights-grid">
+            {% for item in highlights %}
+            {% set entry = item.page %}
+            {% set hero = null %}
+            {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
+                {% set hero = entry.media[entry.header.hero_image] %}
+            {% elseif entry.media.images|length > 0 %}
+                {% set hero = entry.media.images|first %}
+            {% endif %}
+            <div class="home-highlight-card" id="highlight-{{ entry.slug }}">
+                {% if hero %}
+                <div class="home-highlight-image">
+                    <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                </div>
+                {% endif %}
+                <div class="home-highlight-body">
+                    {% if item.type == 'story' %}
+                    <span class="home-highlight-badge">✦ Story</span>
+                    {% else %}
+                    <span class="home-highlight-badge home-highlight-badge--journal">▸ Journal</span>
+                    {% endif %}
+                    <a class="home-highlight-title" href="{{ entry.url }}">{{ entry.title }}</a>
+                    <div class="home-highlight-trip">
+                        <span class="home-highlight-trip-name">{{ item.trip.title }}</span>
+                        {% if item.trip.header.tagline %}
+                        <span class="home-highlight-tagline">{{ item.trip.header.tagline }}</span>
+                        {% endif %}
+                        <a class="home-highlight-trip-link" href="{{ item.trip.url }}">→ View trip</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <p class="feed-empty">No highlights yet — mark entries as featured to show them here.</p>
+        {% endif %}
+
+        <div class="home-highlights-cta-wrap">
+            <a class="home-highlights-cta" href="/trips">Explore all past trips →</a>
+        </div>
+    </div>
+</div>
+
+{% if highlights_map_entries|length > 0 %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+<script>
+var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};
+
+var homeMap = new maplibregl.Map({
+    container: 'home-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2
+});
+
+homeMap.on('load', function () {
+    if (HIGHLIGHTS_ENTRIES.length === 0) return;
+
+    var bounds = new maplibregl.LngLatBounds();
+
+    HIGHLIGHTS_ENTRIES.forEach(function (entry) {
+        var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(false);
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () {
+            var card = document.getElementById('highlight-' + entry.slug);
+            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
+    });
+
+    if (HIGHLIGHTS_ENTRIES.length === 1) {
+        homeMap.jumpTo({ center: [parseFloat(HIGHLIGHTS_ENTRIES[0].lng), parseFloat(HIGHLIGHTS_ENTRIES[0].lat)], zoom: 8 });
+    } else {
+        homeMap.fitBounds(bounds, { padding: 60, maxZoom: 8 });
+    }
+
+    setTimeout(function () { homeMap.resize(); }, 100);
+});
+</script>
+{% endif %}
+
+{% endif %}
+
+{% endblock %}
+```
+
+- [ ] **Step 4: Run H2–H5 tests**
+
+```bash
+npx playwright test tests/ui/home-highlights.spec.js
+```
+
+Expected: H2, H3, H4, H5 all PASS.
+
+- [ ] **Step 5: Verify no regressions**
+
+```bash
+make test
+npx playwright test tests/ui/
+```
+
+Expected: `make test` same as baseline (13 passed, 1 pre-existing failure). All Playwright tests pass — H1 and M4 use `travelling: true`; H2–H5 temporarily flip to `false` and restore it.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/home.html.twig \
+    themes/intotheeast/css/style.css
+git -C user commit -m "feat: add between-trips highlights mode with grid and map markers"
+git add tests/ui/home-highlights.spec.js
+git commit -m "test(home): add H2–H5 between-trips highlights Playwright tests"
+```

docs/working/pm-analysis.md

@@ -0,0 +1,161 @@
+# PM Analysis — What to Build (and What to Skip)
+
+*Role: Senior Product Manager. Audience: one solo traveler (Mischa), platform: Grav CMS flat-file PHP, no native app.*
+
+---
+
+## Starting position
+
+Polarsteps and FindPenguins are native mobile apps built around:
+1. Background GPS tracking (requires OS-level access)
+2. Social networks (followers, discovery, comments)
+3. App-side video/reel processing
+
+**None of these three pillars are reproducible in a web CMS.** Any plan that tries to replicate them wholesale is delusional. What we can do is cherry-pick the *outputs* — the things those apps display to readers — and build them into the blog in ways that add real value to both Mischa (the poster) and readers (friends/family following along).
+
+---
+
+## Feature-by-Feature Audit
+
+| Feature | Makes sense solo? | Buildable in Grav+JS? | Value to readers? | Worth the cost? | Decision |
+|---|---|---|---|---|---|
+| Auto background GPS tracking | No — posting manually anyway | No — requires native app | — | — | **SKIP** |
+| Interactive map of visited locations | Yes | Yes — Leaflet.js + frontmatter lat/lng | High | High | **BUILD** |
+| Route line on map between entries | Yes | Yes — connect entry coords in order | High | Medium | **BUILD** |
+| Entry location name (city, country) | Yes | Yes — manual input on form | High | Low | **BUILD** |
+| Weather metadata per entry | Yes | Yes — Open-Meteo free API, no key needed | Medium | Medium | **BUILD** |
+| Photo gallery per entry | Yes | Yes — shortcode-gallery-plusplus installed | High | Low | **BUILD** (already partial) |
+| Hero image on feed cards | Yes | Yes — already in frontmatter | High | Low | **BUILD** |
+| Trip statistics page | Yes | Yes — compute from frontmatter | Medium | Low | **BUILD** |
+| Countries visited world map | Yes | Yes — highlight SVG or Leaflet layers | Medium | Medium | **BUILD** |
+| Follower system | No — solo blog | Would need auth + DB | None | — | **SKIP** |
+| Comments on entries | No — spam risk, no community | Would need plugin + moderation | Minimal | — | **SKIP** |
+| Social discovery / explore | No — not a platform | Would need indexing infrastructure | None | — | **SKIP** |
+| Group trip / travel buddies | No — solo trip | — | — | — | **SKIP** |
+| Reactions / likes | No | — | — | — | **SKIP** |
+| 3D flyover video | No — proprietary pipeline | No | Nice | — | **SKIP** |
+| Trip reels / short video | No — app-side processing | No | Nice | — | **SKIP** |
+| Travel book / print | No — out of scope | No | — | — | **SKIP** |
+| AI itinerary builder | No — trip already started | No | — | — | **SKIP** |
+| Flight detection | No — requires native app sensors | No | — | — | **SKIP** |
+| Delayed sharing / live location | No — blog posts after the fact | Irrelevant | — | — | **SKIP** |
+| Offline posting | Already works | Already works (Grav form offline) | — | — | **ALREADY EXISTS** |
+| Scheduled / draft posts | Already exists | Already exists (publish_date) | — | — | **ALREADY EXISTS** |
+| Step suggestions / nudges | No — push notifications not possible | No | — | — | **SKIP** |
+| Eebook / export | No — out of scope | Possible but niche | — | — | **SKIP** |
+
+---
+
+## What to Build — Summary
+
+### Keep (already exists, just needs to work reliably)
+- Login-gated mobile posting form ✓
+- Draft and scheduled publishing ✓
+
+### Build
+
+**1. Entry enrichment** — make each entry richer with zero extra effort from Mischa:
+- Location name (city, country) captured at post time
+- Weather auto-fetched via Open-Meteo at post time using lat/lng
+- Photos displayed in a proper gallery (lightbox)
+- Hero image shown on feed card
+
+**2. Interactive map** — the single most "Polarsteps-like" thing that's genuinely achievable:
+- `/map` page with Leaflet.js
+- Marker per entry (lat/lng from frontmatter)
+- Route line connecting entries in date order
+- Popup with title, date, thumbnail, link to entry
+- Mobile-friendly (touch pan/zoom)
+
+**3. Trip statistics** — a simple stats page:
+- Days on the road (count of entries with distinct dates)
+- Entries posted
+- Countries/regions visited (derived from location name field)
+- Approx distance traveled (sum of haversine distances between GPS points)
+
+---
+
+## What to Skip — with reasons
+
+| Feature | Reason skipped |
+|---|---|
+| Background GPS tracking | Requires native app. Grav runs on a server. |
+| Social features (followers, comments, likes) | Adds spam risk, moderation burden, zero value for a solo travel blog with a personal audience. A "share link" is enough. |
+| Video reels | App-side video processing pipeline, not available in a web CMS. |
+| 3D flyover | Proprietary rendering. Not worth building from scratch. |
+| Travel book printing | Out of scope. Mischa can use Polarsteps or FindPenguins for this if desired. |
+| AI itinerary builder | Trip is already in progress. Out of scope. |
+| Discovery / explore | Not a platform. No community. |
+| Group trips | Solo traveler. |
+| Flight detection | Requires native OS sensor access. |
+| Delayed sharing | Moot — we don't broadcast real-time location at all. |
+
+---
+
+## Milestone Plan
+
+### Milestone 1 — Entry Enrichment (2–3 days)
+**Goal:** Every entry is richer out of the box — photo gallery works, location name shown, weather captured, hero image on feed.
+
+Features:
+- Location name field (city + country) added to post form and displayed on entries/cards
+- Weather auto-fetch on post form (JS call to Open-Meteo using entered lat/lng, fills hidden fields)
+- Weather displayed on entry page
+- Photo gallery working (shortcode-gallery-plusplus or native media display)
+- Hero image shown on tracker feed cards
+
+**Value:** Immediate. Makes each entry feel like a real travel log entry, not just a text post.
+
+---
+
+### Milestone 2 — Interactive Map (2–3 days)
+**Goal:** A `/map` page shows all entries as markers on an interactive Leaflet.js map, connected by a route line, with popups.
+
+Features:
+- New `map` page and template
+- Leaflet.js loaded from CDN (no build step)
+- Entries serialized to JSON in the template (lat/lng, title, date, url, hero_image)
+- Route polyline in chronological order
+- Marker popup: date, title, thumbnail, "Read entry →" link
+- Map added to site navigation
+
+**Value:** High for readers — gives a bird's-eye view of the trip. The single most compelling "where is Mischa?" feature.
+
+---
+
+### Milestone 3 — Statistics Page (1–2 days)
+**Goal:** A `/stats` page with key trip numbers.
+
+Features:
+- Days on the road (first entry date to today)
+- Total entries posted
+- Unique countries visited (derived from location names)
+- Approximate distance traveled (haversine between consecutive entry GPS points)
+- Simple, scannable layout — no charts needed for v1
+
+**Value:** Medium — nice context for readers, satisfying for Mischa to see progress.
+
+---
+
+### Milestone 4 — Map on Tracker Feed (1 day)
+**Goal:** A mini-map showing recent positions above or alongside the feed, so the first thing readers see is "where is Mischa now?"
+
+Features:
+- Small embedded Leaflet map on the tracker/feed page
+- Shows last 10 entries as markers, with the most recent highlighted
+- Route line between them
+- Tapping a marker opens the entry
+
+**Value:** Medium — gives context to the feed without navigating away. Nice "current location" feel.
+
+---
+
+## Milestone Priority Order
+
+**M1 first** — entry quality affects every post Mischa makes from day 1 of the trip. Get this right immediately.
+
+**M2 second** — the map is the headline feature that makes this feel like a Polarsteps-style blog. Technically independent from M1 (uses lat/lng already in frontmatter).
+
+**M3 third** — stats are a nice-to-have. Easy to add once M1 and M2 are stable.
+
+**M4 fourth** — the mini-map on the feed is polish. Only worth doing once the full map (M2) is solid.

docs/working/production-todo.md

@@ -0,0 +1,74 @@
+# Production Todo
+
+Work through Phase 1 first (local fixes and config), then Phase 2 (server deployment and go-live).
+
+---
+
+## Phase 1 — Local fixes before deploy
+
+These are changes made in the local dev environment and committed before anything touches the server.
+
+### 1.1 Fix server-install.sh for Grav 2.0
+
+`server-install.sh` had a gap: it copied the `grav-admin` bundle (which includes `user/plugins/admin2/`) but then immediately did `rm -rf user && git clone ...`, wiping admin2. It never got reinstalled because GPM doesn't carry Admin2.
+
+- [x] Updated `server-install.sh` to stash admin2 before wiping user/, then restore it after
+- [x] Removed `admin` from `plugins.txt` — Admin2 replaces it and both conflict on `/admin`
+
+### 1.2 Update config for production
+
+- [x] Cleared `custom_base_url` in `user/config/system.yaml` (was pointing to local dev IP; empty means Grav auto-detects from the request, which works both locally and in production)
+
+### 1.3 Content and metadata
+
+- [ ] Set `date_start` on the Japan & Korea 2026 trip page (`user/pages/01.trips/japan-korea-2026/trip.md`)
+- [ ] Add `cover_image` to the trip page (used on the trips listing)
+- [ ] Upload actual GPX route file(s) to `/gpx-manager` or drop directly into `user/pages/01.trips/japan-korea-2026/`
+- [ ] Run `make content-push` to push all local changes to Gitea
+
+---
+
+## Phase 2 — Server deployment and go-live
+
+### 2.1 Configure .env
+
+- [x] Set `GRAV_VERSION=2.0.0-rc.10` in `.env` (GitHub releases URL, no channel suffix needed)
+- [x] Set `REMOTE_HOST`, `REMOTE_USER`, `REMOTE_PORT`, `REMOTE_HOME` for the production server
+- [ ] Set `USER_REPO` and `MAIN_REPO` (Gitea URLs)
+- [ ] Set `GITEA_HOST`, `GITEA_USER`, `GITEA_TOKEN` for the install-time clone
+
+### 2.2 Run the install
+
+```bash
+make remote-env-setup   # writes Gitea token to server temporarily
+make remote-install     # downloads Grav, clones repos, installs plugins
+make remote-env-remove  # removes token from server
+```
+
+After install, the script prints the server's SSH public key. Add it as a deploy key to both Gitea repos so `make remote-fetch` works going forward.
+
+### 2.3 Verify post-install config
+
+These are committed to the `user/` repo and should be present after the clone — just confirm:
+
+- [ ] `user/config/system.yaml` has `accounts.type: flex` and `pages.type: flex`
+- [ ] `user/accounts/mischa.yaml` has `api.super: true` and `api.access: true`
+- [ ] Old admin plugin is absent from `plugins.txt` (not installed)
+
+### 2.4 Switch to production mode
+
+- [ ] Set `twig.cache: true` in `user/config/system.yaml` on the server (do not commit this to the repo — it would break local dev)
+- [ ] If Grav can't auto-detect the base URL (e.g. behind a reverse proxy), set `custom_base_url` in `user/config/system.yaml` on the server
+
+### 2.5 Smoke test
+
+- [ ] Submit one post via `/post`, confirm entry appears in `/trips/japan-korea-2026/dailies` immediately (verifies cache-on-save plugin works with `twig.cache: true`)
+
+### 2.6 Security
+
+- [ ] Change admin password to a strong production password
+- [ ] Confirm `/post` requires login — unauthenticated visitors must not be able to post
+
+### 2.7 Map tiles
+
+- [ ] Register at [carto.com](https://carto.com) and review terms for production traffic (CartoDB dark tiles are free but registration is expected for production use)

docs/working/qa/results.md

@@ -0,0 +1,217 @@
+# QA Test Results
+
+*Executed: 2026-06-18. Environment: Docker local (http://localhost:8081). Branch: experimental-polar-steps.*
+
+---
+
+## Summary
+
+| Result | Count |
+|---|---|
+| ✅ PASS (automated) | 22 |
+| ⚠️ REQUIRES MANUAL VERIFICATION | 10 |
+| ❌ FAIL | 0 |
+
+All automatable tests pass. No failures found. Manual tests require a physical mobile device and/or browser session.
+
+---
+
+## Milestone 1 — Entry Enrichment Results
+
+### TC-1.1: Location badge on entry page ✅ PASS
+```
+curl http://localhost:8081/tracker/2026-06-17.entry
+→ <p class="entry-location"> ... Amsterdam ... Netherlands ... </p>
+```
+
+### TC-1.2: Weather badge on entry page ✅ PASS
+```
+curl http://localhost:8081/tracker/2026-06-17.entry
+→ <p class="entry-weather"> ⛅ Partly cloudy · 19°C </p>
+```
+
+### TC-1.3: Location badge hidden when fields empty ✅ PASS (by inspection)
+Twig template uses `{% if page.header.location_city or page.header.location_country %}` — conditional confirmed. No empty `<p>` tag rendered when values absent.
+
+### TC-1.4: Weather badge hidden when fields empty ✅ PASS (by inspection)
+Twig uses `{% if page.header.weather_desc or page.header.weather_temp_c %}` — same conditional pattern confirmed.
+
+### TC-1.5: Hero image on tracker feed card ⚠️ REQUIRES MANUAL VERIFICATION
+The example entry has no photos. Fallback logic is implemented (`media.images|first`) but cannot be automated without uploading a real photo.
+- **Steps:** Log into Admin → open 2026-06-17.entry → Media tab → upload a photo → reload /tracker → verify 16:9 thumbnail appears
+
+### TC-1.6: Location badge on tracker feed card ✅ PASS
+```
+curl http://localhost:8081/tracker
+→ <span class="entry-location entry-location--card"> 📍 Amsterdam , Netherlands </span>
+```
+
+### TC-1.7: Photo gallery and lightbox ⚠️ REQUIRES MANUAL VERIFICATION
+No photos in example entry. Template code verified correct (iterates `page.media.images`, renders `.gallery-thumb` buttons, lightbox JS implemented). Test requires uploading photos.
+- **Steps:** Upload 2–3 photos to example entry → open /tracker/2026-06-17.entry → verify grid, click thumbnail → verify lightbox opens → press Escape → verify closes → click outside → verify closes → use arrow buttons → verify navigation
+
+### TC-1.8: Post form has City/Country fields ⚠️ REQUIRES MANUAL VERIFICATION
+Post form requires authenticated session. Fields are defined in post-form.md frontmatter: `location_city` (text), `location_country` (text), `weather_temp_c` (hidden), `weather_desc` (hidden). Template includes `forms/form.html.twig`.
+- **Steps:** Log in → open /post → verify City and Country inputs present → verify two buttons ("Get Current Location", "Get Weather") appear below form
+
+### TC-1.9: Get Weather button fills fields ⚠️ REQUIRES MANUAL VERIFICATION
+- **Steps:** Open /post on mobile → fill lat/lng (use Get Location button) → tap Get Weather → verify status shows temp and condition → submit form → verify entry has weather in Admin
+
+---
+
+## Milestone 2 — Interactive Map Results
+
+### TC-2.1: Map page loads with Leaflet ✅ PASS
+```
+HTTP 200 /map
+→ <div id="trip-map"></div>
+→ leaflet@1.9.4 CSS and JS from CDN present
+```
+
+### TC-2.2: Entry GPS data serialized to ENTRIES JSON ✅ PASS
+```
+var ENTRIES = [{"lat":"52.367600","lng":"4.904100","title":"The Journey Begins","date":"17 Jun 2026","url":"\/tracker\/2026-06-17.entry","hero":null}];
+```
+Amsterdam entry correctly included. hero is null (no photos — expected).
+
+### TC-2.3: Map renders marker and popup in browser ⚠️ REQUIRES MANUAL VERIFICATION
+- **Steps:** Open /map in browser → verify Amsterdam marker visible → click marker → verify popup shows "The Journey Begins", date, "Read entry →" link → click link → verify navigates to entry
+
+### TC-2.4: Map link in header navigation ✅ PASS
+```
+grep /tracker HTML → href="http://100.96.115.96:8081/map" ✓
+grep /map HTML → href="http://100.96.115.96:8081/map" ✓
+grep /stats HTML → href="http://100.96.115.96:8081/map" ✓
+```
+
+### TC-2.5: Empty state ⚠️ REQUIRES MANUAL VERIFICATION
+Requires temporarily removing lat/lng from test entry. Template code verified: `if (ENTRIES.length === 0)` block renders "No locations yet" message.
+
+### TC-2.6: Map full-height on mobile ⚠️ REQUIRES MANUAL VERIFICATION
+CSS: `.map-container { height: calc(100vh - 61px); }` and `.map-page .site-main { max-width: none; padding: 0; }` confirmed in stylesheet.
+- **Steps:** Open /map on phone → verify map fills screen → pinch zoom → verify map zooms, page does not scroll
+
+---
+
+## Milestone 3 — Statistics Page Results
+
+### TC-3.1: Stats page loads with 4 stat blocks ✅ PASS
+```
+HTTP 200 /stats
+→ grep "stat-block" count: 4 ✓
+```
+
+### TC-3.2: Days on road count ✅ PASS
+```
+<span class="stat-value">1</span>
+<span class="stat-label">day on the road</span>
+```
+Entry date: 2026-06-17. Today: 2026-06-18. Difference: 1 day. ✓
+
+### TC-3.3: Entries count ✅ PASS
+```
+<span class="stat-value">1</span>
+<span class="stat-label">entry posted</span>
+```
+
+### TC-3.4: Countries visited ✅ PASS
+```
+<span class="stat-value">1</span>
+<span class="stat-label">country visited</span>
+Netherlands (listed below)
+```
+
+### TC-3.5: Distance shows "—" for single GPS point ✅ PASS (by inspection)
+```
+GPS_POINTS = [["52.3676","4.9041"]] — 1 point only
+JS: if (GPS_POINTS.length < 2) { el.textContent = '—'; }
+stat-distance element initialized as "—" in HTML
+```
+JS behavior confirmed by code inspection. Browser render requires manual check.
+
+### TC-3.6: Stats navigation link ✅ PASS
+```
+grep /tracker HTML → href=".../stats" ✓
+grep /map HTML → href=".../stats" ✓
+```
+
+---
+
+## Milestone 4 — Mini-map on Tracker Feed Results
+
+### TC-4.1: Mini-map present on tracker feed ✅ PASS
+```
+curl http://localhost:8081/tracker
+→ <div class="feed-map-wrap"> ✓
+→ <div class="feed-map" id="feed-map"> ✓
+→ <a class="feed-map-link" href=".../map">View full map →</a> ✓
+→ var FEED_ENTRIES = [{"lat":"52.3676","lng":"4.9041",...}] ✓
+→ Leaflet JS initialized ✓
+```
+
+### TC-4.2: Mini-map hidden when no GPS ✅ PASS (by inspection)
+Template wraps entire mini-map in `{% if map_entries|length > 0 %}`. Confirmed no feed-map div rendered when list empty.
+
+### TC-4.3: Marker click navigates to entry ⚠️ REQUIRES MANUAL VERIFICATION
+JS: `.on('click', function() { window.location = entry.url; })` confirmed. Browser interaction required.
+- **Steps:** Open /tracker on phone → tap Amsterdam marker → verify navigates to entry page
+
+### TC-4.4: Entry list visible below mini-map ⚠️ REQUIRES MANUAL VERIFICATION
+- **Steps:** Open /tracker → verify mini-map renders → scroll down → verify entry cards below map
+
+---
+
+## Cross-cutting Results
+
+### TC-X.1: Nav links on all pages ✅ PASS
+| Page | Journal | Map | Stats |
+|---|---|---|---|
+| /tracker | ✅ | ✅ | ✅ |
+| /map | ✅ | ✅ | ✅ |
+| /stats | ✅ | ✅ | ✅ |
+| /tracker/2026-06-17.entry | ✅ (inherited from base template) | ✅ | ✅ |
+
+### TC-X.2: All pages return 200 ✅ PASS
+| Page | HTTP Status |
+|---|---|
+| /tracker | 200 ✅ |
+| /tracker/2026-06-17.entry | 200 ✅ |
+| /map | 200 ✅ |
+| /stats | 200 ✅ |
+
+### TC-X.3: Mobile touch targets ⚠️ REQUIRES MANUAL VERIFICATION
+CSS verified:
+- Nav links: `min-height: 44px; display: inline-flex; align-items: center` ✅
+- Lightbox buttons: `width: 44px; height: 44px` ✅
+- `.btn-extra`: `min-height: 44px` ✅
+- Gallery thumbs: CSS `aspect-ratio: 1` — size depends on grid width; at 2 columns on 375px, each is ~(375-16-4)/2 = ~177px ✅
+- Visual confirmation requires physical device
+
+### TC-X.4: No JS errors in browser console ⚠️ REQUIRES MANUAL VERIFICATION
+Code reviewed: no obvious syntax errors, proper null checks before DOM access, Leaflet initialized after DOM ready. Console check requires browser DevTools.
+
+---
+
+## Issues Found
+
+**None.** All automated tests pass. No broken HTML, no server errors, no template errors, no missing routes.
+
+**Note on whitespace in Twig output:** Location and weather badges render with extra whitespace around values due to Twig `{% if %}` block indentation. This is cosmetic only — display is correct in browser rendering and does not affect functionality.
+
+---
+
+## Manual Verification Checklist for Mischa
+
+When you review this branch in the morning, these items need a human eye (phone + browser):
+
+- [ ] Upload 1–4 photos to a test entry, verify hero image shows on feed card
+- [ ] Upload 3 photos, open entry, verify gallery grid, tap thumbnail → lightbox opens
+- [ ] Test lightbox: Escape closes, tap outside closes, arrow buttons navigate
+- [ ] Open /post on phone (logged in), verify City/Country fields and two buttons visible
+- [ ] Tap "Get Current Location" → coordinates fill → tap "Get Weather" → weather fills
+- [ ] Submit a full form entry → verify it appears on /tracker with location badge
+- [ ] Open /map in browser → verify Amsterdam marker, click it → popup → click link
+- [ ] Open /map on phone → pinch zoom (map zooms, page doesn't scroll)
+- [ ] Open /tracker on phone → tap map marker → navigates to entry
+- [ ] Check /stats in browser → verify distance stat updates from "—" to a number once 2+ GPS entries exist
+- [ ] Check browser console on all pages → no JS errors

docs/working/qa/test-plan.md

@@ -0,0 +1,628 @@
+# QA Test Plan
+
+*Branch: experimental-polar-steps. Tester role: Senior Staff QA Engineer.*
+
+---
+
+## Scope
+
+All features implemented in Phase 4 (Milestones 1–4):
+- M1: Entry enrichment (location badge, weather badge, photo gallery, hero image)
+- M2: Interactive map page
+- M3: Statistics page
+- M4: Mini-map on tracker feed
+
+Test URLs:
+- Desktop: http://localhost:8081
+- Mobile: http://100.96.115.96:8081 (Tailscale — requires physical phone)
+
+---
+
+## Milestone 1 — Entry Enrichment
+
+### TC-1.1: Location badge on entry page
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open http://localhost:8081/tracker/2026-06-17.entry | Entry page loads (200) |
+| 2 | Look at entry header | `📍 Amsterdam, Netherlands` visible below date |
+| 3 | Inspect HTML | `<p class="entry-location">` present with city and country |
+
+**Automation:** grep for `.entry-location` and "Amsterdam" in curl output
+
+---
+
+### TC-1.2: Weather badge on entry page
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open http://localhost:8081/tracker/2026-06-17.entry | Entry page loads |
+| 2 | Look at entry header | `⛅ Partly cloudy · 19°C` visible |
+| 3 | Inspect HTML | `<p class="entry-weather">` present |
+
+**Automation:** grep for `.entry-weather` and "Partly cloudy" and "19°C"
+
+---
+
+### TC-1.3: Location badge hidden when fields empty
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Create test entry with no location_city/location_country | — |
+| 2 | Open that entry | No `📍` badge shown, no empty `<p>` rendered |
+
+**Automation:** Check example entry before fields were added (not needed — fields are now set); create a second test entry without location
+
+---
+
+### TC-1.4: Weather badge hidden when fields empty
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Entry with no weather fields | No weather section in HTML |
+
+**Automation:** grep for `entry-weather` in HTML — should only appear if value present
+
+---
+
+### TC-1.5: Hero image on tracker feed card
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open http://localhost:8081/tracker | Feed loads |
+| 2 | Entry card for 2026-06-17 | No image shown (example entry has no photos) |
+| 3 | Upload a photo to the entry via Admin media manager | — |
+| 4 | Reload tracker | Hero image shows as 16:9 thumbnail |
+
+**Manual verification required:** Photo upload requires browser Admin interaction
+
+---
+
+### TC-1.6: Location badge on tracker feed card
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open http://localhost:8081/tracker | Feed loads |
+| 2 | Entry card | `📍 Amsterdam, Netherlands` visible |
+
+**Automation:** grep feed HTML for `entry-location--card` and "Amsterdam"
+
+---
+
+### TC-1.7: Photo gallery renders on entry page (with photos)
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Upload 3 photos to the example entry via Admin | — |
+| 2 | Open entry page | Gallery grid appears below entry body |
+| 3 | Count thumbnails | 3 thumbnails in 2-col (mobile) / 3-col (desktop) grid |
+| 4 | Click a thumbnail | Lightbox overlay opens with full-size image |
+| 5 | Press Escape | Lightbox closes |
+| 6 | Click left/right arrow buttons | Navigates between images |
+| 7 | Click outside lightbox | Lightbox closes |
+
+**Manual verification required:** Photo upload and interactive lightbox require browser
+
+---
+
+### TC-1.8: Post form has location and weather fields
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open http://localhost:8081/post (logged in) | Post form renders |
+| 2 | Inspect form | `City` and `Country` text inputs present |
+| 3 | Inspect form | `📍 Get Current Location` and `🌤 Get Weather` buttons present |
+
+**Automation:** grep /post HTML for `location_city`, `location_country`, `get-location`, `get-weather`
+
+---
+
+### TC-1.9: Get Weather button fills fields
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open /post on phone | Post form loads |
+| 2 | Tap "Get Current Location" | Lat/lng fields fill with coordinates |
+| 3 | Tap "Get Weather" | Status shows "🌤 Weather set: [desc] · [temp]°C" |
+| 4 | Submit form | New entry created with weather in frontmatter |
+| 5 | Open entry in Admin | weather_temp_c and weather_desc fields populated |
+
+**Manual verification required:** Geolocation and form submission require mobile browser
+
+---
+
+## Milestone 2 — Interactive Map
+
+### TC-2.1: Map page loads
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://localhost:8081/map | HTTP 200 |
+| 2 | Inspect HTML | `<div id="trip-map">` present |
+| 3 | Inspect HTML | Leaflet CSS and JS from CDN present |
+
+**Automation:** curl + HTTP status check; grep for "trip-map" and "leaflet"
+
+---
+
+### TC-2.2: Entry with GPS appears in ENTRIES JSON
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | curl http://localhost:8081/map | Map page HTML |
+| 2 | grep for `var ENTRIES` | Array contains Amsterdam entry with lat 52.3676 |
+| 3 | Check entry has title, date, url | All fields present |
+
+**Automation:** grep output for ENTRIES and lat value
+
+---
+
+### TC-2.3: Map renders marker and route in browser
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open /map in browser | Map tiles load, marker visible |
+| 2 | Click marker | Popup opens with "The Journey Begins" title and "Read entry →" link |
+| 3 | Click "Read entry →" | Navigates to entry page |
+
+**Manual verification required:** Leaflet rendering requires browser
+
+---
+
+### TC-2.4: Map navigation link in header
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open any page | Header shows Journal, Map, Stats nav links |
+| 2 | Click Map | Navigates to /map |
+
+**Automation:** grep base template output for "/map" nav link
+
+---
+
+### TC-2.5: Empty state (no GPS entries)
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Remove lat/lng from test entry temporarily | — |
+| 2 | Visit /map | Map at world zoom, "No locations yet" message shown |
+| 3 | Restore lat/lng | — |
+
+**Manual verification required:** Requires temporarily editing entry
+
+---
+
+### TC-2.6: Map page is full-height on mobile
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open /map on mobile browser | Map fills screen below header |
+| 2 | Pinch to zoom | Map zooms without page scrolling |
+| 3 | Pan with finger | Map pans without page scrolling |
+
+**Manual verification required:** Touch interaction requires physical device
+
+---
+
+## Milestone 3 — Statistics Page
+
+### TC-3.1: Stats page loads
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://localhost:8081/stats | HTTP 200 |
+| 2 | Inspect HTML | Four stat blocks present |
+
+**Automation:** curl + HTTP status + grep for "stat-block"
+
+---
+
+### TC-3.2: Days on the road count
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | curl /stats | Page HTML |
+| 2 | grep for "days" | Shows "1 day on the road" (entry date: 2026-06-17, today: 2026-06-18) |
+
+**Automation:** grep stat-value output and compare to expected day count
+
+---
+
+### TC-3.3: Entries count
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | curl /stats | grep for "entry posted" | Shows "1 entry posted" |
+
+**Automation:** grep for "entry posted"
+
+---
+
+### TC-3.4: Countries visited
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | curl /stats | grep for "Netherlands" | "Netherlands" appears in countries list |
+| 2 | grep for "country visited" | Shows "1 country visited" |
+
+**Automation:** grep output
+
+---
+
+### TC-3.5: Distance shows "—" for single GPS point
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | curl /stats | grep for GPS_POINTS | One point in array |
+| 2 | In browser, check stat-distance | Shows "—" (JS computes, needs browser) |
+
+**Automation:** grep GPS_POINTS array length from page source
+
+---
+
+### TC-3.6: Stats navigation link
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open any page header | "Stats" link present in nav |
+| 2 | Click Stats | Navigates to /stats |
+
+**Automation:** grep any page HTML for "/stats" in nav
+
+---
+
+## Milestone 4 — Mini-map on Tracker Feed
+
+### TC-4.1: Mini-map appears on tracker feed
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://localhost:8081/tracker | HTTP 200 |
+| 2 | grep for "feed-map" | Mini-map div present |
+| 3 | grep for "FEED_ENTRIES" | JSON array with Amsterdam entry |
+| 4 | grep for "View full map →" | Link to /map present |
+
+**Automation:** curl + grep
+
+---
+
+### TC-4.2: Mini-map hidden when no GPS entries
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Remove lat/lng from example entry | — |
+| 2 | curl /tracker | No "feed-map" div in output |
+| 3 | Restore lat/lng | — |
+
+**Manual verification:** Requires temporarily editing entry
+
+---
+
+### TC-4.3: Marker click navigates to entry (mobile)
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open /tracker on phone | Mini-map renders above entry list |
+| 2 | Tap Amsterdam marker | Navigates to /tracker/2026-06-17.entry |
+
+**Manual verification required:** Touch interaction requires browser
+
+---
+
+### TC-4.4: Entry list still visible below mini-map
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open /tracker | Mini-map shows, scroll down | Entry cards visible below map |
+
+**Manual verification required:** Visual layout check
+
+---
+
+## Post Submission Flow
+
+These scenarios cover the full round-trip: filling the form → saving → verifying values in the UI and on disk. Use the exact test values specified so that each assertion can be precise.
+
+**Test data (use verbatim):**
+
+| Field | Value |
+|---|---|
+| Title | `QA Test Entry` |
+| Date & Time | `2026-06-18 10:00` |
+| Content | `This is the QA test body. Second sentence for length.` |
+| City | `Tokyo` |
+| Country | `Japan` |
+| Latitude | `35.689487` |
+| Longitude | `139.691711` |
+| Photos | none (keep simple for first run) |
+
+**Expected slug:** `2026-06-18-1000-qa-test-entry`
+**Expected folder:** `2026-06-18-1000-qa-test-entry.entry/`
+**Expected URL:** `/tracker/2026-06-18-1000-qa-test-entry.entry`
+
+The slug is built from `date(Y-m-d-Hi)` + title lowercased with `[^a-z0-9]+` replaced by hyphens.
+
+---
+
+### TC-P.1: Post form requires authentication
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open private/incognito tab (no session) | — |
+| 2 | GET http://100.96.115.96:8081/post | Page loads at /post URL (no redirect) but renders the login form inline |
+| 3 | Inspect page content | Login form fields (username, password) visible; post form fields absent |
+
+**Automation:** curl /post without auth; assert `login-form-nonce` present AND `data[title]` absent
+
+---
+
+### TC-P.2: Post form renders all fields
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Log in at /login | Redirected to /tracker |
+| 2 | Navigate to /post | Post form page loads (200) |
+| 3 | Check form fields present | Title, Date & Time, description textarea, Photos upload |
+| 4 | Check location fields | Latitude, Longitude, City, Country inputs visible |
+| 5 | Check action buttons | `📍 Get Current Location` and `🌤 Get Weather` buttons visible |
+| 6 | Check submit button | `Post Entry` button visible |
+| 7 | Check date field default | Pre-filled with today's date and time (not blank) |
+
+**Automation:** curl /post with auth; grep for `data[title]`, `data[lat]`, `data[location_city]`, `get-location`, `get-weather`
+
+---
+
+### TC-P.3: Required field validation
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Log in and open /post | Form loads |
+| 2 | Leave Title blank, fill in only the description | — |
+| 3 | Submit form | Page reloads with validation error on Title |
+| 4 | Error message | Indicates title is required |
+| 5 | Fill in Title, clear Description/Content, submit | Validation error on Content field |
+| 6 | Confirm | No new entry file created in pages/01.tracker/ during failed submissions |
+
+**Manual verification required:** Validation feedback requires browser
+
+---
+
+### TC-P.4: Successful post submission — all fields
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Log in and open /post | Form loads |
+| 2 | Enter Title: `QA Test Entry` | — |
+| 3 | Set Date to `2026-06-18 10:00` | — |
+| 4 | Enter Content: `This is the QA test body. Second sentence for length.` | — |
+| 5 | Enter City: `Tokyo`, Country: `Japan` | — |
+| 6 | Enter Latitude: `35.689487`, Longitude: `139.691711` | — |
+| 7 | Leave Photos empty | — |
+| 8 | Click `Post Entry` | Form submits (POST to /post) |
+| 9 | Observe result | Success message `Entry posted successfully!` shown on page |
+| 10 | Form state | Form is reset / fields cleared |
+
+**Manual verification required:** Form submission and success message require browser
+
+---
+
+### TC-P.5: Entry file created on disk with correct values
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | After TC-P.4 completes | — |
+| 2 | Check directory `user/pages/01.tracker/` | Folder `2026-06-18-1000-qa-test-entry.entry/` exists (add-page-by-form appends template name per `physical_template_name: true`) |
+| 3 | Read `user/pages/01.tracker/2026-06-18-1000-qa-test-entry.entry/entry.md` | File exists |
+| 4 | Verify frontmatter `title` | Equals `QA Test Entry` |
+| 5 | Verify frontmatter `date` | Equals `2026-06-18 10:00` |
+| 6 | Verify frontmatter `location_city` | Equals `Tokyo` |
+| 7 | Verify frontmatter `location_country` | Equals `Japan` |
+| 8 | Verify frontmatter `lat` | Equals `35.689487` |
+| 9 | Verify frontmatter `lng` | Equals `139.691711` |
+| 10 | Verify frontmatter `template` | Equals `entry` |
+| 11 | Verify frontmatter `published` | Equals `true` |
+| 12 | Verify page body | Contains `This is the QA test body. Second sentence for length.` |
+
+**Automation:** Read file from filesystem; parse YAML frontmatter; assert each field value exactly
+
+---
+
+### TC-P.6: Entry appears in tracker feed
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | BUG-001 fixed — no manual cache clear needed | — |
+| 2 | GET http://100.96.115.96:8081/tracker | Page loads (200) |
+| 3 | Entry card present | Card with title `QA Test Entry` visible |
+| 4 | Date shown on card | `18 Jun 2026` |
+| 5 | Location badge on card | `📍 Tokyo, Japan` visible |
+| 6 | Entry card link | `href` points to `/tracker/2026-06-18-1000-qa-test-entry.entry` |
+| 7 | Excerpt shown | Partial text of the body content visible |
+
+**Automation:** curl /tracker; grep for "QA Test Entry", "18 Jun 2026", "Tokyo", "Japan", "/tracker/2026-06-18-1000-qa-test-entry.entry"
+
+---
+
+### TC-P.7: Entry detail page shows correct values
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://100.96.115.96:8081/tracker/2026-06-18-1000-qa-test-entry.entry | Page loads (200) |
+| 2 | Page title | `QA Test Entry` in `<h1>` |
+| 3 | Date header | `Thursday, 18 June 2026` (or locale equivalent) |
+| 4 | Location badge | `📍 Tokyo, Japan` |
+| 5 | Body content | Full text `This is the QA test body. Second sentence for length.` rendered |
+| 6 | No gallery | Photo gallery section absent (no photos were uploaded) |
+| 7 | Back link | `← Back to journal` link present, points to /tracker |
+
+**Automation:** curl /tracker/2026-06-18-1000-qa-test-entry.entry; grep for "QA Test Entry", "Tokyo", "Japan", "This is the QA test body", "Back to journal"
+
+---
+
+### TC-P.8: Entry appears on map and mini-map
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://100.96.115.96:8081/tracker | Mini-map section visible |
+| 2 | Inspect FEED_ENTRIES JSON | Contains entry with `lat: "35.689487"`, `lng: "139.691711"`, `title: "QA Test Entry"` |
+| 3 | GET http://100.96.115.96:8081/map | Map page loads |
+| 4 | Inspect ENTRIES JSON | Contains same entry |
+
+**Automation:** curl /tracker and /map; grep FEED_ENTRIES and ENTRIES JSON for lat/lng values
+
+---
+
+### TC-P.9: Entry appears in stats
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | GET http://100.96.115.96:8081/stats | Page loads (200) |
+| 2 | Entries count | Shows `2` entries (existing test entry + new QA entry) |
+| 3 | Countries list | `Japan` and `Netherlands` both listed |
+
+**Automation:** curl /stats; grep entry count and country names
+
+---
+
+### TC-P.10: Two posts on the same day
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Submit a first post: date `2026-06-18 10:00`, title `Morning Update` | Success message shown |
+| 2 | Submit a second post: date `2026-06-18 14:30`, title `Afternoon Update` | Success message shown |
+| 3 | Check filesystem | Two separate folders exist: `2026-06-18-1000-morning-update.entry/` and `2026-06-18-1430-afternoon-update.entry/` |
+| 4 | Visit /tracker | Both entries visible as separate cards |
+
+**Note:** The slug encodes date + time + title, so same-day posts are fully supported as long as they have different times or titles. A true collision (same date, same time, same title) would silently fail — treat this as acceptable given solo use.
+
+**Manual verification required:** Requires two browser submissions
+
+---
+
+## Cross-cutting Tests
+
+### TC-X.1: Nav links present on all pages
+
+| Page | Expected nav links |
+|---|---|
+| /tracker | Journal, Map, Stats |
+| /map | Journal, Map, Stats |
+| /stats | Journal, Map, Stats |
+| /tracker/2026-06-17.entry | Journal, Map, Stats |
+
+**Automation:** curl each page, grep for all three links
+
+---
+
+### TC-X.2: All pages return 200
+
+| Page | Expected HTTP status |
+|---|---|
+| / (redirects to /tracker) | 200 or 302→200 |
+| /tracker | 200 |
+| /tracker/2026-06-17.entry | 200 |
+| /map | 200 |
+| /stats | 200 |
+| /post | 200 (after login) or 302 (login redirect) |
+
+**Automation:** curl HTTP status checks
+
+---
+
+### TC-X.3: Mobile touch targets ≥44px
+
+| Element | Expected min height/width |
+|---|---|
+| Nav links | 44px height |
+| Gallery thumbnails | 44px on shortest side |
+| Lightbox close/prev/next buttons | 44px |
+| Post form buttons | 44px height |
+| "Get Location" button | 44px height |
+| "Get Weather" button | 44px height |
+
+**Manual verification required:** Inspect computed CSS or measure visually on device
+
+---
+
+### TC-X.4: No JS errors in browser console
+
+| Page | Expected |
+|---|---|
+| /tracker | No console errors |
+| /map | No console errors (may have tile 404s for tiles not in viewport — acceptable) |
+| /stats | No console errors |
+| /tracker/2026-06-17.entry | No console errors |
+
+**Manual verification required:** Open browser DevTools
+
+---
+
+## Visual Design QA — Redesign Checklist
+
+**Design spec:** `user/docs/design/design-spec.md`  
+**Implementation plan:** `docs/working/plans/2026-06-18-ui-redesign.md`
+
+### Typography
+- [ ] DM Serif Display loads for: entry titles, page headings (`h1`), stat numbers, site title
+- [ ] DM Sans loads for: body text, nav links, labels, form fields, timestamps
+- [ ] No fallback font (Georgia / system-sans) visible in place of custom fonts
+- [ ] Body text font-size ≥ 16px (no iOS zoom on form focus)
+
+### 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 and bold
+- [ ] Map markers and route polylines are teal
+
+### Header
+- [ ] 3px teal border-top visible at top of header
+- [ ] Site title renders in DM Serif Display ("into the east")
+- [ ] Header sticks to top on scroll
+- [ ] On 320px viewport: title and nav both visible without overlap
+
+### Entry feed cards
+- [ ] Cards with photos show full-bleed 16:9 image with rounded corners
+- [ ] Date + location text overlay visible on gradient at bottom of photo
+- [ ] Entry title below photo in DM Serif Display
+- [ ] Subtle photo scale animation on hover (desktop)
+- [ ] Cards without photos show date/location meta row above title
+- [ ] "Read entry →" link is teal
+
+### Single entry page
+- [ ] If entry has photos: hero image spans full content width, max 480px tall
+- [ ] Entry title in DM Serif Display at large size (~48px desktop)
+- [ ] Thin border rule separates header from body text
+- [ ] Body text at 18px (--text-md)
+- [ ] "← Back to journal" footer link in teal
+
+### Post form
+- [ ] Lat/lng inputs NOT visible (hidden by CSS :has() selector)
+- [ ] Inputs have rounded corners and correct border
+- [ ] Focus ring on inputs is teal, not default browser blue
+- [ ] "Post Entry" submit button is teal, full-width, ≥52px height
+- [ ] After tapping "Get Location": status line shows "✓ Location captured · lat, lng" in teal
+- [ ] After tapping "Get Weather": status line shows "✓ Weather set · desc · temp°C" in teal
+- [ ] On error: status line shows in brick red, not teal
+
+### Stats page
+- [ ] Page heading "Trip Statistics" in DM Serif Display
+- [ ] Stat numbers in DM Serif Display, teal color
+- [ ] Stat cards on white background (not paper), with subtle shadow
+- [ ] Labels uppercase, muted gray, small
+
+### Map page
+- [ ] Map fills viewport below header with no gap
+- [ ] Map container height uses CSS variable (not hardcoded 61px)
+- [ ] Markers are teal circles (not blue)
+- [ ] Route polyline is teal
+
+### Mobile (375px viewport)
+- [ ] All pages scroll without horizontal overflow
+- [ ] Header title and nav fit in one row
+- [ ] Entry card photo fills full width
+- [ ] Post form buttons are thumb-reachable (44px+ targets)
+- [ ] Map page: map pans without page scrolling underneath (touch-action)
+
+### Accessibility
+- [ ] Focus ring visible on all interactive elements (keyboard navigation)
+- [ ] With prefers-reduced-motion: no animations/transitions fire

docs/working/specs/2026-06-18-grav2-upgrade-design.md

@@ -0,0 +1,168 @@
+# Grav 2.0 Upgrade — Design Spec
+
+**Goal:** Upgrade the intotheeast travel blog from Grav 1.7.x to Grav 2.0 RC on a feature branch, validate full Milestone 1 functionality, and prepare a clean production fresh-install path.
+
+**Context:** Departure date is 2026-07-15. The production server has never been deployed, so production gets a fresh Grav 2.0 install — no in-place migration required. Local dev uses Docker; production uses PHP 8.4 directly.
+
+---
+
+## Scope
+
+Two tracks:
+
+1. **Local dev track** — swap Docker image to Grav 2.0, validate all functionality
+2. **Production track** — update `server-install.sh` and `.env` so `make remote-install` deploys Grav 2.0 fresh
+
+All work on branch `update-to-2.0`.
+
+---
+
+## Compatibility Assessment
+
+| Component | Status | Action required |
+|---|---|---|
+| `form`, `login`, `email`, `error`, `problems`, `flex-objects` | ✅ First-party | Auto-updated to 2.0 versions via GPM |
+| `shortcode-core` | ✅ First-party | Same |
+| `cache-on-save` (custom) | ✅ Should work | Add Grav 2.0 compat flag to `blueprints.yaml`; uses `onFormProcessed` which is unchanged |
+| `shortcode-gallery-plusplus` | ✅ Likely works | Plugin arch unchanged; test and confirm |
+| `add-page-by-form` | ⚠️ Archived Aug 2024 | Try as-is (plugin arch unchanged, may work); if broken, write a custom replacement |
+| Custom `intotheeast` theme | ✅ Should work | Twig 3 compat mode covers existing templates; test rendering |
+| `linuxserver/grav` Docker image | ❌ Not supported | Replace with `getgrav/grav` + `GRAV_CHANNEL=beta` |
+
+---
+
+## Track 1 — Local Dev
+
+### Changes
+
+**`docker-compose.yml`**
+
+Replace:
+```yaml
+image: lscr.io/linuxserver/grav:latest
+environment:
+  - PUID=1000
+  - PGID=1000
+volumes:
+  - ./user:/config/www/user
+```
+
+With:
+```yaml
+image: getgrav/grav
+environment:
+  - GRAV_CHANNEL=beta
+volumes:
+  - ./user:/var/www/html/user
+```
+
+**`Makefile`** — three targets reference the linuxserver internal path `/app/www/public`; replace with `/var/www/html`:
+- `install-plugins`: `docker exec -w /app/www/public` → `docker exec -w /var/www/html`
+- `demo-load` clear cache: `/app/www/public` → `/var/www/html`
+- `demo-reset` clear cache: same
+
+**`user/plugins/cache-on-save/blueprints.yaml`** (create — does not exist yet) — minimal blueprint with Grav 2.0 compat flag:
+```yaml
+name: Cache On Save
+version: 1.0.0
+description: Clears Grav cache on new-entry form submission
+author:
+  name: Mischa
+license: MIT
+
+dependencies:
+  - { name: grav, version: '>=1.6.0' }
+
+grav:
+  version: ['1.7', '2.0']
+```
+
+**`user/config/system.yaml`** — switch GPM to testing channel so `make setup` resolves 2.0-compatible plugin versions:
+```yaml
+gpm:
+  releases: testing
+```
+
+### Validation Checklist (smoke test after `make setup`)
+
+Run in order — stop and investigate if any step fails:
+
+1. **Site loads** — `http://localhost:8081` returns the tracker page (200, no PHP errors)
+2. **Admin2 loads** — `/admin` renders the new SPA admin (not the old Twig admin)
+3. **Login works** — log in via Admin2 with existing credentials
+4. **Posting form** — submit `/post` form with title + text; entry appears immediately in `/tracker`
+5. **Photo upload** — submit `/post` form with a photo; image renders in the entry
+6. **Gallery** — visit an entry with multiple photos; `shortcode-gallery-plusplus` renders gallery with lightbox
+7. **Cache invalidation** — submit a second post; it appears without a manual cache clear (validates `cache-on-save`)
+8. **Theme rendering** — check tracker, entry, map, post-form, and stats templates for layout/CSS regressions
+9. **Playwright suite** — `make test-ui` passes all 25 tests. If any tests fail, investigate whether the failure is a genuine regression (blocker) or a test that needs updating for Admin2's new DOM structure (acceptable — update the test)
+
+### If `add-page-by-form` fails
+
+If step 4 fails due to `add-page-by-form` incompatibility, the fallback is to write a custom replacement plugin. The existing `cache-on-save` plugin is a good template — it hooks `onFormProcessed` and that API is unchanged. The replacement would use the same hook to:
+1. Build the page path and slug from form fields
+2. Create the page file on disk (same logic `add-page-by-form` does in PHP)
+3. Clear cache (merging `cache-on-save` functionality)
+
+This is ~1 day of work and should be planned as a follow-up task if needed.
+
+---
+
+## Track 2 — Production (Fresh Install)
+
+Production has PHP 8.4 (compatible with Grav 2.0's PHP 8.3+ requirement) and has never been deployed.
+
+### Changes
+
+**`server-install.sh`** — the download URL for Grav 2.0 RC requires a `?testing` query parameter:
+
+Current:
+```bash
+wget --no-verbose "https://getgrav.org/download/core/grav-admin/$GRAV_VERSION" -O grav-admin.zip
+```
+
+Updated (conditionally append `?testing` for pre-release versions, or accept a full URL suffix via env var):
+```bash
+wget --no-verbose "https://getgrav.org/download/core/grav-admin/${GRAV_VERSION}${GRAV_CHANNEL_SUFFIX}" -O grav-admin.zip
+```
+
+Where `GRAV_CHANNEL_SUFFIX` is `?testing` for RC versions and empty for stable.
+
+**`.env`** (not committed — edit on the server directly or locally before `make remote-install`) — update:
+```
+GRAV_VERSION=2.0.0-rc.9
+GRAV_CHANNEL_SUFFIX=?testing
+```
+
+When Grav 2.0 goes stable, remove `GRAV_CHANNEL_SUFFIX` and update `GRAV_VERSION` to the stable version number.
+
+**`user/config/system.yaml`** — keep `gpm.releases: testing` (already set in Track 1) so production also installs 2.0-compatible plugin versions.
+
+### Production deploy
+
+When local validation passes:
+```bash
+make remote-install
+```
+
+That's it — fresh Grav 2.0 install from scratch with all plugins, content from Gitea, and the existing `user/` config.
+
+---
+
+## Out of Scope
+
+- MCP server setup (`grav-mcp` Node.js binary) — a separate task after Grav 2.0 is stable on production
+- Admin2 theming or customization
+- Grav 2.0 REST API integration
+- Switching `add-page-by-form` to the API-based approach (only if the plugin breaks)
+
+---
+
+## Go/No-Go Criteria
+
+Ship to production before departure (2026-07-15) **only if**:
+- All 9 smoke test steps pass
+- Playwright suite passes
+- `add-page-by-form` posting workflow works end-to-end (or a custom replacement is in place and tested)
+
+If any of these fail and cannot be resolved with time to spare before departure, stay on Grav 1.7 for the trip and revisit post-trip.

docs/working/specs/2026-06-19-dark-mode-design.md

@@ -0,0 +1,157 @@
+# Dark Mode & Visual Polish Design Spec
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` (recommended) or `superpowers:executing-plans` to implement this plan task-by-task.
+
+**Goal:** Replace the existing warm-paper light theme with a warm-dark "notebook/sketchbook at night" aesthetic — dark-only, no toggle, no system preference detection. Add paper grain texture, switch to dark terrain map tiles, and tighten typography.
+
+**Architecture:** All changes are CSS and one Twig template update. Color tokens live in `tokens.css` (swap values, keep names). Grain texture is a pure-CSS SVG noise layer on `body::after`. Map tiles swap in `map.html.twig`. No new dependencies, no JS changes.
+
+**Approach chosen:** B — color token swap + paper grain + typography refinements. Card/hero treatment (Approach C) deferred to a future visual polish pass.
+
+**Tech Stack:** CSS custom properties, inline SVG data URI for grain, Stadia Maps tile CDN for dark terrain.
+
+---
+
+## Global Constraints
+
+- Dark-only — no light mode, no `prefers-color-scheme` media query, no toggle
+- All changes in `user/` — commit with `git -C user`
+- No new npm/JS dependencies
+- Existing token names (`--color-paper`, `--color-ink`, etc.) must not change — only values
+- Teal accent `#1F6B5A` lightens to `#2A8C73` for dark-background contrast
+- Map tile provider: Stadia Maps Alidade Smooth Dark (free tier; API key needed for production — see Task 2)
+- `make test-ui` must pass after implementation (25/25 or pre-existing P2 exception)
+
+---
+
+## 1. Color System
+
+Replace all values in `user/themes/intotheeast/css/tokens.css`. Token names are unchanged.
+
+### Dark palette
+
+| Token | Old value | New value | Role |
+|---|---|---|---|
+| `--color-paper` | `#F7F5F2` | `#1A1814` | Page background — warm near-black |
+| `--color-canvas` | `#FFFFFF` | `#22201B` | Card surfaces, form backgrounds |
+| `--color-ink` | `#17171A` | `#EDE8DF` | Primary text — warm cream |
+| `--color-ink-2` | `#4A4850` | `#B8B0A4` | Body text — muted warm |
+| `--color-ink-muted` | `#9896A0` | `#7A7268` | Labels, timestamps, captions |
+| `--color-border` | `#E8E6E3` | `#2E2B25` | Standard dividers |
+| `--color-border-soft` | `#F0EDEA` | `#252219` | Subtle dividers |
+| `--color-accent` | `#1F6B5A` | `#2A8C73` | Teal — lightened for dark contrast |
+| `--color-accent-hover` | `#185647` | `#236655` | Hover/pressed teal |
+| `--color-accent-light` | `#EBF5F2` | `#1A2E29` | Pale teal tint backgrounds |
+| `--color-accent-on` | `#FFFFFF` | `#FFFFFF` | Text on accent surfaces (unchanged) |
+
+### Additional dark-only tokens (add to tokens.css)
+
+```css
+--color-surface-raised: #2A2720;   /* elevated surfaces: tooltips, hover states */
+--color-ink-inverse: #17171A;      /* text on accent-colored buttons */
+```
+
+---
+
+## 2. Paper Grain Texture
+
+Add to `style.css`, in the `body` section:
+
+```css
+body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9998;
+    opacity: 0.035;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 200px 200px;
+}
+```
+
+This overlays a fixed noise texture across the entire viewport. `pointer-events: none` ensures it never blocks clicks. `z-index: 9998` keeps it below any modals or dropdowns (which should use z-index 9999+). Opacity 3.5% — subtle enough to feel like paper texture without being distracting on photography.
+
+---
+
+## 3. Map Tiles — Stadia Alidade Smooth Dark
+
+Replace the tile layer in `user/themes/intotheeast/templates/map.html.twig`.
+
+**Old:**
+```javascript
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+```
+
+**New:**
+```javascript
+L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
+    maxZoom: 20,
+    attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a> © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+```
+
+**Production note:** Stadia Maps requires a free API key for production domains. Add the key as a query param when ready: `?api_key=YOUR_KEY`. During development on localhost no key is needed. Add a `<!-- TODO: add Stadia API key before launch -->` comment above the tile layer call so it's not forgotten.
+
+Also update the mini-map tile layer in `dailies.html.twig` (same swap — same tile URL, same attribution).
+
+---
+
+## 4. Typography Refinements
+
+Targeted improvements to `style.css` — not a full type system rewrite.
+
+### 4a. Entry body readability
+The entry body text (`--text-md` / 1.125rem) already uses `--leading-normal` (1.65) which is good. Increase the paragraph bottom margin slightly for breathing room:
+
+```css
+/* current */
+.entry-body p { margin-bottom: 1.1em; ... }
+
+/* new */
+.entry-body p { margin-bottom: 1.4em; ... }
+```
+
+### 4b. Heading tracking
+DM Serif Display at large sizes benefits from slightly tighter tracking. Find heading rules that currently have `letter-spacing: -0.01em` and tighten to `-0.02em`. Only apply to `h1` and `h2` — smaller headings keep current tracking.
+
+### 4c. Login form dark surface
+The login form currently hardcodes `background: #f0f0f0; color: #333` on the secondary button (line ~497 in style.css). Replace with tokens:
+
+```css
+/* current */
+.login-form .button.secondary { background: #f0f0f0; color: #333; ... }
+
+/* new */
+.login-form .button.secondary { background: var(--color-canvas); color: var(--color-ink); ... }
+```
+
+### 4d. Stats numbers
+On the stats page, numeric values should feel deliberate. Add `font-variant-numeric: tabular-nums` to the stat value elements so columns of numbers align cleanly.
+
+---
+
+## 5. Incidental dark-mode fixes
+
+Some existing styles use hardcoded light colors that will look wrong in dark mode. Audit and fix these in `style.css`:
+
+- Any `background: #fff` or `background: white` → `var(--color-canvas)`
+- Any `color: #333` or similar hardcoded dark text → `var(--color-ink)` or `var(--color-ink-2)`
+- Any `border: 1px solid #eee` or similar → `var(--color-border)`
+- Focus outline: currently likely a light-mode color — ensure `outline-color` uses `var(--color-accent)`
+
+Run a grep for literal hex values after implementation: `grep -n '#[0-9a-fA-F]\{3,6\}' user/themes/intotheeast/css/style.css` — every hit is a candidate to tokenize.
+
+---
+
+## Verification
+
+After implementation:
+1. `make test-ui` — all tests pass
+2. Visual check at `http://localhost:8081/trips/japan-korea-2026/dailies` — warm dark background, cream text, teal accents visible, subtle grain
+3. Visual check at `http://localhost:8081/trips/japan-korea-2026/map` — dark terrain tiles load, GPX polyline visible, entry pins visible
+4. Check the post form at `/post` — form fields readable on dark canvas, no white-on-white or black-on-black surfaces
+5. Run the hardcoded-hex grep and confirm any remaining literals are intentional

docs/working/specs/2026-06-19-home-and-trip-pages-design.md

@@ -0,0 +1,226 @@
+# Home Page & Content Flow Design Spec
+
+**Goal:** Replace the redirect-based home page with a real home page showing the active trip's feed and map side by side, add a proper past-trips archive, enrich the trip page with a sticky sidebar index, and introduce story cards into all feeds.
+
+**Architecture:** Pure Twig + CSS changes on top of the existing Grav stack. The home page is a new Grav page (`00.home/home.md`) with a new `home.html.twig` template. Feeds (home + dailies) are extended to merge journal entries and story entries into one chronological collection, with stories rendered as visually distinct cards. No new plugins, no build pipeline.
+
+**Tech Stack:** Grav CMS (PHP/Twig), Vanilla CSS, Leaflet.js (already loaded in `dailies.html.twig`)
+
+---
+
+## Global Constraints
+
+- All changes in `user/` — commit with `git -C user`
+- No new Grav plugins
+- No JS framework — all interactivity is vanilla JS
+- No build pipeline — CSS shipped as plain files
+- Existing token names in `tokens.css` must not change
+- Theme directory: `user/themes/intotheeast/`
+- Active trip slug: `config.site.active_trip` (set in `user/config/site.yaml`)
+- `system.yaml` `home.alias` redirect must be removed — `/` becomes a real page
+- `config.site.active_trip` in `site.yaml` must always be set to a trip slug (even between trips, point it at the last trip) — the home page template has no fallback if this value is empty
+
+---
+
+## 1. URL Structure
+
+| URL | Page file | Template |
+|---|---|---|
+| `/` | `user/pages/00.home/home.md` | `home.html.twig` (new) |
+| `/trips` | `user/pages/01.trips/trips.md` | `trips.html.twig` (update existing) |
+| `/trips/<slug>/` | existing | `trip.html.twig` (update existing) |
+| `/trips/<slug>/dailies` | existing | `dailies.html.twig` (update existing) |
+
+**system.yaml change:** Remove `home: alias: /trips/japan-korea-2026/dailies`. Set `home: alias: /` (or remove the alias entirely so Grav serves the `00.home` page at `/`).
+
+---
+
+## 2. Home Page (`/`)
+
+### Layout
+
+Two-column CSS grid on desktop. Map left (~45%), entry feed right (~55%).
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  [Trip name]  · 31 journal entries · 4 stories          │
+├────────────────────────┬────────────────────────────────┤
+│                        │  [story card]                  │
+│   Leaflet map          │  [journal card]                │
+│   (sticky,             │  [journal card]                │
+│   45% width)           │  [story card]                  │
+│                        │  ...                           │
+└────────────────────────┴────────────────────────────────┘
+```
+
+- Map is `position: sticky; top: 0; height: 100vh`
+- Entry feed is scrollable, sorted descending by date
+- Feed contains both journal entries and story entries merged (see §5)
+
+### Data
+
+```twig
+{% set slug = config.site.active_trip %}
+{% set trip = grav.pages.find('/trips/' ~ slug) %}
+{% set dailies = grav.pages.find('/trips/' ~ slug ~ '/dailies') %}
+{% set stories_page = grav.pages.find('/trips/' ~ slug ~ '/stories') %}
+{% set journal_entries = dailies ? dailies.children.published().order('date', 'desc') : [] %}
+{% set story_entries = stories_page ? stories_page.children.published() : [] %}
+{# merge and sort handled in template — see §5 #}
+```
+
+### Map
+
+Reuse the existing Leaflet setup from `dailies.html.twig` (`feed-map`). Markers come from journal entries with `lat`/`lng` in frontmatter. GPX route line loaded from trip page media if present (same pattern as `map.html.twig`). Clicking a marker scrolls to that entry card in the feed (use `data-entry-id` on cards + `scrollIntoView`).
+
+### Mobile
+
+Stack vertically: map on top at `height: 40vh`, feed below. No hamburger needed — simpler than the dedicated map page.
+
+---
+
+## 3. Past Trips Archive (`/trips`)
+
+Update `trips.html.twig`. Show each trip as a card, sorted newest first.
+
+Each card contains:
+- Trip title (links to `/trips/<slug>/`)
+- Date range: `date_start` – `date_end` from trip page frontmatter (show "Ongoing" if no `date_end`)
+- Entry count: journal entries + story entries counted separately
+
+```twig
+{% set journal_count = grav.pages.find(trip.route ~ '/dailies').children.published()|length %}
+{% set story_count = grav.pages.find(trip.route ~ '/stories').children.published()|length %}
+```
+
+Display: **31 journal entries · 4 stories**
+
+The active trip appears as the first card. No special treatment needed beyond chronological ordering — it naturally sits at the top.
+
+---
+
+## 4. Trip Page (`/trips/<slug>/`)
+
+Update `trip.html.twig`. Current state: shows title, dates, nav links, 3 recent entries. Target state:
+
+### Header (update existing `.trip-hero`)
+```
+Japan & Korea 2026
+Jun 2026 – Aug 2026   ·   31 journal entries · 4 stories
+```
+
+Add entry counts below the date line (small, secondary text).
+
+### Two-column layout
+
+Add a right sidebar alongside the existing content:
+
+```
+┌──────────────────────────────────┬──────────────────────┐
+│  [full chronological feed]       │  Journal             │
+│  (centered, existing max-width)  │  Jun 19 Kyoto        │
+│                                  │  Jun 18 Osaka        │
+│                                  │  ...                 │
+│                                  │                      │
+│                                  │  Stories             │
+│                                  │  The night train     │
+│                                  │  First ramen         │
+└──────────────────────────────────┴──────────────────────┘
+```
+
+- Right sidebar: `position: sticky; top: 1rem`
+- Two sections: **Journal** (list of entry titles as jump-links via `#entry-<slug>`) and **Stories** (same)
+- Each item in the sidebar is a jump-link to `#entry-<slug>` anchor on the feed card
+- Feed comes from `dailies.children` + `stories.children` merged (see §5)
+- On mobile: sidebar collapses to hidden (toggle-able or just hidden — defer this decision to implementation)
+
+### Remove the current "Recent entries" section
+
+The right-sidebar index replaces it. The full merged feed is the main content.
+
+---
+
+## 5. Story Cards in Feeds (home + trip page)
+
+Feeds in both `home.html.twig` and `trip.html.twig` show a merged chronological list of journal entries and story entries.
+
+### Merging collections in Twig
+
+Grav doesn't natively merge two page collections and sort them. Use a Twig loop to build a combined array:
+
+```twig
+{% set all_items = [] %}
+{% for e in journal_entries %}
+    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.date}]) %}
+{% endfor %}
+{% for s in story_entries %}
+    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
+{% endfor %}
+{# Sort descending by date #}
+{% set all_items = all_items|sort((a, b) => a.date < b.date ? 1 : -1) %}
+```
+
+### Journal card (existing format, unchanged)
+
+```html
+<article class="entry-card" id="entry-{{ item.page.slug }}" data-lat="{{ item.page.header.lat }}" data-lng="{{ item.page.header.lng }}">
+  <!-- existing card markup -->
+</article>
+```
+
+Add `id` and `data-lat`/`data-lng` attributes for sidebar jump-links and map sync.
+
+### Story card (new)
+
+```html
+<article class="entry-card entry-card--story" id="entry-{{ item.page.slug }}">
+  <a class="entry-card-inner" href="{{ item.page.url }}">
+    {% if hero %}
+    <div class="entry-card-photo entry-card-photo--story">
+      <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ item.page.title }}" loading="lazy">
+    </div>
+    {% endif %}
+    <div class="entry-card-body">
+      <span class="story-badge">✦ Story</span>
+      <h2 class="entry-title">{{ item.page.title }}</h2>
+    </div>
+  </a>
+</article>
+```
+
+**Visual treatment:** `entry-card--story` gets a teal left border (3px, `var(--color-accent)`) and no excerpt text. The `✦ Story` badge is small-caps, accent color.
+
+### Story page (full-screen)
+
+Story pages (`/trips/<slug>/stories/<story-slug>`) use `stories.html.twig` (already exists). That template should:
+- Override `{% block nav %}` to render **only** a fixed escape link — not an empty block, not the global nav
+- Escape link: `← Back` fixed top-left, links to `page.parent.parent.url` (the trip page)
+
+Implementation of the Snowfall-style scroll-snap interior is **deferred to Milestone 3** — this spec only covers the story card in the feed and the escape link on the story page.
+
+---
+
+## 6. Navigation
+
+Update `base.html.twig` nav. Current: single "Journal" link pointing to active trip dailies. New:
+
+- **Home** → `/`
+- **Past Trips** → `/trips`
+
+The per-trip sub-nav (Journal / Map / Stats / Stories) stays on the trip page — it is not in the global nav.
+
+---
+
+## 7. Files Changed
+
+| File | Change |
+|---|---|
+| `user/pages/00.home/home.md` | **Create** — new home page, `template: home` |
+| `user/themes/intotheeast/templates/home.html.twig` | **Create** — side-by-side map + feed |
+| `user/themes/intotheeast/templates/trips.html.twig` | **Update** — trip cards with counts |
+| `user/themes/intotheeast/templates/trip.html.twig` | **Update** — counts in header, two-column + sidebar |
+| `user/themes/intotheeast/templates/dailies.html.twig` | **Update** — merge stories into feed, story cards, add `id`/`data-` attrs |
+| `user/themes/intotheeast/templates/stories.html.twig` | **Update** — add escape link, remove global nav |
+| `user/themes/intotheeast/templates/partials/base.html.twig` | **Update** — new nav links |
+| `user/themes/intotheeast/css/style.css` | **Update** — home layout, story card styles, sidebar styles |
+| `user/config/system.yaml` | **Update** — remove `home.alias` redirect |

docs/working/specs/2026-06-19-stats-redesign.md

@@ -0,0 +1,134 @@
+# Stats Redesign — Design Spec
+
+*2026-06-19*
+
+---
+
+## Goal
+
+Expand trip statistics with new data points already available in entry frontmatter, add smart distance labelling based on whether GPX files are present, and add a dedicated cycling stats panel derived from GPX track data.
+
+---
+
+## Data sources
+
+| Source | Fields available |
+|---|---|
+| Entry frontmatter | `date`, `lat`, `lng`, `location_city`, `location_country`, `weather_temp_c` |
+| Trip page media | `.gpx` files (Komoot exports) |
+| GPX trackpoints | `lat`, `lon`, `<ele>` (meters), `<time>` (ISO 8601, 1s resolution) |
+| GPX track metadata | `<type>` (e.g. `racebike`, `hiking`) |
+
+---
+
+## Main stats block — changes
+
+The existing 4-stat grid expands to 6 stats. Both `stats.html.twig` and the inline toggle in `trip.html.twig` get the same treatment.
+
+### Stats
+
+| Stat | Label | Source | Notes |
+|---|---|---|---|
+| Days on the road | `days on the road` | `date_end - date_start` if trip `date_end` is set; else `now - first entry date` | Fixed for past trips |
+| Entries posted | `entries posted` | `all_entries\|length` | Unchanged |
+| Countries visited | `countries visited` | Deduplicated `location_country` | Unchanged; country list shown below grid |
+| **Cities visited** | `cities visited` | Deduplicated `location_city` | New; same dedup logic as countries |
+| Distance | see below | see below | Label + icon vary by mode |
+| **Temperature range** | `°C range` | `min(weather_temp_c)` – `max(weather_temp_c)` | New; shown as e.g. `−2 → 28 °C` |
+
+### Distance stat — two modes
+
+**Mode A — GPX present** (any `.gpx` files exist on the trip page):
+- Value: sum of haversine distances between all consecutive trackpoints across all GPX files
+- Label: `km cycled`
+- Icon: cycling icon (or activity-specific icon — see Icon system below)
+
+**Mode B — No GPX files:**
+- Value: sum of haversine distances between consecutive entry `lat`/`lng` points (current behaviour)
+- Label: `km roamed`
+- Icon: generic travel icon (compass / globe)
+
+Edge case — trip has both GPX files and many geo-spread entries (e.g. a mixed cycling + backpacking trip): use Mode A (GPX total only). This may understate total travel distance. Accepted limitation; revisit when transport mode is implemented.
+
+---
+
+## Cycling panel
+
+A separate expandable panel, independent of the main stats toggle. Only rendered when GPX files are present on the trip page.
+
+### Button placement
+
+Sits next to the existing Stats button in the filter bar area:
+
+```
+[ All ]  [ Journal ]  [ Stories ]          [ Stats ]  [ Cycling ]
+```
+
+The Cycling button is hidden entirely when no GPX files exist. Detection: server-side Twig filters `trip_page.media.all` for `.gpx` extension (same mechanism the map template already uses) and sets a boolean passed to the template.
+
+### Stats shown
+
+| Stat | Unit | How computed |
+|---|---|---|
+| Distance | km | Sum haversine between all trackpoints (same value as main stats Mode A) |
+| Elevation gain | m ↑ | Sum of positive `<ele>` differences (threshold: > 1 m per step to filter GPS noise) |
+| Elevation loss | m ↓ | Sum of negative `<ele>` differences (same threshold) |
+| Highest point | m | `max(<ele>)` across all files |
+| Lowest point | m | `min(<ele>)` across all files |
+| Moving time | h:mm | Total time excluding segments where computed speed < 1 km/h |
+| Average speed | km/h | Distance ÷ moving time |
+
+Max speed is explicitly excluded — GPS noise at 1-second resolution produces unreliable spikes.
+
+### Icon system
+
+A single static racing/gravel bike icon is used whenever GPX files are present — both in the main stats distance block and the cycling panel header. No dynamic switching based on `<type>`.
+
+Known Komoot `<type>` values for reference (future use if icon switching is ever added):
+`racebike`, `touringbicycle`, `mtb`, `cycling`, `hiking`, `hike`
+
+---
+
+## GPX parsing — algorithm
+
+All parsing is client-side JavaScript. The template passes the list of GPX file URLs to a JS variable; JS fetches and processes them sequentially.
+
+```
+for each GPX file URL:
+  fetch(url) → text → DOMParser → XML document
+  extract all <trkpt> elements → array of { lat, lon, ele, time }
+  append to master trackpoint array
+
+compute over master array:
+  distance     = sum haversine(p[i-1], p[i]) for i in 1..n
+  ele_gain     = sum max(0, ele[i] - ele[i-1] - 1) for i in 1..n  (1m threshold)
+  ele_loss     = sum max(0, ele[i-1] - ele[i] - 1)
+  highest      = max(ele)
+  lowest       = min(ele)
+  speed[i]     = haversine(p[i-1], p[i]) / (time[i] - time[i-1]) in km/h
+  moving_time  = sum (time[i] - time[i-1]) where speed[i] >= 1 km/h
+  avg_speed    = distance / moving_time
+```
+
+The 1 m elevation threshold filters out the flat-line noise visible in the Komoot files (many consecutive identical `<ele>` values).
+
+---
+
+## Template changes
+
+| File | Change |
+|---|---|
+| `stats.html.twig` | Add cities stat, temp range stat; update distance stat with mode detection + label + icon |
+| `trip.html.twig` | Same stats changes; add Cycling button (hidden if no GPX); add cycling panel block with JS parsing |
+
+The cycling panel JS and the distance mode detection JS share the same GPX fetch logic — extract into a single `parseGpxFiles(urls)` function called once, results used by both.
+
+---
+
+## Out of scope
+
+- Transport mode per entry (deferred — tracked separately)
+- Weather breakdown (dropped — depends on free-text consistency)
+- Max speed stat (dropped — GPS noise)
+- Lowest point shown in main stats (cycling panel only)
+- Per-file breakdown (one aggregate across all GPX files)

docs/working/specs/2026-06-19-story-mode-and-maplibre-design.md

@@ -0,0 +1,551 @@
+# Design Spec: Story Mode + MapLibre Migration
+
+*Date: 2026-06-19*
+*Inspired by: [Sabdia](https://github.com/m-cluitmans/Sabdia) — a friend's sabbatical blog built on Astro + Keystatic + MapLibre*
+
+---
+
+## Scope
+
+Two parallel features:
+
+1. **Story Mode** — a rich long-form post type alongside journal dailies, with cinematic
+   storytelling blocks (hero, chapter breaks, scrollytelling, pull quotes, snap gallery)
+2. **MapLibre GL migration** — replace Leaflet across all three maps (full map, mini-map,
+   home map) with MapLibre GL JS; add animated journey line; improve CSS integration
+
+---
+
+## Decisions Log
+
+### Why MapLibre GL instead of Leaflet
+
+Leaflet renders raster PNG tiles. MapLibre GL renders vector tiles in WebGL. Key gains:
+
+- **Animated journey line** — MapLibre's GeoJSON source model makes RAF-loop animation
+  trivial (`source.setData()` per frame). On Leaflet you'd call `polyline.setLatLngs()`
+  which also works, but MapLibre gives us everything below for free too.
+- **Smooth zoom** — continuous sub-pixel zoom vs Leaflet's tile-snap zoom levels
+- **Retina crisp** — vector geometry scales perfectly on HiDPI screens
+- **Future-proof** — 3D terrain, tilt/pitch, per-feature click events, style control,
+  outdoor/topo/satellite styles for GPX track maps all become straightforward
+- **GPX styling** — switching from `leaflet-gpx` to `@mapbox/togeojson` + GeoJSON layer
+  gives per-point colour control (speed, elevation gradients) later
+
+Cost: ~280KB (vs ~40KB Leaflet). Acceptable — cached after first visit.
+
+Tile source stays the same: CARTO dark vector style — free, no API key.
+
+### Why shortcodes for story blocks (not modular pages or blueprint lists)
+
+Evaluated three approaches for in-prose storytelling blocks:
+
+| Approach | What it is | Verdict |
+|---|---|---|
+| **Shortcodes** | `[chapter-break ...]` inline in Markdown | ✅ Chosen |
+| Modular pages | Each block = a child page in Admin | ✗ Ruled out |
+| Blueprint list + elements | `sections:` YAML list with type selector | ✗ Ruled out |
+
+**Modular pages** are how most Grav storytelling themes work (Quark, Oxygen, all
+HTML5UP ports). Each block gets proper Admin form fields. But a 1,500-word story with
+two chapter breaks requires five child pages — navigating between them on mobile while
+traveling is painful. Prose ends up fragmented across "text" module pages.
+
+**Blueprint list with elements field** (Grav's conditional field groups) could render
+blocks as a structured "Add section" list in Admin. But prose still has to go in a
+"text" type section, so a story becomes a long list of `text/chapter-break/text/scrolly/
+text/gallery` entries rather than a flowing document.
+
+**Shortcodes** keep everything in one Markdown editor — prose flows naturally, blocks are
+inserted inline. The `shortcode-gallery-plusplus` plugin already in our stack brings
+`shortcode-core` as a dependency, so no new plugin is needed.
+
+Grav Admin2 has no rich block-editor like Keystatic/Markdoc. Shortcodes are the
+closest practical equivalent for mixed prose+blocks authoring on mobile.
+
+*Future option:* If Admin2 ever gains inline block components (or we add a Flex Object
+definition), the shortcode content can be migrated — the block semantics are identical.
+
+### Why gallery stays as lightbox on journal entries
+
+Journal entries are short daily posts — a grid of 3–8 photos suits them.
+The snap gallery is a deliberate slow storytelling device (one photo fills the screen,
+reader swipes through). That pacing fits stories, not a daily feed card.
+
+### Weather not added to story frontmatter
+
+Weather is a journal-entry concept (captured at the moment of a daily post via
+Open-Meteo). Stories are retrospective long-form narratives — weather would be referenced
+in prose if relevant, not as a metadata badge.
+
+---
+
+## Part 1 — Story Mode
+
+### 1.1 Page structure
+
+Stories live as child pages under `04.stories/`:
+
+```
+user/pages/01.trips/<trip-slug>/04.stories/
+  stories.md                          ← listing page, template: stories
+  01.<story-slug>/
+    story.md                          ← individual story, template: story
+    hero.jpg
+    photo-a.jpg
+    photo-b.jpg
+```
+
+`stories.md` frontmatter:
+```yaml
+title: Stories
+template: stories
+published: true
+```
+
+### 1.2 Story frontmatter schema
+
+```yaml
+title: Into the Hills of Kyoto
+date: 2026-03-28           # start date — shown in hero header
+end_date: 2026-03-29       # optional; shown as "28–29 Mar 2026"
+location_name: Kyoto        # city/region; shown in hero header
+location_country: Japan     # used for stats de-duplication
+lat: 34.967                 # main GPS coordinate — shows pin on /map
+lng: 135.773
+hero_image: hero.jpg        # filename in page media; required for hero section
+hero_alt: The vermillion gate at Fushimi Inari at dawn
+published: true
+```
+
+Fields deliberately excluded: `weather_*` (not meaningful for stories).
+
+### 1.3 Shortcode blocks
+
+Four blocks implemented as ShortcodeCore shortcodes.
+All image paths are **filenames only** (e.g. `shrine.jpg`) — resolved against the story's
+own page media folder, same convention as `hero_image`.
+
+#### ChapterBreak
+
+Full-bleed atmospheric photo with a frosted-glass title panel. Reveals on scroll via
+IntersectionObserver (blur + translateY → clear).
+
+```
+[chapter-break image="shrine-gate.jpg" title="The Long Walk Up" number="II" /]
+```
+
+| Attribute | Required | Description |
+|---|---|---|
+| `image` | yes | Page media filename |
+| `title` | yes | Chapter title, displayed in frosted panel |
+| `number` | no | Roman numeral or label shown above title |
+| `alt` | no | Alt text (defaults to `title`) |
+
+Renders as `60vh` full-bleed block with dark gradient tint over the image and a
+`backdrop-filter: blur(18px)` panel containing the chapter number + title + teal rule.
+
+#### ScrollySection
+
+NYT-style sticky image (55% left column) with text panels that scroll past on the right.
+Steps are separated by `---` inside the shortcode body. Powered by **Scrollama** (CDN).
+
+```
+[scrolly-section image="torii-path.jpg" alt="Thousands of torii gates"]
+The path stretched further than I could see.
+
+---
+
+Each gate was donated by a business or family, a prayer made physical.
+
+---
+
+By the tenth minute of walking, the city had disappeared entirely.
+[/scrolly-section]
+```
+
+| Attribute | Required | Description |
+|---|---|---|
+| `image` | yes | Page media filename — sticky background |
+| `alt` | no | Image alt text |
+| `caption` | no | Small caption shown bottom-left of image |
+
+On mobile: full-screen sticky image with text panels scrolling over it (same layout,
+single column — image behind, text on top with semi-transparent card).
+
+Image starts blurred (`blur(8px) scale(1.04)`), unblurs when section enters viewport.
+Between steps: subtle pan (object-position cycles through 5 offsets) + slight overlay
+darkening for depth.
+
+#### PullQuote
+
+Frosted-glass quote block with optional atmospheric background image. Reveals on scroll.
+
+```
+[pull-quote image="lanterns.jpg"]
+The torii gates never seemed to end — and I didn't want them to.
+[/pull-quote]
+```
+
+| Attribute | Required | Description |
+|---|---|---|
+| `image` | no | Page media filename — background photo |
+| `alt` | no | Alt text for background image |
+
+Without `image`: renders on `--color-canvas` (warm dark surface, solid).
+With `image`: full-bleed image behind frosted glass panel.
+
+Large decorative `"` marks above and below the quote text (DM Serif Display, 5rem).
+
+#### SnapGallery
+
+Full-screen snap-scroll photo sequence. One photo per swipe. Snap physics are pure CSS
+(`scroll-snap-type: y mandatory` + `scroll-snap-stop: always` on the scroll container).
+Dot indicator active state updated via a small IntersectionObserver on each slide.
+
+```
+[snap-gallery images="photo-a.jpg,photo-b.jpg,photo-c.jpg" captions="The approach,Summit view,Descent" alts="Hikers on trail,Mountain panorama,Forest path" /]
+```
+
+| Attribute | Required | Description |
+|---|---|---|
+| `images` | yes | Comma-separated page media filenames |
+| `captions` | no | Comma-separated captions (positional) |
+| `alts` | no | Comma-separated alt texts (positional) |
+
+Each slide: blurred cover-crop background + contain-fit foreground image + caption fades
+in at bottom. Dot indicator on the right edge. Page-level `scroll-snap-align: start`
+with `proximity` (not mandatory) so normal page scroll is unaffected.
+
+### 1.4 Template: `story.html.twig`
+
+Extends `partials/base.html.twig` but overrides the nav block to show only a floating
+escape link. Full layout:
+
+```
+┌────────────────────────────────────────┐
+│  ← Back  (position: fixed, top-left)   │
+│                                        │
+│  HERO — 100vh                          │
+│    sticky image, Ken Burns zoom-out    │
+│    title blurs up from bottom          │
+│    date · location beneath title       │
+│    ↓ bounce scroll indicator           │
+│    40vh spacer (scroll trigger zone)   │
+│                                        │
+├────────────────────────────────────────┤
+│  STORY BODY                            │
+│    max-width: 680px, centred           │
+│    font: DM Serif Display (headings)   │
+│         DM Sans (prose)                │
+│    {{ page.content|raw }}              │
+│    (Markdown + shortcode blocks)       │
+│                                        │
+│  ← Back to stories  (footer)           │
+└────────────────────────────────────────┘
+```
+
+**Hero scroll behaviour (vanilla JS, no library):**
+
+- `window.scroll` listener (passive, rAF-throttled)
+- `progress = scrollY / innerHeight` (0→1 as hero scrolls away)
+- At progress > 0: dark overlay fades in (`rgba(0,0,0, progress * 0.6)`)
+- Scroll indicator hides after `scrollY > 80px`
+- At progress ≥ 1: overlay removed from DOM
+
+**Ken Burns animation:** CSS `@keyframes` — `scale(1.06) → scale(1)` over 12s,
+`ease-out`, `forwards`. Respects `prefers-reduced-motion: reduce`.
+
+**Text reveal:** Title and date animate in with `filter: blur(10px) + translateY(22px)
+→ clear` at 0.2s / 0.55s delay. Respects `prefers-reduced-motion`.
+
+### 1.5 Template: `stories.html.twig`
+
+Listing of published stories for the active trip. Grid of story cards:
+
+```
+┌──────────────┐  ┌──────────────┐
+│ hero thumb   │  │ hero thumb   │
+│              │  │              │
+│ Kyoto Hills  │  │ Seoul Rain   │
+│ 28–29 Mar    │  │ 1 Apr        │
+│ Kyoto        │  │ Seoul        │
+└──────────────┘  └──────────────┘
+```
+
+2-column grid on desktop, single column on mobile. Each card links to the story.
+Empty state: "No stories yet — check back soon."
+
+Stories are also listed as cards in `dailies.html.twig`'s combined feed (already
+implemented — the template merges journal entries and stories by date).
+
+### 1.6 JS dependencies
+
+| Library | How loaded | Size | Purpose |
+|---|---|---|---|
+| **Scrollama** | CDN (`jsdelivr`) | ~4KB | ScrollySection step detection |
+| IntersectionObserver | Native browser API | — | ChapterBreak + PullQuote reveal, SnapGallery dots |
+
+Scrollama is only loaded on story pages (inline `<script src>` in `story.html.twig`).
+
+### 1.7 CSS additions (story-specific)
+
+New CSS block added to `style.css` under a `/* ── Story pages ──` section:
+
+**Story layout:**
+- `.story-hero` — `position: relative; height: 100vh; overflow: hidden`
+- `.story-hero__img` — `position: sticky; top: 0; width: 100%; height: 100vh; object-fit: cover`
+- `.story-hero__overlay` — `position: fixed; inset: 0; pointer-events: none` (JS-driven opacity)
+- `.story-hero__content` — `position: absolute; bottom: 18%; text-align: center; color: #fff`
+- `.story-escape` — `position: fixed; top: 1rem; left: 1rem; z-index: 100; color: var(--color-ink); background: var(--color-canvas); ...`
+- `.story-body` — `max-width: 680px; margin: 0 auto; padding: var(--space-16) var(--space-6)`
+- `.story-body p` — `font-family: var(--font-ui); font-size: 1.0625rem; line-height: 1.85; color: var(--color-ink-2)`
+
+**ChapterBreak:**
+- `.chapter-break` — full-bleed breakout, `60vh`, overflow hidden
+- `.chapter-break__panel` — `backdrop-filter: blur(18px); background: rgba(26,24,20,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm)`
+- Initial state: `opacity: 0; filter: blur(12px); transform: translateY(28px)` → `.is-revealed` clears all
+- `.chapter-break__rule` — `40px × 2px` teal (`var(--color-accent)`) rule below title
+
+**ScrollySection:**
+- `.scrolly` — `display: grid; grid-template-columns: 55% 45%; width: 100vw` (full-bleed breakout)
+- `.scrolly__media` — `position: sticky; top: var(--site-header-height); height: calc(100vh - var(--site-header-height))`
+- `.scrolly-step__inner` — `background: rgba(26,24,20,0.92); backdrop-filter: blur(4px); border-radius: var(--radius-sm); border: 1px solid var(--color-border)`
+- Mobile (`max-width: 768px`): single column, steps overlay the sticky image with `margin-top: calc(-(100vh - var(--site-header-height)))`
+
+**PullQuote:**
+- `.pull-quote` — bleeds `1.5rem` each side beyond prose column
+- `.pull-quote__inner` — `backdrop-filter: blur(14px); background: rgba(26,24,20,0.12)` (with image) or `var(--color-canvas)` (without)
+- Large `"` marks: `font-family: var(--font-display); font-size: 5rem; color: var(--color-accent); opacity: 0.4`
+
+**SnapGallery:**
+- `.pgallery__frame` — `height: 100vh; scroll-snap-type: y mandatory; overflow-y: scroll`
+- `.pgallery__bg` — `object-fit: cover; filter: blur(20px) brightness(0.4)` (blurred backdrop)
+- `.pgallery__fg` — `object-fit: contain` (full foreground image)
+- `.pgallery__dot.is-active` — `background: var(--color-accent)`
+
+All animations respect `prefers-reduced-motion: reduce` — transitions set to `none`,
+initial states set to final states immediately.
+
+### 1.8 Demo story content
+
+One sample story added to `user/docs/demo/trips/japan-korea-2026/` following existing
+demo conventions. Story covers 28–29 March (Kyoto days already in journal demo):
+
+```
+user/docs/demo/trips/japan-korea-2026/04.stories/01.the-thousand-gates/
+  story.md
+```
+
+Frontmatter mirrors the schema. Body uses all four shortcode types so they can be QA'd
+in one pass. No binary image assets — `make demo-load` copies the folder; tester drops
+a few JPEGs in to exercise hero + photo blocks.
+
+---
+
+## Part 2 — MapLibre GL Migration
+
+### 2.1 Scope
+
+Three files change. No new page routes. GPX file storage and delivery unchanged.
+
+| File | Change |
+|---|---|
+| `map.html.twig` | Full rewrite of JS + CDN refs; CSS class renames |
+| `dailies.html.twig` | Mini-map JS + CDN refs rewritten |
+| `home.html.twig` | Home map JS + CDN refs rewritten |
+| `style.css` | Leaflet overrides removed; MapLibre overrides added |
+
+CDN changes (all three map templates):
+
+```html
+<!-- Remove -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
+<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
+
+<!-- Add -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<!-- GPX maps only: -->
+<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+```
+
+Tile style URL (same CARTO dark, now as vector style):
+```
+https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json
+```
+
+### 2.2 Animated journey line
+
+Port of Sabdia's `animateJourneyLine` to vanilla JS against MapLibre's GeoJSON source API:
+
+```js
+map.on('load', () => {
+  // Add an empty source
+  map.addSource('journey', {
+    type: 'geojson',
+    data: { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [] } }
+  });
+
+  // Glow layer (wide, low opacity)
+  map.addLayer({ id: 'journey-glow', type: 'line', source: 'journey',
+    paint: { 'line-color': '#2A8C73', 'line-width': 6, 'line-opacity': 0.18 }
+  });
+
+  // Main line
+  map.addLayer({ id: 'journey-line', type: 'line', source: 'journey',
+    paint: { 'line-color': '#2A8C73', 'line-width': 2.5, 'line-opacity': 0.85 }
+  });
+
+  animateJourneyLine(map, coords); // RAF loop, ease-out cubic, 5000ms
+});
+```
+
+RAF loop builds coordinate array incrementally using cumulative Euclidean distance +
+ease-out cubic easing. On `prefers-reduced-motion: reduce`: skip animation, set full
+coordinates immediately.
+
+Teal values use `var(--color-accent)` equivalent (`#2A8C73`) — matches our design tokens.
+
+### 2.3 GPX rendering
+
+Replace `leaflet-gpx` with `@mapbox/togeojson` + MapLibre GeoJSON source:
+
+```js
+fetch(gpxUrl)
+  .then(r => r.text())
+  .then(text => {
+    const gpx = new DOMParser().parseFromString(text, 'text/xml');
+    const geojson = toGeoJSON.gpx(gpx);
+    map.addSource('gpx-track', { type: 'geojson', data: geojson });
+    map.addLayer({
+      id: 'gpx-track-line', type: 'line', source: 'gpx-track',
+      paint: { 'line-color': '#2A8C73', 'line-width': 2, 'line-opacity': 0.7 }
+    });
+  });
+```
+
+Multiple GPX files (trip has several tracks): each gets its own numbered source/layer pair.
+
+### 2.4 Markers and popups
+
+MapLibre uses `maplibregl.Marker` (custom DOM element) + `maplibregl.Popup`.
+Existing popup HTML content (hero thumbnail, date, title, link) is unchanged.
+
+Marker style (same visual as current):
+- Regular entries: `12px` teal dot with white border
+- Latest/current entry: `18px` teal dot with outer ring (`box-shadow: 0 0 0 4px rgba(42,140,115,0.25)`)
+
+Popup styled via CSS (see §2.5).
+
+### 2.5 CSS improvements over Leaflet
+
+**Remove (Leaflet-specific):**
+```css
+/* DELETE — no longer needed */
+.leaflet-container { background: #282828 !important; }
+```
+
+MapLibre sets its canvas background from the style JSON (`background-color` in the style's
+`background` layer). CARTO dark-matter style uses `#1a1a1a` — no flash on load.
+
+**Add (MapLibre):**
+```css
+/* ── MapLibre GL overrides ───────────────────────────────────────────────────── */
+
+/* Navigation controls (zoom +/−, compass) */
+.maplibregl-ctrl-group {
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+}
+.maplibregl-ctrl-group button {
+    color: var(--color-ink-2);
+}
+.maplibregl-ctrl-group button:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-ink);
+}
+.maplibregl-ctrl-group button + button {
+    border-top: 1px solid var(--color-border);
+}
+
+/* Attribution bar */
+.maplibregl-ctrl-attrib {
+    background: rgba(26,24,20,0.75) !important;
+    color: var(--color-ink-muted) !important;
+    font-family: var(--font-ui);
+    font-size: 0.7rem;
+    backdrop-filter: blur(4px);
+}
+.maplibregl-ctrl-attrib a {
+    color: var(--color-accent) !important;
+}
+
+/* Popup */
+.maplibregl-popup-content {
+    background: var(--color-canvas);
+    color: var(--color-ink);
+    font-family: var(--font-ui);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-4);
+}
+.maplibregl-popup-tip {
+    border-top-color: var(--color-canvas) !important;
+}
+.maplibregl-popup-close-button {
+    color: var(--color-ink-muted);
+    font-size: 1.1rem;
+    padding: var(--space-1) var(--space-2);
+}
+.maplibregl-popup-close-button:hover {
+    color: var(--color-ink);
+    background: transparent;
+}
+
+/* Cursor — pointer hand over clickable markers */
+.maplibregl-canvas-container.maplibregl-interactive {
+    cursor: grab;
+}
+.maplibregl-canvas-container.maplibregl-interactive:active {
+    cursor: grabbing;
+}
+```
+
+**Mobile scroll-trap prevention:** For embedded maps (mini-map on dailies, home map),
+initialize with `cooperativeGestures: true` — requires two fingers to pan on touch.
+The full-page `/map` uses normal gestures (`cooperativeGestures: false`, the default).
+*Note: verify `cooperativeGestures` is available in the chosen MapLibre GL 4.x version
+during implementation; if absent, use `dragPan: false` on touch-only + a two-finger
+hint overlay as fallback.*
+
+### 2.6 What is NOT migrated now
+
+Features from Sabdia's map that were explicitly deferred:
+
+| Feature | Decision |
+|---|---|
+| Ghost pins for upcoming/planned stops | Documented; deferred — requires `show_preview` frontmatter field + Twig logic |
+| Pulsing amber dot for current location | Documented; deferred — requires "current entry" detection logic |
+| `flyTo()` on marker click | Deferred — nice UX upgrade, implement after migration stabilises |
+| 3D terrain | Deferred — requires DEM tile source (MapTiler key) |
+| Per-story inline MapBlock shortcode | Deferred — implement as part of story mode v2 |
+| MapTiler outdoor/satellite/topo styles for GPX | Deferred — requires MapTiler API key |
+
+These are preserved here so they can be picked up in a later milestone without needing
+to re-research the Sabdia implementation.
+
+---
+
+## Out of scope
+
+- Story-specific inline MapBlock shortcode (deferred, see §2.6)
+- Animated hero video (requires server-side FFmpeg, not available in Grav)
+- Push notifications for new stories
+- Story-level statistics (word count, reading time)
+- Co-authoring / Travel Buddy equivalent
+- 3D flyover video

docs/working/specs/2026-06-19-trip-page-filter-bar-design.md

@@ -0,0 +1,87 @@
+# Trip Page Filter Bar — Design Spec
+
+**Date:** 2026-06-19
+**Status:** Approved
+
+## Problem
+
+The trip page (`trip.html.twig`) shows a map + combined feed, but the three nav links below the title (Journal · Stats · Stories) navigate *away* from the page, losing the map context. The links are also unstyled (`trip-nav` has no CSS). Stories links to a stub. Stats is a separate page. The user can only return via browser back.
+
+## Goal
+
+Make the trip page self-contained. Filtering, stats, and content switching all happen in place. Navigation away from the trip page only happens when the user clicks into an individual entry or story.
+
+## Design
+
+### Filter bar (replaces `.trip-nav`)
+
+Three mutually exclusive pill buttons above the feed, plus a Stats toggle to the right:
+
+```
+[ All content ]  [ Journal ]  [ Stories ]          [ Stats ↕ ]
+```
+
+- **Default state:** "All content" active
+- **Behavior:** selecting a filter hides non-matching cards via JS (`display: none` toggle); no page navigation
+- **Stats** sits right-aligned, visually separated from the filter group; it is a toggle, not a filter
+
+### Content filtering
+
+Each `<article>` card in `trip.html.twig` gets a `data-type` attribute:
+
+- Journal entries: `data-type="journal"`
+- Story entries: `data-type="story"`
+
+JS selects all `[data-type]` cards and shows/hides based on the active filter button. Three states:
+
+| Active button | Visible cards |
+|---|---|
+| All content | all |
+| Journal | `data-type="journal"` only |
+| Stories | `data-type="story"` only |
+
+Empty-feed edge case: if Stories is selected and no stories exist yet, show a brief inline message ("No stories yet for this trip.").
+
+### Stats inline expansion
+
+Clicking Stats expands a compact stats block between the filter bar and the first card. Clicking Stats again collapses it. Stats button gets an active/pressed visual state while expanded.
+
+Stats block content (same data as the existing `/stats` page):
+- Days on the road
+- Entries posted
+- Countries visited
+- km traveled (approximate, straight-line haversine between GPS points)
+- Countries list
+
+The computation logic is moved inline into `trip.html.twig` (copied from `stats.html.twig`). The separate `/stats` sub-page is left untouched — it still works as a standalone URL.
+
+### Story card distinction
+
+`.entry-card--story` gets a visible border:
+
+```css
+border: 2px solid var(--color-accent);
+```
+
+No other visual changes to story cards in this session. Full story card redesign (hero image treatment, sneak peek, elegant layout) is deferred to a separate session.
+
+## What changes
+
+| File | Change |
+|---|---|
+| `user/themes/intotheeast/templates/trip.html.twig` | Add `data-type` attributes; add stats computation + inline stats block HTML; replace nav links with filter bar HTML; add filter + stats JS |
+| `user/themes/intotheeast/css/style.css` | Add `.trip-nav` pill styles + active state; add `.trip-stats-block` styles; add story card border |
+
+## What does NOT change
+
+- `/dailies`, `/stats`, `/stories` sub-pages continue to exist as standalone URLs
+- `stats.html.twig` is untouched
+- `dailies.html.twig` is untouched
+- No blueprint or page content changes
+- Story detail page design is out of scope
+
+## Out of scope
+
+- Photo galleries, lightbox, full in-feed entry expansion
+- Story detail page
+- Feed redesign (full pictures, per-entry photo carousel)

docs/working/specs/2026-06-19-tuscany-demo-stories-design.md

@@ -0,0 +1,154 @@
+# Tuscany Demo Stories — Design Spec
+
+**Date:** 2026-06-19
+**Goal:** Three demo stories for the Italy 2025 Tuscany trip that showcase distinct story-mode composition patterns. Content is illustrative; the purpose is to demonstrate what the format can do.
+
+---
+
+## Context
+
+Demo content lives in `user/docs/demo/trips/italy-2025/`. The `demo-load` Makefile target currently copies the Italy dailies and GPX files but does not copy a `04.stories/` folder. This spec adds three story files and wires them into `demo-load` / `demo-reset`.
+
+Story pages must live at:
+```
+user/docs/demo/trips/italy-2025/04.stories/<n>.<slug>/story.md
+```
+
+The `demo-load` target copies the entire `04.stories/` folder into:
+```
+user/pages/01.trips/italy-2025/04.stories/
+```
+
+A `stories.md` listing page already exists at `user/docs/demo/trips/italy-2025/stories.md` and is already loaded by `demo-load`.
+
+---
+
+## Story 1 — "The Val d'Orcia at Dawn"
+
+**Composition pattern:** Gallery-led. Multiple `[snap-gallery]` blocks; chapter breaks as pure visual section dividers; minimal prose; PullQuote without background image (text-only variant).
+
+**Demonstrates:**
+- Two `[snap-gallery]` blocks in one story (landscape set + detail set)
+- `[chapter-break]` used as a pure scene-change divider (no thematic text, just atmosphere)
+- `[pull-quote]` without `image=` parameter → text-only frosted style
+
+**Frontmatter:**
+```yaml
+title: The Val d'Orcia at Dawn
+date: 2025-09-05
+location_name: Val d'Orcia
+location_country: Italy
+lat: 43.078
+lng: 11.676
+hero_image: hero.jpg
+hero_alt: Cypress-lined dirt road at first light, Tuscany
+published: true
+```
+
+**Structure:**
+1. Short intro prose (2–3 sentences)
+2. `[snap-gallery]` — 4 images: landscape wide shots (dawn light, rolling hills, cypress allée, dirt road)
+3. Brief prose bridge (2 sentences)
+4. `[chapter-break]` — title "The Hour Before Heat", no number
+5. More prose (2–3 sentences)
+6. `[snap-gallery]` — 4 images: close-up details (gravel texture, bike wheel, water bottle, shadow on road)
+7. `[pull-quote]` — **no image param** (text-only variant) — short reflective line
+8. One closing sentence
+
+**Path:** `user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md`
+
+---
+
+## Story 2 — "The Long Climb to Montalcino"
+
+**Composition pattern:** Scrollytelling-led. Two `[scrolly-section]` blocks with different step counts, demonstrating the sticky-image format at different rhythms. PullQuote with background image between the two sections.
+
+**Demonstrates:**
+- `[scrolly-section]` with 3 steps (tighter rhythm, effort/grind feeling)
+- `[scrolly-section]` with 5 steps (longer, more expansive — arrival and wandering)
+- `[pull-quote]` with `image=` parameter (frosted overlay on photo)
+- `[chapter-break]` with roman numeral, separating climb from descent/arrival
+
+**Frontmatter:**
+```yaml
+title: The Long Climb to Montalcino
+date: 2025-09-05
+end_date: 2025-09-06
+location_name: Montalcino
+location_country: Italy
+lat: 43.058
+lng: 11.489
+hero_image: hero.jpg
+hero_alt: Hairpin road climbing through olive groves towards a hilltop town
+published: true
+```
+
+**Structure:**
+1. Intro prose (3 sentences — sets the scene: hot afternoon, 14km climb)
+2. `[scrolly-section]` — image: the climb. **3 steps:** (1) first kilometer, legs fresh; (2) halfway, sun overhead, silence; (3) the last 500m, the town appears
+3. `[chapter-break]` — title "Montalcino", number "II"
+4. `[pull-quote image="vineyard.jpg"]` — line about the view from the top
+5. Prose (2–3 sentences — arrival, finding a bar, cold water)
+6. `[scrolly-section]` — image: the town/streets. **5 steps:** (1) the main piazza; (2) a wine shop; (3) a cat on a wall; (4) evening light on the fortress; (5) the descent begins
+7. Closing prose (1–2 sentences)
+
+**Path:** `user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md`
+
+---
+
+## Story 3 — "One Evening in Siena"
+
+**Composition pattern:** Mood/fragment piece. Short and impressionistic. Opens with a PullQuote (no image) — the quote anchors the story before any prose. Closes with a PullQuote with image. Single short ScrollySection. SnapGallery in the middle.
+
+**Demonstrates:**
+- PullQuote **as opening element** (before any body prose) — unusual structure
+- `[scrolly-section]` with just 2 steps (the minimum — shows it works for very short sections)
+- `[snap-gallery]` as a mid-story element (not a closing flourish)
+- PullQuote with image **as closing element**
+- Overall: the format works for short, atmospheric pieces, not just long narratives
+
+**Frontmatter:**
+```yaml
+title: One Evening in Siena
+date: 2025-09-05
+location_name: Siena
+location_country: Italy
+lat: 43.318
+lng: 11.330
+hero_image: hero.jpg
+hero_alt: The Piazza del Campo at dusk, terracotta rooftops fading to blue
+published: true
+```
+
+**Structure:**
+1. `[pull-quote]` — **no image, opens the story** — a single observational sentence about Siena at dusk
+2. Intro prose (2 sentences — arrival on bike, the square)
+3. `[scrolly-section image="campo.jpg"]` — **2 steps:** (1) the square fills with people as the sun goes; (2) a busker, a couple arguing, pigeons
+4. `[snap-gallery]` — 3 images: campo at dusk, a doorway, someone eating gelato
+5. Prose (2 sentences — finding dinner, the relief of sitting down)
+6. `[pull-quote image="sunset.jpg"]` — **with image, closes the story** — a line about what cycling does to ordinary moments
+
+**Path:** `user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md`
+
+---
+
+## Makefile Changes
+
+`demo-load` — add after the existing Italy stories.md copy line:
+```makefile
+	cp -r user/docs/demo/trips/italy-2025/04.stories user/pages/01.trips/italy-2025/ 2>/dev/null || true
+```
+
+`demo-reset` — the existing `rm -rf user/pages/01.trips/italy-2025` already removes everything including stories, so no additional line needed.
+
+---
+
+## Deliverables
+
+1. `user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md`
+2. `user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md`
+3. `user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md`
+4. `Makefile` — one line added to `demo-load`
+5. Two commits: one for story files (user repo), one for Makefile (main repo)
+
+No image files are committed. Shortcode image params reference filenames that won't resolve without real photos — this is consistent with the existing Japan demo story.

docs/working/specs/2026-06-20-accessibility-audit-design.md

@@ -0,0 +1,170 @@
+# Accessibility Audit Design — intotheeast
+
+**Date:** 2026-06-20  
+**Standard:** WCAG 2.1 Level AA  
+**Scope:** All Twig templates in `user/themes/intotheeast/templates/`, CSS tokens, and inline JS
+
+---
+
+## 1. Audit Results
+
+### Failures (must fix)
+
+| ID | Criterion | Severity | Where | Issue |
+|----|-----------|----------|-------|-------|
+| F1 | 2.4.1 Bypass Blocks | High | Every page | No skip-to-main link — keyboard users must tab through site header on every page load |
+| F2 | 1.4.3 Contrast Minimum | High | `tokens.css` | `--color-ink-muted` (#7A7268) is 3.74:1 on `--color-paper` and 3.44:1 on `--color-canvas` — fails 4.5:1 AA for small text. Used for timestamps, location labels, weather spans, and stat labels |
+| F3 | 1.4.3 Contrast Minimum | High | `tokens.css` | `--color-accent` (#2A8C73) is 4.30:1 on paper and 3.95:1 on canvas — fails 4.5:1 AA. Used as link text color on journal permalinks, back-pill anchors, and feed-map link |
+| F4 | 4.1.2 Name/Role/Value | High | `trip.html.twig` | Filter buttons (`All content` / `Journal` / `Stories`) have no `aria-pressed` — the active filter is communicated only via CSS class, invisible to screen readers |
+| F5 | 4.1.2 Name/Role/Value | High | `trip.html.twig` | Stats and Cycling toggle buttons have no `aria-expanded` or `aria-controls` — collapsed/expanded state is invisible to screen readers |
+| F6 | 2.1.1 Keyboard | Medium | All three feed templates | Photo strip is scroll-snap only; no keyboard navigation. Slides cannot be advanced by keyboard users |
+| F7 | 4.1.2 Name/Role/Value | Medium | `gpx-manager.html.twig` | Each table row has a bare "Delete" button — a screen reader hears "Delete, Delete, Delete" with no way to distinguish which file is targeted |
+| F8 | 1.1.1 Non-text Content | Medium | `entry.html.twig` | When the lightbox is open, the enlarged `<img>` has `alt=""` — the displayed photo has no accessible description |
+
+### Passes (no changes needed)
+
+- `<html lang="en">`, `<header>`, `<main>`, `<footer>` landmark structure ✓
+- `<nav aria-label="Main navigation">` ✓
+- `aria-current="page"` on active nav link ✓
+- Global `:focus-visible` rule with `--color-accent` outline ✓
+- `prefers-reduced-motion` block covering all animations ✓
+- Lightbox: `role="dialog"`, `aria-modal="true"`, `aria-label="Photo viewer"`, labelled close/prev/next buttons ✓
+- `aria-hidden="true"` on photo-strip dots, story hero overlay, story scroll cue ✓
+- `<time datetime="…">` on all entry dates ✓
+- `--color-ink` (#EDE8DF): 14.53:1 on paper ✓
+- `--color-ink-2` (#B8B0A4): 8.26:1 on paper ✓
+- Story nav title `aria-hidden="true"` (decorative scroll-driven element) ✓
+- Back-to-top button `aria-label="Back to top"` ✓
+- Hero image `alt` with `hero_alt ?? page.title` fallback ✓
+
+---
+
+## 2. Fixes
+
+### Task 1 — Skip link + main landmark id
+
+**Files:** `user/themes/intotheeast/templates/partials/base.html.twig`, `user/themes/intotheeast/css/style.css`
+
+Add a visually-hidden skip link as the first focusable element in the page, before the site header. On `:focus-visible` it snaps to the top-left corner of the viewport. Add `id="main-content"` to the existing `<main class="site-main">` element so the link has a valid target.
+
+Skip-link CSS: off-screen at rest (e.g. `position: absolute; left: -10000px`), snaps to `top: 0; left: 0` on `:focus-visible`. Styled with accent color to match the site's existing focus ring aesthetic.
+
+### Task 2 — Color token contrast fixes
+
+**Files:** `user/themes/intotheeast/css/tokens.css`
+
+Two token values fail WCAG 1.4.3. Replace both:
+
+| Token | Current | Replacement | Ratio on paper | Ratio on canvas |
+|-------|---------|-------------|----------------|-----------------|
+| `--color-ink-muted` | #7A7268 | #90887E | 5.07:1 ✓ | 4.66:1 ✓ |
+| `--color-accent` | #2A8C73 | #2E9880 | 5.00:1 ✓ | 4.59:1 ✓ |
+| `--color-accent-hover` | #236655 | #287A68 | 3.58:1 ✓ (non-text) | — |
+
+`--color-accent-hover` is used only for hover/active states, so the 3:1 non-text contrast criterion (1.4.11) applies rather than 4.5:1. #287A68 passes 3:1.
+
+These are purely token changes — no template or layout changes required.
+
+### Task 3 — ARIA states for filter and toggle buttons
+
+**Files:** `user/themes/intotheeast/templates/trip.html.twig`
+
+**Filter buttons (F4):**
+
+In the template, add `aria-pressed="true"` to the initially-active `All content` button and `aria-pressed="false"` to the other two. In the existing filter JS block (the `trip-filter-btn` click handler), toggle `aria-pressed` alongside `is-active`:
+
+```js
+document.querySelectorAll('.trip-filter-btn').forEach(function(btn) {
+    btn.setAttribute('aria-pressed', btn === activeBtn ? 'true' : 'false');
+});
+```
+
+**Stats/Cycling toggles (F5):**
+
+Add `aria-expanded="false"` and `aria-controls="trip-stats-block"` to the Stats button. Add `aria-expanded="false"` and `aria-controls="trip-cycling-block"` to the Cycling button. Add the matching `id` attributes to the panels they control (`id="trip-stats-block"` already exists; add `id="trip-cycling-block"` to the cycling panel). In the toggle JS, set `aria-expanded="true"` when the panel is shown, `"false"` when hidden.
+
+No new elements needed — only attribute additions to existing markup and existing JS handlers.
+
+### Task 4 — Photo strip keyboard navigation
+
+**Files:** `user/themes/intotheeast/templates/partials/base.html.twig` (the dot-sync JS IIFE)
+
+For each photo strip with more than one slide, inject a `<button class="strip-prev" aria-label="Previous photo">` and `<button class="strip-next" aria-label="Next photo">` as siblings to the strip after the dots. The buttons are hidden when the strip has only one slide (`data-slides="1"`).
+
+Clicking prev/next scrolls the strip by one slide width via `scrollBy`. The existing dot-sync scroll listener already updates dot state, so dots stay in sync automatically.
+
+The strip container gains `role="region"` and `aria-label="Photo strip"` to group it as a named region for screen reader navigation.
+
+CSS for the buttons: minimal, positioned relative to the strip, styled as teal chevrons matching the site palette. Hidden via `display:none` when `data-slides="1"`.
+
+The strip container itself does NOT get `tabindex="0"` — the injected buttons are the keyboard entry points, which is cleaner than making a scroll container focusable.
+
+### Task 5 — GPX delete button names + lightbox alt text
+
+**Files:** `user/themes/intotheeast/templates/gpx-manager.html.twig`, `user/themes/intotheeast/templates/entry.html.twig`
+
+**GPX delete buttons (F7):**
+
+The delete buttons are built in the JS file-list renderer. Change the button label from `Delete` to `Delete ${f.filename}`:
+
+```js
+td.innerHTML = `<button class="gpx-delete" data-filename="${f.filename}">Delete ${f.filename}</button>`;
+```
+
+The filename already appears in the adjacent `<td>`, so this adds redundancy for screen readers while not disturbing the visual layout. Alternatively, use `aria-label="Delete ${f.filename}"` and keep the visible text as `Delete` — either approach satisfies 4.1.2.
+
+Use `aria-label`: keeps visible text short (`Delete`), accessible name specific (`Delete 2026-03-25-tokyo.gpx`).
+
+**Lightbox alt text (F8):**
+
+The lightbox open function already copies `data-alt` from the thumbnail. The fix is ensuring `data-alt` is populated with the thumbnail's `alt` attribute (which is `entry.title` — the entry title) and that the full-size `<img>` inside the lightbox receives it on open.
+
+In the existing lightbox open JS: when setting the `src` of the lightbox `<img>`, also set its `alt` from the triggering thumbnail's `alt` attribute.
+
+### Task 6 — axe-core Playwright regression tests
+
+**Files:** `tests/ui/accessibility.spec.js` (new), `package.json`
+
+Add `@axe-core/playwright` as a devDependency. Create `tests/ui/accessibility.spec.js` that runs an axe accessibility scan on the following pages:
+
+- `/` (home)
+- `/trips/japan-korea-2026` (trip page, with filter bar and stats)
+- `/trips/japan-korea-2026/dailies` (journal feed with map)
+- One entry page (use a known demo slug)
+- `/trips` (trips archive)
+
+Configuration: fail on `critical` and `serious` violations only. Log `moderate` and `minor` findings as warnings without failing. This matches realistic ongoing CI practice — the fixes in Tasks 1–5 should bring the site to zero `critical`/`serious` violations.
+
+Each test uses the existing `chromium` project from `playwright.config.js` with the existing auth setup.
+
+---
+
+## 3. What is NOT in scope
+
+- WCAG AAA criteria (e.g. 1.4.6 Enhanced Contrast at 7:1)
+- Map marker keyboard navigation — MapLibre GL has built-in keyboard support for map pan/zoom; marker focus is a complex interaction pattern beyond the current scope. Deferred.
+- Story page shortcode heading hierarchy — enforcing heading structure in author-written content is a content authoring concern, not a template concern
+- `post-form.html.twig` — the form is admin-only and used by Mischa alone; functional accessibility for this page is inherently self-tested
+
+---
+
+## 4. Testing approach
+
+- **Task 1–5:** Manual verification by loading the page, tabbing through with keyboard, and checking AT output with a screen reader or browser accessibility tree inspector
+- **Task 6:** Automated axe-core scan catches regressions after future template changes; run as part of `npx playwright test`
+- Playwright tests must load demo data (`make demo-load`) before running, consistent with existing test setup
+
+---
+
+## 5. File map
+
+| File | Changed by |
+|------|-----------|
+| `user/themes/intotheeast/templates/partials/base.html.twig` | Tasks 1, 4 |
+| `user/themes/intotheeast/css/style.css` | Task 1 |
+| `user/themes/intotheeast/css/tokens.css` | Task 2 |
+| `user/themes/intotheeast/templates/trip.html.twig` | Task 3 |
+| `user/themes/intotheeast/templates/gpx-manager.html.twig` | Task 5 |
+| `user/themes/intotheeast/templates/entry.html.twig` | Task 5 |
+| `tests/ui/accessibility.spec.js` | Task 6 (new) |
+| `package.json` | Task 6 |

docs/working/specs/2026-06-20-demo-data-redesign.md

@@ -0,0 +1,300 @@
+# Demo Data Redesign — italy-2026-demo
+
+**Date:** 2026-06-20  
+**Status:** Approved
+
+## Goal
+
+Replace the existing patchwork of demo content across three trips with a single, high-quality demo trip (`italy-2026-demo`) that:
+- Follows the real Tuscany cycling route (Campiglia Marittima loop, 8 days)
+- Has 12 journal entries with actual photos for realistic gallery/lightbox QA
+- Has 4 stories that collectively exercise every story shortcode type
+- Is cleanly managed by a single `make demo-load` / `make demo-reset` pair
+
+---
+
+## 1. Cleanup
+
+### Remove
+
+| Path | Action |
+|---|---|
+| `user/docs/demo/trips/japan-korea-2026/` | Delete entirely |
+| `user/docs/demo/trips/italy-2025/dailies/` | Delete all entries |
+| `user/docs/demo/trips/italy-2025/04.stories/` | Delete all stories |
+| `user/docs/demo/trips/italy-2026-demo/dailies/` | Replace with 12 new entries |
+| `user/docs/demo/trips/italy-2026-demo/04.stories/` | Replace with 4 new stories |
+
+Italy 2025 keeps its GPX files and page-structure files (trip.md, map.md, stats.md) — only demo-generated entries and stories are removed.
+
+### Update CLAUDE.md
+
+Remove the Japan/Korea reference from the `demo-load` description. New description:
+> `make demo-load` — load demo content into `italy-2026-demo` trip (journal entries + stories + GPX)
+
+---
+
+## 2. GPX Files
+
+Rename the 4 newly added files to match the existing naming convention. Keep existing day-5/6/8 names unchanged.
+
+| New filename | Original |
+|---|---|
+| `day-1-campiglia-to-sugherella.gpx` | `2025-10-11_2627663255_TGE Tuscany...Day 1...gpx` |
+| `day-2-sugherella-to-orbetello.gpx` | `2025-10-12_2630489431_TGE Tuscany...Day 2.gpx` |
+| `day-3-orbetello-to-sorano.gpx` | `2025-10-13_2632495944_TGE Tuscany...Day 3.gpx` |
+| `day-4-sorano-to-val-dorcia.gpx` | `2025-10-14_2634086364_TGE Tuscany...Day 4.gpx` |
+
+All 7 GPX files live at `user/docs/demo/trips/italy-2026-demo/`.
+
+---
+
+## 3. Journal Entries (12)
+
+Each entry is a directory at `user/docs/demo/trips/italy-2026-demo/dailies/<slug>.entry/` containing:
+- `entry.md` — frontmatter + one prose paragraph
+- `01.jpg` … `N.jpg` — placeholder images (numbered for sort order)
+
+Images are downloaded from `https://picsum.photos/seed/<seed>/1200/800` during `make demo-load`. Seeds are fixed so the same images load every time.
+
+### Entry list
+
+| # | Slug | Date/Time | Location | Weather | Photos | Seed prefix |
+|---|---|---|---|---|---|---|
+| 1 | `2026-09-01-0700-setting-off-from-campiglia` | 2026-09-01 07:00 | Campiglia Marittima, Italy | Sunny 27°C | 2 | `demo-d1` |
+| 2 | `2026-09-02-1130-maremma-in-full-sun` | 2026-09-02 11:30 | Maremma, Italy | Sunny 29°C | 3 | `demo-d2a` |
+| 3 | `2026-09-02-1900-the-lagoon-at-dusk` | 2026-09-02 19:00 | Orbetello, Italy | Partly cloudy 24°C | 3 | `demo-d2b` |
+| 4 | `2026-09-03-0800-orbetello-morning` | 2026-09-03 08:00 | Orbetello, Italy | Sunny 22°C | 2 | `demo-d3a` |
+| 5 | `2026-09-03-1700-tufa-and-towers` | 2026-09-03 17:00 | Sorano, Italy | Sunny 26°C | 2 | `demo-d3b` |
+| 6 | `2026-09-04-1500-the-long-climb-north` | 2026-09-04 15:00 | Val d'Orcia, Italy | Partly cloudy 23°C | 4 | `demo-d4` |
+| 7 | `2026-09-05-0830-before-the-heat-arrives` | 2026-09-05 08:30 | Pienza, Italy | Sunny 21°C | 2 | `demo-d5a` |
+| 8 | `2026-09-05-1800-into-siena` | 2026-09-05 18:00 | Siena, Italy | Sunny 25°C | 3 | `demo-d5b` |
+| 9 | `2026-09-06-2000-florence-by-nightfall` | 2026-09-06 20:00 | Florence, Italy | Cloudy 21°C | 3 | `demo-d6` |
+| 10 | `2026-09-07-1400-one-rest-day` | 2026-09-07 14:00 | Florence, Italy | Partly cloudy 22°C | 2 | `demo-d7` |
+| 11 | `2026-09-08-0730-dawn-on-the-cecina-coast` | 2026-09-08 07:30 | Cecina, Italy | Sunny 20°C | 1 | `demo-d8a` |
+| 12 | `2026-09-08-1630-home` | 2026-09-08 16:30 | Campiglia Marittima, Italy | Sunny 26°C | 2 | `demo-d8b` |
+
+### Entry coordinates
+
+| # | lat | lng | Notes |
+|---|---|---|---|
+| 1 | 43.024 | 10.603 | GPX Day 1 start |
+| 2 | 42.612 | 11.171 | GPX Day 2 midpoint |
+| 3 | 42.442 | 11.218 | GPX Day 2 end (Orbetello) |
+| 4 | 42.442 | 11.217 | GPX Day 3 start |
+| 5 | 42.683 | 11.715 | GPX Day 3 end (Sorano) |
+| 6 | 43.077 | 11.678 | GPX Day 4 end (Pienza/Val d'Orcia) |
+| 7 | 43.078 | 11.676 | GPX Day 5 start |
+| 8 | 43.318 | 11.335 | GPX Day 5 end (Siena) |
+| 9 | 43.767 | 11.253 | GPX Day 6 end (Florence) |
+| 10 | 43.769 | 11.255 | Florence (rest day, slight offset) |
+| 11 | 43.553 | 10.313 | GPX Day 8 start (Cecina coast) |
+| 12 | 43.017 | 10.587 | GPX Day 8 end (Campiglia) |
+
+### Entry frontmatter pattern
+
+```yaml
+---
+title: '<Title>'
+date: '2026-09-NN HH:MM'
+template: entry
+published: true
+hero_image: ''
+lat: '<lat>'
+lng: '<lng>'
+location_city: '<City>'
+location_country: 'Italy'
+weather_temp_c: <N>
+weather_desc: '<Desc>'
+---
+```
+
+`hero_image` is left empty — the template auto-picks `media.images|first` as hero, which will be `01.jpg`.
+
+---
+
+## 4. Stories (4)
+
+Each story is a directory at `user/docs/demo/trips/italy-2026-demo/04.stories/<slug>/` containing `story.md` + image files.
+
+Stories are ordered chronologically and geographically along the route. Each story's **primary shortcode** is different, ensuring all 4 types get QA coverage.
+
+### Story list
+
+| # | Slug | Day | Location | Primary shortcode | Also uses |
+|---|---|---|---|---|---|
+| 1 | `01.sorano-rock-and-time` | 3 | Sorano | `scrolly-section` | `chapter-break`, `snap-gallery` |
+| 2 | `02.val-dorcia-at-dawn` | 5 | Pienza / Val d'Orcia | `snap-gallery` | `chapter-break`, `pull-quote` |
+| 3 | `03.one-evening-siena` | 5 | Siena | `pull-quote` (with image) | `chapter-break`, `scrolly-section` |
+| 4 | `04.florence-without-a-map` | 7 | Florence | `chapter-break` (structural) | `pull-quote`, `scrolly-section` |
+
+### Story: 01.sorano-rock-and-time
+
+**Structure:**
+1. Intro prose (1 paragraph)
+2. `[scrolly-section image="hero.jpg"]` — 3 scroll steps separated by `---`: approach to Sorano, the tufa cliffs close up, entering the gate
+3. Prose bridge (1 paragraph)
+4. `[chapter-break image="photo-1.jpg" title="After Dark" number="II"]`
+5. `[snap-gallery images="photo-1.jpg,photo-2.jpg"]` — alley + view from the walls
+6. Closing prose (1 paragraph)
+
+**Images:** `hero.jpg` (town on tufa cliff), `photo-1.jpg` (narrow medieval alley), `photo-2.jpg` (view south over valley)
+
+**Frontmatter:**
+```yaml
+title: Sorano: Rock and Time
+date: '2026-09-03'
+location_name: Sorano
+location_country: Italy
+lat: 42.683
+lng: 11.715
+hero_image: hero.jpg
+hero_alt: Medieval town of Sorano perched on tufa cliffs
+published: true
+```
+
+---
+
+### Story: 02.val-dorcia-at-dawn
+
+**Structure:**
+1. Intro prose (1 paragraph — leaving camp before sunrise)
+2. `[snap-gallery images="hero.jpg,photo-1.jpg,photo-2.jpg"]` — 3 landscape shots: valley at first light, cypress road, distant farmhouse
+3. Prose bridge (1 paragraph — route through the valley floor)
+4. `[chapter-break image="photo-1.jpg" title="The Hour Before Heat"]`
+5. `[pull-quote]` (text-only, no image) — a short reflection on cycling rhythms
+6. Closing prose (1 paragraph — reaching Pienza by noon)
+
+**Images:** `hero.jpg` (wide valley, golden hour), `photo-1.jpg` (cypress-lined road), `photo-2.jpg` (farmhouse on hillside)
+
+**Frontmatter:**
+```yaml
+title: Val d'Orcia at Dawn
+date: '2026-09-05'
+location_name: Val d'Orcia
+location_country: Italy
+lat: 43.078
+lng: 11.676
+hero_image: hero.jpg
+hero_alt: Wide Tuscan valley at dawn, long cypress shadows
+published: true
+```
+
+---
+
+### Story: 03.one-evening-siena
+
+**Structure:**
+1. `[pull-quote image="hero.jpg" alt="..."]` — image-backed opener quote about arriving by bike
+2. Intro prose (1–2 paragraphs — the Campo appearing at the end of a street)
+3. `[chapter-break image="photo-1.jpg" title="The Campo" number="I"]`
+4. `[scrolly-section image="hero.jpg"]` — 3 scroll steps: the square filling up at dusk, a busker, sitting down after 8 hours riding
+5. Closing prose (1 paragraph — finding dinner, the specific relief of sitting still)
+
+**Images:** `hero.jpg` (Campo at golden hour from upper rim), `photo-1.jpg` (stone doorway / Siena street detail)
+
+**Frontmatter:**
+```yaml
+title: One Evening in Siena
+date: '2026-09-05'
+location_name: Siena
+location_country: Italy
+lat: 43.318
+lng: 11.330
+hero_image: hero.jpg
+hero_alt: Piazza del Campo at dusk, terracotta rooftops fading to blue
+published: true
+```
+
+---
+
+### Story: 04.florence-without-a-map
+
+**Structure:**
+1. Intro prose (1 paragraph — rest day, no route, no GPS)
+2. `[chapter-break image="hero.jpg" title="Day Seven" number="VII"]`
+3. `[snap-gallery images="hero.jpg,photo-1.jpg"]` — Arno view + street scene
+4. `[pull-quote]` (text-only) — reflection: cycling makes you earn the places; today we got Florence for free
+5. `[scrolly-section image="photo-1.jpg"]` — 3 steps: Uffizi queue they didn't join, a leather market, crossing a bridge at midday light
+6. Closing prose (1 paragraph — tired feet, early bed, tomorrow the coast road home)
+
+**Images:** `hero.jpg` (Arno river with Ponte Vecchio), `photo-1.jpg` (narrow Florence street with washing lines)
+
+**Frontmatter:**
+```yaml
+title: Florence Without a Map
+date: '2026-09-07'
+location_name: Florence
+location_country: Italy
+lat: 43.769
+lng: 11.255
+hero_image: hero.jpg
+hero_alt: Arno river at midday with Ponte Vecchio
+published: true
+```
+
+---
+
+## 5. Makefile Changes
+
+### demo-load (full replacement)
+
+New behaviour:
+1. Create trip folder structure under `user/pages/01.trips/italy-2026-demo/`
+2. Copy page-level markdown files (trip.md, map.md, stats.md, stories.md)
+3. Copy all 4 stories (with their image files) to `04.stories/`
+4. Copy all 12 journal entries to `01.dailies/`
+5. Copy 7 GPX files to trip root
+6. Download placeholder images via `curl` into each entry and story folder (skip if file exists)
+7. `php bin/grav clearcache`
+
+Image download pattern for entries (per entry `SLUG`, images `01.jpg`…`NN.jpg`):
+```bash
+[ -f ".../01.dailies/SLUG/01.jpg" ] || curl -sL "https://picsum.photos/seed/demo-dN-1/1200/800" -o ".../01.jpg"
+```
+
+Seed naming convention: `{seed-prefix}-{image-number}` e.g. entry 1 (`demo-d1`) gets seeds `demo-d1-1` and `demo-d1-2`. Story images use prefix `demo-s{N}` e.g. `demo-s1-hero`, `demo-s1-1`, `demo-s1-2`.
+
+Image sizes: entries `1200x800`, story images `1600x1000`.
+
+### demo-reset (updated)
+
+Remove `user/pages/01.trips/italy-2026-demo/` entirely and clear cache. Behaviour unchanged from current, just scoped correctly.
+
+---
+
+## 6. trip.md Updates
+
+`user/docs/demo/trips/italy-2026-demo/trip.md`:
+
+```yaml
+---
+title: 'Tuscany 2026'
+template: trip
+date: '2026-09-01'
+date_start: '2026-09-01'
+date_end: '2026-09-08'
+cover_image: ''
+---
+```
+
+Title changed from "Italy 2026 (Demo)" to "Tuscany 2026" — cleaner for a realistic demo.
+
+---
+
+## 7. What Is Not Changing
+
+- `user/pages/01.trips/italy-2025/` — real trip page stays; only the demo entries in `docs/demo/trips/italy-2025/dailies/` and `docs/demo/trips/italy-2025/04.stories/` are removed
+- `user/pages/01.trips/japan-korea-2026/` — active trip, untouched
+- GPX files already loaded on the italy-2025 page — untouched
+- `user/config/site.yaml` `active_trip` — untouched
+
+---
+
+## Implementation Notes
+
+- Write stories first (they define the image filenames), then entries
+- Image seeds are fixed strings so `make demo-load` is idempotent
+- The `|| true` pattern on `cp` commands is already established in the Makefile — follow it
+- `stories.md` (the listing page) frontmatter is unchanged
+- No `hero_image` in entry frontmatter — let the template auto-select `01.jpg`

docs/working/specs/2026-06-20-gpx-connector-logic-design.md

@@ -0,0 +1,109 @@
+# Design Spec: Smart GPX-Marker Connector Logic
+
+**Date:** 2026-06-20
+**Status:** Approved
+
+---
+
+## Problem
+
+The map currently draws a straight connector line between every adjacent pair of journal/story entry markers in chronological order. When GPX track files are also present, this creates two overlapping representations of the same movement — the accurate GPX track line and a redundant straight-line connector. For segments with no GPX coverage (e.g. a train journey), the straight connector is useful and should remain.
+
+---
+
+## Goal
+
+Suppress connector lines between adjacent markers only when a single GPX file demonstrably covers both endpoints. Keep connectors for gaps that have no GPX coverage. Provide a per-entry override (`force_connect`) for cases where the algorithm suppresses a connector the author wants to show.
+
+---
+
+## Behaviour Modes
+
+### No GPX files present
+Existing behaviour unchanged. All adjacent markers are connected by a line in chronological order.
+
+### GPX files present
+Auto-connectors off by default. For each adjacent pair of markers (M1 → M2):
+
+1. If `force_connect: true` on M2 → draw connector (override wins)
+2. Otherwise run the spatial algorithm (see below)
+3. If the algorithm finds coverage → suppress connector
+4. If the algorithm finds no coverage → draw connector
+
+---
+
+## Spatial Algorithm
+
+**Proximity threshold:** 10 km
+
+For each adjacent pair (M1, M2):
+
+1. For each loaded GPX file F:
+   a. Pre-filter: if M1 or M2 lies outside F's bounding box expanded by 10 km → skip F cheaply
+   b. Sample every 10th trackpoint in F; compute haversine distance to M1 and to M2
+   c. If both M1 and M2 have at least one sampled point within 10 km → suppress connector for this pair; stop checking further files
+2. If no file F covered both M1 and M2 → draw connector
+
+**Rationale for 10 km:** entries are often posted from a hotel, village, or café near (but not on) a trail. 10 km accommodates varied terrain — coastal routes, hilly detours — without false-positives across genuinely separate segments.
+
+**Rationale for same-file requirement:** two markers each near *different* GPX files (e.g. an inland hike and a coastal walk) must not suppress the connector between them — that gap (e.g. a train journey) is exactly what should be shown.
+
+---
+
+## Fallback Behaviour
+
+If any GPX file fails to load, treat it as absent for the algorithm. Connectors default to drawing rather than hiding — missing data never creates invisible gaps on the map.
+
+---
+
+## Data Model Changes
+
+Two new fields added to both the **journal entry** and **story entry** Grav blueprints:
+
+### `force_connect`
+- Type: boolean
+- Default: false / null (unset)
+- Meaning: "always draw a connector from the previous marker to this entry"
+- Only has visible effect when GPX files are present (when no GPX, auto-connectors are already on)
+- Editable via Admin2 on any entry
+
+### `transport_mode`
+- Type: enum
+- Values: `walking`, `bicycle`, `bus`, `train`, `car`
+- Default: null (unset)
+- Meaning: how the author arrived at this location (attached to the arriving entry)
+- **Not visualised yet** — data capture only, for future use (distance-by-mode stats, map icons, filter)
+- Editable via Admin2 on any entry
+
+Both fields are exposed in frontmatter. Adding them to the mobile post form is deferred (backlog: blueprint-to-form sync pass).
+
+---
+
+## Client-Side Implementation
+
+### Entry JSON
+The Twig template that serialises entries into a JS variable (`TRACKER_ENTRIES` or equivalent) gains two new fields per entry: `force_connect` (bool) and `transport_mode` (string or null).
+
+### Timing
+Connector drawing is deferred until all GPX files have settled (Promise.all on load events). GPX tracks appear immediately as each file loads. Connectors render once all files are resolved or rejected.
+
+### Performance
+- Bounding box pre-filter eliminates most files for any given pair without distance math
+- Sampling every 10th trackpoint keeps the haversine checks cheap even for full-day GPX files (thousands of points → hundreds of checks per file per pair)
+
+---
+
+## Deferred / Out of Scope
+
+- Visualising `transport_mode` on the map (icons, line styles by mode)
+- Distance-by-mode statistics
+- Adding `force_connect` / `transport_mode` to the mobile post form
+- Making the 10 km threshold configurable in `site.yaml`
+
+---
+
+## Affected Files (indicative)
+
+- `user/themes/intotheeast/templates/map.html.twig` — entry JSON serialisation
+- `user/themes/intotheeast/js/map.js` (or equivalent) — connector drawing logic + algorithm
+- Blueprint file(s) for journal and story entries — add two new fields

docs/working/specs/2026-06-20-inline-journal-feed-design.md

@@ -0,0 +1,306 @@
+# Inline Journal Feed Design Spec
+
+*2026-06-20*
+
+---
+
+## Goal
+
+Replace click-through journal entry cards with fully inline posts across the trip page, dailies page, and home page. Each journal entry renders its full content in the feed — title, meta, photo strip, and body text — without requiring navigation to the detail page.
+
+---
+
+## Scope
+
+**In scope:**
+- Journal entry display in `trip.html.twig`, `dailies.html.twig`, `home.html.twig`
+- New `.journal-post` CSS component and photo strip styles
+- Dot-sync JS for the photo strip (one shared block in `base.html.twig`)
+- Map flash animation extended to `.journal-post.is-highlighted`
+- Test updates for T1, T2
+
+**Out of scope:**
+- Story cards in the feed — remain as click-through `<a class="entry-card entry-card--story">`, unchanged
+- The journal entry detail page (`entry.html.twig`) — kept as-is; just not linked from the feed
+- The post form — photos are already uploaded correctly
+- Lightbox on the feed — only on the detail page
+
+---
+
+## Layout
+
+Each journal entry in the feed renders as:
+
+```
+Title (DM Serif Display, ~xl)
+DATE · 📍 City, Country · ☀️ Weather    ← meta row; DATE is the permalink to detail page
+┌──────────────────────────────────────┐
+│                                      │
+│   Photo (full-width, 3:2 ratio)     │  ← swipe left/right for 2–4 photos
+│                                      │
+└──────────────────────────────────────┘
+           ●  ○  ○                        ← dots; hidden when only 1 photo
+Body text paragraph(s)
+──────────────────────────────────────── ← border-bottom separator
+```
+
+- **Title** sits above the photo, using `var(--font-display)` at `var(--text-xl)`
+- **Meta row** (date, location, weather) sits between title and photo; the date is a small `<a>` permalink to the detail page, styled in `var(--color-ink-muted)`. Location and weather are plain text spans
+- **Photo strip**: CSS scroll-snap, no JS library required for swipe
+- **Dots**: visible only when the entry has 2+ images; update via scroll listener
+- **Body**: full entry body text — not truncated, not excerpted
+- **Separator**: `border-bottom: 1px solid var(--color-border)` on the post root, matching the current entry card separator
+
+---
+
+## HTML Structure
+
+```html
+<article class="journal-post" id="entry-{{ entry.slug }}"
+         data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+
+    <header class="journal-post-header">
+        <h2 class="journal-post-title">{{ entry.title }}</h2>
+        <p class="journal-post-meta">
+            <a class="journal-post-permalink" href="{{ entry.url }}">
+                <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+            </a>
+            {% if entry.header.location_city or entry.header.location_country %}
+            <span class="journal-post-location">
+                · 📍
+                {%- set _loc = [] -%}
+                {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                {{ _loc|join(', ') }}
+            </span>
+            {% endif %}
+            {% if entry.header.weather_desc %}
+            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+            {% endif %}
+        </p>
+    </header>
+
+    {% set images = entry.media.images %}
+    {% if images|length > 0 %}
+    <div class="journal-photo-strip" data-slides="{{ images|length }}">
+        {% for img in images %}
+        <div class="journal-photo-slide">
+            <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+        </div>
+        {% endfor %}
+    </div>
+    {% if images|length > 1 %}
+    <div class="journal-photo-dots" aria-hidden="true">
+        {% for img in images %}
+        <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+        {% endfor %}
+    </div>
+    {% endif %}
+    {% endif %}
+
+    <div class="journal-post-body">{{ entry.content|raw }}</div>
+
+</article>
+```
+
+**Key attribute notes:**
+- `id="entry-{{ entry.slug }}"` — required for map marker scroll targeting (`document.getElementById`)
+- `data-type="journal"` — required for the trip page filter bar (`querySelectorAll('[data-type]')`)
+- `data-lat` / `data-lng` — required for map marker rendering
+- The `<article>` root replaces the old `<a class="entry-card">` — the entry is no longer a clickable card
+
+The `weather_icons` map (currently defined inline in `entry.html.twig`) must also be defined at the top of `trip.html.twig`, `dailies.html.twig`, and `home.html.twig` so the meta row can use it.
+
+---
+
+## Photo Strip: CSS
+
+```css
+/* ── Journal post ──────────────────────────────────────────── */
+
+.journal-post {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space-12);
+    margin-bottom: var(--space-12);
+}
+
+.journal-post-header {
+    margin-bottom: var(--space-4);
+}
+
+.journal-post-title {
+    font-family: var(--font-display);
+    font-size: var(--text-xl);
+    font-weight: 400;
+    line-height: var(--leading-snug);
+    color: var(--color-ink);
+    margin-bottom: var(--space-2);
+}
+
+.journal-post-meta {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.journal-post-permalink {
+    color: var(--color-ink-muted);
+    text-decoration: none;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+}
+
+.journal-post-permalink:hover { color: var(--color-accent); }
+
+.journal-post-location,
+.journal-post-weather {
+    color: var(--color-ink-muted);
+}
+
+/* Photo strip */
+
+.journal-photo-strip {
+    display: flex;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-3);
+}
+
+.journal-photo-strip::-webkit-scrollbar { display: none; }
+
+.journal-photo-slide {
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+    aspect-ratio: 3 / 2;
+    overflow: hidden;
+}
+
+.journal-photo-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* Dot indicators */
+
+.journal-photo-dots {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+}
+
+.journal-photo-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background: var(--color-border);
+    transition: background 0.2s;
+}
+
+.journal-photo-dot.is-active {
+    background: var(--color-ink-muted);
+}
+
+/* Body */
+
+.journal-post-body {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-ink-2);
+}
+
+.journal-post-body p { margin-bottom: var(--space-4); }
+.journal-post-body p:last-child { margin-bottom: 0; }
+
+/* Map flash — extends existing keyframe */
+
+.journal-post.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+---
+
+## Photo Strip: JS
+
+One shared script block added to `base.html.twig`, just before `</body>`. It is a no-op on pages with no strips.
+
+```html
+<script>
+(function () {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+    });
+})();
+</script>
+```
+
+---
+
+## CSS Cleanup
+
+The following selectors are used exclusively by the old journal entry card and can be removed from `style.css` once the new `.journal-post` component is in place. Story cards in the feed (`entry-card--story`) do **not** use them:
+
+- `.entry-card-textmeta` and children (`.entry-date-plain`, `.entry-location-plain`)
+- `.entry-card-photo-overlay` and children (`.entry-date-overlay`, `.entry-location-overlay`)
+- `.entry-excerpt`
+- `.entry-read-more`
+- `.entry-card .entry-title` — the title rule scoped to `.entry-card`; replace with `.journal-post-title`
+- `.entry-card:hover .entry-card-photo img` — photo zoom on hover; journal posts have no hover interaction
+- `.entry-card:hover .entry-title` — title tint on hover; same reason
+- `.entry-card.is-highlighted` — replaced by `.journal-post.is-highlighted`
+
+**Keep** the following — they are still used by story cards (`entry-card--story`) or elsewhere:
+- `.entry-card` base styles — story cards still use this class
+- `.entry-card-photo` and `.entry-card-photo img` — story cards use `.entry-card-photo--story`
+- `.entry-card:hover` background lift (in the shared three-card selector) — story cards still hover
+- All single-entry-page styles (`.entry-hero`, `.entry-header`, `.entry-body`, etc.)
+
+---
+
+## Test Updates
+
+**T1** (`tests/ui/dailies.spec.js`):
+```js
+// OLD
+await expect(page.locator('.entry-card').first()).toBeVisible();
+// NEW
+await expect(page.locator('.journal-post').first()).toBeVisible();
+```
+
+**T2** (`tests/ui/dailies.spec.js`):
+```js
+// OLD — used href on the <a> root
+const newerCard = page.locator(`.entry-card[href*="${NEWER_SLUG}"]`);
+const olderCard = page.locator(`.entry-card[href*="${OLDER_SLUG}"]`);
+// ...
+findIndex(c => c === el)
+
+// NEW — use id attribute (journal posts are <article>, not <a>)
+const newerCard = page.locator(`#entry-${NEWER_SLUG}`);
+const olderCard = page.locator(`#entry-${OLDER_SLUG}`);
+// ...
+findIndex(c => c.id === el.id)
+```
+
+---
+
+## Out of scope
+
+- Swipe velocity / momentum — native browser scroll-snap handles this
+- Lightbox on the feed photo strip — photos are not tappable in the feed; the detail page retains the lightbox
+- Lazy-load placeholder shimmer
+- Image ordering UI — photos appear in filesystem order (same as the detail page gallery)

docs/working/specs/2026-06-20-pixelfed-import-design.md

@@ -0,0 +1,168 @@
+# Pixelfed Import & Demo Reorganisation — Design Spec
+
+**Date:** 2026-06-20
+**Status:** Approved
+
+## Overview
+
+Import 36 Pixelfed posts from `gram.social/m038` (exported as `pixelfed-statuses.json`) into three new permanent trips. Simultaneously reorganise the demo system: move the Italy demo trip to a clearly-labelled 2026 demo slug and retire the Japan demo entries.
+
+---
+
+## Scope
+
+### What this covers
+
+1. Demo system reorganisation (Italy 2025 demo → `italy-2026-demo`, Japan demo retired)
+2. Three new real trip page trees
+3. A one-time Python import script that routes posts to the correct trip, downloads photos, and writes Grav entry folders
+4. Updated Makefile `demo-load` / `demo-reset` targets
+
+### What this does not cover
+
+- Generating proper titles (done interactively with Claude after import)
+- Adding GPX routes to real trips
+- Lat/lng geocoding (location data from the export has city/country only, no coordinates)
+
+---
+
+## Part 1: Demo System Reorganisation
+
+### 1a. Italy demo moves to `italy-2026-demo`
+
+Copy `user/docs/demo/trips/italy-2025/` → `user/docs/demo/trips/italy-2026-demo/`.
+
+Update the trip page frontmatter inside the new demo source:
+```yaml
+title: 'Italy 2026 (Demo)'
+slug: italy-2026-demo
+```
+
+Create the real page tree at `user/pages/01.trips/italy-2026-demo/` with the standard four subfolders.
+
+Update Makefile:
+- `demo-load`: replace all `italy-2025` references with `italy-2026-demo`
+- `demo-reset`: replace `rm -rf user/pages/01.trips/italy-2025` with `rm -rf user/pages/01.trips/italy-2026-demo`
+
+`italy-2025` is never touched by demo commands after this change.
+
+### 1b. Japan demo retired
+
+Remove all `japan-korea-2026` blocks from `demo-load` and `demo-reset`.
+
+The source files in `user/docs/demo/trips/japan-korea-2026/` stay on disk as a backup but are not loaded by any make target. The `japan-korea-2026` trip structure and any real content committed there remains untouched.
+
+### 1c. Italy 2025 demo stories removed
+
+The 3 Tuscany demo stories currently at `user/pages/01.trips/italy-2025/04.stories/` (if present on disk) are deleted — they are moving to the demo trip. The `04.stories/` folder itself is kept with its `stories.md` index page.
+
+---
+
+## Part 2: Real Trip Page Trees
+
+Three trips get the standard structure: `trip.md`, `01.dailies/dailies.md`, `02.map/map.md`, `03.stats/stats.md`, `04.stories/stories.md`.
+
+| Slug | Title | Action |
+|---|---|---|
+| `central-asia-2023` | Central Asia 2023 | Create new |
+| `us-canada-mex-2024` | Northern America 2024 | Create new |
+| `italy-2025` | Cycling Tuscany 2025 | Exists — update title only |
+
+All three are committed to the `user/` git repo as permanent content.
+
+---
+
+## Part 3: Pixelfed Import Script
+
+### Location
+
+`scripts/pixelfed-import.py`
+
+Invoked via: `make pixelfed-import`
+
+### Input
+
+`/home/mischa/Nextcloud/Downloads/pixelfed/pixelfed-statuses.json` (36 posts, Pixelfed v1 export format)
+
+### Trip routing by year
+
+| `created_at` year | Target trip |
+|---|---|
+| 2023 | `central-asia-2023` |
+| 2024 | `us-canada-mex-2024` |
+| 2025 | `italy-2025` |
+
+Posts are numbered per trip (1-indexed), reset for each trip.
+
+### Output folder structure
+
+For each post, one folder inside `user/pages/01.trips/{trip}/01.dailies/`:
+
+```
+{YYYY-MM-DD}-pixelfed-{N}.entry/
+    entry.md
+    photo-1.jpg
+    photo-2.jpg
+    ...
+```
+
+Where `N` is the per-trip sequence number and `YYYY-MM-DD` comes from `created_at`.
+
+### Field mapping
+
+| Pixelfed field | Grav frontmatter field | Notes |
+|---|---|---|
+| `created_at` | `date` | ISO 8601 → `Y-m-d H:i` |
+| *(generated)* | `title` | `"Pixelfed Import {N}"` |
+| `place.name` | `location_city` | Empty string if `place` is null |
+| `place.country` | `location_country` | Empty string if `place` is null |
+| *(none)* | `lat`, `lng` | Always empty — no coordinate data in export |
+| *(none)* | `weather_temp_c`, `weather_desc` | Always empty |
+| first downloaded photo filename | `hero_image` | e.g. `photo-1.jpg` |
+| `content_text` | body | Already HTML-stripped in export |
+
+Fixed frontmatter values: `template: entry`, `published: true`.
+
+### Photo download
+
+For each item in `media_attachments`:
+- Download from `url` field
+- Save as `photo-{index}.jpg` (1-indexed) regardless of original filename
+- Use the extension from the `mime` field (`image/png` → `.png`, `image/jpeg` → `.jpg`)
+- Set `hero_image` in frontmatter to the filename of the first downloaded photo
+
+### Error handling
+
+- If a photo download fails, log a warning and continue (do not abort the post)
+- If the output folder already exists, skip that post (idempotent re-runs)
+
+### Make target
+
+```makefile
+pixelfed-import:
+	python3 scripts/pixelfed-import.py
+```
+
+---
+
+## File Map
+
+| File | Change |
+|---|---|
+| `user/docs/demo/trips/italy-2026-demo/` | New — copy of italy-2025 demo source with updated title/slug |
+| `user/pages/01.trips/italy-2026-demo/` | New — demo trip page tree |
+| `user/pages/01.trips/italy-2025/trip.md` | Update title to "Cycling Tuscany 2025" |
+| `user/pages/01.trips/italy-2025/04.stories/` | Remove 3 demo story subfolders |
+| `user/pages/01.trips/central-asia-2023/` | New — real trip page tree |
+| `user/pages/01.trips/us-canada-mex-2024/` | New — real trip page tree |
+| `Makefile` | Update demo-load / demo-reset targets |
+| `scripts/pixelfed-import.py` | New — one-time import script |
+
+---
+
+## Constraints
+
+- Never read `.env` directly
+- All CSS uses design tokens — script produces no CSS
+- Import script writes to `user/pages/` only; caller runs `make content-push` afterwards to commit and sync
+- The `italy-2025` trip must never appear in `demo-load` or `demo-reset` after this change

docs/working/specs/2026-06-20-ui-ux-alignment-design.md

@@ -0,0 +1,165 @@
+# UI/UX Alignment — Design Spec
+
+*2026-06-20*
+
+---
+
+## Goal
+
+Unify three disconnected micro-interaction patterns across the site:
+
+1. **Back navigation** — inconsistent style and position across story and entry pages
+2. **Card hover** — inconsistent lift behaviour and structural divergence across the three card types
+3. **Map flash** — no visual feedback after the feed scrolls to a marker-targeted card
+
+---
+
+## 1. Back pill system
+
+### Canonical pill component
+
+The site is dark-themed (`--color-paper: #1A1814`, `--color-ink: #EDE8DF` cream). Two visual variants of a single pill component, chosen by what is behind it:
+
+**Surface pill** (sits on the dark paper/canvas background):
+```css
+background: var(--color-canvas);
+border: 1px solid var(--color-border);
+color: var(--color-ink);
+border-radius: 9999px;
+padding: 0.4rem 0.9rem;
+font-size: var(--text-sm);
+font-weight: 500;
+text-decoration: none;
+transition: border-color 0.15s, color 0.15s;
+```
+Hover: `border-color: var(--color-accent); color: var(--color-accent)`
+
+**Overlay pill** (sits on top of a hero photo):
+```css
+background: rgba(0,0,0,0.6);
+backdrop-filter: blur(4px);
+color: var(--color-ink);
+border-radius: 9999px;
+padding: var(--space-2) var(--space-4);
+font-size: var(--text-sm);
+font-weight: 500;
+text-decoration: none;
+```
+Hover: `color: var(--color-accent)`
+
+The `.story-totop` button already matches the surface pill tokens (`--color-canvas` bg, `--color-border` border, `--color-ink` text) — it becomes part of this system without visual changes.
+
+### Pill inventory
+
+| Element | Page | Variant | Position | Notes |
+|---|---|---|---|---|
+| `.story-escape` | story | overlay | `fixed`, top-left | Overlays hero; keep as-is |
+| `← Back` in story body | story | surface | `static`, below-hero body section | Apply surface pill class |
+| Entry top back | entry | surface | `fixed`, `top: calc(var(--site-header-height) + var(--space-3))`, left | New element |
+| Entry footer back | entry | surface | `static`, in `.entry-footer` | Replaces current teal text link |
+| `.story-totop` | story | surface | `fixed`, bottom-right | Existing; bring into token system |
+
+### Shared behaviour
+
+All back pills use the same `onclick` pattern already present on `.story-escape`:
+```js
+onclick="if(history.length > 1){ history.back(); return false; }"
+```
+Fallback `href` is always `page.parent().url`.
+
+---
+
+## 2. Card hover unification
+
+### Structural fix — entry card markup
+
+Entry cards currently use a two-level structure (`<article>` wrapping `<a class="entry-card-inner">`), which causes the hover target to differ from trip and story cards. This diverges for no functional reason — `id` and `data-*` attributes are valid on `<a>` elements.
+
+**Before:**
+```html
+<article class="entry-card" id="entry-{{ entry.slug }}"
+         data-type="journal" data-lat="..." data-lng="...">
+    <a class="entry-card-inner" href="{{ entry.url }}">
+        ...
+    </a>
+</article>
+```
+
+**After:**
+```html
+<a class="entry-card" id="entry-{{ entry.slug }}"
+   data-type="journal" data-lat="..." data-lng="..."
+   href="{{ entry.url }}">
+    ...
+</a>
+```
+
+The class `.entry-card-inner` is eliminated. All CSS rules previously on `.entry-card-inner` move to `.entry-card`. The map's `document.getElementById('entry-' + slug)` continues to work unchanged.
+
+The story variant card in the trip feed (`entry-card--story`) follows the same structural change.
+
+### Hover pattern
+
+All three card root elements get a uniform background lift:
+
+```css
+.trip-card:hover,
+.entry-card:hover,
+.story-card:hover {
+    background: var(--color-surface-raised);
+}
+```
+
+Existing per-card effects are additive on top of the lift:
+- **Entry card**: photo zoom (`transform: scale(1.04)`) + title tint (`color: var(--color-accent)`) — keep
+- **Story card**: shadow (`box-shadow: var(--shadow-md)`) — keep
+- **Trip card**: border accent (`border-color: var(--color-accent)`) — keep
+
+Transition values align across all three cards: `transition: background 0.15s, border-color 0.15s`.
+
+---
+
+## 3. Map flash
+
+### Problem
+
+After clicking a marker on the trip page mini-map, `scrollIntoView({ behavior: 'smooth', block: 'center' })` scrolls the feed but provides no visual confirmation of which card arrived.
+
+### Solution
+
+A 700ms keyframe animation adds a faint teal wash to the targeted card, delayed 350ms after the click to let the scroll complete first.
+
+**CSS:**
+```css
+@keyframes card-highlight {
+    0%   { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+    100% { background-color: transparent; }
+}
+
+.entry-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+**JS (in `trip.html.twig`, marker click handler):**
+```js
+el.addEventListener('click', function () {
+    var card = document.getElementById('entry-' + entry.slug);
+    if (!card) return;
+    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    setTimeout(function () {
+        card.classList.add('is-highlighted');
+        setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+    }, 350);
+});
+```
+
+The `is-highlighted` class is removed after the animation so it can re-trigger on repeated clicks of the same marker.
+
+---
+
+## Out of scope
+
+- Semantics/accessibility audit of feed list containers and landmark roles (logged as backlog)
+- `<article>` element on full entry/story pages (logged as backlog)
+- `.story-totop` behaviour changes — visual tokens only

docs/working/specs/2026-06-21-documentation-restructure-design.md

@@ -0,0 +1,183 @@
+# Documentation Restructure — Design Spec
+
+**Date:** 2026-06-21
+**Scope:** Full restructure of `docs/` from organic flat layout to type-first hierarchy serving two personas: Mischa and Claude.
+
+---
+
+## Problem
+
+The `docs/` folder grew organically: milestone specs, design specs, plans, QA docs, research, and how-tos sit at the same level with no clear navigation. There is no operational how-to for posting, GPX management, or trip switching. CLAUDE.md contains setup and architecture detail that inflates its size and makes it harder to scan.
+
+---
+
+## Goals
+
+1. Two personas find what they need without searching: **Mischa** (poster, PM, designer, dev) and **Claude** (AI assistant).
+2. `guides/` is written for Mischa now but extensible to external users later (future: publish as a Grav CMS travel setup).
+3. CLAUDE.md stays lean — inline context only, no content duplicated from `docs/`.
+
+---
+
+## Folder Structure
+
+```
+docs/
+  guides/               ← operational how-tos; Mischa-facing; extensible to external users
+  reference/            ← stable facts: design system, architecture
+  working/              ← active project docs: specs, plans, QA, backlog, milestones
+    specs/
+    plans/
+    qa/
+    milestones/
+  research/             ← raw discovery input
+  README.md             ← navigation index
+```
+
+### Persona mapping
+
+| Persona | Primary sections |
+|---|---|
+| Mischa (operational) | `guides/` for how-tos; `working/` for PM status |
+| Mischa (design/dev) | `reference/` for design system + architecture |
+| Claude | `working/specs/` + `working/plans/` for active context; `reference/` for stable facts; `CLAUDE.md` for always-loaded project rules |
+
+---
+
+## File Migration
+
+### guides/ — new and extracted content
+
+| File | Source |
+|---|---|
+| `guides/posting.md` | new — end-to-end posting flow |
+| `guides/gpx-manager.md` | new — GPX upload/delete/slug/Komoot workaround |
+| `guides/trip-switching.md` | new — 3-file checklist, expanded |
+| `guides/local-setup.md` | extracted from CLAUDE.md §2 |
+
+### reference/ — moved and new
+
+| File | Source |
+|---|---|
+| `reference/design-system.md` | moved from `docs/design/design-spec.md` |
+| `reference/architecture.md` | new — stack, plugin roles, template hierarchy, post-submission data flow |
+
+### working/ — moved and renamed
+
+| New path | Current path |
+|---|---|
+| `working/specs/*` (13 files) | `docs/working/specs/*` |
+| `working/plans/*` (14 files) | `docs/working/plans/*` |
+| `working/milestones/milestone-1.md` | `docs/working/milestones/milestone-1.md` |
+| `working/milestones/milestone-2.md` | `docs/working/milestones/milestone-2.md` |
+| `working/milestones/milestone-3.md` | `docs/working/milestones/milestone-3.md` |
+| `working/milestones/milestone-4.md` | `docs/working/milestones/milestone-4.md` |
+| `working/backlog.md` | `docs/backlog.md` |
+| `working/production-todo.md` | `docs/production-todo.md` |
+| `working/pm-analysis.md` | `docs/pm-analysis.md` |
+| `working/qa/test-plan.md` | `docs/qa-test-plan.md` |
+| `working/qa/results.md` | `docs/qa-results.md` |
+| `working/bugs-and-fixes.md` | `docs/bugs-and-fixes.md` |
+| `working/summary.md` | `docs/summary.md` |
+
+### research/ — moved and renamed
+
+| New path | Current path |
+|---|---|
+| `research/polarsteps.md` | `docs/research-polarsteps.md` |
+| `research/findpenguins.md` | `docs/research-findpenguins.md` |
+| `research/story-editing.md` | `docs/research-story-editing.md` |
+
+---
+
+## New Content
+
+### guides/posting.md
+
+Covers: opening `/post`, all form fields (title, body, location, weather fetch, lat/lng, photos), what happens on submit (form plugin → add-page-by-form → cache-on-save), how to verify the entry appeared, common failure modes (cache not cleared, entry in wrong trip folder).
+
+### guides/gpx-manager.md
+
+Covers: logging in, upload flow, slug rules (spaces/special chars → hyphens, lowercase), how slugification works (client-side Blob trick), delete flow, how to bypass the UI (drop file into `user/pages/01.trips/<slug>/` + `make content-push`), Komoot manual export workaround (no API integration yet).
+
+### guides/trip-switching.md
+
+Covers: the 3-file checklist — `user/config/site.yaml` (`active_trip`), `user/pages/02.post/post-form.md` (`pageconfig.parent`) — why both must match, what breaks silently if they don't (entries post to wrong folder), and the new trip page tree to create under `user/pages/01.trips/<new-slug>/`.
+
+### guides/local-setup.md
+
+Covers: first-time setup after clone (`mkdir -p user/plugins user/data`, `make setup`), fix-perms after 500 errors, Grav 2.0 upgrade process (update Dockerfile URL + `make setup`), required system.yaml settings (`accounts.type: flex`, `pages.type: flex`), admin user API permissions, disabling old `admin` plugin, language URL prefix fix.
+
+### reference/architecture.md
+
+Covers:
+- **Stack**: Grav 2.0.0-rc.10 + Admin2, Docker image, PHP session config
+- **Plugin roles**: form (built-in) → add-page-by-form (third-party) → cache-on-save (custom); what each does in the post-submission pipeline
+- **Template hierarchy**: `base.html.twig` extended by all page templates; key templates: `trip.html.twig`, `entry.html.twig`, `map.html.twig`, `stats.html.twig`, `gpx-manager.html.twig`
+- **Data flow for a post**: form submit → page created in dailies folder → cache cleared → entry visible in feed
+- **GPX pipeline**: files on trip page media → picked up by `map.html.twig` via `trip_page.media.all` → rendered by MapLibre
+
+### docs/README.md
+
+```markdown
+# docs/
+
+## If you're Mischa
+- **Doing something?** → guides/
+- **Checking project status?** → working/backlog.md, working/production-todo.md
+- **Design or architecture decisions?** → reference/
+
+## If you're Claude
+- **Project rules + always-needed context** → CLAUDE.md (root)
+- **Active specs and plans** → working/specs/, working/plans/
+- **Stable facts** → reference/
+- **Raw research** → research/
+```
+
+---
+
+## CLAUDE.md Changes
+
+**Remove** (moves to `docs/`):
+- §2 local development setup → `docs/guides/local-setup.md`; replace with one-line pointer
+- Architecture/plugin detail → `docs/reference/architecture.md`; replace with one-line pointer
+
+**Add** (superpowers skill path overrides):
+
+```markdown
+### Superpowers skill paths
+Specs: `docs/working/specs/YYYY-MM-DD-<topic>-design.md`
+Plans: `docs/working/plans/YYYY-MM-DD-<topic>.md`
+```
+
+The brainstorming and writing-plans skills default to `docs/working/`; these lines override that default so generated files land in the right place automatically.
+
+**Keep inline** (always-loaded context Claude needs without following a link):
+- §0 project specifics (folder layout, stack versions, trip entity architecture, active trip, GPX pipeline, env rules, remote operations, content sync, gitignore)
+- §1 environment modes (dev vs. prod settings, cache-on-save behaviour)
+- Language URL prefix gotcha
+- Grav 2.0 config requirements (flex accounts/pages, admin user permissions)
+
+---
+
+## Out of Scope
+
+- End-user documentation (blog readers) — deferred until external publish decision
+- `user/docs/` folder — separate git repo; not restructured here
+- Memory files (`~/.claude/projects/*/memory/`) — not part of `docs/`; maintained separately
+- Design/UX wireframes — stay in existing spec files, not reorganized further
+
+---
+
+## Acceptance Criteria
+
+1. `docs/` contains exactly four subdirectories: `guides/`, `reference/`, `working/`, `research/`
+2. All 32+ existing files are moved to their new paths; no files remain at `docs/` root except `README.md`
+3. `docs/working/` no longer exists; content is under `working/`
+4. Four new guides exist and cover their stated scope
+5. `reference/architecture.md` exists and covers stack, plugin roles, template hierarchy, and post data flow
+6. `docs/README.md` exists with persona-based navigation
+7. CLAUDE.md no longer contains §2 local setup block; contains pointer to `docs/guides/local-setup.md`
+8. All internal cross-references in moved files updated to new paths
+9. Memory files that reference `docs/working/` paths updated to `docs/working/`
+10. CLAUDE.md contains superpowers skill path overrides pointing to `docs/working/specs/` and `docs/working/plans/`

docs/working/specs/2026-06-21-entry-enrichment-design.md

@@ -0,0 +1,102 @@
+# Entry Enrichment — Design Spec
+
+**Date:** 2026-06-21
+**Status:** Done
+
+## Overview
+
+Enrich all real trip journal entries with `location_city`, `location_country`, `lat`, `lng`, `weather_temp_c`, and `weather_desc` using an in-chat review workflow. One Markdown review doc per trip; Claude infers values, user corrects, Claude applies to YAML.
+
+---
+
+## Scope
+
+### What this covers
+
+- Filling in `location_city` and `location_country` where blank
+- Geocoding to `lat`/`lng` for all entries with a city
+- Approximate seasonal `weather_temp_c` and `weather_desc` for each entry date + location
+- Three real trips: `central-asia-2023`, `us-canada-mex-2024`, `italy-2025`
+
+### What this does not cover
+
+- Adding new journal entries (content creation)
+- Adding GPX tracks to central-asia or us-canada-mex
+- Historical weather API lookups (values are seasonal approximations, not exact)
+
+---
+
+## Review Document Format
+
+One file per trip at `docs/enrichment/{trip-slug}.md`.
+
+### Table columns
+
+| Column | Source | Notes |
+|---|---|---|
+| Entry | folder name | e.g. `2023-09-05-pixelfed-8.entry` |
+| Date | `date` frontmatter | `YYYY-MM-DD` |
+| Title | `title` frontmatter | Read-only reference |
+| City | inferred from title+body | Edit to correct |
+| Country | inferred from title+body | Edit to correct |
+| Lat | extracted from Map Link | Do not edit directly; update Map Link instead |
+| Lng | extracted from Map Link | Do not edit directly; update Map Link instead |
+| Map Link | OSM link `https://www.openstreetmap.org/#map=15/{lat}/{lng}` | Replace with corrected OSM or Google Maps link |
+| Temp °C | seasonal approximation | Edit directly if wrong |
+| Weather | seasonal approximation | Edit directly if wrong (e.g. `sunny`, `cloudy`, `rainy`) |
+
+### Coordinate extraction rules
+
+When reading back a reviewed doc, extract lat/lng from Map Link using these URL patterns:
+
+- **OSM:** `openstreetmap.org/#map={zoom}/{lat}/{lng}` → use the two numbers after `#map=N/`
+- **Google Maps:** `maps.google.com/.../@{lat},{lng},{zoom}z` or `maps.app.goo.gl/...` (follow redirect, then parse)
+
+If a cell has no Map Link (blank city), lat/lng are left empty.
+
+---
+
+## Inference Rules
+
+1. Read `title` first — most locations are explicit ("Poutine and French Echoes in Old Montreal").
+2. Fall back to body text if title is ambiguous.
+3. If neither title nor body reveals a location, leave City/Country blank and note it for manual fill.
+4. City = the specific city or town; Country = the country.
+
+---
+
+## Weather Approximation
+
+Fill `weather_temp_c` with a single integer (the approximate daytime high in °C for that city + month). Fill `weather_desc` with one word: `sunny`, `cloudy`, `partly cloudy`, `rainy`, `cold`, or `hot`. Based on known climate patterns — not historical API data.
+
+---
+
+## Application Step
+
+After user approves a reviewed doc, Claude:
+
+1. Re-reads the table row by row
+2. Extracts coordinates from Map Link (or leaves blank if no link)
+3. Updates the corresponding `entry.md` frontmatter fields in-place
+4. Reports a summary of changes made
+
+No scripts are written — changes are applied directly via Edit tool.
+
+---
+
+## Order of Execution
+
+1. `central-asia-2023` — 22 entries (generate doc → review → apply)
+2. `us-canada-mex-2024` — 12 entries (generate doc → review → apply)
+3. `italy-2025` — 2 entries (generate doc → review → apply)
+
+---
+
+## File Map
+
+| File | Change |
+|---|---|
+| `docs/enrichment/central-asia-2023.md` | New — review table, 22 rows |
+| `docs/enrichment/us-canada-mex-2024.md` | New — review table, 12 rows |
+| `docs/enrichment/italy-2025.md` | New — review table, 2 rows |
+| `user/pages/01.trips/*/01.dailies/*/entry.md` | Update 6 frontmatter fields per entry |

docs/working/specs/2026-06-21-homepage-redesign.md

@@ -0,0 +1,205 @@
+# Homepage Redesign Spec
+
+**Date:** 2026-06-21
+**Goal:** Make the homepage context-aware: a persistent two-column map+feed layout that switches its right column between an active-trip feed and a curated highlights grid depending on whether Mischa is currently travelling.
+
+---
+
+## 1. Mode switch
+
+A `travelling` toggle in `user/config/site.yaml` controls which mode the homepage renders. It is exposed in Admin2's Site Configuration panel via a new site config blueprint.
+
+| `travelling` | Homepage mode |
+|---|---|
+| `true` | Active trip — map + live feed |
+| `false` | Between trips — map + highlights grid |
+
+The `active_trip` value changes format: it now stores the full page route (`/trips/italy-2026-demo`) instead of the bare slug (`italy-2026-demo`), because it will be managed via a `type: pages` dropdown in Admin2 rather than a free-text field.
+
+---
+
+## 2. Data model changes
+
+### 2a. New file: `user/blueprints/config/site.yaml`
+
+Exposes site config fields in Admin2:
+
+```yaml
+active_trip:
+  type: pages
+  label: Active Trip
+  start_route: '/trips'
+  show_root: false
+  show_slug: true
+
+travelling:
+  type: toggle
+  label: Currently Travelling
+  highlight: 1
+  default: false
+```
+
+### 2b. `user/config/site.yaml` — value format update
+
+```yaml
+# Before
+active_trip: italy-2026-demo
+
+# After
+active_trip: /trips/italy-2026-demo
+travelling: false
+```
+
+### 2c. Trip page blueprint (`user/themes/intotheeast/blueprints/trip.yaml`)
+
+Add one field:
+
+```yaml
+tagline:
+  type: text
+  label: Tagline
+  help: Short description shown on homepage highlight cards (e.g. "6 weeks from Venice to Sicily by train")
+```
+
+### 2d. Entry blueprint (`user/themes/intotheeast/blueprints/entry.yaml`)
+
+Add one field:
+
+```yaml
+featured:
+  type: toggle
+  label: Featured highlight
+  help: Show this entry as a homepage highlight when not travelling
+  default: false
+```
+
+### 2e. Story blueprint (`user/themes/intotheeast/blueprints/story.yaml`)
+
+Add the same `featured` toggle (identical definition). Stories are not auto-included — they opt in the same way as journal entries.
+
+---
+
+## 3. Layout
+
+The two-column structure is always present regardless of mode.
+
+```
+┌────────────────────────┬────────────────────────────────┐
+│                        │                                │
+│   MapLibre map         │   Right column                 │
+│   (sticky,             │   (switches by mode)           │
+│   always visible)      │                                │
+│                        │                                │
+└────────────────────────┴────────────────────────────────┘
+```
+
+- Map: left column, ~45% width, `position: sticky; top: 0; height: 100vh`
+- Right column: ~55% width, scrollable
+- Mobile: map stacks on top at `40vh`, right column scrolls below
+
+---
+
+## 4. Active trip mode (`travelling: true`)
+
+### Right column
+
+Chronological feed, newest first. Merges journal entries and story cards from the active trip's `/dailies` and `/stories` sub-pages. This is the existing feed behaviour — no changes to card markup or order logic.
+
+Trip title and entry counts shown above the feed.
+
+### Map
+
+- Marker per journal entry with `lat`/`lng` in frontmatter
+- Journey line connecting markers in order
+- GPX route files loaded from the active trip page media (same pattern as `map.html.twig`, including the smart connector-suppression logic from the GPX connector spec)
+- Clicking a marker scrolls to that entry card in the feed
+
+### Template change (`home.html.twig`)
+
+The slug-based path construction is replaced with direct route usage:
+
+```twig
+{# Before #}
+{% set slug = config.site.active_trip %}
+{% set trip = grav.pages.find('/trips/' ~ slug) %}
+{% set dailies_page = grav.pages.find('/trips/' ~ slug ~ '/dailies') %}
+{% set stories_page = grav.pages.find('/trips/' ~ slug ~ '/stories') %}
+
+{# After #}
+{% set trip_route = config.site.active_trip %}
+{% set trip = grav.pages.find(trip_route) %}
+{% set dailies_page = grav.pages.find(trip_route ~ '/dailies') %}
+{% set stories_page = grav.pages.find(trip_route ~ '/stories') %}
+```
+
+---
+
+## 5. Between-trips mode (`travelling: false`)
+
+### Highlight selection logic
+
+1. Collect all published trip pages from `/trips`
+2. For each trip, collect all published children from `/dailies` and `/stories` where `featured: true`
+3. From each trip's candidates, pick one at random (`random()`)
+4. Gather the per-trip picks into a pool; if more than 6 trips have candidates, randomly discard down to 6
+5. Shuffle the final pool so cards appear in random order (not grouped by trip)
+
+### Right column
+
+A grid of highlight cards. Below the grid, a "Explore all past trips →" CTA linking to `/trips`.
+
+**Grid layout:** 3 columns on desktop, 2 on tablet, 1 on mobile.
+
+### Highlight card anatomy
+
+```
+┌──────────────────────────┐
+│  [hero image]            │
+├──────────────────────────┤
+│  ✦ Story  / ◎ Journal    │  ← type badge
+│  Entry title             │  ← links to entry page
+│  Italy 2025              │  ← trip title
+│  "tagline from trip"     │  ← trip tagline
+│  → View trip             │  ← links to trip page
+└──────────────────────────┘
+```
+
+- Hero image: `entry.media.images|first` if no `hero_image` frontmatter field; cropped to 16:9
+- Type badge: `✦ Story` (accent colour) or `◎ Journal` (muted)
+- Entry title: full clickable link to the entry URL
+- Trip title + tagline: small secondary text; trip title links to the trip page
+- "→ View trip": explicit CTA link to the trip page
+
+Cards with no hero image still render but without an image block.
+
+### Map
+
+- Marker per highlighted entry that has `lat`/`lng` in frontmatter
+- No journey line between markers (entries are from different trips)
+- No GPX data loaded
+- Map fits bounds across all markers; falls back to a world-level zoom if no entries have coordinates
+- Clicking a marker scrolls to that highlight card
+
+---
+
+## 6. Files changed
+
+| File | Change |
+|---|---|
+| `user/blueprints/config/site.yaml` | **Create** — exposes `active_trip` (pages) + `travelling` (toggle) in Admin2 |
+| `user/config/site.yaml` | **Update** — `active_trip` value to full route; add `travelling: false` |
+| `user/themes/intotheeast/blueprints/trip.yaml` | **Update** — add `tagline` text field |
+| `user/themes/intotheeast/blueprints/entry.yaml` | **Update** — add `featured` toggle |
+| `user/themes/intotheeast/blueprints/story.yaml` | **Update** — add `featured` toggle |
+| `user/themes/intotheeast/templates/home.html.twig` | **Update** — mode branch, route-based lookup, highlights logic, GPX loading |
+| `user/themes/intotheeast/css/style.css` | **Update** — highlight card styles, grid layout |
+
+No new plugins. No build pipeline. All changes in `user/`.
+
+---
+
+## 7. Constraints
+
+- `post-form.md` (`pageconfig.parent`) remains manually synced with `active_trip` — this is unchanged behaviour documented in CLAUDE.md
+- The `type: pages` field in Admin2 is confirmed present in the bundle but untested in a user site config blueprint; if it does not render, fall back to `type: select` with static trip slug options (one-minute fix, no other code changes needed)
+- Random selection uses Twig's `random()` — order varies per page load; this is intentional

docs/working/specs/2026-06-21-playwright-tests-design.md

@@ -0,0 +1,138 @@
+# Playwright Tests — Improvement & Expansion
+
+**Date:** 2026-06-21
+**Status:** Approved
+
+---
+
+## Goal
+
+Reorganise the flat `tests/ui/` directory into feature-scoped subdirectories, add a dedicated GPX Manager test suite (end-to-end), plug three gaps in the post form suite, and extend the axe accessibility scans to two new pages.
+
+---
+
+## Folder Structure
+
+Current flat layout becomes:
+
+```
+tests/
+  fixtures/
+    test-photo.jpg          (existing)
+    test-nonimage.txt       (existing)
+    test-route.gpx          (new — minimal valid GPX XML, ~200 bytes, one trackpoint)
+  ui/
+    auth/
+      auth.setup.js         (moved)
+      auth.spec.js          (moved)
+    post/
+      post.spec.js          (moved + P6-P8 added)
+      validation.spec.js    (moved)
+    gpx/
+      gpx-journey.spec.js   (moved)
+      gpx-manager.spec.js   (new)
+    maps/
+      maps.spec.js          (moved)
+    stories/
+      stories.spec.js       (moved)
+    dailies/
+      dailies.spec.js       (moved)
+    home/
+      home.spec.js          (moved)
+      home-highlights.spec.js (moved)
+    nav/
+      nav.spec.js           (moved)
+    trip/
+      trip-filter.spec.js   (moved)
+    a11y/
+      accessibility.spec.js (moved + AX6-AX7 added)
+    helpers.js              (stays at ui/ root — shared by all subdirs)
+  global-setup.js           (unchanged)
+```
+
+`playwright.config.js` requires no changes — `testDir: './tests/ui'` recurses automatically. The `auth.setup.js` `testMatch: /auth\.setup\.js/` resolves by filename regardless of depth.
+
+---
+
+## New Fixture: `test-route.gpx`
+
+Minimal valid GPX 1.1 file, one trackpoint. Accepted by Grav's media handler without triggering real GPX parsing in the app.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx version="1.1" creator="test" xmlns="http://www.topografix.com/GPX/1/1">
+  <trk><trkseg>
+    <trkpt lat="43.7696" lon="11.2558"><ele>50</ele></trkpt>
+  </trkseg></trk>
+</gpx>
+```
+
+---
+
+## New Tests: `gpx/gpx-manager.spec.js`
+
+All tests run against the live Grav API (end-to-end, no mocking).
+
+### Auth
+
+| ID | Description |
+|----|-------------|
+| GM1 | `/gpx-manager` with auth renders one `.gpx-trip` section per published trip |
+| GM2 | `/gpx-manager` without auth shows `#grav-login` inline login form (fresh context, no storageState) |
+
+### File Listing
+
+| ID | Description |
+|----|-------------|
+| GM3 | After the page loads, the file list for italy-2026-demo either shows a table or the "No GPX files." empty state — the `.gpx-loading` placeholder must not remain |
+
+### Upload
+
+| ID | Description |
+|----|-------------|
+| GM4 | Upload `test-route.gpx` to italy-2026-demo → filename `test-route.gpx` appears in the file list table |
+| GM5 | Upload a file with a non-slug name ("My Route 1.gpx", same buffer, fake name via `setInputFiles({ name, mimeType, buffer })`) → list shows `my-route-1.gpx` (slugified) |
+| GM6 | Submit the upload form without selecting a file → `.gpx-status` shows "Choose a file first." |
+
+### Delete
+
+| ID | Description |
+|----|-------------|
+| GM7 | After uploading `test-route.gpx`, click its Delete button, confirm the dialog → row disappears from the file list |
+
+### Cleanup
+
+`afterAll` reads `tests/.auth/user.json`, extracts the session cookie, and issues Node-level `fetch` `DELETE` calls to `/api/v1/pages/trips/italy-2026-demo/media/<filename>` for any fixture files that remain (guards against mid-test failures leaving orphaned files).
+
+---
+
+## Post Form Additions: `post/post.spec.js`
+
+Three new tests appended to the existing P1–P5 suite. P2 (photo upload) stays skipped.
+
+| ID | Description |
+|----|-------------|
+| P6 | Successful submit shows "Entry posted successfully!" text in the page (currently the test only waits for `.form-messages, .notices` without asserting content) |
+| P7 | Date field is pre-filled on page load with a timestamp within 5 minutes of `Date.now()` (blueprint `default: now`, format `Y-m-d H:i`) |
+| P8 | After a successful submit, title and content fields are empty (blueprint `reset: true` flushes the form) |
+
+---
+
+## Accessibility Additions: `a11y/accessibility.spec.js`
+
+Two new axe scans appended to the existing AX1–AX5 block.
+
+| ID | URL | Notes |
+|----|-----|-------|
+| AX6 | `/gpx-manager` | API mocked with `page.route()` so the file list renders without a real upload dependency |
+| AX7 | `/trips/italy-2026-demo/stories/val-dorcia-at-dawn` | Story page not yet covered by any axe scan |
+
+---
+
+## What Does Not Change
+
+- `playwright.config.js` — untouched
+- `tests/global-setup.js` — untouched
+- All existing test IDs (A1–A5, G1–G5, M1–M8, etc.) — test logic is unchanged; files are moved, not rewritten
+- P2 — stays skipped; photo upload path needs post-form improvements first
+- `helpers.js` — stays at `tests/ui/helpers.js`; import paths in moved specs update from `./helpers` to `../helpers`

docs/working/specs/2026-06-21-travel-memories-design.md

@@ -0,0 +1,321 @@
+# travel-memories — Design Spec
+
+**Date:** 2026-06-21
+**Status:** Draft
+
+## Overview
+
+`travel-memories` is a personal local web app for turning Immich photo albums into Grav CMS journal entries and story pages. It runs in Docker alongside the existing Grav dev environment, connects to an Immich instance on the local network, and guides the user through a six-phase workflow: select album → triage photos → curate selection → group into entries → write content → export to Grav. Progress is saved continuously so work can be paused and resumed at any stage.
+
+---
+
+## Scope
+
+### What this covers
+
+- Immich album browsing and photo selection (read-only access to Immich)
+- A structured six-phase workflow with pause/resume at any phase
+- Journal entries and story drafts output as Grav-compatible entry folders
+- Persistent state with hard-refresh safety
+- Back-navigation with stale warnings (no auto-deletion of downstream work)
+- A notes panel for capturing memories at any stage throughout the workflow
+- Playwright UI test suite covering all phases
+
+### What this does not cover
+
+- AI-assisted writing, title generation, or typo correction (post-export luxury step, separate tool)
+- Writing to Grav via the API — export writes files directly; `make content-push` handles sync as usual
+- Multi-user support
+- Mobile layout (desktop tool; tablet usable)
+- Any modification of Immich albums or assets
+
+---
+
+## Architecture
+
+### Docker
+
+New service added to `docker-compose.yml`:
+
+```yaml
+travel-memories:
+  build: ./services/travel-memories
+  ports:
+    - "8082:8082"
+  volumes:
+    - ./docs/immich-workflow:/app/state
+    - ./user/pages:/app/pages
+  env_file: .env
+  user: "${UID}:${GID}"
+```
+
+`UID` and `GID` must be set in the shell environment (or in a `.env` fragment) so the container user matches the host user — this prevents permission errors when writing into `user/pages/`.
+
+### Service source layout
+
+```
+services/travel-memories/
+  Dockerfile
+  requirements.txt
+  app/
+    __init__.py       ← Flask app factory
+    routes/
+      albums.py       ← Phase 1: album listing + selection
+      triage.py       ← Phase 2
+      curate.py       ← Phase 3
+      group.py        ← Phase 4
+      write.py        ← Phase 5
+      export.py       ← Phase 6
+      proxy.py        ← Immich photo proxy (thumbs + originals)
+      notes.py        ← Notes panel save endpoint
+    state.py          ← Atomic JSON read/write helpers
+    immich.py         ← Immich API client
+    templates/
+      base.html       ← DaisyUI shell, notes panel, nav
+      phase1.html
+      phase2.html
+      phase3.html
+      phase4.html
+      phase5.html
+      phase6.html
+    static/
+      app.js          ← Alpine.js component definitions
+```
+
+### Tech stack
+
+- **Backend:** Python 3.12 + Flask
+- **Frontend:** Tailwind CSS + DaisyUI + Alpine.js — all loaded from CDN, no build pipeline
+- **DaisyUI theme:** `forest` (closest to the blog's teal palette)
+- **State:** One JSON file per album at `/app/state/{album-id}.json` (maps to `docs/immich-workflow/` on host)
+- **Photo serving:** All Immich requests proxied through Flask — the Immich API key is never sent to the browser
+
+---
+
+## Immich API
+
+All requests use `Authorization: Bearer {IMMICH_API_KEY}` and base URL from `IMMICH_URL` env var.
+
+| Purpose | Method | Endpoint |
+|---|---|---|
+| List albums | GET | `/api/albums` |
+| Get album with assets | GET | `/api/albums/{id}?withoutAssets=false` |
+| Get asset metadata | GET | `/api/assets/{id}` |
+| Get thumbnail | GET | `/api/assets/{id}/thumbnail?size=preview` |
+| Download original | GET | `/api/assets/{id}/original` |
+
+> **Pre-implementation gate:** verify these endpoint paths against the running Immich instance before writing any code. Immich API paths have changed between versions.
+
+---
+
+## State model
+
+One JSON file per album. Written atomically: always written to `{file}.tmp` then `os.rename()` to prevent corruption from crashes.
+
+```json
+{
+  "album_id": "abc123",
+  "album_name": "Central Asia 2023",
+  "grav_trip_slug": "central-asia-2023",
+  "created_at": "2026-06-21T10:00:00",
+  "updated_at": "2026-06-21T14:32:00",
+  "phase": "group",
+  "phase_stale": ["write"],
+  "photos": [
+    {
+      "id": "asset-uuid",
+      "original_filename": "IMG_1234.jpg",
+      "local_datetime": "2023-09-05T14:32:00",
+      "tag": "journal",
+      "order": 3
+    }
+  ],
+  "groups": [
+    {
+      "id": "g1",
+      "photo_ids": ["asset-uuid", "asset-uuid-2"],
+      "entry_type": "journal",
+      "title": "",
+      "body": "",
+      "location_city": "",
+      "location_country": "",
+      "date": "2023-09-05",
+      "hero_photo_id": null,
+      "status": "draft"
+    }
+  ],
+  "notes": "Arrived in Almaty — chaos at the airport. Lost one bag. The smell of the market..."
+}
+```
+
+`status` values for a group: `draft`, `written`, `skipped`, `exported`. `exported` is immutable — never modified by upstream phase changes.
+
+---
+
+## Phases
+
+### Phase 1 — Album selection
+
+App fetches album list from Immich on load and displays them as cards (cover thumbnail, name, photo count). User selects one or more albums. Multi-select merges all assets into one workspace, deduplicated by asset ID. After selection the app fetches all asset metadata, initialises the state file, and advances to Phase 2.
+
+If the state file for this album already exists, the app offers to resume or start over. "Start over" deletes the existing state file and reinitialises from the album metadata — exported entry files on disk are not touched.
+
+### Phase 2 — Triage
+
+Photos displayed in a responsive grid, ordered by `localDateTime`, with sticky day-group headers. Each photo shows its thumbnail, date, and time.
+
+Click or keyboard to tag:
+- **J** → journal (green border)
+- **S** → story (blue border)
+- **X** or **space** → skip (dimmed)
+
+All photos must be tagged before "Done triaging" is enabled. Progress shown as a counter ("847 / 847 tagged").
+
+### Phase 3 — Curate
+
+Shows only journal- and story-tagged photos, in chronological order with day-group headers. Actions per photo: remove (revert to skip), swap tag (journal ↔ story). Drag to reorder within a day group. "Curate done" completes the phase.
+
+### Phase 4 — Group
+
+All kept photos shown as a flat chronological stream. User inserts **entry-break dividers** between photos to define group boundaries. Each resulting segment is one entry. Groups get an auto-suggested working label (`2023-09-05 · Journal`, editable). Split a group by adding a divider; merge by removing one. "Grouping done" completes the phase.
+
+### Phase 5 — Write
+
+One group at a time; progress indicator ("3 of 12 groups done"). The notes panel is shown inline alongside the form for this phase.
+
+**Layout:** photos (scrollable) on the left, form on the right.
+
+**Journal mode fields:** Title, Date (pre-filled from first photo), City, Country, Body (plain text).
+
+**Story mode adds:** Hero photo picker (click to select from group photos), Shortcode hints (optional free-text field for notes like "gallery block here" — written to the story body as an HTML comment block at export, not processed as actual shortcodes).
+
+"Skip for now" defers a group; it can be revisited. Every form change auto-saves to state (debounced 500ms). Phase complete when all groups are written or explicitly skipped.
+
+### Phase 6 — Export
+
+Summary view: N journal entries, M stories ready to export. Skipped groups shown in a collapsible list (not exported).
+
+"Export" downloads full-resolution originals from Immich and writes Grav-compatible folders under the mounted `user/pages/` volume.
+
+**Output paths:**
+- Journal: `user/pages/01.trips/{slug}/01.dailies/{YYYY-MM-DD}-{title-slug}.entry/`
+- Story: `user/pages/01.trips/{slug}/04.stories/{title-slug}.story/`
+
+**Entry file structure** (journal example):
+```
+2023-09-05-arrival-in-almaty.entry/
+  entry.md          ← frontmatter + body
+  photo-1.jpg
+  photo-2.jpg
+```
+
+**Frontmatter written (journal):**
+```yaml
+title: 'Arrival in Almaty'
+date: '2023-09-05 14:32'
+template: entry
+published: true
+location_city: 'Almaty'
+location_country: 'Kazakhstan'
+hero_image: photo-1.jpg
+```
+
+**Frontmatter written (story):**
+```yaml
+title: 'The Silk Road Begins'
+date: '2023-09-05 14:32'
+template: story
+published: true
+hero_image: photo-1.jpg
+```
+
+If a destination folder already exists, a per-entry overwrite prompt is shown before writing. After export, group status is set to `exported` in state. Exported entries are never touched by subsequent upstream changes.
+
+---
+
+## Notes panel
+
+A persistent drawer on the right side of every phase. Free-text, auto-saved (debounced 500ms) with a "Saved ✓" / "Saving…" indicator always visible.
+
+In Phase 5 (Write), the notes panel content is shown inline next to the active group's form as a memory aid.
+
+A "Convert to entry" action on any selected note text promotes it to a new group appended to the Phase 4 grouping and marks Phase 5 as stale. The user stays on the current phase — no automatic navigation.
+
+---
+
+## Back-navigation
+
+A phase nav bar is always visible. Clicking an earlier phase is always allowed.
+
+Going back to Phase N marks all completed phases above N as **stale**. Stale phases show a yellow warning banner: *"You changed earlier decisions — review this phase before exporting."*
+
+Stale does not delete content. The user re-confirms by redoing the phase or by dismissing the banner explicitly (which clears the stale flag without redoing the work).
+
+**Stale propagation:**
+
+| Navigate back to | Marks stale |
+|---|---|
+| Phase 2 (triage) | Phases 3, 4, 5 |
+| Phase 3 (curate) | Phases 4, 5 |
+| Phase 4 (group) | Phase 5 |
+| Phase 5 (write) | Nothing (export is always fresh) |
+
+Exported entries (`status: exported`) are never affected by stale propagation.
+
+---
+
+## Robustness constraints
+
+1. **Atomic writes** — state always written via `os.rename()` from a `.tmp` file; crash during write cannot corrupt existing state
+2. **Reload safety** — all authoritative state is server-side JSON; a hard browser refresh re-fetches from disk, nothing is lost
+3. **Photo proxy** — all Immich asset requests route through `/proxy/thumb/{id}` and `/proxy/original/{id}` on the Flask backend; the API key never reaches the browser
+4. **Docker UID/GID** — `user: "${UID}:${GID}"` in docker-compose ensures container writes are owned by the host user; without this, export writes fail or produce root-owned files
+5. **Immich unreachable** — album list and photo grid show an error banner with a retry button; the app does not crash or show a Python traceback
+6. **Download failure on export** — failed asset downloads are logged per-asset; export continues for remaining assets; post-export summary lists any failed assets
+7. **Export idempotency** — if a destination folder already exists, a per-entry overwrite prompt is shown; no silent overwrites
+8. **Notes auto-save** — debounced 500ms; "Saved ✓" indicator always visible; no save button needed
+9. **No cascade to exported entries** — `status: exported` is immutable in state; removing photos upstream or going back never modifies exported entry files or their state record
+
+---
+
+## Test strategy
+
+Playwright (Python API). Tests run against the containerised app. A lightweight mock Immich server (Flask or `pytest-httpserver`) serves pre-canned fixture responses — no real Immich instance required.
+
+One state fixture JSON per phase so individual phase tests do not require clicking through all earlier phases.
+
+**Coverage per phase:**
+
+| Phase | Tests |
+|---|---|
+| 1 — Album selection | Album list renders; single select initialises state; multi-select merges and deduplicates; resume prompt shown for existing state |
+| 2 — Triage | Photos render in day groups; J/S/X keyboard shortcuts apply correct tag; completion gate requires all photos tagged |
+| 3 — Curate | Only tagged photos shown; remove reverts to skip; drag reorder updates order in state |
+| 4 — Group | Divider inserts create new group; divider removal merges groups; label edit persists |
+| 5 — Write | Form auto-saves on change; notes panel saves; journal/story mode switch changes visible fields; skip-for-now defers group |
+| 6 — Export | Overwrite prompt shown for existing folder; skipped groups excluded; exported status set in state after write |
+| Cross-cutting | Hard refresh at each phase preserves state; back-nav stale banner appears; stale banner dismissal clears flag |
+
+---
+
+## New environment variables
+
+Add to `.env`:
+
+```
+IMMICH_URL=http://<nas-ip>:2283
+IMMICH_API_KEY=<your-key>
+```
+
+---
+
+## File map
+
+| Path | Action |
+|---|---|
+| `services/travel-memories/` | **Create** — Flask app source |
+| `services/travel-memories/Dockerfile` | **Create** |
+| `services/travel-memories/requirements.txt` | **Create** |
+| `docker-compose.yml` | **Update** — add `travel-memories` service |
+| `docs/immich-workflow/` | **Create** — state files per album (host-mounted); add `docs/immich-workflow/*.json` to `.gitignore` |
+| `.env` | **Update** — add `IMMICH_URL` and `IMMICH_API_KEY` |

docs/working/summary.md

@@ -0,0 +1,89 @@
+# Experimental Branch Summary
+
+*Branch: `experimental-polar-steps`. Ready for morning review.*
+
+---
+
+## What Was Done
+
+This branch researched Polarsteps and FindPenguins, distilled their best ideas for a solo travel blog on Grav CMS, planned four milestones, and implemented all four.
+
+---
+
+## What Was Built
+
+### Milestone 1 — Entry Enrichment
+- **Location badge** (`📍 City, Country`) on entry page and tracker feed cards
+- **Weather badge** (`⛅ Partly cloudy · 19°C`) on entry page header
+- **"Get Weather" button** on post form — auto-fetches via Open-Meteo (free, no key)
+- **Photo gallery** on entry pages — 2-col/3-col grid with full lightbox
+- **Hero image** on feed cards — falls back to first photo if no hero_image set
+- New post form fields: City, Country, weather auto-fill
+
+### Milestone 2 — Interactive Map (`/map`)
+- Leaflet.js with OpenStreetMap tiles
+- Marker per entry with GPS, route polyline in date order
+- Most recent entry highlighted
+- Click marker → popup with date, title, link to entry
+- Full-height map, mobile touch-friendly
+
+### Milestone 3 — Statistics Page (`/stats`)
+- Days on the road, entries posted, countries visited, distance traveled
+- Auto-updates as new entries are posted
+
+### Milestone 4 — Mini-map on Tracker Feed
+- Compact map above the entry list on /tracker
+- Tap marker → navigates to that entry
+- Hidden when no entries have GPS
+
+---
+
+## Navigation
+Three links in site header: **Journal · Map · Stats**
+
+---
+
+## Manual Verification Required on Mobile
+
+1. Upload photos → verify gallery grid + lightbox works
+2. Upload photo → verify hero image on feed card
+3. Open /post logged in → Get Location + Get Weather buttons work end-to-end
+4. Submit full entry → verify all badges appear
+5. Open /map on phone → pinch zoom (no page scroll behind map)
+6. Open /tracker → tap mini-map marker → navigates to entry
+7. Check browser console → no JS errors
+
+---
+
+---
+
+## UI Redesign (2026-06-18)
+
+Design direction: **Field Notes** — editorial travel journal aesthetic, not social app.
+
+- **Typography:** DM Serif Display (headings) + DM Sans (UI/body) — loaded via Google Fonts
+- **Accent color:** Deep teal `#1F6B5A` (replaces generic blue)
+- **Background:** Warm paper `#F7F5F2`
+- **Signature element:** Full-bleed 16:9 hero photos on feed cards with translucent date/location overlay
+- **Design tokens:** `user/themes/intotheeast/css/tokens.css` — single source of truth for all values
+- **Post form:** GPS lat/lng fields hidden from UI (filled by JS), cleaner status feedback
+- **Design spec:** `user/docs/design/design-spec.md`
+- **Implementation plan:** `docs/working/plans/2026-06-18-ui-redesign.md`
+
+---
+
+## Demo Content
+
+Seven sample entries for design/QA showcasing: feed, map route, stats, weather variety (including snow).
+
+```bash
+make demo-load   # copy entries into tracker, clear cache
+make demo-reset  # remove demo entries, clear cache
+```
+
+Full instructions: `user/docs/demo/README.md`
+
+---
+
+## What Was Skipped
+Background GPS tracking, social features, video reels, 3D flyover, printed books, AI itinerary builder — all require native apps or don't suit a solo personal blog. Full reasoning in `docs/working/pm-analysis.md`.

package-lock.json

@@ -0,0 +1,100 @@
+{
+  "name": "intotheeast-tests",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "intotheeast-tests",
+      "devDependencies": {
+        "@axe-core/playwright": "^4.11.3",
+        "@playwright/test": "^1.48.0"
+      }
+    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.3.tgz",
+      "integrity": "sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.11.4"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.61.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.0.tgz",
+      "integrity": "sha512-cKA5B6lpFEMyMGjxF54QihfYpB4FkEGH+qZhtArDEG+wezQAJY8Pq6C7T1SjWz+FFzt3TbyoXBQYk/0292TdJA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.4.tgz",
+      "integrity": "sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.61.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.0.tgz",
+      "integrity": "sha512-Z+7BeeqQPRRzklHsVFP4KTGIyMxKUmfeRA4WisM6G3/XW6nwGeX6fX9qYaDa+CiUqpOkb2f6X3nar05R3kSuJQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.0.tgz",
+      "integrity": "sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "intotheeast-tests",
+  "private": true,
+  "scripts": {
+    "test:ui": "playwright test"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
+    "@playwright/test": "^1.48.0"
+  }
+}

php/php-local.ini

@@ -0,0 +1,5 @@
+; Custom PHP settings for intotheeast Grav site
+upload_max_filesize = 100M
+post_max_size = 500M
+max_file_uploads = 20
+session.save_path = /tmp

playwright.config.js

@@ -0,0 +1,27 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+module.exports = defineConfig({
+    testDir: './tests/ui',
+    globalSetup: './tests/global-setup.js',
+    timeout: 30_000,
+    retries: 0,
+    projects: [
+        { name: 'setup', testMatch: /auth\.setup\.js/ },
+        {
+            name: 'chromium',
+            use: {
+                ...devices['Desktop Chrome'],
+                storageState: 'tests/.auth/user.json',
+            },
+            dependencies: ['setup'],
+        },
+    ],
+    use: {
+        baseURL: process.env.GRAV_BASE_URL || 'http://localhost:8081',
+        headless: true,
+        screenshot: 'only-on-failure',
+        video: 'off',
+    },
+    reporter: [['line']],
+});

plugins.txt

@@ -1,6 +1,7 @@
-admin
 email
 error
 form
 login
 problems
+add-page-by-form
+shortcode-gallery-plusplus

scripts/pixelfed-import.py

@@ -0,0 +1,107 @@
+#!/usr/bin/env python3
+"""One-time import of Pixelfed statuses into Grav entry pages."""
+
+import json
+import os
+import urllib.request
+from datetime import datetime
+
+INPUT_FILE = os.environ.get('PIXELFED_JSON', '/tmp/pixelfed-statuses.json')
+USER_PAGES = 'user/pages/01.trips'
+
+TRIP_MAP = {
+    '2023': 'central-asia-2023',
+    '2024': 'us-canada-mex-2024',
+    '2025': 'italy-2025',
+}
+
+EXT_MAP = {
+    'image/jpeg': 'jpg',
+    'image/png':  'png',
+    'image/gif':  'gif',
+    'image/webp': 'webp',
+}
+
+ENTRY_TEMPLATE = """\
+---
+title: '{title}'
+date: '{date}'
+template: entry
+published: true
+hero_image: '{hero_image}'
+lat: ''
+lng: ''
+location_city: '{location_city}'
+location_country: '{location_country}'
+weather_temp_c: ''
+weather_desc: ''
+---
+
+{body}
+"""
+
+
+def download(url, dest):
+    try:
+        urllib.request.urlretrieve(url, dest)
+        return True
+    except Exception as exc:
+        print(f'  Warning: download failed {url}: {exc}')
+        return False
+
+
+def main():
+    with open(INPUT_FILE) as f:
+        posts = json.load(f)
+
+    counters = {}
+
+    for post in posts:
+        year = post['created_at'][:4]
+        trip = TRIP_MAP.get(year)
+        if not trip:
+            print(f"Skip: no trip mapping for year {year} (post {post['id']})")
+            continue
+
+        counters[trip] = counters.get(trip, 0) + 1
+        n = counters[trip]
+
+        date_str = post['created_at'][:10]  # YYYY-MM-DD
+        folder = f'{date_str}-pixelfed-{n}.entry'
+        path = os.path.join(USER_PAGES, trip, '01.dailies', folder)
+
+        if os.path.exists(path):
+            print(f'Skip: {folder} already exists')
+            continue
+
+        os.makedirs(path)
+        print(f'Creating {trip}/{folder}')
+
+        hero_image = ''
+        for i, att in enumerate(post.get('media_attachments', []), 1):
+            ext = EXT_MAP.get(att.get('mime', ''), 'jpg')
+            filename = f'photo-{i}.{ext}'
+            if download(att['url'], os.path.join(path, filename)) and i == 1:
+                hero_image = filename
+
+        place = post.get('place') or {}
+        dt = datetime.fromisoformat(post['created_at'].replace('Z', '+00:00'))
+        date_fmt = dt.strftime('%Y-%m-%d %H:%M')
+
+        entry_md = ENTRY_TEMPLATE.format(
+            title=f'Pixelfed Import {n}',
+            date=date_fmt,
+            hero_image=hero_image,
+            location_city=place.get('name', ''),
+            location_country=place.get('country', ''),
+            body=post.get('content_text', '').strip(),
+        )
+
+        with open(os.path.join(path, 'entry.md'), 'w') as f:
+            f.write(entry_md)
+
+    print(f'\nDone. Posts per trip: {counters}')
+
+
+if __name__ == '__main__':
+    main()

scripts/server-install.sh

@@ -19,9 +19,11 @@ chmod 600 ~/.netrc
 
 echo "==> Downloading Grav $GRAV_VERSION"
 cd "$WEBROOT"
-wget --no-verbose "https://getgrav.org/download/core/grav-admin/$GRAV_VERSION" -O grav-admin.zip
+wget --no-verbose "https://github.com/getgrav/grav/releases/download/${GRAV_VERSION}/grav-admin-v${GRAV_VERSION}.zip" -O grav-admin.zip
 unzip -oq grav-admin.zip
 cp -rf grav-admin/. .
+cp -rf grav-admin/user/plugins/admin2 /tmp/admin2-plugin
+cp -rf grav-admin/user/plugins/api /tmp/api-plugin
 rm -rf grav-admin grav-admin.zip
 
 echo "==> Cloning user repo"
@@ -38,6 +40,9 @@ fi
 
 echo "==> Creating required directories"
 mkdir -p user/plugins user/accounts user/data
+cp -rf /tmp/admin2-plugin user/plugins/admin2
+cp -rf /tmp/api-plugin user/plugins/api
+rm -rf /tmp/admin2-plugin /tmp/api-plugin
 
 echo "==> Installing plugins"
 php bin/gpm install $PLUGINS -y

scripts/test-form-config.sh

@@ -0,0 +1,56 @@
+#!/usr/bin/env bash
+# Validates that post-form.md is wired correctly for the add-page-by-form plugin.
+# Fast, no server needed. Catches the class of bug that caused silent post failures.
+set -euo pipefail
+
+FORM="user/pages/02.post/post-form.md"
+PASS=0
+FAIL=0
+ERRORS=()
+
+ok()   { echo "  ✓ $1"; PASS=$((PASS+1)); }
+fail() { echo "  ✗ $1"; FAIL=$((FAIL+1)); ERRORS+=("$1"); }
+
+check_grep() {
+    local desc="$1"; local pattern="$2"
+    if grep -q "$pattern" "$FORM"; then ok "$desc"; else fail "$desc"; fi
+}
+
+echo ""
+echo "Form config validator — $FORM"
+echo "────────────────────────────────────────"
+
+# Plugin trigger: must use add_page or addpage — NOT add-page-by-form
+grep -q "add_page:\|addpage:" "$FORM" && ok "Process action is 'add_page' (plugin trigger)" \
+    || fail "Process action must be 'add_page: true' — 'add-page-by-form' is not handled by the plugin"
+
+# Config must be in frontmatter, not in the process block
+check_grep "pageconfig block exists in frontmatter"       "^pageconfig:"
+check_grep "parent set to /trips/japan-korea-2026/dailies" "parent: '/trips/japan-korea-2026/dailies'"
+check_grep "slug_field set (determines entry folder name)" "slug_field:"
+check_grep "pagefrontmatter block exists in frontmatter"  "^pagefrontmatter:"
+check_grep "template: entry (creates entry.md filename)"  "template: entry"
+
+# Form name must stay 'new-entry' — cache-on-save plugin checks this exact string
+check_grep "form name is 'new-entry' (required by cache-on-save plugin)" "name: new-entry"
+
+# Required form fields
+check_grep "title field present"          "name: title"
+check_grep "date field present"           "name: date"
+check_grep "content field present"        "name: content"
+check_grep "lat field present"            "name: lat"
+check_grep "lng field present"            "name: lng"
+check_grep "location_city field present"  "name: location_city"
+check_grep "location_country field present" "name: location_country"
+
+echo "────────────────────────────────────────"
+echo "  $PASS passed, $FAIL failed"
+
+if [ ${#ERRORS[@]} -gt 0 ]; then
+    echo ""
+    echo "Failed checks:"
+    for e in "${ERRORS[@]}"; do echo "  → $e"; done
+    echo ""
+    exit 1
+fi
+echo ""

scripts/test-post.sh

@@ -0,0 +1,124 @@
+#!/usr/bin/env bash
+# End-to-end test: logs in, submits the post form, verifies entry is created on disk.
+# Requires GRAV_TEST_USER and GRAV_TEST_PASS (set in .env or environment).
+# Cleans up the test entry after the test.
+set -euo pipefail
+
+BASE_URL="${GRAV_BASE_URL:-http://localhost:8081}"
+USER="${GRAV_TEST_USER:-}"
+PASS="${GRAV_TEST_PASS:-}"
+TRACKER="user/pages/01.trips/japan-korea-2026/01.dailies"
+COOKIE_JAR="$(mktemp /tmp/grav-test-cookies.XXXXXX)"
+PASS_COUNT=0
+FAIL_COUNT=0
+TEST_SLUG=""
+
+cleanup() {
+    rm -f "$COOKIE_JAR"
+    if [ -n "$TEST_SLUG" ] && [ -d "$TRACKER/$TEST_SLUG" ]; then
+        # Entry files are created by www-data inside Docker; use docker exec to remove
+        if docker exec intotheeast_grav rm -rf "/var/www/html/$TRACKER/$TEST_SLUG" 2>/dev/null; then
+            echo "  [cleanup] Removed test entry: $TEST_SLUG"
+        else
+            rm -rf "$TRACKER/$TEST_SLUG" 2>/dev/null || \
+                echo "  [cleanup] Warning: could not remove $TEST_SLUG (permission denied — remove manually)"
+        fi
+    fi
+}
+trap cleanup EXIT
+
+ok()   { echo "  ✓ $1"; PASS_COUNT=$((PASS_COUNT+1)); }
+fail() { echo "  ✗ $1"; FAIL_COUNT=$((FAIL_COUNT+1)); }
+die()  { echo ""; echo "FATAL: $1"; exit 1; }
+
+echo ""
+echo "Post form integration test — $BASE_URL"
+echo "────────────────────────────────────────"
+
+[ -n "$USER" ] || die "GRAV_TEST_USER not set. Add it to .env"
+[ -n "$PASS" ] || die "GRAV_TEST_PASS not set. Add it to .env"
+
+# ── Step 1: get login page + nonce ───────────────────────────────────────────
+LOGIN_HTML=$(curl -sf -c "$COOKIE_JAR" -b "$COOKIE_JAR" "$BASE_URL/login") \
+    || die "Could not reach $BASE_URL/login"
+
+LOGIN_NONCE=$(echo "$LOGIN_HTML" | grep -o 'name="login-form-nonce" value="[^"]*"' | head -1 | sed 's/.*value="\([^"]*\)".*/\1/')
+[ -n "$LOGIN_NONCE" ] || die "Could not extract login form nonce — is the site running?"
+
+# ── Step 2: log in ───────────────────────────────────────────────────────────
+LOGIN_STATUS=$(curl -sf -o /dev/null -w "%{http_code}" \
+    -c "$COOKIE_JAR" -b "$COOKIE_JAR" \
+    -L \
+    -d "username=${USER}&password=${PASS}&login-form-nonce=${LOGIN_NONCE}&task=login.login" \
+    "$BASE_URL/login")
+
+# After login, fetch /post and verify we see the post form (not the login form)
+# /post returns 200 for both auth and unauth users — check for form-nonce to confirm login
+POST_CHECK_HTML=$(curl -sf -c "$COOKIE_JAR" -b "$COOKIE_JAR" "$BASE_URL/post") \
+    || die "Could not reach $BASE_URL/post"
+
+POST_STATUS=$(echo "$POST_CHECK_HTML" | grep -c 'name="form-nonce"' || true)
+[ "$POST_STATUS" -gt 0 ] && ok "Login succeeded and /post is accessible" \
+    || die "Login failed (post form not visible) — check GRAV_TEST_USER / GRAV_TEST_PASS"
+
+# ── Step 3: extract post form nonce from already-fetched HTML ────────────────
+POST_HTML="$POST_CHECK_HTML"
+
+POST_NONCE=$(echo "$POST_HTML" | grep -o 'name="form-nonce" value="[^"]*"' | head -1 | sed 's/.*value="\([^"]*\)".*/\1/')
+[ -n "$POST_NONCE" ] || die "Could not extract post form nonce"
+ok "Post form loaded and nonce extracted"
+
+# ── Step 4: submit test entry ────────────────────────────────────────────────
+TEST_TITLE="Automated Test Entry"
+TEST_DATE=$(date "+%Y-%m-%d %H:%M")
+TEST_SLUG_EXPECTED=$(date "+%Y-%m-%d-%H%M")-automated-test-entry
+
+SUBMIT_BODY=$(curl -sf \
+    -c "$COOKIE_JAR" -b "$COOKIE_JAR" \
+    -d "data[title]=${TEST_TITLE}" \
+    -d "data[date]=${TEST_DATE}" \
+    -d "data[content]=This+is+an+automated+test+entry.+Safe+to+delete." \
+    -d "data[location_city]=Test+City" \
+    -d "data[location_country]=Test+Country" \
+    -d "form-nonce=${POST_NONCE}" \
+    -d "task=process" \
+    "$BASE_URL/post")
+
+ok "Form submitted"
+
+# ── Step 5: verify entry exists on disk ─────────────────────────────────────
+sleep 1  # give Grav a moment to write the file
+
+# Find an entry containing the test title — search all .md and .en.md files
+# add-page-by-form may produce date-based slugs in various formats
+ENTRY_FILE=$(grep -rl "$TEST_TITLE" "$TRACKER" --include="*.md" 2>/dev/null | head -1)
+
+if [ -n "$ENTRY_FILE" ]; then
+    TEST_SLUG=$(basename "$(dirname "$ENTRY_FILE")")
+    ok "Entry created on disk: $TEST_SLUG"
+
+    # Verify file name is entry.md or entry.en.md (template-named file)
+    ENTRY_BASENAME=$(basename "$ENTRY_FILE")
+    if [ "$ENTRY_BASENAME" = "entry.md" ] || [ "$ENTRY_BASENAME" = "entry.en.md" ]; then
+        ok "Entry file exists: $ENTRY_BASENAME"
+    else
+        fail "Entry file has unexpected name: $ENTRY_BASENAME (expected entry.md or entry.en.md)"
+    fi
+
+    # Verify the title is in the frontmatter
+    if grep -q "$TEST_TITLE" "$ENTRY_FILE"; then
+        ok "Title appears in entry frontmatter"
+    else
+        fail "Title not found in $ENTRY_BASENAME — frontmatter may be malformed"
+    fi
+else
+    fail "No entry created on disk — form processing failed silently"
+    echo "    Searched $TRACKER for files containing: $TEST_TITLE"
+fi
+
+# ── Result ───────────────────────────────────────────────────────────────────
+echo "────────────────────────────────────────"
+echo "  $PASS_COUNT passed, $FAIL_COUNT failed"
+echo ""
+
+[ $FAIL_COUNT -eq 0 ]

services/travel-memories/.gitignore

@@ -0,0 +1,4 @@
+__pycache__/
+*.py[cod]
+.venv/
+.pytest_cache/

services/travel-memories/Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.12-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt && \
+    playwright install chromium --with-deps
+COPY app/ ./app/
+ENV FLASK_APP=app
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=8082
+CMD ["flask", "run"]

services/travel-memories/app/__init__.py

@@ -0,0 +1,21 @@
+import os
+from flask import Flask
+
+def create_app(state_dir=None, pages_dir=None):
+    app = Flask(__name__)
+    app.config["STATE_DIR"] = state_dir or os.environ.get("STATE_DIR", "/app/state")
+    app.config["PAGES_DIR"] = pages_dir or os.environ.get("PAGES_DIR", "/app/pages")
+    app.config["IMMICH_URL"] = os.environ.get("IMMICH_URL", "")
+    app.config["IMMICH_API_KEY"] = os.environ.get("IMMICH_API_KEY", "")
+
+    from .routes import albums, proxy, notes, nav
+    app.register_blueprint(albums.bp)
+    app.register_blueprint(proxy.bp)
+    app.register_blueprint(notes.bp)
+    app.register_blueprint(nav.bp)
+
+    @app.get("/health")
+    def health():
+        return {"ok": True}
+
+    return app

services/travel-memories/app/immich.py

@@ -0,0 +1,30 @@
+import requests
+
+
+class ImmichClient:
+    def __init__(self, base_url: str, api_key: str):
+        self.base_url = base_url.rstrip("/")
+        self.headers = {"Authorization": f"Bearer {api_key}"}
+
+    def _get(self, path: str, **kwargs):
+        try:
+            r = requests.get(f"{self.base_url}{path}",
+                             headers=self.headers, timeout=10, **kwargs)
+            r.raise_for_status()
+            return r
+        except requests.exceptions.ConnectionError as e:
+            raise ConnectionError(f"Cannot reach Immich: {e}") from e
+
+    def list_albums(self) -> list:
+        return self._get("/api/albums").json()
+
+    def get_album(self, album_id: str) -> dict:
+        return self._get(f"/api/albums/{album_id}",
+                         params={"withoutAssets": "false"}).json()
+
+    def get_thumbnail(self, asset_id: str) -> bytes:
+        return self._get(f"/api/assets/{asset_id}/thumbnail",
+                         params={"size": "preview"}).content
+
+    def get_original(self, asset_id: str) -> bytes:
+        return self._get(f"/api/assets/{asset_id}/original").content

services/travel-memories/app/routes/albums.py

@@ -0,0 +1,91 @@
+from pathlib import Path
+
+from flask import Blueprint, current_app, redirect, render_template, request
+from app.immich import ImmichClient
+from app.state import TripState, Photo, load_state, save_state
+
+bp = Blueprint("albums", __name__)
+
+
+def _client():
+    return ImmichClient(current_app.config["IMMICH_URL"],
+                        current_app.config["IMMICH_API_KEY"])
+
+
+@bp.get("/")
+def index():
+    try:
+        albums = _client().list_albums()
+        error = None
+    except ConnectionError as e:
+        albums = []
+        error = str(e)
+    state_dir = Path(current_app.config["STATE_DIR"])
+    for album in albums:
+        album["has_state"] = (state_dir / f"{album['id']}.json").exists()
+    return render_template("phase1.html", albums=albums, error=error,
+                           current_phase="", album_id=None,
+                           phase_stale=[], notes_content="")
+
+
+@bp.post("/select")
+def select():
+    album_ids = request.form.getlist("album_ids[]")
+    grav_trip_slug = request.form["grav_trip_slug"].strip()
+    start_over = request.form.get("start_over") == "1"
+
+    if len(album_ids) == 1:
+        primary_id = album_ids[0]
+    else:
+        primary_id = "__merged__" + "_".join(sorted(album_ids))
+
+    existing = load_state(primary_id, current_app)
+    if existing and not start_over:
+        return redirect(f"/{existing.phase}?album_id={primary_id}")
+
+    # Fetch and merge assets, deduplicating by asset ID
+    all_assets = {}
+    album_name_parts = []
+    for aid in album_ids:
+        album = _client().get_album(aid)
+        album_name_parts.append(album["albumName"])
+        for asset in album["assets"]:
+            if asset["id"] not in all_assets:
+                all_assets[asset["id"]] = asset
+
+    photos = [
+        Photo(id=a["id"], original_filename=a["originalFileName"],
+              local_datetime=a["localDateTime"])
+        for a in sorted(all_assets.values(), key=lambda x: x["localDateTime"])
+    ]
+    for i, p in enumerate(photos):
+        p.order = i
+
+    state = TripState(
+        album_id=primary_id,
+        album_name=", ".join(album_name_parts),
+        grav_trip_slug=grav_trip_slug,
+        photos=photos,
+    )
+    save_state(state, current_app)
+    return redirect(f"/triage?album_id={primary_id}")
+
+
+# TODO(task-6): replace this stub with the real triage route
+@bp.get("/triage")
+def triage():
+    album_id = request.args.get("album_id", "")
+    notes_content = ""
+    phase_stale = []
+    if album_id:
+        state = load_state(album_id, current_app)
+        if state:
+            notes_content = state.notes
+            phase_stale = state.phase_stale
+    return render_template(
+        "base.html",
+        current_phase="triage",
+        album_id=album_id,
+        notes_content=notes_content,
+        phase_stale=phase_stale,
+    )

services/travel-memories/app/routes/nav.py

@@ -0,0 +1,51 @@
+from flask import Blueprint, current_app, jsonify, redirect, request
+from app.state import load_state, save_state
+
+bp = Blueprint("nav", __name__)
+
+STALE_DOWNSTREAM = {
+    "triage": ["curate", "group", "write"],
+    "curate": ["group", "write"],
+    "group": ["write"],
+    "write": [],
+    "export": [],
+}
+
+
+@bp.post("/nav/phase")
+def goto_phase():
+    body = request.get_json()
+    target = body["target_phase"]
+    state = load_state(body["album_id"], current_app)
+    if state is None:
+        return jsonify({"error": "no state"}), 404
+
+    # Mark downstream completed phases and the current phase as stale
+    downstream = STALE_DOWNSTREAM.get(target, [])
+    candidates = set(downstream) & (set(state.phases_completed) | {state.phase})
+    newly_stale = [p for p in candidates if p not in state.phase_stale]
+    state.phase_stale = list(set(state.phase_stale + newly_stale))
+    state.phase = target
+    save_state(state, current_app)
+    return jsonify({"ok": True, "phase": target})
+
+
+@bp.post("/nav/dismiss-stale")
+def dismiss_stale():
+    album_id = request.form["album_id"]
+    phase = request.form["phase"]
+    state = load_state(album_id, current_app)
+    if state:
+        state.phase_stale = [p for p in state.phase_stale if p != phase]
+        save_state(state, current_app)
+    return redirect(f"/{phase}?album_id={album_id}")
+
+
+@bp.get("/state/<album_id>")
+def get_state(album_id):
+    """Debug/test endpoint — returns full state JSON."""
+    state = load_state(album_id, current_app)
+    if state is None:
+        return jsonify({"error": "no state"}), 404
+    from dataclasses import asdict
+    return jsonify(asdict(state))

services/travel-memories/app/routes/notes.py

@@ -0,0 +1,23 @@
+from flask import Blueprint, current_app, jsonify, request
+from app.state import load_state, save_state
+
+bp = Blueprint("notes", __name__)
+
+
+@bp.post("/notes/save")
+def save_notes():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    if state is None:
+        return jsonify({"error": "no state"}), 404
+    state.notes = body["notes"]
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.get("/notes/<album_id>")
+def get_notes(album_id):
+    state = load_state(album_id, current_app)
+    if state is None:
+        return jsonify({"error": "no state"}), 404
+    return jsonify({"notes": state.notes})

services/travel-memories/app/routes/proxy.py

@@ -0,0 +1,29 @@
+from flask import Blueprint, current_app, Response, abort
+from app.immich import ImmichClient
+
+bp = Blueprint("proxy", __name__)
+
+
+def _client() -> ImmichClient:
+    return ImmichClient(
+        base_url=current_app.config["IMMICH_URL"],
+        api_key=current_app.config["IMMICH_API_KEY"],
+    )
+
+
+@bp.get("/proxy/thumb/<asset_id>")
+def thumb(asset_id):
+    try:
+        data = _client().get_thumbnail(asset_id)
+    except ConnectionError:
+        abort(502)
+    return Response(data, content_type="image/jpeg")
+
+
+@bp.get("/proxy/original/<asset_id>")
+def original(asset_id):
+    try:
+        data = _client().get_original(asset_id)
+    except ConnectionError:
+        abort(502)
+    return Response(data, content_type="image/jpeg")

services/travel-memories/app/state.py

@@ -0,0 +1,68 @@
+import json
+import os
+from dataclasses import dataclass, field, asdict
+from pathlib import Path
+from typing import Optional
+
+from flask import current_app
+
+
+@dataclass
+class Photo:
+    id: str
+    original_filename: str
+    local_datetime: str
+    tag: str = "untagged"   # untagged | journal | story | skip
+    order: int = 0
+
+
+@dataclass
+class Group:
+    id: str
+    photo_ids: list = field(default_factory=list)
+    entry_type: str = "journal"   # journal | story
+    title: str = ""
+    body: str = ""
+    location_city: str = ""
+    location_country: str = ""
+    date: str = ""
+    hero_photo_id: Optional[str] = None
+    shortcode_hints: str = ""
+    status: str = "draft"   # draft | written | skipped | exported
+
+
+@dataclass
+class TripState:
+    album_id: str
+    album_name: str
+    grav_trip_slug: str
+    phase: str = "triage"
+    phases_completed: list = field(default_factory=list)
+    phase_stale: list = field(default_factory=list)
+    photos: list = field(default_factory=list)
+    groups: list = field(default_factory=list)
+    notes: str = ""
+
+
+def _state_path(album_id: str, app) -> Path:
+    return Path(app.config["STATE_DIR"]) / f"{album_id}.json"
+
+
+def load_state(album_id: str, app) -> Optional[TripState]:
+    path = _state_path(album_id, app)
+    if not path.exists():
+        return None
+    with open(path) as f:
+        data = json.load(f)
+    photos = [Photo(**p) for p in data.pop("photos", [])]
+    groups = [Group(**g) for g in data.pop("groups", [])]
+    return TripState(photos=photos, groups=groups, **data)
+
+
+def save_state(state: TripState, app) -> None:
+    path = _state_path(state.album_id, app)
+    path.parent.mkdir(parents=True, exist_ok=True)
+    tmp = path.with_suffix(".tmp")
+    with open(tmp, "w") as f:
+        json.dump(asdict(state), f, indent=2)
+    os.rename(tmp, path)

services/travel-memories/app/static/app.js

@@ -0,0 +1,34 @@
+function notesApp(initialNotes, albumId) {
+  return {
+    open: false,
+    notes: initialNotes,
+    status: '',
+    saveTimer: null,
+
+    scheduleAutosave() {
+      clearTimeout(this.saveTimer);
+      this.status = 'Saving…';
+      this.saveTimer = setTimeout(() => this.doSave(), 500);
+    },
+
+    async doSave() {
+      const res = await fetch('/notes/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ album_id: albumId, notes: this.notes }),
+      });
+      this.status = res.ok ? 'Saved ✓' : 'Error';
+    },
+
+    async convertToEntry(text) {
+      const res = await fetch('/group/from-note', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ album_id: albumId, text }),
+      });
+      if (res.ok) {
+        this.status = 'Added as entry ✓';
+      }
+    },
+  };
+}

services/travel-memories/app/templates/base.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html data-theme="forest" lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>travel-memories</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
+</head>
+<body class="min-h-screen bg-base-200" x-data="notesApp({{ notes_content | tojson }}, '{{ album_id }}')">
+
+  <!-- Navbar -->
+  <div class="navbar bg-base-100 shadow-sm sticky top-0 z-40">
+    <div class="navbar-start px-4 font-bold text-lg">travel-memories</div>
+    <div class="navbar-center">
+      <ul class="steps">
+        {% set phases = [('','Album'),('triage','Triage'),('curate','Curate'),('group','Group'),('write','Write'),('export','Export')] %}
+        {% for key, label in phases %}
+        <li class="step {% if current_phase == key %}step-primary{% endif %}
+                        {% if key in phase_stale %}step-warning{% endif %}">
+          {% if album_id %}
+          <a hx-post="/nav/phase" hx-vals='{"album_id":"{{ album_id }}","target_phase":"{{ key }}"}' href="/{{ key }}{% if album_id %}?album_id={{ album_id }}{% endif %}">{{ label }}</a>
+          {% else %}{{ label }}{% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+    <div class="navbar-end px-4">
+      {% if album_id %}
+      <button class="btn btn-ghost btn-sm" @click="open = !open">📝 Notes</button>
+      {% endif %}
+    </div>
+  </div>
+
+  <!-- Stale warning -->
+  {% if current_phase in phase_stale %}
+  <div class="alert alert-warning rounded-none" id="stale-banner">
+    <span>You changed earlier decisions — review this phase before exporting.</span>
+    <form method="post" action="/nav/dismiss-stale">
+      <input type="hidden" name="album_id" value="{{ album_id }}">
+      <input type="hidden" name="phase" value="{{ current_phase }}">
+      <button class="btn btn-xs">Dismiss</button>
+    </form>
+  </div>
+  {% endif %}
+
+  <!-- Body with notes drawer -->
+  <div class="flex relative">
+    <div class="flex-1 min-w-0 transition-all" :class="open ? 'mr-80' : ''">
+      {% block content %}{% endblock %}
+    </div>
+
+    <!-- Notes panel -->
+    <div class="fixed right-0 top-16 h-[calc(100vh-4rem)] w-80 bg-base-100 shadow-2xl p-4 flex flex-col transition-transform z-30"
+         :class="open ? 'translate-x-0' : 'translate-x-full'" id="notes-panel">
+      <h3 class="font-bold text-base mb-2">Notes</h3>
+      <textarea class="textarea textarea-bordered flex-1 resize-none text-sm"
+                x-model="notes"
+                @input="scheduleAutosave()"
+                placeholder="Jot down memories at any time…"></textarea>
+      <div class="text-xs text-right mt-1 opacity-60" x-text="status"></div>
+    </div>
+  </div>
+
+  <script src="/static/app.js"></script>
+  {% block extra_scripts %}{% endblock %}
+</body>
+</html>

services/travel-memories/app/templates/phase1.html

@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-6 max-w-5xl mx-auto">
+  <h1 class="text-2xl font-bold mb-4">Select Album</h1>
+
+  {% if error %}
+  <div class="alert alert-error mb-4">
+    <span>Cannot reach Immich: {{ error }}</span>
+    <a href="/" class="btn btn-sm">Retry</a>
+  </div>
+  {% endif %}
+
+  <form method="post" action="/select">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+      {% for album in albums %}
+      <label class="album-card card bg-base-100 shadow cursor-pointer hover:shadow-lg transition"
+             data-album-id="{{ album.id }}">
+        <figure class="h-40 overflow-hidden">
+          <img src="/proxy/thumb/{{ album.albumThumbnailAssetId }}"
+               class="w-full h-full object-cover" alt="">
+        </figure>
+        <div class="card-body p-4">
+          <div class="flex items-start gap-2">
+            <input type="checkbox" name="album_ids[]" value="{{ album.id }}"
+                   class="checkbox checkbox-primary mt-1">
+            <div>
+              <p class="font-semibold">{{ album.albumName }}</p>
+              <p class="text-sm opacity-60">{{ album.assetCount }} photos</p>
+              {% if album.has_state %}
+              <span class="resume-badge badge badge-warning badge-sm mt-1">In progress</span>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </label>
+      {% endfor %}
+    </div>
+
+    <div class="form-control mb-4 max-w-xs">
+      <label class="label"><span class="label-text">Grav trip slug</span></label>
+      <input id="grav-slug" type="text" name="grav_trip_slug" required
+             placeholder="central-asia-2023" class="input input-bordered">
+    </div>
+
+    <input type="hidden" name="start_over" id="start-over-flag" value="0">
+    <div class="flex gap-2">
+      <button type="submit" class="btn btn-primary">Start &rarr;</button>
+      <button type="button" class="btn btn-ghost btn-sm"
+              onclick="document.getElementById('start-over-flag').value='1'; this.closest('form').submit()">
+        Start over (discard progress)
+      </button>
+    </div>
+  </form>
+</div>
+{% endblock %}

services/travel-memories/pytest.ini

@@ -0,0 +1,2 @@
+[pytest]
+pythonpath = .

services/travel-memories/requirements.txt

@@ -0,0 +1,5 @@
+flask==3.1.0
+requests==2.32.3
+pytest==8.3.4
+pytest-playwright==0.6.2
+pytest-httpserver==1.1.0

services/travel-memories/tests/conftest.py

@@ -0,0 +1,101 @@
+import json
+import os
+import shutil
+import threading
+import time
+from pathlib import Path
+
+import pytest
+from werkzeug.serving import make_server
+
+FIXTURES_DIR = Path(__file__).parent / "fixtures"
+
+TINY_PNG = bytes.fromhex(
+    "89504e470d0a1a0a0000000d4948445200000001000000010806"
+    "0000001f15c4890000000a4944415478016360000000020001e2"
+    "21bc330000000049454e44ae426082"
+)
+
+MOCK_ALBUMS = [
+    {
+        "id": "album-1",
+        "albumName": "Central Asia 2023",
+        "assetCount": 3,
+        "albumThumbnailAssetId": "asset-1",
+    }
+]
+
+MOCK_ALBUM_DETAIL = {
+    "id": "album-1",
+    "albumName": "Central Asia 2023",
+    "assets": [
+        {"id": "asset-1", "originalFileName": "IMG_001.jpg",
+         "localDateTime": "2023-09-05T09:03:00"},
+        {"id": "asset-2", "originalFileName": "IMG_002.jpg",
+         "localDateTime": "2023-09-05T14:30:00"},
+        {"id": "asset-3", "originalFileName": "IMG_003.jpg",
+         "localDateTime": "2023-09-06T10:00:00"},
+    ],
+}
+
+
+@pytest.fixture(scope="session")
+def httpserver_listen_address():
+    return ("127.0.0.1", 8099)
+
+
+@pytest.fixture(scope="session")
+def mock_immich(make_httpserver):
+    server = make_httpserver
+    server.expect_request("/api/albums").respond_with_json(MOCK_ALBUMS)
+    server.expect_request("/api/albums/album-1").respond_with_json(MOCK_ALBUM_DETAIL)
+    for asset_id in ["asset-1", "asset-2", "asset-3"]:
+        server.expect_request(
+            f"/api/assets/{asset_id}/thumbnail"
+        ).respond_with_data(TINY_PNG, content_type="image/png")
+        server.expect_request(
+            f"/api/assets/{asset_id}/original"
+        ).respond_with_data(TINY_PNG, content_type="image/jpeg")
+    return server
+
+
+@pytest.fixture(scope="session")
+def state_dir(tmp_path_factory):
+    return tmp_path_factory.mktemp("state")
+
+
+@pytest.fixture(scope="session")
+def pages_dir(tmp_path_factory):
+    return tmp_path_factory.mktemp("pages")
+
+
+@pytest.fixture(scope="session")
+def flask_app(state_dir, pages_dir, mock_immich):
+    os.environ["IMMICH_URL"] = f"http://127.0.0.1:8099"
+    os.environ["IMMICH_API_KEY"] = "test-key"
+    from app import create_app
+    return create_app(state_dir=str(state_dir), pages_dir=str(pages_dir))
+
+
+@pytest.fixture(scope="session")
+def base_url(flask_app):
+    server = make_server("127.0.0.1", 8083, flask_app)
+    t = threading.Thread(target=server.serve_forever)
+    t.daemon = True
+    t.start()
+    time.sleep(0.2)
+    yield "http://127.0.0.1:8083"
+    server.shutdown()
+
+
+@pytest.fixture()
+def seed_state(state_dir):
+    """Copy a fixture JSON into the state dir; return the album_id."""
+    def _seed(fixture_name: str) -> str:
+        src = FIXTURES_DIR / f"{fixture_name}.json"
+        with open(src) as f:
+            data = json.load(f)
+        dst = Path(state_dir) / f"{data['album_id']}.json"
+        shutil.copy(src, dst)
+        return data["album_id"]
+    return _seed

services/travel-memories/tests/fixtures/phase2_state.json

@@ -0,0 +1,18 @@
+{
+  "album_id": "album-1",
+  "album_name": "Central Asia 2023",
+  "grav_trip_slug": "central-asia-2023",
+  "phase": "triage",
+  "phases_completed": [],
+  "phase_stale": [],
+  "photos": [
+    {"id": "asset-1", "original_filename": "IMG_001.jpg",
+     "local_datetime": "2023-09-05T09:03:00", "tag": "untagged", "order": 0},
+    {"id": "asset-2", "original_filename": "IMG_002.jpg",
+     "local_datetime": "2023-09-05T14:30:00", "tag": "untagged", "order": 1},
+    {"id": "asset-3", "original_filename": "IMG_003.jpg",
+     "local_datetime": "2023-09-06T10:00:00", "tag": "untagged", "order": 2}
+  ],
+  "groups": [],
+  "notes": ""
+}