html, body { margin:0; padding:0; background:#080808; }
html { font-size:clamp(15px, 13.5px + 0.25vw, 21px); -webkit-text-size-adjust:100%; }
* { box-sizing:border-box; }
img, iframe { max-width:100%; }
a { color:#F2EFE9; }
a:hover { color:var(--accent, #7D8FA3); }
[hidden] { display:none !important; }

@keyframes menuIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes menuOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(28px); } }
@keyframes veilIn { from { opacity:0; } to { opacity:1; } }
@keyframes veilOut { from { opacity:1; } to { opacity:0; } }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }

:root {
  --ink:#080808;
  --paper:#F2EFE9;
  --shade:rgba(8,8,8,0.72);
  --rule:rgba(242,239,233,0.35);
  --muted:rgba(242,239,233,0.6);
  --mono:'Azeret Mono', monospace;
  --sans:'Satoshi', 'Archivo', sans-serif;
  --tag:'Rock Salt', cursive;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

.focusable:focus { outline:2px solid var(--accent); outline-offset:3px; }

#app { --accent:#4EA8FF; font-family:var(--sans); color:var(--paper); min-height:100vh; position:relative; }

/* background */
.bg-canvas { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; background:var(--ink); }
.bg-vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, rgba(8,8,8,0) 30%, rgba(8,8,8,0.45) 100%); }
.pages { position:relative; z-index:10; }

/* home: 3D extruded mark */
.home { height:500vh; }
.stage { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); perspective:1300px; z-index:5; }
.slab {
  --logoH:calc(min(54vw, 36vh, 30rem) * 0.7625);
  --cube:calc(var(--logoH) * 0.660);
  --depth:calc(min(54vw, 36vh, 30rem) * 0.09);
  position:relative; width:var(--cube); height:var(--logoH); will-change:transform; transform-style:preserve-3d;
}
.slab img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; }
.slab .edge { opacity:0; }
.slab .face { backface-visibility:hidden; }
.slab .face--front { transform:translateZ(calc(var(--depth) * 0.5)); }
.slab .face--back { transform:rotateY(180deg) translateZ(calc(var(--depth) * 0.5)); }

/* shared page furniture */
.page { max-width:min(100%, clamp(60rem, 62vw, 90rem)); margin:0 auto; padding:clamp(6.5rem,14vh,10rem) clamp(1.25rem,5vw,6rem) clamp(7rem,16vh,12rem); display:flex; flex-direction:column; gap:2.5rem; }
.page--music { gap:3rem; }
.page-head { display:flex; flex-direction:column; gap:0.75rem; align-items:flex-start; }
.tag { font-family:var(--tag); font-weight:400; -webkit-text-stroke:0.03em var(--paper); text-shadow:0.06em 0.06em 0 #7D8FA3; letter-spacing:0.02em; text-transform:uppercase; margin:0; }
.tag > span { display:inline-block; transform:scale(0.85,1.4) skewX(-16deg) rotate(-4deg); transform-origin:left center; margin:0.45em 0.3em 0.35em 0; }
.tag--h1 { font-size:clamp(2.25rem,8vw,6.5rem); padding:0.4rem 1.4rem 0.4rem 0; line-height:1.2; }
.tag--h2 { font-size:clamp(1.6rem,4.5vw,3rem); line-height:1.5; }
.kicker { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); background:var(--shade); padding:0.5rem 1.2rem; }
.panel { background:var(--shade); border-radius:4px; padding:clamp(1.25rem,3vw,2rem); }
.stack { display:flex; flex-direction:column; gap:1.25rem; }
.label { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.label--accent { color:var(--accent); }
.pill { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--rule); border-radius:999px; padding:0.7rem 1.6rem; text-decoration:none; align-self:flex-start; }
.pill:hover { border-color:var(--accent); }
.prose { margin:0; line-height:1.6; }

/* shop */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(46%,15rem),1fr)); gap:1.25rem; }
.card { background:var(--shade); border:1px solid var(--rule); border-radius:4px; padding:1.1rem; display:flex; flex-direction:column; gap:0.9rem; color:var(--paper); }
.card:hover { border-color:var(--accent); }
.card-photo { aspect-ratio:1/1.05; padding:0; border:none; overflow:hidden; background:rgba(242,239,233,0.05); border-radius:4px; cursor:zoom-in; display:block; width:100%; }
.card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.price { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; color:var(--paper); }
.buy { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; text-align:center; text-decoration:none; color:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:0.75rem 0.5rem; display:block; }
.buy:hover { background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* music embeds */
.embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:#000; }
.embed--sc { max-width:640px; }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed-play { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.embed-play:focus { outline:2px solid var(--accent); outline-offset:-3px; }
.embed-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.embed-hatch { position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(242,239,233,0.06) 0 2px, transparent 2px 14px), #101010; }
.embed-fade { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.85)); }
.play-btn { position:relative; width:64px; height:64px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.play-btn--yt { height:44px; border-radius:10px; }
.play-btn > span { width:0; height:0; border-style:solid; border-width:10px 0 10px 18px; border-color:transparent transparent transparent var(--ink); margin-left:4px; }
.embed-meta { position:absolute; left:1rem; bottom:1rem; right:9rem; text-align:left; display:flex; flex-direction:column; gap:0.25rem; }
.embed-title { font-family:var(--sans); font-weight:900; font-size:1.1rem; line-height:1.1; text-transform:uppercase; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.embed-author { font-family:var(--mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.embed-out { position:absolute; right:0.6rem; bottom:0.6rem; font-family:var(--mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; background:var(--shade); padding:0.35rem 0.7rem; border-radius:999px; }
.embed-out:focus { outline:2px solid var(--accent); outline-offset:2px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1.25rem; }

/* shows */
.shows { display:flex; flex-direction:column; gap:0.25rem; }
.show { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:1.1rem 0; border-top:1px solid var(--rule); }
.show--past { opacity:0.4; }
.show-date { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; min-width:90px; }
.show:not(.show--past) .show-date { color:var(--accent); }
.show-info { flex:1; min-width:180px; display:flex; flex-direction:column; gap:0.2rem; }
.show-venue { font-weight:500; text-transform:uppercase; letter-spacing:0.02em; }
.show-tickets { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--rule); border-radius:999px; padding:0.55rem 1.3rem; color:rgba(242,239,233,0.75); }
.shows-foot { border-top:1px solid var(--rule); padding-top:1.25rem; font-size:1rem; line-height:1.6; color:rgba(242,239,233,0.8); }

/* about */
.about { padding:clamp(6.5rem,14vh,10rem) 0 clamp(7rem,16vh,12rem); display:flex; flex-direction:column; gap:3rem; }
.about-col { max-width:min(100%, clamp(60rem, 62vw, 90rem)); margin:0 auto; width:100%; padding:0 clamp(1.25rem,5vw,6rem); display:flex; flex-direction:column; gap:1.5rem; }
.about-col--head { gap:0.75rem; align-items:flex-start; }
.lede { font-family:var(--sans); font-weight:900; font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.15; letter-spacing:-0.01em; text-transform:uppercase; margin:0; max-width:24ch; }
.bio { display:flex; flex-direction:column; gap:1rem; max-width:62ch; }
.photo-band { position:relative; width:100%; height:max(18rem, min(100vh, 75vw)); overflow:hidden; background:var(--ink); }
.photo-band .blur { position:absolute; inset:-8%; width:116%; height:116%; max-width:none; object-fit:cover; filter:blur(40px) brightness(0.4) saturate(1.1); display:block; }
.photo-band .main { position:relative; width:100%; height:100%; object-fit:contain; object-position:50% 50%; display:block; filter:drop-shadow(0 24px 48px rgba(0,0,0,0.55)); }
.socials { display:flex; gap:0.9rem; flex-wrap:wrap; align-items:center; }
.socials .pill { align-self:auto; }

/* epk */
.placeholder-box { background:var(--shade); border:1px dashed var(--rule); border-radius:4px; padding:clamp(1.25rem,3vw,2rem); min-height:16rem; display:flex; align-items:center; justify-content:center; text-align:center; }

/* contact */
.contact { min-height:100svh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3rem clamp(2rem,6vw,6rem); padding:clamp(6.5rem,14vh,10rem) clamp(1.25rem,5vw,6rem) clamp(7rem,16vh,12rem); }
.contact-info { flex:1 1 320px; max-width:640px; display:flex; flex-direction:column; align-items:center; gap:2rem; text-align:center; }
.booking { background:var(--shade); padding:1rem 2rem; display:flex; flex-direction:column; gap:0.75rem; align-items:center; }
.booking-email { font-family:var(--sans); font-weight:900; font-size:clamp(2rem,7vw,4.5rem); line-height:0.95; letter-spacing:-0.02em; text-transform:uppercase; overflow-wrap:anywhere; }
.contact-links { display:flex; gap:0.9rem; flex-wrap:wrap; justify-content:center; background:var(--shade); padding:1rem 1.5rem; border-radius:999px; }
.contact-links a { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; }
.contact-form { flex:1 1 320px; max-width:520px; background:var(--shade); padding:1.5rem; display:flex; flex-direction:column; gap:0.9rem; }
.field { font-family:var(--mono); font-size:0.8125rem; letter-spacing:0.06em; color:var(--paper); background:transparent; border:1px solid rgba(242,239,233,0.25); padding:0.8rem 0.9rem; outline:none; width:100%; }
.field:focus { border-color:var(--accent); }
textarea.field { resize:vertical; }
.submit { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); background:var(--accent); border:none; padding:0.9rem 1.2rem; cursor:pointer; align-self:flex-start; }
.submit:hover { filter:brightness(1.1); }
.submit:focus { outline:2px solid var(--paper); outline-offset:3px; }

/* persistent logo: flies from intro center to top slot */
.logo { position:fixed; left:50%; top:max(18px, env(safe-area-inset-top)); transform:translate(-50%,0%); height:clamp(44px, 4vw, 64px); transition:all 900ms var(--ease); z-index:60; background:none; border:none; padding:0; cursor:pointer; }
.logo:focus { outline-offset:4px; }
.logo img { height:100%; display:block; }
.is-intro .logo { top:50%; transform:translate(-50%,-50%); height:min(54vw, 36vh, 30rem); }

/* intro veil */
.veil { position:fixed; inset:0; z-index:40; background:rgba(8,8,8,0.55); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); opacity:0; pointer-events:none; transition:opacity 900ms var(--ease); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.is-intro .veil { opacity:1; pointer-events:auto; }
.veil-enter { position:absolute; top:72%; font-family:var(--mono); font-size:0.9rem; color:rgba(242,239,233,0.7); background:none; border:none; cursor:pointer; animation:bob 1.8s ease-in-out infinite; }
.veil-enter:hover { color:var(--accent); }

/* menu overlay */
.menu { outline:none; position:fixed; inset:0; z-index:50; background:var(--shade); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.75rem; }
.menu-item { font-family:var(--tag); font-weight:400; -webkit-text-stroke:0.03em var(--paper); text-shadow:0.06em 0.06em 0 #7D8FA3; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--paper); background:rgba(8,8,8,0.4); border:1px solid var(--rule); border-radius:999px; padding:0.75rem 0; width:min(60vw,12.5rem); cursor:pointer; }
.menu-item:hover { border-color:var(--accent); color:var(--accent); }
.menu-item--contact { font-size:0.7rem; color:rgba(242,239,233,0.8); background:none; border:none; padding:0.6rem 1rem; margin-top:0.6rem; width:auto; }
.menu-item--contact:hover { color:var(--accent); }

/* product detail overlay */
.detail { position:fixed; inset:0; z-index:55; background:rgba(8,8,8,0.85); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.detail-panel { will-change:transform; transform-origin:center center; background:#0E0E0E; border:1px solid var(--rule); border-radius:4px; max-width:26rem; width:100%; max-height:calc(100vh - 3rem); overflow:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; position:relative; }
.round { border-radius:999px; border:1px solid var(--rule); color:var(--paper); cursor:pointer; font-family:var(--mono); }
.detail-close { position:absolute; top:0.8rem; right:0.8rem; z-index:1; width:40px; height:40px; background:none; }
.gallery { display:flex; flex-direction:column; gap:0.75rem; }
.gallery-frame { position:relative; }
.gallery-track { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; aspect-ratio:1/1; background:rgba(242,239,233,0.05); border-radius:4px; touch-action:pan-x pan-y; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-track img { flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block; scroll-snap-align:start; user-select:none; }
.gallery-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; background:var(--shade); font-size:0.875rem; }
.gallery-nav:hover { border-color:var(--accent); }
.gallery-nav--prev { left:0.6rem; }
.gallery-nav--next { right:0.6rem; }
.dots { display:flex; justify-content:center; gap:0.25rem; }
.dot { width:28px; height:28px; padding:0; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dot:focus { outline-offset:1px; }
.dot > span { width:8px; height:8px; border-radius:999px; border:1px solid var(--paper); background:transparent; }
.dot[aria-current="true"] > span { background:var(--paper); }
.detail-buy { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; text-align:center; text-decoration:none; color:var(--ink); background:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:0.85rem 0; width:100%; display:block; }
.detail-buy:hover { color:var(--ink); }
.detail-buy:focus { outline:2px solid var(--paper); outline-offset:3px; }

/* menu badge */
.badge { position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:70; transition:opacity 900ms var(--ease); width:48px; height:48px; background:rgba(8,8,8,0.55); font-size:0.9rem; display:flex; align-items:center; justify-content:center; }
.badge:hover { border-color:var(--accent); color:var(--accent); }
.badge.is-hidden { opacity:0; pointer-events:none; }