/* Compatibility with archived Squarespace markup only.
   Current fonts, colors and components belong in portfolio.css. */
img[data-src] { opacity: 1; visibility: visible; }
.sqs-video-wrapper { position: relative; aspect-ratio: 16/9; }
.sqs-video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.native-video-player video { background: #000; }

/* The archive adds a dark top gradient for its Plyr hover controls.
   Native videos do not need that full-wrapper overlay, especially portraits. */
.case-page .sqs-native-video .native-video-player::before { display: none; }

body.migration-menu-open { overflow: hidden; }
body.migration-menu-open .header-menu { opacity: .98; visibility: visible; pointer-events: auto; }
body.migration-menu-open .burger-inner .top-bun { transform: translateY(5.5px) rotate(45deg); }
body.migration-menu-open .burger-inner .bottom-bun { transform: translateY(-5.5px) rotate(-45deg); }
body.migration-menu-open .header-menu-bg { background: #fff; opacity: .98; }

/* Portrait videos in overlapping Fluid Engine cells. */
.fe-block:has(video[data-aspect-ratio]) { min-height: 0; min-width: 0; position: relative; }
.sqs-block-video:has(video[data-aspect-ratio]) { height: 100% !important; min-height: 0; }
.sqs-block-video:has(video[data-aspect-ratio]) .sqs-block-content { height: 100%; position: relative; }
.sqs-block-video:has(video[data-aspect-ratio]) .intrinsic { position: absolute !important; inset: 0; }
.sqs-block-video:has(video[data-aspect-ratio]) .embed-block-wrapper,
.sqs-block-video:has(video[data-aspect-ratio]) .sqs-native-video { height: 100%; }
.sqs-block-video:has(video[data-aspect-ratio]) .sqs-native-video { display: flex; align-items: flex-start; justify-content: center; }
.sqs-block-video:has(video[data-aspect-ratio]) .native-video-player { aspect-ratio: 1080/1520 !important; width: auto; height: 100%; max-width: 100%; }
.fe-block:has(video[data-aspect-ratio]) > .sqs-block-video { position: absolute; inset: 0; }
.migration-highlight-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }

/* Deliberate Birdsong exception: small portrait loop, air, and title on video. */
.fe-block-birdsong-feature {
  grid-area: 11/2/22/10;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; box-sizing: border-box;
}
.birdsong-feature {
  --birdsong-video-width: 190px;
  position: relative; width: 100%; max-width: 360px; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.birdsong-feature > .video-frame {
  position: relative; width: min(100%, var(--birdsong-video-width)); height: auto;
  aspect-ratio: 1080/1520; background: transparent;
}
.birdsong-feature .video-frame video { width: 100%; height: auto; aspect-ratio: 1080/1520; object-fit: contain; background: transparent; }
.birdsong-caption {
  position: absolute !important; top: 12%; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--birdsong-video-width)); z-index: 1; text-align: center;
}
.birdsong-caption p { margin: 0; text-align: center !important; font-size: 18px; line-height: 1.5; }
@media (min-width: 768px) {
  .fe-block-birdsong-feature { grid-area: 16/17/36/25; padding: 48px 32px; }
  .birdsong-feature { --birdsong-video-width: 300px; }
  .birdsong-caption p { font-size: 20px; }
}