From d656ec3d1097f057f1afc182b05a49e8c65c4499 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Mon, 17 Aug 2026 11:26:12 +0000
Subject: [PATCH] Per-card pages with card-art link previews, and consistency
 fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every card now has its own page — /cards/<slug> for Series One and
/hacking-legends/<slug> for Series Two — so a legend can be shared as a
link instead of a screenshot.

Sharing:
- Each page generates a 1200x630 opengraph-image at build time with the
  card art on the left and the stat line on the right. The card faces are
  500x745 portrait, which X and LinkedIn refuse to render large, so a
  landscape composite is what actually shows the card in a preview.
- All 77 OG images are prerendered by generateStaticParams; no runtime
  image work.

SEO:
- Canonical URLs on every page, Person JSON-LD on card pages, and
  sitemap.xml covering all 82 URLs plus robots.txt.
- The card grids now link to the detail pages, so all 47 Series One
  permalinks are crawlable from /cards.

Consistency, all now derived from the data rather than hardcoded:
- Homepage said both 47 and 50 legends. The stat strip read "50"; it now
  reads cards.length, and gained the Series Two roster count.
- Collector's Box advertised "All 16 cards" -> All 47 cards.
- Homepage said Hacking Legends had no artwork while its own page showed
  30/30 rendered. It now reports illustrated and locked counts from the
  roster. The "what ships next" list no longer promises illustration
  that already happened.

Sourcing:
- Hacker gains a required `sources` field, populated for all 30 entries.
  Every URL was fetched and returned 200 before being written in.
- Sources render on the card page and in the expanded roster report, so
  the historical claims can be checked. RosterCard is an <article> rather
  than a <button> now, because those links cannot live inside a button.

Contribution guide:
- It pointed at src/data/legends.ts, which does not exist, and showed a
  card shape with signatureProjects/skills that no longer matches either
  series. It now documents the real pipeline: src/data/hacking.ts as the
  Series Two source of truth, data/roster.locked.json for Series One with
  src/data/cards.ts generated from it, and the render step that writes
  the front/back fields.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/cards/[slug]/opengraph-image.tsx      |  27 ++
 src/app/cards/[slug]/page.tsx                 |  86 ++++
 src/app/cards/page.tsx                        |   3 +-
 src/app/collect/page.tsx                      |   9 +-
 src/app/contribute/page.module.css            |  34 ++
 src/app/contribute/page.tsx                   |  87 +++-
 .../[slug]/opengraph-image.tsx                |  28 ++
 src/app/hacking-legends/[slug]/page.tsx       | 104 +++++
 src/app/hacking-legends/page.tsx              |   8 +-
 src/app/page.tsx                              |  11 +-
 src/app/robots.ts                             |  13 +
 src/app/sitemap.ts                            |  31 ++
 src/components/CardDetail.module.css          | 434 ++++++++++++++++++
 src/components/CardDetail.tsx                 | 286 ++++++++++++
 src/components/CardFlip.module.css            |  22 +
 src/components/CardFlip.tsx                   |  40 +-
 src/components/CopyLink.tsx                   |  23 +
 src/components/RosterCard.module.css          |  74 ++-
 src/components/RosterCard.tsx                 | 108 +++--
 src/data/hacking.ts                           | 145 ++++++
 src/lib/og.tsx                                | 146 ++++++
 21 files changed, 1632 insertions(+), 87 deletions(-)
 create mode 100644 src/app/cards/[slug]/opengraph-image.tsx
 create mode 100644 src/app/cards/[slug]/page.tsx
 create mode 100644 src/app/hacking-legends/[slug]/opengraph-image.tsx
 create mode 100644 src/app/hacking-legends/[slug]/page.tsx
 create mode 100644 src/app/robots.ts
 create mode 100644 src/app/sitemap.ts
 create mode 100644 src/components/CardDetail.module.css
 create mode 100644 src/components/CardDetail.tsx
 create mode 100644 src/components/CopyLink.tsx
 create mode 100644 src/lib/og.tsx

diff --git a/src/app/cards/[slug]/opengraph-image.tsx b/src/app/cards/[slug]/opengraph-image.tsx
new file mode 100644
index 0000000..d9bc23a
--- /dev/null
+++ b/src/app/cards/[slug]/opengraph-image.tsx
@@ -0,0 +1,27 @@
+import { cards, getCard, rarityLabel } from '@/data/cards';
+import { OG_CONTENT_TYPE, OG_SIZE, renderCardOg } from '@/lib/og';
+
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+export const alt = 'Open Source Legends trading card';
+
+export function generateStaticParams() {
+  return cards.map((c) => ({ slug: c.slug }));
+}
+
+export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const card = getCard(slug);
+  if (!card) throw new Error(`No card for slug ${slug}`);
+
+  return renderCardOg({
+    number: card.number,
+    name: card.name,
+    title: card.title,
+    rarity: card.rarity,
+    rarityLabel: rarityLabel[card.rarity],
+    impact: card.impact,
+    front: card.front,
+    setLabel: 'Series One',
+  });
+}
diff --git a/src/app/cards/[slug]/page.tsx b/src/app/cards/[slug]/page.tsx
new file mode 100644
index 0000000..28e80f2
--- /dev/null
+++ b/src/app/cards/[slug]/page.tsx
@@ -0,0 +1,86 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import CardDetail from '@/components/CardDetail';
+import { cards, getCard, rarityLabel } from '@/data/cards';
+import { site } from '@/data/site';
+
+type Params = { params: Promise<{ slug: string }> };
+
+export function generateStaticParams() {
+  return cards.map((c) => ({ slug: c.slug }));
+}
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const { slug } = await params;
+  const card = getCard(slug);
+  if (!card) return { title: 'Card not found' };
+
+  const title = `${card.name} — ${card.title}`;
+  const description = `${card.knownFor}. Card #${String(card.number).padStart(3, '0')} in ${site.name} Series One, ${rarityLabel[card.rarity]} rarity, impact ${card.impact}.`;
+  const url = `${site.url}/cards/${card.slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: { title, description, url, type: 'profile' },
+    twitter: { card: 'summary_large_image', title, description },
+  };
+}
+
+export default async function CardPage({ params }: Params) {
+  const { slug } = await params;
+  const card = getCard(slug);
+  if (!card) notFound();
+
+  const i = cards.findIndex((c) => c.slug === card.slug);
+  const prev = i > 0 ? cards[i - 1] : undefined;
+  const next = i < cards.length - 1 ? cards[i + 1] : undefined;
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: card.name,
+    jobTitle: card.title,
+    description: card.scouting,
+    nationality: card.nationality,
+    url: `${site.url}/cards/${card.slug}`,
+    image: `${site.url}${card.front}`,
+    subjectOf: {
+      '@type': 'CreativeWork',
+      name: `${card.name} — ${site.name} card #${String(card.number).padStart(3, '0')}`,
+      license: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <CardDetail
+        setLabel="Series One"
+        setHref="/cards"
+        number={card.number}
+        slug={card.slug}
+        name={card.name}
+        title={card.title}
+        knownFor={card.knownFor}
+        rarity={card.rarity}
+        rarityLabel={rarityLabel[card.rarity]}
+        impact={card.impact}
+        nationality={card.nationality}
+        era={card.era}
+        chips={card.projects}
+        chipsLabel="Signature projects"
+        scouting={card.scouting}
+        quote={card.quote}
+        front={card.front}
+        back={card.back}
+        prev={prev && { slug: prev.slug, name: prev.name, front: prev.front }}
+        next={next && { slug: next.slug, name: next.name, front: next.front }}
+      />
+    </>
+  );
+}
diff --git a/src/app/cards/page.tsx b/src/app/cards/page.tsx
index 4720587..f62b3a8 100644
--- a/src/app/cards/page.tsx
+++ b/src/app/cards/page.tsx
@@ -7,7 +7,8 @@ import styles from './page.module.css';
 
 export const metadata: Metadata = {
   title: 'The Set',
-  description: 'A preview of Open Source Legends Series One — 50 collectible cards.',
+  description: `Every card in Open Source Legends Series One — ${cards.length} collectible cards, each with its own page.`,
+  alternates: { canonical: '/cards' },
 };
 
 export default function CardsPage() {
diff --git a/src/app/collect/page.tsx b/src/app/collect/page.tsx
index b776f12..6fad0de 100644
--- a/src/app/collect/page.tsx
+++ b/src/app/collect/page.tsx
@@ -1,12 +1,14 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { site } from '@/data/site';
+import { cards } from '@/data/cards';
 import WaitlistForm from '@/components/WaitlistForm';
 import styles from './page.module.css';
 
 export const metadata: Metadata = {
   title: 'Collect',
   description: 'Order physical foil packs, join the NFT mint list, or print your own Open Source Legends cards.',
+  alternates: { canonical: '/collect' },
 };
 
 const tiers = [
@@ -24,7 +26,12 @@ const tiers = [
     price: '$79',
     unit: 'full set',
     blurb: 'The complete Series One in a numbered display box. Every legend, no duplicates.',
-    features: ['All 16 cards', 'Numbered limited box', 'Premium foil set', 'Certificate of authenticity'],
+    features: [
+      `All ${cards.length} cards`,
+      'Numbered limited box',
+      'Premium foil set',
+      'Certificate of authenticity',
+    ],
     cta: 'Reserve a box',
     featured: true,
   },
diff --git a/src/app/contribute/page.module.css b/src/app/contribute/page.module.css
index 4a521a9..b9a6903 100644
--- a/src/app/contribute/page.module.css
+++ b/src/app/contribute/page.module.css
@@ -93,10 +93,44 @@
   color: #cdd3e0;
 }
 
+.specNotes {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2.4rem;
+  margin-top: 3.2rem;
+}
+
+.specNotes article {
+  padding: 2.2rem;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.specNotes h3 {
+  font-size: 1.7rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.specNotes p {
+  font-size: 1.45rem;
+  color: var(--text-muted);
+  line-height: 1.7;
+}
+
+.specNotes .mono {
+  color: var(--crest);
+  font-size: 1.3rem;
+}
+
 @media (max-width: 900px) {
   .steps {
     grid-template-columns: repeat(2, 1fr);
   }
+  .specNotes {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 @media (max-width: 540px) {
diff --git a/src/app/contribute/page.tsx b/src/app/contribute/page.tsx
index 67c757f..e349498 100644
--- a/src/app/contribute/page.tsx
+++ b/src/app/contribute/page.tsx
@@ -5,6 +5,7 @@ import styles from './page.module.css';
 export const metadata: Metadata = {
   title: 'Contribute',
   description: 'Nominate a legend, design a card, or improve the stats. Open Source Legends is built in the open.',
+  alternates: { canonical: '/contribute' },
 };
 
 const steps = [
@@ -15,18 +16,18 @@ const steps = [
   },
   {
     n: '02',
-    title: 'Draft the card',
-    body: 'Add a record to legends.ts — title, signature projects, skill stack, impact score, and a great quote. Keep it accurate and sourced.',
+    title: 'Draft the card data',
+    body: 'Add a record to the roster for the series you are contributing to — see the spec below. Every factual claim needs a public source we can check.',
   },
   {
     n: '03',
-    title: 'Open a pull request',
-    body: 'Submit art (or use the monogram fallback) and your card data. Maintainers review for accuracy, licensing, and balance.',
+    title: 'Render the faces',
+    body: 'Run the series pipeline to produce the front and back PNGs from your record. Card art is generated from the data, so nobody hand-edits a card image.',
   },
   {
     n: '04',
-    title: 'Ship it',
-    body: 'Merged cards join the printable set and the next physical series. Contributors are credited on the card and in the repo.',
+    title: 'Open a pull request',
+    body: 'Ship the roster record plus the rendered faces. Maintainers review for accuracy, sourcing, licensing, and balance.',
   },
 ];
 
@@ -68,32 +69,76 @@ export default function ContributePage() {
         <div className="container">
           <div className={styles.sectionHead}>
             <span className="kicker">The card spec</span>
-            <h2 className={styles.h2}>One legend, one object</h2>
+            <h2 className={styles.h2}>One legend, one record</h2>
             <p className={styles.specSub}>
-              Every card is a typed record. Add yours to <span className="mono">src/data/legends.ts</span>.
+              Series Two is the set currently taking nominations. Its roster is
+              hand-curated in <span className="mono">src/data/hacking.ts</span>, and that
+              file is the source of truth — the pipeline reads it directly, so there is no
+              second copy to keep in sync.
             </p>
           </div>
           <pre className={styles.code}>
-            <code>{`{
-  number: 17,
+            <code>{`// src/data/hacking.ts
+{
+  number: 31,
   slug: "ada-lovelace",
   name: "Ada Lovelace",
+  handle: "",                  // optional scene handle
   title: "The First Programmer",
-  rarity: "iconic",          // iconic | legendary | epic | rare
-  impact: 96,                // headline score, 0–99
-  era: "1815 – 1852",
+  knownFor: "The first published algorithm",
+  rarity: "iconic",            // iconic | legendary | epic | rare
+  impact: 96,                  // headline score, 0-100
+  technical: 97,               // the four stat bars on the card back
+  social: 70,
+  notoriety: 60,
+  influence: 95,
   nationality: "England",
-  signatureProjects: ["Analytical Engine", "Note G"],
-  skills: [
-    { label: "Algorithmic Thinking", value: 99 },
-    { label: "Vision", value: 99 },
-    { label: "Mathematics", value: 97 },
-    { label: "Open Source Impact", value: 90 },
-  ],
+  era: "1815-1852",
+  domains: ["Computing theory", "Mathematics"],
   scouting: "Wrote the first published algorithm...",
-  quote: "That brain of mine is something more than merely mortal.",
+  note: "Curator's voice. Never a fabricated quote.",
+  status: "draft",             // locked | draft | candidate
+  sources: [                   // required — at least one public reference
+    { label: "Ada Lovelace", url: "https://en.wikipedia.org/wiki/Ada_Lovelace" },
+  ],
 }`}</code>
           </pre>
+
+          <div className={styles.specNotes}>
+            <article>
+              <h3>Then render the faces</h3>
+              <p>
+                <span className="mono">pnpm hacking validate</span> checks the roster and
+                reports what art is missing.{' '}
+                <span className="mono">pnpm hacking all 31</span> generates the portrait,
+                renders the front and back, and writes them to{' '}
+                <span className="mono">public/cards/hacking/</span>. The{' '}
+                <span className="mono">front</span> and <span className="mono">back</span>{' '}
+                fields are written by that step — never by hand.
+              </p>
+            </article>
+            <article>
+              <h3>Series One works differently</h3>
+              <p>
+                Series One is complete and locked. Its fact-checked roster lives in{' '}
+                <span className="mono">data/roster.locked.json</span>, and{' '}
+                <span className="mono">src/data/cards.ts</span> is generated from it — the
+                header of that file says so. Edit the JSON and re-run{' '}
+                <span className="mono">node scripts/open-source-legends.mjs all</span>;
+                a pull request that edits <span className="mono">cards.ts</span> directly
+                will be overwritten by the next render.
+              </p>
+            </article>
+            <article>
+              <h3>Sourcing is not optional</h3>
+              <p>
+                Every historical claim on a card has to be checkable. The{' '}
+                <span className="mono">sources</span> array is rendered on the card page
+                and in the roster&apos;s scouting report, so a reader can go straight to
+                the reporting, court record, talk or primary writing behind it.
+              </p>
+            </article>
+          </div>
         </div>
       </section>
     </>
diff --git a/src/app/hacking-legends/[slug]/opengraph-image.tsx b/src/app/hacking-legends/[slug]/opengraph-image.tsx
new file mode 100644
index 0000000..6bccb04
--- /dev/null
+++ b/src/app/hacking-legends/[slug]/opengraph-image.tsx
@@ -0,0 +1,28 @@
+import { hackers, getHacker, rarityLabel } from '@/data/hacking';
+import { OG_CONTENT_TYPE, OG_SIZE, renderCardOg } from '@/lib/og';
+
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+export const alt = 'Hacking Legends trading card';
+
+export function generateStaticParams() {
+  return hackers.filter((h) => h.front).map((h) => ({ slug: h.slug }));
+}
+
+export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const h = getHacker(slug);
+  if (!h?.front) throw new Error(`No illustrated card for slug ${slug}`);
+
+  return renderCardOg({
+    number: h.number,
+    name: h.name,
+    handle: h.handle,
+    title: h.title,
+    rarity: h.rarity,
+    rarityLabel: rarityLabel[h.rarity],
+    impact: h.impact,
+    front: h.front,
+    setLabel: 'Hacking Legends',
+  });
+}
diff --git a/src/app/hacking-legends/[slug]/page.tsx b/src/app/hacking-legends/[slug]/page.tsx
new file mode 100644
index 0000000..0511783
--- /dev/null
+++ b/src/app/hacking-legends/[slug]/page.tsx
@@ -0,0 +1,104 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import CardDetail from '@/components/CardDetail';
+import { hackers, getHacker, rarityLabel, statusLabel } from '@/data/hacking';
+import { site } from '@/data/site';
+
+type Params = { params: Promise<{ slug: string }> };
+
+export function generateStaticParams() {
+  return hackers.map((h) => ({ slug: h.slug }));
+}
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const { slug } = await params;
+  const h = getHacker(slug);
+  if (!h) return { title: 'Card not found' };
+
+  const title = `${h.name} — ${h.title}`;
+  const description = `${h.knownFor}. Card #${String(h.number).padStart(3, '0')} in ${site.name} Series Two: Hacking Legends, ${rarityLabel[h.rarity]} rarity, impact ${h.impact}.`;
+  const url = `${site.url}/hacking-legends/${h.slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: { title, description, url, type: 'profile' },
+    twitter: { card: 'summary_large_image', title, description },
+  };
+}
+
+export default async function HackerPage({ params }: Params) {
+  const { slug } = await params;
+  const h = getHacker(slug);
+  if (!h) notFound();
+
+  const i = hackers.findIndex((x) => x.slug === h.slug);
+  const prev = i > 0 ? hackers[i - 1] : undefined;
+  const next = i < hackers.length - 1 ? hackers[i + 1] : undefined;
+
+  // Art is published for the whole set, but keep the page honest if a face is
+  // ever missing rather than rendering a broken image.
+  if (!h.front || !h.back) notFound();
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: h.name,
+    alternateName: h.handle,
+    jobTitle: h.title,
+    description: h.scouting,
+    nationality: h.nationality,
+    url: `${site.url}/hacking-legends/${h.slug}`,
+    image: `${site.url}${h.front}`,
+    ...(h.sources?.length
+      ? { sameAs: h.sources.map((s) => s.url) }
+      : {}),
+    subjectOf: {
+      '@type': 'CreativeWork',
+      name: `${h.name} — ${site.name} Hacking Legends card #${String(h.number).padStart(3, '0')}`,
+      license: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <CardDetail
+        setLabel="Hacking Legends"
+        setHref="/hacking-legends"
+        number={h.number}
+        slug={h.slug}
+        name={h.name}
+        handle={h.handle}
+        title={h.title}
+        knownFor={h.knownFor}
+        rarity={h.rarity}
+        rarityLabel={rarityLabel[h.rarity]}
+        statusLabel={statusLabel[h.status]}
+        impact={h.impact}
+        nationality={h.nationality}
+        era={h.era}
+        chips={h.domains}
+        chipsLabel="Domains"
+        scouting={h.scouting}
+        note={h.note}
+        noteLabel="Curator’s note"
+        stats={[
+          { label: 'Technical', value: h.technical },
+          { label: 'Social', value: h.social },
+          { label: 'Notoriety', value: h.notoriety },
+          { label: 'Influence', value: h.influence },
+        ]}
+        sources={h.sources}
+        front={h.front}
+        back={h.back}
+        prev={prev?.front ? { slug: prev.slug, name: prev.name, front: prev.front } : undefined}
+        next={next?.front ? { slug: next.slug, name: next.name, front: next.front } : undefined}
+      />
+    </>
+  );
+}
diff --git a/src/app/hacking-legends/page.tsx b/src/app/hacking-legends/page.tsx
index 19ee407..9bef88b 100644
--- a/src/app/hacking-legends/page.tsx
+++ b/src/app/hacking-legends/page.tsx
@@ -23,6 +23,7 @@ export const metadata: Metadata = {
     url: `${site.url}/hacking-legends`,
     type: 'website',
   },
+  alternates: { canonical: '/hacking-legends' },
 };
 
 const CRITERIA = [
@@ -116,7 +117,7 @@ export default function HackingLegendsPage() {
             <ol className={styles.steps}>
               <li>Finish the remaining scouting reports and lock the stat lines.</li>
               <li>Close nominations and freeze the {totalPlanned}-card list.</li>
-              <li>Illustrate fronts and backs, same treatment as Series One.</li>
+              <li>Re-render any card whose copy or stat line changes in review.</li>
               <li>Print run and packs, alongside the open-licensed downloads.</li>
             </ol>
           </aside>
@@ -130,8 +131,9 @@ export default function HackingLegendsPage() {
             <span className="kicker">The working roster</span>
             <h2 className={styles.h2}>{hackers.length} names, so far</h2>
             <p className={styles.sub}>
-              Tap a card for the full scouting report. Nothing here is final until the set
-              is frozen — argue with any of it on GitHub.
+              Open the scouting report for the full write-up and the sources behind it, or
+              go to a card&apos;s own page. Nothing here is final until the set is frozen —
+              argue with any of it on GitHub.
             </p>
           </div>
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36ca7cc..7a92129 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import CardFlip from '@/components/CardFlip';
 import AdUnit from '@/components/AdUnit';
 import { cards, featured } from '@/data/cards';
-import { hackers } from '@/data/hacking';
+import { hackers, illustratedCount, lockedCount } from '@/data/hacking';
 import { site } from '@/data/site';
 import styles from './page.module.css';
 
@@ -49,10 +49,10 @@ export default function Home() {
       <section className={styles.stats}>
         <div className={`container ${styles.statsInner}`}>
           {[
-            ['50', 'Legends in Series One'],
+            [String(cards.length), 'Legends in Series One'],
+            [String(hackers.length), 'On the Series Two roster'],
             ['CC BY-SA', 'Open-licensed art'],
             ['3', 'Ways to collect'],
-            ['∞', 'Community submissions'],
           ].map(([n, label]) => (
             <div key={label} className={styles.stat}>
               <span className={styles.statNum}>{n}</span>
@@ -91,8 +91,9 @@ export default function Home() {
               <p>
                 The next set covers the other half of the story: the phone phreaks, worm
                 authors, disclosure architects and defenders who found the holes in all of
-                this. {hackers.length} names on the working roster, no artwork yet, and
-                nominations are open.
+                this. {hackers.length} names on the working roster, {illustratedCount} of
+                them illustrated, {lockedCount} stat lines locked — and nominations are
+                still open.
               </p>
             </div>
             <div className={styles.bandActions}>
diff --git a/src/app/robots.ts b/src/app/robots.ts
new file mode 100644
index 0000000..300002c
--- /dev/null
+++ b/src/app/robots.ts
@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next';
+import { site } from '@/data/site';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/api/',
+    },
+    sitemap: `${site.url}/sitemap.xml`,
+  };
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 0000000..b91dfcd
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,31 @@
+import type { MetadataRoute } from 'next';
+import { cards } from '@/data/cards';
+import { hackers } from '@/data/hacking';
+import { site } from '@/data/site';
+
+// Small enough to stay a single sitemap — 4 static pages plus one per card.
+export default function sitemap(): MetadataRoute.Sitemap {
+  const staticPages = ['', '/cards', '/hacking-legends', '/collect', '/contribute'].map(
+    (path) => ({
+      url: `${site.url}${path}`,
+      changeFrequency: 'weekly' as const,
+      priority: path === '' ? 1 : 0.8,
+    }),
+  );
+
+  const cardPages = cards.map((c) => ({
+    url: `${site.url}/cards/${c.slug}`,
+    changeFrequency: 'monthly' as const,
+    priority: 0.6,
+  }));
+
+  const hackerPages = hackers
+    .filter((h) => h.front)
+    .map((h) => ({
+      url: `${site.url}/hacking-legends/${h.slug}`,
+      changeFrequency: 'monthly' as const,
+      priority: 0.6,
+    }));
+
+  return [...staticPages, ...cardPages, ...hackerPages];
+}
diff --git a/src/components/CardDetail.module.css b/src/components/CardDetail.module.css
new file mode 100644
index 0000000..5026d5d
--- /dev/null
+++ b/src/components/CardDetail.module.css
@@ -0,0 +1,434 @@
+.wrap {
+  padding: 4.8rem 0 9rem;
+}
+
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.2rem;
+  color: var(--text-dim);
+  margin-bottom: 3.2rem;
+}
+
+.crumbs a:hover {
+  color: var(--crest);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+  gap: 5.6rem;
+  align-items: start;
+  max-width: 132rem;
+  margin: 0 auto;
+}
+
+/* ---- Faces ---- */
+
+.stickyCol {
+  position: sticky;
+  top: 9rem;
+}
+
+.faces {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.6rem;
+}
+
+.face {
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-soft);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow);
+}
+
+.face img {
+  width: 100%;
+  height: auto;
+}
+
+.faceLabel {
+  display: block;
+  margin-top: 0.8rem;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+/* ---- Info column ---- */
+
+.head {
+  border-bottom: 1px solid var(--border-soft);
+  padding-bottom: 2.4rem;
+  margin-bottom: 2.4rem;
+}
+
+.tags {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.6rem;
+}
+
+.num {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.3rem;
+  color: var(--text-dim);
+}
+
+.rarity {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+}
+
+.rarity[data-rarity='iconic'] { color: var(--iconic); }
+.rarity[data-rarity='legendary'] { color: var(--legendary); }
+.rarity[data-rarity='epic'] { color: var(--epic); }
+.rarity[data-rarity='rare'] { color: var(--rare); }
+
+.status {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-soft);
+}
+
+.name {
+  font-size: clamp(3.2rem, 4vw, 4.8rem);
+  margin-bottom: 0.4rem;
+}
+
+.handle {
+  display: block;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.6rem;
+  color: var(--crest);
+  margin-bottom: 1.2rem;
+}
+
+.title {
+  font-size: 1.9rem;
+  color: var(--text);
+  font-weight: 600;
+  margin-bottom: 0.6rem;
+}
+
+.known {
+  color: var(--text-muted);
+  font-size: 1.5rem;
+}
+
+/* ---- Stats ---- */
+
+.block {
+  margin-bottom: 3.2rem;
+}
+
+.blockHead {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 1.2rem;
+}
+
+.impact {
+  display: flex;
+  align-items: baseline;
+  gap: 1.2rem;
+  margin-bottom: 1.6rem;
+}
+
+.impactNum {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--crest);
+  line-height: 1;
+}
+
+.impactLabel {
+  font-size: 1.3rem;
+  color: var(--text-muted);
+}
+
+.bars {
+  display: grid;
+  gap: 1rem;
+}
+
+.barRow {
+  display: grid;
+  grid-template-columns: 12rem 1fr 3.4rem;
+  align-items: center;
+  gap: 1.2rem;
+  font-size: 1.3rem;
+}
+
+.barLabel {
+  color: var(--text-muted);
+}
+
+.barTrack {
+  height: 0.6rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+
+.barFill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--crest-deep), var(--crest));
+}
+
+.barVal {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  color: var(--text);
+  text-align: right;
+}
+
+/* ---- Meta grid ---- */
+
+.meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.6rem 2.4rem;
+  padding: 2rem;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.metaKey {
+  display: block;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 0.4rem;
+}
+
+.metaVal {
+  font-size: 1.5rem;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+}
+
+.chip {
+  font-size: 1.3rem;
+  padding: 0.5rem 1.1rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text);
+}
+
+.prose {
+  font-size: 1.6rem;
+  color: var(--text-muted);
+  line-height: 1.75;
+}
+
+.quote {
+  border-left: 2px solid var(--crest);
+  padding: 0.4rem 0 0.4rem 2rem;
+  font-size: 1.8rem;
+  font-style: italic;
+  color: var(--text);
+}
+
+.note {
+  font-size: 1.5rem;
+  color: var(--text-muted);
+  padding: 1.6rem 2rem;
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-soft);
+}
+
+/* ---- Sources ---- */
+
+.sources {
+  display: grid;
+  gap: 0.8rem;
+  list-style: none;
+}
+
+.sources li {
+  display: flex;
+  gap: 1rem;
+  align-items: baseline;
+  font-size: 1.4rem;
+}
+
+.sourceNum {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  color: var(--text-dim);
+  flex: 0 0 auto;
+}
+
+.sources a {
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  overflow-wrap: anywhere;
+}
+
+.sources a:hover {
+  color: var(--crest);
+  border-bottom-color: var(--crest);
+}
+
+.sourceHost {
+  color: var(--text-dim);
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+}
+
+/* ---- Share ---- */
+
+.share {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.8rem;
+  padding-top: 2.4rem;
+  border-top: 1px solid var(--border-soft);
+}
+
+.shareBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem 1.6rem;
+  font-size: 1.3rem;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.shareBtn:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: #3a3f50;
+}
+
+.shareBtn[data-copied='true'] {
+  color: var(--crest);
+  border-color: var(--crest);
+}
+
+/* ---- Prev / next ---- */
+
+.pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.6rem;
+  margin-top: 6.4rem;
+  padding-top: 3.2rem;
+  border-top: 1px solid var(--border-soft);
+}
+
+.pagerLink {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 1.6rem 2rem;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.02);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.pagerLink:hover {
+  border-color: var(--border);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.pagerNext {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.pagerThumb {
+  width: 4.4rem;
+  border-radius: 4px;
+  flex: 0 0 auto;
+}
+
+.pagerKicker {
+  display: block;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 0.3rem;
+}
+
+.pagerName {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+@media (max-width: 1024px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4rem;
+  }
+  .stickyCol {
+    position: static;
+  }
+  .faces {
+    max-width: 62rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .pager {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  /* row-reverse runs right-to-left, so flex-end packs the pair against the left
+     edge and the "next" card mirrors the "previous" one. */
+  .pagerNext {
+    justify-content: flex-end;
+    text-align: left;
+    flex-direction: row-reverse;
+  }
+  .barRow {
+    grid-template-columns: 9rem 1fr 3.4rem;
+  }
+}
diff --git a/src/components/CardDetail.tsx b/src/components/CardDetail.tsx
new file mode 100644
index 0000000..e6c13f8
--- /dev/null
+++ b/src/components/CardDetail.tsx
@@ -0,0 +1,286 @@
+import Link from 'next/link';
+import CopyLink from './CopyLink';
+import { site } from '@/data/site';
+import styles from './CardDetail.module.css';
+
+// Bumped alongside CardFlip so a re-render of the art shows up without a hard refresh.
+const CARD_VERSION = 'g1';
+
+export type DetailStat = { label: string; value: number };
+export type DetailSource = { label: string; url: string };
+
+export type DetailNeighbour = { slug: string; name: string; front: string };
+
+export type CardDetailProps = {
+  /** Which series this card belongs to, e.g. "Series One". */
+  setLabel: string;
+  /** Index page for the series. */
+  setHref: string;
+  number: number;
+  slug: string;
+  name: string;
+  handle?: string;
+  title: string;
+  knownFor: string;
+  rarity: string;
+  rarityLabel: string;
+  /** Shown as the headline score. */
+  impact: number;
+  nationality: string;
+  era: string;
+  /** Projects (Series One) or domains (Series Two). */
+  chips: string[];
+  chipsLabel: string;
+  scouting: string;
+  quote?: string;
+  note?: string;
+  noteLabel?: string;
+  /** Secondary stat bars. Series Two prints four; Series One has none. */
+  stats?: DetailStat[];
+  sources?: DetailSource[];
+  statusLabel?: string;
+  front: string;
+  back: string;
+  prev?: DetailNeighbour;
+  next?: DetailNeighbour;
+};
+
+function host(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return '';
+  }
+}
+
+export default function CardDetail(props: CardDetailProps) {
+  const {
+    setLabel,
+    setHref,
+    number,
+    slug,
+    name,
+    handle,
+    title,
+    knownFor,
+    rarity,
+    rarityLabel,
+    impact,
+    nationality,
+    era,
+    chips,
+    chipsLabel,
+    scouting,
+    quote,
+    note,
+    noteLabel = 'Collector’s note',
+    stats,
+    sources,
+    statusLabel,
+    front,
+    back,
+    prev,
+    next,
+  } = props;
+
+  const url = `${site.url}${setHref}/${slug}`;
+  const v = `?v=${CARD_VERSION}`;
+  const shareText = `${name} — ${title} · ${site.name}`;
+
+  return (
+    <section className={styles.wrap}>
+      <div className="container">
+        <nav className={styles.crumbs} aria-label="Breadcrumb">
+          <Link href="/">Home</Link>
+          <span aria-hidden>/</span>
+          <Link href={setHref}>{setLabel}</Link>
+          <span aria-hidden>/</span>
+          <span>{name}</span>
+        </nav>
+
+        <div className={styles.layout}>
+          <div className={styles.stickyCol}>
+            <div className={styles.faces}>
+              <div>
+                <div className={styles.face}>
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={`${front}${v}`}
+                    alt={`${name} trading card, front`}
+                    width={500}
+                    height={745}
+                    loading="eager"
+                  />
+                </div>
+                <span className={styles.faceLabel}>Front</span>
+              </div>
+              <div>
+                <div className={styles.face}>
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={`${back}${v}`}
+                    alt={`${name} trading card, back`}
+                    width={500}
+                    height={745}
+                    loading="eager"
+                  />
+                </div>
+                <span className={styles.faceLabel}>Back</span>
+              </div>
+            </div>
+
+            <div className={styles.share}>
+              <CopyLink url={url} />
+              <a
+                className={styles.shareBtn}
+                href={`https://x.com/intent/post?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(url)}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Share on X
+              </a>
+              <a className={styles.shareBtn} href={front} download>
+                Download the art
+              </a>
+              <Link className={styles.shareBtn} href="/collect">
+                Get a pack
+              </Link>
+            </div>
+          </div>
+
+          <div>
+            <header className={styles.head}>
+              <div className={styles.tags}>
+                <span className={styles.num}>
+                  #{String(number).padStart(3, '0')} · {setLabel}
+                </span>
+                <span className={styles.rarity} data-rarity={rarity}>
+                  {rarityLabel}
+                </span>
+                {statusLabel && <span className={styles.status}>{statusLabel}</span>}
+              </div>
+              <h1 className={styles.name}>{name}</h1>
+              {handle && <span className={styles.handle}>“{handle}”</span>}
+              <p className={styles.title}>{title}</p>
+              <p className={styles.known}>{knownFor}</p>
+            </header>
+
+            <div className={styles.block}>
+              <h2 className={styles.blockHead}>Rating</h2>
+              <div className={styles.impact}>
+                <span className={styles.impactNum}>{impact}</span>
+                <span className={styles.impactLabel}>Impact score</span>
+              </div>
+              {stats && stats.length > 0 && (
+                <div className={styles.bars}>
+                  {stats.map((s) => (
+                    <div key={s.label} className={styles.barRow}>
+                      <span className={styles.barLabel}>{s.label}</span>
+                      <span className={styles.barTrack}>
+                        <span className={styles.barFill} style={{ width: `${s.value}%` }} />
+                      </span>
+                      <span className={styles.barVal}>{s.value}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className={styles.block}>
+              <div className={styles.meta}>
+                <div>
+                  <span className={styles.metaKey}>From</span>
+                  <span className={styles.metaVal}>{nationality}</span>
+                </div>
+                <div>
+                  <span className={styles.metaKey}>Era</span>
+                  <span className={styles.metaVal}>{era}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className={styles.block}>
+              <h2 className={styles.blockHead}>{chipsLabel}</h2>
+              <div className={styles.chips}>
+                {chips.map((c) => (
+                  <span key={c} className={styles.chip}>
+                    {c}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className={styles.block}>
+              <h2 className={styles.blockHead}>Scouting report</h2>
+              <p className={styles.prose}>{scouting}</p>
+            </div>
+
+            {quote && (
+              <div className={styles.block}>
+                <h2 className={styles.blockHead}>Collector’s note</h2>
+                <blockquote className={styles.quote}>{quote}</blockquote>
+              </div>
+            )}
+
+            {note && (
+              <div className={styles.block}>
+                <h2 className={styles.blockHead}>{noteLabel}</h2>
+                <p className={styles.note}>{note}</p>
+              </div>
+            )}
+
+            {sources && sources.length > 0 && (
+              <div className={styles.block}>
+                <h2 className={styles.blockHead}>Sources</h2>
+                <ul className={styles.sources}>
+                  {sources.map((s, i) => (
+                    <li key={s.url}>
+                      <span className={styles.sourceNum}>{String(i + 1).padStart(2, '0')}</span>
+                      <span>
+                        <a href={s.url} target="_blank" rel="noreferrer nofollow">
+                          {s.label}
+                        </a>{' '}
+                        <span className={styles.sourceHost}>{host(s.url)}</span>
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+          </div>
+        </div>
+
+        {(prev || next) && (
+          <nav className={styles.pager} aria-label="More cards">
+            {prev ? (
+              <Link href={`${setHref}/${prev.slug}`} className={styles.pagerLink}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={`${prev.front}${v}`} alt="" className={styles.pagerThumb} loading="lazy" />
+                <span>
+                  <span className={styles.pagerKicker}>Previous</span>
+                  <span className={styles.pagerName}>{prev.name}</span>
+                </span>
+              </Link>
+            ) : (
+              <span />
+            )}
+            {next && (
+              <Link
+                href={`${setHref}/${next.slug}`}
+                className={`${styles.pagerLink} ${styles.pagerNext}`}
+              >
+                <span>
+                  <span className={styles.pagerKicker}>Next</span>
+                  <span className={styles.pagerName}>{next.name}</span>
+                </span>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={`${next.front}${v}`} alt="" className={styles.pagerThumb} loading="lazy" />
+              </Link>
+            )}
+          </nav>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CardFlip.module.css b/src/components/CardFlip.module.css
index 412b580..3846b4e 100644
--- a/src/components/CardFlip.module.css
+++ b/src/components/CardFlip.module.css
@@ -1,3 +1,25 @@
+.tile {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.permalink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  align-self: center;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  padding: 0.4rem 0.2rem;
+  transition: color 0.15s ease;
+}
+
+.permalink:hover {
+  color: var(--crest);
+}
+
 .scene {
   --accent: var(--iconic);
   display: block;
diff --git a/src/components/CardFlip.tsx b/src/components/CardFlip.tsx
index 86463d7..f4db7cf 100644
--- a/src/components/CardFlip.tsx
+++ b/src/components/CardFlip.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useState } from 'react';
+import Link from 'next/link';
 import type { Card } from '@/data/cards';
 import styles from './CardFlip.module.css';
 
@@ -10,23 +11,28 @@ export default function CardFlip({ card }: { card: Card }) {
   const [flipped, setFlipped] = useState(false);
   const v = `?v=${CARD_VERSION}`;
   return (
-    <button
-      type="button"
-      className={`${styles.scene} ${flipped ? styles.flipped : ''}`}
-      data-rarity={card.rarity}
-      onClick={() => setFlipped((f) => !f)}
-      aria-label={`${card.name} — ${card.title}. Tap to flip.`}
-    >
-      <span className={styles.inner}>
-        <span className={styles.face}>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={`${card.front}${v}`} alt={`${card.name} card front`} loading="lazy" width={1024} height={1536} />
+    <div className={styles.tile}>
+      <button
+        type="button"
+        className={`${styles.scene} ${flipped ? styles.flipped : ''}`}
+        data-rarity={card.rarity}
+        onClick={() => setFlipped((f) => !f)}
+        aria-label={`${card.name} — ${card.title}. Tap to flip.`}
+      >
+        <span className={styles.inner}>
+          <span className={styles.face}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={`${card.front}${v}`} alt={`${card.name} card front`} loading="lazy" width={1024} height={1536} />
+          </span>
+          <span className={`${styles.face} ${styles.back}`}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={`${card.back}${v}`} alt={`${card.name} card back`} loading="lazy" width={1024} height={1536} />
+          </span>
         </span>
-        <span className={`${styles.face} ${styles.back}`}>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={`${card.back}${v}`} alt={`${card.name} card back`} loading="lazy" width={1024} height={1536} />
-        </span>
-      </span>
-    </button>
+      </button>
+      <Link href={`/cards/${card.slug}`} className={styles.permalink}>
+        {card.name} <span aria-hidden>→</span>
+      </Link>
+    </div>
   );
 }
diff --git a/src/components/CopyLink.tsx b/src/components/CopyLink.tsx
new file mode 100644
index 0000000..903ab8c
--- /dev/null
+++ b/src/components/CopyLink.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { useState } from 'react';
+import styles from './CardDetail.module.css';
+
+export default function CopyLink({ url }: { url: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }
+
+  return (
+    <button type="button" className={styles.shareBtn} onClick={copy} data-copied={copied}>
+      {copied ? 'Link copied' : 'Copy link'}
+    </button>
+  );
+}
diff --git a/src/components/RosterCard.module.css b/src/components/RosterCard.module.css
index d7a38cc..afa4412 100644
--- a/src/components/RosterCard.module.css
+++ b/src/components/RosterCard.module.css
@@ -2,14 +2,12 @@
   --tier: var(--common);
   display: flex;
   flex-direction: column;
-  /* buttons get `align-items: center` from the UA sheet, which shrink-wraps every row */
   align-items: stretch;
   gap: 1.4rem;
   width: 100%;
   text-align: left;
   font: inherit;
   color: inherit;
-  cursor: pointer;
   background: var(--bg-elev);
   border: 1px solid var(--border);
   border-top: 2px solid var(--tier);
@@ -48,6 +46,16 @@
   color: var(--tier);
 }
 
+.artLink {
+  display: block;
+  border-radius: var(--radius);
+}
+
+.artLink:focus-visible {
+  outline: 2px solid var(--tier);
+  outline-offset: 3px;
+}
+
 /* Placeholder where the portrait will go */
 /* Shown instead of .plate once a card has a rendered front. */
 .art {
@@ -112,6 +120,11 @@
   font-weight: 800;
   letter-spacing: -0.02em;
   line-height: 1.2;
+  transition: color 0.15s ease;
+}
+
+.name:hover {
+  color: var(--tier);
 }
 
 .handle {
@@ -228,6 +241,63 @@
 }
 
 .more {
+  font: inherit;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--tier);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.permalink {
   font-weight: 700;
+  color: var(--text-dim);
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+
+.permalink:hover {
+  color: var(--tier);
+}
+
+/* Sources for the historical claims, revealed with the full scouting report. */
+.sources {
+  margin-top: 1.4rem;
+  padding-top: 1.2rem;
+  border-top: 1px dashed var(--border-soft);
+}
+
+.sourcesHead {
+  display: block;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 1.05rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 0.8rem;
+}
+
+.sources ul {
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  font-size: 1.25rem;
+}
+
+.sources a {
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  overflow-wrap: anywhere;
+}
+
+.sources a:hover {
   color: var(--tier);
+  border-bottom-color: var(--tier);
+}
+
+.sourceHost {
+  font-size: 1.05rem;
+  color: var(--text-dim);
 }
diff --git a/src/components/RosterCard.tsx b/src/components/RosterCard.tsx
index ffd4bb9..50928cd 100644
--- a/src/components/RosterCard.tsx
+++ b/src/components/RosterCard.tsx
@@ -1,55 +1,68 @@
 'use client';
 import { useState } from 'react';
+import Link from 'next/link';
 import type { Hacker } from '@/data/hacking';
 import { rarityLabel, statusLabel } from '@/data/hacking';
 import styles from './RosterCard.module.css';
 
+function host(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
 // Series Two is illustrated card by card. Anyone with a rendered front shows it;
 // the rest fall back to a data-only proof so the whole roster stays reviewable.
+// The root is an <article>, not a <button>, because the expanded report carries
+// real links (the card permalink and the sources behind the claims).
 export default function RosterCard({ hacker }: { hacker: Hacker }) {
   const [open, setOpen] = useState(false);
+  const href = `/hacking-legends/${hacker.slug}`;
+
   return (
-    <button
-      type="button"
-      className={`${styles.card} ${open ? styles.open : ''}`}
-      data-rarity={hacker.rarity}
-      onClick={() => setOpen((o) => !o)}
-      aria-expanded={open}
-      aria-label={`${hacker.name} — ${hacker.title}. Tap for the scouting report.`}
-    >
-      <span className={styles.top}>
-        <span className={`${styles.num} mono`}>
-          {String(hacker.number).padStart(3, '0')}
-        </span>
+    <article className={`${styles.card} ${open ? styles.open : ''}`} data-rarity={hacker.rarity}>
+      <div className={styles.top}>
+        <span className={`${styles.num} mono`}>{String(hacker.number).padStart(3, '0')}</span>
         <span className={styles.rarity}>{rarityLabel[hacker.rarity]}</span>
-      </span>
+      </div>
 
-      {hacker.front ? (
-        <span className={styles.art} aria-hidden>
-          <img src={hacker.front} alt="" loading="lazy" width={500} height={745} />
-        </span>
-      ) : (
-        <span className={styles.plate} aria-hidden>
-          <span className={`${styles.glyph} mono`}>
-            {hacker.handle ? `~${hacker.handle.toLowerCase().replace(/\s+/g, '')}` : hacker.name.split(' ').map((w) => w[0]).join('')}
+      <Link href={href} className={styles.artLink} aria-label={`${hacker.name} — ${hacker.title}`}>
+        {hacker.front ? (
+          <span className={styles.art}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={hacker.front} alt={`${hacker.name} card front`} loading="lazy" width={500} height={745} />
           </span>
-          <span className={styles.plateNote}>art pending</span>
-        </span>
-      )}
+        ) : (
+          <span className={styles.plate} aria-hidden>
+            <span className={`${styles.glyph} mono`}>
+              {hacker.handle
+                ? `~${hacker.handle.toLowerCase().replace(/\s+/g, '')}`
+                : hacker.name.split(' ').map((w) => w[0]).join('')}
+            </span>
+            <span className={styles.plateNote}>art pending</span>
+          </span>
+        )}
+      </Link>
 
-      <span className={styles.body}>
-        <span className={styles.name}>{hacker.name}</span>
+      <div className={styles.body}>
+        <Link href={href} className={styles.name}>
+          {hacker.name}
+        </Link>
         {hacker.handle && <span className={`${styles.handle} mono`}>“{hacker.handle}”</span>}
         <span className={styles.title}>{hacker.title}</span>
         <span className={styles.known}>{hacker.knownFor}</span>
 
-        <span className={styles.domains}>
+        <div className={styles.domains}>
           {hacker.domains.map((d) => (
-            <span key={d} className={styles.domain}>{d}</span>
+            <span key={d} className={styles.domain}>
+              {d}
+            </span>
           ))}
-        </span>
+        </div>
 
-        <span className={styles.meta}>
+        <div className={styles.meta}>
           <span className="mono">{hacker.nationality}</span>
           <span className="mono">{hacker.era}</span>
           <span className={styles.impact}>
@@ -58,17 +71,38 @@ export default function RosterCard({ hacker }: { hacker: Hacker }) {
             </span>
             <span className="mono">{hacker.impact}</span>
           </span>
-        </span>
+        </div>
+
+        <p className={styles.scouting}>{hacker.scouting}</p>
 
-        <span className={styles.scouting}>{hacker.scouting}</span>
-      </span>
+        {open && hacker.sources && hacker.sources.length > 0 && (
+          <div className={styles.sources}>
+            <span className={styles.sourcesHead}>Sources</span>
+            <ul>
+              {hacker.sources.map((s) => (
+                <li key={s.url}>
+                  <a href={s.url} target="_blank" rel="noreferrer nofollow">
+                    {s.label}
+                  </a>{' '}
+                  <span className={`${styles.sourceHost} mono`}>{host(s.url)}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
 
-      <span className={styles.foot}>
+      <div className={styles.foot}>
         <span className={styles.status} data-status={hacker.status}>
           {statusLabel[hacker.status]}
         </span>
-        <span className={styles.more}>{open ? 'Hide report' : 'Scouting report'}</span>
-      </span>
-    </button>
+        <button type="button" className={styles.more} onClick={() => setOpen((o) => !o)}>
+          {open ? 'Hide report' : 'Scouting report'}
+        </button>
+        <Link href={href} className={styles.permalink}>
+          Card page <span aria-hidden>→</span>
+        </Link>
+      </div>
+    </article>
   );
 }
diff --git a/src/data/hacking.ts b/src/data/hacking.ts
index 234b52a..8f7b512 100644
--- a/src/data/hacking.ts
+++ b/src/data/hacking.ts
@@ -36,11 +36,23 @@ export type Hacker = {
   scouting: string;
   note: string;
   status: Status;
+  /**
+   * Public references for the claims in `scouting`. Rendered on the card page and
+   * in the expanded roster report, so a reader can check the history rather than
+   * take our word for it. Every card in the set must carry at least one.
+   */
+  sources: Source[];
   /** Public paths to the rendered card faces. Written by the publish step. */
   front?: string;
   back?: string;
 };
 
+export type Source = {
+  /** What the reader is clicking through to, not the bare URL. */
+  label: string;
+  url: string;
+};
+
 export const hackers: Hacker[] = [
   {
     number: 1,
@@ -62,6 +74,10 @@ export const hackers: Hacker[] = [
       'Talked his way into more networks than he ever broke into. A teenage phone phreak who became the FBI’s most-wanted hacker, was captured in 1995, served five years, and came out the other side as a security consultant and author of The Art of Deception. He made the industry admit the obvious: the person on the phone is the vulnerability.',
     note: 'The card that defines the set. Nobody argues about this one.',
     status: 'locked',
+    sources: [
+      { label: 'Kevin Mitnick', url: 'https://en.wikipedia.org/wiki/Kevin_Mitnick' },
+      { label: 'Takedown — the 1995 arrest, as told by Markoff and Shimomura', url: 'https://en.wikipedia.org/wiki/Takedown_(book)' },
+    ],
     front: '/cards/hacking/001-kevin-mitnick-front.png',
     back: '/cards/hacking/001-kevin-mitnick-back.png',
   },
@@ -85,6 +101,10 @@ export const hackers: Hacker[] = [
       'Discovered that a toy whistle packed in a cereal box produced the exact 2600 Hz tone AT&T used to signal a free trunk line. The blue-box scene that grew from it pulled in two young Californians named Wozniak and Jobs, and drew the blueprint for every generation of hacker that followed.',
     note: 'Patient zero for hacker culture. The whistle is the artifact of the century.',
     status: 'locked',
+    sources: [
+      { label: 'John Draper', url: 'https://en.wikipedia.org/wiki/John_Draper' },
+      { label: 'Blue box — the 2600 Hz signalling exploit', url: 'https://en.wikipedia.org/wiki/Blue_box' },
+    ],
     front: '/cards/hacking/002-john-draper-front.png',
     back: '/cards/hacking/002-john-draper-back.png',
   },
@@ -107,6 +127,10 @@ export const hackers: Hacker[] = [
       'Released a self-replicating program from MIT in November 1988 that reinfected hosts far faster than intended and knocked out a large share of the machines on the internet. First person convicted under the Computer Fraud and Abuse Act. Went on to become an MIT professor and a co-founder of Y Combinator.',
     note: 'The accident that created the entire incident-response industry — CERT exists because of this.',
     status: 'locked',
+    sources: [
+      { label: 'The Morris worm', url: 'https://en.wikipedia.org/wiki/Morris_worm' },
+      { label: 'United States v. Morris (1991) — the first CFAA conviction', url: 'https://en.wikipedia.org/wiki/United_States_v._Morris_(1991)' },
+    ],
     front: '/cards/hacking/003-robert-tappan-morris-front.png',
     back: '/cards/hacking/003-robert-tappan-morris-back.png',
   },
@@ -130,6 +154,11 @@ export const hackers: Hacker[] = [
       'Front man of L0pht Heavy Industries and co-author of L0phtCrack. In 1998 the crew testified before the US Senate under their handles and warned that the internet could be taken down in half an hour. Later ran cyber programs at DARPA, worked security at Google and Stripe, and blew the whistle on Twitter’s security posture in 2022.',
     note: 'The rare legend who went from underground to the Senate floor without changing his story.',
     status: 'locked',
+    sources: [
+      { label: 'Peiter “Mudge” Zatko', url: 'https://en.wikipedia.org/wiki/Peiter_Zatko' },
+      { label: 'L0pht, and the 1998 Senate testimony', url: 'https://en.wikipedia.org/wiki/L0pht' },
+      { label: 'L0phtCrack', url: 'https://en.wikipedia.org/wiki/L0phtCrack' },
+    ],
     front: '/cards/hacking/004-peiter-zatko-front.png',
     back: '/cards/hacking/004-peiter-zatko-back.png',
   },
@@ -153,6 +182,10 @@ export const hackers: Hacker[] = [
       'Seized control of every telephone line into KIIS-FM to guarantee he was caller 102 and won a Porsche. Ran from the FBI, was profiled on Unsolved Mysteries, and served time. Reinvented himself as an investigative journalist at Wired and helped build SecureDrop, the whistleblower system used by newsrooms worldwide.',
     note: 'Rigged a radio contest, then spent his second act protecting sources.',
     status: 'locked',
+    sources: [
+      { label: 'Kevin Poulsen', url: 'https://en.wikipedia.org/wiki/Kevin_Poulsen' },
+      { label: 'SecureDrop, which Poulsen co-created', url: 'https://en.wikipedia.org/wiki/SecureDrop' },
+    ],
     front: '/cards/hacking/005-kevin-poulsen-front.png',
     back: '/cards/hacking/005-kevin-poulsen-back.png',
   },
@@ -176,6 +209,11 @@ export const hackers: Hacker[] = [
       'Founded 2600: The Hacker Quarterly in 1984 and has been broadcasting Off The Hook on WBAI since 1988. Organizer of the HOPE conferences and a defendant in the DeCSS case, where the courts first wrestled with whether publishing code is speech.',
     note: 'The set needs a printing press, and this is it.',
     status: 'locked',
+    sources: [
+      { label: 'Eric Corley', url: 'https://en.wikipedia.org/wiki/Eric_Corley' },
+      { label: '2600: The Hacker Quarterly', url: 'https://www.2600.com/' },
+      { label: 'Off the Hook', url: 'https://en.wikipedia.org/wiki/Off_the_Hook_(radio_program)' },
+    ],
     front: '/cards/hacking/006-eric-corley-front.png',
     back: '/cards/hacking/006-eric-corley-back.png',
   },
@@ -199,6 +237,10 @@ export const hackers: Hacker[] = [
       'Member of the Legion of Doom who, hours after being arrested in 1986, wrote the essay that Phrack published as The Conscience of a Hacker. Later wrote GURPS Cyberpunk for Steve Jackson Games — the manuscript the Secret Service seized in a raid that helped spark the founding of the EFF.',
     note: 'One page of text that every hacker under thirty could still quote a decade later.',
     status: 'locked',
+    sources: [
+      { label: '“The Conscience of a Hacker”, Phrack vol. 1 no. 7', url: 'https://phrack.org/issues/7/3.html' },
+      { label: 'Loyd Blankenship', url: 'https://en.wikipedia.org/wiki/Loyd_Blankenship' },
+    ],
     front: '/cards/hacking/007-loyd-blankenship-front.png',
     back: '/cards/hacking/007-loyd-blankenship-back.png',
   },
@@ -222,6 +264,10 @@ export const hackers: Hacker[] = [
       'Threw a going-away party for a friend in Las Vegas in 1993 and accidentally founded DEF CON, now the largest hacker gathering on earth. Also founded Black Hat, served on the US Homeland Security Advisory Council, and spent years translating between the underground and the institutions that fear it.',
     note: 'Every other legend in this set has stood on a stage he built.',
     status: 'locked',
+    sources: [
+      { label: 'Jeff Moss', url: 'https://en.wikipedia.org/wiki/Jeff_Moss_(hacker)' },
+      { label: 'DEF CON', url: 'https://defcon.org/' },
+    ],
     front: '/cards/hacking/008-jeff-moss-front.png',
     back: '/cards/hacking/008-jeff-moss-back.png',
   },
@@ -244,6 +290,11 @@ export const hackers: Hacker[] = [
       'Found a flaw that let an attacker poison DNS caches and quietly redirect any name on the internet. Instead of publishing, he organized a secret multi-vendor patch effort and got the whole internet fixed on one coordinated day in July 2008. Died in 2021 at 42, and the industry has not stopped talking about him since.',
     note: 'Proof that the biggest bug of your career is a responsibility, not a trophy.',
     status: 'locked',
+    sources: [
+      { label: 'Dan Kaminsky', url: 'https://en.wikipedia.org/wiki/Dan_Kaminsky' },
+      { label: 'CERT/CC VU#800113 — DNS cache poisoning', url: 'https://www.kb.cert.org/vuls/id/800113' },
+      { label: 'Wired, 2008 — how Kaminsky found the flaw', url: 'https://www.wired.com/2008/07/kaminsky-on-how/' },
+    ],
     front: '/cards/hacking/009-dan-kaminsky-front.png',
     back: '/cards/hacking/009-dan-kaminsky-back.png',
   },
@@ -266,6 +317,10 @@ export const hackers: Hacker[] = [
       'Chased a 75-cent accounting error at Lawrence Berkeley Lab all the way to Markus Hess, a West German hacker selling US military data to the KGB. His logbooks and homemade tripwires invented network intrusion detection by hand, and The Cuckoo’s Egg is still the best on-ramp anyone ever wrote.',
     note: 'The first documented cyber-espionage case, solved by an astronomer with a printer.',
     status: 'locked',
+    sources: [
+      { label: 'Clifford Stoll', url: 'https://en.wikipedia.org/wiki/Clifford_Stoll' },
+      { label: 'The Cuckoo’s Egg', url: 'https://en.wikipedia.org/wiki/The_Cuckoo%27s_Egg_(book)' },
+    ],
     front: '/cards/hacking/010-cliff-stoll-front.png',
     back: '/cards/hacking/010-cliff-stoll-back.png',
   },
@@ -288,6 +343,10 @@ export const hackers: Hacker[] = [
       'Computational physicist at San Diego Supercomputer Center whose own machines were broken into on Christmas Day 1994. His analysis of the IP-spoofing and TCP sequence-prediction attack, and the cell-tracking work that followed, led federal agents to Kevin Mitnick in Raleigh in February 1995.',
     note: 'Card 1’s opposite number. They belong in the same pack.',
     status: 'draft',
+    sources: [
+      { label: 'Tsutomu Shimomura', url: 'https://en.wikipedia.org/wiki/Tsutomu_Shimomura' },
+      { label: 'IP address spoofing — the technique used against him', url: 'https://en.wikipedia.org/wiki/IP_address_spoofing' },
+    ],
     front: '/cards/hacking/011-tsutomu-shimomura-front.png',
     back: '/cards/hacking/011-tsutomu-shimomura-back.png',
   },
@@ -311,6 +370,10 @@ export const hackers: Hacker[] = [
       'Teenage authority on telephone switching systems and the public face of Masters of Deception. His 1994 prison sentence was widely read as a message being sent to a whole generation; New York magazine had already named him one of the city’s smartest people.',
     note: 'The last of the pure telephone hackers before the internet took over.',
     status: 'draft',
+    sources: [
+      { label: 'Mark Abene', url: 'https://en.wikipedia.org/wiki/Mark_Abene' },
+      { label: 'Masters of Deception', url: 'https://en.wikipedia.org/wiki/Masters_of_Deception' },
+    ],
     front: '/cards/hacking/012-mark-abene-front.png',
     back: '/cards/hacking/012-mark-abene-back.png',
   },
@@ -334,6 +397,10 @@ export const hackers: Hacker[] = [
       'Ran in the same Los Angeles phreaking circles as Mitnick and Lewis De Payne and specialized in the human layer — pretext calls, trashed printouts, borrowed credentials. One of the very few women documented in the earliest scene, and she walked away from it entirely.',
     note: 'Written out of most retellings. This set puts her back in.',
     status: 'draft',
+    sources: [
+      { label: 'Susan Headley', url: 'https://en.wikipedia.org/wiki/Susan_Headley' },
+      { label: 'Phreaking', url: 'https://en.wikipedia.org/wiki/Phreaking' },
+    ],
     front: '/cards/hacking/013-susan-headley-front.png',
     back: '/cards/hacking/013-susan-headley-back.png',
   },
@@ -357,6 +424,10 @@ export const hackers: Hacker[] = [
       'Broke into Microsoft, Yahoo and The New York Times from library terminals and coffee shops, usually telling the victim afterwards. In 2010 he reported Chelsea Manning to the authorities after she confided in him — a decision that split the community permanently. Died in 2018.',
     note: 'The most divisive card in the set, and it stays in. The history is the history.',
     status: 'draft',
+    sources: [
+      { label: 'Adrian Lamo', url: 'https://en.wikipedia.org/wiki/Adrian_Lamo' },
+      { label: 'Wired, 2011 — the Manning–Lamo chat logs', url: 'https://www.wired.com/2011/07/manning-lamo-logs/' },
+    ],
     front: '/cards/hacking/014-adrian-lamo-front.png',
     back: '/cards/hacking/014-adrian-lamo-back.png',
   },
@@ -380,6 +451,10 @@ export const hackers: Hacker[] = [
       'Scanned US military and NASA networks for machines with blank administrator passwords and found plenty. US prosecutors called it the biggest military computer hack of all time; a decade-long extradition fight ended in 2012 when the UK Home Secretary blocked it on human-rights grounds.',
     note: 'Two words: no password. That is the whole exploit.',
     status: 'draft',
+    sources: [
+      { label: 'Gary McKinnon', url: 'https://en.wikipedia.org/wiki/Gary_McKinnon' },
+      { label: 'BBC, 2012 — extradition to the US blocked', url: 'https://www.bbc.com/news/uk-19957138' },
+    ],
     front: '/cards/hacking/015-gary-mckinnon-front.png',
     back: '/cards/hacking/015-gary-mckinnon-back.png',
   },
@@ -403,6 +478,10 @@ export const hackers: Hacker[] = [
       'At fifteen, installed a backdoor on a Defense Threat Reduction Agency server and downloaded NASA software supporting the International Space Station. Sentenced in 2000 as the first juvenile incarcerated for cybercrime in the US. Died by suicide in 2008 while under investigation in an unrelated case he denied any part in.',
     note: 'A cautionary card. The set tells it straight or not at all.',
     status: 'draft',
+    sources: [
+      { label: 'Jonathan James', url: 'https://en.wikipedia.org/wiki/Jonathan_James' },
+      { label: 'Computer Fraud and Abuse Act', url: 'https://en.wikipedia.org/wiki/Computer_Fraud_and_Abuse_Act' },
+    ],
     front: '/cards/hacking/016-jonathan-james-front.png',
     back: '/cards/hacking/016-jonathan-james-back.png',
   },
@@ -426,6 +505,11 @@ export const hackers: Hacker[] = [
       'One of the seven L0pht members who testified to the Senate in 1998. Spent the following decades turning ad-hoc bug reporting into a process the industry could live with, then co-founded Veracode to make application security something you can actually buy.',
     note: 'Half the reason a vendor takes your bug report seriously today.',
     status: 'draft',
+    sources: [
+      { label: 'Chris Wysopal', url: 'https://en.wikipedia.org/wiki/Chris_Wysopal' },
+      { label: 'L0pht', url: 'https://en.wikipedia.org/wiki/L0pht' },
+      { label: 'Coordinated vulnerability disclosure', url: 'https://en.wikipedia.org/wiki/Coordinated_vulnerability_disclosure' },
+    ],
     front: '/cards/hacking/017-chris-wysopal-front.png',
     back: '/cards/hacking/017-chris-wysopal-back.png',
   },
@@ -448,6 +532,10 @@ export const hackers: Hacker[] = [
       'Created Microsoft’s first bug bounty program, then ran Hack the Pentagon, the first bounty program in the history of the US federal government. Fought to keep defensive research from being criminalized under the Wassenaar Arrangement, and founded Luta Security.',
     note: 'Turned “we do not pay for bugs” into an industry standard line item.',
     status: 'draft',
+    sources: [
+      { label: 'Katie Moussouris', url: 'https://en.wikipedia.org/wiki/Katie_Moussouris' },
+      { label: 'Bug bounty programs', url: 'https://en.wikipedia.org/wiki/Bug_bounty_program' },
+    ],
     front: '/cards/hacking/018-katie-moussouris-front.png',
     back: '/cards/hacking/018-katie-moussouris-back.png',
   },
@@ -470,6 +558,11 @@ export const hackers: Hacker[] = [
       'Presented Blue Pill at Black Hat 2006, a rootkit that moved a running OS into a hypervisor beneath it, and coined the Evil Maid attack for machines left unattended. Then built the answer: Qubes OS, a desktop that assumes compromise and isolates by compartment.',
     note: 'Broke the platform, then shipped a better one. Very few do both.',
     status: 'draft',
+    sources: [
+      { label: 'Joanna Rutkowska', url: 'https://en.wikipedia.org/wiki/Joanna_Rutkowska' },
+      { label: 'Blue Pill', url: 'https://en.wikipedia.org/wiki/Blue_Pill_(software)' },
+      { label: 'Qubes OS', url: 'https://www.qubes-os.org/' },
+    ],
     front: '/cards/hacking/019-joanna-rutkowska-front.png',
     back: '/cards/hacking/019-joanna-rutkowska-back.png',
   },
@@ -493,6 +586,11 @@ export const hackers: Hacker[] = [
       'Wrote afl, the coverage-guided fuzzer that found thousands of bugs across the software everyone depends on and reset the state of the art for everyone else. Author of Silence on the Wire and The Tangled Web, and a long-time browser security lead at Google.',
     note: 'The bug-finding tool with the highest body count in open source history.',
     status: 'draft',
+    sources: [
+      { label: 'Michał Zalewski', url: 'https://en.wikipedia.org/wiki/Micha%C5%82_Zalewski' },
+      { label: 'american fuzzy lop', url: 'https://lcamtuf.coredump.cx/afl/' },
+      { label: 'Fuzzing', url: 'https://en.wikipedia.org/wiki/Fuzzing' },
+    ],
     front: '/cards/hacking/020-michal-zalewski-front.png',
     back: '/cards/hacking/020-michal-zalewski-back.png',
   },
@@ -516,6 +614,11 @@ export const hackers: Hacker[] = [
       'Wrote John the Ripper, still the reference password cracker three decades on. Founded Openwall, pioneered non-executable stack patches for Linux, published early return-into-libc work, and runs the oss-security list where the industry argues about disclosure in public.',
     note: 'Runs the mailing list where your favorite CVE was first announced.',
     status: 'draft',
+    sources: [
+      { label: 'Alexander Peslyak', url: 'https://en.wikipedia.org/wiki/Alexander_Peslyak' },
+      { label: 'John the Ripper', url: 'https://www.openwall.com/john/' },
+      { label: 'oss-security, the disclosure list he runs', url: 'https://www.openwall.com/lists/oss-security/' },
+    ],
     front: '/cards/hacking/021-solar-designer-front.png',
     back: '/cards/hacking/021-solar-designer-back.png',
   },
@@ -538,6 +641,10 @@ export const hackers: Hacker[] = [
       'Released Metasploit in 2003 and turned exploit development from scattered one-off code into a shared, modular framework every penetration tester now learns first. Later ran internet-wide scanning projects that mapped just how much of the internet is quietly exposed.',
     note: 'Changed what a working exploit is worth by making them all free.',
     status: 'draft',
+    sources: [
+      { label: 'HD Moore', url: 'https://en.wikipedia.org/wiki/HD_Moore' },
+      { label: 'Metasploit', url: 'https://en.wikipedia.org/wiki/Metasploit' },
+    ],
     front: '/cards/hacking/022-hd-moore-front.png',
     back: '/cards/hacking/022-hd-moore-back.png',
   },
@@ -560,6 +667,10 @@ export const hackers: Hacker[] = [
       'Walked onto the Black Hat 2010 stage, ran his Jackpotting demo, and made two ATMs pour out cash in front of the room. Then turned to insulin pumps and pacemakers, showing that implanted medical devices could be attacked wirelessly. Died in 2013, days before he was due to present that research.',
     note: 'The most theatrical demo in the history of the conference circuit.',
     status: 'draft',
+    sources: [
+      { label: 'Barnaby Jack', url: 'https://en.wikipedia.org/wiki/Barnaby_Jack' },
+      { label: 'ATM security', url: 'https://en.wikipedia.org/wiki/Automated_teller_machine#Security' },
+    ],
     front: '/cards/hacking/023-barnaby-jack-front.png',
     back: '/cards/hacking/023-barnaby-jack-back.png',
   },
@@ -582,6 +693,10 @@ export const hackers: Hacker[] = [
       'Won Pwn2Own repeatedly, was the first to publicly exploit the iPhone, and then, with Chris Valasek, cut the transmission of a Jeep Cherokee on a live highway from a couch miles away. Chrysler recalled 1.4 million vehicles. Automotive security became a real discipline overnight.',
     note: 'One demo, 1.4 million recalled vehicles. Hard to argue with the receipts.',
     status: 'draft',
+    sources: [
+      { label: 'Charlie Miller', url: 'https://en.wikipedia.org/wiki/Charlie_Miller_(security_researcher)' },
+      { label: 'Wired, 2015 — hackers remotely kill a Jeep on the highway', url: 'https://www.wired.com/2015/07/hackers-remotely-kill-jeep-highway/' },
+    ],
     front: '/cards/hacking/024-charlie-miller-front.png',
     back: '/cards/hacking/024-charlie-miller-back.png',
   },
@@ -604,6 +719,11 @@ export const hackers: Hacker[] = [
       'Reverse-engineered the internal networks of production vehicles and, with Miller, demonstrated full remote control of a Jeep Cherokee in 2015. Both went on to build security teams inside the autonomous-vehicle industry they had just put on notice.',
     note: 'Ships as a pair card with 24. Collectors will want both.',
     status: 'candidate',
+    sources: [
+      { label: 'Wired, 2015 — hackers remotely kill a Jeep on the highway', url: 'https://www.wired.com/2015/07/hackers-remotely-kill-jeep-highway/' },
+      { label: '“Remote Exploitation of an Unaltered Passenger Vehicle” (PDF)', url: 'https://illmatics.com/Remote%20Car%20Hacking.pdf' },
+      { label: 'CAN bus', url: 'https://en.wikipedia.org/wiki/Controller_Area_Network' },
+    ],
     front: '/cards/hacking/025-chris-valasek-front.png',
     back: '/cards/hacking/025-chris-valasek-back.png',
   },
@@ -626,6 +746,11 @@ export const hackers: Hacker[] = [
       'Released a self-propagating cross-site scripting worm in 2005 that added over a million MySpace friends in under a day and took the site down. After his sentence he kept publishing: SkyJack, OwnStar, KeySweeper, and a long line of garage-door and car-key radio attacks explained on video for anyone.',
     note: 'The best explainer in the game. Half the set learned from his videos.',
     status: 'draft',
+    sources: [
+      { label: 'Samy Kamkar', url: 'https://en.wikipedia.org/wiki/Samy_Kamkar' },
+      { label: 'The Samy worm', url: 'https://en.wikipedia.org/wiki/Samy_(computer_worm)' },
+      { label: 'Kamkar’s own writeup of the MySpace worm', url: 'https://samy.pl/myspace/' },
+    ],
     front: '/cards/hacking/026-samy-kamkar-front.png',
     back: '/cards/hacking/026-samy-kamkar-back.png',
   },
@@ -649,6 +774,11 @@ export const hackers: Hacker[] = [
       'At seventeen, unlocked the original iPhone from its carrier. Then published PlayStation 3 root keys and was sued by Sony, in a case that became a rallying point for the right to modify hardware you own. Later founded comma.ai and worked on open self-driving.',
     note: 'The card about who actually owns the device in your pocket.',
     status: 'draft',
+    sources: [
+      { label: 'George Hotz', url: 'https://en.wikipedia.org/wiki/George_Hotz' },
+      { label: 'Sony Computer Entertainment America v. Hotz', url: 'https://en.wikipedia.org/wiki/Sony_Computer_Entertainment_America,_Inc._v._Hotz' },
+      { label: 'iOS jailbreaking', url: 'https://en.wikipedia.org/wiki/Jailbreaking_(iOS)' },
+    ],
     front: '/cards/hacking/027-george-hotz-front.png',
     back: '/cards/hacking/027-george-hotz-back.png',
   },
@@ -672,6 +802,11 @@ export const hackers: Hacker[] = [
       'Reversing WannaCry as it tore through hospitals in May 2017, he spotted an unregistered domain in the code and bought it, unintentionally triggering the killswitch that halted the outbreak. Arrested months later over earlier banking-malware code he had written as a teenager; he pled guilty, was sentenced to time served, and now works in threat research.',
     note: 'Saved the NHS on a Friday and was arrested by August. Both halves are the card.',
     status: 'draft',
+    sources: [
+      { label: 'Marcus Hutchins', url: 'https://en.wikipedia.org/wiki/Marcus_Hutchins' },
+      { label: 'The WannaCry ransomware attack', url: 'https://en.wikipedia.org/wiki/WannaCry_ransomware_attack' },
+      { label: 'Wired — The Confessions of Marcus Hutchins', url: 'https://www.wired.com/story/confessions-marcus-hutchins-hacker-who-saved-the-internet/' },
+    ],
     front: '/cards/hacking/028-marcus-hutchins-front.png',
     back: '/cards/hacking/028-marcus-hutchins-back.png',
   },
@@ -694,6 +829,11 @@ export const hackers: Hacker[] = [
       'Cracked GSM’s A5/1 encryption with rainbow tables, showed millions of SIM cards could be hijacked over the air with a text message, broke Mifare smartcards, and with Jakob Lell released BadUSB — proof that any USB device’s firmware can be reprogrammed to lie about what it is.',
     note: 'If it has a radio and a chip, he has probably already read the datasheet.',
     status: 'draft',
+    sources: [
+      { label: 'Karsten Nohl', url: 'https://en.wikipedia.org/wiki/Karsten_Nohl' },
+      { label: 'BadUSB', url: 'https://en.wikipedia.org/wiki/BadUSB' },
+      { label: 'A5/1, the GSM cipher his team broke', url: 'https://en.wikipedia.org/wiki/A5/1' },
+    ],
     front: '/cards/hacking/029-karsten-nohl-front.png',
     back: '/cards/hacking/029-karsten-nohl-back.png',
   },
@@ -716,6 +856,11 @@ export const hackers: Hacker[] = [
       'Demonstrated SSLstrip and a run of attacks that exposed how fragile the certificate authority system really was. Then built Signal and the double-ratchet protocol behind it, which WhatsApp and others adopted — quietly putting end-to-end encryption in front of billions of people.',
     note: 'Attacked the transport layer, then rewrote it. The set’s highest-leverage card.',
     status: 'draft',
+    sources: [
+      { label: 'Moxie Marlinspike', url: 'https://en.wikipedia.org/wiki/Moxie_Marlinspike' },
+      { label: 'The Signal Protocol', url: 'https://en.wikipedia.org/wiki/Signal_Protocol' },
+      { label: 'Signal protocol documentation', url: 'https://signal.org/docs/' },
+    ],
     front: '/cards/hacking/030-moxie-marlinspike-front.png',
     back: '/cards/hacking/030-moxie-marlinspike-back.png',
   },
diff --git a/src/lib/og.tsx b/src/lib/og.tsx
new file mode 100644
index 0000000..6c88247
--- /dev/null
+++ b/src/lib/og.tsx
@@ -0,0 +1,146 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { ImageResponse } from 'next/og';
+
+// Social previews want landscape. The cards are 500x745 portrait, which X and
+// LinkedIn refuse to render large, so every card gets a 1200x630 composite with
+// the art on the left and the stat line on the right.
+export const OG_SIZE = { width: 1200, height: 630 };
+export const OG_CONTENT_TYPE = 'image/png';
+
+const RARITY_COLOR: Record<string, string> = {
+  iconic: '#f5c451',
+  legendary: '#b06bff',
+  epic: '#4f8cff',
+  rare: '#25c26e',
+};
+
+/** Inlines a file from /public as a data URI — satori cannot fetch relative paths. */
+async function embed(publicPath: string) {
+  const abs = path.join(process.cwd(), 'public', publicPath.replace(/^\//, ''));
+  const bytes = await readFile(abs);
+  return `data:image/png;base64,${bytes.toString('base64')}`;
+}
+
+export type OgCard = {
+  number: number;
+  name: string;
+  handle?: string;
+  title: string;
+  rarity: string;
+  rarityLabel: string;
+  impact: number;
+  front: string;
+  setLabel: string;
+};
+
+export async function renderCardOg(card: OgCard) {
+  const front = await embed(card.front);
+  const accent = RARITY_COLOR[card.rarity] ?? '#f5c451';
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 56,
+          padding: '0 72px',
+          background: '#08090e',
+          backgroundImage:
+            'linear-gradient(120deg, rgba(79,140,255,0.14) 0%, rgba(8,9,14,0) 45%), linear-gradient(300deg, rgba(176,107,255,0.16) 0%, rgba(8,9,14,0) 50%)',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        <img
+          src={front}
+          width={356}
+          height={530}
+          style={{
+            borderRadius: 14,
+            border: `2px solid ${accent}`,
+            boxShadow: '0 24px 60px rgba(0,0,0,0.6)',
+          }}
+        />
+
+        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, maxWidth: 640 }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'nowrap',
+              whiteSpace: 'nowrap',
+              gap: 12,
+              fontSize: 18,
+              letterSpacing: 3,
+              color: '#8b91a3',
+              textTransform: 'uppercase',
+            }}
+          >
+            <span style={{ color: '#f5c451' }}>Open Source Legends</span>
+            <span>·</span>
+            <span>{card.setLabel}</span>
+            <span>·</span>
+            <span>{`#${String(card.number).padStart(3, '0')}`}</span>
+          </div>
+
+          <div
+            style={{
+              fontSize: card.name.length > 20 ? 62 : 74,
+              fontWeight: 700,
+              color: '#f3f4f8',
+              lineHeight: 1.05,
+              marginTop: 22,
+            }}
+          >
+            {card.name}
+          </div>
+
+          {card.handle ? (
+            <div
+              style={{ display: 'flex', fontSize: 30, color: '#f5c451', marginTop: 10 }}
+            >{`“${card.handle}”`}</div>
+          ) : null}
+
+          <div style={{ fontSize: 30, color: '#8b91a3', marginTop: 16, lineHeight: 1.3 }}>
+            {card.title}
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 36 }}>
+            <div
+              style={{
+                display: 'flex',
+                fontSize: 20,
+                letterSpacing: 3,
+                textTransform: 'uppercase',
+                color: accent,
+                border: `2px solid ${accent}`,
+                borderRadius: 999,
+                padding: '8px 20px',
+              }}
+            >
+              {card.rarityLabel}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'baseline',
+                gap: 10,
+                fontSize: 20,
+                letterSpacing: 3,
+                textTransform: 'uppercase',
+                color: '#8b91a3',
+              }}
+            >
+              <span style={{ fontSize: 40, fontWeight: 700, color: '#f3f4f8' }}>{card.impact}</span>
+              <span>Impact</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    OG_SIZE,
+  );
+}