@font-face {
	font-family: Lato;
	src: url(assets/Lato-Regular.ttf) format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Lato;
	src: url(assets/Lato-Bold.ttf) format("truetype");
	font-weight: 700;
	font-display: swap;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 25px;
}
body {
	margin: 0;
	background: #f8f7f4;
	color: #11191e;
	font-family: Lato, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}
a:focus-visible,
button:focus-visible {
	outline: 3px solid #296b9d;
	outline-offset: 5px;
}
a:hover,
button:hover {
	color: #286b9d;
}
.skip {
	position: absolute;
	top: -100px;
	z-index: 20;
	background: white;
	padding: 15px;
}
.skip:focus {
	top: 0;
}
.hero {
	height: 365px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.hero-image {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: url(assets/header.png) center center/cover no-repeat;
}
.hero:before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 36%;
	background: rgba(248, 247, 244, 0.9);
	z-index: -2;
}
.wordmark {
	font-size: 26px;
	letter-spacing: -1px;
}
.hero > .wordmark {
	position: absolute;
	left: 4.3%;
	top: 17px;
}
.hero nav {
	position: absolute;
	right: 0;
	top: 0;
	background: #f8f7f4;
	width: 39%;
	height: 73px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 12px;
	padding: 0 30px;
	font-size: 14px;
}
.hero nav a {
	padding: 9px 0;
	white-space: nowrap;
}
.hero nav a.active {
	border-bottom: 2px solid;
}
.intro {
	position: absolute;
	left: 4.3%;
	top: 75px;
	width: 31%;
}
.short-rule {
	display: block;
	width: 27px;
	height: 2px;
	background: #172025;
	margin: 0 0 20px;
}
.intro h1 {
	font-size: clamp(30px, 3.25vw, 56px);
	font-weight: 400;
	letter-spacing: -2px;
	line-height: 1.04;
	margin: 0 0 14px;
}
.intro p {
	font-size: 17px;
	line-height: 1.3;
	margin: 0;
	max-width: 475px;
}
.red {
	color: #e8473a;
}
.interests {
	position: absolute;
	right: 0;
	top: 73px;
	bottom: 0;
	background: #f8f7f4;
	width: 12.6%;
	padding: 39px 25px 0 49px;
	font-size: 18px;
	line-height: 1.2;
}
.interests:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 0;
	height: 100%;
	width: 170px;
	background: #f8f7f4;
	border-radius: 0 100% 0 0;
	transform: scaleX(-1);
	z-index: -1;
}
.interests .short-rule {
	margin-top: 18px;
	width: 24px;
}
.menu-toggle {
	display: none;
}
main,
footer {
	max-width: 1700px;
	margin: auto;
	padding: 0 4.5%;
}
.areas {
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
	border-bottom: 1px solid #d2d2ce;
}
.area {
	padding: 23px 30px 27px;
	scroll-margin-top: 20px;
}
.area:first-child {
	padding-left: 0;
}
.area:last-child {
	padding-right: 0;
}
.area + .area {
	border-left: 1px solid #d2d2ce;
}
.section-number {
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0 0 9px;
}
.section-number span {
	height: 2px;
	width: 29px;
	background: var(--accent);
}
.academic {
	--accent: #2b6899;
}
.design {
	--accent: #45674c;
}
.media {
	--accent: #ed3e32;
}
.area-grid {
	display: grid;
	grid-template-columns: 32% 1fr;
	gap: 24px;
}
.area-icon {
	width: 100%;
	height: auto;
	max-width: 145px;
}
.area h2 {
	font-size: 29px;
	line-height: 1.08;
	letter-spacing: -1px;
	font-weight: 400;
	margin: 0 0 16px;
}
.area p {
	font-size: 14px;
	line-height: 1.35;
	color: #505156;
	margin: 0;
}
.colour-rule {
	display: block;
	background: var(--accent);
	height: 3px;
	width: 45px;
	margin: 19px 0 16px;
}
.links {
	display: grid;
	gap: 4px;
}
.links a,
.links button {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
	text-align: left;
	border: 0;
	background: none;
	padding: 3px 0;
	width: 100%;
}
.links span {
	font-size: 20px;
	line-height: 1;
}
.channels {
	margin-top: 20px;
}
.channels > a {
	display: grid;
	grid-template-columns: 90px 1fr 20px;
	gap: 17px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid #deded9;
}
.channels > a:last-child {
	border: 0;
}
.channels strong {
	display: block;
	font-size: 15px;
}
.channels small {
	display: block;
	color: #55585b;
	font-size: 12px;
}
.channels em {
	display: block;
	font-size: 10px;
	font-style: normal;
	color: #777;
	margin-top: 2px;
}
.channels b {
	font-size: 23px;
	font-weight: 400;
}
.about {
	display: grid;
	grid-template-columns: 26% 1fr 25%;
	gap: 35px;
	padding: 18px 0 22px;
	border-bottom: 1px solid #d2d2ce;
	align-items: center;
}
.about > img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: center 32%;
}
.about-copy h2 {
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 9px;
}
.about-copy .short-rule {
	margin: 0;
	width: 24px;
	height: 1px;
}
.about-copy p {
	font-size: 14px;
	color: #55585b;
	margin: 0 0 9px;
	line-height: 1.45;
}
.more {
	background: none;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
}
.more > span {
	border: 1px solid;
	border-radius: 50%;
	width: 33px;
	height: 33px;
	display: grid;
	place-items: center;
	font-size: 22px;
}
.about aside {
	border-left: 1px solid #d2d2ce;
	padding: 0 22px;
	position: relative;
	min-height: 140px;
}
.about aside p {
	font-size: 25px;
	font-family: Georgia, serif;
	line-height: 1.2;
	max-width: 210px;
	margin: 0 0 15px;
}
.about aside small {
	display: block;
	color: #606269;
	max-width: 190px;
	font-size: 12px;
}
.quarter {
	float: right;
	width: 50px;
	height: 50px;
	background: #2b608b;
	border-radius: 0 100% 0 0;
	margin: 0 0 10px 15px;
}
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	padding-top: 20px;
	padding-bottom: 30px;
	margin-top: 13px;
}
footer .wordmark {
	font-size: 15px;
	letter-spacing: -0.5px;
}
footer > div {
	display: flex;
	gap: 30px;
	font-size: 12px;
}
footer span {
	color: #555;
}
dialog {
	border: 0;
	background: #f8f7f4;
	color: #172025;
	max-width: 760px;
	width: calc(100% - 35px);
	padding: 45px;
	max-height: 85vh;
	box-shadow: 0 15px 90px #0003;
}
dialog::backdrop {
	background: #17202599;
	backdrop-filter: blur(5px);
}
.close {
	display: block;
	margin-left: auto;
	border: 0;
	background: none;
	padding: 0 0 25px;
	font-size: 14px;
}
dialog h2 {
	font-size: 35px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -1px;
}
dialog h3 {
	font-size: 21px;
	font-weight: 400;
	margin: 28px 0 8px;
}
dialog p {
	color: #505156;
}
dialog a {
	color: #265f8e;
	text-decoration: underline;
}
body.modal-open {
	overflow: hidden;
}
@media (min-width: 1700px) {
	.hero {
		height: 420px;
	}
	.intro {
		top: 95px;
	}
}
@media (max-width: 1150px) {
	.hero {
		height: 340px;
	}
	.intro h1 {
		font-size: 36px;
	}
	.intro p {
		font-size: 15px;
	}
	.hero nav {
		width: 48%;
		padding: 0 20px;
	}
	.interests {
		width: 13%;
		padding-left: 20px;
		font-size: 16px;
	}
	.area {
		padding: 24px 20px;
	}
	.area-grid {
		grid-template-columns: 27% 1fr;
		gap: 16px;
	}
	.area h2 {
		font-size: 25px;
	}
	.channels > a {
		grid-template-columns: 58px 1fr 15px;
		gap: 10px;
	}
	.about {
		grid-template-columns: 23% 1fr;
		gap: 25px;
	}
	.about aside {
		display: none;
	}
	footer > div {
		gap: 17px;
	}
}
@media (max-width: 800px) {
	.hero {
		height: auto;
		padding-bottom: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
	}
	.hero-image {
		position: relative;
		order: 2;
		inset: auto;
		height: 240px;
		background-size: auto 270px;
		background-position: 60% center;
		z-index: 0;
	}
	.hero:before,
	.interests {
		display: none;
	}
	.hero > .wordmark {
		position: relative;
		top: auto;
		left: auto;
		margin: 20px 6%;
		font-size: 23px;
	}
	.hero nav {
		display: none;
		top: 65px;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 5;
		padding: 20px 6%;
		box-shadow: 0 15px 20px #0001;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 12px 25px;
	}
	.hero nav.open {
		display: flex;
	}
	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		position: absolute;
		right: 6%;
		top: 23px;
		border: 0;
		background: none;
		font-size: 13px;
	}
	.intro {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		padding: 20px 6% 30px;
		order: 1;
	}
	.intro h1 {
		font-size: clamp(34px, 6.7vw, 52px);
		letter-spacing: -1.5px;
	}
	.intro p {
		font-size: 16px;
		max-width: 500px;
	}
	.intro .short-rule {
		margin-bottom: 18px;
	}
	.areas {
		display: block;
	}
	.area,
	.area:first-child,
	.area:last-child {
		padding: 28px 0;
	}
	.area + .area {
		border-left: 0;
		border-top: 1px solid #d2d2ce;
	}
	.area-grid {
		grid-template-columns: 100px 1fr;
		gap: 25px;
	}
	.area h2 {
		font-size: 29px;
	}
	.area p {
		font-size: 15px;
		max-width: 420px;
	}
	.links {
		max-width: 420px;
	}
	.links a,
	.links button {
		font-size: 15px;
		padding: 6px 0;
	}
	.channels {
		margin-left: 125px;
	}
	.channels > a {
		grid-template-columns: 65px 1fr 20px;
	}
	.about {
		grid-template-columns: 110px 1fr;
		gap: 20px;
		padding: 25px 0;
		align-items: start;
	}
	.about > img {
		height: 155px;
	}
	.about-copy p {
		font-size: 14px;
	}
	footer {
		align-items: start;
		flex-direction: column;
		padding-bottom: 30px;
	}
	footer > div {
		flex-wrap: wrap;
		gap: 15px 25px;
	}
	main,
	footer {
		padding-left: 6%;
		padding-right: 6%;
	}
	dialog {
		padding: 25px;
	}
}
@media (max-width: 420px) {
	.area-grid {
		grid-template-columns: 77px 1fr;
		gap: 20px;
	}
	.channels {
		margin-left: 0;
	}
	.about {
		grid-template-columns: 1fr;
	}
	.about > img {
		width: 140px;
		height: 130px;
	}
	.hero-image {
		background-position: 58% center;
	}
	.area h2 {
		font-size: 27px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Supplied channel identities; preserve their original proportions. */
.channel-logo {
	width: 64px;
	height: 64px;
	object-fit: contain;
	display: block;
}
.channels > a {
	grid-template-columns: 64px 1fr 20px;
	gap: 18px;
	padding: 10px 0;
}
.about {
	grid-template-columns: minmax(0, 1fr) 27%;
	gap: 55px;
	padding-top: 25px;
	padding-bottom: 25px;
}
.about-copy {
	max-width: 850px;
}
.about-copy p {
	font-size: 15px;
}
.about-copy h2 {
	margin-bottom: 12px;
}
@media (max-width: 1150px) {
	.about {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.channels > a {
		grid-template-columns: 54px 1fr 18px;
		gap: 12px;
	}
	.channel-logo {
		width: 54px;
		height: 54px;
	}
}
@media (max-width: 800px) {
	.about {
		grid-template-columns: 1fr;
	}
	.channels > a {
		grid-template-columns: 60px 1fr 20px;
	}
	.channel-logo {
		width: 60px;
		height: 60px;
	}
}
/* Keep navigation in its own row above the portrait on desktop. */
@media (min-width: 801px) {
	.hero {
		height: 438px;
		padding-top: 73px;
	}
	.hero-image {
		top: 73px;
	}
	.hero:before {
		top: 73px;
	}
	.hero > .wordmark {
		top: 18px;
	}
	.hero nav {
		background: #f8f7f4;
	}
	.hero .intro {
		top: 148px;
	}
	.interests {
		top: 73px;
	}
}
@media (min-width: 1700px) {
	.hero {
		height: 493px;
	}
	.hero .intro {
		top: 168px;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.hero {
		height: 413px;
	}
}
/* Rounded end of the header, with the subject list inset into its clear area. */
@media (min-width: 801px) {
	.interests {
		width: 16%;
		padding: 42px 22px 25px 36px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 18px;
		line-height: 1.28;
	}
	.interests:before {
		width: 155px;
		border-radius: 0;
		transform: none;
		clip-path: ellipse(100% 70% at 100% 70%);
	}
	.interests .short-rule {
		flex: none;
		margin-top: 20px;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		width: 15%;
		padding-left: 20px;
		font-size: 16px;
	}
	.interests:before {
		width: 105px;
	}
}
/* Quiet thematic words, with a warmer tone and more presence. */
@media (min-width: 801px) {
	.interests {
		font-size: 22px;
		line-height: 1.3;
		font-weight: 400;
		color: #655f58;
		letter-spacing: -0.35px;
	}
	.interests .short-rule {
		background: #827a70;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		font-size: 19px;
	}
}
/* A more compact desktop introduction, keeping navigation above the photo. */
@media (min-width: 801px) {
	.hero {
		height: 393px;
	}
	.hero .intro {
		top: 125px;
	}
	.interests {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}
@media (min-width: 1700px) {
	.hero {
		height: 433px;
	}
	.hero .intro {
		top: 142px;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.hero {
		height: 383px;
	}
	.hero .intro {
		top: 120px;
	}
}

/* Detail panels share the homepage’s geometric vocabulary. */
dialog {
	max-width: 900px;
	padding: 30px 42px 42px;
}
.close {
	padding-bottom: 18px;
}
.panel-banner {
	position: relative;
	isolation: isolate;
	height: 135px;
	padding: 22px 25px;
	display: flex;
	align-items: center;
	gap: 25px;
	overflow: hidden;
	background: #eeeae3;
	color: #3f5e46;
	margin: 0 0 28px;
}
.panel-banner.blue {
	background: #e9eef0;
	color: #295e85;
}
.panel-banner.red {
	background: #f1e8e3;
	color: #a44437;
}
.panel-banner > img {
	height: 86px;
	width: 92px;
	object-fit: contain;
}
.panel-banner > span {
	font-size: 12px;
	letter-spacing: 1.5px;
	max-width: 200px;
	z-index: 1;
}
.panel-circle {
	position: absolute;
	right: 85px;
	top: -42px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.12;
}
.panel-quarter {
	position: absolute;
	right: -10px;
	bottom: -15px;
	width: 150px;
	height: 150px;
	border-radius: 100% 0 0 0;
	background: currentColor;
	opacity: 0.22;
}
.panel-line {
	position: absolute;
	width: 130px;
	height: 8px;
	right: 165px;
	bottom: 25px;
	background: currentColor;
	transform: rotate(-45deg);
	opacity: 0.25;
}
dialog h2 {
	margin: 0 0 20px;
}
dialog p {
	font-size: 16px;
	line-height: 1.6;
}
.panel-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 20px;
	border-top: 1px solid #d2d2ce;
	padding-top: 22px;
	margin-top: 28px;
}
.panel-gallery figure {
	margin: 0;
}
.project-wide {
	width: 100%;
}
.project-wide img {
	width: 100%;
	height: auto;
	display: block;
}
.project-cover {
	width: 190px;
}
.project-cover img {
	width: 100%;
	height: auto;
	display: block;
}
.panel-gallery figcaption {
	font-size: 12px;
	color: #68635c;
	line-height: 1.5;
	margin-top: 8px;
}
.project-context {
	font-size: 12px !important;
	border-left: 2px solid #638166;
	padding-left: 14px;
}
.interface-image img {
	max-height: 280px;
	object-fit: contain;
	background: white;
}
@media (max-width: 600px) {
	dialog {
		padding: 22px;
	}
	.panel-banner {
		height: 110px;
		padding: 16px;
		gap: 15px;
	}
	.panel-banner > img {
		width: 65px;
		height: 70px;
	}
	.panel-banner > span {
		max-width: 150px;
		font-size: 10px;
	}
	.panel-circle {
		right: 5px;
	}
	.panel-quarter {
		right: -60px;
	}
	.panel-line {
		right: 40px;
	}
	dialog h2 {
		font-size: 29px;
	}
}

.research-topics {
	margin: 24px 0 30px;
	display: grid;
	gap: 0;
}
.research-topics section {
	padding: 18px 0 12px 18px;
	border-left: 2px solid #8ca8bc;
	border-bottom: 1px solid #deded8;
}
.research-topics h3 {
	margin: 0 0 8px;
	font-size: 21px;
}
.research-topics p {
	margin: 0 0 8px;
}

.panel-hero {
	margin: 0 0 26px;
}
.panel-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2/1;
	object-fit: cover;
}
.panel-hero figcaption {
	font-size: 11px;
	color: #716b63;
	margin-top: 7px;
	line-height: 1.4;
}

.about-geometric {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 92px;
	flex-shrink: 0;
}
.about-geometric i {
	display: block;
	width: 25px;
	height: 47px;
	background: #2b608b;
}
.about-geometric i:first-child {
	height: 25px;
	border-radius: 50%;
	background: #6396be;
}
.about-geometric i:last-child {
	border-radius: 0 25px 0 0;
	background: #9bb7c9;
}
@media (max-width: 600px) {
	.about-geometric {
		width: 65px;
		gap: 5px;
	}
	.about-geometric i {
		width: 18px;
		height: 36px;
	}
	.about-geometric i:first-child {
		height: 18px;
	}
}
/* Exact quarter-circle: radius equals the photograph height. */
@media (min-width: 801px) {
	.hero {
		--photo-height: 320px;
	}
	.interests:before {
		width: var(--photo-height);
		height: var(--photo-height);
		top: 0;
		right: 100%;
		background: radial-gradient(
			circle at 0 100%,
			transparent calc(var(--photo-height) - 0.5px),
			#f8f7f4 var(--photo-height)
		);
		clip-path: none;
		border-radius: 0;
		transform: none;
	}
}
@media (min-width: 1700px) {
	.hero {
		--photo-height: 360px;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.hero {
		--photo-height: 310px;
	}
}
@media (min-width: 801px) {
	.interests:before {
		background: radial-gradient(
			circle at 100% 100%,
			#f8f7f4 calc(var(--photo-height) - 0.5px),
			transparent var(--photo-height)
		);
	}
}
/* Keep the circular cut-out within the right-hand edge, clear of the portrait. */
@media (min-width: 801px) {
	.interests {
		width: 10%;
		padding-left: 0;
		padding-right: 18px;
	}
	.interests:before {
		background: radial-gradient(
			circle at 100% 100%,
			#f8f7f4 calc(var(--photo-height) - 0.5px),
			transparent var(--photo-height)
		);
		right: calc(100% - 140px);
	}
	.interests {
		z-index: 0;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		width: 11%;
		padding-left: 0;
		padding-right: 12px;
		font-size: 17px;
	}
	.interests:before {
		right: calc(100% - 180px);
	}
}
/* A true lateral semicircle, contained at the right of the photograph. */
@media (min-width: 801px) {
	.interests {
		width: 14%;
		padding: 20px 20px 20px 20px;
	}
	.interests:before {
		width: calc(var(--photo-height) / 2);
		height: var(--photo-height);
		right: 100%;
		top: 0;
		background: #f8f7f4;
		border-radius: 100% 0 0 100% / 50% 0 0 50%;
		clip-path: none;
		transform: none;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		width: 12%;
		padding-left: 8px;
		padding-right: 10px;
		font-size: 17px;
	}
}
/* Move the semicircle and thematic words towards the outer edge. */
@media (min-width: 801px) {
	.interests {
		width: 11%;
		padding-left: 18px;
		padding-right: 12px;
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		width: 10%;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 17px;
	}
}
/* Preserve the text position; adjust only the circular boundary. */
@media (min-width: 801px) {
	.interests {
		width: 14%;
		padding: 20px;
	}
	.interests:before {
		transform: translateX(46px);
	}
}
@media (min-width: 801px) and (max-width: 1150px) {
	.interests {
		width: 12%;
		padding-left: 8px;
		padding-right: 10px;
		font-size: 17px;
	}
	.interests:before {
		transform: translateX(21px);
	}
}

/* Equal visible pictogram heights; retain the proportions of each drawing. */
.area-grid {
	grid-template-columns: 140px minmax(0, 1fr);
}
.area-icon {
	width: auto;
	height: 112px;
	max-width: none;
	justify-self: start;
}
@media (max-width: 1150px) {
	.area-grid {
		grid-template-columns: 80px minmax(0, 1fr);
	}
	.area-icon {
		height: 64px;
	}
}
@media (max-width: 800px) {
	.area-grid {
		grid-template-columns: 90px minmax(0, 1fr);
	}
	.area-icon {
		height: 72px;
	}
}
@media (max-width: 420px) {
	.area-grid {
		grid-template-columns: 75px minmax(0, 1fr);
	}
	.area-icon {
		height: 60px;
	}
}