/* =========================================
   OUR HERO THE VILLAIN
   BRAND HOUSE
========================================= */


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


html,
body{
  margin:0;
  padding:0;

  width:100%;
  min-height:100%;
}


html{
  background:#ffffff;
}


body.brands-page{
  margin:0;

  width:100%;
  min-height:100vh;

  background:#ffffff;
  color:#080808;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


a{
  color:inherit;
  text-decoration:none;
}


img{
  display:block;
  max-width:100%;
}


/* =========================================
   PAGE
========================================= */


.brands-shell{
  width:100%;
  min-height:100vh;

  display:flex;
  flex-direction:column;

  align-items:center;

  padding:
    38px
    24px
    24px;

  background:#ffffff;
}


/* =========================================
   HEADER LOGO
========================================= */


.brands-header{
  position:relative;

  width:100%;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;
}
.header-about-link{
  position:absolute;

  top:4px;
  right:clamp(45px, 6vw, 110px);

  display:inline-block;

  padding:8px 0;

  color:#080808;

  font-size:9px;
  font-weight:700;

  line-height:1;

  letter-spacing:.18em;

  text-transform:uppercase;

  transition:opacity .25s ease;
}


.header-about-link:hover{
  opacity:.48;
}
.brands-logo-link{
  display:block;
}


.brands-logo{
  width:135px;
  height:auto;

  margin:0 auto;
}

/* =========================================
   MAIN
========================================= */


.brands-main{
  flex:1;

  width:100%;
  max-width:470px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  padding:
    50px
    0
    70px;
}


/* =========================================
   HEADER TEXT
========================================= */


.brands-kicker{
  margin:
    18px
    0
    0;

  font-size:9px;

  font-weight:700;

  line-height:1;

  letter-spacing:.18em;

  color:#080808;

  text-transform:uppercase;
}





/* =========================================
   BRAND LIST
========================================= */


.brand-list{
  width:100%;

  display:flex;
  flex-direction:column;

  align-items:stretch;

  border-top:
    1px
    solid
    rgba(0,0,0,.11);
}


.brand-link{
  position:relative;

  width:100%;

  min-height:100px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:
    22px
    48px;

  border-bottom:
    1px
    solid
    rgba(0,0,0,.11);

  transition:
    opacity .25s ease;
}


/* =========================================
   BRAND LOGOS
========================================= */

.brand-logo{
  display:block;

  width:auto;
  height:auto;

  max-width:100%;

  object-fit:contain;
}


/* KLOSET GREED */

.brand-logo-kloset{
  width:150px;
}


/* FRAMEWORK */

.brand-logo-framework{
  width:175px;
}


/* FOOLISH RIVALRY */

.brand-logo-foolish{
  width:165px;
}


/* PUSH MUSIC */

.brand-logo-push{
  width:165px;
}
.brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.brand-status{
  margin-top:8px;

  font-size:8px;
  font-weight:600;
  line-height:1;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(8,8,8,.48);
}

.brand-arrow{
  position:absolute;

  right:10px;

  display:block;

  font-size:15px;

  font-weight:400;

  line-height:1;

  letter-spacing:0;

  transition:
    transform .3s ease;
}


.brand-link:hover{
  opacity:.48;
}


.brand-link:hover
.brand-arrow{
  transform:translateX(5px);
}


/* =========================================
   BACK
========================================= */


.back-link{
  margin-top:38px;

  padding:8px;

  font-size:8px;

  font-weight:500;

  line-height:1;

  letter-spacing:.18em;

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

  text-transform:uppercase;

  transition:
    color .2s ease;
}


.back-link:hover{
  color:#080808;
}


/* =========================================
   FOOTER
========================================= */


.brands-footer{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  text-align:center;
}


/* SOCIALS */


.brands-socials{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:14px;
}


.brands-socials a{
  width:23px;
  height:23px;

  display:flex;

  align-items:center;
  justify-content:center;

  opacity:.65;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.brands-socials a:hover{
  opacity:1;

  transform:
    translateY(-2px);
}


.brands-socials img{
  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    grayscale(1)
    brightness(0);
}


.youtube-icon{
  transform:scale(1.18);
}


/* COPYRIGHT */


.brands-copyright{
  margin-top:15px;

  font-size:8px;

  line-height:1;

  letter-spacing:.15em;

  text-transform:uppercase;

  color:rgba(8,8,8,.46);
}


/* LEGAL */


.brands-footer-links{
  margin-top:18px;

  display:flex;

  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:
    12px
    22px;
}


.brands-footer-links a{
  font-size:8px;

  line-height:1;

  letter-spacing:.16em;

  text-transform:uppercase;

  color:rgba(8,8,8,.56);

  transition:
    color .2s ease;
}


.brands-footer-links a:hover{
  color:#080808;
}


/* =========================================
   MOBILE
========================================= */


@media (max-width:768px){


  body.brands-page{
    min-height:100svh;
  }


  .brands-shell{
    min-height:100svh;

    padding:
      28px
      18px
      20px;
  }

.header-about-link{
  top:2px;
  right:12px;

  font-size:8px;
  letter-spacing:.16em;
}
  .brands-logo{
  width:115px;
}


  .brands-main{
    max-width:340px;

    padding:
      46px
      0
      55px;
  }


  


  .brand-link{
  min-height:84px;

  padding:
    18px
    36px;
}
.brand-logo-kloset{
  width:135px;
}

.brand-logo-framework{
  width:155px;
}

.brand-logo-foolish{
  width:145px;
}

.brand-logo-push{
  width:145px;
}
.brand-status{
  margin-top:7px;
  font-size:7px;
}
  


  .brand-arrow{
    right:7px;
  }


  .brands-footer-links{
    gap:
      12px
      16px;
  }


}


/* =========================================
   SMALL PHONES
========================================= */


@media (max-width:420px){


  .brands-shell{
    padding-left:14px;
    padding-right:14px;
  }


  .brands-logo{
  width:105px;
}

  .brands-main{
    max-width:310px;
  }
.brand-logo-kloset{
  width:120px;
}

.brand-logo-framework{
  width:140px;
}

.brand-logo-foolish{
  width:132px;
}

.brand-logo-push{
  width:132px;
}
.brand-status{
  margin-top:6px;
  font-size:6px;
}
 


  .brands-footer-links{
    gap:
      10px
      13px;
  }


  .brands-footer-links a{
    font-size:7px;
  }


}


/* =========================================
   REDUCED MOTION
========================================= */


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


  .brand-link,
  .brand-arrow,
  .brands-socials a{
    transition:none;
  }


}