/* Real-book stage (book-stage.js). Scoped to body.bk-on, which only Level 1 book records set.
   Screen only: in print, #reading-layer (and everything here) is hidden and the print book is used. */
@media screen {
  body.bk-on { --bk-paper: #fffaf0; --bk-paper-2: #f6eedb; --bk-ink: #2e2a24; --bk-brown: #6a4528; --bk-board: #4f3324; --bk-ribbon: #b5583c; }

  /* Child view: the book is the hero; the cover picture lives on the book itself. */
  body.bk-on:not(.grownup-mode) .book-cover { display: block; padding-bottom: 6px; }
  body.bk-on:not(.grownup-mode) .book-cover > .cover-art,
  body.bk-on:not(.grownup-mode) .book-cover > .cover-line,
  body.bk-on:not(.grownup-mode) .book-cover > .cover-imprint { display: none; }
  body.bk-on:not(.grownup-mode) .book-cover h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 6px 0 2px; }
  body.bk-on:not(.grownup-mode) .book-cover .hook { display: inline-block; margin: 8px 12px 0 0; }

  /* The stage: book and control bar, wider than the text column. */
  body.bk-on #reading-layer { display: grid; grid-template-areas: "book" "bar"; justify-items: center; width: var(--bk-w); max-width: none;
    margin: 18px 0 8px calc(50% - var(--bk-w) / 2); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; position: relative; }
  body.bk-on #reading-layer::before { content: none; }
  body.bk-on #reading-layer > .reader-audio-status, body.bk-on #reading-layer > .reader-status,
  body.bk-on .reader-page-nav .scene-progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

  /* The open book: cloth boards, two pages, a spine fold. */
  body.bk-on #reader-page { grid-area: book; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%;
    width: var(--bk-w); height: var(--bk-h); margin: 0; padding: 0; column-gap: 0; background: var(--bk-paper); border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 0 calc(var(--bk-h) * .022) var(--bk-board), 0 0 0 calc(var(--bk-h) * .022 + 1px) #2c1c12, 0 34px 60px -18px rgba(38, 22, 8, .6), 0 12px 24px -12px rgba(38, 22, 8, .45);
    align-items: stretch; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: opacity .18s ease; animation: none; outline-offset: 10px; }
  body.bk-on #reader-page.bk-fade { opacity: 0; transition: none; }
  body.bk-on #reader-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--bk-w) * .035); width: calc(var(--bk-w) * .07); z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(60, 38, 16, .10) 38%, rgba(30, 18, 6, .32) 50%, rgba(60, 38, 16, .10) 62%, transparent); }
  body.bk-on #reader-page::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(90, 60, 30, .18); }

  /* Left page: the art, full bleed. */
  body.bk-on #reader-page > .story-figure { grid-column: 1; grid-row: 1; margin: 0; position: relative; overflow: hidden; min-height: 0; border-radius: 3px 0 0 3px;
    box-shadow: -3px 0 0 #efe5cf, -5px 0 0 #e1d4b8, -7px 0 0 #efe5cf; }
  body.bk-on #reader-page > .story-figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; pointer-events: none; }

  /* Right page: heading, story text, folio. Font size follows the page; --fit shrinks it to fit. */
  body.bk-on .bk-right { --fit: 1; grid-column: 2; grid-row: 1; position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
    padding: calc(var(--bk-h) * .085) calc(var(--bk-page-w) * .1) calc(var(--bk-h) * .1); border-radius: 0 3px 3px 0; color: var(--bk-ink);
    background: radial-gradient(#bba67d1f .55px, transparent .65px) 0 0 / 5px 5px, linear-gradient(90deg, #f3e9d3, var(--bk-paper) 12%, var(--bk-paper)); }
  body.bk-on #reader-page > .bk-right { box-shadow: 3px 0 0 #efe5cf, 5px 0 0 #e1d4b8, 7px 0 0 #efe5cf; }
  body.bk-on .bk-right.bk-overflow { overflow-y: auto; }
  body.bk-on .bk-right h2 { font-family: var(--story-font); font-size: calc(var(--bk-base) * 1.12 * var(--fit)); line-height: 1.25; color: var(--bk-brown); margin: 0 0 .9em; max-width: none; font-weight: 700; letter-spacing: .005em; }
  body.bk-on .bk-right .reading-text { font-family: var(--story-font); font-size: calc(var(--bk-base) * var(--reading-scale, 1) * var(--fit)); line-height: 1.62; max-width: none; margin: 0; color: var(--bk-ink); }
  body.bk-on .bk-right .reading-text p { margin: 0 0 .55em; }
  body.bk-on .bk-folio { position: absolute; bottom: calc(var(--bk-h) * .04); left: 0; right: 0; text-align: center; font-family: var(--story-font); font-style: italic; color: #9a7b5c; font-size: .9rem; }
  body.bk-on .bk-right .story-end { margin: auto 0 0; padding-top: .6em; border-top: 1px solid #e5d7b8; font-size: calc(var(--bk-base) * .72); }
  body.bk-on .bk-right .story-end h3 { font-family: var(--story-font); font-style: italic; color: var(--bk-brown); margin: 0 0 .2em; font-size: 1.2em; }
  body.bk-on .bk-right .story-end p { display: none; }
  body.bk-on .bk-right .story-end .btn { font-size: .95rem; }
  body.bk-on .bk-right .story-end a { font-size: .9rem; margin: 0 0 0 12px; }

  /* The activity card: hidden behind the art page's outer edge, slides out across the art. */
  body.bk-on .bk-card-tab { position: absolute; z-index: 5; top: calc(var(--bk-h) * .06); left: calc(var(--bk-h) * -.022 - 10px); display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 6px 16px 6px 8px; border: 0; border-radius: 0 999px 999px 0; background: #fffaf0; color: var(--bk-brown); font: italic 700 1.02rem/1.1 var(--story-font);
    box-shadow: 0 6px 16px -6px rgba(40, 24, 8, .55), inset 0 0 0 1px #e6d6b4; cursor: pointer; transition: transform .25s ease, opacity .2s ease; }
  body.bk-on .bk-card-tab:hover { transform: translateX(4px); }
  body.bk-on .bk-card-tab .avatar { width: 34px; height: 34px; font-size: 1rem; }
  body.bk-on .bk-card-tab-state { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--bk-ribbon); color: #fff; font: 700 .8rem/1 system-ui, sans-serif; font-style: normal; }
  body.bk-on .bk-card-tab.is-done .bk-card-tab-state { background: var(--accent); }
  body.bk-on #reader-page.bk-card-open .bk-card-tab { opacity: 0; pointer-events: none; }
  body.bk-on #reader-page > details.story-pause.bk-card { grid-column: 1; grid-row: 1; position: relative; z-index: 4; align-self: stretch; margin: 0; min-width: 0; min-height: 0;
    overflow: auto; overscroll-behavior: contain; padding: calc(var(--bk-h) * .05) calc(var(--bk-page-w) * .07); border: 0; border-radius: 3px 0 0 3px;
    background: radial-gradient(#bba67d22 .55px, transparent .65px) 0 0 / 5px 5px, #fbf3e1; box-shadow: 14px 0 26px -14px rgba(40, 24, 8, .55);
    clip-path: inset(0 0 0 0); transform: translateX(-102%); visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s; user-select: text; -webkit-user-select: text; touch-action: auto; }
  body.bk-on #reader-page.bk-card-open > details.story-pause.bk-card { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  body.bk-on #reader-page > .story-figure { overflow: hidden; }
  body.bk-on #reader-page { overflow: visible; }
  body.bk-on #reader-page > .story-figure, body.bk-on #reader-page > details.story-pause.bk-card { contain: paint; }
  body.bk-on .bk-card .bk-card-close { float: right; margin: 0 0 10px 12px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid #c9b48c; background: #fffaf0; color: var(--bk-brown); font-weight: 700; cursor: pointer; }
  body.bk-on .bk-card > summary { pointer-events: none; }
  body.bk-on:not(.grownup-mode) .bk-card .catalog-gap { display: none; }
  body.bk-on .bk-card .turn-block { background: #fffdf7; }

  /* Page-turn overlay: leaf, under-pages and cast shadow. */
  body.bk-on .bk-turn { grid-area: book; position: relative; z-index: 6; width: var(--bk-w); height: var(--bk-h); pointer-events: none; perspective: 2600px; perspective-origin: 50% 45%; }
  body.bk-on .bk-turn[hidden] { display: none; }
  body.bk-on .bk-under { position: absolute; inset: 0; }
  body.bk-on .bk-under-left, body.bk-on .bk-under-right { position: absolute; top: 0; width: var(--bk-page-w); height: 100%; }
  body.bk-on .bk-under-left { left: 0; } body.bk-on .bk-under-right { left: var(--bk-page-w); }
  body.bk-on .bk-face-art { overflow: hidden; background: #e9dcc0; }
  body.bk-on .bk-face-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  body.bk-on .bk-face-paper { background: linear-gradient(90deg, #efe4cb, var(--bk-paper)); }
  body.bk-on .bk-cast { position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 30%, rgba(30, 18, 6, .28) 48%, rgba(30, 18, 6, .38) 50%, rgba(30, 18, 6, .18) 56%, transparent 72%); }
  body.bk-on .bk-leaf { position: absolute; top: 0; transform-style: preserve-3d; }
  body.bk-on .bk-strip { position: absolute; top: 0; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
  body.bk-on .bk-strip-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--bk-paper); }
  body.bk-on .bk-strip-back { transform: rotateY(180deg); }
  body.bk-on .bk-shade { position: absolute; inset: 0; background: #2a1a0a; opacity: 0; pointer-events: none; }

  /* The closed cover (first visit in a tab) and its opening swing. */
  body.bk-on .bk-cover { grid-area: book; position: relative; z-index: 7; width: var(--bk-w); height: var(--bk-h); perspective: 2600px; }
  body.bk-on .bk-cover-leaf { position: absolute; top: calc(var(--bk-h) * -.022); left: calc(var(--bk-page-w) / 2); width: var(--bk-page-w); height: calc(var(--bk-h) * 1.044);
    transform-style: preserve-3d; transform-origin: 0 50%; transition: left .95s cubic-bezier(.45, .05, .2, 1), transform .95s cubic-bezier(.45, .05, .2, 1); }
  body.bk-on .bk-cover-front, body.bk-on .bk-cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 10px 10px 4px; overflow: hidden; }
  body.bk-on .bk-cover-front { cursor: pointer; background: var(--bk-board);
    box-shadow: inset 14px 0 0 rgba(0, 0, 0, .22), inset 16px 0 0 rgba(255, 255, 255, .08), 0 30px 60px -16px rgba(38, 22, 8, .65); }
  body.bk-on .bk-cover-back { transform: rotateY(180deg); background: radial-gradient(#ffffff2a 1px, transparent 1.2px) 0 0 / 14px 14px, #3f6f57; }
  body.bk-on .bk-cover-art { position: absolute; top: 7%; left: 10%; width: 82%; height: 55%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 4px #e9d7a8, 0 8px 18px rgba(0, 0, 0, .35); }
  body.bk-on .bk-cover-plate { position: absolute; left: 10%; right: 8%; top: 66%; text-align: center; color: #f6ead0; }
  body.bk-on .bk-cover-level { margin: 0; font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e9d7a8; }
  body.bk-on .bk-cover-title { margin: .35em 0 .2em; font-family: var(--story-font); font-weight: 700; font-size: calc(var(--bk-page-w) * .064); line-height: 1.12; color: #fff6e2; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
  body.bk-on .bk-cover-by { margin: 0; font-family: var(--story-font); font-style: italic; color: #e9d7a8; }
  body.bk-on .bk-cover-imprint { position: absolute; top: 3%; right: 4%; width: 15%; }
  body.bk-on .bk-cover-imprint img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
  body.bk-on .bk-cover-open { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); z-index: 2; min-height: 52px; padding: 12px 28px; border: 0; border-radius: 999px;
    background: var(--bk-ribbon); color: #fff; font: 800 1.08rem/1 system-ui, sans-serif; box-shadow: 0 5px 0 #8e3f27, 0 12px 24px -8px rgba(0, 0, 0, .5); cursor: pointer; }
  body.bk-on .bk-cover-front { overflow: visible; }
  body.bk-on .bk-cover.bk-cover-opening .bk-cover-leaf { left: 0; transform: rotateY(-180deg); }
  body.bk-on .bk-cover.bk-cover-opening .bk-cover-open { opacity: 0; transition: opacity .2s; }
  body.bk-on .bk-cover.bk-cover-gone { opacity: 0; transition: opacity .25s ease; }
  body.bk-on.bk-closed #reader-page, body.bk-on.bk-closed .bk-bar { opacity: 0; pointer-events: none; }
  body.bk-on.bk-opening #reader-page, body.bk-on.bk-opening .bk-bar { opacity: 1; transition: opacity .5s ease .35s; }
  body.bk-on.bk-closed .bk-cover { pointer-events: auto; }

  /* Control bar under the book. */
  body.bk-on .bk-bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(var(--bk-w), 1100px); margin-top: calc(var(--bk-h) * .022 + 14px); }
  body.bk-on .bk-bar-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.bk-on .bk-bar-left, body.bk-on .bk-bar-right { flex: 1 1 0; }
  body.bk-on .bk-bar-right { justify-content: flex-end; }
  body.bk-on .bk-bar .reader-toolbar { margin: 0; gap: 8px; flex-wrap: nowrap; }
  body.bk-on .bk-bar .reader-toolbar label { display: flex; align-items: center; gap: 0; font-size: 0; }
  body.bk-on .bk-bar .reader-toolbar select { font-size: .9rem; min-height: 44px; border-radius: 999px; border: 1px solid #c9b48c; background: #fffaf0; color: var(--bk-brown); padding: 0 10px; font-weight: 700; }
  body.bk-on .bk-bar .btn, body.bk-on .bk-sound { min-height: 44px; border-radius: 999px; padding: 8px 16px; font-weight: 800; box-shadow: none; white-space: nowrap; }
  body.bk-on .bk-bar .reader-toolbar .btn { background: #fffaf0; color: var(--bk-brown); border: 1px solid #c9b48c; }
  body.bk-on .bk-bar .reader-toolbar .btn:first-of-type { background: #37503b; color: #fff; border-color: #37503b; }
  body.bk-on .bk-bar .reader-page-nav { margin: 0; padding: 0; border: 0; gap: 6px; flex-wrap: nowrap; }
  body.bk-on .bk-bar .reader-page-nav .btn { width: 48px; height: 48px; padding: 0; font-size: 0; background: #fffaf0; border: 1px solid #c9b48c; color: var(--bk-brown); }
  body.bk-on .bk-bar .reader-page-nav .btn::before { font-size: 1.35rem; line-height: 1; }
  body.bk-on .bk-bar .reader-page-nav .btn:first-child::before { content: "←"; }
  body.bk-on .bk-bar .reader-page-nav .btn:last-child::before { content: "→"; }
  body.bk-on .bk-bar .reader-page-nav .btn.turn-page:not(:disabled) { background: var(--bk-ribbon); color: #fff; border-color: var(--bk-ribbon); }
  body.bk-on .bk-bar .reader-page-nav .btn:disabled { opacity: .35; }
  body.bk-on .bk-bar-mid { flex: 0 0 auto; }
  body.bk-on .bk-dots .scene-jump { display: flex; gap: 2px; margin: 0; }
  body.bk-on .bk-dots .scene-jump .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; color: #8a6d4f; border: 0; font: 700 .85rem/1 var(--story-font); }
  body.bk-on .bk-dots .scene-jump .btn::after { content: none; }
  body.bk-on .bk-dots .scene-jump [aria-current] { background: #fffaf0; color: var(--bk-brown); box-shadow: inset 0 0 0 2px var(--bk-ribbon); }
  body.bk-on .bk-sound { width: 44px; padding: 0; border: 1px solid #c9b48c; background: #fffaf0; color: var(--bk-brown); font-size: 1.1rem; cursor: pointer; }
  body.bk-on .bk-sound[aria-pressed="false"] { opacity: .55; }

  /* One page at a time: phones and portrait tablets. Art on top, uncropped; text below. */
  body.bk-on.bk-single #reader-page { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  body.bk-on.bk-single #reader-page::before { content: none; }
  body.bk-on.bk-single #reader-page > .story-figure { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; height: auto; border-radius: 3px 3px 0 0; box-shadow: none; }
  body.bk-on.bk-single .bk-right { grid-column: 1; grid-row: 2; padding: 18px 22px 40px; border-radius: 0 0 3px 3px; }
  body.bk-on.bk-single #reader-page > .bk-right { box-shadow: 3px 0 0 #efe5cf, 5px 0 0 #e1d4b8; }
  body.bk-on.bk-single #reader-page > details.story-pause.bk-card { grid-column: 1; grid-row: 1 / span 2; align-self: end; height: 82%; padding: 18px 18px 28px; border-radius: 16px 16px 3px 3px;
    transform: translateY(102%); box-shadow: 0 -12px 26px -12px rgba(40, 24, 8, .55); }
  body.bk-on.bk-single #reader-page.bk-card-open > details.story-pause.bk-card { transform: none; }
  body.bk-on.bk-single #reader-page { overflow: hidden; }
  body.bk-on.bk-single .bk-card-tab { top: 12px; left: 0; border-radius: 0 999px 999px 0; }
  body.bk-on.bk-single .bk-face-full { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bk-paper); }
  body.bk-on.bk-single .bk-face-full .bk-face-art { aspect-ratio: 3 / 2; }
  body.bk-on.bk-single .bk-face-full .bk-right { padding: 18px 22px 40px; }
  body.bk-on.bk-single .bk-under > .bk-face-full { position: absolute; inset: 0; }
  body.bk-on.bk-single .bk-cover-leaf { left: 0; top: 0; height: 100%; }
  body.bk-on.bk-single .bk-cover.bk-cover-opening .bk-cover-leaf { transform: rotateY(-180deg); }
  body.bk-on.bk-single .bk-cover-title { font-size: calc(var(--bk-page-w) * .085); }
  body.bk-on.bk-single .bk-cast { background: linear-gradient(90deg, rgba(30, 18, 6, .3), transparent 40%); }
  body.bk-on.bk-single .bk-bar { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  body.bk-on.bk-single .bk-bar-left, body.bk-on.bk-single .bk-bar-right { flex: 0 1 auto; }
  body.bk-on.bk-single .bk-bar-mid { order: -1; flex: 1 0 100%; justify-content: center; }
  body.bk-on.bk-single .bk-dots .scene-jump .btn { width: 38px; min-width: 38px; }
}
@media screen {
  body.bk-on.bk-single .bk-bar-left { flex: 1 1 100%; justify-content: center; }
  body.bk-on.bk-single .bk-bar .reader-toolbar { flex-wrap: wrap; justify-content: center; }
  body.bk-on.bk-single .bk-bar .btn { padding: 8px 14px; }
}

@media screen {
  html:has(body.bk-on), body.bk-on { overflow-x: clip; }
  body.bk-on.bk-single .bk-bar-left, body.bk-on.bk-single .bk-bar-right { flex: 0 0 auto; }
  body.bk-on.bk-single .bk-bar .reader-toolbar { flex-wrap: nowrap; }
  body.bk-on.bk-single .bk-bar .reader-toolbar select { width: 104px; }
  body.bk-on.bk-single .bk-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.bk-on.bk-single .bk-bar .reader-toolbar .btn:last-of-type { width: 44px; padding: 0; }
}

/* Fit pass (25 Oct): picture-book proportions, ending on the picture page, shorter art on short phones. */
@media screen {
  body.bk-on .bk-right { padding: calc(var(--bk-h) * .07) calc(var(--bk-page-w) * .095) calc(var(--bk-h) * .085); }
  body.bk-on .bk-right h2 { margin: 0 0 .6em; }
  body.bk-on .bk-right .reading-text { line-height: 1.5; }
  body.bk-on .bk-right .reading-text p { margin: 0 0 .42em; }
  body.bk-on #reader-page > .story-end.bk-end { grid-column: 1; grid-row: 1; align-self: end; justify-self: stretch; position: relative; z-index: 3; margin: 0; padding: 14px 18px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 0; color: #fff8e8;
    background: linear-gradient(180deg, transparent, rgba(30, 18, 6, .55) 38%, rgba(30, 18, 6, .78)); }
  body.bk-on #reader-page > .story-end.bk-end h3 { margin: 0; font-family: var(--story-font); font-style: italic; font-size: calc(var(--bk-base) * 1.25); color: #fff8e8; }
  body.bk-on #reader-page > .story-end.bk-end p { display: none; }
  body.bk-on #reader-page > .story-end.bk-end .btn { background: var(--bk-ribbon); color: #fff; border: 0; min-height: 46px; padding: 10px 18px; box-shadow: 0 4px 0 #8e3f27; white-space: nowrap; }
  body.bk-on #reader-page > .story-end.bk-end a { color: #fff1d6; font-weight: 700; margin: 0; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end { grid-row: 1; }
  body.bk-on.bk-single #reader-page > .story-figure { aspect-ratio: auto; height: min(calc(var(--bk-w) / 1.5), calc(var(--bk-h) * var(--bk-art-frac, .4))); }
  body.bk-on.bk-single .bk-face-full .bk-face-art { aspect-ratio: auto; height: min(calc(var(--bk-w) / 1.5), calc(var(--bk-h) * .4)); }
  body.bk-on.bk-single .bk-right, body.bk-on.bk-single .bk-face-full .bk-right { padding: 14px 18px 30px; }
}
@media screen {
  body.bk-on #reader-page > .story-end.bk-end { z-index: 5; }
  body.bk-on #reader-page.bk-last > details.story-pause.bk-card { padding-bottom: 104px; }
  body.bk-on #reader-page.bk-last.bk-card-open > .story-end.bk-end { background: linear-gradient(180deg, rgba(251, 243, 225, 0), #fbf3e1 30%); color: var(--bk-brown); }
  body.bk-on #reader-page.bk-last.bk-card-open > .story-end.bk-end h3 { color: var(--bk-brown); }
  body.bk-on #reader-page.bk-last.bk-card-open > .story-end.bk-end a { color: var(--bk-brown); }
}
/* Polish pass (25 Oct): bar spacing, card close button on its own row, compact phone bar and ending. */
@media screen {
  body.bk-on .bk-bar { margin-top: calc(var(--bk-h) * .022 + 18px); }
  body.bk-on .bk-bar-left, body.bk-on .bk-bar-right { flex: 1 0 auto; }
  body.bk-on .bk-card .bk-card-close { float: none; display: flex; align-items: center; margin: 0 0 12px auto; width: fit-content; }
  body.bk-on .bk-card .reader-question button { max-width: 100%; }
  body.bk-on.bk-single .bk-bar-left, body.bk-on.bk-single .bk-bar-right { flex: 0 0 auto; }
  body.bk-on.bk-single .bk-bar { column-gap: 8px; }
  body.bk-on.bk-single .bk-bar .reader-toolbar select { width: 116px; padding: 0 6px; font-size: .82rem; }
  body.bk-on.bk-single .bk-bar .reader-toolbar .btn:first-of-type { padding: 8px 12px; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end { padding: 10px 12px 12px; gap: 6px 10px; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end h3 { font-size: 1.2rem; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end .btn { min-height: 42px; padding: 8px 14px; font-size: .92rem; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end a { font-size: .85rem; }
}

/* ---------- The activity book (activity-book.js): a second real book, the child's own workbook. ---------- */
@media screen {
  body.ab-on #story-activities { background: none; border: 0; box-shadow: none; padding: 0; }
  body.ab-on:not(.grownup-mode) #story-activities > :not(.ab-stage) { display: none; }
  body.ab-on .ab-stage { display: grid; grid-template-areas: "book" "bar"; justify-items: center; width: var(--bk-w); margin: 10px 0 18px calc(50% - var(--bk-w) / 2); }
  body.ab-on .ab-book { grid-area: book; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; width: var(--bk-w); height: var(--bk-h); border-radius: 3px;
    background: #fffaf0; box-shadow: 0 0 0 calc(var(--bk-h) * .022) #3e5b47, 0 0 0 calc(var(--bk-h) * .022 + 1px) #22352a, 0 34px 60px -18px rgba(20, 32, 22, .55); }
  body.ab-on .ab-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--bk-w) * .035); width: calc(var(--bk-w) * .07); z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(40, 50, 30, .1) 38%, rgba(20, 28, 14, .3) 50%, rgba(40, 50, 30, .1) 62%, transparent); }
  body.ab-on .ab-turn { grid-area: book; }
  body.ab-on .ab-page { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--bk-h) * .022);
    padding: calc(var(--bk-h) * .065) calc(var(--bk-page-w) * .085); color: #2e2a24; font-size: calc(var(--bk-base) * .78);
    background: radial-gradient(#9fb0a03a 1px, transparent 1.2px) 0 0 / 18px 18px, #fffaf0; }
  body.ab-on .ab-page.ab-left { grid-column: 1; grid-row: 1; border-radius: 3px 0 0 3px; }
  body.ab-on .ab-page.ab-right { grid-column: 2; grid-row: 1; border-radius: 0 3px 3px 0; }
  body.ab-on .ab-face-page .ab-page { overflow: hidden; }
  body.ab-on .ab-kicker { margin: 0; font: 800 .74rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b5583c; }
  body.ab-on .ab-q { margin: 0; font-family: var(--story-font); font-size: calc(var(--bk-base) * 1.08); line-height: 1.25; color: #4b3420; }
  body.ab-on .ab-say { margin: 0; min-height: 1.4em; font-weight: 700; color: #37503b; }
  body.ab-on .ab-hint { margin: 0; color: #6b6257; font-size: .9em; }
  /* Title page */
  body.ab-on .ab-title { justify-content: center; text-align: center; align-items: center; }
  body.ab-on .ab-badge { width: 46%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 0 0 6px #d8c7a2, 0 12px 24px -10px rgba(0, 0, 0, .4); transform: rotate(-2deg); }
  body.ab-on .ab-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.ab-on .ab-title h2 { margin: 6px 0 0; font-family: var(--story-font); font-size: calc(var(--bk-base) * 1.6); color: #37503b; }
  body.ab-on .ab-sub { margin: 0; font-family: var(--story-font); font-style: italic; color: #6a4528; }
  body.ab-on .ab-steps { margin: 0; font-weight: 800; letter-spacing: .08em; color: #b5583c; }
  body.ab-on .ab-title label { font-weight: 700; margin-top: 6px; }
  body.ab-on .ab-title input { width: min(100%, 320px); min-height: 46px; text-align: center; border: 2px dashed #b9a57c; border-radius: 12px; background: #fffdf7; font: 700 1.05rem var(--story-font); }
  /* LOOK: picture cards */
  body.ab-on .ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.ab-on .ab-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin: 0; border-radius: 14px; background: #fff; color: #4b3420; border: 2px solid #e2d4b4;
    box-shadow: 0 4px 0 #e2d4b4; font: 700 .85rem/1.2 var(--story-font); white-space: normal; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
  body.ab-on .ab-card:hover { transform: translateY(-3px) rotate(-1deg); }
  body.ab-on .ab-card .activity-picture { width: 100%; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 9px; }
  body.ab-on .ab-card[aria-pressed="true"] { border-color: #3f7d4e; box-shadow: 0 4px 0 #3f7d4e; background: #eef6ea; }
  /* CHOOSE */
  body.ab-on .ab-pic { width: 100%; max-height: 38%; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); }
  body.ab-on .ab-choices { display: flex; flex-wrap: wrap; gap: 10px; }
  body.ab-on .ab-choice { margin: 0; min-height: 52px; padding: 10px 18px; border-radius: 999px; background: #fff; color: #4b3420; border: 2px solid #e2d4b4; box-shadow: 0 4px 0 #e2d4b4; font: 700 1rem var(--story-font); }
  body.ab-on .ab-choice[aria-pressed="true"] { border-color: #3f7d4e; box-shadow: 0 4px 0 #3f7d4e; background: #eef6ea; }
  /* SHOW: stickers onto pictures */
  body.ab-on .ab-stickers { display: flex; flex-wrap: wrap; gap: 8px; }
  body.ab-on .ab-sticker { min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 0; background: #ffe08a; color: #4b3420; font: 800 1rem var(--story-font);
    box-shadow: 0 3px 0 #d9b44f, 0 6px 12px -6px rgba(0, 0, 0, .35); cursor: grab; touch-action: none; transform: rotate(-2deg); transition: transform .15s ease, opacity .2s ease; }
  body.ab-on .ab-sticker:nth-child(even) { transform: rotate(2deg); background: #bfe3d0; box-shadow: 0 3px 0 #86b99d, 0 6px 12px -6px rgba(0, 0, 0, .35); }
  body.ab-on .ab-sticker[aria-pressed="true"] { transform: scale(1.1) rotate(0); outline: 3px solid #b5583c; outline-offset: 2px; }
  body.ab-on .ab-sticker.used { opacity: .4; }
  body.ab-ghost, .ab-sticker.ab-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg) scale(1.1); opacity: .95; min-height: 44px; padding: 8px 16px; border-radius: 12px; background: #ffe08a; color: #4b3420; font: 800 1rem Georgia, serif; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .5); }
  body.ab-on .ab-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.ab-on .ab-slot { position: relative; padding: 0; margin: 0; border-radius: 12px; overflow: hidden; border: 2px dashed #c9b48c; background: #fff; cursor: pointer; min-height: 0; }
  body.ab-on .ab-slot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  body.ab-on .ab-slot-word { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) rotate(-3deg); padding: 4px 12px; border-radius: 10px; background: #ffe08a; color: #4b3420; font: 800 .95rem var(--story-font); box-shadow: 0 3px 0 #d9b44f; }
  body.ab-on .ab-slot-word:empty { display: none; }
  body.ab-on .ab-slot-page { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 8px; background: rgba(255, 250, 240, .9); font: 700 .7rem system-ui, sans-serif; color: #6a4528; }
  body.ab-on .ab-slot.ready, body.ab-on .ab-slot.over { border-style: solid; border-color: #b5583c; }
  body.ab-on .ab-slot.right { border-style: solid; border-color: #3f7d4e; }
  body.ab-on .ab-slot.right .ab-slot-word::after { content: " ✓"; color: #2f6b3d; }
  /* FEEL */
  body.ab-on .ab-feelings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  body.ab-on .ab-feel { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 12px 6px; border-radius: 16px; background: #fff; color: #4b3420; border: 2px solid #e2d4b4; box-shadow: 0 4px 0 #e2d4b4; font: 700 .95rem var(--story-font); white-space: normal; transition: transform .2s ease; }
  body.ab-on .ab-feel .ab-face { width: 56%; max-width: 72px; height: auto; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
  body.ab-on .ab-feel[aria-pressed="true"] { border-color: #3f7d4e; box-shadow: 0 4px 0 #3f7d4e; background: #eef6ea; }
  body.ab-on .ab-feel[aria-pressed="true"] .ab-face { transform: scale(1.15) rotate(-6deg); }
  body.ab-on .ab-page textarea { width: 100%; min-height: 70px; border: 1px solid #c9b48c; border-radius: 10px; padding: 10px; font: inherit; background: #fffdf7; }
  /* Stars page */
  body.ab-on .ab-stars { display: flex; justify-content: center; gap: 4px; }
  body.ab-on .ab-star { width: 30px; height: 30px; fill: #eadfc6; stroke: #c9b48c; stroke-width: 1; }
  body.ab-on .ab-star.on { fill: #f2b632; stroke: #c48a12; }
  body.ab-on .ab-stars.pop .ab-star.on { animation: ab-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes ab-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
  body.ab-on .ab-check { align-self: center; min-height: 52px; padding: 12px 26px; border: 0; border-radius: 999px; background: #b5583c; color: #fff; font-weight: 800; box-shadow: 0 5px 0 #8e3f27; }
  body.ab-on .ab-stars-page .activity-score { margin: 0; text-align: center; font-size: .85em; color: #4b3420; }
  body.ab-on .ab-stars-page .book-progress, body.ab-on .ab-stars-page .book-review { border: 0; padding: 0; margin: 0; background: none; }
  body.ab-on .ab-stars-page .book-progress h3, body.ab-on .ab-stars-page .progress-list, body.ab-on .ab-stars-page .book-review > p, body.ab-on .ab-stars-page .review-quote, body.ab-on .ab-stars-page .review-items { display: none; }
  body.ab-on .ab-stars-page .progress-total { margin: 0; text-align: center; font-family: var(--story-font); }
  body.ab-on .ab-stars-page .book-review h3 { margin: 0 0 6px; font-family: var(--story-font); font-size: 1em; color: #4b3420; }
  body.ab-on .ab-stars-page .review-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.ab-on .ab-stars-page .review-page { grid-template-columns: 1fr; gap: 4px; padding: 6px; border-radius: 10px; }
  body.ab-on .ab-stars-page .review-title { font-size: .78em; }
  body.ab-on .ab-stars-page .review-page .btn { min-height: 36px; padding: 4px 10px; font-size: .78em; }
  /* Bar */
  body.ab-on .ab-bar { grid-area: bar; }
  body.ab-on .ab-bar .ab-prev, body.ab-on .ab-bar .ab-next { width: 48px; height: 48px; padding: 0; border-radius: 999px; background: #fffaf0; border: 1px solid #c9b48c; color: #4b3420; }
  body.ab-on .ab-bar .ab-prev::before { content: "←"; font-size: 1.35rem; } body.ab-on .ab-bar .ab-next::before { content: "→"; font-size: 1.35rem; }
  body.ab-on .ab-bar .ab-next:not(:disabled) { background: #3e5b47; color: #fff; border-color: #3e5b47; }
  body.ab-on .ab-bar button:disabled { opacity: .35; }
  body.ab-on .ab-dots { display: flex; gap: 2px; }
  body.ab-on .ab-dots .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; background: transparent; color: #6a4528; border: 0; font: 700 .85rem/1 var(--story-font); box-shadow: none; }
  body.ab-on .ab-dots [aria-current] { background: #fffaf0; box-shadow: inset 0 0 0 2px #3e5b47; }
  body.ab-on .ab-bar .btn.ghost { white-space: nowrap; }
  /* One page at a time */
  body.ab-on.bk-single .ab-book { grid-template-columns: 1fr; }
  body.ab-on.bk-single .ab-book::before { content: none; }
  body.ab-on.bk-single .ab-page { grid-column: 1; grid-row: 1; padding: 20px 18px; }
  body.ab-on.bk-single .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.ab-on.bk-single .ab-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ab-on.bk-single .ab-feelings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ab-on.bk-single .ab-bar { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  body.ab-on.bk-single .ab-bar .bk-bar-mid { order: -1; flex: 1 0 100%; justify-content: center; }
  body.ab-on.bk-single .ab-dots .btn { width: 38px; min-width: 38px; }
}
@media screen {
  body.ab-on .ab-cards { align-items: start; }
  body.ab-on .ab-card .activity-picture { height: auto !important; flex: none; display: block; }
  body.ab-on .ab-stars-page { gap: calc(var(--bk-h) * .016); }
  body.ab-on .ab-stars-page .review-page img { max-height: calc(var(--bk-h) * .11); width: 100%; object-fit: cover; }
  body.ab-on .ab-stars-page .review-title { font-size: .72em; line-height: 1.2; }
  body.ab-on .ab-stars-page .review-page .btn { min-height: 32px; padding: 2px 8px; font-size: .72em; }
  body.ab-on .ab-stars-page .book-review h3 { display: none; }
  body.ab-on .ab-stars-page .activity-score { font-size: .8em; }
}
@media screen {
  /* Stars page review: picture cards; the card itself is the "Go to page" button. */
  body.ab-on .ab-stars-page .review-page { position: relative; padding: 0; overflow: hidden; border: 2px solid #e2d4b4; }
  body.ab-on .ab-stars-page .review-page img { display: block; width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
  body.ab-on .ab-stars-page .review-body { position: static; }
  body.ab-on .ab-stars-page .review-title { position: absolute; left: 6px; top: 6px; margin: 0; padding: 2px 7px; border-radius: 8px; background: rgba(255, 250, 240, .92); font: 700 .7rem system-ui, sans-serif; color: #6a4528;
    max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ab-on .ab-stars-page .review-page .btn { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; color: transparent; border: 0; box-shadow: none; font-size: 0; }
  body.ab-on .ab-stars-page .review-page .btn:focus-visible { outline: 3px solid #b5583c; outline-offset: -3px; }
  body.ab-on .ab-stars-page .review-page:has(.review-items .todo)::after { content: "○"; position: absolute; right: 6px; bottom: 4px; color: #fff; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  body.ab-on .ab-stars-page .review-page:not(:has(.review-items .todo))::after { content: "✓"; position: absolute; right: 6px; bottom: 2px; color: #fff; font-weight: 900; font-size: 1.2rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  /* SHOW: shorter picture slots */
  body.ab-on .ab-slot img { aspect-ratio: 16 / 10; }
  body.ab-on.bk-single .ab-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.ab-on.bk-single .ab-slot-word { font-size: .8rem; padding: 2px 8px; bottom: 4px; }
  body.ab-on.bk-single .ab-slot-page { font-size: .62rem; padding: 1px 5px; }
  body.ab-on.bk-single .ab-sticker { min-height: 40px; padding: 6px 12px; font-size: .95rem; }
}
@media screen and (max-height: 720px) {
  body.ab-on.bk-single .ab-page { padding: 14px 14px; gap: 10px; }
  body.ab-on.bk-single .ab-feel { padding: 8px 6px; }
  body.ab-on.bk-single .ab-feel .ab-face { width: 40%; }
  body.ab-on.bk-single .ab-page textarea { min-height: 54px; }
  body.ab-on.bk-single .ab-stars-page .review-pages { gap: 6px; }
}
@media screen {
  body.ab-on.bk-spread .ab-stars-page .review-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  body.ab-on.bk-spread .ab-stars-page .review-title { font-size: 0; padding: 0 6px; }
  body.ab-on.bk-spread .ab-stars-page .review-title::first-letter { font-size: 0; }
  body.ab-on.bk-spread .ab-slot img { aspect-ratio: 16 / 9; }
}
@media screen {
  body.ab-on.bk-spread .ab-stars-page .review-title { display: none; }
  body.ab-on.bk-spread .ab-slots { gap: 7px; }
}
@media screen {
  body.ab-on .ab-title { position: relative; }
  body.ab-on .ab-deco { position: absolute; inset: 0; pointer-events: none; }
  body.ab-on .ab-deco .ab-st { position: absolute; width: 15%; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); }
  body.ab-on .ab-deco-0 { left: 6%; top: 8%; transform: rotate(-10deg); }
  body.ab-on .ab-deco-1 { right: 6%; top: 10%; transform: rotate(8deg); }
  body.ab-on .ab-deco-2 { right: 8%; bottom: 8%; transform: rotate(-6deg); }
  body.ab-on .ab-coll-title { margin: 0; text-align: center; font: 700 .85em var(--story-font); color: #4b3420; }
  body.ab-on .ab-collection { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 6px 8px; border-radius: 12px; background: #f3ead6; box-shadow: inset 0 0 0 2px #e2d4b4; }
  body.ab-on .ab-coll-item { width: 100%; max-height: calc(var(--bk-h) * .075); object-fit: contain; filter: grayscale(1) opacity(.28); transition: filter .3s ease; }
  body.ab-on .ab-coll-item.won { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .22)); }
  body.ab-on .ab-coll-item.pop { animation: ab-pop .55s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--i) * 120ms + 400ms); }
  body.ab-on.bk-single .ab-coll-item { max-height: 44px; }
  body.ab-on .ab-stars .ab-star { width: 26px; height: 26px; }
}
@media screen and (max-height: 720px) {
  body.ab-on.bk-single .ab-stars-page .review-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  body.ab-on.bk-single .ab-stars-page .review-title { display: none; }
}

/* 9/10 pass (26 Oct): two-row phone bar (pages on top; text size, Read to me, Stop and sound below). */
@media screen {
  body.bk-on .bk-bar .reader-toolbar select { width: auto; min-width: 72px; text-align: center; font-size: 1rem; }
  body.bk-on.bk-single .bk-bar { flex-wrap: wrap; justify-content: center; column-gap: 6px; row-gap: 8px; }
  body.bk-on.bk-single .bk-bar-left { flex: 0 0 auto; }
  body.bk-on.bk-single .bk-bar-right { flex: 0 0 auto; margin-left: 0; }
  body.bk-on.bk-single .bk-bar .reader-toolbar { gap: 6px; }
  body.bk-on.bk-single .bk-bar .reader-toolbar select { width: 72px; min-width: 72px; padding: 0 4px; font-size: .95rem; }
  body.bk-on.bk-single .bk-bar .reader-toolbar .btn:first-of-type { padding: 8px 14px; }
}
@media screen {
  body.bk-on:not(.bk-closed) #reading-layer { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding-top: 12px; align-content: center; }
  body.bk-on.bk-single:not(.bk-closed) #reading-layer { padding-top: 6px; }
}

/* LISTEN page and certificate (26 Oct). */
@media screen {
  body.ab-on .ab-listen-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #d9c9a4; }
  body.ab-on .ab-listen-row .ab-choices { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  body.ab-on .ab-listen-row.right .ab-listen-q::after { content: ' ✓'; color: #2f7a46; font-weight: 800; }
  body.ab-on .ab-play { min-height: 44px; border-radius: 999px; padding: 6px 14px; border: 0; background: #37503b; color: #fff; font-weight: 800; cursor: pointer; }
  body.ab-on .ab-play.playing { background: #c1572f; }
  body.ab-on .ab-listen-q { margin: 0; font-weight: 700; }
  body.ab-on .ab-cert-btn { margin-top: 10px; }
  .je-certificate { display: none; }
}
@media print {
  body.print-cert > *:not(.je-certificate) { display: none !important; }
  body.print-cert .je-certificate { display: block; text-align: center; border: 10px double #37503b; border-radius: 18px; padding: 1.4cm 1.2cm; margin: 0.6cm; font-family: Georgia, serif; }
  .je-certificate img { width: 3cm; } .je-certificate h2 { font-size: 30pt; margin: .2em 0; color: #37503b; }
  .je-certificate .cert-kicker { letter-spacing: .2em; text-transform: uppercase; color: #c1572f; font-weight: 700; }
  .je-certificate ul { list-style: none; padding: 0; text-align: left; display: inline-block; font-size: 13pt; }
  .je-certificate .cert-praise { font-size: 15pt; font-style: italic; }
}
@media screen and (max-width: 380px) {
  body.bk-on.bk-single .bk-dots .scene-jump .btn { width: 32px; min-width: 32px; }
  body.bk-on.bk-single .bk-bar .reader-page-nav { gap: 2px; }
  body.bk-on.bk-single .bk-bar .reader-page-nav .btn { width: 44px; height: 44px; }
}

@media screen {
  body.ab-on .ab-listen-dots { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
  body.ab-on .ab-ldot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #c9b48c; background: #fffaf0; color: #5a3a1c; font-weight: 800; cursor: pointer; }
  body.ab-on .ab-ldot[aria-current="true"] { border-color: #37503b; box-shadow: 0 0 0 3px rgba(55, 80, 59, .25); }
  body.ab-on .ab-ldot.right { background: #37503b; color: #fff; border-color: #37503b; }
  body.ab-on .ab-listen-row { border-bottom: 0; padding: 6px 0; }
  body.ab-on .ab-listen-row[hidden] { display: none; }
  body.ab-on .ab-listen .ab-listen-q { font-size: 1.15rem; }
}

@media screen {
  .hear-q { min-height: 44px; border-radius: 999px; font-weight: 800; margin: 2px 0 8px; }
}
/* B2 (26 Oct): explicit 3D transforms on both faces, so back-face hiding never depends on inherited state.
   Real Safari (macOS) renders the curl correctly; Playwright's WebKit build has no 3D compositing at all and
   draws even a minimal nested-3D example flat, so it cannot judge the curl. */
@media screen {
  body.bk-on .bk-strip-front { transform: rotateY(0deg) translateZ(.1px); }
  body.bk-on .bk-strip-back { transform: rotateY(180deg) translateZ(.1px); }
}

@media screen {
  body.bk-on .story-pause .card-thumb { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; margin: 6px 0 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
}
@media print { .card-thumb { display: none; } }

/* B-fix (26 Oct): progress and review moved to their own activity-book page (page 8). */
@media screen {
  body.ab-on .ab-review-page .book-progress, body.ab-on .ab-review-page .book-review { border: 0; padding: 0; margin: 0; background: none; }
  body.ab-on .ab-review-page .book-progress h3, body.ab-on .ab-review-page .progress-list, body.ab-on .ab-review-page .book-review > p, body.ab-on .ab-review-page .review-quote, body.ab-on .ab-review-page .review-items { display: none; }
  body.ab-on .ab-review-page .progress-total { margin: 0; text-align: center; font-family: var(--story-font); }
  body.ab-on .ab-review-page .book-review h3 { margin: 0 0 6px; font-family: var(--story-font); font-size: 1em; color: #4b3420; }
  body.ab-on .ab-review-page .review-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.ab-on .ab-review-page .review-page { grid-template-columns: 1fr; gap: 4px; padding: 6px; border-radius: 10px; }
  body.ab-on .ab-review-page .review-title { font-size: .78em; }
  body.ab-on .ab-review-page .review-page .btn { min-height: 36px; padding: 4px 10px; font-size: .78em; }
  body.ab-on .ab-review-page .review-page img { max-height: calc(var(--bk-h) * .11); width: 100%; object-fit: cover; }
  body.ab-on .ab-review-page .review-title { font-size: .72em; line-height: 1.2; }
  body.ab-on .ab-review-page .review-page .btn { min-height: 32px; padding: 2px 8px; font-size: .72em; }
  body.ab-on .ab-review-page .book-review h3 { display: none; }
  /* Stars page review: picture cards; the card itself is the "Go to page" button. */
  body.ab-on .ab-review-page .review-page { position: relative; padding: 0; overflow: hidden; border: 2px solid #e2d4b4; }
  body.ab-on .ab-review-page .review-page img { display: block; width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
  body.ab-on .ab-review-page .review-body { position: static; }
  body.ab-on .ab-review-page .review-title { position: absolute; left: 6px; top: 6px; margin: 0; padding: 2px 7px; border-radius: 8px; background: rgba(255, 250, 240, .92); font: 700 .7rem system-ui, sans-serif; color: #6a4528;
    max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ab-on .ab-review-page .review-page .btn { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; color: transparent; border: 0; box-shadow: none; font-size: 0; }
  body.ab-on .ab-review-page .review-page .btn:focus-visible { outline: 3px solid #b5583c; outline-offset: -3px; }
  body.ab-on .ab-review-page .review-page:has(.review-items .todo)::after { content: "○"; position: absolute; right: 6px; bottom: 4px; color: #fff; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  body.ab-on .ab-review-page .review-page:not(:has(.review-items .todo))::after { content: "✓"; position: absolute; right: 6px; bottom: 2px; color: #fff; font-weight: 900; font-size: 1.2rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  body.ab-on.bk-single .ab-review-page .review-pages { gap: 6px; }
  body.ab-on.bk-spread .ab-review-page .review-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  body.ab-on.bk-spread .ab-review-page .review-title { font-size: 0; padding: 0 6px; }
  body.ab-on.bk-spread .ab-review-page .review-title::first-letter { font-size: 0; }
  body.ab-on.bk-spread .ab-review-page .review-title { display: none; }
  body.ab-on.bk-single .ab-review-page .review-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  body.ab-on.bk-single .ab-review-page .review-title { display: none; }
}
@media screen {
  body.ab-on .ab-review-page .progress-list { display: grid; gap: 6px; list-style: none; padding: 0; margin: 10px 0 14px; }
  body.ab-on .ab-review-page .progress-list li { display: grid; gap: 2px; font-size: .9em; }
  body.ab-on .ab-review-page .progress-list progress { width: 100%; height: 10px; }
  body.ab-on .ab-cert-note { font-size: .9em; margin: 8px 0 0; text-align: center; color: #4b3420; }
}

/* Level 2 (26 Oct): longer pages (about 60 words) for ages 7-10. Level 1 is unaffected. */
body[data-level="2"] { --bk-fit-min: .58; --bk-art-min: .2; }
@media screen {
  body.bk-on[data-level="2"] .bk-right .reading-text { line-height: 1.42; }
  body.bk-on[data-level="2"] .bk-right .reading-text p { margin: 0 0 .32em; }
  body.bk-on[data-level="2"] .bk-right h2 { margin-bottom: .45em; }
}
/* B11 (re-score 2): on the last page the open card and its "Back to the story" button stay uncovered;
   "The end" returns when the card is closed. */
@media screen {
  body.bk-on #reader-page.bk-last.bk-card-open > .story-end.bk-end { display: none; }
  body.bk-on #reader-page.bk-last > details.story-pause.bk-card { padding-bottom: 0; }
}
/* B12 (re-score 2): on phones the two arrows and the eight page dots share one row that must fit 320 px.
   The dots shrink (never below 24 px wide, 44 px tall); the arrows keep a 44 px target. */
@media screen {
  body.ab-on.bk-single .ab-bar .bk-bar-mid { flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
  body.ab-on.bk-single .ab-bar .ab-prev, body.ab-on.bk-single .ab-bar .ab-next { flex: 0 0 44px; width: 44px; height: 44px; }
  body.ab-on.bk-single .ab-dots { flex: 1 1 auto; min-width: 0; gap: 0; justify-content: center; }
  body.ab-on.bk-single .ab-dots .btn { flex: 0 1 38px; width: auto; min-width: 24px; }
}
/* Level 2 activity book: longer answer sentences, so a shorter CHOOSE picture and compact answer
   buttons (still 44 px targets). Level 1 is unchanged. */
@media screen {
  body.ab-on[data-level="2"] .ab-pic { max-height: 30%; }
  body.ab-on[data-level="2"] .ab-choices { gap: 8px; }
  body.ab-on[data-level="2"] .ab-choice { min-height: 44px; padding: 7px 15px; font-size: .95rem; }
  body.ab-on[data-level="2"] .ab-listen .ab-listen-q { font-size: 1.05rem; }
}
/* Levels 3–5 (about 90–100 words a page): the Level 2 spacing; text never below about 14 px (floor .8); the picture keeps
   at least 30% of a phone page (so the card tab and "The end" never overlap); a page that still cannot fit scrolls its text (the reader's fallback). Levels 1–2 unchanged. */
body[data-level="3"], body[data-level="4"], body[data-level="5"] { --bk-fit-min: .8; --bk-art-min: .3; --bk-min-px: 14; }
@media screen {
  body.bk-on[data-level="3"] .bk-right .reading-text, body.bk-on[data-level="4"] .bk-right .reading-text, body.bk-on[data-level="5"] .bk-right .reading-text { line-height: 1.38; }
  body.bk-on[data-level="3"] .bk-right .reading-text p, body.bk-on[data-level="4"] .bk-right .reading-text p, body.bk-on[data-level="5"] .bk-right .reading-text p { margin: 0 0 .28em; }
  body.bk-on[data-level="3"] .bk-right h2, body.bk-on[data-level="4"] .bk-right h2, body.bk-on[data-level="5"] .bk-right h2 { margin-bottom: .4em; }
}
/* Levels 3–5 activity book: the longest answer sentences; a shorter CHOOSE picture and compact answers
   (still 44 px targets). */
@media screen {
  body.ab-on[data-level="3"] .ab-pic, body.ab-on[data-level="4"] .ab-pic, body.ab-on[data-level="5"] .ab-pic { max-height: 22%; }
  body.ab-on[data-level="3"] .ab-choices, body.ab-on[data-level="4"] .ab-choices, body.ab-on[data-level="5"] .ab-choices { gap: 6px; }
  body.ab-on[data-level="3"] .ab-choice, body.ab-on[data-level="4"] .ab-choice, body.ab-on[data-level="5"] .ab-choice { min-height: 44px; padding: 6px 13px; font-size: .88rem; line-height: 1.25; text-align: left; }
  body.ab-on[data-level="3"] .ab-q, body.ab-on[data-level="4"] .ab-q, body.ab-on[data-level="5"] .ab-q { font-size: 1.05rem; margin-bottom: .4em; }
  body.ab-on[data-level="3"] .ab-listen .ab-listen-q, body.ab-on[data-level="4"] .ab-listen .ab-listen-q, body.ab-on[data-level="5"] .ab-listen .ab-listen-q { font-size: .98rem; }
}
@media screen and (max-height: 800px) {
  body.ab-on[data-level="3"] .ab-page, body.ab-on[data-level="4"] .ab-page, body.ab-on[data-level="5"] .ab-page { font-size: .9em; padding-top: 14px; padding-bottom: 12px; gap: 8px; }
  body.ab-on[data-level="3"] .ab-listen-dots, body.ab-on[data-level="4"] .ab-listen-dots, body.ab-on[data-level="5"] .ab-listen-dots { margin: 2px 0 6px; }
  body.ab-on[data-level="3"] .ab-listen-row, body.ab-on[data-level="4"] .ab-listen-row, body.ab-on[data-level="5"] .ab-listen-row { padding: 2px 0; gap: 4px 10px; }
  body.ab-on[data-level="3"] .ab-listen .ab-listen-q, body.ab-on[data-level="4"] .ab-listen .ab-listen-q, body.ab-on[data-level="5"] .ab-listen .ab-listen-q { font-size: .92rem; }
}
/* End-of-book next step (next-story.js) inside the compact "The end" strip: its own row; the child's line shows
   (the strip hides its other paragraphs); the grown-ups' card keeps its own paragraphs in grown-up mode. */
@media screen {
  body.bk-on #reader-page > .story-end.bk-end .next-step { flex-basis: 100%; margin: 4px 0 0; }
  body.bk-on #reader-page > .story-end.bk-end .next-step-kid { display: block; color: #fff1d6; font-weight: 700; }
  body.bk-on.grownup-mode #reader-page > .story-end.bk-end .next-step-kid { display: none; }
  body.bk-on.grownup-mode #reader-page > .story-end.bk-end .next-step-jay p { display: block; }
  body.bk-on #reader-page.bk-last.bk-card-open > .story-end.bk-end .next-step-kid { color: var(--bk-brown); }
  .next-step .ns-short { display: none; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end .next-step { flex-basis: auto; margin: 0; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end .next-step .ns-long { display: none; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end .next-step .ns-short { display: inline; }
  body.bk-on.bk-single #reader-page > .story-end.bk-end .next-step-kid { font-size: .8rem; }
}
/* Levels 3–5 on short screens (iPad landscape 1024×768): the long word chips ("miscellaneous", "contributions") keep
   the SHOW tray to two rows; still 44 px targets. */
@media screen and (max-height: 800px) {
  body.ab-on[data-level="3"] .ab-stickers, body.ab-on[data-level="4"] .ab-stickers, body.ab-on[data-level="5"] .ab-stickers { gap: 6px; }
  body.ab-on[data-level="3"] .ab-sticker, body.ab-on[data-level="4"] .ab-sticker, body.ab-on[data-level="5"] .ab-sticker { padding: 6px 10px; font-size: .86rem; }
}
/* Warm Jurassic English wallpaper behind the book (screen only): sunrise cream-to-peach wash plus a faint tile of
   friendly dinosaurs, ferns, eggs, footprints and the fern-curl J. Low contrast so pages and controls stay clear. */
@media screen {
  body.has-book {
    background:
      url("assets/jurassic-wallpaper.jpg") 0 0 / 480px 480px repeat,
      radial-gradient(120% 70% at 50% 0%, #fff4df 0%, #fbe6c8 55%, #f5d6b0 100%);
    background-color: #fbe9cf;
  }
  body.has-book .site-head { background: rgba(255, 249, 238, .92); backdrop-filter: blur(4px); }
}