make overlay blur to adhere to light-dark

css/style.css

@@ -144,8 +144,6 @@
   --radius-xl: 2rem;
   --radius-xxl: 2.5rem;
   
-  --header-offset: 6.5rem;
-  
 
   /* Semantic tokens: contextual usage */
   --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -193,9 +191,8 @@
   
   --border: #d8d8d8;
   --header-offset: 6.5rem;
-  --overlay: rgb(12 12 12 / 0.8);
+  --overlay: light-dark(rgb(247 247 247 / 0.8), rgb(18 18 18 / 0.8));
   --panel: rgb(255 255 255 / 0.76);
-  
 }
 
 *,
@@ -490,7 +487,7 @@ button:active, .button-primary:active, .logo:active {
   position: sticky;
   top: 0;
   padding-top: max(1px, env(safe-area-inset-top));
-  z-index: 100;
+  z-index: 400;
   background-image: linear-gradient(
     180deg,
     light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
@@ -617,13 +614,9 @@ button:active, .button-primary:active, .logo:active {
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-.menu-toggle.is-open {
-  opacity: 0;
-}
-
 .menu-overlay {
   position: fixed;
-  inset: var(--header-offset) 0 0 0;
+  inset: 0;
   background: var(--overlay);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
@@ -635,7 +628,10 @@ button:active, .button-primary:active, .logo:active {
 
 .mobile-menu {
   position: fixed;
-  inset: auto 1rem 1rem 1rem;
+  top: 6.5rem;
+  right: 1rem;
+  bottom: 1rem;
+  left: 1rem;
   width: auto;
   max-width: 24rem;
   margin-inline: auto;
@@ -653,13 +649,6 @@ button:active, .button-primary:active, .logo:active {
   z-index: 300;
 }
 
-.mobile-menu__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
 .mobile-menu ul {
   display: grid;
   gap: 0.5rem;

js/app.js

@@ -2,7 +2,6 @@
 
   const body = document.body;
   const menuToggle = document.getElementById('menuToggle');
-  const menuClose = document.getElementById('menuClose');
   const menuOverlay = document.getElementById('menuOverlay');
   const mobileMenu = document.getElementById('mobileMenu');
   const siteContent = document.getElementById('siteContent');
@@ -15,7 +14,7 @@
 	menuToggle.setAttribute('aria-label', 'Close menu');
 	mobileMenu.setAttribute('aria-hidden', 'false');
 	siteContent.setAttribute('inert', '');
-	menuClose.focus();
+	menuToggle.focus();
   }
 
   function closeMenu() {
@@ -43,7 +42,6 @@
   }
 
   menuToggle.addEventListener('click', toggleMenu);
-  menuClose.addEventListener('click', closeMenu);
   menuOverlay.addEventListener('click', closeMenu);
 
   document.addEventListener('keydown', (event) => {