/* Shared geometry for the real website and the owner's desktop/mobile canvas. */
.portfolio-gallery {
  --gallery-background: transparent;
  --gallery-gap: 16px;
  --gallery-padding: 20px;
  --gallery-columns: 24;
  --gallery-max-width: 1920px;
  box-sizing: border-box;
  min-width: 0;
  padding-inline: var(--gallery-padding);
  background: var(--gallery-background);
}
.portfolio-gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--gallery-gap);
  width: 100%;
  max-width: var(--gallery-max-width);
  margin-inline: auto;
  align-items: start;
}
.portfolio-gallery-grid.is-packed { display: block; }
.portfolio-gallery-grid.is-packed > .portfolio-gallery-tile {
  position: absolute;
  /* The shared layout gives every tile in a row the same actual height. */
  aspect-ratio: auto;
}
.portfolio-gallery-tile {
  position: relative;
  min-width: 0;
  grid-column: span var(--tile-span, 4);
  aspect-ratio: var(--tile-ratio, 1);
  border-radius: var(--tile-radius, 0px);
  overflow: hidden;
  isolation: isolate;
  background: var(--tile-background, var(--surface-control, #f5f5f5));
}
.portfolio-gallery-media-box {
  position: absolute;
  inset: var(--tile-padding, 0px);
  bottom: var(--tile-padding-bottom, var(--tile-padding, 0px));
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  transition: opacity 240ms ease;
}
/* Use the saved tile geometry, including its radius, while media is loading. */
.works[data-gallery-loading="true"] .work-tile { position: relative; overflow: hidden; }
.portfolio-gallery-tile[data-media-state="loading"] .portfolio-gallery-media-box { opacity: 0; }
.portfolio-gallery-tile[data-media-state="loading"]::before,
.works[data-gallery-loading="true"] .work-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: inherit;
  filter: brightness(0.97);
  opacity: 0;
  animation: gallery-loading-pulse 2.8s ease-in-out infinite;
  animation-play-state: paused;
}
.portfolio-gallery-tile[data-media-state="loading"][data-media-visible="true"]::before,
.works[data-gallery-loading="true"] .work-tile::before { animation-play-state: running; }
@keyframes gallery-loading-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.portfolio-gallery-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit, contain);
  object-position: var(--media-x, 50%) var(--media-y, 50%);
  transform: scale(var(--media-scale, 1));
  transform-origin: var(--media-x, 50%) var(--media-y, 50%);
}
.portfolio-gallery-still { position: absolute; inset: 0; }
.portfolio-gallery-tile[data-media-fit="fixed"] .portfolio-gallery-media {
  position: absolute;
  inset: auto;
  left: var(--media-x, 50%);
  top: var(--media-y, 50%);
  width: var(--media-width);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(calc(-1 * var(--media-x, 50%)), calc(-1 * var(--media-y, 50%))) scale(var(--media-scale, 1));
}
.portfolio-gallery [hidden] { display: none !important; }
.portfolio-gallery-product {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  max-width: calc(100% - 88px);
  height: 16px;
  padding: 0;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.72;
  font: 400 12px/16px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
/* A quiet label with a full 44px touch target. */
.portfolio-gallery-product::before { content: ''; position: absolute; inset: -14px -6px; min-width: 44px; }
.portfolio-gallery-product-label { overflow: hidden; text-overflow: ellipsis; }
.portfolio-gallery-product-arrow { flex-shrink: 0; font-size: 13px; }
.portfolio-gallery-product[href]:hover { opacity: 1; }
.portfolio-gallery-product:focus-visible { mix-blend-mode: normal; opacity: 1; background: #000; outline: 2px solid #0084ff; outline-offset: 3px; }
.portfolio-gallery-editable .portfolio-gallery-product { pointer-events: none; }
.portfolio-gallery-motion {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  color: #fff;
  background: rgb(0 0 0 / 0.44);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.portfolio-gallery-motion-icon { position: relative; display: block; width: 18px; height: 18px; }
.portfolio-gallery-motion-icon::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 13px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.portfolio-gallery-motion[data-playing="true"] .portfolio-gallery-motion-icon::before,
.portfolio-gallery-motion[data-playing="true"] .portfolio-gallery-motion-icon::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 16px;
  border-radius: 1px;
  background: currentColor;
  clip-path: none;
}
.portfolio-gallery-motion[data-playing="true"] .portfolio-gallery-motion-icon::after { left: 11px; }
@media (hover: hover) and (pointer: fine) {
  .portfolio-gallery-motion:hover { background: rgb(0 0 0 / 0.5); border-color: rgb(255 255 255 / 0.3); }
}
.portfolio-gallery-motion:active { background: rgb(0 0 0 / 0.55); }
.portfolio-gallery-motion:focus-visible { outline: 3px solid #0084ff; outline-offset: -4px; }
.portfolio-gallery-unavailable {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--label-secondary, #6e6e73);
  font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
}
.portfolio-gallery-editable .portfolio-gallery-tile { cursor: pointer; }
.portfolio-gallery-editable .portfolio-gallery-media { pointer-events: none; }
.portfolio-gallery-editable .portfolio-gallery-tile:is(:focus-visible, .is-selected) { outline: 2px solid #007aff; outline-offset: -2px; }
/* The document owns its outer gutters, independently of the intro's width. */
.hero > .works.portfolio-gallery { margin-inline: calc(-1 * var(--space, 24px)); }
.experience:has(.portfolio-gallery) { max-width: none; }
@media (min-width: 810px) and (hover: hover) and (pointer: fine) {
  .hero > .works.portfolio-gallery { margin-inline: calc(-1 * var(--desktop-gutter, 32px)); }
}
@media (prefers-contrast: more) {
  .portfolio-gallery-product { mix-blend-mode: normal; opacity: 1; background: #000; outline: 1px solid #fff; }
  .portfolio-gallery-motion { background: #000; border-color: #fff; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-gallery-tile[data-media-state="loading"]::before,
  .works[data-gallery-loading="true"] .work-tile::before { animation: none; opacity: 0; }
  .portfolio-gallery-media-box, .portfolio-gallery-motion { transition: none; }
}