<style>
:root {
  --ql-pink-muted: rgba(255,197,240,0.12);
  --ql-pink-border: rgba(255,197,240,0.3);
  --bs-body-bg: #1E0D1A;
  --bs-body-color: #f0dde9;
  --bs-body-font-family: 'Gabarito', Georgia, serif;
}
/* hero */
.hero-label { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ql-pink); }
.hero .intro { color: #e8ccdf; line-height: 1.75; }
.hero .intro strong { color: var(--ql-pink); }
.hero { border-bottom: 1px solid var(--ql-pink-border); }
 
/* map */
#map { width: 100%; height: 480px; border-radius: .75rem; border: 1px solid var(--ql-pink-border); overflow: hidden; }
.map-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ql-pink); }
 
/* genre heading */
.genre-title { border-bottom: 1px solid var(--ql-pink-border); }
 
/* events list */
.events-list { list-style: none; padding: 0; margin: 0; }
.events-list li { padding: .9rem 0 .9rem 1.25rem; border-bottom: 1px solid rgba(255,197,240,0.1); position: relative; }
.events-list li:last-child { border-bottom: none; }
.events-list li::before { content: ''; position: absolute; left: 0; top: 1.35rem; width: 6px; height: 6px; border-radius: 50%; background: var(--ql-pink); opacity: .7; }
 
.event-name { font-size: 1rem; font-weight: 700; color: var(--ql-pink); line-height: 1.25; }
.event-name a { color: inherit; text-decoration: none; }
.event-name a:hover { text-decoration: underline; }
.event-meta { font-size: .78rem; color: rgba(240,221,233,.5); }
.note-ville { font-size: .68rem; background: rgba(255,197,240,.15); color: var(--ql-pink); border-radius: 3px; padding: 1px 5px; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.event-desc { font-size: .875rem; color: #cdb8c5; line-height: 1.6; }
.event-lineup { font-size: .78rem; color: rgba(255,197,240,.65); font-style: italic; }
 
/* pills */
.ql-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; padding: 3px 10px; border-radius: 20px; text-decoration: none; background: rgba(255,197,240,.08); border: 1px solid var(--ql-pink-border); color: var(--ql-pink); transition: background .15s; letter-spacing: .02em; }
.ql-pill:hover { background: rgba(255,197,240,.18); color: var(--ql-pink); }
.ql-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
 
/* leaflet overrides */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.leaflet-popup-content { margin: 0 !important; }
</style>
