/* 35 · The home page’s player for its YouTube films: the work page’s player (css/pages.css), under
   its own name here so that the player for Lost Between Cuts (css/studio.css) stays as it is.
   The film plays on this page; its title is the way to YouTube. */
.player--films .reel__play {
  flex: none; display: grid; place-items: center; width: clamp(42px, 2.7vw, 70px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(4, 4, 4, .5); box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .9), 0 0 1.4em rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s;
}
.player--films .reel__play i { width: 0; height: 0; margin-left: .2em; border-style: solid; border-width: .52em 0 .52em .86em; border-color: transparent transparent transparent var(--ink); font-size: clamp(13px, .82vw, 21px); transition: border-color .2s; }
/* ---------- the player: the title links to the film on YouTube ---------- */
.player--films .player__title { align-items: center; gap: .4em 1.1em; }
.player--films .player__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35em 1em; min-width: 0; color: var(--ink); text-decoration: none; }
/* the linked title wears a faint gold underline (the plain one, Lost Between Cuts, none) */
.player--films a.player__name b { text-decoration: underline; text-decoration-color: rgba(201, 162, 75, .5); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s; }
.player--films .player__name--plain b { text-decoration: none; }
.player--films .player__bar .key { margin-left: auto; }
.player--films a.player__name:hover b, .player--films a.player__name:focus-visible b { color: #fff; text-decoration-color: var(--gold); }
.player--films .player__yt {
  display: inline-flex; align-items: center; gap: .45em; min-height: 36px; padding: .15em .85em;
  border: 1px solid var(--gold); color: var(--gold); white-space: nowrap;
  font: 500 var(--label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.player--films a.player__name:hover .player__yt, .player--films a.player__name:focus-visible .player__yt { background: var(--gold); color: #000; }
.player--films .player__name--plain { color: var(--ink); }
/* the screen in the double frame: a hairline, black, then a gold hairline */
.player--films .player__screen {
  position: relative;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 clamp(5px, .38vw, 10px) var(--black), 0 0 0 calc(clamp(5px, .38vw, 10px) + 1px) rgba(201, 162, 75, .5), 0 0 9vw rgba(255, 224, 186, .08);
}
.player--films .player__screen iframe, .player--films .player__screen video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.player--films .player__again { position: relative; display: block; width: 100%; height: 100%; }
.player--films .player__again img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.player--films .player__again-key { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1em; font: 500 var(--label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 8px rgba(0, 0, 0, .8); }
.player--films .player__again:hover .reel__play, .player--films .player__again:focus-visible .reel__play { background: var(--gold); }
.player--films .player__again:hover .reel__play i, .player--films .player__again:focus-visible .reel__play i { border-left-color: #000; }
.player--films .player__again:focus-visible { outline-offset: -6px; }
.player--films .player__edge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 900px) {
  .player--films .player__title { gap: .3em .8em; }
}
@media (max-width: 560px) {
  .player--films .player__bar { flex-wrap: wrap; }
  .player--films .player__yt { letter-spacing: .12em; }
}