fix: screenshot lightbox positioning by appending overlay to body

position:fixed inside CSS grid ancestors doesn't work reliably.
Switched to a small JS approach that creates the lightbox overlay
directly on document.body, ensuring correct fullscreen positioning.

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

Author: sanity

hugo-site/content/_index.md

@@ -20,13 +20,31 @@ are unstoppable, interoperable, and built on open protocols.
 River is a decentralized group chat built on Freenet. No servers, no signups—just encrypted
 conversations that work even if we disappear tomorrow.
 
-<div class="screenshot-container" onclick="this.classList.toggle('expanded')">
+<div class="screenshot-container">
 <picture class="app-screenshot">
   <source srcset="/images/river-screenshot-dark.png" media="(prefers-color-scheme: dark)">
   <img src="/images/river-screenshot-light.png" alt="River - decentralized chat on Freenet">
 </picture>
 </div>
 
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  var container = document.querySelector('.screenshot-container');
+  if (!container) return;
+  container.addEventListener('click', function() {
+    var img = container.querySelector('img');
+    var overlay = document.createElement('div');
+    overlay.className = 'screenshot-lightbox';
+    var clone = document.createElement('img');
+    clone.src = img.currentSrc || img.src;
+    clone.alt = img.alt;
+    overlay.appendChild(clone);
+    overlay.addEventListener('click', function() { overlay.remove(); });
+    document.body.appendChild(overlay);
+  });
+});
+</script>
+
 </div>
 
 <div class="news-column">

hugo-site/themes/freenet/assets/css/freenet.css

@@ -606,10 +606,6 @@ p.page-end-spacer {
   opacity: 1;
 }
 
-.screenshot-container.expanded::after {
-  display: none;
-}
-
 picture.app-screenshot {
   display: block;
   max-width: 100%;
@@ -621,11 +617,10 @@ picture.app-screenshot img {
   border: 1px solid rgba(0, 0, 0, 0.08);
   max-width: 100%;
   height: auto;
-  transition: all 0.3s ease;
 }
 
-/* Expanded state - fullscreen lightbox */
-.screenshot-container.expanded {
+/* Fullscreen lightbox (appended to body via JS) */
+.screenshot-lightbox {
   position: fixed;
   top: 0;
   left: 0;
@@ -639,15 +634,7 @@ picture.app-screenshot img {
   cursor: zoom-out;
 }
 
-.screenshot-container.expanded picture.app-screenshot {
-  position: relative;
-  z-index: 1;
-  max-width: 90vw;
-  max-height: 90vh;
-  margin: 0;
-}
-
-.screenshot-container.expanded picture.app-screenshot img {
+.screenshot-lightbox img {
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;