/* ==========================================================================
   Film page. Dark ground so the grades read as intended; same type system.
   ========================================================================== */

body.film {
  --film-bg:    #0B0B0D;
  --film-ink:   #F2EFE9;
  --film-ink-2: rgba(242, 239, 233, .62);
  --film-ink-3: rgba(242, 239, 233, .40);
  --film-rule:  rgba(242, 239, 233, .12);
  background: var(--film-bg);
  color: var(--film-ink);
}

/* Masthead and footer, re-inked for the dark ground */
body.film .masthead { color: var(--film-ink); }
body.film .masthead.is-stuck { background: rgba(11, 11, 13, .78); border-bottom-color: var(--film-rule); }
body.film .wordmark span { color: var(--film-ink-3); }
body.film .nav a { color: var(--film-ink-2); }
body.film .nav a:hover { color: #fff; border-bottom-color: #E8825C; }
body.film .nav a[aria-current="page"] { color: var(--film-ink); border-bottom-color: var(--film-ink); }
body.film .foot, body.film .foot__base { border-color: var(--film-rule); }
body.film .foot__base { color: var(--film-ink-3); }
body.film .linklist a { color: var(--film-ink-2); border-bottom-color: var(--film-rule); }
body.film .linklist a:hover { color: #E8825C; border-bottom-color: #E8825C; }

/* ---------- Head ---------- */
.film-head { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }
.film-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--film-ink-3);
  margin-bottom: 1rem;
}
.film-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: -0.025em;
  max-width: 22ch;
}

/* ---------- Clips ---------- */
.clip { position: relative; margin: 0; }
.clip video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.clip--wide video { aspect-ratio: 16 / 9; }
.clip--tall video { aspect-ratio: 9 / 16; }
.clip figcaption,
.still figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--film-ink-3);
  margin-top: 0.75rem;
}
.clip__sound {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--film-ink);
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(242, 239, 233, .28);
  border-radius: 2px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease, background-color .2s ease;
}
.clip:hover .clip__sound,
.clip__sound:focus-visible,
.clip__sound[aria-pressed="true"] { opacity: 1; }
.clip__sound[aria-pressed="true"] { background: #E8825C; border-color: #E8825C; color: #0B0B0D; }
@media (hover: none) { .clip__sound { opacity: 1; } }

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Stills ---------- */
.stills { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6rem); }
.stills .film-kicker { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.row {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
}
.still { margin: 0; flex: var(--ar) 1 0; min-width: 0; overflow: hidden; }
.still img {
  width: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.still:hover img { transform: scale(1.02); }

/* ---------- Reveal (same motion as the landing page) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22,.7,.3,1), transform .9s cubic-bezier(.22,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .10s; }
.reveal[data-delay="2"] { transition-delay: .20s; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  /* Vertical clips become a swipeable strip rather than three tiny columns */
  .reels {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reels .clip { scroll-snap-align: center; }
  .row { flex-direction: column; }
  .still { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}