fix: rework mobile nav as fixed overlay, add 3-line burger

- Nav menu is now a fixed fullscreen overlay (opacity fade)
- Header stays at 3.5rem height, no height animation
- Burger has 3 lines, middle fades out on open
- Body scroll locked with overflow: hidden when menu open
- Various mobile layout fixes (handles, system, footer padding)
- Header full-width with no border-radius on mobile

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

assets/css/src/_mobile.scss

@@ -7,54 +7,66 @@ body.no-scroll {
   // ---- HEADER ----
   body > header {
     position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 3.5rem;
-    overflow: hidden;
-    transition: height 0.4s ease;
+    margin: 0;
+    border-radius: 0;
     box-sizing: border-box;
     padding: 1rem var(--padding-body);
+    z-index: 9999;
 
     nav {
       display: flex;
-      flex-wrap: wrap;
       align-items: center;
-      height: 100%;
+      position: relative;
+      z-index: 2;
 
       .nav-logo {
         display: block;
         font-size: 1rem;
-        order: 1;
+        z-index: 2;
       }
 
       .burger {
-        order: 2;
         margin-left: auto;
-        width: 2rem;
-        height: 2rem;
+        width: 7.125rem;
+        height: 1.25rem;
         position: relative;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
-        gap: 0.4rem;
+        z-index: 2;
 
         span {
           display: block;
           width: 100%;
-          height: 1.5px;
+          height: 1px;
           background-color: #fff;
           transition: transform 0.3s ease, opacity 0.3s ease;
+          transform-origin: center;
         }
       }
 
+      // Full-screen overlay
       ul {
-        order: 3;
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
         width: 100%;
+        height: 100dvh;
+        background-color: var(--color-blue);
         flex-direction: column;
         align-items: flex-start;
-        gap: 0;
-        padding-top: 3rem;
+        padding: 6rem var(--padding-body) 2rem;
+        box-sizing: border-box;
+        z-index: 1;
         opacity: 0;
-        transition: opacity 0.3s ease 0.1s;
+        pointer-events: none;
+        transition: opacity 0.3s ease-in-out;
 
         li {
           width: 100%;
@@ -62,18 +74,18 @@ body.no-scroll {
           a {
             display: block;
             padding: 0.5rem 0;
+            font-size: 2.5rem;
+            font-weight: 400;
           }
         }
 
         li:first-child {
           width: 100%;
           font-size: 2.5rem;
-          margin-bottom: 1rem;
 
           a {
             font-family: var(--font-narrow);
             text-transform: uppercase;
-            font-weight: 700;
           }
         }
 
@@ -87,22 +99,22 @@ body.no-scroll {
     }
 
     // ---- OPEN STATE ----
-    &.nav-open {
-      height: 100vh;
-      height: 100dvh;
+    &.nav-open nav {
+      ul {
+        opacity: 1;
+        pointer-events: all;
+      }
 
-      nav {
-        .burger span:first-child {
-          transform: rotate(45deg) translateY(0.2rem);
-        }
+      .burger span:nth-child(2) {
+        opacity: 0;
+      }
 
-        .burger span:last-child {
-          transform: rotate(-45deg) translateY(-0.2rem);
-        }
+      .burger span:first-child {
+        transform: translateY(0.55rem) rotate(10deg);
+      }
 
-        ul {
-          opacity: 1;
-        }
+      .burger span:last-child {
+        transform: translateY(-0.55rem) rotate(-10deg);
       }
     }
   }
@@ -112,6 +124,10 @@ body.no-scroll {
     padding-top: 3.5rem;
   }
 
+  section {
+    scroll-margin-top: calc(4.8125rem + 1rem);
+  }
+
   // ---- HERO ----
   section#hero {
     height: auto;
@@ -198,6 +214,7 @@ body.no-scroll {
   // ---- HANDLES ----
   section#handles {
     margin: 3rem var(--padding-body);
+    padding: 0;
 
     header {
       flex-direction: column;
@@ -231,6 +248,7 @@ body.no-scroll {
   section#system {
     flex-direction: column;
     margin: 3rem var(--padding-body);
+    padding: 0;
     gap: 3rem;
 
     .text {
@@ -248,6 +266,7 @@ body.no-scroll {
 
     figure {
       width: 100%;
+      margin: 0;
       height: auto;
     }
   }