diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 9917153..6fc42fc 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -1305,14 +1305,23 @@ body::after {
 .scrolly__caption {
     position: absolute;
     bottom: var(--space-4);
-    left: var(--space-4);
-    right: var(--space-4);
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
     font-family: var(--font-ui);
     font-size: var(--text-xs);
-    color: rgba(255,255,255,0.65);
+    color: rgba(255,255,255,0.85);
     text-align: center;
     pointer-events: none;
     margin: 0;
+    white-space: nowrap;
+    max-width: 85%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: rgba(0,0,0,0.45);
+    padding: 0.2rem 0.65rem;
+    border-radius: 2px;
+    z-index: 2;
 }
 .scrolly__steps-content { display: none; }
 .scrolly-step { min-height: 60vh; display: flex; align-items: center; padding: var(--space-16) var(--space-8); }
diff --git a/themes/intotheeast/templates/story.html.twig b/themes/intotheeast/templates/story.html.twig
index 5266f20..47781b8 100644
--- a/themes/intotheeast/templates/story.html.twig
+++ b/themes/intotheeast/templates/story.html.twig
@@ -63,10 +63,15 @@
     if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
     function update() {
-        var progress = Math.min(window.scrollY / window.innerHeight, 1);
-        overlay.style.background = 'rgba(0,0,0,' + (progress * 0.65).toFixed(3) + ')';
-        if (progress >= 1) overlay.style.display = 'none';
-        else overlay.style.display = '';
+        var scrollY  = window.scrollY;
+        var vh       = window.innerHeight;
+        var heroEnd  = vh * 1.4; // img-wrap (100vh) + spacer (40vh)
+        var mid      = heroEnd * 0.5; // peak darkness at 70vh
+        var opacity  = scrollY <= mid
+            ? (scrollY / mid) * 0.65
+            : Math.max(0, (1 - (scrollY - mid) / (heroEnd - mid)) * 0.65);
+        overlay.style.background = 'rgba(0,0,0,' + opacity.toFixed(3) + ')';
+        overlay.style.display = (opacity < 0.002) ? 'none' : '';
         if (!hidden && window.scrollY > 80) {
             cue.classList.add('is-hidden');
             hidden = true;