html[data-page="index"] .campaign-board {
  isolation: isolate;
}

html[data-page="index"] .campaign-grid {
  z-index: 3;
  display: block;
  padding: 0;
}

html[data-page="index"] .campaign-photo {
  position: absolute;
  z-index: 3;
  min-width: 0;
  box-sizing: border-box;
}

html[data-page="index"] .campaign-photo:nth-child(1) {
  left: 12%;
  top: 10.5%;
  width: 17%;
  height: 39%;
  transform: rotate(-1.5deg);
}

html[data-page="index"] .campaign-photo:nth-child(2) {
  left: 41%;
  top: 10%;
  width: 17%;
  height: 33%;
  transform: rotate(1deg);
}

html[data-page="index"] .campaign-photo:nth-child(3) {
  left: 65.5%;
  top: 10.5%;
  width: 17%;
  height: 39%;
  transform: rotate(-.8deg);
}

html[data-page="index"] .campaign-photo:nth-child(4) {
  left: 12.5%;
  top: 55%;
  width: 17%;
  height: 36%;
  transform: rotate(1deg);
}

html[data-page="index"] .campaign-photo:nth-child(5) {
  left: 41%;
  top: 48%;
  width: 17%;
  height: 43%;
  transform: rotate(-.8deg);
}

html[data-page="index"] .campaign-photo:nth-child(6) {
  left: 65.5%;
  top: 55%;
  width: 17%;
  height: 36%;
  transform: rotate(1.2deg);
}

html[data-page="index"] .campaign-photo figcaption {
  z-index: 6;
  left: 7px;
  right: auto;
  bottom: 7px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  padding: 5px 6px;
  border: 1px solid rgba(20, 9, 17, .11);
  box-shadow: 0 5px 14px rgba(45, 17, 37, .14);
  font-size: clamp(.4rem, .62vw, .5rem);
  letter-spacing: .07em;
  text-overflow: clip;
  white-space: nowrap;
}

html[data-page="index"] .campaign-board::before {
  z-index: 7;
}

html[data-page="index"] .campaign-board::after {
  z-index: 8;
}

html[data-page="index"] .campaign-chrome-ring {
  z-index: 1;
  left: 51.5%;
  right: auto;
  top: 42%;
  width: clamp(104px, 10vw, 142px);
  height: clamp(104px, 10vw, 142px);
  border-width: 10px;
  opacity: .34;
  box-shadow:
    inset 0 0 0 2px rgba(15, 7, 13, .1),
    0 0 0 2px rgba(15, 7, 13, .08),
    0 14px 26px rgba(46, 17, 37, .1);
  transform: translateX(-50%);
}

html[data-page="index"] .campaign-sticker {
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
}

html[data-page="index"] .campaign-sticker-power {
  right: 3.25%;
  top: 43.5%;
  width: clamp(72px, 6.2vw, 88px);
  padding: 13px;
  font-size: clamp(.46rem, .52vw, .58rem);
  transform: rotate(8deg);
}

html[data-page="index"] .campaign-sticker-us {
  left: 6%;
  bottom: 3.4%;
  padding: 9px 13px;
  font-size: clamp(.48rem, .54vw, .56rem);
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: center;
}

/* Keep Wonyoung centered in the BANGERS crop and align her with the BLACKHOLE lineup. */
html[data-page="index"] .concept-bangers img {
  object-position: 76% 34%;
  transform: scale(1.07) translateY(-9%);
  transform-origin: center top;
}

html[data-page="index"] .concept-bangers:hover img,
html[data-page="index"] .concept-bangers:focus-within img {
  transform: scale(1.11) translateY(-9%);
}

html[data-page="index"] .concept-bangers::after {
  background:
    linear-gradient(180deg, rgba(8, 5, 9, .04) 18%, rgba(8, 5, 9, .28) 48%, rgba(8, 5, 9, .96) 100%),
    linear-gradient(90deg, rgba(8, 5, 9, .2), transparent 68%);
}

/* Show the BLACKHOLE lineup over a full-height cinematic backdrop. */
html[data-page="index"] .concept-blackhole {
  isolation: isolate;
  background: #08070a;
}

html[data-page="index"] .concept-blackhole::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px;
  background:
    linear-gradient(180deg, rgba(8, 7, 10, .08), rgba(8, 7, 10, .58)),
    url("https://i.ytimg.com/vi/1Lmy7qwmSMc/maxresdefault.jpg") center / cover no-repeat;
  filter: blur(13px) saturate(.82) brightness(.58);
  opacity: .72;
  transform: scale(1.08);
}

html[data-page="index"] .concept-blackhole img {
  z-index: 1;
  inset: 5px 0 auto;
  width: 100%;
  height: 53%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: saturate(.9) contrast(1.03) brightness(.76);
  transform: scale(1.2);
  transform-origin: center top;
}

html[data-page="index"] .concept-blackhole:hover img,
html[data-page="index"] .concept-blackhole:focus-within img {
  filter: saturate(.96) contrast(1.03) brightness(.82);
  transform: scale(1.24);
}

html[data-page="index"] .concept-blackhole::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8, 5, 9, .06) 12%, rgba(8, 5, 9, .2) 34%, rgba(8, 5, 9, .78) 55%, rgba(8, 5, 9, .97) 100%);
}

@media (max-width: 1180px) {
  html[data-page="index"] .campaign-photo:nth-child(1),
  html[data-page="index"] .campaign-photo:nth-child(4) {
    left: 10.5%;
    width: 18%;
  }

  html[data-page="index"] .campaign-photo:nth-child(2),
  html[data-page="index"] .campaign-photo:nth-child(5) {
    left: 40.5%;
    width: 18%;
  }

  html[data-page="index"] .campaign-photo:nth-child(3),
  html[data-page="index"] .campaign-photo:nth-child(6) {
    left: 65%;
    width: 18%;
  }

  html[data-page="index"] .campaign-sticker-power {
    right: 3%;
  }

  html[data-page="index"] .campaign-sticker-us {
    left: 5.5%;
  }

  html[data-page="index"] .campaign-chrome-ring {
    width: 118px;
    height: 118px;
  }
}

@media (max-width: 900px) {
  html[data-page="index"] .campaign-board {
    min-height: 680px;
  }

  html[data-page="index"] .campaign-photo:nth-child(1),
  html[data-page="index"] .campaign-photo:nth-child(4) {
    left: 10%;
    width: 18.5%;
  }

  html[data-page="index"] .campaign-photo:nth-child(2),
  html[data-page="index"] .campaign-photo:nth-child(5) {
    left: 40.5%;
    width: 18.5%;
  }

  html[data-page="index"] .campaign-photo:nth-child(3),
  html[data-page="index"] .campaign-photo:nth-child(6) {
    left: 64.5%;
    width: 18.5%;
  }

  html[data-page="index"] .campaign-sticker-power {
    right: 3%;
    top: 44%;
    width: 72px;
    padding: 11px;
    font-size: .46rem;
    opacity: .94;
  }

  html[data-page="index"] .campaign-sticker-us {
    left: 5%;
    bottom: 3%;
    padding: 8px 11px;
    font-size: .48rem;
  }

  html[data-page="index"] .campaign-chrome-ring {
    left: 52%;
    top: 42.5%;
    width: 104px;
    height: 104px;
    border-width: 9px;
    opacity: .27;
  }

  html[data-page="index"] .concept-bangers img {
    object-position: 76% 34%;
    transform: scale(1.06) translateY(-8.5%);
  }

  html[data-page="index"] .concept-bangers:hover img,
  html[data-page="index"] .concept-bangers:focus-within img {
    transform: scale(1.1) translateY(-8.5%);
  }

  html[data-page="index"] .concept-blackhole img {
    inset: 4px 0 auto;
    height: 51%;
    transform: scale(1.18);
  }

  html[data-page="index"] .concept-blackhole:hover img,
  html[data-page="index"] .concept-blackhole:focus-within img {
    transform: scale(1.22);
  }
}

@media (max-width: 640px) {
  html[data-page="index"] .campaign-board {
    min-height: 620px;
  }

  html[data-page="index"] .campaign-photo:nth-child(1),
  html[data-page="index"] .campaign-photo:nth-child(4) {
    left: 6.5%;
    width: 25.5%;
  }

  html[data-page="index"] .campaign-photo:nth-child(2),
  html[data-page="index"] .campaign-photo:nth-child(5) {
    left: 37.25%;
    width: 25.5%;
  }

  html[data-page="index"] .campaign-photo:nth-child(3),
  html[data-page="index"] .campaign-photo:nth-child(6) {
    left: 68%;
    width: 25.5%;
  }

  html[data-page="index"] .campaign-photo figcaption {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 5px;
    font-size: .4rem;
    letter-spacing: .04em;
  }

  html[data-page="index"] .campaign-sticker-power,
  html[data-page="index"] .campaign-sticker-us,
  html[data-page="index"] .campaign-chrome-ring {
    display: none;
  }

  html[data-page="index"] .concept-bangers img {
    object-position: 74% 34%;
    transform: scale(1.05) translateY(-8%);
  }

  html[data-page="index"] .concept-bangers:hover img,
  html[data-page="index"] .concept-bangers:focus-within img {
    transform: scale(1.08) translateY(-8%);
  }

  html[data-page="index"] .concept-blackhole img {
    inset: 3px 0 auto;
    height: 49%;
    transform: scale(1.16);
  }

  html[data-page="index"] .concept-blackhole:hover img,
  html[data-page="index"] .concept-blackhole:focus-within img {
    transform: scale(1.19);
  }
}