/* KEPT FOR PAGES BUILT BEFORE THE SCENE KIT (29 Oct 2026): a data story published with the old builder links this
   file, so it stays until every such page is rebuilt with design/ka-scenes.css and ka-scenes.js. New builds don't use it.
   datastory.css: a data story at /research/<slug>/ (ops/build_research_piece.py, type data-story; site/DESIGN.md "Data
   stories"). The hero, the article columns, the explorer, the method, the questions and the end matter are a research
   report's (story.css, design/pages/post.css, report.css); this file lays out the scenes between them, using the
   research story's step cards (story.css .step, .txt). Layout only: every color and size is a ka.css token.

   Two layouts from one markup, in page order: each .ds-scene holds its figure (.ds-fig, a library chart from
   build_charts.figure_html) and its steps (.ds-steps, one .step card per paragraph or fact card).
   - Without .ds-live (no JavaScript, reduced motion, print): the piece reads straight down. Each figure is a static
     figure (the chart, or its PNG and table without JavaScript), then its text, at the article column's width.
   - .ds-live (datastory.js, motion allowed): one grid. Every figure sits in the same sticky cell, so the figure column
     holds still while the steps scroll and datastory.js swaps the figure scene by scene. From 861px the figure is on
     the left and the steps scroll beside it; on a phone the figure docks under the header and the step cards scroll
     up over it. */
.ds,.ds-scene,.ds-fig,.ds-steps{box-sizing:border-box}
.ds{margin:clamp(28px,4vw,44px) 0 clamp(20px,3vw,32px)}

/* ---------- read straight down ---------- */
.ds:not(.ds-live) .ds-scene{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.ds:not(.ds-live) .ds-scene+.ds-scene{margin-top:clamp(40px,6vw,64px)}
.ds:not(.ds-live) .ds-fig{margin:0 0 26px}
.ds:not(.ds-live) .ds-steps{padding:0}
.ds:not(.ds-live) .step{display:block;min-height:0;padding:0}
.ds:not(.ds-live) .step .txt{max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;translate:none}
.ds:not(.ds-live) .step p,.ds:not(.ds-live) .step li{font-size:17px;line-height:1.65;color:var(--body)}
.ds:not(.ds-live) .step p{margin:0 0 18px}
.ds:not(.ds-live) .step p+p{margin-top:0}
.ds:not(.ds-live) .ds-fact .datafig{margin:6px 0 26px}
/* the scene's heading reads as the article's h2 does (the first step carries it) */
.ds .step h2{font-size:var(--fs-2xl);line-height:1.2;max-width:30ch;margin:0 0 14px}
.ds .step ul,.ds .step ol{margin:0 0 14px 20px;padding:0}
.ds .step li{margin-bottom:6px}
.ds .step a{overflow-wrap:anywhere}

/* ---------- the live story ---------- */
.ds.ds-live{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-rows:repeat(var(--ds-n,1),auto);column-gap:clamp(28px,3vw,44px);max-width:1180px;margin-inline:auto;padding:0 var(--gutter)}
.ds-live .ds-scene{display:contents}
/* every figure in the one sticky cell; only the scene being read is shown (.is-on). datastory.js tweens the swap with
   GSAP (opacity, transform) and clears its props, so no CSS transition runs on those */
.ds-live .ds-fig{grid-column:1;grid-row:1/-1;position:sticky;top:calc(var(--hdr-h) + 16px);align-self:start;height:calc(100svh - var(--hdr-h) - 32px);display:flex;align-items:center;visibility:hidden;opacity:0;pointer-events:none}
.ds-live .ds-fig.is-on{visibility:visible;opacity:1;pointer-events:auto}
.ds-live .ds-fig .datafig{width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:clamp(16px,1.8vw,24px)}
.ds-live .ds-fig .datafig-title{font-size:var(--fs-xl);line-height:1.25;max-width:none}
.ds-live .ds-fig .datafig-sub{font-size:var(--fs-sm);max-width:none}
.ds-live .ds-fig .datafig-body{margin-top:12px}
.ds-live .ds-steps{grid-column:2;grid-row:var(--r);position:relative;z-index:1}
.ds-live .ds-scene:first-child .ds-steps{padding-top:12vh}
.ds-live .ds-scene:last-child .ds-steps{padding-bottom:24vh}
.ds-live .step{min-height:72vh}
.ds-live .step h2{font-size:var(--fs-xl);line-height:1.25;margin:0 0 10px}
.ds-live .step .txt>*:last-child{margin-bottom:0}
.ds-live .step p{margin:0}
.ds-live .step p+p{margin-top:8px}
/* a fact card is a step of its own: the card is the step's whole content */
.ds-live .ds-fact .txt{padding:0;border:0;background:none;box-shadow:none}
html.js .ds-live .ds-fact.is-active .txt{box-shadow:none}
.ds-live .ds-fact .datafig{margin:0}

@media (max-width:860px){
  .ds.ds-live{--ds-dock:52svh;grid-template-columns:minmax(0,1fr);column-gap:0}
  /* the figure docks under the header. datastory.js narrows a chart that would take more than --ds-dock of the screen
     and writes the scene's figure height as --ds-dock-px (a compare or bullet chart cannot get shorter by getting
     narrower); each card starts below the figure, is read there, and scrolls up over it before the next one arrives */
  .ds-live .ds-fig{top:var(--hdr-h);height:auto;display:block;padding-top:8px;z-index:0}
  .ds-live .ds-fig .datafig{max-height:none;overflow:visible;padding:12px 12px 8px;box-shadow:var(--sh-hover)}
  .ds-live .ds-fig .datafig-label{margin-bottom:2px}
  .ds-live .ds-fig .datafig-title{font-size:var(--fs-base);line-height:1.3;margin-bottom:0}
  /* the subtitle, the table and the chart's source line are in the page for the straight-down reading, on the chart's
     page and in Sources; the docked figure keeps its title, the chart, the brand mark and the share link */
  .ds-live .ds-fig .datafig-sub,.ds-live .ds-fig .datafig-table,.ds-live .ds-fig .kc-meta{display:none}
  .ds-live .ds-fig .kc-brand{margin-top:6px;padding-top:6px}
  .ds-live .ds-fig [data-chart-src]{margin-inline:auto}
  .ds-live .ds-fig .datafig-body{margin-top:6px}
  .ds-live .ds-fig .datafig-foot{margin-top:2px}
  .ds-live .ds-steps{grid-column:1;z-index:2}
  .ds-live .ds-scene:first-child .ds-steps{padding-top:calc(var(--ds-dock-px,var(--ds-dock)) + 28px)}
  .ds-live .ds-scene:last-child .ds-steps{padding-bottom:16svh}
  .ds-live .step{display:block;min-height:0;padding:0 0 calc(var(--ds-gap,var(--ds-dock-px,var(--ds-dock))) + var(--hdr-h) + 56px)}
  /* the next scene's figure may be taller (up to 72% of the screen), so the last card of a scene leaves that much room */
  .ds-live .ds-steps>.step:last-child{--ds-gap:72svh}
  .ds-live .ds-scene:last-child .step:last-child{padding-bottom:0}
  html.js .ds-live .step .txt{background:var(--surface)}
  .ds-live .step .txt{max-width:none;width:100%;padding:16px 18px}
  .ds-live .step h2{font-size:var(--fs-lg)}
  .ds-live .ds-fact .txt{padding:0}
}
@media print{.ds-live .ds-fig{visibility:visible;opacity:1}}