@charset 'UTF-8';

/*
	Astral by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		background: #f5f7fb;
	}

	html
	{
		scroll-behavior: smooth;
	}

		body.is-loading *
		{
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}
		
	body,input,textarea,select
	{
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		color: #777777;
	}
	
	strong, b
	{
		font-weight: 400;
		color: #363636;
	}

	h1, h2, h3, h4,h5, h6
	{
		font-weight: 400;
		color: #363636;
	}
	
	blockquote
	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	em, i
	{
		font-style: italic;
	}
	
	hr
	{
		border: 0;
		border-top: solid 1px #ddd;
		padding: 1.5em 0 0 0;
		margin: 1.75em 0 0 0;
	}
	
	sub
	{
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup
	{
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	clear
	{
		clear: both;
	}
	
	p, ul, ol, dl, table, blockquote, form
	{
		margin-bottom: 2em;
	}

	body.portfolio-page
	{
		background:
			radial-gradient(circle at top, rgba(95, 122, 160, 0.22), transparent 42%),
			linear-gradient(180deg, #162131 0%, #223149 100%);
		color: #1f2933;
	}

	.skip-link
	{
		position: absolute;
		left: -9999px;
		top: 16px;
		z-index: 20;
		padding: 0.75rem 1rem;
		border-radius: 999px;
		background: #1348b8;
		color: #fff;
		font-weight: 600;
	}

	.skip-link:focus
	{
		left: 16px;
	}

	.portfolio-page a
	{
		color: #1348b8;
	}

	.site-shell
	{
		max-width: 1500px;
		margin: 0 auto;
		padding: 48px 34px 64px;
		min-height: calc(100vh - 48px);
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, rgba(251, 252, 254, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%);
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 28px;
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
	}

	.site-header
	{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		margin-bottom: 48px;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(31, 41, 51, 0.08);
	}

	.brand h1
	{
		margin-bottom: 0.2em;
		font-size: 2.6em;
		line-height: 1.05;
	}

	.brand .role,
	.lead,
	.card-meta,
	.link-note
	{
		color: #5b6875;
	}

	.link-note
	{
		margin: 0.9rem 0 0;
		font-size: 0.95em;
		word-break: break-word;
	}

	.eyebrow
	{
		margin-bottom: 0.6em;
		font-size: 0.82em;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #1348b8;
	}

	.site-nav
	{
		display: flex;
		flex-wrap: wrap;
		gap: 12px 20px;
		justify-content: flex-end;
	}

	.site-nav a
	{
		font-weight: 600;
		color: #243447;
		text-decoration: none;
	}

	.site-nav a:hover,
	.site-nav a:focus
	{
		color: #1348b8;
		text-decoration: underline;
	}

	.site-nav a:focus-visible,
	.button:focus-visible,
	.more-history summary:focus-visible
	{
		outline: 3px solid rgba(19, 72, 184, 0.28);
		outline-offset: 3px;
	}

	.hero,
	.site-section
	{
		margin-bottom: 56px;
	}

	.hero
	{
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
		gap: 32px;
		align-items: center;
	}

	.hero h2,
	.section-heading h2
	{
		margin-bottom: 0.45em;
		line-height: 1.1;
	}

	.hero h2
	{
		font-size: clamp(2rem, 4vw, 3.4rem);
	}

	.section-heading h2
	{
		font-size: clamp(1.6rem, 2.4vw, 2.1rem);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #1f2933;
	}

	.lead
	{
		font-size: 1.1em;
		max-width: 34rem;
	}

	.hero-media
	{
		margin: 0;
		justify-self: center;
		align-self: center;
		width: 100%;
		max-width: 300px;
		padding: 12px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.72);
		box-shadow: 0 14px 40px rgba(31, 41, 51, 0.12);
	}

	.hero-media img
	{
		display: block;
		width: 100%;
		height: auto;
		border-radius: 18px;
	}

	.cta-group
	{
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin: 28px 0 24px;
	}

	.metrics,
	.tag-list,
	.list,
	.timeline-list
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.metrics
	{
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.metrics li,
	.card,
	.more-history
	{
		background: rgba(255, 255, 255, 0.82);
		border: 1px solid rgba(31, 41, 51, 0.08);
		border-radius: 20px;
		box-shadow: 0 10px 30px rgba(31, 41, 51, 0.06);
	}

	.metrics li
	{
		padding: 16px 18px;
	}

	.metrics strong,
	.metrics span
	{
		display: block;
	}

	.metrics span
	{
		margin-top: 0.25rem;
		color: #5b6875;
		font-size: 0.95em;
	}

	.section-heading
	{
		max-width: 44rem;
		margin-bottom: 24px;
	}

	.card-grid,
	.skills-grid,
	.contact-grid
	{
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.compact-grid
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.contact-group + .contact-group
	{
		margin-top: 28px;
	}

	.contact-group-title
	{
		margin-bottom: 12px;
		font-size: 0.78em;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #5b6875;
	}

	@media screen and (max-width: 1100px)
	{
		.card-grid,
		.skills-grid,
		.contact-grid
		{
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.card
	{
		padding: 24px;
		margin-bottom: 0;
	}

	.card h3
	{
		margin-bottom: 0.5em;
		font-size: 1.25em;
		line-height: 1.2;
	}

	.list,
	.timeline-list
	{
		margin-top: 1em;
	}

	.list li,
	.timeline-list li
	{
		position: relative;
		padding-left: 1.1em;
		margin-bottom: 0.6em;
	}

	.list li::before,
	.timeline-list li::before
	{
		content: "•";
		position: absolute;
		left: 0;
		color: #1348b8;
	}

	.more-history
	{
		margin-top: 20px;
		margin-bottom: 0;
		padding: 0;
		overflow: hidden;
	}

	.more-history summary
	{
		padding: 18px 24px;
		cursor: pointer;
		font-weight: 600;
		color: #243447;
	}

	.more-history[open] summary
	{
		border-bottom: 1px solid rgba(31, 41, 51, 0.08);
	}

	.more-history .timeline-list
	{
		padding: 18px 24px 24px;
	}

	.tag-list
	{
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.tag-list li
	{
		padding: 0.45em 0.8em;
		border-radius: 999px;
		background: rgba(19, 72, 184, 0.08);
		color: #1348b8;
		font-weight: 600;
	}

	.button.primary
	{
		border-color: #1348b8;
		background: #1348b8;
		color: #fff;
	}

	.button.primary:hover,
	.button.primary:focus-visible
	{
		border-color: #0f3c98;
		background: #0f3c98;
		color: #fff;
	}

	.card .button
	{
		display: block;
		width: 100%;
		text-align: center;
	}

	.site-footer
	{
		margin-top: auto;
		text-align: center;
		padding-top: 12px;
		border-top: 1px solid rgba(31, 41, 51, 0.08);
		color: #5b6875;
	}
		

	/* Section/Article */

		section,
		article
		{
			margin-bottom: 3em;
		}
		
			section > :last-child,
			article > :last-child
			{
				margin-bottom: 0;
			}

			section:last-child,
			article:last-child
			{
				margin-bottom: 0;
			}

	

	/* Button */

		.button
		{
			-webkit-appearance: none;
			box-sizing: border-box;
			display: inline-block;
			padding: 0.85em 1.6em;
			border: 1px solid rgba(19, 72, 184, 0.35);
			border-radius: 999px;
			background: transparent;
			color: #1348b8;
			font-size: 0.95em;
			font-weight: 600;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			outline: 0;
			-moz-transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
			-webkit-transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
			-o-transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
			-ms-transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
			transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
		}

			.button:hover,
			.button:focus-visible
			{
				border-color: #1348b8;
				background: rgba(19, 72, 184, 0.08);
				color: #0f3c98;
			}

	/* Nav active state */

		.site-nav a.is-active
		{
			color: #1348b8;
			font-weight: 700;
		}

	/* Reduced motion */

		@media (prefers-reduced-motion: reduce)
		{
			html
			{
				scroll-behavior: auto;
			}
		}