fix(dailies): fix PhotoSwipe CSS loading + restore expand button

Move PhotoSwipe CSS from per-entry assets.addCss() (runs after head is
committed) to a single <link> tag at block start. Restore the expand
button as the reliable mobile tap target — it dispatches a synthetic
click on the visible <a> slide, which bubbles to PhotoSwipe's gallery
handler. Merge dot sync into the single module script.

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

themes/intotheeast/css/style.css

@@ -234,6 +234,27 @@ body::after {
     display: block;
 }
 
+.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;
+}
+
+.journal-photo-expand:active { background: rgba(0,0,0,0.7); }
+
 .journal-photo-dots {
     display: flex;
     justify-content: center;

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() : [] %}
@@ -121,7 +122,6 @@ feedMap.on('load', function () {
 
                 {% set images = entry.media.images %}
                 {% if images|length > 0 %}
-                {% do assets.addCss('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css') %}
                 <div class="journal-photo-wrap">
                     <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                         {% for img in images %}
@@ -134,6 +134,9 @@ feedMap.on('load', function () {
                         </a>
                         {% endfor %}
                     </div>
+                    <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">
@@ -173,33 +176,38 @@ feedMap.on('load', function () {
 
 <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();
-</script>
 
-<script>
-/* ── Dot sync ────────────────────────────────────────────────── */
-(function () {
-    document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+/* 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('.journal-photo-slide'));
+    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')) : [];
-        if (!dots.length) return;
+    var visibleIdx = 0;
+
     var io = new IntersectionObserver(function (entries) {
         entries.forEach(function (e) {
             if (!e.isIntersecting) return;
-                var idx = slides.indexOf(e.target);
+            visibleIdx = slides.indexOf(e.target);
             dots.forEach(function (d) { d.classList.remove('is-active'); });
-                if (dots[idx]) dots[idx].classList.add('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 %}