docs(about): propose 3 visual-distinction directions

About reuses Home's section grammar in Home's order. New product note offers
three narrative-backbone directions (Liner Notes / Contact Sheet / Offset
Ledger) within brand guardrails, with a recommendation. Awaiting Daniel's pick.

product-notes/about-page-distinction.md

@@ -0,0 +1,302 @@
+# About Page — Visual Distinction Directions
+
+Status: **OPEN — awaiting Daniel's pick.** Author: product-designer. Date: 2026-06-17.
+Surface: public site only (`DeepDrftPublic.Client/Pages/About.razor` + `About.razor.css`).
+
+Companion to `about-page.md` (the approved structure + copy spec). **That content does not change** —
+the three movements (People / Process / Product), all COPY blocks, the image-slot plan, and the route
+are all signed off. This note is purely about the *visual treatment* of that content.
+
+---
+
+## The problem, stated precisely
+
+The built page doesn't just *feel* like Home — it is Home's grammar, reused in Home's order. About
+re-declares Home's section primitives verbatim (`About.razor.css` is explicit about this: the `.hero-*`,
+`.section`, `.section-divider`, `.section-dark`, `.section-split`, `.medium-*`, `.cta-*`, `.feature-*`
+classes are copied "verbatim from those sources"), and lays them down in the **same sequence** Home uses:
+
+```
+Home:   hero-split → full-bleed band → divider → two-col section → dark band → split → CTA → trailing band
+About:  hero-split → full-bleed band → divider → two-col section → dark band → split → CTA → trailing band
+```
+
+Same primitives, same rhythm, same order → reads as a Home clone with different words. The original spec
+*asked* for this ("built entirely in the Home page's visual language… No new visual vocabulary is
+proposed") — that decision is what now needs revisiting. The spec optimised for *continuity*; it
+overshot into *sameness*.
+
+**The guardrails (unchanged):** same palettes (Charleston in the Day / Lowcountry Summer Nights), same
+type families (Bodoni Moda / Cormorant / DM Sans), same voice, same gas-lamp/lava-lamp motif vocabulary,
+same bw↔colour `ParallaxImage` crossfade idiom. Distinction comes from **composition, rhythm, structure,
+and one signature device** — never from new colour, type, or anything that reads as a separate site.
+
+**First-principles framing.** Home's job is *arrival and orientation* — it fans out: "here are the
+mediums, here's what we offer, here's a taste." Its rhythm is a **grid of equal blocks** (3 medium cards,
+4 feature cards, symmetric 50/50 splits). About's job is *argument and narrative* — a single sustained
+read, People → Process → Product, one claim earned over a scroll. A narrative wants a **different
+backbone than a grid**: a spine, a sequence, a sense of progression. That mismatch — grid rhythm forced
+onto a narrative — is the deepest reason it feels borrowed. Each direction below picks a different
+narrative backbone.
+
+---
+
+## What stays constant across all three directions
+
+So the divergence is legible and the brand holds:
+
+- **Palette tokens** — every `var(--deepdrft-*)` stays. No new colours.
+- **Type stack** — display serif for titles, mono for eyebrows/labels, body for prose. The `<em>`
+  italic-serif emphasis on one word per title stays.
+- **The bw↔colour `ParallaxImage` crossfade** — the brand's signature image behaviour. All three
+  directions use it; they differ in *how images are framed and placed*, not whether they crossfade.
+- **The three divider tags** (The People / The Process / The Process) remain the movement boundaries —
+  though two directions restyle the divider itself into the signature device.
+- **The dark band for Process** — the navy ground for the logos/analytical movement is a strong
+  mapping and survives in all three (its internal layout may change).
+
+---
+
+## Direction 1 — "The Liner Notes" (numbered editorial spine)
+
+**The one-line idea:** About becomes a **numbered three-movement essay** — a record's liner notes, or a
+gatefold sleeve — with a persistent left margin carrying oversized movement numerals and running
+marginalia, while the content column runs asymmetrically to the right.
+
+### The signature device
+A **left margin rail**, ~12–16% of viewport width, that runs the length of the page. It carries:
+- **Oversized Bodoni numerals** — `01` / `02` / `03` — one per movement, set in the display serif at
+  `clamp(5rem, 10vw, 9rem)`, weight 300, in a low-opacity navy (or green for the active movement as it
+  scrolls into view). These replace the centred `.section-divider` rule entirely.
+- **A thin vertical rule** running continuously down the margin (the `--deepdrft-border` hairline,
+  vertical instead of Home's horizontal `.divider-line`) — a literal spine for the narrative.
+- **Mono marginalia** — short rotated/stacked captions beside images and quotes ("Charleston, SC",
+  "Akai Force", "100% live"), the way a magazine annotates a photo. This is where image captions live,
+  giving photos an editorial frame Home never has.
+
+The content column sits to the right of the rail and is **offset / asymmetric** — never the centred,
+balanced 4/8 grid Home uses. Prose hangs at a consistent left edge; pull-quotes (the sharp lines —
+"designed, not extracted; assembled, not distilled") break *left into the margin* at large serif scale.
+
+### How it diverges from Home
+- Home has **no persistent vertical structure** — every section is a fresh full-width block. The
+  continuous numbered spine is the single strongest "this is a different page" signal, visible at every
+  scroll position.
+- Home's dividers are **horizontal centred rules**; here the divider *is* the vertical rail + numeral.
+- Home is **centred and symmetric**; this is **left-anchored and asymmetric**.
+
+### How it stays in-theme
+- The numerals are Bodoni Moda — the exact display face Home's titles use. The marginalia is the same
+  mono eyebrow style (`.hero-eyebrow` / `.section-label`), just rotated/repositioned.
+- The vertical rule is the same hairline token as `.divider-line`, reoriented.
+- Palette, prose styling, dark Process band, crossfade images: all untouched.
+
+### Photography that serves it
+- **Portrait-orientation, editorially cropped, inset** (not full-bleed) — images sit *within* the
+  content column with generous margin air, captioned in the rail. The restraint is the point: a few
+  precisely-placed framed shots, not a wall of full-bleed bands.
+- The two **member portraits** (C1/C2) are the natural anchors — tall 1365×2048 bw shots, colour on
+  hover via the crossfade, each captioned in the margin with name + role.
+- One **landscape gear shot** in the Process movement, but inset and captioned ("the live rig"), not a
+  full-width band.
+- **Best supplied as:** tall portraits + a couple of detail/gear shots; bw primary, colour crossfade.
+  Full-bleed shots are *not* what this direction wants — it's about framing and white space.
+
+### Pros
+- Strongest, most unmistakable identity of the three. Reads instantly as "the story page."
+- The numbered-movement system makes the People/Process/Product structure *visible* without a heading
+  that says "Movement One" — exactly the spec's stated goal (§2: "legible without a heading").
+- Marginalia gives bespoke photos an editorial home and solves image captioning elegantly.
+- Most "magazine feature" of the set — flattering to a collective that wants to read as serious artists.
+
+### Cons / cost
+- **Highest implementation cost.** A persistent margin rail with scroll-reactive numerals is genuinely
+  new layout (CSS grid with a fixed rail column; optional `IntersectionObserver` for active-numeral
+  highlight). Not a recombination of existing primitives.
+- Asymmetric margin rails are the **hardest to make responsive** — on mobile the rail must collapse
+  (numerals inline above each movement, marginalia folds under images). Needs deliberate breakpoint design.
+- Risks feeling *too* distinct if executed heavy-handed — the guardrail is keeping it quiet.
+
+**Relative cost: HIGH.** New layout system + responsive collapse + optional scroll observer.
+
+---
+
+## Direction 2 — "The Contact Sheet" (full-bleed cinematic, photography-led)
+
+**The one-line idea:** Invert Home's text-first/image-as-accent balance. About becomes
+**photography-led** — full-bleed duotone images are the structural spine, and text is overlaid on or
+interleaved between them as captions and standfirsts. The collective shown, not just described.
+
+### The signature device
+**Edge-to-edge full-bleed image bands as the primary structure**, each treated as a **duotone** (navy
+shadows → warm white highlights, derived from the existing palette tokens — *not* a new colour, a
+two-tone map of colours already in the system). Text lives in two registers:
+- **Overlaid** — movement titles set *over* a darkened full-bleed image (scrim gradient already exists
+  as `.medium-scrim`), the way a film title card or album back-cover works.
+- **Interleaved tighter prose blocks** between image bands — narrower measure, more white space than
+  Home's `.section`, so the rhythm is image / breath / image rather than Home's block / block / block.
+
+Home uses parallax bands as *punctuation between* text sections. This direction makes the **image bands
+the sentences** and text the punctuation — a full inversion of the figure/ground relationship.
+
+### How it diverges from Home
+- Home is **text-dominant**, images are accents (one full-bleed band per major beat). This is
+  **image-dominant** — the page is mostly photography, text earns its place between.
+- The **duotone treatment** is a consistent grade Home doesn't apply (Home shows straight bw + colour
+  crossfade). Duotone gives About a unified cinematic skin while staying inside the palette.
+- Titles-over-image is a composition Home never uses (Home's titles always sit on a flat ground).
+
+### How it stays in-theme
+- Duotone is built *from* `--deepdrft-navy` and `--deepdrft-white` — it's a grade of the existing
+  palette, not a new one. (Crossfade-to-full-colour on hover can still pay off the bw↔colour idiom.)
+- The scrim, the type, the `<em>` emphasis, the mono eyebrows — all reused.
+- The dark Process band becomes the *natural* mode here rather than an exception — the whole page leans
+  darker and more cinematic, with the People/Product movements as the lighter relief.
+
+### Photography that serves it
+- **This direction lives or dies on photo quality and quantity** — it's the most photo-hungry. Needs
+  **strong full-bleed landscape shots**: the duo, the gear, the live/warehouse atmosphere, the street/swamp.
+- Wants **atmosphere and environment**, not just portraits — wide shots with negative space for text
+  overlay (a title needs a dark quiet corner to sit in).
+- **Best supplied as:** 5–7 high-res landscape shots, ideally already shot with negative space for
+  overlay; bw or colour (the build applies the duotone grade). Daniel's "NEW About-specific photos"
+  are the enabler here — if the inventory is rich and cinematic, this direction has the highest ceiling.
+
+### Pros
+- Most emotionally immediate — you *see* the people and the room, which is the entire pathos/ethos pitch
+  ("real people in the Charleston scene"). Shows the proof rather than asserting it.
+- Strong distinct identity from a different lever (imagery) than Direction 1 (structure).
+- Moderate build — full-bleed bands and scrims already exist; the new work is the duotone grade and
+  overlay-text compositions, not a new layout engine.
+
+### Cons / cost
+- **Photo-dependent and therefore risky.** The one open item in the spec is *the photos aren't final
+  yet*. A photography-led direction that ships before great photos arrive degrades worse than a
+  text-led one — placeholders in a full-bleed-image page are very visible. Couples the page's success
+  to an unresolved dependency.
+- Text-over-image hurts **readability and accessibility** if scrims/contrast aren't carefully tuned;
+  the bio prose (especially Daniel's long bio) doesn't want to live over an image — needs flat-ground
+  exceptions, which slightly dilutes the concept.
+- Duotone grade needs either pre-processed assets or a CSS/SVG filter pass — a small new technique.
+
+**Relative cost: MODERATE.** Reuses bands/scrims; new work is duotone grade + overlay compositions +
+contrast tuning. But carries schedule risk via the photo dependency.
+
+---
+
+## Direction 3 — "The Offset Ledger" (asymmetric rhythm + signature textural divider)
+
+**The one-line idea:** Keep Home's primitives largely intact, but **break the symmetry and re-pitch the
+rhythm**, plus introduce **one signature recurring motif** — a distinctive textural/waveform divider —
+that becomes About's fingerprint. The lightest-touch direction: distinct, but built from what's there.
+
+### The signature device
+Two moves working together:
+1. **Asymmetric column rhythm.** Home's two-col section is a balanced 4/8 with the title left, prose
+   right, every time. About **alternates** the offset — title-left/prose-right, then prose-left/title-
+   right — and pushes the ratios off-balance (3/9, 9/3) so no two movements share a footprint. The
+   member bio pair goes from Home's even 6/6 grid to a **staggered/offset pair** (one card dropped
+   vertically against the other), breaking the "grid of equal blocks" feel.
+2. **A signature divider motif** replacing Home's plain `.divider-line`. Instead of a flat hairline
+   rule between movements, About uses a **thin waveform/oscillation line** — a subtle SVG sine or a
+   miniature static waveform stroke — as its movement divider. This ties directly to the site's
+   existing lava-lamp/`WaveformVisualizer` identity (the waveform is *already* a core DeepDrft motif on
+   the detail pages) and makes the divider unmistakably About-and-DeepDrft, not generic. The mono
+   movement tag sits on this waveform rule instead of a straight line.
+
+### How it diverges from Home
+- Home is **rigorously symmetric** (equal grids, balanced splits, centred rules). About becomes
+  **deliberately off-balance** — the eye travels differently down the page even though the parts are familiar.
+- The **waveform divider** is a recurring signature Home doesn't have — a small motif that recurs three
+  times and stamps the page.
+- The staggered bio pair reads as *editorial layout* rather than *card grid*.
+
+### How it stays in-theme
+- It's the **most conservative** — same primitives, mostly re-proportioned. Lowest risk of reading as a
+  different site.
+- The waveform motif isn't new vocabulary — it's *borrowed from elsewhere in the same product*
+  (the visualizer), so it deepens brand coherence rather than diluting it. Strong argument: it makes
+  About feel more DeepDrft, not less.
+- Palette, type, images, dark band: untouched.
+
+### Photography that serves it
+- **Flexible — the least photo-demanding.** Works with the existing slot plan as-is (portrait bios,
+  landscape gear/atmosphere bands). The bespoke photos slot straight in; the offset rhythm just frames
+  them less symmetrically.
+- The staggered bio pair wants **two portraits of slightly different crop/scale** so the stagger reads
+  as intentional composition, not misalignment. Portrait orientation, bw + colour crossfade as specced.
+- **Best supplied as:** exactly the spec's current §8 inventory — no new photographic demands. Safest
+  against the open photo dependency.
+
+### Pros
+- **Lowest implementation cost and lowest risk.** Largely re-proportioning existing primitives + one
+  new divider motif. Ships closest to what's already built.
+- The waveform divider is a genuinely *clever, cheap* signature — high identity-per-unit-effort, and it
+  reinforces the existing brand motif rather than inventing one.
+- Decouples from the photo dependency — works today with placeholders, improves when photos land.
+
+### Cons / cost
+- **Weakest distinction of the three.** Asymmetry + a dived motif is subtle; a casual visitor might not
+  consciously register "different page" the way they would with Direction 1's numeral spine or
+  Direction 2's full-bleed imagery. Risk: solves the brief only partway.
+- Asymmetric ratios still need responsive care (offsets collapse to stacked on mobile, where the whole
+  distinction partly evaporates — mobile sees a single column regardless).
+- The waveform divider is the one bit carrying most of the load; if it's too subtle it does little, if
+  too loud it fights the editorial restraint. Narrow tuning window.
+
+**Relative cost: LOW.** Re-proportion existing primitives + one new SVG divider component.
+
+---
+
+## Comparison at a glance
+
+| | Direction 1 — Liner Notes | Direction 2 — Contact Sheet | Direction 3 — Offset Ledger |
+|---|---|---|---|
+| **Lever** | Structure (numbered spine) | Imagery (full-bleed duotone) | Rhythm + motif (asymmetry + waveform divider) |
+| **Distinction strength** | Highest | High | Lowest |
+| **Build cost** | High | Moderate | Low |
+| **Photo dependency** | Low (framed portraits) | **High** (cinematic full-bleed) | Lowest (uses current plan) |
+| **Brand-coherence risk** | Medium (most novel) | Medium (duotone is new grade) | Lowest (motif borrowed from product) |
+| **Best if Daniel wants…** | a serious "story page" | to *show* the collective | a safe, quick, clever win |
+
+---
+
+## Recommendation
+
+**Lead with Direction 1 (Liner Notes), with Direction 3's waveform divider folded in as its signature
+motif.** They are not mutually exclusive — the numbered editorial spine (D1) is the structural backbone,
+and the waveform-line divider (D3) is a natural, on-brand way to render the movement boundaries *within*
+that spine. Together they give About the strongest, most coherent identity: a numbered narrative with a
+DeepDrft-native (waveform) signature, built on the existing palette/type/image idioms.
+
+**Why D1 over D2 as the lead:** Direction 2 is the most exciting *if the photography is exceptional and
+ready* — but the spec's single remaining open item is precisely that the photos aren't final. Betting the
+page's identity on the unresolved dependency is the wrong risk. D1's identity comes from *structure*,
+which the build controls completely; great photos then make it better rather than being load-bearing for
+it to work at all. D1 also best serves the page's actual job — a sustained narrative argument — where
+D2's strength (immediate emotional imagery) is slightly at odds with the long-read bio prose.
+
+**Why not lead with D3 alone:** it's the safe pick and the cheapest, and it's a legitimate choice if
+Daniel wants minimal effort — but on its own it may under-deliver on "its own identity." Its best idea
+(the waveform divider) is better deployed *inside* D1 than as the whole answer.
+
+**The fallback ladder, by appetite:**
+- **Most ambitious / strongest identity:** D1 + D3's divider (the recommendation).
+- **If the new photos are genuinely cinematic and Daniel wants to lead with them:** D2.
+- **If the appetite is "make it distinct but cheap and low-risk, ship soon":** D3 alone.
+
+**Open question for Daniel (one):** how much build appetite does this have? D1 is real new layout work;
+D3 is an afternoon. That single answer picks the lane. Everything else (palette, type, copy, image slots)
+is already settled.
+
+---
+
+## Note on the current `About.razor.css` duplication
+
+Independent of which direction is chosen: the current build **re-declares Home's primitives verbatim**
+in `About.razor.css` (its own header comment says so). Whichever direction lands, this is the moment to
+decide whether those shared primitives should be **promoted to the global `deepdrft-styles.css`** (so
+About *consumes* them rather than copying — which §10 of the spec actually recommended) instead of
+maintaining two divergent copies. Flagging as a structural concern for staff-engineer to weigh during
+implementation — not a design call, but a cost the chosen direction inherits. (Surfaced for awareness;
+not in product-designer's remit to resolve.)

product-notes/about-page.md

@@ -4,6 +4,11 @@ Status: **APPROVED for implementation** — structure + copy signed off 2026-06-
 product-designer. Date: 2026-06-17. Implementer: staff-engineer. Surface: **public site only**
 (`DeepDrftPublic` / `DeepDrftPublic.Client`).
 
+> **Visual-distinction follow-up (2026-06-17):** the page as built reads too much like Home (it reuses
+> Home's section primitives in Home's order). Structure + copy below are unaffected; the *visual
+> treatment* is being revisited. See `about-page-distinction.md` for 2–3 proposed directions and a
+> recommendation — **awaiting Daniel's pick.**
+
 > **Approval (2026-06-17):** Daniel signed off the structure and all copy. The spec is
 > implementation-ready. All COPY blocks (A–H, D-intro) are **APPROVED** — D (Process card bodies) is
 > approved *provisionally*: Daniel's word was "it's fine for now, we can change that wording later,"