/* ============================================================
   CHAMPION'S CREED
   Graphic Novel Website — Dark Storm Edition v2
   Text in caption panels, not on images
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;600&family=Kalam:wght@300;400;700&family=Special+Elite&display=swap');

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; }

/* ---------- TOKENS ---------- */
:root {
  --black:     #07070f;
  --deep:      #0c0c1a;
  --electric:  #00d4ff;
  --gold:      #c9a84c;
  --hope:      #4fc3f7;
  --lightning: #fff3a3;
  --danger:    #e03030;
  --text:      #f0f0f0;
  --muted:     #8888a8;
  --border:    rgba(0, 212, 255, .12);
  --gap:       6px;
  --r:         3px;
  --ff-title:  'Cinzel', serif;
  --ff-cap:    'Kalam', cursive;
  --ff-voice:  'Special Elite', cursive;
}

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--ff-cap);
  overflow-x: hidden;
}

/* ---------- ATMOSPHERE ---------- */
.rain-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .20;
}
.lightning-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  background: white;
  opacity: 0;
  transition: opacity .05s;
}

/* ---------- LAYOUT ---------- */
.graphic-novel {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---------- SCROLL REVEAL ---------- */
.graphic-novel > section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}
.graphic-novel > section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PANEL — image container
   ============================================================ */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--deep);
}
.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .90;
  transition: opacity .4s ease, transform .65s ease;
}
.panel:hover img {
  opacity: 1;
  transform: scale(1.015);
}

/* ============================================================
   BENTO GRIDS
   Each grid has an image row (fixed height) + caption row (auto)
   ============================================================ */
.bento {
  display: grid;
  gap: var(--gap);
}

/* Hero: 2 col — text left (35%), image right (65%) — both full height */
.grid-hero {
  grid-template-columns: 35fr 65fr;
  height: 88vh;
  min-height: 580px;
}
.grid-hero > .panel    { height: 100%; }
.grid-hero > .cap-hero { height: 100%; }

/* Storm: [2fr img][1fr img] / [2fr cap][1fr cap] */
.grid-storm {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 440px auto;
}

/* Voices: 3 equal columns, images then bubbles */
.grid-voices {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 380px auto;
}

/* Decision: prayer wide | jump narrow */
.grid-decision {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 500px auto;
}

/* Single full-width (p9, p14, p17, p20) */
.grid-single {
  grid-template-columns: 1fr;
}

/* Two equal columns */
.grid-two {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 440px auto;
}

/* Rescue: 2fr | 3fr */
.grid-rescue {
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 580px auto;
}

/* Finale: 1 col, image then big conclusion block */
.grid-finale {
  grid-template-columns: 1fr;
}
.grid-finale > .panel { height: 90vh; min-height: 600px; }

/* Grid panels fill their row */
.bento > .panel {
  min-height: 0;
  height: 100%;
}

/* ============================================================
   INDIVIDUAL PANEL HEIGHTS (single-column panels)
   ============================================================ */
#p9  { height: 560px; }
#p14 { height: 620px; }
#p17 { height: 90vh; min-height: 600px; }
#p20 { height: 560px; }

/* ============================================================
   CONTAIN OVERRIDES — show full image without cropping
   ============================================================ */
#p1  img { object-fit: contain; }
#p2  img { object-position: left center; }
#p6  img { object-position: top center; }
#p7  img { object-position: left center; }
#p8  img { object-position: left center; }
#p9  img,
#p13 img,
#p14 img,
#p20 img { object-fit: contain; }

/* ============================================================
   CAPTION PANELS — the graphic novel text boxes
   ============================================================ */

/* Base caption */
.cap {
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-family: var(--ff-cap);
  font-size: clamp(.95rem, 1.45vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  border-radius: var(--r);
}
.cap p { margin: 0; }
.cap em { font-style: italic; }

/* ── Narrative: dark bg, white text, electric left border ── */
.cap-narrative {
  background: var(--black);
  color: var(--text);
  border-left: 3px solid var(--electric);
}

/* ── Bubble: dark bg, light text — inner conflicting voices ── */
.cap-bubble {
  background: var(--black);
  color: #e8e8ff;
  border-left: 3px solid #aabbdd;
  font-weight: 400;
}
.cap-bubble.cold {
  color: #b8cfff;
  border-left-color: #4466bb;
}
.cap-bubble.warm {
  color: #ffe8a0;
  border-left-color: #cc9900;
}
.cap-bubble .attr {
  display: block;
  font-size: .82em;
  font-weight: 300;
  color: var(--muted);
  font-style: italic;
  margin-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .35rem;
}

/* ── Prayer: dark bg, gold text, gold left border ── */
.cap-prayer {
  background: #090806;
  color: var(--text);
  border-left: 3px solid var(--gold);
}

/* ── Jump: dark bg, electric title ── */
.cap-jump {
  background: #020810;
  color: var(--text);
  border-left: 3px solid var(--electric);
  justify-content: center;
  align-items: flex-start;
  font-family: var(--ff-voice);
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
}

/* ── Twist: deep red-dark bg ── */
.cap-twist {
  background: #0f0003;
  color: var(--text);
  border-left: 3px solid var(--danger);
}

/* ── Divine: dark bg, lightning accent ── */
.cap-divine {
  background: #06060f;
  color: var(--text);
  border-left: 3px solid var(--lightning);
  align-items: center;
  text-align: center;
}

/* ── Future voice: dark blue-black, hope blue accent ── */
.cap-future {
  background: #030a12;
  color: var(--hope);
  border-left: 3px solid var(--hope);
  font-style: italic;
}
.cap-future p { font-weight: 300; }

/* ── Hero title block ── */
.cap-hero {
  background: var(--black);
  color: var(--text);
  border-right: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(.125rem, .19vw, .19rem) clamp(2rem, 3vw, 3rem);
  gap: 1.5rem;
}

/* ── Finale ── */
.cap-finale {
  background: var(--black);
  color: var(--text);
  border-top: 2px solid var(--electric);
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  gap: 1rem;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  color: var(--hope);
}

/* Center modifier */
.cap.center {
  align-items: center;
  text-align: center;
}

/* ============================================================
   HERO CAPTION CONTENT
   ============================================================ */
.cap-hero h1 {
  font-family: var(--ff-title);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow:
    0 0 40px rgba(0,212,255,.5),
    0 0 80px rgba(0,212,255,.25);
  line-height: 1.1;
}

.cap-hero blockquote {
  font-family: var(--ff-cap);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.9rem, 1.5vw, 1.2rem);
  color: var(--gold);
  max-width: 560px;
  line-height: 1.65;
  border-top: 1px solid rgba(201,168,76,.35);
  padding-top: 1rem;
}

.cap-hero blockquote cite {
  font-style: normal;
  font-family: var(--ff-title);
  font-size: .7em;
  letter-spacing: .2em;
  display: block;
  margin-top: .5rem;
  opacity: .75;
}

/* ============================================================
   TEXT ATOMS (used within caption panels)
   ============================================================ */

/* Narrative beats */
.beat  { color: var(--electric); font-weight: 500; }
.tense { color: #ff9999; }

/* Prayer text — gold, Special Elite */
.prayer-text {
  font-family: var(--ff-voice);
  font-size: clamp(.85rem, 1.3vw, 1rem);
  color: var(--gold);
  font-style: italic;
  line-height: 1.65;
  border-left: 2px solid rgba(201,168,76,.4);
  padding-left: .85rem;
  margin-top: .2rem;
}

/* Calling voice */
.calling {
  font-family: var(--ff-title);
  font-size: clamp(.95rem, 1.8vw, 1.3rem);
  color: var(--electric);
  text-shadow: 0 0 18px rgba(0,212,255,.55);
  letter-spacing: .03em;
}

/* Jump word */
.jump-word {
  font-family: var(--ff-title);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 900;
  color: var(--electric);
  text-shadow:
    0 0 25px rgba(0,212,255,.85),
    0 0 60px rgba(0,212,255,.4);
  letter-spacing: .1em;
  margin-top: .5rem;
}

/* Twist reveal */
.twist-line {
  font-family: var(--ff-title);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--danger);
  text-shadow: 0 0 18px rgba(220,50,50,.55);
}
.twist-line.future-id {
  color: var(--hope);
  text-shadow: 0 0 18px rgba(79,195,247,.45);
}

.accusation {
  color: #cc2020;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
}

/* Divine voice */
.divine-intro {
  color: var(--muted);
  font-weight: 300;
  font-style: italic;
}
.divine-word {
  font-family: var(--ff-title);
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  font-weight: 700;
  color: var(--lightning);
  text-shadow:
    0 0 28px rgba(255,243,163,.75),
    0 0 60px rgba(255,243,163,.35);
  line-height: 1.4;
  max-width: 680px;
}

/* Future voice open line */
.future-open {
  color: var(--lightning);
  font-weight: 500;
  font-style: normal;
}

/* ============================================================
   FINALE CONTENT
   ============================================================ */
.finale-words {
  margin: 1.5rem 0 1rem;
}
.finale-words p {
  font-family: var(--ff-title);
  font-size: clamp(2rem, 5.5vw, 5rem);
  font-weight: 900;
  color: var(--text);
  text-shadow:
    0 0 35px rgba(0,212,255,.5),
    0 0 75px rgba(0,212,255,.25);
  line-height: 1.2;
}
.finale-scripture {
  color: var(--gold);
  border-top: 1px solid rgba(201,168,76,.3);
  padding-top: 1rem;
  max-width: 580px;
  font-weight: 300;
}
.finale-scripture cite {
  font-style: normal;
  font-family: var(--ff-title);
  font-size: .72em;
  display: block;
  margin-top: .35rem;
  opacity: .8;
}

/* ============================================================
   EXPLANATORY SECTION
   ============================================================ */
.explainer-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.explainer {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.85;
  border-radius: var(--r);
}

/* Black box — white text */
.explainer.dark {
  background: #000000;
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,.08);
}

/* White box — black text */
.explainer.light {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0,0,0,.08);
}

/* Responsive: stack to single column on mobile */
@media (max-width: 700px) {
  .explainer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLOSING IMAGE
   ============================================================ */
.closing-image {
  display: flex;
  justify-content: center;
  background: var(--black);
  padding: 0;
}
.closing-image img {
  width: 90%;
  height: auto;
  display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .grid-storm,
  .grid-voices,
  .grid-decision,
  .grid-two,
  .grid-rescue {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
  }

  .grid-storm    > .panel,
  .grid-voices   > .panel,
  .grid-decision > .panel,
  .grid-two      > .panel,
  .grid-rescue   > .panel { height: 380px; }

  .grid-hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: unset;
  }
  .grid-hero > .cap-hero {
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--electric);
  }
  .grid-hero > .panel { height: 72vh; }
  #p9, #p14, #p17, #p20 { height: 400px; }
}

@media (max-width: 560px) {
  .grid-storm    > .panel,
  .grid-voices   > .panel,
  .grid-decision > .panel,
  .grid-two      > .panel,
  .grid-rescue   > .panel { height: 300px; }

  .grid-hero > .panel { height: 60vh; }
  #p9, #p14, #p17, #p20 { height: 300px; }
}