/*
	Custom theme layered on top of Prologue (HTML5 UP).
	Direction: refined editorial / scientific-journal.
	Fraunces (display serif) + Hanken Grotesk (body), warm paper palette,
	deep botanical-green accent, subtle grain texture and scroll reveals.
*/

:root {
	--paper:      #f7f4ec;
	--paper-2:    #f0ebe0;
	--paper-3:    #f3eee3;
	--ink:        #3b3833;
	--ink-soft:   #6f6a61;
	--heading:    #211f1b;
	--accent:     #2f6b54;
	--accent-dark:#244f3f;
	--accent-tint:rgba(47, 107, 84, 0.12);
	--gold:       #b07d3a;
	--sidebar:    #1b211e;
	--sidebar-2:  #232b27;
}

/* ---- Base typography ---- */

	body {
		font-family: 'Hanken Grotesk', sans-serif;
		font-size: 16.5pt;
		font-weight: 400;
		line-height: 1.72em;
		color: var(--ink);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	input, textarea, select { font-family: 'Hanken Grotesk', sans-serif; }

	@media screen and (min-width: 961px) and (max-width: 1880px) {
		body { font-size: 15pt; }
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fraunces', Georgia, serif;
		color: var(--heading);
		font-weight: 500;
	}

	strong, b { color: var(--heading); font-weight: 600; }

/* Subtle grain overlay for depth */

	body::after {
		content: '';
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9000;
		opacity: 0.04;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	}

/* ---- Section backgrounds (warm paper) ---- */

	#main > section.two   { background-color: var(--paper);   background-image: none; }
	#main > section.three { background-color: var(--paper-2); background-image: none; }
	#main > section.four  { background-color: var(--paper-3); background-image: none; }

	#main > section { box-shadow: none; }
	#main > section + section { border-top: 1px solid rgba(33, 31, 27, 0.06); }

/* Constrain prose width and left-align body copy for readability */

	#main > section .container { max-width: 1080px; }

	#main > section:not(.cover) > .container > p,
	#main > section .row p { text-align: left; }

	#main > section > .container > p {
		max-width: 60rem;
		margin-left: auto;
		margin-right: auto;
		color: var(--ink);
	}

/* ---- Links (refined underline instead of dotted) ---- */

	#main a { border-bottom: 0; }

	#main p a,
	#main header p a,
	#main li a {
		color: var(--accent-dark);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: rgba(47, 107, 84, 0.35);
		text-underline-offset: 3px;
		transition: color 0.25s ease, text-decoration-color 0.25s ease;
	}

	#main p a:hover,
	#main header p a:hover,
	#main li a:hover {
		color: var(--accent);
		text-decoration-color: var(--accent);
	}

	#main > section.dark p a {
		color: #fff;
		text-decoration-color: rgba(255, 255, 255, 0.45);
	}
	#main > section.dark p a:hover { text-decoration-color: #fff; color: #fff; }

/* ---- Section headings ---- */

	#main > section > .container > header { margin-bottom: 2.4em; }

	#main > section:not(.cover) > .container > header h2 {
		display: inline-block;
		position: relative;
		font-size: 2.4em;
		font-weight: 500;
		letter-spacing: -0.01em;
		padding-bottom: 0.35em;
	}

	#main > section:not(.cover) > .container > header h2::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 2.2em;
		height: 2px;
		background: var(--gold);
		transform: translateX(-50%);
	}

	#main > section > .container > header p { color: var(--ink-soft); }

/* ---- Hero ---- */

	#main > section.cover { position: relative; }

	#main > section.one {
		background-color: #182019;
		background-blend-mode: multiply;
		background-position: center;
		background-size: cover;
	}

	#main > section.one::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(150deg, rgba(20, 33, 26, 0.82), rgba(24, 40, 32, 0.7) 55%, rgba(12, 20, 16, 0.9));
		pointer-events: none;
	}

	#main > section.cover .container { position: relative; z-index: 1; }

	#main section.cover header h2.alt {
		font-family: 'Fraunces', Georgia, serif;
		font-weight: 400;
		font-size: 3.2em;
		line-height: 1.12em;
		letter-spacing: -0.015em;
		color: #fdfbf6;
	}

	#main section.cover header h2.alt strong {
		font-weight: 600;
		font-style: italic;
		color: #fff;
	}

	#main section.cover header p {
		max-width: 34rem;
		margin: 1.1em auto 0 auto;
		font-size: 1.02em;
		color: rgba(253, 251, 246, 0.85);
	}

	#main section.cover footer { margin-top: 2.4em; }

/* ---- Buttons ---- */

	input[type="button"], input[type="submit"], input[type="reset"], button, .button {
		background-color: var(--accent);
		background-image: none;
		border-radius: 2em;
		font-family: 'Hanken Grotesk', sans-serif;
		font-weight: 600;
		font-size: 0.92em;
		letter-spacing: 0.02em;
		padding: 0.75em 2.25em;
		box-shadow: 0 0.4em 1.1em rgba(20, 40, 31, 0.22);
		transition: background-color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease;
	}

	.button.scrolly,
	#main section.cover .button {
		background-color: rgba(255, 255, 255, 0.95);
		color: var(--accent-dark) !important;
	}

	.button.scrolly:hover,
	#main section.cover .button:hover { background-color: #fff; }

	input[type="submit"]:hover, button:hover, .button:hover {
		background-color: var(--accent-dark);
		transform: translateY(-2px);
		box-shadow: 0 0.6em 1.4em rgba(20, 40, 31, 0.28);
	}

	.button:active { transform: translateY(0); }

/* ---- Sidebar ---- */

	#header {
		background: linear-gradient(180deg, var(--sidebar-2), var(--sidebar));
		box-shadow: inset -0.4em 0 0.6em -0.4em rgba(0, 0, 0, 0.4);
	}

	#logo {
		text-align: center;
		margin: 2.25em 1.5em 1.25em 1.5em;
		min-height: 0;
	}

	#logo .image.avatar {
		position: static;
		display: inline-block;
		width: 118px;
		height: 118px;
		border-radius: 50%;
		overflow: hidden;
		background: none;
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.04);
		margin-bottom: 1.1em;
	}

	#logo .image.avatar img { width: 100%; height: 100%; object-fit: cover; }

	#logo h1 {
		font-family: 'Fraunces', Georgia, serif;
		font-weight: 600;
		font-size: 1.5em;
		letter-spacing: 0.01em;
		color: #fff;
	}

	#logo p {
		font-family: 'Hanken Grotesk', sans-serif;
		font-size: 0.62em;
		font-weight: 500;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--gold);
		margin-top: 0.8em;
	}

	#nav { text-align: left; }

	#nav ul li a {
		font-family: 'Hanken Grotesk', sans-serif;
		border-radius: 0 1.6em 1.6em 0;
		margin-right: 0.9em;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	#nav ul li a span { letter-spacing: 0.01em; }
	#nav ul li a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }

	#nav ul li a.active {
		background: var(--accent-tint);
		box-shadow: inset 0 0 0 1px rgba(47, 107, 84, 0.35);
	}
	#nav ul li a.active span:before { color: var(--gold); }

	#header .icons a { color: rgba(255, 255, 255, 0.4); }
	#header .icons a:hover { color: var(--gold); }

/* ---- Publication cards ---- */

	#publications .row { align-items: stretch; }

	.item {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fffdf8;
		border: 1px solid rgba(33, 31, 27, 0.07);
		border-radius: 0.7em;
		overflow: hidden;
		box-shadow: 0 0.4em 1.4em rgba(33, 31, 27, 0.07);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.item:hover {
		transform: translateY(-5px);
		box-shadow: 0 0.9em 1.8em rgba(33, 31, 27, 0.14);
	}

	.item .image.fit { margin: 0; border-bottom: 1px solid rgba(33, 31, 27, 0.06); }

	.item .image.fit img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
		width: 100%;
	}

	.item header { padding: 1.1em 1.3em 0 1.3em; font-size: 1em; }

	.item header h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.18em;
		font-weight: 500;
		line-height: 1.32em;
		color: var(--heading);
	}

	.item > p {
		padding: 0.6em 1.3em 1.4em 1.3em;
		margin: 0;
		text-align: left;
		font-size: 0.82em;
		line-height: 1.6em;
		color: var(--ink-soft);
	}

/* ---- Research subheadings ---- */

	#research .container > h3 {
		max-width: 60rem;
		margin: 0.25em auto 0.45em auto;
		text-align: left;
		font-family: 'Hanken Grotesk', sans-serif;
		font-size: 0.72em;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--accent);
	}

	#research .container > h3:not(:first-of-type) { margin-top: 1.6em; }

	#research .container > h3::before {
		content: '';
		display: inline-block;
		width: 1.6em;
		height: 2px;
		margin-right: 0.7em;
		background: var(--gold);
		vertical-align: middle;
	}

/* ---- Approach columns ---- */

	#approach .row h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-weight: 500;
		font-size: 1.6em;
		color: var(--accent-dark);
	}

/* ---- About photo ---- */

	.image.fit.rounded {
		border-radius: 0.7em;
		overflow: hidden;
		box-shadow: 0 0.6em 1.6em rgba(33, 31, 27, 0.16);
	}

/* ---- Awards ---- */

	ul.awards {
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: left;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2em;
	}

	ul.awards li {
		padding: 1.15em 1.35em;
		background: #fffdf8;
		border: 1px solid rgba(33, 31, 27, 0.07);
		border-left: 3px solid var(--accent);
		border-radius: 0.5em;
		box-shadow: 0 0.3em 0.9em rgba(33, 31, 27, 0.05);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	ul.awards li:hover {
		transform: translateY(-3px);
		box-shadow: 0 0.6em 1.3em rgba(33, 31, 27, 0.1);
	}

	ul.awards li h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.12em;
		font-weight: 500;
		margin: 0 0 0.2em 0;
		line-height: 1.32em;
	}

	ul.awards li p {
		margin: 0;
		font-size: 0.82em;
		line-height: 1.5em;
		color: var(--ink-soft);
	}

/* ---- Form ---- */

	form input, form textarea {
		background: #fffdf8;
		border: 1px solid rgba(33, 31, 27, 0.15);
		border-radius: 0.5em;
	}
	form input:focus, form textarea:focus {
		box-shadow: 0 0 0 2px var(--accent);
		background: #fff;
	}

/* ---- Footer (dark bookend) ---- */

	#footer {
		background: var(--sidebar);
		color: rgba(255, 255, 255, 0.5);
		box-shadow: none;
	}
	#footer .copyright li { border-left-color: rgba(255, 255, 255, 0.15); }

/* ---- Scroll reveal (uses Prologue's .inactive class from scrollex) ---- */

	@media (prefers-reduced-motion: no-preference) {

		#main > section:not(#top):not(#publications):not(#awards) > .container {
			transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
		}
		#main > section:not(#top):not(#publications):not(#awards).inactive > .container {
			opacity: 0;
			transform: translateY(24px);
		}

		#publications > .container > header,
		#awards > .container > header {
			transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
		}
		#publications.inactive > .container > header,
		#awards.inactive > .container > header { opacity: 0; transform: translateY(24px); }

		#publications .item, ul.awards li {
			transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
				box-shadow 0.3s ease;
		}
		#publications.inactive .item, #awards.inactive ul.awards li {
			opacity: 0;
			transform: translateY(20px);
		}

		#publications .row > div:nth-child(2) .item { transition-delay: 0.12s; }
		#publications .row > div:nth-child(3) .item { transition-delay: 0.24s; }
		#awards li:nth-child(2) { transition-delay: 0.08s; }
		#awards li:nth-child(3) { transition-delay: 0.16s; }
		#awards li:nth-child(4) { transition-delay: 0.24s; }
		#awards li:nth-child(5) { transition-delay: 0.32s; }
		#awards li:nth-child(6) { transition-delay: 0.4s; }
		#awards li:nth-child(7) { transition-delay: 0.48s; }
	}

/* ---- Mobile ---- */

	@media screen and (max-width: 960px) {
		#headerToggle .toggle:before {
			background: var(--accent);
			box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.25);
		}
	}

	@media screen and (max-width: 736px) {
		body { font-size: 13.5pt; line-height: 1.66em; }
		#main section.cover header h2.alt { font-size: 2.2em; }
		#main section.cover header p { font-size: 1em; }
		#main > section:not(.cover) > .container > header h2 { font-size: 1.95em; }
		ul.awards { grid-template-columns: 1fr; gap: 1em; }
		.item { margin-bottom: 1.25em; }
		#nav ul li a { padding-top: 0.65em; padding-bottom: 0.65em; }
	}