Add Office Space imagery and custom 404 page

- Replace hero with authentic film slate + stapler (courtesy Mike Judge)
- Add 404 page with burned stapler recovery scene
- Update leaderboard with Chotchkie's logo
- Add Mike Judge attribution to credits
- Include Office Space character images for future use

src/content/docs/community/leaderboard.mdx

@@ -3,39 +3,83 @@ title: Flair Leaderboard
 description: Who's got the most pieces of documentation flair?
 ---
 
-import { Aside } from '@astrojs/starlight/components';
+import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
 
 # Flair Leaderboard
 
+<div style="display: flex; justify-content: center; margin: 2rem 0;">
+  <img src="/chotchkies-logo.webp" alt="Chotchkie's Bar & Grill" style="max-width: 300px; border-radius: 8px;" />
+</div>
+
 > *"You know, the Nazis had pieces of flair they made the Jews wear."*
-> *"...okay, we're going to need to talk about your TPS reports."*
 
-## Collect Flair
+We don't require 37 pieces of flair like Brian. Just the minimum — but we encourage *expressing yourself*.
 
-Spend time on documentation pages to earn pieces of flair. Each page has its own badge:
+---
 
-| Page | Flair |
-|------|-------|
-| Home | 📄 "I Was Told There Would Be Extraction" |
-| Backstory | 🔴 "Basement Dweller" |
-| Installation | 🖨️ "PC Load Letter" |
-| Quick Start | ☕ "Case of the Mondays" |
-| Tools Reference | 📋 "TPS Report Expert" |
-| Architecture | 👔 "The Bobs Approved" |
-| Test Dashboard | 📝 "Did You Get The Memo?" |
-| Torture Tests | 😮 "O Face" |
-| Credits | 🔴 "I Have Your Stapler" |
+## Your Collection
 
-<Aside type="caution" title="Coming Soon">
-Full gamification system with localStorage persistence and optional leaderboard API integration.
-</Aside>
+Click the **flair counter** in the bottom-right corner of any page to see your collection. Badges are earned by spending 3+ seconds reading each page.
+
+## Available Flair (12 Badges)
+
+<CardGrid>
+  <Card title="📄 First Extraction" icon="document">
+    Visit the homepage
+  </Card>
+  <Card title="🔴 Basement Dweller" icon="puzzle">
+    Read the backstory
+  </Card>
+  <Card title="🖨️ PC Load Letter" icon="setting">
+    Complete installation
+  </Card>
+  <Card title="☕ Case of the Mondays" icon="rocket">
+    Finish quick start
+  </Card>
+  <Card title="📋 TPS Report Expert" icon="list-format">
+    Browse tools reference
+  </Card>
+  <Card title="👔 The Bobs Approved" icon="approve-check">
+    Study architecture
+  </Card>
+  <Card title="📝 Memo Received" icon="information">
+    Check test dashboard
+  </Card>
+  <Card title="🔥 Jump to Conclusions" icon="warning">
+    Survive torture tests
+  </Card>
+  <Card title="⭐ Flair Enthusiast" icon="star">
+    View leaderboard
+  </Card>
+  <Card title="🎖️ Credit Where Due" icon="heart">
+    Read the credits
+  </Card>
+  <Card title="📚 Legacy Handler" icon="open-book">
+    Learn legacy formats
+  </Card>
+  <Card title="🌐 Cloud Connect" icon="external">
+    Use hosted MCP
+  </Card>
+</CardGrid>
+
+---
 
 ## The Goal
 
 Collect all 12 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.
 
+<Aside type="tip" title="Persistence">
+Your flair collection is stored in localStorage — it persists across sessions but stays on your device.
+</Aside>
+
 ---
 
-<div style="text-align: center; margin-top: 2rem; font-style: italic; opacity: 0.7;">
+<div style="text-align: center; margin-top: 2rem;">
+
 *"We need to talk about your flair..."*
+
+<small style="opacity: 0.6;">
+Image: Chotchkie's Bar & Grill, © 20th Century Fox
+</small>
+
 </div>