/* Brand alignment. The six approved colours are defined once in styles.css.
   Original assets stay intact; footer partner logos use plain white ink. */

/* Keep the original charcoal canvas, as requested after reviewing the colour sample.
   Bigerside uses an installed copy until the official webfont file is supplied. */
@font-face {
  font-family: 'Bigerside Expanded';
  src: local('Bigerside Expanded'), local('BigersideExpanded-Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: local('Galano Grotesque'), local('GalanoGrotesque-Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/dm-sans-latin-variable-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --canvas: #0e0a08;
  --background: var(--canvas);
  --soot: var(--canvas);
  --serif: 'Bigerside Expanded', 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Galano Grotesque', 'DM Sans', Arial, sans-serif;
}

/* One family of surfaces across the hero, lineup and event details. */
body { background: var(--canvas); }
body::after { opacity: .025; animation: none; }
.hero { background: var(--canvas); }
.hero::after { background: linear-gradient(transparent, var(--canvas)); }
.hero-art { opacity: .38; mix-blend-mode: screen; filter: url('#hero-sun-clay'); }
.site-header { background: var(--canvas); }
.site-header::before { background: var(--canvas); }
.site-header::after { background: var(--brand-clay); box-shadow: none; }
.wordmark:hover .wordmark-logo,
.wordmark:focus-visible .wordmark-logo { filter: none; }
.hero h1:hover, .wordmark:hover { animation: none; }
.hero-venue-link, .hero-lineup { color: var(--brand-sand); }
.hero-kicker, .hero-date, .hero-footnote { color: var(--brand-blush); }
.hero-lineup i { color: var(--brand-clay); }

.countdown-strip { background: var(--brand-red); box-shadow: none; }
.countdown-strip::after { background: var(--story-grain); opacity: .08; }
.gig-notice { padding-top: 72px; padding-bottom: 0; }
.gig-paper { background: var(--brand-sand); color: var(--brand-deep); }
.gig-title, .gig-hindustani, .gig-loud { text-shadow: none; }
.gig-loud { color: var(--brand-red); }
.gig-ticket { background: var(--brand-sand); border-color: var(--brand-wine); box-shadow: none; }
.gig-ticket:hover { box-shadow: none; }
.gig-ticket::before { background: var(--brand-clay); }
.gig-ticket dt { color: var(--brand-wine); }
.gig-ticket dd, .gig-ticket-credit { color: var(--brand-deep); }
.gig-cone, .gig-glare, .gig-embers,
.fx-vignette, .fx-ash, .footer-embers, .footer-sparks, .footer-heat { display: none; }

#lineup, #lineup.is-film { background: var(--canvas); }
#lineup.is-film .lineup-stage { background: var(--canvas); }
#lineup .lineup-band, #lineup.is-film .lineup-band { background: var(--canvas); }
#lineup .lineup-note, #lineup .band-count { color: var(--brand-blush); }
#lineup .band-edge { color: var(--brand-blush); }
#lineup .band-heat, #lineup .print-duo { display: none; }
#lineup .print-photo img { filter: none; }
/* A muted clay watermark remains visible against charcoal without competing with the artist. */
#lineup .lineup-band > .band-seal {
  background: var(--brand-clay);
  opacity: .18;
  mix-blend-mode: normal;
}
#lineup.is-film .lineup-tail { background: var(--canvas); }
#lineup.is-film .lineup-film::before,
#lineup.is-film .lineup-film::after { background-color: var(--canvas); }
#lineup .lineup-progress-ember { background: var(--brand-clay); box-shadow: none; }

/* Every ticket action uses the same colour, typography, border, height and arrow.
   Only width changes to fit the available space on smaller screens. */
a.button.ticket-link,
.site-header a.button.ticket-link,
.hero a.button.ticket-link,
.gig-ticket a.button.ticket-link,
.tickets a.button.ticket-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  min-width: 0;
  padding: 15px 22px;
  border: 1px solid var(--brand-deep);
  border-radius: 0;
  background: var(--brand-clay);
  color: var(--canvas);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  translate: none;
  scale: 1;
  transition: background-color .2s ease, border-color .2s ease;
}
a.button.ticket-link::before, a.button.ticket-link::after { display: none; }
a.button.ticket-link:hover, a.button.ticket-link:focus-visible {
  background: var(--brand-sand);
  border-color: var(--brand-sand);
  color: var(--canvas);
  box-shadow: none;
  translate: none;
  scale: 1;
}
a.button.ticket-link:focus-visible {
  outline: 3px solid var(--brand-clay);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--brand-deep);
}
.ticket-link-arrow { font-size: 1.125rem; line-height: 1; }
.gig-ticket a.button.ticket-link { width: 100%; }

/* The illustrated ticket uses the official logo, never a typeset substitute. */
.tickets { background: var(--brand-deep); }
.tickets { border-block: 1px solid rgb(var(--brand-clay-rgb) / .4); }
.tickets-atmos { background: none; }
.tickets-atmos::before, .tickets-atmos::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.tickets-atmos::before {
  width: min(900px, 82vw);
  aspect-ratio: 1400 / 1396;
  left: 60%;
  top: 50%;
  translate: -50% -50%;
  background: var(--brand-clay);
  -webkit-mask: url('../assets/hero-sun.webp') center / contain no-repeat;
  mask: url('../assets/hero-sun.webp') center / contain no-repeat;
  mask-mode: luminance;
  opacity: .10;
}
.tickets-atmos::after {
  width: clamp(240px, 36vw, 520px);
  aspect-ratio: 1;
  left: -7%;
  bottom: -16%;
  rotate: -12deg;
  background: var(--brand-clay);
  -webkit-mask: url('../assets/seals/seal-bull.webp') center / contain no-repeat;
  mask: url('../assets/seals/seal-bull.webp') center / contain no-repeat;
  opacity: .07;
}
.tickets-glow, .tickets-smoke, .tickets-edge { display: none; }
#tickets-title { color: var(--brand-sand); text-shadow: none; }
.tickets-lede, .ticket-date, .ticket-credit { color: var(--brand-sand); }
.ticket-date::before { background: var(--brand-clay); box-shadow: none; }
.ticket-main { background: var(--brand-sand); }
.ticket-stub { background: var(--brand-sand); }
.ticket-foil { background: var(--brand-red); }
.ticket-foil-sheet { background: repeating-linear-gradient(122deg, var(--brand-wine), var(--brand-clay) 18%, var(--brand-sand) 30%, var(--brand-red) 50%); }
.ticket-holo, .ticket-glare, .ticket-glow, .ticket-burn { display: none; }
.ticket-wordmark {
  display: block;
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}
.ticket-official-logo {
  display: block;
  width: 42cqw;
  height: auto;
  max-width: 100%;
  padding: 0;
  background: none;
  filter: url('#ticket-logo-ink');
}
@container ticket (max-width: 520px) {
  .ticket-main { background: var(--brand-sand); }
  .ticket-official-logo { width: 64cqw; }
  .ticket-stamp { top: 6.5cqw; width: 25cqw; }
}

/* The event identity leads; production credits and event partners have separate rows. */
.footer { background: var(--canvas); }
.footer .footer-wordmark {
  width: 230px;
  max-width: 100%;
  font-size: inherit;
  line-height: 0;
  text-shadow: none;
}
.footer-event-logo { width: 100%; height: auto; }
.footer .footer-wordmark:is(:hover, :focus-visible, .is-misprint) {
  animation: none;
  translate: none;
  text-shadow: none;
}
.footer-kicker, .footer-when { color: var(--brand-blush); }
.footer-credit-group { margin: 40px 7% 0; }
.credit-group-label {
  margin-bottom: 14px;
  color: var(--brand-blush);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer .credits { margin: 0; }
.footer .credits--brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer .credits--partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer .credit-name { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.footer .credit-name--producer {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.footer .credit::before, .footer .credit::after { display: none; }
.footer .credit:hover > .eyebrow { color: var(--brand-blush); letter-spacing: .14em; }
.footer .credit:hover .credit-name :is(span, img) { translate: none; }
.footer .credit-name .credit-logo { outline: none; filter: brightness(0) invert(1); }
.footer .footer-bottom { margin-top: 12px; }

@media (max-width: 900px) {
  /* Hide scrollbar chrome from the first paint; touch and keyboard scrolling remain available. */
  :root { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  /* Tap feedback and a short spring on each toggle; no continuous animation. */
  .menu-toggle { transition: scale .18s ease; }
  .menu-toggle:active { scale: .96; }
  .fx-menu-armed .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
    animation: menu-button-open .48s var(--ease-out) both;
  }
  .fx-menu-armed .menu-toggle[aria-expanded="false"] .menu-toggle-icon {
    animation: menu-button-close .4s var(--ease-out) both;
  }
  html.js .site-header nav::before { background: var(--canvas); }
  html.js .site-header nav::after { display: none; }
  html.js .site-header nav > a.button.ticket-link { min-height: 52px; }
  /* Preserve the menu entrance after the shared booking-button styles above.
     The curtain takes .6s; its booking action appears only after it has landed. */
  html.js .site-header nav > a.nav-ticket {
    opacity: 0;
    visibility: hidden;
    translate: 0 42px;
    transition: opacity .2s ease, visibility 0s linear .2s, translate 0s linear .3s,
      background-color .2s ease, border-color .2s ease;
  }
  html.js .site-header:has(.menu-toggle[aria-expanded="true"]) nav > a.nav-ticket {
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: opacity .4s ease .62s, visibility 0s linear .62s,
      translate .65s var(--ease-out) .62s, background-color .2s ease, border-color .2s ease;
  }
  .footer .credits--partners .credit:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; padding-left: 22px; }
}
@keyframes menu-button-open {
  0% { scale: 1; }
  35% { scale: .82; }
  70% { scale: 1.12; }
  100% { scale: 1; }
}
@keyframes menu-button-close {
  0% { scale: 1; }
  45% { scale: .86; }
  75% { scale: 1.06; }
  100% { scale: 1; }
}
@media (max-width: 600px) {
  .tickets-atmos::before { width: 140vw; left: 50%; top: 44%; opacity: .08; }
  .tickets-atmos::after { width: 75vw; left: -18%; bottom: -5%; }
  .gig-notice { padding-top: 48px; }
  .footer-credit-group { margin-inline: 6%; }
  .footer .credits--brands, .footer .credits--partners { grid-template-columns: 1fr; }
  .footer .credit, .footer .credits--partners .credit:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 0;
  }
  .footer .credit:first-child { border-top: 0; }
  .footer .credit-name { flex-direction: row; align-items: center; }
  .footer .credit-group-label { font-size: .6875rem; }
  .tickets a.button.ticket-link { display: flex; width: 100%; }
  .footer .footer-wordmark { width: 200px; }
}