diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index aeac6db..83252c0 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1470,7 +1470,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.57.0"
+version = "0.58.0"
 dependencies = [
  "anyhow",
  "argon2",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index cac1ade..24a0273 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.57.0"
+version = "0.58.0"
 edition = "2021"
 default-run = "mangalord"
 
diff --git a/frontend/e2e/mobile-manga-detail.spec.ts b/frontend/e2e/mobile-manga-detail.spec.ts
new file mode 100644
index 0000000..67e4953
--- /dev/null
+++ b/frontend/e2e/mobile-manga-detail.spec.ts
@@ -0,0 +1,244 @@
+import { test, expect, type Page } from '@playwright/test';
+
+// Phase 3: the manga detail page gains a mobile hero (blurred backdrop
+// + transparent app bar), a sticky bottom CTA whose wording reflects
+// read progress, a 3-line description clamp with Read more, and an
+// overflow Sheet that hosts secondary actions (Edit / Upload chapter /
+// Add to collection / Force resync). Desktop layout is preserved.
+
+const MOBILE = { width: 390, height: 844 } as const;
+const DESKTOP = { width: 1280, height: 720 } as const;
+
+const mangaId = 'a1111111-1111-1111-1111-111111111111';
+const firstChapterId = 'c1111111-1111-1111-1111-111111111111';
+const latestChapterId = 'c2222222-2222-2222-2222-222222222222';
+
+// Chapters arrive newest-first from the API (source_index DESC) — the
+// detail page's "Read first chapter" CTA targets the last element.
+const chaptersFixture = [
+    {
+        id: latestChapterId,
+        manga_id: mangaId,
+        number: 2,
+        title: 'Second',
+        page_count: 10,
+        created_at: '2026-02-01T00:00:00Z'
+    },
+    {
+        id: firstChapterId,
+        manga_id: mangaId,
+        number: 1,
+        title: 'The Brand',
+        page_count: 8,
+        created_at: '2026-01-01T00:00:00Z'
+    }
+];
+
+const shortDescription = 'A brief synopsis.';
+const longDescription =
+    'This is an extended description that runs over multiple lines so that ' +
+    'the clamp + Read more behavior on mobile has actual content to truncate. ' +
+    'Long-form descriptions are common for manga that have been crawled from ' +
+    'public sources with editorial blurbs, so the catalog has to handle them ' +
+    'gracefully without pushing the chapter list below the fold on phones.';
+
+function mangaFixture(description: string = shortDescription) {
+    return {
+        id: mangaId,
+        title: 'Berserk',
+        status: 'ongoing',
+        alt_titles: [],
+        description,
+        cover_image_path: `mangas/${mangaId}/cover.png`,
+        created_at: '2026-01-01T00:00:00Z',
+        updated_at: '2026-01-01T00:00:00Z',
+        authors: [{ id: 'au1', name: 'Kentaro Miura' }],
+        genres: [],
+        tags: []
+    };
+}
+
+async function mockDetail(
+    page: Page,
+    opts: {
+        description?: string;
+        readProgress?: {
+            chapter_id: string;
+            chapter_number: number;
+            page: number;
+        } | null;
+        authed?: boolean;
+    } = {}
+) {
+    const authed = opts.authed ?? false;
+
+    await page.route('**/api/v1/auth/config', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ self_register_enabled: true, private_mode: false })
+        })
+    );
+    await page.route('**/api/v1/auth/me', (route) =>
+        route.fulfill({
+            status: authed ? 200 : 401,
+            contentType: 'application/json',
+            body: authed
+                ? JSON.stringify({
+                      user: {
+                          id: 'u1',
+                          username: 'reader',
+                          created_at: '2026-01-01T00:00:00Z',
+                          is_admin: false
+                      }
+                  })
+                : JSON.stringify({
+                      error: { code: 'unauthenticated', message: 'unauthenticated' }
+                  })
+        })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({})
+        })
+    );
+    await page.route('**/api/v1/me/bookmarks*', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
+        })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(mangaFixture(opts.description))
+        })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                items: chaptersFixture,
+                page: { limit: 50, offset: 0, total: chaptersFixture.length }
+            })
+        })
+    );
+    await page.route(`**/api/v1/me/read-progress/${mangaId}`, (route) =>
+        route.fulfill({
+            status: opts.readProgress ? 200 : 404,
+            contentType: 'application/json',
+            body: opts.readProgress
+                ? JSON.stringify(opts.readProgress)
+                : JSON.stringify({ error: { code: 'not_found', message: 'not found' } })
+        })
+    );
+    // 1x1 transparent PNG so cover image requests don't 404 noisily.
+    const png = Buffer.from(
+        '89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
+        'hex'
+    );
+    await page.route('**/api/v1/files/**', (route) =>
+        route.fulfill({ status: 200, contentType: 'image/png', body: png })
+    );
+}
+
+test.describe('mobile manga detail', () => {
+    test('phone viewport: with no progress, CTA reads "Read first chapter" and links to the oldest chapter', async ({
+        page
+    }) => {
+        await mockDetail(page);
+        await page.setViewportSize(MOBILE);
+        await page.goto(`/manga/${mangaId}`);
+
+        await expect(page.getByTestId('mobile-hero')).toBeVisible();
+
+        const cta = page.getByTestId('continue-cta');
+        await expect(cta).toHaveText('Read first chapter');
+        await expect(cta).toHaveAttribute(
+            'href',
+            `/manga/${mangaId}/chapter/${firstChapterId}`
+        );
+    });
+
+    test('phone viewport: with progress, CTA reads "Continue {chapterLabel}" and links to the in-progress chapter', async ({
+        page
+    }) => {
+        await mockDetail(page, {
+            authed: true,
+            readProgress: { chapter_id: latestChapterId, chapter_number: 2, page: 5 }
+        });
+        await page.setViewportSize(MOBILE);
+        await page.goto(`/manga/${mangaId}`);
+
+        const cta = page.getByTestId('continue-cta');
+        // chapterLabel returns the title when present, falling back to
+        // "Chapter N" only when empty — the fixture has title "Second".
+        await expect(cta).toHaveText(/Continue\s+Second/);
+        await expect(cta).toHaveAttribute(
+            'href',
+            `/manga/${mangaId}/chapter/${latestChapterId}`
+        );
+    });
+
+    test('phone viewport: short description shows no Read more toggle', async ({ page }) => {
+        await mockDetail(page, { description: shortDescription });
+        await page.setViewportSize(MOBILE);
+        await page.goto(`/manga/${mangaId}`);
+
+        await expect(page.getByTestId('manga-description')).toBeVisible();
+        await expect(page.getByTestId('read-more-toggle')).toHaveCount(0);
+    });
+
+    test('phone viewport: long description shows Read more, expands on tap, collapses on second tap', async ({
+        page
+    }) => {
+        await mockDetail(page, { description: longDescription });
+        await page.setViewportSize(MOBILE);
+        await page.goto(`/manga/${mangaId}`);
+
+        const toggle = page.getByTestId('read-more-toggle');
+        await expect(toggle).toHaveText('Read more');
+
+        await toggle.click();
+        await expect(toggle).toHaveText('Read less');
+
+        await toggle.click();
+        await expect(toggle).toHaveText('Read more');
+    });
+
+    test('phone viewport: overflow ⋯ opens the actions sheet with Edit / Upload / Add-to-collection rows', async ({
+        page
+    }) => {
+        await mockDetail(page, { authed: true });
+        await page.setViewportSize(MOBILE);
+        await page.goto(`/manga/${mangaId}`);
+
+        await expect(page.getByTestId('detail-overflow-sheet')).toBeHidden();
+        await page.getByTestId('detail-overflow').click();
+
+        const sheet = page.getByTestId('detail-overflow-sheet');
+        await expect(sheet).toBeVisible();
+        await expect(sheet.getByTestId('overflow-edit')).toBeVisible();
+        await expect(sheet.getByTestId('overflow-upload-chapter')).toBeVisible();
+        await expect(sheet.getByTestId('overflow-add-to-collection')).toBeVisible();
+    });
+
+    test('desktop viewport: mobile hero is hidden, existing layout + action-row stays', async ({
+        page
+    }) => {
+        await mockDetail(page, { authed: true });
+        await page.setViewportSize(DESKTOP);
+        await page.goto(`/manga/${mangaId}`);
+
+        // Hero block exists in DOM but is hidden by CSS at >640px.
+        await expect(page.getByTestId('mobile-hero')).toBeHidden();
+        // The desktop title/cover/action surfaces remain visible.
+        await expect(page.getByTestId('manga-title')).toBeVisible();
+        await expect(page.getByTestId('bookmark-toggle')).toBeVisible();
+    });
+});
diff --git a/frontend/package.json b/frontend/package.json
index aa4ed38..32b9388 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 4508652..57de468 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -87,9 +87,13 @@
     // is unaffected; it continues to follow the reader fullscreen slide
     // transform.
     const HIDE_MOBILE_CHROME_PATHS = new Set(['/login', '/register']);
+    const HIDE_MOBILE_CHROME_ROUTES = new Set([
+        '/manga/[id]',
+        '/manga/[id]/chapter/[chapter_id]'
+    ]);
     const showMobileChrome = $derived.by(() => {
         if (HIDE_MOBILE_CHROME_PATHS.has($page.url.pathname)) return false;
-        if ($page.route?.id === '/manga/[id]/chapter/[chapter_id]') return false;
+        if (HIDE_MOBILE_CHROME_ROUTES.has($page.route?.id ?? '')) return false;
         return true;
     });
 
@@ -381,6 +385,18 @@
         padding-top: 0;
     }
 
+    @media (max-width: 640px) {
+        :global(html[data-mobile-full-bleed='true']) main {
+            /* Mobile detail page surrenders the layout's top reservation
+               so its hero can sit at the viewport top under a transparent
+               page-specific app bar. Horizontal and bottom padding are
+               preserved so the body content (description, chapter list)
+               keeps its gutters; the hero negates the horizontal padding
+               itself via negative margins. */
+            padding-top: 0;
+        }
+    }
+
     /* Mobile chrome (AppBar + BottomNav) is rendered always when the
        route opts in, but CSS-hides above the breakpoint so the desktop
        header is the only visible top-chrome. The ResizeObserver in the
diff --git a/frontend/src/routes/manga/[id]/+page.svelte b/frontend/src/routes/manga/[id]/+page.svelte
index 94b6bff..a444ec1 100644
--- a/frontend/src/routes/manga/[id]/+page.svelte
+++ b/frontend/src/routes/manga/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { browser } from '$app/environment';
+    import { goto } from '$app/navigation';
     import { fileUrl, ApiError } from '$lib/api/client';
     import { createBookmark, deleteBookmark, type Bookmark } from '$lib/api/bookmarks';
     import {
@@ -14,12 +16,17 @@
     import { listTags, type Tag } from '$lib/api/tags';
     import { session } from '$lib/session.svelte';
     import Chip from '$lib/components/Chip.svelte';
+    import Sheet from '$lib/components/Sheet.svelte';
     import AddToCollectionModal from '$lib/components/AddToCollectionModal.svelte';
     import Plus from '@lucide/svelte/icons/plus';
     import FolderPlus from '@lucide/svelte/icons/folder-plus';
     import Pencil from '@lucide/svelte/icons/pencil';
     import UploadCloud from '@lucide/svelte/icons/upload-cloud';
     import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+    import MoreHorizontal from '@lucide/svelte/icons/more-horizontal';
+    import BookmarkIcon from '@lucide/svelte/icons/bookmark';
+    import BookmarkCheck from '@lucide/svelte/icons/bookmark-check';
 
     let { data } = $props();
     // `manga` is locally overridable so a successful force resync can
@@ -66,6 +73,58 @@
 
     let busy = $state(false);
     let altTitlesOpen = $state(false);
+    let overflowOpen = $state(false);
+    let descExpanded = $state(false);
+
+    // Cheap heuristic — descriptions short enough to fit in ~3 lines
+    // don't need a Read more toggle. Avoids dangling buttons that
+    // would do nothing visible on tap.
+    const descNeedsClamp = $derived((manga.description?.length ?? 0) > 200);
+
+    /**
+     * Sticky-CTA target on the mobile detail. Three states:
+     * - Has read progress → "Continue {chapterLabel}"
+     * - No progress, has chapters → "Read first chapter" (oldest = end of
+     *   the list since the server returns chapters newest-first)
+     * - No chapters → null (CTA bar hides)
+     */
+    const ctaTarget = $derived.by(() => {
+        if (continueChapterId && continueLabel) {
+            return {
+                href: `/manga/${manga.id}/chapter/${continueChapterId}`,
+                label: `Continue ${continueLabel}`
+            };
+        }
+        if (chapters.length > 0) {
+            const first = chapters[chapters.length - 1];
+            return {
+                href: `/manga/${manga.id}/chapter/${first.id}`,
+                label: 'Read first chapter'
+            };
+        }
+        return null;
+    });
+
+    function onBack() {
+        if (!browser) return;
+        if (window.history.length > 1) {
+            window.history.back();
+        } else {
+            goto('/');
+        }
+    }
+
+    // Tell the root layout to drop its top padding so the hero can sit
+    // at the viewport top under the page-specific app bar. Scoped to
+    // <html> so the rule survives sibling re-renders; cleaned up on
+    // navigation away from the detail.
+    $effect(() => {
+        if (!browser) return;
+        document.documentElement.dataset.mobileFullBleed = 'true';
+        return () => {
+            delete document.documentElement.dataset.mobileFullBleed;
+        };
+    });
 
     async function toggleBookmark() {
         if (!session.user) return;
@@ -217,6 +276,76 @@
 </svelte:head>
 
 <article>
+    <header class="mobile-hero" data-testid="mobile-hero">
+        {#if manga.cover_image_path}
+            <div
+                class="hero-bg"
+                style="background-image: url('{fileUrl(manga.cover_image_path)}');"
+                aria-hidden="true"
+            ></div>
+        {/if}
+        <div class="hero-scrim" aria-hidden="true"></div>
+
+        <div class="hero-appbar">
+            <button
+                type="button"
+                class="hero-icon-btn"
+                onclick={onBack}
+                aria-label="Back"
+                data-testid="detail-back"
+            >
+                <ChevronLeft size={22} aria-hidden="true" />
+            </button>
+            <div class="hero-spacer"></div>
+            {#if session.user}
+                <button
+                    type="button"
+                    class="hero-icon-btn"
+                    onclick={toggleBookmark}
+                    disabled={busy}
+                    aria-label={mangaBookmark ? 'Remove bookmark' : 'Add bookmark'}
+                    aria-pressed={mangaBookmark ? 'true' : 'false'}
+                    data-testid="detail-bookmark-icon"
+                >
+                    {#if mangaBookmark}
+                        <BookmarkCheck size={22} aria-hidden="true" />
+                    {:else}
+                        <BookmarkIcon size={22} aria-hidden="true" />
+                    {/if}
+                </button>
+            {/if}
+            <button
+                type="button"
+                class="hero-icon-btn"
+                onclick={() => (overflowOpen = true)}
+                aria-label="More actions"
+                data-testid="detail-overflow"
+            >
+                <MoreHorizontal size={22} aria-hidden="true" />
+            </button>
+        </div>
+
+        <div class="hero-content">
+            {#if manga.cover_image_path}
+                <img
+                    class="hero-cover"
+                    src={fileUrl(manga.cover_image_path)}
+                    alt=""
+                    loading="eager"
+                />
+            {/if}
+            <div class="hero-text">
+                <h1 class="hero-title" data-testid="mobile-manga-title">{manga.title}</h1>
+                {#if authors.length > 0}
+                    <p class="hero-authors" data-testid="mobile-manga-authors">
+                        by {authors.map((a) => a.name).join(', ')}
+                    </p>
+                {/if}
+                <span class="hero-status status-{manga.status}">{statusLabel}</span>
+            </div>
+        </div>
+    </header>
+
     <header class="overview">
         {#if manga.cover_image_path}
             <img
@@ -342,7 +471,23 @@
             {/if}
 
             {#if manga.description}
-                <p class="description" data-testid="manga-description">{manga.description}</p>
+                <p
+                    class="description"
+                    class:clamped={descNeedsClamp && !descExpanded}
+                    data-testid="manga-description"
+                >
+                    {manga.description}
+                </p>
+                {#if descNeedsClamp}
+                    <button
+                        type="button"
+                        class="read-more"
+                        onclick={() => (descExpanded = !descExpanded)}
+                        data-testid="read-more-toggle"
+                    >
+                        {descExpanded ? 'Read less' : 'Read more'}
+                    </button>
+                {/if}
             {/if}
 
             {#if session.user}
@@ -459,6 +604,73 @@
             </ol>
         {/if}
     </section>
+
+    <Sheet
+        open={overflowOpen}
+        title="Actions"
+        onClose={() => (overflowOpen = false)}
+        testid="detail-overflow-sheet"
+    >
+        <div class="overflow-list">
+            {#if session.user}
+                <button
+                    type="button"
+                    class="overflow-item"
+                    onclick={() => {
+                        overflowOpen = false;
+                        collectionModalOpen = true;
+                    }}
+                    data-testid="overflow-add-to-collection"
+                >
+                    <FolderPlus size={18} aria-hidden="true" />
+                    <span>Add to collection</span>
+                </button>
+                <a
+                    class="overflow-item"
+                    href="/manga/{manga.id}/edit"
+                    data-testid="overflow-edit"
+                >
+                    <Pencil size={18} aria-hidden="true" />
+                    <span>Edit manga</span>
+                </a>
+                <a
+                    class="overflow-item"
+                    href="/manga/{manga.id}/upload-chapter"
+                    data-testid="overflow-upload-chapter"
+                >
+                    <UploadCloud size={18} aria-hidden="true" />
+                    <span>Upload chapter</span>
+                </a>
+                {#if session.user.is_admin}
+                    <button
+                        type="button"
+                        class="overflow-item"
+                        onclick={() => {
+                            overflowOpen = false;
+                            forceResync();
+                        }}
+                        disabled={resyncBusy}
+                        data-testid="overflow-force-resync"
+                    >
+                        <RefreshCw size={18} aria-hidden="true" />
+                        <span>{resyncBusy ? 'Resyncing…' : 'Force resync'}</span>
+                    </button>
+                {/if}
+            {:else}
+                <a class="overflow-item" href="/login" data-testid="overflow-signin">
+                    Sign in to bookmark or collect
+                </a>
+            {/if}
+        </div>
+    </Sheet>
+
+    {#if ctaTarget}
+        <div class="cta-bar" data-testid="cta-bar">
+            <a class="cta" href={ctaTarget.href} data-testid="continue-cta">
+                {ctaTarget.label}
+            </a>
+        </div>
+    {/if}
 </article>
 
 <style>
@@ -719,4 +931,268 @@
         margin-left: var(--space-2);
         font-size: var(--font-sm);
     }
+
+    /* Mobile hero + chrome — hidden above 640px so the existing
+       desktop layout stays untouched. */
+    .mobile-hero {
+        display: none;
+    }
+
+    .read-more {
+        display: none;
+    }
+
+    .cta-bar {
+        display: none;
+    }
+
+    @media (max-width: 640px) {
+        .mobile-hero {
+            position: relative;
+            display: block;
+            margin: 0 calc(-1 * var(--space-3)) var(--space-4);
+            overflow: hidden;
+            color: #fff;
+            min-height: 220px;
+        }
+
+        .hero-bg {
+            position: absolute;
+            inset: -20px;
+            background-size: cover;
+            background-position: center;
+            filter: blur(28px);
+            transform: scale(1.1);
+            z-index: 0;
+        }
+
+        .hero-scrim {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 0.45),
+                rgba(0, 0, 0, 0.75)
+            );
+            z-index: 0;
+        }
+
+        .hero-appbar {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            gap: var(--space-1);
+            padding: var(--space-2) var(--space-2);
+            padding-top: calc(var(--space-2) + var(--safe-top));
+            min-height: 48px;
+        }
+
+        .hero-spacer {
+            flex: 1;
+        }
+
+        .hero-icon-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            background: rgba(0, 0, 0, 0.25);
+            color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: var(--radius-pill);
+            cursor: pointer;
+        }
+
+        .hero-icon-btn:hover:not(:disabled),
+        .hero-icon-btn:focus-visible {
+            background: rgba(0, 0, 0, 0.45);
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            gap: var(--space-3);
+            padding: var(--space-3) var(--space-3) var(--space-4);
+        }
+
+        .hero-cover {
+            width: 110px;
+            aspect-ratio: 2 / 3;
+            object-fit: cover;
+            border-radius: var(--radius-md);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+            background: var(--surface);
+            flex-shrink: 0;
+        }
+
+        .hero-text {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-1);
+            justify-content: flex-end;
+            min-width: 0;
+        }
+
+        .hero-title {
+            margin: 0;
+            font-size: var(--font-xl);
+            line-height: var(--leading-tight);
+            color: #fff;
+            /* Clamp to two lines — long titles ellipsize rather than
+               push the status badge off the cover. */
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .hero-authors {
+            margin: 0;
+            font-size: var(--font-sm);
+            color: rgba(255, 255, 255, 0.85);
+        }
+
+        .hero-status {
+            align-self: flex-start;
+            display: inline-flex;
+            align-items: center;
+            padding: 2px var(--space-2);
+            border-radius: var(--radius-pill);
+            font-size: var(--font-xs);
+            font-weight: var(--weight-semibold);
+            background: rgba(255, 255, 255, 0.15);
+            color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.25);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+
+        .hero-status.status-completed {
+            background: rgba(74, 222, 128, 0.2);
+            border-color: rgba(74, 222, 128, 0.6);
+        }
+
+        /* Hide the desktop hero pieces (cover img + title-row) on mobile
+           — the new hero block above replaces them. The rest of .meta
+           (genres, alt-titles, tags, description) is preserved. */
+        .overview > .cover {
+            display: none;
+        }
+
+        .overview .title-row {
+            display: none;
+        }
+
+        .overview {
+            grid-template-columns: 1fr;
+            margin-bottom: var(--space-4);
+        }
+
+        /* Inline action-row is replaced by the AppBar bookmark icon +
+           overflow sheet on mobile; the inline Continue link is
+           replaced by the sticky bottom CTA. */
+        .action-row {
+            display: none;
+        }
+
+        .resync-msg {
+            display: none;
+        }
+
+        .continue {
+            display: none;
+        }
+
+        .description.clamped {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            white-space: normal;
+        }
+
+        .read-more {
+            display: inline-block;
+            background: transparent;
+            border: 0;
+            padding: 0;
+            color: var(--primary);
+            font-size: var(--font-sm);
+            font-weight: var(--weight-medium);
+            cursor: pointer;
+            margin: var(--space-1) 0 var(--space-3);
+        }
+
+        .cta-bar {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: var(--z-sticky);
+            display: block;
+            padding: var(--space-3);
+            padding-left: calc(var(--space-3) + var(--safe-left));
+            padding-right: calc(var(--space-3) + var(--safe-right));
+            padding-bottom: calc(var(--space-3) + var(--safe-bottom));
+            background: var(--bg);
+            border-top: 1px solid var(--border);
+        }
+
+        .cta {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 48px;
+            padding: 0 var(--space-4);
+            background: var(--primary);
+            color: var(--primary-contrast);
+            border-radius: var(--radius-md);
+            text-decoration: none;
+            font-weight: var(--weight-semibold);
+            box-shadow: var(--shadow-md);
+        }
+
+        .cta:hover {
+            background: var(--primary-hover);
+            text-decoration: none;
+        }
+
+        .overflow-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+        }
+
+        .overflow-item {
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
+            padding: var(--space-3) var(--space-1);
+            background: transparent;
+            border: 0;
+            border-bottom: 1px solid var(--border);
+            color: var(--text);
+            text-align: left;
+            text-decoration: none;
+            font-size: var(--font-base);
+            min-height: 48px;
+            cursor: pointer;
+        }
+
+        .overflow-item:last-child {
+            border-bottom: 0;
+        }
+
+        .overflow-item:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
 </style>