.founder-bio {
  background: var(--sand);
  color: var(--espresso);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  padding: clamp(5rem, 10vw, 9rem) var(--page-pad);
  position: relative;
}

.bio-background-name {
  color: rgb(126 65 36 / 10%);
  font: 900 clamp(5rem, 17vw, 14rem) / .9 var(--display);
  inset: 2rem auto auto -0.02em;
  letter-spacing: -.055em;
  margin: 0;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  z-index: -1;
}

.bio-portrait {
  align-self: end;
  background: var(--cream);
  border: 1px solid var(--espresso);
  justify-self: center;
  max-width: 34rem;
  overflow: hidden;
  transform: rotate(-2deg);
  width: min(100%, 30rem);
}

.bio-portrait img {
  aspect-ratio: 658 / 808;
  display: block;
  object-fit: cover;
  width: 100%;
}

.bio-copy { align-self: center; max-width: 42rem; }
.bio-copy h2 { font: 900 clamp(4.5rem, 13vw, 10rem) / .9 var(--display); letter-spacing: -.045em; margin: .6rem 0 1.5rem; }
.bio-copy > p:not(.section-kicker) { font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.2; margin: 0 0 1rem; }
.bio-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.bio-facts span { border: 1px solid currentColor; border-radius: 999px; font: 700 .9rem/1 var(--body); letter-spacing: .08em; padding: .8rem 1rem; text-transform: uppercase; }

@media (min-width: 48rem) {
  .founder-bio { grid-template-columns: minmax(18rem, .85fr) minmax(24rem, 1.15fr); }
  .bio-background-name { inset-block-start: 1rem; }
}

@media (min-width: 80rem) {
  .founder-bio { padding-inline: max(var(--page-pad), calc((100vw - 90rem) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .bio-portrait { transform: none; }
}