diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index b65d208..6ff0acd 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -252,6 +252,20 @@ export function Navbar() {
   const closeMobile = () => setMobileOpen(false);
 
   return (
+    // Fragment, not just the <header> — NewsletterModal must NOT be a
+    // descendant of it. `backdrop-blur-md` below is a `backdrop-filter`,
+    // which (like `transform`) makes its element a new containing block
+    // for `position: fixed` descendants per spec. Since the header only
+    // gets that class once `scrolled` is true, the modal's `fixed inset-0`
+    // backdrop silently stopped being fixed to the viewport and became
+    // fixed to the 100px-tall header instead — centering math then ran
+    // against that instead of the viewport, clipping the modal to the top
+    // of the page. Exactly reproduced whenever the modal was opened while
+    // scrolled (e.g. after clicking an anchor link), never at the very
+    // top of the page (scrollY <= 8, no backdrop-blur yet) — which is why
+    // it looked tied to "clicked an anchor first" rather than to scroll
+    // position itself.
+    <>
     <header
       className={`sticky top-0 z-50 w-full h-[6.25rem] flex flex-col transition-[background-color,backdrop-filter] duration-300 ${
         scrolled || mobileOpen
@@ -481,8 +495,9 @@ export function Navbar() {
           </Link>
         </div>
       </div>
+    </header>
 
       <NewsletterModal open={newsletterOpen} onClose={() => setNewsletterOpen(false)} />
-    </header>
+    </>
   );
 }