/* Post byline — site/_partials/byline.html
 *
 * Neutral on purpose: the article design (2026-09-23) recolours it for its cream
 * page in pages/blog-post.css, so the component keeps the plain defaults, and
 * this replaces a single line of muted text, so it should not announce itself
 * as a design decision. Every value is a token.
 */

.byline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

/* 40px is the photo's intrinsic box, declared on the <img> too so the row does
 * not reflow when a photograph finally exists. The monogram matches it, so
 * swapping one for the other changes nothing else on the page. */
.byline__photo,
.byline__monogram {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	flex: none;
}

.byline__photo {
	object-fit: cover;
}

.byline__monogram {
	display: grid;
	place-items: center;
	background: var(--color-brand-subtle);
	color: var(--color-brand-strong);
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-label);
}

.byline__text {
	min-width: 0;
}

.byline__who,
.byline__meta {
	margin: 0;
}

.byline__who {
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.byline__role::before {
	/* A separator that lives in CSS, so the markup does not carry a stray
	 * middot for the 19 authors whose role is null. */
	content: " · ";
	font-weight: 400;
	color: var(--color-ink-muted);
}

.byline__role {
	font-weight: 400;
	color: var(--color-ink-muted);
}

.byline__meta {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.byline__link {
	color: inherit;
}