/* A compact, approachable wordmark. The city initial and accent are reusable. */
.brand:has(.brand-wordmark) { min-width:0; max-width:185px; gap:0; }
.brand-wordmark { display:inline-flex; align-items:center; gap:9px; max-width:185px; padding:0; color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1; }
.brand-wordmark-mark { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; color:var(--city-accent,#2360D6); }
.brand-wordmark-mark svg { width:36px; height:36px; display:block; }
.brand-initial { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--city-soft); font-size:24px; font-weight:650; }
.brand-wordmark-name { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.brand-wordmark-city { font-size:var(--brand-city-size,23px); font-weight:650; letter-spacing:-.055em; line-height:1.06; white-space:nowrap; }
.brand-wordmark-topic { color:#657184; font-size:10.5px; font-weight:500; font-style:normal; letter-spacing:.115em; line-height:1.1; }
.brand-wordmark-stop { color:var(--city-accent); font-weight:800; }
@media(max-width:780px) {
 .brand-wordmark { gap:8px; }
 .brand-wordmark-mark,.brand-wordmark-mark svg,.brand-initial { width:32px; height:32px; flex-basis:32px; }
 .brand-wordmark-city { font-size:calc(var(--brand-city-size,23px) * .91); }
 .brand-wordmark-topic { font-size:9.5px; }
}