html {
  scroll-behavior: smooth;
}

:root {
  --font-heading: "Libertinus Sans", Arial, Helvetica, sans-serif;
  --font-size-base: 16.5px;
  --font-size-intro: 18px;
  --font-size-title: var(--font-size-base);
  --font-size-heading: 24px;
  --font-size-name: 36px;
  --font-size-nav: 18px;
  --font-size-footer: 13.2px;
  --cell-padding: 20px;
  --intro-cell-padding: 2.5%;
  --page-mobile-inset: 48px;
  --mobile-content-gap: 24px;
  --text-color: #555555;
  --emphasis-color: #000000;
  --link-color: #1772d0;
  --link-hover-color: #f09228;
  --page-max-width: 960px;
  --image-max-width: 260px;
}

@media (max-width: 768px) {
  :root {
    --font-size-base: 14.5px;
    --font-size-intro: 15.8px;
    --font-size-heading: 21.1px;
    --font-size-name: 31.6px;
    --font-size-nav: 15.8px;
    --font-size-footer: 11.6px;
    --cell-padding: 10px;
    --intro-cell-padding: 1.5%;
    --page-mobile-inset: 32px;
    --mobile-content-gap: 20px;
    --image-max-width: 234px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 13.2px;
    --font-size-intro: 14.4px;
    --font-size-heading: 19.2px;
    --font-size-name: 28.8px;
    --font-size-nav: 14.4px;
    --font-size-footer: 10.55px;
    --cell-padding: 8px;
    --intro-cell-padding: 1.25%;
    --page-mobile-inset: 24px;
    --mobile-content-gap: 16px;
    --image-max-width: 213px;
  }
}

body {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  color: var(--text-color);
  padding-top: 80px;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e5e5e5;
  z-index: 1000;
}

.top-nav-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  box-sizing: border-box;
}

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.top-nav-links a {
  color: var(--emphasis-color);
  font-size: var(--font-size-nav);
  font-weight: 400;
  white-space: nowrap;
}

.top-nav-links a:hover,
.top-nav-links a:focus {
  color: var(--link-color);
}

.top-nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
}

.top-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--emphasis-color);
  border-radius: 999px;
}

@media (max-width: 768px) {
  body {
    padding-top: calc(47px + var(--mobile-content-gap));
  }

  .top-nav-inner {
    padding: 14px 16px;
    position: relative;
  }

  .top-nav-toggle {
    display: flex;
  }

  .top-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e5e5e5;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 16px 12px 16px;
    box-sizing: border-box;
  }

  .top-nav-links.open {
    display: flex;
  }

  .top-nav-links a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
}

table {
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

body,
td,
th,
tr,
a,
strong {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
}

strong,
b {
  color: var(--emphasis-color) !important;
  font-weight: 400 !important;
}

h2,
.papertitle,
.name,
.name strong {
  color: var(--emphasis-color);
  font-family: var(--font-heading) !important;
}

td,
th,
tr,
p,
a {
  font-size: var(--font-size-base);
}

em {
  font-weight: 300;
}

.page-table {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .page-table {
    width: calc(100% - var(--page-mobile-inset));
  }

  .pub-image-cell {
    padding-right: 5px;
  }

  .pub-text-cell {
    padding-left: 5px;
  }
}

@media (max-width: 480px) {
  .pub-image-cell {
    padding-right: 4px;
  }

  .pub-text-cell {
    padding-left: 4px;
  }
}

.content-table,
.section-table {
  width: 100%;
  margin: 0 auto;
}

.intro-cell {
  padding: var(--intro-cell-padding);
  width: 58%;
  vertical-align: middle;
}

.center-text {
  text-align: center;
}

.intro-text {
  font-size: var(--font-size-intro) !important;
  font-weight: 300;
}

.intro-text a,
.intro-text strong {
  font-size: inherit !important;
}

.intro-text a {
  font-weight: 400;
}

.intro-text strong {
  font-weight: 400;
}

.profile-cell {
  padding: var(--intro-cell-padding);
  width: 34%;
  max-width: 34%;
  text-align: left;
  vertical-align: middle;
}

.profile-img {
  display: block;
  width: 80%;
  max-width: 80%;
  margin: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 768px) {
  .profile-img {
    width: 90%;
    max-width: 90%;
  }
}

.section-heading-cell {
  padding: var(--cell-padding);
  width: 100%;
  vertical-align: middle;
}

h2 {
  margin: 0;
  font-weight: 400;
  font-size: var(--font-size-heading);
}

.papertitle {
  font-size: var(--font-size-title);
  font-weight: 400;
  color: var(--emphasis-color);
}

.homepage-authors,
.homepage-authors strong,
.homepage-authors sup {
  font-family: var(--font-heading) !important;
}

.homepage-authors,
.pub-text-cell > em {
  font-size: var(--font-size-base);
}

.name {
  padding-top: 20px;
  margin: 0;
  font-size: var(--font-size-name);
  font-weight: 400;
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .name {
    padding-top: 0;
  }
}

.pub-image-cell {
  padding: var(--cell-padding);
  width: 20%;
  vertical-align: middle;
}

.pub-text-cell {
  padding: var(--cell-padding);
  width: 80%;
  vertical-align: middle;
}

.link-row {
  margin: 4px 0 6px 0;
  font-weight: 300;
}

img {
  width: min(100%, var(--image-max-width));
  object-fit: contain;
  border-radius: 0;
}

@media (max-width: 768px) {
  .pub-image-cell img {
    width: 130px;
  }
}

@media (max-width: 480px) {
  .pub-image-cell img {
    width: 100px;
  }
}

.footer-cell {
  padding: 0;
}

.footer-text,
.footer-link {
  font-size: var(--font-size-footer);
}

.footer-text {
  text-align: right;
}