/* ============================================================
   FILM — Figma "film" (24:3524). Dark section, same layout as Music:
   label column (183px) + content; showreel video, then the works table
   PROJECT | TYPE | YEAR | ROLE. Rows open a description + link.
   ============================================================ */

/* Dark variant: components read these tokens, so lines, text, dimmed
   rows and consent boxes all flip automatically. Line shorthands must be
   redefined here because they resolve their colour where declared.
   The nav takes the same colours while Film is under it (js/nav-theme.js). */
.section--dark,
.is-nav-dark .nav {
  --color-bg: #141414;            /* Figma */
  --color-text: #ffffff;
  --color-ink: #ffffff;
  --color-line: #ffffff;
  --color-muted: #6e6e73;         /* dimmed rows on dark */
  --embed-hover: #232325;
  --line: 1px solid var(--color-line);
  --line-thin: 0.5px solid var(--color-line);
}
.section--dark {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Nav + logo fade between light and dark */
.nav { transition: background-color 0.4s ease, color 0.4s ease; }
.hero__name { transition: color 0.4s ease; }
.is-nav-dark .hero__name { color: #ffffff; }

/* Showreel block, then works: Figma 48px apart */
.film-blocks {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Left-column label ("SHOWREEL 2026", "AUDIOVISUAL WORKS") — 18px, Figma */
.projects__label {
  margin: 0;
  font-size: var(--fs-text);
  line-height: var(--lh-body);
  text-transform: uppercase;
}

/* Showreel: starts on the list column, as wide as the row media
   (PROJECT + YEAR columns minus the 54px gap) */
.showreel { width: calc(var(--detail-media) - 3.375rem); min-width: 0; }

/* Placeholder description, until the copy arrives */
.detail__text.is-placeholder { color: var(--color-muted); font-style: italic; }