body.film-page { overflow: auto; min-height: 100dvh; background: #fff; color: #111; }
.film-header { display: flex; justify-content: space-between; padding: 24px; font-family: "Affairs Mono Local", monospace; font-size: 15px; }
.film-page a { color: inherit; text-decoration: none; }
.film-page a:hover { text-decoration: underline; text-underline-offset: 5px; }
.film-page a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.film-content { width: min(88vw, 1280px); margin: 28px auto 64px; }
.film-content mux-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; --media-object-fit: contain; --media-accent-color: #fff; }
.film-caption { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 28px; }
.film-caption h1, .film-caption p { font-size: 16px; font-weight: 400; margin: 0; line-height: 1.5; }
.film-caption em { margin-left: 8px; font-weight: 400; }
.film-about { font-size: 16px; line-height: 1.5; }
.film-back { display: inline-block; margin-top: 12px; }
@media(max-width:600px) { .film-header {padding: 20px 16px;} .film-content {width: calc(100% - 32px); margin-top: 24px;} .film-caption {flex-direction: column; gap: 4px;} }

/* Use the portfolio's existing minimal white playback controls. */
body.film-page::before { content: ""; position: fixed; inset: -50px; z-index: -1; background: linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)),var(--film-poster) center / cover; filter: blur(35px); pointer-events: none; }
body.film-page { isolation: isolate; }
.film-player { position: relative; --film-ratio: 1.7777777778; }
.film-content mux-player { aspect-ratio: var(--film-ratio); max-height: none; }
.film-player .viewer-controls { bottom: 18px; grid-template-columns: auto minmax(0,1fr) auto auto; }
.film-player.is-paused .viewer-controls,.film-player.show-controls .viewer-controls { opacity: 1; transform: none; }
.film-content { width: min(88vw,1500px,calc(78dvh * 1.7777777778)); }
@media(max-width:760px) { .film-content {width: calc(100% - 24px);} .film-player .viewer-controls {left:12px;right:12px;bottom:8px;gap:8px;} }
@media(prefers-reduced-motion:reduce) { .film-player .viewer-controls {transition:none;} }