:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #13100e;
  color: #f7f0e4;
}

* { box-sizing: border-box; }
body { max-width: 76rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem); }
.site-header { max-width: 46rem; margin-bottom: 4rem; }
.site-header h1 { font-size: clamp(2.7rem, 8vw, 5.5rem); line-height: .96; margin: .25rem 0 1rem; }
.site-header > p:last-child { color: #d0c6b7; font-size: 1.15rem; line-height: 1.5; }
.eyebrow { color: #e5a34a; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
main h2 { font-size: 1.8rem; margin-bottom: .35rem; }
.availability-note, .empty-state { color: #c6c0b4; font-family: system-ui, sans-serif; line-height: 1.5; }
.carousel { position: relative; }
.movie-rail { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem .25rem 1.5rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-color: #806541 #251e1a; }
.movie-rail:focus-visible { outline: 2px solid #e5a34a; outline-offset: .25rem; }
.movie-card { flex: 0 0 min(76vw, 18rem); scroll-snap-align: start; }
.movie-card a { color: inherit; display: block; text-decoration: none; }
.movie-card h2 { font-size: 1.35rem; margin: .8rem 0 .35rem; }
.movie-card p { color: #d0c6b7; font-family: system-ui, sans-serif; font-size: .94rem; line-height: 1.45; margin: 0; }
.poster-frame { background: #2d2621; overflow: hidden; position: relative; }
.movie-card img { display: block; height: auto; width: 100%; }
.poster-fallback { align-items: center; color: #d0c6b7; display: none; font-family: system-ui, sans-serif; justify-content: center; padding: 1rem; text-align: center; }
.poster-frame.image-unavailable .poster-fallback { display: flex; }
.poster-frame.image-unavailable img { display: none; }
.poster-frame.image-unavailable { aspect-ratio: 4 / 3; }
.movie-card a:focus-visible, .carousel-button:focus-visible { outline: 3px solid #e5a34a; outline-offset: 4px; }
.carousel-controls { display: flex; gap: .75rem; justify-content: flex-end; }
.carousel-button { background: transparent; border: 1px solid #806541; color: #f7f0e4; cursor: pointer; font: 600 .88rem system-ui, sans-serif; padding: .7rem 1rem; }
.carousel-button:hover:not(:disabled) { background: #33281f; }
.carousel-button:disabled { cursor: not-allowed; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .movie-rail { scroll-behavior: auto; }
}