/* ==========================================================
   DUNGEON SYNTH ARTISTS DIRECTORY
========================================================== */

.artists-page{

    padding-bottom:120px;

    background:
        radial-gradient(
            circle at top,
            rgba(215,179,122,.07),
            transparent 45%
        ),
        #080808;

}

/* ==========================================================
   HERO
========================================================== */

.artists-hero{

    text-align:center;

    margin-bottom:80px;

}

.artists-footer{

    margin-top:80px;
}

.artists-hero h1{

    margin:0 0 24px;

    font-size:56px;

}

.artists-subtitle{

    font-size:24px;

    color:#d5d5d5;

    margin-bottom:36px;

}

.artists-intro{

    max-width:900px;

    margin:auto;

    font-size:18px;

    line-height:2;

    color:#bbb;

}

/* ==========================================================
   Sidebar
========================================================== */

.artists-sidebar{

    position:fixed;

    left:40px;
    top:170px;
    bottom:90px;

    width:240px;

    z-index:1;

    display:flex;
    flex-direction:column;

}

/* ==========================================================
   Фильтр
========================================================== */

.artists-filter{

    padding:26px;

    border-radius:16px;

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

    margin-bottom:28px;

}

.artists-filter h3{

    margin:0 0 20px;

}

.artists-filter select{

    width:100%;

    margin-bottom:14px;

    padding:12px 14px;

    background:#1d1d1d;

    color:#fff;

    border:none;

    border-radius:10px;

}

/* ==========================================================
   Список артистов
========================================================== */

.artists-navigation{

    flex:1;
    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding-right:12px;

    scrollbar-width:thin;
    scrollbar-color:#d7b37a transparent;

}

.artists-navigation ul{

    list-style:none;

    padding:0;

    margin:0;

}

.artists-navigation li{

    margin-bottom:8px;

}

.artists-navigation a{

    display:block;

    padding:10px 14px;

    border-radius:8px;

    color:#ccc;

    text-decoration:none;

    transition:.25s;

}

.artists-navigation a:hover{

    background:rgba(215,179,122,.08);

    color:#f2e3be;

}

.artists-navigation a.active{

    background:rgba(215,179,122,.16);

    color:#f2e3be;

    border:1px solid rgba(215,179,122,.28);

}

.artists-navigation::-webkit-scrollbar{
    width:6px;
}

.artists-navigation::-webkit-scrollbar-track{
    background:transparent;
}

.artists-navigation::-webkit-scrollbar-thumb{

    background:#d7b37a;
    border-radius:10px;

}

.artists-navigation::-webkit-scrollbar-thumb:hover{

    background:#f2e3be;

}
/* ==========================================================
   Правая колонка
========================================================== */

.artists-list{

    width:100%;

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:26px;

}

/* ==========================================================
   Карточка
========================================================== */

.artist-card{

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(215,179,122,.16);

    background:
        linear-gradient(
            180deg,
            rgba(20,20,20,.98),
            rgba(10,10,10,.98)
        );

}

.artist-banner{

    aspect-ratio:4 / 1;

    overflow:hidden;
    padding-bottom: 20px;

}

.artist-banner img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* ==========================================================
   Заголовок
========================================================== */

.artist-header{

    display:grid;

    grid-template-columns:70px 90px 1fr;

    align-items:center;

    gap:24px;

    padding:10px 40px;

    width:100%;

    cursor:pointer;

}

.artist-header-left{

    position:absolute;

    left:40px;

    display:flex;

    align-items:center;

    gap:26px;

}

.artist-name{

    font-family:"IM Fell English SC",serif;

    font-size:60px;

    letter-spacing:.05em;

    text-align:center;

}

.artist-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    transition:.35s;

}

.artist-header img{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:40px;

}

.artist-header span:last-child{

    justify-self:left;

    font-family:"Blackcraft", serif;

    font-size:45px;

    letter-spacing:.05em;

}

/* ==========================================================
   Bestiary Logo
========================================================== */

.artists-title{

    margin:0 0 40px;

    display:flex;

    justify-content:center;

}

.artists-title img{

    display:block;

    width:min(1300px,100%);
    height:auto;

    user-select:none;
    pointer-events:none;

}

.visually-hidden{

    position:absolute;

    width:1px;
    height:1px;

    margin:-1px;
    padding:0;

    overflow:hidden;

    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;

    border:0;

}

/* ==========================================================
  Контент
========================================================== */
.artists-content{

    width:min(980px,calc(100% - 80px));

    margin-inline:auto;

}

.artist-top{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:48px;

    align-items:start;

    margin-bottom:42px;

}

.artist-body{

    overflow:hidden;

    max-height:0;

    opacity:0;

    padding:0 40px;

    transition:
        max-height .55s ease,
        opacity .35s ease,
        padding .35s ease;

}

.artist-description{

    width:100%;

    margin-top:42px;

    padding-top:36px;

    border-top:1px solid rgba(255,255,255,.08);

}

.artist-description p{

    margin:0;

    line-height:2;

    text-align:left;

    color:#cfcfcf;
    font-family:"Georgia",serif;

}

.artist-card.open .artist-body{

    max-height:2000px;

    opacity:1;

    padding:20px;

}

.artist-card.open .artist-header{

    background:rgba(215,179,122,.05);

}

.artist-card.open .artist-arrow{

    transform:rotate(180deg);

}

/* ==========================================================
  Атрибуты
========================================================== */

.artist-attributes{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.artist-attributes div{

    padding:14px;

    border-radius:10px;

    background:#1b1b1b;

}

.artist-attributes strong{

    display:block;

    margin-bottom:6px;

    color:#d7b37a;

}

/* ==========================================================
  Описание
========================================================== */

.artist-info{

    display:flex;

    flex-direction:column;

}

.artist-info p{

    line-height:1.9;

    color:#ccc;

    margin-bottom:30px;

}

/* ==========================================================
  Ссылки
========================================================== */

.artist-links{

    display:flex;
    gap:16px;
    margin-top:30px;
    flex-direction:column;

}

.artist-links a{

    display:flex;

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

    padding:12px 22px;

    border-radius:10px;

    background:rgba(20,20,20,.95);

    border:1px solid rgba(215,179,122,.35);

    color:#d7b37a;

    text-decoration:none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        color .25s ease;

}

.artist-links a:hover{

    transform:translateY(-2px);

    color:#f2e3be;

    border-color:rgba(215,179,122,.9);

    box-shadow:
        0 0 12px rgba(215,179,122,.18);

}

/* ==========================================================
  Embed
========================================================== */

.artist-player{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.artist-bandcamp-player{

    width:400px;
    height:340px;

    border:0;

    border-radius:12px;

}

.artists-sidebar-toggle{
    display:none;
}

body.ru,
body.ru .artists-page,
body.ru .artists-filter,
body.ru .artists-navigation,
body.ru .artists-subtitle,
body.ru .artists-intro,
body.ru .artists-footer,
body.ru .artist-attributes,
body.ru .artist-description,
body.ru .artist-links{
    font-family:'Monomakh', serif;
}

/* ==========================================================
  Responsive
========================================================== */

@media (max-width:1100px){

    .artists-sidebar{

        position:fixed;

        left:0;
        top:0;
        bottom:70px;

        width:min(340px,85vw);

        padding:20px;

        background:#080808;

        transform:translateX(-100%);

        transition:transform .3s ease;

        z-index:1000;

        display:flex;
        flex-direction:column;

        box-sizing:border-box;

    }

    .artists-sidebar.open{

        transform:translateX(0);

    }

.artists-sidebar-toggle{

    display:flex;

    position:absolute;

    right:-52px;
    top:50%;

    width:52px;
    min-height:180px;

    transform:translateY(-50%);

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    border:1px solid rgba(215,179,122,.55);
    border-left:0;

    background:
        linear-gradient(
            180deg,
            rgba(35,31,25,.98),
            rgba(15,15,15,.98)
        );

    color:#d7b37a;

    box-shadow:
        4px 0 14px rgba(0,0,0,.55),
        0 0 16px rgba(215,179,122,.14);

}

.artists-sidebar-toggle-text{

    writing-mode:vertical-rl;
    text-orientation:upright;

    font-family:"IM Fell English SC",serif;

    font-size:14px;

    letter-spacing:2px;

    line-height:1;

}

.artists-sidebar-toggle-arrow{

    font-size:24px;
    line-height:1;

    transition:transform .3s ease;

}

@keyframes artists-toggle-pulse{

     0%,
    100%{

        box-shadow:
            4px 0 14px rgba(0,0,0,.55),
            0 0 10px rgba(215,179,122,.10);

    }

    50%{

        box-shadow:
            4px 0 14px rgba(0,0,0,.55),
            0 0 24px rgba(215,179,122,.28);

    }

}

.artists-sidebar.open .artists-sidebar-toggle{

    transform:translateY(-50%);

}

.artists-sidebar-toggle:hover{

    color:#f2e3be;

    border-color:rgba(240,211,154,.85);

    background:
        linear-gradient(
            180deg,
            rgba(45,39,29,.98),
            rgba(20,20,20,.98)
        );

}

.artists-sidebar.open .artists-sidebar-toggle-arrow{

    transform:rotate(180deg);

}

    .artists-filter{

        flex:0 0 auto;

    }

    .artists-navigation{

        flex:1;
        min-height:0;

        overflow-y:auto;
        overflow-x:hidden;

        padding-right:10px;

        scrollbar-width:thin;
        scrollbar-color:#d7b37a transparent;

    }

}

@media (max-width:900px){

    .artist-attributes{

        grid-template-columns:1fr;

    }

}

@media (max-width:520px){

    .artist-player iframe{

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

    }

}