/* A real page scrolls inside a restrained viewing window, rather than moving the frame. */
.project-scroll-window {display:block;position:relative;overflow:hidden;isolation:isolate;width:100%;aspect-ratio:1.44;background:#f6f5ef;}
.project-scroll-window img {display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:initial!important;transform:translate3d(0,var(--project-scroll-offset,0px),0);}
.project-scroll-window::after {content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 -1px rgba(0,0,0,.12);}
.portfolio-visual .project-media-link > img {display:block;width:100%;height:auto;aspect-ratio:auto;}
.project-overlay__media[data-project-live] {display:block;padding-top:clamp(5rem,9vh,7rem);}
.project-live-controls {display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px;}
.project-live-frame {display:block;width:100%;height:min(72dvh,820px);border:0;background:#f6f5ef;}
.project-live-frame[hidden], [data-project-live] [hidden] {display:none!important;}
@media(max-width:900px){.project-live-frame{height:65svh;min-height:360px;}}
@media(prefers-reduced-motion:reduce){.project-scroll-window img{transform:none!important;}}
@media print{.project-scroll-window img{transform:none!important;}.project-live-controls,.project-live-frame{display:none!important;}[data-project-live] .project-media-link[hidden]{display:block!important;}}

[data-project-live] figcaption {margin-top:16px;max-width:64ch;color:var(--muted);font:.7rem/1.7 var(--font-mono);}