.project {
  width: 100%;
  display: block;
  background: var(--color-white);
  overflow-y: hidden;
}

.swiper-container {
  width: 100%;
  height: 100vh;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  overflow-y: auto;
  pointer-events: none;
}

.btn-prev.generated,
.btn-next.generated {
  pointer-events: none !important;
}

/* Slideshow controls (download + pagination) */
.slideshow-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  left: var(--padding);
  bottom: var(--padding);
  z-index: 5;
}

/* Private download */
.download-private {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ============================================================
   PEEKING SLIDESHOW
   ============================================================ */

/* Variables */
:root {
  --peek: 10vw;
  --peek-gap: 40px;
}

/* Container */
.peaking {
  width: 100%;
  height: 100vh;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-white);
  pointer-events: none;
}

.peaking.has-multiple .swiper-slide {
  width: calc(100vw - 2 * (var(--peek) + var(--peek-gap))) !important;
  height: 100%;
  overflow: hidden;
}

.peaking .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.25;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  pointer-events: none;
}

/* PEEK SLIDES (prev/next) — portrait fullheight toggle ON */

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
  .slide-block {
  align-items: stretch;
  padding: 0;
}

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
  .slide-item {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
  img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  padding: 0 !important;
}

/* PEEK SLIDES (prev/next) — landscape + portrait standard */

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next):is(
    .slide-landscape,
    .slide-portrait:not(.slide-portrait-fullheight)
  )
  .slide-item {
  width: 100%;
}

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next):is(
    .slide-landscape,
    .slide-portrait:not(.slide-portrait-fullheight)
  )
  img {
  width: 100% !important;
  height: 70vh !important;
  max-height: 70vh !important;
  max-width: none !important;
  object-fit: contain;
}

/* PEEK SLIDES (prev/next) — single-asset images */
/* Multi-asset slides override object-position via .slide-multi img below */

.peaking.has-multiple .swiper-slide-prev img {
  object-position: right center;
  padding-bottom: 0 !important;
}

.peaking.has-multiple .swiper-slide-next img {
  object-position: left center;
  padding-bottom: 0 !important;
}

/* PEEK SLIDES (prev/next) — single-asset videos */

.peaking.has-multiple .swiper-slide-prev:not(.slide-multi) .slide-video {
  margin-left: auto;
  margin-right: 0;
}

.peaking.has-multiple .swiper-slide-next:not(.slide-multi) .slide-video {
  margin-left: 0;
  margin-right: auto;
}

/* PEEK SLIDES (prev/next) — multi-asset blocks */

/* Align content to the visible edge */
.peaking.has-multiple .swiper-slide-prev.slide-multi .slide-block {
  justify-content: flex-end;
}
.peaking.has-multiple .swiper-slide-next.slide-multi .slide-block {
  justify-content: flex-start;
}

.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  .slide-item {
  width: auto !important;
  overflow: hidden;
}

/* Video items need flex: 1 to size correctly — photo items don't */
.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  .slide-item:has(.slide-video) {
  flex: 1;
}

/* Multi-asset peek images */
.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  img {
  width: 100% !important;
  height: 70vh !important;
  max-width: 100% !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Multi-asset peek videos: fill their flex item.
   Desktop forces fixed height; mobile uses VJS fluid mode (see @media blocks). */
.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  .slide-video:is(.vertical-video, .landscape-video) {
  width: 100% !important;
}
.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  .slide-video.vertical-video {
  max-width: 100% !important;
}
.peaking.has-multiple
  :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
  .slide-video:is(.vertical-video, .landscape-video)
  .vjs-tech {
  object-fit: cover !important;
}

/* ACTIVE SLIDE — multi-asset images */

.peaking.has-multiple .slide-multi.swiper-slide-active .slide-block {
  align-items: center;
}
.peaking.has-multiple .slide-multi.swiper-slide-active .slide-item {
  min-width: 0;
}
.peaking.has-multiple .slide-multi.swiper-slide-active .slide-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: 70vh !important;
  max-height: 70vh !important;
  object-fit: contain;
  padding-bottom: 0 !important;
}

/* ACTIVE SLIDE — portrait fullheight toggle ON */

.peaking.has-multiple .slide-portrait-fullheight.swiper-slide-active img {
  height: 100vh !important;
  max-height: 100vh !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  padding: 0 !important;
}

/* ACTIVE SLIDE — landscape + portrait standard */

.peaking.has-multiple .slide-landscape.swiper-slide-active img,
.peaking.has-multiple
  .slide-portrait.swiper-slide-active:not(.slide-portrait-fullheight)
  img {
  padding-bottom: 0 !important;
}

/* ACTIVE SLIDE — multi-asset landscape videos */

.peaking.has-multiple
  .slide-multi.swiper-slide-active
  .slide-item:has(.slide-video.landscape-video) {
  flex: 1;
  min-width: 0;
}
.peaking.has-multiple
  .slide-multi.swiper-slide-active
  .slide-item
  .slide-video.landscape-video {
  width: 100%;
}

/* Prevent multi-asset vertical videos from overflowing their slide-item */
.slide-multi .slide-item .slide-video.vertical-video {
  max-width: 100%;
}

/* DESKTOP ONLY — multi-asset peek videos: force fixed height so all assets align.
   Must not apply on mobile where VJS fluid mode handles height naturally. */
@media screen and (min-width: 769px) {
  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
    .slide-video:is(.vertical-video, .landscape-video) {
    height: 70vh;
  }
  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
    .slide-video:is(.vertical-video, .landscape-video)
    .video-js {
    height: 70vh !important;
    padding-top: 0 !important;
  }
}

/* Active slide */
.swiper-slide-active {
  opacity: 1;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  pointer-events: none;
}

.artist .swiper-slide-active {
  pointer-events: all;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
}

.project-info {
  display: none;
}

.project-title span {
  font-size: calc(var(--small-font) + 1px);
  text-transform: capitalize;
  font-family: var(--serif-italic);
}

.project-credits {
  display: flex;
}

.project-credits p {
  font-family: var(--serif-italic);
  text-transform: capitalize;
  font-size: calc(var(--small-font) + 1px);
  padding-left: 4px;
}

.project-credits strong {
  font-family: var(--sans);
  text-transform: uppercase;
}

.project-credits strong::before {
  content: " / ";
  padding-right: 4px;
  display: inline-block;
  font-family: var(--serif-italic);
}

.swiper-pagination-custom {
  bottom: auto !important;
  left: auto !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
}

.swiper-numbers {
  position: static !important;
  font-size: var(--small-font);
  color: var(--color-black);
}

/* Disabled styles */
.swiper-wrapper.disabled {
  transform: translate3d(0px, 0, 0) !important;
}

.swiper-numbers.disabled,
.btn-next.disabled,
.btn-prev.disabled {
  display: none !important;
}

/* Video */
.landscape-video {
  width: 70vw;
  height: auto;
}

.vertical-video {
  width: 24vw;
  height: auto;
}

.horizontal-scroll .vertical-video {
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 25vw;
}

.horizontal-scroll .scroll-block {
  padding-right: 0 !important;
}

.horizontal-scroll .scroll-item {
  padding-left: 8vw !important;
  padding-right: 8vw !important;
}

.two .landscape-video {
  width: 30vw;
  height: auto;
}

.peaking.has-multiple .landscape-video {
  width: 50vw;
  height: auto;
}

/* Horizontal scroll videos */
.horizontal-scroll .slide-video:not(.full-video, .vertical-video),
.horizontal-scroll .landscape-video {
  min-width: 80vw;
  /* width: 100%; */
  height: fit-content;
  height: -moz-fit-content;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}

.vjs-control-bar {
  background-color: transparent !important;
  pointer-events: all;
  opacity: 1 !important;
}

.vjs-play-control {
  font-size: var(--body-font) !important;
}

.vjs-icon-volume-mute:before,
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
  content: "Audio OFF" !important;
  font-size: var(--body-font) !important;
  font-family: var(--serif-italic) !important;
}

.vjs-icon-volume-high:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
  content: "Audio ON" !important;
  font-size: var(--body-font) !important;
  font-family: var(--serif-italic) !important;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.video-js
  .vjs-volume-panel.vjs-hover
  .vjs-mute-control
  ~ .vjs-volume-control.vjs-volume-horizontal,
.video-js
  .vjs-volume-panel
  .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  display: none !important;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
  width: auto !important;
  transition: none !important;
}

.vjs-theme-fantasy .vjs-play-control .vjs-icon-placeholder:before {
  border: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  top: 46% !important;
  left: 55% !important;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.vjs-icon-pause:before,
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: "Pause" !important;
  font-size: var(--body-font) !important;
  font-family: var(--serif-italic) !important;
}

.video-js .vjs-play-control .vjs-icon-placeholder:before {
  content: "Play" !important;
  font-size: var(--body-font) !important;
  font-family: var(--serif-italic) !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "Play" !important;
  font-size: var(--title-font) !important;
  font-family: var(--serif-italic) !important;
}

.vjs-theme-fantasy .vjs-big-play-button {
  color: #fff !important;
  pointer-events: all;
  background: rgba(0, 0, 0, 0.4) !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center;
  justify-content: center;
}

.video-js .vjs-big-play-button {
  display: flex !important;
}

.video-js.vimeo-source .vjs-big-play-button {
  display: none !important;
}

.video-js.vjs-has-started .vjs-big-play-button {
  display: none !important;
}

.vjs-theme-fantasy .vjs-control-bar {
  color: #fff !important;
  pointer-events: all;
}

.vjs-picture-in-picture-control {
  display: none !important;
}

.vjs-fullscreen .vjs-tech {
  object-position: center !important;
}

/* Prevent multi-asset vertical videos from overflowing their slide-item
   and collapsing the gap between them at narrow viewports. */
.slide-multi .slide-item .slide-video.vertical-video {
  max-width: 100%;
}

.vjs-progress-control {
  visibility: hidden !important;
}

.vjs-theme-fantasy .vjs-progress-control .vjs-progress-holder,
.vjs-theme-fantasy .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 6px !important;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: none !important;
}

.vjs-load-progress {
  background: var(--color-white) !important;
}

.video-js .vjs-load-progress div {
  background: var(--color-white) !important;
}

/* Slide */
.slide-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* padding-bottom: 3%; */
  background-color: var(--color-white);
  pointer-events: none;
}

.project .slide-item img:not(.full-img, .fullscreen) {
  max-width: 70vw;
  object-fit: contain;
  height: 70vh;
  padding-bottom: 3%;
}

.project .slide-item .full-img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
  vertical-align: bottom;
}

.project .slide-item .fullscreen {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  max-width: 100vw;
  max-height: 100vh;
  vertical-align: bottom;
}

.peaking .slide-item .full-img {
  max-height: 70vh;
  max-width: 70vw;
  object-fit: contain;
  height: auto;
  padding-bottom: 3%;
}

.peaking .slide-item .fullscreen {
  max-height: 70vh;
  max-width: 70vw;
  object-fit: contain;
  height: auto;
  padding-bottom: 3%;
}

.slide-text {
  text-align: left;
  font-size: var(--title-font);
  font-family: var(--serif);
  line-height: var(--line-height);
  padding: 0;
  padding-left: calc(var(--padding) * 3);
  max-width: 880px;
}

.slide-text strong {
  font-family: var(--sans);
  font-size: var(--small-font);
  display: inline-block;
  margin-top: 28px;
}

.slide-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  pointer-events: all;
}

.double .slide-item {
  max-width: 40%;
}

.two:not(.double) .slide-item:first-child {
  padding-right: 4px;
}

.two:not(.double) .slide-item:last-child {
  padding-left: 4px;
}

.two .slide-item:first-child img,
.two .slide-item:first-child video,
.triple .slide-item:first-child img,
.triple .slide-item:first-child video {
  object-position: right;
}

.two .slide-item:last-child img,
.two .slide-item:last-child video,
.triple .slide-item:last-child img,
.triple .slide-item:last-child video {
  object-position: left;
}

.two .slide-item img {
  max-width: 38vw;
}

.triple .slide-item:first-child {
  padding-right: 8px;
}

.triple .slide-item:last-child {
  padding-left: 8px;
}

.triple .slide-item img {
  max-width: 28vw;
}

.double .slide-text {
  text-align: left;
  font-size: var(--title-font);
  line-height: var(--line-height);
  padding: 0;
  padding-left: calc(var(--padding) * 3);
  color: var(--color-white);
  mix-blend-mode: exclusion;
}

/* Horizontal scroll */
.horizontal-scroll {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 100vw;
  width: 100%;
  height: 100vh;
  background-color: var(--color-white);
  position: relative;
  overflow: auto;
  overflow-y: hidden;
}

.scroll-block {
  display: flex;
  width: auto;
  height: 100%;
  align-items: center;
  padding-right: 16vw;
}

.scroll-item:not(:last-child) {
  padding-right: 20px;
}

.scroll-item {
  height: 100%;
  width: fit-content;
  width: -moz-fit-content;
}

.horizontal-scroll .slide-text {
  text-align: left;
  min-width: 50vw;
  width: auto;
  max-width: none;
  padding: 0;
  padding-left: calc(var(--padding) * 3);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: var(--title-font);
  line-height: var(--line-height);
}

.scroll-item img.full-img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.scroll-item img:not(.full-img, .fullscreen) {
  min-width: 30vw;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scroll-item img.fullscreen {
  height: 100vh;
  width: 100vw;
  width: 100vw;
  object-fit: cover;
}

.scroll-block:last-child {
  padding-right: 10vw;
}

.horizontal-scroll .double .slide-text {
  text-align: left;
  font-size: var(--title-font);
  line-height: var(--line-height);
  padding: 0;
  padding-left: calc(var(--padding) * 3);
  color: var(--color-black);
  mix-blend-mode: normal;
}

.btn-prev {
  position: fixed;
  left: 0;
  top: 0;
  /* width: 16vw; */
  width: 50vw;
  height: 100vh;
  z-index: 1;
  cursor: w-resize;
}

.btn-next {
  position: fixed;
  top: 0;
  right: 0;
  /* width: 16vw; */
  width: 50vw;
  height: 100vh;
  z-index: 1;
  cursor: e-resize;
}

body.peek-at-start .btn-prev:not(.narrative-btn) {
  width: 0;
  pointer-events: none;
}
body.peek-at-start .btn-next:not(.narrative-btn) {
  width: 100vw;
  cursor: e-resize;
}
body.peek-at-end .btn-next:not(.narrative-btn) {
  width: 0;
  pointer-events: none;
}
body.peek-at-end .btn-prev:not(.narrative-btn) {
  width: 100vw;
  cursor: w-resize;
}

/* Narrative scroll progress bar (mobile only — hidden on desktop) */
.narrative-progress {
  display: none;
}

.default-close {
  color: var(--color-white);
  mix-blend-mode: exclusion;
  position: fixed;
  top: var(--padding);
  left: var(--padding);
  z-index: 3;
}

.rotate-device-btn {
  display: flex;
  pointer-events: none;
  gap: 10px;
  opacity: 0;
  align-items: center;
}

.rotate-device-btn.is-visible {
  opacity: 1;
}

.rotate-device-video {
  display: block;
  width: 30px;
  height: 30px;
  opacity: 0;
}

.rotate-device-btn.is-visible .rotate-device-video {
  animation: rotate-device-fade-in 0.6s ease-in forwards;
}

@keyframes rotate-device-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Object */
model-viewer {
  width: 70vw;
  height: 70vh;
}

model-viewer#reveal {
  --poster-color: transparent;
}

/* Audio player */
.audio-player {
  position: fixed;
  right: var(--padding);
  bottom: calc(var(--padding) - 8px);
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
  color: var(--color-white);
  mix-blend-mode: exclusion;
}

.audio-player span {
  font-family: var(--serif-italic);
  text-transform: capitalize;
  font-size: calc(var(--small-font) + 1px);
  width: fit-content;
  width: -moz-fit-content;
  position: fixed;
  bottom: 28px;
  right: 68px;
}

.player-circle {
  height: 17px;
  width: 17px;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 2;
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
}

.audio-player:hover .player-circle {
  background: var(--color-white);
}

@keyframes circle {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.player-wave {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  display: none;
}

.player-wave.playing {
  display: block;
  animation: circle 2s infinite linear;
}

/* ============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {
  .narrative-btn {
    display: none;
  }

  .swiper-numbers {
    left: 50% !important;
  }

  /* Peeking variables */
  :root {
    --peek: 8vw;
    --peek-gap: 40px;
  }

  /* PEEK SLIDES — portrait fullheight: reset to contained on mobile */

  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
    .slide-block {
    align-items: center;
    padding: 0;
  }

  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
    .slide-item {
    flex: unset;
    overflow: visible;
    display: block;
    width: 100%;
  }

  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-portrait-fullheight
    img {
    max-height: 70vh !important;
  }

  /* ACTIVE SLIDE — portrait fullheight: cap at 70vh on mobile */

  .peaking.has-multiple .slide-portrait-fullheight.swiper-slide-active img {
    height: 70vh !important;
    max-height: 70vh !important;
    width: auto !important;
  }

  .download-private {
    display: none;
  }

  .project-info {
    left: var(--padding);
    bottom: var(--padding);
    transform: none;
    -webkit-transform: none;
  }

  /* Video */
  .slide-video {
    width: 100vw;
    height: 100%;
  }

  .horizontal-scroll .slide-video:not(.full-video, .vertical-video) {
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    top: 0;
    position: static;
    transform: none;
  }

  .full-video {
    width: 100vw;
    height: 100%;
    cursor: pointer !important;
  }

  .full-video .vjs-tech {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100% !important;
  }

  .video-js {
    height: 100%;
    width: 100%;
  }

  /* Slide */
  .swiper-artist .swiper-slide {
    padding-right: 0;
  }

  .slide-block {
    padding: 0;
  }

  .project .slide-block:not(.double) .slide-item:not(:last-child) {
    padding-right: 4px;
  }

  .slide-text {
    padding: var(--padding);
    font-size: clamp(17px, 5vw, 25px);
    overflow-wrap: break-word;
  }

  .slide-text p {
    line-height: 1.3;
    padding: 0;
  }

  .slide-text strong {
    margin-top: 18px;
  }

  .slide-block.double {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
  }

  .slide-block.double .slide-item {
    max-width: 100%;
    padding: 0;
  }

  .slide-block.double .slide-item img,
  .slide-block.double .slide-img {
    width: 100%;
    max-width: 100%;
    max-height: 50vh;
    padding: 0;
    object-fit: contain;
  }

  .slide-block.double .slide-text {
    text-align: left;
    font-size: clamp(17px, 5vw, 25px);
    line-height: 1.3;
    padding: var(--padding);
    overflow-wrap: break-word;
  }

  .slide-block.double .slide-text p {
    padding: 0;
  }

  .two,
  .triple {
    padding-left: 4px;
    padding-right: 4px;
  }

  .triple .slide-item:last-child {
    padding-left: 0px;
  }

  /* .btn-next,
  .btn-prev {
    display: none;
  } */

  /* Horizontal scroll — mobile horizontal swipe, vertically centered */
  .horizontal-scroll {
    flex-direction: row;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100vw;
    height: 80dvh;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 100px;
    padding-left: 5vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .horizontal-scroll::-webkit-scrollbar {
    display: none;
  }

  .horizontal-scroll .two,
  .horizontal-scroll .triple {
    padding: 0;
  }

  .horizontal-scroll .scroll-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scroll-item:not(:last-child) {
    padding-right: 0;
  }

  .project-credits {
    display: none;
  }

  .scroll-block {
    flex-direction: row;
    padding-right: 0;
    height: 100%;
    flex-shrink: 0;
    gap: 100px;
  }

  .scroll-block:last-child {
    margin-right: 5vw;
  }

  .scroll-item {
    height: 100%;
    width: 90vw;
    flex-shrink: 0;
  }

  .horizontal-scroll .slide-text {
    text-align: left;
    min-width: 90vw;
    width: 90vw;
    height: 100%;
    padding: 80px var(--padding) 80px var(--padding);
    position: static;
    top: auto;
    transform: none;
    -webkit-transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: clamp(18px, 5.25vw, 25px);
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .scroll-item img.full-img {
    height: auto;
    width: 100%;
    max-height: 100%;
    max-width: 90vw;
    object-fit: contain;
  }

  .scroll-item img:not(.full-img, .fullscreen) {
    min-width: 90vw;
    width: 90vw;
    height: 100%;
    object-fit: contain;
    vertical-align: bottom;
  }

  .scroll-item img.fullscreen {
    height: 100%;
    width: 90vw;
    min-width: 90vw;
    object-fit: cover;
  }

  /* Progress bar at bottom of mobile narrative scroll */
  .narrative-progress {
    display: block;
    position: fixed;
    bottom: 16px;
    left: 20px;
    right: 20px;
    height: 2px;
    background-color: #f5f5f5;
    border-radius: 2px;
    z-index: 5;
    pointer-events: none;
  }

  .narrative-progress-fill {
    width: 0%;
    height: 100%;
    background-color: #d3d3d3;
    border-radius: 2px;
    transition: width 0.05s linear;
  }

  .project .slide-item img,
  .project .slide-item .full-img {
    max-height: 70vh;
    max-width: 70vw;
    object-fit: contain;
    height: auto;
    padding-bottom: 3%;
  }

  /* .project .slide-item .full-img {
    height: 100vh;
    width: auto;
    object-fit: cover;
    vertical-align: bottom;
  } */

  :not(.horizontal-scroll) > .scroll-block:last-child {
    padding-right: 0;
    padding-bottom: 160px;
  }

  :not(.horizontal-scroll) > .scroll-block:last-child .full-img {
    margin-right: 0;
    padding-bottom: 160px;
  }

  .horizontal-scroll .double .slide-text {
    padding: 80px var(--padding) 80px var(--padding);
    font-size: clamp(18px, 5.25vw, 25px);
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .swiper-container {
    height: 100%;
    /* pointer-events: all; */
  }

  .peaking {
    height: 100%;
  }

  .audio-player span {
    bottom: var(--padding);
  }

  /* Video */
  .landscape-video {
    width: 100vw;
    height: auto;
  }

  .vertical-video {
    width: 60vw;
    height: auto;
  }

  .horizontal-scroll .vertical-video {
    height: auto;
    position: static;
    top: auto;
    transform: none;
    width: 100%;
  }

  /* .horizontal-scroll .scroll-item {
    padding-bottom: 44px;
  } */

  .two .landscape-video {
    width: 100vw;
    height: auto;
  }

  .two .vertical-video {
    width: 60vw;
    height: auto;
  }

  .horizontal-scroll .two .vertical-video {
    width: 100%;
  }

  /* Peek video slides on mobile: override justify-content:center on .slide-block
     so videos align to the visible edge, matching how images peek. */
  .peaking.has-multiple .swiper-slide-prev .slide-video {
    margin-left: auto;
    margin-right: 0;
  }
  .peaking.has-multiple .swiper-slide-next .slide-video {
    margin-left: 0;
    margin-right: auto;
  }

  /* PEEK SLIDES — multi-asset images: natural height capped at 50vh */

  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next).slide-multi
    img {
    height: auto !important;
    max-height: 50vh !important;
  }

  /* PEEK SLIDES — multi-asset videos: constrain width, let VJS fluid mode handle height */

  .peaking.has-multiple
    :is(.swiper-slide-prev, .swiper-slide-next)
    :is(.landscape-video, .vertical-video) {
    width: 100%;
    height: auto;
  }

  /* ACTIVE SLIDE — multi-asset images: shared row height */

  .peaking.has-multiple .slide-multi.swiper-slide-active .slide-item img {
    height: 70vh !important;
    max-height: 70vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ACTIVE SLIDE — single-asset landscape video */

  .peaking.has-multiple .swiper-slide-active .landscape-video {
    width: calc(100vw - 2 * (var(--peek) + var(--peek-gap)));
    height: auto;
  }

  .peaking .vertical-video {
    width: 60vw;
    height: auto;
  }

  .rotate-device-btn {
    font-family: var(--sans);
    font-size: var(--content-font);
    font-style: normal;
    color: var(--color-black);
    position: fixed;
    top: 24px;
    right: var(--padding);
    z-index: 3;
    text-align: right;
  }

  /* Multi-asset VJS control bar: override fixed widths so controls share space */
  /* (visibility:hidden on progress bar still occupies flex space — remove from layout too) */
  .peaking .slide-multi .vjs-control-bar .vjs-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .peaking .slide-multi .vjs-control-bar .vjs-progress-control {
    visibility: hidden;
    min-width: 0;
  }

  /* Reset play button sizing and positioning so it aligns with Audio/Fullscreen controls.
     vjs-theme-fantasy sets font-size:1.5em on .vjs-play-control which inflates its height. */
  .peaking .slide-multi .vjs-theme-fantasy .vjs-play-control {
    font-size: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .peaking
    .slide-multi
    .vjs-theme-fantasy
    .vjs-play-control
    .vjs-icon-placeholder:before {
    top: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }

  /* Scale control text with viewport width: 3vw = ~23px at 768px (matches --body-font),
     then shrinks proportionally as the video narrows below that. */
  .peaking
    .slide-multi
    .video-js
    :is(
      .vjs-play-control,
      .vjs-play-control.vjs-playing,
      .vjs-mute-control.vjs-vol-0,
      .vjs-mute-control
    )
    .vjs-icon-placeholder:before {
    font-size: 3vw !important;
  }
}

/* ============================================================
   RESPONSIVE — LANDSCAPE MOBILE (max-height: 500px)
   Same VJS control bar fixes as portrait mobile — videos are
   narrow due to small vh so controls need to flex-shrink.
   ============================================================ */
@media screen and (max-height: 500px) {
  .peaking .slide-multi .vjs-control-bar .vjs-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .peaking .slide-multi .vjs-control-bar .vjs-progress-control {
    visibility: hidden;
    min-width: 0;
  }
  .peaking .slide-multi .vjs-theme-fantasy .vjs-play-control {
    font-size: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .peaking
    .slide-multi
    .vjs-theme-fantasy
    .vjs-play-control
    .vjs-icon-placeholder:before {
    top: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }
  .peaking
    .slide-multi
    .video-js
    :is(
      .vjs-play-control,
      .vjs-play-control.vjs-playing,
      .vjs-mute-control.vjs-vol-0,
      .vjs-mute-control
    )
    .vjs-icon-placeholder:before {
    font-size: 3vh !important;
  }
}

/* change color white if black bg */
.slide-block[style*="background-color: #000000"] .slide-text,
.slide-block[style*="background-color: rgb(0, 0, 0)"] .slide-text,
.horizontal-scroll[style*="background-color: #000000"] .slide-text,
.horizontal-scroll[style*="background-color: rgb(0, 0, 0)"] .slide-text {
  color: #ffffff !important;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  .landscape-video {
    width: 60vw;
  }
}