/* Blog Author Bios: colours come from the theme (currentColor), so it fits light and dark themes. */
.abio-box {
	--abio-line: color-mix(in srgb, currentColor 18%, transparent);
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin: 2.5rem 0 1rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--abio-line);
}

.abio-photo {
	flex: 0 0 auto;
	line-height: 0;
}

.abio-photo img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
}

.abio-text {
	flex: 1 1 auto;
	min-width: 0;
}

.abio-name {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.abio-name a {
	text-decoration: none;
}

.abio-short {
	margin: 0 0 0.5rem;
	font-size: 0.95em;
}

.abio-links {
	margin: 0;
	font-size: 0.9em;
}

.abio-sep {
	opacity: 0.5;
	margin: 0 0.25rem;
}

.abio-badge {
	display: inline-block;
	padding: 0 0.4em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 0.75em;
	line-height: 1.6;
	opacity: 0.7;
	vertical-align: middle;
}

.abio-posts {
	margin-top: 2.5rem;
}

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

.abio-posts-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.abio-date {
	opacity: 0.7;
	font-size: 0.9em;
	margin-left: 0.5rem;
}

.abio-pages {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: 1rem;
}

@media (max-width: 480px) {
	.abio-box {
		flex-direction: column;
		gap: 0.75rem;
	}
}