:root{
     --ink:             #0F0F10;
     --oxblood:         #4D1F2A;
     --crimson:         #8B1E2D;
     --leather:         #5A3A2E;
     --brass:           #B08A4A;
     --bone:            #EFE7DA;
     --bone-dim:        #B4A897;
     --ink-2:           #17161A;
     --font-display:    "Playfair Display", Georgia, serif;
     --font-wide:       "Archivo", "Helvetica Neue", Arial, sans-serif;
     --font-body:       "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
     --rule:            1px solid color-mix(in srgb, var(--leather) 70%, transparent);
     --shell:           min(1180px, 100% - 2.5rem);
     --ease:            cubic-bezier(.22,.61,.36,1);
}


/* ========================= BASE =========================================== */
*,*::before,*::after{
     box-sizing:border-box;
}

html {
     scroll-behavior:smooth;
     scroll-padding-top:5rem;
}

body {
     margin:                    0;
     background:                var(--ink);
     color:                     var(--bone);
     font-family:               var(--font-body);
     font-size:                 clamp(1rem, .96rem + .2vw, 1.075rem);
     line-height:               1.65;
     -webkit-font-smoothing:    antialiased;
     overflow-x:                hidden;
}
 img{
     max-width: 100%;
     display:   block;
}
 a{
     color:     inherit;
}
 h1,h2,h3{
     margin:0;
     font-family:var(--font-display);
     font-weight:500;
     line-height:1.05;
}
 ::selection{
     background:var(--crimson);
     color:var(--bone);
}
 :focus-visible{
     outline:2px solid var(--brass);
     outline-offset:3px;
     border-radius:2px;
}
 .skip-link{
     position:      absolute;
     left:          1rem;
     top:-4rem;
     z-index:200;
     background:var(--brass);
     color:var(--ink);
     padding:.6rem 1rem;
     font-size:.8rem;
     transition:top .2s var(--ease);
}
 .skip-link:focus{
     top:1rem;
}
.shell {
     width:         var(--shell);
     margin-inline: auto;
}
.shell img {
     margin: 0 auto;
}


/* ============================================================ CURTAIN INTRO ============================================================ */
 body.curtain-locked{
     overflow:hidden;
}
 #curtain{
     position:fixed;
     inset:0;
     z-index:150;
     overflow:hidden;
     background:#0B0305;
     transition:opacity .7s var(--ease) 1.35s, visibility .7s 1.35s;
}
 #curtain.open{
     opacity:0;
     visibility:hidden;
     pointer-events:none;
}
/* --- velvet panels --- */
 .panel{
     position:absolute;
     top:0;
     bottom:0;
     width:51%;
     z-index:1;
     transition:transform 2s cubic-bezier(.72,.02,.2,1) .35s;
     will-change:transform;
}
 .panel--l{
     left:0;
}
 .panel--r{
     right:0;
}
 #curtain.open .panel--l{
     transform:translateX(-100.5%);
}
 #curtain.open .panel--r{
     transform:translateX(100.5%);
}
 .velvet{
     position:absolute;
     inset:0;
     background-image:
    /* depth: dark at the outer edge and again at the centre seam */
     linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 7%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 58%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.88) 100%),
    /* gathered top and floor shadow */
     linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 12%, rgba(0,0,0,0) 32%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.55) 100%),
    /* irregular secondary folds - different period breaks the repeat */
     repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0px, rgba(0,0,0,.05) 21px, rgba(255,225,210,.07) 44px, rgba(0,0,0,.10) 68px, rgba(0,0,0,.34) 91px),
    /* primary velvet folds */
     repeating-linear-gradient(90deg, #35060A 0px, #5E0B12 14px, #8E121B 30px, #B71822 44px, #CE2530 53px, #A61520 64px, #6D0D14 82px, #3D060B 100px, #2A0407 110px, #35060A 126px), linear-gradient(#5A0910,#1E0306);
     background-blend-mode:normal,normal,overlay,normal,normal;
}
 .panel--r .velvet{
     transform:scaleX(-1);
}
/* --- spotlight --- */
 .spotlight{
     position:absolute;
     left:50%;
     top:44%;
     width:min(1200px,150vw);
     aspect-ratio:1;
     transform:translate(-50%,-50%);
     z-index:2;
     pointer-events:none;
     mix-blend-mode:screen;
     background:radial-gradient(circle at 50% 50%, rgba(255,238,208,.34) 0%, rgba(255,200,158,.16) 26%, rgba(226,72,64,.10) 46%, rgba(120,10,18,.05) 62%, transparent 74%);
}
/* --- crest --- */
 .crest-wrap{
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 3;
     display: grid;
     place-items: center;
     transition: opacity .55s var(--ease), transform .7s var(--ease);
}
 #curtain.open .crest-wrap{
     opacity: 0;
}
 .crest {
}
 .crest img {
     margin: 0 auto;
     display: block;
     width: 100%;
     max-width: 800px;
     height: auto;
}
/* ============================================================ NAV ============================================================ */
 .nav{
     position:fixed;
     top:0;
     left:0;
     right:0;
     z-index:100;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:1rem;
     padding:1.05rem clamp(1.25rem,4vw,3rem);
     background:color-mix(in srgb, var(--ink) 82%, transparent);
     backdrop-filter:blur(14px);
     border-bottom:1px solid transparent;
     transition:padding .4s var(--ease), background .4s, border-color .4s;
}
 .nav.stuck{
     border-bottom-color: color-mix(in srgb, var(--brass) 30%, transparent);
     padding-block: .7rem;
}
 .nav-links{
     display: flex;
     gap: clamp(1rem,2.4vw,2.2rem);
     list-style: none;
     margin: 0 auto;
     padding: 0;
}
 .nav-links a{
     position:relative;
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 118;
     font-size:.63rem;
     font-weight:500;
     letter-spacing:.19em;
     text-transform:uppercase;
     text-decoration:none;
     color:var(--bone-dim);
     padding-block:.4rem;
     transition:color .3s;
}
 .nav-links a::after{
     content:"";
     position:absolute;
     left:0;
     right:0;
     bottom:0;
     height:1px;
     background:var(--brass);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .35s var(--ease);
}
 .nav-links a:hover{
     color:var(--bone);
}
 .nav-links a:hover::after{
     transform:scaleX(1);
}
 .burger{
     display:none;
     background:none;
     border:0;
     cursor:pointer;
     color:var(--bone);
     font-size:1.2rem;
     padding:.3rem .5rem;
}
/* ============================================================ HERO ============================================================ */
 .hero{
     min-height:100svh;
     display:grid;
     align-content:center;
     padding:4.5rem 0 4rem;
     position:relative;
     background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--oxblood) 55%, transparent) 0%, transparent 62%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
 .hero::after{
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background:radial-gradient(120% 90% at 50% 50%, transparent 40%, color-mix(in srgb, var(--ink) 85%, transparent) 100%);
}
 .hero .shell{
     position:relative;
     z-index:1;
     text-align:center;
}
 .eyebrow{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-size:.6rem;
     font-weight:600;
     letter-spacing:.34em;
     text-transform:uppercase;
     color:var(--brass);
     margin:0 0 1.4rem;
}
 .hero h1{
     font-size:clamp(3.1rem,13vw,9.5rem);
     letter-spacing:-.02em;
     margin-bottom:.35rem;
}
 .hero h1 em{
     display:block;
     font-style:italic;
     font-weight:400;
     color:var(--brass);
     font-size:.94em;
     margin-top:-.06em;
}
 .hero-sub{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-size:clamp(.68rem,1.7vw,.92rem);
     font-weight:500;
     letter-spacing:.3em;
     text-transform:uppercase;
     color:var(--bone-dim);
     margin:0.5rem 0 2.6rem;
}

 .frame{
     position:relative;
     max-width:860px;
     margin:2.0rem auto 2.8rem;
     border:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
     background:var(--ink);
     padding:.5rem;
}
 .frame::before,.frame::after{
     content:"";
     position:absolute;
     width:10px;
     height:10px;
     border:1px solid var(--brass);
     background:var(--ink);
}
 .frame::before{
     top:-5px;
     left:-5px;
}
 .frame::after{
     bottom:-5px;
     right:-5px;
}
 .frame .ratio, .video .ratio {
     position:relative;
     padding-top:56.25%;
}
 .frame iframe, .video iframe{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     border:0;
}
 .cta-row{
     display:flex;
     flex-wrap:wrap;
     gap:.9rem;
     justify-content:center;
}
 .btn{
     display:inline-block;
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-size:.65rem;
     font-weight:600;
     letter-spacing:.22em;
     text-transform:uppercase;
     text-decoration:none;
     padding:1rem 2.1rem;
     border:1px solid var(--brass);
     color:var(--brass);
     background:transparent;
     transition:background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
 .btn:hover{
     background:var(--brass);
     color:var(--ink);
}
 .btn--fill{
     background:var(--crimson);
     border-color:var(--crimson);
     color:var(--bone);
}
 .btn--fill:hover{
     background:var(--brass);
     border-color:var(--brass);
     color:var(--ink);
}
 .btn--muted{
     border-color:color-mix(in srgb,var(--leather) 90%, transparent);
     color:var(--bone-dim);
}
 .btn--muted:hover{
     background:var(--leather);
     color:var(--bone);
     border-color:var(--leather);
}
 .btn[aria-disabled="true"]{
     border-color:color-mix(in srgb,var(--leather) 60%, transparent);
     color:color-mix(in srgb,var(--bone-dim) 60%, transparent);
     pointer-events:none;
}
 .scroll-cue{
     margin-top:3.2rem;
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-size:.55rem;
     letter-spacing:.32em;
     text-transform:uppercase;
     color:var(--bone-dim);
}
 .scroll-cue span{
     display:block;
     width:1px;
     height:44px;
     margin:.8rem auto 0;
     background:linear-gradient(var(--brass), transparent);
}
/* ============================================================ SECTIONS ============================================================ */
 .band{
     padding:clamp(4.5rem,10vw,8rem) 0;
}
 .band--tint{
     background:linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb,var(--oxblood) 30%, var(--ink)) 50%, var(--ink) 100%);
}
 .band--oxblood{
     background:color-mix(in srgb,var(--oxblood) 42%, var(--ink));
}
 .section-head{
     margin-bottom:clamp(2.4rem,5vw,3.6rem);
     max-width:46ch;
}
 .section-head.center{
     margin-inline:auto;
     text-align:center;
}
 .section-head h2{
     font-size:clamp(2.1rem,5.4vw,3.9rem);
     letter-spacing:-.015em;
     margin-top:.7rem;
}
 .section-head p{
     color:var(--bone-dim);
     margin:1rem 0 0;
}
 .split{
     display:grid;
     gap:clamp(2rem,5vw,4.5rem);
     grid-template-columns:1fr 1fr;
     align-items:center;
}
 .split.flip .split-media{
     order:2;
}
 .split-media{
     position:relative;
}
 .split-media img{
     width:100%;
     aspect-ratio:4/5;
     object-fit:cover;
     filter:saturate(.78) contrast(1.06);
}
 .split-media::after{
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background:linear-gradient(200deg, transparent 45%, color-mix(in srgb,var(--oxblood) 60%, transparent) 100%);
     mix-blend-mode:multiply;
}
 .split-media .tag{
     position:absolute;
     left:0;
     bottom:0;
     background:var(--crimson);
     color:var(--bone);
     padding:.5rem 1rem;
     font-size:.58rem;
}
 .pull{
     font-family:var(--font-display);
     font-style:italic;
     font-size:clamp(1.4rem,3.2vw,2.05rem);
     line-height:1.3;
     color:var(--brass);
     border-left:2px solid var(--crimson);
     padding-left:1.3rem;
     margin:0 0 1.8rem;
}
 .body-copy p{
     color:var(--bone-dim);
     margin:0 0 1.15rem;
     max-width:52ch;
}
 .body-copy p:last-child{
     margin-bottom:0;
}
 .body-copy strong{
     color:var(--bone);
     font-weight:500;
}
/* Accolades */
 .creds{
     display:grid;
     gap:1px;
     grid-template-columns:repeat(3,1fr);
     background:color-mix(in srgb,var(--leather) 55%, transparent);
     border:1px solid color-mix(in srgb,var(--leather) 55%, transparent);
     margin-top:clamp(2.4rem,5vw,3.4rem);
}
 .cred{
     background:var(--ink);
     padding:clamp(1.6rem,3vw,2.4rem);
     transition:background .4s var(--ease);
}
 .cred:hover{
     background:color-mix(in srgb,var(--oxblood) 45%, var(--ink));
}
 .cred h3{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-weight:600;
     font-size:.68rem;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--brass);
     margin-bottom:.9rem;
}
 .cred p{
     margin:0;
     font-size:.94rem;
     color:var(--bone-dim);
}
/* Gallery */
 .gallery{
     display:grid;
     gap:.6rem;
     grid-template-columns:repeat(3,1fr);
}
 .gallery button{
     padding:0;
     border:0;
     cursor:pointer;
     background:none;
     position:relative;
     overflow:hidden;
     aspect-ratio:1;
}
 .gallery img{
     width:100%;
     height:100%;
     object-fit:cover;
     filter:grayscale(.55) contrast(1.05);
     transition:transform .7s var(--ease), filter .5s;
}
 .gallery button::after{
     content:"";
     position:absolute;
     inset:0;
     background:color-mix(in srgb,var(--crimson) 40%, transparent);
     opacity:0;
     transition:opacity .45s;
}
 .gallery button:hover img{
     transform:scale(1.05);
     filter:grayscale(0) contrast(1.05);
}
 .gallery button:hover::after{
     opacity:1;
}
/* ============================================================ LISTEN - Spotify ============================================================ */
 .tracks{
     display:grid;
     gap:clamp(1.1rem,2.4vw,1.7rem);
     grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
 .videos {
     display: grid;
     gap: clamp(1.1rem,2.4vw,1.7rem);
     grid-template-columns: repeat(auto-fit, minmax(480px,1fr));
}
 .video {
     border: 1px solid color-mix(in srgb,var(--leather) 75%, transparent);
     background: color-mix(in srgb,var(--oxblood) 30%, var(--ink));
     padding: 1.1rem;
     transition: border-color .4s var(--ease), transform .4s var(--ease);
}
 .track{
     border:1px solid color-mix(in srgb,var(--leather) 75%, transparent);
     background:color-mix(in srgb,var(--oxblood) 30%, var(--ink));
     padding:1.1rem;
     transition:border-color .4s var(--ease), transform .4s var(--ease);
}
 .track:hover{
     border-color:var(--brass);
     transform:translateY(-3px);
}
 .track-meta{
     display:flex;
     align-items:baseline;
     justify-content:space-between;
     gap:1rem;
     margin-bottom:.9rem;
}
 .track-meta h3{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-weight:600;
     font-size:.72rem;
     letter-spacing:.16em;
     text-transform:uppercase;
     color:var(--bone);
}
 .track-meta span{
     font-size:.6rem;
     letter-spacing:.18em;
     text-transform:uppercase;
     color:var(--brass);
     white-space:nowrap;
}
 .track iframe{
     width:100%;
     border:0;
     border-radius:10px;
     display:block;
     background:var(--ink);
}
 .listen-foot{
     margin-top:clamp(2.2rem,5vw,3.2rem);
     display:flex;
     flex-wrap:wrap;
     gap:1rem;
     align-items:center;
     justify-content:center;
}
/* ============================================================ TOUR ============================================================ */
 .dates{
     border-top:var(--rule);
}
 .date{
     display:grid;
     grid-template-columns:9rem 1fr auto;
     gap:clamp(1rem,3vw,2.5rem);
     align-items:center;
     padding:1.6rem .4rem;
     border-bottom:var(--rule);
     transition:background .4s var(--ease), padding-left .4s var(--ease);
}
 .date:hover{
     background:color-mix(in srgb,var(--oxblood) 40%, transparent);
     padding-left:1.1rem;
}
 .date-when{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-weight:600;
     font-size:.7rem;
     letter-spacing:.16em;
     text-transform:uppercase;
     color:var(--brass);
}
 .date-what h3{
     font-family:var(--font-display);
     font-size:clamp(1.15rem,2.4vw,1.55rem);
     margin-bottom:.2rem;
}
 .date-what p{
     margin:0;
     font-size:.82rem;
     color:var(--bone-dim);
}
 .date-what .note{
     display:inline-block;
     margin-top:.45rem;
     font-size:.55rem;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--brass);
     border:1px solid color-mix(in srgb,var(--brass) 45%, transparent);
     padding:.2rem .55rem;
}
 .tour-foot{
     margin-top:2.4rem;
     text-align:center;
}
 .tour-foot a{
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 125;
     font-size:.63rem;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--bone-dim);
     text-decoration:none;
     border-bottom:1px solid color-mix(in srgb,var(--brass) 50%, transparent);
     padding-bottom:.3rem;
     transition:color .3s;
}
 .tour-foot a:hover{
     color:var(--brass);
}
/* ============================================================ SOCIAL + SIGNUP ============================================================ */
 .socials{
     display:flex;
     flex-wrap:wrap;
     gap:.7rem;
     justify-content:center;
}
 .socials a{
     width:3.3rem;
     height:3.3rem;
     display:grid;
     place-items:center;
     border:1px solid color-mix(in srgb,var(--leather) 85%, transparent);
     text-decoration:none;
     font-family:var(--font-wide);
     font-variation-settings:"wdth" 118;
     font-size:.6rem;
     font-weight:600;
     letter-spacing:.08em;
     color:var(--bone-dim);
     transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}
 .socials a:hover{
     background:var(--crimson);
     border-color:var(--crimson);
     color:var(--bone);
     transform:translateY(-3px);
}
 .signup{
     max-width:540px;
     margin-inline:auto;
     text-align:center;
}
 .signup form{
     display:flex;
     gap:.6rem;
     margin-top:1.8rem;
     flex-wrap:wrap;
}
 .signup input{
     flex:1 1 220px;
     min-width:0;
     background:transparent;
     border:1px solid color-mix(in srgb,var(--leather) 85%, transparent);
     color:var(--bone);
     padding:1rem 1.1rem;
     font-family:var(--font-body);
     font-size:.9rem;
     transition:border-color .3s;
}
 .signup input::placeholder{
     color:color-mix(in srgb,var(--bone-dim) 70%, transparent);
}
 .signup input:focus{
     border-color:var(--brass);
     outline:none;
}
 .signup button{
     cursor:pointer;
}
 .signup-note{
     margin-top:1rem;
     font-size:.72rem;
     color:var(--bone-dim);
     min-height:1.2em;
}
/* ============================================================ FOOTER ============================================================ */
 .footer{
     padding:3.2rem 0;
     text-align:center;
     border-top:var(--rule);
}
 .footer .nav-brand{
     font-size:.66rem;
}
 .footer p{
     margin:1.1rem 0 0;
     font-size:.68rem;
     color:var(--bone-dim);
     letter-spacing:.05em;
}
/* ============================================================ LIGHTBOX ============================================================ */
 #lightbox{
     position:fixed;
     inset:0;
     z-index:140;
     background:color-mix(in srgb,var(--ink) 94%, transparent);
     display:none;
     place-items:center;
     padding:clamp(1rem,5vw,3rem);
}
 #lightbox.open{
     display:grid;
}
 #lightbox img{
     max-width:min(1000px,92vw);
     max-height:86vh;
     object-fit:contain;
     border:1px solid color-mix(in srgb,var(--brass) 45%, transparent);
}
 #lightbox .close{
     position:absolute;
     top:1.2rem;
     right:1.4rem;
     background:none;
     border:var(--rule);
     color:var(--bone);
     padding:.5rem .9rem;
     font-size:.6rem;
     cursor:pointer;
}
 #lightbox .close:hover{
     color:var(--brass);
     border-color:var(--brass);
}
/* ============================================================ REVEAL ============================================================ */
 .reveal{
     opacity:0;
     transform:translateY(22px);
     transition:opacity .9s var(--ease), transform .9s var(--ease);
}
 .reveal.in{
     opacity:1;
     transform:none;
}
/* ============================================================ RESPONSIVE ============================================================ */
 @media (max-width:860px){
     .split{
         grid-template-columns:1fr;
    }
     .split.flip .split-media{
         order:0;
    }
     .creds{
         grid-template-columns:1fr;
    }
     .gallery{
         grid-template-columns:repeat(2,1fr);
    }
     .date{
         grid-template-columns:1fr;
         gap:.7rem;
         text-align:left;
    }
     .date .btn{
         justify-self:start;
    }
     .burger{
         display:block;
    }
     .nav-links{
         position:fixed;
         inset:0 0 auto;
         top:0;
         flex-direction:column;
         align-items:center;
         justify-content:center;
         gap:1.8rem;
         height:100svh;
         background:var(--ink);
         transform:translateY(-100%);
         transition:transform .5s var(--ease);
    }
     .nav-links.open{
         transform:none;
    }
     .nav-links a{
         font-size:.8rem;
    }
     .videos {
         grid-template-columns:1fr;
    }
}
 @media (prefers-reduced-motion: reduce){
     html{
         scroll-behavior:auto;
    }
     *,*::before,*::after{
         animation-duration:.001ms !important;
         animation-iteration-count:1 !important;
         transition-duration:.001ms !important;
    }
     .reveal{
         opacity:1;
         transform:none;
    }
     .crest > *{
         opacity:1;
         animation:none;
    }
}