Accessibility pass: fix real WCAG contrast failures, add skip link and nav landmarks

Computed actual contrast ratios rather than eyeballing:
- White button text on teal was 3.67:1, fails AA (needs 4.5:1) — darkened
  the CTA color to 007f73, now 4.90:1.
- Rose nav-hover text was 2.50:1 on the header, 1.82:1 on the footer —
  both far below any AA threshold. Rose now shows as an underline instead
  of a text color change, so the accent survives without breaking
  legibility.
- Added a skip-to-content link (hidden until focused, standard pattern),
  aria-label on both nav landmarks (header nav and footer nav previously
  both announced as plain 'navigation' with no way to distinguish them),
  and an explicit high-contrast focus-visible ring — including a
  header-specific override since the default cta-color ring was only
  ~1:1 against the slate blue header background.

All values re-verified in both light and dark mode, not just light.

assets/css/main.css

@@ -19,7 +19,9 @@
   --heading: var(--slate);
   --accent: var(--slate);
   --accent-fg: #ffffff;
-  --cta: var(--teal);
+  /* Darkened from --teal: #009688 white-on-teal was 3.67:1, fails WCAG AA
+     (needs 4.5:1) for button-label-sized text. This hits 4.90:1. */
+  --cta: #007f73;
   --cta-fg: #ffffff;
 
   --radius: 0.5rem;
@@ -65,6 +67,20 @@ body {
 
 a { color: var(--accent); }
 
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 100;
+  background: var(--cta);
+  color: var(--cta-fg);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0 0 var(--radius) 0;
+}
+.skip-link:focus {
+  left: 0;
+}
+
 h1, h2, h3 {
   font-family: var(--font-heading);
   color: var(--heading);
@@ -107,7 +123,22 @@ header.site nav a {
   text-decoration: none;
   font-size: 0.95rem;
 }
-header.site nav a:hover { opacity: 1; color: var(--rose); }
+/* Rose as text color here would be ~2.5:1 against the blue header — too
+   low-contrast to read. Keep the text legible, use rose as an underline
+   instead so the "gentle" accent doesn't cost readability. */
+header.site nav a:hover {
+  opacity: 1;
+  text-decoration: underline;
+  text-decoration-color: var(--rose);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+/* The default --cta focus ring is only ~1:1 against this header's own
+   background — swap in the header's own text color, already proven at
+   4.82:1 against slate blue. */
+header.site a:focus-visible {
+  outline-color: var(--bg);
+}
 
 main {
   flex: 1;
@@ -143,7 +174,14 @@ footer.site nav a {
   color: var(--slate);
   text-decoration: none;
 }
-footer.site nav a:hover { color: var(--rose); }
+/* Same reasoning as the header nav: rose text on this background is
+   ~1.8:1, nearly invisible. Underline instead of recoloring. */
+footer.site nav a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--rose);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
 
 .btn {
   display: inline-block;
@@ -159,6 +197,13 @@ footer.site nav a:hover { color: var(--rose); }
 }
 .btn:hover { opacity: 0.9; }
 
+/* Explicit, high-contrast focus ring everywhere — the default browser
+   outline can get lost against the colored header/footer bands. */
+a:focus-visible, button:focus-visible {
+  outline: 2px solid var(--cta);
+  outline-offset: 2px;
+}
+
 label {
   display: block;
   font-weight: 600;