.brand-mark {
  position: relative;
  width: 69px;
  height: 45px;
  border: 0;
  border-radius: 0;
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.brand-mark i {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  line-height: 1;
}

.brand-mark i:nth-child(1) { left: 0; top: 5px; z-index: 3; transform: rotate(-9deg); }
.brand-mark i:nth-child(2) { left: 18px; top: 14px; z-index: 3; transform: scaleX(.9) rotate(-4deg); }
.brand-mark i:nth-child(3) { left: 43px; top: -2px; z-index: 3; transform: rotate(8deg); }

.brand-mark::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 24px;
  width: 22px;
  border-bottom: 3px solid var(--clay);
  transform: rotate(38deg);
  transform-origin: left center;
  z-index: 1;
}

.brand-mark::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 38px;
  bottom: auto;
  width: 43px;
  border-bottom: 3px solid var(--clay);
  transform: rotate(-43deg);
  transform-origin: left center;
  z-index: 1;
}

.brand strong {
  font-size: 16px;
  letter-spacing: -.01em;
}
.language-switch { display: flex; align-items: center; gap: 5px; }
.language-switch button { padding: 3px; border: 0; background: transparent; color: inherit; font: 600 10px var(--sans); cursor: pointer; opacity: .45; }
.language-switch button.active { opacity: 1; color: var(--clay); }
.header-actions { display: flex; align-items: center; gap: 18px; }

@media (min-width: 901px) {
  .header-actions { order: 3; }
  .site-header nav { margin-left: auto; margin-right: 26px; }
}

@media (max-width: 420px) {
  .site-header .brand-mark { width: 62px; font-size: 25px; transform: scale(.9); transform-origin: left center; }
  .site-header .brand strong { font-size: 14px; }
  .site-header .brand small { font-size: 7px; }
}