/* Golden Thread Journey — photo nodes on a drawn gold thread */
.tbw-journey { --tbw-p: 0; }
.tbw-journey__track { position: relative; }
.tbw-journey__stages { list-style: none; margin: 0; padding: 0; }
.tbw-journey__stage { position: relative; }
.tbw-journey__node {
	position: absolute; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
	background: var(--tb-surface); border: 1px solid var(--tb-line-strong); box-shadow: 0 0 0 6px var(--tb-bg);
	transform: scale(.82); filter: grayscale(.7); opacity: .7;
	transition: transform .7s var(--tb-ease-out), filter .7s, opacity .7s, border-color .5s, box-shadow .5s;
}
.tbw-journey__node img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 5px; }
.tbw-journey__stage.is-lit .tbw-journey__node { transform: none; filter: none; opacity: 1; border-color: var(--tb-gold); box-shadow: 0 0 0 6px var(--tb-bg), 0 0 0 7px rgba(212, 178, 110, .45), 0 18px 40px -16px rgba(0, 0, 0, .5); }
.tbw-journey__num {
	position: absolute; inset-inline-end: -4px; top: -4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: #10282b; background: var(--tb-gold); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.tbw-journey__node:not(.has-photo) .tbw-journey__num { position: static; width: auto; height: auto; background: none; box-shadow: none; font-size: 1.1rem; color: var(--tb-gold-text); }
.tbw-journey__name { font-size: var(--tb-fs-h3); font-weight: 500; margin: 0 0 .15rem; }
.tbw-journey__alt { margin: 0 0 .6rem; font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; color: var(--tb-gold-text); font-size: .92rem; }
.tbw-journey__alt[lang="en"] { font-family: var(--tb-font-sans); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tbw-journey__text { margin: 0 0 .9rem; color: var(--tb-muted); font-size: .92rem; line-height: 1.6; }
.tbw-journey__stage .tb-link-arrow { font-size: .85rem; }

@media (min-width: 960px) {
	.tbw-journey__thread { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
	[dir="rtl"] .tbw-journey__thread { transform: scaleX(-1); }
	.tbw-journey__base { fill: none; stroke: var(--tb-line-strong); stroke-width: 1; stroke-dasharray: 3 7; }
	.tbw-journey__line { fill: none; stroke: var(--tb-gold); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tbw-p)); filter: drop-shadow(0 0 8px rgba(212, 178, 110, .55)); }
	.tbw-journey__rail { display: none; }
	.tbw-journey__stages { display: grid; grid-template-columns: repeat(var(--tbw-count), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
	.tbw-journey__stage { padding-top: 140px; text-align: center; }
	.tbw-journey__node { top: 14px; inset-inline-start: calc(50% - 46px); }
}
@media (max-width: 959.98px) {
	.tbw-journey__thread { display: none; }
	.tbw-journey__rail { position: absolute; inset-inline-start: 35px; top: 1rem; bottom: 1rem; width: 2px; background: var(--tb-line); }
	.tbw-journey__rail::after { content: ""; position: absolute; inset: 0; background: var(--tb-gold); transform-origin: top; transform: scaleY(var(--tbw-p)); box-shadow: 0 0 10px rgba(212, 178, 110, .5); }
	.tbw-journey__stages { display: grid; gap: 2.25rem; }
	.tbw-journey__stage { min-height: 72px; padding-inline-start: 6.25rem; }
	.tbw-journey__node { width: 72px; height: 72px; top: 0; inset-inline-start: 0; }
}