/* Naytra — §2 The Hormuz story = the traceable chain.
   Sticky-media scrollytelling (Lassie's second-section pattern): the image pins
   while the chain advances link by link. Lassie's fonts (Fraunces + DM Sans),
   our colours — LIGHT section. Depends on tokens.css + base.css. */

.chain-scroll{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --media-h:72vh;                 /* image frame height (centred → top edge at --img-top) */
  --img-top:calc((100vh - var(--media-h)) / 2); /* the shared line: image top = title = node */
  position:relative;background:var(--paper);color:var(--ink);
}

/* Section head — its own centred intro screen (free-scroll, not a snap stop) */
.cs__head{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--frame-max);margin-inline:auto;
  padding:0 clamp(20px,5vw,72px);text-align:center}
.cs__eyebrow{font-family:var(--font-sans);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-700);margin:0 0 18px}
.cs__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(32px,5vw,60px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
.cs__range{font-family:var(--font-sans);font-weight:400;font-size:15px;color:var(--ink-3);
  margin:18px 0 0}

/* Two-column: left = steps (line + moving nodes), right = pinned media.
   Extra breathing room between the head and the body. */
.cs__inner{max-width:var(--frame-max);margin:0 auto;
  padding:0 clamp(20px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);
  align-items:start}

/* Steps: one full-viewport panel per event (only one visible at a time),
   content top-aligned so the title, the node and the image top share --img-top.
   Scroll-snap advances one event per scroll. */
.cs__steps{position:relative;list-style:none;margin:0;padding:0}
.cs__steps::before{content:"";position:absolute;left:5px;
  top:var(--img-top);bottom:calc(100vh - var(--img-top));width:1px;background:var(--line-2)}
.cs__step{position:relative;height:100vh;padding-left:34px;
  padding-top:calc(var(--img-top) - 15px);scroll-snap-align:start;scroll-snap-stop:always}
.cs__step::before{content:"";position:absolute;left:0;top:calc(var(--img-top) - 5px);
  width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);
  transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.cs__step.is-past::before{background:var(--accent-700);border-color:var(--accent-700)}
.cs__step.is-active::before{background:var(--accent-700);border-color:var(--accent-700);
  box-shadow:0 0 0 5px rgba(138,112,72,.18)}
.cs__step .k{font-family:var(--font-sans);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);transition:color .4s ease}
.cs__step.is-active .k{color:var(--accent-700)}
.cs__step .d{font-family:var(--font-serif);font-weight:340;font-size:clamp(21px,2.6vw,30px);
  line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:12px 0 0;
  opacity:.3;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,.7,.2,1)}
.cs__step.is-active .d{opacity:1;transform:none}
.cs__step .d .fig{color:var(--accent-700);font-family:var(--font-sans);font-weight:600;
  font-size:.66em;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.cs__step .note{font-family:var(--font-sans);font-size:13.5px;color:var(--ink-3);margin:14px 0 0;
  max-width:42ch;opacity:0;transition:opacity .45s ease .05s}
.cs__step.is-active .note{opacity:1}

/* Per-step citation — one chip with stacked favicons; hover opens a source popover */
.cs__cite{position:relative;display:inline-flex;margin-top:24px;
  opacity:0;transition:opacity .45s ease .12s}
.cs__step.is-active .cs__cite{opacity:1}

.cs__chip{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 7px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--ink-2);
  transition:border-color .18s ease,color .18s ease}
.cs__chip:hover{border-color:var(--line-2);color:var(--ink)}
.cs__stack{display:inline-flex;align-items:center}
.cs__fav{width:18px;height:18px;border-radius:50%;flex:none;object-fit:cover;background:var(--sunk);
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--paper-2)}
.cs__stack .cs__fav{margin-left:-7px;box-shadow:0 0 0 2px var(--paper-2)}
.cs__stack .cs__fav:first-child{margin-left:0}
.cs__fav--n{background:var(--accent-700)}
.cs__more{color:var(--ink-3);font-weight:600;font-size:12px}

/* Popover */
.cs__pop{position:absolute;top:calc(100% + 10px);left:0;z-index:30;width:300px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 22px -16px rgba(23,21,15,.22);padding:12px 14px 15px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.cs__cite:hover .cs__pop,.cs__cite:focus-within .cs__pop,.cs__cite.is-open .cs__pop{
  opacity:1;visibility:visible;transform:none}
.cs__popnav{display:flex;align-items:center;gap:6px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--line)}
.cs__arrow{width:30px;height:30px;border-radius:9px;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);
  font-size:15px;line-height:1;transition:background-color .18s ease,color .18s ease}
.cs__arrow:hover{background:var(--sunk);color:var(--ink)}
.cs__count{margin-left:auto;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.cs__slide{display:none}
.cs__slide.is-shown{display:block}
.cs__pub{display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12.5px;
  color:var(--ink-2);margin-bottom:9px}
.cs__ptitle{display:block;font-family:var(--font-sans);font-weight:600;font-size:15px;
  color:var(--ink);line-height:1.32;letter-spacing:-.005em}
a.cs__ptitle:hover{color:var(--accent-700)}
.cs__pdate{font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3);margin-top:7px}

/* Pinned media — height fixed to --media-h so the rail aligns to it exactly */
.cs__col-media{position:relative;height:100%}
.cs__media{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.cs__frame{position:relative;height:var(--media-h);aspect-ratio:4/5;width:auto;max-width:100%;
  margin-inline:auto;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--sunk);
  box-shadow:0 40px 90px -55px rgba(23,21,15,.45)}
/* Stacked images inside the clip mask; the top one slides UP and out to reveal
   the next (z-index set in JS: earlier images sit on top). */
.cs__img{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:translateY(0);transition:transform 1.05s cubic-bezier(.5,0,.12,1);will-change:transform}
.cs__img.is-up{transform:translateY(-105%)}
.cs__cap{display:none}
.cs__cap .loc{font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.02em;color:#EFE8DA}
.cs__cap .idx{font-family:var(--font-sans);font-size:12px;color:rgba(244,242,234,.7);font-variant-numeric:tabular-nums}

/* Closing */
.cs__close{max-width:var(--frame-max);margin:clamp(56px,9vh,120px) auto 0;
  padding:0 clamp(20px,5vw,72px) clamp(110px,16vh,200px);text-align:center}
.cs__close .quote{font-family:var(--font-serif);font-style:normal;font-weight:340;
  font-size:clamp(20px,2.6vw,28px);line-height:1.3;color:var(--ink-2);margin:0 auto;max-width:38ch}

/* ---------- Scoped scroll-snap: one event per scroll (added only while the
   chain is in view, so it never fights the hero or later sections) ---------- */
.chain-snap{scroll-snap-type:y mandatory}

/* ---------- Mobile: media becomes a sticky top banner; line/node + snap off ---------- */
@media (max-width:820px){
  .chain-snap{scroll-snap-type:none}
  .cs__head{min-height:auto;display:block;padding-block:18vh 8vh}
  .cs__inner{grid-template-columns:1fr;gap:0}
  .cs__col-media{order:-1;height:auto}
  .cs__media{top:56px;height:auto;margin-bottom:8px}
  .cs__frame{height:auto;aspect-ratio:3/2;max-height:42vh;width:100%}
  .cs__steps::before,.cs__step::before{display:none}
  .cs__step{height:auto;min-height:62vh;padding:0;scroll-snap-align:none}
  .cs__step .d{font-size:22px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cs__img{transition:none}
  .cs__step .d{transition:opacity .2s ease}
  .cs__step .d,.cs__step.is-active .d{transform:none}
  .cs__fill{transition:none}
}

/* ==========================================================================
   TEMPORARY A/B COMPARE — pinned scroll (Variant A) vs static timeline (B).
   Remove this block, both .cmp-flag divs, and the #story-timeline section
   once a variant is chosen.
   ========================================================================== */
.cmp-flag{font-family:var(--font-sans);font-weight:600;font-size:11px;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-700);text-align:center;
  background:var(--paper);padding:var(--space-60) 20px var(--space-10)}

/* ===== §2 Variant B — static two-column timeline: left intro/image pinned,
   the full chain readable on the right (no scroll-jacking). System values only. ===== */
.chain-static{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--paper);color:var(--ink);padding-block:clamp(96px,14vh,180px)}
.cst__inner{max-width:var(--content-max);margin:0 auto;
  padding:0 clamp(var(--margin-min),5vw,var(--space-40));
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-120);
  align-items:start}

/* Left — sticky intro + one image */
.cst__aside{position:sticky;top:var(--space-80);align-self:start}
.cst__eyebrow{font-family:var(--font-sans);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-700);margin:0 0 var(--space-20)}
.cst__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0}
.cst__range{font-family:var(--font-sans);font-weight:400;font-size:15px;color:var(--ink-3);
  margin:var(--space-20) 0 0}
.cst__media{margin-top:var(--space-80)}
.cst__frame{position:relative;width:100%;aspect-ratio:4/5;max-height:46vh;overflow:hidden;
  border:1px solid var(--line);background:var(--sunk)}
.cst__img{position:absolute;inset:0;background-size:cover;background-position:center}

/* Right — the full chain as a readable vertical timeline (all beats visible) */
.cst__steps{position:relative;list-style:none;margin:0;padding:0}
.cst__step{position:relative;padding-left:34px;padding-bottom:var(--space-120)}
.cst__step:last-child{padding-bottom:0}
.cst__step::before{content:"";position:absolute;left:0;top:2px;width:11px;height:11px;
  border-radius:50%;box-sizing:border-box;background:var(--paper);border:1px solid var(--line-2)}
.cst__step:not(:last-child)::after{content:"";position:absolute;left:5px;top:2px;bottom:0;
  width:1px;background:var(--line-2)}
.cst__k{display:block;font-family:var(--font-sans);font-weight:600;font-size:11px;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* event statement = sans (Fraunces is reserved for headers); statement-weight, not display */
.cst__d{font-family:var(--font-sans);font-weight:500;font-size:20px;line-height:1.45;
  letter-spacing:0;color:var(--ink);margin:var(--space-10) 0 0}
.cst__d .fig{color:var(--accent-700);font-weight:600;font-variant-numeric:tabular-nums}
.cst__note{font-family:var(--font-sans);font-weight:400;font-size:14px;line-height:1.6;
  color:var(--ink-3);margin:var(--space-20) 0 0}
/* citations reuse .cs__cite/.cs__chip/.cs__pop — force visible here (no is-active state) */
.cst__step .cs__cite{opacity:1;margin-top:var(--space-20)}

@media (max-width:820px){
  .cst__inner{grid-template-columns:1fr;gap:var(--space-40)}
  .cst__aside{position:static}
  .cst__media{margin-top:var(--space-40)}
  .cst__frame{aspect-ratio:3/2;max-height:42vh}
  .cst__step{padding-bottom:var(--space-60)}
}