/* Horizontal graphic timeline: a strip you scroll or swipe sideways. */
.hr-htl { position: relative; margin: 2rem 0; }
.hr-htl__controls { display: flex; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.4rem; }
.hr-htl__btn {
	cursor: pointer; width: 44px; height: 44px; font: 600 1.1rem/1 var(--hr-font-ui, system-ui, sans-serif);
	background: transparent; color: var(--hr-ink, #302d29); border: 1px solid var(--hr-ink, #302d29);
}
.hr-htl__btn:hover:not(:disabled) { background: var(--hr-ink, #302d29); color: var(--hr-paper, #f3ebd8); }
.hr-htl__btn:disabled { opacity: 0.3; cursor: default; }
.hr-htl__btn:focus-visible, .hr-htl__track:focus-visible { outline: 3px solid var(--hr-accent, #a6473f); outline-offset: 2px; }
.hr-htl__track {
	display: flex; list-style: none; margin: 0; padding: 0 0 0.6rem; gap: 0;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: auto; scrollbar-color: var(--hr-fill, #a6473f) var(--hr-parchment, #e8ddc5); -webkit-overflow-scrolling: touch;
}
.hr-htl__item { flex: 0 0 min(15rem, 72vw); scroll-snap-align: start; display: grid; grid-template-rows: auto 26px 1fr; margin: 0; padding: 0; }
.hr-htl__when { padding: 0 1rem 0 0; font: 900 1.25rem/1.1 var(--hr-font-head, Georgia, serif); text-transform: uppercase; letter-spacing: 0.02em; }
.hr-htl__dot { position: relative; display: block; }
.hr-htl__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--hr-ink, #302d29); }
.hr-htl__dot::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
	background: var(--hr-accent, #a6473f); border: 3px solid var(--hr-paper, #f3ebd8); box-shadow: 0 0 0 1px var(--hr-ink, #302d29);
}
.hr-htl__item:first-child .hr-htl__dot::before { left: 8px; }
.hr-htl__item:last-child .hr-htl__dot::before { right: auto; width: 8px; }
.hr-htl__what { padding: 0.5rem 1.2rem 0 0; font-size: 0.95rem; line-height: 1.5; }
@media print { .hr-htl__controls { display: none; } .hr-htl__track { flex-wrap: wrap; overflow: visible; } .hr-htl__item { flex-basis: 30%; } }

.hr-htl__track::-webkit-scrollbar { height: 12px; }
.hr-htl__track::-webkit-scrollbar-track { background: var(--hr-parchment, #e8ddc5); }
.hr-htl__track::-webkit-scrollbar-thumb { background: var(--hr-fill, #a6473f); border: 2px solid var(--hr-parchment, #e8ddc5); border-radius: 8px; }