@layer components {
	/* Inner-page hero (PageHero equivalent) */
	.hero { background-color: var(--color-secondary); border-bottom: 1px solid var(--color-border); }
	.hero__inner { padding-block: 2.5rem; }
	@media (min-width: 640px) { .hero__inner { padding-block: 3.5rem; } }
	.hero__title { margin-top: 1rem; max-width: 48rem; font-size: 1.875rem; }
	@media (min-width: 640px) { .hero__title { font-size: 2.25rem; } }
	.hero__description { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; color: var(--color-muted-foreground); }
	.hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

	/* Home's bespoke two-column hero */
	.home-hero { background-color: var(--color-secondary); border-bottom: 1px solid var(--color-border); overflow: hidden; }
	.home-hero__inner {
		display: grid;
		gap: 3rem;
		align-items: center;
		padding-block: 3.5rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 1024px) { .home-hero__inner { grid-template-columns: repeat(2, 1fr); padding-block: 6rem; } }
	.home-hero__eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); }
	.home-hero__title { margin-top: 0.75rem; font-size: 2.25rem; }
	@media (min-width: 640px) { .home-hero__title { font-size: 3rem; } }
	.home-hero__description { margin-top: 1.25rem; max-width: 36rem; font-size: 1.125rem; color: var(--color-muted-foreground); }
	.home-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
	.home-hero__art { display: flex; justify-content: center; }
	@media (min-width: 1024px) { .home-hero__art { justify-content: flex-end; } }
	.hero-illustration { width: 100%; max-width: 28rem; height: auto; color: var(--color-primary); }

	/* 404 */
	.not-found { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 6rem; }
	.not-found__eyebrow { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; color: var(--color-accent); }
	.not-found__title { margin-top: 0.75rem; font-size: 1.875rem; }
	@media (min-width: 640px) { .not-found__title { font-size: 2.25rem; } }
	.not-found__description { margin-top: 1rem; max-width: 28rem; color: var(--color-muted-foreground); }
	.not-found__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

	/* Ethical statement + prose + breadcrumbs */
	.ethical-statement {
		border: 1px solid var(--color-border);
		background-color: var(--color-card);
		border-radius: var(--radius-xl);
		padding: 2rem;
	}
	.ethical-statement__title { font-size: 1.25rem; }
	.ethical-statement__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
	.ethical-statement__list li { list-style: disc; margin-left: 1.25rem; }

	.prose { max-width: 65ch; color: var(--color-foreground); }
	.prose p { margin-top: 1em; }

	.basic-page__child-links {
		margin-top: 2rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		max-width: 65ch;
	}
	.basic-page__child-links a {
		display: inline-flex;
		align-items: center;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--color-accent);
		text-decoration: none;
	}
	.basic-page__child-links a:hover { text-decoration: underline; }

	.sitemap__list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.sitemap__list--root { font-weight: 600; }
	.sitemap__list .sitemap__list {
		margin-top: 0.625rem;
		margin-left: 1.5rem;
		padding-left: 1rem;
		border-left: 1px solid var(--color-border);
		font-weight: 400;
	}
	.sitemap__list a {
		font-size: 0.9375rem;
		color: var(--color-foreground);
		text-decoration: none;
	}
	.sitemap__list a:hover { color: var(--color-accent); text-decoration: underline; }

	.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
	.breadcrumbs__item { display: flex; align-items: center; gap: 0.375rem; }
	.breadcrumbs a { text-decoration: none; }
	.breadcrumbs a:hover { color: var(--color-accent); }
	.breadcrumbs [aria-current="page"] { color: var(--color-foreground); font-weight: 500; }
}