/* Theme integration for native, editor-friendly learning posts. */
body.wy-native-lesson-page .wy-main {
	background: #f6f2ec;
}

body.wy-native-lesson-page .wy-native-lesson {
	color: #17191d;
	background: #f6f2ec;
}

body.wy-native-lesson-page .wy-native-lesson-shell,
body.wy-native-lesson-page .wy-blog-shell {
	width: 100%;
	max-width: 1040px;
	margin-inline: auto;
	padding-inline: var(--wy-gutter);
}

body.wy-native-lesson-page .wy-native-lesson-shell {
	padding-top: clamp(54px, 8vw, 108px);
}

body.wy-native-lesson-page .wy-native-lesson-back {
	display: inline-flex;
	margin-bottom: clamp(38px, 6vw, 72px);
}

body.wy-native-lesson-page .wy-native-lesson-header {
	max-width: 920px;
}

body.wy-native-lesson-page .wy-native-lesson-header .wy-eyebrow {
	margin: 0 0 18px;
	color: var(--wy-red);
	font-family: var(--wy-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.wy-native-lesson-page .wy-native-lesson-title {
	margin: 0;
	color: var(--wy-ink);
	font-family: var(--wy-display);
	font-size: clamp(42px, 6.5vw, 78px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

body.wy-native-lesson-page .wy-native-lesson-deck {
	max-width: 840px;
	margin: 30px 0 0;
	color: var(--wy-ink-2);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.58;
}

body.wy-native-lesson-page .wy-native-lesson-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 30px 0 0;
	color: var(--wy-ink-3);
	font-family: var(--wy-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.wy-native-lesson-page .wy-native-lesson-meta span {
	width: 28px;
	height: 1px;
	background: var(--wy-line);
}

body.wy-native-lesson-page .wy-native-lesson-banner {
	margin: clamp(42px, 7vw, 80px) 0 0;
	border: 1px solid var(--wy-line);
	background: #efe8dd;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.wy-native-lesson-page .wy-native-lesson-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.wy-native-lesson-page .wy-native-lesson-video {
	margin-top: clamp(42px, 7vw, 80px);
	padding: clamp(26px, 4vw, 46px);
	border: 1px solid var(--wy-line);
	background: #fff;
}

body.wy-native-lesson-page .wy-native-lesson-video > .wy-eyebrow {
	margin: 0 0 10px;
	color: var(--wy-red);
	font-family: var(--wy-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.wy-native-lesson-page .wy-native-lesson-video h2 {
	margin: 0 0 26px;
	font-family: var(--wy-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

body.wy-native-lesson-page .wy-native-lesson-video .wy-video {
	margin: 0;
}

body.wy-native-lesson-page .wy-blog-body {
	--wy-muted: #57575e;
	margin-top: clamp(62px, 9vw, 116px);
	padding-bottom: clamp(76px, 10vw, 130px);
}

body.wy-native-lesson-page .wy-blog-body .wy-section {
	display: block;
	position: static;
	width: auto;
	margin-top: 62px;
	padding: 0;
	background: transparent;
}

body.wy-native-lesson-page .wy-native-lesson-related {
	padding-top: 0;
	padding-bottom: clamp(80px, 10vw, 130px);
}

@media (max-width: 640px) {
	body.wy-native-lesson-page .wy-native-lesson-shell {
		padding-top: 46px;
	}

	body.wy-native-lesson-page .wy-native-lesson-title {
		font-size: clamp(38px, 12vw, 54px);
	}

	body.wy-native-lesson-page .wy-native-lesson-meta span {
		display: none;
	}

	body.wy-native-lesson-page .wy-native-lesson-video {
		padding: 22px 18px;
	}

	body.wy-native-lesson-page .wy-blog-body .wy-section {
		margin-top: 50px;
	}
}