Lay out hour nav horizontally and use real links

Matches the reference app's row layout instead of a vertical sidebar
list, and switches from buttons to anchors since hours are real
routes — plain click still SPA-navigates, modifier/middle clicks
fall through to native browser behavior (open in new tab, etc.).

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

src/ui/hour-list.ts

@@ -2,6 +2,8 @@ import { getState, setSelectedHour } from '../app-state';
 import { HOUR_IDS, resolveOrdo, type HourId } from '../hours';
 import { hourLabel } from './format';
 
+const BASE = import.meta.env.BASE_URL;
+
 export function renderHourList(container: HTMLElement): void {
   const { date, selectedHour } = getState();
 
@@ -11,24 +13,30 @@ export function renderHourList(container: HTMLElement): void {
     const isReady = !ordo.notImplemented;
     return `
       <li>
-        <button
-          type="button"
+        <a
+          href="${BASE}${date}/${hourId}"
           class="hour-item${isSelected ? ' is-selected' : ''}${isReady ? '' : ' is-pending'}"
           data-hour="${hourId}"
           aria-current="${isSelected ? 'true' : 'false'}"
         >
           <span class="hour-name">${hourLabel(hourId)}</span>
           ${isReady ? '' : '<span class="hour-status">coming soon</span>'}
-        </button>
+        </a>
       </li>
     `;
   }).join('');
 
   container.innerHTML = `<ul class="hour-list">${items}</ul>`;
 
-  container.querySelectorAll<HTMLButtonElement>('[data-hour]').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      setSelectedHour(btn.dataset.hour as HourId);
+  container.querySelectorAll<HTMLAnchorElement>('[data-hour]').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      // Let modifier/middle clicks fall through to normal browser navigation
+      // (open in new tab, etc.) — only plain left-clicks are SPA-routed.
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      setSelectedHour(link.dataset.hour as HourId);
     });
   });
 }