Fix story caption overlay (absolute inside position:relative, gradient bg), nav gap 24px

html/css/style.css

@@ -133,7 +133,7 @@ p { margin-bottom: 16px; max-width: 720px; }
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 32px;
+  gap: 24px;
   list-style: none;
 }
 .nav-links a {
@@ -457,12 +457,14 @@ p { margin-bottom: 16px; max-width: 720px; }
 .story-block.reverse > * { direction: ltr; }
 .story-photo {
   overflow: hidden;
+  position: relative;
 }
 .story-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s;
+  display: block;
 }
 .story-block:hover .story-photo img {
   transform: scale(1.03);
@@ -1352,24 +1354,24 @@ p { margin-bottom: 16px; max-width: 720px; }
 }
 
 /* ─── Photo Caption Bar (brand mandatory) ─── */
+/* Inside .story-photo (overflow:hidden + position:relative) — caption uses absolute */
 .story-caption {
-  font-family: var(--font-body);
-  font-size: 12px;
-  color: var(--muted);
-  padding: 8px 0 0;
-  font-style: italic;
-}
-.story-block .story-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(245, 239, 224, 0.92);
-  padding: 6px 12px;
-  font-style: normal;
+  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);
+  font-family: var(--font-body);
   font-size: 11px;
+  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);
 }
-.story-photo { position: relative; }
 
 /* ─── Community Voice (Caveat) — brand spec: community voices get handwritten treatment ─── */
 .community-voice {