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{
  height: calc(var(--lh) * 2);

  display: flex;
  justify-content: space-between;
  align-items: stretch;

  background: var(--clr-soft);
  border-top: var(--border);
  border-bottom: var(--border);
  border-color: var(--clr-header);
  box-sizing: border-box;
}

ul.nav-menu__pages{
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
}
div.nav-menu__footer{
  flex: 1 1 0;
  display: flex;
  align-items: stretch;

  /* square */
  max-width: calc(var(--lh) * 2);
}

/* ----- MAIN NAV ----- */

ul.nav-menu__pages li{
  flex: 1 0 0%;
  box-sizing: border-box;
  max-width: 16rem;
  position: relative;
  border-right: var(--border);
  border-color: var(--clr-header);
  overflow: hidden;
}
ul.nav-menu__pages 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;

  padding: 0 0.5em;
}
ul.nav-menu__pages a span{
  padding-top: 0.2em;
}
ul.nav-menu__pages a span{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* variations */

ul.nav-menu__pages a:hover,
ul.nav-menu__pages 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;
  margin-right: calc(-1 * var(--border-width));
}


/* ----- FOOTER LINK ----- */

.open-footer{
  /* border */
  border-left: var(--border);
  border-color: var(--clr-header);

  /* square size */
  flex: 1 0 0;
}