Add Sponsors page with parody advertising support

[CuWilliams]

Overview

Add a new Sponsors page to the site, positioned after Merch in the main navigation. The page will host parody/real advertisements in the band's deadpan, self-deprecating voice. Initial content: a fictional ad for Durt Shampoo, featuring Snowman as the model (he is bald).

The architecture should support future expansion — real sponsors, multiple ad units, external links — while keeping the current absurdist tone intact.

---

Goals

• Add /sponsors/ route between Merch and Fan Club in navigation
• Display sponsor "ad cards" rendered from a JSON data file
• Launch with one parody ad: Durt Shampoo (model: Snowman, who is bald)
• Match existing site aesthetics, voice, and progressive enhancement patterns
• Update all SEO, sitemap, and documentation files as required

---

Implementation Checklist

Page & Template

• Create src/sponsors.njk with correct front matter (layout: base.njk, activePage: sponsors, title: Sponsors, description, scripts: [sponsors.js])
• Hero section with self-aware copy following docs/VOICE_AND_TONE.md
• Dynamic #sponsors-grid container populated by sponsors.js
• <noscript> static fallback for progressive enhancement
• Optional CTA section ("Interested in sponsoring a band nobody's heard of?")

Navigation

• Add Sponsors nav link to src/_includes/header.njk between Merch and Fan Club

Data

• Create assets/data/sponsors.json with initial Durt Shampoo entry:

  {
    "sponsors": [
      {
        "id": "sponsor-durt-shampoo",
        "name": "Durt Shampoo",
        "tagline": "For hair you don't have.",
        "description": "...",
        "model": "Snowman",
        "image": "durt-shampoo.webp",
        "link": "#",
        "featured": true,
        "parody": true,
        "badge": null
      }
    ]
  }

• Update docs/DATA_SCHEMA.md with sponsors.json schema documentation

JavaScript

• Create assets/js/sponsors.js following the standard module pattern:
  • DurtNursUtils.fetchJSON('/assets/data/sponsors.json')
  • Render sponsor cards with BEM classes
  • Event delegation for any interactive elements
  • Register with SPA: DurtNursSPA.registerModule('sponsors', init, { pages: ['sponsors'] })

CSS

• Add .sponsor-card BEM component to assets/css/components.css:
  • Full-width or 2-col grid layout for ad units
  • Brand logo/image area, tagline, description, CTA button
  • .sponsor-card--featured modifier for hero placement
  • Hover state consistent with merch card pattern (translate up 4px, shadow increase)

Images

• Add sponsor/ad images to assets/images/sponsors/
• Run npm run optimize-images to generate WebP versions
• Source or create "Durt Shampoo" ad creative featuring Snowman

SEO & Documentation

• Verify /sponsors/ is included in auto-generated sitemap.xml after build
• Confirm robots.txt allows indexing of /sponsors/ (parody ads should be indexable)
• Update docs/DATA_SCHEMA.md with sponsors schema
• Update CLAUDE.md to reference sponsors.json in the JSON Data Pattern section

---

Copy Guidelines

Per docs/VOICE_AND_TONE.md:

• Hero section: Deadpan acknowledgment of the absurdity ("We have sponsors now. Kind of.")
• Durt Shampoo ad copy: Understatement and escalating absurdity — product benefits that apply to hair you no longer have, testimonials from Snowman that are technically true
• CTA for future sponsors: False confidence + self-deprecation ("Reach dozens of fans. Maybe.")
• Avoid: corporate marketing tone, generic humor, anything that sounds like a real ad agency wrote it

---

Design Notes

• Page layout: consistent with Merch page (hero → grid → CTA)
• Sponsor cards: wider aspect ratio than merch cards (landscape/banner format suits ads)
• Color palette: standard site tokens (--color-aged-whiskey, --color-coal-black, --color-tarnished-brass)
• Typography: Oswald headings, Merriweather body (site-wide standard)
• Ad cards should feel like actual ads but with the band's characteristic self-awareness

---

Files to Create/Modify

File	Action
src/sponsors.njk	Create — new page template
assets/data/sponsors.json	Create — sponsor data
assets/js/sponsors.js	Create — JS module
assets/images/sponsors/	Create — image directory + ad creative
assets/css/components.css	Modify — add .sponsor-card component
src/_includes/header.njk	Modify — add nav link
docs/DATA_SCHEMA.md	Modify — document sponsors schema
CLAUDE.md	Modify — reference sponsors.json

---

Acceptance Criteria

• /sponsors/ page loads and renders correctly on desktop and mobile
• Durt Shampoo ad displays with correct copy, image, and Snowman reference
• Navigation shows "Sponsors" link between Merch and Fan Club
• Page degrades gracefully with JavaScript disabled (<noscript> fallback)
• All copy passes voice guide check (deadpan, self-aware, absurdist)
• Sponsor card component follows BEM naming conventions
• sponsors.json schema is documented in docs/DATA_SCHEMA.md
• /sponsors/ appears in sitemap after build
• Passes WCAG 2.1 AA accessibility requirements
• All new images have WebP versions

[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.