/* A film viewing room within the selected Work table design. */
.production-film-link { display:block; position:relative; overflow:hidden; }
.production-film-link:hover { opacity:1; }
.production-film-link:hover img { opacity:.9; }
.production-project[data-production-role="music-videos"] img { aspect-ratio:16/9; object-fit:contain; }
.project-film-count { position:absolute; left:22px; bottom:24px; color:#fff; font-size:11px; text-shadow:0 1px 8px #000; }
.production-detail { margin:32px 4.8% 0; }
.project-back { display:inline-block; font-size:11px; padding:10px 0; }
.project-intro { display:flex; justify-content:space-between; align-items:end; gap:50px; margin:28px 0 38px; }
.project-intro h1 { font-size:clamp(64px,8vw,120px); letter-spacing:-.075em; line-height:1.1; font-weight:700; }
.project-intro>div { max-width:285px; padding-bottom:8px; font-size:11px; line-height:1.7; }
.project-intro p { margin-top:10px; color:var(--muted); font-size:10px; }
.project-intro p:empty { display:none; }
.project-screen { position:relative; background:#000; aspect-ratio:16/9; }
.project-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.project-screen>iframe { display:block; width:100%; height:100%; border:0; }
.project-screen>[data-project-poster] { width:100%; height:100%; object-fit:contain; }
.project-playback-notice { position:absolute; inset:0; display:grid; place-items:center; background:#0006; color:#fff; font-size:14px; text-shadow:0 1px 8px #000; }
.project-screen.is-instagram { aspect-ratio:auto; max-width:540px; margin-left:auto; margin-right:auto; background:transparent; }
.project-instagram .instagram-media { min-width:0!important; max-width:100%!important; width:100%!important; margin:0!important; }
.project-instagram blockquote { min-height:540px; display:grid; place-items:center; background:#fff; font-size:12px; }
.project-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; flex-direction:column; gap:15px; color:#fff; font-size:11px; text-shadow:0 1px 8px #000; }
.project-play>span:first-child { display:grid; place-items:center; padding-left:4px; width:72px; height:72px; border:1px solid #ffffffb3; border-radius:50%; background:#0003; font-size:18px; }
.film-navigation { display:flex; justify-content:space-between; align-items:center; gap:25px; margin:25px 0 0; }
.film-caption { min-width:0; }
.film-caption h2 { font-size:26px; line-height:1.3; letter-spacing:-1px; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; }
.film-caption p { font-size:11px; color:var(--muted); margin-top:8px; }
.film-caption p:empty { display:none; }
.film-caption time { display:block; font-size:10px; color:var(--muted); margin-top:9px; }
.film-caption time:empty { display:none; }
.film-watch-link { display:inline-block; font-size:10px; margin-top:12px; border-bottom:1px solid var(--line); padding-bottom:3px; }
.film-arrows { display:flex; align-items:center; gap:25px; }
.film-arrows button { font-size:25px; min-width:44px; min-height:44px; }
.film-arrows>span { white-space:nowrap; font-size:11px; min-width:42px; text-align:center; }
.film-status { margin-top:15px; font-size:11px; }
.film-status:empty { display:none; }
.film-selection { margin-top:65px; display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:start; }
.film-selection>h2 { font-size:11px; font-weight:700; padding-top:5px; }
.film-thumbnails { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; }
.film-thumbnail { display:block; text-align:left; padding-bottom:12px; border-bottom:2px solid transparent; }
.film-thumbnail[aria-pressed=true] { border-bottom-color:var(--ink); }
.film-thumbnail[aria-pressed=true]:hover { opacity:1; }
.film-thumbnail-image { display:block; position:relative; }
.film-thumbnail-image img { aspect-ratio:16/9; object-fit:cover; }
.film-thumbnail-image>span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; text-shadow:0 1px 8px #000; font-size:15px; }
.film-thumbnails.instagram-selection { grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.film-thumbnail-number { display:grid; place-items:center; aspect-ratio:1; background:#dce3e7; color:var(--muted); font-size:clamp(22px,3vw,40px); font-weight:700; letter-spacing:-.06em; }
.film-thumbnail[aria-pressed=true] .film-thumbnail-number { background:var(--ink); color:var(--paper); }
.film-thumbnail-label { display:flex; justify-content:space-between; gap:15px; padding-top:12px; font-size:11px; }
.film-thumbnail-label>span:last-child { color:var(--muted); }
.film-thumbnail-label>span:first-child { min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
.film-thumbnail-label>span:last-child { flex-shrink:0; }
.film-thumbnail time { display:block; color:var(--muted); font-size:9px; margin-top:8px; }
@media(min-width:1600px) { .production-detail { max-width:1480px; margin-left:auto; margin-right:auto; } }
@media(max-width:1000px) { .project-intro { gap:25px; } .film-selection { grid-template-columns:1fr 2.5fr; gap:25px; } }
@media(max-width:650px) {
  .production-detail { margin:20px 6% 0; }
  .project-intro { display:block; margin:20px 0 27px; }
  .project-intro h1 { font-size:clamp(48px,16vw,72px); }
  .project-intro h1.project-title-long { font-size:clamp(32px,11.5vw,72px); }
  .project-intro>div { max-width:310px; padding:0; margin-top:20px; }
  .project-screen { margin:0 -6.82%; }
  .project-play>span:first-child { width:48px; height:48px; font-size:13px; }
  .project-play { gap:9px; font-size:9px; }
  .film-navigation { margin-top:21px; gap:15px; align-items:start; }
  .film-caption h2 { font-size:23px; }
  .film-caption p { font-size:10px; max-width:150px; line-height:1.6; }
  .film-arrows { gap:4px; }
  .film-arrows button { font-size:22px; }
  .film-arrows>span { font-size:9px; }
  .film-selection { display:block; margin-top:45px; }
  .film-selection>h2 { margin-bottom:22px; font-size:10px; }
  .film-thumbnails { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .film-thumbnails.instagram-selection { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .film-thumbnail-label { font-size:10px; }
  .project-film-count { left:20px; bottom:23px; font-size:10px; }
}