diff --git a/AGENTS.md b/AGENTS.md
index f44852e..601086a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,6 +10,7 @@ Josselin Perrus's personal site: an Astro 7 static site served by Cloudflare Wor
 - The page background (`src/components/Background.astro`: the paper texture and the corner pattern) and the topic map (`TopicMap.astro`, inside the `Intro` of Home and About) are drawn on canvases from small images in `src/assets/background/`. `scripts/make-background.py` makes those images, from the map's land in `src/data/topic-map.json`; rerun it after changing either, and commit its output. The site loads no shader library.
 - `src/content/writing/`: git submodule of [meaningfool-writing](https://github.com/meaningfool/meaningfool-writing), which holds every article, activity log and image. Read its `AGENTS.md` before editing content.
 - `src/content.config.ts`: the content collection, built from `articles/*.md` and `daily-logs/*.md` in the submodule.
+- `src/pages/index.astro`: the home. Its Writing list holds the articles, not the activity logs, and picking a topic on the map shows only the articles about it. An article's topics are its `topics` frontmatter field (`customer-success`, `product`, `ai-agents`: each one that makes up 30% or more of it), or else its entry in `src/data/topics.ts`.
 - `src/pages/articles/[slug].astro`: the page of every article and activity log. The Markdown goes through the plugins in `src/lib/` set in `astro.config.mjs`: the `# Title` line is dropped, the headings are renumbered from h2, and `rehype-article.mjs` shapes figures, YouTube embeds (moved to youtube-nocookie.com) and tables for `src/styles/prose.css`. In a table, a row whose cells are all bold is highlighted, and a paragraph starting with `Table:` right after it, past a blank line, is its caption. An image alone in its paragraph is captioned with its title, or with its alt text when that has a space.
 - `src/data/projects.ts`: the projects, with their screenshots in `src/assets/projects/`, and which articles belong to each, by article id.
 - `docs/document-sharing.md`: how the encrypted portfolio links on `/documents/` work and how to create them.
diff --git a/astro.config.mjs b/astro.config.mjs
index 3182e6d..45fb002 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -34,8 +34,7 @@ export default defineConfig({
         shikiConfig: { theme: 'github-light' }, // code blocks sit on the white page, in a light frame (prose.css)
     },
     integrations: [sitemap({
-        // TEMPORARY (#30): /map-preview/ shows the intro and the map until the home uses them; #31 deletes it.
-        filter: (page) => !/^\/(documents|map-preview)\/?$/.test(new URL(page).pathname),
+        filter: (page) => !/^\/documents\/?$/.test(new URL(page).pathname),
         serialize: (item) => ({ ...item, lastmod: lastModified.get(new URL(item.url).pathname) }),
     }), trailingSlashRedirects()],
     site: 'https://meaningfool.net',
diff --git a/src/components/ArticlesList.astro b/src/components/ArticlesList.astro
deleted file mode 100644
index dae2449..0000000
--- a/src/components/ArticlesList.astro
+++ /dev/null
@@ -1,72 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content';
-
-export interface Props {
-	articles: CollectionEntry<'writing'>[];
-}
-
-const { articles } = Astro.props;
----
-
-<ul class="articles-list">
-	{articles.map(article => (
-		<li>
-			<a href={`/articles/${article.id}/`} class="post-title">{article.data.title}</a>
-			<span class="post-meta">{article.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
-		</li>
-	))}
-</ul>
-
-<style>
-	.articles-list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.articles-list li {
-		margin-bottom: 0.15rem;
-		padding-left: 1rem;
-		text-indent: -1rem;
-	}
-
-	.articles-list li::before {
-		content: "* ";
-	}
-
-	.articles-list .post-title {
-		color: var(--accent);
-		text-decoration: none;
-	}
-
-	.articles-list .post-title:hover {
-		text-decoration: underline;
-	}
-
-	.post-meta {
-		color: var(--muted);
-		font-size: 0.9rem;
-		margin-left: 0.5rem;
-	}
-
-	@media (max-width: 768px) {
-		.articles-list li {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: baseline;
-			text-indent: 0;
-			padding-left: 0;
-		}
-
-		.articles-list li::before {
-			flex-shrink: 0;
-			margin-right: 0.5rem;
-		}
-
-		.post-meta {
-			width: 100%;
-			margin-left: 1.5rem;
-			font-size: 0.85rem;
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d98f260..a57720d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,13 +1,9 @@
 ---
 // The site footer: the wordmark, then About and the profiles elsewhere. On phones the links go under the wordmark.
 import Wordmark from './Wordmark.astro';
+import { profiles } from '../data/profiles';
 
-const links = [
-	{ href: '/about/', label: 'About' },
-	{ href: 'https://www.linkedin.com/in/josselinperrus/', label: 'LinkedIn' },
-	{ href: 'https://github.com/meaningfool', label: 'GitHub' },
-	{ href: 'https://x.com/nonils', label: 'X' },
-];
+const links = [{ href: '/about/', label: 'About' }, ...profiles];
 ---
 
 <footer class="foot">
diff --git a/src/content.config.ts b/src/content.config.ts
index 48e6074..1c7cebd 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -2,6 +2,7 @@ import { defineCollection } from 'astro:content';
 import { z } from 'astro/zod';
 import { glob } from 'astro/loaders';
 import { postId } from './lib/posts.mjs';
+import { TOPICS } from './data/topics';
 
 const writing = defineCollection({
   loader: glob({
@@ -23,6 +24,9 @@ const writing = defineCollection({
     updated: z.date().optional(),
     description: z.string().optional(),
     tags: z.array(z.string()).optional(),
+    // The topics an article is about, each one 30% or more of it: customer-success, product, ai-agents. The home's
+    // topic map filters Writing with them. Articles without the field take theirs from src/data/topics.ts.
+    topics: z.array(z.enum(TOPICS)).optional(),
   }),
 });
 
diff --git a/src/data/profiles.ts b/src/data/profiles.ts
new file mode 100644
index 0000000..bcc83f9
--- /dev/null
+++ b/src/data/profiles.ts
@@ -0,0 +1,6 @@
+// Josselin's profiles elsewhere, linked from the footer and the home's intro.
+export const profiles = [
+	{ href: 'https://www.linkedin.com/in/josselinperrus/', label: 'LinkedIn' },
+	{ href: 'https://github.com/meaningfool', label: 'GitHub' },
+	{ href: 'https://x.com/nonils', label: 'X' },
+];
diff --git a/src/data/topics.ts b/src/data/topics.ts
new file mode 100644
index 0000000..cfb81a9
--- /dev/null
+++ b/src/data/topics.ts
@@ -0,0 +1,54 @@
+// The site's three topics, the three orange dots of the topic map, and which of them each article is about. Picking a
+// topic on the home's map shows only the articles about it.
+//
+// An article belongs to a topic when that topic makes up 30% or more of it, so it can belong to more than one. An
+// article's topics come from its `topics` frontmatter field in meaningfool-writing when it has one, for example
+// `topics: ["product", "ai-agents"]`. Until every article has that field, the list below gives the topics of the 18
+// articles the prototype read (docs/redesign/prototype/maps.js, the weights in each article's `w`), by article id.
+import type { CollectionEntry } from 'astro:content';
+import map from './topic-map.json';
+
+/** The topics' ids, which the map's dots carry and the frontmatter's `topics` field takes. */
+export const TOPICS = ['customer-success', 'product', 'ai-agents'] as const;
+export type Topic = (typeof TOPICS)[number];
+
+// The map's dots (topic-map.json) are these three topics, in this order.
+if (map.topics.map(({ id }) => id).join() !== TOPICS.join()) {
+	throw new Error(`src/data/topic-map.json's topics should be ${TOPICS.join(', ')}, as in src/data/topics.ts`);
+}
+
+/** The topics' names, as the map shows them: "Customer success", "Product", "AI agents". */
+export const TOPIC_NAMES = Object.fromEntries(map.topics.map(({ id, name }) => [id, name])) as Record<Topic, string>;
+
+// The prototype's weights are [customer success, product, AI agents]; each topic at 0.3 or more is listed.
+const fromPrototype: Record<string, Topic[]> = {
+	'edit-collections-generative-ai': ['ai-agents'], // 0.1, 0.15, 0.75
+	'structured-extraction': ['ai-agents'], // 0.2, 0.1, 0.7
+	'thoughts-on-human-ai-collaboration': ['customer-success', 'product', 'ai-agents'], // 0.3, 0.3, 0.4
+	'detecting-bounding-boxes': ['ai-agents'], // 0.05, 0.1, 0.85
+	'agent-frameworks-for-the-rest-of-us': ['ai-agents'], // 0.05, 0.15, 0.8
+	'how-long-for-that-change': ['product'], // 0.15, 0.7, 0.15
+	'january-in-review': ['ai-agents'], // 0.05, 0.25, 0.7
+	'prolifics-and-frugals': ['product'], // 0.2, 0.7, 0.1
+	'the-slicing-fallacy': ['product'], // 0.25, 0.7, 0.05
+	'we-cant-stop-planning': ['product'], // 0.2, 0.75, 0.05
+	cost_of_change_is_agile_ceiling: ['product'], // 0.15, 0.75, 0.1
+	compounding_dev_process: ['product', 'ai-agents'], // 0.05, 0.5, 0.45
+	antigravity_is_onto_something: ['ai-agents'], // 0.05, 0.25, 0.7
+	'semi-async_valley_of_death': ['product', 'ai-agents'], // 0.1, 0.3, 0.6
+	'spec-driven-development-has-it-backwards': ['product', 'ai-agents'], // 0.1, 0.5, 0.4
+	'ai-engineer-paris-conference-notes': ['ai-agents'], // 0.05, 0.15, 0.8
+	'voice-ai-maven-course-notes': ['ai-agents'], // 0.05, 0.1, 0.85
+	'faster-answers-better-questions': ['customer-success', 'product'], // 0.3, 0.5, 0.2
+};
+
+/** An article's topics: its `topics` frontmatter field, or else the list above; undefined when it has neither. */
+export function topicsOf(article: CollectionEntry<'writing'>): Topic[] | undefined {
+	return article.data.topics ?? fromPrototype[article.id];
+}
+
+/** The ids in the list above that match no article, for example after an article's file was renamed. */
+export function unknownTopicIds(articleIds: Iterable<string>): string[] {
+	const ids = new Set(articleIds);
+	return Object.keys(fromPrototype).filter((id) => !ids.has(id));
+}
diff --git a/src/lib/share.ts b/src/lib/share.ts
index fea66b4..02a0368 100644
--- a/src/lib/share.ts
+++ b/src/lib/share.ts
@@ -19,7 +19,8 @@ export const HOME_INTRO =
 /** The share image of Home and About. The activity logs, which have none of their own, use it too. */
 export const SITE_SHARE: Share = { path: '/share.png', alt: `Josselin Perrus. ${HOME_INTRO}` };
 
-const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? '' : 's'}`;
+/** "18 articles", "1 project" */
+export const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? '' : 's'}`;
 
 /** "May 27, 2026": the date in the content is a day, which UTC keeps whatever the build machine's time zone. */
 export function formatDate(date: Date): string {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cc5b3b7..2469548 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,44 +1,419 @@
 ---
+// The home: the intro beside the topic map, then Projects and Writing. Writing lists the articles, newest first; the
+// activity logs aren't listed, but their pages keep their URLs. Picking an orange dot on the map shows only the
+// articles about its topic (src/data/topics.ts), and picking it again, or "Show all", shows them all again.
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
-import ArticlesList from '../components/ArticlesList.astro';
+import Intro from '../components/Intro.astro';
 import JsonLd from '../components/JsonLd.astro';
-import { getCollection, type CollectionEntry } from 'astro:content';
+import { projects, projectOf } from '../data/projects';
+import { profiles } from '../data/profiles';
+import { TOPIC_NAMES, topicsOf, unknownTopicIds } from '../data/topics';
 import { newestFirst } from '../lib/sort-posts';
+import { readingMinutes } from '../lib/reading-time.mjs';
+import { HOME_INTRO, articlesOnly, plural } from '../lib/share';
 
-const articles: CollectionEntry<'writing'>[] = await getCollection('writing');
+const title = 'meaningfool | Josselin Perrus, product manager building with AI agents';
+const description =
+	"Josselin Perrus's site: a product manager in Paris building AI products with AI agents. His projects, and writing on customer success, product and AI agents.";
 
-// Sort articles by date (most recent first)
-const sortedArticles = articles.sort(newestFirst);
+const articles = articlesOnly(await getCollection('writing')).sort(newestFirst);
+for (const id of unknownTopicIds(articles.map((article) => article.id))) {
+	console.warn(`src/data/topics.ts gives topics to an article that doesn't exist: ${id}`);
+}
+const rows = articles.map((article) => {
+	const topics = topicsOf(article);
+	// At 30% or more, every article has at least one topic: three shares under 30% can't make a whole.
+	if (!topics?.length) console.warn(`"${article.id}" has no topics, so picking a topic on the home's map hides it: give it a topics field.`);
+	return {
+		href: `/articles/${article.id}/`,
+		// The day in the content, as UTC keeps it whatever the build machine's time zone
+		date: article.data.date.toISOString().slice(0, 10),
+		title: article.data.title,
+		project: projectOf(article.id)?.shortName,
+		// The reading time the article page and its share image show
+		minutes: readingMinutes(article.body),
+		topics: topics ?? [],
+	};
+});
+const allText = plural(rows.length, 'article');
+
+// "May 2026", from the project's YYYY-MM
+const month = (date: string) =>
+	new Date(`${date}-01T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', year: 'numeric', timeZone: 'UTC' });
 
 // JSON-LD structured data for WebSite
 const websiteSchema = {
-  "@context": "https://schema.org",
-  "@type": "WebSite",
-  "name": "meaningfool",
-  "url": "https://meaningfool.net/",
-  "publisher": {
-    "@type": "Person",
-    "name": "Josselin Perrus",
-    "url": "https://meaningfool.net/about/"
-  }
+	'@context': 'https://schema.org',
+	'@type': 'WebSite',
+	name: 'meaningfool',
+	url: 'https://meaningfool.net/',
+	description,
+	publisher: {
+		'@type': 'Person',
+		name: 'Josselin Perrus',
+		url: 'https://meaningfool.net/about/',
+	},
 };
 ---
 
-<Layout>
+<Layout title={title} description={description}>
 	<JsonLd data={websiteSchema} />
-	<main id="main" class="legacy">
-		<section id="about">
-			<p>👋 Hey, I'm Josselin.</p>
-			<p>🥐 I'm a product person based in Paris.</p>
-			<p>✒️ I write about product and my journey towards AI-assisted programming.</p>
-			<p>📖 I'm <a href="https://www.swyx.io/learn-in-public">learning in public</a> and documenting the work on my projects,and my learnings (challenges, readings, thoughts, etc.)</p>
-			<p>🏗️ This very site was built with the help of Claude Code, and my writing / publishing workflow is AI-assisted.</p>
-		</section>
-
-		<section id="articles" aria-labelledby="articles-title">
-			<h1 id="articles-title" class="section-title">Articles</h1>
-			<ArticlesList articles={sortedArticles} />
-		</section>
+	<main id="main">
+		<Intro label="Josselin Perrus · Product manager · Paris">
+			<Fragment slot="title">I build products<br />with AI agents<span>.</span></Fragment>
+			{HOME_INTRO}
+			<div slot="after" class="cta-row">
+				<a class="cta" href="/about/">About me <span aria-hidden="true">→</span></a>
+				<ul class="profiles" role="list">
+					{profiles.map(({ href, label }) => <li><a href={href}>{label}</a></li>)}
+				</ul>
+			</div>
+		</Intro>
+
+		<div class="stack">
+			<section class="sec" aria-labelledby="projects-title">
+				<div class="sec-head">
+					<h2 id="projects-title">Projects</h2>
+					<p class="label">Things I built to learn</p>
+				</div>
+				<ul class="tiles" role="list">
+					{projects.map((project) => (
+						<li class="tile">
+							<div class="shot">
+								<Image
+									src={project.screenshot}
+									alt=""
+									widths={[362, 720]}
+									sizes="(max-width: 900px) calc(100vw - 68px), min(362px, calc((100vw - 96px) / 3 - 20px))"
+								/>
+							</div>
+							<p class="meta">{project.type} · {month(project.date)}</p>
+							<h3>
+								<a href={project.link}><span class="name">{project.name}</span> <span class="arrow" aria-hidden="true">↗</span></a>
+							</h3>
+							<p class="line">{project.description}</p>
+						</li>
+					))}
+				</ul>
+			</section>
+
+			<section class="sec" id="writing" aria-labelledby="writing-title">
+				<div class="sec-head">
+					<h2 id="writing-title" tabindex="-1">Writing</h2>
+					<p class="label count" data-writing-count data-all={allText} data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite">
+						{allText}
+					</p>
+				</div>
+				<ul class="index" role="list" data-writing>
+					{rows.map((row) => (
+						<li data-topics={row.topics.join(' ')}>
+							<a class="row" href={row.href}>
+								<time class="d" datetime={row.date}>{row.date}</time>
+								<span class="t">{row.title}</span>
+								<span class="p">{row.project ?? <span aria-hidden="true">—</span>}</span>
+								<span class="r">{row.minutes} min</span>
+							</a>
+						</li>
+					))}
+				</ul>
+			</section>
+		</div>
 	</main>
 </Layout>
 
+<style>
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	/* The intro's button and the profiles */
+	.cta-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px 24px;
+		align-items: center;
+		padding-top: 6px;
+	}
+
+	.cta {
+		padding: 10px 16px;
+		border: 1px solid var(--ink);
+		background: var(--page);
+		color: var(--ink);
+		text-decoration: none;
+	}
+
+	.cta span {
+		color: var(--accent);
+	}
+
+	.cta:hover {
+		background: var(--tint);
+	}
+
+	.profiles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 18px;
+		font-size: 12px;
+	}
+
+	.profiles a {
+		color: inherit;
+		text-decoration: underline;
+		text-decoration-color: #bcbcb5;
+		text-underline-offset: 5px;
+	}
+
+	.profiles a:hover {
+		text-decoration-color: var(--accent);
+	}
+
+	/* Projects and Writing */
+	.stack {
+		display: grid;
+		gap: 88px;
+	}
+
+	.sec {
+		display: grid;
+		gap: 24px;
+	}
+
+	.sec-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 16px;
+		padding-bottom: 14px;
+		border-bottom: 1px solid var(--line);
+	}
+
+	h2 {
+		margin: 0;
+		font-weight: 400;
+		font-size: 22px;
+		letter-spacing: -0.04em;
+	}
+
+	.label {
+		font-size: 12px;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	.count :global(button) {
+		padding: 0;
+		border: 0;
+		background: none;
+		color: var(--accent);
+		font: inherit;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+		cursor: pointer;
+	}
+
+	/* Projects: a tile each, its whole area a link to the project */
+	.tiles {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 24px;
+	}
+
+	.tile {
+		position: relative;
+		display: grid;
+		gap: 6px;
+		align-content: start;
+		min-width: 0;
+	}
+
+	.shot {
+		padding: 10px;
+		background: var(--panel);
+	}
+
+	.shot img {
+		display: block;
+		width: 100%;
+		height: auto;
+		aspect-ratio: 16 / 10;
+		object-fit: cover;
+		border: 1px solid var(--line);
+	}
+
+	.tile .meta {
+		padding-top: 10px;
+		font-size: 11px;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	h3 {
+		margin: 0;
+		font-weight: 400;
+		font-size: 16px;
+		letter-spacing: -0.03em;
+	}
+
+	h3 a {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	h3 a::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+
+	/* On hover the name is underlined, not the space and the arrow after it. */
+	h3 a:hover .name {
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
+	h3 .arrow {
+		color: var(--accent);
+	}
+
+	.tile .line {
+		font-size: 12px;
+		color: var(--muted);
+	}
+
+	/* Writing: the list is pulled up by the section's gap plus 1px, so the first row's top line lies on the heading's
+	   line. */
+	.index {
+		display: grid;
+		margin-top: -25px;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 96px minmax(0, 1fr) 120px 56px;
+		gap: 16px;
+		align-items: baseline;
+		padding: 12px 14px 11px;
+		border-top: 1px solid var(--line);
+		border-bottom: 2px solid transparent;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.row:hover,
+	.row:focus-visible {
+		background: var(--tint);
+		border-bottom-color: var(--accent);
+	}
+
+	.d,
+	.p,
+	.r {
+		font-size: 12px;
+		color: var(--muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.r {
+		text-align: right;
+	}
+
+	.t {
+		font-size: 15px;
+	}
+
+	/* Phones: the tiles stack, and the rows keep only the title and the reading time. */
+	@media (max-width: 900px) {
+		.tiles {
+			grid-template-columns: 1fr;
+		}
+
+		.row {
+			grid-template-columns: minmax(0, 1fr) 48px;
+		}
+
+		.d,
+		.p {
+			display: none;
+		}
+	}
+</style>
+
+<script>
+	// The topic filter. The listeners are on the document and added once, and each arrival on the home, by a page load
+	// or a swap by Astro's ClientRouter, resets the list and clears the map's pick. (A page the browser restores from its
+	// back-forward cache comes back as it was left, its list and its map still in step.)
+	type Writing = { list: HTMLElement; count: HTMLElement; map: HTMLElement | null };
+
+	// The home's Writing list, or null on another page.
+	function writing(): Writing | null {
+		const list = document.querySelector<HTMLElement>('[data-writing]');
+		const count = document.querySelector<HTMLElement>('[data-writing-count]');
+		return list && count ? { list, count, map: document.querySelector<HTMLElement>('topic-map') } : null;
+	}
+
+	// Shows the articles about `topic`, or all of them, and marks the topic's dot on the map.
+	function show({ list, count, map }: Writing, topic: string | null) {
+		const items = [...list.querySelectorAll<HTMLElement>('li[data-topics]')];
+		let shown = 0;
+		for (const item of items) {
+			item.hidden = !!topic && !(item.dataset.topics ?? '').split(' ').includes(topic);
+			if (!item.hidden) shown++;
+		}
+		if (map) {
+			if (topic) map.dataset.picked = topic;
+			else delete map.dataset.picked;
+		}
+		if (topic) {
+			const names: Record<string, string> = JSON.parse(count.dataset.names ?? '{}');
+			const all = document.createElement('button');
+			all.type = 'button';
+			all.dataset.showAll = '';
+			all.textContent = 'Show all';
+			count.replaceChildren(`${names[topic] ?? topic} · ${shown} of ${items.length} · `, all);
+		} else if (count.childElementCount || count.textContent?.trim() !== count.dataset.all) {
+			// Only when it changed: the count is a live region, which screen readers announce when it's rewritten.
+			count.textContent = count.dataset.all ?? '';
+		}
+	}
+
+	document.addEventListener('topicmap:pick', (event) => {
+		const page = writing();
+		if (!page) return;
+		// On the home a dot filters Writing; it never follows a link, should the map have come from another page.
+		event.preventDefault();
+		const map = event.target as HTMLElement;
+		const { topic } = (event as CustomEvent<{ topic: string }>).detail;
+		show({ ...page, map }, map.dataset.picked === topic ? null : topic);
+	});
+
+	document.addEventListener('click', (event) => {
+		const button = event.target instanceof Element ? event.target.closest('[data-show-all]') : null;
+		const page = button && writing();
+		if (!page) return;
+		show(page, null);
+		// The button is gone: keep the keyboard's or the screen reader's place in Writing, on its heading. (Focused this
+		// way after a mouse click, it shows no focus ring.)
+		document.getElementById('writing-title')?.focus({ preventScroll: true });
+	});
+
+	// Arriving on the home, by a page load or a ClientRouter swap: all the articles, and no pick.
+	function arrive() {
+		const page = writing();
+		if (page) show(page, null);
+	}
+	document.addEventListener('astro:page-load', arrive);
+	arrive();
+
+	// Leaving the home with the ClientRouter: the pick belongs to the home, so a map kept for the next page
+	// (transition:persist) arrives without it.
+	document.addEventListener('astro:before-swap', () => {
+		const page = writing();
+		if (page?.map) delete page.map.dataset.picked;
+	});
+</script>
diff --git a/src/pages/map-preview.astro b/src/pages/map-preview.astro
deleted file mode 100644
index 072c360..0000000
--- a/src/pages/map-preview.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-// TEMPORARY (#30): shows the intro block and the topic map on the redesign branch's previews, until the home (#31)
-// uses them. #31 deletes this page, with its line in astro.config.mjs. It isn't linked, indexed or in the sitemap.
-import Layout from '../layouts/Layout.astro';
-import Intro from '../components/Intro.astro';
----
-
-<Layout title="Map preview | meaningfool" noindex>
-	<main id="main">
-		<Intro label="Josselin Perrus · Product manager · Paris">
-			<Fragment slot="title">I build products<br />with AI agents<span>.</span></Fragment>
-			I'm a product manager building AI products with AI. My projects are an opportunity to test ideas and learn in public.
-			<p slot="after" class="note">Temporary preview of the intro and the map (#30). Clicking an orange dot marks it as picked; the home (#31) will filter Writing with it.</p>
-		</Intro>
-	</main>
-</Layout>
-
-<style>
-	.note {
-		padding-top: 6px;
-		font-size: 12px;
-		color: var(--muted);
-	}
-</style>
-
-<script>
-	// TEMPORARY (#30): what the home will do with a picked dot, minus the filtering.
-	document.addEventListener('topicmap:pick', (e) => {
-		const map = e.target as HTMLElement;
-		const topic = (e as CustomEvent<{ topic: string }>).detail.topic;
-		if (map.dataset.picked === topic) delete map.dataset.picked;
-		else map.dataset.picked = topic;
-	});
-</script>