/* =========================
   NAVBAR
========================= */

.top-nav{
  width:100%;
  height:15vh;

  background:var(--cream);
  color:var(--black);

  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;

  align-items:start;

  padding:1.2rem 2rem;

  border-bottom:0.02rem solid rgba(0,0,0,.12);

  position:relative;
  z-index:200;
}

.nav-logo{
  color:var(--black);

  text-decoration:none;

  font-size:clamp(3rem, 7vw, 7rem);

  line-height:.7;

  font-weight:950;

  letter-spacing:-0.1em;
}

.nav-column{
  display:flex;
  flex-direction:column;

  gap:.35rem;
}

.nav-column a{
  color:var(--black);

  text-decoration:none;

  font-size:clamp(.7rem, .85vw, .9rem);

  font-weight:800;

  letter-spacing:.03em;

  line-height:1;

  width:fit-content;

  transition:.25s ease;
}

.nav-column a:hover{
  color:var(--primary-red);

  transform:translateX(.2rem);
}

/* MENU BUTTON */

.menu-toggle{
  display:none;

  background:none;
  border:none;

  color:var(--black);

  font-size:.85rem;
  font-weight:900;

  letter-spacing:.08em;

  cursor:pointer;
}

/* =========================
   FULLSCREEN MENU OVERLAY
========================= */

.menu-overlay{
  position:fixed;

  inset:0;

  width:100vw;
  height:100svh;

  background:#EDECEA;
  color:var(--black);

  z-index:999;

  padding:1rem;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  overflow:hidden;

  opacity:0;
  pointer-events:none;

  transform:translateY(-1rem);

  transition:
    opacity .45s ease,
    transform .45s ease;
}

.menu-overlay.is-open{
  opacity:1;
  pointer-events:auto;

  transform:translateY(0);
}

/* CLOSE */

.menu-close{
  position:absolute;

  top:1rem;
  right:1rem;

  background:rgba(255,255,255,.2);

  border:1px solid rgba(0,0,0,.08);

  padding:.9rem 1.15rem;

  color:var(--black);

  font-size:clamp(.85rem, 2.6vw, 1rem);
  font-weight:800;

  cursor:pointer;

  z-index:20;

  transition:.3s ease;
}

.menu-close:hover{
  color:var(--primary-orange);
}

/* BIG LINKS */

.menu-links{
  margin-top:5.8rem;

  display:flex;
  flex-direction:column;

  width:100%;

  overflow:hidden;
}

.menu-links a{
  position:relative;

  display:block;

  width:fit-content;
  max-width:calc(100vw - 3rem);

  color:var(--black);

  text-decoration:none;

  font-size:clamp(2.6rem, 11.5vw, 8rem);

  line-height:.92;

  font-weight:500;

  letter-spacing:-.065em;

  white-space:nowrap;

  transition:.35s ease;
}

.menu-links a span{
  position:absolute;

  top:.08em;
  right:-2.05rem;

  color:var(--primary-orange);

  font-size:clamp(.78rem, 2.6vw, 1.25rem);

  line-height:1;

  letter-spacing:-.04em;
}

.menu-links a:hover{
  color:var(--primary-red);

  transform:translateX(.25rem);
}

/* SOCIALS */

.menu-socials{
  width:100%;
  max-width:48rem;

  padding-bottom:.3rem;
}

.menu-socials p{
  color:var(--primary-orange);

  font-size:clamp(.9rem, 3vw, 1rem);
  font-weight:800;

  margin-bottom:.8rem;
}

.menu-socials div{
  display:flex;
  flex-wrap:wrap;

  gap:.8rem 1.4rem;
}

.menu-socials a{
  color:var(--black);

  text-decoration:none;

  font-size:clamp(1.1rem, 4.5vw, 1.8rem);

  font-weight:600;

  transition:.3s ease;
}

.menu-socials a:hover{
  color:var(--primary-orange);
}

/* =========================
   RESPONSIVE NAV
========================= */

@media(max-width:900px){

  .top-nav{
    height:auto;

    grid-template-columns:1fr auto;

    align-items:center;

    padding:1rem 1.2rem;
  }

  .desktop-nav{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .nav-logo{
    font-size:4rem;
  }
}

/* MOBILE MENU */

@media(max-width:650px){

  .menu-overlay{
    padding:1rem;
  }

  .menu-links{
    margin-top:6rem;
  }

  .menu-links a{
    font-size:clamp(2.55rem, 12vw, 5.4rem);

    line-height:.92;

    letter-spacing:-.06em;

    max-width:calc(100vw - 2.5rem);
  }

  .menu-links a span{
    right:-.8rem;

    font-size:.82rem;
  }
}

@media(max-width:430px){

  .menu-close{
    padding:.8rem 1rem;

    font-size:.9rem;
  }

  .menu-links{
    margin-top:5.6rem;
  }

  .menu-links a{
    font-size:clamp(2.35rem, 11vw, 4.3rem);

    line-height:.95;

    letter-spacing:-.045em;
  }

  .menu-links a span{
    right:-.65rem;

    font-size:.72rem;
  }

  .menu-socials p{
    margin-bottom:.65rem;
  }

  .menu-socials div{
    gap:.7rem 1.2rem;
  }

  .menu-socials a{
    font-size:1.1rem;
  }
}

@media(max-width:360px){

  .menu-links{
    margin-top:5.3rem;
  }

  .menu-links a{
    font-size:clamp(2rem, 10.5vw, 3.7rem);

    letter-spacing:-.035em;
  }

  .menu-links a span{
    right:-.5rem;

    font-size:.65rem;
  }

  .menu-socials a{
    font-size:1rem;
  }
}

/* =========================
   FOOTER TITLE
========================= */

.footer-title{
  width:100%;

  background:var(--cream);
  color:var(--black);

  text-align:center;

  padding:1.2rem 1rem;

  font-size:clamp(.65rem, .8vw, .9rem);

  line-height:1.05;

  font-weight:950;

  letter-spacing:-.03em;

  border-top:1px solid var(--black);
}

/* =========================
   INLINE CSS ARROW
========================= */

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.inline-arrow{
  width:.8rem;
  height:.8rem;

  position:relative;

  display:inline-block;

  flex-shrink:0;
}

.inline-arrow::before{
  content:"";

  position:absolute;

  width:.55rem;
  height:.55rem;

  top:.05rem;
  right:0;

  border-top:2px solid currentColor;
  border-right:2px solid currentColor;

  transform:rotate(45deg);
}

.inline-arrow::after{
  content:"";

  position:absolute;

  width:.75rem;
  height:2px;

  left:0;
  top:.42rem;

  background:currentColor;
}