fix: PhotoSwipe bg doesn't cover bottom — add !important and pin bg to viewport

Move Piran entry out of us-canada-mex-2024 into a new slovenia-2024 trip.
Rename entry folder to match the post title convention.
Fix us-canada-mex-2024 date_start to 2024-07-21 (first actual US entry).

pages/01.trips/slovenia-2024/01.dailies/2024-05-28-ice-cream-and-old-walls-in-piran.entry/entry.md

@@ -4,12 +4,12 @@ date: '2024-05-28 07:03'
 template: entry
 published: true
 hero_image: 'photo-1.jpg'
-lat: ''
+lat: '45.5285'
-lng: ''
+lng: '13.5680'
-location_city: ''
+location_city: Piran
-location_country: ''
+location_country: Slovenia
-weather_temp_c: ''
+weather_temp_c: '21'
-weather_desc: ''
+weather_desc: sunny
 ---
 
 A sunny day in Piran. We drove from Ljubljana through the beautiful Slovenian countryside. The more west we went, the more Mediterranean the landscape felt. Piran is a cute, Mediterranean harbor town, with little streets, squares and no cars. The view from the old fortification walls was great and the climb in the warm weather gave us a sense of accomplishment which we rewarded with a well deserved ice cream.

pages/01.trips/slovenia-2024/01.dailies/dailies.md

@@ -0,0 +1,11 @@
+---
+title: 'The Journey'
+template: dailies
+content:
+    items: '@self.children'
+    order:
+        by: date
+        dir: desc
+    filter:
+        published: true
+---

pages/01.trips/slovenia-2024/02.map/map.md

@@ -0,0 +1,4 @@
+---
+title: 'Trip Map'
+template: map
+---

pages/01.trips/slovenia-2024/03.stats/stats.md

@@ -0,0 +1,4 @@
+---
+title: 'Trip Stats'
+template: stats
+---

pages/01.trips/slovenia-2024/04.stories/stories.md

@@ -0,0 +1,5 @@
+---
+title: Stories
+template: stories
+published: true
+---

pages/01.trips/slovenia-2024/trip.md

@@ -0,0 +1,8 @@
+---
+title: 'Slovenia 2024'
+template: trip
+date: '2024-05-28'
+date_start: '2024-05-28'
+date_end: '2024-05-28'
+cover_image: ''
+---

pages/01.trips/us-canada-mex-2024/trip.md

@@ -1,8 +1,8 @@
 ---
 title: 'Northern America 2024'
 template: trip
-date: '2024-05-28'
+date: '2024-07-21'
-date_start: '2024-05-28'
+date_start: '2024-07-21'
 date_end: '2024-08-07'
 cover_image: ''
 ---

themes/intotheeast/css/style.css

@@ -1,5 +1,7 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+html { scroll-behavior: smooth; }
+
 body {
     font-family: var(--font-ui);
     font-size: var(--text-base);
@@ -87,7 +89,7 @@ body::after {
 
 /* ── Feed ────────────────────────────────────────────────────────────────────── */
 
-.feed { display: flex; flex-direction: column; gap: var(--space-12); }
+.feed { display: flex; flex-direction: column; gap: var(--space-8); }
 .feed-empty { color: var(--color-ink-muted); font-style: italic; }
 
 .entry-card {
@@ -95,8 +97,9 @@ body::after {
     text-decoration: none;
     color: inherit;
     border-bottom: 1px solid var(--color-border);
-    padding-bottom: var(--space-12);
+    padding-bottom: var(--space-8);
     transition: background 0.15s;
+    scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
 }
 
 /* Card: photo variant */
@@ -162,8 +165,8 @@ body::after {
 
 .journal-post {
     border-bottom: 1px solid var(--color-border);
-    padding-bottom: var(--space-12);
+    padding-bottom: var(--space-8);
-    margin-bottom: var(--space-12);
+    scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
 }
 
 .journal-post-header {
@@ -202,13 +205,21 @@ body::after {
     color: var(--color-ink-muted);
 }
 
+.journal-photo-wrap {
+    position: relative;
+    margin-bottom: var(--space-5);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+}
+
 .journal-photo-strip {
     display: flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
     scrollbar-width: none;
-    border-radius: var(--radius-md);
+    height: 100%;
-    margin-bottom: var(--space-3);
 }
 
 .journal-photo-strip::-webkit-scrollbar { display: none; }
@@ -216,34 +227,76 @@ body::after {
 .journal-photo-slide {
     flex: 0 0 100%;
     scroll-snap-align: start;
-    aspect-ratio: 3 / 2;
     overflow: hidden;
+    display: block;
+    text-decoration: none;
+    position: relative;
+}
+
+.journal-photo-slide::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: var(--thumb);
+    background-size: cover;
+    background-position: center;
+    filter: blur(24px) brightness(0.75);
+    transform: scale(1.15);
+    z-index: 0;
 }
 
 .journal-photo-slide img {
+    position: relative;
+    z-index: 1;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
     display: block;
 }
 
-.journal-photo-dots {
+.journal-photo-expand {
+    position: absolute;
+    bottom: var(--space-3);
+    right: var(--space-3);
+    width: 32px;
+    height: 32px;
+    background: rgba(0,0,0,0.45);
+    border: none;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
     display: flex;
+    align-items: center;
     justify-content: center;
+    padding: 0;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+    transform: translateZ(0);
+}
+
+.journal-photo-expand:active { background: rgba(0,0,0,0.7); }
+
+.journal-photo-dots {
+    position: absolute;
+    bottom: var(--space-3);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
     gap: var(--space-2);
-    margin-bottom: var(--space-4);
+    z-index: 2;
 }
 
 .journal-photo-dot {
     width: 6px;
     height: 6px;
     border-radius: 9999px;
-    background: var(--color-border);
+    background: rgba(255,255,255,0.5);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.4);
     transition: background 0.2s;
 }
 
 .journal-photo-dot.is-active {
-    background: var(--color-ink-muted);
+    background: #fff;
 }
 
 .strip-controls {
@@ -254,6 +307,10 @@ body::after {
     margin-bottom: var(--space-4);
 }
 
+@media (hover: none) {
+    .strip-controls { display: none; }
+}
+
 .strip-prev,
 .strip-next {
     background: transparent;
@@ -282,7 +339,8 @@ body::after {
 .journal-post-body p:last-child { margin-bottom: 0; }
 
 .journal-post.is-highlighted,
-.entry-card.is-highlighted {
+.entry-card.is-highlighted,
+.story-card.is-highlighted {
     animation: card-highlight 0.7s ease-out forwards;
 }
 
@@ -395,53 +453,28 @@ body::after {
 
 .gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
 
-/* ── Lightbox ────────────────────────────────────────────────────────────────── */
+/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
 
-.lightbox {
+.pswp__bg { background: #000; }
-    position: fixed;
+
-    inset: 0;
+/* pswp.css loads in <body> after this stylesheet, so !important is needed to win */
-    background: rgba(0,0,0,0.94);
+.pswp { height: 100dvh !important; }
-    z-index: 1000;
+/* Pin bg directly to viewport so it can't be cut short by parent height rounding */
-    display: flex;
+.pswp__bg { position: fixed !important; inset: 0 !important; }
-    align-items: center;
+
-    justify-content: center;
+/* Keyboard arrow navigation slide-in animations */
+.pswp-key-from-right { animation: pswpKeyFromRight 0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
+.pswp-key-from-left  { animation: pswpKeyFromLeft  0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
+
+@keyframes pswpKeyFromRight {
+    from { transform: translateX(48px); opacity: 0; }
+    to   { transform: translateX(0);    opacity: 1; }
 }
-
+@keyframes pswpKeyFromLeft {
-.lightbox[hidden] { display: none; }
+    from { transform: translateX(-48px); opacity: 0; }
-
+    to   { transform: translateX(0);     opacity: 1; }
-.lightbox-img {
-    max-width: 92vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: var(--radius-sm);
-    display: block;
 }
 
-.lightbox-close,
-.lightbox-prev,
-.lightbox-next {
-    position: absolute;
-    background: rgba(255,255,255,0.12);
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 44px;
-    height: 44px;
-    font-size: 1.4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-}
-
-.lightbox-close { top: 1rem; right: 1rem; }
-.lightbox-prev  { left: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-next  { right: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-close:hover,
-.lightbox-prev:hover,
-.lightbox-next:hover { background: rgba(255,255,255,0.26); }
-
 /* ── Map page ────────────────────────────────────────────────────────────────── */
 
 .map-page .site-main { max-width: none; padding: 0; }
@@ -571,7 +604,7 @@ body::after {
 .stat-value {
     display: block;
     font-family: var(--font-display);
-    font-size: var(--text-3xl);
+    font-size: clamp(2rem, 6vw, var(--text-3xl));
     font-weight: 400;
     color: var(--color-accent);
     line-height: 1.1;
@@ -615,6 +648,7 @@ body::after {
 /* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
 
 .feed-map-wrap {
+    position: relative;
     margin-bottom: var(--space-10);
     border-radius: var(--radius-md);
     overflow: hidden;
@@ -623,6 +657,7 @@ body::after {
 }
 
 .feed-map {
+    position: relative;
     height: 240px;
     width: 100%;
 }
@@ -631,6 +666,53 @@ body::after {
     .feed-map { height: 300px; }
 }
 
+.feed-map-fullscreen-btn {
+    position: absolute;
+    bottom: var(--space-2);
+    right: var(--space-2);
+    width: 2rem;
+    height: 2rem;
+    background: var(--color-canvas);
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-ink);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    box-shadow: var(--shadow-sm);
+    transition: background 0.15s;
+}
+
+.feed-map-fullscreen-btn:hover { background: var(--color-paper); }
+
+.feed-map-fs-close { display: none; font-size: 1rem; line-height: 1; }
+
+@media (min-width: 769px) {
+    .feed-map-fullscreen-btn { display: none; }
+}
+
+.feed-map-wrap.is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+}
+
+.feed-map-wrap.is-fullscreen .feed-map {
+    height: 100dvh;
+}
+
+.feed-map-wrap.is-fullscreen .feed-map-link { display: none; }
+
+.feed-map-wrap.is-fullscreen .feed-map-fs-open,
+.home-map-col.is-fullscreen .feed-map-fs-open { display: none; }
+.feed-map-wrap.is-fullscreen .feed-map-fs-close,
+.home-map-col.is-fullscreen .feed-map-fs-close { display: block; }
+
 .feed-map-link {
     display: block;
     text-align: right;
@@ -852,10 +934,22 @@ body::after {
 }
 
 .home-map {
+    position: relative;
     width: 100%;
     height: 100%;
 }
 
+.home-map-col.is-fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 9999;
+    height: 100dvh !important;
+}
+
+.home-map-col.is-fullscreen .home-map {
+    height: 100dvh;
+}
+
 .home-feed-col {
     padding: var(--space-8) var(--space-8);
 }
@@ -881,6 +975,12 @@ body::after {
 
 /* ── Trip page filter bar ────────────────────────────────────────────────────── */
 
+.feed-sort-bar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: var(--space-4);
+}
+
 .trip-filter-bar {
     display: flex;
     align-items: center;
@@ -923,6 +1023,46 @@ body::after {
     background: var(--color-accent-light);
 }
 
+.trip-panel-toggles {
+    display: flex;
+    gap: var(--space-5);
+    margin-top: var(--space-3);
+}
+
+.trip-panel-toggle {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: var(--space-1) var(--space-3);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.trip-panel-toggle:hover {
+    color: var(--color-ink);
+    border-color: var(--color-ink-muted);
+}
+.trip-panel-toggle.is-active {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+    background: var(--color-accent-light);
+}
+
+.trip-panel-caret {
+    display: inline-block;
+    font-size: 0.75em;
+    transition: transform 0.2s ease;
+}
+
+.trip-panel-toggle.is-active .trip-panel-caret { transform: rotate(180deg); }
+
 @media (max-width: 768px) {
     .home-layout { display: flex; flex-direction: column; }
     .home-map-col { position: static; height: 40vh; align-self: stretch; }
@@ -1073,12 +1213,51 @@ body::after {
 
 /* ── Trip page inline stats block ───────────────────────────────────────────── */
 
-.trip-stats-block {
+.trip-stats-block,
+.trip-cycling-block {
+    max-height: 0;
+    overflow: hidden;
+    margin-bottom: 0;
+    transition: max-height 0.4s ease, margin-bottom 0.35s ease;
+}
+
+.trip-stats-block.is-open,
+.trip-cycling-block.is-open {
+    max-height: 600px;
+    margin-bottom: var(--space-6);
+}
+
+.trip-panel-inner {
     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-panel-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: var(--space-6);
+    padding: var(--space-2) var(--space-4);
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-ink-muted);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+}
+
+.trip-panel-close:hover {
+    color: var(--color-ink);
+    border-color: var(--color-ink-muted);
+}
+
+@media (min-width: 769px) {
+    .trip-panel-close { display: none; }
 }
 
 .trip-stats-grid {
@@ -1089,7 +1268,7 @@ body::after {
 }
 
 @media (max-width: 600px) {
-    .trip-stats-grid { grid-template-columns: repeat(2, 1fr); }
+    .trip-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
 .trip-stats-countries {
@@ -1105,13 +1284,6 @@ body::after {
 
 /* ── 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;
@@ -1137,7 +1309,8 @@ body::after {
 }
 
 @media (max-width: 600px) {
-    .trip-cycling-grid { grid-template-columns: repeat(2, 1fr); }
+    .trip-cycling-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .trip-cycling-grid .stat-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
 }
 
 /* ── Story pages ─────────────────────────────────────────────────────────── */
@@ -1708,12 +1881,18 @@ body::after {
 
 /* ── Stories listing ──────────────────────────────────────── */
 .stories-listing { padding: var(--space-10) 0; }
+.stories-listing__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: var(--space-10);
+}
 .stories-listing__heading {
     font-family: var(--font-display);
     font-size: var(--text-2xl);
     font-weight: 400;
     color: var(--color-ink);
-    margin-bottom: var(--space-10);
+    margin-bottom: 0;
 }
 .stories-grid {
     display: grid;

themes/intotheeast/templates/dailies.html.twig

@@ -1,6 +1,7 @@
 {% extends 'default.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set journal_entries = page.collection() %}
 {% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
 {% set story_entries = stories_page ? stories_page.children.published() : [] %}
@@ -13,7 +14,8 @@
     {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
 {% endfor %}
 
-{# No sort needed: page.collection() returns journal entries date-descending per dailies.md config. Dailies has no stories, so no re-merge sort is needed. #}
+{# page.collection() returns date-descending; reverse to match ascending default on trip page. #}
+{% set all_items = all_items|reverse %}
 
 {# Collect GPS entries for mini-map #}
 {% set map_entries = [] %}
@@ -33,134 +35,112 @@
 
 {% set trip_page = page.parent() %}
 
-{% if map_entries|length > 0 %}
+{% include 'partials/feed-map.html.twig' with {
-<div class="feed-map-wrap">
+    'map_entries': map_entries,
-    <div class="feed-map" id="feed-map"></div>
+    'map_id': 'feed-map',
-    <a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}
+
+<div class="feed-sort-bar">
+    <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
 </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 }};
-{% set _ac = trip_page.header.autoconnect ?? 'on' %}
-var AUTOCONNECT  = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
-
-var feedMap = new maplibregl.Map({
-    container: 'feed-map',
-    style: MapUtils.MAP_STYLE,
-    center: [20, 20],
-    zoom: 2
-});
-
-feedMap.on('load', function () {
-    var bounds = new maplibregl.LngLatBounds();
-
-    FEED_ENTRIES.forEach(function (entry, i) {
-        var isLatest = (i === FEED_ENTRIES.length - 1);
-        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
-        bounds.extend(lngLat);
-
-        var el = MapUtils.createDotMarker(isLatest);
-        el.dataset.url = entry.url;
-        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
-            .setLngLat(lngLat)
-            .setHTML('<span class="map-tip">' + entry.title + '</span>');
-        el.addEventListener('mouseenter', function () { popup.addTo(feedMap); });
-        el.addEventListener('mouseleave', function () { popup.remove(); });
-        el.addEventListener('click', function () { window.location.href = entry.url; });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
-    });
-
-    if (FEED_ENTRIES.length === 1) {
-        feedMap.jumpTo({ center: [parseFloat(FEED_ENTRIES[0].lng), parseFloat(FEED_ENTRIES[0].lat)], zoom: 10 });
-    } else {
-        feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
-    }
-
-    var segments = MapUtils.buildJourneySegments(FEED_ENTRIES, { connectMode: AUTOCONNECT });
-    MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
-});
-</script>
-{% endif %}
-
 <div class="feed">
     {% if all_items|length > 0 %}
         {% for item in all_items %}
             {% set entry = item.page %}
-
             {% if item.type == 'journal' %}
-            {% set weather_icons = {
+                {% include 'partials/entry-journal.html.twig' %}
-                '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>
             {% else %}
-            {% set hero = null %}
+                {% include 'partials/entry-story.html.twig' %}
-            {% 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 }}" data-type="story" 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>
+
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.on('afterOpen', function () {
+    var pswp = lightbox.pswp;
+    var keyDir = 0;
+    var clearTimer = null;
+    function onKey(e) {
+        if (e.key === 'ArrowRight') keyDir = 1;
+        else if (e.key === 'ArrowLeft') keyDir = -1;
+        else keyDir = 0;
+    }
+    document.addEventListener('keydown', onKey, true);
+    pswp.on('change', function () {
+        if (!keyDir) return;
+        var dir = keyDir;
+        keyDir = 0;
+        var el = pswp.currSlide && pswp.currSlide.container;
+        if (!el) return;
+        el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
+        el.offsetWidth;
+        el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
+        clearTimeout(clearTimer);
+        clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
+    });
+    pswp.on('close', function () {
+        document.removeEventListener('keydown', onKey, true);
+        clearTimeout(clearTimer);
+    });
+});
+lightbox.init();
+
+/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
+</script>
+<script>
+(function() {
+    var sortBtn = document.getElementById('feed-sort-toggle');
+    if (!sortBtn) return;
+    var feed = document.querySelector('.feed');
+    var ascending = true;
+
+    sortBtn.addEventListener('click', function() {
+        ascending = !ascending;
+        var entries = Array.from(feed.querySelectorAll('[data-type]'));
+        entries.reverse().forEach(function(el) { feed.appendChild(el); });
+        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
+        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        sortBtn.classList.toggle('is-active', !ascending);
+    });
+})();
+</script>
 {% endblock %}

themes/intotheeast/templates/home.html.twig

@@ -1,6 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set trip_route = config.site.active_trip %}
 {% set trip = grav.pages.find(trip_route) %}
 
@@ -65,73 +66,10 @@
             {% if all_items|length > 0 %}
                 {% for item in all_items %}
                     {% set entry = item.page %}
-
                     {% if item.type == 'journal' %}
-                    {% set weather_icons = {
+                        {% include 'partials/entry-journal.html.twig' %}
-                        '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 %}
+                        {% include 'partials/entry-story.html.twig' %}
-                    {% 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 %}
@@ -180,7 +118,8 @@ homeMap.on('load', function () {
         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' });
+            if (!card) return;
+            window.location.hash = 'entry-' + entry.slug;
         });
 
         new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
@@ -199,6 +138,68 @@ homeMap.on('load', function () {
 </script>
 {% endif %}
 
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.on('afterOpen', function () {
+    var pswp = lightbox.pswp;
+    var keyDir = 0;
+    var clearTimer = null;
+    function onKey(e) {
+        if (e.key === 'ArrowRight') keyDir = 1;
+        else if (e.key === 'ArrowLeft') keyDir = -1;
+        else keyDir = 0;
+    }
+    document.addEventListener('keydown', onKey, true);
+    pswp.on('change', function () {
+        if (!keyDir) return;
+        var dir = keyDir;
+        keyDir = 0;
+        var el = pswp.currSlide && pswp.currSlide.container;
+        if (!el) return;
+        el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
+        el.offsetWidth;
+        el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
+        clearTimeout(clearTimer);
+        clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
+    });
+    pswp.on('close', function () {
+        document.removeEventListener('keydown', onKey, true);
+        clearTimeout(clearTimer);
+    });
+});
+lightbox.init();
+
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
+</script>
+
 {% else %}
 {# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
 

themes/intotheeast/templates/partials/base.html.twig

@@ -66,7 +66,8 @@
         controls.className = 'strip-controls';
         controls.appendChild(prev);
         controls.appendChild(next);
-        dots.insertAdjacentElement('afterend', controls);
+        var wrap = strip.closest('.journal-photo-wrap');
+        (wrap || dots).insertAdjacentElement('afterend', controls);
     });
 })();
 </script>

themes/intotheeast/templates/partials/entry-journal.html.twig

@@ -0,0 +1,59 @@
+{% 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 %}
+    {% set firstImg = images|first %}
+    {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+    <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
+        <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
+            {% for img in images %}
+            <a class="journal-photo-slide"
+               href="{{ img.url }}"
+               data-pswp-width="{{ img.width }}"
+               data-pswp-height="{{ img.height }}"
+               style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
+               target="_blank">
+                <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
+            </a>
+            {% 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 %}
+        <button class="journal-photo-expand" aria-label="View full size">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+        </button>
+    </div>
+    {% endif %}
+
+    <div class="journal-post-body">{{ entry.content|raw }}</div>
+</article>

themes/intotheeast/templates/partials/entry-story.html.twig

@@ -0,0 +1,17 @@
+{% 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 }}" data-type="story" 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>

themes/intotheeast/templates/partials/feed-map.html.twig

@@ -0,0 +1,117 @@
+{#
+  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
+
+  Required variables (via {% include ... with {...} only %}):
+    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
+    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
+    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
+    link_href    — string|null: URL for "View full map" link; null/empty hides the link
+    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
+    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
+    show_journey — bool: whether to draw the route connector line between markers
+#}
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+    <div class="feed-map" id="{{ map_id }}">
+        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-fullscreen" aria-label="Expand map">
+            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+            </svg>
+            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+        </button>
+    </div>
+    {% if link_href %}
+    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
+    {% endif %}
+</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>
+{% set js_suffix = map_id|replace({'-': '_'})|upper %}
+var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
+{% if show_journey %}
+{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
+var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
+{% endif %}
+
+var {{ map_var }} = new maplibregl.Map({
+    container: '{{ map_id }}',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    attributionControl: false
+});
+{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+{{ map_var }}.on('load', function () {
+    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+
+    var bounds = new maplibregl.LngLatBounds();
+    var entries = MAP_ENTRIES_{{ js_suffix }};
+
+    entries.forEach(function (entry, i) {
+        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+
+        el.addEventListener('click', function () {
+            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
+            var mapWrap = document.querySelector('.feed-map-wrap');
+            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                if (!card) { window.location.href = entry.url; return; }
+                window.location.hash = '{{ card_prefix }}' + entry.slug;
+                setTimeout(function () {
+                    card.classList.add('is-highlighted');
+                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+                }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
+    });
+
+    if (entries.length === 1) {
+        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
+    } else {
+        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    {% if show_journey %}
+    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
+    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
+    {% endif %}
+});
+</script>
+<script>
+(function() {
+    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+    var mapWrap = document.querySelector('.feed-map-wrap');
+    if (!fsBtn || !mapWrap) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapWrap.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
+    });
+})();
+</script>
+{% endif %}

themes/intotheeast/templates/stories.html.twig

@@ -3,8 +3,40 @@
 {% block content %}
 {% set stories = page.children.published().order('date', 'asc') %}
 
+{# Collect stories that have coordinates for the mini-map #}
+{% set map_entries = [] %}
+{% for story in stories %}
+    {% if story.header.lat is not empty and story.header.lng is not empty %}
+        {% set map_entries = map_entries|merge([{
+            'lat': story.header.lat,
+            'lng': story.header.lng,
+            'title': story.title,
+            'slug': story.slug,
+            'url': story.url,
+            'type': 'story',
+            'force_connect': false,
+            'transport_mode': null
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+{% set trip_page = page.parent() %}
+
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'stories-map',
+    'map_var': 'storiesMap',
+    'link_href': null,
+    'card_prefix': 'story-',
+    'trip_page': trip_page,
+    'show_journey': false
+} only %}
+
 <div class="stories-listing">
+    <div class="stories-listing__header">
         <h1 class="stories-listing__heading">Stories</h1>
+        <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
+    </div>
 
     {% if stories|length > 0 %}
     <div class="stories-grid">
@@ -19,7 +51,7 @@
             {% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
         {% endif %}
 
-        <a class="story-card" href="{{ story.url }}">
+        <a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
             {% if hero %}
             <div class="story-card__photo">
                 <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
@@ -42,4 +74,22 @@
     <p class="stories-empty">No stories yet — check back soon.</p>
     {% endif %}
 </div>
+<script>
+(function() {
+    var sortBtn = document.getElementById('feed-sort-toggle');
+    if (!sortBtn) return;
+    var grid = document.querySelector('.stories-grid');
+    if (!grid) return;
+    var ascending = true;
+
+    sortBtn.addEventListener('click', function() {
+        ascending = !ascending;
+        var cards = Array.from(grid.querySelectorAll('.story-card'));
+        cards.reverse().forEach(function(el) { grid.appendChild(el); });
+        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
+        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        sortBtn.classList.toggle('is-active', !ascending);
+    });
+})();
+</script>
 {% endblock %}

themes/intotheeast/templates/trip.html.twig

@@ -1,6 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
 {% set stories_page = grav.pages.find(page.route ~ '/stories') %}
 {% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
@@ -104,7 +105,14 @@
 
 <div class="home-layout">
     <div class="home-map-col">
-        <div class="home-map" id="trip-map"></div>
+        <div class="home-map" id="trip-map">
+            <button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
+                <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                    <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+                </svg>
+                <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+            </button>
+        </div>
     </div>
 
     <div class="home-feed-col">
@@ -126,16 +134,18 @@
                     <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>
-                <div class="trip-filter-group">
+                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
-                    <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
+            </div>
+            <div class="trip-panel-toggles">
+                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
                 {% if has_gpx %}
-                    <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
+                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
                 {% endif %}
             </div>
         </div>
-        </div>
 
-        <div id="trip-stats-block" class="trip-stats-block" style="display:none">
+        <div id="trip-stats-block" class="trip-stats-block">
+            <div class="trip-panel-inner">
                 <div class="trip-stats-grid">
                     <div class="stat-block">
                         <span class="stat-value">{{ days_on_road }}</span>
@@ -170,10 +180,13 @@
                 <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>
+                <button class="trip-panel-close" data-toggle="trip-stats-toggle">↑ Close stats</button>
+            </div>
         </div>
 
         {% if has_gpx %}
-        <div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
+        <div id="trip-cycling-block" class="trip-cycling-block">
+            <div class="trip-panel-inner">
                 <div class="trip-cycling-header">
                     <span class="trip-cycling-icon">🚴</span>
                     <span class="trip-cycling-title">Cycling Stats</span>
@@ -208,6 +221,8 @@
                         <span class="stat-label">km/h avg speed</span>
                     </div>
                 </div>
+                <button class="trip-panel-close" data-toggle="trip-cycling-toggle">↑ Close cycling</button>
+            </div>
         </div>
         {% endif %}
 
@@ -215,73 +230,10 @@
             {% if all_items|length > 0 %}
                 {% for item in all_items %}
                     {% set entry = item.page %}
-
                     {% if item.type == 'journal' %}
-                    {% set weather_icons = {
+                        {% include 'partials/entry-journal.html.twig' %}
-                        '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>
                     {% else %}
-                    {% set hero = null %}
+                        {% include 'partials/entry-story.html.twig' %}
-                    {% 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 }}" data-type="story" 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 %}
@@ -306,8 +258,10 @@ var tripMap = new maplibregl.Map({
     container: 'trip-map',
     style: MapUtils.MAP_STYLE,
     center: [20, 20],
-    zoom: 2
+    zoom: 2,
+    attributionControl: false
 });
+tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
 
 tripMap.on('load', function () {
     if (TRIP_ENTRIES.length === 0) {
@@ -333,11 +287,22 @@ tripMap.on('load', function () {
         el.addEventListener('click', function () {
             var card = document.getElementById('entry-' + entry.slug);
             if (!card) return;
-            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            var mapCol = document.querySelector('.home-map-col');
+            var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                window.location.hash = 'entry-' + entry.slug;
                 setTimeout(function () {
                     card.classList.add('is-highlighted');
                     setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
                 }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('trip-map-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
         });
 
         new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
@@ -352,9 +317,25 @@ tripMap.on('load', function () {
 
     /* ── GPX tracks + journey segments ─────────────────────────── */
     MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });
+
+    // Collapse attribution <details> which MapLibre may open on load
+    var attrib = tripMap.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
 });
 setTimeout(function () { tripMap.resize(); }, 100);
 
+(function() {
+    var fsBtn = document.getElementById('trip-map-fullscreen');
+    var mapCol = document.querySelector('.home-map-col');
+    if (!fsBtn || !mapCol) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapCol.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { tripMap.resize(); }, 50);
+    });
+})();
+
 (function() {
     var filterBtns = document.querySelectorAll('.trip-filter-btn');
     var cards = document.querySelectorAll('[data-type]');
@@ -389,6 +370,23 @@ setTimeout(function () { tripMap.resize(); }, 100);
     });
 })();
 
+(function() {
+    var sortBtn = document.getElementById('trip-sort-toggle');
+    if (!sortBtn) return;
+    var feed = document.querySelector('.feed');
+    var emptyMsg = document.getElementById('feed-filter-empty');
+    var ascending = true;
+
+    sortBtn.addEventListener('click', function() {
+        ascending = !ascending;
+        var entries = Array.from(feed.querySelectorAll('[data-type]'));
+        entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
+        sortBtn.textContent = ascending ? '↑' : '↓';
+        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        sortBtn.classList.toggle('is-active', !ascending);
+    });
+})();
+
 var STATS_GPS = {{ gps_points|json_encode|raw }};
 var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
 
@@ -522,29 +520,108 @@ function parseGpxFiles(urls, callback) {
         }
     }
 
-    // Stats toggle
+    function makePanelToggle(toggleId, blockId) {
-    var statsToggle = document.getElementById('trip-stats-toggle');
+        var toggle = document.getElementById(toggleId);
-    var statsBlock  = document.getElementById('trip-stats-block');
+        var block  = document.getElementById(blockId);
-    if (statsToggle && statsBlock) {
+        if (!toggle || !block) return;
-        statsToggle.addEventListener('click', function() {
+        toggle.addEventListener('click', function() {
-            var isOpen = statsBlock.style.display !== 'none';
+            var isOpen = block.classList.contains('is-open');
-            statsBlock.style.display = isOpen ? 'none' : '';
+            block.classList.toggle('is-open', !isOpen);
-            statsToggle.classList.toggle('is-active', !isOpen);
+            toggle.classList.toggle('is-active', !isOpen);
-            statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+            toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
         });
     }
+    makePanelToggle('trip-stats-toggle',   'trip-stats-block');
+    makePanelToggle('trip-cycling-toggle', 'trip-cycling-block');
 
-    // Cycling toggle (only present when has_gpx)
+    // Close buttons inside panels (mobile only via CSS)
-    var cycToggle = document.getElementById('trip-cycling-toggle');
+    document.querySelectorAll('.trip-panel-close').forEach(function(btn) {
-    var cycBlock  = document.getElementById('trip-cycling-block');
+        var toggleBtn = document.getElementById(btn.getAttribute('data-toggle'));
-    if (cycToggle && cycBlock) {
+        if (toggleBtn) btn.addEventListener('click', function() { toggleBtn.click(); });
-        cycToggle.addEventListener('click', function() {
+    });
-            var isOpen = cycBlock.style.display !== 'none';
+})();
-            cycBlock.style.display = isOpen ? 'none' : '';
+
-            cycToggle.classList.toggle('is-active', !isOpen);
+/* ── Back to top ─────────────────────────────────────────── */
-            cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+document.addEventListener('DOMContentLoaded', function () {
+    var btn = document.getElementById('trip-totop');
+    if (!btn) return;
+    var threshold = window.innerHeight * 0.8;
+    var shown = false;
+    btn.addEventListener('click', function () {
+        history.pushState(null, '', window.location.pathname + window.location.search);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    window.addEventListener('scroll', function () {
+        var shouldShow = window.scrollY > threshold;
+        if (shouldShow !== shown) {
+            shown = shouldShow;
+            btn.classList.toggle('is-visible', shown);
+        }
+    }, { passive: true });
+});
+</script>
+
+<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
+
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.on('afterOpen', function () {
+    var pswp = lightbox.pswp;
+    var keyDir = 0;
+    var clearTimer = null;
+    function onKey(e) {
+        if (e.key === 'ArrowRight') keyDir = 1;
+        else if (e.key === 'ArrowLeft') keyDir = -1;
+        else keyDir = 0;
+    }
+    document.addEventListener('keydown', onKey, true);
+    pswp.on('change', function () {
+        if (!keyDir) return;
+        var dir = keyDir;
+        keyDir = 0;
+        var el = pswp.currSlide && pswp.currSlide.container;
+        if (!el) return;
+        el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
+        el.offsetWidth;
+        el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
+        clearTimeout(clearTimer);
+        clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
+    });
+    pswp.on('close', function () {
+        document.removeEventListener('keydown', onKey, true);
+        clearTimeout(clearTimer);
+    });
+});
+lightbox.init();
+
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
         });
     }
-})();
+});
 </script>
 {% endblock %}