/* =============================================================================
   brand.css — the leafle brand header (logo mark + name + tagline) used at the top
   of the public gift and portrait pages. Both built the same .brand/.brand-mark/
   .brand-name/.brand-tag markup with hand-synced, near-identical CSS; this is the one
   source. (The in-app header is a structurally different component — .brand-text in
   shelf.css — and is intentionally not folded in here.)
   ============================================================================= */
.brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  text-decoration: none; color: inherit; width: fit-content;
}
.brand-mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
  background: var(--accent);
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-name {
  font-family: var(--font-ui); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1;
}
.brand-tag { font-family: var(--font-ui); font-size: .77rem; color: var(--muted); margin-top: 1px; }