/* Real project captures, presented in responsive code-built hardware. */
.mockup-device {
  --mockup-metal: #d5d7d6;
  --mockup-bezel: clamp(6px, .65vw, 9px);
  position: relative;
  display: block;
  flex: 0 1 auto;
  width: min(91%, 510px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
  filter: drop-shadow(0 18px 14px #1c232315);
  transform: translate3d(0, 0, 0);
  transition: transform .7s cubic-bezier(.2, .65, .3, 1), filter .7s ease;
}

.mockup-device .mockup-screen {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 940;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--mockup-bezel) solid #181b1d;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
  background: #f5f5f2;
  box-shadow: 0 0 0 1px #787c7e, inset 0 0 0 1px #060708;
}

/* These scoped resets supersede older portrait-image and project-stage rules. */
body .work-tile-media.work-mockup-media .mockup-device .mockup-screen > img,
body .portfolio-grid .project-card .project-stage.mockup-stage .mockup-device .mockup-screen > img,
body .preview-stage .mockup-device .mockup-screen > img,
body .studio-mockup-stage .mockup-device .mockup-screen > img,
.mockup-device .mockup-screen > img {
  position: static;
  display: block;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  object-fit: cover;
  object-position: center top;
  transform: none !important;
  filter: none;
  box-shadow: none;
}

.mockup-device > .mockup-chin,
.mockup-device > .mockup-foot,
.mockup-device > .mockup-deck { display: none; }

/* Silver iMac: slim black glass, a brushed aluminium chin and open stand. */
.mockup-device[data-hardware="imac"]::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: calc(50% - 1.5px);
  top: calc(var(--mockup-bezel) / 2 - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #363b43;
  box-shadow: inset 0 0 1px #79949c;
}
.mockup-device[data-hardware="imac"] > .mockup-chin {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(18px, 2.5vw, 31px);
  border-radius: 0 0 9px 9px;
  background: linear-gradient(110deg, #d7d9d8, #edeceb 32%, #c6c9c8 100%);
  box-shadow: 0 1px 0 #a5aaa9, inset 0 1px 0 #f4f4f1;
}
.mockup-device[data-hardware="imac"] > .mockup-foot {
  position: relative;
  display: block;
  width: 31%;
  height: clamp(36px, 4.3vw, 55px);
  margin: 0 auto;
}
.mockup-device[data-hardware="imac"] > .mockup-foot::before {
  content: "";
  position: absolute;
  inset: 0 25% 7px;
  clip-path: polygon(19% 0, 81% 0, 96% 100%, 4% 100%);
  background: linear-gradient(#9da3a2 0, #bbc0be 25%, #e0e2df 90%, #c2c7c4 100%);
}
.mockup-device[data-hardware="imac"] > .mockup-foot::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 8px;
  border-radius: 52% 52% 4px 4px;
  background: linear-gradient(#e4e7e2, #c1c7c3 70%, #959d98);
  box-shadow: 0 2px 1px #9ea49f3b;
}

/* Space-black MacBook Pro, with a shaped metal keyboard deck. */
.mockup-device[data-hardware="macbook"] { width: min(88%, 500px); }
.mockup-device[data-hardware="macbook"] .mockup-screen {
  border-width: var(--mockup-bezel);
  border-bottom-width: calc(var(--mockup-bezel) + 3px);
  border-radius: 13px 13px 4px 4px;
  box-shadow: 0 0 0 1px #73787a, inset 0 0 0 1px #030506;
}
.mockup-device[data-hardware="macbook"] .mockup-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 45.5%;
  width: 9%;
  height: clamp(5px, .7vw, 9px);
  border-radius: 0 0 5px 5px;
  background: #181b1d;
}
.mockup-device[data-hardware="macbook"] > .mockup-deck {
  position: relative;
  display: block;
  width: 112%;
  height: clamp(14px, 1.8vw, 23px);
  margin-left: -6%;
  border-radius: 3px 3px 37% 37% / 3px 3px 70% 70%;
  background: linear-gradient(#585d61 0, #6b7075 26%, #4e555b 39%, #2a3035 60%, #1d2429 100%);
  box-shadow: inset 0 1px 0 #969a9e, 0 1px 0 #6a7175;
}
.mockup-device[data-hardware="macbook"] > .mockup-deck::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 18%;
  width: 64%;
  height: 3px;
  opacity: .75;
  background: repeating-linear-gradient(90deg, #20262c 0 5px, #798088 5px 6px);
  transform: perspective(90px) rotateX(25deg);
}
.mockup-device[data-hardware="macbook"] > .mockup-deck::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 43%;
  width: 14%;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(#252b30, #484f54);
  box-shadow: 0 1px 0 #8a919533;
}

/* Graphite phone: rounded glass, camera island, side buttons and home indicator. */
.mockup-device[data-hardware="phone"] {
  width: min(37%, 166px);
  border-radius: 31px;
  filter: drop-shadow(0 15px 13px #18202120);
}
.mockup-device[data-hardware="phone"] .mockup-screen {
  aspect-ratio: 390 / 844;
  border: 6px solid #181b1d;
  border-radius: 30px;
  box-shadow: 0 0 0 1px #929694, 0 0 0 2px #424948, inset 0 0 0 1px #080a0a;
}
.mockup-device[data-hardware="phone"] .mockup-screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 34%;
  width: 32%;
  height: 10px;
  border-radius: 12px;
  background: #101314;
  box-shadow: inset -6px 0 2px #1b242a;
}
.mockup-device[data-hardware="phone"] .mockup-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 5px;
  left: 35%;
  width: 30%;
  height: 3px;
  border-radius: 10px;
  background: #f9faf9;
  box-shadow: 0 0 2px #3338;
}
.mockup-device[data-hardware="phone"]::before,
.mockup-device[data-hardware="phone"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 3px;
  border-radius: 2px;
  background: #727978;
}
.mockup-device[data-hardware="phone"]::before { top: 23%; right: -3px; height: 12%; }
.mockup-device[data-hardware="phone"]::after { top: 21%; left: -3px; height: 8%; box-shadow: 0 35px 0 #727978; }

/* A quiet, unboxed stage keeps the work larger than the presentation hardware. */
body .experience-home .work-gallery { background: #fff; }
body .work-gallery .work-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 5%; }
body .work-gallery-grid .work-mockup-card { min-width: 0; }
body .work-tile-media.work-mockup-media,
body .portfolio-grid .project-card .project-stage.mockup-stage,
body .studio-mockup-stage,
.mockup-stage {
  --mockup-stage-height: clamp(340px, 29vw, 410px);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--mockup-stage-height);
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 20px 3% 24px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  isolation: isolate;
  box-sizing: border-box;
}
body .work-tile-media.work-mockup-media::before,
body .work-tile-media.work-mockup-media::after,
body .project-stage.mockup-stage::before,
body .project-stage.mockup-stage::after { content: none !important; }
body .work-mockup-card .work-tile-caption { margin-top: 20px; }
body .work-mockup-card .work-tile-scope { max-width: 330px; }
body .portfolio-grid .project-card .project-stage.mockup-stage { --mockup-stage-height: clamp(330px, 29vw, 410px); }
body .portfolio-grid .project-card .project-stage.mockup-stage .mockup-device { max-width: 500px; }
.mockup-stage > .mockup-device[data-hardware="imac"],
.work-mockup-media > .mockup-device[data-hardware="imac"],
.studio-mockup-stage > .mockup-device[data-hardware="imac"] { width: min(91%, calc((var(--mockup-stage-height) - 130px) * 1.5319), 510px); }
.mockup-stage > .mockup-device[data-hardware="macbook"],
.work-mockup-media > .mockup-device[data-hardware="macbook"],
.studio-mockup-stage > .mockup-device[data-hardware="macbook"] { width: min(88%, calc((var(--mockup-stage-height) - 72px) * 1.5319), 500px); }
.mockup-stage > .mockup-device[data-hardware="phone"]:not(.mockup-companion),
.work-mockup-media > .mockup-device[data-hardware="phone"]:not(.mockup-companion),
.studio-mockup-stage > .mockup-device[data-hardware="phone"]:not(.mockup-companion) { width: min(37%, calc((var(--mockup-stage-height) - 46px) * .4621), 166px); }

.mockup-stage .mockup-companion,
.work-mockup-media .mockup-companion,
.studio-mockup-stage .mockup-companion {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 25px;
  width: 83px;
  max-width: 24%;
  margin: 0;
}
.mockup-device.mockup-companion[data-hardware="phone"] .mockup-screen { border-width: 4px; border-radius: 19px; }
.mockup-device.mockup-companion[data-hardware="phone"] { border-radius: 20px; }
.mockup-device.mockup-companion[data-hardware="phone"] .mockup-screen::before { top: 4px; height: 6px; }
.mockup-device.mockup-companion[data-hardware="phone"] .mockup-screen::after { height: 2px; bottom: 3px; }
.mockup-device.mockup-companion[data-hardware="phone"]::after { box-shadow: 0 20px 0 #727978; }

.work-mockup-card:is(:hover, :focus-visible) .mockup-device,
.project-stage.mockup-stage:is(:hover, :focus-visible) .mockup-device,
.studio-mockup-stage:is(:hover, :focus-visible) .mockup-device { transform: translate3d(0, -7px, 0); filter: drop-shadow(0 24px 17px #1c23231c); }
.work-mockup-card:is(:hover, :focus-visible) .mockup-companion,
.project-stage.mockup-stage:is(:hover, :focus-visible) .mockup-companion { transform: translate3d(0, -11px, 0); }

/* Case-study viewer uses the same hardware as the portfolio overview. */
body .preview-stage:has(.mockup-device) {
  --mockup-preview-height: min(52svh, 510px);
  position: relative;
  height: var(--mockup-preview-height);
  min-height: 300px;
  padding: 28px 7%;
  overflow: visible;
  background: transparent !important;
}
body .preview-stage .mockup-device { flex: 0 1 auto; width: min(88%, calc((var(--mockup-preview-height) - 80px) * 1.5319), 620px); max-width: 100%; height: auto; }
body .preview-stage .mockup-device[data-hardware="imac"] { width: min(85%, calc((var(--mockup-preview-height) - 140px) * 1.5319), 560px); }
body .preview-stage .mockup-device[data-hardware="phone"] { width: min(29%, calc((var(--mockup-preview-height) - 60px) * .4621), 170px); }
body .preview-stage .mockup-device .mockup-screen { height: auto; width: 100%; max-width: none; flex-shrink: 0; }

@media (max-width: 1100px) {
  body .work-tile-media.work-mockup-media,
  body .portfolio-grid .project-card .project-stage.mockup-stage { --mockup-stage-height: clamp(280px, 32vw, 360px); }
  .mockup-device[data-hardware="phone"] { width: min(35%, 143px); }
  .mockup-stage .mockup-companion,
  .work-mockup-media .mockup-companion { width: 72px; right: 7%; bottom: 25px; }
}

@media (max-width: 700px) {
  body .work-gallery .work-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 43px; }
  body .experience-home .work-gallery { padding-left: 6%; padding-right: 6%; }
  body .work-tile-media.work-mockup-media,
  body .portfolio-grid .project-card .project-stage.mockup-stage,
  body .studio-mockup-stage { --mockup-stage-height: clamp(275px, 80vw, 390px); padding: 12px 3% 20px; }
  .mockup-device { --mockup-bezel: 6px; width: min(92%, 480px); }
  .mockup-device[data-hardware="macbook"] { width: min(86%, 460px); }
  .mockup-device[data-hardware="phone"] { width: min(38%, 151px); }
  .mockup-device[data-hardware="imac"] > .mockup-chin { height: 22px; }
  .mockup-device[data-hardware="imac"] > .mockup-foot { height: 42px; }
  .mockup-stage .mockup-companion,
  .work-mockup-media .mockup-companion,
  .studio-mockup-stage .mockup-companion { width: 78px; right: 7%; bottom: 27px; }
  body .work-mockup-card .work-tile-caption { font-size: 11px; margin: 15px 5px 6px; }
  body .work-mockup-card .work-tile-scope { font-size: 8px; }
  body .preview-stage:has(.mockup-device) { --mockup-preview-height: 320px; min-height: 0; padding: 18px 5%; }
  body .preview-stage:has(.mockup-device[data-hardware="phone"]) { --mockup-preview-height: 390px; }
  body .preview-stage .mockup-device[data-hardware="phone"] { width: 150px; max-width: 48%; }
  body .preview-stage .mockup-device[data-hardware="imac"] { width: min(91%, calc((var(--mockup-preview-height) - 108px) * 1.5319)); }
  body .preview-stage .mockup-device[data-hardware="macbook"] { width: min(90%, calc((var(--mockup-preview-height) - 60px) * 1.5319)); }
}

@media (max-width: 380px) {
  body .work-tile-media.work-mockup-media,
  body .portfolio-grid .project-card .project-stage.mockup-stage,
  body .studio-mockup-stage { --mockup-stage-height: 278px; }
  .mockup-device[data-hardware="phone"] { width: 123px; }
  .mockup-stage .mockup-companion,
  .work-mockup-media .mockup-companion { width: 64px; bottom: 31px; right: 6%; }
  .mockup-device[data-hardware="phone"] .mockup-screen { border-width: 5px; border-radius: 25px; }
}

html.ex-motion-paused .mockup-device,
body.ex-motion-paused .mockup-device,
html.ex-motion-paused .work-mockup-card .mockup-device,
body.ex-motion-paused .work-mockup-card .mockup-device,
html.ex-motion-paused .project-stage.mockup-stage .mockup-device,
body.ex-motion-paused .project-stage.mockup-stage .mockup-device {
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .mockup-device,
  .work-mockup-card .mockup-device,
  .project-stage.mockup-stage .mockup-device,
  .studio-mockup-stage .mockup-device { transform: none !important; transition: none !important; }
}