/**
 * Component: Byline
 * Usage: <p class="byline">Publication | Date</p> above article bodies.
 */

.byline {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-ink-soft);
	text-transform: uppercase;
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-4);
}

.byline a {
	color: inherit;
	transition: color var(--transition-base);
}

.byline a:hover,
.byline a:focus-visible {
	color: var(--color-primary);
}

/*
 * Magazine byline: two related facts merged onto one row (rendered
 * directly from post meta — see single-portfolio.php/single-book.php —
 * or from date+author in news-item.php) — second item pulled to the
 * far right, rules above and below like a real masthead byline. Used
 * on: single Article ("Publication | Date" / "By Author"), Books
 * ("Written by" / "Illustrated by"), News list (date / author).
 */
.magazine-byline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	padding-block: var(--space-3);
	margin-bottom: var(--space-4);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	text-wrap: balance;
}

.magazine-byline__author {
	text-align: right;
	text-wrap: balance;
}