/* Event discovery. Extends the TicketDay brand in site.css: black and white, one yellow accent for buying,
   Schibsted Grotesk with DM Mono for dates, prices and labels, 4px corners, rules instead of shadows.
   Links are black (white on black), never blue; yellow is kept for ticket buttons and the search action. */
:root {
  --ev-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ev-gap: 24px;
  --ev-pad: clamp(16px, 2.8vw, 48px);
  --ev-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M4 3h5v5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  --ev-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  scrollbar-color: #000 var(--bg-2);
}
::selection { background: var(--accent); color: #000; }

/* ---------- page width: browsing fills the screen, a single event keeps a readable measure ---------- */
.ev-wide .wrap { max-width: 1920px; padding-left: var(--ev-pad); padding-right: var(--ev-pad); }
.ev-single .wrap { max-width: 1240px; padding-left: var(--ev-pad); padding-right: var(--ev-pad); }

/* ---------- links: ink, not blue ---------- */
.ev main a:not(.btn) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 160ms ease; }
.ev main a:not(.btn):hover { text-decoration-color: currentColor; }
.ev .btn-link { color: var(--ink); }
.ev :focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.ev .hero :focus-visible, .ev-powered :focus-visible, .ev-buybar :focus-visible { outline-color: var(--accent); }

/* ---------- buttons ---------- */
.btn-buy { position: relative; z-index: 1; gap: 8px; background: var(--accent); color: #000; font-weight: 800; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.btn-buy:hover { background: #000; color: var(--accent); }
.hero .btn-buy:hover, .ev-buybar .btn-buy:hover { background: #fff; color: #000; }
.btn-buy-sm { min-height: 40px; padding: 8px 14px; font-size: .92rem; }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: .95rem; gap: 8px; }
.btn-buy-arrow { display: inline-block; width: .7em; height: .7em; flex: none; background: currentColor;
  -webkit-mask: var(--ev-arrow) center / contain no-repeat; mask: var(--ev-arrow) center / contain no-repeat;
  transition: transform 200ms var(--ev-ease); }
.btn:hover .btn-buy-arrow { transform: translate(2px, -2px); }
.ev .btn { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ev-ease); }
.ev .btn:active, .ev-chips button:active, .ev-pick:active, .ev-picks a:active, .ev-active a:active { transform: scale(0.97); }

/* ---------- search hero ---------- */
.ev-hero { padding: 28px 0 28px; }
.ev-hero h1 { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.6rem); margin-bottom: .2em; text-wrap: balance; }
.ev-hero .lede { font-size: 1.05rem; margin-bottom: 22px; text-wrap: pretty; }
.ev-hero.is-compact { padding: 18px 0 16px; }
.ev-crumbs { font: 500 .76rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #9a9a9a; margin-bottom: 1.1em; }
.ev-crumbs a { color: #fff; }

.ev-form { color: #fff; }
.ev-omni { display: flex; gap: 0; max-width: 1180px; }
.ev-omni input { flex: 1; min-width: 0; min-height: 60px; padding: 14px 18px; font: 500 1.12rem var(--font); color: #000; background: #fff;
  border: 2px solid #fff; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); -webkit-appearance: none; appearance: none; caret-color: #000;
  transition: border-color 160ms ease; }
.ev-omni input::placeholder { color: #6b6b6b; font-weight: 400; }
.ev-omni input:focus { outline: none; border-color: var(--accent); }
.ev-omni input:focus-visible { outline: none; }
.ev-omni input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ev-submit { min-height: 60px; padding: 12px 28px; background: var(--accent); color: #000; font-size: 1.05rem; font-weight: 800;
  border-radius: 0 var(--radius) var(--radius) 0; border: 0; }
.ev-submit:hover { background: #fff; }
.is-compact .ev-omni input, .is-compact .ev-submit { min-height: 52px; }

.ev-fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end; }
.ev-fields-main { margin-top: 14px; max-width: 1180px; grid-template-areas: "from within" "when genre" "dates dates"; }
.ev-field { display: grid; gap: 6px; min-width: 0; }
.ev-f-from { grid-area: from; } .ev-f-when { grid-area: when; } .ev-f-within { grid-area: within; } .ev-f-genre { grid-area: genre; }
.ev-dates { grid-area: dates; }
.ev-field label, .ev-dates label { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #a8a8a8; }
.ev-form input[type=text], .ev-form input[type=date], .ev-form select {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 16px var(--font); color: #fff; background: #141414;
  border: 1px solid #3a3a3a; border-radius: var(--radius); -webkit-appearance: none; appearance: none; color-scheme: dark;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.ev-form input[type=text]:hover, .ev-form select:hover, .ev-form input[type=date]:hover { border-color: #6a6a6a; }
.ev-form input[type=text]:focus, .ev-form select:focus, .ev-form input[type=date]:focus { border-color: var(--accent); outline: none; background: #1c1c1c; }
.ev-form select {
  padding-right: 38px; cursor: pointer; text-overflow: ellipsis;
  background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.ev-form select:focus { background-color: #1c1c1c; }
.ev-form input[type=text]::placeholder { color: #8f8f8f; }
.ev-form :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ev-dates { display: none; grid-template-columns: 1fr 1fr; gap: 12px; }
.ev-dates > div { display: grid; gap: 6px; }
.ev-form.show-dates .ev-dates, .ev-form:has(option[value="dates"]:checked) .ev-dates { display: grid; }

.ev-more { margin-top: 10px; max-width: 1180px; }
.ev-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 .76rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #cfcfcf; transition: color 160ms ease; }
.ev-more summary:hover { color: #fff; }
.ev-more summary::-webkit-details-marker { display: none; }
.ev-more summary::after { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--ev-x) center / contain no-repeat; mask: var(--ev-x) center / contain no-repeat; transform: rotate(45deg); transition: transform 220ms var(--ev-ease); }
.ev-more[open] summary::after { transform: rotate(0deg); }
.ev-fields-more { grid-template-columns: 1fr 1fr; padding-top: 4px; }
.ev-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; color: #cfcfcf; cursor: pointer; }
.ev-check input { width: 20px; height: 20px; accent-color: var(--accent); }

@media (min-width: 900px) {
  .ev-hero { padding: 40px 0 32px; }
  .ev-hero.is-compact { padding: 22px 0 18px; }
  .ev-fields-main { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; grid-template-areas: "from within when genre" ". . dates dates"; }
  .ev-fields-more { grid-template-columns: repeat(3, 1fr); }
  .ev-check { grid-column: auto; }
}

/* Quick searches under the homepage box. */
.ev-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ev-picks a { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid #3a3a3a; border-radius: var(--radius);
  color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev-picks a:hover { background: var(--accent); border-color: var(--accent); color: #000; }

/* Listing partners credit. */
.ev-powered { background: #000; color: #9a9a9a; border-top: 1px solid #222; }
.ev-powered .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 54px; padding-top: 10px; padding-bottom: 10px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ev-powered img { display: block; width: auto; opacity: .85; transition: opacity 160ms ease; }
.ev-powered img:hover { opacity: 1; }
.ev-pb-tm { height: 16px; }
.ev-pb-sk { height: 28px; }

/* ---------- sample-data banner ---------- */
.ev-sample { background: var(--accent); color: #000; font: .85rem/1.45 var(--mono); padding: 10px 0; }

/* ---------- sections ---------- */
.ev-section { margin-top: 48px; }
.ev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; border-top: 2px solid #000; padding-top: 16px; margin-bottom: 22px; }
.ev-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.ev-head > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.ev-head > a::after { content: ""; width: .8em; height: .8em; background: currentColor; -webkit-mask: var(--ev-arrow) center / contain no-repeat; mask: var(--ev-arrow) center / contain no-repeat; transform: rotate(45deg); transition: transform 200ms var(--ev-ease); }
.ev-head > a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.ev-summary { font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0; flex-basis: 100%; }
.ev-section > h2 { border-top: 2px solid #000; padding-top: 16px; margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.ev-empty-line { color: var(--muted); }
.ev-more-link { margin-top: 24px; font-weight: 700; }
.ev-attrib { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 75ch; }

/* Active filters on results. */
.ev-active { list-style: none; padding: 0; margin: -6px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-active a { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 12px; border: 1px solid #000; border-radius: var(--radius);
  font-weight: 600; font-size: .92rem; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev .ev-active a:not(.ev-active-clear):hover { background: #000; color: #fff; }
.ev-active-x { width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--ev-x) center / contain no-repeat; mask: var(--ev-x) center / contain no-repeat; }
.ev .ev-active .ev-active-clear { border-color: transparent; text-decoration: underline; font-weight: 500; }

/* ---------- event cards ---------- */
.ev-grid { display: grid; gap: 40px var(--ev-gap); grid-template-columns: repeat(var(--ev-cols, 2), minmax(0, 1fr)); }
/* Column counts that divide 12 and 24, so the homepage rows and a page of results always end on a full row. */
@media (min-width: 900px) { .ev-grid { --ev-cols: 3; } }
@media (min-width: 1200px) { .ev-grid { --ev-cols: 4; } }
@media (min-width: 1560px) { .ev-grid { --ev-cols: 6; } }
.ev-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ev-media { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; margin-bottom: 14px; border-radius: var(--radius); }
.ev-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ev-ease), filter 300ms ease; }
.ev-poster { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px 16px; color: #fff; font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: .95; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.ev-flag { position: absolute; top: 10px; left: 10px; background: var(--accent); color: #000; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; padding: 4px 8px; border-radius: 2px; }
.ev-body { flex: 1; }
.ev-when { font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.ev-title { font-size: 1.2rem; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 6px; overflow-wrap: anywhere; text-wrap: pretty; }
.ev .ev-title a { color: inherit; text-decoration: none; }
.ev-title a::after { content: ""; position: absolute; inset: 0; }
.ev-lineup { color: var(--ink-2); font-size: .95rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.ev-where { font-size: .95rem; font-weight: 600; margin: 0 0 6px; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font: .78rem var(--mono); color: var(--muted); }
.ev-meta span + span::before { content: "/"; margin: 0 8px; color: #b0b0b0; }
.ev-dist { margin: 4px 0 0; font: 500 .78rem var(--mono); color: var(--ink); }
.ev-liked { display: inline-block; margin: 10px 0 0; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; background: #000; color: var(--accent); padding: 4px 8px; }
.ev-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); min-height: 53px; }
.ev-seller { margin: 0; font: .76rem var(--mono); color: var(--muted); }
.ev-card.is-changed .ev-flag { background: #000; color: #fff; }
.ev-card:focus-within .ev-title a { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .ev-card:hover .ev-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .ev-card:hover .ev-media img { transform: scale(1.045); }
}

/* ---------- day groups ---------- */
.ev-day + .ev-day { margin-top: 44px; }
.ev-day-head { font: 500 .88rem var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); position: sticky; top: 52px; z-index: 2; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); padding-top: 10px; }

/* ---------- phones: cards become compact rows so a day's listings fit on a screen or two ---------- */
@media (max-width: 599px) {
  .ev-grid { grid-template-columns: 1fr; gap: 0; }
  .ev-card { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ev-media { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; }
  .ev-poster { font-size: .78rem; padding: 8px; line-height: 1; letter-spacing: -0.02em; }
  .ev-flag { top: 4px; left: 4px; font-size: .6rem; padding: 2px 4px; }
  .ev-title { font-size: 1.05rem; }
  .ev-card-foot { grid-column: 2; margin-top: 8px; padding-top: 0; border-top: 0; min-height: 0; }
  .ev-lineup, .ev-where { font-size: .88rem; margin-bottom: 2px; }
  .ev-day + .ev-day { margin-top: 32px; }
  .ev-day-head { margin-bottom: 0; top: 48px; }
  .ev-section { margin-top: 36px; }
  .ev-omni input { font-size: 1rem; padding: 12px 14px; }
  .ev-submit { padding: 12px 18px; }
  .ev-picks { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: calc(-1 * var(--ev-pad)); padding-right: var(--ev-pad); }
  .ev-picks::-webkit-scrollbar { display: none; }
  .ev-picks a { flex: none; scroll-snap-align: start; }
  .ev-home-hero .lede { display: none; }
}

/* ---------- browse tiles ---------- */
.ev-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--ev-gap); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ev .ev-tiles a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-height: 52px; }
.ev-tiles strong { font-size: 1.05rem; letter-spacing: -0.01em; transition: transform 220ms var(--ev-ease); }
.ev-tiles span { font: .78rem var(--mono); color: var(--muted); white-space: nowrap; transition: color 160ms ease; }
.ev-tiles a:hover strong { transform: translateX(6px); }
.ev-tiles a:hover span { color: var(--ink); }
.ev-tiles-cities strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }

/* ---------- results ---------- */
.ev-pages { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font: 500 .85rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.ev-pages a { display: inline-flex; align-items: center; min-height: 44px; }
.ev-empty { padding: 8px 0 16px; max-width: 720px; }
.ev-empty h2 { margin-top: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.ev-ideas { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ev .ev-ideas a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #000; border-radius: var(--radius); font-weight: 600; text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev .ev-ideas a:hover { background: #000; color: #fff; }
.ev-ideas a:active { transform: scale(0.97); }

/* ---------- your music ---------- */
.ev-prefs .section-intro { margin-bottom: 18px; }
.ev-prefs-add { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.ev-prefs-add input { flex: 1 1 220px; font: 16px var(--font); padding: 12px 14px; border: 1px solid #000; border-radius: var(--radius); min-height: 48px; }
.ev-chips { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-chips button { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; font: 600 .95rem var(--font); background: #000; color: #fff; border: 0; border-radius: var(--radius); cursor: pointer; transition: transform 140ms var(--ev-ease); }
.ev-chips button span { font: .7rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.ev-genre-picks { border: 0; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-genre-picks legend { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; padding: 0; }
.ev-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid #000; border-radius: var(--radius); cursor: pointer; font-size: .95rem; user-select: none; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ev-pick:has(input:checked) { background: #000; color: #fff; }
.ev-pick:has(input:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }
.ev-prefs-actions { margin-top: 12px; }
.ev-prefs-status { font: .85rem var(--mono); color: var(--good); min-height: 1.4em; margin: 8px 0 0; }

/* ---------- event page ---------- */
.ev-detail-hero { padding: 32px 0 40px; }
.ev-detail-top { display: grid; gap: 28px; }
.ev-detail-hero h1 { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.6rem); }
.ev-detail-when { font: 500 .9rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: .8em; }
.ev-notice { display: inline-block; margin: 8px 0 0; padding: 10px 14px; border: 2px solid var(--accent); font-weight: 700; border-radius: var(--radius); }
.ev-notice.is-bad { border-color: var(--bad); background: var(--bad); color: #fff; }
.ev-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 28px 0 6px; }
.ev-buy-row .btn-lg { min-height: 58px; padding: 14px 30px; font-size: 1.12rem; }
.ev-buy-meta { margin: 0; display: grid; gap: 2px; }
.ev-buy-meta strong { font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; }
.ev-buy-meta span { font: .78rem var(--mono); color: #9a9a9a; text-transform: uppercase; letter-spacing: .05em; }
.ev-detail-img { margin: 0; align-self: center; }
.ev-detail-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.ev-detail-img figcaption { color: #8a8a8a; margin-top: 6px; font-family: var(--mono); }
.ev-facts { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 2px solid #000; }
.ev-facts > div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--line); }
.ev-facts dt { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.ev-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ev-travel { margin-top: 40px; max-width: 760px; }
.ev-travel h2 { margin-top: 0; }
.ev-distance { font-size: 1.15rem; font-weight: 700; }
.ev-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ev-desc { margin-top: 40px; }
.ev-desc h2 { margin-top: 0; }

/* Phones: a ticket bar stays at the bottom once the main ticket button has scrolled away (events.js). */
.ev-buybar { display: none; }
@media (max-width: 759px) {
  .ev-buybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #000; color: #fff; border-top: 1px solid #222;
    transform: translateY(110%); transition: transform 320ms var(--ev-ease); }
  .ev-buybar.is-shown { transform: none; }
  .ev-buybar div { display: grid; min-width: 0; }
  .ev-buybar strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ev-buybar div span { font: .72rem var(--mono); color: #9a9a9a; text-transform: uppercase; letter-spacing: .05em; }
  .ev-single main { padding-bottom: 72px; }
}

@media (min-width: 760px) {
  .ev-head .ev-summary { flex-basis: auto; }
  .ev-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ev-detail-top:has(.ev-detail-img) { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
  .ev-detail-hero { padding: 48px 0 56px; }
}

/* ---------- date lists (tour dates) ---------- */
.ev-datelist { list-style: none; padding: 0; margin: 0; border-top: 2px solid #000; }
.ev-datelist li { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 4px 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev-datelist time { font: 500 .85rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.ev .ev-datelist-place { font-weight: 700; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.ev .ev-datelist-place:hover { text-decoration: underline; }
.ev-datelist-note { grid-column: 2; font: .8rem var(--mono); color: var(--muted); }
.ev-datelist-note:empty { display: none; }
.ev-datelist-go { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 14px; }
.ev-about { margin-top: 40px; }
.ev-about h2 { margin-top: 0; }
@media (max-width: 600px) {
  .ev-datelist li { grid-template-columns: 1fr auto; }
  .ev-datelist time { grid-column: 1 / -1; }
  .ev-datelist-place, .ev-datelist-note { grid-column: 1; }
  .ev-datelist-go { grid-column: 2; grid-row: 2 / span 2; }
  .ev-datelist-go .ev-seller { display: none; }
}

/* ---------- source credit on the event page ---------- */
/* Skiddle's logo is white artwork, so it always sits on a black tile rather than being recoloured. */
.ev-src-logo { display: inline-block; width: auto; height: 1.5em; vertical-align: -0.45em; margin-right: 5px; background: #000; padding: 2px 4px; box-sizing: content-box; }
.ev-source { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 500 .76rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #9a9a9a; }
.ev .ev-source a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.ev-source .ev-src-logo { height: 2em; padding: 0; vertical-align: middle; }

/* ---------- motion ----------
   One authored moment: the hero content settles in on load. Cards rise as they scroll into view (scroll-driven,
   so it costs no script and simply doesn't run in browsers without it). Everything starts from a visible state
   in the markup, and none of it runs for visitors who ask for reduced motion. */
@keyframes ev-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes ev-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes ev-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
  .ev-hero h1, .ev-hero .lede, .ev-hero .ev-crumbs, .ev-hero .ev-detail-when, .ev-hero .ev-omni, .ev-hero .ev-fields-main, .ev-hero .ev-more,
  .ev-buy-row, .ev-hero .ev-source, .ev-detail-img, .ev-results .ev-head, .ev-active { animation: ev-in 640ms var(--ev-ease) both; }
  .ev-hero .ev-crumbs, .ev-hero .ev-detail-when { animation-delay: 0ms; }
  .ev-hero h1 { animation-delay: 40ms; }
  .ev-hero .lede, .ev-hero .ev-omni { animation-delay: 100ms; }
  .ev-hero .ev-fields-main, .ev-buy-row { animation-delay: 160ms; }
  .ev-hero .ev-more, .ev-hero .ev-source, .ev-results .ev-head { animation-delay: 220ms; }
  .ev-detail-img, .ev-active { animation-delay: 140ms; }
  .ev-picks a { animation: ev-in 520ms var(--ev-ease) both; }
  .ev-picks a:nth-child(1) { animation-delay: 240ms; } .ev-picks a:nth-child(2) { animation-delay: 270ms; }
  .ev-picks a:nth-child(3) { animation-delay: 300ms; } .ev-picks a:nth-child(4) { animation-delay: 330ms; }
  .ev-picks a:nth-child(5) { animation-delay: 360ms; } .ev-picks a:nth-child(6) { animation-delay: 390ms; }
  .ev-picks a:nth-child(7) { animation-delay: 420ms; } .ev-picks a:nth-child(8) { animation-delay: 450ms; }
  .ev-more[open] .ev-fields-more { animation: ev-drop 240ms var(--ev-ease); }
  @supports (animation-timeline: view()) {
    .ev-card, .ev-datelist li, .ev-tiles li { animation: ev-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-media img, .ev .btn, .btn-buy-arrow, .ev-tiles strong, .ev-buybar { transition: none; }
  .ev-card:hover .ev-media img { transform: none; }
  .ev .btn:active, .ev-chips button:active, .ev-pick:active, .ev-picks a:active, .ev-active a:active { transform: none; }
  .ev-buybar { transform: none; }
  .ev-buybar:not(.is-shown) { opacity: 0; pointer-events: none; }
}

/* ---------- event type bar (top of the white area) ---------- */
.ev-types { margin-top: 28px; }
/* Scrolls sideways on narrow screens; the fade on the right shows there is more. */
.ev-types ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ev-types ul::-webkit-scrollbar { display: none; }
.ev main .ev-types a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 13px; border: 1px solid #000; border-radius: var(--radius);
  color: var(--ink); font-weight: 700; font-size: .95rem; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev-types svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ev main .ev-types a[aria-current] { background: #000; color: #fff; }
@media (hover: hover) { .ev main .ev-types a:not([aria-current]):hover { background: var(--accent); } }
.ev main .ev-types a:active { transform: scale(0.97); }
.ev-types + .ev-section { margin-top: 28px; }
@media (max-width: 600px) {
  .ev-types { margin-top: 20px; padding-right: 0; }
  .ev-types ul { padding-right: 40px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .ev main .ev-types a { gap: 7px; padding: 8px 12px 8px 10px; font-size: .9rem; }
  .ev-types + .ev-section { margin-top: 22px; }
}

/* ---------- map view (/events?view=map): list beside a map, like a property search ---------- */
.ev-view { display: inline-flex; border: 1px solid #000; border-radius: var(--radius); overflow: hidden; align-self: center; }
.ev main .ev-view a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease; }
.ev main .ev-view a + a { border-left: 1px solid #000; }
.ev main .ev-view a[aria-current] { background: #000; color: #fff; }
@media (hover: hover) { .ev main .ev-view a:not([aria-current]):hover { background: var(--accent); } }

.ev-split { display: flex; flex-direction: column; gap: 24px; }
.ev-map-wrap { order: -1; }
.ev-map { position: relative; height: 62vh; min-height: 340px; background: #f2f3f0; border: 1px solid #000; }
.ev-map-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; font: 500 .85rem var(--mono); color: var(--muted); }
@media (min-width: 1000px) {
  .ev-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--ev-gap); align-items: start; }
  .ev-map-wrap { order: 0; position: sticky; top: 16px; }
  .ev-map { height: calc(100vh - 32px); min-height: 480px; }
  .ev-split .ev-grid { --ev-cols: 2; }
}
@media (min-width: 1700px) { .ev-split .ev-grid { --ev-cols: 3; } }

.ev-map-pop .maplibregl-popup-content { padding: 14px 16px 12px; border: 1px solid #000; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-family: var(--font); }
.ev-map-pop .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; }
.ev-pop-venue { display: block; padding-right: 24px; font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.ev-pop-meta { margin: 4px 0 10px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ev-pop-list { list-style: none; margin: 0; padding: 0; }
.ev-pop-list li + li { border-top: 1px solid var(--line); }
.ev-pop-list a { display: block; padding: 8px 0; color: var(--ink); text-decoration: none; }
.ev-pop-list a:hover .ev-pop-name { text-decoration: underline; }
.ev-pop-when { display: block; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ev-pop-name { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.ev-pop-wait { padding: 8px 0; color: var(--muted); font-size: .9rem; }
.ev-pop-more { display: inline-block; margin-top: 8px; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
/* Count on the left, then the summary and the List / Map switch at the right. */
.ev-head .ev-view { order: 2; }
@media (min-width: 760px) { .ev-head .ev-view ~ .ev-summary { margin-left: auto; order: 1; } }
.ev-map-area { position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); min-height: 40px; padding: 8px 18px; border: 1px solid #000; border-radius: var(--radius);
  background: #000; color: #fff; font: 700 .92rem var(--font); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: background-color 160ms ease, color 160ms ease; }
.ev-map-area[hidden] { display: none; }
@media (hover: hover) { .ev-map-area:hover { background: var(--accent); color: #000; } }
.ev-map-area:active { transform: translateX(-50%) scale(0.97); }

/* ---------- follow buttons (artist and event pages) and the Following switch ---------- */
.ev-follows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 22px; }
.ev-follow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid #fff; border-radius: var(--radius);
  background: transparent; color: #fff; font: 700 .95rem var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ev-ease); }
.ev-follow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-follow .ev-follow-tick, .ev-follow[aria-pressed="true"] .ev-follow-plus { display: none; }
.ev-follow[aria-pressed="true"] .ev-follow-tick { display: inline; }
.ev-follow[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #000; }
@media (hover: hover) { .ev-follow[aria-pressed="false"]:hover { background: #fff; color: #000; } }
.ev-follow:active { transform: scale(0.97); }
.ev-follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-follow-note { flex-basis: 100%; margin: 2px 0 0; font-size: .9rem; color: #cfcfcf; }
.ev-follow-note a { color: #fff; }
/* The Following switch sits apart from the type buttons: it combines with them. */
.ev-types .ev-types-follow { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line); }
.ev main .ev-types .ev-types-follow a[aria-current] { background: var(--accent); border-color: #000; color: #000; }