/* AH Chapter Band. Place it in a full-width container with no padding. */
.ah-band {
	position: relative;
	overflow: hidden;
	padding-block: 30px 22px;
	background: var(--ah-deep);
	color: var(--ah-on-navy);
	font-family: var(--ah-f-body);
	line-height: 1.6;
	scroll-margin-top: 70px;
}
.ah-band > *:not(.ah-spot) { position: relative; z-index: 1; }
.ah-band .ah-band__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	max-width: var(--ah-container);
	margin-inline: auto;
	padding-inline: var(--ah-gutter);
}
.ah-band .ah-band__no { font-family: var(--ah-f-mono); font-size: .7rem; letter-spacing: .22em; color: var(--ah-gold-hi); }
.ah-band .ah-band__title { font-family: var(--ah-f-display); font-weight: 800; font-size: 1.3rem; color: var(--ah-on-navy); }
.ah-band .ah-band__sub { font-size: .94rem; color: var(--ah-on-navy-muted); }
.ah-band .ah-band__mq {
	direction: ltr;
	margin-top: 10px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ah-band .ah-band__row { display: flex; align-items: center; gap: 34px; width: max-content; will-change: transform; }
.ah-band .ah-band__row span {
	unicode-bidi: isolate;
	white-space: nowrap;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(2.3rem, 6.2vw, 5.2rem);
	line-height: 1.25;
	color: var(--ah-gold-hi);
}
/* the strip runs LTR so the loop math is the same in both languages; Arabic words keep their own direction */
[dir="rtl"] .ah-band .ah-band__row span { direction: rtl; }
.ah-band .ah-band__row span.is-outline { color: transparent; -webkit-text-stroke: 1.2px rgba(232, 201, 136, .75); }
.ah-band .ah-band__row i { font-style: normal; font-size: clamp(1rem, 2vw, 1.6rem); color: var(--ah-gold); }

@media (prefers-reduced-motion: no-preference) {
	.ah-band .ah-band__row { animation: ah-band-mq 46s linear infinite; }
	.ah-band.ah-band--rev .ah-band__row { animation-direction: reverse; }
	.ah-band.is-off .ah-band__row { animation-play-state: paused; }
}
@keyframes ah-band-mq { to { transform: translateX(-50%); } }

@media (max-width: 767px) {
	.ah-band { padding-block: 24px 16px; }
	.ah-band .ah-band__row { gap: 22px; }
}