diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 28c36469..10dde3c0 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -4,6 +4,9 @@ on:
   push:
     branches: [main]
   workflow_dispatch:
+  schedule:
+    # Daily at 02:00 UTC — ensures deadline-based layout changes are reflected without a code push
+    - cron: "0 2 * * *"
 
 permissions:
   contents: write
diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md
index dc51689d..9dcc2749 100644
--- a/ACCESSIBILITY.md
+++ b/ACCESSIBILITY.md
@@ -1,14 +1,18 @@
-# Accessibility Statement
+# Accessibility
 
 OffOn is a platform for open source enthusiasts. We want everyone to be able to read, browse, and contribute, regardless of disability, assistive technology, or device. This document explains what we support today, how we test, and how to tell us when we get it wrong.
 
+---
+
 ## Our Commitment
 
-- **Target:** [WCAG 2.2 Level AA](https://www.w3.org/TR/WCAG22/) across every page on [offon.dev](https://offon.dev).
+- **Target:** [WCAG 2.2 Level AA](https://www.w3.org/TR/WCAG22/) across every page on [offon.dev](https://offon.dev). WCAG 2.2 AA is the floor, not the goal. Every component must be genuinely usable by keyboard-only users, screen reader users, and people with low vision.
 - **Both color modes:** light and dark mode must meet contrast and focus requirements. We do not ship a feature that only works in one mode.
 - **Keyboard first:** every interactive element is reachable and operable from the keyboard alone.
 - **No motion traps:** we honor `prefers-reduced-motion` and avoid auto-playing animation that the user did not request.
 
+---
+
 ## What We Support Today
 
 - Skip-to-content link as the first focusable element on every page.
@@ -22,6 +26,8 @@ OffOn is a platform for open source enthusiasts. We want everyone to be able to
 - Self-hosted fonts so users on restricted networks are not locked out.
 - Google Analytics is opt-in only via the consent banner. No tracking runs until the user accepts.
 
+---
+
 ## Supported Environments
 
 - Modern evergreen browsers: Chrome, Edge, Firefox, Safari (current and previous major versions).
@@ -29,6 +35,8 @@ OffOn is a platform for open source enthusiasts. We want everyone to be able to
 - Screen readers we test against during manual spot checks: VoiceOver on macOS and iOS, NVDA on Windows.
 - The site is fully static and served from GitHub Pages, so it works without JavaScript for reading content. Some interactive features (theme toggle, consent banner, filtering) require JavaScript.
 
+---
+
 ## Known Limitations
 
 - We do not currently provide captions or transcripts because the site does not host video or audio. If we add media, captions and transcripts will ship with it.
@@ -36,23 +44,29 @@ OffOn is a platform for open source enthusiasts. We want everyone to be able to
 
 If you find a barrier that is not listed here, please report it using the link below. We treat this list as evidence-based, not aspirational.
 
+---
+
 ## How We Test
 
 ### Automated
 
-- **axe-core via Playwright** on every pull request, configured in [`e2e/smoke.spec.ts`](e2e/smoke.spec.ts). Runs in both dark and light mode against the production build with tags `wcag2a`, `wcag2aa`, `wcag21a`, `wcag21aa`, `wcag22aa`, and `best-practice`. The PR preview workflow blocks on these scans.
+- **axe-core via Playwright** on every pull request, configured in [`e2e/smoke.spec.ts`](e2e/smoke.spec.ts). Runs in both dark and light mode against the production build with tags `wcag2a`, `wcag2aa`, `wcag21a`, `wcag21aa`, `wcag22aa`, and `best-practice`. The PR preview workflow blocks on these scans. Never reduce this tag set.
 - **Vitest** assertions on landmark roles, labels, and focus behavior for components and hooks ([`src/test/`](src/test/)).
 
+Automated axe passes are necessary but not sufficient. Automated tools catch roughly 30–40% of real-world accessibility issues. Manual testing is required for every interactive component.
+
 ### Manual
 
-For UI changes, contributors verify:
+For every UI change, contributors must verify:
 
-- Tab order matches the visual reading order.
-- Focus is visible on every interactive element in both modes.
-- The page works at 200% browser zoom and at 375px, 768px, and 1280px widths.
-- Screen reader spot check on the changed flow (VoiceOver or NVDA).
+1. **Keyboard-only navigation:** tab through the entire changed flow without a mouse. Tab order matches the visual reading order. No focus traps. Every interactive element is reachable and operable.
+2. **Focus visibility:** focus ring is visible on every interactive element in both light and dark mode.
+3. **Screen reader:** spot-check the changed flow with VoiceOver (macOS/iOS) or NVDA (Windows). Dynamic content updates are announced correctly.
+4. **Zoom:** the page works at 200% browser zoom without content clipping or layout breakage.
+5. **Viewports:** verify at 375px, 768px, and 1280px widths against the production build.
+6. **Windows High Contrast Mode:** interactive states (hover, focus, disabled) are visible. Do not rely solely on background-color or semi-transparent borders to communicate state.
 
-See the [Accessibility section in `CLAUDE.md`](CLAUDE.md#accessibility-wcag-22-aa-mandatory) for the full per-component checklist contributors apply.
+---
 
 ## Reporting an Accessibility Barrier
 
@@ -63,7 +77,7 @@ If something on offon.dev blocks you or is hard to use, please tell us.
 
 We aim to acknowledge accessibility reports within five working days and to provide a workaround or fix timeline in the same response.
 
-### Severity We Use
+### Severity
 
 | Severity | Definition |
 |---|---|
@@ -72,8 +86,133 @@ We aim to acknowledge accessibility reports within five working days and to prov
 | Medium | Inconsistent or annoying experience that does not block the task. |
 | Low | Minor issue with minimal impact on usability. |
 
+---
+
 ## For Contributors
 
-If you are submitting a pull request, every UI change should pass the checklist in our [pull request template](.github/pull_request_template.md). The full ruleset lives in [`CLAUDE.md`](CLAUDE.md#accessibility-wcag-22-aa-mandatory) and applies to every change.
+Every UI change must pass the checklist below before the PR is submitted. See [`CLAUDE.md`](CLAUDE.md) for project conventions.
+
+---
+
+## Contributor Checklist (Required for Every New Component)
+
+Apply this to every component you write or modify.
+
+### Color contrast
+
+- Normal text (under 18px / non-bold under 14px): minimum 4.5:1.
+- Large text (18px+ or bold 14px+): minimum 3:1.
+- UI components and focus indicators: minimum 3:1 against adjacent colors.
+- Focus indicators (WCAG 2.4.11): the focus indicator area must be at least as large as a 2px perimeter outline of the component, and the focused/unfocused contrast ratio must be at least 3:1.
+- Never use `hsl(41 100% 60%)` (`#ffc034` yellow) as text in light mode — fails contrast.
+- Never place text on `bg-primary` without verifying light mode contrast.
+- Never use `opacity-*` on an element that contains visible text. Use an explicit CSS color token instead (e.g. `text-[hsl(var(--text-faint))]`).
+- Always verify contrast in both light and dark mode.
+- Never rely on color alone to convey meaning. Always pair with text, icon, or pattern.
+
+### Focus rings
+
+- Pattern: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm`. Inline elements: `ring-offset-1`.
+- Always use `ring-ring`, never `ring-primary/xx`.
+- Hover states must not change layout properties (padding, border, font-weight, width). Use color and opacity only.
+
+### Keyboard navigation
+
+- Every interactive element must be reachable and operable via keyboard.
+- Tab order must follow a logical reading order.
+- Never remove focus outlines.
+- Modals must trap focus while open and return focus on close. Use shadcn `Dialog`.
+
+### Touch targets
+
+- Interactive elements must have a minimum touch target of 24x24px (WCAG 2.5.8). Prefer 44x44px for primary actions.
+- Never rely on padding alone when the visible element is smaller than 24px.
+
+### Motion
+
+- All animations and transitions must respect `prefers-reduced-motion`.
+- Wrap motion in `@media (prefers-reduced-motion: no-preference)` in CSS, or check `window.matchMedia('(prefers-reduced-motion: reduce)')` before triggering JS-driven animation.
+
+### Semantic HTML
+
+- Use the correct element for the job (`<button>` for actions, `<a>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>`, `<article>`, `<section>`).
+- Never use a `<div>` or `<span>` as an interactive element.
+- One `<h1>` per page. No skipped heading levels.
+- Every `<section>` and `<article>` must have an accessible name via `aria-labelledby` pointing to its heading, or `aria-label` if there is no visible heading. An unnamed `<section>` is not exposed as a landmark to screen readers.
+- Never apply overline/label typography (`text-sm uppercase tracking-widest`) to a heading tag. If the text is a genuine section heading, give it heading-appropriate typography. If it is purely decorative, use `<span>` or `<p>`.
+- Never use a non-heading tag for text visually styled as a heading. Promote it to the correct heading level.
+- Every page's primary content must live inside a single `<main id="main-content">`. Do not split content across multiple `<main>` elements.
+- `<html lang="en">` is set in `src/root.tsx`. Never remove or change it. If a page includes content in another language, add `lang` to that element.
+- Tables must include `<caption>` or `aria-label`, and header cells must use `scope="col"` or `scope="row"`.
 
-Thank you for helping us make OffOn usable by everyone.
+### Images and media
+
+- Every `<img>` must have an `alt` attribute. No exceptions.
+- Meaningful images: `alt` describes the content or purpose.
+- Decorative images: `alt=""` AND `aria-hidden="true"` together.
+- Never use `aria-hidden="true"` when alt text is present.
+- Set explicit `width` and `height` on every `<img>` to prevent layout shift.
+
+### External links
+
+- Every `<a target="_blank">` must include `<span className="sr-only"> (opens in new tab)</span>` as its last child.
+
+### Icons and special characters
+
+- Decorative icons paired with visible text: `aria-hidden="true"`.
+- Icon-only interactive elements: `aria-label` on the parent, no `aria-hidden`.
+- Never use raw Unicode characters (`→`, `♥`, `✓`) to convey meaning.
+- Decorative separators between pill segments: use an empty `<span aria-hidden="true" className="inline-block w-px h-3 bg-current opacity-40" />` instead of a text character.
+
+### ARIA
+
+- Only add ARIA attributes when semantic HTML is not enough.
+- Never use ARIA to paper over bad markup. Fix the markup first.
+- Use `role="status"` (implicit `aria-live="polite"`) for non-urgent updates like form success messages.
+- Use `role="alert"` (implicit `aria-live="assertive"`) only for errors requiring immediate attention. Never use `aria-live="assertive"` for informational updates.
+- Use `aria-expanded` on toggles that open/close UI.
+- Always add `aria-label` or `aria-labelledby` to icon-only buttons.
+
+### Forms
+
+- Every `<input>`, `<select>`, and `<textarea>` must have an associated `<label>` via `for`/`id` pairing or `aria-label`.
+- Never use placeholder text as a substitute for a label.
+
+### Skip navigation
+
+- Every page must have a skip link as the first focusable element targeting `#main-content`.
+- The skip link uses the `.skip-nav` class in `src/index.css`. Never remove this class or its focus rules.
+- When adding a new page, always add `id="main-content"` to its `<main>` element.
+
+### Windows High Contrast Mode
+
+- Test all interactive components with forced colors enabled.
+- Never rely solely on `background-color` or `border-color` with opacity to communicate interactive state.
+- Use `@media (forced-colors: active)` to restore visible borders where needed:
+  ```css
+  @media (forced-colors: active) {
+    .your-component { border: 1px solid ButtonText; }
+  }
+  ```
+
+### Minimum text size
+
+- Minimum visible text size is 12px (`text-xs`). Do not use `text-[0.6rem]` or smaller for any visible text.
+- Avatar initials and rank numbers that are `aria-hidden` are exempt.
+
+### Page content structure
+
+- All page content (including `PageHero` and `BottomCTA`) must be inside `<main id="main-content">`.
+
+---
+
+## WCAG Principle Reference
+
+Use this to identify which criterion applies before writing or reviewing code.
+
+| Principle | What to verify |
+|---|---|
+| **Perceivable (1.x)** | Every non-text element has a text alternative. Color is not the only means of conveying information. |
+| **Operable (2.x)** | Every interactive element is keyboard-operable. No keyboard trap. Focus indicator is always visible. Touch targets are large enough. Motion can be disabled. |
+| **Understandable (3.x)** | Error messages identify the field, describe the error, and suggest a correction. State is never communicated by color alone. |
+| **Robust (4.x)** | ARIA usage is valid for the host element. Dynamic content updates are announced without forcibly moving focus. |
diff --git a/CLAUDE.md b/CLAUDE.md
index 28316eb3..52736ba5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -28,7 +28,7 @@ Community activity happens on a separate Discourse instance. Its display name is
 
 - **Framework:** React 19 with TypeScript, bundled via Vite. Check `package.json` for current versions.
 - **Styling:** Tailwind CSS 4, configured CSS-first via `src/index.css` (`@theme` block). There is no `tailwind.config.ts` — it was deleted as part of the Tailwind 4 migration.
-- **Components:** Minimal shadcn/ui surface. `src/components/ui/` contains only `badge.tsx`, `sonner.tsx`, and `tooltip.tsx`. Most Radix UI packages were intentionally removed.
+- **Components:** Minimal shadcn/ui surface. `src/components/ui/` contains only `badge.tsx` and `tooltip.tsx`. Most Radix UI packages were intentionally removed.
 - **Routing:** React Router v7 framework mode (static prerendering with `ssr: false`)
 - **Testing:** Vitest + @testing-library/react (unit/component); Playwright (smoke tests in `e2e/`)
 - **Hosting:** GitHub Pages
@@ -63,8 +63,8 @@ Community activity happens on a separate Discourse instance. Its display name is
 - The og:image file is public/og.png and its full URL is https://offon.dev/og.png.
 - PR preview deployments are served from the gh-pages branch under /pr-preview/pr-{number}/.
 - The open source challenges content lives in a separate organisation at https://github.com/dynatrace-oss/open-ecosystem-challenges. This is an intentional external link and must never be changed or flagged as a violation.
-- The community Discourse instance is at https://community.open-ecosystem.com. Use the COMMUNITY_URL constant from src/data/constants.ts, never hardcode this URL.
-- COMMUNITY_DISPLAY_NAME is defined in src/data/constants.ts as the user-facing display name for the community URL. Use it for visible text, use COMMUNITY_URL for href attributes.
+- The community Discourse instance is at https://community.open-ecosystem.com. Use the `COMMUNITY_URL` constant from `src/data/constants.ts`, never hardcode this URL.
+- `COMMUNITY_DISPLAY_NAME` is defined in `src/data/constants.ts` as the user-facing display name for the community URL. Use it for visible text, use `COMMUNITY_URL` for href attributes.
 
 ---
 
@@ -77,7 +77,6 @@ src/
   data/         # Static data files (TypeScript objects/arrays)
   hooks/        # Custom React hooks
   lib/          # Shared utilities
-  utils/        # Additional utility functions (e.g. stripHtml)
   assets/       # Static assets bundled by Vite
   Layout.tsx    # App shell: providers, skip nav, scroll-to-top, consent banner, and Outlet
 e2e/
@@ -86,8 +85,12 @@ public/
   fonts/        # Self-hosted fonts (Inter, Syne, JetBrains Mono)
 .github/
   workflows/
-    deploy.yml  # Production deploy to GitHub Pages (push to main)
-    preview.yml # PR preview deploy (runs smoke tests before deploying)
+    deploy.yml              # Production deploy to GitHub Pages (push to main)
+    preview.yml             # PR preview deploy (runs smoke tests before deploying)
+    refresh-community-data.yml  # Hourly discussion and leaderboard data refresh
+    new-adventure.yml       # workflow_dispatch: scaffold a new adventure
+    new-level.yml           # workflow_dispatch: add a level to an existing adventure
+    validate-adventures.yml # PR check: validates adventure YAML, routes, and sitemap consistency
 ```
 
 ---
@@ -107,6 +110,8 @@ npm run test:e2e     # Playwright smoke tests (requires npm run build first)
 npm run preview      # Copy 404 fallback and serve the production build locally
 npm run generate     # Regenerate TypeScript from adventure YAML files
 npm run generate:validate  # Validate YAML against schema without writing files
+npm run new-adventure   # Scaffold a new adventure YAML and stub files
+npm run new-level       # Add a new level to an existing adventure
 
 npx shadcn@latest add <component>   # Add a shadcn/ui component
 ```
@@ -118,6 +123,7 @@ npx shadcn@latest add <component>   # Add a shadcn/ui component
 - Use explicit return types on all functions and components.
 - Prefer named exports for components.
 - Keep components small and single-responsibility.
+- Functions must have a single responsibility. If a function requires more than one level of conditional nesting to describe in plain language, split it.
 - Use functional components with hooks only. No class components.
 - Prefer `const` over `let`, never `var`.
 - Use async/await over promise chains. Always handle errors explicitly.
@@ -140,53 +146,33 @@ npx shadcn@latest add <component>   # Add a shadcn/ui component
 
 ## Debugging Rules
 
-When diagnosing a bug, especially in the production build, follow these rules
-without exception. They exist to prevent debugging by accumulation.
+When diagnosing a bug, especially in the production build, follow these rules without exception. They exist to prevent debugging by accumulation.
 
 ### Evidence rules
 
-- Never claim a fix worked based on source inspection alone. The only signal
-  that counts is the expected behavior observed in a real browser against the
-  current bundle hash.
-- Before acting on any error message, verify the error came from the current
-  build. Compare the bundle hash in the error stack trace (e.g. `index-XXXX.js`)
-  against the latest build output. If they differ, the browser is serving
-  cached code and the error is stale.
-- Before acting on any diagnostic output, state what evidence supports the
-  conclusion. "Only X was left in the DOM" is not evidence of what the DOM
-  looked like at error time. React's error recovery can tear down the tree
-  before the diagnostic runs.
-- When a grep claims to confirm something, verify the grep pattern is specific
-  enough to exclude false positives. Strings like "hydrateRoot" exist in
-  production React too, so their presence proves nothing about whether the
-  build is minified.
+- Never claim a fix worked based on source inspection alone. The only signal that counts is the expected behavior observed in a real browser against the current bundle hash.
+- Before acting on any error message, verify the error came from the current build. Compare the bundle hash in the error stack trace (e.g. `index-XXXX.js`) against the latest build output. If they differ, the browser is serving cached code and the error is stale.
+- Before acting on any diagnostic output, state what evidence supports the conclusion. "Only X was left in the DOM" is not evidence of what the DOM looked like at error time. React's error recovery can tear down the tree before the diagnostic runs.
+- When a grep claims to confirm something, verify the grep pattern is specific enough to exclude false positives. Strings like "hydrateRoot" exist in production React too, so their presence proves nothing about whether the build is minified.
 
 ### One-fix-at-a-time rule
 
-- Never stack fixes. One change, rebuild, verify in a real browser, then the
-  next. If you apply two fixes before verifying, you cannot tell which one
-  worked or if either did.
+- Never stack fixes. One change, rebuild, verify in a real browser, then the next. If you apply two fixes before verifying, you cannot tell which one worked or if either did.
 - Commit after every verified fix. Each commit should have a clear before/after.
-- If the same bug has been "fixed" more than once in a session and still
-  reproduces, stop. The diagnosis is wrong. Go back to first principles.
+- If the same bug has been "fixed" more than once in a session and still reproduces, stop. The diagnosis is wrong. Go back to first principles.
 
 ### Build cache rules
 
-- Always run `rm -rf dist node_modules/.vite` before any rebuild you intend to
-  verify against. Vite's cache can silently produce stale output.
-- After rebuilding, always compare the new bundle hash to the previous one. If
-  the hash is identical, the cache was reused. Clear it and rebuild.
+- Always run `rm -rf dist node_modules/.vite` before any rebuild you intend to verify against. Vite's cache can silently produce stale output.
+- After rebuilding, always compare the new bundle hash to the previous one. If the hash is identical, the cache was reused. Clear it and rebuild.
 
 ### Getting unminified React errors
 
-- The `--mode development` flag alone does not produce a dev React build with
-  Vite's React plugin. Proof: a dev React bundle is roughly 1.4 MB; a production
-  bundle is roughly 330 KB.
+- The `--mode development` flag alone does not produce a dev React build with Vite's React plugin. Proof: a dev React bundle is roughly 1.4 MB; a production bundle is roughly 330 KB.
 - To force a dev React build, add to vite.config.ts inside defineConfig:
     define: { 'process.env.NODE_ENV': JSON.stringify('development') },
     build: { minify: false, sourcemap: true }
-- Verify the dev build actually happened: `ls -lh dist/assets/index-*.js`.
-  Size should be ~1.4 MB, not ~330 KB.
+- Verify the dev build actually happened: `ls -lh dist/assets/index-*.js`. Size should be ~1.4 MB, not ~330 KB.
 - Revert this change before merging to main.
 
 ---
@@ -204,14 +190,14 @@ without exception. They exist to prevent debugging by accumulation.
 ## Components
 
 - Always check `src/components/ui/` before building a new primitive.
-- `src/components/ui/` contains three files: `badge.tsx`, `sonner.tsx`, `tooltip.tsx`. Adding a new shadcn component requires an immediate use case in the same PR. Unused components are removed. To add one: `npx shadcn@latest add <component>`.
+- `src/components/ui/` contains two files: `badge.tsx` and `tooltip.tsx`. Adding a new shadcn component requires an immediate use case in the same PR. Unused components are removed. To add one: `npx shadcn@latest add <component>`.
 - Never modify files inside `src/components/ui/` directly. Extend or wrap them in `src/components/`.
 - Page-level components go in `src/pages/`. Reusable components go in `src/components/`.
 - Extract sub-components into `src/components/` rather than nesting them inline.
 - Do not duplicate card or list markup across components. If the same JSX structure appears in two places, extract a shared component. `FilteredLevelCard` is the established pattern.
 - **Buttons:** use raw `<button>` elements with the CSS utility classes defined in `src/index.css` (`.btn-primary`, `.btn-ghost`, `.btn-soft`, `.btn-inverse`, `.btn-ghost-inverse`). There is no `Button` component wrapper and no `@radix-ui/react-slot` dependency. See `styleguide.md` for which class to use on which background color.
-- **Toasts:** use Sonner via `import { toast } from "@/components/ui/sonner"`. The Radix-based toast stack (`react-toast`, `use-toast`) was removed. Do not reinstall it.
-- **Sonner (`<Toaster>`) and TooltipProvider are intentionally not mounted in `Layout.tsx`** until a call site exists. Do not add them back to `Layout.tsx` speculatively. Mount `<Toaster>` in the nearest layout that actually triggers a toast, and wrap only the subtree that uses `<Tooltip>` with `<TooltipProvider>` at that point.
+- **Toasts:** if toast notifications are ever needed, install `sonner` and add `src/components/ui/sonner.tsx` (shadcn pattern). Mount `<Toaster>` in the nearest layout that actually triggers a toast. Do not install speculatively.
+- **TooltipProvider** is intentionally not mounted in `Layout.tsx` until a call site exists. Wrap only the subtree that uses `<Tooltip>` with `<TooltipProvider>` at that point.
 
 ### Component CSS patterns
 
@@ -220,7 +206,7 @@ without exception. They exist to prevent debugging by accumulation.
 - `data-difficulty` attribute on `DifficultyBadge`. It is used for CSS targeting of badge text color.
 - `contributor-pill` class on `ContributorBadge`. Scopes light mode overrides: transparent background with slate border instead of the near-invisible `bg-primary/5`.
 - `contributor-pill-glow` class on `ContributorBadge` (applied via `glow` prop). Static amber box-shadow glow, sized for a small pill. Used only on `ChallengeDetail` -- not in `AdventureCard`.
-- `docs-ext-link` class on all inline prose links site-wide. Bundles `inline-flex`, `align-items: center`, `gap`, `underline`, `decoration-thickness`, `underline-offset`, `border-radius`, focus-visible ring, and color/hover transitions. Handles both modes: dark mode foreground text with amber underline, hover to full `#ffc034`; light mode near-black text with `currentColor` underline, hover to `--link-hover-light` (`hsl(41 100% 25%)` dark amber, ~5.5:1 contrast). Used in `CommunityGuide`, `DiscussionSection`, `CommunitySection`, `LevelCard`, `PersonNameLink`, `ChallengeBuildersSection`, `ChallengeDetail`, and `MarkdownContent`. Do not use `hover:text-primary` or `hover:underline` on inline links, and do not add redundant `inline-flex items-center gap-*` utilities. Use `docs-ext-link` alone, adding only contextual utilities (font-size, weight, margin).
+- `docs-ext-link` class on all inline prose links site-wide. Bundles `inline-flex`, `align-items: center`, `gap`, `underline`, `decoration-thickness`, `underline-offset`, `border-radius`, focus-visible ring, and color/hover transitions. Handles both modes: dark mode foreground text with amber underline, hover to full `#ffc034`; light mode near-black text with `currentColor` underline, hover to `--link-hover-light` (`hsl(41 100% 25%)` dark amber, ~5.5:1 contrast). Used in `CommunityGuide`, `DiscussionSection`, `CommunitySection`, `LevelCard`, `PersonNameLink`, `ChallengeBuildersSection`, `ChallengeDetail`, `MarkdownContent`, `CommunitySidebar`, `RewardsCard`, `Accessibility`, and `Privacy`. Do not use `hover:text-primary` or `hover:underline` on inline links, and do not add redundant `inline-flex items-center gap-*` utilities. Use `docs-ext-link` alone, adding only contextual utilities (font-size, weight, margin).
 
 ---
 
@@ -234,8 +220,8 @@ without exception. They exist to prevent debugging by accumulation.
 - **Schema validation:** Adventure YAML files are validated against `schemas/adventure.schema.json` (JSON Schema Draft 2020-12). Run `npm run generate:validate` to check without writing files.
 - **Build-time fetching:** Discussion data lives in per-level JSON files under `src/data/adventures/<adventure-id>/<level-id>-posts.json`. Each file contains only `discussionUrl`, `discussionPosts`, and `totalReplies`. These are refreshed hourly by the GitHub Action in `.github/workflows/refresh-community-data.yml` (runs `scripts/refresh-discussions.mjs`). Components import the JSON dynamically via `import.meta.glob`.
 - When adding a new adventure level, create its per-level discussion JSON file (`<level-id>-posts.json`) with a `discussionUrl` field. The refresh script uses this URL to fetch posts.
-- `scripts/refresh-discussions.mjs` contains a `COMMUNITY_BASE` constant that is a necessary duplicate of `COMMUNITY_URL` in `src/data/constants.ts`. The script runs in Node and cannot import from `src/`, so the value must be maintained manually in both places. Always update them together.
-- The domain `community.open-ecosystem.com` in both `scripts/refresh-discussions.mjs` and `src/data/constants.ts` is the actual Discourse server URL used for API calls at build time. It is not a brand inconsistency. Do not change it to `community.offon.dev` or any other display name. `COMMUNITY_DISPLAY_NAME` in `src/data/constants.ts` is the separate user-facing label shown in the UI.
+- `scripts/refresh-discussions.mjs`, `scripts/refresh-leaderboard.mjs`, and `scripts/refresh-community-leaders.mjs` each contain a `COMMUNITY_BASE` constant that is a necessary duplicate of `COMMUNITY_URL` in `src/data/constants.ts`. The scripts run in Node and cannot import from `src/`, so the value must be maintained manually in all four places. Always update them together.
+- The domain `community.open-ecosystem.com` in the three refresh scripts and `src/data/constants.ts` is the actual Discourse server URL used for API calls at build time. It is not a brand inconsistency. Do not change it to `community.offon.dev` or any other display name. `COMMUNITY_DISPLAY_NAME` in `src/data/constants.ts` is the separate user-facing label shown in the UI.
 
 ---
 
@@ -243,14 +229,11 @@ without exception. They exist to prevent debugging by accumulation.
 
 - Use Tailwind utility classes directly on JSX elements.
 - Always check the `@theme` block in `src/index.css` before introducing any new color, font, spacing, or border radius value. Never hardcode these. There is no `tailwind.config.ts` — all theme values live in the `@theme` block in `src/index.css`.
-- Both light and dark mode must work. Use the CSS variable pairs (`bg-background`,
-  `text-foreground`) that shadcn sets up. Never hardcode a color that only works in one mode.
+- Both light and dark mode must work. Use the CSS variable pairs (`bg-background`, `text-foreground`) that shadcn sets up. Never hardcode a color that only works in one mode.
 - Never add a `dark:` override without a corresponding base (light) style.
 - Mobile first. Write base styles for mobile, then add `sm:`, `md:`, `lg:` breakpoints as needed.
 - For font utilities, type scale, component class patterns (buttons, pills, badges, overline labels), and animations, see `styleguide.md`. It is the source of truth. Do not duplicate those details here.
-- All fonts are self-hosted under `public/fonts/`.
-- Never write custom CSS unless Tailwind genuinely cannot do the job.
-  If you must, add it to `src/index.css` with a comment explaining why.
+- Never write custom CSS unless Tailwind genuinely cannot do the job. If you must, add it to `src/index.css` with a comment explaining why.
 - Light mode overrides: do NOT put them inside `@layer base` — rules there are always overridden by `@layer utilities`. Add unlayered rules to the "Light mode overrides" section at the bottom of `src/index.css`, scoped to `.light`.
 
 ### Design system rules
@@ -263,6 +246,14 @@ without exception. They exist to prevent debugging by accumulation.
 
 ---
 
+## Accessibility
+
+Read [`ACCESSIBILITY.md`](ACCESSIBILITY.md) before writing or modifying any component. It contains the full contributor checklist, WCAG principle reference, and manual testing requirements.
+
+The target is not minimum compliance. Every component must be genuinely usable by keyboard-only users, screen reader users, and people with low vision. WCAG 2.2 AA is the floor, not the goal.
+
+---
+
 ## Analytics and Consent
 
 The site uses Google Analytics 4 with **Consent Mode v2 in gated-load mode**. No data of any kind is sent to Google until the user clicks Accept on the cookie banner; the `gtag.js` script itself is not loaded until that point. Cross-domain measurement between `offon.dev` and `community.offon.dev` is configured in the GA4 admin UI, not in this codebase.
@@ -287,6 +278,7 @@ All analytics-related constants live in `src/data/constants.ts`:
 | `LINKEDIN_URL` | LinkedIn company page URL. |
 | `BLUESKY_URL` | Bluesky profile URL (`https://bsky.app/profile/off-on-dev.bsky.social`). Used in `Footer.tsx`. |
 | `X_URL` | X (Twitter) profile URL (`https://x.com/OffonDev`). Used in `Footer.tsx`. |
+| `THEME_STORAGE_KEY` | `localStorage` key for the stored theme preference (`"theme"`). Used by `useTheme.tsx`. |
 
 ### How it works
 
@@ -313,173 +305,77 @@ All analytics-related constants live in `src/data/constants.ts`:
 
 ### Do not
 
-- Do not load `gtag.js` outside the consent injector. The `<script src="...googletagmanager...">` tag belongs in `useConsent.tsx`'s injector, not in `root.tsx`.
+- Do not load `gtag.js` outside the consent injector.
 - Do not put `gtag('js')` or `gtag('config')` in `root.tsx`. Both belong in the injector, queued after the consent update.
-- Do not reintroduce `wait_for_update`. There are no buffered pings to wait for under gated load.
+- Do not reintroduce `wait_for_update`.
 - Do not reintroduce GPC/DNT detection.
-- Do not reintroduce `ANALYTICS_LINKER_DOMAINS` or `cookie_domain`. Cross-domain measurement is configured in the GA4 admin UI.
+- Do not reintroduce `ANALYTICS_LINKER_DOMAINS` or `cookie_domain`.
 - Do not put the consent update inside `script.onload`. It must be queued before `appendChild` so the dataLayer drains in the correct order.
-- Do not remove the script tag, wipe `dataLayer`, or replace `window.gtag` on deny. `gtag.js` self-gates when `analytics_storage` flips to denied; doing more orphans its internal references.
-- Do not push `page_view` or `click_event` when consent is not granted. The retroactive-replay-on-Accept bug is the reason both trackers gate.
-- Do not skip clearing `_ga*` cookies on deny or reset. Users reasonably expect "decline" to remove existing analytics cookies, and the privacy policy promises this.
-
----
-
-## Accessibility (WCAG 2.2 AA, mandatory)
-
-Check the following on every component you write or modify.
-
-### Skip navigation
-- Every page must have a skip link as the first focusable element so keyboard users can bypass the nav bar.
-- The skip link in `Layout.tsx` targets `#main-content`. Every page's `<main>` element must carry `id="main-content"`.
-- The skip link is styled with the `.skip-nav` class in `src/index.css`. Never remove this class or its focus rules.
-- When adding a new page, always add `id="main-content"` to its `<main>` element.
-
-### Color contrast
-- Normal text (under 18px / non-bold under 14px): minimum 4.5:1 ratio
-- Large text (18px+ or bold 14px+): minimum 3:1 ratio
-- UI components and focus indicators: minimum 3:1 against adjacent colors
-- Never rely on color alone to convey meaning. Always pair with text, icon, or pattern.
-- Always verify contrast in both light and dark mode.
-
-### Keyboard navigation
-- Every interactive element must be reachable and operable via keyboard.
-- Tab order must follow a logical reading order.
-- Never remove focus outlines. Use `focus-visible` utilities to style them.
-  Standard pattern: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`
-  (adjust ring offset as needed; use `ring-offset-1` for inline elements, `ring-offset-2` for blocks)
-- Always use `ring-ring` for focus rings, never `ring-primary/xx`. `--ring` is set per theme: dark mode amber (`41 100% 60%`), light mode dark amber (`41 100% 35%`) to ensure WCAG AA contrast in both modes.
-- Modals must trap focus while open and return focus on close. Use shadcn `Dialog`.
-
-### External links
-- Every `<a target="_blank">` link must include `<span className="sr-only"> (opens in new tab)</span>` as its last child.
-- Never add `target="_blank"` without this span. Keyboard and screen reader users must know the link opens a new tab.
-- Exception: icon-only buttons with `aria-label` already state the new-tab behavior in the label.
-
-### Semantic HTML
-- Use the correct element for the job (`<button>` for actions, `<a>` for navigation,
-  `<nav>`, `<main>`, `<header>`, `<footer>`, `<article>`, `<section>`).
-- Never use a `<div>` or `<span>` as an interactive element. Use the right element instead.
-- One `<h1>` per page. No skipped heading levels.
-- Never apply overline/label typography (`text-sm uppercase tracking-widest`) to a heading tag (`<h1>`–`<h6>`). Overline styling signals a decorative caption, not a structural heading, and a sighted user will not recognise it as a heading. If the text is a genuine section heading, give it heading-appropriate typography from `styleguide.md`. If it is purely decorative, use `<span>` or `<p>` instead.
-- Never use a non-heading tag (`<p>`, `<span>`, `<div>`) for text that is visually styled as a heading (e.g. `text-lg font-semibold` or larger, `font-heading`, `font-bold`). Promote it to the correct heading level that fits the page outline.
-- Every page's primary content must live inside a single `<main id="main-content">` element. Do not split the page content across multiple `<main>` elements or leave major sections (e.g. `PageHero`, `BottomCTA`) outside `<main>`.
-- The `<html lang="en">` attribute is set in `src/root.tsx`. Never remove or change it.
-
-### Forms
-- Every `<input>`, `<select>`, and `<textarea>` must have an associated `<label>` via `for`/`id` pairing or `aria-label`. Never use placeholder text as a substitute for a label.
-
-### Icons and special characters
-- Decorative icons paired with visible text: always add `aria-hidden="true"`. Do not omit it.
-- Never use raw Unicode characters (e.g. `→`, `♥`, `✓`) to convey meaning. Use proper text, lucide-react icons with `aria-hidden`, or an `aria-label`/`<span className="sr-only">` for screen readers.
-- Decorative separators between pill segments (e.g. `·` or `-`): use an empty `<span aria-hidden="true" className="inline-block w-px h-3 bg-current opacity-40" />` instead of a text character. A text character with `opacity-*` composites its color against the background, and the resulting blended color must pass WCAG 1.4.3 — even if the element is `aria-hidden`. An empty span has no text node so the color-contrast rule does not fire.
-- Never apply `opacity-*` to an element that contains visible text. Use a CSS color token that already has the desired luminance (e.g. `text-[hsl(var(--text-faint))]`).
-
-### ARIA
-- Only add ARIA attributes when semantic HTML is not enough.
-- Never use ARIA to paper over bad markup. Fix the markup first.
-- Always add `aria-label` or `aria-labelledby` to icon-only buttons.
-- Use `aria-expanded` on toggles that open/close UI (e.g., menu buttons).
-- Use `aria-live` regions for dynamic content updates.
-
-### Images and media
-- Every `<img>` must have an `alt` attribute. No exceptions.
-- Meaningful images: `alt` must describe the content or purpose (e.g. `alt="offon.dev"` for a logo, `alt={sponsor.name}` for a sponsor logo).
-- Decorative images (no informational value at all): use `alt=""` AND `aria-hidden="true"` together.
-- Illustrations and brand images: use a brief descriptive `alt`. Do not use `aria-hidden="true"` when alt text is present — it overrides the alt and hides the image from AT entirely.
-- Never omit the `alt` attribute entirely.
-- Icons that convey meaning need an `aria-label` or accompanying visible text.
+- Do not remove the script tag, wipe `dataLayer`, or replace `window.gtag` on deny.
+- Do not push `page_view` or `click_event` when consent is not granted.
+- Do not skip clearing `_ga*` cookies on deny or reset.
 
 ---
 
 ## Testing
 
 - Use Vitest for all unit and integration tests.
-- Use `@testing-library/react` for component tests. Test from the user's perspective,
-  not implementation details.
+- Use `@testing-library/react` for component tests. Test from the user's perspective, not implementation details.
 - Test files live in `src/test/` or co-located alongside the module as `*.test.ts(x)`.
-- Write tests for all logic in `src/lib/` and `src/hooks/`. Target 80% coverage for
-  new utility and hook files.
+- Write tests for all logic in `src/lib/` and `src/hooks/`. Target 80% coverage for new utility and hook files.
 - Visual components do not require tests unless they contain non-trivial logic.
-- Prefer `getByRole` and `getByLabelText` queries over `getByTestId`. They also
-  validate accessibility.
+- Prefer `getByRole` and `getByLabelText` queries over `getByTestId`. They also validate accessibility.
 - Never ship code that causes test or lint failures.
-- Every new hook, utility function, or stateful component must have tests covering:
-  - The happy path (expected inputs produce expected outputs)
-  - Edge cases (empty state, expired data, missing provider, etc.)
-  - All state transitions for any multi-state feature
+- Every new hook, utility function, or stateful component must have tests covering the happy path, edge cases, and all state transitions.
 - Tests must be written as part of the implementation, not as an afterthought.
-- If a component or hook has side effects (DOM mutations, localStorage, external scripts),
-  mock those side effects in tests and assert they are called correctly.
+- If a component or hook has side effects (DOM mutations, localStorage, external scripts), mock those side effects in tests and assert they are called correctly.
 - When fixing a bug, add a regression test that would have caught it before writing the fix.
-- When fixing a bug caused by an incorrect import, file path, or configuration
-  value, add a regression test that asserts on the file's contents. Behavior
-  tests can miss silent bugs where the wrong dependency is pulled in. For
-  example, after fixing a component that imported from the wrong theme library,
-  add a test that reads the component file and asserts it imports from the
-  correct path and does not import from the wrong one.
-- Prerender tests live in `src/test/prerender.test.ts` and require a production build to exist. Always run `npm run build` before `npm test` if prerender tests are included. These tests assert that each prerendered index.html contains exactly one `<title>` tag with the correct page-specific content.
-- Playwright smoke tests live in `e2e/smoke.spec.ts` and also require a production build. Run `npm run build` then `npm run test:e2e`. These tests verify each prerendered route loads in a real browser without JS errors, that `main#main-content` is present, that hydration completed (theme toggle, consent banner, client-side navigation all work), and that the skip nav is the first Tab stop. The axe-core audit runs with tags `["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"]` in both dark and light mode. Never remove `wcag22aa` from this list, and always include it alongside `wcag21aa` when updating the tag set. When adding a new prerendered route, add it to the `ROUTES` array in `e2e/smoke.spec.ts`. Do not add Playwright tests for logic that Vitest already covers.
-- SEO tests live in `src/test/seo.test.ts` and require a production build. They assert that every prerendered route has a `<meta name="description">` within 160 chars, all `og:*` tags (`og:title`, `og:description`, `og:type`, `og:url`, `og:image`, `og:image:width`, `og:image:height`, `og:image:alt`, `og:site_name`, `og:locale`), all `twitter:*` tags (`twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`, `twitter:image:alt`), and a correct `<link rel="canonical">`. When adding a new prerendered route, add it to the `ROUTES` array in `src/test/seo.test.ts`.
-- When a page renders multiple navigation landmarks (e.g. `Navbar`, `Footer`, and an in-page nav), use `within` from `@testing-library/react` to scope queries to the correct landmark before asserting link destinations. This prevents false positives when the same link text appears in more than one `<nav>`. Example: `const nav = screen.getByRole("navigation", { name: "Helpful links" }); within(nav).getByRole("link", { name: /Adventures/ })`.
-- **Testing hooks with dynamic imports:** Vitest's dynamic-import mock runner (`vi.mock("@/data/...")`) has a multi-second first-call initialization cost per test run. Never use `vi.mock` for a dynamic import that is called inside a hook and then test that hook directly — the first async tests will time out. The pattern that works: export a `DiscussionDataLoader`-style type and a default loader from the hook; accept it as an optional second argument; tests inject `vi.fn().mockResolvedValue(data)` via that argument. `vi.spyOn` on a same-module export does NOT intercept internal calls in ES module context and is not a valid alternative. See `src/hooks/useDiscussionPosts.ts` for the reference implementation.
-- **Coverage:** run `npm run test:coverage` for v8 coverage reports. The `coverage/` directory is gitignored. `@vitest/coverage-v8` is installed as a dev dependency.
+- When fixing a bug caused by an incorrect import, file path, or configuration value, add a regression test that asserts on the file's contents.
+- Prerender tests live in `src/test/prerender.test.ts` and require a production build. Always run `npm run build` before `npm test` if prerender tests are included.
+- Playwright smoke tests live in `e2e/smoke.spec.ts` and require a production build. The axe audit runs with tags `["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"]` in both dark and light mode. Never remove `wcag22aa` from this list. When adding a new prerendered route, add it to the `ROUTES` array in `e2e/smoke.spec.ts` and `src/test/seo.test.ts`, and to the `pages` array in `src/test/prerender.test.ts` with the expected `<title>` value.
+- SEO tests live in `src/test/seo.test.ts` and require a production build. When adding a new prerendered route, add it to the `ROUTES` array in `src/test/seo.test.ts`.
+- When a page renders multiple navigation landmarks, use `within` from `@testing-library/react` to scope queries to the correct landmark before asserting link destinations.
+- **Testing hooks with dynamic imports:** Never use `vi.mock` for a dynamic import called inside a hook. Export a loader type and default loader; tests inject `vi.fn().mockResolvedValue(data)` via an optional argument. See `src/hooks/useDiscussionPosts.ts` for the reference implementation.
+- **Coverage:** run `npm run test:coverage` for v8 coverage reports. `@vitest/coverage-v8` is installed as a dev dependency.
 
 ---
 
 ## Hydration and Prerender Safety
 
-Whether or not the site is prerendered today, these patterns cause bugs.
-They produce visible flashes in client-only apps and break hydration entirely
-if the site is ever prerendered. Never introduce them.
+Whether or not the site is prerendered today, these patterns cause bugs. They produce visible flashes in client-only apps and break hydration entirely if the site is ever prerendered. Never introduce them.
 
 ### Do not read browser-only globals during render
 
-- Never read `window`, `document`, `navigator`, `localStorage`, or
-  `sessionStorage` in a component function body.
-- Never read them in a `useState` lazy initializer. Initializers run on every
-  render, including the first, and the first render must be deterministic
-  without browser APIs.
-- Correct pattern: initialize state with a safe default, then update it in
-  `useEffect` or `useLayoutEffect`.
+- Never read `window`, `document`, `navigator`, `localStorage`, or `sessionStorage` in a component function body.
+- Never read them in a `useState` lazy initializer.
+- Correct pattern: initialize state with a safe default, then update it in `useEffect` or `useLayoutEffect`.
 
 ### Do not use non-deterministic values during render
 
-- Never call `Math.random()`, `Date.now()`, `new Date()`, `crypto.randomUUID()`,
-  or `performance.now()` in a render body.
-- If you need a timestamp in rendered output, capture it at module load or in
-  an effect, not at render.
-- `new Date().getFullYear()` in JSX is a common mistake. Use a module-level
-  constant instead.
+- Never call `Math.random()`, `Date.now()`, `new Date()`, `crypto.randomUUID()`, or `performance.now()` in a render body.
+- `new Date().getFullYear()` in JSX is a common mistake. Use a module-level constant instead.
 
 ### Client-only behavior must be gated
 
-- Anything that depends on `localStorage`, `matchMedia`, or similar must
-  produce the same initial render as a fresh visitor with no stored state.
-- For theme and consent state, this means: always render the default (dark,
-  no-consent) on first render, then update in an effect. To avoid a visible
-  flash, apply the stored value via an inline script in `<head>` before React
-  runs.
+- Anything that depends on `localStorage`, `matchMedia`, or similar must produce the same initial render as a fresh visitor with no stored state.
+- For theme and consent state: always render the default (dark, no-consent) on first render, then update in an effect.
 
 ### No IntersectionObserver or ResizeObserver at render time
 
-- Always create observers inside `useEffect`, never at the top level of a
-  component or module.
-- Creating observers inside `useEffect` is safe. The risk is only when an observer fires during a prerender pass and changes rendered output, causing a hydration mismatch. Guard any observer that affects rendered content with a `typeof window !== 'undefined'` check.
-- Use `useIsomorphicLayoutEffect` instead of `useLayoutEffect` in any component that renders during SSG. Define it as `const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect` and guard any localStorage or browser API access inside the callback with `if (typeof window === "undefined") return`.
+- Always create observers inside `useEffect`, never at the top level of a component or module.
+- Guard any observer that affects rendered content with a `typeof window !== 'undefined'` check.
+- Use `useIsomorphicLayoutEffect` instead of `useLayoutEffect` in any component that renders during SSG.
 
 ### entry.server.tsx must use renderToPipeableStream, not renderToString
 
-- `renderToString` emits `<!--$!-->` (failed Suspense fallback) markers for any Suspense boundary that suspends during prerender, including React Router v7's own internal Suspense for route loading.
-- These markers appear outside `</html>` in the prerendered HTML. When `hydrateRoot(document, ...)` runs, it encounters DOM nodes with no matching React component output, causing hydration to fail silently. All event handlers (button clicks, theme toggle, consent banner) are never attached.
-- `entry.server.tsx` must always use `renderToPipeableStream` with `onAllReady` callback. This waits for all Suspense boundaries to resolve before writing output, producing clean HTML with no `<!--$!-->` markers.
-- Never revert to `renderToString` in `entry.server.tsx`. The prerender test in `src/test/prerender.test.ts` asserts that no `<!--$!-->` markers appear in the built HTML.
+- `renderToString` emits `<!--$!-->` markers for any Suspense boundary that suspends during prerender.
+- `entry.server.tsx` must always use `renderToPipeableStream` with `onAllReady` callback.
+- Never revert to `renderToString` in `entry.server.tsx`.
 
 ### Do not add Suspense wrappers around Outlet in Layout.tsx
 
-- React Router v7 handles its own Suspense internally for lazy route loading. Adding `<Suspense>` around `<Outlet />` in Layout.tsx creates an extra Suspense boundary that React Router does not resolve during prerender.
-- Result: `<!--$!-->` marker outside `</html>`, broken hydration, and non-functional interactivity in the production build.
-- If you need loading states for routes, configure them in the route module itself, not in the layout.
+- Adding `<Suspense>` around `<Outlet />` in Layout.tsx creates an extra boundary React Router does not resolve during prerender, producing broken hydration.
+- If you need loading states for routes, configure them in the route module itself.
 
 ---
 
@@ -488,57 +384,51 @@ if the site is ever prerendered. Never introduce them.
 This is a fully static React site. Apply these practices on every page.
 
 ### Document structure
+
 - Every page must have a unique, descriptive `<title>` tag.
 - Every page must have a `<meta name="description">` under 160 characters.
-- Add Open Graph tags to every page: `og:title`, `og:description`, `og:url`,
-  `og:type`, and `og:image` where an image is available.
-- Add Twitter meta tags: always include `twitter:card` (use `summary_large_image` for pages with images),
-  `twitter:title`, `twitter:description`, and `twitter:image`.
-- Use React Router v7's `meta()` export on each route module to manage head tags per page. Use the `buildPageMeta` helper from `src/lib/meta.ts` — it generates the full standard set (title, canonical, description, og:*, twitter:*) from three required fields. Do not rely on `index.html` alone.
+- Add Open Graph tags to every page: `og:title`, `og:description`, `og:url`, `og:type`, and `og:image` where an image is available.
+- Add Twitter meta tags: always include `twitter:card` (use `summary_large_image` for pages with images), `twitter:title`, `twitter:description`, and `twitter:image`.
+- Use React Router v7's `meta()` export on each route module to manage head tags per page. Use the `buildPageMeta` helper from `src/lib/meta.ts`.
 
 ### Heading hierarchy
+
 - One `<h1>` per page that clearly describes the page topic.
 - Headings follow a logical order with no skipped levels.
-- Include relevant keywords in headings naturally, not forced.
-- For multi-line hero or section headings, do not use `<br />` inside `h1`/`h2`.
-  Use block-level `<span>` elements for visual line breaks so parsers read predictable text.
-- When splitting heading text across multiple visual lines, keep the text directly readable
-  in the heading via normal block `<span>` elements. Do not add a redundant `aria-label`
-  or `aria-hidden` on the line-split spans.
+- For multi-line hero or section headings, do not use `<br />` inside `h1`/`h2`. Use block-level `<span>` elements for visual line breaks.
 
 ### Links and navigation
+
 - Internal links use React Router `<Link>`. Never trigger full page reloads.
 - Use descriptive link text. Never use "click here" or "read more" alone.
-- Set the canonical URL for each page as `${SITE_URL}${pathname}` using the `SITE_URL` constant from `src/data/constants.ts`. Do not derive canonical URLs from `window.location` or `VITE_BASE_PATH`.
+- Set the canonical URL for each page as `${SITE_URL}${pathname}` using the `SITE_URL` constant from `src/data/constants.ts`.
 
 ### Performance
-- Before adding any new dependency, run `npm run build` and check the bundle size in the Vite output. If it adds more than 10 KB to the main bundle, evaluate whether a lighter alternative exists.
-- Route-level code splitting is handled automatically by React Router v7's build pipeline. No manual `React.lazy` or `Suspense` wrappers are needed or should be added.
-- Avoid layout shift by setting explicit `width` and `height` attributes on every `<img>` element.
-- For all other performance requirements including font preloading, LCP image handling, and Lighthouse baselines, see the Performance Checklist section.
+
+Read [`PERFORMANCE.md`](PERFORMANCE.md) before adding any new dependency, font, image, or route.
 
 ### Global head setup (root.tsx)
+
 - Add `<link rel="manifest" href="/site.webmanifest" />` to link the web app manifest.
-- Add `<meta name="theme-color">` tags for dark and light mode: `content="#0a0a0a" media="(prefers-color-scheme: dark)"` and `content="#f5f5ff" media="(prefers-color-scheme: light)"`.
-- Add JSON-LD structured data as two `<script type="application/ld+json">` blocks: one with `@type: "WebSite"` and one with `@type: "Organization"`. Both are already present in `src/root.tsx`. Note: the `"OffOn"` brand name is hardcoded as a string literal in both JSON-LD inline scripts (they cannot reference TypeScript constants inside `dangerouslySetInnerHTML`). Update them manually if the brand name ever changes.
+- Add `<meta name="theme-color">` tags for dark and light mode.
+- Add JSON-LD structured data as two `<script type="application/ld+json">` blocks: one `@type: "WebSite"` and one `@type: "Organization"`. The `"OffOn"` brand name is hardcoded as a string literal in both (they cannot reference TypeScript constants inside `dangerouslySetInnerHTML`). Update them manually if the brand name ever changes.
 - Always include `og:image:width`, `og:image:height`, and `og:image:alt` for all OG image tags.
 - Add `og:site_name` and `og:locale` (en_GB) to all global OG tags in `src/root.tsx`.
-- Do not add page-specific meta tags (description, og:*, twitter:*) to `src/root.tsx`. These must live in each route module's `meta()` export only. Tags in `root.tsx` are rendered on every page and will produce duplicate meta tags.
+- Do not add page-specific meta tags to `src/root.tsx`. These must live in each route module's `meta()` export only.
 
 ---
 
 ## Content and Copy
 
-All written content, code comments, commit messages, and documentation must follow
-these rules.
-
 ### Brand Name
+
 - The brand is always written **OffOn** (camelCase). Never "offon", "Offon", or "OFFON".
-- The community was previously known as "Open Ecosystem". That name is retired. Never use it anywhere in code, copy, comments, or documentation.
+- The community was previously known as "Open Ecosystem". That name is retired. Never use it anywhere.
 - In code, always use the `BRAND_NAME` constant from `src/data/constants.ts` instead of hardcoding the string.
-- The domain `offon.dev` is always lowercase (it is a URL, not a brand mention).
+- The domain `offon.dev` is always lowercase.
 
 ### Tone
+
 - Direct, positive, and community-focused.
 - Write for open source enthusiasts, not a corporate audience.
 - Use plain language. Avoid jargon unless it is standard in open source contexts.
@@ -549,29 +439,23 @@ these rules.
 
 All UI labels use **title case (Chicago style)**. Body copy uses **sentence case**.
 
-**Title case applies to:**
-- Button and CTA labels: `"Join the Community"`, `"Start a Challenge"`, `"Get in Touch"`
-- Section headings (h2/h3): `"Choose Your Adventure"`, `"Find Challenges by Technology"`
-- Card and value titles: `"Learn by Doing"`, `"Open Source First"`, `"Events & Meetups"`
-- Navigation labels and footer links: `"Propose an Adventure Idea"`
-- Pill and badge text
+**Title case applies to:** button and CTA labels, section headings (h2/h3), card and value titles, navigation labels and footer links, pill and badge text.
 
-**Title case rule:** capitalise every word except articles (a, an, the), prepositions shorter than five letters (by, in, on, of, to, for, at, up), and coordinating conjunctions (and, but, or, nor) — unless they open or close the label.
-- Correct: `"Join the Community"`, `"Share and Learn Together"`, `"Find Challenges by Technology"`
-- Incorrect: `"Join The Community"`, `"Share And Learn Together"`, `"Find challenges by technology"`
+**Title case rule:** capitalise every word except articles (a, an, the), prepositions shorter than five letters, and coordinating conjunctions (and, but, or, nor) — unless they open or close the label.
 
-**Sentence case applies to:** body paragraphs, meta descriptions, `<p>` elements, hero sub-headings, and card descriptions. Capitalise the first word and proper nouns only.
+**Sentence case applies to:** body paragraphs, meta descriptions, `<p>` elements, hero sub-headings, and card descriptions.
 
-**Exception:** decorative overline labels (spans with `section-label` / `uppercase tracking-widest`) use CSS `text-transform: uppercase`, so write their source text in plain lowercase — `"adventures"` not `"Adventures"` or `"ADVENTURES"`.
+**Exception:** decorative overline labels use CSS `text-transform: uppercase`, so write their source text in plain lowercase.
 
 ### Formatting
-- Never use em dashes anywhere, including comments and documentation.
-  Use commas, periods, or restructure the sentence instead.
+
+- Never use em dashes anywhere, including comments and documentation. Use commas, periods, or restructure the sentence instead.
 - Maintain a cohesive tone across all pages and components.
 - Do not mix formal and casual registers within the same page.
 
 ### External URLs
-- `LINKEDIN_URL` in `src/data/constants.ts` contains the current LinkedIn company page URL. The slug currently reflects a legacy brand name but is controlled by LinkedIn. Update `LINKEDIN_URL` in `src/data/constants.ts` when the LinkedIn company page URL changes.
+
+- `LINKEDIN_URL` in `src/data/constants.ts` contains the current LinkedIn company page URL. Update it when the LinkedIn company page URL changes.
 
 ---
 
@@ -602,42 +486,47 @@ All UI labels use **title case (Chicago style)**. Body copy uses **sentence case
 ## Site Maintenance
 
 ### Sitemap
+
 - Every time a new static page is added to `src/pages/` and registered as a route in `src/routes.ts`, its URL must also be added to `public/sitemap.xml`.
-- Dynamic routes with **statically known IDs** (e.g. adventure and challenge detail pages) must also be added to `public/sitemap.xml`. All adventure and level routes are statically known at build time.
-- Dynamic routes whose IDs are not known at build time must not be added to the sitemap.
-- The sitemap lives at `public/sitemap.xml` and is served at `https://offon.dev/sitemap.xml`.
+- Dynamic routes with statically known IDs must also be added to `public/sitemap.xml`.
 - `robots.txt` at `public/robots.txt` must include: `Sitemap: https://offon.dev/sitemap.xml`
 
 ### SSG prerendered routes
-- The list of routes that React Router v7 prerenders is in the `prerender` array inside `react-router.config.ts`.
+
+- The list of routes React Router v7 prerenders is in the `prerender` array inside `react-router.config.ts`.
 - When adding a new static route, add it to **all three** of: `src/routes.ts`, `public/sitemap.xml`, and the `prerender` array in `react-router.config.ts`.
-- Dynamic routes with statically known IDs (e.g. adventure and challenge detail pages) must also be listed in the `prerender` array individually and in `public/sitemap.xml`.
-- Routes not listed in the `prerender` array will not have a prerendered `index.html` and will fall back to the client-side 404 flow on GitHub Pages.
 
 When adding a new route to `src/routes.ts`, follow these rules by route type:
 
-- Static routes (e.g. `/about`, `/privacy`): add to `public/sitemap.xml`, the routes table in `README.md`, and the `prerender` array in `react-router.config.ts`.
-- Dynamic routes with statically known IDs (e.g. `/adventures/:id` when IDs are fixed): add individual URLs to `public/sitemap.xml`, the `prerender` array in `react-router.config.ts`, and the routes table in `README.md`. Also create a per-level discussion JSON file in `src/data/adventures/` if the level has a discussion thread.
-- Redirect routes (clientLoader returning redirect()): do not add to `sitemap.xml` or `README.md`.
-- Catch-all routes (`*`): do not add anywhere.
+- Static routes: add to `public/sitemap.xml`, the routes table in `README.md`, and the `prerender` array in `react-router.config.ts`.
+- Dynamic routes with statically known IDs: add individual URLs to `public/sitemap.xml`, the `prerender` array, and `README.md`. Also create a per-level discussion JSON file if the level has a discussion thread.
+- Redirect routes: do not add to `sitemap.xml` or `README.md`.
+- Catch-all routes: do not add anywhere.
 
 ### When adding a new adventure
 
-Adventures are authored as YAML files at `src/data/adventures/<id>/adventure.yaml` and compiled to TypeScript by `scripts/generate-adventures.mjs`. Shared types live in `types.ts`, contributors in `contributors.ts`. The generated barrel `index.ts` re-exports `ADVENTURES`, `ALL_TAGS`, `ADVENTURE_CONTRIBUTORS`, `getLevelsByTag`, `tagToSlug`, and `slugToTag`. The Discourse API does not expose the structured data needed (Codespace URLs, technology tags, learnings), so these YAML files are the authoritative source of truth.
-
 Complete checklist for every new adventure:
 
-1. Run `node scripts/new-adventure.mjs` to scaffold a new `src/data/adventures/<id>/adventure.yaml`. Fill in the required fields: `id`, `title`, `month`, `story`, `tags`, and `levels`. Each level needs `id`, `name`, `difficulty`, `learnings`, `devcontainerPath` (relative path to the devcontainer.json, e.g. `.devcontainer/04-blind-by-design_01-beginner/devcontainer.json`), and `discussionUrl` (full URL or path relative to `COMMUNITY_URL`). The schema is at `schemas/adventure.schema.json`.
+1. Run `npm run new-adventure` to scaffold a new `src/data/adventures/<id>/adventure.yaml`.
 2. Run `npm run generate` to produce `<id>.generated.ts` and update `index.ts`.
 3. Add the adventure detail route and all level routes to `src/routes.ts`.
-4. Add the adventure landing page URL and every level URL to `public/sitemap.xml`.
-5. Add the adventure landing page URL and every level URL to the `prerender` array in `react-router.config.ts`.
-6. Create a per-level discussion JSON file at `src/data/adventures/<adventure-id>/<level-id>-posts.json` with `{ "discussionUrl": "<full-topic-url>" }` for each level that has a discussion thread.
-7. Run `node scripts/refresh-discussions.mjs` to fetch discussion posts for the new levels.
-8. Add the adventure to `ADVENTURE_CATEGORIES` in `scripts/refresh-leaderboard.mjs` with the correct `categoryId` (find it at `<COMMUNITY_URL>/categories.json`) and `levelCount`.
-9. Run `node scripts/refresh-leaderboard.mjs` to create `src/data/adventures/<adventure-id>/leaderboard.json`.
+4. Add all URLs to `public/sitemap.xml`.
+5. Add all URLs to the `prerender` array in `react-router.config.ts`.
+6. Create a per-level discussion JSON file at `src/data/adventures/<adventure-id>/<level-id>-posts.json` with `{ "discussionUrl": "<full-topic-url>" }`.
+7. Run `node scripts/refresh-discussions.mjs` to fetch discussion posts.
+8. Add the adventure to `ADVENTURE_CATEGORIES` in `scripts/refresh-leaderboard.mjs` with the correct `categoryId` and level booleans.
+9. Run `node scripts/refresh-leaderboard.mjs` to create `leaderboard.json`.
 10. Update the routes table in `README.md`.
 
+### When adding a new level to an existing adventure
+
+1. Run `npm run new-level -- --adventure <id> --level <id>`. This scaffolds `<level-id>-posts.json`, adds the prerender entry to `react-router.config.ts`, and adds the URL to `public/sitemap.xml`.
+2. Add the level fields to `src/data/adventures/<id>/adventure.yaml` and run `npm run generate`.
+3. Add the level route to `src/routes.ts`.
+4. Add the level to `ADVENTURE_CATEGORIES` in `scripts/refresh-leaderboard.mjs` and run `node scripts/refresh-leaderboard.mjs`.
+5. Add the level URL to the `ROUTES` array in `e2e/smoke.spec.ts` and `src/test/seo.test.ts`, and to the `pages` array in `src/test/prerender.test.ts` with the expected `<title>` value.
+6. Update the routes table in `README.md`.
+
 ---
 
 ## Deployment
@@ -645,7 +534,7 @@ Complete checklist for every new adventure:
 - Push to `main` triggers `deploy.yml` and deploys to GitHub Pages.
 - Open PRs trigger `preview.yml` and create a PR preview deployment.
 - Only static files in `dist/client/` are deployed. No server config is needed.
-- The base path is set via the `VITE_BASE_PATH` environment variable (defaults to `/`). PR previews set this automatically in `preview.yml`. Never change this without verifying GitHub Pages routing.
+- The base path is set via the `VITE_BASE_PATH` environment variable (defaults to `/`). Never change this without verifying GitHub Pages routing.
 
 ### GitHub Actions allowlist
 
@@ -653,52 +542,34 @@ The `off-on-dev` organisation restricts which third-party actions can run. Only
 
 | Action | Pinned version |
 |---|---|
-| `actions/checkout` | `@v4` — never `@v5`, `@v6`, or any other version |
-| `actions/setup-node` | `@v4` — never `@v5`, `@v6`, or any other version |
-| `JamesIves/github-pages-deploy-action` | any tag (`@*`) |
-| `marocchino/sticky-pull-request-comment` | any tag (`@*`) |
-| `rossjrw/pr-preview-action` | any tag (`@*`) |
+| `actions/checkout` | `@v4` only |
+| `actions/setup-node` | `@v4` only |
+| `JamesIves/github-pages-deploy-action` | any tag |
+| `marocchino/sticky-pull-request-comment` | any tag |
+| `rossjrw/pr-preview-action` | any tag |
 | Actions owned by `off-on-dev` | any |
 | Actions created by GitHub | any |
 | Actions verified in the GitHub Marketplace | any |
 
-**Before adding any new `uses:` line to a workflow file, verify the action is on this list.** If it is not, replace it with an equivalent using `gh` (GitHub CLI, pre-installed on all `ubuntu-latest` runners) or native shell commands. Do not ask for the allowlist to be expanded unless there is no alternative.
-
-This rule is enforced at the org level. A workflow that references an action outside the allowlist will fail immediately with an "action is not allowed" error — it will never even reach the step that uses it.
+Before adding any new `uses:` line to a workflow file, verify the action is on this list. If it is not, replace it with an equivalent using `gh` (GitHub CLI) or native shell commands.
 
 ---
 
 ## Before Submitting Code
 
-Every code change must pass all of these checks before being considered done.
-State the result of each check explicitly before finishing a task.
-
-### Mandatory checks (non-negotiable)
+Every code change must pass all of these checks before being considered done. State the result of each check explicitly before finishing a task.
 
-1. **Run lint:** `npm run lint` must exit with zero errors. No warnings suppressed
-   with eslint-disable unless the reason is documented in a comment on the same line.
+### Mandatory checks
 
-2. **Run tests:** `npm test` must pass with zero failures. No tests skipped or
-   commented out.
-
-3. **Run e2e and a11y tests:** `npm run build && npm run test:e2e` must pass with zero failures. This is mandatory before every commit, not just in CI. Playwright tests cover page titles, hydration, accessibility (axe), and client-side navigation — none of these are covered by Vitest alone.
-
-4. **Run build:** `npm run build` must complete with no TypeScript errors or
-   bundling failures. Run this for every non-trivial change, not just those that touch types or interfaces.
-
-5. **Re-read every file you changed:** After making changes, re-read the full
-   affected section of each modified file to verify the final state is correct.
-   Never assume an edit landed correctly without checking.
-
-6. **Check all call sites:** If you changed a function signature, component props,
-   or exported type, search for all usages and confirm they are updated.
-
-7. **Check imports:** Every import must resolve. No unused imports. No circular
-   dependencies introduced.
-
-8. **Verify at three viewports:** All UI changes must be verified at mobile (375px), tablet (768px), and desktop (1280px). Always test against the production build (`npm run build && npm run preview`), never the dev server.
-
-9. **Check discussion data on every PR:** If the PR adds or modifies adventure levels, verify that a per-level discussion JSON file exists at `src/data/adventures/<adventure-id>/<level-id>-posts.json` with the correct `discussionUrl`. Run `node scripts/refresh-discussions.mjs` to populate discussion posts. A missing file means the discussion feed will silently show no posts for that level.
+1. **Run lint:** `npm run lint` must exit with zero errors.
+2. **Run tests:** `npm test` must pass with zero failures.
+3. **Run e2e and a11y tests:** `npm run build && npm run test:e2e` must pass with zero failures. The axe audit runs tags `["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"]` in both light and dark mode. Never reduce this tag set.
+4. **Run build:** `npm run build` must complete with no TypeScript errors or bundling failures.
+5. **Re-read every file you changed:** verify the final state is correct. Never assume an edit landed correctly without checking.
+6. **Check all call sites:** if you changed a function signature, component props, or exported type, search for all usages and confirm they are updated.
+7. **Check imports:** every import must resolve. No unused imports. No circular dependencies introduced.
+8. **Verify at three viewports:** 375px, 768px, and 1280px. Always test against the production build, never the dev server.
+9. **Check discussion data on every PR:** if the PR adds or modifies adventure levels, verify that a per-level discussion JSON file exists with the correct `discussionUrl`.
 
 ### Before writing any code
 
@@ -706,21 +577,17 @@ State the result of each check explicitly before finishing a task.
 2. If the change touches more than one file, list all affected files before starting.
 3. If the change involves a state machine, enumerate all transitions first.
 4. If the change involves shared state, confirm a context provider is used.
-5. If the change involves a side effect (DOM, localStorage, external scripts),
-   write the test before or alongside the implementation, not after.
+5. If the change involves a side effect (DOM, localStorage, external scripts), write the test before or alongside the implementation.
 
 ### Red flags that require stopping and flagging to the user
 
-- A fix requires changing more than 3 files you did not plan to change
-- A type error requires adding a cast or suppression to resolve
-- A test requires mocking something that was not mocked before
-- The same bug has been fixed more than once in this session
-- A replacement did not change the file (silent no-op)
-- The error in the browser console shows a different bundle hash than the
-  latest build output
-- A "fix" has been applied but the same error reproduces unchanged
-- Debugging requires making a diagnostic script more complex instead of
-  reading what the simpler diagnostic already said
+- A fix requires changing more than 3 files you did not plan to change.
+- A type error requires adding a cast or suppression to resolve.
+- A test requires mocking something that was not mocked before.
+- The same bug has been fixed more than once in this session.
+- A replacement did not change the file (silent no-op).
+- The error in the browser console shows a different bundle hash than the latest build output.
+- A "fix" has been applied but the same error reproduces unchanged.
 
 ---
 
@@ -732,144 +599,80 @@ State the result of each check explicitly before finishing a task.
 - Do not install new dependencies without checking if shadcn/ui or an existing utility covers the need.
 - Do not commit secrets, tokens, or credentials.
 - Do not change the `@theme` block in `src/index.css` without verifying the change does not break existing components.
-- Do not reinstall `@radix-ui/*` packages that were removed. If a Radix primitive is genuinely needed, check whether raw HTML with Tailwind solves the problem first.
-- Do not re-derive data from `ADVENTURES` inside component files. Any computed value that belongs to the data layer (e.g. a deduplicated tag list) should be exported from `src/data/adventures/index.ts` and imported. `ALL_TAGS` is the established pattern.
-- Do not edit `*.generated.ts`, `src/data/adventures/index.ts`, or `src/data/adventures/summaries.ts` by hand. These are produced by `scripts/generate-adventures.mjs` from the YAML source files. Edit the YAML and run `npm run generate` instead.
+- Do not reinstall `@radix-ui/*` packages that were removed.
+- Do not re-derive data from `ADVENTURES` inside component files.
+- Do not edit `*.generated.ts`, `src/data/adventures/index.ts`, or `src/data/adventures/summaries.ts` by hand.
 
 ---
 
 ## When Suggesting Code
 
 - Always read `styleguide.md` before making any UI, copy, or component changes.
-  It is the source of truth for typography, color tokens, spacing, and brand rules.
-  Never introduce values that contradict it.
 - Follow all rules in the Styling and Components sections.
-- Flag any accessibility concerns before writing the code, not after.
+- Flag any accessibility concerns before writing the code, not after. Read `ACCESSIBILITY.md` first.
 - Flag any breaking changes explicitly.
 - Prefer simple, readable solutions over clever ones.
-- If something could be done multiple ways, briefly explain the tradeoff and
-  recommend one approach.
+- If something could be done multiple ways, briefly explain the tradeoff and recommend one approach.
 
 ---
 
 ## After Making Changes
 
-Documentation updates are not optional. They are part of completing a task.
-A task is not done until the relevant docs are updated. Run this checklist
-before every commit:
+A task is not done until the relevant docs are updated.
 
-### Always check these four things after any non-trivial change:
+### Always check these four things after any non-trivial change
 
-1. **Did you add or change a component, hook, or utility?**
-   If yes, update `styleguide.md` with a brief entry under the relevant section.
-   Include: what it does, its props or return type, and any usage notes.
-   Do not skip this even for small hooks.
+1. **Did you add or change a component, hook, or utility?** Update `styleguide.md`.
+2. **Did you add or change a page or route?** Update the routes table in `README.md`.
+3. **Did you add or change an environment variable, constant, or config value?** Document it in `README.md`.
+4. **Did you change a build, deploy, or dev workflow?** Update the Commands section in both `CLAUDE.md` and `README.md`.
 
-2. **Did you add or change a page or route?**
-   If yes, update the routes table in `README.md` with the path and purpose.
-
-3. **Did you add or change an environment variable, constant, or config value?**
-   If yes, document it in `README.md`. If it affects visual output, add it to
-   `styleguide.md` too. Never reference a constant value directly in docs,
-   point to the file it lives in instead.
-
-4. **Did you change a build, deploy, or dev workflow?**
-   If yes, update the Commands section in both `CLAUDE.md` and `README.md`.
-
-### After completing any task, explicitly state:
-- Which of the four checks above applied
-- What was updated in each doc, or why it was skipped
-- If nothing needed updating, say so and explain why
-
-### Triggers and what to update:
+After completing any task, explicitly state which checks applied, what was updated, or why it was skipped.
 
 | Change | Update |
 |---|---|
 | New component | styleguide.md: component entry with props and usage |
 | New hook | styleguide.md: hook entry with return type and behavior |
 | New utility function | styleguide.md: brief entry if it affects patterns |
-| New page or route | README.md routes table for all non-redirect routes; `public/sitemap.xml` and `prerender` array in `react-router.config.ts` for static routes only. |
-| New constant | README.md: constants section, styleguide.md if visual |
-| New workflow step | README.md: commands section, CLAUDE.md if it changes a rule |
+| New page or route | README.md routes table; sitemap.xml and prerender array for static routes |
+| New constant | README.md constants section, styleguide.md if visual |
+| New workflow step | README.md commands section, CLAUDE.md if it changes a rule |
 | New brand or copy rule | styleguide.md first, then apply across codebase |
 | Bug fix that reveals a missing rule | CLAUDE.md: add the rule to prevent recurrence |
 | New test pattern | CLAUDE.md: add to Testing section if it sets a precedent |
 
-Do not document trivial fixes (typos, one-line patches) unless they change a
-rule or pattern others should follow.
-
 ---
 
 ## Implementation Rules
 
-These rules exist to prevent specific classes of mistakes. Follow them unconditionally.
-
 ### Shared state
-- If a hook or piece of state is consumed by more than one sibling component, it must
-  be a React context provider, not a plain hook. Verify this at design time before
-  writing any code.
+
+If a hook or piece of state is consumed by more than one sibling component, it must be a React context provider, not a plain hook.
 
 ### File extensions
-- Any file that renders or returns JSX must use the `.tsx` extension. Files that are
-  pure TypeScript logic with no JSX use `.ts`. Catch this before writing, not after lint.
+
+Any file that renders or returns JSX must use the `.tsx` extension. Files that are pure TypeScript logic with no JSX use `.ts`.
 
 ### React hooks
-- Each `useEffect` must have a single responsibility. Never combine side effects that
-  have different trigger conditions into one effect with a merged dependency array.
-  Split them into separate `useEffect` calls.
+
+Each `useEffect` must have a single responsibility. Never combine side effects with different trigger conditions into one effect. Split them.
 
 ### State machines
-- When implementing any feature with multiple states (e.g. consent: granted / denied /
-  null), enumerate every transition before writing code. For each transition, list every
-  system that must be updated (storage, UI state, external APIs, DOM). Verify all of
-  them are handled before marking the task done.
+
+When implementing any feature with multiple states, enumerate every transition before writing code. For each transition, list every system that must be updated (storage, UI state, external APIs, DOM).
 
 ---
 
 ## SEO Checklist: Required for Every New Page
 
-Add via the route module's `meta()` export — never in `src/root.tsx`:
+Add via the route module's `meta()` export, never in `src/root.tsx`:
+
 - `<title>` (unique) and `<meta name="description">` (under 160 chars)
 - `og:title`, `og:description`, `og:url`, `og:type`, `og:image`, `og:image:width` (1200), `og:image:height` (630), `og:image:alt`, `og:site_name`, `og:locale` (en_GB)
 - `twitter:card` (`summary_large_image`), `twitter:title`, `twitter:description`, `twitter:image`, `twitter:image:alt`
 - `<link rel="canonical">` set to `${SITE_URL}${pathname}`
 - Correct heading hierarchy: one `h1`, `h2` for sections, `h3` for subsections
 
-Static routes only — add to both:
-- `public/sitemap.xml`
-- `prerender` array in `react-router.config.ts`
-
-One-time `src/root.tsx` check (not per page): manifest link, both theme-color tags, JSON-LD block, `lang="en"` on `<html>`. See SEO > Global head setup for the full requirements.
-
----
-
-## WCAG AA Checklist: Required for Every New Component
-
-- Text contrast: 4.5:1 for normal, 3:1 for large (18px+). Test both light and dark modes. (See Accessibility > Color contrast.)
-- Never use `hsl(41 100% 60%)` (`#ffc034` yellow) as text in light mode — fails contrast.
-- Never place text on `bg-primary` without verifying light mode contrast.
-- Focus rings: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm`. Inline elements: `ring-offset-1`. (See Accessibility > Keyboard navigation.)
-- Every `<img>` needs `alt`. Meaningful/brand images: describe content. Purely decorative: `alt=""` + `aria-hidden="true"` together. Never use `aria-hidden="true"` when alt text is present. (See Accessibility > Images and media.)
-- Hover states must not change layout properties (padding, border, font-weight, width). Use color and opacity only.
-- Semantic landmarks: `<main>`, `<nav>`, `<footer>`, `<section>`, `<article>`. Every page: `<main id="main-content">`. (See Accessibility > Semantic HTML.)
-- One `<h1>` per page, no skipped levels. No `<br />` in headings — use block `<span>` elements.
-- Every `<a target="_blank">` needs `<span className="sr-only"> (opens in new tab)</span>`. (See Accessibility > External links.)
-- Decorative icons: `aria-hidden="true"`. No raw Unicode symbols (`→`, `♥`, `✓`, `★`) for meaning. (See Accessibility > Icons and special characters.)
-- **Decorative separators** (e.g. `·`, `-` between pill segments): never use a text character with `opacity-*`. Use an empty `<span>` styled as a CSS divider: `<span aria-hidden="true" className="inline-block w-px h-3 bg-current opacity-40" />`. No text content means axe's color-contrast rule does not evaluate it, and the WCAG 1.4.11 non-text-contrast exemption covers purely decorative separators.
-- **Never use `opacity-*` on an element that contains visible text** — opacity composites the text color against the background and the resulting blended color must still meet contrast requirements. Use explicit CSS color values (e.g. `text-[hsl(var(--text-faint))]`) instead of opacity to produce muted text.
-- **Minimum visible text size is 12px** (`text-xs`). Do not use `text-[0.6rem]` or `text-[0.65rem]` for any visible (non-`aria-hidden`) text. Avatar initials and rank numbers that are purely decorative and `aria-hidden` are exempt.
-- All page content (including `PageHero` and `BottomCTA`) inside `<main id="main-content">`.
-- Dynamic content updates: use `aria-live` regions. (See Accessibility > ARIA.)
-
----
-
-## Performance Checklist: Required When Adding Fonts, Images, or New Routes
+Static routes only: add to `public/sitemap.xml` and the `prerender` array in `react-router.config.ts`.
 
-- Preload critical fonts via the `links()` export in `src/root.tsx` (not as hardcoded `<link>` tags in the JSX). React Router's `<Links />` component manages these correctly during SSR and hydration, preventing the "preloaded but not used" browser warning that hardcoded preloads cause. Example: `{ rel: "preload", href: \`${import.meta.env.BASE_URL}fonts/inter-latin-400-normal.woff2\`, as: "font", type: "font/woff2", crossOrigin: "anonymous" }`.
-- Only preload fonts used above the fold. Check the `links()` export in `src/root.tsx` for the current preload list and update it whenever above-the-fold typography changes.
-- Do not lazy-load LCP images. Remove `loading="lazy"` from any above-the-fold image.
-- Add `loading="lazy"` to all `<img>` elements that are not visible in the initial viewport.
-- Add `fetchpriority="high"` to the LCP image.
-- Add `width` and `height` attributes to every `<img>` element to prevent layout shift (CLS).
-- New routes are automatically code-split by Vite. No manual action needed.
-- Always run Lighthouse against the production build: `npm run build && npm run preview`. Never run it against the dev server.
+One-time `src/root.tsx` check (not per page): manifest link, both theme-color tags, JSON-LD block, `lang="en"` on `<html>`.
diff --git a/PERFORMANCE.md b/PERFORMANCE.md
new file mode 100644
index 00000000..7c8f6b3e
--- /dev/null
+++ b/PERFORMANCE.md
@@ -0,0 +1,61 @@
+# Performance
+
+This file applies to all work on offon.dev. Read it before adding fonts, images, dependencies, or new routes.
+
+---
+
+## Targets
+
+- Lighthouse performance score target is 95. Current score is 93. Do not regress below 93 and aim to close the gap before adding new dependencies or fonts.
+- Always run Lighthouse against `npm run build && npm run preview`. Never against the dev server.
+- Check bundle size in Vite output after every `npm run build`. If a new dependency adds more than 10 KB to the main bundle, evaluate whether a lighter alternative exists.
+
+---
+
+## Images
+
+- Set explicit `width` and `height` attributes on every `<img>` to prevent layout shift (CLS).
+- Add `loading="lazy"` to all `<img>` elements not visible in the initial viewport.
+- Add `decoding="async"` to all `<img>` elements that are not the LCP image.
+- Do not lazy-load the LCP image. Remove `loading="lazy"` from any above-the-fold image.
+- Add `fetchpriority="high"` to the LCP image.
+
+---
+
+## Fonts
+
+- All fonts are self-hosted under `public/fonts/`. Never add an external font CDN link.
+- Preload critical fonts via the `links()` export in `src/root.tsx` (not as hardcoded `<link>` tags in the JSX). React Router's `<Links />` manages these correctly and prevents the "preloaded but not used" browser warning.
+  ```ts
+  { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/inter-latin-400-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" }
+  ```
+- Only preload fonts used above the fold. Check the `links()` export in `src/root.tsx` and update it whenever above-the-fold typography changes.
+
+---
+
+## JavaScript and bundle size
+
+- Route-level code splitting is handled automatically by React Router v7. No manual `React.lazy` or `Suspense` wrappers are needed or should be added.
+- Never use `will-change` on more than 3 elements simultaneously.
+- Before adding any new dependency, run `npm run build` and check the bundle output.
+
+---
+
+## Iframes and embeds
+
+- Lazy-load `<iframe>` embeds with `loading="lazy"`.
+
+---
+
+## Motion
+
+- Wrap all animations and transitions in `@media (prefers-reduced-motion: no-preference)` so they are disabled by default for users who prefer reduced motion.
+- See [ACCESSIBILITY.md](ACCESSIBILITY.md) for the full motion rule.
+
+---
+
+## New routes
+
+- New routes are automatically code-split by Vite. No manual action needed.
+- When adding a new static route, add it to `public/sitemap.xml`, the `prerender` array in `react-router.config.ts`, and the routes table in `README.md`.
+- See the Site Maintenance section in `CLAUDE.md` for the full route checklist.
\ No newline at end of file
diff --git a/README.md b/README.md
index 9f2cfe27..7b93fa33 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Source for [offon.dev](https://offon.dev/), the home of OffOn: a platform for op
 - **React 19** + **TypeScript**: UI and type safety
 - **Vite**: build tooling and dev server
 - **Tailwind CSS**: utility-first styling
-- **shadcn/ui**: accessible component primitives built on Radix UI
+- **shadcn/ui**: minimal component surface (`badge.tsx`, `tooltip.tsx`); most Radix UI packages were intentionally removed
 - **React Router v7**: client-side routing with static prerendering
 - **Vitest**: unit and component testing
 - **Playwright**: browser smoke tests (`e2e/`)
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 4422620e..63fd8982 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -29,7 +29,7 @@ const ROUTES: RouteSpec[] = [
   { path: "/adventures/blind-by-design", title: /Blind by Design/ },
   { path: "/adventures/blind-by-design/levels/beginner", title: /Stand up the Lab/ },
   { path: "/adventures/blind-by-design/levels/intermediate", title: /Outcome by Cohort/ },
-  { path: "/challenges", title: /Challenges - Hands-on/ },
+  { path: "/challenges", title: /Open Source Challenges/ },
   { path: "/challenges/argo-cd", title: /Argo CD Challenges/ },
   { path: "/challenges/argo-rollouts", title: /Argo Rollouts Challenges/ },
   { path: "/challenges/github-actions", title: /GitHub Actions Challenges/ },
@@ -171,7 +171,7 @@ test.describe("hydration and interactivity", () => {
 
   test("consent accept stores granted and replaces banner with preferences button", async ({ page }) => {
     await page.goto("/");
-    const banner = page.getByRole("region", { name: "Cookie consent" });
+    const banner = page.getByRole("region", { name: "This site uses analytics cookies" });
     await expect(banner).toBeVisible();
 
     await page.getByRole("button", { name: "Accept analytics cookies" }).click();
@@ -186,7 +186,7 @@ test.describe("hydration and interactivity", () => {
     await page.goto("/");
     await page.getByRole("button", { name: "Decline analytics cookies" }).click();
 
-    await expect(page.getByRole("region", { name: "Cookie consent" })).not.toBeVisible();
+    await expect(page.getByRole("region", { name: "This site uses analytics cookies" })).not.toBeVisible();
     await expect(page.getByRole("button", { name: "Change cookie preferences" })).toBeVisible();
     const stored = await page.evaluate(() => localStorage.getItem("analytics_consent"));
     expect(JSON.parse(stored!).value).toBe("denied");
diff --git a/package-lock.json b/package-lock.json
index be07e51d..702f817c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "react-markdown": "^10.1.0",
         "react-router": "^7.14.2",
         "remark-gfm": "^4.0.1",
-        "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0"
       },
       "devDependencies": {
@@ -6626,16 +6625,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/sonner": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
-      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 6eb07aaa..15ae9532 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "react-markdown": "^10.1.0",
     "react-router": "^7.14.2",
     "remark-gfm": "^4.0.1",
-    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
diff --git a/public/fonts/jetbrains-mono-latin-500-normal.woff2 b/public/fonts/jetbrains-mono-latin-500-normal.woff2
deleted file mode 100644
index be878e68..00000000
Binary files a/public/fonts/jetbrains-mono-latin-500-normal.woff2 and /dev/null differ
diff --git a/public/fonts/jetbrains-mono-latin-ext-500-normal.woff2 b/public/fonts/jetbrains-mono-latin-ext-500-normal.woff2
deleted file mode 100644
index 5cc89b16..00000000
Binary files a/public/fonts/jetbrains-mono-latin-ext-500-normal.woff2 and /dev/null differ
diff --git a/src/Layout.tsx b/src/Layout.tsx
index ad42f21c..5fd53b74 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet, useLocation } from "react-router";
-import { useEffect, type JSX } from "react";
+import { useEffect, useRef, useState, type JSX } from "react";
 import { ThemeProvider } from "@/hooks/useTheme";
 import { ConsentBanner } from "@/components/ConsentBanner";
 import { ConsentProvider, useConsent } from "@/hooks/useConsent";
@@ -51,6 +51,31 @@ const ClickTracker = (): null => {
   return null;
 };
 
+// Announces page title to screen readers on SPA navigation. Skips the initial
+// mount so users don't hear an announcement when they first load the page.
+const RouteAnnouncer = (): JSX.Element => {
+  const { pathname } = useLocation();
+  const [announcement, setAnnouncement] = useState("");
+  const hasMounted = useRef(false);
+
+  useEffect(() => {
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      return;
+    }
+    const raf = requestAnimationFrame(() => {
+      setAnnouncement(document.title || pathname);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [pathname]);
+
+  return (
+    <span role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      {announcement}
+    </span>
+  );
+};
+
 export function Layout(): JSX.Element {
   return (
     <ThemeProvider>
@@ -59,6 +84,7 @@ export function Layout(): JSX.Element {
           Skip to main content
         </a>
         <ScrollToTop />
+        <RouteAnnouncer />
         <PageViewTracker />
         <ClickTracker />
         <ConsentBanner />
diff --git a/src/components/ChallengesGrid.tsx b/src/components/ChallengesGrid.tsx
index 5b2b2218..f146bfa5 100644
--- a/src/components/ChallengesGrid.tsx
+++ b/src/components/ChallengesGrid.tsx
@@ -6,9 +6,20 @@ import { SectionLabel } from "@/components/SectionLabel";
 
 export const ChallengesGrid = (): JSX.Element => {
   const [activeTopic, setActiveTopic] = useState<string | null>(null);
+  const [hasFiltered, setHasFiltered] = useState(false);
 
   const filteredLevels = activeTopic ? getLevelSummariesByTag(activeTopic) : [];
 
+  const handleAllClick = (): void => {
+    if (activeTopic !== null) setHasFiltered(true);
+    setActiveTopic(null);
+  };
+
+  const handleTagClick = (tag: string): void => {
+    if (activeTopic !== tag) setHasFiltered(true);
+    setActiveTopic(activeTopic === tag ? null : tag);
+  };
+
   return (
     <section id="challenges" className="py-24 px-6 md:px-16">
       <div className="mx-auto max-w-6xl">
@@ -20,11 +31,19 @@ export const ChallengesGrid = (): JSX.Element => {
 
             {/* Topic filter chips */}
             <div role="group" aria-label="Filter challenges by technology" className="mb-8 flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                onClick={handleAllClick}
+                className={`${activeTopic === null ? "pill-active" : "pill-inactive"} px-6`}
+                aria-pressed={activeTopic === null}
+              >
+                All
+              </button>
               {SUMMARY_TAGS.map((tag) => (
                 <button
                   key={tag}
                   type="button"
-                  onClick={() => setActiveTopic(activeTopic === tag ? null : tag)}
+                  onClick={() => handleTagClick(tag)}
                   className={activeTopic === tag ? "pill-active" : "pill-inactive"}
                   aria-pressed={activeTopic === tag}
                 >
@@ -33,9 +52,18 @@ export const ChallengesGrid = (): JSX.Element => {
               ))}
             </div>
 
+            {/* Permanent live region announces both filter-applied and filter-cleared states */}
+            <p aria-live="polite" aria-atomic="true" className="sr-only">
+              {activeTopic
+                ? `Showing ${filteredLevels.length} ${filteredLevels.length === 1 ? "challenge" : "challenges"} tagged with ${activeTopic}`
+                : hasFiltered
+                ? "Filter cleared, showing all adventures"
+                : ""}
+            </p>
+
             {activeTopic ? (
               <>
-                <p aria-live="polite" aria-atomic="true" className="animate-fade-up mb-6 font-sans text-sm font-medium tracking-wide text-primary">
+                <p className="animate-fade-up mb-6 font-sans text-sm font-medium tracking-wide text-primary">
                   {filteredLevels.length} {filteredLevels.length === 1 ? "challenge" : "challenges"} tagged with {activeTopic}
                 </p>
                 <div key={activeTopic} className="animate-fade-up grid gap-5 md:grid-cols-2 lg:grid-cols-3">
diff --git a/src/components/ConsentBanner.tsx b/src/components/ConsentBanner.tsx
index af6e8fca..d08c7679 100644
--- a/src/components/ConsentBanner.tsx
+++ b/src/components/ConsentBanner.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, type JSX } from "react";
+import { useState, useEffect, useRef, type JSX } from "react";
 import { Link } from "react-router";
 import { Cookie } from "lucide-react";
 import { useConsent } from "@/hooks/useConsent";
@@ -6,11 +6,20 @@ import { useConsent } from "@/hooks/useConsent";
 export function ConsentBanner(): JSX.Element | null {
   const { consent, grant, deny, reset } = useConsent();
   const [mounted, setMounted] = useState(false);
+  const declineRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect -- mount guard; SSG requires a safe default (null) on first render so the banner is absent from prerendered HTML and cannot become the LCP element
   }, []);
 
+  // Move focus to Decline when the banner appears (initial visit or after reset)
+  // so keyboard users are not left with focus stranded on an unmounted button.
+  useEffect(() => {
+    if (mounted && consent === null) {
+      declineRef.current?.focus();
+    }
+  }, [mounted, consent]);
+
   if (!mounted) return null;
 
   if (consent !== null) {
@@ -31,14 +40,14 @@ export function ConsentBanner(): JSX.Element | null {
   return (
     <div
       role="region"
-      aria-label="Cookie consent"
+      aria-labelledby="consent-banner-title"
       aria-live="polite"
       style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
       className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background shadow-lg"
     >
       <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-5 sm:flex-row sm:items-start sm:gap-8 sm:px-6">
         <div className="flex-1 space-y-1">
-          <p className="text-sm text-foreground">This site uses analytics cookies</p>
+          <p id="consent-banner-title" className="text-sm text-foreground">This site uses analytics cookies</p>
           <p className="text-sm text-muted-foreground">
             We use Google Analytics to understand how visitors use offon.dev. No data is sent to
             Google until you accept. You can change your preference at any time. See our{" "}
@@ -53,6 +62,7 @@ export function ConsentBanner(): JSX.Element | null {
         </div>
         <div className="flex shrink-0 flex-wrap gap-2 sm:items-center">
           <button
+            ref={declineRef}
             type="button"
             onClick={deny}
             aria-label="Decline analytics cookies"
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 4e5220ac..1c90c23b 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -4,7 +4,7 @@ import { BRAND_SECONDARY_LINE_PARTS, BRAND_SLOGAN_PARTS, COMMUNITY_URL } from "@
 
 export const Hero = (): JSX.Element => {
   const fireflies = useMemo(
-    () => Array.from({ length: 12 }, (_, i) => <span key={i} className="firefly" />),
+    () => Array.from({ length: 8 }, (_, i) => <span key={i} className="firefly" />),
     [],
   );
 
diff --git a/src/components/MarkdownContent.tsx b/src/components/MarkdownContent.tsx
index 378238b0..61a5dcc5 100644
--- a/src/components/MarkdownContent.tsx
+++ b/src/components/MarkdownContent.tsx
@@ -48,6 +48,7 @@ const CodeBlock = ({ children, showCopy = true }: { children: ReactNode; showCop
       <pre
         ref={preRef}
         tabIndex={0}
+        aria-label="Code block"
         className={`overflow-x-auto rounded-lg border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-4 font-mono text-sm leading-relaxed text-foreground [&>code]:border-none [&>code]:bg-transparent [&>code]:p-0 [&>code]:rounded-none [&>code]:text-[1em]${showCopy ? " pr-14" : ""}`}
       >
         {children}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d33efc38..88e20af6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,13 @@
-import { useState, type JSX } from "react";
+import { useState, useEffect, useRef, type JSX } from "react";
 import { Link, useLocation } from "react-router";
 import { Sun, Moon, Menu, X, ExternalLink } from "lucide-react";
 import { NavLink } from "@/components/NavLink";
 import { useTheme } from "@/hooks/useTheme";
-import { useActiveSection } from "@/hooks/useActiveSection";
 import { COMMUNITY_URL } from "@/data/constants";
 import { cn } from "@/lib/utils";
 import logoDark from "@/assets/offon-logo-dark-color.svg";
 import logoLight from "@/assets/offon-logo-light-color.svg";
 
-const OBSERVED_SECTIONS = ["challenges"];
-
 const linkCls = "inline-flex items-center gap-1 min-h-[44px] text-sm font-medium text-[hsl(var(--text-secondary))] hover:text-primary transition-colors underline underline-offset-4 decoration-[3px] decoration-transparent rounded px-1.5 -mx-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
 const activeCls = "text-primary underline decoration-primary underline-offset-4";
 
@@ -31,11 +28,10 @@ const NavThemeToggle = ({ theme, onToggle, className }: NavThemeToggleProps): JS
 
 type NavLinksProps = {
   homeActive: boolean;
-  challengesActive: boolean;
   onNavigate?: () => void;
 };
 
-const NavLinks = ({ homeActive, challengesActive, onNavigate }: NavLinksProps): JSX.Element => (
+const NavLinks = ({ homeActive, onNavigate }: NavLinksProps): JSX.Element => (
   <>
     <NavLink
       to="/"
@@ -46,14 +42,7 @@ const NavLinks = ({ homeActive, challengesActive, onNavigate }: NavLinksProps):
     >
       Home
     </NavLink>
-    <Link
-      to="/#challenges"
-      className={cn(linkCls, challengesActive && activeCls)}
-      aria-current={challengesActive ? "page" : undefined}
-      onClick={onNavigate}
-    >
-      Challenges
-    </Link>
+    <NavLink to="/challenges" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Challenges</NavLink>
     <NavLink to="/about" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>About</NavLink>
     <a
       href={COMMUNITY_URL}
@@ -73,14 +62,76 @@ export const Navbar = (): JSX.Element => {
   const { theme, toggle } = useTheme();
   const [menuOpen, setMenuOpen] = useState(false);
   const location = useLocation();
-  const activeSection = useActiveSection(
-    location.pathname === "/" ? OBSERVED_SECTIONS : []
-  );
-  const challengesActive = location.pathname === "/" && activeSection === "challenges";
-  const homeActive = location.pathname === "/" && !challengesActive;
+  const homeActive = location.pathname === "/";
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
   const closeMenu = (): void => setMenuOpen(false);
 
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") {
+        setMenuOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [menuOpen]);
+
+  // Trap Tab focus within the mobile menu so keyboard users cannot navigate
+  // to obscured content while the drawer is open.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const menu = document.getElementById("mobile-menu");
+    if (!menu) return;
+    const focusable = Array.from(
+      menu.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    if (focusable.length > 0) focusable[0].focus();
+
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key !== "Tab") return;
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [menuOpen]);
+
+  // Hide page content from assistive technologies while the menu is open.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const main = document.getElementById("main-content");
+    const footer = document.querySelector<HTMLElement>("footer");
+    if (!main) return;
+    main.setAttribute("inert", "");
+    main.setAttribute("aria-hidden", "true");
+    footer?.setAttribute("inert", "");
+    footer?.setAttribute("aria-hidden", "true");
+    return () => {
+      main.removeAttribute("inert");
+      main.removeAttribute("aria-hidden");
+      footer?.removeAttribute("inert");
+      footer?.removeAttribute("aria-hidden");
+    };
+  }, [menuOpen]);
+
   return (
     <nav
       aria-label="Main"
@@ -95,7 +146,7 @@ export const Navbar = (): JSX.Element => {
 
         {/* Desktop nav */}
         <div className="hidden md:flex items-center gap-8">
-          <NavLinks homeActive={homeActive} challengesActive={challengesActive} />
+          <NavLinks homeActive={homeActive} />
           <NavThemeToggle theme={theme} onToggle={toggle} className="hover:border-primary/30" />
         </div>
 
@@ -103,6 +154,7 @@ export const Navbar = (): JSX.Element => {
         <div className="flex md:hidden items-center gap-3">
           <NavThemeToggle theme={theme} onToggle={toggle} />
           <button
+            ref={triggerRef}
             onClick={() => setMenuOpen((o) => !o)}
             className="flex h-11 w-11 items-center justify-center rounded-md border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] text-foreground/70 hover:text-foreground transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             aria-label={menuOpen ? "Close menu" : "Open menu"}
@@ -118,9 +170,9 @@ export const Navbar = (): JSX.Element => {
       {menuOpen && (
         <div
           id="mobile-menu"
-          className="md:hidden border-t border-[hsl(var(--surface-border))] bg-background px-6 py-4 flex flex-col gap-4"
+          className="md:hidden border-t border-[hsl(var(--surface-border))] bg-background px-6 py-2 flex flex-col gap-1"
         >
-          <NavLinks homeActive={homeActive} challengesActive={challengesActive} onNavigate={closeMenu} />
+          <NavLinks homeActive={homeActive} onNavigate={closeMenu} />
         </div>
       )}
     </nav>
diff --git a/src/components/RewardsCard.tsx b/src/components/RewardsCard.tsx
index e83b0d50..adde508a 100644
--- a/src/components/RewardsCard.tsx
+++ b/src/components/RewardsCard.tsx
@@ -1,30 +1,51 @@
 import { type JSX } from "react";
 import { ExternalLink, Trophy } from "lucide-react";
 import type { AdventureRewards } from "@/data/adventures/types";
+import { COMMUNITY_URL } from "@/data/constants";
 
 type RewardsCardProps = {
   rewards: AdventureRewards;
   compact?: boolean;
   levelDeadline?: string;
+  deadlinePast?: boolean;
 };
 
-export const RewardsCard = ({ rewards, compact = false, levelDeadline }: RewardsCardProps): JSX.Element => (
+export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlinePast = false }: RewardsCardProps): JSX.Element => (
   <div className="rounded-xl border border-primary/30 bg-[hsl(var(--surface))] p-5">
     <div className="flex items-center gap-2 mb-4">
       <Trophy size={15} className="text-primary shrink-0" aria-hidden="true" />
       <h2 className="font-sans text-base font-semibold text-foreground">Rewards</h2>
     </div>
 
-    {!compact && rewards.deadline && (
-      <p className="text-xs text-[hsl(var(--text-faint))] mb-3">
-        <span className="font-mono uppercase tracking-widest">Deadline:</span>{" "}
-        <span className="font-medium text-foreground">{rewards.deadline}</span>
-      </p>
+    {!compact && (
+      deadlinePast ? (
+        <div className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-4 space-y-2">
+          <p>The deadline has passed, but the adventure is still open. Play it, post your solution in the community.</p>
+          <p>
+            If you enjoyed the adventure and want to share what you learned, write a tutorial in{" "}
+            <a
+              href={`${COMMUNITY_URL}/c/community-voices/38`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="docs-ext-link"
+            >
+              Community Voices
+              <ExternalLink size={10} aria-hidden="true" />
+              <span className="sr-only"> (opens in new tab)</span>
+            </a>
+            .
+          </p>
+        </div>
+      ) : (
+        <p className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-4">
+          {rewards.eligibility}
+        </p>
+      )
     )}
 
-    {!compact && (
-      <p className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-4">
-        {rewards.eligibility}
+    {compact && deadlinePast && (
+      <p className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-3">
+        Deadline passed. Adventure still open.
       </p>
     )}
 
diff --git a/src/components/TechFilterSection.tsx b/src/components/TechFilterSection.tsx
deleted file mode 100644
index f4119533..00000000
--- a/src/components/TechFilterSection.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useState, type JSX } from "react";
-import { ALL_TAGS, getLevelsByTag } from "@/data/adventures";
-import { FilteredLevelCard } from "@/components/FilteredLevelCard";
-
-export const TechFilterSection = (): JSX.Element => {
-  const [activeTech, setActiveTech] = useState<string | null>(null);
-  const relatedLevels = activeTech ? getLevelsByTag(activeTech) : [];
-
-  return (
-    <div>
-      <h2 className="text-lg font-semibold text-foreground mb-4">
-        Find Challenges by Technology
-      </h2>
-      <div role="group" aria-label="Filter challenges by technology" className="mb-6 flex flex-wrap gap-2">
-        {ALL_TAGS.map((tag) => (
-          <button
-            key={tag}
-            type="button"
-            onClick={() => setActiveTech(activeTech === tag ? null : tag)}
-            className={activeTech === tag ? "pill-active" : "pill-inactive"}
-            aria-pressed={activeTech === tag}
-          >
-            {tag}
-          </button>
-        ))}
-      </div>
-      <p aria-live="polite" aria-atomic="true" className="sr-only">
-        {activeTech && relatedLevels.length > 0
-          ? `Showing ${relatedLevels.length} challenge${relatedLevels.length !== 1 ? "s" : ""} for ${activeTech}`
-          : ""}
-      </p>
-      {activeTech && relatedLevels.length > 0 && (
-        <div key={activeTech} className="animate-fade-up grid gap-5 md:grid-cols-2 lg:grid-cols-3">
-          {relatedLevels.map(({ level, adventureId, adventureTitle }) => (
-            <FilteredLevelCard
-              key={`${adventureId}-${level.id}`}
-              level={level}
-              adventureId={adventureId}
-              adventureTitle={adventureTitle}
-              className="animate-fade-up-delay-1"
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
deleted file mode 100644
index 191047e4..00000000
--- a/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useTheme } from "@/hooks/useTheme";
-import { Toaster as Sonner, toast } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster, toast };
diff --git a/src/hooks/useActiveSection.ts b/src/hooks/useActiveSection.ts
deleted file mode 100644
index 0331c818..00000000
--- a/src/hooks/useActiveSection.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * Observes a set of section IDs and returns the ID of whichever section
- * is currently intersecting the viewport, or null if none are.
- *
- * Uses IntersectionObserver (runs off the main thread) so there is no
- * scroll event listener and no per-frame work on the main thread.
- */
-export function useActiveSection(sectionIds: string[]): string | null {
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
-      return;
-    }
-    if (sectionIds.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-            return;
-          }
-        }
-        // If no section is intersecting, clear the active id
-        const anyIntersecting = entries.some((e) => e.isIntersecting);
-        if (!anyIntersecting) {
-          setActiveId(null);
-        }
-      },
-      {
-        // Fire when at least 20% of the section enters the viewport.
-        // High enough to avoid spurious triggers at section edges,
-        // low enough to work on short viewport heights.
-        threshold: 0.2,
-      },
-    );
-
-    const elements = sectionIds
-      .map((id) => document.getElementById(id))
-      .filter((el): el is HTMLElement => el !== null);
-
-    elements.forEach((el) => observer.observe(el));
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [sectionIds.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps -- join(",") is a stable serialization; avoids re-runs when the caller passes a new array reference with identical IDs
-
-  return activeId;
-}
diff --git a/src/index.css b/src/index.css
index e64d4a16..15209128 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,22 +14,6 @@
   font-display: optional;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-@font-face {
-  font-family: 'JetBrains Mono';
-  src: url('/fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: optional;
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: 'JetBrains Mono';
-  src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: optional;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
 @font-face {
   font-family: 'JetBrains Mono';
   src: url('/fonts/jetbrains-mono-latin-ext-600-normal.woff2') format('woff2');
@@ -1064,3 +1048,60 @@ html {
     scroll-behavior: auto !important;
   }
 }
+
+/* ─── Increased contrast ─────────────────────────────────── */
+/* macOS/iOS "Increase Contrast" and equivalent OS settings trigger
+   prefers-contrast: more. Removes opacity from borders and muted elements
+   that would otherwise fall below user expectations at high contrast. */
+@media (prefers-contrast: more) {
+  .btn-ghost {
+    border-color: hsl(var(--foreground));
+  }
+  .btn-ghost-inverse {
+    border-color: hsl(var(--background));
+  }
+  .pill-inactive {
+    border-color: hsl(var(--foreground) / 0.7);
+    color: hsl(var(--foreground));
+  }
+}
+
+/* ─── Forced colors (Windows High Contrast Mode) ─────────── */
+/* System color keywords restore interactive component visibility when the
+   OS overrides all custom colors. focus-visible rules use Highlight so
+   focus rings remain visible regardless of --ring value. */
+@media (forced-colors: active) {
+  .btn-primary,
+  .btn-soft,
+  .btn-inverse {
+    border: 2px solid ButtonText;
+    background-color: ButtonFace;
+    color: ButtonText;
+    forced-color-adjust: none;
+  }
+  .btn-ghost,
+  .btn-ghost-inverse {
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+  }
+  .pill-active {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+  .pill-inactive {
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+  }
+  .skip-nav:focus {
+    outline: 3px solid Highlight;
+    border-color: Highlight;
+  }
+  *:focus-visible {
+    outline: 3px solid Highlight;
+    outline-offset: 2px;
+  }
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 34b5aa50..4be2c8d5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,3 +5,13 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Returns true if the deadline string represents a date in the past.
+ * Handles the format "10 December 2025 at 09:00 CET" by extracting the date portion.
+ */
+export function isDeadlinePast(deadline: string | undefined): boolean {
+  if (!deadline) return false;
+  const date = new Date(deadline.split(" at ")[0].trim());
+  return !isNaN(date.getTime()) && date < new Date();
+}
diff --git a/src/pages/Accessibility.tsx b/src/pages/Accessibility.tsx
index 9c8d7b35..0b89b483 100644
--- a/src/pages/Accessibility.tsx
+++ b/src/pages/Accessibility.tsx
@@ -91,6 +91,34 @@ const Accessibility = (): JSX.Element => {
                 Google Analytics is opt-in only via the consent banner. No tracking runs until the
                 user accepts.
               </li>
+              <li>
+                Page navigation is announced to screen readers via a polite live region on every
+                client-side route change, so users do not have to manually explore to discover
+                they have moved to a new page.
+              </li>
+              <li>
+                The mobile navigation menu traps focus while open. Content behind the menu is
+                hidden from assistive technology until the menu is dismissed, preventing screen
+                reader users from navigating into obscured content by mistake.
+              </li>
+              <li>
+                Interactive filter buttons announce the result count when a filter is applied, and
+                announce when a filter is cleared, so screen reader users receive confirmation
+                of both actions.
+              </li>
+              <li>
+                Scrollable code blocks are keyboard-focusable with a descriptive label, so
+                keyboard users can reach and scroll long code samples.
+              </li>
+              <li>
+                <code>prefers-contrast: more</code> is respected: borders and muted elements
+                increase in contrast when the user enables Increase Contrast in their OS settings.
+              </li>
+              <li>
+                Windows High Contrast Mode is supported via a <code>forced-colors: active</code>{" "}
+                media query that restores interactive component boundaries using system color
+                keywords.
+              </li>
             </ul>
 
             <h2 className={heading2}>Supported Environments</h2>
@@ -218,12 +246,12 @@ const Accessibility = (): JSX.Element => {
               If you are submitting a pull request, every UI change should pass the accessibility
               checklist in our pull request template. The full ruleset lives in{" "}
               <a
-                href="https://github.com/off-on-dev/website/blob/main/CLAUDE.md"
+                href="https://github.com/off-on-dev/website/blob/main/ACCESSIBILITY.md"
                 target="_blank"
                 rel="noopener noreferrer"
                 className={link}
               >
-                CLAUDE.md <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                ACCESSIBILITY.md <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
               </a>{" "}
               and applies to every change.
             </p>
@@ -235,6 +263,22 @@ const Accessibility = (): JSX.Element => {
               Have a question?{" "}
               <Link to="/about" className={link}>Reach out to the team</Link>.
             </p>
+
+            <hr className="my-8 border-t border-[hsl(var(--surface-border))]" />
+            <p className={`${paragraph} text-xs`}>
+              The accessibility audit that informed this statement used guidance from{" "}
+              <a
+                href="https://github.com/mgifford/ACCESSIBILITY.md"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={link}
+              >
+                mgifford/ACCESSIBILITY.md <ExternalLink size={10} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+              </a>
+              , a community resource for accessibility best practices, testing criteria, and
+              issue severity frameworks. Thank you to Mike Gifford and all contributors for
+              making that guidance openly available.
+            </p>
           </div>
         </div>
       </main>
diff --git a/src/pages/AdventureDetail.tsx b/src/pages/AdventureDetail.tsx
index 97dba86d..9c039ab2 100644
--- a/src/pages/AdventureDetail.tsx
+++ b/src/pages/AdventureDetail.tsx
@@ -1,6 +1,6 @@
 import { type JSX } from "react";
-import { useParams, Link } from "react-router";
-import type { MetaFunction } from "react-router";
+import { useParams, Link, useLoaderData } from "react-router";
+import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import { ArrowRight } from "lucide-react";
 import { ADVENTURES, type AdventureLevel } from "@/data/adventures";
 import { NotFoundPage } from "@/components/NotFoundPage";
@@ -9,13 +9,18 @@ import { Footer } from "@/components/Footer";
 import { DifficultyBadge } from "@/components/DifficultyBadge";
 import { CollapsibleSection } from "@/components/CollapsibleSection";
 import { PersonNameLink } from "@/components/PersonNameLink";
-import { TechFilterSection } from "@/components/TechFilterSection";
 import { RewardsCard } from "@/components/RewardsCard";
 import { AdventureLeaderboard } from "@/components/AdventureLeaderboard";
 import { ContributorBadge } from "@/components/ContributorBadge";
 import { TagChips } from "@/components/TagChips";
 import { SITE_URL, BRAND_NAME } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
+import { isDeadlinePast } from "@/lib/utils";
+
+export function loader({ params }: LoaderFunctionArgs): { rewardsBelowFold: boolean } {
+  const adventure = ADVENTURES.find((a) => a.id === params.id);
+  return { rewardsBelowFold: isDeadlinePast(adventure?.rewards?.deadline) };
+}
 
 export const meta: MetaFunction = ({ params }) => {
   const adventure = ADVENTURES.find((a) => a.id === params.id);
@@ -76,6 +81,7 @@ const AdventureLevelLink = ({ level, adventureId }: AdventureLevelLinkProps): JS
 
 const AdventureDetail = (): JSX.Element => {
   const { id } = useParams<{ id: string }>();
+  const { rewardsBelowFold } = useLoaderData<{ rewardsBelowFold: boolean }>();
   const adventure = ADVENTURES.find((adventure) => adventure.id === id);
 
   if (!adventure) {
@@ -121,9 +127,9 @@ const AdventureDetail = (): JSX.Element => {
                 </div>
               </section>
 
-              {adventure.rewards && (
+              {adventure.rewards && !rewardsBelowFold && (
                 <div>
-                  <RewardsCard rewards={adventure.rewards} />
+                  <RewardsCard rewards={adventure.rewards} deadlinePast={rewardsBelowFold} />
                 </div>
               )}
 
@@ -152,6 +158,12 @@ const AdventureDetail = (): JSX.Element => {
                 </CollapsibleSection>
               )}
 
+              {adventure.rewards && rewardsBelowFold && (
+                <div>
+                  <RewardsCard rewards={adventure.rewards} deadlinePast={rewardsBelowFold} />
+                </div>
+              )}
+
             </div>
 
             {/* Sidebar: leaderboard + contributor */}
@@ -175,9 +187,6 @@ const AdventureDetail = (): JSX.Element => {
           </div>
         </div>
 
-        <div className="mx-auto max-w-6xl mt-12">
-          <TechFilterSection />
-        </div>
       </main>
       <Footer />
     </div>
diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
index cc9ffec4..f64f9c82 100644
--- a/src/pages/ChallengeDetail.tsx
+++ b/src/pages/ChallengeDetail.tsx
@@ -1,6 +1,6 @@
 import { type JSX } from "react";
-import { useParams, Link } from "react-router";
-import type { MetaFunction } from "react-router";
+import { useParams, Link, useLoaderData } from "react-router";
+import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import { ArrowLeft, Check, ExternalLink } from "lucide-react";
 import { ADVENTURES } from "@/data/adventures";
 import { TagChips } from "@/components/TagChips";
@@ -19,9 +19,16 @@ import { DiscussionSection } from "@/components/DiscussionSection";
 import { CommunitySidebar } from "@/components/CommunitySidebar";
 import { OtherLevelsCard } from "@/components/OtherLevelsCard";
 import { RewardsCard } from "@/components/RewardsCard";
-import { TechFilterSection } from "@/components/TechFilterSection";
 import { SITE_URL, BRAND_NAME, COMMUNITY_DISPLAY_NAME } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
+import { isDeadlinePast } from "@/lib/utils";
+
+export function loader({ params }: LoaderFunctionArgs): { rewardsBelowFold: boolean } {
+  const adventure = ADVENTURES.find((a) => a.id === params.id);
+  const level = adventure?.levels.find((l) => l.id === params.levelId);
+  const deadline = level?.deadline ?? adventure?.rewards?.deadline;
+  return { rewardsBelowFold: isDeadlinePast(deadline) };
+}
 
 export const meta: MetaFunction = ({ params }) => {
   const adventure = ADVENTURES.find((a) => a.id === params.id);
@@ -58,9 +65,10 @@ export const meta: MetaFunction = ({ params }) => {
 type StructuredLayoutProps = {
   adventure: (typeof ADVENTURES)[number];
   level: (typeof ADVENTURES)[number]["levels"][number];
+  rewardsBelowFold: boolean;
 };
 
-const StructuredLayout = ({ adventure, level }: StructuredLayoutProps): JSX.Element => {
+const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayoutProps): JSX.Element => {
   const { intro, objective, toolbox, backstory, architecture, architectureDiagram, diagramAlt, howToPlay, helpfulLinks, verification } = level;
   return (
     <>
@@ -184,7 +192,7 @@ const StructuredLayout = ({ adventure, level }: StructuredLayoutProps): JSX.Elem
                 {verification ? (
                   <span>
                     Verify your solution:
-                    <pre tabIndex={0} className="mt-2 overflow-x-auto rounded-lg border border-[hsl(var(--surface-border))] bg-background/60 px-4 py-3 font-mono text-sm text-foreground">
+                    <pre tabIndex={0} aria-label="Verification command" className="mt-2 overflow-x-auto rounded-lg border border-[hsl(var(--surface-border))] bg-background/60 px-4 py-3 font-mono text-sm text-foreground">
                       <code>{verification.command}</code>
                     </pre>
                     <span className="mt-2 block text-[hsl(var(--text-faint))]">If it passes, it generates a Certificate of Completion you can paste into the discussion.</span>
@@ -281,8 +289,8 @@ const StructuredLayout = ({ adventure, level }: StructuredLayoutProps): JSX.Elem
           aria-label="Challenge resources"
           className="mt-10 lg:mt-0 space-y-4 lg:sticky lg:top-28 lg:self-start"
         >
-          {adventure.rewards && (
-            <RewardsCard rewards={adventure.rewards} compact levelDeadline={level.deadline} />
+          {adventure.rewards && !rewardsBelowFold && (
+            <RewardsCard rewards={adventure.rewards} compact levelDeadline={level.deadline} deadlinePast={rewardsBelowFold} />
           )}
 
           {/* CTA panel - hidden on mobile where inline CTA is shown */}
@@ -296,19 +304,20 @@ const StructuredLayout = ({ adventure, level }: StructuredLayoutProps): JSX.Elem
             contributor={adventure.contributor}
           />
           <OtherLevelsCard adventure={adventure} currentLevelId={level.id} />
+
+          {adventure.rewards && rewardsBelowFold && (
+            <RewardsCard rewards={adventure.rewards} compact levelDeadline={level.deadline} deadlinePast={rewardsBelowFold} />
+          )}
         </aside>
       </div>
 
-      {/* Tech filter spans full width */}
-      <div className="mt-16">
-        <TechFilterSection />
-      </div>
     </>
   );
 };
 
 const ChallengeDetail = (): JSX.Element => {
   const { id, levelId } = useParams<{ id: string; levelId: string }>();
+  const { rewardsBelowFold } = useLoaderData<{ rewardsBelowFold: boolean }>();
   const adventure = ADVENTURES.find((adventure) => adventure.id === id);
   const level = adventure?.levels.find((level) => level.id === levelId);
 
@@ -340,7 +349,7 @@ const ChallengeDetail = (): JSX.Element => {
           </nav>
 
           {hasStructuredContent ? (
-            <StructuredLayout adventure={adventure} level={level} />
+            <StructuredLayout adventure={adventure} level={level} rewardsBelowFold={rewardsBelowFold} />
           ) : (
             <>
               {/* Legacy layout for levels without structured content */}
@@ -366,7 +375,6 @@ const ChallengeDetail = (): JSX.Element => {
                 <DiscussionSection adventureId={adventure.id} levelId={level.id} discussionUrl={level.discussionUrl} />
               </div>
 
-              <TechFilterSection />
             </>
           )}
         </div>
diff --git a/src/pages/Challenges.tsx b/src/pages/Challenges.tsx
index e08fe227..3ef1b0d6 100644
--- a/src/pages/Challenges.tsx
+++ b/src/pages/Challenges.tsx
@@ -6,7 +6,6 @@ import { Footer } from "@/components/Footer";
 import { PageHero } from "@/components/PageHero";
 import { BottomCTA } from "@/components/BottomCTA";
 import { FilteredLevelCard } from "@/components/FilteredLevelCard";
-import { AdventureCard } from "@/components/AdventureCard";
 import { ADVENTURES, ALL_TAGS, getLevelsByTag, slugToTag, tagToSlug } from "@/data/adventures";
 import { SITE_URL, BRAND_NAME } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
@@ -27,26 +26,44 @@ export const meta: MetaFunction = ({ params }) => {
     });
   }
   return buildPageMeta({
-    title: `Challenges - Hands-on open source challenges | ${BRAND_NAME}`,
-    description: `Browse all hands-on open source challenges by technology. Practice with real tools like OpenTelemetry, Argo CD, OpenTofu, and more.`,
+    title: `Open Source Challenges | ${BRAND_NAME}`,
+    description: `Hands-on challenges built around open source tools. Filter by technology and learn by solving real-world scenarios in your browser.`,
     url: `${SITE_URL}/challenges`,
   });
 };
 
+const ALL_LEVELS = ADVENTURES.flatMap((adventure) =>
+  adventure.levels.map((level) => ({
+    level,
+    adventureId: adventure.id,
+    adventureTitle: adventure.title,
+  }))
+);
+
+const BASE = import.meta.env.BASE_URL;
+
 const Challenges = (): JSX.Element => {
   const { tag: tagSlug } = useParams<{ tag?: string }>();
   const [activeTag, setActiveTag] = useState<string | null>(
     tagSlug ? slugToTag(tagSlug) ?? null : null
   );
-  const filteredLevels = activeTag ? getLevelsByTag(activeTag) : [];
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const filteredLevels = activeTag ? getLevelsByTag(activeTag) : ALL_LEVELS;
+
+  const handleAllClick = (): void => {
+    setHasInteracted(true);
+    setActiveTag(null);
+    window.history.replaceState(null, "", `${BASE}challenges`);
+  };
 
   const handleTagClick = (tag: string): void => {
+    setHasInteracted(true);
     if (activeTag === tag) {
       setActiveTag(null);
-      window.history.replaceState(null, "", "/challenges");
+      window.history.replaceState(null, "", `${BASE}challenges`);
     } else {
       setActiveTag(tag);
-      window.history.replaceState(null, "", `/challenges/${tagToSlug(tag)}`);
+      window.history.replaceState(null, "", `${BASE}challenges/${tagToSlug(tag)}`);
     }
   };
 
@@ -56,13 +73,21 @@ const Challenges = (): JSX.Element => {
       <main id="main-content">
         <PageHero
           eyebrow="Challenges"
-          title="Find Challenges by Technology"
-          description="Browse hands-on open source challenges by the tools and technologies they cover. Everything runs in your browser, no local setup required."
+          title="Open Source Challenges"
+          description="Hands-on challenges built around real open source tools. Filter by technology, work through real-world scenarios, and learn by doing, entirely in your browser."
         />
         <section className="py-24 px-6 md:px-16">
           <div className="mx-auto max-w-6xl">
             {/* Tag filter pills */}
             <div role="group" aria-label="Filter challenges by technology" className="mb-8 flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                onClick={handleAllClick}
+                className={`${activeTag === null ? "pill-active" : "pill-inactive"} px-6`}
+                aria-pressed={activeTag === null}
+              >
+                All
+              </button>
               {ALL_TAGS.map((tag) => (
                 <button
                   key={tag}
@@ -76,6 +101,14 @@ const Challenges = (): JSX.Element => {
               ))}
             </div>
 
+            <span aria-live="polite" aria-atomic="true" className="sr-only">
+              {hasInteracted
+                ? activeTag
+                  ? `Showing ${filteredLevels.length} ${filteredLevels.length === 1 ? "challenge" : "challenges"} tagged with ${activeTag}`
+                  : `Filter cleared, showing all ${ALL_LEVELS.length} challenges`
+                : ""}
+            </span>
+
             {activeTag ? (
               <>
                 <h2 className="animate-fade-up mb-6 text-lg font-semibold text-foreground">
@@ -84,9 +117,6 @@ const Challenges = (): JSX.Element => {
                     &middot; {filteredLevels.length} result{filteredLevels.length !== 1 ? "s" : ""}
                   </span>
                 </h2>
-                <span aria-live="polite" aria-atomic="true" className="sr-only">
-                  {filteredLevels.length} {filteredLevels.length === 1 ? "challenge" : "challenges"} tagged with {activeTag}
-                </span>
                 <div key={activeTag} className="animate-fade-up grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                   {filteredLevels.map(({ level, adventureId, adventureTitle }) => (
                     <FilteredLevelCard
@@ -100,10 +130,20 @@ const Challenges = (): JSX.Element => {
               </>
             ) : (
               <>
-                <h2 className="text-lg font-semibold text-foreground mb-6">All Adventures</h2>
+                <h2 className="mb-6 text-lg font-semibold text-foreground">
+                  All Challenges
+                  <span className="ml-2 font-normal text-sm text-muted-foreground">
+                    &middot; {ALL_LEVELS.length} result{ALL_LEVELS.length !== 1 ? "s" : ""}
+                  </span>
+                </h2>
                 <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
-                  {ADVENTURES.map((adventure) => (
-                    <AdventureCard key={adventure.id} adventure={adventure} />
+                  {ALL_LEVELS.map(({ level, adventureId, adventureTitle }) => (
+                    <FilteredLevelCard
+                      key={`${adventureId}-${level.id}`}
+                      level={level}
+                      adventureId={adventureId}
+                      adventureTitle={adventureTitle}
+                    />
                   ))}
                 </div>
               </>
diff --git a/src/test/adventureDetail.test.tsx b/src/test/adventureDetail.test.tsx
index 51f2c45e..c37301dc 100644
--- a/src/test/adventureDetail.test.tsx
+++ b/src/test/adventureDetail.test.tsx
@@ -1,6 +1,11 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router';
+
+vi.mock('react-router', async () => {
+  const actual = await vi.importActual<typeof import('react-router')>('react-router');
+  return { ...actual, useLoaderData: vi.fn().mockReturnValue({ rewardsBelowFold: false }) };
+});
 import { ConsentProvider } from '@/hooks/useConsent';
 import { ADVENTURES } from '@/data/adventures';
 import AdventureDetail from '@/pages/AdventureDetail';
@@ -87,24 +92,10 @@ describe('AdventureDetail - heading structure', () => {
       </ConsentProvider>
     );
     expect(screen.getByRole('heading', { level: 2, name: 'Challenges' })).toBeTruthy();
-    expect(screen.getByRole('heading', { level: 2, name: 'Find Challenges by Technology' })).toBeTruthy();
   });
 });
 
 describe('ChallengeDetail - heading structure', () => {
-  it('renders "Find challenges by technology" as a visible h2 heading, not an overline label', () => {
-    render(
-      <ConsentProvider>
-        <MemoryRouter initialEntries={[`/adventures/${adventure.id}/levels/${level.id}`]}>
-          <Routes>
-            <Route path="/adventures/:id/levels/:levelId" element={<ChallengeDetail />} />
-          </Routes>
-        </MemoryRouter>
-      </ConsentProvider>
-    );
-    expect(screen.getByRole('heading', { level: 2, name: 'Find Challenges by Technology' })).toBeTruthy();
-  });
-
   it('renders "Key Learnings" as an h2 heading in structured layout', () => {
     render(
       <ConsentProvider>
@@ -119,68 +110,6 @@ describe('ChallengeDetail - heading structure', () => {
   });
 });
 
-describe('AdventureDetail - technology filter', () => {
-  const wrapper = (
-    <ConsentProvider>
-      <MemoryRouter initialEntries={[`/adventures/${adventure.id}`]}>
-        <Routes>
-          <Route path="/adventures/:id" element={<AdventureDetail />} />
-          <Route path="/adventures/:id/levels/:levelId" element={<ChallengeDetail />} />
-        </Routes>
-      </MemoryRouter>
-    </ConsentProvider>
-  );
-
-  it('clicking a technology chip shows related challenge cards', () => {
-    render(wrapper);
-    const tag = adventure.tags[0];
-    const chip = screen.getByRole('button', { name: tag });
-    const initialOccurrences = screen.getAllByText(adventure.levels[0].name).length;
-    fireEvent.click(chip);
-    expect(screen.getByRole('button', { name: tag }).getAttribute('aria-pressed')).toBe('true');
-    expect(screen.getAllByText(adventure.levels[0].name).length).toBeGreaterThan(initialOccurrences);
-  });
-
-  it('clicking the same technology chip again hides the challenge cards', () => {
-    render(wrapper);
-    const tag = adventure.tags[0];
-    const chip = screen.getByRole('button', { name: tag });
-    fireEvent.click(chip);
-    fireEvent.click(chip);
-    expect(chip.getAttribute('aria-pressed')).toBe('false');
-  });
-});
-
-describe('ChallengeDetail - technology filter', () => {
-  const wrapper = (
-    <ConsentProvider>
-      <MemoryRouter initialEntries={[`/adventures/${adventure.id}/levels/${level.id}`]}>
-        <Routes>
-          <Route path="/adventures/:id/levels/:levelId" element={<ChallengeDetail />} />
-        </Routes>
-      </MemoryRouter>
-    </ConsentProvider>
-  );
-
-  it('clicking a technology chip shows related challenge cards', () => {
-    render(wrapper);
-    const tag = adventure.tags[0];
-    const chip = screen.getByRole('button', { name: tag });
-    const initialOccurrences = screen.getAllByText(adventure.levels[0].name).length;
-    fireEvent.click(chip);
-    expect(chip.getAttribute('aria-pressed')).toBe('true');
-    expect(screen.getAllByText(adventure.levels[0].name).length).toBeGreaterThan(initialOccurrences);
-  });
-
-  it('clicking the same technology chip again hides the challenge cards', () => {
-    render(wrapper);
-    const tag = adventure.tags[0];
-    const chip = screen.getByRole('button', { name: tag });
-    fireEvent.click(chip);
-    fireEvent.click(chip);
-    expect(chip.getAttribute('aria-pressed')).toBe('false');
-  });
-});
 
 // ---------------------------------------------------------------------------
 // AdventureLevelLink: topics pills, intro description, and link hrefs
diff --git a/src/test/challengesGrid.test.tsx b/src/test/challengesGrid.test.tsx
index 97703a29..c0121f45 100644
--- a/src/test/challengesGrid.test.tsx
+++ b/src/test/challengesGrid.test.tsx
@@ -54,9 +54,11 @@ describe("ChallengesGrid", () => {
       expect(group).toBeTruthy();
     });
 
-    it("does not render an aria-live region before a tag is selected", () => {
+    it("renders an empty aria-live region before a tag is selected", () => {
       const { container } = renderGrid();
-      expect(container.querySelector("[aria-live]")).toBeNull();
+      const region = container.querySelector("[aria-live]");
+      expect(region).toBeTruthy();
+      expect(region!.textContent).toBe("");
     });
   });
 
@@ -138,12 +140,14 @@ describe("ChallengesGrid", () => {
       expect(btn.getAttribute("aria-pressed")).toBe("false");
     });
 
-    it("removes the aria-live region after deselecting", () => {
+    it("announces filter cleared after deselecting", () => {
       const { container } = renderGrid();
       const btn = screen.getByRole("button", { name: firstTag });
       fireEvent.click(btn);
       fireEvent.click(btn);
-      expect(container.querySelector("[aria-live]")).toBeNull();
+      const region = container.querySelector("[aria-live]");
+      expect(region).toBeTruthy();
+      expect(region!.textContent).toContain("Filter cleared");
     });
   });
 });
diff --git a/src/test/consent.test.tsx b/src/test/consent.test.tsx
index 64adced8..56c2d41c 100644
--- a/src/test/consent.test.tsx
+++ b/src/test/consent.test.tsx
@@ -391,7 +391,7 @@ describe('ConsentBanner - mount guard', () => {
 describe('ConsentBanner - undecided state', () => {
   it('shows the banner with Accept and Decline buttons', () => {
     renderWithProviders(<ConsentBanner />);
-    expect(screen.getByRole('region', { name: 'Cookie consent' })).toBeTruthy();
+    expect(screen.getByRole('region', { name: 'This site uses analytics cookies' })).toBeTruthy();
     expect(screen.getByRole('button', { name: /accept analytics/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: /decline/i })).toBeTruthy();
   });
@@ -403,21 +403,21 @@ describe('ConsentBanner - undecided state', () => {
 
   it('states that no data is sent to Google before consent', () => {
     renderWithProviders(<ConsentBanner />);
-    const region = screen.getByRole('region', { name: 'Cookie consent' });
+    const region = screen.getByRole('region', { name: 'This site uses analytics cookies' });
     expect(region.textContent?.toLowerCase()).toContain('no data is sent to google until you accept');
   });
 
   it('hides the banner and shows the floating cookie button after accepting', () => {
     renderWithProviders(<ConsentBanner />);
     fireEvent.click(screen.getByRole('button', { name: /accept analytics/i }));
-    expect(screen.queryByRole('region', { name: 'Cookie consent' })).toBeNull();
+    expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
     expect(screen.getByRole('button', { name: /change cookie preferences/i })).toBeTruthy();
   });
 
   it('hides the banner and shows the floating cookie button after declining', () => {
     renderWithProviders(<ConsentBanner />);
     fireEvent.click(screen.getByRole('button', { name: /decline/i }));
-    expect(screen.queryByRole('region', { name: 'Cookie consent' })).toBeNull();
+    expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
     expect(screen.getByRole('button', { name: /change cookie preferences/i })).toBeTruthy();
   });
 });
@@ -431,14 +431,14 @@ describe('ConsentBanner - floating button', () => {
     ls.setItem(CONSENT_STORAGE_KEY, JSON.stringify({ value: 'granted', timestamp: Date.now() }));
     renderWithProviders(<ConsentBanner />);
     expect(screen.getByRole('button', { name: /change cookie preferences/i })).toBeTruthy();
-    expect(screen.queryByRole('region', { name: 'Cookie consent' })).toBeNull();
+    expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
   });
 
   it('clicking the floating button re-shows the banner', () => {
     ls.setItem(CONSENT_STORAGE_KEY, JSON.stringify({ value: 'granted', timestamp: Date.now() }));
     renderWithProviders(<ConsentBanner />);
     fireEvent.click(screen.getByRole('button', { name: /change cookie preferences/i }));
-    expect(screen.getByRole('region', { name: 'Cookie consent' })).toBeTruthy();
+    expect(screen.getByRole('region', { name: 'This site uses analytics cookies' })).toBeTruthy();
   });
 });
 
diff --git a/src/test/navbar.test.tsx b/src/test/navbar.test.tsx
index f7aeba1c..7ec9480c 100644
--- a/src/test/navbar.test.tsx
+++ b/src/test/navbar.test.tsx
@@ -167,4 +167,64 @@ describe("Navbar - mobile menu", () => {
     const hamburger = screen.getByRole("button", { name: /Open menu/i });
     expect(hamburger.getAttribute("aria-controls")).toBe("mobile-menu");
   });
+
+  it("pressing Escape closes the mobile menu", () => {
+    renderNavbar();
+    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    expect(document.getElementById("mobile-menu")).toBeTruthy();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(document.getElementById("mobile-menu")).toBeNull();
+  });
+
+  it("pressing Escape returns focus to the hamburger button", () => {
+    renderNavbar();
+    const hamburger = screen.getByRole("button", { name: /Open menu/i });
+    fireEvent.click(hamburger);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: /Open menu/i }));
+  });
+
+  it("Tab on the last menu item wraps focus back to the first menu item", () => {
+    renderNavbar();
+    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    const menu = document.getElementById("mobile-menu")!;
+    const focusable = Array.from(
+      menu.querySelectorAll<HTMLElement>('a[href], button:not([disabled])')
+    );
+    expect(focusable.length).toBeGreaterThan(0);
+    const last = focusable[focusable.length - 1];
+    last.focus();
+    fireEvent.keyDown(document, { key: "Tab", shiftKey: false });
+    expect(document.activeElement).toBe(focusable[0]);
+  });
+
+  it("Shift+Tab on the first menu item wraps focus to the last menu item", () => {
+    renderNavbar();
+    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    const menu = document.getElementById("mobile-menu")!;
+    const focusable = Array.from(
+      menu.querySelectorAll<HTMLElement>('a[href], button:not([disabled])')
+    );
+    expect(focusable.length).toBeGreaterThan(0);
+    focusable[0].focus();
+    fireEvent.keyDown(document, { key: "Tab", shiftKey: true });
+    expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+  });
+
+  it("sets aria-hidden on main content when menu is open", () => {
+    const main = document.createElement("main");
+    main.id = "main-content";
+    document.body.appendChild(main);
+
+    renderNavbar();
+    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    expect(main.getAttribute("aria-hidden")).toBe("true");
+    expect(main.hasAttribute("inert")).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: /Close menu/i }));
+    expect(main.getAttribute("aria-hidden")).toBeNull();
+    expect(main.hasAttribute("inert")).toBe(false);
+
+    document.body.removeChild(main);
+  });
 });
diff --git a/src/test/prerender.test.ts b/src/test/prerender.test.ts
index d356cca7..d1bddd42 100644
--- a/src/test/prerender.test.ts
+++ b/src/test/prerender.test.ts
@@ -107,7 +107,7 @@ const pages: PageSpec[] = [
   },
   {
     file: "challenges/index.html",
-    check: { type: "exact", value: "Challenges - Hands-on open source challenges | OffOn" },
+    check: { type: "exact", value: "Open Source Challenges | OffOn" },
   },
 ];
 
diff --git a/src/test/rewardsCard.test.tsx b/src/test/rewardsCard.test.tsx
new file mode 100644
index 00000000..1ddc8575
--- /dev/null
+++ b/src/test/rewardsCard.test.tsx
@@ -0,0 +1,145 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { RewardsCard } from "@/components/RewardsCard";
+import type { AdventureRewards } from "@/data/adventures/types";
+import { COMMUNITY_URL } from "@/data/constants";
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const REWARDS: AdventureRewards = {
+  deadline: "10 December 2025 at 09:00 CET",
+  eligibility: "Open to all registered community members.",
+  tiers: [
+    { label: "Gold", description: "First place gets a gold badge." },
+    { label: "Silver", description: "Second place gets a silver badge." },
+  ],
+  rankingNote: "Points are awarded per submission.",
+  rankingRulesUrl: "https://example.com/rules",
+};
+
+const REWARDS_MINIMAL: AdventureRewards = {
+  deadline: "1 January 2026 at 09:00 CET",
+  eligibility: "Open to everyone.",
+  tiers: [{ label: "Winner", description: "Top submission wins." }],
+};
+
+// ---------------------------------------------------------------------------
+// Shared: always rendered regardless of props
+// ---------------------------------------------------------------------------
+
+describe("RewardsCard - heading and tiers", () => {
+  it("renders the Rewards heading", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByRole("heading", { name: "Rewards" })).toBeTruthy();
+  });
+
+  it("renders all reward tier labels", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByText("Gold")).toBeTruthy();
+    expect(screen.getByText("Silver")).toBeTruthy();
+  });
+
+  it("renders tier descriptions", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByText("First place gets a gold badge.")).toBeTruthy();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Active (deadlinePast=false, default)
+// ---------------------------------------------------------------------------
+
+describe("RewardsCard - active deadline (deadlinePast=false)", () => {
+  it("shows eligibility text in non-compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByText(REWARDS.eligibility)).toBeTruthy();
+  });
+
+  it("does not show the deadline-past message in non-compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.queryByText(/deadline has passed/i)).toBeNull();
+  });
+
+  it("shows the deadline date at the bottom of non-compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByText(REWARDS.deadline)).toBeTruthy();
+  });
+
+  it("shows rankingNote in non-compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} />);
+    expect(screen.getByText(/Points are awarded per submission/i)).toBeTruthy();
+  });
+
+  it("does not show compact deadline-past message when deadlinePast=false", () => {
+    render(<RewardsCard rewards={REWARDS} compact deadlinePast={false} />);
+    expect(screen.queryByText(/deadline passed/i)).toBeNull();
+  });
+
+  it("shows levelDeadline in compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} compact levelDeadline="15 January 2026 at 09:00 CET" />);
+    expect(screen.getByText("15 January 2026 at 09:00 CET")).toBeTruthy();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Past deadline (deadlinePast=true) — non-compact
+// ---------------------------------------------------------------------------
+
+describe("RewardsCard - past deadline, non-compact", () => {
+  it("shows the deadline-passed message", () => {
+    render(<RewardsCard rewards={REWARDS} deadlinePast />);
+    expect(screen.getByText(/deadline has passed/i)).toBeTruthy();
+  });
+
+  it("does not show the eligibility text", () => {
+    render(<RewardsCard rewards={REWARDS} deadlinePast />);
+    expect(screen.queryByText(REWARDS.eligibility)).toBeNull();
+  });
+
+  it("renders the Community Voices link", () => {
+    render(<RewardsCard rewards={REWARDS} deadlinePast />);
+    const link = screen.getByRole("link", { name: /community voices/i });
+    expect(link.getAttribute("href")).toBe(`${COMMUNITY_URL}/c/community-voices/38`);
+  });
+
+  it("Community Voices link opens in a new tab", () => {
+    render(<RewardsCard rewards={REWARDS} deadlinePast />);
+    const link = screen.getByRole("link", { name: /community voices/i });
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toContain("noopener");
+  });
+
+  it("Community Voices link has sr-only new-tab notice", () => {
+    render(<RewardsCard rewards={REWARDS} deadlinePast />);
+    const link = screen.getByRole("link", { name: /community voices/i });
+    expect(link.textContent).toContain("opens in new tab");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Past deadline (deadlinePast=true) — compact
+// ---------------------------------------------------------------------------
+
+describe("RewardsCard - past deadline, compact", () => {
+  it("shows the compact deadline-passed message", () => {
+    render(<RewardsCard rewards={REWARDS} compact deadlinePast />);
+    expect(screen.getByText(/deadline passed/i)).toBeTruthy();
+  });
+
+  it("does not show the non-compact deadline-past prose", () => {
+    render(<RewardsCard rewards={REWARDS_MINIMAL} compact deadlinePast />);
+    expect(screen.queryByText(/deadline has passed, but the adventure/i)).toBeNull();
+  });
+
+  it("does not show the Community Voices link in compact mode", () => {
+    render(<RewardsCard rewards={REWARDS} compact deadlinePast />);
+    expect(screen.queryByRole("link", { name: /community voices/i })).toBeNull();
+  });
+
+  it("still shows levelDeadline at the bottom for reference when deadline is past", () => {
+    render(<RewardsCard rewards={REWARDS} compact deadlinePast levelDeadline="10 December 2025 at 09:00 CET" />);
+    expect(screen.getByText("10 December 2025 at 09:00 CET")).toBeTruthy();
+  });
+});
diff --git a/src/test/sonner.test.tsx b/src/test/sonner.test.tsx
deleted file mode 100644
index b196c2f7..00000000
--- a/src/test/sonner.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { type JSX } from "react";
-import { describe, it, expect, beforeEach } from "vitest";
-import { render, fireEvent } from "@testing-library/react";
-import { ThemeProvider, useTheme } from "@/hooks/useTheme";
-import { Toaster } from "@/components/ui/sonner";
-
-// ---------------------------------------------------------------------------
-// TEST 1: File-content regression guard
-// Locks in the import so nobody accidentally reverts it to next-themes.
-// ---------------------------------------------------------------------------
-
-describe("Sonner toaster imports", () => {
-  const source = readFileSync(
-    resolve(__dirname, "../components/ui/sonner.tsx"),
-    "utf8"
-  );
-
-  it("imports useTheme from the app's hook, not next-themes", () => {
-    expect(source).toContain('from "@/hooks/useTheme"');
-  });
-
-  it("does not import from next-themes", () => {
-    expect(source).not.toContain("next-themes");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// TEST 2 and 3: Behavior. Toaster is correctly wired to the app's
-// ThemeProvider. We render Toaster alongside a ThemeConsumer in the same
-// tree and assert the shared context returns the expected theme (dark by
-// default, light after toggle). If Toaster were still importing from
-// next-themes it would either crash or create a separate context that
-// diverges from the app's theme state.
-// ---------------------------------------------------------------------------
-
-// Exposes theme state and toggle for assertions
-function ThemeConsumer(): JSX.Element {
-  const { theme, toggle } = useTheme();
-  return (
-    <div>
-      <span data-testid="theme-value">{theme}</span>
-      <button onClick={toggle}>toggle</button>
-    </div>
-  );
-}
-
-describe("Toaster theme wiring", () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-    document.documentElement.className = "";
-  });
-
-  it("Toaster renders without crashing inside the app ThemeProvider, and the shared context reads dark by default", () => {
-    const { getByTestId } = render(
-      <ThemeProvider>
-        <ThemeConsumer />
-        <Toaster />
-      </ThemeProvider>
-    );
-
-    expect(getByTestId("theme-value").textContent).toBe("dark");
-  });
-
-  it("Toaster renders without crashing after theme toggle, and the shared context reflects light", () => {
-    const { getByTestId, getByRole } = render(
-      <ThemeProvider>
-        <ThemeConsumer />
-        <Toaster />
-      </ThemeProvider>
-    );
-
-    fireEvent.click(getByRole("button", { name: "toggle" }));
-    expect(getByTestId("theme-value").textContent).toBe("light");
-  });
-});
diff --git a/src/test/techFilterSection.test.tsx b/src/test/techFilterSection.test.tsx
deleted file mode 100644
index c3068281..00000000
--- a/src/test/techFilterSection.test.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { MemoryRouter } from "react-router";
-import { TechFilterSection } from "@/components/TechFilterSection";
-import { ADVENTURES } from "@/data/adventures";
-
-const renderSection = () =>
-  render(
-    <MemoryRouter>
-      <TechFilterSection />
-    </MemoryRouter>
-  );
-
-const firstTag = Array.from(new Set(ADVENTURES.flatMap((a) => a.tags))).sort()[0];
-
-describe("TechFilterSection", () => {
-  describe("initial state", () => {
-    it("renders the section heading", () => {
-      renderSection();
-      expect(screen.getByRole("heading", { level: 2, name: "Find Challenges by Technology" })).toBeTruthy();
-    });
-
-    it("renders a filter button for every unique tag", () => {
-      renderSection();
-      const allTags = Array.from(new Set(ADVENTURES.flatMap((a) => a.tags))).sort();
-      allTags.forEach((tag) => {
-        expect(screen.getByRole("button", { name: tag })).toBeTruthy();
-      });
-    });
-
-    it("all buttons start with aria-pressed='false'", () => {
-      renderSection();
-      const buttons = screen.getAllByRole("button");
-      buttons.forEach((btn) => {
-        expect(btn.getAttribute("aria-pressed")).toBe("false");
-      });
-    });
-
-    it("does not render any challenge cards before a tag is selected", () => {
-      renderSection();
-      expect(screen.queryByRole("link", { name: /start/i })).toBeNull();
-    });
-
-    it("renders the aria-live region regardless of selection state", () => {
-      const { container } = renderSection();
-      expect(container.querySelector('[aria-live="polite"]')).toBeTruthy();
-    });
-  });
-
-  describe("selecting a tag", () => {
-    it("marks the clicked button as aria-pressed='true'", () => {
-      renderSection();
-      const btn = screen.getByRole("button", { name: firstTag });
-      fireEvent.click(btn);
-      expect(btn.getAttribute("aria-pressed")).toBe("true");
-    });
-
-    it("marks all other buttons as aria-pressed='false' when one is active", () => {
-      renderSection();
-      fireEvent.click(screen.getByRole("button", { name: firstTag }));
-      const allTags = Array.from(new Set(ADVENTURES.flatMap((a) => a.tags))).sort();
-      allTags
-        .filter((tag) => tag !== firstTag)
-        .forEach((tag) => {
-          expect(screen.getByRole("button", { name: tag }).getAttribute("aria-pressed")).toBe("false");
-        });
-    });
-
-    it("shows challenge cards when a tag with matching adventures is selected", () => {
-      renderSection();
-      fireEvent.click(screen.getByRole("button", { name: firstTag }));
-      const links = screen.getAllByRole("link");
-      expect(links.length).toBeGreaterThan(0);
-    });
-
-    it("each challenge card links to the correct adventure level path", () => {
-      renderSection();
-      fireEvent.click(screen.getByRole("button", { name: firstTag }));
-      const links = screen.getAllByRole("link");
-      links.forEach((link) => {
-        expect(link.getAttribute("href")).toMatch(/^\/adventures\/.+\/levels\/.+/);
-      });
-    });
-  });
-
-  describe("deselecting a tag", () => {
-    it("hides challenge cards when the active tag is clicked again", () => {
-      renderSection();
-      const btn = screen.getByRole("button", { name: firstTag });
-      fireEvent.click(btn);
-      fireEvent.click(btn);
-      expect(screen.queryAllByRole("link").length).toBe(0);
-    });
-
-    it("resets aria-pressed to 'false' after deselecting", () => {
-      renderSection();
-      const btn = screen.getByRole("button", { name: firstTag });
-      fireEvent.click(btn);
-      fireEvent.click(btn);
-      expect(btn.getAttribute("aria-pressed")).toBe("false");
-    });
-  });
-});
diff --git a/src/test/useActiveSection.test.ts b/src/test/useActiveSection.test.ts
deleted file mode 100644
index ac21024c..00000000
--- a/src/test/useActiveSection.test.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useActiveSection } from '@/hooks/useActiveSection';
-
-// ---------------------------------------------------------------------------
-// IntersectionObserver mock
-// ---------------------------------------------------------------------------
-
-type IOCallback = IntersectionObserverCallback;
-
-let capturedCallback: IOCallback;
-const observeMock = vi.fn();
-const disconnectMock = vi.fn();
-
-beforeEach(() => {
-  capturedCallback = undefined as unknown as IOCallback;
-  observeMock.mockReset();
-  disconnectMock.mockReset();
-  vi.stubGlobal(
-    'IntersectionObserver',
-    vi.fn(function(cb: IOCallback) {
-      capturedCallback = cb;
-      return { observe: observeMock, disconnect: disconnectMock };
-    }),
-  );
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function makeEntry(id: string, isIntersecting: boolean): IntersectionObserverEntry {
-  const el = document.createElement('div');
-  el.id = id;
-  return { target: el, isIntersecting } as unknown as IntersectionObserverEntry;
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('useActiveSection - initial state', () => {
-  it('returns null initially', () => {
-    const { result } = renderHook(() => useActiveSection(['challenges']));
-    expect(result.current).toBeNull();
-  });
-});
-
-describe('useActiveSection - IntersectionObserver setup', () => {
-  it('creates an observer and observes matching DOM elements', () => {
-    const el = document.createElement('section');
-    el.id = 'challenges';
-    document.body.appendChild(el);
-
-    renderHook(() => useActiveSection(['challenges']));
-
-    expect(IntersectionObserver).toHaveBeenCalledTimes(1);
-    expect(observeMock).toHaveBeenCalledWith(el);
-
-    document.body.removeChild(el);
-  });
-
-  it('does not observe elements that are not in the DOM', () => {
-    renderHook(() => useActiveSection(['missing-section']));
-    expect(observeMock).not.toHaveBeenCalled();
-  });
-
-  it('disconnects the observer on unmount', () => {
-    const { unmount } = renderHook(() => useActiveSection(['challenges']));
-    unmount();
-    expect(disconnectMock).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('useActiveSection - intersection tracking', () => {
-  it('sets activeId when a section starts intersecting', () => {
-    const el = document.createElement('section');
-    el.id = 'challenges';
-    document.body.appendChild(el);
-
-    const { result } = renderHook(() => useActiveSection(['challenges']));
-
-    act(() => {
-      capturedCallback([makeEntry('challenges', true)], {} as IntersectionObserver);
-    });
-
-    expect(result.current).toBe('challenges');
-    document.body.removeChild(el);
-  });
-
-  it('clears activeId when no section is intersecting', () => {
-    const el = document.createElement('section');
-    el.id = 'challenges';
-    document.body.appendChild(el);
-
-    const { result } = renderHook(() => useActiveSection(['challenges']));
-
-    act(() => {
-      capturedCallback([makeEntry('challenges', true)], {} as IntersectionObserver);
-    });
-    expect(result.current).toBe('challenges');
-
-    act(() => {
-      capturedCallback([makeEntry('challenges', false)], {} as IntersectionObserver);
-    });
-    expect(result.current).toBeNull();
-
-    document.body.removeChild(el);
-  });
-
-  it('returns the first intersecting section when multiple entries fire', () => {
-    const el1 = document.createElement('section');
-    el1.id = 'intro';
-    const el2 = document.createElement('section');
-    el2.id = 'challenges';
-    document.body.appendChild(el1);
-    document.body.appendChild(el2);
-
-    const { result } = renderHook(() => useActiveSection(['intro', 'challenges']));
-
-    act(() => {
-      capturedCallback(
-        [makeEntry('intro', false), makeEntry('challenges', true)],
-        {} as IntersectionObserver,
-      );
-    });
-
-    expect(result.current).toBe('challenges');
-
-    document.body.removeChild(el1);
-    document.body.removeChild(el2);
-  });
-});
-
-describe('useActiveSection - empty sectionIds guard', () => {
-  it('returns null without creating an observer when sectionIds is empty', () => {
-    const { result } = renderHook(() => useActiveSection([]));
-    expect(result.current).toBeNull();
-    expect(IntersectionObserver).not.toHaveBeenCalled();
-  });
-
-  it('does not call disconnect on unmount when sectionIds is empty', () => {
-    const { unmount } = renderHook(() => useActiveSection([]));
-    unmount();
-    expect(disconnectMock).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/test/utils.test.ts b/src/test/utils.test.ts
new file mode 100644
index 00000000..e651e230
--- /dev/null
+++ b/src/test/utils.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { isDeadlinePast } from '@/lib/utils';
+
+describe('isDeadlinePast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-01-15'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns false for undefined', () => {
+    expect(isDeadlinePast(undefined)).toBe(false);
+  });
+
+  it('returns false for an empty string', () => {
+    expect(isDeadlinePast('')).toBe(false);
+  });
+
+  it('returns true for a date in the past', () => {
+    expect(isDeadlinePast('10 December 2025 at 09:00 CET')).toBe(true);
+  });
+
+  it('returns false for a date in the future', () => {
+    expect(isDeadlinePast('10 June 2026 at 09:00 CET')).toBe(false);
+  });
+
+  it('handles a date string without time portion', () => {
+    expect(isDeadlinePast('1 January 2025')).toBe(true);
+    expect(isDeadlinePast('1 January 2027')).toBe(false);
+  });
+
+  it('returns false for an unparseable string', () => {
+    expect(isDeadlinePast('not a date')).toBe(false);
+  });
+});
diff --git a/styleguide.md b/styleguide.md
index 9c608a4c..bacdfac3 100644
--- a/styleguide.md
+++ b/styleguide.md
@@ -377,41 +377,6 @@ The default is dark. All light mode color overrides live in `src/index.css` as u
 
 ---
 
-### `useActiveSection`
-
-`src/hooks/useActiveSection.ts`
-
-Observes a list of section element IDs using `IntersectionObserver` and returns the ID of whichever section is currently visible in the viewport, or `null` if none are.
-
-Designed for anchor-based nav items on single-page layouts. Runs off the main thread with zero scroll listeners.
-
-```ts
-const activeSection = useActiveSection(["challenges", "about"]);
-// returns "challenges" | "about" | null
-```
-
-| Param | Type | Description |
-|---|---|---|
-| `sectionIds` | `string[]` | Array of element IDs to observe. Pass a stable module-level constant to prevent unnecessary re-runs. Pass `[]` to skip observer creation entirely (e.g. on pages other than home). |
-
-| Return | Type | Description |
-|---|---|---|
-| (value) | `string \| null` | ID of the intersecting section, or `null` when none are in view |
-
-The observer fires at `threshold: 0.2` (20% visibility). The observer is disconnected on unmount. Passing an empty array is a no-op: no observer is created.
-
-Usage in `Navbar.tsx` (home-page-only guard):
-
-```ts
-const OBSERVED_SECTIONS = ["challenges"]; // stable constant, outside component
-const activeSection = useActiveSection(
-  location.pathname === "/" ? OBSERVED_SECTIONS : []
-);
-const challengesActive = location.pathname === "/" && activeSection === "challenges";
-```
-
----
-
 ### `useConsent`
 
 `src/hooks/useConsent.tsx`
@@ -449,7 +414,7 @@ Returns nothing. Reads consent via `useConsent`, so the call site must be inside
 
 | Event property | Source | Fallback |
 |---|---|---|
-| `click_text` | `tracked.textContent?.trim()`, sliced to 100 chars | `"unknown"` |
+| `click_text` | `tracked.getAttribute("aria-label")` when non-empty, otherwise `tracked.textContent?.trim()`, sliced to 100 chars | `"unknown"` |
 | `click_url` | `<a>`: `href`. `<button>`: `data-url` attribute. | `"no-url"` |
 | `click_element` | `tracked.tagName.toLowerCase()` (`"a"` or `"button"`) | none |
 | `click_page` | `window.location.pathname` | none |
@@ -527,7 +492,7 @@ const { rows, updatedAt } = useAdventureLeaderboard(adventureId, mockLoader);
 | `adventureId` | `string` | Adventure slug (e.g. `"blind-by-design"`). |
 | `loader` | `LeaderboardLoader` (optional) | Async function that returns `{ updatedAt, rows }`. Defaults to a dynamic `import.meta.glob` import. Pass `vi.fn().mockResolvedValue(data)` in tests. |
 
-`LeaderboardRow` shape: `rank`, `username`, `avatarUrl?`, `points`, `challengesSolved?`, `beginnerPoints?`, `intermediatePoints?`, `expertPoints?`, `breakdown?`.
+`LeaderboardRow` shape: `rank`, `username`, `avatarUrl?`, `points`, `challengesSolved?`, `beginnerPoints?`, `intermediatePoints?`, `expertPoints?`, `singlePoints?`, `breakdown?`.
 
 ---
 
@@ -546,15 +511,27 @@ The banner uses `paddingBottom: env(safe-area-inset-bottom)` and the floating bu
 
 Touch target is 44×44 px (`h-11 w-11`) to meet WCAG 2.5.5 (minimum 44×44 px).
 
+The banner uses `role="region"` with `aria-labelledby="consent-banner-title"` (pointing to the visible title paragraph). When the banner first mounts, focus is moved to the Decline button so keyboard users immediately know a decision is available.
+
 No props. Uses `useConsent` context internally.
 
 ---
 
+### `RouteAnnouncer` (internal, `src/Layout.tsx`)
+
+Announces the page title to screen readers on every SPA navigation. Renders a visually hidden `role="status"` live region. The announcement is deferred one `requestAnimationFrame` so React Router's `<Meta />` head update completes before the title is read.
+
+Skips the initial mount so users do not hear an announcement when they first load the page. Only fires on subsequent `pathname` changes via `useLocation`.
+
+No props. Internal to `Layout.tsx`. Do not extract or reuse elsewhere.
+
+---
+
 ### `NavLink`
 
 `src/components/NavLink.tsx`
 
-A thin wrapper around React Router's `NavLink` that normalises the `className` API. React Router v6's `NavLink` passes a function to `className`; this wrapper accepts plain strings for `className`, `activeClassName`, and `pendingClassName` and merges them via `cn`.
+A thin wrapper around React Router's `NavLink` that normalises the `className` API. React Router's `NavLink` passes a function to `className`; this wrapper accepts plain strings for `className`, `activeClassName`, and `pendingClassName` and merges them via `cn`.
 
 ```tsx
 <NavLink to="/about" className="base-class" activeClassName="active-class">
@@ -665,7 +642,7 @@ No props. Used only in `Index.tsx`.
 
 `src/components/CommunityLeaders.tsx`
 
-Sidebar card displaying community leaders fetched daily from Discourse Data Explorer queries. Renders an `<aside aria-label="Community leaders">` with ranked lists per category. Each category uses a lucide-react icon and an `<ol>` of user rows (rank, avatar, username, count). Avatars are lazy-loaded from external Discourse CDN URLs.
+Sidebar card displaying community leaders fetched daily from Discourse Data Explorer queries. Renders a `<div>` card with an `<h2>` "Community Leaders" heading and a ranked list per category. Each category uses a lucide-react icon and an `<ol aria-label="{section.title}">` of user rows (rank, avatar, username, count). Avatars are lazy-loaded from external Discourse CDN URLs.
 
 Data source: `src/data/community-leaders.json` (refreshed daily by `.github/workflows/refresh-community-leaders.yml`).
 
@@ -1135,22 +1112,6 @@ The bundled stack (`react-markdown`, `remark-gfm`, `micromark`, etc.) is code-sp
 
 ---
 
-### `TechFilterSection`
-
-`src/components/TechFilterSection.tsx`
-
-Self-contained technology filter used on `AdventureDetail` and `ChallengeDetail` pages. Renders a row of filter pills (one per unique tag across all adventures) and a grid of matching challenge cards when a tag is selected.
-
-```tsx
-<TechFilterSection />
-```
-
-No props. Owns its own `activeTech` state internally. `ALL_TAGS` is imported from `src/data/adventures` (computed once at module load; shared with `ChallengesGrid`). The results grid only renders when a tag is active and at least one matching level exists. Wraps results in `aria-live="polite"` so screen readers announce updates.
-
-The challenge cards in the results grid are rendered via `FilteredLevelCard` with `className="animate-fade-up-delay-1"` (see `FilteredLevelCard` in the Components section).
-
----
-
 ### `ChallengesGrid`
 
 `src/components/ChallengesGrid.tsx`
@@ -1165,12 +1126,10 @@ No props. Owns its own `activeTopic` state internally.
 
 **Two display modes:**
 
-- **No tag selected (default):** renders one `AdventureCard` per adventure. Each card links to `/adventures/:id` and carries `aria-label={adventure.title}`.
-- **Tag selected:** replaces adventure cards with a grid of `FilteredLevelCard` instances (one per matching level across all adventures). Each card links to `/adventures/:id/levels/:levelId`. Wrapped in `aria-live="polite"` so screen readers announce updates.
-
-The filter chips use `role="group"` with `aria-label="Filter challenges by technology"`. Clicking an active chip deselects it and returns to the adventure card view. The `aria-live` region is only mounted when a tag is active.
+- **All selected (default):** renders one `AdventureCard` per adventure. Each card links to `/adventures/:id`.
+- **Tag selected:** replaces adventure cards with a grid of `FilteredLevelCard` instances (one per matching level). Wrapped in `aria-live="polite"` so screen readers announce updates.
 
-**Important:** the Technology Filter Pattern in the Patterns section documents the shared state logic. `AdventureDetail` and `ChallengeDetail` use `TechFilterSection` for the same filter — do not add a second instance of `ChallengesGrid` on those pages.
+The filter chips use `role="group"` with `aria-label="Filter challenges by technology"`. An "All" pill appears first and is active by default. Clicking an active tag chip deselects it and returns to the adventure card view. No URL changes occur on selection.
 
 ---
 
@@ -1189,21 +1148,21 @@ Use `FilteredLevelCard` (see Components section). Do not inline the card markup.
 />
 ```
 
-Used in `ChallengesGrid` and `TechFilterSection` (and wherever a tag-filtered level result grid is needed). Each card is a `<Link>` to `/adventures/:id/levels/:levelId`.
+Used in `ChallengesGrid` and `Challenges` (and wherever a tag-filtered level result grid is needed). Each card is a `<Link>` to `/adventures/:id/levels/:levelId`.
 
 ### Technology Filter Pattern
 
-Used on the home page (`ChallengesGrid`) and on adventure/challenge detail pages via the `TechFilterSection` component. `AdventureDetail` and `ChallengeDetail` must use `<TechFilterSection />` — do not inline this pattern in those pages again.
+Used in `ChallengesGrid` (home/adventures pages) and `Challenges` (challenges/ page).
 
 ```ts
-const [activeTech, setActiveTech] = useState<string | null>(null);
+const [activeTopic, setActiveTopic] = useState<string | null>(null);
 ```
 
-- Filter chips render with `.pill-active` when selected and `.pill-inactive` otherwise.
-- Each chip sets `aria-pressed={activeTech === tag}`.
-- Clicking an already-active chip deselects it: `setActiveTech(activeTech === tag ? null : tag)`.
-- No URL change and no page navigation occur on selection.
-- The filtered results grid only renders when `activeTech` is non-null and results exist.
+- An "All" pill appears first. It is active (`aria-pressed={activeTopic === null}`) when no tag is selected.
+- Tag chips render with `.pill-active` when selected and `.pill-inactive` otherwise. Each sets `aria-pressed={activeTopic === tag}`.
+- Clicking an already-active chip deselects it and returns to the default view.
+- `ChallengesGrid`: no URL change on selection. Default (All) = adventure card grid. Tag = flat level card grid.
+- `Challenges`: URL updates to `/challenges/:tag` when a tag is selected. Default (All) = flat grid of every challenge level. Tag = filtered flat grid.
 
 ---
 
@@ -1230,7 +1189,7 @@ export const meta: MetaFunction = () =>
 |---|---|---|---|
 | `title` | `string` | required | Page title and `og:title` / `twitter:title` |
 | `description` | `string` | required | Meta description and `og:description` / `twitter:description` |
-| `url` | `string` | required | Canonical URL and `og:url` |
+| `url` | `string` | required | Canonical URL and `og:url`. Normalized to end with `/` to match GitHub Pages' 301 redirects for directory routes. |
 | `ogType` | `string?` | `"website"` | `og:type` value. Use `"article"` for adventure and challenge pages. |
 | `extra` | `MetaDescriptor[]?` | `[]` | Additional tags appended after the standard set (e.g. `{ name: "robots", content: "noindex" }` for `Privacy`). |
 
@@ -1246,8 +1205,8 @@ Helper functions for processing discussion posts in `DiscussionSection` and `Com
 
 | Export | Signature | Description |
 |---|---|---|
-| `isCertificatePost` | `(post: PostWithAge) => boolean` | Returns true if the post contains a `CERTIFICATE START` block (completion proof). |
-| `displaySnippet` | `(post: PostWithAge) => string` | Returns the display text for a post. For certificate posts, strips the certificate block and falls back to "Completed the challenge." if nothing else remains. |
+| `isCertificatePost` | `(post: PostWithAge) => boolean` | Returns true when `post.challengeSolved === true`. The `challengeSolved` flag is set by the refresh script when it identifies a completion post. |
+| `displaySnippet` | `(post: PostWithAge) => string` | Returns the display text for a post. For certificate posts, strips the `CERTIFICATE START … CERTIFICATE END` block from `cooked` and falls back to `"Completed the challenge."` if nothing else remains. |
 
 ---
 
@@ -1359,7 +1318,7 @@ The standard class for all inline prose links across the site. Handles both mode
 **Dark mode:** foreground text with amber (`--primary`) underline. Hover shifts text and underline to full `hsl(var(--primary))` (`#ffc034`).
 **Light mode:** near-black foreground text with `currentColor` underline. Hover shifts text and underline to `--link-hover-light` (`hsl(41 100% 25%)` ≈ `#7f4200`) — dark amber, same hue as primary, ~5.5:1 contrast on light backgrounds. Passes WCAG AA.
 
-Used in: `CommunityGuide`, `DiscussionSection`, `CommunitySection`, `LevelCard`, `PersonNameLink`, `ChallengeBuildersSection`, `ChallengeDetail`, `MarkdownContent`.
+Used in: `CommunityGuide`, `DiscussionSection`, `CommunitySection`, `LevelCard`, `PersonNameLink`, `ChallengeBuildersSection`, `ChallengeDetail`, `MarkdownContent`, `CommunitySidebar`, `RewardsCard`, `Accessibility`, and `Privacy`.
 
 Do not use `hover:text-primary` or `hover:underline` on inline content links — use `docs-ext-link` instead.
 
@@ -1424,6 +1383,29 @@ Never place a `bg-primary` section without verifying that focusable children inh
 
 ---
 
+### `@media (prefers-contrast: more)`
+
+Located at the end of `src/index.css`. Fires when the user enables "Increase Contrast" on macOS/iOS or equivalent OS settings.
+
+Overrides:
+- `.btn-ghost` border: full-opacity foreground color (removes `border-foreground/35` opacity)
+- `.btn-ghost-inverse` border: full-opacity background color
+- `.pill-inactive` border and text: full-opacity foreground
+
+Use this block for any element whose visible boundary or text relies on opacity-based color tokens. Do not use it for already-opaque elements.
+
+---
+
+### `@media (forced-colors: active)`
+
+Located at the end of `src/index.css`. Fires when the user enables Windows High Contrast Mode or any forced-color OS mode.
+
+Applies system color keywords (`ButtonFace`, `ButtonText`, `Highlight`, `HighlightText`) to buttons and pills. Uses `forced-color-adjust: none` to prevent the browser from adding conflicting overrides on top of our manual system-color assignments. Focus rings use `Highlight` so they remain visible regardless of the `--ring` variable value.
+
+When adding a new interactive component (button, pill, toggle, chip), add a corresponding rule to the `forced-colors` block so its boundaries and labels remain visible in High Contrast Mode.
+
+---
+
 ## Performance
 
 ### Lighthouse scores (production build)
@@ -1432,7 +1414,7 @@ Measured against the production build locally (`npm run build && npm run preview
 
 | Category | Score |
 |---|---|
-| Performance | 95 |
+| Performance | 93 (target: 95) |
 | Accessibility | 100 |
 | Best Practices | 100 |
 | SEO | 100 |