@font-face {
  font-family: "Melofon Jura";
  src: url("./fonts/Jura-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Melofon Unbounded";
  src: url("./fonts/Unbounded-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

.site-header .melofon-brand {
  gap: 12px;
  letter-spacing: normal;
  flex-shrink: 0;
}

.melofon-brand .melofon-icon {
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
}

.melofon-brand .melofon-lockup {
  display: block;
}

.melofon-brand .melofon-wordmark {
  display: block;
  color: #edf8f4;
  font-family: "Melofon Jura", sans-serif;
  font-size: 34px;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: .015em;
  white-space: nowrap;
}

.melofon-brand .melofon-phi {
  font-family: "Melofon Unbounded", sans-serif;
  font-size: .8em;
  font-weight: 400;
}

.site-header .melofon-brand small {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1.5px;
}

@media (max-width: 600px) {
  .site-header .melofon-brand { gap: 10px; }
  .melofon-brand .melofon-icon { width: 44px; height: 44px; border-radius: 12px; }
  .melofon-brand .melofon-wordmark { font-size: 30px; }
  .site-header .melofon-brand small { font-size: 6px; letter-spacing: 1.15px; }
}