feat(layout): add responsive nav media queries at 36rem breakpoint

Author: danielnaab

src/design/layout.css

@@ -19,6 +19,7 @@
     gap: var(--space-7);
   }
   .site-header {
+    position: relative;
     inline-size: var(--measure-wide);
     margin-inline: auto;
     padding: var(--space-4) var(--space-5);
@@ -93,4 +94,30 @@
       grid-column: 2;
     }
   }
+  /* ---- Responsive navigation ---- */
+  @media (min-width: 36rem) {
+    .mobile-nav-toggle {
+      display: none;
+    }
+    #mobile-nav {
+      display: contents;
+    }
+  }
+  @media (max-width: 36rem) {
+    .site-header nav ul {
+      flex-direction: column;
+      gap: var(--space-3);
+    }
+    #mobile-nav {
+      position: absolute;
+      inset-block-start: 100%;
+      inset-inline-end: var(--space-5);
+      margin: 0;
+      padding: var(--space-4);
+      background: var(--color-surface);
+      border: 1px solid var(--color-surface-alt);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-card);
+    }
+  }
 }