/*Begin reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/*End reset*/

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  src: url('/font/atkinson-hyperlegible-v11-latin-regular.woff2') format('woff2'); 
}
@font-face {
	font-display: swap;
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	src: url('/font/atkinson-hyperlegible-v11-latin-italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	src: url('/font/atkinson-hyperlegible-v11-latin-700.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	src: url('/font/atkinson-hyperlegible-v11-latin-700italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'TM bold';
  font-style: normal;
  src: url('/font/tm_bold.woff2') format('woff2'); 
}
:root {
	overflow-x: hidden;
	scrollbar-width: auto;
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
	background: #444; /*visible when using keyboard w/ mobile nav or w/ stable scrollbar gutter*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-synthesis: none;
}
.container {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	display: grid;
	grid-template-rows: auto 1fr auto;
	--pri: #215794;
	--sec: #935537;
	--sec-alt: #d59160;
	--pri-clr: #0e2642db;
	--lite: #ece7e3;
	--dark: #0f0f0f;
	--lord: var(--lite);
	--dorl: var(--dark);
	--pord: var(--pri);
	--lord-clr: color-mix(in srgb, var(--lord) 60%, transparent);
	--glass: rgba(255,255,255,0.75);
	--bluelight: #90d0ff33;
	--liteshadow: rgba(0,0,0,0.15);
	--shadow: rgba(0,0,0,0.25);
	--clear: rgba(0,0,0,0);
	--nav-height: 9em;
	--mob-nav-width: calc(100vw);
	--inf: calc(infinity * 1px);
	--nav-highlight: rgba(153, 153, 153, 0.25);
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	background: var(--lord);
	color: var(--dorl);
	background: var(--lord);
	transition: background-color 0.1s ease-out;
}
#darklitecheck:checked {
	& ~ .container {
		--lord: var(--dark);
		--dorl: var(--lite);
		--pri: #70aaec;
		--pord: var(--dark);
		background: var(--lord);
	}
	& ~ .container #darklitelabel::after {
		--pol: -1;
		transform: translatey(var(--width));
	}
}
.htmx-swapping {
	opacity: 0;
	transition: opacity 0.15s ease-out;
}
.htmx-added {
	opacity: 0;
}
.info-needed-shell {
	display: none;
	&:hover {
		opacity: 1;
	}
	position: absolute;
	left: 0;
	top: 100%;
	color: red;
	padding: 0.5lh;
	background: var(--lord);
	&, body:has(& input:checked) .info-needed {
		outline: 4px solid red !important;
		outline-offset: -4px;
	}
}
main {
	opacity: 1;
	transition: opacity 0.15s ease-out;
	padding-block: calc(var(--nav-height) + 4em) 2em;
	&:has(.landing) {
		padding-top: var(--nav-height);
	}
}
p, h2, ul {
	max-width: 65ch;
	.centered & {
		margin-inline: auto;
	}
}
.homebelow p {
	margin: auto auto 0.5em auto;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
.centered {
	display: grid;
	position: relative;
	width: clamp(40em,120em,100%);
	margin: 0 auto;
}
header,footer {
	position: relative;
	display: grid;
	grid-template-rows: 1fr;
	align-content: center;
	z-index: 10;
	transition: background-color 0.1s ease-out;
}
header,footer,nav {
	position: relative;
}
a {
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent) !important;
}
a:not(nav a, .c2aouter) {
	color: var(--pri);
}
a:not(header a,.c2aouter):hover {
	border-radius: 0.05rem;
	outline: 0.2rem solid color-mix(in srgb, currentColor 50%, transparent);
	outline-offset: 0.1rem;
	text-decoration: none;
}
nav a:hover:not(.navbutton), header .logo:hover:not(#darklitelabel:hover) {
	background-color: var(--nav-highlight);
}
nav a {
	box-shadow: inset 0 0 var(--dorl);
	transition: box-shadow 0.1s linear;
	font-size: 1.25em;
}
.logo:hover ~ nav a,nav:hover a {
	box-shadow: inset 0 0 var(--dorl);
}

html {
  --s: 5em; /*size*/
  --c1: #ffffff05;
  --_g: #0000 90deg,var(--c1) 0;
}
header {
	position: absolute;
	height: var(--nav-height);
	width: 100%;
	border-bottom: 0.125em solid #000a;
	background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--pri-clr);
	background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
	animation: bgmove 5s linear infinite paused;
	backdrop-filter: blur(0.5em);
	z-index: 20;
	& a {
		color: #fff;
	}
}
@keyframes bgmove {
	to {
		background-position-x: calc(-1 * var(--s));
		background-position-y: calc(-1 * var(--s));
	}
}
.htmx-request {
	animation-play-state: running;
}
header .centered {
	grid-template-rows: 1fr;
	grid-template-columns: auto 1fr;
}
p + :is(p, ul) {
	padding-top: 1lh;
	&:is(p) {
		text-indent: 3em;
	}
	&:has(.sep) {
		text-indent: unset;
	}
}
.no-indent {
	text-indent: unset;
	& + ul {
		padding-top: unset;
	}
}
main {
	& :is(p, ul) {
		width: 100%;
		line-height: 1.5em;
		font-size: 1.25em;
	}
	ul {
		list-style-type: disc;
		list-style-position: outside;
		padding-inline: 1em;
		margin-bottom: 2lh;
	}
	li::marker {
		color: color-mix(in srgb, currentColor 50%, transparent);
	}
}
.file-info {
	color: color-mix(in srgb, var(--dorl) 75%, transparent);
	text-decoration: unset;
	font-size: 0.75em;
	display: inline-block;
	margin-inline-start: 1ch;
	padding-inline: 0.5em;
	background: #6663;
	border-radius: 0.25rem;
}
.employment a[download], .size {
	white-space: nowrap;
}
sub {
	font-size: 0.75em;
	margin-left: 0.25ch;
}
.size {
	opacity: 0.75;
}
/*----BORGIR----*/
#burgertog {
	display:none;
}
#burgertog:checked ~ header nav, .navopen header nav {
	transform: unset;
}
#burgertog:checked ~ header span #b1, .navopen header span #b1 {
	transform: translate3d(0,calc(var(--nav-height) / 6),0) rotate(45deg) scale(1.125);
}
#burgertog:checked ~ header span #b2, .navopen header span #b2 {
	transform: scalex(0);
	opacity: 0;
}
#burgertog:checked ~ header span #b3, .navopen header span #b3 {
	transform: translate3d(0,calc(-1 * var(--nav-height) / 6),0) rotate(-45deg) scale(1.125);
}
#burgertog:checked ~ .overlay, .navopen .overlay {
	pointer-events: unset;
	opacity: 0.35;
	transition: opacity 0.05s 0.085s linear;
}	
#burgerouter {
	display: none;
	position: relative;
	width: var(--nav-height);
	aspect-ratio: 1 / 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: #fff;
}
#burgerouter::after {
	content: 'Menu';
	text-transform: uppercase;
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	pointer-events: none;
	font-size: 0.75em;
	text-align: center;
	padding: 1.125em 0 0 0.375em;
	letter-spacing: 0.1em;
}	
#burgerouter:hover {
	background-color: var(--nav-highlight);;
}
#burgerouter,.burger {
	aspect-ratio: 1 / 1;
}
.burger {
	display: grid;
	width: 50%;
	grid-template-rows: repeat(3, 1fr);
	align-items: center;
	transform: scale(0.8) translate(0.125em, 0.5em);
}
.burger span {
	height: calc(var(--nav-height) / 16);
	width: 100%;
	background-color: #fff;
	transition: transform 0.075s linear, border-radius 0.075s linear;
	transform-origin: center;
}
#b2 {
	transition: transform 0.075s linear, opacity 0.075s ease-out;
}
/*----END BORGIR----*/
nav {
	height: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}
nav a[href="/employment"]::after {
	content: '';
	display: inline-block;
	height: 0.5em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	margin-left: 0.75ch;
	background:
		radial-gradient(
			var(--grad1),
			var(--grad2)
		);
	filter: brightness(1.8) saturate(13);
	box-shadow: 0 0 0.25em #fff5;
	opacity: 0.75;
}
#darklitecheck {
	display: none;
}
#darklitelabel {
	font-size: 0.75em;
	--width: 1.75em;
	width: var(--width);
	border-radius: var(--width);
	height: calc(var(--width) * 2);
	border: 0.25em solid color-mix(in srgb, var(--lite) 20%, transparent);
	background: unset;
	position: absolute;
	right: 1rem;
	top: 1.125em;
	cursor: pointer;
	transition: opacity 0.1s linear;
	box-shadow: 0 0.125em 0 #00000009;
	&::after {
		--pol: 1;
		content: '';
		position: inherit;
		border-radius: 100%;
		background: var(--lite);
		aspect-ratio: 1 / 1;
		width: calc(var(--width) - 0.5em);
		inset: 0;
		box-shadow: 0 calc(var(--pol) * 0.2em) 0 color-mix(in srgb, var(--dark) 25%, transparent);
		transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
	}
}
.logoouter {
	position: relative;
}
.logo {
	display: block;
	align-content: center;
	padding: 1rem 1.5rem;
	user-select: none;
	header & svg {
		fill: #fff;
		width: 100%;
		height: 100%;
		filter: drop-shadow(0.125em 0.125em 0 #000a);
	}
	header & {
		height: var(--nav-height);
	}
	footer & {
		width: 100%;
		padding-inline-start: 0;
	}
}
nav a {
	padding: 0.5em;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	text-shadow: 0 0.125em 4px #0006;
}
.overlay {
	pointer-events: none;
	position: fixed;
	width: 100%;
	height: calc(100vb - var(--nav-height));
	background-color: #000;
	z-index: 15;
	opacity: 0;
	position: absolute;
	top: var(--nav-height);
}
h1 {
	font-size: 3em;
	width: 100%;
	margin-inline: auto;
	margin-block: auto 1em;
	text-align: center;
	font-family: 'TM bold', serif;
}
h1 span {
	display: block;
}
h3 {
	font-size: 1.5em;
	margin-bottom: 0.25em;
	.hero & {
		text-align: end;
		text-shadow: 0.1rem 0.1rem 0.1rem color-mix(in srgb, var(--lord) 60%, transparent);
	}
}
h4 {
	color: color-mix(in srgb, var(--sec) 90%, var(--dorl));
	padding-bottom: 0.5em;
	font-size: 1.125em;
	font-style: italic;
}
hr {
	margin: 1em 0;
	padding: 0 2em;
	border: none;
	height: 0.125em;
	background: var(--dorl);
}
main .centered {
	margin: 0 auto;
}
/*----HOMEPAGE----*/

.landing {
	--pri-clr: color-mix(in srgb, var(--pri) 20%, transparent);
	position: relative;
	width: 100%;
	margin-block: calc(-1 * var(--nav-height)) 0;
	padding-block: calc(var(--nav-height) + 4em) 4em;
	margin-inline: auto;
	transition: background-color 0.2s linear;
	background: url('/img/portfolio_1.jpg') no-repeat center / cover;
	background-attachment: fixed;
	&::after {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		width: inherit;
		height: 100%;
		background: linear-gradient(var(--pri-clr), var(--pri-clr));
	}
}
.hero {
	max-width: 45em;
	margin-inline: auto;
	text-align: center;
	text-wrap: balance;
	z-index: 5;
	& h1 {
		text-align: start;
		z-index: 2;
		font-size: 3em;
		line-height: 1.25em;
		background: color-mix(in srgb, var(--sec) 40%, var(--dorl));
		text-shadow: 0.05rem 0.05rem 3px color-mix(in srgb, var(--lite) 50%, transparent);
		color: transparent;
		background-clip: text;
		filter: saturate(2) contrast(1.5);
		body:has(#darklitecheck:checked) & {
			background: unset;
			filter: unset;
			color: var(--lite);
			text-shadow: 0.05rem 0.05rem 3px color-mix(in srgb, var(--dark) 50%, transparent);
		}
	}
}
.heromeat {
	position: relative;
	margin-inline: auto;
	margin-block: auto 2em;
	display: grid;
	padding: 2em;
	background: linear-gradient(
		55deg,
		var(--lord-clr),
		95%,
		var(--lite)
	);
	border: 0.5em solid var(--lord);
	border-block-color: color-mix(in srgb, var(--lord) 85%, var(--dorl));
	border-radius: 0 4em 0 4em;
	overflow: hidden;
	transform: perspective(6in) rotateY(22.5deg);
	transform-style: preserve-3d;
	transform-origin: left;
	will-change: transform;
	animation: un-transform 0.3s 0.5s ease-out forwards;
}
@keyframes un-transform {
	to {
		opacity: 1;
		transform: unset;
	}
}
.hero-lower {
	& h2 {
		font-family: 'Atkinson Hyperlegible', sans-serif;
		font-style: italic;
		color: var(--lord);
		text-shadow: 
			0.1rem 0.1rem 0 var(--pri),
			0.2rem 0.2rem 0 var(--pri),
			0.3rem 0.3rem 0 var(--pri),
			0.4rem 0.4rem 6px color-mix(in srgb, var(--dorl) 30%, transparent);
		opacity: 0;
		animation: un-transform 0.3s 0.8s linear forwards;
	}
	& > span:nth-of-type(1) {
		animation-delay: 0.8s;
	}
	& > span:nth-of-type(2) {
		animation-delay: 0.9s;
	}
	& > span:nth-of-type(3) {
		animation-delay: 1s;
	}
}
.constr-div {
	--icon-width: 3em;
	background: var(--lord-clr);
	font-size: 1.5em;
	margin: 0.75em;
	text-transform: uppercase;
	border-radius: var(--inf);
	display: grid;
	align-items: center;
	justify-content: center;
	color: var(--pri);
	transform: translateX(-10em);
	opacity: 0;
	will-change: transform;
	animation: un-transform 0.5s ease-out forwards;
	transition: scale 0.05s linear;
	cursor: default;
	& > span {
		display: inherit;
		grid-template-columns: auto auto;
		column-gap: 0.5em;
		align-items: center;
		width: fit-content;
		body:has(#darklitecheck:checked) & {
			text-shadow: 1px 1px 0 color-mix(in srgb, var(--lord) 80%, transparent);
		}
	}
	& svg {
		width: var(--icon-width);
		body:has(#darklitecheck:checked) & {
			filter: drop-shadow(1px 1px 0 color-mix(in srgb, var(--lord) 80%, transparent));
		}
		& + span {
			width: 9ch;
		}
	}
	&:hover {
		scale: 1.05;
	}
	
}
#wood {
	transform: rotate(22.5deg);
}
.heromeat, .constr-div {
	backdrop-filter: blur(7px) saturate(500%);
}
.c2aouter {
	display: block;
	.hero & {
		width: fit-content;
		font-size: 1.25em;
		margin-block: 2em 3em;
		margin-inline: auto;
	}
	.about & {
		margin-block-start: 2.5lh;
	}
}
.homebelow {
	--oval-mask: radial-gradient(ellipse at center, black 0%, black 67%, transparent 70%);
	& section figure {
		position: relative;
		overflow: hidden;
		width: fit-content;
		margin-inline: auto;
		margin-block: 2lh;
		mix-blend-mode: multiply;
		&.oval {
			mask-image: var(--oval-mask);
		}
		body:has(#darklitecheck:checked) & {
			mix-blend-mode: difference;
		}
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: color-mix(in srgb, var(--pri) 70%, var(--lord));
			mix-blend-mode: color;
			opacity: 0;
		}
		&.oval::before {
			opacity: 1;
		}
		&.corners {
			border-radius: 0 2em 0 2em;
			&:nth-of-type(even) {
				border-radius: 2em 0 2em 0;
			}
		}
		&:hover::before {
			opacity: 0;
		}
		&:hover::before {
			opacity: 0;
		}
		&:target {
			outline: 0.2rem solid var(--pri);
			&::before {
				opacity: 0;
			}
		}
	}
	& section img {
		display: block;
		max-width: 25em;
		height: auto;
		width: fit-content;
	}
	& .quote {
		display: grid;
		align-items: center;
		grid-template-rows: 1fr;
		grid-template-columns: auto 1fr;
		padding: 1em;
		margin: 0 auto 3em auto;
		background: color-mix(in srgb, var(--dorl) 5%, var(--lord));
		border-radius: 0 1em 0 1em;
		max-width: 35em;
	}
	& h2 {
		text-align: center;
	}
	& :is(ul, li) {
		width: fit-content;
		line-height: 1.5lh;
	}
	&:has(a[href="#schools"]:hover) #schools,
	&:has(a[href="#office"]:hover) #office {
		outline: 0.2rem solid var(--pri);
		&::before {
			opacity: 0;
		}
	}
}
#office::before {
	--pri: var(--sec);
}
.examples {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
#schools {
	box-shadow: 3em -3em color-mix(in srgb, var(--pri) 15%, var(--lord));
}
.attribution {
	display: block;
	padding-inline: 0.5em;
	font-size: 0.9em;
	opacity: 0.75;
	text-align: end;
	line-height: 1.25em;
	margin-top: 1em;
}
.quotee {
	padding: 1lh;
}
@keyframes chronostraight {
	0% {background-position-y: 0%;}
	50% {background-position-y: 100%;}
}
@keyframes chrono {
	0% {background-position-y: 0%;}
	75% {background-position-y: 100%;}
}
.homebelow {
	overflow: hidden;
	padding: 2em;
}
/*----END HOMEPAGE----*/

section {
	clear: inline-start;
}

:is(h1, h2, section) + section {
	margin-block-start: 3lh;
}

.centered section {
	margin-inline: auto;
}

section > div {
	max-width: 80ch;
	margin-inline: auto;
}
.about section {
	padding-block: 2lh;
	--margin: 2em;
	padding-inline: var(--margin);
	width: fit-content;
	&:not(:has(p)) {
		width: fit-content;
		margin-inline: auto;
		& img {
			margin-inline: inherit;
			float: unset;
		}
	}
	&:nth-of-type(odd) {
		background: color-mix(in srgb, var(--dorl) 5%, var(--lord));
		border-radius: 0 2em 0 2em;
	}
	&:nth-of-type(4n - 3) {
		border-radius: 2em 0 2em 0;
	}
	& + section {
		margin-block-start: 1lh;
	}
}
#folio-outer {
	width: fit-content;
}
.projects section {
	width: 100%;
	& > .desc {
		width: fit-content;
		margin-inline: auto 0;
	}
	& h2 {
		width: inherit;
		margin-bottom: 0.25em;
		& span {
			display: block;
			opacity: 0.65;
		}
		& + span {
			--pad: 0.65em;
			background: color-mix(in srgb, var(--pri) 15%, var(--lord));
			display: block;
			font-size: 1.25em;
			width: inherit;
			padding: var(--pad);
			margin: calc(-1 * var(--pad) + 1lh) calc(-1 * var(--pad)) 0 auto;
			border-radius: 0 1em 0 1em;
			color: inherit !important;
			& span {
				width: inherit;
				margin-inline-start: inherit;
				padding-block-end: calc(var(--pad) * 0.625);
				display: block;
				opacity: 0.75;
			}
		}
	}
}
.projects.centered {
	container: projects / inline-size;
}
@container projects (width > 1em) {
	.reel {
		width: calc(50vw - (var(--scrollbarWidth) / 2) + 50cqw);
	}
}
.reel-outer {
	width: 0;
	margin-inline-start: 0;
}
.reel {
	max-width: unset;
	overflow: visible;
	overflow-x: scroll;
	margin-inline: unset;
	white-space: nowrap;
	padding-inline-end: 1.5em;
	padding-block: calc(2em + var(--scrollbarWidth)) 2em;
	scrollbar-gutter: unset;
	scrollbar-color: color-mix(in srgb, var(--dorl) 25%, var(--lord)) var(--lord);
	background:
		/* Shadow Cover LEFT */
		linear-gradient(to right, var(--lord) 50%, #0000) left center,
		/* Shadow Cover RIGHT */
		linear-gradient(to left, var(--lord) 50%, #0000) right center,
		/* Shadow LEFT */
		radial-gradient(farthest-side at 0% 50%, color-mix(in srgb, var(--pri) 20%, #0000) 100%, #0000 100%) left center,
		/* Shadow RIGHT */
		radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--pri) 20%, #0000) 100%, #0000 100%) right center;
	background-repeat: no-repeat;
	background-size: 8em 100%, 8em 100%, 4em 100%, 4em 100%;
	background-attachment: local, local, scroll, scroll;
	& img {
		scroll-margin: 100%;
		display: inline-block;
		object-fit: contain;
		height: 20em;
		width: fit-content;
		border-radius: 1em;
		& + img {
			margin-inline-start: 1em;
		}
		user-select: none;
	}
}
section.intro {
	background: color-mix(in srgb, var(--dorl) 5%, var(--lord));
	padding: 2lh 2lh 3lh;
	margin-bottom: 3lh;
	width: fit-content;
	margin-inline: auto;
	border-radius: 0 2em 0 2em;
	& h1 {
		text-align: start;
		margin-bottom: 0.5em;
	}
	& > div {
		margin-inline: auto;
		& p {
			max-width: unset;
			& span {
				text-align: center;
				display: block;
				opacity: 0.625;
				&.sep {
					padding-top: 0.75lh;
				}
			}
		}
	}
}
h2 {
	font-family: 'TM bold', serif;
	font-size: 2em;
	margin-bottom: 1lh;
	.about > & {
		text-align: center;
	}
	.projects & {
		text-align: end;
		margin-inline-end: 0;
	}
}
.about h3 {
	font-family: 'TM bold', serif;
}	
img.bio {
	width: 10em;
	height: fit-content;
	user-select: none;
	float: left;
	margin: 0 1lh 0 0;
	object-fit: contain;
	object-position: center top;
	filter: saturate(0);
	transition: filter 0.2s linear;
	mask-size: contain;
	mask-repeat: no-repeat;
	border-radius: 0 0 var(--inf) var(--inf);
	section:hover & {
		filter: unset;
	}
}
#tm {
	mask-image: url('/img/tommoyer_mask.png');
}
#jw {
	mask-image: url('/img/justinwiley_mask.png');
}
#mm {
	mask-image: url('/img/matmagera_mask.png');
}
#rl {
	mask-image: url('/img/rodleopard_mask.png');
}
.unmasked {
	mask-image: unset !important;
	border-radius: 0 !important;
	transition: unset !important;
	filter: unset !important;
}

/*----BEGIN EMPLOYMENT----*/
#status {
	display: flex;
	background: #6661;
	width: fit-content;
	padding: 2lh;
	margin: 0 auto 2em;
	border-radius: 0 1em 0 1em;
	text-align: center;
	text-wrap: balance;
	& p {
		color: color-mix(in srgb, currentColor 75%, transparent);
	}
	&::before {
		content: '';
		display: inline-block;
		height: 1em;
		aspect-ratio: 1 / 1;
		border-radius: 100%;
		background:
			radial-gradient(
				var(--grad1),
				var(--grad2)
			);
		filter: brightness(1.8) saturate(13);
		box-shadow: 0 0 0.25em #fff5;
		opacity: 0.75;
		margin-block: auto;
		margin-inline-end: 1em;
	}
}

/*----END EMPLOYMENT----*/

@property --grad1 {
	syntax: '<color>';
	initial-value: #8da498; 
	inherits: false;
}
@property --grad2 {
	syntax: '<color>';
	initial-value: #597165;
	inherits: false;
}
.c2a {
	--grad1: var(--sec-alt);
	--grad2: color-mix(in srgb, var(--sec-alt) 50%, #000);
	display: block;
	position: relative;
	width: fit-content;
	margin-inline: auto;
	border-radius: 0 var(--inf);
	color: #fff;
	padding: 0.75em 4em;
	text-wrap: auto;
	background: linear-gradient(
		to bottom left,
		var(--grad1),
		var(--grad2)
	);
	box-shadow:
		0 0.0625em 0 var(--shadow),
		0 0.125em 0 var(--shadow),
		0 0.125em 0.25em var(--shadow);
	text-shadow: 0 0 1px #0006;
	transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, --grad1 0.1s linear, --grad2 0.2s linear;
	&:hover {
		--grad1: color-mix(in srgb, var(--sec-alt) 75%, #fff);
	}
	& span {
		font-family: 'TM bold', serif;
	}
}
:is(.navbutton, .c2aouter):focus:not(:focus-visible) .c2a, .c2a:focus:not(:focus-visible) {
	transform: translate3d(0,0.125em,0);
	box-shadow:
		0 0 0 var(--shadow),
		0 0 0 var(--shadow),
		0 0.0625em 0.125em var(--shadow);
}
footer {
	width: 100%;
	place-self: end;
	text-align: left;
	padding: 3em 1.5em 1.5em;
	background: inherit;
	& > .centered {
		display: grid;
		grid-template-rows: auto 1fr;
	}
}
.footer-top {
	display: grid;
	grid-template-columns: auto 1fr;
}
.certs {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 2lh;
	padding-inline-start: 2.5lh;
	text-align: center;
	justify-content: end;
	font-size: 0.75em;
	text-transform: uppercase;
	height: min-content;
	cursor: default;
	user-select: none;
	& figure {
		line-height: 1.25lh;
		align-content: end;
		align-self: end;
		padding: 1lh;
		&.aha {
			padding-top: 0.5lh;
		}
		height: min-content;
		width: 12em;
		border-radius: 0 1em 0 1em;
		border: 0.125em solid #6668;
		& svg {
			object-fit: contain;
			opacity: 0.75;
			filter: saturate(0);
		}
		&:hover {
			border-color: var(--pri);
			background: #6663;
		}
		&:hover svg {
			filter: unset;
			opacity: 1;
		}
	}
}
a[href^="#"] {
	color: unset;
}
.cert {
	background: #6660;
}
.cert-logo, .footer-logo, .logo-theme {
	fill: var(--dorl);
	color: var(--dorl);
}
body:has(a[href="#certs"]:hover) #certs .cert {
	border-color: var(--pri);
	animation: pulse-bkg 1s linear infinite alternate; 
	& svg {
		filter: unset;
		opacity: 1;
	}
}
@keyframes pulse-bkg {
	to {
		background: #6663;
	}
}
.footer-title {
	width: fit-content;
	& span {
		display: block;
		margin-block: -0.5lh 0.5lh;
	}
	& a {
		width: fit-content;
		text-decoration: none !important;
	}
}
summary {
	padding-block: 1lh;
	user-select: none;
	cursor: pointer;
	color: var(--pri);
	transition: opacity 0.2s linear;
	opacity: 0.75;
	&::before {
		content: 'Show ';
		display: inline;
	}
	&:hover {
		opacity: 1;
	}
}
details {
	text-align: left;
	&[open] summary::before {
		content: 'Hide ';
	}
}
address {
	text-align: left;
	opacity: 0.75;
}
#copyright {
	margin-inline: auto;
	text-align: center;
	line-height: 1.5em;
	padding-block-start: 2lh;
}
#plug {
	color: color-mix(in srgb, currentColor 50%, transparent);
	& a {
		color: unset;
	}	
	&::before {
	content: '';
	display: inline-block;
	width: 0.625lh;
	aspect-ratio: 1 / 1;
	background: url('/img/leaf.png') no-repeat center / cover;
	margin-inline-end: 0.75ch;
	margin-block-end: -0.1825ch;
	}
}
.contacts {
	display: flex;
	gap: 1lh;
	flex-wrap: wrap;
	& div:nth-of-type(even) {
		filter: hue-rotate(-45deg);
	}
}
.contact {
	width: fit-content;
	border-radius: 1em;
	box-shadow: 0 0 1em #fff1;
	padding: 1lh;
	border: 0.1em solid color-mix(in srgb, var(--dorl) 30%, transparent);
	box-shadow: 0 0.25em 0.5em color-mix(in srgb, var(--dorl) 10%, transparent);
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	gap: 1em;
	justify-content: space-between;
	& > div {
	}
	& .contact-info {
		width: fit-content;
	}
	& .download {
		text-decoration: unset;
		line-height: 1.5em;
		font-size: 0.75em;
		text-align: center;
		place-content: center;
		display: inline-block;
		border-radius: 1em;
		background: color-mix(in srgb, var(--lord) 95%, currentColor);
		height: 7em;
		aspect-ratio: 1 / 1;
	}
	& span {
		display: block;
		text-align: left;
		line-height: 1.5em;
	}
}
.title {
	font-weight: bold;
	opacity: 0.5;
}
a:not(nav a, .c2aouter),.info a {
	text-decoration: underline 0.1em;
}
/*:is(.service,.about):not(.loadin), .contact {
	opacity: 0;
	animation: appear 0.6s 0.15s ease-out 1 forwards;
}*/
.loadin {
	opacity: 0;
	transform: translateX(3em);
}
.loadin.loaded {
	opacity: 1;
	transform: translateX(0) !important;
	transition: transform 0.6s ease-out, opacity 0.9s ease-out;
}
::selection {
	background: var(--sec-alt);
	color: var(--dorl);
}
:focus-visible {
	outline: 0.25em solid var(--sec-alt);
}
@keyframes appear {
	0% {transform: translate3d(0,3em,0); opacity: 0;}
	100% {transform: translate3d(0,0,0); opacity: 1;}
}
@keyframes scalein {
	0% {transform: scale(0);}
	100% {transform: scale(1);}
}
@media (hover: none) {
	#burgerouter,nav a {
		transition: background-color 0.1s linear;
	}
	#burgertog:not(:checked) ~ header #burgerouter, body:not(.navopen) #burgerouter {
		background-color: rgba(153, 153, 153, 0);
	}
	#burgertog:checked ~ header #burgerouter, .navopen #burgerouter {
		background-color: var(--nav-highlight) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after {
	transition: none !important;
	animation: none !important;
	}
	.contact,.about {
		opacity: 1 !important;
	}
	.heromeat, .constr-div {
		transform: unset;
		opacity: 1;
	}
	.hero-lower h2 {
		opacity: 1;
	}
}
@media only screen and (max-width: 28em) {
	.container {
		font-size: 3.5vw;
	}
}
@media only screen and (max-width: 50em) {
	html,body {
		overflow-x: hidden;
	}
	.container {
		--nav-height: 5em;
	}
	.centered {
		width: 100%;
	}
	header .logo {
		padding: 0.5em 0.75em;
	}
	header .centered {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}
	header span span {
		will-change: transform;
	}
	nav {
		position: absolute;
		width: var(--mob-nav-width);
		height: fit-content;
		right: 0;
		border-bottom: 0.125em solid #000;
		border-left: 0.125em solid #000;
		transform: translate3d(var(--mob-nav-width),0,0);
		top: calc(var(--nav-height) + 0.0625em);
		display: grid;
		grid-auto-flow: row;
		grid-auto-rows: 5em;
		background: var(--pri-clr);
		backdrop-filter: blur(0.5em);
		transition: transform 0.1s ease-out, background-color 0.1s ease-out;
		will-change: transform;
		border-radius: 0 0 0 5em;
	}
	#darklitelabel {
		right: calc(-1 * var(--width) - 1.5em);
		top: 1.5em;
	}
	#burgerouter {
		display: flex;
	}
	nav a {
		height: unset;
		width: 100%;
		justify-content: end;
		padding-inline-end: 1.25em;
	}
	#burgertog:checked ~ :is(header,.overlay), .navopen :is(header,.overlay){
	position: fixed;
	}
	#burgertog:checked ~ header, .navopen header {
		right: 0;
	}
	nav a[href="/employment"] {
		border-radius: 0 0 0 5em;
	}
	.contact {
		width: 100%;
	}
	.reel {
		margin-block: 1lh auto;
	}
	.about section {
		margin-inline: calc(-1 * var(--margin));
	}
}
@media (hover: hover) {
	header:has(#darklitelabel:hover) {
		animation-play-state: running;
	}
	.contact .download {
		display: none;
	}
}
@media (hover: none) and (max-width: 50em) {
	header nav a {
		transition: none;
	}
	header nav a {
		box-shadow: unset !important;
	}
	header nav a:active:not(.navbutton) {
		background-color: var(--nav-highlight);
	}
}
.centered:not(:is(header,footer) .centered) {
	padding-inline: 1.5em;
}
@media only screen and (max-width: 123em) {
	.reel-outer {
		margin-inline-start: -1.5em;
	}
	.reel {
		padding-inline-start: 1.5em;
	}
	@container projects (width > 1em) {
		.reel {
			width: calc((100vw - var(--scrollbarWidth) - 100cqw) / 2 + 100cqw + 1.5em);
		}
	}
}

@media only screen and (max-width: 69em) {
}
@media only screen and (min-width: 50.0625em) {
	.overlay {
		display: none;
	}
}

@media only screen and (max-height: 24em) and (max-width: 50em) {
	nav {
		min-height: unset;
		height: calc(100vh - var(--nav-height));
		grid-auto-rows: 1fr;
		padding: 0;
	}
	nav a {
		padding: 0;
	}
}
@media only screen and (max-height: 35em) {
	header {
		z-index: 999;
	}
}