#mobile-drawer {
	display: none;
}

#nav-toggle {
	display: none;
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

body.nav-open { overflow: hidden; }

@media (max-width: 768px) {
	#mobile-drawer { display: block; }

	#nav-menu {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	#nav-menu .nav-col--right { display: none; }
	#nav-toggle { display: inline-block; }

	.mobile-drawer {
		position: fixed;
		inset: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, .8);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		color: var(--blue);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		padding: 0;
	}

	.mobile-drawer[aria-hidden="false"] {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.drawer-inner {
		height: 100%;
		display: grid;
		grid-template-rows: auto 1fr;
		padding: 0 var(--space-page-x) 36px;
	}

	.drawer-bar {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		padding-top: var(--nav-padding-top);
		padding-bottom: var(--nav-padding-bottom);
	}

	.mobile-drawer .site-logo,
	.mobile-drawer .site-logo:visited,
	.mobile-drawer .site-logo:hover,
	.mobile-drawer .site-logo:active,
	.mobile-drawer .site-logo:focus {
		color: var(--blue);
	}

	.drawer-close {
		font: inherit;
		line-height: 1;
		padding: 0;
		appearance: none;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.drawer-close:hover,
	.drawer-close:active,
	.drawer-close:focus { color: var(--blue); }

	.mobile-nav { padding-top: calc(24px + 12px); }
	.mobile-links {
		list-style: none;
		display: grid;
		gap: 16px;
		margin: 0;
		padding: 0;
	}
	.mobile-links a { text-decoration: none; }
	.mobile-links a:hover,
	.mobile-links a:active { color: #000; }
	.mobile-links a:focus {
		color: var(--blue);
		outline: none;
	}

	.drawer-footer {
		display: grid;
		gap: 48px;
	}
	.drawer-footer address {
		font-style: normal;
		grid-column: span 6;
	}
	.drawer-footer a { text-decoration: none; }

	.drawer-newsletter label {
		display: block;
		margin-bottom: 4px;
	}
	.drawer-newsletter .newsletter__row {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: var(--gutter-gap);
		border-bottom: 1px solid currentColor;
		padding-bottom: 1px;
	}
	.drawer-newsletter input,
	.drawer-newsletter button {
		background: transparent;
		border: none;
		color: inherit;
	}

	.page--blue.is-blue .mobile-drawer {
		background-color: rgba(40, 45, 145, 0.8);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		color: #fff;
	}

	.page--blue.is-blue .mobile-drawer .site-logo,
	.page--blue.is-blue .mobile-drawer .site-logo:visited,
	.page--blue.is-blue .mobile-drawer .site-logo:hover,
	.page--blue.is-blue .mobile-drawer .site-logo:active,
	.page--blue.is-blue .mobile-drawer .site-logo:focus {
		color: #fff;
	}

	.page--blue.is-blue .mobile-links a,
	.page--blue.is-blue .mobile-links a:visited,
	.page--blue.is-blue .drawer-footer,
	.page--blue.is-blue .drawer-footer a,
	.page--blue.is-blue .drawer-close { color: #fff; }
	.page--blue.is-blue .mobile-links a:hover,
	.page--blue.is-blue .mobile-links a:active,
	.page--blue.is-blue .drawer-close:hover,
	.page--blue.is-blue .drawer-close:active,
	.page--blue.is-blue .drawer-close:focus { color: #fff; }
}