/* ===================================================
   MERGED: feature story + timeline (export bundle)
   =================================================== */

/* ===================================================
   united nations feature story template
   
   by robert irish
   ================================================ */

/* Override CMS h1 hiding for feature story pages */
.main-container.container .fs-essay h1,
.main-container.container .fs-hero-overlay h1,
.main-container .article-body .fs-essay h1 {
	display: block !important;
}

/* Override CMS article-body width constraints */
body.node-type-article .article-body .fs-essay p,
body.node-type-article .article-body .fs-essay ol,
body.node-type-article .article-body .fs-essay ul,
body.node-type-article .article-body .fs-essay blockquote,
body.node-type-article .article-body .fs-essay h1,
body.node-type-article .article-body .fs-essay h2,
body.node-type-article .article-body .fs-essay h3,
body.node-type-article .article-body .fs-essay h4,
body.node-type-article .article-body .fs-essay figcaption,
body.node-type-article .article-body .fs-essay cite,
body.node-type-article .article-body .fs-essay .article-created {
	width: 100% !important;
	margin-top: 0 !important;
}

/* Override CMS font-size rules (body.node-type-article h1 { font-size: 4em } etc.) */
body.node-type-article .fs-essay .fs-hero-overlay h1 {
	font-size: 64px !important;
}
body.node-type-article .fs-essay .fs-hero-overlay .fs-hero-sub {
	font-size: 32px !important;
}
body.node-type-article .fs-essay .fs-img-overlay h2 {
	font-size: 42px !important;
}
body.node-type-article .fs-essay .fs-img-overlay p {
	font-size: 28px !important;
}
body.node-type-article .fs-essay .fs-img-subtitle p {
	font-size: 56px !important;
}
body.node-type-article .fs-essay .fs-quote-dark blockquote p {
	font-size: 48px !important;
}
body.node-type-article .fs-essay .fs-quote-dark blockquote cite {
	font-size: 22px !important;
}
body.node-type-article .fs-essay .fs-quote-light blockquote p {
	font-size: 48px !important;
}
body.node-type-article .fs-essay .fs-quote-light blockquote cite {
	font-size: 22px !important;
}
body.node-type-article .fs-essay .fs-split-text h3 {
	font-size: 40px !important;
}
body.node-type-article .fs-essay .fs-split-text p {
	font-size: 22px !important;
}
body.node-type-article .fs-essay .fs-text-block-inner h2 {
	font-size: 42px !important;
}
body.node-type-article .fs-essay .fs-text-block-inner p {
	font-size: 22px !important;
}
body.node-type-article .fs-essay .fs-text-body-inner p {
	font-size: 22px !important;
}

/* Seamless section stacking */
.fs-essay {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
}

.fs-essay * {
	overflow-wrap: break-word;
	word-break: break-word;
}

.fs-essay > * {
	flex-shrink: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.fs-essay > figure {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: block !important;
}

.fs-essay figure figcaption {
	position: absolute !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
}

/*
   PARALLAX — automatic alternating stack / drift
   ───────────────────────────────────────────────
   Odd sections (1st, 3rd, 5th …) stick in place while the next
   section scrolls up over them. Even sections scroll normally
   with the subtle image-drift effect. No classes needed — the
   nth-child selector handles it. JS wraps each odd+even pair in
   a .fs-stack-group so sticky is constrained to one transition.

   To override on a single section, add class "fs-no-stack" to
   force drift, or "fs-force-stack" to force sticking.
*/
.fs-stack-group {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #fff;
}

.fs-stack-group > :first-child {
	position: sticky;
	top: 0;
	z-index: 1;
}

.fs-stack-group > :last-child {
	position: relative;
	z-index: 2;
}

.fs-stack-group > :first-child figcaption {
	top: 10px !important;
	bottom: auto !important;
	text-align: right !important;
}

.fs-split-wrapper {
	width: 100%;
	min-height: 100vh;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

@media screen and (max-width: 768px) {
	.fs-split-wrapper {
		min-height: auto !important;
	}
}

.fs-split,
.fs-divider {
	background-color: #fff;
	position: relative;
}

/* ---- HERO ---- */
.fs-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 500px;
	overflow: hidden;
}

.fs-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 60px 50px 120px;
	background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 40%, transparent 68%);
}

.fs-hero-overlay.fs-overlay-center {
	justify-content: center;
	align-items: center;
	text-align: center;
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100%);
	padding: 60px 50px;
}

.fs-hero-overlay h1 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.05;
	color: #fff !important;
	margin: 0 0 20px 0;
	max-width: 1000px;
	letter-spacing: -0.5px;
}

.fs-hero-overlay .fs-hero-sub {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 32px;
	line-height: 1.5;
	font-weight: 500 !important;
	color: rgba(255,255,255,0.92) !important;
	margin: 0;
	max-width: 720px;
}

.fs-hero-caption {
	position: absolute;
	bottom: 12px;
	right: 16px;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	color: rgba(255,255,255,0.6) !important;
	z-index: 2;
}

/* ---- HERO VIDEO ---- */
.fs-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero text is always visible — no animation to avoid load jump */
.fs-hero-overlay h1,
.fs-hero-overlay .fs-hero-sub {
	opacity: 1;
	transform: none;
}

/* ---- SCROLL INDICATOR ---- */
.fs-scroll-hint {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.fs-scroll-hint span {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7) !important;
}

.fs-scroll-hint .fs-arrow {
	width: 18px;
	height: 18px;
	border-right: 2px solid rgba(255,255,255,0.7);
	border-bottom: 2px solid rgba(255,255,255,0.7);
	transform: rotate(45deg);
	animation: fs-bounce 2s ease-in-out infinite;
}

@keyframes fs-bounce {
	0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
	50% { transform: rotate(45deg) translateY(8px); opacity: 0.4; }
}

/* ---- FULL-VIEWPORT IMAGE (no overlay) ---- */
.fs-full-image {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 500px;
	overflow: hidden;
}

.fs-full-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.2);
}

.fs-full-image figcaption {
	position: absolute;
	bottom: 10px;
	right: 14px;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	color: rgba(255,255,255,0.7) !important;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	z-index: 2;
}

/* ---- FULL-VIEWPORT IMAGE WITH OVERLAY ---- */
.fs-full-image-overlay {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 500px;
	overflow: hidden;
}

.fs-full-image-overlay img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.2);
}

.fs-full-image-overlay .fs-img-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 60px 50px;
	z-index: 1;
}

.fs-full-image-overlay figcaption {
	position: absolute;
	bottom: 10px;
	right: 14px;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	color: rgba(255,255,255,0.7) !important;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	z-index: 2;
}

/* Overlay heading */
.fs-full-image-overlay .fs-img-overlay h2 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.15;
	color: #fff !important;
	margin: 0 0 16px 0;
}

/* Overlay body */
.fs-full-image-overlay .fs-img-overlay p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	line-height: 1.55;
	font-weight: 300;
	color: rgba(255,255,255,0.95) !important;
	margin: 0;
}

/* ---- OVERLAY DIRECTION: LEFT ---- */
.fs-img-overlay.fs-overlay-left {
	background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.06) 38%, transparent 48%);
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding: 60px 62% 60px 50px;
}

/* ---- OVERLAY DIRECTION: CENTER ---- */
.fs-img-overlay.fs-overlay-center {
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 30%, transparent 50%);
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: 60px 20% 80px;
}

/* ---- OVERLAY DIRECTION: RIGHT ---- */
.fs-img-overlay.fs-overlay-right {
	background: linear-gradient(to left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.06) 38%, transparent 48%);
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	padding: 60px 50px 60px 62%;
}

/* ---- DARK QUOTE ---- */
.fs-quote-dark {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #2b21ce;
	padding: 80px 40px !important;
	width: 100%;
}

.fs-quote-dark blockquote {
	max-width: 900px;
	margin: 0 auto;
	border-left: 0;
	padding: 0 0 0 64px;
	text-align: left;
	position: relative;
}

.fs-quote-dark blockquote::before {
	content: "\f10d";
	font-family: 'FontAwesome';
	position: absolute;
	left: 10px;
	top: -8px;
	font-weight: normal;
	font-size: 48px;
	line-height: 1;
	color: #fff;
}

.fs-quote-dark blockquote::after {
	content: none;
}

.fs-quote-dark blockquote p::before,
.fs-quote-dark blockquote p::after {
	content: none !important;
}

.fs-quote-dark blockquote p {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.25;
	color: #fff !important;
	margin: 0 0 24px 0;
}

.fs-quote-dark blockquote cite {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: block;
	text-align: right;
}

.fs-quote-dark blockquote cite span {
	display: block;
	font-weight: 400;
	text-transform: none;
	font-size: 19px;
	color: rgba(255,255,255,0.8) !important;
	margin-top: 4px;
}

/* ---- SPLIT LAYOUT (Variation B) ---- */
.fs-split {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	min-height: 100vh;
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 80px 40px !important;
	gap: 50px;
}

.fs-split.fs-img-right {
	flex-direction: row-reverse;
}

.fs-split-image {
	width: 55%;
	flex-shrink: 0;
	position: relative;
}

.fs-split-image img {
	width: 100%;
	display: block;
}

.fs-essay .fs-split-image figcaption {
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	color: #888;
	padding: 10px 0 0 0;
	position: relative !important;
	text-align: left !important;
}


.fs-split-text {
	flex: 1;
}

.fs-split-text h3 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	color: #333;
	margin: 0 0 20px 0;
}

.fs-split-text p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.65;
	font-weight: 300;
	color: #444;
	margin: 0 0 16px 0;
}

.fs-split-text p:last-child {
	margin-bottom: 0;
}

/* ---- CREATIVE TYPOGRAPHY: KICKER ---- */
.fs-kicker {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #009edb;
	margin-bottom: 14px;
	display: inline-block;
}

.fs-kicker-light {
	color: rgba(255,255,255,0.7) !important;
}

/* ---- CREATIVE TYPOGRAPHY: ANIMATED UNDERLINE ---- */
.fs-animated-line {
	position: relative;
	display: inline;
	padding-bottom: 6px;
}

.fs-animated-line::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #009edb;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;
}

.fs-visible .fs-animated-line::after,
.fs-animated-line.fs-visible::after {
	transform: scaleX(1);
}

.fs-animated-line-light::after {
	background: rgba(255,255,255,0.6);
}

/* ---- CREATIVE TYPOGRAPHY: SECTION COUNTER ---- */
.fs-section-num {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 110px;
	font-weight: 700;
	line-height: 0.85;
	color: rgba(255,255,255,0.07);
	display: block;
	margin-bottom: -15px;
}

/* ---- CREATIVE TYPOGRAPHY: DRAW CORNER ---- */
.fs-draw-corner {
	position: relative;
}

.fs-draw-corner::before,
.fs-draw-corner::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s,
	            height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s,
	            opacity 0.4s ease 0.2s;
}

.fs-draw-corner::before {
	top: -10px;
	left: -10px;
	border-top: 3px solid #009edb;
	border-left: 3px solid #009edb;
}

.fs-draw-corner::after {
	bottom: -10px;
	right: -10px;
	border-bottom: 3px solid #009edb;
	border-right: 3px solid #009edb;
}

.fs-draw-corner.fs-visible::before,
.fs-draw-corner.fs-visible::after {
	width: 50px;
	height: 50px;
	opacity: 1;
}

/* ---- SCROLL-DRIVEN REVEAL ANIMATIONS ---- */
.fs-reveal {
	opacity: 0;
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fs-reveal.fs-visible {
	opacity: 1;
	transform: none !important;
}

.fs-reveal-up { transform: translateY(35px); }
.fs-reveal-left { transform: translateX(-35px); }
.fs-reveal-right { transform: translateX(35px); }
.fs-reveal-scale { transform: scale(0.94); }

.fs-stagger > .fs-reveal:nth-child(1) { transition-delay: 0s; }
.fs-stagger > .fs-reveal:nth-child(2) { transition-delay: 0.15s; }
.fs-stagger > .fs-reveal:nth-child(3) { transition-delay: 0.3s; }
.fs-stagger > .fs-reveal:nth-child(4) { transition-delay: 0.45s; }
.fs-stagger > .fs-reveal:nth-child(5) { transition-delay: 0.6s; }

/* ---- PROGRESS BAR ---- */
.fs-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: #009edb;
	z-index: 9999;
	width: 0;
	transition: width 0.12s linear;
}

/* ---- TEXT BLOCK: HEADER + BODY ON WHITE ---- */
.fs-text-block {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	padding: 100px 40px !important;
	width: 100%;
}

.fs-text-block-inner {
	max-width: 700px;
	width: 100%;
}

.fs-text-block-inner h2 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.15;
	color: #222;
	margin: 0 0 24px 0;
}

.fs-text-block-inner p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.65;
	font-weight: 300;
	color: #444;
	margin: 0 0 16px 0;
}

.fs-text-block-inner p:last-child {
	margin-bottom: 0;
}

/* ---- TEXT BLOCK: BODY ONLY ON WHITE ---- */
.fs-text-body {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	padding: 80px 40px !important;
	width: 100%;
}

.fs-text-body-inner {
	max-width: 700px;
	width: 100%;
}

.fs-text-body-inner p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.65;
	font-weight: 300;
	color: #444;
	margin: 0 0 16px 0;
}

.fs-text-body-inner p:last-child {
	margin-bottom: 0;
}

/* ---- QUOTE ON WHITE BACKGROUND ---- */
.fs-quote-light {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	padding: 80px 40px !important;
	width: 100%;
}

.fs-quote-light blockquote {
	max-width: 900px;
	margin: 0 auto;
	border-left: 0;
	padding: 0 0 0 64px;
	text-align: left;
	position: relative;
}

.fs-quote-light blockquote::before {
	content: "\f10d";
	font-family: 'FontAwesome';
	position: absolute;
	left: 10px;
	top: -8px;
	font-weight: normal;
	font-size: 48px;
	line-height: 1;
	color: #009edb;
}

.fs-quote-light blockquote::after {
	content: none;
}

.fs-quote-light blockquote p::before,
.fs-quote-light blockquote p::after {
	content: none !important;
}

.fs-quote-light blockquote p {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.25;
	color: #222 !important;
	margin: 0 0 24px 0;
}

.fs-quote-light blockquote cite {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	color: #333 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: block;
	text-align: right;
}

.fs-quote-light blockquote cite span {
	display: block;
	font-weight: 400;
	text-transform: none;
	font-size: 19px;
	color: #666 !important;
	margin-top: 4px;
}

/* ---- IMAGE SUBTITLE OVERLAY ---- */
.fs-full-image-overlay .fs-img-subtitle {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 60px 12%;
	z-index: 1;
	background: rgba(0,0,0,0.35);
}

.fs-full-image-overlay .fs-img-subtitle p {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 1.2;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
	margin: 0;
}

/* ---- ACCESSIBILITY: FOCUS & REDUCED MOTION ---- */
*:focus-visible {
	outline: 3px solid #009edb;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fs-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.fs-animated-line::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}
	.fs-draw-corner::before,
	.fs-draw-corner::after {
		width: 50px !important;
		height: 50px !important;
		opacity: 1 !important;
		transition: none !important;
	}
	.fs-scroll-hint .fs-arrow {
		animation: none !important;
	}
	.fs-hero-video {
		animation: none !important;
	}
}

/* ---- DIVIDER ---- */
.fs-divider {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 760px;
	margin: 0 auto !important;
	padding: 80px 20px !important;
	text-align: center;
}

.fs-divider h2 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #aaa;
	margin: 0;
}

/* ---- RESPONSIVE ---- */
@media screen and (max-width: 768px) {
	.fs-hero-overlay {
		padding: 40px 20px 100px;
	}

	.fs-hero-overlay.fs-overlay-center {
		padding: 40px 20px;
	}

	body.node-type-article .fs-essay .fs-hero-overlay h1,
	.fs-hero-overlay h1 {
		font-size: 36px !important;
	}

	body.node-type-article .fs-essay .fs-hero-overlay .fs-hero-sub,
	.fs-hero-overlay .fs-hero-sub {
		font-size: 20px !important;
	}

	.fs-full-image-overlay .fs-img-overlay {
		background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 55%, transparent 78%) !important;
		justify-content: center !important;
		align-items: flex-start !important;
		text-align: left !important;
		padding: 40px 20px 60px !important;
	}

	.fs-full-image-overlay .fs-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fs-full-image-overlay .fs-animated-line::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}

	body.node-type-article .fs-essay .fs-img-overlay h2,
	.fs-full-image-overlay .fs-img-overlay h2 {
		font-size: 28px !important;
	}

	body.node-type-article .fs-essay .fs-img-overlay p,
	.fs-full-image-overlay .fs-img-overlay p {
		font-size: 18px !important;
	}

	body.node-type-article .fs-essay .fs-img-subtitle p,
	.fs-full-image-overlay .fs-img-subtitle p {
		font-size: 28px !important;
	}

	.fs-section-num {
		font-size: 60px !important;
	}

	.fs-quote-dark {
		padding: 60px 20px;
	}

	.fs-quote-dark blockquote {
		padding-left: 36px;
	}

	.fs-quote-dark blockquote::before {
		font-size: 26px !important;
		left: 6px;
		top: 4px;
	}

	body.node-type-article .fs-essay .fs-quote-dark blockquote p,
	.fs-quote-dark blockquote p {
		font-size: 28px !important;
	}

	body.node-type-article .fs-essay .fs-quote-dark blockquote cite,
	.fs-quote-dark blockquote cite {
		font-size: 17px !important;
	}

	.fs-quote-dark blockquote cite span {
		font-size: 15px !important;
	}

	.fs-quote-light {
		min-height: auto !important;
		padding: 60px 20px;
	}

	.fs-quote-light blockquote {
		padding-left: 36px;
	}

	.fs-quote-light blockquote::before {
		font-size: 26px !important;
		left: 6px;
		top: 4px;
	}

	body.node-type-article .fs-essay .fs-quote-light blockquote p,
	.fs-quote-light blockquote p {
		font-size: 28px !important;
	}

	body.node-type-article .fs-essay .fs-quote-light blockquote cite,
	.fs-quote-light blockquote cite {
		font-size: 17px !important;
	}

	.fs-quote-light blockquote cite span {
		font-size: 15px !important;
	}

	.fs-quote-dark .fs-reveal,
	.fs-quote-light .fs-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fs-text-block {
		padding: 50px 20px !important;
	}

	body.node-type-article .fs-essay .fs-text-block-inner h2,
	.fs-text-block-inner h2 {
		font-size: 30px !important;
	}

	body.node-type-article .fs-essay .fs-text-block-inner p,
	.fs-text-block-inner p {
		font-size: 18px !important;
	}

	.fs-text-body {
		padding: 50px 20px !important;
	}

	body.node-type-article .fs-essay .fs-text-body-inner p,
	.fs-text-body-inner p {
		font-size: 18px !important;
	}

	.fs-split {
		flex-direction: column !important;
		min-height: auto !important;
		padding: 40px 20px;
		gap: 24px;
	}

	.fs-split-image {
		width: 100%;
	}

	.fs-split .fs-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fs-split .fs-animated-line::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}

	body.node-type-article .fs-essay .fs-split-text h3,
	.fs-split-text h3 {
		font-size: 28px !important;
	}

	body.node-type-article .fs-essay .fs-split-text p,
	.fs-split-text p {
		font-size: 18px !important;
	}

	.fs-draw-corner::before,
	.fs-draw-corner::after {
		display: none;
	}

}

/* CMS rich text (.fs-rich): paragraphs, bold, italic, links */
.fs-text-block-inner .fs-rich p,
.fs-text-body-inner .fs-rich p,
.fs-split-text .fs-rich p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.6;
	font-weight: 300;
	color: #444;
	margin: 0 0 1em 0;
	width: auto !important;
}
.fs-text-block-inner .fs-rich p:last-child,
.fs-text-body-inner .fs-rich p:last-child,
.fs-split-text .fs-rich p:last-child {
	margin-bottom: 0;
}
.fs-text-block-inner .fs-rich a,
.fs-text-body-inner .fs-rich a,
.fs-split-text .fs-rich a {
	color: #009edb;
	text-decoration: underline;
}

.fs-full-image-overlay .fs-img-overlay .fs-rich p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	line-height: 1.55;
	font-weight: 300;
	color: rgba(255,255,255,0.95) !important;
	margin: 0 0 0.75em 0;
}
.fs-full-image-overlay .fs-img-overlay .fs-rich p:last-child {
	margin-bottom: 0;
}
.fs-full-image-overlay .fs-img-overlay .fs-rich a {
	color: #fff;
	text-decoration: underline;
}

.fs-quote-dark blockquote .fs-rich p,
.fs-quote-light blockquote .fs-rich p {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.25;
	margin: 0 0 24px 0;
}
.fs-quote-dark blockquote .fs-rich p {
	color: #fff !important;
}
.fs-quote-light blockquote .fs-rich p {
	color: #222 !important;
}
.fs-quote-dark blockquote .fs-rich p::before,
.fs-quote-dark blockquote .fs-rich p::after,
.fs-quote-light blockquote .fs-rich p::before,
.fs-quote-light blockquote .fs-rich p::after {
	content: none !important;
}
.fs-quote-dark blockquote .fs-rich a,
.fs-quote-light blockquote .fs-rich a {
	color: inherit;
	text-decoration: underline;
}

.fs-rich ul,
.fs-rich ol {
	margin: 0 0 1em 0;
	padding-left: 1.35em;
}
.fs-rich li {
	margin: 0.15em 0;
}


/* ---- TIMELINE (appended; same bundle as story export) ---- */

/* ---- TIMELINE (self-contained) ---- */

/* Override CMS width constraints:
   - body.node-type-article .article-body p { width: 60% }
   - body.node-type-article .article-body ol/ul { width: 55% }
   Only reset the elements the CMS actually constrains. */
body.node-type-article .article-body .tl-block ol,
body.node-type-article .article-body .tl-block ul,
body.node-type-article .article-body .tl-block p {
	width: auto !important;
	max-width: none !important;
}

body.node-type-article .article-body .tl-block .tl-list {
	max-width: 800px !important;
}

body.node-type-article .article-body .tl-block .tl-header {
	text-align: center !important;
	margin: 0 auto 60px !important;
	max-width: 700px !important;
	width: auto !important;
}

body.node-type-article .article-body .tl-block .tl-header h2 {
	text-align: center !important;
	width: auto !important;
}

.tl-block {
	background-color: #fff;
	padding: 100px 40px;
	width: 100vw;
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
}

.tl-block *,
.tl-block *::before,
.tl-block *::after {
	box-sizing: border-box;
}

.tl-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 60px !important;
}

.tl-header h2 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.15;
	color: #222;
	margin: 0 0 16px 0 !important;
}

.tl-header p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height: 1.65;
	font-weight: 300;
	color: #444;
	margin: 0 !important;
	width: auto !important;
}

.tl-header .tl-rich p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height: 1.65;
	font-weight: 300;
	color: #444;
	margin: 0 0 1em 0 !important;
	width: auto !important;
}
.tl-header .tl-rich p:last-child {
	margin-bottom: 0 !important;
}
.tl-header .tl-rich a {
	color: #009edb;
	text-decoration: underline;
}
.tl-header .tl-rich ul,
.tl-header .tl-rich ol {
	margin: 0 0 1em 0 !important;
	padding-left: 1.35em;
}
.tl-header .tl-rich li {
	margin: 0.15em 0;
}

.tl-list {
	list-style: none !important;
	counter-reset: none;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 800px;
	position: relative;
}

.tl-list::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #009edb;
	transform: translateX(-50%);
}

.tl-animated::before {
	background: #e0e0e0;
}

.tl-animated::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: calc(var(--tl-progress, 0) * 100%);
	background: #009edb;
	transform: translateX(-50%);
	z-index: 1;
	transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tl-item {
	position: relative;
	width: 50%;
	padding: 0 40px 0 0 !important;
	margin: 0 !important;
	list-style: none !important;
	text-align: right;
	border: 0 !important;
	background: none !important;
}

.tl-item::before,
.tl-item::after {
	content: none !important;
	display: none !important;
}

.tl-item::marker {
	content: none;
	display: none;
}

.tl-item:nth-child(even) {
	margin-left: 50% !important;
	padding: 0 0 0 40px !important;
	text-align: left;
}

.tl-dot {
	position: absolute;
	top: 4px;
	left: 100%;
	margin-left: -8px;
	width: 16px;
	height: 16px;
	background: #009edb;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #009edb;
	z-index: 2;
	transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.tl-animated .tl-dot {
	opacity: 0.35;
	transform: scale(0.6);
}

.tl-animated .tl-dot.tl-active {
	opacity: 1;
	transform: scale(1);
}

.tl-item:nth-child(even) .tl-dot {
	left: 0;
	margin-left: -8px;
}

.tl-item:hover .tl-dot {
	transform: scale(1.4);
	box-shadow: 0 0 0 4px #009edb, 0 0 12px rgba(0,158,219,0.3);
}

.tl-card {
	background: none;
	padding: 0;
	border: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tl-card.tl-has-img {
	grid-template-columns: 1fr;
	gap: 0;
	align-items: start;
}

.tl-item:hover .tl-card {
	transform: scale(1.02);
}

.tl-card time {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #009edb;
	display: block;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.tl-location {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #999;
	display: block;
	margin: 0 0 6px 0;
}

.tl-card h3 {
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: #222;
	margin: 0 0 6px 0 !important;
	width: auto !important;
}

.tl-card p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.6;
	font-weight: 300;
	color: #444;
	margin: 0 !important;
	width: auto !important;
}

.tl-rich p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 1.6;
	font-weight: 300;
	color: #444;
	margin: 0 0 1em 0 !important;
	width: auto !important;
}
.tl-rich p:last-child {
	margin-bottom: 0 !important;
}
.tl-rich a {
	color: #009edb;
	text-decoration: underline;
}
.tl-rich ul,
.tl-rich ol {
	margin: 0 0 1em 0 !important;
	padding-left: 1.35em;
}
.tl-rich li {
	margin: 0.15em 0;
}

.tl-card.tl-has-img > img,
.tl-card.tl-has-img .tl-figure {
	order: 1;
	margin-top: 12px !important;
}

.tl-card .tl-figure {
	margin: 0;
	padding: 0;
	width: 100%;
}

.tl-card img {
	width: 100%;
	display: block;
	margin: 0 !important;
}

.tl-img-caption {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 300;
	color: #666;
	margin: 8px 0 0 0;
	padding: 0;
	width: 100%;
	display: block;
}

/* Left column: caption flush toward outer (left) edge; right column: toward outer (right) edge */
.tl-item:nth-child(odd) .tl-img-caption {
	text-align: left;
}

.tl-item:nth-child(even) .tl-img-caption {
	text-align: right;
}

.tl-item.tl-hidden {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tl-item.tl-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.tl-item.tl-hidden {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tl-animated::after {
		height: 100% !important;
	}
	.tl-animated .tl-dot {
		opacity: 1 !important;
		transform: scale(1) !important;
		transition: none !important;
	}
	.tl-card {
		transition: none !important;
	}
}

@media screen and (max-width: 768px) {
	.tl-block {
		padding: 60px 20px;
	}

	.tl-header h2 {
		font-size: 30px !important;
	}

	.tl-header p {
		font-size: 18px !important;
	}

	.tl-list::before {
		left: 16px;
		transform: none;
		background: #009edb;
	}

	.tl-animated::after {
		display: none;
	}

	.tl-item,
	.tl-item:nth-child(even) {
		width: 100%;
		margin-left: 0 !important;
		padding: 0 0 36px 42px !important;
		text-align: left;
	}

	.tl-item:last-child,
	.tl-item:last-child:nth-child(even) {
		padding-bottom: 0 !important;
	}

	.tl-dot,
	.tl-item:nth-child(even) .tl-dot {
		left: 8px;
		margin-left: 0;
	}

	.tl-card,
	.tl-card.tl-has-img {
		grid-template-columns: 1fr !important;
		max-width: none;
		margin-left: 0;
	}

	.tl-card.tl-has-img > img,
	.tl-card.tl-has-img .tl-figure {
		order: 0;
		margin: 8px 0 12px 0 !important;
	}

	.tl-img-caption {
		text-align: left !important;
	}

	.tl-card time {
		font-size: 15px;
	}

	.tl-item:hover .tl-card {
		transform: none;
	}

	.tl-item:hover .tl-dot {
		transform: none;
		box-shadow: 0 0 0 3px #009edb;
	}

	.tl-item.tl-hidden {
		opacity: 1;
		transform: none;
		transition: none;
	}
}