asdf

src/components/home/Sectors.astro

@@ -28,7 +28,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
                 tabindex={i === 0 ? undefined : -1}
               >{item.title}</button>
             </h3>
-            <div class="sectors__panel" role="tabpanel" id={`${item.id}-panel`} aria-labelledby={`${item.id}-tab`} tabindex="0">
+            <div class="sectors__panel" role="tabpanel" id={`${item.id}-panel`} aria-labelledby={`${item.id}-tab`} tabindex="0" data-open={i === 0 ? '' : undefined}>
               <div class="sectors__panel-inner">
                 <p class="muted">{item.body}</p>
                 <Picture
@@ -104,7 +104,8 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
   /* The stage image on the right exists for wide screens. On narrow screens each panel carries its own image. */
   .sectors__media { display: none; }
 
-  /* With scripting, one panel at a time; without, everything is readable. */
+  /* With scripting, one panel at a time; without, everything is readable. The first panel is
+     open in the markup, so nothing expands on load and the page below it does not move. */
   :global(html.js) .sectors__panel {
     display: grid;
     grid-template-rows: 0fr;