diff --git a/src/App.svelte b/src/App.svelte
index 83a8b90..93fdb26 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -19,6 +19,7 @@
     import CatalogSearch from "./views/CatalogSearch.svelte";
     import CatalogArtist from "./views/CatalogArtist.svelte";
     import CatalogAlbum from "./views/CatalogAlbum.svelte";
+    import CatalogDiscography from "./views/CatalogDiscography.svelte";
     import FollowToast from "./components/FollowToast.svelte";
     import {
         ui,
@@ -42,6 +43,7 @@
         catalog: CatalogSearch,
         catalogArtist: CatalogArtist,
         catalogAlbum: CatalogAlbum,
+        catalogDiscography: CatalogDiscography,
     };
     const CurrentView = $derived(views[ui.view] ?? Home);
 
@@ -54,8 +56,19 @@
        A page added here MUST also take `padding-top: var(--pane-pad)`: the bar
        cancels the pane's top padding so a page's artwork can run underneath it,
        and the page restores that inset for its own content. Without it the page
-       renders 24px too high; with it but not listed here, 24px too low. */
-    const BAR_VIEWS = new Set(["catalogArtist", "catalogAlbum", "catalog"]);
+       renders 24px too high; with it but not listed here, 24px too low.
+
+       `catalogDiscography` is the one exception to the padding rule above, and
+       deliberately: it pins a blurred ambience layer behind the glass, and that
+       layer has to begin at the very top of the pane. A padding-top here would
+       start it a --pane-pad down — halfway through the bar. It takes the inset
+       on its header's margin instead, which comes to the same place. */
+    const BAR_VIEWS = new Set([
+        "catalogArtist",
+        "catalogAlbum",
+        "catalog",
+        "catalogDiscography",
+    ]);
 
     initEvents();
     autoConnect();
diff --git a/src/lib/navigation.svelte.js b/src/lib/navigation.svelte.js
index 61a23dc..5d0418c 100644
--- a/src/lib/navigation.svelte.js
+++ b/src/lib/navigation.svelte.js
@@ -35,6 +35,8 @@ function entryKey(e) {
     switch (e.view) {
         case "catalogArtist":
             return `artist:${e.artistId}`;
+        case "catalogDiscography":
+            return `disco:${e.artistId}`;
         case "catalogAlbum":
             return `album:${e.albumId}`;
         case "catalog":
@@ -227,7 +229,11 @@ export function trail() {
     // artist crumb is taken from history when it is there, so it carries the
     // portrait and id already resolved, and is synthesised from the record's
     // own artist name when the album was reached directly.
-    if (here.view === "catalogAlbum" && here.artist) {
+    // A discography sits under its artist too, so both branches want the same
+    // crumb — found in history when it is there (it carries the portrait and id
+    // already resolved) and synthesised from the record's own artist name when
+    // the album was reached directly.
+    if ((here.view === "catalogAlbum" || here.view === "catalogDiscography") && here.artist) {
         const known = [...nav.stack]
             .reverse()
             .find((e) => e.view === "catalogArtist" && e.label === here.artist);
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index 074434e..71d1fed 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -966,6 +966,17 @@ export const catalog = $state({
     // artistPage (same id, new object, several times a second) from a real one
     // — keying on that would drag a reader back to the top mid-read.
     artistOpenSeq: 0,
+    // The artist page's OWN computed discography tabs, published by it as it
+    // derives them: `{ artistId, tabs }`. The discography page renders these
+    // rather than classifying the release list a second time.
+    //
+    // It has to work this way. The filing depends on `descHints` — editorial
+    // release-type evidence the artist page harvests in the background while
+    // you look at it — and on the MusicBrainz type hints from the deferred
+    // identity pass. Neither is derivable from the payload alone, so a second
+    // classifier would read neither and would file some releases differently
+    // from the page that linked to it. One list, computed once, handed over.
+    discoTabs: null,
     albumLoading: false,
     albumPage: null, // { album, tracks }
     // What the thing you clicked already knew about the record — cover, title,
@@ -1426,6 +1437,10 @@ export async function openEntry(entry) {
     switch (entry.view) {
         case "catalogArtist":
             return openCatalogArtist(entry.artistId);
+        case "catalogDiscography":
+            // Falls back to the artist page by itself when the tabs it needs
+            // are not the ones in hand — see openCatalogDiscography.
+            return openCatalogDiscography(entry.artistId);
         case "catalogAlbum":
             // A local record lives on this same view but is composed from the
             // library rather than fetched — the back arrow has to route on the
@@ -2661,6 +2676,31 @@ export async function openCatalogArtist(artistId, seedArtist = null) {
     }
 }
 
+/**
+ * Open the artist's whole discography on a page of its own.
+ *
+ * Reached from the artist page's Discography section, and only from there —
+ * the tabs it renders are the ones that page published (see `discoTabs`). If
+ * they are missing or belong to somebody else, this lands on the artist page
+ * instead, which republishes them and puts "Show all" one click away. That is
+ * the honest failure: an empty discography would be a lie about the catalogue.
+ */
+export async function openCatalogDiscography(artistId, seedArtist = null) {
+    const artist = seedArtist ?? catalog.artistPage?.artist ?? null;
+    if (!catalog.discoTabs || catalog.discoTabs.artistId !== artistId) {
+        return openCatalogArtist(artistId, artist);
+    }
+    captureScroll();
+    ui.view = "catalogDiscography";
+    recordVisit({
+        view: "catalogDiscography",
+        label: "Discography",
+        artistId,
+        artist: artist?.name ?? null,
+        glyph: "library",
+    });
+}
+
 /** Open an album's catalog page (cover + tracklist). `opts.trackId` flags a
  * track to highlight/scroll to (used by the now-playing song link). */
 export async function openCatalogAlbum(albumId, opts = {}) {
diff --git a/src/views/CatalogArtist.svelte b/src/views/CatalogArtist.svelte
index 57dceb8..77f3736 100644
--- a/src/views/CatalogArtist.svelte
+++ b/src/views/CatalogArtist.svelte
@@ -31,6 +31,7 @@
         albumDisambiguator,
         openCatalogAlbum,
         openAlbumFromPreviewItem,
+        openCatalogDiscography,
         loadFollows,
         isFollowed,
         setFollowed,
@@ -2326,6 +2327,16 @@
             .filter((tab) => tab.items.length > 0);
     });
 
+    // Hand the finished filing to the discography page, which renders THIS
+    // list rather than classifying the releases a second time. It re-publishes
+    // as the background description harvest and the MB identity pass land, so
+    // the two pages can never show a release in different tabs — see
+    // `catalog.discoTabs`.
+    $effect(() => {
+        const id = page?.artist?.id;
+        if (id != null && tabs.length) catalog.discoTabs = { artistId: id, tabs };
+    });
+
     // Albums is the default landing (like Spotify's "Popular releases"); if
     // an artist has no albums, fall back to the first non-empty tab. The
     // effect also re-validates as the staged catalog rebuilds `tabs`. Reset
@@ -5052,6 +5063,15 @@
         {#if tabs.length}
             <div class="disco-head">
                 <h2 class="disco-title">Discography</h2>
+                <!-- The whole catalogue on a page of its own. The tabs it shows
+                     are the ones derived just above, handed over rather than
+                     recomputed. -->
+                <button
+                    class="disco-all"
+                    onclick={() => openCatalogDiscography(page.artist.id, page.artist)}
+                >
+                    Show all <Icon name="chevron-right" size={14} />
+                </button>
             </div>
             <div class="disco-tabs" role="tablist">
                 {#each tabs as tab (tab.key)}
@@ -7697,6 +7717,23 @@
         color: var(--text-primary);
     }
 
+    /* Sits at the right end of the head, which is already space-between. The
+       "Show more" control under Popular is the shape being matched. */
+    .disco-all {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12.5px;
+        font-weight: 800;
+        color: var(--text-secondary);
+        padding: 5px 8px;
+        border-radius: 6px;
+    }
+    .disco-all:hover {
+        color: var(--text-primary);
+        background: var(--bg-highlight);
+    }
+
     /* Discography filter tabs. The selected tab uses the app's "accent glass"
        recipe (same as .ed-badge / .now-badge), so it tints to the artist's
        scoped accent and reads as one system with the cards below. */
diff --git a/src/views/CatalogDiscography.svelte b/src/views/CatalogDiscography.svelte
new file mode 100644
index 0000000..2363e2b
--- /dev/null
+++ b/src/views/CatalogDiscography.svelte
@@ -0,0 +1,1610 @@
+<script>
+    // The whole catalogue on one page: every release the artist page files,
+    // rendered as a stack of album-page heroes with their tracklists.
+    //
+    // Reached from the artist page's Discography section ("Show all"), and only
+    // from there — see `catalog.discoTabs` below for why that matters.
+    //
+    // The shapes here are the ones approved on research/discography (2026-08-04):
+    // the search page's top-result card as the header (compact), the album
+    // page's hero at --cover-scale 0.45 for each record, per-record accent, the
+    // year rail and the tab summary. The tab row does not stick, and there is
+    // no Playing badge.
+    import Icon from "../components/Icon.svelte";
+    import {
+        catalog,
+        openCatalogAlbum,
+        openCatalogArtist,
+        streamCatalogAlbum,
+        saveCatalogAlbum,
+        player,
+    } from "../lib/state.svelte.js";
+    import { consumeScroll, restoreScroll } from "../lib/navigation.svelte.js";
+    import { editionLabel } from "../lib/editions.js";
+    import { accentFromImage } from "../lib/color.js";
+    import { catalogAlbum } from "../lib/api.js";
+
+    /* ---------------------------------------------------------- the releases
+     * NOT re-filed here. `catalog.discoTabs` is the artist page's OWN computed
+     * tab list, published by it as it derives it — the same array object, not a
+     * second implementation of the same rules.
+     *
+     * That is deliberate and it is the whole design of this page. The filing
+     * depends on `descHints`, which the artist page fills from a background
+     * description harvest that runs while you are looking at it, and on MB type
+     * hints from the deferred identity pass. A classifier re-run here would read
+     * neither and would quietly file some releases differently than the page
+     * that linked to it. Taking the finished list means the two can never
+     * disagree, because there is only one of them.
+     */
+    const artist = $derived(catalog.artistPage?.artist ?? null);
+    const tabs = $derived(
+        catalog.discoTabs && catalog.discoTabs.artistId === artist?.id
+            ? catalog.discoTabs.tabs
+            : [],
+    );
+
+    // "All" is the landing tab and holds every release — built by CONCATENATING
+    // the per-category families, never by re-folding the whole set: a single
+    // sharing an album's base title (Pond has "Terrestrials" as both a 2026
+    // album and a 2026 single) would fold into it as a phantom edition.
+    const allTabs = $derived(
+        tabs.length
+            ? [{ key: "all", label: "All", items: tabs.flatMap((t) => t.items) }, ...tabs]
+            : [],
+    );
+
+    let activeTab = $state("all");
+    const tab = $derived(allTabs.find((t) => t.key === activeTab) ?? allTabs[0] ?? null);
+
+    /* ------------------------------------------------------------- the sort
+     * Spotify's arrangement, the app's parts: re-picking the active sort flips
+     * its direction, picking the other resets to its natural one (dates newest
+     * first, names A→Z).
+     */
+    let sortBy = $state("date");
+    let sortDesc = $state(true);
+    let menuOpen = $state(false);
+
+    const year = (r) => (r?.release_date ?? "").slice(0, 4);
+    const items = $derived.by(() => {
+        const list = [...(tab?.items ?? [])];
+        list.sort((a, b) =>
+            sortBy === "date"
+                ? (a.release_date ?? "").localeCompare(b.release_date ?? "")
+                : (a.title ?? "").localeCompare(b.title ?? ""),
+        );
+        return sortDesc ? list.reverse() : list;
+    });
+
+    function pickSort(which) {
+        if (sortBy === which) sortDesc = !sortDesc;
+        else {
+            sortBy = which;
+            sortDesc = which === "date";
+        }
+        menuOpen = false;
+    }
+
+    const known = $derived((items ?? []).reduce((a, r) => a + (r.track_count || 0), 0));
+    const someUnknown = $derived((items ?? []).some((r) => r.track_count == null));
+
+    /* --------------------------------------------------------- the tracklists
+     * The artist payload ships the release list free but carries no tracks
+     * (`hasTracksInline: false`), so every record costs one `catalog_album`
+     * call. Firing 32 of them on arrival is what the mock's un-fetched state
+     * exists to avoid: a record fetches when it scrolls near, and until it does
+     * it shows its header over a skeleton.
+     */
+    let tracksById = $state({});
+    const inFlight = new Set();
+
+    async function fetchTracks(id) {
+        if (id == null || tracksById[id] || inFlight.has(id)) return;
+        inFlight.add(id);
+        try {
+            const payload = await catalogAlbum(id);
+            const rows = payload?.tracks ?? [];
+            tracksById = { ...tracksById, [id]: rows };
+        } catch {
+            // A record whose tracklist will not load keeps its header and drops
+            // the skeleton — an empty stack of shimmer bars that never resolve
+            // reads as a hung page.
+            tracksById = { ...tracksById, [id]: [] };
+        } finally {
+            inFlight.delete(id);
+        }
+    }
+
+    /** Fetch the tracklist, and sample the accent, when the section comes
+     *  within a screen of the viewport. Both are per-record costs and neither
+     *  is worth paying for a record nobody has scrolled to yet. */
+    function nearView(node, rec) {
+        const io = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((e) => e.isIntersecting)) {
+                    fetchTracks(rec.id);
+                    queueAccent(rec.cover);
+                    io.disconnect();
+                }
+            },
+            { root: node.closest(".content") ?? null, rootMargin: "600px 0px" },
+        );
+        io.observe(node);
+        return { destroy: () => io.disconnect() };
+    }
+
+    /* ------------------------------------------------------- per-record accent
+     * Each record tints its own pills, meta and heat bars from its OWN cover —
+     * what the album page does with its browse accent, applied per section.
+     * One at a time, in scroll order, and only for records actually on screen.
+     */
+    let accents = $state({});
+    const accentQueue = [];
+    let accentBusy = false;
+
+    function queueAccent(cover) {
+        if (!cover || accents[cover] || accentQueue.includes(cover)) return;
+        accentQueue.push(cover);
+        void runAccents();
+    }
+
+    async function runAccents() {
+        if (accentBusy) return;
+        accentBusy = true;
+        try {
+            while (accentQueue.length) {
+                const cover = accentQueue.shift();
+                if (accents[cover]) continue;
+                try {
+                    const colors = await accentFromImage(cover);
+                    if (colors) accents = { ...accents, [cover]: colors };
+                } catch {
+                    /* a cover that will not sample keeps the global accent */
+                }
+            }
+        } finally {
+            accentBusy = false;
+        }
+    }
+
+    const accentStyle = (cover) => {
+        const c = accents[cover];
+        return c ? `--accent: ${c.accent}; --accent-hover: ${c.hover};` : undefined;
+    };
+
+    /* ------------------------------------------------------------- the entrance
+     * Not a new gesture: this is CatalogAlbum's edition "deal" applied to a
+     * list. Its easing is the app's, parts animate to their OWN resting opacity
+     * rather than to 1, and the resting value is read BEFORE the inline hide —
+     * a WAAPI animation is PENDING until the next frame resolves its start time,
+     * and a pending animation applies nothing, so `fill` never covers the first
+     * paint and every part would render once at full opacity before snapping to
+     * 0. An inline style lands in the same recalc, which closes it.
+     *
+     * The four numbers are the ones approved on research/discography (W1).
+     */
+    const ENTER_MS = 300;
+    const ENTER_STEP = 55; // between records
+    const ENTER_LIFT = 28;
+    const ENTER_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+    /* The ladder cannot keep climbing: at 55ms the 32nd record would arrive 1.8s
+       after the first. Everything below the fold is invisible on arrival anyway,
+       so only this many rows are dealt and the rest are simply present. */
+    const ENTER_ROWS = 8;
+
+    /** The album page's opening delays, for this page's chrome. The rail FADES
+     *  — it is sticky and its column centres itself with translateY(-50%), and
+     *  a transform does not add to a resting one, it replaces it. Dealing it
+     *  with a lift dropped the column 128px and snapped it back on release. */
+    const ENTER_CHROME = [
+        { sel: ".shero", delay: 0, lift: true },
+        { sel: ".tabrow", delay: 40, lift: true },
+        { sel: ".tab-sum", delay: 60, lift: true },
+        { sel: ".year-rail", delay: 80, lift: false },
+    ];
+
+    const reducedMotion = () =>
+        typeof matchMedia === "function"
+        && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    function dealOne(el, delay, lift) {
+        const cs = getComputedStyle(el);
+        const rest = cs.opacity || "1";
+        // Never lift a box that already carries a transform — see the rail note.
+        const canLift = lift && cs.transform === "none";
+        el.style.opacity = "0";
+        // Promoted for the duration only. Everything below the header sits on a
+        // fractional y (the compact card is 147.52px tall, so the column
+        // inherits the .52), and transform-animating text at a fractional offset
+        // re-rasterizes it every frame — visible as a shimmer. A promoted layer
+        // rasterizes once and only composites after. Released at the end: a
+        // permanent layer per record is not free.
+        el.style.willChange = canLift ? "transform, opacity" : "opacity";
+        const anim = el.animate(
+            [
+                { opacity: 0, transform: canLift ? `translateY(${ENTER_LIFT}px)` : "none" },
+                { opacity: rest, transform: "none" },
+            ],
+            { duration: ENTER_MS, delay, easing: ENTER_EASE, fill: "both" },
+        );
+        const release = () => {
+            el.style.opacity = "";
+            el.style.willChange = "";
+            anim.cancel();
+        };
+        anim.finished.then(release, release);
+    }
+
+    function playEntrance() {
+        if (!pageEl || reducedMotion()) return;
+        for (const { sel, delay, lift } of ENTER_CHROME) {
+            const el = pageEl.querySelector(sel);
+            if (el) dealOne(el, delay, lift);
+        }
+        const recs = pageEl.querySelectorAll(".rec");
+        for (let i = 0; i < Math.min(recs.length, ENTER_ROWS); i++) {
+            dealOne(recs[i], 80 + i * ENTER_STEP, true);
+        }
+    }
+
+    /* A fresh arrival starts at the top; coming BACK returns the reader to where
+     * they were. The pane outlives the view swap, so without this the page began
+     * wherever the last one had been left — and the entry point makes that
+     * certain rather than occasional: "Show all" lives in the artist page's
+     * Discography section, which is most of the way down it, so every arrival
+     * inherited a scrollTop of roughly a screenful or two and opened mid-page.
+     *
+     * `consumeScroll()` returning null IS the signal for "fresh arrival"; a
+     * number only comes from the arrows or a trail jump, and that one is
+     * re-applied rather than assigned because this page loads in stages — its
+     * records are skeletons until their tracklists land, so the page is short
+     * for the first frames and a single assignment would clamp to that height.
+     */
+    let scrolledFor = null;
+    $effect(() => {
+        const id = artist?.id ?? null;
+        if (id == null || id === scrolledFor) return;
+        scrolledFor = id;
+        const el = document.querySelector(".content");
+        if (!el) return;
+        const target = consumeScroll();
+        if (target == null) {
+            el.scrollTop = 0;
+            // The same null that means "fresh arrival" for the scroll decides
+            // the entrance: coming BACK is a return to something already read,
+            // and re-dealing it there would fight the scroll restore for the
+            // same pixels.
+            playEntrance();
+        } else {
+            restoreScroll(el, target);
+        }
+    });
+
+    // The header card tints from the ARTIST's own portrait, by the same rule the
+    // records follow. Left alone it inherits the global accent, which tracks
+    // whatever is PLAYING — so opening a discography while something unrelated
+    // was on gave the page a header in one artist's colour over records in
+    // another's (measured: a blue-violet header card above orange records).
+    $effect(() => {
+        if (artist?.picture) queueAccent(artist.picture);
+    });
+
+    /* ------------------------------------------------- the scroll-led ambience
+     * The album page's banner recipe, pinned behind the glass and crossfaded to
+     * whichever record the scroll sits over. Two layers so the outgoing cover is
+     * still fading while the incoming one rises.
+     */
+    let bannerA = $state(null);
+    let bannerB = $state(null);
+    let bannerFront = $state("a");
+    let activeYear = $state("");
+    let pane = null;
+    let pageEl = $state(null);
+
+    function setBanner(cover) {
+        if (!cover) return;
+        const front = bannerFront === "a" ? bannerA : bannerB;
+        if (front === cover) return;
+        if (bannerFront === "a") {
+            bannerB = cover;
+            bannerFront = "b";
+        } else {
+            bannerA = cover;
+            bannerFront = "a";
+        }
+    }
+
+    let scrollRaf = 0;
+    function onScroll() {
+        if (scrollRaf) return;
+        scrollRaf = requestAnimationFrame(() => {
+            scrollRaf = 0;
+            updateActive();
+        });
+    }
+
+    function updateActive() {
+        if (!pane || !pageEl) return;
+        const sections = pageEl.querySelectorAll("[data-rid]");
+        if (!sections.length) return;
+        const mark = pane.getBoundingClientRect().top + 200;
+        let cur = sections[0];
+        for (const el of sections) {
+            if (el.getBoundingClientRect().top <= mark) cur = el;
+            else break;
+        }
+        setBanner(cur.dataset.cover || "");
+        activeYear = cur.dataset.year || "";
+    }
+
+    /** The rail centres on the pane, and CSS cannot read a scroll container's
+     *  height — a percentage top offset on a sticky box resolves against the
+     *  containing block, which here is the whole page. So the pane publishes it.
+     *  Set once on attach as well as from the observer: an observer's first
+     *  callback arrives with the rendering loop, which is one frame of the rail
+     *  in the wrong place. */
+    function paneWatch(node) {
+        pane = node.closest(".content");
+        if (!pane) return {};
+        const publish = () => pane.style.setProperty("--pane-h", pane.clientHeight + "px");
+        publish();
+        const ro = new ResizeObserver(publish);
+        ro.observe(pane);
+        pane.addEventListener("scroll", onScroll, { passive: true });
+        updateActive();
+        return {
+            destroy() {
+                ro.disconnect();
+                pane.removeEventListener("scroll", onScroll);
+                pane.style.removeProperty("--pane-h");
+            },
+        };
+    }
+
+    const years = $derived([...new Set((items ?? []).map(year).filter(Boolean))]);
+
+    function jumpToYear(y) {
+        const target = pageEl?.querySelector(`[data-year="${y}"]`);
+        if (target && pane) {
+            pane.scrollTo({ top: target.offsetTop - 120, behavior: "smooth" });
+        }
+    }
+
+    const fmtCount = (n) =>
+        n == null
+            ? "—"
+            : n >= 1e6
+              ? (n / 1e6).toFixed(1) + "M"
+              : n >= 1000
+                ? Math.round(n / 1000) + "K"
+                : String(n);
+    const fmtDur = (s) =>
+        s == null ? "—" : Math.floor(s / 60) + ":" + String(s % 60).padStart(2, "0");
+    const runtimeOf = (rows) => {
+        const secs = (rows ?? []).reduce((a, x) => a + (x.duration_secs || 0), 0);
+        if (!secs) return "";
+        return secs >= 3600
+            ? Math.floor(secs / 3600) + " hr " + Math.round((secs % 3600) / 60) + " min"
+            : Math.round(secs / 60) + " min";
+    };
+</script>
+
+<svelte:window onclick={() => (menuOpen = false)} />
+
+<div class="disco-page" bind:this={pageEl} use:paneWatch>
+    <!-- The ambience, pinned behind the glass. FIRST child and margin-free: the
+         glass bar has already cancelled the pane's top padding for whatever
+         follows it, so this box starts at the very top of the pane, and the
+         sticky offset holds it there. `.disco-page` therefore carries NO top
+         padding — the header's own margin supplies the inset instead, which is
+         what keeps this box from having to fight it. -->
+    <div class="pane-banner" aria-hidden="true">
+        <div class="clip">
+            {#if bannerA}<img src={bannerA} alt="" class:on={bannerFront === "a"} />{/if}
+            {#if bannerB}<img src={bannerB} alt="" class:on={bannerFront === "b"} />{/if}
+            <div class="bn-shade"></div>
+        </div>
+    </div>
+
+    {#if !artist || !allTabs.length}
+        <p class="hint">This artist's discography isn't loaded. Open the artist page first.</p>
+    {:else}
+        <!-- The header: the search page's top-result card, compact. -->
+        <div class="shero compact" style={accentStyle(artist.picture)}>
+            <div class="hero">
+                {#if artist.picture}
+                    <div class="hero-bg" style="background-image:url('{artist.picture}')"></div>
+                {/if}
+                <div class="hero-tint"></div>
+                <div class="hero-grain"></div>
+                <div class="hero-in">
+                    <button
+                        class="card"
+                        title="Open artist"
+                        onclick={() => openCatalogArtist(artist.id, artist)}
+                    >
+                        {#if artist.picture}
+                            <img src={artist.picture} alt="" draggable="false" />
+                        {:else}
+                            <span class="placeholder"><Icon name="music" size={34} /></span>
+                        {/if}
+                    </button>
+                    <div class="hero-text">
+                        <div class="kicker">Discography</div>
+                        <div class="hero-name">{artist.name}</div>
+                        <div class="stats">
+                            {#if artist.fans != null}
+                                <span><b>{fmtCount(artist.fans)}</b><i>fans</i></span>
+                            {/if}
+                            <span><b>{items.length}</b><i>releases</i></span>
+                            <span><b>{someUnknown ? "≥" : ""}{known}</b><i>tracks</i></span>
+                        </div>
+                        <div class="actions">
+                            <button
+                                class="btn-primary"
+                                onclick={() => items[0] && streamCatalogAlbum(items[0])}
+                            >
+                                <Icon name="play" size={13} /> Play
+                            </button>
+                            <button
+                                class="btn-ghost"
+                                onclick={() => openCatalogArtist(artist.id, artist)}
+                            >
+                                Open artist
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- The tab row: the artist page's own chips, with the sort control at
+             the right end. Deliberately NOT sticky. -->
+        <div class="tabrow">
+            <div class="disco-tabs" role="tablist">
+                {#each allTabs as t (t.key)}
+                    <button
+                        class="disco-tab"
+                        class:on={activeTab === t.key}
+                        role="tab"
+                        aria-selected={activeTab === t.key}
+                        onclick={() => (activeTab = t.key)}>{t.label}</button
+                    >
+                {/each}
+            </div>
+            <div class="sortwrap">
+                <button
+                    class="sortbtn"
+                    onclick={(e) => {
+                        e.stopPropagation();
+                        menuOpen = !menuOpen;
+                    }}
+                >
+                    {sortBy === "date" ? "Release date" : "Name"}
+                    <Icon name="playlist" size={15} />
+                </button>
+                {#if menuOpen}
+                    <!-- The click handler exists only to stop the window
+                         listener that closes this from seeing clicks inside it,
+                         so there is nothing for a keyboard handler to do; the
+                         items are real buttons and reachable on their own. -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div class="menu" role="menu" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+                        <div class="mgroup">Sort by</div>
+                        <button role="menuitem" onclick={() => pickSort("date")}>
+                            Release date
+                            {#if sortBy === "date"}
+                                <span class="mcheck" class:up={!sortDesc}
+                                    ><Icon name="chevron-down" size={13} /></span
+                                >
+                            {/if}
+                        </button>
+                        <button role="menuitem" onclick={() => pickSort("name")}>
+                            Name
+                            {#if sortBy === "name"}
+                                <span class="mcheck" class:up={!sortDesc}
+                                    ><Icon name="chevron-down" size={13} /></span
+                                >
+                            {/if}
+                        </button>
+                    </div>
+                {/if}
+            </div>
+        </div>
+
+        <div class="tab-sum">
+            {items.length} releases · {someUnknown ? "≥" : ""}{known} tracks
+        </div>
+
+        <!-- The year rail. Sticky and zero-height, and FIRST among the things
+             that follow the tab row for a reason: sticky only ever pushes a box
+             DOWN toward its pin, so a rail rendered further down sits wherever
+             flow puts it until you scroll past. From here the pin always wins
+             and it is centred from the first frame. -->
+        {#if years.length > 2}
+            <div class="year-rail">
+                <div class="yr-col">
+                    {#each years as y (y)}
+                        <button class:on={activeYear === y} onclick={() => jumpToYear(y)}>{y}</button>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+
+        {#each items as r (r.familyKey ?? r.id)}
+            {@const rows = tracksById[r.id]}
+            {@const eds = r.editions && r.editions.length > 1 ? r.editions : null}
+            <section
+                class="rec"
+                data-rid={r.id}
+                data-year={year(r)}
+                data-cover={r.cover}
+                style={accentStyle(r.cover)}
+                use:nearView={r}
+            >
+                <header class="hero">
+                    <div class="identity">
+                        <button class="cover" title="Open album" onclick={() => openCatalogAlbum(r.id)}>
+                            {#if r.cover}<img src={r.cover} alt="" loading="lazy" draggable="false" />{/if}
+                            <span class="mark" aria-hidden="true"><Icon name="expand" size={22} /></span>
+                        </button>
+                        <div class="copy">
+                            <span class="kind">{(r.record_type ?? "album").toUpperCase()}</span>
+                            <h1 class:long={(r.title ?? "").length > 22}>{r.title}</h1>
+                            <p class="meta">
+                                <button class="who" onclick={() => openCatalogArtist(artist.id, artist)}>
+                                    {#if artist.picture}<img src={artist.picture} alt="" draggable="false" />{/if}
+                                    {artist.name}
+                                </button>
+                                {#if year(r)}<span class="dot">·</span> {year(r)}{/if}
+                                {#if rows?.length ?? r.track_count}
+                                    <span class="dot">·</span>
+                                    {rows?.length ?? r.track_count} tracks
+                                {/if}
+                                {#if runtimeOf(rows)}<span class="dot">·</span> {runtimeOf(rows)}{/if}
+                            </p>
+                            <div class="actions">
+                                <button class="pill" onclick={() => streamCatalogAlbum(r)}>
+                                    <Icon name="play" size={12} /> Play
+                                </button>
+                                <button class="pill ghost" onclick={() => saveCatalogAlbum(r)}>
+                                    <Icon name="download" size={13} /> Save
+                                </button>
+                                <button
+                                    class="iconbtn"
+                                    class:on={player.shuffle}
+                                    title="Shuffle this record"
+                                    aria-label="Shuffle this record"
+                                    onclick={() => streamCatalogAlbum(r)}
+                                >
+                                    <Icon name="shuffle" size={17} />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </header>
+
+                {#if eds}
+                    <div class="eds">
+                        <span class="lab">Editions</span>
+                        <div class="edrow">
+                            {#each eds as e, i (e.id)}
+                                <button
+                                    class="ed"
+                                    class:on={i === 0}
+                                    onclick={() => openCatalogAlbum(e.id)}
+                                >
+                                    <img class="ed-art" src={e.cover} alt="" loading="lazy" />
+                                    <span class="ed-copy">
+                                        <span class="n">{i === 0 ? "Original" : editionLabel(e, r)}</span>
+                                        <span class="y">{year(e)}</span>
+                                    </span>
+                                </button>
+                            {/each}
+                        </div>
+                    </div>
+                {/if}
+
+                {#if rows?.length}
+                    {@const peak = Math.max(1, ...rows.map((x) => x.listeners || 0))}
+                    {@const hasCount = rows.some((x) => x.listeners != null)}
+                    <div class="tracklist">
+                        <div class="tcols" class:has-count={hasCount}>
+                            <span class="tno">#</span><span>Title</span>
+                            {#if hasCount}<span>Listeners</span>{/if}
+                            <span class="tdur-head"><Icon name="clock" size={13} /></span>
+                        </div>
+                        {#each rows as t (t.id)}
+                            {@const heat = (t.listeners || 0) / peak}
+                            <div class="trow" class:has-count={hasCount} style="--t:{heat.toFixed(3)}">
+                                <span class="tno">{t.track_no ?? "·"}</span>
+                                <span class="ttitle">{t.title}</span>
+                                {#if hasCount}
+                                    <span class="tcount" class:empty={!t.listeners}>
+                                        <span
+                                            class="tcount-fill"
+                                            style="width:{Math.max(6, heat * 100).toFixed(1)}%"
+                                        >
+                                            <span class="tcount-val">{fmtCount(t.listeners)}</span>
+                                        </span>
+                                    </span>
+                                {/if}
+                                <span class="tdur">{fmtDur(t.duration_secs)}</span>
+                                <span class="rowbtns">
+                                    <button class="play" title="Play" onclick={() => streamCatalogAlbum(r)}>
+                                        <Icon name="play" size={13} />
+                                    </button>
+                                </span>
+                            </div>
+                        {/each}
+                    </div>
+                {:else if rows}
+                    <p class="skelnote">No tracklist for this record.</p>
+                {:else}
+                    <div class="skel" aria-hidden="true">
+                        {#each Array(Math.min(8, r.track_count || 5)) as _, i}
+                            <i style="width:{[92, 74, 86, 63, 80, 70, 88, 66][i % 8]}%"></i>
+                        {/each}
+                    </div>
+                {/if}
+            </section>
+        {/each}
+    {/if}
+</div>
+
+<style>
+    /* ORDER MATTERS. The app's own rules come FIRST and this page's
+     * overrides after them. Several are the SAME selector at the same
+     * specificity — `.rec .hero` sets --cover-scale in both — so nothing but
+     * the cascade separates them, and with this block last the album page's
+     * 1.175 beat the 0.45 that makes a record section a record section.
+     * Measured before the fix: 282px artwork where 108px was intended.
+     */
+    /* ================= LIFTED FROM THE APP, NOT RETYPED =================
+     * Extracted from the components named below by the same rule-matcher the
+     * research/discography generator uses, then scoped: the album page owns a
+     * .hero, .actions and .stats and so does the search page, and unscoped
+     * either would restyle the other. Re-extract after touching those files.
+     */
+
+/* ===== src/views/CatalogAlbum.svelte — the record section ===== */
+    .rec .hero {
+        /* The one number to tune. 1 = a 240px cover; everything in the hero is
+           sized against it, so the block scales as one piece. */
+        --cover-scale: 1.175; /* 282px */
+        --cover: calc(240px * var(--cover-scale));
+        position: relative;
+        margin: 0 -28px;
+        padding: 0 28px;
+        /* The identity block is bottom-anchored, so the hero's height IS the
+           gap above it: 22px of it is under the glass bar's stuck bottom, the
+           block itself is --cover + 22px of foot, and the remaining 24px is
+           the breathing room approved on the mock. Deriving it keeps that 24px
+           exact at any artwork size — the two used to be independent numbers
+           that drifted the moment either moved. */
+        min-height: calc(var(--cover) + 68px);
+        display: flex;
+        align-items: flex-end;
+        isolation: isolate;
+    }
+    .rec .identity {
+        display: flex;
+        align-items: stretch;
+        gap: calc(22px * var(--cover-scale));
+        /* Fixed: the hero's derived height counts on this foot. */
+        padding-bottom: 22px;
+        width: 100%;
+    }
+    .rec .cover {
+        position: relative;
+        display: block;
+        width: var(--cover);
+        height: var(--cover);
+        padding: 0;
+        border-radius: 10px;
+        overflow: hidden;
+        /* The seed's copy underneath, so swapping to the master resolution is
+           an upgrade rather than a gap. Painted over the moment it decodes. */
+        background-size: cover;
+        background-position: center;
+        flex: none;
+        cursor: pointer;
+        box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.8);
+        transition:
+            transform var(--art-motion),
+            box-shadow var(--art-motion);
+    }
+    .rec .cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+    .rec .cover:hover,
+    .rec .cover:focus-visible {
+        transform: scale(var(--art-grow));
+        box-shadow: 0 30px 62px -20px rgba(0, 0, 0, 0.86);
+    }
+    .rec .cover::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--art-wash);
+        opacity: 0;
+        transition: opacity var(--art-motion);
+        pointer-events: none;
+    }
+    .rec .cover:hover::after,
+    .rec .cover:focus-visible::after {
+        opacity: 1;
+    }
+    .rec .cover:hover .mark,
+    .rec .cover:focus-visible .mark {
+        opacity: 1;
+        transform: none;
+    }
+    .rec .mark {
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        display: grid;
+        place-items: center;
+        width: calc(54px * var(--cover-scale));
+        height: calc(54px * var(--cover-scale));
+        border-radius: 50%;
+        background: rgba(12, 12, 14, 0.55);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+        color: #fff;
+        opacity: 0;
+        transform: scale(0.82);
+        transition:
+            opacity var(--art-motion),
+            transform var(--art-motion);
+    }
+    .rec .copy {
+        min-width: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: calc(14px * var(--cover-scale));
+        gap: 1.8em;
+    }
+    .rec .kind {
+        font-size: 0.714em;
+        font-weight: 800;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.72);
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+    }
+    .rec .copy h1 {
+        font-size: 3em;
+        font-weight: 800;
+        line-height: 1.06;
+        letter-spacing: -0.015em;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+    }
+    .rec .copy h1.long {
+        font-size: 2.286em;
+    }
+    .rec .meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        font-size: 0.893em;
+        color: rgba(255, 255, 255, 0.82);
+        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
+    }
+    .rec .meta .dot {
+        opacity: 0.5;
+    }
+    .rec .who {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        font-weight: 800;
+        color: #fff;
+    }
+    .rec .who img {
+        width: 1.76em;
+        height: 1.76em;
+        border-radius: 50%;
+        object-fit: cover;
+        flex: none;
+    }
+    .rec .who:hover {
+        text-decoration: underline;
+    }
+    .rec .actions {
+        display: flex;
+        align-items: center;
+        gap: 0.714em;
+    }
+    .rec .iconbtn {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 2em;
+        height: 2em;
+        border-radius: 50%;
+        color: rgba(255, 255, 255, 0.85);
+    }
+    .rec .iconbtn:hover:not(:disabled) {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .rec .iconbtn.on {
+        color: var(--accent-hover);
+    }
+    .rec .iconbtn:disabled {
+        color: rgba(255, 255, 255, 0.28);
+        cursor: default;
+    }
+    .rec .pill {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        background: var(--accent);
+        color: #08080a;
+        font-size: 0.786em;
+        font-weight: 800;
+        padding: 0.571em 1.286em;
+        border-radius: 999px;
+        white-space: nowrap;
+    }
+    .rec .pill:hover {
+        background: var(--accent-hover);
+    }
+    .rec .pill.ghost {
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--text-primary);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+    }
+    .rec .pill.ghost:hover {
+        background: rgba(255, 255, 255, 0.16);
+    }
+    .rec .pill:disabled {
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+        cursor: default;
+        opacity: 0.6;
+    }
+    .rec .pill:disabled:hover {
+        background: var(--bg-highlight);
+    }
+    .rec .eds {
+        margin: 20px 0 16px;
+    }
+    .rec .eds .lab {
+        display: block;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        margin-bottom: 6px;
+    }
+    .rec .edrow {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+    .rec .ed {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 216px;
+        padding: 7px 8px;
+        border-radius: 6px;
+        border: 1px solid transparent;
+        text-align: left;
+    }
+    .rec .ed:hover {
+        background: rgba(255, 255, 255, 0.06);
+    }
+    .rec .ed.on {
+        background: color-mix(in srgb, var(--accent) 15%, transparent);
+        border-color: var(--accent);
+        cursor: default;
+    }
+    .rec .ed-art {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+        object-fit: cover;
+        flex: none;
+    }
+    .rec .ed-copy {
+        min-width: 0;
+        flex: 1;
+    }
+    .rec .ed-copy .n {
+        display: block;
+        font-size: 12.5px;
+        font-weight: 700;
+        line-height: 1.2;
+        color: var(--text-primary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .rec .ed-copy .y {
+        display: block;
+        margin-top: 1px;
+        font-size: 11.5px;
+        color: var(--text-muted);
+    }
+    .rec .tracklist {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+    }
+    .rec .tcols,
+    .rec .trow {
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) 48px;
+        align-items: center;
+        gap: 12px;
+    }
+    .rec .tcols.has-count,
+    .rec .trow.has-count {
+        grid-template-columns: 26px minmax(0, 1fr) 168px 48px;
+    }
+    .rec .tcols {
+        padding: 0 10px 7px;
+        margin-bottom: 3px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+    }
+    .rec .tdur-head {
+        display: flex;
+        justify-content: flex-end;
+    }
+    .rec .trow {
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) 48px;
+        align-items: center;
+        gap: 12px;
+    }
+    .rec .trow.has-count {
+        grid-template-columns: 26px minmax(0, 1fr) 168px 48px;
+    }
+    .rec .trow {
+        position: relative;
+        padding: 7px 10px;
+        border-radius: 6px;
+        font-size: 13.5px;
+        cursor: pointer;
+    }
+    .rec .trow:hover {
+        background: var(--bg-highlight);
+    }
+    .rec .trow:hover .tdur,
+    .rec .trow:focus-within .tdur {
+        opacity: 0;
+    }
+    .rec .trow:hover .rowbtns,
+    .rec .trow:focus-within .rowbtns {
+        display: flex;
+    }
+    .rec .tno {
+        width: 26px;
+        text-align: center;
+        color: var(--text-muted);
+        font-size: 12px;
+        font-variant-numeric: tabular-nums;
+    }
+    .rec .ttitle {
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .rec .tcount {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 21px;
+        border-radius: 4px;
+        overflow: hidden;
+        font-size: 12.5px;
+        font-variant-numeric: tabular-nums;
+    }
+    .rec .tcount.empty .tcount-fill {
+        background: none;
+    }
+    .rec .tcount-fill {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        min-width: max-content;
+        max-width: 100%;
+        border-radius: 4px;
+        background: color-mix(
+            in srgb,
+            color-mix(in srgb, var(--accent-hover) calc(22% + var(--t) * 78%), var(--text-muted))
+                calc(30% + var(--t) * 55%),
+            transparent
+        );
+    }
+    .rec .tcount-val {
+        padding: 0 8px;
+        white-space: nowrap;
+        color: color-mix(in srgb, #fff calc(45% + var(--t) * 55%), var(--text-muted));
+    }
+    .rec .tdur {
+        text-align: right;
+        color: var(--text-muted);
+        font-size: 11.5px;
+        font-variant-numeric: tabular-nums;
+    }
+    .rec .rowbtns {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: none;
+        gap: 2px;
+    }
+    .rec .rowbtns button {
+        display: grid;
+        place-items: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        color: var(--text-secondary);
+    }
+    .rec .rowbtns button:hover {
+        color: var(--accent-hover);
+        background: rgba(255, 255, 255, 0.08);
+    }
+    .rec .rowbtns button:disabled {
+        color: var(--text-muted);
+        opacity: 0.4;
+        cursor: default;
+    }
+    .rec .rowbtns .play {
+        color: var(--accent-hover);
+    }
+
+
+/* ===== src/views/CatalogSearch.svelte — the page header card ===== */
+    .shero .hero {
+        position: relative;
+        overflow: hidden;
+        border-radius: 18px;
+        min-height: 230px;
+        display: flex;
+        align-items: center;
+        padding: 22px 24px;
+        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
+    }
+    .shero .hero-bg {
+        position: absolute;
+        inset: 0;
+        background-size: cover;
+        background-position: center;
+        filter: blur(30px) saturate(1.6) brightness(0.5);
+        /* Overscaled so the blur's soft edge never reaches the card's border. */
+        transform: scale(1.25);
+    }
+    .shero .hero-tint {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            rgba(8, 8, 10, 0.9) 28%,
+            rgba(8, 8, 10, 0.4) 72%,
+            rgba(8, 8, 10, 0.78)
+        );
+    }
+    .shero .hero-grain {
+        position: absolute;
+        inset: 0;
+        opacity: 0.055;
+        mix-blend-mode: overlay;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
+    }
+    .shero .hero-in {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        width: 100%;
+    }
+    .shero .card {
+        flex: none;
+        display: block;
+        border-radius: 12px;
+        overflow: hidden;
+        width: 150px;
+        height: 150px;
+        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
+        transition: transform var(--art-motion);
+    }
+    .shero .card:hover {
+        transform: scale(1.02);
+    }
+    .shero .card img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+    .shero .hero-text {
+        min-width: 0;
+    }
+    .shero .kicker {
+        font-size: 10px;
+        font-weight: 900;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: var(--accent);
+    }
+    .shero .hero-name {
+        font-weight: 900;
+        letter-spacing: -1.2px;
+        line-height: 1.02;
+        font-size: 34px;
+    }
+    .shero .stats {
+        display: flex;
+        gap: 15px;
+        margin-top: 8px;
+    }
+    .shero .stats b {
+        font-size: 14px;
+        font-weight: 900;
+    }
+    .shero .stats i {
+        font-style: normal;
+        font-size: 9.5px;
+        font-weight: 800;
+        letter-spacing: 0.1em;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        margin-left: 4px;
+    }
+    .shero .actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 13px;
+        flex-wrap: wrap;
+    }
+    .shero .btn-primary {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        height: 34px;
+        padding: 0 18px;
+        border-radius: 99px;
+        font-size: 12.5px;
+        font-weight: 800;
+        background: var(--accent);
+        color: #08080a;
+        transition: transform var(--art-motion);
+    }
+    .shero .btn-primary:hover {
+        transform: scale(1.04);
+    }
+    .shero .btn-ghost {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 34px;
+        padding: 0 15px;
+        border-radius: 99px;
+        font-size: 12px;
+        font-weight: 800;
+        border: 1px solid rgba(255, 255, 255, 0.28);
+        transition: 0.18s;
+    }
+    .shero .btn-ghost:hover {
+        border-color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+
+/* ===== src/views/CatalogArtist.svelte — the tab chips ===== */
+    .disco-tabs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 18px;
+    }
+    .disco-tab {
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        padding: 8px 15px;
+        border-radius: 8px;
+        border: 1px solid transparent;
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+    }
+    .disco-tab:hover {
+        background: rgba(255, 255, 255, 0.09);
+        color: var(--text-primary);
+    }
+    .disco-tab:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+    }
+    .disco-tab.on {
+        color: #fff;
+        background: color-mix(in srgb, var(--accent) 34%, rgba(10, 10, 12, 0.5));
+        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+    }
+
+/* ===== src/components/PlayerBar.svelte — the sort popover ===== */
+    .menu {
+        position: absolute;
+        bottom: 30px;
+        right: -6px;
+        z-index: 40;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 186px;
+        padding: 7px;
+        border-radius: 9px;
+        background: #0d0d0d;
+        border: 1px solid var(--border);
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
+    }
+    .menu button {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        width: 100%;
+        padding: 6px 8px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-align: left;
+    }
+    .menu button:hover:not(:disabled) {
+        background: var(--bg-highlight);
+        color: var(--text-primary);
+    }
+    .menu button:disabled {
+        opacity: 0.45;
+        cursor: default;
+    }
+
+    /* ============ THIS PAGE'S OWN — everything above is the app ===============
+     *
+     * A record section IS the album page's hero, at a smaller artwork scale,
+     * with two context changes:
+     *
+     *   1. --cover-scale drives the ARTWORK down. It is the album hero's own
+     *      one-knob scaler, so the whole block scales as one piece.
+     *   2. It also drives the TYPE, because `.copy`'s font-size is
+     *      `14px * var(--cover-scale)` — at 0.45 that is 6.3px meta text. So
+     *      `.copy` is re-pinned to the 14px body base and only the title keeps
+     *      a scaled size. Readable type is the whole reason the re-pin exists.
+     *
+     * No banner behind a list row, so the hero's banner-driven min-height and
+     * foot go with it.
+     */
+    .disco-page {
+        /* NO top padding. The glass bar cancels the pane's for whatever follows
+           it, and the ambience box below has to start at the pane's very top —
+           a padding here would push it down behind the bar's own middle. The
+           header's margin carries the inset instead. */
+        padding: 0 0 60px;
+        position: relative;
+        /* Over the ambience, under the glass (z 40). */
+        z-index: 1;
+    }
+    .hint {
+        color: var(--text-muted);
+        font-size: 13px;
+        margin-top: 78px;
+    }
+
+    .pane-banner {
+        position: sticky;
+        /* A sticky box pins to the scroll container's CONTENT box, so top:0
+           would park this --pane-pad below the pane's visible top — halfway
+           down the glass bar. The bar cancels the same offset the same way. */
+        top: calc(-1 * var(--pane-pad));
+        height: 0;
+        /* NEGATIVE, like the album page's own `.banner`. At z-index 0 this box
+           is a POSITIONED descendant, and positioned z-index-0 elements paint
+           ABOVE in-flow non-positioned ones — so the shade was drawn over the
+           tab row and the summary line and washed them out, while the header
+           card escaped only because `.hero` is `position: relative` and later
+           in the DOM, and the records escaped only by starting below the
+           shade's 440px. `.disco-page` is a stacking context (position
+           relative, z-index 1), so -1 stays inside this page and still paints
+           above the pane's own background. */
+        z-index: -1;
+        /* -28px is the pane's own side padding, bled back so the wash runs to
+           the window edge instead of stopping at the text column. */
+        margin: 0 -28px;
+        pointer-events: none;
+    }
+    /* The year rail's lane is padding on THIS page, and the wash is a child of
+       it — so the gutter was shrinking the ambience too, and the blur stopped
+       34px short of the right edge while reaching the left one exactly. The
+       rail has no business affecting the artwork behind the glass, so the
+       banner cancels the lane on top of the pane padding. */
+    .disco-page:has(.year-rail) .pane-banner {
+        margin-right: calc(-28px - var(--rail-gutter));
+    }
+    .pane-banner .clip {
+        position: absolute;
+        inset: 0 0 auto;
+        height: 440px;
+        overflow: hidden;
+    }
+    .pane-banner img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: blur(42px) saturate(1.45);
+        transform: scale(1.25);
+        opacity: 0;
+        transition: opacity 750ms ease;
+    }
+    .pane-banner img.on {
+        opacity: 0.62;
+    }
+    .pane-banner .bn-shade {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            180deg,
+            rgba(10, 10, 12, 0.5) 0%,
+            rgba(14, 14, 16, 0.42) 42%,
+            var(--bg-base) 100%
+        );
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .pane-banner img {
+            transition-duration: 1ms;
+        }
+    }
+
+    /* 78px = the pane's own 24px inset plus the 54px that clears the 46px glass
+       floating over the pane top. Stated here rather than as page padding for
+       the reason given on `.disco-page`. */
+    /* PADDING, not margin, and that is the whole point. This is the ambience
+       box's next sibling, and that box is height:0 with no padding or border —
+       it SELF-COLLAPSES, so a margin-top here collapses through it and is
+       applied BEFORE it, carrying the wash 78px down the page with the header.
+       Measured: the banner pinned at 78 instead of 0, starting halfway down the
+       glass bar. Padding does not collapse, so the gap lands where it is
+       written and the box above it stays at the top of the pane.
+
+       78 = the pane's own 24px inset plus the 54px that clears the 46px glass
+       floating over the pane top. */
+    .shero {
+        padding-top: 78px;
+        margin-bottom: 20px;
+    }
+    /* The compact card. The search hero's sizes are absolute rather than
+       em-based off a scale knob, so a smaller one has to restate the four that
+       carry the size — tint, grain, blur, radius, shadow, kicker, stats and
+       buttons are all untouched, which is what keeps it the same card. */
+    .shero.compact .hero {
+        min-height: 0;
+        padding: 16px 18px;
+    }
+    .shero.compact .hero-in {
+        gap: 18px;
+    }
+    .shero.compact .card {
+        width: 104px;
+        height: 104px;
+    }
+    .shero.compact .hero-name {
+        font-size: 26px;
+        letter-spacing: -0.8px;
+    }
+
+    .tabrow {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+    .tabrow .disco-tabs {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+    .sortwrap {
+        position: relative;
+        flex: none;
+    }
+    .sortbtn {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--text-secondary);
+        padding: 5px 8px;
+        border-radius: 6px;
+    }
+    .sortbtn:hover {
+        color: var(--text-primary);
+        background: var(--bg-highlight);
+    }
+    /* PlayerBar's popover drops UP from the player; this one drops DOWN from
+       the corner it is triggered at. */
+    .sortwrap .menu {
+        bottom: auto;
+        top: calc(100% + 8px);
+        right: 0;
+    }
+    /* The app's menu has no section labels yet — this is the one style the real
+       PlayerBar menu would gain if it ever needs them. */
+    .menu .mgroup {
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: 6px 9px 3px;
+    }
+    .menu button .mcheck {
+        margin-left: auto;
+        display: inline-flex;
+        color: var(--accent-hover);
+    }
+    /* The icon set has chevron-down but no chevron-up — ascending is the same
+       glyph turned over, which is also how the mock drew it. */
+    .menu button .mcheck.up {
+        transform: rotate(180deg);
+    }
+
+    .tab-sum {
+        margin-top: 9px;
+        font-size: 12px;
+        color: var(--text-muted);
+    }
+
+    /* The year rail — 30-odd releases is a lot of wheel, and the years are the
+       natural index. It gets a LANE of its own: at a bare negative offset the
+       column overhangs the page's content box and runs straight through the
+       tracklist's duration column, so the page gives up a gutter and the column
+       takes a compensating offset of the same size. The rail does not move; the
+       content stops short of it.
+
+         gutter = the 21.2px overhang + the 12.8px gap wanted = 34px
+
+       The column is content-fixed at 37.2px (always four digits plus its own
+       6px padding), so that arithmetic holds at every pane width. */
+    .disco-page {
+        --rail-gutter: 34px;
+    }
+    .disco-page:has(.year-rail) {
+        padding-right: var(--rail-gutter);
+    }
+    .year-rail {
+        position: sticky;
+        /* Centred on the pane: half its height, less the --pane-pad that a
+           sticky box is already inset by, less half the column (the translate
+           below, since the column's height depends on how many years the tab
+           holds). --pane-h is published by `paneWatch`. */
+        top: calc(var(--pane-h, 760px) / 2 - var(--pane-pad));
+        height: 0;
+        z-index: 4;
+    }
+    .year-rail .yr-col {
+        position: absolute;
+        right: calc(-1 * (16px + var(--rail-gutter)));
+        top: 0;
+        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        align-items: flex-end;
+    }
+    .year-rail button {
+        font-size: 10.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        color: var(--text-muted);
+        padding: 1px 6px;
+        border-radius: 4px;
+        line-height: 1.6;
+    }
+    .year-rail button:hover {
+        color: var(--text-primary);
+        background: var(--bg-highlight);
+    }
+    .year-rail button.on {
+        color: var(--accent-hover);
+    }
+
+    .rec {
+        margin-top: 44px;
+    }
+    /* The two context changes named at the top of this block. */
+    .rec .hero {
+        --cover-scale: 0.45; /* 108px cover */
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+    }
+    .rec .identity {
+        padding-bottom: 0;
+    }
+    .rec .copy {
+        font-size: 14px;
+        gap: 8px;
+        justify-content: center;
+    }
+    .rec .copy h1 {
+        font-size: calc(24px + 16px * (var(--cover-scale) - 0.4));
+    }
+    .rec .copy h1.long {
+        font-size: calc(19px + 12px * (var(--cover-scale) - 0.4));
+    }
+    /* Flat page background, no banner: the over-artwork text shadows have
+       nothing to sit on and only soften the glyph edges. */
+    .rec .kind,
+    .rec .copy h1,
+    .rec .meta {
+        text-shadow: none;
+    }
+    .rec .tracklist {
+        margin-top: 14px;
+    }
+
+    /* The un-fetched state. Every record costs one catalog_album call, so on
+       arrival most of this page is this — it is part of the design, not a
+       placeholder. */
+    .skel {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 22px;
+        padding: 0 10px;
+    }
+    .skel i {
+        display: block;
+        height: 12px;
+        border-radius: 4px;
+        background: linear-gradient(90deg, #1c1c1c, #262626, #1c1c1c);
+        background-size: 200% 100%;
+        animation: skelsheen 1.5s linear infinite;
+    }
+    @keyframes skelsheen {
+        to {
+            background-position: -200% 0;
+        }
+    }
+    .skelnote {
+        color: var(--text-muted);
+        font-size: 11px;
+        margin-top: 12px;
+        padding: 0 10px;
+        opacity: 0.7;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .skel i {
+            animation: none;
+        }
+    }
+
+</style>