/* Official Apple iPhone 18 Pro frame, the same one the App Store studio uses
   (Marketing/AppStore/Screenshots/device bezel). Markup:
     <div class="iphone"><img src="assets/images/screens/iphone/home.webp" alt="…"></div>
   Silver is the default; add iphone--black, iphone--glacier or iphone--burgundy for the others.
   The .iphone box is the phone body (1301 × 2716 inside the 1350 × 2760 frame image), with the body's
   corner radius, so a box-shadow on .iphone hugs the metal edge. The frame image overhangs the box a
   little (side buttons, anti-aliased edge). The display is 1206 × 2622, so screenshots from
   Marketing/AppStore/Screenshots/source_screenshots/iphone fit exactly.
   The container rules have zero specificity, so a page can still place and size the phone.
   --iphone-screen is the display's inset, for page layers that must line up with the screen. */
:where(.iphone) { --iphone-screen: 1.7305% 3.6895% 1.7305% 3.6126%; position: relative; aspect-ratio: 1301 / 2716; border-radius: 18.14% / 8.69%; }
.iphone > img, .iphone > video, .iphone > .iphone-screen { position: absolute; left: 3.6126%; top: 1.7305%; width: 92.698%; height: 96.539%; margin: 0; border-radius: 13.9% / 6.4%; object-fit: cover; overflow: hidden; }
:where(.iphone > img, .iphone > video, .iphone > .iphone-screen) { background: #000; }
.iphone::after { content: ""; position: absolute; inset: -0.81% -1.8447% -0.81% -1.9216%; z-index: 3; pointer-events: none; background: url(../images/iphone/iphone-18-pro-silver.webp) 0 0 / 100% 100% no-repeat; }
.iphone--black::after { background-image: url(../images/iphone/iphone-18-pro-black.webp); }
.iphone--glacier::after { background-image: url(../images/iphone/iphone-18-pro-glacier.webp); }
.iphone--burgundy::after { background-image: url(../images/iphone/iphone-18-pro-burgundy.webp); }