/* Pincus Matz — Scrolling Ticker
   Italic Cormorant Garamond phrases in navy, gold bullet separators,
   gold hairline border(s), slow seamless loop. */

.pmtk {
	--pmtk-text: #22406E;
	--pmtk-sep: #C0A074;
	--pmtk-border: #C0A074;
	--pmtk-bg: transparent;
	--pmtk-size: 20px;
	--pmtk-min: 15;  /* unitless — used by the fluid clamp */
	--pmtk-max: 21;
	--pmtk-gap: 56px;
	--pmtk-pad: 18px;

	position: relative;
	width: 100%;
	background: var(--pmtk-bg);
	overflow: hidden;
}

/* Fluid sizing: interpolates between the min size (at 480px viewport)
   and the max size (at 1280px viewport), clamped at both ends. */
.pmtk--fluid {
	--pmtk-size: clamp(
		calc(var(--pmtk-min) * 1px),
		calc(var(--pmtk-min) * 1px + (var(--pmtk-max) - var(--pmtk-min)) * ((100vw - 480px) / 800)),
		calc(var(--pmtk-max) * 1px)
	);
}

.pmtk--border-top    { border-top: 1px solid var(--pmtk-border); }
.pmtk--border-bottom { border-bottom: 1px solid var(--pmtk-border); }
.pmtk--border-both   {
	border-top: 1px solid var(--pmtk-border);
	border-bottom: 1px solid var(--pmtk-border);
}

.pmtk__viewport {
	overflow: hidden;
	width: 100%;
	padding: var(--pmtk-pad) 0;
}

.pmtk__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* Animate only once the JS has built both identical halves —
   prevents a half-built track from ever showing a gap. */
.pmtk--ready .pmtk__track {
	animation: pmtk-scroll var(--pmtk-duration, 40s) linear infinite;
}

.pmtk--reverse .pmtk__track {
	animation-direction: reverse;
}

.pmtk--pause-hover:hover .pmtk__track {
	animation-play-state: paused;
}

/* Two identical halves, each at least viewport-wide. Translating the
   track by exactly -50% therefore loops seamlessly, whatever the
   font, size, or zoom level. */
.pmtk__half {
	display: flex;
	flex: none;
}

/* One sequence of the phrases (cloned into each half by JS). */
.pmtk__seq {
	display: flex;
	align-items: baseline;
	flex: none;
}

.pmtk__item {
	font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
	font-weight: 500;
	font-size: var(--pmtk-size);
	line-height: 1.3;
	color: var(--pmtk-text);
	white-space: nowrap;
}

.pmtk--italic .pmtk__item {
	font-style: italic;
}

.pmtk__sep {
	color: var(--pmtk-sep);
	font-size: calc(var(--pmtk-size) * 0.55);
	line-height: 1.3;
	margin: 0 calc(var(--pmtk-gap) / 2);
	align-self: center;
	flex: none;
}

@keyframes pmtk-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------- Accessibility */

.pmtk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pmtk__track {
		animation: none !important;
		flex-wrap: wrap;
		width: 100%;
	}
	.pmtk__seq {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.4em;
		width: 100%;
	}
	/* only the first sequence is needed when static */
	.pmtk__seq ~ .pmtk__seq,
	.pmtk__half ~ .pmtk__half {
		display: none;
	}
	.pmtk__half {
		width: 100%;
	}
	/* drop the trailing separator on the static row */
	.pmtk__seq > .pmtk__sep:last-child {
		display: none;
	}
}

/* ---------------------------------------------------- Small screens */

@media (max-width: 767px) {
	.pmtk {
		--pmtk-gap: 36px;
		--pmtk-pad: 13px;
	}
}