.work-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: clamp(84px,9.4vw,180px); gap: 20px; padding-bottom: 130px; }
.work-item { min-width: 0; grid-column: span var(--columns); grid-row: span var(--rows); }
.work-tile { display: block; width: 100%; height: 100%; background: #f2f2f2; border-radius: var(--radius-surface); position: relative; overflow: hidden; isolation: isolate; cursor: zoom-in; }
.work-art { position: absolute; inset: 5%; display: block; }
.work-art > img, .work-art > video { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.work-art > video { position: absolute; inset: 0; }
.work-art-blend { mix-blend-mode: multiply; }
.work-tile[aria-busy="true"] { cursor: progress; }
.work-viewer { position: fixed; inset: 0; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: #f5f5f5; overflow: hidden; overscroll-behavior: contain; }
.work-viewer::backdrop { background: #050608e6; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); opacity: 0; transition: opacity 360ms ease; }
.work-viewer.is-visible::backdrop { opacity: 1; }
.work-stage { position: absolute; inset: 72px 0 124px; touch-action: none; cursor: default; }
.work-stage.is-dragging { cursor: grabbing; }
.work-viewer-ui { opacity: 0; transition: opacity 220ms; }
.work-viewer.is-visible .work-viewer-ui { opacity: 1; }
.work-close, .work-control { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ffffff14; color: #f5f5f5; box-shadow: 0 1px 6px #00000005; transition: background 140ms,transform 140ms; }
.work-close { position: absolute; top: max(20px,env(safe-area-inset-top)); right: 24px; z-index: 4; }
.work-close svg, .work-control svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.work-close:active, .work-control:active { transform: scale(.95); }
.work-controls { display: flex; align-items: center; gap: 2px; padding: 3px 5px; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 40px; }
.work-count { font-size: 12px; color: #b6b6ba; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.work-footer { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: 24px; right: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.work-title { font-size: 15px; font-weight: 400; margin: 0; line-height: 1.4; }
.work-date { display: block; color: #aaa; font-size: 12px; margin-top: 3px; }
.work-controls .work-control { background: transparent; box-shadow: none; }
.work-control:disabled { opacity: .25; cursor: default; }
.work-control[hidden] { display: none; }
.work-close:focus-visible, .work-control:focus-visible { outline: 2px solid #ffffff85; outline-offset: 3px; }
@media (hover:hover) { .work-close:hover,.work-control:hover { background: #ffffff26; } }
@media (max-width:760px) {
 .work-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
 .work-item { grid-column: auto; grid-row: auto; }
 .work-tile { height: auto; aspect-ratio: var(--piece-ratio); }
 .work-stage { inset: 64px 0 136px; }
 .work-close { right: 18px; }
 .work-footer { bottom: max(24px,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
 .work-viewer::backdrop,.work-viewer-ui { transition: none; }
}
.work-three-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-stage:focus-visible { outline: 1px solid #ffffff45; outline-offset: -8px; }
.work-viewer-error { position: absolute; inset: 40% 15%; text-align: center; line-height: 1.5; }
/* The bezel sits outside the media's own ratio. Every screen fills its frame. */
.work-art-framed { display: grid; place-items: center; container-type: size; }
.work-device { position: relative; display: block; width: min(96cqw,calc(94cqh * var(--device-ratio))); aspect-ratio: var(--device-ratio); padding: 0; border: 1px solid #303136; border-radius: clamp(14px,4cqw,26px); background: #141416; box-shadow: 0 2px 2px #00000025,0 12px 26px -10px #00000040,inset 0 0 0 1px #323235; }
.work-device::before { content: ''; position: absolute; z-index: 2; top: .35%; left: 50%; width: 2px; aspect-ratio: 1; border-radius: 50%; background: #252b37; transform: translateX(-50%); }
.work-device-screen { display: block; position: absolute; left: calc(100% * .02 / (var(--screen-ratio) + .04)); right: calc(100% * .02 / (var(--screen-ratio) + .04)); top: calc(100% * .02 / 1.04); bottom: calc(100% * .02 / 1.04); overflow: hidden; border-radius: clamp(8px,2.6cqw,17px); background: #fff; }
.work-device-screen > img,.work-device-screen > video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Use the image-generated background only over the header logo. The original
   screenshot supplies every remaining pixel, preserving fine interface text. */
.work-device-screen:has(.work-still) { display: grid; place-items: center; container-type: size; }
.work-still { display: block; position: relative; width: 100%; height: 100%; }
.work-still > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.work-logo-patch { pointer-events: none; }

/* The filmed prototype keeps its native portrait frame, without a backdrop,
   aligned to the start of its cell so it sits against the neighbouring tile. */
.work-tile-video { width: auto; max-width: 100%; height: 100%; aspect-ratio: var(--piece-ratio); margin-inline: 0; background: transparent; }
.work-tile-video .work-art { inset: 0; }
.work-tile-video .work-art > img, .work-tile-video .work-art > video { object-fit: cover; border-radius: var(--radius-surface); }
@media (max-width: 760px) { .work-tile-video { width: 100%; height: auto; } }