/* ── RESET & BASE ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  background: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── NAV ────────────────────────────────────────────────────── */
/* Height = 10vh so top: 50% inside = 5vh from viewport top,
   matching the spec's top: 5% on every element             */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
  background: #fff;
  z-index: 100;
}

.nav-logo {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.nav-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
}

.nav-about   { left: 76%; }
.nav-project { left: 84%; }
.nav-contact { left: 92%; }

.nav-logo:hover,
.nav-link:hover {
  opacity: 0.5;
}

/* ── MOBILE ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  nav {
    height: 8vh;
  }
  .nav-logo {
    font-size: 18px;
    left: 4%;
  }
  .nav-link {
    font-size: 11px;
  }
  .nav-about   { left: 58%; }
  .nav-project { left: 73%; }
  .nav-contact { left: 87%; }
}