:root{color-scheme:dark;--cw:calc(min(100vw,1200px) - 2*var(--pad));--bg:#000;--fg:#fff;--mute:#888;--line:#262626;--pad:clamp(1.25rem,3.5vw,3rem);--font:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:4rem;-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{background:var(--bg);color:var(--fg);font:400 .9375rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
sup{font-size:.6em;vertical-align:.6em;line-height:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
section,footer{padding:clamp(1.5rem,3vw,3rem) var(--pad);max-width:1200px;margin:0 auto}
h2{font-size:.9375rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.5rem}
.muted{color:var(--mute)}

/* NAV — logo left, menu centred, socials right */
nav{
  /* logo + socials line up with the page content edges, even on wide laptops */
  --navx:max(var(--pad),calc((100% - 1200px)/2 + var(--pad)));
  position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:max(1rem,env(safe-area-inset-top)) max(var(--navx),env(safe-area-inset-right)) 1rem max(var(--navx),env(safe-area-inset-left))}
/* the blurred bar lives on a pseudo-element so it can't trap the fixed mobile overlay */
nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.94);opacity:0;transition:opacity .3s}
nav.solid::before{opacity:1}
.logo,.links a{font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.logo{justify-self:start}
.links{display:flex;gap:2rem;justify-self:center}
.links a{text-transform:uppercase;transition:color .2s}
.links a:hover{color:var(--mute)}
.links a[aria-current="page"],.links a[aria-current="true"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1.5px}
.nav-right{justify-self:end;display:flex;align-items:center;gap:.75rem}
.burger{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:.5rem;margin-right:-.5rem}
.links .socials{display:none}

/* SOCIAL ICONS */
.socials{display:flex;gap:.35rem;align-items:center;margin-right:-.4rem}
.socials a{color:var(--fg);display:flex;padding:.4rem;transition:color .2s}
.socials a:hover{color:var(--mute)}
.socials svg{width:18px;height:18px}

/* HERO */
.hero{position:relative;height:clamp(320px,62svh,760px);overflow:hidden;background:#111}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent 55%),rgba(0,0,0,.25)}

/* ABOUT — image fills the whole section, text sits on top */
.about{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:flex-end;background:#111}
.about-media{position:absolute;inset:0}
.about-media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.4) 50%,rgba(0,0,0,.2))}
.about:hover .about-media::after{background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.62) 50%,rgba(0,0,0,.4))}
.about-content{position:relative;z-index:1}
.about p{max-width:58ch;font-size:clamp(.9375rem,.87rem + .3vw,1.0625rem);line-height:1.55;letter-spacing:-.01em}
.about p+p{margin-top:.75rem;color:#d4d4d4;font-size:clamp(.8125rem,.78rem + .15vw,.875rem)}
@media (max-width:820px){.about{min-height:520px}}
/* MOBILE ABOUT: zoom in on head-to-shoulders like the desktop crop (scale = zoom, origin = which part of the photo stays put) */
@media (max-width:760px){
  .about-media img{transform:scale(1.6);transform-origin:52% 16%}
}


/* CAROUSELS (music + past events) — flush tiles, no gaps.
   On hover-capable screens site.js duplicates the tiles and scrolls them while hovered.
   On touch screens they stay as a normal swipe strip. */
.tiles-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tiles-wrap::-webkit-scrollbar{display:none}
.tiles{display:flex;gap:0}
.tiles-wrap.marquee{overflow:hidden;scroll-snap-type:none}
.tiles-wrap.marquee .tiles{width:max-content;will-change:transform}
.tile{flex:0 0 280px;flex-basis:calc(var(--cw)/4);scroll-snap-align:start;position:relative;aspect-ratio:1;overflow:hidden;background:#131313;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .4s}
.tile .info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;padding:1rem;background:linear-gradient(to top,rgba(10,10,10,.92),rgba(10,10,10,.25) 70%);opacity:0;transition:opacity .3s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile:hover .info,.tile:focus-visible .info{opacity:1}
.tile .info b{font-weight:500;font-size:1rem;text-transform:uppercase;letter-spacing:.01em}
.tile .info span{color:var(--mute);font-size:.8125rem}
.tile .info p{color:#cfcfcf;font-size:.8125rem;line-height:1.45;margin-top:.35rem}
@media (hover:none){.tile .info{opacity:1;background:linear-gradient(to top,rgba(10,10,10,.85),transparent 55%)}.tile .info p{display:none}}

/* PAST EVENTS — every flyer is the same size (9:10) so mixed square/portrait art sits flush */
.flyer{flex:0 0 280px;flex-basis:calc(var(--cw)/4);aspect-ratio:9/10;scroll-snap-align:start;position:relative;overflow:hidden;background:#131313}
.flyer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s}
.flyer:hover img{filter:none}

.stage{position:relative}
.stage::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s;pointer-events:none}
.stage:hover::after,.stage:focus-within::after{opacity:1}
.view-exp{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--fg);color:#000;padding:1rem 1.75rem;font-size:.9375rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s,background .2s}
.stage:hover .view-exp,.view-exp:focus-visible{opacity:1}
.view-exp:hover{background:#d9d9d9}
@media (hover:none){
  .stage::after{display:none}
  .view-exp{position:static;transform:none;opacity:1;display:block;width:max-content;margin:1.25rem auto 0}
}

/* BRANDS — every logo is sized from --base; --s nudges individual logos so they look equal in weight.
   Logos sit in rows of --cols; a short last row is centred, so adding or removing a logo in brands.txt never looks lopsided. */
.brands{--base:84px;--cols:4;--gx:.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem var(--gx)}
.brand{flex:0 0 calc((100% - (var(--cols) - 1)*var(--gx))/var(--cols));height:calc(var(--base)*1.2);display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s}
.brand:hover{opacity:1}
.brand img{height:var(--base);width:auto;max-width:100%;object-fit:contain;transform:scale(var(--s,1))}

/* Experience page: same logos, smaller, 8 per row (4 on tablets) */
.brands.compact{--base:48px;--cols:8;--gx:1.4rem;gap:.5rem var(--gx)}
.brands.compact .brand{height:calc(var(--base)*1.3)}
@media (max-width:1000px){.brands.compact{--cols:4}}


/* PAST GIGS (Experience page) — condensed bullet lists, two columns */
#experience,#gigs,#past-events,.exp-sec{padding-top:1.5rem;padding-bottom:1.5rem}
#experience{padding-top:clamp(2rem,4vw,3rem)}
.cat{display:block;padding:1.25rem 0;border-top:1px solid var(--line)}
.cat h3{font-size:.9375rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.gigs{list-style:disc;padding-left:1.1rem;columns:2;column-gap:3rem}
.gigs li{break-inside:avoid;padding:.12rem 0;font-size:.8125rem;line-height:1.4}
.gigs li::marker{color:var(--mute)}
.gigs b{font-weight:600;text-transform:uppercase;font-size:.8125rem}
.gigs b{display:inline}
.gigs span{display:inline;color:var(--mute);font-size:.8125rem}
.gigs span::before{content:" · "}
@media (max-width:760px){.gigs{columns:1}}
.stage.plain::after{display:none}

/* CONTACT */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem}
.contact h3{font-size:.8125rem;font-weight:400;color:var(--mute);margin-bottom:.35rem}
.contact a:hover{color:var(--mute)}
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--mute);padding-top:1.5rem;padding-bottom:1.5rem}

/* NAV → burger overlay */
@media (max-width:1100px){
  nav{grid-template-columns:1fr auto}
  .links{position:fixed;inset:0;justify-self:stretch;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:var(--pad);transform:translateY(-100%);transition:transform .45s cubic-bezier(.77,0,.18,1)}
  .links.open{transform:none}
  .links a{font-size:1.75rem}
  .links .socials{display:flex;margin:1.25rem 0 0;gap:.75rem}
  .links .socials a{padding:.6rem}
  .burger{display:block;position:relative;z-index:60}
}
@media (max-width:640px){.nav-right .socials{display:none}}

@media (max-width:999px){
  .tile,.flyer{flex-basis:calc(var(--cw)/3)}
}
@media (max-width:760px){
  .tile{flex-basis:calc(var(--cw)*.72)}
  .flyer{flex-basis:calc(var(--cw)*.62)}

  /* logos flow as a compact centred cloud instead of a tall 2-column grid (both pages) */
  .brands,.brands.compact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem 1.6rem}
  .brands{--base:40px}
  .brands.compact{--base:32px}
  .brand,.brands.compact .brand{flex:0 1 auto;height:auto}
  .brand img{max-width:42vw}
}
/* GALLERY — centre photo large, half of the neighbours peek in; slides are positioned by gallery.js.
   Spans the exact same width as the About image above it (the section drops its side padding, the heading keeps it);
   each slide is half that width so centre + two half-neighbours fill the row edge to edge. */
#gallery{padding-left:0;padding-right:0}
#gallery h2{padding:0 var(--pad)}
.gallery{--sw:50%;position:relative;width:100%;aspect-ratio:2/1;margin:0 auto;overflow:hidden;contain:layout paint;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-2px}
.g-slides{position:absolute;inset:0}
.gslide{position:absolute;top:0;left:50%;width:var(--sw);height:100%;margin-left:calc(var(--sw)/-2);background:#131313;cursor:pointer;will-change:transform,opacity}
.gslide.is-c{cursor:default}
.gslide.far{pointer-events:none}
.gslide img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.g-arrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,0,0,.55);color:var(--fg);cursor:pointer;opacity:0;transition:opacity .25s,background .2s,color .2s}
.g-arrow svg{width:20px;height:20px}
.g-prev{left:1rem}.g-next{right:1rem}
.gallery:hover .g-arrow,.gallery:focus-within .g-arrow{opacity:1}
.g-arrow:hover{background:var(--fg);color:#000}
@media (hover:none){.g-arrow{display:none}}
@media (max-width:760px){.gallery{--sw:56%;aspect-ratio:100/56}}

/* TOUCH DEVICES: no hover exists, so flyers stay in colour and the strip scrolls freely (no sticky snapping) */
@media (hover:none){
  .tiles-wrap{scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* SKIP LINK + KEYBOARD FOCUS */
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--fg);color:#000;padding:.6rem 1rem;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:max(1rem,env(safe-area-inset-top))}
[tabindex="-1"]:focus{outline:none}
.tiles-wrap:focus-visible,.flyer:focus-visible,.tile:focus-visible{outline-offset:-3px}
.flyer{cursor:zoom-in}
.gslide.is-c{cursor:zoom-in}

/* CLICK-TO-COPY EMAIL */

/* LIGHTBOX (flyers + gallery) */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);
  padding:max(1.25rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.lb[hidden]{display:none}
.lb figure{max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.lb img{display:block;width:auto;height:auto;max-width:min(92vw,1100px);max-height:calc(100svh - 7rem);object-fit:contain}
.lb figcaption{color:var(--mute);font-size:.8125rem;text-align:center;max-width:60ch}
.lb figcaption:empty{display:none}
.lb button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,0,0,.55);color:var(--fg);cursor:pointer;transition:background .2s,color .2s}
.lb button[hidden]{display:none}
.lb button:hover{background:var(--fg);color:#000}
.lb button svg{width:20px;height:20px}
.lb-x{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right))}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:max(1rem,env(safe-area-inset-left))}
.lb-next{right:max(1rem,env(safe-area-inset-right))}
@media (max-width:640px){
  .lb-prev,.lb-next{top:auto;margin-top:0;bottom:max(1rem,env(safe-area-inset-bottom))}
  .lb img{max-height:calc(100svh - 9rem)}
}
::selection{background:var(--fg);color:#000}