.reading-room{position:relative;display:flex;align-items:center;justify-content:center;background:#39304e;overflow:hidden;isolation:isolate}
.room-stage{position:relative;width:100%;aspect-ratio:3/2;flex:none}
.room-art{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.room-accents{position:absolute;inset:0;pointer-events:none}
.room-window{position:absolute;inset:0;background:#ffc78a;clip-path:polygon(21.5% 30.8%,44.5% 15.4%,44.5% 39.7%,21.5% 54%);mix-blend-mode:screen;opacity:.04}
.room-dust{position:absolute;width:.35%;aspect-ratio:1;background:#ffe3a5;opacity:0}
.dust-one{left:29%;top:64%;--drift:7px;--delay:-1s}.dust-two{left:38%;top:56%;--drift:-9px;--delay:-3s}.dust-three{left:33%;top:73%;--drift:11px;--delay:-5s}.dust-four{left:43%;top:65%;--drift:-6px;--delay:-2s}
.room-note{position:absolute;left:74%;top:59%;font-family:monospace;font-weight:700;font-size:clamp(14px,2vw,24px);color:#ffe2ba;text-shadow:2px 2px 0 #3c2c44;opacity:0;--delay:0s}
.note-two{left:76%;--delay:-2s}
.room-signal{position:absolute;left:70.15%;top:63.2%;width:.35%;height:.45%;background:#fbd093;opacity:.6}
.room-toggle{position:absolute;z-index:3;right:16px;bottom:16px;min-height:44px;border:1px solid #fff3;border-radius:999px;padding:10px 14px;background:#2e253fdf;color:#fff3e8;font-size:.8125rem;cursor:pointer}
.room-toggle:hover{background:#4b3b60}.room-toggle:focus-visible{outline-color:#ffe2ba}
@keyframes room-light{0%,100%{opacity:.025}50%{opacity:.105}}
@keyframes room-drift{0%{opacity:0;transform:translate(0,0)}20%,65%{opacity:.65}100%{opacity:0;transform:translate(var(--drift),-28px)}}
@keyframes room-music{0%{opacity:0;transform:translate(0,5px)}20%,55%{opacity:.8}100%{opacity:0;transform:translate(14px,-25px)}}
@keyframes room-signal{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .room-window{animation:room-light 7s steps(16,end) infinite}
  .room-dust{animation:room-drift 8s steps(20,end) var(--delay) infinite}
  .room-note{animation:room-music 4s steps(12,end) var(--delay) infinite}
  .room-signal{animation:room-signal 2.4s steps(4,end) infinite}
  [data-paused="true"] .room-motion,[data-room-offscreen] .room-motion{animation-play-state:paused}
  .books-card .room-motion{animation-play-state:paused}
  .books-card:is(:hover,:focus-visible) .room-motion{animation-play-state:running}
}
/* Full artwork stays in a fixed-ratio stage; only the surrounding frame changes. */
.tile.books-card{padding:0;background:#39304e;color:#fff3e8;min-height:0}
.books-card .reading-room{height:290px;flex:1;min-height:250px}
.books-card .room-stage{width:min(100%,435px);height:auto;aspect-ratio:3/2}
.books-card .books-tile-copy{padding:22px 26px 26px;position:relative;z-index:2;background:#39304e}
.books-card .tile-meta{font-size:.75rem;color:#e3c8b8;letter-spacing:.08em;text-shadow:none}
.grid>.books-card .work-copy{margin-top:0;padding-top:12px}.books-card .work-copy h2{font-size:2rem;margin-bottom:8px}.books-card .work-copy p{color:#e0d3df}
.books-card .go{bottom:26px;color:#fff3e8}
@media(max-width:620px){.books-card .reading-room{height:225px;min-height:225px;flex:none}.books-card .room-stage{width:min(100%,337.5px)}.books-card .books-tile-copy{padding:18px 24px 22px}.books-card .work-copy h2{font-size:1.75rem}.room-toggle{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.room-toggle{display:none}.room-dust,.room-note{display:none}.room-window{opacity:.05}}
