/* Screen-bound reading: navigation is outside the measured text area. */
body.is-reading { overflow: hidden; }
.reading-shell { --edge: clamp(28px, 3.4vw, 48px); height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.reading-top { min-height: 56px; padding: max(4px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 4px max(20px, env(safe-area-inset-left)); flex-wrap: nowrap; }
.reader-menu-button { min-height: 44px; padding: 0 8px; }
.reader { width: 100%; height: 100%; min-height: 0; max-width: 1440px; padding: 16px calc(var(--edge) + 8px); }
.spread { height: 100%; min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; border-radius: 12px; box-shadow: none; background: var(--white); }
.page-art { height: 100%; min-height: 0; margin: 0; padding: 12px; background: transparent; justify-content: center; }
.page-art img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
/* New stories choose fixed art positions by scene. Existing editions keep
   their original layout. Explicit grid coordinates also survive reflow. */
.spread.art-right > .page-art { grid-column: 2; grid-row: 1; }
.spread.art-right > .reading-text { grid-column: 1; grid-row: 1; }
.spread.art-left > .page-art { grid-column: 1; grid-row: 1; }
.spread.art-left > .reading-text { grid-column: 2; grid-row: 1; }
.reading-text { height: 100%; min-height: 0; padding: clamp(18px, 2.8vw, 42px); justify-content: flex-start; }
.text-window { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.story-text { font-size: var(--reading-size, 24px); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.reading-bottom { padding: 4px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); min-height: 60px; flex-wrap: nowrap; gap: 8px; border-top: 1px solid var(--line); }
.pager-button { min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.pager-button:hover, .reader-menu-button:hover { background: var(--pale); }
.reading-meta { text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.page-edge { position: fixed; top: max(56px, calc(48px + env(safe-area-inset-top))); bottom: max(60px, calc(52px + env(safe-area-inset-bottom))); width: var(--edge); padding: 0; display: grid; place-items: center; color: var(--muted); font: 28px Georgia, serif; border-radius: 4px; }
.edge-previous { left: env(safe-area-inset-left, 0px); }
.edge-next { right: env(safe-area-inset-right, 0px); }
.page-edge:hover { background: #263a3b08; }
.page-edge:focus-visible { outline-offset: -4px; }
.reader-menu { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.reader-menu::backdrop { background: #263a3b66; }
.reader-menu > * + * { margin-top: 20px; }
.reader-menu h2 { font-size: 28px; }
.reader-menu h3 { font-size: 20px; }
.menu-vocabulary { border-top: 1px solid var(--line); padding-top: 16px; }
.menu-vocabulary dt { font-weight: 650; margin-top: 12px; }
.menu-vocabulary dd { margin: 3px 0 0; }
.page-art .image-error { min-height: 0; }
.page-art[hidden], .chapter-opening[hidden] { display: none; }
.chapter-opening { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.15; margin: 0 0 22px; }
.chapter-opening span { display: block; color: var(--muted); font: 12px system-ui, sans-serif; margin-bottom: 9px; }
.chapter-contents summary { cursor: pointer; padding-block: 8px; }
.chapter-contents ol { padding-left: 24px; }
.chapter-contents button { text-align: left; min-height: 44px; padding: 8px; width: 100%; }
.chapter-contents button[aria-current] { color: var(--orange); font-weight: bold; }
@media (orientation: portrait), (max-width: 650px) and (min-height: 501px) {
  .spread { grid-template-columns: 1fr; grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
  .page-art { padding: 8px 16px 0; }
  .reading-text { padding: 18px clamp(14px, 4vw, 40px); }
  .spread.art-portrait-top > .page-art { grid-column: 1; grid-row: 1; }
  .spread.art-portrait-top > .reading-text { grid-column: 1; grid-row: 2; }
  .spread.art-portrait-bottom { grid-template-rows: minmax(0, 1fr) minmax(0, 32%); }
  .spread.art-portrait-bottom > .reading-text { grid-column: 1; grid-row: 1; }
  .spread.art-portrait-bottom > .page-art { grid-column: 1; grid-row: 2; padding: 0 16px 8px; }
}
@media (max-width: 400px) {
  .reader { padding: 8px var(--edge); }
  .reading-bottom { padding-inline: 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .pager-button span { display: none; }
  .pager-button { padding-inline: 6px; font-size: 12px; }
  .reading-meta { font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .reader { padding-block: 6px; }
  .reading-text { padding: 8px 16px; }
}
/* Chapters keep a comfortable text measure. Art follows its complete chapter
   as one separate screen, never repeated on every continuation page. */
.spread.text-only { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.text-only .reading-text { width: 100%; max-width: 860px; margin-inline: auto; }
.text-window { flex: 1; height: auto; }
.illustration-screen .reading-text { display: none; }
.illustration-screen .page-art { width: 100%; max-width: 1120px; margin-inline: auto; padding: 20px; }
/* A chapter starts on a fresh spread. Each leaf is measured independently;
   an odd final leaf leaves the facing page blank, as in a printed book. */
.chapter-book { --pages-per-view: 1; }
.reader-page { height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.reader-page[data-slot="1"] { display: none; }
.reader-page .reading-text[hidden], .reader-page .page-art[hidden] { display: none; }
.chapter-book .reading-text { display: flex; }
.reader-page .page-art { width: 100%; max-width: none; padding: 20px; }
@media (min-width: 900px) and (orientation: landscape) {
  .spread.chapter-book { --pages-per-view: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reader-page { border-left: 1px solid transparent; }
  .reader-page[data-slot="1"] { display: block; border-left-color: var(--line); }
  .chapter-book .reading-text { max-width: none; padding: clamp(20px, 2.5vw, 36px); }
}
.cover-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; margin: 0; }
.cover-frame img { width: 100%; height: 100%; object-fit: contain; }
.cover-title { position: absolute; top: 3.5%; left: 17%; width: 77%; text-align: center; color: #38372f; font-family: Georgia, serif; font-weight: 600; font-size: 7.2cqw; line-height: 1.08; letter-spacing: -.02em; }
.cover-title span { display: block; }
.cartoon-cover .cover-title { top: 5.5%; left: 8%; width: 84%; font-family: 'Trebuchet MS', sans-serif; font-weight: 800; font-size: 10.2cqw; line-height: 1.04; color: #493145; letter-spacing: -.045em; }
.light-cover-title .cover-title { color: #fff5d9; }
.hero .cover-frame { max-width: 360px; justify-self: center; align-self: center; }
.hero:has(.cover-frame) { background: #ece7d9; }
.detail > .cover-frame { max-width: 350px; justify-self: center; }
@media (max-width: 650px) {
  .hero .cover-frame { order: -1; max-width: 260px; margin-block: 24px 0; }
  .detail > .cover-frame { max-width: 260px; }
  .chapter-opening { margin-bottom: 14px; }
  .text-only .reading-text { padding-inline: 14px; }
}