/* The modal owns focus. Its shell moves, while its pages keep their final layout. */
dialog.film-reader[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  animation: none;
}
.film-reader::backdrop {
  background: rgba(37, 43, 32, .53);
  backdrop-filter: blur(3px);
}
.film-reader .reader-shell {
  width: min(1000px, 90vw);
  position: relative;
  perspective: 1800px;
  transform-origin: top left;
}
.film-reader .reader-content {
  max-height: 87dvh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 4px solid var(--binding);
  border-radius: 5px 9px 8px 5px;
  box-shadow: 0 2px #e2d8bc, 0 4px #aaa18d, 0 6px #ddd4bf, 0 9px var(--binding), 0 22px 40px #141c194d;
}
.film-reader .spread { position: relative; }
.film-reader .film-plate {
  background: linear-gradient(90deg,#f0ecdf 0%,#f4f0e4 83%,#ded9c8 96%,#c8beab 100%);
}
.film-reader .spread article {
  background: linear-gradient(90deg,#d7d0bc 0%,#f1ecdf 3%,#faf7ed 9%,#faf7ed 95%,#eee9db 100%);
}
.film-reader .film-plate video {
  border: 5px solid #fcfaf1;
  box-shadow: 1px 3px 7px #3c392a33;
}
.reader-bottom .folio { font: italic 14px var(--serif); color: var(--muted); }
.reader-bottom a { padding: 6px; }
.reader-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.volumes .picked { opacity: 0; }
.book-rig {
  position: absolute;
  inset: 0 0 0 50%;
  perspective: 1700px;
  perspective-origin: left center;
  pointer-events: none;
  z-index: 5;
}
.book-hinge {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.board-front, .board-lining, .paper-leaf, .turn-face {
  position: absolute;
  inset: 0;
  border-radius: 2px 7px 6px 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.book-rig .board-front {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  transition: none;
  transform: translateZ(1px);
}
.board-lining, .paper-leaf {
  background: linear-gradient(90deg,#c9c0a9,#f6f0de 13%,#f7f2e5 88%,#e5dcc6);
  box-shadow: inset 0 0 0 1px #c2b89f;
}
.board-lining {
  transform: rotateY(180deg);
  border: 5px solid var(--binding);
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center,transparent 64%,#0001),url(grain.svg),#e4dec7;
}
.board-lining img { width: 12%; opacity: .46; }
.paper-leaf {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-origin: left center;
}
.turn-face { overflow: hidden; background: var(--paper); }
.turn-face.back { transform: rotateY(180deg); }
.turn-face > article { padding: 35px; height: 100%; }
.turn-face > .film-plate { height: 100%; }
.turn-face img.frame-still { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 5px solid #fcfaf1; }
.turn-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#59503a30,transparent 16%,transparent 84%,#51493412);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .volumes .volume:hover {
    transform: perspective(700px) translateY(-13px) rotateX(var(--tilt-x,2deg)) rotateY(var(--tilt-y,-6deg)) rotateZ(-1deg);
    transition: transform .18s ease-out, box-shadow .25s;
  }
}
@media (max-width:720px) {
  .film-reader .reader-shell { width: 92vw; }
  .book-rig { left: 0; }
  .film-reader .spread article { background: #faf7ed; }
  .film-reader .film-plate { background: #eae6d8; }
}
@media (prefers-reduced-motion:no-preference) {
  .film-reader[open]::backdrop { animation: dim-shelf .52s ease-out both; }
  .film-reader[open].reshelving::backdrop { animation: reveal-shelf .65s ease-in-out both; }
  @keyframes dim-shelf { from { opacity: 0; } to { opacity: 1; } }
  @keyframes reveal-shelf { from { opacity: 1; } to { opacity: 0; } }
}