/* Native artwork frames for collapsed section cards.
   Geometry only: no h2/h3/font/color/title-decoration selectors.
   All fifteen collapsed cards fill the viewport width; each native ratio remains distinct. */
@media screen {
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded {
  box-sizing:border-box; width:100%; max-width:none;
  height:auto; min-height:0!important; margin-inline:auto; padding:0!important; display:block;
  --collapsed-art-ratio:5/2;
}
body #story.band.has-rendered-art.folded {--collapsed-art-ratio:2072/759}
body :is(#books,#places,#teach).band.has-rendered-art.folded {--collapsed-art-ratio:2148/732}
body #guardians.band.has-rendered-art.folded {--collapsed-art-ratio:3/1}
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded > .wrap {
  position:relative; display:flex; flex-direction:column; width:100%; max-width:none; padding:0; box-sizing:border-box;
}
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded .foldscene {
  position:relative; inset:auto; display:block; box-sizing:border-box;
  width:100%!important; max-width:none; margin:0!important;
  height:auto!important; min-height:0!important; aspect-ratio:var(--oz-raster-aspect,var(--collapsed-art-ratio))!important;
  overflow:hidden;
}
/* The title overlays the native art, with no separate colored header row. */
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded > .wrap > .intro {
  position:absolute; inset:0; order:0; box-sizing:border-box; min-height:0; padding:8px 12px!important;
}
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded .foldscene > .scene-stage {
  position:absolute; inset:0; width:100%; height:100%!important; min-height:0; max-height:none;
}
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded .scene-picture {display:block; width:100%; height:100%}
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded .scene-backdrop {width:100%; height:100%; object-fit:contain!important; object-position:center}
/* The card never exceeds the Guardians native1536x512 frame; retain its existing native cap. */
body #guardians.band.has-rendered-art.folded .oz-gwalk {inset:0}

}
/* Compact the EXPAND badge only; the full-card button remains the large click/focus target.
   This avoids109px-tall Books art conflicting with existing title typography on320px phones.
   No section heading is restyled. */
@media screen and (max-width:700px) {
body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded .intro .foldbtn :is(.lbl-open,.lbl-close) {
  bottom:4px; padding:4px 12px; font-size:.7rem; border-width:2px;
}
}

@media screen and (max-width:700px){
 /* Keep phone headings over the art as well. */
 body :is(#story,#books,#guardians,#places,#cast,#magic,#history,#forty,#magicland,#screen,#collect,#beyond,#about,#teach,#shop).band.has-rendered-art.folded > .wrap > .intro {position:absolute;inset:0;padding:4px 8px!important}
}

/* Story and Guardians full-section fit restoration, 2026-11-09. */
@media screen {
body :is(#story,#guardians).band.has-rendered-art.folded {width:100%;max-width:none;}
/* Preserve native proportions while allowing Guardians to fill the full card. */
body #guardians .oz-gwalk > canvas,body #guardians .oz-gwalk > img {max-width:none;max-height:none;}
}

/* All raster section canvases fill their full-width frame, retaining native aspect. */
@media screen {body .oz-raster-section-art{max-width:none;} }

/* Compact solid title buttons overlay the artwork. Main welcome titles are separate. */
@media screen {
 body section.band.has-rendered-art > .wrap > .intro h2 {
  background:#192144!important; border:2px solid #fff7cf!important; border-radius:16px!important; box-shadow:0 3px 0 #192144,0 0 0 1px #192144!important;
  padding:5px 14px!important; color:#fff7a8!important; -webkit-text-fill-color:#fff7a8!important; -webkit-text-stroke:3px #192144; paint-order:stroke fill;
  text-shadow:0 2px 2px #101b39!important;
 }
 body #teach.band.has-rendered-art > .wrap > .intro h2 {-webkit-text-stroke:3px #143e32;}
}
@media screen and (max-width:700px) {
 body section.band.has-rendered-art.folded > .wrap > .intro h2 {font-size:clamp(1rem,4.6vw,1.5rem)!important;line-height:1.1;-webkit-text-stroke:2px #192144;}
 body #teach.band.has-rendered-art > .wrap > .intro h2 {-webkit-text-stroke:2px #143e32;}
}

@media screen {body section.band.has-rendered-art > .wrap > .intro:has(.foldbtn:hover) h2 {box-shadow:0 4px 0 #192144,0 0 0 2px #fff7cf!important;}body section.band.has-rendered-art > .wrap > .intro:has(.foldbtn:focus-visible) h2 {outline:3px solid #fff7cf;outline-offset:4px;}}

/* History phone composition: retain the full 3:1 master and full-card button.
   Keep the title on empty lower-right fountain masonry and the small toggle
   over upper-left foliage, away from both people and their supporting hands.
   No separate header row, image crop or raster changes. */
@media screen and (max-width:700px) {
 body #history.band.has-rendered-art.has-raster-section-art > .wrap > .intro h2 {
  position:absolute; inset:auto 6px 6px auto; width:25%; max-width:none;
  box-sizing:border-box; margin:0!important; padding:3px 6px!important;
  font-size:clamp(.875rem,2.8vw,1.25rem)!important; line-height:1.05;
  text-align:center; overflow-wrap:normal; -webkit-text-stroke:2px #192144;
  background:#192144!important;
 }
 body #history.band.has-rendered-art.has-raster-section-art .intro .foldbtn :is(.lbl-open,.lbl-close) {
  left:6px; right:auto; top:6px; bottom:auto; transform:none;
  padding:3px 6px; font-size:.7rem; line-height:1.2; letter-spacing:.08em; border-width:2px;
 }
}

/* Keep Collecting phone controls clear of the globe and display reflections.
   The full artwork and full-card keyboard/click target are unchanged. */
@media screen and (max-width:700px) {
 body #collect.band.has-rendered-art.has-raster-section-art .intro .foldbtn :is(.lbl-open,.lbl-close) {
  left:auto; right:6px; top:auto; bottom:4px; transform:none;
  padding:3px 6px; font-size:.7rem; line-height:1.2; letter-spacing:.08em; border-width:2px;
 }
}

/* Screen phone overlays stay clear of Dorothy, the projected head and Toto.
   Use the empty central steps and far-right machinery/curtain area, retaining
   the full native scene, desktop rules and full-card keyboard/click target. */
@media screen and (max-width:700px) {
 body #screen.band.has-rendered-art.has-raster-section-art > .wrap > .intro h2 {
  position:absolute; inset:34% auto auto 43%; width:32%; max-width:none;
  box-sizing:border-box; margin:0!important; padding:3px 4px!important;
  font-size:clamp(.875rem,2.8vw,1.25rem)!important; line-height:1.05;
  text-align:center; white-space:nowrap; -webkit-text-stroke:2px #192144;
  background:#192144!important;
 }
 body #screen.band.has-rendered-art.has-raster-section-art .intro .foldbtn :is(.lbl-open,.lbl-close) {
  left:auto; right:2px; top:auto; bottom:2px; transform:none;
  padding:3px 4px; font-size:.7rem; line-height:1.2; letter-spacing:.04em; border-width:2px;
 }
}

/* Sea Fairies phone overlays use the far-right fish border, leaving all four
   faces, their hands and the small open-water animation clear. */
@media screen and (max-width:700px) {
 body #beyond.band.has-rendered-art.has-raster-section-art > .wrap > .intro h2 {
  position:absolute; inset:auto 1% 2% auto; width:19%; max-width:none;
  box-sizing:border-box; margin:0!important; padding:3px 4px!important;
  font-size:clamp(.75rem,3.2vw,.875rem)!important; line-height:1.05;
  text-align:center; white-space:normal; overflow-wrap:normal;
  -webkit-text-stroke:2px #192144; background:#192144!important;
 }
 body #beyond.band.has-rendered-art.has-raster-section-art .intro .foldbtn :is(.lbl-open,.lbl-close) {
  left:auto; right:1%; top:2%; bottom:auto; transform:none;
  padding:3px 4px; font-size:.65rem; line-height:1.2; letter-spacing:.04em; border-width:2px;
 }
}