/* Small, opt-in artist samples. No offscreen players, remote artwork or fake EQ. */
.artist-preview { border: 1px solid var(--line); background: var(--surface); padding: 24px; margin-top: 30px; min-width: 0; }
.artist-preview h2 { font: bold clamp(32px, 4vw, 48px)/1.1 Condensed, Arial, sans-serif; text-transform: uppercase; margin: 12px 0 8px; }
.preview-intro { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.preview-toggle { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 0; text-align: left; min-height: 56px; }
.preview-play { flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); width: 42px; height: 42px; border-radius: 50%; color: var(--accent); background: var(--bg); }
.preview-play .ui-icon { width: 19px; height: 19px; }
.preview-button-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.preview-button-copy strong { font-size: 15px; font-weight: 500; }
.preview-button-copy > span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.preview-wave { width: 44px; height: 28px; flex-shrink: 0; color: var(--muted); opacity: .45; }
.preview-toggle:hover .preview-play { border-color: var(--accent); }
.preview-toggle:hover .preview-wave { color: var(--accent); }
.preview-notice { color: var(--muted); font: 10px/1.6 var(--mono); margin-top: 5px; }
.music-dialog [hidden] { display: none !important; }
.preview-track-credit { font-size: 13px; overflow-wrap: anywhere; }
.preview-track-date { font: 10px/1.7 var(--mono); color: var(--muted); margin-top: 3px; }
.preview-frame-slot { margin-top: 14px; }
.preview-frame { display: block; width: 100%; border: 0; color-scheme: normal; }
.preview-frame-apple { height: 175px; }
.preview-frame-soundcloud { height: 166px; }
.preview-status { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 12px; }
.preview-options { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 5px; }
.preview-options > * { min-height: 44px; padding: 8px 0; font-size: 12px; gap: 6px; }
.preview-options .ui-icon { width: 16px; height: 16px; color: var(--accent); }
.preview-provider-note { color: var(--muted); font: 10px/1.6 var(--mono); margin-top: 4px; }
.music-artist-links { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.music-artist-links .eyebrow { font-size: 10px; line-height: 1.6; margin-bottom: 8px; }
.music-artist-links > div { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.music-artist-links a { min-height: 44px; font-size: 13px; gap: 8px; padding: 8px 0; }
.music-artist-links .ui-icon { width: 17px; height: 17px; color: var(--accent); }
.preview-compact { margin: 0 0 16px; padding: 10px 0 14px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; }
.preview-compact .preview-toggle { padding: 4px 0; }
.preview-compact .preview-wave { width: 33px; }
.preview-compact .preview-notice { font: 11px/1.6 Barlow, Arial, sans-serif; }
.music-dialog { position: fixed; inset: 0; width: min(510px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 24px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 100px #0008; }
.music-dialog::backdrop { background: rgb(0 0 0 / .72); }
.music-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.music-dialog-top .eyebrow { font-size: 10px; gap: 7px; }
.music-dialog-close { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 12px; font-size: 13px; }
.music-dialog h2 { font: bold clamp(35px, 7vw, 49px)/1.05 Condensed, Arial, sans-serif; text-transform: uppercase; margin: 18px 0 24px; overflow-wrap: anywhere; }
.music-dialog h3 { font: 600 18px/1.4 Barlow, Arial, sans-serif; overflow-wrap: anywhere; margin: 6px 0; }
.music-dialog .preview-format { color: var(--accent); font: 10px/1.6 var(--mono); }
.music-dialog .preview-track-credit { color: var(--muted); }
.music-dialog .preview-frame-slot { min-height: 175px; }
.music-dialog-tickets { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 18px; }
.music-dialog-tickets p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.music-dialog-tickets .button { width: 100%; font-size: 16px; min-height: 50px; }
html:has(.music-dialog[open]) { overflow: hidden; }

/* Colour is an echo of each supplied flyer, not a new colour for the ticket CTA.
   The wash is local to each card, static, subtle in both themes, and CSS-only. */
[data-direction="signal"] .event-card {
  --card-tint: 127 149 167;
  border: 1px solid var(--line);
  border-top: 2px solid rgb(var(--card-tint) / .6);
  background: radial-gradient(ellipse at 100% 30%, rgb(var(--card-tint) / .07), transparent 65%), var(--surface);
  box-shadow: 0 3px 0 rgb(var(--card-tint) / .08);
  transition: border-color .18s, box-shadow .18s;
}
[data-direction="signal"] .event-card[data-event-slug="pan-pot-venue-tba-2"] { --card-tint: 120 151 200; }
[data-direction="signal"] .event-card[data-event-slug="ricardo-villalobos-x-coda-september-25th"] { --card-tint: 217 195 76; }
[data-direction="signal"] .event-card:has(img[src$="event-1441.jpg"]) { --card-tint: 196 108 144; }
[data-direction="signal"] .event-card:has(img[src$="event-1443.jpg"]) { --card-tint: 111 153 213; }
[data-direction="signal"] .event-card:has(img[src$="event-1429.jpg"]) { --card-tint: 78 169 194; }
[data-direction="signal"] .event-card .card-topline { padding: 13px 16px; }
[data-direction="signal"] .event-card .card-content { padding: 18px 16px 16px; }
[data-direction="signal"] .event-card .card-actions { border-top: 0; padding-top: 0; }
[data-direction="signal"] .event-card .event-detail { margin-bottom: 16px; }
[data-theme="light"][data-direction="signal"] .event-card { background-color: #f7f7f2; }
@media (hover: hover) {
  [data-direction="signal"] .event-card:hover, [data-direction="signal"] .event-card:focus-within { border-color: rgb(var(--card-tint) / .7); box-shadow: 0 4px 0 rgb(var(--card-tint) / .13); }
}
@media (max-width: 760px) {
  .artist-preview:not(.preview-compact) { padding: 18px; margin-top: 24px; }
  .music-dialog { padding: 18px; }
  .music-dialog h2 { margin: 12px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-direction="signal"] .event-card { transition: none; }
}