.bio-page {
  --bio-copy: min(760px, 100%);
}

.bio-page .standalone-header nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.bio-hero {
  width: var(--shell);
  margin: 0 auto;
  padding: 110px 0 95px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 90px;
  align-items: end;
}

.bio-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(58px, 8vw, 118px);
  line-height: .89;
  letter-spacing: -.075em;
}

.bio-hero h1 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.bio-hero-lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
}

.bio-proof-strip {
  border-block: 1px solid var(--ink);
  background: var(--acid);
}

.bio-proof-strip > div {
  width: var(--shell);
  margin: 0 auto;
  min-height: 74px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bio-proof-strip span {
  padding: 18px 20px;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--ink);
  font: 500 10px/1.45 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bio-proof-strip span:first-child { border-left: 1px solid var(--ink); }
.bio-proof-strip strong { display: block; margin-bottom: 4px; font: 800 16px/1.1 var(--sans); letter-spacing: -.02em; text-transform: none; }

.bio-intro {
  width: var(--shell);
  margin: 0 auto;
  padding: 120px 0 105px;
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 100px;
}

.bio-intro-marker {
  position: sticky;
  top: 32px;
  align-self: start;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--acid);
  box-shadow: 14px 14px 0 var(--ink);
  font: 500 clamp(72px, 11vw, 165px)/1 var(--mono);
  letter-spacing: -.1em;
}

.bio-intro-copy { max-width: 830px; }
.bio-intro-copy h2,
.bio-section-copy h2,
.bio-closing h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1;
  letter-spacing: -.055em;
}

.bio-intro-copy .bio-deck {
  margin: 34px 0 0;
  font-size: 23px;
  line-height: 1.55;
  font-weight: 650;
}

.bio-intro-copy p:not(.section-number):not(.bio-deck),
.bio-section-copy p,
.bio-closing p {
  color: #505751;
  font-size: 16px;
  line-height: 1.85;
}

.bio-timeline {
  border-top: 1px solid var(--ink);
}

.bio-era {
  border-bottom: 1px solid var(--ink);
}

.bio-era-inner {
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px 1fr;
}

.bio-year {
  padding: 76px 38px 76px 0;
  border-right: 1px solid var(--ink);
  font: 500 clamp(46px, 6vw, 82px)/.9 var(--mono);
  letter-spacing: -.08em;
}

.bio-year small {
  display: block;
  margin-top: 18px;
  color: #6b716b;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bio-section-copy {
  padding: 74px 0 78px 70px;
  max-width: 930px;
}

.bio-section-copy .bio-kicker {
  margin: 0 0 18px;
  color: #656c66;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bio-section-copy blockquote {
  margin: 32px 0;
  padding: 25px 28px;
  border: 1px solid var(--ink);
  background: var(--paper-bright);
  box-shadow: 7px 7px 0 var(--acid);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 650;
}

.bio-section-copy blockquote p { margin: 0; color: var(--ink); font-size: inherit; line-height: inherit; }

.bio-record {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.bio-record > span {
  display: block;
  margin-bottom: 12px;
  color: #687068;
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bio-record ul {
  margin: 0;
  padding-left: 19px;
  color: #505751;
  font-size: 13px;
  line-height: 1.75;
}

.bio-record a { text-underline-offset: 4px; }
.bio-record a:hover { color: #608f15; }

.bio-era.dark {
  color: var(--paper-bright);
  background: var(--ink);
}

.bio-era.dark .bio-year { border-color: #3f463f; }
.bio-era.dark .bio-year small,
.bio-era.dark .bio-section-copy .bio-kicker,
.bio-era.dark .bio-section-copy p,
.bio-era.dark .bio-record ul { color: #abb3ab; }
.bio-era.dark .bio-record { border-color: #414941; }
.bio-era.dark .bio-section-copy blockquote { color: var(--ink); }

.bio-medal-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  background: var(--paper-bright);
  color: var(--ink);
}

.bio-medal-row div {
  min-height: 110px;
  padding: 20px;
  display: grid;
  align-content: space-between;
  border-right: 1px solid var(--ink);
}

.bio-medal-row div:last-child { border-right: 0; }
.bio-medal-row strong { font-size: 17px; line-height: 1.15; }
.bio-medal-row span { color: #6d746e; font: 500 9px/1.35 var(--mono); text-transform: uppercase; }

.bio-certificate {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 28px;
  border: 1px solid #596159;
  background: #171b18;
}

.bio-certificate strong { display: block; color: var(--acid); font-size: 20px; }
.bio-certificate span { display: block; margin-top: 7px; color: #aeb5ae; font-size: 13px; line-height: 1.5; }
.bio-certificate .certificate-mark { color: var(--acid); font: 500 38px/1 var(--mono); }

.bio-closing {
  width: var(--shell);
  margin: 0 auto;
  padding: 110px 0 125px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 90px;
  align-items: end;
}

.bio-closing p { margin: 0; }
.bio-closing .hero-actions { margin-top: 30px; }

.bio-source-note {
  padding: 26px 0 90px;
  width: var(--shell);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  color: #6b726c;
  font: 500 10px/1.7 var(--mono);
}

@media (max-width: 900px) {
  .bio-hero,
  .bio-intro,
  .bio-closing { grid-template-columns: 1fr; gap: 45px; }
  .bio-proof-strip > div { grid-template-columns: 1fr 1fr; }
  .bio-proof-strip span:nth-child(2) { border-right: 1px solid var(--ink); }
  .bio-proof-strip span:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .bio-intro-marker { position: static; width: min(260px, 70vw); }
  .bio-era-inner { grid-template-columns: 155px 1fr; }
  .bio-section-copy { padding-left: 42px; }
  .bio-medal-row { grid-template-columns: 1fr 1fr; }
  .bio-medal-row div:nth-child(2) { border-right: 0; }
  .bio-medal-row div:nth-child(n+3) { border-top: 1px solid var(--ink); }
}

@media (max-width: 680px) {
  .bio-page .standalone-header { height: auto; min-height: 86px; padding: 18px 0; align-items: flex-start; gap: 20px; }
  .bio-page .standalone-header nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .bio-page .standalone-header nav a { font-size: 11px; }
  .bio-page .standalone-header .nav-cta { padding: 9px 11px; }
  .bio-hero { padding: 76px 0 65px; }
  .bio-hero h1 { font-size: clamp(52px, 17vw, 78px); }
  .bio-proof-strip > div { grid-template-columns: 1fr; }
  .bio-proof-strip span,
  .bio-proof-strip span:first-child { border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); border-top: 1px solid var(--ink); }
  .bio-proof-strip span:first-child { border-top: 0; }
  .bio-intro { padding: 80px 0; }
  .bio-era-inner { grid-template-columns: 1fr; }
  .bio-year { padding: 44px 0 30px; border-right: 0; border-bottom: 1px solid var(--line); }
  .bio-section-copy { padding: 38px 0 55px; }
  .bio-medal-row { grid-template-columns: 1fr; }
  .bio-medal-row div { border-right: 0; border-top: 1px solid var(--ink); }
  .bio-medal-row div:first-child { border-top: 0; }
  .bio-certificate { grid-template-columns: 1fr; }
  .bio-closing { padding: 80px 0 95px; }
}


.bio-testimonial-artifact {
  margin: 42px 0 0;
  border: 1px solid #596159;
  background: #151917;
  overflow: hidden;
}

.bio-testimonial-artifact > a {
  display: block;
  max-height: 430px;
  overflow: hidden;
  border-bottom: 1px solid #596159;
  background: #fff;
}

.bio-testimonial-artifact img {
  display: block;
  width: 100%;
  height: auto;
}

.bio-testimonial-artifact figcaption {
  padding: 26px 28px 28px;
}

.bio-testimonial-artifact figcaption > span {
  display: block;
  margin-bottom: 10px;
  color: var(--acid);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bio-testimonial-artifact figcaption > strong {
  display: block;
  color: var(--paper-bright);
  font-size: 21px;
  line-height: 1.35;
}

.bio-testimonial-artifact figcaption p { margin-bottom: 0; }

@media (max-width: 700px) {
  .bio-testimonial-artifact > a { max-height: 300px; }
  .bio-testimonial-artifact figcaption { padding: 22px; }
}
