@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/shrifty/cormorant-500-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/shrifty/cormorant-500-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/shrifty/cormorant-500-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Rubik';font-style:normal;font-weight:400 900;font-display:swap;src:url(/shrifty/rubik-400-900-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}@font-face{font-family:'Rubik';font-style:normal;font-weight:400 900;font-display:swap;src:url(/shrifty/rubik-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Rubik';font-style:normal;font-weight:400 900;font-display:swap;src:url(/shrifty/rubik-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/shrifty/unbounded-900-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/shrifty/unbounded-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/shrifty/unbounded-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--fon:#0B1226;--poverh:#16203C;--tekst:#EAF6FA;--tihiy:#93A7C8;--akcent:#2ED4D4;--akcent2:#E24BC8;--noch:#070B18;--fon-rgb:11,18,38;--tekst-rgb:234,246,250;--poverh-rgb:22,32,60;--noch-rgb:7,11,24;--tihiy-rgb:147,167,200;--akcent-rgb:46,212,212;--akcent2-rgb:226,75,200;--sh-zag:'Rubik',sans-serif;--sh-tekst:'Rubik',sans-serif;--sh-shirokiy:'Unbounded',sans-serif;--sh-antikva:'Cormorant Garamond',serif}
/* кнопка-пилюля: обводка, размытие фона, при наведении свечение бирюзой */
.slushat,.knopka-zvuk,.knopka{display:inline-flex;align-items:center;gap:12px;height:52px;
 padding:0 24px 0 18px;border-radius:999px;border:1px solid rgba(var(--tekst-rgb),.38);
 background:rgba(var(--fon-rgb),.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
 cursor:pointer;text-decoration:none;color:inherit;
 font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
 transition:transform .18s,box-shadow .18s,border-color .18s}
.knopka{padding:0 26px}
.slushat:hover,.knopka-zvuk:hover,.knopka:hover{transform:translateY(-1px);
 border-color:rgba(var(--akcent-rgb),.9);box-shadow:0 0 26px rgba(var(--akcent-rgb),.35)}
/* треугольник, а когда играет — три живые полоски */
.slushat .ikona,.knopka-zvuk .ikona{position:relative;width:16px;height:16px;flex:none}
.slushat .ikona::before,.knopka-zvuk .ikona::before{content:"";position:absolute;left:4px;top:2px;
 border-style:solid;border-width:6px 0 6px 10px;
 border-color:transparent transparent transparent var(--akcent)}
.slushat.igraet .ikona::before,.knopka-zvuk.igraet .ikona::before{display:none}
.slushat.igraet .ikona i,.knopka-zvuk.igraet .ikona i{position:absolute;bottom:1px;width:3px;
 background:var(--akcent);border-radius:1px;animation:polosa .9s ease-in-out infinite}
.slushat.igraet .ikona i:nth-child(1),.knopka-zvuk.igraet .ikona i:nth-child(1){left:1px;height:8px}
.slushat.igraet .ikona i:nth-child(2),.knopka-zvuk.igraet .ikona i:nth-child(2){left:6px;height:14px;
 animation-delay:.2s}
.slushat.igraet .ikona i:nth-child(3),.knopka-zvuk.igraet .ikona i:nth-child(3){left:11px;height:10px;
 animation-delay:.4s}
@keyframes polosa{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fon)}
body{background:var(--fon);color:var(--tekst);font-family:var(--sh-tekst);font-size:16px;
 line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;color:inherit}

/* ── первый экран: одна из трёх одежд, во весь экран ── */
/* Все имена ниже живут в области `.ekran`: на главной те же слова —
   «текст», «имя» — значат другое, и без области первый экран прибивал
   к низу чужие блоки. Куплено 10.09 показом. */
main{position:relative;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;background:var(--fon)}
.ekran{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--fon) center/cover no-repeat}
/* постер лежит фоном секции ПОД видео: браузер убирает poster при play() до первого кадра,
   и на медленной сети экран был бы чёрным — теперь кадр стоит с первого мгновения */
.ekran video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
/* кадр первой одежды стоит картинкой, а не фоном секции: картинку можно
   пометить главной (`fetchpriority="high"`) и попросить заранее — фон
   секции браузер берёт в общей очереди (правка 19, п. 3) */
.ekran .ekran-kadr{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;display:block}
.ekran .ton{position:absolute;inset:0;pointer-events:none}
.ekran .tekst{position:absolute;left:0;right:0;bottom:0;z-index:3;
 padding:0 5vw calc(64px + env(safe-area-inset-bottom));
 display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ekran .imya{font-family:var(--sh-zag);font-weight:900;font-size:clamp(42px,11.5vw,150px);line-height:.9;
 letter-spacing:-.025em;text-transform:uppercase;color:#fff;
 text-shadow:0 0 34px rgba(var(--akcent-rgb),.38),0 2px 30px rgba(var(--fon-rgb),.6)}
.ekran .imya span{display:block}
.ekran .fraza{max-width:36ch;font-size:clamp(15px,1.6vw,19px);line-height:1.5;color:rgba(var(--tekst-rgb),.92);
 text-shadow:0 1px 18px rgba(var(--fon-rgb),.85)}

.podpis-zvuka{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--tekst-rgb),.7)}

/* 1 · Концерт: кадр окрашен в мир — бирюза в тенях, фуксия в светах */
#v1 video{filter:contrast(1.06) saturate(1.05);animation:dyhanie 26s ease-in-out infinite alternate}
@keyframes dyhanie{from{transform:scale(1)}to{transform:scale(1.07)}}
.ekran .ton-1a{background:radial-gradient(65% 70% at 15% 25%,rgba(var(--akcent-rgb),.6),transparent 70%),
 radial-gradient(55% 65% at 88% 78%,rgba(var(--akcent2-rgb),.55),transparent 70%);mix-blend-mode:color}
.ekran .ton-1b{background:linear-gradient(180deg,rgba(var(--fon-rgb),.06) 0%,rgba(var(--fon-rgb),.3) 50%,rgba(var(--fon-rgb),.92) 100%)}

/* 2 · Логотип: тот же кадр, края уходят в ночь мира, снизу подложка */
.ekran .ton-2a{background:radial-gradient(70% 62% at 50% 42%,transparent 36%,rgba(var(--fon-rgb),.5) 72%,rgba(var(--fon-rgb),.97) 100%)}
.ekran .ton-2b{background:linear-gradient(to top,var(--fon) 0%,rgba(var(--fon-rgb),.86) 20%,transparent 48%)}
#v2 .tekst{align-items:center;text-align:center}
#v2 .fraza{max-width:44ch}

/* 3 · Имя: экран почти чёрный, кадр виден сквозь буквы */
#v3 video{filter:saturate(1.2) brightness(1.08)}
.ekran .maska,.ekran .maska-kray{position:absolute;inset:0;
 display:flex;align-items:center;justify-content:center;padding:0 3vw 16vh}
.ekran .maska{z-index:2;background:var(--fon);mix-blend-mode:multiply}
.ekran .maska h1,.ekran .maska-kray .imya-bukvy{
 font-family:var(--sh-shirokiy);font-weight:900;font-size:min(13vw,200px);line-height:.88;
 letter-spacing:-.04em;text-transform:uppercase;color:#fff;text-align:center;white-space:nowrap}
.ekran .maska h1 span,.ekran .maska-kray .imya-bukvy span{display:block}
@supports not (mix-blend-mode:multiply){.ekran .maska{background:transparent}}
/* Правка 19, п. 5. Слово Штаба 24.09, найдено проходом по домену: на тёмных
   кадрах петли буквы с видео внутри пропадали — на 390 читалось «USICA
   ALACTICA». Поверх маски лежит то же слово ещё раз, уже без умножения:
   светлый край у буквы и нижний предел яркости внутри неё. Кадр сквозь буквы
   виден по-прежнему — заливка прозрачная на четыре пятых. Слой немой для
   голосового чтения: само слово стоит строкой ниже, в самой маске. */
.ekran .maska-kray{z-index:3;pointer-events:none}
.ekran .maska-kray .imya-bukvy{color:rgba(255,255,255,.2);
 -webkit-text-stroke:1.6px rgba(255,255,255,.9);paint-order:stroke fill;
 text-shadow:0 0 30px rgba(var(--akcent-rgb),.4)}
@media(max-width:760px){.ekran .maska-kray .imya-bukvy{-webkit-text-stroke-width:1.1px}}
#v3 .tekst{align-items:center;text-align:center}
#v3 .fraza{font-family:var(--sh-antikva);font-style:italic;font-weight:500;
 font-size:clamp(20px,2.4vw,30px);line-height:1.35;max-width:40ch}

/* светлячки мира 2 — поверх кадра, под словами */
#svetlyachki{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}

/* тонкая шапка поверх экрана: имя, якоря на сайт, язык */
.sh{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:18px;
 padding:calc(14px + env(safe-area-inset-top)) 5vw 14px;font-size:11.5px;letter-spacing:.12em;
 text-transform:uppercase;color:rgba(var(--tekst-rgb),.85)}
.sh-imya{font-family:var(--sh-zag);font-weight:600;color:#fff;text-decoration:none;letter-spacing:.06em;flex:none}
.sh-yakorya{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;flex:1;-webkit-overflow-scrolling:touch;
 mask-image:linear-gradient(to right,#000 88%,transparent);-webkit-mask-image:linear-gradient(to right,#000 88%,transparent)}
.sh-yakorya::-webkit-scrollbar{display:none}
.sh-yakorya a{color:inherit;text-decoration:none;white-space:nowrap;opacity:.85}
.sh-yakorya a:hover{opacity:1}
.sh-yazyk{flex:none;opacity:.7}

/* переключатель одежд и подсказка «вниз» */
.perekl{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:7;display:flex;gap:8px}
.perekl button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(var(--tekst-rgb),.4);
 background:rgba(var(--fon-rgb),.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 font-family:var(--sh-zag);font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.perekl button.aktiv{background:var(--akcent);color:var(--fon);border-color:var(--akcent);
 box-shadow:0 0 18px rgba(var(--akcent-rgb),.55)}
.vniz{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;width:1px;height:36px;
 margin-left:-.5px;overflow:hidden;pointer-events:none}
.vniz::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;
 background:linear-gradient(to bottom,transparent,rgba(var(--tekst-rgb),.85));animation:kap 2.2s ease-in-out infinite}
@keyframes kap{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){#v1 video,.vniz::after,.slushat.igraet .ikona i,.knopka-zvuk.igraet .ikona i{animation:none}}

/* ── под экраном: кухня — что в каждой одежде, что общее, один вопрос ── */
.kuhnya{max-width:760px;margin:0 auto;padding:56px 5vw 90px}
.kuhnya h2{font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--tihiy);margin:0 0 16px}
.kuhnya section+section{margin-top:44px}
.odezhda{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-top:1px solid rgba(var(--tihiy-rgb),.25)}
.odezhda .n{font-family:var(--sh-zag);font-weight:900;font-size:28px;color:var(--akcent);line-height:1}
.odezhda h3{font-family:var(--sh-zag);font-weight:600;font-size:18px;margin:0 0 6px}
.odezhda p{font-size:14.5px;color:rgba(var(--tekst-rgb),.85);margin:0 0 8px;line-height:1.55}
.odezhda .shr{font-size:13px;color:var(--tihiy)}
.odezhda .osn{font-size:12.5px;color:var(--tihiy);border-left:2px solid rgba(var(--tihiy-rgb),.3);padding-left:10px;line-height:1.5}
.odezhda .ves{font-size:12px;color:var(--tihiy);font-variant-numeric:tabular-nums}
.pokazat{display:inline-block;margin-top:10px;font-size:13px;color:var(--akcent);text-decoration:none;
 border-bottom:1px solid rgba(var(--akcent-rgb),.4)}
.obshchee p{font-size:14.5px;line-height:1.6;color:rgba(var(--tekst-rgb),.85);margin:0 0 12px}
.mesto{border-top:1px solid rgba(var(--tihiy-rgb),.25);padding:12px 0}
.mesto b{display:block;font-weight:600;font-size:13px;margin-bottom:3px}
.mesto p{margin:0 0 4px}
.rod{font-size:12px;line-height:1.5;color:var(--tihiy);padding-left:10px;border-left:2px solid rgba(var(--tihiy-rgb),.3)}
.rod u{text-decoration:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-right:7px}

/* один вопрос: ответ выбирается пальцем и копируется в чат одной кнопкой */
.vopros{border:1px solid var(--akcent);border-radius:3px;padding:16px;margin:30px 0 10px}
.vopros h3{margin:0 0 8px;color:var(--akcent);font-size:17px}
.vopros p{margin:0 0 14px;font-size:13.5px;color:rgba(var(--tekst-rgb),.85);line-height:1.55}
.otvet{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid rgba(var(--tihiy-rgb),.25);
 font-size:14px;line-height:1.45;cursor:pointer}
.otvet input{margin:2px 0 0;accent-color:var(--akcent);width:18px;height:18px;flex:none}
.vopros button{margin-top:14px;width:100%;height:46px;border:0;border-radius:3px;background:var(--akcent);
 color:var(--fon);font-size:14px;cursor:pointer}
#otvet-gotov{margin-top:10px;font-size:13px;color:var(--akcent);min-height:18px}
.snoska{font-size:12.5px;color:var(--tihiy);line-height:1.6;margin-top:28px}

/* шапка одна на сайт: прозрачная над первым экраном, после 80 px — с размытием */
/* шапка выше переключателя одежд (z 7 в ekran.py): при прокрутке первого
   экрана «1/3» проезжали поверх шапки и наезжали на кнопку меню. */
.sh{position:fixed;z-index:8;transition:background .3s,backdrop-filter .3s}
.sh.tyomnaya{background:rgba(var(--fon-rgb),.72);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ── меню на телефоне (деталь 17) ──
   На столе ничего не меняется: кнопка и слой стоят display:none и оживают
   только на ширине ≤ 900. На телефоне якоря шапки убраны совсем — они
   катались пальцем вбок и обрезались краем (снимки 500-01), и человек не
   видел, что у сайта есть ещё пять разделов. */
.sh-menyu,.sloy-menyu{display:none}
.sh-menyu{color:inherit;align-items:center;justify-content:center;
 width:44px;height:44px;margin-right:-10px;flex:none;text-decoration:none}
.sloy-menyu{position:fixed;inset:0;z-index:60;background:var(--noch);
 opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto;
 transition:opacity .22s ease}
.sloy-menyu:target,html.menyu-otkryto .sloy-menyu{opacity:1;visibility:visible;
 pointer-events:auto}
html.menyu-otkryto{overflow:hidden}
.menyu-zakryt{position:absolute;top:calc(10px + env(safe-area-inset-top));right:4vw;
 width:44px;height:44px;display:flex;align-items:center;justify-content:center;
 color:var(--tekst);text-decoration:none;z-index:2}
.menyu-vnutri{min-height:100%;display:flex;flex-direction:column;
 padding:calc(52px + env(safe-area-inset-top)) 6vw
         calc(24px + env(safe-area-inset-bottom))}
.menyu-imya{font-family:var(--sh-zag);font-weight:600;font-size:12px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--tihiy);margin:0 0 20px}
.menyu-punkty{display:flex;flex-direction:column;gap:10px;flex:1}
.menyu-punkt{font-family:var(--sh-zag);font-weight:700;font-size:clamp(28px,8vw,40px);
 line-height:1.05;letter-spacing:-.01em;color:var(--tekst);text-decoration:none}
.menyu-punkt.tekushchaya{color:var(--akcent)}
.menyu-pod{display:flex;flex-direction:column;gap:6px;margin:-6px 0 4px 2px}
.menyu-pod a{font-size:14px;letter-spacing:.02em;color:var(--tihiy);
 text-decoration:none}
.menyu-pod a.tekushchaya{color:var(--akcent)}
.menyu-niz{margin-top:24px;padding-top:16px;
 border-top:1px solid rgba(var(--akcent-rgb),.22);display:flex;
 flex-direction:column;gap:12px}
.menyu-svyaz{font-size:15px;color:var(--tekst);text-decoration:none;
 letter-spacing:.02em}
.ikonki-menyu{gap:14px}

/* ── переключатель языков (деталь 18) ──
   Вместо мёртвой надписи «RU» — два языка: тот, на котором человек стоит,
   виден и не нажимается; соседний — ссылка на его пару. Точка между ними
   рисуется одеждой, а не стоит словом: это разделитель, а не слово сайта. */
.sh-yazyk{flex:none;display:flex;align-items:baseline;gap:7px;opacity:1}
.sh-yazyk .yazyk-svoy{font-weight:600;color:inherit;opacity:.95}
.sh-yazyk .yazyk-chuzhoy{color:inherit;text-decoration:none;opacity:.6}
.sh-yazyk>*+*::before{content:"·";margin-right:7px;opacity:.55}
.sh-yazyk .yazyk-chuzhoy:hover{opacity:1}
.menyu-yazyki{display:flex;align-items:baseline;gap:9px;font-size:15px;
 letter-spacing:.02em}
.menyu-yazyki .yazyk-svoy{color:var(--tekst);font-weight:600}
.menyu-yazyki .yazyk-chuzhoy{color:var(--tihiy);text-decoration:none}
.menyu-yazyki>*+*::before{content:"·";margin-right:9px;color:var(--tihiy)}
.menyu-yazyki .yazyk-chuzhoy:hover{color:var(--akcent)}

/* ── фон-мир: одно непрерывное поле света под всей страницей ──
   Три плоские глубины отменены словом владельца 10.09: «фоны… одноцветные,
   сделать градиенты в психоделическом стиле, как их логотип… стыки мне не
   нравятся между разделами». Поле лежит на всю высоту страницы, а не на экран:
   каждый блок сидит на своём оттенке, но край цвета нигде не совпадает с краем
   блока — пятно шире любого блока. Своего фона у блоков нет ни у одного. */
html{background:var(--noch)}
body{background:transparent;position:relative}
.mir-fon{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
 background:var(--noch)}
/* три нарисованные деталью 03 фактуры-градиента, чередуясь по высоте */
.mir-fon .f1,.mir-fon .f2,.mir-fon .f3{position:absolute;left:0;right:0;height:46%;
 background-position:center;background-size:cover;background-repeat:no-repeat;
 filter:blur(26px) saturate(1.25);opacity:.15;transform:scale(1.2)}
.mir-fon .f1{top:0}
.mir-fon .f2{top:30%}
.mir-fon .f3{top:58%;height:42%}
/* пятна света в цветах логотипа: место, сила и время — из stil_mira() */
.mir-fon i[class^="s"]{position:absolute;border-radius:50%;
 animation-name:dreyf;animation-timing-function:ease-in-out;
 animation-iteration-count:infinite;animation-direction:alternate}
@keyframes dreyf{from{transform:translate3d(-6%,-5%,0) scale(1)}
 to{transform:translate3d(7%,6%,0) scale(1.18)}}
/* петля-фон: кусок анимации канала, сильно затемнённая, только на столе.
   Сама не заводится: её пускает страница, когда первый экран уехал вверх. */
.fon-petlya{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:.2;filter:blur(6px) saturate(1.1);display:block}

/* ── воздух: один отступ на стык, а не сумма двух ──
   Слово владельца 10.09: «"Наше видео": сверху много места». Было: отступ
   снизу у одного блока плюс отступ сверху у другого плюс scroll-margin.
   Стало: отступ только сверху, и он один на стык.
   Правка 19, п. 2. Слово владельца 24.09: отступы «слишком большие, можно
   сделать поменьше». Было 64–120 px (на телефоне 81), стало вдвое меньше.
   Число одно на весь сайт и стоит здесь: второй копии у него нет. */
:root{--styk:clamp(32px,5vh,60px)}
.blok{position:relative;padding:var(--styk) 0 0;border:0;background:transparent}
.blok.pervyy{padding:0;background:transparent}
.blok.lentochnyy{padding:var(--styk) 0 0}
.blok.dveri-blok{padding:var(--styk) 0 0}
.blok.polosa-blok{padding:0}
.blok.navylet-blok{overflow:hidden}
/* Одна вертикаль на всю страницу. Слова блока, лента и слова сцены начинаются
   от одного левого поля на любой ширине экрана — без этого страница читается
   набором блоков, каждый со своим отступом. */
:root{--shirina:1560px;--polya:calc(max(0px,(100vw - var(--shirina))/2) + 5vw)}
.vnutri{max-width:var(--shirina);margin:0 auto;padding:0 5vw}
/* якорь шапки не должен ставить заголовок вплотную к ней: высота шапки
   плюс 24 px воздуха — косяк 4 со снимков владельца 10.09 */
:root{--shapka:56px}
section.blok{scroll-margin-top:calc(var(--shapka) + 24px)}
main.blok{scroll-margin-top:0}

/* ── роли шрифта: одна семья на всё, кроме имени-знака и цитат ── */
/* Слово владельца 10.09: «шрифты, в которых написан текст… очень не считываются».
   Прежний гротеск убран совсем: текст Rubik 400, лид и подписи Rubik 500,
   надписи разделов Rubik 600 прописными. Крупнее и светлее, чем было.
   Какой шрифт убран и почему — в palitra-2.json, а не на странице. */
.metka{font-family:var(--sh-tekst);font-size:12px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;color:var(--tihiy);margin:0 0 22px}
.zag{font-family:var(--sh-zag);font-weight:900;text-transform:uppercase;
 letter-spacing:-.025em;line-height:.92;font-size:clamp(40px,7vw,110px);
 margin:0 0 clamp(28px,4vh,56px)}
.abzac{max-width:62ch;font-size:clamp(17px,1.5vw,21px);line-height:1.6;font-weight:400;
 color:rgba(var(--tekst-rgb),.92);margin:0 0 18px}
.lid{font-weight:500}
.citata{font-family:var(--sh-antikva);font-style:italic;font-weight:500;
 font-size:clamp(22px,3vw,36px);line-height:1.25;max-width:24ch;margin:0 0 28px}
.citata.krupnaya{font-size:clamp(30px,5vw,72px);max-width:15ch;
 text-shadow:0 2px 30px rgba(var(--fon-rgb),.75)}
/* фраза призыва: не крупнее заголовка рядом — косяк 2 со снимков 10.09 */
.citata.bolshaya{font-size:clamp(28px,4.2vw,56px);max-width:16ch}
.citata.lid-tovara{font-size:clamp(24px,3.2vw,42px);max-width:22ch;
 margin:0 0 clamp(32px,5vh,64px)}

/* ── кнопки: пилюля общим куском ekran.py, вторая — текстом со стрелкой ── */
.knopka2{display:inline-flex;align-items:center;gap:8px;color:var(--akcent);text-decoration:none;
 font-size:15px;font-weight:500;letter-spacing:.04em;border-bottom:1px solid rgba(var(--akcent-rgb),.45);
 padding-bottom:3px;transition:border-color .18s;align-self:flex-start}
.knopka2:hover{border-color:var(--akcent)}
.strelka{color:var(--akcent);font-size:22px;line-height:1}

/* ── плавающая кнопка «Написать» (идея 1, 17.09) ──
   Пилюля внизу справа поверх прокрутки, на всех тринадцати страницах. На
   первом экране её нет: там своё «Слушать», и два зова рядом спорят. Прячется
   она не display:none, а прозрачностью и visibility — так у неё есть переход,
   и замер наездов её в это время не видит, потому что человек её не видит.
   Рост 56 px — больше заказанных 52: палец на телефоне. */
.napisat{position:fixed;z-index:9;right:clamp(14px,3vw,28px);
 bottom:clamp(14px,3vh,28px);display:inline-flex;align-items:center;gap:10px;
 min-height:56px;padding:0 22px;border-radius:999px;
 background:var(--akcent);color:var(--noch);text-decoration:none;
 font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
 box-shadow:0 10px 34px rgba(var(--noch-rgb),.45);
 opacity:0;visibility:hidden;transform:translateY(14px);
 transition:opacity .25s,transform .25s,visibility .25s,box-shadow .2s}
.napisat.vidna{opacity:1;visibility:visible;transform:none}
/* открыто окно пака — кнопки нет вовсе. Это правило стоит одеждой, а не
   скриптом: окно полки закрывает нажатие в себе, и до общего слушателя оно
   не всегда доходит (найдено 17.09 на замере правки 9). */
html:has(dialog[open]) .napisat{opacity:0;visibility:hidden;pointer-events:none}
.napisat:hover{box-shadow:0 0 30px rgba(var(--akcent-rgb),.55)}
.napisat svg{flex:none;width:20px;height:20px}

/* ── мини-проигрыватель первого экрана (идея 2, 17.09) ──
   Плашка внизу экрана поверх страницы: имя песни с пометкой Live, пауза/играть
   и крестик. Своего звука у неё нет — на странице он один. Пока «Слушать» не
   нажали, плашки нет вовсе: display:none, и ни наезда, ни веса от неё нет. */
.mini{display:none}
.mini.vidna{position:fixed;z-index:9;left:clamp(14px,3vw,28px);
 bottom:clamp(14px,3vh,28px);display:flex;align-items:center;gap:12px;
 max-width:min(420px,calc(100vw - 28px));height:56px;padding:0 8px 0 10px;
 border-radius:999px;border:1px solid rgba(var(--tekst-rgb),.3);
 background:rgba(var(--noch-rgb),.82);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 box-shadow:0 10px 34px rgba(var(--noch-rgb),.5)}
.mini-igra,.mini-zakryt{display:inline-flex;align-items:center;
 justify-content:center;flex:none;border:0;background:transparent;
 color:var(--tekst);cursor:pointer;padding:0}
.mini-igra{width:38px;height:38px;border-radius:50%;
 border:1px solid rgba(var(--akcent-rgb),.6)}
.mini-zakryt{width:34px;height:34px;color:var(--tihiy)}
.mini-zakryt:hover{color:var(--tekst)}
/* треугольник, а когда играет — три живые полоски: тот же знак, что у
   «Слушать» (ekran.py), только своим размером */
.mini-znak{position:relative;display:block;width:14px;height:14px}
.mini-znak::before{content:"";position:absolute;left:4px;top:1px;
 border-style:solid;border-width:6px 0 6px 9px;
 border-color:transparent transparent transparent var(--akcent)}
.mini.idyot .mini-znak::before{display:none}
.mini.idyot .mini-znak i{position:absolute;bottom:0;width:3px;
 background:var(--akcent);border-radius:1px;
 animation:polosa .9s ease-in-out infinite}
.mini.idyot .mini-znak i:nth-child(1){left:0;height:7px}
.mini.idyot .mini-znak i:nth-child(2){left:5px;height:13px;animation-delay:.2s}
.mini.idyot .mini-znak i:nth-child(3){left:10px;height:9px;animation-delay:.4s}
.mini-imya{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:14px;font-weight:500;color:var(--tekst)}
.mini-imya .live{display:inline-block;margin-left:8px;padding:2px 7px;
 border-radius:3px;border:1px solid rgba(var(--akcent-rgb),.55);color:var(--akcent);
 font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}

/* ── кадры: без скругления. Скруглены только постеры клипов и веера ── */
.kadr{position:relative;display:grid;overflow:hidden;border-radius:0;background:var(--poverh);
 isolation:isolate}
.kadr>*{grid-area:1/1}
.kadr img,.kadr video{display:block;width:100%;height:100%;object-fit:cover}
.tiho{background:rgba(var(--tekst-rgb),.05);border-radius:0}
/* Окраска мира — та же пара слоёв, что на первом экране 1, силой 60 %.
   Слои лежат клеткой сетки поверх кадра, и порядок им задан числом: без него
   картинка красится позже блочных фонов и ложится поверх собственной окраски. */
.mir-a,.mir-b{pointer-events:none}
.mir-a{z-index:1;background:radial-gradient(65% 70% at 15% 25%,rgba(var(--akcent-rgb),.36),transparent 70%),
 radial-gradient(55% 65% at 88% 78%,rgba(var(--akcent2-rgb),.33),transparent 70%);mix-blend-mode:color}
.mir-b{z-index:2;background:linear-gradient(180deg,rgba(var(--fon-rgb),.05) 0%,rgba(var(--fon-rgb),.22) 46%,
 rgba(var(--fon-rgb),.86) 100%)}

/* ── сцена: слои одной клеткой сетки, слова поверх кадра ── */
.scena{position:relative;display:grid;isolation:isolate}
.scena>*{grid-area:1/1;min-width:0}
.scena-kadr{display:grid;overflow:hidden}
.scena-kadr>*{grid-area:1/1}
.scena-kadr img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);
 will-change:transform}
.scena-slova{z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
 align-items:flex-start;padding:clamp(96px,16vh,200px) var(--polya) clamp(48px,8vh,96px)}
/* кадр полосы не выходит за блок: иначе его край, а не поле, стоит
   на стыке — и стык виден полосой яркости */
.scena.polosa{min-height:72vh;overflow:hidden}
/* ── стыки без границ: одно растворение на весь сайт ──
   Слово владельца 10.09: «стыки мне не нравятся между разделами. Они очень
   грубо выглядят», и 24.09: «где-то сделаны градиентом, а где-то резкие
   границы… на всём сайте сделать, чтобы границы были одинаковые, плавный
   переход». У блоков своего фона нет вовсе, а каждый кадр, петля и подложка
   сверху и снизу растворяются в поле маской: резкой линии между кадром и
   полем нет нигде. Маска лежит на кадре, а не на блоке: слова поверх кадра
   она не трогает.

   Высота растворения одна на весь сайт и стоит одним числом здесь — `--rastvor`
   (на телефоне меньше, ниже в @media). Своих чисел у страниц больше нет: до
   правки 19 их было пять — 84, 90, 130, 150, 180 px, — и оттого переход у
   соседних блоков выглядел разным.

   `.rastvor` — оба края, `.rastvor-niz` — только низ (первые экраны: сверху
   у них край окна, растворять там нечего). */
:root{--rastvor:104px;
 /* Переход не прямой линией, а с оттяжкой у самого края: у края прозрачность
    падает быстрее. Прямая линия оставляла у последних двадцати точек пятую
    часть яркости кадра, и на светлом панно стык всё равно читался полосой
    (замер замка 26 детали 10: 25 из 255 при пределе 12). Кривая одна на весь
    сайт — это по-прежнему один переход, а не пять разных. */
 --kray-verh:transparent 0,rgba(0,0,0,.12) calc(var(--rastvor)*.35),
  rgba(0,0,0,.5) calc(var(--rastvor)*.7),#000 var(--rastvor);
 --kray-niz:#000 calc(100% - var(--rastvor)),
  rgba(0,0,0,.5) calc(100% - var(--rastvor)*.7),
  rgba(0,0,0,.12) calc(100% - var(--rastvor)*.35),transparent 100%}
.rastvor,.scena.polosa .scena-kadr,.panno .scena-kadr,.video-polosa,
.kadr-mezhdu,.alpaka-kadr,.konc-afisha,.kadr.gruppa,.para-kadr .kadr,
.navylet-blok .navylet-kadr,
.petlya-scena>:not(.petlya-slova),.shouril>:not(.shouril-slova),
.studiya-scena>:not(.studiya-scena-slova){
 -webkit-mask-image:linear-gradient(180deg,var(--kray-verh),var(--kray-niz));
 mask-image:linear-gradient(180deg,var(--kray-verh),var(--kray-niz))}
.rastvor-niz,.klip-kadr img,.konc-kadr img,.konc-video .konc-panno,
.studiya-ekran>:not(.studiya-slova),.napr-ekran>:not(.napr-slova),
.ist-ekran>:not(.ist-slova),.blok.pervyy .ekran>:not(.tekst){
 -webkit-mask-image:linear-gradient(180deg,#000 0,var(--kray-niz));
 mask-image:linear-gradient(180deg,#000 0,var(--kray-niz))}
/* Первый экран главной маской не режется: под ней оказались бы и фраза, и
   кнопка «Слушать» — они лежат внутри экрана. Низ его растворяется слоем
   поверх кадра и под словами: та же высота, тот же переход в поле света.
   Своей заливки `--fon` у экрана больше нет — ниже начинается `--noch`,
   и на стыке стояла ровная полоса цвета (скриншот 07 правок 24.09). */
/* Своей заливки у первого экрана больше нет — под ним то же поле света, что
   под всей страницей. До правки 19 он стоял на `--fon`, а страница ниже на
   `--noch`, и на стыке шла ровная полоса цвета (скриншот 07 правок 24.09).
   Растворение низа стоит выше, общим правилом: маска лежит на слоях кадра,
   а не на всей секции — фраза и кнопка «Слушать» стоят внутри экрана, и под
   маску им попадать нельзя. Слой ночи (`mir-b`) растворяется вместе с кадром:
   без этого резкую полосу на стыке рисовал он. */
.blok.pervyy,.blok.pervyy .ekran{background-color:transparent}
/* Первый экран ростом ровно в окно. До правки 19 его слои были выше самой
   секции (на `/animaciya` — на 76 px), лишнее уезжало под `overflow:hidden`,
   и растворение обрезалось на середине: на стыке оставалась резкая полоса.
   Страница концерта не в счёт — там первый экран стоит двумя колонками, и
   ряды у него свои. */
.blok.pervyy:not(.konc-ekran){grid-template-rows:minmax(0,1fr)}
.blok.pervyy:not(.konc-ekran)>*{min-height:0}
.scena.tyomnaya .mir-b{background:linear-gradient(180deg,rgba(var(--noch-rgb),.74) 0%,
 rgba(var(--noch-rgb),.66) 40%,rgba(var(--noch-rgb),.95) 100%)}

/* ── появление при прокрутке ──
   Прозрачность ставится только там, где есть скрипт (класс `js` вешает на
   `<html>` первая строка страницы). Без скрипта являть блоки некому, и без
   этого правила страница осталась бы пустой навсегда: правка 10, п. 5. */
.js .yav{opacity:0;transform:translateY(24px);
 transition:opacity .7s ease,transform .7s ease;transition-delay:var(--zaderzhka,0ms)}
.js .yav.vidno{opacity:1;transform:none}

/* ── лента: ряд уходит за правый край и листается с прилипанием ── */
.lenta{display:grid;grid-auto-flow:column;grid-template-columns:none;
 gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
 padding:0 5vw 12px var(--polya);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lenta::-webkit-scrollbar{display:none}
.lenta>*{scroll-snap-align:start}
.lenta.tri{grid-auto-columns:minmax(240px,34%)}
.lenta.chetyre{grid-auto-columns:minmax(260px,38%)}

/* ── 02 два живых панно: петля и наезд, между ними линия света ── */
.dveri{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;
 margin-top:clamp(28px,5vh,64px)}
.linia-sveta{display:block;background:linear-gradient(180deg,
 var(--akcent),var(--akcent2))}
.panno{min-height:90vh;text-decoration:none;color:inherit;overflow:hidden}
.panno .scena-kadr img,.panno .scena-kadr video{width:100%;height:100%;
 object-fit:cover;display:block}
.panno .scena-kadr{overflow:hidden}
.panno-petlya video{transform:scale(1);transition:transform .6s ease}
/* постер лежит фоном под видео: браузер убирает poster при play() */
.panno-petlya{background:var(--noch) center/cover no-repeat}
.panno:hover .panno-petlya video{transform:scale(1.04)}
/* синтвейв: медленный наезд 30 с и плывущее свечение фуксии */
.panno-naezd img{transform-origin:52% 46%;
 animation:naezd 30s ease-in-out infinite alternate}
@keyframes naezd{from{transform:scale(1.03)}to{transform:scale(1.24)}}
.svet-fuksii{grid-area:1/1;z-index:2;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(46% 42% at 30% 62%,rgba(var(--akcent2-rgb),.4),transparent 70%);
 animation:plyt-fuksiya 34s ease-in-out infinite alternate}
@keyframes plyt-fuksiya{from{transform:translate3d(-6%,4%,0)}
 to{transform:translate3d(9%,-6%,0)}}
.panno:hover .panno-naezd img{filter:brightness(1.06)}
.panno::after{content:"";grid-area:1/1;z-index:3;pointer-events:none;
 box-shadow:inset 0 0 0 0 rgba(var(--akcent-rgb),0);transition:box-shadow .3s}
.panno:hover::after{box-shadow:inset 0 0 90px rgba(var(--akcent-rgb),.4)}
/* слова панно: имя и строка слева внизу, стрелка справа внизу — врозь,
   поэтому наехать друг на друга им нечем */
.panno-slova{z-index:4;display:flex;align-items:flex-end;justify-content:space-between;
 gap:clamp(20px,4vw,56px);
 padding:clamp(64px,10vh,140px) 5vw clamp(40px,6vh,72px)}
.dveri>.panno:first-child .panno-slova{padding-left:var(--polya)}
.panno-levo{display:flex;flex-direction:column;gap:10px;min-width:0}
.dver-imya{font-family:var(--sh-zag);font-weight:900;text-transform:uppercase;
 letter-spacing:-.025em;line-height:.95;font-size:clamp(40px,6vw,96px);color:#fff;
 text-shadow:0 2px 34px rgba(var(--fon-rgb),.7)}
/* строка-вход двери — слова 02.3 (аудит 17.09): сколько песен и концертов.
   Вторая строка места 02.2 с дверей снята (правка 9, п. 7.2): она повторялась
   первыми словами 02.3. Под именем стоит одна строка, и она крупнее прежней —
   ей больше не надо уступать соседке. */
.dver-iz{font-style:normal;display:block;max-width:34ch;margin-top:2px;
 font-size:15.5px;font-weight:400;line-height:1.45;
 color:rgba(var(--tekst-rgb),.88);text-shadow:0 1px 18px rgba(var(--fon-rgb),.9)}
.panno .strelka{font-style:normal;flex:none;font-size:clamp(30px,3.6vw,56px);
 line-height:1;color:#fff;opacity:.75;transition:opacity .25s,transform .25s}
.panno:hover .strelka{opacity:1;transform:translateX(6px)}

/* ── 03 история: цитата поверх кадра, абзацы колонкой справа-снизу ── */
.istoriya-slova{display:grid;grid-template-columns:minmax(0,1fr) 44%;
 gap:clamp(24px,4vw,72px);align-items:end;justify-content:stretch}
.istoriya-levo,.istoriya-pravo{display:flex;flex-direction:column;min-width:0}
.istoriya-pravo .abzac{max-width:46ch;text-shadow:0 1px 18px rgba(var(--noch-rgb),.9)}

/* ── 04 где мы играли: лента афиш, видных сразу ── */
/* Афиша — плакат, а не фотография в карточке: ей положен край, скругление
   6 px и лёгкий наклон. Наклоняется только сам плакат — слова под ним стоят
   прямо, поэтому и наехать друг на друга не могут. */
/* мелкая строка под заголовком — слова 04.4 (идея 8, 17.09) */
.pod-zagolovkom{margin:10px 0 0;color:var(--tihiy)}
/* место даты следующего концерта. Даты нет по-прежнему; с 17.09 (идея 5)
   в нём стоит строка «Следующий концерт — может быть, у тебя.» и кнопка
   «Написать»: переписка открывается с заготовкой «концерт» (место 10.13). */
.sleduyushchiy{margin:clamp(14px,2vh,22px) 0 clamp(20px,3vh,36px);
 display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px}
.zov{font-family:var(--sh-zag);font-weight:700;letter-spacing:-.01em;
 font-size:clamp(18px,1.9vw,26px);line-height:1.2;color:var(--tekst)}
.zov-knopka{flex:none}
/* слово «скоро» стоит там, где ещё нет ни даты, ни фотографии, ни адреса:
   мелко и тихим цветом — это не надпись раздела, а пометка места (11.09) */
.skoro{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--tihiy);
 line-height:1;pointer-events:none}
.lenta.afishi{grid-auto-columns:minmax(0,1fr);overflow-x:visible;
 padding:14px 5vw 14px var(--polya);gap:clamp(18px,2.4vw,34px)}
.afisha-karta{display:flex;flex-direction:column;min-width:0;
 text-decoration:none;color:inherit}
.afisha-karta .kadr.afisha{aspect-ratio:3/4;border-radius:6px;margin-bottom:18px;
 box-shadow:0 18px 46px rgba(var(--noch-rgb),.55);
 transition:transform .3s ease,box-shadow .3s ease}
.afisha-karta:nth-child(odd) .kadr.afisha{transform:rotate(-2deg)}
.afisha-karta:nth-child(even) .kadr.afisha{transform:rotate(2deg)}
.afisha-karta:hover .kadr.afisha{transform:rotate(0deg) translateY(-6px);
 box-shadow:0 26px 60px rgba(var(--akcent-rgb),.3)}
.afisha-karta .data{font-family:var(--sh-zag);font-weight:600;font-size:15px;
 font-variant-numeric:tabular-nums;color:rgba(var(--tekst-rgb),.72)}
.afisha-karta .nazvanie{font-family:var(--sh-zag);font-weight:900;
 text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;
 font-size:clamp(20px,2vw,28px);margin:6px 0 5px;overflow-wrap:anywhere}
.afisha-karta .gde{font-size:14.5px;color:var(--tihiy);overflow-wrap:anywhere}
.tiho.afisha{aspect-ratio:3/4;border-radius:6px;margin-bottom:18px}

/* ── 05 наше видео: полоса во всю ширину, кнопка «играть» в середине ── */
.video-polosa{display:grid;width:100%;margin:0 0 clamp(20px,3vh,36px);
 background:var(--noch);overflow:hidden;isolation:isolate}
.video-polosa>*{grid-area:1/1}
.video-polosa video{width:100%;max-height:82vh;aspect-ratio:16/9;display:block;
 object-fit:cover;background:var(--noch)}
.video-polosa .mir-a,.video-polosa .mir-b{transition:opacity .4s}
.video-polosa.idyot .mir-a,.video-polosa.idyot .mir-b,.video-polosa.idyot .igra-krug{opacity:0;
 pointer-events:none}
.igra-krug{justify-self:center;align-self:center;z-index:3;width:88px;height:88px;border-radius:50%;
 border:1px solid rgba(255,255,255,.75);background:rgba(var(--fon-rgb),.32);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;position:relative;
 transition:transform .2s,box-shadow .2s,opacity .3s}
.igra-krug::before{content:"";position:absolute;left:35px;top:28px;border-style:solid;
 border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.igra-krug:hover{transform:scale(1.06);box-shadow:0 0 40px rgba(var(--akcent-rgb),.45)}
.nadpis-glavnogo{margin:0 0 clamp(28px,4vh,52px)}
.vybor .v-vybor{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;
 overflow:hidden;background:var(--poverh);aspect-ratio:16/9;cursor:pointer;
 transition:transform .25s,box-shadow .25s}
.vybor .v-vybor img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.vybor:hover .v-vybor{transform:scale(1.02);box-shadow:0 0 32px rgba(var(--akcent-rgb),.3)}
.v-igra{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
 border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(var(--fon-rgb),.35);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.v-igra::before{content:"";position:absolute;left:20px;top:16px;border-style:solid;
 border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.vybor.idyot .v-vybor{box-shadow:0 0 0 2px var(--akcent)}
.nadpis{font-size:15px;font-weight:500;line-height:1.5;
 color:rgba(var(--tekst-rgb),.92);margin:12px 0 0}
/* номер записи перед названием (правка 15, п. 4): тот же тихий стиль, что
   у подписи, и не крупнее названия — он считает, а не кричит */
.nomer-zapisi{color:var(--tihiy);font-variant-numeric:tabular-nums}
.nadpis-nomer-glavnoy{margin:0 0 10px}

/* ── 05a два кадра рядом: клип и сцена встык во всю ширину ── */
/* Карточки здесь нет: два кадра стоят вплотную, без промежутка и без
   скругления, и вместе занимают всю ширину. Подписи лежат под кадрами —
   заходить заголовку на кадр негде. Края кадров растворяются в поле тем же
   куском маски, что у полосы и панно: стык виден полем, а не линией. */
.dva-kadra{display:grid;grid-template-columns:1fr 1fr;gap:0}
.para-kadr{margin:0;min-width:0}
.para-kadr .kadr{aspect-ratio:4/3}
.para-kadr .nadpis{margin:14px 5vw 0;color:var(--tihiy);font-size:14px}
.dva-kadra>.para-kadr:first-child .nadpis{margin-left:var(--polya)}

/* ── 06 наши клипы: постер клипа — одна из двух скруглённых карточек ── */
.klip{position:relative}
.klip .kadr{aspect-ratio:16/9;border-radius:10px}
/* Правка 18, п. 1: подпись всегда видна целиком — она лежит выше круглой
   кнопки, а сама кнопка отодвинута от неё вверх. Слово владельца 24.09 со
   снимком 05: «Avatarcito» и «Синяя женщина» читались из-под кнопки. */
.klip .yt-igra{margin-bottom:34px}
.na-kadre{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:34px 16px 14px;
 font-family:var(--sh-zag);font-weight:600;font-size:15px;line-height:1.25;color:#fff;
 background:linear-gradient(to top,rgba(var(--noch-rgb),.92),transparent);
 border-radius:0 0 10px 10px}
.klip{transition:transform .25s}
.klip:hover{transform:scale(1.02)}
/* петля клипа на месте карточки (правка 11): та же клетка 16/9 и то же
   скругление, что у постера рядом, — ряд не должен сбиваться. Маски поля
   света у неё нет: в ленте кадр стоит карточкой, а не навылет. */
.klip .klip-petlya{aspect-ratio:16/9;border-radius:10px;overflow:hidden;
 background:var(--noch) center/cover no-repeat}
.klip .klip-petlya video{width:100%;height:100%;object-fit:cover;display:block}
.klip .klip-petlya .mir-a,.klip .klip-petlya .mir-b{display:none}

/* ── 06а студия анимации: сцена с живым фоном во всю ширину ──
   Правка 18, п. 3. Слово владельца 24.09: «анимация поставлена просто как
   квадрат. Это некрасиво. Давай сделаем на фоне… такую видеопетлю, где будут
   резко меняться в разных контрастах разные клипы». Квадрата справа больше
   нет: монтажная петля лежит во весь фон блока, слова стоят поверх.
   Слои — одна клетка сетки, наехать друг на друга им нечем. */
.blok.studiya-blok{padding-top:clamp(18px,3vh,36px);overflow:hidden}
.studiya-scena{position:relative;display:grid;isolation:isolate;
 min-height:min(72svh,620px);width:100%;text-decoration:none;color:inherit}
.studiya-scena>*{grid-area:1/1;min-width:0}
/* верх и низ сцены растворяются в поле страницы общим правилом «стыки без
   границ»: своего числа у этой сцены больше нет (правка 19, п. 1) */
.studiya-montazh{overflow:hidden;background:var(--noch) center/cover no-repeat}
.studiya-montazh video{width:100%;height:100%;object-fit:cover;display:block}
/* затемнение под словами: монтаж то светлеет, то темнеет — без своего слоя
   ночи белый заголовок на светлом куске нечитаем */
.studiya-scena .mir-b{background:linear-gradient(180deg,rgba(var(--noch-rgb),.42) 0%,
 rgba(var(--noch-rgb),.3) 34%,rgba(var(--noch-rgb),.86) 100%)}
.studiya-scena .mir-a{background:linear-gradient(90deg,rgba(var(--noch-rgb),.8) 0%,
 rgba(var(--noch-rgb),.5) 46%,transparent 78%)}
.studiya-scena-slova{z-index:3;position:relative;display:flex;flex-direction:column;
 align-items:flex-start;justify-content:flex-end;gap:10px;
 padding:clamp(40px,8vh,90px) 5vw clamp(34px,6vh,72px) var(--polya);
 max-width:min(100%,780px)}
.studiya-scena-slova .metka{margin:0}
.studiya-scena-slova .zag{margin:0;font-size:clamp(36px,4.8vw,84px);color:#fff;
 overflow-wrap:anywhere;
 text-shadow:0 0 34px rgba(var(--akcent-rgb),.34),0 2px 28px rgba(var(--fon-rgb),.7)}
.studiya-scena-slova .abzac{margin:0;max-width:34ch;color:rgba(var(--tekst-rgb),.96);
 text-shadow:0 1px 16px rgba(var(--fon-rgb),.85)}
.studiya-kem{margin:6px 0 0;color:rgba(var(--tekst-rgb),.8)}
.studiya-strelka{font-style:normal;font-size:clamp(30px,3.6vw,56px);line-height:1;
 opacity:.75;transition:opacity .25s,transform .25s}
.studiya-scena:hover .studiya-strelka{opacity:1;transform:translateX(6px)}
.studiya-scena:hover .studiya-montazh video{transform:scale(1.02)}
.studiya-montazh video{transition:transform .8s ease}

/* ── 07 кто играет: семь вертикальных мест, второй ряд со сдвигом ── */
:root{--vozduh-lyudey:clamp(24px,3.4vh,44px)}
/* Слово владельца 24.09 дословно: «Фотографии участников прижаты к фотографии.
   Слушай, это какие-то ошибки, такие вот повёрзки, они мне не нравятся»
   (правка 17, п. 6). Воздух под общим рисунком — ровно тот же, что между
   строками карточек: одно число на оба промежутка, разойтись им нечем. */
.kadr.gruppa{margin-bottom:var(--vozduh-lyudey)}
.lyudi{display:grid;grid-template-columns:repeat(8,1fr);
 gap:var(--vozduh-lyudey) clamp(14px,1.8vw,26px)}
.chelovek{grid-column:span 2;min-width:0}
.chelovek:nth-child(5){grid-column:2/span 2}
.mesto-lica{aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;border-radius:0;
 margin-bottom:16px;
 background:radial-gradient(72% 58% at 50% 40%,rgba(var(--akcent-rgb),.16),transparent 72%),
 var(--noch)}
.mesto-lica img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.mesto-lica.est{box-shadow:0 0 60px rgba(var(--akcent-rgb),.22)}
/* место Электры: лица нет и не будет (решение 17.09, 7.3). С правки 20 здесь
   не слово на тёмном поле — оно читалось как недогруженная картинка, — а живая
   звуковая волна: Электра и есть голос и звук. Ни видео, ни картинки. */
.mesto-lica.tyomnoe{background:
 radial-gradient(70% 60% at 50% 44%,rgba(var(--akcent-rgb),.22),transparent 72%),
 rgba(var(--noch-rgb),.85)}
.mesto-lica.volna{display:flex;align-items:center;justify-content:center;
 gap:clamp(2px,.55vw,5px);padding:30% 13%}
.mesto-lica.volna i{flex:1 1 0;min-width:0;border-radius:99px;
 height:calc(8% + var(--v) * 92%);
 background:linear-gradient(180deg,var(--akcent2),var(--akcent));
 box-shadow:0 0 12px rgba(var(--akcent-rgb),.5);
 transform-origin:50% 50%;opacity:.85;
 animation:volna-dyshit 5.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes volna-dyshit{
 0%,100%{transform:scaleY(.34);opacity:.5}
 50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
 .mesto-lica.volna i{animation:none;transform:scaleY(.82);opacity:.85}}
/* буква имени и слово «скоро» стоят двумя строками одной сетки: место под
   лицо больше не пустое, и ничего не прибито намертво (замок 12) */
.mesto-lica{gap:10px;align-content:center}
.bukva{font-family:var(--sh-zag);font-weight:900;font-size:clamp(52px,7vw,120px);line-height:1;
 color:rgba(var(--tekst-rgb),.13)}
.chelovek .nazvanie{font-family:var(--sh-zag);font-weight:700;font-size:19px;margin:0}
.chelovek .rol{font-size:15px;font-weight:500;color:var(--tihiy);margin:4px 0 0}

/* ── 07 · альпака за клавишами: своя узкая сцена под семью карточками ──
   Не восьмая карточка: состав — семеро (правка 12). На столе петля стоит
   колонкой по середине и не шире 360 px, на телефоне — во всю ширину полей.
   Кадр вертикальный, как сам ролик: 9/16, без рамки и без скругления. */
.alpaka{margin:clamp(34px,5vh,64px) auto 0;max-width:360px;width:100%}
/* Края растворяются в поле тем же приёмом, что у полосы, панно и двух кадров:
   аккуратной карточки с картинкой на фоне на сайте нет нигде (слово владельца
   10.09). Высота растворения — общая, `--rastvor` (правка 19, п. 1). */
.alpaka-kadr{aspect-ratio:9/16;background:var(--noch) center/cover no-repeat}
.alpaka-kadr video{width:100%;height:100%;object-fit:cover;display:block}
.alpaka .nadpis{margin:16px 0 0;text-align:center}
.chelovek .tretya{font-size:14px;line-height:1.55;color:var(--tihiy);margin:8px 0 0}

/* ── 08 Электра: навылет — кадр за правый край, заголовок заходит на него ── */
/* «навылет» остаётся, «заход» — нет: заголовок стоит в своей колонке,
   кадр справа навылет, между ними воздух 5vw (косяк 1 со снимков 10.09) */
.navylet{display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);
 align-items:center;column-gap:5vw;padding-left:var(--polya)}
.navylet-kadr{grid-column:2;grid-row:1;position:relative;z-index:1;display:grid;isolation:isolate}
.navylet-kadr>*{grid-area:1/1}
.navylet-kadr img{width:calc(100% + 5vw);max-width:none;display:block;
 aspect-ratio:4/3;object-fit:cover;border-radius:0}
.svet-elektry{z-index:2;background:radial-gradient(58% 56% at 46% 46%,
 rgba(var(--akcent-rgb),.3),transparent 72%);mix-blend-mode:screen}
.navylet-slova{grid-column:1;grid-row:1;position:relative;z-index:2;min-width:0;
 display:flex;flex-direction:column;align-items:flex-start}
.navylet-slova .zag{font-size:clamp(38px,5.4vw,92px);overflow-wrap:anywhere}

/* ── 08 Электра: текст на тёмном поле, картинки нет ──
   Слово владельца 17.09 (решение 7.3): нарисованный андроид снят. Сцена стала
   типографской — одна колонка слов на поле света, без кадра и без заглушки на
   его месте. Место под 20 секунд записи (идея 7) появится, когда владелец
   назовёт минуту и секунду. */
.elektra-slova{max-width:62ch;display:flex;flex-direction:column;
 align-items:flex-start;gap:6px}
.elektra-slova .zag{font-size:clamp(38px,5.4vw,92px);margin:0}
.elektra-slova .metka{margin:2px 0 10px}

/* ── 09 слушать и подписаться: типографская сцена на свечении ── */
/* своей заливки у блока нет: она бы резала поле света по его границе.
   Свечение осталось, но растворяется по краям и потому стыка не делает */
.prizyv-blok::before{content:"";position:absolute;inset:-14vh 0;z-index:-1;
 pointer-events:none;
 background:radial-gradient(48% 40% at 16% 30%,rgba(var(--akcent-rgb),.15),transparent 72%),
 radial-gradient(46% 38% at 86% 74%,rgba(var(--akcent2-rgb),.12),transparent 72%)}
/* две колонки: справа было пусто — косяк 2 со снимков владельца 10.09 */
.prizyv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:clamp(28px,5vw,80px);align-items:start}
.prizyv-levo,.prizyv-pravo{display:flex;flex-direction:column;
 align-items:flex-start;min-width:0}
/* заголовок стоит в половине ширины, а не в полосе: крупный, но по колонке.
   Вылезал на строку проигрывателя — куплено снимком правки 2 */
.prizyv .zag{font-size:clamp(34px,4.6vw,76px);overflow-wrap:anywhere}
.pesni{list-style:none;margin:clamp(28px,4vh,44px) 0 clamp(24px,4vh,40px);padding:0;
 width:100%;min-width:0}
.pesnya{display:grid;grid-template-columns:34px 40px 1fr auto;align-items:center;gap:14px;
 padding:14px 0;border-top:1px solid rgba(var(--tihiy-rgb),.22)}
.pesnya .nomer{font-family:var(--sh-zag);font-weight:600;font-size:15px;
 font-variant-numeric:tabular-nums;color:var(--tihiy)}
.pesnya .igra{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--tekst-rgb),.35);
 background:transparent;position:relative;cursor:pointer}
.pesnya .igra::before{content:"";position:absolute;left:13px;top:10px;border-style:solid;
 border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.pesnya .igra[disabled]{color:var(--tihiy);opacity:.5;cursor:default}
.pesnya.zhivaya .igra{grid-column:1/3;color:var(--akcent);border-color:rgba(var(--akcent-rgb),.7)}
.pesnya.zhivaya .igra.igraet::before{border-width:0;left:11px;top:11px;width:12px;height:12px;
 background:currentColor}
.polosa-imeni{height:12px;border-radius:6px;background:rgba(var(--tekst-rgb),.09);width:52%}
.pesnya .dlina{font-size:14px;color:var(--tihiy);font-variant-numeric:tabular-nums}
.zhivoe-imya{font-size:15px;font-weight:500;line-height:1.4;
 color:rgba(var(--tekst-rgb),.92);min-width:0;overflow-wrap:anywhere}
.pesnya.zhivaya{grid-template-columns:34px 40px 1fr 96px auto}
.hod{position:relative;height:3px;border-radius:2px;background:rgba(var(--tihiy-rgb),.3);
 align-self:center}
.hod i{display:block;height:100%;width:0;border-radius:2px;background:var(--akcent);
 box-shadow:0 0 10px rgba(var(--akcent-rgb),.6)}
/* ── знаки площадок: три штуки под проигрывателем и три в подвале ── */
.ikonki{display:flex;gap:10px;margin:clamp(18px,3vh,28px) 0 0}
.ikonka{display:inline-flex;align-items:center;justify-content:center;
 width:44px;height:44px;border-radius:50%;color:var(--tihiy);
 border:1px solid rgba(var(--tihiy-rgb),.35);text-decoration:none;
 transition:color .2s,border-color .2s,box-shadow .2s}
.ikonka:hover{color:var(--akcent);border-color:rgba(var(--akcent-rgb),.8);
 box-shadow:0 0 22px rgba(var(--akcent-rgb),.35)}
/* тихий знак не нажимается: адреса ТикТока и YouTube владелец не называл */
.ikonka.tihaya{opacity:.5;cursor:default}
/* подпись «скоро» стоит под кружком своей строкой в колонке: ниже первого
   экрана на странице нет ни одного места, прибитого намертво (замок 12) */
.znak-mesto{display:flex;flex-direction:column;align-items:center;gap:4px}
.znak-mesto .skoro{font-size:11px;white-space:nowrap}
.ikonki{align-items:flex-start}
.ikonka.tihaya:hover{color:var(--tihiy);border-color:rgba(var(--tihiy-rgb),.35);
 box-shadow:none}
/* три пустые пилюли площадок убраны деталью 17: записей на площадках нет,
   и пустая кнопка читалась как брак. На их месте одна тихая строка. */
.ploshchadki{margin:0}
.ploshchadki-skoro{margin:0;font-size:13px;font-weight:500;letter-spacing:.04em;
 color:var(--tihiy)}
.podpiska{margin:clamp(20px,3vh,32px) 0 26px}

/* ── поддержать проект: три стикер-пака и дверь на полку ──
   Шесть паков, афиши с автографами и мерч стоят лотами на /polka: слово
   владельца 10.09 — «кнопка «Перейти на полку», чтобы везде не писать
   WhatsApp». Здесь три пака и одна дверь. */
.nabory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(28px,3.4vw,52px) clamp(18px,2.2vw,34px)}
.na-polku{margin-top:clamp(32px,5vh,60px);display:inline-flex;align-items:center;gap:10px}
.merch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(18px,2.2vw,34px);max-width:44%;margin-top:clamp(40px,6vh,80px)}
/* мерч со шрифтом — показ идеи: имя проекта набрано шрифтом мира на тёмном
   поле. Картинки нейросети здесь нет, кнопки нет: купить пока нечего */
.merch-mesto{aspect-ratio:3/4;display:grid;place-items:center;padding:0 12%;
 background:radial-gradient(70% 54% at 50% 42%,rgba(var(--akcent-rgb),.14),transparent 72%),
 var(--noch);margin-bottom:14px}
.merch-znak{font-family:var(--sh-zag);font-weight:900;text-transform:uppercase;
 letter-spacing:-.01em;line-height:.95;font-size:clamp(17px,1.9vw,26px);
 text-align:center;color:rgba(var(--tekst-rgb),.9)}
.merch .cena{font-size:16px;color:var(--tihiy);margin:0}
.veer{aspect-ratio:3/2;border-radius:10px;margin-bottom:16px;
 transition:transform .25s,box-shadow .25s}
.tovar:hover .veer{transform:scale(1.02);box-shadow:0 0 32px rgba(var(--akcent-rgb),.28)}
.tovar .nazvanie{font-family:var(--sh-zag);font-weight:700;font-size:19px;margin:0}
.tovar .cena{font-size:16px;font-weight:500;color:var(--tihiy);margin:4px 0 16px;
 font-variant-numeric:tabular-nums}

/* ── 11 подвал: не скудный ── */
/* Слово владельца 10.09: «Очень скудно и плохо выглядит подвал». Строение —
   правка 2, пункт 7: знак и имя, четыре колонки, нижняя строка. */
.blok.podval-blok{padding:var(--styk) 0 40px}
.podval-verh{display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap;
 padding-bottom:44px;border-bottom:1px solid rgba(var(--tihiy-rgb),.18)}
/* логотип — не фотография в карточке, а знак на поле: круглым его делает страница */
.logo-podval{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:none}
.podval-imya{display:flex;flex-direction:column;gap:12px;min-width:0}
.pv-imya{font-family:var(--sh-zag);font-weight:900;text-transform:uppercase;
 letter-spacing:-.025em;line-height:.95;font-size:clamp(36px,5vw,72px);margin:0;
 overflow-wrap:anywhere}
/* колонок две — Связь и Языки (правка 6, п. 2). Между ними воздух, а не
   пустые столбцы: третья и четвёртая ушли, сетка перестроена под две. */
.kolonki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(24px,4vw,64px);padding:44px 0 40px}
.kolonka{min-width:0}
.kolonka b{display:block;font-family:var(--sh-zag);font-weight:600;font-size:13px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--tihiy);margin-bottom:14px}
.kolonka p{font-size:15px;line-height:1.6;color:rgba(var(--tekst-rgb),.92);
 margin:0 0 6px;overflow-wrap:anywhere}
/* чужие языки входа — живые двери: с деталью 19 их в колонке две */
.kolonka .yazyk-dver a{color:rgba(var(--tekst-rgb),.92);text-decoration:none;
 border-bottom:1px solid rgba(var(--akcent-rgb),.45)}
.kolonka .yazyk-dver a:hover{color:var(--akcent);
 border-bottom-color:var(--akcent)}
.kolonka .ikonki{margin-top:14px}
.kolonka .knopka{height:46px}
.znamya{display:block;color:var(--akcent);margin:0 0 12px;opacity:.85}
.deviz{font-family:var(--sh-shirokiy);font-weight:900;font-size:14px;letter-spacing:.3em;
 text-transform:uppercase;color:rgba(var(--tekst-rgb),.7);margin:0}
/* ── форма одним устройством: плашка ── */
/* Слово владельца 11.09 дословно: «нет разметки формы, надо поставить заявку
   на анимацию, внизу сообщение, справа кнопка. Сейчас вид очень как будто
   разрушенный: всё не в попаде, не ровно» (правка 6, п. 1). Значит: форма —
   не три вещи в ряд, а одна плашка с рамкой на всю ширину. Внутри одна сетка:
   шапка сверху, поля слева, большая кнопка справа ростом ровно в оба поля,
   «Отправить» под полями шириной ровно в большую кнопку. Ширина кнопок одна
   на обе — переменной `--kn`, поэтому они не могут разойтись. */
/* Ширина обеих кнопок одна — переменной `--kn`. С правкой 17 их две, и вторая
   носит слово «Написать в WhatsApp» (es «Escribir por WhatsApp»): ширина
   поднята, чтобы слово стояло одной строкой на всех трёх языках. */
.zakaz.forma-plashka{--kn:clamp(210px,24vw,320px);display:block;
 background:rgba(var(--poverh-rgb),.55);
 border:1px solid rgba(var(--tihiy-rgb),.38);border-radius:8px;
 padding:clamp(20px,2.6vw,34px);margin:44px 0 4px}
.plashka-shapka{margin-bottom:clamp(18px,2.4vw,28px)}
.plashka-shapka b{display:block;font-family:var(--sh-zag);font-weight:900;
 font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.015em;
 margin-bottom:8px}
.plashka-shapka p{font-size:16px;color:var(--tihiy);margin:0}
.plashka-telo{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px}
.zakaz-polya{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
.pole{display:flex;flex-direction:column;gap:7px;min-width:0}
.pole-shirokoe{grid-column:1/-1}
.pole span{font-family:var(--sh-zag);font-weight:600;font-size:12px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--tihiy)}
.pole input,.pole select,.pole textarea{width:100%;box-sizing:border-box;
 font-family:var(--sh-tekst);font-size:16px;font-weight:400;color:var(--tekst);
 background:rgba(var(--poverh-rgb),.9);border:1px solid rgba(var(--tihiy-rgb),.5);
 border-radius:8px;padding:12px 14px;transition:border-color .2s}
.pole textarea{resize:vertical;line-height:1.5}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;
 border-color:var(--akcent)}
.pole.nedostayot input,.pole.nedostayot textarea{border-color:var(--akcent2)}
/* две кнопки под полями — одного вида, роста и ширины. Слово владельца 24.09:
   «нужно сделать такую же кнопку под формой как отправить только такую же
   написать напрямую в whatsapp» (правка 17, п. 4). Бирюзовой плитки справа
   от полей больше нет ни на одной форме сайта. */
.knopki-formy{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,18px)}
.zakaz-knopka,.zakaz-wa{width:var(--kn);min-height:56px;justify-content:center;
 margin:0;text-align:center}
.zakaz-wa svg{flex:none;width:18px;height:18px;color:var(--akcent)}
.zakaz-wa{gap:10px;padding:0 20px}
/* «Отвечаем в тот же день» — слово владельца 17.09 (решение 9.5): мелкая
   строка под кнопками, одна на все формы сайта */
.otvechaem{margin:2px 0 0;font-size:13px;
 letter-spacing:.02em;color:var(--tihiy)}
/* строка «Рисует Лада…» под первой фразой полосы студии (слова 13.12) */
.studiya-kem{margin:10px 0 0;color:var(--tihiy);max-width:46ch}
/* строка WhatsApp в подвале — ссылка (слово 17.09, НОВОЕ-16), и при ней тот
   же знак, что на плавающей кнопке «Написать» (правка 9, п. 1) */
.svyaz-wa{display:inline-flex;align-items:center;gap:8px;color:inherit;
 text-decoration:none}
.svyaz-wa svg{flex:none;width:18px;height:18px;color:var(--akcent)}
.svyaz-wa span{border-bottom:1px solid rgba(var(--akcent-rgb),.45)}
.svyaz-wa:hover{color:var(--akcent)}
/* ── нижняя строка подвала: «Сайты и партнёры» ── */
/* Слово владельца 11.09: традиция уходит сюда, маленьким шрифтом. */
.podval-niz{padding-top:28px;border-top:1px solid rgba(var(--akcent-rgb),.22)}
.podval-niz b{display:block;font-family:var(--sh-zag);font-weight:600;
 font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tihiy);
 margin-bottom:12px}
.niz-stroka{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.niz-stroka span{font-size:12px;line-height:1.5;letter-spacing:.02em;
 color:var(--tihiy)}
.niz-stroka .sayt-svoy{letter-spacing:.08em}
/* строка традиции — тише остального подвала. Слово владельца 24.09 дословно:
   «сделай более прозрачным сером эту строчку чтобы она не так бросалась
   в глаза» (правка 17, п. 2). Двух фамилий в ней больше нет — осталась одна
   строка с учителями Шамбалы и Агни-Йогой. */
.niz-stroka .tradiciya{color:rgba(var(--tihiy-rgb),.45)}
/* Знамя Мира (решение 05.09). На снимках 17.09 его не было видно: знак
   стоял в полную силу, но обводка у него волосяная — 4 из 100 единиц рисунка,
   то есть 0,6 px при росте 16, — и на поле он читался пятнышком. Рост
   прежний, 16 px (правка 6): меняется не размер, а вес линии и воздух вокруг
   знака. Толщину задаёт одежда, а не znamya.py: знак один на весь проект,
   и в других местах он стоит крупнее, где волосяная линия и нужна. */
.niz-stroka .znamya-melko{display:inline-flex;align-items:center;flex:none;
 color:var(--akcent);opacity:1;margin:0 2px}
.niz-stroka .znamya-melko .znamya{width:16px;height:16px;display:block}
.niz-stroka .znamya-melko .znamya circle{stroke-width:9}

/* ── телефон: один столбец, сцены ниже, ленты листаются пальцем ── */
@media(max-width:900px){
 /* якорей в шапке нет — вместо них кнопка меню и слой во весь экран */
 .sh-yakorya{display:none}
 .sh{justify-content:space-between}
 .sh-menyu{display:flex}
 .sloy-menyu{display:block}
 .dveri{grid-template-columns:1fr}
 .linia-sveta{height:1px;background:linear-gradient(90deg,var(--akcent),var(--akcent2))}
 .panno{min-height:70svh}
 .panno-slova{padding-left:5vw}
 .dveri>.panno:first-child .panno-slova{padding-left:5vw}
 .scena.polosa{min-height:64svh}
 .istoriya-slova{grid-template-columns:1fr;gap:22px;align-items:start}
 .prizyv{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
 .merch{max-width:none}
 .navylet{grid-template-columns:1fr;padding-left:0;row-gap:24px}
 .navylet-kadr{grid-column:1;grid-row:1}
 .navylet-slova{grid-column:1;grid-row:2;padding:0 5vw}
 .navylet-slova .zag{font-size:clamp(38px,11vw,84px)}
 /* сцена студии на телефоне: та же петля фоном, слова столбиком по левому
    полю — квадрата нет и здесь (правка 18, п. 3) */
 .studiya-scena{min-height:min(64svh,520px)}
 .studiya-scena-slova{padding:clamp(30px,6vh,60px) 5vw clamp(26px,5vh,48px) 5vw}
 .studiya-scena-slova .zag{font-size:clamp(34px,10vw,70px)}
 .studiya-scena .mir-a{background:linear-gradient(180deg,rgba(var(--noch-rgb),.35) 0%,rgba(var(--noch-rgb),.55) 100%)}
 /* растворение на телефоне короче — одним числом на весь сайт */
 :root{--rastvor:72px}
 .pesni{width:100%;min-width:0}
 /* на телефоне та же плашка столбиком: шапка, поля, «Отправить»,
    «Написать в WhatsApp» — все во всю ширину (правка 6, п. 1; правка 17, п. 4) */
 .knopki-formy{flex-direction:column}
 .zakaz-knopka,.zakaz-wa{width:100%}
 .kolonki{grid-template-columns:1fr;gap:26px}
 .podval-verh{gap:20px}
 .pesnya{grid-template-columns:28px 36px 1fr auto;gap:10px}
 .pesnya.zhivaya{grid-template-columns:28px 36px 1fr 56px auto}
 .igra-krug{width:68px;height:68px}
 .igra-krug::before{left:27px;top:21px;border-width:13px 0 13px 21px}
 /* два кадра встают столбиком: на телефоне половина ширины — это уже не кадр */
 .dva-kadra{grid-template-columns:1fr}
 .dva-kadra>.para-kadr:first-child .nadpis{margin-left:5vw}
 /* плашка проигрывателя во всю ширину, кнопка «Написать» — над ней */
 .mini.vidna{left:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  max-width:none}
 .est-mini .napisat{bottom:calc(clamp(14px,3vh,28px) + 68px)}
}
/* ── телефон: ничего не листается вбок ──
   Слово владельца 10.09 дословно: «на мобильной версии афиша классно сделана,
   но их надо листать вбок. Также надо листать вбок «Кто играет». Вот это мне
   не нравится: листать вбок на мобильной версии». Значит: лент на телефоне нет
   нигде — сетки в две колонки, последняя карточка ряда во всю ширину. */
@media(max-width:760px){
 .lenta{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;
  padding:0 5vw;gap:clamp(14px,3vw,22px)}
 .lenta>*{scroll-snap-align:none}
 /* выбор записи под проигрывателем — в столбик: у карточки своя подпись */
 .lenta.tri{grid-template-columns:1fr}
 /* Правка 18, п. 1: на телефоне клип во всю ширину. В две колонки
    карточка была 94 px высотой, и круглая кнопка ложилась прямо на
    подпись — «Avatarcito» и «Синяя женщина» на снимке 05 владельца
    24.09 читались из-под кнопки. */
 .lenta.chetyre{grid-template-columns:1fr}
 .lenta.afishi{padding:0 5vw;gap:clamp(16px,4vw,24px)}
 .afisha-karta:nth-child(5){grid-column:1/-1}
 .afisha-karta:nth-child(5) .kadr.afisha{aspect-ratio:4/3}
 /* на телефоне строки стоят теснее — и воздух под общим рисунком садится
    вместе с ними: число одно (правка 17, п. 6) */
 :root{--vozduh-lyudey:clamp(22px,5vw,32px)}
 .lyudi{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--vozduh-lyudey) clamp(14px,3vw,22px)}
 .chelovek,.chelovek:nth-child(5){grid-column:auto}
 .chelovek:nth-child(7){grid-column:1/-1}
 .chelovek:nth-child(7) .mesto-lica{aspect-ratio:4/3}
 .alpaka{max-width:none}
 .nabory{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,5vw,32px) clamp(14px,3vw,22px)}
 .nabory>.tovar:nth-child(3){grid-column:1/-1}
 .loty .tovar:last-child:nth-child(odd){grid-column:1/-1}
 .merch{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* петли-фона на телефоне нет вовсе: вес и батарея */
 .fon-petlya{display:none}
 .na-polku{width:100%;justify-content:center}
}
/* ── подвал на телефоне: всё по центру ──
   Слово владельца 24.09 дословно: «Подвал на мобильной версии надо поправить:
   надо всё отцентровать, наверное, и сделать какую-то другую верстку, потому
   что сейчас всё прижато к левому краю и смотрится плохо» (правка 17, п. 3).
   Значит: до 700 px все группы подвала — связь, значки, языки, сайты
   и партнёры — стоят столбцом по центру, заголовки групп по центру, значки
   площадок рядом по центру, а три языка — одной строкой «Русский · Español ·
   English». На столе подвал не меняется ни на пиксель. */
@media(max-width:700px){
 .podval-verh{flex-direction:column;justify-content:center;text-align:center}
 .podval-imya{align-items:center}
 .kolonki{justify-items:center;text-align:center}
 .kolonka b{text-align:center}
 .kolonka .ikonki-podval{justify-content:center}
 .kolonka .svyaz-wa{justify-content:center}
 /* три языка в одну строку через точку — столбика из трёх строк больше нет */
 .kolonka-yazyki .yazyki-ryad{display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:center;gap:0 9px}
 .kolonka-yazyki .yazyki-ryad p{margin:0}
 .kolonka-yazyki .yazyki-ryad p+p::before{content:"·";margin-right:9px;
  color:var(--tihiy)}
 .podval-niz{text-align:center}
 .niz-stroka{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .js .yav{opacity:1;transform:none;transition:none}
 .mir-fon i[class^="s"]{animation:none}
 .panno-naezd img,.svet-fuksii{animation:none}
 .panno .scena-kadr img,.panno .scena-kadr video,.klip,.veer,
 .afisha-karta .kadr.afisha,.vybor .v-vybor{transition:none}
}

/* ── карточка клипа: кадр и кнопка, окно — по нажатию ──
   Кадр, постер и кнопка лежат одной клеткой сетки, а не прибиты намертво:
   абсолютных мест ниже первого экрана на странице не бывает (замок 12
   детали 10, куплено показом 10.09). */
.yt,.svoy{position:relative;display:grid;width:100%;aspect-ratio:16/9;overflow:hidden;
 background:var(--poverh);cursor:pointer}
.yt>*,.svoy>*{grid-area:1/1}
.yt img,.svoy img,.svoy video{width:100%;height:100%;display:block;border:0}
.yt img,.svoy img{object-fit:cover;transition:transform .5s}
.yt:hover img,.svoy:hover img{transform:scale(1.03)}
/* кадром под кнопкой может лежать и наша петля, и готовый кадр описи:
   они приходят своей обёрткой, и она занимает всю клетку (правка 15, п. 2) */
.yt>.kadr,.yt>.scena-kadr,.svoy>.kadr,.svoy>.scena-kadr{width:100%;height:100%}
.yt .yt-igra,.svoy .yt-igra{place-self:center;z-index:3}
.yt-melkaya{position:relative;width:52px;height:52px;border-radius:50%;
 border:1px solid rgba(var(--akcent-rgb),.7);background:rgba(7,11,24,.55);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;padding:0;
 transition:transform .25s,box-shadow .25s}
.yt-melkaya::before{content:"";position:absolute;left:21px;top:15px;border-style:solid;
 border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--akcent)}
.yt:hover .yt-melkaya,.svoy:hover .yt-melkaya{transform:scale(1.08);
 box-shadow:0 0 28px rgba(var(--akcent-rgb),.4)}
.video-polosa .yt{max-height:82vh}
.klip .yt,.klip .svoy{border-radius:10px}

/* ── окно проигрывателя: одно на весь сайт ──
   Слово владельца 24.09: «чтобы вообще на целый экран открывался этот клип…
   красиво, с кнопкой закрытия, чтобы его реально можно было посмотреть».
   Поле — ночь палитры почти без просвета; видео по центру в своих пропорциях
   и как можно крупнее; крестик сверху справа; в нижнем углу маленькая кнопка
   «Смотреть на YouTube». Окно стоит выше шапки (её слой 20) и выше плавающей
   кнопки «Написать». */
.kino-okno{position:fixed;inset:0;z-index:300;display:grid;
 animation:kino-yavilos .22s ease}
.kino-okno[hidden]{display:none}
@keyframes kino-yavilos{from{opacity:0}to{opacity:1}}
.kino-pole{position:absolute;inset:0;background:rgba(var(--noch-rgb),.94);
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kino-ramka{position:absolute;inset:0;display:grid;place-items:center;
 pointer-events:none}
/* видео сидит в клетке своих пропорций: как можно крупнее, но целиком.
   `svh` — высота без адресной строки телефона: с `vh` низ ролика уезжал
   под браузер. */
.kino-kadr{position:relative;pointer-events:auto;background:#000;
 width:min(100vw,calc(100svh * 16 / 9));height:min(100svh,calc(100vw * 9 / 16));
 box-shadow:0 30px 120px rgba(0,0,0,.7)}
.kino-kadr iframe,.kino-kadr video{position:absolute;inset:0;width:100%;height:100%;
 display:block;border:0;background:#000;object-fit:contain}
.kino-krest{position:absolute;top:max(14px,env(safe-area-inset-top));
 right:max(14px,env(safe-area-inset-right));z-index:4;
 width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;
 border:1px solid rgba(var(--akcent-rgb),.55);background:rgba(7,11,24,.66);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 color:#fff;cursor:pointer;transition:transform .2s,background .2s}
.kino-krest:hover{transform:scale(1.08);background:rgba(7,11,24,.88)}
.kino-youtube{position:absolute;left:max(14px,env(safe-area-inset-left));
 bottom:max(14px,env(safe-area-inset-bottom));z-index:4;
 font-family:var(--sh-zag);font-weight:600;font-size:13px;letter-spacing:.02em;
 color:rgba(255,255,255,.86);text-decoration:none;
 padding:8px 14px;border-radius:999px;
 border:1px solid rgba(255,255,255,.28);background:rgba(7,11,24,.6);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kino-youtube[hidden]{display:none}
.kino-youtube:hover{border-color:var(--akcent);color:#fff}
/* страница под окном не прокручивается и остаётся там, где была */
html.kino-otkryto,html.kino-otkryto body{overflow:hidden}
html.kino-otkryto body{position:fixed;left:0;right:0;width:100%}
html.kino-otkryto .napisat{opacity:0;pointer-events:none}
@media(max-width:760px){
 .kino-krest{width:42px;height:42px}
 .kino-youtube{font-size:12px;padding:7px 12px}
}
@media(prefers-reduced-motion:reduce){
 .yt img,.yt-melkaya{transition:none}
 .kino-okno{animation:none}
}

/* ── проигрыватель детали 11: три песни Live и кусок концерта ── */
.v-processe{margin:clamp(24px,3.5vh,36px) 0 0;font-size:13px;letter-spacing:.1em;
 text-transform:uppercase;color:rgba(var(--tekst-rgb),.62)}
.pesni{margin-top:clamp(12px,2vh,18px)}
.pesnya.nomernaya .igra,.pesnya.kusok .igra{grid-column:auto}
.pesnya .live{display:inline-block;margin-left:10px;padding:2px 7px;border-radius:3px;
 border:1px solid rgba(var(--akcent-rgb),.55);color:var(--akcent);
 font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
.pesnya.igraet .zhivoe-imya{color:var(--akcent)}
.pesnya .hod i{width:0}
@media(max-width:760px){.pesnya .live{margin-left:8px;padding:1px 5px;font-size:9.5px}}
.mir-fon .f1{background-image:url("/narisovano/gradient-2-horosho.webp")}.mir-fon .f2{background-image:url("/narisovano/gradient-1-horosho.webp")}.mir-fon .f3{background-image:url("/narisovano/gradient-3-horosho.webp")}.mir-fon .s0{top:6%;left:18%;width:62vw;height:62vw;background:radial-gradient(closest-side,rgba(123,59,232,0.2),transparent 72%);animation-duration:78s}.mir-fon .s1{top:26%;left:84%;width:54vw;height:54vw;background:radial-gradient(closest-side,rgba(226,75,200,0.17),transparent 72%);animation-duration:96s}.mir-fon .s2{top:74%;left:38%;width:58vw;height:58vw;background:radial-gradient(closest-side,rgba(46,212,212,0.16),transparent 72%);animation-duration:112s}.mir-fon .s3{top:46%;left:22%;width:46vw;height:46vw;background:radial-gradient(closest-side,rgba(242,160,61,0.12),transparent 72%);animation-duration:88s}.mir-fon .s4{top:62%;left:76%;width:66vw;height:66vw;background:radial-gradient(closest-side,rgba(46,107,232,0.14),transparent 72%);animation-duration:120s}