@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --noir:#100D0B; --noir2:#181310; --panel:#1F1813; --bone:#EDE4D6; --mut:#A2907C; --dim:#6F6154;
  --amber:#D69A4E; --amber2:#E8B36A; --rust:#B5502E;
  --line:rgba(237,228,214,.13); --line2:rgba(237,228,214,.24);
  --fd:'Newsreader',Georgia,serif; --ft:'Inter',system-ui,sans-serif; --fm:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--bone);font-family:var(--ft);font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 46px}
@media(max-width:800px){.wrap{padding:0 24px}}
.fd{font-family:var(--fd)}
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ey{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}

/* nav */
nav{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:28px 46px}
nav.scr{position:fixed;background:rgba(16,13,11,.9);backdrop-filter:blur(12px);padding:16px 46px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--fd);font-weight:500;font-size:27px;letter-spacing:.14em;color:var(--bone)}
.logo span{color:var(--amber)}
.nlinks{display:flex;gap:34px}
.nlinks a{font-family:var(--ft);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,228,214,.72);text-decoration:none;transition:.25s}
.nlinks a:hover{color:var(--bone)}
.nbtn{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-decoration:none;padding:11px 22px;border:1px solid var(--line2);transition:.25s}
.nbtn:hover{background:var(--amber);border-color:var(--amber);color:var(--noir)}
@media(max-width:860px){.nlinks{display:none}nav{padding:18px 24px}}

/* hero */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;background:#140f0b center/cover;background-image:url('img/hero.jpg');transform:scale(1.04)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,9,.86),rgba(14,11,9,.4) 60%,rgba(14,11,9,.6)),radial-gradient(120% 90% at 30% 60%,transparent,rgba(14,11,9,.6))}
.hero-in{position:relative;z-index:2;padding:0 46px;max-width:820px}
.hero .ey{margin-bottom:24px}
.hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(3rem,7vw,6.6rem);line-height:1.02;letter-spacing:.005em;margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--amber2)}
.hero p{font-size:1.14rem;font-weight:300;color:rgba(237,228,214,.86);max-width:44ch;margin-bottom:34px}
.hero .lnk{font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);text-decoration:none;border-bottom:1px solid var(--amber);padding-bottom:7px}
.hero-now{position:absolute;right:46px;bottom:8vh;z-index:2;display:flex;align-items:center;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,228,214,.72)}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--amber);animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
@media(max-width:800px){.hero-in{padding:0 24px}.hero-now{display:none}}

section{position:relative}
/* manifesto */
.mani{padding:120px 0;text-align:center;border-bottom:1px solid var(--line)}
.mani .ey{margin-bottom:22px;display:inline-block}
.mani h2{font-family:var(--fd);font-weight:400;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.16;letter-spacing:.005em;max-width:22ch;margin:0 auto}
.mani h2 em{font-style:italic;color:var(--amber)}
.mani p{color:var(--mut);font-size:1.08rem;max-width:54ch;margin:28px auto 0}

/* SIGNATURE now spinning */
.spin{padding:120px 0;background:var(--noir2);border-bottom:1px solid var(--line)}
.spin .head{text-align:center;margin-bottom:52px}
.spin .head .ey{color:var(--amber);display:inline-flex;align-items:center;gap:12px}
.spin .head h2{font-family:var(--fd);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);margin-top:12px}
.spin .head h2 em{font-style:italic;color:var(--amber)}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.chip{font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.03em;padding:10px 20px;border:1px solid var(--line2);background:transparent;color:var(--mut);cursor:pointer;border-radius:100px;transition:.22s}
.chip.on{background:var(--amber);color:var(--noir);border-color:var(--amber)}
.chip:hover{color:var(--bone)}
.record{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--line);background:var(--panel);max-width:940px;margin:0 auto}
.record .cover{position:relative;overflow:hidden;background:#0c0a08 center/cover;background-image:url('img/vinyl.jpg');min-height:420px}
.record .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 60% 45%,transparent,rgba(12,10,8,.5))}
.record .cover .side{position:absolute;top:22px;left:22px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber2);background:rgba(16,13,11,.6);padding:6px 12px;border:1px solid var(--line2)}
.record .meta{padding:46px 48px;display:flex;flex-direction:column;justify-content:center}
.record .np{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.record .rt{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.05;margin-bottom:6px}
.record .ra{font-family:var(--fd);font-style:italic;font-size:1.3rem;color:var(--mut);margin-bottom:24px}
.record .rd{color:var(--mut);font-size:1rem;font-weight:300;margin-bottom:28px;max-width:40ch}
.record .rspecs{display:flex;gap:0;border-top:1px solid var(--line)}
.record .rspecs .rs{flex:1;padding:18px 0;border-right:1px solid var(--line)}
.record .rspecs .rs:last-child{border-right:none}
.record .rspecs .k{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.record .rspecs .v{font-family:var(--fd);font-size:1.2rem}
@media(max-width:760px){.record{grid-template-columns:1fr}.record .cover{min-height:280px}.record .meta{padding:32px 26px}}

/* system */
.sys{padding:0;border-bottom:1px solid var(--line)}
.sys .row{display:grid;grid-template-columns:1.1fr 1fr}
.sys .pic{min-height:70vh;background:#0c0a08 center/cover;background-image:url('img/deck.jpg');filter:contrast(1.05)}
.sys .txt{padding:100px 60px;display:flex;flex-direction:column;justify-content:center}
.sys .ey{margin-bottom:18px}
.sys h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;margin-bottom:18px}
.sys h2 em{font-style:italic;color:var(--amber)}
.sys p{color:var(--mut);font-size:1.05rem;font-weight:300;margin-bottom:26px;max-width:42ch}
.sys .gear{list-style:none}
.sys .gear li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.sys .gear li:last-child{border-bottom:1px solid var(--line)}
.sys .gear .g{font-family:var(--fd);font-size:1.15rem}
.sys .gear .d{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;align-self:center}
@media(max-width:820px){.sys .row{grid-template-columns:1fr}.sys .pic{min-height:44vh}.sys .txt{padding:56px 24px}}

/* program */
.prog{padding:120px 0;border-bottom:1px solid var(--line)}
.prog .ey{margin-bottom:16px;display:block}
.prog h2{font-family:var(--fd);font-weight:400;font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:44px}
.prog h2 em{font-style:italic;color:var(--amber)}
.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;padding:24px 6px;border-bottom:1px solid var(--line);transition:background .2s}
.prow:hover{background:var(--noir2)}
.prow .pt{font-family:var(--fm);font-size:14px;color:var(--amber)}
.prow .pn{font-family:var(--fd);font-size:1.5rem}
.prow .pn small{display:block;font-family:var(--ft);font-size:13px;color:var(--mut);font-weight:300;margin-top:2px}
.prow .pg{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
@media(max-width:700px){.prow{grid-template-columns:auto 1fr}.prow .pg{grid-column:2}}

/* CTA */
.cta{padding:130px 0;text-align:center}
.cta h2{font-family:var(--fd);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.04;margin-bottom:14px}
.cta h2 em{font-style:italic;color:var(--amber2)}
.cta p{color:var(--mut);max-width:46ch;margin:0 auto 34px;font-weight:300}
.cta form{display:flex;gap:0;max-width:480px;margin:0 auto;border-bottom:1px solid var(--line2)}
.cta input{flex:1;background:transparent;border:none;color:var(--bone);font-family:var(--ft);font-weight:300;font-size:16px;padding:15px 4px}
.cta input:focus{outline:none}.cta input::placeholder{color:var(--dim)}
.cta button{background:transparent;border:none;color:var(--amber);font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0 8px}

footer{border-top:1px solid var(--line);padding:58px 46px 42px}
.foot{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.foot .logo{font-size:28px}
.foot .fc{font-family:var(--ft);font-weight:300;font-size:13.5px;color:var(--mut);line-height:2}
.foot .fc b{color:var(--bone);font-weight:400}
.foot-bot{max-width:1160px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

.rv{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.eq i{animation:none;height:12px}}