/* T416: the Skills home's open books. The page text of a book being read is DOM, laid over the two pages of the
   open book in the scene, on its own paper ground (so its contrast never depends on the frame behind it). */
:root {
  --color-paper: #f1e7cf;
  --color-paper-edge: #e3d4b2;
  --color-paper-ink: #22190f;
  --color-paper-ink-soft: #4a3c2a;
  --color-paper-wash: rgb(241 231 207 / 0.94);
  --color-paper-clear: rgb(241 231 207 / 0);
}

/* each group's turn is a tall act: the book comes, opens, is read, closes and goes back */
.book-act { min-height: 160svh; align-items: flex-start; }
.book-act .act__in { position: sticky; top: calc(var(--topnav-h, 64px) + 20px); }
.book-act__cap { padding: 8px 14px; border-radius: 999px; background: var(--color-tag); }
.book-act__cap .place { margin: 0; }
.book-act__cap .place i { background: var(--gc); }

.bookread { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; }
.bookread.is-on { visibility: visible; }
.bookread__l, .bookread__r {
  position: absolute; left: 0; top: 0; box-sizing: border-box; overflow: hidden;
  padding: calc(var(--ph, 400px) * 0.075) calc(var(--ph, 400px) * 0.06);
  background: radial-gradient(ellipse 96% 94% at 50% 50%, var(--color-paper-wash) 58%, var(--color-paper-clear) 100%);
  color: var(--color-paper-ink);
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--ph, 400px) * 0.03);
}
.bookread__l { text-align: center; align-items: center; }
.bookread__group {
  margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.05; color: var(--color-paper-ink);
  font-size: clamp(15px, calc(var(--ph, 400px) * 0.085), 56px);
}
.bookread__group::after { content: ""; display: block; width: 2.2em; height: 2px; margin: 0.45em auto 0; background: var(--gc); }
.bookread__count, .bookread__hint {
  margin: 0; font-family: var(--font-text); color: var(--color-paper-ink-soft); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: clamp(11px, calc(var(--ph, 400px) * 0.028), 15px);
}
.bookread__what, .bookread__when {
  margin: 0; font-family: var(--font-text); color: var(--color-paper-ink); line-height: 1.45;
  font-size: clamp(12px, calc(var(--ph, 400px) * 0.04), 22px);
}
.bookread__name {
  margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.02; color: var(--color-paper-ink);
  font-size: clamp(18px, calc(var(--ph, 400px) * 0.1), 68px); overflow-wrap: anywhere;
}
.bookread__name .ns { display: block; font-family: var(--font-text); font-size: max(11px, 0.32em); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-paper-ink-soft); margin-bottom: 0.35em; }
.bookread__hint { margin-top: auto; }
@media (max-width: 600px) {
  .bookread__what { display: none; }
  .bookread__l, .bookread__r { padding: calc(var(--ph, 400px) * 0.06) calc(var(--ph, 400px) * 0.045); }
}
@media (forced-colors: active) { .bookread { display: none; } }