/* Related pages */

.related-groups {
	display: grid;
	gap: clamp(32px, 4vw, 48px);
}

.related-group {
	padding-top: 22px;
	border-top: 6px solid var(--swatch, var(--amber));
}

.related-group__title {
	margin-bottom: 18px;
	font-size: .8125rem;
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.related-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
}

.related-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px 0 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--heading);
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}

.related-links a::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--swatch, var(--amber));
}

.related-links a:hover,
.related-links a:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
	color: #fff;
}

.blk--white .related-links a { background: var(--tint); border-color: transparent; }
.blk--white .related-links a:hover { background: var(--ink); }
.blk--dark .related-group__title { color: var(--amber); }
.blk--dark .related-links a { background: transparent; border-color: var(--line-dark); color: #fff; }