/* About: an uncropped portrait beside biography, selected work and contact. */
.about-page { padding-bottom: 0; color: #292927; }
.about-layout.info-container {
    display: grid;
    grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 72px);
    max-width: none;
}
.about-portrait, .about-work-strip { margin: 0; }
.about-portrait img, .about-work-strip img {
    width: 100%;
    height: auto;
    border: clamp(6px, .9vw, 14px) solid #fbfaf7;
    outline: 1px solid rgb(55 45 35 / .08);
    box-shadow: var(--image-shadow);
}
.about-work-strip { margin-top: clamp(12px, 2svh, 24px); }
.about-content { min-width: 0; }
.about-heading {
    margin: 0 0 24px;
    font-size: clamp(64px, 8.8vw, 168px);
    font-weight: var(--heading-weight);
    line-height: 1;
    letter-spacing: -.04em;
}
.about-content .info-text { margin-bottom: 28px; }
.about-content .info-text p {
    margin: 0 0 16px;
    font-size: clamp(20px, 1.4vw, 24px);
    line-height: 1.45;
    text-wrap: pretty;
}
.about-content .info-text p:last-child { margin-bottom: 0; }
.about-content .contact-section {
    margin-top: 24px;
    padding: 20px 0 0;
    border-color: #e5e5e2;
}
.about-content .contact-section h3 {
    margin: 0 0 6px;
    font-size: clamp(24px, 1.8vw, 28px);
    font-weight: 400;
    line-height: 1.2;
}
.about-content .contact-info { font-size: 20px; line-height: 1.4; }
.about-content .contact-info p { margin: 0; }
.about-content .contact-info a { display: inline-block; padding: 6px 0; }

/* Size the desktop composition to the window; the shared footer follows below. */
@media (min-width: 1001px) {
    .about-page {
        --about-height: clamp(460px, calc(100svh - 170px), 1000px);
        padding-top: clamp(20px, 3svh, 40px);
    }
    .about-layout.info-container {
        max-width: calc(var(--about-height) * 1.9);
        gap: clamp(28px, 4.4vw, 80px);
    }
    .about-content { display: flex; flex-direction: column; align-self: stretch; }
    .about-content > * { flex-shrink: 0; }
    .about-heading {
        margin-bottom: 24px;
        font-size: clamp(64px, 12svh, 136px);
    }
    .about-content .info-text { margin-bottom: 16px; }
    .about-content .info-text p {
        margin-bottom: 16px;
        font-size: clamp(20px, 2.3svh, 24px);
        line-height: 1.4;
    }
    .about-content .info-text p:last-child { margin-bottom: 0; }
    .about-work-strip { margin-bottom: 32px; }
    .about-content .contact-section { margin-top: auto; padding-top: 20px; }
    .about-content .contact-section h3 { margin-bottom: 8px; font-size: clamp(28px, 2vw, 36px); }
    .about-content .contact-info { font-size: clamp(24px, 1.8vw, 32px); }
    .about-content .contact-info a { padding: 3px 0; }
}

@media (min-width: 1001px) and (max-height: 850px) {
    .about-page { padding-top: 20px; }
    .about-heading { margin-bottom: 8px; font-size: 64px; }
    .about-content .info-text { margin-bottom: 12px; }
    .about-content .info-text p { margin-bottom: 8px; font-size: 18px; line-height: 1.35; }
    .about-content .contact-section { padding-top: 16px; }
    .about-content .contact-info { line-height: 1.3; }
    .about-content .contact-info a { padding: 2px 0; }
}

@media (max-width: 700px) {
    .about-layout.info-container { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 16px; }
    .about-content, .about-content .info-text { display: contents; }
    .about-portrait { grid-column: 1 / 7; grid-row: 1 / 3; }
    .about-heading { grid-column: 7 / -1; grid-row: 1; align-self: end; margin: 0; font-size: clamp(48px, 12vw, 72px); }
    .about-content .info-text p { grid-column: 1 / -1; margin: 0; font-size: 20px; }
    .about-content .info-text p:first-child { grid-column: 7 / -1; grid-row: 2; line-height: 1.35; }
    .about-content .info-text p:nth-child(2) { grid-row: 3; }
    .about-content .info-text p:nth-child(3) { grid-row: 4; }
    .about-work-strip { grid-column: 1 / -1; grid-row: 5; }
    .about-content .contact-section { grid-column: 1 / -1; grid-row: 6; margin-top: 0; }
    .about-content .contact-info a { min-height: 44px; padding: 8px 0; }
}