/* ==========================================================================
   Book landing pages — /the-hills-of-burundi/ and /a-thread-to-burundi/
   Requires /styles.css.

   These two pages carried ~190 lines of byte-identical inline CSS, differing
   in thirteen lines. That is exactly the drift the component extraction was
   meant to end, so it lives in one file. Genuinely page-specific rules — the
   essay card on one, the full-bleed plate on the other — stay inline.
   ========================================================================== */
.book {
  max-width: 60ch;
  margin: 0 auto;
  padding: var(--space-2xl) var(--container-padding) var(--space-xl);
}
/* The cover leads. It is where this site's whole palette came from, so it
   earns the space — and it sits on cream, not on the accent, because its own
   bands are that colour and would merge into it. */
.book-hero {
  width: min(820px, 92vw);
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
  margin-bottom: var(--space-xl);
}
.book-cover {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px -18px rgba(42, 35, 24, 0.55);
  border: 1px solid var(--color-border);
}
.book-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.book .book-meta {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-stone);
  margin: var(--space-sm) 0 0;
}
@media (max-width: 640px) {
  .book-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .book-cover { max-width: 220px; }
}
.book .book-title {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}
.book .book-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--color-ink-muted);
  margin: var(--space-xs) 0 0;
}
/* No font-family here. styles.css lists .book p as a reading context and sets
   it in Crimson Pro; this rule used to override it back to Outfit, which made
   these the only pages where narrative prose in James's own voice was set in
   the chrome face. The copy here is the same register as the essays — "a long
   account of a soft, desk-bound man being repeatedly humbled by hills" — so it
   takes the reading face like the essays do. */
.book p {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--color-ink-light);
  margin: 0 0 var(--space-md);
}
.book .lead { font-size: 1.28rem; }
/* The page exists to give the book away, so the download is the band. */
.download-band {
  background: var(--color-accent-bright);
  margin: var(--space-xl) calc(50% - 50vw) var(--space-md);
  padding: var(--space-lg) 0;
  width: 100vw;
}
.download-band-inner {
  max-width: 60ch;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}
.book .download-band-title {
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-band-text);
  margin: 0 0 var(--space-md);
}
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin: 0;
}
.download-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 13rem;
  padding: 0.95rem 1.6rem;
  background: var(--color-accent);
  color: var(--color-band-text);
  text-decoration: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.15rem;
  transition: background var(--transition-base);
}
.download-btn:hover { background: var(--color-accent-hover); }

/* Inside the band the fill inverts, or accent-on-accent would vanish. */
.download-band .download-btn {
  background: var(--color-band-text);
  color: var(--color-accent-hover);
}
.download-band .download-btn:hover { background: #fff; color: var(--color-accent); }
.download-btn .fmt-note {
  font-size: 0.82rem;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.extra-text { display: block; text-align: left; }
.extra-kicker { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.2rem; }
.extra-text strong { display: block; font-family: var(--font-brand); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-ink); margin-bottom: 0.3rem; }
.extra-desc { display: block; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6;
  color: var(--color-ink-muted); margin-bottom: 0.5rem; }
.extra-more { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--color-accent); }

.extra {
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}
.extra-title {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  text-align: center;
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}
.extra-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  text-align: center;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
}
/* Prose, not chrome — this one keeps the reading face .book p gives it. */
.book .book-foot {
  text-align: center;
  font-size: 1rem;
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}
.book-foot a { color: var(--color-accent-hover); }
.book .book-version {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
}