/*
 * book.css — the whole look: the candlelit room, the leather cover, the parchment
 * pages, the wax-seal play button and the placeholders that stand in for art and
 * audio that do not exist yet.
 *
 * HOW TEXT IS SIZED: page-flip sizes each page in PIXELS from JavaScript, so type
 * cannot be sized off the viewport or it drifts out of proportion with the book.
 * js/book.js sets --pw (the current page width, in px) on #book after every layout,
 * and every type size here is a fraction of it. The default below is what the book
 * looks like for the instant before JS first measures.
 *
 * LOADED BY: index.html. Expects vendor/page-flip.css to have been loaded too
 * (this file imports it, so index.html only links this one).
 */

@import url('../vendor/page-flip.css?v=9d685db');

/* ---------------------------------------------------------------------------
   THE LIBRARY'S OWN TYPO. Do not fix it in the vendored file.
   vendor/page-flip.css ships a rule for ".sft__wrapper" — the t and f transposed —
   so the wrapper it actually creates, .stf__wrapper, gets no width and the book
   collapses. Correcting it here instead of in the vendored copy means a future
   library upgrade drops the typo without silently dropping the fix with it.
   --------------------------------------------------------------------------- */
.stf__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

:root {
  --parchment:      #efe3c8;
  --parchment-deep: #e0d0ac;
  --parchment-edge: #c8b489;
  --ink:            #2b2118;
  --ink-soft:       #4a3b2c;
  --oxblood:        #6b2a24;
  --oxblood-deep:   #4a1b17;
  --gold:           #b08d4f;
  --gold-bright:    #d8b878;
  --leather:        #5d201c;
  --candle:         #ffd9a0;

  --font-book:  'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-title: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --font-hand:  'Homemade Apple', 'Segoe Script', cursive;

  /* Page width in px. Overwritten by js/book.js on every layout. */
  --pw: 480px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #0d0907;
  color: var(--parchment);
  font-family: var(--font-book);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* --- The room: a dark table under one candle. All CSS, no image. --------- */

.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    /* candle glow, high and slightly left */
    radial-gradient(60% 45% at 44% 6%, rgba(255, 196, 120, 0.20), transparent 70%),
    /* pool of light the book sits in */
    radial-gradient(75% 60% at 50% 48%, rgba(255, 178, 96, 0.13), transparent 72%),
    /* wood grain */
    repeating-linear-gradient(
      96deg,
      #2a1a12 0px, #2a1a12 3px,
      #31201a 3px, #31201a 7px,
      #25160f 7px, #25160f 11px
    ),
    #1a0f0a;
}

/* Vignette, drawn over the wood so the corners fall away into the dark. */
.room::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(85% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.82) 100%);
}

/* --- The stage that centres the book ------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 40px) clamp(8px, 5vw, 72px);
}

.book {
  /* page-flip fills this. The shadow is the book's own, cast on the table. */
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.72));
  max-width: 100%;
}

/* A CLOSED BOOK IS OFF-CENTRE BY CONSTRUCTION, AND THIS IS THE CORRECTION.
   page-flip always reserves a two-page-wide block, and showCover puts the front
   cover in the right-hand page slot (and the back cover in the left) — correct
   for a book, but it leaves the closed object sitting half a page off-centre in
   the room. Sliding the whole block by a quarter of its width puts the closed
   cover in the middle of the light, and the slide doubles as the book opening
   out. Landscape only: in portrait a single page already fills the block. */
body:not(.is-portrait) .book { transition: transform 0.55s cubic-bezier(.4, 0, .2, 1); }
body:not(.is-portrait).is-cover .book { transform: translateX(-25%); }
body:not(.is-portrait).is-back  .book { transform: translateX(25%); }

@media (prefers-reduced-motion: reduce) {
  body:not(.is-portrait) .book { transition: none; }
}

/* ===========================================================================
   PAGES
   The outer .page element belongs to page-flip — it overwrites the element's
   INLINE style on every frame (width, height, transform, clip-path). So never
   set an inline style on it, and never expect to control its display or layout
   box here. Everything of ours lives on .page-inner.
   =========================================================================== */

.page {
  background: var(--parchment);
  overflow: hidden;
}

.page-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: calc(var(--pw) * 0.10) calc(var(--pw) * 0.095);
  color: var(--ink);
  /* foxing and age, so bare parchment is never flat */
  background:
    radial-gradient(120% 80% at 12% 8%,  rgba(180, 140, 80, 0.16), transparent 55%),
    radial-gradient(90% 70% at 88% 92%,  rgba(150, 110, 60, 0.14), transparent 55%),
    radial-gradient(60% 50% at 70% 25%,  rgba(196, 160, 100, 0.10), transparent 60%),
    linear-gradient(170deg, var(--parchment) 0%, var(--parchment-deep) 100%);
}

/* The gutter shadow — the curve of the paper into the spine. Left and right
   pages take it on opposite edges, which is what sells the spread as one book. */
.page-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--pw) * 0.09);
  pointer-events: none;
}
.page--left  .page-inner::before {
  right: 0;
  background: linear-gradient(to right, transparent, rgba(60, 40, 20, 0.22));
}
.page--right .page-inner::before {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(60, 40, 20, 0.22));
}

/* --- The covers ---------------------------------------------------------- */

.page--cover .page-inner {
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(255, 170, 110, 0.10), transparent 70%),
    repeating-linear-gradient(74deg,
      rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px,
      rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 5px),
    linear-gradient(155deg, var(--leather) 0%, var(--oxblood-deep) 100%);
  color: var(--gold-bright);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--pw) * 0.12);
}

/* Blind-tooled border, the way a real binding is stamped. */
.page--cover .page-inner::after {
  content: '';
  position: absolute;
  inset: calc(var(--pw) * 0.055);
  border: 2px solid rgba(216, 184, 120, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 calc(var(--pw) * 0.06) rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.page--cover.has-image .cover-art { display: block; }
/* With real cover art behind it the title needs its own shadow to stay legible. */
.page--cover.has-image .cover-title,
.page--cover.has-image .cover-sub { text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.8); }

.cover-title {
  position: relative;
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.125);
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 calc(var(--pw)*0.03) rgba(176,141,79,0.35);
}

.cover-rule {
  position: relative;
  width: 42%;
  height: 1px;
  margin: calc(var(--pw) * 0.05) 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.cover-sub {
  position: relative;
  font-family: var(--font-book);
  font-style: italic;
  font-size: calc(var(--pw) * 0.042);
  color: rgba(216, 184, 120, 0.78);
  margin: 0;
}

.cover-open {
  position: relative;
  margin-top: calc(var(--pw) * 0.1);
  background: none;
  border: 1px solid rgba(216, 184, 120, 0.35);
  color: rgba(216, 184, 120, 0.85);
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.036);
  letter-spacing: 0.08em;
  padding: 0.55em 1.4em;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.cover-open:hover {
  background: rgba(216, 184, 120, 0.12);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.cover-open > * { pointer-events: none; }

/* --- Endpapers ----------------------------------------------------------- */

.page--endpaper .page-inner {
  background:
    radial-gradient(100% 90% at 30% 20%, rgba(107, 42, 36, 0.10), transparent 60%),
    repeating-linear-gradient(45deg,
      rgba(107, 42, 36, 0.05) 0px, rgba(107, 42, 36, 0.05) 9px,
      rgba(200, 180, 137, 0.07) 9px, rgba(200, 180, 137, 0.07) 18px),
    linear-gradient(160deg, #ddcaa4, #cbb387);
  align-items: center;
  justify-content: center;
}

/* THE OPTIONAL TEXTURES.
   Layered on only once js/book.js has confirmed the file exists, so the pages
   never request an image that is not there. Drop parchment.png or endpaper.png
   into assets/images/ and it appears on the next load with no code change. */
html.has-parchment .page-inner {
  background-image:
    url('../assets/images/parchment.png'),
    radial-gradient(120% 80% at 12% 8%,  rgba(180, 140, 80, 0.16), transparent 55%),
    radial-gradient(90% 70% at 88% 92%,  rgba(150, 110, 60, 0.14), transparent 55%),
    radial-gradient(60% 50% at 70% 25%,  rgba(196, 160, 100, 0.10), transparent 60%),
    linear-gradient(170deg, var(--parchment) 0%, var(--parchment-deep) 100%);
  background-size: cover, auto, auto, auto, auto;
  background-blend-mode: multiply, normal, normal, normal, normal;
}
html.has-endpaper .page--endpaper .page-inner {
  background-image:
    url('../assets/images/endpaper.png'),
    linear-gradient(160deg, #ddcaa4, #cbb387);
  background-size: cover, auto;
}

/* The small paw print that makes a blank endpaper read as a choice, not a bug. */
.ex-libris {
  text-align: center;
  opacity: 0.5;
}
.ex-libris .paw { width: calc(var(--pw) * 0.13); height: auto; display: block; margin: 0 auto calc(var(--pw)*0.035); }
.ex-libris .paw path { fill: var(--oxblood); }
.ex-libris-label {
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.038);
  letter-spacing: 0.22em;
  color: var(--oxblood);
  margin: 0;
}
.ex-libris-name {
  font-family: var(--font-hand);
  font-size: calc(var(--pw) * 0.062);
  color: var(--ink);
  margin: calc(var(--pw) * 0.02) 0 0;
}

/* --- Shared page furniture ----------------------------------------------- */

.page-title {
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.072);
  line-height: 1.15;
  color: var(--oxblood);
  margin: 0 0 calc(var(--pw) * 0.012);
  text-align: center;
}

.page-rule {
  width: 38%;
  height: 1px;
  margin: calc(var(--pw) * 0.026) auto calc(var(--pw) * 0.038);
  background: linear-gradient(to right, transparent, var(--oxblood), transparent);
  opacity: 0.55;
  flex: none;
}

/* The page number sits in the OUTER bottom corner, which is where a printed book
   puts it — and, not by accident, out of the way of the centred play button. */
.folio {
  position: absolute;
  bottom: calc(var(--pw) * 0.028);
  font-family: var(--font-book);
  font-size: calc(var(--pw) * 0.03);
  color: var(--ink-soft);
  opacity: 0.45;
}
.page--left  .folio { left: calc(var(--pw) * 0.062); }
.page--right .folio { right: calc(var(--pw) * 0.062); }

/* --- The index ----------------------------------------------------------- */

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: calc(var(--pw) * 0.012);
}

.toc-link {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  text-decoration: none;
  color: var(--ink);
  font-size: calc(var(--pw) * 0.052);
  line-height: 1.5;
  padding: calc(var(--pw) * 0.014) calc(var(--pw) * 0.01);
  transition: color 0.25s;
}
.toc-link > * { pointer-events: none; }
.toc-link:hover { color: var(--oxblood); }
.toc-num {
  font-family: var(--font-title);
  color: var(--oxblood);
  opacity: 0.8;
  min-width: 1.4em;
}
.toc-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(74, 59, 44, 0.38);
  transform: translateY(-0.22em);
}

/* --- Illustration pages --------------------------------------------------- */

.page--illus .page-inner {
  padding: calc(var(--pw) * 0.062) calc(var(--pw) * 0.062) calc(var(--pw) * 0.095);
}

.illus {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* the plate sits in a printed frame whether or not there is art in it */
  border: 1px solid rgba(74, 59, 44, 0.30);
  box-shadow: inset 0 0 0 4px rgba(239, 227, 200, 0.55), inset 0 0 0 5px rgba(74, 59, 44, 0.18);
}

.illus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.illus.has-image img { display: block; }
.illus.has-image .illus-ph { display: none; }

.illus-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pw) * 0.03);
  width: 100%;
  height: 100%;
  padding: calc(var(--pw) * 0.08);
  text-align: center;
  color: var(--ink-soft);
}
.illus-ph .paw { width: calc(var(--pw) * 0.16); height: auto; opacity: 0.30; }
.illus-ph .paw path { fill: var(--ink); }
.illus-ph-title {
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.055);
  color: var(--oxblood);
  opacity: 0.65;
}
.illus-ph-note {
  font-family: var(--font-book);
  font-style: italic;
  font-size: calc(var(--pw) * 0.032);
  opacity: 0.5;
}

/* --- Lyrics -------------------------------------------------------------- */

/* A lyrics page is tighter than the others: these are long ballad lines and the
   column has to be wide enough that they wrap once, not twice. */
.page--lyrics .page-inner { padding: calc(var(--pw) * 0.072) calc(var(--pw) * 0.062); }

.lyrics {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clipped, never scrolled — a scrollbar inside a book is a broken illusion.
     js/book.js measures .lyrics-body against this box and steps the type down
     if a rewritten song ever outgrows the page. */
  overflow: hidden;
  /* generous: he reads these aloud. js/book.js may lower it to keep a long
     song on the page, so this is a starting size, not a fixed one. */
  font-size: calc(var(--pw) * 0.0365);
  line-height: 1.5;
}

/* The verse block shrinks to its own widest line and is centred by the flex
   parent, so the words sit in the middle of the page instead of hugging the
   left margin. The lines stay left-aligned to each other — centring each line
   individually would throw away the caesura indent that shows where a sung
   line turns. */
.lyrics-body { width: auto; max-width: 100%; }

.verse { margin: 0; }
.verse + .verse { margin-top: 1em; }

/* EACH SUNG LINE IS SET ON TWO, broken at its own caesura by js/book.js. The
   second half is indented, the way a hymnal sets a line too long for its
   column, so a reader can still see where each sung line begins. */
.verse .line { display: block; }
.verse .half { display: block; }
.verse .half-turn { padding-left: 1.15em; }

/* Ink bleed on the opening capital. */
.verse:first-child .line:first-child .half:first-child::first-letter {
  font-family: var(--font-title);
  font-size: 2.05em;
  line-height: 0.9;
  float: left;
  padding: 0.06em 0.09em 0 0;
  color: var(--oxblood);
  text-shadow: 0 0 2px rgba(107, 42, 36, 0.45);
}

/* --- The play control: a wax seal ---------------------------------------- */

.player {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pw) * 0.014);
  margin-top: calc(var(--pw) * 0.03);
}

.play-btn {
  position: relative;
  width: calc(var(--pw) * 0.125);
  height: calc(var(--pw) * 0.125);
  padding: 0;
  cursor: pointer;
  border: none;
  /* a blob of wax is not a perfect circle */
  border-radius: 48% 52% 51% 49% / 50% 48% 52% 50%;
  background:
    radial-gradient(38% 34% at 34% 28%, rgba(255, 190, 170, 0.42), transparent 62%),
    radial-gradient(100% 100% at 60% 75%, var(--oxblood-deep), var(--oxblood) 70%);
  box-shadow:
    inset 0 2px 5px rgba(255, 180, 160, 0.26),
    inset 0 -3px 7px rgba(0, 0, 0, 0.42),
    0 3px 7px rgba(0, 0, 0, 0.36);
  color: rgba(245, 222, 200, 0.92);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* Every child must ignore pointer events: page-flip only lets a click through
   when the event target IS the <button>, so a hit on an inner icon would turn
   the page instead of starting the song. */
.play-btn > * { pointer-events: none; }

.play-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 5px rgba(255, 180, 160, 0.3),
    inset 0 -3px 7px rgba(0, 0, 0, 0.42),
    0 6px 12px rgba(0, 0, 0, 0.42);
}
.play-btn:active:not(:disabled) { transform: translateY(0); }
.play-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

.play-btn svg { width: 48%; height: 48%; fill: currentColor; display: block; margin: 0 auto; }
.play-btn .icon-pause { display: none; }
.play-btn.is-playing .icon-play  { display: none; }
.play-btn.is-playing .icon-pause { display: block; }

.play-btn:disabled {
  cursor: default;
  filter: grayscale(0.75) brightness(0.72);
  opacity: 0.5;
}

.play-label {
  font-family: var(--font-book);
  font-style: italic;
  font-size: calc(var(--pw) * 0.031);
  color: var(--ink-soft);
  opacity: 0.72;
  min-height: 1.2em;
}

.progress {
  width: 58%;
  height: 2px;
  background: rgba(74, 59, 44, 0.22);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--oxblood);
  transition: width 0.15s linear;
}
.player.is-silent .progress { visibility: hidden; }

/* --- The dedication ------------------------------------------------------ */

.page--dedication .page-inner { justify-content: center; align-items: center; }

.dedication-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}
.page--dedication.has-image .dedication-img { display: block; }
.page--dedication.has-image .dedication-text { display: none; }

.dedication-text {
  font-family: var(--font-hand);
  font-size: calc(var(--pw) * 0.058);
  line-height: 2.5;
  color: #3a2a1c;
  text-align: center;
  transform: rotate(-1.4deg);
}
.dedication-text .line { display: block; }
.dedication-text .line:last-child { margin-top: 1.1em; }

/* --- Turn arrows --------------------------------------------------------- */

.turn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(38px, 4.4vw, 58px);
  height: clamp(38px, 4.4vw, 58px);
  border: 1px solid rgba(176, 141, 79, 0.28);
  border-radius: 50%;
  background: rgba(20, 12, 8, 0.45);
  color: rgba(216, 184, 120, 0.75);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  opacity: 0.30;
}
.turn > * { pointer-events: none; }
.stage:hover .turn { opacity: 0.85; }
.turn:hover { background: rgba(107, 42, 36, 0.55); color: var(--gold-bright); border-color: var(--gold-bright); }
.turn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; opacity: 1; }
.turn-prev { left: clamp(4px, 1.6vw, 22px); }
.turn-next { right: clamp(4px, 1.6vw, 22px); }
.turn[hidden] { display: none; }

/* --- The ribbon bookmark ------------------------------------------------- */

.ribbon {
  position: absolute;
  top: 0;
  z-index: 4;
  width: clamp(14px, 1.5vw, 20px);
  height: clamp(74px, 12vh, 122px);
  background: linear-gradient(to bottom, var(--oxblood) 0%, var(--oxblood-deep) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: height 0.32s cubic-bezier(.4,0,.2,1), filter 0.25s, opacity 0.3s;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
}
.ribbon.is-visible { opacity: 1; pointer-events: auto; }
.ribbon:hover { height: clamp(92px, 15vh, 148px); filter: brightness(1.22); }
.ribbon:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
/* the swallowtail cut at the bottom of the ribbon */
.ribbon-tail {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%);
}

/* --- Close the book: printed on the page ---------------------------------- */

/* Sits in the bottom corner opposite the page number, so a spread reads with a
   running foot at each outer edge. Oxblood is this book's "you may touch this"
   colour, which is what stops it reading as decoration. */
.page-close {
  position: absolute;
  bottom: calc(var(--pw) * 0.028);
  left: calc(var(--pw) * 0.062);
  z-index: 2;
  background: none;
  border: none;
  padding: 0.3em 0;
  font-family: var(--font-title);
  font-size: calc(var(--pw) * 0.032);
  letter-spacing: 0.06em;
  color: var(--oxblood);
  opacity: 0.62;
  cursor: pointer;
  border-bottom: 1px solid rgba(107, 42, 36, 0.32);
  transition: opacity 0.25s, border-color 0.25s;
}
.page-close > * { pointer-events: none; }
.page-close:hover { opacity: 1; border-bottom-color: var(--oxblood); }
.page-close:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; opacity: 1; }

/* In a spread only the left page carries it, or it appears twice at once.
   On a phone every page shows its own. */
body:not(.is-portrait) .page--right .page-close { display: none; }

/* An illustration page has a thinner side margin than a text page. */
.page--illus .page-close { left: calc(var(--pw) * 0.062); }

/* Read by a screen reader, never drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscript {
  position: fixed;
  inset: auto 0 40% 0;
  text-align: center;
  font-size: 18px;
  color: var(--parchment);
  z-index: 5;
}

/* --- Phones: one page at a time ------------------------------------------ */

/* ONE PAGE AT A TIME.
   Keyed to .is-portrait, which js/book.js sets from page-flip's OWN orientation,
   rather than to a width of our own choosing. A media query here would be a
   second opinion about when the book goes single-page, and the two would
   disagree in the band between them. */
body.is-portrait .turn {
  top: auto;
  bottom: clamp(8px, 1.6vh, 18px);
  transform: none;
  opacity: 0.8;
}
body.is-portrait .turn-prev { left: 14px; }
body.is-portrait .turn-next { right: 14px; }
body.is-portrait .ribbon { height: clamp(56px, 8vh, 84px); }

/* Room for those bottom-corner arrows, and less wasted margin on a phone. */
@media (max-width: 820px) {
  .stage { padding: clamp(8px, 1.6vh, 18px) 10px clamp(56px, 9vh, 76px); }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon, .turn, .play-btn, .progress-fill, .page-close { transition: none; }
}