/* YOUR OPTIONAL STYLE CHANGES
 * This file loads last, so it can override the design without changing the engine.
 * For simple colour changes, use the theme section of content.js.
 *
 * Example:
 * .hero-copy h1 { letter-spacing: -1px; }
 */

/* Shared images come from content.js; these variables share each photo across its pages. */
.quote-landscape {
  background-image: var(--page-image, url('../assets/images/book-cover.webp'));
  background-position: var(--image-position, center 30%);
}

.author-bio p + p { margin-top: 18px; }
.desktop-nav { min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.cinema-dots { max-width: 34vw; overflow-x: auto; scrollbar-width: none; }
.cinema-dots button { flex-shrink: 0; }

/* Optional photo page, ready for new photos or another book. */
.scene-image { background: var(--cream); padding: 120px 8vw 90px; }
.photo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; min-height: 75svh; }
.photo-frame { margin: 0; min-width: 0; }
.photo-frame img { width: 100%; height: min(58vh, 550px); object-fit: cover; object-position: var(--image-position, center); border-radius: 4px; }
.photo-frame figcaption { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 12px; }
.photo-copy .eyebrow { color: var(--rust); margin-bottom: 20px; }
.photo-copy h2 { font-size: clamp(35px, 4.3vw, 62px); color: var(--plum); line-height: 1.15; margin-bottom: 25px; }
.photo-copy p { font-size: 19px; line-height: 1.8; margin-top: 15px; }
.photo-copy .button { margin-top: 25px; }
.cinematic-ready .photo-layout { min-height: 0; align-content: safe center; }
.cinematic-ready .photo-frame img { max-height: 56vh; }

@media (max-width: 700px) {
  .photo-layout { grid-template-columns: 1fr; gap: 24px; }
  .photo-frame img { height: 30vh; }
  .photo-copy .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .photo-copy h2 { font-size: 33px; margin-bottom: 17px; }
  .photo-copy p { font-size: 14px; line-height: 1.75; margin-top: 12px; }
  .photo-frame figcaption { font-size: 10px; }
  .photo-copy .button { margin-top: 18px; min-height: 43px; font-size: 13px; }
}

/* All common palette edits are driven by the theme values in content.js. */
.cinematic-ready .scene-welcome {
  background: linear-gradient(160deg, var(--midnight) 10%, var(--hero-mid, #30223f) 60%, var(--hero-end, #754d6c) 100%);
}
.cinematic-ready .site-header {
  background: color-mix(in srgb, var(--midnight) 92%, transparent);
}
.cinematic-ready .scene-themes {
  background: radial-gradient(ellipse at 50% 100%, #79506d55, transparent 65%), var(--theme-stage, #35243f);
}
.cinematic-ready .theme-grid article {
  background: var(--card, #fcf5ed);
}
.book-edition > span:first-child { text-transform: uppercase; }
.mobile-menu { overflow-y: auto; justify-content: safe center; }