.header {
  height: 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr);
  align-items: end;
}
.brand {
  top: 0;
  width: 250px;
  height: 100px;
  padding: 20px 25px 15px;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wordmark {
  width: 200px;
  height: 32px;
  background-size: 200px auto;
  filter: invert(1);
}
.brand-subtitle {
  width: 200px;
  border-color: #fff;
  font-size: 12px;
  letter-spacing: 3.5px;
  line-height: 15px;
  padding: 5px 0 4px;
}
.brand-subtitle svg { display: block; width: 100%; height: auto; fill: currentColor; }
.brand-subtitle text { font-family: Georgia, 'Times New Roman', serif; font-size: 10px; font-weight: bold; letter-spacing: normal; }
.announcement {
  top: 12px;
  left: 22px;
  right: calc(50% + 145px);
  text-align: left;
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 1px;
}
.nav-left, .nav-right {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  padding: 0 15px;
  height: 58px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-left { grid-column: 1; }
.nav-right { grid-column: 3; }
.shop-button { top: 9px; right: 25px; }
@media (max-width: 1199px) {
  .header {
    height: 158px;
    grid-template-columns: 1fr 1fr;
  }
  .nav-left, .nav-right { padding: 0 12px; }
  .nav-right { grid-column: 2; }
  .announcement { right: calc(50% + 145px); }
}
@media (max-width: 767px) {
  .header {
    height: auto;
    min-height: 212px;
    padding-top: 112px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .brand { width: 210px; height: 100px; padding: 16px 20px; }
  .wordmark { width: 170px; height: 27px; background-size: 170px auto; }
  .brand-subtitle { width: 170px; font-size: 11px; letter-spacing: 2.5px; }
  .announcement { display: none; }
  .shop-button { right: 8px; top: 39px; padding: 6px; font-size: 9px; }
  .nav-left, .nav-right {
    height: auto;
    min-height: 44px;
    padding: 10px 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .5px;
  }
}