/* A phone around a website design: bezel, status bar in the page's own top color, then the screen.
   Sized in container units, so one frame works at any width, from the homepage teaser to the live viewer.
   Used by /work/web-design/ and the homepage's Work section. */
.wd-phone { container-type: inline-size; display: block; width: 100%; }
.wd-device {
  display: block; padding: 2.8cqi; border-radius: 15cqi; background: #0f1311;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(8, 24, 17, 0.35), 0 26px 50px -26px rgba(5, 18, 12, 0.75);
}
.wd-screen { display: block; overflow: hidden; border-radius: 12.4cqi; background: var(--wd-bar, #ffffff); }
.wd-status {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 11.6cqi; padding: 0 6.4cqi 0 9.6cqi;
  background: var(--wd-bar, #ffffff); color: #111111; font: 600 3.9cqi/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.wd-phone[data-bar="dark"] .wd-status { color: #ffffff; }
.wd-island { position: absolute; top: 2.5cqi; left: 50%; width: 26cqi; height: 7.4cqi; border-radius: 4cqi; background: #000000; transform: translateX(-50%); }
.wd-icons { width: 17cqi; height: auto; }
.wd-screen img, .wd-screen iframe { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border: 0; background: var(--wd-bar, #ffffff); }