/* =========================================================================
   Single-post — lab persona.
   Visual rhymes with /labs/: ember left-rule along the article body,
   mono `LAB · YEAR · TYPE` eyebrow, deep-blue title, ember-bordered
   "Back to our Labs" pill. All rules namespaced by .id30-post--lab so
   non-matching pages pay zero CSS cost beyond the bytes.
   ========================================================================= */

.id30-post--lab .id30-post__article {
	position: relative;
	padding-left: 24px;
}
.id30-post--lab .id30-post__article::before {
	/* 4px ember vertical rule running the full article height. */
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 0;
	width: 4px;
	background-color: var(--color-ember);
	border-radius: 2px;
}
@media (max-width: 600px) {
	.id30-post--lab .id30-post__article {
		padding-left: 16px;
	}
	.id30-post--lab .id30-post__article::before {
		width: 3px;
	}
}

.id30-post--lab .id30-post__eyebrow--lab {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-ember);
	margin: 0 0 18px;
}

.id30-post--lab .id30-post__title {
	color: var(--color-deep);
}

.id30-post--lab .id30-post__back--lab {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-ember);
	border-color: rgba(226, 39, 1, 0.35);
	background-color: rgba(226, 39, 1, 0.04);
	padding: 12px 18px;
}
.id30-post--lab .id30-post__back--lab:hover {
	background-color: rgba(226, 39, 1, 0.08);
	border-color: var(--color-ember);
	transform: translateY(-1px);
}