:root {
  color-scheme: dark;
  --ink: #070809;
  --ink-soft: #0d0f10;
  --panel: #111315;
  --panel-raised: #17191b;
  --line: rgba(197, 151, 79, .24);
  --line-bright: rgba(224, 177, 98, .58);
  --gold: #d8aa5a;
  --gold-pale: #f0d39b;
  --red: #943c34;
  --red-bright: #c65d51;
  --text: #eee7dd;
  --muted: #9f9a92;
  --quiet: #6f6c67;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--text); }
body.landing-page { overflow-x: hidden; }
body.lore-open { overflow:hidden; }
a { color: inherit; }
button, input { font: inherit; }
img { max-width: 100%; }
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }

.page-grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.cursor-glow { position: fixed; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(142,62,50,.13), transparent 68%); transform: translate(-50%,-50%); pointer-events: none; z-index: 0; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 88px; padding: 0 clamp(22px,4.5vw,72px); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, height .4s ease;
}
.site-header.is-scrolled { height: 72px; background: rgba(7,8,9,.84); border-color: rgba(216,170,90,.15); backdrop-filter: blur(18px); }
.brand-switcher { position: relative; width: 184px; height: 52px; display: block; text-decoration: none; }
.brand-lockup { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; }
.brand-lockup > img, .ghast-mark { width: 46px; height: 46px; flex: 0 0 46px; }
.brand-lockup > img { border-radius: 50%; }
.ghast-mark { display: grid; place-items: center; border: 1px solid rgba(216,170,90,.36); border-radius: 50%; background: #e7bd70; }
.ghast-mark img { width: 29px; filter: brightness(0); }
.brand-lockup small, .brand-lockup strong { display: block; line-height: .9; text-transform: uppercase; }
.brand-lockup small { font: 600 10px/1 var(--sans); letter-spacing: .32em; color: var(--gold); }
.brand-lockup strong { margin-top: 7px; font: 600 20px/.9 var(--serif); letter-spacing: .08em; }
.brand-dungeon { animation: logo-dungeon 10s ease-in-out infinite; }
.brand-ghast { animation: logo-ghast 10s ease-in-out infinite; }
@keyframes logo-dungeon { 0%,42% { opacity:1; transform:translateY(0) } 50%,92% { opacity:0; transform:translateY(3px) } 100% { opacity:1 } }
@keyframes logo-ghast { 0%,42% { opacity:0; transform:translateY(-3px) } 50%,92% { opacity:1; transform:translateY(0) } 100% { opacity:0 } }

.site-nav { display: flex; align-items: center; gap: clamp(16px,2vw,32px); }
.site-nav a { position: relative; color: #aaa49b; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .25s ease; }
.site-nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--gold); transition:right .3s ease; }
.site-nav a:hover { color: #f1e5d4; }
.site-nav a:hover::after { right: 0; }
.site-nav .nav-cta { padding: 13px 17px; border: 1px solid rgba(216,170,90,.44); color: var(--gold-pale); background: rgba(43,31,16,.45); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: rgba(10,11,12,.75); cursor:pointer; }
.nav-toggle span { display:block; width:18px; height:1px; margin:5px auto; background:var(--gold-pale); transition:transform .25s ease, opacity .2s ease; }

.hero { position: relative; z-index: 1; min-height: 100svh; padding: 120px clamp(22px,6vw,96px) 80px; display: grid; grid-template-columns: minmax(420px,1.12fr) minmax(390px,.88fr); align-items: center; gap: clamp(24px,4vw,70px); overflow: hidden; isolation: isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-4; background: radial-gradient(circle at 26% 46%, rgba(122,51,42,.25), transparent 29%), radial-gradient(circle at 72% 42%, rgba(185,130,59,.09), transparent 32%), linear-gradient(120deg,#070809 0%,#0c0d0e 48%,#070809 100%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-3; background: linear-gradient(90deg,rgba(7,8,9,.05),rgba(7,8,9,.32)), repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.018) 12.5%); }
.hero-aura { position:absolute; border:1px solid rgba(216,170,90,.08); border-radius:50%; z-index:-1; }
.hero-aura-one { width:50vw; aspect-ratio:1; left:-22vw; top:20%; }
.hero-aura-two { width:34vw; aspect-ratio:1; right:-20vw; bottom:-18vw; }

.hero-orbit-wrap { position:relative; width:min(45vw,650px); aspect-ratio:1; margin-inline:auto; display:grid; place-items:center; order:2; }
.hero-orbit-wrap::before, .hero-orbit-wrap::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero-orbit-wrap::before { inset:10%; border:1px solid rgba(216,170,90,.28); box-shadow:0 0 90px rgba(161,93,47,.12), inset 0 0 70px rgba(123,53,43,.1); }
.hero-orbit-wrap::after { inset:22%; border:1px dashed rgba(216,170,90,.2); animation:spin-reverse 54s linear infinite; }
.orbit-runes { position:absolute; inset:4%; border:1px solid rgba(216,170,90,.08); border-radius:50%; }
.orbit-runes::before, .orbit-runes::after { content:"✦"; position:absolute; left:50%; color:var(--gold); font-size:12px; opacity:.65; }
.orbit-runes::before { top:-7px; }.orbit-runes::after { bottom:-7px; }
.character-orbit { position:absolute; inset:50%; width:0; height:0; animation:spin 76s linear infinite; }
.orbit-node { --angle: calc(var(--i) * 40deg); position:absolute; width:0; height:0; margin:0; transform:rotate(var(--angle)) translateY(clamp(-285px,-19.6vw,-200px)); }
.portrait-frame { display:block; width:clamp(68px,6vw,96px); height:clamp(68px,6vw,96px); translate:-50% -50%; transform:rotate(calc(var(--angle) * -1)); border-radius:50%; padding:3px; background:linear-gradient(145deg,var(--gold-pale),#563720 55%,#141516); box-shadow:0 12px 28px rgba(0,0,0,.62),0 0 0 5px rgba(13,14,15,.78); }
.portrait-gyro { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; animation:spin-reverse 76s linear infinite; }
.portrait-gyro img { width:100%; height:100%; object-fit:cover; filter:saturate(.76) contrast(1.08); transition:filter .3s ease, transform .3s ease; }
.portrait-frame:hover .portrait-gyro img { filter:saturate(1.05) contrast(1.03); transform:scale(1.08); }
.orbit-core { position:relative; width:clamp(145px,14vw,210px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#141517 0 54%,#090a0b 55%); border:1px solid rgba(216,170,90,.55); box-shadow:0 0 0 12px rgba(9,10,11,.72),0 0 0 13px rgba(216,170,90,.13),0 24px 80px rgba(0,0,0,.68); }
.orbit-core img { width:78%; border-radius:50%; position:relative; z-index:2; }
.core-echo { position:absolute; inset:-20%; border:1px solid rgba(189,70,57,.2); border-radius:50%; animation:pulse-ring 4s ease-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spin-reverse { to { transform:rotate(-360deg); } }
@keyframes pulse-ring { 0% { transform:scale(.78); opacity:0 } 35% { opacity:.7 } 100% { transform:scale(1.15); opacity:0 } }

.hero-copy { position:relative; z-index:3; max-width:680px; order:1; }
.eyebrow { display:flex; align-items:center; gap:11px; margin:0 0 19px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.27em; text-transform:uppercase; }
.eyebrow span { width:38px; height:1px; background:linear-gradient(90deg,var(--red-bright),var(--gold)); }
.hero h1, .world-intro h2 { margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.045em; }
.hero h1 { max-width:760px; font-size:clamp(3.4rem,6.7vw,7.4rem); line-height:.82; text-shadow:0 12px 50px rgba(0,0,0,.42); }
.hero h1 em, .world-intro h2 em { color:var(--gold); font-weight:400; }
.hero h1 em { display:inline-block; margin-left:clamp(22px,4vw,70px); white-space:nowrap; }
.hero-lede { max-width:610px; margin:30px 0 0; color:#a8a199; font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.24rem); line-height:1.72; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:34px; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:17px; padding:0 22px; text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.button-primary { border:1px solid #a6783d; background:linear-gradient(110deg,#312215,#1e1610); color:#f3dfbd; box-shadow:0 13px 36px rgba(0,0,0,.25); }
.button-primary span { color:var(--gold); font-size:16px; }
.text-link { color:#aaa198; text-decoration:none; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.text-link span { margin-left:8px; color:var(--gold); }
.hero-stats { display:flex; gap:clamp(24px,3.5vw,58px); margin:46px 0 0; }
.hero-stats div { display:grid; grid-template-columns:auto auto; align-items:end; gap:9px; }
.hero-stats dt { color:var(--gold-pale); font:500 24px/1 var(--serif); }
.hero-stats dd { max-width:70px; margin:0; color:#716d67; font-size:8px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue { position:absolute; left:clamp(22px,6vw,96px); bottom:25px; display:flex; align-items:center; gap:13px; color:#66635f; text-decoration:none; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.scroll-cue i { width:48px; height:1px; background:#514b42; position:relative; overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation:scroll-line 2.2s ease-in-out infinite; }
@keyframes scroll-line { 55%,100% { transform:translateX(100%); } }

.world-intro { position:relative; z-index:2; min-height:76vh; padding:clamp(100px,12vw,180px) clamp(22px,8vw,128px); display:grid; grid-template-columns:80px minmax(320px,.9fr) minmax(300px,.75fr); gap:clamp(25px,5vw,84px); align-items:start; background:linear-gradient(180deg,#090a0b,#0e0f10); border-top:1px solid rgba(216,170,90,.12); }
.section-number { color:rgba(216,170,90,.5); font:italic 18px/1 var(--serif); padding-top:9px; }
.section-number::after { content:""; display:block; width:1px; height:150px; margin:20px auto 0; background:linear-gradient(var(--gold),transparent); opacity:.35; }
.section-heading h2 { font-size:clamp(3rem,5vw,5.8rem); line-height:.93; }
.intro-copy { padding-top:43px; }
.intro-copy p { margin:0 0 22px; color:#98938c; font:400 clamp(1rem,1.25vw,1.15rem)/1.8 var(--serif); }
.intro-copy .dropcap::first-letter { float:left; margin:7px 10px 0 0; color:var(--gold); font:500 4.2rem/.72 var(--serif); }

.progression-band { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid rgba(216,170,90,.14); background:#090a0b; }
.progression-band article { min-height:220px; padding:42px clamp(20px,3vw,48px); border-right:1px solid rgba(216,170,90,.12); }
.progression-band article:last-child { border-right:0; }
.progression-band span { display:block; color:rgba(216,170,90,.56); font:italic 12px var(--serif); }
.progression-band strong { display:block; margin-top:22px; color:#e7ded2; font:500 clamp(1.5rem,2vw,2rem) var(--serif); }
.progression-band p { margin:11px 0 0; color:#77736e; font-size:12px; line-height:1.75; }

.classes-section { position:relative; z-index:2; padding:clamp(105px,12vw,180px) clamp(22px,6.5vw,105px); background:radial-gradient(circle at 50% 34%,rgba(126,80,41,.1),transparent 35%),#0b0c0d; overflow:hidden; }
.classes-section::before { content:"NINE"; position:absolute; left:50%; top:60px; transform:translateX(-50%); color:rgba(255,255,255,.015); font:700 clamp(9rem,24vw,25rem)/1 var(--serif); letter-spacing:.08em; pointer-events:none; }
.section-kicker { position:relative; display:flex; align-items:center; gap:16px; color:#6d6963; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.section-kicker span { color:var(--gold); font:italic 14px var(--serif); }.section-kicker i { width:70px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }.section-kicker p { margin:0; }
.centered-heading { max-width:800px; margin:60px auto 0; text-align:center; position:relative; }
.centered-heading .eyebrow { justify-content:center; }.centered-heading h2,.dungeon-copy h2,.raid-heading h2,.updates-copy h2,.play-section h2 { margin:0; color:#ece4d8; font:500 clamp(3rem,5.6vw,6.1rem)/.93 var(--serif); letter-spacing:-.045em; }
.centered-heading h2 em,.dungeon-copy h2 em { color:var(--gold); font-weight:400; }.centered-heading > p:last-child { max-width:620px; margin:27px auto 0; color:#8e8982; font:400 1.05rem/1.75 var(--serif); }
.class-gallery { position:relative; margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(216,170,90,.15); border:1px solid rgba(216,170,90,.15); }
.class-card { position:relative; min-height:370px; padding:0; overflow:hidden; background:#101112; isolation:isolate; cursor:pointer; outline:none; }
.class-card::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(6,7,8,.34),transparent 46%),linear-gradient(transparent 42%,rgba(7,8,9,.9) 76%,#08090a); }
.class-card::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; z-index:4; background:var(--class); transition:right .5s ease; pointer-events:none; }
.class-card:hover::after,.class-card:has(.class-card-open:focus-visible)::after { right:0; }.class-card > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 22%; filter:saturate(.72) contrast(1.05) brightness(.8); transform:scale(1.01); transition:transform .65s ease,filter .65s ease,opacity .2s ease; }
.class-card:hover > img,.class-card:has(.class-card-open:focus-visible) > img { transform:scale(1.045); filter:saturate(.96) contrast(1.03) brightness(.9); }
.class-card:has(.class-card-open:focus-visible) { box-shadow:inset 0 0 0 2px var(--class); }
.class-card-open { position:absolute; inset:0; z-index:2; width:100%; border:0; background:transparent; cursor:pointer; }
.class-card-open:focus-visible { outline:2px solid var(--class); outline-offset:-4px; }
.class-card > div { position:absolute; inset:auto 25px 24px; z-index:3; pointer-events:none; }.class-card span { color:var(--class); font-size:8px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }.class-card h3 { margin:8px 0 5px; color:#f0e7da; font:500 clamp(1.75rem,2.5vw,2.55rem)/1 var(--serif); }.class-card p { margin:0; color:#7e7972; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.class-gender-toggle { position:absolute; top:16px; right:16px; z-index:5; display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid color-mix(in srgb,var(--class) 58%,rgba(255,255,255,.18)); border-radius:50%; background:rgba(7,8,9,.78); color:#eee5d8; box-shadow:0 8px 24px rgba(0,0,0,.38); backdrop-filter:blur(8px); cursor:pointer; transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease; }
.class-gender-toggle span { color:inherit; font:600 22px/1 var(--serif); letter-spacing:0; text-transform:none; }
.class-gender-toggle:hover,.class-gender-toggle:focus-visible { transform:translateY(-2px); border-color:var(--class); background:color-mix(in srgb,var(--class) 20%,rgba(7,8,9,.9)); color:#fff; outline:none; }
.class-card[data-gender="female"] .class-gender-toggle { color:var(--class); }
.class-card .class-card-invite { display:block; max-height:0; margin-top:0; overflow:hidden; opacity:0; color:#cfc4b5; transition:max-height .35s ease,margin .35s ease,opacity .35s ease; }.class-card:hover .class-card-invite,.class-card:focus-visible .class-card-invite { max-height:20px; margin-top:13px; opacity:1; }.class-card-invite b { color:var(--class); font-size:11px; }

.class-lore { position:fixed; inset:0; z-index:130; pointer-events:none; visibility:hidden; transition:visibility 0s linear .55s; }
.class-lore.is-open { pointer-events:auto; visibility:visible; transition-delay:0s; }
.class-lore-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(3,4,5,.78); opacity:0; backdrop-filter:blur(9px); transition:opacity .48s ease; }
.class-lore.is-open .class-lore-backdrop { opacity:1; }
.class-lore-sheet { --lore:#d8aa5a; position:absolute; inset:auto 0 0; height:min(84dvh,790px); display:grid; grid-template-columns:minmax(340px,.82fr) minmax(460px,1.18fr); overflow:hidden; border-top:1px solid color-mix(in srgb,var(--lore) 68%,transparent); background:#0b0c0d; box-shadow:0 -35px 100px rgba(0,0,0,.65); transform:translateY(102%); transition:transform .58s cubic-bezier(.2,.8,.2,1); outline:none; }
.class-lore.is-open .class-lore-sheet { transform:translateY(0); }
.class-lore-close { position:absolute; top:21px; right:24px; z-index:4; width:45px; height:45px; border:1px solid rgba(255,255,255,.17); border-radius:50%; background:rgba(8,9,10,.74); color:#ddd3c5; cursor:pointer; font:300 28px/1 var(--sans); transition:border-color .25s ease,color .25s ease,transform .25s ease; }.class-lore-close:hover,.class-lore-close:focus-visible { border-color:var(--lore); color:var(--lore); transform:rotate(8deg); outline:none; }
.class-lore-art { position:relative; overflow:hidden; background:#08090a; }.class-lore-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,#0b0c0d),linear-gradient(0deg,rgba(7,8,9,.72),transparent 48%); }.class-lore-art img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.83) contrast(1.05) brightness(.8); transform:scale(1.025); }
.class-lore-copy { overflow:auto; overscroll-behavior:contain; padding:clamp(64px,7vw,105px) clamp(38px,7vw,110px) 58px; scrollbar-color:var(--lore) #111; }.class-lore-index { margin:0 0 21px; color:#77716a; font-size:8px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }.class-lore-index span { color:var(--lore); font:italic 15px var(--serif); }.class-lore-role { margin:0 0 10px; color:var(--lore); font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }.class-lore-copy h3 { margin:0; color:#f0e7da; font:500 clamp(3rem,5vw,5.4rem)/.9 var(--serif); letter-spacing:-.035em; }.class-lore-rule { width:100%; height:1px; margin:31px 0; background:linear-gradient(90deg,var(--lore),transparent); opacity:.55; }.class-lore-story { max-width:760px; display:grid; gap:18px; margin:0 0 18px; }.class-lore-story p { margin:0; color:#aaa39a; font:400 clamp(.98rem,1.2vw,1.13rem)/1.78 var(--serif); }.class-lore-copy blockquote { max-width:720px; margin:31px 0 34px; padding:3px 0 3px 23px; border-left:1px solid var(--lore); color:#ded2c2; font:italic 1.15rem/1.6 var(--serif); }.class-lore-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0; padding:1px; background:rgba(255,255,255,.08); }.class-lore-facts div { min-height:84px; padding:17px; background:#101214; }.class-lore-facts dt { color:#625e59; font-size:7px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }.class-lore-facts dd { margin:9px 0 0; color:#d8cec0; font:500 14px/1.35 var(--serif); }

.dungeon-section { position:relative; z-index:2; min-height:100vh; padding:clamp(100px,12vw,180px) clamp(22px,6.5vw,105px); display:grid; grid-template-columns:minmax(420px,.95fr) minmax(420px,1.05fr); align-items:center; gap:clamp(50px,8vw,130px); overflow:hidden; background:linear-gradient(110deg,rgba(8,9,10,.97),rgba(12,13,14,.9)),url('/media/scenes/dungeon-stone.png') center/440px repeat; border-top:1px solid rgba(109,147,118,.13); }
.dungeon-section::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 25% 52%,rgba(67,113,83,.13),transparent 29%),linear-gradient(90deg,transparent,rgba(0,0,0,.3)); }
.dungeon-orbit-wrap { position:relative; width:min(44vw,620px); aspect-ratio:1; display:grid; place-items:center; }
.dungeon-orbit-wrap::before,.dungeon-orbit-wrap::after { content:""; position:absolute; border-radius:50%; }.dungeon-orbit-wrap::before { inset:7%; border:1px solid rgba(111,159,123,.25); box-shadow:inset 0 0 80px rgba(63,113,74,.08),0 0 90px rgba(0,0,0,.42); }.dungeon-orbit-wrap::after { inset:18%; border:1px dashed rgba(174,137,78,.17); animation:spin 57s linear infinite; }
.dungeon-orbit-lines { position:absolute; inset:1%; border:1px solid rgba(255,255,255,.035); border-radius:50%; }.dungeon-orbit-lines::after { content:""; position:absolute; inset:14%; border:1px solid rgba(255,255,255,.025); border-radius:50%; }
.enemy-orbit { position:absolute; inset:50%; width:0; height:0; animation:spin-reverse 68s linear infinite; }
.enemy-node { --angle:calc(var(--i) * 36deg); position:absolute; width:0; height:0; margin:0; transform:rotate(var(--angle)) translateY(clamp(-270px,-18.2vw,-188px)); }
.enemy-frame { display:block; width:clamp(62px,5.4vw,88px); height:clamp(62px,5.4vw,88px); translate:-50% -50%; padding:3px; transform:rotate(calc(var(--angle) * -1)); border-radius:18px; background:linear-gradient(145deg,#8ba18c,#3e593f 48%,#161817); box-shadow:0 13px 27px rgba(0,0,0,.58),0 0 0 5px rgba(9,10,10,.77); }
.enemy-gyro { display:block; width:100%; height:100%; border-radius:15px; overflow:hidden; animation:spin 68s linear infinite; }.enemy-gyro img { width:100%; height:100%; object-fit:cover; filter:saturate(.63) contrast(1.12) brightness(.8); transition:.3s ease; }.enemy-frame:hover img { filter:saturate(1) brightness(.95); transform:scale(1.08); }
.dungeon-core { width:clamp(140px,13vw,196px); aspect-ratio:1; padding:10px; border:1px solid rgba(120,157,128,.48); border-radius:50%; background:#0b0d0c; box-shadow:0 0 0 12px rgba(8,9,9,.76),0 0 0 13px rgba(120,157,128,.1),0 26px 70px rgba(0,0,0,.58); }.dungeon-core img { width:100%; height:100%; border-radius:50%; object-fit:cover; filter:saturate(.7) brightness(.78); }
.dungeon-copy { position:relative; max-width:700px; }.section-kicker.align-right { justify-content:flex-end; margin-bottom:70px; }.dungeon-copy h2 { font-size:clamp(3.4rem,5.4vw,6rem); }.dungeon-lede { margin:30px 0 0; max-width:630px; color:#96918a; font:400 1.08rem/1.8 var(--serif); }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:40px; padding:1px; background:rgba(216,170,90,.15); }.mode-grid article { min-height:200px; padding:27px; background:rgba(13,15,14,.96); }.mode-grid span { color:#789980; font-size:8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.mode-grid h3 { margin:10px 0 10px; font:500 1.8rem var(--serif); }.mode-grid p { margin:0; color:#7f7a73; font-size:12px; line-height:1.72; }

.raids-section { position:relative; z-index:2; padding:clamp(105px,12vw,180px) clamp(22px,6.5vw,105px); background:#090a0b; overflow:hidden; }
.raid-backdrop { position:absolute; inset:0; opacity:.055; background:url('/media/scenes/citadel-ascent.png') center/cover no-repeat; filter:grayscale(1) contrast(1.2); }.raid-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#090a0b 0%,transparent 35%,#090a0b 95%),linear-gradient(90deg,#090a0b,transparent 45%,#090a0b); }
.raid-heading { position:relative; margin-top:70px; display:grid; grid-template-columns:1.1fr .65fr; gap:clamp(45px,8vw,135px); align-items:end; }.raid-heading h2 { font-size:clamp(3.3rem,5.4vw,6rem); }.raid-heading > p { margin:0 0 7px; color:#96918a; font:400 1.08rem/1.8 var(--serif); }
.boss-ledger { position:relative; min-width:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:75px; padding:1px; background:rgba(216,170,90,.14); }.boss-ledger article { width:100%; min-width:0; min-height:350px; position:relative; overflow:hidden; padding:28px; background:#0e0f10; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; cursor:pointer; outline:none; }.boss-ledger article::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 35%,rgba(8,9,10,.2) 53%,rgba(8,9,10,.92) 82%,#08090a); }.boss-ledger article::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--boss); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }.boss-ledger article:hover::after,.boss-ledger article:focus-visible::after { transform:scaleX(1); }.boss-ledger article:focus-visible { box-shadow:inset 0 0 0 2px var(--boss); }.boss-ledger img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center center; filter:saturate(.72) contrast(1.08) brightness(.7); transition:.6s ease; }.boss-ledger article:hover img,.boss-ledger article:focus-visible img { transform:scale(1.035); filter:saturate(.95) brightness(.84); }.boss-ledger span { color:var(--boss); font:italic 12px var(--serif); }.boss-ledger h3 { margin:10px 0 2px; color:#efe5d8; font:500 2rem/1 var(--serif); text-shadow:0 2px 18px #000; }.boss-ledger p { margin:5px 0 0; color:#a9a198; font-size:10px; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 2px 12px #000; }
.boss-card-invite { display:block; max-height:0; margin-top:0; overflow:hidden; opacity:0; color:#cfc4b5; font-size:8px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition:max-height .35s ease,margin .35s ease,opacity .35s ease; }.boss-ledger article:hover .boss-card-invite,.boss-ledger article:focus-visible .boss-card-invite { max-height:20px; margin-top:13px; opacity:1; }.boss-card-invite b { color:var(--boss); font-size:11px; }
.boss-lore-sheet { --lore:#c75f4f; }.boss-lore-art img { object-position:center; }

.updates-section { position:relative; z-index:2; padding:clamp(100px,11vw,165px) clamp(22px,10vw,160px); display:grid; grid-template-columns:1fr minmax(380px,.72fr); align-items:center; gap:clamp(50px,9vw,145px); background:radial-gradient(circle at 75% 50%,rgba(138,70,49,.14),transparent 28%),#0c0d0e; border-top:1px solid rgba(216,170,90,.12); }.updates-copy h2 { font-size:clamp(3.1rem,5vw,5.5rem); }.updates-copy > p:last-child { max-width:630px; margin:29px 0 0; color:#8f8a83; font:400 1.06rem/1.78 var(--serif); }
.release-card { border:1px solid rgba(216,170,90,.28); padding:clamp(25px,4vw,48px); background:linear-gradient(135deg,rgba(34,27,20,.87),rgba(13,14,15,.96)); box-shadow:0 32px 80px rgba(0,0,0,.35); }.release-card header { display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(216,170,90,.17); }.release-card header span { color:#8f867a; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.release-card header strong { color:var(--gold); font:500 15px var(--serif); }.release-card h3 { margin:27px 0 17px; font:500 2rem var(--serif); }.release-card ul { padding:0; margin:0; list-style:none; }.release-card li { position:relative; margin:13px 0; padding-left:19px; color:#89847d; font-size:12px; line-height:1.6; }.release-card li::before { content:"✦"; position:absolute; left:0; color:#9c6844; font-size:7px; top:6px; }.release-card > a { display:inline-flex; margin-top:24px; color:var(--gold-pale); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; }.release-card > a span { margin-left:12px; color:var(--gold); }

.play-section { position:relative; z-index:2; min-height:76vh; padding:120px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:radial-gradient(circle at 50% 50%,rgba(141,74,50,.2),transparent 29%),linear-gradient(#090a0b,#070809); }.play-section::before,.play-section::after { content:""; position:absolute; border:1px solid rgba(216,170,90,.1); border-radius:50%; }.play-section::before { width:min(80vw,920px); aspect-ratio:1; }.play-section::after { width:min(56vw,650px); aspect-ratio:1; border-style:dashed; animation:spin 80s linear infinite; }.play-section > * { position:relative; z-index:1; }.play-emblem { width:86px; height:86px; margin-bottom:27px; border:1px solid rgba(216,170,90,.4); border-radius:50%; padding:6px; background:#0b0c0d; box-shadow:0 0 0 8px rgba(216,170,90,.04); }.play-emblem img { border-radius:50%; }.play-section .eyebrow { justify-content:center; }.play-section h2 { font-size:clamp(3.3rem,6.3vw,7rem); }.play-section > p:not(.eyebrow) { max-width:650px; margin:27px auto 0; color:#918c84; font:400 1.08rem/1.78 var(--serif); }.play-actions { display:flex; gap:12px; margin-top:35px; }.button-quiet { border:1px solid rgba(255,255,255,.14); color:#aaa39a; background:rgba(17,18,19,.7); }

.site-footer { position:relative; z-index:2; min-height:210px; padding:48px clamp(22px,6vw,96px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; border-top:1px solid rgba(216,170,90,.14); background:#070809; }.footer-brand { display:flex; align-items:center; gap:14px; text-decoration:none; }.footer-brand img { width:52px; height:52px; border-radius:50%; }.footer-brand strong,.footer-brand small { display:block; }.footer-brand strong { font:500 19px var(--serif); }.footer-brand small { margin-top:5px; color:#6f6b65; font-size:8px; letter-spacing:.14em; text-transform:uppercase; }.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:24px; }.site-footer nav a { color:#88827a; font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; }.site-footer nav a:hover { color:var(--gold); }.site-footer > p { grid-column:1/-1; margin:0; padding-top:24px; border-top:1px solid rgba(255,255,255,.05); color:#55534f; font-size:9px; letter-spacing:.06em; }

body:not(.landing-page) { background:radial-gradient(circle at 75% 0%,rgba(115,44,37,.22),transparent 32rem),linear-gradient(145deg,#0e0f10,var(--ink) 55%); }
.shell { width:min(100% - 32px,860px); margin:0 auto; padding:56px 0 72px; }
.brand { color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.shell h1,.shell h2 { font-family:var(--serif); }
.shell h1 { max-width:720px; margin:12px 0 10px; font-size:clamp(2.35rem,7vw,4.8rem); line-height:.98; font-weight:600; }
.shell h2 { margin:34px 0 9px; font-size:1.4rem; color:#e4d9ca; }
.shell p,.shell li { color:var(--muted); line-height:1.7; }
.lede { max-width:650px; font-size:1.06rem; }.meta { color:var(--quiet); font-size:.82rem; }
.panel { margin-top:28px; padding:clamp(20px,5vw,36px); border:1px solid var(--line); background:rgba(17,19,21,.94); box-shadow:0 18px 60px rgba(0,0,0,.32); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:28px; }
.card { display:block; min-height:160px; padding:22px; border:1px solid #34312d; background:var(--panel); text-decoration:none; }
.card:hover { border-color:#745d3b; background:var(--panel-raised); }.card strong { display:block; color:var(--text); font:600 1.24rem var(--serif); }.card span { display:block; margin-top:10px; color:var(--muted); line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.actions button,.actions .button { min-height:46px; padding:0 18px; border:1px solid #80643b; background:#2a2115; color:#f5e7c8; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.actions button.secondary,.actions .button.secondary { border-color:#3b3833; background:#171819; color:#aaa49c; }.actions button.danger { border-color:#8b3933; background:#3b1715; color:#f1d2cf; }.actions button:disabled { cursor:not-allowed; opacity:.45; }
.shell label { display:block; margin-top:22px; color:#c98278; font-size:.72rem; font-weight:800; letter-spacing:.12em; }.shell input { width:100%; height:48px; margin-top:8px; padding:0 13px; border:1px solid #713a33; outline:none; background:#0f0d0d; color:#f1d2cf; font-size:1rem; font-weight:800; letter-spacing:.14em; }.shell input:focus { border-color:#d9685f; }
.warning { padding:15px; border:1px solid #713a33; background:#211110; color:#cda6a2; }.status { min-height:24px; margin-top:14px; color:var(--gold); }.status.error { color:#e27a70; }.hidden { display:none!important; }.footer { margin-top:44px; padding-top:18px; border-top:1px solid #292724; color:var(--quiet); font-size:.78rem; }

@media (max-width: 980px) {
  .brand-switcher { position:relative; z-index:3; }
  .site-nav { position:fixed; inset:0; z-index:1; width:100%; height:100dvh; padding:110px 30px 40px; overflow-y:auto; overscroll-behavior:contain; background:rgba(6,7,8,.985); display:grid; align-content:start; gap:0; visibility:hidden; opacity:0; pointer-events:none; transform:translateX(100%); transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility 0s linear .42s; }
  .site-nav.is-open { visibility:visible; opacity:1; pointer-events:auto; transform:translateX(0); transition-delay:0s; }
  .site-nav a { padding:18px 5px; border-bottom:1px solid rgba(216,170,90,.12); font:500 22px var(--serif); text-transform:none; letter-spacing:.02em; }
  .site-nav .nav-cta { margin-top:20px; justify-self:start; font:700 10px var(--sans); text-transform:uppercase; letter-spacing:.14em; }
  .nav-toggle { display:block; position:relative; z-index:3; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .hero { grid-template-columns:1fr; padding-top:130px; text-align:center; }
  .hero-orbit-wrap { order:1; width:min(78vw,620px); }.hero-copy { order:2; margin:15px auto 0; }.eyebrow,.hero-actions,.hero-stats { justify-content:center; }.hero-lede { margin-inline:auto; }.hero h1 em { margin-left:0; }.scroll-cue { display:none; }
  .orbit-node { transform:rotate(var(--angle)) translateY(clamp(-275px,-34vw,-158px)); }
  .world-intro { grid-template-columns:44px 1fr; }.intro-copy { grid-column:2; padding-top:0; }
  .progression-band { grid-template-columns:1fr 1fr; }.progression-band article:nth-child(2) { border-right:0; }.progression-band article:nth-child(-n+2) { border-bottom:1px solid rgba(216,170,90,.12); }
  .class-gallery { grid-template-columns:1fr 1fr; }.class-card { min-height:330px; }
  .class-lore-sheet { grid-template-columns:minmax(280px,.72fr) minmax(400px,1.28fr); }
  .dungeon-section { grid-template-columns:1fr; }.dungeon-orbit-wrap { width:min(80vw,620px); margin-inline:auto; }.enemy-node { transform:rotate(var(--angle)) translateY(clamp(-270px,-35vw,-184px)); }.section-kicker.align-right { justify-content:flex-start; margin-bottom:45px; }
  .raid-heading { grid-template-columns:1fr; }.raid-heading > p { max-width:650px; }.boss-ledger { grid-template-columns:1fr 1fr; }
  .updates-section { grid-template-columns:1fr; }.release-card { max-width:650px; }
}
@media (max-width: 600px) {
  .site-header { height:72px; padding-inline:16px; }.brand-switcher { width:165px; }.brand-lockup > img,.ghast-mark { width:40px;height:40px;flex-basis:40px; }.brand-lockup strong { font-size:17px; }
.hero { padding:98px 16px 64px; gap:28px; }.hero-orbit-wrap { width:min(94vw,460px); }.orbit-node { transform:rotate(var(--angle)) translateY(clamp(-202px,-42vw,-142px)); }.portrait-frame { width:58px;height:58px; }.orbit-core { width:116px; }.hero h1 { font-size:clamp(3rem,15vw,5rem); }.hero h1 em { white-space:normal; }.hero-lede { font-size:.98rem; }.hero-actions { flex-direction:column; }.hero-stats { gap:20px; }.hero-stats div { grid-template-columns:1fr; text-align:center; }.hero-stats dd { max-width:88px; }.world-intro { grid-template-columns:1fr; padding:88px 20px; }.section-number { display:none; }.intro-copy { grid-column:auto; }.section-heading h2 { font-size:clamp(2.75rem,14vw,4rem); }
  .cursor-glow { display:none; }.shell { width:min(100% - 22px,860px); padding-top:34px; }.panel { padding:18px; }.actions { display:grid; }.actions button,.actions .button { width:100%; }
  .progression-band { grid-template-columns:1fr; }.progression-band article { min-height:auto; border-right:0; border-bottom:1px solid rgba(216,170,90,.12); }.progression-band article:last-child { border-bottom:0; }
  .classes-section,.dungeon-section,.raids-section { padding:90px 16px; }.centered-heading { margin-top:45px; }.class-gallery { grid-template-columns:1fr; margin-top:48px; }.class-card { min-height:380px; }
  .class-card .class-card-invite,.boss-card-invite { max-height:20px; margin-top:13px; opacity:1; }.class-lore-sheet { height:min(92dvh,860px); grid-template-columns:1fr; grid-template-rows:32vh minmax(0,1fr); }.class-lore-art::after { background:linear-gradient(0deg,#0b0c0d,transparent 55%); }.class-lore-art img { object-position:center 30%; }.class-lore-copy { padding:32px 22px 42px; }.class-lore-close { top:14px; right:14px; }.class-lore-copy h3 { font-size:clamp(2.65rem,14vw,4.4rem); }.class-lore-facts { grid-template-columns:1fr; }.class-lore-facts div { min-height:auto; }.class-lore-copy blockquote { margin-block:25px; }
.dungeon-orbit-wrap { width:min(94vw,460px); }.enemy-node { transform:rotate(var(--angle)) translateY(clamp(-202px,-42vw,-142px)); }.enemy-frame { width:54px;height:54px;border-radius:13px; }.enemy-gyro { border-radius:10px; }.dungeon-core { width:110px; }.mode-grid { grid-template-columns:1fr; }
.boss-ledger { width:100%; grid-template-columns:minmax(0,1fr); margin-top:48px; overflow:hidden; }.boss-ledger article { width:100%; min-width:0; min-height:380px; aspect-ratio:auto; }.raid-heading { margin-top:50px; }
  .updates-section { padding:90px 20px; grid-template-columns:1fr; }.release-card { padding:25px; }.play-section { padding:100px 20px; }.play-actions { width:100%; flex-direction:column; }.play-actions .button { width:100%; }.site-footer { grid-template-columns:1fr; }.site-footer nav { justify-content:flex-start; gap:18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}