:root {
  --project-header-height: 4.5rem;
}

body[data-page="project"] {
  min-height: 100svh;
}

.project-masthead {
  min-height: var(--project-header-height);
}

.project-wordmark {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.project-name-shell {
  min-height: 100svh;
  padding:
    calc(var(--project-header-height) + clamp(1.5rem, 3vw, 3rem))
    var(--page-gutter, var(--page-padding, clamp(1.25rem, 2.2vw, 2rem)))
    calc(var(--navigation-height, 4rem) + clamp(1.5rem, 3vw, 3rem));
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid var(--rule, rgba(23, 26, 25, 0.32));
  border-left: 1px solid var(--rule, rgba(23, 26, 25, 0.32));
}

.project-name-shell .folio-label {
  align-self: start;
}

.project-name-shell h1 {
  width: min(100%, 14ch);
  margin: 0;
  align-self: center;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(3rem, 9.6vw, 10rem);
  font-variation-settings: "wdth" 94, "wght" 590;
  font-weight: 590;
  letter-spacing: -0.065em;
  line-height: 0.88;
  text-wrap: balance;
}

.project-navigation a[aria-current="page"] {
  color: var(--navy, #214f87);
}

@media (max-width: 767px) {
  :root {
    --project-header-height: 4rem;
  }

  .project-masthead > :nth-child(3) {
    display: none;
  }

  .project-name-shell {
    border-inline: 0;
  }

  .project-name-shell h1 {
    width: 100%;
    font-size: clamp(3.25rem, 15vw, 6rem);
    letter-spacing: -0.06em;
  }
}

@media (forced-colors: active) {
  .project-name-shell {
    border-color: CanvasText;
  }
}

/* Atmospheric name-record shell */

.project-name-shell {
  min-height: 126svh;
  padding:
    calc(var(--project-header-height) + 12svh)
    var(--space-page, clamp(1.25rem, 4.1vw, 5rem))
    calc(var(--navigation-height, 4rem) + 22svh);
  grid-template-rows: auto 1fr;
  border: 0;
  background: transparent;
}

.project-name-shell h1 {
  width: min(100%, 16ch);
  margin: 0 0 0 clamp(0rem, 18vw, 18rem);
  align-self: center;
  font-size: clamp(2.05rem, 3.25vw, 3.2rem);
  font-variation-settings: "wdth" 96, "wght" 400;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-shadow:
    0.012em 0 0.045em rgba(54, 59, 54, 0.28),
    -0.012em 0.014em 0.075em rgba(69, 73, 68, 0.18);
  transform: scaleX(0.992) skewX(-0.08deg);
  transform-origin: left center;
}

.project-navigation a[aria-current="page"] {
  color: var(--graphite, #5a5f59);
}

@media (max-width: 767px) {
  .project-name-shell {
    min-height: 132svh;
    padding:
      calc(var(--project-header-height) + 14svh)
      var(--space-page, 1.25rem)
      calc(var(--navigation-height, 4rem) + 24svh);
  }

  .project-name-shell h1 {
    width: 100%;
    margin-left: 0;
    font-size: clamp(1.95rem, 9vw, 2.5rem);
    letter-spacing: -0.055em;
  }
}

@media (forced-colors: active) {
  .project-name-shell {
    border: 0;
  }
}