:root{--b:#000;--w:#fff;--g1:#0d0d0d;--g2:#1a1a1a;--g5:#8a8a8a;--line:rgba(255,255,255,.18);
--pad:clamp(20px,5vw,72px);--disp:'Oswald','Arial Narrow',sans-serif;--mono:'Special Elite','Courier New',monospace;--body:'Inter',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--b);color:var(--w);font:400 1.05rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--w);outline-offset:3px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--pad);mix-blend-mode:difference;color:#fff}
.mark{font:700 1.5rem/1 var(--disp);letter-spacing:.04em}
.top nav{display:flex;gap:28px}
.top nav a{font:500 .8rem var(--mono);letter-spacing:.05em;text-transform:uppercase;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.top nav a:hover::after{transform:scaleX(1)}
.pill{display:none;border:1px solid #fff;padding:8px 16px;border-radius:99px;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* hero */
.hero{padding:120px var(--pad) 40px}
.eyebrow{color:var(--g5);margin-bottom:12px}
.giant{font:700 clamp(7rem,32vw,34rem)/.8 var(--disp);letter-spacing:-.03em;margin-left:-.04em;user-select:none}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin:40px 0}
.lead{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.4;max-width:34ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:16px 28px;border:1px solid var(--w);background:var(--w);color:var(--b);font:600 .85rem var(--mono);letter-spacing:.05em;text-transform:uppercase;transition:background .25s,color .25s}
.btn:hover{background:var(--b);color:var(--w)}
.btn.ghost{background:transparent;color:var(--w)}
.btn.ghost:hover{background:var(--w);color:var(--b)}
.btn.light{background:var(--b);color:var(--w);border-color:var(--b)}
.btn.light:hover{background:transparent;color:var(--b)}
.hero-photo{border:1px solid var(--line);overflow:hidden}
.hero-photo img{width:100%;height:min(80vh,820px);object-fit:cover;object-position:50% 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-photo:hover img{transform:scale(1.03)}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--w);color:var(--b)}
.track{display:flex;gap:2.5rem;width:max-content;padding:14px 0;font:600 clamp(1.4rem,3vw,2.4rem)/1 var(--disp);text-transform:uppercase;animation:mq 28s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.facts div{padding:40px var(--pad);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.facts div:last-child{border-right:0}
.facts b{font:700 clamp(2.4rem,6vw,5rem)/1 var(--disp)}
.facts span{font:400 .78rem var(--mono);color:var(--g5);text-transform:uppercase;letter-spacing:.05em}

/* sections */
.sec{padding:clamp(64px,10vw,140px) var(--pad);border-bottom:1px solid var(--line)}
.sec.invert{background:var(--w);color:var(--b)}
.label{color:var(--g5);margin-bottom:40px}
.invert .label{color:#555}
h2,.h2{font:700 clamp(2.4rem,6.5vw,6rem)/.95 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.cols p+p{margin-top:1.2em}
.cols p{color:#cfcfcf;font-size:1.1rem}

/* lineup */
.lineup{list-style:none;border-top:1px solid #000}
.lineup li{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:16px;padding:22px 12px;border-bottom:1px solid #000;transition:background .25s,color .25s,padding .25s}
.lineup li:hover{background:#000;color:#fff;padding-left:28px}
.lineup .n{font:400 .8rem var(--mono)}
.lineup .name{font:600 clamp(1.8rem,4.6vw,4rem)/1 var(--disp);text-transform:uppercase}
.lineup .role{font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:right}

/* songs */
.h2{margin-bottom:48px}
.songs{list-style:none;border-top:1px solid var(--line)}
.songs li{display:grid;grid-template-columns:70px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.songs .n{font:400 .8rem var(--mono);color:var(--g5)}
.songs .t{font:600 clamp(1.3rem,2.6vw,2.2rem) var(--disp);text-transform:uppercase}
.songs .a{font:400 .8rem var(--mono);color:var(--g5);text-transform:uppercase}
.note{margin-top:28px;color:var(--g5)}

/* video */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vid{aspect-ratio:16/9;border:1px solid #000;display:grid;place-items:center;position:relative;background:repeating-linear-gradient(135deg,#fff 0 12px,#f0f0f0 12px 24px);transition:background .3s,color .3s}
.vid:hover{background:#000;color:#fff}
.vid .play{font-size:3rem}
.vid .cap{position:absolute;left:16px;bottom:12px;font:400 .75rem var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,22vw,300px);gap:12px}
.gallery img,.ph{width:100%;height:100%;object-fit:cover;border:1px solid var(--line)}

.g1{grid-column:span 2;grid-row:span 2}
.g4{grid-column:span 2}
.ph{display:grid;place-items:center;color:var(--g5);font:400 .75rem var(--mono);text-transform:uppercase;background:var(--g1)}

/* shows */
.shows{list-style:none;border-top:1px solid #000}
.shows li{display:grid;grid-template-columns:200px 1fr auto;gap:16px;padding:22px 0;border-bottom:1px solid #000;align-items:baseline}
.shows .d{font:500 .9rem var(--mono)}
.shows .p{font:600 clamp(1.3rem,2.8vw,2.4rem) var(--disp);text-transform:uppercase}
.shows .c{font:400 .8rem var(--mono);text-transform:uppercase}

/* formats */
.formats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.formats div{padding:32px 24px;border-right:1px solid var(--line);transition:background .3s,color .3s}
.formats div:last-child{border-right:0}
.formats div:hover{background:var(--w);color:var(--b)}
.formats h3{font:600 1.7rem/1.1 var(--disp);text-transform:uppercase;margin-bottom:12px}
.formats p{font-size:.95rem;color:var(--g5)}
.formats div:hover p{color:#444}

/* book */
.giant-s{font-size:clamp(2.6rem,9vw,9rem);max-width:14ch;margin-bottom:32px}
.book .lead{margin-bottom:32px;color:#222}
.contacts{display:flex;gap:48px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid #000}
.contacts dt{font:400 .75rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#555}
.contacts dd{font:600 1.5rem var(--disp)}

/* faq */
.faq{border-top:1px solid var(--line);max-width:900px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:22px 0;font:600 1.5rem var(--disp);text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--g5)}

/* footer */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px var(--pad);font:400 .78rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--g5)}
.foot .mark{color:#fff;font-size:1.2rem}

/* todo placeholders: видны при ?draft */
body:not(.draft) [data-todo]{}
body.draft [data-todo]{outline:1px dashed #f0f;outline-offset:-1px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:860px){
 .top nav{display:none}.pill{display:inline-block}
 .about,.videos{grid-template-columns:1fr}
 .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .formats{grid-template-columns:1fr 1fr}.formats div:nth-child(2){border-right:0}.formats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .gallery{grid-template-columns:1fr 1fr}.g1{grid-column:span 2}.g4{grid-column:span 2}
 .shows li{grid-template-columns:1fr}
 .lineup li,.songs li{grid-template-columns:40px 1fr}.lineup .role,.songs .a{grid-column:2;text-align:left}
}
@media(prefers-reduced-motion:reduce){
 .track{animation-duration:90s}
 .rv{transition-duration:.01s}
 html{scroll-behavior:auto}
}

.mark img{height:44px;width:auto}
.logo-h{margin:8px 0 0;line-height:0}
.logo-h img{width:min(100%,1100px);height:auto;margin-left:-2%}
@media(max-width:860px){.mark img{height:34px}}
.logo-h img{width:auto;max-width:100%;max-height:min(56vh,520px);margin-left:0}
.mark img{height:52px}
@media(max-width:860px){.mark img{height:40px}.logo-h img{max-height:42vh}}

/* lineup thumbs */
.lineup li{grid-template-columns:50px 84px 1fr auto;align-items:center}
.lineup .th{width:84px;height:84px;object-fit:cover;object-position:50% 22%;border:1px solid #000}
.lineup .ph0{background:#eee}
/* gallery: masonry */
.gallery{display:block;column-count:3;column-gap:12px}
.gallery img{width:100%;height:auto;margin:0 0 12px;break-inside:avoid;display:block}
@media(max-width:860px){
 .lineup li{grid-template-columns:30px 64px 1fr}.lineup .th{width:64px;height:64px}
 .lineup .role{grid-column:3}
 .gallery{column-count:2}
}

/* ===== old-rock visual ===== */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.11;mix-blend-mode:screen;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:110px}
.hero .eyebrow{color:#bdbdbd}
.logo-h{display:flex;justify-content:center;margin:6px 0 0}
.logo-h img{margin:0 auto;max-height:min(46vh,440px)}
.hero .lead{max-width:40ch;margin:24px auto 28px}
.hero-cta{justify-content:center}
.hero-photo{margin:56px auto 0;width:min(100%,1100px);border:0;background:#f2efe8;padding:14px 14px 0;box-shadow:0 30px 80px rgba(0,0,0,.7);transform:rotate(-.6deg)}
.hero-photo img{height:auto;width:100%;object-fit:cover;filter:contrast(1.06) saturate(.95)}
.hero-photo:hover img{transform:none}
.hero-photo figcaption{color:#111;padding:14px 0;text-align:center;font-size:.8rem}
.label{display:flex;align-items:center;gap:20px}
.label::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.label::before{content:"★";font-size:1rem}
.eyebrow{letter-spacing:.12em}
.marquee{transform:rotate(-1.2deg);margin:30px -2vw;border:0;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.facts b{font-weight:700}
/* gallery: prints */
.gallery img{border:10px solid #f2efe8;border-bottom-width:28px;box-shadow:0 14px 34px rgba(0,0,0,.6);transition:transform .35s}
.gallery img:nth-child(odd){transform:rotate(-1.4deg)}
.gallery img:nth-child(even){transform:rotate(1.2deg)}
.gallery img:hover{transform:rotate(0) scale(1.02);position:relative;z-index:2}
/* ticket */
.ticket{border:3px double #000;padding:clamp(24px,4vw,56px);position:relative;margin-top:8px}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:34px;height:34px;border-radius:50%;background:#fff;border:3px double #000;transform:translateY(-50%)}
.ticket::before{left:-19px}.ticket::after{right:-19px}
.ticket .giant-s{margin-bottom:24px}
/* lineup rows like setlist */
.lineup li{border-bottom-style:dashed}
.shows li,.songs li{border-bottom-style:dashed}
@media(max-width:860px){
 .hero-photo{padding:8px 8px 0;transform:none}
 .logo-h img{max-height:34vh}
 .marquee{margin:20px -4vw}
 .gallery img{border-width:6px;border-bottom-width:16px}
 .ticket::before,.ticket::after{display:none}
}
@media(prefers-reduced-motion:reduce){body::after{display:none}}
html,body{overflow-x:clip;max-width:100%}
main{overflow-x:clip}

.socials{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.socials a{border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .2s}
.socials a:hover{opacity:.6}
.foot .socials{margin:0;gap:16px}
.btn.light + .btn.light{margin-left:0}

.contacts dd a{border-bottom:2px solid #000}
.contacts dd a:hover{opacity:.6}

/* lightbox */
#lb{border:0;background:rgba(0,0,0,.94);width:100vw;height:100vh;max-width:none;max-height:none;padding:0;color:#fff}
#lb::backdrop{background:#000}
#lb[open]{display:grid;place-items:center}
#lb img{max-width:92vw;max-height:92vh;width:auto;height:auto;border:0;box-shadow:0 20px 80px #000;cursor:zoom-out;transform:none!important}
#lb button{position:fixed;background:none;border:1px solid #fff;color:#fff;width:48px;height:48px;font:400 1.8rem/1 var(--disp);cursor:pointer;border-radius:50%}
#lb button:hover{background:#fff;color:#000}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%}.lb-n{right:16px;top:50%}
.gallery img,.hero-photo img,.lineup .th{cursor:zoom-in}
@media(max-width:860px){.lb-p,.lb-n{top:auto;bottom:16px}}

/* logo: каждая буква увеличивается при наведении */
.lx{position:relative;display:block;aspect-ratio:1400/978;width:min(100%,calc(min(46vh,440px)*1.4315));margin:0 auto;touch-action:manipulation}
.lx .lp{position:absolute;height:auto;max-height:none;max-width:none;margin:0;pointer-events:none;transform-origin:50% 50%;transition:transform .28s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.lx .lp.on{transform:scale(1.14)}
.lx .lp[data-i="1"].on{transform:scale(1.05)}
@media(max-width:860px){.lx{width:min(100%,calc(34vh*1.4315))}}
@media(prefers-reduced-motion:reduce){.lx .lp{transition:none}}
.logo-h{width:100%}

/* ===== состав: карточки ===== */
.team{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px) clamp(20px,2.4vw,36px)}
.member{grid-column:span 3;margin:0}
.member:nth-child(-n+3){grid-column:span 4}
.member img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 14px 30px rgba(0,0,0,.38);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;cursor:zoom-in}
.member:hover img{transform:translateY(-4px);box-shadow:0 22px 40px rgba(0,0,0,.45)}
.member figcaption{padding-top:18px;display:flex;flex-direction:column;gap:4px}
.member b{font:600 clamp(1.3rem,2vw,1.9rem)/1.1 var(--disp);text-transform:uppercase}
.member span{font:400 .8rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#555}
@media(max-width:1000px){.member,.member:nth-child(-n+3){grid-column:span 6}}
@media(max-width:640px){.team{grid-template-columns:1fr;gap:36px}.member,.member:nth-child(-n+3){grid-column:auto}.member img{aspect-ratio:4/5}}
/* состав: тень сильнее, подпись по центру */
.member img{box-shadow:0 22px 50px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4)}
.member:hover img{box-shadow:0 32px 64px rgba(0,0,0,.65),0 10px 22px rgba(0,0,0,.45)}
.member figcaption{align-items:center;text-align:center}