/* [project]/app/src/components/repertoire-section.css [app-client] (css) */
.rep-section {
  text-align: center;
}

.rep-eyebrow {
  font-family: var(--font-title-grunge), sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  margin-bottom: 1.2rem;
  font-size: .72rem;
  display: block;
}

.rep-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  text-align: center;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: .9;
}

.rep-intro {
  color: #a3a3a3;
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 2.4rem;
  font-size: 1.05rem;
  line-height: 1.82;
}

@keyframes rep-artiste-enter {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.rep-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-bottom: 2rem;
  display: grid;
}

.rep-artiste {
  box-shadow: inset 3px 0 0 var(--rep-color, #f00fac);
  animation: .5s cubic-bezier(.22, 1, .36, 1) both rep-artiste-enter;
  animation-delay: calc(var(--rep-i, 0) * 60ms);
  background: #0e0a10;
  border: 1px solid #171717;
  border-left: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  transition: background .25s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.rep-artiste:before {
  content: "";
  background: linear-gradient(90deg,
    var(--rep-color, #f00fac1f) 0%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  position: absolute;
  inset: 0;
}

.rep-artiste:hover {
  background: #161019;
}

.rep-artiste:hover:before {
  opacity: 1;
}

.rep-num {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .12em;
  color: #595959;
  text-align: right;
  width: 2ch;
  font-size: .72rem;
  transition: color .25s;
}

.rep-artiste:hover .rep-num {
  color: var(--rep-color, #f127b5);
}

.rep-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #ebebeb;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 900;
  line-height: 1;
  transition: color .25s, text-shadow .25s;
}

.rep-artiste:hover .rep-name {
  color: #fff;
  text-shadow: 0 0 20px var(--rep-color, #f00fac99);
}

.rep-genre {
  color: var(--rep-color, #f127b5);
  letter-spacing: .08em;
  text-align: right;
  white-space: nowrap;
  font-size: .72rem;
}

.rep-cta {
  width: fit-content;
  font-family: var(--font-display), sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: #f00fac;
  border: none;
  border-radius: 3px;
  margin: 0 auto;
  padding: 1rem 2.4rem;
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
  display: block;
  box-shadow: 0 4px 24px #f00fac4d;
}

.rep-cta:hover {
  background: #f349c0;
  box-shadow: 0 6px 32px #f00fac80;
}

@media (max-width: 560px) {
  .rep-grid {
    grid-template-columns: 1fr;
  }

  .rep-artiste {
    grid-template-rows: auto auto;
    grid-template-columns: auto 1fr;
    gap: .15rem 1rem;
    padding: 1.1rem 1.2rem;
  }

  .rep-num {
    grid-area: 1 / 1 / 3;
    align-self: center;
  }

  .rep-name {
    text-align: left;
    grid-area: 1 / 2;
    font-size: 1rem;
  }

  .rep-genre {
    text-align: left;
    white-space: normal;
    grid-area: 2 / 2;
    font-size: .65rem;
  }
}

/* [project]/app/src/app/groupe/groupe.css [app-client] (css) */
.gpm-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  display: grid;
}

.gpm-grid--crew {
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: 0;
  display: grid;
}

.gpm-grid--crew .gpm-card {
  opacity: .88;
  flex-direction: row;
}

.gpm-grid--crew .gpm-card:hover {
  opacity: 1;
}

.gpm-grid--crew .gpm-photo-wrap {
  width: 140px;
  aspect-ratio: unset;
  flex-shrink: 0;
}

.gpm-grid--crew .gpm-facts {
  border-top: none;
  border-left: 1px solid #141414;
  justify-content: center;
  padding: 1rem 1.2rem;
}

.gpm-grid--crew .gpm-name {
  font-size: 1rem;
}

.gpm-grid--crew .gpm-role {
  font-size: .65rem;
}

.gpm-grid--crew .gpm-fact-label {
  font-size: .62rem;
}

.gpm-grid--crew .gpm-fact-value {
  font-size: .82rem;
}

.gpm-grid--crew .gpm-fact-value--song {
  font-size: .78rem;
}

.gpm-grid--crew .gpm-influence-tag {
  font-size: .7rem;
}

@media (max-width: 700px) {
  .gpm-grid--crew {
    grid-template-columns: 1fr;
  }

  .gpm-grid--crew .gpm-card {
    flex-direction: column;
  }

  .gpm-grid--crew .gpm-photo-wrap {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-height: 200px;
  }

  .gpm-grid--crew .gpm-facts {
    border-top: 1px solid #141414;
    border-left: none;
  }
}

@media (max-width: 900px) {
  .gpm-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gpm-grid--crew {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gpm-grid, .gpm-grid--crew {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gpm-card {
  background: #0e0a10;
  border: 1px solid #171717;
  flex-direction: column;
  transition: border-color .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.gpm-card:hover {
  border-color: color-mix(in srgb, var(--gpm-accent) 40%, transparent);
}

.gpm-photo-wrap {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}

.gpm-photo-wrap img {
  object-fit: cover;
  filter: grayscale(30%) contrast(1.05);
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s;
  display: block;
}

.gpm-card:hover .gpm-photo-wrap img {
  filter: grayscale(0%) contrast(1.05);
  transform: scale(1.04);
}

.gpm-photo-overlay {
  background: linear-gradient(to top, #0c070deb 0%, #0000 55%);
  position: absolute;
  inset: 0;
}

.gpm-photo-name {
  padding: 1rem 1.2rem .9rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.gpm-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.gpm-role {
  letter-spacing: .1em;
  color: var(--gpm-accent, #f127b5);
  margin: .25rem 0 0;
  font-size: .72rem;
}

.gpm-facts {
  border-top: 1px solid #141414;
  flex-direction: column;
  flex: 1;
  gap: .85rem;
  padding: 1.2rem 1.2rem 1.4rem;
  display: flex;
}

.gpm-fact {
  flex-direction: column;
  gap: .2rem;
  display: flex;
}

.gpm-fact-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #666;
  font-size: .68rem;
}

.gpm-fact-value {
  color: #b8b8b8;
  font-size: .92rem;
  line-height: 1.5;
}

.gpm-fact-value--song {
  font-family: var(--font-display), sans-serif;
  color: var(--gpm-accent, #f33fbd);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
  font-weight: 700;
}

.gpm-influences {
  flex-wrap: wrap;
  gap: .3rem;
  display: flex;
}

.gpm-influence-tag {
  color: #8c8c8c;
  border: 1px solid #2e2e2e;
  border-radius: 2px;
  padding: .25rem .6rem;
  font-size: .78rem;
}

.gpc-section {
  padding-bottom: 0;
}

.gpc-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
  display: grid;
}

.gpc-card--0, .gpc-card--1, .gpc-card--2 {
  grid-column: span 2;
}

.gpc-card--3 {
  grid-column: 2 / span 2;
}

.gpc-card--4 {
  grid-column: 4 / span 2;
}

.gpc-crew-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 0;
  padding-bottom: .5rem;
  display: grid;
}

.gpc-card {
  border: 1px solid #1a1a1a;
  border-top: 3px solid var(--gpc-accent);
  background: #0f0f0f;
  border-radius: 4px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
  overflow: hidden;
}

.gpc-card:hover {
  box-shadow: 0 16px 48px #0000008c,
              0 0 0 1px color-mix(in srgb, var(--gpc-accent) 20%, transparent);
  transform: translateY(-6px);
}

.gpc-card-photo {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}

.gpc-card--crew .gpc-card-photo {
  aspect-ratio: 4 / 3;
}

.gpc-card-photo img {
  object-fit: cover;
  filter: grayscale(20%) contrast(1.06);
  width: 100%;
  height: 100%;
  transition: filter .45s, transform .5s cubic-bezier(.22, 1, .36, 1);
  display: block;
}

.gpc-card:hover .gpc-card-photo img {
  filter: grayscale(0%) contrast(1.03);
  transform: scale(1.04);
}

.gpc-card-body {
  flex-direction: column;
  gap: .4rem;
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
}

.gpc-card-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #e6e6e6;
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: .85;
  transition: color .2s;
}

.gpc-card:hover .gpc-card-name {
  color: #fff;
}

.gpc-card--crew .gpc-card-name {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

.gpc-card-role {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gpc-accent);
  margin: 0;
  font-size: .68rem;
}

.gpc-card-divider {
  border: none;
  border-top: 1px solid #1a1a1a;
  margin: .3rem 0;
}

.gpc-card-fact {
  color: gray;
  margin: 0;
  font-size: .84rem;
  line-height: 1.55;
}

.gpc-card-song {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .1em;
  color: #4d4d4d;
  margin: 0;
  font-size: .72rem;
  font-style: italic;
}

.gpc-card-influences {
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .1rem;
  display: flex;
}

.gpc-card-influences span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4d4d4d;
  border: 1px solid #1c1c1c;
  border-radius: 2px;
  padding: .18rem .5rem;
  font-size: .6rem;
}

@media (max-width: 900px) {
  .gpc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gpc-card--0, .gpc-card--1, .gpc-card--2, .gpc-card--3, .gpc-card--4 {
    grid-column: span 1;
  }
}

@media (max-width: 560px) {
  .gpc-grid, .gpc-crew-grid {
    grid-template-columns: 1fr;
  }
}

.gpm-section {
  padding-bottom: 0;
}

.gpm-rows {
  margin-top: 2rem;
}

.gpm-row {
  border-top: 1px solid #141414;
  grid-template-columns: 260px 1fr;
  transition: background .3s;
  display: grid;
  position: relative;
}

.gpm-rows .gpm-row:last-child {
  border-bottom: 1px solid #141414;
}

.gpm-row:hover {
  background: #0b080c99;
}

.gpm-row:before {
  content: "";
  background: var(--gpm-accent);
  opacity: 0;
  width: 2px;
  transition: opacity .25s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.gpm-row:hover:before {
  opacity: 1;
}

.gpm-row--flip {
  grid-template-columns: 1fr 260px;
}

.gpm-row--flip .gpm-row-photo {
  order: 2;
}

.gpm-row--flip .gpm-row-content {
  order: 1;
}

.gpm-row-photo {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}

.gpm-row-photo img {
  object-fit: cover;
  filter: grayscale(25%) contrast(1.06);
  width: 100%;
  height: 100%;
  transition: filter .45s, transform .5s cubic-bezier(.22, 1, .36, 1);
  display: block;
}

.gpm-row:hover .gpm-row-photo img {
  filter: grayscale(0%) contrast(1.04);
  transform: scale(1.03);
}

.gpm-row-content {
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: 2rem 2.5rem;
  display: flex;
}

.gpm-row-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #e0e0e0;
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .85;
  transition: color .2s;
}

.gpm-row:hover .gpm-row-name {
  color: #fff;
}

.gpm-row-role {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gpm-accent);
  margin: 0;
  font-size: .72rem;
}

.gpm-row-fact {
  color: #7a7a7a;
  max-width: 480px;
  margin: .2rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
}

.gpm-row-song {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .1em;
  color: #525252;
  margin: 0;
  font-size: .75rem;
  font-style: italic;
}

.gpm-row-influences {
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .2rem;
  display: flex;
}

.gpm-row-influences span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #525252;
  border: 1px solid #1f1f1f;
  border-radius: 2px;
  padding: .2rem .55rem;
  font-size: .62rem;
}

.gpm-crew-sep {
  align-items: center;
  gap: 1.2rem;
  padding: 3rem 0 2.5rem;
  display: flex;
}

.gpm-crew-sep-line {
  background: #1a1a1a;
  flex: 1;
  height: 1px;
}

.gpm-crew-sep-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #383838;
  white-space: nowrap;
  padding: 0 clamp(1rem, 4vw, 3rem);
  font-size: .58rem;
}

.gpm-crew {
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding-bottom: .5rem;
  display: grid;
}

.gpm-crew-card {
  background: #0a0a0a;
  border: 1px solid #141414;
  grid-template-columns: 180px 1fr;
  transition: background .3s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.gpm-crew-card:hover {
  background: #0e0a10;
}

.gpm-crew-card:before {
  content: "";
  background: var(--gpm-accent);
  opacity: 0;
  height: 2px;
  transition: opacity .25s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.gpm-crew-card:hover:before {
  opacity: 1;
}

.gpm-crew-photo {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}

.gpm-crew-photo img {
  object-fit: cover;
  filter: grayscale(40%) contrast(1.05);
  width: 100%;
  height: 100%;
  transition: filter .45s, transform .5s cubic-bezier(.22, 1, .36, 1);
  display: block;
}

.gpm-crew-card:hover .gpm-crew-photo img {
  filter: grayscale(10%) contrast(1.04);
  transform: scale(1.03);
}

.gpm-crew-content {
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
  padding: 1.6rem 1.8rem;
  display: flex;
}

.gpm-crew-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #d1d1d1;
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .85;
  transition: color .2s;
}

.gpm-crew-card:hover .gpm-crew-name {
  color: #fff;
}

.gpm-crew-role {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gpm-accent);
  margin: 0;
  font-size: .68rem;
}

.gpm-crew-fact {
  color: #707070;
  margin: .1rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
}

.gpm-crew-song {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .1em;
  color: #474747;
  margin: 0;
  font-size: .7rem;
  font-style: italic;
}

.gpm-crew-influences {
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .15rem;
  display: flex;
}

.gpm-crew-influences span {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #474747;
  border: 1px solid #1c1c1c;
  border-radius: 2px;
  padding: .17rem .48rem;
  font-size: .58rem;
}

@media (max-width: 700px) {
  .gpm-row, .gpm-row--flip {
    grid-template-columns: 1fr;
  }

  .gpm-row--flip .gpm-row-photo, .gpm-row--flip .gpm-row-content {
    order: 0;
  }

  .gpm-row-photo {
    aspect-ratio: 4 / 3;
    max-height: 260px;
  }

  .gpm-row-content {
    padding: 1.4rem 1.2rem;
  }

  .gpm-crew {
    grid-template-columns: 1fr;
  }

  .gpm-crew-card {
    grid-template-columns: 130px 1fr;
  }

  .gpm-crew-content {
    padding: 1.2rem;
  }
}

.gps-section {
  padding-bottom: 0;
}

.gps-intro {
  text-align: center;
  margin-bottom: 3rem;
}

.gps-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  margin: .4rem 0 .8rem;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: .88;
}

.gps-subtitle {
  color: #5c5c5c;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: .85rem;
}

.gps-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 0;
  position: relative;
  overflow: visible;
}

.gps-halo {
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  width: 42%;
  position: absolute;
  top: 0;
}

.gps-halo--l {
  background: radial-gradient(circle, #f019b01a 0%, #0000 70%);
  left: -8%;
}

.gps-halo--r {
  background: radial-gradient(circle, #973cdd14 0%, #0000 70%);
  right: -8%;
}

.gps-grid {
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
  display: grid;
  position: relative;
}

.gps-spot {
  cursor: default;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  display: flex;
  position: relative;
}

.gps-spot-ring {
  border: 1.5px solid var(--gps-accent, #f019b0);
  opacity: 0;
  pointer-events: none;
  width: 136px;
  height: 136px;
  box-shadow: 0 0 18px var(--gps-accent, #f019b0 / .35),
              inset 0 0 12px var(--gps-accent, #f019b0 / .15);
  border-radius: 50%;
  transition: opacity .3s, transform .35s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: -8px -8px -8px calc(50% - 68px);
  transform: scale(.88);
}

.gps-spot:hover .gps-spot-ring {
  opacity: 1;
  transform: scale(1);
}

.gps-spot-photo {
  background: #0f0f0f;
  border: 2px solid #1f1f1f;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  transition: border-color .3s, transform .35s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden;
}

.gps-spot:hover .gps-spot-photo {
  border-color: var(--gps-accent, #f019b0);
  transform: translateY(-4px);
}

.gps-spot-photo img {
  object-fit: cover;
  filter: grayscale(30%) contrast(1.05);
  width: 100%;
  height: 100%;
  transition: filter .4s;
}

.gps-spot:hover .gps-spot-photo img {
  filter: grayscale(0%) contrast(1.03);
}

.gps-spot-photo:after {
  content: "";
  background: radial-gradient(ellipse, var(--gps-accent, #f019b0 / .22) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  width: 60px;
  height: 40px;
  transition: opacity .3s;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.gps-spot:hover .gps-spot-photo:after {
  opacity: 1;
}

.gps-spot-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d6d6d6;
  margin: 0;
  font-size: 1.1rem;
  transition: color .2s;
}

.gps-spot:hover .gps-spot-name {
  color: var(--gps-accent, #f349c0);
}

.gps-spot-role {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #525252;
  margin: 0;
  font-size: .82rem;
}

.gps-card {
  border: 1px solid #1f1f1f;
  border-top: 2px solid var(--gps-accent, #f019b0);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  background: #140d17;
  border-radius: 4px;
  flex-direction: column;
  gap: .4rem;
  width: 240px;
  padding: 1.2rem 1.4rem;
  transition: opacity .25s, transform .28s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  position: absolute;
  bottom: calc(100% + 1.2rem);
  left: 50%;
  transform: translateX(-50%)translateY(6px);
  box-shadow: 0 16px 48px #0009;
}

.gps-card--up {
  top: calc(100% + 1.2rem);
  bottom: auto;
  transform: translateX(-50%)translateY(-6px);
}

.gps-spot:hover .gps-card {
  opacity: 1;
  transform: translateX(-50%)translateY(0);
}

.gps-spot:hover .gps-card--up {
  transform: translateX(-50%)translateY(0);
}

.gps-card:before {
  content: "";
  background: #140d17;
  border-bottom: 1px solid #1f1f1f;
  border-right: 1px solid #1f1f1f;
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%)rotate(45deg);
}

.gps-card--up:before {
  top: -6px;
  bottom: auto;
  transform: translateX(-50%)rotate(-135deg);
}

.gps-card-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #f0f0f0;
  margin: 0;
  font-size: 1rem;
}

.gps-card-role {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gps-accent, #f349c0);
  margin: 0 0 .3rem;
  font-size: .82rem;
}

.gps-card-fact {
  color: #949494;
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
}

.gps-card-song {
  color: #575757;
  margin: 0;
  font-size: .84rem;
  font-style: italic;
}

.gps-card-influences {
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .2rem;
  display: flex;
}

.gps-card-influences span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4d4d4d;
  border: 1px solid #1c1c1c;
  border-radius: 2px;
  padding: .18rem .45rem;
  font-size: .57rem;
}

.gps-stage-edge {
  background: linear-gradient(to right, #0000, #242424 15%, #2e2e2e 50%, #242424 85%, #0000);
  justify-content: center;
  align-items: center;
  height: 3px;
  margin-top: 2.5rem;
  display: flex;
  position: relative;
}

.gps-stage-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #3d3d3d;
  background: #0b080c;
  padding: 0 .8rem;
  font-size: .55rem;
  position: absolute;
  top: -.95rem;
}

.gps-audience-label {
  text-align: center;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #333;
  margin: .6rem 0 0;
  padding-bottom: 2rem;
  font-size: .82rem;
}

.gps-tech-row {
  border-top: 1px solid #141414;
  margin-top: 0;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.gps-tech-eyebrow {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #3d3d3d;
  text-align: center;
  margin: 0 0 1.8rem;
  font-size: .82rem;
}

.gps-tech-list {
  justify-content: center;
  gap: 3.5rem;
  display: flex;
}

.gps-tech-item {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.gps-tech-photo {
  background: #0f0f0f;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  transition: border-color .25s;
  overflow: hidden;
}

.gps-tech-item:hover .gps-tech-photo {
  border-color: var(--gps-accent, #f019b0);
}

.gps-tech-photo img {
  object-fit: cover;
  filter: grayscale(60%);
  width: 100%;
  height: 100%;
  transition: filter .3s;
}

.gps-tech-item:hover .gps-tech-photo img {
  filter: grayscale(20%);
}

.gps-tech-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #999;
  margin: 0;
  font-size: .82rem;
}

.gps-tech-role {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #474747;
  margin: 0;
  font-size: .82rem;
}

@media (max-width: 640px) {
  .gps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem .6rem;
  }

  .gps-spot-photo {
    width: 80px;
    height: 80px;
  }

  .gps-spot-ring {
    width: 96px;
    height: 96px;
    left: calc(50% - 48px);
  }

  .gps-spot-name {
    font-size: .78rem;
  }

  .gps-card {
    width: 200px;
    font-size: .8rem;
  }

  .gps-tech-list {
    gap: 2rem;
  }
}

@media (max-width: 400px) {
  .gps-spot--back-l, .gps-spot--back-r, .gps-spot--front-l, .gps-spot--front-r {
    display: none;
  }

  .gps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gp-hero {
  background-image: url("/groupe/hero.webp");
  background-position: 50% 35%;
  background-size: cover;
  border-bottom: 1px solid #121212;
  padding: 5.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}

.gp-hero:before {
  content: "";
  background: linear-gradient(#0e02129e 0%, #0e02128c 45%, #0e0212e0 100%);
  position: absolute;
  inset: 0;
}

.gp-hero-spots {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.gp-hero-spot-l {
  aspect-ratio: 1;
  background: radial-gradient(circle, #f00fac21 0%, #0000 65%);
  width: 55%;
  position: absolute;
  top: -80%;
  left: -8%;
}

.gp-hero-spot-r {
  aspect-ratio: 1;
  background: radial-gradient(circle, #8d1ae617 0%, #0000 65%);
  width: 40%;
  position: absolute;
  top: -50%;
  right: 0;
}

.gp-hero-inner {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.gp-hero-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f7f7f7;
  text-shadow: 0 0 35px #f00fac52, 0 0 80px #8d1ae629;
  letter-spacing: .01em;
  margin: .6rem 0 1.2rem;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: .85;
}

.gp-hero-sub {
  color: #b8b8b8;
  max-width: 50ch;
  margin: 0 0 1.8rem;
  font-size: 1.14rem;
  line-height: 1.82;
}

.gp-hero-pills {
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  display: flex;
}

.gp-pill {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f457c5;
  background: #f00fac12;
  border: 1px solid #f00fac4d;
  border-radius: 3px;
  padding: .4rem 1rem;
  font-size: .82rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}

.gp-pill:hover {
  color: #f9a9e1;
  background: #f00fac24;
  border-color: #f00fac99;
}

.gp-stats-strip {
  background: #080808;
  border-bottom: 1px solid #141414;
}

.gp-stats-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  display: flex;
}

.gp-stat {
  border-right: 1px solid #171717;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1.8rem 2.5rem;
  display: flex;
}

.gp-stat:last-child {
  border-right: none;
}

@media (max-width: 640px) {
  .gp-stat {
    border-bottom: 1px solid #171717;
    border-right: none;
    padding: 1.2rem 1.5rem;
  }
}

.gp-stat-num {
  font-family: var(--font-display), sans-serif;
  color: #f0f0f0;
  text-shadow: 0 0 18px #f00fac38;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.gp-stat-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7a7a;
  font-size: .78rem;
}

.gp-identity-grid {
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  gap: 4rem;
  display: grid;
}

@media (max-width: 768px) {
  .gp-identity-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.gp-identity-text {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.gp-identity-text p {
  color: #c2c2c2;
  margin: 0 0 .85rem;
  font-size: 1.1rem;
  line-height: 1.88;
}

.gp-identity-text p:last-child {
  margin: 0;
}

.gp-identity-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  margin: .6rem 0 1.8rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: .92;
}

.gp-identity-visual {
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.gp-identity-photo {
  object-fit: cover;
  filter: grayscale(15%) contrast(1.05);
  opacity: .88;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@media (max-width: 768px) {
  .gp-identity-visual {
    min-height: 75vh;
    position: relative;
  }

  .gp-identity-photo {
    object-fit: contain;
    object-position: center top;
  }
}

.gp-photo-break {
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  display: grid;
  overflow: hidden;
}

.gp-photo-break-cell {
  aspect-ratio: 2;
  filter: grayscale(30%) contrast(1.05);
  opacity: .65;
  transition: opacity .3s, filter .3s;
  position: relative;
  overflow: hidden;
}

.gp-photo-break-cell:hover {
  opacity: .9;
  filter: grayscale(0%) contrast(1.05);
}

.gp-photo-break-cell img {
  object-fit: cover;
}

.gp-photo-break > img {
  aspect-ratio: 2;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.05);
  opacity: .65;
  width: 100%;
  transition: opacity .3s, filter .3s;
  display: block;
}

.gp-photo-break > img:hover {
  opacity: .9;
  filter: grayscale(0%) contrast(1.05);
}

@media (max-width: 640px) {
  .gp-photo-break {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gp-pillars-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  display: grid;
}

@media (max-width: 768px) {
  .gp-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.gp-pillar {
  background: #110c13;
  border: 1px solid #171717;
  flex-direction: column;
  gap: .7rem;
  padding: 2rem 1.8rem;
  transition: border-color .2s, background .2s;
  display: flex;
}

.gp-pillar:hover {
  border-color: var(--gp-pillar-color, #f00fac / .5);
  background: #140e16;
}

.gp-pillar-icon {
  filter: drop-shadow(0 0 12px var(--gp-pillar-color, #f00fac / .4));
  margin-bottom: .3rem;
  font-size: 2.8rem;
  line-height: 1;
}

.gp-pillar-num {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f33fbdcc;
  font-size: .84rem;
}

.gp-pillar-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #e0e0e0;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.gp-pillar-body {
  color: #b3b3b3;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.82;
}

.gp-photo-strip {
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  height: clamp(160px, 22vw, 320px);
  display: grid;
}

@media (max-width: 768px) {
  .gp-photo-strip {
    grid-template-columns: repeat(2, 1fr);
    height: clamp(240px, 50vw, 400px);
  }
}

@media (max-width: 460px) {
  .gp-photo-strip {
    grid-template-columns: 1fr;
    height: auto;
  }

  .gp-photo-strip-cell {
    height: 200px;
  }
}

.gp-photo-strip-cell {
  position: relative;
  overflow: hidden;
}

.gp-photo-strip-cell img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.55) brightness(.45);
  width: 100%;
  height: 100%;
  transition: filter .4s, transform .5s;
}

.gp-photo-strip-cell:hover img {
  filter: saturate(.9) brightness(.65);
  transform: scale(1.05);
}

.gp-identity-quote {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .02em;
  color: #f457c5;
  border-left: 3px solid #f00fac80;
  margin: 1.6rem 0 0;
  padding: .6rem 0 .6rem 1.2rem;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-style: normal;
  line-height: 1.55;
}

.gp-highlights-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  display: grid;
}

@media (max-width: 640px) {
  .gp-highlights-grid {
    grid-template-columns: 1fr;
  }
}

.gp-highlight-card {
  background: #0e0a10;
  border: 1px solid #171717;
  flex-direction: column;
  gap: .65rem;
  padding: 2rem 2rem 1.8rem;
  transition: border-color .2s, background .2s;
  display: flex;
}

.gp-highlight-card:hover {
  background: #140e16;
  border-color: #f00fac40;
}

.gp-highlight-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.gp-highlight-label {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #e0e0e0;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

.gp-highlight-desc {
  color: #adadad;
  margin: 0;
  font-size: 1rem;
  line-height: 1.78;
}

.gp-section-eyebrow {
  text-align: center;
  margin-bottom: 1.4rem;
}

.gp-repertoire-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  text-align: center;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: .9;
}

.gp-repertoire-intro {
  color: #a3a3a3;
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 2.4rem;
  font-size: 1.05rem;
  line-height: 1.82;
}

@keyframes gp-artiste-enter {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.gp-artistes-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-bottom: 2rem;
  display: grid;
}

.gp-artiste {
  box-shadow: inset 3px 0 0 var(--gp-art-color, #f00fac);
  animation: .5s cubic-bezier(.22, 1, .36, 1) both gp-artiste-enter;
  animation-delay: calc(var(--gp-i, 0) * 60ms);
  background: #0e0a10;
  border: 1px solid #171717;
  border-left: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  transition: background .25s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.gp-artiste:before {
  content: "";
  background: linear-gradient(90deg,
    var(--gp-art-color, #f00fac1f) 0%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  position: absolute;
  inset: 0;
}

.gp-artiste:hover {
  background: #161019;
}

.gp-artiste:hover:before {
  opacity: 1;
}

.gp-artiste-num {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .12em;
  color: #595959;
  text-align: right;
  width: 2ch;
  font-size: .84rem;
  transition: color .25s;
}

.gp-artiste:hover .gp-artiste-num {
  color: var(--gp-art-color, #f127b5);
}

.gp-artiste-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #ebebeb;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 900;
  line-height: 1;
  transition: color .25s, text-shadow .25s;
}

.gp-artiste:hover .gp-artiste-name {
  color: #fff;
  text-shadow: 0 0 20px var(--gp-art-color, #f00fac99);
}

.gp-artiste-genre {
  color: var(--gp-art-color, #f127b5);
  letter-spacing: .08em;
  text-align: right;
  white-space: nowrap;
  font-size: .84rem;
}

@media (max-width: 560px) {
  .gp-artistes-grid {
    grid-template-columns: 1fr;
  }

  .gp-artiste {
    grid-template-rows: auto auto;
    grid-template-columns: auto 1fr;
    gap: .15rem 1rem;
    padding: 1.1rem 1.2rem;
  }

  .gp-artiste-num {
    grid-area: 1 / 1 / 3;
    align-self: center;
  }

  .gp-artiste-name {
    text-align: left;
    grid-area: 1 / 2;
    font-size: 1rem;
  }

  .gp-artiste-genre {
    text-align: left;
    white-space: normal;
    grid-area: 2 / 2;
    font-size: .65rem;
  }
}

.gp-repertoire-cta {
  width: fit-content;
  font-family: var(--font-display), sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: #f00fac;
  border: none;
  border-radius: 3px;
  margin: 0 auto;
  padding: 1rem 2.4rem;
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
  display: block;
  box-shadow: 0 4px 24px #f00fac4d;
}

.gp-repertoire-cta:hover {
  background: #f349c0;
  box-shadow: 0 6px 32px #f00fac80;
}

.gpm-bands-section {
  padding-top: 0;
}

.gpm-bands {
  margin-top: 2rem;
}

.gpm-band {
  border-top: 1px solid #141414;
  grid-template-columns: 220px 1fr;
  gap: 0;
  transition: background .3s;
  display: grid;
  position: relative;
}

.gpm-band:last-child {
  border-bottom: 1px solid #141414;
}

.gpm-band:hover {
  background: #0b080c99;
}

.gpm-band:before {
  content: "";
  background: var(--gpm-accent);
  opacity: 0;
  width: 2px;
  transition: opacity .25s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.gpm-band:hover:before {
  opacity: 1;
}

.gpm-band--flip {
  grid-template-columns: 1fr 220px;
}

.gpm-band--flip .gpm-band-photo {
  order: 2;
}

.gpm-band--flip .gpm-band-content {
  order: 1;
}

.gpm-band-photo {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}

.gpm-band-photo img {
  object-fit: cover;
  filter: grayscale(25%) contrast(1.06);
  width: 100%;
  height: 100%;
  transition: filter .45s, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.gpm-band:hover .gpm-band-photo img {
  filter: grayscale(0%) contrast(1.04);
  transform: scale(1.03);
}

.gpm-band-content {
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: 2rem 2.5rem;
  display: flex;
}

.gpm-band--flip .gpm-band-content {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.gpm-band-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #e0e0e0;
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .85;
  transition: color .2s;
}

.gpm-band:hover .gpm-band-name {
  color: #fff;
}

.gpm-band-role {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gpm-accent);
  margin: 0;
  font-size: .84rem;
}

.gpm-band-fact {
  color: #7a7a7a;
  max-width: 480px;
  margin: .2rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
}

.gpm-band-song {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .1em;
  color: #525252;
  margin: 0;
  font-size: .75rem;
  font-style: italic;
}

.gpm-band-influences {
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .2rem;
  display: flex;
}

.gpm-band-influences span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #525252;
  border: 1px solid #1f1f1f;
  border-radius: 2px;
  padding: .2rem .55rem;
  font-size: .82rem;
}

.gpm-band--tech .gpm-band-name {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}

.gpm-band--tech {
  opacity: .85;
}

.gpm-band--tech:hover {
  opacity: 1;
}

.gpm-tech-divider {
  border-top: 1px solid #141414;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 0;
  display: flex;
}

.gpm-tech-divider:after {
  content: "";
  background: #1a1a1a;
  flex: 1;
  height: 1px;
}

.gpm-tech-divider-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #424242;
  white-space: nowrap;
  padding-left: clamp(1rem, 4vw, 3rem);
  font-size: .82rem;
}

.gpm-crew-pair {
  border-top: 1px solid #141414;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  display: grid;
}

.gpm-band--crew .gpm-band-name {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}

.gpm-crew-pair .gpm-band:first-child {
  border-bottom: 1px solid #141414;
  border-right: 1px solid #141414;
}

.gpm-crew-pair .gpm-band:last-child, .gpm-crew-pair .gpm-band:last-child:not(:only-child) {
  border-bottom: 1px solid #141414;
}

@media (max-width: 700px) {
  .gpm-band, .gpm-band--flip {
    grid-template-columns: 1fr;
  }

  .gpm-band--flip .gpm-band-photo, .gpm-band--flip .gpm-band-content {
    order: 0;
  }

  .gpm-band-photo {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }

  .gpm-band-content {
    padding: 1.4rem 1.2rem;
  }

  .gpm-crew-pair {
    grid-template-columns: 1fr;
  }

  .gpm-crew-pair .gpm-band:first-child {
    border-right: none;
  }
}

.gp-temoignages-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  text-align: center;
  margin: 0 0 2.5rem;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: .9;
}

.gpt-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  display: grid;
}

@media (max-width: 768px) {
  .gpt-grid {
    grid-template-columns: 1fr;
  }
}

.gpt-card {
  border: 1px solid #171717;
  border-top: 3px solid var(--gpt-color, #f019b0);
  background: #0e0a10;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 1.8rem 1.8rem;
  transition: background .25s, transform .25s, box-shadow .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.gpt-card:hover {
  background: #140e16;
  transform: translateY(-4px);
  box-shadow: 0 12px 36px #00000080;
}

.gpt-mark {
  color: var(--gpt-color, #f019b0);
  opacity: .15;
  margin: 0;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: .8;
  transition: opacity .25s;
  display: block;
}

.gpt-card:hover .gpt-mark {
  opacity: .28;
}

.gpt-quote {
  color: #d1d1d1;
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.78;
}

.gpt-footer {
  border-top: 1px solid #ffffff12;
  justify-content: space-between;
  align-items: flex-end;
  gap: .8rem;
  padding-top: 1rem;
  display: flex;
}

.gpt-source {
  flex-direction: column;
  gap: .15rem;
  display: flex;
}

.gpt-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #bdbdbd;
  font-size: .88rem;
  font-weight: 700;
}

.gpt-role {
  color: #707070;
  font-size: .75rem;
}

.gpt-tag {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gpt-color, #f127b5);
  border: 1px solid var(--gpt-color, #f00fac / .4);
  white-space: nowrap;
  background: var(--gpt-color, #f00fac / .08);
  border-radius: 2px;
  flex-shrink: 0;
  padding: .28rem .65rem;
  font-size: .82rem;
}

.gp-events-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  display: grid;
}

@media (max-width: 640px) {
  .gp-events-grid {
    grid-template-columns: 1fr;
  }
}

.gp-event-card {
  background: #110c13;
  border: 1px solid #171717;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto;
  gap: .3rem;
  padding: 1.6rem 1.8rem;
  text-decoration: none;
  transition: border-color .2s, background .2s;
  display: grid;
}

.gp-event-card:hover {
  background: #161019;
  border-color: #f00fac59;
}

.gp-event-label {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d6d6d6;
  grid-area: 1 / 1;
  font-size: .9rem;
  font-weight: 700;
  transition: color .2s;
}

.gp-event-card:hover .gp-event-label {
  color: #fff;
}

.gp-event-desc {
  color: #616161;
  grid-area: 2 / 1;
  font-size: .8rem;
  line-height: 1.5;
}

.gp-event-arrow {
  color: #f00fac80;
  grid-area: 1 / 2 / 3;
  align-self: center;
  font-size: 1.1rem;
  transition: color .2s, transform .2s;
}

.gp-event-card:hover .gp-event-arrow {
  color: #f66fcd;
  transform: translateX(3px);
}

.gp-timeline-section {
  padding: 4rem 0;
}

.gp-timeline-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #f0f0f0;
  text-align: center;
  margin: 0 0 3rem;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: .9;
}

.gp-timeline {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 2.5rem;
  position: relative;
}

.gp-timeline:before {
  content: "";
  background: linear-gradient(#0000, #f00fac66 10% 90%, #0000);
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.gp-timeline-item {
  margin-bottom: 2.8rem;
  position: relative;
}

.gp-timeline-item:last-child {
  margin-bottom: 0;
}

.gp-timeline-dot {
  background: #f00fac;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: .4rem;
  left: -2.94rem;
  box-shadow: 0 0 12px #f00fac99;
}

.gp-timeline-year {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f349c0;
  margin-bottom: .3rem;
  font-size: .75rem;
}

.gp-timeline-event {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #e0e0e0;
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
}

.gp-timeline-desc {
  color: #949494;
  margin: 0;
  font-size: .95rem;
  line-height: 1.68;
}

.gp-gallery-strip {
  grid-template-rows: 200px 200px;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2px;
  display: grid;
}

@media (max-width: 768px) {
  .gp-gallery-strip {
    grid-template-rows: repeat(3, 180px);
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-gallery-strip .gp-gallery-cell--big {
    grid-area: auto / 1 / auto / -1;
  }
}

@media (max-width: 460px) {
  .gp-gallery-strip {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .gp-gallery-strip .gp-gallery-cell {
    height: 200px;
  }

  .gp-gallery-strip .gp-gallery-cell--big {
    height: 250px;
  }
}

.gp-gallery-cell {
  position: relative;
  overflow: hidden;
}

.gp-gallery-cell--big {
  grid-row: 1 / 3;
}

.gp-gallery-cell img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.5) brightness(.45);
  width: 100%;
  height: 100%;
  transition: filter .45s, transform .55s;
}

.gp-gallery-cell:hover img {
  filter: saturate(.85) brightness(.65);
  transform: scale(1.06);
}

.gp-gallery-cell-label {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #737373;
  opacity: 0;
  background: linear-gradient(to top, #0e0212d9, #0000);
  padding: .55rem .9rem;
  font-size: .5rem;
  transition: opacity .3s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.gp-gallery-cell:hover .gp-gallery-cell-label {
  opacity: 1;
}

.gp-live-quote-section {
  background: #080808;
  border-top: 1px solid #121212;
  border-bottom: 1px solid #121212;
  padding: 5rem 0;
}

.gp-live-quote-inner {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
}

.gp-live-quote-mark {
  font-family: var(--font-display), sans-serif;
  color: #f00fac33;
  font-size: 5rem;
  line-height: .6;
  display: block;
}

.gp-live-quote-text {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #e0e0e0;
  max-width: 26ch;
  margin: 0;
  font-size: clamp(1.3rem, 3.5vw, 2.1rem);
  line-height: 1.2;
}

.gp-live-quote-source {
  color: #474747;
  letter-spacing: .06em;
  font-size: .75rem;
}

.gp-live-quote-sep {
  background: #f00fac59;
  width: 40px;
  height: 1px;
  display: block;
}

.gp-social-section {
  padding: 4rem 0;
}

.gp-social-inner {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  display: flex;
}

.gp-social-title {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  color: #e0e0e0;
  text-align: center;
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.gp-social-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  display: flex;
}

.gp-social-btn {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8c8c8c;
  background: #0d0d0d;
  border: 1px solid #1f1f1f;
  border-radius: 3px;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.4rem;
  font-size: .82rem;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.gp-social-btn:hover {
  color: #ccc;
  background: #f00fac0f;
  border-color: #f00fac66;
}

.gp-social-btn-icon {
  font-size: 1rem;
}

@keyframes tsc-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tsc-outer {
  flex-direction: column;
  gap: 2.2rem;
  display: flex;
  position: relative;
}

.tsc-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  display: grid;
}

.tsc-grid--next .tsc-card, .tsc-grid--prev .tsc-card {
  animation: .45s cubic-bezier(.22, 1, .36, 1) both tsc-in;
  animation-delay: calc(var(--tsc-i, 0) * 75ms);
}

.tsc-card {
  border: 1px solid #171717;
  border-top: 3px solid var(--tsc-color, #f019b0);
  background: #0e0a0f;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.8rem 1.6rem 1.5rem;
  transition: border-color .2s, background .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tsc-card:hover {
  background: #110c12;
}

.tsc-bg-mark {
  color: var(--tsc-color, #f019b0);
  opacity: .07;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: Georgia, serif;
  font-size: 9rem;
  line-height: 1;
  position: absolute;
  top: -.3rem;
  right: .9rem;
}

.tsc-top {
  z-index: 1;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.tsc-tag {
  font-family: var(--font-display), sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tsc-color, #f127b5);
  white-space: nowrap;
  border: 1px solid #242424;
  border-radius: 2px;
  padding: .25rem .7rem;
  font-size: .57rem;
}

.tsc-quote {
  color: #c7c7c7;
  z-index: 1;
  flex: 1;
  margin: 0;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.76;
  position: relative;
}

.tsc-footer {
  z-index: 1;
  border-top: 1px solid #ffffff12;
  flex-direction: column;
  gap: .12rem;
  padding-top: 1rem;
  display: flex;
  position: relative;
}

.tsc-name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #adadad;
  font-size: .8rem;
  font-weight: 900;
}

.tsc-role {
  color: #5c5c5c;
  font-size: .82rem;
}

.tsc-arrow {
  z-index: 10;
  color: #999;
  cursor: pointer;
  background: #110c12;
  border: 1px solid #242424;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
  line-height: 1;
  transition: color .2s, border-color .2s, background .2s, opacity .2s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.tsc-arrow:hover {
  color: #fff;
  background: #19121c;
  border-color: #595959;
}

.tsc-arrow--prev {
  left: -1.4rem;
}

.tsc-arrow--next {
  right: -1.4rem;
}

.tsc-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

.tsc-nav {
  justify-content: center;
  align-items: center;
  gap: .55rem;
  display: flex;
}

.tsc-dot {
  cursor: pointer;
  background: #2e2e2e;
  border: none;
  border-radius: 2px;
  width: 24px;
  height: 3px;
  padding: 0;
  transition: background .25s, width .25s;
}

.tsc-dot--active {
  background: #f019b0;
  width: 42px;
}

.tsc-dot:not(.tsc-dot--active):hover {
  background: #525252;
}

@media (max-width: 700px) {
  .tsc-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 701px) and (max-width: 960px) {
  .tsc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gp-acdn-section {
  padding-bottom: 0;
}

.gp-acdn-wrap {
  background: #0e0a10;
  border-top: 1px solid #171717;
  border-bottom: 1px solid #171717;
  padding-left: 62px;
}

.gp-acdn-strip {
  background: #0e0a10;
  gap: 3px;
  height: 540px;
  display: flex;
}

.gp-acdn-strip:has(.gp-acdn-slice:hover) .gp-acdn-slice {
  flex: .35;
}

.gp-acdn-slice:hover {
  flex: 3.5 !important;
}

.gp-acdn-slice {
  cursor: pointer;
  background: #0b080d;
  flex: 1;
  transition: flex .45s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.gp-acdn-photo {
  object-fit: cover;
  object-position: var(--pos, center 15%);
  filter: grayscale() contrast(1.05);
  width: 100%;
  height: 100%;
  transition: filter .5s, transform .5s;
  display: block;
  position: absolute;
  inset: 0;
}

.gp-acdn-slice:hover .gp-acdn-photo {
  filter: grayscale(0%) contrast();
  transform: scale(1.02);
}

.gp-acdn-tint {
  background: var(--acc);
  mix-blend-mode: multiply;
  opacity: .4;
  z-index: 1;
  transition: opacity .5s;
  position: absolute;
  inset: 0;
}

.gp-acdn-slice:hover .gp-acdn-tint {
  opacity: 0;
}

.gp-acdn-grad {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, #0d0410fa 0%, #0d0410d9 35%, #0d041033 65%, #0000 100%);
  position: absolute;
  inset: 0;
}

.gp-acdn-vert {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: var(--font-title-rockstone), "Montserrat", sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .15em;
  z-index: 3;
  max-height: 80%;
  font-size: 11px;
  font-weight: 900;
  transition: opacity .2s;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%)rotate(180deg);
}

.gp-acdn-slice:hover .gp-acdn-vert {
  opacity: 0;
}

.gp-acdn-content {
  z-index: 4;
  opacity: 0;
  padding: 24px 22px 28px;
  transition: opacity .3s .1s, transform .3s .1s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(8px);
}

.gp-acdn-slice:hover .gp-acdn-content {
  opacity: 1;
  transform: translateY(0);
}

.gp-acdn-role {
  font-family: var(--font-heading), monospace;
  letter-spacing: .2em;
  color: var(--acc);
  text-transform: uppercase;
  margin: 0 0 5px;
  font-size: .65rem;
  font-weight: 700;
}

.gp-acdn-name {
  font-family: var(--font-title-display), "Montserrat", sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px #0009;
  margin: 0 0 8px;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 900;
  line-height: .92;
}

.gp-acdn-sep {
  background: var(--acc);
  width: 32px;
  height: 2px;
  box-shadow: 0 0 8px var(--acc);
  margin-bottom: 10px;
}

.gp-acdn-fact-label {
  font-family: var(--font-heading), monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
  opacity: .95;
  margin-top: 9px;
  margin-bottom: 4px;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.gp-acdn-content .gp-acdn-fact-label:first-of-type {
  margin-top: 0;
}

.gp-acdn-fact {
  color: #e0e0e0;
  text-shadow: 0 1px 4px #00000080;
  margin: 0;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.4;
}

.gp-acdn-song {
  color: #fff;
  text-shadow: 0 1px 4px #00000080;
  margin: 0;
  font-size: .88rem;
  font-style: italic;
  font-weight: 600;
}

.gp-acdn-infl {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  display: flex;
}

.gp-acdn-infl span {
  background: color-mix(in srgb, var(--acc) 22%, #170e1bd9);
  border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
  font-family: var(--font-heading), monospace;
  box-shadow: 0 0 6px color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: 2px;
  padding: 3px 8px;
  font-weight: 700;
}

.gp-acdn-divider {
  background: #28192e;
  flex: 0 0 2px;
  align-self: stretch;
}

.gp-acdn-slice--crew .gp-acdn-photo {
  filter: grayscale() contrast(1.05);
}

.gp-acdn-slice--crew:hover .gp-acdn-photo {
  filter: grayscale(0%) contrast();
}

.gp-acdn-slice--crew .gp-acdn-tint {
  opacity: .4;
}

.gp-acdn-crew-badge {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: var(--font-heading), monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 14%, #0c070de0);
  border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent);
  z-index: 6;
  max-height: 45%;
  padding: 5px 4px;
  font-size: .58rem;
  font-weight: 700;
  transition: opacity .2s;
  position: absolute;
  top: 16px;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%)rotate(180deg);
}

.gp-acdn-slice--crew:hover .gp-acdn-crew-badge {
  opacity: 0;
}

@media (max-width: 820px) {
  .gp-acdn-strip {
    height: 420px;
  }

  .gp-acdn-name {
    font-size: 22px;
  }

  .gp-acdn-fact, .gp-acdn-song {
    font-size: .7rem;
  }
}

@media (max-width: 560px) {
  .gp-acdn-wrap {
    padding-left: 0;
  }

  .gp-acdn-strip {
    flex-direction: column;
    gap: 2px;
    height: auto;
    display: flex;
  }

  .gp-acdn-strip:has(.gp-acdn-slice:hover) .gp-acdn-slice {
    flex: unset;
  }

  .gp-acdn-slice:hover {
    flex: unset !important;
  }

  .gp-acdn-slice {
    height: auto;
    min-height: unset;
    padding-top: 220px;
    overflow: visible;
  }

  .gp-acdn-photo {
    filter: grayscale(20%) contrast(1.05);
    height: 220px;
    position: absolute;
    inset: 0 0 auto;
  }

  .gp-acdn-tint {
    opacity: .15;
    height: 220px;
    position: absolute;
    inset: 0 0 auto;
  }

  .gp-acdn-grad {
    height: 220px;
    position: absolute;
    inset: 0 0 auto;
  }

  .gp-acdn-vert {
    display: none;
  }

  .gp-acdn-content {
    background: #161019;
    padding: 14px 16px 18px;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    opacity: 1 !important;
    transform: none !important;
  }

  .gp-acdn-fact-label {
    margin-top: 8px;
    font-size: .55rem;
    display: block;
  }

  .gp-acdn-fact, .gp-acdn-song {
    font-size: .8rem;
    display: block;
  }

  .gp-acdn-infl {
    display: flex;
  }

  .gp-acdn-infl span {
    font-size: .6rem;
  }

  .gp-acdn-sep {
    display: block;
  }

  .gp-acdn-name {
    font-size: 26px;
    line-height: 1;
  }

  .gp-acdn-role {
    font-size: .64rem;
  }

  .gp-acdn-crew-badge {
    display: none;
  }

  .gp-acdn-divider {
    flex: 0 0 4px;
    width: 100%;
    height: 4px;
  }
}

@media (max-width: 420px) {
  .gpm-grid, .gpm-grid--crew {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=app_src_133~v3o._.css.map*/