fix: dropdown hover gap and z-index so menu is clickable on desktop and mobile

Invisible bridge element fills the gap between toggle and menu so
hover chain doesn't break. Dropdown z-index raised above hero graphic
so links aren't obscured on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

website/style.css

@@ -114,18 +114,27 @@ header nav a:hover { color: var(--text); opacity: 1; }
   cursor: pointer;
 }
 
-.nav-dropdown-menu {
-  display: none;
+/* Invisible bridge between toggle and menu so hover doesn't break */
+.nav-dropdown::after {
+  content: '';
   position: absolute;
   top: 100%;
   right: 0;
-  margin-top: 0.5rem;
+  width: 100%;
+  height: 0.5rem;
+}
+
+.nav-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   padding: 0.5rem 0;
   min-width: 140px;
-  z-index: 100;
+  z-index: 200;
 }
 
 .nav-dropdown-menu a {
@@ -153,6 +162,8 @@ header nav a:hover { color: var(--text); opacity: 1; }
 
 .hero-graphic {
   margin-bottom: 2.5rem;
+  position: relative;
+  z-index: 1;
 }
 
 .hero-husky {