fix(lightbox mobile): stack caption/button under photo + hide Ask-MSOS pill

On phones the lightbox caption and "Read the story" button were pinned to the
screen bottom, cramped and overlapped by the floating "Ask MSOS" pill
(z-index above the lightbox). Now:
- lightbox becomes a centred column on <=600px: image -> button -> caption
  flow directly under the photo instead of being absolutely bottom-pinned;
- image capped at 62vh so tall/portrait photos leave room for the button;
- the Ask-MSOS pill is hidden while the viewer is open (body.lightbox-open),
  so it can no longer overlap the controls.
Desktop layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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(); }