body > header{
  --header-h: calc(var(--lh) * 3);
}
header > .top-header{
  background: var(--clr-header);

  height: calc(var(--lh) * 1);
  display: flex;
  justify-content: space-between;
}
header > .top-header > h1{
  color: white;
  margin-left: calc(var(--lh) * 0.5);
  line-height: var(--lh);
  text-transform: uppercase;
}
header > .top-header > h1 > a{
  text-decoration: none;
}

/* LANG
 ========================================================================== */
nav.lang-menu ul{

  display: flex;
  gap: calc(var(--lh) * 0.5);
  justify-content: flex-end;
  padding-right: calc(var(--lh) * 0.5);

  line-height: var(--lh);

  /* theme 2 */
  /* background: var(--clr-soft);
  color: var(--clr-text); */
}
nav.lang-menu a{
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
nav.lang-menu li.active a{
  color: white;
}

/* order */
nav.lang-menu #lang__en{
  order: 1;
}
nav.lang-menu #lang__fr{
  order: 2;
}
nav.lang-menu #lang__nl{
  order: 3;
}
nav.lang-menu #lang__es{
  order: 4;
}

/* NAVIGATION
 ========================================================================== */
nav.nav-menu ul{
  height: calc(var(--lh) * 2);

  display: flex;
  align-items: stretch;
  border-top: var(--border);
  border-bottom: var(--border);
  border-color: var(--clr-header);
  box-sizing: border-box;

  /* theme 1 */
  background: var(--clr-soft);

  /* theme 2 */
  /* border-top: var(--border);
  background: var(--clr-text);
  border-color: var(--clr-soft);
  color: var(--clr-soft); */
}
nav.nav-menu li{
  flex: 1 0 0%;
  box-sizing: border-box;
  max-width: 16rem;
  position: relative;
  border-right: var(--border);
  border-color: var(--clr-header);

  /* theme 1 */
  /* background: var(--clr-back); */

  /* theme 2 */
  /* border-color: var(--clr-soft); */
}
nav.nav-menu li:first-child{
  /* border-left: var(--border); */

  /* theme 2 */
  /* border-color: var(--clr-soft); */
}

nav.nav-menu a{
  color: currentColor;
  display: block;
  height: 100%;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  text-transform: uppercase;
  text-decoration: none;
  transition: 300ms font-variation-settings;
  font-variation-settings: "SERI" 0, "slnt" 0;
}
nav.nav-menu a span{
  padding-top: 0.2em;
}
nav.nav-menu a:hover,
nav.nav-menu li.active a{
  font-variation-settings: "SERI" 100, "slnt" 0;
}

nav.nav-menu li.active{
  background: white;
}
.night nav.nav-menu li.active{
  background: white;
  color: var(--clr-back);
}

/* order */
nav.nav-menu #nav__index{
  order: 1;
}
nav.nav-menu #nav__projects{
  order: 2;
}
nav.nav-menu #nav__gallery{
  order: 3;
}

/* breaking point */
/* 16em * 3 * 1.25*/
@media only screen and (max-width: 60em) {
  nav.nav-menu li#nav__gallery{
    border-right: none;
  }
}