/*
  The library bookcase (public/library/shelves.js). Books stand cover-out
  on pastel planks; each shelf is a wrapping row whose background draws a
  plank at the foot of every line, so a shelf that wraps on a phone still
  has a plank under each line of books.
*/
.bookcase {
  --book-w: 9rem;
  --book-h: 13rem;
  --row: 15rem;
  --plank: 0.9rem;
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem 0.75rem 0.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--peach) 28%, var(--paper));
  border: 2px solid color-mix(in srgb, var(--peach) 70%, var(--paper));
}
@media (max-width: 40rem) {
  .bookcase { --book-w: 6.4rem; --book-h: 9.4rem; --row: 11rem; padding-inline: 0.4rem; }
}

.shelf {
  min-height: var(--row);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  column-gap: 1rem;
  padding-inline: 0.5rem;
  background: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--row) - var(--plank)),
    color-mix(in srgb, var(--peach) 75%, var(--candyfloss-deep)) calc(var(--row) - var(--plank)) calc(var(--row) - var(--plank) + 0.25rem),
    var(--peach) calc(var(--row) - var(--plank) + 0.25rem) var(--row));
  border-radius: 0 0 0.6rem 0.6rem;
}
@media (max-width: 40rem) { .shelf { column-gap: 0.5rem; padding-inline: 0.2rem; } }

.book {
  box-sizing: border-box;
  width: var(--book-w);
  height: var(--book-h);
  margin-top: calc(var(--row) - var(--plank) - var(--book-h));
  margin-bottom: var(--plank);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.5rem 0.45rem;
  border: 0;
  border-radius: 0.4rem 0.9rem 0.9rem 0.4rem;
  background: var(--tint);
  /* Spine shading on the left edge. */
  box-shadow: inset 0.45rem 0 0 rgb(0 0 0 / 0.08), 0 0.4rem 0.8rem -0.4rem rgb(74 37 69 / 0.5);
  color: #4a2545;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.3,1.6,.5,1);
}
.book:hover, .book:focus-visible { transform: translateY(-0.4rem) rotate(var(--tilt)); }
.book__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: center;
  background: #fffaf3;
  border-radius: 0.5rem;
  padding: 0.25rem 0.4rem;
  width: 100%;
}
.book img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border-radius: 50% / 40%;
  border: 3px solid #fffaf3;
  background: #fffaf3;
}
.book__author { font-family: var(--font-display); font-size: 0.75rem; font-weight: 500; }
@media (max-width: 40rem) {
  .book__title { font-size: 0.72rem; padding: 0.2rem 0.25rem; }
  .book__author { font-size: 0.62rem; }
}