/* ==========================================================================
   About Me: portrait arch + full story
   ========================================================================== */

.about {
    padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.about__grid {
    display: grid;
    gap: clamp(2.5rem, 2rem + 4vw, 5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .about__grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .about__media {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
    }
}

.about__media {
    width: min(100%, 420px);
    justify-self: center;
}

.about__frame {
    aspect-ratio: 4 / 5;
    background: var(--color-bg-alt);
}

.about__frame img {
    transform: none;
}

/* Until a portrait is set: the logo on a soft sage/gold glow */
.about__frame--logo {
    display: grid;
    place-items: center;
    padding: 12% 12% 30%;
    background:
        radial-gradient(60% 45% at 50% 38%, color-mix(in srgb, var(--color-secondary) 22%, transparent), transparent),
        linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
}

.about__frame--logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.about__text > p:first-child::first-letter {
    float: left;
    margin: 0.08em 0.1em 0 0;
    font-family: var(--font-heading);
    font-size: 3.6em;
    line-height: 0.8;
    color: var(--color-primary);
}

.about__text p:last-child {
    margin-bottom: 0;
}