:root {
  --text: #252525;
  --muted: #626262;
  --link: #17665c;
  --link-dark: #0e4d45;
  --rule: #d9d9d4;
  --background: #fbfbf8;
  --soft: #f1f3ef;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--link-dark); }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 12px;
  background: white;
  z-index: 10;
}
.skip-link:focus { left: 8px; }

.site-width {
  width: min(900px, calc(100% - 42px));
  margin-inline: auto;
}

.site-header {
  padding: 42px 0 19px;
  border-bottom: 1px solid var(--rule);
}

.site-name {
  color: var(--text);
  font-size: 36px;
  line-height: 1.1;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 22px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
}

.site-header nav a { color: var(--link); text-decoration: none; }
.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav a[aria-current="page"] { text-decoration: underline; }

main { padding: 48px 0 72px; }

h1, h2, h3 {
  color: #1d1d1d;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.22;
}

h1 {
  margin: 0 0 30px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(34px, 5vw, 46px);
}

h2 { margin: 42px 0 13px; font-size: 27px; }
h3 { margin: 29px 0 8px; font-size: 20px; }
p { margin: 0 0 17px; }
ul, ol { margin: 8px 0 22px; padding-left: 25px; }
li { margin-bottom: 7px; }

.intro { color: #343434; font-size: 19px; line-height: 1.65; }

.home-photo { float: right; width: 210px; margin: 2px 0 22px 34px; }
.home-photo img,
.content-image img { border: 1px solid #d3d3ce; padding: 5px; background: white; }

figure { margin: 30px 0; }
figcaption {
  margin-top: 7px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
}

.content-image { width: min(100%, 650px); }
.content-image.medium { width: min(100%, 560px); }
.content-image.small { width: min(100%, 430px); }

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 34px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 14px;
}

.interest-list { columns: 2; column-gap: 45px; max-width: 720px; }
.detail-list { margin: 18px 0 28px; }
.detail-list dt {
  float: left;
  clear: left;
  width: 115px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}
.detail-list dd { margin: 0 0 8px 125px; }

.research-note {
  margin: 25px 0;
  padding: 18px 21px;
  border-left: 3px solid var(--link);
  background: var(--soft);
}

.publication-list { padding-left: 23px; }
.publication-list li { margin-bottom: 13px; }
.plain-sections section + section {
  margin-top: 39px;
  padding-top: 1px;
  border-top: 1px solid var(--rule);
}
.programme { margin-bottom: 25px; }
.programme h3 { margin-bottom: 5px; }
.programme p { margin-bottom: 8px; }

.contact-block {
  margin: 28px 0;
  padding: 20px 23px;
  background: var(--soft);
  border: 1px solid #dfe3dc;
}
.contact-block h2 { margin-top: 0; }
.contact-block p:last-child { margin-bottom: 0; }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 0 45px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
}
.site-footer p { margin: 0; }

@media (max-width: 650px) {
  body { font-size: 16px; }
  .site-width { width: min(100% - 30px, 900px); }
  .site-header { padding-top: 28px; }
  .site-name { font-size: 31px; }
  main { padding-top: 35px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  .home-photo { float: none; width: min(230px, 70%); margin: 0 0 27px; }
  .interest-list { columns: 1; }
  .detail-list dt { float: none; width: auto; margin-bottom: 1px; }
  .detail-list dd { margin-left: 0; margin-bottom: 12px; }
  .site-footer { display: block; }
  .site-footer p + p { margin-top: 7px; }
}