@media (max-width: 820px) {
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 42px;
    height: 42px;
    position: relative;
  }

  .menu-toggle span { margin: 3px; }
  .menu-toggle::after {
    content: "☰";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #444;
    font-size: 24px;
    line-height: 1;
  }

  .menu-toggle span { visibility: hidden; }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(27px, 8vw, 32px);
    letter-spacing: .02em;
  }

  .hero p {
    font-size: 10px;
    letter-spacing: .17em;
  }
}