/* Avoid Safari compositing seams by painting the profile as one background layer. */
.profile {
  isolation: isolate;
  background: #111;
  background-image:
    linear-gradient(to bottom, #111 0%, transparent 18%, transparent 78%, #111 100%),
    linear-gradient(90deg, #111 0%, rgba(17, 17, 17, .86) 44%, rgba(17, 17, 17, .18)),
    url('./assets/frank-bts.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile::before,
.profile::after {
  display: none !important;
}

/* Keep the biography clear of Frank's portrait on wider screens. */
@media (min-width: 801px) {
  .profile {
    background: #111 !important;
    min-height: clamp(700px, 76vh, 840px) !important;
    align-items: flex-start !important;
  }

  .profile-photo {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 42%;
    filter: grayscale(1);
    opacity: .7;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  }

  .profile::before {
    content: '';
    display: block !important;
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(to bottom, #111 0%, transparent 16%, transparent 76%, #111 100%),
      linear-gradient(90deg, #111 0%, rgba(17, 17, 17, .86) 40%, rgba(17, 17, 17, .12));
    pointer-events: none;
  }

  .profile-copy {
    width: min(520px, 36vw) !important;
    padding: 76px 0 !important;
  }

  .profile h2 {
    font-size: clamp(28px, 2.35vw, 42px) !important;
  }

  /* Raise the complete Contact copy group into the marked composition area. */
  .contact-content {
    padding-bottom: 37vh !important;
  }
}

/* Exact V1 five-column / four-row collage from the approved reference. */
.contact-collage {
  display: block !important;
  /* Preserve the collage's native 2:1 ratio; crop only at the outer edges. */
  background: #000 url('./assets/contact-collage-v1.jpg') center / cover no-repeat !important;
  overflow: hidden;
  opacity: .62 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

html,
body {
  overflow-x: hidden !important;
}

.contact-footer,
.contact-collage {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.contact-content {
  width: min(1600px, calc(100% - 110px)) !important;
  max-width: calc(100vw - 110px) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

.contact-collage img {
  display: none !important;
}

/* Remove the frosted film-grain overlay while retaining the dark monochrome grade. */
header::before {
  display: none !important;
}

.hero-video {
  filter: grayscale(1) contrast(1.05) brightness(.45) !important;
}

@media (max-width: 800px) {
  /* Keep the first two screens centred in Safari's mobile viewport. */
  header .hero,
  .profile > .shell {
    width: calc(100% - 44px) !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
    transform: none !important;
  }

  /* On phones, show the portrait first and place the copy below it. */
  .profile {
    display: block !important;
    min-height: 0 !important;
    padding-top: 64vw !important;
    background-color: #111 !important;
    background-image:
      linear-gradient(to bottom, transparent 0%, transparent 55%, #111 96%),
      url('./assets/frank-bts.jpg') !important;
    background-position: center top, 60% top !important;
    background-size: 100% 72vw, auto 72vw !important;
    background-repeat: no-repeat !important;
  }

  .profile-photo {
    display: none !important;
  }

  .profile-copy {
    padding: 30px 0 72px !important;
  }

  .contact-collage {
    background-position: 48% center !important;
  }

  .contact-content {
    width: calc(100% - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
}