/* v25: the Selected Work film, one player for every project page and the Work list.
   The film itself is the client's world; the frame around it is HEYLOOK's (Manrope, hairline, squared corners). */
.film { padding: 0 var(--gutter); }
.film .fr { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #121212; overflow: hidden; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film .ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; }
/* v46: icon-only controls. A small white glyph on a faint dark disc, readable on light and dark footage;
   the button itself stays 44 px for comfortable tapping. The words live on as screen-reader text (EN/DE/ES). */
.film .ctl button.ic { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: radial-gradient(circle, rgba(18,18,18,.26) 0 15px, transparent 15.5px); transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.film .ctl button.ic:hover { background: radial-gradient(circle, rgba(18,18,18,.46) 0 15px, transparent 15.5px); }
.film .ctl button.ic svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; fill: currentColor;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
.film .ctl button.ic .i-pause, .film .ctl button.ic.on .i-play { display: none; }
.film .ctl button.ic.on .i-pause { display: block; }
.film .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* v44/v45: on the project pages the controls step aside while the film plays. They fade back on mouse movement, a tap or keyboard focus,
   and stay while the film is paused or while keyboard focus is on them (a mouse click no longer pins them). */
.film .ctl { transition: opacity .35s ease; }
.film .fr.idle .ctl { opacity: 0; pointer-events: none; }
.film .fr.idle .ctl:has(:focus-visible) { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .film .ctl { transition: none; } }
.film .ctl button.ic:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 2px rgba(18,18,18,.55); }
.film .ctl .bar { flex: 1; height: 2px; background: rgba(255,255,255,.3); position: relative; max-width: 420px; box-shadow: 0 0 3px rgba(0,0,0,.25); }
.film .ctl .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.film .cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid #121212; font-size: 13px; font-weight: 700; }
.film .cap span:last-child { color: var(--mute, #5f5f5f); font-weight: 600; text-align: right; }
@media (max-width: 760px) {
  .film .fr { aspect-ratio: 9 / 16; max-height: 88svh; }
  .film .cap { flex-direction: column; gap: 4px; }
  .film .cap span:last-child { text-align: left; }
}
/* the Work list: each project shows its own film, muted, as a moving thumbnail */
.row .thumb { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 16 / 9; background: #121212; overflow: hidden; }
.row .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.row .thumb .lbl { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.35); }