/* ---------- the bookshelf: two floating planks, photographed books ---------- */
.books {
  position: relative; z-index: 1;
  max-width: 73.75em; margin: 0 auto;
  padding: 0 5vw 14vh;
  font-size: clamp(15px, 1.45vh, 24px);
}
.books .tape-title { margin-bottom: 2.2em; display: inline-block; }

/* the planks: the same photo twice; books stand on the front-edge line */
.planks { display: grid; gap: 0; }
.plank { position: relative; width: min(60em, 100%); aspect-ratio: 889 / 103; margin: 0; }
.plank img.wood { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 1.6em 1.4em rgba(20,10,0,.5)) drop-shadow(0 .2em .3em rgba(20,10,0,.35)); }
.plank-top { margin-top: 22em; }
.plank-bottom { margin-top: 22em; }
.pot { aspect-ratio: 371 / 534; position: absolute; left: 4%; bottom: 32%; width: 22%; z-index: 2; pointer-events: none; margin: 0; }
.pot img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(-.3em .6em .8em rgba(20,10,0,.45)); }

/* the current read: face out, leaning on the back board, a taped note beside it */
.reading { position: absolute; left: 31%; bottom: 33%; z-index: 2; display: flex; align-items: flex-end; }
.reading .cover {
  position: relative; width: 9.3em; flex: none;
  transform: perspective(40em) rotateY(-9deg); transform-origin: right center;
  filter: drop-shadow(-.6em .8em 1.2em rgba(0,0,0,.55));
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.reading .tape { position: absolute; left: 112%; bottom: 14%; width: 12em; z-index: 3; }
.tape-note {
  position: relative; display: inline-block; padding: .5em .9em .45em;
  background: rgba(238,228,200,.94); color: #3a3226; font: 400 1.05em/1.15 var(--pen);
  box-shadow: 0 .1em .2em rgba(0,0,0,.4); transform: rotate(-2deg);
}
.tape-note::before, .tape-note::after { content: ""; position: absolute; top: 0; bottom: 0; width: .5em; background: rgba(238,228,200,.6); }
.tape-note::before { left: -.5em; clip-path: polygon(100% 0, 0 20%, 100% 45%, 0 70%, 100% 100%); }
.tape-note::after { right: -.5em; clip-path: polygon(0 0, 100% 25%, 0 50%, 100% 75%, 0 100%); }
.tape-note b { display: block; font: 400 .8em/1.1 var(--marker); margin-bottom: .15em; color: #2a2218; }

/* the spines: each one a photo at its own proportions, sized by the plank's scale */
.spines { position: absolute; left: 3%; right: 3%; bottom: 33%; z-index: 2; font-size: var(--fit, 1em); display: flex; justify-content: center; align-items: flex-end; gap: .22em; }
.book {
  position: relative; flex: none; border: 0; padding: 0; cursor: pointer; background: none; font: inherit;
  height: var(--h, 12em); width: var(--w, 1em);
  box-shadow: 0 .3em .4em -.2em rgba(0,0,0,.6);
  transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s;
}
.book .side { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.book::after { content: ""; position: absolute; top: 0; bottom: 0; left: -.45em; right: -.45em; }   /* a wider target for very thin spines */
.book:hover { transform: translateY(-.7em); box-shadow: 0 1em 1em -.4em rgba(0,0,0,.7); z-index: 3; }
.book:focus-visible { outline: 2px solid #c8a97a; outline-offset: 2px; }
.book.out { transform: translateY(-2.2em); opacity: .35; }
.shelf-empty { color: #9c9080; font: 400 .9em/1.4 'Courier Prime', monospace; padding: 1em 0 2em; }

/* the pulled-out book: its cover, and notes on a ruled card */
.opened {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6em; align-items: start;
  margin-top: 1.8em; padding: 0 .4em;
  animation: pullout .35s cubic-bezier(.2,.9,.25,1) both;
}
.opened[hidden] { display: none; }
@keyframes pullout { from { opacity: 0; transform: translateY(-1.2em); } to { opacity: 1; transform: none; } }
.opened .cover { position: relative; height: 15em; filter: drop-shadow(0 1.2em 1.4em rgba(20,10,0,.55)) drop-shadow(0 .15em .3em rgba(20,10,0,.35)); }
.card {
  position: relative; padding: 1.1em 1.3em 1em;
  background: repeating-linear-gradient(180deg, transparent 0 1.55em, rgba(64,54,36,.28) 1.55em calc(1.55em + 1px)), linear-gradient(180deg, #faf5e6, #efe7d1);
  background-position: 0 1.7em, 0 0;
  border-radius: .2em; color: #1d1a15; transform: rotate(.5deg);
  box-shadow: 0 1em 1.4em -.9em rgba(20,10,0,.7), inset 0 0 0 1px rgba(0,0,0,.05);
}
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 2.9em; height: 2px; background: rgba(168,86,47,.55); }
.card h3 { margin: 0; font: 700 1.15em/1.55em 'Courier Prime', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .by { font: 400 .8em/1.94em 'Courier Prime', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f68; display: flex; justify-content: space-between; gap: 1em; }
.card .stars { color: #a8562f; letter-spacing: .05em; }
.card p { margin: .4em 0 0; font: 400 1.25em/1.24em var(--pen); color: #2a2418; }
.card .close { position: absolute; right: .7em; top: .55em; border: 0; background: none; cursor: pointer; font: 400 1.1em/1 'Courier Prime', monospace; color: #8a7f68; }
.card .close:hover { color: #a8562f; }

/* the see-all note, stuck to the cork beside the top plank */
.see-all {
  position: absolute; right: -2%; top: -9.5em; width: 11em; padding: 1em 1em .9em; z-index: 3;
  color: #262218; text-decoration: none;
  background: linear-gradient(175deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%), #f4df57;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 .5em .7em -.4em rgba(30,30,40,.6), 0 1px 2px rgba(0,0,0,.25);
  transform: rotate(4deg); font: 400 1.2em/1.05 var(--pen); transition: transform .2s;
}
.see-all b { display: block; font: 400 .85em/1.1 var(--marker); margin-bottom: .25em; }
.see-all:hover { transform: rotate(1deg) translateY(-.15em); }
.see-all::after { content: ""; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0, transparent 45%), #d8322a; box-shadow: 0 5px 5px -2px rgba(20,10,0,.55), inset 0 -2px 3px rgba(0,0,0,.35); }

@media (max-width: 900px) { .opened { grid-template-columns: minmax(0, 1fr); } .opened .cover { height: 11em; } }
@media (max-width: 640px) {
  .plank-top { margin-top: 13em; }
  .plank-bottom { margin-top: 13em; }
  .reading .cover { width: 6.4em; }
  .reading .tape { width: 8em; font-size: .85em; left: 106%; }
  .see-all { right: 0; top: -7.5em; width: 8.5em; font-size: .95em; }
}
@media (prefers-reduced-motion: reduce) { .opened { animation: none; } .book { transition: none; } }