/* A band's name, a button to its few words (band-info.js): just the name, as it was, nothing on the
   heading to say so. Touched, it dims a little as it's pressed, so it's plain it took the tap; with a
   mouse, a pointer and the faintest lilac in its ink (no underline); the ring for the keyboard only.
   Its words open, it keeps a little of the tint. Rated Highly's in its laurels stays gold. */
.band-name {
  display: inline-flex; align-items: center; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.band-name > span { transition: opacity .12s, color .2s; }
.band-name:active > span { opacity: 0.55; transition: none; }
.band-name:focus:not(:focus-visible) { outline: none; }
.band-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .band-name:hover > span { color: color-mix(in srgb, var(--ink) 80%, var(--accent)); } }
.band-name[aria-expanded="true"] > span { color: color-mix(in srgb, var(--ink) 75%, var(--accent)); }
.laurelled > .band-name > span, .laurelled > .band-name[aria-expanded="true"] > span { color: #f3e6c4; } /* (as cards.css's .laurelled > span) */
@media (hover: hover) and (pointer: fine) { .laurelled > .band-name:hover > span { color: color-mix(in srgb, #f3e6c4 85%, #fff); } }
/* (the Gala's name, on a phone, in the middle of its 34px line, as gala-logos.css has it unwrapped) */
html.page-scroll .grid-view .gala-head > .band-name { min-height: 34px; }

/* its words: Top Rated's ⓘ card (cards.css's .tier-pop, .tier-sheet), with a line over the name */
.band-about .band-about-kicker { margin: 0 0 4px; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.band-about h4 { margin: 0 0 8px; }
.band-about .band-about-text { margin: 0; color: var(--ink); line-height: 1.5; text-wrap: pretty; }
.band-about-sheet .tier-pop.band-about { padding-bottom: 30px; }
.band-about-sheet .band-about-text { font-size: 0.98rem; }
.band-about-pop { width: min(340px, calc(100vw - 24px)); background: rgb(22 20 30); box-shadow: var(--pick-glass-edge); }
.band-about-pop .band-about-text { font-size: 0.86rem; color: var(--ink-soft); }