*{box-sizing:border-box}
:root{--cover:#4b2d1d;--gold:#d6b36a;--paper:#f1e6cd;--paper2:#e5d7b9;--ink:#4a4743;--muted:#bcae9b}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 20%,#352318 0,#17110d 58%,#0d0907 100%);color:#fff;font-family:Georgia,"Times New Roman",serif}
body{min-height:100vh;display:flex;justify-content:center}.app{width:min(1180px,100%);min-height:100vh;padding:18px;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.brand{font-size:15px;letter-spacing:.22em;font-weight:700}.subbrand{font-size:12px;color:var(--muted);margin-top:4px}.status{font-size:11px;letter-spacing:.15em;color:var(--gold);border:1px solid rgba(214,179,106,.35);padding:7px 10px;border-radius:999px}
.book-stage{flex:1;display:flex;align-items:center;justify-content:center;perspective:1800px}.book{position:relative;width:min(1040px,100%);height:min(70vh,690px);min-height:460px;transition:width .5s ease}.book.closed{width:min(520px,100%);margin-left:auto;margin-right:0}
.cover-page{position:absolute;inset:0;border:0;border-radius:8px 5px 5px 8px;cursor:pointer;color:#f7e9ca;background:linear-gradient(135deg,var(--cover),#342014 58%,#5a3722);box-shadow:0 24px 55px rgba(0,0,0,.55),inset 0 0 0 2px rgba(214,179,106,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px}.cover-page:before{content:"";position:absolute;inset:15px;border:1px solid rgba(214,179,106,.32);border-radius:4px}
.cover-small{font-size:12px;letter-spacing:.34em;opacity:.85}.cover-title{font-size:clamp(30px,5vw,56px);line-height:1.08;letter-spacing:.08em;font-weight:700;margin:22px 0}.cross{font-size:38px;color:var(--gold);margin:4px 0 18px}.cover-subtitle{font-size:14px;letter-spacing:.12em;opacity:.8}.cover-hint{position:absolute;bottom:28px;font-size:11px;letter-spacing:.25em;color:var(--gold)}
.open-book{position:absolute;inset:0;display:grid;grid-template-columns:1fr 18px 1fr;filter:drop-shadow(0 25px 45px rgba(0,0,0,.48))}.page{position:relative;overflow:auto;padding:clamp(28px,4vw,58px);background:linear-gradient(90deg,var(--paper2),var(--paper));color:var(--ink);box-shadow:inset 0 0 25px rgba(90,60,25,.12)}.left-page{border-radius:8px 0 0 8px}.right-page{border-radius:0 8px 8px 0}.page:after{content:"";position:absolute;inset:18px;border:1px solid rgba(92,70,42,.13);pointer-events:none}.spine{background:linear-gradient(90deg,#6b452d,#2e1c12 48%,#6b452d);box-shadow:0 0 16px rgba(0,0,0,.38);z-index:3}.page-number{position:absolute;bottom:24px;font-size:11px;opacity:.55;letter-spacing:.12em}.left-page .page-number{left:28px}.right-page .page-number{right:28px}.page-kicker{font-size:11px;letter-spacing:.25em;text-transform:uppercase;opacity:.55;margin-bottom:16px}.page h1{font-size:clamp(25px,3.3vw,42px);font-weight:400;line-height:1.12;margin:0 0 22px}.page p{font-size:clamp(16px,1.7vw,20px);line-height:1.65;margin:0 0 16px}.page .verse{font-style:italic;margin-top:22px;padding-left:18px;border-left:2px solid rgba(92,70,42,.28)}
.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}.controls button{background:#2a1c14;color:#f1dfbd;border:1px solid rgba(214,179,106,.28);border-radius:999px;padding:10px 18px;cursor:pointer}.controls button:disabled{opacity:.35}.indicator{min-width:90px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.hint{text-align:center;color:#9e907f;font-size:12px;margin:12px 0 0}
@media(max-width:760px){.app{padding:14px 12px 22px}.subbrand{display:none}.brand{font-size:12px}.status{font-size:9px}.book,.book.closed{height:min(70vh,620px);min-height:420px;width:100%;margin:0}.open-book{grid-template-columns:1fr}.spine{display:none}.left-page,.right-page{grid-column:1;border-radius:8px}.right-page{display:none}.page{padding:30px 26px}.page:after{inset:12px}.controls{gap:10px}.controls button{padding:9px 14px}}


/* =========================================================
   V3.2 – REALISTIC COVER OPENING
   ========================================================= */

.book-stage {
  perspective: 1800px;
}

.book.closed .cover {
  transform-origin: left center;
  transform: rotateY(0deg);
  z-index: 20;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1),
              box-shadow 900ms ease;
}

.book.opening .cover {
  transform: rotateY(-178deg);
  z-index: 20;
  box-shadow: -18px 8px 30px rgba(0,0,0,.35);
}

.book.opening .open-book {
  opacity: 1;
  transform: scale(.985);
}

.book.open .cover {
  pointer-events: none;
  visibility: hidden;
  transform: rotateY(-178deg);
}

.open-book {
  transform-style: preserve-3d;
  transition: opacity 450ms ease, transform 650ms ease;
}

.cover {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@media (max-width: 700px) {
  .book-stage {
    perspective: 1100px;
  }

  .book.opening .cover {
    transform: rotateY(-178deg);
  }
}


/* =========================================================
   V3.2 – STEP 2: PHYSICAL PAGE TURN
   ========================================================= */

/* Correct cover selector: the real element is .cover-page. */
.book.closed .cover-page {
  transform-origin: left center;
  transform: rotateY(0deg);
  z-index: 20;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1),
              box-shadow 900ms ease,
              opacity 250ms ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.book.opening .cover-page {
  transform: rotateY(-178deg);
  z-index: 20;
  box-shadow: -18px 8px 30px rgba(0,0,0,.35);
}

.book.open .cover-page {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(-178deg);
}

.page-turn {
  position:absolute;
  top:0;
  bottom:0;
  left:calc(50% + 9px);
  width:calc(50% - 9px);
  z-index:10;
  display:none;
  transform-style:preserve-3d;
  transform-origin:left center;
  pointer-events:none;
  overflow:visible;
}

.page-turn.active {
  display:block;
}

.turn-face {
  position:absolute;
  inset:0;
  overflow:hidden;
  padding:clamp(28px,4vw,58px);
  background:linear-gradient(90deg,var(--paper2),var(--paper));
  color:var(--ink);
  box-shadow:inset 0 0 25px rgba(90,60,25,.12);
  backface-visibility:hidden;
  border-radius:0 8px 8px 0;
}

.turn-face:after {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(92,70,42,.13);
  pointer-events:none;
}

.turn-back {
  transform:rotateY(180deg);
}

.page-turn.forward {
  animation:pageFlipForward 850ms cubic-bezier(.22,.61,.36,1) forwards;
}

.page-turn.backward {
  left:0;
  transform-origin:right center;
  animation:pageFlipBackward 850ms cubic-bezier(.22,.61,.36,1) forwards;
}

.page-turn.backward .turn-face {
  border-radius:8px 0 0 8px;
}

@keyframes pageFlipForward {
  0%   { transform:rotateY(0deg); }
  100% { transform:rotateY(-180deg); }
}

@keyframes pageFlipBackward {
  0%   { transform:rotateY(0deg); }
  100% { transform:rotateY(180deg); }
}

.book.is-turning .page {
  overflow:hidden;
}

.book.is-turning .controls button {
  pointer-events:none;
}

@media (max-width:760px) {
  .page-turn {
    left:0;
    width:100%;
  }

  .page-turn.forward {
    transform-origin:right center;
    animation-name:pageFlipMobileForward;
  }

  .page-turn.backward {
    left:0;
    transform-origin:left center;
    animation-name:pageFlipMobileBackward;
  }

  @keyframes pageFlipMobileForward {
    0%   { transform:rotateY(0deg); }
    100% { transform:rotateY(-180deg); }
  }

  @keyframes pageFlipMobileBackward {
    0%   { transform:rotateY(0deg); }
    100% { transform:rotateY(180deg); }
  }

  .turn-face {
    padding:30px 26px;
    border-radius:8px;
  }
}


/* =========================================================
   V3.2 – STEP 3: PAGE FLIP POLISH
   Adds paper depth, realistic shadows, spine lighting and
   a subtle curl during the existing 3D page turn.
   ========================================================= */

.open-book {
  position:relative;
  transform-style:preserve-3d;
}

.open-book:before {
  content:"";
  position:absolute;
  left:50%;
  top:2%;
  bottom:2%;
  width:18px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    rgba(55,32,15,.18),
    rgba(255,244,211,.72) 42%,
    rgba(90,51,22,.24)
  );
  filter:blur(2px);
  pointer-events:none;
  z-index:8;
}

.open-book:after {
  content:"";
  position:absolute;
  left:50%;
  top:4%;
  bottom:4%;
  width:3px;
  transform:translateX(-50%);
  background:rgba(71,42,20,.24);
  border-radius:50%;
  pointer-events:none;
  z-index:9;
}

.page {
  position:relative;
  transform-style:preserve-3d;
  overflow:hidden;
}

.page:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:22px;
  pointer-events:none;
  z-index:2;
}

.left-page:before {
  right:0;
  background:linear-gradient(90deg,transparent,rgba(80,49,22,.16));
}

.right-page:before {
  left:0;
  background:linear-gradient(90deg,rgba(80,49,22,.16),transparent);
}

.page-turn {
  box-shadow:
    0 10px 24px rgba(30,18,8,.22),
    inset 0 0 22px rgba(70,42,18,.10);
}

.page-turn:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  z-index:5;
  pointer-events:none;
  opacity:.8;
}

.page-turn.forward:before {
  right:0;
  background:linear-gradient(90deg,transparent,rgba(48,27,10,.28));
}

.page-turn.backward:before {
  left:0;
  background:linear-gradient(90deg,rgba(48,27,10,.28),transparent);
}

.page-turn.forward {
  animation:pageFlipForwardPolished 900ms cubic-bezier(.22,.61,.36,1) forwards;
}

.page-turn.backward {
  animation:pageFlipBackwardPolished 900ms cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes pageFlipForwardPolished {
  0% {
    transform:rotateY(0deg) rotateZ(0deg) scaleX(1);
    box-shadow:0 8px 18px rgba(30,18,8,.10);
  }
  42% {
    transform:rotateY(-92deg) rotateZ(-.7deg) scaleX(.985);
    box-shadow:-18px 12px 28px rgba(30,18,8,.28);
  }
  72% {
    transform:rotateY(-145deg) rotateZ(-.25deg) scaleX(.995);
    box-shadow:-9px 8px 20px rgba(30,18,8,.20);
  }
  100% {
    transform:rotateY(-180deg) rotateZ(0deg) scaleX(1);
    box-shadow:0 4px 12px rgba(30,18,8,.08);
  }
}

@keyframes pageFlipBackwardPolished {
  0% {
    transform:rotateY(0deg) rotateZ(0deg) scaleX(1);
    box-shadow:0 8px 18px rgba(30,18,8,.10);
  }
  42% {
    transform:rotateY(92deg) rotateZ(.7deg) scaleX(.985);
    box-shadow:18px 12px 28px rgba(30,18,8,.28);
  }
  72% {
    transform:rotateY(145deg) rotateZ(.25deg) scaleX(.995);
    box-shadow:9px 8px 20px rgba(30,18,8,.20);
  }
  100% {
    transform:rotateY(180deg) rotateZ(0deg) scaleX(1);
    box-shadow:0 4px 12px rgba(30,18,8,.08);
  }
}

.turn-face {
  transform-style:preserve-3d;
}

.turn-face:after {
  box-shadow:inset 0 0 18px rgba(73,45,20,.08);
}

@media (max-width:760px) {
  .open-book:before,
  .open-book:after {
    display:none;
  }

  .page-turn.forward {
    animation-name:pageFlipMobileForwardPolished;
  }

  .page-turn.backward {
    animation-name:pageFlipMobileBackwardPolished;
  }

  @keyframes pageFlipMobileForwardPolished {
    0% { transform:rotateY(0deg) scaleX(1); }
    45% { transform:rotateY(-94deg) scaleX(.985); }
    75% { transform:rotateY(-148deg) scaleX(.995); }
    100% { transform:rotateY(-180deg) scaleX(1); }
  }

  @keyframes pageFlipMobileBackwardPolished {
    0% { transform:rotateY(0deg) scaleX(1); }
    45% { transform:rotateY(94deg) scaleX(.985); }
    75% { transform:rotateY(148deg) scaleX(.995); }
    100% { transform:rotateY(180deg) scaleX(1); }
  }
}


/* =========================================================
   V3.2 – STEP 4: iPHONE / iPAD OPTIMIZATION
   Safe-area handling, viewport sizing, touch behavior and
   compact controls without changing the book sequence.
   ========================================================= */

html, body {
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

.book-stage {
  width:100%;
  min-height:0;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}

.cover-page,
.page,
.page-turn,
.turn-face,
.controls button {
  -webkit-tap-highlight-color:transparent;
}

.cover-page,
.controls button {
  touch-action:manipulation;
}

@media (max-width:760px) {
  body {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  header {
    margin-bottom:10px;
  }

  .book-stage {
    min-height:calc(100svh - 150px);
    display:flex;
    align-items:center;
  }

  .book,
  .open-book {
    width:100%;
    max-width:100%;
  }

  .open-book {
    min-height:min(76svh, 650px);
  }

  .page {
    min-height:min(76svh, 650px);
  }

  .controls {
    padding-bottom:max(4px, env(safe-area-inset-bottom));
  }

  .controls button {
    min-height:44px;
    padding:11px 16px;
  }

  .hint {
    margin-bottom:4px;
  }
}

@media (min-width:761px) and (max-width:1100px) {
  .open-book {
    width:min(94vw,1040px);
  }
}

/* Prevent iOS text-selection artifacts during a swipe/flip. */
.book,
.book * {
  -webkit-user-select:none;
  user-select:none;
}

.page p,
.page h1,
.page .verse {
  -webkit-user-select:text;
  user-select:text;
}

/* iOS Safari can otherwise render a white rubber-band edge during touch. */
body {
  overscroll-behavior-y:none;
}


/* =========================================================
   V3.3 — Physical Book Optics
   ========================================================= */

:root{
  --book-cover-dark:#17110d;
  --book-cover-mid:#2b1d14;
  --book-gold:#b89445;
  --paper:#f4eedf;
  --paper-edge:#d8ccb0;
}

/* The open book should feel like a real bound volume. */
.book{
  isolation:isolate;
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.28));
}

.book-shell{
  position:relative;
  border-radius:10px;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.20) 0,
      rgba(255,255,255,.07) 2%,
      transparent 5%,
      transparent 95%,
      rgba(0,0,0,.18) 100%);
}

/* Subtle leather/grain impression without external assets. */
.cover-page{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(0,0,0,.20), transparent 35%),
    linear-gradient(135deg, var(--book-cover-mid), var(--book-cover-dark) 58%, #0f0b08);
  border:1px solid rgba(184,148,69,.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 10px 0 22px rgba(0,0,0,.28),
    inset -8px 0 18px rgba(0,0,0,.22),
    0 12px 26px rgba(0,0,0,.30);
}

/* Gold trim around the cover. */
.cover-page::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(184,148,69,.55);
  border-radius:5px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

/* Paper block: layered edge highlights make the pages read as a stack. */
.page{
  background:
    linear-gradient(90deg, rgba(0,0,0,.055), transparent 7%),
    linear-gradient(180deg, rgba(255,255,255,.36), transparent 9%),
    var(--paper);
  box-shadow:
    inset 0 0 0 1px rgba(120,100,65,.13),
    inset 0 0 24px rgba(108,83,38,.08),
    0 8px 18px rgba(0,0,0,.16);
}

.page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(120,95,55,.018) 0,
      rgba(120,95,55,.018) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode:multiply;
}

/* Inner binding / gutter shadow. */
.open-book::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:34px;
  transform:translateX(-50%);
  z-index:8;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.02),
    rgba(0,0,0,.16) 35%,
    rgba(255,255,255,.08) 50%,
    rgba(0,0,0,.15) 65%,
    rgba(0,0,0,.02)
  );
  opacity:.72;
}

/* Small warm page-edge hint along the outer sides. */
.open-book::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 1px rgba(115,90,45,.14),
    inset 0 -8px 18px rgba(70,45,20,.06);
}

/* More convincing turning sheet: retain the existing animation,
   but add paper curvature and depth. */
.page-turn{
  filter:drop-shadow(10px 8px 12px rgba(0,0,0,.18));
}

.turn-face{
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 12%),
    linear-gradient(180deg, rgba(255,255,255,.25), transparent 12%),
    var(--paper);
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.turn-face::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.14),
    transparent 16%,
    transparent 82%,
    rgba(0,0,0,.07)
  );
}

/* Slightly stronger spine on the closed cover. */
.book.closed::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:10px;
  z-index:20;
  border-radius:8px 0 0 8px;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.45),
    rgba(184,148,69,.20) 45%,
    rgba(255,255,255,.05)
  );
  pointer-events:none;
}

@media (max-width: 700px){
  .book{
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.25));
  }
  .open-book::before{
    width:24px;
  }
  .cover-page::after{
    inset:8px;
  }
}


/* =========================================================
   V3.3 Step 6 — Navigation & Interaction Polish
   ========================================================= */

.book-controls{
  position:relative;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:18px;
  padding:8px 12px;
  user-select:none;
}

.book-controls button{
  min-width:48px;
  min-height:44px;
  border:1px solid rgba(184,148,69,.55);
  border-radius:999px;
  background:rgba(23,17,13,.86);
  color:#f4eedf;
  box-shadow:0 5px 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.035);
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, opacity .16s ease, background .16s ease;
}

.book-controls button:active{
  transform:scale(.94);
}

.book-controls button:disabled{
  opacity:.34;
  cursor:default;
  transform:none;
}

.book-status{
  min-width:112px;
  text-align:center;
  color:rgba(244,238,223,.82);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:700px){
  .book-controls{
    margin-top:12px;
    gap:8px;
  }
  .book-controls button{
    min-width:50px;
    min-height:46px;
  }
}


/* =========================================================
   V3.3 Step 7 — Cover & Opening Refinement
   ========================================================= */

/* The closed book remains visually anchored on the right. */
.book.closed{
  perspective:1400px;
  transform-style:preserve-3d;
}

/* Give the cover a real hinge impression at the binding. */
.book.closed .cover-page{
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
}

/* Warm highlight along the hinge. */
.book.closed .cover-page::before{
  content:"";
  position:absolute;
  left:-2px;
  top:3%;
  bottom:3%;
  width:7px;
  border-radius:5px;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.50),
    rgba(184,148,69,.32),
    rgba(255,255,255,.08)
  );
  box-shadow:2px 0 7px rgba(0,0,0,.20);
  pointer-events:none;
  z-index:5;
}

/* When the existing opening animation is active, add a more natural
   depth/shadow cue without replacing its JavaScript. */
.book.opening .cover-page{
  box-shadow:
    inset 10px 0 22px rgba(0,0,0,.30),
    inset -10px 0 20px rgba(0,0,0,.20),
    18px 12px 28px rgba(0,0,0,.25);
}

/* The first spread gets a slightly stronger gutter than later pages. */
.book.open .open-book{
  box-shadow:
    0 18px 32px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(90,65,30,.08);
}

/* Gentle paper lift at the outer edges. */
.book.open .page:first-child{
  box-shadow:
    inset -12px 0 22px rgba(90,65,30,.055),
    inset 0 0 0 1px rgba(120,100,65,.13),
    0 8px 18px rgba(0,0,0,.16);
}

.book.open .page:last-child{
  box-shadow:
    inset 12px 0 22px rgba(90,65,30,.055),
    inset 0 0 0 1px rgba(120,100,65,.13),
    0 8px 18px rgba(0,0,0,.16);
}

@media (max-width:700px){
  .book.closed .cover-page::before{
    width:5px;
  }
}


/* =========================================================
   V3.3 Step 8 — Cover Presentation & Typography
   ========================================================= */

/* Cover typography: restrained, book-like, and readable. */
.cover-page{
  color:#f4eedf;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.cover-page h1,
.cover-page h2,
.cover-page .cover-title{
  letter-spacing:.10em;
  text-transform:uppercase;
}

.cover-page .cover-title{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.12em;
}

/* Gold accent used sparingly on the cover. */
.cover-page .cover-accent{
  color:var(--book-gold);
  letter-spacing:.18em;
}

/* Give the cover a subtle inset frame that reads like a finished
   bound prayer book rather than a flat card. */
.cover-page{
  outline:1px solid rgba(184,148,69,.18);
  outline-offset:-6px;
}

/* Paper typography: calmer reading rhythm. */
.page{
  color:#2d281f;
}

.page h1,
.page h2,
.page h3{
  font-family:Georgia, "Times New Roman", serif;
  color:#2a241b;
  letter-spacing:.02em;
}

.page p{
  line-height:1.72;
}

@media (max-width:700px){
  .page p{
    line-height:1.62;
  }
}


/* V3.3 Step 9 — reading details */
.page {
  position: relative;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(70,40,15,.05));
  mix-blend-mode: multiply;
  opacity: .55;
}

.page-number {
  position: absolute;
  bottom: 1.05rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .16em;
  color: rgba(82, 57, 35, .72);
  min-width: 2.5rem;
  text-align: center;
}

.page-number::before,
.page-number::after {
  content: "—";
  margin: 0 .42rem;
  opacity: .45;
}

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: .8rem auto 1.15rem;
  color: rgba(150, 112, 52, .8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
}

.section-ornament::before,
.section-ornament::after {
  content: "";
  width: 2.7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,112,52,.55));
}

.section-ornament::after {
  background: linear-gradient(90deg, rgba(150,112,52,.55), transparent);
}

.reading-text {
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .page-number {
    bottom: .7rem;
    font-size: .66rem;
  }

  .section-ornament {
    margin-top: .55rem;
    margin-bottom: .85rem;
  }
}


/* V3.3 Step 10 — finished-page reading polish */
.page {
  overflow: hidden;
}

.page .page-content,
.page .content,
.page article {
  max-width: 100%;
}

.page h1,
.page h2,
.page h3 {
  text-wrap: balance;
  hyphens: none;
}

.page p {
  max-width: 38em;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.page .prayer,
.page .verse,
.page blockquote {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}

.page blockquote {
  position: relative;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.page blockquote::before {
  content: "“";
  position: absolute;
  left: .05rem;
  top: -.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  line-height: 1;
  color: rgba(150, 112, 52, .48);
}

@media (max-width: 700px) {
  .page p {
    max-width: none;
  }

  .page blockquote {
    padding-left: 1rem;
    padding-right: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-turn,
  .cover-page,
  .book,
  .page {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* V3.3 Step 11 — subtle book details and reading focus */
.book-shell {
  position: relative;
}

.book-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  width: 74%;
  height: 1.2rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 70%);
  filter: blur(7px);
  pointer-events: none;
  z-index: -1;
}

.page {
  isolation: isolate;
}

.page::after {
  content: "";
  position: absolute;
  inset: .75rem;
  border: 1px solid rgba(125, 91, 43, .12);
  pointer-events: none;
  z-index: 0;
}

.page > * {
  position: relative;
  z-index: 1;
}

.page-number {
  letter-spacing: .2em;
  opacity: .82;
}

@media (max-width:700px) {
  .book-shell::after {
    width: 82%;
    bottom: -.75rem;
  }
  .page::after {
    inset: .5rem;
  }
}


/* V3.3 Step 12 — quiet evening atmosphere */
.book-shell {
  position: relative;
}

.book-shell::before {
  content: "";
  position: absolute;
  inset: -3%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,248,225,.10), transparent 62%);
  filter: blur(18px);
  opacity: .65;
  z-index: -2;
}

.page {
  background-image:
    linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,.025)),
    repeating-linear-gradient(
      0deg,
      rgba(100,70,35,.018) 0,
      rgba(100,70,35,.018) 1px,
      transparent 1px,
      transparent 4px
    );
}

.page h1,
.page h2,
.page h3 {
  letter-spacing: .025em;
}

.section-ornament {
  letter-spacing: .08em;
}

@media (max-width:700px) {
  .book-shell::before {
    inset: -5%;
    filter: blur(14px);
  }
}


/* =========================================================
   V3.3 Step 13 — Safari / iOS stability repair
   ========================================================= */

/* The application uses .book, not .book-shell. */
.book {
  position: relative;
  flex: 0 0 auto;
}

/* Never let a hidden open-book layer cover the closed cover. */
.book.closed .open-book {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.book.opening .open-book,
.book.open .open-book {
  visibility: visible;
  pointer-events: auto;
}

.book.closed .cover-page {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.book.opening .cover-page {
  visibility: visible;
  pointer-events: none;
}

.book.open .cover-page {
  pointer-events: none;
}

/* iOS Safari: use the dynamic viewport but retain a safe minimum. */
@supports (height: 100svh) {
  body {
    min-height: 100svh;
  }

  .app {
    min-height: 100svh;
  }
}

@media (max-width: 760px) {
  .book-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  .book,
  .book.closed {
    height: min(68svh, 620px);
    min-height: 390px;
    max-height: calc(100svh - 190px);
  }

  .cover-page {
    display: flex;
  }

  .open-book {
    height: 100%;
    min-height: 0;
  }

  .page {
    min-height: 100%;
  }
}

@media (min-width: 761px) {
  .book,
  .book.closed {
    max-height: calc(100svh - 210px);
  }
}

/* Avoid Safari treating the whole book as a native draggable control. */
.cover-page {
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-drag: none;
}

/* Keep the turn layer completely out of the hit-testing stack when idle. */
.page-turn:not(.active) {
  display: none !important;
}

/* =========================================================
   V3.3 Step 14 — iPhone / iPad SAFE RENDER MODE
   Safari on iOS/iPadOS can fail to paint complex nested 3D
   compositing layers. On touch devices we therefore use a
   guaranteed 2D presentation while keeping the same book
   sequence and controls.
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  html, body {
    background: #17110d;
  }

  .book-stage {
    perspective: none !important;
    transform: none !important;
    filter: none !important;
  }

  .book,
  .book.closed {
    transform: none !important;
    transform-style: flat !important;
    filter: none !important;
    perspective: none !important;
    isolation: auto;
  }

  .cover-page,
  .open-book,
  .page,
  .page-turn,
  .turn-face {
    transform-style: flat !important;
    backface-visibility: visible !important;
  }

  .cover-page {
    transform: none !important;
    will-change: opacity;
    transition: opacity 420ms ease !important;
  }

  .book.closed .cover-page {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .book.opening .cover-page {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .book.open .cover-page {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .open-book {
    transform: none !important;
    filter: none !important;
    transition: opacity 420ms ease !important;
  }

  .book.closed .open-book {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .book.opening .open-book {
    display: grid !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .book.open .open-book {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .page {
    transform: none !important;
    filter: none !important;
    overflow: auto;
  }

  /* Disable the 3D turn layer on iOS/iPadOS. The spread itself
     changes after the same 850 ms navigation interval. */
  .page-turn,
  .page-turn.active,
  .book.is-turning .page-turn {
    display: none !important;
    animation: none !important;
    transform: none !important;
  }

  .book.is-turning .page {
    opacity: .96;
  }

  .open-book::before,
  .open-book::after,
  .book.closed::before {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: none) and (pointer: coarse) {
  .cover-page,
  .open-book {
    transition: none !important;
  }
}


/* =========================================================
   V3.3 Step 15 — HARD iPad SAFE MODE
   iPadOS may report desktop Safari metrics, so the touch-device
   media query alone is not sufficient. This final layer is intentionally
   simple: no 3D transforms, filters or page-turn compositing on iPad.
   ========================================================= */
html.ipad-safe .book-stage { perspective:none !important; transform:none !important; filter:none !important; }
html.ipad-safe .book, html.ipad-safe .book.closed { transform:none !important; transform-style:flat !important; filter:none !important; perspective:none !important; isolation:auto !important; }
html.ipad-safe .cover-page, html.ipad-safe .open-book, html.ipad-safe .page, html.ipad-safe .page-turn, html.ipad-safe .turn-face { transform:none !important; transform-style:flat !important; backface-visibility:visible !important; filter:none !important; }
html.ipad-safe .cover-page { transition:opacity .15s ease !important; }
html.ipad-safe .book.closed .cover-page { display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
html.ipad-safe .book.opening .cover-page, html.ipad-safe .book.open .cover-page { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
html.ipad-safe .book.closed .open-book { display:none !important; visibility:hidden !important; opacity:0 !important; }
html.ipad-safe .book.opening .open-book, html.ipad-safe .book.open .open-book { display:grid !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
html.ipad-safe .page-turn, html.ipad-safe .page-turn.active { display:none !important; animation:none !important; }
html.ipad-safe .book-shell::before, html.ipad-safe .book-shell::after { display:none !important; }

/* Also cover iPadOS desktop-mode reports by screen width. */
@media only screen and (min-width:768px) and (max-width:1400px) {
  .book-stage { perspective:none !important; }
  .book, .book.closed { transform:none !important; transform-style:flat !important; filter:none !important; perspective:none !important; }
  .cover-page, .open-book, .page, .page-turn, .turn-face { transform-style:flat !important; backface-visibility:visible !important; }
  .cover-page { transform:none !important; }
  .book.closed .cover-page { display:flex !important; visibility:visible !important; opacity:1 !important; }
  .book.open .cover-page { display:none !important; visibility:hidden !important; opacity:0 !important; }
  .book.closed .open-book { display:none !important; visibility:hidden !important; opacity:0 !important; }
  .book.open .open-book { display:grid !important; visibility:visible !important; opacity:1 !important; }
  .page-turn, .page-turn.active { display:none !important; animation:none !important; }
}

/* =========================================================
   V3.3 Step 16 — Book size / iPad landscape proportions
   The iPad version is now intentionally larger so the book
   uses the available screen area instead of appearing small.
   ========================================================= */
@media only screen and (min-width:761px) {
  .book,
  .book.closed {
    height: min(80svh, 780px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 150px) !important;
  }

  .book.closed {
    width: min(620px, 46vw) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .book.open {
    width: min(1280px, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* iPad-safe mode uses the same larger physical dimensions. */
html.ipad-safe .book,
html.ipad-safe .book.closed {
  height: min(80svh, 780px) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 150px) !important;
}

html.ipad-safe .book.closed {
  width: min(620px, 46vw) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

html.ipad-safe .book.open {
  width: min(1280px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media only screen and (min-width:768px) and (max-width:1400px) {
  .book,
  .book.closed {
    height: min(80svh, 780px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 150px) !important;
  }

  .book.closed {
    width: min(620px, 46vw) !important;
  }

  .book.open {
    width: min(1280px, 92vw) !important;
  }
}

/* =========================================================
   V3.3 Step 17 — Open spread fills the iPad landscape screen
   The closed cover keeps its larger presentation. Once opened,
   the complete two-page spread expands independently so it does
   not inherit the narrower app/book width used for the cover.
   ========================================================= */
@media only screen and (min-width:761px) {
  .app {
    width: 100% !important;
    max-width: none !important;
  }

  .book.open {
    width: min(1400px, 94vw) !important;
    height: min(76svh, 820px) !important;
    max-height: calc(100svh - 150px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .book.open .open-book {
    width: 100% !important;
    height: 100% !important;
  }
}

@media only screen and (min-width:768px) and (max-width:1400px) {
  .book.open {
    width: 94vw !important;
    height: min(76svh, 820px) !important;
    max-height: calc(100svh - 150px) !important;
  }
}

html.ipad-safe .book.open {
  width: min(1400px, 94vw) !important;
  height: min(76svh, 820px) !important;
  max-height: calc(100svh - 150px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   V3.3 Step 18 — Full-width iPhone cover / stable iPad opening
   ========================================================= */
@media only screen and (max-width:760px) {
  .book.closed, .book.opening, .book.open {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .book.closed .cover-page {
    width: 100% !important;
    max-width: none !important;
  }
}

@media only screen and (min-width:761px) and (max-width:1400px) {
  .book.closed { width: min(620px, 46vw) !important; }
  .book.opening, .book.open {
    width: 94vw !important;
    height: min(76svh, 820px) !important;
    max-height: calc(100svh - 150px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .book.opening .open-book, .book.open .open-book {
    width: 100% !important;
    height: 100% !important;
  }
}

html.ipad-safe .book.closed { width: min(620px, 46vw) !important; }
html.ipad-safe .book.opening, html.ipad-safe .book.open {
  width: 94vw !important;
  height: min(76svh, 820px) !important;
  max-height: calc(100svh - 150px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   V3.3 Step 19 — Stable opening dimensions
   ========================================================= */
@media only screen and (min-width:761px) and (max-width:1400px) {
  .book { transition: none !important; }
  .book.closed { width: min(620px, 46vw) !important; }
  .book.opening,
  .book.open {
    width: 94vw !important;
    height: min(76svh, 820px) !important;
    max-height: calc(100svh - 150px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .book.opening .cover-page {
    width: min(620px, 46vw) !important;
    left: auto !important;
    right: 0 !important;
  }
  .book.opening .open-book,
  .book.open .open-book { width:100% !important; height:100% !important; }
}
html.ipad-safe .book { transition:none !important; }
html.ipad-safe .book.opening,
html.ipad-safe .book.open {
  width:94vw !important;
  height:min(76svh,820px) !important;
  max-height:calc(100svh - 150px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html.ipad-safe .book.opening .cover-page {
  width:min(620px,46vw) !important;
  left:auto !important;
  right:0 !important;
}
@media only screen and (max-width:760px) {
  .book { transition:none !important; }
  .book.closed,.book.opening,.book.open { width:100% !important; }
  .book.closed .cover-page,.book.opening .cover-page {
    width:100% !important; left:0 !important; right:auto !important;
  }
}

/* V3.3 Step 21 — Bible verse opening pages */
.page.bible-page {
  overflow-y:auto;
}
.page.bible-page h1 {
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: .025em;
}
.page.bible-page p {
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.42;
  margin-bottom: 10px;
}
.page.bible-page p:nth-of-type(odd) {
  margin-top: 13px;
}
.page.bible-page p:nth-of-type(2n) {
  font-style: italic;
}
.page.bible-page p:nth-of-type(2n+1) {
  font-weight: 500;
}
@media (max-width: 760px) {
  .page.bible-page {
    padding: 25px 22px 42px;
  }
  .page.bible-page h1 {
    font-size: 24px;
  }
  .page.bible-page p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 9px;
  }
}


/* =========================================================
   V3.3 Step 24 — Final responsive layout and balanced reading
   ========================================================= */
@media only screen and (max-width:760px) {
  html, body { width:100%; min-width:0; overflow-x:hidden; }
  body { box-sizing:border-box; }
  .app { width:100% !important; max-width:none !important; box-sizing:border-box; }
  .book-stage { width:100% !important; max-width:none !important; box-sizing:border-box; }
  .book, .book.closed, .book.opening, .book.open {
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box;
  }
  .book, .book.closed, .book.opening, .book.open {
    height:min(70svh, calc((100vw - 24px) * 1.45)) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .book.closed .cover-page, .book.opening .cover-page {
    width:100% !important; left:0 !important; right:0 !important;
    box-sizing:border-box;
  }
  .book.open .open-book, .book.opening .open-book {
    width:100% !important; height:100% !important;
    grid-template-columns:1fr !important;
  }
  .book.open .right-page, .book.opening .right-page { display:none !important; }
  .book.open .left-page, .book.opening .left-page { grid-column:1 !important; width:100% !important; }
  .page { padding:30px 26px 76px !important; overflow:hidden !important; }
  .page h1 { font-size:clamp(22px,6vw,30px) !important; margin-bottom:18px !important; }
  .page p { font-size:clamp(15px,4.1vw,18px) !important; line-height:1.55 !important; margin-bottom:13px !important; }
  .page.bible-page p { font-size:clamp(14px,3.8vw,17px) !important; line-height:1.5 !important; margin-bottom:12px !important; }
  .page-number { bottom:28px !important; }
}

/* Keep iPad landscape as a two-page book. */
@media only screen and (min-width:761px) {
  .book.open .right-page { display:block; }
}

/* Prevent the last paragraph from colliding with the page number. */
.page { padding-bottom:72px; }


/* V3.3 Step 25 — final illustrated Bible page */
.final-page-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eee9dc;}
.final-bible-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;}
.final-page-art::after{content:"";position:absolute;inset:18px;border:1px solid rgba(92,70,42,.13);pointer-events:none;}
@media(max-width:760px){.final-page-art::after{inset:12px;}}


/* V3.3.26 — final Bible page is an image only, not a book page */
.final-view{
  position:absolute;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
}
.final-view img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  margin:0;
  border:0;
  box-shadow:none;
}
.book:has(.final-view[style*="flex"]) .open-book{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
.book:has(.final-view[style*="flex"]) .open-book::before,
.book:has(.final-view[style*="flex"]) .open-book::after,
.book:has(.final-view[style*="flex"]) .spine{
  display:none !important;
}
@media(max-width:760px){
  .final-view{inset:0;}
  .final-view img{width:100%;height:100%;object-fit:contain;}
}


/* V3.3.27 — approved final image placement: image inside the last page with breathing room */
.final-view{
  position:absolute !important;
  inset:24px 28px 30px !important;
  z-index:20 !important;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.final-view img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
@media(max-width:760px){
  .final-view{inset:24px 26px 30px !important;}
}


/* =========================================================
   V3.3.28 — Closed cover uses one complete portrait page
   The cover must never be reduced to a half-page presentation.
   It keeps the same portrait proportions as a single reading page.
   ========================================================= */
@media only screen and (min-width:761px) {
  .book.closed {
    width: min(620px, 72vw) !important;
    height: min(80svh, 780px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .book.closed .cover-page {
    width:100% !important;
    left:0 !important;
    right:0 !important;
  }
}

html.ipad-safe .book.closed {
  width: min(620px, 72vw) !important;
  height: min(80svh, 780px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html.ipad-safe .book.closed .cover-page {
  width:100% !important;
  left:0 !important;
  right:0 !important;
}

@media only screen and (max-width:760px) {
  .book.closed {
    width:calc(100vw - 24px) !important;
    height:min(70svh, calc((100vw - 24px) * 1.45)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .book.closed .cover-page {
    width:100% !important;
    left:0 !important;
    right:0 !important;
  }
}

/* =========================================================
   V3.3.31 — today's clean pencil-gray Bible / prayer layout
   ========================================================= */
.page{color:#555653 !important;overflow:hidden !important;}
.page h1,.page p,.page .verse,.page-kicker,.page-subtitle,.why-label{color:#555653 !important;}
.page h1{font-family:Georgia,"Times New Roman",serif !important;font-style:normal !important;font-weight:600 !important;letter-spacing:.01em !important;}
.page p,.page .verse,.page-subtitle{font-family:Georgia,"Times New Roman",serif !important;font-style:normal !important;}
.page-subtitle{font-size:clamp(15px,1.45vw,18px);font-weight:600;margin:-10px 0 18px;line-height:1.35;}
.why-label{font-weight:700;margin-top:18px !important;margin-bottom:10px !important;}
.page.bible-page{padding-top:clamp(30px,4vw,52px) !important;padding-bottom:58px !important;}
.page.bible-page h1{font-size:clamp(24px,2.7vw,36px) !important;margin-bottom:14px !important;}
.page.bible-page p{font-size:clamp(14px,1.35vw,17px) !important;line-height:1.48 !important;margin-bottom:11px !important;}
.page.bible-page .verse{font-size:clamp(15px,1.45vw,18px) !important;line-height:1.48 !important;margin:10px 0 16px !important;padding-left:14px !important;}
.book-page-art{position:absolute;inset:34px 38px 48px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.book-page-art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(.92);opacity:.94;}
.final-view{display:none !important;}
@media(max-width:760px){
 .page.bible-page{padding:28px 26px 58px !important;}
 .page.bible-page h1{font-size:clamp(23px,6.4vw,30px) !important;}
 .page.bible-page .page-subtitle{font-size:clamp(14px,4vw,17px) !important;margin-bottom:14px !important;}
 .page.bible-page p{font-size:clamp(13px,3.55vw,16px) !important;line-height:1.43 !important;margin-bottom:9px !important;}
 .page.bible-page .verse{font-size:clamp(14px,3.75vw,17px) !important;line-height:1.45 !important;margin:8px 0 13px !important;}
 .book-page-art{inset:28px 26px 48px;}
}

/* =========================================================
   V3.3.32 — integrated pencil illustrations, no picture frames
   ========================================================= */
.book-page-art{
  position:absolute !important;
  inset:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.book-page-art::before,.book-page-art::after{display:none !important;content:none !important;}
.book-page-art img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  filter:grayscale(1) contrast(.98) !important;
  opacity:.98 !important;
  mix-blend-mode:multiply;
}
/* Page 1: the uploaded family drawing becomes the paper artwork itself. */
.page:has(.book-page-art img[src*="family-page-v334"]){
  padding:0 !important;
  background:#eee9dc !important;
}
.page:has(.book-page-art img[src*="family-page-v334"]) .book-page-art{
  inset:0 !important;
}
.page:has(.book-page-art img[src*="family-page-v334"]) .book-page-art img{
  object-fit:cover !important;
  object-position:center !important;
}
/* Pure illustration pages are transparent pencil art on the real page paper. */
.page:has(.book-page-art img[src*="biblical-transition"]),
.page:has(.book-page-art img[src*="biblical-closing"]){
  background:#eee9dc !important;
}
.page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art,
.page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art{
  inset:34px 34px 54px !important;
}
.page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art img,
.page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art img{
  object-fit:contain !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
.verse-page-art{
  width:100%;
  flex:0 0 auto;
  margin-top:auto;
  min-height:110px;
  max-height:190px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
.verse-page-art img{
  display:block;
  width:100%;
  height:100%;
  max-height:190px;
  object-fit:contain;
  object-position:center bottom;
  border:0;
  background:transparent;
  filter:none;
  opacity:1;
}
.page.bible-page{
  display:flex !important;
  flex-direction:column !important;
}
.page.bible-page .page-number{margin-top:8px;}
@media(max-width:760px){
  .verse-page-art{min-height:92px;max-height:150px;margin-top:4px;}
  .verse-page-art img{max-height:150px;}
  .page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art,
  .page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art{inset:22px 20px 46px !important;}
}

/* =========================================================
   V3.3.33 — show every illustration completely, no cropping
   ========================================================= */
/* Full-page artwork: keep the complete drawing visible inside the paper. */
.book-page-art{
  inset:18px 18px 46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.book-page-art img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
/* Page 1: never crop the family illustration. */
.page:has(.book-page-art img[src*="family-page-v334"]) .book-page-art{
  inset:8px 8px 42px !important;
}
.page:has(.book-page-art img[src*="family-page-v334"]) .book-page-art img{
  object-fit:contain !important;
  object-position:center center !important;
}
/* Illustration-only pages also stay fully visible. */
.page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art,
.page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art{
  inset:20px 24px 50px !important;
}
/* Verse illustrations: smaller, complete, and integrated into the paper. */
.verse-page-art{
  width:86% !important;
  min-height:0 !important;
  height:clamp(105px,15vh,165px) !important;
  max-height:165px !important;
  margin:10px auto 0 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  align-items:center !important;
}
.verse-page-art img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
@media(max-width:760px){
  .book-page-art{inset:10px 10px 40px !important;}
  .page:has(.book-page-art img[src*="family-page-v334"]) .book-page-art{inset:4px 4px 38px !important;}
  .page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art,
  .page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art{inset:12px 14px 42px !important;}
  .verse-page-art{
    width:82% !important;
    height:clamp(82px,13vh,125px) !important;
    max-height:125px !important;
    margin-top:6px !important;
  }
}

/* =========================================================
   V3.3.35 — clean text-free pencil art integrated into paper
   ========================================================= */
.verse-page-art{
  width:92% !important;
  height:auto !important;
  min-height:120px !important;
  max-height:205px !important;
  flex:1 1 155px !important;
  margin:8px auto 4px !important;
  overflow:visible !important;
  align-items:flex-end !important;
}
.verse-page-art img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:205px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:multiply !important;
}
.page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art,
.page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art{
  inset:18px 22px 48px !important;
}
.page:has(.book-page-art img[src*="biblical-transition"]) .book-page-art img,
.page:has(.book-page-art img[src*="biblical-closing"]) .book-page-art img{
  background:transparent !important;
  mix-blend-mode:multiply !important;
  filter:none !important;
}
@media(max-width:760px){
  .verse-page-art{
    width:90% !important;
    min-height:90px !important;
    max-height:150px !important;
    flex:1 1 115px !important;
    margin:5px auto 2px !important;
  }
  .verse-page-art img{max-height:150px !important;}
}