Add mobile nav toggle, responsive admin tables, and menu reordering

- Public site: replace the always-hidden mobile nav with a hamburger
  toggle (index.php, menu.php, main.js, styles.css)
- Admin: render the Menu/Announcements/Users tables as labeled cards
  below ~760px instead of squeezing descriptions into unreadable
  single-word-per-line columns
- Admin menu: replace the manual "Order" number (which allowed
  duplicates and never reflected in real time) with ↑/↓ buttons that
  reorder items and categories immediately and renumber sort_order
  sequentially on every move, self-healing any stale duplicates

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

index.php

@@ -50,7 +50,18 @@ $siteUrl = rtrim(SITE_URL, '/');
         <img class="knot" src="./assets/knot.png" alt="">
         <span>THE OLD FITZ</span>
       </a>
-      <nav class="links" aria-label="Primary">
+      <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="primary-nav">
+        <svg class="icon-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+        <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="5" y1="5" x2="19" y2="19" />
+          <line x1="19" y1="5" x2="5" y2="19" />
+        </svg>
+      </button>
+      <nav class="links" id="primary-nav" aria-label="Primary">
         <a href="#about">About</a>
         <a href="#visit">Hours &amp; Visit</a>
         <a href="#music">Live Music</a>
@@ -286,22 +297,7 @@ $siteUrl = rtrim(SITE_URL, '/');
     </div>
   </footer>
 
-  <script>
-    (function() {
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-      var els = document.querySelectorAll('.reveal');
-      if (!('IntersectionObserver' in window)) { els.forEach(function(e) { e.classList.add('is-visible'); }); return; }
-      var io = new IntersectionObserver(function(entries) {
-        entries.forEach(function(entry) {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('is-visible');
-            io.unobserve(entry.target);
-          }
-        });
-      }, { threshold: 0.15 });
-      els.forEach(function(e) { io.observe(e); });
-    })();
-  </script>
+  <script src="main.js" defer></script>
 </body>
 
 </html>