/* Dotty Retro DS · shelf.css */

/* iBooks-style wooden shelf */
.site-section.site-books-shelf {
  max-width: none;
  margin: 48px 0;
  padding: 72px 0 80px;
  border: 0;
  background-color: #4a2a14;
  background-image:
    linear-gradient(180deg, rgba(30, 14, 6, 0.28), rgba(30, 14, 6, 0.08) 28%, rgba(20, 8, 2, 0.35)),
    url("/assets/images/styles-lab/ibooks-wood.png");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 -18px 36px rgba(0, 0, 0, 0.28);
}
.site-section.site-books-shelf > .site-section-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
/* Title + CTA stay on the page frame; shelf can run wider */
.site-section.site-books-shelf .site-section-title,
.site-section.site-books-shelf .site-bookshelf-cta {
  max-width: var(--ds-max);
  margin-left: auto;
  margin-right: auto;
}
.site-section.site-books-shelf .site-bookshelf-cta {
  margin-top: 18px;
}
.site-section.site-books-shelf .site-section-title {
  color: #f6ebcf;
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.18), 0 2px 8px rgba(0, 0, 0, 0.55);
}
.site-section.site-books-shelf .site-section-title strong {
  color: #fff8e8;
}
.site-section.site-books-shelf .ds-text-cta {
  color: #f0d9a4;
}
.site-section.site-books-shelf .ds-text-cta:hover {
  color: #fff4d6;
}
.site-bookshelf {
  position: relative;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.site-books-row {
  position: relative;
}
.site-books {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
  padding: 12px 8px 0;
  align-items: end;
  position: relative;
  z-index: 3;
}
@media (max-width: 900px) {
  .site-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
}
@media (max-width: 520px) {
  .site-books {
    grid-template-columns: 1fr;
  }
}

/*
  Shelf: trapezoid deck + rounded front rail.
  Deck and front share one width so near corners meet the lip ends.
  Front must NOT overlap the deck (that hid the full-width bottom edge).
*/
.site-shelf {
  position: relative;
  margin: 0 2px 0 -28px; /* a little extra rail on the left */
  pointer-events: none;
}
.site-shelf-deck {
  position: relative;
  z-index: 2; /* behind covers */
  height: 11px;
  margin: 0;
  border-radius: 0;
  /* Bottom edge = 100% width (matches lip). Top only slightly narrower. */
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  /* Darker at the back (top), lighter toward the front edge */
  background: linear-gradient(
    180deg,
    #5c3416 0%,
    #7a4a22 50%,
    #9a6234 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 rgba(255, 230, 180, 0.16);
}
.site-shelf-front {
  position: relative;
  z-index: 5; /* in front of tucked book bottoms */
  height: 26px;
  margin: 0;
  border-radius: 0 0 12px 12px / 0 0 16px 16px;
  background:
    linear-gradient(
      180deg,
      #c4894a 0%,
      #a86a38 16%,
      #7a4520 48%,
      #4e2a12 82%,
      #2e180a 100%
    ),
    url("/assets/images/styles-lab/ibooks-wood.png");
  background-size: auto, 420px auto;
  background-position: center, center;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.55),
    0 8px 14px rgba(0, 0, 0, 0.4),
    0 3px 4px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 230, 180, 0.45),
    inset 0 -8px 14px rgba(0, 0, 0, 0.45);
}
.site-shelf-front::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 100%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.22) 42%,
    transparent 72%
  );
}

.site-book {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  color: #ead7b2;
}
.site-book:hover .site-book-cover,
.site-book:focus-visible .site-book-cover {
  transform: perspective(560px) rotateY(-6deg) translateY(-8px);
  box-shadow:
    8px 10px 18px rgba(0, 0, 0, 0.45),
    3px 0 8px rgba(0, 0, 0, 0.25),
    0 16px 24px rgba(0, 0, 0, 0.35),
    0 18px 12px -6px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 230, 180, 0.14);
}
.site-book:hover .site-book-title,
.site-book:focus-visible .site-book-title {
  color: #fff6dc;
}

.site-book-cover {
  position: relative;
  z-index: 4;
  flex: 0 0 118px;
  align-self: flex-end;
  width: 118px;
  height: 170px;
  margin: 0 0 -6px; /* rest on the trapezoid surface */
  border-radius: 2px 3px 1px 1px;
  overflow: visible;
  background: #1a0e08;
  transform: perspective(560px) rotateY(-6deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow:
    /* cast onto the wood wall behind */
    8px 10px 18px rgba(0, 0, 0, 0.45),
    3px 0 8px rgba(0, 0, 0, 0.25),
    /* contact on the deck */
    0 10px 8px -4px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 230, 180, 0.12);
}
.site-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px 3px 1px 1px;
}
.site-book-cover::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: -8px;
  width: 8px;
  border-radius: 0 2px 2px 0;
  background:
    linear-gradient(90deg, #e8e0d0, #f7f2e8 40%, #d4cbb8),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 3px
    );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(0, 0, 0, 0.2),
    2px 0 4px rgba(0, 0, 0, 0.22);
  transform: perspective(200px) rotateY(30deg);
  transform-origin: left center;
  z-index: -1;
}
.site-book-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.14) 3%,
    rgba(255, 255, 255, 0.28) 5.5%,
    rgba(255, 255, 255, 0.07) 9%,
    transparent 16%,
    transparent 88%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.site-book-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 24px;
  align-self: center;
}
.site-book-author {
  display: block;
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: #d8c49a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-book-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #f6ebcf;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-book-tagline {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(232, 211, 168, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .site-book-cover {
    flex-basis: 110px;
    width: 110px;
    height: 158px;
  }
}