/* Artists, concerts and tours in the festival pages' neutral Immersive style (owner-approved
   direction, Nov 3, canvas boards W-Y). Loaded after app CSS on artists.*, concerts.*,
   events.index and tours.show (see partials/head and components/layouts/public).
   Violet/pink accents become ink and chips; other status tones keep their meaning. */

html body {
    --mu-ground: #f6f6f4;
    --mu-ink: #111113;
    --mu-body: #3f3f3a;
    --mu-muted: #5f5d57;
    --mu-card: #ffffff;
    --mu-line: #e4e4e0;
    --mu-chip: #f1f1ee;
    --mu-avatar: #3f3f46;
}
html.dark body {
    --mu-ground: #0c0c0d;
    --mu-ink: #f4f4f2;
    --mu-body: #d4d0c8;
    --mu-muted: #a8a59e;
    --mu-card: #18181a;
    --mu-line: rgb(255 255 255 / 10%);
    --mu-chip: rgb(255 255 255 / 7%);
    --mu-avatar: #52525b;
}

/* Scope: the music page containers only, never the site header or brand. */
:is(.ff-global-artist-experience, .ff-music-events, .ff-music-discovery-destination) :is([class*="text-fuchsia-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-pink-"]) {
    color: var(--mu-ink);
}
:is(.ff-global-artist-experience, .ff-music-events, .ff-music-discovery-destination) :is([class*="border-fuchsia-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-pink-"]) {
    border-color: var(--mu-line);
}
:is(.ff-global-artist-experience, .ff-music-events, .ff-music-discovery-destination) :is(a, button):is([class*="bg-fuchsia-6"], [class*="bg-fuchsia-7"], [class*="bg-violet-6"], [class*="bg-violet-7"]) {
    background-color: var(--mu-ink);
    color: var(--mu-ground);
}
:is(.ff-global-artist-experience, .ff-music-events, .ff-music-discovery-destination) :is(div, span, p, article, section):is([class*="bg-fuchsia-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-pink-"]) {
    background-color: var(--mu-chip);
}
:is(.ff-global-artist-experience, .ff-music-events, .ff-music-discovery-destination) :is([class*="from-fuchsia-"], [class*="from-violet-"], [class*="from-purple-"]) {
    background-image: none;
    background-color: var(--mu-chip);
}
:is(.ff-global-artist-experience, .ff-music-discovery-destination)::before,
:is(.ff-global-artist-experience, .ff-music-discovery-destination)::after { display: none; }
.ff-global-artist-hero, .ff-music-discovery-hero--flagship { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }

/* Artists directory: a compact list instead of 732 tall letter cards. */
.ff-artist-directory-grid { gap: 0 1.5rem; }
@media (min-width: 768px) { .ff-artist-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ff-artist-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ff-artist-directory-grid .ff-global-artist-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: .7rem .25rem;
    border: 0;
    border-bottom: 1px solid var(--mu-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.ff-artist-directory-grid .ff-global-artist-card > :is(img, .ff-artist-photo-fallback) {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    object-fit: cover;
}
.ff-artist-directory-grid .ff-artist-photo-fallback {
    background: var(--mu-avatar);
    color: #ffffff;
    font-size: 1.05rem;
}
.ff-artist-directory-grid .ff-artist-card-copy { flex: 1; min-width: 0; padding: 0; }
.ff-artist-directory-grid .ff-artist-card-copy h2 { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.ff-artist-directory-grid .ff-artist-card-copy h2 + p,
.ff-artist-directory-grid .ff-artist-card-copy > p { margin-top: .1rem; font-size: .82rem; font-weight: 600; color: var(--mu-muted); }
.ff-artist-directory-grid .ff-artist-card-copy > div:last-child { margin-top: .35rem; gap: .5rem; }
.ff-artist-directory-grid .ff-artist-card-copy > div:last-child a { font-size: .8rem; color: var(--mu-muted); }
.ff-artist-directory-grid .ff-artist-card-copy > div:last-child button { padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; }
.ff-global-artist-search { border-color: var(--mu-line); border-radius: 999px; padding: .4rem .4rem .4rem 1.1rem; align-items: center; }
.ff-global-artist-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ff-global-artist-search input { border: 0; background: transparent; box-shadow: none; }
.ff-global-artist-search button { border-radius: 999px; background: var(--mu-ink); color: var(--mu-ground); }

/* Artist page: a neutral initials tile instead of a big purple letter; ink actions. */
.ff-global-artist-profile-card .ff-artist-photo-fallback {
    min-height: 12rem;
    background: var(--mu-avatar);
    color: #ffffff;
    font-size: 4.5rem;
}
.ff-global-artist-profile-card form button { border-radius: 999px; background: var(--mu-ink); color: var(--mu-ground); }
.ff-artist-section-navigation a { color: var(--mu-ink); }
.ff-artist-no-dates a { color: var(--mu-ink); }

/* Feed the neutral palette into the existing music and artist variables (their rules use them,
   some with !important inside a layer, so the variables are the reliable override). */
html body .ff-music-events,
html body .ff-artist-field-guide,
html.dark body .ff-music-events,
html.dark body .ff-artist-field-guide {
    --event-paper: var(--mu-ground);
    --event-ink: var(--mu-ink);
    --event-muted: var(--mu-muted);
    --event-rule: var(--mu-line);
    --ff-artist-paper: var(--mu-card);
    --ff-artist-ink: var(--mu-ink);
    --ff-artist-muted: var(--mu-muted);
    --ff-artist-rule: var(--mu-line);
    --ff-artist-placeholder: var(--mu-avatar);
}
html body:has(:is(.ff-music-events, .ff-artist-field-guide, .ff-global-artist-experience)) { background: var(--mu-ground); }
html body :is(.ff-music-events, .ff-artist-field-guide) { background-color: var(--mu-ground); }
html body :is(.ff-music-events, .ff-artist-field-guide) :is(h1, h2) {
    font-family: var(--font-ff-utility, ui-sans-serif, system-ui, sans-serif);
    font-weight: 800;
    letter-spacing: 0; /* existing music-page readability contract keeps title tracking at 0 */
}
html body .ff-artist-guide.ff-music-events h1 { font-family: var(--font-ff-utility, ui-sans-serif, system-ui, sans-serif); letter-spacing: 0; }
html body .ff-artist-field-guide :is(.ff-artist-no-dates, [class*="dark:bg-slate-900"]) { background-color: var(--mu-card); border-color: var(--mu-line); }

/* Directory rows: no box around each artist; a hairline divider instead. */
html body .ff-artist-directory-grid .ff-global-artist-card {
    --ff-artist-paper: transparent;
    --ff-artist-rule: transparent;
    position: relative;
}
html body .ff-artist-directory-grid .ff-global-artist-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--mu-line);
}
html body .ff-artist-directory-grid .ff-global-artist-card > :is(img, .ff-artist-photo-fallback) { min-height: 0; }
html body .ff-artist-directory-grid .ff-artist-photo-fallback { background: var(--mu-avatar); color: #ffffff; }
html body .ff-artist-field-guide .ff-artist-no-dates { padding: 1.25rem 1.5rem; border: 1px solid var(--mu-line); border-radius: 1rem; }

/* Concerts / events: a photo heading in natural color, a search card, soft empty state. */
html body .ff-event-heading--photo {
    position: relative;
    display: flex;
    min-height: 15rem;
    flex-direction: column;
    justify-content: flex-end;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.5rem .25rem;
    overflow: hidden;
    border-radius: 22px;
    background: #18181a;
    color: #ffffff;
    isolation: isolate;
}
html body .ff-event-heading-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
html body .ff-event-heading--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 66%) 0%, rgb(0 0 0 / 22%) 55%, transparent 85%); }
html body .ff-event-heading--photo h1 { margin: 0; color: #ffffff; font-size: clamp(2.4rem, 6vw, 4rem); line-height: .95; text-shadow: 0 2px 18px rgb(0 0 0 / 45%); }
html body .ff-event-heading--photo .ff-event-navigation { border-bottom: 0; }
html body .ff-event-heading--photo .ff-event-navigation a { color: #f4f2ee; text-shadow: 0 1px 3px rgb(0 0 0 / 55%); }
html body .ff-event-heading--photo .ff-event-navigation a[aria-current="page"] { color: #ffffff; border-bottom-color: #ffffff; }
html body .ff-event-heading--photo .ff-event-navigation a:focus-visible { outline-color: #ffffff; }
html body .ff-music-events .ff-event-filters {
    padding: 1rem 1.1rem;
    border: 1px solid var(--mu-line);
    border-radius: 18px;
    background: var(--mu-card);
    box-shadow: 0 12px 32px rgb(0 0 0 / 8%);
}
html.dark body .ff-music-events .ff-event-filters { box-shadow: none; }
html body .ff-music-events :is(.ff-event-button) { border-radius: 999px; }
html body .ff-music-events .ff-event-filters :is(input, select) { border-radius: 12px; }
html body .ff-event-empty--soon { padding: 1.25rem 1.4rem; border: 1px solid var(--mu-line); border-radius: 18px; background: var(--mu-card); }
html body .ff-event-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
html body .ff-event-fallback-heading { margin: 1.75rem 0 .75rem; font-size: 1.25rem; }
html body .ff-event-fallback-festivals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
html body .ff-event-fallback-festivals a {
    position: relative;
    display: flex;
    height: 10.5rem;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 16px;
    background: #18181a;
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
}
html body .ff-event-fallback-festivals img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
html body .ff-event-fallback-festivals a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 28%) 40%, transparent 65%); }
html body .ff-event-fallback-festivals span { display: grid; padding: .85rem; text-shadow: 0 1px 3px rgb(0 0 0 / 50%); }
html body .ff-event-fallback-festivals strong { font-size: 1rem; }
html body .ff-event-fallback-festivals small { font-size: .82rem; color: #ece8e0; }
html body .ff-event-fallback-festivals a:focus-visible { outline: 3px solid var(--mu-ink); outline-offset: 3px; }
@media (max-width: 760px) { html body .ff-event-fallback-festivals { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { html body .ff-event-heading--photo { min-height: 11rem; padding: 1rem 1rem 0; border-radius: 16px; } }
html.dark body:has(:is(.ff-music-events, .ff-artist-field-guide, .ff-global-artist-experience)) { background: var(--mu-ground); }
html body .ff-music-events .ff-event-calendar strong { font-family: var(--font-ff-utility, ui-sans-serif, system-ui, sans-serif); font-weight: 800; }

/* Breadcrumbs on the neutral ground keep >= 4.5:1 contrast (axe, Nov 3). */
html body nav[aria-label="Breadcrumb"] { color: var(--mu-muted); }