/* Player: Vimeo lightbox (a modal <dialog>). On preview hosts the play links
   open Vimeo in a new tab instead, so this never shows there. */

.player {
  width: min(1280px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  overflow: visible;
}
.player::backdrop {
  background: rgb(var(--gist-ink-rgb) / 0.94);
}
.player[open] { animation: player-in 420ms var(--motion-ease-out-expo) both; }
.player[open]::backdrop { animation: player-fade 320ms var(--ease-out) both; }
@keyframes player-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes player-fade { from { opacity: 0; } }

.player__inner {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter-r) var(--space-5) var(--gutter-l);
}
.player__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.player__close svg { width: 16px; height: 16px; }
.player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 220px);
  margin-inline: auto;
  width: 100%;
  background: var(--gist-charcoal);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); }
.player__title { font-size: var(--type-heading-4-size); font-weight: 600; }