/* Brand "Echa una mano": the enamel street plaque (palm + name) and the plaque-pin mark (docs/brand.md).
   White and paper text on the accent: 5.4:1 and 4.9:1 (AA for any size). */
:root { --bhm-accent: #B9432A; --bhm-accent-ink: #F6F4EF; }

.brand-plaque { display: inline-flex; flex-shrink: 0; box-sizing: border-box; padding: 4px; border-radius: 9px; background: var(--bhm-accent);
  color: var(--bhm-accent-ink); text-decoration: none; box-shadow: 0 1.5px 0 rgba(28,27,24,0.18); }
.brand-plaque__frame { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: 1.5px solid var(--bhm-accent-ink); border-radius: 6px; }
.brand-plaque__palm { display: block; width: 20px; height: 22px; flex-shrink: 0; }
.brand-plaque__name { font: 400 22px/1 var(--bhm-plaque); white-space: nowrap; letter-spacing: 0; }
.brand-plaque:focus-visible { outline: 2px solid var(--bhm-ink); outline-offset: 2px; }
.screen .brand-plaque, .screen a.brand-plaque { color: var(--bhm-accent-ink); }

.brand-city { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bhm-ink-3); white-space: nowrap; }
.brand-mark { display: block; flex-shrink: 0; }
/* Phone: the mark and the name instead of the plaque. */
.brand-compact { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--bhm-ink); }
.brand-compact__name { font: 400 23px/1 var(--bhm-plaque); white-space: nowrap; }