/* The supplied portrait remains a quiet presence behind his story. */
.biography {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --portrait-x: 68%;
  padding: clamp(24px, 2.25vw, 30px);
  background: #FAF8F3;
  color: #142D43;
}
.biography::before,
.biography::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.biography::before {
  bottom: auto;
  height: min(100%, 544px);
  background: url('/media/jonathon-backdrop-1400.webp') 68% -56px / auto 600px no-repeat;
  mask-image: linear-gradient(#000 0%, #000 68%, transparent 100%);
}
.biography::after {
  background: linear-gradient(90deg, rgb(250 248 243 / 94%) 0%, rgb(250 248 243 / 85%) 40%, rgb(250 248 243 / 76%) 100%), linear-gradient(0deg, #FAF8F3 0%, transparent 24%);
}
.biography .lead {
  font-size: 1.1875rem;
  line-height: 1.75;
}
@media (max-width: 64rem) {
  .biography {
    --portrait-x: 100%;
    max-width: none;
  }
  .biography .lead {
    font-size: clamp(1.125rem, 1rem + .25vw, 1.25rem);
    line-height: 1.85;
  }
  .biography::before {
    height: min(100%, 580px);
    background-size: auto 600px;
    background-position: right -20px;
  }
}
@media (max-width: 40rem) {
  .biography {
    --portrait-x: 74%;
    padding: 24px 20px;
  }
  .biography::before {
    --portrait-fallback-height: min(550px, calc((100vw - 2 * var(--layout-gutter)) * 1.8));
    height: min(100%, calc(var(--portrait-fallback-height) + 60px));
    background-image: url('/media/jonathon-backdrop-800.webp');
    background-size: auto var(--portrait-fallback-height);
    background-position: 74% 60px;
  }
}
@media (forced-colors: active), print {
  .biography {
    background: white;
    color: #142D43;
  }
  .biography::before,
  .biography::after {
    display: none;
  }
}

/* Align the actual eye line after fonts and paragraph wrapping are measured. */
.biography.portrait-aligned::before {
  top: var(--portrait-y);
  height: var(--portrait-height);
  background-size: auto var(--portrait-height);
  background-position: var(--portrait-x) top;
}