/* MVBook — shared picture-book overlay (two-faced leaf turn) */
.mvb{position:fixed;inset:0;z-index:300;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 30%,#7d5c37 0%,#5b4023 42%,#37260f 100%);
  font-family:'Work Sans',system-ui,sans-serif}
.mvb.open{display:grid}
.mvb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(93deg,rgba(255,255,255,.016) 0 3px,transparent 3px 14px);pointer-events:none}

.mvb__bookwrap{position:relative;width:min(94vw,1440px);height:min(80vh,80svh,720px)}
.mvb__cover{position:absolute;inset:-16px -13px;background:linear-gradient(150deg,#5f4626,#3c2a13);border-radius:12px;
  box-shadow:0 46px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.mvb__edge{position:absolute;top:10px;bottom:10px;width:7px;pointer-events:none}
.mvb__edge.l{left:-7px;background:repeating-linear-gradient(90deg,#e6dabc 0 1px,#f5edd9 1px 2.6px);border-radius:4px 0 0 4px}
.mvb__edge.r{right:-7px;background:repeating-linear-gradient(90deg,#f5edd9 0 1px,#e6dabc 1px 2.6px);border-radius:0 4px 4px 0}

/* everything inside is clipped to the album's edges */
.mvb__clip{position:absolute;inset:0;overflow:hidden;border-radius:8px}
.mvb__persp{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 50%}

.mvb__pageL,.mvb__pageR{position:absolute;top:0;bottom:0;width:50%}
.mvb__pageL{left:0;background:linear-gradient(100deg,#f2ead6 0%,#faf4e5 60%,#f0e7d0 100%);box-shadow:inset -34px 0 40px -24px rgba(110,85,45,.45)}
.mvb__pageR{right:0;background:linear-gradient(260deg,#f0e7d0 0%,#faf4e5 45%,#f4ecda 100%);box-shadow:inset 30px 0 40px -24px rgba(110,85,45,.4)}

/* page content renderers */
.mvb__capPage{height:100%;display:grid;align-content:center;justify-items:center;text-align:center;gap:.4rem;padding:clamp(1.2rem,3vw,3rem)}
.mvb__capPage .ttl{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);color:#a97f42}
.mvb__capPage .cap{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.25;color:#3c3a33;max-width:18ch}
.mvb__capPage .pgn{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#a4936f;margin-top:1.2rem}
.mvb__capPage .hint{font-family:'Caveat',cursive;font-size:1.15rem;color:#a4936f;visibility:hidden}
.mvb__phPage{height:100%;display:grid;place-items:center;padding:clamp(1.1rem,2.6vw,2.4rem);overflow:hidden}
.mvb__mount{position:relative;background:#fff;padding:clamp(.5rem,1.1vw,.9rem);box-shadow:0 10px 30px rgba(60,44,20,.25)}
.mvb__mount img{display:block;max-width:100%;max-height:calc(min(80vh,80svh,720px) - clamp(6.5rem,13vh,8.5rem));width:auto;height:auto;margin:0 auto}
.mvb__mount .pc{position:absolute;width:0;height:0;border:16px solid transparent}
.mvb__mount .pc.tl{top:-6px;left:-6px;border-top-color:#dccba2;border-left-color:#dccba2}
.mvb__mount .pc.tr{top:-6px;right:-6px;border-top-color:#dccba2;border-right-color:#dccba2}
.mvb__mount .pc.bl{bottom:-6px;left:-6px;border-bottom-color:#dccba2;border-left-color:#dccba2}
.mvb__mount .pc.br{bottom:-6px;right:-6px;border-bottom-color:#dccba2;border-right-color:#dccba2}
.mvb__capM{display:none;font-family:'Caveat',cursive;font-weight:600;font-size:clamp(1.15rem,4vw,1.5rem);color:#3c3a33;text-align:center;padding:.5rem .4rem 0}

/* cast shadows on the pages beneath the leaf */
.mvb__shR{position:absolute;right:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,rgba(45,30,10,.55),transparent 62%);opacity:0;pointer-events:none;z-index:3}
.mvb__shL{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(270deg,rgba(45,30,10,.55),transparent 62%);opacity:0;pointer-events:none;z-index:3}

/* the turning leaf: two printed faces */
.mvb__leaf{position:absolute;left:50%;top:0;bottom:0;width:50%;transform-origin:left center;transform-style:preserve-3d;z-index:5;will-change:transform}
.mvb__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mvb__face.f{background:linear-gradient(260deg,#f0e7d0 0%,#faf4e5 45%,#f4ecda 100%)}
.mvb__face.b{transform:rotateY(180deg);background:linear-gradient(100deg,#f2ead6 0%,#faf4e5 60%,#f0e7d0 100%)}
.mvb__shade{position:absolute;inset:0;pointer-events:none;opacity:0}
.mvb__face.f .mvb__shade{background:linear-gradient(90deg,rgba(40,26,8,.6),transparent 58%)}
.mvb__face.b .mvb__shade{background:linear-gradient(90deg,rgba(40,26,8,.6),transparent 58%)}

/* chrome */
.mvb__x{position:absolute;top:1rem;right:1.1rem;z-index:20;display:inline-flex;align-items:center;gap:.55rem;border:none;
  background:rgba(250,244,229,.95);color:#44523d;font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.8rem 1.3rem;border-radius:999px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:.25s}
.mvb__x:hover{background:#fff}
.mvb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(250,244,229,.55);background:rgba(0,0,0,.18);color:#faf4e5;font-size:1.2rem;cursor:pointer;transition:.25s}
.mvb__nav:hover{background:#a97f42;border-color:#a97f42;color:#fff}
.mvb__nav.prev{left:clamp(.5rem,1.6vw,1.4rem)}
.mvb__nav.next{right:clamp(.5rem,1.6vw,1.4rem)}
.mvb__dots{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:20;display:flex;gap:.45rem;width:min(56vw,400px)}
.mvb__dots i{flex:1;height:5px;border-radius:5px;background:rgba(250,244,229,.25);position:relative;overflow:hidden;cursor:pointer}
.mvb__dots i.done::after,.mvb__dots i.now::after{content:"";position:absolute;inset:0;background:#e3c98c;transform-origin:left}
.mvb__dots i.now::after{animation:mvbFill 2.8s linear forwards}
.mvb__dots i.now.hold::after{animation:none;transform:none}
@keyframes mvbFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:880px){
  .mvb__pageL{display:none}
  .mvb__pageR,.mvb__shR{width:100%}
  .mvb__shL{display:none}
  .mvb__leaf{left:0;width:100%}
  .mvb__bookwrap{height:min(72vh,72svh)}
  .mvb__mount img{max-height:calc(min(72vh,72svh) - clamp(7rem,16vh,9rem))}
  .mvb__capM{display:block}
  .mvb__nav{width:44px;height:44px}
}