/* ---------- Demo website badge ---------- */

.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

.demo-badge {
  display: inline-block;
  padding: .15rem .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bronze);
  white-space: nowrap;
  margin-left: calc(44px + .85rem); /* align under wordmark, not under logo image */
}

/* On dark header (before scroll) */
.site-header.on-dark:not(.scrolled) .demo-badge {
  color: rgba(201, 187, 168, .75);
  border-color: rgba(201, 187, 168, .45);
}

/* Mobile: hide badge on smaller screens */
@media (max-width: 860px) {
  .demo-badge {
    display: none;
  }
}