#menu
{
   background-color: var(--gray3);
   font-family: gillsans-semibold;
   font-size: .65em;
   padding: 2em 0;
   transition: right var(--duration) ease;
   right: calc(var(--menu-width) * -1);
   top: 0;
   width: var(--menu-width);
   height: calc(100% - 4em);
/* lift above 1000 slide sets max */
   z-index: 1000;
   --duration: 500ms;
   --menu-width: 24%;
}

#menu.active
{
   right: 0;
}

#menu-switch
{
   background-color: #000;
   transition: background-color 500ms ease;
   left: -3.5em;
   top: 0;
   width: 3.5em;
   height: 3.5em;
}

#menu-switch::after
{
   background-image: url("../pix/hamburger.svg");
   content: "";
   position: absolute;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
   width: 100%;
   height: 100%;
}

#menu.active > #menu-switch
{
   background-color: var(--gray3);
}

#lang-switch
{
   background-color: #000;
   color: #fff;
   cursor: default;
   letter-spacing: .1em;
   white-space: nowrap;
   left: 0;
   top: 0;
   width: 6em;
   height: 3.5em;
}

#lang-switch > div
{
/* pass clicks to parent to avoid script error */
   pointer-events: none;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
}

#menu > div:last-child
{
   overflow-y: auto;
   position: static;
   height: 100%;
}

#menu ul
{
   line-height: 2.5;
   margin: .125em 0;
   padding-left: 0;
   width: 100%;
}

#menu ul:first-of-type
{
   margin-top: 0;
}

#menu li
{
   color: #fff;
   cursor: default;
   letter-spacing: .15em;
   line-height: 2.425;
   list-style-type: none;
   margin: 0 1.4em;
   text-align: right;
   white-space: nowrap;
}

#menu li.black
{
   color: #000;
}

#menu li.current
{
   background-color: var(--gray4);
   margin: 0;
   padding: 0 1.4em;
}

/* 'colofon' */
#menu > :last-child > :last-child
{
   cursor: default;
   letter-spacing: .15em;
   padding: .5em 0 .5em 2.75em;
   text-transform: uppercase;
   left: 0;
   bottom: 2.75em;
/* req'd to get hilite bar to span memu width */
   width: 100%;
}

#menu > :last-child > :last-child.current
{
   background-color: var(--gray4);
}