/**
 * about.css — Long-form bio
 */

.about-page {
    padding-top: var(--space-16);
}

.about-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (min-width: 900px) {
    .about-page__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.7fr);
        gap: var(--space-16);
    }
}

.about-page__name {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    margin-bottom: var(--space-2);
}

.about-page__title {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--clr-accent);
    margin-bottom: var(--space-8);
}

.about-page__para {
    color: var(--clr-text-base);
    line-height: 1.7;
    margin-bottom: var(--space-5);
    max-width: 38rem;
    font-size: var(--text-lg);
}

.about-page__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.about-page__photo {
    margin: 0;
    max-width: 22rem;
}

.about-page__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: sepia(0.12) contrast(1.04);
}

.about-page__photo figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-top: var(--space-3);
    font-style: italic;
}

@media (min-width: 900px) {
    .about-page__photo {
        transform: translateY(2rem);
        justify-self: end;
    }
}

.stack-page {
    border-top: 1px solid var(--clr-rule);
}

.stack-inventory {
    border-top: 1px solid var(--clr-rule);
}

.stack-inventory__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--clr-rule);
}

@media (min-width: 640px) {
    .stack-inventory__row {
        grid-template-columns: 9rem 1fr;
        gap: var(--space-8);
        align-items: baseline;
    }
}

.stack-inventory dt {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 500;
}

.stack-inventory dd {
    color: var(--clr-text-muted);
}

.building-section {
    border-top: 1px solid var(--clr-rule);
}

.index-list {
    list-style: none;
}

.index-list__item {
    padding-block: var(--space-8);
    border-top: 1px solid var(--clr-rule);
}

.index-list__item:last-child {
    border-bottom: 1px solid var(--clr-rule);
}

.index-list__meta {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--clr-accent);
}

.index-list h3 {
    font-size: var(--text-2xl);
    margin: var(--space-2) 0 var(--space-3);
}

.index-list p {
    color: var(--clr-text-muted);
    max-width: 40rem;
}

.index-list__stack {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}