diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md
index d46f42f7f..5b9422d69 100644
--- a/ACCESSIBILITY.md
+++ b/ACCESSIBILITY.md
@@ -104,7 +104,7 @@ Apply this to every component you write or modify.
 - 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 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.
diff --git a/CLAUDE.md b/CLAUDE.md
index 16214c98d..a0c51d7f5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -27,7 +27,7 @@ Community activity happens on a separate Discourse instance. Its display name is
 ## Stack
 
 - **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.
+- **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` 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/`)
@@ -196,9 +196,9 @@ When diagnosing a bug, especially in the production build, follow these rules wi
 - **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:** 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.
-- **Author-controlled prose fields contain pre-rendered HTML.** Every YAML/TS field that holds prose written by a challenge author (`level.audience`, `tool.description`, `step.title`, `step.content`, `contributor.about`, `rewards.eligibility`, `tier.description`, `rewards.rankingNote`, `level.learnings`, `level.objective`, `level.intro`, `level.backstory`, `level.scenario`, `level.architecture`, `adventure.story`, `adventure.backstory`) is converted from Markdown to sanitised HTML at build time by `scripts/generate-adventures.mjs`. Always render them with `dangerouslySetInnerHTML={{ __html: value }}` and the `md-inline` (inline prose) or `md-content` (block content) CSS class — never as `{value}` directly. Identifier fields (`id`, URLs, enum values like `difficulty`, emoji) are not author prose and are rendered directly.
+- **Author-controlled prose fields contain pre-rendered HTML.** Every YAML/TS field that holds prose written by a challenge author (`level.audience`, `tool.description`, `step.title`, `step.content`, `contributor.about`, `rewards.eligibility`, `tier.description`, `rewards.rankingNote`, `level.learnings`, `level.objective`, `level.intro`, `level.backstory`, `level.scenario`, `level.architecture`, `adventure.story`, `adventure.backstory`) is converted from Markdown to sanitised HTML at build time by `scripts/generate-adventures.mjs`. Always render them with `dangerouslySetInnerHTML={{ __html: value }}` and the `md-inline` (inline prose) or `md-content` (block content) CSS class. Never render as `{value}` directly. Identifier fields (`id`, URLs, enum values like `difficulty`, emoji) are not author prose and are rendered directly.
   - **When the container is an interactive element** (e.g. a `<Link>` card or a `<button>`), call `stripLinks(html)` from `src/lib/markdown.ts` before passing to `dangerouslySetInnerHTML` to prevent nested `<a>` inside `<a>` or `<button>`, which is invalid HTML.
-  - **Exception — `adventure.story` in `AdventureCard` and `summaries.ts`:** The summary card and `ADVENTURE_SUMMARIES` store `story` as plain text (no HTML) so the home page renders it as a plain `<span>` with no markdown overhead. The generator emits a build-time warning if any story value contains markdown syntax (`*`, `_`, `` ` ``). Keep story field values as plain prose.
+  - **Exception: `adventure.story` in `AdventureCard` and `summaries.ts`:** The summary card and `ADVENTURE_SUMMARIES` store `story` as plain text (no HTML) so the home page renders it as a plain `<span>` with no markdown overhead. The generator emits a build-time warning if any story value contains markdown syntax (`*`, `_`, `` ` ``). Keep story field values as plain prose.
   - **`react-markdown` is a dev-only dependency** (used only by `scripts/generate-adventures.mjs`). Do not import it in any component or page file.
 
 ### Component CSS patterns
@@ -230,13 +230,13 @@ When diagnosing a bug, especially in the production build, follow these rules wi
 ## Styling
 
 - 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`.
+- 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.
 - 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.
 - 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`.
+- 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
 
@@ -244,7 +244,7 @@ When diagnosing a bug, especially in the production build, follow these rules wi
 - Yellow `#ffc034` is accent-only in light mode. Never use it as a text color.
 - Dark mode uses `:root` and `.dark`. Never modify these when fixing light mode issues.
 - Tailwind `group-hover:*` and `group-focus:*` utilities are not matched by `.light .classname` selectors. Always add explicit `.light .group:hover` rules in the unlayered light mode overrides section of `src/index.css`.
-- Avatar palette colors must not be used directly as text colors in light mode — they fail contrast on near-white surfaces. Use `hsl(var(--foreground))` as the text color for avatar initials in all modes.
+- Avatar palette colors must not be used directly as text colors in light mode. They fail contrast on near-white surfaces. Use `hsl(var(--foreground))` as the text color for avatar initials in all modes.
 
 ---
 
@@ -382,6 +382,20 @@ Whether or not the site is prerendered today, these patterns cause bugs. They pr
 - 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.
 
+### useSearchParams() and prerender hydration
+
+`useSearchParams()` is safe to call during render, but its value differs between prerender (empty, no URL) and client hydration (real URL params from the browser). Deriving initial `useState` from it causes a mismatch: the prerendered HTML has one value, the hydrating client has another, React throws. Always default to the server-safe value (`false`, `null`, or `[]`) and sync to the real param value in `useEffect`.
+
+```tsx
+// WRONG: lazy initializer reads params at prerender time (always empty) and at
+// hydration time (real URL), causing a mismatch.
+const [hasFiltered, setHasFiltered] = useState(() => searchParams.has("topics"));
+
+// CORRECT: start with the server-safe default; sync after mount.
+const [hasFiltered, setHasFiltered] = useState(false);
+useEffect(() => { if (searchParams.has("topics")) setHasFiltered(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+```
+
 ---
 
 ## SEO
@@ -461,6 +475,7 @@ Read [`PERFORMANCE.md`](PERFORMANCE.md) before adding any new dependency, font,
 - Use plain language. Avoid jargon unless it is standard in open source contexts.
 - Avoid passive voice where an active one works.
 - Keep sentences short and scannable.
+- Never enumerate specific difficulty levels (e.g. "Beginner, Intermediate, or Expert") in UI copy. Adventures can have one, two, or three levels at any combination of difficulties. Use broad language instead: "the difficulty that fits where you are", "any difficulty level", or similar.
 
 ### Capitalisation
 
@@ -468,7 +483,7 @@ All UI labels use **title case (Chicago style)**. Body copy uses **sentence case
 
 **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, and coordinating conjunctions (and, but, or, nor) — unless they open or close the label.
+**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.
 
@@ -523,7 +538,7 @@ All UI labels use **title case (Chicago style)**. Body copy uses **sentence case
 - 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` with a `<lastmod>` date.
 - Dynamic routes with statically known IDs must also be added to `public/sitemap.xml` with a `<lastmod>` date. Adventure and challenge-tag URLs are generated automatically by `scripts/generate-adventures.mjs` and include `<lastmod>` set to the build date; do not add them by hand.
 - `robots.txt` at `public/robots.txt` must include: `Sitemap: https://offon.dev/sitemap.xml`
-- **Generator region markers:** `scripts/generate-adventures.mjs` uses two exact sitemap URL strings as anchors when patching adventure and tag entries into `public/sitemap.xml` (see `replaceRegion` calls near line 910 and 952). If you change either anchor URL — including adding, removing, or reordering attributes like `<lastmod>` — you must update the corresponding marker string in the generator. Failing to do so causes `npm run build` to abort with "Region markers not found".
+- **Generator region markers:** `scripts/generate-adventures.mjs` uses two exact sitemap URL strings as anchors when patching adventure and tag entries into `public/sitemap.xml` (see `replaceRegion` calls near line 910 and 952). If you change either anchor URL (including adding, removing, or reordering attributes like `<lastmod>`), you must update the corresponding marker string in the generator. Failing to do so causes `npm run build` to abort with "Region markers not found".
 
 ### SSG prerendered routes
 
@@ -542,8 +557,8 @@ When adding a new route to `src/routes.ts`, follow these rules by route type:
 Adventures and levels are synced from the challenges repo via the `sync-adventure` GitHub Actions workflow (Actions tab → Sync Adventure from Challenges Repo → Run workflow).
 
 Inputs:
-- `adventure_url` — URL of the adventure folder in the challenges repo (e.g. `https://github.com/off-on-dev/open-source-challenges/tree/main/adventures/05-lex-imperfecta`)
-- `levels` — comma-separated level IDs to make live now (e.g. `beginner` or `beginner,intermediate`). Levels present in the challenges repo but not listed are added as "coming soon" placeholders. Leave blank to sync all levels.
+- `adventure_url`: URL of the adventure folder in the challenges repo (e.g. `https://github.com/off-on-dev/open-source-challenges/tree/main/adventures/05-lex-imperfecta`)
+- `levels`: comma-separated level IDs to make live now (e.g. `beginner` or `beginner,intermediate`). Levels present in the challenges repo but not listed are added as "coming soon" placeholders. Leave blank to sync all levels.
 
 The workflow opens a PR with a checklist. Before merging, complete all items in that checklist, including:
 
diff --git a/PERFORMANCE.md b/PERFORMANCE.md
index d614fe477..3215633e1 100644
--- a/PERFORMANCE.md
+++ b/PERFORMANCE.md
@@ -45,14 +45,14 @@ Target these thresholds at the 75th percentile of real users:
 - All fonts are self-hosted under `public/fonts/`. Never add an external font CDN link.
 - `font-display: optional` is set on all fonts. This means the browser has a very short (~100 ms) window to load a font before permanently falling back to the system font for that page visit. Preloading is therefore required for fonts to render correctly on throttled connections.
 - **Global preloads** go in the `links()` export in `src/root.tsx`. Use this for fonts that appear above the fold on every page. Currently preloaded globally: Inter 400, 500, 600, 700 (body text and semibold/bold labels); Syne 700 (h1–h6 via the `@layer base` rule).
-- **Route-level preloads** go in the `links()` export of a specific route module. Use this for fonts that are only used on certain pages to avoid "preloaded but not used" warnings and wasted bandwidth on other pages. JetBrains Mono (400 and 600) is preloaded at route level on `Index.tsx`, `Challenges.tsx`, `AdventureDetail.tsx`, and `ChallengeDetail.tsx` — these are the routes that render `font-mono` elements. Do not add JetBrains Mono to the global preloads.
+- **Route-level preloads** go in the `links()` export of a specific route module. Use this for fonts that are only used on certain pages to avoid "preloaded but not used" warnings and wasted bandwidth on other pages. JetBrains Mono (400 and 600) is preloaded at route level on `Index.tsx`, `Challenges.tsx`, `AdventureDetail.tsx`, and `ChallengeDetail.tsx`. These are the routes that render `font-mono` elements. Do not add JetBrains Mono to the global preloads.
   ```ts
   export const links: LinksFunction = () => [
     { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/jetbrains-mono-latin-400-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
     { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/jetbrains-mono-latin-600-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
   ];
   ```
-- The `src/index.css` `@font-face` declarations cover only the `latin` and `latin-ext` subsets. Non-English subsets (cyrillic, greek, vietnamese) were removed — the site is English-only and `unicode-range` already prevented those files from being fetched, but the declarations added unnecessary CSS weight.
+- The `src/index.css` `@font-face` declarations cover only the `latin` and `latin-ext` subsets. Non-English subsets (cyrillic, greek, vietnamese) were removed. The site is English-only and `unicode-range` already prevented those files from being fetched, but the declarations added unnecessary CSS weight.
 - When adding a new route that uses JetBrains Mono (e.g. a page with code blocks or difficulty badges), add the JetBrains Mono preloads to that route's `links()` export.
 
 ---
@@ -80,7 +80,7 @@ Target these thresholds at the 75th percentile of real users:
 - Use `async` for independent third-party scripts (analytics loaders, chat widgets) that have no execution-order dependencies.
 - Never place a bare `<script src="...">` in `<head>` without `defer` or `async`.
 - React Router v7 generates `type="module"` scripts automatically. Do not override this.
-- See the Analytics and Consent section in `CLAUDE.md` for the pattern used by the `gtag.js` injector — it is appended to `<body>` after consent, never blocking.
+- See the Analytics and Consent section in `CLAUDE.md` for the pattern used by the `gtag.js` injector. It is appended to `<body>` after consent, never blocking.
 
 ---
 
diff --git a/README.md b/README.md
index dd596543b..e2a74fb25 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@ Adventures are authored as YAML at `src/data/adventures/<id>/adventure.yaml` and
 | Path | Page | Purpose |
 |---|---|---|
 | `/` | `Index.tsx` | Home page |
-| `/adventures` | `Adventures.tsx` | All adventures listing |
+| `/adventures` | `Adventures.tsx` | Adventure landing hub (links to /challenges) |
 | `/adventures/:id` | `AdventureDetail.tsx` | Adventure landing |
 | `/adventures/:id/levels/:levelId` | `ChallengeDetail.tsx` | Individual challenge |
 | `/contribute` | `Contribute.tsx` | How to contribute (technical and non-technical ways) |
diff --git a/e2e/a11y.spec.ts b/e2e/a11y.spec.ts
index 5cdacb9f2..6fc10f20c 100644
--- a/e2e/a11y.spec.ts
+++ b/e2e/a11y.spec.ts
@@ -5,10 +5,11 @@ import { test, expect, type Page } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 
 // Representative routes covering each major layout type:
-// home, adventure listing, adventure landing, level detail, challenge tag.
+// home, challenges listing, adventure landing page, adventure detail, level detail, challenge tag.
 const PAGES = [
   "/",
   "/adventures",
+  "/challenges",
   "/adventures/blind-by-design",
   "/adventures/blind-by-design/levels/beginner",
   "/challenges/opentelemetry",
@@ -22,7 +23,7 @@ const PAGES = [
 // components that rely solely on background-color to communicate state.
 // ---------------------------------------------------------------------------
 
-test.describe("Windows High Contrast Mode — forced colors", () => {
+test.describe("Windows High Contrast Mode: forced colors", () => {
   for (const path of PAGES) {
     test(path, async ({ page }) => {
       await page.emulateMedia({ reducedMotion: "reduce", forcedColors: "active" });
@@ -72,7 +73,7 @@ test.describe("touch target minimum size (WCAG 2.5.8)", () => {
             if (el.closest("p, td, th, dd, blockquote, figcaption")) return false;
 
             // Exempt links whose immediate parent has non-whitespace text node
-            // siblings — the link is inline within a sentence and its size is
+            // siblings. The link is inline within a sentence and its size is
             // constrained by the surrounding line-height. This covers both the
             // <p>text <a>...</a> text</p> pattern and the
             // <span class="md-inline">text <a>...</a></span> pattern used when
@@ -97,7 +98,7 @@ test.describe("touch target minimum size (WCAG 2.5.8)", () => {
           })
           .map((el) => {
             const { width, height } = el.getBoundingClientRect();
-            return `${Math.round(width)}×${Math.round(height)}px — ${el.outerHTML.slice(0, 100)}`;
+            return `${Math.round(width)}×${Math.round(height)}px: ${el.outerHTML.slice(0, 100)}`;
           });
       });
 
@@ -167,7 +168,7 @@ async function collectFocusViolations(page: Page): Promise<string[]> {
   return violations;
 }
 
-test.describe("focus ring visibility — dark mode", () => {
+test.describe("focus ring visibility: dark mode", () => {
   for (const path of PAGES) {
     test(path, async ({ page }) => {
       await page.emulateMedia({ reducedMotion: "reduce" });
@@ -179,7 +180,7 @@ test.describe("focus ring visibility — dark mode", () => {
   }
 });
 
-test.describe("focus ring visibility — light mode", () => {
+test.describe("focus ring visibility: light mode", () => {
   for (const path of PAGES) {
     test(path, async ({ page }) => {
       await page.addInitScript(() => localStorage.setItem("theme", "light"));
@@ -195,7 +196,7 @@ test.describe("focus ring visibility — light mode", () => {
 // ---------------------------------------------------------------------------
 // Keyboard focus trap detection
 // Tabs through the page and fails if the same element receives keyboard focus
-// on two consecutive keypresses — the signature of a focus trap where Tab
+// on two consecutive keypresses, the signature of a focus trap where Tab
 // cannot move focus forward. Normal focus cycling (returning to the first
 // element after the last) is not a trap and is detected by the key change.
 // ---------------------------------------------------------------------------
@@ -238,14 +239,14 @@ test.describe("keyboard focus trap detection", () => {
 });
 
 // ---------------------------------------------------------------------------
-// 200% zoom — no horizontal overflow
+// 200% zoom, no horizontal overflow
 // A 384px viewport approximates the layout effect of 200% browser zoom on a
 // 768px screen (the tablet breakpoint). Horizontal scrollbar presence at
 // this width means content overflows its container and will clip or require
 // sideways scrolling at high zoom levels.
 // ---------------------------------------------------------------------------
 
-test.describe("200% zoom — no horizontal overflow", () => {
+test.describe("200% zoom: no horizontal overflow", () => {
   for (const path of PAGES) {
     test(path, async ({ page }) => {
       await page.setViewportSize({ width: 384, height: 768 });
diff --git a/e2e/hydration.spec.ts b/e2e/hydration.spec.ts
new file mode 100644
index 000000000..851be9e56
--- /dev/null
+++ b/e2e/hydration.spec.ts
@@ -0,0 +1,113 @@
+// Hydration regression tests.
+// Verifies that prerendered pages hydrate without React warnings.
+// Requires a production build. Run `npm run build` before `npm run test:e2e`.
+
+import { test, expect } from "@playwright/test";
+
+// Representative subset of the prerender list covering the main layout types.
+// Does not duplicate the full route audit in smoke.spec.ts; focuses on routes
+// that exercise state initialisation patterns that can mismatch on hydration.
+const ROUTES = [
+  "/",
+  "/adventures",
+  "/challenges",
+  "/about",
+  "/handbook",
+  "/privacy",
+  "/accessibility",
+  "/contribute",
+  "/sponsors",
+  "/404",
+  "/adventures/blind-by-design",
+  "/adventures/blind-by-design/levels/beginner",
+  "/challenges/kyverno",
+];
+
+// React production runtime emits "Minified React error #N" to console.error
+// for hydration mismatches. Patterns cover both prod error codes and the
+// dev-mode readable text (future dev-build opt-in).
+const HYDRATION_PATTERNS = [
+  /Minified React error #418/,
+  /Minified React error #423/,
+  /Minified React error #425/,
+  /Hydration failed/i,
+  /There was an error while hydrating/i,
+  /Expected server HTML/i,
+];
+
+function isHydrationWarning(text: string): boolean {
+  return HYDRATION_PATTERNS.some((p) => p.test(text));
+}
+
+test.describe("hydration: prerendered routes", () => {
+  for (const route of ROUTES) {
+    test(`${route} hydrates without React warnings`, async ({ page }) => {
+      const hydrationErrors: string[] = [];
+
+      page.on("console", (msg) => {
+        if (msg.type() === "error" && isHydrationWarning(msg.text())) {
+          hydrationErrors.push(msg.text());
+        }
+      });
+
+      await page.goto(route);
+      await page.waitForLoadState("networkidle");
+
+      expect(
+        hydrationErrors,
+        `React hydration warnings on ${route}:\n${hydrationErrors.join("\n")}`,
+      ).toHaveLength(0);
+    });
+  }
+});
+
+// Exercise /challenges/?topics=kyverno: the prerendered HTML has hasFiltered=false
+// (no params at build time). The client reads the param in useEffect, not in the
+// useState initializer, so the first render matches and React should not warn.
+test("hydration: /challenges/?topics=kyverno hydrates with search params", async ({ page }) => {
+  const hydrationErrors: string[] = [];
+
+  page.on("console", (msg) => {
+    if (msg.type() === "error" && isHydrationWarning(msg.text())) {
+      hydrationErrors.push(msg.text());
+    }
+  });
+
+  await page.goto("/challenges/?topics=kyverno");
+  await page.waitForLoadState("networkidle");
+
+  expect(
+    hydrationErrors,
+    `React hydration warnings on /challenges/?topics=kyverno:\n${hydrationErrors.join("\n")}`,
+  ).toHaveLength(0);
+});
+
+// Exercise the light-theme path: the inline themeScript in root.tsx applies the
+// "light" class to <html> before React mounts. The prerendered HTML has
+// className="dark". React sees a mismatch but suppresses it via
+// suppressHydrationWarning on <html>. This test confirms suppression is
+// working and no other component leaks an unsuppressed mismatch.
+test("hydration: /challenges hydrates with stored light theme in localStorage", async ({
+  page,
+  context,
+}) => {
+  await context.addInitScript(() => {
+    localStorage.setItem("theme", "light");
+  });
+
+  const hydrationErrors: string[] = [];
+
+  page.on("console", (msg) => {
+    if (msg.type() === "error" && isHydrationWarning(msg.text())) {
+      hydrationErrors.push(msg.text());
+    }
+  });
+
+  await page.goto("/challenges");
+  await page.waitForLoadState("networkidle");
+
+  expect(
+    hydrationErrors,
+    `React hydration warnings with light theme:\n${hydrationErrors.join("\n")}`,
+  ).toHaveLength(0);
+});
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index b84c239a4..8ea1d4150 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -14,7 +14,7 @@ const ROUTES: RouteSpec[] = [
   { path: "/privacy", title: /Privacy Policy/ },
   { path: "/accessibility", title: /Accessibility Statement/ },
   { path: "/404", title: /Page Not Found/ },
-  { path: "/adventures", title: /Adventures - Hands-on open source challenges/ },
+  { path: "/adventures", title: /Adventures - Open Source Learning Paths/ },
   // GENERATED:adventures
   { path: "/adventures/lex-imperfecta", title: /Lex Imperfecta/ },
   { path: "/adventures/lex-imperfecta/levels/beginner", title: /The Twelve Tables/ },
@@ -63,8 +63,12 @@ const ROUTES: RouteSpec[] = [
 test.describe("every prerendered route", () => {
   for (const { path, title } of ROUTES) {
     test(path, async ({ page }) => {
-      const jsErrors: string[] = [];
-      page.on("pageerror", (e) => jsErrors.push(e.message));
+      const pageErrors: string[] = [];
+      const consoleErrors: string[] = [];
+      page.on("pageerror", (e) => pageErrors.push(e.message));
+      page.on("console", (msg) => {
+        if (msg.type() === "error") consoleErrors.push(msg.text());
+      });
 
       // Reduced motion must be set before navigation so the global
       // prefers-reduced-motion CSS rule kills transitions from first paint.
@@ -73,13 +77,15 @@ test.describe("every prerendered route", () => {
       await page.emulateMedia({ reducedMotion: "reduce" });
       await page.goto(path);
 
-      expect(jsErrors, `unexpected JS errors on ${path}`).toHaveLength(0);
+      // Wait for hydration and post-mount renders (consent banner, theme
+      // sync) to settle before asserting on error state.
+      await page.waitForLoadState("networkidle");
+
+      expect(pageErrors, `unexpected JS exceptions on ${path}:\n${pageErrors.join("\n")}`).toHaveLength(0);
+      expect(consoleErrors, `unexpected console.error on ${path}:\n${consoleErrors.join("\n")}`).toHaveLength(0);
       await expect(page.locator("main#main-content")).toBeAttached();
       await expect(page).toHaveTitle(title);
 
-      // Wait for hydration and post-mount renders (consent banner, theme
-      // sync) to settle so axe sees stable computed styles.
-      await page.waitForLoadState("networkidle");
       const a11y = await new AxeBuilder({ page })
         .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"])
         .analyze();
@@ -91,6 +97,13 @@ test.describe("every prerendered route", () => {
 test.describe("every prerendered route (light mode)", () => {
   for (const { path } of ROUTES) {
     test(path, async ({ page }) => {
+      const pageErrors: string[] = [];
+      const consoleErrors: string[] = [];
+      page.on("pageerror", (e) => pageErrors.push(e.message));
+      page.on("console", (msg) => {
+        if (msg.type() === "error") consoleErrors.push(msg.text());
+      });
+
       await page.addInitScript(() => localStorage.setItem("theme", "light"));
       // Set reduced motion before goto; see comment in dark-mode block above.
       await page.emulateMedia({ reducedMotion: "reduce" });
@@ -101,6 +114,10 @@ test.describe("every prerendered route (light mode)", () => {
       // samples elements mid React-render with stale dark-mode computed
       // colors from the initial dark-class server render.
       await page.waitForLoadState("networkidle");
+
+      expect(pageErrors, `unexpected JS exceptions on ${path} (light mode):\n${pageErrors.join("\n")}`).toHaveLength(0);
+      expect(consoleErrors, `unexpected console.error on ${path} (light mode):\n${consoleErrors.join("\n")}`).toHaveLength(0);
+
       const a11y = await new AxeBuilder({ page })
         .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"])
         .analyze();
@@ -111,7 +128,7 @@ test.describe("every prerendered route (light mode)", () => {
 
 // axe-core does not check WCAG 1.4.11 border contrast on styled <a> link elements.
 // This block fills that gap for the specific interactive chip/pill components.
-test.describe("WCAG 1.4.11 border contrast — light mode (axe gap)", () => {
+test.describe("WCAG 1.4.11 border contrast: light mode (axe gap)", () => {
   // All contrast math runs inside page.evaluate so helpers are inline there.
   async function getBorderContrast(page: import("@playwright/test").Page, selector: string): Promise<number | null> {
     return page.evaluate((sel) => {
diff --git a/e2e/wsg.spec.ts b/e2e/wsg.spec.ts
index d6b6faf06..43990761c 100644
--- a/e2e/wsg.spec.ts
+++ b/e2e/wsg.spec.ts
@@ -7,7 +7,7 @@ const PAGES = [
   "/",
   "/adventures",
   "/challenges",
-  // Representative detail pages — catch weight/media regressions on content-heavy routes.
+  // Representative detail pages. Catch weight/media regressions on content-heavy routes.
   "/adventures/blind-by-design/levels/beginner",
   "/challenges/opentelemetry",
 ];
@@ -20,7 +20,7 @@ const PAGE_WEIGHT_BUDGET_KB = 750;
 // Page weight (WSG 2.3, 2.5)
 // ---------------------------------------------------------------------------
 
-test.describe("WSG — page weight", () => {
+test.describe("WSG: page weight", () => {
   for (const path of PAGES) {
     test(`${path} total transfer < ${PAGE_WEIGHT_BUDGET_KB} KB`, async ({ page, context }) => {
       const client = await context.newCDPSession(page);
@@ -37,7 +37,7 @@ test.describe("WSG — page weight", () => {
       const kb = Math.round(totalBytes / 1024);
       expect(
         totalBytes,
-        `${path} transferred ${kb} KB — over ${PAGE_WEIGHT_BUDGET_KB} KB budget`,
+        `${path} transferred ${kb} KB, over ${PAGE_WEIGHT_BUDGET_KB} KB budget`,
       ).toBeLessThan(PAGE_WEIGHT_BUDGET_KB * 1024);
     });
   }
@@ -47,7 +47,7 @@ test.describe("WSG — page weight", () => {
 // Third-party requests (WSG 5.14, 5.15)
 // No analytics or tracking requests without consent.
 // Community avatar hosts (community.offon.dev, discourse-cdn.com) are
-// allowlisted — they serve first-party content, not tracking scripts.
+// allowlisted, as they serve first-party content, not tracking scripts.
 // ---------------------------------------------------------------------------
 
 // Hosts that are permitted to receive requests on every page load.
@@ -66,7 +66,7 @@ function isAllowedHost(hostname: string): boolean {
   );
 }
 
-test.describe("WSG — third-party requests", () => {
+test.describe("WSG: third-party requests", () => {
   for (const path of PAGES) {
     test(`${path} makes no tracking/analytics requests without consent`, async ({ page }) => {
       const unexpected: string[] = [];
@@ -94,9 +94,9 @@ test.describe("WSG — third-party requests", () => {
 // Image optimisation (WSG 2.9)
 // ---------------------------------------------------------------------------
 
-test.describe("WSG — image optimisation", () => {
+test.describe("WSG: image optimisation", () => {
   for (const path of PAGES) {
-    test(`${path} — all images have explicit width and height`, async ({ page }) => {
+    test(`${path}: all images have explicit width and height`, async ({ page }) => {
       await page.goto(path);
       await page.waitForLoadState("networkidle");
 
@@ -109,7 +109,7 @@ test.describe("WSG — image optimisation", () => {
       expect(violations, "Images missing explicit width/height (causes CLS)").toHaveLength(0);
     });
 
-    test(`${path} — below-fold images use loading="lazy"`, async ({ page }) => {
+    test(`${path}: below-fold images use loading="lazy"`, async ({ page }) => {
       await page.goto(path);
       await page.waitForLoadState("networkidle");
 
@@ -132,9 +132,9 @@ test.describe("WSG — image optimisation", () => {
 // Autoplaying media wastes bandwidth and energy without user intent.
 // ---------------------------------------------------------------------------
 
-test.describe("WSG — media", () => {
+test.describe("WSG: media", () => {
   for (const path of PAGES) {
-    test(`${path} — no autoplaying media without muted`, async ({ page }) => {
+    test(`${path}: no autoplaying media without muted`, async ({ page }) => {
       await page.goto(path);
       await page.waitForLoadState("networkidle");
 
diff --git a/playwright.config.ts b/playwright.config.ts
index ec8a1f92c..3591432f6 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -15,8 +15,12 @@ export default defineConfig({
     { name: "chromium", use: { ...devices["Desktop Chrome"] } },
   ],
   webServer: {
-    command: "npx serve dist/client",
-    url: "http://localhost:3000",
+    // Use preview (not bare serve) so the 404 fallback copy runs before serving.
+    command: "npm run preview",
+    // Probe a deep prerendered route, not just the root, to confirm the static
+    // server is fully ready before tests start.
+    url: "http://localhost:3000/challenges/python/",
     reuseExistingServer: !process.env.CI,
+    timeout: 30000,
   },
 });
diff --git a/public/fonts/syne-latin-600-normal.woff2 b/public/fonts/syne-latin-600-normal.woff2
deleted file mode 100644
index eb9173861..000000000
Binary files a/public/fonts/syne-latin-600-normal.woff2 and /dev/null differ
diff --git a/public/fonts/syne-latin-ext-600-normal.woff2 b/public/fonts/syne-latin-ext-600-normal.woff2
deleted file mode 100644
index f0f896387..000000000
Binary files a/public/fonts/syne-latin-ext-600-normal.woff2 and /dev/null differ
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 0fc7c8bf2..3e97b04ba 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,50 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url><loc>https://offon.dev/</loc><lastmod>2026-06-01</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url>
-  <url><loc>https://offon.dev/adventures/</loc><lastmod>2026-06-01</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
+  <url><loc>https://offon.dev/adventures/</loc><lastmod>2026-06-04</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
   <url><loc>https://offon.dev/contribute/</loc><lastmod>2026-06-02</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
   <url><loc>https://offon.dev/sponsors/</loc><lastmod>2026-06-01</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/about/</loc><lastmod>2026-06-01</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/handbook/</loc><lastmod>2026-06-01</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/accessibility/</loc><lastmod>2026-06-01</lastmod><changefreq>yearly</changefreq><priority>0.5</priority></url>
   <url><loc>https://offon.dev/privacy/</loc><lastmod>2026-06-01</lastmod><changefreq>yearly</changefreq><priority>0.5</priority></url>
-  <url><loc>https://offon.dev/adventures/lex-imperfecta/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/lex-imperfecta/levels/beginner/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/blind-by-design/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/blind-by-design/levels/beginner/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/blind-by-design/levels/intermediate/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/blind-by-design/levels/expert/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/the-ai-observatory/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/beginner/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/intermediate/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/expert/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/building-cloudhaven/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/beginner/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/intermediate/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/expert/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/beginner/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/intermediate/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
-  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/expert/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/lex-imperfecta/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/lex-imperfecta/levels/beginner/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/blind-by-design/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/blind-by-design/levels/beginner/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/blind-by-design/levels/intermediate/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/blind-by-design/levels/expert/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/the-ai-observatory/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/beginner/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/intermediate/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/the-ai-observatory/levels/expert/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/building-cloudhaven/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/beginner/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/intermediate/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/expert/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/beginner/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/intermediate/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/expert/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
   <url><loc>https://offon.dev/challenges/</loc><lastmod>2026-06-03</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
-  <url><loc>https://offon.dev/challenges/argo-cd/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/argo-rollouts/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/flagd/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/github-actions/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/grafana/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/jaeger/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/java/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/kubernetes/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/kyverno/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/openfeature/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/openllmetry/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/opentelemetry/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/opentofu/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/prometheus/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/promql/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/python/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/spring-boot/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/tdd/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/terraform/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
-  <url><loc>https://offon.dev/challenges/trivy/</loc><lastmod>2026-06-04</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/argo-cd/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/argo-rollouts/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/flagd/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/github-actions/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/grafana/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/jaeger/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/java/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/kubernetes/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/kyverno/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/openfeature/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/openllmetry/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/opentelemetry/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/opentofu/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/prometheus/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/promql/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/python/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/spring-boot/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/tdd/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/terraform/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://offon.dev/challenges/trivy/</loc><lastmod>2026-06-05</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
 </urlset>
diff --git a/scripts/generate-adventures.mjs b/scripts/generate-adventures.mjs
index 934d37c31..652729de1 100644
--- a/scripts/generate-adventures.mjs
+++ b/scripts/generate-adventures.mjs
@@ -527,7 +527,8 @@ async function generateAdventureTs(data) {
   // Pre-render prose fields to HTML at build time.
   const storyHtml = await mdToInline(adventureStory);
   const contributorAboutHtml = data.contributor?.about ? await mdToInline(data.contributor.about) : null;
-  // Adventure backstory items are rendered individually as <p> elements, so use inline.
+  // Each item renders via InlineProse; mdToInline strips the outer <p> on single-paragraph
+  // items so they can be safely wrapped as <p md-inline> at render time.
   const backstoryHtml = data.backstory ? await mdToInlineArray(data.backstory) : null;
 
   lines.push(`export const ${constName}: Adventure = {`);
@@ -562,6 +563,14 @@ async function generateAdventureTs(data) {
     const rankingRulesUrl = data.rewards.ranking_rules_url ?? DEFAULT_REWARDS_RANKING_RULES_PATH;
     const eligibilityHtml = await mdToInline(eligibilityRaw);
     const rankingNoteHtml = await mdToInline(rankingNoteRaw);
+    // rankingNote renders inside a <span> inside a <p>, so block-level HTML there
+    // is always invalid HTML. Fail the build rather than silently corrupt the DOM.
+    if (/<(p|ul|ol|blockquote|h[1-6]|pre|table|hr|figure|div)\b/.test(rankingNoteHtml)) {
+      fail(
+        `${data.slug}: rewards.ranking_note produces block-level HTML. ` +
+        `It must be a single inline paragraph — collapse it to one line and regenerate.`
+      );
+    }
     lines.push(`  rewards: {`);
     const rewardsDeadline = data.rewards.deadline === "TODO" ? "" : data.rewards.deadline;
     lines.push(`    deadline: "${escapeDoubleQuoted(rewardsDeadline)}",`);
@@ -731,18 +740,7 @@ function generateIndexTs(adventures) {
   lines.push(`    }))`);
   lines.push(`  );`);
   lines.push(``);
-  lines.push(`/** Convert a tag display name to a URL-safe slug. */`);
-  lines.push(`export const tagToSlug = (tag: string): string =>`);
-  lines.push(`  tag.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");`);
-  lines.push(``);
-  lines.push(`/** Lookup map from slug back to the original tag name. */`);
-  lines.push(`const SLUG_TO_TAG: Record<string, string> = Object.fromEntries(`);
-  lines.push(`  ALL_TAGS.map((tag) => [tagToSlug(tag), tag])`);
-  lines.push(`);`);
-  lines.push(``);
-  lines.push(`/** Resolve a URL slug back to the original tag name, or undefined if not found. */`);
-  lines.push(`export const slugToTag = (slug: string): string | undefined => SLUG_TO_TAG[slug];`);
-  lines.push(``);
+  lines.push(`export { tagToSlug, slugToTag } from "./tag-utils";`);
 
   return lines.join("\n");
 }
diff --git a/src/Layout.tsx b/src/Layout.tsx
index 5fd53b74d..c65a43665 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -12,7 +12,12 @@ import { useClickTracking } from "@/hooks/useClickTracking";
 // position.
 const ScrollToTop = (): null => {
   const { pathname, hash } = useLocation();
+  const prevPathname = useRef<string | null>(null);
+
   useEffect(() => {
+    const prev = prevPathname.current;
+    prevPathname.current = pathname;
+
     if (hash) {
       const id = hash.slice(1);
       // Defer past commit so the target element exists in the new route.
@@ -21,6 +26,13 @@ const ScrollToTop = (): null => {
       });
       return;
     }
+
+    // Suppress scroll reset when navigating between /challenges and
+    // /challenges/:tag (e.g. clicking a TagChip or direct-linking to a tag).
+    // Filter interactions (topic/difficulty toggles) never change the pathname,
+    // so they don't reach this guard at all.
+    if (prev !== null && prev.startsWith("/challenges") && pathname.startsWith("/challenges")) return;
+
     window.scrollTo(0, 0);
   }, [pathname, hash]);
   return null;
diff --git a/src/components/AdventureCard.tsx b/src/components/AdventureCard.tsx
index 76dc54f46..ab6fa6221 100644
--- a/src/components/AdventureCard.tsx
+++ b/src/components/AdventureCard.tsx
@@ -12,7 +12,7 @@ type AdventureCardProps = { adventure: AdventureCardSummary };
 
 export const AdventureCard = ({ adventure }: AdventureCardProps): JSX.Element => (
   <Link
-    to={`/adventures/${adventure.id}`}
+    to={`/adventures/${adventure.id}/`}
     className={cn(
       "group card-glow relative rounded-xl border-2 bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       adventure.isLive
diff --git a/src/components/ChallengeBuildersSection.tsx b/src/components/ChallengeBuildersSection.tsx
index 285d70043..6460aa625 100644
--- a/src/components/ChallengeBuildersSection.tsx
+++ b/src/components/ChallengeBuildersSection.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { ADVENTURE_CONTRIBUTORS } from "@/data/adventures";
 import { PersonNameLink } from "@/components/PersonNameLink";
 import { SidebarLayout } from "@/components/SidebarLayout";
+import { InlineProse } from "@/components/InlineProse";
 
 export const ChallengeBuildersSection = ({ aside }: { aside?: ReactNode }): JSX.Element | null => {
   if (ADVENTURE_CONTRIBUTORS.length === 0) {
@@ -23,7 +24,7 @@ export const ChallengeBuildersSection = ({ aside }: { aside?: ReactNode }): JSX.
           >
             <PersonNameLink name={contributor.name} url={contributor.url} />
             {contributor.about && (
-              <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed md-inline" dangerouslySetInnerHTML={{ __html: contributor.about }} />
+              <InlineProse html={contributor.about} className="mt-1.5 text-sm text-muted-foreground leading-relaxed" />
             )}
             <p className="mt-6 mb-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">adventures created</p>
             <ul className="space-y-3">
@@ -31,7 +32,7 @@ export const ChallengeBuildersSection = ({ aside }: { aside?: ReactNode }): JSX.
                 <li key={id} className="flex items-center gap-2 text-xs">
                   <span className="h-1 w-1 shrink-0 rounded-full bg-primary" aria-hidden="true" />
                   <Link
-                    to={`/adventures/${id}`}
+                    to={`/adventures/${id}/`}
                     className="docs-ext-link"
                   >
                     {title}
diff --git a/src/components/ChallengeFilters.tsx b/src/components/ChallengeFilters.tsx
index 438cb35b8..4c6269058 100644
--- a/src/components/ChallengeFilters.tsx
+++ b/src/components/ChallengeFilters.tsx
@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef, type JSX } from "react";
 import { ChevronDown, Check, X } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { DIFFICULTIES, type Difficulty } from "@/data/adventures/filter-utils";
 
-const DIFFICULTIES = ["Beginner", "Intermediate", "Expert"] as const;
-export type Difficulty = (typeof DIFFICULTIES)[number];
+export type { Difficulty };
 
 type ChallengeFiltersProps = {
   activeTopics: string[];
diff --git a/src/components/ChallengesGrid.tsx b/src/components/ChallengesGrid.tsx
index 6e6038b11..539a5a520 100644
--- a/src/components/ChallengesGrid.tsx
+++ b/src/components/ChallengesGrid.tsx
@@ -2,7 +2,7 @@ import { useState, type JSX } from "react";
 import { Link } from "react-router";
 import { ArrowRight } from "lucide-react";
 import { ADVENTURE_SUMMARIES, SUMMARY_TAGS } from "@/data/adventures/summaries";
-import { getLevelSummariesByFilters } from "@/data/adventures/filter-utils";
+import { getLevelSummariesByFilters, ALL_LEVEL_SUMMARIES } from "@/data/adventures/filter-utils";
 import { AdventureCard } from "@/components/AdventureCard";
 import { FilteredLevelCard } from "@/components/FilteredLevelCard";
 import { SectionLabel } from "@/components/SectionLabel";
@@ -59,15 +59,15 @@ export const ChallengesGrid = ({ limit }: ChallengesGridProps = {}): JSX.Element
           {/* Live region */}
           <p aria-live="polite" aria-atomic="true" className="sr-only">
             {isFiltered
-              ? `Showing ${filteredLevels.length} ${filteredLevels.length === 1 ? "challenge" : "challenges"}`
+              ? `Showing ${filteredLevels.length} ${filteredLevels.length === 1 ? "challenge" : "challenges"}${activeDifficulty ? ` · ${activeDifficulty}` : ""}${activeTopics.length > 0 ? ` · ${activeTopics.join(", ")}` : ""}`
               : hasFiltered
-              ? "Filters cleared, showing all adventures"
+              ? `Filters cleared, showing ${ADVENTURE_SUMMARIES.length} ${ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"} · ${ALL_LEVEL_SUMMARIES.length} ${ALL_LEVEL_SUMMARIES.length === 1 ? "challenge" : "challenges"}`
               : ""}
           </p>
 
           {isFiltered ? (
             <>
-              <p 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-muted-foreground">
                 {filteredLevels.length} {filteredLevels.length === 1 ? "challenge" : "challenges"}
                 {activeDifficulty && ` · ${activeDifficulty}`}
                 {activeTopics.length > 0 && ` · ${activeTopics.join(", ")}`}
@@ -86,6 +86,9 @@ export const ChallengesGrid = ({ limit }: ChallengesGridProps = {}): JSX.Element
             </>
           ) : (
             <>
+              <p className="mb-6 font-sans text-sm font-medium tracking-wide text-muted-foreground">
+                {ADVENTURE_SUMMARIES.length} {ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"} · {ALL_LEVEL_SUMMARIES.length} {ALL_LEVEL_SUMMARIES.length === 1 ? "challenge" : "challenges"}
+              </p>
               <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                 {visibleAdventures.map((adventure) => (
                   <AdventureCard key={adventure.id} adventure={adventure} />
@@ -93,7 +96,7 @@ export const ChallengesGrid = ({ limit }: ChallengesGridProps = {}): JSX.Element
               </div>
               {hasMore && (
                 <div className="mt-10 flex justify-center">
-                  <Link to="/challenges" className="btn-ghost inline-flex items-center gap-2">
+                  <Link to="/challenges/" className="btn-ghost inline-flex items-center gap-2">
                     See all adventures
                     <ArrowRight className="h-4 w-4" aria-hidden="true" />
                   </Link>
diff --git a/src/components/ConsentBanner.tsx b/src/components/ConsentBanner.tsx
index 15f7ae110..28231e026 100644
--- a/src/components/ConsentBanner.tsx
+++ b/src/components/ConsentBanner.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, type JSX } from "react";
 import { Link } from "react-router";
 import { Cookie } from "lucide-react";
 import { useConsent } from "@/hooks/useConsent";
+import { SITE_NAME } from "@/data/constants";
 
 export function ConsentBanner(): JSX.Element | null {
   const { consent, grant, deny, reset } = useConsent();
@@ -53,10 +54,10 @@ export function ConsentBanner(): JSX.Element | null {
         <div className="flex-1 space-y-1">
           <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
+            We use Google Analytics to understand how visitors use {SITE_NAME}. No data is sent to
             Google until you accept. You can change your preference at any time. See our{" "}
             <Link
-              to="/privacy"
+              to="/privacy/"
               className="underline underline-offset-2 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
             >
               Privacy Policy
diff --git a/src/components/FilteredLevelCard.tsx b/src/components/FilteredLevelCard.tsx
index 9092acb08..1f4904183 100644
--- a/src/components/FilteredLevelCard.tsx
+++ b/src/components/FilteredLevelCard.tsx
@@ -23,7 +23,7 @@ export const FilteredLevelCard = ({
   className,
 }: FilteredLevelCardProps): JSX.Element => (
   <Link
-    to={`/adventures/${adventureId}/levels/${level.id}`}
+    to={`/adventures/${adventureId}/levels/${level.id}/`}
     className={cn(
       "group card-glow rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 981d34627..8ed1334d7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import type { JSX } from "react";
 import { Link } from "react-router";
 import { Zap, ExternalLink } from "lucide-react";
 import { useTheme } from "@/hooks/useTheme";
-import { BRAND_NAME, BRAND_SHORT_DESCRIPTION, BRAND_SLOGAN_PARTS, COMMUNITY_URL, CONTACT_EMAIL, CURRENT_YEAR, LINKEDIN_URL, BLUESKY_URL, X_URL } from "@/data/constants";
+import { BRAND_NAME, BRAND_SHORT_DESCRIPTION, BRAND_SLOGAN_PARTS, COMMUNITY_URL, CONTACT_EMAIL, CURRENT_YEAR, LINKEDIN_URL, BLUESKY_URL, X_URL, SITE_NAME } from "@/data/constants";
 import logoDark from "@/assets/offon-logo-dark-color.svg";
 import logoLight from "@/assets/offon-logo-light-color.svg";
 
@@ -18,7 +18,7 @@ export const Footer = (): JSX.Element => {
         {/* Brand */}
         <div>
           <div className="mb-4">
-            <img src={theme === "dark" ? logoDark : logoLight} alt="offon.dev" width={104} height={26} loading="lazy" className="h-5" />
+            <img src={theme === "dark" ? logoDark : logoLight} alt={SITE_NAME} width={104} height={26} loading="lazy" className="h-5" />
           </div>
           <p className="font-sans text-sm text-[hsl(var(--text-secondary))] leading-relaxed md:max-w-xs">
             {BRAND_SHORT_DESCRIPTION}
@@ -31,11 +31,11 @@ export const Footer = (): JSX.Element => {
             <nav aria-label="Explore">
               <p className="text-xs uppercase tracking-widest text-[hsl(var(--text-faint))] mb-3">Explore</p>
               <div className="flex flex-col">
-                <Link to="/adventures" className={linkCls}>Adventures</Link>
-                <Link to="/contribute" className={linkCls}>Contribute</Link>
-                <Link to="/handbook" className={linkCls}>Handbook</Link>
-                <Link to="/about" className={linkCls}>About</Link>
-                <Link to="/sponsors" className={linkCls}>Sponsors</Link>
+                <Link to="/challenges/" className={linkCls}>Challenges</Link>
+                <Link to="/contribute/" className={linkCls}>Contribute</Link>
+                <Link to="/handbook/" className={linkCls}>Handbook</Link>
+                <Link to="/about/" className={linkCls}>About</Link>
+                <Link to="/sponsors/" className={linkCls}>Sponsors</Link>
               </div>
             </nav>
             {/* Community */}
@@ -44,8 +44,8 @@ export const Footer = (): JSX.Element => {
               <div className="flex flex-col">
                 <a href={COMMUNITY_URL} target="_blank" rel="noopener noreferrer" className={linkCls}>Hub <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span></a>
                 <a href={`${COMMUNITY_URL}/t/code-of-conduct/31/1`} target="_blank" rel="noopener noreferrer" className={linkCls}>Code of Conduct <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span></a>
-                <Link to="/privacy" className={linkCls}>Privacy Policy</Link>
-                <Link to="/accessibility" className={linkCls}>Accessibility</Link>
+                <Link to="/privacy/" className={linkCls}>Privacy Policy</Link>
+                <Link to="/accessibility/" className={linkCls}>Accessibility</Link>
                 <a href={`mailto:${CONTACT_EMAIL}`} className={linkCls}>Contact</a>
               </div>
             </nav>
diff --git a/src/components/InlineProse.tsx b/src/components/InlineProse.tsx
new file mode 100644
index 000000000..08afc3988
--- /dev/null
+++ b/src/components/InlineProse.tsx
@@ -0,0 +1,31 @@
+import type { JSX } from "react";
+
+// Nesting a block element inside <p> is invalid HTML; browsers auto-correct it
+// in ways that diverge from React's VDOM, producing hydration error #418.
+export const BLOCK_ELEMENT_RE = /<(p|ul|ol|blockquote|h[1-6]|pre|table|hr|figure|div)\b/;
+
+type InlineProseProps = {
+  html: string;
+  className?: string;
+};
+
+export const InlineProse = ({ html, className }: InlineProseProps): JSX.Element => {
+  // filter(Boolean) strips empty/whitespace-only className so no spurious
+  // leading space appears in the final class string.
+  const cls = (mdClass: string): string =>
+    [className?.trim(), mdClass].filter(Boolean).join(" ");
+  if (BLOCK_ELEMENT_RE.test(html)) {
+    return (
+      <div
+        className={cls("md-content")}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+  return (
+    <p
+      className={cls("md-inline")}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e76662025..fd4b5c147 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -42,8 +42,8 @@ const NavLinks = ({ homeActive, onNavigate }: NavLinksProps): JSX.Element => (
     >
       Home
     </NavLink>
-    <NavLink to="/challenges" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Challenges</NavLink>
-    <NavLink to="/about" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>About</NavLink>
+    <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}
       target="_blank"
@@ -53,9 +53,9 @@ const NavLinks = ({ homeActive, onNavigate }: NavLinksProps): JSX.Element => (
     >
       Community <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
     </a>
-    <NavLink to="/contribute" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Contribute</NavLink>
-    <NavLink to="/handbook" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Handbook</NavLink>
-    <NavLink to="/sponsors" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Sponsors</NavLink>
+    <NavLink to="/contribute/" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Contribute</NavLink>
+    <NavLink to="/handbook/" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Handbook</NavLink>
+    <NavLink to="/sponsors/" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Sponsors</NavLink>
   </>
 );
 
diff --git a/src/components/OtherLevelsCard.tsx b/src/components/OtherLevelsCard.tsx
index b7e674352..2079e9bfd 100644
--- a/src/components/OtherLevelsCard.tsx
+++ b/src/components/OtherLevelsCard.tsx
@@ -47,7 +47,7 @@ export const OtherLevelsCard = ({
         {otherLevels.map((level) => (
           <li key={level.id}>
             <Link
-              to={`/adventures/${adventure.id}/levels/${level.id}`}
+              to={`/adventures/${adventure.id}/levels/${level.id}/`}
               className="group inline-flex w-full items-center gap-2 rounded-sm border px-2.5 py-1.5 text-xs no-underline transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
               style={pillStyle[level.difficulty]}
             >
diff --git a/src/components/RewardsCard.tsx b/src/components/RewardsCard.tsx
index 0bf6d973e..012bd87d7 100644
--- a/src/components/RewardsCard.tsx
+++ b/src/components/RewardsCard.tsx
@@ -3,6 +3,7 @@ import { ExternalLink, Trophy } from "lucide-react";
 import type { AdventureRewards } from "@/data/adventures/types";
 import { COMMUNITY_URL } from "@/data/constants";
 import { formatDeadline } from "@/lib/utils";
+import { InlineProse } from "@/components/InlineProse";
 
 type RewardsCardProps = {
   rewards: AdventureRewards;
@@ -54,7 +55,7 @@ export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlineP
       {rewards.tiers.map((tier) => (
         <div key={tier.label}>
           <p className="text-xs font-semibold text-foreground">{tier.label}</p>
-          <p className="text-xs text-[hsl(var(--text-secondary))] md-inline" dangerouslySetInnerHTML={{ __html: tier.description }} />
+          <InlineProse html={tier.description} className="text-xs text-[hsl(var(--text-secondary))]" />
         </div>
       ))}
     </div>
diff --git a/src/components/ScenarioSection.tsx b/src/components/ScenarioSection.tsx
index 38c45e344..26fdc2e55 100644
--- a/src/components/ScenarioSection.tsx
+++ b/src/components/ScenarioSection.tsx
@@ -1,5 +1,6 @@
 import type { JSX } from "react";
 import { CollapsibleSection } from "@/components/CollapsibleSection";
+import { InlineProse } from "@/components/InlineProse";
 
 type ScenarioSectionProps = {
   backstory: string[];
@@ -9,8 +10,10 @@ export const ScenarioSection = ({ backstory }: ScenarioSectionProps): JSX.Elemen
   <CollapsibleSection id="backstory" title="The Story">
     <div className="space-y-3">
       {backstory.map((para, i) => (
-        <p key={i} className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed md-inline"
-          dangerouslySetInnerHTML={{ __html: para }}
+        <InlineProse
+          key={i}
+          html={para}
+          className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed"
         />
       ))}
     </div>
diff --git a/src/components/SponsorStrip.tsx b/src/components/SponsorStrip.tsx
index e41256589..4dafa540f 100644
--- a/src/components/SponsorStrip.tsx
+++ b/src/components/SponsorStrip.tsx
@@ -10,7 +10,7 @@ export const SponsorStrip = (): JSX.Element => {
           Sponsor challenges, swag, or licenses and connect with the next generation of open source contributors.
         </p>
         <Link
-          to="/sponsors"
+          to="/sponsors/"
           className="btn-primary shrink-0"
         >
           Become a Sponsor <ArrowRight size={14} aria-hidden="true" />
diff --git a/src/components/StarterNudge.tsx b/src/components/StarterNudge.tsx
index d9719994e..ca10aa10e 100644
--- a/src/components/StarterNudge.tsx
+++ b/src/components/StarterNudge.tsx
@@ -31,7 +31,7 @@ export const StarterNudge = (): JSX.Element | null => {
         <span className="block mt-1">
           New here?{" "}
           <Link
-            to={`/adventures/${starterAdventure.id}/levels/${starterLevel.id}`}
+            to={`/adventures/${starterAdventure.id}/levels/${starterLevel.id}/`}
             className="font-bold underline decoration-2 underline-offset-2 text-primary-foreground hover:opacity-75"
           >
             Start with {starterAdventure.title}, a {starterAdventure.tags[0]} adventure
diff --git a/src/components/TagChips.tsx b/src/components/TagChips.tsx
index c22401025..1a6f9f674 100644
--- a/src/components/TagChips.tsx
+++ b/src/components/TagChips.tsx
@@ -1,6 +1,6 @@
 import { type JSX } from "react";
 import { Link } from "react-router";
-import { tagToSlug } from "@/data/adventures";
+import { tagToSlug } from "@/data/adventures/tag-utils";
 
 type TagChipsProps = {
   tags: readonly string[];
@@ -11,7 +11,7 @@ export const TagChips = ({ tags }: TagChipsProps): JSX.Element => (
     {tags.map((tag) => (
       <Link
         key={tag}
-        to={`/challenges/${tagToSlug(tag)}`}
+        to={`/challenges/${tagToSlug(tag)}/`}
         className="tag-chip-link rounded-sm border border-[hsl(var(--surface-border))] px-2.5 py-1 text-xs text-[hsl(var(--text-faint))] hover:border-primary hover:text-primary transition-colors"
       >
         {tag}
diff --git a/src/data/adventures/filter-utils.ts b/src/data/adventures/filter-utils.ts
index 246e8eeaa..929007fb8 100644
--- a/src/data/adventures/filter-utils.ts
+++ b/src/data/adventures/filter-utils.ts
@@ -1,13 +1,16 @@
 import { ADVENTURE_SUMMARIES } from "./summaries";
 import type { RelatedLevelSummary } from "./types";
 
-/** Returns level summaries matching all selected tags (AND) and/or a difficulty. */
+export const DIFFICULTIES = ["Beginner", "Intermediate", "Expert"] as const;
+export type Difficulty = (typeof DIFFICULTIES)[number];
+
+/** Returns level summaries matching any selected tag (OR) and/or a difficulty. */
 export const getLevelSummariesByFilters = (
   tags: string[],
   difficulty: string | null
 ): RelatedLevelSummary[] =>
   ADVENTURE_SUMMARIES
-    .filter((a) => tags.length === 0 || tags.every((t) => a.tags.includes(t)))
+    .filter((a) => tags.length === 0 || tags.some((t) => a.tags.includes(t)))
     .flatMap((a) =>
       a.levels
         .filter((level) => !difficulty || level.difficulty === difficulty)
@@ -18,3 +21,5 @@ export const getLevelSummariesByFilters = (
           ...(a.isLive ? { isLive: true as const } : {}),
         }))
     );
+
+export const ALL_LEVEL_SUMMARIES: RelatedLevelSummary[] = getLevelSummariesByFilters([], null);
diff --git a/src/data/adventures/index.ts b/src/data/adventures/index.ts
index 69b7d4ed0..f0d268920 100644
--- a/src/data/adventures/index.ts
+++ b/src/data/adventures/index.ts
@@ -44,14 +44,4 @@ export const getLevelsByTag = (tag: string): RelatedLevel[] =>
     }))
   );
 
-/** Convert a tag display name to a URL-safe slug. */
-export const tagToSlug = (tag: string): string =>
-  tag.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
-
-/** Lookup map from slug back to the original tag name. */
-const SLUG_TO_TAG: Record<string, string> = Object.fromEntries(
-  ALL_TAGS.map((tag) => [tagToSlug(tag), tag])
-);
-
-/** Resolve a URL slug back to the original tag name, or undefined if not found. */
-export const slugToTag = (slug: string): string | undefined => SLUG_TO_TAG[slug];
+export { tagToSlug, slugToTag } from "./tag-utils";
\ No newline at end of file
diff --git a/src/data/adventures/tag-utils.ts b/src/data/adventures/tag-utils.ts
new file mode 100644
index 000000000..ce0bc29fd
--- /dev/null
+++ b/src/data/adventures/tag-utils.ts
@@ -0,0 +1,14 @@
+import { SUMMARY_TAGS } from "./summaries";
+
+/** Convert a tag display name to a URL-safe slug. */
+export const tagToSlug = (tag: string): string =>
+  tag.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+
+/** Lookup map from slug back to the original tag name. Built from SUMMARY_TAGS so this module
+    does not import the full generated adventure detail files. */
+const SLUG_TO_TAG: Record<string, string> = Object.fromEntries(
+  SUMMARY_TAGS.map((tag) => [tagToSlug(tag), tag])
+);
+
+/** Resolve a URL slug back to the original tag name, or undefined if not found. */
+export const slugToTag = (slug: string): string | undefined => SLUG_TO_TAG[slug];
diff --git a/src/entry.client.tsx b/src/entry.client.tsx
index 6d332992d..0cce75bde 100644
--- a/src/entry.client.tsx
+++ b/src/entry.client.tsx
@@ -4,7 +4,7 @@ import { HydratedRouter } from "react-router/dom";
 
 // When a static host (GitHub Pages, local preview) serves the prerendered
 // 404.html as a fallback for an unknown URL, the embedded __reactRouterContext
-// stream contains route-match state for the /404 route — not the actual browser
+// stream contains route-match state for the /404 route, not the actual browser
 // URL. HydratedRouter uses that stale route state, which triggers a client-side
 // route-match mismatch and React error #418. React recovers automatically
 // (it switches to a client render of the correct NotFound page), but the error
diff --git a/src/index.css b/src/index.css
index fbba36768..b43a9d8fd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -94,28 +94,12 @@
   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: 'Syne';
-  src: url('/fonts/syne-latin-ext-600-normal.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-  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: 'Syne';
-  src: url('/fonts/syne-latin-600-normal.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-  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: 'Syne';
   src: url('/fonts/syne-latin-ext-700-normal.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  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 {
@@ -123,9 +107,21 @@
   src: url('/fonts/syne-latin-700-normal.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  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;
 }
+/* Metric-adjusted fallback for Syne 700. Used when font-display: optional misses the load
+   window. size-adjust/ascent/descent keep h1/h2 layout close to Syne so the fallback
+   render looks intentional rather than broken. Values measured via canvas.measureText()
+   against Arial at 100px on the live site. */
+@font-face {
+  font-family: 'Syne Fallback';
+  src: local('Arial');
+  size-adjust: 114.62%;
+  ascent-override: 81.14%;
+  descent-override: 23.56%;
+  line-gap-override: 0%;
+}
 
 @import "tailwindcss";
 
@@ -134,7 +130,7 @@
 @theme {
   --font-sans: Inter, sans-serif;
   --font-mono: "JetBrains Mono", monospace;
-  --font-heading: Syne, sans-serif;
+  --font-heading: Syne, 'Syne Fallback', sans-serif;
 
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
@@ -314,7 +310,7 @@ html {
     --text-tertiary: 35 8% 38%;
     --text-muted: 35 8% 32%;
     --text-faint: 35 8% 32%;
-    /* Dark amber for inline link hover in light mode — same hue as primary,
+    /* Dark amber for inline link hover in light mode, same hue as primary,
        darkened to hsl(41 100% 25%) ≈ #805700 for ~5.5:1 contrast on light bg */
     --link-hover-light: 41 100% 25%;
 
@@ -365,7 +361,7 @@ html {
   }
 
   h1, h2 {
-    font-family: 'Syne', sans-serif;
+    font-family: 'Syne', 'Syne Fallback', sans-serif;
     font-weight: 700;
     color: hsl(var(--primary));
   }
@@ -385,8 +381,8 @@ html {
 /* ─── Animations ──────────────────────────────────────────── */
 
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(14px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from { transform: translateY(8px); }
+  to   { transform: translateY(0); }
 }
 
 @keyframes marquee {
@@ -421,28 +417,6 @@ html {
   100% { transform: translate(0,     0);    opacity: 0;    }
 }
 
-.animate-fade-up            { animation: fadeUp 0.6s ease-out both; }
-.animate-fade-up-delay-1    { animation: fadeUp 0.6s ease-out 0.1s both; }
-.animate-fade-up-delay-2    { animation: fadeUp 0.6s ease-out 0.2s both; }
-.animate-fade-up-delay-3    { animation: fadeUp 0.6s ease-out 0.3s both; }
-.animate-marquee            { animation: marquee 30s linear infinite; }
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-fade-up,
-  .animate-fade-up-delay-1,
-  .animate-fade-up-delay-2,
-  .animate-fade-up-delay-3,
-  .animate-marquee {
-    animation: none;
-  }
-  /* Firefly particles run a continuous 13-keyframe animation with positional
-     transforms. Vestibular disorder and motion-sensitive users are affected
-     by persistent movement even from decorative elements. */
-  .firefly {
-    animation: none;
-  }
-}
-
 /* ─── Firefly particles ───────────────────────────────────── */
 
 .firefly {
@@ -455,8 +429,20 @@ html {
     0 0 2px 1px  hsl(var(--primary)),
     0 0 5px 2px  hsl(var(--primary) / 0.55),
     0 0 10px 3px hsl(var(--primary) / 0.2);
-  animation: fireflyFloat linear infinite;
-  will-change: transform, opacity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .animate-fade-up            { animation: fadeUp 0.35s ease-out both; }
+  .animate-fade-up-delay-1    { animation: fadeUp 0.35s ease-out 0.05s both; }
+  .animate-fade-up-delay-2    { animation: fadeUp 0.35s ease-out 0.10s both; }
+  .animate-fade-up-delay-3    { animation: fadeUp 0.35s ease-out 0.15s both; }
+  .animate-marquee            { animation: marquee 30s linear infinite; }
+  .firefly                    { animation: fireflyFloat linear infinite; }
+  /* will-change creates a GPU compositing layer; cap at 3 to stay within PERFORMANCE.md limit */
+  .firefly:nth-child(1),
+  .firefly:nth-child(2),
+  .firefly:nth-child(3) {
+    will-change: transform, opacity;
+  }
 }
 /* vary each dot's position + timing */
 .firefly:nth-child(1)  { top: 12%; left: 8%;   animation-duration: 6s;   animation-delay: 0s;   }
@@ -467,13 +453,7 @@ html {
 .firefly:nth-child(6)  { top: 18%; left: 55%;  animation-duration: 8s;   animation-delay: 1.8s; }
 .firefly:nth-child(7)  { top: 82%; right: 8%;   animation-duration: 6.5s; animation-delay: 4s;   }
 .firefly:nth-child(8)  { top: 50%; left: 72%;  animation-duration: 7s;   animation-delay: 2.6s; }
-/* four new: fill top strip, mid-left gap, lower-right gap */
-.firefly:nth-child(9)  { top: 7%;  left: 38%;  animation-duration: 6.5s; animation-delay: 0.9s; }
-.firefly:nth-child(10) { top: 6%;  right: 20%;  animation-duration: 7s;   animation-delay: 3.5s; }
-.firefly:nth-child(11) { top: 46%; left: 6%;   animation-duration: 8s;   animation-delay: 1.6s; }
-.firefly:nth-child(12) { top: 68%; right: 14%;  animation-duration: 5.5s; animation-delay: 2.3s; }
-
-/* On mobile hide fireflies 7–12; display:none also stops their animations */
+/* On mobile hide fireflies 7–8; display:none also stops their animations */
 @media (max-width: 639px) {
   .firefly:nth-child(n+7) { display: none; }
 }
@@ -481,7 +461,7 @@ html {
 /* ─── Component classes ──────────────────────────────────── */
 
 @layer components {
-  /* Primary filled button — py-3 gives 12+20+12 = 44px (WCAG 2.5.5) */
+  /* Primary filled button: py-3 gives 12+20+12 = 44px (WCAG 2.5.5) */
   .btn-primary {
     @apply inline-flex items-center gap-2 rounded-md bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground transition-all duration-200 hover:brightness-110 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
   }
@@ -615,7 +595,7 @@ html {
   border-color: hsl(43 100% 50% / 0.5);
 }
 
-/* bg-primary sections stay amber in light mode — body copy uses text-background/90
+/* bg-primary sections stay amber in light mode. Body copy uses text-background/90
    which resolves to near-white cream and needs darkening for contrast on amber */
 .light .bg-primary .text-background\/90 {
   color: hsl(240 25% 8% / 0.8);
@@ -814,7 +794,7 @@ html {
   text-decoration-color: currentColor;
 }
 
-/* Light mode hover: dark amber — same hue as primary, L=25% gives ~5.5:1 contrast */
+/* Light mode hover: dark amber, same hue as primary, L=25% gives ~5.5:1 contrast */
 .light .docs-ext-link:hover {
   color: hsl(var(--link-hover-light));
   text-decoration-color: currentColor;
@@ -1009,7 +989,7 @@ html {
 
 /* ─── Social icon links ──────────────────────────────────── */
 /* Icon-only links used in the Spread the Word card on /contribute.
-   bg-card in light mode is near-white; #ffc034 (--primary) gives ~1.6:1 on hover —
+   bg-card in light mode is near-white; #ffc034 (--primary) gives ~1.6:1 on hover,
    fails WCAG 1.4.11. Use link-hover-light (~5.5:1) in light mode instead. */
 .social-icon-link {
   padding: 0.25rem;
@@ -1047,7 +1027,7 @@ html {
 /* ─── ContributorBadge pill (light mode) ────────────────── */
 /* bg-primary/5 is nearly invisible on light backgrounds; use transparent
    background with a visible slate border instead.
-   Border darkened to hsl(220 12% 55%) — 3.25:1 on near-white (WCAG 1.4.11). */
+   Border darkened to hsl(220 12% 55%), 3.25:1 on near-white (WCAG 1.4.11). */
 .light .contributor-pill {
   background-color: transparent;
   border-color: hsl(220 12% 55%);
@@ -1078,7 +1058,7 @@ html {
   box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
 }
 
-/* Light mode: --surface-border is hsl(220 12% 87%) — only 1.30:1 on near-white.
+/* Light mode: --surface-border is hsl(220 12% 87%), only 1.30:1 on near-white.
    WCAG 1.4.11 requires 3:1 for interactive component boundaries.
    Hover amber (#ffc034) is also below 3:1. Override in light mode only. */
 .light .tag-chip-link {
diff --git a/src/pages/Accessibility.tsx b/src/pages/Accessibility.tsx
index 0b89b483c..4bf69292a 100644
--- a/src/pages/Accessibility.tsx
+++ b/src/pages/Accessibility.tsx
@@ -15,8 +15,8 @@ export const meta: MetaFunction = () =>
   });
 
 const Accessibility = (): JSX.Element => {
-  const heading2 = "text-xl font-heading font-semibold text-foreground mt-10 mb-3";
-  const heading3 = "text-lg font-heading font-semibold text-foreground mt-6 mb-2";
+  const heading2 = "text-xl font-heading font-bold text-foreground mt-10 mb-3";
+  const heading3 = "text-lg font-heading font-bold text-foreground mt-6 mb-2";
   const paragraph = "text-sm text-muted-foreground leading-relaxed mb-4";
   const list = "list-disc list-inside space-y-1 text-sm text-muted-foreground mb-4 ml-2";
   const link = "docs-ext-link";
@@ -261,7 +261,7 @@ const Accessibility = (): JSX.Element => {
 
             <p className="text-sm text-muted-foreground mt-10">
               Have a question?{" "}
-              <Link to="/about" className={link}>Reach out to the team</Link>.
+              <Link to="/about/" className={link}>Reach out to the team</Link>.
             </p>
 
             <hr className="my-8 border-t border-[hsl(var(--surface-border))]" />
diff --git a/src/pages/AdventureDetail.tsx b/src/pages/AdventureDetail.tsx
index 465295ffc..5c55de7ea 100644
--- a/src/pages/AdventureDetail.tsx
+++ b/src/pages/AdventureDetail.tsx
@@ -27,6 +27,7 @@ import { isDeadlinePast } from "@/lib/utils";
 import { stripLinks } from "@/lib/markdown";
 import { LivePill } from "@/components/LivePill";
 import { Breadcrumb } from "@/components/Breadcrumb";
+import { InlineProse } from "@/components/InlineProse";
 
 export const links: LinksFunction = () => [
   { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/jetbrains-mono-latin-400-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
@@ -110,7 +111,7 @@ const AdventureLevelLink = ({ level, adventureId }: AdventureLevelLinkProps): JS
   const descHtml = level.intro?.[0] ?? level.backstory?.[0];
   return (
     <Link
-      to={`/adventures/${adventureId}/levels/${level.id}`}
+      to={`/adventures/${adventureId}/levels/${level.id}/`}
       className="group card-glow relative rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
     >
       <div className="flex flex-wrap items-center gap-2 mb-3">
@@ -154,7 +155,7 @@ const AdventureDetail = (): JSX.Element => {
 
           <Breadcrumb
             items={[
-              { label: "Adventures", href: "/adventures" },
+              { label: "Adventures", href: "/adventures/" },
               { label: adventure.title },
             ]}
           />
@@ -180,7 +181,7 @@ const AdventureDetail = (): JSX.Element => {
               {isLive && <LivePill />}
               <TagChips tags={adventure.tags} />
             </div>
-            <p className="text-[hsl(var(--text-secondary))] leading-relaxed max-w-3xl md-inline" dangerouslySetInnerHTML={{ __html: adventure.story }} />
+            <InlineProse html={adventure.story} className="text-[hsl(var(--text-secondary))] leading-relaxed max-w-3xl" />
           </div>
 
           {/* Two-column layout */}
@@ -236,8 +237,10 @@ const AdventureDetail = (): JSX.Element => {
                 <CollapsibleSection id="backstory" title="The Story" defaultOpen={true}>
                   <div className="space-y-3">
                     {adventure.backstory.map((para, i) => (
-                      <p key={i} className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed md-inline"
-                        dangerouslySetInnerHTML={{ __html: para }}
+                      <InlineProse
+                        key={i}
+                        html={para}
+                        className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed"
                       />
                     ))}
                   </div>
@@ -262,8 +265,9 @@ const AdventureDetail = (): JSX.Element => {
                   </p>
                   <PersonNameLink name={adventure.contributor.name} url={adventure.contributor.url} />
                   {adventure.contributor.about && (
-                    <p className="mt-2 text-sm text-[hsl(var(--text-secondary))] leading-relaxed md-inline"
-                      dangerouslySetInnerHTML={{ __html: adventure.contributor.about }}
+                    <InlineProse
+                      html={adventure.contributor.about}
+                      className="mt-2 text-sm text-[hsl(var(--text-secondary))] leading-relaxed"
                     />
                   )}
                 </div>
diff --git a/src/pages/Adventures.tsx b/src/pages/Adventures.tsx
index 34db91150..d8650758c 100644
--- a/src/pages/Adventures.tsx
+++ b/src/pages/Adventures.tsx
@@ -1,32 +1,100 @@
 import type { JSX } from "react";
+import { Link } from "react-router";
 import type { MetaFunction } from "react-router";
+import { ArrowRight, BookOpen, GitFork, Laptop } from "lucide-react";
 import { Navbar } from "@/components/Navbar";
 import { Footer } from "@/components/Footer";
 import { PageHero } from "@/components/PageHero";
-import { ChallengesGrid } from "@/components/ChallengesGrid";
+import { AdventureCard } from "@/components/AdventureCard";
 import { ChallengeBuildersSection } from "@/components/ChallengeBuildersSection";
 import { CommunityLeaders } from "@/components/CommunityLeaders";
 import { BottomCTA } from "@/components/BottomCTA";
 import { SITE_URL, BRAND_NAME } from "@/data/constants";
+import { ADVENTURE_SUMMARIES } from "@/data/adventures/summaries";
 import { buildPageMeta } from "@/lib/meta";
 
 export const meta: MetaFunction = () =>
   buildPageMeta({
-    title: `Adventures - Hands-on open source challenges | ${BRAND_NAME}`,
-    description: `Explore all ${BRAND_NAME} adventures. Hands-on scenarios using real open source tools: OpenTelemetry, Argo CD, OpenTofu, GitHub Actions, and more.`,
-    url: `${SITE_URL}/adventures`,
+    title: `Adventures - Open Source Learning Paths | ${BRAND_NAME}`,
+    description: `Real-world scenarios, hands-on challenges, and practical knowledge you can apply, fork, and build on. Runs in GitHub Codespaces in a few clicks.`,
+    url: `${SITE_URL}/adventures/`,
   });
 
+const HOW_IT_WORKS = [
+  {
+    icon: <BookOpen size={22} aria-hidden="true" />,
+    title: "Pick a Scenario",
+    desc: "Each adventure is a self-contained story focused on one open source technology. Pick the difficulty that fits where you are and start from there.",
+  },
+  {
+    icon: <Laptop size={22} aria-hidden="true" />,
+    title: "Launch in Codespaces",
+    desc: "A pre-configured GitHub Codespace spins up with everything installed. No local setup, no Docker, no dependency conflicts. Ready in a few clicks.",
+  },
+  {
+    icon: <GitFork size={22} aria-hidden="true" />,
+    title: "Apply, Fork, and Build",
+    desc: "Complete real-world scenarios, bring the knowledge into your own projects, fork the challenge repo, and share your solutions with the community.",
+  },
+];
+
 const Adventures = (): JSX.Element => (
   <div className="min-h-screen bg-background">
     <Navbar />
     <main id="main-content">
       <PageHero
         eyebrow="Adventures"
-        title="Hands-on Open Source Challenges"
-        description="Real-world scenarios using tools like OpenTelemetry, Argo CD, OpenTofu, GitHub Actions, and more. Everything runs in your browser, no local setup required."
+        title="Real-World Scenarios. Practical Skills."
+        description="Hands-on challenges and practical knowledge you can apply, fork, and build on. Each adventure runs entirely in GitHub Codespaces, a working environment in a few clicks, no local setup needed."
+        primaryCta={{ label: "Browse All Challenges", href: "/challenges/" }}
       />
-      <ChallengesGrid />
+
+      {/* How Adventures Work */}
+      <section
+        aria-labelledby="how-it-works-heading"
+        className="bg-card py-16 px-6 md:px-16 border-y border-[hsl(var(--surface-border))]"
+      >
+        <div className="mx-auto max-w-6xl">
+          <h2 id="how-it-works-heading" className="text-xl font-bold text-foreground mb-8">
+            How Adventures Work
+          </h2>
+          <div className="grid gap-8 sm:grid-cols-3">
+            {HOW_IT_WORKS.map(({ icon, title, desc }) => (
+              <div key={title} className="flex gap-4">
+                <span className="mt-0.5 shrink-0 text-primary">{icon}</span>
+                <div>
+                  <p className="font-semibold text-foreground">{title}</p>
+                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* All Adventures */}
+      <section aria-labelledby="adventures-heading" className="py-24 px-6 md:px-16">
+        <div className="mx-auto max-w-6xl">
+          <div className="flex flex-wrap items-baseline justify-between gap-4 mb-8">
+            <h2 id="adventures-heading" className="text-2xl font-bold text-foreground">
+              All Adventures
+              <span className="ml-2 font-normal text-sm text-muted-foreground">
+                &middot; {ADVENTURE_SUMMARIES.length} {ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"}
+              </span>
+            </h2>
+            <Link to="/challenges/" className="btn-ghost inline-flex items-center gap-2 text-sm">
+              Filter challenges by technology
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
+            </Link>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {ADVENTURE_SUMMARIES.map((adventure) => (
+              <AdventureCard key={adventure.id} adventure={adventure} />
+            ))}
+          </div>
+        </div>
+      </section>
+
       <ChallengeBuildersSection
         aside={
           <CommunityLeaders
diff --git a/src/pages/CatchAll.tsx b/src/pages/CatchAll.tsx
index c0b6aec29..f73864e91 100644
--- a/src/pages/CatchAll.tsx
+++ b/src/pages/CatchAll.tsx
@@ -1,4 +1,4 @@
-// Catch-all route (*) — renders the same 404 UI.
+// Catch-all route (*): renders the same 404 UI.
 // RR7 requires each route to point to a unique file, so this wraps NotFound.
 export { meta } from "@/pages/NotFound";
 export { default } from "@/pages/NotFound";
diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
index 5a1334e94..e4a14175f 100644
--- a/src/pages/ChallengeDetail.tsx
+++ b/src/pages/ChallengeDetail.tsx
@@ -24,6 +24,7 @@ import { ChallengeShareLinks } from "@/components/ChallengeShareLinks";
 import { SITE_URL, BRAND_NAME, COMMUNITY_DISPLAY_NAME, COMMUNITY_URL } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
 import { isDeadlinePast } from "@/lib/utils";
+import { InlineProse } from "@/components/InlineProse";
 
 export const links: LinksFunction = () => [
   { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/jetbrains-mono-latin-400-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
@@ -122,9 +123,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
         {intro && intro.length > 0 && (
           <div className="space-y-3 mb-5 max-w-3xl">
             {intro.map((p, i) => (
-              <p key={i} className="text-[hsl(var(--text-secondary))] leading-relaxed md-inline"
-                dangerouslySetInnerHTML={{ __html: p }}
-              />
+              <InlineProse key={i} html={p} className="text-[hsl(var(--text-secondary))] leading-relaxed" />
             ))}
           </div>
         )}
@@ -169,9 +168,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
           {/* Audience */}
           {level.audience && (
             <CollapsibleSection id="audience" title="Best Suited For">
-              <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed md-inline"
-                dangerouslySetInnerHTML={{ __html: level.audience }}
-              />
+              <InlineProse html={level.audience} className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed" />
             </CollapsibleSection>
           )}
 
@@ -396,8 +393,8 @@ const ChallengeDetail = (): JSX.Element => {
           <Breadcrumb
             className="mb-10"
             items={[
-              { label: "Adventures", href: "/adventures" },
-              { label: adventure.title, href: `/adventures/${adventure.id}` },
+              { label: "Adventures", href: "/adventures/" },
+              { label: adventure.title, href: `/adventures/${adventure.id}/` },
               { label: level.name },
             ]}
           />
diff --git a/src/pages/Challenges.tsx b/src/pages/Challenges.tsx
index 756aa7c32..4a53d284a 100644
--- a/src/pages/Challenges.tsx
+++ b/src/pages/Challenges.tsx
@@ -1,17 +1,20 @@
-import { useState, type JSX } from "react";
-import { useParams } from "react-router";
+import { useState, useEffect, type JSX } from "react";
+import { useParams, useSearchParams, useNavigate } from "react-router";
 import type { MetaFunction, LinksFunction } from "react-router";
 import { Navbar } from "@/components/Navbar";
 import { Footer } from "@/components/Footer";
 import { PageHero } from "@/components/PageHero";
 import { BottomCTA } from "@/components/BottomCTA";
+import { ChallengeBuildersSection } from "@/components/ChallengeBuildersSection";
+import { CommunityLeaders } from "@/components/CommunityLeaders";
 import { FilteredLevelCard } from "@/components/FilteredLevelCard";
 import { AdventureCard } from "@/components/AdventureCard";
 import { StarterNudge } from "@/components/StarterNudge";
 import { ChallengeFilters, type Difficulty } from "@/components/ChallengeFilters";
-import { slugToTag, tagToSlug } from "@/data/adventures";
+import { DIFFICULTIES } from "@/data/adventures/filter-utils";
+import { slugToTag, tagToSlug } from "@/data/adventures/tag-utils";
 import { ADVENTURE_SUMMARIES, SUMMARY_TAGS } from "@/data/adventures/summaries";
-import { getLevelSummariesByFilters } from "@/data/adventures/filter-utils";
+import { getLevelSummariesByFilters, ALL_LEVEL_SUMMARIES } from "@/data/adventures/filter-utils";
 import { SITE_URL, BRAND_NAME } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
 
@@ -32,44 +35,88 @@ export const meta: MetaFunction = ({ params }) => {
     return buildPageMeta({
       title: `${tag} Challenges - ${BRAND_NAME}`,
       description: `Hands-on open source challenges using ${tag}. Practice in real-world scenarios directly in your browser.`,
-      url: `${SITE_URL}/challenges/${tagToSlug(tag)}`,
+      url: `${SITE_URL}/challenges/${tagToSlug(tag)}/`,
     });
   }
   return buildPageMeta({
     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`,
+    url: `${SITE_URL}/challenges/`,
   });
 };
 
-const ALL_LEVELS = ADVENTURE_SUMMARIES.flatMap((adventure) =>
-  adventure.levels.map((level) => ({
-    level,
-    adventureId: adventure.id,
-    adventureTitle: adventure.title,
-    ...(adventure.isLive ? { isLive: true as const } : {}),
-  }))
-);
-
 const Challenges = (): JSX.Element => {
   const { tag: tagSlug } = useParams<{ tag?: string }>();
-  const initialTag = tagSlug ? slugToTag(tagSlug) ?? null : null;
-
-  const [activeTopics, setActiveTopics] = useState<string[]>(initialTag ? [initialTag] : []);
-  const [activeDifficulty, setActiveDifficulty] = useState<Difficulty | null>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  // Safe default matches the prerendered HTML (no query string at build time).
+  // The effect below syncs to true after mount based on resolved filter state.
   const [hasFiltered, setHasFiltered] = useState(false);
 
+  const initialTag = tagSlug ? (slugToTag(tagSlug) ?? null) : null;
+
+  // ?topics= takes precedence over the path param so multi-tag state is clean.
+  // On a single-tag path (/challenges/:tag) with no ?topics=, derive from the path.
+  const topicsParam = searchParams.get("topics");
+  const activeTopics: string[] = topicsParam !== null
+    ? topicsParam.split(",").filter(Boolean).map((s) => slugToTag(s)).filter((t): t is string => t !== undefined)
+    : initialTag ? [initialTag] : [];
+
+  const difficultyParam = searchParams.get("difficulty");
+  const activeDifficulty: Difficulty | null =
+    (DIFFICULTIES as readonly string[]).includes(difficultyParam ?? "")
+      ? (difficultyParam as Difficulty)
+      : null;
+
   const isFiltered = activeTopics.length > 0 || activeDifficulty !== null;
-  const filteredLevels = isFiltered ? getLevelSummariesByFilters(activeTopics, activeDifficulty) : ALL_LEVELS;
+  const filteredLevels = isFiltered ? getLevelSummariesByFilters(activeTopics, activeDifficulty) : ALL_LEVEL_SUMMARIES;
+
+  // Trigger the aria-live announcement after mount. isFiltered is intentionally
+  // read at mount time only so an unresolvable ?topics= slug stays silent.
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { if (isFiltered) setHasFiltered(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Difficulty always updates via setSearchParams, no path change, no remount, focus held.
   const handleDifficultyChange = (diff: Difficulty | null): void => {
     setHasFiltered(true);
-    setActiveDifficulty(diff);
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (diff) next.set("difficulty", diff);
+        else next.delete("difficulty");
+        return next;
+      },
+      { replace: true, preventScrollReset: true }
+    );
   };
 
+  // All topic changes update only the query string, pathname never changes,
+  // so ScrollToTop never fires and the user stays at the same scroll position.
+  // Exception: when on a path-param route (/challenges/:tag/) and clearing all
+  // topics, we must navigate to /challenges/ because the path param would
+  // otherwise continue to drive the filter regardless of query params.
   const handleTopicsChange = (topics: string[]): void => {
     setHasFiltered(true);
-    setActiveTopics(topics);
+    if (topics.length === 0 && tagSlug) {
+      const params = new URLSearchParams();
+      const diff = searchParams.get("difficulty");
+      if (diff) params.set("difficulty", diff);
+      const qs = params.toString();
+      navigate(`/challenges/${qs ? `?${qs}` : ""}`, { replace: true, preventScrollReset: true });
+      return;
+    }
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (topics.length > 0) {
+          next.set("topics", topics.map(tagToSlug).join(","));
+        } else {
+          next.delete("topics");
+        }
+        return next;
+      },
+      { replace: true, preventScrollReset: true }
+    );
   };
 
   const filterKey = activeTopics.join(",") + (activeDifficulty ?? "");
@@ -81,7 +128,7 @@ const Challenges = (): JSX.Element => {
         <PageHero
           eyebrow="Challenges"
           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."
+          description="Each adventure focuses on one open source technology, with challenges at different difficulty levels. Pick your adventure, work through real-world scenarios hands-on, and share what you learn with the community."
         />
         <section className="py-24 px-6 md:px-16">
           <div className="mx-auto max-w-6xl">
@@ -99,18 +146,18 @@ const Challenges = (): JSX.Element => {
               {hasFiltered
                 ? isFiltered
                   ? `Showing ${filteredLevels.length} ${filteredLevels.length === 1 ? "challenge" : "challenges"}${activeDifficulty ? ` · ${activeDifficulty}` : ""}${activeTopics.length > 0 ? ` · ${activeTopics.join(", ")}` : ""}`
-                  : `Filters cleared, showing all ${ADVENTURE_SUMMARIES.length} adventures`
+                  : `Filters cleared, showing ${ADVENTURE_SUMMARIES.length} ${ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"} · ${ALL_LEVEL_SUMMARIES.length} ${ALL_LEVEL_SUMMARIES.length === 1 ? "challenge" : "challenges"}`
                 : ""}
             </span>
 
             {isFiltered ? (
               <>
-                <h2 className="animate-fade-up mb-6 text-lg font-semibold text-foreground">
-                  {activeTopics.length > 0 ? activeTopics.join(", ") : activeDifficulty} Challenges
-                  <span className="ml-2 font-normal text-sm text-muted-foreground">
-                    &middot; {filteredLevels.length} {filteredLevels.length !== 1 ? "results" : "result"}
-                  </span>
-                </h2>
+                <h2 className="sr-only">Filtered Challenges</h2>
+                <p className="animate-fade-up mb-6 font-sans text-sm font-medium tracking-wide text-muted-foreground">
+                  {filteredLevels.length} {filteredLevels.length === 1 ? "challenge" : "challenges"}
+                  {activeDifficulty && ` · ${activeDifficulty}`}
+                  {activeTopics.length > 0 && ` · ${activeTopics.join(", ")}`}
+                </p>
                 <div key={filterKey} className="animate-fade-up grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                   {filteredLevels.map(({ level, adventureId, adventureTitle, isLive }) => (
                     <FilteredLevelCard
@@ -125,12 +172,10 @@ const Challenges = (): JSX.Element => {
               </>
             ) : (
               <>
-                <h2 className="mb-6 text-lg font-semibold text-foreground">
-                  All Adventures
-                  <span className="ml-2 font-normal text-sm text-muted-foreground">
-                    &middot; {ADVENTURE_SUMMARIES.length} {ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"}, {ALL_LEVELS.length} {ALL_LEVELS.length === 1 ? "challenge" : "challenges"}
-                  </span>
-                </h2>
+                <h2 className="sr-only">All Challenges</h2>
+                <p className="mb-6 font-sans text-sm font-medium tracking-wide text-muted-foreground">
+                  {ADVENTURE_SUMMARIES.length} {ADVENTURE_SUMMARIES.length === 1 ? "adventure" : "adventures"} · {ALL_LEVEL_SUMMARIES.length} {ALL_LEVEL_SUMMARIES.length === 1 ? "challenge" : "challenges"}
+                </p>
                 <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                   {ADVENTURE_SUMMARIES.map((adventure) => (
                     <AdventureCard key={adventure.id} adventure={adventure} />
@@ -140,6 +185,13 @@ const Challenges = (): JSX.Element => {
             )}
           </div>
         </section>
+        <ChallengeBuildersSection
+          aside={
+            <CommunityLeaders
+              sections={["top-challenge-solvers", "challenge-grand-builders", "challenge-builders"]}
+            />
+          }
+        />
         <BottomCTA />
       </main>
       <Footer />
diff --git a/src/pages/Contribute.tsx b/src/pages/Contribute.tsx
index 5da329056..526e32617 100644
--- a/src/pages/Contribute.tsx
+++ b/src/pages/Contribute.tsx
@@ -63,8 +63,8 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed flex-1">
                     Take on a hands-on challenge, debug a broken environment, and learn by doing. Tell us what worked, what confused you, and where you got stuck. Your experience helps us improve the challenges.
                   </p>
-                  <Link to="/adventures" className={extLink}>
-                    Browse adventures
+                  <Link to="/challenges/" className={extLink}>
+                    Browse challenges
                   </Link>
                 </div>
 
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index ed143798d..342a686fe 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -11,17 +11,17 @@ const links = [
   {
     label: "Handbook",
     desc: "Your guide to getting started, posting, and growing in the community.",
-    to: "/handbook",
+    to: "/handbook/",
   },
   {
-    label: "Adventures",
+    label: "Challenges",
     desc: "Browse hands-on challenges with real-world scenarios.",
-    to: "/adventures",
+    to: "/challenges/",
   },
   {
     label: "About",
     desc: `Learn what ${BRAND_NAME} is and who it's for.`,
-    to: "/about",
+    to: "/about/",
   },
 ];
 
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
index 79e11e1f8..3ae98f9c6 100644
--- a/src/pages/Privacy.tsx
+++ b/src/pages/Privacy.tsx
@@ -19,8 +19,8 @@ export const meta: MetaFunction = () =>
   });
 
 const Privacy = (): JSX.Element => {
-  const heading2 = "text-xl font-heading font-semibold text-foreground mt-10 mb-3";
-  const heading3 = "text-lg font-heading font-semibold text-foreground mt-6 mb-2";
+  const heading2 = "text-xl font-heading font-bold text-foreground mt-10 mb-3";
+  const heading3 = "text-lg font-heading font-bold text-foreground mt-6 mb-2";
   const paragraph = "text-sm text-muted-foreground leading-relaxed mb-4";
   const list = "list-disc list-inside space-y-1 text-sm text-muted-foreground mb-4 ml-2";
 
diff --git a/src/root.tsx b/src/root.tsx
index a6501edc2..55f5185a5 100644
--- a/src/root.tsx
+++ b/src/root.tsx
@@ -8,7 +8,7 @@ export const links: LinksFunction = () => [
   // Inter 400–700: body text, semibold labels, bold headings used on every page.
   // Syne 700: all h1–h6 via the @layer base rule in index.css.
   // Latin-only subsets are always needed for English content and never generate "preloaded but not used" warnings.
-  // font-display: optional requires preloads to succeed — without them, the optional window expires
+  // font-display: optional requires preloads to succeed. Without them, the optional window expires
   // on throttled connections before fonts are discovered, so the browser falls back to system fonts permanently.
   { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/inter-latin-400-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
   { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/inter-latin-500-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
@@ -30,7 +30,7 @@ const themeScript = `(function(){var t=localStorage.getItem("theme");if(t==="lig
 const gtagBootstrap = `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('consent','default',{analytics_storage:'denied',ad_storage:'denied',ad_user_data:'denied',ad_personalization:'denied'});`;
 
 // Injected via DOM (not JSX) so React's reconciler never touches a processed
-// speculationrules script — modifying one after the browser has read it emits
+// speculationrules script. Modifying one after the browser has read it emits
 // "Inline speculation rules cannot currently be modified after they are processed."
 const SPECULATION_RULES = `{"prefetch":[{"source":"document","where":{"href_matches":["/adventures/","/challenges/"]},"eagerness":"moderate"}]}`;
 
diff --git a/src/routes.ts b/src/routes.ts
index 957d4ff56..386a109a4 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,8 +6,7 @@ export default [
     route("adventures", "pages/Adventures.tsx"),
     route("adventures/:id", "pages/AdventureDetail.tsx"),
     route("adventures/:id/levels/:levelId", "pages/ChallengeDetail.tsx"),
-    route("challenges", "pages/Challenges.tsx", { id: "challenges" }),
-    route("challenges/:tag", "pages/Challenges.tsx", { id: "challenges-tag" }),
+    route("challenges/:tag?", "pages/Challenges.tsx", { id: "challenges" }),
     route("contribute", "pages/Contribute.tsx"),
     route("sponsors", "pages/Sponsors.tsx"),
     route("about", "pages/About.tsx"),
diff --git a/src/test/adventureCard.test.tsx b/src/test/adventureCard.test.tsx
index 7f1c0a9bb..65b5ba4f2 100644
--- a/src/test/adventureCard.test.tsx
+++ b/src/test/adventureCard.test.tsx
@@ -23,7 +23,7 @@ describe("AdventureCard", () => {
         <AdventureCard adventure={summary} />
       </MemoryRouter>
     );
-    const outerLink = container.querySelector("a[href='/adventures/test-adventure']");
+    const outerLink = container.querySelector("a[href='/adventures/test-adventure/']");
     expect(outerLink).not.toBeNull();
     expect(outerLink?.querySelectorAll("a")).toHaveLength(0);
   });
@@ -34,7 +34,7 @@ describe("AdventureCard", () => {
         <AdventureCard adventure={summary} />
       </MemoryRouter>
     );
-    // Raw markdown syntax must appear as-is — AdventureCard does not load react-markdown.
+    // Raw markdown syntax must appear as-is. AdventureCard does not load react-markdown.
     // The generator warns at build time if a story contains markdown, so this tests the
     // fallback rendering path for any story that slips through with syntax characters.
     expect(container.querySelector("p.line-clamp-2")?.textContent).toContain(
diff --git a/src/test/adventureDetail.test.tsx b/src/test/adventureDetail.test.tsx
index 10dc287fc..e995e7cc0 100644
--- a/src/test/adventureDetail.test.tsx
+++ b/src/test/adventureDetail.test.tsx
@@ -160,7 +160,7 @@ describe('AdventureLevelLink', () => {
         </MemoryRouter>
       </ConsentProvider>
     );
-    // Old learnings overflow pattern removed — must never appear
+    // Old learnings overflow pattern removed. Must never appear
     expect(screen.queryByText(/\+\d+ more/)).toBeNull();
   });
 
@@ -177,7 +177,7 @@ describe('AdventureLevelLink', () => {
     const startLinks = screen.getAllByText(/^Start Challenge/);
     adventure.levels.forEach((lvl, i) => {
       const card = startLinks[i].closest('a');
-      expect(card?.getAttribute('href')).toBe(`/adventures/${adventure.id}/levels/${lvl.id}`);
+      expect(card?.getAttribute('href')).toBe(`/adventures/${adventure.id}/levels/${lvl.id}/`);
     });
   });
 });
diff --git a/src/test/challenges.test.tsx b/src/test/challenges.test.tsx
index 92bcd2394..4a72b336e 100644
--- a/src/test/challenges.test.tsx
+++ b/src/test/challenges.test.tsx
@@ -1,23 +1,25 @@
 import { describe, it, expect } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { MemoryRouter, Routes, Route } from "react-router";
+import { createMemoryRouter, RouterProvider } from "react-router";
 import Challenges from "@/pages/Challenges";
 import { ADVENTURES } from "@/data/adventures";
 import { ADVENTURE_SUMMARIES } from "@/data/adventures/summaries";
+import { tagToSlug } from "@/data/adventures/tag-utils";
 
 const allTags = Array.from(new Set(ADVENTURES.flatMap((a) => a.tags))).sort();
 const firstTag = allTags[0];
+const firstTagSlug = tagToSlug(firstTag);
+const secondTag = allTags[1];
+const secondTagSlug = tagToSlug(secondTag);
 const totalChallenges = ADVENTURES.flatMap((a) => a.levels).length;
 
-function renderChallenges(initialPath = "/challenges"): ReturnType<typeof render> {
-  return render(
-    <MemoryRouter initialEntries={[initialPath]}>
-      <Routes>
-        <Route path="/challenges" element={<Challenges />} />
-        <Route path="/challenges/:tag" element={<Challenges />} />
-      </Routes>
-    </MemoryRouter>
+function renderChallenges(initialPath = "/challenges"): { router: ReturnType<typeof createMemoryRouter> } & ReturnType<typeof render> {
+  const router = createMemoryRouter(
+    [{ path: "/challenges/:tag?", element: <Challenges /> }],
+    { initialEntries: [initialPath] }
   );
+  const result = render(<RouterProvider router={router} />);
+  return { ...result, router };
 }
 
 describe("Challenges - default (All) state", () => {
@@ -25,7 +27,7 @@ describe("Challenges - default (All) state", () => {
     renderChallenges();
     ADVENTURE_SUMMARIES.forEach((adventure) => {
       expect(
-        screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+        screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
       ).toBe(true);
     });
   });
@@ -38,23 +40,26 @@ describe("Challenges - default (All) state", () => {
     expect(levelLinks.length).toBe(0);
   });
 
-  it("heading reads 'All Adventures'", () => {
+  it("shows adventure and challenge counts when unfiltered", () => {
     renderChallenges();
-    expect(screen.getByRole("heading", { name: /All Adventures/i })).toBeTruthy();
+    const countLine = screen.getByText(
+      new RegExp(`${ADVENTURE_SUMMARIES.length}.*adventure.*${totalChallenges}.*challenge`)
+    );
+    expect(countLine).toBeTruthy();
   });
 
-  it("heading includes the adventure count", () => {
+  it("count line includes the adventure count", () => {
     renderChallenges();
-    const heading = screen.getByRole("heading", { name: /All Adventures/i });
-    expect(heading.textContent).toContain(String(ADVENTURE_SUMMARIES.length));
-    expect(heading.textContent).toContain("adventure");
+    const countLine = screen.getByText(new RegExp(`${ADVENTURE_SUMMARIES.length}.*adventure`));
+    expect(countLine.textContent).toContain(String(ADVENTURE_SUMMARIES.length));
+    expect(countLine.textContent).toContain("adventure");
   });
 
-  it("heading includes the total challenge count", () => {
+  it("count line includes the total challenge count", () => {
     renderChallenges();
-    const heading = screen.getByRole("heading", { name: /All Adventures/i });
-    expect(heading.textContent).toContain(String(totalChallenges));
-    expect(heading.textContent).toContain("challenge");
+    const countLine = screen.getByText(new RegExp(`${ADVENTURE_SUMMARIES.length}.*adventure`));
+    expect(countLine.textContent).toContain(String(totalChallenges));
+    expect(countLine.textContent).toContain("challenge");
   });
 
   it("renders a filter button for every unique tag", () => {
@@ -82,9 +87,13 @@ describe("Challenges - tag filter", () => {
   it("replaces adventure cards with level cards on tag selection", () => {
     renderChallenges();
     fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    // ChallengeBuildersSection always renders adventure links regardless of filter
+    // state, so exclude that persistent section from this assertion.
     ADVENTURE_SUMMARIES.forEach((adventure) => {
       expect(
-        screen.queryAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+        screen.queryAllByRole("link").some(
+          (l) => l.getAttribute("href") === `/adventures/${adventure.id}/` && !l.closest("#challenge-builders")
+        )
       ).toBe(false);
     });
   });
@@ -122,7 +131,7 @@ describe("Challenges - deselecting a tag", () => {
     fireEvent.click(btn);
     ADVENTURE_SUMMARIES.forEach((adventure) => {
       expect(
-        screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+        screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
       ).toBe(true);
     });
   });
@@ -144,3 +153,113 @@ describe("Challenges - deselecting a tag", () => {
     expect(region!.textContent).toContain("adventures");
   });
 });
+
+describe("Challenges - URL state", () => {
+  it("single tag selection sets ?topics= without changing pathname", () => {
+    const { router } = renderChallenges();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    expect(router.state.location.pathname).toBe("/challenges");
+    expect(new URLSearchParams(router.state.location.search).get("topics")).toBe(firstTagSlug);
+  });
+
+  it("second tag selection adds to ?topics= without changing pathname", () => {
+    const { router } = renderChallenges();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    fireEvent.click(screen.getByRole("button", { name: secondTag }));
+    expect(router.state.location.pathname).toBe("/challenges");
+    const topics = new URLSearchParams(router.state.location.search).get("topics")!.split(",");
+    expect(topics).toContain(firstTagSlug);
+    expect(topics).toContain(secondTagSlug);
+  });
+
+  it("deselecting one tag leaves the other in ?topics=", () => {
+    const { router } = renderChallenges();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    fireEvent.click(screen.getByRole("button", { name: secondTag }));
+    fireEvent.click(screen.getByRole("button", { name: secondTag }));
+    expect(router.state.location.pathname).toBe("/challenges");
+    expect(new URLSearchParams(router.state.location.search).get("topics")).toBe(firstTagSlug);
+  });
+
+  it("deselecting all tags removes ?topics= param", () => {
+    const { router } = renderChallenges();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    expect(router.state.location.pathname).toBe("/challenges");
+    expect(new URLSearchParams(router.state.location.search).get("topics")).toBeNull();
+  });
+
+  it("difficulty selection appends ?difficulty= without changing path", () => {
+    const { router } = renderChallenges(`/challenges/${firstTagSlug}`);
+    const diffBtn = screen.getByRole("button", { name: "Beginner" });
+    fireEvent.click(diffBtn);
+    expect(router.state.location.pathname).toBe(`/challenges/${firstTagSlug}`);
+    expect(new URLSearchParams(router.state.location.search).get("difficulty")).toBe("Beginner");
+  });
+
+  it("initialising from a tag path URL pre-selects that tag", () => {
+    renderChallenges(`/challenges/${firstTagSlug}`);
+    expect(screen.getByRole("button", { name: firstTag }).getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("initialising from ?topics= pre-selects multiple tags", () => {
+    renderChallenges(`/challenges?topics=${firstTagSlug},${secondTagSlug}`);
+    expect(screen.getByRole("button", { name: firstTag }).getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByRole("button", { name: secondTag }).getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("aria-live announces active filter when URL already has ?topics= on mount", () => {
+    const { container } = renderChallenges(`/challenges?topics=${firstTagSlug}`);
+    const region = container.querySelector("[aria-live]");
+    expect(region!.textContent).toMatch(/challenge/);
+  });
+
+  it("aria-live announces active filter when URL already has a tag path on mount", () => {
+    const { container } = renderChallenges(`/challenges/${firstTagSlug}`);
+    const region = container.querySelector("[aria-live]");
+    expect(region!.textContent).toMatch(/challenge/);
+  });
+
+  it("clicking All Tools on a path-param route navigates to /challenges/ and clears the filter", () => {
+    const { router } = renderChallenges(`/challenges/${firstTagSlug}`);
+    expect(screen.getByRole("button", { name: firstTag }).getAttribute("aria-pressed")).toBe("true");
+    fireEvent.click(screen.getByRole("button", { name: "All Tools" }));
+    expect(router.state.location.pathname).toBe("/challenges/");
+    expect(new URLSearchParams(router.state.location.search).get("topics")).toBeNull();
+  });
+
+  it("clicking All Tools on a path-param route with difficulty preserves difficulty and navigates away", () => {
+    const { router } = renderChallenges(`/challenges/${firstTagSlug}?difficulty=Beginner`);
+    fireEvent.click(screen.getByRole("button", { name: "All Tools" }));
+    expect(router.state.location.pathname).toBe("/challenges/");
+    expect(new URLSearchParams(router.state.location.search).get("difficulty")).toBe("Beginner");
+    expect(new URLSearchParams(router.state.location.search).get("topics")).toBeNull();
+  });
+
+  it("does not announce 'filters cleared' when URL contains an unresolvable topics slug", () => {
+    const { container } = renderChallenges("/challenges?topics=__invalid_slug__");
+    const region = container.querySelector("[aria-live]");
+    expect(region!.textContent).toBe("");
+  });
+});
+
+describe("Challenges - results heading", () => {
+  it("renders an 'All Challenges' heading in the unfiltered state", () => {
+    renderChallenges();
+    expect(screen.getByRole("heading", { level: 2, name: "All Challenges" })).toBeTruthy();
+  });
+
+  it("renders a 'Filtered Challenges' heading when a filter is active", () => {
+    renderChallenges();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    expect(screen.getByRole("heading", { level: 2, name: "Filtered Challenges" })).toBeTruthy();
+  });
+
+  it("heading switches from 'All Challenges' to 'Filtered Challenges' when a tag is selected", () => {
+    renderChallenges();
+    expect(screen.getByRole("heading", { level: 2, name: "All Challenges" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: firstTag }));
+    expect(screen.queryByRole("heading", { level: 2, name: "All Challenges" })).toBeNull();
+    expect(screen.getByRole("heading", { level: 2, name: "Filtered Challenges" })).toBeTruthy();
+  });
+});
diff --git a/src/test/challengesGrid.test.tsx b/src/test/challengesGrid.test.tsx
index 8bfaa2367..98bed5a0e 100644
--- a/src/test/challengesGrid.test.tsx
+++ b/src/test/challengesGrid.test.tsx
@@ -3,9 +3,12 @@ import { render, screen, fireEvent, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { ChallengesGrid } from "@/components/ChallengesGrid";
 import { ADVENTURES } from "@/data/adventures";
+import { ADVENTURE_SUMMARIES } from "@/data/adventures/summaries";
+import { ALL_LEVEL_SUMMARIES, getLevelSummariesByFilters } from "@/data/adventures/filter-utils";
 
 const allTags = Array.from(new Set(ADVENTURES.flatMap((a) => a.tags))).sort();
 const firstTag = allTags[0];
+const secondTag = allTags[1];
 const adventuresWithFirstTag = ADVENTURES.filter((a) => a.tags.includes(firstTag));
 
 const renderGrid = (): ReturnType<typeof render> =>
@@ -21,7 +24,7 @@ describe("ChallengesGrid", () => {
       renderGrid();
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(true);
       });
     });
@@ -29,7 +32,7 @@ describe("ChallengesGrid", () => {
     it("links each adventure card to /adventures/:id", () => {
       renderGrid();
       ADVENTURES.forEach((adventure) => {
-        const link = screen.getAllByRole("link").find((l) => l.getAttribute("href") === `/adventures/${adventure.id}`);
+        const link = screen.getAllByRole("link").find((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`);
         expect(link).toBeTruthy();
       });
     });
@@ -75,14 +78,14 @@ describe("ChallengesGrid", () => {
       fireEvent.click(screen.getByRole("button", { name: firstTag }));
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.queryAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.queryAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(false);
       });
       adventuresWithFirstTag.forEach((adventure) => {
         adventure.levels.forEach((level) => {
           expect(
             screen.queryAllByRole("link").some(
-              (l) => l.getAttribute("href") === `/adventures/${adventure.id}/levels/${level.id}`
+              (l) => l.getAttribute("href") === `/adventures/${adventure.id}/levels/${level.id}/`
             )
           ).toBe(true);
         });
@@ -95,7 +98,7 @@ describe("ChallengesGrid", () => {
       adventuresWithFirstTag.forEach((adventure) => {
         adventure.levels.forEach((level) => {
           const link = screen.queryAllByRole("link").find(
-            (l) => l.getAttribute("href") === `/adventures/${adventure.id}/levels/${level.id}`
+            (l) => l.getAttribute("href") === `/adventures/${adventure.id}/levels/${level.id}/`
           );
           expect(link).toBeTruthy();
         });
@@ -105,13 +108,34 @@ describe("ChallengesGrid", () => {
     it("shows a count and tag label when a tag is active", () => {
       renderGrid();
       fireEvent.click(screen.getByRole("button", { name: firstTag }));
-      expect(screen.getByText((text) => text.includes("challenge") && text.includes(firstTag))).toBeTruthy();
+      expect(screen.getAllByText((text) => text.includes("challenge") && text.includes(firstTag)).length).toBeGreaterThan(0);
     });
 
-    it("renders an aria-live region when a tag is active", () => {
+    it("announces challenge count and active tag in the live region", () => {
       const { container } = renderGrid();
       fireEvent.click(screen.getByRole("button", { name: firstTag }));
-      expect(container.querySelector('[aria-live="polite"]')).toBeTruthy();
+      const region = container.querySelector("[aria-live]");
+      expect(region!.textContent).toContain("challenge");
+      expect(region!.textContent).toContain(firstTag);
+    });
+
+    it("announces challenge count and active difficulty in the live region", () => {
+      const { container } = renderGrid();
+      const group = container.querySelector('[role="group"][aria-label="Filter by difficulty"]') as HTMLElement;
+      fireEvent.click(within(group).getByRole("button", { name: "Beginner" }));
+      const region = container.querySelector("[aria-live]");
+      expect(region!.textContent).toContain("challenge");
+      expect(region!.textContent).toContain("Beginner");
+    });
+
+    it("announces the full Challenges.tsx format when two topics are active", () => {
+      const { container } = renderGrid();
+      fireEvent.click(screen.getByRole("button", { name: firstTag }));
+      fireEvent.click(screen.getByRole("button", { name: secondTag }));
+      const count = getLevelSummariesByFilters([firstTag, secondTag], null).length;
+      const expectedText = `Showing ${count} ${count === 1 ? "challenge" : "challenges"} · ${firstTag}, ${secondTag}`;
+      const region = container.querySelector("[aria-live]");
+      expect(region!.textContent).toBe(expectedText);
     });
   });
 
@@ -123,7 +147,7 @@ describe("ChallengesGrid", () => {
       fireEvent.click(btn);
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(true);
       });
     });
@@ -136,7 +160,7 @@ describe("ChallengesGrid", () => {
       expect(btn.getAttribute("aria-pressed")).toBe("false");
     });
 
-    it("announces filter cleared after deselecting", () => {
+    it("announces filter cleared with adventure and challenge counts after deselecting", () => {
       const { container } = renderGrid();
       const btn = screen.getByRole("button", { name: firstTag });
       fireEvent.click(btn);
@@ -144,6 +168,8 @@ describe("ChallengesGrid", () => {
       const region = container.querySelector("[aria-live]");
       expect(region).toBeTruthy();
       expect(region!.textContent).toContain("Filters cleared");
+      expect(region!.textContent).toMatch(new RegExp(`${ADVENTURE_SUMMARIES.length}.*adventure`));
+      expect(region!.textContent).toMatch(new RegExp(`${ALL_LEVEL_SUMMARIES.length}.*challenge`));
     });
   });
 
@@ -186,7 +212,7 @@ describe("ChallengesGrid", () => {
       fireEvent.click(within(group).getByRole("button", { name: "Beginner" }));
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.queryAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.queryAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(false);
       });
     });
@@ -198,7 +224,7 @@ describe("ChallengesGrid", () => {
       fireEvent.click(within(group).getByRole("button", { name: "All Levels" }));
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(true);
       });
     });
@@ -211,7 +237,7 @@ describe("ChallengesGrid", () => {
       fireEvent.click(btn);
       ADVENTURES.forEach((adventure) => {
         expect(
-          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}`)
+          screen.getAllByRole("link").some((l) => l.getAttribute("href") === `/adventures/${adventure.id}/`)
         ).toBe(true);
       });
     });
diff --git a/src/test/discussionSection.test.tsx b/src/test/discussionSection.test.tsx
index 9ad997ab5..257bf4617 100644
--- a/src/test/discussionSection.test.tsx
+++ b/src/test/discussionSection.test.tsx
@@ -117,7 +117,7 @@ describe("DiscussionSection - posts state", () => {
 });
 
 // ---------------------------------------------------------------------------
-// Age display — hook computes ages; component renders the string it receives
+// Age display: hook computes ages; component renders the string it receives
 // ---------------------------------------------------------------------------
 
 describe("DiscussionSection - age display", () => {
@@ -132,7 +132,7 @@ describe("DiscussionSection - age display", () => {
 });
 
 // ---------------------------------------------------------------------------
-// File content regressions — component must delegate to the hook
+// File content regressions: component must delegate to the hook
 // ---------------------------------------------------------------------------
 
 describe("DiscussionSection - file content regressions", () => {
diff --git a/src/test/discussionUtils.test.ts b/src/test/discussionUtils.test.ts
index a82bf0575..dd0804b33 100644
--- a/src/test/discussionUtils.test.ts
+++ b/src/test/discussionUtils.test.ts
@@ -46,7 +46,7 @@ describe("displaySnippet", () => {
     const post = makePost({
       challengeSolved: true,
       cooked:
-        "Done.— CERTIFICATE START —\ncert content\n— CERTIFICATE END —",
+        "Done.\u2014 CERTIFICATE START \u2014\ncert content\n\u2014 CERTIFICATE END \u2014",
     });
     expect(displaySnippet(post)).toBe("Done.");
   });
diff --git a/src/test/filterUtils.test.ts b/src/test/filterUtils.test.ts
index 640332cd7..56389a148 100644
--- a/src/test/filterUtils.test.ts
+++ b/src/test/filterUtils.test.ts
@@ -1,18 +1,38 @@
 import { describe, it, expect } from "vitest";
-import { getLevelSummariesByFilters } from "@/data/adventures/filter-utils";
+import { getLevelSummariesByFilters, ALL_LEVEL_SUMMARIES } from "@/data/adventures/filter-utils";
 import { ADVENTURE_SUMMARIES } from "@/data/adventures/summaries";
 
 const allLevels = ADVENTURE_SUMMARIES.flatMap((a) => a.levels);
 const allDifficulties = Array.from(new Set(allLevels.map((l) => l.difficulty)));
 const firstTag = Array.from(new Set(ADVENTURE_SUMMARIES.flatMap((a) => a.tags))).sort()[0];
 
+describe("ALL_LEVEL_SUMMARIES", () => {
+  it("contains every level across all adventures", () => {
+    const allLevelCount = ADVENTURE_SUMMARIES.flatMap((a) => a.levels).length;
+    expect(ALL_LEVEL_SUMMARIES.length).toBe(allLevelCount);
+  });
+
+  it("each entry has adventureId, adventureTitle, and level", () => {
+    ALL_LEVEL_SUMMARIES.forEach((item) => {
+      expect(item.adventureId).toBeTruthy();
+      expect(item.adventureTitle).toBeTruthy();
+      expect(item.level).toBeTruthy();
+      expect(item.level.id).toBeTruthy();
+    });
+  });
+
+  it("matches getLevelSummariesByFilters([], null)", () => {
+    expect(ALL_LEVEL_SUMMARIES).toEqual(getLevelSummariesByFilters([], null));
+  });
+});
+
 describe("getLevelSummariesByFilters", () => {
   it("returns all levels across all adventures when no filters are active", () => {
     const result = getLevelSummariesByFilters([], null);
     expect(result.length).toBe(allLevels.length);
   });
 
-  it("filters by a single tag using AND semantics", () => {
+  it("filters by a single tag", () => {
     const result = getLevelSummariesByFilters([firstTag], null);
     const expected = ADVENTURE_SUMMARIES
       .filter((a) => a.tags.includes(firstTag))
@@ -20,19 +40,25 @@ describe("getLevelSummariesByFilters", () => {
     expect(result.length).toBe(expected.length);
   });
 
-  it("returns only levels from adventures that include ALL selected tags", () => {
-    const tagsWithMultiple = ADVENTURE_SUMMARIES.find((a) => a.tags.length >= 2);
-    if (!tagsWithMultiple) return;
-    const [t1, t2] = tagsWithMultiple.tags;
+  it("returns levels from adventures that match ANY selected tag (OR semantics)", () => {
+    const sortedTags = Array.from(new Set(ADVENTURE_SUMMARIES.flatMap((a) => a.tags))).sort();
+    const [t1, t2] = sortedTags;
     const result = getLevelSummariesByFilters([t1, t2], null);
+    const matchingIds = new Set(
+      ADVENTURE_SUMMARIES
+        .filter((a) => a.tags.includes(t1) || a.tags.includes(t2))
+        .map((a) => a.id)
+    );
     result.forEach(({ adventureId }) => {
-      const adventure = ADVENTURE_SUMMARIES.find((a) => a.id === adventureId)!;
-      expect(adventure.tags).toContain(t1);
-      expect(adventure.tags).toContain(t2);
+      expect(matchingIds.has(adventureId)).toBe(true);
     });
+    const expectedCount = ADVENTURE_SUMMARIES
+      .filter((a) => a.tags.includes(t1) || a.tags.includes(t2))
+      .flatMap((a) => a.levels).length;
+    expect(result.length).toBe(expectedCount);
   });
 
-  it("returns empty array when no adventure matches all selected tags", () => {
+  it("returns empty array when no adventure matches any selected tag", () => {
     const result = getLevelSummariesByFilters(["__nonexistent_tag__"], null);
     expect(result.length).toBe(0);
   });
diff --git a/src/test/filteredLevelCard.test.tsx b/src/test/filteredLevelCard.test.tsx
index 9c707e2e1..9d614ce9b 100644
--- a/src/test/filteredLevelCard.test.tsx
+++ b/src/test/filteredLevelCard.test.tsx
@@ -52,13 +52,13 @@ describe("FilteredLevelCard - link", () => {
   it("wraps the card in a link to the correct level URL", () => {
     renderCard();
     const link = screen.getByRole("link");
-    expect(link.getAttribute("href")).toBe("/adventures/adventure-01/levels/beginner");
+    expect(link.getAttribute("href")).toBe("/adventures/adventure-01/levels/beginner/");
   });
 
   it("uses adventureId and level.id to build the href", () => {
     renderCard(LEVEL, "my-adventure", "My Adventure");
     const link = screen.getByRole("link");
-    expect(link.getAttribute("href")).toBe("/adventures/my-adventure/levels/beginner");
+    expect(link.getAttribute("href")).toBe("/adventures/my-adventure/levels/beginner/");
   });
 });
 
diff --git a/src/test/footer.test.tsx b/src/test/footer.test.tsx
index 0415f8721..7b9364b7d 100644
--- a/src/test/footer.test.tsx
+++ b/src/test/footer.test.tsx
@@ -26,28 +26,28 @@ describe("Footer - Explore nav", () => {
     expect(screen.getByRole("navigation", { name: "Explore" })).toBeTruthy();
   });
 
-  it("has an Adventures link pointing to /adventures", () => {
+  it("has a Challenges link pointing to /challenges", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Explore" });
-    expect(within(nav).getByRole("link", { name: "Adventures" }).getAttribute("href")).toBe("/adventures");
+    expect(within(nav).getByRole("link", { name: "Challenges" }).getAttribute("href")).toBe("/challenges/");
   });
 
   it("has a Handbook link pointing to /handbook", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Explore" });
-    expect(within(nav).getByRole("link", { name: "Handbook" }).getAttribute("href")).toBe("/handbook");
+    expect(within(nav).getByRole("link", { name: "Handbook" }).getAttribute("href")).toBe("/handbook/");
   });
 
   it("has an About link pointing to /about", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Explore" });
-    expect(within(nav).getByRole("link", { name: "About" }).getAttribute("href")).toBe("/about");
+    expect(within(nav).getByRole("link", { name: "About" }).getAttribute("href")).toBe("/about/");
   });
 
   it("has a Sponsors link pointing to /sponsors", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Explore" });
-    expect(within(nav).getByRole("link", { name: "Sponsors" }).getAttribute("href")).toBe("/sponsors");
+    expect(within(nav).getByRole("link", { name: "Sponsors" }).getAttribute("href")).toBe("/sponsors/");
   });
 
 
@@ -73,7 +73,7 @@ describe("Footer - Community nav", () => {
   it("has a Privacy Policy link pointing to /privacy", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Community" });
-    expect(within(nav).getByRole("link", { name: "Privacy Policy" }).getAttribute("href")).toBe("/privacy");
+    expect(within(nav).getByRole("link", { name: "Privacy Policy" }).getAttribute("href")).toBe("/privacy/");
   });
 
   it("has a Code of Conduct external link that opens in a new tab", () => {
@@ -85,7 +85,7 @@ describe("Footer - Community nav", () => {
   it("has an Accessibility link pointing to /accessibility", () => {
     renderFooter();
     const nav = screen.getByRole("navigation", { name: "Community" });
-    expect(within(nav).getByRole("link", { name: "Accessibility" }).getAttribute("href")).toBe("/accessibility");
+    expect(within(nav).getByRole("link", { name: "Accessibility" }).getAttribute("href")).toBe("/accessibility/");
   });
 });
 
diff --git a/src/test/inlineProse.test.tsx b/src/test/inlineProse.test.tsx
new file mode 100644
index 000000000..4d76892db
--- /dev/null
+++ b/src/test/inlineProse.test.tsx
@@ -0,0 +1,181 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { InlineProse, BLOCK_ELEMENT_RE } from "@/components/InlineProse";
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+// Every block element covered by BLOCK_ELEMENT_RE, with a representative HTML
+// string that begins with that element's opening tag.
+const BLOCK_CASES: { element: string; html: string }[] = [
+  { element: "p", html: "<p>A paragraph.</p>" },
+  { element: "ul", html: "<ul><li>item</li></ul>" },
+  { element: "ol", html: "<ol><li>item</li></ol>" },
+  { element: "blockquote", html: "<blockquote>quoted text</blockquote>" },
+  { element: "h1", html: "<h1>Heading one</h1>" },
+  { element: "h2", html: "<h2>Heading two</h2>" },
+  { element: "h3", html: "<h3>Heading three</h3>" },
+  { element: "h4", html: "<h4>Heading four</h4>" },
+  { element: "h5", html: "<h5>Heading five</h5>" },
+  { element: "h6", html: "<h6>Heading six</h6>" },
+  { element: "pre", html: '<pre tabindex="0">code block</pre>' },
+  { element: "table", html: "<table><tbody><tr><td>cell</td></tr></tbody></table>" },
+  { element: "hr", html: "<hr>" },
+  { element: "figure", html: "<figure><figcaption>caption</figcaption></figure>" },
+  { element: "div", html: "<div>block content</div>" },
+];
+
+// Inline-only HTML that must never trigger the block path.
+const INLINE_CASES: { label: string; html: string }[] = [
+  { label: "plain text", html: "just plain text" },
+  { label: "<em>", html: "<em>emphasis</em>" },
+  { label: "<strong>", html: "<strong>bold text</strong>" },
+  { label: "<a>", html: '<a href="https://example.com">a link</a>' },
+  { label: "<code>", html: "<code>inline code</code>" },
+  { label: "mixed inline", html: "text with <strong>bold</strong> and <em>em</em>" },
+];
+
+// ---------------------------------------------------------------------------
+// Block HTML → <div className="md-content">
+// ---------------------------------------------------------------------------
+
+describe("InlineProse - block HTML renders div.md-content", () => {
+  for (const { element, html } of BLOCK_CASES) {
+    it(`<${element}> → div with md-content`, () => {
+      const { container } = render(<InlineProse html={html} />);
+      const el = container.firstElementChild!;
+      expect(el.tagName.toLowerCase()).toBe("div");
+      expect(el.className).toContain("md-content");
+    });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Inline-only HTML → <p className="md-inline">
+// ---------------------------------------------------------------------------
+
+describe("InlineProse - inline-only HTML renders p.md-inline", () => {
+  for (const { label, html } of INLINE_CASES) {
+    it(`${label} → p with md-inline`, () => {
+      const { container } = render(<InlineProse html={html} />);
+      const el = container.firstElementChild!;
+      expect(el.tagName.toLowerCase()).toBe("p");
+      expect(el.className).toContain("md-inline");
+    });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// className: passed utilities come first, md-* class is appended last
+// ---------------------------------------------------------------------------
+
+describe("InlineProse - className ordering and preservation", () => {
+  it("md-inline is the last class for inline content with className", () => {
+    const { container } = render(
+      <InlineProse html="plain text" className="text-sm text-secondary" />
+    );
+    const el = container.firstElementChild!;
+    expect(el.className).toBe("text-sm text-secondary md-inline");
+  });
+
+  it("md-content is the last class for block content with className", () => {
+    const { container } = render(
+      <InlineProse html="<p>block</p>" className="text-sm text-secondary" />
+    );
+    const el = container.firstElementChild!;
+    expect(el.className).toBe("text-sm text-secondary md-content");
+  });
+
+  it("class string starts with the passed className, not with md-*", () => {
+    const { container } = render(
+      <InlineProse html="plain text" className="leading-relaxed" />
+    );
+    const el = container.firstElementChild!;
+    expect(el.className.startsWith("leading-relaxed")).toBe(true);
+    expect(el.className.endsWith("md-inline")).toBe(true);
+  });
+
+  it("renders only md-inline when no className is passed (inline content)", () => {
+    const { container } = render(<InlineProse html="plain text" />);
+    expect(container.firstElementChild!.className).toBe("md-inline");
+  });
+
+  it("renders only md-content when no className is passed (block content)", () => {
+    const { container } = render(<InlineProse html="<p>block</p>" />);
+    expect(container.firstElementChild!.className).toBe("md-content");
+  });
+
+  it("does not add a leading space when no className is passed", () => {
+    const { container } = render(<InlineProse html="plain text" />);
+    expect(container.firstElementChild!.className).not.toMatch(/^\s/);
+  });
+
+  it("trims whitespace-only className and renders only md-inline", () => {
+    const { container } = render(<InlineProse html="plain text" className="   " />);
+    expect(container.firstElementChild!.className).toBe("md-inline");
+  });
+
+  it("trims whitespace-only className and renders only md-content for block html", () => {
+    const { container } = render(<InlineProse html="<p>block</p>" className="   " />);
+    expect(container.firstElementChild!.className).toBe("md-content");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// BLOCK_ELEMENT_RE export: direct regex contract
+// ---------------------------------------------------------------------------
+
+const ALL_BLOCK_TAGS = [
+  "p", "ul", "ol", "blockquote",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "pre", "table", "hr", "figure", "div",
+];
+const ALL_INLINE_TAGS = ["em", "strong", "a", "span", "code", "abbr", "mark"];
+
+describe("BLOCK_ELEMENT_RE - matches all block element opening tags", () => {
+  for (const tag of ALL_BLOCK_TAGS) {
+    it(`matches <${tag}>`, () => {
+      expect(BLOCK_ELEMENT_RE.test(`<${tag}>`)).toBe(true);
+    });
+
+    it(`matches <${tag} with attributes`, () => {
+      expect(BLOCK_ELEMENT_RE.test(`<${tag} class="foo">`)).toBe(true);
+    });
+  }
+});
+
+describe("BLOCK_ELEMENT_RE - does not match inline element tags", () => {
+  for (const tag of ALL_INLINE_TAGS) {
+    it(`does not match <${tag}>`, () => {
+      expect(BLOCK_ELEMENT_RE.test(`<${tag}>`)).toBe(false);
+    });
+  }
+});
+
+describe("BLOCK_ELEMENT_RE - boundary conditions", () => {
+  it("does not match empty string", () => {
+    expect(BLOCK_ELEMENT_RE.test("")).toBe(false);
+  });
+
+  it("does not match plain text with no tags", () => {
+    expect(BLOCK_ELEMENT_RE.test("just plain prose")).toBe(false);
+  });
+
+  it("matches when block tag appears anywhere in the string", () => {
+    expect(BLOCK_ELEMENT_RE.test("text before <p>paragraph</p> text after")).toBe(true);
+  });
+
+  it("does not false-positive on a word starting with a block tag name (e.g. 'preview')", () => {
+    // 'pre' in 'preview' — \b prevents the match
+    expect(BLOCK_ELEMENT_RE.test("<preview>")).toBe(false);
+  });
+
+  it("does not false-positive on 'divide' starting with 'div'", () => {
+    expect(BLOCK_ELEMENT_RE.test("<divide>")).toBe(false);
+  });
+
+  it("does not false-positive on 'paragraph' starting with 'p'", () => {
+    expect(BLOCK_ELEMENT_RE.test("<paragraph>")).toBe(false);
+  });
+});
diff --git a/src/test/markdownContent.test.tsx b/src/test/markdownContent.test.tsx
index 2d6f0b797..dac6a29ea 100644
--- a/src/test/markdownContent.test.tsx
+++ b/src/test/markdownContent.test.tsx
@@ -13,7 +13,7 @@ function clickCopyButton(): HTMLElement {
   return btn;
 }
 
-describe("MarkdownContent — copy button", () => {
+describe("MarkdownContent: copy button", () => {
   beforeEach(() => {
     vi.useFakeTimers();
     Object.assign(navigator, {
diff --git a/src/test/navbar.test.tsx b/src/test/navbar.test.tsx
index 7ec9480c7..8314d6f5f 100644
--- a/src/test/navbar.test.tsx
+++ b/src/test/navbar.test.tsx
@@ -66,19 +66,19 @@ describe("Navbar - desktop navigation", () => {
   it("has an About link pointing to /about", () => {
     renderNavbar();
     const aboutLinks = screen.getAllByRole("link", { name: /About/i });
-    expect(aboutLinks[0].getAttribute("href")).toBe("/about");
+    expect(aboutLinks[0].getAttribute("href")).toBe("/about/");
   });
 
   it("has a Handbook link pointing to /handbook", () => {
     renderNavbar();
     const links = screen.getAllByRole("link", { name: /Handbook/i });
-    expect(links[0].getAttribute("href")).toBe("/handbook");
+    expect(links[0].getAttribute("href")).toBe("/handbook/");
   });
 
   it("has a Sponsors link pointing to /sponsors", () => {
     renderNavbar();
     const links = screen.getAllByRole("link", { name: /Sponsors/i });
-    expect(links[0].getAttribute("href")).toBe("/sponsors");
+    expect(links[0].getAttribute("href")).toBe("/sponsors/");
   });
 
   it("has a Community external link that opens in a new tab", () => {
diff --git a/src/test/notFound.test.tsx b/src/test/notFound.test.tsx
index aeb7cc161..df41235bc 100644
--- a/src/test/notFound.test.tsx
+++ b/src/test/notFound.test.tsx
@@ -35,25 +35,25 @@ describe("NotFound", () => {
       expect(within(nav).getAllByRole("link")).toHaveLength(3);
     });
 
-    it("links 'Adventures' to /adventures", () => {
+    it("links 'Challenges' to /challenges", () => {
       renderNotFound();
       const nav = screen.getByRole("navigation", { name: "Helpful links" });
-      const link = within(nav).getByRole("link", { name: /Adventures/ });
-      expect(link.getAttribute("href")).toBe("/adventures");
+      const link = within(nav).getByRole("link", { name: /Challenges/ });
+      expect(link.getAttribute("href")).toBe("/challenges/");
     });
 
     it("links 'Handbook' to /handbook", () => {
       renderNotFound();
       const nav = screen.getByRole("navigation", { name: "Helpful links" });
       const link = within(nav).getByRole("link", { name: /Handbook/ });
-      expect(link.getAttribute("href")).toBe("/handbook");
+      expect(link.getAttribute("href")).toBe("/handbook/");
     });
 
     it("links 'About' to /about", () => {
       renderNotFound();
       const nav = screen.getByRole("navigation", { name: "Helpful links" });
       const link = within(nav).getByRole("link", { name: /About/ });
-      expect(link.getAttribute("href")).toBe("/about");
+      expect(link.getAttribute("href")).toBe("/about/");
     });
   });
 });
diff --git a/src/test/prerender.test.ts b/src/test/prerender.test.ts
index 6baf61c94..5571db105 100644
--- a/src/test/prerender.test.ts
+++ b/src/test/prerender.test.ts
@@ -27,7 +27,7 @@ const pages: PageSpec[] = [
   },
   {
     file: "adventures/index.html",
-    check: { type: "exact", value: "Adventures - Hands-on open source challenges | OffOn" },
+    check: { type: "exact", value: "Adventures - Open Source Learning Paths | OffOn" },
   },
   {
     file: "privacy/index.html",
diff --git a/src/test/readme.test.ts b/src/test/readme.test.ts
new file mode 100644
index 000000000..fe6e7b631
--- /dev/null
+++ b/src/test/readme.test.ts
@@ -0,0 +1,156 @@
+// Regression test: README.md routes table must stay in sync with src/routes.ts.
+//
+// Strategy: parse src/routes.ts dynamically so the test stays accurate as routes
+// change, rather than hard-coding an expected list that could itself drift. We
+// assert the key facts:
+//   1. Every route path defined in routes.ts appears in the README table.
+//   2. Routes backed by a file under pages/redirects/ are described as
+//      "redirect" in the README.
+//   3. Routes NOT backed by a redirect file are NOT described as "redirect".
+//
+// Why not exact matching: the README represents /challenges/:tag? as two rows
+// (/challenges and /challenges/:tag) while routes.ts has a single optional-param
+// entry. A brittle exact match would break whenever the README adds helpful
+// prose. We check presence of the normalised path and the redirect classification
+// instead, which is what actually prevents drift.
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, it, expect } from "vitest";
+
+const ROOT = resolve(__dirname, "../..");
+const routesSource = readFileSync(resolve(ROOT, "src/routes.ts"), "utf-8");
+const readmeSource = readFileSync(resolve(ROOT, "README.md"), "utf-8");
+
+// ---------------------------------------------------------------------------
+// Parse routes from src/routes.ts
+// Matches: route("path", "file") or route("path", "file", { ... })
+// ---------------------------------------------------------------------------
+
+type ParsedRoute = {
+  path: string;
+  file: string;
+  isRedirect: boolean;
+};
+
+function parseRoutes(): ParsedRoute[] {
+  const pattern = /route\(\s*"([^"]+)"\s*,\s*"([^"]+)"/g;
+  const routes: ParsedRoute[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = pattern.exec(routesSource)) !== null) {
+    routes.push({
+      path: m[1],
+      file: m[2],
+      isRedirect: m[2].includes("redirects/"),
+    });
+  }
+  return routes;
+}
+
+// ---------------------------------------------------------------------------
+// Normalise a routes.ts path to a README table path
+// "adventures/:id"   -> "/adventures/:id"
+// "challenges/:tag?" -> "/challenges/:tag"  (strip optional marker)
+// "*"                -> "*"                 (catch-all stays literal)
+// ---------------------------------------------------------------------------
+
+function toReadmePath(routePath: string): string {
+  const clean = routePath.replace(/\?/g, "");
+  if (clean === "*") return "*";
+  return `/${clean}`;
+}
+
+// ---------------------------------------------------------------------------
+// README table lookup helpers
+// ---------------------------------------------------------------------------
+
+function readmeContainsPath(path: string): boolean {
+  // Look for the path wrapped in backticks (table cell format)
+  return readmeSource.includes(`\`${path}\``);
+}
+
+// Find the README table row(s) that contain a given path and check for "redirect"
+function readmeRowForPath(path: string): string | null {
+  const escaped = path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = readmeSource.match(new RegExp(`\\|[^\\n]*\`${escaped}\`[^\\n]*`));
+  return match ? match[0] : null;
+}
+
+function readmeDescribesAsRedirect(path: string): boolean {
+  const row = readmeRowForPath(path);
+  return row !== null && row.toLowerCase().includes("redirect");
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("README routes table", () => {
+  const routes = parseRoutes();
+
+  it("README.md contains a routes table header", () => {
+    expect(readmeSource).toContain("## Routes");
+    expect(readmeSource).toContain("| Path |");
+  });
+
+  it("src/routes.ts defines at least one non-redirect route", () => {
+    expect(routes.some((r) => !r.isRedirect)).toBe(true);
+  });
+
+  it("src/routes.ts defines redirect routes for /docs and /community-guide", () => {
+    const redirectPaths = routes.filter((r) => r.isRedirect).map((r) => r.path);
+    expect(redirectPaths).toContain("docs");
+    expect(redirectPaths).toContain("community-guide");
+  });
+
+  for (const { path, file, isRedirect } of routes) {
+    const readmePath = toReadmePath(path);
+
+    it(`README table includes ${readmePath} (${file})`, () => {
+      // For optional-param routes (e.g. challenges/:tag?), the README may list
+      // the base path (/challenges) and the parameterised path (/challenges/:tag)
+      // as separate rows. Accept either the normalised form or the base form.
+      const basePath =
+        path.includes("?") ? `/${path.replace(/\/:[^/]+\?$/, "")}` : null;
+
+      const found =
+        readmeContainsPath(readmePath) ||
+        (basePath !== null && readmeContainsPath(basePath));
+
+      expect(
+        found,
+        `Route "${path}" (${file}) is missing from the README routes table. ` +
+          `Expected to find \`${readmePath}\` in README.md.`,
+      ).toBe(true);
+    });
+
+    if (isRedirect) {
+      it(`README describes ${readmePath} as a redirect`, () => {
+        const basePath =
+          path.includes("?") ? `/${path.replace(/\/:[^/]+\?$/, "")}` : null;
+
+        const found =
+          readmeDescribesAsRedirect(readmePath) ||
+          (basePath !== null && readmeDescribesAsRedirect(basePath));
+
+        expect(
+          found,
+          `Route "${path}" uses redirect file (${file}) but README does not ` +
+            `describe \`${readmePath}\` as a redirect.`,
+        ).toBe(true);
+      });
+    }
+
+    if (!isRedirect && path !== "*") {
+      it(`README does not describe ${readmePath} as a redirect`, () => {
+        if (!readmeContainsPath(readmePath)) return; // path not in table; covered above
+        const row = readmeRowForPath(readmePath);
+        expect(
+          row === null || !row.toLowerCase().includes("redirect"),
+          `Route "${path}" (${file}) is a page but README row for ` +
+            `\`${readmePath}\` mentions "redirect": ${row}`,
+        ).toBe(true);
+      });
+    }
+  }
+});
diff --git a/src/test/rewardsCard.test.tsx b/src/test/rewardsCard.test.tsx
index 186edd001..624ae1040 100644
--- a/src/test/rewardsCard.test.tsx
+++ b/src/test/rewardsCard.test.tsx
@@ -84,7 +84,7 @@ describe("RewardsCard - active deadline (deadlinePast=false)", () => {
 });
 
 // ---------------------------------------------------------------------------
-// Past deadline (deadlinePast=true) — non-compact
+// Past deadline (deadlinePast=true), non-compact
 // ---------------------------------------------------------------------------
 
 describe("RewardsCard - past deadline, non-compact", () => {
@@ -119,7 +119,7 @@ describe("RewardsCard - past deadline, non-compact", () => {
 });
 
 // ---------------------------------------------------------------------------
-// Past deadline (deadlinePast=true) — compact
+// Past deadline (deadlinePast=true), compact
 // ---------------------------------------------------------------------------
 
 describe("RewardsCard - past deadline, compact", () => {
diff --git a/src/test/root.test.tsx b/src/test/root.test.tsx
index 33d51771d..a27a106ff 100644
--- a/src/test/root.test.tsx
+++ b/src/test/root.test.tsx
@@ -58,7 +58,7 @@ describe("root.tsx - gated-load Consent Mode v2 bootstrap", () => {
     expect(source).toContain("application/ld+json");
     // font-display: optional requires preloads to work correctly. Without them the optional
     // window expires on throttled connections (Lighthouse uses 4G) before fonts are discovered,
-    // causing the browser to use system fonts permanently. Only the Latin subset is preloaded —
+    // causing the browser to use system fonts permanently. Only the Latin subset is preloaded.
     // always needed for English content and never generates "preloaded but not used" warnings.
     expect(source).toContain("inter-latin-400-normal.woff2");
     expect(source).toContain("inter-latin-500-normal.woff2");
diff --git a/styleguide.md b/styleguide.md
index e4c396e0e..8b60a0a8a 100644
--- a/styleguide.md
+++ b/styleguide.md
@@ -10,13 +10,13 @@ All brand copy constants live in `src/data/constants.ts`. Use them instead of ha
 
 | Constant | Value / purpose |
 |---|---|
-| `BRAND_NAME` | `"OffOn"` — the brand name |
-| `BRAND_SLOGAN_PARTS` | `["Vendor-Neutral", "Open Source", "Community-Driven"]` — slogan as an array, used to render with icon separators |
-| `BRAND_SLOGAN` | The three parts joined with `". "` — use for plain-text contexts (page titles, meta) |
-| `BRAND_SECONDARY_LINE_PARTS` | `["always On.", "always Open.", "always Learning."]` — rendered in the Hero h1 |
-| `BRAND_SECONDARY_LINE` | The three parts joined with spaces — use for plain-text contexts (CTA copy) |
+| `BRAND_NAME` | `"OffOn"`: the brand name |
+| `BRAND_SLOGAN_PARTS` | `["Vendor-Neutral", "Open Source", "Community-Driven"]`. Slogan as an array, used to render with icon separators |
+| `BRAND_SLOGAN` | The three parts joined with `". "`. Use for plain-text contexts (page titles, meta) |
+| `BRAND_SECONDARY_LINE_PARTS` | `["always On.", "always Open.", "always Learning."]`. Rendered in the Hero h1 |
+| `BRAND_SECONDARY_LINE` | The three parts joined with spaces. Use for plain-text contexts (CTA copy) |
 | `BRAND_SHORT_DESCRIPTION` | The canonical homepage meta description |
-| `SITE_NAME` | `"offon.dev"` — the domain, always lowercase |
+| `SITE_NAME` | `"offon.dev"`. The domain, always lowercase |
 
 ---
 
@@ -26,7 +26,7 @@ All brand copy constants live in `src/data/constants.ts`. Use them instead of ha
 
 | Role | Family | Key weights | Format |
 |---|---|---|---|
-| Headings / display (`font-heading`) | Syne | 600, 700 | WOFF2 only (`public/fonts/syne-*.woff2`) |
+| Headings / display (`font-heading`) | Syne | 700 | WOFF2 only (`public/fonts/syne-*.woff2`) |
 | Body & UI (`font-sans`) | Inter | 400, 500, 600 primary (700 available) | WOFF2 only (`public/fonts/inter-*.woff2`) |
 | Code / mono (`font-mono`, `code`, `pre`) | JetBrains Mono | 400 primary (500, 600 available) | WOFF2 only (`public/fonts/jetbrains-mono-*.woff2`) |
 
@@ -44,12 +44,12 @@ Subset coverage (via `unicode-range` in `src/index.css` -- only the needed subse
 
 Fonts are preloaded to avoid the three-level font discovery delay (HTML parse → CSS parse → font file request). All preloads live in `src/root.tsx` and fire on every page load:
 
-**Global (`src/root.tsx`) — preloaded on every page:**
-- `inter-latin-400-normal.woff2` — body text (Navbar, paragraphs)
-- `inter-latin-500-normal.woff2` — medium-weight body text (Navbar links)
-- `inter-latin-600-normal.woff2` — semibold text (section labels, card titles)
-- `inter-latin-700-normal.woff2` — bold text (CTA buttons using `font-bold` on non-heading elements)
-- `syne-latin-700-normal.woff2` — h1 and h2 elements (the `@layer base` rule in `src/index.css` applies `font-family: 'Syne'` to h1 and h2 only; h3–h6 use Inter)
+**Global (`src/root.tsx`), preloaded on every page:**
+- `inter-latin-400-normal.woff2`: body text (Navbar, paragraphs)
+- `inter-latin-500-normal.woff2`: medium-weight body text (Navbar links)
+- `inter-latin-600-normal.woff2`: semibold text (section labels, card titles)
+- `inter-latin-700-normal.woff2`: bold text (CTA buttons using `font-bold` on non-heading elements)
+- `syne-latin-700-normal.woff2`: h1 and h2 elements (the `@layer base` rule in `src/index.css` applies `font-family: 'Syne'` to h1 and h2 only; h3–h6 use Inter)
 
 Only Latin subset variants are preloaded. Other subsets are served from `public/fonts/` but are not preloaded. Update `src/root.tsx` whenever above-the-fold typography changes.
 
@@ -77,7 +77,7 @@ Only Latin subset variants are preloaded. Other subsets are served from `public/
 
 **UI labels (buttons, CTAs, headings, card titles, nav links) use title case (Chicago style).** Body copy and descriptions use sentence case.
 
-Title case rule: capitalise every word except articles (a, an, the), prepositions under five letters (by, in, on, of, to, for, at), and coordinating conjunctions (and, but, or, nor) — unless they open the label.
+Title case rule: capitalise every word except articles (a, an, the), prepositions under five letters (by, in, on, of, to, for, at), and coordinating conjunctions (and, but, or, nor), unless they open the label.
 
 | Context | Case | Example |
 |---|---|---|
@@ -166,7 +166,7 @@ Used for avatar tints in `DiscussionSection` (at `/0.2` opacity) and as semantic
 
 ### Light Mode (`.light`)
 
-The light mode uses a barely-cool background palette. The slight cool/warm contrast between the background and amber accents is intentional — it mirrors how dark mode works (near-black vs warm amber), just inverted and far more subtle. `bg-primary` sections (PageHero, BottomCTA) stay amber in light mode — they do not flip to black.
+The light mode uses a barely-cool background palette. The slight cool/warm contrast between the background and amber accents is intentional: it mirrors how dark mode works (near-black vs warm amber), just inverted and far more subtle. `bg-primary` sections (PageHero, BottomCTA) stay amber in light mode. They do not flip to black.
 
 | Token | Value | Approx hex | Notes |
 |---|---|---|---|
@@ -285,17 +285,19 @@ Light mode: no background texture.
 
 ## Animations
 
+All animation classes are defined inside `@media (prefers-reduced-motion: no-preference)`. Under `prefers-reduced-motion: reduce` the animation property is absent, so elements render at their natural styles (fully visible, no transform).
+
 | Class | Keyframe | Duration |
 |---|---|---|
-| `.animate-fade-up` | fadeUp (fade from opacity 0 + slide up 14px) | 0.6s ease-out |
-| `.animate-fade-up-delay-1` | fadeUp | 0.6s, 0.1s delay |
-| `.animate-fade-up-delay-2` | fadeUp | 0.6s, 0.2s delay |
-| `.animate-fade-up-delay-3` | fadeUp | 0.6s, 0.3s delay |
+| `.animate-fade-up` | fadeUp (slide up 8px, no opacity change) | 0.35s ease-out |
+| `.animate-fade-up-delay-1` | fadeUp | 0.35s, 0.05s delay |
+| `.animate-fade-up-delay-2` | fadeUp | 0.35s, 0.10s delay |
+| `.animate-fade-up-delay-3` | fadeUp | 0.35s, 0.15s delay |
 | `.animate-marquee` | horizontal scroll left | 30s linear infinite |
 
 ### Firefly particles
 
-`.firefly` - 2×2 px dot with `box-shadow` glow in `--primary` color, animated with `fireflyFloat` (8 particles, varying `animation-duration` 6.5–11 s and `animation-delay`). In light mode, `.light .firefly` reduces to 1.5×1.5 px and uses `--firefly-color` (`41 100% 45%`, slightly darker amber) for contrast against the light background.
+`.firefly` - 2×2 px dot with `box-shadow` glow in `--primary` color, animated with `fireflyFloat` inside `@media (prefers-reduced-motion: no-preference)` (8 particles, varying `animation-duration` 5.5–8.5 s and `animation-delay`). `will-change: transform, opacity` is applied only to the first three particles to stay within the ≤3 simultaneous limit. In light mode, `.light .firefly` reduces to 1.5×1.5 px and uses `--firefly-color` (`41 100% 45%`, slightly darker amber) for contrast against the light background.
 
 ---
 
@@ -341,9 +343,9 @@ Every page must support keyboard bypass of the navigation bar (WCAG 2.4.1).
 
 `Layout.tsx` mounts three sibling components that each handle a single route-level side effect:
 
-- **`<ScrollToTop />`** — on every route change, scrolls to the top of the page. When the URL has a hash, it instead scrolls the matching element into view via `requestAnimationFrame` so the target is mounted before the scroll runs. Required because React Router does not handle hash-anchor scrolling on client-side navigation.
-- **`<PageViewTracker />`** — fires GA4 `page_view` on every navigation when consent is `"granted"`. Reads pathname, full URL, and `document.title`. Was previously combined with `<ScrollToTop />`; split so each component has a single responsibility.
-- **`<ClickTracker />`** — wraps `useClickTracking` so the document-level click listener attaches when the consent context changes.
+- **`<ScrollToTop />`**: on every route change, scrolls to the top of the page. When the URL has a hash, it instead scrolls the matching element into view via `requestAnimationFrame` so the target is mounted before the scroll runs. Required because React Router does not handle hash-anchor scrolling on client-side navigation.
+- **`<PageViewTracker />`**: fires GA4 `page_view` on every navigation when consent is `"granted"`. Reads pathname, full URL, and `document.title`. Was previously combined with `<ScrollToTop />`; split so each component has a single responsibility.
+- **`<ClickTracker />`**: wraps `useClickTracking` so the document-level click listener attaches when the consent context changes.
 
 ```tsx
 // In Layout.tsx (already present, do not duplicate)
@@ -466,7 +468,7 @@ const { posts, totalReplies, solvers } = useDiscussionPosts(adventureId, levelId
 |---|---|---|
 | `adventureId` | `string` | Adventure slug (e.g. `"echoes-lost-in-orbit"`). |
 | `levelId` | `string` | Level slug (e.g. `"beginner"`). |
-| `loader` | `DiscussionDataLoader` (optional) | Async function that returns `{ discussionPosts?, totalReplies?, solvers? }`. Defaults to a `import.meta.glob` import of the per-level JSON. Pass a `vi.fn().mockResolvedValue(data)` in tests — see the Testing section of `CLAUDE.md` for the injectable-loader pattern. |
+| `loader` | `DiscussionDataLoader` (optional) | Async function that returns `{ discussionPosts?, totalReplies?, solvers? }`. Defaults to a `import.meta.glob` import of the per-level JSON. Pass a `vi.fn().mockResolvedValue(data)` in tests; see the Testing section of `CLAUDE.md` for the injectable-loader pattern. |
 
 `DiscussionResult` shape: `posts: PostWithAge[]`, `totalReplies: number`, `solvers: Solver[]`. `PostWithAge` is `StoredPost & { age: string }`. `Solver` has `username`, `avatarUrl?`, `solvedAt`.
 
@@ -497,6 +499,31 @@ const { rows, updatedAt } = useAdventureLeaderboard(adventureId, mockLoader);
 
 ## Components
 
+### `InlineProse`
+
+`src/components/InlineProse.tsx`
+
+Safe renderer for all author-prose HTML fields. Use this component in place of a bare `<p dangerouslySetInnerHTML>` wherever the content was converted from Markdown by the generator.
+
+Renders `<p className="md-inline …">` when the HTML is inline-only, and `<div className="md-content …">` when the HTML contains any block-level element (`p`, `ul`, `ol`, `blockquote`, `h1`–`h6`, `pre`, `table`, `hr`, `figure`, `div`). The switch is automatic: callers never need to inspect the HTML.
+
+**Rule:** every `dangerouslySetInnerHTML` site that renders an author-prose field (as listed in `CLAUDE.md`) must use `InlineProse`. Do not render author-prose HTML with a bare `<p>` or `<span>`.
+
+**Exception:** `rewards.rankingNote` renders inside a `<span>` inside a `<p>`, so `InlineProse` cannot be used there. The generator enforces that `rankingNote` is inline-only and fails the build if block markup is detected.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `html` | `string` | required | Sanitised HTML from the generator |
+| `className` | `string?` | `""` | Tailwind utilities appended before `md-inline`/`md-content` |
+
+```tsx
+<InlineProse html={tier.description} className="text-xs text-[hsl(var(--text-secondary))]" />
+```
+
+`BLOCK_ELEMENT_RE` is also exported for the rare case where callers need to perform the same check without rendering (e.g. server-side generator scripts).
+
+---
+
 ### `ConsentBanner`
 
 `src/components/ConsentBanner.tsx`
@@ -575,7 +602,7 @@ Full-width amber (`bg-primary`) hero banner used at the top of inner pages. Rend
 
 `Cta` shape: `{ label: ReactNode; href: string; external?: boolean }`. External CTAs get `target="_blank"` with the sr-only new-tab span. Anchors (`#`) and `mailto:` links render as `<a>`; all others render as React Router `<Link>`.
 
-**Important:** Buttons inside `PageHero` must use `.btn-inverse` / `.btn-ghost-inverse`. Never use `.btn-primary` or `.btn-ghost` inside `bg-primary` sections — they produce yellow-on-yellow in light mode.
+**Important:** Buttons inside `PageHero` must use `.btn-inverse` / `.btn-ghost-inverse`. Never use `.btn-primary` or `.btn-ghost` inside `bg-primary` sections. They produce yellow-on-yellow in light mode.
 
 ---
 
@@ -592,7 +619,7 @@ Renders a single adventure level as a card: difficulty badge, level name, key le
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `level` | `AdventureLevel` | required | Level data from `src/data/adventures` |
-| `headingLevel` | `"h2" \| "none"` | `"h2"` | Pass `"none"` when the parent page already renders the level name as `<h1>` to avoid duplicate heading in the document outline. When `"none"`, the level name renders as a `<p>`. The "Key Learnings" label always renders as a `<p>` regardless of this prop — it is a decorative sub-label, not a structural heading. |
+| `headingLevel` | `"h2" \| "none"` | `"h2"` | Pass `"none"` when the parent page already renders the level name as `<h1>` to avoid duplicate heading in the document outline. When `"none"`, the level name renders as a `<p>`. The "Key Learnings" label always renders as a `<p>` regardless of this prop. It is a decorative sub-label, not a structural heading. |
 
 ---
 
@@ -612,11 +639,11 @@ Navigation card used in tag-filtered level grids. The entire card is a `<Link>`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `level` | `AdventureLevelSummary` | required | Level data — accepts both `AdventureLevelSummary` (from `summaries.ts`) and full `AdventureLevel` (from `index.ts`), since the summary is a structural subset |
+| `level` | `AdventureLevelSummary` | required | Level data. Accepts both `AdventureLevelSummary` (from `summaries.ts`) and full `AdventureLevel` (from `index.ts`), since the summary is a structural subset |
 | `adventureId` | `string` | required | Used to build the link href: `/adventures/:id/levels/:levelId` |
 | `adventureTitle` | `string` | required | Shown in the card footer as a tag label |
-| `isLive` | `boolean?` | — | When true, renders a `LivePill` in the card header alongside the difficulty badge. Pass from the `isLive` field on `RelatedLevelSummary`. |
-| `className` | `string?` | — | Merged onto the root `<Link>` via `cn()`. Pass `"animate-fade-up-delay-1"` when the card is in a staggered grid. |
+| `isLive` | `boolean?` | (none) | When true, renders a `LivePill` in the card header alongside the difficulty badge. Pass from the `isLive` field on `RelatedLevelSummary`. |
+| `className` | `string?` | (none) | Merged onto the root `<Link>` via `cn()`. Pass `"animate-fade-up-delay-1"` when the card is in a staggered grid. |
 
 Distinct from `LevelCard`: `FilteredLevelCard` is a router link used in listing/filter contexts; `LevelCard` is a static card used on detail pages and includes the GitHub Codespaces CTA.
 
@@ -626,7 +653,7 @@ Distinct from `LevelCard`: `FilteredLevelCard` is a router link used in listing/
 
 `src/components/StarterNudge.tsx`
 
-First-visit wayfinding banner that points new users to the latest live adventure's Beginner level. Renders a solid amber (`bg-primary`) strip with dark text and a dismiss button. Dismissed state persists in `localStorage` under the key `starter_nudge_dismissed` — once dismissed, the nudge never reappears. Hidden server-side (hydration-safe).
+First-visit wayfinding banner that points new users to the latest live adventure's Beginner level. Renders a solid amber (`bg-primary`) strip with dark text and a dismiss button. Dismissed state persists in `localStorage` under the key `starter_nudge_dismissed`. Once dismissed, the nudge never reappears. Hidden server-side (hydration-safe).
 
 ```tsx
 <StarterNudge />
@@ -664,7 +691,7 @@ Two-row filter UI for the adventure catalog. Row 1 is a difficulty single-select
 
 **ARIA pattern:** difficulty dropdown uses `role="menu"` with `role="menuitemradio"` items; technology dropdown uses `role="menu"` with `role="menuitemcheckbox"` items. Desktop pill rows use `role="group"` with `aria-pressed` on each button.
 
-**Exported type:** `Difficulty = "Beginner" | "Intermediate" | "Expert"` — import from `@/components/ChallengeFilters` where `activeDifficulty` state needs typing.
+**Exported type:** `Difficulty = "Beginner" | "Intermediate" | "Expert"`. Import from `@/components/ChallengeFilters` where `activeDifficulty` state needs typing.
 
 ---
 
@@ -727,7 +754,7 @@ Merged replacement for the former `CommunityVoicesSection` and `ConnectSection`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `aside` | `ReactNode` | — | Optional sidebar content rendered in a sticky column at lg breakpoint |
+| `aside` | `ReactNode` | (none) | Optional sidebar content rendered in a sticky column at lg breakpoint |
 
 Used in `Index.tsx`.
 
@@ -737,7 +764,7 @@ Used in `Index.tsx`.
 
 `src/components/SponsorStrip.tsx`
 
-A slim horizontal strip (separated by a top border, `py-12`) with sponsor copy on the left and a "Become a Sponsor" `<Link>` to `/sponsors` on the right. Not a full section — no section label or heading. Sits between `CommunitySection` and `BottomCTA`.
+A slim horizontal strip (separated by a top border, `py-12`) with sponsor copy on the left and a "Become a Sponsor" `<Link>` to `/sponsors` on the right. Not a full section. No section label or heading. Sits between `CommunitySection` and `BottomCTA`.
 
 No props.
 
@@ -765,7 +792,7 @@ Uppercased eyebrow label rendered above section h2s. Wraps a `<span className="s
 
 Renders a vertical list with one of three marker styles (`dot`, `check`, `x`) and two spacing densities (`tight`, `loose`). Items can be plain strings or `{ lead, desc }` objects. When an item is an object, the `lead` string is rendered as a bold, foreground-colored phrase followed by the `desc` body. Plain string items render as-is.
 
-`marker="dot"` (default) renders a small amber dot. `marker="check"` and `marker="x"` render lucide `Check`/`X` icons in `text-foreground` (light-mode contrast safe — `text-primary` amber would fail WCAG 1.4.11). `spacing="tight"` (default) is the dense AboutSection layout; `spacing="loose"` matches the airier list rhythm used on `Sponsors`.
+`marker="dot"` (default) renders a small amber dot. `marker="check"` and `marker="x"` render lucide `Check`/`X` icons in `text-foreground` (light-mode contrast safe; `text-primary` amber would fail WCAG 1.4.11). `spacing="tight"` (default) is the dense AboutSection layout; `spacing="loose"` matches the airier list rhythm used on `Sponsors`.
 
 ```tsx
 <BulletList
@@ -800,9 +827,9 @@ No props. Self-contained section component.
 
 `src/components/BoardSection.tsx`
 
-Renders the Board section on the About page (mounted after `BrandStory`, with `ChallengeBuildersSection` immediately following it). Carries the "the people" eyebrow above its h2 — that overline label visually groups Board and the subsequent `ChallengeBuildersSection` (which has no eyebrow of its own). Reads `BOARD_MEMBERS` from `src/data/team.ts` and renders a responsive card grid (`sm:grid-cols-2 lg:grid-cols-3`). Each card shows an 80px circular avatar, the member name rendered via `PersonNameLink`, and a short bio. Card markup mirrors the pattern in `ChallengeBuildersSection.tsx`. Members are listed alphabetically by first name; placeholder seats sit at the end with `// TODO` comments next to them in `team.ts`.
+Renders the Board section on the About page (mounted after `BrandStory`, with `ChallengeBuildersSection` immediately following it). Carries the "the people" eyebrow above its h2. That overline label visually groups Board and the subsequent `ChallengeBuildersSection` (which has no eyebrow of its own). Reads `BOARD_MEMBERS` from `src/data/team.ts` and renders a responsive card grid (`sm:grid-cols-2 lg:grid-cols-3`). Each card shows an 80px circular avatar, the member name rendered via `PersonNameLink`, and a short bio. Card markup mirrors the pattern in `ChallengeBuildersSection.tsx`. Members are listed alphabetically by first name; placeholder seats sit at the end with `// TODO` comments next to them in `team.ts`.
 
-Avatars are 320px square WebP files in `src/assets/team/`, imported in `team.ts` and assigned to `BoardMember.image`. They render at 80×80 with `width`/`height` attributes set and `loading="lazy"` (the section is below the fold). Members without an `image` (placeholder seats) get a neutral circle with the lucide `User` icon as a visual filler — the icon is `aria-hidden="true"` because the name beneath it carries the meaning. To swap a placeholder for a real member, drop a 320px square WebP into `src/assets/team/`, import it in `team.ts`, and set the `image` field.
+Avatars are 320px square WebP files in `src/assets/team/`, imported in `team.ts` and assigned to `BoardMember.image`. They render at 80×80 with `width`/`height` attributes set and `loading="lazy"` (the section is below the fold). Members without an `image` (placeholder seats) get a neutral circle with the lucide `User` icon as a visual filler. The icon is `aria-hidden="true"` because the name beneath it carries the meaning. To swap a placeholder for a real member, drop a 320px square WebP into `src/assets/team/`, import it in `team.ts`, and set the `image` field.
 
 `KATHARINA_SICK` is exported from `src/data/adventures/contributors.ts` (re-exported via the barrel `src/data/adventures/index.ts`) and reused in `team.ts` so her bio has a single source of truth.
 
@@ -818,7 +845,7 @@ Renders the Challenge Builders section, used on both the About page (mounted dir
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `aside` | `ReactNode` | — | Optional sidebar content rendered in a sticky column at lg breakpoint |
+| `aside` | `ReactNode` | (none) | Optional sidebar content rendered in a sticky column at lg breakpoint |
 
 Used in `Adventures.tsx` and `About.tsx`.
 
@@ -857,7 +884,7 @@ No props. Self-contained section component.
 
 `src/components/DiscussionSection.tsx`
 
-Displays up to three community posts for an adventure level, fetched at build time from Discourse. Post content (`cooked`) is plain text — HTML is stripped by the refresh script before the JSON is written, so no runtime processing is needed. Post ages are computed on the client after mount to avoid calling `Date.now()` at render time.
+Displays up to three community posts for an adventure level, fetched at build time from Discourse. Post content (`cooked`) is plain text. HTML is stripped by the refresh script before the JSON is written, so no runtime processing is needed. Post ages are computed on the client after mount to avoid calling `Date.now()` at render time.
 
 ```tsx
 <DiscussionSection adventureId={adventure.id} levelId={level.id} discussionUrl={level.discussionUrl} />
@@ -914,9 +941,9 @@ Renders a user avatar followed by a plain-text username. The avatar is either an
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `username` | `string` | required | Discourse username. Used as display text and for the initials fallback. |
-| `avatarUrl` | `string` (optional) | — | Avatar image URL. Falls back to initials when omitted. |
+| `avatarUrl` | `string` (optional) | (none) | Avatar image URL. Falls back to initials when omitted. |
 | `size` | `24 \| 28` | `24` | Avatar diameter in pixels. |
-| `avatarFallbackStyle` | `CSSProperties` (optional) | — | Inline style for the initials `<span>`. Use palette colors from `CommunitySidebar`. |
+| `avatarFallbackStyle` | `CSSProperties` (optional) | (none) | Inline style for the initials `<span>`. Use palette colors from `CommunitySidebar`. |
 | `className` | `string` | required | Class applied to the username `<span>` element. Caller controls layout and typography. |
 
 The avatar image and initials span are both `aria-hidden="true"`.
@@ -957,7 +984,7 @@ Layout primitive that renders a two-column grid (`1fr 300px`) on `lg+` when `asi
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` | `ReactNode` | required | Main content (left column). |
-| `aside` | `ReactNode` (optional) | — | Sidebar content (right column, sticky). When omitted, children render without a grid wrapper. |
+| `aside` | `ReactNode` (optional) | (none) | Sidebar content (right column, sticky). When omitted, children render without a grid wrapper. |
 
 ---
 
@@ -984,10 +1011,10 @@ Sidebar card for the adventure detail page. Loads ranked player data via `useAdv
 Displays the rewards for an adventure (trophy tiers, eligibility text, deadline, and an optional ranking rules link). Rendered only when `adventure.rewards` is defined. Supports two modes: full (used on `AdventureDetail`) and compact (used in the `ChallengeDetail` sidebar, where the adventure-level deadline is replaced by the per-level `deadline` field).
 
 ```tsx
-{/* Full mode — AdventureDetail */}
+{/* Full mode: AdventureDetail */}
 <RewardsCard rewards={adventure.rewards} />
 
-{/* Compact mode — ChallengeDetail sidebar */}
+{/* Compact mode: ChallengeDetail sidebar */}
 <RewardsCard rewards={adventure.rewards} compact levelDeadline={level.deadline} />
 ```
 
@@ -995,7 +1022,7 @@ Displays the rewards for an adventure (trophy tiers, eligibility text, deadline,
 |---|---|---|---|
 | `rewards` | `AdventureRewards` | required | Reward tiers, eligibility, deadline, and optional ranking rules. |
 | `compact` | `boolean` | `false` | Hides eligibility text and ranking note; shows per-level deadline instead of adventure-wide deadline. |
-| `levelDeadline` | `string \| undefined` | — | Per-level deadline string shown only in compact mode. |
+| `levelDeadline` | `string \| undefined` | (none) | Per-level deadline string shown only in compact mode. |
 
 Deadline is always stored as a plain date-and-time string (e.g. `"26 May 2026 at 23:59 CET"`), never as a days-remaining calculation.
 
@@ -1014,7 +1041,7 @@ Small amber pill with an animated ping dot indicating that an adventure currentl
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `className` | `string?` | — | Merged onto the root `<span>` via `cn()`. |
+| `className` | `string?` | (none) | Merged onto the root `<span>` via `cn()`. |
 
 ---
 
@@ -1032,7 +1059,7 @@ Small pill identifying the adventure or challenge builder. Renders a `Hammer` ic
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `name` | `string` | required | Contributor display name. |
-| `url` | `string \| undefined` | — | External profile URL. Omit to render as a non-interactive pill. |
+| `url` | `string \| undefined` | (none) | External profile URL. Omit to render as a non-interactive pill. |
 | `glow` | `boolean` | `false` | Adds `contributor-pill-glow` amber box-shadow. Use on `ChallengeDetail` only. |
 | `label` | `string` | `"Challenge Builder"` | Text label before the name separator. |
 
@@ -1119,11 +1146,11 @@ Renders the narrative backstory for a challenge level inside a `CollapsibleSecti
 Renders architecture content inside a `CollapsibleSection` titled "Architecture". Diagram and text are independent: a diagram (SVG preferred over ASCII) and markdown text are each shown when present and can appear together. At least one prop should be provided; rendering none produces an empty collapsible.
 
 ```tsx
-{/* SVG + text — both render */}
+{/* SVG + text: both render */}
 <ArchitectureSection diagram={diagramUrl} diagramAlt="Spring Boot OpenFeature architecture" architecture={level.architecture.join("\n\n")} />
-{/* ASCII only — rendered when no SVG is available */}
+{/* ASCII only: rendered when no SVG is available */}
 <ArchitectureSection ascii="┌──────┐\n│ App  │\n└──────┘" />
-{/* Text only — no diagram */}
+{/* Text only, no diagram */}
 <ArchitectureSection architecture={level.architecture.join("\n\n")} />
 ```
 
@@ -1159,7 +1186,7 @@ Renders a numbered walkthrough as a vertical stepper inside a `CollapsibleSectio
 Renders pre-compiled block HTML (generated at build time by `scripts/generate-adventures.mjs`) inside a `div.md-content` container. A `useEffect` attaches a "Copy" button to every `<pre>` element after mount.
 
 - Fenced code blocks get a hover/focus-visible "Copy" button via DOM injection (clipboard API, flips to "Copied" for 1.5 s, with proper `aria-label` updates).
-- All element styles — headings, lists, code, blockquote, tables, links — are driven by `.md-content` rules in `src/index.css`.
+- All element styles (headings, lists, code, blockquote, tables, links) are driven by `.md-content` rules in `src/index.css`.
 - External links, `<pre>` accessibility attributes, and external-link icons are injected by the generator, not by this component.
 
 ```tsx
@@ -1168,11 +1195,11 @@ Renders pre-compiled block HTML (generated at build time by `scripts/generate-ad
 
 | Prop | Type | Description |
 |---|---|---|
-| `source` | `string` | Pre-rendered HTML string. Never pass raw Markdown — convert it in the generator first. |
+| `source` | `string` | Pre-rendered HTML string. Never pass raw Markdown; convert it in the generator first. |
 
 Used by `WalkthroughSection` (step content) and `ArchitectureSection`. Both fields come from the generated adventure data files and already contain sanitised HTML.
 
-**Inline HTML** (short prose inside `<p>`, `<span>`, `<li>`) uses `dangerouslySetInnerHTML={{ __html: value }}` with the `md-inline` CSS class directly on the host element — not `<MarkdownContent>`. See the CSS patterns section below and the `CLAUDE.md` "Author-controlled prose fields" rule.
+**Inline HTML** (short prose inside `<p>`, `<span>`, `<li>`) uses `dangerouslySetInnerHTML={{ __html: value }}` with the `md-inline` CSS class directly on the host element, not `<MarkdownContent>`. See the CSS patterns section below and the `CLAUDE.md` "Author-controlled prose fields" rule.
 
 ---
 
@@ -1236,7 +1263,7 @@ Use `FilteredLevelCard` (see Components section). Do not inline the card markup.
   level={level}
   adventureId={adventureId}
   adventureTitle={adventureTitle}
-  className="animate-fade-up-delay-1"  {/* optional — omit when no stagger needed */}
+  className="animate-fade-up-delay-1"  {/* optional; omit when no stagger needed */}
 />
 ```
 
@@ -1316,6 +1343,25 @@ Every page's `meta()` must use this function. Do not inline the og/twitter tag b
 
 ---
 
+### `tag-utils`
+
+`src/data/adventures/tag-utils.ts`
+
+Converts between tag display names (e.g. `"OpenTelemetry"`) and URL-safe slugs (e.g. `"opentelemetry"`). Built from `SUMMARY_TAGS` in `summaries.ts` so it does not import the full generated adventure detail files. Use this module (not `@/data/adventures`) in any component or page that only needs tag conversion.
+
+| Export | Signature | Description |
+|---|---|---|
+| `tagToSlug` | `(tag: string) => string` | Lowercases and replaces non-alphanumeric runs with `-`. Strips leading/trailing hyphens. |
+| `slugToTag` | `(slug: string) => string \| undefined` | Reverse lookup from slug to original tag name. Returns `undefined` for unknown slugs. |
+
+```ts
+import { tagToSlug, slugToTag } from "@/data/adventures/tag-utils";
+```
+
+Do not import these from `@/data/adventures` in card or filter components. That import pulls all five generated adventure detail files into the bundle.
+
+---
+
 ### `discussion-utils`
 
 `src/lib/discussion-utils.ts`
@@ -1361,12 +1407,12 @@ When pairing an icon with text inside a link or button, always use `inline-flex
 Never put a raw SVG icon next to text inside a plain `inline` or `block` element. The icon will drop below the baseline.
 
 ```tsx
-// Correct — internal navigation
+// Correct: internal navigation
 <Link className="inline-flex items-center gap-1 ...">
   Next step <ArrowRight size={13} aria-hidden="true" />
 </Link>
 
-// Correct — external link (opens in new tab)
+// Correct: external link (opens in new tab)
 <a target="_blank" ... className="docs-ext-link">
   View docs <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
 </a>
@@ -1387,7 +1433,7 @@ Never put a raw SVG icon next to text inside a plain `inline` or `block` element
 
 | Icon | Lucide name | Where used |
 |---|---|---|
-| External link (opens in new tab) | `ExternalLink` | All `<a target="_blank">` links — Navbar, BottomCTA, Hero, CommunityGuide, LevelCard, DiscussionSection, LinkSection, LeaderboardList, Privacy, and more |
+| External link (opens in new tab) | `ExternalLink` | All `<a target="_blank">` links: Navbar, BottomCTA, Hero, CommunityGuide, LevelCard, DiscussionSection, LinkSection, LeaderboardList, Privacy, and more |
 | Navigate forward / CTA | `ArrowRight` | Internal `<Link>` navigation only (OtherLevelsCard, SponsorStrip, AdventureDetail) |
 | Navigate back | `ArrowLeft` | ChallengeDetail breadcrumb |
 | Scroll down / anchor | `ArrowDown` | Hero primary CTA |
@@ -1435,11 +1481,11 @@ Used on `<span>` elements in: `CommunitySection`, `ChallengesGrid`, `NotFound`.
 The standard class for all inline prose links across the site. Handles both modes correctly without any additional Tailwind utilities for color or hover state.
 
 **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.
+**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`, `CommunitySidebar`, `RewardsCard`, `Accessibility`, and `Privacy`.
 
-Do not use `hover:text-primary` or `hover:underline` on inline content links — use `docs-ext-link` instead.
+Do not use `hover:text-primary` or `hover:underline` on inline content links. Use `docs-ext-link` instead.
 
 ```ts
 // The CSS class now bundles: inline-flex, align-items, gap, underline,
@@ -1457,7 +1503,7 @@ className="docs-ext-link text-sm font-medium mt-4"
 
 CSS class for icon-only social media `<a>` links. Used in the Spread the Word card on `/contribute` and in `ChallengeShareLinks` on challenge detail pages.
 
-**Dark mode:** base `text-[hsl(var(--text-secondary))]`, hover `hsl(var(--primary))` (amber — fine on dark backgrounds).
+**Dark mode:** base `text-[hsl(var(--text-secondary))]`, hover `hsl(var(--primary))` (amber, fine on dark backgrounds).
 **Light mode:** `.light .social-icon-link:hover` overrides to `hsl(var(--link-hover-light))` (~5.5:1 dark amber on white), avoiding `#ffc034` which is ~1.6:1 on near-white and fails WCAG 1.4.11.
 
 Includes `padding: 0.25rem` (equivalent to `p-1`) to improve tap target size and `border-radius: 2px` for focus ring containment.
@@ -1490,7 +1536,7 @@ Usage pattern:
 </Link>
 ```
 
-Always add `tag-chip-link` to interactive tag chip links. Do not use `hover:border-primary hover:text-primary` alone — in light mode those produce amber, which fails 1.4.11.
+Always add `tag-chip-link` to interactive tag chip links. Do not use `hover:border-primary hover:text-primary` alone. In light mode those produce amber, which fails 1.4.11.
 
 ---
 
@@ -1504,7 +1550,7 @@ Inline pill used in `ChallengesGrid.tsx` adventure cards to show the number of l
 </span>
 ```
 
-Light mode override: `.light .badge-levels` sets black text on amber background so it remains legible. Excluded from the broad `.light span.text-primary:not(.badge-levels)` reset — it intentionally keeps its amber styling.
+Light mode override: `.light .badge-levels` sets black text on amber background so it remains legible. Excluded from the broad `.light span.text-primary:not(.badge-levels)` reset. It intentionally keeps its amber styling.
 
 ---