/* =========================================================

   TRYHARD — ARTISTS / EDITORIAL ROSTER

========================================================= */



:root {

  --artists-bg: #050505;

  --artists-panel: #080808;

  --artists-white: #f3f3f1;

  --artists-red: #ef1726;

  --artists-text: #a0a0a0;

  --artists-line: #242424;

  --artists-pad: clamp(22px, 4vw, 60px);

  --artists-max: 1600px;

}





/* =========================================================

   PAGE

========================================================= */



.roster-body {

  min-width: 320px;

  min-height: 100%;

  background: var(--artists-bg);

  color: var(--artists-white);

  overflow-x: hidden;

}



.roster-page {

  width: min(100%, var(--artists-max));

  margin: 0 auto;

  padding-top: 70px;

  background: var(--artists-bg);

}



.roster-body .desktop-nav .roster-nav-active {

  color: var(--artists-red);

}





/* =========================================================

   HERO

========================================================= */



.artists-hero {

  position: relative;



  min-height: clamp(390px, 54vh, 620px);



  padding:

    clamp(42px, 6vw, 90px)

    var(--artists-pad)

    clamp(34px, 4vw, 58px);



  display: grid;



  grid-template-columns:

    54px

    minmax(0, 1fr)

    minmax(220px, .35fr);



  grid-template-rows:

    1fr

    auto;



  column-gap:

    clamp(24px, 3vw, 48px);



  overflow: hidden;



  isolation: isolate;



  border-bottom:

    1px solid var(--artists-line);



  background:

    var(--artists-bg);

}



.artists-hero::before {

  content: "";



  position: absolute;



  top: 0;

  right: 12%;



  width: 1px;

  height: 100%;



  background:

    linear-gradient(

      to bottom,

      transparent,

      rgba(239, 23, 38, .55) 22%,

      rgba(239, 23, 38, .08) 65%,

      transparent

    );



  pointer-events: none;

}



.artists-hero::after {

  content: "TRYHARD";



  position: absolute;



  right: -1.5vw;

  bottom: -3.5vw;



  z-index: -1;



  color:

    rgba(255,255,255,.018);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(150px, 22vw, 360px);



  line-height: .7;



  letter-spacing: -.045em;



  pointer-events: none;



  user-select: none;

}



.artists-hero-number {

  grid-column: 1;

  grid-row: 1;



  color:

    var(--artists-red);



  font-size: 10px;



  font-weight: 900;



  letter-spacing: .08em;

}



.artists-hero-copy {

  grid-column: 2;

  grid-row: 1;



  align-self: center;



  min-width: 0;

}



.artists-kicker {

  display: block;



  margin-bottom: 18px;



  color:

    var(--artists-red);



  font-size: 9px;



  font-weight: 900;



  line-height: 1;



  letter-spacing: .16em;



  text-transform: uppercase;

}



.artists-hero h1 {

  margin: 0;



  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(105px, 12vw, 190px);



  font-weight: 400;



  line-height: .78;



  letter-spacing: -.045em;



  text-transform: uppercase;

}



.artists-hero h1 > span {

  color:

    var(--artists-red);

}



.artists-hero-subtitle {

  margin-top:

    clamp(26px, 3vw, 42px);



  color:

    var(--artists-white);



  font-size:

    clamp(16px, 1.35vw, 21px);



  font-weight: 800;



  line-height: 1.2;



  letter-spacing: -.02em;



  text-transform: uppercase;

}



.artists-hero-meta {

  grid-column: 3;



  grid-row:

    1 / 3;



  align-self: end;



  justify-self: stretch;



  padding:

    18px

    0

    4px

    clamp(22px, 3vw, 44px);



  display: flex;



  flex-direction: column;



  gap: 9px;



  border-left:

    1px solid

    var(--artists-line);



  color: #8b8b8b;



  font-size: 8px;



  font-weight: 800;



  line-height: 1.35;



  letter-spacing: .1em;



  text-transform: uppercase;

}



.artists-hero-meta span:first-child {

  color:

    var(--artists-red);

}



.artists-hero-line {

  grid-column: 2;



  grid-row: 2;



  width: 100%;



  height: 1px;



  margin-top: 26px;



  background:

    linear-gradient(

      90deg,

      var(--artists-red) 0 42px,

      var(--artists-line) 42px 100%

    );

}





/* =========================================================

   FEATURED

========================================================= */



.featured-artist {

  padding:

    clamp(60px, 7vw, 105px)

    var(--artists-pad);



  border-bottom:

    1px solid

    var(--artists-line);

}



.featured-heading {

  margin-bottom: 20px;



  display: flex;



  align-items: center;



  gap: 14px;



  font-size: 9px;



  font-weight: 900;



  line-height: 1;



  letter-spacing: .13em;



  text-transform: uppercase;

}



.featured-index {

  color:

    var(--artists-red);

}



.featured-label {

  color: #8a8a8a;

}



.featured-card {

  --rb-rotate-x: 0deg;

  --rb-rotate-y: 0deg;



  --rb-image-x: 0px;

  --rb-image-y: 0px;



  position: relative;



  display: grid;



  grid-template-columns:

    minmax(0, 1.45fr)

    minmax(330px, .55fr);



  min-height: 640px;



  border:

    1px solid

    var(--artists-line);



  background:

    var(--artists-panel);



  perspective: 1400px;



  transform:

    rotateX(var(--rb-rotate-x))

    rotateY(var(--rb-rotate-y));



  transform-style:

    preserve-3d;



  transform-origin:

    center center;



  transition:

    transform .48s cubic-bezier(.16,1,.3,1),

    border-color .28s ease;

}



.featured-card:hover {

  border-color:

    rgba(239,23,38,.6);

}



.featured-media {

  position: relative;



  min-width: 0;



  overflow: hidden;



  border-right:

    1px solid

    var(--artists-line);



  background: #0b0b0b;

}



.featured-media img {

  width: 100%;



  height: 100%;



  min-height: 640px;



  object-fit: cover;



  object-position:

    center 36%;



  filter:

    saturate(.76)

    contrast(1.08)

    brightness(.9);



  transform:

    scale(1.035)

    translate3d(

      var(--rb-image-x),

      var(--rb-image-y),

      0

    );



  transition:

    transform .48s cubic-bezier(.16,1,.3,1),

    filter .4s ease;

}



.featured-card:hover

.featured-media img {

  filter:

    saturate(.95)

    contrast(1.07)

    brightness(.95);

}



.featured-media-overlay {

  position: absolute;



  inset: 0;



  background:

    linear-gradient(

      90deg,

      transparent 60%,

      rgba(5,5,5,.22)

    ),

    linear-gradient(

      0deg,

      rgba(0,0,0,.54),

      transparent 42%

    );



  pointer-events: none;

}



.featured-media-index {

  position: absolute;



  left: 22px;



  bottom: 18px;



  color:

    rgba(255,255,255,.92);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(52px, 5vw, 82px);



  line-height: .8;

}



.featured-info {

  min-width: 0;



  padding:

    clamp(26px, 3vw, 46px);



  display: flex;



  flex-direction: column;



  justify-content:

    space-between;



  background:

    linear-gradient(

      145deg,

      rgba(239,23,38,.03),

      transparent 38%

    ),

    var(--artists-panel);

}



.featured-info-top {

  display: flex;



  justify-content:

    space-between;



  gap: 20px;



  padding-bottom: 15px;



  border-bottom:

    1px solid

    var(--artists-line);



  color: #717171;



  font-size: 7px;



  font-weight: 800;



  line-height: 1.3;



  letter-spacing: .11em;



  text-transform: uppercase;

}



.featured-info-top span:first-child {

  color:

    var(--artists-red);

}



.featured-info-main {

  margin:

    auto

    0;

}



.featured-info-main h2 {

  margin: 0;



  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(82px, 8vw, 132px);



  font-weight: 400;



  line-height: .76;



  letter-spacing: -.04em;



  text-transform: uppercase;

}



.featured-info-main p {

  margin-top: 20px;



  color:

    var(--artists-red);



  font-size: 10px;



  font-weight: 900;



  letter-spacing: .1em;



  text-transform: uppercase;

}



.featured-info-bottom {

  padding-top: 20px;



  display: flex;



  align-items:

    flex-end;



  justify-content:

    space-between;



  gap: 26px;



  border-top:

    1px solid

    var(--artists-line);

}



.featured-info-bottom > div {

  display: flex;



  flex-direction:

    column;



  gap: 8px;

}



.featured-meta-label {

  color: #626262;



  font-size: 7px;



  font-weight: 800;



  letter-spacing: .1em;



  text-transform: uppercase;

}



.featured-info-bottom strong {

  color: #d4d4d4;



  font-size: 9px;



  font-weight: 800;



  line-height: 1.35;



  letter-spacing: .04em;



  text-transform: uppercase;

}



.featured-view {

  flex-shrink: 0;



  color:

    var(--artists-white);



  font-size: 9px;



  font-weight: 900;



  letter-spacing: .06em;



  text-transform: uppercase;

}





/* =========================================================

   ROSTER

========================================================= */



.artists-roster {

  padding:

    clamp(62px, 7vw, 105px)

    var(--artists-pad)

    clamp(75px, 8vw, 120px);



  border-bottom:

    1px solid

    var(--artists-line);

}



.artists-roster-header {

  margin-bottom:

    clamp(32px, 4vw, 58px);



  display: flex;



  align-items:

    flex-end;



  justify-content:

    space-between;



  gap: 30px;

}



.roster-eyebrow {

  display: block;



  margin-bottom: 12px;



  color:

    var(--artists-red);



  font-size: 9px;



  font-weight: 900;



  line-height: 1;



  letter-spacing: .15em;



  text-transform: uppercase;

}



.artists-roster-header h2 {

  margin: 0;



  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(60px, 6vw, 102px);



  font-weight: 400;



  line-height: .8;



  letter-spacing: -.035em;



  text-transform: uppercase;

}



.artists-roster-header h2 span {

  color:

    var(--artists-red);

}



.roster-count {

  padding-left: 24px;



  display: flex;



  flex-direction:

    column;



  gap: 6px;



  border-left:

    1px solid

    var(--artists-line);



  text-align: right;

}



.roster-count strong {

  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size: 34px;



  font-weight: 400;



  line-height: .8;

}



.roster-count span {

  color: #6d6d6d;



  font-size: 7px;



  font-weight: 800;



  letter-spacing: .11em;



  text-transform: uppercase;

}





/* =========================================================

   ARTIST GRID

========================================================= */



.artist-grid {

  display: grid;



  grid-template-columns:

    repeat(

      3,

      minmax(0, 1fr)

    );



  gap:

    clamp(20px, 2.5vw, 38px)

    clamp(14px, 1.8vw, 28px);

}



.artist-card {

  --rb-rotate-x: 0deg;

  --rb-rotate-y: 0deg;



  --rb-image-x: 0px;

  --rb-image-y: 0px;



  position: relative;



  min-width: 0;



  display: block;



  color:

    var(--artists-white);



  perspective: 1200px;



  transform:

    translateZ(0)

    rotateX(var(--rb-rotate-x))

    rotateY(var(--rb-rotate-y));



  transform-style:

    preserve-3d;



  transform-origin:

    center center;



  transition:

    transform

    .42s

    cubic-bezier(.16,1,.3,1);

}



.artist-card-media {

  position: relative;



  aspect-ratio:

    4 / 5;



  overflow: hidden;



  border:

    1px solid

    var(--artists-line);



  background:

    #0a0a0a;



  transition:

    border-color

    .28s ease;

}



.artist-card:hover

.artist-card-media {

  border-color:

    rgba(239,23,38,.65);

}



.artist-card-media img {

  width: 100%;



  height: 100%;



  object-fit: cover;



  object-position: center;



  filter:

    grayscale(.72)

    saturate(.72)

    contrast(1.08)

    brightness(.86);



  transform:

    scale(1.035)

    translate3d(

      var(--rb-image-x),

      var(--rb-image-y),

      0

    );



  transition:

    transform .45s cubic-bezier(.16,1,.3,1),

    filter .42s ease;

}



.artist-card:hover

.artist-card-media img {

  filter:

    grayscale(0)

    saturate(.95)

    contrast(1.06)

    brightness(.93);

}



.artist-card-number {

  position: absolute;



  top: 14px;



  left: 14px;



  min-width: 34px;



  height: 27px;



  padding:

    0

    8px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  background:

    rgba(5,5,5,.84);



  border:

    1px solid

    rgba(255,255,255,.15);



  color:

    var(--artists-red);



  font-size: 8px;



  font-weight: 900;



  letter-spacing: .08em;



  backdrop-filter:

    blur(8px);

}



.artist-card-body {

  position: relative;



  padding:

    17px

    2px

    0;

}



.artist-card-body::before {

  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 0;



  height: 2px;



  background:

    var(--artists-red);



  transition:

    width

    .38s

    cubic-bezier(.16,1,.3,1);

}



.artist-card:hover

.artist-card-body::before {

  width: 100%;

}



.artist-card-title {

  display: flex;



  align-items:

    flex-start;



  justify-content:

    space-between;



  gap: 15px;

}



.artist-card-title h3 {

  margin: 0;



  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(38px, 3.5vw, 58px);



  font-weight: 400;



  line-height: .84;



  letter-spacing: -.03em;



  text-transform: uppercase;

}



.artist-card-arrow {

  padding-top: 4px;



  color: #696969;



  font-size: 17px;



  transition:

    color .25s ease,

    transform .3s cubic-bezier(.16,1,.3,1);

}



.artist-card:hover

.artist-card-arrow {

  color:

    var(--artists-red);



  transform:

    translate(

      3px,

      -3px

    );

}



.artist-card-meta {

  margin-top: 14px;



  display: flex;



  justify-content:

    space-between;



  gap: 18px;



  color: #797979;



  font-size: 7px;



  font-weight: 800;



  line-height: 1.4;



  letter-spacing: .08em;



  text-transform: uppercase;

}



.artist-card-meta span:first-child {

  color: #aaa;

}





/* =========================================================

   LOCKED

========================================================= */



.artist-card--locked {

  cursor: default;

}



.artist-card--locked

.artist-card-media {

  border-color:

    rgba(255,255,255,.08);

}



.artist-card-placeholder {

  display: grid;



  place-items: center;



  background:

    linear-gradient(

      135deg,

      rgba(255,255,255,.018),

      transparent 55%

    ),

    #070707;

}



.artist-card-placeholder::before,

.artist-card-placeholder::after {

  content: "";



  position: absolute;



  background:

    rgba(255,255,255,.045);



  pointer-events: none;

}



.artist-card-placeholder::before {

  width: 1px;



  height: 100%;

}



.artist-card-placeholder::after {

  width: 100%;



  height: 1px;

}



.locked-ghost {

  position: absolute;



  right: -4%;



  bottom: -2%;



  color:

    rgba(255,255,255,.025);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(135px, 15vw, 235px);



  line-height: .7;



  user-select: none;

}



.locked-center {

  position: relative;



  z-index: 2;



  display: flex;



  flex-direction:

    column;



  align-items: center;



  gap: 15px;



  text-align: center;

}



.locked-center span {

  color:

    var(--artists-red);



  font-size: 8px;



  font-weight: 900;



  letter-spacing: .15em;



  text-transform: uppercase;

}



.locked-center strong {

  color:

    rgba(255,255,255,.18);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(70px, 7vw, 105px);



  font-weight: 400;



  line-height: .8;

}



.artist-card--locked

.artist-card-title h3 {

  color:

    rgba(255,255,255,.25);

}



.locked-mark {

  color:

    rgba(255,255,255,.18);



  font-family:

    "Anton",

    sans-serif;



  font-size: 24px;



  line-height: .8;

}





/* =========================================================

   FINAL

========================================================= */



.artists-final {

  position: relative;



  min-height:

    clamp(410px, 58vh, 650px);



  padding:

    clamp(70px, 8vw, 120px)

    var(--artists-pad);



  display: flex;



  flex-direction: column;



  justify-content: center;



  overflow: hidden;



  border-bottom:

    1px solid

    var(--artists-line);

}



.artists-final::after {

  content: "06";



  position: absolute;



  right:

    var(--artists-pad);



  bottom: -20px;



  color:

    rgba(255,255,255,.022);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(180px, 24vw, 380px);



  line-height: .7;



  pointer-events: none;

}



.artists-final-index {

  margin-bottom: 25px;



  color:

    var(--artists-red);



  font-size: 8px;



  font-weight: 900;



  line-height: 1;



  letter-spacing: .14em;



  text-transform: uppercase;

}



.artists-final-statement {

  position: relative;



  z-index: 2;



  max-width: 1100px;



  margin: 0;



  color:

    var(--artists-white);



  font-family:

    "Anton",

    sans-serif;



  font-size:

    clamp(70px, 9vw, 150px);



  font-weight: 400;



  line-height: .8;



  letter-spacing: -.04em;



  text-transform: uppercase;

}



.artists-final-statement > span {

  color:

    var(--artists-red);

}



.artists-final-link {

  position: relative;



  z-index: 2;



  align-self:

    flex-start;



  margin-top:

    clamp(34px, 4vw, 55px);



  padding:

    14px

    19px;



  border:

    1px solid

    var(--artists-red);



  color:

    var(--artists-white);



  font-size: 8px;



  font-weight: 900;



  letter-spacing: .08em;



  text-transform: uppercase;



  transition:

    background .25s ease,

    color .25s ease;

}



.artists-final-link:hover {

  background:

    var(--artists-red);



  color: #fff;

}





/* =========================================================

   REACT BITS

========================================================= */



.rb-scroll-char {

  display: inline-block;



  opacity: 0;



  transform:

    translate3d(

      0,

      115%,

      0

    )

    scaleY(1.85)

    scaleX(.78);



  transform-origin:

    50% 0%;



  will-change:

    transform,

    opacity;

}



.rb-proximity-char {

  display: inline-block;



  transform-origin:

    50% 65%;



  will-change:

    transform,

    filter;

}



.rb-magnet {

  --rb-magnet-x: 0px;

  --rb-magnet-y: 0px;



  transform:

    translate3d(

      var(--rb-magnet-x),

      var(--rb-magnet-y),

      0

    );



  will-change: transform;



  transition:

    transform

    .4s

    cubic-bezier(.16,1,.3,1);

}



.rb-magnet.is-magnetized {

  transition:

    transform

    .1s

    ease-out;

}



.artist-card,

.featured-card {

  opacity: 0;



  translate:

    0

    28px;

}



.artist-card.is-visible,

.featured-card.is-visible {

  opacity: 1;



  translate:

    0

    0;



  transition:

    opacity .7s cubic-bezier(.16,1,.3,1),

    translate .7s cubic-bezier(.16,1,.3,1),

    transform .42s cubic-bezier(.16,1,.3,1);

}





/* =========================================================

   FOOTER

========================================================= */



.roster-body

.roster-footer {

  min-height: 100px;



  border-top: 0;



  background:

    var(--artists-bg);

}



.roster-body

.roster-footer img {

  width: 150px;

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 1100px) {



  .artists-hero {

    grid-template-columns:

      44px

      minmax(0, 1fr)

      minmax(180px, .34fr);

  }



  .featured-card {

    grid-template-columns:

      minmax(0, 1.2fr)

      minmax(300px, .8fr);



    min-height: 560px;

  }



  .featured-media img {

    min-height: 560px;

  }



  .artist-grid {

    grid-template-columns:

      repeat(

        2,

        minmax(0, 1fr)

      );

  }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 700px) {



  .roster-page {

    padding-top: 70px;

  }



  .artists-hero {

    min-height: 395px;



    padding:

      30px

      18px

      28px;



    display: block;

  }



  .artists-hero-number {

    margin-bottom: 30px;

  }



  .artists-kicker {

    margin-bottom: 14px;

  }



  .artists-hero h1 {

    font-size:

      clamp(78px, 24vw, 116px);

  }



  .artists-hero-subtitle {

    max-width: 290px;



    margin-top: 26px;



    font-size:

      clamp(15px, 4.6vw, 19px);

  }



  .artists-hero-meta {

    position: absolute;



    right: 18px;



    bottom: 24px;



    width: auto;



    padding:

      0

      0

      0

      17px;



    border-left:

      1px solid

      var(--artists-line);



    text-align: right;

  }



  .artists-hero-line {

    display: none;

  }



  .artists-hero::before {

    right: 18px;

  }



  .featured-artist,

  .artists-roster,

  .artists-final {

    padding-left: 18px;

    padding-right: 18px;

  }



  .featured-card {

    display: block;



    min-height: 0;

  }



  .featured-media {

    aspect-ratio:

      4 / 5;



    border-right: 0;



    border-bottom:

      1px solid

      var(--artists-line);

  }



  .featured-media img {

    min-height: 0;

  }



  .featured-info {

    min-height: 350px;



    padding:

      25px

      20px;

  }



  .featured-info-main {

    margin:

      45px

      0;

  }



  .featured-info-main h2 {

    font-size:

      clamp(78px, 25vw, 108px);

  }



  .featured-info-bottom {

    align-items:

      flex-start;



    flex-direction:

      column;

  }



  .artists-roster-header {

    align-items:

      flex-start;

  }



  .artists-roster-header h2 {

    font-size:

      clamp(58px, 17vw, 86px);

  }



  .roster-count {

    padding-left: 15px;

  }



  .artist-grid {

    grid-template-columns:

      1fr;



    gap: 38px;

  }



  .artist-card-title h3 {

    font-size:

      clamp(48px, 14vw, 66px);

  }



  .artist-card-meta {

    font-size: 7px;

  }



  .artists-final {

    min-height: 470px;

  }



  .artists-final-statement {

    font-size:

      clamp(62px, 18vw, 96px);

  }



  .roster-body

  .roster-footer {

    min-height: 130px;



    padding:

      22px

      18px;



    display: grid;



    grid-template-columns:

      repeat(3, auto);



    gap:

      17px

      22px;



    justify-content:

      start;



    align-items:

      center;



    font-size: 7px;

  }



  .roster-body

  .roster-footer img {

    width: 110px;



    grid-column:

      1 / -1;

  }



  .roster-body

  .roster-footer > :last-child {

    grid-column:

      1 / -1;



    justify-self:

      start;

  }



}





/* =========================================================

   SMALL MOBILE

========================================================= */



@media (max-width: 430px) {



  .artists-hero {

    min-height: 370px;

  }



  .artists-hero h1 {

    font-size:

      clamp(72px, 23vw, 98px);

  }



  .featured-info-top {

    flex-direction:

      column;



    gap: 7px;

  }



  .artist-card-meta {

    flex-direction:

      column;



    gap: 5px;

  }



}





/* =========================================================

   NO HOVER

========================================================= */



@media (hover: none) {



  .artist-card-media img {

    filter:

      grayscale(.22)

      saturate(.85)

      contrast(1.06)

      brightness(.9);

  }



}





/* =========================================================

   REDUCED MOTION

========================================================= */



@media (prefers-reduced-motion: reduce) {





  .artist-card,

  .featured-card {

    opacity:

      1 !important;



    translate:

      none !important;



    transform:

      none !important;

  }



  .rb-magnet,

  .rb-proximity-char {

    transform:

      none !important;



    transition:

      none !important;

  }



  .artist-card-media img,

  .featured-media img {

    transform:

      none !important;



    transition:

      none !important;

  }



}

/* =========================================================

   ARTISTS HERO — CLEAN / EDITORIAL

========================================================= */



.artists-hero h1 {

  color: #f5f5f2 !important;

  font-size: clamp(72px, 8vw, 128px) !important;

  line-height: .84 !important;

  letter-spacing: -.035em !important;

}



.artists-hero h1 span {

  color: #ef1726 !important;

}



.artists-kicker {

  color: rgba(245,245,242,.78) !important;

}



.artists-hero-number {

  color: #ef1726 !important;

}



.artists-hero-subtitle {

  color: rgba(245,245,242,.62) !important;

}

/* =========================================================

   ARTISTS — HERO CLEAN

========================================================= */



.artists-hero {

  background: #050505 !important;

}



.artists-hero-number {

  color: #ef1726 !important;

}



.artists-kicker {

  color: rgba(245,245,242,.72) !important;

}



.artists-hero h1 {

  color: #f5f5f2 !important;

  font-size: clamp(72px, 8vw, 120px) !important;

  line-height: .86 !important;

}



.artists-hero h1 span {

  color: #ef1726 !important;

}



.artists-hero-subtitle {

  color: rgba(245,245,242,.62) !important;

}

/* =========================================================
   2026-09-27 — ARTISTS PAGE ALIGNMENT
   Home-style hero / consistent artist numbering / Santi crop
========================================================= */

.artists-hero h1 {
  font-size: clamp(88px, 10.5vw, 168px) !important;
  line-height: .78 !important;
  letter-spacing: -.045em !important;
}

.artist-card {
  --artist-image-scale: 1.035;
  --artist-image-position: center;
}

.artist-card-media img {
  object-position: var(--artist-image-position);
  transform:
    scale(var(--artist-image-scale))
    translate3d(
      var(--rb-image-x),
      var(--rb-image-y),
      0
    );
}

.artist-card-number {
  width: auto;
  min-width: 68px;
  white-space: nowrap;
}

/* Santi's source portrait has more negative space above the head.
   This crop brings the face/body scale in line with ZONE7 and AMCU
   without altering the source image. */
.artist-card--santi {
  --artist-image-scale: 1.22;
  --artist-image-position: 52% 78%;
}

@media (max-width: 700px) {
  .artists-hero h1 {
    font-size: clamp(74px, 22vw, 108px) !important;
    line-height: .79 !important;
  }

  .artist-card--santi {
    --artist-image-scale: 1.20;
    --artist-image-position: 52% 77%;
  }
}



/* =========================================================
   2026-09-27 — COMPACT HERO + FINAL / REMOVE GHOST TYPE
========================================================= */

/* Shorter top hero */
.artists-hero {
  min-height: clamp(315px, 42vh, 455px) !important;
  padding-top: clamp(30px, 4vw, 58px) !important;
  padding-bottom: clamp(26px, 3vw, 42px) !important;
}

/* Remove oversized grey TRYHARD word */
.artists-hero::after {
  content: none !important;
  display: none !important;
}

/* Shorter closing section */
.artists-final {
  min-height: clamp(315px, 42vh, 455px) !important;
  padding-top: clamp(48px, 5vw, 78px) !important;
  padding-bottom: clamp(48px, 5vw, 78px) !important;
}

/* Remove oversized grey 06 */
.artists-final::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 700px) {
  .artists-hero {
    min-height: 330px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .artists-final {
    min-height: 380px !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
}

@media (max-width: 430px) {
  .artists-hero {
    min-height: 315px !important;
  }

  .artists-final {
    min-height: 350px !important;
  }
}


/* =========================================================
   2026-09-27 — V7 / TIGHTER HERO + TIGHTER FINAL
   Split-color hero title / CTA right
========================================================= */

/* TOP: remove forced vertical length and tighten composition */
.artists-hero {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(22px, 2.7vw, 38px) !important;
  padding-bottom: clamp(18px, 2.2vw, 30px) !important;
}

.artists-hero-title {
  font-size: clamp(76px, 8.4vw, 132px) !important;
  line-height: .76 !important;
}

.artists-title-line {
  display: block;
}

/* Keep the first line white and the second line red even after
   ReactBits injects character spans for the scroll animation. */
.artists-hero h1 .artists-title-line--white,
.artists-hero h1 .artists-title-line--white * {
  color: #f5f5f2 !important;
}

.artists-hero h1 .artists-title-line--red,
.artists-hero h1 .artists-title-line--red * {
  color: var(--artists-red) !important;
}

.artists-hero-subtitle {
  margin-top: clamp(18px, 2vw, 27px) !important;
}

.artists-hero-line {
  margin-top: 18px !important;
}

/* BOTTOM: substantially shorter and keep CTA on the right */
.artists-final {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(34px, 4vw, 56px) !important;
  padding-bottom: clamp(34px, 4vw, 56px) !important;
}

.artists-final-index {
  margin-bottom: 16px !important;
}

.artists-final-statement {
  max-width: 920px !important;
  font-size: clamp(58px, 7.2vw, 112px) !important;
  line-height: .77 !important;
}

.artists-final-link {
  position: absolute !important;
  right: var(--artists-pad) !important;
  bottom: clamp(34px, 4vw, 56px) !important;
  margin-top: 0 !important;
  align-self: auto !important;
}

@media (max-width: 900px) {
  .artists-final-statement {
    max-width: 78%;
    font-size: clamp(54px, 9vw, 88px) !important;
  }
}

@media (max-width: 700px) {
  .artists-hero {
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .artists-hero-title {
    font-size: clamp(68px, 20vw, 94px) !important;
  }

  .artists-final {
    min-height: 0 !important;
    padding-top: 38px !important;
    padding-bottom: 34px !important;
  }

  .artists-final-statement {
    max-width: 100% !important;
    font-size: clamp(54px, 15.5vw, 78px) !important;
  }

  .artists-final-link {
    position: static !important;
    align-self: flex-end !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 430px) {
  .artists-hero {
    min-height: 0 !important;
  }

  .artists-final {
    min-height: 0 !important;
  }
}

/* =========================================================
   2026-09-27 — V8 / REACTBITS DESKTOP + MOBILE FIX
========================================================= */

/* Letter reveal now works identically on desktop and mobile. */
[data-rb-scroll] {
  overflow: hidden;
}

.rb-scroll-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 105%, 0) scaleY(1.55) scaleX(.84);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  transition:
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .48s ease;
  transition-delay: calc(var(--rb-char-i, 0) * 34ms);
}

[data-rb-scroll].is-rb-visible .rb-scroll-char {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
}

/* Proximity letters: smooth desktop mouse reaction. */
.rb-proximity-char {
  display: inline-block;
  transform-origin: 50% 65%;
  will-change: transform, filter;
  transition: transform .16s ease-out, filter .16s ease-out;
}

/* Keep hero split colors after JS injects per-letter spans. */
.artists-title-line--white,
.artists-title-line--white .rb-scroll-char {
  color: #f5f5f2 !important;
}

.artists-title-line--red,
.artists-title-line--red .rb-scroll-char {
  color: var(--artists-red) !important;
}

/* Pointer-capable desktop gets the interactive cursor effects. */
@media (hover: hover) and (pointer: fine) {
  .artist-card,
  .featured-card,
  .rb-magnet,
  .rb-proximity-char {
    backface-visibility: hidden;
  }
}



/* =========================================================
   2026-09-28 — V9 / RELIABLE DESKTOP LETTER REVEAL
   + VECTOR ARROWS + RESPONSIVE FINAL/FOOTER
========================================================= */

/* The actual timing is driven by Web Animations in artists-reactbits.js.
   Keeping the hidden start state here guarantees a visible first frame
   even on fast desktop loads. */
[data-rb-scroll] {
  overflow: hidden;
}

.rb-scroll-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 112%, 0) scaleY(1.62) scaleX(.80);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  transition: none !important;
}

[data-rb-scroll].is-rb-visible .rb-scroll-char {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
}

/* ---------------------------------------------------------
   UI ARROW — CSS drawn, never rendered as an emoji
--------------------------------------------------------- */
.ui-arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  color: currentColor;
  vertical-align: middle;
}

.ui-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.ui-arrow::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -1px;
  width: 13px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.join-button,
.mobile-join,
.artists-final-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.artist-card-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding-top: 0 !important;
  font-size: 0 !important;
}

.artist-card:hover .artist-card-arrow {
  transform: translate(3px, -3px);
}

/* ---------------------------------------------------------
   FINAL CTA — stable on desktop, tablet and mobile
--------------------------------------------------------- */
@media (max-width: 900px) {
  .artists-final {
    padding-top: 32px !important;
    padding-bottom: 30px !important;
  }

  .artists-final-statement {
    max-width: 100% !important;
    font-size: clamp(52px, 9.2vw, 82px) !important;
  }

  .artists-final-link {
    position: static !important;
    align-self: flex-end !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 24px !important;
  }
}

@media (max-width: 700px) {
  .artists-final {
    padding-top: 30px !important;
    padding-bottom: 28px !important;
  }

  .artists-final-index {
    margin-bottom: 13px !important;
  }

  .artists-final-statement {
    font-size: clamp(48px, 14.6vw, 72px) !important;
    line-height: .78 !important;
  }

  .artists-final-link {
    margin-top: 22px !important;
  }
}

/* ---------------------------------------------------------
   FOOTER — independent responsive grid
--------------------------------------------------------- */
.roster-body .roster-footer {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 26px var(--artists-pad) 28px !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) auto auto auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 18px 34px !important;
  border-top: 1px solid var(--artists-line) !important;
  background: var(--artists-bg) !important;
}

.roster-body .roster-footer img {
  width: 132px !important;
  max-width: 100% !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
}

.roster-body .roster-footer a,
.roster-body .roster-footer > span {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--artists-white) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.roster-body .roster-footer a {
  justify-self: end !important;
}

.roster-body .roster-footer > span {
  justify-self: end !important;
  color: rgba(243,243,241,.68) !important;
}

@media (max-width: 1000px) {
  .roster-body .roster-footer {
    padding: 24px var(--artists-pad) 26px !important;
    grid-template-columns: minmax(150px, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    gap: 15px 28px !important;
  }

  .roster-body .roster-footer img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }

  .roster-body .roster-footer a:nth-of-type(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .roster-body .roster-footer a:nth-of-type(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .roster-body .roster-footer > span {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }
}

@media (max-width: 700px) {
  .roster-body .roster-footer {
    padding: 24px 18px 26px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 18px 24px !important;
  }

  .roster-body .roster-footer img {
    width: 118px !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .roster-body .roster-footer a:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .roster-body .roster-footer a:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .roster-body .roster-footer > span {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
}

@media (max-width: 430px) {
  .roster-body .roster-footer {
    gap: 16px 18px !important;
  }

  .ui-arrow {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }
}


/* =========================================================
   2026-09-28 — V10 / MOBILE LAYOUT CLEANUP
   Hero metadata, roster count and final word wrapping
========================================================= */

/* Proximity animation must never split words across lines. */
.rb-proximity-word {
  display: inline-block;
  white-space: nowrap;
}

/* Only the explicit final accent stays red. Generated proximity
   character spans remain the inherited paragraph color. */
.artists-final-statement {
  color: var(--artists-white) !important;
}

.artists-final-statement .artists-final-red,
.artists-final-statement .artists-final-red * {
  color: var(--artists-red) !important;
}

@media (max-width: 700px) {
  /* HERO: everything flows vertically; no absolute metadata overlap. */
  .artists-hero {
    display: block !important;
    padding: 26px 18px 24px !important;
  }

  .artists-hero-number {
    margin: 0 0 30px !important;
  }

  .artists-hero-copy {
    width: 100% !important;
  }

  .artists-kicker {
    margin-bottom: 16px !important;
  }

  .artists-hero-title {
    font-size: clamp(72px, 22vw, 94px) !important;
    line-height: .78 !important;
  }

  .artists-hero-subtitle {
    max-width: none !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    font-size: clamp(15px, 4.35vw, 18px) !important;
    line-height: 1.08 !important;
  }

  .artists-hero-meta {
    position: static !important;
    width: 100% !important;
    margin-top: 22px !important;
    padding: 14px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--artists-line) !important;
    text-align: left !important;
  }

  .artists-hero-meta span:last-child {
    text-align: right !important;
  }

  /* ROSTER HEADING: count goes below instead of squeezing beside title. */
  .artists-roster-header {
    display: block !important;
    margin-bottom: 32px !important;
  }

  .artists-roster-header h2 {
    font-size: clamp(58px, 17vw, 82px) !important;
  }

  .roster-count {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 14px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--artists-line) !important;
    text-align: left !important;
  }

  .roster-count strong {
    font-size: 44px !important;
    line-height: .8 !important;
  }

  .roster-count span {
    max-width: 145px !important;
    text-align: right !important;
    line-height: 1.35 !important;
  }

  /* FINAL: allow breaks only between words, never in the middle of them. */
  .artists-final {
    padding: 34px 18px 30px !important;
  }

  .artists-final-statement {
    max-width: 100% !important;
    font-size: clamp(47px, 13.2vw, 62px) !important;
    line-height: .81 !important;
    letter-spacing: -.035em !important;
  }

  .artists-final-link {
    align-self: flex-end !important;
    margin-top: 26px !important;
  }

  .artists-final-link .ui-arrow {
    display: inline-block !important;
  }
}

@media (max-width: 430px) {
  .artists-hero-meta {
    align-items: flex-start !important;
  }

  .artists-hero-meta span {
    max-width: 48% !important;
  }

  .artists-final-statement {
    font-size: clamp(45px, 13vw, 56px) !important;
  }
}

/* =========================================================
   2026-09-28 — V11 / MOBILE FOOTER COMPACT
   Compact mobile footer only. No other sections affected.
========================================================= */
@media (max-width: 700px) {
  .roster-body .roster-footer {
    padding: 22px 18px 20px !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 22px !important;
    row-gap: 20px !important;
    align-items: center !important;
  }

  .roster-body .roster-footer img {
    width: 132px !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .roster-body .roster-footer a:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .roster-body .roster-footer a:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .roster-body .roster-footer > span {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    text-align: right !important;
  }

  .roster-body .roster-footer a,
  .roster-body .roster-footer > span {
    font-size: 7px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 390px) {
  .roster-body .roster-footer {
    column-gap: 14px !important;
  }

  .roster-body .roster-footer img {
    width: 122px !important;
  }

  .roster-body .roster-footer a,
  .roster-body .roster-footer > span {
    font-size: 6.5px !important;
  }
}
/* COLOR FINAL DEL TITULO */
.artists-final-statement {
  color: #f3f3f1 !important;
}

/* BUILT BY ARTISTS. queda blanco */
.artists-final-statement .rb-proximity-word,
.artists-final-statement .rb-proximity-char {
  color: #f3f3f1 !important;
}

/* TOGETHER. queda rojo */
.artists-final-statement .artists-final-red,
.artists-final-statement .artists-final-red .rb-proximity-word,
.artists-final-statement .artists-final-red .rb-proximity-char {
  color: #ef1726 !important;
}