refactor: use idiomatic hyperscript selector syntax

Replace verbose document.getElementById() and document.querySelectorAll()
with cleaner hyperscript syntax:
- #id for ID selectors
- .class and the first .class for class selectors
- <selector/> query literals for complex selectors
- #{variable} for dynamic ID interpolation

Files changed:
- utils._hs: scrollHeight, details, footer buttons, scrollToSection
- zoom._hs: all zoom control element selectors (14 changes)
- pdf-modal._hs: modal selector
- keyboard._hs: dynamic toggle and modal selectors
- contact-modal.html: response div and modal close
- index.html: ninja-keys bar selector

static/hyperscript/keyboard._hs

@@ -8,9 +8,9 @@
 -- Helper function to toggle a checkbox by ID (tries primary ID, then menu ID)
 -- Called from inline keyboard handler in body tag
 def handleToggleShortcut(toggleId, menuToggleId)
-  set toggle to document.getElementById(toggleId)
+  set toggle to #{toggleId}
   if toggle is null
-    set toggle to document.getElementById(menuToggleId)
+    set toggle to #{menuToggleId}
   end
   if toggle is not null
     set toggle.checked to (not toggle.checked)
@@ -23,7 +23,7 @@ end
 -- ==============================================================================
 -- Helper function to open a modal dialog by ID
 def openModalShortcut(modalId)
-  set modal to document.getElementById(modalId)
+  set modal to #{modalId}
   if modal is not null
     call modal.showModal()
   end

static/hyperscript/pdf-modal._hs

@@ -9,7 +9,7 @@
 -- Called from each card's click event
 def selectPdfCard(card)
   -- Get the modal container
-  set modal to document.getElementById('pdf-modal')
+  set modal to #pdf-modal
   if modal is null then exit end
 
   -- Remove selected from all cards

static/hyperscript/utils._hs

@@ -67,8 +67,8 @@ def handleScroll()
   set isMenuOpen to menu.classList.contains('menu-open')
 
   -- Calculate if at bottom (within 50px)
-  set scrollHeight to document.documentElement.scrollHeight
+  set scrollHeight to the document's documentElement's scrollHeight
-  set clientHeight to document.documentElement.clientHeight
+  set clientHeight to the document's documentElement's clientHeight
   set isAtBottom to (scrollHeight - currentScroll - clientHeight) < 50
 
   -- Reset keepHeaderVisible when scrolling up
@@ -144,7 +144,7 @@ end
 -- Expand all <details> elements in the CV
 def expandAllSections(evt)
   if evt then call evt.preventDefault() end
-  set details to document.querySelectorAll('details')
+  set details to <details/>
   for d in details
     set d's @open to ''
   end
@@ -153,7 +153,7 @@ end
 -- Collapse all <details> elements in the CV
 def collapseAllSections(evt)
   if evt then call evt.preventDefault() end
-  set details to document.querySelectorAll('details')
+  set details to <details/>
   for d in details
     call d.removeAttribute('open')
   end
@@ -164,7 +164,7 @@ end
 -- ==============================================================================
 -- Adds/removes footer-hovered class to fixed buttons when hovering footer
 def setFooterHover(show)
-  set buttons to document.querySelectorAll('.download-btn, .print-friendly-btn, .shortcuts-btn, .info-button, .back-to-top, .color-theme-switcher')
+  set buttons to <.download-btn, .print-friendly-btn, .shortcuts-btn, .info-button, .back-to-top, .color-theme-switcher/>
   for btn in buttons
     if show
       add .footer-hovered to btn
@@ -199,11 +199,11 @@ end
 -- Smooth scroll to a section by ID
 def scrollToSection(evt, sectionId)
   if evt then call evt.preventDefault() end
-  set el to document.getElementById(sectionId)
+  set el to #{sectionId}
   if el is not null
     call el.scrollIntoView({ behavior: 'smooth' })
     -- Close the menu after navigation
-    set menu to document.querySelector('.navigation-menu')
+    set menu to the first .navigation-menu
     if menu is not null
       remove .menu-hover from menu
       remove .menu-open from menu

static/hyperscript/zoom._hs

@@ -11,7 +11,7 @@ def handleZoomInput(slider)
   set zoomLevel to zoomValue / 100
 
   -- Update display
-  set valueEl to document.getElementById('zoom-value-current')
+  set valueEl to #zoom-value-current
   if valueEl is not null
     put zoomValue into valueEl
   end
@@ -19,7 +19,7 @@ def handleZoomInput(slider)
   set slider's @aria-valuetext to `${zoomValue}%`
 
   -- Toggle reset button class
-  set resetBtn to document.getElementById('zoom-reset')
+  set resetBtn to #zoom-reset
   if resetBtn is not null
     if zoomValue is not 100
       add .zoom-not-default to resetBtn
@@ -29,7 +29,7 @@ def handleZoomInput(slider)
   end
 
   -- Apply zoom to wrapper
-  set wrapper to document.getElementById('zoom-wrapper')
+  set wrapper to #zoom-wrapper
   if wrapper is not null
     set wrapper's *zoom to zoomLevel
     -- Handle width for zoom > 100%
@@ -53,7 +53,7 @@ end
 -- ==============================================================================
 -- Called from reset button to reset zoom to 100%
 def handleZoomReset()
-  set slider to document.getElementById('zoom-slider')
+  set slider to #zoom-slider
   if slider is not null
     set slider.value to 100
     call handleZoomInput(slider)
@@ -73,7 +73,7 @@ def initZoomControl(control)
 
   -- Load saved zoom level
   set savedZoom to localStorage.getItem('cv-zoom')
-  set slider to document.getElementById('zoom-slider')
+  set slider to #zoom-slider
   if savedZoom and slider
     set slider.value to savedZoom
     call handleZoomInput(slider)
@@ -83,7 +83,7 @@ def initZoomControl(control)
   set isVisible to localStorage.getItem('cv-zoom-visible')
   if isVisible is 'true'
     remove .zoom-hidden from control
-    set menuBtn to document.getElementById('show-zoom-menu-btn')
+    set menuBtn to #show-zoom-menu-btn
     if menuBtn is not null
       add .zoom-hidden to menuBtn
     end
@@ -104,8 +104,8 @@ end
 -- ==============================================================================
 -- Show zoom control
 def showZoomControl()
-  set control to document.getElementById('zoom-control')
+  set control to #zoom-control
-  set menuBtn to document.getElementById('show-zoom-menu-btn')
+  set menuBtn to #show-zoom-menu-btn
   if control is not null
     remove .zoom-hidden from control
     set localStorage['cv-zoom-visible'] to 'true'
@@ -117,8 +117,8 @@ end
 
 -- Hide zoom control
 def hideZoomControl()
-  set control to document.getElementById('zoom-control')
+  set control to #zoom-control
-  set menuBtn to document.getElementById('show-zoom-menu-btn')
+  set menuBtn to #show-zoom-menu-btn
   if control is not null
     add .zoom-hidden to control
     set localStorage['cv-zoom-visible'] to 'false'
@@ -130,7 +130,7 @@ end
 
 -- Toggle zoom control visibility
 def toggleZoomControl()
-  set control to document.getElementById('zoom-control')
+  set control to #zoom-control
   if control is not null
     if control.classList.contains('zoom-hidden')
       call showZoomControl()

templates/index.html

@@ -6,7 +6,7 @@
          on scroll from window call handleScroll()
          on keydown
            set tag to event.target.tagName
-           set ninjaKeys to document.getElementById('cmd-k-bar')
+           set ninjaKeys to #cmd-k-bar
            set ninjaOpen to (ninjaKeys is not null and ninjaKeys.opened)
            set skip to (tag is 'INPUT' or tag is 'TEXTAREA' or ninjaOpen)
            set noMod to (not event.ctrlKey and not event.metaKey and not event.altKey)

templates/partials/modals/contact-modal.html

@@ -29,7 +29,7 @@
                   hx-headers='{"X-Requested-With": "XMLHttpRequest"}'
                   _="on htmx:afterRequest
                        -- Check if response contains success message (not validation error)
-                       set responseDiv to document.getElementById('contact-response')
+                       set responseDiv to #contact-response
                        if responseDiv is not null and responseDiv.querySelector('.contact-success') is not null
                          -- Hide all form fields and show only success message
                          set formFields to me.querySelectorAll('.form-group')
@@ -39,7 +39,7 @@
                          add .hidden to me.querySelector('.form-actions')
                          add .hidden to me.querySelector('.form-note')
                          -- Close modal after 3 seconds
-                         wait 3s then call document.getElementById('contact-modal').close()
+                         wait 3s then call #contact-modal.close()
                        end">
 
                 <!-- Honeypot field - hidden, should be empty -->