/* Book design D (05.10) for real books: the pages built by book-design.js. Every rule is scoped to #book.bd-book (or a
   bd-* class that only book-design.js writes), so the landing's book.json book is never touched. Type and paddings scale
   with --k (desktop: page height / 690; phone: page width / 366), so a bigger book (full screen) gets bigger type. */
#book.bd-book {
  --bd-paper: #f6f0e4; --bd-ink: #33291f; --bd-ink-soft: #6e6253; --bd-folio: #8a7f6e; --bd-rule: #c9bba2;
  --bd-orn: var(--bd-orn-l, #7a2e22); --bd-on-orn: #fbf5ea; --bd-gold: #f2c230; --k: 1;
}
html[data-theme="dark"] #book.bd-book {
  --bd-paper: #2a2521; --bd-ink: #efe6d6; --bd-ink-soft: #bfb2a0; --bd-folio: #9a8e7c; --bd-rule: #5c5246;
  --bd-orn: var(--bd-orn-d, #e0a99c); --bd-on-orn: #221d19; --bd-gold: #f2c230;
}
/* While book-design.js measures the pages they are laid out at their real size but not shown. */
#book.bd-book.bd-measuring .page { visibility: hidden; position: absolute; top: 0; left: 0; }

/* ---------- every page ---------- */
#book .page.bd-page { overflow: hidden; background: var(--bd-paper); color: var(--bd-ink); border-radius: 0; box-shadow: none; background-image: none; }
#book .bd-page img { display: block; -webkit-user-drag: none; user-select: none; }
#book .page.bd-text, #book .page.bd-combo { background: var(--tint-l, var(--bd-paper)); }
html[data-theme="dark"] #book .page.bd-text, html[data-theme="dark"] #book .page.bd-combo { background: var(--tint-d, var(--bd-paper)); }
/* The closed book: rounded outer corners, square at the spine (front: spine on the left; back: on the right). */
#book .page.bd-cover { border-radius: calc(var(--W) * .006) calc(var(--W) * .03) calc(var(--W) * .03) calc(var(--W) * .006); }
#book .page.bd-back { border-radius: calc(var(--W) * .03) calc(var(--W) * .006) calc(var(--W) * .006) calc(var(--W) * .03); }
#book .bd-plain-title { position: absolute; inset: 20% 10%; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 calc(var(--k) * 30px)/1.2 "Literata", Georgia, serif; }

/* One spine shadow per spread: the engine's gutters (text page 24 px, art page a narrower fold), scaled with the book. */
#book.turn-on.bd-book .gutter-r { width: calc(var(--k) * 24px); background: linear-gradient(to right, rgba(60, 40, 25, .17), rgba(60, 40, 25, .05) 45%, rgba(60, 40, 25, 0)); }
#book.turn-on.bd-book .gutter-l { width: calc(var(--k) * 18px); background: linear-gradient(to left, rgba(30, 20, 10, .18), rgba(30, 20, 10, .05) 50%, rgba(30, 20, 10, 0)); }
html[data-theme="dark"] #book.turn-on.bd-book .gutter-r { background: linear-gradient(to right, rgba(0, 0, 0, .34), rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, 0)); }

/* ---------- art page (desktop): full bleed, the crop is fixed when the page is built ---------- */
#book .bd-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
#book .bd-art.bd-noart { background: var(--bd-paper); }
/* A picture that failed to load: the paper shows instead; the <img> stays for screen readers but paints nothing (no alt text in the corner). */
#book .bd-img-failed { opacity: 0; }
#book .bd-combo.bd-noart .bd-combo-art { background: var(--bd-paper); }

/* ---------- text page (desktop): Literata, ragged right, no hyphens, block from 30 % of the height ---------- */
#book .bd-text-in { position: absolute; top: 30%; bottom: 11%; left: calc(var(--k) * 48px); right: calc(var(--k) * 56px); overflow: hidden; }
#book .bd-tall .bd-text-in { top: 15%; }
#book .bd-body { margin: 0; font-family: "Literata", Georgia, serif; font-weight: 400; font-size: calc(var(--k) * 22px); line-height: 1.55;
  text-align: left; hyphens: manual; -webkit-hyphens: manual; font-optical-sizing: auto; font-kerning: normal; text-wrap: pretty; overflow-wrap: break-word; color: var(--bd-ink); }
#book .bd-folio { position: absolute; z-index: 2; font-family: "Literata", Georgia, serif; font-size: calc(var(--k) * 12px); line-height: 1; color: var(--bd-folio); letter-spacing: .04em; }
#book .bd-text .bd-folio { right: calc(var(--k) * 56px); bottom: calc(var(--k) * 30px); }
/* Text that does not fit even at the 13 px floor (very long page on a tiny screen): it scrolls and shows an edge. */
#book .bd-text-in.is-clipped, #book .bd-combo-text.is-clipped { overflow-y: auto; box-shadow: inset 0 -14px 10px -10px rgba(48, 43, 53, .45); }

/* ---------- single page (phone, portrait tablet; 19.10 Oz items 10/14): the picture fills the page, the text lies ON it ----------
   book-design.js overlayPlan() writes per page (class .bd-tint-N, #bdTints): --ov-pos (crop keeping the face), the band
   (--ov-top/--ov-bottom), the ink (--ov-fg/--ov-glow/scrim colours), --ov-dark (the art's own dark hue) and, on a busy band,
   a frosted plate (--ov-plate). Without a plan (no canvas): bottom band, cream text on a dark scrim, which reads on any art.
   Legibility recipe (STYLE.md): scrim from the band's edge (.72 -> .5 -> 0), cream text with a hard + soft shadow in the dark
   hue; dark text gets a cream glow instead. Safe zone 6 % top/bottom, 7 % sides. */
#book .bd-combo { --ov-fg: #fff6e3; --ov-dark: 38, 30, 24; --ov-top: auto; --ov-bottom: 0; --ov-dir: to top; --ov-scrim-top: auto; --ov-scrim-bottom: 0;
  --ov-c0: rgba(var(--ov-dark), .74); --ov-c1: rgba(var(--ov-dark), .5); --ov-folio: rgba(255, 246, 227, .78);
  --ov-glow: 0 .05em 0 rgba(var(--ov-dark), .9), 0 .08em .4em rgba(0, 0, 0, .45), 0 0 1.1em rgba(var(--ov-dark), .55);
  --ov-plate: transparent; --ov-plate-pad: 0; --ov-plate-blur: none; background: rgb(var(--ov-dark)); }
#book .bd-combo-art { position: absolute; inset: 0; overflow: hidden; background: rgb(var(--ov-dark)); }
#book .bd-combo-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ov-pos, 50% 30%); }
#book .bd-combo.bd-noart .bd-combo-art { background: var(--bd-paper); }
#book .bd-scrim { position: absolute; left: 0; right: 0; top: var(--ov-scrim-top); bottom: var(--ov-scrim-bottom); height: min(100%, calc(var(--ov-z, var(--bd-band, 50%)) + var(--H) * .18));   /* the page's own text block + a fade */
  pointer-events: none; background: linear-gradient(var(--ov-dir), var(--ov-c0) 0, var(--ov-c1) 52%, rgba(var(--ov-dark), 0) 100%); }
#book .bd-combo .bd-scrim { background: linear-gradient(var(--ov-dir), var(--ov-c0) 0, var(--ov-c1) 68%, var(--ov-c2, rgba(var(--ov-dark), 0)) 100%); }   /* the text lies within the first ~70 %: at least --ov-c1 under it */
#book .bd-combo-text { position: absolute; left: var(--ov-l, 4%); right: var(--ov-r, 4%); top: var(--ov-top); bottom: var(--ov-bottom); max-height: var(--bd-tb, var(--bd-band, 60%)); overflow: hidden;
  padding: max(14px, calc(var(--H) * .045)) 0 max(22px, calc(var(--H) * .06)); }   /* block flow: an overflow goes DOWN, so scrollHeight sees it (fit) */
#book .bd-combo .bd-body { font-size: calc(var(--k) * 19px); line-height: 1.36; font-weight: 500; color: var(--ov-fg); text-shadow: var(--ov-glow);
  background: var(--ov-plate); padding: .45em .6em; border-radius: 14px;   /* the plate's room is always kept: a plate that arrives after the fit never pushes text out */ -webkit-backdrop-filter: var(--ov-plate-blur); backdrop-filter: var(--ov-plate-blur);
  max-width: 34em; text-wrap: pretty; }
#book .bd-combo .bd-folio { left: 0; right: 0; text-align: center; top: auto; bottom: calc(var(--H) * .022); color: var(--ov-folio); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
#book .bd-combo .bd-combo-text.is-clipped { overflow-y: auto; box-shadow: none; }

/* the spread's art page (tablet landscape, desktop) fills its page too, with the same face-keeping crop */
#book .bd-art img { object-position: var(--ov-pos, 50% 50%); }

/* the end of a single-page book: the last picture fills the page, the closing words lie on it */
#book .bd-end-full { --ov-dark: 38, 30, 24; background: rgb(var(--ov-dark)); color: #fff6e3; }
#book .bd-end-art { position: absolute; inset: 0; overflow: hidden; }
#book .bd-end-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#book .bd-end-scrim { top: auto; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(28, 22, 18, .86) 0, rgba(28, 22, 18, .62) 50%, rgba(28, 22, 18, 0) 100%); }
#book .bd-end-full .bd-end-col { justify-content: flex-end; padding-bottom: calc(var(--H) * .04); }
#book .bd-end-full .bd-fin-title, #book .bd-end-full .bd-fin-sub, #book .bd-end-full .bd-invite-q { color: #fff6e3; text-shadow: 0 .05em 0 rgba(28, 22, 18, .9), 0 .1em .5em rgba(0, 0, 0, .45); }
#book .bd-end-full .bd-fin-tail { color: var(--bd-gold); }
#book .bd-end-full .bd-fin-rule::before, #book .bd-end-full .bd-fin-rule::after { background: var(--bd-gold); }
#book .bd-end-full .bd-fin-rule .bd-spark path { fill: var(--bd-gold); }
#book .bd-end-full .bd-invite-note { color: rgba(255, 246, 227, .85); }
#book .bd-end-full .bd-fin-sub.bd-fin-hook { color: #fff6e3; }

/* ---------- dedication and end spreads (09.10): one hairline frame, an arched window, sparkles in the book's ornament colour ---------- */
#book .bd-frame::before { content: ""; position: absolute; inset: calc(var(--k) * 16px); border: 1px solid var(--bd-orn); opacity: .32; pointer-events: none; }
#book .bd-col { position: absolute; inset: calc(var(--k) * 44px) calc(var(--k) * 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
#book.bd-phone .bd-col { inset: calc(var(--k) * 34px) calc(var(--k) * 28px); }
/* the arch: a mat on the paper with the ornament-colour edge, the picture's window inside; both tops are half circles
   (horizontal radius 50 % of the width, vertical 50 % x ratio of the height) */
#book .bd-arch { position: relative; flex: none; padding: calc(var(--k) * 8px); border: 1.5px solid var(--bd-orn); background: var(--bd-paper);
  border-radius: 50% 50% calc(var(--k) * 12px) calc(var(--k) * 12px) / calc(50% * var(--arch-r)) calc(50% * var(--arch-r)) calc(var(--k) * 12px) calc(var(--k) * 12px);
  box-shadow: 0 calc(var(--k) * 10px) calc(var(--k) * 24px) calc(var(--k) * -14px) rgba(40, 25, 10, .45); }
#book .bd-arch-win { position: relative; overflow: hidden; aspect-ratio: var(--arch-r); background: var(--bd-paper);
  border-radius: 50% 50% calc(var(--k) * 6px) calc(var(--k) * 6px) / calc(50% * var(--arch-r)) calc(50% * var(--arch-r)) calc(var(--k) * 6px) calc(var(--k) * 6px); }
#book .bd-arch-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#book .bd-noart .bd-arch-win { box-shadow: inset 0 0 0 1px var(--bd-rule); }
#book .bd-arch-ded { width: calc(var(--W) * .58); }
#book.bd-phone .bd-arch-ded { width: calc(var(--W) * .5); }
#book .bd-arch-end { width: min(calc(var(--W) * .76), calc(var(--H) * .70 * var(--arch-r))); }
#book .bd-arch-end-s { width: calc(var(--W) * .5); }
/* the back cover's yellow star at the arch's right shoulder, a sparkle at its left side */
#book .bd-marks svg { display: block; overflow: visible; }
#book .bd-marks .bd-star path { fill: var(--bd-gold); stroke: rgba(120, 80, 0, .25); stroke-width: 2; }
#book .bd-marks .bd-spark path { fill: var(--bd-orn); }
#book .bd-arch-marks .bd-star { position: absolute; width: calc(var(--k) * 30px); height: calc(var(--k) * 30px); right: calc(var(--k) * -20px); top: 9%; transform: rotate(14deg); }
#book .bd-arch-marks .bd-spark { position: absolute; width: calc(var(--k) * 17px); height: calc(var(--k) * 17px); left: calc(var(--k) * -24px); top: 56%; }
#book.bd-phone .bd-arch-marks .bd-star { width: calc(var(--k) * 24px); height: calc(var(--k) * 24px); right: calc(var(--k) * -16px); }
#book.bd-phone .bd-arch-marks .bd-spark { width: calc(var(--k) * 13px); height: calc(var(--k) * 13px); left: calc(var(--k) * -18px); }
#book .bd-marks-alone { display: flex; align-items: flex-end; gap: calc(var(--k) * 8px); }
#book .bd-marks-alone .bd-star { width: calc(var(--k) * 34px); height: calc(var(--k) * 34px); transform: rotate(14deg); }
#book .bd-marks-alone .bd-spark { width: calc(var(--k) * 18px); height: calc(var(--k) * 18px); }
#book .bd-front-title { margin: calc(var(--k) * 26px) 0 0; max-width: 18em; font-family: "Literata", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: max(16px, calc(var(--k) * 16px)); line-height: 1.4; color: var(--bd-ink-soft); text-wrap: balance; }

/* ---------- dedication / bookplate ---------- */
#book .bd-ded-mark .bd-spark { width: calc(var(--k) * 16px); height: calc(var(--k) * 16px); margin: 0 auto calc(var(--k) * 26px); }
#book.bd-phone .bd-ded-col .bd-arch { margin-bottom: calc(var(--k) * 26px); }
#book .bd-ded-text { margin: 0; font-family: "Literata", Georgia, serif; font-style: italic; font-size: calc(var(--k) * 21px); line-height: 1.6; max-width: 15.5em; color: var(--bd-ink); text-wrap: pretty;
  white-space: pre-line; overflow-wrap: break-word; }   /* 10.10 S1: the typed lines stay lines */
#book .bd-ded-text.bd-ded-multi { text-wrap: wrap; }   /* 10.10 S1 (review M2): typed lines are shown as typed in WebKit too */
#book.bd-phone .bd-ded-text { font-size: calc(var(--k) * 18px); }
/* the signature ("Love, Grandma" or "- Grandma") on its own line below the text */
#book .bd-ded-sign { margin: calc(var(--k) * 14px) 0 0; font-family: "Literata", Georgia, serif; font-style: italic; font-size: calc(var(--k) * 21px); line-height: 1.5; max-width: 15.5em; color: var(--bd-ink-soft); overflow-wrap: break-word; }
#book.bd-phone .bd-ded-sign { font-size: calc(var(--k) * 18px); margin-top: calc(var(--k) * 10px); }
/* an adult's book has no plate (10.10 S2): the column stays centred, a second sparkle under the text answers the one above it */
#book .bd-ded-mark-end .bd-spark { margin: calc(var(--k) * 26px) auto 0; }
#book.bd-phone .bd-ded-free .bd-ded-col .bd-arch { margin-bottom: calc(var(--k) * 28px); }
#book .bd-plate-box { margin-top: calc(var(--k) * 46px); display: flex; flex-direction: column; align-items: center; flex: none; }
#book.bd-phone .bd-plate-box { margin-top: calc(var(--k) * 30px); }
#book .bd-plate-box.bd-plate-solo { margin-top: 0; }   /* 10.10 P: an adult's book with no dedication: the name alone, close under the sparkle / arch */
#book .bd-plate { margin: 0; font-family: "Literata", Georgia, serif; font-size: calc(var(--k) * 11px); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-ink-soft); }
/* the name is "written in" on the plate's line */
#book .bd-plate-name { margin: calc(var(--k) * 6px) 0 0; padding: 0 .7em .06em; min-width: calc(var(--k) * 150px); border-bottom: 1px solid var(--bd-orn);
  font-family: "Caveat Brush", cursive; font-size: calc(var(--k) * 34px); line-height: 1.15; color: var(--bd-ink); white-space: nowrap; }
#book .bd-plate-line { width: calc(var(--k) * 170px); height: 1px; margin-top: calc(var(--k) * 40px); background: var(--bd-orn); opacity: .7; flex: none; }

/* ---------- the end ---------- */
#book .bd-end-col .bd-arch-end-s { margin-bottom: calc(var(--k) * 22px); }
#book .bd-fin { width: 100%; display: flex; flex-direction: column; align-items: center; }
#book .bd-fin-title { margin: 0; width: 100%; font-family: "Caveat Brush", cursive; font-weight: 400; line-height: 1; color: var(--bd-ink); }
#book .bd-fin-main { display: block; font-size: calc(var(--k) * 76px); white-space: nowrap; }
#book.bd-phone .bd-fin-main { font-size: calc(var(--k) * 58px); }
#book .bd-fin-wrap .bd-fin-main { white-space: normal; text-wrap: balance; }
#book .bd-fin-tail { display: block; margin-top: .3em; font-size: calc(var(--k) * 34px); color: var(--bd-orn); }
#book.bd-phone .bd-fin-tail { font-size: calc(var(--k) * 28px); }
#book .bd-fin-rule { display: flex; align-items: center; gap: calc(var(--k) * 10px); margin: calc(var(--k) * 26px) 0 calc(var(--k) * 22px); flex: none; }
#book .bd-fin-rule::before, #book .bd-fin-rule::after { content: ""; width: calc(var(--k) * 34px); height: 1px; background: var(--bd-orn); opacity: .55; }
#book .bd-fin-rule .bd-spark { width: calc(var(--k) * 13px); height: calc(var(--k) * 13px); }
#book.bd-phone .bd-fin-rule { margin: calc(var(--k) * 16px) 0 calc(var(--k) * 14px); }
#book .bd-fin-sub { margin: 0; max-width: 18em; font-family: "Literata", Georgia, serif; font-size: max(16px, calc(var(--k) * 14px)); line-height: 1.45; color: var(--bd-ink-soft); letter-spacing: .02em; text-wrap: balance; }
#book .bd-fin-sub.bd-fin-thanks { margin-top: calc(var(--k) * 8px); }
#book .bd-fin-sub.bd-fin-hook { font-style: italic; font-size: calc(var(--k) * 19px); line-height: 1.5; max-width: 14em; color: var(--bd-ink); letter-spacing: 0; text-wrap: balance; }
#book.bd-phone .bd-fin-sub.bd-fin-hook { font-size: calc(var(--k) * 17px); }
/* a landing sample's invitation: the question, one button in the book's own cloth colour, the note */
#book .bd-invite { margin-top: calc(var(--k) * 40px); display: flex; flex-direction: column; align-items: center; flex: none; }
#book.bd-phone .bd-invite { margin-top: calc(var(--k) * 22px); }
#book .bd-invite-q { margin: 0 0 calc(var(--k) * 14px); font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: calc(var(--k) * 19px); line-height: 1.25; color: var(--bd-ink); max-width: 16em; text-wrap: balance; }
#book.bd-phone .bd-invite-q { font-size: calc(var(--k) * 17px); margin-bottom: calc(var(--k) * 10px); }
#book .bd-invite-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: calc(var(--k) * 10px) calc(var(--k) * 24px);
  border-radius: calc(var(--k) * 12px); background: var(--bd-orn); color: var(--bd-on-orn); text-decoration: none; cursor: pointer;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: calc(var(--k) * 18px); line-height: 1.2;
  box-shadow: 0 calc(var(--k) * 6px) calc(var(--k) * 16px) calc(var(--k) * -8px) rgba(40, 25, 10, .55); }
#book .bd-invite-btn:focus-visible { outline: 3px solid var(--bd-gold); outline-offset: 3px; }
#book .bd-invite-note { margin: calc(var(--k) * 10px) 0 0; font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 500; font-size: calc(var(--k) * 13px); color: var(--bd-ink-soft); }

/* ---------- free preview: a locked page (06.10, SPEC 3) = the server's already blurred picture (or a neutral lock card) over a caption band.
   No filter and no blur anywhere in these rules: the soft look is in the file the server sends. ---------- */
/* 19.10: the soft picture fills the page; on it a card: a lock in a gold ring, "Page n of 12", the caption. The card's frosted
   background (backdrop-filter) lies over the server's already blurred copy: it blurs nothing that is not blurred already. */
#book .bd-locked { background: #3a3029; }
#book .bd-lock-art { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(242, 194, 48, .22), transparent 55%), radial-gradient(circle at 70% 75%, rgba(90, 63, 143, .2), transparent 55%), #f1e6d4; }
#book .bd-lock-art img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: 50% 30%; }
#book .bd-lock-img .bd-lock-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(30, 22, 16, 0) 30%, rgba(30, 22, 16, .38) 100%); }
#book .bd-lock-cap { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: min(84%, max(200px, calc(var(--k) * 300px))); display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--k) * 6px); text-align: center; padding: calc(var(--k) * 20px) calc(var(--k) * 18px) calc(var(--k) * 18px); border-radius: calc(var(--k) * 20px);
  background: rgba(255, 246, 227, .8); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 calc(var(--k) * 10px) calc(var(--k) * 30px) rgba(30, 22, 16, .28), inset 0 0 0 1px rgba(255, 255, 255, .55); }
#book .bd-lock-icon { display: flex; align-items: center; justify-content: center; width: calc(var(--k) * 48px); height: calc(var(--k) * 48px); border-radius: 50%;
  color: #33291f; background: radial-gradient(circle at 35% 30%, #ffe27a, var(--bd-gold) 70%); box-shadow: 0 calc(var(--k) * 3px) calc(var(--k) * 10px) rgba(120, 80, 0, .35); flex: none; }
#book .bd-lock-icon svg { width: 52%; height: 52%; display: block; }
#book .bd-lock-num { margin-top: calc(var(--k) * 4px); font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: max(13px, calc(var(--k) * 12px)); letter-spacing: .14em; text-transform: uppercase; color: #8a6d2a; }   /* OZ-1023b item 17: readable in the small quiz frame too */
#book .bd-lock-text { font-family: "Literata", Georgia, serif; font-style: italic; font-weight: 500; font-size: max(15px, calc(var(--k) * 18px)); line-height: 1.3; color: #33291f; text-wrap: balance; }
#book .bd-locked .bd-folio { right: calc(var(--k) * 18px); bottom: calc(var(--k) * 12px); color: rgba(255, 246, 227, .8); }
#book .bd-locked.bd-lock-l .bd-folio { right: auto; left: calc(var(--k) * 18px); }
#book .bd-locked.bd-noart .bd-lock-art { background: var(--bd-paper); }
/* BADGE3 F (Danilo 28.10): a free preview's card and its two buttons are one column where the card alone was (the card keeps its
   look inside it); with a button shown (.bd-lock-on, viewer.js) the column is centred so it clears the page number. Touch targets
   44 px in fixed px (not --k: the small quiz frame has k 0.8); the buttons wrap to one per row where they do not fit side by side. */
#book .bd-lock-stack { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: min(84%, max(200px, calc(var(--k) * 300px)));
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#book .bd-lock-stack > .bd-lock-cap { position: relative; left: auto; top: auto; transform: none; width: auto; }
#book .bd-lock-stack.bd-lock-on { top: 50%; }
/* with the buttons the column nearly fills a small page (320 x 568 quiz frame: 243 of 267 px): the corner page number, which the card
   already says ("Page 5 of 12"), gives way rather than sit under the second button */
#book .bd-locked.bd-lock-acts-on .bd-folio { display: none; }
#book .bd-lock-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#book .bd-lock-btn { flex: 1 1 auto; min-height: 44px; min-width: 44px; margin: 0; padding: 10px 16px; border-radius: 14px; cursor: pointer; touch-action: manipulation;
  font: 700 15px/1.2 "Fredoka", "Nunito", system-ui, sans-serif; letter-spacing: 0; text-align: center; -webkit-tap-highlight-color: transparent; }
#book .bd-lock-buy { background: #ff5a36; color: #fff; border: 0; box-shadow: 0 6px 18px rgba(255, 90, 54, .32); }
#book .bd-lock-edit { background: rgba(255, 246, 227, .94); color: #33291f; border: 1.5px solid rgba(51, 41, 31, .3); }
#book .bd-lock-btn:disabled { opacity: .55; cursor: default; }
#book .bd-lock-btn:focus-visible { outline: 3px solid #33291f; outline-offset: 2px; }

/* Inside the turning leaf (14 strips x 2 faces, each a copy of the page) no live backdrop blur: dozens of them would make a turn
   stutter on older phones. The card and the plate are opaque enough without it; the page at rest keeps the frosted look. */
#book .strip .bd-lock-cap, #book .strip .bd-body { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- early review 19.10 (ace9a8f) ---------- */
/* m6: a desktop spread (>= 1100 px) shows the picture whole again, as on prod (07.10 decision 13); tablets keep the full-bleed crop */
@media (min-width: 1100px), (pointer: fine) and (min-width: 761px) { html #book:not(.bd-phone) .bd-art img { object-fit: contain; object-position: 50% 50%; } }
/* m2: a long block (up to ~56 % of the page) keeps its top lines on the solid part of the gradient */
#book .bd-combo .bd-scrim { height: min(100%, calc(var(--ov-z, var(--bd-band, 50%)) + var(--H) * .22));
  background: linear-gradient(var(--ov-dir), var(--ov-c0) 0, var(--ov-c1) 78%, var(--ov-c2, rgba(var(--ov-dark), 0)) 100%); }
/* m5: a locked page without its picture (lock card on paper): the page number in the paper's own folio colour */
#book .bd-lock-card .bd-folio, #book .bd-locked.bd-noart .bd-folio { color: var(--bd-folio); }

/* ---------- round 3 (Danilo 19.10: "too much text, the picture isn't visible"): the block <= ~1/3 of the page ---------- */
#book .bd-combo .bd-body { line-height: 1.3; }
#book .bd-combo-text { left: var(--ov-l, 5%); right: var(--ov-r, 5%); padding: max(10px, calc(var(--H) * .025)) 0 max(28px, calc(var(--H) * .06)); }   /* the folio sits under the last line */
/* a shorter, lighter gradient: the art reads right above the text; the letters carry their own shadow (stronger glow) */
#book .bd-combo { --ov-glow: 0 1px 2px rgba(var(--ov-dark), .95), 0 0 .3em rgba(var(--ov-dark), .85), 0 0 .9em rgba(var(--ov-dark), .6); }
#book .bd-combo .bd-scrim { height: min(100%, calc(var(--ov-z, var(--bd-band, 34%)) + var(--H) * .1));
  background: linear-gradient(var(--ov-dir), var(--ov-c0) 0, var(--ov-c1) 82%, var(--ov-c2, rgba(var(--ov-dark), 0)) 100%); }
/* a LONG page (needs more than ~1/3 at 16 px), variant A (default): its text stays on the art (up to 62 %), a tap in the middle of
   the picture hides/shows it (viewer.js onTap -> #book.bd-peek), a small hint says so */
#book .bd-long .bd-combo-text { max-height: var(--bd-tb, 62%); }
/* H5 (20.10): a long block can now reach ~94 % of the page, so the scrim covers at least the block (the plan's zone stops at 62 %) */
#book .bd-long-a .bd-scrim { height: min(100%, max(calc(var(--ov-z, var(--bd-band, 34%)) + var(--H) * .1), calc(var(--bd-tb, 34%) + var(--H) * .1))); }
#book .bd-peek-btn { display: none; }
/* the long page's button (Danilo 19.10): permanent, at the top-right corner of the text block, 44 px target, cream on the scene's dark */
/* F part 2 (23.10): the same button on every page whose words lie on the picture (.bd-peekable: book-design.js fitPhone), with its
   words on every page ("See the picture" / "Read"), in the quiz frame and in full screen alike; one state for the book (#book.bd-peek).
   It sits at the block's edge that faces the picture: the top-right corner of a bottom block, the bottom-right of a top one (--pk-*). */
#book .bd-peekable:not(.bd-noart) .bd-peek-btn { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 4%; z-index: 5;
  top: var(--pk-top, auto); bottom: var(--pk-bottom, min(calc(var(--bd-tb, 34%) - 6px), calc(var(--H) - 48px)));   /* never above the page's top (a ~94 % block) */
  min-width: 44px; min-height: 44px; padding: 0 12px; justify-content: center; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(var(--ov-dark), .82); color: #fff6e3; font: 500 14px/1 "Fredoka", "Nunito", system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: bottom .18s ease-out, top .18s ease-out; }
#book .bd-peekable .bd-peek-btn svg { width: 20px; height: 20px; display: block; flex: none; }
#book .bd-peek-btn .bd-ic-txt, #book .bd-peek-btn .bd-peek-show, #book .bd-peek-btn .bd-peek-read { display: none; }
#book .bd-peekable .bd-peek-btn .bd-peek-show { display: inline; }
#book.bd-peek .bd-peekable .bd-peek-btn { top: var(--pk-top-h, auto); bottom: var(--pk-bottom-h, max(14px, calc(var(--H) * .04))); }
/* the reader's own full screen (immersive.js: Previous / Next float over the page's foot, the top bar over its head; a phone page fills
   the screen): the button keeps the place it had over the text, out from under them */
html.is-immersive #book.bd-peek .bd-peekable .bd-peek-btn { top: var(--pk-top, auto); bottom: var(--pk-bottom, min(calc(var(--bd-tb, 34%) - 6px), calc(var(--H) - 48px))); }
#book.bd-peek .bd-peekable .bd-peek-btn .bd-ic-pic, #book.bd-peek .bd-peekable .bd-peek-btn .bd-peek-show { display: none; }
#book.bd-peek .bd-peekable .bd-peek-btn .bd-ic-txt { display: block; }
#book.bd-peek .bd-peekable .bd-peek-btn .bd-peek-read { display: inline; }
#book .bd-peekable .bd-peek-btn:focus-visible { outline: 3px solid #f2c230; outline-offset: 2px; }
#book .bd-peekable .bd-combo-text, #book .bd-peekable .bd-scrim { transition: opacity .18s ease-out; }
#book.bd-peek .bd-peekable:not(.bd-noart) .bd-combo-text, #book.bd-peek .bd-peekable:not(.bd-noart) .bd-scrim { opacity: 0; }
/* variant B (?longtext=b, comparison only): that page's text in a band under the picture, on the art's own dark colour */
#book .bd-long-b .bd-combo-art { bottom: var(--bd-tb, 40%); }
#book .bd-long-b .bd-scrim { display: none; }
#book .bd-long-b .bd-combo-text { left: 0; right: 0; padding-left: 5%; padding-right: 5%; max-height: none; height: var(--bd-tb, 40%); background: rgb(var(--ov-dark)); }
@media (prefers-reduced-motion: reduce) { #book .bd-peekable .bd-combo-text, #book .bd-peekable .bd-scrim, #book .bd-peekable .bd-peek-btn { transition: none; } }
/* R2: variant B is always cream on the art's dark colour (a dark-ink plan would give dark text with a light halo there) */
#book .bd-combo.bd-long-b { --ov-fg: #fff6e3; --ov-glow: 0 1px 2px rgba(0, 0, 0, .55); --ov-folio: rgba(255, 246, 227, .78); }
#book .bd-combo.bd-long-b .bd-body { color: #fff6e3; }

/* ---------- 23.10 phones (<= 760 px, book-design.js .bd-stack): the text never covers the picture ----------
   Every story page: the picture on top (its own crop, the face kept: writeTints plans it for this window), the text in a band
   under it in the art's own dark colour, cream letters without a glow. The band is as tall as the text (--bd-tb, capped);
   a longer text scrolls inside it. No scrim, no peek button: nothing to uncover. */
#book.bd-stack .bd-combo { --ov-fg: #fff6e3; --ov-folio: rgba(255, 246, 227, .72); }
#book.bd-stack .bd-combo-art { bottom: var(--bd-tb, 40%); }
#book.bd-stack .bd-combo-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(14px, calc(var(--H) * .035)); pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--ov-dark), 0), rgb(var(--ov-dark))); }   /* the picture fades into the band */
#book.bd-stack .bd-combo .bd-scrim, #book.bd-stack .bd-peek-btn { display: none; }   /* the end page keeps its own scrim */
#book.bd-stack .bd-combo-text { top: auto; bottom: 0; left: 0; right: 0; height: var(--bd-tb, auto); max-height: none; background: rgb(var(--ov-dark));
  padding: max(10px, calc(var(--H) * .022)) 6% max(24px, calc(var(--H) * .05)); }
#book.bd-stack .bd-combo .bd-body { color: #fff6e3; text-shadow: none; background: none; padding: 0; border-radius: 0; max-width: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#book.bd-stack .bd-combo .bd-combo-text.is-clipped { overflow-y: auto; overscroll-behavior: contain; box-shadow: inset 0 -16px 12px -12px rgba(0, 0, 0, .6); }

/* ---------- item 36 (Oz 23.10, "the text covers the face"): a phone page whose words lie on the picture (.bd-texton-phone,
   book-design.js; Christmas books too): smaller type (fitPhone: from 15.5 px x k, floor 14 px) in a more compact block: tighter
   lines, a slimmer plate and less padding, so more of the picture shows. Tablets and desktop are unchanged. */
#book.bd-texton-phone .bd-combo .bd-body { line-height: 1.24; padding: .3em .45em; }
#book.bd-texton-phone .bd-combo:not(.bd-long-b) .bd-combo-text { left: var(--ov-l, 3.5%); right: var(--ov-r, 3.5%); padding: max(8px, calc(var(--H) * .018)) 0 max(22px, calc(var(--H) * .05)); }