diff --git a/assets/css/ui.css b/assets/css/ui.css
index 2bb1d97..851c53f 100644
--- a/assets/css/ui.css
+++ b/assets/css/ui.css
@@ -11,6 +11,11 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
 }
 .event-banner-wrap > * {
   overflow: hidden;
diff --git a/assets/js/hooks/useAppState.js b/assets/js/hooks/useAppState.js
index 2932b09..77a52ca 100644
--- a/assets/js/hooks/useAppState.js
+++ b/assets/js/hooks/useAppState.js
@@ -485,6 +485,39 @@ export function useAppState() {
     if (bannerIndex >= activeEvents.length) setBannerIndex(0);
   }, [activeEvents.length]);
 
+  // ── BANNER HEIGHT → shell padding-top ────────────────────────────────
+  // Floats the banner over the page. Padding only grows while open so
+  // shorter slides never cause the page to jump up. Resets on close.
+  const bannerMaxHeightRef = useRef(0);
+
+  useEffect(() => {
+    const shell = document.querySelector('.utci-shell');
+    if (!shell) return;
+
+    if (!bannerVisible) {
+      bannerMaxHeightRef.current = 0;
+      shell.style.paddingTop = '';
+      return;
+    }
+
+    const applyPadding = () => {
+      const wrap = document.querySelector('.event-banner-wrap');
+      if (!wrap) return;
+      const h = wrap.getBoundingClientRect().height;
+      if (h > bannerMaxHeightRef.current) {
+        bannerMaxHeightRef.current = h;
+        shell.style.paddingTop = h + 'px';
+      }
+    };
+
+    const tid = setTimeout(applyPadding, 460);
+    window.addEventListener('resize', applyPadding);
+    return () => {
+      clearTimeout(tid);
+      window.removeEventListener('resize', applyPadding);
+    };
+  }, [bannerVisible, bannerIndex, activeEvents.length]);
+
   // ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
   return {
     // location