/* Keep book.ejs's cover `sizes` (2x these widths) in sync when changing these. */
.book-detail .book-cover {
  width: min(100%, 70vw, 16rem);
  /* center it: */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48rem) {
  .book-detail .book-cover {
    width: 18rem;
  }
}

.back-container {
   margin-top: 1vh;
   margin-bottom: 2vh;
}

.bookpage__back {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   /* 48px: minimum recommended touch-target size for mobile users */
   width: 48px;
   height: 48px;
   margin-inline-start: calc(-1 * (48px - 24px) / 2);
   color: inherit;
}

.bookpage__back-icon {
   width: 24px;
   height: 24px;
}

.book-detail > div {
   width: 100%;
}

.book-detail__heading > * + * { 
   margin-top: 0.25rem; 
}
.book-detail__heading {
   --book-title-size: clamp(1.75rem, 6vw, 2.5rem);

   text-align: center;
   margin-bottom: calc(1.325rem + 1vh);
   margin-top: 1rem;
}

.book-detail__kicker  {
   font-size: 0.875rem;
   font-weight: 400;
   color: #6b7280;
}

.book-detail__title   {
   font-size: var(--book-title-size);
   font-weight: 700;
}

.book-detail__subtitle{
   font-size: calc(var(--book-title-size) * 0.65);
   color: #212121;
}

.book-detail__description {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.book-detail__description p {
  line-height: 1.7;
}
.book-detail__description > * + * { 
   margin-top: 1.25rem; 
}

/* Staggered entrance: heading, then description, then cover. Text goes first so it
   reads immediately instead of waiting behind the (usually slower) cover image.
   Delays are subtle and the whole sequence (last delay + its own duration)
   finishes well under 1s. */
@keyframes book-detail-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.book-detail .book-cover,
.book-detail__heading,
.book-detail__description {
  opacity: 0;
  animation: book-detail-fade-in 0.35s ease-out forwards;
}

.book-detail__heading     { animation-delay: 0s; }
.book-detail__description { animation-delay: 0.12s; }
.book-detail .book-cover  { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .book-detail .book-cover,
  .book-detail__heading,
  .book-detail__description {
    animation: none;
    opacity: 1;
  }
}