@charset "UTF-8";

/* ericpeacock.design CSS stylesheet */

/* inter-300 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: local(''),
 			url('../fonts/inter-v7-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 			url('../fonts/inter-v7-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: local(''),
 			url('../fonts/inter-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 			url('../fonts/inter-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-600 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: local(''),
 			url('../fonts/inter-v7-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 			url('../fonts/inter-v7-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
clamp(minimum, preferred, maximum);

.my-element {
	font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

The value it returns will be the preferred value, until that preferred value is lower than the minimum value (at which point the minimum value will be returned) or higher than the maximum value (at which point the maximum will be returned).
*/


:root {
	--primary: #497fc2;
	--darklink: #86bbff;
	--accent: #3d4364;
	--active: #86bbff;
	--hover: #60a7ff;
	--background: #87cc77;
	--portfoliobg: #111;
	--menu: #dc3a25;
	--menufade: #a7493c;
	--navbg: #031935;

	--size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
	--size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
	--size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
	--size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
	--size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
	--size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
	--size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
	--size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}

@view-transition {navigation: auto;}

main, section, article, footer {scroll-snap-align: start;}

/*reset*/
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body, div, object, iframe, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* END reset */

/* animate background */
/*@keyframes color {
	0% 	{ background: #ffffff;}
	50%	{ background: var(--background);}
	80%	{ background: #33CC36; }
	100% { background: #ffffff; }
}*/

body {
	background: #fff; /* fallback */
	/* animation: color 30s infinite linear;*/}
/* END animate background */

ol, ul {
	margin: 0 0 3rem 0;
	padding: 0;
}

li {margin-bottom: 1.25rem;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

header, footer, nav, section, article, hgroup, figure {display: block;}

legend {display: none;}
/*END reset*/

/* utility classes */
.goodmeasure {max-width: 38rem;}
.roundedimage {border-radius: 30px;}
.aftercopy {margin-top: 3rem;}
.imgborder {border: 1px solid #d7d7d7;}
.imgshadow {box-shadow: #999 0 0 10px;}
/* END utility classes */

/* global typography */

/*html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}*/

body,
h1, h2, h3, h4, h5, h6,
ol, li {
	font-family: 'Inter', sans-serif;
	/*text-wrap: balance;*/
	}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: #111;
	text-align: center;
	line-height: calc(.8em + 1ex);
	/*max-inline-size: 50ch;*/
	/*margin: 0;
	padding: 0;*/
}

h1 {
	font-weight: 700;
	font-size: var(--size-900);
	color: var(--primary);
}

/*h3 {display: inline;}*/

h2 {font-size: var(--size-800);}
h3 {font-size: var(--size-800);}
h3 {font-size: var(--size-700);}
h4 {font-size: var(--size-600);}
h5 {font-size: var(--size-500);}
h6 {font-size: var(--size-400);}

p {
	font-weight: 300;
	font-size: var(--size-500);
	line-height: calc(1em + 1ex);
	max-width: 38rem;
	margin: 1.75rem auto;
	}
/* END global typography */


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

/* links */
a {
	color: var(--primary);
	text-underline-offset: .125em;
	text-decoration-thickness: 1.5px;
	text-decoration-color: #91a5be;
}

a:hover,
a:visited,
a:focus {
	color: var(--hover);
	text-decoration: none;
}

a:active {
	color: var(--active);
	background-color: var(--accent);
}

footer a:hover,
footer a:visited,
footer a:focus {
	color: white;
	text-decoration: none;
}
/* END links */

hr {
	border: 0;
	height: 3px;
	background: var(--accent);
	width: 100%;
	display: block;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

address {display: inline; font-style: normal;}

/* aside {margin: 1.5rem; display: block;} */

aside .callout {background-color: #333; border-radius: .5rem; padding: .5rem .75rem;}

.social {margin-top: 1.25rem;}
.social address:first-child {}

.masthead {
	margin: 2.5rem auto 0 auto;
	padding: 0 1rem;
	display: block;
	width: 100%;
	max-width: 1024px;
	position: relative;
	z-index: -2;
}


main {}


/* navigation */

.wrapper {
	/*max-width: 1140px;*/
	padding-left: 3rem;
	padding-right: 3rem;
	margin-left: auto;
	margin-right: auto;
}

.wrapper a {color: white;}

.brand {
	font-weight: 800;
	letter-spacing: 0.05rem;
	font-size: 1.75rem;
	text-transform: uppercase;
	text-decoration: none;}

.brand span {font-weight: 200;}

.site-header {
	position: relative;
	background-color: var(--navbg);
	}

.site-header__wrapper {
	padding-top: 1rem;
	padding-bottom: 1rem; }

.nav__wrapper {margin-bottom: 0;}

nav button {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1rem;
}

	@media (min-width: 600px) {
	.site-header__wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0; }

	.nav__wrapper {display: flex;}
	}

.box {
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
			0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
			0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
			0 100px 80px rgba(0, 0, 0, 0.12);
		min-height: 200px;
		width: 50vw;
		margin: 100px auto;
		background: white;
		border-radius: 5px;
	}

.shadow {
	filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
	/*backdrop-filter: blur(0);
	will-change: filter;*/
	transform: translateZ(0);
	/*-webkit-backface-visibility: hidden;*/
}


@media (max-width: 599px) {
	.nav__wrapper {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: -1;
		background-color: var(--accent);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-100%);
		transition: transform 0.3s ease-out, opacity 0.3s ease-out;
		text-align: center;}

	.nav__wrapper.active {
		visibility: visible;
		opacity: 1;
		transform: translateY(0); }
	}

.nav__item a {
	font-size: 1.25rem;
	font-weight: 300;
	text-decoration: none;
	display: block;
	padding: 1.5rem 1rem;}

.nav__toggle {display: none; }

@media (max-width: 599px) {
	.nav__toggle {
		display: block;
		position: absolute;
		right: 1rem;
		top: 1rem; }
	}

/* END navigation */




/* v2 responsive styles (from portfolio layout) */
.column {flex-basis: 100%;}

@media screen and (min-width: 800px) {
	.row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.column {flex: 1;}
	.col-75 {flex: 10;}
	.col-25 {flex: 2.5;}
	.col-5 {flex: 5;}

	/* gutter control for multiple columns */
	.multicolumn .column {padding-right: 2rem;}
	.multicolumn .column:last-child {padding-right: 0;}

}

/* style */
.column {margin: 1rem 0;}

.column p {font-size: medium; margin-top: 0;}

.column .videowrapper {margin-bottom: .5rem;}

.column figcaption {margin: .5rem 0 0 0;}
.column figcaption p {color: #333; font-size: 90%; font-weight: 300;}

main {
	/*max-width: 1200px;*/
	margin: 0 auto;
}

.flexcenter {
	display: flex;
	justify-content: center;
}

main .column {border: 1px solid #666;}

h1, h2 {text-align: center;}

.shadow {filter: drop-shadow(10px 30px 25px #999);}

/* END v2 responsive styles (from portfolio layout) */


.about,
.intro {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
	}

.intro h1 {
	font-weight: 400;
	text-align: left;
	margin-top: 1.5rem;
	margin-bottom: 0;
	}

.intro h2 {
	color: #111;
	text-align: left;
	}

.intro p {
	margin-left: 0;
	text-balance: balance;
	}

.room {
	background: url(../images/ep_web_v7_Background_2.png), url(../images/ep_web_v7_Background_2_right.png);
	background-size: 45%, 45%;
	background-repeat: no-repeat, no-repeat;
	background-position: top left, top right;
}

/* lists */
ol {text-align: left;}

li ol {margin: 1rem 3rem 2.5rem;}
li ol li {list-style-type: square;}

.work ol,
.work li {
	list-style: none;
	font-size: var(--size-500);
	line-height: calc(1em + 1ex);
	}

/* 2-column list */
ol.twocollist	{
	padding: 0;
	list-style-position: inside;
	columns: 2;
	column-gap: 3rem;
	width: 24rem;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.twocollist li {column-span: all;}

.twocollist li:nth-last-child(n+7),
.twocollist li:nth-last-child(n+7) ~ * {column-span: none;}
/* END 2-column list */
/* END lists */

/* bonus work styles */
.design {
	/*display: grid;
	place-content: center;*/
	max-width: 100vw;
	padding: 0 3rem;
}

.design h1, .design h2, .design h3, .design h4, .design h5, .design h6 {color: var(--accent)}

.design h2 {
	display: block;
	/*font-size: 3.25rem;*/
	text-align: center;
	margin: 0 0 1rem 0;
}

.design h3 {
	text-align: center;
	/*font-size: 2.5rem;*/
	margin: 0 0 1rem 0;
}

.design h4{
	max-width: 38rem;
	font-weight: 400;
	/*font-size: 1.75rem;*/
	margin: 0 auto 1rem auto;
	text-align: left;
}

.design p {
	max-width: 38rem;
	margin: 1rem auto 1rem auto;
	font-size: 1.15rem;
}

figure {
	margin: 0 auto 3rem auto;
	/*max-width: 1280px;*/
	max-width: 80rem;
	display: block;
}

/*figure {
	display: flex;
	flex-flow: column;
	margin: auto;
}*/

figure img {
	margin: 0 auto;
	display: block;
}

/* specialties */

.specialties ol {
	display: flex;
	justify-content: center;
	}

.specialties li {
	background-color: #ade;
	border-radius: 6px;
	padding: .5rem;
	margin: 0 .5rem 0 0;
	text-transform: lowercase;
	font-weight: 500;
}

.specialties h2,
.specialties p {font-size: 1.25rem;}

.specialties p {}

/* END specialties */


.svg-white {filter: invert(100%) sepia(4%) saturate(1031%) hue-rotate(141deg) brightness(116%) contrast(98%);}

.flexfigure {/*display: flex;*/}
.flexfigure img { margin: 0.75rem auto;/*margin: 0 0.75rem; width: auto; height: 40px; flex-shrink: 1;*/}
.flexfigure figcaption {flex-shrink: 2}

/* select the first image */
/*figure img:nth-child(1) { margin-bottom: 1rem;}*/

figcaption {
	font-size: .92rem;
	line-height: 1.6rem;
	margin: .45rem 26px;
	text-align: left;
	/*text-wrap: balance;*/
}

.design .videowrapper {margin-bottom: 0;}

.design figcaption {margin: 0;}

.design figcaption p {
	margin-top: 0.125rem;
	line-height: 1.65rem;
	max-width: 100%;
	}

.design figcaption h3,
.caption-above
 {
	font-size: 1.25rem;
	font-weight: 600;
	text-align: left;
}

.caption-above {padding: 2rem 0 .75rem 0; display: block; text-align: center;}

.credits {
	border-top: 2px solid #999;
	padding: 1rem 0;
	max-width: 38rem;
	margin: 2.5rem auto 0 auto;
}

.credits p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5rem;
	text-align: center;
}

.credits a {font-weight: 600;}

/* used on the explainer video page */
p.vidcaption {font-size: smaller; margin-top: -2.75rem; margin-bottom: 2rem; text-align: center; font-style: oblique;}

/* for flex container containing <figure> elements */
p.captionlike {
	margin-top: -60px;
	font-size: 0.95rem;
	line-height: 1.25rem;
	/*max-width: 1280px;*/
	max-width: 80rem;
}


/* portfolio grids */

.flexgrid {
	display: flex;
	margin: 2rem auto;
	/*align-items: middle;*/
	justify-content: center;
	gap: 1.5rem;
	padding: 0;
	/*flex-wrap: wrap;*/
	flex-grow: 1;
}

.flexgrid img {
	/*width: 48.75%;*/
	/*width: 31.5%;*/
	/*max-height: 100%;*/
	max-height: 47.75vh;
	width: auto;
	max-width: 44.5vw;
	/*object-fit: cover;*/
	vertical-align: bottom;
}

/* 3 column layout */
.flexgrid3x {
	display: flex;
	margin: inherit;
	/*align-items: middle;*/
	justify-content: center;
	gap: 1.5rem;
	/*flex-wrap: wrap;*/
	flex-grow: 1;
	width: 90vw;
}

.flexgrid3x img {
	/*width: 48.75%;*/
	/*width: 31.5%;*/
	width: 28%;
	height: 100%;
	max-height: 100%;
	/*object-fit: cover;*/
	vertical-align: bottom;
}

.squaregrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
	place-items: center;
	grid-gap: 2.5rem;
	margin: 2rem 0;
	background: transparent;
}

.squaregrid img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-height: 100%;
	border: 1px solid #d7d7d7;
}

.squaregrid .videowrapper {
	object-fit: cover;
	width: 100%;
	height: auto;
	max-height: 100%;
	/*border: 1px solid #d7d7d7;*/
}

.widegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80vw, 1fr));
	place-items: center;
	grid-gap: 2.5rem;
	margin: 2rem 0;
	background: transparent;
}

.webgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80vw, 1fr));
	place-items: center;
	grid-gap: 2.5rem;
	margin: 2rem 0;
	background: transparent;
}

.webgrid img {
	object-fit: contain;
	width: 100%;
	height: 100%;
	max-height: 100%;
	border: 1px solid #d7d7d7;
}
/* END portfolio grids */



/* details element */

details {
	margin-top: 1rem;
	text-align: left;
	border: 3px solid var(--accent);
	border-radius: 18px;
	padding: .5rem;
	font-size: 1.15rem;
	font-weight: 600;
	background: #ccc;
	padding: 1rem;
}

details img:nth-child(2n+1) {margin-bottom: 1rem;}

details p {
	font-size: 0.75rem;
	text-align: left;
	margin-top: 1.5rem;
	line-height: 1.25rem;
	}

summary {
	font-weight: 600;
	padding: .5rem;
	cursor: pointer;
	/*background: var(--background);*/
}

/* Open details element. */
details[open] {
	transition: all 0.5s ease;
	border: 3px solid var(--background);
	background: var(--background);
}

.portfolio details {
	background: #111;}

.portfolio details[open] {
	transition: all 0.5s ease;
	border: 3px solid var(--accent);
	background: #000;
}


/* Summary within an open details element. */
details[open] summary {}

/* Change the color and size of the marker. */
summary::-webkit-details-marker {
		color: var(--accent);
		font-size: 125%;
}
/* END details element */

/* END bonus work styles */



/* tooltip */

a.tooltip {
	text-decoration: none;
	color: var(--accent);
	font-weight: 600;
}

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
	position: relative;
	cursor: help;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
	position: absolute;
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition:
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition:
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform:		translate3d(0, 0, 0);
	transform: 				translate3d(0, 0, 0);
	pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
	z-index: 1001;
	border: 6px solid transparent;
	background: transparent;
	content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
	[data-tooltip]:after {
	z-index: 1000;
	padding: 8px;
	width: 200px;
	background-color: #000;
	background-color: hsla(232, 24%, 32%, 0.95);
	color: #fff;
	content: attr(data-tooltip);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
	bottom: 100%;
	left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
	margin-left: -6px;
	margin-bottom: -12px;
	border-top-color: #000;
	border-top-color: hsla(232, 24%, 32%, 0.95);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
	margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
	-webkit-transform: translateY(-12px);
	-moz-transform:		translateY(-12px);
	transform: 				translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
	right: 100%;
	bottom: 50%;
	left: auto;
}

.tooltip-left:before {
	margin-left: 0;
	margin-right: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-left-color: #000;
	border-left-color: hsla(232, 24%, 32%, 0.95);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
	-webkit-transform: translateX(-12px);
	-moz-transform:		translateX(-12px);
	transform: 				translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
	top: 100%;
	bottom: auto;
	left: 50%;
}

.tooltip-bottom:before {
	margin-top: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-bottom-color: #000;
	border-bottom-color: hsla(232, 24%, 32%, 0.95);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
	-webkit-transform: translateY(12px);
	-moz-transform:		translateY(12px);
	transform: 				translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
	bottom: 50%;
	left: 100%;
}

.tooltip-right:before {
	margin-bottom: 0;
	margin-left: -12px;
	border-top-color: transparent;
	border-right-color: #000;
	border-right-color: hsla(232, 24%, 32%, 0.95);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
	-webkit-transform: translateX(12px);
	-moz-transform:		translateX(12px);
	transform: 				translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
	top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
	margin-left: 0;
	margin-bottom: -16px;
}
/* END tooltip */

/* buttons */
button,
.button {
		display: block;
		border: none;
		border-radius: 2px;
		padding: 1rem 2rem;
		margin: 0 auto;
		text-decoration: none;
		background: #497fc2;
		color: #ffffff;
		font-family: 'Inter', sans-serif;
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0.05rem;
		cursor: pointer;
		text-align: center;
		transition: background 250ms ease-in-out,
								transform 150ms ease;
		-webkit-appearance: none;
		-moz-appearance: none;
}

.button {
	max-width: 10rem;
	margin-bottom: 2rem;
}

button:hover,
button:focus,
.button:hover,
.button:focus {color: #ff5; background: #003679;}

button:focus,
.button:focus {
		outline: 1px solid #fff;
		outline-offset: -4px;
}

button:active,
.button:active	{transform: scale(0.99);}
/* END buttons */


/* portfolio section (dark background) */
.portfolio {
	color: #fff;
	background: var(--portfoliobg);
	/*padding-bottom: 2rem;*/
	padding: .25rem 1.75rem 2rem 1.75rem;
	margin-top: 3.4rem;
	}

.portfolio a {color: #fff;}

.portfolio figcaption p {color: #b4b4b4}

.reel {
	margin: 0 auto 4.5rem auto;
	max-width: 65rem;}

.reel b {color: #fff;}

.portfolio p,
.reel p {
	font-size: 1rem;
	text-align: center;
	}

.description {
	color: #999;
	margin-top: -1rem;
	text-align: center;
	line-height: 1.5rem;
}

.portfolio,
.portfolio h1,
.portfolio h2,
.portfolio h3,
.portfolio h4,
.portfolio h5 {
	color: #fff;
	text-align: center;
	}

.portfolio h6 {color: #fff;}

.portfolio h2 {
	/*font-size: 2rem;
	font-weight: 300;*/
	margin: 0;
	padding: 0;
	}

.portfolio h3 {
	/*font-weight: 300;
	font-size: 1.75rem;*/
	/*padding-top: 2rem;*/
}

.portfolio h4 {
	/*font-size: 1.3rem;
	font-weight: 300;*/
	margin-top: 3.5rem;
	color: var(--darklink);
	text-transform: uppercase;
	letter-spacing: 0.035rem;
	text-align: center;
}

.portfolio h5 {
	margin: 3rem auto 2rem auto;
	font-weight: 300;
	/*max-width: 38rem;*/
	/*padding: 0 2rem;*/
	/*font-size: 1.15rem;
	line-height: 1.65rem;*/}

.portfolio h6 {margin: 0 auto 1.5rem auto;}

/* client call-out */
	p.clientcallout {
		line-height: 2rem;
		font-size: 1.05rem;
		max-width: 70%;
		text-wrap: balance;
	}

	.clientcallout b {color: #8caed9; font-weight: 600;}
/* END client call-out */


/* what i did list */
.whatido {
	/*width: 80%;*/
	/*max-width: 32rem;*/
	max-width: 38rem;
	margin: 0 auto 2rem auto;
	line-height: 1.4rem;
	text-align: left;
	text-wrap: balance;
}

.whatidid li {list-style-type: square;}

.whatidid li::marker {color: var(--primary);}

.whatidid li::before {
	/*content: "▪"; color: var(--primary);
	display: inline-block;
	width: 1rem;
	margin-left: -1rem;
	font-size: 1.75rem;
	outline: 1px solid red;*/
}
/* END what i did list */


/* featured projects */
.work-poster figcaption {
	text-align: center;
	font-weight: 600;
	font-size: 1.45rem;
	letter-spacing: 0.065rem;
	}

.work-poster a :hover {
	outline: 6px solid var(--hover);
}

ul.metadata {
	width: inherit;
	margin: -7.5rem auto 3.5rem auto;
	list-style: none;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	gap: .25rem;
}

ul.metadata li {
	align-items: center;
	font-size: small;
	letter-spacing: .025rem;
	line-height: 1rem;
	text-align: center;
	margin: auto;
	padding: .25rem .6rem;
	color: #111;
	background: #ccc;
	/*border: 1px solid #aaa;*/
	box-shadow: 0 0 4px 1px rgba(17, 17, 17, 0.35);
	border-radius: .35rem;
}

/* END featured projects */


.jobs {
	text-align: left;
	margin: 0 auto;
	max-width: 38rem;
}

.jobs a {color: #fff;}

.jobs ol {
	list-style-type: square;
	line-height: 1.5rem;
	margin-left: 0;
}

.jobs ol ol {margin-left: 2rem;}

.jobs b {color: var(--darklink);}

/* intrinsic ratio RWD for video */
.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin-bottom: 2rem;
	background-color: transparent; /* contrasting color can show up as hairlines on frame border	*/
}

.videowrapper-square,
.lottie-square {
	position: relative;
	padding-bottom: 100%; /* 1:1 */
	height: 0;
	margin-bottom: 2em;
	background-color: #000;
}

.videowrapper-vertical {
	position: relative;
	background-color: #000;
	aspect-ratio: 9 / 16;
}

.videowrapper iframe,
.videowrapper-square iframe,
.lottie-square iframe,
.videowrapper-vertical iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.inside .videowrapper {margin-top: 2.75rem; margin-bottom: 3rem;}

.lottie-square {background-color: #fff;}
.lottie-square iframe {margin-right: 0;}

/* square media captions */
.squarevideo figcaption,
.lottie figcaption {margin-top: -1.5rem;}

/* END responsive video */

/* END portfolio */



/* custom scroll bar */

html {
	--scrollbarBG: rgba(232, 232, 232, 1);
	--thumbBG: rgba(31,68,154,0.9);
}

/* webkit syntax */
::-webkit-scrollbar {width: 16px;}

::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 100px;
}

/* new syntax */
html {
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	scrollbar-width: auto;
	overflow-y: auto;
}
/* END custom scroll bar */


footer {
	color: #fff;
	/*background: #497fc2;*/
	/*background: #000;*/
	background: var(--thumbBG);
	text-align: center;
	padding: 3rem;
	margin-top: 3.5rem;
}

footer small,
footer p {
	font-size: .7rem;
	/*line-height: 1rem;*/
	line-height: calc(0.465em + 2ex);
	text-align: center;
	margin: 0 auto;
}

footer a {color: #fff;}

.footer-blurb {
	margin-top: 1rem;
	letter-spacing: .045rem;
	font-size: 0.85rem;
	text-wrap: balance;
}



nav {
	/*width: 100%;*/
	/*height: auto;*/
	/*background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(2,0,36,0.5) 100%);*/
}

nav ol {
	margin: 0 auto;
	display: flex;
	font-weight: bold;
	text-align: center;
	justify-content: center;
	align-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
}

nav li {
	list-style-type: none;
	margin: 1rem;
	width: auto;
	text-transform: uppercase;
	/*background: var(--accent);
	padding: 0.5rem;
	border-radius: 10px;*/
}

nav li a {}

/*a.menu-link {
	float: right;
	display: block;
	padding: 1em;
	}

nav[role=navigation] {
	clear: both;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

.js nav[role=navigation] {
	overflow: hidden;
	max-height: 0;
	}

nav[role=navigation].active {
	max-height: 15em;
	}

nav[role=navigation] ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid #808080;
	}

nav[role=navigation] li a {
	display: block;
	padding: 0.8em;
	border-bottom: 1px solid #808080;
	}

@media screen and (min-width: 48.25em) {
	a.menu-link {display: none;}

	.js nav[role=navigation] {
		max-height: none;
	}
	nav[role=navigation] ul {
		margin: 0 0 0 -0.25em;
		border: 0;
	}

	nav[role=navigation]	li {
		display: inline-block;
		margin: 0 0.25em;
	}
	nav[role=navigation] li a {
		border: 0;
	}

	.reel {max-width: 75%;}
	}
	*/


/* smartphones in portrait orientation - TESTING */
@media only screen and (min-resolution: 2dppx) and (pointer: coarse) and (max-aspect-ratio:3/5),
 	   only screen and (min-resolution: 2dppx) and (pointer: none) and (max-aspect-ratio:3/5)
       {
		.desktop-only {display: none;}
        .intro {margin: 3rem 0;}
       }


/* smartphones (portrait and landscape) */

@media screen and (max-width: 30em) {
	.wrap .intro {margin: 1.25rem;}
	p, ol, ul {/*font-size: 1rem; line-height: 1.4rem;*/}
	.reel {margin: 3rem auto 0 auto;}
}


@media screen and (max-width: 640px) {
	.squaregrid {grid-gap: .25rem;}

	.flexgrid {
		flex-wrap: wrap;
		margin: inherit;
	}

	.flexgrid img {
		width: auto;
		margin: 0 0 1.5rem 0;
	}

	.flexgrid3x {
		width: auto;
		/*max-width: ;*/
	}

	.flexgrid3x img {
		width: auto;
		margin: 0;
	}

	/* utility classes - small screens */
	.roundedimage {border-radius: 20px;}
	.goodmeasure {width: 15rem;}
}


/* big screen */
@media screen and (min-width: 1200px) {
	.widegrid {
		grid-template-columns: repeat(auto-fit, minmax(60vw, 1fr));
		grid-gap: 2.5rem;
		margin: 2rem 0;
	}

	/*.portfolio {border-radius: 30px;}*/
}


/* tablet and below */
@media screen and (max-width: 55em) {
		/*main {margin: 0 1.25rem;}*/

		.biopic,
		.design {padding: 0 1.75rem;}

		.biopic {background: none;}

		/*.flexfigure {display: block;}*/

		.flexgrid3x {
			flex-wrap: wrap;
			margin: inherit;
		}

		.squaregrid {
			grid-template-columns: repeat(auto-fit, minmax(60vw, 1fr));
			grid-gap: 1.65rem;
			margin: 1.65rem 0;
		}

		.masthead {
			margin: .75rem auto 0 auto;
			padding: 0 .25rem;
			display: block;
			width: 100%;
		}

		.shadow {
			/*filter: drop-shadow(0.65rem 0.35rem 0.8rem rgba(0, 0, 0, 0.5));*/
			filter: none;
		}

	}


/* small screens (320px) */
@media screen and (max-width: 20em) {

	/*.portfolio h3 {font-size: 1.35rem;}*/
	.description {margin-top: .05rem; line-height: 1rem;}
	.goodmeasure {width: 10rem;}

	.design {padding: 0 1rem;}
	/*.design h2 {font-size: 2rem;}
	.design h3 {font-size: 1.5rem;}
	.design p {font-size: 1rem;}*/
	.design h1, .design h2, .design h3, .design h4, .design p {text-align: center;}

	figure {margin: 0 auto 1rem auto;}

	.roundedimage {border-radius: 12px;}

	ol.twocollist	{columns: 1; width: auto;}

	.masthead {padding: 0 0.25rem;}

	/* old syntax */
	/* ::-webkit-scrollbar {width: 12px;} */

	/* new syntax */
	html {
		scrollbar-width: auto;
		overflow: auto;
	}

	footer {/*font-size: .9rem;*/ padding: 1.5rem 1rem;}
}


/*!
 * animate.css - https://animate.style/ — ABRIDGED TO BOUNCE-ONLY, DE-PREFIXED
 * Version - 4.1.1
 * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
 *
 * Copyright (c) 2022 Animate.css
 */

@-webkit-keyframes bounce {
 	from,
 	20%,
 	53%,
 	to {
 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		-webkit-transform: translate3d(0, 0, 0);
 		transform: translate3d(0, 0, 0);
 	}

 	40%,
 	43% {
 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
 		transform: translate3d(0, -30px, 0) scaleY(1.1);
 	}

 	70% {
 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
 		transform: translate3d(0, -15px, 0) scaleY(1.05);
 	}

 	80% {
 		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
 		transform: translate3d(0, 0, 0) scaleY(0.95);
 	}

 	90% {
 		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
 		transform: translate3d(0, -4px, 0) scaleY(1.02);
 	}
 }
 @keyframes bounce {
 	from,
 	20%,
 	53%,
 	to {
 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		-webkit-transform: translate3d(0, 0, 0);
 		transform: translate3d(0, 0, 0);
 	}

 	40%,
 	43% {
 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
 		transform: translate3d(0, -30px, 0) scaleY(1.1);
 	}

 	70% {
 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
 		transform: translate3d(0, -15px, 0) scaleY(1.05);
 	}

 	80% {
 		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
 		transform: translate3d(0, 0, 0) scaleY(0.95);
 	}

 	90% {
 		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
 		transform: translate3d(0, -4px, 0) scaleY(1.02);
 	}
 }

 .bounce {
 	-webkit-animation-name: bounce;
 	animation-name: bounce;
 	-webkit-transform-origin: center bottom;
 	transform-origin: center bottom;
 }


:root {
 	--animate-duration: 1s;
 	--animate-delay: 1s;
 	--animate-repeat: 1;
 }
 .animated {
 	-webkit-animation-duration: 1s;
 	animation-duration: 1s;
 	-webkit-animation-duration: var(--animate-duration);
 	animation-duration: var(--animate-duration);
 	-webkit-animation-fill-mode: both;
 	animation-fill-mode: both;
 }
 .animated.infinite {
 	-webkit-animation-iteration-count: infinite;
 	animation-iteration-count: infinite;
 }
 .animated.repeat-1 {
 	-webkit-animation-iteration-count: 1;
 	animation-iteration-count: 1;
 	-webkit-animation-iteration-count: var(--animate-repeat);
 	animation-iteration-count: var(--animate-repeat);
 }
 .animated.repeat-2 {
 	-webkit-animation-iteration-count: calc(1 * 2);
 	animation-iteration-count: calc(1 * 2);
 	-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
 	animation-iteration-count: calc(var(--animate-repeat) * 2);
 }
 .animated.repeat-3 {
 	-webkit-animation-iteration-count: calc(1 * 3);
 	animation-iteration-count: calc(1 * 3);
 	-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
 	animation-iteration-count: calc(var(--animate-repeat) * 3);
 }
 .animated.delay-1s {
 	-webkit-animation-delay: 1s;
 	animation-delay: 1s;
 	-webkit-animation-delay: var(--animate-delay);
 	animation-delay: var(--animate-delay);
 }
 .animated.delay-2s {
 	-webkit-animation-delay: calc(1s * 2);
 	animation-delay: calc(1s * 2);
 	-webkit-animation-delay: calc(var(--animate-delay) * 2);
 	animation-delay: calc(var(--animate-delay) * 2);
 }
 .animated.delay-3s {
 	-webkit-animation-delay: calc(1s * 3);
 	animation-delay: calc(1s * 3);
 	-webkit-animation-delay: calc(var(--animate-delay) * 3);
 	animation-delay: calc(var(--animate-delay) * 3);
 }
 .animated.delay-4s {
 	-webkit-animation-delay: calc(1s * 4);
 	animation-delay: calc(1s * 4);
 	-webkit-animation-delay: calc(var(--animate-delay) * 4);
 	animation-delay: calc(var(--animate-delay) * 4);
 }
 .animated.delay-5s {
 	-webkit-animation-delay: calc(1s * 5);
 	animation-delay: calc(1s * 5);
 	-webkit-animation-delay: calc(var(--animate-delay) * 5);
 	animation-delay: calc(var(--animate-delay) * 5);
 }
 .animated.faster {
 	-webkit-animation-duration: calc(1s / 2);
 	animation-duration: calc(1s / 2);
 	-webkit-animation-duration: calc(var(--animate-duration) / 2);
 	animation-duration: calc(var(--animate-duration) / 2);
 }
 .animated.fast {
 	-webkit-animation-duration: calc(1s * 0.8);
 	animation-duration: calc(1s * 0.8);
 	-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
 	animation-duration: calc(var(--animate-duration) * 0.8);
 }
 .animated.slow {
 	-webkit-animation-duration: calc(1s * 2);
 	animation-duration: calc(1s * 2);
 	-webkit-animation-duration: calc(var(--animate-duration) * 2);
 	animation-duration: calc(var(--animate-duration) * 2);
 }
 .animated.slower {
 	-webkit-animation-duration: calc(1s * 3);
 	animation-duration: calc(1s * 3);
 	-webkit-animation-duration: calc(var(--animate-duration) * 3);
 	animation-duration: calc(var(--animate-duration) * 3);
 }

 @media print, (prefers-reduced-motion: reduce) {
 	.animated {
 		-webkit-animation-duration: 1ms !important;
 		animation-duration: 1ms !important;
 		-webkit-transition-duration: 1ms !important;
 		transition-duration: 1ms !important;
 		-webkit-animation-iteration-count: 1 !important;
 		animation-iteration-count: 1 !important;
 	}

 	.animated[class*='Out'] {
 		opacity: 0;
 	}
 }


/* accessibility */
@media (prefers-reduced-motion: no-preference;) {body {scroll-behavior: smooth;}}

/* print styles */
@media print {
	a {text-decoration: underline;}
	[href]:not([href^="#"]):after {content: ' ('attr(href)') ';}
}


/* scrolling client logos */

:root {
--size: clamp(10rem, 1rem + 15vmin, 30rem); /* min, viewport start + max, root */
--gap: calc(var(--size) / 12 );
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text: white;
		--color-bg: rgb(22, 38, 63);
		--color-bg-accent: #142036;
	}
}

body {
	/*display: grid;
	align-content: center;
	overflow: hidden;*/
	gap: var(--gap);
	width: 100%;
	min-height: 100vh;
}

.marquee {
	display: flex;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	gap: var(--gap);
	-webkit-mask-image: linear-gradient(
		var(--mask-direction, to right),
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);
	mask-image: linear-gradient(
		var(--mask-direction, to right),
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);
}

.marquee__group {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	-webkit-animation: scroll-x var(--duration) linear infinite;
			animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.marquee__group {
		-webkit-animation-play-state: paused;
				animation-play-state: paused;
	}
}

.marquee--vertical .marquee__group {
	-webkit-animation-name: scroll-y;
			animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
	animation-direction: reverse;
	-webkit-animation-delay: -3s;
			animation-delay: -3s;
}

@-webkit-keyframes scroll-x {
	from {
		transform: translateX(var(--scroll-start));
	}
	to {
		transform: translateX(var(--scroll-end));
	}
}

@keyframes scroll-x {
	from {transform: translateX(var(--scroll-start));}
	to {transform: translateX(var(--scroll-end));}
}

@-webkit-keyframes scroll-y {
	from {transform: translateY(var(--scroll-start));}
	to {transform: translateY(var(--scroll-end));}
}

@keyframes scroll-y {
	from {transform: translateY(var(--scroll-start));}
	to {transform: translateY(var(--scroll-end));}
}

/* element styles */
.marquee svg {
	display: grid;
	place-items: center;
	width: var(--size);
	fill: var(--color-text);
	background: var(--color-bg-accent);
	aspect-ratio: 16/9;
	padding: calc(var(--size) / 8);
	border-radius: 1rem;
}

.marquee--vertical svg {
	aspect-ratio: 1;
	width: calc(var(--size) / 1.5);
	padding: calc(var(--size) / 6);
}

/* parent wrapper */
.logo-scroll {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: auto;
	max-width: 100vw;
}

@-webkit-keyframes fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}