/* Reader page — chapter flip on top of the self-contained page turner.
   Relies on the palette/fonts from main.css (loaded first). */

.reader-body .site-footer { display: none; }
.book-container { position: relative; }

/* top bar — spans wider than the page's text column, as the old reader's
   chapters icon and close cross sit near the window edges. */
/* Deliberately left under the scrim: while the chapter list is open every
   click outside it — bar included — puts the list away. */
.reader-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; width: min(1400px, 95vw); }
.toc-toggle { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 8px; }
.toc-toggle:hover { color: var(--ink); }
.reader-book-title { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-align: center; flex: 1; padding: 0 16px; }
.reader-close { font-size: 1.9rem; line-height: 1; color: var(--coral-deep); }
.reader-close:hover { color: var(--ink); }

/* flip stage */
.reader-stage {
  position: relative;
  height: calc(100vh - 200px);
  min-height: 460px;
  margin-top: 8px;
  perspective: 2600px;
}
.reader-pages { position: absolute; inset: 0; transform-style: preserve-3d; }

.r-page { position: absolute; inset: 0; background: var(--paper); display: none; }
.r-page.is-current { display: block; z-index: 1; }
.r-page.measure { display: block; z-index: -1; }

/* ---- half-leaf page turn (right half folds over the centre spine) ---- */
.flip-wrap { position: absolute; inset: 0; z-index: 6; perspective: 2600px; }
.flip-static-left { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; background: var(--paper); z-index: 1; }
.flip-leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2;
}
.flip-leaf.turned { transform: rotateY(-180deg); }
.flip-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: var(--paper); box-shadow: 0 0 22px rgba(40, 32, 18, 0); transition: box-shadow 1.3s ease; }
.flip-leaf.turned .flip-front { box-shadow: -22px 0 40px rgba(40, 32, 18, 0.18); }
.flip-back { transform: rotateY(180deg); }
.flip-inner { position: absolute; top: 0; height: 100%; width: 200%; }
.flip-front .flip-inner { left: -100%; }
.flip-back .flip-inner { left: 0; }
.flip-static-left .flip-inner { left: 0; }
.flip-inner .r-page__inner { overflow: hidden; }
.r-page__inner { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 8px 7%; -webkit-overflow-scrolling: touch; }
.r-page__inner::-webkit-scrollbar { width: 4px; }
.r-page__inner::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* chapter typography */
.chapter { max-width: 760px; margin: 0 auto; padding: 22px 0 30px; }
/* Just the story's name, set the way jhmira.com sets it: Cinzel Decorative
   Bold in title case, so the initial stands full height over small caps
   ("Dawn" reads as DAWN). No rule above it, and no heavier weight — the old
   title is not fat at the front. */
.chapter__title {
  font-family: var(--font-display); font-weight: 700; text-transform: none;
  letter-spacing: 0.01em; text-align: center; font-size: clamp(1.9rem, 4vw, 2.9rem);
  color: var(--ink); margin: 0 0 44px; position: relative;
}
.chapter__body { font-family: var(--font-sans); font-size: 1.18rem; line-height: 1.85; color: var(--ink-soft); text-align: justify; display: flow-root; }
.chapter__body p { margin: 0 0 1em; }
/* A paragraph carried over a page break: the half that runs on is justified
   right to the foot of the page, and the half that resumes overleaf does not
   open like a new paragraph. */
.chapter__body p.para-split { margin-bottom: 0; text-align-last: justify; }
.chapter__body p.para-cont { text-indent: 0; }
.chapter--open > .chapter__body > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 700; font-size: 3.6em; line-height: 0.86; padding: 6px 14px 0 0; color: var(--gold); }
.chapter__body h2, .chapter__body h3 { font-family: var(--font-serif); color: var(--ink); margin: 1.4em 0 0.5em; }
.chapter__body blockquote { border-left: 2px solid var(--coral); margin: 1.3em 0; padding: 4px 0 4px 22px; font-family: var(--font-serif); font-style: italic; color: var(--ink); }
.chapter__body img { max-width: 100%; height: auto; border-radius: 2px; }
/* Width comes from the size class in main.css; these only set the wrap. */
.chapter__body .richtext-image.left  { float: left;  margin: 6px 28px 14px 0; }
.chapter__body .richtext-image.right { float: right; margin: 6px 0 14px 28px; }
.chapter__body .richtext-image.full-width { display: block; width: 100%; margin: 22px auto; }
.chapter__body .richtext-image.centred { margin-block: 22px; }

/* nav arrows — long, heavy-stroked coral arrows sitting just outside the text
   column rather than out at the window edge, so they are easy to see and easy
   to hit. The min() keeps them on screen on narrow windows. */
.bb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--coral-deep); z-index: 1010;
  display: grid; place-items: center;
  padding: 10px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.bb-nav svg { display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Stays coral throughout — the only colour change an arrow makes is going
   grey at the end of the book it points towards. */
.bb-nav:hover { color: var(--coral); }
.bb-nav--prev { right: min(calc(50% + 452px), calc(100% - 150px)); }
.bb-nav--next { left: min(calc(50% + 452px), calc(100% - 150px)); }
.bb-nav--prev:hover { transform: translate(-4px, -50%); }
.bb-nav--next:hover { transform: translate(4px, -50%); }
.bb-nav.is-end,
.bb-nav.is-end:hover {
  color: var(--line-2);
  cursor: default;
  pointer-events: none;
  transform: translateY(-50%);
}

/* TOC drawer */
/* The shadow is only painted once the drawer is out, or it bleeds down the
   left edge of the closed page. */
.reader-toc { position: fixed; top: 0; left: 0; height: 100%; width: 330px; max-width: 84vw; background: var(--paper); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform 0.32s ease; z-index: 300; padding: 86px 38px; overflow-y: auto; }
.reader-toc.is-open { transform: none; box-shadow: 18px 0 40px rgba(40, 32, 18, 0.10); }
/* Dimmed page behind the open drawer — it says the list is a layer you can
   step back out of, and clicking it does exactly that. */
.reader-scrim {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(32, 32, 30, 0.26);
}
.reader-scrim[hidden] { display: none; }

/* The drawer closes from its own top-right corner. */
.reader-toc__close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;                 /* a comfortable tap target */
  display: grid; place-items: center;
  font-size: 2rem; line-height: 1; color: var(--coral-deep);
}
.reader-toc__close:hover { color: var(--ink); }
.reader-toc__close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.reader-toc__title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: 0.01em; font-size: 1.2rem; margin: 0 0 26px; }
.menu-toc { list-style: none; margin: 0; padding: 0; }
.menu-toc li { cursor: pointer; color: var(--coral-deep); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding: 12px 0 12px 16px; border-left: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.menu-toc li:hover { color: var(--ink); }
.menu-toc li.is-current { color: var(--ink); border-left-color: var(--coral); }

/* page-progress line — a hairline rule with an open ring riding down it. */
.reader-progress { position: absolute; top: 64px; bottom: 64px; right: 30px; width: 1px; background: rgba(32, 32, 30, 0.55); }
.reader-progress__dot { position: absolute; left: -6px; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(32, 32, 30, 0.75); transition: top 0.4s ease; }

@media (max-width: 680px) {
  .reader-stage { height: calc(100vh - 170px); }
  /* No room beside the text on a phone: the arrows tuck back to the edges and
     the text keeps clear of them, and the progress rule steps aside. */
  .r-page__inner { padding: 8px 46px; }
  .bb-nav { padding: 4px; }
  .bb-nav svg { width: 36px; height: 14px; }
  .bb-nav--prev { right: auto; left: 0; }
  .bb-nav--next { left: auto; right: 0; }
  .reader-progress { display: none; }
}

/* no entrance animation during a flip (prevents pre-flip fade-in) */
.flip-wrap .chapter, .r-page .chapter { animation: none; }


/* ---- reader bar buttons: bookmark, resume, reading mode ---- */
.reader-tools { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.reader-btn, .reader-mode {
  background: none; border: 1px solid var(--line-2); color: var(--ink-soft);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 6px 14px; border-radius: 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.reader-btn:hover, .reader-mode:hover { border-color: var(--coral); color: var(--coral-deep); }
.reader-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
/* A saved bookmark reads as a filled ribbon. */
.reader-btn.is-marked { border-color: var(--coral); color: var(--coral-deep); }
.reader-btn.is-marked svg { fill: currentColor; }
#rd-resume { border-color: var(--coral); color: var(--coral-deep); }

/* in scroll mode the current chapter scrolls vertically inside the stage */
.reader-stage--scroll .r-page__inner { overflow-y: auto; }
.reader-stage--scroll .reader-progress { display: none; }

/* mobile: smaller chapter title so it shares its page with the opening text */
@media (max-width: 680px) {
  .chapter__title { font-size: 1.6rem; margin-bottom: 26px; }
  .chapter { padding-top: 14px; }
  .chapter__body { font-size: 1.06rem; }

  /* Three buttons plus the title do not fit one phone-width row: the bookmark
     keeps its ribbon and drops its label, and the title takes its own line
     below the controls. */
  .reader-tools { gap: 5px; margin-right: 8px; }
  .reader-btn, .reader-mode { padding: 5px 8px; font-size: 0.6rem; letter-spacing: 0.06em; }
  #rd-mark-label { display: none; }
  #rd-mark { padding: 5px 7px; }
  .reader-bar { flex-wrap: wrap; row-gap: 8px; }
  .reader-book-title {
    order: 5;
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.82rem;
  }
}

/* keep reader images short enough to share a page with their text */
.reader-stage .imgtext-fig img { width: auto; max-width: 100%; max-height: 52vh; height: auto; }