/* the film's device depth, driven by reading and pointer movement. */
.depth-phones{margin:32px 0 64px}
.depth-stage,.hubby-gallery>.depth-stage{position:relative;display:block;width:100%;height:clamp(420px,57vw,710px);padding:0;background:transparent;overflow:hidden;isolation:isolate}
.depth-stage:before{content:'';position:absolute;inset:12% 5% 2%;border-radius:50%;background:radial-gradient(ellipse,#a6a29c29,transparent 66%);pointer-events:none}
.depth-fallback{display:flex;justify-content:center;align-items:center;gap:clamp(10px,3vw,42px);height:100%;padding:32px 6%}
.depth-fallback>.polar-device{width:26%;max-width:265px;flex:0 1 265px;min-width:0}
.depth-fallback>.polar-device:nth-child(2){translate:0 12px}
.depth-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.has-depth .depth-fallback{opacity:0;pointer-events:none}
/* The comparisons remain flat and readable, including the enlarged viewer. */
@media(max-width:760px){
 .depth-stage,.hubby-gallery>.depth-stage{height:clamp(300px,95vw,550px);overflow:hidden;scroll-snap-type:none}
 .depth-phones{margin:16px 0 36px}
 .depth-fallback{padding:16px 4%;gap:12px}
 .hubby-gallery .depth-fallback>.polar-device{width:29%;flex:0 1 29%;max-width:190px}
}
@media(prefers-reduced-motion:reduce){.depth-fallback>.polar-device:nth-child(2){translate:none}}