fix(Navbar): stop backdrop-blur from breaking NewsletterModal's fixed positioning

backdrop-filter (backdrop-blur-md, applied to the sticky header once
scrolled) creates a new containing block for position:fixed descendants,
same as transform does. NewsletterModal was rendered inside that header,
so its `fixed inset-0` backdrop silently stopped being fixed to the
viewport once scrolled and became fixed to the 100px header instead,
clipping the modal to the top of the page. Moved the modal to be a
sibling of <header> instead of a child.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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>
+    </>
   );
 }