/* Typography overrides (edit these values to tweak line-height/letter-spacing) */
:root {
  --type-body-lh: 1.5;
  --type-body-ls: 0em;
  --type-title-lh: 1;
  --type-title-ls: 0em;
  --type-desc-lh: 1.2;
  --type-desc-ls: 0em;
  --type-nav-lh: 1;
  --type-nav-ls: 0em;
  --archive-nav-font: "Roboto Flex:Light", sans-serif;
  --archive-nav-size: 12px;
  --archive-nav-weight: 400;
  --archive-nav-lh: 18px;
}

body {
  font-family: "Space Grotesk", sans-serif;
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
}

.page-header .title {
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-ls);
}

.page-header .description {
  line-height: var(--type-desc-lh);
  letter-spacing: var(--type-desc-ls);
}

nav a,
.details .title,
.details .date,
.footer-text,
.back-to-top span {
  line-height: var(--type-nav-lh);
  letter-spacing: var(--type-nav-ls);
}

.site-header .logo-wrap {
  padding-left: 9px !important;
  padding-top: 5px !important;
}

.site-header .logo-image {
  max-width: 164px !important;
  width: 164px !important;
}

.site-header .logo-image img {
  max-height: none !important;
  width: 164px !important;
}

.site-header > .nav-container nav {
  padding-right: 18px !important;
  padding-top: 24px !important;
}

.site-header > .nav-container nav .gallery-title a,
.site-header > .nav-container nav .project-title a,
.site-header > .nav-container nav .page-title a,
.site-header > .nav-container nav .link-title a {
  font-family: var(--archive-nav-font) !important;
  font-size: var(--archive-nav-size) !important;
  font-weight: var(--archive-nav-weight) !important;
  line-height: var(--archive-nav-lh) !important;
  text-transform: none !important;
}

.site-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 6px;
}

.site-footer .footer-links a {
  font-family: var(--archive-nav-font) !important;
  font-size: var(--archive-nav-size) !important;
  font-weight: var(--archive-nav-weight) !important;
  line-height: var(--archive-nav-lh) !important;
  text-transform: none !important;
}

.back-to-top {
  text-align: center !important;
}

.back-to-top a {
  font-family: var(--archive-nav-font) !important;
  font-size: var(--archive-nav-size) !important;
  font-weight: var(--archive-nav-weight) !important;
  line-height: var(--archive-nav-lh) !important;
  text-transform: none !important;
}

.back-to-top .arrow,
.back-to-top-fixed {
  display: none !important;
}

.site-header > .nav-container nav a:hover,
.site-footer .footer-links a:hover,
.back-to-top a:hover {
  color: #111 !important;
}

@media (max-width: 1100px) {
  .site-header {
    min-height: 92px;
  }
}

@media (max-width: 932px) {
  .site-header {
    padding: 0 !important;
    position: relative;
  }

  .site-header .logo-container {
    width: 164px !important;
  }

  .site-header .logo-wrap {
    padding-left: 9px !important;
    padding-top: 5px !important;
    width: 164px !important;
  }

  .site-header .logo {
    max-width: 164px !important;
    padding: 0 !important;
  }

  .site-header .logo-image {
    margin: 0 !important;
    max-width: 164px !important;
    width: 164px !important;
  }

  .site-header .hamburger-click-area,
  .js-responsive-nav {
    display: none !important;
  }

  .site-header > .nav-container {
    display: block !important;
    float: right !important;
    width: calc(100% - 182px) !important;
  }

  .site-header > .nav-container nav {
    display: block !important;
    padding-right: 18px !important;
    padding-top: 24px !important;
    text-align: right !important;
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    min-height: 92px;
  }

  .site-header > .nav-container {
    clear: both !important;
    float: none !important;
    width: 100% !important;
  }

  .site-header > .nav-container nav {
    padding-right: 18px !important;
    padding-top: 9px !important;
  }
}

/* Global type family. Previous Space Grotesk version is backed up for reference. */
body,
.logo,
.logo a,
.logo-secondary,
.logo-secondary a,
nav a,
.page-header .title,
.page-header .description,
.project-cover .details,
.project-cover .title,
.project-cover .date,
.details .title,
.details .date,
.rich-text,
.module-text,
.module-caption,
.footer-text,
.back-to-top a {
  font-family: var(--archive-nav-font) !important;
}