.portrait-carousel.is-ready .work-strip {
  position: relative;
  display: block;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.portrait-carousel.is-dragging .work-strip { cursor: grabbing; }
.portrait-carousel.is-ready .work-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  will-change: transform;
}
.portrait-carousel.is-ready .work-card a { display: flex; align-items: center; height: 100%; cursor: inherit; }
.portrait-carousel.is-ready .work-card img { width: 100%; height: auto; max-height: none; object-fit: contain; pointer-events: none; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; }
.carousel-controls[hidden] { display: none; }
.carousel-controls button, .portrait-lightbox button {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}
.carousel-controls button:hover, .portrait-lightbox button:hover { text-decoration: underline; text-underline-offset: 5px; }
.portrait-carousel a:focus-visible, .carousel-controls button:focus-visible, .portrait-lightbox button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
.portrait-lightbox {
  width: min(1100px, 100%);
  max-width: 100%;
  max-height: 100dvh;
  padding: 16px 24px;
  border: 0;
  color: var(--paper);
  background: transparent;
  overflow: auto;
}
.portrait-lightbox::backdrop { background: rgba(17, 17, 17, .96); }
.lightbox-toolbar { display: flex; justify-content: flex-end; }
.portrait-lightbox img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 164px); margin: 0 auto; object-fit: contain; }
.lightbox-navigation { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* These preview JPEGs contain pale export margins. Clip only those rows,
   plus one source pixel to prevent a resampling seam during scaling. */
.portrait-carousel img[src$="portrait-soft.jpg"],
.portrait-lightbox img[src$="portrait-soft.jpg"] { clip-path: inset(0.8451% 0 0.8451% 0); }
.portrait-carousel img[src$="portrait-direct.jpg"],
.portrait-lightbox img[src$="portrait-direct.jpg"] { clip-path: inset(0 0 1.8033% 0); }
.portrait-carousel img[src$="author.jpg"],
.portrait-lightbox img[src$="author.jpg"] { clip-path: inset(0 0 1.1225% 0); }