/* ============================================================
   Studio Areal — film pages
   Uses the palette and base type from style.css.
   ============================================================ */

.film-page {
  background: var(--gray);
  color: var(--off-black);
}

/* The bar here is a plain link back, in one fixed ink. */
.film-page .nav { color: var(--off-black); }

/* On a phone the poster is the first thing on the page and has a hard top
   edge, so it sits just under the bar; the generous gap is for the wider
   layout, where the title sits beside the artwork. */
.film-page main {
  max-width: 60rem;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 1rem) var(--pad) clamp(3rem, 8vh, 5rem);
}

@media (min-width: 48em) {
  .film-page main {
    padding-top: calc(var(--nav-h) + clamp(2rem, 8vh, 6rem));
  }
}

.film-page .site-footer {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(2rem, 6vh, 3.5rem);
}

/* Director's statement — set apart, but not shouted. */
.film-statement blockquote {
  margin: 0;
  max-width: none;
}

.film-statement p { font-style: italic; }

.film-statement p {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

.film-statement footer {
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Cast and crew — name, role, a line on each. */
.film-people {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 46em) {
  .film-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.film-people h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 400;
}

.film-people h3 span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.film-people p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.6;
}

.film-people em,
.film-statement em { font-style: italic; }

/* The secondary spec block runs narrower than the headline facts. */
.film-facts--specs {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Beats the 60ch measure that .film-section sets further down. */
.film-section.film-section--wide {
  max-width: none;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
}

.film-page .film-back { margin-top: clamp(2rem, 6vh, 3.5rem); }

/* A long credit list reads better in two columns where there's room.
   Multicol rather than grid, so the list still reads top to bottom down
   one column and then the next, instead of alternating across. */
@media (min-width: 46em) {
  /* Both beat the base .film-credits rules further down the file. */
  .film-credits.film-credits--full {
    display: block;
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }

  .film-credits.film-credits--full li {
    break-inside: avoid;
    margin-bottom: 0.5rem;
  }
}

.film-ask {
  margin: 0 0 clamp(2rem, 6vh, 4rem);
  font-size: 1rem;
}

.film-ask a { text-decoration: none; }

.film-colophon {
  margin: 1.75rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.film-section em {
  font-style: italic;
  opacity: 0.85;
}

/* Poster beside the text where there's room, above it where there isn't. */
.film-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 48em) {
  .film-layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.film-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 20rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--off-black);
  color: var(--gray);
  cursor: zoom-in;
  font: inherit;
  text-align: left;
}

.film-art.is-empty { aspect-ratio: 2 / 3; }

.film-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Shown only where the artwork is missing — JS marks the frame. */
.film-art__fallback {
  display: none;
  padding: 1rem;
  font-size: 1.25rem;
  line-height: 1.15;
}

.film-art.is-empty .film-art__fallback { display: block; }

/* Stills have their own section below the synopsis, so they get the full
   measure. Two to a line, cropped to a common shape — the mix runs from
   16:9 frames to a portrait BTS shot, and a tidy grid beats six different
   heights. The lightbox shows each one uncropped. */
.film-stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.film-still {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--off-black);
  cursor: zoom-in;
  font: inherit;
}

.film-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-title {
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* A line of type above the logline. */
.film-kicker {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.film-logline {
  margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
  max-width: 40ch;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.35;
}

.film-note {
  margin: 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.65;
}

.film-pending {
  opacity: 0.5;
  font-style: italic;
}

/* Last thing in the column, so its own bottom margin only stacks with the
   next section's top one — grid items don't collapse margins. */
.film-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid currentColor;
  padding-top: 1.25rem;
}

.film-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

.film-facts dd {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
}

.film-section {
  margin-bottom: clamp(2rem, 6vh, 4rem);
  max-width: 60ch;
}

/* Every section is introduced the same way: a small label, then a rule
   across the measure. The label is muted; the rule is not, so it reads as
   structure rather than as faint text. */
.film-section h2 {
  margin: 0 0 1.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--off-black);
  color: rgba(36, 36, 36, 0.55);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.film-section p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* Outbound credits, in the page's one accent. */
.film-section p a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.film-section p a:hover,
.film-section p a:focus-visible { color: var(--off-black); }

.film-credits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.film-credits li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.film-credits span { opacity: 0.55; }

/* Closes a group of credits. A <br> here would do the same thing to look at,
   but it isn't allowed inside a list and can land on a column break, leaving
   a gap at the top of the next column. */
.film-credits li.is-group-end { margin-bottom: 1.5625rem; }

.film-back {
  display: inline-block;
  color: inherit;
  font-size: 0.95rem;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}