From fc24a9ac6fd4e38c6f5cac3c883bd8840e01b72a Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Mon, 9 Mar 2026 02:36:40 +0800
Subject: [PATCH] Fix story caption overlay (absolute inside position:relative,
 gradient bg), nav gap 24px

---
 html/css/style.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/html/css/style.css b/html/css/style.css
index 7ea091e..7ecce5f 100644
--- a/html/css/style.css
+++ b/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 {