/* Stephen: the space under the film matches the space above it (the portfolio's own top padding is enough). */
.film { padding-bottom: 0; }
/* The closing line under the section text: the body ink, a touch heavier than the paragraph above it. */
.film .section-head > .film__close { color: var(--ink); font-weight: 500; }
/* The film: one 16:9 card (the portfolio tiles' surface), a poster until the visitor presses play (js/film/film.js). */
.film__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: #0c1b21; border: 1px solid var(--line);
  box-shadow: 0 10px 24px -16px #10161a66;
}
.film__poster, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__play {
  /* below the poster's centred lockup, never on its letters */
  position: absolute; left: 50%; top: 76%; translate: -50% -50%; width: 84px; height: 84px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: #ffffffeb; border: 1px solid var(--line); backdrop-filter: blur(10px); color: var(--ink); /* the launcher pill's surface */
  box-shadow: 0 18px 40px -18px #10161a88;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.2s;
}
.film__play:hover { transform: scale(1.06); background: #fff; }
.film__play svg { width: 30px; height: 30px; margin-left: 4px; }
.film__note { margin-top: 12px; text-align: center; }
@media (max-width: 860px) { .film__play { width: 68px; height: 68px; } .film__play svg { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .film__play { transition: none; } .film__play:hover { transform: none; } }