diff --git a/css/components/_lightbox.css b/css/components/_lightbox.css
index a31e67e7..7d529e7c 100644
--- a/css/components/_lightbox.css
+++ b/css/components/_lightbox.css
@@ -73,16 +73,33 @@
 .lightbox-project:hover { background: #D9752E; transform: translateX(-50%) translateY(-1px); }
 .lightbox-project[hidden] { display: none; }
 
+/* While the viewer is open, hide the floating "Ask MSOS" pill so it can't
+   overlap the caption / "Read the story" button. */
+body.lightbox-open .msa-root { display: none !important; }
+
 @media (max-width: 700px) {
     .event-gallery { margin: 36px 0 8px; }
     .event-gallery-title { font-size: 19px; margin: 0 0 12px; }
     .event-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
 }
 @media (max-width: 600px) {
-    .lightbox { padding: 12px; }
-    .lightbox-img { max-width: 96vw; max-height: 80vh; }
+    /* Stack image -> "Read the story" -> caption in a centred column so the
+       button and caption sit directly under the photo instead of pinned to the
+       screen bottom (where they were cramped and clashed with the pill). The
+       reduced image height guarantees room below even for tall/portrait photos. */
+    .lightbox { padding: 12px; flex-direction: column; justify-content: center; gap: 14px; }
+    .lightbox-img { max-width: 96vw; max-height: 62vh; }
     .lightbox-prev { left: 8px; }
     .lightbox-next { right: 8px; }
     .lightbox-close { top: 12px; right: 12px; }
-    .lightbox-caption { font-size: 12.5px; bottom: 12px; }
+    .lightbox-project {
+        position: static; transform: none; left: auto; bottom: auto;
+        margin: 0; flex: 0 0 auto;
+    }
+    .lightbox-project:hover { transform: none; }
+    .lightbox-caption {
+        position: static; left: auto; right: auto; bottom: auto;
+        flex: 0 0 auto; max-width: 92vw; margin: 0 auto;
+        font-size: 12.5px;
+    }
 }
diff --git a/main.js b/main.js
index ee4a5d62..984ce260 100644
--- a/main.js
+++ b/main.js
@@ -907,11 +907,14 @@ document.addEventListener('DOMContentLoaded', function() {
             lb.classList.add('is-open');
             lb.setAttribute('aria-hidden', 'false');
             document.documentElement.style.overflow = 'hidden';
+            // hide the floating "Ask MSOS" pill so it doesn't overlap the viewer
+            document.body.classList.add('lightbox-open');
         }
         function close() {
             lb.classList.remove('is-open');
             lb.setAttribute('aria-hidden', 'true');
             document.documentElement.style.overflow = '';
+            document.body.classList.remove('lightbox-open');
             img.setAttribute('src', '');
         }
         function step(d) { idx = (idx + d + group.length) % group.length; render(); }