/* ─── Aspen about (homepage) ───
 * Photo (sage block offset behind it, .aspen-offset-photo in global.css) beside the copy on the cream band. The
 * first paragraph of about_body is the lede; its bullet list becomes ticked lines.
 */
.ocf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: var(--aspen-split-gap);
    align-items: center;
}

.ocf-about-media { margin: 0; }

.ocf-about-body { margin-top: 24px; }
.ocf-about-body > p:first-child { font-size: calc(var(--font-body-size) * 1.111); line-height: 1.6; }
.ocf-about-body p { margin: 0 0 16px; }

.ocf-about-body ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

/* Block items with the tick in the left padding, so "<strong>Lead-in.</strong> More text" flows as one paragraph. */
.ocf-about-body ul li {
    position: relative;
    margin: 0;
    padding-left: 34px;
    color: var(--ocf-heading);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
}

.ocf-about-body ul li:has(strong) { color: var(--ocf-body); font-weight: var(--font-weight-regular); }
.ocf-about-body ul li strong { color: var(--ocf-heading); font-weight: var(--font-weight-bold); }

.ocf-about-body ul li::before {
    content: '';
    position: absolute;
    top: calc(0.8em - 11px);
    left: 0;
    width: 22px;
    height: 22px;
    background: var(--ocf-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l4.8 4.6L19.5 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l4.8 4.6L19.5 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ocf-about-actions { margin-top: 36px; }

@media (max-width: 1023px) {
    .ocf-about-grid { grid-template-columns: 1fr; gap: 44px; }
}