/* open diary popup: the book image with text laid over each leaf */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100}
.modal.open{display:block}
.openbook{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;
  aspect-ratio:992/577;width:min(94vw,calc(88vh*(992/577)));container-type:inline-size;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.openbook>img{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none}
.openbook .close{position:absolute;top:1%;right:2.5%;font-size:4cqw;line-height:1;color:#f3e4c6;
  border:0;background:none;cursor:pointer;z-index:3}
.openbook .pg{position:absolute;top:9%;bottom:9%;width:32%;overflow:auto;color:#3a2410;
  font-family:Georgia,'Times New Roman',serif;font-size:2.1cqw;line-height:1.55;z-index:2}
.openbook .pg-left{left:18%}
.openbook .pg-right{left:55.5%}
.openbook h2{font-size:3cqw;color:#5a3210;margin:0 0 .5em;line-height:1.2}
.openbook p{margin:0 0 .7em}
.openbook a{color:#6b3f14;font-weight:bold;text-decoration:underline}

/* page turning */
.openbook .turn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;cursor:pointer;
  width:5cqw;height:8cqw;font-size:5cqw;line-height:1;color:#5a3210;background:rgba(255,248,230,.45);
  border-radius:1cqw;transition:background .15s ease}
.openbook .turn:hover,.openbook .turn:focus-visible{background:rgba(255,213,107,.85)}
.openbook .turn-prev{left:5.5%}
.openbook .turn-next{right:5.5%}
.openbook .pgnum{position:absolute;bottom:3.5%;left:0;right:0;text-align:center;z-index:2;
  font:italic 1.7cqw Georgia,serif;color:#7a5a30;pointer-events:none}
@keyframes pgfwd{from{opacity:0;transform:translateX(3cqw) rotateY(-25deg)}to{opacity:1;transform:none}}
@keyframes pgback{from{opacity:0;transform:translateX(-3cqw) rotateY(25deg)}to{opacity:1;transform:none}}
.openbook.flip-fwd .pg{animation:pgfwd .35s ease}
.openbook.flip-back .pg{animation:pgback .35s ease}