.hero {
  background: #041122;
}

/* Purpose-built casino chip mark with a clean PBA monogram. */
.brand { gap: .68rem; }

.brand-mark {
  display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  background: none;
  box-shadow: none;
  transform: none;
}

.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0,0,0,.34)); }
.brand-mark .casino-shadow { fill: rgba(0,0,0,.28); }
.brand-mark .casino-shell { fill: #071528; stroke: #fff; stroke-width: 1.4; }
.brand-mark .casino-rail { fill: #fff; stroke: #1266d4; stroke-width: 1.5; }
.brand-mark .casino-field { fill: #ef3340; stroke: #071528; stroke-width: 1.4; }
.brand-mark .casino-inlays path { fill: #fff; stroke: #1266d4; stroke-width: 1; stroke-linejoin: round; }
.brand-mark .casino-bead { fill: #071528; stroke: #fff; stroke-width: 2; }
.brand-mark .casino-medallion { fill: #fff; stroke: #1266d4; stroke-width: 1.5; }
.brand-mark .casino-keyline { fill: none; stroke: #071528; stroke-width: .8; }
.brand-mark text {
  text-anchor: middle;
  font-family: "Barlow Condensed", sans-serif;
}
.brand-mark .casino-letter {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}
.brand-mark .casino-p { fill: #071528; }
.brand-mark .casino-b { fill: #ef3340; }
.brand-mark .casino-a { fill: #1266d4; }

.brand-name {
  font-size: 1.62rem;
  letter-spacing: .025em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}

.brand-name strong { color: #ff3a49; }
.brand-name small {
  margin-top: .28rem;
  color: #dfeaff;
  letter-spacing: .42em;
}

.hero::before {
  content: none;
}

.hero::after {
  content: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(3,14,31,.98) 0%, rgba(3,14,31,.88) 33%, rgba(3,14,31,.2) 68%),
    linear-gradient(0deg, rgba(3,14,31,.56), transparent 48%);
}

.hero-brand-art {
  position: absolute;
  z-index: 1;
  right: 5vw;
  top: 52%;
  transform: translateY(-42%) rotate(-5deg);
  text-align: right;
  font: 800 clamp(7rem,15vw,15rem)/.68 "Barlow Condensed", sans-serif;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: rgba(255,255,255,.09);
  user-select: none;
}

.hero-brand-art span,
.hero-brand-art strong { display: block; }

.hero-brand-art strong {
  color: rgba(239,51,64,.8);
  text-shadow: 18px 18px 0 rgba(0,0,0,.13);
}

@media (max-width: 700px) {
  .brand-mark {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .brand-name { font-size: 1.3rem; }

  .hero-brand-art {
    right: -4vw;
    top: 36%;
    font-size: 7rem;
    opacity: .55;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(3,14,31,.97), rgba(3,14,31,.48)),
      linear-gradient(0deg, rgba(3,14,31,.66), transparent);
  }

  .hero > img { object-position: 57% center; }
}

/* Keep the live catalog useful without letting it dominate the page. */
.live-catalog {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.live-catalog-heading { margin-bottom: 1.75rem; }
.catalog-frame { height: 600px; }

@media (max-width: 700px) {
  .live-catalog {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .catalog-frame { height: 520px; }
}