/* Byline Habibi Story — page-side layout. Everything scoped to .bt-story.
   Typography follows the Byline Times theme: Trade Gothic Next Condensed for headings and meta,
   Source Serif 4 for running text. The chapter column lines up with the article column
   (--wp--style--global--content-size); the graphic sits in the wide right-hand margin. */
.bt-story.bt-story{--bt-red:#c23330;--bt-ink:#231f1e;--bt-muted:#777475;--bt-rule:#e4e0dc;
  --bt-head:trade-gothic-next-condensed,"Arial Narrow",Arial,Helvetica,sans-serif;
  --bt-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  box-sizing:border-box;width:100%;max-width:min(100%,var(--wp--style--global--wide-size,1200px));margin:32px auto 56px;padding:0 16px;color:var(--bt-ink);font-size:18px}
.bt-story *{box-sizing:border-box}
.bt-story .bt-story__inner{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:clamp(20px,3vw,44px);align-items:start;position:relative;
  margin-left:max(0px,calc((100% - var(--wp--style--global--content-size,50rem)) / 2))}
.bt-story .bt-story__chapters{min-width:0}
.bt-story .bt-story__chapter{min-height:52vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vw,48px) 0;scroll-margin-top:120px;opacity:.38;transition:opacity .35s ease}
.bt-story .bt-story__chapter.is-active{opacity:1}
.bt-story .bt-story__chapter:first-child{padding-top:8px}
.bt-story .bt-story__kicker{font-family:var(--bt-head);font-size:14px;line-height:1.2;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--bt-red);margin:0 0 10px}
.bt-story .bt-story__title{font-family:var(--bt-head);font-size:clamp(26px,2.4vw,34px);line-height:1;font-weight:800;letter-spacing:0;margin:0 0 16px;color:var(--bt-ink);text-wrap:balance}
.bt-story .bt-story__body{font-family:var(--bt-serif);font-size:18px;line-height:28px;font-weight:400;margin:0 0 16px;color:var(--bt-ink)}
.bt-story .bt-story__body a{color:#1552ad}
.bt-story .bt-story__note{font-family:var(--bt-head);font-size:16px;line-height:22px;color:var(--bt-muted);margin:4px 0 0;padding-top:10px;border-top:1px solid var(--bt-rule);max-width:36em}
.bt-story .bt-story__sticky{position:sticky;top:clamp(70px,10vh,110px);align-self:start}
.bt-story .bt-story__frame{display:block;width:100%;height:720px;border:0;border-radius:14px;background:#15181d;transition:height .25s ease}
@media(max-width:860px){
  .bt-story.bt-story{padding:0 14px}
  .bt-story .bt-story__inner{display:flex;flex-direction:column;margin-left:0}
  .bt-story .bt-story__sticky{order:-1;align-self:stretch;width:auto;position:sticky;top:0;z-index:2;margin:0 -14px 6px;padding:6px 6px 8px;background:#fff}
  .bt-story .bt-story__frame{border-radius:12px;height:440px}
  .bt-story .bt-story__chapter{min-height:0;padding:26px 0;opacity:1}
  .bt-story .bt-story__chapter:first-child{padding-top:10px}
  .bt-story .bt-story__title{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.bt-story .bt-story__chapter,.bt-story .bt-story__frame{transition:none}}

/* ---- Overlay layout: one dark stage, the graphic fills it, the text steps scroll over its left side ---- */
.bt-story.bt-story--overlay{padding:0;background:#15181d;border-radius:14px;--bt-stage-top:clamp(56px,8vh,88px)}
/* Same width wherever the shortcode sits: inside a narrow Group block the stage still spans the theme's wide size. */
.bt-story.bt-story--overlay{--bt-w:min(var(--wp--style--global--wide-size,1200px),calc(100vw - 32px));width:var(--bt-w)!important;max-width:none!important;position:relative;left:min(0px,calc((100% - var(--bt-w)) / 2))}
.bt-story--overlay .bt-story__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-left:0}
.bt-story--overlay .bt-story__inner > *{grid-area:1/1}
.bt-story--overlay .bt-story__sticky{position:sticky;top:var(--bt-stage-top);height:min(calc(100vh - var(--bt-stage-top) - 12px),860px);align-self:start}
.bt-story--overlay .bt-story__frame{height:100%!important;background:#15181d;transition:none}
.bt-story--overlay .bt-story__progress{position:absolute;left:14px;right:14px;top:0;height:2px;background:rgba(255,255,255,.08);z-index:3;border-radius:2px;overflow:hidden}
.bt-story--overlay .bt-story__progress i{display:block;height:100%;width:0;background:#ff8d88;transition:width .4s ease}
.bt-story--overlay .bt-story__chapters{position:relative;z-index:2;pointer-events:none;width:min(36%,420px);margin-left:clamp(22px,3.2vw,48px)}
.bt-story--overlay .bt-story__chapter{min-height:88vh;padding:0;opacity:.18;justify-content:center}
.bt-story--overlay .bt-story__chapter:first-child{padding-top:0}
.bt-story--overlay .bt-story__chapter:last-child{min-height:100vh}
.bt-story--overlay .bt-story__chapter.is-active{opacity:1}
.bt-story--overlay .bt-story__card{pointer-events:auto}
.bt-story--overlay .bt-story__kicker{color:#ff8d88;font-size:15px;margin-bottom:12px}
.bt-story--overlay .bt-story__title{color:#fff;font-size:clamp(30px,3vw,44px);margin-bottom:14px}
.bt-story--overlay .bt-story__body{color:#f4f3f1;font-size:clamp(19px,1.6vw,23px);line-height:1.42;margin-bottom:12px}
.bt-story--overlay .bt-story__note{color:#9aa0ab;border-top-color:#353b46}
@media(max-width:860px){
  .bt-story.bt-story--overlay{padding:0;border-radius:10px;--bt-stage-top:0px}
  .bt-story--overlay .bt-story__inner{display:grid}
  .bt-story--overlay .bt-story__sticky{order:0;z-index:1;margin:0;padding:0;background:none;height:100vh;height:100svh}
  .bt-story--overlay .bt-story__frame{border-radius:10px}
  .bt-story--overlay .bt-story__chapters{width:auto;margin:0 12px}
  .bt-story--overlay .bt-story__chapter{min-height:100vh;min-height:100svh;justify-content:flex-end;padding:0 0 5vh;opacity:0}
  .bt-story--overlay .bt-story__chapter.is-active{opacity:1}
  .bt-story--overlay .bt-story__card{background:rgba(21,24,29,.9);border:1px solid #353b46;border-radius:10px;padding:14px 16px 6px}
  .bt-story--overlay .bt-story__title{font-size:28px;margin-bottom:8px}
  .bt-story--overlay .bt-story__body{font-size:17px;line-height:1.4}
  .bt-story--overlay .bt-story__kicker{font-size:13px;margin-bottom:6px}
}

/* Optional photo under a step's text (set 'image', 'image_alt' and 'credit' on the step) */
.bt-story .bt-story__photo{margin:14px 0 0;max-width:260px}
.bt-story .bt-story__photo img{display:block;width:100%;max-height:230px;object-fit:cover;border-radius:6px}
.bt-story .bt-story__photo figcaption{font-family:var(--bt-head);font-size:13px;line-height:1.3;color:#9aa0ab;margin-top:5px}
@media(max-width:860px){.bt-story .bt-story__photo{max-width:120px;float:right;margin:0 0 6px 12px}.bt-story .bt-story__photo figcaption{display:none}}