/* About page additions to the shared homepage design. */
.site-header a[aria-current="page"] {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:6px;
}

.about-heading {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    align-items:end;
    gap:80px;
    padding-block:76px 48px;
    border-bottom:1px solid var(--line);
}

.about-heading h1 {
    font-size:clamp(48px,6vw,84px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.065em;
    margin-top:24px;
}

.about-note {
    max-width:350px;
    padding-left:20px;
    border-left:2px solid var(--purple);
    color:var(--muted);
    font-family:'Source Code Pro',monospace;
    font-size:12px;
    line-height:1.9;
    margin-bottom:7px;
}

.about-story {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
    gap:90px;
    align-items:start;
    padding-block:56px 80px;
}

.about-portrait {
    position:sticky;
    top:32px;
    padding:18px;
    background:var(--lavender);
    border-radius:3px;
}

.about-portrait img {
    width:100%;
    border-radius:2px;
}

.about-portrait p {
    padding:20px 4px 4px;
    font-size:10px;
    line-height:1.9;
}

.about-prose {
    max-width:700px;
    font-size:15px;
    color:#55534f;
}

.about-prose p {
    line-height:1.95;
}

.about-prose p + p {
    margin-top:28px;
}

.about-prose p:first-child {
    color:var(--ink);
    font-size:18px;
    line-height:1.85;
}

.about-prose a {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:4px;
}

.about-prose a:hover {
    color:var(--ink);
}

.about-quote-band {
    padding-block:64px;
    background:var(--lavender);
    text-align:center;
}

.about-quote-band .eyebrow {
    color:var(--purple);
}

.about-quote-band blockquote {
    max-width:860px;
    margin:24px auto 0;
}

.about-quote-band blockquote p {
    font-size:clamp(24px,3vw,38px);
    line-height:1.5;
    letter-spacing:-.035em;
    font-weight:500;
}

.about-quote-band blockquote footer {
    margin-top:24px;
    font-family:'Source Code Pro',monospace;
    font-size:12px;
    color:var(--muted);
}

@media(max-width:1100px) {
    .about-heading {
        gap:40px;
    }
    .about-story {
        gap:48px;
    }
}

@media(max-width:760px) {
    .about-heading {
        grid-template-columns:1fr;
        gap:28px;
        padding-block:44px 32px;
    }
    .about-heading h1 {
        font-size:clamp(42px,9vw,66px);
        margin-top:20px;
    }
    .about-note {
        max-width:100%;
        font-size:11px;
        margin-bottom:0;
    }
    .about-story {
        grid-template-columns:1fr;
        gap:32px;
        padding-block:32px 48px;
    }
    .about-portrait {
        position:static;
        width:100%;
        max-width:400px;
        justify-self:center;
    }
    .about-prose {
        font-size:14px;
    }
    .about-prose p:first-child {
        font-size:16px;
    }
    .about-quote-band {
        padding-block:44px;
    }
}