/* ==========================================================================
   All Things PM, Book Summaries styles
   Loaded ALONGSIDE /blog/style.css (see scripts/site-chrome.mjs's `head()`,
   `extraStyleHref`). Every generic rule a book page needs already exists
   there (theme tokens, site topbar/mobile-tabbar/footer, .btn/.tag, .page/
   .frame, .masthead, .grid/.blog-card/.featured, .poster, .crumbs,
   .article-grid/.post-body/.sidebar/.side-toc/.side-cta) -- book content is
   plain structured data (not Markdown), so its main-column body reuses
   .post-body's existing h2/ul/blockquote styling directly rather than
   duplicating it. This file only adds what's genuinely new: portrait book
   cover art, the book detail header, and the chapter-by-chapter blocks.
   ========================================================================== */

/* Book covers are portrait (2:3, matching the in-app screen's own aspect
   ratio and every real book-cover photo), unlike the site's landscape blog
   illustrations or podcasts' square cover art -- override blog/style.css's
   16:11 card ratio everywhere a book cover appears. */
.book-cover { aspect-ratio: 2 / 3; }
@media (max-width: 768px) {
  .grid .card-illo.book-cover { width: 74px; height: 111px; aspect-ratio: 2 / 3; }
}

/* Book detail header: portrait cover beside title/tag/excerpt/actions,
   mirroring podcasts' .episode-head two-column shape but with a taller,
   narrower cover box to match the 2:3 ratio. */
.book-head {
  display: flex; gap: 32px; padding: 40px 40px 32px; border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap;
}
.book-head-cover { width: 180px; height: 270px; flex: none; border: 1px solid var(--color-line); }
/* blog/style.css's `.cover img` sets a fixed 520px height for the full-width
   blog-post banner treatment; that leaks onto this portrait thumbnail too
   since .book-head-cover carries the shared `.cover` class. Override back
   to a height that matches this element's own box. */
.book-head-cover img { height: 100%; object-position: center; }
.book-head-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.book-head-body h1 { font-size: 34px; line-height: 1.06; letter-spacing: -0.015em; margin-top: 8px; }
.book-head-body .meta { margin-top: 10px; font-size: 14px; color: var(--color-neutral-600); }
.book-head-body .lede { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--color-neutral-700); max-width: 560px; }
.book-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }

/* Chapter-by-chapter section: each chapter is its own block, a small mono
   kicker label above a sub-heading, then its typed blocks (paragraph /
   bullets / quote / heading) rendered with .post-body's existing rules. */
.chapter-by-chapter-head { margin-top: 48px !important; }
.chapter { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-divider); }
.chapter:first-of-type { border-top: 0; }
.chapter-kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent);
}
.chapter-title { font-size: 19px; line-height: 1.2; margin-top: 4px; }
.chapter > h4 { font-size: 14px; letter-spacing: 0.02em; margin-top: 20px; color: var(--color-text); }

@media (max-width: 900px) {
  .book-head { padding: 28px 20px 24px; gap: 20px; }
  .book-head-cover { width: 120px; height: 180px; }
  .book-head-body h1 { font-size: 26px; }
}