Fix navigation downwards from hero section that was leaving a focus marker on the bottom row tile.

frontend/src/components/CollageHero.vue

@@ -134,6 +134,7 @@ function updateVisibility() {
 
 onMounted(() => {
   window.addEventListener('resize', updateVisibility);
+  document.addEventListener('focusin', handleDocumentFocusIn);
   // Initial visibility check after render
   nextTick(() => {
     updateVisibility();
@@ -142,8 +143,20 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateVisibility);
+  document.removeEventListener('focusin', handleDocumentFocusIn);
 });
 
+function clearHeroFocus() {
+  focusedIndex.value = null;
+}
+
+function handleDocumentFocusIn(event: FocusEvent) {
+  const target = event.target as HTMLElement | null;
+  if (!target?.closest('.collage-hero')) {
+    clearHeroFocus();
+  }
+}
+
 // Coordinate system for navigation based on actual CSS positioning:
 // Visual layout (honeycomb stagger, but sequential cols for navigation):
 //   top=-12.5%:    [1]      [3]   [6]   [9]  [12] [15]    <- row 0
@@ -376,7 +389,11 @@ function handleKeyDown(e: KeyboardEvent) {
     e.stopPropagation();
     focusedIndex.value = next;
     itemRefs.value[next]?.focus({ preventScroll: true });
+    return;
   }
+
+  // Navigation is leaving this section; clear local highlight and let global handler continue.
+  clearHeroFocus();
   // If next is null, let event bubble to global navigation
 }