:root {
    --bg:#090708;
    --red:#9d1830;
    --hot:#e22b45;
    --gold:#eec45c;
    --cream:#f5e9dc;
    --muted:#b4a39c;
    --spray:'Sedgwick Ave Display','Permanent Marker',cursive;
    --marker:'Permanent Marker',cursive;
    --mono:'DM Mono',monospace
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(ellipse at 40% 35%,#65132169,transparent 50%),repeating-conic-gradient(from 3deg at 52% 52%,#120b0e 0deg 12deg,#1d0e13 12deg 24deg,#0b080a 24deg 36deg);
    background-attachment:fixed;
    color:var(--cream);
    font-family:'DM Sans',sans-serif
}

.grain {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.1;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")
}

.top {
    height:68px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:2px solid var(--hot);
    box-shadow:0 4px var(--gold);
    background:#090708dd;
    position:relative;
    z-index:2
}

.logo,.back {
    font:17px var(--marker);
    color:var(--cream);
    text-decoration:none
}

.logo b {
    color:var(--hot);
    font-weight:400
}

.back {
    font-size:12px;
    color:var(--gold);
    transform:rotate(2deg)
}

main {
    max-width:1260px;
    margin:auto;
    padding:7vh 6vw 9vh
}

.eyebrow {
    display:inline-block;
    font:12px var(--marker);
    color:var(--gold);
    letter-spacing:.06em;
    transform:rotate(-2deg);
    background:#160b10dc;
    border:1px dashed #eec45c88;
    padding:9px 14px
}

.heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin:24px 0 37px
}

.heading h1 {
    font:clamp(58px,9vw,112px)/.82 var(--spray);
    text-transform:uppercase;
    margin:0;
    transform:rotate(-2deg);
    text-shadow:4px 5px var(--hot),8px 9px #090708
}

.heading h1 span {
    display:block;
    margin:8px 0 0 8%;
    color:var(--gold);
    transform:rotate(2deg)
}

.heading p {
    max-width:350px;
    margin:0;
    color:#c3b2aa;
    font:14px/1.8 'DM Sans',sans-serif
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:25px
}

.album {
    display:block;
    text-decoration:none;
    color:inherit;
    background:#100b0e;
    border:2px solid #8a2033;
    box-shadow:6px 6px #4e1321;
    transition:.25s;
    transform:rotate(-1deg)
}

.album:hover {
    transform:translateY(-7px) rotate(0);
    border-color:var(--gold);
    box-shadow:9px 11px #7b1528
}

.cover {
    aspect-ratio:1;
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 50% 30%,#d8a276,#a14b50 19%,#4b1d29 48%,#100b10 80%);
    border-bottom:3px solid var(--gold)
}

.cover:before {
    content:'';
    position:absolute;
    inset:9%;
    border:2px dashed #f4d794;
    border-radius:50%;
    transform:scaleX(.68) rotate(-12deg)
}

.cover:after {
    content:'';
    position:absolute;
    width:38%;
    height:65%;
    left:31%;
    top:24%;
    background:linear-gradient(#27141bd9,#160d12);
    clip-path:polygon(30% 0,70% 0,82% 16%,100% 100%,0 100%,19% 16%)
}

.cover-title {
    position:absolute;
    z-index:2;
    top:9%;
    left:0;
    right:0;
    text-align:center;
    font:clamp(42px,6vw,66px)/.82 var(--spray);
    color:#f4e1c7;
    text-shadow:3px 4px var(--red);
    transform:rotate(-6deg)
}

.cover-note {
    position:absolute;
    z-index:3;
    bottom:8%;
    background:var(--red);
    padding:7px 13px;
    font:9px var(--marker);
    transform:rotate(2deg)
}

.info {
    padding:18px
}

.info h2 {
    font:29px var(--spray);
    text-transform:uppercase;
    margin:0 0 8px;
    color:var(--gold)
}

.info p {
    font:9px var(--mono);
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#a99790;
    margin:0
}

.open {
    display:block;
    margin-top:17px;
    font:11px var(--marker);
    color:#f5e9dc
}

.open span {
    color:var(--hot)
}

@media(max-width:650px) {
    .top {
        height:60px;
        padding:0 19px
    }

    .logo {
        font-size:14px
    }

    .back {
        font-size:10px
    }

    main {
        padding:6vh 22px
    }

    .heading {
        display:block;
        margin-bottom:25px
    }

    .heading h1 {
        font-size:clamp(58px,16vw,92px)
    }

    .heading p {
        margin-top:20px;
        font-size:13px
    }

    .grid {
        grid-template-columns:1fr 1fr;
        gap:13px
    }

    .info {
        padding:12px
    }

    .info h2 {
        font-size:22px
    }

    .cover-title {
        font-size:clamp(30px,9vw,45px)
    }

    .cover-note {
        font-size:7px;
        padding:5px 7px
    }

    .open {
        font-size:9px
    }
}

.logo-slot {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:60px;
    height:50px;
    text-decoration:none;
    transform:rotate(-3deg)!important
}

.slot-frame {
    width:47px;
    height:42px;
    border:1px dashed #eec45c;
    background:linear-gradient(145deg,#281018,#110b0e);
    box-shadow:3px 3px #8d1d32;
    display:grid;
    place-items:center;
    color:#eec45c;
    text-align:center
}

.slot-frame span {
    font:8px/1.05 'DM Mono',monospace;
    letter-spacing:.09em
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

@media(max-width:700px) {
    .logo-slot {
        width:51px;
        height:43px
    }

    .slot-frame {
        width:40px;
        height:36px
    }

    .slot-frame span {
        font-size:7px
    }
}