/* DRAFT v16 — artwork and words occupy separate regions.
   The café, chair, bench, question notes and approved letter geometry remain. */
.scroll-story .stage { min-height: 0; height: 100svh; }
.scroll-story .chapter-copy { max-width: none; }
.scroll-story .chapter :is(h1,h2) { text-wrap: balance; }
.scroll-story .chapter-copy h2 { font-size: clamp(47px, 5vw, 76px); line-height: 1.02; margin: 14px 0 18px; }
.scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 18px; line-height: 1.5; margin: 0; }
.scroll-story .chapter p.eyebrow { font-size: 14px; line-height: 1.4; margin: 0; }
.scroll-story :is(.people-scene,.listening-scene) {
  display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr); column-gap: 5%; row-gap: 20px;
  padding: 21svh 7% 92px;
}
.scroll-story :is(.people-scene,.listening-scene) .chapter-copy {
  position: static; grid-column: 2; grid-row: 1; width: auto; align-self: start;
}
.scroll-story :is(.people-scene,.listening-scene) .scene-art {
  position: relative; grid-column: 1; grid-row: 1/-1; left: auto; right: auto;
  top: auto; bottom: auto; width: 100%; height: min(48svh,500px); align-self: end;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.scroll-story :is(.people-scene,.listening-scene) .scene-art img { width: 100%; height: calc(100% - 30px); object-fit: contain; object-position: center bottom; }
.scroll-story .scene-label { margin: 6px 0 0; font-size: 20px; line-height: 1.2; }
.scroll-story .people-notes { font-size: 23px; line-height: 1.25; margin-top: 16px; gap: 8px; }
.scroll-story :is(.walking-vignette,.listening-vignette) {
  position: relative; grid-column: 2; grid-row: 2; inset: auto; width: 78%; height: 100%;
  min-height: 0; max-height: 25svh; justify-self: end; align-self: end;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.scroll-story :is(.walking-vignette,.listening-vignette) img { width: 100%; height: calc(100% - 28px); max-height: 100%; object-fit: contain; object-position: center bottom; }
.scroll-story .story-vignette figcaption { font-size: 18px; line-height: 1.3; margin-top: 3px; }
.scroll-story .listening-scene { padding-top: 19svh; padding-bottom: 118px; }
.scroll-story .listening-scene .scene-art { height: 42svh; }
.scroll-story .listening-scene .chapter-copy { align-self: start; }
.scroll-story .listening-scene .carried-question { margin-top: 18px; padding: 12px 16px; transform: rotate(-1deg); }
.scroll-story .listening-scene .carried-question>span { font-size: 12px; line-height: 1.4; }
.scroll-story .listening-scene .carried-question p { font-size: 23px; line-height: 1.25; margin-top: 5px; }
.scroll-story .listening-scene .listening-notes { left: 7%; width: 47%; bottom: 90px; gap: 18px; font-size: 16px; line-height: 1.35; }
.scroll-story .listening-notes span { font-size: 14px; margin-bottom: 5px; }
.scroll-story .listening-vignette { max-height: 20svh; }

.scroll-story .questions-scene .chapter-copy { left: 7%; top: 37%; width: 31%; }
.scroll-story .questions-scene .chapter-copy h2 { font-size: clamp(38px,4.1vw,60px); }
.scroll-story .question-board { left: 44%; width: 48%; top: 23%; height: 59%; gap: 22px; }
.scroll-story .question-card { padding: 19px 16px; }
.scroll-story .question-card span { font-size: 12px; line-height: 1.4; letter-spacing: .055em; }
.scroll-story .question-card strong { font-size: clamp(23px,2.1vw,30px); line-height: 1.16; margin: 14px 0 6px; }
.scroll-story .making-vignette { left: 7%; width: 29%; bottom: 11%; max-height: 24svh; }
.scroll-story .making-vignette img { max-height: 21svh; object-fit: contain; }
.scroll-story .formation-copy { top: 74%; padding: 0 6%; }
.scroll-story .formation-copy h1 { font-size: clamp(29px,3.3vw,47px); }
.scroll-story .formation-copy p { font-size: 16px; line-height: 1.45; }
.scroll-story .opening-caption { top: 74%; }
.scroll-story .opening-caption strong { max-width: none; font-size: clamp(29px,3.3vw,47px); }
.scroll-story .opening-caption>span:first-child { font-size: 14px; }
.scroll-story .opening-caption .handwriting { font-size: 23px; }
.scroll-story .resolution-copy { top: 49%; left: 6%; width: 88%; }
.scroll-story .resolution-copy h2 { font-size: clamp(38px,4.7vw,70px); }
.scroll-story .resolution-copy p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }
.scroll-story .chapter-nav { right: 0; top: 36%; gap: 0; }
.scroll-story .chapter-nav button { padding: 18px; width: 44px; height: 44px; }
.scroll-story .chapter-nav i { width: 6px; height: 6px; }

/* Short laptops keep the same columns, with restrained vertical scale. */
@media (min-width:701px) and (max-height:740px) {
  .scroll-story :is(.people-scene,.listening-scene) { padding-top: 18svh; padding-bottom: 92px; row-gap: 12px; }
  .scroll-story .chapter-copy h2 { font-size: clamp(42px,4.2vw,60px); margin: 10px 0 12px; }
  .scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 17px; line-height: 1.4; }
  .scroll-story .people-notes { font-size: 20px; margin-top: 10px; }
  .scroll-story :is(.people-scene,.listening-scene) .scene-art { height: 43svh; }
  .scroll-story :is(.walking-vignette,.listening-vignette) { max-height: 21svh; }
  .scroll-story .scene-label,.scroll-story .story-vignette figcaption { font-size: 16px; }
  .scroll-story .listening-scene { padding-bottom: 124px; }
  .scroll-story .listening-scene .scene-art { height: 36svh; }
  .scroll-story .listening-scene .carried-question { margin-top: 10px; padding: 9px 12px; }
  .scroll-story .listening-scene .carried-question p { font-size: 20px; }
  .scroll-story .listening-scene .listening-notes { bottom: 82px; font-size: 14px; gap: 14px; }
  .scroll-story .listening-notes span { font-size: 12px; }
  .scroll-story .listening-vignette { max-height: 16svh; }
  .scroll-story .questions-scene .chapter-copy { top: 34%; }
  .scroll-story .questions-scene .chapter-copy h2 { font-size: clamp(35px,3.5vw,47px); }
  .scroll-story .question-board { top: 22%; height: 61%; gap: 17px; }
  .scroll-story .question-card { padding: 16px 13px; }
  .scroll-story .question-card strong { font-size: 23px; margin: 8px 0; }
  .scroll-story .making-vignette { max-height: 22svh; bottom: 10%; }
  .scroll-story .making-vignette img { max-height: 18svh; }
  .scroll-story .formation-copy, .scroll-story .opening-caption { top: 71%; }
  .scroll-story .formation-copy h1 { font-size: 29px; margin: 8px 0; }
  .scroll-story .resolution-copy { top: 47%; }
  .scroll-story .resolution-copy h2 { font-size: clamp(35px,4.1vw,53px); margin: 12px 0; }
  .scroll-story .resolution-copy p:not(.eyebrow) { font-size: 16px; }
  .scroll-story .resolution-copy .story-link { margin-top: 6px; padding: 4px 0; }
}
@media (max-width:700px) {
  .scroll-story :is(.people-scene,.listening-scene) {
    grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto;
    gap: 12px; padding: max(205px,29svh) 7% 98px;
  }
  .scroll-story :is(.people-scene,.listening-scene) .chapter-copy { grid-column: 1; grid-row: 2; width: 100%; }
  .scroll-story .chapter-copy h2 { font-size: 43px; line-height: 1.02; margin: 9px 0 11px; text-wrap: initial; }
  .scroll-story .chapter-copy h2 br { display: none; }
  .scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 17px; line-height: 1.4; }
  .scroll-story .chapter-copy>p:not(.eyebrow) br { display: none; }
  .scroll-story .chapter p.eyebrow { font-size: 13px; letter-spacing: .075em; }
  .scroll-story :is(.people-scene,.listening-scene) .scene-art { grid-column: 1; grid-row: 1; width: 69%; height: 100%; max-height: 31svh; justify-self: start; }
  .scroll-story :is(.people-scene,.listening-scene) .scene-art img { height: 100%; }
  .scroll-story .people-scene .scene-label { display: none; }
  .scroll-story :is(.walking-vignette,.listening-vignette) { grid-column: 1; grid-row: 1; width: 28%; max-height: 100%; justify-self: end; align-self: end; }
  .scroll-story :is(.walking-vignette,.listening-vignette) img { height: 100%; }
  .scroll-story :is(.walking-vignette,.listening-vignette) figcaption { display: none; }
  .scroll-story .people-notes { font-size: 20px; margin-top: 10px; }
  .scroll-story .listening-scene { grid-template-rows: minmax(0,1fr) auto auto; gap: 11px; }
  .scroll-story .listening-scene .scene-art { max-height: 24svh; }
  .scroll-story .listening-scene .chapter-copy { grid-row: 2; }
  .scroll-story .listening-scene .listening-notes { position: static; width: auto; grid-column: 1; grid-row: 3; margin: 0; gap: 13px; font-size: 14px; line-height: 1.25; }
  .scroll-story .listening-scene .listening-notes li { padding-top: 7px; }
  .scroll-story .listening-notes span { font-size: 12px; margin-bottom: 4px; }
  .scroll-story .listening-scene .carried-question { margin-top: 10px; padding: 8px 12px; }
  .scroll-story .listening-scene .carried-question>span { font-size: 11px; }
  .scroll-story .listening-scene .carried-question p { font-size: 21px; margin-top: 3px; }
  .scroll-story .questions-scene .chapter-copy { top: max(190px,26svh); left: 7%; width: 64%; }
  .scroll-story .questions-scene .chapter-copy h2 { font-size: 32px; margin: 8px 0 10px; }
  .scroll-story .questions-scene .chapter-copy>p:not(.eyebrow) { font-size: 16px; line-height: 1.35; }
  .scroll-story .question-board { top: max(372px,49svh); left: 7%; width: 86%; bottom: 99px; height: auto; gap: 12px; }
  .scroll-story .question-card { padding: 12px; }
  .scroll-story .question-card strong { font-size: 20px; line-height: 1.08; margin: 8px 0 0; }
  .scroll-story .question-card span { font-size: 10px; letter-spacing: .045em; }
  .scroll-story .making-vignette { top: 32svh; bottom: auto; left: auto; right: 4%; width: 24%; max-height: 16svh; }
  .scroll-story .making-vignette img { max-height: 16svh; }
  .scroll-story .chapter-nav { right: 0; top: 30%; }
  .scroll-story .chapter-nav button { width: 32px; min-width: 32px; height: 44px; padding: 18px 13px; }
  .scroll-story .formation-copy { top: 69%; padding: 0 7%; }
  .scroll-story .formation-copy h1 { font-size: 29px; }
  .scroll-story .formation-copy p { font-size: 16px; }
  .scroll-story .opening-caption { top: 70%; }
  .scroll-story .opening-caption strong { font-size: 29px; }
  .scroll-story .opening-caption .handwriting { font-size: 20px; }
  .scroll-story .resolution-copy { top: 48%; left: 7%; width: 86%; }
  .scroll-story .resolution-copy h2 { font-size: 37px; line-height: 1.06; margin: 13px 0; }
  .scroll-story .resolution-copy p:not(.eyebrow) { font-size: 17px; max-width: 340px; }
  .scroll-story .resolution-copy .story-link { font-size: 16px; margin-top: 12px; }
}
@media (max-width:700px) and (max-height:740px) {
  .scroll-story :is(.people-scene,.listening-scene) { padding-top: 190px; padding-bottom: 90px; gap: 8px; }
  .scroll-story .chapter-copy h2 { font-size: 35px; margin: 7px 0 9px; }
  .scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 16px; line-height: 1.35; }
  .scroll-story .people-notes { font-size: 19px; margin-top: 8px; }
  .scroll-story .listening-scene .carried-question p { font-size: 18px; }
  .scroll-story .listening-scene .listening-notes { font-size: 13px; }
  .scroll-story .questions-scene .chapter-copy { top: 180px; width: 71%; }
  .scroll-story .questions-scene .chapter-copy h2 { font-size: 29px; }
  .scroll-story .questions-scene .chapter-copy>p:not(.eyebrow) { font-size: 15px; }
  .scroll-story .question-board { top: 330px; bottom: 90px; gap: 10px; }
  .scroll-story .question-card { padding: 10px; }
  .scroll-story .question-card strong { font-size: 18px; line-height: 1.08; }
  .scroll-story .question-card span { font-size: 9px; }
  .scroll-story .making-vignette { top: 245px; width: 20%; right: 3%; }
  .scroll-story .resolution-copy { top: 44%; }
  .scroll-story .resolution-copy h2 { font-size: 31px; }
  .scroll-story .resolution-copy p:not(.eyebrow) { font-size: 16px; line-height: 1.4; }
  .scroll-story .resolution-copy .story-link { margin-top: 4px; }
}

/* Static reading reuses the same art as normal-flow, non-overlapping blocks. */
.static-mode .scroll-story :is(.people-scene,.listening-scene) { padding: 54px 7%; min-height: 540px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: auto auto; gap: 26px 6%; }
.static-mode .scroll-story :is(.people-scene,.listening-scene) .scene-art { height: 360px; max-height: none; }
.static-mode .scroll-story :is(.walking-vignette,.listening-vignette) { min-height: 180px; max-height: none; }
.static-mode .scroll-story .listening-scene .listening-notes { position: static; width: auto; grid-column: 1; grid-row: 3; }
.static-mode .scroll-story .questions-scene { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 28px 6%; padding: 54px 7%; }
.static-mode .scroll-story .questions-scene .chapter-copy { position: static; width: auto; grid-column: 1; grid-row: 1; }
.static-mode .scroll-story .question-board { position: static; width: auto; height: auto; grid-column: 2; grid-row: 1/3; min-height: 380px; }
.static-mode .scroll-story .making-vignette { position: static; width: auto; max-height: none; grid-column: 1; grid-row: 2; }
.static-mode .scroll-story .making-vignette img { max-height: 240px; }
.static-mode .scroll-story .formation-copy { padding: 48px 7%; }
.static-mode .scroll-story .resolution-copy { padding: 54px 7%; width: auto; }
@media(max-width:700px) {
  .static-mode .scroll-story :is(.people-scene,.listening-scene,.questions-scene) { display: flex; flex-direction: column; min-height: 0; padding: 42px 24px; gap: 24px; }
  .static-mode .scroll-story :is(.people-scene,.listening-scene) .chapter-copy { order: -1; }
  .static-mode .scroll-story :is(.people-scene,.listening-scene) .scene-art { width: 100%; height: 250px; }
  .static-mode .scroll-story :is(.walking-vignette,.listening-vignette) { width: 55%; height: 155px; min-height: 0; margin-left: auto; }
  .static-mode .scroll-story .question-board { width: 100%; min-height: 360px; gap: 16px; }
  .static-mode .scroll-story .making-vignette { width: 80%; margin: auto; }
  .static-mode .scroll-story .listening-scene .listening-notes { width: 100%; order: 4; }
}

/* Keep all six questions above the chapter controls. Grid tracks explicitly
   allow shrinkage; natural text wrapping replaces the old art-directed breaks. */
@media(max-width:700px) {
  body:not(.static-mode) .scroll-story .questions-scene .chapter-copy { top: 180px; }
  body:not(.static-mode) .scroll-story .question-board { top: 365px; bottom: 115px; grid-template-rows: repeat(3,minmax(0,1fr)); }
  body:not(.static-mode) .scroll-story .question-card { min-height: 0; padding: 10px; }
  body:not(.static-mode) .scroll-story .question-card strong { font-size: 18px; line-height: 1.15; margin: 6px 0 0; }
  .scroll-story .question-card strong br { display: none; }
}
@media(max-width:700px) and (max-height:740px) {
  body:not(.static-mode) .scroll-story .questions-scene .chapter-copy { top: 140px; }
  body:not(.static-mode) .scroll-story .question-board { top: 305px; bottom: 115px; gap: 10px; }
  body:not(.static-mode) .scroll-story .question-card { padding: 7px 9px; }
  body:not(.static-mode) .scroll-story .question-card strong { font-size: 18px; line-height: 1.1; margin-top: 4px; }
  body:not(.static-mode) .scroll-story .question-card span { font-size: 9px; line-height: 1.3; }
}
@media(max-width:700px) and (max-height:740px) {
  /* Keep the last line clear of playback and start the art below the letter pair. */
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) {
    padding-top: 210px;
    padding-bottom: 115px;
  }
}