/* ============================================================
   9 · Books & Publications — grey; centre-focused book carousel
   ============================================================ */
.books { background: var(--c-grey); }

/* one card in focus, neighbours scaled down and dimmed; coverflow.js
   only sets --d (offset from centre) and --k (distance), CSS does the rest */
.books__carousel {
  --k-card: clamp(200px, 17vw, 250px);
  --k-step: calc(var(--k-card) * .72);
  position: relative;
  max-width: calc(var(--k-card) * 4);
  margin-inline: auto;
}
.books__stage {
  display: grid;            /* all cards share one cell: height = tallest card */
  overflow: hidden;
  padding: 12px 0 22px;     /* room for the focused card's shadow */
}
.books__card {
  --d: 0;
  --k: 0;
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--k-card);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(var(--d) * var(--k-step))) scale(calc(1 - var(--k) * .14));
  opacity: calc(1 - var(--k) * .42);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
/* no-JS: a plain horizontal scroller beats a pile of stacked cards */
.books__stage:not(.is-ready) { grid-auto-flow: column; justify-content: start; gap: 24px; overflow-x: auto; }
.books__stage:not(.is-ready) .books__card { grid-area: auto; transform: none; opacity: 1; }

.books__cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px -22px rgba(38, 37, 31, .55);
  transition: box-shadow var(--dur-base) var(--ease);
}
.books__card.is-active .books__cover { box-shadow: 0 28px 56px -20px rgba(38, 37, 31, .62); }
/* only the focused card carries its copy — neighbours stay covers, so no
   two cards' text can overlap */
.is-ready .books__card:not(.is-active) .books__title,
.is-ready .books__card:not(.is-active) .books__year,
.is-ready .books__card:not(.is-active) .books__text,
.is-ready .books__card:not(.is-active) .books__cta { opacity: 0; }
.books__cover--placeholder {
  background: linear-gradient(160deg, #3a372e, #2c2a22);
  display: grid;
  place-items: center;
}
.books__cover--placeholder span {
  font-family: var(--f-accent);
  font-size: 15px;
  color: #9d947e;
  text-align: center;
  padding: 0 14px;
}
/* copy reads wider than the cover and centred under it — set on every card
   (not just the focused one) so the row height never jumps as it advances */
.books__title,
.books__year,
.books__text {
  align-self: center;
  width: min(440px, 84vw);
  text-align: center;
}
.books__cta { align-self: center; }

.books__title {
  font-family: var(--f-accent);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.3;
  color: var(--c-maroon);
  margin-top: 20px;
  transition: opacity var(--dur-base) var(--ease);
}
.books__year {
  font-family: var(--f-mont);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .22em;
  color: var(--c-muted-lt);
  margin-top: 6px;
  transition: opacity var(--dur-base) var(--ease);
}
.books__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
  margin-top: 12px;
  flex: 1; /* equal-height cards, buttons bottom-aligned */
  transition: opacity var(--dur-base) var(--ease);
}
.books__cta {
  margin-top: 18px;
  justify-content: center;
  font-family: var(--f-mont);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 13px 16px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
}

/* arrows + dots */
.books__arrow {
  position: absolute;
  top: calc(12px + var(--k-card) * .75);  /* centred on the covers */
  transform: translateY(-50%);
  z-index: 20;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-maroon);
  color: var(--c-cream-lt);
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.books__arrow:hover { background: var(--c-maroon-dk); transform: translateY(-50%) scale(1.06); }
.books__arrow--prev { left: 0; }
.books__arrow--next { right: 0; }

.books__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.books__dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(38, 37, 31, .28);
  transition: width var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.books__dots button[aria-selected="true"] { width: 28px; background: var(--c-maroon); }

@media (max-width: 1024px) {
  .books__carousel { --k-card: clamp(190px, 26vw, 240px); }
}
@media (max-width: 600px) {
  .books__carousel {
    --k-card: min(62vw, 240px);
    --k-step: calc(var(--k-card) * .8);
    max-width: 100%;
  }
  .books__arrow { width: 40px; height: 40px; font-size: 23px; }
}