@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/chivo/chivo-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/chivo/chivo-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/chivo/chivo-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/chivo/chivo-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/chivo/chivo-4.ttf) format('truetype');
}
:root{--accent:#ffb1ee;--accent2:#f49cde;--link:#17171c;--warn-bg:#fce8f7;--warn-fg:#17171c;--deep:#29292e;--ok-bg:#fce8f7;--bg:#f5f5f5;--sans:'Chivo',Helvetica,Arial,sans-serif;--mono:'Chivo',Helvetica,Arial,sans-serif}

/* Shared city identity: accent call-to-action buttons. */
.btn-accent,.btn-checkout,.seatmap .ov span.b{background:#ffb1ee;color:#17171c}
.btn-accent:hover,.btn-checkout:hover{background:#f49cde;color:#17171c}
.hero .txt > .btn-accent{width:70%}

@media (min-width:761px){
  .hero{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .hero .shade{inset:0 calc(60% - 72px) 0 0}
}

/* No transform zoom; desktop backdrop matches the photo column dimensions. */
.hero .blur{inset:0;width:100%;height:100%;transform:none}

@media (min-width:761px){
  .hero .blur{width:60%;right:auto}
}

.hero .pic .fav{top:16px;bottom:auto}

.buy .hd .tag{white-space:nowrap;flex-shrink:0}

/* Pink labels on dark buttons and selected controls. */
.btn-dark,.btn-go,
.chip.on:not(.sort),.day.on{color:#ffb1ee}
.btn-dark:hover,.btn-go:hover,
.chip.on:not(.sort):hover,a.day.on:hover{background:#ffb1ee;color:#17171c;border-color:#ffb1ee}

/* Link accents stay pink while text remains readable on light surfaces. */
a:hover{text-decoration-color:var(--accent)}
.sec-head>a,.venue-location-info .lk a,.seo a{ text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* Pill label and count share one baseline instead of centring their differently sized boxes. */
.chip{align-items:baseline;line-height:36px}

/* Brand colour for native text selection, including form fields. */
::selection{background:#ffb1ee;color:#17171c;text-shadow:none}

/* Compact desktop wordmark; the dancing mascot is the mobile home link. */
.header{padding-top:8px;padding-bottom:8px}
.header .logo-city{width:auto;height:64px;align-items:center}
.logo-city-desktop{
  display:flex;align-items:flex-end;flex:none;height:64px;padding-bottom:3px;
  font:700 22px/20px var(--sans);letter-spacing:-.03em;text-align:left;
}
.logo-type{padding-bottom:3px;text-align:right}
.logo-word{display:block}
/* Optical spacing follows the fox's sloping back, not its image bounds. */
.logo-word:first-child{transform:translateX(-3px)}
.logo-word:last-child{transform:translateX(3px)}
.logo-leaning-fox{display:block;flex:none;width:28px;height:52px;margin-left:-6px;pointer-events:none}
.logo-city-mobile{display:none}
/* Ticket wordmark: two-line name plus a perforated stub; the "LA" badge is the mobile home link. */
.header .logo-city-ticket{height:48px}
.logo-ticket,.logo-badge{
  background:#ffb1ee;color:#17171c;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 5px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
}
.logo-ticket{
  display:flex;align-items:center;height:42px;padding:0 30px 0 14px;border-radius:10px;position:relative;
  font:800 15px/15px var(--sans);letter-spacing:-.03em;
}
.logo-ticket::after{content:"";position:absolute;right:16px;top:9px;bottom:9px;border-left:1.5px dashed rgba(23,23,28,.55)}
.logo-ticket .logo-type{padding:0;text-align:left}
.logo-ticket .logo-word{transform:none}
.logo-badge{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;font:800 22px/1 var(--sans);letter-spacing:-.04em}
@media (max-width:760px){
  .hero .txt > .btn-accent{width:100%}
  .header{
    display:grid;grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px 8px;padding-top:10px;padding-bottom:10px;
  }
  .header .logo-city{width:48px;height:48px}
  .logo-city-desktop{display:none}
  .logo-city-mobile{display:block;flex:none}
  .logo-ticket{display:none}
  .logo-badge{display:flex;flex:none}
  .header .search{order:0;min-width:0;width:100%;height:42px;padding:0 10px;gap:7px}
  .header .search input{width:100%;text-overflow:ellipsis}
  .header>.btn-dark{grid-column:3;grid-row:1;height:42px;padding:0 10px;gap:5px;margin-left:0}
  .header .mainnav{grid-column:1 / -1;min-width:0}
}

/* Highlight event names only; keep dates, prices and list numbers plain. */
.event-highlights li>a{
  background:var(--accent);color:var(--ink);padding:2px 3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-decoration:none;
}
.event-highlights li>a:hover{background:var(--accent2);text-decoration:underline;text-decoration-color:var(--ink)}

/* Pink weekday lettering only; no background or extra padding. */
.day.weekend .dw{color:#b52b8f;opacity:1}
.day.weekend.on .dw{color:var(--accent)}
a.day.weekend.on:hover .dw{color:#b52b8f}