.welcome-home {
	/* Bleed up under the sticky .site-header so the section's fill meets the
	   top of the viewport with no seam — same move as the page-header chrome
	   (see page-module.css). The extra top padding gives the height back. */
	margin-top: calc(-1 * var(--site-header-height));
	padding-block: clamp(10px, 3vh, 50px);
	padding-top: calc(var(--site-header-height) + clamp(10px, 3vh, 50px));

	inner-column {
		place-self: center;
	}

	.message {
		font-family: var(--font-serif);
		--font-heading-inset: var(--font-serif-inset); /* follows the font override above */
		width: 100%;
		font-weight: 400;

		.yeah {
			text-wrap: balance;
		}
	}

	@media (width >= 700px) {
		padding-block: clamp(60px, 10vh, 80px);
		padding-top: calc(var(--site-header-height) + clamp(60px, 10vh, 80px));
	}
}

.topics {
	padding-block: clamp(20px, 4vh, 60px);

	.section-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		--font-heading-inset: 0; /* centered — no left edge to align to */

		.section-heading {
			font-weight: 400;
		}

		.triangles {
			display: flex;
			flex-direction: row;
			gap: 30px;
			margin-top: clamp(20px, 3vh, 50px);

			figure {
				margin: 0;
				max-width: 160px;
				opacity: 0.6;
			}

			svg {
				width: 100%;
				height: auto;
				fill: var(--ink-secondary);
			}
		}

		.intro {
			margin-top: 1.3em;
			max-width: 840px;
			margin-inline: auto;
			text-align: left;
		}
	}

	.topic-list {
		margin-top: clamp(32px, 6vh, 80px);

		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		column-gap: 30px;
		row-gap: 30px;

		@media (width >= 1000px) {
			column-gap: 50px;
			row-gap: 70px;
		}
	}
}