.book-list {
  --book-art: url('assets/books/pishi-render-preview.webp');
  --book-surface: color-mix(in srgb, var(--subtle) 80%, var(--paper));
  display: grid;
  gap: var(--space-4);
  border-top: 0;
}
.book-list [data-book="pishi"] { --book-art: url('assets/books/pishi-render.webp'); }
.book-list [data-book="digital-marketing"] { --book-art: url('assets/books/digital-marketing-render.webp'); }
.book-list [data-book="marketing-a-z"] { --book-art: url('assets/books/marketing-a-z-render.webp'); }
.book-list [data-book="jobs-to-be-done"] { --book-art: url('assets/books/jobs-to-be-done-render.webp'); }
.book-list [data-book="project-manager"] { --book-art: url('assets/books/project-manager-render.webp'); }
.book-list [data-book="emotional-intelligence"] { --book-art: url('assets/books/emotional-intelligence-render.webp'); }
.book-list [data-book="game-theory"] { --book-art: url('assets/books/game-theory-render.webp'); }
.book-list li {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: 280px;
  padding: var(--space-5) 40% var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile, 24px);
  background: var(--book-surface);
  color: var(--ink);
}
.book-list li::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 20px;
  width: 32%;
  height: calc(100% - 32px);
  translate: 0 -50%;
  rotate: -10deg;
  background: var(--book-art) center / contain no-repeat;
  filter: saturate(.95) contrast(1.04) brightness(.99);
  opacity: 1;
  content: '';
  pointer-events: none;
  transition: translate 300ms var(--ease);
}
.book-list li::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(100deg, var(--book-surface) 4%, color-mix(in srgb, var(--book-surface) 96%, transparent) 32%, color-mix(in srgb, var(--book-surface) 58%, transparent) 48%, color-mix(in srgb, var(--book-surface) 8%, transparent) 68%, transparent 84%);
  content: '';
  pointer-events: none;
}
.book-list li > div { position: relative; z-index: 1; min-width: 0; }
.book-list .book-index { display: none; }
.book-list h4 { max-width: 28ch; padding-top: var(--space-5); color: var(--ink); font-size: 18px; line-height: 1.4; }
.book-list p, .book-list .book-note { max-width: 36ch; color: var(--muted); }
.book-list .book-topic { position: absolute; z-index: 1; display: block; top: var(--space-5); left: var(--space-5); margin: 0; padding: 0; color: var(--accent-ink); font-size: var(--text-label); }
.book-list .book-buy-links { margin-top: var(--space-4); }
.book-list .book-buy-links a:focus-visible { outline-color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .book-list li:hover::before { translate: -3px calc(-50% - 2px); }
}
@media (max-width: 520px) {
  .book-list li { --book-preview-width: clamp(128px, 42vw, 168px); min-height: 0; padding: 18px 18px calc(var(--book-preview-width) * 1.6 + 16px); }
  .book-list li::before { top: auto; right: auto; bottom: 12px; left: 50%; width: var(--book-preview-width); height: auto; aspect-ratio: 640 / 904; translate: -50% 0; }
  .book-list li::after { display: none; }
  .book-list h4 { font-size: var(--text-body); }
  .book-list .book-topic { top: 18px; left: 18px; }
  .book-list .book-buy-links { position: relative; z-index: 1; width: max-content; }
}
@media (max-width: 520px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .book-list li:hover::before { translate: calc(-50% - 2px) -2px; }
}