/* ==========================================================
   GEKOS — NARRATIVE DESCENT
   Purpose: Hero → Story Handoff (NOT a second hero)
   Function: Tension release / visual quieting
   Motion: None
   Status: AUDITED / HARDENED / SEALED
========================================================== */

/* ------------------------------------------
   Narrative Descent — VISUAL AUTHORITY
   (Perceptual gravity only)
------------------------------------------ */
.narrative-descent {
  min-height: 120vh;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.9),
    rgba(0,0,0,1)
  );
}

/* ------------------------------------------
   Narrative Descent — STRUCTURE
   (Content containment only)
------------------------------------------ */
.narrative-descent {
  position: relative;
  width: 100%;
  margin: 0 auto;

  padding-block: clamp(6rem, 12vh, 10rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);

  overflow: visible;
}

/* ------------------------------------------
   Injected Narrative Blocks
------------------------------------------ */
.narrative-descent > * {
  max-width: 64rem;
  margin-inline: auto;
  text-align: left;
}

/* Vertical cadence between narrative elements */
.narrative-descent > * + * {
  margin-top: clamp(3rem, 6vh, 4.5rem);
}

/* ------------------------------------------
   Optional Line-Level Styling
   (Only used if JS injects fragments)
------------------------------------------ */
.narrative-descent .descent-line {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
  opacity: 0.78;
}

/* ------------------------------------------
   Typography Safety (Local Only)
------------------------------------------ */
.narrative-descent h2,
.narrative-descent h3 {
  margin: 0;
  line-height: 1.15;
}

.narrative-descent p {
  margin: 0;
  max-width: 52ch;
}

/* ------------------------------------------
   Mobile Pacing Refinement
------------------------------------------ */
@media (max-width: 768px) {
  .narrative-descent {
    padding-block: clamp(4rem, 10vh, 6rem);
  }

  .narrative-descent > * + * {
    margin-top: clamp(2rem, 5vh, 3rem);
  }
}

/* ==========================================================
   END — GEKOS NARRATIVE DESCENT
========================================================== */
