/* ==========================================================================
   Inline row separated by gold hairlines (consultation formats, qualities of solutions).
   ========================================================================== */
.formats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--line-light);
}
.formats__title { font-weight: 600; font-size: var(--fs-small); }
.formats__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
.formats__list li {
	display: inline-flex;
	align-items: center;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}
/* Gold hairline between formats — the motif in miniature. */
.formats__list li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.1em;
	margin-inline: var(--s-3);
	background: var(--c-gold);
}
/* Narrow screens: a column with the line at the start of each item (no hanging separators). */
@media (max-width: 767px) {
	.formats { flex-direction: column; align-items: flex-start; }
	.formats__list { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
	.formats__list li { padding-inline-start: var(--s-2); border-inline-start: 1px solid var(--c-gold); }
	.formats__list li + li::before { display: none; }
}