@layer elements {
		.Icon {
			block-size: 1em;
			fill: currentcolor;
			inline-size: 1em;
		}
	}
@layer elements {
		.Nav-list {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
			list-style: none;
		}

		.Nav-link {
			color: inherit;
			display: block;
			font-weight: 600;
			text-decoration: none;

			&:hover,
			&.is-active {
				color: var(--color-Brand);
				text-decoration: underline;
				text-decoration-thickness: var(--size-border-width-divider);
				text-underline-offset: 0.375rem;
			}
		}

		.Nav-icon {
			display: block;
			font-size: 1.375em;
		}
	}
@layer page {
		.Header {
			animation-fill-mode: both;
			animation-name: header-border;
			animation-range: 1rem 2rem;
			animation-timeline: scroll(root);
			background: var(--color-SiteBackground);
			border-block-end: var(--size-border-width-divider) solid transparent;
			inset-block-start: 0;
			padding-block: 0.75rem;
			position: sticky;
			z-index: 1;
		}

		.Header-container {
			display: flex;
			justify-content: space-between;
		}

		@media (width < 29rem) {
			.Header-social {
				display: none;
			}
		}

		@keyframes header-border {
			to {
				border-block-end-color: currentcolor;
			}
		}
	}
@layer elements {
		.RichText {
			font-size: var(--typo-RichText-font-size);
			line-height: var(--typo-RichText-line-height);

			/* Inline size */

			> :not(pre, .Table) {
				max-inline-size: 40rem;
			}

			iframe {
				inline-size: 100%;
				max-inline-size: 100%;
			}

			/* Margin block */

			> :not(h2, h3, h4, h5, h6) {
				margin-block-start: 1em;
			}

			li,
			li > :is(ul, ol) {
				margin-block-start: 0.3em;
			}

			> :first-child {
				margin-block-start: 0;
			}

			/* Margin inline start */

			ul,
			ol,
			dd {
				margin-inline-start: 1em;
			}

			/* Customizations */

			li > p:only-child {
				margin-block-start: 0;
			}

			dt {
				color: var(--color-Brand);
			}

			blockquote {
				border-inline-start: var(--size-border-width-divider) solid currentcolor;
				padding-inline-start: calc(1em - var(--size-border-width-divider));
			}
		}
	}
@layer page {
		.Footer {
			border-block-start: var(--size-border-width-divider) solid currentcolor;
			padding-block: 0.75rem;
		}

		.Footer-container {
			column-gap: 2rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: 1rem;
		}
	}
@layer page {
		.Page-skipLink {
			background: var(--color-SiteBackground);
			inset-block-start: -2rem;
			justify-self: center;
			padding-block: 0.25rem;
			padding-inline: 0.5rem;
			position: fixed;
			z-index: 2;

			&:focus {
				inset-block-start: 0.5rem;
			}
		}

		.Page-main {
			margin-block-end: 3rem;
			margin-block-start: 2rem;
		}

		.Page-title {
			margin-block-end: clamp(2rem, 4.7vw, 3rem);
		}

		.Page-hero {
			margin-block-end: 2rem;
		}
	}