@layer components {
	.container {
		width: 100%;
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: 1rem;
	}

	@media (min-width: 40rem) {
		.container {
			padding-inline: 1.5rem;
		}
	}

	@media (min-width: 64rem) {
		.container {
			padding-inline: 2rem;
		}
	}

	.skip-link {
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		z-index: 100;
		padding: 0.6rem 1rem;
		background: var(--color-ink);
		color: var(--color-paper);
		font-family: var(--font-sans);
		transform: translateY(-200%);
	}

	.skip-link:focus {
		transform: none;
	}

	.icon {
		display: inline-flex;
		flex: none;
		width: 1em;
		height: 1em;
	}

	.icon svg {
		width: 100%;
		height: 100%;
	}

	/* Masthead: the nameplate. */
	.masthead {
		display: flex;
		justify-content: center;
		padding-block: 1.25rem;
	}

	.masthead-logo {
		display: block;
		width: min(100%, 22rem);
	}

	.masthead-logo img {
		display: block;
		width: 100%;
		height: auto;
	}

	.masthead-logo .logo-text {
		display: block;
		font-size: var(--text-h2);
		font-weight: 700;
		text-align: center;
	}

	@media (min-width: 40rem) {
		.masthead {
			padding-block: 1.5rem;
		}

		.masthead-logo {
			width: min(100%, 36rem);
		}
	}

	/* Main menu bar: small capitals between two rules, with links on the right. A "Menu" button
	   opens the menu on narrow screens, over the top of the page below. */
	.site-nav-bar {
		position: relative;
		border-block: 1px solid var(--color-ink);
	}

	.site-nav-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0 1.5rem;
	}

	.site-nav-links {
		display: flex;
		align-items: center;
		gap: 1.25rem;
		font-family: var(--font-sans);
	}

	.site-nav-link {
		display: none;
		font-size: var(--text-label);
		font-weight: 600;
		letter-spacing: var(--tracking-label);
		text-decoration: none;
		text-transform: uppercase;
	}

	.site-nav-link:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	@media (min-width: 40rem) {
		.site-nav-link {
			display: inline;
		}
	}

	.menu-button {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 3rem;
		padding: 0;
		background: none;
		border: 0;
		color: var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--text-label);
		font-weight: 700;
		letter-spacing: var(--tracking-label);
		text-transform: uppercase;
		cursor: pointer;
	}

	.menu-button .icon {
		width: 1.1rem;
		height: 1.1rem;
	}

	.menu-button .icon-close,
	.menu-button[aria-expanded="true"] .icon-open {
		display: none;
	}

	.menu-button[aria-expanded="true"] .icon-close {
		display: inline-flex;
	}

	.site-nav {
		order: 1;
		width: 100%;
		font-family: var(--font-sans);
	}

	.js .site-nav:not(.is-open) {
		display: none;
	}

	/* Without JavaScript the menu is always open, so it stays in the page rather than covering it. */
	.js .site-nav {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		right: 0;
		z-index: 40;
		padding: 0.25rem 1rem 0.75rem;
		background: var(--color-paper);
		border-bottom: 1px solid var(--color-ink);
		box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
	}

	@media (min-width: 40rem) {
		.js .site-nav {
			padding-inline: 1.5rem;
		}
	}

	.site-nav-list > li + li {
		border-top: 1px solid var(--color-rule);
	}

	.site-nav-parent {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.85rem 0 0.35rem;
		color: var(--color-muted);
		font-size: var(--text-label);
		font-weight: 600;
		letter-spacing: var(--tracking-label);
		text-transform: uppercase;
	}

	:is(.site-nav-parent, .site-nav-parent-link) .icon {
		display: none;
		width: 0.7rem;
		height: 0.7rem;
	}

	.site-nav a {
		display: block;
		padding: 0.85rem 0;
		font-size: var(--text-label);
		font-weight: 600;
		letter-spacing: var(--tracking-label);
		text-decoration: none;
		text-transform: uppercase;
	}

	.site-nav a:hover,
	.site-nav [aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	/* A sub-menu sits close under its parent, indented. */
	.site-nav .site-nav-parent-link {
		padding-bottom: 0.35rem;
	}

	.site-nav .sub-menu {
		padding-bottom: 0.5rem;
	}

	.site-nav .sub-menu a {
		padding: 0.5rem 0 0.5rem 1rem;
		font-size: var(--text-small);
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	@media (min-width: 64rem) {
		.menu-button {
			display: none;
		}

		.js .site-nav:not(.is-open),
		.site-nav {
			display: block;
			order: 0;
			width: auto;
		}

		.js .site-nav {
			position: static;
			padding: 0;
			background: none;
			border: 0;
			box-shadow: none;
		}

		.site-nav-list {
			display: flex;
			flex-wrap: wrap;
			gap: 0 1.75rem;
		}

		.site-nav-list > li,
		.site-nav-list > li + li {
			position: relative;
			border-top: 0;
		}

		.site-nav a,
		.site-nav-parent {
			padding: 0.85rem 0;
			font-size: var(--text-label);
		}

		.site-nav-parent {
			color: var(--color-ink);
			cursor: default;
		}

		:is(.site-nav-parent, .site-nav-parent-link) .icon {
			display: inline-flex;
			margin-left: 0.4rem;
		}

		.site-nav .site-nav-parent-link {
			display: flex;
			align-items: center;
			padding-bottom: 0.85rem;
		}

		/* Off screen rather than hidden, so keyboard users can tab into it and open it. */
		.site-nav .sub-menu {
			position: absolute;
			top: 100%;
			left: -9999px;
			z-index: 30;
			min-width: 14rem;
			border: 1px solid var(--color-ink);
			background: var(--color-paper);
			padding-block: 0.4rem;
			box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
		}

		.site-nav li:hover > .sub-menu,
		.site-nav li:focus-within > .sub-menu {
			left: -1rem;
		}

		.site-nav .sub-menu a {
			padding: 0.5rem 1rem;
		}
	}
}