/* paperback v2 — heavier, more photographic */
.pb{--w:360px;--th:.20;--t:calc(var(--w) * var(--th));--ry:-36deg;--rx:9deg;--pz:calc(var(--w) * 3.2);position:relative;width:var(--w);flex:0 0 auto;aspect-ratio:2/3;perspective:var(--pz);perspective-origin:50% 40%}
.pb-book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pb-book>*{position:absolute;backface-visibility:hidden}
/* front cover */
.pb-front{inset:0;transform:translateZ(calc(var(--t) / 2));border-radius:2px 6px 6px 2px;overflow:hidden;background:#111}
.pb-front img{width:100%;height:100%;object-fit:cover;display:block}
.pb-front::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.35) 7.5%,rgba(0,0,0,.18) 8.6%,rgba(255,255,255,.12) 9.6%,rgba(255,255,255,0) 13%),
    linear-gradient(112deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.14) 100%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.08))}
.pb-front .cover-edge{position:absolute;right:0;top:0;bottom:0;width:1.5px;background:rgba(255,255,255,.35);z-index:2}
/* cover cardstock edge (a hair proud of the page block) */
/* back cover */
.pb-back{inset:0;transform:translateZ(calc(var(--t) / -2)) rotateY(180deg);background:var(--spine) url(covers/cloth.png) 0 0/28px 28px repeat;border-radius:6px 2px 2px 6px}
.pb-back::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%)}
/* spine: 7 slabs make a rounded spine */
.pb-spine{top:0;bottom:0;left:0;width:var(--t);transform-origin:left center;transform:translateZ(calc(var(--t) / -2)) rotateY(-90deg);
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--spine) 62%,#000) 0%,
    color-mix(in srgb,var(--spine) 84%,#000) 12%,
    var(--spine) 34%,
    color-mix(in srgb,var(--spine) 90%,#fff) 50%,
    var(--spine) 66%,
    color-mix(in srgb,var(--spine) 84%,#000) 88%,
    color-mix(in srgb,var(--spine) 62%,#000) 100%),url(covers/cloth.png);
  background-size:100% 100%,28px 28px;background-blend-mode:multiply,normal;
  color:var(--spine-ink);display:flex;align-items:center;justify-content:center;border-radius:3px}
.pb-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Oswald","Inter",sans-serif;font-weight:600;font-size:calc(var(--t) * .3);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:.92}
/* fore-edge: page block, set in a hair, with page lines + slight concavity */
.pb-edge{top:.8%;bottom:.8%;left:0;width:calc(var(--t) - 2px);transform-origin:left center;
  transform:translateX(calc(var(--w) - 1px)) translateZ(calc(var(--t) / 2 - 1px)) rotateY(90deg);
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.02) 18%,rgba(0,0,0,0) 50%,rgba(0,0,0,.04) 82%,rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,#f6f1e6 0 1px,#dad3c3 1px 2px,#ebe5d7 2px 3px),
    #ece6d8}
.pb-edge::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.16))}
/* top edge: pages seen from above */
.pb-top{left:.8%;right:.8%;top:0;height:calc(var(--t) - 2px);transform-origin:top left;
  transform:translateY(1px) translateZ(calc(1px - var(--t) / 2)) rotateX(90deg);
  background:
    linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.04) 10%,rgba(0,0,0,0) 60%,rgba(0,0,0,.06)),
    repeating-linear-gradient(0deg,#f7f2e7 0 1px,#dcd5c5 1px 2px,#ece6d8 2px 3px),#ece6d8}
/* bottom edge (visible when rx is negative) */
.pb-bottom{left:.8%;right:.8%;bottom:0;height:calc(var(--t) - 2px);transform-origin:bottom left;
  transform:translateY(-1px) translateZ(calc(1px - var(--t) / 2)) rotateX(-90deg);background:#d8d1c1}
/* shadow: tight contact + soft spill */
.pb-shadow{position:absolute;left:-4%;right:-10%;bottom:-6%;height:12%;border-radius:50%;
  background:radial-gradient(ellipse at 40% 50%,rgba(0,0,0,.62),rgba(0,0,0,.30) 40%,rgba(0,0,0,0) 72%);filter:blur(9px)}
.pb-shadow::after{content:"";position:absolute;left:8%;right:22%;top:20%;bottom:30%;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(4px)}
.pb.hover:hover .pb-book{transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + 8deg)) translateY(-8px)}