:root {
	--accentColor: #65b175;
	--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: 'Outfit', '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: 0;
		color: #000;
		letter-spacing: -.02em;
		&.mega {
			font-size: clamp(3rem, 7vw, 7rem);
			letter-spacing: -.05em;
			line-height: 1;
			text-align: center;
			text-wrap: balance;
			padding-block: .75em;
			& small {
				display: block;
				font-size: max(.2em, .75rem);
				color: var(--accentColor);
				line-height: 1.1;
				letter-spacing: 0.25em;
				text-transform: uppercase;
			}
			& a {
				color: inherit;
				/* text-decoration: none; */
				text-decoration-line: underline;
				text-decoration-thickness: .05em;
				text-decoration-color: #ddd;
				text-decoration-skip-ink: none;
				text-decoration-style: wavy;
				text-underline-offset: .1em;
				&:hover, &:focus {
					text-decoration-color: inherit;
				}
			}
		}
	}
	& 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;
			}
		}
	}
}


			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;
				gap: 1em;


				& > #logo {
					margin-right: auto;
				}

				& > button[popovertarget="nav"] {
					font-size: 16px;
					display: inline;
					-webkit-appearance: none;
					border: 0;
					appearance: none;
					border-radius: 2em;
					height: 1.75em;
					width: 3.15em;
					box-sizing: border-box;
					outline: none;
					margin: 0;
					padding: 0;
					text-indent: -9999999em;
					overflow: hidden;
					cursor: pointer;



					background: rgb(0, 0, 0) url(/icon.burger.svg) no-repeat 50% 50% / 1.15em;

				}

					



				/* backdrop-filter: blur(20px); */
				/* & nav {
					display: flex;
					gap: 1em;
					& 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;
					}
				} */
			}

			.SearchForm {
				line-height: 1;
			}


			.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;
				padding-block: 1em;
				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;
					} */
				}
			}












			.DistilleryCards {
				& > button {
					all: unset;
					cursor: pointer;
					font-size: .95rem;
	
					
					
					
				
					& h2, h3, h4 {
						font: inherit;
						font-size: 1.15rem;
						line-height: 1.2;
						font-weight: 550;
						margin: 0;
						padding-bottom: .25em;
						text-wrap: balance;
					}
					& address {
						font-style: normal;
						/* font-size: .9rem; */
						color: #999;
						line-height: 1.2;
						margin: 0;
						padding: 0;
					}
					& > img {
						width: 100%;
						height: auto;
						aspect-ratio: 4/3;
						object-fit: cover;
						border-radius: 8px;
						margin-bottom: .75em;
					}
					& p {
						/* limit to first 4 lines of marketing copy */
						line-height: 1.4;
						margin: 0;
						padding-block: .25em;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
						text-wrap: balance;
					}
					& ul {
						/* make bullets into green checkmarks */
						list-style: none;
						padding-left: .5em;
						margin: .75em 0 0;
						& li {
							position: relative;
							padding-left: 1em;
							margin-bottom: .5em;
							line-height: 1.2;
							&::before {
								content: '✓';
								font-size: 1em;
								position: absolute;
								left: 0;
								top: 0;
								color: green;
							}
							&:last-child {
								margin-bottom: 0;
							}
						}
					}

				}

				display: grid;
				grid-auto-flow: row;
				gap: var(--gutter);
				align-items: start;

				@media (min-width: 600px) {	
					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				}

				@media (max-width: 599px) {
					& button {
						display: grid;
						grid-template-columns: 25dvw auto;
						column-gap: 1.0rem;
						& > img {
							aspect-ratio: 1/1;
						}
						& h2, h3, h4 {
							font-size: 1.1em;
						}
						& p {
							/* display: none; */
							-webkit-line-clamp: 2;
						}
						& ul {
							display: none;
						}
						& div {
							padding-top: .75em;
						}
					}
				}

			}




			.DistilleryDetails {
				& > img {
					aspect-ratio: 4/3;
					object-fit: cover;
					width: calc(100% + (var(--gutter) * 2));
					height: auto;
					margin-left: calc(var(--gutter) * -1);
					margin-block: 1em;
				}
			}






			*[popover] > * {
				padding: 1rem var(--gutter);
				& .Reviews {
					background: rgb(148, 255, 168);
					padding-top: .5em;
					border-radius: 8px;
					margin: 2em 0;
				}
			}





#nav {
	& section:first-of-type {
		h3 {
			font-size: 1.05em;
			font-weight: 500;
			color: var(--accentColor);
			margin: 1em 0 .5em;
		}
		& ul {
			list-style: none;
			display: flex;
			padding: 0;
			margin: 0;
			flex-direction: column;
			gap: .33em;
			& li {
				& a {
					color: inherit;
					text-decoration: none;
					font-weight: 500;
					padding: .5em 0;
				}
			}
		}
	}
}




			/* #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;
			padding: 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: rgba(77,77,77,.9);
				/* 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%;
			} */
			
			& > header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				/* background: linear-gradient(#fff 10%, #fff0 80%); */
				background: rgba(255,255,255,0.5);
				position: sticky;
				top: 0;
				/* backdrop-filter: blur(40px); */
				& button[popovertarget] {
					all: unset;
					margin-left: auto;
					/* position: fixed; */
					/* right: var(--gutter); */
					background: #fff;
					box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
					/* color: #fff; */
					border: none;
					cursor: pointer;
					/* z-index: +1; */
					/* padding: .5em 1em; */
					border-radius: 2em;
					/* right: var(--gutter); */
					text-transform: uppercase;
					font: .9em/1 'Outfit', sans-serif;
					font-weight: 600;
					border: 1.5px solid #0002;
					padding: .4em 1em;
					transition: border-color .25s ease;
					letter-spacing: .1em;
					&:hover {
						border-color: #0008;
					}
				}
			}
			
			&: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;
}









button {
	-webkit-tap-highlight-color: transparent;
}















form.SearchForm {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 110%;
	display: inline-block;
	position: relative;
	& fieldset {
		border: 0;
		margin: 0;
		padding: 0;
		line-height: 110%;
		display: flex;
		background-color: #eeeeee;
		border-radius: 1.5em;
		padding: .2em .2em .2em .8em;
		align-items: center;
		outline: 2px solid transparent;
		transition: outline 0.2s ease;
	}
	& fieldset:focus-within {
		outline: 2px solid var(--accentColor);
	}
	& input, button {
		-webkit-appearance: none;
		appearance: none;
		padding: 0;
		font: inherit;
		color: inherit;
		font: inherit;
		border: none;
		background: none;
		outline: none;
		cursor: text;
		width: 5em;
	}
	& button {
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: 1.5em;
		background: var(--accentColor) url(/icon.search_white.svg) no-repeat 52% 55% / 1em;
		height: 1.75em;
		width: 3.15em;
		cursor: pointer;
		text-indent: -99999em;
	}
}
form.SearchForm.big {
	font-size: 2rem !important;
}















footer {
	margin-block: 3rem 0;
	padding-block: 1rem;
	background: #f5f5f5;
	color: #1119;
	font-size: .9em;
	& hr {
		border-top: 1px solid #1111;
	}
	& nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1rem;
		& section {
			padding-block: .5em;
			& button {
				display: none;
			}
			& h4, button {
				display: block;
				appearance: none;
				background: transparent;
				border: none;
				padding: 0;
				margin: .5em 0;
				font: inherit;
				font-size: 1.075em;
				font-weight: 600;
				color: #0009;
			}
			& button {
				display: none;
				&::after {
					content: '❯';
					display: inline-block;
					width: auto;
					height: auto;
					font-size: .75em;
					transform: rotate(90deg);
					color: #1111;
					/* background: var(--color-border); */
					/* margin-top: .5em; */
				}
			}
			& ul {
				list-style: none;
				padding: 0;
				margin: 0;
				& li {
					margin-bottom: .5rem;
					& a {
						color: inherit;
						text-decoration: none;
						text-decoration-color: #0004 !important;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		@media screen and (max-width: 700px) {
			grid-template-columns: 1fr;
			gap: 0;
			& section {
				border-bottom: 1px solid #1111;
				&:last-child {
					border-bottom: none;
				}
				& button {
					/* display: block; */
					display: grid;
					grid-auto-flow: column;
					gap: .5em;
					letter-spacing: .0125em;
					cursor: pointer;
				}
				& h4 {
					display: none;
				}
				& h4 ~ * {
					display: none;
				}
				&.open {
					& button::after {
						transform: rotate(-90deg);
					}
					& h4 ~ * {
						display: initial;
					}
				}
			}
		}
	}
}