/* DP Article Hero */

.dp-article-hero {
	padding: 3rem 0 2rem;
	text-align: center;
}

.dp-article-hero__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.dp-article-hero__number {
	display: block;
	font-family: var(--dp-font-editorial, 'DM Serif Display', Georgia, serif);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 400;
	line-height: 1;
	color: var(--dp-mist, #E7EFF8);
	margin-bottom: 1rem;
}

.dp-article-hero__category {
	display: inline-block;
	margin-bottom: 1.25rem;
}

.dp-article-hero__title {
	font-family: var(--dp-font-editorial, 'DM Serif Display', Georgia, serif);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--dp-navy, #10254C);
	max-width: 720px;
	margin: 0 auto 1.5rem;
}

.dp-article-hero__rule {
	width: 60px;
	height: 3px;
	border: none;
	background: var(--dp-accent, #FAB800);
	border-radius: 2px;
	margin: 0 auto 1.25rem;
}

.dp-article-hero__author {
	font-family: var(--dp-font-body, 'DM Sans', sans-serif);
	font-size: 1rem;
	color: var(--dp-slate, #64748B);
	margin-bottom: 0.5rem;
}

.dp-article-hero__meta {
	display: flex;
	gap: 0.375rem;
	justify-content: center;
	flex-wrap: wrap;
	font-family: var(--dp-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.75rem;
	color: var(--dp-slate, #64748B);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.dp-article-hero__meta-item:not(:last-child)::after {
	content: '·';
	margin-left: 0.375rem;
	opacity: 0.5;
}

/* ---- Hero entrance animations ---- */
@keyframes dpFadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.dp-article-hero__number {
	animation: dpFadeUp 0.5s ease-out both;
}

.dp-article-hero__category {
	animation: dpFadeUp 0.5s ease-out 0.1s both;
}

.dp-article-hero__title {
	animation: dpFadeUp 0.5s ease-out 0.15s both;
}

.dp-article-hero__rule {
	animation: dpFadeUp 0.5s ease-out 0.25s both;
}

.dp-article-hero__author {
	animation: dpFadeUp 0.5s ease-out 0.3s both;
}

.dp-article-hero__meta {
	animation: dpFadeUp 0.5s ease-out 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
	.dp-article-hero__number,
	.dp-article-hero__category,
	.dp-article-hero__title,
	.dp-article-hero__rule,
	.dp-article-hero__author,
	.dp-article-hero__meta {
		animation: none;
	}
}

@media (max-width: 768px) {
	.dp-article-hero {
		padding: 2rem 0 1.5rem;
	}

	.dp-article-hero__title {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
	}
}