content: refresh the River hero screenshot in both schemes

hugo-site/content/_index.md

@@ -37,14 +37,14 @@ side.</p>
     </span>
     <picture>
       <source type="image/webp" srcset="/images/river-hero-dark.webp"
-              media="(prefers-color-scheme: dark)" width="1290" height="867">
+              media="(prefers-color-scheme: dark)" width="1800" height="886">
       <source type="image/webp" srcset="/images/river-hero-light.webp"
-              width="1379" height="1269">
+              width="1800" height="886">
       <source srcset="/images/river-screenshot-dark.png"
-              media="(prefers-color-scheme: dark)" width="1290" height="867">
+              media="(prefers-color-scheme: dark)" width="1800" height="886">
       <img src="/images/river-screenshot-light.png"
-           alt="A live River chat room, the Freenet Official room, showing messages and a member list"
-           width="1379" height="1269" fetchpriority="high" decoding="async">
+           alt="A live River chat room, the Freenet room, showing a room list, a conversation and a member list"
+           width="1800" height="886" fetchpriority="high" decoding="async">
     </picture>
   </a>
 </div>

hugo-site/static/slides/demo/river.html

@@ -5,7 +5,7 @@ <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">River: Decentralized Chat</h2>
     <!-- Screenshot -->
     <div style="display: flex; justify-content: center; align-items: center;">
       <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 30px rgba(79,172,254,0.3);">
-        <img src="/images/river-screenshot-dark.png" alt="River Chat" style="max-height: 45vh; display: block;">
+        <img src="/images/river-screenshot-dark.png" alt="River Chat" style="max-height: 45vh; max-width: 100%; display: block;">
       </div>
     </div>
 

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

@@ -363,12 +363,15 @@
 }
 
 /* Natural aspect ratio, no cropping. A fixed height with object-fit: cover was
-   tried and reverted: the light and dark screenshots have different aspect
-   ratios (1379x1269 against 1290x867), so any height tall enough to suit the
-   light one crops the DARK one horizontally, which removed the member list
-   entirely and sliced message text mid-word. The two schemes therefore have
-   slightly different hero heights, which nobody sees, and both show the whole
-   screenshot, which everybody does.
+   tried and reverted back when the two screenshots had different aspect ratios
+   (1379x1269 light against 1290x867 dark): any height tall enough for the light
+   one cropped the DARK one horizontally, removing the member list and slicing
+   message text mid-word.
+
+   Both are now captured in one pass at the same viewport, so they are both
+   1800x910 and the two schemes render at identical heights. The cropping hazard
+   above is therefore gone, but there is still nothing to gain from object-fit:
+   cover, so this stays as it is.
 
    The width/height attributes on each <source> reserve the correct box before
    the image lands, so this costs no layout shift. */

hugo-site/themes/freenet/layouts/river/baseof.html

@@ -9,6 +9,8 @@
     <meta property="og:type" content="website">
     <meta property="og:url" content="{{ .Permalink }}">
     <meta property="og:image" content="{{ "images/river-screenshot-light.png" | absURL }}">
+    <meta property="og:image:width" content="1800">
+    <meta property="og:image:height" content="886">
     <meta name="twitter:card" content="summary_large_image">
     <style>
     /* ===== River landing page (scoped to .river-page; loads only on /river) ===== */

hugo-site/themes/freenet/layouts/river/list.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
 {{- $light := "images/river-screenshot-light.png" | relURL -}}
 {{- $dark := "images/river-screenshot-dark.png" | relURL -}}
+{{- $lightWebp := "images/river-hero-light.webp" | relURL -}}
+{{- $darkWebp := "images/river-hero-dark.webp" | relURL -}}
 {{- $logo := "images/river_logo.svg" | relURL -}}
 
 <!-- ===================== HERO ===================== -->
@@ -41,11 +43,16 @@ <h1 class="rv-h1">Group chat <span class="rv-grad">without the company in the mi
           </span>
         </div>
         <picture>
-          {{/* The dark screenshot is 1290x867, a different aspect ratio from the
-               light one, so it needs its own dimensions or the reserved box is
-               the wrong shape in dark mode. */}}
-          <source srcset="{{ $dark }}" media="(prefers-color-scheme: dark)" width="1290" height="867">
-          <img src="{{ $light }}" alt="A live River chat room, the Freenet Official room, with a member list and messages" width="1379" height="1269" fetchpriority="high">
+          {{/* Both screenshots are captured in one pass at the same viewport, so
+               they share one aspect ratio and one set of dimensions. They used to
+               be 1290x867 dark against 1379x1269 light and needed separate boxes.
+
+               WebP first: this is the LCP image on this page and it was loading
+               the PNG fallback, which is more than twice the size in dark. */}}
+          <source type="image/webp" srcset="{{ $darkWebp }}" media="(prefers-color-scheme: dark)" width="1800" height="886">
+          <source type="image/webp" srcset="{{ $lightWebp }}" width="1800" height="886">
+          <source srcset="{{ $dark }}" media="(prefers-color-scheme: dark)" width="1800" height="886">
+          <img src="{{ $light }}" alt="A live River chat room, the Freenet room, with a room list, messages and a member list" width="1800" height="886" fetchpriority="high">
         </picture>
       </div>
     </div>