@media (max-width: 767px) {
  .nav-mobile-overlay {
    height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 24px
      calc(env(safe-area-inset-bottom, 0px) + 20px);
    justify-content: center;
    gap: clamp(10px, 1.65dvh, 15px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-mobile-overlay a {
    flex: 0 0 auto;
    font-size: clamp(22px, 6.5vw, 26px);
    line-height: 1.05;
    letter-spacing: 1.5px;
  }

  .nav-mobile-overlay .close-btn {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 25px;
    line-height: 1;
  }

  .nav-mobile-overlay .btn-primary {
    margin-top: 4px !important;
    padding: 11px 26px;
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 2.5px;
  }
}

@media (max-width: 767px) and (max-height: 640px) {
  .nav-mobile-overlay {
    justify-content: flex-start;
    gap: 9px;
  }

  .nav-mobile-overlay a {
    font-size: 21px;
  }
}

/* Desktop nav: keep all links on one line between 1024px and 1399px */
@media (min-width: 1024px) and (max-width: 1399px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 10px; letter-spacing: 1.5px; }
  .nav-book { padding: 10px 16px; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .nav-links { gap: 12px; }
  .nav-links a { letter-spacing: 1px; }
  .nav-logo a { font-size: 18px; letter-spacing: 3px; }
}