/* ON6UHF v4.3.116 - groot, realistisch boek met geplooide bladzijde */
.book-stage{min-height:calc(100dvh - 76px);padding:.45rem clamp(.55rem,1.3vw,1.5rem) .5rem}
.intro{max-width:1100px;margin:0 auto .35rem}
.intro span{font-size:.67rem}
.intro h1{font-size:clamp(1.45rem,2.25vw,2.35rem);margin:.08rem}
.intro p{margin:.08rem;font-size:.88rem}
.book-shell{grid-template-columns:58px minmax(0,1480px) 58px;gap:.65rem}
.book{height:calc(100dvh - 205px);max-height:920px;min-height:560px;display:grid;grid-template-columns:1fr 1fr;perspective:2600px;filter:drop-shadow(0 28px 38px #000b)}
.book:before{content:"";position:absolute;z-index:4;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,transparent,#5e472b38 27%,#fff6df50 49%,#4a351f4f 55%,transparent);mix-blend-mode:multiply}
.paper{display:block;overflow:hidden;padding:clamp(1.35rem,2.1vw,2.8rem);backface-visibility:hidden}
.paper.left{border-radius:15px 3px 3px 15px;border-right:1px solid #8b704a66;background:linear-gradient(90deg,#e3d2b3 0,#f8eed9 5%,#fff6e5 91%,#d8c5a4 100%)}
.paper.right{display:block!important;border-radius:3px 15px 15px 3px;background:linear-gradient(90deg,#d5c19e 0,#fff5e1 8%,#f8edd7 95%,#dfccaa 100%)}
.paper.fit-compact{padding:clamp(1rem,1.65vw,2rem)}
.paper.needs-scroll{overflow:auto}
.turn-sheet{display:none;position:absolute;z-index:8;top:0;bottom:0;width:50%;overflow:hidden;color:var(--ink);padding:clamp(1.35rem,2.1vw,2.8rem);background:linear-gradient(90deg,#d5c19e,#fff7e7 9%,#f4e7ce 93%,#c9b38e);box-shadow:-14px 7px 35px #0007;backface-visibility:hidden;transform-style:preserve-3d}
.turn-sheet:before{content:"";position:absolute;z-index:20;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 58%,rgba(85,58,27,.11) 78%,rgba(255,255,255,.62) 96%,rgba(74,47,22,.32));opacity:0}
.turn-sheet:after{content:"";position:absolute;z-index:21;top:0;right:-2px;width:28%;height:100%;pointer-events:none;background:radial-gradient(ellipse at right center,rgba(255,255,255,.78),rgba(100,68,32,.18) 35%,transparent 70%);opacity:0}
.book.flipping-forward .turn-sheet.curl-forward{display:block;left:50%;transform-origin:left center;animation:pageCurlForward .84s cubic-bezier(.42,.05,.18,1) forwards}
.book.flipping-back .turn-sheet.curl-back{display:block;left:0;transform-origin:right center;animation:pageCurlBack .84s cubic-bezier(.42,.05,.18,1) forwards}
.book.flipping-forward .turn-sheet:before,.book.flipping-forward .turn-sheet:after,.book.flipping-back .turn-sheet:before,.book.flipping-back .turn-sheet:after{animation:pageFoldLight .84s ease-in-out}
.turn-sheet h1,.turn-sheet h2,.turn-sheet h3{font-family:Georgia,serif;color:#132b37;line-height:1.13}.turn-sheet h1{font-size:clamp(1.45rem,2.1vw,2.2rem)}.turn-sheet p,.turn-sheet blockquote{font-family:Georgia,serif;font-size:clamp(.9rem,1.05vw,1.05rem);line-height:1.48}.turn-sheet .illustration{width:100%;max-height:190px;object-fit:cover;border-radius:9px}
@keyframes pageCurlForward{0%{transform:translateX(0) rotateY(0) skewY(0);border-radius:3px 15px 15px 3px}38%{transform:translateX(-3%) rotateY(-68deg) skewY(-1.1deg);border-radius:4px 24px 24px 4px}68%{transform:translateX(-8%) rotateY(-126deg) skewY(1.5deg);border-radius:22px 5px 5px 22px}100%{transform:translateX(-100%) rotateY(-180deg) skewY(0);border-radius:15px 3px 3px 15px}}
@keyframes pageCurlBack{0%{transform:translateX(0) rotateY(0) skewY(0);border-radius:15px 3px 3px 15px}38%{transform:translateX(3%) rotateY(68deg) skewY(1.1deg);border-radius:24px 4px 4px 24px}68%{transform:translateX(8%) rotateY(126deg) skewY(-1.5deg);border-radius:5px 22px 22px 5px}100%{transform:translateX(100%) rotateY(180deg) skewY(0);border-radius:3px 15px 15px 3px}}
@keyframes pageFoldLight{0%,100%{opacity:0}42%,66%{opacity:1}}
.progress{margin:.28rem auto 0}.progress div{margin:.28rem}.progress small{display:none}
html:fullscreen .bookbar{display:none}
html:fullscreen .book-stage{min-height:100dvh;padding:.35rem 1rem}
html:fullscreen .intro span,html:fullscreen .intro p{display:none}
html:fullscreen .intro h1{font-size:1.35rem}
html:fullscreen .book{height:calc(100dvh - 72px);max-height:none}
@media(max-height:760px) and (min-width:821px){.book{height:calc(100dvh - 170px);min-height:470px}.intro p{display:none}.paper{padding:1.05rem 1.4rem 1.7rem}.paper p,.paper blockquote{font-size:clamp(.82rem,.92vw,.98rem);line-height:1.4}.paper .illustration{max-height:145px}}
@media(max-width:820px){.book-stage{min-height:calc(100dvh - 64px);padding:.4rem .25rem}.intro span,.intro p{display:none}.intro h1{font-size:clamp(1.2rem,5.4vw,1.7rem)}.book-shell{grid-template-columns:38px minmax(0,1fr) 38px;gap:.18rem}.book{height:calc(100dvh - 150px);max-height:none;min-height:500px;grid-template-columns:1fr}.book:before{display:none}.paper.right{display:none!important}.paper.left{border-radius:12px}.turn-sheet{width:100%;left:0!important}.book.flipping-forward .turn-sheet.curl-forward{transform-origin:left center}.book.flipping-back .turn-sheet.curl-back{transform-origin:right center}.paper{padding:1.15rem 1rem 1.8rem}.paper p,.paper blockquote{font-size:clamp(.88rem,3.55vw,1.02rem);line-height:1.45}.paper .illustration{max-height:22dvh}}
@media(prefers-reduced-motion:reduce){.book.flipping-forward .turn-sheet.curl-forward,.book.flipping-back .turn-sheet.curl-back{animation-duration:.01ms}}