/*
 * Jimalytics stories layer v1.
 * Rules: tokens only, every selector starts with body.jds-story, components
 * use the st- prefix and never target GeneratePress classes (except the
 * small "frame" block below, which hides theme pieces the story replaces).
 * Story markup is semantic HTML: every word is in the page without JS.
 */

/* ---------- Frame: the story owns its header ---------- */
body.jds-story .entry-header,
body.jds-story #ez-toc-container,
body.jds-story .featured-image { display: none; }
body.jds-story.separate-containers .site-main { margin-top: 0; }
body.jds-story .site-content { display: block; }
body.jds-story .content-area { width: 100%; }
/* Full-bleed sections break out of the 720px column; clip at the page, not the
   article, so sticky positioning and scroll triggers keep working. */
html:has(body.jds-story), body.jds-story { overflow-x: clip; }
body.jds-story .inside-article { overflow: visible; }

/* ---------- Layout primitives ---------- */
body.jds-story .st-story { --st-measure: var(--j-measure); }
body.jds-story .st-prose,
body.jds-story .st-story > p,
body.jds-story .st-story > h2,
body.jds-story .st-story > h3,
body.jds-story .st-story > ul,
body.jds-story .st-story > ol {
  max-width: var(--st-measure);
  margin-left: auto;
  margin-right: auto;
}
body.jds-story .st-prose > * + * { margin-top: var(--j-space-5); }
body.jds-story .st-prose p { margin: 0; }
body.jds-story .st-prose { margin-top: var(--j-space-7); margin-bottom: var(--j-space-7); }


body.jds-story .st-kicker {
  margin: 0;
  font-family: var(--j-font-mono);
  font-size: var(--j-text-xs);
  letter-spacing: var(--j-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--j-weight-medium);
  color: var(--j-muted);
}

/* ---------- Hero ---------- */
body.jds-story .st-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: min(82vh, 760px);
  display: flex;
  align-items: flex-end;
  background: var(--j-brand);
  color: var(--j-on-brand);
  overflow: hidden;
  isolation: isolate;
}
body.jds-story .st-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
body.jds-story .st-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--j-brand) 10%, transparent 70%);
  pointer-events: none;
}
body.jds-story .st-hero__inner {
  width: min(var(--j-wide), calc(100vw - 2 * var(--j-gutter)));
  margin: 0 auto;
  padding: var(--j-space-9) 0 var(--j-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--j-space-4);
}
body.jds-story .st-hero .st-kicker { color: var(--j-accent-3); }
body.jds-story .st-hero__title {
  margin: 0;
  max-width: 14em;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: var(--j-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--j-on-brand);
}
body.jds-story .st-hero__dek {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  color: var(--j-on-ink);
}
body.jds-story .st-hero__byline {
  margin: var(--j-space-2) 0 0;
  font-family: var(--j-font-mono);
  font-size: var(--j-text-sm);
  color: var(--j-accent-3);
}

/* ---------- Pull quote / big line ---------- */
body.jds-story .st-pull {
  max-width: var(--j-wide);
  margin: var(--j-space-8) auto;
  padding: 0 var(--j-gutter);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--j-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--j-ink);
  text-wrap: balance;
}
body.jds-story .st-pull em { font-style: normal; color: var(--j-brand); }

/* ---------- Stat callout ---------- */
body.jds-story .st-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--j-space-5);
  margin: var(--j-space-7) auto;
}
body.jds-story .st-stat {
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--j-space-5);
  border-radius: var(--j-radius-lg);
  background: var(--j-surface);
  display: flex;
  flex-direction: column;
  gap: var(--j-space-2);
}
body.jds-story .st-stat__value {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: var(--j-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--j-brand);
  font-variant-numeric: tabular-nums;
}
body.jds-story .st-stat__label { font-size: var(--j-text-md); line-height: 1.45; color: var(--j-text); }
body.jds-story .st-stat__source { font-size: var(--j-text-sm); color: var(--j-muted); }

/* ---------- Scrolly: sticky visual + steps ---------- */
body.jds-story .st-scrolly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--j-space-8) auto;
}
body.jds-story .st-scrolly__figure {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--j-space-3);
  padding: var(--j-space-5) 0;
  box-sizing: border-box;
  z-index: 0;
}
body.jds-story .st-scrolly__steps {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}
body.jds-story .st-step {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--j-space-6) 0;
}
body.jds-story .st-step:first-child { padding-top: 40vh; }
body.jds-story .st-step:last-child { min-height: 100vh; }
body.jds-story .st-step__card,
body.jds-story .st-scrolly .st-section__head {
  pointer-events: auto;
  max-width: 26rem;
  padding: var(--j-space-5);
  border-radius: var(--j-radius-lg);
  background: var(--j-paper);
  box-shadow: 0 1px 2px rgb(27 27 58 / 0.08), 0 12px 32px rgb(27 27 58 / 0.12);
  font-size: var(--j-text-body);
  line-height: 1.6;
  color: var(--j-text);
}
body.jds-story .st-step__card > * + * { margin-top: var(--j-space-3); }
body.jds-story .st-step__card p { margin-bottom: 0; }
body.jds-story .st-step__card h2,
body.jds-story .st-step__card h3 {
  margin: 0;
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
  line-height: var(--j-leading-snug);
  color: var(--j-ink);
}
body.jds-story .st-step__num {
  font-family: var(--j-font-mono);
  font-size: var(--j-text-xs);
  letter-spacing: var(--j-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--j-brand);
}

@media (min-width: 900px) {
  body.jds-story .st-scrolly { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--j-space-7); }
  body.jds-story .st-scrolly__figure { grid-column: 2; grid-row: 1; }
  body.jds-story .st-scrolly__steps { grid-column: 1; grid-row: 1; margin-top: 0; }
  body.jds-story .st-step__card,
  body.jds-story .st-scrolly .st-section__head { box-shadow: none; background: transparent; padding: 0; }
  body.jds-story .st-step { opacity: 0.35; transition: opacity var(--j-duration) var(--j-ease); }
  body.jds-story .st-step.is-active,
  body.jds-story .st-scrolly:not(.is-ready) .st-step { opacity: 1; }
}

/* ---------- Chapters: sections inside a scrolly (v1.2) ----------
   One continuous animation, several sections. Each section head scrolls with the
   text column (a card on mobile, like the steps); the reader bar, Contents, skim
   and resume treat them as ordinary sections. */
body.jds-story .st-scrolly .st-section { margin: 0; }
body.jds-story .st-scrolly .st-section + .st-section { border-top: 0; padding-top: 0; }
body.jds-story .st-scrolly .st-section__head { margin: 30vh 0 0; }
body.jds-story .st-scrolly .st-section:first-child .st-section__head { margin-top: 40vh; }
body.jds-story .st-scrolly .st-section__head h2 { font-size: var(--j-text-xl); }
body.jds-story .st-scrolly .st-section .st-step:first-child { padding-top: var(--j-space-6); }
body.jds-story .st-scrolly .st-section .st-step:last-child { min-height: 90vh; }
body.jds-story .st-scrolly .st-section:last-child .st-step:last-child { min-height: 100vh; }

/* ---------- Rain simulation figure ---------- */
body.jds-story .st-sim {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: var(--j-radius-xl);
  background: var(--j-ink);
  overflow: hidden;
}
body.jds-story .st-sim__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.jds-story .st-sim__fallback {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--j-space-5);
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--j-space-2);
  color: var(--j-on-ink);
  font-size: var(--j-text-md);
}
body.jds-story .st-sim.is-live .st-sim__fallback {
  /* Kept for screen readers and crawlers, hidden visually once the canvas runs. */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
}
body.jds-story .st-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--j-space-2) var(--j-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--j-text-sm);
  color: var(--j-text);
}
body.jds-story .st-legend li { display: inline-flex; align-items: center; gap: var(--j-space-2); margin: 0; }
body.jds-story .st-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--st-swatch, var(--j-accent));
}
body.jds-story .st-scrolly__figure figcaption,
body.jds-story .st-figure figcaption {
  font-size: var(--j-text-sm);
  color: var(--j-muted);
}

/* ---------- Comparison ---------- */
body.jds-story .st-compare {
  display: flex;
  flex-wrap: wrap;
  gap: var(--j-space-5);
  margin: var(--j-space-8) auto;
}
body.jds-story .st-compare__col {
  flex: 1 1 300px;
  min-width: 0;
  padding: var(--j-space-6);
  border-radius: var(--j-radius-lg);
  border: 1px solid var(--j-line);
  background: var(--j-paper);
}
body.jds-story .st-compare__col--good { background: var(--j-brand); border-color: var(--j-brand); color: var(--j-on-ink); }
body.jds-story .st-compare__col h3 {
  margin: var(--j-space-2) 0 var(--j-space-4);
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
  color: var(--j-ink);
}
body.jds-story .st-compare__col--good h3 { color: var(--j-on-brand); }
body.jds-story .st-compare__col--good .st-kicker { color: var(--j-accent-3); }
body.jds-story .st-compare__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--j-space-3); }
body.jds-story .st-compare__col li { margin: 0; padding-left: 1.5em; position: relative; font-size: var(--j-text-md); line-height: 1.5; }
body.jds-story .st-compare__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 2px;
  background: var(--j-signal);
}
body.jds-story .st-compare__col--good li::before { background: var(--j-accent-3); }

/* ---------- Callout ---------- */
body.jds-story .st-callout {
  max-width: var(--j-measure);
  margin: var(--j-space-7) auto;
  padding: var(--j-space-5);
  border-radius: var(--j-radius-lg);
  background: var(--j-surface);
}
body.jds-story .st-callout .st-kicker { color: var(--j-brand); margin-bottom: var(--j-space-2); }
body.jds-story .st-callout p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--j-ink); }

/* ---------- Figure ---------- */
body.jds-story .st-figure { margin: var(--j-space-7) auto; }
body.jds-story .st-figure img { width: 100%; height: auto; border-radius: var(--j-radius-lg); display: block; }
body.jds-story .st-figure figcaption { margin-top: var(--j-space-2); }

/* ---------- Placeholder (drafting aid; never publish with these) ---------- */
body.jds-story .st-todo {
  display: inline;
  padding: 0 0.25em;
  border-radius: var(--j-radius-sm);
  background: var(--j-signal-soft);
  color: var(--j-ink);
  font-family: var(--j-font-mono);
  font-size: 0.85em;
}

@media (max-width: 768px) {
  body.jds-story .st-hero { min-height: 72vh; }
  body.jds-story .st-hero__inner { padding: var(--j-space-8) 0 var(--j-space-7); }
  body.jds-story .st-step__card { font-size: var(--j-text-md); }
  body.jds-story .st-scrolly__figure { padding: var(--j-space-4) 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.jds-story .st-step { transition: none; }
}

/* ---------- Width modifiers (last, so they win over component margins) ---------- */
body.jds-story .st-story .st-wide {
  --st-w: min(var(--j-wide), calc(100vw - 2 * var(--j-gutter)));
  width: var(--st-w);
  margin-left: calc(50% - var(--st-w) / 2);
  margin-right: calc(50% - var(--st-w) / 2);
}
body.jds-story .st-story .st-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (max-width: 768px) {
  body.jds-story .st-story .st-wide { --st-w: calc(100vw - 2 * var(--j-space-4)); }
}

/* =====================================================================
 * Article framework v1: sections + reader tools
 * Anatomy: .st-hero, then .st-section blocks. Each section has a head
 * (number, h2, .st-skim one-liner) and a body. Reader tools are built by
 * stories.js from the sections, so they work on every story automatically.
 * ===================================================================== */

/* ---------- Sections ---------- */
body.jds-story .st-section {
  scroll-margin-top: calc(var(--st-bar-h, 0px) + var(--j-space-4));
  margin: var(--j-space-8) 0;
}
body.jds-story .st-section__head {
  max-width: var(--j-measure);
  margin: 0 auto var(--j-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--j-space-3);
}
body.jds-story .st-section__num {
  margin: 0;
  font-family: var(--j-font-mono);
  font-size: var(--j-text-xs);
  letter-spacing: var(--j-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--j-weight-medium);
  color: var(--j-brand);
}
body.jds-story .st-section__head h2 {
  margin: 0;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: var(--j-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--j-ink);
}
/* The one-line summary. Visible in both modes: it doubles as a section dek,
   so skimmers get the point without a toggle and nothing is hidden text. */
body.jds-story .st-skim {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--j-muted);
}
body.jds-story .st-section__body > p,
body.jds-story .st-section__body > h3,
body.jds-story .st-section__body > ul,
body.jds-story .st-section__body > ol,
body.jds-story .st-section__body > blockquote {
  max-width: var(--j-measure);
  margin-left: auto;
  margin-right: auto;
}
body.jds-story .st-section__body > p { margin-top: 0; margin-bottom: var(--j-space-5); }
body.jds-story .st-section__body > h3 {
  margin-top: var(--j-space-7);
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
  color: var(--j-ink);
}
body.jds-story .st-section + .st-section { border-top: 1px solid var(--j-line); padding-top: var(--j-space-8); }

/* ---------- Skim mode ---------- */
body.jds-story.st-skimming .st-section__body { display: none; }
body.jds-story.st-skimming .st-section { margin: 0; padding: var(--j-space-6) 0; }
body.jds-story.st-skimming .st-section__head { margin-bottom: 0; }
body.jds-story .st-section__expand { display: none; }
body.jds-story.st-skimming .st-section__expand {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--j-space-2);
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--j-brand);
  font-family: var(--j-font-sans);
  font-size: var(--j-text-md);
  font-weight: var(--j-weight-semibold);
  cursor: pointer;
}
body.jds-story.st-skimming .st-section__expand:hover { color: var(--j-interactive); background: none; }

/* Skim mode, text sections (v1.1, v1.2): data-skim="text" on a section, or on a
   scrolly that holds chapter sections, keeps the words in skim mode. Scrollies
   flatten to plain prose; their animation is hidden. */
body.jds-story.st-skimming [data-skim="text"] .st-section__body,
body.jds-story.st-skimming .st-section[data-skim="text"] .st-section__body { display: block; }
body.jds-story.st-skimming [data-skim="text"] .st-section__expand,
body.jds-story.st-skimming .st-section[data-skim="text"] .st-section__expand { display: none; }
body.jds-story.st-skimming .st-section[data-skim="text"] .st-section__head { margin-bottom: var(--j-space-6); }
body.jds-story.st-skimming [data-skim="text"] .st-scrolly,
body.jds-story.st-skimming .st-scrolly[data-skim="text"] { display: block; max-width: var(--j-measure); margin: 0 auto; }
body.jds-story.st-skimming [data-skim="text"] .st-scrolly__figure { display: none; }
body.jds-story.st-skimming [data-skim="text"] .st-scrolly__steps { margin-top: 0; pointer-events: auto; }
body.jds-story.st-skimming [data-skim="text"] .st-step,
body.jds-story.st-skimming [data-skim="text"] .st-section .st-step:first-child,
body.jds-story.st-skimming [data-skim="text"] .st-section .st-step:last-child,
body.jds-story.st-skimming [data-skim="text"] .st-section:last-child .st-step:last-child { display: block; min-height: 0; padding: 0; opacity: 1; }
body.jds-story.st-skimming [data-skim="text"] .st-step__card {
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: var(--j-text-body);
  line-height: var(--j-leading-body);
}
body.jds-story.st-skimming [data-skim="text"] .st-step__num { display: none; }
body.jds-story.st-skimming [data-skim="text"] .st-step__card p { margin: 0 0 var(--j-space-5); }
/* Chapter heads in skim mode read as plain section heads. */
body.jds-story.st-skimming .st-scrolly[data-skim="text"] .st-section { padding: 0; }
body.jds-story.st-skimming .st-scrolly[data-skim="text"] .st-section__head {
  max-width: none;
  margin: var(--j-space-8) 0 var(--j-space-5);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.jds-story.st-skimming .st-scrolly[data-skim="text"] .st-section:first-child .st-section__head { margin-top: 0; }

/* ---------- Reader bar (built by JS) ---------- */
body.jds-story .st-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--j-paper);
  border-bottom: 1px solid var(--j-line);
  transform: translateY(-110%);
  transition: transform var(--j-duration) var(--j-ease);
}
body.jds-story .st-bar.is-shown { transform: none; }
body.jds-story .st-bar__inner {
  max-width: var(--j-container);
  margin: 0 auto;
  padding: 0 var(--j-gutter);
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--j-space-4);
}
body.jds-story .st-bar__where {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--j-space-3);
  white-space: nowrap;
  overflow: hidden;
}
body.jds-story .st-bar__num { font-family: var(--j-font-mono); font-size: var(--j-text-xs); color: var(--j-brand); font-weight: var(--j-weight-medium); }
body.jds-story .st-bar__title { font-size: 0.9375rem; font-weight: var(--j-weight-semibold); color: var(--j-ink); overflow: hidden; text-overflow: ellipsis; }
body.jds-story .st-bar__story { font-size: var(--j-text-sm); color: var(--j-muted); overflow: hidden; text-overflow: ellipsis; }
body.jds-story .st-bar__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--j-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--j-space-2);
  border: 1.5px solid var(--j-line);
  border-radius: var(--j-radius-md);
  background: var(--j-paper);
  color: var(--j-ink);
  font-family: var(--j-font-sans);
  font-size: var(--j-text-sm);
  font-weight: var(--j-weight-semibold);
  cursor: pointer;
}
body.jds-story .st-bar__btn:hover { border-color: var(--j-brand); background: var(--j-paper); color: var(--j-brand); }
body.jds-story .st-bar__btn[aria-pressed="true"] { background: var(--j-brand); border-color: var(--j-brand); color: var(--j-on-brand); }
body.jds-story .st-bar__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background: var(--j-brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
/* Before the bar shows (over the hero), a slim progress line still tracks reading. */
body.jds-story .st-progress-top {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 999;
  background: var(--j-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* Contents panel */
body.jds-story .st-toc {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--j-gutter);
  width: min(380px, calc(100vw - 2 * var(--j-gutter)));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: var(--j-space-3);
  background: var(--j-paper);
  border: 1px solid var(--j-line);
  border-radius: var(--j-radius-lg);
  box-shadow: 0 12px 32px rgb(27 27 58 / 0.16);
}
body.jds-story .st-toc[hidden] { display: none; }
body.jds-story .st-toc ol { list-style: none; margin: 0; padding: 0; }
body.jds-story .st-toc li { margin: 0; }
body.jds-story .st-toc a {
  display: flex;
  gap: var(--j-space-3);
  align-items: baseline;
  padding: var(--j-space-3);
  border-radius: var(--j-radius-md);
  color: var(--j-ink);
  text-decoration: none;
  font-size: var(--j-text-md);
  line-height: 1.35;
}
body.jds-story .st-toc a:hover { background: var(--j-surface); color: var(--j-brand); }
body.jds-story .st-toc__num { flex: 0 0 3.25em; white-space: nowrap; font-family: var(--j-font-mono); font-size: var(--j-text-xs); color: var(--j-muted); }
body.jds-story .st-toc a.is-current { background: var(--j-accent-4); color: var(--j-brand); font-weight: var(--j-weight-semibold); }
body.jds-story .st-toc a.is-read .st-toc__num { color: var(--j-brand); }
body.jds-story .st-toc a.is-read .st-toc__num::after { content: " ✓"; }

/* Resume prompt */
body.jds-story .st-resume {
  position: fixed;
  left: 50%;
  bottom: var(--j-space-5);
  z-index: 1001;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 2 * var(--j-space-4)));
  box-sizing: border-box;
  padding: var(--j-space-4) var(--j-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--j-space-3) var(--j-space-4);
  background: var(--j-ink);
  color: var(--j-on-ink);
  border-radius: var(--j-radius-lg);
  box-shadow: 0 12px 32px rgb(27 27 58 / 0.3);
}
body.jds-story .st-resume[hidden] { display: none; }
body.jds-story .st-resume__text { flex: 1 1 220px; font-size: var(--j-text-md); line-height: 1.4; }
body.jds-story .st-resume__text strong { color: var(--j-on-brand); }
body.jds-story .st-resume button { min-height: 40px; }
body.jds-story .st-resume__go { background: var(--j-accent-3); color: var(--j-brand); border: 0; border-radius: var(--j-radius-md); padding: 0 var(--j-space-4); font-weight: var(--j-weight-semibold); cursor: pointer; }
body.jds-story .st-resume__go:hover { background: var(--j-paper); color: var(--j-brand); }
body.jds-story .st-resume__close { background: none; border: 0; color: var(--j-accent-3); width: 40px; padding: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; }
body.jds-story .st-resume__close:hover { background: none; color: var(--j-on-brand); }

/* Read time in the hero byline */
body.jds-story .st-hero__readtime:not(:empty)::before { content: " · "; }

/* Sticky visuals sit below the reader bar */
body.jds-story .st-scrolly__figure { top: var(--st-bar-h, 0px); height: calc(100svh - var(--st-bar-h, 0px)); }

@media (max-width: 640px) {
  body.jds-story .st-bar__story { display: none; }
  body.jds-story .st-bar__btn .st-bar__label { display: none; }
  body.jds-story .st-bar__inner { gap: var(--j-space-2); padding: 0 var(--j-space-4); }
  body.jds-story .st-toc { right: var(--j-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  body.jds-story .st-bar { transition: none; }
}
/* Logged-in admin bar */
body.jds-story.admin-bar .st-bar,
body.jds-story.admin-bar .st-progress-top { top: 32px; }
@media (max-width: 782px) {
  body.jds-story.admin-bar .st-bar,
  body.jds-story.admin-bar .st-progress-top { top: 46px; }
}