:root {
    --black:#090708;
    --panel:#100b0e;
    --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;
    --sans:'DM Sans',sans-serif
}

* {
    box-sizing:border-box
}

html,body {
    height:100%;
    margin:0;
    overflow:hidden
}

body {
    background:var(--black);
    color:var(--cream);
    font-family:var(--sans)
}

button,a {
    font:inherit;
    color:inherit
}

a {
    text-decoration:none
}

.grain {
    position:fixed;
    inset:0;
    z-index:10;
    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")
}

.bg {
    position:fixed;
    inset:0;
    background:radial-gradient(ellipse at 50% 50%,#65132166,transparent 48%),#090708;
    z-index:-2
}

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

.logo {
    font:23px var(--marker);
    letter-spacing:.02em;
    transform:rotate(-3deg)
}

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

.nav {
    display:flex;
    gap:30px;
    align-items:center
}

.nav button {
    border:0;
    background:none;
    padding:10px 0;
    color:#c7b8b0;
    text-transform:uppercase;
    font:13px var(--marker);
    cursor:pointer;
    transform:rotate(-2deg);
    transition:.2s
}

.nav button:nth-child(even) {
    transform:rotate(2deg)
}

.nav button:hover,.nav button.active {
    color:var(--gold);
    text-shadow:2px 2px var(--red)
}

.menu {
    display:none;
    background:none;
    border:0;
    color:var(--cream);
    font-size:23px
}

.belt {
    height:31px;
    position:relative;
    z-index:4;
    overflow:hidden;
    white-space:nowrap;
    background:var(--gold);
    color:#160c10;
    border-block:2px solid var(--red);
    font:14px var(--marker);
    letter-spacing:.07em;
    display:flex;
    align-items:center
}

.belt div {
    width:max-content;
    animation:roll 35s linear infinite
}

@keyframes roll {
    to {
        transform:translateX(-50%)
    }
}

.carousel {
    height:calc(100dvh - 101px);
    position:relative;
    overflow:hidden
}

.rail {
    height:100%;
    display:flex;
    width:300%;
    transition:transform .72s cubic-bezier(.2,.75,.18,1)
}

.panel {
    height:100%;
    width:33.333333%;
    flex:none;
    position:relative;
    overflow:hidden;
    display:grid;
    align-items:center;
    padding:34px 9vw 68px;
    isolation:isolate
}

.panel:before {
    content:'';
    position:absolute;
    inset:-10%;
    z-index:-1;
    background:repeating-conic-gradient(from 0deg at 50% 50%,#130b0e 0deg 12deg,#1c0d12 12deg 24deg,#10090b 24deg 36deg);
    opacity:.74
}

.panel:after {
    content:'✦';
    position:absolute;
    z-index:-1;
    color:#eec45c22;
    font-size:clamp(220px,40vw,550px);
    right:5%;
    top:12%;
    transform:rotate(12deg)
}

.intro {
    background:radial-gradient(ellipse at 50% 44%,#7918279c,transparent 52%)
}

.intro:after {
    content:'✧';
    right:11%;
    top:4%;
    font-size:clamp(240px,35vw,490px);
    color:#e22b451a
}

.panel-inner {
    max-width:1100px;
    width:100%;
    margin:auto
}

.intro .panel-inner {
    text-align:center;
    position:relative
}

.intro .panel-inner:before {
    content:'';
    position:absolute;
    inset:7% 5%;
    border:2px solid #db2c436b;
    outline:7px solid #090708;
    box-shadow:10px 10px #9d183045;
    transform:rotate(-1deg);
    z-index:-1
}

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

.hero-title {
    font:clamp(54px,10vw,142px)/.82 var(--spray);
    text-transform:uppercase;
    letter-spacing:.015em;
    margin:27px 0 21px;
    transform:rotate(-2deg);
    text-shadow:4px 5px var(--hot),8px 9px #090708,0 0 30px #c31a3a66
}

.hero-title span {
    display:block;
    color:var(--gold);
    margin:12px 0 0 12%;
    transform:rotate(2deg);
    text-shadow:4px 5px var(--red),8px 9px #090708
}

.intro-text {
    font:clamp(16px,2vw,22px)/1.5 var(--marker);
    max-width:690px;
    margin:0 auto;
    color:#e0cec3;
    transform:rotate(.6deg)
}

.actions {
    margin-top:31px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--hot);
    border:2px solid var(--gold);
    box-shadow:5px 5px #090708,8px 8px var(--red);
    padding:13px 20px;
    font:13px var(--marker);
    transform:rotate(-1deg);
    transition:.2s
}

.button:hover {
    background:var(--gold);
    color:#13090c;
    transform:rotate(1deg) translateY(-2px)
}

.skip-hint {
    position:absolute;
    bottom:19px;
    left:50%;
    transform:translateX(-50%);
    font:10px var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#a8958e
}

.album-panel {
    background:radial-gradient(ellipse at 30% 50%,#7415228c,transparent 48%)
}

.split {
    display:grid;
    grid-template-columns:minmax(240px,.83fr) minmax(320px,1.1fr);
    gap:9vw;
    align-items:center
}

.cover {
    aspect-ratio:1;
    max-width:455px;
    width:100%;
    margin:auto;
    position:relative;
    background:radial-gradient(circle at 50% 30%,#d8a276,#a14b50 19%,#4b1d29 48%,#100b10 80%);
    border:3px solid var(--gold);
    transform:rotate(-2deg);
    box-shadow:13px 13px var(--red),-8px -8px #29111b;
    display:grid;
    place-items:center;
    overflow:hidden
}

.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:8%;
    left:0;
    right:0;
    text-align:center;
    font:clamp(36px,5vw,65px)/.81 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 14px;
    font:10px var(--marker);
    letter-spacing:.04em;
    transform:rotate(2deg)
}

.panel-title {
    font:clamp(48px,7vw,91px)/.86 var(--spray);
    text-transform:uppercase;
    margin:17px 0 19px;
    transform:rotate(-2deg);
    text-shadow:4px 4px var(--red)
}

.panel-title span {
    display:block;
    color:var(--gold);
    margin-left:8%;
    transform:rotate(2deg)
}

.copy {
    max-width:520px;
    color:#c6b6ad;
    font-size:14px;
    line-height:1.8
}

.facts {
    display:flex;
    gap:26px;
    margin:19px 0 27px;
    font:9px var(--mono);
    text-transform:uppercase;
    color:#a99790;
    letter-spacing:.12em
}

.facts b {
    display:block;
    color:#f1e5dc;
    font-weight:400;
    margin-top:7px;
    font-size:10px
}

.singles-panel {
    background:radial-gradient(ellipse at 65% 52%,#273a408c,transparent 48%)
}

.single-cover {
    background:radial-gradient(circle at 50% 40%,#e4c993,#64847b 25%,#283a3d 60%,#101518);
    box-shadow:13px 13px #b62e3d,-8px -8px var(--gold)
}

.single-cover:before {
    border-radius:50%;
    transform:none
}

.single-cover:after {
    width:36%;
    height:36%;
    left:32%;
    top:31%;
    clip-path:none;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff4d2,#c0c8a0 13%,#55716e 48%,#1b282c 85%);
    box-shadow:0 0 55px #ecdb9d80
}

.single-cover .cover-title {
    font-size:clamp(33px,4.8vw,59px)
}

.single-label {
    font:10px var(--mono);
    color:#baa69e;
    letter-spacing:.13em;
    text-transform:uppercase;
    margin:0 0 10px
}

.single-title {
    font:clamp(48px,7vw,90px)/.88 var(--spray);
    color:#e0d6b8;
    margin:15px 0 20px;
    text-shadow:4px 4px #3a5e5a;
    transform:rotate(-2deg)
}

.single-panel-copy {
    font:16px/1.7 var(--marker);
    color:#c1b5a6;
    max-width:470px
}

.arrows {
    position:absolute;
    z-index:4;
    top:50%;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    padding:0 24px;
    pointer-events:none;
    transform:translateY(-50%)
}

.arrow {
    pointer-events:auto;
    border:1px solid #f0c35c88;
    background:#0c080bd9;
    color:var(--gold);
    width:47px;
    height:47px;
    border-radius:50%;
    font-size:23px;
    cursor:pointer;
    transition:.2s;
    box-shadow:3px 3px #a5162c
}

.arrow:hover {
    background:var(--hot);
    color:white;
    transform:scale(1.08)
}

.dots {
    position:absolute;
    z-index:5;
    bottom:19px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:12px
}

.dot {
    width:9px;
    height:9px;
    border:1px solid var(--gold);
    background:transparent;
    transform:rotate(45deg);
    cursor:pointer;
    padding:0
}

.dot.active {
    background:var(--hot);
    box-shadow:0 0 9px var(--hot);
    width:12px;
    height:12px
}

.counter {
    position:absolute;
    z-index:4;
    right:5vw;
    bottom:19px;
    color:#9c8982;
    font:9px var(--mono);
    letter-spacing:.13em
}

@media(max-width:760px) {
    .header {
        height:61px;
        padding:0 19px
    }

    .logo {
        font-size:19px
    }

    .nav {
        display:none;
        position:absolute;
        right:13px;
        top:56px;
        flex-direction:column;
        gap:14px;
        align-items:flex-start;
        padding:17px;
        background:#150c10;
        border:1px solid var(--gold)
    }

    .nav.open {
        display:flex
    }

    .menu {
        display:block
    }

    .belt {
        height:27px;
        font-size:12px
    }

    .carousel {
        height:calc(100dvh - 88px)
    }

    .panel {
        padding:27px 22px 75px
    }

    .split {
        grid-template-columns:minmax(120px,.8fr) minmax(155px,1fr);
        gap:22px
    }

    .cover {
        max-width:310px;
        box-shadow:8px 8px var(--red),-5px -5px #29111b
    }

    .cover-title {
        font-size:clamp(28px,7vw,49px)
    }

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

    .eyebrow {
        font-size:10px;
        padding:7px 9px
    }

    .panel-title {
        font-size:clamp(37px,8vw,62px);
        margin:12px 0
    }

    .copy {
        font-size:12px;
        line-height:1.6
    }

    .facts {
        gap:12px;
        margin:13px 0 17px;
        font-size:8px
    }

    .button {
        font-size:10px;
        padding:11px 13px
    }

    .single-title {
        font-size:clamp(35px,8vw,57px)
    }

    .single-panel-copy {
        font-size:13px;
        line-height:1.6
    }

    .arrows {
        padding:0 9px
    }

    .arrow {
        width:34px;
        height:34px;
        font-size:18px
    }

    .counter {
        display:none
    }

    .dots {
        bottom:15px
    }

    .skip-hint {
        font-size:8px;
        bottom:17px
    }
}

@media(max-width:500px) {
    .panel {
        padding-inline:20px
    }

    .split {
        grid-template-columns:1fr;
        gap:14px;
        text-align:center;
        align-content:center
    }

    .cover {
        width:min(38vh,240px);
        margin:0 auto
    }

    .split .copy {
        margin-inline:auto
    }

    .panel-title span {
        margin-left:2%
    }

    .facts {
        justify-content:center
    }

    .split .eyebrow {
        margin:auto
    }

    .single-panel-copy {
        margin:0 auto
    }

    .intro .panel-inner:before {
        inset:3% 0
    }

    .hero-title {
        font-size:clamp(58px,16vw,90px)
    }

    .intro-text {
        font-size:15px
    }

    .actions {
        margin-top:23px
    }
}

@media(max-height:620px) and (min-width:761px) {
    .panel {
        padding-top:15px;
        padding-bottom:48px
    }

    .cover {
        max-width:min(55vh,360px)
    }

    .panel-title {
        font-size:clamp(42px,6vw,70px);
        margin:10px 0
    }

    .copy {
        font-size:12px;
        line-height:1.6
    }

    .facts {
        margin:13px 0 18px
    }

    .hero-title {
        font-size:clamp(70px,10vw,120px)
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }
}

.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
    }
}