.misfit-video {
	margin: 1.5rem 0;
}

.misfit-video__facade,
.misfit-video__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.misfit-video__facade {
	position: relative;
	padding: 0;
	overflow: hidden;
	background: #101b2f;
	color: #fff;
	cursor: pointer;
}

.misfit-video__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.misfit-video__facade::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 48%, rgba(8, 18, 35, .78));
	content: "";
}

.misfit-video__facade:focus-visible {
	outline: 4px solid #f2b544;
	outline-offset: 3px;
}

.misfit-video__play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 74px;
	height: 52px;
	border-radius: 14px;
	background: #08a9c5;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%);
}

.misfit-video__play::after {
	position: absolute;
	top: 50%;
	left: 52%;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #fff;
	content: "";
	transform: translate(-40%, -50%);
}

.misfit-video__title {
	position: absolute;
	z-index: 2;
	right: 1rem;
	bottom: .85rem;
	left: 1rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: left;
}

.misfit-video__chapters {
	padding: 1.15rem 1.25rem;
	background: #f5f5f1;
}

.misfit-video__chapters h2 {
	margin: 0 0 .6rem;
	font-size: 1rem;
}

.misfit-video__chapters ol {
	margin: 0;
	padding-left: 1.4rem;
}

.misfit-video__chapters a {
	display: inline-block;
	padding: .2rem 0;
}

.misfit-video__chapters a span {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.misfit-video-transcript {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	border: 1px solid #dfe4e8;
}

.misfit-video-transcript summary {
	font-weight: 800;
	cursor: pointer;
}

.misfit-video-transcript > div {
	padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.misfit-video__facade * {
		scroll-behavior: auto;
		transition: none;
	}
}