/**
 * Header brand — heart crop from banner asset + LoveMatch.Love wordmark (Great Vibes gradient).
 */

.topbar {
  overflow: visible;
}

.topbar .brand {
  overflow: visible;
  align-items: center;
  min-width: min(220px, 42vw);
  gap: 10px;
  text-decoration: none;
  color: #eb5b89;
}

.topbar button.brand {
  font: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.topbar button.brand:focus-visible {
  outline: 2px solid rgba(213, 83, 124, 0.65);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Wide banner: show left cluster (heart only), hide baked-in image text */
.topbar .brand .brand-mark {
  flex-shrink: 0;
  height: clamp(46px, 10.5vw, 58px);
  width: clamp(52px, 13vw, 68px);
  object-fit: cover;
  object-position: 4% 20%;
  border-radius: 12px;
  display: block;
}

.topbar .brand .brand-name {
  font-family: "Great Vibes", "Brush Script MT", "Segoe Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 3.8vw, 30px);
  letter-spacing: 0.05em;
  line-height: 1.28;
  padding: 6px 0 8px;
  display: inline-block;

  background-image: linear-gradient(
    92deg,
    #ad1457 0%,
    #e91e8c 34%,
    #ff7043 72%,
    #ffb74d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 480px) {
  .topbar .brand {
    flex: 1;
    min-width: 0;
  }

  .topbar .brand .brand-name {
    letter-spacing: 0.04em;
  }
}