:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #0b1020; }
body {
  margin: 0;
  min-height: 100vh;
  color: #e9e8e4;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: radial-gradient(circle at 50% -9rem, #26304b 0, #131a2e 23rem, #0b1020 48rem);
}
.page { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
header { padding: 94px 0 76px; text-align: center; }
h1 { margin: 0; font-size: clamp(3.7rem, 9vw, 5.3rem); font-weight: 400; line-height: 1.05; letter-spacing: .04em; }
.shelf-title { margin: 0 0 28px; font-size: 2.3rem; font-weight: 400; line-height: 1.3; letter-spacing: .08em; text-align: center; }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 44px; }
.book { min-width: 0; position: relative; }
.book summary { display: block; cursor: pointer; list-style: none; }
.book summary::-webkit-details-marker { display: none; }
.book summary:focus-visible { outline: 2px solid #e0d4aa; outline-offset: 6px; border-radius: 3px; }
.cover {
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 3;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-cover { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .20s ease-in-out; }
.book summary:active .book-cover { transform: scale(.985); }
.book-info {
  display: block;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 15px 15px;
  color: #f7f5ef;
  background: rgba(20, 27, 45, .97);
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .27s ease-in-out, transform .27s ease-in-out;
}
.book[open] .book-info { opacity: 1; transform: translateY(0); }
.book-title, .book-author { display: block; }
.book-title { font-size: .84rem; font-weight: 550; line-height: 1.5; }
.book-author { margin-top: 6px; color: #b7c0d6; font-size: .76rem; line-height: 1.45; }
footer { padding: 100px 0 50px; text-align: center; }
footer a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; }
footer a:focus-visible { outline: 2px solid #e0d4aa; outline-offset: 3px; }
.source-icon { display: block; width: 28px; height: 28px; filter: grayscale(1) saturate(1) brightness(.65); transition: filter .3s ease-in-out; }
footer a:hover .source-icon, footer a:focus-visible .source-icon { filter: grayscale(0) saturate(1) brightness(1); }
@media (hover: hover) and (pointer: fine) {
  .book[open] .book-info { opacity: 0; transform: translateY(6px); }
  .book:hover .book-info,
  .book summary:focus-visible .book-info { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .book-cover, .book-info, .source-icon { transition: none; }
  .book-info, .book[open] .book-info { transform: none; }
  .book summary:active .book-cover { transform: none; }
}
@media (max-width: 760px) {
  .page { padding: 0 22px; }
  header { padding: 76px 0 62px; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 520px) {
  header { padding: 64px 0 54px; }
  .shelf-title { font-size: 2rem; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 16px; }
  footer { padding-top: 76px; }
}