/**
 * Timeline — chapters travelled sideways.
 *
 * Two states, one markup:
 *
 *   default      A horizontal row the reader swipes, with snap points. This is
 *                what phones, reduced-motion readers and no-JS visitors get,
 *                and it is complete on its own.
 *   .is-pinned   Added by timeline.js on wide screens. The stage sticks to the
 *                viewport and the row is translated as the page scrolls, so the
 *                chapters pass one by one while the reader keeps scrolling down.
 *
 * Colours are the brand's: forest ground, gold for labels and progress, white
 * type. The display face is Fraunces, the same serif as the hero headline.
 * The theme forces Heebo on every heading and paragraph with !important;
 * the few declarations below that carry !important exist only to win that.
 */

.sui-tl {
	--sui-tl-edge: 20px;
	--sui-tl-gold: var(--sui-gold, #d4af37);
	--sui-tl-ink: #ffffff;
	--sui-tl-soft: rgba(255, 255, 255, 0.72);
	--sui-tl-faint: rgba(255, 255, 255, 0.45);

	position: relative;
	background:
		radial-gradient(ellipse 70% 60% at 20% 30%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%),
		var(--zf-forest, #2a491d);
	color: var(--sui-tl-ink);
	/* Edge to edge even inside a boxed Elementor section, the same way the
	   footer and the promise band break out of it. clip, not hidden: it does
	   not create a scroll container, so the pinned stage can still stick. */
	margin-inline: calc(50% - 50vw);
	overflow-x: clip;
}

/* The page's own container edge, breakpoint for breakpoint, so the section
   lines up with every heading above and below it. Measured in cqw, not %:
   a custom property resolves where it is used, and inside a panel 100% would
   mean the whole five-screen row. cqw always means the stage. */
@media (min-width: 576px)  { .sui-tl { --sui-tl-edge: calc((100cqw - 540px) / 2 + 12px); } }
@media (min-width: 768px)  { .sui-tl { --sui-tl-edge: calc((100cqw - 720px) / 2 + 12px); } }
@media (min-width: 992px)  { .sui-tl { --sui-tl-edge: calc((100cqw - 960px) / 2 + 12px); } }
@media (min-width: 1200px) { .sui-tl { --sui-tl-edge: calc((100cqw - 1140px) / 2 + 12px); } }
@media (min-width: 1400px) { .sui-tl { --sui-tl-edge: calc((100cqw - 1320px) / 2 + 12px); } }

.sui-tl__stage {
	position: relative;
	padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
	container-type: inline-size;
}

/* ---- heading ------------------------------------------------------------ */

.sui-tl__head {
	padding: 0 var(--sui-tl-edge);
	max-width: calc(760px + 2 * var(--sui-tl-edge));
}

.sui-tl .sui-tl__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--sui-tl-gold);
}

.sui-tl .sui-tl__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--sui-tl-gold);
}

body .sui-tl .sui-tl__title {
	margin: 0;
	font-family: var(--sui-font-display, "Fraunces", Georgia, serif) !important;
	font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--sui-tl-ink);
	text-wrap: balance;
}

.sui-tl .sui-tl__span {
	margin: 14px 0 0;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sui-tl-faint);
	font-variant-numeric: tabular-nums;
}

/* ---- the row ------------------------------------------------------------ */

.sui-tl__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: clamp(36px, 5vw, 56px) var(--sui-tl-edge) 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sui-tl-edge);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.sui-tl__track::-webkit-scrollbar {
	display: none;
}

.sui-tl__track:focus-visible {
	outline: 1px solid var(--sui-tl-gold);
	outline-offset: -1px;
}

.sui-tl__panel {
	position: relative;
	flex: 0 0 min(84%, 440px);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
}

/* The year, set enormous and almost invisible behind each chapter. */
.sui-tl__ghost {
	position: absolute;
	right: 0;
	bottom: -0.12em;
	z-index: 0;
	font-family: var(--sui-font-display, "Fraunces", Georgia, serif);
	font-size: clamp(6rem, 4rem + 10vw, 16rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	user-select: none;
}

/* ---- photograph: an arch, with a gold outline set just off it ---------- */

.sui-tl__media {
	position: relative;
	z-index: 1;
	margin: 14px 14px 0 0;
	height: clamp(260px, 46vh, 520px);
	border-radius: 999px 999px 0 0;
}

.sui-tl__media::before {
	content: "";
	position: absolute;
	inset: -14px -14px 14px 14px;
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-radius: inherit;
	pointer-events: none;
}

.sui-tl__panel--flip .sui-tl__media {
	border-radius: 0 0 999px 999px;
}

.sui-tl__panel--flip .sui-tl__media::before {
	inset: 14px -14px -14px 14px;
}

.sui-tl__media .sui-tl__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ---- words -------------------------------------------------------------- */

.sui-tl__copy {
	position: relative;
	z-index: 1;
}

.sui-tl .sui-tl__chapter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--sui-tl-gold);
}

.sui-tl .sui-tl__year {
	letter-spacing: 0.12em;
	color: var(--sui-tl-faint);
	font-variant-numeric: tabular-nums;
}

.sui-tl .sui-tl__year::before {
	content: "·";
	margin-right: 12px;
	color: var(--sui-tl-gold);
}

body .sui-tl .sui-tl__heading {
	margin: 0 0 18px;
	font-family: var(--sui-font-display, "Fraunces", Georgia, serif) !important;
	font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3.4rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--sui-tl-ink);
	text-wrap: balance;
}

.sui-tl .sui-tl__urdu {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.9;
	text-align: left;
	color: var(--sui-tl-soft);
}

.sui-tl .sui-tl__body {
	max-width: 44ch;
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--sui-tl-soft);
}

/* ---- the closing chapter ------------------------------------------------ */

.sui-tl__panel--finale {
	justify-content: center;
}

.sui-tl__panel--finale .sui-tl__ghost {
	right: auto;
	left: 50%;
	bottom: auto;
	top: 50%;
	transform: translate(-50%, -50%);
}

body .sui-tl .sui-tl__panel--finale .sui-tl__heading {
	font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.5rem);
}

.sui-tl .sui-tl__panel--finale .sui-tl__body {
	max-width: 52ch;
	font-size: clamp(17px, 15px + 0.4vw, 20px);
}

.sui-tl .sui-tl__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 30px;
	padding: 15px 32px;
	border-radius: 999px;
	background-color: var(--sui-tl-gold);
	color: var(--zf-forest, #2a491d);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.22);
	transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sui-tl .sui-tl__cta:hover,
.sui-tl .sui-tl__cta:focus-visible {
	background-color: #ffffff;
	color: var(--zf-forest, #2a491d);
	transform: scale(1.04);
}

/* ---- years and progress ------------------------------------------------- */

.sui-tl__nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 28px var(--sui-tl-edge) 0;
}

.sui-tl__years {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sui-tl .sui-tl__years a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--sui-tl-faint);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.sui-tl .sui-tl__years a:hover,
.sui-tl .sui-tl__years a[aria-current] {
	color: var(--sui-tl-gold);
}

.sui-tl__progress {
	position: relative;
	display: block;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}

.sui-tl__bar {
	position: absolute;
	inset: 0;
	background: var(--sui-tl-gold);
	transform-origin: left center;
	transform: scaleX(var(--sui-tl-p, 0));
}

/* ------------------------------------------------------------------------
   Pinned: wide screens, with the script running and motion allowed.
   ------------------------------------------------------------------------ */

.sui-tl.is-pinned {
	height: var(--sui-tl-h, auto);
}

.sui-tl.is-pinned .sui-tl__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: grid;
	/* One column held to the stage width. Left to size itself it grows to the
	   whole five-screen row, and the year rule stretches with it. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	/* Room for the floating header above the heading. */
	padding: 118px 0 40px;
}

.sui-tl.is-pinned .sui-tl__track {
	min-width: 0;
	gap: 0;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
	transform: translate3d(var(--sui-tl-x, 0px), 0, 0);
	will-change: transform;
}

.sui-tl.is-pinned .sui-tl__panel {
	flex: 0 0 100vw;
	flex-basis: 100cqw;
	width: 100cqw;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: 6vw;
	padding: 24px var(--sui-tl-edge);
}

.sui-tl.is-pinned .sui-tl__panel--flip .sui-tl__media {
	order: 2;
}

.sui-tl.is-pinned .sui-tl__media {
	height: min(100%, 520px);
	max-height: calc(100svh - 330px);
	min-height: 240px;
	margin: 14px 14px 0 0;
}

.sui-tl.is-pinned .sui-tl__panel--flip .sui-tl__media {
	margin: 0 14px 14px 0;
}

.sui-tl.is-pinned .sui-tl__ghost {
	right: var(--sui-tl-edge);
	bottom: -0.08em;
	font-size: clamp(10rem, 16vw, 19rem);
}

.sui-tl.is-pinned .sui-tl__panel--flip .sui-tl__ghost {
	right: auto;
	left: var(--sui-tl-edge);
}

.sui-tl.is-pinned .sui-tl__panel--finale {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.sui-tl.is-pinned .sui-tl__panel--finale .sui-tl__chapter {
	justify-content: center;
}

.sui-tl.is-pinned .sui-tl__panel--finale .sui-tl__body {
	margin-inline: auto;
}

.sui-tl.is-pinned .sui-tl__panel--finale .sui-tl__ghost {
	left: 50%;
	right: auto;
	bottom: auto;
	top: 50%;
	font-size: clamp(14rem, 26vw, 30rem);
}

.sui-tl.is-pinned .sui-tl__nav {
	margin-top: 0;
}

/* Chapters settle in as they arrive, rather than sliding in fully formed. */
.sui-tl.is-pinned .sui-tl__panel .sui-tl__copy,
.sui-tl.is-pinned .sui-tl__panel .sui-tl__media {
	transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sui-tl.is-pinned .sui-tl__panel:not(.is-current) .sui-tl__copy {
	opacity: 0.25;
	transform: translateY(18px);
}

.sui-tl.is-pinned .sui-tl__panel:not(.is-current) .sui-tl__media {
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	.sui-tl .sui-tl__cta,
	.sui-tl .sui-tl__years a {
		transition: none;
	}
}