.at-release-view {
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:var(--rel-bg);
    overflow:hidden;
}

/* HERO */
.at-release-hero {
    position:relative;
    min-height:clamp(680px,48vw,860px);
    overflow:hidden;
    isolation:isolate;
    background:#202027;
}
.at-release-hero-bg {
    position:absolute;
    inset:-34px;
    z-index:0;
    width:calc(100% + 68px);
    height:calc(100% + 68px);
    object-fit:cover;
    object-position:center;
    filter:brightness(.48) saturate(.88);
    transform:scale(1.025);
}
.at-release-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(14,14,19,.86) 0%,rgba(14,14,19,.56) 38%,rgba(14,14,19,.42) 70%,rgba(14,14,19,.72) 100%),
        linear-gradient(0deg,rgba(14,14,19,.80) 0%,transparent 56%);
}
.at-release-hero-inner {
    position:relative;
    z-index:2;
    width:min(100%,var(--rel-max));
    min-height:inherit;
    margin:0 auto;
    padding:clamp(112px,9vw,150px) var(--rel-pad) clamp(72px,7vw,110px);
    display:grid;
    grid-template-columns:minmax(280px,460px) minmax(0,1fr);
    align-items:end;
    gap:clamp(48px,6vw,96px);
}
.at-release-hero-cover {
    width:min(100%,460px);
    aspect-ratio:1;
    overflow:hidden;
    background:#292931;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 38px 100px rgba(0,0,0,.36);
}
.at-release-hero-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.at-release-hero-copy {
    min-width:0;
    padding-bottom:2px;
}
.at-release-hero-copy h1 {
    max-width:900px;
    margin:0;
    padding-right:.08em;
    font-size:clamp(54px,5.7vw,96px);
    line-height:.90;
    letter-spacing:-.06em;
    font-weight:900;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:keep-all;
}
.at-release-hero-artist {
    margin:24px 0 0;
    font-size:clamp(21px,1.7vw,29px);
    color:#f0ebf4;
    font-weight:650;
}
.at-release-hero-tagline {
    max-width:720px;
    margin:20px 0 0;
    font-size:clamp(17px,1.25vw,20px);
    line-height:1.72;
    color:#cbc5d1;
}
.at-release-meta {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 28px;
    margin-top:30px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.13);
    font-size:12px;
    line-height:1.55;
    color:#aaa3b1;
}
.at-release-meta span {
    min-width:0;
}
.at-release-meta span.is-wide {
    grid-column:1 / -1;
}
.at-release-meta b {
    display:block;
    margin-bottom:5px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
    color:#d0b7f3;
}
.at-release-links {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:30px;
}

/* RELEASE NOTE */
.at-release-body {
    width:min(100%,var(--rel-max));
    margin:0 auto;
    padding:clamp(100px,10vw,160px) var(--rel-pad);
}
.at-release-body-grid {
    display:grid;
    grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
    gap:clamp(48px,8vw,130px);
    align-items:start;
}
.at-release-body-title {
    position:sticky;
    top:110px;
}
.at-release-body-title h2 {
    margin:0;
    font-size:clamp(52px,6.5vw,104px);
    line-height:.84;
    letter-spacing:-.065em;
}
.at-release-content {
    min-width:0;
    max-width:850px;
    font-size:clamp(17px,1.22vw,20px);
    line-height:1.95;
    color:#cbc6d0;
}
.at-release-content p:first-child { margin-top:0; }
.at-release-content p { margin:0 0 1.25em; }
.at-release-content h2,
.at-release-content h3 {
    color:#f5f1f7;
    margin:2.2em 0 .8em;
    letter-spacing:-.03em;
}
.at-release-content ul,
.at-release-content ol { padding-left:1.3em; }
.at-release-content img { max-width:100%; height:auto; }
.at-release-content a { color:#d7bfff; }

/* TRACKLIST */
.at-release-tracklist {
    border-top:1px solid var(--rel-line);
    border-bottom:1px solid var(--rel-line);
    padding:clamp(86px,9vw,140px) var(--rel-pad);
    background:
        radial-gradient(circle at 90% 12%,rgba(167,120,255,.08),transparent 28%),
        transparent;
}
.at-release-tracklist-inner {
    width:min(100%,var(--rel-max));
    margin:0 auto;
}
.at-release-tracklist-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:44px;
}
.at-release-tracklist-head h2 {
    margin:0;
    font-size:clamp(58px,7.5vw,118px);
    line-height:.82;
    letter-spacing:-.065em;
}
.at-release-tracklist-head > span {
    padding-bottom:8px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    color:#8f8997;
}
.at-track-list {
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid rgba(255,255,255,.10);
}
.at-track-list li {
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 124px;
    align-items:center;
    gap:20px;
    min-height:72px;
    padding:14px 4px;
    border-bottom:1px solid rgba(255,255,255,.09);
    transition:background .2s ease,padding .2s ease;
}
.at-track-list li:hover {
    padding-left:12px;
    padding-right:12px;
    background:rgba(255,255,255,.025);
}
.at-track-no {
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    color:#c5a9ef;
}
.at-track-title {
    min-width:0;
    font-size:clamp(18px,1.45vw,24px);
    line-height:1.35;
    color:#f1edf4;
    letter-spacing:-.02em;
}
.at-track-time {
    justify-self:end;
    font-size:12px;
    color:#87818e;
    letter-spacing:.08em;
}
.at-release-tracklist-raw {
    font-size:clamp(17px,1.25vw,20px);
    line-height:1.9;
    color:#cbc6d0;
}

/* CONCEPT */
.at-release-concepts {
    padding:clamp(82px,9vw,145px) var(--rel-pad);
}
.at-release-concepts-inner {
    width:min(100%,var(--rel-max));
    margin:0 auto;
}
.at-release-concepts-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px;
}
.at-release-concepts-head h2 {
    margin:0;
    font-size:clamp(58px,8vw,126px);
    line-height:.8;
    letter-spacing:-.065em;
}
.at-release-concept-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(12px,1.6vw,24px);
}
.at-release-concept-grid figure {
    margin:0;
    overflow:hidden;
    background:#24242b;
}
.at-release-concept-grid img {
    display:block;
    width:100%;
    height:auto;
}

/* NAV */
.at-release-nav {
    width:min(100%,var(--rel-max));
    margin:0 auto;
    padding:36px var(--rel-pad) 70px;
    border-top:1px solid var(--rel-line);
    display:flex;
    justify-content:space-between;
    gap:18px;
}
.at-release-nav > div {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

@media(max-width:1100px){
    .at-release-hero-inner{
        grid-template-columns:minmax(250px,400px) minmax(0,1fr);
        gap:48px;
    }
    .at-release-hero-copy h1{font-size:clamp(50px,6vw,82px);}
}

@media(max-width:900px){
    .at-release-hero{min-height:auto;}
    .at-release-hero-inner{
        grid-template-columns:1fr;
        align-items:end;
        gap:40px;
        padding-top:100px;
    }
    .at-release-hero-cover{width:min(68vw,470px);}
    .at-release-hero-copy h1{max-width:760px;}
    .at-release-body-grid{grid-template-columns:1fr;gap:42px;}
    .at-release-body-title{position:static;}
}

@media(max-width:620px){
    .at-release-hero-inner{padding:86px 18px 64px;}
    .at-release-hero-cover{width:100%;}
    .at-release-hero-copy h1{
        font-size:clamp(48px,14vw,74px);
        line-height:.92;
    }
    .at-release-meta{grid-template-columns:1fr;gap:14px;}
    .at-release-meta span.is-wide{grid-column:auto;}

    .at-release-body{padding:78px 18px 90px;}
    .at-release-tracklist{padding:76px 18px 90px;}
    .at-release-tracklist-head{display:block;}
    .at-release-tracklist-head > span{display:block;margin-top:14px;padding:0;}
    .at-track-list li{
        grid-template-columns:46px minmax(0,1fr) auto;
        gap:12px;
        min-height:64px;
    }
    .at-track-title{font-size:17px;}

    .at-release-concepts{padding:76px 18px 90px;}
    .at-release-concepts-head{display:block;}
    .at-release-concept-grid{grid-template-columns:1fr;}
    .at-release-nav{padding:30px 18px 56px;flex-direction:column;}
}

/* TRACKLIST external links */
.at-track-title-link {
    color:#f1edf4 !important;
    text-decoration:none !important;
}
.at-track-title-link:hover {
    color:#d8b8ff !important;
}
.at-track-service {
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:104px;
    height:34px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#d9c9ee !important;
    text-decoration:none !important;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    white-space:nowrap;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.at-track-service svg {
    width:13px;
    height:13px;
    flex:0 0 13px;
    fill:currentColor;
}
.at-track-list li.has-link:hover .at-track-service,
.at-track-service:hover {
    background:rgba(167,120,255,.11);
    border-color:rgba(190,155,255,.36);
    color:#f1e8ff !important;
    transform:translateX(2px);
}
.at-track-service.is-empty {
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
}

@media(max-width:620px){
    .at-track-service{
        min-width:86px;
        height:32px;
        padding:0 10px;
        gap:6px;
        font-size:9px;
    }
    .at-track-service svg{width:12px;height:12px;flex-basis:12px;}
}
