fix: move mobile menu outside nav to prevent playwright strict mode violation

Playwright strict mode requires exactly one match for form[data-newsletter-form]
inside nav. Having desktop + mobile forms both inside <nav> caused a strict
violation. Mobile menu div is now outside the closing </nav> tag; JS toggle
uses getElementById so position doesn't matter.

Rebuild CSS to match template changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

templates/components/nav.html

@@ -36,34 +36,35 @@
       </button>
     </div>
   </div>
-
-  <!-- Mobile Menu -->
-  <div id="mobile-menu" class="md:hidden hidden border-t border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
-    <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-4">
-      <a href="/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Home</a>
-      <a href="/articles/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Articles</a>
-      <a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
-      <form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
-        {% csrf_token %}
-        <input type="hidden" name="source" value="nav-mobile" />
-        <input type="email" name="email" required placeholder="dev@example.com"
-          class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
-        <input type="text" name="honeypot" style="display:none" />
-        <button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
-        <p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
-      </form>
-    </div>
-  </div>
 </nav>
 
+<!-- Mobile Menu (outside <nav> to avoid duplicate form[data-newsletter-form] in nav scope) -->
+<div id="mobile-menu" class="md:hidden hidden sticky top-20 z-40 border-b border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
+  <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-4">
+    <a href="/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Home</a>
+    <a href="/articles/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Articles</a>
+    <a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
+    <form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
+      {% csrf_token %}
+      <input type="hidden" name="source" value="nav-mobile" />
+      <input type="email" name="email" required placeholder="dev@example.com"
+        class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
+      <input type="text" name="honeypot" style="display:none" />
+      <button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
+      <p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
+    </form>
+  </div>
+</div>
+
 <script nonce="{{ request.csp_nonce|default:'' }}">
 (function(){
   var btn = document.querySelector('[data-mobile-menu-toggle]');
   var menu = document.getElementById('mobile-menu');
   if (btn && menu) {
     btn.addEventListener('click', function(){
-      var open = menu.classList.toggle('hidden');
+      var isOpen = !menu.classList.contains('hidden');
-      btn.setAttribute('aria-expanded', String(!open));
+      menu.classList.toggle('hidden');
+      btn.setAttribute('aria-expanded', String(!isOpen));
     });
   }
 })();