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.53
+GRAV_VERSION=2.0.0-rc.10
 
 # Repos
 USER_REPO=https://gitea.example.com/org/intotheeast-user.git
@@ -22,5 +22,5 @@ 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=your-grav-password
+GRAV_TEST_PASS=TravelBlog2026!
 GRAV_BASE_URL=http://localhost:8081

.gitignore

@@ -19,5 +19,8 @@ test-results/
 playwright-report/
 tests/.auth/
 
+# travel-memories state
+docs/immich-workflow/*.json
+
 # OS
 .DS_Store

CLAUDE.md

@@ -13,7 +13,7 @@
 
 ### Current stack
 
-- **Grav:** 2.0.0-rc.9 (installed manually — see §3 below)
+- **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`
@@ -77,8 +77,8 @@ 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 entries for both trips (Japan/Korea 2026 + Italy 2025 with real GPX)
-- `make demo-reset` — remove demo entries (keeps trip page structure, removes entries only)
+- `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
 
@@ -108,7 +108,7 @@ Before going live, change in `user/config/system.yaml`:
 |---|---|---|
 | `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/japan-korea-2026/dailies` immediately. This verifies the cache-on-save plugin (BUG-001 fix) works correctly with caching enabled.
+**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
 
@@ -116,83 +116,11 @@ The custom plugin at `user/plugins/cache-on-save/` clears Grav's page-tree cache
 
 ## 2. Local development setup
 
-### First-time setup after cloning
+Full setup guide: [`docs/guides/local-setup.md`](docs/guides/local-setup.md)
 
-`user/plugins/` and `user/data/` are excluded from git but Grav requires them to exist. Create them once after cloning:
+### Superpowers skill paths
 
-```bash
-mkdir -p user/plugins user/data
-```
+Specs: `docs/working/specs/YYYY-MM-DD-<topic>-design.md`
+Plans: `docs/working/plans/YYYY-MM-DD-<topic>.md`
 
-Then run `make setup` (starts Docker + installs plugins).
-
-### After make install-plugins: fix cache permissions
-
-If the site returns a 500 error after plugin installation or after recreating the container,
-run `make fix-perms`. This creates uid 1000 in the container, chowns `/var/www/html` to 1000:1000,
-and reloads Apache. Always run `make setup` (not just `make start`) after `docker compose down && up`
-to ensure permissions are correct.
-
-### Grav 2.0 upgrade (local)
-
-GPM (`php bin/gpm selfupgrade`) does **not** serve Grav 2.0 RC — it still reports 1.7.x as latest even on the `testing` channel. To upgrade locally:
-
-```bash
-# Download grav-admin bundle (includes Grav core + admin2 plugin)
-docker exec -w /tmp intotheeast_grav bash -c "
-  curl -sL 'https://getgrav.org/download/core/grav-admin/2.0.0-rc.9?testing' -o grav-admin.zip && \
-  unzip -q grav-admin.zip
-"
-# Copy core files only (not user/)
-docker exec -w /tmp intotheeast_grav bash -c "
-  cp -rf grav-admin/{assets,bin,system,vendor,webserver-configs,index.php,composer.json,composer.lock,robots.txt,CHANGELOG.md,LICENSE.txt} /var/www/html/
-"
-# Install Admin2 from the bundle (it's named admin2, not admin)
-docker exec -w /tmp intotheeast_grav bash -c "
-  cp -rf grav-admin/user/plugins/admin2 /var/www/html/user/plugins/admin2
-"
-make fix-perms
-docker exec -w /var/www/html intotheeast_grav php bin/grav cache --all
-# Cleanup
-docker exec intotheeast_grav rm -rf /tmp/grav-admin /tmp/grav-admin.zip
-```
-
-After upgrading, ensure these settings in `user/config/system.yaml`:
-```yaml
-accounts:
-  type: flex      # required for Admin2 API
-pages:
-  type: flex      # required for Admin2 pages API
-```
-
-And ensure the admin user account has `api.*` permissions (Admin2 uses a new permission namespace):
-```yaml
-# user/accounts/<username>.yaml
-access:
-  admin:
-    login: true
-    super: true
-  api:
-    super: true
-    access: true
-```
-
-**Disable the old `admin` plugin** once `admin2` is installed — both route to `/admin` and conflict:
-```bash
-# In user/plugins/admin/admin.yaml:
-enabled: false
-```
-
-**JWT secret:** Leave `jwt_secret: ''` in `user/plugins/api/api.yaml` — it works for local dev and production installs generate a secure secret automatically.
-
-### 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.
+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

@@ -21,47 +21,50 @@ 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 fix-perms
+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 -w /var/www/html intotheeast_grav php bin/gpm install $(shell cat plugins.txt | tr '\n' ' ') -y
 
 # ── Demo content ──────────────────────────────────────────────────────────────
 
 demo-load:
-	# Load japan-korea-2026 dailies
-	cp -r user/docs/demo/trips/japan-korea-2026/dailies/. user/pages/01.trips/japan-korea-2026/01.dailies/
-	cp -r user/docs/demo/trips/japan-korea-2026/04.stories user/pages/01.trips/japan-korea-2026/ 2>/dev/null || true
-	# Load italy-2025 trip (create pages if absent)
-	mkdir -p user/pages/01.trips/italy-2025/01.dailies user/pages/01.trips/italy-2025/02.map user/pages/01.trips/italy-2025/03.stats user/pages/01.trips/italy-2025/04.stories
-	cp user/docs/demo/trips/italy-2025/trip.md user/pages/01.trips/italy-2025/trip.md 2>/dev/null || true
-	cp user/docs/demo/trips/italy-2025/map.md user/pages/01.trips/italy-2025/02.map/map.md 2>/dev/null || true
-	cp user/docs/demo/trips/italy-2025/stats.md user/pages/01.trips/italy-2025/03.stats/stats.md 2>/dev/null || true
-	cp user/docs/demo/trips/italy-2025/stories.md user/pages/01.trips/italy-2025/04.stories/stories.md 2>/dev/null || true
-	cp -r user/docs/demo/trips/italy-2025/04.stories/. user/pages/01.trips/italy-2025/04.stories/ 2>/dev/null || true
-	cp -r user/docs/demo/trips/italy-2025/dailies/. user/pages/01.trips/italy-2025/01.dailies/
-	cp user/docs/demo/trips/italy-2025/*.gpx user/pages/01.trips/italy-2025/ 2>/dev/null || true
-	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+	# 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:
-	@for dir in user/docs/demo/trips/japan-korea-2026/dailies/*/; do \
-		folder=$$(basename "$$dir"); \
-		rm -rf "user/pages/01.trips/japan-korea-2026/01.dailies/$$folder"; \
-	done
-	rm -rf user/pages/01.trips/japan-korea-2026/04.stories/01.the-thousand-gates
-	rm -rf user/pages/01.trips/italy-2025
-	docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache"
+	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) ──────────────────────────────────────────
 
@@ -102,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,6 +1,6 @@
 services:
   grav:
-    image: getgrav/grav
+    build: .
     container_name: intotheeast_grav
     environment:
       - GRAV_CHANNEL=beta
@@ -12,3 +12,13 @@ services:
       - ./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/posting-pipeline.md

@@ -1,132 +0,0 @@
-# Daily Entry Posting Pipeline
-
-Two ways to create a daily entry: the mobile frontend form at `/post`, or directly from the Grav Admin2 panel. Both produce the same page structure under `user/pages/01.trips/<active_trip>/01.dailies/`.
-
-The active trip is set in `user/config/site.yaml` → `active_trip`. The post form's `pageconfig.parent` in `post-form.md` must be kept in sync with this value.
-
----
-
-## Frontmatter Reference
-
-Every entry page (`template: entry`) supports these frontmatter fields:
-
-| Field | Type | Required | Notes |
-|---|---|---|---|
-| `title` | string | ✅ | Entry headline |
-| `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 tracker feed |
-| `lat` | string | — | Latitude decimal degrees (e.g. `52.3676`) |
-| `lng` | string | — | Longitude decimal degrees (e.g. `4.9041`) |
-| `location_city` | string | — | City name shown under the title (e.g. `Kyoto`) |
-| `location_country` | string | — | Country name shown under the title (e.g. `Japan`) |
-| `weather_desc` | string | — | Condition label — must be one of the values below |
-| `weather_temp_c` | number | — | Temperature in Celsius (displayed rounded, e.g. `19`) |
-| `hero_image` | string | — | Filename of the hero image (e.g. `photo.jpg`). Leave blank to auto-select the first uploaded image. |
-
-**`weather_desc` allowed values** (matched to emoji icons in `entry.html.twig`):
-`Sunny` · `Partly cloudy` · `Cloudy` · `Foggy` · `Drizzle` · `Rain` · `Snow` · `Thunderstorm`
-
-**Page media (photos):** images are stored as files in the page folder (`user/pages/01.tracker/<slug>/`). All images in the folder are shown in the gallery. `hero_image` pins one as the full-width header.
-
-**Example complete frontmatter:**
-```yaml
----
-title: 'First Day in Kyoto'
-date: '2026-07-20 09:30'
-template: entry
-published: true
-lat: '35.0116'
-lng: '135.7681'
-location_city: 'Kyoto'
-location_country: 'Japan'
-weather_desc: 'Sunny'
-weather_temp_c: 28
-hero_image: 'temple.jpg'
----
-```
-
----
-
-## Flow 1 — Mobile Frontend Form (`/post`)
-
-This is the primary posting flow, designed for one-handed phone use.
-
-```
-Browser → /post (post-form.md)
-         └─ Grav Form plugin validates fields
-         └─ add-page-by-form plugin (onFormProcessed)
-              ├─ reads pageconfig.parent (/trips/japan-korea-2026/dailies) and pageconfig.slug_field (date + title)
-              ├─ reads pagefrontmatter (template: entry, published: true)
-              ├─ merges form field values into new page frontmatter
-              ├─ writes user/pages/01.trips/<active_trip>/01.dailies/<slug>/entry.md
-              └─ moves uploaded photos into the page folder
-         └─ cache-on-save plugin (onFormProcessed)
-              └─ calls $grav['cache']->deleteAll() so tracker feed shows the entry immediately
-         └─ form shows success message, resets fields
-```
-
-**The form fields and their mapping to frontmatter:**
-
-| Form field | Frontmatter key | Notes |
-|---|---|---|
-| `title` | `title` | Required |
-| `date` | `date` | Defaults to current datetime |
-| `content` | page body (markdown) | Required |
-| `photos` | page media files | Uploaded to page folder |
-| `lat` | `lat` | Filled via "Get Location" button |
-| `lng` | `lng` | Filled via "Get Location" button |
-| `location_city` | `location_city` | Manual text entry |
-| `location_country` | `location_country` | Manual text entry |
-| `weather_temp_c` | `weather_temp_c` | Hidden — set by weather JS widget |
-| `weather_desc` | `weather_desc` | Hidden — set by weather JS widget |
-
-**Slug format:** `<YYYY-MM-DD>.<slugified-title>` (controlled by `slug_field: 'date,title'` in `post-form.md`).
-
-**Security:** the `/post` page requires `access: site.login: true` — anonymous visitors get redirected to login.
-
----
-
-## Flow 2 — Admin Panel (sit-down workflow)
-
-Use this for drafts, scheduled posts, or editing existing entries.
-
-1. Log in at `/admin`
-2. Go to **Pages** → **Add Page**
-3. Set:
-   - **Page Title:** your entry title
-   - **Parent Page:** `/trips/japan-korea-2026/dailies` (adjust to active trip)
-   - **Page Template:** `entry`
-4. Fill in the **Entry** tab fields (city, country, lat/lng, weather)
-5. Write content in the **Content** tab
-6. Upload photos via the **Media** tab
-7. Set `published: true` (or leave `false` for a draft)
-8. For scheduling: set `publish_date` in **Options** → **Scheduling**
-9. Save
-
-The Admin form fields are defined by `user/themes/intotheeast/blueprints/entry.yaml`.
-
-**Drafts:** set `published: false` — the entry won't appear in the tracker feed until you flip it to `true`. Useful for writing ahead of time on the road.
-
-**Scheduling:** Grav supports `publish_date` and `unpublish_date` in page frontmatter. Set them in the Admin Options tab. Requires `pages.publish_dates: true` in `system.yaml` (already enabled).
-
----
-
-## Page folder structure
-
-```
-user/pages/01.trips/
-└─ japan-korea-2026/          ← trip entity (active_trip in site.yaml)
-   ├─ trip.md                 ← trip page (title, date_start, date_end, cover_image, album_url)
-   ├─ *.gpx                   ← GPX route files (served as media, rendered on map)
-   ├─ 01.dailies/
-   │  └─ 2026-07-20-1430-first-day-in-kyoto.entry/
-   │     ├─ entry.md          ← frontmatter + markdown body
-   │     ├─ temple.jpg        ← hero image (referenced by hero_image)
-   │     └─ market.jpg        ← additional gallery image
-   ├─ 02.map/map.md
-   ├─ 03.stats/stats.md
-   └─ 04.stories/stories.md
-```
-
-The entry folder name follows `<YYYY-MM-DD-HHmm>-<slug>.entry`. Grav uses this for ordering and routing. The `.entry` suffix enables the `entry` template.

docs/production-todo.md

@@ -1,70 +0,0 @@
-# Production Todo
-
-Fresh server — no Grav installed yet. Work through these sections in order.
-
----
-
-## 1. Pre-install: fix server-install.sh for Grav 2.0
-
-`server-install.sh` has a gap: it copies the `grav-admin` bundle (which includes `user/plugins/admin2/`) but then immediately does `rm -rf user && git clone ...`, which wipes admin2. It never gets reinstalled because GPM doesn't carry Admin2.
-
-- [ ] Update `server-install.sh` to stash admin2 before wiping user/, then restore it after:
-
-```bash
-# After "cp -rf grav-admin/. ." and before "rm -rf user":
-cp -rf grav-admin/user/plugins/admin2 /tmp/admin2-plugin
-
-# After "git clone $USER_REPO user" and "mkdir -p user/plugins ...":
-cp -rf /tmp/admin2-plugin user/plugins/admin2
-rm -rf /tmp/admin2-plugin
-```
-
-- [ ] Remove `admin` from `plugins.txt` if it's there — Admin2 replaces it and both conflict on `/admin`
-
-## 2. Pre-install: configure .env
-
-- [ ] Set `GRAV_VERSION=2.0.0-rc.9` in `.env`
-- [ ] Set `GRAV_CHANNEL_SUFFIX=?testing` in `.env` (makes the download URL resolve to the RC)
-- [ ] 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
-
-## 3. 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.
-
-## 4. Post-install: config
-
-These are already committed to the `user/` repo so they'll be present after the clone — just verify:
-
-- [ ] `user/config/system.yaml` has `accounts.type: flex` and `pages.type: flex`
-- [ ] `user/config/system.yaml` `custom_base_url` is set to the production domain (currently set to the local dev IP — update before deploy)
-- [ ] `user/accounts/mischa.yaml` has `api.super: true` and `api.access: true`
-- [ ] Disable old admin plugin: set `enabled: false` in `user/plugins/admin/admin.yaml` on production (or ensure it's not in `plugins.txt`)
-
-## 5. Post-install: switch to production mode
-
-- [ ] Set `twig.cache: true` in `user/config/system.yaml`
-- [ ] 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 on)
-
-## 6. Security
-
-- [ ] Change admin password to a strong production password
-- [ ] Confirm `/post` requires login — unauthenticated visitors must not be able to post
-
-## 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)
-
-## 8. Content
-
-- [ ] Set `date_start` on the Japan & Korea 2026 trip page (`user/pages/01.trips/japan-korea-2026/trip.md`)
-- [ ] Upload actual GPX route file(s) to the trip page media — currently no GPX files, so the map shows no route
-- [ ] Add `cover_image` to the trip page (used on the trips listing)
-- [ ] Run `make content-push` to push any local content changes to Gitea before going live

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/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-19-dark-mode.md

@@ -2,6 +2,8 @@
 
 > **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.
@@ -29,7 +31,7 @@
 **Interfaces:**
 - Produces: CSS custom properties consumed by every component in `style.css` and Twig templates
 
-- [ ] **Step 1: Read the current tokens file**
+- [x] **Step 1: Read the current tokens file**
 
 ```bash
 cat user/themes/intotheeast/css/tokens.css
@@ -37,7 +39,7 @@ 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`.
 
-- [ ] **Step 2: Replace the color block in tokens.css**
+- [x] **Step 2: Replace the color block in tokens.css**
 
 Replace the entire `:root` color block (from `--color-paper` through `--color-accent-on`) with:
 
@@ -60,7 +62,7 @@ Replace the entire `:root` color block (from `--color-paper` through `--color-ac
 
 Keep all non-color tokens (`--text-*`, `--leading-*`, `--space-*`, font variables, etc.) unchanged.
 
-- [ ] **Step 3: Verify no syntax errors**
+- [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
@@ -68,7 +70,7 @@ docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcach
 
 Expected: `200`
 
-- [ ] **Step 4: Visual smoke check**
+- [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
@@ -76,7 +78,7 @@ curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'color: v
 
 Not a definitive check — just confirm the page renders. Open a browser and verify the background is dark and text is cream.
 
-- [ ] **Step 5: Run test suite**
+- [x] **Step 5: Run test suite**
 
 ```bash
 make test-ui
@@ -84,7 +86,7 @@ make test-ui
 
 Expected: 24/25 pass (P2 FilePond is pre-existing failure, all others pass).
 
-- [ ] **Step 6: Commit**
+- [x] **Step 6: Commit**
 
 ```bash
 git -C user add themes/intotheeast/css/tokens.css
@@ -101,7 +103,7 @@ git -C user commit -m "feat: switch to warm-dark color tokens"
 **Interfaces:**
 - Consumes: dark color tokens from Task 1
 
-- [ ] **Step 1: Find all hardcoded color literals in style.css**
+- [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
@@ -109,7 +111,7 @@ grep -n '#[0-9a-fA-F]\{3,6\}\|background: white\|background:#fff\|color: #\|back
 
 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).
 
-- [ ] **Step 2: Add paper grain texture to body**
+- [x] **Step 2: Add paper grain texture to body**
 
 Find the `body` rule in `style.css`. It will look something like:
 
@@ -137,7 +139,7 @@ body::after {
 }
 ```
 
-- [ ] **Step 3: Fix hardcoded login form colors**
+- [x] **Step 3: Fix hardcoded login form colors**
 
 Find this rule (around line 497):
 
@@ -151,7 +153,7 @@ Replace with:
 .login-form .button.secondary { background: var(--color-canvas); color: var(--color-ink); text-decoration: none; line-height: 44px; padding: 0 1rem; }
 ```
 
-- [ ] **Step 4: Fix any other hardcoded colors found in Step 1**
+- [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)
@@ -161,7 +163,7 @@ For each hardcoded literal found in Step 1 (excluding the data URI you added):
 
 Use judgment: if a hex is inside a gradient or SVG path data, leave it alone.
 
-- [ ] **Step 5: Typography — increase entry body paragraph spacing**
+- [x] **Step 5: Typography — increase entry body paragraph spacing**
 
 Find:
 
@@ -171,11 +173,11 @@ Find:
 
 Change `margin-bottom: 1.1em` to `margin-bottom: 1.4em`.
 
-- [ ] **Step 6: Typography — tighten h1/h2 tracking**
+- [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.
 
-- [ ] **Step 7: Stats page — tabular numbers**
+- [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:
 
@@ -185,7 +187,7 @@ grep -n 'stat\|number\|count' user/themes/intotheeast/templates/stats.html.twig
 
 Then add a targeted rule in style.css for whatever class wraps the numeric values.
 
-- [ ] **Step 8: Verify no syntax errors and visual check**
+- [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
@@ -193,7 +195,7 @@ docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcach
 
 Expected: `200`. Open browser — grain should be subtly visible on the dark background.
 
-- [ ] **Step 9: Run test suite**
+- [x] **Step 9: Run test suite**
 
 ```bash
 make test-ui
@@ -201,7 +203,7 @@ make test-ui
 
 Expected: 24/25 (P2 pre-existing).
 
-- [ ] **Step 10: Commit**
+- [x] **Step 10: Commit**
 
 ```bash
 git -C user add themes/intotheeast/css/style.css
@@ -220,7 +222,7 @@ git -C user commit -m "feat: add paper grain texture, fix hardcoded colors, impr
 - Consumes: Leaflet.js already loaded in both templates
 - Produces: Stadia Alidade Smooth Dark tiles replacing OpenStreetMap tiles in both map views
 
-- [ ] **Step 1: Read current tile setup in both templates**
+- [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
@@ -228,7 +230,7 @@ grep -n "tileLayer\|openstreetmap\|attribution\|stadia" user/themes/intotheeast/
 
 Confirm the current tile URL pattern (`{s}.tile.openstreetmap.org`) in both files.
 
-- [ ] **Step 2: Replace tile layer in map.html.twig**
+- [x] **Step 2: Replace tile layer in map.html.twig**
 
 Find:
 
@@ -248,11 +250,11 @@ L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{
 }).addTo(map);
 ```
 
-- [ ] **Step 3: Replace tile layer in dailies.html.twig (mini-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).
 
-- [ ] **Step 4: Verify tiles load**
+- [x] **Step 4: Verify tiles load**
 
 ```bash
 curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/map
@@ -274,7 +276,7 @@ Open the map in a browser and confirm:
 - Entry pins render correctly on top
 - Attribution footer is present
 
-- [ ] **Step 5: Check mini-map on dailies page**
+- [x] **Step 5: Check mini-map on dailies page**
 
 ```bash
 curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiamaps'
@@ -282,7 +284,7 @@ curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiama
 
 Expected: `stadiamaps`.
 
-- [ ] **Step 6: Run test suite**
+- [x] **Step 6: Run test suite**
 
 ```bash
 make test-ui
@@ -290,7 +292,7 @@ make test-ui
 
 Expected: 24/25 (P2 pre-existing).
 
-- [ ] **Step 7: Commit**
+- [x] **Step 7: Commit**
 
 ```bash
 git -C user add themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/dailies.html.twig

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-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-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-19-stats-redesign.md

@@ -29,7 +29,7 @@ The existing 4-stat grid expands to 6 stats. Both `stats.html.twig` and the inli
 
 | Stat | Label | Source | Notes |
 |---|---|---|---|
-| Days on the road | `days on the road` | `(now - first entry date) / 86400` | Unchanged |
+| 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 |
@@ -82,19 +82,10 @@ Max speed is explicitly excluded — GPS noise at 1-second resolution produces u
 
 ### Icon system
 
-The GPX `<type>` tag on the track element drives the icon shown in both the main stats distance block and the cycling panel header:
+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>`.
 
-| `<type>` value | Icon |
-|---|---|
-| `racebike` | Road bike |
-| `touringbicycle` | Touring bike |
-| `mtb` | Mountain bike |
-| `cycling` (generic) | Generic bike |
-| `hiking` | Hiking boot |
-| `hike` | Hiking boot |
-| Any unrecognised value | Generic bike (fallback) |
-
-When multiple GPX files exist with different types, use the type from the first file. This is an acceptable heuristic for now.
+Known Komoot `<type>` values for reference (future use if icon switching is ever added):
+`racebike`, `touringbicycle`, `mtb`, `cycling`, `hiking`, `hike`
 
 ---
 

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-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-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

@@ -6,9 +6,23 @@
     "": {
       "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",
@@ -25,6 +39,16 @@
         "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",

package.json

@@ -5,6 +5,7 @@
     "test:ui": "playwright test"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.48.0"
   }
 }

php/php-local.ini

@@ -2,3 +2,4 @@
 upload_max_filesize = 100M
 post_max_size = 500M
 max_file_uploads = 20
+session.save_path = /tmp

plugins.txt

@@ -1,4 +1,3 @@
-admin
 email
 error
 form

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

@@ -11,9 +11,6 @@ set -e
 : "${GITEA_USER:?GITEA_USER is not set}"
 : "${GITEA_TOKEN:?GITEA_TOKEN is not set}"
 
-# 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.
-
 trap 'rm -f ~/.netrc' EXIT
 
 echo "==> Setting up credentials (temporary)"
@@ -22,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}${GRAV_CHANNEL_SUFFIX:-}" -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"
@@ -41,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

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": ""
+}

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

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