-
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) · 70.3 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 70.3 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 Lore | 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/6340.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 world's history and tales from the Dungeons & Dragons campaign, From Serfs and Frauds." name="description"><meta content="Fezcodex, d&d, dnd, from serfs and frauds, lore, history, tales" name="keywords"><meta content="The Lore | From Serfs and Frauds" property="og:title"><meta content="Explore the world's history and tales from 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/lore" 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 Lore | From Serfs and Frauds" name="twitter:title"><meta content="Explore the world's history and tales from 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/lore" name="twitter:url"><link href="https://fezcode.com/stories/lore" rel="canonical"><link href="https://www.transparenttextures.com" rel="preconnect"></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:33.0489%;width:9.06982px;height:9.06982px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.9547s;animation-delay:-9.37538s;box-shadow:#ff4500 0 0 18.1396px"></div><div class="dnd-fire-particle" style="left:35.653%;width:10.9047px;height:10.9047px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:7.50567s;animation-delay:-14.575s;box-shadow:#ff4500 0 0 21.8093px"></div><div class="dnd-fire-particle" style="left:64.3051%;width:8.82734px;height:8.82734px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:14.8881s;animation-delay:-11.1171s;box-shadow:#ff4500 0 0 17.6547px"></div><div class="dnd-fire-particle" style="left:64.5291%;width:3.43329px;height:3.43329px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:5.74516s;animation-delay:-10.7553s;box-shadow:#ff4500 0 0 6.86658px"></div><div class="dnd-fire-particle" style="left:75.6612%;width:5.58935px;height:5.58935px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:6.55566s;animation-delay:-3.79773s;box-shadow:#ff4500 0 0 11.1787px"></div><div class="dnd-fire-particle" style="left:9.18983%;width:7.72657px;height:7.72657px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:14.7306s;animation-delay:-11.2833s;box-shadow:#ff4500 0 0 15.4531px"></div><div class="dnd-fire-particle" style="left:73.1721%;width:4.2107px;height:4.2107px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:11.8606s;animation-delay:-1.22478s;box-shadow:#ff4500 0 0 8.4214px"></div><div class="dnd-fire-particle" style="left:43.0119%;width:8.0601px;height:8.0601px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:7.72968s;animation-delay:-5.17207s;box-shadow:#ff4500 0 0 16.1202px"></div><div class="dnd-fire-particle" style="left:48.4238%;width:7.53454px;height:7.53454px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:10.5849s;animation-delay:-6.80908s;box-shadow:#ff4500 0 0 15.0691px"></div><div class="dnd-fire-particle" style="left:12.2138%;width:5.55873px;height:5.55873px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.70138s;animation-delay:-8.2295s;box-shadow:#ff4500 0 0 11.1175px"></div><div class="dnd-fire-particle" style="left:66.8689%;width:3.72657px;height:3.72657px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:8.14644s;animation-delay:-4.21557s;box-shadow:#ff4500 0 0 7.45314px"></div><div class="dnd-fire-particle" style="left:39.9394%;width:3.05424px;height:3.05424px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.9816s;animation-delay:-6.28488s;box-shadow:#ff4500 0 0 6.10848px"></div><div class="dnd-fire-particle" style="left:4.81791%;width:9.46703px;height:9.46703px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:10.836s;animation-delay:-12.9189s;box-shadow:#ff4500 0 0 18.9341px"></div><div class="dnd-fire-particle" style="left:87.7125%;width:5.86261px;height:5.86261px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.375s;animation-delay:-7.29742s;box-shadow:#ff4500 0 0 11.7252px"></div><div class="dnd-fire-particle" style="left:98.1052%;width:6.26408px;height:6.26408px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:13.3987s;animation-delay:-7.99013s;box-shadow:#ff4500 0 0 12.5282px"></div><div class="dnd-fire-particle" style="left:8.59118%;width:8.38752px;height:8.38752px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:7.25323s;animation-delay:-1.34856s;box-shadow:#ff4500 0 0 16.775px"></div><div class="dnd-fire-particle" style="left:28.4822%;width:4.28412px;height:4.28412px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.41328s;animation-delay:-7.57856s;box-shadow:#ff4500 0 0 8.56824px"></div><div class="dnd-fire-particle" style="left:2.8998%;width:6.88302px;height:6.88302px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:13.8849s;animation-delay:-2.64619s;box-shadow:#ff4500 0 0 13.766px"></div><div class="dnd-fire-particle" style="left:90.1624%;width:6.73806px;height:6.73806px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:13.9879s;animation-delay:-6.49573s;box-shadow:#ff4500 0 0 13.4761px"></div><div class="dnd-fire-particle" style="left:91.4841%;width:7.94569px;height:7.94569px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.56607s;animation-delay:-.534478s;box-shadow:#ff4500 0 0 15.8914px"></div><div class="dnd-fire-particle" style="left:84.7149%;width:5.64995px;height:5.64995px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:7.50391s;animation-delay:-3.23641s;box-shadow:#ff4500 0 0 11.2999px"></div><div class="dnd-fire-particle" style="left:46.3267%;width:5.09721px;height:5.09721px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:8.25434s;animation-delay:-8.43703s;box-shadow:#ff4500 0 0 10.1944px"></div><div class="dnd-fire-particle" style="left:20.9552%;width:10.8301px;height:10.8301px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:9.7003s;animation-delay:-.472109s;box-shadow:#ff4500 0 0 21.6602px"></div><div class="dnd-fire-particle" style="left:15.746%;width:10.0148px;height:10.0148px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:7.57682s;animation-delay:-13.671s;box-shadow:#ff4500 0 0 20.0296px"></div><div class="dnd-fire-particle" style="left:52.9446%;width:6.95429px;height:6.95429px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.41189s;animation-delay:-1.97475s;box-shadow:#ff4500 0 0 13.9086px"></div><div class="dnd-fire-particle" style="left:71.9586%;width:4.74243px;height:4.74243px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:9.25903s;animation-delay:-9.46707s;box-shadow:#ff4500 0 0 9.48486px"></div><div class="dnd-fire-particle" style="left:25.2751%;width:7.4436px;height:7.4436px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:8.86708s;animation-delay:-12.7073s;box-shadow:#ff4500 0 0 14.8872px"></div><div class="dnd-fire-particle" style="left:56.6303%;width:3.11653px;height:3.11653px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:5.36987s;animation-delay:-31.5791ms;box-shadow:#ff4500 0 0 6.23305px"></div><div class="dnd-fire-particle" style="left:59.7032%;width:10.0263px;height:10.0263px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:14.459s;animation-delay:-.491451s;box-shadow:#ff4500 0 0 20.0527px"></div><div class="dnd-fire-particle" style="left:50.5752%;width:6.3147px;height:6.3147px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.5036s;animation-delay:-12.5344s;box-shadow:#ff4500 0 0 12.6294px"></div><div class="dnd-fire-particle" style="left:29.4409%;width:6.1762px;height:6.1762px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:7.65363s;animation-delay:-6.23959s;box-shadow:#ff4500 0 0 12.3524px"></div><div class="dnd-fire-particle" style="left:45.8408%;width:9.41951px;height:9.41951px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.98686s;animation-delay:-9.52695s;box-shadow:#ff4500 0 0 18.839px"></div><div class="dnd-fire-particle" style="left:28.6779%;width:3.69303px;height:3.69303px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:6.37424s;animation-delay:-.80792s;box-shadow:#ff4500 0 0 7.38606px"></div><div class="dnd-fire-particle" style="left:9.01899%;width:9.16184px;height:9.16184px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:13.8799s;animation-delay:-5.18007s;box-shadow:#ff4500 0 0 18.3237px"></div><div class="dnd-fire-particle" style="left:43.3195%;width:9.432px;height:9.432px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:10.5797s;animation-delay:-1.49832s;box-shadow:#ff4500 0 0 18.864px"></div><div class="dnd-fire-particle" style="left:22.2373%;width:8.30995px;height:8.30995px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:7.66661s;animation-delay:-12.9911s;box-shadow:#ff4500 0 0 16.6199px"></div><div class="dnd-fire-particle" style="left:40.3835%;width:4.75979px;height:4.75979px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:6.29501s;animation-delay:-8.59468s;box-shadow:#ff4500 0 0 9.51958px"></div><div class="dnd-fire-particle" style="left:19.4371%;width:5.46114px;height:5.46114px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:6.26584s;animation-delay:-6.90101s;box-shadow:#ff4500 0 0 10.9223px"></div><div class="dnd-fire-particle" style="left:35.6418%;width:3.38481px;height:3.38481px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:6.89962s;animation-delay:-4.48246s;box-shadow:#ff4500 0 0 6.76962px"></div><div class="dnd-fire-particle" style="left:76.3236%;width:5.96276px;height:5.96276px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.83019s;animation-delay:-10.9806s;box-shadow:#ff4500 0 0 11.9255px"></div><div class="dnd-fire-particle" style="left:29.2197%;width:5.14958px;height:5.14958px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:12.8543s;animation-delay:-55.1753ms;box-shadow:#ff4500 0 0 10.2992px"></div><div class="dnd-fire-particle" style="left:30.062%;width:5.0665px;height:5.0665px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:9.03642s;animation-delay:-.247329s;box-shadow:#ff4500 0 0 10.133px"></div><div class="dnd-fire-particle" style="left:32.5207%;width:6.42957px;height:6.42957px;background:radial-gradient(circle,red 0,#ff4500 70%,transparent 100%);animation-duration:14.6696s;animation-delay:-3.21935s;box-shadow:#ff4500 0 0 12.8591px"></div><div class="dnd-fire-particle" style="left:63.5668%;width:5.6042px;height:5.6042px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:12.1647s;animation-delay:-5.48904s;box-shadow:#ff4500 0 0 11.2084px"></div><div class="dnd-fire-particle" style="left:69.7536%;width:10.7354px;height:10.7354px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:10.1446s;animation-delay:-8.42122s;box-shadow:#ff4500 0 0 21.4708px"></div><div class="dnd-fire-particle" style="left:20.0835%;width:3.93127px;height:3.93127px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:12.8582s;animation-delay:-2.40142s;box-shadow:#ff4500 0 0 7.86254px"></div><div class="dnd-fire-particle" style="left:16.5674%;width:9.3862px;height:9.3862px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:6.33222s;animation-delay:-4.32592s;box-shadow:#ff4500 0 0 18.7724px"></div><div class="dnd-fire-particle" style="left:78.0797%;width:5.20806px;height:5.20806px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:5.33679s;animation-delay:-2.37936s;box-shadow:#ff4500 0 0 10.4161px"></div><div class="dnd-fire-particle" style="left:62.0222%;width:3.34934px;height:3.34934px;background:radial-gradient(circle,#ff8c00 0,gold 70%,transparent 100%);animation-duration:10.2548s;animation-delay:-14.8232s;box-shadow:#ff4500 0 0 6.69869px"></div><div class="dnd-fire-particle" style="left:47.9682%;width:6.50494px;height:6.50494px;background:radial-gradient(circle,#ff4500 0,#ff8c00 70%,transparent 100%);animation-duration:12.4474s;animation-delay:-13.8384s;box-shadow:#ff4500 0 0 13.0099px"></div></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-dust-particle" style="left:15.7836%;top:118.282%;animation-duration:19.5533s;animation-delay:-16.5705s;width:2.34459px;height:1.86917px"></div><div class="dnd-dust-particle" style="left:19.0312%;top:105.001%;animation-duration:23.3061s;animation-delay:-8.5419s;width:1.4196px;height:2.42438px"></div><div class="dnd-dust-particle" style="left:77.4922%;top:102.477%;animation-duration:22.8869s;animation-delay:-12.6964s;width:1.10986px;height:1.67004px"></div><div class="dnd-dust-particle" style="left:86.6701%;top:114.886%;animation-duration:14.8367s;animation-delay:-11.1217s;width:2.32706px;height:2.94165px"></div><div class="dnd-dust-particle" style="left:61.0156%;top:104.608%;animation-duration:24.3637s;animation-delay:-7.61877s;width:1.02334px;height:1.7072px"></div><div class="dnd-dust-particle" style="left:56.4213%;top:101.248%;animation-duration:26.7515s;animation-delay:-15.722s;width:1.4786px;height:1.47609px"></div><div class="dnd-dust-particle" style="left:52.3287%;top:115.978%;animation-duration:27.3832s;animation-delay:-9.88675s;width:1.24466px;height:1.00417px"></div><div class="dnd-dust-particle" style="left:46.2203%;top:116.118%;animation-duration:20.9065s;animation-delay:-1.89044s;width:2.55742px;height:2.14579px"></div><div class="dnd-dust-particle" style="left:32.9217%;top:103.781%;animation-duration:25.1809s;animation-delay:-14.3243s;width:1.68932px;height:1.46932px"></div><div class="dnd-dust-particle" style="left:12.0343%;top:108.032%;animation-duration:29.2487s;animation-delay:-14.0192s;width:1.58924px;height:1.79919px"></div><div class="dnd-dust-particle" style="left:28.0861%;top:114.491%;animation-duration:25.2223s;animation-delay:-6.43603s;width:2.76476px;height:2.07448px"></div><div class="dnd-dust-particle" style="left:20.3931%;top:110.118%;animation-duration:27.3019s;animation-delay:-17.2323s;width:2.38274px;height:1.26615px"></div><div class="dnd-dust-particle" style="left:82.7722%;top:100.856%;animation-duration:17.421s;animation-delay:-9.91993s;width:2.23029px;height:2.53378px"></div><div class="dnd-dust-particle" style="left:67.4702%;top:102.155%;animation-duration:22.8293s;animation-delay:-18.2862s;width:1.33593px;height:1.36742px"></div><div class="dnd-dust-particle" style="left:89.9385%;top:111.475%;animation-duration:29.4005s;animation-delay:-19.5312s;width:2.76825px;height:1.21581px"></div><div class="dnd-dust-particle" style="left:71.362%;top:115.733%;animation-duration:25.1917s;animation-delay:-17.1735s;width:1.42607px;height:1.74658px"></div><div class="dnd-dust-particle" style="left:67.7642%;top:112.455%;animation-duration:18.9562s;animation-delay:-4.18317s;width:2.25562px;height:2.64898px"></div><div class="dnd-dust-particle" style="left:81.7485%;top:100.579%;animation-duration:11.604s;animation-delay:-16.9365s;width:2.30357px;height:2.32906px"></div><div class="dnd-dust-particle" style="left:27.1948%;top:101.8%;animation-duration:21.1402s;animation-delay:-11.8503s;width:2.93466px;height:2.57966px"></div><div class="dnd-dust-particle" style="left:47.6111%;top:106.168%;animation-duration:15.531s;animation-delay:-14.8273s;width:2.21695px;height:1.97915px"></div></div><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="dnd-floating-rune text-4xl" style="left:46.9822%;top:50.1354%;transform:rotate(331.288deg);opacity:.02">ᛏ</div><div class="dnd-floating-rune text-4xl" style="left:6.20708%;top:17.9792%;transform:rotate(4.45535deg);opacity:.02">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left:25.0438%;top:40.9321%;transform:rotate(165.834deg);opacity:.02">ᚹ</div><div class="dnd-floating-rune text-4xl" style="left:6.8559%;top:68.3383%;transform:rotate(206.028deg);opacity:.02">ᛞ</div><div class="dnd-floating-rune text-4xl" style="left:46.6858%;top:8.25256%;transform:rotate(334.606deg);opacity:.02">ᛒ</div><div class="dnd-floating-rune text-4xl" style="left:21.8871%;top:96.3011%;transform:rotate(221.352deg);opacity:.02">ᛇ</div><div class="dnd-floating-rune text-4xl" style="left:68.6297%;top:98.6738%;transform:rotate(179.531deg);opacity:.02">ᛜ</div><div class="dnd-floating-rune text-4xl" style="left:5.87493%;top:16.72%;transform:rotate(115.057deg);opacity:.02">ᛏ</div><div class="dnd-floating-rune text-4xl" style="left:42.1993%;top:48.3581%;transform:rotate(119.427deg);opacity:.02">ᛁ</div><div class="dnd-floating-rune text-4xl" style="left:44.2424%;top:5.20712%;transform:rotate(276.382deg);opacity:.02">ᛞ</div><div class="dnd-floating-rune text-4xl" style="left:57.7059%;top:90.5589%;transform:rotate(185.173deg);opacity:.02">ᚦ</div><div class="dnd-floating-rune text-4xl" style="left:25.45%;top:75.6102%;transform:rotate(217.484deg);opacity:.02">ᛇ</div><div class="dnd-floating-rune text-4xl" style="left:6.01034%;top:81.8593%;transform:rotate(19.6806deg);opacity:.02">ᛗ</div><div class="dnd-floating-rune text-4xl" style="left:51.9901%;top:61.3142%;transform:rotate(216.674deg);opacity:.02">ᚾ</div><div class="dnd-floating-rune text-4xl" style="left:64.6313%;top:27.7082%;transform:rotate(277.579deg);opacity:.02">ᛒ</div><div class="dnd-floating-rune text-4xl" style="left:74.2894%;top:66.2047%;transform:rotate(319.779deg);opacity:.02">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left:11.2539%;top:17.5312%;transform:rotate(221.986deg);opacity:.02">ᚾ</div><div class="dnd-floating-rune text-4xl" style="left:17.4341%;top:98.7635%;transform:rotate(191.329deg);opacity:.02">ᚠ</div><div class="dnd-floating-rune text-4xl" style="left:67.7206%;top:27.6146%;transform:rotate(50.4616deg);opacity:.02">ᚲ</div><div class="dnd-floating-rune text-4xl" style="left:98.9955%;top:27.8414%;transform:rotate(123.084deg);opacity:.02">ᛒ</div></div></div><div class="fixed inset-0 z-0"><div class="absolute inset-0 bg-cover bg-center transition-all duration-1000" style="background-image:url(/images/stories/wallies/muhammad-haikal-sjukri--RMBf_xSf2U-unsplash.jpg);filter:brightness(.45) contrast(1.1)"></div><div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/80"></div></div><div class="relative z-20 flex flex-col min-h-screen"><nav class="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold"><div class="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md:mt-[25px]"><div class="flex items-center gap-4"><a class="text-white hover:text-dnd-gold transition-colors" href="/" data-discover="true"><svg fill="currentColor" height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z"></path></svg></a><div class="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]"><svg fill="currentColor" height="10" viewBox="0 0 256 256" width="10" xmlns="http://www.w3.org/2000/svg" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories" data-discover="true">S&F</a><svg fill="currentColor" height="10" viewBox="0 0 256 256" width="10" xmlns="http://www.w3.org/2000/svg" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories/lore" data-discover="true">The Lore</a></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-16 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="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></div><h1 class="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">The Chronicles</h1><p class="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">A compendium of documented history and ancient scripts.</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 chronicles by title or scribe..." type="text" value=""><div class="absolute right-4 w-2 h-2 rounded-full bg-dnd-gold/30 animate-pulse"></div></div><div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-dnd-gold/20 to-transparent"></div></div></header><section class="space-y-24"><div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto"><div style="opacity:1;transform:none"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/1" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume I: The Streets of Thornus</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by Constellation</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div><div style="opacity:1;transform:none"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/2" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume II: The Cost of Sin</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by fezcode</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div><div style="opacity:1;transform:none"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/3" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume III: The RedLink Arc</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by fezcode</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div><div style="opacity:1;transform:none"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/4" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume IV: The Resistance</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by fezcode</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div><div style="opacity:0;transform:translateY(-.33595px)"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/5" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume V: The Black Ragnarok</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by fezcode</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div><div style="opacity:0;transform:translateY(-2.39297px)"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/books/6" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 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 inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Volume VI: The Fifth Death</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Authored by fezcode</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div></div><div class="max-w-5xl mx-auto" style="opacity:0;transform:translateY(2.14509px)"><div class="flex items-center gap-4 mb-8"><div class="h-px w-16 bg-dnd-gold/40"></div><span class="font-mono text-xs text-dnd-gold uppercase tracking-[0.4em]">Index of Tomes</span><div class="h-px flex-grow bg-dnd-gold/40"></div></div><div class="space-y-6"><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 01</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume I: The Streets of Thornus</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 02</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume II: The Cost of Sin</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 03</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume III: The RedLink Arc</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 04</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume IV: The Resistance</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 05</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume V: The Black Ragnarok</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div><div class="relative group"><div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full"></div><div class="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl"><button class="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"><div class="flex items-center gap-6"><div class="w-12 h-12 rounded-full border border-dnd-gold/30 flex items-center justify-center bg-black/40 text-dnd-gold"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div><span class="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.2em] opacity-70">Volume 06</span><h3 class="text-2xl md:text-3xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors mt-1">Volume VI: The Fifth Death</h3></div></div><div class="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></div></button></div></div></div></div></section></div></main><footer class="relative mt-12 md:mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-12 md:py-16 px-6 text-white"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center text-center md:text-left"><div class="space-y-4"><div class="flex justify-center md:justify-start"><span class="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">S & F</span></div><p class="font-arvo text-[10px] uppercase tracking-[0.4em] text-white/70">From Serfs and Frauds</p></div><div class="flex flex-col items-center gap-4 text-white"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg" class="opacity-60"><path d="M200,176H104s8,6,8,16a24,24,0,0,1-48,0V64A24,24,0,0,0,40,40H176a24,24,0,0,1,24,24Z" opacity="0.2"></path><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"></path></svg><p class="font-arvo italic text-sm text-white max-w-xs text-center leading-relaxed">"Every chronicle is a living memory of those who braved the dark."</p></div><div class="space-y-4 md:text-right"><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Digital Archive Kernel // v0.8.7</p><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Wallpaper Source // <span class="text-white font-bold">Muhammad Haikal Sjukri</span></p><div class="h-px w-12 bg-dnd-gold ml-auto opacity-50"></div><p class="font-arvo text-[10px] uppercase tracking-[0.2em] text-white">© 2026 Archives of the Realm</p></div></div></footer></div><div class="fixed inset-0 pointer-events-none z-10 shadow-[inset_0_0_150px_rgba(0,0,0,0.9)]"></div></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width:60px;transform:translateX(93.6825vw)"><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(-2.51481px) rotate(-4.71017deg)"><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.3472px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.652799px)"></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>