/* ▄▄ ▗▄▖       ▗▖        ▗▄▖ */
 /* █▀▀▌▝▜▌       ▐▌        ▝▜▌ */
/* ▐▌    ▐▌   ▟█▙ ▐▙█▙  ▟██▖ ▐▌ */
/* ▐▌▗▄▖ ▐▌  ▐▛ ▜▌▐▛ ▜▌ ▘▄▟▌ ▐▌ */
/* ▐▌▝▜▌ ▐▌  ▐▌ ▐▌▐▌ ▐▌▗█▀▜▌ ▐▌ */
 /* █▄▟▌ ▐▙▄ ▝█▄█▘▐█▄█▘▐▙▄█▌ ▐▙▄ */
  /* ▀▀   ▀▀  ▝▀▘ ▝▘▀▘  ▀▀▝▘  ▀▀ */

/* {{{ Global/shared styles */

:root {
		--wheel-font-size: 2.5;
		--wheel-spacing: 2.5;
		--font-family-primary: "Forum", serif;
		--font-family-secondary: "Quicksand", sans-serif;
		--background-color: #E3E2DD;
		--highlight-color: #A5A1A1;
		--text-color: #323031;
		--border-standard: 1px solid var(--highlight-color);
		--focus-color: var(--highlight-color);
		--text-input-color: #D8D2D2;
}

html, body {
	height: 100%;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

body {
  font-family: var(--font-family-primary);
  font-weight: 100;
  font-size: 1rem;
  font-weight: 300;
  background-color: var(--background-color);
  margin: 0;
  overflow-x: hidden;
}

* {
	border-color: var(--highlight-color);
	box-sizing: border-box;
}

a {
	/* color: #0077c; */
	text-decoration: none;
}

a:hover {
  color: #5F5B6B;
}

.container {
	/* display: flex; */
	flex-wrap: wrap;
	height: 100%;
	margin: 0 auto;
	width: 100%;
}



h2 {
	font-family: var(--font-family-secondary);
	font-weight: 100;
	font-size: 2rem;
	
}

.content-row {
	height: 20rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    background-color: var(--background-color);
}

.content-row article {
	padding: 2rem 4rem;
	width: 32rem;
}

.content-row > div {
	display: flex;
	flex-direction: row;
	width: 50%;
	justify-content: space-between;
	flex: 1;
}

.content-row > div > div {
	flex: 1;
	/* border-left: 1px solid #9F8082; */
}

.image-link {
		border-left: var(--border-standard);
		border-top: var(--border-standard);
}

#art-row .image-link {
		border-bottom: var(--border-standard);
}

#art-row .portfolio-block {
		border-top: var(--border-standard);
}

.portfolio article {
	height: 100%;
	width: 30rem;
}

/* .border-right { */
/* 	border-right: 1px solid; */ 
/* } */

#cta-row article + article {
	border-left: var(--border-standard) 
}

#blog-row, #cta-block, #email-block {
	border-top: var(--border-standard);
}

@keyframes fadeInHome {
	from {
			opacity: 0;
		}
	to {
			opacity: 1;
		}
}

.animation-wrapper {
		width: 100%;
		height: 100%;
		opacity: 0;
		animation: fadeInHome 1s ease-in forwards;
}

/* @keyframes menuBlur { */
/* 		from { */
/* 				filter: blur(0px); */
/* 			} */
/* 			to { */
/* 				filter: blur(3px); */
/* 			} */
/* } */

.menu-blur {
		/* animation: menuBlur 1s forwards; */
		filter: blur(5px);
}	

#blur-wrapper {
		transition: filter 0.5s ease-in-out;
}

input {
		font-family: var(--font-family-secondary);
}

input[type="email"]:focus {
		outline: 2px solid var(--focus-color);;
}

/* }}} */
/* /////////////////////////////////////////////////////////////////////////////////////////////// */
/* ▗▄ ▗▖            █                   █ */
/* ▐█ ▐▌            ▀             ▐▌    ▀ */
/* ▐▛▌▐▌ ▟██▖▐▙ ▟▌ ██   ▟█▟▌ ▟██▖▐███  ██   ▟█▙ ▐▙██▖ */
/* ▐▌█▐▌ ▘▄▟▌ █ █   █  ▐▛ ▜▌ ▘▄▟▌ ▐▌    █  ▐▛ ▜▌▐▛ ▐▌ */
/* ▐▌▐▟▌▗█▀▜▌ ▜▄▛   █  ▐▌ ▐▌▗█▀▜▌ ▐▌    █  ▐▌ ▐▌▐▌ ▐▌ */
/* ▐▌ █▌▐▙▄█▌ ▐█▌ ▗▄█▄▖▝█▄█▌▐▙▄█▌ ▐▙▄ ▗▄█▄▖▝█▄█▘▐▌ ▐▌ */
/* ▝▘ ▀▘ ▀▀▝▘  ▀  ▝▀▀▀▘ ▞▀▐▌ ▀▀▝▘  ▀▀ ▝▀▀▀▘ ▝▀▘ ▝▘ ▝▘ */
/*                      ▜█▛▘ */

/* {{{ Navigation bar */ 

nav {
		display: flex;  
		font-family: var(--font-family-secondary);
		padding: 3rem 4rem 2rem;
		align-items: center;
		justify-content: space-between;
		height: 8rem;
		width: 100%;
		flex-direction: row;
}

nav > div {
  display: flex;
  align-items: center;
  flex-direction: row;
}


.nav-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.1rem;
}

nav li {
  list-style-type: none;
}

#navlist {
  display: flex;
  gap: 4rem;
}

#desktop-contact {
		margin-left: 4rem;
}

nav button {
	border: none;	
	font-family: var(--font-family-secondary);
	background: none;
	font-weight: 300;
	font-size: 1rem;
}

.mobile-nav {
	display: none;
}

button:hover {
  color: #5F5B6B;
}

#nav-overlay {
		background-color: var(--background-color);
		border-top: var(--border-standard);
		display: flex;
		font-family: var(--font-family-primary);
		flex-direction: row;
		opacity: 0.9;
		z-index: 9999;
		position: fixed;
}

#nav-overlay div {
		display: flex;
		flex-direction: column;
		width: 50%;
		height: 100%;
		padding: 4rem;
}

.menuToggle {
		cursor: pointer;
}

.overlay-section p {
		font-weight: 400;	
		font-size: 1.5rem;
}

#overlay-design p {
		align-self: flex-end;
}

.no-scroll {
		overflow: hidden;
		height: 100%;
}

.menu {
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 8rem);
		transform: translateY(100%);
		transition: transform 0.4s ease-in-out;
		display: flex;
		align-items: center;
		padding-left: 2rem;
}

.menu.active {
		transform: translateY(0);
}

.overlay-section ul {
		list-style: none;
		padding: 0;
		padding-top: 2rem;
		margin: 0;
		text-align: center;
		border-top: var(--border-standard);
}

.menu > ul {
		display: flex;
		flex-direction: row;
}

.overlay-section li {
		margin: 20px 0;
}


.menu a {
		text-decoration: none;
		font-size: 1rem;
		color: #2D2F28;
	   transition: color 0.3s;	
}

.menu a:hover {
		color: var(--highlight-color);
}

.mobile-nav-link a {
		display: block;
}

/* }}} */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ▗▖ ▗▖ */
/* ▐▌ ▐▌ */
/* ▐▌ ▐▌ ▟█▙ ▐█▙█▖ ▟█▙ ▐▙█▙  ▟██▖ ▟█▟▌ ▟█▙ */
/* ▐███▌▐▛ ▜▌▐▌█▐▌▐▙▄▟▌▐▛ ▜▌ ▘▄▟▌▐▛ ▜▌▐▙▄▟▌ */
/* ▐▌ ▐▌▐▌ ▐▌▐▌█▐▌▐▛▀▀▘▐▌ ▐▌▗█▀▜▌▐▌ ▐▌▐▛▀▀▘ */
/* ▐▌ ▐▌▝█▄█▘▐▌█▐▌▝█▄▄▌▐█▄█▘▐▙▄█▌▝█▄█▌▝█▄▄▌ */
/* ▝▘ ▝▘ ▝▀▘ ▝▘▀▝▘ ▝▀▀ ▐▌▀▘  ▀▀▝▘ ▞▀▐▌ ▝▀▀ */
/*                     ▐▌         ▜█▛▘ */

/* {{{ Hero Section */


#hero {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	flex-direction: row;

	position: fixed;
	z-index: -1;

}

#hero article {
	/* border-bottom: var(--border-standard); */
	padding-top: 2rem;
	padding: 4rem;
	width: 100%;
	display: flex;
	flex-direction: row;
}

#hero article > div {
	display: flex;
	flex-direction: column;
	width: 50%;
}

.social-link {
}

.social-link:hover .social-icon {
	color: #5F5B6B;
	transition: all 0.3s ease;
}

.social-icon {
	width: 2rem;
	height: 2rem;
	color: #2D2F28;
}

.box-container {
	position: relative;
	padding: 60px 24px;
}

h1 {
  font-family: var(--font-family-primary);
  font-weight: 100;
  font-size: 4.5rem;
  color: var(--text-color);
  margin-bottom: 0rem;
  margin-top: 0;
}


#subheading {
  font-family: var(--font-family-secondary);
  font-weight: 100;
  font-size: 3rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
} 

.social-container {
		display: flex;
		gap: 1.5rem;
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
		color: var(--text-color);
}


#hero .newsletter {
		width: 100%;
		max-width: 300px;
	    background-color: var(--background-color);
}

#hero-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
}

.newsletter input[type="email"] {
		width: 100%;
		padding: 10px 16px;
		border: none;
		border-radius: 9999px;
		background-color: var(--text-input-color);
		font-size: 14px;
}

.newsletter button {
		font-family: var(--font-family-primary);
		font-size: 16px !important;
}

.custom-substack + .success {
		color: #E3E2DD;
}

/* ----------------------------------------------------------------------------
Art & Design rows */

#home-content {
		/* padding-top: 60vh; */
		top: 80vh;
		position: absolute;
		width: 100%;
}

#design-block {
	align-self: flex-end;
	border-left: var(--border-standard); 
}

.portfolio-block {
	/* background-color: #4C4C47; */
	/* color: #E5E9D8; */
}

#art-row {
	margin-bottom: 2rem;
	box-shadow: 0 -4px 20px #A5A1A1; 
}

.button-row {
	display: flex;
	font-family: var(--font-family-secondary);
	flex-direction: row;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.portfolio-button {
	color: var(--text-color);
	border: var(--border-standard); 
	border-radius: 5rem;
	padding: 0.5rem 2rem;
	transition: all 0.3s ease;
	text-decoration: none;
	min-width: 5rem;
	/* max-width: */
	display: flex;
	justify-content: center;
}



/* ----------------------------------------------------------
Blog row */

#blog-row {
	height: 20rem;
	width: 100%;
	display: flex;
	flex-direction: column;
    background-color: var(--background-color);
	/* padding-left: 2rem; */
}

#blog-row div {
	display: flex;
	justify-content: center;	
}

#blog-row div h2 {
		margin-bottom: 0;
		margin-top: 1.5rem;
}

#blog-row-head {
		display: flex;
		flex-direction: column;
}

.blog-previews {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	border-top: var(--border-standard);
	border-right: var(--border-standard);
	border-left: var(--border-standard); 
}

.blog-previews > div {
height: 100%;	
width: 100%;
display: flex;
flex-direction: column;
}

.blog-previews .portfolio-button {
		max-width: 5rem;
		font-size: 1rem;
}

.blog-link {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}

.blog-link + .blog-link {
	border-left: var(--border-standard);
}

#blog-see-all {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: var(--border-standard);
}

/*------------------------------------------------------------------------------------------------ 
Contact section */

#cta-row {
	flex-direction: row;
}

#contact {
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-size: 1.5rem;
}

#emailcontact:hover {
  color: #5F5B6B;
}

h3>a {
  color: #171A0F;
}

#cta-block {
	width: 50%;
	display: flex;
	flex-direction: column;
	padding: 5rem;
	justify-content: center;
	align-items: center;

}

#cta-block p {
}

#cta-block .newsletter {
		padding: 0rem 2rem;
		width: 100%;
}


#email-block {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem;
	background-color: var(--background-color); 
}

#email-block h3 {
		margin: 0rem;
}

#email-block a {
text-decoration: none;	
}

/* @keyframes pulseBorder { */
/* 		0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); } */
/* 		70% { box-shadow: 0 0 0 10px rgba(255, 204, 0, 0); } */
/* 		100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); } */
/* } */

/* .highlight-pulse { */
/* 		animation: pulseBorder 6.2s ease-out; */
/* } */

@keyframes flashHighlight {
		0% { background-color: var(--highlight-color); }
		100% { background-color: transparent; }
}

.highlight-pulse {
		animation: flashHighlight 2s ease-out !important;
}

/* }}} */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
 /* ▄▄▖                  ▄▄      ▗▄▖    █ */
/* ▐▛▀▜▖           ▐▌   ▐▛▀      ▝▜▌    ▀ */
/* ▐▌ ▐▌ ▟█▙  █▟█▌▐███ ▐███  ▟█▙  ▐▌   ██   ▟█▙ */
/* ▐██▛ ▐▛ ▜▌ █▘   ▐▌   ▐▌  ▐▛ ▜▌ ▐▌    █  ▐▛ ▜▌ */
/* ▐▌   ▐▌ ▐▌ █    ▐▌   ▐▌  ▐▌ ▐▌ ▐▌    █  ▐▌ ▐▌ */
/* ▐▌   ▝█▄█▘ █    ▐▙▄  ▐▌  ▝█▄█▘ ▐▙▄ ▗▄█▄▖▝█▄█▘ */
/* ▝▘    ▝▀▘  ▀     ▀▀  ▝▘   ▝▀▘   ▀▀ ▝▀▀▀▘ ▝▀▘ */

/* {{{ Portfolio Pages */

/* ░█▀█░█▀▄░▀█▀ */
/* ░█▀█░█▀▄░░█░ */
/* ░▀░▀░▀░▀░░▀░ */



/* ░█▀▄░█▀▀░█▀▀░▀█▀░█▀▀░█▀█ */
/* ░█░█░█▀▀░▀▀█░░█░░█░█░█░█ */
/* ░▀▀░░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀ */


.portfolio-overview {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	height: 15rem;
	width: 100%;
	border-bottom: 1px solid #9F8082;
	padding: 2rem 4rem 0rem;;
}

.portfolio-overview h1 {
	color: #765E5F;
	font-family: var(--font-family-secondary);
	margin-bottom: 1rem;
}

.portfolio-overview p {
		font-size: 1.25rem;
}

.casestudy-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	height: 30rem;
	width: 100%;
	border-bottom: 1px solid #9F8082;
}

.portfolio-card + .portfolio-card {
	border-left: 1px solid #9F8082;
}

.portfolio-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	height: 100%;
	width: 50%;
	padding: 4rem;
}

.card-main {
		margin-bottom: 3rem;
}

.card-main h2 {
		font-size: 1.75rem;
		font-weight: 400;
}

.card-main ul {
		line-height: 1.5;
		margin-top: 0.75rem;
}

.card-main + div {
		display: flex;
}

.project-symbol {
	height: 3rem;
	width: 3rem;
	background-color: lightgray;
	margin-bottom: 1.5rem;
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 4rem;
	width: 100%;
	background-color: var(--background-color);
	border-top: var(--border-standard);
}

.display-none {
		display: none;
}

/* }}} */

/* #404-body { */
/* 		display: flex; */
/* 		flex-direction: column; */
/* 		background-color: var(--background-color); */
/* 		justify-content: center; */
/* 		align-items: center; */
/* 		padding: 12rem; */
/* } */
/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* blog */
/* ▗▄▄▖ ▗▄▖ */
/* ▐▛▀▜▌▝▜▌ */
/* ▐▌ ▐▌ ▐▌   ▟█▙  ▟█▟▌ */
/* ▐███  ▐▌  ▐▛ ▜▌▐▛ ▜▌ */
/* ▐▌ ▐▌ ▐▌  ▐▌ ▐▌▐▌ ▐▌ */
/* ▐▙▄▟▌ ▐▙▄ ▝█▄█▘▝█▄█▌ */
/* ▝▀▀▀   ▀▀  ▝▀▘  ▞▀▐▌ */
/*                 ▜█▛▘ */

/* {{{ Blog */ 

/* ░▀█▀░█▀█░█▀▄░█▀▀░█░█ */
/* ░░█░░█░█░█░█░█▀▀░▄▀▄ */
/* ░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀ */

.blog-index-page {
		font-family: var(--font-family-primary);
}

.blog-index-page h1 {
		padding: 4rem;
		padding-top: 0;
		font-family: var(--font-family-primary);
		color: var(--text-color);
}

.blog-index-page .portfolio-overview {
		justify-content: center;
		align-items: center;
		border: none;
}

.index-body ul {
		font-size: 1.25rem;	
}

.index-body {
		display: flex;
		max-width: 660px;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		/* padding-left: 20%; */
}

/* ░█▀█░█▀█░█▀▀░▀█▀ */
/* ░█▀▀░█░█░▀▀█░░█░ */
/* ░▀░░░▀▀▀░▀▀▀░░▀░ */

.blog-heading h1 {
		font-size: 2.5rem;
}

.blog-heading p {
		font-family: var(--font-family-secondary);
}

.blog-heading p span {
		font-family: var(--font-family-primary);
}

.blog-container {
		max-width: 660px;
		margin: 0 auto;
		padding: 0 16px;
		line-height: 1.6;
}

.blog-container article {
		font-size: 1.2rem;
}

.meta {
		margin-bottom: 1.5rem;	
}

.bold {
		font-weight: bold;
}

/* }}} */
/* /////////////////////////////////////////////////////////////////////////////////////////////// */
/* ▗▄▄▖                                 █ */ 
/* ▐▛▀▜▌                                ▀ */
/* ▐▌ ▐▌ ▟█▙ ▗▟██▖▐▙█▙  ▟█▙ ▐▙██▖▗▟██▖ ██  ▐▙ ▟▌ ▟█▙ */
/* ▐███ ▐▙▄▟▌▐▙▄▖▘▐▛ ▜▌▐▛ ▜▌▐▛ ▐▌▐▙▄▖▘  █   █ █ ▐▙▄▟▌ */
/* ▐▌▝█▖▐▛▀▀▘ ▀▀█▖▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ ▀▀█▖  █   ▜▄▛ ▐▛▀▀▘ */
/* ▐▌ ▐▌▝█▄▄▌▐▄▄▟▌▐█▄█▘▝█▄█▘▐▌ ▐▌▐▄▄▟▌▗▄█▄▖ ▐█▌ ▝█▄▄▌ */
/* ▝▘ ▝▀ ▝▀▀  ▀▀▀ ▐▌▀▘  ▝▀▘ ▝▘ ▝▘ ▀▀▀ ▝▀▀▀▘  ▀   ▝▀▀ */
/*                ▐▌ */

/* {{{ responsive */

/* small/mobile {{{ */

/* ░█▀▀ */
/* ░▀▀█ */
/* ░▀▀▀ */

/* min-width should be 320px for future ref */
@media screen and (max-width: 599px) {

		html, body {
			/* overflow-x: hidden; (this caused some glitchy scroll on mobile) */
		}

		body {
				position: relative;
				font-size: 1.1rem;
		}

		nav {
			padding: 2rem;
			height: 6rem;
		}

		nav button {
			font-size: 1.1rem;
		}

		#email-block {
			align-items: flex-start !important;
		}

		#nav-overlay {
				background-color: var(--background-color);
				border-top: var(--border-standard);
				display: flex;
				flex-direction: row;
				opacity: 0.9;
				z-index: 9999;
				position: fixed;
		}

		#nav-overlay div {
				padding: 0;
		}

		#nav-overlay > ul {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0;
				margin: 0;
				height: 100%;
				align-self: flex-start;
				margin-top: 1rem;
				margin-right: 3rem;
				width: 100%;
		}

		#nav-overlay > ul > li {
				height: 5rem;
		}

		#nav-overlay > ul > li + li {
				height: 5rem;
				border-top: var(--border-standard);
		}

		.overlay-section {
		}

		.overlay-section p {
				/* font-weight: 400; */	
				/* font-size: 5.5rem; */
				margin: 0;
		}

		.overlay-section a {
				font-weight: 300;	
				font-size: 2.5rem;
		}

		#overlay-design p {
				align-self: center;
		}

		.mobile-link a {
				font-size: 2.5rem;
		}

		.mobile-nav-link {
			align-self: center;
			width: 100%;
			/* padding-left: 4rem; */

		}

		.menu {
				bottom: 0;
				left: 0;
				width: 100%;
				height: calc(100% - 8rem);
				transform: translateY(100%);
				transition: transform 0.4s ease-in-out;
				display: flex;
				/* justify-content: center; */
				/* align-items: center; */
		}

		.overlay-section ul {
			display: none;	
		}

		#nav-overlay div {
			width: 100%;
			height: 2rem;
		}

		.menu {  
			height: calc(100% - 6rem);
			display: flex;
			flex-direction: column;
		}

		.mobile-nav {
			display: block;
		}

		#navlist, #desktop-contact {
			display: none;
		}

		#hero {
			/* position: static; */
		}

		#home-content {
			top: 100vh;
		}

		#hero article {
			flex-direction: column;
			padding: 2rem;
		}

		h1 {
			font-size: 4rem;
		}

		#hero article > div {
			width: 100%;
		}

		#hero-right {
			width: 100%;
			align-items: flex-start;
			border-top: var(--border-standard);
		}

		#hero .newsletter {
			/* width: 90%; */
		}

		.image-links {
			display: none;
		}

		.content-row > div {
			display: none;
		}

		.portfolio {
			border-top: var(--border-standard);
		}

		.content-row {
			height: 19rem
		}

		.content-row article {
			padding: 2rem;
		}

		#art-row {
			margin-bottom: 0;
		}

		#design-block {
			border-left: 0;
		}

		#blog-row {
			flex-direction: row;
			height: 8rem;
			padding-left: 2rem;
		}

		#blog-row > div {
			width: 50%;
		}

		#blog-row div h2 {
			margin: 0;
		}

		#blog-row .blog-link {
			display: none !important;
		}

		#blog-see-all {
			border: 0;
		}

		.blog-previews {
			border: 0;
		}

		#blog-row p {
			display: none;
		}

		#cta-row {
			flex-direction: column;
			box-shadow: inset 0 4px 5px var(--highlight-color);
		}

		#cta-row article {
			width: 100%;
		}

		#cta-block {
			padding: 2rem;
		}

		#cta-block .newsletter {
				padding: 0rem;
				width: 100%;
				max-width: 400px;
		}

		#email-block {
			padding: 2rem;
		}

		.casestudy-row {
			flex-direction: column;

			height: auto;
		}
		
		.portfolio-card {
			width: 100%;
			border-bottom: var(--border-standard);
			border-left: 0;
			border-top: 0;
			border-right: 0;
			padding: 2rem;
		}


		.portfolio-overview {
			justify-content: flex-start;
			align-items: flex-start;
			padding: 2rem 2rem 0rem;;
			height: auto;
			padding-bottom: 1rem;
		}
		
		.portfolio-overview h1  {
			padding-left: 0rem;
		}

		.portfolio-overview p {
			font-size: 1rem;
		}

		.card-main li {
			font-size: 1rem;
		}

		.ring {
				display: none;
				top: 38rem !important;
				left: 1rem !important;
				animation: spin 120s infinite linear !important;  
		}

		.wheel-container {
				display: none;
		}

		#art-row {
		/* border-bottom: var(--border-standard); */
		}

		.blog-index-page .portfolio-overview h1 {
				padding: 0rem;
		}
}

/* }}} */

/* {{{ medium/tablet */

/* ░▀█▀░█▀█░█▀▄░█░░░█▀▀░▀█▀ */
/* ░░█░░█▀█░█▀▄░█░░░█▀▀░░█░ */
/* ░░▀░░▀░▀░▀▀░░▀▀▀░▀▀▀░░▀░ */

@media screen and (min-width: 900px) {
		.mobile-link {
			display: none;
		}

		#design-row {
				box-shadow: 0 -2rem var(--background-color);
		}


}

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

		#nav-overlay p a {
				font-size: 2.5rem;
		}

		.overlay-section ul {
				border-top: var(--border-standard);
		}

		#nav-overlay {
				background-color: var(--background-color); 
				border-top: var(--border-standard);
				display: flex;
				flex-direction: row;
				opacity: 0.9;
				z-index: 9999;
				position: fixed;
		}

		#nav-overlay div {
				padding: 0;
		}

		#nav-overlay > ul {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0;
				margin: 0;
				height: 100%;
				align-self: flex-start;
				margin-top: 1rem;
				margin-right: 3rem;
				width: 100%;
		}

		#nav-overlay > ul > li {
				height: 5rem;
		}

		#nav-overlay > ul > li + li {
				height: 5rem;
				border-top: var(--border-standard);
		}

		.overlay-section {
		}

		.overlay-section p {
				/* font-weight: 400; */	
				/* font-size: 5.5rem; */
				margin: 0;
		}




		.overlay-section a {
				font-weight: 300;	
				font-size: 2.5rem;
		}

		#overlay-design p {
				align-self: center;
		}

		.mobile-link a {
				font-size: 2.5rem;
		}

		.mobile-nav-link {
			align-self: center;
			width: 100%;
			/* padding-left: 4rem; */

		}

		.menu {
				bottom: 0;
				left: 0;
				width: 100%;
				height: calc(100% - 8rem);
				transform: translateY(100%);
				transition: transform 0.4s ease-in-out;
				display: flex;
				/* justify-content: center; */
				/* align-items: center; */
		}

		.overlay-section ul {
			display: none;	
		}

		#nav-overlay div {
			width: 100%;
			height: 2rem;
		}

		.menu {  
			height: calc(100% - 6rem);
			display: flex;
			flex-direction: column;
		}

		.mobile-nav {
			display: block;
		}

		#navlist, #desktop-contact {
			display: none;
		}

		#home-content {
			top: 100vh;
		}

		#hero article {
				flex-direction: column;
		}

		#hero article div {
				width: 100%;
		}

		#hero-right {
			align-items: flex-start;
		}

		#art-row {
			margin-bottom: 0;
		}

		.image-links {
			display: none;
		}

		.content-row > div {
			display: none;
		}

		.portfolio {
			border-top: var(--border-standard);
		}

		#art-row .portfolio-block {
			border: 0;
		}

		#cta-row {
			flex-direction: column;
		}

		#cta-row article {
			width: 100%;
		}

		#cta-block {
			padding: 2rem;
		}

		#cta-block .newsletter {
				padding: 0rem;
				width: 100%;
				max-width: 400px;
		}

		#email-block {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.ring {
			display: none;
		}

}

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

		}

		#nav-overlay p a {
				font-size: 2.5rem;
		}

		.ring {
			display: none;
		}

		#cta-block .newsletter {
				padding: 0rem;
		}


}

/* }}} */

/* {{{ large/desktop */

/* ░█▀▄░█▀▀░█▀▀░█░█░▀█▀░█▀█░█▀█ */
/* ░█░█░█▀▀░▀▀█░█▀▄░░█░░█░█░█▀▀ */
/* ░▀▀░░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░░ */

@media screen and (min-width: 1200px) {
		html {

		}

		#hero-right {
			align-items: flex-end;
		}

		#hero-right p {
				padding-left: 13px;
		}
	
		#cta-row .newsletter {
			width: 80%;
		}
		
		#nav-overlay {
			padding: 2rem 4rem 2rem;
		}

		#nav-overlay ul {
			width: 100%;
		}

		#nav-overlay > ul {
				width: 100%;
				padding-left: 0;
		}

		#nav-overlay > ul > li {
				width: 100%;
		}

		#nav-overlay p a {
				font-size: 2rem;
		}

		.overlay-section {
				width: 100%;
		}

		.mobile-link {
				display: none;
		}

		#nav-overlay div {
				width: 100%;
		}

		#design-row {
				box-shadow: 0 -2rem var(--background-color);
		}

}

/*-----------------------------------------------------------------------------------*/

.wheel-container {
		position: absolute;
		pointer-events: none;
		z-index: -1;
		width: 100%;
		height: 10vh;
		max-height: 50rem;
		overflow: hidden;
}

section:first-of-type {
	min-height: 250px;
	height: calc(2 * var(--buffer));
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

section:last-of-type {
	display: grid;
	gap: 2rem;
}

form {
	display: inline-grid;
	grid-template-columns: auto auto;
	gap: 0.5rem 1rem;
	justify-content: center;
}

:where(p,ul,ol,dl,h6) {
  /* font-size: var(--font-size-0); */
}

.ring {
/* 	--character-width: 1ch; */
	--inner-angle: calc((360 / var(--char-count)) * 1deg);
	--character-width: 1;
	font-family: var(--font-family-primary);
	text-transform: uppercase;
	font-size: calc(var(--font-size, 1) * 1rem);
	position: fixed;
	pointer-events: none;
	z-index: -1;
	/* top: 86%; */
	/* left: 90%; */
	top: 86rem;
	left: 76rem;


	/* top: 46%; */
	/* left: 80%; */
}
@media (prefers-reduced-motion: no-preference) {
  .ring {
  	animation: spin 180s infinite linear;  
	animation-direction: reverse;
  }
  @keyframes spin {
    to {
      rotate: 360deg;
    }
  }
}

.char {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
/* 	line-height: 1; */
	transform:
		translate(-50%, -50%)
		rotate(calc(var(--inner-angle) * var(--char-index)))
		translateY(var(--radius));
}

/* }}} */