*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#e7cf9f}
body{overflow:hidden}
.scene{position:relative;width:100%;height:100svh;min-height:220px;overflow:hidden}
.scene-stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 1.6));aspect-ratio:8/5;transform:translate(-50%,-50%)}
picture,img{display:block;width:100%;height:100%}
img{object-fit:cover}
.book-entry{position:absolute;left:48%;top:64%;width:21%;height:18%;min-width:44px;min-height:44px;clip-path:polygon(0 40%,58% 0,100% 60%,35% 100%);text-decoration:none;color:#294c3a;-webkit-tap-highlight-color:rgba(255,243,202,.25)}
.book-entry:hover{background:rgba(255,243,201,.14)}
.book-entry:focus-visible{clip-path:none;outline:3px dashed #fff8d6;outline-offset:3px;border-radius:12px;background:rgba(255,247,220,.15)}
.entry-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:italic 22px Georgia,serif;opacity:0;white-space:nowrap}
.image-fallback{display:none}
.scene.art-failed .scene-stage picture{opacity:0}
.scene.art-failed .book-entry{clip-path:none;left:50%;top:50%;width:220px;height:150px;transform:translate(-50%,-50%) rotate(-8deg);background:#f5e9d5;border:3px solid #c77b43;border-left-width:15px;border-radius:3px 12px 12px 3px;box-shadow:6px 8px 0 #d6b984}
.scene.art-failed .entry-label{opacity:1}
.scene.art-failed .image-fallback{display:block;position:absolute;top:22%;left:0;right:0;text-align:center;color:#5b513a;font:italic 22px Georgia,serif}
@media(max-width:600px) and (orientation:portrait){
 .scene-stage{width:max(100vw,calc(100svh * .5622255));aspect-ratio:384/683}
 .book-entry{left:35.5%;top:69.2%;width:44%;height:15%;clip-path:polygon(0 17%,64% 0,100% 62%,95% 87%,29% 100%,2% 46%)}
}
/* Match the panoramic picture source. The stage always covers both viewport axes. */
@media(min-aspect-ratio:9/5){
 .scene-stage{top:35%;width:max(100vw,calc(100svh * 7 / 3));aspect-ratio:7/3;transform:translate(-50%,-35%)}
 .book-entry{left:50.5%;top:66.7%;width:14.5%;height:16%;clip-path:polygon(0 20%,57% 0,100% 58%,99% 85%,35% 100%,1% 46%)}
}
@media(prefers-reduced-motion:no-preference){.book-entry{transition:background .18s ease}}