/* V2: room for the original landscape artwork and the editorial content.
   Both files are 1672 × 941. Never stretch either image to the section height. */
.about-page .about-face-section {
  --seb-image-height: calc(120vw * 941 / 1672);
  height: max(115svh, var(--seb-image-height));
  min-height: 115svh;
  background: #0b0b0b;
}

.about-page .about-face-media {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: auto;
  aspect-ratio: 1672 / 941;
}

.about-page .about-face-media .about-face-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform: none;
}

/* Continue the dark shirt into the extra quote space without a hard image edge. */
.about-page .about-face-shade {
  background: linear-gradient(to bottom,
    transparent calc(var(--seb-image-height) - 160px),
    #0b0b0b var(--seb-image-height));
}

.about-page .about-face-divider {
  top: calc(var(--seb-image-height) * .57);
  bottom: auto;
}

.about-page .about-face-quote {
  top: calc(var(--seb-image-height) * .62);
  bottom: auto;
}

.about-page .about-face-hotspot {
  top: calc(var(--seb-image-height) * .065);
  left: 36%;
  width: 32%;
  height: calc(var(--seb-image-height) * .64);
}

@media (max-width: 900px) {
  .about-page .about-face-section {
    --seb-image-height: calc(100vw * 941 / 1672);
    --seb-image-top: 210px;
    height: auto;
    min-height: max(125svh, calc(var(--seb-image-top) + var(--seb-image-height) + 480px));
    padding-bottom: 64px;
  }
  .about-page .about-face-media {
    top: var(--seb-image-top);
    left: 0;
    width: 100%;
  }
  .about-page .about-face-shade {
    background: linear-gradient(to bottom,
      #0b0b0b var(--seb-image-top),
      transparent calc(var(--seb-image-top) + 40px),
      transparent calc(var(--seb-image-top) + var(--seb-image-height) - 55px),
      #0b0b0b calc(var(--seb-image-top) + var(--seb-image-height)));
  }
  .about-page .about-face-heading { top: 64px; }
  .about-page .about-linkedin {
    top: calc(var(--seb-image-top) + var(--seb-image-height) + 32px);
    left: auto;
  }
  .about-page .about-face-divider { top: auto; bottom: 350px; }
  .about-page .about-face-quote { top: auto; bottom: 64px; }
  .about-page .about-face-hotspot {
    top: calc(var(--seb-image-top) + var(--seb-image-height) * .065);
    left: 38%;
    width: 26%;
    height: calc(var(--seb-image-height) * .64);
  }
}

@media (max-width: 640px) {
  .about-page .about-face-section {
    --seb-image-top: 200px;
    min-height: max(125svh, calc(var(--seb-image-top) + var(--seb-image-height) + 420px));
  }
  .about-page .about-face-divider { top: auto; bottom: 260px; }
  .about-page .about-face-quote { top: auto; bottom: 48px; }
}

/* V8 — only the divider and quotation move slightly lower. */
@media (min-width: 901px) {
  .about-page .about-face-divider {
    top: calc(var(--seb-image-height) * .57 + clamp(28px, 3vw, 48px));
  }

  .about-page .about-face-quote {
    top: calc(var(--seb-image-height) * .62 + clamp(28px, 3vw, 48px));
  }
}

@media (max-width: 900px) {
  .about-page .about-face-divider { bottom: 326px; }
  .about-page .about-face-quote { bottom: 40px; }
}

@media (max-width: 640px) {
  .about-page .about-face-divider { bottom: 238px; }
  .about-page .about-face-quote { bottom: 30px; }
}