/* An illustrated film collection, with optional gallery and reading views. */
.movie-page-hero { max-width: none; padding-bottom: 40px; }
.movie-hero-heading { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.movie-hero-heading h1 { margin-bottom: 23px; }
.cinema-count { display: flex; align-items: center; gap: 18px; border-left: 1px solid #cbd2c0; padding: 18px 0 18px 30px; flex-shrink: 0; }
.cinema-count strong { color: var(--green); font: 74px/1 var(--serif); letter-spacing: -.065em; }
.cinema-count span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); line-height: 1.8; }
.movie-section-links { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 15px; }
.movie-section-links a { color: var(--forest); font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid #bcc8ad; }
.movie-section-links a:hover { color: var(--terracotta); border-color: var(--terracotta); }
.favorite-spotlight { position: relative; display: grid; grid-template-columns: 180px minmax(0,1fr) 180px; align-items: center; gap: 42px; margin-top: 34px; padding: 34px 42px; overflow: hidden; background: #eae5da; border: 1px solid #dad4c7; border-radius: 7px; scroll-margin-top: 110px; }
.favorite-poster img { width: 180px; height: 240px; object-fit: cover; box-shadow: 0 12px 25px #492d201c; }
.favorite-story { max-width: 590px; z-index: 1; }
.favorite-story .eyebrow { color: #7c4c3b; font-size: 10px; margin-bottom: 8px; }
.favorite-story h2 { font-size: 56px; margin: 0 0 8px; }
.favorite-line { color: #925d43; font-size: 12px; margin-bottom: 16px; }
.favorite-story blockquote { font: 21px/1.6 var(--serif); color: #535b4d; margin-bottom: 20px; }
.favorite-open { background: none; border: 0; padding: 0; font-size: 12px; }
.favorite-motif { position: relative; width: 180px; height: 180px; opacity: .27; }
.favorite-motif span { position: absolute; inset: 5px 35px; border: 1px solid #8f5b47; border-radius: 50%; transform: rotate(30deg); }
.favorite-motif span + span { inset: 5px 5px 5px 65px; transform: rotate(-30deg); }
.collection-hint { display: none; color: var(--muted); font: italic 16px/1.5 var(--serif); margin: 0 0 5px; }
.has-film-dialog .collection-hint { display: block; }
.movie-control-row { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 23px; }
.movie-control-row .movie-search { display: block; flex: 1; margin: 0; }
.movie-search label, .movie-sort label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 7px; color: #5c6953; }
.movie-control-row .movie-search input { width: 100%; }
.movie-sort select { appearance: auto; min-height: 47px; background: #fffefa; border: 1px solid #bdc8b6; border-radius: 5px; color: var(--ink); padding: 10px 28px 10px 12px; font: 13px/1.4 var(--sans); }
.view-switch { display: flex; padding: 4px; border: 1px solid #bdc8b6; border-radius: 5px; background: #e9ede2; min-height: 47px; }
.view-switch button { border: 0; border-radius: 3px; padding: 7px 14px; background: transparent; color: var(--muted); font-size: 11px; }
.view-switch button[aria-pressed="true"] { color: #fffefa; background: var(--forest); box-shadow: 0 2px 5px #193e371a; }
.collection-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 17px; }
.collection-meta .results-status { margin: 0; }
.collection-meta > span { font-size: 10px; color: #727b68; }
.poster-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px 26px; }
.poster-gallery .film-tile { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.poster-wrap { position: relative; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; background: #183832; box-shadow: 0 8px 17px #26382c15; }
.poster-wrap > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.poster-favorite { position: absolute; left: 12px; top: 12px; padding: 5px 9px; color: #503928; background: #f0dec0; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; box-shadow: 0 2px 4px #0002; }
.film-open { display: flex; align-items: flex-end; justify-content: center; position: absolute; inset: 0; width: 100%; height: 100%; padding: 20px; background: linear-gradient(transparent 50%,#071f20d9); border: 0; color: white; opacity: 0; transition: opacity .22s; }
.film-open span { display: flex; align-items: center; gap: 13px; font-size: 12px; transform: translateY(6px); transition: transform .22s; }
.film-open .icon { width: 16px; height: 16px; }
.poster-wrap:hover .film-open, .film-open:focus-visible { opacity: 1; }
.poster-wrap:hover .film-open span, .film-open:focus-visible span { transform: translateY(0); }
.poster-wrap:hover > img { transform: scale(1.025); }
.film-open:focus-visible { outline: 3px solid #edc789; outline-offset: -5px; }
.film-caption { padding: 16px 0 0; }
.poster-gallery .film-category { text-align: left; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .09em; font-size: 8px; line-height: 1.7; }
.poster-gallery .film-title { font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.poster-gallery .film-reflection { font-size: 14px; color: var(--muted); line-height: 1.75; }
.has-film-dialog .poster-gallery:not(.is-journal) .film-reflection { display: none; }
.poster-gallery.is-journal { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.poster-gallery.is-journal .film-tile { display: grid; grid-template-columns: 145px minmax(0,1fr); align-items: start; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.poster-gallery.is-journal .film-caption { padding-top: 7px; }
.poster-gallery.is-journal .film-title { font-size: 24px; }
.poster-gallery.is-journal .film-reflection { display: block; }
.poster-gallery.is-journal .poster-favorite { font-size: 7px; padding: 3px 6px; top: 8px; left: 8px; }
.gallery-credit { font-size: 10px; color: #727b68; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 40px; }
.film-dialog { max-width: min(900px,calc(100vw - 44px)); width: 900px; max-height: calc(100dvh - 52px); padding: 0; background: #f8f5ec; color: var(--ink); border: 0; border-radius: 8px; box-shadow: 0 25px 100px #061a18a6; overflow-y: auto; }
.film-dialog::backdrop { background: #082521c9; backdrop-filter: blur(6px); }
body.film-dialog-open { overflow: hidden; }
.film-dialog-layout { display: grid; grid-template-columns: 38% minmax(0,1fr); min-height: 540px; }
.dialog-poster { display: grid; align-items: center; background: #173731; }
.dialog-poster img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
.dialog-reading { padding: 56px 42px 34px; min-width: 0; }
.dialog-reading .eyebrow { font-size: 9px; margin-bottom: 24px; }
.dialog-categories { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.dialog-categories span { color: #65705d; border: 1px solid #ced4c4; padding: 4px 8px; border-radius: 3px; font-size: 9px; }
.dialog-reading h2 { font-size: 40px; letter-spacing: -.045em; line-height: 1.12; margin-bottom: 27px; }
.dialog-reading blockquote { font: 22px/1.65 var(--serif); color: #4e5c4a; margin-bottom: 20px; }
.dialog-byline { font-size: 10px; color: #6d775f; }
.dialog-close-form { position: absolute; top: 13px; right: 14px; z-index: 2; }
.dialog-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #bdc9ae; border-radius: 50%; background: #f8f5ec; color: #314c3c; font: 27px/1 var(--sans); cursor: pointer; }
.dialog-close:hover { background: #e4e8d9; }
.dialog-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #d7dbc9; }
.dialog-controls button { color: var(--forest); background: transparent; border: 0; padding: 5px 0; font-size: 12px; }
.dialog-controls button:disabled { opacity: .3; }
#film-dialog-position { font-size: 10px; color: #738067; }
.dialog-hint { color: #7b836f; font-size: 9px; padding-top: 17px; }
@media (hover: none) { .film-open { opacity: 1; padding: 13px; background: linear-gradient(transparent 80%,#071f20bf); } .film-open span { font-size: 10px; transform: none; } }
@media (max-width: 1079px) {
  .cinema-count { padding-left: 24px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .cinema-count strong { font-size: 62px; }
  .favorite-spotlight { grid-template-columns: 150px minmax(0,1fr); gap: 30px; padding: 30px; }
  .favorite-poster img { width: 150px; height: 200px; }
  .favorite-motif { display: none; }
  .poster-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 23px; }
  .poster-gallery.is-journal .film-tile { grid-template-columns: 115px minmax(0,1fr); gap: 18px; }
  .poster-gallery.is-journal .film-title { font-size: 22px; }
  .poster-gallery.is-journal .film-reflection { font-size: 13px; }
  .dialog-reading { padding: 55px 32px 30px; }
}
@media (max-width: 759px) {
  .movie-hero-heading { gap: 20px; align-items: flex-start; }
  .cinema-count { display: none; }
  .movie-section-links { gap: 13px 20px; padding-top: 12px; }
  .movie-section-links a { font-size: 10px; }
  .favorite-spotlight { padding: 26px; gap: 22px; grid-template-columns: 100px minmax(0,1fr); margin-top: 24px; }
  .favorite-poster { align-self: start; }
  .favorite-poster img { width: 100px; height: 134px; }
  .favorite-story .eyebrow { font-size: 8px; }
  .favorite-story h2 { font-size: 39px; }
  .favorite-story blockquote { font-size: 16px; line-height: 1.6; }
  .favorite-line { font-size: 10px; }
  .favorite-open { font-size: 11px; gap: 6px; }
  .collection-hint { font-size: 14px; }
  .movie-control-row { flex-wrap: wrap; gap: 15px; }
  .movie-control-row .movie-search { flex-basis: 100%; }
  .movie-sort { flex: 1; }
  .movie-sort select { width: 100%; font-size: 12px; }
  .view-switch { align-self: flex-end; }
  .view-switch button { padding: 7px 12px; }
  .collection-meta { flex-direction: column; gap: 5px; }
  .collection-meta > span { font-size: 9px; }
  .poster-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 17px; }
  .poster-gallery .film-title { font-size: 20px; }
  .film-caption { padding-top: 12px; }
  .poster-gallery .film-category { font-size: 7px; letter-spacing: .04em; }
  .poster-favorite { font-size: 6px; padding: 4px 6px; left: 7px; top: 7px; }
  .film-open { padding: 10px; }
  .film-open span { font-size: 9px; gap: 7px; }
  .film-open .icon { width: 13px; }
  .poster-gallery.is-journal { grid-template-columns: 1fr; gap: 22px; }
  .poster-gallery.is-journal .film-tile { grid-template-columns: 115px minmax(0,1fr); gap: 21px; }
  .poster-gallery.is-journal .film-title { font-size: 23px; }
  .gallery-credit { margin-top: 26px; font-size: 9px; }
  .film-dialog { max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); border-radius: 6px; }
  .film-dialog-layout { grid-template-columns: 1fr; min-height: 0; }
  .dialog-poster { height: 190px; display: grid; place-items: center; overflow: hidden; background: #183a33; }
  .dialog-poster img { min-height: 0; width: 150px; height: 200px; object-fit: cover; object-position: top; transform: rotate(-5deg) translateY(14px); box-shadow: 0 6px 20px #0004; }
  .dialog-reading { padding: 30px 26px 25px; }
  .dialog-reading .eyebrow { margin-bottom: 18px; }
  .dialog-reading h2 { font-size: 34px; margin-bottom: 21px; }
  .dialog-reading blockquote { font-size: 20px; }
  .dialog-close-form { position: sticky; top: 10px; right: 10px; height: 0; margin: 0 10px 0 auto; width: 34px; z-index: 2; }
  .dialog-controls { margin-top: 23px; }
}
@media (max-width: 379px) {
  .favorite-spotlight { grid-template-columns: 82px minmax(0,1fr); gap: 17px; padding: 23px 20px; }
  .favorite-poster img { width: 82px; height: 110px; }
  .favorite-story h2 { font-size: 35px; }
  .favorite-story blockquote { font-size: 15px; }
  .poster-gallery { gap: 24px 13px; }
  .poster-gallery .film-title { font-size: 19px; }
  .poster-gallery.is-journal .film-tile { grid-template-columns: 100px minmax(0,1fr); gap: 17px; }
}
@media (prefers-reduced-motion: reduce) { .poster-wrap > img, .film-open, .film-open span { transition: none; } }