/* ==========================================================================
   The phone: one component for every iPhone on the site.
   Richie, 2026-10-20: "use it as a component so everyone can reuse it" (the frame first
   drawn for the hero, under "keep shooting").

   Markup:
     <div class="phone phone--m">
       <div class="scr">
         <img class="shot" src="assets/shots/f-gallery.webp" alt="...">   (a real screen)
         ...or any drawn screen / overlays, laid out in the 288 x 626 screen box
       </div>
     </div>

   Sizes (the frame is drawn at 302 wide and scaled whole with `zoom`, so a drawn screen's
   own px stay true at every size):
     .phone--s   302 wide   (1.0)
     .phone--m   362 wide   (1.2)   the hero's size; the default choice
     .phone--l   423 wide   (1.4)   a phone that is the whole point of its section
   Below 720px wide every size settles at 332 (1.1), which fits a 375 screen.

   Options:
     .phone--crop   cut the phone at 560 of its 640 height (the hero's view into the app)
     .phone--fade   fade its lower part into the page (pairs with --crop)

   The frame: a 7px bezel, 50 corner, a near-black body (#050505) and no outer ring or
   shadow, the hero's look (Richie, 2026-10-20: the grid's ringed phones looked different). The screen is the iPhone 17 Pro
   Max's 440 x 956 points at 288 x 626.
   ========================================================================== */
.phone {
  --phone-size: 1.2;
  zoom: var(--phone-size);
  flex: none;
  width: 302px; padding: 7px; border-radius: 50px; background: #050505;
  /* No outer ring: on the hero the fade mask clips anything drawn outside the body, and
     that clean edge is the look Richie chose, so every phone matches it. A metal band drawn
     inside the edge was tried and removed (Richie, 2026-11-03: "I like how it was ... none").
     What made the phones read as Android was the island's drawn lens, now gone. */
  box-shadow: none;
}
.phone .scr { position: relative; width: 288px; height: 626px; border-radius: 43px; overflow: hidden; background: #0a0a0a; }
.phone .scr > img.shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.phone--s { --phone-size: 1; }
.phone--m { --phone-size: 1.2; }
.phone--l { --phone-size: 1.4; }
@media (max-width: 719px) { .phone--m, .phone--l { --phone-size: 1.1; } }

.phone--crop { height: 560px; overflow: hidden; }
.phone--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}