From 999dda22df9a3bce435dc978afcd2742bc08ae72 Mon Sep 17 00:00:00 2001
From: Joe Gitta <jgitta@jgitta.com>
Date: Wed, 27 May 2026 14:27:15 +0000
Subject: [PATCH] deploy: smooth scroll newspaper focus

---
 news.html | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/news.html b/news.html
index 4e79f4c..24af8d4 100644
--- a/news.html
+++ b/news.html
@@ -144,13 +144,12 @@
     .story-body {
       max-height: 0;
       overflow: hidden;
-      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
+      transition: max-height 0.35s ease-in-out;
       background: rgba(0, 0, 0, 0.2);
     }
 
     .story-card.open .story-body {
-      max-height: 3000px; /* high value to guarantee no truncation */
-      transition: max-height 0.3s ease-in;
+      /* Transition is controlled dynamically via JS max-height for perfect animations */
     }
 
     .story-content {
@@ -289,17 +288,38 @@
       });
     }
 
-    // Interactive in-place accordion expansion
+    // Interactive in-place accordion expansion with scroll-to-focus
     function toggleStory(headerElement) {
       const card = headerElement.parentElement;
+      const body = card.querySelector('.story-body');
       const isOpen = card.classList.contains('open');
 
-      // Close all other story cards in the same list to keep it neat
-      const allCards = card.parentElement.querySelectorAll('.story-card');
-      allCards.forEach(c => c.classList.remove('open'));
+      // Close ALL other story cards globally across all categories
+      const allCards = document.querySelectorAll('.story-card');
+      allCards.forEach(c => {
+        if (c !== card) {
+          c.classList.remove('open');
+          const b = c.querySelector('.story-body');
+          if (b) {
+            b.style.maxHeight = '0px';
+          }
+        }
+      });
 
       if (!isOpen) {
         card.classList.add('open');
+        if (body) {
+          body.style.maxHeight = body.scrollHeight + 'px';
+        }
+        // Smoothly scroll the newly opened story card to the top of the viewport
+        setTimeout(() => {
+          card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }, 100);
+      } else {
+        card.classList.remove('open');
+        if (body) {
+          body.style.maxHeight = '0px';
+        }
       }
     }