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/credits.mdx

@@ -83,7 +83,7 @@ Mike Judge's 1999 film isn't just a comedy — it's a documentary about corporat
 | **Red Swingline** | Logo/branding | The small things that matter |
 | **"Did you get the memo?"** | Throughout | Clear documentation is essential |
 | **"I could set the building on fire"** | Footer | But we'd rather process documents |
-| **Pieces of Flair** | Coming soon | Gamification for the bureaucratic soul |
+| **Pieces of Flair** | Badge system | Gamification for the bureaucratic soul |
 
 ### Key Quotes Used
 
@@ -131,6 +131,8 @@ For creating a protocol that lets AI agents access tools without reinventing the
 
 For creating Office Space and giving the tech industry a shared vocabulary for describing workplace dysfunction. The red stapler is a symbol of what happens when you ignore the people doing the actual work.
 
+The hero image — featuring THE actual film slate and red Swingline from production — is courtesy of [Mike Judge on X](https://x.com/MikeJudge).
+
 ### Swingline
 
 For actually manufacturing a red stapler after the movie came out. Sometimes life imitates art. (Fun fact: the prop department painted a black stapler red because Swingline didn't make that color in 1999.)

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>

src/content/docs/index.mdx

@@ -5,8 +5,8 @@ template: splash
 hero:
   tagline: "I was told there would be document extraction."
   image:
-    file: ../../assets/swingline-hero.png
-    alt: "Milton's Red Swingline Stapler"
+    file: ../../assets/office-space-clapper.jpg
+    alt: "Office Space film slate with the iconic red Swingline stapler"
   actions:
     - text: Get Started
       link: /installation/

src/pages/404.astro

@@ -0,0 +1,38 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+---
+
+<StarlightPage frontmatter={{ title: '404 - Page Not Found', template: 'splash' }}>
+  <div style="text-align: center; padding: 2rem;">
+    <div style="display: flex; justify-content: center; margin-bottom: 2rem;">
+      <img
+        src="/burned-stapler-recover.webp"
+        alt="Milton's stapler recovered from the ashes"
+        style="max-width: 500px; width: 100%; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);"
+      />
+    </div>
+
+    <h1 style="font-size: 2.5rem; margin-bottom: 0.5rem;">I believe you have my page...</h1>
+
+    <p style="font-size: 1.25rem; opacity: 0.8; margin-bottom: 2rem;">
+      The page you're looking for has been relocated to the basement.
+    </p>
+
+    <blockquote style="font-style: italic; opacity: 0.7; margin: 2rem auto; max-width: 500px;">
+      "I was told I could listen to the radio at a reasonable volume from nine to eleven..."
+    </blockquote>
+
+    <div style="margin-top: 2rem;">
+      <a
+        href="/"
+        style="display: inline-block; padding: 0.75rem 1.5rem; background: #dc2626; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;"
+      >
+        Return to Safety
+      </a>
+    </div>
+
+    <p style="margin-top: 3rem; font-size: 0.875rem; opacity: 0.5;">
+      Error 404 · But at least the stapler survived.
+    </p>
+  </div>
+</StarlightPage>