:root{
    --black:#070707;
    --ink:#101010;
    --panel:#0d0d0d;
    --paper:#eee9df;
    --muted:#aaa69f;
    --red:#cf1c18;
    --red-dark:#66100e;
    --line:#302f2d;
    --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--black);
    color:var(--paper);
    font-family:"Arial Narrow",Arial,sans-serif;
    background-image:
        linear-gradient(rgba(0,0,0,.90),rgba(0,0,0,.90)),
        url('../images/wall-texture.webp');
    background-size:cover;
    background-attachment:fixed;
}
a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}

/* Header */
.site-header{
    height:78px;
    background:rgba(5,5,5,.94);
    border-bottom:1px solid rgba(255,255,255,.10);
    position:sticky;
    top:0;
    z-index:30;
    backdrop-filter:blur(12px);
}
.header-inner{
    max-width:var(--max);
    height:100%;
    margin:auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    gap:38px;
}
.mini-logo{
    display:flex;
    width:132px;
    height:58px;
    align-items:center;
}
.mini-logo img{
    width:132px;
    height:auto;
    object-fit:contain;
}
.site-nav{
    margin-left:auto;
    display:flex;
    height:100%;
    align-items:center;
    gap:34px;
}
.site-nav a{
    position:relative;
    text-decoration:none;
    text-transform:uppercase;
    font-family:ui-monospace,Consolas,monospace;
    font-weight:800;
    letter-spacing:.11em;
    font-size:.86rem;
    padding:30px 0 25px;
}
.site-nav a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:19px;
    height:3px;
    background:var(--red);
    transition:right .18s ease;
}
.site-nav a:hover:after,
.site-nav a.is-active:after{right:0}
.site-nav a:hover,
.site-nav a.is-active{color:#fff}
.nav-toggle{
    display:none;
    margin-left:auto;
    background:none;
    border:1px solid #555;
    color:#fff;
    min-height:42px;
    padding:0 15px;
    font-family:ui-monospace,Consolas,monospace;
    letter-spacing:.12em;
}

/* Hero */
.hero{
    min-height:660px;
    height:min(76vh,760px);
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    isolation:isolate;
    background:
        linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.12)),
        url('../images/hero-concrete.webp') center/cover no-repeat;
}
.hero:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(ellipse at center,rgba(0,0,0,.08) 0%,rgba(0,0,0,.30) 52%,rgba(0,0,0,.60) 100%),
        linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.04) 58%,#070707 100%);
}
.hero-stage{
    width:min(920px,calc(100% - 48px));
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:2;
    padding:40px 0 64px;
}
.hero-eyebrow{
    margin:0 0 9px;
    color:#a8a49d;
    font-family:ui-monospace,Consolas,monospace;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.hero-logo{
    width:min(760px,82vw);
    max-height:350px;
    object-fit:contain;
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.red-stripes{
    position:relative;
    width:min(680px,73vw);
    height:38px;
    margin:-10px auto 6px;
}
.red-stripes i{
    position:absolute;
    left:1%;
    width:98%;
    height:10px;
    background:var(--red);
    box-shadow:0 2px 0 rgba(0,0,0,.62);
    clip-path:polygon(1% 28%,98% 4%,100% 72%,2% 100%);
}
.red-stripes i:first-child{top:3px;transform:rotate(-.7deg)}
.red-stripes i:last-child{top:21px;left:3%;width:95%;transform:rotate(.45deg)}
.red-stripes:before,
.red-stripes:after{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--red);
    box-shadow:
        12px 3px 0 -1px var(--red),
        25px -2px 0 -2px var(--red),
        43px 4px 0 -2px var(--red);
}
.red-stripes:before{left:-5px;top:20px}
.red-stripes:after{right:-1px;bottom:3px;transform:scale(.8)}
.descriptor{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:.38em;
    margin:0;
    font-family:Impact,"Arial Black",sans-serif;
    font-size:clamp(1.5rem,3vw,2.65rem);
    line-height:1.1;
    letter-spacing:.055em;
    text-transform:uppercase;
    text-shadow:0 4px 18px rgba(0,0,0,.75);
}
.descriptor b{
    color:var(--red);
    font-family:Impact,"Arial Black",sans-serif;
    font-weight:400;
}
.hero-copy{
    max-width:610px;
    margin:19px auto 24px;
    color:#d4d0ca;
    font-family:ui-monospace,Consolas,monospace;
    font-size:clamp(.98rem,1.4vw,1.16rem);
    line-height:1.65;
}
.hero-actions{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:53px;
    padding:0 28px;
    text-decoration:none;
    border:0;
    cursor:pointer;
    font-family:"Arial Narrow",Arial,sans-serif;
    font-weight:900;
    letter-spacing:.075em;
    text-transform:uppercase;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.button-red{
    background:var(--red);
    color:#fff;
    box-shadow:6px 6px 0 var(--red-dark);
}
.button-red:hover{
    transform:translate(2px,2px);
    box-shadow:4px 4px 0 var(--red-dark);
}
.button-outline{
    border:2px solid var(--paper);
    background:rgba(8,8,8,.72);
    color:var(--paper);
}
.button-outline:hover{
    background:var(--paper);
    color:#080808;
}
.hero-side{
    position:absolute;
    z-index:1;
    top:50%;
    display:flex;
    flex-direction:column;
    color:rgba(238,233,223,.62);
    font-family:Impact,"Arial Black",sans-serif;
    font-size:clamp(1.15rem,1.55vw,1.75rem);
    line-height:1.02;
    letter-spacing:.025em;
    text-transform:uppercase;
    pointer-events:none;
}
.hero-side-left{left:40px;transform:translateY(-50%) rotate(-5deg)}
.hero-side-right{right:34px;transform:translateY(-50%) rotate(4deg);text-align:right}
.hero-side span:last-child{color:rgba(207,28,24,.78)}
.scroll-cue{
    position:absolute;
    z-index:3;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-decoration:none;
    color:#9d9992;
    font-family:ui-monospace,Consolas,monospace;
    font-size:.65rem;
    letter-spacing:.17em;
}
.scroll-cue i{
    color:var(--red);
    font-style:normal;
    font-size:1.25rem;
}

/* Public sections */
.section-wrap{
    max-width:var(--max);
    margin:auto;
    padding:78px 24px;
}
.latest-section{position:relative}
.latest-section:before{
    content:"";
    position:absolute;
    top:26px;
    left:50%;
    width:min(520px,60vw);
    height:2px;
    transform:translateX(-50%) rotate(-.5deg);
    background:linear-gradient(90deg,transparent,var(--red),transparent);
    opacity:.55;
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:28px;
    border-bottom:1px solid #333;
    padding-bottom:16px;
}
.section-heading h2,
.about-copy h2,
.page-hero h1{
    font-family:Impact,"Arial Black",sans-serif;
    text-transform:uppercase;
    letter-spacing:.035em;
    font-size:clamp(2.5rem,6vw,5rem);
    margin:0;
}
.section-heading>a{
    text-transform:uppercase;
    color:#ef2b25;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.1em;
}
.eyebrow{
    font-family:ui-monospace,Consolas,monospace;
    letter-spacing:.15em;
    color:#ef2b25;
    font-weight:700;
    margin:0 0 8px;
}
.mixtape-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}
.mixtape-grid-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.mixtape-card{
    border:1px solid #343331;
    background:#0e0e0e;
    box-shadow:10px 10px 0 rgba(0,0,0,.35);
    transition:.2s transform,.2s border-color;
}
.mixtape-card:hover{
    transform:translateY(-5px);
    border-color:#716d67;
}
.cover-wrap{
    aspect-ratio:1;
    position:relative;
    overflow:hidden;
    background:#181818;
}
.cover-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.88) contrast(1.07);
}
.cover-wrap:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 48%,rgba(0,0,0,.72));
    pointer-events:none;
}
.mix-number{
    position:absolute;
    z-index:2;
    top:18px;
    right:18px;
    color:#df251f;
    font-family:Impact,sans-serif;
    font-size:2.7rem;
    transform:rotate(-5deg);
    text-shadow:2px 2px #050505;
}
.round-play{
    position:absolute;
    z-index:3;
    right:18px;
    bottom:18px;
    width:58px;
    height:58px;
    border-radius:50%;
    border:3px solid #fff;
    background:#111;
    color:#fff;
    font-size:1.2rem;
    cursor:pointer;
}
.round-play:hover{background:var(--red)}
.card-body{padding:20px}
.card-body h3,.card-body h2{
    font-size:1.35rem;
    text-transform:uppercase;
    margin:5px 0 12px;
    letter-spacing:.04em;
}
.card-body p{color:#b9b9b9;line-height:1.55}
.card-body span{font-family:ui-monospace,Consolas,monospace;color:#ddd}
.card-kicker{
    color:#e62b26!important;
    text-transform:uppercase;
    font-size:.78rem;
    letter-spacing:.1em;
}
.about-section{
    max-width:var(--max);
    margin:30px auto 100px;
    padding:0 24px;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    min-height:500px;
}
.about-art{
    background:
        linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.83)),
        url('../images/about-wall.webp') center/cover;
    display:flex;
    align-items:end;
    padding:34px;
    border:1px solid #333;
}
.about-art span{
    font-family:Impact,sans-serif;
    font-size:clamp(3rem,8vw,6.5rem);
    line-height:.82;
    transform:rotate(-4deg);
    color:#eee9df;
    text-shadow:5px 5px #a11210;
}
.about-copy{
    padding:55px;
    background:#101010;
    border:1px solid #333;
}
.about-copy p{
    font-family:ui-monospace,Consolas,monospace;
    line-height:1.8;
    color:#d0d0d0;
    font-size:1.05rem;
}
.about-copy strong{
    display:block;
    color:#ef2b25;
    margin-top:35px;
    letter-spacing:.08em;
}
.site-footer{
    max-width:var(--max);
    margin:auto;
    padding:45px 24px 110px;
    border-top:1px solid #333;
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
}
.site-footer strong{display:block;font-size:1.4rem;letter-spacing:.1em}
.site-footer span{color:#999}
.site-footer nav{display:flex;gap:22px;align-items:center}
.site-footer nav a{text-transform:uppercase;text-decoration:none;font-weight:900}
.site-footer small{grid-column:1/-1;color:#777}
.admin-link{opacity:.35}
.sticky-player{
    position:fixed;
    z-index:50;
    bottom:0;
    left:0;
    right:0;
    background:#111;
    border-top:3px solid var(--red);
    padding:12px max(20px,calc((100vw - var(--max))/2));
    display:grid;
    grid-template-columns:minmax(180px,330px) 1fr 40px;
    gap:20px;
    align-items:center;
}
.sticky-player[hidden]{display:none}
.sticky-player audio{width:100%;height:42px}
.player-meta span{display:block;color:#999;font-size:.8rem;margin-top:4px}
.sticky-player button{background:none;color:#fff;border:0;font-size:2rem}
.page-hero{padding:100px 24px 55px;max-width:var(--max);margin:auto}
.page-hero p:last-child{max-width:720px;color:#bbb;font-family:ui-monospace,Consolas,monospace}
.empty-state{grid-column:1/-1;border:1px dashed #555;padding:50px}
.setup-required{
    min-height:70vh;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    max-width:900px;
    margin:auto;
    padding:60px 24px;
}
.setup-required h1{
    font-family:Impact,sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    line-height:.9;
    margin:10px 0;
}
.setup-required p{max-width:700px;line-height:1.6;color:#bbb}

/* Tablet */
@media(max-width:1000px){
    .hero-side{display:none}
    .hero{height:auto;min-height:650px}
}
@media(max-width:850px){
    .nav-toggle{display:block}
    .site-nav{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        height:auto;
        background:#090909;
        padding:20px 24px 25px;
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
        border-bottom:1px solid #333;
    }
    .site-nav.open{display:flex}
    .site-nav a{padding:12px 0}
    .site-nav a:after{bottom:6px}
    .hero{min-height:620px}
    .hero-stage{padding-top:38px}
    .mixtape-grid,.mixtape-grid-all{grid-template-columns:1fr 1fr}
    .about-section{grid-template-columns:1fr}
    .about-art{min-height:380px}
    .site-footer{grid-template-columns:1fr}
    .site-footer nav{flex-wrap:wrap}
    .sticky-player{grid-template-columns:1fr 35px}
    .sticky-player audio{grid-column:1/-1;grid-row:2}
    .sticky-player>[data-player-close]{grid-column:2;grid-row:1}
}

/* Mobile */
@media(max-width:580px){
    body{background-attachment:scroll}
    .site-header{height:68px}
    .header-inner{padding:0 16px}
    .mini-logo{width:105px;height:50px}
    .mini-logo img{width:105px}
    .site-nav{top:68px}
    .hero{
        min-height:590px;
        background-position:center;
    }
    .hero-stage{
        width:100%;
        padding:34px 18px 58px;
    }
    .hero-eyebrow{
        font-size:.58rem;
        letter-spacing:.12em;
        margin-bottom:12px;
    }
    .hero-logo{
        width:min(100%,520px);
        max-height:250px;
    }
    .red-stripes{
        width:88%;
        height:29px;
        margin:-6px auto 6px;
    }
    .red-stripes i{height:7px}
    .red-stripes i:last-child{top:16px}
    .descriptor{
        font-size:clamp(1.05rem,5vw,1.42rem);
        gap:.27em;
        line-height:1.35;
    }
    .hero-copy{
        max-width:330px;
        margin:15px auto 20px;
        font-size:.9rem;
        line-height:1.55;
    }
    .hero-actions{
        width:100%;
        gap:11px;
    }
    .hero-actions .button{
        width:100%;
        min-height:50px;
    }
    .scroll-cue{display:none}
    .section-wrap{padding:55px 16px}
    .section-heading{align-items:flex-start}
    .section-heading>a{font-size:.75rem}
    .mixtape-grid,.mixtape-grid-all{grid-template-columns:1fr}
    .about-section{padding:0 16px;margin-bottom:60px}
    .about-copy{padding:32px 24px}
    .site-footer{padding-left:16px;padding-right:16px}
    .round-play{width:62px;height:62px}
    .page-hero{padding-left:16px;padding-right:16px}
}