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}}

css/lite-yt-embed.css

@@ -70,8 +70,11 @@ lite-youtube > .lty-playbtn {
 }
 
 lite-youtube:hover > .lty-playbtn,
-lite-youtube .lty-playbtn:focus {
+lite-youtube .lty-playbtn:focus-visible {
     filter: none;
+    outline: 2px solid #fbbf24;
+    outline-offset: -2px;
+    border-radius: 4px;
 }
 
 /* Post-click styles */

css/prism-theme.css

@@ -49,7 +49,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #6a737d;
+  color: #586069;
 }
 
 .token.punctuation {
@@ -57,7 +57,7 @@ pre[class*="language-"] {
 }
 
 .token.namespace {
-  opacity: 0.7;
+  opacity: 0.85;
 }
 
 .token.property,

css/tailwind.css

@@ -288,7 +288,7 @@
 
   /* Site footer */
   .site-footer {
-    @apply mt-12 py-8 border-t border-surface-200 dark:border-surface-700 text-center text-sm text-surface-500;
+    @apply mt-12 py-8 border-t border-surface-200 dark:border-surface-700 text-center text-sm text-surface-600 dark:text-surface-400;
   }
 
   .site-footer a {
@@ -501,6 +501,13 @@
   .pagination-link:active:not(.disabled) {
     transform: scale(0.97);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    button:active:not(:disabled),
+    .pagination-link:active:not(.disabled) {
+      transform: none;
+    }
+  }
 }
 
 /* Video embeds */
@@ -630,7 +637,7 @@
     transition: opacity 0.15s;
   }
   .prose :is(h2, h3, h4):hover > a.header-anchor::after {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 
   .post-list li {
@@ -677,7 +684,7 @@
   --pagefind-ui-primary: #fbbf24;
   --pagefind-ui-text: #faf8f5;
   --pagefind-ui-background: #0f0e0d;
-  --pagefind-ui-border: #3f3b35;
+  --pagefind-ui-border: #5c5750;
   --pagefind-ui-tag: #2a2722;
 }
 
@@ -692,7 +699,7 @@
 .dark #search .pagefind-ui__search-input {
   background-color: #1c1b19;
   color: #faf8f5;
-  border-color: #3f3b35;
+  border-color: #5c5750;
 }
 
 #search .pagefind-ui__search-input:focus {