:root {
	--gutter: 2rem;
	--width-small: 800px;
	--width-medium: 1000px;
	--width-large: 1300px;
	@media (max-width: 800px) {
		--gutter: 1rem;
	}
}





body {
	margin: 0;
	font-family: 'Outfit', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: #111;
	/* background: #f7f7f7; */
	background: #fff;
	& a {
		color: #0070f3;
		text-decoration: none;
		transition: all 0.2s ease;
		&:hover {
			text-decoration: underline;
		}
	}
	& h1, h2, h3, h4, h5, h6 {
		font-family: 'Fraunces', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 600;
		line-height: 1.2;
		margin-top: 1.5em;
		margin-bottom: 0.5em;
		color: #333;
	}
	& h1 { font-size: 2em; }
	& h2 { font-size: 1.5em; }
	& h3 { font-size: 1.25em; }
	& h4 { font-size: 1.15em; }
	
	& > * {
		padding-inline: var(--gutter);
	}
		
	& pre {
		background: #eee;
		padding: 1em;
		border-radius: 8px;
		overflow-x: auto;
	}
}


















body:has([popover]:popover-open) {
	overflow: hidden;
	& * {
		pointer-events: none;
		&[popover] {
			pointer-events: all;
			* {
				pointer-events: all;
			}
		}
	}
}



#nav {
	padding: 3rem 1.5rem;
	& ul {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding-top: 3rem;
		/* justify-content: end; */
		& a {
			color: inherit;
			text-decoration: none;
			font-weight: 500;
			padding: .5em 0;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background: #0000;
				transition: background-color .25s ease;
			}
			&:hover:after, &:focus:after {
				display: none;
			}
		}
	}
}



			/* #nav {
				position: -webkit-fixed;
				position: fixed;
				top: 0;
				left: unset;
				bottom: unset;
				right: 0;
			}
			#nav:popover-open {
				display: flex;
				top: 0;
				left: unset;
				right: 0;
				width: min(100%, 400px);
				height: 100dvh;
				overflow-y: auto;
				margin: 0;
				padding: 4em 2em 2em !important;
				border: 0;
				animation: nav-popover .25s ease .05s backwards;
				&::backdrop {
					display: block;
					background: #5559;
					backdrop-filter: saturate(0%);
					animation: fadeIn 0.4s ease;
					pointer-events: visible;
					cursor: pointer;
				}
			}
			@keyframes nav-popover {
				from {
					opacity: 0;
					transform: translateX(100%);
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			} */
			#nav {
				flex-direction: column;
				gap: 1em;
				padding: 1em;
				background: #fff;
				color: #000;
				font-size: 1.2rem;
			}
			#nav a {
				color: inherit;
				text-decoration: none;
				font-weight: 500;
			}
			#nav a:hover {
				text-decoration: underline;
			}
			#nav a:focus {
				outline: 2px solid #000;
				outline-offset: 2px;
			}

			#nav > button:first-child {
				
				position: absolute;
				top: .5em;
				right: .5em;
			}

			



			/* header#SiteHeader > button[popovertarget="nav"] {
				font-size: 16px;
				display: inline;
				-webkit-appearance: none;
				border: 0;
				appearance: none;
				border-radius: 2em;
				background: black no-repeat 50% 50% / 1em;
				height: 1.75em;
				width: 3.15em;
				box-sizing: border-box;
				outline: none;
				margin: 0;
				padding: 0;
				text-indent: -9999999em;
				overflow: hidden;
				cursor: pointer;
			} */
		

			header#SiteHeader {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-block: 1em;
				background: #fff;
				border-bottom: 1px solid #0002;
				position: sticky;
				top: 0;
				z-index: 1000;
				font-weight: 500;
				gap: 1.5em;

				/* backdrop-filter: blur(20px); */
				& nav {
					flex-grow: 1;
					& ul {
						list-style: none;
						display: flex;
						gap: 1em;
						justify-content: end;
						& a {
							color: inherit;
							text-decoration: none;
							font-weight: 500;
							padding: .5em 0;
							position: relative;
							&:after {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 2px;
								background: #0000;
								transition: background-color .25s ease;
							}
							&:hover:after, &:focus:after {
								background: #0008;
							}
						}
						/* @media (max-width: 800px) {
							display: none;
						} */
					}
				}
			}



			.Breadcrumbs {
				display: flex;
				text-wrap: nowrap;
				overflow-x: auto;
				/* margin: 1em calc(var(--gutter) * -1) 0; */
				/* padding-inline: var(--gutter); */
				/* padding: 4em 2em 2em !important; */
				/* font-size: 0.85em; */
				font: .85em/1 'Outfit', sans-serif;

				color: #777;
				& > * {
					color: #999;
					text-decoration: none;
					&:after {
						content: '›';
						display: inline-block;
						width: auto;
						height: auto;
						margin: 0 0.5em;
						color: #ccc;
					}
				}
			}
		
			.Grid {
				display: grid;
				gap: 1em;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				margin: 2em 0;
				& > a {
					text-decoration: none;
					color: inherit;
					border: 1px solid red;
					text-align: center;
					&:hover h2 {
						text-decoration: underline;
					}
				}
			}

			.PlaceCards {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				grid-auto-flow: row;
				gap: var(--gutter);
				align-items: start;
				
				& > button {
					appearance: none;
					border: 1px solid #eee;
					border: none;
					background: transparent;
					padding: 0;
					font: inherit;
					text-align: left;

					display: grid;
					grid-template-columns: 6rem auto;
					column-gap: .5rem;
					
					cursor: pointer;
					/* & h3 {
						margin: 0;
						text-wrap: balance;
					}
					& p {
						margin: 0;
						font: .9em/1.4 'Outfit', sans-serif;
						color: #777;
					} */
				
					& img {
						width: 100%;
						aspect-ratio: 1	/ 1;
						border-radius: .5rem;
						/* grid-row: span 3; */
					}
					& div {
						display: flex;
						flex-direction: column;
						gap: .4em;
						text-wrap: balance;
						& > p, address {
							font-size: .9rem;
							line-height: 1.2;
						}
						& > address {
							color: #999;
							font-style: normal;
						}
						@media screen and (min-width: 1100px) {
							gap: .3em;
							& > p {
								font-size: .85em;
							}
						}
						& * {
							margin: 0;
							padding: 0;
						}
						& h3 {
							font-size: 1rem;
							font-weight: 500;
						}
					}
					/* & img ~ * {
						margin-top: .25rem;
					} */
				}
			}






















			/* #nav {
				position: -webkit-fixed;
				position: fixed;
				top: 0;
				left: unset;
				bottom: unset;
				right: 0;
			}
			#nav:popover-open {
				display: flex;
				top: 0;
				left: unset;
				right: 0;
				width: min(100%, 400px);
				height: 100dvh;
				overflow-y: auto;
				margin: 0;
				padding: 4em 2em 2em !important;
				border: 0;
				animation: nav-popover .25s ease .05s backwards;
				&::backdrop {
					display: block;
					background: #5559;
					backdrop-filter: saturate(0%);
					animation: fadeIn 0.4s ease;
					pointer-events: visible;
					cursor: pointer;
				}
			}
			@keyframes nav-popover {
				from {
					opacity: 0;
					transform: translateX(100%);
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			#nav {
				flex-direction: column;
				gap: 1em;
				padding: 1em;
				background: #fff;
				color: #000;
				font-size: 1.2rem;
			}
			#nav a {
				color: inherit;
				text-decoration: none;
				font-weight: 500;
			}
			#nav a:hover {
				text-decoration: underline;
			}
			#nav a:focus {
				outline: 2px solid #000;
				outline-offset: 2px;
			} */


		





		*[popover] {
			border: none;
			padding: 1em var(--gutter);
			background: #fff;
			width: min(100%, 49ch);
			box-sizing: border-box;
			height: 100dvh;
			overflow-y: scroll;
			margin: 0 !important;

			

			/* position: -webkit-fixed; */
			position: fixed;
			top: 0;
			left: unset;
			/* bottom: unset; */
			right: 0;

			transform: translate3d(0, 0, 0);



			/* box-shadow: 0 0 .5rem #0001; */

			
			
			&::backdrop {
				transform: translate3d(0, 0, 0);
				display: block;
				background: #8889;
				backdrop-filter: saturate(0%);
				animation: fadeIn 0.4s ease-out;
				/* animation: fadeIn .5s cubic-bezier(0.19,1.00,0.22,1.00); */
				pointer-events: none; 
				cursor: pointer;
			}
			/* &::before {
				content: " ";
				background: linear-gradient(#fff, transparent);
				position: fixed;
				height: 4rem;
				translate: -1rem -1rem;
				width: 100%;
			} */
			& button[popovertarget] {
				position: fixed;
				right: var(--gutter);

			}
			&:popover-open {
				/* animation: popover .15s ease-in-out .075s backwards; */
				animation: popover .4s cubic-bezier(0.19,1.00,0.22,1.00) .075s backwards;
				/* transition: transform 0.5s ; */
			}





			



			
		}
		@keyframes popover {
			from {
				opacity: 0;
				transform: translateX(100%);
			}
			to {
				opacity: 1;
				transform: translateX(0);
			}
		}
		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}



		/* the modal on small screens */
		@media (max-width: 700px) {
			*[popover] {
				width: calc(100dvw - var(--gutter));
				/* width: 100dvw; */
				/* height: 90dvh; */
				height: calc(100dvh - 4rem);
				top: 4rem;
				/* left: unset; */
				/* bottom: unset; */
				/* right: auto; */
				right: calc(var(--gutter) / 2);
				border-top-left-radius: 1rem !important;
				border-top-right-radius: 1rem !important;
				
				& button[popovertarget] {
					/* right: calc(var(--gutter) * 1.25); */
				}
				

				&::before {
					content: none;
					display: none;
				}
			}
			@keyframes popover {
				from {
					opacity: 0;
					transform: translateY(100%);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		}





.MaxWidthSmall {
	border-inline: calc((100dvw - var(--width-small) - var(--gutter) - var(--gutter)) / 2) solid transparent;
}
.MaxWidthMedium {
	border-inline: calc((100dvw - var(--width-medium) - var(--gutter) - var(--gutter)) / 2) solid transparent;
}
.MaxWidthLarge {
	border-inline: calc((100dvw - var(--width-large) - var(--gutter) - var(--gutter)) / 2) solid transparent;
}





figure.FeatureSet {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	margin: 2rem 0;
	& img {
		width: 100%;
		border-radius: 5px;
		aspect-ratio: 1;
		background: #eee;
	}
	& figcaption * {
		margin: 0;
		padding-block: 0 .5em;
	}
}



button {
	-webkit-tap-highlight-color: transparent;
	background: white;
	color: #999;
	border: 1px solid #ccc;
	cursor: pointer;
	z-index: +1;
	padding: .5em 1em;
	border-radius: 2em;
	/* right: var(--gutter); */
	text-transform: uppercase;
	font: .9rem/1 'Outfit', sans-serif;
	font-weight: 500;
}



/* nav li:not(.emphasis) {
	opacity: 0.5;
} */
@media (max-width: 860px) {
	nav .secondary {
		display: none
	}
}
@media (max-width: 1200px) {
	nav .tertiary {
		display: none
	}
}