/* ===================== ARTISTS SECTION ===================== */
.artists{
  position:relative;
  background:
    radial-gradient(120% 80% at 80% 0%,rgba(30,8,10,.5),transparent 60%),
    #060606;
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(4rem,9vh,6.5rem);
  overflow:hidden;
}
.artists__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  max-width:1320px;margin:0 auto;
  padding:0 clamp(1.4rem,5vw,5rem);
}
.artists__eyebrow{
  font-family:"Oswald",sans-serif;
  font-size:.66rem;letter-spacing:.4em;
  color:var(--red);
  display:block;margin-bottom:1rem;padding-left:.2em;
}
.artists__title{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:.95;letter-spacing:.02em;
  color:#fff;margin:0;
}
.artists__title em{font-style:normal;color:var(--red)}
.artists__lead{
  margin:1.4rem 0 .8rem;
  font-family:"Noto Sans JP",sans-serif;
  font-weight:500;
  font-size:clamp(.95rem,1.7vw,1.25rem);
  letter-spacing:.1em;color:#fff;
}
.artists__desc{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:300;
  font-size:clamp(.76rem,1vw,.88rem);
  line-height:2;letter-spacing:.05em;
  color:rgba(255,255,255,.62);
}
.artists__headR{
  display:flex;flex-direction:column;align-items:flex-end;gap:2.2rem;
  flex-shrink:0;padding-top:.4rem;
}
.artists__all{padding:.8rem 1.5rem;font-size:.76rem}
.artists__ctrl{display:flex;align-items:center;gap:1.4rem}
.artists__count{
  font-family:"Oswald",sans-serif;
  font-size:.85rem;letter-spacing:.18em;
  color:rgba(255,255,255,.55);
}
.artists__count b{color:#fff;font-weight:500}
.artists__arrows{display:flex;gap:.5rem}
.artists__arrows button{
  width:42px;height:42px;border-radius:50%;
  background:none;border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,opacity .3s;
}
.artists__arrows button:hover{background:rgba(255,255,255,.1);border-color:#fff}
.artists__arrows button:disabled{opacity:.3;cursor:default}

/* slider */
.artists__viewport{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  max-width:1320px;
  margin-left:auto;margin-right:auto;
  padding:0 clamp(1.4rem,5vw,5rem);
  overflow:hidden;
}
.artists__track{
  display:flex;
  gap:clamp(1rem,2vw,1.8rem);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}

/* card */
.acard{
  flex:0 0 calc((100% - 2 * clamp(1rem,2vw,1.8rem)) / 3);
  cursor:pointer;
  position:relative;
}
.acard__img{
  position:relative;
  aspect-ratio:76/100;
  overflow:hidden;
  background:#0d0d0d;
}
.acard__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,6,.85),transparent 45%);
  transition:opacity .4s;
}
.acard__img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) contrast(1.05) brightness(.9);
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s;
}
.acard:hover .acard__img img,
.acard:focus-visible .acard__img img{transform:scale(1.07);filter:grayscale(0) brightness(1)}

.acard__body{padding:1.2rem .2rem 0;position:relative}
.acard__no{
  font-family:"Oswald",sans-serif;
  font-size:.8rem;letter-spacing:.2em;color:var(--red);
}
.acard__name{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1.1;margin:.2rem 0 .6rem;color:#fff;
}
.acard__desc{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:300;
  font-size:.78rem;line-height:1.9;letter-spacing:.04em;
  color:rgba(255,255,255,.6);
  margin:0 0 1rem;
  min-height:2.9em;
}
.acard__link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Oswald",sans-serif;
  font-size:.74rem;letter-spacing:.22em;color:#fff;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.2);
  width:100%;
  transition:color .3s,border-color .3s;
}
.acard__link svg{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.acard:hover .acard__link{color:var(--red);border-color:rgba(196,0,0,.5)}
.acard:hover .acard__link svg{transform:translateX(6px)}

/* ===================== ARTIST MODAL ===================== */
.amodal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  visibility:hidden;opacity:0;
  transition:opacity .4s,visibility .4s;
}
.amodal.is-open{visibility:visible;opacity:1}
.amodal__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
}
.amodal__panel{
  position:relative;z-index:1;
  display:flex;
  width:min(960px,100%);
  max-height:88vh;
  background:#0b0b0c;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  overflow:hidden;
  transform:translateY(26px) scale(.98);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.amodal.is-open .amodal__panel{transform:none}
.amodal__close{
  position:absolute;top:1rem;right:1rem;z-index:3;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,transform .3s;
}
.amodal__close:hover{background:var(--red);transform:rotate(90deg)}
.amodal__media{
  flex:0 0 42%;
  position:relative;background:#0d0d0d;
}
.amodal__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15);
}
.amodal__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,transparent 70%,rgba(11,11,12,.9));
}
.amodal__info{
  flex:1;
  padding:clamp(2rem,4vw,3.4rem);
  overflow-y:auto;
}
.amodal__no{
  font-family:"Oswald",sans-serif;
  font-size:.85rem;letter-spacing:.25em;color:var(--red);
}
.amodal__name{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;margin:.3rem 0 .4rem;color:#fff;
}
.amodal__role{
  font-family:"Noto Sans JP",sans-serif;
  font-size:.8rem;letter-spacing:.14em;
  color:rgba(255,255,255,.55);
  display:block;margin-bottom:1.6rem;
}
.amodal__bio{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:300;
  font-size:.86rem;line-height:2.1;letter-spacing:.05em;
  color:rgba(255,255,255,.78);
  margin:0 0 1.8rem;
}
.amodal__sns{
  display:flex;gap:1.2rem;list-style:none;
}
.amodal__sns a{
  font-family:"Oswald",sans-serif;
  font-size:.72rem;letter-spacing:.18em;
  color:rgba(255,255,255,.7);text-decoration:none;
  padding-bottom:.3rem;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.amodal__sns a:hover{color:#fff;border-color:var(--red)}

/* ===================== RESPONSIVE ===================== */
@media(max-width:880px){
  .artists__head{flex-direction:column;gap:1.8rem}
  .artists__headR{align-items:flex-start;width:100%;
    flex-direction:row;justify-content:space-between;align-items:center}
  .acard{flex:0 0 calc((100% - clamp(1rem,2vw,1.8rem)) / 2)}
  .amodal__panel{flex-direction:column;max-height:90vh}
  .amodal__media{flex:0 0 240px}
  .amodal__media::after{background:linear-gradient(to bottom,transparent 60%,rgba(11,11,12,.95))}
}
@media(max-width:560px){
  .acard{flex:0 0 calc(100% - 0px)}
  .artists__all span{font-size:.72rem}
}