diff --git a/html/css/style.css b/html/css/style.css
index 7ecce5f..01bead7 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -458,10 +458,13 @@ p { margin-bottom: 16px; max-width: 720px; }
 .story-photo {
   overflow: hidden;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .story-photo img {
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  height: 100%;
   object-fit: cover;
   transition: transform 0.6s;
   display: block;
@@ -1354,23 +1357,17 @@ p { margin-bottom: 16px; max-width: 720px; }
 }
 
 /* ─── Photo Caption Bar (brand mandatory) ─── */
-/* Inside .story-photo (overflow:hidden + position:relative) — caption uses absolute */
+/* Uses flex-column in .story-photo — img grows, caption sits below */
 .story-caption {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(to top, rgba(61,31,21,0.82) 0%, rgba(61,31,21,0) 100%);
-  color: rgba(245,239,224,0.92);
+  flex-shrink: 0;
+  background: var(--deep);
+  color: rgba(245,239,224,0.75);
   font-family: var(--font-body);
-  font-size: 11px;
+  font-size: 10.5px;
   font-style: italic;
   letter-spacing: 0.01em;
-  padding: 32px 16px 10px;
-  z-index: 2;
-  pointer-events: none;
-  /* Ensure it renders above the hover transform */
-  transform: translateZ(0);
+  padding: 6px 14px;
+  line-height: 1.4;
 }
 
 /* ─── Community Voice (Caveat) — brand spec: community voices get handwritten treatment ─── */