:root{--bg:#f4ece0;--ink:#2a0d0c;--mute:#6b4a43;--panel:#e9dccb;--amber:#a85e0b;--red:#b3261a;--line:#d6c3ab;
--slab:"Alfa Slab One","Rockwell","Georgia",serif;--script:"Yellowtail","Brush Script MT",cursive;--body:"Karla","Helvetica Neue",Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#210808;--ink:#f3e9d8;--mute:#c9a99b;--panel:#2f0e0d;--amber:#eba33b;--red:#e5432d;--line:#4a1b18}}
:root[data-theme="dark"]{--bg:#210808;--ink:#f3e9d8;--mute:#c9a99b;--panel:#2f0e0d;--amber:#eba33b;--red:#e5432d;--line:#4a1b18}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4rem);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}
h2{font:400 clamp(2rem,5vw,3.2rem)/1.1 var(--slab);margin:0 0 1.25rem}

.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;color:#f3e9d8;background:#210808;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,8,8,.55) 0%,rgba(33,8,8,.05) 35%,rgba(33,8,8,.92) 100%)}
.hero>*:not(img){position:relative;z-index:1}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#210808;color:#f3e9d8;border-bottom:1px solid #4a1b18}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#210808;z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;font-weight:700}
.links{display:flex;gap:1.5rem}
.brand{font:400 1.3rem/1 var(--slab);color:#eba33b}
nav a{text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover{border-color:#eba33b}
.title{padding-bottom:clamp(2rem,6vw,4rem)}
.title h1{margin:0 0 1.5rem;line-height:0}
.logo{width:min(460px,80vw);height:auto;filter:drop-shadow(0 4px 24px rgba(0,0,0,.55))}
.btns{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid #eba33b}
.btn.solid{background:#eba33b;color:#2a0d0c}
.btn.solid:hover{background:#f6bb62}
.btn.line{color:#f3e9d8}
.btn.line:hover{background:rgba(243,233,216,.15)}

section{padding:clamp(3.5rem,9vw,6rem) 0}
.about p{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5;max-width:34em;margin:0 0 1rem}
.about .small{font-size:1.125rem;color:var(--mute)}
.gallery{background:var(--panel)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,26vw,280px);gap:.75rem}
.ph{padding:0;border:0;background:#210808;cursor:zoom-in;overflow:hidden;border-radius:6px}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ph:hover img{transform:scale(1.04)}
.ph.tall{grid-row:span 2}
.ph.tall img{object-position:50% 20%}
dialog{border:0;padding:0;background:#000;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none}
dialog[open]{display:flex;align-items:center;justify-content:center}
dialog::backdrop{background:#000}
dialog img{width:100%;height:100%;object-fit:contain;cursor:zoom-out}
.x{position:fixed;top:calc(env(safe-area-inset-top,0px) + .5rem);right:1rem;font-size:2.5rem;line-height:1;color:#f3e9d8;text-shadow:0 0 6px #000;pointer-events:none}

.gigs{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem;max-width:36em}
.gigs li{display:flex;gap:1.25rem;align-items:center;padding:1rem 1.25rem;border:2px solid var(--line);border-radius:8px;background:var(--panel)}
.gigs time{display:flex;flex-direction:column;align-items:center;min-width:4.5rem;line-height:1}
.gigs time b{font:400 2.6rem/1 var(--slab);color:var(--amber)}
.gigs time span{font-size:.95rem;font-weight:700;margin-top:.3rem}
.gigs strong{display:block;font:400 1.4rem/1.2 var(--slab)}
.gigs li div span{color:var(--mute)}
.more{margin:0;color:var(--mute)}
.contact{background:#2f0e0d;color:#f3e9d8}
.contact h2{color:#f3e9d8}
.contact p{max-width:32em;margin:0 0 1.5rem}
.contact .mail{font:400 clamp(1.4rem,4vw,2.4rem)/1.2 var(--slab);color:#eba33b;text-decoration:none;word-break:break-word}
.contact .mail:hover{text-decoration:underline}
footer{padding:1.5rem 0;background:#210808;color:#c9a99b;font-size:1rem}
.videos{background:var(--bg)}
.vwrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.stage{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-height:78vh;width:100%}
.stage video{width:100%;height:100%;object-fit:contain;display:block}
.verr{margin:.75rem 0 0;color:var(--red);font-weight:700}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vbtn{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;padding:.5rem;border:2px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.vbtn:hover{border-color:var(--amber)}
.vbtn[aria-current="true"]{border-color:var(--amber);box-shadow:inset 4px 0 0 var(--amber)}
.vbtn img{width:72px;height:72px;object-fit:cover;border-radius:4px;flex:none}
.vbtn b{display:block;font:400 1.1rem/1.2 var(--slab)}
.vbtn span{color:var(--mute);font-size:1rem}
@media (max-width:820px){.vwrap{grid-template-columns:1fr}.links a{font-size:1rem}}
.members{border-top:1px solid var(--line)}
.member{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:2rem;align-items:start;max-width:900px}
.pbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;overflow:hidden}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:8px}
.member h3{font:400 clamp(1.7rem,4vw,2.2rem)/1.1 var(--slab);margin:0 0 .25rem}
.member .role{color:var(--amber);font-weight:700;margin:0 0 1rem}
.member p{margin:0 0 1rem;max-width:36em}
@media (max-width:700px){.member{grid-template-columns:1fr}.member img{max-width:360px}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}.brand{display:none}.links{width:100%;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ph img{transition:none}}
main{min-height:55vh}
nav a[aria-current="page"]{border-color:#eba33b;color:#eba33b}