/* Responsive image composition: high-resolution landscape assets on desktop,
   original square art direction on compact screens. */
.hero > picture,
.final > picture {
  position: absolute;
  inset: 0;
}

.hero > picture img,
.final > picture img,
.portrait picture img,
.social-img picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait picture,
.social-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 761px) {
  .hero { min-height: min(960px, 100svh); }
  .hero > picture img { object-position: center 48%; }

  .split {
    min-height: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    align-items: center;
    padding: clamp(56px, 6vw, 96px) 0;
  }

  .portrait {
    aspect-ratio: 4 / 3;
    margin-left: var(--pad);
    box-shadow: 0 24px 70px rgba(23, 23, 19, .12);
  }

  .portrait img { object-position: center; }
  .split-copy { padding-top: 40px; padding-bottom: 40px; }

  .craft {
    min-height: 780px;
    grid-template-columns: minmax(400px, .82fr) minmax(0, 1.18fr);
  }

  .craft-media {
    align-self: center;
    gap: clamp(14px, 1.5vw, 24px);
    padding: 70px var(--pad) 110px 0;
  }

  .craft figure {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #292923;
  }

  .craft figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .social-img {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .social-img img { object-position: center 48%; }
  .final { min-height: min(900px, 88svh); }
  .final > picture img { object-position: center 42%; }
}

@media (max-width: 760px) {
  .hero > picture img { object-position: 50% 35%; }
  .portrait picture img,
  .social-img picture img,
  .final > picture img { object-position: center 30%; }
}