.mobile-project-preview { display: none; }
@media (max-width: 640px) {
  .work-project-image[role="button"] { cursor: pointer; }
  .work-project-image[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
  .mobile-project-preview {
    position: fixed; inset: 0; width: 100%; height: 100dvh;
    max-width: none; max-height: none; margin: 0; padding: 0;
    border: 0; overflow: hidden; background: var(--ink);
  }
  .mobile-project-preview[open] { display: block; }
  .mobile-project-preview::backdrop { background: var(--ink); }
  .project-preview-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .project-preview-stage {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%; padding: calc(60px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .project-preview-stage img { display: block; width: 100%; height: auto; flex-shrink: 0; }
  .project-preview-close {
    position: fixed; top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px)); z-index: 1;
    width: 44px; height: 44px; padding: 0; border: 0;
    background: var(--paper); color: var(--ink); font: 32px/44px var(--sans);
    cursor: pointer;
  }
  .project-preview-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
}