/* The one phone mockup for the whole site (home, scenes, app landings).
   Every measurement is a share of the phone's own width (--phone-w),
   so a 200px and a 460px phone are the same object at different sizes.
   Screens go in only after scripts/prepare-screens.py (1080x2340, unified status bar).

   <div class="phone" style="--phone-w: 260px">
     <div class="phone__screen"><img src="…/screens/bs-swipe.webp" alt="…"></div>
   </div>
*/
.phone {
  --phone-w: 260px;
  position: relative;
  width: var(--phone-w);
  height: calc(var(--phone-w) * 2340 / 1080);   /* screen ratio, set explicitly: Safari applies aspect-ratio to the padded box,
                                                 which made the bottom bezel thicker; the bezel is added as padding */
  box-sizing: content-box;
  padding: calc(var(--phone-w) * .034);    /* bezel */
  border-radius: calc(var(--phone-w) * .17);
  background: #0E0E10;
  box-shadow:
    inset 0 0 0 calc(var(--phone-w) * .004) rgba(255, 255, 255, .14),   /* machined edge */
    var(--shadow-object, 18px 36px 60px -24px rgba(28, 28, 28, .35));
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * .136);
  background: #000;
}
.phone__screen img,
.phone__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}