/* Project-specific layer on top of Directive by HTML5 UP. */

:root {
	--site-green: #287f69;
	--site-ink: #263d4a;
	--site-muted: #6e7c82;
	--site-line: rgba(43, 89, 99, 0.18);
}

html {
	scroll-behavior: smooth;
}

#header {
	padding-top: 7em;
}

#header h1 {
	font-size: 2.15em;
	letter-spacing: 0.08em;
}

#header p {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}

.site-nav {
	display: flex;
	justify-content: center;
	gap: 1.3em;
	margin: -2.5em auto 4em;
	position: relative;
	z-index: 2;
}

.site-nav a {
	border: 0;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.institutional-logo {
	background: transparent;
	border: 0;
	display: inline-block;
	margin: 0;
	padding: 0;
}

.institutional-logos {
	align-items: center;
	display: flex;
	gap: clamp(1.25em, 4vw, 3.5em);
	justify-content: center;
	margin: 0 auto 2em;
}

.institutional-logo img {
	display: block;
	height: auto;
	filter: drop-shadow(0 0 0.45em rgba(255, 255, 255, 0.3));
	width: min(30vw, 420px);
}

.dmf-logo img {
	width: min(11vw, 135px);
}

.intro p,
.content-section > header > p:last-child {
	max-width: 38em;
	margin-left: auto;
	margin-right: auto;
}

.eyebrow {
	color: var(--site-green);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.15em;
	margin-bottom: 0.75em;
	text-transform: uppercase;
}

.feature .content h3 {
	color: var(--site-ink);
}

.network-note {
	color: var(--site-muted);
	font-size: 0.88em;
	margin-top: -0.45em;
}

#logic .image img {
	height: 100%;
	min-height: 0;
	min-width: 0;
	object-fit: contain;
	object-position: center;
	padding: 2.5em;
	width: 100%;
}

.feature .image.aes-cryptanalysis {
	background: #07131a;
}

.feature .image.aes-cryptanalysis img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.feature .image.theoretical-computer-science {
	background: #efffe8;
}

.feature .image.theoretical-computer-science img {
	height: 100%;
	object-fit: contain;
	object-position: center;
	width: 100%;
}

.text-link {
	border-bottom: 0;
	font-size: 0.9em;
	font-weight: 600;
}

.feature .content .logic-area-link {
	margin-bottom: 1.25em;
}

.text-link span {
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 0.2s ease-in-out;
}

.text-link:hover span {
	transform: translateX(0.25em);
}

.content-section {
	padding: 3.5em;
}

.content-section > header {
	margin-bottom: 3em;
	text-align: center;
}

.content-section > header h2 {
	margin-bottom: 0.55em;
}

.section-grid {
	display: grid;
	gap: 1.5em;
	grid-template-columns: repeat(3, 1fr);
}

.info-card {
	border-top: 3px solid var(--site-green);
	padding: 1.75em 1.4em 1.2em;
}

.info-card > .icon {
	color: var(--site-green);
	display: block;
	font-size: 1.5em;
	margin-bottom: 0.8em;
	text-align: center;
}

.info-card h3 {
	font-size: 1.05em;
	letter-spacing: 0.08em;
	margin-bottom: 0.8em;
}

.info-card p {
	font-size: 0.9em;
}

.info-card a {
	font-size: 0.85em;
	font-weight: 600;
}

.people-columns {
	display: grid;
	gap: 2.5em;
	grid-template-columns: repeat(3, 1fr);
}

.former-members {
	margin-top: 3em;
}

.former-members h3 {
	font-size: 1em;
	letter-spacing: 0.1em;
	margin-bottom: 1.1em;
	text-align: left;
}

.people-columns h3 {
	font-size: 1em;
	letter-spacing: 0.1em;
	margin-bottom: 1.1em;
	text-align: left;
}

.person-list {
	border-left: 2px solid var(--site-line);
	list-style: none;
	margin: 0;
	padding-left: 1.1em;
}

.person-list li {
	color: var(--site-ink);
	font-size: 0.9em;
	line-height: 1.45;
	margin-bottom: 0.6em;
}

.person-list a {
	border-bottom: 0;
	color: inherit;
}

.person-list a:hover {
	color: var(--site-green);
}

.person-list.compact li {
	font-size: 0.83em;
	margin-bottom: 0.38em;
}

.section-note {
	border-top: 1px solid var(--site-line);
	color: var(--site-muted);
	font-size: 0.85em;
	margin: 2.5em 0 0;
	padding-top: 1.25em;
}

.activity-links {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(3, 1fr);
}

.seminar-list {
	margin-bottom: 3em;
}

.seminar-list > h3 {
	font-size: 1em;
	letter-spacing: 0.1em;
	margin-bottom: 1.25em;
	text-align: left;
}

.seminar-item {
	background: rgba(43, 89, 99, 0.045);
	border-left: 3px solid var(--site-green);
	margin-bottom: 1.25em;
	padding: 1.5em 1.6em 1.25em;
}

.seminar-item h4 {
	color: var(--site-ink);
	font-size: 1.15em;
	line-height: 1.35;
	margin-bottom: 0.55em;
}

.seminar-date {
	color: var(--site-green);
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.65em;
	text-transform: uppercase;
}

.seminar-speaker,
.seminar-location,
.seminar-contact,
.seminar-item details {
	font-size: 0.88em;
}

.seminar-speaker {
	margin-bottom: 0.55em;
}

.seminar-location {
	color: var(--site-muted);
	margin-bottom: 1em;
}

.seminar-news {
	font-size: 0.78em;
	margin: -0.35em 0 1em;
}

.seminar-news a {
	border-bottom: 1px solid var(--site-green);
	color: var(--site-green);
}

.seminar-item details {
	border-top: 1px solid var(--site-line);
	padding-top: 0.85em;
}

.seminar-item summary {
	color: var(--site-ink);
	cursor: pointer;
	font-weight: 600;
}

.seminar-item details p {
	margin: 0.9em 0 0;
}

.seminar-contact {
	color: var(--site-muted);
	margin: 1em 0 0;
}

.activity-link {
	align-items: center;
	background: rgba(43, 89, 99, 0.045);
	border: 0;
	display: flex;
	gap: 1em;
	min-height: 6em;
	padding: 1em;
}

.activity-link:hover {
	background: rgba(43, 89, 99, 0.1);
}

.activity-link > .icon {
	color: var(--site-green);
	font-size: 1.35em;
}

.activity-link strong,
.activity-link small {
	display: block;
}

.activity-link strong {
	color: var(--site-ink);
	font-size: 0.9em;
}

.activity-link small {
	color: var(--site-muted);
	font-size: 0.78em;
	line-height: 1.4;
	margin-top: 0.25em;
}

#footer {
	background-color: var(--site-green);
}

.archive-details {
	border-top: 1px solid var(--site-line);
	margin-top: 2em;
	padding-top: 1.5em;
}

.archive-details summary {
	color: var(--site-ink);
	cursor: pointer;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.archive-table-wrap {
	overflow-x: auto;
}

.seminar-archive-table {
	border-collapse: collapse;
	font-size: 0.78em;
	margin-top: 1.25em;
	min-width: 62em;
	width: 100%;
}

.seminar-archive-table th,
.seminar-archive-table td {
	border-bottom: 1px solid var(--site-line);
	padding: 0.85em 0.7em;
	text-align: left;
	vertical-align: top;
}

.seminar-archive-table th {
	color: var(--site-ink);
	font-size: 0.88em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.seminar-archive-table a {
	border-bottom: 0;
}

.archive-date {
	color: var(--site-green);
	font-weight: 700;
	white-space: nowrap;
}

.archive-date small,
.archive-speaker small,
.archive-type {
	display: block;
}

.archive-date small,
.archive-speaker small,
.archive-location,
.archive-source,
.archive-muted {
	color: var(--site-muted);
	font-size: 0.92em;
	font-weight: 400;
	margin-top: 0.25em;
}

.archive-type {
	color: var(--site-green);
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 0.35em;
	text-transform: uppercase;
}

/* The research area's masthead uses a blackboard photograph instead of the
   original burgundy Directive background. The dark overlay keeps the white
   institutional text readable while preserving the chalkboard texture. */
#header {
	background-attachment: scroll, scroll, fixed;
	background-color: #332d30;
	background-image: url("images/top-3200.svg"), linear-gradient(rgba(35, 28, 31, 0.48), rgba(35, 28, 31, 0.66)), url("../../images/blackboard.jpg");
	background-position: bottom center, center, center 22%;
	background-repeat: repeat-x, no-repeat, no-repeat;
	background-size: 3200px 460px, cover, auto 155%;
}

@media screen and (max-width: 980px) {
	#header h1 {
		font-size: 1.85em;
	}

	.section-grid,
	.people-columns,
	.activity-links {
		grid-template-columns: 1fr;
	}

	.content-section {
		padding: 2.5em;
	}
}

@media screen and (max-width: 736px) {
	#header {
		padding-top: 4.5em;
	}

	.site-nav {
		flex-wrap: wrap;
		gap: 0.5em 1em;
		margin: -1em auto 2.5em;
	}

	.site-nav a {
		font-size: 0.64em;
	}

	#header h1 {
		font-size: 1.45em;
	}

	.institutional-logo img {
		width: min(45vw, 210px);
	}

	.institutional-logos {
		gap: 1em;
	}

	.dmf-logo img {
		width: min(24vw, 105px);
	}

	.content-section {
		padding: 2em 1.25em;
	}
}