.reading-page { min-height: 100svh; }
.reading-shelf {
  --book-scale: 1;
  width: 100%;
  margin: clamp(40px, 7vw, 94px) 0 0;
}
.bookshelf {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 66px 0;
  padding: 28px 16px 12px;
  margin: 0;
  list-style: none;
}
.shelf-book {
  position: relative;
  width: calc(var(--book-width) * var(--book-scale) * 1px);
  height: calc(var(--book-height) * var(--book-scale) * 1px);
  flex: 0 0 auto;
  /* Tuck the transparent, angled cover edges against the neighboring book. */
  margin-inline-end: calc(-7px * var(--book-scale));
  perspective: 800px;
}
.shelf-book:has(.book:hover, .book:focus-visible, .book.is-open) { z-index: 2; }
.book {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--book-ink);
  cursor: pointer;
  transform: rotate(var(--book-tilt));
  transform-origin: center 95%;
  transition: transform 280ms cubic-bezier(.2, .65, .25, 1), filter 280ms ease;
  -webkit-tap-highlight-color: transparent;
}
.book-painting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.book:has(.book-painting) .book-spine { visibility: hidden; }
.book.has-notes {
  --bookmark-image: url('./assets/reading/watercolor-bookmark.webp');
  --bookmark-tassel: url('./assets/reading/watercolor-tassel-rose.webp?v=2');
  --bookmark-position: 34%;
  --bookmark-insertion: 18%;
  --bookmark-width: 24px;
  --bookmark-height: 25px;
  --tassel-width: 38px;
  --tassel-direction: 1;
}
.book[data-bookmark="sage-tab"] {
  --bookmark-image: url('./assets/reading/watercolor-bookmark-sage.webp');
  --bookmark-tassel: url('./assets/reading/watercolor-tassel-sage.webp?v=2');
  --bookmark-position: 63%;
  --bookmark-width: 26px;
  --bookmark-height: 22px;
  --tassel-width: 32px;
  --tassel-direction: -1;
}
.book.has-notes::before,
.book.has-notes::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.book.has-notes::after {
  z-index: 1;
  left: var(--bookmark-position);
  top: calc(var(--bookmark-insertion) - var(--bookmark-height) * var(--book-scale));
  width: calc(var(--bookmark-width) * var(--book-scale));
  height: calc(var(--bookmark-height) * var(--book-scale));
  background: var(--bookmark-image) center / 100% 100% no-repeat;
  /* Project the ribbon's width along a page edge (back and up), while its
     length stays upright with the book. The base is inside the page block. */
  transform: matrix(.24, -1.2, 0, 1, 0, 0);
  transform-origin: left bottom;
}
/* A narrow page crease covers the inserted end of the painted tab. */
.book.has-notes::before {
  z-index: 2;
  left: var(--bookmark-position);
  top: calc(var(--bookmark-insertion) - 1px * var(--book-scale));
  width: calc((var(--bookmark-width) + 1px) * var(--book-scale));
  height: calc(1.5px * var(--book-scale));
  background: linear-gradient(to bottom, rgb(106 96 78 / 25%), #e6e1cc 55%, transparent);
  transform: matrix(.24, -1.2, 0, 1, 0, 0);
  transform-origin: left bottom;
}
.book-tassel {
  position: absolute;
  z-index: 3;
  /* The attachment is 2/3 across the painted frame, 5px below its top. */
  left: calc(var(--bookmark-position) - var(--tassel-width) * .666667 * var(--book-scale));
  top: calc(var(--bookmark-insertion) - (var(--bookmark-height) + 5px) * var(--book-scale));
  width: calc(var(--tassel-width) * var(--book-scale));
  height: calc(124px * var(--book-scale));
  background: var(--bookmark-tassel) center / 100% 100% no-repeat;
  /* Mirror around the attachment point to drape toward either spine edge. */
  transform: scaleX(var(--tassel-direction));
  transform-origin: 66.6667% 0;
  pointer-events: none;
}
.book-spine {
  position: absolute;
  inset: 10% 18% 5% 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 6px;
  writing-mode: vertical-rl;
  text-align: left;
  pointer-events: none;
}
/* Keep titles usable if a painting is unavailable. */
.book:not(:has(.book-painting)) .book-spine {
  background: var(--book-color);
  border-radius: 2px;
}
.book-title {
  font: 400 calc(27px * var(--book-scale))/1 'Reenie Beanie', cursive;
}
.book-author {
  font: 400 calc(11px * var(--book-scale))/1.1 Georgia, serif;
}
@media (hover: hover) and (pointer: fine) {
  .book:hover {
    transform: translateY(-20px) translateZ(38px) rotate(-4deg);
    filter: drop-shadow(8px 13px 5px rgb(52 40 42 / 16%));
  }
}
.book:focus-visible, .book.is-open {
  transform: translateY(-20px) translateZ(38px) rotate(-4deg);
  filter: drop-shadow(8px 13px 5px rgb(52 40 42 / 16%));
}
.book:focus-visible { outline: 2px solid var(--d2); outline-offset: 6px; }
.shelf-hint {
  margin: 24px 0 0 14px;
  color: var(--mute);
  font: 400 28px/1.2 'Reenie Beanie', cursive;
}
.book-notes {
  width: min(530px, calc(100vw - 40px));
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 1px solid rgb(110 93 91 / 12%);
  border-radius: 2px 5px 3px 2px;
  color: var(--ink);
  background: var(--paper) url('./assets/paper-texture.png') repeat;
  background-size: 400px;
  box-shadow: 0 18px 70px rgb(54 44 45 / 16%);
}
.book-notes::backdrop { background: rgb(58 48 56 / 22%); }
.book-notes[open] { animation: unfold-note 200ms ease-out; }
.notes-paper { padding: 38px 42px 44px; }
.notes-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
}
.notes-close svg { width: 20px; height: 20px; }
.notes-close:hover { color: var(--ink); background: rgb(112 100 107 / 6%); }
.notes-close:focus-visible { outline: 2px solid var(--d2); outline-offset: -3px; }
.notes-paper h2 {
  margin: 0;
  padding-right: 10px;
  font: 400 42px/1.05 'Reenie Beanie', cursive;
}
.notes-author { margin: 12px 0 0; color: var(--mute); font: 400 24px/1.25 'Reenie Beanie', cursive; }
.notes-content { margin-top: 34px; font: 400 28px/1.4 'Reenie Beanie', cursive; overflow-wrap: anywhere; }
.notes-content p { margin: 0 0 16px; white-space: pre-line; }
.notes-content p:last-child { margin-bottom: 0; }
.notes-illustrated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(90px, 27%, 120px);
  align-items: end;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 14px;
}
.notes-illustrated p { margin: 0; }
.notes-sketch {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: translateY(14px);
}
@keyframes unfold-note {
  from { opacity: 0; transform: translateY(8px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@media (max-width: 600px) {
  .reading-shelf { --book-scale: .7; margin-top: 38px; }
  .bookshelf { row-gap: 42px; padding-inline: 8px; }
  .shelf-hint { max-width: 250px; font-size: 26px; margin-left: 6px; }
  .notes-paper { padding: 38px 26px 32px; }
}
@media (max-width: 360px) {
  .reading-shelf { --book-scale: .59; }
}
@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
  .book:hover, .book:focus-visible, .book.is-open { transform: rotate(var(--book-tilt)); }
  .book-notes[open] { animation: none; }
}
@media print {
  .book { transform: none; filter: none; }
  .shelf-hint { display: none; }
}