@charset "UTF-8";

@media print {
	html {
		background: #FFFFFF !important;
	}

	main {
		box-shadow: none !important;
		border-color: #FFFFFF !important;
		margin: 0 !important;
	}
}

@media screen {
	@supports (font-variation-settings: "wdth" 100) {
		@font-face {
			font-family: 'Nunito Sans';
			font-style: normal;
			font-weight: 500 900;
			font-stretch: 75% 100%;
			font-display: swap;
			font-optical-sizing: auto;
			src: url('fonts/nunito-sans.woff2') format('woff2');
			unicode-range: U+0000-00FF, U+0104-017C, U+2013-2014, U+25AA;
		}
	}
}

@page {
	size: auto;
	margin: 0;
}

* {
	border: 0;
	margin: 0;
	padding: 0;
}

html {
	background: #FDFDFD;
	font-size: 3px;
	text-size-adjust: 100%;
}

body {
	font-family: 'Nunito Sans', sans-serif;
	font-variation-settings: "wdth" 85, "YTLC" 540;
	font-weight: 500;
	letter-spacing: 0.002em;
}

body.loading {
	overflow: hidden;
}

a,
a:visited {
	color: black;
	text-decoration: none;
}

ul li::marker {
	content: '\025AA';
	font-size: 125%;
}

img:not([alt]) {
	user-select: none;
}

main,
dialog {
	background: #FFFFFF;
	box-sizing: border-box;
	box-shadow: 0 0 0 1px #C6C6C6, 0 4px 8px 1px rgba(0, 0, 0, 0.2), 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

dialog {
	visibility: hidden;
	position: fixed;
	left: 0;
	top: 50%;
	line-height: 64px;
	width: 320px;
	margin: -64px auto;
	padding: 32px 0;
	font-family: sans-serif;
	font-size: 32px;
	text-align: center;
}

body.loading dialog {
	visibility: visible;
}

main {
	margin: 38px auto;
	padding: 40px 60px;
	height: 1122px;
	width: 794px;
	position: relative;
	break-after: page;
}

body.edit main {
	height: auto;
	padding-bottom: var(--padding);
}

body.loading main {
	visibility: hidden;
}

main > header {
	font-variation-settings: "wdth" 86;
	height: 130px;
	margin-bottom: 28px;
	position: relative;
	width: 100%;
}

main > header.subsequent {
	height: 0;
	margin: 0;
}

main > header div.name {
	display: block;
	font-size: 41.2px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 31px;
	margin-left: 1px;
	text-transform: uppercase;
	user-select: none;
}

main > header.subsequent div.name {
	display: none;
}

main > header div.title {
	color: #0c408d;
	display: block;
	font-size: 18.4px;
	font-weight: 700;
	left: -1px;
	letter-spacing: 0.05em;
	margin-top: 8px;
	position: relative;
	text-transform: uppercase;
}

main > header img.photo {
	height: 130px;
	position: absolute;
	right: 0;
	top: 0;
}

main > header img.arrow {
	position: absolute;
	height: 29px;
	left: -40px;
}

main > header div.contactgrid {
	display: inline-block;
	column-count: 2;
	column-gap: 30px;
	margin-top: 18px;
}

main > header div.contactgrid a.contact {
	display: block;
	height: 20px;
	margin-bottom: 8px;
}

main > header div.contactgrid a.contact > img:first-of-type {
	height: 20px;
	margin-right: 10px;
	vertical-align: top;
}

main > header div.contactgrid a.contact > img:last-of-type {
	height: 12px;
	margin: 4px 0;
	vertical-align: top;
}

main > footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 60px 39px;
}

main > footer > span {
	display: block;
	font-size: 9.2px;
	line-height: 12px;
	text-align: justify;
	text-align-last: center;
}

main > footer > mark {
	background: none;
	font-family: Consolas, monospace;
	font-style: normal;
	user-select: none;
}

main > footer > mark:first-of-type {
	color: #FDFDFD;
	font-size: 24px;
	letter-spacing: 0.05em;
	position: absolute;
	top: -1016px;
	right: 180px;
}

main > footer > mark:last-of-type {
	color: #CDCDCD;
	font-size: 8px;
	letter-spacing: 0.3em;
	line-height: 12px;
	text-align: center;
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
}

section {
	position: relative;
}

body.edit section.hidden {
	opacity: 0.5;
}

body.view section.hidden {
	display: none;
}

section > header {
	height: 20px;
}

section > header > h2 {
	border-bottom: 1px solid #1565C0;
	bottom: 5px;
	box-sizing: border-box;
	color: #1565C0;
	display: inline-block;
	font-size: 15.6px;
	font-weight: 700;
	font-variation-settings: "wdth" 88;
	height: 20px;
	text-transform: uppercase;
	line-height: 20px;
	letter-spacing: 0.03em;
	position: relative;
	width: calc(100% - 26px);
}

section > header.continued > h2::after {
	content: ' (Continued)';
}

section > header > img {
	height: 20px;
	margin-right: 6px;
}

article {
	position: relative;
}

body.edit article.hidden {
	opacity: 0.5;
}

section#summary {
	margin-bottom: 23px;
}

section#summary > header {
	margin-bottom: 9px;
}

section#summary > div.attract {
	height: 19px;
	overflow: hidden;
	padding: 0 4px;
	position: absolute;
	right: 0;
	user-select: none;
	z-index: 101;
}

section#summary > div.attract > span {
	background: url('media/arrow-down.svg') no-repeat;
	background-size: 11px;
	color: #1565C0;
	display: block;
	font-size: 12px;
	font-weight: 700;
	height: 11px;
	letter-spacing: 0.03em;
	line-height: 12px;
	opacity: 0;
	padding-left: 16px;
	transform: translateY(-20px);
	will-change: transform;
}

article.summary ul {
	padding-inline-start: 13px;
}

article.summary ul li {
	font-size: 12.8px;
	letter-spacing: 0.008em;
	line-height: 18px;
	padding-left: 13px;
	padding-top: 6px;
}

body.edit article.summary ul li.hidden {
	opacity: 0.5;
}

body.view article.summary ul li.hidden {
	display: none;
}

article.summary ul li strong {
	font-weight: 800;
}

section#timeline {
	margin-bottom: 28px;
}

section#timeline > header {
	margin-bottom: 20px;
}

article.timeline {
	height: 206px;
	user-select: none;
}

article.timeline > div.years {
	font-size: 0;
	height: 100%;
	letter-spacing: 0;
	position: absolute;
	right: 0;
}

article.timeline > div.years > div {
	display: inline-block;
	height: 100%;
	width: 12rem;
}

article.timeline > div.years > div:nth-child(odd) {
	background: #0000000f;
}

article.timeline > div.years > div > time {
	display: block;
	font-size: 10px;
	letter-spacing: 0.1em;
	padding: 4px 0 4px 2px;
	text-align: center;
}

article.timeline > div.events {
	height: 180px;
	position: absolute;
	top: 26px;
	right: 0;
	width: calc(12rem * 18);
}

article.timeline > div.events > aside {
	border-left: 1px dashed #00000032;
	height: 178px;
	margin-left: calc(var(--space) * 1rem);
	margin-top: 1px;
	position: absolute;
	width: 0;
}

article.timeline > div.events > div {
	background-image: url('media/pattern-stripes.svg');
	background-size: 8px 8px;
	height: 100%;
	margin-left: calc(var(--space) * 1rem);
	position: absolute;
	width: calc(var(--duration) * 1rem);
}

article.timeline > div.spans {
	padding-top: 14px;
	position: absolute;
	right: 0;
	width: calc(12rem * 18);
}

article.timeline > div.spans > span {
	background: #0000000a;
	display: block;
	font-size: 0;
	letter-spacing: 0;
	line-height: 19px;
	margin: 12px 0;
	overflow: hidden;
}

article.timeline > div.spans > span > mark {
	background: #ccc;
	box-sizing: border-box;
	color: white;
	display: inline-block;
	height: 20px;
	text-align: center;
	vertical-align: top;
}

article.timeline > div.spans > span > mark.label {
	background: #ccc;
	border-left: 6px solid var(--color);
	color: transparent;
	font-size: 11px;
	left: -26px;
	letter-spacing: 0.04em;
	position: absolute;
	user-select: text;
}

article.timeline > div.spans > span > mark.label > span {
	background: #222;
	box-sizing: border-box;
	color: white;
	display: inline-block;
	font-size: 11px;
	height: 20px;
	line-height: 20px;
	padding: 1px 6px 0px;
	vertical-align: top;
}

article.timeline > div.spans > span > mark.label > span.total {
	background: #ccc;
	color: black;
	font-size: 10px;
	letter-spacing: 0.08em;
	padding-left: 0;
}

article.timeline > div.spans > span > mark.stint {
	background: var(--color);
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 20px;
	margin-left: calc((var(--space)) * 1rem);
	padding: 1px 0 0 1px;
	width: calc(var(--duration) * 1rem);
}

article.timeline > div.spans > span.red > mark {
	--color: #d00;
}

article.timeline > div.spans > span.orange > mark {
	--color: #e90;
}

article.timeline > div.spans > span.lime > mark {
	--color: #8c0;
}

article.timeline > div.spans > span.green > mark {
	--color: #0c0;
}

article.timeline > div.spans > span.turquoise > mark {
	--color: #0b7;
}

article.timeline > div.spans > span.sky > mark {
	--color: #09d;
}

article.timeline > div.spans > span.blue > mark {
	--color: #00e;
}

article.timeline > div.spans > span.violet > mark {
	--color: #94d;
}

article.timeline > div.spans > span.pink > mark {
	--color: #d09;
}

section#skills,
section#languages {
	margin-bottom: 22px;
}

section#skills > header {
	margin-bottom: 18px;
}

section#languages > header {
	margin-bottom: 13px;
}

article.skills {
	margin-bottom: 16px;
}

article.skills > header {
	font-size: 12.8px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 14px;
	margin-bottom: 4px;
}

article.skills ul {
	list-style: none;
}

article.skills ul.featured {
	column-count: 3;
	column-gap: 46px;
	column-rule: 1px solid #1565C0;
}

article.skills ul.featured li.skill {
	display: block;
	font-size: 13px;
	height: 14px;
	line-height: 14px;
	width: 194px;
	position: relative;
	padding: 5px 0;
	break-inside: avoid;
}

article.skills ul.featured li.skill figure::before {
	background-repeat: no-repeat;
	background-size: auto 12.5px;
	content: "";
	display: block;
	height: 12.5px;
	position: absolute;
	right: 0;
	top: 5px;
	width: 73px;
}

article.skills ul.featured li.skill figure::after {
	visibility: hidden;
}

article.skills ul.featured li.skill figure.s1::before {
	background-image: url('media/skill-level-1-novice.svg');
}

article.skills ul.featured li.skill figure.s2::before {
	background-image: url('media/skill-level-2-basic.svg');
}

article.skills ul.featured li.skill figure.s3::before {
	background-image: url('media/skill-level-3-intermediate.svg');
}

article.skills ul.featured li.skill figure.s4::before {
	background-image: url('media/skill-level-4-advanced.svg');
}

article.skills ul.featured li.skill figure.s5::before {
	background-image: url('media/skill-level-5-expert.svg');
}

article.skills ul.featured li.skill figure.s1::after {
	content: "Novice";
}

article.skills ul.featured li.skill figure.s2::after {
	content: "Basic";
}

article.skills ul.featured li.skill figure.s3::after {
	content: "Intermediate";
}

article.skills ul.featured li.skill figure.s4::after {
	content: "Advanced";
}

article.skills ul.featured li.skill figure.s5::after {
	content: "Expert";
}

article.skills ul.featured li.skill figure::after,
article.skills ul.featured li.skill span {
	color: #0c408d;
	font-weight: 700;
	letter-spacing: 0.04em;
	position: absolute;
	right: 0;
	user-select: none;
}

article.skills ul.more {
	font-size: 11px;
	letter-spacing: 0.01em;
	line-height: 18px;
	margin-top: 4px;
	text-align: justify;
}

article.skills ul.more b {
	font-weight: 700;
}

article.skills ul.more.xor {
	margin-top: 4px;
}

article.skills ul.more.xor b {
	display: none;
}

article.skills ul.more li.count,
article.skills ul.more li.skill {
	display: inline-block;
}

body.edit article.skills ul.more li.hidden {
	opacity: 0.5;
}

body.view article.skills ul.more li.hidden {
	display: none;
}

article.skills ul.more li.skill::after {
	content: ', ';
}

article.skills ul.more li.skill:not(.hidden):not(:has(~ .skill:not(.hidden)))::after {
	content: '';
}

article.skills ul.more li.skill figure,
article.skills ul.more li.skill span {
	display: none;
}

article.skills ul.more li.count {
	color: #00000064;
}

section#experience {
	margin-bottom: 25px;
}

section#experience:has(> article:last-child.hidden) {
	margin-bottom: 25px;
}

section#experience > header {
	margin-bottom: 18px;
}

section#certifications,
section#education {
	margin-bottom: 25px;
}

section#certifications > header,
section#education > header {
	margin-bottom: 18px;
}

article.history {
	margin-bottom: 21px;
}

article.history:has(> div.highlights:last-child) {
	margin-bottom: 20px;
}

article.history a {
	display: block;
	width: fit-content;
}

article.history a h3::after {
	background: #1565C0;
	border-left: 12px solid white;
	color: white;
	content: 'Verify';
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 13px;
	opacity: 0;
	padding: 3px 6px 2px;
	position: relative;
	top: -1px;
}

article.history h3 {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 17px;
	margin-bottom: 9px;
}

article.history h3 span {
	font-size: 80%;
}

article.history > div.role {
	font-size: 13px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0.03em;
}

article.history > div.organization {
	color: #fdfdfd;
	font-size: 13px;
	margin: 0;
	padding: 0 10px 10px;
	position: absolute;
	right: 101px;
	top: 0;
}

article.history > div.logo {
	margin: 0;
	position: absolute;
	right: -5px;
	top: -3px;
}

article.history > div.logo img {
	width: 110px;
}

article.history > div.logo.dual img {
	width: 55px;
}

article.history > div.logo.dual img:first-of-type {
	margin-right: -1px;
}

article.history > div.logo.dual img:last-of-type {
	margin-right: 3px;
}

article.history > div.period,
article.history > div.location {
	font-size: 13px;
	line-height: 14px;
	margin-top: 9px;
}

article.history > div.location {
	display: none;
}

article.history > div.highlights {
	margin-top: 3px;
}

article.history > div.highlights ul {
	column-count: 2;
	column-gap: 7px;
}

article.history > div.highlights.wide ul {
	column-count: auto;
}

article.history > div.highlights ul li {
	break-inside: avoid-column;
	font-size: 11px;
	line-height: 15px;
	margin-left: 8px;
	padding-left: 5px;
	padding-top: 4px;
	text-align: justify;
	width: 321px;
}

article.history > div.highlights.wide ul li {
	width: auto;
}

article.history > div.highlights ul li strong {
	font-weight: 700;
	letter-spacing: -0.012em;
}

article.history > div.highlights ul li img {
	margin-left: 3px;
}

article.history > div.details {
	margin: 3px -12px -2px 0;
}

article.history > div.details.wrap {
	margin-top: 8px;
}

article.history > div.details div {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.01em;
	line-height: 16px;
	margin: 4px 12px 0 0;
}

article.history > div.details.wrap div {
	display: block;
}

article.history > div.details div b {
	font-weight: 800;
}

article.history.hidden > div.role,
article.history.hidden > div.location,
article.history.hidden > div.highlights,
article.history.hidden > div.details {
	display: none;
}

section#miscellaneous {
	margin-bottom: 27px;
}

section#miscellaneous > header {
	margin-bottom: 18px;
}

@media screen {
	body.edit main > header > div.title:hover,
	body.edit main > footer > span:hover,
	body.edit section > header:hover,
	body.edit article.summary ul li:hover,
	body.edit article.history:hover,
	body.edit article.skills ul li.skill:hover {
		background: #1976D232;
	}

	body.view article.timeline > div.spans > span > mark.stint:hover {
		background: #222;
		box-shadow: 0 0 8px 0 #222, 0 0 6px 6px white;
		position: relative;
		z-index: 1;
	}

	body.view article.skills ul.featured li.skill:hover figure::before {
		visibility: hidden;
	}

	body.view article.skills ul.featured li.skill:hover figure::after {
		visibility: visible;
	}

	body.view section#summary:hover,
	body.view article.history.hidden:hover {
		background: white;
		border: 1px solid black;
		box-shadow: 0 0 8px 0 black, 0 0 20px 34px white;
		position: absolute;
		z-index: 2;
	}

	body.view section#summary:hover {
		margin: -12px;
		padding: 11px 11px 9px;
		width: 674px;
	}

	body.view section#summary:hover + section {
		margin-top: 230px;
	}

	body.view section#summary:hover article.summary ul li.hidden {
		display: revert;
	}

	body.view section#summary:hover > div.attract {
		visibility: hidden;
	}

	body.view article.history.hidden:hover {
		margin: -10px -12px 0;
		padding: 9px 11px 7px;
		width: 674px;
	}

	body.view article.history.hidden:hover + article.history {
		margin-top: 82px;
	}

	body.view article.history.hidden:first-of-type:hover + article.history {
		margin-top: 79px;
	}

	body.view section:has(article.history.hidden:last-of-type:hover) + section {
		margin-top: 86px;
	}

	body.view section:has(article.history.hidden:first-of-type:last-of-type:hover) + section {
		margin-top: 83px;
	}

	body.view article.history.hidden:hover > div.organization {
		right: 112px;
		top: 9px;
	}

	body.view article.history.hidden:hover > div.logo {
		right: 6px;
		top: 6px;
	}

	body.view article.history.hidden:hover > div.role,
	body.view article.history.hidden:hover > div.highlights,
	body.view article.history.hidden:hover > div.details {
		display: revert;
	}

	body.view article.history a:focus h3::after,
	body.view article.history:hover a h3::after {
		opacity: 1;
	}

	@keyframes attract {
		10%      { opacity: 0; }
		30%      { transform: translateY(6px); }
		40%      { opacity: 1; }
		40%, 60% { transform: translateY(4px); }
		70%      { transform: translateY(2px); }
		80%      { opacity: 1; }
		100%     { transform: translateY(30px); }
	}

	body.view section#summary > div.attract > span {
		animation: 2s ease-in-out 1s 2 normal forwards running attract;
	}

	body.loading section#summary > div.attract > span {
		animation: none;
	}
}