/* Meet Drew borrows the homepage's inverted charcoal triangle. */
.about-page #main .about-founder-hero {
  position: relative;
  isolation: isolate;
  height: 65vw;
  min-height: 850px;
  max-height: 1080px;
  overflow: hidden;
  background: var(--black);
}

.about-page .about-triangle,
.about-page .about-image-field {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.about-page .about-triangle {
  z-index: -2;
  background: var(--charcoal);
}

.about-page .about-image-field { z-index: -1; }

.about-page .about-portrait {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 42%;
  height: 82%;
  transform: translateX(-50%);
  mask-image: linear-gradient(#000 0%, #000 57%, transparent 96%);
}

.about-page .about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.about-page .about-title {
  position: absolute;
  top: 34%;
  left: 7%;
  width: 25%;
}

.about-page #main .about-title h1 {
  margin: 0;
  font-size: clamp(72px, 7.5vw, 108px);
  line-height: .98;
}

.about-page #main .about-role {
  position: absolute;
  top: 41%;
  right: 6%;
  width: 23%;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.65;
  color: var(--body-copy);
}

body.site-standard.about-page #main .founder-intro {
  background: var(--black);
  padding-top: 64px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .about-page #main .about-founder-hero { min-height: 760px; }
  .about-page .about-portrait { top: 18%; width: 46%; height: 78%; }
  .about-page .about-title { left: 5%; }
  .about-page #main .about-title h1 { font-size: 72px; }
  .about-page #main .about-role { right: 4%; width: 23%; font-size: 17px; }
}

@media (max-width: 760px) {
  .about-page #main .about-founder-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 540px 26px 64px;
  }
  .about-page .about-triangle,
  .about-page .about-image-field { height: 640px; }
  .about-page .about-portrait {
    top: 100px;
    width: 94%;
    height: 490px;
    mask-image: linear-gradient(#000 0%, #000 55%, transparent 98%);
  }
  .about-page .about-title { position: relative; inset: auto; width: auto; }
  .about-page #main .about-title h1 { font-size: clamp(72px, 20vw, 96px); }
  .about-page #main .about-role {
    position: relative;
    inset: auto;
    width: auto;
    max-width: 320px;
    margin-top: 24px;
    font-size: 16px;
  }
  .about-page .about-role br { display: none; }
  body.site-standard.about-page #main .founder-intro { padding-top: 24px; }
}