-
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) · 102 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 102 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>The Atlas | 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/5085.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="Explore the locations and landmarks of the Dungeons & Dragons campaign, From Serfs and Frauds." name="description"><meta content="Fezcodex, d&d, dnd, from serfs and frauds, places, locations, maps" name="keywords"><meta content="The Atlas | From Serfs and Frauds" property="og:title"><meta content="Explore the locations and landmarks 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/places" 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="The Atlas | From Serfs and Frauds" name="twitter:title"><meta content="Explore the locations and landmarks 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/places" name="twitter:url"><link href="https://fezcode.com/stories/places" 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:24.3338%;width:4.73334px;height:4.73334px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:9.87131s;animation-delay:-9.2582s;box-shadow:#ff4500 0 0 9.46667px"></div><div class="dnd-fire-particle" style="left:51.2438%;width:4.46571px;height:4.46571px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:8.21883s;animation-delay:-10.8509s;box-shadow:#ff4500 0 0 8.93142px"></div><div class="dnd-fire-particle" style="left:28.0041%;width:8.50085px;height:8.50085px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.6762s;animation-delay:-10.1055s;box-shadow:#ff4500 0 0 17.0017px"></div><div class="dnd-fire-particle" style="left:86.9957%;width:6.34839px;height:6.34839px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.46585s;animation-delay:-9.5964s;box-shadow:#ff4500 0 0 12.6968px"></div><div class="dnd-fire-particle" style="left:5.08163%;width:10.0935px;height:10.0935px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:12.4701s;animation-delay:-1.05502s;box-shadow:#ff4500 0 0 20.1871px"></div><div class="dnd-fire-particle" style="left:25.2224%;width:4.94123px;height:4.94123px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:9.79866s;animation-delay:-9.48929s;box-shadow:#ff4500 0 0 9.88246px"></div><div class="dnd-fire-particle" style="left:21.1371%;width:8.60968px;height:8.60968px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:11.7269s;animation-delay:-1.86726s;box-shadow:#ff4500 0 0 17.2194px"></div><div class="dnd-fire-particle" style="left:69.8812%;width:8.31866px;height:8.31866px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:6.30663s;animation-delay:-40.135ms;box-shadow:#ff4500 0 0 16.6373px"></div><div class="dnd-fire-particle" style="left:24.9818%;width:10.1031px;height:10.1031px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.9257s;animation-delay:-1.84775s;box-shadow:#ff4500 0 0 20.2063px"></div><div class="dnd-fire-particle" style="left:93.8337%;width:7.90864px;height:7.90864px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.6464s;animation-delay:-8.11831s;box-shadow:#ff4500 0 0 15.8173px"></div><div class="dnd-fire-particle" style="left:65.1041%;width:10.9648px;height:10.9648px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.0403s;animation-delay:-1.47815s;box-shadow:#ff4500 0 0 21.9296px"></div><div class="dnd-fire-particle" style="left:.670935%;width:3.18269px;height:3.18269px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.0748s;animation-delay:-14.0526s;box-shadow:#ff4500 0 0 6.36538px"></div><div class="dnd-fire-particle" style="left:46.0471%;width:4.51394px;height:4.51394px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:7.72824s;animation-delay:-4.65068s;box-shadow:#ff4500 0 0 9.02788px"></div><div class="dnd-fire-particle" style="left:71.9187%;width:8.89762px;height:8.89762px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.5812s;animation-delay:-11.4205s;box-shadow:#ff4500 0 0 17.7952px"></div><div class="dnd-fire-particle" style="left:98.8731%;width:5.00068px;height:5.00068px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.4209s;animation-delay:-2.53184s;box-shadow:#ff4500 0 0 10.0014px"></div><div class="dnd-fire-particle" style="left:25.7489%;width:7.04076px;height:7.04076px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.3494s;animation-delay:-7.18778s;box-shadow:#ff4500 0 0 14.0815px"></div><div class="dnd-fire-particle" style="left:27.3204%;width:3.5042px;height:3.5042px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.0187s;animation-delay:-7.7702s;box-shadow:#ff4500 0 0 7.0084px"></div><div class="dnd-fire-particle" style="left:3.50859%;width:6.03196px;height:6.03196px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.00533s;animation-delay:-4.93772s;box-shadow:#ff4500 0 0 12.0639px"></div><div class="dnd-fire-particle" style="left:43.8012%;width:10.9955px;height:10.9955px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:5.84874s;animation-delay:-14.7145s;box-shadow:#ff4500 0 0 21.9911px"></div><div class="dnd-fire-particle" style="left:66.1264%;width:10.5884px;height:10.5884px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:12.0364s;animation-delay:-.913758s;box-shadow:#ff4500 0 0 21.1767px"></div><div class="dnd-fire-particle" style="left:15.7975%;width:5.34512px;height:5.34512px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:9.66967s;animation-delay:-14.8297s;box-shadow:#ff4500 0 0 10.6902px"></div><div class="dnd-fire-particle" style="left:71.8814%;width:5.82321px;height:5.82321px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:11.7426s;animation-delay:-7.08835ms;box-shadow:#ff4500 0 0 11.6464px"></div><div class="dnd-fire-particle" style="left:32.2193%;width:8.55184px;height:8.55184px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:13.0451s;animation-delay:-2.42355s;box-shadow:#ff4500 0 0 17.1037px"></div><div class="dnd-fire-particle" style="left:17.4211%;width:6.74896px;height:6.74896px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:13.5274s;animation-delay:-.502314s;box-shadow:#ff4500 0 0 13.4979px"></div><div class="dnd-fire-particle" style="left:78.071%;width:4.63961px;height:4.63961px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.0534s;animation-delay:-8.00735s;box-shadow:#ff4500 0 0 9.27921px"></div><div class="dnd-fire-particle" style="left:83.5033%;width:9.78207px;height:9.78207px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.6776s;animation-delay:-14.339s;box-shadow:#ff4500 0 0 19.5641px"></div><div class="dnd-fire-particle" style="left:85.5343%;width:10.4032px;height:10.4032px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:11.6668s;animation-delay:-14.811s;box-shadow:#ff4500 0 0 20.8065px"></div><div class="dnd-fire-particle" style="left:52.6535%;width:6.93516px;height:6.93516px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:8.06351s;animation-delay:-9.97601s;box-shadow:#ff4500 0 0 13.8703px"></div><div class="dnd-fire-particle" style="left:13.0292%;width:5.16871px;height:5.16871px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:12.1467s;animation-delay:-2.54381s;box-shadow:#ff4500 0 0 10.3374px"></div><div class="dnd-fire-particle" style="left:22.89%;width:6.0973px;height:6.0973px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.1183s;animation-delay:-8.10282s;box-shadow:#ff4500 0 0 12.1946px"></div><div class="dnd-fire-particle" style="left:91.4348%;width:4.82168px;height:4.82168px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:7.13869s;animation-delay:-7.83386s;box-shadow:#ff4500 0 0 9.64337px"></div><div class="dnd-fire-particle" style="left:5.66663%;width:10.8604px;height:10.8604px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:10.9869s;animation-delay:-10.3797s;box-shadow:#ff4500 0 0 21.7208px"></div><div class="dnd-fire-particle" style="left:50.986%;width:4.14295px;height:4.14295px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:10.919s;animation-delay:-6.15216s;box-shadow:#ff4500 0 0 8.2859px"></div><div class="dnd-fire-particle" style="left:47.3046%;width:3.93124px;height:3.93124px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:13.4926s;animation-delay:-.141905s;box-shadow:#ff4500 0 0 7.86248px"></div><div class="dnd-fire-particle" style="left:18.6412%;width:7.79953px;height:7.79953px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.1926s;animation-delay:-1.49567s;box-shadow:#ff4500 0 0 15.5991px"></div><div class="dnd-fire-particle" style="left:16.0333%;width:5.34708px;height:5.34708px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:11.3278s;animation-delay:-1.76914s;box-shadow:#ff4500 0 0 10.6942px"></div><div class="dnd-fire-particle" style="left:27.3893%;width:8.66808px;height:8.66808px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.4234s;animation-delay:-.986552s;box-shadow:#ff4500 0 0 17.3362px"></div><div class="dnd-fire-particle" style="left:21.5256%;width:7.07446px;height:7.07446px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.62s;animation-delay:-2.78494s;box-shadow:#ff4500 0 0 14.1489px"></div><div class="dnd-fire-particle" style="left:54.7812%;width:6.5639px;height:6.5639px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:11.7829s;animation-delay:-5.75357s;box-shadow:#ff4500 0 0 13.1278px"></div><div class="dnd-fire-particle" style="left:41.3535%;width:4.94346px;height:4.94346px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.514s;animation-delay:-5.38346s;box-shadow:#ff4500 0 0 9.88692px"></div><div class="dnd-fire-particle" style="left:21.0259%;width:6.09693px;height:6.09693px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:13.7999s;animation-delay:-13.8018s;box-shadow:#ff4500 0 0 12.1939px"></div><div class="dnd-fire-particle" style="left:32.4671%;width:7.85272px;height:7.85272px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.2169s;animation-delay:-10.574s;box-shadow:#ff4500 0 0 15.7054px"></div><div class="dnd-fire-particle" style="left:58.4386%;width:9.65713px;height:9.65713px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.60304s;animation-delay:-6.90658s;box-shadow:#ff4500 0 0 19.3143px"></div><div class="dnd-fire-particle" style="left:78.5496%;width:7.95517px;height:7.95517px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:7.97908s;animation-delay:-2.41704s;box-shadow:#ff4500 0 0 15.9103px"></div><div class="dnd-fire-particle" style="left:88.017%;width:7.145px;height:7.145px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.5319s;animation-delay:-2.85986s;box-shadow:#ff4500 0 0 14.29px"></div><div class="dnd-fire-particle" style="left:97.1649%;width:8.16983px;height:8.16983px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:9.37397s;animation-delay:-8.40401s;box-shadow:#ff4500 0 0 16.3397px"></div><div class="dnd-fire-particle" style="left:40.3176%;width:8.08222px;height:8.08222px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:9.50837s;animation-delay:-72.0587ms;box-shadow:#ff4500 0 0 16.1644px"></div><div class="dnd-fire-particle" style="left:44.5658%;width:4.9925px;height:4.9925px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.5229s;animation-delay:-5.92503s;box-shadow:#ff4500 0 0 9.98501px"></div><div class="dnd-fire-particle" style="left:11.9654%;width:10.5877px;height:10.5877px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:12.6674s;animation-delay:-7.81756s;box-shadow:#ff4500 0 0 21.1754px"></div><div class="dnd-fire-particle" style="left:69.2822%;width:7.74298px;height:7.74298px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.63892s;animation-delay:-8.73574s;box-shadow:#ff4500 0 0 15.486px"></div></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-dust-particle" style="left:83.9099%;top:109.672%;animation-duration:17.0605s;animation-delay:-13.9763s;width:1.17822px;height:2.71821px"></div><div class="dnd-dust-particle" style="left:1.11186%;top:118.45%;animation-duration:15.3607s;animation-delay:-16.6694s;width:1.73973px;height:2.87411px"></div><div class="dnd-dust-particle" style="left:84.6663%;top:115.831%;animation-duration:11.8689s;animation-delay:-17.8849s;width:2.32941px;height:2.64769px"></div><div class="dnd-dust-particle" style="left:59.9561%;top:112.219%;animation-duration:14.0127s;animation-delay:-4.32201s;width:1.50384px;height:2.25273px"></div><div class="dnd-dust-particle" style="left:49.2527%;top:108.77%;animation-duration:25.9712s;animation-delay:-4.95028s;width:1.0498px;height:2.84967px"></div><div class="dnd-dust-particle" style="left:65.5127%;top:100.436%;animation-duration:11.8417s;animation-delay:-18.0917s;width:2.61702px;height:2.61605px"></div><div class="dnd-dust-particle" style="left:84.0452%;top:107.582%;animation-duration:28.4542s;animation-delay:-9.53633s;width:2.06777px;height:1.24483px"></div><div class="dnd-dust-particle" style="left:17.642%;top:109.301%;animation-duration:28.9837s;animation-delay:-15.8711s;width:1.56898px;height:2.08685px"></div><div class="dnd-dust-particle" style="left:61.6625%;top:108.866%;animation-duration:26.1117s;animation-delay:-4.54203s;width:2.80082px;height:2.34547px"></div><div class="dnd-dust-particle" style="left:44.7456%;top:116.128%;animation-duration:10.8761s;animation-delay:-17.445s;width:1.28265px;height:2.39251px"></div><div class="dnd-dust-particle" style="left:37.0334%;top:109.337%;animation-duration:20.4259s;animation-delay:-12.3955s;width:2.03579px;height:1.9199px"></div><div class="dnd-dust-particle" style="left:21.7417%;top:117.58%;animation-duration:17.3082s;animation-delay:-1.93917s;width:1.2454px;height:1.85153px"></div><div class="dnd-dust-particle" style="left:97.8576%;top:114.406%;animation-duration:29.9035s;animation-delay:-4.50443s;width:1.79985px;height:1.31528px"></div><div class="dnd-dust-particle" style="left:69.2103%;top:111.459%;animation-duration:11.8733s;animation-delay:-5.11251s;width:2.19538px;height:1.89373px"></div><div class="dnd-dust-particle" style="left:99.7844%;top:108.584%;animation-duration:28.6996s;animation-delay:-14.5981s;width:1.89718px;height:2.22042px"></div><div class="dnd-dust-particle" style="left:7.84023%;top:113.239%;animation-duration:20.5382s;animation-delay:-7.35117s;width:1.89828px;height:1.2837px"></div><div class="dnd-dust-particle" style="left:43.6587%;top:113.7%;animation-duration:25.3516s;animation-delay:-18.1282s;width:2.19034px;height:1.38108px"></div><div class="dnd-dust-particle" style="left:51.9597%;top:103.748%;animation-duration:11.519s;animation-delay:-19.36s;width:1.87698px;height:1.37557px"></div><div class="dnd-dust-particle" style="left:16.7321%;top:112.535%;animation-duration:13.8226s;animation-delay:-4.58483s;width:1.3223px;height:1.2534px"></div><div class="dnd-dust-particle" style="left:57.8945%;top:115.461%;animation-duration:16.5744s;animation-delay:-15.8079s;width:2.65623px;height:1.96773px"></div></div><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="dnd-floating-rune text-4xl" style="left:96.1078%;top:13.1212%;transform:rotate(145.623deg);opacity:.02">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left:53.08%;top:46.4261%;transform:rotate(95.3585deg);opacity:.02">ᚺ</div><div class="dnd-floating-rune text-4xl" style="left:57.2535%;top:30.2744%;transform:rotate(293.237deg);opacity:.02">ᛒ</div><div class="dnd-floating-rune text-4xl" style="left:60.644%;top:42.954%;transform:rotate(39.3067deg);opacity:.02">ᛉ</div><div class="dnd-floating-rune text-4xl" style="left:14.3475%;top:68.9506%;transform:rotate(137.339deg);opacity:.02">ᚹ</div><div class="dnd-floating-rune text-4xl" style="left:48.9427%;top:99.7775%;transform:rotate(296.199deg);opacity:.02">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left:88.2361%;top:42.4519%;transform:rotate(3.49381deg);opacity:.02">ᛊ</div><div class="dnd-floating-rune text-4xl" style="left:50.4139%;top:97.8019%;transform:rotate(157.013deg);opacity:.02">ᛟ</div><div class="dnd-floating-rune text-4xl" style="left:22.1845%;top:.646135%;transform:rotate(166.345deg);opacity:.02">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left:83.731%;top:83.8574%;transform:rotate(345.048deg);opacity:.02">ᛏ</div><div class="dnd-floating-rune text-4xl" style="left:5.28807%;top:92.5843%;transform:rotate(194.389deg);opacity:.02">ᛜ</div><div class="dnd-floating-rune text-4xl" style="left:16.4484%;top:89.0988%;transform:rotate(145.771deg);opacity:.02">ᛖ</div><div class="dnd-floating-rune text-4xl" style="left:20.9664%;top:9.33425%;transform:rotate(214.354deg);opacity:.02">ᛖ</div><div class="dnd-floating-rune text-4xl" style="left:53.9279%;top:40.8134%;transform:rotate(125.402deg);opacity:.02">ᚷ</div><div class="dnd-floating-rune text-4xl" style="left:75.3068%;top:82.5052%;transform:rotate(305.21deg);opacity:.02">ᚱ</div><div class="dnd-floating-rune text-4xl" style="left:67.2774%;top:70.3628%;transform:rotate(99.4989deg);opacity:.02">ᚲ</div><div class="dnd-floating-rune text-4xl" style="left:89.2001%;top:91.7945%;transform:rotate(201.547deg);opacity:.02">ᛉ</div><div class="dnd-floating-rune text-4xl" style="left:73.2038%;top:33.3014%;transform:rotate(50.1368deg);opacity:.02">ᛁ</div><div class="dnd-floating-rune text-4xl" style="left:69.203%;top:65.1236%;transform:rotate(26.7067deg);opacity:.02">ᛞ</div><div class="dnd-floating-rune text-4xl" style="left:78.6356%;top:8.66763%;transform:rotate(29.5803deg);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/artem-sapegin-XGDBdSQ70O0-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/places" data-discover="true">The Atlas</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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h1 class="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">The Atlas</h1><p class="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">Landmarks, cities, and hidden corners of the world.</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 locations by name, type, 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><div class="space-y-20"><section class="space-y-8"><div class="flex items-center gap-4 mb-8"><div class="h-px flex-grow bg-dnd-gold/20"></div><h2 class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter flex items-center gap-3"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold"><path d="M128,24a80,80,0,0,0-80,80c0,72,80,128,80,128s80-56,80-128A80,80,0,0,0,128,24Zm0,112a32,32,0,1,1,32-32A32,32,0,0,1,128,136Z" opacity="0.2"></path><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Establishments</h2><div class="h-px flex-grow bg-dnd-gold/20"></div></div><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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Tipsy Lizard</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Tavern</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A dive bar in Predymesh where secrets are traded for ale. The kind of place where you wipe your feet on the way out.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">St. Marlowe Hotel</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Inn / Flophouse</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A rundown hotel for has-beens and never-weres. Its walls hold more regrets than paint.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Blade's Clinic</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Medical Facility</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sanctuary of white marble and lavender scent. A place of miraculous healing, and sometimes, quiet 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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Laughing Stock</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Comedy Club</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The comedy club where the Sultan of Butterflies performs and gathers her silent army.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Clockwork Sanctum</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Workshop / Shop</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Klaude Barral's workshop in Craninal. A place where the air is thick with the smell of oil and the dust of dead cities, and where every tick of a clock sounds like a funeral bell.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Fredsound Dream Studios</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Production Studio</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The most prestigious and successful movie studio in Hamitonis, managed by Rainhold Fredsound.</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">View Details</div></div></div></div></section><section class="space-y-8"><div class="flex items-center gap-4 mb-8"><div class="h-px flex-grow bg-dnd-gold/20"></div><h2 class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter flex items-center gap-3"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold"><path d="M128,24a80,80,0,0,0-80,80c0,72,80,128,80,128s80-56,80-128A80,80,0,0,0,128,24Zm0,112a32,32,0,1,1,32-32A32,32,0,0,1,128,136Z" opacity="0.2"></path><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Institutions</h2><div class="h-px flex-grow bg-dnd-gold/20"></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Military Academy of Thornus</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Academy</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A rigid institution where the elite of Thornus are trained. It is where Niva DeRosa met Granold Rolnifeld and learned the hard truths of class and betrayal.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">St. Jude's Asylum</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Medical Institution / Prison</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sterile fortress of white walls and silence, run by Dr. Brann Corshield. It is where the "mad" are sent to be broken and rebuilt in the image of conformity.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Krones Research Lab</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Scientific Facility</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sterile, high-security laboratory in the heart of Predymesh. It is where Avalia Krones performs her miracles—and where she hides the secrets of her true discoveries behind layers of mathematical noise.</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">View Details</div></div></div></div></section><section class="space-y-8"><div class="flex items-center gap-4 mb-8"><div class="h-px flex-grow bg-dnd-gold/20"></div><h2 class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter flex items-center gap-3"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold"><path d="M128,24a80,80,0,0,0-80,80c0,72,80,128,80,128s80-56,80-128A80,80,0,0,0,128,24Zm0,112a32,32,0,1,1,32-32A32,32,0,0,1,128,136Z" opacity="0.2"></path><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Locations</h2><div class="h-px flex-grow bg-dnd-gold/20"></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Road of Lion</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Avenue</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The ceremonial avenue of Thornus, often used for parades. It was the target of a diversionary bomb threat by Cytrox.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">City Market</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Marketplace</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The bustling heart of Predymesh commerce. It became the site of the Massacre of the Grenadiers, where Mayor Lynnia and 13 civilians, including Donlane DeRosa, were killed.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Lower Ward</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">District</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The poorer district of the city, where an orphanage stands funded by questionable means.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Music Festival Grounds</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Event Location</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The site where Hellbound played "Last Breath" and Galarian Freiton took his.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Under-City</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Sewers / Slums</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The labyrinthine sewer system beneath Predymesh. A dark, damp world where the forgotten live and the city's dirtiest secrets flow. Home to the triplets.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Sewer Hub</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Hideout</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A central junction in the Predymesh under-city. It is where the triplets sort through the city's washed-down secrets and listen to the vibrations of the ruling class 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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Leatherwave's Garden</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Private Garden</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A small, hidden oasis at the end of a dead-end alley in Craninal. It is a place of moss, sunlight, and feline mumbles.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Proxan Mountain</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Geographical Landmark</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The ancestral home of the Children of the Mountain. A towering, desolate peak containing pressurized pockets of Sansu Syrup. It is currently a restricted military excavation site.</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">View Details</div></div></div></div></section><section class="space-y-8"><div class="flex items-center gap-4 mb-8"><div class="h-px flex-grow bg-dnd-gold/20"></div><h2 class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter flex items-center gap-3"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold"><path d="M128,24a80,80,0,0,0-80,80c0,72,80,128,80,128s80-56,80-128A80,80,0,0,0,128,24Zm0,112a32,32,0,1,1,32-32A32,32,0,0,1,128,136Z" opacity="0.2"></path><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Residences</h2><div class="h-px flex-grow bg-dnd-gold/20"></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Corrigan Investigations</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Office</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A dusty office with a flickering neon sign, smelling of stale smoke and cheap bourbon. The sanctuary of a man fighting his own shadow.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Orlong's Attic</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Slum Residence</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A damp, cramped attic in the Predymesh slums. Once a home for an honest mason, it is now the silent sickroom of Pellera Orlong, smelling of rain and desperation.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">The Kosnak Estate</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Manor</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A sprawling, opulent estate in the capital city of Predymesh. Its gilded walls hide the grotesque trophies of Wulf Kosnak and serve as a cage for Penta.</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">View Details</div></div></div></div></section><section class="space-y-8"><div class="flex items-center gap-4 mb-8"><div class="h-px flex-grow bg-dnd-gold/20"></div><h2 class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter flex items-center gap-3"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="text-dnd-gold"><path d="M128,24a80,80,0,0,0-80,80c0,72,80,128,80,128s80-56,80-128A80,80,0,0,0,128,24Zm0,112a32,32,0,1,1,32-32A32,32,0,0,1,128,136Z" opacity="0.2"></path><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Settlements</h2><div class="h-px flex-grow bg-dnd-gold/20"></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Craninal</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">City</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A city in Thornus where truth is a dangerous commodity and the only safe place to speak it is on a comedy stage.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Glareach</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">City</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">Once a poor town in Thornus, destroyed in the War of Fourbournes, now rebuilt as a neon-soaked metropolis of casinos and vice. A monument to Aester Cloudwear's greed.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Predymesh</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Capital City</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">The capital city of Thornus. A place of gilded spires and deep corruption, where the air is rich and the morals are poor. Home to the ruling class and the shadow ruler, Wulf Kosnak.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Thornus</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Country</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A nation of sharp contrasts, where ancient traditions are suffocated by modern corruption. From the neon vice of Glareach to the gilded spires of Predymesh, it is a land held together by the iron grip of shadow rulers.</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">View Details</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-[350px] 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="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-2xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-2 relative z-10">Hamitonis</h3><p class="text-xs font-arvo text-black/60 uppercase tracking-widest mb-4 font-bold relative z-10">Metropolitan City</p><div class="h-px w-16 bg-dnd-crimson/20 mb-6 mt-4"></div><p class="text-sm font-arvo text-black/70 leading-relaxed line-clamp-4 relative z-10 px-4">A city of celebrities, glamour, and superficiality. It is the heart of the entertainment industry and filled with a glamorous lifestyle.</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">View Details</div></div></div></div></section></div></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">Artem Sapegin</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(93.5869vw)"><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(-1.88433px) rotate(3.31594deg)"><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(-1.64186px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.358137px)"></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>