/*
 * The online reader's look (/<set>/fold-N/): the picture-book pager (Folds 1–3), the chapter
 * books' long column (Folds 4–6), the cover and ending both share, the sheets (For grown-ups,
 * Contents) and the reader's own chrome. Linked after site.css on reader pages only: the markup is
 * books/site/render/reader.mjs (which asks shell.mjs page() for this file), the behavior
 * books/site/static/reader.js, and books/site/build.mjs copies both. Ported from the POC's reader.css.
 *
 * Why its own file: the reader drops the site's nav and footer and takes the whole screen, so
 * almost nothing here is shared with the other pages. The book's words still get their faces from
 * site.css's `.web` rules (the set page's ladder shows the same blocks) and are re-sized here:
 * big on a picture-book page, at a comfortable measure in a chapter.
 *
 * What bites:
 *  - The pager is position: fixed at inset 0, so its height is the visible screen with the
 *    browser's bars wherever they are (no 100vh gap on phones). Chapter books are a normal
 *    document; their full-screen parts use svh, which never jumps when the bars hide.
 *  - Chromeless pages draw under the notch and home bar (viewport-fit=cover): every edge that
 *    holds a control or words pads with the env(safe-area-inset-*) values in --safe-*.
 *  - Picture-book pages have three layouts: portrait (art on top, words on paper under it), a short
 *    landscape phone (words beside the art, so no panel sits on the picture) and a tall landscape
 *    screen (art full-bleed, words on a panel in the art's calm corner, from the art bank's `calm`).
 *  - Chapter text is sized as --cb-read × --text-scale; the scale is set on <html> before first
 *    paint by an inline script (reader.mjs) from localStorage, so it never shifts the page.
 *  - Motion is transform and opacity only, and all of it stops under prefers-reduced-motion.
 */

.rd {
  --bar-h: 3.5rem;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --glass: rgb(251 249 244 / 0.88);
}
.rd .skip:focus { top: calc(0.75rem + var(--safe-t)); z-index: 90; }

/* ---------- Shared chrome: round icon buttons, at least 44 px ---------- */
.rd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(43 42 38 / 0.08), 0 8px 22px -14px rgb(43 42 38 / 0.55);
  font: 600 0.92rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rd-icon .icon { width: 18px; height: 18px; }
.rd-icon:hover { background: var(--foam); }
.rd-icon:active { transform: scale(0.96); }
.rd-icon[disabled] { opacity: 0.35; cursor: default; }
.rd-icon__label { display: none; }
@media (min-width: 700px) { .rd-icon__label { display: inline; } }

/* ---------- The cover: the fold's cover art full-bleed, the live title over its calm top ---------- */
.rd-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: calc(var(--bar-h) + 1.25rem + var(--safe-t)) max(var(--gutter), var(--safe-r)) calc(1.5rem + var(--safe-b)) max(var(--gutter), var(--safe-l));
  overflow: hidden;
  background: var(--fold-tint);
  color: var(--ink);
}
.rd-cover__art { position: absolute; inset: 0; z-index: -2; }
.rd-cover__art picture, .rd-cover__art img { width: 100%; height: 100%; object-fit: cover; }
/* Fitted frames (reader.mjs, shell.mjs fittedPicture): the wrapper is a size container, so it
   takes the frame's box, never its content's. The generated art-fit.css shows the picture whose
   aspect band holds the wrapper's aspect; each <img> carries its own object-position. */
.rd-cover__art .art-fit, .pb-art .art-fit, .cb-opener__art .art-fit { position: absolute; inset: 0; }
.art-fit picture, .art-fit img { width: 100%; height: 100%; object-fit: cover; }
/* A wash of paper behind the title and the buttons, clear over the picture's middle. */
.rd-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(243 238 227 / 0.78) 0%, rgb(243 238 227 / 0.32) 26%, transparent 42%, transparent 68%, rgb(243 238 227 / 0.72) 100%);
}
.rd-cover--dark { color: var(--paper); background: var(--site-night); }
.rd-cover--dark::before { background: linear-gradient(180deg, rgb(18 29 51 / 0.82) 0%, rgb(18 29 51 / 0.35) 28%, transparent 44%, transparent 66%, rgb(18 29 51 / 0.8) 100%); }
/* On a screen wider than tall, the title and buttons keep to the left: the wash comes from there. */
@media (orientation: landscape) {
  .rd-cover::before { background: linear-gradient(90deg, rgb(243 238 227 / 0.9) 0%, rgb(243 238 227 / 0.68) 30%, rgb(243 238 227 / 0.2) 50%, transparent 62%); }
  .rd-cover--dark::before { background: linear-gradient(90deg, rgb(18 29 51 / 0.92) 0%, rgb(18 29 51 / 0.72) 32%, rgb(18 29 51 / 0.25) 52%, transparent 64%); }
  .rd-cover__top { max-width: min(40rem, 50vw); }
}
.rd-cover__top { display: grid; gap: 1rem; max-width: 40rem; }
.rd-cover__fold { display: flex; align-items: center; gap: 0.8rem; font: 700 0.9rem/1.3 var(--font-body); }
.rd-cover__badge { flex: none; width: 48px; line-height: 0; }
.rd-cover__badge svg { width: 100%; height: auto; }
.rd-cover__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.7rem, 1.7rem + 5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rd-cover__title span { display: block; margin-top: 0.35em; font-size: 0.42em; font-style: italic; font-weight: 400; line-height: 1.12; letter-spacing: 0; }
.rd-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.rd-cover__actions .btn { box-shadow: var(--shadow); }
.rd-cover__actions .btn .icon { width: 1em; height: 1em; }
.rd-cover__grown {
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  background: none;
  color: inherit;
  font: 600 0.95rem/1 var(--font-body);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.rd-cover--dark .btn--ink { background: var(--paper); color: var(--site-night); }
@media (min-width: 900px) {
  .rd-cover { padding-left: max(clamp(2rem, 6vw, 6rem), var(--safe-l)); padding-bottom: calc(2.5rem + var(--safe-b)); }
}

/* ---------- The ending: read again, the next fold up, the printed pages ---------- */
.rd-end { display: grid; justify-items: start; gap: 1.25rem; width: min(100%, 36rem); }
.rd-end__kicker { color: var(--fold-text); font: italic var(--display-weight) clamp(3rem, 2.2rem + 4vw, 5rem)/0.95 var(--font-display); }
.rd-end__title { margin-top: -0.5rem; color: var(--ink-2); font: 600 1.1rem/1.35 var(--font-body); }
.rd-end__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rd-end__actions .icon { width: 1.05em; height: 1.05em; }
.rd-next {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  border-radius: var(--r-card);
  background: var(--foam);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.5s var(--ease), box-shadow 0.4s var(--ease);
}
.rd-next:hover { transform: translateY(-2px); box-shadow: var(--shadow-deep); }
.rd-next__cover { display: block; width: 64px; overflow: hidden; border-radius: 3px; box-shadow: 0 6px 16px -8px rgb(43 42 38 / 0.6); }
.rd-next__cover .cover { display: block; width: 100%; height: 100%; }
.rd-next__words { display: grid; gap: 0.2rem; }
.rd-next__kicker { color: var(--ink-soft); font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rd-next__words b { font: 600 1.15rem/1.2 var(--font-display-sharp); }
.rd-next__words span:last-child { color: var(--ink-2); font-size: 0.92rem; }
.rd-next > .icon { width: 20px; height: 20px; color: var(--accent-deep); }
.rd-end__all { min-height: 44px; }

/* ---------- Sheets: a bottom sheet on phones, a side panel on wide screens ---------- */
.sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(88svh, 48rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.sheet[open] { display: flex; }
.sheet::backdrop { background: rgb(9 15 29 / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet__in { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, var(--safe-r)) 0.75rem max(1.4rem, var(--safe-l)); border-bottom: 1px solid var(--line); }
.sheet__title { font-size: 1.5rem; }
.sheet__close { background: var(--foam); }
.sheet__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem max(1.4rem, var(--safe-r)) calc(1.75rem + var(--safe-b)) max(1.4rem, var(--safe-l)); }
.sheet__lede { font-size: 1.05rem; }
.sheet__page { margin-top: 1.5rem; }
/* Grown-up notes read in the UI face at a grown-up size, whatever fold scope they sit in. */
.sheet .t, .sheet .list { font: 400 1rem/1.6 var(--font-body); word-spacing: 0; }
.sheet .t + .t { margin-top: 0.8em; }
.sheet .h2 { margin: 0 0 0.6rem; font: 600 1.25rem/1.2 var(--font-display-sharp); }
.sheet__about { display: grid; justify-items: start; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.sheet__about .link { min-height: 44px; }
@media (min-width: 900px) {
  .sheet { inset: 0 0 0 auto; width: min(30rem, 92vw); height: 100%; max-height: none; border-radius: 24px 0 0 24px; }
  .sheet__head { padding-top: calc(1rem + var(--safe-t)); }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up 0.5s var(--ease); }
  .sheet[open]::backdrop { animation: sheet-fade 0.4s var(--ease); }
  @media (min-width: 900px) { .sheet[open] { animation-name: sheet-in; } }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }
html:has(.sheet[open]) { overflow: hidden; }

/* ---------- The sentence being read aloud ---------- */
.s { border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.s.is-speaking { background: color-mix(in srgb, var(--amber) 42%, var(--foam)); box-shadow: 0 0 0 0.14em color-mix(in srgb, var(--amber) 42%, var(--foam)); }

/* =====================================================================================
   Picture books (Folds 1–3): one manuscript page per screen, swiped sideways
   ===================================================================================== */
html:has(.rd--picture) { overflow: hidden; }
.rd--picture { overflow: hidden; overscroll-behavior: none; }
.pb { position: fixed; inset: 0; overflow: hidden; background: var(--paper-2); }
.pb-pager {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
.pb-pager::-webkit-scrollbar { display: none; }
.pb-page {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The words, large, in the fold's reading face. */
.pb-words { width: min(100%, 36rem); margin-inline: auto; }
.pb-words > :first-child { margin-top: 0; }
.pb-words .t { font-size: var(--read); line-height: var(--read-lh); }
.pb-words .t + .t { margin-top: 0.45em; }
.pb-words .h2 { margin: 0 0 0.5em; font-size: calc(var(--read) * 1.45); }
.pb-words .guide { --guide-size: 58px; margin: 0.85rem 0 0; }
.pb-words .guide__bubble { max-width: none; font-size: max(1rem, calc(var(--read) * 0.78)); }
.pb-words .note { font-size: max(1rem, calc(var(--read) * 0.72)); }
.pb-words .clip-chip { min-height: 44px; }
.pb-words .quiz__a summary, .cb-text .quiz__a summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }

/* Portrait: the art fills the top of the screen, the words sit on paper under it. */
.pb-leaf--art { display: grid; grid-template-rows: minmax(38%, 1fr) auto; }
.pb-art { position: relative; min-height: 0; overflow: hidden; background: var(--sand); }
.pb-art picture, .pb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-panel {
  position: relative;
  z-index: 1;
  max-height: 64vh;
  max-height: 64dvh;
  margin-top: -1.6rem;
  padding: 1.6rem max(1.35rem, var(--safe-r)) calc(5rem + var(--safe-b)) max(1.35rem, var(--safe-l));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 26px 26px 0 0;
  background: var(--paper);
  box-shadow: 0 -14px 32px -20px rgb(43 42 38 / 0.5);
}
.pb-leaf--art .pb-panel { min-height: 0; }

/* A page without art (meet the guides, words to know, the quiz): paper in the fold's tint. */
.pb-leaf--paper { overflow-y: auto; overscroll-behavior: contain; background: var(--fold-tint); }
.pb-leaf--paper .pb-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: calc(var(--bar-h) + 1.75rem + var(--safe-t)) max(var(--gutter), var(--safe-r)) calc(5.5rem + var(--safe-b)) max(var(--gutter), var(--safe-l));
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.pb-leaf--paper .guide { --guide-size: 84px; margin-top: 1.4rem; }
.pb-leaf--paper .guide__bubble { font-size: calc(var(--read) * 0.9); }
.pb-leaf--paper .note { margin-top: 1.4rem; }
.pb-leaf--paper .fig { margin: 1rem 0 0; }
.pb-leaf--paper .quiz { margin-top: 0.5rem; }

/* Words to know (Folds 1 and 3), under the page's own heading. */
.wtk { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.45rem; margin: 0.25rem 0 0; }
.wtk__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.85rem; align-items: center; padding: 0.5rem 0.7rem 0.5rem 0.5rem; border-radius: var(--r-media); background: var(--foam); }
.wtk__pic { grid-row: span 2; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; }
.wtk__pic img { width: 100%; height: 100%; object-fit: cover; }
.wtk__item dt { font: 700 max(1.1rem, calc(var(--read) * 0.9))/1.2 var(--font-text); }
.wtk__item dd { margin: 0; font: 400 max(1rem, calc(var(--read) * 0.72))/1.35 var(--font-text); color: var(--ink-2); }

/* A short landscape phone: the words beside the art, never on it. */
@media (orientation: landscape) and (max-height: 560px) {
  .rd--picture.fold-1 { --read: 1.35rem; }
  .rd--picture.fold-2 { --read: 1.3rem; }
  .rd--picture.fold-3 { --read: 1.15rem; }
  .pb-leaf--art { grid-template-rows: 100%; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .pb-art { grid-area: 1 / 2; }
  .pb-panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: none;
    margin: 0;
    padding: calc(var(--bar-h) + 0.75rem + var(--safe-t)) 1.4rem calc(4.5rem + var(--safe-b)) max(1.4rem, var(--safe-l));
    border-radius: 0;
    box-shadow: none;
  }
  .pb-words .guide { --guide-size: 48px; margin-top: 0.6rem; }
  .pb-leaf--paper .pb-panel { padding-top: calc(var(--bar-h) + 0.75rem + var(--safe-t)); padding-bottom: calc(4.5rem + var(--safe-b)); }
  .pb-leaf--paper .guide { --guide-size: 64px; }
  .rd-cover { padding-top: calc(var(--bar-h) + 0.25rem + var(--safe-t)); padding-bottom: calc(1rem + var(--safe-b)); }
  .rd-cover__title { font-size: clamp(2.2rem, 1rem + 5vh, 3.2rem); }
  .rd-cover__top { gap: 0.6rem; }
}

/* A tall landscape screen: the art full-bleed, the words on a panel over its calm corner. */
@media (orientation: landscape) and (min-height: 561px) {
  .pb-leaf--art { display: block; }
  .pb-leaf--art .pb-art { position: absolute; inset: 0; }
  .pb-leaf--art .pb-panel {
    position: absolute;
    top: calc(var(--bar-h) + 1.75rem + var(--safe-t));
    left: max(clamp(1rem, 4vw, 3.5rem), var(--safe-l));
    width: min(34rem, 44vw);
    max-height: calc(100% - var(--bar-h) - 9rem);
    margin: 0;
    padding: clamp(1.25rem, 2.2vw, 2rem);
    border-radius: 24px;
    background: var(--glass);
    box-shadow: var(--shadow-deep);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
  .pb-leaf--calm-bottom .pb-panel { top: auto; bottom: calc(6.25rem + var(--safe-b)); }
  .pb-leaf--calm-right .pb-panel { left: auto; right: max(clamp(1rem, 4vw, 3.5rem), var(--safe-r)); }
  .pb-leaf--paper .pb-panel { width: min(100%, 44rem); margin-inline: auto; }
}


/* The overlay chrome: back, title, "3 of 14" and progress on top; previous, Read to me, next below. */
.pb-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.6rem + var(--safe-t)) max(0.75rem, var(--safe-r)) 0.6rem max(0.75rem, var(--safe-l));
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pb-top > * { pointer-events: auto; }
.pb-top__title, .pb-top__count {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: 0 8px 22px -14px rgb(43 42 38 / 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 600 0.92rem/1.1 var(--font-body);
  transition: opacity 0.4s var(--ease);
}
.pb-top__title { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1rem; line-height: 44px; }
.pb-top__count { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.pb-top__count:empty { visibility: hidden; }
.pb-top__progress { position: absolute; top: var(--safe-t); left: 0; right: 0; height: 4px; background: rgb(43 42 38 / 0.12); }
.pb-top__progress i { display: block; height: 100%; background: var(--fold); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.pb[data-at="cover"] .pb-top__title,
.pb[data-at="cover"] .pb-top__count,
.pb[data-at="cover"] .pb-top__progress { opacity: 0; visibility: hidden; }

.pb-controls {
  position: absolute;
  left: 50%;
  bottom: calc(0.85rem + var(--safe-b));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgb(43 42 38 / 0.86);
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}
.pb-controls .rd-icon { width: 48px; height: 48px; padding: 0; background: transparent; color: var(--paper); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pb-controls .rd-icon:hover:not([disabled]) { background: rgb(243 238 227 / 0.14); }
.pb-controls .rd-icon .icon { width: 20px; height: 20px; }
.pb-play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.25rem 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font: 700 0.98rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
.pb-play:hover { background: color-mix(in srgb, var(--amber) 85%, var(--paper)); }
.pb-play:active { transform: scale(0.97); }
.pb-play .icon { width: 18px; height: 18px; }
.pb-play__play, .pb-play__pause { display: inline-flex; }
.pb.is-reading .pb-play__play, .pb:not(.is-reading) .pb-play__pause { display: none; }
.pb[data-at="cover"] .pb-controls { opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); }
html:not(.js) .pb-controls { display: none; }

/* While Read to me reads, the chrome steps back; a tap or a mouse move brings it back. */
.pb.is-quiet .pb-top { opacity: 0; transform: translateY(-0.5rem); pointer-events: none; }
.pb.is-quiet .pb-top > * { pointer-events: none; }
.pb.is-quiet .pb-controls { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pb.is-quiet .pb-controls .rd-icon { opacity: 0; pointer-events: none; }
.pb.is-quiet:not(.is-reading) .pb-controls { opacity: 0; visibility: hidden; }

/* Wide screens: the outer thirds of a picture turn the page. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .pb-pager[data-zone] .pb-art, .pb-pager[data-zone] .pb-leaf--paper, .pb-pager[data-zone] .pb-page { cursor: pointer; }
}

/* The cover and the ending as pager pages. */
.pb .rd-cover { height: 100%; }
.pb-end > .rd-end { margin: auto; }
.pb-end {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(var(--bar-h) + 1.5rem + var(--safe-t)) max(var(--gutter), var(--safe-r)) calc(6rem + var(--safe-b)) max(var(--gutter), var(--safe-l));
  background: var(--fold-tint);
}

/* =====================================================================================
   Chapter books (Folds 4–6): one long column under a slim reading bar
   ===================================================================================== */
.rd--chapters.fold-4 { --cb-read: 1.16rem; --cb-aside: 1.06rem; --cb-bubble: 1.04rem; --cb-caption: 1rem; }
.rd--chapters.fold-5 { --cb-read: 1.125rem; --cb-aside: 1rem; --cb-bubble: 1rem; --cb-caption: 1rem; }
.rd--chapters.fold-6 { --cb-read: 1.15rem; --cb-aside: 1rem; --cb-bubble: 1rem; --cb-caption: 1rem; }
@media (min-width: 900px) {
  .rd--chapters.fold-4 { --cb-read: 1.32rem; --cb-aside: 1.14rem; --cb-bubble: 1.12rem; --cb-caption: 1rem; }
  .rd--chapters.fold-5 { --cb-read: 1.2rem; --cb-aside: 1.06rem; --cb-bubble: 1.06rem; --cb-caption: 0.96rem; }
  .rd--chapters.fold-6 { --cb-read: 1.24rem; --cb-aside: 1.05rem; --cb-bubble: 1.05rem; --cb-caption: 0.95rem; }
}
/* Jumps (notes, Contents, resume) land below the bar; a chapter itself starts at the very top. */
html:has(.rd--chapters) { scroll-padding-top: 4.5rem; }
/* Scrolling settles where a page starts: the cover, each chapter's opening and, in Folds 4–5,
   each printed page (.cb-page). Proximity, not mandatory: Fold 6's chapters are one long text
   with nothing to snap to, and mandatory snapping would never let the reader stop inside one.
   The chapter's header snaps, never the whole chapter: an area taller than the screen makes
   every point inside it a valid rest, which switched off page snapping and pulled Fold 6's note
   links off their notes. The header takes the chapter's -4.5rem so Contents lands on a snap. */
html:has(.rd--chapters) { scroll-snap-type: y proximity; }
.cb .rd-cover, .cb-opener, .cb-head, .cb-page, .cb-end { scroll-snap-align: start; }
.cb-opener, .cb-head { scroll-margin-top: -4.5rem; }
.rd--chapters {
  --scale: var(--text-scale, 1);
  --col: min(100% - 2 * var(--gutter), calc(var(--cb-read) * var(--scale) * 34));
}

/* The reading bar: back, where you are, Contents, text size; away on the way down, back on the way up. */
.cb-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) max(0.5rem, var(--safe-r)) 0 max(0.5rem, var(--safe-l));
  background: rgb(243 238 227 / 0.9);
  box-shadow: 0 1px 0 rgb(43 42 38 / 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  transition: transform 0.45s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cb-bar.is-hidden { transform: translateY(-100%); }
.cb-bar.is-over-cover { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cb-bar .rd-icon { height: 44px; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cb-bar .rd-icon:hover { background: rgb(43 42 38 / 0.06); }
.cb-bar.is-over-cover .rd-icon { background: var(--glass); box-shadow: 0 8px 22px -14px rgb(43 42 38 / 0.55); }
.cb-bar__title { display: flex; align-items: baseline; gap: 0.5rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 600 0.95rem/1.2 var(--font-body); transition: opacity 0.3s var(--ease); }
.cb-bar__title b { flex: none; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.02rem; }
.cb-bar__title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-weight: 500; }
.cb-bar.is-over-cover .cb-bar__title { opacity: 0; }
.cb-progress { position: fixed; top: var(--safe-t); left: 0; right: 0; z-index: 41; height: 3px; pointer-events: none; }
.cb-progress i { display: block; height: 100%; background: var(--fold); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.cb-size { position: relative; }
.cb-size__aa { font: 700 1rem/1 var(--font-display-sharp); letter-spacing: -0.02em; }
.cb-size__pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--foam);
  box-shadow: var(--shadow-deep);
}
.cb-size__pop .rd-icon { width: 48px; background: transparent; box-shadow: none; font-size: 1rem; }
.cb-size__now { min-width: 3.4rem; text-align: center; font: 600 0.9rem/1 var(--font-body); font-variant-numeric: tabular-nums; }

.cb .rd-cover { min-height: 100vh; min-height: 100svh; }

/* Chapters: the opener's art full-bleed, the title set large on paper tucked under it. */
.cb-ch { scroll-margin-top: -4.5rem; outline: none; }
.cb-opener { position: relative; }
.cb-opener__art { position: relative; height: min(74svh, 128vw); overflow: hidden; background: var(--sand); }
.cb-opener__art picture, .cb-opener__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-opener__words {
  position: relative;
  width: calc(var(--col) + 2.8rem);
  max-width: calc(100% - 1rem);
  margin: -3.25rem auto 0;
  padding: 1.2rem 1.4rem 0.4rem;
  border-radius: 22px 22px 0 0;
  background: var(--paper);
}
.cb-head { width: var(--col); margin: 0 auto; padding-top: clamp(4.5rem, 10vw, 7rem); }
.cb-kicker { margin-bottom: 0.6rem; color: var(--fold-text); font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.cb-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.8rem); line-height: 1.02; letter-spacing: -0.015em; }
@media (min-width: 900px) {
  .cb-opener__art { height: min(78svh, 58vw); }
  .cb-opener__words { margin-top: -4.5rem; padding: 1.75rem 1.4rem 0.4rem; }
}

/* The text: the fold's reading face at a comfortable size and measure. */
.cb-text {
  --type-aside: calc(var(--cb-aside) * var(--scale));
  --type-bubble: calc(var(--cb-bubble) * var(--scale));
  --type-caption: calc(var(--cb-caption) * var(--scale));
  width: var(--col);
  margin: 0 auto;
  padding: 1.5rem 0 clamp(3rem, 8vw, 5rem);
  font-family: var(--font-text);
  font-size: calc(var(--cb-read) * var(--scale));
  line-height: var(--read-lh);
}
.cb-text > :first-child, .cb-page > :first-child { margin-top: 0; }
.cb-text .t, .cb-text .list, .cb-text .quiz, .cb-text .glossary, .cb-text .quote p { font-size: 1em; }
.cb-text .note { font-size: max(1rem, 0.86em); }
.cb-text .t + .t { margin-top: 0.85em; }
.cb-text .h2 { margin: 1.9em 0 0.55em; font-size: 1.55em; }
.cb-text .h3 { margin: 1.6em 0 0.45em; font-size: 1.28em; }
.cb-text .h4 { margin: 1.4em 0 0.35em; font-size: 1.1em; }
.cb-page { margin-top: 1.75em; }
.cb-text .wow, .cb-text .sidebar, .cb-text .guide, .cb-text .quote { margin: 1.75em 0; }
.cb-text .sidebar { padding: 1.25rem 1.4rem; border-radius: var(--r-card); background: var(--fold-tint); box-shadow: inset 4px 0 0 var(--fold); font-size: var(--type-aside); }
.cb-text .sidebar .t, .cb-text .sidebar .list { font-size: 1em; }
.cb-text .wow { padding: 1rem 1.25rem 1.1rem; }
.cb-text .guide { --guide-size: 76px; }
.cb-text .clip-chip { min-height: 44px; }

/* Pictures and diagrams: full width on phones, a little wider than the text on big screens. */
.cb-text .fig { margin: 2em 0; }
.cb-text .fig__pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-media); }
.cb-text .fig--scene .fig__pic img { aspect-ratio: 16 / 9; }
.cb-text .fig--diagram { max-width: none; }
.cb-text .fig--diagram .diagram { padding: 0.75rem; }
@media (max-width: 699px) {
  .cb-text .fig { margin-inline: calc(-1 * var(--gutter)); }
  .cb-text .fig__pic img, .cb-text .fig--diagram .diagram { border-radius: 0; border-inline: 0; }
  .cb-text .fig .caption, .cb-text .fig .clip-chip { margin-inline: var(--gutter); }
}
@media (min-width: 1100px) {
  .cb-text .fig:not(.fig--diagram) { margin-inline: -4.5rem; }
  .cb-text .fig:not(.fig--diagram) .caption { margin-inline: 4.5rem; }
}

/* Fold 6's notes: numbers link down to the note and back up to the text. */
.cb-notes { display: grid; gap: 0.7rem; margin: 0; padding-left: 1.8em; font: 400 max(1rem, 0.86em)/1.55 var(--font-text); }
.cb-notes li { padding: 0.25rem 0.4rem; border-radius: 8px; overflow-wrap: anywhere; }
.cb-notes li:target, .cb-text .note-ref a:target { background: color-mix(in srgb, var(--amber) 35%, var(--paper)); }
.note__back { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin-left: 0.2rem; color: var(--accent-deep); text-decoration: none; }
.note__facts { display: block; margin-top: 0.25rem; color: var(--ink-soft); font: 400 max(1rem, 0.88em)/1.45 var(--font-body); }
.note__facts a { color: inherit; }

/* The Contents sheet: the current chapter marked. */
.toc { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.toc a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.6rem; min-height: 48px; padding: 0.75rem 0.85rem; border-radius: 14px; font: 600 1.05rem/1.3 var(--font-body); text-decoration: none; transition: background-color 0.25s var(--ease); }
.toc a:hover { background: var(--foam); }
.toc a[aria-current] { background: var(--fold-tint); box-shadow: inset 4px 0 0 var(--fold); }
.toc__n { color: var(--fold-text); font: 700 0.9rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; }

/* The offer to pick up where the reader left off. */
.cb-resume {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + var(--safe-b));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100% - 1.5rem, 32rem);
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-deep);
  transform: translateX(-50%);
}
.cb-resume p { flex: 1; min-width: 0; font: 500 0.9rem/1.25 var(--font-body); }
.cb-resume b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.cb-resume__go { min-height: 44px; background: var(--amber); color: var(--ink); }
.cb-resume__close { background: rgb(243 238 227 / 0.12); color: var(--paper); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .cb-resume:not([hidden]) { animation: resume-up 0.5s var(--ease); } }
@keyframes resume-up { from { opacity: 0; transform: translate(-50%, 1rem); } }

.cb-end { display: grid; justify-items: center; padding: clamp(4rem, 10vw, 7rem) max(var(--gutter), var(--safe-r)) calc(clamp(4rem, 10vw, 7rem) + var(--safe-b)) max(var(--gutter), var(--safe-l)); background: var(--fold-tint); }

/* Keyboard focus stays visible over the reader's own shadows (site.css draws the ring as a box-shadow). */
.rd :is(a, button, summary, output, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); }
.rd .cb-ch:focus-visible { box-shadow: none; }

/* ---------- A fold still being written ---------- */
.coming { padding: var(--top) 0 var(--section); }
.coming h1 { margin-bottom: 1.5rem; font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.4rem); }
.coming h2 { margin-bottom: 0.75rem; font-size: 1.6rem; }
.coming p + p { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .rd *, .rd *::before, .rd *::after { transition: none !important; animation: none !important; }
}