.nav-toggle {
  display: none;
  position: relative;
  z-index: 101;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--muted);
}

/* Shared display scale: page titles remain prominent without dominating the page. */
.page-title {
  font-size: clamp(2rem, 4.6vw, 3rem) !important;
}

body > .hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.4rem) !important;
}

.project h2 {
  font-size: clamp(2rem, 4.2vw, 3rem) !important;
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  .nav-links.open {
    display: flex !important;
    position: fixed;
    inset: 0;
    /* The menu must be a complete visual layer on phones: no page content
       should remain visible through it. */
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    background: #080806;
  }

  .nav-links.open a {
    font-size: .82rem;
    letter-spacing: .18em;
  }
}