.work-image{position:relative;display:block;width:100%;margin:0;aspect-ratio:3/2;overflow:hidden;background:#f4f3f1;isolation:isolate;border-radius:8px}
.work-image .photo-scene{position:absolute;inset:0;width:100%;height:100%}.work-image figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.work-image.ui-screen{display:flex;align-items:center;justify-content:center;padding:7.5%;--surface-shadow:#14233130;background:#e6e9ec center/cover no-repeat}
.ui-screen[data-surface=neon]{background-image:url(assets/project-pink-background.webp);background-color:#b3358b;--surface-shadow:#48133340}
.ui-screen[data-surface=marvel]{background-image:url(assets/project-blue-background.webp);background-color:#061288;--surface-shadow:#030e4855}
.ui-screen[data-surface=clouds]{background-image:url(assets/concepts/clouds.webp);--surface-shadow:#39565c35}
.ui-screen[data-surface=rotterdam]{background-image:url(assets/lynk-rotterdam-background.png);background-position:center;--surface-shadow:#132d425c}
.ui-screen[data-surface=midnight]{background:#101015 url(assets/concepts/graphite-folds.svg) center/cover no-repeat;--surface-shadow:#0009}
.media-window{position:relative;display:block;flex:none;overflow:hidden;border-radius:8px;background:transparent;box-shadow:0 0 0 1px #121a2010,0 2px 4px #19202a0a,0 14px 32px -8px var(--surface-shadow),0 32px 56px -24px var(--surface-shadow)}
.media-window::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px #00000005;pointer-events:none}
.work-image .media-window>:is(img,svg,video),.visual .work-image .media-window>:is(img,svg,video){display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;box-shadow:none}
.ui-screen.book-pair{gap:6%}.book-pair .media-window{border-radius:1px}
.screen-composition .media-window{background:transparent;box-shadow:none;border-radius:0;overflow:visible}.screen-composition .media-window::after{display:none}
.original-scene>img,.visual .original-scene>img{width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:none}
.photo-scene[data-photo-ready=false] .device-screen{visibility:hidden}
.visual .work-image{width:100%;height:100%;margin:0}
[data-gallery-loop=true] .visual.mockup{border-radius:8px;box-shadow:0 1px 2px #00000006}
[data-gallery-loop=true] .case-figure>div{padding:0;background:none;border-radius:10px;overflow:hidden}
[data-gallery-loop=true] .case-figure .work-image{height:auto;aspect-ratio:3/2;border-radius:10px}
[data-gallery-loop=true] .case-figure .photo-scene{height:auto;aspect-ratio:3/2}
@media(prefers-reduced-motion:reduce){.media-window{transition:none}}

/* Transparent artwork keeps its own edge, without a white backing or rim. */
.work-image::after{display:none}
.ui-screen[data-surface=neutral]{background:#eaeaea;--surface-shadow:#17212d26}
.original-scene{background:#ddd}
.original-scene>svg{display:block;width:100%;height:100%}
[data-gallery-loop=true] .case-figure .original-scene{aspect-ratio:16/9}

/* Real canvases retain their source dimensions, scaled once as a complete UI. */
.work-image .media-window>:is(.presentation-viewport,.organiser-viewport,.vrema-viewport){width:100%;height:100%;aspect-ratio:auto;overflow:hidden;background:#f7f5f3;border-radius:0}
[data-gallery-loop=true][data-gallery-layout=standard] .work-image .media-window .presentation-viewport iframe{width:1280px;height:803px;transform:scale(var(--presentation-scale,1));pointer-events:auto;border:0;border-radius:0;box-shadow:none}
[data-gallery-loop=true][data-gallery-layout=standard] .work-image .media-window .organiser-viewport iframe{width:1200px;height:600px;transform:scale(var(--organiser-scale,1));border:0;border-radius:0;box-shadow:none}
[data-gallery-loop=true][data-gallery-layout=standard] .work-image .media-window .vrema-viewport iframe.interactive-prototype{width:1280px;height:800px;transform:scale(var(--prototype-scale,1));pointer-events:auto;border:0;border-radius:0;box-shadow:none}
[data-gallery-loop=true][data-gallery-layout=standard] .work-image .media-window .library-home-canvas{position:absolute;inset:0 auto auto 0;width:1280px;height:840px;padding:24px;transform:scale(var(--library-scale,1));transform-origin:top left;pointer-events:auto;background:#f7f5f3}
.work-image .library-home-canvas .library-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 22px}
.work-image .library-home-canvas .library-tile:nth-child(n){display:block}
.work-image .library-home-canvas .library-grid[data-book-filter=favorites] .library-tile:not(.is-favorite){display:none}
.work-image .library-home-canvas .library-heading{margin-bottom:20px}
.work-image .library-home-canvas .library-book-meta{margin-top:8px;min-height:24px}
.work-image .library-home-canvas .library-book-name{font-size:13px}
.work-image .library-home-canvas .library-book-actions button{width:22px;height:24px;padding:3px}
.work-image .library-home-canvas .library-book-actions button svg{width:13px;height:13px}
@media(hover:hover) and (pointer:fine){
 [data-gallery-loop=true] .work-image .library-book:hover{translate:0 -2px}
 [data-gallery-loop=true] .work-image .library-book:hover .library-cover{transform:rotateY(-28deg);box-shadow:2px 5px 14px #1c19171a}
 [data-gallery-loop=true] .work-image .library-book:hover .library-leaf{transform:rotateY(var(--leaf-angle))}
}
/* The motion study fills the field with its own matching background. */
.work-image.motion-canvas{padding:0;background:#f8f8f8}
[data-gallery-loop=true][data-gallery-layout=standard] .work-image.motion-canvas>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(.98);transform-origin:center;border:0;border-radius:0;box-shadow:none}
[data-gallery-loop=true].is-detail .prototype-credit:not([hidden]){display:flex!important}
.work-image.motion-canvas>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(.98);transform-origin:center;border:0;border-radius:0;box-shadow:none}
[data-gallery-loop=true] .case-figure>div::after{box-shadow:none}

/* Case media has one presentation surface, without a second legacy matte. */
[data-gallery-loop=true][data-gallery-layout=standard].is-detail .case-figure>div:has(>.work-image){padding:0;background:transparent;box-shadow:none;outline:0}

@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true][data-gallery-layout=standard].is-detail .work-image .media-window .vrema-viewport iframe.interactive-prototype{width:100%;height:100%;transform:none}
}

/* The outer presentation stays architectural; the actual UI keeps its own shape. */
.work-image,[data-gallery-loop=true] .visual.mockup,[data-gallery-loop=true] .case-figure>div,[data-gallery-loop=true] .case-figure .work-image{border-radius:0}

/* Feather only the source video's empty edges into its matching matte. */
.work-image.motion-canvas>video{mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}

.work-image .media-window>.presentation-viewport{background:#3b0d34}

/* Vrema is the application itself, flush with the gallery instead of inset. */
[data-gallery-loop=true] .work-image.app-canvas{padding:8%;background:#eaeaea;--surface-shadow:#17212d26}
.app-canvas>.media-window{border-radius:8px;background:transparent;box-shadow:0 0 0 1px #121a2010,0 14px 32px -8px var(--surface-shadow)}
.app-canvas>.media-window::after{display:none}
[data-gallery-loop=true][data-gallery-layout=standard] .app-canvas .media-window .vrema-viewport iframe.interactive-prototype{height:var(--prototype-height,800px)}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true][data-gallery-layout=standard] .app-canvas .media-window .vrema-viewport iframe.interactive-prototype{width:100%;height:100%;transform:none}
 [data-gallery-loop=true].is-detail .case-figure .work-image.app-canvas{height:620px;aspect-ratio:auto}
}


/* Frame the complete organiser introduction in the shared Neon gradient. */
[data-gallery-loop=true] .work-image.organiser-hero{padding:6%;background:#b3358b url(assets/project-pink-background.webp) center/cover no-repeat}
[data-gallery-loop=true] .case-figure .work-image.organiser-hero{aspect-ratio:2/1}
.organiser-hero>.media-window{border-radius:8px;box-shadow:none}
.organiser-hero>.media-window::after{display:none}
[data-gallery-loop=true][data-gallery-layout=standard] .organiser-hero .media-window .organiser-viewport iframe{height:440px}

/* Case-study screenshots share a quiet gray matte, including the live app. */
[data-gallery-loop=true].is-detail .work-image.app-canvas{padding:8%;background:#eaeaea;--surface-shadow:#17212d26}
[data-gallery-loop=true].is-detail .app-canvas>.media-window{border-radius:8px;box-shadow:0 0 0 1px #121a2010,0 14px 32px -8px var(--surface-shadow)}
/* The Notion motion study blends into the page without an outer card edge. */
.work-image.motion-canvas{background:transparent;box-shadow:none;border:0;outline:0}
[data-gallery-loop=true] .visual.mockup:has(.motion-canvas){background:transparent;box-shadow:none;border:0;outline:0}
[data-gallery-loop=true] .case-figure:has(.motion-canvas),[data-gallery-loop=true] .case-figure:has(.motion-canvas)>div{background:transparent;box-shadow:none;border:0;outline:0}
/* Clamp the film's near-white matte to the page color, keeping its blue glow. */
[data-gallery-loop=true] .work-image.motion-canvas{background:var(--gallery-page,#f7f7f7)}
[data-gallery-loop=true] .work-image.motion-canvas>video{mix-blend-mode:darken}