/* ============================================================
   film.css — film title pages
   Extends main.css. Load after it.
   ============================================================ */

.film-title{padding:var(--s-12) 0 var(--s-16)}
@media(min-width:900px){.film-title{padding:var(--s-16) 0 var(--s-24)}}

/* Films with no poster yet: the meta column takes the full measure. */
.ft-grid--nofig{grid-template-columns:1fr !important}
.ft-grid{display:grid;grid-template-columns:1fr;gap:var(--s-8)}
@media(min-width:860px){/* Films with no poster yet: the meta column takes the full measure. */
.ft-grid--nofig{grid-template-columns:1fr !important}
.ft-grid{grid-template-columns:300px 1fr;gap:var(--s-12);align-items:start}}

.ft-poster{max-width:300px;margin:0;overflow:hidden;background:var(--eerie)}
.ft-poster img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03)}
@media(max-width:859px){.ft-poster{max-width:220px}}

.ft-meta h1{font-family:var(--serif);font-weight:300;font-size:var(--t-display);line-height:1.02;letter-spacing:-.015em;margin:var(--s-3) 0 var(--s-3)}
.ft-sub{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);line-height:1.35;color:var(--platinum);max-width:22em;margin-bottom:var(--s-8)}

.credits{display:grid;grid-template-columns:1fr;gap:0;max-width:36em}
.credits > div{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--s-2) 0;border-top:1px solid rgba(208,216,220,.18)}
@media(min-width:600px){.credits > div{grid-template-columns:9em 1fr;gap:var(--s-3);align-items:baseline}}
.credits dt{font-size:var(--t-caption);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.credits dd{font-size:0.94rem;line-height:1.6;color:var(--platinum)}

.film-body{padding:var(--s-8) 0 var(--s-16);background:var(--white)}
.film-body .prose{margin-left:auto;margin-right:auto}
.film-body .prose p:first-child::first-letter{
  font-family:var(--serif);font-size:3.4em;line-height:.86;float:left;
  padding:.06em .1em 0 0;font-weight:300;
}

/* Everything after the threshold on a film page is light. */
.film-body ~ section,.film-body + section{background:var(--white)}