/* Books: the library (/books) and the page-turning reader (/books/<slug>). */

/* ---------------------------------------------------------------- page-flip base rules
   (copied from the library: it used to inject them as a <style> element, which the site's CSP does not allow) */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); -ms-touch-action: pan-y; touch-action: pan-y; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- library */
.book-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 34px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.book-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.book-card h2 { margin: 0 0 .15em; font-size: 1.3rem; line-height: 1.25; }
.book-card h2 a { color: inherit; text-decoration: none; }
.book-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.book-meta { display: flex; flex-wrap: wrap; gap: .1em .8em; margin: 0 0 .5rem; color: var(--muted); font-size: .95rem; }
.book-summary { margin: 0 0 .7rem; color: var(--muted); font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.book-card .text-link { margin-top: auto; }

/* the cover looks like a closed book: a hinge shadow on the spine side and a soft lift on hover */
.book-cover { position: relative; display: block; width: 100%; margin-bottom: 1rem; border-radius: 3px 7px 7px 3px; background: var(--lav); box-shadow: 0 1px 2px rgba(32, 26, 56, .25), 0 14px 26px -12px rgba(43, 28, 89, .5); transition: transform .25s ease, box-shadow .25s ease; }
.book-cover img { display: block; width: 100%; height: auto; border-radius: inherit; }
.book-cover::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6%; pointer-events: none; border-radius: inherit; }
.book-cover[dir="rtl"] { border-radius: 7px 3px 3px 7px; }
.book-cover[dir="rtl"]::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(255, 255, 255, .22) 28%, rgba(0, 0, 0, .06) 55%, rgba(0, 0, 0, 0)); }
.book-cover[dir="ltr"]::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(255, 255, 255, .22) 28%, rgba(0, 0, 0, .06) 55%, rgba(0, 0, 0, 0)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-card:hover .book-cover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 2px 4px rgba(32, 26, 56, .25), 0 22px 32px -14px rgba(43, 28, 89, .55); }
}

/* ---------------------------------------------------------------- reader */
.reader-wrap { padding-block: clamp(12px, 2.4vw, 28px) clamp(14px, 2.4vw, 26px); background: radial-gradient(130% 100% at 50% 0%, #3d2c78 0%, #2b1c59 52%, #1d1340 100%); color: #fff; }
.reader { position: relative; max-width: 1240px; margin-inline: auto; }
.reader-stage { position: relative; }
.reader-book { direction: ltr; width: 100%; height: clamp(300px, calc(100vh - 290px), 900px); transition: opacity .35s ease; opacity: 0; }
@supports (height: 100svh) { .reader-book { height: clamp(300px, calc(100svh - 290px), 900px); } }
.reader[data-state="ready"] .reader-book { opacity: 1; }
.reader-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #d9d0f5; font-size: 1.05rem; pointer-events: none; }
.reader[data-state="ready"] .reader-status { display: none; }

/* no `position` here: the library's .stf__item { position: absolute } must win, otherwise the page being turned is laid out below the one under it */
.rd-page { overflow: hidden; background: #fbfaf6; }
.rd-page img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.rd-page img.is-loaded { opacity: 1; }
.rd-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rd-page.--left::after { background: linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 4%, rgba(0, 0, 0, 0) 10%); }
.rd-page.--right::after { background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 4%, rgba(0, 0, 0, 0) 10%); }
.reader[data-mode="portrait"] .rd-page::after { display: none; }
.rd-blank { background: #fbfaf6; }

/* arrows on both sides of the book (wide screens); the same two actions are in the bar below on narrow ones */
.reader-nav { display: none; position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .15s, opacity .2s; }
.reader-nav svg { width: 26px; height: 26px; margin: auto; display: block; }
.reader-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.reader-nav:disabled { opacity: .25; cursor: default; }
.reader-nav-prev { inset-inline-start: -4px; }
.reader-nav-next { inset-inline-end: -4px; }
@media (min-width: 1000px) {
  .reader-nav { display: block; }
  .reader-nav-prev { inset-inline-start: -62px; }
  .reader-nav-next { inset-inline-end: -62px; }
  .reader .reader-step { display: none; }
}
@media (min-width: 1000px) and (max-width: 1340px) { .reader { padding-inline: 62px; } .reader-nav-prev { inset-inline-start: 0; } .reader-nav-next { inset-inline-end: 0; } }
.reader[dir="rtl"] [data-act="next"] svg, .reader[dir="ltr"] [data-act="prev"] svg { transform: scaleX(-1); }

.reader-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: 12px; }
.reader-range { width: 100%; height: 28px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.reader-range:disabled { opacity: .4; cursor: default; }
.reader-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px clamp(6px, 1.6vw, 14px); }
.reader-pos { min-width: 9.5em; margin: 0; text-align: center; font-size: 1rem; font-variant-numeric: tabular-nums; color: #efeafc; }
.reader-tool { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.reader-tool svg { width: 24px; height: 24px; }
.reader-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.reader-tool:disabled { opacity: .3; cursor: default; }
.reader-tool[aria-pressed="true"] { background: var(--gold); color: var(--indigo-deep); }
.reader button:focus-visible, .reader a:focus-visible, .reader-range:focus-visible, .reader-dialog button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 699px) { .reader-pos { order: -1; flex: 0 0 100%; min-width: 0; } }
@media (max-width: 420px) { .reader-tool { width: 42px; height: 42px; } }

/* "focus" mode: the reader fills the screen (the real full-screen mode where the browser has one) */
.reader.is-full { position: fixed; inset: 0; z-index: 90; max-width: none; margin: 0; padding: 14px clamp(10px, 3vw, 60px) max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; background: radial-gradient(130% 100% at 50% 0%, #3d2c78 0%, #2b1c59 52%, #1d1340 100%); }
.reader.is-full .reader-stage { flex: 1 1 auto; min-height: 0; }
.reader.is-full .reader-book { height: 100%; }
@media (min-width: 1000px) {
  .reader.is-full .reader-nav-prev { inset-inline-start: 0; }
  .reader.is-full .reader-nav-next { inset-inline-end: 0; }
}
html.reader-locked, html.reader-locked body { overflow: hidden; }
.reader:fullscreen { padding: 14px clamp(10px, 3vw, 60px) 12px; display: flex; flex-direction: column; background: #1d1340; }
.reader:fullscreen .reader-stage { flex: 1 1 auto; min-height: 0; }
.reader:fullscreen .reader-book { height: 100%; }

/* ---------------------------------------------------------------- dialogs: all pages, zoom */
.reader-dialog { width: min(1100px, 100% - 24px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(20, 10, 50, .55); }
.reader-dialog::backdrop { background: rgba(20, 12, 48, .72); }
.reader-dialog-body { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.reader-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.reader-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.reader-dialog .reader-tool { background: var(--lav); color: var(--indigo); }
.reader-dialog .reader-tool:hover:not(:disabled) { background: #ddd5f2; }
.reader-zoom-tools { display: flex; gap: 8px; }
.reader-thumbs { list-style: none; margin: 0; padding: 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: auto; }
.reader-thumbs button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center; font: inherit; }
.reader-thumbs img { display: block; width: 100%; height: auto; background: var(--lav); border-radius: 3px; box-shadow: 0 1px 3px rgba(32, 26, 56, .35); transition: transform .15s; }
.reader-thumbs button:hover img { transform: translateY(-3px); }
.reader-thumbs span { display: block; margin-top: .35rem; font-size: .9rem; color: var(--muted); }
.reader-thumbs .is-current img { outline: 3px solid var(--gold); outline-offset: 2px; }
.reader-thumbs .is-current span { color: var(--indigo); font-weight: 700; }

.reader-dialog-zoom { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; background: #1d1340; color: #fff; }
.reader-dialog-zoom .reader-dialog-body { height: 100%; max-height: none; }
.reader-dialog-zoom .reader-dialog-head { border-color: rgba(255, 255, 255, .15); }
.reader-dialog-zoom .reader-dialog-head h2 { color: #fff; }
.reader-dialog-zoom .reader-tool { background: rgba(255, 255, 255, .14); color: #fff; }
.reader-dialog-zoom .reader-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.reader-zoom-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.reader-zoom-pages { display: flex; direction: ltr; margin-inline: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.reader-zoom-pages img { display: block; flex: 1 1 0; min-width: 0; height: auto; background: #fff; }

.reader-noscript { margin: 1rem 0; color: #fff; }
.reader-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-items: center; }
.reader-plain img { max-width: min(100%, 720px); height: auto; background: #fff; }
.book-about h2 { font-size: 1.4rem; }
.book-about p { max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .reader-book, .rd-page img, .book-cover { transition: none; }
}