a11y: comprehensive WCAG 2.1 Level AA accessibility audit

- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
  for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88

css/critical.css

@@ -60,6 +60,16 @@ a{color:#b45309}
 img{max-width:100%;height:auto}
 svg:not(:root):not([width]){width:1.25rem;height:1.25rem}
 
+/* Focus indicators — visible in critical CSS before Tailwind loads */
+a:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px}
+.dark a:focus-visible{outline-color:#fbbf24}
+button:focus-visible,[type="button"]:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:4px}
+.dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#fbbf24}
+
+/* Skip link */
+.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#b45309;color:#fff;padding:0.5rem 1rem;font-weight:600;text-decoration:none}
+.skip-link:focus{top:0;outline:none}
+
 /* Skeleton loader — visible until Tailwind stylesheet loads */
 html.loading main.container>.page-content{display:none}
 html:not(.loading) .page-skeleton{display:none}
@@ -67,3 +77,6 @@ html:not(.loading) .page-skeleton{display:none}
 .skel-bone{background:#e8e5df;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite}
 .dark .skel-bone{background:#3f3b35}
 .skel-circle{border-radius:50%}
+
+/* Reduced motion — disable animations for users who prefer it */
+@media(prefers-reduced-motion:reduce){.skel-bone{animation:none}*{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}