.book-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  gap: 18px;
}

.book-grid .book-card {
  display: flex;
  flex-direction: column;
}

.book-grid .book-art.cover-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

.book-grid .book-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px;
}
.book-grid .book-body h3 { font-size: 21px; }
.book-grid .book-body p { font-size: 14px; }
.book-grid .purchase-links { margin-top: auto; padding-top: 16px; }

.book-card.moonlight .book-art {
  background: linear-gradient(145deg, #233f79, #10234d);
}

.book-card.bushfire .book-art {
  background: linear-gradient(145deg, #d79a3f, #75472d);
}

.book-cover-benji {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.book-cover-ernie {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.book-coming-soon {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #f8e7b3;
  color: #6d4a18;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .book-grid { grid-template-columns: 1fr; }
}

.youtube-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: clamp(40px, 8vw, 110px);
  padding: 90px clamp(24px, 8vw, 130px);
  background: #f4b942;
  color: #20352f;
}

.youtube-copy { max-width: 760px; }
.youtube-copy h2 {
  margin: 0 0 22px;
  font: 700 clamp(2.5rem, 4.5vw, 4.5rem)/1.05 "Playfair Display", serif;
  letter-spacing: -.035em;
}
.youtube-copy > p:not(.eyebrow) { max-width: 680px; }
.youtube-button {
  margin-top: 20px;
  background: #c4302b;
  color: white;
}
.youtube-button:hover { background: #a9231f; transform: translateY(-2px); }
.youtube-button span { margin-left: 8px; }
.youtube-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.youtube-actions .youtube-button { margin-top: 0; }
.youtube-watch-button { border: 1px solid rgba(32,53,47,.35); color: #20352f; background: rgba(255,255,255,.35); }
.youtube-watch-button:hover { background: rgba(255,255,255,.65); transform: translateY(-2px); }

.purchase-links .video-link { background: #c4302b; border-color: #c4302b; color: white; }
.purchase-links .video-link:hover { background: #a9231f; }

.youtube-qr {
  display: grid;
  justify-items: center;
  padding: 16px 16px 20px;
  border-radius: 22px;
  background: white;
  color: #20352f;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(32,53,47,.18);
}
.youtube-qr img { width: 200px; height: 200px; }
.youtube-qr strong { margin-top: 8px; font-size: 18px; }
.youtube-qr small { color: #66736f; font-size: 12px; }

@media (max-width: 760px) {
  .youtube-section { grid-template-columns: 1fr; text-align: center; }
  .youtube-copy { margin: auto; }
  .youtube-qr { width: 232px; margin: auto; }
}

.family-club {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.4fr);
  gap: clamp(42px, 7vw, 100px);
  padding: 100px clamp(24px, 8vw, 130px);
  background: #20352f;
  color: #fffaf0;
}
.club-intro { align-self: center; max-width: 560px; }
.club-intro h2 {
  margin: 0 0 22px;
  font: 700 clamp(2.5rem, 4.6vw, 4.7rem)/1.02 "Playfair Display", serif;
  letter-spacing: -.04em;
}
.club-intro > p:not(.eyebrow) { color: #e2e9df; font-size: 18px; line-height: 1.7; }
.club-intro .adult-note { margin-top: 24px; color: #b9c9c2; font-size: 14px; }
.club-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.club-plan {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 26px;
  background: rgba(255,255,255,.08);
}
.club-plan.family-plan { background: #f4b942; color: #20352f; border-color: #f4b942; }
.club-label { margin: 0 0 20px; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 700; }
.club-plan h3 { margin: 0; font: 700 32px/1.1 "Playfair Display", serif; }
.club-price { margin: 16px 0 0; font-size: 28px; font-weight: 700; }
.club-price small { font-size: 14px; font-weight: 600; }
.annual-price { margin: 3px 0 0; font-size: 14px; }
.club-plan ul { display: grid; gap: 12px; margin: 26px 0 30px; padding-left: 20px; line-height: 1.45; }
.club-status {
  margin-top: auto;
  padding: 13px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}
.family-plan .club-status { background: rgba(32,53,47,.13); }

@media (max-width: 980px) {
  .family-club { grid-template-columns: 1fr; }
  .club-intro { max-width: 720px; }
}
@media (max-width: 620px) {
  .club-plans { grid-template-columns: 1fr; }
  .club-plan { min-height: auto; }
  .club-status { margin-top: 20px; }
}