/* Compact yearly genre timeline */

.timeline-hero {
	padding: var(--space-8) 0 var(--space-6);
	max-width: 650px;
}

.timeline-hero h1 {
	margin: var(--space-4) 0;
}

.year-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: var(--space-5);
}

.year-heading h2 {
	margin: var(--space-2) 0 0;
	font-size: 38px;
}

.year-count {
	color: var(--muted);
	font-size: var(--small-size);
}

.genre-calendar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.month-group {
	padding: var(--space-4);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	background: var(--cream);
}

.month-group h3 {
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border);
	font: normal 19px var(--heading-font);
}

.week-list {
	display: grid;
	gap: 3px;
}

.week-row {
	display: grid;
	grid-template-columns: 35px minmax(95px, 1fr) auto;
	align-items: center;
	gap: var(--space-2);
	padding: 7px var(--space-2);
	border-radius: var(--radius-small);
	font-size: var(--small-size);
}

.week-row:hover {
	background: var(--paper);
}

.week-number {
	color: var(--muted);
	font-size: var(--label-size);
	font-weight: bold;
}

.week-date {
	color: var(--muted);
	white-space: nowrap;
}

.week-genre {
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--lavender);
	font-size: var(--label-size);
	white-space: nowrap;
}

.month-group:nth-child(5n) .week-genre {
	background: var(--shadow);
}

.month-group:nth-child(5n+1) .week-genre {
	background: var(--pink);
}

.month-group:nth-child(5n+2) .week-genre {
	background: var(--yellow);
}

.month-group:nth-child(5n+3) .week-genre {
	background: var(--lavender);
}

.month-group:nth-child(5n+4) .week-genre {
	background: var(--mint);
}

@media (max-width: 650px) {
	.genre-calendar {
		grid-template-columns: 1fr;
	}

	.year-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
	}

	.week-row {
		grid-template-columns: 35px minmax(0, 1fr) auto;
	}
}