/* ==========================================================================
   ROTAS — a book you leaf through. Leaves are placed each frame by
   js/rotas/rotas.js. Typography and palette through the variables below.
   ========================================================================== */
.rotas {
  --r-display: 'Bowlby One SC', var(--font-display);   /* titles (AREPO's display face) — replace here */
  --r-body: var(--font-grotesk);              /* labels: marks, page numbers, cues */
  --r-text: 'Livvic', var(--font-grotesk);   /* reading text — replace here */
  --r-white: #f4f2ee; --r-light: #dedbd5; --r-black: #0b0b0b; --r-dark: #2b2a29;
  --r-ink: #0a0a0a; --r-paper-ink: #f1ede4; --r-grey: #8a8784; --r-red: var(--red);
  --r-endpaper: #121111;
  position: fixed; inset: 0; z-index: 30; overflow: hidden;
  background: #0a0a0a url('../assets/rotas/bg.webp') center / cover no-repeat;   /* the dark stone behind the book */
  font-family: var(--r-body); opacity: 0; transition: opacity .7s var(--ease-out);
  cursor: grab; user-select: none; touch-action: pan-y;
  display: flex; align-items: center; justify-content: center;
}
.rotas[hidden] { display: none; }
.rotas.is-open { opacity: 1; }
.rotas.is-grabbing { cursor: grabbing; }

/* ---------- the open book ---------- */
.rbook { position: relative; transform-style: preserve-3d; }
.rotas--spread .rbook { width: min(94vw, calc(84vh * 1.5)); height: min(84vh, calc(94vw / 1.5)); margin-top: 2vh; }
.rotas--single .rbook { width: 100vw; height: 100vh; }
/* the shadow the book casts on the stone (outside the book's 3D space, same box as the open book):
   tight and dark at its edges, wide and soft below — light from above */
.rbook-shadow { display: none; }
.rotas--spread .rbook-shadow { display: block; position: absolute; left: 50%; top: 50%; pointer-events: none;
  width: min(94vw, calc(84vh * 1.5)); height: min(84vh, calc(94vw / 1.5)); translate: -50% calc(-50% + 1vh); border-radius: 6px;
  box-shadow: 0 5px 12px 1px rgba(0, 0, 0, .75), 0 36px 60px -4px rgba(0, 0, 0, .85), 0 90px 130px 6px rgba(0, 0, 0, .6); }
.rotas--spread .rbook-shadow::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: -4%; height: 7%;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 100%); }
/* paper blocks under the leaves: inside covers, with the edges of the page stack */
.rbook__block { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--r-endpaper); }
/* the inside cover facing page 1: a red dot, a line, a short red stroke */
.rbook__inside { position: absolute; left: 10%; right: 10%; top: 50%; translate: 0 -50%; text-align: center; }
.rbook__inside p { margin: 0; font: 400 clamp(11px, 1vw, 15px)/1.4 var(--r-text); letter-spacing: .22em; color: #c9c4bb; }
.rbook__dot { display: block; width: 6px; height: 6px; margin: 0 auto 2.4em; border-radius: 50%; background: var(--r-red); }
.rbook__stroke { display: block; width: 34px; height: 1px; margin: 2.2em auto 0; background: var(--r-red); }
.rbook__block--l { left: 0; border-radius: 6px 0 0 6px; box-shadow: -3px 3px 0 #2a2928, -6px 6px 0 #1c1b1a, 0 30px 60px rgba(0, 0, 0, .6); }
.rbook__block--r { right: 0; border-radius: 0 6px 6px 0; box-shadow: 3px 3px 0 #2a2928, 6px 6px 0 #1c1b1a, 0 30px 60px rgba(0, 0, 0, .6); }
.rotas--single .rbook__block--l { display: none; }
.rotas--single .rbook__block--r { width: 100%; border-radius: 0; box-shadow: none; }
.rbook__leaves { position: absolute; inset: 0; transform-style: preserve-3d; }

/* a leaf: lies on the right half, hinged on the spine (its left edge) */
.rleaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center;
  transform-style: preserve-3d; will-change: transform; }
.rotas--single .rleaf { left: 0; width: 100%; }
.rleaf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.rleaf__face--back { transform: rotateY(180deg); }
/* the fold darkens a face as it turns: toward the spine on the front, toward the spine on the back too */
.rleaf__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }
.rleaf__face--front .rleaf__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .35)); }
.rleaf__face--back .rleaf__shade { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .35)); }
/* the spine: soft gutter shadow on both pages */
.rbook__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 8%; translate: -50% 0; pointer-events: none; z-index: 60;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .14) 40%, rgba(0, 0, 0, .26) 50%, rgba(0, 0, 0, .14) 60%, transparent); transform: translateZ(8px); }
.rotas--single .rbook__spine { left: 0; width: 5%; translate: 0 0; background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent); }
/* the shadow the turning leaf casts on the page below it, reaching as far as its edge */
.rbook__cast { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; opacity: 0; z-index: 30; transform: translateZ(1px); }
.rbook__cast--r { left: 50%; background: linear-gradient(90deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .5) calc(var(--w, 1) * 100%), rgba(0, 0, 0, .12) calc(var(--w, 1) * 100% + 6%), transparent calc(var(--w, 1) * 100% + 30%)); }
.rbook__cast--l { right: 50%; background: linear-gradient(270deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .5) calc(var(--w, 1) * 100%), rgba(0, 0, 0, .12) calc(var(--w, 1) * 100% + 6%), transparent calc(var(--w, 1) * 100% + 30%)); }
.rotas--single .rbook__cast--r { left: 0; width: 100%; }
.rotas--single .rbook__cast--l { display: none; }

/* ---------- a printed page (sized by its leaf: container units) ---------- */
.rp { position: absolute; inset: 0; container-type: size; }
.rp--white { background: var(--r-white); color: var(--r-ink); }
.rp--light { background: var(--r-light); color: var(--r-ink); }
.rp--black { background: var(--r-black); color: var(--r-paper-ink); }
.rp--dark  { background: var(--r-dark);  color: var(--r-paper-ink); }
.rp--back, .rp--endpaper { background: var(--r-endpaper); }
.rp__endmark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 500 11px/1 var(--r-body); letter-spacing: .4em; color: #3b3a38; white-space: nowrap; }

.rp__text { position: absolute; left: 12cqw; right: 12cqw; }
.rp--text .rp__text { top: 50%; translate: 0 -48%; max-width: 520px; }
.rp__mark { margin: 0 0 2.4cqh; font: 500 clamp(10px, 2.3cqw, 14px)/1 var(--r-body); letter-spacing: .34em; color: var(--r-red); }
.rp__kicker { color: var(--r-ink); }
.rp--black .rp__kicker, .rp--dark .rp__kicker { color: var(--r-paper-ink); }
.rp__title { margin: 0 0 2.6cqh; font: 400 clamp(28px, 9cqw, 80px)/.92 var(--r-display); letter-spacing: .02em; outline: none; }
.rp__rule { display: block; width: 44px; height: 2px; margin: 0 0 3.6cqh; background: var(--r-red); }
.rp__p { margin: 0 0 1em; font: 400 clamp(13px, 2.45cqw, 17px)/1.65 var(--r-text); opacity: .9; }
.rp--verse .rp__p { margin-bottom: 1.3em; font-size: clamp(15px, 3cqw, 21px); line-height: 1.6; opacity: .92; }
/* the closing line, at the foot of the page */
.rp__coda { position: absolute; left: 12cqw; right: 12cqw; bottom: 12cqh; margin: 0;
  font: 400 clamp(10px, 2.15cqw, 15px)/1.3 var(--r-text); letter-spacing: .14em; color: var(--r-red); }
.rotas--single .rp__coda { bottom: 19cqh; }   /* clear of the DRAG cue on phones */
.rp__num { position: absolute; right: 8cqw; bottom: 5cqh; margin: 0; font: 500 11px/1 var(--r-body); letter-spacing: .28em; color: var(--r-grey); }
.rp__cur { color: var(--r-red); }

/* text + image: the picture fills the top of the page, the text below */
.rp { --pic-h: 58cqh; }
.rp__pic { position: absolute; margin: 0; left: 5cqw; right: 5cqw; top: 5cqh; height: var(--pic-h); overflow: hidden; }
.rp__pic img, .rp__pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp__pic video { background: #0b0b0b; pointer-events: none; }
.rp__pic--fit { right: auto; height: auto; left: 50%; translate: -50% 0; }   /* the clip's ratio (width set inline), centred on the page */
.rp__pic::after { content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: var(--r-red); }
.rp__ph { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 5cqw;
  background: #1e1d1c; color: var(--r-grey); font: 500 11px/1 var(--r-body); letter-spacing: .26em; }
.rp--black .rp__ph, .rp--dark .rp__ph { background: #d6d2cb; color: #6e6a64; }
.rp--image .rp__text { top: 68cqh; }
.rp--verse .rp__title { font-size: clamp(38px, 12.5cqw, 110px); margin-bottom: 4.4cqh; }
.rp--verse .rp__mark { margin-bottom: 4cqh; }
.rp--verse .rp__rule { margin-bottom: 5cqh; }
.rp--image .rp__title { font-size: clamp(22px, 6cqw, 50px); margin-bottom: 1.6cqh; }
.rp--image .rp__rule { margin-bottom: 2cqh; }
.rp--image .rp__p { font-size: clamp(12px, 2.1cqw, 15px); line-height: 1.55; }

/* ---------- the cue ---------- */
.rotas__cue { position: absolute; left: 50%; bottom: 2.4vh; translate: -50% 0; margin: 0; z-index: 70; pointer-events: none;
  font: 500 11px/1 var(--r-body); letter-spacing: .32em; color: var(--r-grey); transition: opacity .6s ease; white-space: nowrap; }
.rotas__cue span { display: inline-block; color: var(--r-red); animation: cue-nudge 1.8s var(--ease-in-out) infinite; }
.rotas.has-moved .rotas__cue { opacity: 0; }
.rotas__cue { transition: opacity .4s ease; }
.rotas__cue--open { opacity: 0; }
.rotas.is-closed .rotas__cue--open { opacity: 1; }
.rotas.is-closed .rotas__cue--turn { opacity: 0; }
.rotas.is-closed { cursor: pointer; }
.rotas--single .rotas__cue { bottom: 10vh; color: var(--r-ink); }
@keyframes cue-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

body.in-rotas .brand { text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.rotas--single ~ .brand, body.in-rotas .rotas--single { }

@media (prefers-reduced-motion: reduce) {
  .rotas { transition-duration: .01s; }
  .rotas__cue span { animation: none; }
  .rleaf { transition: opacity .2s ease; }
}

/* ---------- the covers (the book starts closed, cover centred) ---------- */
.rp--cover { background: radial-gradient(ellipse 120% 90% at 30% 20%, #2a2928, #141313 55%, #0b0b0b); color: var(--r-paper-ink);
  border-radius: 0 6px 6px 0; box-shadow: inset 6px 0 10px rgba(0, 0, 0, .55), inset -1px 0 0 rgba(255, 255, 255, .06); }
.rp--backcover { border-radius: 6px 0 0 6px; box-shadow: inset -6px 0 10px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .06); }
.rp__coverframe { position: absolute; inset: 6cqw; border: 1px solid rgba(241, 237, 228, .18); pointer-events: none; }
.rp__coverframe::after { content: ''; position: absolute; inset: 1.4cqw; border: 1px solid rgba(241, 237, 228, .08); }
.rp__covertext { position: absolute; left: 12cqw; right: 12cqw; top: 50%; translate: 0 -55%; text-align: center; }
.rp__covertext p { margin: 0; }
.rp__coverkicker { font: 500 clamp(10px, 2.3cqw, 14px)/1 var(--r-body); letter-spacing: .4em; color: var(--r-red-light, #ff2a2a); }
.rp__covertitle { margin-top: 4cqh !important; font: 400 clamp(30px, 10.5cqw, 93px)/.9 var(--r-display); letter-spacing: .04em; color: var(--r-paper-ink); }
.rp__coverrule { display: block; width: 14cqw; height: 2px; margin: 5cqh auto; background: var(--r-red); }
.rp__coverline { font: 400 clamp(11px, 2.3cqw, 16px)/1.4 var(--r-text); letter-spacing: .22em; text-transform: uppercase; color: #bdb8b0; }
.rp__covermark { position: absolute; left: 0; right: 0; bottom: 10cqh; margin: 0; text-align: center;
  font: 400 clamp(9px, 1.9cqw, 13px)/1 var(--font-display); letter-spacing: .3em; color: #8f8a83; }
.rp--backcover .rbook__dot { margin-bottom: 3em; }
.rp--inside { background: var(--r-endpaper); }
.rotas--single .rotas__cue--open { color: #bdb8b0; }                 /* on the dark cover */
.rotas--single .rp__covermark { bottom: 20cqh; }
/* the illustration printed faintly on the inside cover, behind the line */
.rbook__art { position: absolute; left: 7%; right: 7%; top: 53%; width: 86%; translate: 0 -50%; pointer-events: none; user-select: none; }
.rbook__inside { z-index: 1; }
/* the incipit (verse page): everything centred on the page */
.rp--verse .rp__text { text-align: center; max-width: none; }
.rp--verse .rp__rule { margin-left: auto; margin-right: auto; }
.rp--verse .rp__coda { text-align: center; }
/* the incipit's title, a little larger */
.rp--verse .rp__title { font-size: clamp(26px, 7.5cqw, 66px); letter-spacing: .03em; line-height: .9; }
/* the studio's icon under the mark on the cover */
.rp__covermark p { margin: 0; }
.rp--cover:not(.rp--backcover) .rp__covermark { bottom: 9cqh; }
.rp__covericon { display: block; width: 9cqw; min-width: 26px; max-width: 54px; height: auto; margin: 2.6cqh auto 0; }
.rotas--single .rp--cover:not(.rp--backcover) .rp__covermark { bottom: 17cqh; }
/* prose: a page of the story (long text) — smaller, tighter; on a picture page the picture gets shorter */
.rp--prose { --pic-h: 46cqh; }
.rp--prose.rp--image .rp__text { top: 55cqh; }
.rp--prose .rp__title { font-size: clamp(22px, 6.4cqw, 52px); margin-bottom: 1.6cqh; }
.rp--prose .rp__rule { margin-bottom: 2.2cqh; }
.rp--prose .rp__p { font-size: clamp(11px, 2.25cqw, 16px); line-height: 1.55; margin-bottom: .85em; }
.rp--prose.rp--text .rp__text { max-width: none; }
.rotas--spread .rp--prose.rp--text .rp__p { font-size: clamp(12px, 2.6cqw, 18px); line-height: 1.6; }   /* the open book: room to breathe */
/* a long text page (dense: true): a size smaller, a little tighter, so the whole page fits */
.rp--prose.rp--dense .rp__p, .rotas--spread .rp--prose.rp--dense .rp__p { font-size: clamp(10.5px, 2.2cqw, 15.5px); line-height: 1.5; margin-bottom: .75em; }
.rp__coda--in { position: static; margin: 1.6em 0 0 !important; font-size: clamp(12px, 2.6cqw, 18px); letter-spacing: .06em; }
/* a single line under a picture / clip (caption): picture and line stacked, the line right under it */
.rp__capt { position: absolute; left: 5cqw; right: 5cqw; top: 5cqh; display: flex; flex-direction: column; align-items: center; gap: 3.2cqh; }
.rp__capt .rp__pic { position: relative; left: auto; right: auto; top: auto; translate: none; flex: none; }
.rp__capt .rp__pic:not(.rp__pic--fit) { width: 100%; }
.rp__caption { margin: 0; text-align: center; font: 400 clamp(14px, 3cqw, 22px)/1.4 var(--r-text); letter-spacing: .04em; }

/* ---------- a double page (type 'spread'): columns of clips across both pages, the middle one over the spine ---------- */
.rp--spread { overflow: hidden; }
.rp__tri { position: absolute; top: 0; bottom: 0; width: 200cqw; display: flex; align-items: center; justify-content: center; }
.rp__tri--left { left: 0; }
.rp__tri--right { left: -100cqw; }
.rp__tri--full { left: 0; width: 100cqw; }
.rp__col { flex: 0 0 auto; position: relative; background: #0b0b0b; outline: max(2px, .45cqw) solid var(--r-paper-ink); outline-offset: 0; }
.rp__col video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rp--spread .rp__num { z-index: 2; }
/* the both-ways arrows beside the double page's row: thin outlines, grey, on the outer side of each page */
.rp__both { position: absolute; top: 50%; width: 3.6cqw; aspect-ratio: 40 / 140; translate: -50% -50%; pointer-events: none; z-index: 2; }
.rp__both--left { left: 5.2cqw; }
.rp__both--right { left: 94.8cqw; }
.rp__both--full { left: 50%; width: 2.4cqh; translate: -50% 0; }   /* (just under the row: top set inline) */
.rp__both svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rp__both path { fill: none; stroke: var(--r-grey); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .85; }

/* ---------- a rhyme page (rhyme: true): THE EYES THAT NEVER SLEEP (the user's mockup, 2026-10-18) ---------- */
.rp--rhyme .rp__p { font-size: clamp(12px, 2.6cqw, 19px); line-height: 1.55; margin-bottom: 1em; }   /* the book's reading face (--r-text) */
.rp--rhyme .rp__title { font-size: clamp(22px, 6.4cqw, 58px); margin-bottom: 2.2cqh; }
.rp--rhyme .rp__mark { margin-bottom: 1.8cqh; }
.rp--rhyme .rp__rule { margin-bottom: 2.6cqh; }
.rp--rhyme .rp__text { top: auto; translate: none; }
.rp--rhyme .rp__coda { bottom: 15cqh; font: 500 clamp(11px, 2.35cqw, 17px)/1.3 var(--r-body); letter-spacing: .28em; }
/* the page number with a hairline toward the spine (left page) / from it (right page) */
.rp--rhyme .rp__num { left: 8cqw; right: 8cqw; display: flex; align-items: center; white-space: pre; }
.rp--rhyme .rp__num::after { margin-left: 2.4cqw; } .rp--rhyme.rp--gaze .rp__num::before { margin-right: 2.4cqw; }
.rp--rhyme .rp__num::after, .rp--rhyme.rp--gaze .rp__num::before { content: ''; flex: 1; height: 1px; background: rgba(241, 237, 228, .18); }
.rp--rhyme.rp--gaze .rp__num::after { display: none; }
/* left page: the two eyes, the title, the first part, the woods at its foot */
.rp--eyes .rp__text { top: 28cqh; }
.rp--rhyme:not(.rp--eyes):not(.rp--gaze) .rp__text { top: 19cqh; }   /* the first part, without the pair of eyes: higher */
.rp__eyes { position: absolute; left: 0; right: 0; top: 9cqh; display: flex; justify-content: center; gap: 11cqw; pointer-events: none; }
.rp__eye { width: 28cqw; height: auto; overflow: visible; }
/* eyes: 'small' — the pair, smaller, just over a single line (THE BEAST: "Her eyes were golden.") */
.rp--eyes-small .rp__eyes { top: 38cqh; gap: 6cqw; }
.rp--eyes-small .rp__eye { width: 15cqw; }
.rp--eyes-small .rp__text { top: 57cqh; translate: 0 -50%; }
.rp__eye .eye__white { fill: var(--r-paper-ink); }
.rp__eye .eye__iris { fill: #8b1e1e; }
.rp__eye .eye__ring { fill: none; stroke: #3a0a0b; stroke-width: 3; }
.rp__eye .eye__pupil { fill: #050505; }
.rp__eye .eye__light { fill: var(--r-paper-ink); opacity: .9; }
.rp__eye .eye__shade { fill: #050505; opacity: .28; }
.rp__eye .eye__rim { fill: none; stroke: #050505; stroke-width: 4; }
.rp__foot { position: absolute; left: 1cqw; right: 1cqw; pointer-events: none; }
.rp__foot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rp__foot--woods { bottom: 9cqh; height: 34cqh; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.wd__ground { fill: #1d1c1b; }
.wd__trunk { fill: #2c2b29; }
.wd__br { fill: none; stroke: #2c2b29; stroke-width: 2.6; stroke-linecap: round; }
.wd__eye { fill: #b3121a; } .wd__dot { fill: #120707; }
/* right page: the great eye, the second part, the eye closing, the Latin */
.rp--gaze .rp__text { top: 40cqh; }
.rp__gaze { position: absolute; left: 4cqw; right: 4cqw; top: 9cqh; height: 24cqh; pointer-events: none; }
.rp__gaze svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gz__ring { fill: none; stroke: rgba(241, 237, 228, .28); stroke-width: 1.2; }
.gz__line { fill: none; stroke: rgba(241, 237, 228, .55); stroke-width: 1.6; stroke-dasharray: 2 6; }
.gz__fill { fill: var(--r-paper-ink); }
.gz__white { fill: var(--r-paper-ink); }
.gz__iris { fill: #9a1a1e; stroke: #3a0a0b; stroke-width: 4; }
.gz__pupil { fill: #050505; }
.gz__light { fill: var(--r-paper-ink); opacity: .92; }
.gz__shade { fill: #050505; opacity: .22; }
.rp__foot--blinks { bottom: 19cqh; height: 9cqh; left: 12cqw; right: 12cqw; }
.bl__white { fill: var(--r-paper-ink); }
.bl__iris { fill: #9a1a1e; } .bl__pupil { fill: #050505; }
.bl__lid { fill: none; stroke: var(--r-paper-ink); stroke-width: 2.4; stroke-linecap: round; }
.bl__dots { fill: rgba(241, 237, 228, .6); font: 600 14px/1 var(--r-body); text-anchor: middle; letter-spacing: 1px; }

/* a clip alone on its page (tall: true): the whole page height; blend: true = its white melts into the paper (multiply) */
.rp--tall { --pic-h: 82cqh; }
.rp--tall .rp__pic { top: 8cqh; }
.rp--blend .rp__vid { mix-blend-mode: multiply; }
/* a very long story page (tight: true, with dense): a size smaller again, the title too */
.rp--prose.rp--tight .rp__p, .rotas--spread .rp--prose.rp--tight .rp__p { font-size: clamp(9.5px, 2.05cqw, 14.5px); line-height: 1.47; margin-bottom: .7em; }
.rp--tight .rp__title { font-size: clamp(18px, 5.2cqw, 44px); }
.rp--tight .rp__coda--in { font-size: clamp(10.5px, 2.25cqw, 16px); }
/* a story's last lines alone on a page (ending: true): large, centred; the very last one in red */
.rp--ending .rp__p { font-size: clamp(16px, 4.4cqw, 32px); line-height: 1.35; margin-bottom: .6em; }
.rp--ending .rp__p:last-child { color: var(--r-red); font-weight: 500; }

/* ---------- THE BEAST: full-bleed pictures, chapters, beats, the running head ---------- */
.rp--bleed { overflow: hidden; }
.rp__bleed { position: absolute; margin: 0; container-type: inline-size; }
.rp__bleed--cover { inset: 0; }
.rp__bleed--contain { left: 50%; top: 50%; translate: -50% -50%; }
.rp__bleed img, .rp__bleed video { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.rp__over { position: absolute; left: 6%; right: 6%; margin: 0; translate: 0 -50%; text-align: center; color: var(--r-paper-ink);
  font: 500 clamp(9px, 3.1cqi, 18px)/1.5 var(--r-body); letter-spacing: .2em; text-transform: uppercase; }
.rp__over--red { color: var(--r-red); }
.rp__running { position: absolute; left: 0; right: 0; top: 4.6cqh; margin: 0; text-align: center;
  font: 500 clamp(8px, 1.6cqw, 11px)/1 var(--r-body); letter-spacing: .42em; color: var(--r-grey); }
.rp__chap { margin: 1.5em 0 .9em; display: flex; align-items: baseline; gap: .9em; }
.rp__chap:first-child { margin-top: 0; }
.rp__chapnum { font: 400 clamp(15px, 3.6cqw, 26px)/1 var(--r-display); color: var(--r-red); }
.rp__chapname { font: 500 clamp(9px, 1.9cqw, 13px)/1 var(--r-body); letter-spacing: .3em; text-transform: uppercase; }
.rp__beat { color: var(--r-red); font-weight: 500; letter-spacing: .02em; }
.rp__inverse { font-style: italic; text-align: center; opacity: .95; margin: 1.1em 0; }
/* the drawn covers (cover.image / back.image): the whole picture, centred on its own black */
.rp--cover.rp--art { background: #060606; }
.rp--backcover.rp--art { background: #070705; }   /* the back cover picture's own black (no seam) */
.rp__coverart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.rp--backcover .rp__coverart { object-position: right center; }   /* the tree on the page's outer edge; the extra width falls on its black side */