.book-scene {
  padding: 100px 50px 65px;
  gap: 10px;
}
.book-scene > .scene-eyebrow { margin: 0; }
.book-scene > h1 { font-size: 30px; margin: 0 0 5px; }
.book-scene .spellbook {
  --book-height: min(630px,calc(100svh - 265px),calc(86vw / 1.3556));
  container-type: inline-size;
  display: block;
  flex-shrink: 0;
  width: calc(var(--book-height) * 1.3556);
  height: var(--book-height);
  min-height: 0;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: transform .55s ease;
}
.book-scene .spellbook:hover { transform: translateY(-3px); box-shadow: none; }
.book-scene .spellbook::before { display: none; }
.spellbook-art-window { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spellbook-art {
  position: absolute;
  width: 195.7377%;
  height: 185.3333%;
  max-width: none;
  left: -55.7377%;
  top: -40%;
  object-fit: fill;
  filter: none;
}
.book-scene .book-page { position: absolute; display: flex; background: none; border: 0; padding: 0; min-width: 0; }
.book-scene .page-left { left: 17%; top: 36%; width: 27%; height: 46%; transform: rotate(-2deg); }
.book-scene .page-right { left: 55%; top: 17%; width: 28%; height: 43%; transform: rotate(-3deg); }
.book-scene .folio { font-size: clamp(7px,1.05cqw,10px); margin: 0 0 12px; }
.book-scene .book-name { font-size: clamp(17px,3.4cqw,29px); margin: 0 0 12px; }
.book-scene .book-description { font-size: clamp(11px,1.9cqw,17px); line-height: 1.6; margin: 0 0 16px; }
.book-scene .book-bio { font-size: clamp(9px,1.32cqw,12px); line-height: 1.7; }
.book-scene .skill-list { margin-top: 13px; gap: 20px; font-size: clamp(10px,1.48cqw,13px); }
.book-scene .skill-list > span { gap: 12px; }
.book-scene .skill-list i { font-size: 15px; }
.book-scene .book-seal { width: max-content; gap: 8px; padding-top: 18px; margin-top: 0; font-size: clamp(10px,1.4cqw,12px); }
.book-scene .book-seal > span { font-size: 23px; }
.book-scene .book-seal b { margin-left: 16px; }
.book-scene .page-number { display: none; }
.book-scene .page-right .page-number { display: none; }
.book-scene .book-footer { position: static; width: min(830px,80vw); margin: 0; }
@media (min-width: 821px) and (max-height: 740px) {
  .book-scene { padding-top: 85px; padding-bottom: 55px; gap: 6px; }
  .book-scene > h1 { font-size: 24px; }
  .book-scene .spellbook { --book-height: min(480px,calc(100svh - 220px),calc(86vw / 1.3556)); }
  .book-scene .folio { margin-bottom: 8px; }
  .book-scene .book-name { margin-bottom: 8px; }
  .book-scene .book-description { margin-bottom: 10px; }
  .book-scene .skill-list { margin-top: 8px; gap: 12px; }
  .book-scene .book-seal { padding-top: 12px; }
  .book-scene .page-number { display: none; }
}
@media (max-width: 820px) {
  body[data-scene="book"] { overflow: auto; }
  .book-scene { height: auto; min-height: 100svh; padding: 100px 24px 85px; gap: 16px; }
  .book-scene > h1 { font-size: 26px; }
  .book-scene .spellbook { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 90vw; height: auto; }
  .spellbook-art-window { position: relative; grid-column: 1 / -1; width: 100%; aspect-ratio: 1220 / 900; }
  .book-scene .book-page { position: static; width: auto; height: auto; transform: none; }
  .book-scene .page-left { padding-left: 8px; }
  .book-scene .folio { font-size: 8px; }
  .book-scene .book-name { font-size: 24px; }
  .book-scene .book-description { font-size: 14px; }
  .book-scene .book-bio { font-size: 11px; }
  .book-scene .skill-list { gap: 17px; font-size: 11px; }
  .book-scene .book-seal { font-size: 11px; }
  .book-scene .page-number { display: none; }
  .book-scene .book-footer { width: 90vw; }
}
@media (min-width: 821px) and (max-height: 530px) {
  body[data-scene="book"] { overflow: auto; }
  .book-scene { height: auto; padding-top: 90px; padding-bottom: 75px; }
  .book-scene > .scene-eyebrow { display: block; }
  .book-scene .spellbook { --book-height: min(500px,calc(80vw / 1.3556)); }
}
@media (prefers-reduced-motion: reduce) {
  .book-scene .spellbook { transition: none; }
  .book-scene .spellbook:hover { transform: none; }
}