Update capabilities.html

capabilities.html

@@ -404,7 +404,6 @@
           </button>
         </div>
 
-        <!-- Inline feedback (replaces alert) -->
         <div id="access-feedback"
           class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm"
           role="status" aria-live="polite"></div>
@@ -530,24 +529,33 @@
 
   <script>
     /* -------------------------------------------------------------
-       VANTA BACKGROUND
+       VANTA BACKGROUND (guarded)
     ------------------------------------------------------------- */
-    const vantaEffect = VANTA.NET({
-      el: "#vanta-bg",
-      mouseControls: true,
-      touchControls: true,
-      gyroControls: false,
-      minHeight: 200.00,
-      minWidth: 200.00,
-      scale: 1.00,
-      scaleMobile: 1.00,
-      color: 0x4f46e5,
-      backgroundColor: 0x020617,
-      points: 12.00,
-      maxDistance: 20.00,
-      spacing: 15.00
+    let vantaEffect = null;
+    try {
+      if (window.VANTA && typeof VANTA.NET === 'function') {
+        vantaEffect = VANTA.NET({
+          el: "#vanta-bg",
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.00,
+          minWidth: 200.00,
+          scale: 1.00,
+          scaleMobile: 1.00,
+          color: 0x4f46e5,
+          backgroundColor: 0x020617,
+          points: 12.00,
+          maxDistance: 20.00,
+          spacing: 15.00
+        });
+      }
+    } catch (_) {
+      vantaEffect = null;
+    }
+    window.addEventListener('resize', () => {
+      if (vantaEffect && typeof vantaEffect.resize === 'function') vantaEffect.resize();
     });
-    window.addEventListener('resize', () => vantaEffect.resize());
 
     /* -------------------------------------------------------------
        MODAL HELPERS (focus trap + restore opener focus)
@@ -580,7 +588,7 @@
 
     const toggleModal = (modal, show) => {
       if (show) {
-        modal._opener = document.activeElement; // restore target on close
+        modal._opener = document.activeElement;
         modal.classList.remove('modal-hidden');
         modal.classList.add('modal-visible');
         document.body.style.overflow = 'hidden';
@@ -598,8 +606,8 @@
     };
 
     /* -------------------------------------------------------------
-       ACCESS MODAL + INLINE FEEDBACK (replaces alerts)
-   ------------------------------------------------------------- */
+       ACCESS MODAL + INLINE FEEDBACK
+    ------------------------------------------------------------- */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
@@ -607,7 +615,6 @@
     const accessFeedback = document.getElementById('access-feedback');
 
     function setAccessFeedback(kind, text) {
-      // kind: 'error' | 'success' | 'info'
       accessFeedback.classList.remove('hidden');
       accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200');
       accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
@@ -698,6 +705,7 @@
        DOSSIERS
        + Hash deep-linking (#mcap, #chai, etc.)
        + Active-card state (aria-pressed)
+       + popstate handling for back/forward reliability
     ------------------------------------------------------------- */
     const DOSSIERS = {
       mcap: {
@@ -815,7 +823,6 @@
         const isMatch = btn.getAttribute('data-dossier') === key;
         btn.classList.toggle('is-active', isMatch);
         btn.setAttribute('aria-pressed', String(isMatch));
-        btn.removeAttribute('aria-current');
       });
     }
 
@@ -866,9 +873,7 @@
 
       if (!opts.replaceHash) {
         const isSmall = window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
-        if (isSmall) {
-          dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
+        if (isSmall) dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
       }
     }
 
@@ -893,8 +898,13 @@
       }
     });
 
+    window.addEventListener('popstate', () => {
+      const keyFromHash = normalizeHashToKey() || 'mcap';
+      renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
+    });
+
     /* -------------------------------------------------------------
-       GLOBAL ESC BEHAVIOR (single source of truth)
+       GLOBAL ESC BEHAVIOR
     ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {