/* Эскиз «Граммофон», пятая версия — ретро-полиграфия: не интерьер, а предмет. Пластинка в настоящем конверте группы,
   барышни Вари Перлиной на иллюстрированной сцене, программка, тумба. Палитра — шоколад, бордо, латунь, слоновая кость, патина:
   страница тёмная и спокойная, бумага — редко, латунь — акценты, красный — внимание.
   Шрифт один — Cormorant Garamond: крупные заголовки, книжный текст, мелкие разрядочные подписи; прописью — только логотип. */
:root{--choc:#21110f;--bordo:#651f24;--brass:#bc935b;--ivory:#e9d8b6;--patina:#54776d;
 --ink:#1c1411;--mute:#4a3b30;--line:#b9a988;--red:#b8322a;--red2:#651f24;--gold:var(--brass);--cream:var(--ivory);--night:var(--choc);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--choc)}
body{margin:0;color:var(--ivory);font:19px/1.6 "Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--choc)}
a{color:var(--brass)}
button,input{font-family:inherit}
h1,h2,h3{font-family:inherit;font-weight:500;margin:0;line-height:1.05}
.caps{text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;font-weight:600}
.hand{font-style:italic;font-weight:500;color:var(--brass);font-size:22px;line-height:1.2}

/* печатное зерно — неподвижное, едва заметное */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;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")}
canvas.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;opacity:0;transition:opacity 1.6s}
.is-on canvas.dust{opacity:1}

/* ---------- первый экран: конверт группы и пластинка на тёмном бархате ---------- */
.salon{position:relative;overflow:hidden;
 background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(101,31,36,.55),transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 40%,#2a1513,var(--choc) 70%)}
.topnav{position:relative;z-index:8;max-width:1160px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 30px;
 padding:18px 16px 14px;border-bottom:1px solid rgba(188,147,91,.28)}
.topnav a{color:var(--ivory);text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:14px;font-weight:600}
.topnav a:hover{color:var(--brass)}
.salon-head{position:relative;z-index:8;text-align:center;padding:30px 16px 0}
.salon-head .est{color:var(--brass);margin:0}
.logo{display:block;margin:6px auto 0;width:min(330px,70vw);aspect-ratio:1400/530;
 background:linear-gradient(176deg,#f6e6bf 8%,#d9b878 40%,#a87d3c 70%,#ecd29a 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))}
.motto{max-width:640px;margin:4px auto 0;font-style:italic;font-size:20px;color:#cdb796}

/* конверт S×S, пластинка выглядывает справа; играет — выезжает дальше и крутится */
.deck{--s:clamp(240px,32vw,430px);position:relative;z-index:4;padding:34px 16px 10px;display:flex;flex-direction:column;align-items:center}
.lp{position:relative;width:calc(var(--s) * 1.5);height:var(--s);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transform:translateX(-12%)}
.lp .jacket{position:absolute;left:0;top:0;width:var(--s);height:var(--s);z-index:2;transform:rotate(-1.4deg);
 box-shadow:0 1px 1px rgba(0,0,0,.5),0 24px 40px -8px rgba(0,0,0,.75),0 4px 10px rgba(0,0,0,.4)}
.lp .jacket img{display:block;width:100%;height:100%;filter:sepia(.12) saturate(.88) brightness(.94) contrast(.97)}
/* потёртость старого картона: светлые края, лёгкое потемнение к углу */
.lp .jacket .wear{position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 140% 120% at 30% 20%,transparent 60%,rgba(90,60,30,.28)),url(/eskiz/img/paper.jpg?v=75001ab0) center/cover;
 mix-blend-mode:multiply;opacity:.55;box-shadow:inset 0 0 0 1px rgba(255,240,210,.18),inset 0 0 18px rgba(60,35,15,.35)}
.lp .rec{position:absolute;left:2%;top:2%;width:calc(var(--s) * .96);height:calc(var(--s) * .96);z-index:1;
 transform:translateX(var(--out,40%));transition:transform 1.1s cubic-bezier(.45,.05,.25,1)}
.lp .rec svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(6px 10px 14px rgba(0,0,0,.6))}
.lp:hover{--out:46%}
.is-on .lp{--out:58%}
.disc-off .lp{--out:6%}
.lp:focus-visible .jacket{outline:1px solid var(--brass);outline-offset:6px}
#disc-drop{transition:opacity .45s}

/* под пластинкой — напечатано, как на обороте конверта: что играет, бороздка-прогресс, тонкое управление */
.np{width:min(520px,100%);margin:26px auto 0;text-align:center;color:var(--ivory)}
.np .kick{display:block;color:var(--brass);font-size:12px}
.np h3{font-size:clamp(28px,3.4vw,38px);font-style:italic;font-weight:500;margin:8px 0 2px}
.np .by{margin:0;font-style:italic;color:#bba584;font-size:17px;line-height:1.35}
.groove{position:relative;height:1px;background:rgba(233,216,182,.28);margin:18px auto 10px;cursor:pointer;max-width:440px}
.groove::before{content:"";position:absolute;inset:-9px 0}
.groove i{position:absolute;left:0;top:0;bottom:0;background:var(--brass);width:0}
.groove b{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--brass);left:0}
.np .row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:16px;font-weight:500}
.np .t{font-variant-numeric:lining-nums tabular-nums;color:#bba584;min-width:86px;text-align:left}
.np button{font:inherit;cursor:pointer;background:none;border:0;color:var(--ivory);padding:4px 2px}
.np .pp{width:46px;height:46px;border-radius:50%;border:1px solid var(--brass);color:var(--brass);display:grid;place-items:center;padding:0;font-size:15px;
 transition:background .3s,color .3s}
.np .pp span{transform:translateX(1px)}
.np .pp:hover,.np .pp:focus-visible{background:var(--brass);color:var(--choc);outline:none}
.np .next{text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;font-weight:600;border-bottom:1px solid rgba(188,147,91,.5)}
.np .next:hover{color:var(--brass)}
/* «патефонный звук» — маленький тумблер, как на старой аппаратуре */
.warm{display:flex;align-items:center;gap:8px;cursor:pointer;font-style:italic;color:#bba584}
.warm input{position:absolute;opacity:0;width:1px;height:1px}
.warm .sw{position:relative;width:30px;height:15px;border-radius:8px;border:1px solid rgba(188,147,91,.7);background:rgba(0,0,0,.25)}
.warm .sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#7d6a52;transition:transform .25s,background .25s}
.warm input:checked+.sw::after{transform:translateX(15px);background:var(--brass)}
.warm input:focus-visible+.sw{outline:1px solid var(--brass);outline-offset:2px}
.np .page{display:inline-block;margin-top:10px;font-style:italic}
.np .page[hidden]{display:none}

/* коллекция: конверты разные по состоянию; выбранная пластинка улетает в центр */
.shelf-wrap{position:relative;z-index:3;padding:46px 16px 54px;text-align:center}
.shelf-cap{display:block;color:var(--brass)}
.shelf{max-width:1160px;margin:0 auto;display:flex;justify-content:center;gap:clamp(12px,2.2vw,30px);padding:58px 8px 6px;overflow-x:auto;scrollbar-width:none;
 -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.shelf::-webkit-scrollbar{display:none}
.sleeve{position:relative;flex:none;width:clamp(128px,13vw,160px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;
 transform:rotate(var(--r,0deg));transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,.1,.3,1)}
.sleeve:nth-child(1){--r:-1.6deg}.sleeve:nth-child(2){--r:.8deg}.sleeve:nth-child(3){--r:-.6deg}
.sleeve:nth-child(4){--r:1.4deg}.sleeve:nth-child(5){--r:-1deg}.sleeve:nth-child(6){--r:.5deg}
.sleeve .peek{position:absolute;left:5%;top:-13%;width:90%;aspect-ratio:1;transition:transform .7s cubic-bezier(.3,.1,.3,1),opacity .4s}
.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)) sepia(.15) saturate(.85) brightness(.92)}
/* бумажная фактура и возраст — по форме конверта (окно остаётся прозрачным) */
.sleeve .tex,.sleeve .age{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;
 -webkit-mask:var(--m) center/100% 100%;mask:var(--m) center/100% 100%}
.sleeve .tex{background:url(/eskiz/img/paper.jpg?v=75001ab0) center/300% auto;opacity:.85}
.sleeve .age{background:radial-gradient(circle at var(--ax,100%) var(--ay,0%),rgba(176,128,52,.55),rgba(176,128,52,.18) 22%,transparent 42%)}
.sleeve:nth-child(1) .age{--ax:0%;--ay:100%}.sleeve:nth-child(3) .age{--ax:100%;--ay:100%}
.sleeve:nth-child(4) .age{background:linear-gradient(90deg,transparent 46%,rgba(80,50,20,.22) 49%,rgba(255,240,210,.15) 51%,transparent 54%)}
.sleeve:nth-child(5) .age{--ax:0%;--ay:0%}
.sleeve:nth-child(6) .age{background:radial-gradient(ellipse 30% 12% at 30% 18%,rgba(140,100,40,.35),transparent 70%)}
/* номер карандашом на одних, наклейка на других */
.sleeve .no{position:absolute;left:9%;top:6%;font-style:italic;font-weight:500;font-size:14px;color:rgba(40,28,20,.75);transform:rotate(-6deg)}
.sleeve:nth-child(2) .no,.sleeve:nth-child(5) .no{left:auto;right:7%;top:7%;padding:1px 6px;background:#efe4cc;color:#4a3b30;font-style:normal;font-size:11px;
 letter-spacing:.08em;border:1px solid rgba(74,59,48,.4);transform:rotate(3deg);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.sleeve:nth-child(4) .no,.sleeve:nth-child(6) .no{color:rgba(240,225,195,.8)}
.sleeve .ttl{position:absolute;left:11%;right:11%;bottom:7%;height:13%;display:flex;align-items:center;justify-content:center;text-align:center;
 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(-6px);outline:none}
.sleeve:hover .peek,.sleeve:focus-visible .peek{transform:translateY(-12%)}
.sleeve:focus-visible .cover{filter:drop-shadow(0 0 2px var(--brass)) 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:var(--brass);font-size:19px}
/* обмен пластинками: копии летят слоем за главным конвертом; настоящая на это время спрятана и стоит без перехода */
.flyer{position:absolute;z-index:1;pointer-events:none;border-radius:50%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.lp.swap .rec{transition:none;visibility:hidden}

/* ---------- сцена: иллюстрация Codex и бумажные барышни Вари Перлиной ----------
   в тишине сцена в полумраке; пластинка заиграла — мягко загорается рампа, потом оживают барышни */
.stage{position:relative;overflow:hidden;background:var(--choc);padding:56px 0 0}
.stage .head{text-align:center;padding:0 16px;position:relative;z-index:7}
.stage h2{font-size:clamp(34px,5vw,54px);color:var(--ivory)}
.stage .sub{margin:4px 0 0;font-style:italic;color:#bba584}
.stage-box{position:relative;overflow:hidden;margin:22px auto 0;max-width:1500px}
.stage-scene{position:relative;width:100%;aspect-ratio:3/2;background:url(/eskiz/img/stage.jpg?v=75001ab0) center/100% 100% no-repeat}
.stage-scene::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity 1.6s;
 background:radial-gradient(ellipse 70% 60% at 50% 70%,transparent 40%,rgba(20,8,6,.55)),linear-gradient(rgba(20,8,6,.25),rgba(20,8,6,.25))}
.is-on .stage-scene::before{opacity:.35}
.stage-box::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 30px var(--choc)}
/* рампа: замер по stage.jpg — плафоны на высоте 89.4 %, свет зажигается по очереди от центра */
.rampa{position:absolute;inset:0;z-index:6;pointer-events:none}
.rampa i{position:absolute;top:89.4%;left:var(--x);width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;
 background:radial-gradient(closest-side,rgba(255,236,190,.95),rgba(255,190,110,.45) 30%,rgba(255,170,90,.12) 62%,transparent);
 mix-blend-mode:screen;transition:opacity 1.1s ease-out;transition-delay:calc(var(--k) * 90ms)}
.rampa b{position:absolute;left:8%;right:8%;bottom:10%;height:26%;opacity:0;transition:opacity 1.8s ease-out .4s;
 background:radial-gradient(ellipse 50% 70% at 50% 100%,rgba(255,196,120,.28),transparent 70%);mix-blend-mode:screen}
.is-on .rampa i,.is-on .rampa b{opacity:1}
.f{position:absolute;bottom:var(--b);left:var(--x);height:var(--h);margin:0;transform:translateX(-50%);z-index:var(--z,3);cursor:pointer;outline:none;
 -webkit-tap-highlight-color:transparent}
.f img{display:block;height:100%;width:auto;transform-origin:50% 100%;transition:filter 1.6s;
 filter:brightness(calc(var(--lit,.9) * .82)) saturate(.85) sepia(.12) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.is-on .f img{filter:brightness(var(--lit,.9)) saturate(.92) sepia(.08) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
/* тени на досках: плотная под туфлями и мягкая длинная назад */
.f::before{content:"";position:absolute;left:8%;right:8%;bottom:-1.4%;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.5) 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,.5),transparent);z-index:-2;transform:translateY(-35%)}
/* подпись инструмента — по наведению и по нажатию, как надпись карандашом на программке */
.f figcaption{position:absolute;left:50%;top:-9%;transform:translate(-50%,6px);white-space:nowrap;font-style:italic;font-weight:500;color:var(--ivory);
 font-size:clamp(14px,1.4vw,19px);padding:1px 10px 2px;background:rgba(33,17,15,.82);border:1px solid rgba(188,147,91,.55);opacity:0;
 transition:opacity .35s,transform .35s;pointer-events:none}
.f:focus-visible figcaption,.f.show figcaption{opacity:1;transform:translate(-50%,0)}
@media (hover:hover){.f:hover figcaption{opacity:1;transform:translate(-50%,0)}}
.is-on .f img{animation:sway 2.8s ease-in-out infinite alternate;animation-delay:calc(1.2s + var(--d,0s))}
@keyframes sway{from{transform:rotate(-1deg) scaleY(1)}to{transform:rotate(1deg) scaleY(1.008)}}
.stage .note{position:relative;z-index:7;text-align:center;margin:0;padding:18px 16px 4px}
.stage .credit{position:relative;z-index:7;text-align:center;margin:0;padding:0 16px 30px;font-style:italic;font-size:17px;color:#a8946f}

/* ---------- программка ---------- */
.programme{padding:60px 16px 30px}
.card{position:relative;max-width:780px;margin:0 auto;color:var(--ink);padding:clamp(56px,7vw,72px) clamp(22px,6vw,70px) clamp(56px,7vw,76px);
 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=75001ab0) 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(38px,5.4vw,56px);margin:6px 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:62px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 16px;padding:9px 2px;text-decoration:none;color:var(--ink)}
.prog .v{grid-row:1/3;width:62px;height:62px;color:#2a1c16;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}

/* ---------- афишная тумба: живописная улица Codex, афиши по кругу поверх колонны (canvas); колонну можно повернуть рукой ---------- */
.afisha{padding:50px 16px 80px;text-align:center;overflow:hidden}
.afisha h2{font-size:clamp(36px,5vw,54px);color:var(--ivory)}
.afisha .sub{font-style:italic;color:#bba584;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=75001ab0) 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);cursor:grab;touch-action:pan-y;outline:none}
.tumba.grab{cursor:grabbing}
.tumba:focus-visible{outline:1px solid var(--brass);outline-offset:6px}
.tumba canvas{display:block;width:100%;height:100%}
canvas.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.afisha .more{display:inline-block;margin-top:30px;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}

/* концовка — последняя страница программки */
.finis{text-align:center;padding:30px 16px 6px;color:#a8946f}
.finis .divider{color:var(--brass);margin:0 auto 18px;opacity:.8}
.finis .caps{display:block;color:var(--brass)}
.finis p{margin:10px auto 0;max-width:560px;font-style:italic;font-size:17px;line-height:1.45}
.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){
 .deck{--s:min(50vw,320px)}
 .lp{transform:translateX(-7%);--out:34%}.lp:hover{--out:38%}.is-on .lp{--out:46%}.disc-off .lp{--out:6%}
}
@media (max-width:640px){
 body{font-size:18px}
 .salon-head{padding-top:20px}.topnav{gap:6px 18px}.topnav a{font-size:13px;letter-spacing:.14em}
 .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{mix-blend-mode:normal;opacity:.04;position:absolute;inset:0;height:100%}
 .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){
 html{scroll-behavior:auto}
 .is-on .f img{animation:none}
 .lp .rec,.sleeve,.sleeve .peek{transition:none}
 canvas.dust{display:none}
}

/* хвост «н» на конверте: в покое — вырезка настоящего конверта, играет — поворачивается в тонарм (arm.js);
   холст лежит в конверте под потёртостью, чтобы буква оставалась напечатанной */
.lp .jacket img.swash{position:absolute}
.lp .jacket canvas.arm{position:absolute;pointer-events:none}