/* Version: V5.2.6 / Editor v2 / Maintenance 20261008 | Copyright (c) 2026 yostudio. All rights reserved. */
.story-section figure.project-carousel, .story-section.is-free-flow .story-copy > figure.project-carousel {
  width:min(100%,var(--image-width,100%),calc(70svh * var(--image-ratio,1)));
  min-width: 0;
}

.project-carousel .carousel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--image-ratio,1);
  max-height: none;
  overflow: hidden;
  border-radius: 0.25rem;
  background: rgb(8 18 29 / .25);
  touch-action: pan-y;
}

.story-section figure .carousel-stage img, .story-section figure .carousel-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
}

.story-section figure .carousel-stage video.is-active {
  pointer-events: auto;
}

.project-carousel .carousel-slide {
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.75rem);
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms;
}

.project-carousel .carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.125rem;
  padding-top: 0.875rem;
}

.carousel-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: #edf5fc;
  background: rgb(9 25 35 / .45);
  border: 1px solid rgb(198 221 236 / .3);
  border-radius: 50%;
  font: inherit;
  font-size: 1.75rem;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.carousel-controls button[hidden], .project-carousel figcaption[hidden] {
  display: none;
}

.carousel-controls button:hover:not(:disabled) {
  background: #102840;
  border-color: #91cdf3;
  transform: translateY(-0.125rem);
}

.carousel-controls button:active:not(:disabled) {
  transform: scale(.94);
}

.carousel-controls button:disabled {
  opacity: .3;
  cursor: default;
}

.carousel-controls button:focus-visible, .carousel-stage:focus-visible {
  outline: 2px solid #91cdf3;
  outline-offset: 4px;
}

.carousel-position {
  color: #c6ddec;
  min-width: 4rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.125rem;
  font-variant-numeric: tabular-nums;
}

.project-carousel figcaption {
  margin-top: 0.75rem;
  color: var(--muted, #91b0c5);
  font-size: 0.8125rem;
}

@media (max-width: 700px) {
  .story-section figure.project-carousel, .story-section.is-free-flow .story-copy > figure.project-carousel {
    width:min(100%,var(--mobile-image-width,var(--image-width,100%)));
  }

  .project-carousel .carousel-stage {
    aspect-ratio:var(--mobile-image-ratio,var(--image-ratio,1));
    max-height: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .project-carousel .carousel-slide, .carousel-controls button {
    transition: none;
  }

}