.project-film > p:not(.eyebrow) { color: var(--muted); }
.project-film .tricon-player { position: relative; margin-top: 36px; width: var(--film-width, 100%); margin-left: calc(-1 * var(--film-left, 0px)); background: #080f1f; }
.tricon-player video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; cursor: pointer; }
.film-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; color: #f3ecdf; }
.film-play[hidden] { display: none; }
.film-play svg { width: 56px; height: 56px; fill: currentColor; filter: drop-shadow(0 1px 8px #0006); }
.film-play:focus-visible { outline: 1px solid #f3ecdf; outline-offset: -6px; }
@media(max-width:700px) { .film-play svg { width: 42px; height: 42px; } }

.tricon-player.film-focused { position: fixed; inset: 0; z-index: 1000; margin: 0; width: 100%; height: 100dvh; display: flex; align-items: center; background: #080f1f; }
.film-focused video { width: 100%; height: 100%; }
.film-close { position: absolute; right: 20px; top: 16px; width: 44px; height: 44px; color: #f3ecdf; font-size: 28px; }
.film-close[hidden] { display: none; }