.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 7.5px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #e8e0da;
  box-shadow: none;
}

@media (min-width: 768px) {
  .site-header {
    padding: 10px calc((100vw - min(92vw, 760px)) / 2);
  }
}

.site-brand {
  margin: 0;
  padding: 0;
  align-self: center;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}

.site-logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}

.site-logo img {
  display: block;
  width: auto;
  max-width: min(84vw, 300px);
  height: auto;
  max-height: 50px;
  transition: opacity 0.15s ease;
}

.site-logo:hover img,
.site-logo:focus img {
  opacity: 0.78;
}

.site-tagline {
  margin: 0;
  padding: 12.5px 12px 12.5px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #8c6a51;
  text-align: center;
}

@media (min-width: 768px) {
  .site-logo img {
    max-width: min(92vw, 400px);
    max-height: 75px;
  }

  .site-tagline {
    padding: 15px 12px 15px;
    font-size: 18.5px;
  }
}