/*
 * Announcement bar. Artboards: 32px on sand at both widths, meta text tracked 0.02em,
 * 14px between items and separators. Desktop inline with Stone dots; ≤767 one message with ‹ ›.
 */

.announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	height: 2rem;
	padding-inline: var(--container-pad);
	background: var(--sand);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
	letter-spacing: 0.02em;
}

.announcement__list {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.announcement__item + .announcement__item::before {
	content: "·";
	margin-inline: 0.875rem;
	color: var(--stone);
}

.announcement__item a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ‹ ›: drawn in Stone at glyph width, so the 14px gap matches the artboard;
   an invisible hit area makes each one 44px square, reaching past the 32px bar. */
.announcement__step {
	position: relative;
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--stone);
	cursor: pointer;
}

.announcement__step::after {
	content: "";
	position: absolute;
	inset-block: calc((var(--touch-min) - 1lh) / -2);
	inset-inline: 50%;
	margin-inline: calc(var(--touch-min) / -2);
}

@media (max-width: 767px) {
	.announcement__item:not(.is-current) {
		display: none;
	}

	.announcement__item + .announcement__item::before {
		content: none;
	}

	.announcement__list {
		overflow: hidden;
	}

	.announcement__item {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.announcement.is-enhanced .announcement__step {
		display: block;
	}
}