@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");

/* Shared responsive styles for the local The Brat Pack site.
   Keeps 80s black / red / pink / purple. Does not change live hosting. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
  padding-top: 0;
  background-color: #000;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Keep spacer gifs from stretching */
img[src="transparent.gif"],
img[src*="transparent.gif"] {
  max-width: none;
}

/* ---- 80s condensed menu type (matches old art/menu.jpg lettering) ---- */
.bp-nav-wrap,
.bp-nav-toggle,
.bp-nav a {
  font-family: Oswald, "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---- Real HTML nav ---- */
.bp-nav-wrap {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10000;
  background: #000;
  border-bottom: none;
}

.bp-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 2px 10px 6px;
}

/* Wordmark is redundant — swirl logo already says The Brat Pack.
   Left side of the phone bar stays empty; Menu stays on the right. */
.bp-nav-brand {
  display: none !important;
}

@keyframes bp-menu-glow {
  0%, 100% {
    box-shadow: 0 0 6px #ff87d7, 0 0 14px #F70004;
    text-shadow: 0 0 4px #fff, 0 0 12px #ff87d7;
  }
  50% {
    box-shadow: 0 0 12px #fff, 0 0 24px #ff87d7, 0 0 36px #F70004;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff87d7;
  }
}
@-webkit-keyframes bp-menu-glow {
  0%, 100% {
    box-shadow: 0 0 6px #ff87d7, 0 0 14px #F70004;
    text-shadow: 0 0 4px #fff, 0 0 12px #ff87d7;
  }
  50% {
    box-shadow: 0 0 12px #fff, 0 0 24px #ff87d7, 0 0 36px #F70004;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff87d7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bp-nav-toggle {
    -webkit-animation: none !important;
    animation: none !important;
    box-shadow: 0 0 10px #F70004;
    text-shadow: 0 0 8px #fff;
  }
}

.bp-nav-toggle {
  display: none;
  background: #1a0000;
  color: #F70004;
  border: 2px solid #F70004;
  border-radius: 2px;
  min-height: 44px;
  min-width: 72px;
  padding: 8px 16px;
  font-size: 18px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.bp-nav {
  background: #000;
}

.bp-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.bp-nav a,
.bp-nav a:link,
.bp-nav a:visited,
.bp-nav a:active,
.bp-nav-toggle {
  color: #F70004 !important;
  font-family: Oswald, "Arial Narrow", Impact, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

.bp-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 18px !important;
  white-space: nowrap;
}

.bp-nav a:hover,
.bp-nav a:focus {
  color: #fff !important;
  background: #3a0008;
}

.bp-booking-strip {
  color: #fff;
  font-family: Oswald, "Arial Narrow", Impact, sans-serif;
  font-size: 16px;
  padding: 8px 12px 16px;
  line-height: 1.5;
  text-align: center;
}

.bp-booking-strip a {
  color: #ff3355;
}

.bp-booking-strip a[href^="tel:"] {
  color: #fff;
  text-decoration: underline;
}

/* Picture menu / rocket: HTML text nav replaces it on every screen size */
img[src="art/menu.jpg"],
img[src*="art/menu.jpg"] {
  display: none !important;
}
#Layer1:has(img[src*="art/menu.jpg"]) {
  display: none !important;
}

/* Homepage: centered column (logo + booking + social), not left-stuck */
body.bp-home #Layer2,
body.bp-home #Layer3,
body.bp-home #Layer4 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 960px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.bp-home #Layer2 {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

body.bp-home #Layer2 img {
  display: block;
  margin: 0 auto;
  max-width: min(494px, 100%);
  height: auto;
}

body.bp-home #Layer4 {
  margin-top: 40px !important;
  margin-bottom: 8px !important;
  font-size: 16px;
}

body.bp-home #Layer4 p,
body.bp-home #Layer4 [align="left"],
body.bp-home #Layer4 .style20 {
  text-align: center !important;
}

body.bp-home #Layer3 {
  margin-top: 16px !important;
  margin-bottom: 40px !important;
}

body.bp-home #Layer3 img,
body.bp-home #Layer3 img[src*="Icons.jpg"] {
  display: block !important;
  margin: 0 auto !important;
  max-width: min(450px, 92%);
  height: auto !important;
}

@media (max-width: 900px) {
  .bp-iconbar {
    display: none !important;
  }

  .bp-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 2px solid #F70004;
    background: #12000a;
    min-height: 32px;
    min-width: 0;
    padding: 3px 18px;
    font-size: 16px;
    line-height: 1;
    -webkit-animation: bp-menu-glow 1.6s ease-in-out infinite;
    animation: bp-menu-glow 1.6s ease-in-out infinite;
  }
  .bp-nav-wrap.bp-open .bp-nav-toggle {
    -webkit-animation: none;
    animation: none;
    color: #fff !important;
    box-shadow: 0 0 10px #F70004;
  }

  .bp-nav {
    display: none;
    border-top: 2px solid #F70004;
    background: #0a0000;
  }

  .bp-nav-wrap.bp-open .bp-nav {
    display: block;
  }

  .bp-nav ul {
    flex-direction: column;
    width: 100%;
  }

  .bp-nav a {
    min-height: 56px;
    padding: 14px 20px;
    border-bottom: 1px solid #4a1238;
    white-space: normal;
    font-size: 28px;
    letter-spacing: 0.16em;
    line-height: 1.1;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Stack Dreamweaver absolute layers */
  [id^="Layer"],
  [id^="apDiv"],
  [id^="layer"],
  div[style*="position: absolute"],
  div[style*="position:absolute"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 !important;
  }

  table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  table, tbody, thead, tr, td, th {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  td img[src="transparent.gif"],
  td img[src*="transparent.gif"] {
    display: none;
  }

  /* Re-apply homepage spacing after the generic layer reset */
  body.bp-home #Layer2 {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }

  body.bp-home #Layer4 {
    margin-top: 40px !important;
    margin-bottom: 8px !important;
  }

  body.bp-home #Layer3 {
    margin-top: 16px !important;
    margin-bottom: 40px !important;
  }
}

@media (min-width: 901px) {
  body {
    padding-top: 0;
  }

  body.bp-home #Layer2 {
    margin-top: 24px !important;
  }

  /* Absolute Dreamweaver layers were authored from y=0; shift them below the fixed icon bar */
  body:not(.bp-home):not(.bp-shows):not(.bp-tunes):not(.bp-media):not(.bp-stack) [id^="apDiv"],
  body:not(.bp-home):not(.bp-shows):not(.bp-tunes):not(.bp-media):not(.bp-stack) [id^="Layer"],
  body:not(.bp-home):not(.bp-shows):not(.bp-tunes):not(.bp-media):not(.bp-stack) [id^="layer"] {
    transform: translateY(152px);
  }

  .bp-nav-bar {
    display: none;
  }

  .bp-nav {
    display: block;
  }

  /* Graphic icon bar is the desktop nav; hide Oswald text list */
  .bp-nav ul {
    display: none !important;
  }

  .bp-nav a {
    font-size: 17px;
    letter-spacing: 0.1em;
    padding: 12px 10px;
  }

  .bp-iconbar {
    display: block;
  }

  /* Hide in-page copies of the same bar so they do not stack under the header */
  .bp-nav-wrap ~ * img[src*="all%20icons"],
  .bp-nav-wrap ~ * img[src*="all icons"] {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body {
    background-color: #000 !important;
    padding-top: 0;
  }

  td:empty {
    display: none !important;
    height: 0 !important;
  }
}


/* ---- Scalable graphic nav (art/all icons.jpg) ---- */
.bp-iconbar {
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  background: #000;
}

.bp-iconbar img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.bp-iconbar a {
  position: absolute;
  z-index: 2;
  display: block;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
  overflow: hidden;
}

.bp-iconbar a:hover,
.bp-iconbar a:focus {
  background: rgba(247, 0, 4, 0.18);
  outline: none;
}

/* Text labels: original image-map polygons on 900x150, so the hit area follows the slant */
.bp-hot-shows,
.bp-hot-band,
.bp-hot-tunes,
.bp-hot-reviews,
.bp-hot-media,
.bp-hot-presspack,
.bp-hot-booking {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.bp-hot-shows { clip-path: polygon(1.78% 80.67%, 9.67% 18.00%, 11.56% 28.67%, 4.44% 88.67%); }
.bp-hot-band { clip-path: polygon(7.44% 82.67%, 14.11% 25.33%, 16.56% 35.33%, 9.67% 89.33%); }
.bp-hot-tunes { clip-path: polygon(13.11% 81.33%, 20.67% 18.00%, 23.00% 28.00%, 16.00% 90.67%); }
.bp-hot-reviews { clip-path: polygon(18.67% 82.67%, 28.00% 6.00%, 30.11% 18.67%, 21.56% 88.00%); }
.bp-hot-media { clip-path: polygon(24.22% 83.33%, 29.44% 40.67%, 31.33% 51.33%, 26.78% 90.67%); }
.bp-hot-presspack { clip-path: polygon(29.78% 80.00%, 38.11% 10.67%, 40.56% 23.33%, 32.11% 90.00%); }
.bp-hot-booking { clip-path: polygon(35.67% 82.00%, 42.00% 24.67%, 43.89% 39.33%, 37.56% 90.67%); }
.bp-hot-home {
  left: 45.00%;
  top: 16.00%;
  width: 12.22%;
  height: 73.33%;
  border-radius: 50%;
}
.bp-hot-flickr { left: 57.22%; top: 41.33%; width: 7.00%; height: 48.00%; }
.bp-hot-facebook { left: 64.44%; top: 44.67%; width: 6.33%; height: 40.67%; }
.bp-hot-blog { left: 71.44%; top: 47.33%; width: 6.56%; height: 38.67%; }
.bp-hot-twitter { left: 78.33%; top: 46.67%; width: 6.33%; height: 38.67%; }
.bp-hot-vimeo {
  left: 85.00%;
  top: 46.00%;
  width: 6.67%;
  height: 40.00%;
  border-radius: 50%;
}
.bp-hot-instagram {
  left: 92.00%;
  top: 45.33%;
  width: 6.89%;
  height: 41.33%;
  border-radius: 50%;
}

/* Later (rightward) words sit above overlapping slanted boxes */
.bp-hot-shows { z-index: 2; }
.bp-hot-band { z-index: 3; }
.bp-hot-tunes { z-index: 4; }
.bp-hot-reviews { z-index: 5; }
.bp-hot-media { z-index: 6; }
.bp-hot-presspack { z-index: 7; }
.bp-hot-booking { z-index: 8; }
.bp-hot-home { z-index: 9; }
.bp-hot-flickr { z-index: 10; }
.bp-hot-facebook { z-index: 11; }
.bp-hot-blog { z-index: 12; }
.bp-hot-twitter { z-index: 13; }
.bp-hot-vimeo { z-index: 14; }
.bp-hot-instagram { z-index: 15; }

/* Pages that have the header icon bar: never show the old in-page map copy */
.bp-nav-wrap ~ * img[src*="all%20icons"],
.bp-nav-wrap ~ * img[src*="all icons"] {
  display: none !important;
}

/* Shows page: same centered homepage logo, no leftover 2026 under the bar */
body.bp-shows #apDiv1 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 960px !important;
  height: auto !important;
  margin: 48px auto 16px !important;
  text-align: center !important;
  transform: none !important;
}
body.bp-shows #apDiv1 img {
  display: block;
  margin: 0 auto;
  width: 494px;
  max-width: min(494px, 92%);
  height: auto;
}

body.bp-home #Layer3 {
  display: none !important;
}

/* Shows listings + photos: same centered column as the top bar */
body.bp-shows #apDiv2,
body.bp-shows #apDiv5,
body.bp-shows #apDiv8 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.bp-shows #apDiv2 {
  width: 100% !important;
  max-width: 900px !important;
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  padding: 0 16px;
  background: transparent !important;
  text-align: left;
  box-sizing: border-box;
}

body.bp-shows #apDiv2 p {
  text-align: left;
}

body.bp-shows #apDiv2 p[style*="text-align: right"] {
  text-align: center !important;
}

body.bp-shows #apDiv8 {
  width: auto !important;
  max-width: 900px !important;
  text-align: center;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

body.bp-shows #apDiv8 img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
}

body.bp-shows #apDiv5 {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  text-align: left;
}
body.bp-shows #apDiv5 p {
  margin: 0;
}
body.bp-shows #apDiv5 p:first-child {
  display: none;
}
body.bp-shows #apDiv5 img {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}
body.bp-shows .bp-shows-group {
  position: relative;
  width: 100%;
}

body.bp-shows #apDiv3 {
  display: none !important;
}

.bp-shows-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 83px;
  align-items: start;
  column-gap: 20px;
  row-gap: 0;
  max-width: 980px;
  width: 100%;
  margin: 0 auto 16px;
  padding: 0 16px;
  box-sizing: border-box;
}
body.bp-shows .bp-shows-row #apDiv2 {
  grid-column: 1;
  grid-row: 1;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
}
body.bp-shows .bp-shows-row #apDiv8 {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 83px !important;
  max-width: 83px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
body.bp-shows .bp-shows-row #apDiv8 img {
  display: block;
  margin: 0;
  width: 83px;
  height: auto;
  max-width: none;
}
body.bp-shows .bp-shows-row #apDiv5 {
  grid-column: 1;
  grid-row: 2;
  margin: 2px 0 16px !important;
}
body.bp-shows #apDiv2 > p:has(+ p[style*="text-align: right"]) {
  display: none;
}
body.bp-shows #apDiv2 p[style*="text-align: right"] {
  margin-top: 0;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .bp-shows-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    column-gap: 8px;
    padding: 0 8px;
  }
  body.bp-shows .bp-shows-row #apDiv2 {
    min-width: 0;
    max-width: none !important;
  }
  body.bp-shows .bp-shows-row #apDiv8 {
    width: 64px !important;
    max-width: 64px !important;
    margin-top: 8px !important;
  }
  body.bp-shows .bp-shows-row #apDiv8 img {
    width: 64px;
  }
}


.bp-logo-top {
  text-align: center;
  padding: 20px 12px 4px;
  background: #000;
}
.bp-logo-top a {
  display: inline-block;
}
.bp-logo-top img {
  display: block;
  margin: 0 auto;
  width: 494px;
  max-width: min(494px, 92%);
  height: auto;
}

/* Duplicate in-page swirl logos: the header one is the real one */
.bp-nav-wrap ~ * img[src*="logoswirl"] {
  display: none !important;
}
body.bp-home #Layer2,
body.bp-shows #apDiv1 {
  display: none !important;
}


/* ---- Tunes + Media: kill Dreamweaver absolute scatter ---- */
body.bp-tunes [id^="apDiv"],
body.bp-media [id^="apDiv"] {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  height: auto !important;
}

body.bp-tunes audio,
body.bp-media audio {
  max-width: 100%;
  width: 100%;
  display: block;
}

/* Tunes: hide page-specific songs logo + duplicate icon bar */
body.bp-tunes #apDiv1,
body.bp-tunes #apDiv23 {
  display: none !important;
}

.bp-tunes-wrap,
.bp-media-wrap {
  max-width: 980px;
  width: 100%;
  margin: 16px auto 48px;
  padding: 0 16px;
  box-sizing: border-box;
}

.bp-tunes-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 83px;
  gap: 20px;
  align-items: start;
}

body.bp-tunes .bp-jenny,
body.bp-tunes #apDiv3 a[href*="867"] {
  color: #FF0000 !important;
  text-decoration: none !important;
  pointer-events: none;
}

body.bp-tunes .bp-tunes-80s #apDiv3,
body.bp-tunes .bp-tunes-beyond #apDiv7,
body.bp-tunes .bp-tunes-80s #apDiv4,
body.bp-tunes .bp-tunes-beyond #apDiv8,
body.bp-tunes #apDiv5,
body.bp-tunes #apDiv9,
body.bp-tunes #apDiv10 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.bp-tunes #apDiv9 {
  font-size: 28px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #F00;
  margin-bottom: 8px !important;
  line-height: 1.1;
}

body.bp-tunes #apDiv10 {
  font-size: 28px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #006102;
  margin-bottom: 8px !important;
  line-height: 1.1;
}

body.bp-tunes #apDiv3 h1,
body.bp-tunes #apDiv7 h1,
body.bp-tunes #apDiv3,
body.bp-tunes #apDiv7 {
  font-size: 14px !important;
  font-weight: normal;
  line-height: 1.45;
  margin: 8px 0 0 !important;
}

body.bp-tunes #apDiv4,
body.bp-tunes #apDiv8 {
  margin: 0 0 8px !important;
}

body.bp-tunes #apDiv5 {
  flex: 0 0 83px;
  width: 83px !important;
  max-width: 83px !important;
}

body.bp-tunes #apDiv5 img {
  display: block;
  width: 83px;
  height: auto;
  max-width: none;
}

@media (max-width: 900px) {
  .bp-tunes-cols {
    grid-template-columns: 1fr 64px;
    gap: 8px;
  }
  body.bp-tunes .bp-tunes-80s {
    grid-column: 1;
    grid-row: 1;
  }
  body.bp-tunes #apDiv5 {
    grid-column: 2;
    grid-row: 1;
    width: 64px !important;
    max-width: 64px !important;
  }
  body.bp-tunes #apDiv5 img {
    width: 64px;
  }
  body.bp-tunes .bp-tunes-beyond {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Media: hide page-specific media logo + duplicate icon bar */
body.bp-media #apDiv4,
body.bp-media #apDiv2 {
  display: none !important;
}

.bp-media-photos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 8px auto 24px;
  text-align: center;
}

.bp-media-photos #apDiv6,
.bp-media-photos #apDiv24,
.bp-media-audio {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}

.bp-media-audio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(280px, 100%);
}

body.bp-media iframe {
  width: 100% !important;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto !important;
  display: block;
  margin: 12px auto;
  border: 0;
}

.bp-media-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}

.bp-media-videos [id^="apDiv"] {
  width: 100% !important;
  max-width: 560px;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  .bp-media-videos {
    grid-template-columns: 1fr;
  }
  .bp-media-photos {
    flex-direction: column;
  }
}


/* ---- Remaining inner pages: no Dreamweaver scatter ---- */
body.bp-stack [id^="apDiv"],
body.bp-stack [id^="Layer"],
body.bp-stack [id^="layer"] {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 12px auto !important;
  height: auto !important;
}

body.bp-stack img {
  max-width: 100%;
  height: auto;
}

body.bp-stack table {
  width: 100% !important;
  max-width: 980px !important;
  margin: 12px auto !important;
  height: auto !important;
}

body.bp-stack table td,
body.bp-stack table tr {
  height: auto !important;
}

.bp-page-wrap {
  max-width: 980px;
  width: 100%;
  margin: 16px auto 48px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Reviews: hide page swirl + leftover rocket layer; keep reviews + mugs + audio */
body.bp-reviews #apDiv1,
body.bp-reviews #Layer1,
body.bp-reviews #apDiv10,
body.bp-reviews #apDiv21 {
  display: none !important;
}

.bp-reviews-layout {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.bp-reviews-audio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "intro intro"
    "l80 beyond"
    "a80 abeyond";
  justify-items: center;
  align-items: end;
  column-gap: 32px;
  row-gap: 4px;
  max-width: 640px;
  width: 100%;
  margin: 8px auto 20px;
  box-sizing: border-box;
}

body.bp-stack.bp-reviews .bp-reviews-audio [id^="apDiv"] {
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  height: auto !important;
}

body.bp-reviews #apDiv6 {
  grid-area: intro;
  text-align: center;
  max-width: none !important;
  margin-bottom: 8px !important;
}

body.bp-reviews #apDiv9 {
  grid-area: l80;
  text-align: center;
  color: #F0F;
  font-size: 36px;
}

body.bp-reviews #apDiv5 {
  grid-area: beyond;
  text-align: center;
  color: #FFF;
  font-size: 36px;
}

body.bp-reviews #apDiv4 {
  grid-area: a80;
}

body.bp-reviews #apDiv7 {
  grid-area: abeyond;
}

body.bp-reviews audio {
  max-width: 100%;
  width: 100%;
  display: block;
}

.bp-reviews-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto 16px;
  box-sizing: border-box;
}

body.bp-stack.bp-reviews .bp-reviews-body #apDiv3 {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

body.bp-stack.bp-reviews .bp-reviews-body #apDiv8 {
  display: none !important;
}

body.bp-reviews .bp-reviews-body #apDiv8 img {
  display: block;
  margin: 0;
  width: 83px;
  max-width: none;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .bp-reviews-audio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "l80"
      "a80"
      "beyond"
      "abeyond";
    max-width: 100%;
    column-gap: 0;
    row-gap: 6px;
  }

  body.bp-stack.bp-reviews .bp-reviews-audio [id^="apDiv"] {
    max-width: 100% !important;
  }

  .bp-reviews-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body.bp-stack.bp-reviews .bp-reviews-body #apDiv8 {
    flex: 0 0 auto;
    width: 83px !important;
    max-width: 83px !important;
    margin: 12px auto 0 !important;
  }

  body.bp-reviews .bp-reviews-body #apDiv8 img {
    margin: 0 auto;
  }

  body.bp-stack.bp-reviews .bp-reviews-body #apDiv8 {
    display: none !important;
  }

  body.bp-reviews .bp-reviews-mugs-h {
    display: block;
    position: relative;
    width: 100%;
    max-width: 769px;
    margin: 8px auto 24px;
  }
}

.bp-reviews-mugs-h {
  display: block;
  position: relative;
  width: 100%;
  max-width: 769px;
  margin: 8px auto 24px;
}

body.bp-reviews .bp-reviews-mugs-h img {
  display: block;
  width: 100%;
  max-width: 769px;
  height: auto;
  pointer-events: none;
}

.bp-reviews-mug {
  position: absolute;
  top: 2%;
  height: 96%;
  z-index: 2;
  display: block;
  background: transparent;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
}
.bp-reviews-mug-jesse { left: 2.1%; width: 13%; }
.bp-reviews-mug-lynn { left: 18.1%; width: 13.5%; }
.bp-reviews-mug-logan { left: 35.1%; width: 13%; }
.bp-reviews-mug-jon { left: 51.4%; width: 13.3%; }
.bp-reviews-mug-david { left: 67.9%; width: 13.5%; }
.bp-reviews-mug-joe { left: 84.3%; width: 13.1%; }

body.bp-shows #apDiv8,
body.bp-tunes #apDiv8,
body.bp-reviews .bp-reviews-body #apDiv8,
body.bp-presspack #apDiv3,
body.bp-pressbio #apDiv3 {
  position: relative;
}
body.bp-shows #apDiv8 img,
body.bp-tunes #apDiv8 img,
body.bp-reviews .bp-reviews-body #apDiv8 img,
body.bp-presspack #apDiv3 img,
body.bp-pressbio #apDiv3 img,
body.bp-pressbio img[src*="mugs2024"] {
  pointer-events: none;
}

/* Merch: giant collage scales in the column; hide extra merch swirls (also covered by logoswirl rule) */
body.bp-merch #apDiv,
body.bp-merch #apDiv6 {
  display: none !important;
}

body.bp-merch #apDiv7,
body.bp-merch #apDiv8,
body.bp-merch #apDiv1 {
  max-width: 980px !important;
  padding: 0 16px;
  box-sizing: border-box;
}

body.bp-merch #apDiv7 img,
body.bp-merch img[src*="BPswag"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Press pack: hide swirl + duplicate icons + spacer */
body.bp-presspack #apDiv1,
body.bp-presspack #apDiv5,
body.bp-presspack #apDiv13 {
  display: none !important;
}

body.bp-presspack #apDiv2,
body.bp-presspack #apDiv3,
body.bp-presspack #apDiv4 {
  padding: 0 16px;
  box-sizing: border-box;
}

body.bp-presspack #apDiv3 img {
  display: block;
  width: 100%;
  max-width: 769px;
  margin: 0 auto;
  height: auto;
}

/* Faces / band: photo in the column */
body.bp-faces .bp-faces-collage,
body.bp-faces img[src*="faces.jpg"],
body.bp-band img[src*="Group6"] {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.bp-band-photo {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.bp-band-photo > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.bp-band-hot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  outline: none;
  border: none;
  box-shadow: none;
}

.bp-mug-hot,
.bp-reviews-mug,
.bp-bio-mug-hit {
  cursor: pointer;
  outline: none;
  border: none;
  box-shadow: none;
}

.bp-mug-hot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

.bp-band-hot:hover,
.bp-band-hot:focus-visible,
.bp-mug-hot:hover,
.bp-mug-hot:focus-visible,
.bp-reviews-mug:hover,
.bp-reviews-mug:focus-visible,
.bp-bio-mug-hit:hover,
.bp-bio-mug-hit:focus-visible {
  outline: none;
  box-shadow: none;
  background: radial-gradient(ellipse 50% 62% at 50% 38%, rgba(255, 236, 150, 0.5) 0%, rgba(247, 0, 4, 0.22) 40%, transparent 72%);
  mix-blend-mode: screen;
}

/* Original image-map rects on Group6.2024.gif (1000x440), as percentages */
.bp-band-jon { left: 1.2%; top: 2.05%; width: 16.7%; height: 91.36%; }
.bp-band-david { left: 20.2%; top: 3.64%; width: 13.9%; height: 90.68%; }
.bp-band-jesse { left: 37.7%; top: 2.73%; width: 15.9%; height: 93.86%; }
.bp-band-joe { left: 56.1%; top: 2.05%; width: 13.0%; height: 93.41%; }
.bp-band-lynn { left: 72.3%; top: 2.27%; width: 12.8%; height: 94.77%; }
.bp-band-logan { left: 86.2%; top: 2.73%; width: 11.1%; height: 93.18%; }

.bp-band-members {
  display: none;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
}

.bp-band-members a {
  display: block;
  min-height: 44px;
  padding: 10px 8px;
  color: #F70004;
  font-family: Oswald, "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid #4a1238;
}

.bp-band-members a:hover,
.bp-band-members a:focus {
  color: #fff;
  background: #3a0008;
}

@media (max-width: 900px) {
  .bp-band-members {
    display: block;
  }
}

/* Clients: two-column-ish text in one centered column */
body.bp-clients table {
  padding: 0 16px;
  box-sizing: border-box;
}

body.bp-clients td {
  padding-bottom: 12px;
}

/* Bios: keep mug strip + photo + copy readable */
body.bp-bio table {
  padding: 0 8px;
  box-sizing: border-box;
}

body.bp-bio img[src*="mugsv"] {
  width: 83px;
  max-width: 83px;
  height: auto;
}
body.bp-bio .bp-bio-mugs {
  position: relative;
}
body.bp-bio img[src*="mugsv"] {
  pointer-events: none;
}
body.bp-bio .bp-bio-mug-hit {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 4;
}
body.bp-bio .bp-bio-mug-jesse { top: 0.4%; height: 16.3%; }
body.bp-bio .bp-bio-mug-lynn { top: 17.4%; height: 16.0%; }
body.bp-bio .bp-bio-mug-logan { top: 33.6%; height: 15.8%; }
body.bp-bio .bp-bio-mug-jon { top: 50.1%; height: 16.2%; }
body.bp-bio .bp-bio-mug-david { top: 66.5%; height: 16.3%; }
body.bp-bio .bp-bio-mug-joe { top: 83.4%; height: 16.2%; }

@media (max-width: 900px) {
  body.bp-bio img[src*="mugsv"] {
    width: 64px;
    max-width: 64px;
  }
}

/* Alumni: 3-col desktop / 2-col phone grid of the original gifs */
body.bp-alumni {
  background-color: #CC33FF !important;
}

body.bp-alumni .bp-alumni-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: end;
  justify-items: center;
  width: 100%;
  max-width: 980px;
  margin: 8px auto 24px;
}

body.bp-alumni .bp-alumni-grid [id^="apDiv"] {
  background-color: transparent !important;
  text-align: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  height: auto !important;
}

body.bp-alumni .bp-alumni-grid [id^="apDiv"] img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

body.bp-alumni .bp-alumni-grid #apDiv3 img,
body.bp-alumni .bp-alumni-grid #apDiv4 img {
  max-height: 455px;
  width: auto;
  max-width: 100%;
}
body.bp-alumni .bp-alumni-grid #apDiv3 img {
  max-height: 525px;
  transform-origin: center bottom;
  transform: translateY(22px) scale(1.05);
}
body.bp-alumni .bp-alumni-grid #apDiv4 img {
  transform-origin: center bottom;
  transform: translateY(10px) scale(1.07);
}

body.bp-alumni .bp-alumni-grid #apDiv11 img {
  max-width: 86%;
  max-height: 375px;
}

@media (max-width: 900px) {
  body.bp-alumni .bp-alumni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  body.bp-alumni .bp-alumni-grid [id^="apDiv"] img {
    max-height: 260px;
  }
  body.bp-alumni .bp-alumni-grid #apDiv3 img,
  body.bp-alumni .bp-alumni-grid #apDiv4 img {
    max-height: 285px;
  }
  body.bp-alumni .bp-alumni-grid #apDiv3 img {
    max-height: 328px;
    transform-origin: center bottom;
    transform: translateY(14px) scale(1.05);
  }
  body.bp-alumni .bp-alumni-grid #apDiv4 img {
    transform-origin: center bottom;
    transform: translateY(6px) scale(1.07);
  }
  body.bp-alumni .bp-alumni-grid #apDiv11 img {
    max-height: 238px;
    max-width: 82%;
  }
}



/* ---- Press pack: desktop two-column (links | bio), mugs under ---- */
body.bp-presspack .bp-press-cols {
  max-width: 980px;
  margin: 12px auto;
}
body.bp-presspack #apDiv2,
body.bp-presspack #apDiv2 p,
body.bp-presspack #apDiv2 font,
body.bp-presspack #apDiv2 em,
body.bp-presspack #apDiv2 a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: italic;
  font-size: 18px !important;
  font-weight: normal !important;
  line-height: 1.5;
}
body.bp-presspack #apDiv2 a {
  color: #F70004 !important;
  font-weight: normal !important;
  text-decoration: none !important;
}
@keyframes bp-press-link-glow {
  0%, 100% {
    box-shadow: 0 0 3px #ff87d7, 0 0 7px #F70004;
    text-shadow: 0 0 2px #fff, 0 0 6px #ff87d7;
  }
  50% {
    box-shadow: 0 0 6px #fff, 0 0 12px #ff87d7, 0 0 16px #F70004;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff87d7;
  }
}
@-webkit-keyframes bp-press-link-glow {
  0%, 100% {
    box-shadow: 0 0 3px #ff87d7, 0 0 7px #F70004;
    text-shadow: 0 0 2px #fff, 0 0 6px #ff87d7;
  }
  50% {
    box-shadow: 0 0 6px #fff, 0 0 12px #ff87d7, 0 0 16px #F70004;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff87d7;
  }
}
body.bp-presspack #apDiv2 p:not(.style1) a {
  display: inline-block;
  border: 1px solid #fff;
  padding: 2px 10px;
  line-height: 1.25;
  -webkit-animation: bp-press-link-glow 1.8s ease-in-out infinite;
  animation: bp-press-link-glow 1.8s ease-in-out infinite;
}
body.bp-presspack #apDiv2 .style1,
body.bp-presspack #apDiv2 .style1 a,
body.bp-presspack #apDiv2 .style1 font,
body.bp-presspack #apDiv2 .style1 em {
  font-size: 13px !important;
  font-style: italic;
  line-height: 1.35;
}
body.bp-presspack #apDiv2 p {
  margin: 10px 0;
}
@media (prefers-reduced-motion: reduce) {
  body.bp-presspack #apDiv2 p:not(.style1) a {
    -webkit-animation: none !important;
    animation: none !important;
    box-shadow: 0 0 10px #F70004;
    text-shadow: 0 0 8px #fff;
  }
}
body.bp-presspack #apDiv4 {
  color: #f4e7b0;
}
body.bp-presspack #apDiv4 p,
body.bp-presspack #apDiv4 font {
  line-height: 1.45;
}

@media (min-width: 901px) {
  body.bp-presspack .bp-press-cols {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }
  body.bp-presspack .bp-press-cols #apDiv2 {
    flex: 0 0 230px;
    width: 230px !important;
    max-width: 230px !important;
    margin: 16px 0 0 !important;
    padding: 4px 10px 16px !important;
  }
  body.bp-presspack .bp-press-cols #apDiv2 p:first-child {
    margin-top: 0;
  }
  body.bp-presspack .bp-press-cols #apDiv4 {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
  }
  body.bp-presspack .bp-press-cols #apDiv4,
  body.bp-presspack .bp-press-cols #apDiv4 p,
  body.bp-presspack .bp-press-cols #apDiv4 font {
    font-family: Arial, Helvetica, sans-serif !important;
    font-style: italic;
    font-size: 18px !important;
    line-height: 1.5;
    color: #f4e7b0 !important;
  }
  body.bp-presspack .bp-press-bio-link {
    display: none !important;
  }
  body.bp-presspack #apDiv3 {
    position: relative !important;
    max-width: 980px !important;
    margin: 16px auto 8px !important;
    padding: 0 !important;
  }
  body.bp-presspack #apDiv3 img {
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  body.bp-presspack #apDiv4 {
    display: none !important;
  }
  body.bp-presspack #apDiv2 {
    max-width: 100% !important;
    margin: 8px auto !important;
    padding: 8px 12px 16px !important;
  }
  body.bp-presspack .bp-press-bio-link {
    display: block;
  }
  body.bp-presspack #apDiv3 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 769px !important;
    margin: 16px auto 24px !important;
    padding: 0 !important;
    height: auto !important;
  }
  body.bp-presspack #apDiv3 img {
    pointer-events: none;
  }
}

/* Press bio page (phone Bio link target) */
body.bp-pressbio #apDiv3 img {
  display: block;
  width: 100%;
  max-width: 769px;
  margin: 0 auto;
  height: auto;
}
body.bp-pressbio #apDiv4 {
  padding: 0 8px;
  box-sizing: border-box;
}
body.bp-pressbio #apDiv4,
body.bp-pressbio #apDiv4 p,
body.bp-pressbio #apDiv4 font {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.5;
  color: #f4e7b0 !important;
}

/* His Story: desktop shows bio text; phone uses a hover/tap bubble */
body.bp-bio .bp-his-story-link {
  display: none;
}
body.bp-bio .bp-his-story-bubble {
  display: block;
}

/* ---- Jesse bio phone: photo, name graphic under feet, His Story bubble ---- */
@media (max-width: 900px) {
  body.bp-bio .bp-page-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.bp-bio .bp-page-wrap table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.bp-bio .bp-page-wrap tbody {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 360px 92px auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.bp-bio .bp-page-wrap tr {
    display: contents !important;
  }
  body.bp-bio .bp-page-wrap td:empty,
  body.bp-bio .bp-page-wrap td:has(img[src*="transparent"]) {
    display: none !important;
  }
  body.bp-bio .bp-page-wrap td:has(img[src*="all icons"]),
  body.bp-bio .bp-page-wrap td:has(img[src*="all%20icons"]) {
    display: none !important;
  }
  body.bp-bio .bp-bio-mugs {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 72px !important;
    max-width: 72px !important;
    height: 360px !important;
    display: block;
    overflow: visible;
  }
  body.bp-bio .bp-bio-mugs img[src*="mugsv"] {
    display: block;
    width: 72px !important;
    max-width: 72px !important;
    height: 360px !important;
    object-fit: contain;
    pointer-events: none;
  }
  body.bp-bio .bp-bio-mug-hit {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 4;
  }
  body.bp-bio .bp-bio-mug-jesse { top: 0.4%; height: 16.3%; }
  body.bp-bio .bp-bio-mug-lynn { top: 17.4%; height: 16.0%; }
  body.bp-bio .bp-bio-mug-logan { top: 33.6%; height: 15.8%; }
  body.bp-bio .bp-bio-mug-jon { top: 50.1%; height: 16.2%; }
  body.bp-bio .bp-bio-mug-david { top: 66.5%; height: 16.3%; }
  body.bp-bio .bp-bio-mug-joe { top: 83.4%; height: 16.2%; }
  body.bp-bio .bp-bio-hero {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: 100% !important;
    height: 360px !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }
  body.bp-bio .bp-bio-hero img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain;
  }
  body.bp-bio .bp-bio-banner {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    height: 92px !important;
    overflow: hidden;
  }
  body.bp-bio .bp-bio-banner img {
    display: block;
    width: 100%;
    height: 92px !important;
    object-fit: contain;
    object-position: left center;
  }
  body.bp-bio .bp-bio-alumni {
    grid-column: 1;
    grid-row: 3;
    width: 72px !important;
    margin: 4px 0 0;
    justify-self: start;
    align-self: start;
  }
  body.bp-bio .bp-bio-alumni img {
    display: block;
    width: 72px;
    height: auto;
  }
  body.bp-bio .bp-bio-copy {
    grid-column: 2;
    grid-row: 3;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 0;
    position: relative;
    overflow: visible;
    text-align: center;
    align-self: start;
  }
  body.bp-bio .bp-his-story {
    display: inline-block;
    position: relative;
    text-align: center;
    left: calc(-1 * (72px + 8px) / 2);
  }
  body.bp-bio .bp-his-story-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: #12000a;
    border: 2px solid #F70004;
    border-radius: 2px;
    font-family: Oswald, "Arial Narrow", Impact, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 16px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none !important;
    min-height: 32px;
    padding: 3px 18px;
    line-height: 1;
    -webkit-animation: bp-menu-glow 1.6s ease-in-out infinite;
    animation: bp-menu-glow 1.6s ease-in-out infinite;
  }
  body.bp-bio .bp-his-story.is-open .bp-his-story-link {
    -webkit-animation: none;
    animation: none;
    box-shadow: 0 0 10px #F70004;
  }
  body.bp-bio .bp-his-story-bubble {
    display: none;
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);
    top: auto;
    z-index: 50;
    width: min(300px, 78vw);
    max-height: min(52vh, 380px);
    margin: 0;
    padding: 12px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #1a1a1a;
    border: 2px solid #ff6699;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
    box-sizing: border-box;
    text-align: left;
  }
  body.bp-bio .bp-his-story-bubble::before {
    display: none;
  }
  body.bp-bio .bp-his-story:hover::after,
  body.bp-bio .bp-his-story:focus-within::after,
  body.bp-bio .bp-his-story.is-open::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    margin-left: -8px;
    bottom: 100%;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ff6699;
  }
  body.bp-bio .bp-his-story:hover .bp-his-story-bubble,
  body.bp-bio .bp-his-story:focus-within .bp-his-story-bubble,
  body.bp-bio .bp-his-story.is-open .bp-his-story-bubble {
    display: block;
  }
  body.bp-bio .bp-his-story-bubble p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
  }
  body.bp-bio .bp-his-story-bubble p:last-child {
    margin-bottom: 0;
  }
}