.production-films{margin-top:96px;padding-top:48px;border-top:1px solid var(--line2)}
.films-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px}
.films-heading h3{margin:16px 0 0;font-family:var(--hf);font-weight:var(--hw);font-size:calc(clamp(32px,3.4vw,52px) * var(--hs));line-height:1.1;letter-spacing:var(--hls)}
.film-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.film-card{display:block;min-width:0;padding:0;border:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.film-picture{position:relative;display:block;aspect-ratio:9/16;background:var(--ph);overflow:hidden}
.film-picture img,.film-picture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-picture video{opacity:0;transition:opacity .2s}
.film-card.is-previewing video{opacity:1}
.film-picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,transparent 65%,rgba(0,0,0,.2));pointer-events:none}
.film-number{position:absolute;z-index:1;top:16px;left:16px;color:#fff;font-size:13px;letter-spacing:.1em}
.film-play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;padding-left:3px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:rgba(20,22,15,.25);color:#fff;font-size:16px;transition:opacity .2s,background .2s}
.film-card.is-previewing .film-play{opacity:0}
.film-card:hover .film-play{background:rgba(20,22,15,.5)}
.film-caption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:16px;font-size:16px;font-weight:500;line-height:1.4}
.film-duration{flex:none;font-size:12px;font-weight:400;color:var(--muted2)}
.films-hint{margin:24px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.film-card:focus-visible,.film-close:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.film-dialog{width:min(1100px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:20px 24px 24px;border:1px solid rgba(255,255,255,.15);background:var(--dark);color:var(--bg);overflow:auto;overscroll-behavior:contain}
.film-dialog::backdrop{background:rgba(10,12,8,.88)}
.film-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.film-dialog-head h2{margin:0;font:400 20px/1.3 Commissioner,sans-serif}
.film-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:22px;cursor:pointer}
.film-player{display:block;width:100%;height:min(75dvh,740px);background:#000;object-fit:contain}
.film-error{font-size:15px;line-height:1.5;color:var(--light)}
.film-error a{color:var(--sage);text-decoration:underline}
html.film-open{overflow:hidden}
@media(max-width:1100px){
  .film-strip{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) var(--warm);padding:6px 6px 18px;margin:-6px}
  .film-card{flex:0 0 calc((100% - 32px)/3.25);scroll-snap-align:start}
}
@media(max-width:760px){
  .production-films{margin-top:64px;padding-top:36px}
  .films-heading{display:block;margin-bottom:28px}
  .film-card{flex-basis:78%;max-width:300px}
  .film-caption{font-size:16px}
  .film-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:12px}
  .film-dialog-head h2{font-size:16px}
  .film-player{height:calc(100dvh - 125px);max-height:760px}
}
@media(prefers-reduced-motion:reduce){.film-picture video,.film-play{transition:none}}

/* Video layout alternatives use the same five cards and player. */
.production-films{scroll-margin-top:110px}
.film-navigation:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.film-navigation>span{font-size:13px;color:var(--muted)}
.film-navigation>div{display:flex;gap:8px}
.film-navigation button{width:48px;height:48px;border:1px solid var(--line2);background:none;color:var(--ink);font:400 22px/1 Commissioner,sans-serif;cursor:pointer}
.film-navigation button:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.film-navigation button:disabled{opacity:.3;cursor:default}
.film-navigation button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* B: generous portrait filmstrip with deliberate horizontal browsing. */
.production-films[data-video-layout="rail"] .film-strip{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--warm);padding:6px 6px 18px;margin:-6px}
.production-films[data-video-layout="rail"] .film-card{flex:0 0 clamp(260px,27vw,380px);max-width:none;scroll-snap-align:start}
.production-films[data-video-layout="rail"] .film-caption{font-size:19px;gap:16px}

/* C: a lead film and four smaller companion cards. */
.production-films[data-video-layout="featured"] .film-strip{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,280px);gap:24px;overflow:visible;margin:0;padding:0}
.production-films[data-video-layout="featured"] .film-card{display:flex;flex-direction:column;max-width:none;min-height:0}
.production-films[data-video-layout="featured"] .film-card:first-child{grid-row:span 2}
.production-films[data-video-layout="featured"] .film-picture{aspect-ratio:auto;flex:1;min-height:0;width:100%}
.production-films[data-video-layout="featured"] .film-caption{flex:none;width:100%;margin-top:14px;min-height:45px}
.production-films[data-video-layout="featured"] .film-card:first-child .film-caption{font-size:24px}
.production-films[data-video-layout="featured"] .film-card:first-child .film-play{width:72px;height:72px;font-size:21px}

/* D: a quiet, numbered index of the five stages. */
.production-films[data-video-layout="chapters"] .film-strip{display:block;overflow:visible;margin:0;padding:0;border-top:1px solid var(--line2)}
.production-films[data-video-layout="chapters"] .film-card{display:grid;grid-template-columns:72px 90px minmax(0,1fr);align-items:center;gap:32px;width:100%;max-width:none;padding:24px 0;border-bottom:1px solid var(--line2)}
.production-films[data-video-layout="chapters"] .film-card::before{content:attr(data-step);font-size:32px;font-weight:300;color:var(--accent)}
.production-films[data-video-layout="chapters"] .film-picture{width:90px;aspect-ratio:9/16}
.production-films[data-video-layout="chapters"] .film-number{display:none}
.production-films[data-video-layout="chapters"] .film-play{width:36px;height:36px;font-size:12px}
.production-films[data-video-layout="chapters"] .film-caption{align-items:center;font-family:var(--hf);font-weight:var(--hw);font-size:calc(30px * var(--hs));margin:0;gap:32px}
.production-films[data-video-layout="chapters"] .film-duration{margin-left:auto;font:400 14px/1.4 Commissioner,sans-serif}
.production-films[data-video-layout="chapters"] .film-caption::after{content:"↗";font:400 26px/1 Commissioner,sans-serif;color:var(--accent)}

@media(max-width:1100px){
  .production-films[data-video-layout="featured"] .film-strip{grid-template-rows:repeat(2,230px);gap:18px}
  .production-films[data-video-layout="featured"] .film-caption{font-size:14px;gap:8px;min-height:42px}
  .production-films[data-video-layout="featured"] .film-card:first-child .film-caption{font-size:20px}
}
@media(max-width:760px){
  .production-films{scroll-margin-top:90px}
  .production-films[data-video-layout="rail"] .film-strip{gap:16px}
  .production-films[data-video-layout="rail"] .film-card{flex-basis:88%;max-width:360px}
  .production-films[data-video-layout="rail"] .film-caption{font-size:17px}
  .production-films[data-video-layout="featured"] .film-strip{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:24px 14px}
  .production-films[data-video-layout="featured"] .film-card:first-child{grid-column:1/-1;grid-row:auto}
  .production-films[data-video-layout="featured"] .film-picture{aspect-ratio:3/4;flex:none}
  .production-films[data-video-layout="featured"] .film-card:first-child .film-picture{aspect-ratio:4/5}
  .production-films[data-video-layout="featured"] .film-caption{display:block;font-size:15px;min-height:0;margin-top:12px}
  .production-films[data-video-layout="featured"] .film-duration{display:block;margin-top:5px}
  .production-films[data-video-layout="chapters"] .film-card{grid-template-columns:28px 64px minmax(0,1fr);gap:14px;padding:18px 0}
  .production-films[data-video-layout="chapters"] .film-card::before{font-size:19px}
  .production-films[data-video-layout="chapters"] .film-picture{width:64px}
  .production-films[data-video-layout="chapters"] .film-caption{display:block;font-size:calc(18px * var(--hs))}
  .production-films[data-video-layout="chapters"] .film-duration{display:block;margin:10px 0 0;font-size:12px}
  .production-films[data-video-layout="chapters"] .film-caption::after{content:none}
}