diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index e7526af..2bf5fc7 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -1210,10 +1210,8 @@ body::after {
     overflow: hidden;
     text-overflow: ellipsis;
     opacity: 0;
-    transition: opacity 0.35s ease;
     pointer-events: none;
 }
-.story-nav-title.is-visible { opacity: 1; }
 @media (max-width: 640px) { .story-nav-title { display: none; } }
 
 /* ── Back to top pill ─────────────────────────────────────── */
diff --git a/themes/intotheeast/templates/story.html.twig b/themes/intotheeast/templates/story.html.twig
index 271b011..06b5a43 100644
--- a/themes/intotheeast/templates/story.html.twig
+++ b/themes/intotheeast/templates/story.html.twig
@@ -88,20 +88,37 @@
     update();
 })();
 
-/* ── Story title in nav (fades in when hero title leaves viewport) ─────── */
+/* ── Story title in nav (cross-fades as hero content exits viewport top) ── */
 (function () {
     var navTitle    = document.getElementById('story-nav-title');
     var heroContent = document.querySelector('.story-hero__content');
     if (!navTitle || !heroContent) return;
     var hasBeenVisible = false;
-    new IntersectionObserver(function (entries) {
-        if (entries[0].isIntersecting) {
-            hasBeenVisible = true;
-            navTitle.classList.remove('is-visible');
-        } else if (hasBeenVisible) {
-            navTitle.classList.add('is-visible');
+    var ticking        = false;
+
+    function update() {
+        var rect   = heroContent.getBoundingClientRect();
+        var inView = rect.bottom > 0 && rect.top < window.innerHeight;
+        if (inView) hasBeenVisible = true;
+
+        if (hasBeenVisible) {
+            var opacity;
+            if (rect.bottom <= 0) {
+                opacity = 1;                                    // fully above viewport
+            } else if (rect.top <= 0) {
+                opacity = 1 - rect.bottom / rect.height;       // partially exiting top
+            } else {
+                opacity = 0;                                    // fully in viewport
+            }
+            navTitle.style.opacity = opacity.toFixed(3);
         }
-    }, { threshold: 0 }).observe(heroContent);
+        ticking = false;
+    }
+
+    window.addEventListener('scroll', function () {
+        if (!ticking) { requestAnimationFrame(update); ticking = true; }
+    }, { passive: true });
+    update();
 })();
 
 /* ── Back to top button ─────────────────────────────────── */