:root {
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: #5b3f27;
  background: #fffff8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
:focus-visible { outline: 2px solid #5b3f27; outline-offset: 8px; }
::selection { background: #f5aa69; color: #5b3f27; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 10; background: #fffff8; padding: 15px; }
.skip-link:focus { top: 10px; }

.shelf-header {
  position: absolute;
  inset: 0 0 auto;
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.identity { font-size: 20px; line-height: 1.35; }
.identity span { display: block; font-size: 17px; font-style: italic; }
main { max-width: 1440px; margin: auto; padding: 0 32px; }
.bookshelf { width: min(760px, 72%); margin: 190px auto 0; }
.book { --cover: #80623f; --ink: #f5e5bb; --edge: #ac8c58; margin: 0 0 68px; scroll-margin-top: 85px; }
.book summary { list-style: none; cursor: pointer; perspective: 1200px; }
.book summary::-webkit-details-marker { display: none; }
.book-spine {
  min-height: 108px;
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  align-items: center;
  gap: 24px;
  position: relative;
  padding: 20px 32px;
  color: var(--ink);
  background-color: var(--cover);
  background-image: linear-gradient(90deg, #0003, transparent 2%, #fff1 3%, transparent 4%, transparent 96%, #0003), linear-gradient(#ffffff24, transparent 7%, #0001 85%, #0005);
  border-radius: 0 0 4px 3px;
  box-shadow: 0 3px 2px #0009, 0 20px 26px -15px #000b;
  transform: rotateY(-3deg);
  transform-style: preserve-3d;
  transition: transform 350ms ease, box-shadow 350ms ease;
}
.book-spine::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  /* Overlap the shared edge to prevent subpixel gaps between the faces. */
  bottom: calc(100% - 1px);
  background: repeating-linear-gradient(0deg, #ffffff18 0 1px, transparent 1px 4px), linear-gradient(100deg, var(--edge), var(--cover));
  transform-origin: bottom;
  transform: rotateX(65deg);
  border-radius: 2px 3px 0 0;
  box-shadow: inset 0 2px #ffffff40;
}
.book-spine::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(90deg, transparent 0 2px, #0003 2px 3px); border-radius: inherit; }
.book summary:hover .book-spine, .book summary:focus-visible .book-spine, .book[open] .book-spine { transform: rotateY(0) translateY(-5px); box-shadow: 0 4px 3px #0009, 0 26px 32px -15px #000c; }
.spine-author { font-size: 16px; line-height: 1.3; }
.spine-title { font-size: 24px; line-height: 1.13; text-wrap: balance; }
.book-1 { --cover: #713b2d; --ink: #f3daa3; --edge: #ac704a; }
.book-1 .spine-title { font-weight: bold; }
.book-2 { --cover: #e6e0cb; --ink: #762e39; --edge: #f6efdb; }
.book-2 .book-spine { border-left: 12px solid #a33745; }
.book-2 .book-spine::before { left: -12px; border-left: 12px solid #a33745; }
.book-3 { --cover: #253f54; --ink: #eee6ca; --edge: #4f6a7c; }
.book-4 { --cover: #d19d48; --ink: #292d26; --edge: #e6c479; }
.book-4 .spine-title { font-style: italic; font-size: 29px; }
.book-5 { --cover: #913d36; --ink: #f5dfb7; --edge: #bc7463; }
.book-6 { --cover: #7b8974; --ink: #182c24; --edge: #b4bda0; }
.book-6 .spine-title { font-weight: bold; }
.book-7 { --cover: #2d5260; --ink: #e8d7ac; --edge: #537a80; }
.book-8 { --cover: #d1bfa2; --ink: #312a24; --edge: #ede0c8; }
.book-9 { --cover: #ddd9cd; --ink: #37352f; --edge: #f0ebdf; }
.book-10 { --cover: #6b3542; --ink: #f3dfbb; --edge: #a16c76; }
.book-11 { --cover: #b5c5c0; --ink: #193d3c; --edge: #d7e0d6; }
.book-12 { --cover: #c2904f; --ink: #32291d; --edge: #e1bb7c; }
.book-13 { --cover: #64526f; --ink: #f1e1c5; --edge: #9c86a4; }
.book-14 { --cover: #c3b06f; --ink: #302f23; --edge: #dfd197; }
.book-15 { --cover: #b8663f; --ink: #fff0d3; --edge: #da9265; }
.book-16 { --cover: #556650; --ink: #f0e7c8; --edge: #91a080; }
.book-17 { --cover: #333f50; --ink: #e0e7e6; --edge: #68768a; }
.book-18 { --cover: #bdcbd2; --ink: #334652; --edge: #e0e7e8; }
.book-notes { max-width: 570px; padding: 30px 32px 4px; font-size: 18px; line-height: 1.6; }
.book-notes h2 { font-size: 30px; line-height: 1.15; font-weight: normal; margin: 12px 0; }
.book-category { text-transform: uppercase; letter-spacing: .12em; font: 10px/1.5 Arial, sans-serif; color: #78624f; }
.notes-author { font-size: 15px; color: #78624f; }
.shelf-footer { width: min(760px, 72%); margin: 110px auto 60px; padding-top: 25px; border-top: 1px solid #d8cdbf; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 15px; line-height: 1.5; color: #78624f; }
.shelf-footer p { margin: 0; }
@media (max-width: 700px) {
  .shelf-header { padding: 22px; }
  .identity { font-size: 18px; }
  .identity span { font-size: 15px; }
  main { padding: 0 24px; }
  .bookshelf, .shelf-footer { width: 100%; }
  .bookshelf { margin-top: 155px; }
  .book { margin-bottom: 50px; }
  .book-spine { min-height: 115px; grid-template-columns: 1fr; gap: 8px 12px; padding: 18px 19px; }
  .spine-author { grid-column: 1; font-size: 12px; }
  .spine-title { grid-column: 1; font-size: 20px; }
  .book-4 .spine-title { font-size: 24px; }
  .book-spine::before { height: 25px; }
  .book-notes { padding: 22px 12px 0; font-size: 17px; }
  .book-notes h2 { font-size: 26px; }
  .shelf-footer { margin-top: 70px; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { transition: none !important; }
}
@media print {
  :root { color: #000; background: #fff; }
  .book-spine { transform: none; box-shadow: none; }
  .book-spine::before { display: none; }
  .book { break-inside: avoid; }
}