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,9 +36,10 @@
       </button>
     </div>
   </div>
+</nav>
 
-  <!-- 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">
+<!-- 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>
@@ -53,8 +54,7 @@
       <p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
     </form>
   </div>
-  </div>
-</nav>
+</div>
 
 <script nonce="{{ request.csp_nonce|default:'' }}">
 (function(){
@@ -62,8 +62,9 @@
   var menu = document.getElementById('mobile-menu');
   if (btn && menu) {
     btn.addEventListener('click', function(){
-      var open = menu.classList.toggle('hidden');
-      btn.setAttribute('aria-expanded', String(!open));
+      var isOpen = !menu.classList.contains('hidden');
+      menu.classList.toggle('hidden');
+      btn.setAttribute('aria-expanded', String(!isOpen));
     });
   }
 })();