/*
 * about-attorney - portrait plus biography and credentials.
 *
 * The portrait is a real <img> with its intrinsic 4:5 size on the element, so
 * the row reserves its space before the file arrives.
 */

.portrait {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--site-border);
}

/* Between 576px and the two-column switch the portrait would otherwise run
   the full width of the page and dwarf the text under it. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .portrait {
        max-width: 22rem;
        margin-inline: auto;
    }
}

.creds {
    list-style: none;
    padding: 0;
    margin: 0;
}

.creds li {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: 0.5rem;
    color: var(--site-muted);
}

/* A small brass square as the marker, drawn in CSS rather than borrowed from
   the icon font: the Pro kit renames the family to "Font Awesome 6 Pro", and a
   marker made of a glyph would quietly vanish the day the kit lands. */
.creds li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.6rem;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--site-accent-ink);
}