/* header.css – cleaned up */
.mobilemain-nav {
  display: none;
}

.mobilemain-nav a {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  position: relative;
  padding: 4px 0px;
  transition: color 0.25s var(--ease-soft);
}

.mobilemain-nav a:hover,
.mobilemain-nav a:focus-visible {
  color: var(--bone);
}

.mobilemain-nav a::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -2px;
  width: 0px;
  height: 1px;
  background: var(--thread);
  transition: width 0.3s var(--ease-out);
}

.mobilemain-nav a:hover::after,
.mobilemain-nav a:focus-visible::after {
  width: 100%;
}

/* Desktop nav – normal */
.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  position: relative;
  padding: 4px 0px;
  transition: color 0.25s var(--ease-soft);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--bone);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -2px;
  width: 0px;
  height: 1px;
  background: var(--thread);
  transition: width 0.3s var(--ease-out);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile styles – hide desktop nav, show mobile overlay */
@media (max-width: 720px) {
  .main-nav {
    display: none !important;   /* desktop nav hidden on mobile */
  }

  .mobilemain-nav {
    position: fixed;
    inset: 0px;
    width: 100%;
    height: 100%;
    background: rgba(10, 9, 8, 0.98);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
    z-index: 550;
    pointer-events: none;       /* prevent interaction when hidden */
  }

  .mobilemain-nav.is-open {
    transform: translateY(0px);
    opacity: 1;
    pointer-events: auto;
  }

  .mobilemain-nav a {
    font-family: var(--f-display);
    font-size: 26px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--bone);
    padding: 6px 0px;
  }
}

.showthis {
  border-radius: 0;
  border: 0;
  width: 100vw;
  top: 0 !important;
  background: rgba(10, 9, 8, 0.98) !important;
}