/* About (homepage): earth band with grain, photo edge-to-edge on the left half, copy on the right. */
.ocf-about {
    background: var(--dakota-earth);
    color: var(--ocf-heading-alt);
}

.ocf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: var(--ocf-about-image-height);
}

.ocf-about-photo {
    position: relative;
    margin: 0;
    min-height: 100%;
}

.ocf-about-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-about-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: calc(600px + var(--ocf-grid-gap) * 8);
    padding: calc(var(--ocf-grid-gap) * 4) calc(var(--container-pad) + var(--ocf-grid-gap) * 1.5) calc(var(--ocf-grid-gap) * 4) calc(var(--ocf-grid-gap) * 4);
}

.ocf-about .heading-2 { color: var(--ocf-heading-alt); }

.ocf-about .prose {
    margin-top: calc(var(--ocf-grid-gap) * 1);
    color: color-mix(in srgb, var(--ocf-heading-alt) 88%, transparent);
}

.ocf-about .prose p:last-child { margin-bottom: 0; }

.ocf-about-link { margin-top: calc(var(--ocf-grid-gap) * 1.5); }

@media (max-width: 900px) {
    .ocf-about-grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .ocf-about-photo { aspect-ratio: 16 / 10; }

    .ocf-about-copy {
        max-width: none;
        padding: calc(var(--ocf-grid-gap) * 2.5) var(--container-pad) calc(var(--ocf-grid-gap) * 3);
    }
}