` to end of `{% endblock %}`**
+
+ The Twig data-gathering at the top (lines 1–33) is unchanged. Replace from line 35 onwards with:
+
+ ```twig
+
+
+
+
+
+
+
+
+ {% 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 %}
+ /04.stories/./story.md` with template `story`
+- Run `make content-push` after all tasks to sync
+
+---
+
+### Task 1: Plugin scaffold + ChapterBreak shortcode
+
+**Files:**
+- Create: `user/plugins/story-blocks/story-blocks.php`
+- Create: `user/plugins/story-blocks/story-blocks.yaml`
+- Create: `user/plugins/story-blocks/shortcodes/ChapterBreakShortcode.php`
+
+**Interfaces:**
+- Produces: `[chapter-break image="file.jpg" title="..." number="II" alt="..." /]` shortcode
+- Produces: `StoryBlocksPlugin::getCurrentPage()` — used by all shortcodes in later tasks
+
+**What:** Bootstrap the plugin and implement the first shortcode. Once this task is done, `[chapter-break ...]` in any story's Markdown body will render a full-bleed atmospheric scene divider.
+
+- [x] **Create `user/plugins/story-blocks/story-blocks.yaml`**
+
+ ```yaml
+ name: Story Blocks
+ version: 1.0.0
+ description: Storytelling shortcode blocks for long-form travel stories
+ author:
+ name: Mischa
+ homepage: https://github.com/m-cluitmans
+ keywords: shortcode, story, storytelling
+ bugs: ''
+ license: MIT
+ dependencies:
+ - { name: grav, version: '>=2.0.0-rc.1' }
+ - { name: shortcode-core, version: '>=5.0.0' }
+ enabled: true
+ ```
+
+- [x] **Create `user/plugins/story-blocks/story-blocks.php`**
+
+ ```php
+ ['onShortcodeHandlers', 0],
+ 'onPageContentRaw' => ['onPageContentRaw', 1000],
+ ];
+ }
+
+ public function onPageContentRaw(Event $event): void
+ {
+ $this->currentPage = $event['page'];
+ }
+
+ public function getCurrentPage()
+ {
+ return $this->currentPage;
+ }
+
+ public function onShortcodeHandlers(): void
+ {
+ $this->grav['shortcode']->registerAllShortcodes(__DIR__ . '/shortcodes');
+ }
+ }
+ ```
+
+- [x] **Create `user/plugins/story-blocks/shortcodes/ChapterBreakShortcode.php`**
+
+ ```php
+ shortcode->getHandlers()->add('chapter-break', function (ShortcodeInterface $sc) {
+ $plugin = $this->grav['plugins']->getPlugin('story-blocks');
+ $page = $plugin ? $plugin->getCurrentPage() : null;
+
+ $imageName = $sc->getParameter('image', '');
+ $title = htmlspecialchars($sc->getParameter('title', ''), ENT_QUOTES);
+ $number = htmlspecialchars($sc->getParameter('number', ''), ENT_QUOTES);
+ $alt = htmlspecialchars($sc->getParameter('alt', $title), ENT_QUOTES);
+ $imageUrl = ($page && $imageName) ? $page->url() . '/' . $imageName : $imageName;
+
+ $numberHtml = $number
+ ? ''
+ : '';
+
+ return <<
+
+ HTML;
+ });
+ }
+ }
+ ```
+
+- [x] **Verify the plugin is recognised by Grav**
+
+ Open `http://localhost:8081/admin2` → Plugins. `Story Blocks` should appear in the list and be enabled.
+
+ If it doesn't appear, check the YAML filename matches the plugin folder name exactly (`story-blocks`), and confirm no PHP syntax errors:
+ ```bash
+ docker exec intotheeast_grav php -l /var/www/html/user/plugins/story-blocks/story-blocks.php
+ docker exec intotheeast_grav php -l /var/www/html/user/plugins/story-blocks/shortcodes/ChapterBreakShortcode.php
+ ```
+
+- [x] **Create a test story page to verify ChapterBreak renders**
+
+ Create `user/pages/01.trips/japan-korea-2026/04.stories/99.test-shortcodes/story.md`:
+
+ ```yaml
+ ---
+ title: Shortcode Test
+ date: 2026-03-28
+ hero_image: ''
+ published: false
+ ---
+ Intro paragraph before the chapter break.
+
+ [chapter-break title="Into the Shrine" number="I" /]
+
+ Text after the chapter break.
+ ```
+
+ Open `http://localhost:8081/trips/japan-korea-2026/stories/test-shortcodes`. The chapter break should render as an HTML div (even without CSS it should appear in source). Confirm no PHP errors.
+
+- [x] **Delete the test page**
+
+ ```bash
+ rm -rf user/pages/01.trips/japan-korea-2026/04.stories/99.test-shortcodes
+ ```
+
+- [x] **Commit**
+
+ ```bash
+ git -C user add plugins/story-blocks/
+ git -C user commit -m "feat: add story-blocks plugin with chapter-break shortcode"
+ ```
+
+---
+
+### Task 2: ScrollySection shortcode
+
+**Files:**
+- Create: `user/plugins/story-blocks/shortcodes/ScrollySectionShortcode.php`
+
+**Interfaces:**
+- Consumes: `StoryBlocksPlugin::getCurrentPage()` from Task 1
+- Produces: `[scrolly-section image="file.jpg" alt="..." caption="..."]Step one --- Step two[/scrolly-section]` shortcode
+- The rendered HTML depends on Scrollama JS (loaded by `story.html.twig` in Task 4) to split `---` into steps at runtime
+
+**What:** The sticky-image scrollytelling block. Content between the tags becomes the step text; `---` on its own line separates steps. Scrollama (loaded on story pages) detects step entry/exit and drives image pan and overlay effects.
+
+- [x] **Create `user/plugins/story-blocks/shortcodes/ScrollySectionShortcode.php`**
+
+ ```php
+ shortcode->getHandlers()->add('scrolly-section', function (ShortcodeInterface $sc) {
+ $plugin = $this->grav['plugins']->getPlugin('story-blocks');
+ $page = $plugin ? $plugin->getCurrentPage() : null;
+
+ $imageName = $sc->getParameter('image', '');
+ $alt = htmlspecialchars($sc->getParameter('alt', ''), ENT_QUOTES);
+ $caption = htmlspecialchars($sc->getParameter('caption', ''), ENT_QUOTES);
+ $content = $sc->getContent(); /* raw inner content — Scrollama JS splits on
+
+ View full map →
+
+
+
+
+
+
+ {% 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 %}
+
+
+
+
+ {% 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
+ ```
diff --git a/docs/superpowers/plans/2026-06-19-story-mode.md b/docs/superpowers/plans/2026-06-19-story-mode.md
new file mode 100644
index 0000000..289ea7d
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-19-story-mode.md
@@ -0,0 +1,1366 @@
+# Story Mode 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:** Build a rich long-form story post type for the intotheeast travel blog, with a cinematic hero section, four shortcode storytelling blocks (ChapterBreak, ScrollySection, PullQuote, SnapGallery), and a listing page — all consistent with the existing Field Notes design system.
+
+**Architecture:** A new Grav plugin (`story-blocks`) registers four shortcodes via ShortcodeCore's `onShortcodeHandlers` event. Each shortcode returns self-contained HTML with embedded CSS. `story.html.twig` renders a full-viewport hero (Ken Burns + scroll-driven overlay) followed by the Markdown body (where shortcodes expand). `stories.html.twig` becomes a card grid. Story CSS is added to the existing `style.css`.
+
+**Tech Stack:** Grav ShortcodeCore (already installed), Scrollama 3.x (CDN, story pages only), IntersectionObserver (native browser API), vanilla JS, PHP shortcode classes following the `shortcode-gallery-plusplus` pattern.
+
+## Global Constraints
+
+- Plugin namespace: `Grav\Plugin\Shortcodes` — matches existing shortcode plugin pattern
+- All shortcode PHP classes extend `Shortcode` and implement `init()` with `$this->shortcode->getHandlers()->add()`
+- Image filenames in shortcode parameters are resolved to URLs via `$page->url() . '/' . $imageName`
+- Current page tracked by listening to `onPageContentRaw` event — same pattern as `shortcode-gallery-plusplus`
+- Scrollama CDN: `https://cdn.jsdelivr.net/npm/scrollama@3/build/scrollama.min.js`
+- Design tokens used throughout CSS: `--color-canvas`, `--color-ink`, `--color-ink-2`, `--color-ink-muted`, `--color-accent`, `--color-border`, `--color-paper`, `--color-surface-raised`, `--font-display`, `--font-ui`, `--space-*`, `--radius-sm`, `--radius-md`, `--shadow-md`, `--site-header-height`
+- All animations respect `prefers-reduced-motion: reduce`
+- Story frontmatter fields: `title`, `date`, `end_date` (optional), `location_name`, `location_country`, `lat`, `lng`, `hero_image` (filename), `hero_alt`, `published`
+- Story pages live at `user/pages/01.trips/
+ 
+
+
+
+ {$numberHtml}
+
+ {$title}
+ +*/ + $imageUrl = ($page && $imageName) ? $page->url() . '/' . $imageName : $imageName; + + $captionHtml = $caption + ? '
' . $caption . '
' + : ''; + + return << + +
+
+
+ {$content}
+
+