feat(photos): blurred ambient fill, dots overlay, PhotoSwipe on trip + dailies

- object-fit: contain + ::before blurred background fill on all slides
- dots moved inside photo-wrap, overlaid at bottom with shadow for contrast
- arrows hidden on touch devices via @media (hover: none)
- margin-bottom increased for breathing room below photo block
- trip.html.twig brought up to parity with dailies: same structure,
  same PhotoSwipe init, same expand button, same dot overlay

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

themes/intotheeast/css/style.css

@@ -204,7 +204,7 @@ body::after {
 
 .journal-photo-wrap {
     position: relative;
-    margin-bottom: var(--space-3);
+    margin-bottom: var(--space-5);
     border-radius: var(--radius-md);
     overflow: hidden;
 }
@@ -225,12 +225,27 @@ body::after {
     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;
 }
 
@@ -251,27 +266,32 @@ body::after {
     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;
-    justify-content: center;
     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 {
@@ -282,6 +302,10 @@ body::after {
     margin-bottom: var(--space-4);
 }
 
+@media (hover: none) {
+    .strip-controls { display: none; }
+}
+
 .strip-prev,
 .strip-next {
     background: transparent;

themes/intotheeast/templates/dailies.html.twig

@@ -129,22 +129,23 @@ feedMap.on('load', function () {
                            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>
-                {% 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>

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() : [] %}
@@ -246,20 +247,30 @@
 
                         {% 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 class="journal-photo-wrap">
+                            <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
+                                {% 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>
-                            {% endfor %}
+                            {% 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>
-                        {% 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>
@@ -547,4 +558,39 @@ function parseGpxFiles(urls, callback) {
     }
 })();
 </script>
+
+<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.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 %}