/*
 * Pages: default page, contact, FAQ, 404, stories, blog and archives hero (page.php, home.php, page-contact.php, page-frequently-asked-questions.php, 404.php, single-story.php)
 */

/* Blog (posts page, body.blog): serif title and subtitle like the posts */
body.blog .hero-content {
	max-width: 31.25rem;
}
body.blog .hero-title {
	font-family: 'DM Serif Display', serif;
	font-size: 3.125rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}
body.blog .hero-subtitle {
	margin-top: 0.625rem;
	font-family: 'DM Serif Display', serif;
	font-size: 1.375rem;
	line-height: 1.25;
}

/* No content message (template-parts/no-content.php) */
.no-content > p {
	margin: 0;
	color: var(--color-text);
	font-size: 1.125rem;
}

/* Contact: company details */
p.legal-info {
	margin: 0;
	color: var(--color-grey);
	font-size: 0.75rem;
	line-height: 1.6;
	text-align: center;
}

/* Stories: back to the list */
/* Right below the hero, part of it (like the breadcrumbs): the next section is after the usual space (css/base.css) */
.back-link-wrapper {
	padding-top: 1.75rem;
}
a.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-dark);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}
a.back-link span.icon {
	width: 0.875rem;
	height: 0.875rem;
	transform: rotate(180deg);
	transition: transform 0.25s ease-in-out;
}
a.back-link:hover {
	opacity: 1;
}
a.back-link:hover span.icon {
	transform: rotate(180deg) translateX(0.25rem);
}