/* Yonder Tech — Modernist site styles.
   Tokens come from modernist.css. This file holds the accent override, the
   resets, the hover classes and the page components. Chinese typography
   deltas live in locale.css, scoped to the document language.

   Values are taken from the design handoff and should be changed there first.
   Border radius is 0 everywhere. No shadows on any surface. Rules are 2px. */

:root {
	/* Palette — sampled off the brand sheet (disc average, r=7px), not the
	   handoff's warm greys. Everything modernist.css defines is overridden
	   here so nothing falls back to the original terracotta system. */
	--color-text: #17181b;
	--color-bg: #f2f0ec;
	--color-surface: #e3e1dd;
	--color-divider: color-mix(in srgb, #17181b 40%, transparent);

	/* Tonal ramps, regenerated in OKLCH: each step keeps the handoff ramp's
	   lightness, so every rule built on a step keeps its contrast; only
	   chroma and hue move onto the sheet's slate. */
	--color-neutral-100: #f7f5f1;
	--color-neutral-200: #eae8e4;
	--color-neutral-300: #d3d5d2;
	--color-neutral-400: #b5b8b9;
	--color-neutral-500: #909aa1;
	/* one step darker than the handoff's lightness (L 0.580 -> 0.530). This is
	   the caption tier — case meta, notes, fact labels — and at the handoff's
	   value it sat at 3.85:1 on the page ground, below AA. 4.60:1 here. */
	--color-neutral-600: #606e7b;
	--color-neutral-700: #515f70;
	--color-neutral-800: #374353;
	--color-neutral-900: #222c3b;

	--color-accent: #192231;
	--color-accent-100: #f5f5f6;
	--color-accent-200: #e7e8ea;
	--color-accent-300: #d2d4d8;
	--color-accent-400: #b4b8be;
	--color-accent-500: #2c3a4e;
	--color-accent-600: #0f1620;
	--color-accent-700: #0c1118;
	--color-accent-800: #3a4350;
	--color-accent-900: #232c3b;

	--color-accent-2: #566576;
	--color-accent-2-500: #6e7c8a;
	--color-accent-2-600: #46546a;
	--color-accent-2-700: #374353;

	/* The accent as text — eyebrows, numerals, link hover. It cannot be the
	   navy: against #17181b body copy that reads as no change at all. This
	   slate is 5.2:1 on --color-bg and 4.6:1 on --color-surface, and stays
	   3.0:1 apart from the body ink so the hover is visibly a hover. */
	--yt-accent-ink: #566576;

	/* The mark's own colours, for the reversed lockup on the accent field. */
	--yt-bone: #ece8e3;
	--yt-silver: #b8babb;

	/* Depth. Layered, low and tinted toward the navy so a raised surface
	   reads as lifted off the paper, not as a drop-shadowed box. */
	--yt-shadow-sm: 0 1px 2px rgba(25, 34, 49, 0.06), 0 4px 14px rgba(25, 34, 49, 0.06);
	--yt-shadow-md: 0 2px 4px rgba(25, 34, 49, 0.06), 0 12px 32px rgba(25, 34, 49, 0.1);
	--yt-shadow-lg: 0 4px 8px rgba(25, 34, 49, 0.06), 0 24px 56px rgba(25, 34, 49, 0.16);
	--yt-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	text-wrap: pretty;
	font-family: var(--font-body), "Noto Sans SC", sans-serif;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	color: var(--yt-accent-ink);
}

button {
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.yt-zh {
	font-family: "Noto Sans SC", var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.yt-header {
		transition: none;
	}
}

/* — hover states —————————————————————————————————————————————— */

.hv1:hover {
	border-bottom-color: var(--color-text);
}

.hv2:hover {
	border-bottom-color: var(--color-text);
	color: var(--color-text);
}

.hv3:hover {
	opacity: 0.75;
	color: var(--color-bg);
}

.hv4:hover {
	border-color: var(--color-text);
}

.hv5:hover {
	background: var(--color-neutral-200);
}

.hv6:hover {
	background: var(--color-accent-600);
	border-color: var(--color-accent-600);
	color: var(--color-bg);
}

/* — layout ———————————————————————————————————————————————————— */

.yt-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 64px);
}

.yt-section {
	padding-block: clamp(40px, 6vw, 80px);
}

.yt-hero {
	padding-block: clamp(48px, 8vw, 108px) clamp(36px, 5vw, 60px);
}

/* — hero band ————————————————————————————————————————————————
   The first screen carries a live globe. It is the one place on the site
   that goes dark: the planet needs a night sky behind it, and the copy sits
   on the left over a scrim so it never competes with the terminator. */

.yt-hero-band {
	position: relative;
	isolation: isolate;
	background: #080b12;
	color: #ece8e3;
	overflow: hidden;
}

/* The canvas spans the whole band, so it has no edge to show against the
   band's own background; the globe is placed right of centre by the camera
   (offset in the page script), not by the box. */
.yt-hero-globe {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Until the module has drawn, the band is simply a dark field. */
	opacity: 0;
	transition: opacity 0.9s ease;
}

.yt-hero-globe[data-ready="true"] {
	opacity: 1;
}

.yt-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, #080b12 8%, color-mix(in srgb, #080b12 82%, transparent) 34%, transparent 66%),
		linear-gradient(180deg, color-mix(in srgb, #080b12 55%, transparent), transparent 28%);
}

.yt-hero-band .yt-hero {
	position: relative;
	padding-block: clamp(64px, 10vw, 132px) clamp(60px, 9vw, 128px);
	pointer-events: none;
}

.yt-hero-band .yt-hero a {
	pointer-events: auto;
}

.yt-hero-band .yt-h1 {
	max-width: 15ch;
}

.yt-hero-band .yt-eyebrow {
	color: var(--yt-silver);
}

.yt-hero-band .yt-lede {
	color: color-mix(in srgb, #ece8e3 78%, transparent);
	max-width: 48ch;
}

.yt-hero-band .yt-link {
	color: #ece8e3;
	border-bottom-color: color-mix(in srgb, #ece8e3 55%, transparent);
}

.yt-hero-band .yt-link-muted {
	color: color-mix(in srgb, #ece8e3 70%, transparent);
	border-bottom-color: color-mix(in srgb, #ece8e3 30%, transparent);
}

.yt-hero-band .yt-link:hover {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

@media (max-width: 860px) {
	.yt-hero-globe {
		inset: auto 0 0 auto;
		width: 100%;
		height: 62%;
	}

	.yt-hero-scrim {
		background:
			linear-gradient(180deg, #080b12 26%, color-mix(in srgb, #080b12 70%, transparent) 52%, transparent 78%);
	}

	.yt-hero-band .yt-hero {
		padding-bottom: clamp(200px, 46vw, 320px);
	}
}

.yt-hero .yt-eyebrow {
	margin-bottom: 28px;
}

.yt-rule {
	border-top: 2px solid var(--color-divider);
}

.yt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* — header ———————————————————————————————————————————————————— */

/* A dark bar with the light lockup. Links sit at 60% bone and come up to
   full on hover, while a bone rule on the bar's bottom edge draws in from
   the left and leaves to the right. The current page is full bone with a
   small square ahead of it, so "here" never reads as "hovering". */
.yt-header {
	--nav-ink: #f2f0ec;
	--nav-dim: rgba(242, 240, 236, 0.6);
	--nav-line: rgba(242, 240, 236, 0.1);
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--color-text);
	color: var(--nav-ink);
	transition: transform 260ms ease;
	will-change: transform;
}

.yt-header.is-hidden {
	transform: translateY(-110%);
}

.yt-nav {
	padding-block: 0;
	padding-inline: clamp(20px, 5vw, 64px);
	min-height: 64px;
	display: flex;
	align-items: stretch;
	gap: clamp(16px, 3vw, 40px);
	flex-wrap: nowrap;
	border-bottom: 1px solid var(--nav-line);
}

.yt-nav .yt-brand {
	flex: 0 0 auto;
	margin-right: 0;
	display: flex;
	align-items: center;
}

/* height drives it; width follows the 4.442:1 lockup. The width/height
   attributes are the anti-shift hint, so height must stay auto or they
   become presentational sizes and override this. The lockup shows at
   every width (on a phone it sits centred); the mark is kept in the
   markup but unused. */
.yt-nav .yt-brand .yt-brand-lockup {
	display: block;
	height: 34px;
	width: auto;
}

.yt-nav .yt-brand .yt-brand-mark {
	display: none;
}

.yt-menu-btn,
.yt-menu-lang {
	display: none;
}

/* safe center: centred while it fits, start-aligned once it scrolls, so
   the first link is never cut off on a narrow screen */
.yt-nav-links {
	display: flex;
	align-items: stretch;
	gap: clamp(4px, 1vw, 12px);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
	font-size: 14px;
	justify-content: safe center;
}

.yt-nav-links::-webkit-scrollbar {
	display: none;
}

.yt-nav .yt-nav-links > a {
	position: relative;
	display: flex;
	align-items: center;
	padding-inline: clamp(8px, 1vw, 14px);
	color: var(--nav-dim);
	letter-spacing: 0.01em;
	transition: color 180ms ease;
}

.yt-nav-links > a::after {
	content: "";
	position: absolute;
	left: clamp(8px, 1vw, 14px);
	right: clamp(8px, 1vw, 14px);
	bottom: -1px;
	height: 2px;
	background: var(--nav-ink);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}

.yt-nav .yt-nav-links > a:hover,
.yt-nav .yt-nav-links > a:focus-visible,
.yt-nav .yt-nav-links > a[aria-current="page"] {
	color: var(--nav-ink);
}

.yt-nav-links > a[aria-current="page"]::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-right: 9px;
	background: var(--nav-ink);
}

.yt-nav-links > a:hover::after,
.yt-nav-links > a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.yt-nav a:focus-visible {
	outline: 2px solid var(--nav-ink);
	outline-offset: -2px;
}

/* the language switch is a two-part segmented control */
.yt-lang {
	margin-left: auto;
	align-self: center;
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	font-size: 12px;
	letter-spacing: 0.08em;
	border: 1px solid rgba(242, 240, 236, 0.28);
	border-radius: 999px;
	padding: 2px;
}

.yt-lang a {
	font-weight: 600;
	color: var(--nav-dim);
	padding: 4px 11px;
	border-radius: 999px;
	transition: color 180ms ease, background-color 180ms ease;
}

.yt-lang a:hover {
	color: var(--nav-ink);
}

.yt-lang a.is-active {
	color: var(--color-text);
	background: var(--nav-ink);
}

.yt-lang span {
	display: none;
}

/* — header on a phone or tablet ————————————————————————————————————————
   Menu button left, lockup centred. The links drop into a full-height
   panel under the bar, set large, one per row, with the language switch
   at its foot. */
@media (max-width: 960px) {
	.yt-nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 12px;
		min-height: 60px;
		padding-inline: 16px;
	}

	/* optically centred: the lockup's mass sits in "Yonder", right of its
	   box centre, so it moves a little left */
	.yt-nav .yt-brand {
		grid-column: 2;
		justify-self: center;
		transform: translateX(-10px);
	}

	.yt-nav .yt-brand .yt-brand-lockup {
		height: 28px;
	}

	.yt-nav > .yt-lang {
		display: none;
	}

	.yt-menu-lang {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 28px;
		font-size: 13px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--nav-dim);
	}

	.yt-menu-lang .yt-lang {
		margin-left: 0;
		font-size: 14px;
	}

	.yt-menu-lang .yt-lang a {
		padding: 6px 16px;
	}

	.yt-menu-btn {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: grid;
		place-content: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		margin-left: -10px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--nav-ink);
		cursor: pointer;
	}

	.yt-menu-btn span {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		transition: transform 260ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	.yt-header.is-open .yt-menu-btn span:first-child {
		transform: translateY(4px) rotate(45deg);
	}

	.yt-header.is-open .yt-menu-btn span:last-child {
		transform: translateY(-4px) rotate(-45deg);
	}

	.yt-menu-btn:focus-visible {
		outline: 2px solid var(--nav-ink);
		outline-offset: -2px;
	}

	.yt-nav-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100dvh - 60px);
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		padding: 8px 16px 40px;
		overflow-y: auto;
		background: var(--color-text);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
	}

	.yt-header.is-open .yt-nav-links {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 220ms ease, transform 220ms ease;
	}

	.yt-nav .yt-nav-links > a {
		padding: 18px 0;
		font-size: 26px;
		letter-spacing: -0.01em;
		border-bottom: 1px solid var(--nav-line);
	}

	/* the rule becomes an arrow at the row's end */
	.yt-nav-links > a::after {
		content: "→";
		position: static;
		margin-left: auto;
		height: auto;
		background: none;
		font-size: 20px;
		transform: none;
		transition: transform 220ms ease;
	}

	.yt-nav-links > a:hover::after,
	.yt-nav-links > a:focus-visible::after {
		transform: translateX(4px);
	}

	.yt-nav-links > a[aria-current="page"]::before {
		width: 7px;
		height: 7px;
		margin-right: 12px;
	}

	.yt-menu-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yt-nav-links > a::after {
		transition: none;
	}
}

/* — shared type ———————————————————————————————————————————————— */

.yt-eyebrow {
	display: block;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yt-accent-ink);
	font-weight: 600;
	margin-bottom: 20px;
}

.yt-h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 82px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin: 0 0 0 -0.05em;
}

.yt-h1 span {
	display: block;
}

.yt-h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 0 -0.04em;
}

.yt-h2-sub {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.yt-h3 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
}

.yt-lede {
	font-size: 17px;
	line-height: 1.65;
	margin: 32px 0 0;
	max-width: 56ch;
	color: var(--color-neutral-800);
}

.yt-meta {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	margin-bottom: 10px;
}

.yt-note {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--color-neutral-600);
	margin: 18px 0 0;
	max-width: 78ch;
}

.yt-num {
	font-feature-settings: "tnum" 1;
}

/* — links and buttons ——————————————————————————————————————————— */

.yt-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--color-accent);
	transition: border-color 160ms ease, color 160ms ease;
}

.yt-link-muted {
	color: var(--color-neutral-700);
	border-bottom-color: var(--color-neutral-400);
}

.yt-link-nowrap {
	white-space: nowrap;
}

.yt-arrow {
	font-family: var(--font-heading);
	font-weight: 800;
}

.yt-btn-row {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.yt-btn-solid,
.yt-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	letter-spacing: 0.04em;
	font-weight: 600;
	padding: 11px 18px;
	border: 2px solid var(--color-accent);
	transition:
		background 200ms ease,
		border-color 200ms ease,
		color 200ms ease,
		transform 260ms var(--yt-ease-out),
		box-shadow 260ms var(--yt-ease-out);
}

.yt-btn-solid {
	background: var(--color-accent);
	color: var(--color-bg);
	box-shadow: var(--yt-shadow-sm);
}

.yt-btn-ghost {
	background: transparent;
	color: var(--color-accent);
}

.yt-btn-solid:hover,
.yt-btn-ghost:hover {
	transform: translateY(-2px);
	box-shadow: var(--yt-shadow-md);
}

.yt-btn-ghost:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.yt-btn-solid:active,
.yt-btn-ghost:active {
	transform: translateY(0);
	box-shadow: var(--yt-shadow-sm);
}

.yt-link-accent {
	font-size: 13.5px;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--yt-accent-ink);
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 3px;
}

/* — section header row ————————————————————————————————————————— */

.yt-head-row {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(24px, 3vw, 44px);
}

.yt-head-row>div {
	max-width: 640px;
}

.yt-head-lede {
	font-size: 16px;
	line-height: 1.65;
	margin: 18px 0 0;
	color: var(--color-neutral-800);
	max-width: 52ch;
}

/* — homepage rhythm ——————————————————————————————————————————————
   Below the hero the page is carried by space, scale and a change of
   ground rather than by rules: light work, a dark band of figures, light
   capabilities, a stone band for the method, light insights, then the
   navy close. No section needs a line to tell it from the next. */

/* — selected work ——————————————————————————————————————————————— */

.yt-work {
	padding-block: clamp(64px, 9vw, 128px) clamp(56px, 7vw, 104px);
}

.yt-case-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(56px, 7vw, 104px) clamp(28px, 3.4vw, 48px);
	margin-top: clamp(40px, 5vw, 64px);
}

/* the three after the lead are raised panels; the lead sits on the page */
.yt-case {
	display: flex;
	flex-direction: column;
	color: inherit;
	background: var(--color-neutral-100);
	box-shadow: var(--yt-shadow-sm);
	transition: transform 360ms var(--yt-ease-out), box-shadow 360ms var(--yt-ease-out);
}

.yt-case:hover {
	color: inherit;
	transform: translateY(-6px);
	box-shadow: var(--yt-shadow-lg);
}

.yt-case-lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: end;
	background: transparent;
	box-shadow: none;
}

.yt-case-lead:hover {
	transform: none;
	box-shadow: none;
}

.yt-case-lead .yt-case-media {
	box-shadow: var(--yt-shadow-md);
	transition: box-shadow 360ms var(--yt-ease-out), transform 360ms var(--yt-ease-out);
}

.yt-case-lead:hover .yt-case-media {
	transform: translateY(-6px);
	box-shadow: var(--yt-shadow-lg);
}

.yt-case-media {
	overflow: hidden;
	background: var(--color-surface);
}

.yt-case-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.yt-case:hover .yt-case-media img {
	transform: scale(1.035);
}

.yt-case-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px);
}

.yt-case-lead .yt-case-body {
	padding: 0 0 clamp(4px, 1vw, 12px);
}

.yt-case-num {
	color: var(--color-text);
	font-weight: 700;
	margin-right: 12px;
}

.yt-case-title {
	transition: color 160ms ease;
}

.yt-case-lead .yt-case-title {
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.yt-case:hover .yt-case-title {
	color: var(--yt-accent-ink);
}

.yt-case-text {
	font-size: 15px;
	line-height: 1.65;
	margin: 14px 0 0;
	color: var(--color-neutral-800);
	max-width: 46ch;
}

/* in the smaller cards the brief is a teaser: three lines, then the case */
.yt-case:not(.yt-case-lead) .yt-case-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.yt-case-metric {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: auto;
	padding-top: 26px;
}

.yt-case-figure {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-feature-settings: "tnum" 1;
}

.yt-case-lead .yt-case-figure {
	font-size: clamp(56px, 6.4vw, 96px);
	letter-spacing: -0.04em;
}

.yt-case-measure {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	line-height: 1.4;
}

.yt-work .yt-note {
	margin-top: clamp(40px, 5vw, 64px);
}

/* the case library still sets its rows with these two */
.yt-row-num {
	flex: 0 0 44px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 15px;
	font-feature-settings: "tnum" 1;
}

.yt-metric-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-top: 8px;
	line-height: 1.4;
}

/* — figures: a night band that picks the hero back up ——————————————— */

.yt-stats-band {
	background:
		radial-gradient(70% 140% at 88% 0%, rgba(74, 118, 196, 0.2), transparent 62%),
		radial-gradient(50% 120% at 6% 100%, rgba(196, 124, 74, 0.1), transparent 60%),
		#080b12;
	color: #ece8e3;
}

.yt-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px);
	padding-block: clamp(64px, 9vw, 120px);
}

.yt-stat-figure {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(48px, 6.2vw, 92px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: #ece8e3;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.yt-stat-label {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, #ece8e3 62%, transparent);
	margin-top: 18px;
	line-height: 1.45;
}

/* — capabilities: heading holds its place while the list reads past ——— */

.yt-cap-section {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 104px);
	padding-block: clamp(72px, 10vw, 144px);
}

.yt-cap-intro {
	position: sticky;
	top: 112px;
	align-self: start;
}

.yt-cap-heading {
	max-width: 14ch;
}

.yt-cap-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(44px, 5vw, 72px) clamp(28px, 3.5vw, 56px);
}

.yt-cap-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(44px, 4.4vw, 64px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-neutral-400);
	margin-bottom: 20px;
	font-feature-settings: "tnum" 1;
}

.yt-cap h3 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0;
}

.yt-cap p {
	font-size: 15px;
	line-height: 1.65;
	margin: 14px 0 0;
	color: var(--color-neutral-800);
}

/* — method: on the stone ground ———————————————————————————————— */

.yt-method-band {
	background: var(--color-surface);
}

.yt-method {
	display: flex;
	gap: clamp(40px, 6vw, 96px);
	flex-wrap: wrap;
	align-items: center;
	padding-block: clamp(72px, 10vw, 136px);
}

.yt-method-col {
	flex: 1 1 420px;
	min-width: 0;
}

.yt-method-heading {
	max-width: 20ch;
}

.yt-steps {
	margin-top: clamp(36px, 4vw, 52px);
	display: grid;
	gap: clamp(26px, 3vw, 36px);
}

.yt-step {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: baseline;
}

.yt-step-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-neutral-500);
	font-feature-settings: "tnum" 1;
}

.yt-step-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
}

.yt-step p {
	font-size: 15px;
	line-height: 1.65;
	margin: 6px 0 0;
	color: var(--color-neutral-800);
	max-width: 46ch;
}

.yt-method-figure {
	flex: 1 1 380px;
	min-width: 0;
	max-width: 520px;
	margin: 0;
}

.yt-method-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	max-height: 580px;
	object-fit: cover;
	box-shadow: var(--yt-shadow-lg);
}

/* — insights ——————————————————————————————————————————————————— */

#insights .yt-section {
	padding-block: clamp(72px, 10vw, 136px);
}

.yt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 3vw, 32px);
}

.yt-cards a.card {
	position: relative;
	color: inherit;
	gap: 12px;
	padding: clamp(24px, 2.6vw, 32px);
	min-height: 240px;
	background: var(--color-neutral-100);
	box-shadow: var(--yt-shadow-sm);
	transition:
		background 240ms ease,
		transform 360ms var(--yt-ease-out),
		box-shadow 360ms var(--yt-ease-out);
}

.yt-cards a.card:hover {
	transform: translateY(-6px);
	box-shadow: var(--yt-shadow-lg);
}

/* the way in: an arrow that slides into the corner on hover */
.yt-cards a.card::after {
	content: "→";
	position: absolute;
	right: clamp(24px, 2.6vw, 32px);
	bottom: clamp(20px, 2.2vw, 28px);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	color: var(--yt-accent-ink);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 240ms ease, transform 320ms var(--yt-ease-out);
}

.yt-cards a.card:hover::after {
	opacity: 1;
	transform: none;
}

.yt-cards .card-title {
	transition: color 200ms ease;
}

.yt-cards .card-title {
	font-size: 20px;
	letter-spacing: -0.015em;
}

.yt-cards .card-body {
	font-size: 14px;
	line-height: 1.65;
}

.yt-cards a.card:hover .card-title {
	color: var(--yt-accent-ink);
}

@media (max-width: 960px) {
	.yt-case-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yt-case-lead {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.yt-case-lead .yt-case-body {
		padding: 0;
	}

	/* two of the three after the lead would leave the third alone: it takes
	   the full row, laid on its side so it is not twice as tall */
	.yt-case-grid > .yt-case:last-child:nth-child(even) {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.yt-case-grid > .yt-case:last-child:nth-child(even) > * {
		flex: 1 1 0;
		min-width: 0;
	}

	.yt-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yt-cap-section {
		grid-template-columns: minmax(0, 1fr);
	}

	.yt-cap-intro {
		position: static;
	}
}

@media (max-width: 640px) {
	.yt-case-grid,
	.yt-cap-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.yt-case-grid > .yt-case:last-child:nth-child(even) {
		grid-column: auto;
		flex-direction: column;
	}

	.yt-step {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.yt-step-num {
		font-size: 24px;
	}
}

/* — contact banner ————————————————————————————————————————————— */

.yt-contact {
	background: var(--color-accent);
	color: var(--color-bg);
}

.yt-contact .yt-wrap {
	padding-block: clamp(48px, 7vw, 92px);
}

.yt-contact a {
	color: var(--color-bg);
}

.yt-contact-h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(32px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 0 -0.05em;
}

.yt-contact-h2 span {
	display: block;
}

.yt-contact-body {
	font-size: 16.5px;
	line-height: 1.65;
	margin: 28px 0 0;
	max-width: 50ch;
}

.yt-contact-grid {
	display: flex;
	gap: clamp(28px, 5vw, 64px);
	flex-wrap: wrap;
	margin-top: 40px;
}

.yt-contact-label {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.yt-contact-link {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(18px, 2vw, 24px);
	letter-spacing: -0.015em;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--color-bg);
	transition: opacity 160ms ease;
}

.yt-contact-addr {
	font-size: 15.5px;
	line-height: 1.55;
}

.yt-contact :focus-visible {
	outline-color: var(--color-bg);
}

/* — contact form (on the accent field) ————————————————————————— */

.yt-form {
	margin-top: clamp(48px, 6vw, 72px);
	max-width: 720px;
}

.yt-form-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: clamp(20px, 3vw, 28px);
}

.yt-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 32px);
}

.yt-field-wide {
	grid-column: 1 / -1;
}

.yt-field label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.yt-input {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-bg);
	/* filled, not underlined: a form of four rules read as more lines */
	background: color-mix(in srgb, #f2f0ec 7%, transparent);
	border: 0;
	border-radius: 0;
	padding: 12px 14px;
	transition: background 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.yt-input::placeholder {
	color: color-mix(in srgb, #f2f0ec 62%, transparent);
}

.yt-input:hover,
.yt-input:focus {
	background: color-mix(in srgb, #f2f0ec 12%, transparent);
	outline: none;
}

.yt-input:focus-visible {
	outline: 2px solid var(--color-bg);
	outline-offset: 3px;
}

textarea.yt-input {
	resize: vertical;
	min-height: 96px;
}

.yt-form-actions {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 28px);
	flex-wrap: wrap;
	margin-top: clamp(26px, 4vw, 36px);
}

.yt-submit {
	font-family: var(--font-body);
	font-size: 13.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	padding: 13px 24px;
	border: 2px solid var(--color-bg);
	background: var(--color-bg);
	color: var(--color-accent);
	border-radius: 0;
	transition: background 160ms ease, color 160ms ease;
}

.yt-submit {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	transition:
		background 200ms ease,
		color 200ms ease,
		transform 260ms var(--yt-ease-out),
		box-shadow 260ms var(--yt-ease-out);
}

.yt-submit:hover {
	background: transparent;
	color: var(--color-bg);
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

.yt-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.yt-form-msg {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	max-width: 46ch;
}

/* — footer ————————————————————————————————————————————————————— */

.yt-footer {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 44px);
}

.yt-foot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(24px, 4vw, 48px);
}

.yt-foot-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.yt-foot-links {
	display: grid;
	gap: 8px;
	font-size: 14.5px;
}

.yt-foot-bar {
	margin: clamp(40px, 5vw, 64px) 0 0;
}

.yt-foot-legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--color-neutral-700);
}

.yt-foot-legal a {
	color: var(--color-neutral-700);
}

.yt-footer-slim {
	padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 40px);
}

/* — case library ——————————————————————————————————————————————— */

.yt-lib-head {
	padding-block: clamp(36px, 5vw, 72px) clamp(24px, 3vw, 40px);
}

.yt-lib-head .yt-eyebrow {
	margin-bottom: 24px;
}

.yt-lib-title-row {
	display: flex;
	gap: clamp(28px, 5vw, 88px);
	flex-wrap: wrap;
	align-items: flex-end;
}

.yt-lib-h1 {
	flex: 1 1 480px;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 0 -0.05em;
}

.yt-lib-h1 span {
	display: block;
}

.yt-lib-lede {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 16.5px;
	line-height: 1.68;
	margin: 0;
	color: var(--color-neutral-800);
	max-width: 46ch;
}

.yt-filter-bar {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 8px;
}

.yt-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.yt-filter-label {
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	margin-right: 6px;
}

.yt-chip {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 9px 14px;
	cursor: pointer;
	border: 0;
	background: var(--color-neutral-200);
	color: var(--color-text);
	border-radius: 0;
	transition:
		background 180ms ease,
		color 180ms ease,
		transform 240ms var(--yt-ease-out),
		box-shadow 240ms var(--yt-ease-out);
}

.yt-chip:hover {
	background: var(--color-neutral-300);
}

.yt-chip[aria-pressed="true"] {
	background: var(--color-accent);
	color: var(--color-bg);
	box-shadow: var(--yt-shadow-sm);
}

.yt-count {
	font-size: 12.5px;
	color: var(--color-neutral-600);
	font-feature-settings: "tnum" 1;
}

.yt-lib-list {
	padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 96px);
}

.yt-lib-list [data-cases] {
	display: grid;
	gap: clamp(14px, 1.6vw, 20px);
}

/* each case is its own raised card; open, it lifts a little further */
.yt-lib-item {
	background: var(--color-neutral-100);
	box-shadow: var(--yt-shadow-sm);
	padding-inline: clamp(16px, 2.4vw, 32px);
	transition: transform 320ms var(--yt-ease-out), box-shadow 320ms var(--yt-ease-out), background 240ms ease;
}

.yt-lib-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--yt-shadow-md);
}

/* open: lifted further, and it stays put under the pointer */
.yt-lib-item:has([aria-expanded="true"]) {
	box-shadow: var(--yt-shadow-lg);
	transform: none;
}

.yt-lib-title {
	transition: color 200ms ease;
}

.yt-lib-item:hover .yt-lib-title {
	color: var(--yt-accent-ink);
}

.yt-lib-item[hidden] {
	display: none;
}

.yt-lib-row {
	display: flex;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
	align-items: center;
	padding: clamp(20px, 2.6vw, 30px) 0;
	cursor: pointer;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	transition: background 160ms ease;
}

.yt-lib-thumb {
	flex: 0 0 clamp(120px, 13vw, 168px);
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-300);
	overflow: hidden;
}

.yt-lib-thumb img {
	transition: transform 600ms var(--yt-ease-out);
}

.yt-lib-item:hover .yt-lib-thumb img {
	transform: scale(1.05);
}

.yt-lib-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yt-lib-body {
	flex: 1 1 300px;
	min-width: 0;
}

.yt-lib-title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(19px, 1.9vw, 24px);
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.yt-lib-metric {
	flex: 1 1 170px;
}

.yt-lib-metric-figure {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(23px, 2.1vw, 29px);
	line-height: 1;
	letter-spacing: -0.025em;
	font-feature-settings: "tnum" 1;
}

.yt-lib-sign {
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: auto;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 17px;
	line-height: 1;
	color: var(--color-accent);
	background: var(--color-neutral-200);
	transition: background 220ms ease, color 220ms ease;
}

.yt-lib-item:hover .yt-lib-sign,
[aria-expanded="true"] .yt-lib-sign {
	background: var(--color-accent);
	color: var(--color-bg);
}

.yt-lib-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(22px, 3vw, 44px);
	padding: clamp(8px, 1.4vw, 16px) 0 clamp(28px, 3vw, 40px);
	animation: yt-panel-in 420ms var(--yt-ease-out);
}

@keyframes yt-panel-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.yt-lib-panel[hidden] {
	display: none;
}

.yt-panel-label {
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yt-accent-ink);
	font-weight: 600;
	margin-bottom: 12px;
}

.yt-panel-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-neutral-800);
}

.yt-decisions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yt-decision {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.yt-decision-num {
	flex: 0 0 18px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12px;
	color: var(--color-neutral-600);
	font-feature-settings: "tnum" 1;
}

.yt-decision-text {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.6;
}

.yt-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 22px;
}

/* — case detail ———————————————————————————————————————————————— */

.yt-detail-head {
	padding-block: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 44px);
}

.yt-crumb {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	margin-bottom: clamp(28px, 4vw, 44px);
}

.yt-crumb-current {
	color: var(--color-text);
}

.yt-detail-title-row {
	display: flex;
	gap: clamp(28px, 5vw, 88px);
	flex-wrap: wrap;
	align-items: flex-end;
}

.yt-detail-h1 {
	flex: 1 1 560px;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 66px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 0 -0.05em;
}

.yt-detail-lede {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
	color: var(--color-neutral-800);
	max-width: 44ch;
}

.yt-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	border-top: 2px solid var(--color-divider);
	padding-top: 22px;
	padding-bottom: clamp(28px, 4vw, 48px);
}

.yt-fact-label {
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	margin-bottom: 8px;
}

.yt-fact-value {
	font-size: 15.5px;
	line-height: 1.5;
}

.yt-detail-hero {
	margin: 0;
}

.yt-detail-hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	object-fit: cover;
}

.yt-detail-body {
	padding-block: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 32px);
}

.yt-block {
	display: flex;
	gap: clamp(20px, 4vw, 72px);
	flex-wrap: wrap;
	align-items: flex-start;
	border-top: 2px solid var(--color-divider);
	padding: clamp(24px, 3vw, 36px) 0;
}

.yt-block:last-child {
	border-bottom: 2px solid var(--color-divider);
}

.yt-block-side {
	flex: 0 0 200px;
	min-width: 0;
}

.yt-block-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	color: var(--color-accent);
	margin-bottom: 8px;
}

.yt-block-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0;
}

.yt-block-body {
	flex: 1 1 420px;
	min-width: 0;
}

.yt-block-body p {
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
	max-width: 62ch;
	color: var(--color-neutral-800);
}

.yt-block-body p+p {
	margin-top: 20px;
}

.yt-dec-list {
	display: grid;
	gap: 0;
	border-bottom: 1px solid var(--color-neutral-300);
}

.yt-dec {
	display: flex;
	gap: 20px;
	border-top: 1px solid var(--color-neutral-300);
	padding: 16px 0;
}

.yt-dec-num {
	flex: 0 0 24px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	color: var(--color-accent);
	font-feature-settings: "tnum" 1;
}

.yt-dec p {
	flex: 1 1 auto;
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	max-width: 58ch;
	color: var(--color-neutral-800);
}

.yt-delivered {
	padding-block: clamp(28px, 4vw, 48px) clamp(32px, 4vw, 56px);
}

.yt-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(20px, 3vw, 44px);
}

.yt-spec {
	border-top: 2px solid var(--color-accent);
	padding-top: 16px;
}

.yt-spec-figure {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-feature-settings: "tnum" 1;
}

.yt-spec-label {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-top: 12px;
	line-height: 1.45;
}

.yt-spec-note {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--color-neutral-600);
	margin-top: 8px;
}

.yt-delivered .yt-note {
	margin-top: clamp(24px, 3vw, 36px);
}

.yt-live {
	padding-bottom: clamp(40px, 5vw, 64px);
}

.yt-live-inner {
	border-top: 2px solid var(--color-divider);
	padding-top: clamp(26px, 3vw, 40px);
	display: flex;
	gap: clamp(20px, 4vw, 64px);
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

.yt-live-col {
	flex: 1 1 420px;
	min-width: 0;
}

.yt-live-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 30ch;
}

.yt-live-body {
	font-size: 15.5px;
	line-height: 1.65;
	margin: 16px 0 0;
	color: var(--color-neutral-700);
	max-width: 52ch;
}

.yt-btn-solid-lg {
	flex: 0 0 auto;
	font-size: 14px;
	padding: 14px 22px;
}

.yt-next {
	padding-bottom: clamp(40px, 5vw, 64px);
}

.yt-next-label {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	font-weight: 600;
	margin-bottom: 20px;
}

.yt-next-row {
	display: flex;
	gap: clamp(20px, 3vw, 44px);
	flex-wrap: wrap;
	align-items: center;
	border-top: 2px solid var(--color-divider);
	border-bottom: 2px solid var(--color-divider);
	padding: clamp(22px, 3vw, 32px) 0;
	transition: background 160ms ease;
}

.yt-next-num {
	flex: 0 0 44px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 15px;
	font-feature-settings: "tnum" 1;
}

.yt-next-body {
	flex: 1 1 320px;
	min-width: 0;
}

.yt-next-title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.yt-next-read {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
/* — modernist component overrides ————————————————————————————————
   .card-meta mixes the ink to 50%, which lands at 3.17:1 on --color-surface.
   That predates the palette swap and is the same on the handoff's greys; 65%
   clears AA on both the card surface and the page ground. */

.yt-cards .card-meta {
	color: color-mix(in srgb, var(--color-text) 65%, transparent);
	padding-right: 32px; /* room for the hover arrow in the corner */
}

/* — Insights: the article index and the article page ——————————————
   The index reuses the case library's filter bar and row rhythm; the
   article is a single reading column, 68ch, under the detail header. */

.yt-ins-list {
	padding-block: clamp(8px, 2vw, 20px) clamp(40px, 5vw, 72px);
}

.yt-ins-row {
	display: grid;
	grid-template-columns: clamp(140px, 16vw, 220px) minmax(0, 1fr) auto;
	gap: clamp(18px, 3vw, 40px);
	align-items: start;
	padding: clamp(20px, 2.4vw, 28px) 0;
	border-top: 2px solid var(--color-divider);
	text-decoration: none;
	color: inherit;
	transition: background 160ms ease;
}

.yt-ins-row[hidden] {
	display: none;
}

.yt-ins-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-neutral-300);
}

.yt-ins-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.yt-ins-row:hover .yt-ins-thumb img {
	transform: scale(1.04);
}

.yt-ins-date {
	font-size: 12.5px;
	color: var(--color-neutral-600);
	font-feature-settings: "tnum" 1;
}

.yt-ins-body {
	display: grid;
	gap: 6px;
}

.yt-ins-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(19px, 1.9vw, 24px);
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.yt-ins-dek {
	color: var(--color-neutral-800);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 70ch;
}

.yt-ins-read {
	font-size: 12.5px;
	color: var(--color-neutral-600);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.yt-ins-row {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 16px;
	}

	.yt-ins-read,
	.yt-ins-dek {
		display: none;
	}
}

.yt-article-h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 0 -0.04em;
	max-width: 20ch;
	text-wrap: balance;
}

.yt-article-dek {
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.55;
	color: var(--color-neutral-800);
	max-width: 56ch;
	margin: clamp(18px, 2.4vw, 28px) 0 0;
}

.yt-article-meta {
	display: flex;
	gap: 8px 28px;
	flex-wrap: wrap;
	margin-top: clamp(24px, 3vw, 36px);
	padding-top: 18px;
	border-top: 2px solid var(--color-divider);
	font-size: 13px;
	color: var(--color-neutral-600);
}

.yt-prose {
	max-width: 68ch;
	padding-bottom: clamp(48px, 7vw, 96px);
	font-size: 17.5px;
	line-height: 1.75;
}

.yt-prose > * {
	margin: 0 0 1.1em;
}

.yt-prose h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(23px, 2.2vw, 28px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 1.9em 0 0.6em;
}

.yt-prose h3 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 19px;
	margin: 1.6em 0 0.4em;
}

.yt-prose ul,
.yt-prose ol {
	padding-left: 1.3em;
}

.yt-prose li + li {
	margin-top: 0.45em;
}

.yt-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--color-accent);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(19px, 1.9vw, 22px);
	line-height: 1.45;
}

.yt-prose blockquote p {
	margin: 0;
}

.yt-prose code {
	font-size: 0.88em;
	padding: 1px 5px;
	background: var(--color-neutral-200);
}

.yt-prose a {
	color: inherit;
	text-underline-offset: 3px;
}

.yt-ins-more {
	padding-block: 0 clamp(40px, 6vw, 72px);
}

.yt-ins-more .yt-head-row {
	border-top: 2px solid var(--color-divider);
	padding-top: clamp(24px, 3vw, 36px);
}

.yt-article-cover {
	margin-block: 0 clamp(32px, 5vw, 64px);
}

.yt-article-cover img {
	display: block;
	width: 100%;
	/* the tag's height="900" would otherwise hold at 900px as the width
	   shrinks, and the ratio below would never apply */
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The diagram may run wider than the 68ch reading column, to the right. */
.yt-prose-figure {
	width: min(980px, calc(100vw - 48px));
	margin: 2.2em 0 !important;
}

.yt-prose-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--color-divider);
}

.yt-prose-figure figcaption {
	margin-top: 12px;
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-neutral-600);
}

/* — motion: content rises into place as it is reached ————————————————
   site.js adds .yt-motion to the root only when the observer exists and
   the visitor has not asked for reduced motion, so without it every
   element simply shows. Siblings are staggered by --reveal-i. */

.yt-motion .yt-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 800ms ease,
		transform 900ms var(--yt-ease-out);
	transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.yt-motion .yt-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.yt-case,
	.yt-case-media,
	.yt-cards a.card,
	.yt-lib-item,
	.yt-btn-solid,
	.yt-btn-ghost,
	.yt-submit {
		transition: none;
	}

	.yt-case:hover,
	.yt-case-lead:hover .yt-case-media,
	.yt-cards a.card:hover,
	.yt-lib-item:hover,
	.yt-btn-solid:hover,
	.yt-btn-ghost:hover,
	.yt-submit:hover {
		transform: none;
	}

	.yt-lib-panel {
		animation: none;
	}
}