/* Subject bookshelf: flat style, upright spines in a dark wooden case. */
.shelf { container-type: inline-size; margin: 4px 0 8px; }
.case {
  background: #6e3b33;
  border-radius: 6px;
  padding: 12px 12px 16px;
  box-shadow: var(--sh-2);
}
.case__back {
  height: 230px;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1e0b08, #2c110c);
  border-radius: 2px;
  overflow: visible;
}

/* A spine */
.book {
  --g: #f4b41a;                                         /* gold bands */
  --ink: #fdf3dc;
  --lt: color-mix(in srgb, var(--c) 72%, white);
  --dk: color-mix(in srgb, var(--c) 62%, black);
  position: relative; display: block; flex: 1 1 var(--w); min-width: 0;
  max-width: calc(var(--w) * 1.5); height: var(--h);
  perspective: 600px; transform-origin: 30% 100%;
  transition: transform .35s cubic-bezier(.22, .8, .28, 1);
  text-decoration: none; color: var(--ink);
}
.book--subject { flex: 1 0 var(--w); max-width: calc(var(--w) * 1.35); cursor: pointer; }
.book--subject:focus-visible { outline: 2px solid #f4b41a; outline-offset: 3px; border-radius: 2px; }

/* Cream pages behind the cover, seen only when the cover swings open a little. */
.book__pages {
  position: absolute; inset: 3px 1px 3px 2px; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .16) 0 1px, transparent 1px 4px),
    #f7efdc;
}
.book__cover {
  position: absolute; inset: 0; border-radius: 2px 3px 2px 2px;
  transform-origin: left center; backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .2) 0 14%, transparent 14% 80%, rgba(0, 0, 0, .2) 80%),
    var(--bands, none),
    var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.22, .8, .28, 1);
}

/* Spine styles */
.v-bands { --bands: linear-gradient(180deg, transparent 0 8%, var(--g) 8% 11%, transparent 11% 14%, var(--g) 14% 16.5%, transparent 16.5% 82%, var(--g) 82% 84.5%, transparent 84.5% 88%, var(--g) 88% 91%, transparent 91%); }
.v-thin { --bands: linear-gradient(180deg, transparent 0 5%, var(--g) 5% 6.5%, transparent 6.5% 9%, var(--g) 9% 10.5%, transparent 10.5% 89.5%, var(--g) 89.5% 91%, transparent 91% 93.5%, var(--g) 93.5% 95%, transparent 95%); }
.v-caps { --bands: linear-gradient(180deg, var(--lt) 0 9%, var(--g) 9% 11%, transparent 11% 89%, var(--g) 89% 91%, var(--lt) 91%); }
.v-panel { --bands: linear-gradient(180deg, transparent 0 6%, var(--dk) 6% 19%, var(--g) 19% 20.5%, transparent 20.5% 86%, var(--g) 86% 87.5%, var(--dk) 87.5% 94%, transparent 94%); }
.v-slot { --bands: linear-gradient(180deg, transparent 0 7%, var(--lt) 7% 18%, var(--g) 18% 19.5%, transparent 19.5% 92%, var(--g) 92% 93.5%, transparent 93.5%); }
.v-gems { --bands: linear-gradient(180deg, var(--lt) 0 6%, transparent 6% 14%, var(--g) 14% 15.5%, transparent 15.5% 84.5%, var(--g) 84.5% 86%, transparent 86%); }

/* Label panel with the subject's name running up the spine */
.book__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--serif); font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  line-height: 1; white-space: nowrap; color: var(--ink);
  padding: 9px 5px; border-radius: 2px;
  background: color-mix(in srgb, var(--c) 82%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 70%, transparent);
}
.book--fill .book__label { display: none; }
.v-slot .book__label { display: block; width: 36%; height: 34%; padding: 0; background: var(--dk); box-shadow: none; margin-top: 8%; }
.ink-dark .book__label { background: color-mix(in srgb, var(--c) 55%, white); }

/* Small gold diamond near the bottom */
.book__gem { display: none; position: absolute; left: 50%; bottom: 23%; width: 8px; height: 8px; margin-left: -4px; background: var(--g); transform: rotate(45deg); }
.book--fill.v-bands .book__gem, .v-gems .book__gem { display: block; }
.v-gems .book__gem { top: 9%; bottom: auto; }

/* Arrival and hover: the cover opens a crack, inside the book's own slot, and closes again. */
.book--subject .book__cover { animation: peek-open 1s cubic-bezier(.45, .05, .25, 1) calc(.2s + var(--d, 0s)) backwards; }
@keyframes peek-open {
  0%, 10% { transform: rotateY(0); }
  45%, 60% { transform: rotateY(-28deg); }
  100% { transform: rotateY(0); }
}
.book--subject:hover, .book--subject:focus-visible { transform: translateY(-6px); }
.book--subject:hover .book__cover, .book--subject:focus-visible .book__cover { transform: rotateY(-24deg); }

/* Click: the book tilts out of the shelf, then falls off screen (see js/shelf.js). */
.book--gone { visibility: hidden; }
.book--falling {
  position: fixed; z-index: 1000; margin: 0; max-width: none; pointer-events: none;
  transform-origin: 0% 100%;
  animation: book-fall 1.25s both;
}
.book--falling .book__cover { animation: none; transform: rotateY(-10deg); }
@keyframes book-fall {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  34% { transform: translate(-4px, -16px) rotate(-14deg) scale(1.08); filter: drop-shadow(8px 10px 10px rgba(0, 0, 0, .35)); animation-timing-function: linear; }
  42% { transform: translate(-6px, -14px) rotate(-17deg) scale(1.08); filter: drop-shadow(8px 10px 10px rgba(0, 0, 0, .35)); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  100% { transform: translate(-60px, var(--fall, 110vh)) rotate(-62deg) scale(1.08); filter: drop-shadow(8px 10px 10px rgba(0, 0, 0, .35)); }
}

@media (prefers-reduced-motion: reduce) {
  .book, .book__cover { transition: none; }
  .book--subject .book__cover { animation: none; }
  .book--subject:hover, .book--subject:focus-visible { transform: none; }
  .book--subject:hover .book__cover, .book--subject:focus-visible .book__cover { transform: none; }
}

/* Narrower shelves drop the optional filler books; phones also tighten the spines. */
@container (max-width: 760px) { .book.opt { display: none; } }
@container (max-width: 560px) {
  .case { padding: 9px 9px 13px; }
  .case__back { height: 200px; gap: 2px; padding: 0 6px; }
  .book--subject { flex: 1 1 var(--w); min-width: 32px; }
  .book--fill { min-width: 12px; }
  .book__label { font-size: .74rem; padding: 7px 4px; }
}