/* Эскиз «Граммофон», четвёртая версия: живописные сцены Codex (комната, сцена, бумага, обои), на столе — пластинка группы,
   на сцене — барышни Вари Перлиной. Весь сайт — вечер: тёмные обои, тёплый свет; бумажные вещи остаются бумагой.
   Шрифт один — Cormorant Garamond (заголовки, текст, мелкие подписи капителью); прописью — только логотип. */
:root{--ink:#16110d;--mute:#3e342a;--line:#b9a988;--red:#c8372a;--red2:#8e2219;--gold:#d9b26a;--cream:#f4e8d2;--night:#170d09;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;color:var(--cream);font:19px/1.6 "Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
 background:linear-gradient(rgba(14,7,4,.72),rgba(14,7,4,.82)),url(/eskiz/img/wallpaper.jpg?v=0e7acd99) center/420px repeat,var(--night)}
a{color:var(--gold)}
h1,h2,h3{font-family:inherit;font-weight:500;margin:0;line-height:1.05}
.caps{text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:600}
.hand{font-style:italic;font-weight:500;color:#f1c56e;font-size:22px;line-height:1.2}

/* плёночное зерно и лёгкое дрожание света поверх всего */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 60%,rgba(0,0,0,.38));animation:flicker 7s infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.86}49%{opacity:1}73%{opacity:.93}74%{opacity:1}}
canvas.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- комната ---------- */
.salon{position:relative;overflow:hidden;background:linear-gradient(rgba(12,6,3,.86),rgba(12,6,3,.55) 70%,rgba(12,6,3,.2)),url(/eskiz/img/wallpaper.jpg?v=0e7acd99) center/420px repeat,#140a07}
.topnav{position:relative;z-index:8;max-width:1160px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;
 padding:16px 16px 12px;border-bottom:1px solid rgba(217,178,106,.25)}
.topnav a{color:#e3d0ab;text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:600}
.topnav a:hover{color:#fff}
.salon-head{position:relative;z-index:8;text-align:center;padding:26px 16px 0}
.salon-head .est{color:#c9ad80;margin:0}
.logo{display:block;margin:8px auto 0;width:min(440px,80vw);aspect-ratio:1400/530;
 background:linear-gradient(176deg,#fff0c4 8%,#e3c27c 40%,#b0843a 70%,#f2d99c 92%);
 -webkit-mask:url(/logo.png) center/contain no-repeat;mask:url(/logo.png) center/contain no-repeat;
 filter:drop-shadow(0 2px 1px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,200,120,.25))}
.motto{max-width:640px;margin:6px auto 0;font-style:italic;font-size:20px;color:#dcc7a3}
.room-wrap{position:relative;margin:-40px auto 0;overflow:hidden;width:min(100%,calc((100vh - 40px) * 1.5),1500px)}
.room{position:relative;width:100%;aspect-ratio:3/2;background:url(/eskiz/img/backdrop.jpg?v=0e7acd99) center/100% 100% no-repeat;
 -webkit-mask:linear-gradient(transparent,#000 14%),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
 mask:linear-gradient(transparent,#000 14%) intersect,linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* пластинка стоит на салфетке по центру стола (замер по backdrop.jpg 1536×1024: центр x 765, низ 827) */
.gram{position:absolute;left:32.9%;top:31.25%;width:33.85%;aspect-ratio:1;cursor:pointer;outline:none;z-index:4;-webkit-tap-highlight-color:transparent}
.gram svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(6px 4px 5px rgba(0,0,0,.5))}
.gram::before{content:"";position:absolute;left:22%;right:22%;bottom:.6%;height:3.2%;z-index:-1;border-radius:50%;
 background:radial-gradient(closest-side,rgba(8,3,1,.9),rgba(8,3,1,.45) 60%,transparent)}
.gram::after{content:"";position:absolute;left:30%;right:-12%;bottom:-2.5%;height:8%;z-index:-2;border-radius:50%;
 background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)}
.gram:focus-visible svg{filter:drop-shadow(0 0 2px #f1c56e) drop-shadow(6px 4px 5px rgba(0,0,0,.5))}
#disc-drop{transition:transform .55s cubic-bezier(.3,.1,.3,1),opacity .45s}
.disc-off #disc-drop{transform:translateY(-380px);opacity:0}
.hint{position:absolute;left:12%;top:66%;z-index:5;transform:rotate(-6deg);pointer-events:none;transition:opacity .6s;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.is-on .hint{opacity:0}

/* записка «сейчас играет» — карточка на столе */
.np{position:absolute;left:70.5%;top:63%;width:22%;min-width:260px;z-index:5;color:#1c1815;padding:16px 18px 14px;
 background:linear-gradient(rgba(251,246,234,.55),rgba(251,246,234,.55)),url(/eskiz/img/paper.jpg?v=0e7acd99) center/cover;transform:rotate(-2.2deg);box-shadow:0 1px 1px rgba(0,0,0,.4),-10px 16px 22px rgba(0,0,0,.55)}
.np::before{content:"";position:absolute;inset:6px;border:1px solid rgba(28,24,21,.28);pointer-events:none}
.np .caps{color:#8e2219;display:block;font-size:12px}
.np h3{font-size:27px;margin:6px 0 2px}
.np .by{margin:0;font-style:italic;font-weight:500;color:#3d332a;font-size:16px;line-height:1.35}
.groove{position:relative;height:2px;background:rgba(28,24,21,.22);margin:14px 0 6px;cursor:pointer}
.groove::before{content:"";position:absolute;inset:-8px 0}
.groove i{position:absolute;left:0;top:0;bottom:0;background:#8e2219;width:0}
.groove b{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#b8862f;left:0}
.np .row{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#3d332a}
.np .row .t{margin-right:auto;font-variant-numeric:lining-nums tabular-nums}
.np button{font:inherit;cursor:pointer;background:none;border:1px solid #1c1815;color:#1c1815;padding:5px 11px 6px;line-height:1}
.np button:hover{background:#1c1815;color:#f4e8d2}
.np button.pp{background:#c8372a;border-color:#c8372a;color:#fff;min-width:40px}
.np button.pp:hover{background:#1c1815;border-color:#1c1815}
.np .opts{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:15px}
.np label{display:flex;gap:6px;align-items:center;cursor:pointer;font-style:italic;font-weight:500;color:#3d332a}
.np input{accent-color:#8e2219}
.np a{color:#8e2219;font-style:italic}

/* полка: продолжение стола */
.shelf-wrap{position:relative;z-index:3;margin-top:-1px;padding:0 16px 40px;
 background:linear-gradient(rgba(16,8,4,.15),rgba(16,8,4,.6) 35%,rgba(16,8,4,.92)),url(/eskiz/img/table.jpg?v=0e7acd99) center top/100% auto no-repeat,#120805}
.shelf-wrap .hand{display:block;text-align:center;padding-top:34px;margin-bottom:4px;text-shadow:0 1px 3px #000}
.shelf{max-width:1160px;margin:0 auto;display:flex;justify-content:center;gap:clamp(10px,2vw,26px);padding:58px 8px 6px;overflow-x:auto;scrollbar-width:none;
 -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.sleeve{scroll-snap-align:center}
.shelf::-webkit-scrollbar{display:none}
.sleeve{position:relative;flex:none;width:clamp(128px,14vw,170px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;
 transform:rotate(var(--r,0deg));transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,.1,.3,1.3)}
.sleeve:nth-child(odd){--r:-1.6deg}.sleeve:nth-child(even){--r:1.2deg}
.sleeve .peek{position:absolute;left:5%;top:-13%;width:90%;aspect-ratio:1;transition:transform .45s cubic-bezier(.3,.1,.3,1.2),opacity .3s}
.sleeve .peek img{display:block;width:100%;height:100%;filter:drop-shadow(0 -2px 3px rgba(0,0,0,.5))}
.sleeve .cover{position:absolute;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
/* бумажная фактура на конверте — по форме конверта (окно остаётся прозрачным) */
.sleeve .tex{position:absolute;inset:0;background:url(/eskiz/img/paper.jpg?v=0e7acd99) center/300% auto;mix-blend-mode:multiply;opacity:.85;
 -webkit-mask:var(--m) center/100% 100%;mask:var(--m) center/100% 100%;pointer-events:none}
.sleeve .ttl{position:absolute;left:11%;right:11%;bottom:7%;height:13%;display:flex;align-items:center;justify-content:center;text-align:center;
 font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;color:#1c1815;font-size:clamp(11px,1.1vw,14px);line-height:.95;padding:0 4px}
.sleeve:hover,.sleeve:focus-visible{transform:rotate(0) translateY(-8px);outline:none}
.sleeve:hover .peek,.sleeve:focus-visible .peek{transform:translateY(-14%)}
.sleeve:focus-visible .cover{filter:drop-shadow(0 0 2px #f1c56e) drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.sleeve[aria-pressed="true"] .peek{transform:translateY(-40%);opacity:0}
.sleeve[aria-pressed="true"]::after{content:"играет";position:absolute;left:0;right:0;top:-34px;text-align:center;font-style:italic;font-weight:500;color:#f1c56e;font-size:19px}

/* ---------- сцена ---------- */
.stage{position:relative;overflow:hidden;background:#120806;padding:40px 0 0}
.stage .head{text-align:center;padding:0 16px;position:relative;z-index:7}
.stage h2{font-size:clamp(34px,5vw,54px);color:#f0d79a;text-shadow:0 2px 8px #000}
.stage .sub{margin:4px 0 0;font-style:italic;color:#d4bf9b}
.stage-box{position:relative;overflow:hidden;margin-top:18px}
.stage-scene{position:relative;width:100%;aspect-ratio:3/2;background:url(/eskiz/img/stage.jpg?v=0e7acd99) center/100% 100% no-repeat}
.f{position:absolute;bottom:var(--b);left:var(--x);height:var(--h);margin:0;transform:translateX(-50%);z-index:var(--z,3)}
.f img{display:block;height:100%;width:auto;transform-origin:50% 100%;
 filter:brightness(var(--lit,.9)) saturate(.92) sepia(.06) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
/* тени на досках: плотная под туфлями и мягкая длинная назад, от рампы */
.f::before{content:"";position:absolute;left:6%;right:6%;bottom:-1.6%;height:4.2%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.6) 50%,transparent);z-index:-1}
.f::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-.5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,4,2,.55),transparent);z-index:-2;transform:translateY(-35%)}
.f figcaption{position:absolute;left:50%;bottom:-11%;transform:translateX(-50%);white-space:nowrap;font-style:italic;font-weight:500;color:#f1c56e;
 font-size:clamp(13px,1.5vw,20px);text-shadow:0 1px 3px #000;opacity:0;transition:opacity .4s}
.stage-scene:hover .f figcaption{opacity:.95}
.is-on .f img{animation:sway 2.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes sway{from{transform:rotate(-1.1deg) translateY(0)}to{transform:rotate(1.1deg) translateY(-.6%)}}
.stage .note{position:relative;z-index:7;text-align:center;margin:0;padding:14px 16px 4px;background:#1a0d09}
.stage .credit{position:relative;z-index:7;text-align:center;margin:0;padding:0 16px 30px;background:#1a0d09;font-style:italic;font-size:17px;color:#bfa985}

/* ---------- программка ---------- */
.programme{padding:70px 16px 40px}
.card{position:relative;max-width:900px;margin:0 auto;color:var(--ink);padding:clamp(64px,8vw,84px) clamp(24px,7vw,84px) clamp(70px,9vw,96px);
 background:radial-gradient(ellipse 75% 70% at 50% 45%,rgba(251,246,234,.58) 35%,rgba(251,246,234,.22) 72%,rgba(110,70,30,.22) 100%),
  url(/eskiz/img/paper.jpg?v=0e7acd99) center/cover;box-shadow:0 2px 2px rgba(0,0,0,.4),0 30px 60px rgba(0,0,0,.55),inset 0 0 40px rgba(90,55,20,.25);transform:rotate(-.4deg)}
.card .c{position:absolute;width:74px;height:74px;color:var(--red2)}
.card .c svg{width:100%;height:100%;display:block}
.card .c.tl{left:10px;top:10px}.card .c.tr{right:10px;top:10px;transform:scaleX(-1)}
.card .c.bl{left:10px;bottom:10px;transform:scaleY(-1)}.card .c.br{right:10px;bottom:10px;transform:scale(-1)}
.card>.caps{display:block;text-align:center;color:var(--mute);font-weight:500}
.card>h2{text-align:center;font-size:clamp(40px,6vw,64px);margin:8px 0 0}
.divider{display:block;width:min(420px,80%);height:auto;margin:12px auto 26px;color:var(--red2)}
.prog{list-style:none;margin:0;padding:0;counter-reset:p}
.prog li{counter-increment:p;border-bottom:1px dashed var(--line)}
.prog a{display:grid;grid-template-columns:74px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 18px;padding:12px 4px;text-decoration:none;color:var(--ink)}
.prog .v{grid-row:1/3;width:74px;height:74px;color:var(--ink);transition:transform .3s}
.prog .v svg{width:100%;height:100%}
.prog .t{font-weight:500;font-size:clamp(26px,3.5vw,35px);display:flex;align-items:baseline;gap:12px;min-width:0}
.prog .t::before{content:counter(p,upper-roman) ".";font-style:italic;font-size:.62em;color:var(--red)}
.prog .t::after{content:"";flex:1;border-bottom:2px dotted var(--mute);opacity:.6;transform:translateY(-5px);min-width:20px}
.prog .n{font-style:italic;font-weight:500;font-size:17px;color:var(--mute);white-space:nowrap;font-variant-numeric:lining-nums}
.prog small{grid-column:2/4;font-style:italic;font-weight:500;color:var(--mute);font-size:17px;line-height:1.35;margin-top:2px}
.prog a:hover .t{color:var(--red)}
.prog a:hover .v{transform:rotate(-4deg) scale(1.06)}
.find{display:block;margin:34px 0 0}
.find .caps{color:var(--mute)}
.find input{width:100%;margin-top:6px;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);color-scheme:light;
 font:italic 22px/1.4 "Cormorant Garamond",serif;padding:6px 2px;outline:none}
.find input::placeholder{color:#6a5d4f}
.find input:focus{border-bottom-color:var(--red)}
.find-res{list-style:none;margin:8px 0 0;padding:0;columns:2 220px;column-gap:26px}
.find-res a{display:block;padding:3px 0;color:var(--ink);text-decoration:none;font-size:19px}
.find-res a:hover{color:var(--red)}
.find-res a::before{content:"♪ ";color:var(--red);font-size:.8em}

/* ---------- афишная тумба: живописная улица, афиши по кругу поверх колонны ---------- */
.afisha{padding:40px 16px 70px;text-align:center;overflow:hidden}
.afisha h2{font-size:clamp(36px,5vw,54px);color:#f0d79a}
.afisha .sub{font-style:italic;color:#cdb893;margin:4px 0 0}
.street{position:relative;width:min(560px,100%);margin:26px auto 0;aspect-ratio:2/3;background:url(/eskiz/img/tumba.jpg?v=0e7acd99) center/100% 100% no-repeat;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.tumba{position:absolute;left:var(--tl);width:var(--tw);top:var(--tt);height:var(--th)}
.tumba canvas{display:block;width:100%;height:100%}
@keyframes tumba{to{transform:rotateY(-360deg)}}
.afisha .more{display:inline-block;margin-top:26px;font-style:italic;font-size:20px}

/* ---------- о группе ---------- */
.about{padding:10px 16px 70px}
.about .card{max-width:760px;transform:rotate(.5deg)}
.about p{margin:0 0 14px;font-size:21px;font-weight:500}
.about p:first-of-type::first-letter{float:left;font-weight:600;font-size:84px;line-height:.82;margin:6px 10px 0 0;color:var(--red)}
.about .acts{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:20px;font-size:19px}
.about a{color:var(--red2)}
.plaque{display:inline-block;background:var(--red);color:#fff!important;text-decoration:none;font-style:italic;padding:4px 14px 5px}
.plaque:hover{background:var(--ink)}
.about .old{font-size:17px;color:var(--mute);font-style:italic;font-weight:500}

.author-sign{text-align:center;padding:26px 16px 30px;font-size:13px;line-height:1;letter-spacing:.06em;color:#9c8b76;opacity:.8}

/* ---------- узкие экраны: сцены шире экрана и обрезаются по краям ---------- */
@media (max-width:900px){
 .room{width:200%;margin-left:-50%}
 .np{position:relative;left:auto;top:auto;width:auto;max-width:420px;margin:-8% auto 0;transform:rotate(-1deg)}
 .hint{display:none}
 .shelf-wrap{margin-top:0}
 .stage-scene{width:135%;margin-left:-17.5%}
 .f figcaption{opacity:.95}
}
@media (max-width:640px){
 body{font-size:18px}
 .salon-head{padding-top:20px}.topnav{gap:4px 16px}.topnav a{font-size:11px;letter-spacing:.16em}
 .prog a{grid-template-columns:52px 1fr;gap:0 12px}.prog .v{width:52px;height:52px}.prog .n{grid-column:2;grid-row:2}.prog small{grid-column:2;grid-row:3}
}
/* телефоны: полка — сетка 3×2 без бокового свайпа; hover на касании не включаем (на iPhone он «залипает») */
@media (max-width:700px){
 .shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 12px;overflow:visible;padding:44px 4px 10px;scroll-snap-type:none}
 .sleeve{width:100%}
 .sleeve .ttl{font-size:clamp(10px,2.9vw,13px)}
 .sleeve[aria-pressed="true"]::after{top:-26px;font-size:15px}
}
@media (hover:none){
 .sleeve:hover{transform:rotate(var(--r,0deg))}.sleeve:hover .peek{transform:none}
 .sleeve[aria-pressed="true"]:hover .peek{transform:translateY(-40%)}
}
/* телефоны: без смешивания слоёв и анимации зерна во весь экран — иначе прокрутка тормозит */
@media (pointer:coarse){
 .grain{animation:none;mix-blend-mode:normal;opacity:.05;position:absolute;inset:0;height:100%}
 .vignette{animation:none}
 .sleeve .tex{mix-blend-mode:normal;opacity:.18}
 .sleeve .cover{filter:none}.sleeve{box-shadow:0 8px 12px -6px rgba(0,0,0,.6)}
 .f img{filter:brightness(var(--lit,.9))}
}
@media (prefers-reduced-motion:reduce){
 .grain,.vignette,.is-on .f img{animation:none}
 canvas.dust{display:none}
}