:root{
  --ink:#080605;
  --ember:#d9aa4a;
  --gold:#f7d982;
  --parchment:#fff6e8;
  --muted:#d9cab2;
  --panel:rgba(255,255,255,.07);
  --line:rgba(217,170,74,.34);
}

*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0%,rgba(217,170,74,.12),transparent 32%),linear-gradient(180deg,#100b08 0%,#070504 45%,#0d0907 100%);color:var(--parchment);font-family:Georgia,"Times New Roman",serif}
.hero{min-height:82vh;background:linear-gradient(90deg,rgba(7,5,4,.96),rgba(7,5,4,.48)),url('/assets/the-war-of-light-and-shadow-definitive/war-light-shadow-hero.jpg') center/cover;display:flex;align-items:center;padding:8% 6%}
.hero-content{max-width:980px;padding:38px 0;text-shadow:0 4px 22px rgba(0,0,0,.8)}
.kicker{color:var(--ember);font-family:Arial,sans-serif;font-weight:900;letter-spacing:3px;text-transform:uppercase}
h1{font-size:clamp(42px,7vw,78px);line-height:.95;margin:10px 0;color:var(--gold)}
h2{font-size:clamp(34px,5vw,60px);color:var(--gold);margin:0 0 18px}
.hero p,.lead,.next p{font-size:19px;color:#eadcc1;line-height:1.65}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;text-decoration:none;background:linear-gradient(135deg,var(--gold),var(--ember));color:#080504;font-family:Arial,sans-serif;font-weight:900;padding:14px 22px;border-radius:999px}
.btn.secondary{background:rgba(8,5,4,.38);color:var(--parchment);border:1px solid rgba(217,170,74,.45)}
.intro,.next{padding:90px 6% 35px;max-width:1280px;margin:auto}
.cover-scene{max-width:1320px;margin:20px auto 40px;padding:0 6%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:32px;align-items:center}
.cover-scene img,.scene-card img{display:block;width:100%;height:auto;object-fit:contain;background:#070504}
.cover-scene img{border:1px solid var(--line);box-shadow:0 28px 90px rgba(0,0,0,.5)}
.cards{padding:35px 6% 100px;max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:34px}
.scene-card{background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.scene-content-card{padding:28px}
.scene-content-card span{display:inline-block;color:var(--ember);font-family:Arial,sans-serif;font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.scene-content-card h3,.next h3{color:var(--gold);margin:0 0 8px;font-size:27px}
.sub,.next-subtitle{color:var(--ember)!important;font-weight:800}
.scene-content-card p{color:#cbbda9;line-height:1.65;font-size:16px}
.profile-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0 0}
.profile-grid p{margin:0;background:rgba(255,255,255,.05);padding:10px;border-radius:8px;color:#e8d9bd;font-size:14px}
b{color:var(--gold)}
.next{border-top:1px solid rgba(217,170,74,.25);padding-bottom:100px}
@media(max-width:800px){
  .cover-scene{grid-template-columns:1fr;padding:0 5%;gap:22px}
}
@media(max-width:700px){
  .cards{grid-template-columns:1fr;padding:25px 5% 80px}
  .hero{padding:20% 5%;align-items:flex-end}
  .hero-content{padding:28px 0}
  .scene-content-card{padding:22px}
}