/* Each facing leaf has its own whole illustration and short text. */
.rosie-reader .stage{overflow:auto;padding:12px 54px 12px 12px;align-items:stretch}
.rosie-reader .spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;gap:0;overflow:hidden;container-type:inline-size}
.rosie-reader .spread .page{position:relative;inset:auto;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,1fr) auto;height:100%;min-width:0;min-height:0;overflow:auto;background:#fffdf5;backface-visibility:hidden}
.rosie-reader .spread .page[hidden]{display:none!important}
.rosie-reader .page img{object-fit:contain;width:100%;height:100%;min-height:0;min-width:0;background:#f4eee0}
.rosie-reader .page .story-text{display:block;position:static;inset:auto;width:100%;min-width:0;margin:0;padding:clamp(14px,1.8cqw,26px);border:0;box-shadow:none;color:#102638;background:#fffdf5;font:400 clamp(20px,2.1cqw,34px)/1.4 'Didact Gothic',sans-serif;white-space:normal;text-shadow:none;-webkit-text-stroke:0;overflow-wrap:break-word}
.rosie-reader .page:nth-child(even){border-right:1px solid #d5d5c7}
.rosie-reader .spread .cover{grid-column:1/-1;grid-template-rows:minmax(0,1fr) auto;border:0}
.rosie-reader .cover .story-text{text-align:center;padding:12px 20px}
.rosie-reader .cover h1{font-size:clamp(28px,4cqw,58px);line-height:1.12;margin:0}
.rosie-reader .cover small{font-size:clamp(13px,1.5cqw,19px);margin-top:6px}
.rosie-reader .story-lines{white-space:normal}
.rosie-reader .page-number{display:block;font:14px/1.2 Arial,sans-serif;color:#567077;margin-top:10px;text-align:center}
.rosie-reader .controls{gap:12px}.rosie-reader #position{min-width:140px}
.rosie-reader #prompt-text{white-space:pre-line}
@media(max-width:700px){
 .rosie-reader header{flex-wrap:wrap;padding:8px 10px;gap:8px}.rosie-reader .brand{order:3;flex-basis:100%;font-size:18px}.rosie-reader .tools{gap:6px;flex-wrap:wrap}.rosie-reader .stage{display:block;align-items:flex-start;padding:8px 43px 8px 8px}.rosie-reader .spread{display:block;height:auto!important;min-height:100%;overflow:visible}
 .rosie-reader .spread .page{height:auto;min-height:100%;grid-template-rows:auto auto;overflow:visible;border:0}
 .rosie-reader .spread .page img{width:100%;height:auto;max-height:36dvh;object-fit:contain}
 .rosie-reader .spread .page .story-text{font-size:20px;line-height:1.4;padding:14px;overflow:visible}
 .rosie-reader .cover h1{font-size:29px}.rosie-reader .cover small{font-size:14px}.rosie-reader .controls{gap:6px}.rosie-reader #position{min-width:110px;font-size:12px}.rosie-reader .controls button{min-width:72px;padding:9px 8px}
}
@media print{
 @page{size:A4 portrait;margin:12mm}
 .rosie-reader,.rosie-reader .stage,.rosie-reader .spread{display:block!important;height:auto!important;overflow:visible!important;width:100%!important}
 .rosie-reader .spread .page,.rosie-reader .spread .page[hidden]{display:grid!important;grid-template-rows:auto auto;height:auto;break-after:page;min-height:0;overflow:visible;position:relative}
 .rosie-reader .spread .page img{height:145mm!important;max-height:none;width:100%;object-fit:contain;break-after:auto}
 .rosie-reader .spread .page .story-text{font-size:23pt;line-height:1.4;min-height:0;padding:10mm 0;break-after:auto;display:block}
 .rosie-reader .spread .page:last-child{break-after:auto}
}
