.project-video-trigger > .project-video-play {
  display: grid; place-items: center; top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%); width: 88px; height: 88px; padding: 0;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%;
  background: rgba(27,26,24,.64); color: #fff; backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.project-video-trigger:hover > .project-video-play { background: rgba(27,26,24,.9); }
.project-video-trigger:focus-visible { outline: 3px solid var(--clay); outline-offset: 5px; }
.project-video-dialog {
  width: min(1120px, calc(100vw - 40px), calc((100dvh - 100px) * 16 / 9));
  max-width: none; max-height: none; padding: 0; border: 0; overflow: visible;
  background: #000; color: #fff;
}
.project-video-dialog::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(8px); }
.project-video-player { aspect-ratio: 16 / 9; }
.project-video-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.project-video-close {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; color: #fff;
  font: inherit; font-size: 36px; line-height: 1; cursor: pointer;
}
.project-video-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  .project-video-trigger > .project-video-play { width: 68px; height: 68px; }
  .project-video-dialog { width: min(calc(100vw - 24px), calc((100dvh - 100px) * 16 / 9)); }
}