Add app-shell heading and skip link (WCAG 2.4.1 / GOV.UK)

src/app/App.module.css

@@ -16,11 +16,38 @@
 }
 
 .title {
+  margin: 0; /* it's an <h1> now — drop the UA heading margin */
   font-weight: 600;
   font-size: 16px;
   letter-spacing: 0.01em;
 }
 
+/*
+ * Skip link — visually hidden until focused, then pinned top-left above
+ * everything. Reveal uses :focus (not only :focus-visible) so a keyboard Tab
+ * shows it; the transition is neutralized under prefers-reduced-motion by base.css.
+ */
+.skipLink {
+  position: absolute;
+  top: -100%;
+  left: var(--space-4);
+  z-index: 1200;
+  padding: var(--space-3) var(--space-4);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  border-radius: var(--radius);
+  transition: top var(--dur-fast) var(--ease);
+}
+
+.skipLink:focus {
+  top: var(--space-3);
+}
+
+/* The focus target itself shouldn't paint a ring (the skip link already shows). */
+.panes:focus {
+  outline: none;
+}
+
 .version {
   font-family: var(--font-mono);
   font-size: 11px;

src/app/App.tsx

@@ -23,14 +23,20 @@ export function App() {
 
   return (
     <div className={styles.app}>
+      {/* Skip link (WCAG 2.4.1 / GOV.UK): the first focusable element, hidden
+          until focused, lets keyboard users bypass the header into the work area. */}
+      <a className={styles.skipLink} href="#main">
+        Skip to content
+      </a>
       <header className={styles.header}>
-        <span className={styles.title}>Astrolabe</span>
+        <h1 className={styles.title}>Astrolabe</h1>
         <span className={styles.version}>v{__APP_VERSION__}</span>
         <span className={styles.spacer} />
         <ThemeToggle />
       </header>
 
-      <main className={styles.panes}>
+      {/* tabIndex -1 makes the landmark a focus target for the skip link. */}
+      <main id="main" className={styles.panes} tabIndex={-1}>
         <section
           id="pane-library"
           className={styles.pane}