/* Navigation: keeps original typography and hover effects.
   Flexible layout prevents four menu entries from overflowing on narrow screens. */
@media screen and (max-width: 850px) {
  .main-header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .main-header nav li {
    float: none;
    display: block;
  }
}
@media screen and (max-width: 520px) {
  .main-header nav a {
    font-size: clamp(13px, 3.8vw, 18px);
    padding: 10px clamp(6px, 1.8vw, 10px);
    white-space: nowrap;
  }
}