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

   Story is the only room that opens on navy and moves into the light. That
   movement - dark masthead, ivory journey, navy lessons, ivory beliefs, dune
   mosaic, navy close - is the page's argument, so the grounds alternate on
   purpose and are not a variation of any other route's palette.

   One boundary: 859/860, the export's own. Almost every grid is intrinsic
   (repeat(auto-fit, minmax())) and needs no query at all; only the journey
   and the two lesson presentations switch.

   Everything is scoped under .ti-route-about. My Work, Legacy and Ideas are
   frozen and share only the navy, gold and ink tokens. */

/* The hidden attribute must win. Several elements here carry both a display of
   their own and a hidden attribute; without this the reading drawer renders as
   a full-screen overlay over the page. */
.ti-route-about [hidden] { display: none !important; }

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

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

.ti-route-about #ti-main { display: block; background: var(--ti2-navy); }

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

.ti-route-about .ti-story__shell {
	max-width: 1360px;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 64px);
	padding-right: clamp(20px, 5vw, 64px);
}

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

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

.ti-route-about .ti-story__rise { animation: ti-story-rise 860ms var(--ti2-ease) both; }
.ti-route-about .ti-story__rise--d100 { animation-delay: 100ms; }
.ti-route-about .ti-story__rise--d200 { animation-delay: 200ms; }
.ti-route-about .ti-story__rise--d300 { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.ti-route-about .ti-story__rise,
	.ti-route-about .ti-story__reader-panel,
	.ti-route-about .ti-story__reader-scrim {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* The lesson hover indent is the one positional transition on this page.
	   The affordance stays; only its travel stops. */
	.ti-route-about .ti-story__lesson-btn {
		transition: background 0.45s ease;
	}
}

/* ------------------------------------------------------- shared register */

.ti-route-about .ti-story__eyebrow {
	margin: 0 0 clamp(18px, 2.2vw, 28px);
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 500;
}

.ti-route-about .ti-story__register {
	margin: 0 0 16px;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ti2-st-muted);
	font-weight: 600;
}

.ti-route-about .ti-story__count {
	margin: 0;
	min-width: 0;
	max-width: 40ch;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti2-st-muted);
	font-weight: 500;
	line-height: 1.9;
}

.ti-route-about .ti-story__count--light {
	letter-spacing: 0.16em;
	color: var(--ti2-dune);
	line-height: normal;
}

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

.ti-route-about .ti-story__open {
	position: relative;
	background: var(--ti2-navy);
	overflow: hidden;
}

.ti-route-about .ti-story__open-grid {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(36px, 4.4vw, 64px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.ti-route-about .ti-story__open-copy { min-width: 0; position: relative; z-index: 2; }

.ti-route-about .ti-story__h1 {
	margin: 0;
	max-width: 18ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(40px, 5.6vw, 82px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-about .ti-story__h1 em { font-style: italic; color: var(--ti2-gold); }

.ti-route-about .ti-story__opening {
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	max-width: 42ch;
	font-size: clamp(16.5px, 1.35vw, 18.5px);
	line-height: 1.68;
	font-weight: 400;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

.ti-route-about .ti-story__begin {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(24px, 2.8vw, 36px);
	min-height: 48px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.5);
	padding-bottom: 6px;
	text-decoration: none;
}

.ti-route-about .ti-story__begin:hover,
.ti-route-about .ti-story__begin:focus-visible {
	color: var(--ti2-ivory);
	border-bottom-color: var(--ti2-ivory);
}

/* The portrait bleeds to the right edge, as the export composes it. */
.ti-route-about .ti-story__portrait {
	margin: 0;
	min-width: 0;
	align-self: stretch;
	min-height: clamp(300px, 38vw, 470px);
	position: relative;
}

.ti-route-about .ti-story__portrait-frame {
	position: absolute;
	inset: 0;
	right: calc(-1 * clamp(20px, 5vw, 64px));
	background: var(--ti2-st-plate);
	border-left: 1px solid rgba(var(--ti2-gold-rgb), 0.35);
	display: grid;
	place-items: center;
	padding: 24px;
	overflow: hidden;
}

.ti-route-about .ti-story__portrait-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ti-crop, 50% 30%);
}

.ti-route-about .ti-story__portrait-await { text-align: center; max-width: 28ch; }

.ti-route-about .ti-story__mark {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.6);
	color: var(--ti2-gold);
	font-family: var(--ti2-serif);
	font-size: 13px;
	margin-bottom: 14px;
}

.ti-route-about .ti-story__portrait-label {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 600;
}

.ti-route-about .ti-story__portrait-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--ti2-dune);
	font-weight: 400;
}

/* -------------------------------------------------------------- journey */

.ti-route-about .ti-story__journey {
	background: var(--ti2-ivory);
	padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
}

.ti-route-about .ti-story__journey-head { max-width: 36ch; }

.ti-route-about .ti-story__journey-title {
	margin: 0;
	max-width: 26ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(27px, 3.2vw, 46px);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-about .ti-story__journey-title em { font-style: italic; color: var(--ti2-st-ink); }

/* The narrative.

   A continuous account has one real risk, and it is not the tab widget this
   replaced: it is becoming a column of undifferentiated paragraphs. The rhythm
   here is typographic and comes from the page's own vocabulary rather than
   from new furniture. The running copy holds a measured column, indented on
   wide screens; the pull quotes break out of that indent to the left, in the
   serif and against the gold rule this page already uses elsewhere; the one
   photographic frame keeps the indent and runs the width of the text.

   No numerals, no headings, no dividers between passages. The source gives
   none, and inventing them is what put five chapter titles on this page in the
   first place. */
.ti-route-about .ti-story__narrative {
	margin-top: clamp(28px, 3.4vw, 48px);
	padding-top: clamp(26px, 3vw, 44px);
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: clamp(30px, 3vw, 42px);
}

.ti-route-about .ti-story__movement {
	margin: 0;
	min-width: 0;
	max-width: 64ch;
	font-size: clamp(17px, 1.35vw, 19.5px);
	line-height: 1.85;
	font-weight: 400;
	color: rgba(var(--ti2-navy-rgb), 0.84);
	text-wrap: pretty;
}

/* The way in.

   A profile that opens on the same paragraph weight it closes on reads as a
   column of copy rather than as a piece of writing. The first paragraph is set
   a step larger and a measure narrower, in the page's own ink rather than its
   secondary slate, so the reader is carried into the account instead of
   dropped into it. It is a step up, not a step down anywhere else: no body
   type was reduced to buy it. */
.ti-route-about .ti-story__movement:first-of-type {
	font-size: clamp(18px, 1.55vw, 22px);
	line-height: 1.72;
	color: var(--ti2-navy);
}

/* The way in is also marked the way a printed long read marks it: a drop
   capital in the page's serif and its own gold ink. Presentation only - the
   letter is still the first letter of the client's sentence. */
.ti-route-about .ti-story__movement:first-of-type::first-letter {
	float: left;
	margin: 0.07em 0.12em 0 0;
	font-family: var(--ti2-serif);
	font-size: 3.7em;
	font-weight: 400;
	line-height: 0.8;
	color: var(--ti2-st-ink);
}

/* Always the next sentence of the paragraph above it, never a line written to
   fill a quote. It is set as a blockquote because that is what it is.

   It is also meant to be a rest. At the size and spacing it first carried it
   read as one more block in the column - three lines, eight pixels more air
   than a paragraph - which made it decoration. It is now large enough, narrow
   enough and surrounded by enough room that the eye stops, which is the only
   job a pull quote has. */
.ti-route-about .ti-story__breakout {
	margin: clamp(18px, 3.4vw, 60px) 0;
	min-width: 0;
	border: 0;
	padding: 0;
	font-style: normal;
}

/* A short gold rule above rather than a rule down the side: the quotation is
   set on the wide measure, and a side rule that long reads as a border. */
.ti-route-about .ti-story__breakout::before {
	content: "";
	display: block;
	width: clamp(40px, 4vw, 64px);
	height: 2px;
	margin-bottom: clamp(18px, 2vw, 30px);
	background: var(--ti2-gold);
}

.ti-route-about .ti-story__breakout p {
	margin: 0;
	max-width: 32ch;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(25px, 3.3vw, 50px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

/* The reserved photograph.

   It was a hairline rectangle of warm gray on an ivory ground, which is what
   an absent photograph looks like when nobody decides what it should look
   like. It is now the plate this page already uses for a photograph it does
   not yet have - the masthead's ground, its gold rule, its mark and its two
   lines of register - so it reads as a place held rather than a gap left. It
   is also the one dark interval in a long light section, which is work the
   composition needs whether or not the photograph has arrived.

   Nothing here is a new motif: every value and every class comes from the
   masthead's own reserved portrait. When the photograph is supplied it fills
   the same frame and the furniture goes. */
.ti-route-about .ti-story__plate {
	margin: clamp(16px, 2.4vw, 34px) 0;
	min-width: 0;
}

.ti-route-about .ti-story__plate-frame {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--ti2-st-plate);
	border-top: 2px solid var(--ti2-gold);
	display: grid;
	place-items: center;
	padding: clamp(24px, 3vw, 44px);
	overflow: hidden;
}

.ti-route-about .ti-story__plate-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ti-crop, 50% 50%);
	display: block;
}

.ti-route-about .ti-story__plate-await {
	text-align: center;
	max-width: 30ch;
}

/* The reserved state, and only the reserved state.

   Composing the empty frame fixed one problem and introduced its own: at the
   full editorial ratio a photograph that has not arrived became the loudest
   thing in the section, which is the wrong order of importance for a
   placeholder. The plate keeps its position, its ground, its gold rule and its
   register; it simply stops claiming the height it has not yet earned, and
   falls to what its own register needs.

   The container is untouched. When the photograph is attached the state class
   is not printed, the frame takes its full ratio again, and nothing here
   applies. */
.ti-route-about .ti-story__plate--await .ti-story__plate-frame {
	aspect-ratio: auto;
	min-height: clamp(116px, 13vw, 170px);
	padding: clamp(18px, 2.2vw, 30px);
}

/* A pair.

   When the passage has two photographs they sit side by side in the same
   place, each in a portrait frame: both are portraits, and the wide plate
   would cut them to faces. On a phone the two stack. They are never a
   sequence - the page's one timed change is Travel - but they do move with
   the reader: see "The journey in motion" at the end of this file. */
.ti-route-about .ti-story__plate--pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(12px, 1.6vw, 22px);
}

.ti-route-about .ti-story__plate--pair .ti-story__plate-frame { aspect-ratio: 4 / 5; }

.ti-route-about .ti-story__journey-coda {
	margin-top: clamp(28px, 3.4vw, 48px);
	padding-top: clamp(24px, 2.8vw, 36px);
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 4vw, 56px);
	align-items: end;
}

.ti-route-about .ti-story__coda-copy {
	margin: 0;
	min-width: 0;
	max-width: 44ch;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.72;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-about .ti-story__coda-lines {
	margin: 0;
	min-width: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
}

.ti-route-about .ti-story__coda-lines em { font-style: italic; color: var(--ti2-st-ink); }

/* -------------------------------------------------------------- lessons */

.ti-route-about .ti-story__lessons-section {
	background: var(--ti2-navy);
	padding: clamp(48px, 6vw, 88px) 0;
}

.ti-route-about .ti-story__lessons-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 3vw, 48px);
	align-items: end;
}

.ti-route-about .ti-story__lessons-title {
	margin: 0;
	min-width: 0;
	max-width: 22ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(27px, 3.2vw, 46px);
	line-height: 1.1;
	color: var(--ti2-ivory);
}

.ti-route-about .ti-story__lessons-title em { font-style: italic; color: var(--ti2-gold); }

.ti-route-about .ti-story__lessons {
	margin-top: clamp(28px, 3.4vw, 48px);
	border-top: 1px solid rgba(var(--ti2-dune-rgb), 0.22);
}

.ti-route-about .ti-story__lesson-head { margin: 0; }

.ti-route-about .ti-story__lesson-btn {
	width: 100%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(16px, 2.4vw, 36px);
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.22);
	padding: clamp(16px, 1.9vw, 26px) clamp(8px, 1.4vw, 20px);
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: var(--ti2-ivory);
	transition: background 0.45s ease, padding-left 0.45s ease;
}

.ti-route-about .ti-story__lesson-btn:hover {
	background: rgba(var(--ti2-gold-rgb), 0.1);
	padding-left: clamp(14px, 2.2vw, 34px);
}

.ti-route-about .ti-story__lesson-ord {
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 600;
	width: 64px;
}

.ti-route-about .ti-story__lesson-title {
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 2.2vw, 31px);
	line-height: 1.22;
	text-wrap: pretty;
}

.ti-route-about .ti-story__lesson-cue {
	display: none;
	align-items: center;
	gap: 10px;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 600;
	white-space: nowrap;
}

.ti-route-about .ti-story__lesson-cue span { font-size: 18px; line-height: 1; }

.ti-route-about .ti-story__lesson-sign {
	font-size: 20px;
	color: var(--ti2-gold);
	line-height: 1;
}

.ti-route-about .ti-story__lesson-body {
	border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.22);
	padding: 16px 4px 24px;
}

.ti-route-about .ti-story__lesson-body p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-ivory);
}

/* --------------------------------------------------------- the drawer */

.ti-route-about .ti-story__reader {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	justify-content: flex-end;
}

@keyframes ti-story-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes ti-story-drawer {
	from { opacity: 0; transform: translateX(48px); }
	to   { opacity: 1; transform: none; }
}

.ti-route-about .ti-story__reader-scrim {
	position: absolute;
	inset: 0;
	background: rgba(5, 11, 18, 0.74);
	border: 0;
	padding: 0;
	cursor: pointer;
	animation: ti-story-scrim 320ms ease both;
}

.ti-route-about .ti-story__reader-panel {
	position: relative;
	width: min(720px, 94vw);
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--ti2-navy);
	border-left: 1px solid rgba(var(--ti2-gold-rgb), 0.55);
	box-shadow: -30px 0 90px rgba(5, 11, 18, 0.6);
	padding: clamp(28px, 4vw, 64px) clamp(22px, 3.4vw, 58px);
	display: flex;
	flex-direction: column;
	animation: ti-story-drawer 520ms var(--ti2-ease) both;
}

.ti-route-about .ti-story__reader-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: clamp(22px, 2.6vw, 34px);
}

.ti-route-about .ti-story__reader-index {
	margin: 0;
	font-family: var(--ti2-serif);
	font-size: clamp(15px, 1.4vw, 19px);
	letter-spacing: 0.06em;
	color: var(--ti2-gold);
}

.ti-route-about .ti-story__reader-x {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-dune);
	transition: color 0.3s ease;
}

.ti-route-about .ti-story__reader-x:hover { color: var(--ti2-gold); }
.ti-route-about .ti-story__reader-x span { font-size: 17px; line-height: 1; }

/* The oversized numeral behind the text. Decorative, and hidden from the
   accessibility tree because it says nothing the index above does not. */
.ti-route-about .ti-story__reader-ghost {
	position: absolute;
	right: clamp(-10px, -1vw, 0px);
	bottom: clamp(52px, 7vw, 104px);
	font-family: var(--ti2-serif);
	font-size: clamp(190px, 26vw, 340px);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: rgba(var(--ti2-gold-rgb), 0.075);
	pointer-events: none;
	user-select: none;
}

.ti-route-about .ti-story__reader-body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(10px, 2vw, 28px) 0;
}

.ti-route-about .ti-story__reader-label {
	margin: 0 0 clamp(18px, 2vw, 26px);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 600;
}

.ti-route-about .ti-story__reader-title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

.ti-route-about .ti-story__reader-rule {
	display: block;
	height: 1px;
	width: 88px;
	background: var(--ti2-gold);
	margin: clamp(22px, 2.6vw, 34px) 0;
}

.ti-route-about .ti-story__reader-text p {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(16.5px, 1.4vw, 19.5px);
	line-height: 1.78;
	font-weight: 400;
	color: var(--ti2-ivory);
}

.ti-route-about .ti-story__reader-foot {
	position: relative;
	margin-top: auto;
	padding-top: clamp(24px, 2.8vw, 40px);
	border-top: 1px solid rgba(var(--ti2-dune-rgb), 0.18);
}

.ti-route-about .ti-story__reader-next {
	margin: 0 0 clamp(18px, 2vw, 26px);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
}

.ti-route-about .ti-story__reader-next span:first-child {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-gold);
	font-weight: 600;
}

.ti-route-about .ti-story__reader-next span:last-child {
	font-family: var(--ti2-serif);
	font-size: clamp(17px, 1.6vw, 23px);
	line-height: 1.3;
	color: var(--ti2-dune);
}

.ti-route-about .ti-story__reader-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
}

.ti-route-about .ti-story__reader-prev,
.ti-route-about .ti-story__reader-fwd {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	cursor: pointer;
	font: inherit;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}

.ti-route-about .ti-story__reader-prev {
	padding: 0 20px;
	background: none;
	border: 1px solid rgba(var(--ti2-dune-rgb), 0.34);
	color: var(--ti2-dune);
	transition: border-color 0.3s ease, color 0.3s ease;
}

.ti-route-about .ti-story__reader-prev:hover {
	border-color: var(--ti2-gold);
	color: var(--ti2-gold);
}

.ti-route-about .ti-story__reader-fwd {
	padding: 0 22px;
	background: var(--ti2-gold);
	border: 1px solid var(--ti2-gold);
	color: var(--ti2-navy);
	transition: background 0.3s ease;
}

.ti-route-about .ti-story__reader-fwd:hover { background: var(--ti2-ivory); }

.ti-route-about.ti-story-locked,
html.ti-story-locked { overflow: hidden; }

/* ------------------------------------------------------------- beliefs */

.ti-route-about .ti-story__beliefs {
	background: var(--ti2-ivory);
	padding: clamp(48px, 6vw, 88px) 0;
}

.ti-route-about .ti-story__beliefs .ti-story__register { margin-bottom: clamp(22px, 2.6vw, 34px); }

.ti-route-about .ti-story__beliefs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.ti-route-about .ti-story__beliefs-lead {
	margin: 0;
	max-width: 22ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(29px, 3.6vw, 54px);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-about .ti-story__beliefs-faith {
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	max-width: 24ch;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-size: clamp(21px, 2.2vw, 31px);
	line-height: 1.3;
	color: var(--ti2-st-ink);
	border-left: 2px solid var(--ti2-gold);
	padding-left: clamp(16px, 1.6vw, 22px);
	text-wrap: pretty;
}

.ti-route-about .ti-story__beliefs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ti-route-about .ti-story__beliefs-list li {
	padding: clamp(14px, 1.6vw, 20px) 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
	font-family: var(--ti2-serif);
	font-size: clamp(19px, 1.8vw, 25px);
	line-height: 1.32;
	color: var(--ti2-navy);
	max-width: 36ch;
	text-wrap: pretty;
}

.ti-route-about .ti-story__beliefs-list li:last-child { border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.22); }

.ti-route-about .ti-story__practice { margin-top: clamp(36px, 4.4vw, 68px); }

.ti-route-about .ti-story__practice-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 3vw, 44px);
	align-items: end;
	padding-bottom: clamp(18px, 2.2vw, 28px);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
}

.ti-route-about .ti-story__practice-head .ti-story__register { margin: 0; min-width: 0; }

.ti-route-about .ti-story__practice-intro {
	margin: 0;
	min-width: 0;
	max-width: 38ch;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.72;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-about .ti-story__principles {
	margin-top: clamp(20px, 2.4vw, 32px);
	background: var(--ti2-navy);
	border-top: 2px solid var(--ti2-gold);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ti-route-about .ti-story__principle {
	min-width: 0;
	position: relative;
	overflow: hidden;
	padding: clamp(26px, 3vw, 40px) clamp(20px, 2.2vw, 32px);
	border-right: 1px solid rgba(var(--ti2-dune-rgb), 0.16);
	transition: background 0.55s ease;
}

.ti-route-about .ti-story__principle:last-child { border-right: 0; }
.ti-route-about .ti-story__principle:hover { background: rgba(var(--ti2-gold-rgb), 0.09); }

.ti-route-about .ti-story__numeral {
	position: absolute;
	right: clamp(10px, 1.4vw, 20px);
	top: clamp(2px, 0.6vw, 8px);
	font-family: var(--ti2-serif);
	font-size: clamp(64px, 7vw, 108px);
	line-height: 1;
	color: rgba(var(--ti2-gold-rgb), 0.16);
	letter-spacing: -0.02em;
	pointer-events: none;
}

.ti-route-about .ti-story__principle-tick {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--ti2-gold);
}

.ti-route-about .ti-story__principle-title {
	margin: clamp(18px, 2vw, 26px) 0 0;
	position: relative;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(21px, 2vw, 29px);
	line-height: 1.16;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

.ti-route-about .ti-story__principle-body {
	margin: 14px 0 0;
	position: relative;
	max-width: 40ch;
	font-size: 15.5px;
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-ivory);
}

/* What I believe, in motion.

   The section was set correctly and read as a slide. It now arrives in the
   order it is meant to be read: the statement, then each belief in turn with
   its rule drawn from the left, then the principles. The faith line's gold
   rule grows down beside it. On a wide screen the statement holds its place
   while the list passes it. A belief answers the pointer with a short gold
   dash and a small step to the right; a principle lengthens its tick and
   lifts its numeral. All of it is reveal-once or hover - nothing moves on its
   own - and none of it happens under reduced motion or without script. */
.ti-route-about .ti-story__beliefs-list li {
	position: relative;
	border-top: 0;
}

.ti-route-about .ti-story__beliefs-list li:last-child { border-bottom: 0; }

.ti-route-about .ti-story__beliefs-list li::before,
.ti-route-about .ti-story__beliefs-list li:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(var(--ti2-navy-rgb), 0.22);
	transform-origin: left center;
	transition: transform 900ms var(--ti2-ease) 150ms;
}

.ti-route-about .ti-story__beliefs-list li::before { top: 0; }
.ti-route-about .ti-story__beliefs-list li:last-child::after { bottom: 0; transition-delay: 600ms; }

.ti-route-about .ti-story__beliefs-list li:nth-child(2)::before { transition-delay: 260ms; }
.ti-route-about .ti-story__beliefs-list li:nth-child(3)::before { transition-delay: 370ms; }
.ti-route-about .ti-story__beliefs-list li:nth-child(4)::before { transition-delay: 480ms; }
.ti-route-about .ti-story__beliefs-list li:nth-child(5)::before { transition-delay: 590ms; }

.ti-js .ti-route-about .ti-story__beliefs-list li:not(.is-in)::before,
.ti-js .ti-route-about .ti-story__beliefs-list li:not(.is-in)::after { transform: scaleX(0); }

.ti-route-about .ti-story__belief {
	position: relative;
	display: block;
	transition: transform 450ms var(--ti2-ease);
}

.ti-route-about .ti-story__belief::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 0.66em;
	width: 10px;
	height: 1px;
	background: var(--ti2-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 450ms var(--ti2-ease);
}

.ti-route-about .ti-story__beliefs-list li:hover .ti-story__belief { transform: translateX(16px); }
.ti-route-about .ti-story__beliefs-list li:hover .ti-story__belief::before { transform: scaleX(1); }

.ti-route-about .ti-story__beliefs-faith {
	position: relative;
	border-left: 0;
}

.ti-route-about .ti-story__beliefs-faith::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ti2-gold);
	transform-origin: top center;
	transition: transform 1100ms var(--ti2-ease) 450ms;
}

.ti-js .ti-route-about .ti-story__beliefs-lead-wrap:not(.is-in) .ti-story__beliefs-faith::before { transform: scaleY(0); }

/* The philosophy heading's intro now sits on the belief list's column, so the
   two halves of the section share their edges. */
.ti-route-about .ti-story__practice-head {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(18px, 4vw, 64px);
}

.ti-route-about .ti-story__principle-tick { transition: width 450ms var(--ti2-ease); }
.ti-route-about .ti-story__numeral { transition: color 450ms ease, transform 600ms var(--ti2-ease); }
.ti-route-about .ti-story__principle:hover .ti-story__principle-tick { width: 56px; }

.ti-route-about .ti-story__principle:hover .ti-story__numeral {
	color: rgba(var(--ti2-gold-rgb), 0.36);
	transform: translateY(-4px);
}

@media (min-width: 1100px) {
	.ti-route-about .ti-story__beliefs-lead-wrap {
		position: sticky;
		top: calc(var(--ti-header-h, 69px) + 48px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-about .ti-story__beliefs-list li::before,
	.ti-route-about .ti-story__beliefs-list li::after,
	.ti-route-about .ti-story__beliefs-faith::before {
		transform: none !important;
		transition: none;
	}

	.ti-route-about .ti-story__belief,
	.ti-route-about .ti-story__belief::before,
	.ti-route-about .ti-story__principle-tick,
	.ti-route-about .ti-story__numeral { transition: none; }

	.ti-route-about .ti-story__beliefs-list li:hover .ti-story__belief,
	.ti-route-about .ti-story__principle:hover .ti-story__numeral { transform: none; }
}

/* --------------------------------------------- life beyond the boardroom */

.ti-route-about .ti-story__beyond {
	background: var(--ti2-st-dune);
	padding: clamp(48px, 6vw, 88px) 0;
}

.ti-route-about .ti-story__beyond-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 3vw, 48px);
	align-items: end;
}

.ti-route-about .ti-story__beyond-title {
	margin: 0;
	min-width: 0;
	max-width: 20ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(27px, 3.2vw, 46px);
	line-height: 1.1;
	color: var(--ti2-navy);
}

.ti-route-about .ti-story__beyond-title em { font-style: italic; color: var(--ti2-st-ink); }

.ti-route-about .ti-story__beyond-intro {
	margin: 0;
	min-width: 0;
	max-width: 40ch;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.72;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-about .ti-story__mosaic {
	margin-top: clamp(24px, 3vw, 40px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(14px, 1.8vw, 26px);
}

.ti-route-about .ti-story__principal {
	margin: 0;
	min-width: 0;
	grid-column: span 2;
	align-self: start;
	position: relative;
	border-top: 2px solid var(--ti2-gold);
}

.ti-route-about .ti-story__aside {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.8vw, 24px);
}

.ti-route-about .ti-story__mentoring-figure { margin: 0; border-top: 2px solid var(--ti2-gold); }

.ti-route-about .ti-story__frame {
	position: relative;
	background: var(--ti2-ivory);
	overflow: hidden;
}

.ti-route-about .ti-story__frame--wide { aspect-ratio: 3 / 2; }
.ti-route-about .ti-story__frame--tall { aspect-ratio: 4 / 3; }

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

.ti-route-about .ti-story__frame-rule {
	position: absolute;
	inset: clamp(8px, 1vw, 14px);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
}

.ti-route-about .ti-story__frame-c { position: absolute; left: 0; top: 0; background: var(--ti2-gold); }
.ti-route-about .ti-story__frame-c--h { width: clamp(34px, 4vw, 54px); height: 1px; }
.ti-route-about .ti-story__frame-c--v { width: 1px; height: clamp(34px, 4vw, 54px); }

.ti-route-about .ti-story__frame-num {
	position: absolute;
	left: clamp(18px, 2.2vw, 30px);
	top: clamp(15px, 1.9vw, 25px);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-st-ink);
	font-weight: 600;
}

.ti-route-about .ti-story__frame-note {
	position: absolute;
	right: clamp(18px, 2.2vw, 30px);
	bottom: clamp(15px, 1.9vw, 25px);
	max-width: 22ch;
	text-align: right;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-st-muted);
	font-weight: 600;
}

.ti-route-about .ti-story__frame-await {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	padding: clamp(30px, 3.4vw, 52px);
	text-align: center;
}

.ti-route-about .ti-story__mark--light {
	width: 38px;
	height: 38px;
	margin: 0;
	border-color: rgba(var(--ti2-gold-rgb), 0.7);
	color: var(--ti2-st-ink);
	letter-spacing: 0.06em;
}

.ti-route-about .ti-story__frame-word {
	font-family: var(--ti2-serif);
	font-size: clamp(24px, 2.8vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ti2-st-ink);
}

.ti-route-about .ti-story__frame-dash {
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(var(--ti2-gold-rgb), 0.7);
}

.ti-route-about .ti-story__caption {
	background: var(--ti2-navy);
	border-top: 2px solid var(--ti2-gold);
	padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(8px, 1.6vw, 28px);
	align-items: baseline;
}

.ti-route-about .ti-story__caption-title {
	display: block;
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.2;
	color: var(--ti2-ivory);
}

.ti-route-about .ti-story__caption-body {
	display: block;
	max-width: 46ch;
	font-size: 14.5px;
	line-height: 1.65;
	font-weight: 400;
	color: var(--ti2-ivory);
}

.ti-route-about .ti-story__mentoring { padding-top: clamp(4px, 0.8vw, 10px); }

.ti-route-about .ti-story__aside-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(20px, 1.9vw, 27px);
	line-height: 1.16;
	color: var(--ti2-navy);
}

.ti-route-about .ti-story__aside-body {
	margin: 12px 0 0;
	max-width: 42ch;
	font-size: 15.5px;
	line-height: 1.72;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-about .ti-story__textlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	min-height: 44px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti2-navy);
	text-decoration: none;
}

.ti-route-about .ti-story__textlink span:first-child {
	border-bottom: 1px solid var(--ti2-gold);
	padding-bottom: 5px;
}

.ti-route-about .ti-story__textlink:hover,
.ti-route-about .ti-story__textlink:focus-visible { color: var(--ti2-st-ink); }

.ti-route-about .ti-story__textlink--foot { margin-top: auto; padding-top: clamp(18px, 2vw, 26px); }

.ti-route-about .ti-story__cards {
	margin-top: clamp(26px, 3.2vw, 44px);
	background: var(--ti2-ivory);
	border-top: 2px solid var(--ti2-gold);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: stretch;
}

.ti-route-about .ti-story__card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.2vw, 30px);
	border-right: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
	transition: background 0.55s ease;
}

.ti-route-about .ti-story__card:last-child { border-right: 0; }
.ti-route-about .ti-story__card:hover { background: var(--ti2-st-hover); }

.ti-route-about .ti-story__card-num {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-st-ink);
	font-weight: 600;
}

.ti-route-about .ti-story__card-dash { display: block; width: 22px; height: 1px; background: var(--ti2-gold); }

.ti-route-about .ti-story__card-title {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(20px, 1.9vw, 27px);
	line-height: 1.16;
	color: var(--ti2-navy);
}

.ti-route-about .ti-story__card-body {
	margin: 12px 0 0;
	max-width: 42ch;
	font-size: 15.5px;
	line-height: 1.72;
	font-weight: 400;
	color: var(--ti2-slate);
}

/* The travel moment.

   Story is the warmest page, and this is the one place it is allowed to move.
   The block keeps the section's dune ground and the page's own furniture - the
   card's numeral and dash, the gold top rule, the serif title - and trades the
   card's small box for room: copy on one side, one tall frame on the other,
   alternating with the mosaic above so the section reads as a sequence rather
   than a grid.

   The frame is 4:5, and 5:6 from 860px, where it takes the wider of the two
   columns: the photographs get the width without the frame outgrowing the
   screen. They are portraits, and a portrait frame keeps Tunji whole and the
   place behind him legible; only the height is ever trimmed, and each
   photograph's stored focal point decides where.

   The dissolve is opacity alone - no zoom, no pan - and it passes through the
   frame's ivory rather than laying one photograph over another. A straight
   cross-fade between two photographs of the same man puts two of him in the
   frame for a second, which reads as a double exposure rather than a turn of
   the page. The outgoing photograph fades first; the incoming one follows as
   the first is almost gone. */
.ti-route-about .ti-story__travel {
	margin-top: clamp(44px, 6vw, 96px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: clamp(28px, 4.4vw, 72px);
	align-items: center;
}

.ti-route-about .ti-story__travel + .ti-story__cards { margin-top: clamp(44px, 6vw, 96px); }

.ti-route-about .ti-story__travel-copy { min-width: 0; }

.ti-route-about .ti-story__travel-title {
	margin: clamp(18px, 2vw, 28px) 0 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
}

.ti-route-about .ti-story__travel-body {
	margin: clamp(16px, 1.8vw, 26px) 0 0;
	max-width: 38ch;
	font-size: clamp(16.5px, 1.4vw, 19.5px);
	line-height: 1.8;
	font-weight: 400;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-about .ti-story__travel-figure {
	margin: 0;
	min-width: 0;
	border-top: 2px solid var(--ti2-gold);
}

.ti-route-about .ti-story__travel-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ti2-ivory);
	overflow: hidden;
}

.ti-route-about .ti-story__travel-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ti-crop, 50% 50%);
	display: block;
	opacity: 0;
	transition: opacity 1600ms cubic-bezier(0.45, 0, 0.55, 1);
}

.ti-route-about .ti-story__travel-frame img.is-current {
	opacity: 1;
	transition: opacity 2000ms cubic-bezier(0.45, 0, 0.55, 1) 1300ms;
}

/* The pause control. Discreet, but a real 44px target with a visible focus,
   and withdrawn entirely wherever nothing moves. */
.ti-route-about .ti-story__travel-toggle {
	position: absolute;
	right: clamp(12px, 1.4vw, 18px);
	bottom: clamp(12px, 1.4vw, 18px);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(var(--ti2-ivory-rgb), 0.5);
	background: rgba(var(--ti2-navy-rgb), 0.4);
	color: var(--ti2-ivory);
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.ti-route-about .ti-story__travel-toggle:hover,
.ti-route-about .ti-story__travel-toggle:focus-visible {
	background: rgba(var(--ti2-navy-rgb), 0.74);
	border-color: var(--ti2-gold);
}

.ti-route-about .ti-story__travel-toggle:focus-visible {
	outline: 2px solid var(--ti2-gold);
	outline-offset: 3px;
}

.ti-route-about .ti-story__travel-icon {
	position: relative;
	display: block;
	width: 10px;
	height: 12px;
}

.ti-route-about .ti-story__travel-icon::before,
.ti-route-about .ti-story__travel-icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	background: currentColor;
}

.ti-route-about .ti-story__travel-icon::before { left: 0; }
.ti-route-about .ti-story__travel-icon::after { right: 0; }

.ti-route-about .ti-story__travel-toggle.is-paused .ti-story__travel-icon::before {
	left: 1px;
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

.ti-route-about .ti-story__travel-toggle.is-paused .ti-story__travel-icon::after { display: none; }

@media (min-width: 700px) {
	.ti-route-about .ti-story__travel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

@media (min-width: 860px) {
	.ti-route-about .ti-story__travel-frame { aspect-ratio: 5 / 6; }
}

/* Reduced motion resolves to one strong still, and the control goes with the
   motion it controlled. */
@media (prefers-reduced-motion: reduce) {
	.ti-route-about .ti-story__travel-frame img.ti-story__travel-slide { opacity: 0; transition: none; }
	.ti-route-about .ti-story__travel-frame img.ti-story__travel-slide--still { opacity: 1; z-index: 2; }
	.ti-route-about .ti-story__travel-toggle { display: none !important; }
}

/* The block beside the principal photograph.

   With no photograph of its own it was a small card pinned to the top of a
   tall column, and everything under it read as a gap. Beside the photograph
   it now carries the weight the column gives it: a gold rule, the title at a
   size that answers the photograph, the copy at reading size, set in the
   middle of the photograph's height rather than hung from its top. */
@media (min-width: 860px) {
	.ti-route-about .ti-story__aside {
		align-self: center;
		padding-left: clamp(8px, 1.6vw, 28px);
	}

	.ti-route-about .ti-story__mentoring { padding-top: 0; }

	.ti-route-about .ti-story__mentoring::before {
		content: "";
		display: block;
		width: clamp(40px, 3.6vw, 56px);
		height: 2px;
		margin-bottom: clamp(18px, 2vw, 28px);
		background: var(--ti2-gold);
	}

	.ti-route-about .ti-story__aside-title {
		font-size: clamp(28px, 2.9vw, 44px);
		line-height: 1.08;
	}

	.ti-route-about .ti-story__aside-body {
		margin-top: clamp(14px, 1.6vw, 22px);
		font-size: clamp(16px, 1.3vw, 18.5px);
		line-height: 1.75;
		color: rgba(var(--ti2-navy-rgb), 0.84);
	}
}

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

.ti-route-about .ti-story__closing {
	background: var(--ti2-navy);
	padding: clamp(52px, 6.5vw, 96px) 0 clamp(44px, 5vw, 72px);
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.35);
}

.ti-route-about .ti-story__closing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

/* Astra gives every blockquote an italic, a 5px rule and 20px of padding. The
   export declares none of them here. */
.ti-route-about .ti-story__quote {
	margin: 0;
	min-width: 0;
	border: 0;
	padding: 0;
	position: static;
	font-style: normal;
}

.ti-route-about .ti-story__quote-lead {
	margin: 0;
	max-width: 28ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(25px, 2.9vw, 42px);
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

.ti-route-about .ti-story__quote-coda {
	margin: clamp(16px, 2vw, 26px) 0 0;
	max-width: 26ch;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-size: clamp(19px, 2.1vw, 30px);
	line-height: 1.32;
	color: var(--ti2-gold);
	text-wrap: pretty;
}

.ti-route-about .ti-story__quote-by {
	margin-top: clamp(18px, 2.2vw, 28px);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-dune);
	font-weight: 500;
}

.ti-route-about .ti-story__closing-cta { min-width: 0; justify-self: start; }

.ti-route-about .ti-story__button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 0 30px;
	background: var(--ti2-gold);
	color: var(--ti2-navy);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-route-about .ti-story__button:hover,
.ti-route-about .ti-story__button:focus-visible { background: var(--ti2-ivory); color: var(--ti2-navy); }

/* The close, when it stands alone.

   The button beside the quotation is withheld until its destination exists,
   which left the quotation in the left half of the band and the right half
   empty. When the quotation is the only thing in the grid it becomes the
   page's finale: centred on the band, larger, under a short gold rule, with
   its closing line and attribution beneath it. */
.ti-route-about .ti-story__quote:only-child {
	grid-column: 1 / -1;
	justify-self: center;
	text-align: center;
}

.ti-route-about .ti-story__quote:only-child::before {
	content: "";
	display: block;
	width: clamp(40px, 4vw, 64px);
	height: 2px;
	margin: 0 auto clamp(24px, 2.8vw, 40px);
	background: var(--ti2-gold);
}

.ti-route-about .ti-story__quote:only-child .ti-story__quote-lead {
	max-width: 26ch;
	margin-inline: auto;
	font-size: clamp(28px, 3.7vw, 56px);
	line-height: 1.18;
	text-wrap: balance;
}

.ti-route-about .ti-story__quote:only-child .ti-story__quote-coda {
	max-width: 34ch;
	margin-inline: auto;
	text-wrap: balance;
}

/* ========================================================== 860px and up
   The export's single boundary. The journey gains its rail, and the lessons
   change from an accordion into a list that opens the drawer. */

@media (min-width: 860px) {

	/* The editorial grid.

	   The long read works on three measures that share one centre, the way
	   serious long-form publishing sets a feature: a reading column for the
	   running copy, a wider measure for the opening line and the quotations,
	   and the full shell for the photographs. Every margin is therefore a
	   margin by design. The previous composition hung the heading in a narrow
	   column at the left, the copy in the middle, the quotations on another
	   edge and the photographs to the right - four left edges, and a screen of
	   unused space beside each of them.

	   The coda uses the same lines, so the section closes on the edges it
	   opened on. The hairlines are drawn on the wide measure, not the shell. */
	.ti-route-about .ti-story__journey-head,
	.ti-route-about .ti-story__narrative,
	.ti-route-about .ti-story__journey-coda {
		max-width: none;
		display: grid;
		grid-template-columns:
			[full-start] minmax(0, 1fr)
			[wide-start] minmax(0, 1.2fr)
			[text-start] minmax(0, 42rem)
			[text-end] minmax(0, 1.2fr)
			[wide-end] minmax(0, 1fr) [full-end];
		column-gap: 0;
	}

	.ti-route-about .ti-story__journey-head > * { grid-column: wide-start / wide-end; }

	.ti-route-about .ti-story__journey-title {
		max-width: 30ch;
		font-size: clamp(34px, 3.9vw, 58px);
		line-height: 1.1;
		text-wrap: balance;
	}

	.ti-route-about .ti-story__narrative {
		padding-top: 0;
		border-top: 0;
		row-gap: clamp(26px, 2.4vw, 36px);
	}

	.ti-route-about .ti-story__narrative::before,
	.ti-route-about .ti-story__journey-coda::before {
		content: "";
		grid-column: wide-start / wide-end;
		border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
	}

	.ti-route-about .ti-story__narrative::before { margin-bottom: clamp(6px, 1.2vw, 18px); }

	.ti-route-about .ti-story__movement { grid-column: text-start / text-end; max-width: none; }
	.ti-route-about .ti-story__breakout { grid-column: wide-start / wide-end; }
	.ti-route-about .ti-story__plate    { grid-column: full-start / full-end; margin: clamp(22px, 3.4vw, 60px) 0; }
	.ti-route-about .ti-story__plate--pair .ti-story__plate-frame { aspect-ratio: 5 / 6; }
	.ti-route-about .ti-story__plate:not(.ti-story__plate--await):not(.ti-story__plate--pair) .ti-story__plate-frame { aspect-ratio: 21 / 9; }

	.ti-route-about .ti-story__journey-coda {
		padding-top: 0;
		border-top: 0;
		row-gap: clamp(22px, 2.4vw, 34px);
		align-items: start;
	}

	.ti-route-about .ti-story__coda-copy  { grid-column: text-start / text-end; max-width: none; color: rgba(var(--ti2-navy-rgb), 0.84); }
	.ti-route-about .ti-story__coda-lines { grid-column: text-start / wide-end; font-size: clamp(30px, 3.4vw, 50px); }

	.ti-route-about .ti-story__lesson-cue { display: flex; }
	.ti-route-about .ti-story__lesson-sign { display: none; }

	/* On a wide screen the explanation lives in the drawer, so it is not shown
	   inline. Script moves it; without script it stays visible and readable. */
	.ti-route-about .ti-story-js .ti-story__lesson-body { display: none; }
}

/* The journey below the boundary.

   One column, but the opening line and the quotations still take the whole
   width at a size that belongs to it; held to the desktop measure they sat in
   the left half of a tablet with the right half empty. */
@media (max-width: 859px) {
	.ti-route-about .ti-story__journey-head { max-width: none; }

	.ti-route-about .ti-story__journey-title {
		max-width: 24ch;
		font-size: clamp(28px, 5.4vw, 42px);
		line-height: 1.12;
		text-wrap: balance;
	}

	.ti-route-about .ti-story__breakout p { font-size: clamp(25px, 4.4vw, 36px); }
}

/* Below the boundary the drawer is never used: the accordion is the whole
   interaction, and the explanation opens directly beneath its own lesson. */
@media (max-width: 859px) {
	.ti-route-about .ti-story__lesson-btn { padding: 16px 4px; }
	.ti-route-about .ti-story__lesson-btn:hover { padding-left: 4px; background: none; }
	.ti-route-about .ti-story__lesson-title { font-size: 21px; line-height: 1.3; }
	.ti-route-about .ti-story__lesson-ord { width: auto; }
}

/* Semantic headings that are not display type.

   .ti-story__lesson-head wraps each lesson's button and shows no text of its
   own; .ti-story__register is an uppercase label. Both are h3, so both took the
   global heading face - Newsreader before this migration, Playfair after it.
   Neither is right: they belong to the interface register, and their
   descendants inherit from them. */
.ti-route-about .ti-story__lesson-head,
.ti-route-about .ti-story__register {
	font-family: var(--ti2-sans);
	font-weight: inherit;
	color: inherit;
}

/* ================================================== the journey in motion

   CTO direction, 13 September 2026: the journey should surprise, and its
   photographs should feel alive and afloat. The answer is motion that follows
   the reader rather than a clock, so the long read keeps its calm and nothing
   competes with Travel, which remains the page's only timed change.

   Three ideas, one vocabulary - the gold and the navy this page already uses:

   1. Ink. Each pull quote arrives pale and inks in word by word as it rises
	  up the screen, the way a sentence lands when it is read aloud. Its gold
	  rule draws across with it.
   2. The thread. On wide screens a hairline runs down the outer margin of the
	  account and fills with gold to the reader's eye line, with a small gold
	  bead at its head: a journey, drawn as it is read.
   3. Afloat. The Niger Delta pair becomes an offset composition, the forum
	  portrait large and the group smaller and set lower. As the page scrolls
	  the two frames drift past each other at different speeds, each
	  photograph rises out of its plate on arrival, and while the pair is on
	  screen both float - a slow breath of a few pixels, out of step with each
	  other.

   Everything is keyed to .is-moving, which story.js adds only when the motion
   will run. Without it, and under reduced motion or in print, the section is
   the still composition above, with every word at full ink. */

.ti-route-about .ti-story__thread { display: none; }

/* 1. Ink */
.ti-route-about .is-moving .ti-story__breakout .ti-story__ink {
	opacity: clamp(0.16, calc((var(--ti-q, 0) * (var(--ti-n, 12) + 4) - var(--ti-i, 0)) / 4), 1);
	transition: opacity 140ms linear;
}

.ti-route-about .is-moving .ti-story__breakout::before {
	transform-origin: 0 50%;
	transform: scaleX(calc(0.18 + var(--ti-q, 0) * 0.82));
}

/* 3. Afloat - shared by every width */
@keyframes ti-story-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -11px; }
}

.ti-route-about .ti-story__plate--pair .ti-story__plate-frame {
	--ti-drift: 14;
	box-shadow: 0 36px 70px -46px rgba(var(--ti2-navy-rgb), 0.55);
}

.ti-route-about .ti-story__plate--pair .ti-story__plate-frame + .ti-story__plate-frame { --ti-drift: -18; }

.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame {
	transform: translate3d(0, calc(var(--ti-p, 0) * var(--ti-drift) * 1px), 0);
	animation: ti-story-float 9s ease-in-out infinite paused;
	will-change: transform;
}

.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame + .ti-story__plate-frame {
	animation-duration: 11s;
	animation-delay: -5.5s;
}

.ti-route-about .is-moving .ti-story__plate--pair.is-afloat .ti-story__plate-frame { animation-play-state: running; }

/* Each photograph rises out of its plate once the frame has arrived, and
   settles a little as the page scrolls, so the frame and the picture inside it
   move at two speeds.

   Headroom is protected (CTO review, 13 September 2026: the microphone
   portrait was "too forward" and cut the top of his head). The scale grows
   from the photograph's top edge only, so it can never crop a head, and it is
   gentle - 1.06 settling to 1.02. There is no vertical parallax inside the
   frame: the frames themselves drift and float, which carries the depth. */
.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame img {
	transform-origin: 50% 0;
	scale: calc(1.06 - (var(--ti-p, 0) + 1) * 0.02);
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1500ms cubic-bezier(0.19, 1, 0.22, 1) 220ms;
}

.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame.is-in img { clip-path: inset(0 0 0 0); }

@media (min-width: 860px) {
	.ti-route-about .ti-story__plate--pair {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(28px, 4vw, 72px);
		align-items: start;
		margin-bottom: clamp(44px, 6vw, 110px);
	}

	.ti-route-about .ti-story__plate--pair .ti-story__plate-frame {
		aspect-ratio: 8 / 9;
		--ti-drift: 34;
	}

	.ti-route-about .ti-story__plate--pair .ti-story__plate-frame + .ti-story__plate-frame {
		aspect-ratio: 4 / 5;
		margin-top: clamp(90px, 13vw, 210px);
		--ti-drift: -58;
	}
}

/* 2. The thread - wide screens only, where the outer margin has room for it.
   It sits in the margin column of the editorial grid, so it never touches the
   copy or the quotations, and passes behind the photographs. */
@media (min-width: 1100px) {
	.ti-route-about .ti-story__narrative { position: relative; }

	.ti-route-about .is-moving .ti-story__thread {
		display: block;
		position: absolute;
		grid-column: full-start / wide-start;
		top: clamp(40px, 4vw, 64px);
		bottom: 0;
		right: clamp(32px, 3.4vw, 60px);
		width: 1px;
		background: rgba(var(--ti2-navy-rgb), 0.14);
		pointer-events: none;
	}

	.ti-route-about .is-moving .ti-story__thread::before {
		content: "";
		position: absolute;
		top: 0;
		left: -0.5px;
		width: 2px;
		height: 100%;
		background: var(--ti2-gold);
		transform-origin: 50% 0;
		transform: scaleY(var(--ti-read, 0));
	}

	.ti-route-about .is-moving .ti-story__thread::after {
		content: "";
		position: absolute;
		top: calc(var(--ti-read, 0) * 100%);
		left: -4px;
		width: 9px;
		height: 9px;
		margin-top: -4.5px;
		border-radius: 50%;
		background: var(--ti2-gold);
		box-shadow: 0 0 0 6px rgba(var(--ti2-gold-rgb), 0.18);
	}
}

@media (prefers-reduced-motion: reduce), print {
	.ti-route-about .is-moving .ti-story__breakout .ti-story__ink { opacity: 1; transition: none; }
	.ti-route-about .is-moving .ti-story__breakout::before { transform: none; }

	.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame {
		transform: none;
		animation: none;
	}

	.ti-route-about .is-moving .ti-story__plate--pair .ti-story__plate-frame img {
		scale: none;
		translate: none;
		clip-path: none;
		transition: none;
	}

	.ti-route-about .is-moving .ti-story__thread { display: none; }
}


/* ===================================================== the reading block

   CTO review, 13 September 2026: "I don't like the shape of this." At a 42rem
   measure, 1.85 leading and the lighter ink, each paragraph read as a tall,
   loose stack of grey lines with a saw-toothed right edge. Three shapes were
   rendered on the live page and the wider block was chosen: a 47rem column,
   a step larger, 1.68 leading and a darker ink, so a paragraph reads as one
   calm, solid block with a gentler edge and fewer lines. text-wrap: pretty
   still keeps a lone word off the last line.

   The editorial grid keeps its five lines; only the reading column widens and
   the side measures give it the room. The lede keeps its own size and drop
   capital. Below 860px nothing changes. */
@media (min-width: 860px) {
	.ti-route-about .ti-story__journey-head,
	.ti-route-about .ti-story__narrative,
	.ti-route-about .ti-story__journey-coda {
		grid-template-columns:
			[full-start] minmax(0, 1fr)
			[wide-start] minmax(0, 0.9fr)
			[text-start] minmax(0, 47rem)
			[text-end] minmax(0, 0.9fr)
			[wide-end] minmax(0, 1fr) [full-end];
	}

	.ti-route-about .ti-story__movement:not(:first-of-type) {
		font-size: clamp(18px, 1.45vw, 20.5px);
		line-height: 1.68;
		color: rgba(var(--ti2-navy-rgb), 0.9);
	}

	.ti-route-about .ti-story__coda-copy {
		line-height: 1.68;
		color: rgba(var(--ti2-navy-rgb), 0.9);
	}
}


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

/* The opening portrait bleeds to the viewport edge at every width; it reached
   the edge up to 1360px and stopped 40px short above. */
.ti-route-about .ti-story__portrait-frame {
	right: calc(-1 * (max(0px, (100vw - 1360px) / 2) + clamp(20px, 5vw, 64px)));
}

/* The lesson titles start on one line: below the drawer boundary the ordinal
   was sized to its word, so ONE and THREE pushed each title to its own x. */
@media (max-width: 859px) {
	.ti-route-about .ti-story__lesson-ord { width: 56px; }
}

/* Leadership philosophy: three cards, never two and an orphan. Below the
   width that fits three, they stack, divided by rules rather than by a
   leftover column border. */
@media (max-width: 979.98px) {
	.ti-route-about .ti-story__principles { grid-template-columns: minmax(0, 1fr); }

	.ti-route-about .ti-story__principle {
		border-right: 0;
		border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.16);
	}

	.ti-route-about .ti-story__principle:last-child { border-bottom: 0; }
}

/* Beyond the Work at tablet width: the Legacy text took half a row beside
   nothing, pressed against the Family band. It takes the row and its space. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.ti-route-about .ti-story__aside { grid-column: 1 / -1; }
}

@media (max-width: 899.98px) {
	.ti-route-about .ti-story__aside { margin-top: clamp(14px, 3vw, 28px); }
}

/* Stacked cards on phones: rules between, no column border left on the edge. */
@media (max-width: 559.98px) {
	.ti-route-about .ti-story__card {
		border-right: 0;
		border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
	}

	.ti-route-about .ti-story__card:last-child { border-bottom: 0; }
}

/* The stacked Niger Delta pair keeps a clear gap as the frames drift. */
@media (max-width: 859px) {
	.ti-route-about .ti-story__plate--pair { row-gap: clamp(36px, 10vw, 56px); }
}

/* The reading column never runs past a comfortable measure: at 1024px the
   47rem column was 85-90 characters a line. */
@media (min-width: 860px) {
	.ti-route-about .ti-story__journey-head,
	.ti-route-about .ti-story__narrative,
	.ti-route-about .ti-story__journey-coda {
		grid-template-columns:
			[full-start] minmax(0, 1fr)
			[wide-start] minmax(0, 0.9fr)
			[text-start] minmax(0, min(47rem, 62vw))
			[text-end] minmax(0, 0.9fr)
			[wide-end] minmax(0, 1fr) [full-end];
	}
}

/* Client update 01, 17 September 2026: the Niger Delta photographs, separated.
   Each keeps the portrait frame the pair used, so neither is cut to a face.
   The first breaks right beside its own paragraph and the second breaks left
   two paragraphs later, so the two answer each other down the page instead
   of competing side by side. The selectors carry .ti-story__narrative so they
   outrank the wide plate's 21 / 9 ratio. */
.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo .ti-story__plate-frame {
	aspect-ratio: 4 / 5;
	width: min(100%, 440px);
	box-shadow: 0 36px 70px -46px rgba(var(--ti2-navy-rgb), 0.55);
}

.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--end .ti-story__plate-frame { margin-left: auto; }
.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame { margin-right: auto; }

@media (min-width: 860px) {
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--end { grid-column: text-start / full-end; }
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--start { grid-column: full-start / text-end; }
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo .ti-story__plate-frame { width: min(64%, 440px); }
}

/* Client review, 18 September 2026.

   1. The Story landing photograph is shown whole. The client's new landing
      image is a composed pair - Tunji as a child and today - and cropping it
      to the old portrait frame cut the child's head and the adult's chin. The
      frame now takes the photograph's own proportions instead of imposing one,
      so nothing in it is cut, at every width. It keeps its gold edge and its
      place in the grid; it no longer bleeds past the column.

   2. The separated Niger Delta photographs sit on the reading column. Pushed
      to opposite edges they read as stray objects with empty space beside
      them; centred on the column the text follows, each one reads as part of
      the account it illustrates. Same portrait frame and size for both. */
.ti-route-about .ti-story__portrait {
	align-self: center;
	min-height: 0;
}

.ti-route-about .ti-story__portrait-frame,
.ti-route-about .ti-story__open .ti-story__portrait-frame {
	position: relative;
	inset: auto;
	right: auto;
	display: block;
	padding: 0;
	border-left: 0;
	border-top: 2px solid var(--ti2-gold);
}

.ti-route-about .ti-story__portrait-frame img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--end .ti-story__plate-frame,
.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame {
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 860px) {
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--end,
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--start {
		grid-column: text-start / text-end;
		margin: clamp(28px, 3.4vw, 56px) 0;
	}

	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo .ti-story__plate-frame { width: min(100%, 460px); }
}

/* Client review, 21 September 2026: the Niger Delta group photograph is given a
   cinematic plate of its own.

   The newer frame of the same forum holds five people across, so the narrow
   portrait plate cut the delegates at both ends and left the picture too small
   to read. This one plate now keeps the photograph's own proportions and runs
   wider than the reading column. It is matted on navy with a gold edge, the
   picture settles into the mat as the plate arrives, and the frame breathes
   while it is on screen. The arrival uses the theme's own reveal hook
   ([data-ti-fade] gains .is-in) and the float reuses the journey's keyframes,
   so no new script is loaded and reduced motion still stops everything. The
   first plate of the pair keeps its portrait frame untouched. */
.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame {
	--ti-mat: clamp(10px, 2.2vw, 20px);
	position: relative;
	aspect-ratio: auto;
	width: min(100%, 520px);
	margin-left: auto;
	margin-right: auto;
	padding: var(--ti-mat);
	background: linear-gradient(180deg, rgba(var(--ti2-navy-rgb), 0.97), rgba(var(--ti2-navy-rgb), 0.90));
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.34);
	border-top: 2px solid var(--ti2-gold);
	box-shadow: 0 44px 84px -50px rgba(var(--ti2-navy-rgb), 0.62);
	overflow: hidden;
}

.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* The light that falls across the bottom of the mat, as in the Media reel. */
.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame::after {
	content: "";
	position: absolute;
	inset: var(--ti-mat);
	pointer-events: none;
	background: linear-gradient(180deg, rgba(var(--ti2-navy-rgb), 0) 68%, rgba(var(--ti2-navy-rgb), 0.26) 100%);
}

/* Arrival: the picture settles into the mat. */
.ti-js .ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame img {
	transform: scale(1.045);
	clip-path: inset(3.5% 3.5% 3.5% 3.5%);
	transition: transform 2200ms cubic-bezier(0.19, 1, 0.22, 1) 120ms, clip-path 1700ms cubic-bezier(0.19, 1, 0.22, 1) 120ms;
	will-change: transform, clip-path;
}

.ti-js .ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame.is-in img {
	transform: none;
	clip-path: inset(0 0 0 0);
}

/* And the plate breathes while it is on screen, at the journey's own pace. */
.ti-route-about .is-moving .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame.is-in {
	animation: ti-story-float 13s ease-in-out infinite;
}

@media (min-width: 860px) {
	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--start {
		grid-column: full-start / full-end;
	}

	.ti-route-about .ti-story__narrative .ti-story__plate.ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame {
		width: min(100%, 860px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame,
	.ti-route-about .is-moving .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame.is-in {
		animation: none;
	}

	.ti-js .ti-route-about .ti-story__narrative .ti-story__plate--solo.ti-story__plate--start .ti-story__plate-frame img {
		transform: none;
		clip-path: none;
		transition: none;
	}
}