/* Tunji Idowu - Ideas & Engagements.
   Ported from "Tunji Idowu Ideas and Engagements.dc.html" and the Ideas Article
   design. Composition, spacing, type scale and colour are the exports' own
   values, transcribed rather than reinterpreted.

   Two boundaries, as the export's runtime uses: 899px for the page's own
   grids, 1099px for the three that hold two columns longer.

   Five presentations, one per content type. They are deliberately unlike each
   other - an essay, a broadcast plate on navy, an engagement on warm grey, a
   message on ivory, a screening room on deep navy - because the page's job is
   to show that this person publishes in five different registers.

   Everything is scoped under .ti-route-ideas, except the article page, which is
   scoped under .ti-article. My Work and Legacy are frozen and share only the
   navy, gold and ink tokens. */

/* The hidden attribute must win.
   Every element this page hides — the dialog, the essay's closing movement, the
   toggle, "load more", search and the filters — also carries a display of its
   own from a class selector at (0,2,0). The browser's own [hidden] rule is
   weaker than that, so without this the dialog renders as a full-screen overlay
   at z-index 80 over a page that looks broken. Declared once, scoped to these
   routes, so no element added later can reintroduce it. */
.ti-route-ideas [hidden],
.ti-route-ti_idea [hidden] {
	display: none !important;
}

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

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

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

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

.ti-route-ideas .ti-ideas__shell {
	max-width: var(--ti2-shell);
	margin: 0 auto;
	padding-left: var(--ti2-gutter);
	padding-right: var(--ti2-gutter);
}

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

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

.ti-route-ideas .ti-ideas__rise {
	animation: ti-ideas-rise 780ms var(--ti2-ease) both;
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__rise,
	.ti-article .ti-article__body {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

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

.ti-route-ideas .ti-ideas__open {
	padding-top: clamp(30px, 4vw, 64px);
	padding-bottom: clamp(24px, 2.8vw, 40px);
}

/* The header photograph.

   A spread rather than a banner: from 900px the title sits top left level with
   the photograph's top edge, the index settles on its bottom edge, and the
   photograph takes the right half in a 5:4 frame - an engagement in progress
   beside the page's name, not a strip above it. On narrow screens it sits
   between the title and the index at 3:2. The ratio holds the space before the
   file arrives, so nothing moves when it does. */
.ti-route-ideas .ti-ideas__header-figure {
	position: relative;
	margin: 0;
	min-width: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ti2-navy);
	border-top: 2px solid var(--ti2-gold);
}

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

/* A closer framing on the person answering, drawn in the frame rather than cut
   into the file: at full frame the nearest heads and the camera body took the
   lower half. Anchored to the top edge, so the banner stays whole and what
   leaves the frame is foreground. The sizes attribute asks for the larger file
   to match, so the photograph is not shown past its own resolution. */
.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure img {
	transform: scale(1.2);
	transform-origin: 56% 0%;
}

@media (min-width: 900px) {
	.ti-route-ideas .ti-ideas__header-figure { aspect-ratio: 5 / 4; }

	/* Doubled class: the page's own two-column masthead rule comes later in the
	   file at the same weight and must not win here. */
	.ti-route-ideas .ti-ideas__open-grid.ti-ideas__open-grid--photo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"copy photo"
			"index photo";
		align-items: start;
		column-gap: clamp(32px, 4.4vw, 72px);
		row-gap: clamp(28px, 3vw, 44px);
	}

	.ti-route-ideas .ti-ideas__open-grid--photo > :first-child { grid-area: copy; }
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure { grid-area: photo; }
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__index { grid-area: index; align-self: end; }
}

.ti-route-ideas .ti-ideas__open-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 56px);
	align-items: end;
}

.ti-route-ideas .ti-ideas__eyebrow {
	margin: 0 0 clamp(12px, 1.6vw, 20px);
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ti2-gold-ink);
	font-weight: 600;
}

.ti-route-ideas .ti-ideas__h1 {
	margin: 0;
	max-width: 24ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(34px, 4.8vw, 76px);
	line-height: 1;
	letter-spacing: -0.028em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

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

.ti-route-ideas .ti-ideas__standfirst-wrap { min-width: 0; max-width: 40ch; }

.ti-route-ideas .ti-ideas__standfirst {
	margin: 0;
	font-size: clamp(15.5px, 1.25vw, 17.5px);
	line-height: 1.68;
	font-weight: 400;
	color: var(--ti2-slate);
}

/* --------------------------------------------------------- family strip */

.ti-route-ideas .ti-ideas__strip {
	position: sticky;
	top: var(--ti-header-h, 69px);
	z-index: 30;
	background: var(--ti2-id-ground);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
}

.ti-route-ideas .ti-ideas__strip-inner {
	position: relative;
	max-width: var(--ti2-shell);
	margin: 0 auto;
	padding: 0 var(--ti2-gutter);
}

.ti-route-ideas .ti-ideas__families {
	list-style: none;
	margin: 0;
	padding: clamp(8px, 1vw, 12px) 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 2.4vw, 44px);
}

.ti-route-ideas .ti-ideas__families a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-navy);
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__families a:hover,
.ti-route-ideas .ti-ideas__families a:focus-visible { color: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__count {
	font-size: 10px;
	font-weight: 500;
	color: var(--ti2-gold-ink);
}

/* Reading progress through the essay. Width is set by script; with none, it
   simply stays at zero and the rule reads as a hairline. */
.ti-route-ideas .ti-ideas__progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 0;
	background: var(--ti2-gold);
}

/* ============================================================= the rooms
   The page is four rooms now, each opening with the client's own headline and
   standfirst. The room head is the same shape every time so the reader learns
   it once; what differs is what the room holds, which is the point. */

.ti-route-ideas .ti-ideas__room {
	padding: clamp(34px, 4.6vw, 76px) 0 0;
}

.ti-route-ideas .ti-ideas__room-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 2vw, 28px);
	padding-bottom: clamp(20px, 2.6vw, 36px);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.18);
}

.ti-route-ideas .ti-ideas__room-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__room-lead {
	min-width: 0;
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
}

.ti-route-ideas .ti-ideas__room-lead p {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__room-standfirst {
	font-size: clamp(16.5px, 1.4vw, 19px) !important;
	line-height: 1.66 !important;
	color: var(--ti2-navy) !important;
}

/* The index. Not decoration: it is what lets the reader see four rooms and
   pick one instead of scrolling through all of them, which is the client's
   crowding note answered before a single record is met.

   Set as a contents index rather than a menu. The whole row is the target and
   the whole row answers to it: the name steps forward, a drawn chevron leads
   out to the right, and a gold hairline sweeps the rule beneath — the way a
   contents page underscores the line you are about to follow. No fill, no card
   and no button, because the moment these become blocks they stop reading as
   an index and start competing with the masthead beside them.

   The numerals hold still while the names move. They are the spine of the
   index; a column of numbers that drifts on hover is a column that has stopped
   being a column. */

.ti-route-ideas .ti-ideas__index {
	min-width: 0;
	align-self: end;
}

.ti-route-ideas .ti-ideas__index-label {
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-muted);
	font-weight: 600;
}

.ti-route-ideas .ti-ideas__index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.18);
}

.ti-route-ideas .ti-ideas__index li {
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.12);
}

/* 44px floor on the row, so the target is a comfortable one on a touch screen
   whatever the type scale does at that width. */
.ti-route-ideas .ti-ideas__index-row {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 1.2vw, 18px);
	min-height: 44px;
	padding: clamp(10px, 1.1vw, 14px) 0;
	text-decoration: none;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__index-row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--ti2-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__index-row:hover::after,
.ti-route-ideas .ti-ideas__index-row:focus-visible::after { transform: scaleX(1); }

.ti-route-ideas .ti-ideas__index-row:focus-visible {
	outline: 2px solid var(--ti2-gold-ink);
	outline-offset: 4px;
}

.ti-route-ideas .ti-ideas__index-num {
	font-family: var(--ti2-serif);
	font-size: 12px;
	color: var(--ti2-gold-ink);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.ti-route-ideas .ti-ideas__index-title {
	min-width: 0;
	font-size: clamp(15px, 1.25vw, 17px);
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--ti2-navy);
	transition: transform 240ms var(--ti2-ease, ease), color 180ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__index-row:hover .ti-ideas__index-title,
.ti-route-ideas .ti-ideas__index-row:focus-visible .ti-ideas__index-title {
	color: var(--ti2-gold-ink);
	transform: translateX(4px);
}

/* Drawn rather than typed, like the disclosure sign: it cannot be read aloud
   and cannot fall back to a glyph from a font the page does not carry. */
.ti-route-ideas .ti-ideas__index-arrow {
	width: 8px;
	height: 8px;
	margin-right: 3px;
	border-top: 1px solid var(--ti2-gold-ink);
	border-right: 1px solid var(--ti2-gold-ink);
	transform: rotate(45deg);
	opacity: 0.5;
	transition: transform 240ms var(--ti2-ease, ease), opacity 240ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__index-row:hover .ti-ideas__index-arrow,
.ti-route-ideas .ti-ideas__index-row:focus-visible .ti-ideas__index-arrow {
	opacity: 1;
	transform: rotate(45deg) translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__index-row::after,
	.ti-route-ideas .ti-ideas__index-title,
	.ti-route-ideas .ti-ideas__index-arrow { transition: none; }

	.ti-route-ideas .ti-ideas__index-row:hover .ti-ideas__index-title,
	.ti-route-ideas .ti-ideas__index-row:focus-visible .ti-ideas__index-title { transform: none; }

	.ti-route-ideas .ti-ideas__index-row:hover .ti-ideas__index-arrow,
	.ti-route-ideas .ti-ideas__index-row:focus-visible .ti-ideas__index-arrow { transform: rotate(45deg); }
}

/* ------------------------------------------------- speaking: the creed */

.ti-route-ideas .ti-ideas__creed {
	margin-top: clamp(22px, 3vw, 44px);
	border-left: 2px solid var(--ti2-gold);
	padding-left: clamp(18px, 2vw, 32px);
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
}

.ti-route-ideas .ti-ideas__creed p {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__creed-lead {
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 2.1vw, 28px) !important;
	line-height: 1.36 !important;
	color: var(--ti2-navy) !important;
	max-width: 34ch !important;
}

/* --------------------------------------------------- the disclosure idiom
   One pattern, used by the speaking topics and the reading groups. The title
   is always visible and is always the button; the body is a region that button
   owns. It is the accordion the Story page already uses, so a reader who has
   been through Story has already learned it.

   The body is visible in the markup and closed by script after load. Without
   script every description and every book is simply present, and the control
   that would do nothing is never shown.

   One open at a time within a group: opening a second topic closes the first.
   Five topics and five shelves left open together put five panels of length
   back into the page, which is the density this treatment exists to take out.
   The groups still do not see each other. */

.ti-route-ideas .ti-ideas__disclosures {
	list-style: none;
	margin: clamp(18px, 2.2vw, 30px) 0 0;
	padding: 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
}

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

.ti-route-ideas .ti-ideas__disclosure-head {
	margin: 0;
	font-family: var(--ti2-sans);
	font-weight: inherit;
	color: inherit;
	font-size: inherit;
}

.ti-route-ideas .ti-ideas__disclosure-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: clamp(14px, 1.6vw, 20px) 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--ti2-navy);
	font-family: inherit;
}

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

.ti-route-ideas .ti-ideas__disclosure-title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--ti2-serif);
	font-size: clamp(19px, 1.9vw, 25px);
	line-height: 1.26;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__disclosure-btn:hover .ti-ideas__disclosure-title { color: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__disclosure-count {
	flex: 0 0 auto;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti2-muted);
	font-weight: 600;
}

/* A plus that becomes a minus. Drawn rather than typed, so it cannot be read
   aloud and cannot pick up a font the rest of the page does not have. */
.ti-route-ideas .ti-ideas__disclosure-sign {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.ti-route-ideas .ti-ideas__disclosure-sign::before,
.ti-route-ideas .ti-ideas__disclosure-sign::after {
	content: "";
	position: absolute;
	background: var(--ti2-gold-ink);
	transition: transform 180ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__disclosure-sign::before {
	left: 0;
	top: 7px;
	width: 15px;
	height: 1px;
}

.ti-route-ideas .ti-ideas__disclosure-sign::after {
	left: 7px;
	top: 0;
	width: 1px;
	height: 15px;
}

.ti-route-ideas .ti-ideas__disclosure.is-open .ti-ideas__disclosure-sign::after { transform: scaleY(0); }

.ti-route-ideas .ti-ideas__disclosure-body {
	padding: 0 0 clamp(18px, 2vw, 26px);
}

.ti-route-ideas .ti-ideas__disclosure-body > p {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__disclosure-sign::before,
	.ti-route-ideas .ti-ideas__disclosure-sign::after { transition: none; }
}

/* --------------------------------------------- speaking: beyond the topic */

.ti-route-ideas .ti-ideas__topics { margin-top: clamp(26px, 3.4vw, 52px); }

.ti-route-ideas .ti-ideas__topics-title,
.ti-route-ideas .ti-ideas__reading-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__topics-intro,
.ti-route-ideas .ti-ideas__reading-intro {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	max-width: 62ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__beyond-topic {
	margin-top: clamp(22px, 2.6vw, 36px);
	background: var(--ti2-id-ground, var(--ti2-bone));
	padding: clamp(20px, 2.4vw, 34px);
}

.ti-route-ideas .ti-ideas__beyond-title {
	margin: 0 0 12px;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.2;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__beyond-topic p {
	margin: 0 0 12px;
	max-width: 64ch;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__beyond-topic p:last-child { margin-bottom: 0; }

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

.ti-route-ideas .ti-ideas__button:hover,
.ti-route-ideas .ti-ideas__button:focus-visible { background: var(--ti2-gold-ink); color: var(--ti2-ivory); }

.ti-route-ideas .ti-ideas__button:focus-visible {
	outline: 2px solid var(--ti2-navy);
	outline-offset: 3px;
}

/* ------------------------------------------------------ the reading list */

.ti-route-ideas .ti-ideas__reading { margin-top: clamp(30px, 3.8vw, 58px); }

.ti-route-ideas .ti-ideas__shelf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(16px, 1.8vw, 24px);
}

.ti-route-ideas .ti-ideas__shelf > li {
	min-width: 0;
	border-left: 1px solid rgba(var(--ti2-gold-rgb), 0.4);
	padding-left: clamp(14px, 1.4vw, 20px);
}

.ti-route-ideas .ti-ideas__shelf-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-size: clamp(16.5px, 1.35vw, 19px);
	line-height: 1.3;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__shelf-note {
	margin: 7px 0 0;
	max-width: 64ch;
	font-size: clamp(14.5px, 1.1vw, 15.5px);
	line-height: 1.7;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

/* ----------------------------------------------------------- the essay */

.ti-route-ideas .ti-ideas__essay {
	border-top: 2px solid var(--ti2-navy);
	background: var(--ti2-id-ground);
	padding: clamp(28px, 3.6vw, 56px) 0 clamp(30px, 4vw, 64px);
}

.ti-route-ideas .ti-ideas__essay-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3.4vw, 64px);
	align-items: start;
}

.ti-route-ideas .ti-ideas__rail {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
}

.ti-route-ideas .ti-ideas__rail-family {
	font-family: var(--ti2-serif);
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1;
	color: var(--ti2-gold-ink);
}

.ti-route-ideas .ti-ideas__rail-format {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-navy);
	border-top: 1px solid var(--ti2-gold);
	padding-top: 10px;
}

.ti-route-ideas .ti-ideas__rail-date {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__essay-body { min-width: 0; }

.ti-route-ideas .ti-ideas__essay-title {
	margin: 0;
	max-width: 26ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(30px, 4.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-ideas .ti-ideas__lead {
	margin: clamp(24px, 3vw, 44px) 0 0;
	padding-left: clamp(14px, 1.6vw, 24px);
	border-left: 2px solid var(--ti2-gold);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ti-route-ideas .ti-ideas__lead p {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 38px);
	line-height: 1.22;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__cue {
	margin: clamp(22px, 2.6vw, 36px) 0 0;
	max-width: 56ch;
	font-size: clamp(16px, 1.25vw, 17.5px);
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-ideas .ti-ideas__observations {
	list-style: none;
	margin: clamp(16px, 2vw, 26px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 1.6vw, 22px) clamp(20px, 3vw, 52px);
}

.ti-route-ideas .ti-ideas__observations li {
	min-width: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding-top: 12px;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
	font-size: 15px;
	line-height: 1.62;
	font-weight: 400;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__tick {
	width: 6px;
	height: 6px;
	margin-top: 8px;
	background: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__microcosm {
	margin: clamp(22px, 2.8vw, 38px) 0 0;
	max-width: 58ch;
	font-size: clamp(16px, 1.25vw, 17.5px);
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-slate);
}

.ti-route-ideas .ti-ideas__pivot {
	margin: clamp(26px, 3.4vw, 52px) 0 0;
	padding: clamp(20px, 2.4vw, 34px) 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
}

.ti-route-ideas .ti-ideas__pivot-cue {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-gold-ink);
	font-weight: 600;
}

/* Astra styles every blockquote italic with a 5px rule and 20px of padding.
   Here the italic is wanted and the rest is not, so the italic is declared and
   the border and padding are cleared explicitly. */
.ti-route-ideas .ti-ideas__pivot-quote,
.ti-article .ti-article__pivot-quote {
	margin: 0;
	border: 0;
	padding: 0;
	position: static;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-ideas .ti-ideas__pivot-quote {
	font-size: clamp(26px, 3.6vw, 54px);
	max-width: 26ch;
}

.ti-route-ideas .ti-ideas__close,
.ti-route-ideas .ti-ideas__rest {
	margin: clamp(20px, 2.6vw, 34px) 0 0;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}

.ti-route-ideas .ti-ideas__close p,
.ti-route-ideas .ti-ideas__rest p {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(16px, 1.25vw, 17.5px);
	line-height: 1.75;
	font-weight: 400;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__beyond {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.4vw, 18px);
}

.ti-route-ideas .ti-ideas__beyond li {
	font-family: var(--ti2-serif);
	font-size: clamp(18px, 1.9vw, 26px);
	line-height: 1.2;
	color: var(--ti2-navy);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__toggle {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	margin-top: clamp(22px, 2.8vw, 38px);
	min-height: 52px;
	padding: 0 30px;
	background: var(--ti2-navy);
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--ti2-ivory);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ti-route-ideas .ti-ideas__toggle:hover,
.ti-route-ideas .ti-ideas__toggle:focus-visible {
	background: var(--ti2-gold-ink);
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__article-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(14px, 1.6vw, 20px);
	min-height: 44px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__article-link:hover,
.ti-route-ideas .ti-ideas__article-link:focus-visible { color: var(--ti2-navy); }

/* --------------------------------------------------- shared calls to action */

.ti-route-ideas .ti-ideas__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__cta--gold {
	margin-top: clamp(18px, 2.2vw, 30px);
	min-height: 50px;
	padding: 0 26px;
	border: 1px solid var(--ti2-gold);
	color: var(--ti2-gold);
}

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

.ti-route-ideas .ti-ideas__cta--navy {
	margin-top: clamp(20px, 2.6vw, 34px);
	min-height: 50px;
	padding: 0 26px;
	background: var(--ti2-navy);
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__cta--navy:hover,
.ti-route-ideas .ti-ideas__cta--navy:focus-visible {
	background: var(--ti2-gold-ink);
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__cta--solid-gold {
	min-height: 50px;
	padding: 0 26px;
	background: var(--ti2-gold);
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__cta--solid-gold:hover,
.ti-route-ideas .ti-ideas__cta--solid-gold:focus-visible {
	background: var(--ti2-ivory);
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__cta--underline {
	min-height: 48px;
	color: var(--ti2-navy);
}

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

.ti-route-ideas .ti-ideas__cta--underline:hover,
.ti-route-ideas .ti-ideas__cta--underline:focus-visible { color: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__quiet {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__quiet:hover,
.ti-route-ideas .ti-ideas__quiet:focus-visible { color: var(--ti2-navy); }

.ti-route-ideas .ti-ideas__quiet--dark { color: rgba(var(--ti2-dune-rgb), 0.8); }

.ti-route-ideas .ti-ideas__quiet--dark:hover,
.ti-route-ideas .ti-ideas__quiet--dark:focus-visible { color: var(--ti2-gold); }

/* ------------------------------------------------- broadcast (media) */

.ti-route-ideas .ti-ideas__broadcast {
	background: var(--ti2-navy);
	padding: clamp(30px, 4vw, 64px) 0;
}

.ti-route-ideas .ti-ideas__broadcast-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(12px, 2vw, 28px);
	padding-bottom: clamp(14px, 1.8vw, 22px);
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
}

.ti-route-ideas .ti-ideas__outlet {
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1;
	color: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__broadcast-format {
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-dune);
}

.ti-route-ideas .ti-ideas__broadcast-date {
	margin-left: auto;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(var(--ti2-dune-rgb), 0.8);
}

.ti-route-ideas .ti-ideas__broadcast-grid {
	margin-top: clamp(18px, 2.4vw, 32px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 52px);
	align-items: end;
}

.ti-route-ideas .ti-ideas__broadcast-title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-ideas .ti-ideas__broadcast-event {
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	max-width: 40ch;
	font-size: 13.5px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--ti2-dune);
	padding-left: 14px;
	border-left: 1px solid rgba(var(--ti2-gold-rgb), 0.8);
}

.ti-route-ideas .ti-ideas__still {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.2vw, 16px);
	position: relative;
	min-width: 0;
	width: 100%;
	height: clamp(190px, 26vw, 300px);
	padding: clamp(16px, 2vw, 26px);
	background: var(--ti2-id-plate);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
	overflow: hidden;
	text-decoration: none;
}

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

.ti-route-ideas .ti-ideas__still-c { position: absolute; background: var(--ti2-gold); }
.ti-route-ideas .ti-ideas__still-c--tl-h { left: clamp(12px,1.4vw,20px); top: clamp(12px,1.4vw,20px); width: clamp(26px,3vw,44px); height: 1px; }
.ti-route-ideas .ti-ideas__still-c--tl-v { left: clamp(12px,1.4vw,20px); top: clamp(12px,1.4vw,20px); width: 1px; height: clamp(26px,3vw,44px); }
.ti-route-ideas .ti-ideas__still-c--br-h { right: clamp(12px,1.4vw,20px); bottom: clamp(12px,1.4vw,20px); width: clamp(26px,3vw,44px); height: 1px; }
.ti-route-ideas .ti-ideas__still-c--br-v { right: clamp(12px,1.4vw,20px); bottom: clamp(12px,1.4vw,20px); width: 1px; height: clamp(26px,3vw,44px); }

.ti-route-ideas .ti-ideas__still-name {
	font-family: var(--ti2-serif);
	font-size: clamp(22px, 2.6vw, 36px);
	line-height: 1;
	color: var(--ti2-ivory);
	text-align: center;
}

.ti-route-ideas .ti-ideas__still-rule { width: clamp(40px, 6vw, 88px); height: 1px; background: var(--ti2-gold); }

.ti-route-ideas .ti-ideas__still-note {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-dune);
	text-align: center;
}

/* --------------------------------------------- engagement (speaking) */

.ti-route-ideas .ti-ideas__engagement {
	background: var(--ti2-id-warm);
	padding: clamp(30px, 4vw, 64px) 0;
}

.ti-route-ideas .ti-ideas__engagement-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3.4vw, 60px);
	align-items: start;
}

.ti-route-ideas .ti-ideas__engagement-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}

.ti-route-ideas .ti-ideas__engagement-meta .ti-ideas__eyebrow {
	margin: 0;
	letter-spacing: 0.24em;
}

.ti-route-ideas .ti-ideas__where {
	margin: 0;
	padding-top: clamp(12px, 1.4vw, 18px);
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.22);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ti2-id-slate2);
}

.ti-route-ideas .ti-ideas__where-name { font-weight: 600; color: var(--ti2-slate); }

.ti-route-ideas .ti-ideas__engagement-date {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__engagement-title {
	margin: 0;
	max-width: 30ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__dest-note {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__session {
	margin-top: clamp(18px, 2.4vw, 32px);
	position: relative;
	width: 100%;
	height: clamp(190px, 26vw, 300px);
	background: var(--ti2-id-session);
	border: 1px solid rgba(var(--ti2-navy-rgb), 0.18);
	overflow: hidden;
}

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

.ti-route-ideas .ti-ideas__session-tick {
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(22px, 2.4vw, 34px);
	height: 2px;
	background: var(--ti2-gold);
	z-index: 1;
}

.ti-route-ideas .ti-ideas__session-note {
	position: absolute;
	left: clamp(12px, 1.4vw, 18px);
	right: clamp(12px, 1.4vw, 18px);
	bottom: clamp(10px, 1.2vw, 16px);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

/* ------------------------------------------------- message (ministry) */

.ti-route-ideas .ti-ideas__message {
	background: var(--ti2-ivory);
	padding: clamp(30px, 4vw, 64px) 0;
}

.ti-route-ideas .ti-ideas__message-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--ti2-gutter);
}

.ti-route-ideas .ti-ideas__message-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold-ink);
}

.ti-route-ideas .ti-ideas__message-rule {
	display: block;
	width: clamp(26px, 3vw, 48px);
	height: 1px;
	background: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__message-title {
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__player {
	display: block;
	position: relative;
	margin-top: clamp(20px, 2.6vw, 36px);
	aspect-ratio: 16 / 9;
	background: var(--ti2-id-poster);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.55);
	overflow: hidden;
}

.ti-route-ideas .ti-ideas__player img,
.ti-route-ideas .ti-ideas__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The poster carries no background-image until script sets one, and it is only
   set when the frame nears the viewport. A reader who never scrolls this far
   makes no request to YouTube at all. */
.ti-route-ideas .ti-ideas__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 40%;
}

.ti-route-ideas .ti-ideas__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--ti2-navy-rgb), 0.12) 0%, rgba(var(--ti2-navy-rgb), 0.55) 100%);
}

.ti-route-ideas .ti-ideas__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(64px, 7vw, 96px);
	height: clamp(64px, 7vw, 96px);
	border: 1px solid rgba(244, 242, 237, 0.9);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(var(--ti2-gold-rgb), 0.92);
	color: var(--ti2-navy);
	font-size: clamp(18px, 2vw, 26px);
}

.ti-route-ideas .ti-ideas__watch-note {
	position: absolute;
	left: clamp(14px, 1.8vw, 26px);
	top: clamp(12px, 1.6vw, 22px);
	padding: 7px 12px;
	background: rgba(var(--ti2-navy-rgb), 0.72);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__message-actions {
	margin-top: clamp(14px, 1.8vw, 24px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 2vw, 28px);
	align-items: center;
}

/* ---------------------------------------------- screening (interview) */

.ti-route-ideas .ti-ideas__screening {
	background: var(--ti2-id-screen);
	padding: clamp(30px, 4vw, 64px) 0;
}

.ti-route-ideas .ti-ideas__screening-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 52px);
	align-items: center;
}

.ti-route-ideas .ti-ideas__frame {
	display: block;
	position: relative;
	min-width: 0;
	aspect-ratio: 16 / 9;
	background: var(--ti2-id-frame);
	overflow: hidden;
}

.ti-route-ideas .ti-ideas__frame .ti-ideas__poster { background-position: center; }

.ti-route-ideas .ti-ideas__frame-scrim {
	position: absolute;
	inset: 0;
	background: rgba(var(--ti2-navy-rgb), 0.42);
}

.ti-route-ideas .ti-ideas__frame-play {
	position: absolute;
	left: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	width: clamp(56px, 6vw, 80px);
	height: clamp(56px, 6vw, 80px);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ti2-gold);
	color: var(--ti2-navy);
	font-size: clamp(16px, 1.8vw, 22px);
}

.ti-route-ideas .ti-ideas__screening-format {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__screening-title {
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	max-width: 22ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 50px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-ideas .ti-ideas__screening-date {
	margin: clamp(12px, 1.6vw, 20px) 0 0;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ti2-dune);
}

.ti-route-ideas .ti-ideas__screening-actions {
	margin-top: clamp(16px, 2.2vw, 28px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 2vw, 26px);
	align-items: center;
}

/* --------------------------------------------------------- the library */

.ti-route-ideas .ti-ideas__library {
	background: var(--ti2-id-warm);
	padding: clamp(30px, 3.8vw, 58px) 0 clamp(34px, 4.2vw, 64px);
}

.ti-route-ideas .ti-ideas__library-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.ti-route-ideas .ti-ideas__library-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__library-count {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__search {
	margin-top: clamp(16px, 2vw, 26px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 2vw, 28px);
	align-items: center;
}

.ti-route-ideas .ti-ideas__search-label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 260px;
	min-width: 0;
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.3);
	padding-bottom: 8px;
}

.ti-route-ideas .ti-ideas__search-label > span {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 36px;
	background: none;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 15px;
	color: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__filters {
	margin-top: clamp(14px, 1.8vw, 22px);
	padding-bottom: clamp(12px, 1.4vw, 18px);
	border-bottom: 2px solid var(--ti2-navy);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.6vw, 26px);
}

.ti-route-ideas .ti-ideas__filters button {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	padding: 0 2px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__filters button > span:first-child {
	padding-bottom: 5px;
	border-bottom: 1px solid transparent;
}

.ti-route-ideas .ti-ideas__filters button[aria-pressed="true"] { color: var(--ti2-navy); }
.ti-route-ideas .ti-ideas__filters button[aria-pressed="true"] > span:first-child { border-bottom-color: var(--ti2-gold); }
.ti-route-ideas .ti-ideas__filters button:hover { color: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__rows { list-style: none; margin: 0; padding: 0; }

.ti-route-ideas .ti-ideas__rows > li { border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.18); }

.ti-route-ideas .ti-ideas__rows a,
.ti-route-ideas .ti-ideas__row-static {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 2vw, 36px);
	align-items: baseline;
	padding: clamp(16px, 1.8vw, 24px) 0;
	color: var(--ti2-navy);
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__rows a:hover,
.ti-route-ideas .ti-ideas__rows a:focus-visible { color: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__row-when { display: flex; flex-direction: column; gap: 6px; }

.ti-route-ideas .ti-ideas__row-date {
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__row-family {
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold-ink);
}

.ti-route-ideas .ti-ideas__row-what { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.ti-route-ideas .ti-ideas__row-title {
	font-family: var(--ti2-serif);
	font-size: clamp(18px, 1.8vw, 26px);
	line-height: 1.18;
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__row-context {
	font-size: 13.5px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--ti2-id-slate2);
}

.ti-route-ideas .ti-ideas__row-cue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-route-ideas .ti-ideas__row-play {
	width: 20px;
	height: 20px;
	border: 1px solid var(--ti2-gold-ink);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--ti2-gold-ink);
	font-size: 8px;
}

.ti-route-ideas .ti-ideas__more {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(20px, 2.4vw, 32px);
	min-height: 52px;
	padding: 0 30px;
	background: var(--ti2-navy);
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--ti2-ivory);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ti-route-ideas .ti-ideas__more:hover,
.ti-route-ideas .ti-ideas__more:focus-visible { background: var(--ti2-gold-ink); }

.ti-route-ideas .ti-ideas__empty {
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	font-size: 14px;
	color: var(--ti2-id-slate2);
}

/* ---------------------------------------------------------- the dialog */

.ti-route-ideas .ti-ideas__dialog {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(9, 18, 28, 0.94);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 20px);
	padding: clamp(16px, 3vw, 44px);
}

.ti-route-ideas .ti-ideas__dialog-head,
.ti-route-ideas .ti-ideas__dialog-frame,
.ti-route-ideas .ti-ideas__dialog-out {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.ti-route-ideas .ti-ideas__dialog-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.ti-route-ideas .ti-ideas__dialog-title {
	margin: 0;
	font-family: var(--ti2-serif);
	font-size: clamp(17px, 1.8vw, 24px);
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__dialog-close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	background: transparent;
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.7);
	color: var(--ti2-dune);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

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

.ti-route-ideas .ti-ideas__dialog-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.4);
}

.ti-route-ideas .ti-ideas__dialog-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ti-route-ideas .ti-ideas__dialog-out {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(var(--ti2-dune-rgb), 0.8);
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__dialog-out:hover,
.ti-route-ideas .ti-ideas__dialog-out:focus-visible { color: var(--ti2-gold); }

/* Scroll is locked while the dialog is open, on both elements: iOS honours one
   and desktop the other. */
.ti-route-ideas.ti-dialog-open,
html.ti-dialog-open { overflow: hidden; }

/* =========================================================== 900px and up */

@media (min-width: 900px) {
	.ti-route-ideas .ti-ideas__open-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

	.ti-route-ideas .ti-ideas__room-head {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(24px, 3vw, 56px);
		align-items: start;
	}

	.ti-route-ideas .ti-ideas__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ti-route-ideas .ti-ideas__essay-grid { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
	.ti-route-ideas .ti-ideas__engagement-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
	.ti-route-ideas .ti-ideas__rows a,
	.ti-route-ideas .ti-ideas__row-static { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 140px); }
}

/* ========================================================== 1100px and up */

@media (min-width: 1100px) {
	.ti-route-ideas .ti-ideas__observations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ti-route-ideas .ti-ideas__broadcast-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.ti-route-ideas .ti-ideas__screening-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ============================================================ the article */

.ti-article { background: var(--ti2-id-ground); }

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

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

.ti-article__progress {
	position: sticky;
	top: 0;
	z-index: 30;
	height: 2px;
	background: rgba(var(--ti2-navy-rgb), 0.12);
}

.ti-article__progress span { display: block; height: 2px; width: 0; background: var(--ti2-gold); }

.ti-article__body {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 64px) var(--ti2-gutter) clamp(34px, 4.4vw, 72px);
	animation: ti-ideas-rise 780ms var(--ti2-ease) both;
}

.ti-article__crumbs {
	margin: 0 0 clamp(16px, 2vw, 26px);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-muted);
}

.ti-article__crumbs a { color: var(--ti2-muted); text-decoration: none; }
.ti-article__crumbs a:hover { color: var(--ti2-navy); }
.ti-article__crumbs span { color: var(--ti2-gold); }

.ti-article__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ti2-gold-ink);
}

.ti-article__rule { display: block; width: clamp(26px, 3vw, 48px); height: 1px; background: var(--ti2-gold); }

.ti-article__title {
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(32px, 4.6vw, 64px);
	line-height: 1.03;
	letter-spacing: -0.025em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-article__byline {
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	padding: clamp(14px, 1.6vw, 20px) 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
}

.ti-article__byline p { margin: 0; font-size: 12.5px; letter-spacing: 0.06em; color: var(--ti2-id-slate2); }
.ti-article__byline span { font-weight: 600; color: var(--ti2-navy); }

.ti-article__lead {
	margin: clamp(26px, 3.2vw, 46px) 0 0;
	padding-left: clamp(14px, 1.6vw, 24px);
	border-left: 2px solid var(--ti2-gold);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ti-article__lead p {
	margin: 0;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.2;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-article__para {
	margin: clamp(24px, 2.8vw, 38px) 0 0;
	font-size: clamp(16.5px, 1.3vw, 18.5px);
	line-height: 1.78;
	font-weight: 400;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-article__list {
	list-style: none;
	margin: clamp(16px, 2vw, 26px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 16px);
}

.ti-article__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
	padding-top: 12px;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-article__tick { width: 6px; height: 6px; margin-top: 9px; background: var(--ti2-gold); }

.ti-article__pivot {
	margin: clamp(28px, 3.4vw, 52px) 0 0;
	padding: clamp(20px, 2.4vw, 34px) 0;
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
	border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.2);
}

.ti-article__pivot-cue {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-gold-ink);
	font-weight: 600;
}

.ti-article .ti-article__pivot-quote { font-size: clamp(28px, 3.8vw, 54px); }

.ti-article__beyond {
	list-style: none;
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.4vw, 18px);
}

.ti-article__beyond li {
	font-family: var(--ti2-serif);
	font-size: clamp(19px, 2vw, 28px);
	line-height: 1.2;
	color: var(--ti2-navy);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ti2-gold);
}

.ti-article__foot {
	margin: clamp(30px, 3.8vw, 56px) 0 0;
	padding-top: clamp(18px, 2.2vw, 28px);
	border-top: 2px solid var(--ti2-navy);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 2vw, 28px);
	align-items: baseline;
	justify-content: space-between;
}

.ti-article__foot p { margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.65; color: var(--ti2-id-slate2); }

.ti-article__back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	padding: 0 26px;
	background: var(--ti2-navy);
	color: var(--ti2-ivory);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-article__back:hover,
.ti-article__back:focus-visible { background: var(--ti2-gold-ink); color: var(--ti2-ivory); }


/* ===================================================== the masthead, opened

   CTO review, 13 September 2026: "the header is dry and below what you can
   do." The composition stays - title and index left, the engagement
   photograph right - and it now opens as one orchestrated sequence, the page's
   first impression of intellect in motion rather than a still arrangement:

	 150ms   the upright words rise in turn from behind their own line
	 250ms   a navy curtain lifts off the photograph; the photograph settles
	 420ms   "Engagements" is written in from the left, in its gold italic
	1250ms   a gold stroke draws beneath it
	1300ms   an offset gold outline draws in behind the photograph
	1000ms+  the index label, then each row, arrive in turn

   On wide screens the title is set larger, so the name holds its half of the
   spread instead of floating above an empty band. On a pointer device the
   photograph shifts a few pixels against the cursor (ideas.js). The index
   rows gain a gold wash, and the numeral lifts, on hover or focus.

   Everything runs once, in CSS; under reduced motion none of it runs and the
   masthead is exactly the still spread. Only transform, opacity, clip-path and
   box-shadow move, so nothing reflows while it plays. */

.ti-route-ideas .ti-ideas__open { --ti-off: clamp(10px, 1.3vw, 18px); }

@keyframes ti-ideas-word    { from { transform: translateY(112%); } to { transform: none; } }
@keyframes ti-ideas-write   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ti-ideas-stroke  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ti-ideas-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ti-ideas-settle  { from { scale: 1.12; } to { scale: 1; } }
@keyframes ti-ideas-fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ti-ideas-row     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@keyframes ti-ideas-outline {
	from { box-shadow: 0 0 0 -1px var(--ti2-id-ground), 0 0 0 0 rgba(var(--ti2-gold-rgb), 0); }
	to   { box-shadow: var(--ti-off) var(--ti-off) 0 -1px var(--ti2-id-ground), var(--ti-off) var(--ti-off) 0 0 rgba(var(--ti2-gold-rgb), 0.75); }
}

/* The headline. Each upright word is a mask with its word inside; the mask is
   padded so descenders and the ampersand's tail are never clipped. */
.ti-route-ideas .ti-ideas__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0 0.04em 0.16em;
	margin: 0 -0.04em -0.16em;
}

.ti-route-ideas .ti-ideas__word > span {
	display: inline-block;
	animation: ti-ideas-word 1000ms cubic-bezier(0.19, 1, 0.22, 1) both;
	animation-delay: calc(150ms + var(--ti-i, 0) * 110ms);
}

.ti-route-ideas .ti-ideas__accent {
	position: relative;
	display: inline-block;
}

.ti-route-ideas .ti-ideas__accent > span {
	display: inline-block;
	padding: 0 0.14em 0.18em 0.06em;
	margin: 0 -0.14em -0.18em -0.06em;
	animation: ti-ideas-write 1150ms cubic-bezier(0.77, 0, 0.175, 1) 420ms both;
}

.ti-route-ideas .ti-ideas__accent::after {
	content: "";
	position: absolute;
	left: 0.04em;
	right: 0.1em;
	bottom: -0.02em;
	height: 2px;
	background: var(--ti2-gold);
	transform-origin: 0 50%;
	animation: ti-ideas-stroke 900ms cubic-bezier(0.65, 0, 0.35, 1) 1250ms both;
}

/* The photograph: curtain, settle, outline. The frame keeps its own
   overflow clipping - an element's box-shadow is drawn outside its box and is
   not clipped by its own overflow, so the offset outline needs nothing more. */
.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure {
	animation: ti-ideas-outline 900ms cubic-bezier(0.65, 0, 0.35, 1) 1300ms both;
}

.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--ti2-navy);
	transform-origin: 50% 0;
	animation: ti-ideas-curtain 1300ms cubic-bezier(0.77, 0, 0.175, 1) 250ms both;
}

.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure img {
	z-index: 1;
	animation: ti-ideas-settle 2400ms cubic-bezier(0.19, 1, 0.22, 1) 250ms both;
}

/* Depth on a pointer device. Horizontal both ways; vertical only upwards,
   because the frame is anchored to the photograph's top edge. */
.ti-route-ideas .ti-ideas__open.is-pointer .ti-ideas__header-figure img {
	translate: calc(var(--ti-px, 0) * -14px) calc((var(--ti-py, 0) + 1) * -5px);
	transition: translate 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* The index arrives after the title. */
.ti-route-ideas .ti-ideas__open .ti-ideas__index-label {
	animation: ti-ideas-fadein 700ms ease 950ms both;
}

.ti-route-ideas .ti-ideas__open .ti-ideas__index li {
	animation: ti-ideas-row 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.ti-route-ideas .ti-ideas__open .ti-ideas__index li:nth-child(1) { animation-delay: 1050ms; }
.ti-route-ideas .ti-ideas__open .ti-ideas__index li:nth-child(2) { animation-delay: 1150ms; }
.ti-route-ideas .ti-ideas__open .ti-ideas__index li:nth-child(3) { animation-delay: 1250ms; }
.ti-route-ideas .ti-ideas__open .ti-ideas__index li:nth-child(4) { animation-delay: 1350ms; }
.ti-route-ideas .ti-ideas__open .ti-ideas__index li:nth-child(n+5) { animation-delay: 1450ms; }

/* Richer index rows: a gold wash runs in behind the row and the numeral lifts. */
.ti-route-ideas .ti-ideas__index-row {
	background-image: linear-gradient(90deg, rgba(var(--ti2-gold-rgb), 0.14), rgba(var(--ti2-gold-rgb), 0));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 420ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__index-num {
	display: inline-block;
	transform-origin: 0 60%;
	transition: transform 320ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__index-row:hover,
.ti-route-ideas .ti-ideas__index-row:focus-visible { background-size: 100% 100%; }

.ti-route-ideas .ti-ideas__index-row:hover .ti-ideas__index-num,
.ti-route-ideas .ti-ideas__index-row:focus-visible .ti-ideas__index-num { transform: scale(1.5); }

/* Wide screens: the name holds its half of the spread. */
@media (min-width: 900px) {
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__h1 {
		font-size: clamp(56px, 6.4vw, 100px);
		line-height: 0.98;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__word > span,
	.ti-route-ideas .ti-ideas__accent > span,
	.ti-route-ideas .ti-ideas__accent::after,
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure,
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure img,
	.ti-route-ideas .ti-ideas__open .ti-ideas__index-label,
	.ti-route-ideas .ti-ideas__open .ti-ideas__index li {
		animation: none;
	}

	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure {
		box-shadow: var(--ti-off) var(--ti-off) 0 -1px var(--ti2-id-ground), var(--ti-off) var(--ti-off) 0 0 rgba(var(--ti2-gold-rgb), 0.75);
	}

	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure::after { display: none; }

	.ti-route-ideas .ti-ideas__index-row,
	.ti-route-ideas .ti-ideas__index-num { transition: none; }
}


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

/* "Inquire about speaking" had no space below it before the next band. */
.ti-route-ideas .ti-ideas__room--speaking .ti-ideas__button { margin-bottom: clamp(40px, 5vw, 76px); }

/* "Beyond the Topic" was inset with no visible reason; the inset now belongs
   to a gold rule, as the page's pull-quote does. */
.ti-route-ideas .ti-ideas__beyond-topic { border-left: 2px solid rgba(var(--ti2-gold-rgb), 0.6); }

/* The essay's two actions no longer sit 4px apart when they share a line. */
.ti-route-ideas .ti-ideas__toggle { margin-right: clamp(18px, 2.4vw, 32px); }

/* Books & Reading ends with room before the footer. */
.ti-route-ideas .ti-ideas__room--books { padding-bottom: clamp(48px, 6vw, 96px); }

/* Video posters: YouTube's standard thumbnail is a 4:3 image with black bars
   around 16:9 footage. Centred and drawn slightly larger than the 16:9 frame,
   the bars fall outside it. */
.ti-route-ideas .ti-ideas__player .ti-ideas__poster {
	inset: -3%;
	background-position: center;
}

/* On phones the play control moves to the corner, off the speaker's face, and
   the format label is smaller. */
@media (max-width: 599.98px) {
	.ti-route-ideas .ti-ideas__player .ti-ideas__play {
		left: auto;
		top: auto;
		right: 12px;
		bottom: 12px;
		transform: none;
		width: 52px;
		height: 52px;
		font-size: 16px;
	}

	.ti-route-ideas .ti-ideas__watch-note {
		padding: 5px 9px;
		font-size: 9px;
		letter-spacing: 0.16em;
	}
}

/* The masthead photograph's offset outline is drawn outside its box, so it
   takes no space; below the spread it keeps clear of the index beneath. */
@media (max-width: 899.98px) {
	.ti-route-ideas .ti-ideas__open-grid--photo .ti-ideas__header-figure { margin-bottom: calc(var(--ti-off) + 10px); }
}


/* ==========================================================================
   Media, redesigned (client review, 18 September 2026)
   Two fixed pieces whose height no longer grows with the archive: the reel of
   event photographs, and the screening room - one screen and a list of every
   recording beside it. See template-parts/ideas/room-media.php.
   ========================================================================== */

/* ---------------------------------------------------------------- the reel
   Each photograph is shown whole, matted on navy, never cut to fit the frame:
   these are genuine event photographs and every person in them stays in them.
   One at a time, dissolving slowly into the next, with a slight settle. */
.ti-route-ideas .ti-ideas__reel {
	margin: clamp(26px, 3.2vw, 48px) 0 0;
	background: var(--ti2-navy);
	border-top: 2px solid var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__reel-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ti2-navy);
}

.ti-route-ideas .ti-ideas__reel-frame img {
	position: absolute;
	inset: clamp(10px, 1.6vw, 24px);
	width: calc(100% - 2 * clamp(10px, 1.6vw, 24px));
	height: calc(100% - 2 * clamp(10px, 1.6vw, 24px));
	object-fit: contain;
	display: block;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 1400ms cubic-bezier(0.45, 0, 0.55, 1), transform 1400ms ease;
}

.ti-route-ideas .ti-ideas__reel-frame img.is-current {
	opacity: 1;
	transform: scale(1);
	transition: opacity 1600ms cubic-bezier(0.45, 0, 0.55, 1) 500ms, transform 8000ms cubic-bezier(0.22, 0.61, 0.36, 1) 500ms;
}

.ti-route-ideas .ti-ideas__reel-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 60px;
	padding: 8px clamp(14px, 1.8vw, 26px);
	border-top: 1px solid rgba(var(--ti2-dune-rgb), 0.14);
}

.ti-route-ideas .ti-ideas__reel-caption {
	min-width: 0;
	flex: 1 1 260px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: rgba(var(--ti2-dune-rgb), 0.82);
}

.ti-route-ideas .ti-ideas__reel-controls {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.ti-route-ideas .ti-ideas__reel-controls[hidden] { display: none; }

.ti-route-ideas .ti-ideas__reel-count {
	margin-right: 10px;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	color: var(--ti2-gold);
	font-variant-numeric: tabular-nums;
}

.ti-route-ideas .ti-ideas__reel-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(var(--ti2-dune-rgb), 0.34);
	background: transparent;
	color: var(--ti2-ivory);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 200ms ease, color 200ms ease;
}

.ti-route-ideas .ti-ideas__reel-btn:hover,
.ti-route-ideas .ti-ideas__reel-btn:focus-visible {
	border-color: var(--ti2-gold);
	color: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__reel-btn:focus-visible {
	outline: 2px solid var(--ti2-gold);
	outline-offset: 3px;
}

.ti-route-ideas .ti-ideas__reel-btn[hidden] { display: none; }

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

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

.ti-route-ideas .ti-ideas__reel-icon::before { left: 0; }
.ti-route-ideas .ti-ideas__reel-icon::after { right: 0; }

.ti-route-ideas .ti-ideas__reel-toggle.is-paused .ti-ideas__reel-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-ideas .ti-ideas__reel-toggle.is-paused .ti-ideas__reel-icon::after { display: none; }

@media (max-width: 599.98px) {
	.ti-route-ideas .ti-ideas__reel-frame { aspect-ratio: 4 / 3; }
	.ti-route-ideas .ti-ideas__reel-caption { flex-basis: 100%; }
	.ti-route-ideas .ti-ideas__reel-controls { margin-left: 0; }
}

/* ------------------------------------------------------- screening room
   A navy band: the screen on the left, every recording listed on the right.
   The list scrolls inside itself, so the band is the same height whether it
   holds five recordings or fifty. */
.ti-route-ideas .ti-ideas__screen {
	margin-top: clamp(40px, 5vw, 80px);
	padding: clamp(36px, 4.6vw, 72px) 0;
	background: var(--ti2-navy);
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__screen-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 3vw, 48px);
	align-items: start;
}

.ti-route-ideas .ti-ideas__stage { min-width: 0; transition: opacity 260ms ease; }
.ti-route-ideas .ti-ideas__stage.is-changing { opacity: 0.35; }

.ti-route-ideas .ti-ideas__stage-player {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ti2-plate);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.55);
	overflow: hidden;
}

.ti-route-ideas .ti-ideas__stage-poster {
	position: absolute;
	inset: -3%;
	background-size: cover;
	background-position: center;
}

.ti-route-ideas .ti-ideas__stage-outlet {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	padding: 24px;
	font-family: var(--ti2-serif);
	font-size: clamp(30px, 3.4vw, 52px);
	line-height: 1.1;
	text-align: center;
	color: var(--ti2-ivory);
	background: linear-gradient(135deg, var(--ti2-plate) 0%, var(--ti2-navy-2) 100%);
}

.ti-route-ideas .ti-ideas__stage-player--feature .ti-ideas__stage-outlet { display: grid; }
.ti-route-ideas .ti-ideas__stage-player--feature .ti-ideas__play,
.ti-route-ideas .ti-ideas__stage-player--feature .ti-ideas__scrim { display: none; }

.ti-route-ideas .ti-ideas__stage-player:hover .ti-ideas__play,
.ti-route-ideas .ti-ideas__stage-player:focus-visible .ti-ideas__play { background: var(--ti2-ivory); }

.ti-route-ideas .ti-ideas__stage-copy { padding-top: clamp(18px, 2vw, 28px); }

.ti-route-ideas .ti-ideas__stage-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-gold);
}

.ti-route-ideas .ti-ideas__stage-rule {
	width: 28px;
	height: 1px;
	background: rgba(var(--ti2-gold-rgb), 0.7);
}

.ti-route-ideas .ti-ideas__stage-title {
	margin: 12px 0 0;
	max-width: 24ch;
	font-family: var(--ti2-serif);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-ideas .ti-ideas__stage-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	margin: clamp(16px, 1.8vw, 24px) 0 0;
}

.ti-route-ideas .ti-ideas__stage-action,
.ti-route-ideas .ti-ideas__stage-out {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.ti-route-ideas .ti-ideas__stage-action {
	color: var(--ti2-gold);
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.6);
}

.ti-route-ideas .ti-ideas__stage-out { color: rgba(var(--ti2-dune-rgb), 0.78); }
.ti-route-ideas .ti-ideas__stage-out[hidden] { display: none; }

.ti-route-ideas .ti-ideas__stage-action:hover,
.ti-route-ideas .ti-ideas__stage-action:focus-visible,
.ti-route-ideas .ti-ideas__stage-out:hover,
.ti-route-ideas .ti-ideas__stage-out:focus-visible { color: var(--ti2-ivory); border-color: var(--ti2-ivory); }

/* The list. */
.ti-route-ideas .ti-ideas__playlist { min-width: 0; }

.ti-route-ideas .ti-ideas__playlist-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--ti2-dune-rgb), 0.72);
}

.ti-route-ideas .ti-ideas__playlist-count {
	color: var(--ti2-gold);
	font-variant-numeric: tabular-nums;
}

.ti-route-ideas .ti-ideas__playlist-list {
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--ti2-gold-rgb), 0.6) transparent;
	overscroll-behavior: contain;
}

.ti-route-ideas .ti-ideas__pick-row { margin: 0; scroll-margin-top: calc(var(--ti-header-h, 89px) + 24px); }

.ti-route-ideas .ti-ideas__pick {
	position: relative;
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 14px 10px 14px 14px;
	border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.12);
	color: var(--ti2-dune);
	text-decoration: none;
	transition: background-color 200ms ease;
}

.ti-route-ideas .ti-ideas__pick::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--ti2-gold);
	transform: scaleY(0);
	transition: transform 260ms var(--ti2-ease, ease);
}

.ti-route-ideas .ti-ideas__pick:hover,
.ti-route-ideas .ti-ideas__pick:focus-visible { background: rgba(var(--ti2-ivory-rgb), 0.05); }

.ti-route-ideas .ti-ideas__pick:focus-visible {
	outline: 2px solid var(--ti2-gold);
	outline-offset: -2px;
}

.ti-route-ideas .ti-ideas__pick.is-current::before { transform: scaleY(1); }

.ti-route-ideas .ti-ideas__pick-thumb {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background-color: var(--ti2-plate);
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(var(--ti2-dune-rgb), 0.16);
	overflow: hidden;
}

.ti-route-ideas .ti-ideas__pick.is-current .ti-ideas__pick-thumb { border-color: var(--ti2-gold); }

.ti-route-ideas .ti-ideas__pick-play {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(var(--ti2-gold-rgb), 0.92);
	color: var(--ti2-navy);
	font-size: 10px;
}

.ti-route-ideas .ti-ideas__pick-thumb--feature {
	background: linear-gradient(135deg, var(--ti2-plate) 0%, var(--ti2-navy-2) 100%);
}

.ti-route-ideas .ti-ideas__pick-outlet {
	padding: 0 8px;
	font-family: var(--ti2-serif);
	font-size: 14px;
	line-height: 1.15;
	text-align: center;
	color: var(--ti2-ivory);
}

.ti-route-ideas .ti-ideas__pick-text { display: grid; gap: 6px; min-width: 0; }

.ti-route-ideas .ti-ideas__pick-meta {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--ti2-gold-rgb), 0.9);
}

.ti-route-ideas .ti-ideas__pick-title {
	font-family: var(--ti2-serif);
	font-size: 17px;
	line-height: 1.28;
	color: var(--ti2-dune);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__pick.is-current .ti-ideas__pick-title { color: var(--ti2-ivory); }

/* Wide: the screen and the list side by side, the list held to the screen's
   height and scrolling within it. */
@media (min-width: 1000px) {
	.ti-route-ideas .ti-ideas__screen-grid {
		grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr);
	}

	.ti-route-ideas .ti-ideas__playlist-list {
		max-height: clamp(360px, 33vw, 520px);
		overflow-y: auto;
	}
}

/* Narrow: the list becomes a row to swipe through, a card and a half wide,
   so it is plain there is more to the side. */
@media (max-width: 999.98px) {
	.ti-route-ideas .ti-ideas__playlist-list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(210px, 58%);
		gap: 14px;
		overflow-x: auto;
		padding: 16px 0 12px;
		scroll-snap-type: x mandatory;
	}

	.ti-route-ideas .ti-ideas__pick-row { scroll-snap-align: start; }

	.ti-route-ideas .ti-ideas__pick {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		padding: 0 0 12px;
		border-bottom: 0;
	}

	.ti-route-ideas .ti-ideas__pick::before {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: 2px;
		transform: scaleX(0);
	}

	.ti-route-ideas .ti-ideas__pick.is-current::before { transform: scaleX(1); }

	.ti-route-ideas .ti-ideas__pick:hover,
	.ti-route-ideas .ti-ideas__pick:focus-visible { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__reel-frame img,
	.ti-route-ideas .ti-ideas__reel-frame img.is-current { transition: none; transform: none; }

	.ti-route-ideas .ti-ideas__stage,
	.ti-route-ideas .ti-ideas__pick,
	.ti-route-ideas .ti-ideas__pick::before,
	.ti-route-ideas .ti-ideas__reel-btn { transition: none; }
}

/* Client review, 18 September 2026: the reel fills its frame.
   Matted on navy, the photographs sat inside empty side panels and the frame
   stood taller than the page needed. Each photograph now fills a cinematic
   frame, anchored a little above centre so faces stay in view in all five,
   and settles slowly while it is shown. The frame relaxes to 16:9 on tablets
   and 4:3 on phones, where the width is narrower. */
.ti-route-ideas .ti-ideas__reel-frame { aspect-ratio: 21 / 9; }

.ti-route-ideas .ti-ideas__reel-frame img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Client review, 27 September 2026: each photograph carries its own focal
	   point. A frame this wide crops a landscape photograph hard on a phone,
	   and the centre is not always where the people are - the reception
	   photograph lost the guest on the right. The reel now reads the focal
	   point stored on the attachment (_ti_focal), as the rest of the site
	   does, and falls back to the old 50% 35% when none is set. */
	object-position: var(--ti-crop, 50% 35%);
	transform: scale(1.08);
}

.ti-route-ideas .ti-ideas__reel-frame img.is-current {
	transform: scale(1);
	transition: opacity 1600ms cubic-bezier(0.45, 0, 0.55, 1) 500ms, transform 9000ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
}

.ti-route-ideas .ti-ideas__reel-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(var(--ti2-navy-rgb), 0) 62%, rgba(var(--ti2-navy-rgb), 0.28) 100%);
}

@media (max-width: 999.98px) {
	.ti-route-ideas .ti-ideas__reel-frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 599.98px) {
	.ti-route-ideas .ti-ideas__reel-frame { aspect-ratio: 4 / 3; }

	/* Two lines are always reserved for the caption, so the bar does not
	   change height when a photograph without one comes round. */
	.ti-route-ideas .ti-ideas__reel-caption { min-height: 3.2em; }

	/* Client review, 27 September 2026: a photograph much wider than this
	   frame is shown whole rather than cropped, so no one at either end is
	   cut. It sits on the frame's own navy, and it does not drift - the slow
	   scale would crop the very edges it is here to keep. The template marks
	   which photographs these are, from their own proportions. */
	.ti-route-ideas .ti-ideas__reel-frame img.ti-ideas__reel-slide--whole,
	.ti-route-ideas .ti-ideas__reel-frame img.ti-ideas__reel-slide--whole.is-current {
		object-fit: contain;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-ideas .ti-ideas__reel-frame img,
	.ti-route-ideas .ti-ideas__reel-frame img.is-current { transform: none; }
}
/* ------------------------------------------------------- writing, elsewhere
   Client update, 25 September 2026: one piece of writing sits in this room and
   the client writes more often on two of the profiles the footer lists. The
   line sits under the essay in the room's own voice - a sentence in the body
   size, on the essay's column, with the site's in-text link treatment - so it
   reads as the end of the section rather than a promotion. */
.ti-route-ideas .ti-ideas__writing-more-grid { margin-top: clamp(20px, 2.4vw, 34px); }

.ti-route-ideas .ti-ideas__writing-more {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.75;
	color: var(--ti2-slate);
	text-wrap: pretty;
}

.ti-route-ideas .ti-ideas__writing-more-link {
	color: var(--ti2-navy);
	text-decoration: underline;
	text-decoration-color: var(--ti2-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ti-route-ideas .ti-ideas__writing-more-link:hover,
.ti-route-ideas .ti-ideas__writing-more-link:focus-visible { color: var(--ti2-gold-ink); }

@media (min-width: 900px) {
	.ti-route-ideas .ti-ideas__writing-more-grid .ti-ideas__writing-more { grid-column: 2; }
}