/* About-page layout, using the existing site's type, palette and controls. */
.about-page .about-intro {
 display: grid; grid-template-columns: .9fr 1.1fr;
 gap: 24px 65px; align-items: start; padding-block: 45px 60px;
}
.about-page h1 { font-size: clamp(43px, 5.2vw, 72px); }
.about-page .about-intro h1 { grid-column: 2; grid-row: 1; }
.about-page .about-portrait { grid-column: 1; grid-row: 1 / 3; max-width: 500px; }
.about-page .about-portrait img { width: 100%; height: auto; }
.about-page .about-intro-text { grid-column: 2; grid-row: 2; }
.about-page h2 { font-size: clamp(32px, 3.4vw, 48px); }
.about-page p { max-width: 49ch; }
.about-page .about-text-row {
 display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px;
 padding-block: 50px; border-top: 1px solid var(--line);
}
.about-page .about-text-row h2 { max-width: 15ch; }
.about-page .about-personal {
 display: grid; grid-template-columns: .95fr 1.05fr; gap: 65px;
 align-items: center; padding-block: 50px 60px;
}
.about-page .about-personal h2 { margin-bottom: 24px; }
.about-page .about-personal-photo img { width: 100%; height: auto; }
.about-page .about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.about-page .about-links .text-link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
 .about-page .about-intro, .about-page .about-text-row, .about-page .about-personal { column-gap: 35px; }
}
@media (max-width: 700px) {
 .about-page .about-intro, .about-page .about-text-row, .about-page .about-personal {
  grid-template-columns: 1fr; gap: 28px; padding-block: 35px;
 }
 .about-page .about-intro h1, .about-page .about-portrait, .about-page .about-intro-text { grid-column: auto; grid-row: auto; }
 .about-page .about-portrait { width: 100%; }
 .about-page .about-text-row h2 { max-width: 18ch; }
 .about-page .about-personal h2 { margin-bottom: 20px; }
 .about-page .about-links { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
}