/* Book feature — Apple-style centerpiece */
.book-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--ink);
  color: oklch(0.92 0.02 70);
  position: relative;
  overflow: hidden;
}
.book-section::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, oklch(0.42 0.12 25 / 0.4), transparent 60%);
  pointer-events: none;
}
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.book-cover-wrap {
  position: relative;
  aspect-ratio: 5/7;
  max-width: 460px;
  margin: 0 auto;
  perspective: 1400px;
}
/* When both front and back covers are shown, switch to a small stacked layout */
.book-cover-wrap:has(.book-cover-back) {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
  max-width: 600px;
}
.book-cover-back { transform: rotateY(8deg) translateY(28px); opacity: 0.92; }
.book-cover-wrap:has(.book-cover-back):hover .book-cover-back { transform: rotateY(4deg) translateY(20px); }
.book-cover {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 4px;
  background: linear-gradient(135deg, oklch(0.34 0.08 30), oklch(0.2 0.06 30));
  box-shadow: var(--shadow-3), inset -6px 0 16px oklch(0.16 0.04 30 / 0.5);
  padding: 56px 44px;
  color: oklch(0.95 0.04 70);
  transform: rotateY(-14deg);
  transition: transform 0.6s var(--ease-out);
  overflow: hidden;
}
.book-cover-wrap:hover .book-cover { transform: rotateY(-6deg); }
.book-cover .spine-edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, oklch(0.16 0.04 30), oklch(0.22 0.05 30) 70%, transparent);
}
.book-cover .pages-edge {
  position: absolute;
  top: 4px; bottom: 4px; right: -8px;
  width: 8px;
  background: repeating-linear-gradient(180deg, oklch(0.95 0.03 70), oklch(0.95 0.03 70) 1px, oklch(0.86 0.03 70) 1px, oklch(0.86 0.03 70) 2px);
  border-radius: 0 2px 2px 0;
  transform: rotateY(20deg) translateX(2px);
}
.book-cover .em-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(24px, 4vw, 48px);
}
.book-cover h2 {
  font-family: var(--font-display);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
}
.book-cover .seal {
  width: 84px; height: 84px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 28px 0;
  position: relative;
}
.book-cover .seal::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid oklch(0.72 0.08 80 / 0.5);
  border-radius: 50%;
}
.book-cover .seal-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  color: var(--gold);
}
.book-cover .by-line {
  position: absolute;
  bottom: 56px;
  left: 44px; right: 44px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(0.85 0.04 70 / 0.8);
}
.book-cover .ed {
  position: absolute;
  bottom: 36px;
  right: 44px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
}

/* Real book cover image — overrides the faux book panels.
   The wrap is a grid item with auto margins, which sizes it to its content;
   the covers are absolutely-positioned imgs (no intrinsic size), so without
   an explicit width the whole column collapsed to the 18px gap and the reveal
   never fired. Give the wrap its column and let aspect-ratio own the height. */
.book-cover-wrap:has(.book-cover-real) { width: 100%; }
.book-cover.book-cover-real {
  background: transparent;
  padding: 0;
  overflow: hidden;
  height: auto;
  aspect-ratio: 679 / 1000;
  box-shadow: var(--shadow-3);
}
.book-cover.book-cover-real.book-cover-back { aspect-ratio: 612 / 792; }
.book-cover.book-cover-real img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover.book-cover-real .spine-edge,
.book-cover.book-cover-real .pages-edge,
.book-cover.book-cover-real .em-line,
.book-cover.book-cover-real h2,
.book-cover.book-cover-real .seal,
.book-cover.book-cover-real .by-line,
.book-cover.book-cover-real .ed { display: none; }

.book-copy .eyebrow { color: var(--gold); }
.book-copy h2 {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 16px 0 24px;
  color: oklch(0.97 0.02 70);
}
.book-copy h2 em { font-style: italic; color: var(--gold); }
.book-copy p.lead {
  font-size: 18px;
  line-height: 1.6;
  color: oklch(0.78 0.02 70);
  margin: 0 0 32px;
  max-width: 52ch;
}
.book-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 14px;
}
.book-bullets li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  font-size: 15px;
  color: oklch(0.85 0.02 70);
  line-height: 1.5;
}
.book-bullets li svg { color: var(--gold); margin-top: 5px; }
.book-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.book-pull {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid oklch(0.4 0.02 60);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: oklch(0.85 0.04 70);
  max-width: 52ch;
}
.book-pull cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-cover { transform: rotateY(-8deg); }
}

/* ============= Media grid ============= */
.media {
  padding: clamp(80px, 10vw, 140px) 0;
}
.media-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 40px;
}
.media-head h2 {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 14px 0 0;
  max-width: 18ch;
}
.media-head h2 em { font-style: italic; color: var(--wine); }

.media-tabs { display: flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--line); padding: 4px; border-radius: var(--r-pill); }
.media-tab {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.media-tab.active { background: var(--ink); color: var(--bg); }

.media-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.media-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.4s var(--ease);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.media-card:hover { transform: translateY(-3px); }
.media-card.big { grid-row: 1 / span 2; min-height: 600px; }
.media-card .imgph { position: absolute; inset: 0; }
.media-card .imgph img { object-position: center 12%; }
.media-card .badge {
  position: absolute;
  top: 16px; left: 16px;
  background: oklch(0.97 0.02 70 / 0.92);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  z-index: 2;
}
.media-card .play {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: oklch(0.97 0.02 70 / 0.92);
  display: grid; place-items: center;
  z-index: 2;
  transition: transform 0.3s var(--ease);
}
.media-card:hover .play { transform: scale(1.08); }
.media-card-meta {
  position: relative;
  z-index: 2;
  padding: 24px;
  color: var(--bg);
  background: linear-gradient(transparent, oklch(0.18 0.015 60 / 0.85));
  margin-top: auto;
}
.media-card-meta .duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.media-card-meta h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
  text-wrap: balance;
}
.media-card.big .media-card-meta h3 { font-size: 36px; }
@media (max-width: 920px) {
  .media-grid { grid-template-columns: 1fr 1fr; }
  .media-card.big { grid-row: auto; min-height: 320px; }
}
@media (max-width: 600px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* Phone widths: the tab pill row was wider than the viewport and forced
   horizontal scroll on the homepage. Stack it under the heading and let it wrap. */
@media (max-width: 600px) {
  .media-head { grid-template-columns: 1fr; align-items: start; }
  .media-tabs { flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: var(--r-md); }
}