/* Stage Light · Story module (SPEC §5 #3, §6.5): the story strip and chapter nav (era_strip),
   the chapters (story_chapter: letterboxed scenes and haze panels, dated moments), the empty
   Story page. Ported from design/stage-light/pages/story.css with logical properties only;
   staggers and cord lengths come from :nth-child rules, never a style attribute. Motion only
   under html.motion (stage.js adds it when prefers-reduced-motion allows). */

/* ---------- Story strip (home: era_strip mode strip) ---------- */
.story-strip { padding-block: clamp(48px, 6vw, 96px); }
.story-strip .eras { padding-block-start: 0; }
.eras__item { display: flex; min-width: 0; }
.eras__item > .era { flex: 1 1 auto; min-width: 0; }
.era:focus-visible { outline: 2px solid var(--tungsten); outline-offset: -2px; }
.story-strip__more { padding-inline: var(--gutter); margin-block-start: clamp(18px, 2.4vw, 32px); }

/* ---------- Chapter rig: bulbs on one wire that link to the chapters (mode chapters) ---------- */
.story-rig {
  position: relative; z-index: 20; padding: 6px 0 0;
  background: linear-gradient(180deg, rgba(6, 5, 5, .97), rgba(10, 8, 7, .93));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}
.story-rig .eras__track { overflow-y: hidden; padding-block-end: 0; }
.story-rig .eras__list { min-width: 0; grid-auto-columns: minmax(112px, 1fr); }
.story-rig__list > li { display: flex; min-width: 0; }
.story-rig .era { flex: 1 1 auto; min-width: 0; padding: 0 6px 10px; }
.story-rig__list > li:nth-child(6n + 1) > .era { --drop: 10px; }
.story-rig__list > li:nth-child(6n + 2) > .era { --drop: 28px; }
.story-rig__list > li:nth-child(6n + 3) > .era { --drop: 16px; }
.story-rig__list > li:nth-child(6n + 4) > .era { --drop: 34px; }
.story-rig__list > li:nth-child(6n + 5) > .era { --drop: 20px; }
.story-rig__list > li:nth-child(6n + 6) > .era { --drop: 12px; }
.story-rig.is-in li:nth-child(2) .era * { transition-delay: .14s; }
.story-rig.is-in li:nth-child(3) .era * { transition-delay: .28s; }
.story-rig.is-in li:nth-child(4) .era * { transition-delay: .42s; }
.story-rig.is-in li:nth-child(5) .era * { transition-delay: .56s; }
.story-rig.is-in li:nth-child(n + 6) .era * { transition-delay: .7s; }
.story-rig.is-in li:nth-child(n) .era:is(:hover, :focus-visible, [aria-current]) * { transition-delay: 0s; }
.story-rig .era__bulb { width: 27px; height: 43px; }
.story-rig .era__glow { width: 116px; height: 116px; margin-block-start: -58px; margin-inline-start: -58px; }
.story-rig .era__year { margin-block-start: 7px; font-size: clamp(1.1rem, .86rem + .6vw, 1.45rem); }
.story-rig .era__text {
  margin-block-start: 4px; max-width: none; white-space: nowrap;
  font-size: .64rem; font-weight: var(--w-label); letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
}
.story-rig .era__text:lang(ar), .story-rig .era__text:lang(ckb) { font-size: .84rem; font-weight: var(--w-strong); line-height: 1.6; letter-spacing: 0; text-transform: none; }
.story-rig .era[aria-current] .era__text { color: var(--tungsten); }

/* ---------- Chapter head: number, thin gold years, title ---------- */
.story-chapter { position: relative; padding-block: 0; }
.story-num { margin-block-end: clamp(12px, 1.6vw, 22px); }
.story-h { display: grid; justify-items: start; gap: clamp(6px, 1vw, 14px); margin: 0; }
.story-years {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; padding-block: .04em .02em;
  font-family: var(--font-latin); font-weight: var(--w-display); line-height: .92; font-variant-numeric: lining-nums;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 32px rgba(255, 182, 92, .22));
}
.story-years__from { font-size: clamp(4rem, 1.8rem + 6.4vw, 9.4rem); letter-spacing: -.045em; }
.story-years__to { font-size: clamp(1.35rem, .9rem + 1.4vw, 2.5rem); letter-spacing: -.01em; }
.story-h__title {
  font-size: clamp(1.8rem, 1.1rem + 2.1vw, 3.3rem); font-weight: var(--w-lead); line-height: 1.1;
  letter-spacing: -.015em; color: var(--text); text-wrap: balance; text-shadow: var(--text-halo);
}
.story-h__title:lang(ar), .story-h__title:lang(ckb) { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.7rem); font-weight: var(--w-display-ar); line-height: 1.55; letter-spacing: 0; }

/* ---------- Scene chapters: letterboxed photo on one side, the head on a solid scrim ---------- */
.story-scene { --story-dir: var(--shade-dir); --story-glow: 78%; --story-bar: clamp(34px, 8vh, 88px); }
[dir="rtl"] .story-scene { --story-glow: 22%; }
.story-scene--end { --story-dir: to left; --story-glow: 22%; }
[dir="rtl"] .story-scene--end { --story-dir: to right; --story-glow: 78%; }
.story-scene picture { display: contents; }
.story-cap {
  position: absolute; z-index: 3; bottom: 0; inset-inline-end: var(--gutter); height: clamp(34px, 8vh, 88px);
  display: flex; align-items: center; margin: 0;
  font-size: .64rem; font-weight: var(--w-strong); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  transition: opacity var(--dur-slow) var(--ease-out) .8s;
}
.story-cap:lang(ar), .story-cap:lang(ckb) { font-size: .8rem; letter-spacing: 0; text-transform: none; }
.story-scene--end .story-cap { inset-inline-end: auto; inset-inline-start: var(--gutter); }
html.motion .story-scene:not(.is-in) .story-cap { opacity: 0; }
@media (min-width: 901px) {
  .story-scene .scene__frame { min-height: clamp(540px, 78vh, 860px); }
  .story-scene .scene__img {
    top: var(--story-bar); bottom: auto; height: calc(100% - 2 * var(--story-bar));
    inset-inline-start: auto; inset-inline-end: 0; width: 64%;
    filter: sepia(.3) saturate(1.1) brightness(.74) contrast(1.06);
  }
  .story-scene--end .scene__img { inset-inline-start: 0; inset-inline-end: auto; }
  /* the head (columns 1-5, at most 41% of the width) always sits on at least --scrim-text */
  .story-scene .scene__shade {
    background:
      linear-gradient(var(--story-dir), var(--black) 0%, var(--black) 35%, rgba(6, 5, 5, .84) 39%, var(--scrim-text) 42%, rgba(6, 5, 5, .26) 50%, rgba(6, 5, 5, 0) 58%, rgba(6, 5, 5, 0) 86%, rgba(6, 5, 5, .5) 100%),
      radial-gradient(50% 70% at var(--story-glow) 26%, rgba(255, 182, 92, .14), transparent 70%);
  }
  .story-scene__text { grid-column: 1 / span 5; }
  .story-scene--end .story-scene__text { grid-column: 8 / -1; }
}

/* ---------- Haze chapters: no photo, painterly light leaks in CSS ---------- */
.story-haze {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding-block: clamp(84px, 10vw, 168px) clamp(80px, 8vw, 140px);
  background: var(--black);
}
.story-haze::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 214, 160, 0), rgba(255, 214, 160, .18) 30%, rgba(255, 214, 160, .18) 70%, rgba(255, 214, 160, 0));
}
.story-haze__leaks { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: var(--leak-intensity); }
.story-haze__leak { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
html.motion .story-haze__leaks.is-live .story-haze__leak { animation: drift 30s ease-in-out infinite alternate; }
html.motion .story-haze__leaks.is-live .story-haze__leak--2 { animation-duration: 24s; animation-delay: -8s; }
html.motion .story-haze__leaks.is-live .story-haze__leak--3 { animation-duration: 36s; animation-delay: -14s; }
html.is-hidden .story-haze__leak { animation-play-state: paused; }
.story-haze--warm .story-haze__leak--1 { width: 64vmax; height: 52vmax; inset-inline-end: -14vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(255, 182, 92, .3), rgba(255, 182, 92, .08) 55%, rgba(255, 182, 92, 0)); }
.story-haze--warm .story-haze__leak--2 { width: 56vmax; height: 40vmax; inset-inline-start: -22vmax; bottom: -24vmax; background: radial-gradient(closest-side, rgba(194, 80, 46, .34), rgba(194, 80, 46, .08) 55%, rgba(194, 80, 46, 0)); }
.story-haze--warm .story-haze__leak--3 { width: 30vmax; height: 22vmax; inset-inline-end: 4vw; bottom: -10vmax; background: radial-gradient(closest-side, rgba(229, 138, 90, .2), rgba(229, 138, 90, 0)); }
.story-haze--night .story-haze__leak--1 { width: 70vmax; height: 50vmax; inset-inline-start: -20vmax; top: -20vmax; background: radial-gradient(closest-side, rgba(43, 63, 143, .5), rgba(43, 63, 143, .14) 55%, rgba(43, 63, 143, 0)); }
.story-haze--night .story-haze__leak--2 { width: 46vmax; height: 34vmax; inset-inline-end: -16vmax; bottom: -18vmax; background: radial-gradient(closest-side, rgba(194, 80, 46, .26), rgba(194, 80, 46, .06) 55%, rgba(194, 80, 46, 0)); }
.story-haze--night .story-haze__leak--3 { width: 34vmax; height: 26vmax; inset-inline-start: 10vw; bottom: -14vmax; background: radial-gradient(closest-side, rgba(43, 63, 143, .3), rgba(43, 63, 143, 0)); }
.story-haze--gold .story-haze__leak--1 { width: 62vmax; height: 50vmax; inset-inline-start: -18vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(246, 216, 121, .26), rgba(224, 174, 60, .08) 55%, rgba(224, 174, 60, 0)); }
.story-haze--gold .story-haze__leak--2 { width: 54vmax; height: 42vmax; inset-inline-end: -20vmax; top: 10vh; background: radial-gradient(closest-side, rgba(229, 138, 90, .24), rgba(229, 138, 90, .06) 55%, rgba(229, 138, 90, 0)); }
.story-haze--gold .story-haze__leak--3 { width: 60vmax; height: 30vmax; inset-inline-start: 20vw; bottom: -18vmax; background: radial-gradient(closest-side, rgba(194, 80, 46, .26), rgba(194, 80, 46, 0)); }
.story-haze__top {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding-inline: var(--gutter);
}
.story-haze__head { grid-column: 1 / span 7; min-width: 0; }
.story-haze__aside { grid-column: 9 / -1; min-width: 0; }
.story-chapter--end .story-haze__head { grid-column: 6 / -1; }
.story-chapter--end .story-haze__aside { grid-column: 1 / span 4; grid-row: 1; }
.story-haze__slot { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }

/* ---------- Chapter body: prose + moments on the 12-column grid ---------- */
.story-body {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 64px);
  align-items: start; padding: clamp(48px, 5.4vw, 92px) var(--gutter) 0;
}
.story-body__main { grid-column: 1 / span 7; min-width: 0; }
.story-body__side { grid-column: 9 / -1; min-width: 0; }
.story-chapter--end .story-body__main { grid-column: 6 / -1; }
.story-chapter--end .story-body__side { grid-column: 1 / span 4; grid-row: 1; }
.story-chapter--scene { padding-block-end: clamp(72px, 8vw, 140px); }
.story-prose:lang(ar), .story-prose:lang(ckb) { max-width: 31em; }
.story-note { margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--line); max-width: 52ch; }

/* moments: a lit timeline */
.story-moments__h { margin-block-end: 20px; }
.story-moments__list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--line-warm); }
.story-moment { position: relative; padding-inline-start: 24px; padding-block-end: 22px; }
.story-moment:last-child { padding-block-end: 2px; }
.story-moment::before {
  content: ""; position: absolute; inset-inline-start: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: #FFD592; box-shadow: 0 0 10px 2px rgba(255, 182, 92, .55);
}
.story-moment__date { display: block; font-size: .68rem; font-weight: var(--w-label); letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; color: var(--tungsten); font-variant-numeric: tabular-nums; }
.story-moment__date:lang(ar), .story-moment__date:lang(ckb) { font-size: .86rem; font-weight: var(--w-strong); line-height: 1.6; letter-spacing: 0; text-transform: none; }
.story-moment__text { margin-block: 2px 0; font-size: .98rem; line-height: 1.55; color: rgba(243, 236, 223, .84); }
.story-moment__text:lang(ar), .story-moment__text:lang(ckb) { line-height: 1.85; }
.story-moment__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--target);
  font-size: .68rem; font-weight: var(--w-label); letter-spacing: .18em; text-transform: uppercase; color: var(--tungsten); text-decoration: none;
}
.story-moment__link:lang(ar), .story-moment__link:lang(ckb) { font-size: .86rem; letter-spacing: 0; text-transform: none; }
.story-ext { width: 14px; height: 14px; flex: none; }
[dir="rtl"] .story-ext { transform: scaleX(-1); }
.story-moment__link:hover span, .story-moment__link:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }

/* song titles in both scripts (the page's own script first) */
.story-song { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-block-start: 2px; font-size: 1.12rem; font-weight: var(--w-strong); line-height: 1.4; color: var(--text); }
.story-song [lang="ar"], .story-song [lang="ckb"] { line-height: 1.7; }
.story-song-alt { font-size: .84em; font-weight: var(--w-body); color: var(--tungsten); }

/* ---------- Reels: click-to-load videos on a film strip ---------- */
.story-reel { margin-block-start: clamp(56px, 6.5vw, 104px); }
.story-chapter--haze .story-reel { margin-block-start: 0; padding-block-end: clamp(56px, 6vw, 96px); background: var(--black); }
.story-reel .strip { margin-block-start: 0; }
.story-reel__note { padding: 14px var(--gutter) 0; }
.story-reel .frame__title { margin-block-start: 4px; }
@media (min-width: 901px) {
  .story-reel__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-reel__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* one bulb over the first chapter (decorative) */
.story-lamp { --lamp-cord: clamp(70px, 10vw, 180px); position: absolute; z-index: -1; top: 0; inset-inline-end: calc(var(--gutter) + 13%); width: 52px; height: 100%; pointer-events: none; }
.story-lamp__cord { position: absolute; top: 0; inset-inline-start: 25.5px; width: 1px; height: var(--lamp-cord); background: linear-gradient(rgba(255, 214, 160, .1), rgba(255, 214, 160, .5)); }
.story-lamp .solo__bulb { position: absolute; top: var(--lamp-cord); inset-inline-start: 0; width: 52px; height: 83px; }
.story-lamp__glow {
  position: absolute; top: calc(var(--lamp-cord) + 52px); inset-inline-start: 26px; width: 440px; height: 440px; margin-block-start: -220px; margin-inline-start: -220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 140, .42), rgba(255, 170, 90, .13) 45%, rgba(255, 150, 80, 0)); mix-blend-mode: screen;
}
.story-lamp__cone {
  position: absolute; top: calc(var(--lamp-cord) + 62px); inset-inline-start: 26px; bottom: 0; width: 900px; margin-inline-start: -450px; mix-blend-mode: screen;
  background: conic-gradient(from 156deg at 50% 0%, rgba(255, 206, 140, 0) 0deg, rgba(255, 206, 140, .11) 24deg, rgba(255, 206, 140, 0) 48deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 92%); mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
}
html.motion .story-haze:has(.story-haze__leaks.is-live) .story-lamp__glow { animation: breathe 5s ease-in-out infinite alternate; }
@media (max-width: 900px) {
  .story-lamp { --lamp-cord: 34px; inset-inline-end: var(--gutter); transform: scale(.7); transform-origin: 50% 0; }
}

/* ---------- The empty Story page ---------- */
.story-empty { padding-block: clamp(48px, 6vw, 96px); }

/* ---------- Large screens: the rig follows the reader ---------- */
@media (min-width: 901px) and (min-height: 700px) {
  .story-rig { position: sticky; top: var(--header-h); }
  .story-chapter { scroll-margin-top: 140px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .story-rig { padding-block-start: 10px; }
  .story-rig .eras__list { grid-auto-columns: minmax(104px, 1fr); }
  .story-scene .scene__bar { height: 24px; }
  .story-scene .scene__bar--bottom { top: calc(62.5vw - 24px); }
  .story-cap { top: calc(62.5vw - 24px); bottom: auto; height: 24px; font-size: .58rem; letter-spacing: .14em; }
  .story-cap:lang(ar), .story-cap:lang(ckb) { font-size: .72rem; }
  .story-scene .scene__grid { padding-block-start: 24px; }
  .story-years__from { font-size: clamp(3.4rem, 1.6rem + 9vw, 5.2rem); }
  .story-haze__top { display: block; }
  .story-haze__aside { margin-block-start: 34px; }
  .story-body { display: block; padding-block-start: 36px; }
  .story-body__side { margin-block-start: 44px; }
  .story-chapter--scene { padding-block-end: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-haze__leak, .story-cap, .story-lamp__glow { animation: none !important; transition: none !important; }
}