diff --git a/PLAN.md b/PLAN.md index bd28d87..988eca5 100644 --- a/PLAN.md +++ b/PLAN.md @@ -239,6 +239,45 @@ Sequenced as **eight waves**; the critical path is `11.A → 11.B → 11.C → 1 --- +## Phase 12 — About Page (public site editorial) + +A real About page for the public site (`/about`), built entirely in the **Home page's existing +visual language** — no new look. Three movements — **the People**, **the Process**, **the Product** — +with ethos / pathos / logos woven through the prose as registers, not labelled blocks. The strategic +frame (Daniel): the site is *presentation and proof of effort* — evidence that real people are +pushing the classic club sound forward; the About page is where that claim is made explicit. + +This is its own phase, not a graft onto Phase 11: Phase 11 was structural (release-cardinal browse, +queue, GUID handles), whereas this is a net-new **editorial** surface. It reuses Home's section +primitives wholesale (`.hero`, `.section-divider`, two-column `.section`, dark `.section-dark` +feature band, `.section-split`, `.cta-banner`, `ParallaxImage` full-bleed bands) — the only candidate +new styling is two member-bio cards, and even those should be assembled from existing type tokens +first. Full spec — section order, the Home-primitive mapping, per-section content intent, image-slot +table, and all draft copy fenced for approval: `product-notes/about-page.md`. + +**Voice constraint (hard):** smart, serious, no AI-isms — underground Detroit/Midwest deep-club-house +heritage carried to Charleston. **All body prose is DRAFT pending Daniel's approval** — section +headers and UI labels may be set; any sentence/paragraph of site copy is a placeholder until Daniel +(who curates the band's public voice) passes it. The spec's `[COPY …]` blocks are drafts, not final. + +**Image slots (5; 4–5 photos, files still being sorted — every slot is a TODO, do not block):** duo +hero portrait (likely hero), full-bleed atmosphere band, two member bio portraits (Khabran, Daniel), +a hands-on-gear "proof of effort" band, and a closing band. Each must degrade gracefully (fallback / +absent) until a file lands — the page composes correctly with zero images. + +**Open questions (carried in the spec §9):** Khabran's bio text (drop-in slot, TODO — Daniel's bio is +drafted from the transcript, Khabran's pending); final photo files; **image hosting path** — +`wwwroot/img/` (recommended, Home-analogous, marketing chrome) vs. the image vault (content +machinery, over-built here), flagged for staff-engineer; **whether CUTS/SESSIONS/MIXES are explained +here** (recommend yes, a one-line-per-medium reuse of Home's `.medium-card` grid); where the +"designed, not extracted" thesis lands (recommend the Process movement); hero title wording. + +**Dependency shape:** none — fully free-floating; depends only on the Home primitives that already +exist. The only true gate is Daniel's copy pass + final image files. `[design / spec — awaiting +Daniel approval of structure and copy]` + +--- + ## Working with this file - **Add items by extending an existing phase first**; only create a new phase when the addition genuinely doesn't fit any of 1–5. Phase numbers are organisational, not sequencing. diff --git a/product-notes/about-page.md b/product-notes/about-page.md new file mode 100644 index 0000000..ee2434b --- /dev/null +++ b/product-notes/about-page.md @@ -0,0 +1,381 @@ +# About Page — DeepDrft public site — Design Spec + +Status: **proposed** (2026-06-17). Author: product-designer. Date: 2026-06-17. +Implementer: staff-engineer (when approved). Surface: **public site only** (`DeepDrftPublic` / +`DeepDrftPublic.Client`). + +> **All body prose in this spec is DRAFT, fenced as `[COPY — FOR APPROVAL]`. Daniel curates the +> band's public voice himself.** Section headers, eyebrows, and UI labels are proposed and may be +> set; any *sentence or paragraph* of site copy is a placeholder pending Daniel's own words. Do not +> ship the drafts as written without his pass. + +Cross-references: `Pages/Home.razor` + `Pages/Home.razor.css` (the visual language this page mirrors +— inspected, not invented), `Controls/DeepDrftHero.razor` (hero type treatment), +`DeepDrftShared.Client/Components/ParallaxImage.razor` (the full-bleed image idiom), `PLAN.md §12` +(the concise phase entry). Plan only — no code edits made by this doc. + +--- + +## 0. Goal and shape + +A real About page with three movements — **the People**, **the Process**, **the Product** — with +ethos / pathos / logos woven through the prose rather than bolted on as a labelled block. It reads +as a continuous editorial scroll in the **exact visual language of the Home page**, not a new look. + +The strategic intent (Daniel's framing, paraphrased): the site is *presentation and proof of effort* +— evidence that real people in the Charleston scene are pushing classic club sounds forward. The +About page is where that claim is made explicit. It is the page that earns the catalogue. + +Route: `/about`. Linked from the main menu (`DeepDrftMenu` / `Pages.cs` nav index) and a natural +target for the Home page's existing copy about the collective. + +--- + +## 1. The look — mapped to the Home page (inspected, not invented) + +The Home page (`Pages/Home.razor`) is built from a small, repeating set of section primitives. The +About page reuses them verbatim so the two pages are visually continuous. Every class below is one +the Home page already renders (scoped in `Home.razor.css`, mirrored in the global +`deepdrft-styles.css`). **No new visual vocabulary is proposed** — the only genuinely new styling +need is two member-bio cards (§4), and even those should be assembled from existing spacing/type +tokens before any bespoke class is added. + +The Home primitives, in the order they appear there, and how each maps onto About: + +| Home primitive | Classes | Role on Home | Reuse on About | +|---|---|---|---| +| **Split hero** (50/50 grid) | `.hero`, `.hero-left`, `DeepDrftHero` | Title + NowPlaying panel | The About hero — left column carries the eyebrow + title + standfirst; right column carries the **duo hero portrait** (see §3) | +| **Full-bleed parallax band** | `` | Duo photo under the hero | The duo shot or a hands-on-gear shot as the hero's full-width anchor | +| **Section divider** | `.section-divider`, `.divider-line`, `.divider-tag` | "The Sound" rule between movements | One divider per movement boundary — `The People` / `The Process` / `The Product` are the three `.divider-tag`s | +| **Two-column section** | `.section`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` | "Music through Every Medium" (label+title left, prose right) | The default body rhythm for each movement — label + serif title on the left (md=4), prose on the right (md=8) | +| **Dark feature band** | `.section-dark`, `.section-label-dark`, `.section-title-dark`, `.features-grid`, `.feature-card` | "Built for the Committed Listener" | **The Process** gear/method band — the dark ground suits the warehouse/rig material; the `feature-card` grid becomes the gear-stage cards (§5) | +| **Split section** | `.section-split`, `.split-left`, `.split-right`, `.split-eyebrow`, `.split-title`, `.split-body` | "Where the Holy City Meets the Future" (prose left, parallax portrait right) | The **People** origin/meeting story (prose + a portrait) and the **Product** "on the street, in the swamp" turn | +| **CTA banner** | `.cta-banner`, `.cta-headline`, `.cta-sub`, `.cta-actions`, `.btn-white`, `.btn-outline-white` | "Ready to Drift Deeper?" | Closing CTA into the catalogue / archive | +| **Trailing parallax** | `` (`mixer.jpg`) | Closing image | A closing hands-on-gear band | + +**Type and palette** are inherited automatically — these classes already encode the Bodoni +Moda / Cormorant / DM Sans stack and the light/dark palettes. `` inside `.section-title` / +`.split-title` / `.cta-headline` is the established italic-serif emphasis device (Home uses it on +*Every*, *Committed Listener*, *Meets the Future*, *Drift*). The About titles should use the same +device on one word per title, not more. + +**Hero title treatment.** `DeepDrftHero` hard-codes "Deep / DRFT" — do **not** reuse the component +verbatim for About (it carries the streaming CTA and the home masthead). Instead reuse its **CSS +classes** (`.hero-eyebrow`, `.hero-title`, `.hero-subtitle`, `.hero-desc`) directly in the About +hero markup so the type scale matches, with About's own words. (The `@AnimClass` fade-up-on-prerender +trick in `DeepDrftHero` is worth copying for the eyebrow/title if Daniel wants the same entrance.) + +--- + +## 2. Page structure and section order + +The scroll, top to bottom. Movements are bounded by `.section-divider` tags so the three-movement +structure is legible without a heading that says "Movement One." + +``` +┌─ HERO (split 50/50) ──────────────────────────────────────────┐ +│ left: eyebrow "Charleston, South Carolina" │ +│ title "Deep DRFT" or "Who We Are" │ +│ standfirst (the ethos line, condensed) │ +│ right: DUO HERO PORTRAIT [IMG SLOT A — likely hero] │ +├─ full-bleed parallax band [IMG SLOT B — duo or gear] ─────────┤ +│ │ +│ ── divider: "The People" ── │ +│ SECTION (two-col): label "The Collective" + title; │ +│ prose: how they met / shared synths / shared taste │ +│ MEMBER BIO PAIR (two cards): [IMG SLOT C1 — Khabran] │ +│ [IMG SLOT C2 — Daniel] │ +│ each: portrait + name + role line + bio (drop-in slot) │ +│ SPLIT section (origin/meeting story + portrait) — optional │ +│ │ +│ ── divider: "The Process" ── │ +│ SECTION-DARK: label "How It's Made" + title; │ +│ gear-stage cards (feature-grid): │ +│ Sketch → Arrange → Studio → Live Rig │ +│ full-bleed parallax band [IMG SLOT D — hands on gear] │ +│ │ +│ ── divider: "The Product" ── │ +│ SECTION (two-col): label "The Output" + title; │ +│ prose: the catalogue as evidence │ +│ MEDIUM TRIPTYCH (optional reuse of Home's medium-card grid): │ +│ CUTS / SESSIONS / MIXES — brief frame each │ +│ SPLIT section: "...on the street, in the swamp" — live │ +│ identity beyond the releases │ +│ │ +│ CTA banner: into the archive / catalogue │ +│ trailing parallax [IMG SLOT E — gear/atmosphere] │ +└────────────────────────────────────────────────────────────────┘ +``` + +**Why this order.** Ethos / pathos / logos are not three sections — they are three registers carried +*through* the three movements: + +- **The People** carries the **pathos** — heart and soul, the metalhead-at-heart, music for strife + and celebration, two people who met over synthesizers. +- **The Process** carries the **logos** — the gear, the method, "science and math is just as + important as beauty," the soul that is *designed, not extracted*. The dark band's analytical feel + fits this register. +- **The Product** carries the **ethos** — the claim and the proof: classics with a twist, the + catalogue as evidence, the collective's place in the Charleston scene, and the live identity + ("on the street, in the swamp"). + +The triad is woven, not labelled. No section is titled "Our Ethos." + +--- + +## 3. The hero + +Mirror Home's `.hero` split. + +- **Left (`md=6`, `.hero-left`):** eyebrow + title + standfirst, using the `.hero-*` classes. + - Eyebrow: `Charleston, South Carolina` (matches Home's hero eyebrow — anchors place immediately). + - Title: a one-or-two-word masthead with the `` device. Candidate: **"Who We Are"** + or simply **"The Collective"**. (Header — proposed, not copy.) + - Standfirst: the condensed ethos line — see `[COPY A]` below. +- **Right (`md=6`):** **IMG SLOT A — the duo hero portrait.** This is the **likely hero image**. + A duo shot reads "two people, a collective" at first paint. Aspect: landscape or square works in + the split column; if a strong landscape duo file exists, prefer it. (Home uses + `dd-duo-hero.jpeg` / `dd-duo-hero-bw.jpeg` as a 2048×1365 landscape pair in the full-bleed band — + About could either reuse that pair in the band and put a *different* duo shot in the hero column, + or promote it.) + +Below the hero, a **full-bleed `` band** (IMG SLOT B) exactly as Home does +under its hero. The bw/colour hover-crossfade pair (`Image1` + `Image2`) is the established idiom — +supply both a bw and a colour file per slot where available (Home pairs `dd-duo-hero-bw` + +`dd-duo-hero`). + +> `[COPY A — FOR APPROVAL — standfirst]` +> *Two people, all the hats. We bring the heart and soul of Midwest deep club house to Charleston — +> informed by the founders of the style, and pushing it forward.* + +--- + +## 4. The People + +**Divider tag:** `The People`. + +**Intro (two-column `.section`):** `.section-label` "The Collective" + `.section-title` with the +origin/meeting hook; prose in the right column about how they met (exchanging synthesizers, realising +they made and enjoyed similar music) and that both members wear every hat — music, sound design, +arranging, producing, mixing, field recording, visual design, custom sound tools. + +> `[COPY B — FOR APPROVAL — People intro]` +> *We met trading synthesizers and found out we were chasing the same thing. Two of us, no fixed +> roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the +> tools when the tools don't exist yet.* + +### 4.1 Member bio pair + +Two bio cards, side by side (`MudGrid`, `xs=12 md=6`). **Each member's bio text is a drop-in slot** — +Daniel supplies the prose per member; the spec reserves the slot and the layout. + +Per card: +- **Portrait** — IMG SLOT C1 (Khabran), IMG SLOT C2 (Daniel). Portrait orientation (the existing + `kp-shoulder-bw.jpeg` is 1365×2048 portrait — that aspect is the precedent). Bw or colour; + recommend bw to match the editorial restraint of the rest of the site, with an optional + colour-on-hover via the parallax/crossfade idiom if these become `ParallaxImage`s. +- **Name** — `Khabran Peters`, `Daniel Harvey` (display serif, e.g. `.section-title` scale stepped + down, or a dedicated `.bio-name` token if needed). +- **Role line** — both are "everything," so the role line should state that rather than a single + title. Candidate label: *Production · Sound Design · Live* (proposed UI label, not copy). +- **Bio body** — `[BIO SLOT — Daniel supplies per member]`. + +> **Khabran's bio is an OPEN TODO** — Daniel will add it later (open question §8). Daniel's bio +> material exists in the interview transcript and is drafted below for approval; **Khabran's card +> renders its slot empty / with a placeholder until his text arrives.** Design the card so a missing +> bio degrades gracefully (portrait + name + role line still compose; the body block simply absent) — +> the same null-renders-nothing discipline `ReleaseDescription` uses. + +> `[COPY C — FOR APPROVAL — Daniel bio, drafted from transcript; Khabran's TBD]` +> *Daniel started on drums at ten and found electronic music at seventeen — synthesizers first. A +> metalhead at heart, he spent ten years as a Detroit artist, shaped most of all by modern +> underground Detroit techno. He's also an engineer: custom plugins, hardware recording rigs, the +> tools behind the tracks. To him the science and the math matter as much as the beauty — tension and +> release, built deliberately.* + +### 4.2 Optional split — the meeting / origin + +If the bio pair runs short, a `.section-split` (prose left, portrait right — IMG could reuse the duo +shot or a second portrait) carries the meeting story and the pathos register: *underground art by +real people, for real people, for strife and celebration.* Mark optional — fold into the intro prose +if Daniel prefers a tighter People movement. + +--- + +## 5. The Process + +**Divider tag:** `The Process`. + +Reuse Home's **dark band** (`.section-dark`). `.section-label-dark` "How It's Made" + +`.section-title-dark` (e.g. *Digital, Analog, Whatever Moves*). The dark ground gives the +gear/method material its own visual chapter and reads as the analytical (logos) register. + +**Gear-stage cards** — reuse the `.features-grid` / `.feature-card` structure (Home uses four cards; +About uses the same count). These are not "features we offer" but **stages of the process**, each +with a hand-rolled SVG icon in the existing `.feature-icon` slot: + +1. **Sketch** — start on the Akai Force or MPC Live 3. +2. **Arrange** — into Ableton, or the whole thing in REAPER (heavy REAPER users). +3. **Studio** — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made. +4. **Live Rig** — DAWless live synthesizer rigs, sometimes fully improvised. Built for the warehouse. + +> `[COPY D — FOR APPROVAL — Process card bodies]` +> 1. *Sketch — A loop starts on the Force or the MPC. The idea comes first.* +> 2. *Arrange — Sometimes into Ableton, sometimes start-to-finish in REAPER. Whatever gets the take.* +> 3. *Studio — A wall of synths and pedals, digital and analog, some of it built by hand.* +> 4. *Live Rig — DAWless rigs for the room. Sometimes composed, sometimes pure improvisation. Think +> Octave One — big spread of gear, big tunes, meant for the warehouse.* + +> `[COPY D-intro — FOR APPROVAL — Process standfirst, optional]` +> *It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves +> the room. The soul in this music is designed, not extracted; assembled, not distilled.* + +(The "designed, not extracted / assembled, not distilled / constructed, not grown" line is the +sharpest statement of the logos register and the soul-is-engineered thesis. Recommend it land here, +in the Process movement, rather than the hero — it's the *why behind the method*, and it pays off +the dark band. Flag for Daniel: hero standfirst vs. Process — his call.) + +Below the dark band: a **full-bleed parallax** (IMG SLOT D — **hands-on-gear shot**, the literal +proof-of-effort image). Home's trailing `mixer.jpg` / `mixer-bw.jpg` pair is the precedent. + +--- + +## 6. The Product + +**Divider tag:** `The Product`. + +Two-column `.section`: `.section-label` "The Output" + `.section-title` (e.g. *Classics, with a +Twist*); prose framing the catalogue as the evidence — what the site is *for*. + +> `[COPY E — FOR APPROVAL — Product intro]` +> *Everything ends up here, in the catalogue. We play the classics, with a twist — proof that +> someone in Charleston is still pushing the club sound forward.* + +### 6.1 Medium triptych — should CUTS / SESSIONS / MIXES be explained here? + +**Open question (§8), recommendation below.** The three mediums already exist app-wide and the Home +page already carries a medium triptych (`.medium-grid` / `.medium-card`, the Studio / Live / DJ Mix +cards). Two shapes: + +- **(i) Reuse the `.medium-card` grid** with a one-line frame of each medium (CUTS = composed studio + work; SESSIONS = live, unrepeatable; MIXES = uninterrupted DJ sets), each linking to `/cuts`, + `/sessions`, `/mixes`. **Pro:** ties the About narrative directly to the catalogue; reuses an + existing component; gives the Product movement a concrete payoff. **Con:** partial duplication of + the Home page's medium section. +- **(ii) Prose-only mention**, no cards — name the three mediums in a sentence and let the catalogue/ + nav do the explaining. **Pro:** avoids duplicating the Home triptych. **Con:** the About page is + the natural place a newcomer learns *what a "Session" is* vs. a "Mix." + +**Recommend (i) with a lighter touch than Home** — the About page is exactly where the taxonomy +should be explained for someone reading top-to-bottom, and the medium cards are the established +device for it. Keep the copy to one line per medium (a frame, not a re-pitch) so it reads as +*definition*, not a second sales section. If Daniel finds it too repetitive next to Home, fall back +to (ii). + +> `[COPY F — FOR APPROVAL — medium one-liners, if cards used]` +> - *CUTS — studio work, composed and finished.* +> - *SESSIONS — live, caught once, never the same twice.* +> - *MIXES — uninterrupted sets, start to finish.* + +### 6.2 The live turn — "on the street, in the swamp" + +Close the Product movement with a `.section-split` (or a second short band) carrying the live/public +identity — the part of the collective that isn't a release at all. + +> `[COPY G — FOR APPROVAL — live identity]` +> *But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a +> generator, and a bunch of good vibes.* + +--- + +## 7. Closing CTA + +Reuse Home's `.cta-banner`. Headline with the `` device; one primary + one ghost action. + +- Primary (`.btn-white`): **Explore the Archive** → `/archive`. +- Secondary (`.btn-outline-white`): **Hear a Cut** / **Start Streaming** — reuse `StreamNowButton`'s + behaviour if a streaming CTA is wanted, or link to `/cuts`. (Home's CTA pairs "Explore the Archive" + + a live-schedule button; About should point inward to the catalogue, the thing it just argued for.) + +> `[COPY H — FOR APPROVAL — CTA]` +> *Headline: "Hear the Proof" / sub: "The catalogue is the evidence. Start listening."* + +Trailing full-bleed parallax (IMG SLOT E) to close, matching Home's structure. + +--- + +## 8. Image slots — summary table + +5 slots specced; 4–5 photos expected. **Daniel is still sorting final files — treat every slot as a +TODO; do not block on them.** Each slot degrades to the existing fallback treatment (or a bw +placeholder) until a file lands. + +| Slot | Section | Role | Orientation / aspect | bw+colour pair? | Likely file | +|---|---|---|---|---|---| +| **A** | Hero right column | **Likely HERO** — duo shot, "two people" at first paint | Landscape or square (fits `md=6`) | Optional (hover crossfade) | a duo shot; could promote `dd-duo-2.jpeg` | +| **B** | Full-bleed band under hero | Atmosphere / duo anchor | Landscape ~2048×1365 (Home precedent) | **Yes** (Home pairs bw+colour) | `dd-duo-hero` pair (or a new duo/gear shot) | +| **C1** | People — bio card | Khabran portrait | Portrait ~1365×2048 | Optional | Khabran portrait (TODO) | +| **C2** | People — bio card | Daniel portrait | Portrait ~1365×2048 | Optional | Daniel portrait (TODO) | +| **D** | Process — band under dark section | **Hands-on-gear** (proof of effort) | Landscape | Yes | a gear shot (or reuse `mixer` pair) | +| **E** | Closing trailing band | Atmosphere close | Landscape | Yes | gear/atmosphere | + +If only 4 files arrive, the two safe drops are slot B (the hero column A already carries a duo shot) +and slot E (the closing band is decorative). The two bio portraits (C1/C2) and one gear shot (D) are +the load-bearing four. + +### Image hosting — OPEN QUESTION for implementation + +**Where do these images physically live, and by what path are they served?** Two precedents exist in +the repo and they differ: + +- **Static `wwwroot/img/`** — every Home page image (`dd-duo-hero.jpeg`, `mixer.jpg`, etc.) is a + committed static asset under `DeepDrftPublic/wwwroot/img/`, referenced as `img/...`. Simplest; + these are brand/marketing assets, not catalogue content. **This is the likely right home** for the + About images by direct analogy to Home. +- **Image vault / streaming endpoint** — release cover art and session hero images go through the + FileDatabase Image vault and the unauthenticated image-streaming endpoint. That machinery is for + *content* (covers, hero images tied to releases), not chrome. The About portraits are chrome. + +**Recommendation (flag, do not resolve):** put the About images in `wwwroot/img/` alongside the Home +assets — they are marketing chrome with the exact lifecycle of the existing Home photos. Only reach +for the vault if Daniel wants these editable from the CMS, which the brief gives no signal of. **This +is staff-engineer's call at implementation; named here so it isn't discovered mid-build.** + +--- + +## 9. Open questions (for Daniel) + +1. **Khabran's bio.** Not yet supplied — the card renders its body slot empty/placeholder until it + arrives. Daniel's bio is drafted from the transcript (`[COPY C]`); both are his to finalise. +2. **Final photos.** 4–5 files still being sorted; every image slot is a TODO. Spec is laid out so + placement is ready when files arrive (§8). +3. **Image hosting path.** `wwwroot/img/` (recommended, Home-analogous) vs. the image vault. Flagged + for staff-engineer; recommendation in §8. +4. **CUTS / SESSIONS / MIXES — explained on About?** Recommend yes, via a one-line-per-medium reuse + of the `.medium-card` grid (§6.1); fall back to prose-only if it reads as duplicate of Home. +5. **Where does the "designed, not extracted" thesis land** — hero standfirst or the Process + movement? Recommend Process (§5). +6. **Hero title wording** — "Who We Are" vs. "The Collective" vs. a Deep/DRFT masthead echo. Header + is proposed; Daniel's call. +7. **All `[COPY …]` blocks** are drafts pending Daniel's voice. None ship as written without his pass. + +--- + +## 10. Implementation notes (for staff-engineer, when approved) + +- **No new visual language.** Assemble from the Home primitives in §1. The only candidate new classes + are the two bio-card pieces (`.bio-name`, `.bio-role`, `.bio-body` or similar) — and even those + should first be tried with existing type tokens before adding scoped CSS to a new `About.razor.css`. +- **Hero:** reuse the `.hero-*` classes directly (About's own words), **not** the `DeepDrftHero` + component (it hard-codes the masthead + streaming CTA). +- **Page-scoped CSS:** follow Home's pattern — `About.razor.css` scoped, mirrored into the global + `deepdrft-styles.css` only for anything that must reach beyond the component (Home does this for the + section primitives; the About page should *consume* those, not re-declare them). +- **ParallaxImage:** supply `NaturalWidth`/`NaturalHeight` for every above-the-fold band to avoid the + documented layout shift (component remarks); pass the bw+colour `Image1`/`Image2` pair where files + allow. +- **Nav:** register `/about` in `Pages.cs` (the centralised nav index) so it appears in + `DeepDrftMenu`. +- **Null-safe images/bios:** every image slot and Khabran's bio must degrade gracefully (fallback or + absent block) — the page must compose correctly before any final file or Khabran's text lands. +- **Out of scope:** no source/Razor written by this spec; this is design only.