/* ============================================================
   Augusta 12 scrollytelling chapters (issue #13), scoped under
   .chapters-root. Each <section class="chapter"> pairs a sticky
   top-down figure (desktop) with scrolling text steps; on phones
   the figure sits above its steps, not sticky. chapters.js drives
   the active step via IntersectionObserver and redraws the canvas
   figure deterministically from data/003_chapters.json.
   ============================================================ */

.chapters-root{margin-top:8px;}

.chapter{
  margin:56px 0;
  padding-top:8px;
}
.chapter:first-child{margin-top:24px;}

.chapter-kicker{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-bottom:10px;
}
.chapter h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:24px;
  line-height:1.28;
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:3px double var(--line);
  max-width:34ch;
}

/* Chapters with a figure: sticky two-column layout on desktop. The
   kicker and h2 stay full-width block children of .chapter-scroll;
   only .chapter-scroll-inner (figure column + steps column) is a
   grid, so the heading never becomes a grid item itself. */
.chapter-scroll .chapter-scroll-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
}
.chapter-scroll .chapter-figure-col{
  position:sticky;
  top:20px;
  align-self:start;
}
.chapter-scroll .chapter-steps-col{min-width:0;}

/* Figures without a scroll walk (chapter 1, chapter 7): single
   static block, no sticky needed, figure above its one caption. */
.chapter-static .chapter-figure-col{position:static;}

.chapter-figure{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
}
.chapter-figure canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
}
.chapter-figure .figure-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.chapter-figure .figure-legend .legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.chapter-figure .figure-legend .swatch{
  flex:none;
  width:13px;
  height:13px;
  border-radius:50%;
}
.chapter-figure .figure-legend .swatch.aim{background:var(--clay);}
.chapter-figure .figure-legend .swatch.at-pin{
  background:transparent;
  border:1.5px dashed var(--muted);
}
.chapter-figure .figure-legend .swatch.water{background:var(--blue);}
.chapter-figure .figure-caption{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.6;
}

.figure-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.figure-stats .stat{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
  min-width:96px;
}
.figure-stats .stat .stat-label{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
.figure-stats .stat .stat-value{
  font-family:var(--mono);
  font-size:16px;
  font-weight:500;
  color:var(--ink);
}
.figure-stats .stat.is-water .stat-value{color:var(--blue-text);}
.figure-stats .stat.is-green .stat-value{color:var(--clay-text);}

/* Steps */
.chapter-steps-col .step{
  min-height:52vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px 0;
  border-left:3px solid transparent;
  padding-left:18px;
  opacity:.55;
  transition:opacity .2s ease, border-color .2s ease;
}
.chapter-steps-col .step:first-child{min-height:auto;padding-top:0;}
.chapter-steps-col .step.is-active{
  opacity:1;
  border-left-color:var(--clay);
}
.chapter-steps-col .step .step-tier{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-bottom:8px;
}
.chapter-steps-col .step p{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.7;
  max-width:56ch;
  margin-bottom:12px;
}
.chapter-steps-col .step p:last-child{margin-bottom:0;}
.chapter-steps-col .step p strong{color:var(--ink);}
.chapter-steps-col .step .verdict-line{
  font-family:var(--serif);
  font-weight:600;
  font-size:17px;
  color:var(--ink);
  line-height:1.4;
  max-width:52ch;
  margin-bottom:10px;
}

@media (prefers-reduced-motion: reduce){
  .chapter-steps-col .step{transition:none;}
}

@media (max-width:820px){
  .chapter-scroll .chapter-scroll-inner{grid-template-columns:1fr;gap:18px;}
  .chapter-scroll .chapter-figure-col{position:static;}
  .chapter-steps-col .step{min-height:auto;padding:16px 0;}
}

/* ---------- deterministic capture card (?chapter=N&step=M) ---------- */
/* Every chapter section not the captured one, wherever it lives (inside
   .chapters-root or, like "the move" and "method and sources", a later
   sibling of it) -- plus every other page chrome section -- stays hidden,
   so the only thing left on the cream page is the one card. */
body.capture-mode .site-header,
body.capture-mode .article-header,
body.capture-mode .hero-scene,
body.capture-mode .chapter:not(.is-captured),
body.capture-mode .site-footer{
  display:none !important;
}
body.capture-mode .chapter.is-captured{margin:0;}
body.capture-mode .chapter.is-captured .chapter-scroll-inner{
  display:block;
}
body.capture-mode .chapter.is-captured .chapter-steps-col{display:none;}

/* Native 1080x1350 CSS px, no post-hoc upscale: the social export screenshots
   this element straight at deviceScaleFactor 1, so every dimension and type
   size below is sized for the real output canvas, not a smaller card scaled
   up afterward (the old 420px card, upscaled ~2.6x by export.mjs, is what
   produced the soft type this replaces). Centered on the cream page via
   body.capture-mode below. */
.capture-card{
  width:1080px;
  max-width:1080px;
  height:1350px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:56px;
  box-sizing:border-box;
}
.capture-card .capture-kicker{
  font-family:var(--mono);
  font-size:28px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-bottom:20px;
}
.capture-card .capture-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:56px;
  line-height:1.2;
  margin-bottom:32px;
}
.capture-card .capture-figure{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.capture-card .capture-figure canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}
.capture-card .capture-caption{
  font-family:var(--sans);
  font-size:34px;
  color:var(--ink-soft);
  line-height:1.45;
  margin-top:32px;
}
.capture-card .capture-wordmark{
  font-family:var(--mono);
  font-size:22px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:auto;
  padding-top:28px;
}
/* Plain block flow, not flex/grid: a flex or grid container's own sizing
   algorithm for an aspect-ratio child with align/justify-items other than
   stretch shrank the 1080px card well below its explicit width in testing.
   Block flow plus the card's own margin:0 auto centers it exactly, with no
   such interaction. */
body.capture-mode{
  min-height:100vh;
  margin:0;
  padding:48px 0;
  background:var(--bg);
}
body.capture-mode .wrap{margin:0;padding:0;max-width:none;}
body.capture-mode .chapters-root{margin:0;}

/* ---------- cta-card / sources / closer (mirrors the 002 page) ---------- */
.post .cta-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
  margin:36px 0;
}
.post .cta-card .kicker{display:block;margin-bottom:10px;}
.post .cta-card h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  max-width:42ch;
  line-height:1.3;
  margin-bottom:10px;
}
.post .cta-card p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:60ch;
  margin-bottom:8px;
}
.post .cta-card .btn{margin-top:4px;}

.post .sources h2{margin-top:44px;}
.post .sources dl{max-width:72ch;}
.post .sources dt{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clay-text);
  margin-top:18px;
  margin-bottom:6px;
}
.post .sources dt:first-child{margin-top:0;}
.post .sources dd{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.65;
  margin-left:0;
}
.post .sources dd .badge-modeled{margin-left:6px;}

.post .closer{
  text-align:left;
  padding:36px 0 8px;
}
.post .closer p{
  font-family:var(--serif);
  font-weight:600;
  font-size:21px;
  max-width:38ch;
  line-height:1.4;
  margin-bottom:16px;
}

/* ---------- The move ---------- */
.the-move .move-pin-group{margin-bottom:28px;}
.the-move .move-pin-group h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:18px;
  margin-bottom:12px;
  color:var(--ink);
}
.the-move .move-line{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.7;
  max-width:70ch;
  margin-bottom:10px;
  padding-left:18px;
  border-left:3px solid var(--line);
}
.the-move .move-line strong{color:var(--ink);}
.the-move .move-line .move-number{
  font-family:var(--mono);
  font-size:13px;
  color:var(--clay-text);
}

/* ---------- Method + sources chart ---------- */
.chart-bars{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.chart-bars canvas{display:block;width:100%;height:auto;}
.chart-bars .figure-caption{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.6;
}

.anchor-table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 20px;
  font-size:13.5px;
}
.anchor-table th,
.anchor-table td{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
  vertical-align:top;
}
.anchor-table th{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.anchor-table td:first-child{color:var(--ink);font-weight:600;}
.anchor-table-wrap{overflow-x:auto;margin-bottom:20px;}

.flip-set-list{margin:0 0 20px;padding-left:0;list-style:none;}
.flip-set-list li{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.65;
  padding-left:20px;
  position:relative;
  margin-bottom:8px;
}
.flip-set-list li::before{
  content:"\2192";
  position:absolute;
  left:0;
  color:var(--clay-text);
}