/* iPhone mockup for phone screenshots. Everything is sized in cqw, so one device
   looks the same at any width. The !important radii are the single deliberate
   exception to the sitewide square-corners rule: a phone has round corners.
   Markup comes from work-src/iphone.mjs; --iphone-top is sampled from the top of
   each screenshot so the status bar runs into the site's own header. */
.iphone { position: relative; container-type: inline-size; width: 100%; }
.iphone .iphone__body {
  position: relative; aspect-ratio: 430 / 882; padding: 1.1cqw;
  border-radius: 16cqw !important;
  background: linear-gradient(135deg, #55575c 0%, #2b2c30 22%, #1c1d20 55%, #3b3c41 100%);
  box-shadow: 0 0 0 .25cqw rgba(0, 0, 0, .55), 0 9cqw 18cqw -7cqw rgba(21, 21, 26, .5);
}
/* Side buttons */
.iphone .iphone__body::before, .iphone .iphone__body::after { content: ''; position: absolute; width: .9cqw; background: #2a2b2f; }
.iphone .iphone__body::before { right: -.75cqw; top: 25%; height: 15%; border-radius: 0 .6cqw .6cqw 0 !important; }
.iphone .iphone__body::after { left: -.75cqw; top: 18%; height: 21%; border-radius: .6cqw 0 0 .6cqw !important; background: linear-gradient(#2a2b2f 0 31%, transparent 31% 40%, #2a2b2f 40% 68%, transparent 68% 76%, #2a2b2f 76%); }
.iphone .iphone__screen {
  position: relative; overflow: hidden; height: 100%;
  border: 2.3cqw solid #000; border-radius: 14.9cqw !important;
  background: var(--iphone-top, #fff);
}
.iphone .iphone__screen img {
  position: absolute; left: 0; top: 12.4cqw; display: block; width: 100%; max-width: none; height: calc(100% - 12.4cqw);
  object-fit: cover; object-position: center var(--screen-y, 0%); border-radius: 0 !important;
}
.iphone .iphone__status {
  position: absolute; left: 0; right: 0; top: 0; height: 12.4cqw; padding: 2.3cqw 7.5cqw 0 9cqw;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--iphone-ink, #15151a); font-size: 3.7cqw; font-weight: 600; line-height: 1; letter-spacing: -.01em;
}
.iphone .iphone__status b { font-weight: 600; }
.iphone .iphone__status svg { width: 16.5cqw; height: auto; fill: currentColor; }
.iphone .iphone__island { position: absolute; left: 50%; top: 2.5cqw; width: 28.5cqw; height: 8.2cqw; margin-left: -14.25cqw; background: #000; border-radius: 5cqw !important; }
.iphone .iphone__home { position: absolute; left: 50%; bottom: 1.7cqw; width: 34cqw; height: 1.2cqw; margin-left: -17cqw; background: #fff; mix-blend-mode: difference; border-radius: 1cqw !important; }