.portfolio-page {
  min-height: 100%;
  overflow-x: hidden;
  background: #080906;
}

.portfolio-page .main-nav a[aria-current="page"] {
  color: var(--white);
}

.portfolio-page .main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.portfolio-page .portfolio-heading {
  display: grid;
  width: min(48vw, 680px);
  max-width: none;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
}

.portfolio-page .portfolio-heading .kicker {
  grid-column: 1;
}

.portfolio-page .portfolio-heading h1 {
  grid-column: 1;
  margin: 2px 0 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.75rem);
  font-weight: 500;
  line-height: 0.96;
}

.portfolio-page-tagline {
  max-width: 56ch;
  margin: 7px 0 0;
  color: rgba(247, 243, 233, 0.58);
  font-size: clamp(0.74rem, 0.92vw, 0.9rem);
  line-height: 1.55;
  text-wrap: balance;
}

.portfolio-page-tagline strong {
  color: rgba(247, 243, 233, 0.9);
  font-weight: 600;
}

.portfolio-page-return {
  position: absolute;
  right: var(--page-pad);
  top: calc(var(--header-height) + 24px);
  z-index: 10;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: rgba(247, 243, 233, 0.58);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.portfolio-page-return:hover,
.portfolio-page-return:focus-visible {
  color: #d8b774;
  outline: none;
}

@media (max-width: 900px) {
  .portfolio-page .portfolio-heading {
    right: 64px;
    width: auto;
  }

  .portfolio-page .portfolio-heading h1 {
    font-size: clamp(1.85rem, 6vw, 3rem);
  }

  .portfolio-page-tagline {
    max-width: 48ch;
    font-size: 0.72rem;
  }

  .portfolio-page-return {
    right: var(--page-pad);
    top: calc(var(--header-height) + 8px);
  }
}

@media (max-width: 640px) {
  .portfolio-page-return span {
    display: none;
  }

  .portfolio-page .portfolio-heading {
    top: calc(var(--header-height) + 15px);
    right: 46px;
    left: var(--page-pad);
    gap: 5px;
  }

  .portfolio-page .portfolio-heading .kicker {
    font-size: 0.5rem;
  }

  .portfolio-page .portfolio-heading h1 {
    display: block;
    font-size: clamp(1.7rem, 8.5vw, 2.25rem);
  }

  .portfolio-page-tagline {
    max-width: 42ch;
    margin-top: 4px;
    font-size: 0.65rem;
    line-height: 1.42;
  }

  .portfolio-page-return {
    top: calc(var(--header-height) + 8px);
    font-size: 1rem;
  }
}