From 424cb2a69afc159407fa4f88af2d91a1aae3c09e Mon Sep 17 00:00:00 2001
From: Haylan <code@arthurerlich.ch>
Date: Tue, 30 Jun 2026 11:23:32 +0200
Subject: [PATCH] Add initial spell data and HTML structure for Oswin
 Eisenbach's spell cards

---
 CLAUDE.md                                     |  46 ++
 .../oswin-eisenbach/1/disguise-self.json      |  18 +
 characters/oswin-eisenbach/1/identify.json    |  19 +
 .../oswin-eisenbach/1/speak-with-animals.json |  18 +
 .../cantrip/create-bonfire.json               |  20 +
 .../oswin-eisenbach/cantrip/magic-stone.json  |  19 +
 .../oswin-eisenbach/cantrip/mending.json      |  18 +
 .../cantrip/minor-illusion.json               |  19 +
 characters/oswin-eisenbach/manifest.json      |  16 +
 index.html                                    | 503 ++++++++++++++++++
 10 files changed, 696 insertions(+)
 create mode 100644 CLAUDE.md
 create mode 100644 characters/oswin-eisenbach/1/disguise-self.json
 create mode 100644 characters/oswin-eisenbach/1/identify.json
 create mode 100644 characters/oswin-eisenbach/1/speak-with-animals.json
 create mode 100644 characters/oswin-eisenbach/cantrip/create-bonfire.json
 create mode 100644 characters/oswin-eisenbach/cantrip/magic-stone.json
 create mode 100644 characters/oswin-eisenbach/cantrip/mending.json
 create mode 100644 characters/oswin-eisenbach/cantrip/minor-illusion.json
 create mode 100644 characters/oswin-eisenbach/manifest.json
 create mode 100644 index.html

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..0a0e286
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,46 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+This renders printable D&D 5e spell reference cards for a specific character ("Oswin Eisenbach", a Forest Gnome Artificer). `index.html` is the static page (Tailwind CSS, Flowbite, and Google Fonts from CDNs, no build step), but spell data lives in JSON files under `characters/`, loaded at runtime via `fetch()`.
+
+## Running / Previewing
+
+`index.html` fetches JSON files, which browsers block on `file://` URLs (CORS). You must serve the directory:
+
+```
+python3 -m http.server
+```
+
+then open `http://localhost:8000/`. Opening `index.html` directly will not load any spells.
+
+## Architecture
+
+### `index.html`
+
+1. **`<style>` block** — card visual design (`.spell-card`, `.card-header`, `.stat-row`, `.card-body`, `.card-footer`, `.level-flag`, etc.) plus per-school color theming via classes like `.school-conjuration`, `.school-evocation`, etc. (each sets `--school-col` / `--school-bg` CSS custom properties consumed by the card components). Also defines `@media print` rules and an `@page` rule (A4 portrait, 12mm margin, 3-column grid) so the page can be printed directly to physical cards sized at 2.5×3.5 in (240×336px at 96dpi, set via `--card-w`/`--card-h`).
+
+2. **UI chrome** (`.ui-panel`) — toggle buttons to filter cards by spell level (`#type-filters`) and school (`#school-filters`), built dynamically from the loaded data, plus a "Print Cards" button that calls `window.print()`. Elements marked `.no-print` are hidden when printing. The card grid (`#card-grid`, also `.print-area`) is the same element in both screen and print view — print CSS just swaps it from a flex-wrap layout to a 3-column grid.
+
+3. **Data + render logic** (final `<script>`):
+   - `CHARACTER_DIR` — path to the active character's data folder (currently `characters/oswin-eisenbach`).
+   - `loadSpells()` — fetches `manifest.json` for the character, then fetches every spell JSON file it lists, populates `SPELLS`, builds the filter buttons, and renders.
+   - `SPELLS` — array of spell objects, populated at runtime from JSON. Each spell has: `name`, `level` (`"cantrip"` or a numeric string like `"1"`), `levelDisplay`, `school`, `castingTime`, `range`, `components`, `duration`, optional `damage`/`saveDC`/`material`, `source` (book/page citation), `uses` (e.g. `"At Will"`, `"Spell Slot"`, `"2× / Long Rest"`), `tags` (array of short labels), and `desc` (array of HTML-containing paragraph strings — inline `<b>`/`<em>` tags are used for emphasis directly in the data).
+   - `SCHOOL_ABBR` — maps school name to a 2-letter abbreviation shown in the circular "pip" badge on each card.
+   - `buildCard(spell)` — returns the HTML string for one card, assembling stat chips, description paragraphs, tags, footer, and a corner `.level-flag` (grey "Cantrip" vs. gold "Lvl N Spell") from a spell object.
+   - `buildFilters(typeLabels)` — generates the type and school filter buttons after data loads, based on what's actually present.
+   - `renderCards()` — filters `SPELLS` by the current `activeType`/`activeSchool` globals and re-renders the `#card-grid` container.
+   - `filterType(btn, val)` / `filterSchool(btn, val)` — button click handlers that update filter state, toggle the `.active` class on buttons, and call `renderCards()`.
+
+### `characters/<character-folder>/`
+
+- `manifest.json` — `{ character, subtitle, types: [{ level, label, files: [...] }] }`. `level` is the folder name and matches the spell's `level` field (`"cantrip"`, `"1"`, `"2"`, ...); `files` lists the JSON filenames inside that level's folder, in display order.
+- `<level>/<spell-slug>.json` — one spell per file, same shape as the spell objects described above (no `level`/`levelDisplay` redundancy issue — both are still included in the file since the card needs them).
+
+## Adding/editing spells
+
+To add a new spell, create a JSON file in the right `characters/<character>/<level>/` folder (create the folder if it's a new level) and add its filename to that level's `files` array in `manifest.json`. To add a new school, add both a `.school-<name>` CSS rule (lowercase school name) and an entry in `SCHOOL_ABBR` in `index.html` — filter buttons for schools and levels are generated automatically from whatever data loads.
+
+To add a second character, create a new `characters/<folder>/` with its own `manifest.json` and level folders, then point `CHARACTER_DIR` in `index.html` at it (there is currently no in-page character switcher).
diff --git a/characters/oswin-eisenbach/1/disguise-self.json b/characters/oswin-eisenbach/1/disguise-self.json
new file mode 100644
index 0000000..b4657ea
--- /dev/null
+++ b/characters/oswin-eisenbach/1/disguise-self.json
@@ -0,0 +1,18 @@
+{
+  "name": "Disguise Self",
+  "level": "1",
+  "levelDisplay": "1st Level",
+  "school": "Illusion",
+  "castingTime": "1 action",
+  "range": "Self",
+  "components": "V, S",
+  "duration": "1 hour",
+  "source": "PHB p.262",
+  "uses": "Spell Slot",
+  "tags": ["Shapechanging", "Social"],
+  "desc": [
+    "You and your gear look different for the duration. You may appear up to 1 ft. shorter or taller, heavier or lighter, but must retain the same basic limb arrangement.",
+    "Changes fail physical inspection — objects pass through illusory additions.",
+    "A creature must Study you (INT Investigation vs. DC 13) to see through the disguise."
+  ]
+}
diff --git a/characters/oswin-eisenbach/1/identify.json b/characters/oswin-eisenbach/1/identify.json
new file mode 100644
index 0000000..ea83db6
--- /dev/null
+++ b/characters/oswin-eisenbach/1/identify.json
@@ -0,0 +1,19 @@
+{
+  "name": "Identify",
+  "level": "1",
+  "levelDisplay": "1st Level",
+  "school": "Divination",
+  "castingTime": "1 minute (ritual)",
+  "range": "Touch",
+  "components": "V, S, M",
+  "duration": "Instantaneous",
+  "material": "Pearl worth 100+ gp",
+  "source": "PHB p.287",
+  "uses": "Spell Slot / Ritual",
+  "tags": ["Detection", "Magic Items"],
+  "desc": [
+    "You touch an object. If it is magical, you learn its <b>properties, how to use them, whether it requires attunement, and its charges</b>.",
+    "You also learn any ongoing spells affecting the item and the spell that created it.",
+    "If you touch a <em>creature</em> instead, you learn which ongoing spells are affecting it."
+  ]
+}
diff --git a/characters/oswin-eisenbach/1/speak-with-animals.json b/characters/oswin-eisenbach/1/speak-with-animals.json
new file mode 100644
index 0000000..daebceb
--- /dev/null
+++ b/characters/oswin-eisenbach/1/speak-with-animals.json
@@ -0,0 +1,18 @@
+{
+  "name": "Speak with Animals",
+  "level": "1",
+  "levelDisplay": "1st Level",
+  "school": "Divination",
+  "castingTime": "1 action",
+  "range": "Self",
+  "components": "V, S",
+  "duration": "10 minutes",
+  "source": "PHB p.318",
+  "uses": "2× / Long Rest",
+  "tags": ["Exploration", "Social"],
+  "desc": [
+    "For the duration, you can <b>comprehend and speak with Beasts</b>, and use any Influence action skill options with them.",
+    "Most beasts focus on survival and companionship, but can report nearby locations, monsters, and anything perceived within the past day.",
+    "<em>(Forest Gnome racial trait — does not expend a spell slot.)</em>"
+  ]
+}
diff --git a/characters/oswin-eisenbach/cantrip/create-bonfire.json b/characters/oswin-eisenbach/cantrip/create-bonfire.json
new file mode 100644
index 0000000..97d9d73
--- /dev/null
+++ b/characters/oswin-eisenbach/cantrip/create-bonfire.json
@@ -0,0 +1,20 @@
+{
+  "name": "Create Bonfire",
+  "level": "cantrip",
+  "levelDisplay": "Cantrip",
+  "school": "Conjuration",
+  "castingTime": "1 action",
+  "range": "60 ft. (5 ft. cube)",
+  "components": "V, S",
+  "duration": "Conc. 1 min",
+  "damage": "1d8 fire",
+  "saveDC": "DEX 13",
+  "source": "EEPC p.152",
+  "uses": "At Will",
+  "tags": ["Damage", "Fire", "Concentration"],
+  "desc": [
+    "You create a bonfire on ground within range. Until the spell ends, the bonfire fills a 5‑ft. cube.",
+    "Any creature in the bonfire's space when you cast it must succeed on a <b>DEX save (DC 13)</b> or take <b>1d8 fire damage</b>. A creature also saves when it moves into the space or ends its turn there.",
+    "The bonfire ignites flammable objects in its area not being worn or carried."
+  ]
+}
diff --git a/characters/oswin-eisenbach/cantrip/magic-stone.json b/characters/oswin-eisenbach/cantrip/magic-stone.json
new file mode 100644
index 0000000..2b78fdc
--- /dev/null
+++ b/characters/oswin-eisenbach/cantrip/magic-stone.json
@@ -0,0 +1,19 @@
+{
+  "name": "Magic Stone",
+  "level": "cantrip",
+  "levelDisplay": "Cantrip",
+  "school": "Transmutation",
+  "castingTime": "1 bonus action",
+  "range": "Touch",
+  "components": "V, S",
+  "duration": "1 minute",
+  "damage": "1d6 + 3 bludg.",
+  "source": "EEPC p.160",
+  "uses": "At Will",
+  "tags": ["Damage", "Ranged"],
+  "desc": [
+    "You touch 1–3 pebbles and imbue them with magic. You or another creature can make a <b>ranged spell attack</b> with one pebble (range 60 ft.).",
+    "On a hit: <b>1d6 + INT modifier bludgeoning damage</b>. The attacker uses <em>your</em> spellcasting modifier on the attack roll.",
+    "Casting this spell again ends the effect on remaining pebbles."
+  ]
+}
diff --git a/characters/oswin-eisenbach/cantrip/mending.json b/characters/oswin-eisenbach/cantrip/mending.json
new file mode 100644
index 0000000..4a1203f
--- /dev/null
+++ b/characters/oswin-eisenbach/cantrip/mending.json
@@ -0,0 +1,18 @@
+{
+  "name": "Mending",
+  "level": "cantrip",
+  "levelDisplay": "Cantrip",
+  "school": "Transmutation",
+  "castingTime": "1 minute",
+  "range": "Touch",
+  "components": "V, S, M",
+  "duration": "Instantaneous",
+  "material": "Two lodestones",
+  "source": "PHB p.297",
+  "uses": "At Will",
+  "tags": ["Utility", "Repair"],
+  "desc": [
+    "This spell repairs a single break or tear in an object you touch — a broken chain, torn cloak, or leaking wineskin — as long as the break is no larger than <b>1 foot</b> in any dimension.",
+    "Leaves no trace of former damage. Can repair a magic item physically, but cannot restore its magic."
+  ]
+}
diff --git a/characters/oswin-eisenbach/cantrip/minor-illusion.json b/characters/oswin-eisenbach/cantrip/minor-illusion.json
new file mode 100644
index 0000000..d87f7aa
--- /dev/null
+++ b/characters/oswin-eisenbach/cantrip/minor-illusion.json
@@ -0,0 +1,19 @@
+{
+  "name": "Minor Illusion",
+  "level": "cantrip",
+  "levelDisplay": "Cantrip",
+  "school": "Illusion",
+  "castingTime": "1 action",
+  "range": "30 ft. (5 ft. cube)",
+  "components": "S, M",
+  "duration": "1 minute",
+  "material": "A bit of fleece",
+  "source": "PHB p.298",
+  "uses": "At Will",
+  "tags": ["Control", "Illusion"],
+  "desc": [
+    "You create a <b>sound or image</b> within range. A creature can use the Study action (INT Investigation vs. your DC 13) to discern the illusion.",
+    "<b>Sound:</b> Any volume from a whisper to a scream; can be continuous or discrete.",
+    "<b>Image:</b> Object up to a 5‑ft. cube. Cannot produce sound, light, or smell. Physical contact reveals it."
+  ]
+}
diff --git a/characters/oswin-eisenbach/manifest.json b/characters/oswin-eisenbach/manifest.json
new file mode 100644
index 0000000..f00d9d2
--- /dev/null
+++ b/characters/oswin-eisenbach/manifest.json
@@ -0,0 +1,16 @@
+{
+  "character": "Oswin Eisenbach",
+  "subtitle": "Level 1 Forest Gnome Artificer",
+  "types": [
+    {
+      "level": "cantrip",
+      "label": "Cantrips",
+      "files": ["create-bonfire.json", "magic-stone.json", "mending.json", "minor-illusion.json"]
+    },
+    {
+      "level": "1",
+      "label": "1st Level",
+      "files": ["disguise-self.json", "identify.json", "speak-with-animals.json"]
+    }
+  ]
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4f499a9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Oswin Eisenbach — Spell Cards</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet" />
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+  tailwind.config = {
+    theme: {
+      extend: {
+        fontFamily: {
+          cinzel: ['Cinzel', 'serif'],
+          crimson: ['"Crimson Text"', 'serif'],
+        },
+        colors: {
+          gold: '#c9a84c',
+          'gold-light': '#e8c96e',
+          'gold-dim': '#8a6a28',
+          parchment: '#f0e6c8',
+          'parchment-dark': '#d8c89a',
+          ink: '#1c1208',
+          leather: '#2d1b0e',
+          'leather-mid': '#4a2e14',
+          navy: '#1a1a2e',
+        }
+      }
+    }
+  };
+</script>
+<style>
+  /* ─── CARD SIZE: 2.5 × 3.5 inches at 96dpi = 240 × 336px ─── */
+  :root {
+    --card-w: 240px;
+    --card-h: 336px;
+  }
+
+  body {
+    background: #0e0e1a;
+    font-family: 'Crimson Text', serif;
+  }
+
+  /* school colour palette */
+  .school-conjuration   { --school-col: #7c3aed; --school-bg: #2e1065; }
+  .school-transmutation { --school-col: #d97706; --school-bg: #451a03; }
+  .school-illusion      { --school-col: #6366f1; --school-bg: #1e1b4b; }
+  .school-divination    { --school-col: #0ea5e9; --school-bg: #0c2a4a; }
+  .school-evocation     { --school-col: #ef4444; --school-bg: #450a0a; }
+  .school-abjuration    { --school-col: #10b981; --school-bg: #052e16; }
+  .school-enchantment   { --school-col: #ec4899; --school-bg: #500724; }
+  .school-necromancy    { --school-col: #84cc16; --school-bg: #1a2e05; }
+
+  .spell-card {
+    width: var(--card-w);
+    height: var(--card-h);
+    border-radius: 8px;
+    background: #f0e6c8;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,168,76,0.4);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  /* flag: distinguishes cantrips (at-will, grey) from leveled spells (slot, gold) at a glance.
+     Sits in normal flex flow above the school pip so it never overlaps the card name. */
+  .level-flag {
+    font-family: 'Cinzel', serif;
+    font-size: 6.5px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 1.5px 6px;
+    border-radius: 3px;
+    color: #fff;
+    text-transform: uppercase;
+    white-space: nowrap;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
+  }
+
+  .level-flag-cantrip { background: linear-gradient(135deg, #94a3b8, #475569); }
+  .level-flag-spell   { background: linear-gradient(135deg, #e8c96e, #8a6a28); }
+
+  /* outer gold border inset */
+  .spell-card::before {
+    content: '';
+    position: absolute;
+    inset: 5px;
+    border: 1.5px solid #c9a84c55;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  /* corner flourishes */
+  .spell-card::after {
+    content: '';
+    position: absolute;
+    inset: 5px;
+    background:
+      radial-gradient(circle at 0 0, #c9a84c 1.5px, transparent 1.5px) 5px 5px / 1px 1px no-repeat,
+      radial-gradient(circle at 100% 0, #c9a84c 1.5px, transparent 1.5px) calc(100% - 5px) 5px / 1px 1px no-repeat,
+      radial-gradient(circle at 0 100%, #c9a84c 1.5px, transparent 1.5px) 5px calc(100% - 5px) / 1px 1px no-repeat,
+      radial-gradient(circle at 100% 100%, #c9a84c 1.5px, transparent 1.5px) calc(100% - 5px) calc(100% - 5px) / 1px 1px no-repeat;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .card-header {
+    background: linear-gradient(135deg, #1c1208 0%, var(--school-bg, #2d1b0e) 100%);
+    padding: 9px 12px 7px;
+    position: relative;
+  }
+
+  .card-header::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--school-col, #c9a84c), transparent);
+  }
+
+  .card-name {
+    font-family: 'Cinzel', serif;
+    font-size: 11.5px;
+    font-weight: 700;
+    color: #e8c96e;
+    line-height: 1.2;
+    letter-spacing: 0.03em;
+    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  }
+
+  .card-level-school {
+    font-family: 'Cinzel', serif;
+    font-size: 8.5px;
+    color: var(--school-col, #c9a84c);
+    letter-spacing: 0.06em;
+    margin-top: 1px;
+    text-transform: uppercase;
+  }
+
+  .school-pip {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--school-col, #c9a84c);
+    color: #fff;
+    font-family: 'Cinzel', serif;
+    font-size: 9px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 0 8px var(--school-col, #c9a84c), 0 0 0 1.5px rgba(255,255,255,0.15);
+  }
+
+  .stat-row {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    padding: 5px 10px 4px;
+    background: #e8d8ae;
+    border-bottom: 1px solid #c9a84c44;
+  }
+
+  .stat-chip {
+    font-family: 'Cinzel', serif;
+    font-size: 7.5px;
+    font-weight: 600;
+    color: #1c1208;
+    background: rgba(201,168,76,0.22);
+    border: 1px solid #c9a84c55;
+    border-radius: 3px;
+    padding: 1.5px 5px;
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+  }
+
+  .stat-chip span {
+    color: #7a4a00;
+  }
+
+  .card-body {
+    flex: 1;
+    overflow: hidden;
+    padding: 7px 10px 6px;
+    background: #f0e6c8;
+    position: relative;
+  }
+
+  .card-desc {
+    font-family: 'Crimson Text', serif;
+    font-size: 9.5px;
+    line-height: 1.45;
+    color: #1c1208;
+  }
+
+  .card-desc p + p { margin-top: 3px; }
+
+  .card-tags {
+    display: flex;
+    gap: 3px;
+    flex-wrap: wrap;
+    margin-top: 5px;
+  }
+
+  .tag {
+    font-family: 'Cinzel', serif;
+    font-size: 7px;
+    color: var(--school-col, #7a4a00);
+    border: 1px solid var(--school-col, #c9a84c);
+    border-radius: 2px;
+    padding: 0 4px;
+    opacity: 0.8;
+    letter-spacing: 0.05em;
+  }
+
+  .card-footer {
+    background: linear-gradient(to right, #1c1208, var(--school-bg, #2d1b0e));
+    padding: 4px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #c9a84c44;
+  }
+
+  .footer-source {
+    font-family: 'Crimson Text', serif;
+    font-style: italic;
+    font-size: 7.5px;
+    color: #8a6a28;
+  }
+
+  .footer-uses {
+    font-family: 'Cinzel', serif;
+    font-size: 7px;
+    color: var(--school-col, #c9a84c);
+    letter-spacing: 0.05em;
+  }
+
+  /* ─── PRINT STYLES ─── */
+  @media print {
+    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+
+    body { background: #fff !important; margin: 0; padding: 0; }
+
+    .no-print { display: none !important; }
+
+    .print-area {
+      display: grid !important;
+      grid-template-columns: repeat(3, var(--card-w));
+      gap: 8px;
+      padding: 12mm;
+      justify-content: start;
+    }
+
+    .spell-card {
+      box-shadow: none !important;
+      border: 1px solid #c9a84c;
+    }
+
+    .screen-only { display: none !important; }
+  }
+
+  @page {
+    size: A4 portrait;
+    margin: 12mm;
+  }
+
+  /* ─── UI chrome ─── */
+  .ui-panel {
+    background: linear-gradient(135deg, #12121e, #1e1428);
+    border-bottom: 1px solid #c9a84c33;
+  }
+
+  .toggle-btn {
+    font-family: 'Cinzel', serif;
+    font-size: 11px;
+    padding: 6px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+    border: 1px solid transparent;
+  }
+
+  .toggle-btn.active {
+    background: #c9a84c22;
+    border-color: #c9a84c;
+    color: #e8c96e;
+  }
+
+  .toggle-btn:not(.active) {
+    background: transparent;
+    border-color: #ffffff22;
+    color: #888;
+  }
+
+  .toggle-btn:hover { opacity: 0.85; }
+
+  .print-btn {
+    font-family: 'Cinzel', serif;
+    font-size: 11px;
+    background: linear-gradient(135deg, #c9a84c, #8a6a28);
+    color: #1c1208;
+    font-weight: 700;
+    padding: 7px 18px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    letter-spacing: 0.05em;
+    transition: opacity 0.15s;
+  }
+
+  .print-btn:hover { opacity: 0.88; }
+
+  .section-label {
+    font-family: 'Cinzel', serif;
+    font-size: 9px;
+    color: #c9a84c88;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══════════════════ UI CHROME ═══════════════════ -->
+<div class="ui-panel no-print px-6 py-4">
+  <div class="flex items-center justify-between flex-wrap gap-4">
+    <div>
+      <div class="font-cinzel text-gold text-xl font-bold tracking-widest" id="character-name">&nbsp;</div>
+      <div class="font-crimson text-sm text-yellow-200/50 italic" id="character-subtitle">&nbsp;</div>
+    </div>
+    <button class="print-btn" onclick="window.print()">⬡ Print Cards</button>
+  </div>
+
+  <!-- Toggle buttons -->
+  <div class="mt-4 flex flex-wrap gap-6">
+    <div>
+      <div class="section-label">Filter by Type</div>
+      <div class="flex gap-2 flex-wrap" id="type-filters">
+        <button class="toggle-btn active" data-type="all" onclick="filterType(this,'all')">All</button>
+      </div>
+    </div>
+    <div>
+      <div class="section-label">Filter by School</div>
+      <div class="flex gap-2 flex-wrap" id="school-filters">
+        <button class="toggle-btn active" data-school="all" onclick="filterSchool(this,'all')">All</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════════════ CARD GRID ═══════════════════ -->
+<div class="print-area p-8" id="card-grid"
+  style="display:flex;flex-wrap:wrap;gap:16px;">
+</div>
+
+<!-- ═══════════════════ DATA + LOGIC ═══════════════════ -->
+<script>
+// Spell data lives under characters/<character-folder>/<level-folder>/<spell>.json,
+// indexed by a manifest.json so the browser knows which files to fetch.
+const CHARACTER_DIR = 'characters/oswin-eisenbach';
+
+let SPELLS = [];
+
+// ─── school abbreviations for pip
+const SCHOOL_ABBR = {
+  Conjuration: 'CO', Transmutation: 'TR', Illusion: 'IL',
+  Divination: 'DV', Evocation: 'EV', Abjuration: 'AB',
+  Enchantment: 'EN', Necromancy: 'NE',
+};
+
+let activeType   = 'all';
+let activeSchool = 'all';
+
+async function loadSpells() {
+  const manifest = await fetch(`${CHARACTER_DIR}/manifest.json`).then(r => r.json());
+
+  document.getElementById('character-name').textContent = manifest.character;
+  document.getElementById('character-subtitle').textContent = manifest.subtitle;
+
+  const typeLabels = {};
+  for (const type of manifest.types) {
+    typeLabels[type.level] = type.label;
+    const spells = await Promise.all(
+      type.files.map(file => fetch(`${CHARACTER_DIR}/${type.level}/${file}`).then(r => r.json()))
+    );
+    SPELLS.push(...spells);
+  }
+
+  buildFilters(typeLabels);
+  renderCards();
+}
+
+function schoolClass(school) {
+  return 'school-' + school.toLowerCase();
+}
+
+function buildCard(spell) {
+  const sc = schoolClass(spell.school);
+  const abbr = SCHOOL_ABBR[spell.school] || spell.school.slice(0,2).toUpperCase();
+
+  const statsHtml = [
+    `<span class="stat-chip"><span>Cast</span> ${spell.castingTime}</span>`,
+    `<span class="stat-chip"><span>Range</span> ${spell.range}</span>`,
+    `<span class="stat-chip"><span>Dur.</span> ${spell.duration}</span>`,
+    spell.damage ? `<span class="stat-chip"><span>Dmg</span> ${spell.damage}</span>` : '',
+    spell.saveDC ? `<span class="stat-chip"><span>Save</span> ${spell.saveDC}</span>` : '',
+    spell.material ? `<span class="stat-chip"><span>M</span> ${spell.material}</span>` : '',
+  ].filter(Boolean).join('');
+
+  const descHtml = spell.desc.map(p => `<p>${p}</p>`).join('');
+  const tagsHtml = (spell.tags||[]).map(t => `<span class="tag">${t}</span>`).join('');
+  const isCantrip = spell.level === 'cantrip';
+  const flagLabel = isCantrip ? 'Cantrip' : `Lvl ${spell.level} Spell`;
+
+  return `
+<div class="spell-card ${sc}"
+     data-level="${spell.level}"
+     data-school="${spell.school}">
+  <div class="card-header flex items-start justify-between gap-2">
+    <div>
+      <div class="card-name">${spell.name}</div>
+      <div class="card-level-school">${spell.levelDisplay} · ${spell.school}</div>
+    </div>
+    <div class="flex flex-col items-center gap-1">
+      <div class="level-flag ${isCantrip ? 'level-flag-cantrip' : 'level-flag-spell'}">${flagLabel}</div>
+      <div class="school-pip">${abbr}</div>
+    </div>
+  </div>
+  <div class="stat-row">${statsHtml}</div>
+  <div class="card-body">
+    <div class="card-desc">${descHtml}</div>
+    <div class="card-tags">${tagsHtml}</div>
+  </div>
+  <div class="card-footer">
+    <span class="footer-source">${spell.source}</span>
+    <span class="footer-uses">${spell.uses}</span>
+  </div>
+</div>`;
+}
+
+function buildFilters(typeLabels) {
+  const typeContainer = document.getElementById('type-filters');
+  for (const level of Object.keys(typeLabels)) {
+    const btn = document.createElement('button');
+    btn.className = 'toggle-btn';
+    btn.dataset.type = level;
+    btn.textContent = typeLabels[level];
+    btn.onclick = () => filterType(btn, level);
+    typeContainer.appendChild(btn);
+  }
+
+  const schoolContainer = document.getElementById('school-filters');
+  const schools = [...new Set(SPELLS.map(s => s.school))];
+  for (const school of schools) {
+    const btn = document.createElement('button');
+    btn.className = 'toggle-btn';
+    btn.dataset.school = school;
+    btn.textContent = school;
+    btn.onclick = () => filterSchool(btn, school);
+    schoolContainer.appendChild(btn);
+  }
+}
+
+function renderCards() {
+  const grid = document.getElementById('card-grid');
+  const filtered = SPELLS.filter(s => {
+    const typeOk   = activeType   === 'all' || s.level === activeType;
+    const schoolOk = activeSchool === 'all' || s.school === activeSchool;
+    return typeOk && schoolOk;
+  });
+  grid.innerHTML = filtered.map(buildCard).join('');
+}
+
+function filterType(btn, val) {
+  activeType = val;
+  document.querySelectorAll('#type-filters .toggle-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  renderCards();
+}
+
+function filterSchool(btn, val) {
+  activeSchool = val;
+  document.querySelectorAll('#school-filters .toggle-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  renderCards();
+}
+
+loadSpells();
+</script>
+</body>
+</html>
\ No newline at end of file