/* Haunted Dreams mobile header overlap fix */
@media (max-width: 720px) {
  /* Keep the mobile header in normal document flow so its variable
     two-column height can never cover the hero copy. */
  .site-header {
    position: relative;
    z-index: 20;
    background: #050607;
  }

  .nav {
    min-height: 0;
    height: auto;
    padding: 24px 0 20px;
    align-items: flex-start;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-links {
    flex: 0 0 auto;
    gap: 0.7rem;
  }

  /* Desktop hero padding accounted for an overlaid header. The mobile
     header now sits above the hero, so use normal section spacing. */
  .hero {
    min-height: 0;
    padding-top: 54px;
    padding-bottom: 64px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .eyebrow {
    margin-top: 0;
  }
}

@media (max-width: 430px) {
  .nav {
    gap: 1rem;
  }

  .brand {
    font-size: 1.08rem;
    letter-spacing: 0.2rem;
  }

  .brand small {
    font-size: 0.6rem;
    letter-spacing: 0.12rem;
  }

  .nav-links {
    font-size: 0.75rem;
  }
}