/* Device frames contain genuine project captures; the interface pixels remain unchanged. */
.direction-tactile .project-cover{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 70% 15%,#cffc4808,transparent 65%),linear-gradient(135deg,#27282a,#1b1c1e)}
.project-cover:before{content:'';position:absolute;inset:13% 7%;border:1px solid #ffffff0d;pointer-events:none;transform:rotate(-5deg);z-index:-1}
.project-cover .project-device{position:relative;flex:0 1 auto;box-sizing:border-box;height:80%;width:auto;max-width:94%;aspect-ratio:var(--desktop-aspect);padding:6px;border:1px solid #686b6b;border-radius:8px;background:linear-gradient(145deg,#3a3c3c,#17191a 55%);box-shadow:0 12px 25px #0003}
.project-cover .project-device-screen{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#151618;border:1px solid #111;border-radius:3px}
.project-cover .project-cover-picture{display:contents}
.direction-tactile .project-cover .project-device-screen img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;transform:none;filter:none;border-radius:0}
.project-cover[data-desktop-device=monitor] .project-device--primary:before{content:'';position:absolute;left:43%;top:100%;width:14%;height:12%;background:linear-gradient(90deg,#363938,#5a5d5b,#363938);border-inline:1px solid #7778}
.project-cover[data-desktop-device=monitor] .project-device--primary:after{content:'';position:absolute;left:30%;top:111%;width:40%;height:4px;max-height:5%;background:#535654;border:1px solid #747974;border-radius:50% 50% 2px 2px}
.project-cover[data-desktop-device=phone] .project-device--primary,.project-cover .project-device--secondary{padding:7px;border:1px solid #8b8f8a;border-radius:20px;background:linear-gradient(145deg,#4b4e48,#17191a 40%,#4b4e48);height:86%}
.project-cover[data-desktop-device=phone] .project-device--primary .project-device-screen,.project-cover .project-device--secondary .project-device-screen{border-radius:12px}
.project-cover[data-desktop-device=phone] .project-device--primary:before,.project-cover .project-device--secondary:before{content:'';position:absolute;z-index:1;top:3px;left:42%;width:16%;height:3px;max-height:1%;border-radius:8px;background:#0b0d0c}
.project-cover .project-device--secondary{position:absolute;right:8%;bottom:9%;z-index:3;height:70%;width:auto;aspect-ratio:var(--mobile-aspect);max-width:27%}
.direction-tactile .project-cover--case{height:clamp(390px,50vw,760px);min-height:0;width:100%;padding:0;border:1px solid #ffffff1a;background:radial-gradient(ellipse at 72% 12%,#cffc4809,transparent 60%),linear-gradient(130deg,#2c2d2d,#1c1d1f)}
.project-cover--case:before{inset:9% 7%;border-color:#ffffff10;transform:rotate(-3deg)}
.project-cover--case.has-device-pair .project-device--primary{height:64%;max-width:78%;transform:translate(-6%,-6%)}
.direction-tactile .case-media.project-media-case{width:100%;max-width:none;overflow:visible;border-top:0}
.direction-tactile .project-image:has(>.project-cover){background:#202224;overflow:hidden}
.direction-tactile .tile-image:has(>.project-cover){background:#202224}
.direction-tactile .tactile-preview>img{object-fit:contain;object-position:center}
@supports(width:1cqw){
 .project-cover{container-type:size}
 .project-cover .project-device--primary{width:min(92cqw,calc(74cqh * var(--desktop-aspect)));height:min(74cqh,calc(92cqw / var(--desktop-aspect)));aspect-ratio:var(--desktop-aspect)}
 .project-cover[data-desktop-device=phone] .project-device--primary{width:min(88cqw,calc(86cqh * var(--desktop-aspect)));height:min(86cqh,calc(88cqw / var(--desktop-aspect)))}
 .project-cover--case.has-device-pair .project-device--primary{width:min(78cqw,calc(64cqh * var(--desktop-aspect)));height:min(64cqh,calc(78cqw / var(--desktop-aspect)))}
 .project-cover .project-device--secondary{width:calc(70cqh * var(--mobile-aspect));height:70cqh;max-width:27cqw}
}
@media(max-width:900px){.project-cover .project-device--secondary{display:none}.project-cover--case.has-device-pair .project-device--primary{transform:none}}
@media(max-width:680px){
 .project-cover .project-device--primary{aspect-ratio:var(--mobile-aspect);height:80%;max-width:93%;padding:5px;transform:none}
 .project-cover[data-mobile-device=phone] .project-device--primary{height:86%;padding:6px;border-radius:17px;border:1px solid #8b8f8a;background:linear-gradient(145deg,#4b4e48,#17191a 40%,#4b4e48)}
 .project-cover[data-mobile-device=phone] .project-device--primary .project-device-screen{border-radius:10px}
 .project-cover[data-mobile-device=phone] .project-device--primary:before{content:'';position:absolute;z-index:1;top:2px;left:42%;width:16%;height:3px;border:0;border-radius:8px;background:#0b0d0c}
 .project-cover[data-mobile-device=phone] .project-device--primary:after{content:none}
 .project-cover[data-mobile-device=monitor] .project-device--primary{border-radius:6px}
 .project-cover[data-mobile-device=monitor] .project-device--primary .project-device-screen{border-radius:2px}
 .project-cover[data-mobile-device=monitor] .project-device--primary:before{content:'';position:absolute;z-index:0;left:43%;top:100%;width:14%;height:12%;border-radius:0;background:#4b504b}
 .project-cover[data-mobile-device=monitor] .project-device--primary:after{content:'';position:absolute;left:30%;top:111%;width:40%;height:3px;background:#535654}
 .direction-tactile .project-cover--case{height:clamp(350px,105vw,520px)}
 @supports(width:1cqw){
  .project-cover .project-device--primary,.project-cover--case.has-device-pair .project-device--primary{width:min(92cqw,calc(78cqh * var(--mobile-aspect)));height:min(78cqh,calc(92cqw / var(--mobile-aspect)))}
  .project-cover[data-mobile-device=phone] .project-device--primary{width:min(88cqw,calc(86cqh * var(--mobile-aspect)));height:min(86cqh,calc(88cqw / var(--mobile-aspect)))}
 }
}