@font-face {
  font-family: Erode;
  src: url("assets/fonts/erode-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: "Erode",Georgia,serif;
}

.screen-copy h1, .screen-copy h1 em, .spine-title, .design-word, .code-word, .spine-title .design-amp, .about-margin-heading, .tape-bottom .handwritten, header .wordmark .brand-name {
  font-family: var(--primary);
  font-style: normal;
  font-weight: 600;
}

header .track-nav a, header .track-nav .works-slot, header .track-nav .works-slot > a {
  font-family: var(--primary);
  font-weight: 600;
}

header .wordmark .brand-name, header .signature {
  font-family: var(--primary);
  letter-spacing: 0;
  white-space: nowrap;
  font-size: clamp(25px, 2.2vw, 31px);
  font-style: normal;
  font-weight: 600;
}

.project-info h1, .placeholder-page h1, .face .panel-label .falling-wordmark {
  font-family: var(--primary);
  font-weight: 600;
}

.tape-bottom .handwritten {
  font-family: Playfair Display, Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

header .track-nav a, header .track-nav .works-slot, header .track-nav .works-slot > a {
  font-family: var(--primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

header .track-nav .works-slot > a {
  padding-right: 26px;
}

header .track-nav .works-toggle {
  left: auto;
  right: 5px;
}

header .track-nav .works-compact-menu a {
  font-family: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

@media (width <= 700px) {
  header .track-nav a, header .track-nav .works-slot, header .track-nav .works-slot > a {
    font-size: 15px;
  }

  header .track-nav .works-toggle {
    left: auto;
    right: 4px;
  }
}

@media (width <= 760px) {
  /* Equal tracks include the Works wrapper as well as the three direct links. */
  header .track-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  header .track-nav > a, header .track-nav .works-slot > a {
    min-width: 0;
    width: 100%;
    column-gap: 0;
  }

  header .track-nav > a, header .track-nav .works-slot, header .track-nav .works-slot > a {
    font-size: clamp(16px, 4vw, 20px);
    line-height: 22px;
  }

  header .track-nav .works-slot > a {
    padding-right: 22px;
  }

  header .track-nav .works-toggle {
    width: 16px;
    height: 22px;
    bottom: 7px;
    left: auto;
    right: 3px;
  }

  header .track-nav .works-toggle svg {
    width: 16px;
    height: 16px;
  }
}

@media (width <= 360px) {
  header .track-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
  }

  header .track-nav > a, header .track-nav .works-slot, header .track-nav .works-slot > a {
    box-sizing: border-box;
    width: 100%;
  }

  header .track-nav > a, header .track-nav .works-slot > a {
    padding-left: 5px;
    padding-right: 5px;
  }

  header .track-nav .works-slot > a {
    padding-right: 18px;
  }

  header .track-nav .works-toggle {
    width: 14px;
    right: 1px;
  }

  header .track-nav .works-toggle svg {
    width: 14px;
    height: 14px;
  }
}

@media (width <= 1100px) and (height <= 500px) and (orientation: landscape) {
  header .track-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  header .track-nav > a, header .track-nav .works-slot > a {
    min-width: 0;
    width: 100%;
    column-gap: 0;
  }
}