.dk-articlehead__inner {
	padding-block: 34px 24px;
	max-width: 820px;
}

.dk-articlehead__title {
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 10px 0 0;
}

.dk-articlehead__dek {
	font-size: 19px;
	line-height: 1.55;
	color: var(--dk-text-grey);
	margin: 14px 0 0;
	max-width: 680px;
}

.dk-articlehead__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	flex-wrap: wrap;
}

/* Avatar holder: the paw tile brings its own size, a photo needs one. */
.dk-articlehead__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.dk-articlehead__avatar--photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.14);
}

.dk-articlehead__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dk-articlehead__author {
	font-weight: 600;
	font-size: 14.5px;
}

.dk-articlehead__sub {
	font-size: 13px;
	color: var(--dk-text-muted);
}

.dk-articlehead__howmeta {
	margin-left: auto;
	display: flex;
	gap: 26px;
}

.dk-articlehead__howmeta > span {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 15px;
}

.dk-articlehead__cover {
	margin-top: 6px;
}

/* No aspect-ratio: show the featured image in full, uncropped. */
.dk-articlehead__cover .dk-media {
	border-radius: var(--dk-radius);
}

.dk-articlehead__cover .dk-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Dark how-to header */
.dk-articlehead--dark {
	background: var(--dk-dark-bg);
	color: var(--dk-dark-text);
}

.dk-articlehead--dark .dk-articlehead__inner {
	padding-block: 48px 40px;
	max-width: var(--dk-content-max);
}

.dk-articlehead--dark .dk-articlehead__title {
	color: #fff;
}

.dk-articlehead--dark .dk-articlehead__dek {
	color: var(--dk-dark-text-soft);
}

.dk-articlehead--dark .dk-articlehead__kicker {
	color: var(--dk-ocher-bright);
}

.dk-articlehead--dark .dk-articlehead__sub {
	color: var(--dk-dark-text-soft);
}

@media (max-width: 700px) {
	.dk-articlehead__howmeta {
		margin-left: 0;
		width: 100%;
		gap: 20px;
	}
}