/* Phoenix Hondo livestream page. Scoped to body.page-live. */

body.page-live {
  background-color: #000;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 36%, #000 100%),
    url("/media/live/bg/bg-dirt-extend.webp?v=live-21");
  background-repeat: no-repeat;
  background-position: top center, top center;
  background-size: 100% 100%, 100% auto;
  color: #f4ecdf;
  overflow-x: clip;
}

/* Portrait pages are long and narrow, so the dirt tile would end
   and the overlay would already be black. Stretch one tile down the
   page and hold the fade until the bottom. */
@media (orientation: portrait) {
  body.page-live {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 78%, #000 100%),
      url("/media/live/bg/bg-dirt-extend.webp?v=live-21");
    background-size: 100% 100%, 100% 100%;
  }
}

body.page-live #watch-live,
body.page-live #tickets,
body.page-live #lineup,
body.page-live #social,
body.page-live #merch,
body.page-live #sms {
  scroll-margin-top: var(--hondo-nav-h, 104px);
}

body.page-live .live-band {
  padding: 40px 16px;
}

body.page-live .live-wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
}

body.page-live .live-band h1,
body.page-live .live-band h2 {
  margin: 0 0 12px;
  color: inherit;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.05;
}

body.page-live .live-kicker {
  margin: 0 0 8px;
  color: #d8a14f;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 18px;
  line-height: 1.2;
}

body.page-live .live-lede {
  max-width: 38rem;
  margin: 0;
  color: #f4ecdf;
  font-size: 16px;
  line-height: 1.45;
}

/* Portrait and phones use the vertical plate. The frame matches the
   file's aspect ratio, so cover shows the rider and the gate lockup
   with no crop and no stretch. Padding holds the copy below them.
   The mask lets the page dirt show through the lower dirt. */
body.page-live #watch-live {
  position: relative;
  isolation: isolate;
  color: #f4ecdf;
  background: transparent;
  padding-top: calc(100% * 1672 / 941 * 0.46);
}

body.page-live #watch-live::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 941 / 1672;
  pointer-events: none;
  background-color: transparent;
  background-image: url("/media/live/bg/bg-mobile-bullrider-chevygate-941.webp?v=live-21");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 68%);
}

body.page-live #watch-live .live-wrap {
  position: relative;
  z-index: 1;
}

body.page-live .live-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "kicker"
    "title"
    "presented"
    "lede";
  gap: 10px 28px;
  align-items: center;
  margin-bottom: 22px;
}

body.page-live #watch-live .live-kicker { grid-area: kicker; margin: 0; }
body.page-live #watch-live h1 {
  grid-area: title;
  margin: 0;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
body.page-live #watch-live .live-lede {
  grid-area: lede;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
body.page-live #watch-live .live-kicker {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

body.page-live .live-presented {
  grid-area: presented;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

body.page-live .live-presented-rule {
  flex: 0 0 auto;
  width: 2px;
  align-self: stretch;
  min-height: 64px;
  background: #d8a14f;
}

body.page-live .live-presented-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

body.page-live .live-presented-kicker {
  margin: 0;
  color: #f7f1e6;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 15px;
  line-height: 1;
}

body.page-live .live-presented img {
  display: block;
  width: min(480px, 100%);
  max-width: min(480px, 100%);
  min-width: 0;
  height: auto;
  background: none;
  /* VALLEY and CHEVROLET are black ink on a transparent plate.
     A light halo keeps those words visible on the dark dirt. No cream plate. */
  filter:
    drop-shadow(0 0 1px rgba(255, 250, 242, 0.95))
    drop-shadow(0 0 4px rgba(255, 244, 224, 0.88))
    drop-shadow(0 0 12px rgba(255, 236, 210, 0.5));
}

body.page-live #tickets {
  position: relative;
  isolation: isolate;
  color: #f4ecdf;
  background: transparent;
}

body.page-live #tickets .live-wrap {
  position: relative;
  z-index: 1;
}

body.page-live .live-tickets-head {
  display: block;
  margin: 0;
  text-align: center;
}

body.page-live .live-tickets-head h2 {
  flex: 0 0 auto;
  margin: 0;
  color: #f4ecdf;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

body.page-live .live-tickets-rule {
  flex: 1 1 48px;
  height: 2px;
  min-width: 32px;
  background: #b08a3c;
}

body.page-live .live-tickets-head img {
  flex: 0 1 340px;
  width: min(340px, 100%);
  max-width: 100%;
  min-width: 0;
  height: auto;
  background: none;
  filter:
    drop-shadow(0 0 1px rgba(255, 250, 242, 0.95))
    drop-shadow(0 0 4px rgba(255, 244, 224, 0.88))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

body.page-live .live-player-wrap {
  width: min(720px, 100%);
  margin: 18px auto 0;
}

body.page-live .live-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(200, 16, 46, 0.9);
  border-radius: 8px;
  background: rgba(12, 9, 8, 0.78);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

body.page-live .live-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.page-live .live-coming {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
}

body.page-live .live-coming-title {
  margin: 0;
  color: #f4ecdf;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
}

body.page-live .btn,
body.page-live .stubhub-cta {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.page-live .btn {
  min-height: 44px;
  height: auto;
  padding: 8px 16px;
}

body.page-live a:focus-visible,
body.page-live button:focus-visible {
  outline: 3px solid #272827;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #d8a14f;
}

body.page-live .live-band {
  position: relative;
}

body.page-live .live-band-cream {
  background: transparent;
  color: #f4ecdf;
}

body.page-live .live-band-cream h2,
body.page-live .live-band-ink h2,
body.page-live .live-band-rust h2 {
  color: inherit;
}

body.page-live .live-band-ink {
  background: transparent;
  color: #f4ecdf;
}

body.page-live .live-band-rust {
  background: transparent;
  color: #f4ecdf;
}

body.page-live .live-ticket-grid {
  display: grid;
  gap: 16px;
}

body.page-live .live-ticket {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  min-width: 0;
  padding: 0 0 12px;
  background: rgba(12, 9, 8, 0.78);
  color: #fff;
  border: 1px solid rgba(244, 236, 223, 0.22);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

body.page-live .live-ticket-date {
  grid-row: 1 / span 6;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 8px;
  background: #c8102e;
  color: #fff;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: clamp(16px, 3.4vw, 22px);
  line-height: 1.05;
  text-align: center;
  overflow-wrap: break-word;
}

body.page-live .live-ticket h3 {
  grid-column: 2;
  margin: 12px 12px 0 0;
  color: #fff;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.1;
  overflow-wrap: break-word;
}

body.page-live .live-ticket .btn {
  min-width: 0;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #c8102e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: #c8102e;
  color: #fff;
}

body.page-live .live-ticket .btn.gold {
  background: transparent;
  color: #fff;
  border-color: rgba(244, 236, 223, 0.75);
  font-size: 15px;
}

body.page-live .live-ticket .btn:hover {
  background: #9b0c23;
  color: #fff;
}

body.page-live .live-ticket .btn.gold:hover {
  background: #c8102e;
  color: #fff;
  border-color: #c8102e;
}

body.page-live .live-ticket-support,
body.page-live .live-ticket-note,
body.page-live .live-upgrade {
  grid-column: 2;
  margin: 0 12px 0 0;
}

body.page-live .live-ticket-support {
  font-size: 22px;
  line-height: 1.2;
}

body.page-live .live-ticket-note,
body.page-live .live-upgrade {
  font-size: 12px;
  line-height: 1.4;
}

body.page-live .live-ticket-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 12px 0 0;
}

body.page-live .stubhub-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  margin: 16px 0 0;
  padding: 24px 16px;
  box-sizing: border-box;
  background: rgba(12, 9, 8, 0.78);
  color: #fff;
  border: 1px solid rgba(200, 16, 46, 0.55);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

body.page-live .stubhub-logo-link {
  display: inline-flex;
  line-height: 0;
}

body.page-live .stubhub-logo-link img {
  width: auto;
  height: 48px;
  max-width: min(280px, 100%);
  object-fit: contain;
}

body.page-live .stubhub-copy {
  flex: 1 1 220px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
}

body.page-live .stubhub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  background: #f5eaff;
  color: #1b0045;
  font-family: "Inter", var(--sans, "Gotham Medium", Helvetica, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

body.page-live .stubhub-cta:hover,
body.page-live .stubhub-cta:focus-visible {
  background: #6535be;
  color: #fff;
}

body.page-live .live-note {
  margin: 0 0 16px;
  max-width: 42rem;
  font-size: 16px;
  line-height: 1.45;
}

body.page-live .live-day-graphic,
body.page-live .live-event-graphic {
  width: 100%;
  height: auto;
  margin: 0 0 12px;
}

body.page-live .live-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.page-live .live-event {
  min-width: 0;
  padding: 0;
  background: rgba(12, 9, 8, 0.78);
  color: #f4ecdf;
  border: 1px solid rgba(244, 236, 223, 0.22);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

body.page-live .live-event h4,
body.page-live .live-event h5,
body.page-live .live-event summary {
  margin: 0;
  color: #f4ecdf;
}

body.page-live .live-event h4 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.15;
}

body.page-live .live-event h5 {
  margin: 12px 0 6px;
  font-family: var(--sans, "Gotham Medium", Helvetica, sans-serif);
  font-size: 13px;
  line-height: 1.3;
}

body.page-live .live-names {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-live .live-names li {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

body.page-live .live-ig-card,
body.page-live .live-merch-card,
body.page-live .live-sms-card {
  min-width: 0;
}

body.page-live .live-ig-card {
  max-width: 28rem;
  padding: 24px 20px;
  background: #fff;
  color: #272827;
  border: 1px solid rgba(104, 39, 7, 0.25);
}

body.page-live .live-ig-handle {
  margin: 0 0 12px;
  color: #682707;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 32px;
  line-height: 1.1;
}

body.page-live .live-ig-follow {
  display: table;
  margin: 0 auto 20px;
}

body.page-live .live-ig-slot {
  width: min(540px, 100%);
  margin: 0 auto;
}

body.page-live .live-ig-embed {
  min-height: 573px;
}

body.page-live .live-ig-frame {
  display: block;
  width: 100%;
  height: 573px;
  border: 0;
  background: transparent;
  opacity: 0;
}

body.page-live .live-ig-embed.is-ready {
  min-height: 0;
}

body.page-live .live-ig-embed.is-ready .live-ig-frame {
  opacity: 1;
  background: #fff;
}

body.page-live .live-ig-embed[hidden],
body.page-live .live-ig-grid[hidden] {
  display: none !important;
}

body.page-live .live-ig-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

body.page-live .live-ig-post {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  color: #f4ecdf;
  text-decoration: none;
  background: #272827;
  border: 1px solid rgba(216, 161, 79, 0.45);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

body.page-live .live-ig-post img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1270 / 678;
  object-fit: cover;
  background: #272827;
}

body.page-live .live-ig-title,
body.page-live .live-ig-meta {
  margin: 0;
  padding: 0 16px;
}

body.page-live .live-ig-title {
  padding-top: 14px;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 26px;
  line-height: 1.1;
}

body.page-live .live-ig-meta {
  padding-bottom: 16px;
  color: #d8a14f;
  font-size: 15px;
  line-height: 1.35;
}

body.page-live .live-ig-title:last-child,
body.page-live .live-ig-post .a11y-hidden {
  margin: 0;
}

body.page-live .live-ig-post .live-ig-title:nth-last-child(2) {
  padding-bottom: 16px;
}

body.page-live .live-ig-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: #d8a14f;
  color: #272827;
  font-family: var(--sans, "Gotham Medium", Helvetica, sans-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.page-live .live-merch-grid {
  display: grid;
  gap: 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

body.page-live .live-merch-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: #f4ecdf;
  text-decoration: none;
  background: #1a1916;
  border: 1px solid rgba(216, 161, 79, 0.4);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

body.page-live .live-merch-art {
  display: block;
  width: 100%;
  height: auto;
  min-height: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #272827;
}

body.page-live .live-merch-label {
  display: block;
  padding: 16px;
  color: #f4ecdf;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 28px;
  line-height: 1.1;
}

body.page-live .live-sms-card {
  position: relative;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 20px 24px 28px;
  border-radius: 4px;
  background: #242424;
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

body.page-live .live-sms-logo {
  width: 128px;
  height: 82px;
  margin: 0 auto 12px;
  object-fit: contain;
}

body.page-live .live-sms-copy,
body.page-live .live-sms-note {
  margin: 0 0 14px;
  color: #f4ecdf;
  font-size: 16px;
  line-height: 1.45;
}

body.page-live .mc-sms-form {
  display: grid;
  gap: 12px;
  margin: 0;
  text-align: left;
}

body.page-live .mc-sms-form .live-sms-copy {
  text-align: center;
}

body.page-live .live-sms-label {
  margin: 0;
  color: #f4ecdf;
  font-size: 14px;
  line-height: 1.3;
}

body.page-live .mc-sms-form input[type="tel"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(216, 161, 79, 0.75);
  border-radius: 4px;
  background: #100c0a;
  color: #f4ecdf;
  font: inherit;
  font-size: 16px;
}

body.page-live .live-sms-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.page-live .live-sms-ack {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  color: #f4ecdf;
  font-size: 13px;
  line-height: 1.45;
}

body.page-live .live-sms-ack input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

body.page-live .live-sms-ack label,
body.page-live .live-sms-links {
  margin: 0;
  min-width: 0;
}

body.page-live .live-sms-links {
  grid-column: 2;
}

body.page-live .live-sms-ack a {
  color: #e7c56d;
  font-size: inherit;
  text-decoration: underline;
}

body.page-live .live-sms-status,
body.page-live .mc-sms-status {
  min-height: 1.4em;
  margin: 0;
  color: #f4ecdf;
  font-size: 14px;
  line-height: 1.4;
}

body.page-live .mc-sms-status:not(:empty) { color: #ffb4b4; }

body.page-live .mc-sms-form .btn {
  justify-self: center;
}

@media (max-width: 700px) {
  body.page-live .live-tickets-head img {
    flex-basis: 280px;
    width: min(280px, 100%);
  }
}

@media (min-width: 768px) {
  body.page-live .live-band { padding: 56px 24px; }
  body.page-live .live-merch-grid { grid-template-columns: 1fr 1fr; }
  body.page-live .live-ig-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.page-live .stubhub-banner { padding: 32px 48px; gap: 48px; }
}

@media (min-width: 860px) {
  body.page-live .live-hero-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    grid-template-areas:
      "kicker presented"
      "title presented"
      "lede presented";
  }
}

@media (min-width: 1100px) {
  body.page-live .live-band { padding: 72px 24px; }
  body.page-live .live-ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-live .live-merch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Landscape tablets and desktops use the wide plate. 768 portrait
   stays on the vertical file; 768 landscape switches here. */
@media (orientation: landscape) and (min-width: 768px), (min-width: 1200px) {
  body.page-live #watch-live {
    padding-top: calc(100% * 941 / 1671 * 0.8);
  }
  body.page-live #watch-live::before {
    aspect-ratio: 1671 / 941;
    background-image: url("/media/live/bg/bg-desktop-bullrider-chevygate-v2-1280.webp?v=live-21");
    background-position: top center;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
}

@media (min-width: 1280px) {
  body.page-live #watch-live::before {
    background-image: url("/media/live/bg/bg-desktop-bullrider-chevygate-v2-1671.webp?v=live-21");
  }
}

@media (max-width: 700px) {
  body.page-live .stubhub-banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.page-live .stubhub-logo-link img { height: 32px; }
  body.page-live .stubhub-copy { text-align: center; }
}

body.page-live.page-event .flat-foot {
  background: transparent;
  border-top: 1px solid rgba(200, 16, 46, 0.45);
}

body.page-live {
  --hondo-nav-h: 104px;
}

body.page-live .hondo-nav-bar {
  height: var(--hondo-nav-h);
  min-height: var(--hondo-nav-h);
  max-height: var(--hondo-nav-h);
  flex-wrap: nowrap;
  align-content: center;
  gap: 8px 16px;
  background: #100c0a;
  border-bottom: 1px solid rgba(200, 16, 46, 0.65);
  box-shadow: none;
}

body.page-live .live-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.page-live .hondo-nav-logo img {
  width: 84px;
  height: 54px;
}

body.page-live .live-brand { order: 1; position: relative; z-index: 2; }
body.page-live .hondo-nav-toggle {
  order: 2;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  position: relative;
  z-index: 2;
  border: 1px solid #c9a24a;
  border-radius: 0;
  background: rgba(10, 8, 6, 0.92);
}

body.page-live .maverick-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.page-live .maverick-banner picture,
body.page-live .maverick-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-live .maverick-leader {
  --leader-gold: #c9a24a;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 168px);
  margin: 0;
  padding: 10px 14px 11px;
  pointer-events: auto;
  border: 1px solid var(--leader-gold);
  border-top-color: transparent;
  background: rgba(10, 8, 6, 0.92);
  color: #f4efe6;
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
}

body.page-live .maverick-leader::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--leader-gold) 0, var(--leader-gold) calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), var(--leader-gold) calc(50% + 10px));
}

body.page-live .maverick-star {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -58%);
  pointer-events: none;
}

body.page-live .maverick-star path {
  fill: var(--leader-gold);
}

body.page-live .maverick-leader:hover,
body.page-live .maverick-leader:focus-visible {
  --leader-gold: #e7c56d;
  color: #fff8ea;
  box-shadow: 0 0 14px rgba(231, 197, 109, 0.45);
}

body.page-live .maverick-leader:focus-visible {
  outline: 2px solid #e7c56d;
  outline-offset: 3px;
}

@media (min-width: 720px) {
  body.page-live .maverick-leader {
    max-width: calc(100% - 220px);
    padding: 13px 28px 14px;
    font-size: 20px;
    letter-spacing: 0.16em;
  }

  body.page-live .maverick-star {
    width: 18px;
    height: 18px;
  }
}

/* Desktop bar only, from 1024px: the logo sits on the plain bar, and the
   same full-bleed crop starts just to its right. */
@media (min-width: 1024px) {
  body.page-live { --live-banner-inset: calc(20px + 108px + 16px); }
  body.page-live .maverick-banner {
    justify-content: flex-end;
  }
  body.page-live .maverick-leader {
    margin-right: calc(20px + 44px + 12px);
  }
  body.page-live .maverick-banner picture {
    left: var(--live-banner-inset);
    width: auto;
    overflow: hidden;
  }
  body.page-live .maverick-banner picture img {
    left: calc(-1 * var(--live-banner-inset));
    width: calc(100% + var(--live-banner-inset));
    max-width: none;
    object-position: left center;
  }
}

body.page-live #watch-live .live-wrap {
  text-align: center;
}

body.page-live .live-hero-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: clamp(32px, 8vw, 68px);
  line-height: 0.92;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

body.page-live .live-hero-live {
  display: inline-block;
  padding: 2px 12px 5px;
  background: #c8102e;
  color: #fff;
  text-shadow: none;
  line-height: 1;
}

body.page-live .live-hero-sub,
body.page-live .live-section-sub {
  margin: 10px 0 12px;
  color: #f4ecdf;
  font-family: var(--sans, "Gotham Medium", Helvetica, sans-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

body.page-live .live-hero-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

body.page-live #lineup .live-note {
  text-align: center;
}

body.page-live #tickets h2,
body.page-live #lineup h2 {
  text-align: center;
}

body.page-live .live-hero-sub::before,
body.page-live .live-hero-sub::after {
  content: "";
  width: 28px;
  height: 2px;
  background: #c8102e;
  flex: 0 0 auto;
}

body.page-live .live-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 4px 10px;
  background: #c8102e;
  color: #fff;
  font-family: var(--sans, "Gotham Medium", Helvetica, sans-serif);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

body.page-live .live-event summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

body.page-live .live-event summary::-webkit-details-marker {
  display: none;
}

body.page-live .ath-glyph {
  flex: 0 0 auto;
}

body.page-live .ath-name {
  font-family: var(--display, "Cheddar Gothic Sans", Impact, sans-serif);
  font-size: 18px;
  line-height: 1.1;
  text-align: left;
}

body.page-live .ath-count {
  margin-left: auto;
  color: #f4ecdf;
  font-size: 14px;
}

body.page-live .ath-count::before { content: "("; }
body.page-live .ath-count::after { content: ")"; }

body.page-live .live-event summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

body.page-live .live-event[open] summary::after {
  transform: rotate(-135deg);
}

body.page-live .live-event .live-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 0 14px 14px;
  color: #f4ecdf;
}

body.page-live .live-merch-card,
body.page-live .live-sms-card,
body.page-live .live-ig-post {
  border-color: rgba(200, 16, 46, 0.45);
}

@media (min-width: 800px) {
  body.page-live { --hondo-nav-h: 104px; }
  body.page-live .hondo-nav-bar {
    flex-wrap: nowrap;
    height: var(--hondo-nav-h);
  }
  body.page-live .hondo-nav-logo img { width: 108px; height: 70px; }
  body.page-live .live-brand,
  body.page-live .hondo-nav-toggle { order: 0; }
  body.page-live .hondo-nav-toggle { margin-left: auto; }
  body.page-live .live-band h1.live-hero-title {
    flex-direction: column;
    gap: 2px 10px;
    font-size: clamp(32px, 2.8vw, 44px);
    line-height: 0.92;
  }
  body.page-live .live-hero-sub { margin-top: 6px; }
  body.page-live .live-hero-words { display: flex; flex-direction: column; }
}

/* The desktop bar file is a tight crop that cuts THE and AWARD.
   From 1024px the full buckle is drawn instead, scaled to the bar
   so none of that text is clipped. */
@media (min-width: 1024px) {
  body.page-live { --hondo-nav-h: 160px; }
  body.page-live .maverick-banner {
    background-image: url("/media/live/maverick-buckle.webp?v=live-25");
    background-repeat: no-repeat;
    background-size: auto calc(100% - 20px);
    background-position: var(--live-banner-inset) center;
  }
  body.page-live .maverick-banner picture {
    display: none;
  }
}

@media (min-width: 860px) {
  body.page-live .live-events {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #c8102e rgba(12, 9, 8, 0.72);
  }
  body.page-live .live-events::-webkit-scrollbar {
    height: 8px;
  }
  body.page-live .live-events::-webkit-scrollbar-track {
    background: rgba(12, 9, 8, 0.72);
    border-radius: 8px;
  }
  body.page-live .live-events::-webkit-scrollbar-thumb {
    background: #c8102e;
    border-radius: 8px;
  }
  body.page-live .live-event {
    flex: 0 0 220px;
  }
  body.page-live .live-event summary::after { display: none; }
  body.page-live .ath-count { margin-left: 0; }
  body.page-live .live-event summary { flex-wrap: wrap; }
  body.page-live .live-event .live-names { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  body.page-live .live-ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-live .live-ticket {
    grid-template-columns: 1fr;
    padding-bottom: 16px;
  }
  body.page-live .live-ticket-date {
    grid-row: auto;
    grid-column: 1;
    justify-content: flex-start;
    padding: 10px 16px;
    font-size: 22px;
    text-align: left;
  }
  body.page-live .live-ticket h3,
  body.page-live .live-ticket-support,
  body.page-live .live-ticket-note,
  body.page-live .live-ticket-actions,
  body.page-live .live-upgrade {
    grid-column: 1;
    margin-right: 16px;
    margin-left: 16px;
  }
}

/* Wide plate: one-line title in the dark band above Chase Field,
   player in the gap between the rider and the gate. */
@media (orientation: landscape) and (min-width: 768px), (min-width: 1200px) {
  body.page-live #watch-live {
    container-type: size;
    height: calc(100svh - var(--hondo-nav-h));
    padding: 0;
    overflow: hidden;
  }
  body.page-live #watch-live::before {
    right: 0;
    height: auto;
    aspect-ratio: 1671 / 941;
    background-size: 100% auto;
    background-position: top center;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  }
  body.page-live #watch-live .live-wrap {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
  body.page-live #watch-live .live-hero-copy {
    position: absolute;
    top: 8px;
    left: 50%;
    width: max-content;
    max-width: 62cqi;
    transform: translateX(-50%);
    text-align: center;
  }
  body.page-live #watch-live h1.live-hero-title {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    font-size: clamp(18px, 1.7vw, 30px);
    line-height: 1;
  }
  body.page-live #watch-live .live-hero-words {
    display: inline-flex;
    flex-direction: row;
    gap: 0.28em;
  }
  body.page-live #watch-live .live-hero-live {
    padding: 2px 8px 3px;
  }
  body.page-live #watch-live .live-hero-sub {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 4px auto 0;
    font-size: 11px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  body.page-live #watch-live .live-hero-sub::before,
  body.page-live #watch-live .live-hero-sub::after {
    display: none;
  }
  body.page-live #watch-live .live-player-wrap {
    position: absolute;
    top: calc(100cqi * 941 / 1671 * 0.33);
    left: 50%;
    width: min(22.5cqi, 400px);
    margin: 0;
    transform: translateX(-50%);
  }
  body.page-live #watch-live .live-player-frame {
    height: auto;
    max-height: none;
  }
  body.page-live #watch-live .live-coming {
    gap: 10px;
    padding: 28px 12px 12px;
  }
  body.page-live #watch-live .live-coming-title {
    font-size: clamp(16px, 1.4vw, 26px);
  }
}

/* Desktop plate only, from 1024px. The player is the 16:9 block, half the
   hero wide, centered horizontally (left 50% + translateX(-50%)), just
   under the title. The width shrinks around that center when the 16:9 box
   would run past the hero. */
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  body.page-live #watch-live .live-player-wrap {
    --live-player-top: calc(43px + clamp(18px, 1.7vw, 30px));
    top: var(--live-player-top);
    left: 50%;
    width: min(50%, calc((100svh - var(--hondo-nav-h) - var(--live-player-top) - 8px) * 16 / 9));
    max-width: none;
  }
}

/* Portrait phones: the title and the whole player sit on the lower
   dirt, inside the first screen, with the rider and the gate lockup
   still visible above them. */
@media (orientation: portrait) and (max-width: 799px) {
  body.page-live { --hondo-nav-h: 104px; }
  body.page-live .hondo-nav-bar { height: var(--hondo-nav-h); min-height: var(--hondo-nav-h); max-height: var(--hondo-nav-h); }
  body.page-live .hondo-nav-logo img { width: 70px; height: 46px; }
  body.page-live .hondo-nav-bar { gap: 2px 8px; padding: 2px 12px; }
}

@media (orientation: portrait) and (max-width: 1199px) {
  body.page-live #watch-live {
    height: calc(100svh - var(--hondo-nav-h));
    padding: 0;
    overflow: hidden;
  }
  body.page-live #watch-live .live-wrap {
    position: absolute;
    top: 232px;
    right: 12px;
    left: 12px;
    width: auto;
    margin: 0;
  }
  body.page-live #watch-live h1.live-hero-title {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    font-size: clamp(22px, 6.4vw, 32px);
    line-height: 1;
  }
  body.page-live #watch-live .live-hero-sub {
    margin: 3px 0 0;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  body.page-live #watch-live .live-hero-sub::before,
  body.page-live #watch-live .live-hero-sub::after {
    width: 16px;
  }
  body.page-live #watch-live .live-player-wrap {
    width: min(420px, 100%);
    margin: 8px auto 0;
  }
  body.page-live #watch-live .live-coming {
    gap: 8px;
    padding: 22px 12px 12px;
  }
  body.page-live #watch-live .live-coming-title {
    font-size: clamp(16px, 4.6vw, 24px);
  }
}

/* Desktop hero (Al t1169u/t1170u, every wide-plate size: landscape >=768
   and anything >=1200). Title group just under the Chase Field sign.
   Phones/portrait and 720-767 landscape keep their stacked layouts.
   R4 (Al's mockup al-mockup-r4.png, 1671 wide, hero 801 tall): the
   framed player is 35.8% of the hero wide, its top at 47.9% of the
   hero height = 22.96% of the hero width (the plate scales with the
   width, so cqi keeps it over the dirt below the rider at every
   aspect ratio). Its RIGHT edge stays pinned 16px left of the padded
   Chevrolet logo box (x 1095/1671 = 65.53% of the hero width), so the
   logo is always fully visible. If the bottom would pass the fold,
   the width shrinks (right edge and top stay put) so the frame ends
   >= 12px above innerHeight. Bronze rounded border + shadow as in the
   mockup. */
@media (orientation: landscape) and (min-width: 768px), (min-width: 1200px) {
  body.page-live #watch-live .live-wrap {
    --live-r4-right: calc(65.53cqi - 16px);
    --live-r4-top: 22.96cqi;
    --live-r4-w: min(35.8cqi, calc((100cqb - 22.96cqi - 12px) * 16 / 9));
  }
  body.page-live #watch-live .live-hero-copy {
    top: 14cqi;
  }
  body.page-live #watch-live .live-player-wrap {
    --live-player-top: var(--live-r4-top);
    top: var(--live-player-top);
    left: calc(var(--live-r4-right) - var(--live-r4-w));
    width: var(--live-r4-w);
    max-width: none;
    margin: 0;
    transform: none;
  }
  body.page-live #watch-live .live-player-frame {
    border: 4px solid #a86f3c;
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgba(240, 214, 184, 0.6),
      0 0 0 1px rgba(58, 28, 10, 0.9),
      0 18px 40px rgba(0, 0, 0, 0.6);
  }
}

/* Tablet/portrait (iPad-class, width >=720 and taller than wide): keep the
   phone hero model so the video sits on the dirt below the cattle gate and
   the Chevrolet lockup stays fully visible, but use the desktop header
   (160px bar, full buckle, logo on the plain bar) instead of the cramped
   tablet crop. The phone wrap's 232px top is scaled with width (232/390)
   so it stays below the gate as the vertical plate grows. Phones (<720)
   and desktop landscape are unchanged. */
@media (min-width: 720px) and (orientation: portrait) {
  body.page-live {
    --live-banner-inset: calc(20px + 108px + 16px);
    --hondo-nav-h: 160px;
  }
  body.page-live .hondo-nav-bar {
    height: var(--hondo-nav-h);
    min-height: var(--hondo-nav-h);
    max-height: var(--hondo-nav-h);
    gap: 8px 16px;
    padding: 0 20px;
  }
  body.page-live .hondo-nav-logo img { width: 108px; height: 70px; }
  body.page-live .live-brand,
  body.page-live .hondo-nav-toggle { order: 0; }
  body.page-live .hondo-nav-toggle { margin-left: auto; }
  body.page-live .maverick-banner {
    justify-content: flex-end;
    background-image: url("/media/live/maverick-buckle.webp?v=live-25");
    background-repeat: no-repeat;
    background-size: auto calc(100% - 20px);
    background-position: var(--live-banner-inset) center;
  }
  body.page-live .maverick-leader {
    margin-right: calc(20px + 44px + 12px);
  }
  body.page-live .maverick-banner picture {
    display: none;
  }
  body.page-live #watch-live {
    container-type: inline-size;
  }
  body.page-live #watch-live .live-wrap {
    top: calc(100cqi * 232 / 390);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.page-live) { scroll-behavior: auto; }
  body.page-live .live-player-frame,
  body.page-live .live-merch-card,
  body.page-live .stubhub-cta {
    transition: none;
    animation: none;
  }
}