/* ============================================================
   SANCTUARY — Game chapter pages (one per Diablo title)
   Builds on styles.css (cursor, nav, loader, embers, vars).
   ============================================================ */
.gpage { --accent: #c1121f; --accent-rgb: 193,18,31; }

/* ---------- cinematic hero ---------- */
.ghero {
  position: relative; min-height: 100vh; z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(1.5rem,4vw,4rem);
  padding: clamp(6rem,12vh,9rem) clamp(1.4rem,6vw,6rem) 4rem;
  overflow: hidden;
}
.ghero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(var(--accent-rgb), .34), transparent 65%),
    radial-gradient(70% 60% at 10% 100%, rgba(var(--accent-rgb), .14), transparent 60%),
    linear-gradient(180deg, #0c0608, var(--black) 70%);
}
.ghero__body { position: relative; z-index: 2; max-width: 56ch; }
.gnum {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none;
  font-family: var(--decor); font-weight: 900; line-height: .7; font-size: clamp(12rem,30vw,30rem);
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .14);
}
.geyebrow { font-family: var(--display); letter-spacing: .4em; font-size: clamp(.6rem,1.4vw,.8rem); text-transform: uppercase; color: var(--accent); }
.gtitle {
  font-family: var(--decor); font-weight: 900; font-size: clamp(2.6rem,7vw,5.4rem); line-height: .95;
  color: var(--bone); margin: .6rem 0 .2rem; text-shadow: 0 0 40px rgba(var(--accent-rgb), .25);
}
.gtag { font-family: var(--display); font-style: italic; color: var(--ember-soft); font-size: clamp(1.1rem,2.2vw,1.6rem); }
.gmeta { margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; font-family: var(--display); letter-spacing: .2em; font-size: .68rem; text-transform: uppercase; color: var(--bone-dim); }
.gmeta .dot { color: var(--accent); }
.gintro { margin-top: 1.6rem; color: var(--bone-dim); font-weight: 300; font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.8; }
.gcta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.gcta a {
  font-family: var(--display); letter-spacing: .22em; font-size: .74rem; text-transform: uppercase; text-decoration: none; cursor: none;
  color: var(--bone); padding: .85rem 1.5rem; border: 1px solid rgba(var(--accent-rgb), .5);
  position: relative; overflow: hidden; transition: color .3s, border-color .3s;
}
.gcta a span { position: relative; z-index: 1; }
.gcta a::before { content:""; position:absolute; inset:0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.gcta a:hover { color:#fff; border-color: transparent; }
.gcta a:hover::before { transform: scaleX(1); }

.ghero__art {
  position: relative; z-index: 1; justify-self: center;
  width: 100%; max-width: calc(82vh * 0.72); aspect-ratio: 3/4;
  border: 1px solid rgba(216,203,184,.12); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(var(--accent-rgb), .2);
}
.ghero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ghero__art::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(7,6,10,.85)); }

/* ---------- sections ---------- */
.gsec { position: relative; z-index: 5; padding: clamp(4rem,9vh,7rem) clamp(1.4rem,6vw,6rem); border-top: 1px solid rgba(255,90,31,.08); }
.gsec__i { font-family: var(--display); letter-spacing: .4em; font-size: .72rem; text-transform: uppercase; color: var(--accent); display:block; margin-bottom: .7rem; }
.gsec__h { font-family: var(--decor); font-weight: 900; font-size: clamp(1.8rem,4.5vw,3rem); color: var(--bone); margin-bottom: 1.6rem; }
.gstory p { max-width: 68ch; color: var(--bone-dim); font-weight: 300; font-size: 1.08rem; line-height: 1.85; margin-bottom: 1.1rem; }
.gstory p:first-of-type::first-letter { float:left; font-family: var(--decor); font-weight:900; font-size:3.4em; line-height:.66; padding:.04em .12em 0 0; color: var(--accent); }

/* roster of portraits (heroes / villains) */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: clamp(.7rem,1.6vw,1.1rem); }
.gcard { position: relative; display: block; overflow: hidden; text-decoration: none; cursor: none; aspect-ratio: 3/4; border: 1px solid rgba(216,203,184,.1); }
.gcard img { width:100%; height:100%; object-fit: cover; object-position: center top; filter: grayscale(.5) brightness(.78); transition: filter .4s var(--ease), transform .6s var(--ease); }
.gcard__name { position: absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.2rem .5rem .5rem; text-align:center;
  font-family: var(--display); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(0deg, rgba(7,6,10,.92), transparent); }
.gcard:hover { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 26px rgba(var(--accent-rgb), .35); }
.gcard:hover img { filter: grayscale(0) brightness(1); transform: scale(1.05); }

/* expansion callout */
.gexp { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap;
  padding: clamp(1.4rem,3vw,2.2rem); border: 1px solid rgba(var(--accent-rgb), .35);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), transparent); }
.gexp b { font-family: var(--decor); font-weight: 900; font-size: clamp(1.2rem,2.4vw,1.7rem); color: var(--ember-soft); }
.gexp span { color: var(--bone-dim); font-weight: 300; max-width: 60ch; }

/* facts strip */
.gfacts { display: flex; gap: clamp(1.5rem,4vw,3.5rem); flex-wrap: wrap; }
.gfacts div { display:flex; flex-direction:column; }
.gfacts b { font-family: var(--decor); font-weight:900; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--gold); line-height: 1; }
.gfacts small { font-family: var(--display); letter-spacing: .2em; font-size: .62rem; text-transform: uppercase; color: var(--bone-dim); margin-top: .5rem; }

/* prev / next chapter */
.gnavfoot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: clamp(3rem,7vh,5rem) clamp(1.4rem,6vw,6rem); border-top: 1px solid rgba(255,90,31,.08); }
.gnavfoot a { text-decoration: none; cursor: none; font-family: var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--bone-dim); transition: color .3s; }
.gnavfoot a:hover { color: var(--accent); }
.gnavfoot a small { display:block; font-size:.58rem; letter-spacing:.3em; color: var(--bone-dim); margin-bottom:.3rem; }
.gnavfoot a b { font-family: var(--decor); font-weight: 900; font-size: 1.2rem; color: var(--bone); }
.gnavfoot .next { text-align: right; }

@media (max-width: 860px) {
  .ghero { grid-template-columns: 1fr; }
  .ghero__art { order: -1; max-width: 360px; }
  .gnum { display: none; }
}