/* A2Z tutorial page styles moved from HTML head tags */

/* Content-page additions. The site header, navigation, container, main,
		   aside and footer still use the existing ELLLO index stylesheet. */
		/* Give the lesson area breathing room below the navigation bar. */
		.nav-bar + .content {
			padding-top: 30px;
		}

		.article-page {
			padding-bottom: 32px;
		}
		.article-header {
			margin: 0 0 18px;
		}
		.article-header h1 {
			margin: 0 0 8px;
			font-size: clamp(2rem, 4vw, 3rem);
			line-height: 1.08;
		}
		.article-kicker {
			margin: 0;
			font-size: 1.05rem;
			line-height: 1.55;
		}
		.video-wrap {
			position: relative;
			width: 100%;
			padding-top: 56.25%;
			margin: 0 0 20px;
			background: #111;
			overflow: hidden;
		}
		.video-wrap iframe,
		.video-wrap video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
		.article-blurb {
			margin: 0 0 24px;
			padding: 16px 18px;
			border-left: 5px solid #333;
			background: #f3f3f3;
			font-size: 1.08rem;
			line-height: 1.6;
		}
		.article-copy {
			font-size: 1rem;
			line-height: 1.72;
		}
		.article-copy h2 {
			margin-top: 30px;
		}
		.article-copy p {
			margin: 0 0 18px;
		}

		/* Lesson cards in the right column use the same square/card feel as the index page. */
		.sidebar-lessons {
			margin-top: 20px;
		}
		.sidebar-lessons h3 {
			margin-bottom: 12px;
		}
		.sidebar-card {
			display: block;
			margin: 0 0 18px;
			border: 1px solid #ddd;
			border-radius: 12px;
			background: #fff;
			overflow: hidden;
		}
		.sidebar-card > a {
			display: block;
		}
		.sidebar-card img {
			display: block;
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
		.sidebar-card > div {
			padding: 10px 12px 12px;
		}
		.sidebar-card h4 {
			margin: 0 0 5px;
			font-size: 1rem;
			line-height: 1.2;
		}
		.sidebar-card p {
			margin: 0;
			font-size: .88rem;
			line-height: 1.35;
		}

		/* Recommended content uses horizontal rows with the thumbnail on the left. */
		.recommended {
			margin-top: 42px;
			padding-top: 22px;
			border-top: 2px solid #222;
		}
		.recommended h2 {
			margin: 0 0 10px;
		}
		.recommended-row {
			display: grid;
			grid-template-columns: 190px minmax(0, 1fr);
			gap: 22px;
			align-items: start;
			padding: 18px 0;
			border-bottom: 1px solid #ddd;
		}
		.recommended-copy h3 {
			margin: 0 0 6px;
			font-size: 1.18rem;
		}
		.recommended-copy p {
			margin: 0;
			line-height: 1.5;
		}
		.recommended-thumb img {
			display: block;
			width: 100%;
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}

		@media (max-width: 760px) {
			.recommended-row {
				grid-template-columns: 130px minmax(0, 1fr);
				gap: 14px;
			}
		}