/* A complete editorial feature between the featured projects and the case index. */
.work-film {
  margin: 0 0 clamp(48px, 6vw, 88px);
  padding: clamp(28px, 4vw, 60px);
  background: var(--beige);
  color: var(--ink);
  scroll-margin-top: 150px;
}
.work-film-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  padding-bottom: 22px;
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid #20201e35;
}
.work-film-kicker .eyebrow { margin: 0; color: var(--accent); }
.work-film-kicker .index { margin-right: 18px; }
.work-film-type { margin: 0; color: var(--muted); font-size: .875rem; }
.work-film-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  grid-template-areas: "title media" "copy media" "link media";
  gap: 22px clamp(32px, 4vw, 64px);
  align-items: start;
}
.work-film h2 {
  grid-area: title;
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 4.2vw, 4.75rem);
  line-height: 1.06;
  text-wrap: balance;
}
.work-film-copy {
  grid-area: copy;
  max-width: 44ch;
  margin: 0;
  color: #393633;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.work-film-link {
  grid-area: link;
  justify-self: start;
  align-self: start;
  max-width: 100%;
  gap: 14px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}
.work-film-link svg { flex: 0 0 20px; }
.work-film-media { grid-area: media; align-self: center; min-width: 0; margin: 0; }
.work-film-player { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.work-film-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.work-film-media figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}
.work-film-media figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.work-film-media figcaption a:hover { color: var(--ink); }
@media (max-width: 960px) {
  .work-film-grid { grid-template-columns: 1fr; grid-template-areas: "title" "media" "copy" "link"; gap: 26px; }
  .work-film h2 { max-width: 18ch; font-size: clamp(2.5rem, 6vw, 4.1rem); }
  .work-film-copy { max-width: 62ch; }
}
@media (max-width: 700px) {
  .work-film { margin-inline: -20px; padding: 32px 20px; margin-bottom: 40px; }
  .work-film-kicker { padding-bottom: 18px; margin-bottom: 28px; }
  .work-film h2 { font-size: clamp(2.5rem, 9.6vw, 3.65rem); }
  .work-film-media figcaption { font-size: .8rem; }
}