/* Naytra — transmission chain, variant D (Figma 160:11): a sticky left header beside
   a stacked list of the 5 steps. Each row = step label + image + headline + note +
   source chip, hairline-separated. Light section. Fraunces + DM Sans, system tokens,
   frame grid. Depends on tokens.css + base.css. */

.chl{
  --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);
}

/* Full-bleed on the 12-column grid: header spans cols 1–4, the list spans cols 5–12,
   separated by one grid gutter. Edge-to-edge with 6vw padding. */
.chl__inner{
  padding:0 clamp(var(--space-40),6vw,var(--space-120));
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);align-items:start}

/* Left — shared section-header treatment, sticky while the list scrolls past */
.chl__head{grid-column:1 / 5;position:sticky;top:clamp(88px,12vh,128px)}
.chl__eyebrow{font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-700);margin:0 0 var(--space-20)}
.chl__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(30px,3.8vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0;
  max-width:14ch;text-wrap:balance}
.chl__body{font-family:var(--font-sans);font-weight:400;font-size:17px;
  line-height:1.5;color:var(--ink-2);margin:var(--space-20) 0 0;max-width:32ch}

/* Right — content starts near the middle (col 7) and runs to the right padding edge.
   Each step stacks the label above its content. First row top-aligns with the TITLE
   (nudged down past the eyebrow). */
.chl__list{grid-column:7 / -1;list-style:none;margin:0;padding:0;
  margin-top:calc(12px * 1.2 + var(--space-20));counter-reset:chl}
.chl__row{padding:clamp(var(--space-60),6vw,var(--space-80)) 0;border-top:1px solid var(--line)}
.chl__row:first-child{border-top:0;padding-top:0}

.chl__label{font-family:var(--font-sans);font-weight:400;font-size:24px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--space-30)}
.chl__label::before{counter-increment:chl;
  content:counter(chl,decimal-leading-zero) ".";margin-right:.5em;
  font-variant-numeric:tabular-nums;color:var(--ink)}

/* content column — image, then headline / note / source */
.chl__media{aspect-ratio:16/9;width:100%;background:var(--sunk) center/cover no-repeat;
  border:1px solid var(--line);overflow:hidden}
.chl__media + .chl__d{margin-top:var(--space-30)}
.chl__d{font-family:var(--font-sans);font-weight:400;font-size:clamp(17px,1.7vw,20px);
  line-height:1.4;letter-spacing:-.005em;color:var(--ink);margin:var(--space-30) 0 0}
.chl__d .fig{color:var(--accent-700);font-weight:600;font-variant-numeric:tabular-nums}
.chl__note{font-family:var(--font-sans);font-weight:400;font-size:14px;line-height:1.6;
  color:var(--ink-3);margin:var(--space-10) 0 0;max-width:46ch}

/* Sources capsule reuses the chain's citation popover (.cs__cite → hover popup wired
   by chain.js). Force it visible here (chain.css hides it until a step is active). */
.chl .cs__cite{opacity:1;margin-top:var(--space-30)}

@media (max-width:860px){
  .chl__inner{grid-template-columns:1fr;gap:clamp(32px,6vw,56px)}
  .chl__head{grid-column:auto;position:static}
  .chl__list{grid-column:auto;margin-top:0}
  .chl__title,.chl__body{max-width:none}
}