/* Top navigation tags, brand and language toggle. */
.nav-tag {
  position: absolute;
  top: calc(7 * var(--n));
  display: inline-flex;
  align-items: center;
  height: calc(37 * var(--n));
  padding: 0 calc(18 * var(--n));
  background: #fff;
  color: var(--ink);
  font-size: calc(16.5 * var(--n));
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 calc(3 * var(--n)) 0 rgba(0, 0, 0, .18), 0 calc(6 * var(--n)) calc(14 * var(--n)) rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.nav-tag:hover {
  transform: translateY(calc(-2 * var(--n))) rotate(-1.5deg);
  box-shadow: 0 calc(5 * var(--n)) 0 rgba(0, 0, 0, .22), 0 calc(10 * var(--n)) calc(18 * var(--n)) rgba(0, 0, 0, .2);
}

.nav-tag:active {
  transform: translateY(var(--n));
  box-shadow: 0 var(--n) 0 rgba(0, 0, 0, .18), 0 calc(6 * var(--n)) calc(14 * var(--n)) rgba(0, 0, 0, .18);
}

.nav-tag--studio { left: calc(30 * var(--n)); }
.nav-tag--portfolio { left: calc(233 * var(--n)); }
.nav-tag--contacts { right: calc(160 * var(--n)); }
.nav-tag--resume { right: calc(32 * var(--n)); }

.brand {
  position: absolute;
  left: 50%;
  top: calc(14 * var(--n));
  font-size: calc(19 * var(--n));
  font-weight: 600;
  letter-spacing: .14em;
  opacity: 0;
  pointer-events: none !important;
  transform: translateX(-50%);
  transition: opacity .4s;
}

.is-showcase .brand {
  opacity: 1;
  pointer-events: auto !important;
}

.lang-toggle {
  position: absolute;
  left: calc(30 * var(--n));
  bottom: calc(22 * var(--n));
  display: flex;
  background: #fff;
  box-shadow: 0 calc(3 * var(--n)) 0 rgba(0, 0, 0, .18), 0 calc(6 * var(--n)) calc(14 * var(--n)) rgba(0, 0, 0, .18);
}

.lang-toggle button {
  height: calc(32 * var(--n));
  padding: 0 calc(12 * var(--n));
  font-size: calc(14 * var(--n));
  font-weight: 650;
  letter-spacing: .04em;
  color: rgba(13, 15, 14, .55);
  transition: background-color .2s, color .2s;
}

.lang-toggle button[aria-pressed='true'] {
  background: var(--blue-800);
  color: #fff;
}

.lang-toggle button:hover:not([aria-pressed='true']) {
  color: var(--ink);
}