:root {
  --ink: #17302a;
  --muted: #70766e;
  --cream: #f3ecdc;
  --paper: #fbf8f0;
  --line: #ddd2bc;
  --green: #17302a;
  --green-dark: #10251f;
  --gold: #ad864b;
}

.site-header {
  background: rgba(243, 236, 220, .97);
  border-bottom-color: rgba(23, 48, 42, .12);
}

.brand {
  gap: 12px;
  letter-spacing: normal;
}

.brand-symbol {
  display: block;
  width: 58px;
  height: 58px;
  flex: none;
  object-fit: contain;
}

.brand-type {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand strong {
  color: var(--ink);
  font: 500 14px/1 var(--serif);
  letter-spacing: .26em;
}

.brand-subtitle {
  color: var(--gold);
  font: 500 8px/1 var(--sans);
  letter-spacing: .42em;
}

.brand small {
  color: #756449;
  font: italic 9px/1.1 var(--serif);
  letter-spacing: .01em;
}

.brand-footer .brand-symbol {
  width: 45px;
  height: 45px;
}

.brand-footer strong {
  font-size: 12px;
}

.brand-footer .brand-subtitle {
  font-size: 7px;
}

.brand-footer small {
  font-size: 8px;
}

@media (max-width: 640px) {
  .site-header {
    height: 76px;
  }

  .brand-symbol {
    width: 46px;
    height: 46px;
  }

  .brand strong {
    font-size: 12px;
  }

  .brand-subtitle {
    font-size: 7px;
  }

  .brand small {
    font-size: 8px;
  }
}