/* The picture, words and listening controls form one story surface. */
.reader-art[data-image-state=loading] img,.reader-art[data-image-state=error] img{visibility:hidden}
.reader-art-status{position:absolute;inset:0;display:grid;place-items:center;padding:25px;text-align:center;font:700 .9rem/1.5 var(--body);color:#526e5d;pointer-events:none}
.reader-art-status[hidden]{display:none}
#reader{width:min(1100px,96vw);max-height:min(850px,94dvh);padding:0;overflow:hidden;border:1px solid #c7d4bf;border-radius:25px;background:#fffdf1}
#reader[open]{display:flex;flex-direction:column}
.reader-top{position:relative;flex:none;display:flex;align-items:center;min-height:75px;padding:16px 116px 16px 27px;border-bottom:1px solid #dce3ce}
#reader-title{font:500 1.8rem/1.15 var(--display);margin:0}
.reader-top>.icon-button{position:absolute;right:15px;top:15px;width:44px;height:44px;min-height:44px;border:1px solid #cbd6bf;border-radius:50%;padding:8px}
#reader-options{position:static}
#reader-options>summary{position:absolute;right:65px;top:15px;display:grid;place-items:center;list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid #cbd6bf;border-radius:50%;font-size:1.8rem;line-height:1;background:#edf0df}
#reader-options>summary::-webkit-details-marker{display:none}
#reader-options[open]>summary{background:#ffd268}
#reader-options-content{position:absolute;z-index:5;top:68px;right:16px;width:min(330px,calc(100% - 32px));padding:24px;background:#fffdf1;border:1px solid #aebfa3;border-radius:20px;box-shadow:0 15px 35px #244d3c38}
#reader-options-content .reader-byline{margin:12px 0;font-size:1rem}
#reader-options-content .reader-voice-panel{margin:0;padding:0;border:0}
#reader-options-content .voice-actions{display:grid;gap:14px}
#reader-options-content label{font-size:1rem;display:flex;align-items:center;gap:10px;min-height:44px}
#continue-reading{width:23px;height:23px;accent-color:#245747}
#reader-options-content .voice-disclosure{font-size:.875rem;line-height:1.5}
#reader-options-content #stop-reader{min-height:44px}
#reader .reader-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);flex:1;min-height:0;overflow:auto;align-items:center;overscroll-behavior:contain;background:#f8f7e9}
#reader .reader-art{height:auto;min-height:0;position:relative;display:flex;align-items:center;background:none;padding:22px 0 22px 22px}
#reader .reader-art img{position:static;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;border-radius:16px}
#reader .reader-copy{padding:30px;align-self:center;min-width:0}
#reader .reading-page{min-height:0;padding:0}
#reader .beat-label{display:none}
#reader .story-paragraph{font-size:1.3rem;line-height:1.75;margin:0;white-space:pre-line}
.reader-controls{flex:none;padding:16px 27px 18px;background:#fffdf1;border-top:1px solid #dce3ce}
#reader .reader-bottom{display:grid;grid-template-columns:52px minmax(0,280px) 52px;justify-content:center;align-items:center;gap:18px;margin:0}
#reader .reader-bottom>button{min-height:48px;margin:0}
#reader #listen-reader{padding:12px 18px;background:#245747;color:#fffdf1;border:0;border-radius:30px;font-size:1rem;box-shadow:0 3px 0 #123e2b33}
#reader #page-prev,#reader #page-next{width:48px;height:48px;border-radius:50%;padding:0;font-size:1.6rem;display:grid;place-items:center;background:#e7edd8;color:#245747;border:1px solid #c5d3b9}
.reader-progress{display:flex;align-items:center;gap:16px;margin-top:14px}
#reader #reading-progress{display:block;flex:1;height:5px;margin:0;width:0}
#page-count{flex:none;font-size:.8rem;font-variant-numeric:tabular-nums;color:#526e5d}
@media(max-width:650px){
  #reader{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;margin:0}
  .reader-top{padding:14px 112px 14px 18px;min-height:70px}
  #reader-title{font-size:1.4rem}
  #reader .reader-layout{display:block;flex:1;min-height:0;background:#fffdf1;scrollbar-width:thin}
  #reader .reader-art{padding:0;display:block;width:100%}
  #reader .reader-art img{width:100%;height:auto;aspect-ratio:auto;border-radius:0;background:#e5ebd8}
  #reader .reader-copy{padding:22px 25px 26px}
  #reader .story-paragraph{font-size:1.2rem;line-height:1.7}
  .reader-controls{padding:12px 18px max(14px,env(safe-area-inset-bottom));box-shadow:0 -5px 20px #254b3e08}
  #reader .reader-bottom{grid-template-columns:48px minmax(0,1fr) 48px;gap:14px}
  .reader-progress{margin-top:12px}
  #reader #listen-reader{font-size:.94rem;padding:12px 10px;min-height:48px}
  /* Cover artwork uses its natural proportions on every screen (refinements.css). */
  .book-card h3{font-size:1.2rem;line-height:1.15;margin:12px 0 7px}
  .book-card .book-meta{font-size:.8rem}
}
@media(max-width:360px){#reader-title{font-size:1.2rem}.reader-top{padding-left:16px}#reader .reader-copy{padding:18px 20px}#reader .story-paragraph{font-size:1.125rem;line-height:1.6}#reader .reader-bottom{gap:9px}#reader #listen-reader{font-size:.875rem}.reader-controls{padding-left:14px;padding-right:14px}}
@media(max-height:500px) and (min-width:651px){#reader{max-height:100dvh;height:100dvh;width:100%;max-width:100%;border-radius:0}.reader-top{min-height:62px;padding-top:10px;padding-bottom:10px}#reader-title{font-size:1.4rem}.reader-top>.icon-button,#reader-options>summary{top:9px}.reader-controls{padding:8px 22px}.reader-progress{margin-top:6px}#reader .reader-art{padding:10px}#reader .reader-copy{padding:18px}#reader .story-paragraph{font-size:1.1rem;line-height:1.5}}

/* Desktop becomes a complete illustrated page: scene, passage, then controls. */
@media(min-width:651px) and (min-height:501px){
  #reader{width:min(1100px,94vw,max(740px,calc((100dvh - 365px)*2)));max-height:94dvh;border-radius:24px;box-shadow:0 24px 90px #163f3766,0 4px 0 #c3ccb9}
  .reader-top{min-height:64px;padding:14px 120px 14px 28px;border:0;background:#fffdf1}
  #reader-title{font-size:1.5rem;letter-spacing:-.02em}
  .reader-top>.icon-button,#reader-options>summary{top:10px}
  #reader-options-content{top:61px}
  #reader .reader-layout{display:flex;flex-direction:column;flex:0 1 auto;align-items:stretch;background:#fffdf1}
  #reader .reader-art{display:block;flex:none;width:100%;padding:0;background:#e6ecda}
  #reader .reader-art img{width:100%;height:auto;max-height:min(50dvh,max(180px,calc(100dvh - 430px)));border-radius:0;object-fit:contain;object-position:center}
  #reader .reader-copy{flex:none;width:100%;align-self:stretch;padding:23px 44px 19px;background:#fffdf1}
  #reader .reading-page{display:block;max-width:850px;margin:0 auto}
  #reader .story-paragraph{font-size:1.3rem;line-height:1.6;text-align:left}
  .reader-controls{padding:11px 28px 16px;border-top:0;box-shadow:none}
  #reader .reader-bottom{gap:22px}
  .reader-progress{margin-top:12px}
}