/* nav.css — top navigation and mobile menu */

nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200; height: 56px; transition: background .4s;
}
nav.scrolled {
  background: rgba(6,6,8,.9);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--snow08);
}
.nav-i {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
@media (min-width: 768px) { .nav-i { padding: 0 48px; } }

.nav-logo {
  font-family: var(--heading); font-size: 15px; font-weight: 600;
  background: none; border: none; cursor: pointer;
  transition: opacity .3s; letter-spacing: -.3px;
}
.nav-logo:hover { opacity: .7; }
.nav-logo .n-bin  { color: var(--pink); }
.nav-logo .n-youn { color: var(--cyan); }

.nav-lks { display: none; align-items: center; gap: 0; }
@media (min-width: 768px) { .nav-lks { display: flex; } }

.nav-lk {
  padding: 8px 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--snow30); background: none; border: none;
  cursor: pointer; transition: color .3s;
}
.nav-lk:hover { color: var(--pink); }

.nav-ex {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-decoration: none; letter-spacing: .06em;
  color: var(--snow30);
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--snow08);
  transition: color .3s;
}
.nav-ex:hover { color: var(--pink); }

.nav-clock {
  font-family: var(--mono); font-size: 9px;
  color: #444; letter-spacing: 1px; margin-left: 20px;
}

/* Hamburger */
.ham {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
@media (min-width: 768px) { .ham { display: none; } }
.ham span { display: block; width: 20px; height: 1.5px; background: var(--snow50); transition: all .3s; border-radius: 1px; }
.ham.open span:first-child { transform: rotate(45deg) translate(2px,2px); }
.ham.open span:last-child  { transform: rotate(-45deg) translate(2px,-2px); }

/* Mobile menu */
.mob {
  display: none; position: fixed; top: 56px; left: 0; right: 0;
  background: rgba(6,6,8,.96); backdrop-filter: blur(20px);
  padding: 8px 28px 28px; z-index: 199;
}
.mob.open { display: block; }
.mob-lk {
  display: block; width: 100%; text-align: left; padding: 16px 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--snow30); border: none; border-bottom: 1px solid var(--snow08);
  cursor: pointer; background: none; transition: color .3s;
}
.mob-lk:hover { color: var(--pink); }