@layer ds.block {
    .block-bio-hero { overflow: clip; border-bottom: 1px solid var(--color-border); }

    .bio-hero__grid {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--space-8);
    }

    .bio-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }

    .bio-hero__eyebrow {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--color-secondary);
    }

    .bio-hero__eyebrow-dash { width: 1.75rem; height: 2px; background: var(--color-primary); display: inline-block; flex-shrink: 0; }

    .bio-hero__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-medium); font-size: var(--text-h1); color: var(--color-heading); }
    .bio-hero__title .ds-accent { font-style: italic; font-weight: var(--font-weight-regular); color: var(--color-secondary); }

    .bio-hero__text { margin: 0; max-width: 52ch; font-size: var(--text-lead); line-height: var(--line-height-base); color: var(--color-text); }

    .bio-hero__portrait { position: relative; justify-self: center; }

    .bio-hero__motif { position: absolute; top: calc(-1 * var(--space-3)); left: calc(-1 * var(--space-8)); width: 6.5rem; opacity: 0.5; color: var(--brand-sage); }

    .bio-hero__frame {
        position: relative;
        width: 100%;
        max-width: 20rem;
        aspect-ratio: 320 / 400;
    }

    .bio-hero__frame::before {
        content: "";
        position: absolute;
        top: 0;
        right: calc(-1 * var(--space-4));
        width: 100%;
        height: 100%;
        border: 1.5px solid var(--color-primary);
        border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
    }

    .bio-hero__img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    @media (max-width: 64rem) {
        .bio-hero__grid { grid-template-columns: 1fr; }
        .bio-hero__portrait { justify-self: start; }
        .bio-hero__frame { max-width: 16rem; }
    }
}