.coursejournal-about-page main {
	--coursejournal-about-ink: var(--coursejournal-ink-900);
	--coursejournal-about-muted: var(--coursejournal-ink-600);
	--coursejournal-about-line: var(--coursejournal-ink-200);
	--coursejournal-about-soft: var(--coursejournal-ink-50);
	--coursejournal-about-green: var(--coursejournal-blue-700);
	--coursejournal-about-blue: var(--coursejournal-blue-700);
	--coursejournal-about-width: min(1040px, 100%);
	color: var(--coursejournal-about-ink);
}

.coursejournal-about-page main.wp-block-group {
	margin-top: 0 !important;
}

.coursejournal-about-page main > article.wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

.coursejournal-about-page main > article.wp-block-group > :where(.wp-block-post-title, .wp-block-post-content) {
	margin-left: auto;
	margin-right: auto;
	width: var(--coursejournal-about-width);
}

.coursejournal-about-page .wp-block-post-title {
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(2.4rem, 5vw, 4.25rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.04;
	margin-bottom: 18px;
	max-width: var(--coursejournal-about-width);
}

/*
 * The post content block is alignfull, so the side gutter has to live on it.
 * It used to come from calc(100vw - 40px) on the width, but 100vw counts the
 * scrollbar, which made the content measure wider than the viewport and pushed
 * the whole page sideways. Padding cannot overflow this way.
 */
.coursejournal-about-page .wp-block-post-content {
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	max-width: var(--coursejournal-about-width);
}

.coursejournal-about-page .wp-block-post-content > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 860px;
}

.coursejournal-about-page .wp-block-post-content > .alignwide,
.coursejournal-about-page .wp-block-post-content > .coursejournal-about-hero,
.coursejournal-about-page .wp-block-post-content > .coursejournal-about-grid,
.coursejournal-about-page .wp-block-post-content > .coursejournal-about-process,
.coursejournal-about-page .wp-block-post-content > .coursejournal-about-cta {
	max-width: var(--coursejournal-about-width);
	width: 100%;
}

.coursejournal-about-page .wp-block-post-content p,
.coursejournal-about-page .wp-block-post-content li {
	color: var(--coursejournal-about-muted);
	font-size: 1rem;
	line-height: 1.75;
}

.coursejournal-about-page .wp-block-post-content h2 {
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(1.7rem, 3vw, 2.45rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.12;
	margin-top: 54px;
}

.coursejournal-about-page .wp-block-post-content h3 {
	font-family: var(--coursejournal-font-heading);
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.25;
}

.coursejournal-about-hero {
	background: linear-gradient(135deg, var(--coursejournal-blue-50) 0%, var(--coursejournal-white) 68%);
	border: 1px solid var(--coursejournal-about-line);
	border-radius: 8px;
	box-shadow: 0 18px 48px color-mix(in srgb, var(--coursejournal-ink-900) 8%, transparent);
	margin-top: 18px;
	padding: clamp(24px, 4vw, 44px);
}

.coursejournal-about-hero p:first-child {
	color: var(--coursejournal-about-blue);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.coursejournal-about-hero p:nth-child(2) {
	color: var(--coursejournal-about-ink);
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(1.45rem, 3vw, 2.35rem);
	font-weight: 800;
	line-height: 1.18;
	margin-bottom: 16px;
	max-width: 820px;
}

.coursejournal-about-hero p:last-child {
	font-size: 1.05rem;
	margin-bottom: 0;
	max-width: 760px;
}

.coursejournal-about-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 26px;
}

.coursejournal-about-card,
.coursejournal-about-process,
.coursejournal-about-cta {
	background: var(--coursejournal-white);
	border: 1px solid var(--coursejournal-about-line);
	border-radius: 8px;
}

.coursejournal-about-card {
	padding: 22px;
}

.coursejournal-about-card h3 {
	margin-top: 0;
}

.coursejournal-about-card p:last-child,
.coursejournal-about-card ul:last-child {
	margin-bottom: 0;
}

.coursejournal-about-card ul {
	margin-left: 0;
	padding-left: 1.15rem;
}

.coursejournal-about-process {
	margin-top: 28px;
	padding: clamp(22px, 4vw, 34px);
}

.coursejournal-about-process ol {
	counter-reset: coursejournal-about-step;
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.coursejournal-about-process li {
	background: var(--coursejournal-about-soft);
	border: 1px solid var(--coursejournal-blue-100);
	border-radius: 8px;
	padding: 16px 18px 16px 54px;
	position: relative;
}

.coursejournal-about-process li::before {
	align-items: center;
	background: var(--coursejournal-about-green);
	border-radius: 999px;
	color: var(--coursejournal-white);
	content: counter(coursejournal-about-step);
	counter-increment: coursejournal-about-step;
	display: inline-flex;
	font-weight: 800;
	height: 30px;
	justify-content: center;
	left: 16px;
	line-height: 1;
	position: absolute;
	top: 18px;
	width: 30px;
}

.coursejournal-about-cta {
	background: var(--coursejournal-ink-900);
	color: var(--coursejournal-white);
	margin-top: 44px;
	padding: clamp(24px, 4vw, 36px);
}

.coursejournal-about-cta h2,
.coursejournal-about-cta p {
	color: var(--coursejournal-white);
	margin-top: 0;
}

.coursejournal-about-cta p {
	color: color-mix(in srgb, var(--coursejournal-white) 82%, transparent);
	max-width: 720px;
}

.coursejournal-about-cta a {
	color: var(--coursejournal-white);
	font-weight: 800;
	text-decoration-color: var(--coursejournal-about-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 820px) {
	.coursejournal-about-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.coursejournal-about-page main {
		--coursejournal-about-width: 100%;
	}

	.coursejournal-about-page .wp-block-post-title {
		font-size: clamp(2rem, 11vw, 2.7rem);
	}

	.coursejournal-about-hero,
	.coursejournal-about-card,
	.coursejournal-about-process,
	.coursejournal-about-cta {
		border-radius: 6px;
	}

	.coursejournal-about-process li {
		padding-left: 48px;
	}
}