/* Device compositions: a desktop browser frame with phone frames in front. Shared by the /clients page and the home "Selected work" panels.
   Everything is sized in cqw (container units of .dev), so one composition scales from a 300px panel to a 900px chapter. */
.dev { --brand: var(--accent); position: relative; width: 100%; container-type: inline-size; text-align: left; }
.dev--duo { aspect-ratio: 100 / 64; }
.dev--web { aspect-ratio: 100 / 71; }
.dev--phones2 { aspect-ratio: 100 / 74; }
.dev--phones3 { aspect-ratio: 100 / 80; }
.dev--plate { aspect-ratio: 100 / 58; }
.dev-glow { position: absolute; left: 6%; top: 10%; width: 88%; height: 84%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent 72%); }
.dv { position: absolute; display: block; }
.dv-ph .dv-p { container-type: inline-size; }
.dv-p { transform: translate3d(0, calc(var(--p, 0) * var(--d, 0) * 1px), 0); will-change: transform; }

/* browser */
.dv-web { left: 0; top: 0; width: 84%; z-index: 1; --d: 14; }
.dev--web .dv-web { width: 100%; }
.dev-browser { overflow: hidden; border-radius: clamp(5px, 1.4cqw, 10px); background: #0c0d0e; box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 1px 0 rgba(255,255,255,.07) inset, 0 56px 96px -36px rgba(0,0,0,.85), 0 20px 40px -20px rgba(0,0,0,.6); }
.dev-bar { display: flex; align-items: center; gap: .9cqw; height: 3.4cqw; min-height: 14px; padding: 0 1.6cqw; background: #1b1c1e; border-bottom: 1px solid rgba(255,255,255,.07); }
.dev-bar i { flex: none; width: .9cqw; height: .9cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: rgba(241,235,221,.2); }
.dev-bar b { flex: 0 1 34%; height: 1.5cqw; min-height: 6px; margin: 0 auto; transform: translateX(-2.4cqw); border-radius: 99px; background: rgba(241,235,221,.07); }
.dev-view { display: block; aspect-ratio: 1120 / 760; background: #17181a; }
.dev-view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* phones: the screen keeps a fixed 9:19.5 ratio, the shot is cropped from the top, never stretched */
.dv-ph { z-index: 3; }
.dev-phone { position: relative; width: 100%; aspect-ratio: 9 / 19.5; padding: 3cqw; border-radius: 15cqw; background: linear-gradient(145deg, #2a2b2e, #0b0b0c 40%, #19191b); box-shadow: 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.17), 0 48px 70px -26px rgba(0,0,0,.85), 0 16px 28px -14px rgba(0,0,0,.6); }
.dev-phone::before { content: ""; position: absolute; left: -.9cqw; top: 22cqw; width: 1cqw; height: 11cqw; border-radius: 1cqw 0 0 1cqw; background: #1a1a1c; box-shadow: 0 15cqw 0 #1a1a1c; }
.dev-phone::after { content: ""; position: absolute; right: -.9cqw; top: 30cqw; width: 1cqw; height: 17cqw; border-radius: 0 1cqw 1cqw 0; background: #1a1a1c; }
.dev-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12.2cqw; background: #111; }
.dev-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dev-screen::after { content: ""; position: absolute; top: 3.6cqw; left: 50%; width: 26cqw; height: 7.4cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }

/* layouts */
.dev--duo .dv-ph1 { right: 2%; bottom: 0; width: 21%; --d: -34; }
.dev--duo .dv-ph2 { right: 21.5%; bottom: 7%; width: 18.5%; z-index: 2; --d: -20; }
.dev--phones2 .dv-ph { width: 31%; }
.dev--phones2 .dv-ph1 { left: 21%; top: 9%; --d: -30; }
.dev--phones2 .dv-ph2 { left: 48%; top: 0; --d: -12; }
.dev--phones3 .dv-ph { width: 29%; }
.dev--phones3 .dv-ph1 { left: 4%; top: 14%; --d: -34; }
.dev--phones3 .dv-ph2 { left: 35.5%; top: 0; --d: -12; z-index: 4; }
.dev--phones3 .dv-ph3 { left: 67%; top: 17%; --d: -26; }
.dev--plate .dv-plate { left: 0; top: 0; width: 84%; --d: -10; }
.dev-plate { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: clamp(5px, 1.4cqw, 10px); box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 56px 96px -36px rgba(0,0,0,.85), 0 20px 40px -20px rgba(0,0,0,.6); }
.dev-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* logo plate: the client's mono mark on a quiet ink surface */
.dev-plate--logo { position: relative; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #26272a, #131415 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 1px 0 rgba(255,255,255,.06) inset, 0 56px 96px -36px rgba(0,0,0,.85), 0 20px 40px -20px rgba(0,0,0,.6); }
.dev-plate--logo img { width: auto; height: auto; max-width: 52%; max-height: 34%; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.dev-plate--boxed img { max-height: 52%; max-width: 30%; filter: grayscale(1) brightness(1.15); opacity: 1; }
/* project plate: a project mark on warm paper; white backgrounds melt into it */
.dev-plate--img { position: relative; display: grid; place-items: center; background: #ECE7DA; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 56px 96px -36px rgba(0,0,0,.85), 0 20px 40px -20px rgba(0,0,0,.6); }
.dev-plate--img img { width: auto; height: auto; max-width: 54%; max-height: 62%; object-fit: contain; mix-blend-mode: multiply; }
.dev-plate--fill { background: #111; }

/* the home panels sit on cream and silver, where a glow reads as dirt */
.work-identity .dev-glow, .work-symbol .dev-glow { display: none; }
.work-screen-window { container-type: size; }
.work-screen-window .dev { width: min(100cqw, calc(100cqh * 100 / 64)); }
.work-screen-window .dev--web { width: min(100cqw, calc(100cqh * 100 / 71)); }
.work-screen-window .dev--phones2 { width: min(100cqw, calc(100cqh * 100 / 74)); }
.work-screen-window .dev--phones3 { width: min(100cqw, calc(100cqh * 100 / 80)); }