feat: replace menu opacity hack with proper overlay

- Add #menu-overlay div (fixed, full screen, z-index below menu)
- Overlay fades in/out via opacity+visibility transition (cursor: pointer)
- Click on overlay closes the menu
- Remove opacity: 0.1 hack on main/footer/etc. when menu-open

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

assets/css/base/_body.scss

@@ -139,10 +139,6 @@ body, #site-header, #site-footer{
 body.menu-open,
 body.is-hidden{
     overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar__inner{
-        transition: opacity .3s ease-in;
-        opacity: 0.1;
-    }
 }
 
 

assets/css/partials/_site-menu.scss

@@ -75,16 +75,33 @@
     }
 }
 
+#menu-overlay{
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-header) - 2);
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .3s ease-in, visibility .3s ease-in;
+}
+
 body.menu-open{
 
     #site-menu{
         right: 0;
-
     }
 
     #menu-toggle{
         .open{ display: none; }
         .close{ display: block!important; }
     }
-  
+
+    #menu-overlay{
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
 }