diff --git a/_components/Footer.tsx b/_components/Footer.tsx
index 5365b3691..85a3b41e1 100644
--- a/_components/Footer.tsx
+++ b/_components/Footer.tsx
@@ -59,7 +59,7 @@ const data = [
       },
       {
         label: "Deno API Reference",
-        href: "/api/deno/~/Deno",
+        href: "/api/deno/",
       },
     ],
   },
diff --git a/_components/SidebarNav/comp.tsx b/_components/SidebarNav/comp.tsx
index f08f52d06..4e44d7c50 100644
--- a/_components/SidebarNav/comp.tsx
+++ b/_components/SidebarNav/comp.tsx
@@ -4,7 +4,7 @@ import ReferenceSidebarNav from "../../reference/_components/ReferenceSidebarNav
 export default function (data: Lume.Data) {
   const sectionData = data.sectionData;
   const currentUrl = data.currentUrl.replace(/\/$/, "");
-  const isReference = currentUrl.startsWith("/api/");
+  const isReference = currentUrl === "/api" || currentUrl.startsWith("/api/");
 
   if (isReference) {
     return <ReferenceSidebarNav {...data} />;
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index f79bd04d7..b022c362b 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -148,7 +148,7 @@ export default function Layout(data: Lume.Data) {
         />
         <div
           class={`layout ${
-            data.toc?.length || isReference
+            (data.toc?.length || isReference) && !data.fullWidth
               ? "layout--three-column"
               : "layout--two-column"
           }`}
diff --git a/_includes/reference/apiIndex.tsx b/_includes/reference/apiIndex.tsx
new file mode 100644
index 000000000..15c8d9d51
--- /dev/null
+++ b/_includes/reference/apiIndex.tsx
@@ -0,0 +1,73 @@
+import type { Group } from "../../reference/_lib/group.ts";
+
+export const layout = "doc.tsx";
+
+export interface ApiIndexData {
+  title: string;
+  intro: string;
+  aboutUrl: string;
+  aboutLabel: string;
+  allSymbolsUrl: string;
+  groups: { title: string; url: string; slug: string; group: Group }[];
+}
+
+/** Landing page for one API kind: a dense, Ctrl+F-able index of every symbol,
+ * grouped by category/module. Clicking a symbol jumps to its full docs on the
+ * grouped reference page. */
+export default function ApiIndex(
+  { data, comp }: { data: ApiIndexData } & Lume.Data,
+  _helpers: Lume.Helpers,
+) {
+  return (
+    <main id="content" className="ddoc markdown-body" tabIndex={-1}>
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h1 className="!mb-0">{data.title}</h1>
+        <p className="!my-0 text-sm whitespace-nowrap">
+          <a href={data.aboutUrl}>{data.aboutLabel}</a>
+          {" · "}
+          <a href={data.allSymbolsUrl}>All symbols</a>
+        </p>
+      </div>
+      <p className="mt-2 max-w-prose text-foreground-secondary">
+        {data.intro}
+      </p>
+
+      {data.groups.map(({ title, url, slug, group }) => (
+        <section key={slug} className="mt-8">
+          <h2 id={slug} className="!mb-2 scroll-mt-16 !border-0">
+            <a href={url} className="!text-foreground-primary hover:underline">
+              {title}
+            </a>
+          </h2>
+          <ul className="!list-none !pl-0 !my-0">
+            {group.sections.flatMap((section) =>
+              section.nodes.map((node) => (
+                <li
+                  key={node.name}
+                  className="flex items-baseline gap-2 py-px !mt-0"
+                  aria-label={node.deprecated ? "deprecated" : undefined}
+                >
+                  <comp.DocNodeKindIcon kinds={node.doc_node_kind_ctx} />
+                  <a
+                    href={node.href}
+                    className={`font-mono text-sm whitespace-nowrap ${
+                      node.deprecated ? "line-through opacity-60" : ""
+                    }`}
+                  >
+                    {node.name}
+                  </a>
+                  {node.docs && (
+                    <div
+                      className="text-sm text-foreground-secondary line-clamp-1 [&_p]:inline [&_div]:inline min-w-0"
+                      dangerouslySetInnerHTML={{ __html: node.docs }}
+                    />
+                  )}
+                </li>
+              ))
+            )}
+          </ul>
+        </section>
+      ))}
+    </main>
+  );
+}
diff --git a/_includes/reference/landing.tsx b/_includes/reference/landing.tsx
new file mode 100644
index 000000000..84dcca9d5
--- /dev/null
+++ b/_includes/reference/landing.tsx
@@ -0,0 +1,86 @@
+export const layout = "doc.tsx";
+
+export interface LandingTile {
+  title: string;
+  href: string;
+  description: string | null;
+}
+
+export interface LandingSection {
+  key: string;
+  title: string;
+  description: string;
+  href: string;
+  allSymbolsHref: string;
+  tiles: LandingTile[];
+  /** Render tiles in a denser grid (used for the long Node module list). */
+  dense?: boolean;
+}
+
+export interface LandingData {
+  intro: string;
+  sections: LandingSection[];
+}
+
+/** The /api/ hub: every API group presented as a tile grid, generated from
+ * the same grouping data as the reference pages themselves. */
+export default function ApiLanding(
+  { data }: { data: LandingData } & Lume.Data,
+  _helpers: Lume.Helpers,
+) {
+  return (
+    <main
+      id="content"
+      className="ddoc markdown-body"
+      data-color-mode="auto"
+      data-light-theme="light"
+      data-dark-theme="dark"
+    >
+      <h1>API reference</h1>
+      <p className="max-w-prose text-foreground-secondary">{data.intro}</p>
+
+      {data.sections.map((section) => (
+        <section key={section.key} className="mt-10">
+          <header className="flex flex-wrap items-baseline justify-between gap-2">
+            <h2 className="!mb-0 !border-0">
+              <a href={section.href} className="!text-foreground-primary">
+                {section.title}
+              </a>
+            </h2>
+            <a
+              className="text-sm whitespace-nowrap"
+              href={section.allSymbolsHref}
+            >
+              View all symbols <span aria-hidden="true">-&gt;</span>
+            </a>
+          </header>
+          <p className="mt-2 max-w-prose text-foreground-secondary">
+            {section.description}
+          </p>
+          <div
+            className={`grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 ${
+              section.dense ? "lg:grid-cols-4" : "lg:grid-cols-3"
+            }`}
+          >
+            {section.tiles.map((tile) => (
+              <a
+                key={tile.href}
+                href={tile.href}
+                className="group flex flex-col gap-1 p-4 rounded-lg border border-foreground-tertiary !no-underline hover:border-primary transition-colors duration-150"
+              >
+                <span className="font-semibold !text-foreground-primary group-hover:underline underline-offset-4 decoration-primary">
+                  {tile.title}
+                </span>
+                {tile.description && (
+                  <span className="text-sm text-foreground-secondary">
+                    {tile.description}
+                  </span>
+                )}
+              </a>
+            ))}
+          </div>
+        </section>
+      ))}
+    </main>
+  );
+}
diff --git a/_includes/reference/multiSymbol.tsx b/_includes/reference/multiSymbol.tsx
new file mode 100644
index 000000000..088efd8ab
--- /dev/null
+++ b/_includes/reference/multiSymbol.tsx
@@ -0,0 +1,52 @@
+import type { Group } from "../../reference/_lib/group.ts";
+
+export const layout = "doc.tsx";
+
+/** A grouped reference page: every symbol of a category (Deno, Web) or
+ * module (Node) documented on a single page — a symbol index up top,
+ * full documentation below. */
+export default function MultiSymbol(
+  { data, comp }: { data: Group } & Lume.Data,
+  _helpers: Lume.Helpers,
+) {
+  return (
+    <comp.Base data={{ breadcrumbs_ctx: data.breadcrumbs }} comp={comp}>
+      <div className="multiSymbolPage">
+        <header>
+          <h1 className="ref-h1">{data.title}</h1>
+          {data.docs && <div dangerouslySetInnerHTML={{ __html: data.docs }} />}
+          <comp.UsageLarge usages={data.usage} />
+        </header>
+
+        <section className="mt-8" id="symbol-index">
+          {data.sections.map((section) => (
+            <div className="mb-6">
+              <h2 className="ref-h2" id={section.anchor}>{section.title}</h2>
+              <comp.NamespaceSection namespaceSections={section.nodes} />
+            </div>
+          ))}
+        </section>
+
+        <hr className="my-10" />
+
+        <section id="symbol-docs">
+          {data.symbols.map((symbol) => (
+            <SymbolDivider comp={comp} symbol={symbol} />
+          ))}
+        </section>
+      </div>
+    </comp.Base>
+  );
+}
+
+function SymbolDivider(
+  // deno-lint-ignore no-explicit-any
+  { comp, symbol }: { comp: any; symbol: Group["symbols"][number] },
+) {
+  return (
+    <>
+      <comp.SymbolArticle symbol={symbol} />
+      <hr className="my-10 last:hidden" />
+    </>
+  );
+}
diff --git a/api/deno/index.md b/api/deno/index.md
index 35572b869..e3557127a 100644
--- a/api/deno/index.md
+++ b/api/deno/index.md
@@ -2,6 +2,7 @@
 title: "Deno Namespace APIs"
 description: "A guide to Deno's built-in runtime APIs. Learn about file system operations, network functionality, permissions management, and other core capabilities available through the global Deno namespace."
 layout: doc.tsx
+url: /api/deno/about/
 oldUrl:
   - /runtime/manual/runtime/
   - /runtime/manual/runtime/builtin_apis/
diff --git a/api/node/index.md b/api/node/index.md
index ac5afd6df..b7e497de6 100644
--- a/api/node/index.md
+++ b/api/node/index.md
@@ -2,6 +2,7 @@
 title: "Node.js Built-in APIs"
 description: "Complete reference for Node.js built-in modules and globals supported in Deno. Explore Node.js APIs including fs, http, crypto, process, buffer, and more with compatibility information."
 layout: doc.tsx
+url: /api/node/about/
 oldUrl:
   - /runtime/manual/node/compatibility/
   - /runtime/manual/npm_nodejs/compatibility_mode/
diff --git a/api/web/index.md b/api/web/index.md
index a819cec84..1e9776794 100644
--- a/api/web/index.md
+++ b/api/web/index.md
@@ -2,6 +2,7 @@
 title: "Web Platform APIs"
 description: "A guide to the Web Platform APIs available in Deno. Learn about fetch, events, workers, storage, and other web standard APIs, including implementation details and deviations from browser specifications."
 layout: doc.tsx
+url: /api/web/about/
 oldUrl:
   - /runtime/manual/runtime/navigator_api/
   - /runtime/manual/runtime/web_platform_apis/
diff --git a/middleware/redirects.ts b/middleware/redirects.ts
index 6a7f8af92..1e01e5f97 100644
--- a/middleware/redirects.ts
+++ b/middleware/redirects.ts
@@ -140,6 +140,23 @@ function loadFromJson() {
     );
   }
 
+  // Redirects from old per-symbol API reference URLs to their anchor on the
+  // grouped reference pages, generated by reference/reference.page.ts. The
+  // file does not exist yet (it is produced by a later step of the reference
+  // rearchitecture), in which case this is a no-op.
+  if (existsSync("./_site/api/_redirects.json")) {
+    const apiRedirects = JSON.parse(
+      new TextDecoder().decode(
+        Deno.readFileSync("./_site/api/_redirects.json"),
+      ),
+    ) as Record<string, string>;
+    redirects = { ...apiRedirects, ...redirects };
+  } else {
+    log.warn(
+      `🔗 <cyan>redirectsMiddleware</cyan>: No './_site/api/_redirects.json' found.`,
+    );
+  }
+
   log.info(
     `🔗 <cyan>redirectsMiddleware</cyan>: Total number of redirects loaded: ${
       Object.keys(redirects).length
@@ -154,8 +171,6 @@ function addGoLinksAndRedirectLinks(redirects: Record<string, string>) {
     `🔗 addGoLinksAndRedirectLinks: Adding additional redirects...`,
   );
 
-  redirects["/api/"] = "/api/deno/";
-
   log.debug(
     `🔗 <cyan>redirectsMiddleware</cyan>: Reading redirects from 'go.json'...`,
   );
diff --git a/orama/generate_orama_index_full.ts b/orama/generate_orama_index_full.ts
index b9b70f1ab..4bd9039dc 100644
--- a/orama/generate_orama_index_full.ts
+++ b/orama/generate_orama_index_full.ts
@@ -16,6 +16,7 @@
 
 import { walk } from "@std/fs";
 import { fromFileUrl, join, relative } from "@std/path";
+import { buildReference } from "../reference/_lib/group.ts";
 import { MarkdownIndexer } from "./indexing/MarkdownIndexer.ts";
 import { FileSelector } from "./identification/FileSelector.ts";
 import { IndexCollection } from "./indexing/IndexCollection.ts";
@@ -316,6 +317,8 @@ function processApiSymbol(
 async function processApiReference(): Promise<OramaFullDocument[]> {
   console.log("\n🔧 Processing API reference documentation...");
   const apiDocs: OramaFullDocument[] = [];
+  // deno-lint-ignore no-explicit-any
+  const referenceJsons: Record<string, any> = {};
 
   for (const refFile of REFERENCE_FILES) {
     const fullPath = join(ROOT_DIR, refFile.path);
@@ -326,6 +329,7 @@ async function processApiReference(): Promise<OramaFullDocument[]> {
 
       const content = await Deno.readTextFile(fullPath);
       const data = JSON.parse(content);
+      referenceJsons[refFile.apiType] = data;
 
       let processedCount = 0;
       let skippedCount = 0;
@@ -362,6 +366,26 @@ async function processApiReference(): Promise<OramaFullDocument[]> {
     }
   }
 
+  // Symbols now live as anchors on grouped reference pages; remap the old
+  // per-symbol URLs so search results land directly on the right anchor.
+  if (referenceJsons.deno && referenceJsons.web && referenceJsons.node) {
+    try {
+      const { redirects } = buildReference(referenceJsons);
+      let remapped = 0;
+      for (const doc of apiDocs) {
+        const target = redirects[doc.path];
+        if (target) {
+          doc.path = target;
+          doc.url = `${BASE_URL}${target}`;
+          remapped++;
+        }
+      }
+      console.log(`  Remapped ${remapped} API doc URLs to grouped pages.`);
+    } catch (error) {
+      console.warn(`Could not remap API URLs to grouped pages: ${error}`);
+    }
+  }
+
   return apiDocs;
 }
 
diff --git a/reference/_components/ReferenceSidebarNav.tsx b/reference/_components/ReferenceSidebarNav.tsx
index 635403572..c5f84629a 100644
--- a/reference/_components/ReferenceSidebarNav.tsx
+++ b/reference/_components/ReferenceSidebarNav.tsx
@@ -8,9 +8,8 @@ export default function ReferenceSidebarNav(data: Lume.Data) {
       title: "Deno APIs",
       key: "deno",
       basePath: "/api/deno",
-      categoryLabel: "Deno APIs by category",
       items: [
-        { href: "/api/deno", title: "Deno specific APIs" },
+        { href: "/api/deno/about/", title: "About", isBottom: true },
         {
           href: "/api/deno/all_symbols",
           title: "All Deno symbols",
@@ -22,9 +21,8 @@ export default function ReferenceSidebarNav(data: Lume.Data) {
       title: "Web APIs",
       key: "web",
       basePath: "/api/web",
-      categoryLabel: "Web APIs by category",
       items: [
-        { href: "/api/web", title: "Web Platform Support" },
+        { href: "/api/web/about/", title: "About", isBottom: true },
         {
           href: "/api/web/all_symbols",
           title: "All web symbols",
@@ -36,9 +34,8 @@ export default function ReferenceSidebarNav(data: Lume.Data) {
       title: "Node APIs",
       key: "node",
       basePath: "/api/node",
-      categoryLabel: "Node APIs by namespace",
       items: [
-        { href: "/api/node", title: "Node support in deno" },
+        { href: "/api/node/about/", title: "About", isBottom: true },
         {
           href: "/api/node/all_symbols",
           title: "All node symbols",
@@ -87,7 +84,11 @@ function ApiSection({ section, currentUrl, apiCategories }: {
 
   return (
     <nav>
-      <SidebarCategoryHeading title={section.title} />
+      <SidebarCategoryHeading
+        title={section.title}
+        href={`${section.basePath}/`}
+        isActive={section.basePath === currentUrl && !isCategoryActive}
+      />
       <SidebarList>
         {/* Main section items */}
         {topItems.map((item: any) => (
@@ -100,26 +101,14 @@ function ApiSection({ section, currentUrl, apiCategories }: {
           </li>
         ))}
 
-        {/* Category accordion */}
-        <li>
-          <button
-            type="button"
-            data-accordion-toggle={`${section.key}APIs`}
-            data-active={isCategoryActive}
-            className="sub-nav-toggle block relative py-1 px-3 after:right-4 [font:inherit] after:translate-y-1/2 after:transition-transform after:duration-100 after:ease-in after:[background:url(./img/chevron.svg)_no-repeat_center] after:-top-0.5 after:block after:w-4 after:h-4 after:absolute w-full text-left"
-          >
-            {section.categoryLabel}
-          </button>
-          <SidebarList>
-            <CategoryItems
-              section={section}
-              apiCategories={apiCategories}
-              currentUrl={currentUrl}
-            />
-          </SidebarList>
-        </li>
+        {/* Categories, flat */}
+        <CategoryItems
+          section={section}
+          apiCategories={apiCategories}
+          currentUrl={currentUrl}
+        />
 
-        {/* Bottom items (All symbols) */}
+        {/* Bottom items (About, All symbols) */}
         {bottomItems.map((item: any) => {
           const isActive = item.href.replace(/\/$/, "") === currentUrl;
           return (
diff --git a/reference/_components/SymbolArticle.tsx b/reference/_components/SymbolArticle.tsx
new file mode 100644
index 000000000..30b92faca
--- /dev/null
+++ b/reference/_components/SymbolArticle.tsx
@@ -0,0 +1,62 @@
+import type { GroupSymbol } from "../_lib/group.ts";
+
+/** Full documentation for one root symbol on a grouped reference page.
+ * Adapted from SymbolGroup.tsx, but heading at h2 level with a stable anchor
+ * so many symbols can share a page. */
+export default function (
+  // deno-lint-ignore no-explicit-any
+  { comp, symbol }: { comp: any; symbol: GroupSymbol },
+) {
+  const group = symbol.symbolGroup;
+  return (
+    <article className="symbolGroup scroll-mt-16" id={symbol.anchor}>
+      {group.symbols.map((item, i) => (
+        <div>
+          <h2 className="ref-h1">
+            <span className={`text-${item.kind.kind}`}>
+              {item.kind.title_lowercase}
+            </span>{" "}
+            <a
+              href={`#${symbol.anchor}`}
+              className="font-bold !text-foreground-primary hover:underline"
+            >
+              {group.name}
+            </a>
+          </h2>
+          {item.subtitle && (
+            <div className="symbolSubtitle">
+              {item.subtitle.kind === "class"
+                ? <comp.DocBlockSubtitleClass subtitle={item.subtitle.value} />
+                : (
+                  <comp.DocBlockSubtitleInterface
+                    subtitle={item.subtitle.value}
+                  />
+                )}
+            </div>
+          )}
+          {(item.tags && item.tags.length > 0) && (
+            <div className="space-x-2 !mt-2">
+              {item.tags.map((tag) => (
+                <comp.Tag key={tag.kind} tag={tag} large />
+              ))}
+            </div>
+          )}
+
+          {i === 0 && <comp.UsageLarge usages={item.usage} />}
+
+          {item.deprecated && (
+            <comp.Deprecated markdownContent={item.deprecated} />
+          )}
+
+          <div>
+            {item.content.map((contentItem) => (
+              contentItem.kind === "function"
+                ? <comp.Function functionCtx={contentItem.value} />
+                : <comp.SymbolContent symbolContent={contentItem.value} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </article>
+  );
+}
diff --git a/reference/reference.page.ts b/reference/reference.page.ts
index ea34ab154..8dcc16deb 100644
--- a/reference/reference.page.ts
+++ b/reference/reference.page.ts
@@ -1,4 +1,11 @@
 import type { Page } from "@deno/doc";
+import { type ApiKind, buildReference, type Group } from "./_lib/group.ts";
+import denoCategories from "../reference_gen/deno-categories.json" with {
+  type: "json",
+};
+import webCategories from "../reference_gen/web-categories.json" with {
+  type: "json",
+};
 
 export const layout = "raw.tsx";
 
@@ -21,123 +28,229 @@ export const sidebar = [
   },
 ];
 
-const kinds = [
-  { path: "reference_gen/gen/deno.json", name: "Deno" },
-  { path: "reference_gen/gen/web.json", name: "Web" },
-  { path: "reference_gen/gen/node.json", name: "Node" },
-] as const;
+const kinds: { path: string; kind: ApiKind; title: string }[] = [
+  { path: "reference_gen/gen/deno.json", kind: "deno", title: "Deno" },
+  { path: "reference_gen/gen/web.json", kind: "web", title: "Web" },
+  { path: "reference_gen/gen/node.json", kind: "node", title: "Node" },
+];
 
 export default function* () {
+  if (Deno.env.get("SKIP_REFERENCE") === "1") {
+    console.warn("⏭️ Reference docs generation skipped (SKIP_REFERENCE set)");
+    return;
+  }
+
+  const jsons = {} as Record<ApiKind, Record<string, Page>>;
   try {
-    if (Deno.env.get("SKIP_REFERENCE") === "1") {
-      console.warn("⏭️ Reference docs generation skipped (SKIP_REFERENCE set)");
-      return;
+    for (const { path, kind } of kinds) {
+      console.log(`📖 Loading ${kind} reference docs from ${path}...`);
+      jsons[kind] = JSON.parse(Deno.readTextFileSync(path));
+      console.log(
+        `✅ Loaded ${kind} reference docs (${
+          Object.keys(jsons[kind]).length
+        } entries)`,
+      );
+    }
+  } catch (ex) {
+    console.warn(
+      "⚠️ Reference docs were not generated. Run 'deno task generate:reference' first.",
+      ex,
+    );
+    return;
+  }
+
+  const { groups, redirects, warnings, rewritePage } = buildReference(jsons, {
+    deno: denoCategories,
+    web: webCategories,
+  });
+
+  if (warnings.length > 0) {
+    const logPath = "reference_gen/gen/reference-warnings.log";
+    Deno.writeTextFileSync(logPath, warnings.join("\n") + "\n");
+    console.warn(
+      `⚠️ ${warnings.length} reference link warnings (dead links in source docs). Full list: ${logPath}`,
+    );
+  }
+
+  for (const { kind, title } of kinds) {
+    for (const group of groups[kind]) {
+      yield {
+        url: group.url,
+        title: `${group.title} - ${title} documentation`,
+        description: descriptionFor(group),
+        layout: "reference/multiSymbol.tsx",
+        data: {
+          ...group,
+          toc_ctx: {
+            usages: null,
+            top_symbols: null,
+            document_navigation_str: null,
+            document_navigation: group.toc,
+          },
+        },
+      };
     }
 
-    for (const { path, name } of kinds) {
-      console.log(`📖 Loading ${name} reference docs from ${path}...`);
-
-      let json: Record<string, Page>;
-      try {
-        const fileContent = Deno.readTextFileSync(path);
-        json = JSON.parse(fileContent);
-        console.log(
-          `✅ Successfully loaded ${name} reference docs (${
-            Object.keys(json).length
-          } entries)`,
-        );
-      } catch (readError) {
-        console.error(`❌ Failed to read ${path}:`, readError);
-        console.error(`   Current working directory: ${Deno.cwd()}`);
-
-        // Check if the file exists
-        try {
-          const stat = Deno.statSync(path);
-          console.error(
-            `   File exists but read failed. Size: ${stat.size} bytes`,
-          );
-        } catch {
-          console.error(`   File does not exist at: ${path}`);
-
-          // Check if the gen directory exists
-          try {
-            Deno.statSync("reference_gen/gen");
-            console.error(`   Gen directory exists, contents:`);
-            for (const entry of Deno.readDirSync("reference_gen/gen")) {
-              console.error(
-                `     - ${entry.name} (${entry.isFile ? "file" : "dir"})`,
-              );
-            }
-          } catch {
-            console.error(
-              `   Gen directory does not exist at reference_gen/gen`,
-            );
-            console.error(
-              `   Run 'deno task generate:reference' to generate the reference docs`,
-            );
-          }
-        }
-        throw readError;
-      }
-      for (
-        const [filepath, content] of Object.entries(json)
-      ) {
-        if (content.kind === "search") {
-          continue;
-        }
-
-        // Skip generating index pages since we have static versions
-        if (
-          (name === "Deno" || name === "Web" || name === "Node") &&
-          filepath === "./index.json"
-        ) {
-          continue;
-        }
-
-        const trailingLength = filepath.endsWith("index.json")
-          ? -"index.json".length
-          : -".json".length;
-
-        // Remove leading "./" if present
-        let normalizedPath = filepath.slice(0, trailingLength);
-        if (normalizedPath.startsWith("./")) {
-          normalizedPath = normalizedPath.slice(2);
-        }
-
-        const url = `/api/${name.toLowerCase()}/${normalizedPath}`;
-
-        if ("path" in content) {
-          // TODO: handle redirects in a more integrated manner
-
-          yield {
-            url,
-            content:
-              `<meta http-equiv="refresh" content="0; url=${content.path}">`,
-          };
-
-          continue;
-        }
-
-        let layout;
-        if (content.kind === "IndexCtx") {
-          layout = "index";
-        } else if (content.kind === "AllSymbolsCtx") {
-          layout = "allSymbols";
-        } else if (content.kind === "SymbolPageCtx") {
-          layout = "symbol";
-        } else {
-          throw `unknown page kind: ${(content as { kind: string }).kind}`;
-        }
-
-        yield {
-          url,
-          title: content.html_head_ctx.title,
-          layout: `reference/${layout}.tsx`,
-          data: content,
-        };
-      }
+    // The "view all symbols" page, with links rewritten to the new URLs.
+    for (const [filepath, content] of Object.entries(jsons[kind])) {
+      if (content.kind !== "AllSymbolsCtx") continue;
+      const normalized = filepath.replace(/^\.\//, "").replace(/\.json$/, "");
+      yield {
+        url: `/api/${kind}/${normalized}`,
+        title: `All Symbols - ${title} documentation`,
+        layout: "reference/allSymbols.tsx",
+        data: rewritePage(kind, filepath, content),
+      };
     }
-  } catch (ex) {
-    console.warn("⚠️ Reference docs were not generated." + ex);
   }
+
+  // Landing page per API kind: a dense Ctrl+F-able index of every symbol.
+  // The hand-written guides that previously lived at these URLs moved to
+  // /api/<kind>/about/ (see api/*/index.md).
+  const kindMeta = {
+    deno: {
+      title: "Deno APIs",
+      intro:
+        "Every API in the global Deno namespace, by category. Use your browser's find-in-page to locate a symbol, then click through for full documentation.",
+      aboutLabel: "About the Deno namespace",
+    },
+    web: {
+      title: "Web APIs",
+      intro:
+        "Every web platform API implemented by Deno, by category. Use your browser's find-in-page to locate a symbol, then click through for full documentation.",
+      aboutLabel: "About web platform support",
+    },
+    node: {
+      title: "Node APIs",
+      intro:
+        "Every Node.js built-in module supported by Deno and its exports. Use your browser's find-in-page to locate a symbol, then click through for full documentation.",
+      aboutLabel: "About Node.js compatibility",
+    },
+  } as const;
+
+  for (const { kind } of kinds) {
+    const meta = kindMeta[kind];
+    yield {
+      url: `/api/${kind}/`,
+      title: `${meta.title} reference`,
+      description: meta.intro,
+      fullWidth: true,
+      layout: "reference/apiIndex.tsx",
+      data: {
+        title: meta.title,
+        intro: meta.intro,
+        aboutUrl: `/api/${kind}/about/`,
+        aboutLabel: meta.aboutLabel,
+        allSymbolsUrl: `/api/${kind}/all_symbols`,
+        groups: groups[kind].map((group) => ({
+          title: group.title === "Uncategorized" ? "Other APIs" : (
+            kind === "node" ? `node:${group.slug}` : group.title
+          ),
+          url: group.url,
+          slug: group.slug.replace(/\//g, "-"),
+          group,
+        })),
+      },
+    };
+  }
+
+  // The /api/ hub: tile grids for every API group, derived from the same
+  // grouping data as the pages themselves.
+  yield {
+    url: "/api/",
+    title: "API reference",
+    description:
+      "Complete API reference for Deno: built-in Deno APIs, supported Web APIs, and Node.js compatibility modules.",
+    fullWidth: true,
+    layout: "reference/landing.tsx",
+    data: {
+      intro:
+        "The complete API reference for Deno: runtime APIs available in the Deno namespace, supported web platform APIs, and the Node.js built-in modules Deno provides for compatibility.",
+      sections: [
+        {
+          key: "deno",
+          title: "Deno APIs",
+          description:
+            "Non-standard APIs in the global Deno namespace: file system, network, subprocesses, testing, FFI, and more.",
+          href: "/api/deno/",
+          allSymbolsHref: "/api/deno/all_symbols",
+          tiles: categoryTiles(groups.deno),
+        },
+        {
+          key: "web",
+          title: "Web APIs",
+          description:
+            "Web platform standards implemented by Deno: fetch, streams, workers, crypto, and other browser-compatible APIs.",
+          href: "/api/web/",
+          allSymbolsHref: "/api/web/all_symbols",
+          tiles: categoryTiles(groups.web),
+        },
+        {
+          key: "node",
+          title: "Node APIs",
+          description:
+            "Node.js built-in modules supported in Deno for backwards compatibility, importable via the node: scheme.",
+          href: "/api/node/",
+          allSymbolsHref: "/api/node/all_symbols",
+          tiles: groups.node
+            .map((group) => ({
+              title: `node:${group.slug}`,
+              href: group.url,
+              description: tileDescription(group.docs),
+            }))
+            .sort((a, b) => a.title.localeCompare(b.title)),
+          dense: true,
+        },
+      ],
+    },
+  };
+
+  console.log(
+    `📚 Reference pages: ${
+      Object.values(groups).reduce((a, g) => a + g.length, 0)
+    } grouped pages, ${Object.keys(redirects).length} redirects`,
+  );
+
+  // Consumed by middleware/redirects.ts to 301 old per-symbol URLs to their
+  // anchor on the grouped pages.
+  yield {
+    url: "/api/_redirects.json",
+    content: JSON.stringify(redirects),
+  };
+}
+
+/** First sentence of a rendered HTML docs block, as plain text. */
+function tileDescription(docs: string | null): string | null {
+  if (!docs) return null;
+  const text = docs.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+  if (text.length === 0) return null;
+  const sentence = text.match(/^.*?[.!?](?=\s|$)/)?.[0] ?? text;
+  return sentence.length > 140 ? sentence.slice(0, 137) + "..." : sentence;
+}
+
+function categoryTiles(groups: Group[]) {
+  return groups
+    .map((group) => ({
+      // The generated catch-all category reads poorly on a landing page.
+      title: group.title === "Uncategorized" ? "Other APIs" : group.title,
+      href: group.url,
+      description: tileDescription(group.docs),
+    }))
+    .sort((a, b) =>
+      (a.title === "Other APIs" ? 1 : 0) - (b.title === "Other APIs" ? 1 : 0) ||
+      a.title.localeCompare(b.title)
+    );
+}
+
+function descriptionFor(group: Group): string {
+  const fallbacks: Record<ApiKind, string> = {
+    deno: `API reference for Deno's built-in ${group.title} APIs.`,
+    web: `API reference for the ${group.title} Web APIs available in Deno.`,
+    node: `API reference for the node:${group.slug} module in Deno.`,
+  };
+  const fallback = fallbacks[group.apiKind];
+  if (!group.docs) return fallback;
+  const text = group.docs.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+  if (text.length === 0) return fallback;
+  return text.length > 160 ? text.slice(0, 157) + "..." : text;
 }
diff --git a/server.ts b/server.ts
index 749821a8a..b0afa2415 100644
--- a/server.ts
+++ b/server.ts
@@ -10,7 +10,9 @@ import expires from "lume/middlewares/expires.ts";
 import createLlmsFilesMiddleware from "./middleware/llmsFiles.ts";
 import createMarkdownSourceMiddleware from "./middleware/markdownSource.ts";
 
-export const server = new Server({ root: "_site" });
+const port = Number(Deno.env.get("PORT") ?? 8000);
+
+export const server = new Server({ root: "_site", port });
 
 server.use(redirectsMiddleware);
 server.use(createMarkdownSourceMiddleware({ root: "_site" }));
@@ -28,4 +30,4 @@ server.use(expires({
 
 server.start();
 
-console.log("Listening on http://localhost:8000");
+console.log(`Listening on http://localhost:${port}`);