/* Digital book reader (/book/<slug>): white bar, dark stage, one page per
   snap point. Pages are images; their text lives in a visually hidden caption. */

.book-body {
  height: 100dvh; min-height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background: var(--bg-deep); color: var(--on-dark);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- top bar ---- */
.book-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: var(--bg); color: var(--ink);
  border-bottom: 3px solid var(--red);
}
.book-brand img { display: block; height: 32px; width: auto; }
.book-title {
  font-family: var(--head); font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy);
  padding-left: 16px; border-left: 1px solid var(--line-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-actions { margin-left: auto; display: flex; gap: 8px; }
.book-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  font: 600 .85rem var(--body); color: var(--navy); text-decoration: none;
  background: var(--bg); border: 1px solid var(--line-strong); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.book-btn:hover { border-color: var(--navy); background: var(--bg-soft); }
.book-btn svg, .book-nav svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- stage: horizontal scroll-snap track ---- */
.book-stage {
  position: relative; min-height: 0;
  background:
    linear-gradient(var(--grid-dark, rgba(255,255,255,.035)) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid-dark, rgba(255,255,255,.035)) 1px, transparent 1px) 0 0 / 32px 32px;
}
.book-track {
  height: 100%; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
  outline: none;
}
.book-track::-webkit-scrollbar { display: none; }
.book-page {
  flex: 0 0 100%; height: 100%;
  display: grid; place-items: center;
  padding: clamp(12px, 3vh, 32px) clamp(12px, 6vw, 96px);
  scroll-snap-align: center; scroll-snap-stop: always;
}
.book-sheet {
  margin: 0; height: 100%; max-height: 100%; max-width: 100%;
  background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform-origin: center; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.book-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }
.book-page:not(.is-current) .book-sheet { transform: scale(.94); opacity: .55; }

/* ---- prev / next ---- */
.book-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--white); background: rgba(15, 33, 71, .72);
  border: 1px solid rgba(255, 255, 255, .25); cursor: pointer;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.book-nav:hover { background: var(--red); border-color: var(--red); }
.book-nav[disabled] { opacity: 0; pointer-events: none; }
.book-nav--prev { left: clamp(8px, 2vw, 24px); }
.book-nav--next { right: clamp(8px, 2vw, 24px); }
.book-nav svg { width: 22px; height: 22px; }

/* ---- footer: thumbnails + counter ---- */
.book-foot {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.book-thumbs { list-style: none; display: flex; gap: 8px; }
.book-thumbs a {
  display: block; border: 2px solid transparent; opacity: .55;
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.book-thumbs a:hover { opacity: .9; }
.book-thumbs a[aria-current="page"] { border-color: var(--yellow); opacity: 1; }
.book-thumbs img { display: block; width: 38px; height: 54px; object-fit: cover; }
.book-count { font: 500 .9rem var(--mono); color: var(--on-dark); min-width: 4.5em; text-align: center; }
.book-hint { font: .8rem var(--body); color: var(--on-dark-muted); }

.book-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  padding: 10px 16px; background: var(--ink); color: var(--white);
  font: 500 .875rem var(--body); opacity: 0; pointer-events: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease);
}
.book-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .book-title { font-size: .85rem; padding-left: 12px; }
  .book-btn span, .book-hint { display: none; }
  .book-btn { padding: 0 11px; }
  .book-page { padding: 12px; }
  .book-sheet { height: auto; width: 100%; max-height: 100%; }
  .book-nav { display: none; }
  .book-thumbs img { width: 30px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-track { scroll-behavior: auto; }
  .book-sheet { transition: none; }
}