.book-stage{
  width:min(400px, 86vw);aspect-ratio:4 / 3;
  margin:12px auto 24px;
  perspective:2000px;perspective-origin:50% 50%;
  position:relative;
}
.book{
  position:relative;width:100%;height:100%;border-radius:5px;
  box-shadow:0 26px 52px rgba(45,26,16,.18), 0 8px 20px rgba(45,26,16,.08);
}
.book-base{
  position:absolute;top:0;height:100%;width:50%;
  background:linear-gradient(180deg, #fdfaf0 0%, #f6edda 100%);z-index:1;
}
.book-base-left{
  left:0;border:1px solid var(--gold-soft);border-right:none;
  border-radius:5px 0 0 5px;box-shadow:inset 0 0 60px rgba(184,147,90,.08);
  display:flex;align-items:center;justify-content:center;
}
.book-base-right{
  right:0;border:1px solid var(--gold-soft);border-left:none;
  border-radius:0 5px 5px 0;box-shadow:inset 0 0 60px rgba(184,147,90,.08);
}
.book-left-label{
  font-size:14px;letter-spacing:.5em;color:var(--ink-3);
  opacity:.6;text-indent:.5em;z-index:2;position:relative;
}
.book-spine{
  position:absolute;top:0;bottom:0;left:50%;width:40px;transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(120,90,50,0) 0%, rgba(120,90,50,.06) 25%,
    rgba(70,45,20,.22) 50%, rgba(120,90,50,.06) 75%, rgba(120,90,50,0) 100%);
  pointer-events:none;z-index:200;
}
.leaves{position:absolute;inset:0;z-index:10;pointer-events:none;}
.leaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.44,.05,.35,1);
  will-change:transform;
}
.leaf.flipped{transform:rotateY(-180deg);}
.leaf-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.leaf-front{
  background:linear-gradient(180deg, #fdfaf0 0%, #f6edda 100%);
  border:1px solid var(--gold-faint);border-radius:0 5px 5px 0;
  box-shadow:inset 0 0 40px rgba(184,147,90,.05), inset 1px 0 0 rgba(255,255,255,.6);
}
.leaf-front::after{
  content:"";position:absolute;inset:12px;
  border:0.5px solid rgba(184,147,90,.22);border-radius:3px;pointer-events:none;
}
.leaf-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg, #f7efdc 0%, #eedfbe 100%);
  border:1px solid var(--gold-faint);border-radius:5px 0 0 5px;
  box-shadow:inset 0 0 50px rgba(150,110,60,.12), inset -1px 0 0 rgba(255,255,255,.4);
}
.leaf-back::before{
  content:"";position:absolute;top:22%;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,90,50,.28), transparent);
}
.leaf-back::after{
  content:"";position:absolute;bottom:22%;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,90,50,.22), transparent);
}
.leaf-text{
  font-size:clamp(17px,3.2vw,21px);letter-spacing:.3em;
  color:var(--ink);font-weight:500;text-indent:.3em;text-align:center;
  padding:0 24px;position:relative;z-index:2;
}
.leaf-front.settled::after{
  border-color:rgba(184,147,90,.65);
  box-shadow:inset 0 0 22px rgba(201,169,97,.18), 0 0 0 1px rgba(201,169,97,.25);
  transition:all .6s ease;
}
.library-note{
    text-align:center;
    font-size:11px;
    letter-spacing:.22em;
    color:var(--ink-3);
    opacity:.75;
    margin:36px auto 0;
    line-height:2.2;
    max-width:440px;
}
.library-note a{
    color:var(--gold-dk);
    text-decoration:none;
    border-bottom:1px solid var(--gold-faint);
    transition:all .3s ease;
    padding:0 2px;
}
.library-note a:hover{
    color:var(--gold);
    border-color:var(--gold);
}