diff --git a/app/src/components/article/article-detail-view.stories.tsx b/app/src/components/article/article-detail-view.stories.tsx
new file mode 100644
index 00000000..21a839e6
--- /dev/null
+++ b/app/src/components/article/article-detail-view.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { expect, waitFor } from "storybook/test";
+import { highlightsQueryKey } from "@/lib/highlights/use-highlights";
+import { ArticleDetailView } from "./article-detail-view";
+
+const STORY_ITEM_ID = "story-article-view";
+
+const SIMPLE_CONTENT = `Most improvements are small. They compound quietly: a slightly faster
+build, a slightly clearer name, a test that catches the thing before it ships.
+
+Nobody notices any one of them. Everybody notices the sum.
+
+## Start with the annoyance
+
+Pick the thing that irritates you every day and fix just that.`;
+
+// Shaped like a captured magazine feature: section breaks (from the source's
+// dividers) and a photo caption kept as a figcaption
+const SECTIONED_CONTENT = `**The light was already going** by the time we reached the harbour. The boats had come in and the nets lay drying along the wall, and nobody seemed in a hurry to be anywhere else.
+
+We sat at the end of the jetty and talked about nothing much until the lamps came on behind us.
+
+* * *
+
+**Morning came in grey.** The town was quieter than it had been the night before, and the first ferry left half empty, its wake spreading slowly across the flat water of the bay.
+
+“It’s always like this after a storm,” the harbourmaster said. “Give it a day.”
+
+![](/gallery/city-sunset-river.jpg)
+
+<figcaption>PHOTO BY A PHOTOGRAPHER</figcaption>
+
+* * *
+
+**By the third day** the weather had turned, and the harbour filled again with the noise of engines and gulls and people calling to each other across the water.`;
+
+// The real view fetches highlights; seed none so it never hits the network
+function withQueryClient() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { staleTime: Number.POSITIVE_INFINITY } },
+  });
+  client.setQueryData(highlightsQueryKey(STORY_ITEM_ID), []);
+  return client;
+}
+
+// The article reader: captured markdown rendered with the reader typography
+const meta = {
+  title: "Article/ArticleDetailView",
+  component: ArticleDetailView,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+  args: {
+    itemId: STORY_ITEM_ID,
+    content: SIMPLE_CONTENT,
+    originalName: "How to make everything slightly better",
+    enableTracking: false,
+  },
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={withQueryClient()}>
+        <div className="flex">
+          <Story />
+        </div>
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof ArticleDetailView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+// Each section after a break opens with a drop cap; the opening paragraph
+// stays plain and the caption is set apart from the body text. The play test
+// guards the rendered structure the reader's sibling selectors rely on
+// (`hr + p`, `p:has(+ figcaption)`), which only exists if captured markdown
+// still renders breaks and kept captions as siblings of the paragraphs.
+export const Sectioned: Story = {
+  args: { content: SECTIONED_CONTENT, originalName: "After the storm" },
+  play: async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(canvasElement.querySelector("article figcaption")).not.toBeNull(),
+    );
+    const firstLetterFloat = (element: Element | null) => {
+      if (!element) throw new Error("missing paragraph");
+      return getComputedStyle(element, "::first-letter").float;
+    };
+
+    const sectionOpeners = canvasElement.querySelectorAll("article hr + p");
+    expect(sectionOpeners).toHaveLength(2);
+    for (const opener of sectionOpeners) {
+      expect(firstLetterFloat(opener)).toBe("left");
+    }
+    expect(firstLetterFloat(canvasElement.querySelector("article p"))).toBe(
+      "none",
+    );
+
+    const caption = canvasElement.querySelector("article figcaption");
+    const image = caption?.previousElementSibling?.querySelector("img");
+    if (!caption || !image) throw new Error("caption isn't next to its image");
+    const gap =
+      caption.getBoundingClientRect().top -
+      image.getBoundingClientRect().bottom;
+    expect(gap).toBeGreaterThanOrEqual(0);
+    expect(gap).toBeLessThan(16);
+  },
+};
diff --git a/app/src/components/article/article-prose.ts b/app/src/components/article/article-prose.ts
index 62a02456..04d7e795 100644
--- a/app/src/components/article/article-prose.ts
+++ b/app/src/components/article/article-prose.ts
@@ -2,6 +2,17 @@
  * Typography for the article reader's body. Shared with the reader's loading
  * placeholder so its skeleton lines use the same font, size, line height and
  * paragraph spacing at every breakpoint.
+ *
+ * The paragraph opening each section (after a captured `<hr>` divider) gets a
+ * drop cap. It's our own typography rather than the publisher's — source drop
+ * caps are mostly CSS-only and can't be captured — and the article's first
+ * paragraph is left plain, since leftover page furniture can sit there.
+ *
+ * Captions follow their image as a sibling (markdown has no `<figure>`), so the
+ * image paragraph's bottom margin is dropped to sit the caption just under it.
  */
-export const ARTICLE_PROSE_CLASS =
-  "prose prose-sm md:prose-base lg:prose-lg prose-neutral dark:prose-invert max-w-none prose-headings:font-serif prose-li:font-serif prose-p:font-serif";
+export const ARTICLE_PROSE_CLASS = [
+  "prose prose-sm md:prose-base lg:prose-lg prose-neutral dark:prose-invert max-w-none prose-headings:font-serif prose-li:font-serif prose-p:font-serif",
+  "prose-figcaption:mt-2 prose-figcaption:font-serif prose-figcaption:leading-snug [&_p:has(+figcaption)]:mb-0 [&_p:has(+figcaption)_img]:mb-0",
+  "[&_hr+p]:first-letter:float-left [&_hr+p]:first-letter:mt-[0.1em] [&_hr+p]:first-letter:mr-[0.08em] [&_hr+p]:first-letter:text-[3.5em] [&_hr+p]:first-letter:leading-[0.8] [&_hr+p]:first-letter:font-semibold",
+].join(" ");
diff --git a/app/src/lib/__fixtures__/article-sectioned-magazine.html b/app/src/lib/__fixtures__/article-sectioned-magazine.html
new file mode 100644
index 00000000..c446e749
--- /dev/null
+++ b/app/src/lib/__fixtures__/article-sectioned-magazine.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+  Synthetic fixture modelled on a WordPress magazine article layout (structure
+  and class names as captured from a real long-form feature; prose replaced
+  with placeholder text). Exercises the in-body clutter, SVG section dividers
+  and classed captions handled by article-cleanup.ts.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>The Long Feature</title>
+  </head>
+  <body>
+    <header class="site-header">
+      <nav>
+        <a href="/">Home</a>
+        <a class="menu-item__link menu-item__link--subscribe" href="/subscribe">Subscribe</a>
+      </nav>
+    </header>
+    <div class="article-sponsor-desktop">
+      <a href="https://sponsor.example.com/">Presented by Sponsor Co</a>
+    </div>
+    <main>
+      <article class="article-body">
+        <h1>The Long Feature</h1>
+        <div class="share"><a href="https://x.com/share">Share on X</a></div>
+        <div class="podcast-listen">
+          <input type="checkbox" class="podcast-listen__checkbox" />
+          <div class="podcast-listen__label">
+            <label class="podcast-listen__label-toggle button">Listen on</label>
+            <div class="podcast-listen__label-name">Listen on:</div>
+          </div>
+          <div class="podcast-links">
+            <a class="podcast-links__item" href="https://podcasts.example.com/">Apple Podcasts</a>
+          </div>
+        </div>
+        <div class="article-body__content">
+          <div class="block subscribe-cta">
+            <div class="subscribe-cta__text">
+              <p><em><a href="/subscribe">Subscribe</a> to print for your office or home.</em></p>
+            </div>
+            <div class="block divider divider--style-line"><div class="divider__line"></div></div>
+          </div>
+
+          <p class="wp-block-paragraph">T<strong>he opening line.</strong> The first section begins here with enough words to read as a real paragraph of long-form prose, describing the scene in some detail so that the extractor treats it as the start of the article body rather than a fragment of navigation or furniture around it.</p>
+          <p class="wp-block-paragraph">A second paragraph continues the first section, adding more sustained prose about the people involved, the place where the interview happened, and the way the conversation unfolded over the course of a long afternoon in a quiet room overlooking the water outside.</p>
+          <p class="wp-block-paragraph">A third paragraph closes the first section with a quotation and a short reflection on what it might mean, keeping the prose going long enough that Readability scores this container as the main content of the page.</p>
+
+          <div class="block single-sponsor">
+            <a href="https://sponsor.example.com/" class="single-sponsor__image"><img src="https://example.com/sponsor-banner.jpg" alt="" /></a>
+          </div>
+
+          <div class="block divider divider--style-icon">
+            <svg width="38" height="20" viewBox="0 0 38 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 19 L19 1 L37 19" stroke="currentColor" /></svg>
+          </div>
+
+          <p class="dropcap wp-block-paragraph"><strong>The second section</strong> opens after an ornamental divider, picking the story up somewhere new with another long paragraph of prose that carries the reader forward through the next part of the narrative and introduces a new set of characters.</p>
+          <p class="wp-block-paragraph">More of the second section follows here, again written at length so the body reads as continuous prose, with details about the history of the subject and the decisions that shaped the years that followed the events described above.</p>
+
+          <div class="block read-more">
+            <div class="read-more__title">Read More</div>
+            <div class="read-more__articles">
+              <a class="read-more__article" href="/article/another-story/">
+                <img src="https://example.com/another-story.jpg" alt="" />
+                <h3>Another Story Entirely</h3>
+                <p>A short teaser for a different article that the publisher would like you to read next.</p>
+                <span>By Someone Else</span>
+              </a>
+              <a class="read-more__article" href="/article/a-third-story/">
+                <img src="https://example.com/a-third-story.jpg" alt="" />
+                <h3>A Third Story</h3>
+                <p>Another teaser line promoting a third, unrelated article from the same publisher.</p>
+                <span>By A Third Writer</span>
+              </a>
+            </div>
+          </div>
+
+          <p class="wp-block-paragraph">The second section continues after the promotional block, and this paragraph must survive cleanup intact, because it is part of the article itself and sits directly between two pieces of publisher furniture on the page.</p>
+
+          <div class="block single-image">
+            <div class="single-image__image"><img src="https://example.com/photo.jpg" alt="" width="2560" height="1741" /></div>
+            <div class="single-image__caption">
+              <div class="single-image__caption-short"><p>PHOTO BY A PHOTOGRAPHER</p></div>
+            </div>
+          </div>
+
+          <div class="block divider divider--style-icon">
+            <svg width="38" height="20" viewBox="0 0 38 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 19 L19 1 L37 19" stroke="currentColor" /></svg>
+          </div>
+
+          <p class="dropcap wp-block-paragraph"><strong>The third section</strong> begins after a second divider and runs to the end of the piece, with a final stretch of prose that brings the story to a close and returns to the scene described in the opening paragraph of the article.</p>
+          <p class="wp-block-paragraph">* * *</p>
+          <p class="wp-block-paragraph">A closing coda after an asterism break, written as one more long paragraph so that it reads as prose, ending the article on a quiet note that looks back over everything that came before it in the piece.</p>
+
+          <div class="block guest-subscribe-form">
+            <p>Get the newsletter in your inbox every week.</p>
+            <form><input type="email" /><button>Sign up</button></form>
+          </div>
+        </div>
+      </article>
+      <section class="recommended-items">
+        <h2>Recommended</h2>
+        <a href="/article/one/">One</a>
+        <a href="/article/two/">Two</a>
+      </section>
+    </main>
+    <footer class="site-footer"><p>© The Publisher</p></footer>
+  </body>
+</html>
diff --git a/app/src/lib/article-cleanup.test.ts b/app/src/lib/article-cleanup.test.ts
new file mode 100644
index 00000000..04af0549
--- /dev/null
+++ b/app/src/lib/article-cleanup.test.ts
@@ -0,0 +1,226 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { JSDOM } from "jsdom";
+import { describe, expect, it } from "vitest";
+import {
+  cleanArticleDocument,
+  flattenFigcaptions,
+  tidySectionBreaks,
+} from "./article-cleanup";
+import { extractReadableSignals } from "./readable-signals";
+
+const PROSE = "word ".repeat(80).trim();
+
+function documentFor(bodyHtml: string): Document {
+  return new JSDOM(`<body>${bodyHtml}</body>`).window.document;
+}
+
+function readFixture(file: string): string {
+  return readFileSync(join(__dirname, "__fixtures__", file), "utf-8");
+}
+
+describe("cleanArticleDocument — clutter blocks", () => {
+  it("removes a block whose class names a clutter pattern", () => {
+    const document = documentFor(
+      `<p>${PROSE}</p><div class="block read-more"><a href="/x">Other story</a></div>`,
+    );
+    const report = cleanArticleDocument(document);
+    expect(report.removedBlocks).toEqual(["block read-more"]);
+    expect(document.body.textContent).not.toContain("Other story");
+  });
+
+  it("matches whole class-name segments, including BEM elements and modifiers", () => {
+    const document = documentFor(
+      `<p>${PROSE}</p>
+       <div class="read-more__title">A</div>
+       <div class="newsletter--inline">B</div>
+       <div class="spread-moreish">C</div>
+       <div class="adapter">D</div>`,
+    );
+    const { removedBlocks } = cleanArticleDocument(document);
+    expect(removedBlocks).toEqual(["read-more__title", "newsletter--inline"]);
+    expect(document.body.textContent).toContain("C");
+    expect(document.body.textContent).toContain("D");
+  });
+
+  it("keeps a matched block that contains a prose paragraph", () => {
+    const document = documentFor(
+      `<p>${PROSE}</p><p>${PROSE}</p><p>${PROSE}</p><div class="related"><p>${PROSE}</p></div>`,
+    );
+    expect(cleanArticleDocument(document).removedBlocks).toEqual([]);
+  });
+
+  it("keeps a matched wrapper holding a large share of the page's text", () => {
+    const short = "a short line of text";
+    const document = documentFor(
+      `<div class="related-content-wrapper">${`<p>${short}</p>`.repeat(10)}</div><p>${short}</p>`,
+    );
+    expect(cleanArticleDocument(document).removedBlocks).toEqual([]);
+  });
+
+  it("never removes the article wrapper or a block containing it", () => {
+    const document = documentFor(
+      `<div class="share-layout"><article class="promo-article"><p>short</p></article></div>`,
+    );
+    expect(cleanArticleDocument(document).removedBlocks).toEqual([]);
+  });
+
+  it("never removes a clutter-classed articleBody wrapper", () => {
+    const document = documentFor(
+      `<div class="share-wrap" itemprop="articleBody"><p>short</p></div>`,
+    );
+    expect(cleanArticleDocument(document).removedBlocks).toEqual([]);
+  });
+
+  it("keeps a matched block holding a preserved tweet marker", () => {
+    const document = documentFor(
+      `<p>${PROSE}</p><div class="share-embed"><p data-embed-type="twitter">[[TWEET:123]]</p></div>`,
+    );
+    expect(cleanArticleDocument(document).removedBlocks).toEqual([]);
+  });
+});
+
+describe("cleanArticleDocument — section dividers", () => {
+  it("turns an empty or SVG-only divider block into an <hr>", () => {
+    const document = documentFor(
+      `<div class="divider"><div class="divider__line"></div></div>
+       <div class="section-break"><svg><path d="M0 0" /></svg></div>
+       <div role="separator"></div>`,
+    );
+    expect(cleanArticleDocument(document).dividers).toBe(3);
+    expect(document.body.querySelectorAll("hr")).toHaveLength(3);
+  });
+
+  it("turns an asterism paragraph into an <hr>", () => {
+    const document = documentFor(
+      "<p>* * *</p><p>***</p><p>⁂</p><p>* not a break</p>",
+    );
+    expect(cleanArticleDocument(document).dividers).toBe(3);
+    expect(document.body.textContent).toContain("* not a break");
+  });
+
+  it("leaves a divider-classed block alone when it has text or media", () => {
+    const document = documentFor(
+      `<div class="divider">Chapter two</div><div class="separator"><img src="a.jpg" /></div><img class="divider" src="b.png" />`,
+    );
+    expect(cleanArticleDocument(document).dividers).toBe(0);
+  });
+
+  it("doesn't convert a divider inside a removed clutter block", () => {
+    const document = documentFor(
+      `<p>${PROSE}</p><div class="subscribe-cta"><p>Subscribe</p><div class="divider"></div></div>`,
+    );
+    const report = cleanArticleDocument(document);
+    expect(report.removedBlocks).toEqual(["subscribe-cta"]);
+    expect(report.dividers).toBe(0);
+  });
+});
+
+describe("cleanArticleDocument — captions", () => {
+  it("turns the outermost classed caption into a <figcaption>", () => {
+    const document = documentFor(
+      `<div class="single-image__caption"><div class="single-image__caption-short"><p>PHOTO BY X</p></div></div>`,
+    );
+    expect(cleanArticleDocument(document).captions).toBe(1);
+    expect(document.querySelectorAll("figcaption")).toHaveLength(1);
+    expect(document.querySelector("figcaption")?.textContent).toContain(
+      "PHOTO BY X",
+    );
+  });
+
+  it("leaves captions with media, long text or an existing figcaption alone", () => {
+    const document = documentFor(
+      `<div class="caption"><img src="a.jpg" /></div>
+       <div class="wp-caption-text">${PROSE}</div>
+       <figure><figcaption class="caption">Already one</figcaption></figure>`,
+    );
+    expect(cleanArticleDocument(document).captions).toBe(0);
+  });
+});
+
+describe("flattenFigcaptions", () => {
+  it("unwraps block children into one inline run", () => {
+    const { body } = documentFor(
+      `<figcaption><div><p>Photo by <a href="/x">X</a></p></div><p>Courtesy Y</p></figcaption>`,
+    );
+    flattenFigcaptions(body);
+    expect(body.innerHTML).toBe(
+      '<figcaption>Photo by <a href="/x">X</a> Courtesy Y</figcaption>',
+    );
+  });
+});
+
+describe("tidySectionBreaks", () => {
+  it("drops leading, trailing and back-to-back breaks", () => {
+    expect(
+      tidySectionBreaks("* * *\n\nOne\n\n* * *\n\n* * *\n\nTwo\n\n* * *"),
+    ).toBe("One\n\n* * *\n\nTwo");
+  });
+
+  it("leaves breaks that separate content untouched", () => {
+    const markdown = "One\n\n* * *\n\nTwo\n\n* * *\n\nThree";
+    expect(tidySectionBreaks(markdown)).toBe(markdown);
+  });
+});
+
+describe("extractReadableSignals — sectioned magazine fixture", () => {
+  const markdown =
+    extractReadableSignals(
+      readFixture("article-sectioned-magazine.html"),
+      "https://magazine.example.com/article/the-long-feature/",
+    ).articleContent ?? "";
+
+  it("drops in-body clutter", () => {
+    for (const clutter of [
+      "Read More",
+      "Another Story Entirely",
+      "Listen on",
+      "Subscribe",
+      "sponsor-banner",
+      "newsletter",
+    ]) {
+      expect(markdown).not.toContain(clutter);
+    }
+  });
+
+  it("keeps every body paragraph, including one between two clutter blocks", () => {
+    expect(markdown).toContain("he opening line.");
+    expect(markdown).toContain("The second section");
+    expect(markdown).toContain("must survive cleanup intact");
+    expect(markdown).toContain("The third section");
+    expect(markdown).toContain("A closing coda");
+  });
+
+  it("separates sections with breaks, with none dangling at either end", () => {
+    expect(markdown.match(/^\* \* \*$/gm)).toHaveLength(3);
+    expect(markdown).toMatch(/\* \* \*\n\n\*\*The second section\*\*/);
+    expect(markdown).toMatch(/\* \* \*\n\n\*\*The third section\*\*/);
+    expect(markdown.startsWith("* * *")).toBe(false);
+    expect(markdown.trimEnd().endsWith("* * *")).toBe(false);
+  });
+
+  it("keeps the photo caption as a figcaption", () => {
+    expect(markdown).toContain(
+      "<figcaption>PHOTO BY A PHOTOGRAPHER</figcaption>",
+    );
+  });
+});
+
+describe("cleanArticleDocument — real article fixtures", () => {
+  // Real article pages must come through untouched: a failure here means a
+  // pattern or guard is now eating content it shouldn't
+  for (const file of [
+    "article-fredrivett-blog-post.html",
+    "article-paulgraham-essay.html",
+    "article-every-post.html",
+  ]) {
+    it(`leaves ${file} unchanged`, () => {
+      const document = new JSDOM(readFixture(file)).window.document;
+      expect(cleanArticleDocument(document)).toEqual({
+        removedBlocks: [],
+        dividers: 0,
+        captions: 0,
+      });
+    });
+  }
+});
diff --git a/app/src/lib/article-cleanup.ts b/app/src/lib/article-cleanup.ts
new file mode 100644
index 00000000..46e01457
--- /dev/null
+++ b/app/src/lib/article-cleanup.ts
@@ -0,0 +1,243 @@
+/**
+ * Pre-Readability cleanup of a captured page, for the parts of article markup
+ * Readability gets wrong:
+ *
+ * - **Clutter blocks** ("Read More" cards, newsletter/subscribe prompts, promos,
+ *   podcast players) that sit inside the article body. Readability's own
+ *   unlikely-candidate list misses many of these class names, so they leak
+ *   into the reader mid-article.
+ * - **Section dividers** drawn as empty/SVG-only elements or asterism
+ *   paragraphs (`* * *`, `⁂`). Readability drops them as contentless, so
+ *   sections run together; they become `<hr>`.
+ * - **Captions** marked up as classed divs rather than `<figcaption>`, which
+ *   would otherwise render as ordinary body paragraphs.
+ *
+ * Matching is on whole class-name segments (`read-more` matches
+ * `block read-more` and `read-more__title`, never `already-moreish`), and every
+ * removal is guarded: a matched block that holds real prose, a large share of
+ * the page's text, the article wrapper or a preserved tweet is left alone. A
+ * miss just leaves clutter in (today's behaviour); a false hit would drop real
+ * content, so the list stays short and generic — no per-site rules.
+ */
+
+/** Class-name segment sequences marking a block as non-article clutter. */
+const CLUTTER_NAMES = [
+  "read-more",
+  "more-stories",
+  "related",
+  "recommended",
+  "recirculation",
+  "most-popular",
+  "trending",
+  "you-may-like",
+  "newsletter",
+  "subscribe",
+  "subscription",
+  "signup",
+  "sign-up",
+  "paywall",
+  "promo",
+  "sponsor",
+  "sponsored",
+  "advert",
+  "advertisement",
+  "ad",
+  "ads",
+  "share",
+  "sharing",
+  "podcast",
+  "audio-player",
+  "outbrain",
+  "taboola",
+] as const;
+
+const DIVIDER_NAMES = [
+  "divider",
+  "separator",
+  "section-break",
+  "dinkus",
+  "asterism",
+] as const;
+
+const CAPTION_NAMES = ["caption"] as const;
+
+/** A paragraph whose whole text is an ornamental break: `***`, `* * *`, `⁂`… */
+const ASTERISM_TEXT = /^(?:[*⁂•·◆◇♦❖§~]\s*){1,5}$/u;
+
+/** A matched block containing a paragraph this long is prose, not clutter. */
+const PROSE_PARAGRAPH_WORDS = 60;
+
+/** A matched block holding this share of the page's words is a wrapper. */
+const WRAPPER_WORD_SHARE = 0.3;
+
+/** Longer than this and a "caption" is more likely a body block. */
+const MAX_CAPTION_WORDS = 60;
+
+const MEDIA_SELECTOR = "img, picture, video, iframe, svg image";
+
+const ARTICLE_ROOT_SELECTOR = "article, main, [itemprop='articleBody']";
+
+/** Whether `el` is, or contains, an element matching `selector`. */
+function isOrContains(el: Element, selector: string): boolean {
+  return el.matches(selector) || el.querySelector(selector) !== null;
+}
+
+export type ArticleCleanupReport = {
+  /** Class attribute of each removed clutter block, for tests and logging. */
+  removedBlocks: string[];
+  /** How many elements were turned into `<hr>` section breaks. */
+  dividers: number;
+  /** How many classed caption elements were turned into `<figcaption>`. */
+  captions: number;
+};
+
+function countWords(text: string | null): number {
+  return (text ?? "").split(/\s+/).filter(Boolean).length;
+}
+
+function segmentsOf(value: string): string[] {
+  return value.toLowerCase().split(/[-_]+/).filter(Boolean);
+}
+
+/** Whether `segments` contains `nameSegments` as a contiguous run. */
+function containsRun(segments: string[], nameSegments: string[]): boolean {
+  for (let i = 0; i + nameSegments.length <= segments.length; i++) {
+    if (nameSegments.every((seg, j) => segments[i + j] === seg)) return true;
+  }
+  return false;
+}
+
+function classMatches(el: Element, names: readonly string[]): boolean {
+  const nameSegments = names.map(segmentsOf);
+  return Array.from(el.classList).some((token) => {
+    const segments = segmentsOf(token);
+    return nameSegments.some((name) => containsRun(segments, name));
+  });
+}
+
+const PROTECTED_TAGS = new Set(["HTML", "BODY"]);
+
+function isSafeToRemove(el: Element, bodyWords: number): boolean {
+  if (PROTECTED_TAGS.has(el.tagName)) return false;
+  if (isOrContains(el, ARTICLE_ROOT_SELECTOR)) return false;
+  // Preserved tweet embeds are marker paragraphs (see preserveSocialEmbeds)
+  if (el.textContent?.includes("[[TWEET:")) return false;
+  if (
+    bodyWords > 0 &&
+    countWords(el.textContent) / bodyWords > WRAPPER_WORD_SHARE
+  )
+    return false;
+  for (const p of Array.from(el.querySelectorAll("p"))) {
+    if (countWords(p.textContent) >= PROSE_PARAGRAPH_WORDS) return false;
+  }
+  return true;
+}
+
+function removeClutter(document: Document): string[] {
+  const bodyWords = countWords(document.body.textContent);
+  const removed: string[] = [];
+  for (const el of Array.from(document.body.querySelectorAll("[class]"))) {
+    // An ancestor already removed takes its matched descendants with it
+    if (!el.isConnected) continue;
+    if (!classMatches(el, CLUTTER_NAMES)) continue;
+    if (!isSafeToRemove(el, bodyWords)) continue;
+    removed.push(el.getAttribute("class") ?? "");
+    el.remove();
+  }
+  return removed;
+}
+
+function isContentlessBreak(el: Element): boolean {
+  if (isOrContains(el, MEDIA_SELECTOR)) return false;
+  const text = el.textContent?.trim() ?? "";
+  return text === "" || ASTERISM_TEXT.test(text);
+}
+
+function convertDividers(document: Document): number {
+  let count = 0;
+  const candidates = Array.from(
+    document.body.querySelectorAll("[class], [role='separator'], p"),
+  );
+  for (const el of candidates) {
+    if (!el.isConnected || el.tagName === "HR") continue;
+    const isDividerish =
+      el.getAttribute("role") === "separator" ||
+      classMatches(el, DIVIDER_NAMES);
+    const isAsterismParagraph =
+      el.tagName === "P" && ASTERISM_TEXT.test(el.textContent?.trim() ?? "");
+    if (!isDividerish && !isAsterismParagraph) continue;
+    if (!isContentlessBreak(el)) continue;
+    el.replaceWith(document.createElement("hr"));
+    count++;
+  }
+  return count;
+}
+
+function convertCaptions(document: Document): number {
+  let count = 0;
+  for (const el of Array.from(document.body.querySelectorAll("[class]"))) {
+    if (!el.isConnected || el.tagName === "FIGCAPTION") continue;
+    if (el.closest("figcaption") || el.querySelector("figcaption")) continue;
+    if (!classMatches(el, CAPTION_NAMES)) continue;
+    if (isOrContains(el, MEDIA_SELECTOR)) continue;
+    const words = countWords(el.textContent);
+    if (words === 0 || words > MAX_CAPTION_WORDS) continue;
+    const figcaption = document.createElement("figcaption");
+    figcaption.append(...Array.from(el.childNodes));
+    el.replaceWith(figcaption);
+    count++;
+  }
+  return count;
+}
+
+/**
+ * Cleans a captured page in place before Readability runs. Order matters:
+ * clutter goes first so a divider or caption *inside* a removed block (a
+ * subscribe prompt with its own rule line) isn't converted.
+ */
+export function cleanArticleDocument(document: Document): ArticleCleanupReport {
+  const removedBlocks = removeClutter(document);
+  const dividers = convertDividers(document);
+  const captions = convertCaptions(document);
+  return { removedBlocks, dividers, captions };
+}
+
+/**
+ * Flattens block children (`<p>`, `<div>`) inside each `<figcaption>` so a kept
+ * caption is one inline run of text — the reader's paragraph margins would
+ * otherwise space a multi-part caption out like body copy.
+ */
+export function flattenFigcaptions(root: Element): void {
+  for (const figcaption of Array.from(root.querySelectorAll("figcaption"))) {
+    const blocks = Array.from(figcaption.querySelectorAll("p, div"));
+    for (const block of blocks.reverse()) {
+      const next = block.nextSibling;
+      block.replaceWith(...Array.from(block.childNodes));
+      if (next) next.before(" ");
+    }
+    figcaption.normalize();
+  }
+}
+
+/** Turndown's rendering of `<hr>`. */
+const MARKDOWN_HR = "* * *";
+
+/**
+ * Drops section breaks that don't separate anything: leading, trailing and
+ * back-to-back `<hr>`s, left where removed clutter or Readability's own
+ * pruning used to sit between two dividers.
+ */
+export function tidySectionBreaks(markdown: string): string {
+  const blocks = markdown.split(/\n{2,}/);
+  const kept: string[] = [];
+  for (const block of blocks) {
+    const isBreak = block.trim() === MARKDOWN_HR;
+    const previousIsBreak =
+      kept.length === 0 || kept[kept.length - 1].trim() === MARKDOWN_HR;
+    if (isBreak && previousIsBreak) continue;
+    kept.push(block);
+  }
+  while (kept.length > 0 && kept[kept.length - 1].trim() === MARKDOWN_HR)
+    kept.pop();
+  return kept.join("\n\n");
+}
diff --git a/app/src/lib/readable-signals.ts b/app/src/lib/readable-signals.ts
index 635bcbc4..97bd9039 100644
--- a/app/src/lib/readable-signals.ts
+++ b/app/src/lib/readable-signals.ts
@@ -14,6 +14,11 @@
 import { Readability } from "@mozilla/readability";
 import { JSDOM } from "jsdom";
 import TurndownService from "turndown";
+import {
+  cleanArticleDocument,
+  flattenFigcaptions,
+  tidySectionBreaks,
+} from "./article-cleanup";
 import { preserveSocialEmbeds } from "./html-metadata";
 
 export type ReadableSignals = {
@@ -85,12 +90,10 @@ function normalize(text: string): string {
  * Measures link density and longest-paragraph length on the Readability HTML
  * output (before markdown conversion, so the DOM structure is intact).
  */
-function measureStructure(contentHtml: string): {
+function measureStructure(body: HTMLElement): {
   linkDensity: number;
   longestParagraphWords: number;
 } {
-  const body = new JSDOM(`<body>${contentHtml}</body>`).window.document.body;
-
   const totalLen = normalize(body.textContent ?? "").length;
   let linkLen = 0;
   for (const a of Array.from(body.querySelectorAll("a"))) {
@@ -127,24 +130,33 @@ export function extractReadableSignals(
     processedHtml = embedResult.html;
 
     const dom = new JSDOM(processedHtml, { url });
+    cleanArticleDocument(dom.window.document);
     const article = new Readability(dom.window.document).parse();
 
     if (!article?.content) {
       return { ...EMPTY, tweetIds: embedResult.tweetIds };
     }
 
-    const { linkDensity, longestParagraphWords } = measureStructure(
-      article.content,
-    );
+    const contentBody = new JSDOM(`<body>${article.content}</body>`).window
+      .document.body;
+    const { linkDensity, longestParagraphWords } =
+      measureStructure(contentBody);
+    flattenFigcaptions(contentBody);
 
     const turndown = new TurndownService({
       headingStyle: "atx",
       codeBlockStyle: "fenced",
     });
-    // Preserve inline SVGs (logos, icons, charts) as raw HTML in the markdown.
+    // Preserve inline SVGs (logos, icons, charts) as raw HTML in the markdown,
+    // and captions so the reader can style them apart from body paragraphs.
     // Cast needed because Turndown types only include HTMLElementTagNameMap.
-    turndown.keep(["svg"] as unknown as (keyof HTMLElementTagNameMap)[]);
-    const articleContent = turndown.turndown(article.content);
+    turndown.keep([
+      "svg",
+      "figcaption",
+    ] as unknown as (keyof HTMLElementTagNameMap)[]);
+    const articleContent = tidySectionBreaks(
+      turndown.turndown(contentBody.innerHTML),
+    );
 
     const wordCount = countWords(articleContent);
     const readingTime = wordCount > 0 ? Math.ceil(wordCount / 200) : null;