diff --git a/COMPLETED.md b/COMPLETED.md index 3bfd224..60938dd 100644 --- a/COMPLETED.md +++ b/COMPLETED.md @@ -8,6 +8,233 @@ Newest entries at the top. Group by phase/wave header (mirroring `PLAN.md` / `CM ## Phase 8 — CMS Track Browser +### 8.6 "Music through Every Medium" home page section + +**Landed:** 2026-06-12 on dev. + +Replaces the "Genres & Moods" block in `DeepDrftPublic.Client/Pages/Home.razor` (lines 43–86 — the `
` containing the `.genre-grid`). The 6 text-only genre cards become **3 image-first cards** keyed on release format: Studio, Live, DJ Mix. The pivot is taxonomy → medium: instead of "what scene is this," the section answers "in what form does the music reach you." + +The section-divider tag stays "The Sound." The `.section-divider` and `.section-header-grid` wrappers are **untouched** — only the header copy inside the grid and the card grid below it change. Everything from `.section-dark` onward is untouched. + +**Design intent.** The current section is a flat, typographic palette grid — appropriate when the message was "we span many genres." The new message is fewer, weightier, photographic: three distinct *ways* the collective produces, each earning a full image pane. This trades the dense 6-up rhythm for a confident 3-up editorial spread, closer in spirit to the dark `.features-grid` (icon + title + desc) but image-led rather than icon-led. The card is the unit of interest now, not the grid texture. + +### 1. Section header copy + +| Slot | Class | Copy | +| --- | --- | --- | +| Label | `.section-label` | `Format & Medium` | +| Title | `.section-title` | `Music through
Every
Medium` | +| Body | `.section-body` | `The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for — each one a different relationship between the moment and the record of it.` | + +The `Every` carries the italic-green emphasis the existing `.section-title em` rule already styles — no change needed there. (Title echoes the prior "Every Frequency Explored" cadence deliberately, so the replacement reads as an evolution of the same voice, not a rewrite.) + +### 2. Card copy + +| Card | Type label (`.medium-type`, mono) | Title (`.medium-name`, serif) | One-line descriptor (`.medium-desc`) | +| --- | --- | --- | --- | +| Studio | `Studio` | `Studio Releases` | `Composed, layered, and finished — tracks built to be returned to.` | +| Live | `Live` | `Live Releases` | `Performances caught in the moment, unrepeatable and unedited.` | +| DJ Mix | `Mix` | `DJ Mix Releases` | `Uninterrupted sets — one track bleeding into the next, start to finish.` | + +The type labels (`Studio` / `Live` / `Mix`) play the same one-word-essence role the genre `.genre-count` labels did ("Foundation," "Architecture," …) — kept deliberately to preserve that tic of the original design. + +### 3. HTML structure sketch + +Replaces Home.razor lines 43–86. Header grid block keeps its existing structure with only the copy swapped; the grid below is new: + +```razor +@* Medium section *@ +
+
+ + +
Format & Medium
+

Music through
Every
Medium

+ + +

...body copy from §1...

+ + +
+ +
+ @* TODO Phase 3.x: wire each card to its format-filtered browse route once /tracks?format= exists *@ +
+
+
+
+
+
Studio
+
Studio Releases
+
Composed, layered, and finished — tracks built to be returned to.
+
+
+ @* …Live card (dd-live.jpeg) and DJ Mix card (dd-dj.jpeg) follow the same shape… *@ +
+
+``` + +Notes for the implementer: +- **Image as CSS `background-image`, not ``.** This makes `cover`-cropping, the scrim overlay, and the hover scale trivial without a wrapper-overflow dance, and keeps these decorative-but-branded photos out of the document's content image flow. (If alt-text/SEO is later wanted, revisit — but these are mood images, not informational, so background is the right call here.) The card is one block: image pane on top, text body below, matching the brief's "image area + text below." +- The three cards are structurally identical — implementer can author one and repeat. Leave the `TODO` comment so the future format-filter routing has a home (mirrors the existing `@* TODO Phase 2.2 *@` convention in the current genre grid). +- Whether the card is a `
` or an `` is deferred: there is no format-filtered route yet (the genre grid had the same unresolved `/genres/{slug}` TODO). Author as `
` now; the `.medium-card` hover styles already assume `cursor` affordance so promoting to `` later is a one-line change. + +### 4. CSS additions (`Home.razor.css`) + +Added a new block after the (now-removed) genre-grid rules. New classes: + +```css +/* ── MEDIUM GRID (Music through Every Medium) ── */ +.medium-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1px; + background: var(--deepdrft-border); + border: 1px solid var(--deepdrft-border); + margin-bottom: 4rem; +} + +.medium-card { + background: var(--deepdrft-white); /* fixed white ground — matches .section, see §9 */ + cursor: pointer; + overflow: hidden; /* clips the hover image scale */ + text-decoration: none; + display: block; +} + +.medium-image { + position: relative; + width: 100%; + aspect-ratio: 4 / 3; /* consistent crop across all three; ~240px tall at 1-col, scales with column width */ + background-size: cover; + background-position: center; + transition: transform 0.5s ease; +} + +.medium-card:hover .medium-image { transform: scale(1.05); } + +.medium-scrim { + position: absolute; + inset: 0; + background: linear-gradient(to bottom, + rgba(17, 35, 56, 0.0) 40%, + rgba(17, 35, 56, 0.35) 100%); /* navy scrim, weighted to the lower edge near the text seam */ + transition: opacity 0.3s; + opacity: 0.7; +} + +.medium-card:hover .medium-scrim { opacity: 1; } + +.medium-body { + padding: 2rem 1.5rem; + position: relative; +} + +/* Green underline sweep — same mechanic as the old .genre-card::after */ +.medium-card::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 2px; + background: var(--deepdrft-green-accent); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s; + z-index: 1; +} + +.medium-card:hover::after { transform: scaleX(1); } + +.medium-type { + font-family: var(--deepdrft-font-mono); + font-size: 0.58rem; + letter-spacing: 0.2em; + color: var(--deepdrft-muted); + text-transform: uppercase; + margin-bottom: 0.6rem; +} + +.medium-name { + font-family: var(--deepdrft-font-display); + font-size: 1.6rem; + font-weight: 400; + color: var(--deepdrft-navy); + margin-bottom: 0.75rem; + line-height: 1.1; +} + +.medium-desc { + font-family: var(--deepdrft-font-body); + font-size: 0.82rem; + line-height: 1.65; + color: var(--deepdrft-navy); + opacity: 0.6; +} +``` + +Reuse decisions: +- `.section`, `.section-divider`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` — all reused unchanged. +- `.medium-type` / `.medium-name` / `.medium-desc` are new but are deliberate near-clones of `.genre-count` / `.genre-name` (bumped from 1.5→1.6rem to suit the larger card) / a new descriptor line the genre cards never had. Kept as distinct classes rather than reusing the `.genre-*` names so the dead genre CSS can be removed cleanly. +- The underline-sweep `::after` is copied from `.genre-card::after` verbatim except for the added `z-index: 1` (needed because the card now has a stacking context from the image). + +### 5. Responsive breakpoints + +| Viewport | `.medium-grid` columns | Behaviour | +| --- | --- | --- | +| ≥ 960px | `repeat(3, 1fr)` | Three cards in a row — the primary editorial layout. | +| 600–959px | `repeat(2, 1fr)` + third card spans both columns | Two on top, the third full-width below. Reads better than a lone 1-col orphan on tablet and keeps the image panes generous. | +| < 600px | `1fr` | Single column, cards stack. Each image pane is full content-width; `aspect-ratio: 4/3` keeps them generous (~260px tall at a typical mobile width). | + +```css +@media (max-width: 959px) { + .medium-grid { grid-template-columns: repeat(2, 1fr); } + .medium-card:last-child { grid-column: 1 / -1; } /* third card spans full width */ +} + +@media (max-width: 599px) { + .medium-grid { grid-template-columns: 1fr; } + .medium-card:last-child { grid-column: auto; } /* reset the span at 1-col */ +} +``` + +Note the breakpoint boundary is `959px` here (the existing genre grid used `960px` for its `max-width` query; `.section-header-grid` uses `min-width: 960px`). Using `max-width: 959px` avoids the 1px both-rules-fire overlap at exactly 960px. Implementer may keep `960` for consistency with the surrounding file if preferred — the `last-child` span makes the 960 edge case harmless either way. + +### 6. Image placeholder names + +All three in `DeepDrftPublic.Client/wwwroot/img/` (same dir as existing hero images), referenced as `img/` to match the existing `Image1="img/..."` convention: + +- `dd-studio.jpg` +- `dd-live.jpeg` +- `dd-dj.jpeg` + +File extensions match existing photos on the page (`dd-duo-hero.jpeg`, `kp-shoulder-bw.jpeg`). Recommend source images at least 800px wide (rendered up to ~430px wide at the 3-col desktop layout on a 1440px viewport, so 800px covers 2× displays). Consistent landscape orientation across all three — the `4/3 aspect-ratio` crop will center-cover whatever is supplied, but landscape sources avoid heavy cropping. + +### 7. Hover and overlay spec + +- **Underline sweep** (preserved from genre cards): on `:hover`, a 2px green-accent bar sweeps in from the left along the card's bottom edge (`scaleX(0)→(1)`, 0.3s). Unchanged mechanic. +- **Image scale** (new, additive): on `:hover`, the background image scales to `1.05` over 0.5s, clipped by the card's `overflow: hidden`. Slow and subtle — a breath, not a zoom. This is the "parallax-scale" the brief allowed; pure CSS transform, no JS. +- **Scrim** (always-on, subtle): a navy gradient (`--deepdrft-navy` at 0%→35% alpha, top→bottom) sits over the image at `opacity: 0.7`, deepening to `1.0` on hover. Two jobs: (a) it weights the image toward its lower edge so the transition into the text body feels intentional rather than abrupt, and (b) it future-proofs for overlaying white text on the image if a later iteration wants the title *on* the photo. Today all text sits in `.medium-body` below the image, so the scrim is purely tonal — keep it light; it should never read as a dark box. If during implementation the supplied photos are already dark/low-key, dial the base opacity down to `0.4` rather than fighting them. + +The hover bundle (underline + scale + scrim-deepen) fires together as one gesture. Don't stagger them. + +### 8. Dark-mode awareness + +The raw `--deepdrft-white` and `--deepdrft-navy` tokens are **literal** in both themes — they are *not* remapped under `.deepdrft-theme-dark` (verified in `deepdrft-tokens.css`; only the alias tokens like `--deepdrft-surface`/`--theme-*` flip). The existing `.section` and `.genre-card` both hardcode `background: var(--deepdrft-white)`, so **this whole section is a fixed off-white ground in both light and dark mode today** — it does not invert. + +The new `.medium-card` follows that same convention deliberately: white card ground, navy text, in both themes. This keeps Phase 8.6 consistent with its untouched siblings (`.section` above it stays white; only `.section-dark` below it is dark). **Do not** introduce theme-aware surface tokens here — that would make this one section invert while the rest of the white `.section` stays put, which is a larger and out-of-scope design decision (if Daniel wants the public home page to genuinely respond to dark mode, that is a separate roadmap item spanning every `.section`, not a Phase 8.6 concern). + +- **Images:** unaffected by theme — same assets render identically. The navy scrim also reads correctly against the off-white card in both modes. +- **Text & backgrounds:** `--deepdrft-navy` text on `--deepdrft-white` card in both modes. No `.deepdrft-theme-dark` overrides needed or wanted for this section. + +### 9. Out of scope / deferred + +- **Format-filtered routing.** Cards are non-navigating today (no `/tracks?format=` route exists). The `TODO` comment marks where it lands. This mirrors the genre grid's never-resolved `/genres/{slug}` TODO — don't build the route as part of 8.6. +- **A real format field on `TrackEntity`.** "Studio / Live / DJ Mix" is presentational copy here, not yet a data dimension. If these cards are ever to filter real tracks, the entity needs a `Format`/`ReleaseType` discriminator — that is Phase 3 (new content kinds) territory, not this cosmetic swap. Flagging so the copy isn't mistaken for an existing capability. + +**Completion note:** "Genres & Moods" genre-card grid on home page replaced with "Music through Every Medium" 3-card section (Studio Releases, Live Releases, DJ Mix Releases), each image-led with background image, scrim overlay, hover scale+underline animations. Dead `.genre-*` CSS rules removed from `Home.razor.css`. New `.medium-*` CSS block added with responsive grid (3 cards at md+, 2-up at sm, single column at xs). Type labels corrected to `Studio / Live / Mix` (final decision superseding earlier spec). Three images (`dd-studio.jpg`, `dd-live.jpeg`, `dd-dj.jpeg`) added to `wwwroot/img/`. + +--- + ### 8.6 CMS cache invalidation + orphaned release deletion (Wave 6) **Landed:** 2026-06-12 on dev. diff --git a/PLAN.md b/PLAN.md index 7f83af8..bd5672b 100644 --- a/PLAN.md +++ b/PLAN.md @@ -138,228 +138,6 @@ Three browse modes for the CMS `/tracks` page — **Track**, **Album**, **Genre* --- -## Phase 8.6 — "Music through Every Medium" Section - -Replaces the "Genres & Moods" block in `DeepDrftPublic.Client/Pages/Home.razor` (current lines 43–86 — the `
` containing the `.genre-grid`). The 6 text-only genre cards become **3 image-first cards** keyed on release format: Studio, Live, DJ Mix. The pivot is taxonomy → medium: instead of "what scene is this," the section answers "in what form does the music reach you." - -The section-divider tag stays "The Sound." The `.section-divider` and `.section-header-grid` wrappers (Home.razor lines 36–57) are **untouched** — only the header copy inside the grid and the card grid below it change. Everything from `.section-dark` onward (line 88+) is untouched. - -**Design intent.** The current section is a flat, typographic palette grid — appropriate when the message was "we span many genres." The new message is fewer, weightier, photographic: three distinct *ways* the collective produces, each earning a full image pane. This trades the dense 6-up rhythm for a confident 3-up editorial spread, closer in spirit to the dark `.features-grid` (icon + title + desc) but image-led rather than icon-led. The card is the unit of interest now, not the grid texture. - -### 1. Section header copy - -| Slot | Class | Copy | -| --- | --- | --- | -| Label | `.section-label` | `Format & Medium` | -| Title | `.section-title` | `Music through
Every
Medium` | -| Body | `.section-body` | `The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for — each one a different relationship between the moment and the record of it.` | - -The `Every` carries the italic-green emphasis the existing `.section-title em` rule already styles — no change needed there. (Title echoes the prior "Every Frequency Explored" cadence deliberately, so the replacement reads as an evolution of the same voice, not a rewrite.) - -### 2. Card copy - -| Card | Type label (`.medium-type`, mono) | Title (`.medium-name`, serif) | One-line descriptor (`.medium-desc`) | -| --- | --- | --- | --- | -| Studio | `Produced` | `Studio Releases` | `Composed, layered, and finished — tracks built to be returned to.` | -| Live | `Captured` | `Live Releases` | `Performances caught in the moment, unrepeatable and unedited.` | -| DJ Mix | `Continuous` | `DJ Mix Releases` | `Uninterrupted sets — one track bleeding into the next, start to finish.` | - -The type labels (`Produced` / `Captured` / `Continuous`) play the same one-word-essence role the genre `.genre-count` labels did ("Foundation," "Architecture," …) — kept deliberately to preserve that tic of the original design. - -### 3. HTML structure sketch - -Replaces Home.razor lines 43–86. Header grid block (lines 44–57) keeps its existing structure with only the copy swapped; the grid below is new: - -```razor -@* Medium section *@ -
-
- - -
Format & Medium
-

Music through
Every
Medium

- - -

...body copy from §1...

- - -
- -
- @* TODO Phase 3.x: wire each card to its format-filtered browse route once /tracks?format= exists *@ -
-
-
-
-
-
Produced
-
Studio Releases
-
Composed, layered, and finished — tracks built to be returned to.
-
-
- @* …Live card (medium-live.jpeg) and DJ Mix card (medium-djmix.jpeg) follow the same shape… *@ -
-
-``` - -Notes for the implementer: -- **Image as CSS `background-image`, not ``.** This makes `cover`-cropping, the scrim overlay, and the hover scale trivial without a wrapper-overflow dance, and keeps these decorative-but-branded photos out of the document's content image flow. (If alt-text/SEO is later wanted, revisit — but these are mood images, not informational, so background is the right call here.) The card is one block: image pane on top, text body below, matching the brief's "image area + text below." -- The three cards are structurally identical — implementer can author one and repeat. Leave the `TODO` comment so the future format-filter routing has a home (mirrors the existing `@* TODO Phase 2.2 *@` convention in the current genre grid). -- Whether the card is a `
` or an `` is deferred: there is no format-filtered route yet (the genre grid had the same unresolved `/genres/{slug}` TODO). Author as `
` now; the `.medium-card` hover styles already assume `cursor` affordance so promoting to `` later is a one-line change. - -### 4. CSS additions (`Home.razor.css`) - -Add a new block after the genre-grid rules (lines 106–165 can stay or be removed once the genre markup is gone — recommend **removing** the now-dead `.genre-grid` / `.genre-card` / `.genre-name` / `.genre-count` rules in the same change to avoid dead CSS, since nothing else on the page uses them; confirm no other consumer with a grep before deleting). New classes: - -```css -/* ── MEDIUM GRID (Music through Every Medium) ── */ -.medium-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1px; - background: var(--deepdrft-border); - border: 1px solid var(--deepdrft-border); - margin-bottom: 4rem; -} - -.medium-card { - background: var(--deepdrft-white); /* fixed white ground — matches .section, see §9 */ - cursor: pointer; - overflow: hidden; /* clips the hover image scale */ - text-decoration: none; - display: block; -} - -.medium-image { - position: relative; - width: 100%; - aspect-ratio: 4 / 3; /* consistent crop across all three; ~240px tall at 1-col, scales with column width */ - background-size: cover; - background-position: center; - transition: transform 0.5s ease; -} - -.medium-card:hover .medium-image { transform: scale(1.05); } - -.medium-scrim { - position: absolute; - inset: 0; - background: linear-gradient(to bottom, - rgba(17, 35, 56, 0.0) 40%, - rgba(17, 35, 56, 0.35) 100%); /* navy scrim, weighted to the lower edge near the text seam */ - transition: opacity 0.3s; - opacity: 0.7; -} - -.medium-card:hover .medium-scrim { opacity: 1; } - -.medium-body { - padding: 2rem 1.5rem; - position: relative; -} - -/* Green underline sweep — same mechanic as the old .genre-card::after */ -.medium-card::after { - content: ''; - position: absolute; - bottom: 0; left: 0; right: 0; - height: 2px; - background: var(--deepdrft-green-accent); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s; - z-index: 1; -} - -.medium-card:hover::after { transform: scaleX(1); } - -.medium-type { - font-family: var(--deepdrft-font-mono); - font-size: 0.58rem; - letter-spacing: 0.2em; - color: var(--deepdrft-muted); - text-transform: uppercase; - margin-bottom: 0.6rem; -} - -.medium-name { - font-family: var(--deepdrft-font-display); - font-size: 1.6rem; - font-weight: 400; - color: var(--deepdrft-navy); - margin-bottom: 0.75rem; - line-height: 1.1; -} - -.medium-desc { - font-family: var(--deepdrft-font-body); - font-size: 0.82rem; - line-height: 1.65; - color: var(--deepdrft-navy); - opacity: 0.6; -} -``` - -Reuse decisions: -- `.section`, `.section-divider`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` — all reused unchanged. -- `.medium-type` / `.medium-name` / `.medium-desc` are new but are deliberate near-clones of `.genre-count` / `.genre-name` (bumped from 1.5→1.6rem to suit the larger card) / a new descriptor line the genre cards never had. Kept as distinct classes rather than reusing the `.genre-*` names so the dead genre CSS can be removed cleanly. -- The underline-sweep `::after` is copied from `.genre-card::after` verbatim except for the added `z-index: 1` (needed because the card now has a stacking context from the image). - -### 5. Responsive breakpoints - -| Viewport | `.medium-grid` columns | Behaviour | -| --- | --- | --- | -| ≥ 960px | `repeat(3, 1fr)` | Three cards in a row — the primary editorial layout. | -| 600–959px | `repeat(2, 1fr)` + third card spans both columns | Two on top, the third full-width below. Reads better than a lone 1-col orphan on tablet and keeps the image panes generous. | -| < 600px | `1fr` | Single column, cards stack. Each image pane is full content-width; `aspect-ratio: 4/3` keeps them generous (~260px tall at a typical mobile width). | - -```css -@media (max-width: 959px) { - .medium-grid { grid-template-columns: repeat(2, 1fr); } - .medium-card:last-child { grid-column: 1 / -1; } /* third card spans full width */ -} - -@media (max-width: 599px) { - .medium-grid { grid-template-columns: 1fr; } - .medium-card:last-child { grid-column: auto; } /* reset the span at 1-col */ -} -``` - -Note the breakpoint boundary is `959px` here (the existing genre grid used `960px` for its `max-width` query; `.section-header-grid` uses `min-width: 960px`). Using `max-width: 959px` avoids the 1px both-rules-fire overlap at exactly 960px. Implementer may keep `960` for consistency with the surrounding file if preferred — the `last-child` span makes the 960 edge case harmless either way. - -### 6. Image placeholder names - -All three in `DeepDrftPublic.Client/wwwroot/img/` (same dir as existing hero images), referenced as `img/` to match the existing `Image1="img/..."` convention: - -- `medium-studio.jpeg` -- `medium-live.jpeg` -- `medium-djmix.jpeg` - -`.jpeg` extension matches every existing photo on the page (`dd-duo-hero.jpeg`, `kp-shoulder-bw.jpeg`). Recommend source images at least 800px wide (rendered up to ~430px wide at the 3-col desktop layout on a 1440px viewport, so 800px covers 2× displays). Consistent landscape orientation across all three — the `4/3 aspect-ratio` crop will center-cover whatever is supplied, but landscape sources avoid heavy cropping. - -### 7. Hover and overlay spec - -- **Underline sweep** (preserved from genre cards): on `:hover`, a 2px green-accent bar sweeps in from the left along the card's bottom edge (`scaleX(0)→(1)`, 0.3s). Unchanged mechanic. -- **Image scale** (new, additive): on `:hover`, the background image scales to `1.05` over 0.5s, clipped by the card's `overflow: hidden`. Slow and subtle — a breath, not a zoom. This is the "parallax-scale" the brief allowed; pure CSS transform, no JS. -- **Scrim** (always-on, subtle): a navy gradient (`--deepdrft-navy` at 0%→35% alpha, top→bottom) sits over the image at `opacity: 0.7`, deepening to `1.0` on hover. Two jobs: (a) it weights the image toward its lower edge so the transition into the text body feels intentional rather than abrupt, and (b) it future-proofs for overlaying white text on the image if a later iteration wants the title *on* the photo. Today all text sits in `.medium-body` below the image, so the scrim is purely tonal — keep it light; it should never read as a dark box. If during implementation the supplied photos are already dark/low-key, dial the base opacity down to `0.4` rather than fighting them. - -The hover bundle (underline + scale + scrim-deepen) fires together as one gesture. Don't stagger them. - -### 8. Dark-mode awareness - -The raw `--deepdrft-white` and `--deepdrft-navy` tokens are **literal** in both themes — they are *not* remapped under `.deepdrft-theme-dark` (verified in `deepdrft-tokens.css`; only the alias tokens like `--deepdrft-surface`/`--theme-*` flip). The existing `.section` and `.genre-card` both hardcode `background: var(--deepdrft-white)`, so **this whole section is a fixed off-white ground in both light and dark mode today** — it does not invert. - -The new `.medium-card` follows that same convention deliberately: white card ground, navy text, in both themes. This keeps Phase 8.6 consistent with its untouched siblings (`.section` above it stays white; only `.section-dark` below it is dark). **Do not** introduce theme-aware surface tokens here — that would make this one section invert while the rest of the white `.section` stays put, which is a larger and out-of-scope design decision (if Daniel wants the public home page to genuinely respond to dark mode, that is a separate roadmap item spanning every `.section`, not a Phase 8.6 concern). - -- **Images:** unaffected by theme — same `.jpeg` assets render identically. The navy scrim also reads correctly against the off-white card in both modes. -- **Text & backgrounds:** `--deepdrft-navy` text on `--deepdrft-white` card in both modes. No `.deepdrft-theme-dark` overrides needed or wanted for this section. - -### 9. Out of scope / deferred - -- **Format-filtered routing.** Cards are non-navigating today (no `/tracks?format=` route exists). The `TODO` comment marks where it lands. This mirrors the genre grid's never-resolved `/genres/{slug}` TODO — don't build the route as part of 8.6. -- **A real format field on `TrackEntity`.** "Studio / Live / DJ Mix" is presentational copy here, not yet a data dimension. If these cards are ever to filter real tracks, the entity needs a `Format`/`ReleaseType` discriminator — that is Phase 3 (new content kinds) territory, not this cosmetic swap. Flagging so the copy isn't mistaken for an existing capability. - ---- A small set of items that are real but don't fit a phase yet. Surface them when they become relevant rather than committing now.