@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,400;100,500;100,600;125,700&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@500&family=Material+Icons+Sharp&family=Zilla+Slab:wght@400;500;600;700&family=Mansalva&display=swap");

:root {
	--edge: 1rem;
	font-size: 120%;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	--fontsize-xxxl: 4.375rem;
	--fontsize-xxl: 3rem;
	--fontsize-xl: 2.25rem;
	--fontsize-l: 1.5rem;
	--fontsize-m: 1rem;
	--fontsize-s: 0.8125rem;
	--lineheight-xxxl: 1;
	--lineheight-xxl: 1;
	--lineheight-xl: 1.11111;
	--lineheight-l: 1.33333;
	--lineheight-m: 1.5625;
	--lineheight-m-reduced: 1.375;
	--lineheight-s: 1.53846;
	--color: #b9d0fa;
	--black: #2f2f1f;
	--gray: #424242;
	--white: #f8fcfb;
	--primary: #ec8c87;
	--secondary: #9c5427;
	--tertiary: #e7edf0;
	--colorHover: #ff3773;
	--colorHoverSecondary: #f8fbff;
	--colorText: #002035;
	--colorShadow: #00203507;
	--colorBackground: #eff6ff;
	--colorBackgroundSecondary: #e5f0ff;
	--colorControlOutline: #dde8f3;
	--colorBackgroundInverted: #1e1e1e;
	--colorTextInverted: #fff;
	--colorMarker: #ffffcf;
	--spacer-mono: calc(0.6 * var(--fontsize-s));
	--spacer-xxxl: calc(4rem * var(--lineheight-m));
	--spacer-xxl: calc(3rem * var(--lineheight-m));
	--spacer-xl: calc(2rem * var(--lineheight-m));
	--spacer-l: calc(1.75rem * var(--lineheight-m));
	--spacer-m: calc(1rem * var(--lineheight-m));
	--spacer-s: calc(0.5rem * var(--lineheight-m));
	--spacer-xs: calc(0.125rem * var(--lineheight-m));
	--ratio: 1.6;
	--baseline: calc(var(--ratio) * 1rem);
	--negative-gap: calc((var(--baseline) * -1) + 0.25rem);
	--baselinex2: calc(var(--baseline) * 2);
	--baselinex3: calc(var(--baseline) * 3);
	--grid: calc(var(--baseline) / 2);
	--grid-quarter: calc(var(--baseline) / 4);
	--page-padding: 4vw;
	--radius: var(--grid-quarter);
	--contentHeight: 35vh;
}

@media screen and (max-width: 799px) {
	:root {
		--typescale: 1.333;
	}
}

@media screen and (min-width: 800px) {
	:root {
		--typescale: 1.414;
	}
}

*,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	background-repeat: no-repeat;
}

body {
	font-family: "Zilla Slab", serif;
	background-color: var(--white);
	color: var(--black);
	min-height: 100%;
}

html {
	font-size: calc(100% + 0.133vw);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	height: 100%;
}

img {
	max-width: 100%;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Archivo", sans-serif;
	text-transform: lowercase;
	font-stretch: 125%;
	font-weight: 700;
}

h1 {
	font-size: calc(
		0.8rem * var(--typescale) * var(--typescale) * var(--typescale)
	);
	line-height: 1.15;
}

h2 {
	font-size: calc(2rem / var(--typescale));
	line-height: 1.3;
}

h3 {
	font-size: 1rem;
	line-height: 1.2;
}

h4 {
	font-size: 0.875rem;
	font-size: calc(1rem / var(--typescale));
}

em,
i {
	font-style: italic;
}

a,
strong,
cite,
time {
	font-weight: 700;
}

blockquote,
h3 em,
h3 em a {
	font-style: italic;
	font-weight: 700;
}

.sr-only {
	left: -9999rem;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--primary);
	transition: all 0.2s ease-in-out;
}

a:hover {
	opacity: 1;
	text-decoration-color: inherit;
}

a.btn {
	display: inline-block;
	background-color: var(--white);
	color: var(--primary);
	text-decoration: none;
	padding: 8px;
	border-radius: 5px;
	border: 1px solid var(--primary);
	border-right: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	font-family: "Archivo", sans-serif;
	font-stretch: 125%;
	text-transform: lowercase;
	font-size: 1rem;
	font-weight: 700;
	margin-top: 1rem;
}

a.btn.primary {
	background-color: var(--primary);
	color: var(--black);
	border: 1px solid var(--black);
	border-right: 2px solid var(--black);
	border-bottom: 2px solid var(--black);
}

a.btn:hover,
a.btn:focus {
	filter: brightness(110%);
}

a.btn.primary:hover,
a.btn.primary:focus {
	filter: brightness(95%);
}

input,
button {
	font-size: 1rem;
	line-height: var(--baseline);
}

cite,
.caption,
figcaption {
	font-size: 0.875rem;
	line-height: 1.5;
	padding: var(--grid-quarter) 0 0 var(--grid-quarter);
	font-weight: 400;
	opacity: 0.8;
}

cite:before,
.caption:before,
figcaption:before {
	content: "↑";
	margin-right: var(--grid-quarter);
}

figcaption p {
	display: inline-block;
}

nav ul a {
	font-family: "Archivo", sans-serif;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 700;
}

.menu-icon,
#menu-toggle {
	display: none;
}

.logo {
	height: 1.755rem;
}

.logo svg {
	display: block;
	fill: currentColor;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.logo a {
	display: block;
	width: 8rem;
	height: 100%;
}

.logo .mobile {
	display: none;
}

@media only screen and (max-width: 999px) {
	.logo {
		height: 2.5rem;
	}

	.logo svg {
		width: 250px;
		position: initial;
		top: initial;
		max-width: initial;
	}
}

@media screen and (min-width: 900px) {
	.logo {
		height: calc(
			1rem * var(--typescale) * var(--typescale) * var(--typescale)
		);
		margin-left: -0.6rem;
	}

	.logo a {
		padding-top: 0.4rem;
	}

	nav ul {
		margin-top: 3rem;
	}
}

nav,
header,
main,
footer {
	display: grid;
}

footer .grid {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--grid);
}

footer {
	margin-top: var(--baselinex2);
	padding-block: var(--baseline) var(--baselinex2);
	background-color: var(--tertiary);
}

article * + * {
	margin-top: var(--baseline);
}

article * + * cite,
article * + * .caption,
article * + * figcaption {
	margin-top: 0;
}

article * + * img {
	border-radius: var(--radius);
}

article h3 + * {
	margin-top: 0.5rem;
}

aside {
	border-left: 2px solid var(--tertiary);
	padding-left: var(--baseline);
}

aside.with-background {
	padding-left: inherit;
	border-left: 0;
	background-color: var(--tertiary);
	padding: 1rem;
}

aside #project-industry {
	margin-bottom: 1rem;
}

aside #project-services {
}

aside h3 {
	margin-bottom: 1em;
}

main h3,
aside h4 {
	font-style: italic;
	position: relative;
	font-family: "Zilla Slab", serif;
	text-align: center;
	margin-bottom: 0.5em;
	margin-top: 2rem;
	font-size: calc(1.5rem / var(--typescale));
	font-weight: 600;
	text-transform: none;
}

main h3:after,
aside h4:after {
	content: "";
	display: block;
	max-width: 360px;
	height: 1px;
	background: var(--tertiary);
	margin: 5px auto 10px;
}

aside h4:first-of-type {
	margin-top: 1.5rem;
}

main ul,
main ol {
	margin-left: 0;
	list-style: none;
}

main ul li:before,
main ol li:before {
	content: "• ";
	color: var(--primary);
	font-size: inherit;
	line-height: 1;
}

main li + li {
	margin-top: 0.25rem;
}

main ul.no-margin {
	margin-top: 0;
}

@keyframes cursor-blink {
	0% {
		opacity: 0;
	}
}

.blinker::after {
	content: "";
	width: var(--spacer-mono);
	height: 1rem;
	background: currentColor;
	display: inline-block;
	margin: 0 0 -0.15em 1px;
}

.blinker::after {
	animation: cursor-blink 1.5s steps(2) infinite;
}

@media screen and (min-width: 330px) and(max-width: 999px) {
	aside {
		display: grid;
		gap: var(--baselinex3);
		grid-template-columns: max-content 2fr;
	}

	aside > * {
		margin-top: 0;
	}
}

@media screen and (max-width: 999px) {
	header {
		background-color: var(--tertiary);
		padding: var(--baseline) 0;
	}

	footer .meta {
		display: grid;
	}

	footer .meta > * + * {
		margin-top: var(--baseline);
	}

	main {
		margin-top: var(--baseline);
	}

	header,
	main,
	footer {
		grid-template-columns: 1fr minmax(10ch, 45ch) 1fr;
		gap: var(--baseline);
	}

	header > *,
	main > *,
	footer > * {
		grid-column: 2;
	}

	main.hasMasthead {
		margin-top: 0;
		grid-column: 1 / span 3;
		order: -1;
	}

	header figure,
	header picture,
	main figure,
	main picture,
	footer figure,
	footer picture {
		grid-column: 1 / span 3;
	}

	header figure img,
	header picture img,
	main figure img,
	main picture img,
	footer figure img,
	footer picture img {
		grid-column: 1 / span 3;
	}

	aside {
		border-left: 0;
		padding-left: 0;
		border-top: 2px solid var(--tertiary);
		padding-top: var(--baseline);
	}
}

@media screen and (min-width: 1000px) {
	:root {
		--sidebar: 15ch;
		--content-column: minmax(40ch, 70ch);
		--aside: minmax(15ch, 25ch);
		--main-grid: 1fr var(--sidebar) 0.33fr minmax(60ch, 100ch) 1fr;
	}

	body {
		display: grid;
		grid-template-columns: var(--main-grid);
		column-gap: var(--baseline);
		row-gap: 0;
		grid-template-rows: min-content 1fr min-content;
	}

	nav {
		grid-column: 2;
		grid-row: 1 / span 3;
		height: 100vh;
		grid-template-columns: unset;
		grid-template-rows: min-content min-content auto min-content;
		padding-block: 6vh var(--baselinex2);
		background-color: unset;
		min-width: 200px;
	}

	nav .logo {
		grid-row: 1;
	}

	nav ul {
		grid-row: 2;
		flex-direction: column;
		padding-top: 8vh;
	}

	nav ul li + li {
		margin: 0;
	}

	nav .site-meta {
		display: block;
		grid-row: 4;
	}

	.socials {
		list-style-type: none;
		margin-left: 0;
	}

	.socials a {
		opacity: 0.6;
	}

	.socials a:hover {
		opacity: 1;
	}

	nav .site-meta .socials {
		display: flex;
		flex-direction: row;
		gap: 1ch;
		margin-bottom: 0.5rem;
	}

	header,
	main {
		grid-column: 4;
		grid-template-columns: var(--content-column) auto var(--aside);
		column-gap: var(--baseline);
	}

	header {
		grid-row: 1;
		padding-top: 6vh;
		background-color: unset;
	}

	main {
		grid-row: 2;
		margin-top: 8vh;
		row-gap: var(--baseline);
	}

	main > * {
		grid-column: 1;
	}

	main .masthead {
		grid-row: 1;
		grid-column: 1 / span 3;
	}

	main .masthead img {
		border-radius: var(--radius);
	}

	main .masthead,
	main .full-width {
		grid-column: 1 / span 3;
	}

	main aside {
		grid-column: 3;
		grid-row: 1;
	}

	main.hasMasthead aside {
		grid-row: 2;
	}

	footer {
		grid-row: 3;
		grid-column: 1 / span 5;
		grid-template-columns: var(--main-grid);
		margin-top: var(--baselinex3);
		gap: var(--baseline);
	}

	footer .meta {
		display: grid;
		gap: var(--baseline);
		grid-column: 4;
		grid-template-columns: minmax(20ch, 30ch) minmax(20ch, 30ch);
	}

	footer .meta h2 {
		grid-column: 1 / span 2;
	}

	footer .meta .contact-info {
		grid-column: 1;
	}
}

nav {
	position: sticky;
	top: 0;
}

nav a {
	text-decoration: none;
}

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

nav ul a {
	opacity: 0.5;
	display: inline-block;
}

.main-nav a:after {
	content: "";
	position: absolute;
	left: 105%;
	top: 0;
	bottom: 0;
	font-size: 1.25rem;
	line-height: 0.65;
	color: var(--primary);
}

.main-nav li.active a {
	opacity: 1;
	position: relative;
}

.main-nav li.active a:after {
	font-family: "Material Icons Sharp";
	content: "\e5c8";
}

@media only screen and (max-width: 999px) {
	.menu-icon {
		display: block;
		white-space: nowrap;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		margin: 0;
		position: absolute;
		right: var(--page-padding);
		top: 1.4rem;
	}

	.menu-icon svg {
		fill: currentColor;
	}

	.menu-icon svg rect {
		transition: all 0.2s ease-in-out;
		transform-origin: center center;
	}

	.menu-icon:hover,
	.menu-icon:active {
		color: var(--primary);
	}

	#menu-toggle:checked ~ .menu-icon {
		color: var(--primary);
	}

	#menu-toggle:checked ~ .menu-icon .bar {
		opacity: 0;
	}

	#menu-toggle:checked ~ .menu-icon #turn1 {
		transform: rotate(45deg);
	}

	#menu-toggle:checked ~ .menu-icon #turn2 {
		transform: rotate(-45deg);
	}

	nav {
		padding: var(--grid) var(--baseline);
		z-index: 10;
		background: var(--tertiary);
	}

	nav .logo {
		grid-row: 1;
	}

	nav .logo .full {
		display: none;
	}

	nav .logo .mobile {
		display: block;
	}

	nav .site-meta {
		display: none;
	}

	nav #menu-toggle:checked ~ ul {
		height: auto;
		max-height: 500px;
		overflow: visible;
		padding: var(--grid) 0;
		border-bottom: 2px solid var(--gray);
	}

	nav ul.main-nav {
		grid-row: 2;
		display: block;
		max-height: 0;
		margin-left: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
		transition: all 0.2s ease-in-out;
	}

	nav ul.main-nav li {
		margin-top: 0.5rem;
	}

	nav ul.main-nav a {
		font-size: 1.2rem;
	}

	nav ul.main-nav a:after {
		font-size: 1.6rem;
	}
}

.projects-grid article {
	list-style-type: none;
	margin: 0;
	padding: 1rem;
	margin-bottom: 6rem;
	border-radius: var(--radius);
}

@media screen and (min-width: 1000px) {
	.projects-grid article {
		display: grid;
		grid-template-columns: 35% 65%;
	}
}

.projects-grid article:last-of-type {
	margin: 0;
}

.projects-grid article h2 {
	font-size: revert;
	margin-bottom: 1rem;
}

.projects-grid article h3 {
	font-family: "Archivo", sans-serif;
	text-transform: lowercase;
	font-stretch: 125%;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 65%;
	margin-bottom: 2rem;
	text-align: initial;
	position: initial;
	font-style: initial;
}

.projects-grid article h3::after {
	display: none;
	margin: 0;
}

.projects-grid article * {
	margin-top: 0;
}

.projects-grid article figure {
	order: 2;
	margin-left: 2rem;
}

.projects-grid article div {
	margin: auto 0;
	order: 1;
}

.projects-grid article a.btn {
	margin-top: 2rem;
	color: var(--black);
	border-color: var(--black);
}

@media screen and (max-width: 999px) {
	.projects-grid article {
		grid-column: 1 / span 3;
	}

	.projects-grid article figure {
		display: none;
	}
}

.masonary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	list-style-type: none;
	margin: 0;
}

.home .masonary-grid {
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.masonary-grid * {
	margin-top: 0;
}

.masonary-grid li::before {
	content: "";
}

.masonary-grid .masonary-item {
	aspect-ratio: 1/1;
	overflow: hidden;
	position: relative;
}

.masonary-grid .masonary-item.wide {
	grid-column: span 2;
	aspect-ratio: 2/1;
}

.masonary-grid .masonary-item.wide figure {
	width: 100%;
	height: 100%;
}

.masonary-grid .masonary-item.wide figure img {
	max-width: initial;
	max-height: 100%;
}

.masonary-grid .masonary-item a {
	text-decoration: none;
}

.masonary-grid .masonary-item figure {
	grid-row: 1;
	grid-column: 1;
}

.masonary-grid .masonary-item .masonary-title {
	transition: all 0.2s ease-in-out;
	position: absolute;
	bottom: calc(var(--baselinex2) * -1);
	opacity: 0;
	left: 0;
	right: 0;
}

.masonary-grid .masonary-item .masonary-title h4 {
	background-color: var(--primary);
	padding: var(--grid);
	color: var(--black);
}

.masonary-grid .masonary-item:hover .masonary-title,
.masonary-grid .masonary-item:focus .masonary-title {
	opacity: 1;
	bottom: 0;
}

.about .masonary-grid .masonary-item {
	aspect-ratio: initial;
	padding: 1rem;
}

.about .masonary-grid .masonary-item .body {
	font-size: 85%;
}

.honeypot {
	position: absolute;
	left: -9999px;
}

form {
	margin-top: 2rem;
}

form .field {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.alert {
	color: white;
	padding: 20px;
	margin-top: 1em;
	margin-bottom: 1em;
	opacity: 0.83;
	transition: opacity 0.6s;
	font-weight: 700;
}

.alert.warning {
	background-color: #f44336;
}

.alert.success {
	background-color: #04aa6d;
}

form .field.has-error span {
	color: #f44336;
	font-size: 85%;
}

form label {
	font-size: 75%;
	margin-bottom: 0.25rem;
	display: block;
	font-family: "Archivo", sans-serif;
	text-transform: lowercase;
	font-stretch: 125%;
	font-weight: 700;
}

form .field.has-error label {
	color: #f44336;
}

input,
textarea,
button {
	margin-top: 0;
	width: 100%;
	background-color: #ffffff;
	border: 2px solid var(--tertiary);
	font-family: "Zilla Slab", serif;
	font-size: 14pt;
	padding: 5px;
}

textarea {
	resize: vertical;
}

form .field.has-error input,
form .field.has-error textarea {
	border-color: #f44336;
}

button,
input[type="submit"] {
	width: unset;
	background-color: var(--tertiary);
	font-family: "Archivo", sans-serif;
	text-transform: lowercase;
	font-stretch: 125%;
	font-weight: 700;
	font-size: 16pt;
	border-radius: 5px;
	padding: 8px;
	color: var(--black);
}

summary {
	display: block;
	cursor: pointer;
	padding: 5px;
	transition: 0.3s;
	border-bottom: 2px solid;
	border-bottom-color: var(--tertiary);
	user-select: none;
	color: var(--black);
}

summary h3 {
	font-family: "Archivo", sans-serif;
	font-stretch: 125%;
	font-weight: 700;
	font-size: 85%;
	font-style: initial;
	position: initial;
	text-align: initial;
	margin: initial;
	display: initial;
}

summary h3::after {
	display: none;
	border: none;
}

details > div {
	user-select: none;
	margin: 0;
}

details > div > h4 {
	margin-top: 1rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--secondary);
}

details > div > p {
	margin-top: 0.5rem;
}

details[open] > summary {
	color: var(--primary);
}

@media (min-width: 768px) {
	details[open] > div > p {
		opacity: 0;
		animation-name: showContent;
		animation-duration: 0.6s;
		animation-delay: 0.2s;
		animation-fill-mode: forwards;
		margin: 0;
	}

	details[open] > div {
		animation-name: slideDown;
		animation-duration: 0.3s;
		animation-fill-mode: forwards;
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		height: 0;
		padding: 0;
	}

	to {
		opacity: 1;
		max-height: var(--contentHeight);
		padding: 20px;
	}
}

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