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

   TRYHARD — THE CATALOG

   releases.css



   IMPORTANTE:

   Toda la página usa prefijo .catalog-

   para evitar conflictos con las clases

   .release-* existentes en la home.

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





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

   ROOT

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



.catalog-body {

  background: #050505;

  color: #f5f5f2;

  font-family: "Inter", sans-serif;

  overflow-x: hidden;

}



.catalog-body button,

.catalog-body input {

  font: inherit;

}





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

   NAVBAR OVERRIDES

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



.catalog-navbar {

  background: rgba(5, 5, 5, .97);

}



.catalog-nav-active {

  position: relative;

  color: #f5f5f2 !important;

}



.catalog-nav-active::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -12px;

  height: 2px;

  background: #ff1717;

}



.catalog-mobile-active {

  color: #ff1717 !important;

}





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

   PAGE

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



.catalog-page {

  padding-top: 70px;

  background: #050505;

}





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

   HERO

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



.catalog-hero {

  position: relative;

  min-height: 425px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-bottom: 1px solid rgba(245, 245, 242, .42);

  overflow: hidden;

}



.catalog-hero-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.catalog-heading {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}



.catalog-number {

  color: #ff1717;

  font-size: 15px;

  font-weight: 900;

  line-height: 1;

}



.catalog-kicker {

  margin-top: 8px;

  color: #f5f5f2;

  font-family: "Anton", sans-serif;

  font-size: 16px;

  line-height: 1;

  text-transform: uppercase;

}



.catalog-archive-meta {

  align-self: flex-end;

  margin-bottom: 6px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  color: rgba(245, 245, 242, .68);

  font-size: 8px;

  font-weight: 600;

  line-height: 1.35;

  text-align: right;

  text-transform: uppercase;

}



.catalog-title-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 50px;

}



.catalog-title-row h1 {

  margin: 0;

  color: #f5f5f2;

  font-family: "Anton", sans-serif;

  font-size: clamp(105px, 12.7vw, 195px);

  font-weight: 400;

  line-height: .73;

  letter-spacing: -.035em;

  text-transform: uppercase;

}



.catalog-title-row h1 span {

  color: #ff1717;

}



.catalog-hero-index {

  margin-bottom: 10px;

  display: flex;

  gap: 12px;

  align-items: center;

  color: rgba(245, 245, 242, .84);

  font-size: 8px;

  font-weight: 700;

  white-space: nowrap;

}





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

   EXPLORER

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



.catalog-explorer {

  position: relative;

  background: #050505;

}





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

   TOOLBAR

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



.catalog-toolbar {

  position: sticky;

  top: 70px;

  z-index: 50;



  min-height: 58px;



  padding: 0 28px;



  display: flex;

  justify-content: space-between;

  align-items: stretch;



  background: rgba(5, 5, 5, .98);



  border-bottom:

    1px solid rgba(245, 245, 242, .18);

}



.catalog-toolbar-left,

.catalog-toolbar-right {

  display: flex;

  align-items: stretch;

}



.catalog-explore-label {

  min-width: 125px;



  display: flex;

  align-items: center;



  color: #f5f5f2;



  font-family: "Anton", sans-serif;



  font-size: 18px;



  line-height: 1;



  text-transform: uppercase;

}



.catalog-filter-trigger {

  min-width: 105px;



  padding:

    0

    18px;



  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;



  border: 0;

  border-left:

    1px solid rgba(245, 245, 242, .14);



  background: transparent;



  color: #f5f5f2;



  font-size: 9px;

  font-weight: 700;



  text-transform: uppercase;



  cursor: pointer;



  transition:

    background .15s ease,

    color .15s ease;

}



.catalog-filter-trigger:last-child {

  border-right:

    1px solid rgba(245, 245, 242, .14);

}



.catalog-filter-trigger:hover,

.catalog-filter-trigger.open {

  background: #f5f5f2;

  color: #050505;

}



.catalog-filter-trigger.active {

  color: #ff1717;

}



.catalog-filter-trigger.open {

  color: #050505;

}



.catalog-filter-trigger.open span {

  color: #ff1717;

}





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

   SEARCH

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



.catalog-search {

  width: clamp(250px, 24vw, 390px);



  padding:

    0

    18px;



  display: grid;



  grid-template-columns:

    auto

    minmax(70px, 1fr)

    auto;



  align-items: center;



  gap: 8px;



  border-left:

    1px solid rgba(245, 245, 242, .18);



  border-right:

    1px solid rgba(245, 245, 242, .18);

}



.catalog-search > span:first-child {

  color: rgba(245, 245, 242, .82);



  font-size: 8px;

  font-weight: 700;



  white-space: nowrap;

}



.catalog-search input {

  width: 100%;



  padding:

    7px

    0;



  border: 0;



  border-bottom:

    1px solid rgba(245, 245, 242, .45);



  outline: 0;



  background: transparent;



  color: #f5f5f2;



  font-size: 10px;

}



.catalog-search input:focus {

  border-color: #ff1717;

}



.catalog-search-icon {

  color: #f5f5f2;

  font-size: 18px;

}





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

   RESULTS

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



.catalog-results {

  min-width: 135px;



  padding:

    0

    16px;



  display: flex;

  align-items: center;

  justify-content: center;



  gap: 5px;



  border-right:

    1px solid rgba(245, 245, 242, .18);



  color: rgba(245, 245, 242, .75);



  font-size: 8px;

  font-weight: 700;



  white-space: nowrap;

}



.catalog-results > span:first-child {

  color: #ff1717;

}





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

   VIEW SWITCH

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



.catalog-view-switch {

  padding-left: 18px;



  display: flex;

  align-items: center;

  gap: 8px;



  font-size: 8px;

  font-weight: 700;



  white-space: nowrap;

}



.catalog-view-switch > span {

  color: rgba(245, 245, 242, .45);

}



.catalog-view-switch button {

  padding: 0;



  border: 0;



  background: transparent;



  color: rgba(245, 245, 242, .38);



  font-size: 8px;

  font-weight: 800;



  cursor: pointer;

}



.catalog-view-switch button:hover,

.catalog-view-switch button.active {

  color: #ff1717;

}





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

   FILTER PANEL

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



.catalog-filter-panel {

  position: sticky;

  top: 128px;

  z-index: 45;



  width: 100%;



  max-height: 0;



  overflow: hidden;



  background: #050505;



  border-bottom:

    0 solid rgba(245, 245, 242, .2);



  opacity: 0;



  transition:

    max-height .25s cubic-bezier(.2, .8, .2, 1),

    opacity .15s ease,

    border-width .15s ease;

}



.catalog-filter-panel.open {

  max-height: 240px;



  opacity: 1;



  border-bottom-width: 1px;

}



.catalog-filter-panel-header {

  min-height: 42px;



  padding:

    0

    28px;



  display: flex;

  align-items: center;

  justify-content: space-between;



  border-bottom:

    1px solid rgba(245, 245, 242, .12);



  color: #ff1717;



  font-size: 9px;

  font-weight: 900;

}



.catalog-filter-panel-header button {

  padding: 0;



  border: 0;



  background: transparent;



  color: rgba(245, 245, 242, .45);



  font-size: 8px;

  font-weight: 700;



  cursor: pointer;

}



.catalog-filter-panel-header button:hover {

  color: #f5f5f2;

}



.catalog-filter-options {

  padding:

    18px

    28px

    20px;



  display: flex;

  flex-wrap: wrap;

  align-items: center;



  gap:

    8px

    24px;

}



.catalog-filter-option {

  padding:

    5px

    0;



  border: 0;



  border-bottom:

    1px solid transparent;



  background: transparent;



  color: #f5f5f2;



  font-family: "Anton", sans-serif;



  font-size:

    clamp(18px, 2vw, 28px);



  text-transform: uppercase;



  cursor: pointer;

}



.catalog-filter-option:hover,

.catalog-filter-option.active {

  color: #ff1717;

  border-color: #ff1717;

}



.catalog-filter-option--disabled {

  color: rgba(245, 245, 242, .2);

  pointer-events: none;

}





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

   RELEASE ROW

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



.catalog-release {

  position: relative;



  min-height: 205px;



  padding:

    12px

    28px;



  display: grid;



  grid-template-columns:

    145px

    118px

    minmax(260px, 1.25fr)

    minmax(220px, .9fr)

    210px

    90px;



  align-items: center;



  column-gap: 20px;



  border-bottom:

    1px solid rgba(245, 245, 242, .24);



  overflow: hidden;



  transition:

    background .18s ease,

    border-color .18s ease;

}



.catalog-release::before {

  content: "";



  position: absolute;



  top: 0;

  left: 0;



  width: 0;

  height: 2px;



  background: #ff1717;



  transition:

    width .25s ease;

}



.catalog-release--active:hover::before {

  width: 100%;

}



.catalog-release--active:hover {

  background: #080808;

}



.catalog-release.hidden {

  display: none !important;

}





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

   RELEASE NUMBER

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



.catalog-release-number {

  position: relative;



  z-index: 1;



  color: rgba(245, 245, 242, .075);



  font-family: "Anton", sans-serif;



  font-size:

    clamp(90px, 9vw, 140px);



  line-height: .7;



  letter-spacing: -.05em;



  user-select: none;

}





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

   ARTWORK

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



.catalog-artwork,

.catalog-locked-artwork {

  position: relative;



  z-index: 2;



  width: 118px;

  height: 118px;



  overflow: hidden;



  border:

    1px solid rgba(245, 245, 242, .2);



  background: #111;

}



.catalog-artwork img {

  width: 100%;

  height: 100%;



  object-fit: cover;



  transition:

    transform .3s cubic-bezier(.2, .8, .2, 1),

    filter .3s ease;

}



.catalog-release--active:hover .catalog-artwork img {

  transform: scale(1.055);

  filter: contrast(1.07);

}





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

   LOCKED ARTWORK

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



.catalog-locked-artwork {

  padding: 9px;



  display: flex;



  flex-direction: column;



  justify-content: space-between;



  background:

    repeating-linear-gradient(

      135deg,

      #080808 0,

      #080808 3px,

      #111 3px,

      #111 4px

    );



  color: rgba(245, 245, 242, .38);



  font-size: 7px;



  text-transform: uppercase;

}



.catalog-locked-artwork > span:last-child {

  align-self: flex-end;

  text-align: right;

}



.catalog-locked-artwork--cross,

.catalog-locked-artwork--target {

  display: grid;

  place-items: center;

}



.catalog-locked-artwork--cross > span,

.catalog-locked-artwork--target > span {

  position: absolute;

  top: 9px;

  left: 9px;

}



.catalog-cross {

  position: relative;



  width: 55px;

  height: 55px;



  border:

    1px solid rgba(245, 245, 242, .45);

}



.catalog-cross::before,

.catalog-cross::after {

  content: "";



  position: absolute;



  top: 50%;

  left: 50%;



  background:

    rgba(245, 245, 242, .5);



  transform:

    translate(-50%, -50%);

}



.catalog-cross::before {

  width: 80px;

  height: 1px;

}



.catalog-cross::after {

  width: 1px;

  height: 80px;

}



.catalog-target {

  position: relative;



  width: 58px;

  height: 58px;



  border:

    1px solid rgba(245, 245, 242, .55);



  border-radius: 50%;

}



.catalog-target::before,

.catalog-target::after {

  content: "";



  position: absolute;



  top: 50%;

  left: 50%;



  background:

    rgba(245, 245, 242, .6);



  transform:

    translate(-50%, -50%);

}



.catalog-target::before {

  width: 82px;

  height: 1px;

}



.catalog-target::after {

  width: 1px;

  height: 82px;

}





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

   RELEASE INFO

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



.catalog-main-info {

  position: relative;

  z-index: 2;

}



.catalog-status {

  display: block;



  margin-bottom: 5px;



  color: #ff1717;



  font-family: "Anton", sans-serif;



  font-size: 13px;



  letter-spacing: .02em;



  text-transform: uppercase;

}



.catalog-artist {

  display: block;



  margin-bottom: 4px;



  color: rgba(245, 245, 242, .7);



  font-size: 8px;

  font-weight: 700;



  text-transform: uppercase;

}



.catalog-main-info h2 {

  margin: 0;



  color: #f5f5f2;



  font-family: "Anton", sans-serif;



  font-size:

    clamp(27px, 2.8vw, 42px);



  font-weight: 400;



  line-height: .88;



  letter-spacing: -.02em;



  text-transform: uppercase;



  transition:

    color .15s ease;

}



.catalog-release--active:hover .catalog-main-info h2 {

  color: #ff1717;

}



.catalog-mix {

  display: block;



  margin-top: 5px;



  color: rgba(245, 245, 242, .55);



  font-size: 8px;

  font-weight: 600;



  text-transform: uppercase;

}





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

   PLATFORM BUTTONS

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



.catalog-platforms {

  margin-top: 15px;



  display: flex;



  gap: 7px;

}



.catalog-platforms a {

  min-width: 92px;



  padding:

    8px

    11px;



  display: inline-flex;



  align-items: center;



  gap: 8px;



  border:

    1px solid rgba(245, 245, 242, .42);



  color: #f5f5f2;



  font-size: 8px;

  font-weight: 700;



  transition:

    background .15s ease,

    color .15s ease,

    border-color .15s ease;

}



.catalog-platforms a img {

  width: 14px;

  height: 14px;



  object-fit: contain;



  filter:

    brightness(0)

    invert(1);

}



.catalog-platforms a:hover {

  background: #f5f5f2;

  border-color: #f5f5f2;

  color: #050505;

}



.catalog-platforms a:hover img {

  filter: none;

}





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

   WAVEFORM

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



.catalog-wave {

  position: relative;



  z-index: 2;



  min-width: 0;



  display: flex;

  align-items: center;

  justify-content: center;



  color: rgba(245, 245, 242, .4);

}



.catalog-wave-bars {

  width: 100%;

  height: 50px;



  display: flex;

  align-items: center;



  gap: 2px;



  overflow: hidden;

}



.catalog-wave-bar {

  width: 2px;



  flex:

    1

    1

    2px;



  min-width: 1px;



  background: rgba(245, 245, 242, .72);



  transition:

    background .15s ease,

    transform .15s ease;

}



.catalog-release--active:hover .catalog-wave-bar:nth-child(3n) {

  background: #ff1717;

}



.catalog-wave--locked {

  color: rgba(245, 245, 242, .24);



  letter-spacing: 3px;



  overflow: hidden;



  white-space: nowrap;

}





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

   METADATA

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



.catalog-release-meta {

  min-height: 65px;



  padding-left: 20px;



  display: flex;



  flex-direction: column;



  justify-content: center;



  gap: 4px;



  border-left:

    1px solid rgba(245, 245, 242, .25);



  color: rgba(245, 245, 242, .6);



  font-size: 7px;

  font-weight: 600;



  line-height: 1.3;



  text-transform: uppercase;

}





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

   LISTEN

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



.catalog-listen {

  position: relative;

  z-index: 2;



  display: flex;



  align-items: center;

  justify-content: flex-end;



  gap: 8px;



  color: #f5f5f2;



  font-size: 8px;

  font-weight: 700;



  white-space: nowrap;

}



.catalog-listen span {

  transition:

    transform .15s ease;

}



.catalog-listen:hover {

  color: #ff1717;

}



.catalog-listen:hover span {

  transform:

    translate(3px, -3px);

}



.catalog-listen--disabled {

  color: rgba(245, 245, 242, .25);

}





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

   DETAILS BUTTON

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



.catalog-expand {

  position: absolute;



  right: 28px;

  bottom: 14px;



  z-index: 5;



  padding: 0;



  border: 0;



  background: transparent;



  color: rgba(245, 245, 242, .35);



  font-size: 7px;

  font-weight: 700;



  cursor: pointer;

}



.catalog-expand:hover {

  color: #ff1717;

}





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

   EXPANDED RELEASE

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



.catalog-expanded {

  grid-column:

    1

    / -1;



  width:

    calc(100% + 56px);



  max-height: 0;



  margin:

    0

    -28px

    -12px;



  overflow: hidden;



  opacity: 0;



  background: #f5f5f2;

  color: #050505;



  transition:

    max-height .45s cubic-bezier(.2, .8, .2, 1),

    opacity .2s ease,

    margin-top .3s ease;

}



.catalog-release.expanded .catalog-expanded {

  max-height: 440px;



  margin-top: 22px;



  opacity: 1;

}



.catalog-expanded-inner {

  padding:

    32px

    28px

    38px;



  display: grid;



  grid-template-columns:

    145px

    minmax(280px, 1.2fr)

    1fr

    auto;



  gap: 30px;

}



.catalog-expanded-index {

  display: flex;

  flex-direction: column;

  gap: 6px;



  color: rgba(5, 5, 5, .5);



  font-size: 7px;

  font-weight: 700;

}



.catalog-expanded-title > span {

  display: block;



  margin-bottom: 9px;



  font-size: 8px;

  font-weight: 700;

}



.catalog-expanded-title h3 {

  margin: 0;



  font-family: "Anton", sans-serif;



  font-size:

    clamp(42px, 4vw, 62px);



  font-weight: 400;



  line-height: .82;



  letter-spacing: -.03em;

}



.catalog-expanded-title h3 span {

  color: #ff1717;

}



.catalog-expanded-data {

  display: grid;

  gap: 14px;

}



.catalog-expanded-data > div {

  padding-bottom: 8px;



  border-bottom:

    1px solid rgba(5, 5, 5, .18);

}



.catalog-data-label {

  display: block;



  margin-bottom: 4px;



  color: rgba(5, 5, 5, .45);



  font-size: 7px;

  font-weight: 700;

}



.catalog-expanded-data strong {

  font-size: 9px;

  font-weight: 800;

}



.catalog-expanded-links {

  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  gap: 8px;



  font-size: 9px;

  font-weight: 800;

}



.catalog-expanded-links a:hover {

  color: #ff1717;

}





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

   EMPTY

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



.catalog-empty {

  min-height: 350px;



  padding:

    60px

    28px;



  display: none;



  align-items: flex-start;



  gap: 30px;



  border-bottom:

    1px solid rgba(245, 245, 242, .2);

}



.catalog-empty.visible {

  display: flex;

}



.catalog-empty > span {

  color: rgba(245, 245, 242, .08);



  font-family: "Anton", sans-serif;



  font-size: 100px;



  line-height: .7;

}



.catalog-empty h2 {

  font-family: "Anton", sans-serif;



  font-size:

    clamp(48px, 6vw, 80px);



  line-height: .85;



  font-weight: 400;

}



.catalog-empty h2 span {

  color: #ff1717;

}



.catalog-empty button {

  margin-left: auto;



  padding:

    12px

    16px;



  border:

    1px solid #ff1717;



  background: transparent;



  color: #f5f5f2;



  font-size: 8px;

  font-weight: 800;



  cursor: pointer;

}



.catalog-empty button:hover {

  background: #ff1717;

}





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

   ARTWORK VIEW

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



.catalog-list.artwork-view {

  padding:

    28px;



  display: grid;



  grid-template-columns:

    repeat(4, minmax(0, 1fr));



  gap:

    40px

    8px;

}



.catalog-list.artwork-view .catalog-release {

  min-height: 0;



  padding: 0;



  display: block;



  border: 0;



  overflow: visible;

}



.catalog-list.artwork-view .catalog-release::before,

.catalog-list.artwork-view .catalog-release-number,

.catalog-list.artwork-view .catalog-wave,

.catalog-list.artwork-view .catalog-release-meta,

.catalog-list.artwork-view .catalog-listen,

.catalog-list.artwork-view .catalog-expand,

.catalog-list.artwork-view .catalog-expanded {

  display: none;

}



.catalog-list.artwork-view .catalog-artwork,

.catalog-list.artwork-view .catalog-locked-artwork {

  width: 100%;

  height: auto;



  aspect-ratio: 1 / 1;

}



.catalog-list.artwork-view .catalog-main-info {

  padding-top: 14px;

}



.catalog-list.artwork-view .catalog-main-info h2 {

  font-size:

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

}



.catalog-list.artwork-view .catalog-platforms {

  margin-top: 12px;

}





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

   FOOTER

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



.catalog-footer {

  min-height: 78px;

}



.catalog-footer-logo img {

  width: 120px;

}





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

   TABLET

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



@media (max-width: 1180px) {



  .catalog-hero {

    min-height: 390px;

  }



  .catalog-toolbar {

    position: relative;

    top: auto;



    flex-direction: column;



    padding: 0;

  }



  .catalog-toolbar-left,

  .catalog-toolbar-right {

    min-height: 54px;



    width: 100%;

  }



  .catalog-toolbar-left {

    padding-left: 22px;

  }



  .catalog-toolbar-right {

    border-top:

      1px solid rgba(245, 245, 242, .12);

  }



  .catalog-search {

    flex: 1;

  }



  .catalog-filter-panel {

    position: relative;

    top: auto;

  }



  .catalog-release {

    grid-template-columns:

      110px

      105px

      minmax(230px, 1.3fr)

      minmax(150px, .7fr)

      160px

      70px;



    column-gap: 14px;

  }



  .catalog-release-number {

    font-size: 90px;

  }



  .catalog-artwork,

  .catalog-locked-artwork {

    width: 105px;

    height: 105px;

  }



  .catalog-release-meta {

    padding-left: 12px;

  }



  .catalog-list.artwork-view {

    grid-template-columns:

      repeat(3, minmax(0, 1fr));

  }



}





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

   MOBILE

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



@media (max-width: 900px) {



  .catalog-nav-active::after {

    display: none;

  }



  .catalog-page {

    padding-top: 70px;

  }



  .catalog-hero {

    min-height: 420px;



    padding:

      25px

      20px;

  }



  .catalog-hero-top {

    display: block;

  }



  .catalog-archive-meta {

    position: absolute;



    right: 20px;

    top: 25px;

  }



  .catalog-title-row {

    display: block;

  }



  .catalog-title-row h1 {

    font-size:

      clamp(90px, 27vw, 155px);



    line-height: .76;

  }



  .catalog-hero-index {

    margin-top: 30px;



    flex-wrap: wrap;



    font-size: 7px;

  }



  .catalog-toolbar-left {

    min-height: auto;



    padding:

      0

      20px;



    display: grid;



    grid-template-columns:

      1fr

      1fr;

  }



  .catalog-explore-label {

    min-height: 48px;



    grid-column:

      1

      / -1;



    border-bottom:

      1px solid rgba(245, 245, 242, .15);

  }



  .catalog-filter-trigger {

    min-width: 0;



    min-height: 46px;



    padding:

      0

      12px;



    border-bottom:

      1px solid rgba(245, 245, 242, .12);

  }



  .catalog-toolbar-right {

    display: grid;



    grid-template-columns:

      1fr

      auto;

  }



  .catalog-search {

    width: auto;



    min-height: 50px;



    grid-column:

      1

      / -1;



    border-right: 0;

  }



  .catalog-results {

    min-height: 42px;



    border-left: 0;

  }



  .catalog-view-switch {

    padding:

      0

      16px;

  }



  .catalog-filter-panel-header {

    padding:

      0

      20px;

  }



  .catalog-filter-options {

    padding:

      18px

      20px;

  }



  .catalog-release {

    min-height: 0;



    padding:

      24px

      20px;



    grid-template-columns:

      72px

      minmax(0, 1fr);



    grid-template-rows:

      auto

      auto

      auto

      auto;



    column-gap: 18px;

    row-gap: 20px;



    align-items: start;

  }



  .catalog-release-number {

    grid-column: 1;

    grid-row: 1;



    font-size: 66px;

  }



  .catalog-artwork,

  .catalog-locked-artwork {

    grid-column: 2;

    grid-row: 1;



    width: 100%;

    height: auto;



    aspect-ratio: 1 / 1;

  }



  .catalog-main-info {

    grid-column:

      1

      / -1;



    grid-row: 2;

  }



  .catalog-main-info h2 {

    font-size:

      clamp(42px, 13vw, 68px);

  }



  .catalog-platforms a {

    flex: 1;



    justify-content: center;

  }



  .catalog-wave {

    grid-column:

      1

      / -1;



    grid-row: 3;

  }



  .catalog-wave-bars {

    height: 42px;

  }



  .catalog-release-meta {

    grid-column: 1;

    grid-row: 4;



    min-height: 0;



    padding-left: 0;



    border-left: 0;

  }



  .catalog-listen {

    grid-column: 2;

    grid-row: 4;



    justify-self: end;

    align-self: center;

  }



  .catalog-expand {

    position: static;



    grid-column: 2;

    grid-row: 4;



    justify-self: end;



    margin-top: 24px;

  }



  .catalog-expanded {

    grid-column:

      1

      / -1;



    width:

      calc(100% + 40px);



    margin:

      0

      -20px

      -24px;

  }



  .catalog-release.expanded .catalog-expanded {

    max-height: 900px;

  }



  .catalog-expanded-inner {

    padding:

      26px

      20px

      34px;



    grid-template-columns:

      1fr;



    gap: 28px;

  }



  .catalog-expanded-links {

    flex-direction: row;

  }



  .catalog-list.artwork-view {

    padding:

      20px;



    grid-template-columns:

      repeat(2, minmax(0, 1fr));



    gap:

      35px

      8px;

  }



  .catalog-footer {

    display: flex;



    flex-wrap: wrap;



    gap:

      18px

      28px;



    padding:

      25px

      20px;

  }



  .catalog-footer-logo {

    width: 100%;

  }



}





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

   SMALL MOBILE

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



@media (max-width: 550px) {



  .catalog-hero {

    min-height: 360px;



    padding:

      22px

      18px;

  }



  .catalog-title-row h1 {

    font-size: 25vw;

  }



  .catalog-archive-meta {

    right: 18px;



    font-size: 6px;

  }



  .catalog-toolbar-left {

    padding:

      0

      18px;

  }



  .catalog-search {

    padding:

      0

      14px;

  }



  .catalog-search > span:first-child {

    font-size: 7px;

  }



  .catalog-view-switch {

    padding:

      0

      10px;

  }



  .catalog-release {

    padding:

      20px

      18px;



    grid-template-columns:

      60px

      minmax(0, 1fr);

  }



  .catalog-release-number {

    font-size: 55px;

  }



  .catalog-expanded {

    width:

      calc(100% + 36px);



    margin-left: -18px;

    margin-right: -18px;

  }



  .catalog-list.artwork-view {

    padding:

      18px;



    grid-template-columns:

      1fr

      1fr;

  }



  .catalog-list.artwork-view .catalog-main-info h2 {

    font-size: 27px;

  }



  .catalog-list.artwork-view .catalog-platforms {

    display: none;

  }



}





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

   REDUCED MOTION

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



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



  .catalog-release,

  .catalog-release::before,

  .catalog-artwork img,

  .catalog-expanded,

  .catalog-filter-panel {

    transition: none;

  }



}

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

   FIX — ARTWORK / TITLE OVERLAP

   SOLO DESKTOP

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



@media (min-width: 1181px) {



  .catalog-release {

    grid-template-columns:

      175px

      118px

      minmax(300px, 1.25fr)

      minmax(220px, .9fr)

      210px

      90px;



    column-gap: 20px;

  }



  .catalog-artwork {

    width: 118px;

    height: 118px;



    margin: 0;

  }



  .catalog-artwork img {

    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;

  }



  .catalog-main-info {

    position: relative;

    z-index: 3;



    min-width: 0;



    padding: 0;

    margin: 0;

  }



  .catalog-main-info .catalog-artist {

    margin: 0 0 6px 0;

  }



  .catalog-main-info h2 {

    margin: 0;



    max-width: 100%;



    overflow-wrap: normal;

    word-break: normal;

  }



  .catalog-main-info .catalog-mix {

    margin-top: 6px;

  }



}

/* =========================================================
   BEATPORT / ARTWORK — 2026-09-28
========================================================= */

.platform-link--beatport {
  border-color: rgba(255, 23, 23, .72) !important;
  color: #ff1717 !important;
}

.platform-link--beatport:hover {
  background: #ff1717 !important;
  border-color: #ff1717 !important;
  color: #fff !important;
}

.catalog-list.artwork-view .catalog-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep Beatport visible in artwork mode on phones */
@media (max-width: 550px) {
  .catalog-list.artwork-view .catalog-platforms {
    display: flex;
  }

  .catalog-list.artwork-view .catalog-platforms a:not(.platform-link--beatport) {
    display: none;
  }

  .catalog-list.artwork-view .catalog-platforms .platform-link--beatport {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
}

/* Waveform heights - CSP compatible */
.wave-height-18 { height: 18%; }
.wave-height-19 { height: 19%; }
.wave-height-20 { height: 20%; }
.wave-height-21 { height: 21%; }
.wave-height-22 { height: 22%; }
.wave-height-23 { height: 23%; }
.wave-height-24 { height: 24%; }
.wave-height-25 { height: 25%; }
.wave-height-26 { height: 26%; }
.wave-height-27 { height: 27%; }
.wave-height-28 { height: 28%; }
.wave-height-29 { height: 29%; }
.wave-height-30 { height: 30%; }
.wave-height-31 { height: 31%; }
.wave-height-32 { height: 32%; }
.wave-height-33 { height: 33%; }
.wave-height-34 { height: 34%; }
.wave-height-35 { height: 35%; }
.wave-height-36 { height: 36%; }
.wave-height-37 { height: 37%; }
.wave-height-38 { height: 38%; }
.wave-height-39 { height: 39%; }
.wave-height-40 { height: 40%; }
.wave-height-41 { height: 41%; }
.wave-height-42 { height: 42%; }
.wave-height-43 { height: 43%; }
.wave-height-44 { height: 44%; }
.wave-height-45 { height: 45%; }
.wave-height-46 { height: 46%; }
.wave-height-47 { height: 47%; }
.wave-height-48 { height: 48%; }
.wave-height-49 { height: 49%; }
.wave-height-50 { height: 50%; }
.wave-height-51 { height: 51%; }
.wave-height-52 { height: 52%; }
.wave-height-53 { height: 53%; }
.wave-height-54 { height: 54%; }
.wave-height-55 { height: 55%; }
.wave-height-56 { height: 56%; }
.wave-height-57 { height: 57%; }
.wave-height-58 { height: 58%; }
.wave-height-59 { height: 59%; }
.wave-height-60 { height: 60%; }
.wave-height-61 { height: 61%; }
.wave-height-62 { height: 62%; }
.wave-height-63 { height: 63%; }
.wave-height-64 { height: 64%; }
.wave-height-65 { height: 65%; }
.wave-height-66 { height: 66%; }
.wave-height-67 { height: 67%; }
.wave-height-68 { height: 68%; }
.wave-height-69 { height: 69%; }
.wave-height-70 { height: 70%; }
.wave-height-71 { height: 71%; }
.wave-height-72 { height: 72%; }
.wave-height-73 { height: 73%; }
.wave-height-74 { height: 74%; }
.wave-height-75 { height: 75%; }
.wave-height-76 { height: 76%; }
.wave-height-77 { height: 77%; }
.wave-height-78 { height: 78%; }
.wave-height-79 { height: 79%; }
.wave-height-80 { height: 80%; }