/* Final hierarchy and responsive navigation adjustments for the expanded page. */
.problem-layout h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.25rem, 4.25vw, 4rem);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.09;
}

@media (max-width: 820px) {
  .menu-toggle { display: block; z-index: 2; }
  .menu-toggle[aria-expanded=true] span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:nth-child(3) { opacity: 0; }
  .menu-toggle[aria-expanded=true] span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    padding: 35px 32px;
    transform: translateX(100%);
    background: #091827;
    transition: transform .25s;
  }

  .nav-links.open { transform: translateX(0); }
  .nav-links > a:not(.button) { font-size: 1.15rem; }
  .nav-links .button { margin-top: 9px; }
}

@media (max-width: 680px) {
  .problem-layout h2 { letter-spacing: -.03em; line-height: 1.11; }
}
