fix(story): nav title hidden on load, DM Serif Display typography

Was visible on load because story-hero__content starts below the
viewport fold (bottom:18% of 140vh hero) — IO fired immediately
as 'not intersecting'. Fixed with hasBeenVisible flag: nav title
only appears after the element has entered then exited the viewport.

Typography changed from DM Sans/500 to DM Serif Display/400 at
--text-lg (1.375rem) with -0.01em tracking — same face as the
hero title, scaled down for the 60px nav bar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr

themes/intotheeast/css/style.css

@@ -1200,9 +1200,10 @@ body::after {
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
-    font-family: var(--font-ui);
-    font-size: var(--text-sm);
-    font-weight: 500;
+    font-family: var(--font-display);
+    font-size: var(--text-lg);
+    font-weight: 400;
+    letter-spacing: -0.01em;
     color: var(--color-ink);
     white-space: nowrap;
     max-width: 40%;

themes/intotheeast/templates/story.html.twig

@@ -93,8 +93,14 @@
     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) {
-        navTitle.classList.toggle('is-visible', !entries[0].isIntersecting);
+        if (entries[0].isIntersecting) {
+            hasBeenVisible = true;
+            navTitle.classList.remove('is-visible');
+        } else if (hasBeenVisible) {
+            navTitle.classList.add('is-visible');
+        }
     }, { threshold: 0 }).observe(heroContent);
 })();