.project-page {
  min-height: calc(100svh - var(--header-height) - 85px);
  padding-block: clamp(45px, 6.2vw, 92px) clamp(65px, 8vw, 120px);
}

.project-page-intro {
  display: grid;
  justify-items: start;
  gap: 18px;
  margin-block-end: clamp(32px, 5vw, 64px);
}

.project-page-intro h1 {
  max-width: 14ch;
  color: var(--ink);
  font: 650 clamp(3.5rem, 7vw, 7rem)/.92 var(--font-display);
  letter-spacing: -.078em;
  text-wrap: balance;
}

.project-page-intro h1 span { color: var(--gold); }
.project-page-intro p:not(.portfolio-kicker) {
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  line-height: 1.6;
}

.project-page-body .portfolio-footer { border-top: 1px solid var(--rule); }
.project-page-body .portfolio-nav a[aria-current="page"] { color: var(--gold); }

@media (max-width: 540px) {
  .project-page-intro { gap: 13px; }
  .project-page-intro h1 { font-size: clamp(3.05rem, 13vw, 5.4rem); }
  .project-page-body .portfolio-nav { gap: clamp(7px, 2vw, 14px); }
  .project-page-body .portfolio-nav a { font-size: .74rem; white-space: nowrap; }
  .project-page-body .portfolio-brand { gap: 6px; }
}

@media (max-width: 370px) {
  .project-page-body .portfolio-brand { font-size: .77rem; }
  .project-page-body .portfolio-monogram { width: 25px; height: 25px; }
}