/* ============================================================
   STORY page — long-form chapter scroll
   ============================================================ */

.story-page { background: var(--paper); color: var(--ink); }

/* HEAD */
.story-head {
  position: relative;
  padding: clamp(160px, 22vh, 240px) 0 clamp(80px, 12vw, 140px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.story-head .wrap-x {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x);
  position: relative; z-index: 2;
}
.story-head .crumbs {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--brass-light); margin-bottom: 60px; opacity: 0.85;
}
.story-head .crumbs .sep { opacity: 0.5; }
.story-head .ar-back {
  position: absolute; top: 60px; right: -3vw;
  font-family: var(--arabic);
  font-size: clamp(220px, 36vw, 560px);
  color: var(--brass);
  opacity: 0.06;
  line-height: 0.85;
  pointer-events: none; user-select: none;
}
.story-head h1 {
  font-family: var(--display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  margin: 0;
  font-weight: 200;
  letter-spacing: -0.028em;
  max-width: 14ch;
  font-variation-settings: "SOFT" 30, "opsz" 144;
}
.story-head h1 em {
  font-style: italic;
  color: var(--brass-light);
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.story-head .lede {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: rgba(239,230,211, 0.78);
  max-width: 52ch;
  margin: 40px 0 0;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}

/* TOC (left rail) */
.story-toc {
  position: fixed;
  top: 50%; left: var(--pad-x);
  transform: translateY(-50%);
  z-index: 50;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0;
  transition: opacity 0.5s;
  mix-blend-mode: difference;
  color: #fff;
}
.story-toc.show { opacity: 1; }
.story-toc .step {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.4);
  transition: color 0.4s;
}
.story-toc .step.active { color: var(--brass-light); }
.story-toc .step .ln {
  display: inline-block;
  width: 32px; height: 1px;
  background: currentColor;
  transition: width 0.5s var(--e-out);
}
.story-toc .step.active .ln { width: 60px; }
@media (max-width: 1100px) { .story-toc { display: none; } }

/* CHAPTER blocks */
.chapter {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 0;
  overflow: hidden;
}
.chapter:nth-child(odd) { background: var(--paper); color: var(--ink); }
.chapter:nth-child(even) {
  background: var(--ink);
  color: var(--paper);
}
.chapter .wrap-x {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--pad-x);
}

.chapter-num-back {
  position: absolute;
  top: 6vh; right: -1vw;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 0.85;
  font-weight: 200;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.04;
  pointer-events: none; user-select: none;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.chapter:nth-child(even) .chapter-num-back { color: var(--brass); opacity: 0.06; }

.chapter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.chapter-grid.reverse { direction: rtl; }
.chapter-grid.reverse > * { direction: ltr; }

.chapter-media {
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}
.chapter-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 2.6s var(--e-out);
}
.chapter-media.in img { transform: scale(1); }
.chapter-media .frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(239,230,211,0.35);
  pointer-events: none;
}
.chapter:nth-child(odd) .chapter-media .frame { border-color: rgba(13,10,6,0.2); }
.chapter-media .cap {
  position: absolute;
  bottom: 22px; left: 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--paper);
  background: rgba(13,10,6,0.55);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}

.chapter-body { max-width: 600px; }
.chapter-body .eyebrow { margin-bottom: 26px; display: inline-flex; }
.chapter:nth-child(even) .chapter-body .eyebrow { color: var(--brass-light); }
.chapter:nth-child(even) .chapter-body .eyebrow .num { color: var(--brass-light); }
.chapter-body .arf {
  font-family: var(--arabic);
  font-size: clamp(36px, 4.2vw, 64px);
  color: var(--brass);
  opacity: 0.5;
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.chapter-body h2 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 200;
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 44px;
  max-width: 14ch;
  font-variation-settings: "SOFT" 30, "opsz" 144;
}
.chapter-body h2 em {
  font-style: italic;
  color: var(--brass-deep);
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.chapter:nth-child(even) .chapter-body h2 em { color: var(--brass-light); }

.chapter-body p {
  font-family: var(--display);
  font-size: var(--fs-lede);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 52ch;
}
.chapter:nth-child(odd) .chapter-body p { color: var(--ink-2); }
.chapter:nth-child(even) .chapter-body p { color: rgba(239,230,211, 0.82); }
.chapter-body p.first::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 4.4em;
  color: var(--brass-deep);
  float: left;
  line-height: 0.86;
  padding: 6px 12px 0 0;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.chapter:nth-child(even) .chapter-body p.first::first-letter { color: var(--brass-light); }

.chapter-pullquote {
  margin: 50px 0 26px;
  padding: 30px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.chapter:nth-child(even) .chapter-pullquote {
  border-color: var(--line-light);
}
.chapter-pullquote q {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.25;
  font-weight: 300;
  quotes: none;
  display: block;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.chapter-pullquote q::before, .chapter-pullquote q::after { content: none; }
.chapter:nth-child(odd) .chapter-pullquote q { color: var(--ink); }
.chapter:nth-child(even) .chapter-pullquote q { color: var(--paper); }

@media (max-width: 920px) {
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-grid.reverse { direction: ltr; }
}

/* INTERLUDE — full-bleed quote between chapters */
.interlude {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(100px, 16vw, 180px) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.interlude .bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.interlude .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
  transform: scale(1.08);
  transition: transform 12s var(--e-out);
}
.interlude.in .bg img { transform: scale(1); }
.interlude .bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,6,0.7) 0%, rgba(13,10,6,0.4) 50%, rgba(13,10,6,0.7) 100%);
}
.interlude .wrap-x {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 0 var(--pad-x);
}
.interlude .mark {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(80px, 10vw, 140px);
  color: var(--brass);
  opacity: 0.5;
  line-height: 0.5;
  display: block;
  margin-bottom: 14px;
}
.interlude q {
  font-family: var(--display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  quotes: none;
  display: block;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.interlude q em { color: var(--brass-light); font-style: italic; }
.interlude cite {
  display: block;
  margin-top: 38px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-light);
  font-style: normal;
  opacity: 0.75;
}

/* CLOSING */
.story-closing {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
}
.story-closing .wrap-x {
  max-width: 900px; margin: 0 auto; padding: 0 var(--pad-x);
}
.story-closing .ar {
  font-family: var(--arabic);
  font-size: clamp(56px, 8vw, 120px);
  color: var(--brass-deep);
  line-height: 1;
  margin-bottom: 36px;
}
.story-closing h2 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 200;
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 30px;
  font-variation-settings: "SOFT" 30, "opsz" 144;
}
.story-closing h2 em { font-style: italic; color: var(--brass-deep); font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; }
.story-closing p {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 50ch;
  margin: 0 auto 50px;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.story-closing .row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.story-closing .sig {
  margin-top: 60px;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--brass-deep);
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.story-closing .sig::before {
  content: "—";
  color: var(--brass);
  margin-right: 12px;
}