/*
 * Browse by era.
 *
 * A row of decades that wraps. Fourteen buttons will not fit one line at any
 * sensible size, and wrapping them reads as an ordered set; the alternative,
 * a slider, hides half the collection behind an arrow.
 */

.kf1-eras {
	--kf1-era-bg: rgba(255, 255, 255, 0.035);
	--kf1-era-edge: rgba(255, 255, 255, 0.16);
	--kf1-era-ink: #f6f5f3;

	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.kf1-era {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 11px 22px;
	border: 1px solid var(--kf1-era-edge);
	border-radius: 999px;
	background: var(--kf1-era-bg);
	color: var(--kf1-era-ink);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.kf1-era b {
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.kf1-era i {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--kf1-era-ink) 55%, transparent);
}

/* Browsers without color-mix still get a readable, quieter count. */
@supports not (color: color-mix(in srgb, white 50%, transparent)) {
	.kf1-era i { opacity: 0.55; }
}

.kf1-era:hover,
.kf1-era:focus-visible {
	background: color-mix(in srgb, var(--kf1-era-ink) 12%, transparent);
	border-color: color-mix(in srgb, var(--kf1-era-ink) 45%, transparent);
	transform: translateY(-1px);
}

.kf1-era:focus-visible {
	outline: 2px solid var(--kf1-era-ink);
	outline-offset: 2px;
}

/*
 * TBC is a real part of the collection, not an error state, so it sits in the
 * row like any other era - just set apart enough to read as "the rest".
 */
.kf1-era--tbc {
	border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
	.kf1-era { transition: none; }
	.kf1-era:hover, .kf1-era:focus-visible { transform: none; }
}

@media (max-width: 600px) {
	.kf1-eras { gap: 9px; }
	.kf1-era { padding: 9px 16px; gap: 7px; }
	.kf1-era b { font-size: 14px; }
	.kf1-era i { font-size: 10px; }
}