/* Full-viewport opening scene and the collection below it. */
:root { --cinema-ink: #14362c; --cinema-cream: #fffaf0; }

body > header {
  background: #fffaf0e8;
  backdrop-filter: blur(18px) saturate(1.25);
}

.reading-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: linear-gradient(90deg, #d78764, #eac476, #75a58a);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.hero-v2.hero-cinema {
  display: grid;
  align-items: center;
  min-height: max(620px, calc(100svh - 104px));
  background: #203c2a;
}

.cinema-media, .cinema-media picture, .cinema-media img, .cinema-media video, .cinema-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cinema-media { z-index: -2; }
.cinema-media img, .cinema-media video { object-fit: cover; object-position: 55% center; }
.cinema-media video { opacity: 0; transition: opacity 450ms ease; }
.cinema-media.has-frame video { opacity: 1; }
.cinema-shade {
  z-index: -1;
  background: linear-gradient(90deg, #10291fe0, #122c2182 37%, #192f2308 78%),
    linear-gradient(0deg, #10291f9e, transparent 28%);
}

.hero-cinema .hero-content {
  z-index: 1;
  padding-block: clamp(52px, 9vh, 110px) 80px;
  pointer-events: auto;
}

.hero-cinema .hero-copy-v2 {
  max-width: min(610px, 58%);
  padding: clamp(25px, 3vw, 44px);
  background: linear-gradient(145deg, #132c226b, #193b2f29);
  border: 1px solid #fffaf040;
  border-radius: 26px;
  box-shadow: 0 18px 54px #0b231d33;
  backdrop-filter: blur(2px) saturate(1.06);
}

.hero-cinema .hero-copy-v2 :is(h1, p) { text-shadow: 0 1px 3px #0b231de6, 0 2px 10px #0b231d99; }

.hero-cinema .hero-copy-v2 h1 { font-size: clamp(48px, 4.65vw, 78px); }
.hero-cinema .hero-eyebrow { margin-bottom: 17px; }
.hero-cinema .hero-lead { margin-bottom: 12px; }
.hero-cinema .hero-description { color: #fffaf0; }
.hero-cinema .hero-actions { margin-top: 24px; gap: 12px; }
.hero-cinema .hero-secondary.button {
  background: #fffaf018;
  border-color: #fffaf070;
  color: #fffaf0;
}
.hero-cinema .hero-secondary.button:hover { background: #fffaf033; }

.cinema-controls {
  position: absolute;
  right: max(22px, calc((100vw - 1280px) / 2));
  bottom: 24px;
  z-index: 3;
}
.cinema-toggle {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #fffaf074;
  border-radius: 99px;
  background: #132d23db;
  color: #fffaf0;
  font: 800 12px Nunito, sans-serif;
  cursor: pointer;
}
.cinema-toggle:hover { background: #245343; }
.cinema-toggle:focus-visible { outline: 3px solid #f7d47b; outline-offset: 3px; }
.hero-cinema .scroll-hint { z-index: 2; bottom: 30px; left: max(22px, calc((100vw - 1280px) / 2)); transform: none; }

#books .books-grid { gap: clamp(15px, 2.3vw, 32px); }
#books .book-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  border-radius: 24px;
  background: #fffdf7;
  box-shadow: 0 12px 28px #14362c0b;
}
#books .book-image {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px);
  background: radial-gradient(ellipse at 58% 10%, #fffdf7aa, transparent 72%), var(--tint);
}
#books .book-image .amazon-cover {
  display: block;
  width: min(100%, 255px);
  margin-inline: auto;
  transform: rotate(-3deg);
  box-shadow: 0 14px 25px #14362c29;
  transition: transform .35s ease, box-shadow .35s ease;
}
#books .book-info { display: flex; flex-direction: column; padding: clamp(19px, 2.6vw, 32px); }
#books .book-info .subtitle { min-height: auto; color: #537068; }
#books .book-info .tags { margin-top: auto; }
#books .book-info .button { align-self: flex-start; }
#books .book-card:focus-within .amazon-cover { transform: rotate(0); }

.discovery-strip { background: #fbf6e7; }
.discovery-strip a { min-height: 46px; }
.gallery-item:focus-visible, .printable-title a:focus-visible, .book-card a:focus-visible {
  outline: 3px solid #ad593e;
  outline-offset: 4px;
}
.printable-title { box-shadow: 0 8px 20px #14362c0a; transition: box-shadow .25s, transform .25s; }

@media (hover: hover) and (pointer: fine) {
  #books .book-card:hover, .printable-title:hover { transform: translateY(-5px); box-shadow: 0 16px 34px #14362c19; }
  #books .book-card:hover .amazon-cover { transform: translateY(-3px) rotate(0) scale(1.025); }
}

@media (min-width: 1160px) {
  #books .books-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #books .book-info h3 { font-size: clamp(24px, 2.15vw, 31px); }
  #books .book-info { padding: 21px; }
}

@media (max-width: 900px) {
  .hero-cinema .hero-copy-v2 { max-width: min(550px, 66%); }
  .hero-cinema .hero-copy-v2 h1 { font-size: clamp(44px, 7vw, 66px); }
}

@media (max-width: 600px) {
  .announcement { display: none; }
  .hero-v2.hero-cinema { min-height: max(655px, calc(100svh - 89px)); align-items: end; }
  .cinema-media img, .cinema-media video { object-position: 60% 27%; }
  .cinema-shade { background: linear-gradient(0deg, #142e22cf 0%, #142e2278 46%, #142e2212 86%); }
  .hero-cinema .hero-content { padding-block: clamp(190px, 34vh, 280px) 73px; }
  .hero-cinema .hero-copy-v2 { max-width: none; padding: 20px; border-radius: 20px; }
  .hero-cinema .hero-copy-v2 h1 { font-size: clamp(40px, 10vw, 56px); letter-spacing: -1.9px; margin-bottom: 14px; }
  .hero-cinema .hero-eyebrow { letter-spacing: 1.4px; font-size: 9px; margin-bottom: 10px; }
  .hero-cinema .hero-lead { font-size: 16px; }
  .hero-cinema .hero-description { font-size: 13px; line-height: 1.55; }
  .hero-cinema .hero-actions { margin-top: 17px; gap: 9px; }
  .hero-cinema .hero-actions .button { min-height: 44px; font-size: 11px; padding: 11px 13px; gap: 6px; }
  .cinema-controls { right: 18px; top: 15px; bottom: auto; }
  .hero-cinema .scroll-hint { display: none; }
  #books .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #books .book-card { border-radius: 17px; }
  #books .book-info { padding: 14px; }
  #books .book-info h3 { font-size: 21px; }
  #books .book-info .button { width: 100%; min-height: 44px; padding: 9px; font-size: 10px; gap: 5px; }
}

@media (max-width: 365px) {
  #books .books-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-media video, .printable-title, #books .book-card, #books .amazon-cover { transition: none; }
  #books .book-card:hover, .printable-title:hover { transform: none; }
}