/* Individual events: approved Headliner Bill mockup, adapted to the shared site shell. */
.hb {
    --hb-ink: #0a0a0b;
    --hb-bg: var(--arena-void);
    --hb-media: #141416;
    --hb-disabled: #1b1b1e;
    --hb-coal: var(--arena-surface);
    --hb-coal-2: var(--arena-elevated);
    --hb-line: rgba(255, 255, 255, 0.1);
    --hb-red: #c02026;
    --hb-red-deep: #8f151a;
    --hb-red-glow: rgba(192, 32, 38, 0.32);
    --hb-white: #fff;
    --hb-mute: rgba(255, 255, 255, 0.7);
    --hb-faint: rgba(255, 255, 255, 0.45);
    --hb-display: 'League Gothic', 'Impact', sans-serif;
    --hb-text: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --hb-header: 72px;
    --hb-nav: 64px;
    --hb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }


  .hb, .hb *, .hb *::before, .hb *::after { box-sizing: border-box; }
  .hb {
    margin: 0;
    padding-top: var(--hb-header);
    background: var(--hb-bg);
    font-family: var(--hb-text);
    font-size: 18px;
    line-height: 1.45;
    color: var(--hb-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  .hb :where(a) { color: inherit; }
  .hb a:focus-visible,
  .hb button:focus-visible {
    outline: 3px solid var(--hb-white);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .hb :where(img) { display: block; max-width: 100%; height: auto; }
  .hb :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
  .hb :where(ul, ol) { list-style: none; }

  .hb .hb-wrap { width: min(1216px, calc(100% - 64px)); margin-inline: auto; }

  /* ---------- Stage: arena-black atmosphere behind the bill ---------- */
  .hb .hb-stage {
    position: relative;
    padding: 12px 0 104px;
    background:
      radial-gradient(900px 620px at 18% -6%, var(--hb-red-glow), transparent 62%),
      radial-gradient(700px 520px at 96% 4%, rgba(255, 255, 255, 0.05), transparent 60%),
      linear-gradient(180deg, var(--arena-dark) 0%, var(--hb-bg) 640px);
  }

  .hb .hb-crumb { margin-bottom: 10px; }
  .hb .hb-crumb a {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; color: var(--hb-mute);
    transition: color 160ms ease;
  }
  .hb .hb-crumb a:hover { color: var(--hb-white); }
  .hb .hb-crumb svg { width: 16px; height: 16px; transition: transform 160ms ease; }
  .hb .hb-crumb a:hover svg { transform: translateX(-3px); }

  .hb .hb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "poster rail" "body rail";
    column-gap: 44px;
    align-items: start;
  }
  .hb .hb-postercol { grid-area: poster; }
  .hb .hb-rail { grid-area: rail; align-self: start; position: sticky; top: var(--hb-rail-top, calc(var(--hb-header) + 24px)); }
  .hb .hb-body { grid-area: body; }

  /* ---------- The bill (poster) ---------- */
  .hb .hb-posterq { container-type: inline-size; }
  .hb .hb-poster {
    --pad: 5.4cqi;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--pad) var(--pad) 0;
    background:
      radial-gradient(120% 90% at 18% 8%, #d0272d 0%, var(--hb-red) 46%, #a3191e 100%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    animation: hb-drop 900ms var(--hb-ease) both;
  }
  .hb .hb-poster::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image: var(--wwp-coach-grid-image);
    background-size: var(--wwp-coach-grid-size);
    -webkit-mask-image: var(--wwp-coach-grid-mask-left);
    mask-image: var(--wwp-coach-grid-mask-left);
    pointer-events: none;
  }
  /* print keyline, like a pasted gig bill */
  .hb .hb-poster::after {
    content: "";
    position: absolute; inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none; z-index: -1;
  }

  .hb .hb-poster__top {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
    font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
    animation: hb-rise 700ms var(--hb-ease) 120ms both;
  }
  .hb .hb-presents { display: inline-flex; align-items: center; gap: 12px; }
  .hb .hb-presents img { width: 44px; height: 44px; }
  .hb .hb-partner { color: rgba(255, 255, 255, 0.82); }

  .hb .hb-billgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27cqi;
    grid-template-rows: auto auto auto;
    column-gap: 3.5cqi;
    margin-top: 1cqi;
    padding-bottom: 2.6cqi;
  }
  .hb .hb-bill {
    grid-column: 1 / -1; grid-row: 1 / 3;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
    font: inherit; margin: 0;
  }
  .hb .hb-bill__head-box { grid-column: 1 / -1; grid-row: 1; }
  .hb .hb-fitbox { display: block; width: 100%; line-height: 0; }
  .hb .hb-fit {
    --fit: 1;
    display: inline-block; white-space: nowrap; vertical-align: top;
    font-family: var(--hb-display); font-weight: 400; text-transform: uppercase;
    line-height: 0.84; letter-spacing: 0.005em;
  }
  .hb .hb-bill__head { font-size: 21cqi; line-height: 0.8; color: var(--hb-white); text-shadow: 0 6px 30px rgba(80, 0, 4, 0.35); }
  .hb .hb-bill__head-box { animation: hb-rise 800ms var(--hb-ease) 220ms both; }

  .hb .hb-bill__sub-box { grid-column: 1; grid-row: 2; margin-top: 1.4cqi; animation: hb-rise 800ms var(--hb-ease) 320ms both; }
  .hb .hb-bill__sub { font-size: 9.6cqi; color: var(--hb-ink); line-height: 0.9; }

  .hb .hb-guest { grid-column: 1; grid-row: 3; margin: 2.2cqi 0 0; animation: hb-rise 800ms var(--hb-ease) 440ms both; }
  .hb .hb-guest__with {
    display: flex; align-items: center; gap: 14px;
    font-weight: 700; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase;
    margin-bottom: 0.9cqi;
  }
  .hb .hb-guest__with::before, .hb .hb-guest__with::after { content: ""; height: 2px; background: rgba(255, 255, 255, 0.7); flex: 1; }
  .hb .hb-guest__with::before { flex: 0 0 22px; }
  .hb .hb-guest__name { font-size: 12cqi; color: var(--hb-white); }

  /* hero object: the beanie in a white circle with a red ring, as on the Events hub ticket */
  .hb .hb-merch { grid-column: 2; grid-row: 2 / 4; align-self: center; justify-self: center; margin: 0; text-align: center; animation: hb-stamp 900ms var(--hb-ease) 560ms both; }
  .hb .hb-disc { width: 24cqi; }
  .hb .hb-disc__face {
    position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff;
    border: max(4px, 0.75cqi) solid var(--hb-red);
    box-shadow: 0 0 0 max(2px, 0.38cqi) rgba(255, 255, 255, 0.95), 0 22px 40px -14px rgba(40, 0, 0, 0.75);
    transform: rotate(-10deg);
  }
  .hb .hb-disc__face img {
    position: absolute; left: 50%; top: 52%; width: 124%; max-width: none;
    transform: translate(-50%, -50%);
  }
  .hb .hb-merch figcaption {
    margin-top: 14px;
    font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
  }

  /* matchup band */
  .hb .hb-match {
    position: relative;
    margin: 0 calc(var(--pad) * -1);
    padding: 21px var(--pad) 14px;
    background: var(--hb-bg);
    clip-path: polygon(0 16px, 100% 0, 100% 100%, 0 100%);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.4cqi;
    animation: hb-rise 800ms var(--hb-ease) 640ms both;
  }
  .hb .hb-team { display: flex; align-items: center; gap: 1.6cqi; }
  .hb .hb-team--home { justify-content: flex-end; }
  .hb .hb-team--away { justify-content: flex-start; }
  .hb .hb-team img { width: 10.5cqi; height: auto; aspect-ratio: 3 / 2; }
  .hb .hb-team__name { display: grid; line-height: 1; }
  .hb .hb-team__name small { font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-faint); }
  .hb .hb-team__name b { font-family: var(--hb-display); font-weight: 400; font-size: 5.6cqi; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }
  .hb .hb-team--away .hb-team__name { text-align: left; }
  .hb .hb-team--home .hb-team__name { text-align: right; }
  .hb .hb-vs {
    display: grid; place-items: center;
    width: 6.4cqi; height: 6.4cqi; min-width: 40px; min-height: 40px; border-radius: 50%;
    background: var(--hb-red); color: var(--hb-white);
    font-family: var(--hb-display); font-size: max(20px, 3cqi); text-transform: uppercase; line-height: 1;
  }

  /* ---------- Rail: the ticket ---------- */
  .hb .hb-ticket {
    container-type: inline-size;
    position: relative;
    background: linear-gradient(180deg, var(--hb-coal-2), var(--hb-coal));
    border: 1px solid var(--hb-line);
    border-top: 4px solid var(--hb-red);
    padding: 20px 24px 20px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    animation: hb-slide 800ms var(--hb-ease) 300ms both;
  }
  .hb .hb-ticket__status {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--hb-white);
    padding: 5px 10px 4px; border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .hb .hb-ticket__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hb-white); box-shadow: 0 0 0 3px var(--hb-red); }

  .hb .hb-ticket__date { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; row-gap: 6px; }
  .hb .hb-ticket__dow { align-self: center; font-weight: 700; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-mute); }
  .hb .hb-ticket__date .hb-ticket__status { justify-self: end; }
  .hb .hb-ticket__md { font-family: var(--hb-display); font-size: 80px; line-height: 0.86; text-transform: uppercase; }
  .hb .hb-ticket__yr { font-family: var(--hb-display); font-size: 34px; line-height: 1; color: var(--hb-faint); padding-bottom: 4px; }

  .hb .hb-venue { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 10px; font-weight: 600; font-size: 19px; line-height: 1.2; }
  .hb .hb-venue span { font-weight: 500; font-size: 16px; color: var(--hb-mute); }

  /* game-day schedule: a short timeline that ends at puck drop */
  .hb .hb-sched { position: relative; display: grid; gap: 7px; margin-top: 14px; }
  .hb .hb-sched::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; background: rgba(255, 255, 255, 0.16); }
  .hb .hb-sched > div { position: relative; display: grid; grid-template-columns: 98px 1fr; gap: 10px; align-items: baseline; padding-left: 22px; }
  .hb .hb-sched > div::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
    background: var(--hb-coal); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  .hb .hb-sched dt { grid-column: 2; grid-row: 1; font-weight: 500; font-size: 17px; line-height: 1.2; color: var(--hb-mute); }
  .hb .hb-sched dd { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 19px; line-height: 1.2; white-space: nowrap; }
  .hb .hb-sched dd small { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--hb-faint); }
  .hb .hb-sched .is-puck::before { background: var(--hb-red); box-shadow: 0 0 0 2px var(--hb-white); }
  .hb .hb-sched .is-puck dt { font-weight: 700; color: var(--hb-white); }

  /* add to calendar: a link under the schedule that opens a small menu */
  .hb .hb-cal { position: relative; margin-top: 12px; padding-left: 22px; }
  .hb .hb-cal__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--hb-text); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--hb-white);
    text-decoration: underline; text-decoration-color: var(--hb-red); text-decoration-thickness: 2px; text-underline-offset: 4px;
  }
  .hb .hb-cal__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .hb .hb-cal__btn:hover { text-decoration-color: var(--hb-white); }
  .hb .hb-cal__menu {
    position: absolute; left: 22px; top: calc(100% + 8px); z-index: 5; min-width: 210px; padding: 6px 0;
    background: #222226; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }
  .hb .hb-cal__menu[hidden] { display: none; }
  .hb .hb-cal__menu a { display: block; padding: 9px 16px; font-weight: 600; font-size: 16px; text-decoration: none; }
  .hb .hb-cal__menu a:hover, .hb .hb-cal__menu a:focus-visible { background: rgba(255, 255, 255, 0.08); }

  .hb .hb-perf { position: relative; height: 1px; margin: 14px -24px 12px; border-top: 2px dashed rgba(255, 255, 255, 0.16); }
  .hb .hb-perf::before, .hb .hb-perf::after {
    content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--hb-bg); border: 1px solid var(--hb-line);
  }
  .hb .hb-perf::before { left: -12px; }
  .hb .hb-perf::after { right: -12px; }

  .hb .hb-ticket__h { font-family: var(--hb-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
  .hb .hb-pack { display: grid; gap: 7px; margin-top: 12px; }
  .hb .hb-pack li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 500; font-size: 18px; line-height: 1.22; }
  .hb .hb-pack li::before {
    content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    background: var(--hb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  }

  .hb .hb-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 18px; min-height: 58px; padding: 0 20px;
    background: var(--hb-red); color: var(--hb-white);
    font-weight: 700; font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(192, 32, 38, 0.8);
    transition: background-color 160ms ease, box-shadow 160ms ease;
  }
  .hb .hb-cta svg { width: 18px; height: 18px; transition: transform 180ms var(--hb-ease); }
  .hb .hb-cta:hover { background: var(--wwp-red-bright); box-shadow: 0 18px 34px -12px rgba(192, 32, 38, 0.95); }
  .hb .hb-cta:hover svg { transform: translate(3px, -3px); }
  .hb .hb-fine { margin-top: 12px; font-size: 15px; line-height: 1.35; color: var(--hb-faint); }

  @container (min-width: 600px) {
    .hb .hb-ticket__inner { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 40px; }
    .hb .hb-ticket__inner .hb-perf { display: none; }
    .hb .hb-ticket__pack { border-left: 2px dashed rgba(255, 255, 255, 0.16); padding-left: 40px; }
  }

  /* ---------- Sections ---------- */
  .hb .hb-sec { margin-top: 112px; }
  .hb .hb-h2 {
    font-family: var(--hb-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(46px, 6vw, 72px); line-height: 0.9; letter-spacing: 0.005em;
  }
  .hb .hb-intro { margin-top: 12px; max-width: 560px; color: var(--hb-mute); font-size: 19px; }

  /* the night */
  .hb .hb-shot { position: relative; margin-top: 28px; }
  .hb .hb-shot img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 58%; filter: saturate(1.05) contrast(1.04); }
  .hb .hb-shot::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 7, 0.75));
    pointer-events: none;
  }
  .hb .hb-shot figcaption {
    position: absolute; left: 0; bottom: 0; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px 8px; background: var(--hb-bg);
    font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-mute);
  }
  .hb .hb-shot figcaption b { color: var(--hb-white); font-weight: 700; }
  .hb .hb-night__copy { margin-top: 32px; max-width: 640px; }
  .hb .hb-lead { font-weight: 600; font-size: 25px; line-height: 1.25; }
  .hb .hb-night__copy p + p { margin-top: 14px; color: var(--hb-mute); font-size: 19px; }
  .hb .hb-useful { margin-top: 44px; border-top: 2px solid var(--hb-red); padding-top: 16px; }
  .hb .hb-useful h3 { font-family: var(--hb-display); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; }
  .hb .hb-useful dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin-top: 6px; }
  .hb .hb-useful dl > div { padding: 14px 0 15px; border-bottom: 1px solid var(--hb-line); }
  .hb .hb-useful .hb-useful__wide { grid-column: 1 / -1; }
  .hb .hb-useful dt { font-weight: 700; font-size: 18px; line-height: 1.25; }
  .hb .hb-useful dd { margin-top: 4px; font-size: 18px; line-height: 1.4; color: var(--hb-mute); }
  .hb .hb-useful a { color: var(--hb-white); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--hb-red); text-decoration-thickness: 2px; }

  /* previously on the bill */
  .hb .hb-wall { margin-top: 26px; border-top: 1px solid var(--hb-line); }
  .hb .hb-row {
    position: relative;
    display: grid; grid-template-columns: 124px minmax(0, 1fr) 150px 24px; gap: 20px; align-items: center;
    padding: 15px 8px 13px 0;
    border-bottom: 1px solid var(--hb-line);
    text-decoration: none;
    transition: background-color 200ms ease, padding 260ms var(--hb-ease);
  }
  .hb .hb-row::before {
    content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--hb-red);
    transform: scaleY(0); transform-origin: top; transition: transform 260ms var(--hb-ease);
  }
  .hb .hb-row:hover, .hb .hb-row:focus-visible { background: rgba(255, 255, 255, 0.035); padding-left: 16px; }
  .hb .hb-row:hover::before, .hb .hb-row:focus-visible::before { transform: scaleY(1); }
  .hb .hb-row time { font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-faint); }
  .hb .hb-names { display: flex; flex-wrap: wrap; gap: 2px 0.9em; clip-path: inset(-12px -12px -12px 0); font-family: var(--hb-display); font-size: 34px; line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; }
  .hb .hb-names span { position: relative; white-space: nowrap; }
  /* separators sit in the gap; one that lands at the start of a wrapped line is clipped away */
  .hb .hb-names span + span::before { content: "/"; position: absolute; left: -0.6em; color: rgba(255, 255, 255, 0.28); }
  .hb .hb-names .hb-ken { color: #e0242b; }
  .hb .hb-opp { font-size: 16px; color: var(--hb-mute); text-align: right; }
  .hb .hb-go { width: 20px; height: 20px; opacity: 0.35; transition: opacity 160ms ease, transform 200ms var(--hb-ease); }
  .hb .hb-row:hover .hb-go, .hb .hb-row:focus-visible .hb-go { opacity: 1; transform: translateX(4px); }

  .hb .hb-peek { display: none; }
  @media (hover: hover) and (min-width: 1025px) {
    .hb .hb-peek {
      display: block; position: absolute; right: 196px; top: 50%; z-index: 3; width: 176px;
      opacity: 0; pointer-events: none;
      transform: translateY(-46%) rotate(5deg) scale(0.92);
      transition: opacity 200ms ease, transform 320ms var(--hb-ease);
      box-shadow: 0 26px 50px -16px rgba(0, 0, 0, 0.9);
    }
    .hb .hb-peek img { width: 100%; aspect-ratio: 1; object-fit: cover; }
    .hb .hb-peek figcaption { background: var(--hb-bg); padding: 6px 8px 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-mute); }
    .hb .hb-row:hover .hb-peek, .hb .hb-row:focus-visible .hb-peek { opacity: 1; transform: translateY(-50%) rotate(3deg) scale(1); }
  }

  /* next on the bill */
  .hb .hb-next { padding: 0 0 120px; background: var(--hb-bg); }
  .hb .hb-next__card {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 32px; align-items: center;
    margin-top: 26px; padding: 28px 36px;
    background: linear-gradient(110deg, var(--hb-coal-2) 0%, var(--hb-coal) 60%);
    border: 1px solid var(--hb-line); border-left: 6px solid var(--hb-red);
    text-decoration: none;
    transition: border-color 200ms ease, transform 260ms var(--hb-ease);
  }
  .hb .hb-next__card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.22); border-left-color: var(--hb-red); }
  .hb .hb-next__card img { width: 120px; height: 120px; }
  .hb .hb-chip {
    display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3); color: var(--hb-mute); padding: 3px 9px 2px;
  }
  .hb .hb-next__card h3 { margin-top: 10px; font-family: var(--hb-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 0.95; text-transform: uppercase; }
  .hb .hb-next__meta { margin-top: 8px; font-size: 18px; color: var(--hb-mute); }
  .hb .hb-next__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
  .hb .hb-next__go svg { width: 18px; height: 18px; transition: transform 200ms var(--hb-ease); }
  .hb .hb-next__card:hover .hb-next__go svg { transform: translateX(4px); }
  .hb .hb-all { display: inline-block; margin-top: 22px; font-weight: 600; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; text-underline-offset: 4px; text-decoration-color: var(--hb-red); text-decoration-thickness: 2px; }

  /* ---------- Floating ticket bar: on whenever the ticket card's button and the footer are off screen ---------- */
  .hb .hb-float {
    position: fixed; left: 50%; bottom: var(--hb-float-bottom, 24px); z-index: 60;
    display: flex; align-items: center; gap: 22px;
    width: max-content; max-width: calc(100% - 24px);
    padding: 10px 10px 10px 22px;
    background: rgba(16, 16, 20, 0.94);
    border: 1px solid var(--hb-line); border-top: 3px solid var(--hb-red);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translate(-50%, 180%); visibility: hidden;
    transition: transform 350ms var(--hb-ease), visibility 0s linear 350ms;
  }
  .hb .hb-float.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform 350ms var(--hb-ease), visibility 0s; }
  .hb .hb-float__text { min-width: 0; font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--hb-mute); }
  .hb .hb-float__text strong { display: block; font-weight: 700; font-size: 18px; color: var(--hb-white); }
  .hb .hb-float__text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hb .hb-float .hb-float__short { display: none; }
  .hb .hb-float__cta {
    flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
    background: var(--hb-red); color: var(--hb-white); text-decoration: none;
    font-weight: 700; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase;
    transition: background-color 160ms ease;
  }
  .hb .hb-float__cta:hover { background: var(--wwp-red-bright); }

  /* ---------- Motion ---------- */
  @keyframes hb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes hb-drop { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes hb-slide { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
  @keyframes hb-stamp { 0% { opacity: 0; transform: rotate(-16deg) scale(0.6); } 70% { opacity: 1; transform: rotate(3deg) scale(1.04); } 100% { opacity: 1; transform: none; } }

  /* short laptop screens: let the ticket scroll so its button and fine print never sit below the fold */
  @media (min-width: 1025px) and (max-height: 740px) {
    .hb .hb-rail { position: static; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hb *, .hb *::before, .hb *::after { animation: none !important; transition: none !important; }
  }

  /* ---------- Tablet and phone: one column, ticket inline, slim buy bar ---------- */
  @media (max-width: 1024px) {
    .hb { --hb-header: 0px; }
    .hb .hb-wrap { width: calc(100% - 48px); }
    .hb .hb-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "poster" "rail" "body"; }
    .hb .hb-rail { position: static; margin-top: 20px; }
    .hb .hb-stage { padding-bottom: 96px; }
    .hb .hb-next { padding-bottom: 150px; }

    /* floating bar spans the screen above the site bottom bar */
    .hb .hb-float {
      left: 12px; right: 12px; width: auto; max-width: none; justify-content: space-between;
      bottom: var(--hb-float-bottom, calc(var(--hb-nav) + env(safe-area-inset-bottom, 0px) + 10px));
      transform: translateY(220%);
    }
    .hb .hb-float.is-on { transform: none; }
  }

  @media (max-width: 560px) {
    .hb .hb-float { gap: 12px; padding: 8px 8px 8px 14px; }
    .hb .hb-float__text { font-size: 14px; }
    .hb .hb-float__text strong { font-size: 16px; }
    .hb .hb-float .hb-float__long { display: none; }
    .hb .hb-float .hb-float__short { display: block; }
    .hb .hb-float__cta { min-height: 44px; padding: 0 14px; font-size: 15px; }
  }

  @media (max-width: 760px) {
    .hb .hb-wrap { width: calc(100% - 32px); }
    .hb .hb-useful dl { grid-template-columns: minmax(0, 1fr); }
    .hb .hb-sec { margin-top: 84px; }
    .hb .hb-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; padding: 14px 0 12px; }
    .hb .hb-row time { grid-column: 1; }
    .hb .hb-names { grid-column: 1; font-size: 28px; }
    .hb .hb-names span { white-space: normal; }
    .hb .hb-opp { grid-column: 1; text-align: left; font-size: 15px; }
    .hb .hb-go { grid-column: 2; grid-row: 1 / span 3; }
    .hb .hb-row:hover, .hb .hb-row:focus-visible { padding-left: 12px; }
    .hb .hb-next__card { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 20px 18px; }
    .hb .hb-next__card img { width: 72px; height: 72px; }
    .hb .hb-next__go { grid-column: 1 / -1; }
    .hb .hb-shot img { aspect-ratio: 4 / 3; }
  }

  /* the bill re-stacks when the poster itself is narrow */
  @container (max-width: 620px) {
    .hb .hb-poster { --pad: 20px; }
    .hb .hb-poster__top { font-size: 13px; letter-spacing: 0.12em; }
    .hb .hb-presents img { width: 36px; height: 36px; }
    .hb .hb-billgrid { grid-template-columns: minmax(0, 1fr); margin-top: 18px; padding-bottom: 24px; }
    .hb .hb-bill__sub { font-size: 14cqi; }
    .hb .hb-guest { margin-top: 16px; }
    .hb .hb-guest__with { font-size: 13px; }
    .hb .hb-guest__name { font-size: 18cqi; --fit: 0.9; }
    .hb .hb-merch { grid-column: 1; grid-row: 4; justify-self: stretch; display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; text-align: left; margin-top: 22px; animation-name: hb-rise; }
    .hb .hb-disc { width: 132px; }
    .hb .hb-merch figcaption { margin-top: 0; }
    .hb .hb-match { grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 24px 14px 18px; }
    .hb .hb-team { flex-direction: column; gap: 6px; }
    .hb .hb-team--home, .hb .hb-team--away { justify-content: center; }
    .hb .hb-team img { width: 64px; }
    .hb .hb-team--away img { order: -1; }
    .hb .hb-team__name, .hb .hb-team--home .hb-team__name, .hb .hb-team--away .hb-team__name { text-align: center; }
    .hb .hb-team__name small { font-size: 12px; }
    .hb .hb-team__name b { font-size: 30px; }
  }

/* Real event records: optional sections and long copy retain the bill's hierarchy. */
.hb :is(h1, h2, h3, h4) { color: inherit; }
.hb :is(.hb-postercol, .hb-body, .hb-rail, .hb-fitbox, .hb-guest, .hb-team, .hb-next__card > div) { min-width: 0; }
.hb :is(.hb-presents, .hb-partner, .hb-venue, .hb-night__copy, .hb-useful dd, .hb-next__card h3, .hb-extra) { overflow-wrap: anywhere; }
.hb ::selection { background: #fff; color: var(--hb-red-deep); }
.hb :is(input, textarea) { caret-color: var(--hb-red); }
.hb .hb-sched { font-variant-numeric: tabular-nums; }
.hb .hb-fit.is-wrapped { display: block; white-space: normal; overflow-wrap: anywhere; line-height: .98; }
.hb .hb-guest .hb-fitbox + .hb-fitbox { margin-top: .7cqi; }
.hb .hb-billgrid--no-merch,
.hb .hb-billgrid:not(:has(.hb-merch)) { grid-template-columns: minmax(0, 1fr); }
.hb .hb-billgrid:not(:has(.hb-guest)) { padding-bottom: 4cqi; }
.hb .hb-rail.hb-rail--static { position: static; }
.hb .hb-team img { object-fit: contain; flex-shrink: 0; }
.hb .hb-next__card img { object-fit: contain; }
.hb .hb-next__card:not(:has(> img)) { grid-template-columns: minmax(0, 1fr) auto; }
.hb .hb-shot figcaption { max-width: 100%; flex-wrap: wrap; }
.hb .hb-ticket__date--undated .hb-ticket__md { grid-column: 1 / -1; font-size: 54px; line-height: 1; }
.hb .hb-ticket__date { grid-template-columns: auto minmax(0, 1fr); }
.hb .hb-ticket__status { max-width: 100%; overflow-wrap: anywhere; }
.hb .hb-ticket__status::before { flex: none; }
.hb .hb-ticket__status:not(.is-onsale)::before { box-shadow: none; }
.hb[data-state="onsale"] .hb-ticket__status::before { box-shadow: 0 0 0 3px var(--hb-red); }
.hb .hb-sched .is-pending dd { white-space: normal; font-size: 17px; }
.hb .hb-sched .is-pending::before { background: var(--hb-coal); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.hb .hb-sched dd > small + small { margin-left: 3px; }
.hb .hb-fine p + p { margin-top: 8px; }
.hb .hb-fine a { color: #fff; text-underline-offset: 3px; }
.hb .hb-cta[aria-disabled="true"] { background: var(--hb-disabled); border: 1px solid var(--hb-line); box-shadow: none; cursor: default; }
.hb .hb-cta[aria-disabled="true"] svg { display: none; }
.hb .hb-float:not(.is-on) { pointer-events: none; }
.hb .hb-guest__with { line-height: 1.35; }
.hb .hb-team__name b { overflow-wrap: anywhere; }
.hb :is(.hb-page-notice, .page-notice, .sample-notice) { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--hb-line); background: var(--hb-coal); color: var(--hb-mute); }
.hb :is(.hb-page-notice, .page-notice) p + p { margin-top: 8px; }
.hb :is(.hb-page-notice, .page-notice) b { display: block; color: #fff; }
.hb :is(.hb-page-notice, .page-notice) a { color: #fff; text-decoration-color: var(--hb-red); text-underline-offset: 3px; }
.hb .hb-extra { max-width: 100%; color: var(--hb-mute); font-size: 19px; }
.hb .hb-night__copy.hb-extra { max-width: 640px; }
.hb .hb-lead, .hb .hb-extra > .hb-h2 { color: #fff; }
.hb .hb-extra > * + * { margin-top: 18px; }
.hb .hb-extra h2:not(.hb-h2) { margin-top: 36px; font: 400 44px/1 var(--hb-display); text-transform: uppercase; color: #fff; }
.hb .hb-extra :is(h3, h4) { margin-top: 28px; font-family: var(--hb-display); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; color: #fff; }
.hb .hb-extra :is(h2, h3, h4) + * { margin-top: 12px; }
.hb .hb-extra p { max-width: 72ch; }
.hb .hb-extra :is(ul, ol) { padding-left: 22px; list-style: revert; }
.hb .hb-extra li + li { margin-top: 8px; }
.hb .hb-extra a { color: #fff; text-decoration-color: var(--hb-red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hb .hb-extra img { display: block; max-width: 100%; height: auto; }
.hb .hb-extra iframe { display: block; max-width: 100%; }
.hb .hb-extra .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.hb .hb-extra .wp-block-embed__wrapper iframe { width: 100%; height: 100%; }
.hb .hb-extra blockquote { margin: 22px 0; padding-left: 20px; border-left: 2px solid var(--hb-red); color: #fff; }
.hb .hb-extra figcaption { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.hb .hb-pack li small { display: block; margin-top: 4px; color: var(--hb-mute); font-size: 16px; line-height: 1.35; }
.hb .hb-faqs__list { max-width: 72ch; margin-top: 28px; }
.hb .hb-faqs__item { padding-block: 24px; border-top: 1px solid var(--hb-line); overflow-wrap: anywhere; }
.hb .hb-faqs__item:last-child { padding-bottom: 0; }
.hb .hb-faqs__item h3 { margin: 0; color: #fff; font: 700 21px/1.35 var(--hb-text); }
.hb .hb-faqs__answer { margin-top: 10px; color: var(--hb-mute); font: 400 19px/1.5 var(--hb-text); }
.hb .hb-faqs__answer p + p { margin-top: 14px; }
.hb .hb-names span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hb .hb-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 28px; }
.hb .hb-gallery img { width: 100%; height: auto; object-fit: contain; }
.hb .hb-gallery figcaption { margin-top: 8px; font-size: 16px; line-height: 1.4; color: var(--hb-mute); }
.hb .hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }
.hb .hb-action { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #fff; font: 600 17px/1.4 var(--hb-text); text-decoration: underline; text-decoration-color: var(--hb-red); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.hb .hb-action svg { width: 18px; height: 18px; }
.hb .share-feedback { margin-top: 16px; color: var(--hb-mute); font-size: 17px; }
.hb .share-feedback:empty { display: none; }
.hb .share-url { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--hb-line); background: var(--hb-coal); color: #fff; font: 400 18px/1.4 var(--hb-text); }
.hb :is(.hb-lightbox, .ml-lightbox) { width: min(1100px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--hb-line); background: var(--hb-coal); color: #fff; font: 19px/1.45 var(--hb-text); }
.hb :is(.hb-lightbox, .ml-lightbox)::backdrop { background: rgba(5, 5, 7, .88); }
.hb :is(.hb-lightbox, .ml-lightbox):not([open]),
.hb :is(.hb-lightbox, .ml-lightbox)[data-wwp-photos-enhanced]:not(:modal) { display: none; }
.hb :is(.hb-lightbox, .ml-lightbox)[open]:not(:modal) { position: relative; inset: auto; max-height: none; margin: 64px auto 0; }
.hb :is(.hb-lightbox__top, .ml-lightbox__top) { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--hb-line); background: var(--hb-coal); }
.hb :is(.hb-lightbox__top, .ml-lightbox__top) h2 { font: 400 34px/1 var(--hb-display); text-transform: uppercase; }
.hb :is(.hb-lightbox__top, .ml-lightbox__top) p { margin-top: 6px; color: var(--hb-mute); font-size: 16px; }
.hb [data-wwp-close-photos] { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 1px solid var(--hb-line); background: transparent; color: #fff; cursor: pointer; }
.hb [data-wwp-close-photos] svg { width: 22px; height: 22px; }
.hb :is(.hb-lightbox, .ml-lightbox) > :is(.hb-gallery, .ml-lb-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin: 0; padding: 24px; }
.hb .ml-lb-grid img { width: 100%; height: auto; }
.hb .ml-lb-grid figcaption { margin-top: 8px; font-size: 16px; color: var(--hb-mute); }
.hb .hb-password { min-height: 55vh; padding-block: 48px; }
.hb .hb-password input { max-width: 100%; }
@media (max-width: 760px) {
  .hb .hb-next__card:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
  .hb .hb-gallery { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .hb .hb-float { gap: 8px; padding-left: 10px; }
  .hb .hb-float__cta { padding-inline: 10px; letter-spacing: .04em; }
  .hb .hb-ticket { padding-inline: 18px; }
  .hb .hb-perf { margin-inline: -18px; }
  .hb .hb-ticket__status { font-size: 12px; letter-spacing: .1em; }
}

/* Approved C15 is limited to small upcoming-event metadata, not ticket fine print. */
.hb:not(.hb-past) .hb-team__name small,
.hb:not(.hb-past) .hb-row time { color: rgba(255, 255, 255, .5); }