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

   On the prototype's runtime. Every {{ }} binding in the export resolves to one
   of two values chosen by a single JavaScript media query at 899px - nine
   bindings, all of them layout switches, none of them content. Reproducing that
   in production would mean shipping a script that measures the viewport and
   rewrites inline styles on every resize. A media query does the same job in the
   browser's own layout pass, so this page ships no JavaScript at all. The
   breakpoint below is the export's 899px boundary, expressed as its complement:
   the export's "narrow" is the base here, and min-width:900px is its "wide".

   Everything is scoped under .ti-route-work. The four published routes cannot
   be reached by any rule in this file. */

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

/* Astra styles the page ground at class specificity through
   .ast-plain-container, which outranks a bare body selector - so the route
   class is paired with it rather than used alone. */
.ti-route-work,
.ti-route-work.ast-plain-container {
	background: var(--ti2-paper);
	color: var(--ti2-slate);
	font-family: var(--ti2-sans);
	overflow-x: hidden;
}

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

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

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

.ti-route-work .ti-work__shell {
	max-width: var(--ti2-shell);
	margin: 0 auto;
}

/* Register labels: "01 · The anchor", "My work", "Current appointments". */
.ti-route-work .ti-work__eyebrow {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
}

.ti-route-work .ti-work__title {
	font-family: var(--ti2-serif);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: clamp(12px, 1.6vw, 20px) 0 0;
}

/* Call to action. The underline sits on the inner span so it tracks the text
   rather than the arrow, exactly as the export composes it. */
.ti-route-work .ti-work__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	min-height: 48px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-route-work .ti-work__cta span:first-child {
	padding-bottom: 5px;
	white-space: nowrap;
}

.ti-route-work .ti-work__cta:focus-visible {
	outline: 2px solid var(--ti2-gold-ink);
	outline-offset: 3px;
}

/* Reserved media frames. The export composes every photography slot at its
   final ratio with an editorial empty state, so a real photograph drops in
   later without restructuring anything around it. */
.ti-route-work .ti-work__frame {
	position: relative;
	overflow: hidden;
	min-width: 0;
}

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

.ti-route-work .ti-work__frame-rule {
	position: absolute;
	inset: clamp(10px, 1.2vw, 18px);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.4);
	pointer-events: none;
}

.ti-route-work .ti-work__await {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
}

.ti-route-work .ti-work__await-word {
	font-family: var(--ti2-serif);
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1;
	color: var(--ti2-gold);
}

.ti-route-work .ti-work__await-note {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-dune);
	font-weight: 600;
}

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

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

.ti-route-work .ti-work__rise {
	animation: ti-work-rise var(--ti2-rise) var(--ti2-ease) both;
}

.ti-route-work .ti-work__rise--slow {
	animation-duration: 760ms;
}

.ti-route-work .ti-work__rise--d120 { animation-delay: 120ms; }
.ti-route-work .ti-work__rise--d80  { animation-delay: 80ms; }

@media (prefers-reduced-motion: reduce) {
	.ti-route-work .ti-work__rise {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

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

.ti-route-work .ti-work__open {
	padding: clamp(24px, 2.8vw, 40px) var(--ti2-gutter) clamp(18px, 2.2vw, 30px);
}

.ti-route-work .ti-work__open-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 3.4vw, 56px);
	align-items: end;
}

.ti-route-work .ti-work__register {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ti2-gold-ink);
	font-weight: 600;
}

.ti-route-work .ti-work__register-rule {
	display: block;
	width: clamp(32px, 5vw, 72px);
	height: 1px;
	background: var(--ti2-gold-ink);
}

.ti-route-work .ti-work__h1 {
	margin: 0;
	max-width: 20ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 70px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

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

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

/* ------------------------------------------------- 01 Executive Advisory */

.ti-route-work .ti-work__panel {
	padding: 0 var(--ti2-gutter) clamp(26px, 3.2vw, 48px);
}

.ti-route-work .ti-work__plate {
	position: relative;
	background: var(--ti2-navy);
}

.ti-route-work .ti-work__plate-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

.ti-route-work .ti-work__plate-media {
	min-height: clamp(200px, 22vw, 300px);
	background: var(--ti2-plate);
}

/* A photograph in the Advisory frame. Below the two-column split the frame
   keeps only the empty state's min-height, a 3.4:1 strip at tablet width
   that reduces a standing portrait to face and hands. Only the photographic
   state takes a ratio; the empty state and the desktop split are untouched.
   The photograph itself is taken out of flow, so on wide screens it fills
   the height the text column sets instead of lengthening the panel. */
.ti-route-work .ti-work__plate-media.ti-work__frame--photo img {
	position: absolute;
	inset: 0;
}

.ti-route-work .ti-work__plate-media.ti-work__frame--photo .ti-work__frame-rule {
	z-index: 1;
}

@media (max-width: 899.98px) {
	.ti-route-work .ti-work__plate-media.ti-work__frame--photo {
		aspect-ratio: 4 / 3;
	}
}

.ti-route-work .ti-work__plate-body {
	min-width: 0;
	padding: clamp(26px, 3vw, 52px) clamp(22px, 2.8vw, 48px);
	display: flex;
	flex-direction: column;
}

.ti-route-work .ti-work__plate-body .ti-work__eyebrow { color: var(--ti2-gold); }

.ti-route-work .ti-work__plate-title {
	margin-top: clamp(14px, 1.8vw, 24px);
	font-size: clamp(30px, 3.6vw, 54px);
	color: var(--ti2-ivory);
}

/* The second paragraph takes the same top margin as the first, so prose that
   arrived as two paragraphs is set as two paragraphs without a rule of its
   own. The measure is unchanged. */
.ti-route-work .ti-work__plate-copy {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	max-width: 50ch;
	font-size: clamp(16px, 1.25vw, 17.5px);
	line-height: 1.7;
	font-weight: 400;
	color: var(--ti2-ivory);
}

/* Areas of focus.

   The client names this list and writes each area out in full - "Leadership
   Retreats and Strategic Facilitation" where the export had "Retreats &
   Facilitation". Four names of that length cannot stay uppercase pills: at
   0.1em tracking they run most of the column, so four of them read as four
   dense bars rather than a list, and the eye has to work at the one part of
   this section that should be scannable.

   They keep the gold-ruled treatment and the navy ground; they simply stop
   pretending to be chips. Sentence case at reading size, one per row against a
   gold rule, is the same vocabulary the board roll already uses on the same
   colour - so the two dark sections answer each other, which they should, and
   nothing new is introduced to say it. */
.ti-route-work .ti-work__focus {
	margin-top: clamp(20px, 2.2vw, 30px);
}

.ti-route-work .ti-work__focus-label {
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-dune);
	font-weight: 600;
}

.ti-route-work .ti-work__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.3);
}

.ti-route-work .ti-work__tags li {
	position: relative;
	padding: 10px 0 10px 18px;
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.18);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ti2-ivory);
	font-weight: 400;
}

.ti-route-work .ti-work__tags li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 8px;
	height: 1px;
	background: var(--ti2-gold);
}

.ti-route-work .ti-work__tags li:last-child {
	border-bottom-color: rgba(var(--ti2-gold-rgb), 0.3);
}

.ti-route-work .ti-work__cta--onnavy {
	margin-top: auto;
	padding-top: clamp(22px, 2.6vw, 36px);
	color: var(--ti2-gold);
}

.ti-route-work .ti-work__cta--onnavy span:first-child {
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.7);
}

.ti-route-work .ti-work__cta--onnavy:hover,
.ti-route-work .ti-work__cta--onnavy:focus-visible { color: var(--ti2-ivory); }

.ti-route-work .ti-work__cta--onnavy:focus-visible { outline-color: var(--ti2-gold); }

/* BAAMI bridge */
.ti-route-work .ti-work__bridge {
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
	padding: clamp(16px, 1.8vw, 24px) clamp(22px, 2.8vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 2vw, 30px);
	align-items: center;
}

.ti-route-work .ti-work__bridge p {
	margin: 0;
	min-width: 0;
	max-width: 56ch;
	font-size: 14.5px;
	line-height: 1.62;
	font-weight: 400;
	color: var(--ti2-ivory);
}

.ti-route-work .ti-work__bridge b {
	font-weight: inherit;
	color: var(--ti2-gold);
}

.ti-route-work .ti-work__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	background: var(--ti2-gold);
	color: var(--ti2-navy);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	justify-self: start;
}

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

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

/* --------------------------------------------------------- 02 Speaking */

.ti-route-work .ti-work__stage {
	position: relative;
}

.ti-route-work .ti-work__band {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--ti2-warm);
	overflow: hidden;
}

.ti-route-work .ti-work__band .ti-work__frame-rule {
	border-color: rgba(var(--ti2-navy-rgb), 0.2);
}

.ti-route-work .ti-work__band-note {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: clamp(16px, 2vw, 28px);
}

.ti-route-work .ti-work__band-note p {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-slate);
	font-weight: 600;
}

.ti-route-work .ti-work__card {
	position: relative;
	margin: 0;
	max-width: 100%;
	background: var(--ti2-ivory);
	border-top: 2px solid var(--ti2-gold);
	padding: clamp(24px, 2.8vw, 44px) clamp(20px, 2.4vw, 40px);
}

.ti-route-work .ti-work__card .ti-work__eyebrow { color: var(--ti2-gold-ink); }

.ti-route-work .ti-work__card-title {
	font-size: clamp(30px, 3.6vw, 54px);
	color: var(--ti2-navy);
}

.ti-route-work .ti-work__card-copy {
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	max-width: 54ch;
	font-size: clamp(16px, 1.25vw, 17.5px);
	line-height: 1.7;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-work .ti-work__cta--onlight {
	margin-top: clamp(18px, 2.2vw, 30px);
	color: var(--ti2-navy);
}

.ti-route-work .ti-work__cta--onlight span:first-child {
	border-bottom: 1px solid var(--ti2-gold);
}

.ti-route-work .ti-work__cta--onlight:hover,
.ti-route-work .ti-work__cta--onlight:focus-visible { color: var(--ti2-gold-ink); }

/* ---------------------------------------------------------- 03 Writing */

.ti-route-work .ti-work__panel--writing {
	padding-bottom: clamp(16px, 2vw, 28px);
}

.ti-route-work .ti-work__spread {
	background: var(--ti2-bone);
	border-top: 2px solid var(--ti2-navy);
	padding: clamp(24px, 2.8vw, 44px) clamp(20px, 2.4vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 3vw, 52px);
	align-items: start;
}

.ti-route-work .ti-work__spread .ti-work__eyebrow { color: var(--ti2-muted); }

.ti-route-work .ti-work__spread-title {
	font-size: clamp(28px, 3vw, 44px);
	color: var(--ti2-navy);
}

.ti-route-work .ti-work__spread .ti-work__cta--onlight {
	margin-top: clamp(16px, 2vw, 26px);
}

.ti-route-work .ti-work__pull {
	margin: 0;
	min-width: 0;
	max-width: 32ch;
	font-family: var(--ti2-serif);
	font-size: clamp(19px, 1.8vw, 26px);
	line-height: 1.4;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-work .ti-work__spread-copy {
	margin: 0;
	min-width: 0;
	max-width: 48ch;
	font-size: 15.5px;
	line-height: 1.74;
	font-weight: 400;
	color: var(--ti2-slate);
}

/* ----------------------------------------------------- 04 Board Service */

.ti-route-work .ti-work__panel--board {
	padding-bottom: clamp(34px, 4vw, 64px);
}

.ti-route-work .ti-work__board {
	background: var(--ti2-navy);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

.ti-route-work .ti-work__board-media {
	min-height: clamp(200px, 22vw, 300px);
	background: var(--ti2-plate);
}

.ti-route-work .ti-work__board-media .ti-work__frame-rule {
	inset: clamp(8px, 1vw, 14px);
}

/* The gold tick in the top-left corner of the governance frame. */
.ti-route-work .ti-work__tick {
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(26px, 3vw, 42px);
	height: 2px;
	background: var(--ti2-gold);
}

.ti-route-work .ti-work__board-media .ti-work__await-word {
	font-size: clamp(20px, 2.2vw, 30px);
}

.ti-route-work .ti-work__board-media .ti-work__await {
	gap: 8px;
	padding: 20px;
}

.ti-route-work .ti-work__board-body {
	min-width: 0;
	padding: clamp(24px, 2.8vw, 44px) clamp(20px, 2.4vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.6vw, 44px);
	align-items: start;
}

.ti-route-work .ti-work__board-lead {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ti-route-work .ti-work__board-lead .ti-work__eyebrow { color: var(--ti2-gold); }

.ti-route-work .ti-work__board-title {
	font-size: clamp(28px, 3vw, 44px);
	color: var(--ti2-ivory);
}

.ti-route-work .ti-work__board-copy {
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	max-width: 46ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.7;
	font-weight: 400;
	color: var(--ti2-ivory);
}

.ti-route-work .ti-work__board-lead .ti-work__cta--onnavy {
	margin-top: clamp(18px, 2.2vw, 30px);
	padding-top: 0;
}

.ti-route-work .ti-work__roll-label {
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-dune);
	font-weight: 600;
}

.ti-route-work .ti-work__roll {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(var(--ti2-dune-rgb), 0.22);
}

/* "Trustee of the Foundation for Partnership Initiatives in the Niger Delta"
   is seventy-two characters and is not going to be shortened, so the row is
   built to carry it: a little more type, a little more leading and more air
   between rows, because these names now wrap and a wrapped line needs to stay
   attached to its own entry. */
.ti-route-work .ti-work__roll li {
	padding: 13px 0;
	border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.16);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

.ti-route-work .ti-work__roll li:last-child {
	border-bottom-color: rgba(var(--ti2-dune-rgb), 0.22);
}

/* ============================================================ wide layout
   The export's nine layout bindings, at its own 899px boundary. */

@media (min-width: 900px) {

	.ti-route-work .ti-work__open-grid {
		grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
	}

	.ti-route-work .ti-work__plate-grid {
		grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
	}

	.ti-route-work .ti-work__bridge {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ti-route-work .ti-work__band {
		aspect-ratio: 21 / 8;
	}

	/* The card lifts into the photograph above it. */
	.ti-route-work .ti-work__card {
		margin: -72px 0 0 clamp(24px, 5vw, 88px);
		max-width: min(64ch, 72%);
	}

	.ti-route-work .ti-work__spread {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
	}

	/* Board Service carries roughly twice the copy it used to: two paragraphs
	   instead of one, and three appointments written out in full rather than
	   abbreviated. Splitting the old panel more favourably between its two
	   text columns was not enough - it just moved the problem, taking the body
	   copy down to a thirty-character measure, which is a caption, not prose.

	   So the panel gives the text more of itself. The photograph column yields
	   width it was using generously; the frame stays in proportion because it
	   stretches to the row and the row is now tall. The body copy comes back
	   to a real measure and the appointments still gain room on top of what
	   they had - which is the point, since those names are not negotiable. */
	.ti-route-work .ti-work__board {
		grid-template-columns: minmax(0, 0.30fr) minmax(0, 0.70fr);
	}

	.ti-route-work .ti-work__board-body {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}
}


/* ======================================================= Board portrait

   CTO, 13 September 2026: the reserved "Governance" frame takes the genuine
   blue-suit portrait so nothing is left pending. My Work speaks with
   authority, so the moment is a single, composed one rather than anything
   that keeps moving: the frame arrives on the site's own mask reveal; a navy
   panel draws aside to the right like a door opening onto the portrait; the
   portrait settles from a slight scale; and the gold inner rule traces itself
   in from the top-left corner, where the gold tick already sits. Once.

   The light studio ground of the photograph against the navy panel is left as
   it is - no filter, tint or overlay is applied to the photograph. */
.ti-route-work .ti-work__board-media--photo { background: var(--ti2-navy); }

.ti-route-work .ti-work__board-media--photo img {
	position: absolute;
	inset: 0;
	object-position: var(--ti-crop, 50% 12%);
}

.ti-route-work .ti-work__board-media--photo .ti-work__frame-rule { z-index: 2; }
.ti-route-work .ti-work__board-media--photo .ti-work__tick { z-index: 3; }

/* Below the wide layout the frame is a portrait, not a strip: the reserved
   height was set for a word, and it would cut a person to a band. */
@media (max-width: 899.98px) {
	.ti-route-work .ti-work__board-media--photo {
		aspect-ratio: 4 / 5;
		max-height: 560px;
	}
}

/* The door. */
.ti-js .ti-route-work .ti-work__board-media--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ti2-plate);
	transform-origin: 100% 50%;
	transition: transform 1250ms cubic-bezier(0.77, 0, 0.175, 1) 250ms;
}

.ti-js .ti-route-work .ti-work__board-media--photo.is-in::after { transform: scaleX(0); }

.ti-js .ti-route-work .ti-work__board-media--photo img {
	scale: 1.1;
	transition: scale 2400ms cubic-bezier(0.19, 1, 0.22, 1) 300ms;
}

.ti-js .ti-route-work .ti-work__board-media--photo.is-in img { scale: 1; }

.ti-js .ti-route-work .ti-work__board-media--photo .ti-work__frame-rule {
	clip-path: inset(0 100% 100% 0);
	transition: clip-path 1300ms cubic-bezier(0.65, 0, 0.35, 1) 1250ms;
}

.ti-js .ti-route-work .ti-work__board-media--photo.is-in .ti-work__frame-rule { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce), print {
	.ti-js .ti-route-work .ti-work__board-media--photo::after { display: none; }

	.ti-js .ti-route-work .ti-work__board-media--photo img,
	.ti-js .ti-route-work .ti-work__board-media--photo .ti-work__frame-rule {
		scale: none;
		clip-path: none;
		transition: none;
	}
}


/* ===================================================== Advisory, alive

   CTO, 13 September 2026: "make this section feel alive and dynamic." My Work
   speaks with authority, so the plate performs an arrival and then answers the
   reader, rather than moving on its own:

   - the title resolves from open tracking to its set tracking (wide screens;
	 on narrow ones it would rewrap, so there it only fades up);
   - the two paragraphs rise in turn;
   - the photograph settles and the gold frame rule traces itself in from the
	 top-left corner;
   - "Areas of focus" draws its tracking in, then each area arrives from the
	 left with its gold dash drawing out and a light running once along its
	 rule;
   - on a pointer device a soft gold light follows the cursor across the copy
	 column - never across the photograph - and a hovered area steps in with
	 a longer dash and a gold wash.

   Hidden states are keyed to .is-moving, which work.js adds only when motion
   will run; under reduced motion or in print the plate is the still
   composition. Only opacity, transform, clip-path, letter-spacing on a
   single line, and background move. */

/* Title */
.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 1100ms ease 120ms,
		transform 1300ms cubic-bezier(0.19, 1, 0.22, 1) 120ms,
		letter-spacing 1700ms cubic-bezier(0.19, 1, 0.22, 1) 120ms;
}

.ti-route-work .ti-work__plate.is-live .ti-work__plate-title {
	opacity: 1;
	transform: none;
}

.ti-route-work .ti-work__plate-title::after {
	content: "";
	display: block;
	width: clamp(44px, 4.6vw, 76px);
	height: 2px;
	margin-top: 0.34em;
	background: var(--ti2-gold);
	transform-origin: 0 50%;
}

.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title::after {
	transform: scaleX(0);
	transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 700ms;
}

.ti-route-work .ti-work__plate.is-live .ti-work__plate-title::after { transform: scaleX(1); }

@media (min-width: 900px) {
	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title { letter-spacing: 0.06em; }
	.ti-route-work .ti-work__plate.is-live .ti-work__plate-title { letter-spacing: -0.02em; }
}

/* Copy */
.ti-route-work .ti-work__plate.is-moving .ti-work__plate-copy {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 900ms ease,
		transform 1100ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ti-route-work .ti-work__plate.is-moving .ti-work__plate-copy { transition-delay: 380ms; }
.ti-route-work .ti-work__plate.is-moving .ti-work__plate-copy + .ti-work__plate-copy { transition-delay: 520ms; }

.ti-route-work .ti-work__plate.is-live .ti-work__plate-copy {
	opacity: 1;
	transform: none;
}

/* Photograph and its rule */
.ti-route-work .ti-work__plate.is-moving .ti-work__plate-media.ti-work__frame--photo img {
	scale: 1.1;
	transition: scale 2400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms;
}

.ti-route-work .ti-work__plate.is-live .ti-work__plate-media.ti-work__frame--photo img { scale: 1; }

.ti-route-work .ti-work__plate.is-moving .ti-work__plate-media .ti-work__frame-rule {
	clip-path: inset(0 100% 100% 0);
	transition: clip-path 1400ms cubic-bezier(0.65, 0, 0.35, 1) 600ms;
}

.ti-route-work .ti-work__plate.is-live .ti-work__plate-media .ti-work__frame-rule { clip-path: inset(0 0 0 0); }

/* The light that follows the pointer. It lives in the copy column's own
   stacking context, above the navy and beneath the words. */
.ti-route-work .ti-work__plate-body[data-ti-glow] {
	position: relative;
	isolation: isolate;
}

.ti-route-work .ti-work__plate-body[data-ti-glow]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		clamp(320px, 34vw, 560px) circle at var(--ti-mx, 78%) var(--ti-my, 12%),
		rgba(var(--ti2-gold-rgb), 0.13),
		rgba(var(--ti2-gold-rgb), 0) 65%
	);
	opacity: 0;
	transition: opacity 700ms ease;
}

.ti-route-work .ti-work__plate.is-live .ti-work__plate-body[data-ti-glow]::before { opacity: 0.55; }
.ti-route-work .ti-work__plate.is-live .ti-work__plate-body[data-ti-glow].is-lit::before { opacity: 1; }

/* Areas of focus */
@keyframes ti-work-runlight {
	0%   { transform: scaleX(0); opacity: 1; }
	60%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

.ti-route-work .ti-work__focus.is-moving .ti-work__focus-label {
	opacity: 0;
	letter-spacing: 0.46em;
	transition: opacity 800ms ease, letter-spacing 1200ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ti-route-work .ti-work__focus.is-live .ti-work__focus-label {
	opacity: 1;
	letter-spacing: 0.2em;
}

.ti-route-work .ti-work__tags li {
	background-image: linear-gradient(90deg, rgba(var(--ti2-gold-rgb), 0.12), rgba(var(--ti2-gold-rgb), 0));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 420ms var(--ti2-ease, ease), padding-left 320ms var(--ti2-ease, ease);
}

.ti-route-work .ti-work__tags li::before {
	transform-origin: 0 50%;
	transition: transform 320ms var(--ti2-ease, ease);
}

.ti-route-work .ti-work__tags li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--ti2-gold), rgba(var(--ti2-gold-rgb), 0.2));
	transform-origin: 0 50%;
	transform: scaleX(0);
	opacity: 0;
	pointer-events: none;
}

.ti-route-work .ti-work__focus.is-moving .ti-work__tags li {
	opacity: 0;
	transform: translateX(-16px);
}

.ti-route-work .ti-work__focus.is-moving .ti-work__tags li::before { transform: scaleX(0); }

.ti-route-work .ti-work__focus.is-live .ti-work__tags li {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms ease var(--ti-d, 0ms),
		transform 900ms cubic-bezier(0.19, 1, 0.22, 1) var(--ti-d, 0ms),
		background-size 420ms var(--ti2-ease, ease),
		padding-left 320ms var(--ti2-ease, ease);
}

.ti-route-work .ti-work__focus.is-live .ti-work__tags li::before {
	transform: scaleX(1);
	transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--ti-d, 0ms) + 250ms);
}

.ti-route-work .ti-work__focus.is-live .ti-work__tags li::after {
	animation: ti-work-runlight 1400ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--ti-d, 0ms) + 200ms) both;
}

.ti-route-work .ti-work__tags li:nth-child(1) { --ti-d: 250ms; }
.ti-route-work .ti-work__tags li:nth-child(2) { --ti-d: 380ms; }
.ti-route-work .ti-work__tags li:nth-child(3) { --ti-d: 510ms; }
.ti-route-work .ti-work__tags li:nth-child(4) { --ti-d: 640ms; }
.ti-route-work .ti-work__tags li:nth-child(n+5) { --ti-d: 770ms; }

@media (hover: hover) {
	.ti-route-work .ti-work__tags li:hover {
		background-size: 100% 100%;
		padding-left: 30px;
	}

	.ti-route-work .ti-work__tags li:hover::before { transform: scaleX(2.5); }
}

@media (prefers-reduced-motion: reduce), print {
	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title,
	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-copy,
	.ti-route-work .ti-work__focus.is-moving .ti-work__focus-label,
	.ti-route-work .ti-work__focus.is-moving .ti-work__tags li {
		opacity: 1;
		transform: none;
		letter-spacing: normal;
		transition: none;
	}

	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title { letter-spacing: -0.02em; }
	.ti-route-work .ti-work__focus.is-moving .ti-work__focus-label { letter-spacing: 0.2em; }

	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-title::after,
	.ti-route-work .ti-work__focus.is-moving .ti-work__tags li::before { transform: none; transition: none; }

	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-media.ti-work__frame--photo img { scale: none; transition: none; }
	.ti-route-work .ti-work__plate.is-moving .ti-work__plate-media .ti-work__frame-rule { clip-path: none; transition: none; }

	.ti-route-work .ti-work__tags li::after { animation: none; display: none; }
	.ti-route-work .ti-work__tags li,
	.ti-route-work .ti-work__tags li::before { transition: none; }
}


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

/* Board Service at tablet width: the 4:5 frame capped at 560px tall shrank to
   448px wide inside a 700px panel and left a navy slab beside it. Between
   600px and the wide layout it fills the panel at 4:3, anchored near the top
   so the head is never cut; phones keep 4:5. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.ti-route-work .ti-work__board-media--photo {
		width: 100%;
		max-height: none;
		aspect-ratio: 4 / 3;
	}
}

/* Between 900 and 1199px three columns crushed the copy to a caption measure
   and wrapped every appointment; the appointments follow the copy instead. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.ti-route-work .ti-work__board-body { grid-template-columns: minmax(0, 1fr); }
}

/* Writing to Board Service takes the same interval as every other panel. */
.ti-route-work .ti-work__panel--writing { padding-bottom: clamp(26px, 3.2vw, 48px); }

/* Areas of focus: the gold dash sits on the middle of the first line. */
.ti-route-work .ti-work__tags li::before { top: 20px; }

/* ============================================================ client update 01
   17 September 2026: each institution name links to its official website. The
   appointment still reads as one line; only the institution's words carry a
   gold rule, which brightens on hover and focus. */

.ti-route-work .ti-work__roll-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(var(--ti2-gold-rgb), 0.55);
	text-underline-offset: 4px;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.ti-route-work .ti-work__roll-link:hover,
.ti-route-work .ti-work__roll-link:focus-visible {
	color: var(--ti2-gold);
	text-decoration-color: var(--ti2-gold);
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-work .ti-work__roll-link { transition: none; }
}