:root {

	/** Original **/
	--color-alternate-rgb: 107, 140, 134;
	--color-light-rgb: 216, 205, 184;
	--color-neutral-rgb:165, 147, 124;
	--color-accent-rgb:165, 3, 3;
	--color-dark-rgb: 12, 12, 12;

	/* architecture */
	--color-alternate-rgb: 65, 142, 191;
	--color-light-rgb: 242, 203, 155;
	--color-neutral-rgb:191, 168, 149;
	--color-accent-rgb:119, 189, 216;
	--color-dark-rgb: 87, 89, 37;


	/* grey-and-yellow */
	--color-alternate-rgb: 87, 84, 89;
	--color-light-rgb: 255, 255, 255;
	--color-neutral-rgb: 126, 126, 126;
	--color-accent-rgb: 251, 242, 124;
	--color-dark-rgb: 0, 0, 0;

	/* grey-and-yellow */
	--color-alternate-rgb: 100,100,80;
	--color-light-rgb: 220,220,210;
	--color-neutral-rgb: 126, 126, 110;
	--color-accent-rgb: 255, 255, 220;
	--color-dark-rgb: 30,30,20;


	--color-alternate: rgba(var(--color-alternate-rgb), 1);
	--color-light: rgba(var(--color-light-rgb), 1);
	--color-neutral: rgba(var(--color-neutral-rgb), 1);
	--color-accent: rgba(var(--color-accent-rgb), 1);
	--color-dark: rgba(var(--color-dark-rgb), 1);

	--horizontal-container-padding: 1rem;
	--vertical-container-padding: 1rem;

	--header-fonts: bio-sans;
}

@media all and (min-width:800px) {
	:root {
		--horizontal-container-padding: 6vw;
		--vertical-container-padding: 6vh;
	}
}

html, body {
	font-family: questa-grande, Garamond, ‘Hoefler Text’, ‘Times New Roman’, Times, serif;
	margin:0;
	padding:0;

	background-color:white;
}

body {
	background-color:var(--color-dark);
	min-height:100vh;

}

h1, h2, h3, h4, h5, h6, .logo {
	font-family: var(--header-fonts);
	margin:1em 0;
}

h3 svg {
	width: 1em;
	height:1em;
	vertical-align: middle;
}

h1 {
	font-size:1.5rem;
}

h2 {

}

h3 {

}

a:link {
	color:inherit;
	text-decoration:underline;
	text-decoration-color: var(--color-accent)
}

a:active {
	text-decoration-color:var(--color-alternate);
}

@media (hover:hover) {
	a:hover {
		text-decoration-style: double;

	}
}

a:visited {
	color:inherit;
	text-decoration-color: var(--color-neutral);
}


.logo {
	display:grid;
	grid-template-rows:1fr 1fr;
	grid-template-columns: 4.5rem auto;

}

.lettermark {
	font-size:3.5rem;
	line-height:2.4rem;
	font-weight:600;
	color: transparent;
	background-color:var(--color-neutral);
//	text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
	-webkit-background-clip:text;
	-moz-background-clip:text;
	background-clip:text;
	z-index: 2;
	grid-column: 1 / span 1;
	grid-row: 1 / span 2;

}

.lettermark:hover {
//	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.logo-text {
	font-size:1rem;
	font-weight:600;
	text-transform: uppercase;
	color:var(--color-neutral);
}

.logo .logo-text {
	align-self:end;
}
.logo .logo-text:last-of-type {
	align-self:start;
}

.logo-text {
	display:none;
}
.lettermark {
	min-height:3rem;
}

@media all and (min-width: 800px) {
	.logo-text {
		display:inline;
	}
	.lettermark {
		min-height:none;
	}
}

@media all and (min-width: 400px) {
	footer .logo-text {
		display:inline;
	}
	footer .lettermark {
		min-height:none;
	}
}


body > header {
	padding: 0.5rem var(--horizontal-container-padding);
	position: fixed;
	box-sizing: border-box;
	width:100vw;

	display:flex;
	flex-direction:row;
	justify-content: space-between;
	z-index:100;

	background: linear-gradient(
		to top,
		rgba(var(--color-dark-rgb), 0) 0,
		rgba(var(--color-dark-rgb), 1) 2.5rem
	);

}

body > header a[href^="tel"] {
	background-color: var(--color-alternate);
	color:white;
	text-decoration: none;
	padding: 0.6em 1em;
	border-radius: 1.2em;
	align-self:center;
	font-family:bio-sans,sans-serif;
}

a.logo-link {
	text-decoration:none;
}


main > header {
	padding: 4rem var(--horizontal-container-padding) 4rem var(--horizontal-container-padding);
	font-family: var(--header-fonts);
	position:relative;
	min-height:15vh;
	display:flex;
	flex-direction:column;
	//background-color:var(--color-dark);
	//background-image:radial-gradient(ellipse at bottom left, rgba(0,0,0,0.1), rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5));
	color:white;


}

main > header h1 {
	margin-bottom:0;
}
main > header p {
	margin-top:1em;
}

@media all and (min-width:800px) {
	main > header p {
		margin-top:0
	}
}
main > .page-header {
	padding-bottom:1rem;
}



body > footer {

	padding: 3rem var(--horizontal-container-padding);
	color:var(--color-light);
	margin-bottom:0;
	font-family:var(--header-fonts);
	font-weight:300;
	font-size: 0.85rem;
}

footer svg {
	width:1em;
	height:1em;
	fill: var(--color-light);
	display:inline;
	vertical-align: middle;
	margin-right:0.5em;
}
footer .copyright {
	margin-bottom:0;
	font-size:0.66rem;
	text-align:center;
	opacity:0.5;
}

footer .logo {
	margin: 3em 0;
	justify-content: center;
}

footer address {
	font-style:normal;
}


footer address,
footer nav,
footer .hours {
	margin:0 auto 2rem auto;
	width:-moz-fit-content;
	width:fit-content;

}

footer address > *,
footer nav > *,
footer .hours > * {
	width:-moz-fit-content;
	width: fit-content;
}


@media screen and (min-width:600px) {
	body > footer {
		display:grid;
		grid-template-columns: 1fr 1fr;

	}

	footer address,
	footer nav,
	footer .hours {
		margin:0 var(--horizontal-container-padding) 1rem var(--horizontal-container-padding);
		width:auto;
	}

	footer .copyright,
	footer .logo {
		grid-column: 1 / span 2;
	}
}

@media screen and (min-width: 800px) {
	body > footer {
		grid-template-columns: 1fr 1fr 1fr;
		padding-bottom:4rem;
	}

	footer address {
		grid-column: 1 / span 2;
		display:grid;
		grid-template-columns: 1fr 1fr;
	}

	footer address h4 {
		grid-column: 1 / span 2;
	}



	footer address,
	footer nav,
	footer .hours {
		width: 100%;
	}




	footer .logo,
	footer .copyright {
		grid-row: 3 / span 1;
		padding-top:3rem;
		align-self: start;
		margin:0;
		justify-content:start;
	}

	footer .copyright {
		align-self: end;
		grid-row: 3 / span 1;
		grid-column: 3 / span 1;
		text-align:left;
	}
}

footer nav ul {
	list-style: none;
	padding:0;
}

footer h4,
footer h6 {
	margin-top:0;
}


.card {
	background:var(--color-light);
	margin:var(--vertical-container-padding) var(--horizontal-container-padding);
	padding: var(--vertical-container-padding) var(--horizontal-container-padding);
	box-shadow: 2px 2px 5px 0px var(--color-alternate);

	border-radius: 0px;
}

.card.secondary {
	background-color:rgba(var(--color-light-rgb), 0.85);
}

.card > h2:first-of-type,
.card > h3:first-of-type {
	margin-top:0;
}

.card h3 * {
	vertical-align: baseline;
}