/* Ben Amata Music — the Squarespace theme, rebuilt (2026-11-11). Tokens read from his site.css:
   accent hsl(159.42 60.89% 44.12%), headings acumin-pro 300 uppercase (Inter stands in), body Poppins 300 .07em 1.8,
   nav Poppins 400 .8rem .13em uppercase, buttons outline square Poppins 500 .07em uppercase, h1 9.5 h2 5.5 h3 2.8 h4 1.6 (rem-ish, scaled). */
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-300.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2')}

:root{
  --accent:hsl(159.42 60.89% 44.12%); --accent-dark:hsl(159.42 60.89% 36%);
  --black:#000; --white:#fff; --light:#f5f5f5; --dark-accent:hsl(18 14.29% 13.73%);
  --head:"Inter","acumin-pro","Helvetica Neue",Arial,sans-serif; --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --gutter:4vw; --max:1500px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;font-size:16px;letter-spacing:.07em;line-height:1.8}
img,picture,video,svg{display:block;max-width:100%}
picture img{width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.h4{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:0;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(3rem,9vw,8.5rem);line-height:1}
h2{font-size:clamp(2.2rem,5.2vw,5rem)}
h3{font-size:clamp(1.6rem,2.8vw,2.6rem)}
h4,.h4{font-size:clamp(1rem,1.6vw,1.4rem);line-height:1.4}
p{margin:0 0 1.1em}
strong{font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#000;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.wrap.narrow{max-width:1180px}
.center{text-align:center}
.small{font-size:.85rem}
.green{color:var(--accent)}
.sec{position:relative;padding:clamp(3rem,7vw,6.5rem) 0}
.sec-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.sec-bg picture,.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.light{background:var(--light);color:#111}
.light h1,.light h2,.light h3,.light h4{color:#111}
.bright{background:var(--accent);color:#000}

/* buttons: his are outline, square, Poppins 500 .07em uppercase, 2px stroke */
.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;padding:1.25rem 2.6rem;border:2px solid currentColor;transition:background .2s,color .2s;text-align:center;cursor:pointer;background:transparent}
.btn-outline{color:var(--accent);border-color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#000}
.btn-solid{background:#111;color:#fff;border-color:#111}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#000}
.btn.small{padding:.8rem 1.6rem;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.arrow-link{display:inline-block;color:var(--accent);font-weight:500;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.35em;margin-top:1.2rem}
.arrow-link.dark{color:#000}

/* announcement bar */
.announce{position:relative;background:var(--accent);color:#fff;text-align:center;padding:.55rem 3rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.announce p{margin:0}
.announce-x{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;padding:.3rem;cursor:pointer}
.announce-x svg{width:18px;height:18px}
.announce[hidden]{display:none}

/* header */
.hdr{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.2rem var(--gutter);background:var(--black)}
.hdr-nav{display:flex;gap:1.5rem;align-items:center}
.hdr-nav a{font-weight:400;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);line-height:1.8}
.hdr-nav a:hover,.hdr-nav a.on{text-decoration:underline;text-underline-offset:.4em}
.hdr-logo img{width:clamp(150px,13vw,190px);height:auto}
.hdr-right{display:flex;justify-content:flex-end;align-items:center;gap:1.6rem}
.socials{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0;align-items:center}
.socials svg{width:16px;height:16px;fill:currentColor}
.hdr-social{color:var(--accent)}
.cart{color:var(--accent)}
.cart svg{width:20px;height:20px;stroke:currentColor}
.burger{display:none;background:none;border:0;color:var(--accent);padding:.3rem;cursor:pointer}
.burger svg{width:26px;height:26px;stroke:currentColor}
.menu{position:fixed;inset:0;background:var(--black);z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;padding:2rem}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:1.2rem;text-align:center}
.menu nav a{font-family:var(--head);font-size:2rem;text-transform:uppercase;color:#fff}
.menu-social{color:var(--accent);gap:1.6rem}
.menu-social svg{width:22px;height:22px}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .hdr{grid-template-columns:auto 1fr auto}
  .hdr-nav,.hdr-social{display:none}
  .burger{display:block}
  .hdr-logo{justify-self:center}
}

/* hero: the framed YouTube background video */
.hero{padding:0 0 clamp(2rem,4vw,3rem)}
.hero-frame{position:relative;margin:0 var(--gutter);aspect-ratio:16/9;max-height:84vh;overflow:hidden;background:#000}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero-video{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s}
.hero-video.ready{opacity:1}
.hero-video iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%)}

/* stream on soundcloud / apple */
.stream{padding:clamp(3rem,6vw,5rem) 0;min-height:70vh;display:flex;align-items:center}
.stream .sec-bg::after{background:rgba(0,0,0,.2)}
.stream-grid{width:100%}
.stream-col{max-width:440px}
.stream-col h4,.stream-col .h4{margin:0 0 1rem;font-family:var(--body);font-weight:600;font-size:1.05rem;letter-spacing:.06em}
.stream-col .h4{margin-top:2rem}
.sc-embed{position:relative;background:rgba(0,0,0,.6);min-height:300px;display:flex;align-items:center;justify-content:center}
.sc-embed iframe{width:100%;height:450px;border:0;display:block}
.sc-embed.sc-wide{min-height:300px}
.sc-load{background:var(--accent);color:#000;border:0;font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:1rem 1.6rem;cursor:pointer}
.cover-link{display:block;max-width:300px}
.cover-link img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.btn-play{margin-top:1.2rem;padding:.9rem 0;width:300px;max-width:100%;font-size:1rem}

/* black-bold: the two-column rows, the newsletter, donate */
.bold{padding-top:clamp(3rem,6vw,5rem)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.two-rev .two-img{order:2}
.two-img img{width:100%;height:auto}
.two-img picture img{aspect-ratio:4/5;object-fit:cover}
.two-img-merch img{aspect-ratio:1;object-fit:contain}
.two-txt h3{color:var(--accent)}
.two-txt p{max-width:46ch;font-size:.9rem}
@media (max-width:760px){.two{grid-template-columns:1fr}.two-rev .two-img{order:0}}
.updates{text-align:center;padding:clamp(2rem,5vw,4rem) 0}
.updates h2{color:#fff;margin-bottom:.4rem}
.updates .sub{color:var(--accent);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.newsletter{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.5rem}
.newsletter input{flex:1 1 200px;max-width:260px;background:#fff;color:#111;border:0;padding:1rem 1.2rem;font-family:var(--body);font-size:.85rem;letter-spacing:.06em}
.newsletter .btn{padding:1rem 1.6rem;font-size:.75rem}
.donate{text-align:center;padding-top:clamp(2rem,4vw,3rem)}
.donate h1{margin-bottom:.3em}
.donate-box{max-width:1100px;margin:0 auto;border:2px solid var(--accent);border-radius:20px;padding:clamp(1.5rem,5%,4rem) clamp(1.2rem,6%,5rem);text-align:left}
.amounts{border:0;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.amounts label{display:flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.06em;cursor:pointer}
.amounts input[type=radio]{appearance:none;width:12px;height:12px;border:1px solid #fff;background:transparent;margin:0;display:grid;place-content:center}
.amounts input[type=radio]::before{content:"";width:6px;height:6px;background:#fff;transform:scale(0);transition:transform .1s}
.amounts input[type=radio]:checked::before{transform:scale(1)}
.custom-amount{background:#fff;color:#111;border:0;padding:.7rem 1rem;font-family:var(--body);font-size:.85rem;width:min(100%,320px)}
.custom-amount[hidden]{display:none}
.select-wrap{position:relative}
.select-wrap select{width:100%;appearance:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);padding:.7rem 2.4rem .7rem 1rem;font-family:var(--body);font-size:.82rem;letter-spacing:.06em}
.select-wrap::after{content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.light .select-wrap select{color:#111;border-color:rgba(0,0,0,.35)}
.light .select-wrap::after{border-color:#111}
.total{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;margin:1.4rem 0 1.6rem}
.donate-btn{display:block;width:max-content;margin:0 auto;padding:1.3rem 3rem}
.fine{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin:1.6rem 0 0}

/* album band */
.album{padding:clamp(1.5rem,3vw,2.5rem) 0}
.album .sec-bg::after{background:rgba(0,0,0,.05)}
.album-box{background:#000;text-align:center;padding:clamp(1.5rem,3vw,2.6rem) 1.5rem;margin:0 clamp(0px,5vw,120px)}
.album-box h2{font-weight:700;font-family:var(--head);margin:0 0 .3em;font-size:clamp(1.8rem,5vw,4.6rem)}
.album-box h4{font-weight:700;font-family:var(--head);margin:0;font-size:clamp(.9rem,1.5vw,1.3rem)}

/* footer */
.foot{background:#000;text-align:center;padding:clamp(3rem,6vw,5rem) var(--gutter) 3rem;font-size:.78rem;letter-spacing:.08em}
.foot-mark{width:150px;height:auto;margin:0 auto 1rem}
.foot-logo{width:180px;height:auto;margin:0 auto 1.2rem}
.foot-social{justify-content:center;margin-bottom:1.6rem;color:#fff}
.foot p{margin:0 0 .5em}
.foot a{color:var(--accent);text-decoration:underline;text-underline-offset:.3em}

/* marquee (his heading-1 marquee blocks) */
.marquee{overflow:hidden;white-space:nowrap;position:relative;z-index:1}
.marquee-track{display:inline-flex;align-items:center;gap:1.2em;animation:marq 40s linear infinite;will-change:transform}
.marquee-h1 span{font-family:var(--head);font-weight:300;text-transform:uppercase;font-size:clamp(3rem,9vw,8.5rem);line-height:1}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* media: featured tracks */
.tracks{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.tracks .sec-bg::after{background:rgba(0,0,0,.35)}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2rem,6vw,5rem)}
@media (max-width:1000px){.track-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.track-grid{grid-template-columns:1fr}}
.track{background:rgba(20,20,20,.9);display:flex;align-items:center;gap:.8rem;padding:1rem 1rem 1rem .9rem;min-height:96px}
.track-play{flex:none;width:34px;height:34px;border:0;background:transparent;color:#fff;cursor:pointer;display:grid;place-content:center;padding:0}
.track-play svg{width:22px;height:22px;fill:#fff;stroke:#fff}
.track-play svg:last-child{display:none}
.track.playing .track-play svg:first-child{display:none}
.track.playing .track-play svg:last-child{display:block}
.track-meta{flex:1;min-width:0}
.track-title{font-size:.8rem;font-weight:400;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-artist{font-size:.65rem;color:#bbb;letter-spacing:.06em}
.track-bar{height:2px;background:rgba(255,255,255,.2);margin-top:.5rem}
.track-bar span{display:block;height:100%;width:0;background:var(--accent)}
.track-time{font-size:.62rem;color:#bbb;flex:none}
.track.missing .track-meta::after{content:"Track file coming soon";display:block;font-size:.6rem;color:var(--accent);margin-top:.3rem}

/* the photo reel */
.reel-sec{padding:0;background:#000}
.reel{position:relative}
.reel-track{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:clamp(240px,34vw,480px)}
.reel-track::-webkit-scrollbar{display:none}
.reel-track figure{flex:none;margin:0;height:100%;scroll-snap-align:start}
.reel-track picture,.reel-track img{height:100%;width:auto;max-width:none;object-fit:cover}
.reel-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;background:rgba(0,0,0,.6);border:0;color:#fff;cursor:pointer;display:grid;place-content:center;z-index:2}
.reel-btn svg{width:18px;height:18px;stroke:#fff}
.reel-prev{left:14px}.reel-next{right:14px}

/* videos */
.videos-head{padding:clamp(2.5rem,5vw,4rem) 0}
.videos{padding-top:0}
.yt{position:relative;aspect-ratio:16/9;background:#111;margin:0 auto 1.2rem;overflow:hidden}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-load{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#000;cursor:pointer}
.yt-load img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:#f00;border-radius:12px;display:grid;place-content:center}
.yt-btn svg{width:26px;height:26px;fill:#fff;stroke:#fff}

/* listen on */
.listen{padding-top:clamp(2rem,4vw,3rem)}
.listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;margin-bottom:clamp(2rem,5vw,4rem)}
@media (max-width:760px){.listen-grid{grid-template-columns:1fr}}
.listen-tile img{width:min(60%,260px);height:auto;margin:0 auto 1rem}
.listen-tile h4{color:#fff}
.listen-tile:hover h4{color:var(--accent)}

/* about */
.about-name{text-align:center;margin-bottom:.4em}
.about-grid{display:grid;grid-template-columns:2fr 3fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-bottom:clamp(2rem,5vw,4rem)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}
.about-photo picture img{aspect-ratio:3/4;object-fit:cover}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.about-txt p{font-size:.92rem}
.quote{margin:0 0 clamp(2rem,5vw,4rem);padding:6%;border:2px solid var(--accent);border-radius:20px;background:rgba(0,0,0,.4)}
.quote p{font-family:var(--body);font-weight:300;font-size:.9rem;line-height:1.9;margin:0 0 1rem}
.quote footer{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.affiliates{display:grid;grid-template-columns:repeat(7,1fr);gap:1.2rem;align-items:center;margin:1.5rem 0}
@media (max-width:900px){.affiliates{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.affiliates{grid-template-columns:repeat(2,1fr)}}
.affiliates img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:transparent}
.affiliates picture img{object-fit:contain;aspect-ratio:1}
.about-donate{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.about-donate .sec-bg::after{background:rgba(0,0,0,.5)}
.donate-two{display:grid;grid-template-columns:3fr 2fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:clamp(2rem,5vw,4rem)}
@media (max-width:860px){.donate-two{grid-template-columns:1fr}}
.donate-txt h3{color:var(--accent)}
.donate-txt p{font-size:.92rem}

/* contact */
.contact-hero{min-height:50vh;display:flex;align-items:center;text-align:center}
.contact-hero .sec-bg::after{background:rgba(0,0,0,.35)}
.contact-hero h2{margin:0;color:#fff}
.contact-form{padding-bottom:1rem}
.contact-form h3{margin-bottom:.3em}
.form{margin-top:1.5rem;display:grid;gap:1rem}
.form label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.form .req{text-transform:none;letter-spacing:0;font-weight:300;color:#666}
.form input,.form textarea{display:block;width:100%;margin-top:.4rem;background:#fff;border:1px solid rgba(0,0,0,.35);padding:.9rem 1rem;font-family:var(--body);font-size:16px;letter-spacing:.03em;color:#111}
.form textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.form .btn{width:max-content}
.booking{padding-top:1rem;padding-bottom:1rem;font-size:.92rem}
.booking a{text-decoration:underline;text-underline-offset:.3em}
.ig{padding-top:1.5rem}
.ig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width:760px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-grid a picture img{aspect-ratio:1;object-fit:cover}

/* blog + store */
.blog-list{min-height:60vh}
.post-card{text-align:center;max-width:620px;margin:0 auto}
.post-img{display:block;max-width:360px;margin:0 auto 1.5rem}
.post-img img{width:100%;height:auto}
.post-meta{display:flex;justify-content:center;gap:1.2rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}
.post-card h1{font-size:clamp(1.6rem,3.6vw,3rem)}
.post .post-meta{justify-content:flex-start;margin-bottom:1rem}
.post h1{font-size:clamp(2rem,4.5vw,4rem)}
.post .post-img{margin:1rem 0 2rem;max-width:480px}
.store-head{padding-bottom:0}
.store-head h1{margin:0}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem}
.product{display:block;text-align:center}
.product-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:1rem}
.product-name{font-family:var(--head);text-transform:uppercase;font-size:1rem}
.product-price{font-size:.85rem;margin:.3rem 0 1rem}
.crumb{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2rem}
.crumb a{color:var(--accent)}
.product-grid{display:grid;grid-template-columns:3fr 2fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:860px){.product-grid{grid-template-columns:1fr}}
.product-gallery{display:grid;gap:1rem}
.product-gallery img{width:100%;height:auto}
.product-details h2{font-size:clamp(1.6rem,3vw,2.6rem)}
.price{font-size:1.1rem;margin-bottom:1.5rem}
.order{display:grid;gap:1rem}
.order label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.order .select-wrap{margin-top:.4rem}
.order input[type=number]{display:block;margin-top:.4rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);padding:.7rem 1rem;font-family:var(--body);font-size:16px;width:120px}
.order .fine{text-align:left;text-transform:none;letter-spacing:.03em;font-size:.75rem;color:#bbb}

/* legal */
.legal p,.legal li{font-size:.9rem}
.legal h3{font-size:1.2rem;margin-top:2rem}
.legal h1{font-size:clamp(2rem,4vw,3.2rem)}
