-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 145 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 145 KB
1
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"><title>Dramatis Personae | From Serfs and Frauds</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="/static/css/2581.0100e5f5.chunk.css" rel="stylesheet" type="text/css"><link href="https://fonts.gstatic.com" rel="preconnect"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><meta content="Meet the characters of the Dungeons & Dragons campaign, From Serfs and Frauds." name="description"><meta content="Fezcodex, d&d, dnd, from serfs and frauds, characters, npc, pc" name="keywords"><meta content="Dramatis Personae | From Serfs and Frauds" property="og:title"><meta content="Meet the characters of the Dungeons & Dragons campaign, From Serfs and Frauds." property="og:description"><meta content="https://fezcode.com/images/asset/ogtitle.png" property="og:image"><meta content="https://fezcode.com/stories/characters" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/asset/ogtitle.png" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Dramatis Personae | From Serfs and Frauds" name="twitter:title"><meta content="Meet the characters of the Dungeons & Dragons campaign, From Serfs and Frauds." name="twitter:description"><meta content="https://fezcode.com/images/asset/ogtitle.png" name="twitter:image"><meta content="https://fezcode.com/stories/characters" name="twitter:url"><link href="https://fezcode.com/stories/characters" rel="canonical"></head><body class="bg-slate-950" style="cursor:default;user-select:auto"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</p><a class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase" href="https://fezcode.com/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg fill="currentColor" height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div style="opacity:1"><div class="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden"><div class="hidden md:block"><div class="dnd-viewport-frame"></div><div class="fixed top-0 left-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute top-4 left-4 w-12 h-12 border-t-4 border-l-4 border-dnd-gold rounded-tl-lg"></div></div><div class="fixed top-0 right-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute top-4 right-4 w-12 h-12 border-t-4 border-r-4 border-dnd-gold rounded-tr-lg"></div></div><div class="fixed bottom-0 left-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute bottom-4 left-4 w-12 h-12 border-b-4 border-l-4 border-dnd-gold rounded-bl-lg"></div></div><div class="fixed bottom-0 right-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute bottom-4 right-4 w-12 h-12 border-b-4 border-r-4 border-dnd-gold rounded-br-lg"></div></div><div class="dnd-lightning-overlay"></div><div class="fixed bottom-8 left-8 z-[110]"><audio loop src="/sounds/static.mp3"></audio><button class="p-4 rounded-full border-2 transition-all shadow-2xl bg-black/40 border-white/10 text-white/40 hover:text-white" title="Toggle Ambient Fireplace"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M176.69,48.72a225,225,0,0,0-42.52-35,12,12,0,0,0-12.34,0,225,225,0,0,0-42.52,35C51,78.47,36,111.42,36,144a92,92,0,0,0,184,0C220,111.42,205,78.47,176.69,48.72ZM100,184c0-13.33,5.53-26.26,16.45-38.45A93,93,0,0,1,128,134.72a93,93,0,0,1,11.55,10.83C150.47,157.74,156,170.67,156,184a28,28,0,0,1-56,0Zm79.84,3.94c.09-1.3.16-2.61.16-3.94,0-46.26-44-73.17-45.83-74.29a12,12,0,0,0-12.34,0C120,110.83,76,137.74,76,184c0,1.33.07,2.64.16,3.94A67.68,67.68,0,0,1,60,144c0-26.52,12.21-52.86,36.28-78.3A213.07,213.07,0,0,1,128,38.39C145.82,50.86,196,90.71,196,144A67.68,67.68,0,0,1,179.84,187.94Z"></path></svg></button></div><div class="dnd-fire-overlay"></div><div class="fixed inset-0 pointer-events-none z-[100] hidden md:block"></div><div class="fixed bottom-8 right-8 z-[110] flex flex-col items-center gap-4"><button class="p-4 bg-dnd-crimson border-2 border-dnd-gold rounded-full text-white/50 shadow-2xl transition-all hover:scale-110 active:scale-95"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M247.44,173.75a.68.68,0,0,0,0-.14L231.05,89.44c0-.06,0-.12,0-.18A60.08,60.08,0,0,0,172,40H83.89a59.88,59.88,0,0,0-59,49.52L8.58,173.61a.68.68,0,0,0,0,.14,36,36,0,0,0,60.9,31.71l.35-.37L109.52,160h37l39.71,45.09c.11.13.23.25.35.37A36.08,36.08,0,0,0,212,216a36,36,0,0,0,35.43-42.25ZM104,112H96v8a8,8,0,0,1-16,0v-8H72a8,8,0,0,1,0-16h8V88a8,8,0,0,1,16,0v8h8a8,8,0,0,1,0,16Zm40-8a8,8,0,0,1,8-8h24a8,8,0,0,1,0,16H152A8,8,0,0,1,144,104Zm84.37,87.47a19.84,19.84,0,0,1-12.9,8.23A20.09,20.09,0,0,1,198,194.31L167.8,160H172a60,60,0,0,0,51-28.38l8.74,45A19.82,19.82,0,0,1,228.37,191.47Z"></path></svg></button></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-fire-particle" style="left:28.6724%;width:6.42756px;height:6.42756px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.32983s;animation-delay:-12.2558s;box-shadow:#ff4500 0 0 12.8551px"></div><div class="dnd-fire-particle" style="left:76.1703%;width:5.14701px;height:5.14701px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:11.1094s;animation-delay:-2.49487s;box-shadow:#ff4500 0 0 10.294px"></div><div class="dnd-fire-particle" style="left:76.9321%;width:4.37782px;height:4.37782px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:8.68835s;animation-delay:-1.29206s;box-shadow:#ff4500 0 0 8.75564px"></div><div class="dnd-fire-particle" style="left:80.7401%;width:9.63057px;height:9.63057px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:12.1854s;animation-delay:-12.1679s;box-shadow:#ff4500 0 0 19.2611px"></div><div class="dnd-fire-particle" style="left:69.6765%;width:9.95062px;height:9.95062px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.8208s;animation-delay:-11.7935s;box-shadow:#ff4500 0 0 19.9012px"></div><div class="dnd-fire-particle" style="left:85.0711%;width:7.84507px;height:7.84507px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:10.3292s;animation-delay:-10.4307s;box-shadow:#ff4500 0 0 15.6901px"></div><div class="dnd-fire-particle" style="left:85.6457%;width:5.64185px;height:5.64185px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:5.45573s;animation-delay:-3.26474s;box-shadow:#ff4500 0 0 11.2837px"></div><div class="dnd-fire-particle" style="left:37.506%;width:9.25628px;height:9.25628px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:11.8752s;animation-delay:-12.2917s;box-shadow:#ff4500 0 0 18.5126px"></div><div class="dnd-fire-particle" style="left:57.6615%;width:5.7747px;height:5.7747px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.72625s;animation-delay:-6.56838s;box-shadow:#ff4500 0 0 11.5494px"></div><div class="dnd-fire-particle" style="left:80.0296%;width:5.59504px;height:5.59504px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:6.22508s;animation-delay:-5.72901s;box-shadow:#ff4500 0 0 11.1901px"></div><div class="dnd-fire-particle" style="left:76.7536%;width:5.54317px;height:5.54317px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.31847s;animation-delay:-14.5407s;box-shadow:#ff4500 0 0 11.0863px"></div><div class="dnd-fire-particle" style="left:8.70043%;width:4.02528px;height:4.02528px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.45203s;animation-delay:-10.4947s;box-shadow:#ff4500 0 0 8.05057px"></div><div class="dnd-fire-particle" style="left:15.9867%;width:4.41659px;height:4.41659px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:11.3096s;animation-delay:-3.10452s;box-shadow:#ff4500 0 0 8.83319px"></div><div class="dnd-fire-particle" style="left:22.0248%;width:4.29886px;height:4.29886px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.2502s;animation-delay:-8.78485s;box-shadow:#ff4500 0 0 8.59772px"></div><div class="dnd-fire-particle" style="left:27.9396%;width:7.89465px;height:7.89465px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:9.19364s;animation-delay:-11.8085s;box-shadow:#ff4500 0 0 15.7893px"></div><div class="dnd-fire-particle" style="left:22.2625%;width:9.77532px;height:9.77532px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:12.6579s;animation-delay:-9.55691s;box-shadow:#ff4500 0 0 19.5506px"></div><div class="dnd-fire-particle" style="left:77.6037%;width:8.68352px;height:8.68352px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.4677s;animation-delay:-1.02068s;box-shadow:#ff4500 0 0 17.367px"></div><div class="dnd-fire-particle" style="left:83.0715%;width:5.27576px;height:5.27576px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.28125s;animation-delay:-2.57835s;box-shadow:#ff4500 0 0 10.5515px"></div><div class="dnd-fire-particle" style="left:33.4439%;width:5.60888px;height:5.60888px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:14.1329s;animation-delay:-14.0922s;box-shadow:#ff4500 0 0 11.2178px"></div><div class="dnd-fire-particle" style="left:42.0996%;width:5.75156px;height:5.75156px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.29726s;animation-delay:-14.9328s;box-shadow:#ff4500 0 0 11.5031px"></div><div class="dnd-fire-particle" style="left:37.9983%;width:10.1747px;height:10.1747px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:10.5076s;animation-delay:-5.96748s;box-shadow:#ff4500 0 0 20.3493px"></div><div class="dnd-fire-particle" style="left:45.357%;width:6.89795px;height:6.89795px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:9.364s;animation-delay:-1.92425s;box-shadow:#ff4500 0 0 13.7959px"></div><div class="dnd-fire-particle" style="left:.715928%;width:6.86292px;height:6.86292px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:6.65161s;animation-delay:-.466089s;box-shadow:#ff4500 0 0 13.7258px"></div><div class="dnd-fire-particle" style="left:30.8604%;width:9.73402px;height:9.73402px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.04693s;animation-delay:-5.04301s;box-shadow:#ff4500 0 0 19.468px"></div><div class="dnd-fire-particle" style="left:59.0763%;width:4.88683px;height:4.88683px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.1525s;animation-delay:-8.39525s;box-shadow:#ff4500 0 0 9.77366px"></div><div class="dnd-fire-particle" style="left:41.7378%;width:8.53543px;height:8.53543px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.49424s;animation-delay:-8.77184s;box-shadow:#ff4500 0 0 17.0709px"></div><div class="dnd-fire-particle" style="left:10.9826%;width:8.14469px;height:8.14469px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.99838s;animation-delay:-2.66197s;box-shadow:#ff4500 0 0 16.2894px"></div><div class="dnd-fire-particle" style="left:43.0877%;width:5.07999px;height:5.07999px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.41308s;animation-delay:-13.573s;box-shadow:#ff4500 0 0 10.16px"></div><div class="dnd-fire-particle" style="left:6.92559%;width:8.29298px;height:8.29298px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.6873s;animation-delay:-3.11589s;box-shadow:#ff4500 0 0 16.586px"></div><div class="dnd-fire-particle" style="left:81.0996%;width:6.37287px;height:6.37287px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:5.42448s;animation-delay:-5.21916s;box-shadow:#ff4500 0 0 12.7457px"></div><div class="dnd-fire-particle" style="left:35.1029%;width:10.5666px;height:10.5666px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:14.7716s;animation-delay:-7.02011s;box-shadow:#ff4500 0 0 21.1333px"></div><div class="dnd-fire-particle" style="left:17.9696%;width:5.05546px;height:5.05546px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.438s;animation-delay:-1.26187s;box-shadow:#ff4500 0 0 10.1109px"></div><div class="dnd-fire-particle" style="left:87.7286%;width:10.0316px;height:10.0316px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:7.10758s;animation-delay:-1.4764s;box-shadow:#ff4500 0 0 20.0633px"></div><div class="dnd-fire-particle" style="left:99.5157%;width:7.39871px;height:7.39871px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.88647s;animation-delay:-13.1263s;box-shadow:#ff4500 0 0 14.7974px"></div><div class="dnd-fire-particle" style="left:23.3663%;width:4.90099px;height:4.90099px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.18321s;animation-delay:-13.476s;box-shadow:#ff4500 0 0 9.80199px"></div><div class="dnd-fire-particle" style="left:5.56133%;width:10.526px;height:10.526px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:6.09829s;animation-delay:-1.14302s;box-shadow:#ff4500 0 0 21.0521px"></div><div class="dnd-fire-particle" style="left:32.5303%;width:5.701px;height:5.701px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.08826s;animation-delay:-5.65389s;box-shadow:#ff4500 0 0 11.402px"></div><div class="dnd-fire-particle" style="left:42.7165%;width:8.59918px;height:8.59918px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:11.8218s;animation-delay:-13.5155s;box-shadow:#ff4500 0 0 17.1984px"></div><div class="dnd-fire-particle" style="left:87.8066%;width:7.17183px;height:7.17183px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.74326s;animation-delay:-3.34727s;box-shadow:#ff4500 0 0 14.3437px"></div><div class="dnd-fire-particle" style="left:18.7463%;width:9.18899px;height:9.18899px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.9081s;animation-delay:-11.3585s;box-shadow:#ff4500 0 0 18.378px"></div><div class="dnd-fire-particle" style="left:39.4212%;width:9.5908px;height:9.5908px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:7.50916s;animation-delay:-2.65917s;box-shadow:#ff4500 0 0 19.1816px"></div><div class="dnd-fire-particle" style="left:78.5573%;width:8.34283px;height:8.34283px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.50152s;animation-delay:-8.85402s;box-shadow:#ff4500 0 0 16.6857px"></div><div class="dnd-fire-particle" style="left:77.0628%;width:4.46606px;height:4.46606px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:9.52649s;animation-delay:-12.7667s;box-shadow:#ff4500 0 0 8.93212px"></div><div class="dnd-fire-particle" style="left:40.1218%;width:4.81155px;height:4.81155px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.02992s;animation-delay:-14.6933s;box-shadow:#ff4500 0 0 9.6231px"></div><div class="dnd-fire-particle" style="left:89.6604%;width:10.6889px;height:10.6889px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:14.1169s;animation-delay:-14.3567s;box-shadow:#ff4500 0 0 21.3779px"></div><div class="dnd-fire-particle" style="left:3.64926%;width:9.14283px;height:9.14283px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:9.35991s;animation-delay:-9.66568s;box-shadow:#ff4500 0 0 18.2857px"></div><div class="dnd-fire-particle" style="left:43.2559%;width:3.2902px;height:3.2902px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.9985s;animation-delay:-4.97652s;box-shadow:#ff4500 0 0 6.5804px"></div><div class="dnd-fire-particle" style="left:20.5765%;width:8.26139px;height:8.26139px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.46828s;animation-delay:-12.7209s;box-shadow:#ff4500 0 0 16.5228px"></div><div class="dnd-fire-particle" style="left:54.0484%;width:8.46082px;height:8.46082px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.77414s;animation-delay:-10.9392s;box-shadow:#ff4500 0 0 16.9216px"></div><div class="dnd-fire-particle" style="left:84.5221%;width:6.5415px;height:6.5415px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.1049s;animation-delay:-12.1914s;box-shadow:#ff4500 0 0 13.083px"></div></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-dust-particle" style="left:16.9768%;top:111.012%;animation-duration:12.1551s;animation-delay:-1.6041s;width:1.9375px;height:2.39724px"></div><div class="dnd-dust-particle" style="left:27.5184%;top:114.995%;animation-duration:23.3282s;animation-delay:-14.3338s;width:1.98075px;height:1.34593px"></div><div class="dnd-dust-particle" style="left:30.9748%;top:117.189%;animation-duration:13.0279s;animation-delay:-19.7166s;width:2.44687px;height:2.64583px"></div><div class="dnd-dust-particle" style="left:99.9064%;top:111.195%;animation-duration:20.1594s;animation-delay:-1.97896s;width:2.23898px;height:1.79437px"></div><div class="dnd-dust-particle" style="left:96.1491%;top:103.301%;animation-duration:22.4566s;animation-delay:-9.26606s;width:2.69904px;height:2.37426px"></div><div class="dnd-dust-particle" style="left:.625592%;top:105.553%;animation-duration:13.7166s;animation-delay:-16.4554s;width:2.93854px;height:1.56859px"></div><div class="dnd-dust-particle" style="left:59.2983%;top:116.508%;animation-duration:19.2892s;animation-delay:-17.9858s;width:2.16119px;height:2.97736px"></div><div class="dnd-dust-particle" style="left:55.1236%;top:103.811%;animation-duration:13.1568s;animation-delay:-19.5891s;width:2.34572px;height:1.04901px"></div><div class="dnd-dust-particle" style="left:.834461%;top:104.075%;animation-duration:12.6936s;animation-delay:-3.46767s;width:2.96038px;height:2.70828px"></div><div class="dnd-dust-particle" style="left:61.8956%;top:103.567%;animation-duration:23.7711s;animation-delay:-18.8778s;width:1.35308px;height:1.28418px"></div><div class="dnd-dust-particle" style="left:52.7353%;top:102.196%;animation-duration:12.6825s;animation-delay:-2.59686s;width:2.17322px;height:2.6698px"></div><div class="dnd-dust-particle" style="left:24.4799%;top:110.915%;animation-duration:15.9396s;animation-delay:-10.865s;width:1.83269px;height:1.86342px"></div><div class="dnd-dust-particle" style="left:9.83073%;top:104.881%;animation-duration:19.1124s;animation-delay:-8.16871s;width:1.47906px;height:1.20088px"></div><div class="dnd-dust-particle" style="left:5.54582%;top:108.153%;animation-duration:26.3456s;animation-delay:-5.45657s;width:1.15818px;height:2.02591px"></div><div class="dnd-dust-particle" style="left:86.2547%;top:111.986%;animation-duration:20.8214s;animation-delay:-1.59616s;width:2.36337px;height:2.51211px"></div><div class="dnd-dust-particle" style="left:86.3186%;top:103.9%;animation-duration:28.7878s;animation-delay:-5.44993s;width:2.11711px;height:2.50236px"></div><div class="dnd-dust-particle" style="left:42.0642%;top:102.165%;animation-duration:28.7385s;animation-delay:-2.42288s;width:1.53259px;height:1.08074px"></div><div class="dnd-dust-particle" style="left:31.135%;top:102.177%;animation-duration:22.5652s;animation-delay:-16.104s;width:2.91369px;height:1.92446px"></div><div class="dnd-dust-particle" style="left:92.7316%;top:118.171%;animation-duration:13.7644s;animation-delay:-9.45974s;width:2.68733px;height:2.65697px"></div><div class="dnd-dust-particle" style="left:85.8109%;top:112.729%;animation-duration:13.3891s;animation-delay:-.442861s;width:2.11701px;height:2.56336px"></div></div><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="dnd-floating-rune text-4xl" style="left:46.0326%;top:65.5405%;transform:rotate(333.932deg);opacity:.02">ᛉ</div><div class="dnd-floating-rune text-4xl" style="left:18.3948%;top:5.93195%;transform:rotate(121.347deg);opacity:.02">ᚱ</div><div class="dnd-floating-rune text-4xl" style="left:90.8565%;top:88.1159%;transform:rotate(130.455deg);opacity:.02">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left:31.8733%;top:34.2067%;transform:rotate(95.3292deg);opacity:.02">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left:96.846%;top:2.82757%;transform:rotate(193.528deg);opacity:.02">ᛚ</div><div class="dnd-floating-rune text-4xl" style="left:96.2491%;top:18.5224%;transform:rotate(284.505deg);opacity:.02">ᚾ</div><div class="dnd-floating-rune text-4xl" style="left:80.1109%;top:58.5598%;transform:rotate(58.5998deg);opacity:.02">ᚷ</div><div class="dnd-floating-rune text-4xl" style="left:5.25547%;top:29.8676%;transform:rotate(313.691deg);opacity:.02">ᚢ</div><div class="dnd-floating-rune text-4xl" style="left:34.9336%;top:57.7268%;transform:rotate(221.744deg);opacity:.02">ᛞ</div><div class="dnd-floating-rune text-4xl" style="left:44.0591%;top:30.5395%;transform:rotate(334.002deg);opacity:.02">ᛗ</div><div class="dnd-floating-rune text-4xl" style="left:66.2954%;top:37.8132%;transform:rotate(26.459deg);opacity:.02">ᚱ</div><div class="dnd-floating-rune text-4xl" style="left:17.1679%;top:9.12664%;transform:rotate(346.856deg);opacity:.02">ᚲ</div><div class="dnd-floating-rune text-4xl" style="left:37.5829%;top:2.31669%;transform:rotate(170.188deg);opacity:.02">ᚲ</div><div class="dnd-floating-rune text-4xl" style="left:80.6799%;top:30.2605%;transform:rotate(154.715deg);opacity:.02">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left:9.84291%;top:44.7429%;transform:rotate(42.0556deg);opacity:.02">ᛟ</div><div class="dnd-floating-rune text-4xl" style="left:1.44868%;top:43.3787%;transform:rotate(41.2488deg);opacity:.02">ᛜ</div><div class="dnd-floating-rune text-4xl" style="left:84.6629%;top:27.1481%;transform:rotate(72.1303deg);opacity:.02">ᛗ</div><div class="dnd-floating-rune text-4xl" style="left:26.145%;top:68.6447%;transform:rotate(247.969deg);opacity:.02">ᚺ</div><div class="dnd-floating-rune text-4xl" style="left:53.5133%;top:80.7992%;transform:rotate(322.445deg);opacity:.02">ᛜ</div><div class="dnd-floating-rune text-4xl" style="left:27.3186%;top:4.10417%;transform:rotate(133.118deg);opacity:.02">ᚢ</div></div></div><div class="fixed inset-0 z-0"><div class="absolute inset-0 bg-cover bg-center transition-all duration-1000" style="background-image:url(/images/stories/wallies/muhammad-haikal-sjukri--RMBf_xSf2U-unsplash.jpg);filter:brightness(.45) contrast(1.1)"></div><div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/80"></div></div><div class="relative z-20 flex flex-col min-h-screen"><nav class="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold"><div class="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md:mt-[25px]"><div class="flex items-center gap-4"><a class="text-white hover:text-dnd-gold transition-colors" href="/" data-discover="true"><svg fill="currentColor" height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z"></path></svg></a><div class="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]"><svg fill="currentColor" height="10" viewBox="0 0 256 256" width="10" xmlns="http://www.w3.org/2000/svg" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories" data-discover="true">S&F</a><svg fill="currentColor" height="10" viewBox="0 0 256 256" width="10" xmlns="http://www.w3.org/2000/svg" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories/lore" data-discover="true">The Lore</a><svg fill="currentColor" height="10" viewBox="0 0 256 256" width="10" xmlns="http://www.w3.org/2000/svg" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories/characters" data-discover="true">Dramatis Personae</a></div></div><div class="flex items-center gap-6"><div class="flex items-center gap-2 font-mono text-[10px] font-bold tracking-widest"><button class="transition-colors text-dnd-gold underline decoration-2 underline-offset-4">EN</button><span class="text-white/20">/</span><button class="transition-colors text-white/40 hover:text-white">TR</button></div><a class="text-[10px] font-mono font-bold tracking-[0.4em] text-white/40 hover:text-dnd-gold transition-colors hidden md:block" href="/" data-discover="true">FEZCODEX_SYSTEM</a></div></div><div class="px-6 py-4 flex items-center justify-center relative bg-gradient-to-b from-dnd-crimson to-transparent"><span class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter drop-shadow-2xl">From Serfs & Frauds</span></div></nav><main class="flex-grow pt-24 pb-12"><div class="max-w-7xl mx-auto px-6 py-12"><header class="text-center mb-12 relative"><div class="flex justify-center mb-6"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h1 class="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">Dramatis Personae</h1><p class="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">The heroes, villains, and bystanders of our tales.</p><div class="relative max-w-md mx-auto mb-8 md:mb-16 group"><div class="absolute inset-0 bg-dnd-gold/20 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div><div class="relative flex items-center"><div class="absolute left-5 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z" opacity="0.2"></path><path d="M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg></div><input class="w-full bg-[#1a0f0a] border-2 border-dnd-gold/50 rounded-full py-4 pl-14 pr-6 text-[#fcfaf2] font-arvo placeholder-dnd-gold/40 focus:outline-none focus:border-dnd-gold focus:ring-2 focus:ring-dnd-gold/20 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.5)]" placeholder="Search characters by name, role, or description..." type="text" value=""><div class="absolute right-4 w-2 h-2 rounded-full bg-dnd-gold/30 animate-pulse"></div></div><div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-dnd-gold/20 to-transparent"></div></div></header><section class="space-y-24"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="cursor-pointer" style="opacity:1;transform:none"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Corrigan</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Private Investigator</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A cynical detective who hunted his own shadow and found it. After the incident at the St. Marlowe, he is said to walk without a reflection—a hollow vessel haunting the streets of Predymesh.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Doctor Blade</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Physician & Assassin</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A legendary healer with a dark secret. He cures the incurable and kills with the same precision using the magical Alilberry.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Master Vorn</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Merchant</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A wealthy merchant, cheat, and slaver who sought a cure for his gout and found eternal rest instead.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Sultan of Butterflies</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Comedian / Cult Leader</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A tall, beautiful, and sharp-witted widow turned comedian. She hides her quest for justice behind a mask of madness and punchlines.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Galarian "Galar" Freiton</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Scientist</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A brilliant scientist who spent 13 years discovering the "Soul of Viyu", a dark free energy source. Killed to keep it secret.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Agent Sprite</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Government Agent</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A shadowy government operative involved in the assassination of Galarian Freiton.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Agent Laozi</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Government Agent</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A shadowy government operative involved in the assassination of Galarian Freiton.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Aester Cloudwear</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Real Estate Developer</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A wealthy tycoon who manipulated the War of Fourbournes to gentrify Glareach. A monster in a silk suit who built a sin city on the bones of the poor.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Lorhud Krauper</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Hitman / Former Soldier</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A drug-addicted veteran seeking revenge for his daughter Lenia. He wears a green beret with 22 stars and walks the razor's edge between healing and death.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Lenia Krauper</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Seamstress / Victim</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Lorhud's beloved daughter. During the razing of Glareach, she was dragged from her home by Cloudwear's private security. She was violated and butchered by Aester himself as her father watched helplessly from the shadows, her blood serving as the mortar for the first casino of the new Glareach.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Klaude Barral</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Chronomancer / Horologist</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A master clockmaker who uses ash from destroyed cities to power his Chronometers. He allows people to relive their past, but he never lets them change it.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Dr. Brann Corshield</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Chief Alienist / Villain</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">An immensely egotistical psychiatrist who runs St. Jude's Asylum. Obsessed with his own image (literally) and maintaining "order," he seeks to lobotomize the Sultan of Butterflies to silence her "delusions."</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Valeth Vanceshire</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Diplomat</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A kind-hearted foreign diplomat visiting Thornus. Armed only with his navy blue notebook, he documents the corruption of the ruling class while trying to navigate a dangerous political landscape.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Wulf Kosnak</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Shadow Ruler / Corrupt Noble</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A grotesque, gluttonous veteran who pulls the strings of Thornus from behind the curtain. He displays the skulls of his wife's parents as trophies, a secret he keeps from her.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Penta Kosnak</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Noblewoman / Prisoner</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The young, beautiful, and intelligent wife of Wulf Kosnak. A spoil of war forced into marriage, she is a prisoner in her own home, unaware of the gruesome truth hanging above her head.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Ophera</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Sewer Dweller / Listener</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The eldest of the sewer-dwelling triplets. She "listens" to the vibrations of the city through the iron pipes, gathering secrets that wash down from above.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Melsani</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Sewer Dweller / Watcher</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">One of the triplets. She watches the reflections in the city's grime and puddles, seeing truths that people try to hide in the light.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Nopilai</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Sewer Dweller / Scenter</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The brother of the triplets. He can smell fear, blood, and corruption in the steam that rises from the grates of Predymesh.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Pellera Orlong</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Daughter / Patient Zero</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A twelve-year-old girl and the first human to manifest the 'Touch of Rose'. Afflicted by Willare's mistake, she remains in a vegetative state in a slum attic, her forehead marked by a crimson rose-leaf shape. She is the biological 'Zero Point' for the disease, and her mark is a beacon for a connection that hasn't been established yet.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Nex Orlong</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Mason turned Thief</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Once an honest mason, Nex turned to a life of crime to fund the Alilberry treatment needed to save his daughter. He is desperate, guilt-ridden, and now in possession of dangerous secrets.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Avalia Krones</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Scientist / Strategist</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A brilliant strategist who secretly used Proxanian Seeds and Sansu Syrup to develop her formula. She sought to create a botanical neural network but never intended to create a pathogen. After demanding to see Patient Zero (Pellera Orlong), she realized Willare's mistake involved her secret Proxanian materials. She remains silent about the source to protect her own life and research.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Willare Frindjen</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Junior Lab Assistant</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A dedicated assistant who is consumed by guilt. She accidentally contaminated the Krones Formula with what she thought was a standard supplement (the Crimson Binder). It was only after Avalia forced her to look at Pellera Orlong that she realized the magnitude of her error, though she still doesn't know the Proxanian nature of what she touched.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Proythom</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Farmer / Civilian</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Willare's former lover. A kind and honest man from the outskirts of Predymesh. Willare left him without explanation to protect him from the guilt and the 'rot' she believed she was carrying.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">The Mute Bard</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Alchemist's Companion</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A mysterious figure who cannot speak but whose songs hold the power to stabilize volatile herbal mixtures. He provides the final, magical resonance required to turn raw Alilberry into the legendary 'Drop'.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Prostex Leatherwave</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Caretaker of Cats</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A young boy in Craninal who lives a simple, peaceful life caring for his three cats in a hidden garden.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Soot, Ginger, and Moonbeam</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">The Council of Three (Cats)</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Pippin's three feline companions. Soot is the shadow, Ginger is the sleeper, and Moonbeam is the guardian. They provide the only true peace in the city of Craninal.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Rainhold Fredsound</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">CEO of Fredsound Dream Studios</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A kind and generous man living in Hamitonis. He manages his massive wealth with a heavy heart, preferring to help others in secret. He loves Kramen as his closest friend.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Kramen Mandora</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Butler / Guardian</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A strict but loyal butler who grew up in Glareach before its destruction. He is a skilled marksman and saved Isabylle Fredsound's life during an "accident".</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Isabylle Fredsound</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Matriarch</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Rainhold's mother, who refused Aester Cloudwear's gentrification project. She was saved by Kramen after a car "accident".</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Elyka</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Movie Star</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A glamorous celebrity unimpressed by wealth and fame. She vanished during an ambush in Hamitonis.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Children of the Mountain</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Extinct Civilization (Proxanians)</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A humanoid race that predates human colonization of Thornus. Their culture revolved around the 'Communion Rites' and the biological harvesting of Sansu Syrup. Their remnant psychic frequency, the 'Proxanian Echo', is harvested to power the RedLink.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Niva DeRosa</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Intelligence Officer</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sewer worker's daughter who became an intelligence officer to give her father a better life. She uncovered the plot behind the Massacre of the Grenadiers but was ignored, leading to a tragedy that broke her.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Donlane DeRosa</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Sewer Worker / "The King"</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A giant of a man with a crown-shaped birthmark on his hand. He dedicated his life to the sewers of Thornus to raise his children. He died buying flowers in the City Market.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Granold Rolnifeld</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Major / Military Officer</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A charismatic but arrogant military officer who dismissed Niva's warning about the City Market attack. He carries the weight of the massacre and Niva's disappearance.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Hewond Lynnia</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Mayor</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The Mayor of Predymesh who was assassinated during the Massacre of the Grenadiers.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Soren Perborn</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Retired Fisherman / Former Agent</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A former operative of Black Ragnarok who retired to a life of fishing in Oakhaven. He was pulled back into the shadows by a cryptic message from his old partner.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Freya Haelmar</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Operative</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">An active operative of Black Ragnarok and Soren's former partner. She has gone dark after discovering a betrayal within the organization.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Vancelor "The Fox" Ivarel</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Retired Agent</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A former Black Ragnarok agent known as "The Fox" who retired to raise a family. He lost his left eye in the line of duty and is reluctant to return to the shadows.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div><div class="cursor-pointer" style="opacity:0;transform:scale(.9)"><div class="block group relative p-8 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"><div class="dnd-card-rune top-8 left-8 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-8 right-8 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 transition-all duration-500"></div><div class="mb-6 text-dnd-crimson group-hover:scale-110 transition-transform duration-500 relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl font-playfairDisplay italic font-black text-[#b8860b] uppercase tracking-tighter mb-2 relative z-10">Palwin Condervale</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Active Agent / Strategist</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6"></div><p class="text-base font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sharp, seasoned operative of Black Ragnarok who never left the agency. She assists Soren and The Fox from the shadows of an abandoned lighthouse, though her true motives remain guarded.</p><div class="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xs font-mono text-dnd-crimson uppercase tracking-widest">Read Dossier</div></div></div></div></section></div></main><footer class="relative mt-12 md:mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-12 md:py-16 px-6 text-white"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center text-center md:text-left"><div class="space-y-4"><div class="flex justify-center md:justify-start"><span class="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">S & F</span></div><p class="font-arvo text-[10px] uppercase tracking-[0.4em] text-white/70">From Serfs and Frauds</p></div><div class="flex flex-col items-center gap-4 text-white"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="opacity-60"><path d="M200,176H104s8,6,8,16a24,24,0,0,1-48,0V64A24,24,0,0,0,40,40H176a24,24,0,0,1,24,24Z" opacity="0.2"></path><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"></path></svg><p class="font-arvo italic text-sm text-white max-w-xs text-center leading-relaxed">"Every chronicle is a living memory of those who braved the dark."</p></div><div class="space-y-4 md:text-right"><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Digital Archive Kernel // v0.8.7</p><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Wallpaper Source // <span class="text-white font-bold">Muhammad Haikal Sjukri</span></p><div class="h-px w-12 bg-dnd-gold ml-auto opacity-50"></div><p class="font-arvo text-[10px] uppercase tracking-[0.2em] text-white">© 2026 Archives of the Realm</p></div></div></footer></div><div class="fixed inset-0 pointer-events-none z-10 shadow-[inset_0_0_150px_rgba(0,0,0,0.9)]"></div></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width:60px;transform:translateX(94.0349vw)"><div class="relative" style="transform:scaleX(-1)"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform:translateY(-3.79545px) rotate(1.49195deg)"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216,80V192H40V64H200A16,16,0,0,1,216,80Z" opacity="0.2"></path><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.358137px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.64186px)"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div></body></html>