New Page: "Reality" - Demo vs. Final Production Comparison

[CuWilliams]

Overview

Add a new "Reality" page to the site — a behind-the-scenes look at the band's production process, framed with self-deprecating humor and genuine openness about how the sausage gets made.

Feature Description

Side-by-Side Audio Comparison

• Display a selected track with two playable audio snippets side by side:
  • Demo — the raw, warts-and-all recording
  • Final — the finished (or "finished") production
• Each snippet: 20–30 seconds, focused on a meaningful passage to highlight the transformation
• Simple playback controls (play/pause, progress bar)

Descriptor / Commentary Field

• A text area per comparison entry for band commentary on the process
• Tone: self-deprecating, honest, absurdist — consistent with the band voice
• Example framing: what went wrong, what accidentally went right, what we were thinking vs. what happened

Visitor Feedback

• Simple reaction mechanism (e.g., thumbs up / thumbs down, or emoji reactions)
• Low-friction — no account or login required
• Static-site-friendly implementation (could use a third-party service like Giscus, or a lightweight custom approach)

Content Structure (JSON-driven)

• New reality.json data file to manage comparison entries
• Fields: id, title, demo_audio, final_audio, commentary, date
• Allows easy addition of new comparisons over time

Design Considerations

• Fits within existing aesthetic (coal black, aged whiskey, tarnished brass)
• Mobile-first layout — stacked on small screens, side-by-side on desktop
• Consistent with BEM CSS methodology
• Progressive enhancement — page should be readable without JS

Tone & Voice

Per docs/VOICE_AND_TONE.md — this page should lean into the band's willingness to be embarrassed by their own work while also being genuinely proud of it. The humor is the delivery mechanism for the honesty.

Open Questions

• What feedback mechanism best fits static hosting constraints?
• How many comparison entries to launch with?
• Should demos be gated behind the Fan Club, or fully public?
• Audio hosting — same /assets/audio/ pattern as existing tracks?

Acceptance Criteria

• New /reality/ page accessible from site navigation
• At least one demo/final comparison entry rendered from JSON
• Audio snippets play independently without conflict
• Commentary renders correctly with band voice
• Feedback mechanism functional
• Mobile responsive
• No-JS fallback in place

[CuWilliams]

Update README.md once issue is complete to reflect changes made in addressing this issue. Maintain the band's tone/aesthetic/style with any README.md updates. Keep all updates concise.