/* A quiet, native player opens only when a visitor selects a video. */
html:has(#portfolio-video-dialog[open]) {overflow:hidden;scrollbar-gutter:stable}
.portfolio-video-dialog:not([open]) {display:none}
.portfolio-video-dialog {
  margin:auto;
  padding:0;
  width:min(860px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  overscroll-behavior:contain;
  background:#0b0b0b;
  color:var(--ink);
  border:1px solid #62625d;
}
.portfolio-video-dialog::backdrop {background:#000d}
.portfolio-video-dialog-inner {padding:20px 24px 12px}
.portfolio-video-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.portfolio-video-dialog-header h3 {font-size:clamp(18px,2.5vw,24px);line-height:1.35;letter-spacing:-.025em}
.portfolio-video-close {
  flex:none;
  min-height:44px;
  padding:9px 14px;
  border:1px solid #62625d;
  background:transparent;
  color:inherit;
  font-size:15px;
  line-height:1.4;
}
.portfolio-video-close:hover {background:#222}
.portfolio-video-player {
  display:block;
  width:100%;
  max-height:calc(85dvh - 130px);
  min-height:160px;
  aspect-ratio:4/5;
  margin-inline:auto;
  object-fit:contain;
  background:#000;
}
.portfolio-video-original {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:10px;
  font-size:14px;
  line-height:1.5;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--muted);
}
.portfolio-video-original:hover {color:var(--ink)}
.portfolio-video-error {margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink)}
.portfolio-video-error[hidden] {display:none}
@media(max-width:560px) {
  .portfolio-video-dialog {width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  .portfolio-video-dialog-inner {padding:12px 12px 6px}
  .portfolio-video-dialog-header {gap:12px;margin-bottom:12px}
  .portfolio-video-player {max-height:calc(85dvh - 110px)}
}