feat(docs): add responsive hamburger menu with animations

Implement pure CSS mobile navigation with the following features:

- Collapsible sidebar nav hidden behind hamburger toggle on mobile
- Animated hamburger → X icon morph using CSS transforms
- Smooth slide-down transition for nav reveal (max-height/opacity)
- Hamburger positioned on right side of header via absolute positioning
- Uses :has() selector to detect checkbox state without JavaScript
- Overflow fixes to prevent horizontal scroll on mobile devices

The implementation follows suckless principles with zero JavaScript.

docs/static/style.css

@@ -373,10 +373,42 @@ th {
   background: var(--bg-sidebar);
 }
 
+/* Navigation toggle (hidden by default) */
+.nav-toggle {
+  display: none;
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 24px;
+  height: 18px;
+  cursor: pointer;
+  padding: 0;
+  user-select: none;
+}
+
+.hamburger span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: var(--fg);
+  border-radius: 1px;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  transform-origin: center;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
+  html {
+    overflow-x: hidden;
+  }
+
   body {
     grid-template-columns: 1fr;
+    max-width: 100vw;
+    overflow-x: hidden;
   }
 
   .sidebar {
@@ -384,9 +416,75 @@ th {
     height: auto;
     border-right: none;
     border-bottom: 1px solid var(--border);
+    padding: 1rem 1.5rem;
+  }
+
+  .sidebar header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0;
+  }
+
+  .sidebar .tagline {
+    display: none;
+  }
+
+  /* Position hamburger on right side of header */
+  .sidebar header {
+    position: relative;
+  }
+
+  .hamburger {
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .sidebar nav {
+    flex-direction: column;
+    padding-top: 0;
+    margin-top: 0;
+    border-top: 1px solid var(--border);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
+  }
+
+  /* Show nav when checkbox is checked - checkbox is inside header now */
+  .sidebar:has(.nav-toggle:checked) nav {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: 1rem;
+    padding-top: 1rem;
+  }
+
+  /* Hamburger → X morph animation */
+  .nav-toggle:checked~.hamburger span:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+
+  .nav-toggle:checked~.hamburger span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .nav-toggle:checked~.hamburger span:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+
+  .sidebar-footer {
+    display: none;
   }
 
   main {
-    padding: 2rem 1.5rem;
+    padding: 1.5rem 1rem;
+    max-width: 100%;
+  }
+
+  pre {
+    max-width: calc(100vw - 2rem);
   }
 }