/* Quiet, project-specific settings for authentic website and app screens. */
body.case-reference #main-content .case-story__gallery.project-gallery-refined figure.project-scene {
  box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.8vw,54px); overflow:hidden; isolation:isolate; padding:0; border:0;
  background:radial-gradient(ellipse at 20% 22%,rgba(var(--gallery-tint),.22),transparent 62%),linear-gradient(145deg,#171b1c,#080c0e 72%);
}
body.case-reference #main-content .case-story__gallery.project-gallery-refined figure.project-scene:nth-child(2n) {
  background:radial-gradient(ellipse at 80% 80%,rgba(var(--gallery-tint),.18),transparent 65%),linear-gradient(30deg,#090d0f,#191e20);
}
body.case-reference #main-content .case-story__gallery.project-gallery-refined figure.project-scene::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 42%);
}
body.case-reference #main-content .project-scene .project-screen {
  display:block; position:relative; box-sizing:border-box; overflow:hidden; flex:none;
  background:#101416; box-shadow:0 16px 42px rgba(0,0,0,.38);
}
body.case-reference #main-content .project-scene .project-screen--desktop {
  width:86%; aspect-ratio:16/10; border:clamp(3px,.38vw,7px) solid #181b1d; border-radius:clamp(4px,.5vw,9px);
}
body.case-reference #main-content .project-scene .project-screen--phone {
  height:86%; aspect-ratio:390/844; border:clamp(3px,.35vw,7px) solid #141719;
  border-radius:clamp(14px,1.8vw,28px); box-shadow:0 0 0 1px rgba(255,255,255,.17),0 16px 35px rgba(0,0,0,.4);
}
body.case-reference #main-content .project-scene--pair .project-screen--phone {height:83%}
body.case-reference #main-content .project-scene--pair .project-screen--phone:first-child {transform:translateY(-4%)}
body.case-reference #main-content .project-scene--pair .project-screen--phone:last-child {transform:translateY(4%)}
body.case-reference #main-content .project-scene .project-screen img {display:block;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center top}
body.case-reference #main-content .project-scene--art > img {width:86%;height:86%;object-fit:contain;object-position:center;border-radius:0;filter:drop-shadow(0 15px 24px rgba(0,0,0,.28))}
@media(max-width:600px) {
 body.case-reference #main-content .project-scene .project-screen--desktop {width:90%}
 body.case-reference #main-content .project-scene .project-screen--phone {height:88%}
 body.case-reference #main-content .project-scene--pair .project-screen--phone {height:82%}
}