/* TLT destination field renderers */
html { scroll-behavior: smooth; }
.tlt-anchor { display: block; position: relative; top: -170px; visibility: hidden; height: 0; }

.tlt-months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	font-family: Rubik, sans-serif;
}
.tlt-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 6px 16px;
	background: #FFFFFF;
	border: 1px solid #E4DDD2;
	text-align: center;
	transition: transform .2s ease;
}
.tlt-month-name {
	font-family: Lora, serif;
	font-size: 20px;
	color: #3A342F;
}
.tlt-month-bar {
	display: block;
	width: 100%;
	height: 6px;
	background: #E4DDD2;
}
.tlt-month-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #A99B7E;
}
.tlt-month.is-best { background: #3A342F; border-color: #3A342F; }
.tlt-month.is-best .tlt-month-name { color: #F8F5F0; }
.tlt-month.is-best .tlt-month-bar { background: #C58B62; }
.tlt-month.is-best .tlt-month-label { color: #E3B896; }
.tlt-month:hover { transform: translateY(-3px); }

.tlt-months-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: 22px;
	font-family: Rubik, sans-serif;
	font-size: 14px;
	color: #6B635B;
}
.tlt-legend-item { display: inline-flex; align-items: center; gap: 10px; }
.tlt-legend-item::before {
	content: "";
	width: 14px;
	height: 14px;
	background: #FFFFFF;
	border: 1px solid #E4DDD2;
}
.tlt-legend-item.is-best::before { background: #3A342F; border-color: #3A342F; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.tlt-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tlt-months { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.tlt-month { padding: 14px 4px 12px; }
	.tlt-month-name { font-size: 17px; }
	.tlt-month-label { font-size: 9px; letter-spacing: .08em; }
	.tlt-anchor { top: -140px; }
}
