/* DRAFT v18 — one human-scale scene per chapter.
   The 18 / 29 / 47 / 76 text steps set the hierarchy; illustration windows
   use the actual available viewport. No person is miniaturised into a corner. */
body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
  gap: 7%;
  padding: 37svh 7% 100px;
}
body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .scene-art {
  position: relative; inset: auto; grid-column: 1; grid-row: 1;
  width: 100%; height: 100%; max-height: 47svh; min-height: 0;
  align-self: end; display: flex; align-items: center; justify-content: flex-end;
}
body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .scene-art img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom;
}
.scroll-story :is(.people-scene,.listening-scene) .scene-label { display: none; }
body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .chapter-copy {
  position: relative; inset: auto; grid-column: 2; grid-row: 1;
  align-self: center; width: 100%; max-width: 580px; margin-top: -15svh;
}
.scroll-story .chapter-copy h2 { font-size: clamp(47px,5vw,76px); }
.scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }
.scroll-story .people-notes { font-size: 24px; line-height: 1.25; }
.scroll-story .listening-detail { display: block; }
.scroll-story .listening-scene .listening-notes {
  position: static; inset: auto; width: 100%; display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px;
  margin: 23px 0 0; font-size: 16px; line-height: 1.4;
}
.scroll-story .listening-scene .listening-notes li { padding-top: 11px; }
.scroll-story .listening-scene .listening-notes span { font-size: 14px; margin-bottom: 6px; }
.scroll-story .listening-scene .carried-question { margin-top: 21px; padding: 13px 17px; }
.scroll-story .listening-scene .carried-question p { font-size: 24px; line-height: 1.25; }
.scroll-story .making-vignette { width: 32%; left: 5.5%; max-height: 29svh; bottom: 12%; }
.scroll-story .making-vignette img { max-height: 26svh; }

/* Give each everyday setting its own illustration and short, direct caption. */
.oslo-beginning.community-explore { display: block; }
.oslo-introduction { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); column-gap: 9%; align-items: end; }
.oslo-introduction h2 { margin-bottom: 0; }
.oslo-introduction .beginning-note { margin-bottom: 4px; max-width: 48ch; }
.everyday-moments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4%; margin: 42px 0 30px; }
.everyday-moment { min-width: 0; }
.everyday-moment figure { margin: 0 0 23px; }
.everyday-moment img { width: 100%; height: clamp(190px,20vw,300px); object-fit: contain; object-position: center bottom; }
.everyday-moment .eyebrow { margin: 0; padding-top: 17px; border-top: 1px solid #31574435; }
.everyday-moment h3 { font-size: 29px; line-height: 1.14; letter-spacing: -.035em; font-weight: 600; margin: 12px 0; }
.everyday-moment p:not(.eyebrow) { font-size: 18px; line-height: 1.5; margin: 0; max-width: 34ch; }
.oslo-reading-paths { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 4%; margin-top: 36px; }
.oslo-reading-paths .details-path { font-size: 18px; min-height: 70px; padding: 17px 0; line-height: 1.4; align-items: center; }
.oslo-beginning.community-explore .oslo-caption { font-size: 16px; margin: 0; max-width: 70ch; }

@media(min-width:701px) and (max-height:740px) {
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) { padding-top: 35svh; padding-bottom: 90px; }
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .chapter-copy { margin-top: -10svh; }
  .scroll-story .chapter-copy h2 { font-size: clamp(42px,4.3vw,60px); margin: 11px 0 14px; }
  .scroll-story .people-notes { font-size: 22px; }
  .scroll-story .listening-scene .carried-question { margin-top: 15px; padding: 10px 14px; }
  .scroll-story .listening-scene .carried-question p { font-size: 22px; }
  .scroll-story .listening-scene .listening-notes { margin-top: 17px; font-size: 15px; }
}
@media(max-width:900px) and (min-width:701px) {
  .scroll-story .chapter-copy h2 { font-size: 47px; }
  .scroll-story .listening-scene .listening-notes { grid-template-columns: 1fr; gap: 9px; }
  .scroll-story .listening-scene .listening-notes li { display: flex; gap: 14px; padding-top: 8px; }
  .scroll-story .listening-scene .listening-notes span { margin: 0; }
  .everyday-moments { gap: 3%; }
  .everyday-moment h3 { font-size: 25px; }
  .oslo-reading-paths { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) {
    grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto;
    gap: 15px; padding: 195px 7% 110px;
  }
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .scene-art {
    grid-column: 1; grid-row: 1; width: 100%; height: 100%; max-height: 34svh;
    justify-self: center; align-self: end;
  }
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) .chapter-copy {
    grid-column: 1; grid-row: 2; margin-top: 0; align-self: start; max-width: none;
  }
  .scroll-story .chapter-copy h2 { font-size: 29px; line-height: 1.14; margin: 8px 0 11px; letter-spacing: -.045em; }
  .scroll-story .chapter-copy h2 br { display: none; }
  .scroll-story .chapter-copy>p:not(.eyebrow) { font-size: 18px; line-height: 1.4; }
  .scroll-story .people-notes { font-size: 21px; margin-top: 12px; line-height: 1.25; }
  .scroll-story .chapter p.eyebrow { font-size: 12px; line-height: 1.4; }
  .scroll-story .listening-scene .listening-notes {
    position: static; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%;
    margin-top: 15px; gap: 14px; font-size: 14px; line-height: 1.25;
  }
  .scroll-story .listening-scene .listening-notes span { display: none; }
  .scroll-story .listening-scene .listening-notes li { padding-top: 9px; }
  .scroll-story .listening-scene .carried-question { margin-top: 12px; padding: 9px 12px; }
  .scroll-story .listening-scene .carried-question>span { font-size: 10px; }
  .scroll-story .listening-scene .carried-question p { font-size: 21px; line-height: 1.2; margin-top: 4px; }
  .scroll-story .listening-detail { display: none; }
  .scroll-story .making-vignette { width: 24%; left: auto; right: 4%; bottom: auto; top: 245px; max-height: 17svh; }
  .scroll-story .making-vignette img { max-height: 17svh; }
  .oslo-introduction { grid-template-columns: 1fr; gap: 20px; }
  .oslo-introduction .beginning-note { font-size: 18px; line-height: 1.5; margin: 0; }
  .everyday-moments { grid-template-columns: 1fr; gap: 35px; margin-top: 30px; }
  .everyday-moment figure { margin-bottom: 16px; }
  .everyday-moment img { height: min(73vw,290px); }
  .everyday-moment h3 { font-size: 29px; }
  .everyday-moment p:not(.eyebrow) { max-width: none; }
  .oslo-reading-paths { grid-template-columns: 1fr; margin-top: 27px; }
  .oslo-reading-paths .details-path { min-height: 64px; }
}
@media(max-width:700px) and (max-height:740px) {
  body:not(.static-mode) .scroll-story :is(.people-scene,.listening-scene) { padding-top: 178px; padding-bottom: 110px; gap: 10px; }
  .scroll-story .chapter-copy h2 { font-size: 29px; margin: 6px 0 8px; }
  .scroll-story .people-notes { margin-top: 8px; font-size: 19px; }
  .scroll-story .listening-scene .carried-question { margin-top: 8px; padding: 7px 10px; }
  .scroll-story .listening-scene .carried-question p { font-size: 19px; }
  .scroll-story .listening-scene .listening-notes { margin-top: 10px; gap: 10px; }
}
/* In the reading alternative the same scenes are normal-flow illustrations. */
.static-mode .scroll-story :is(.people-scene,.listening-scene) { grid-template-rows: auto; align-items: center; }
.static-mode .scroll-story :is(.people-scene,.listening-scene) .scene-art { grid-column: 1; grid-row: 1; height: 360px; width: 100%; }
.static-mode .scroll-story :is(.people-scene,.listening-scene) .chapter-copy { grid-column: 2; grid-row: 1; }
.static-mode .scroll-story .listening-scene .listening-notes { margin-top: 23px; }
@media(max-width:700px) {
  .static-mode .scroll-story :is(.people-scene,.listening-scene) .scene-art { height: 260px; }
  .static-mode .scroll-story .listening-detail { display: block; }
  .static-mode .scroll-story .chapter-copy h2 { font-size: 38px; }
}
@media(max-width:700px) {
  /* Six readable notes are the Asking Questions illustration on a phone.
     The book-sharing scene continues on wider canvases, where it has room. */
  .scroll-story .questions-scene .making-vignette { display: none; }
  .scroll-story .questions-scene .chapter-copy>p:not(.eyebrow) { font-size: 18px; line-height: 1.4; }
}
/* Asking Questions shares a left column for copy and its book-sharing scene.
   Natural tracks keep the figures away from the paragraph at short heights. */
.question-context { display: contents; }
@media(min-width:701px) {
  body:not(.static-mode) .scroll-story .question-context {
    position: absolute; left: 7%; width: 32%; top: 33%; bottom: 95px;
    display: grid; grid-template-rows: auto minmax(0,1fr); gap: 18px;
  }
  body:not(.static-mode) .scroll-story .question-context .chapter-copy { position: static; inset: auto; width: 100%; }
  body:not(.static-mode) .scroll-story .question-context .chapter-copy h2 { font-size: 47px; line-height: 1.04; margin: 12px 0 15px; }
  body:not(.static-mode) .scroll-story .question-context .making-vignette { position: static; inset: auto; width: 100%; height: 100%; max-height: none; min-height: 0; display: flex; flex-direction: column; }
  body:not(.static-mode) .scroll-story .question-context .making-vignette img { width: 100%; height: calc(100% - 28px); min-height: 0; max-height: none; object-fit: contain; }
  body:not(.static-mode) .scroll-story .question-context .making-vignette figcaption { font-size: 18px; line-height: 1.4; }
}
@media(min-width:701px) and (max-height:740px) {
  body:not(.static-mode) .scroll-story .question-context { top: 30%; bottom: 90px; gap: 12px; }
  body:not(.static-mode) .scroll-story .question-context .chapter-copy h2 { font-size: 38px; margin: 10px 0 12px; }
}
@media(max-width:700px) {
  .static-mode .scroll-story .question-context .making-vignette { display: block; position: static; width: 100%; max-height: none; }
  .static-mode .scroll-story .question-context .making-vignette img { height: 230px; max-height: none; }
  .static-mode .scroll-story .question-context .making-vignette figcaption { display: block; font-size: 18px; margin-top: 8px; }
}