/**
 * [Author byline component]
 * Compact "avatar · name · position · date" line shown above each post
 * in the feed and beneath the title on a post page.
 */

.author-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--muted);
}

.author-byline__avatar {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
}

.author-byline__name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}

.author-byline__date {
    font-style: normal;
    white-space: nowrap;
}

/* Bullet travels with the date, so it never dangles at a line break. */
.author-byline__name + .author-byline__date::before,
.author-byline__position + .author-byline__date::before {
    content: "\2022";
    margin-right: 0.5rem;
    color: var(--rule-strong);
}

/* On post pages the byline sits inside the (left-aligned) post heading,
   with a short accent line below it, separating it from the post text.
   The line sits within the heading's existing trailing space (see
   .intro-header--post in main.css) rather than adding new space. */
.intro-header .post-heading .author-byline {
    position: relative;
    margin-top: 0.5rem;
}

.intro-header .post-heading .author-byline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.75rem;
    width: 4rem;
    height: 3px;
    border-radius: 2px;
    background: var(--cobalt);
}

/* Keep it readable on posts that use a cover image (light text on dark). */
.intro-header.big-img .post-heading .author-byline,
.intro-header.big-img .post-heading .author-byline .author-byline__name,
.intro-header.big-img .post-heading .author-byline .author-byline__date,
.intro-header.big-img .post-heading .author-byline .author-byline__position {
    color: #EEE;
}