*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#ece2c9;--cream-dim:#c8bca0;
  --soot:#0c0a08;--soot-2:#141210;--soot-3:#1c1916;
  --ember-glow:#d47a2e;
  --heroes:#d4741e;--heroes-glow:#ff9a3d;
  --chronicles:#a17b5a;--chronicles-glow:#c99672;
  --runner:#e83434;--runner-glow:#ff5555;
  --hair:#2a2520;--hair-2:#3a3530;
  --text:#e8ddc9;--text-dim:#a89c86;--text-faint:#6d655a;
}
html,body{background:#07060a;color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* NAV — sized for 24"+ desktop readability. Cinzel needs more weight than
   the original handoff's 10-11px to feel intentional on larger screens. */
nav{position:absolute;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,rgba(12,10,8,0.85) 0%,rgba(12,10,8,0.4) 80%,transparent 100%);backdrop-filter:blur(8px);padding:0 32px;height:72px;display:flex;align-items:center;gap:12px}
.nav-mark{height:46px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55));margin-right:22px}
.nav-wm{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:'Cinzel',serif;font-weight:500;text-transform:uppercase;padding:10px 16px;letter-spacing:2.2px;font-size:14px;color:var(--text-dim);transition:color .25s,transform .25s;border-bottom:1px solid transparent;text-shadow:0 1px 2px rgba(0,0,0,0.6)}
.nav-wm::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.8;box-shadow:0 0 8px currentColor;flex-shrink:0}
.nav-wm.wm-chronicles{color:#a17b5a}
.nav-wm.wm-heroes{color:#7aa368}
.nav-wm.wm-runner{color:#d85050}
.nav-wm:hover{transform:translateY(-1px)}
.nav-wm.wm-chronicles:hover{color:#c99672;border-bottom-color:#a17b5a}
.nav-wm.wm-heroes:hover{color:#9cc087;border-bottom-color:#7aa368}
.nav-wm.wm-runner:hover{color:#ff7070;border-bottom-color:#d85050}
.nav-link{color:var(--text-dim);font-family:'Cinzel',serif;font-size:14px;font-weight:500;padding:10px 16px;letter-spacing:2.2px;text-transform:uppercase;transition:color .2s}
.nav-link:hover{color:var(--cream)}
.nav-spacer{flex:1}
.nav-right{display:flex;align-items:center;gap:16px}
.miniplayer{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;border:1px solid var(--hair-2);border-radius:24px;background:rgba(0,0,0,0.35);color:inherit;text-decoration:none}
.miniplayer-btn{width:26px;height:26px;border-radius:50%;background:var(--cream);color:var(--soot);display:flex;align-items:center;justify-content:center;font-size:11px}
.miniplayer-title{font-family:'Crimson Pro',serif;font-style:italic;font-size:13px;color:var(--text-dim)}
.online{font-family:'Cinzel',serif;font-size:12px;color:var(--text-faint);letter-spacing:1.8px;font-weight:500;text-transform:uppercase;padding-left:16px;border-left:1px solid var(--hair)}
.online .dot{display:inline-block;width:7px;height:7px;background:#4cd964;border-radius:50%;margin-right:7px;vertical-align:middle;box-shadow:0 0 6px rgba(76,217,100,0.6)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--heroes-glow),var(--heroes));border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;color:var(--soot);font-weight:700;font-size:15px;font-family:'Cinzel',serif;text-decoration:none}

/* ATMOSPHERIC BACKGROUND (shared across variants) */
.atmos{position:absolute;inset:0;overflow:hidden;background:#07060a;z-index:0}

/* Hero backdrop — R&R title + moon/cityscape mark. Darkened to sit behind content,
   with a slow parallax drift so it doesn't feel static. */
.atmos-city{position:absolute;inset:-4%;background:url('/assets/brand/hero-bg.jpg') center/cover;filter:brightness(0.28) saturate(0.6) contrast(1.05);opacity:0.65;z-index:0;animation:bg-drift 28s ease-in-out infinite alternate;transform-origin:center}
.atmos-city::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(12,10,8,0) 25%,rgba(12,10,8,0.5) 70%,rgba(7,6,10,0.92) 95%,#07060a 100%)}

/* Former logo-bloom layer — hero-bg already contains the title word-mark,
   so a second overlay would double it up. Kept as an empty div for markup
   compatibility; it now only exists to preserve DOM order. */
.atmos-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
@keyframes bg-drift{0%{transform:scale(1.0) translate(0,0)}100%{transform:scale(1.04) translate(-1%,-1.2%)}}
.atmos-smoke{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 85%,rgba(212,122,46,0.22) 0%,rgba(212,122,46,0.05) 40%,transparent 70%);pointer-events:none;mix-blend-mode:screen;animation:smoke-pulse 9s ease-in-out infinite alternate}
@keyframes smoke-pulse{0%{opacity:0.7;transform:translateY(2%) scale(1)}100%{opacity:1;transform:translateY(-1%) scale(1.08)}}
.atmos-grain{position:absolute;inset:-50%;pointer-events:none;opacity:0.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain-shift 1.2s steps(5) infinite}
@keyframes grain-shift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}
.atmos-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atmos-embers span{position:absolute;bottom:-10px;width:3px;height:3px;background:#ffb366;border-radius:50%;box-shadow:0 0 8px 2px rgba(255,160,60,0.5);opacity:0;animation:ember-rise linear infinite}
@keyframes ember-rise{0%{transform:translate(0,0) scale(0.6);opacity:0}15%{opacity:0.9}70%{opacity:0.7}100%{transform:translate(var(--drift,20px),-110vh) scale(1.1);opacity:0}}
.atmos-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 35%,rgba(0,0,0,0.35) 75%,rgba(0,0,0,0.75) 100%);pointer-events:none}

/* HERO COPY */
.hero-eyebrow{font-family:'Cinzel',serif;font-size:14px;color:var(--ember-glow);letter-spacing:4.5px;font-weight:500;text-transform:uppercase;text-shadow:0 0 18px rgba(212,122,46,0.5)}
.hero-tag{font-family:'Crimson Pro',serif;font-style:italic;font-size:30px;color:var(--cream-dim);letter-spacing:0.2px;line-height:1.4;text-shadow:0 2px 14px rgba(0,0,0,0.9)}

/* PRODUCT ACCENT VARS */
.heroes-color{color:var(--heroes-glow)}
.chronicles-color{color:var(--chronicles-glow)}
.runner-color{color:var(--runner-glow)}