/* Tunji Idowu - The Legacy Project.
   Ported from "Tunji Idowu Legacy.dc.html". Composition, spacing, type scale
   and colour are the export's own values, transcribed rather than reinterpreted.

   Two boundaries, not one. The export's runtime watches two media queries:
   899px decides where the gold thread sits and how far the content is inset,
   and 1099px decides the four column splits and the height of the reserved
   photography. They are separate on purpose - the thread has to move inboard on
   a phone well before the two-column layouts are worth keeping - so they are
   two media queries here rather than one averaged breakpoint.

   No JavaScript. Ten bindings, all layout, all resolved in CSS.

   Everything is scoped under .ti-route-legacy. My Work is frozen and shares
   only the navy, gold and ink tokens; nothing in this file can reach it. */

/* ---------------------------------------------------------------- ground */

.ti-route-legacy,
.ti-route-legacy.ast-plain-container {
	background: var(--ti2-lg-ground);
	color: var(--ti2-slate);
	font-family: var(--ti2-sans);
}

.ti-route-legacy #ti-main {
	display: block;
	background: var(--ti2-lg-ground);
}

/* The thread is absolutely positioned against this wrapper, and the wrapper
   clips it - which is also what keeps the full-bleed bands from ever producing
   a horizontal scrollbar. */
.ti-route-legacy .ti-lp {
	position: relative;
	overflow: hidden;
}

.ti-route-legacy .ti-lp section[id] {
	scroll-margin-top: 96px;
}

/* ------------------------------------------------------------ the thread */

/* One continuous gold line running the height of the page, fading out at both
   ends rather than stopping dead. It is the page's spine: the four commitments
   are nodes on it, so Faith, Mentoring, ENABLES and the Prize read as one
   widening progression instead of four stacked panels. */
.ti-route-legacy .ti-lp__thread {
	position: absolute;
	z-index: 2;
	left: var(--ti2-lg-thread-x);
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(
		180deg,
		rgba(var(--ti2-gold-rgb), 0) 0%,
		var(--ti2-gold) 5%,
		var(--ti2-gold) 88%,
		rgba(var(--ti2-gold-rgb), 0) 100%
	);
	transform-origin: top;
	animation: ti-lp-thread 1600ms var(--ti2-ease) both;
	pointer-events: none;
}

/* A node marks each commitment. Its position is derived from the thread's own
   value rather than given coordinates of its own, so an 11px dot stays centred
   on a 1px line at every viewport width. */
.ti-route-legacy .ti-lp__node {
	position: absolute;
	z-index: 3;
	left: calc(var(--ti2-lg-thread-x) - 5px);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ti2-gold);
	pointer-events: none;
}

/* --------------------------------------------------------------- motion */

@keyframes ti-lp-thread {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

@keyframes ti-lp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ti-lp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ti-route-legacy .ti-lp__fade {
	animation: ti-lp-fade 800ms ease both;
}

.ti-route-legacy .ti-lp__rise {
	animation: ti-lp-rise 900ms var(--ti2-ease) both;
}

.ti-route-legacy .ti-lp__rise--d120 {
	animation-delay: 120ms;
}

/* Setting the end state explicitly, rather than collapsing the duration to
   near-zero, so the result is guaranteed instead of raced. */
@media (prefers-reduced-motion: reduce) {
	.ti-route-legacy .ti-lp__thread,
	.ti-route-legacy .ti-lp__fade,
	.ti-route-legacy .ti-lp__rise {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------- shared pieces */

.ti-route-legacy .ti-lp__section {
	position: relative;
	padding-right: var(--ti2-gutter);
	padding-left: var(--ti2-lg-content-x);
}

.ti-route-legacy .ti-lp__inner {
	max-width: 1240px;
}

.ti-route-legacy .ti-lp__band {
	background: var(--ti2-lg-band);
}

.ti-route-legacy .ti-lp__dark {
	background: var(--ti2-navy);
}

/* Register label above each commitment. */
.ti-route-legacy .ti-lp__eyebrow {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ti2-gold-ink);
	font-weight: 600;
}

.ti-route-legacy .ti-lp__title {
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-legacy .ti-lp__body {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.78;
	font-weight: 400;
	color: var(--ti2-slate);
}

/* Reserved photography.
   Composed at its final height whether or not a photograph exists, so the real
   image drops in without moving anything. The corner bracket and the caption
   are the export's own empty state - deliberately not a grey box, and never a
   stock photograph. */
.ti-route-legacy .ti-lp__figure {
	min-width: 0;
	margin: 0;
	position: relative;
	width: 100%;
	background: var(--ti2-lg-frame-a);
	border: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
	overflow: hidden;
}

.ti-route-legacy .ti-lp__figure--alt {
	background: var(--ti2-lg-frame-b);
}

/* Explicit height, never aspect-ratio: a ratio on a figure that goes full
   width when the grid collapses turns width into runaway height. */
.ti-route-legacy .ti-lp__figure--portrait {
	height: clamp(230px, 42vw, 360px);
}

.ti-route-legacy .ti-lp__figure--wide {
	height: clamp(150px, 18vw, 220px);
	margin-top: clamp(6px, 1vw, 12px);
}

/* A photograph in a portrait frame below 1100px, where the grid has
   collapsed and the frame runs full width. At the empty state's height that
   is a 2:1 strip at tablet width, too shallow to hold a face and what the
   person is wearing - the MENTOR badge fell out of frame. Only the
   photographic state gets the height, still explicit for the reason above;
   1100px and wider keep the rule in the layout block. */
@media (max-width: 1099.98px) {
	.ti-route-legacy .ti-lp__figure--portrait.ti-lp__figure--photo {
		height: clamp(300px, 64vw, 520px);
	}
}

.ti-route-legacy .ti-lp__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ti-crop, 50% 50%);
}

.ti-route-legacy .ti-lp__corner {
	position: absolute;
	left: 14px;
	top: 14px;
	background: var(--ti2-gold);
	pointer-events: none;
}

.ti-route-legacy .ti-lp__corner--h { width: 30px; height: 1px; }
.ti-route-legacy .ti-lp__corner--v { width: 1px; height: 30px; }

.ti-route-legacy .ti-lp__figure figcaption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-lg-caption);
}

/* ------------------------------------------------------------- masthead */

.ti-route-legacy .ti-lp__open {
	padding-top: clamp(36px, 5vw, 88px);
	padding-bottom: clamp(30px, 4vw, 64px);
	max-width: 1240px;
}

.ti-route-legacy .ti-lp__open .ti-lp__eyebrow {
	letter-spacing: 0.3em;
}

.ti-route-legacy .ti-lp__h1 {
	margin: clamp(18px, 2.4vw, 34px) 0 0;
	max-width: 17ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(34px, 5.6vw, 86px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-legacy .ti-lp__h1 em {
	font-style: italic;
	color: var(--ti2-gold-ink);
}

.ti-route-legacy .ti-lp__standfirst {
	margin: clamp(22px, 3vw, 40px) 0 0;
	max-width: 62ch;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-slate);
}

/* -------------------------------------------------------------- ministry */

.ti-route-legacy .ti-lp__ministry {
	padding-top: clamp(34px, 4.6vw, 80px);
	padding-bottom: clamp(34px, 4.6vw, 80px);
}

.ti-route-legacy .ti-lp__ministry .ti-lp__node {
	top: clamp(38px, 4.9vw, 86px);
}

.ti-route-legacy .ti-lp__ministry-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 3.6vw, 68px);
	align-items: start;
}

.ti-route-legacy .ti-lp__ministry-title {
	max-width: 20ch;
	font-size: clamp(28px, 3.6vw, 54px);
	line-height: 1.08;
}

.ti-route-legacy .ti-lp__ministry-body {
	margin-top: clamp(18px, 2.4vw, 32px);
	max-width: 54ch;
}

/* The second ministry photograph: the same stage, wider, beneath the copy and
   the portrait. Explicit height, for the reason given at the figure rules. */
.ti-route-legacy .ti-lp__figure--landscape {
	height: clamp(210px, 44vw, 500px);
}

/* ------------------------------------------------------------- mentoring */

.ti-route-legacy .ti-lp__mentoring {
	padding-top: clamp(34px, 4.6vw, 84px);
	padding-bottom: clamp(34px, 4.6vw, 84px);
}

.ti-route-legacy .ti-lp__mentoring .ti-lp__node,
.ti-route-legacy .ti-lp__enables .ti-lp__node,
.ti-route-legacy .ti-lp__prize .ti-lp__node {
	top: clamp(38px, 4.9vw, 90px);
}

/* The one heading set in italic. It is the page's turn from statement to
   conviction, and the export marks that with the type rather than a rule. */
.ti-route-legacy .ti-lp__mentoring-title {
	max-width: 24ch;
	font-style: italic;
	font-size: clamp(30px, 4.2vw, 64px);
	line-height: 1.06;
	letter-spacing: -0.022em;
}

.ti-route-legacy .ti-lp__mentoring-grid {
	margin-top: clamp(24px, 3.2vw, 52px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 3.4vw, 64px);
	align-items: start;
}

.ti-route-legacy .ti-lp__mentoring-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 26px);
}

/* --------------------------------------------------------------- enables */

.ti-route-legacy .ti-lp__enables {
	padding-top: clamp(34px, 4.6vw, 84px);
	padding-bottom: clamp(34px, 4.6vw, 84px);
}

.ti-route-legacy .ti-lp__enables-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 3.6vw, 68px);
	align-items: start;
}

.ti-route-legacy .ti-lp__enables .ti-lp__eyebrow {
	color: var(--ti2-gold);
}

.ti-route-legacy .ti-lp__enables-title {
	font-size: clamp(30px, 4vw, 58px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	color: var(--ti2-ivory);
}

.ti-route-legacy .ti-lp__enables-lead {
	margin: clamp(18px, 2.2vw, 30px) 0 0;
	max-width: 52ch;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.78;
	font-weight: 400;
	color: var(--ti2-dune);
}

.ti-route-legacy .ti-lp__enables-copy {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	max-width: 52ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-dune);
}

.ti-route-legacy .ti-lp__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 32px);
	min-height: 50px;
	padding: 0 26px;
	border: 1px solid var(--ti2-gold);
	color: var(--ti2-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-route-legacy .ti-lp__cta:hover,
.ti-route-legacy .ti-lp__cta:focus-visible {
	background: var(--ti2-gold);
	color: var(--ti2-navy);
}

.ti-route-legacy .ti-lp__cta:focus-visible {
	outline: 2px solid var(--ti2-ivory);
	outline-offset: 3px;
}

/* The three ENABLES facts, held against a gold rule. */
.ti-route-legacy .ti-lp__facts {
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 24px);
	border-left: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
	padding-left: clamp(16px, 2vw, 28px);
}

.ti-route-legacy .ti-lp__facts dt {
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold);
}

.ti-route-legacy .ti-lp__facts dd {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ti2-dune);
}

.ti-route-legacy .ti-lp__facts dd.is-lead {
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.1;
	color: var(--ti2-ivory);
}

/* ----------------------------------------------------------------- prize */

.ti-route-legacy .ti-lp__prize {
	padding-top: clamp(34px, 4.6vw, 84px);
	padding-bottom: clamp(34px, 4.6vw, 84px);
}

.ti-route-legacy .ti-lp__prize-title {
	max-width: 22ch;
	font-size: clamp(30px, 4.2vw, 62px);
	line-height: 1.05;
	letter-spacing: -0.022em;
}

.ti-route-legacy .ti-lp__prize-grid {
	margin-top: clamp(22px, 3vw, 44px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 3.4vw, 64px);
	align-items: start;
}

.ti-route-legacy .ti-lp__prize-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 26px);
}

.ti-route-legacy .ti-lp__footnote {
	margin: 0;
	padding-top: clamp(12px, 1.4vw, 18px);
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-lg-caption);
}

/* --------------------------------------------------------------- closing */

.ti-route-legacy .ti-lp__closing {
	padding-top: clamp(34px, 4.6vw, 80px);
	padding-bottom: clamp(40px, 5.2vw, 92px);
}

.ti-route-legacy .ti-lp__closing .ti-lp__node {
	top: clamp(44px, 5.7vw, 102px);
}

/* Held at a smaller scale than the page's other display type. The closing is
   a reflection, not a second masthead, and the export reduces it deliberately. */
.ti-route-legacy .ti-lp__quote {
	/*
	 * Astra styles every blockquote with font-style:italic, a 5px left border
	 * and 20px of padding. None of that belongs here, and the italic is the
	 * damaging one: the closing is written in two voices, and it only reads as
	 * two if this half stays upright. Reset explicitly rather than relying on
	 * the export's values happening to outrank a parent theme's element rule.
	 */
	font-style: normal;
	border: 0;
	padding: 0;
	position: static;

	margin: 0;
	max-width: 34ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(22px, 3.1vw, 46px);
	line-height: 1.16;
	letter-spacing: -0.018em;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

/* The spotlight-and-source line, set apart in gold italic. It carries the
   thought the whole page has been building toward, so it is given its own
   voice rather than being left as the quote's last sentence. */
.ti-route-legacy .ti-lp__coda {
	margin: clamp(18px, 2.2vw, 30px) 0 0;
	max-width: 30ch;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 38px);
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--ti2-gold-ink);
}

.ti-route-legacy .ti-lp__attribution {
	margin: clamp(24px, 3vw, 44px) 0 0;
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-lg-caption);
}

/* ==================================================== layout, above 1099px
   The export's second boundary: the four column splits and the taller
   reserved photography. The thread and the content inset moved earlier, at
   900px, and are unaffected here. */

@media (min-width: 1100px) {

	.ti-route-legacy .ti-lp__figure--portrait {
		height: clamp(340px, 36vw, 520px);
	}

	.ti-route-legacy .ti-lp__ministry-grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	}

	.ti-route-legacy .ti-lp__ministry-grid .ti-lp__figure--landscape {
		grid-column: 1 / -1;
		height: clamp(300px, 34vw, 500px);
	}

	.ti-route-legacy .ti-lp__mentoring-grid {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	}

	.ti-route-legacy .ti-lp__enables-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	}

	.ti-route-legacy .ti-lp__prize-grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}
}


/* --------------------------------------------------------- masthead index

   CTO review, 13 September 2026: the right half of the masthead was an empty
   field beside a left-hung heading. It now carries the page's own index - the
   three commitments, by the eyebrows and titles they already carry - set on
   hairlines with a gold node for each, the thread's own mark. From 1100px the
   masthead is two columns: the heading and standfirst on the left, the index
   on the right, its last entry level with the standfirst's last line, and its
   right edge on the same line as the content below. Below 1100px it follows
   the standfirst. The nodes fill and the arrow drops on hover or focus. */
.ti-route-legacy .ti-lp__rise--d240 { animation-delay: 240ms; }

.ti-route-legacy .ti-lp__index { margin: clamp(30px, 4vw, 48px) 0 0; }

.ti-route-legacy .ti-lp__index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
}

.ti-route-legacy .ti-lp__index-item { border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.14); }

.ti-route-legacy .ti-lp__index-link {
	position: relative;
	display: grid;
	gap: 7px;
	padding: 18px 44px 19px 28px;
	color: var(--ti2-navy);
	text-decoration: none;
}

.ti-route-legacy .ti-lp__index-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	width: 9px;
	height: 9px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--ti2-gold);
	background: transparent;
	transition: background-color 0.35s ease, transform 0.35s var(--ti2-ease);
}

.ti-route-legacy .ti-lp__index-link::after {
	content: "\2193";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--ti2-gold-ink);
	opacity: 0.5;
	transition: transform 0.35s var(--ti2-ease), opacity 0.35s ease;
}

.ti-route-legacy .ti-lp__index-label {
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold-ink);
}

.ti-route-legacy .ti-lp__index-title {
	font-family: var(--ti2-serif);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.32;
	color: var(--ti2-navy);
	text-wrap: balance;
	transition: color 0.3s ease;
}

.ti-route-legacy .ti-lp__index-link:hover::before,
.ti-route-legacy .ti-lp__index-link:focus-visible::before {
	background-color: var(--ti2-gold);
	transform: scale(1.2);
}

.ti-route-legacy .ti-lp__index-link:hover::after,
.ti-route-legacy .ti-lp__index-link:focus-visible::after {
	transform: translateY(-20%);
	opacity: 1;
}

.ti-route-legacy .ti-lp__index-link:hover .ti-lp__index-title,
.ti-route-legacy .ti-lp__index-link:focus-visible .ti-lp__index-title { color: var(--ti2-gold-ink); }

.ti-route-legacy .ti-lp__index-link:focus-visible {
	outline: 2px solid var(--ti2-gold-ink);
	outline-offset: 2px;
}

@media (min-width: 1100px) {
	.ti-route-legacy .ti-lp__open {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 21rem);
		column-gap: clamp(48px, 6vw, 112px);
		align-items: start;
		max-width: calc(1240px + var(--ti2-lg-content-x) + var(--ti2-gutter));
	}

	.ti-route-legacy .ti-lp__open > * { grid-column: 1; }

	.ti-route-legacy .ti-lp__open > .ti-lp__index {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: end;
		margin: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-legacy .ti-lp__index-link::before,
	.ti-route-legacy .ti-lp__index-link::after,
	.ti-route-legacy .ti-lp__index-title { transition: none; }
}


/* ============================================== responsive review, 13 Sept */

/* At very wide screens the page was pinned left - content 150-1390px on a
   1920 screen, 530px of ground on the right. From 1500px the whole composition
   (content, thread and nodes together) is centred by one shared shift, so the
   thread keeps its distance from the copy. Below that nothing changes. */
.ti-route-legacy .ti-lp {
	--ti-lp-shift: max(0px, calc((100% - 1240px - var(--ti2-lg-content-x) - var(--ti2-gutter)) / 2));
}

@media (min-width: 1500px) {
	.ti-route-legacy .ti-lp__section { padding-left: calc(var(--ti2-lg-content-x) + var(--ti-lp-shift)); }
	.ti-route-legacy .ti-lp__thread { left: calc(var(--ti2-lg-thread-x) + var(--ti-lp-shift)); }
	.ti-route-legacy .ti-lp__node { left: calc(var(--ti2-lg-thread-x) - 5px + var(--ti-lp-shift)); }
	.ti-route-legacy .ti-lp__open { max-width: calc(1240px + var(--ti2-lg-content-x) + var(--ti2-gutter) + var(--ti-lp-shift)); }
}

/* The closing on phones: open the leading so descenders clear the next line,
   and balance the gold line so its last word is not left alone. */
@media (max-width: 767.98px) {
	.ti-route-legacy .ti-lp__quote { line-height: 1.24; }

	.ti-route-legacy .ti-lp__coda {
		line-height: 1.28;
		text-wrap: balance;
	}
}