/* CSS RESET ===================================================== */
	
*, *::before, *::after {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

ol,
ul {
	list-style: none;
}

button {
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}


/* BASE ===================================================== */

:root {
	--black: rgb(0, 0, 0);
	--dark-grey: rgb(96, 96, 96);
	--light-grey: rgb(180, 180, 180);
	--v-light-grey: rgb(240, 240, 240);
	--white: rgb(255, 255, 255);

	--grid-one-quarter: 0.9rem;
	--grid-half: 1.8rem;
	--grid-three-quarters: 2.7rem;
	--grid: 3.6rem;
	--grid2: 7.2rem;
	--grid3: 10.8rem;
}

html {
	font-size: clamp(56.25%, 54.34% + 0.0762vw, 62.5%); /* 400px to 1712px 9px to 10px */
}

body {
	font-family: "warnock-pro", serif;
	font-variant-ligatures: common-ligatures;
	font-variant-numeric: oldstyle-nums;
	color: var(--black);
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	/*background-image: url("images/36px.png");
	background-position: center top;*/
	padding-top: var(--grid2);
}

img {
	width: 100%;
	height: auto;
}

main img,
.video-embed {
	margin-bottom: var(--grid2);
}

.video-embed {
	position: relative;
	height: 0;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-embed iframe,
.video-embed video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.figcaption {
	font-family: "acumin-pro", sans-serif;
	font-size: 1.6rem;
	line-height: var(--grid-three-quarters);
	padding: var(--grid-one-quarter) 0 var(--grid2) 0;
	color: var(--black);
	margin-top: calc(-1 * var(--grid2));
}


/* STRUCTURE ===================================================== */

.row {
	padding: 0 clamp(2rem, 0.41456rem + 3.9634vw, 7.2rem); /* 400px to 1712px */
}

.column {
	max-width: calc(22 * var(--grid));
	margin: 0 auto;
}

.column-wide {
	max-width: calc(44 * var(--grid));
	margin: 0 auto;
}

.grid-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-half);
}

.grid-layout img {
	margin-bottom: var(--grid-half);
}


/* HEADER ===================================================== */

header {
	color: var(--white);
	background-color: var(--black);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

header .row {
	height: var(--grid2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	font-family: "warnock-pro-display", serif;
	font-size: 3.6rem;
	font-weight: 700;
}

.nav-button {
	display: none;
}

nav,
.nav-button {
	font-family: "acumin-pro", sans-serif;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

nav ul {
	display: flex;
	gap: var(--grid-half);
}


/* BANNER ===================================================== */

.banner {
	height: 33.333333333vw;
	background-repeat: no-repeat, no-repeat;
	background-position: center center;
	background-size: cover;
}

.home-page .banner {
	background-image: url("images/culture-crisis.svg"), url("images/banner-fire.jpg");
}

.about-page .banner {
	background-image: url("images/culture-crisis.svg"), url("images/banner-sand-storm.jpg");
}

.services-page .banner {
	background-image: url("images/culture-crisis.svg"), url("images/banner-mountains.jpg");
}

.blog-page .banner {
	background-image: url("images/culture-crisis.svg"), url("images/banner-desert.jpg");	
}

.contact-page .banner {
	background-image: url("images/culture-crisis.svg"), url("images/banner-volcanic.jpg");
}


/* BODY OF SITE ===================================================== */

.page-title {
	font-family: "acumin-pro", sans-serif;
	font-size: 1.4rem;
	line-height: var(--grid3);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

h1 {
	font-family: "warnock-pro-display", serif;
	font-size: clamp(4.5rem, 3.6768rem + 2.0579vw, 7.2rem); /* 400px to 1712px 9px to 10px */
	line-height: 1em;
	padding-bottom: 2.5em;
}

h2 {
	font-family: "warnock-pro-display", serif;
	font-size: clamp(3rem, 2.4512rem + 1.372vw, 4.8rem); /* 400px to 1712px 9px to 10px */
	line-height: 1.125em;
	padding: 0.375em 0 0.75em 0;
}

h3 {
	font-size: 2.4rem;
	line-height: var(--grid);
	color: var(--black);
}

p {
	font-size: 2.4rem;
	line-height: var(--grid);
	padding-bottom: var(--grid);
	color: var(--dark-grey);
}

blockquote p {
	font-style: italic;
}

main ul,
main ol {
	padding-left: 1em;
	font-size: 2.4rem;
	line-height: var(--grid);
	padding-bottom: var(--grid);
	color: var(--dark-grey);
}

main ul {
	list-style: outside disc;
}

main ol {
	list-style: outside decimal;
}

main ul p,
main ol p {
	padding-bottom: 0;
}


/* FOOTER ===================================================== */

footer {
	margin-top: calc(6 * var(--grid));
	border-top: 1px solid var(--black);
	padding-top: var(--grid);
}

.design-credit {
	font-family: "acumin-pro", sans-serif;
	font-size: 1.4rem;
	line-height: var(--grid-half);
	padding: var(--grid) 0 var(--grid-half) 0;
}


/* LINKS ===================================================== */

a:link, a:visited { color: var(--dark-grey); text-decoration: none; }
a:hover, a:active { color: var(--black); text-decoration: none; }

main a {
	overflow-wrap: break-word;   /* modern, preferred */
	word-wrap: break-word;       /* legacy support */
	word-break: break-word;      /* WebKit/Safari quirk */
}

main a:link,
main a:visited {
	text-decoration-line: underline;
	text-decoration-color: var(--light-grey);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

main a:hover,
main a:active {
	text-decoration-line: underline;
	text-decoration-color: var(--black);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

header a:link, header a:visited { color: var(--white); }
header a:hover, header a:active { color: var(--white); }

nav a:hover, nav a:active { border-bottom: 1px solid; }

nav a[aria-current] { border-bottom: 1px solid; }


/* BLOG PAGE ===================================================== */

article a {
	display: block;
	border-top: 1px solid var(--black);
	padding: 5.4rem 0 var(--grid-half) 0;
}

article a:link, article a:visited { text-decoration: none; }
article a:hover, article a:active { text-decoration: none; background-color: var(--v-light-grey); }


/* RESPONSIVE ===================================================== */

@media screen and (max-width:900px) {

	.banner {
		height: 50vw;
		background-size: contain, cover;
	}

	.nav-button {
		display: block;
	}

	.nav-button:hover, .nav-button:active { border-bottom: 1px solid; }

	nav {
		display: none;
		font-family: "warnock-pro-display", serif;
		font-size: clamp(6.3rem, 5.4768rem + 2.0579vw, 9rem);
		text-transform: none;
		letter-spacing: 0;
		font-weight: 900;
		line-height: 1em;
		text-align: center;
	}

	body.nav-shown {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	body.nav-shown nav {
		display: block;
		position: fixed;
		top: 7.2rem; /* */
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 clamp(2rem, 0.41456rem + 3.9634vw, 7.2rem); /* 400px to 1712px */
		background-color: var(--black);
		overflow-y: auto;
		z-index: 200; /*  */
	}

	nav ul {
		display: block;
		padding: var(--grid) 0 var(--grid2) 0;
	}

	nav a:hover, nav a:active { color: var(--light-grey); border-bottom: none; }

	nav a[aria-current] { border-bottom: none; }
	
	.grid-layout {
		display: block;
	}
}