Revert story-block to 2-col grid, caption inside story-photo sub-grid

html/approach/index.html

@@ -56,8 +56,8 @@
     <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping 10,000 litres of clean water daily" loading="lazy" style="object-position: center 30%;">
-  </div>
     <div class="story-caption">Solar-powered borehole and elevated storage tank, Lolo Camp</div>
+  </div>
       <div class="story-text" style="background: rgba(37,120,161,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--water);">Pillar 1</div>
         <h2 style="color:var(--water);">Water</h2>
@@ -71,8 +71,8 @@
     <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into the red laterite earth" loading="lazy">
-  </div>
     <div class="story-caption">Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm</div>
+  </div>
       <div class="story-text" style="background: rgba(45,106,79,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--green);">Pillar 2</div>
         <h2 style="color:var(--green);">Food</h2>
@@ -86,8 +86,8 @@
     <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/market-fish-sales.jpg" alt="Fresh catfish for sale at the local market — surplus creates livelihoods" loading="lazy" style="object-position: center 40%;">
-  </div>
     <div class="story-caption">Fresh catfish at Lolo market — surplus creates livelihoods</div>
+  </div>
       <div class="story-text" style="background: rgba(107,58,42,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--earth);">Pillar 3</div>
         <h2 style="color:var(--earth);">Livelihoods</h2>
@@ -101,8 +101,8 @@
     <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/children-classroom-light.jpg" alt="Children study at wooden desks in an open-air classroom with corrugated roof" loading="lazy">
-  </div>
     <div class="story-caption">Children study at an open-air classroom, Lolo Camp</div>
+  </div>
       <div class="story-text" style="background: rgba(201,168,76,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--gold);">Pillar 4</div>
         <h2 style="color:var(--gold);">Education</h2>

html/css/style.css

@@ -449,16 +449,16 @@ p { margin-bottom: 16px; max-width: 720px; }
 .story-block {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr auto;
   min-height: 440px;
-  max-height: 620px;
+  max-height: 600px;
   overflow: hidden;
 }
 .story-block.reverse { direction: rtl; }
 .story-block.reverse > * { direction: ltr; }
+/* story-photo is a grid-within-grid: rows = 1fr (image) + auto (caption) */
 .story-photo {
-  grid-row: 1 / 2;
-  grid-column: 1 / 2;
+  display: grid;
+  grid-template-rows: 1fr auto;
   overflow: hidden;
   position: relative;
 }
@@ -472,16 +472,6 @@ p { margin-bottom: 16px; max-width: 720px; }
 .story-block:hover .story-photo img {
   transform: scale(1.03);
 }
-/* Caption: row 2, col 1 (below photo). In rtl blocks, col1 is visually right → follows photo ✓ */
-.story-caption {
-  grid-row: 2 / 3;
-  grid-column: 1 / 2;
-}
-/* story-text: row 1-2, col 2. In rtl blocks, col2 is visually left → correct ✓ */
-.story-text {
-  grid-row: 1 / 3;
-  grid-column: 2 / 3;
-}
 .story-text {
   padding: 64px 48px;
   display: flex;
@@ -1367,7 +1357,7 @@ p { margin-bottom: 16px; max-width: 720px; }
 }
 
 /* ─── Photo Caption Bar (brand mandatory) ─── */
-/* Grid child row 2, col 1 — sits below .story-photo */
+/* Sub-grid row 2 inside .story-photo — naturally below the img */
 .story-caption {
   background: var(--deep);
   color: rgba(245,239,224,0.78);

html/index.html

@@ -152,8 +152,8 @@
 <section class="story-block fade-up">
   <div class="story-photo">
     <img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy">
-  </div>
     <div class="story-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div>
+  </div>
   <div class="story-text">
     <div class="section-label">Flagship Project</div>
     <h2>The Lolo Aquaculture Project</h2>
@@ -166,8 +166,8 @@
 <section class="story-block reverse fade-up">
   <div class="story-photo">
     <img src="/images/children-quran-study.jpg" alt="Children studying Quran on wooden boards at Lolo Camp, February 2025" loading="lazy">
-  </div>
     <div class="story-caption">Children study Quran on wooden alluha boards, Lolo Camp, February 2025</div>
+  </div>
   <div class="story-text">
     <div class="section-label">Why Education Comes Last</div>
     <h2>First the well. Then the farm. Then the school.</h2>