@font-face {
  font-family: "PP Editorial Old";
  src: url("assets/pp-editorial-old-ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/pp-right-grotesk-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.case-page {
  font-family: "PP Right Grotesk", Arial, sans-serif;
  font-weight: 300;
}

.case-nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.2vw;
}

.case-nav .brand,
.case-nav .back-link,
.case-page .kicker,
.case-page .case-data,
.case-page .case-footer {
  font-family: "PP Right Grotesk", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .075em;
}

.case-nav .brand {
  color: inherit;
  font-family: "PP Editorial Old", Georgia, serif;
  font-size: clamp(11px, .7vw, 14px);
  font-weight: 200;
  letter-spacing: .015em;
  text-decoration: none;
  text-transform: uppercase;
}

.case-nav .back-link {
  color: inherit;
  font-size: clamp(9px, .62vw, 12px);
  letter-spacing: .075em;
}

.case-page .kicker {
  font-size: 11px;
  line-height: 1;
}

.case-page .case-hero h1,
.case-page .case-intro > p:last-child,
.case-page .next-project {
  font-family: "PP Editorial Old", Georgia, serif;
  font-weight: 200;
}

.case-page .case-intro > p:last-child {
  font-family: "PP Right Grotesk", Arial, sans-serif;
  font-size: clamp(21px, 2.85vw, 46px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.case-page .next-project span {
  font-family: "PP Right Grotesk", Arial, sans-serif;
}

@media (max-width: 700px) {
  .case-nav {
    height: 60px;
    padding: 0 22px;
  }

  .case-page .kicker {
    font-size: 9px;
  }

  .case-page .case-intro > p:last-child {
    font-size: 6.7vw;
  }
}