:root{--ink:#0d0b0a;--cream:#f4efe6;--muted:#a9a196;--flame:#f2552c;--mint:#9de7d7;--line:rgba(244,239,230,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* pill nav, fixed */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:18px 16px;pointer-events:none}
.nav a{pointer-events:auto;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;background:var(--mint);color:var(--ink);padding:10px 18px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;transition:transform .2s,background .2s}
.nav a:hover{background:var(--flame);transform:translateY(-2px)}
.nav a.on{background:var(--cream)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:110px 24px 48px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,11,10,.55),rgba(13,11,10,.15) 40%,rgba(13,11,10,.85))}
.hero .logo{width:min(78vw,520px)}
.release{display:flex;flex-direction:column;align-items:center;gap:14px}
.release .h{width:min(86vw,560px)}
.release p{margin:0;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:13px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;border-radius:999px;min-height:48px;background:var(--flame);color:var(--ink);transition:background .2s}
.btn:hover{background:var(--cream)}
.btn.ghost{background:transparent;border:1.5px solid var(--cream);color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* sections */
.sec{padding:120px 0 40px}
.sec-h{height:clamp(30px,4.4vw,52px);width:auto;margin:0 auto 48px}
.center{text-align:center}

/* releases: covers only */
.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.cover{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.cover .art{aspect-ratio:1;border-radius:6px;overflow:hidden;background:#1d1a17}
.cover .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cover:hover .art img{transform:scale(1.04)}
.cover .art.blank{display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;background:var(--mint);color:var(--ink);font-weight:800}
.cover .t{font-weight:800}.cover .m{color:var(--muted);font-size:14px;margin-top:-10px}

/* story */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:center}
.story > img{border-radius:6px;aspect-ratio:4/5;object-fit:cover;width:100%}
.story .h{width:min(100%,520px);margin-bottom:24px}
.story p{color:#d9d2c6;font-size:19px;margin:0 0 18px}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-size:24px;color:var(--cream)}

/* live */
.shows{max-width:760px;margin:0 auto}
.show{display:flex;flex-wrap:wrap;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.show .d{font-weight:800;color:var(--mint);min-width:96px}
.show .v{flex:1 1 200px;font-weight:800;font-size:19px}
.show .c{color:var(--muted)}
.note{color:var(--muted);text-align:center;margin:28px 0 0;font-size:15px}

/* herd */
.herd{margin-top:120px;background:var(--flame);color:var(--ink);padding:88px 0;text-align:center}
.herd .h{width:min(86vw,560px);margin:0 auto 16px}
.herd p{margin:0 auto 26px;max-width:460px;font-size:18px}
.herd form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px;margin:0 auto}
.herd input[type=email]{flex:1 1 240px;min-width:0;height:54px;border-radius:999px;border:2px solid var(--ink);background:var(--cream);padding:0 22px;font:inherit}
.herd button{height:54px;border-radius:999px;border:none;background:var(--ink);color:var(--cream);padding:0 28px;font:inherit;font-weight:800;cursor:pointer}
.herd button:hover{background:var(--cream);color:var(--ink)}

/* footer */
footer{padding:56px 0 40px;text-align:center;color:var(--muted);font-size:15px}
footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:18px 0}
footer a{text-decoration:none}footer a:hover{color:var(--mint)}
footer .logo{width:180px;margin:0 auto}

/* lyrics page */
.lyr-head{padding:130px 24px 40px;text-align:center}
.lyr-head .h{height:clamp(40px,7vw,84px);width:auto;margin:0 auto 18px}
.lyr-head p{color:var(--muted);margin:0}
.toc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:820px;margin:0 auto 64px;padding:0 24px}
.toc a{text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px}
.toc a:hover{border-color:var(--mint);color:var(--mint)}
.song{max-width:640px;margin:0 auto;padding:56px 24px;border-top:1px solid var(--line);scroll-margin-top:80px}
.song h2{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:clamp(36px,6vw,56px);line-height:1;margin:0 0 6px}
.song .rel{color:var(--mint);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 28px}
.song .text{white-space:pre-line;font-size:18px;line-height:1.75;color:#e7e0d4}
.back{display:inline-block;margin-top:24px;color:var(--muted);text-decoration:none;font-size:14px}
.back:hover{color:var(--mint)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* icon banner */
.iconbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 16px}
.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
.icons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--cream);transition:color .2s,transform .2s}
.icons a:hover{color:var(--mint);transform:translateY(-2px)}
/* contact */
.contact{text-align:center;padding-bottom:56px}
.contact .lbl{margin:0 0 10px;font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--mint)}
.contact .mail{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(28px,5vw,52px);text-decoration:none;line-height:1.1;word-break:break-word}
.contact .mail:hover{color:var(--flame)}
footer .icons{margin:22px 0}

/* desktop: one clean landing page, sections open as full screen panels */
.close{display:none}
.nav a.dk{display:none}
@media (min-width:1024px) and (min-height:620px){
  html,body{height:100%;overflow:hidden}
  .nav a.dk{display:inline-flex}
  .hero{height:100vh;min-height:0;padding:96px 24px 120px}
  .hero .logo{width:min(30vw,400px)}
  .release .h{width:min(26vw,360px)}
  .iconbar{position:fixed;left:0;right:0;bottom:0;z-index:6;border:0;padding:18px 16px 26px;pointer-events:none}
  .iconbar .icons{gap:10px 26px}
  .iconbar a{pointer-events:auto}
  footer{display:none}
  #music,#story,#live,#herd,#contact{position:fixed;inset:0;z-index:8;margin:0;max-width:none;display:none;overflow-y:auto;padding:120px max(24px,calc((100vw - 1180px)/2)) 80px;background:var(--ink)}
  #herd{background:var(--flame)}
  #music:target,#story:target,#live:target,#herd:target,#contact:target{display:flex;flex-direction:column;justify-content:center;animation:panel .35s ease}
  #contact:target{align-items:center}
  #herd .wrap{width:100%}
  .nav{z-index:10}
  .close{display:inline-flex;position:fixed;top:22px;right:28px;z-index:11;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);border:1.5px solid var(--cream);border-radius:999px;padding:9px 16px}
  #herd .close{color:var(--ink);border-color:var(--ink)}
  .close:hover{background:var(--cream);color:var(--ink)}
  @keyframes panel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* desktop v5: spread out, corners free the faces */
@media (min-width:1024px) and (min-height:620px){
  .nav{justify-content:flex-end;padding:30px 44px}
  .hero{display:block;position:relative;padding:0}
  .hero h1{position:absolute;top:26px;left:44px;z-index:2}
  .hero .logo{width:min(20vw,280px)}
  .hero-bg:after{background:linear-gradient(to right,rgba(13,11,10,.6),rgba(13,11,10,0) 45%),linear-gradient(to bottom,rgba(13,11,10,.35),rgba(13,11,10,0) 30%,rgba(13,11,10,0) 60%,rgba(13,11,10,.7))}
  .release{position:absolute;left:44px;bottom:44px;align-items:flex-start;text-align:left;gap:16px}
  .release .h{width:min(25vw,360px)}
  .release .ctas{justify-content:flex-start}
  .iconbar{left:auto;right:44px;bottom:44px;padding:0}
  .iconbar .icons{justify-content:flex-end;gap:8px 18px}
  .close{right:auto;left:44px;top:30px}
}

/* desktop: management line bottom center */
.mgmt{display:none}
@media (min-width:1024px) and (min-height:620px){
  .mgmt{display:block;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;z-index:7;white-space:nowrap;font-size:14px;color:rgba(244,239,230,.85)}
  .mgmt a{text-decoration:none;color:var(--cream)}
  .mgmt a:hover{color:var(--mint)}
}

/* desktop: bigger logo, Join the herd under it */
.join{display:none}
@media (min-width:1024px) and (min-height:620px){
  .hero .logo{width:min(26vw,380px)}
  .join{display:inline-flex;position:absolute;left:44px;top:calc(26px + min(26vw,380px) * .3233 + 18px);z-index:2;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);border:1.5px solid var(--cream);border-radius:999px;padding:10px 18px}
  .join:hover{background:var(--flame);border-color:var(--flame);color:var(--ink)}
}

@media (max-width:520px){.hero{padding-top:130px}}

/* story v2 */
.story p{font-size:17px;margin:0 0 14px}
.story .lineup{color:var(--mint);font-size:15px}
@media (min-width:1024px) and (min-height:620px){
  #music:target,#story:target,#live:target,#herd:target,#contact:target{justify-content:safe center}
  .story > img{max-height:72vh;width:auto;justify-self:center}
}

/* management line in menu font */
@media (min-width:1024px) and (min-height:620px){
  .mgmt{font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cream)}
}

/* EP As a Friend: record rolls out its tracks */
.ep-toggle{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ep-toggle .art{position:relative}
.ep-badge{position:absolute;left:8px;bottom:8px;background:var(--flame);color:var(--ink);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.ep-toggle[aria-expanded="true"] .art{box-shadow:0 0 0 2px var(--flame)}
.ep{display:none;margin-top:28px;padding:28px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ep.open{display:block}
.ep-head{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;margin-bottom:28px}
.ep-sleeve{position:relative;width:170px;height:170px;flex:none;margin-right:100px}
.ep-cover{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.ep-disc{position:absolute;z-index:1;top:5px;left:5px;width:160px;height:160px}
.ep-vinyl{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#161311 0 2px,#0b0908 2px 4px);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.ep-vinyl img{width:36%;height:36%;border-radius:50%;object-fit:cover}
.ep.open .ep-disc{animation:ep-out .9s cubic-bezier(.2,.8,.2,1) .1s both}
.ep.open .ep-vinyl{animation:ep-spin 3.2s linear 1s infinite}
.ep-meta .lbl{margin:0 0 4px;font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mint)}
.ep-meta h3{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:44px;line-height:1;margin:0 0 6px}
.ep-meta p{margin:0 0 16px;color:var(--muted)}
.ep-tracks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px}
.ep-tracks a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.ep-tracks .art{aspect-ratio:1;overflow:hidden;background:#1d1a17;margin-bottom:6px}
.ep-tracks .art img{width:100%;height:100%;object-fit:cover}
.ep-tracks .n{color:var(--flame);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.ep-tracks .t{font-weight:800;line-height:1.25}
.ep-tracks .m{color:var(--muted);font-size:13px}
.ep-tracks a:hover .t{color:var(--mint)}
.ep.open .ep-tracks li{animation:ep-roll .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.75s + var(--i) * .15s)}
.ep.open .ep-tracks .art{animation:ep-square .7s ease both;animation-delay:calc(.75s + var(--i) * .15s)}
@keyframes ep-out{from{transform:translateX(0)}to{transform:translateX(58%)}}
@keyframes ep-spin{to{transform:rotate(360deg)}}
@keyframes ep-roll{from{opacity:0;transform:translate(-80px,-60px) rotate(-120deg) scale(.35)}to{opacity:1;transform:none}}
@keyframes ep-square{from{border-radius:50%}to{border-radius:6px}}
@media (prefers-reduced-motion:reduce){.ep.open .ep-disc,.ep.open .ep-vinyl,.ep.open .ep-tracks li,.ep.open .ep-tracks .art{animation:none}.ep-disc{transform:translateX(58%)}.ep-tracks .art{border-radius:6px}}

#music>*,#story>*,#live>*,#herd>*,#contact>*{flex-shrink:0}
@media (min-width:1024px) and (min-height:620px){
  #music:target::before,#story:target::before,#live:target::before,#contact:target::before{content:"";position:fixed;top:0;left:0;right:0;height:100px;background:linear-gradient(var(--ink) 65%,rgba(13,11,10,0));z-index:9;pointer-events:none}
}

/* Watch: most watched reels carousel */
.watch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.watch-head .lbl{margin:0 0 4px;font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mint)}
.watch-h{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1;margin:0}
.reel-nav{display:flex;gap:10px}
.reel-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--cream);background:transparent;color:var(--cream);font-size:20px;cursor:pointer}
.reel-btn:hover{background:var(--cream);color:var(--ink)}
.reels{list-style:none;margin:0;padding:0 0 14px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.reel{flex:none;width:min(325px,80vw);scroll-snap-align:start}
.reel-tag{margin:0 0 8px;font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.reel iframe{display:block;width:100%;height:700px;border:0;border-radius:12px;background:#151210}
.reel-follow{margin:18px 0 0;color:var(--muted);font-size:15px}
.reel-follow a{color:var(--cream)}
@media (min-width:1024px) and (min-height:620px){
  #watch{position:fixed;inset:0;z-index:8;margin:0;max-width:none;display:none;overflow-y:auto;padding:120px max(24px,calc((100vw - 1180px)/2)) 60px;background:var(--ink)}
  #watch:target{display:flex;flex-direction:column;justify-content:safe center;animation:panel .35s ease}
  #watch>*{flex-shrink:0}
  #watch:target::before{content:"";position:fixed;top:0;left:0;right:0;height:100px;background:linear-gradient(var(--ink) 65%,rgba(13,11,10,0));z-index:9;pointer-events:none}
  .reel iframe{height:min(700px,calc(100vh - 300px))}
}
.wrap.sec{padding-left:24px;padding-right:24px}