/* ============================================================
   НОВАЯ ГЛАВНАЯ earlybird.su — /home-v2/ (ТЗ v2 от 16.10.2026).
   Чистый HTML/CSS без экспорта Tilda. Вид — как у живой главной:
   те же шрифты (ONDER — заголовки, Actay — текст, Actay Wide — имена
   и подписи), та же фотография толпы и стеклянная словомарка в герое.

   ── ЦВЕТ ПО ВЫСОТЕ СТРАНИЦЫ ──
   Концепция брендбука «рассвет»: вверху синее, ниже по странице все
   больше оранжевого. Поэтому заголовки верхних секций залиты переходом
   белый → голубой (--grad-dawn), нижних — белый → оранжевый (--grad-dusk).

   ── ПОЧЕМУ ИМЕНА НЕ В ONDER ──
   У ONDER около 1,9 em на букву: «АВТОМАТИЧЕСКАЯ» — 27 em, «THRILL PILL» —
   15 em. В карточке шириной 155 px на телефоне такие слова пришлось бы
   набрать кеглем 6–10 px. ONDER держим для заголовков секций, героя и
   цифр, где ширину можно отдать целиком; имена, названия и пункты — в
   Actay Wide, он тоже из фирменного набора (css/eb-brand-fonts.css).

   ── ИНТЕРЛИНЬЯЖ ONDER — 1.7 ──
   Метрики шрифта: высота прописных 1,172 em, «Й» с бреве — 1,508 em,
   хвост «Ф» уходит на 0,067 em вниз. При 1.5 строки касаются друг друга,
   поэтому все многострочные надписи ONDER стоят на 1.7.
   ============================================================ */

@font-face{font-family:'Onder';src:url('../fonts/ONDER-Regular.woff2') format('woff2'),url('../fonts/ONDER-REGULAR.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Actay';src:url('../fonts/Actay-Regular.woff2') format('woff2'),url('../fonts/Actay-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Actay Wide';src:url('../fonts/ActayWide-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --vw:1vw;                           /* в зуме секций от 1200 — 12 px, см. «МАСШТАБ» */
  --bg:#000;
  --surface:#060709;
  --white:#fff;
  --muted:rgba(255,255,255,.55);
  --soft:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.55);
  --peach:#FD9F67;
  --glow:169,218,247;                 /* #A9DAF7 — голубой ореол кнопок сайта */
  --grad-dawn:linear-gradient(100deg,#fff 0%,#fff 35%,#A4E0FB 62%,#3E7DD9 100%);
  --grad-dusk:linear-gradient(100deg,#fff 0%,#fff 35%,#FFB287 60%,#F0561B 100%);
  --grad-cta:linear-gradient(160deg,#FFB287 0%,#FD9F67 40%,#FD7731 75%,#F0561B 100%);

  --f-display:'Onder','TexGyreHeros',Arial,sans-serif;
  --f-text:'Actay','TexGyreHeros',Arial,sans-serif;
  --f-wide:'Actay Wide','Actay',Arial,sans-serif;

  --pad:clamp(20px,calc(4 * var(--vw)),64px);
  --maxw:1200px;
  --sec:clamp(72px,calc(9 * var(--vw)),136px);        /* вертикальный ритм секций */
  --hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--f-text);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid #A9DAF7;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:24px;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}

/* Заголовок секции. ONDER сам рисует прописные — text-transform не нужен,
   а «early bird» в таких заголовках не пишем вовсе (бренд только строчными).
   Кегль на телефоне — 5vw: самое длинное слово заголовков, «ФЕСТИВАЛИ»,
   это 17,1 em, и при 375 px оно встает в 321 px из 335 доступных.
   Компьютер — до 32 px (Миша 22.10: «все заголовки чуть меньше», самый
   длинный, «Артисты, с которыми мы работали», — в две строки). */
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(16px,calc(5 * var(--vw)),32px);line-height:1.7;
  word-spacing:.2em;background:var(--grad-dawn);-webkit-background-clip:text;background-clip:text;color:transparent;
  max-width:36em}
.h2--dusk{background-image:var(--grad-dusk)}
.lead{margin-top:clamp(14px,calc(1.6 * var(--vw)),22px);font-size:clamp(16px,calc(1.4 * var(--vw)),19px);color:var(--soft);max-width:36em}
.sec-head{margin-bottom:clamp(32px,calc(4 * var(--vw)),56px)}
.lead-link{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .2s ease}
.lead-link:hover{border-bottom-color:var(--peach)}

/* ── КНОПКИ ── пилюли как на живом сайте.
   Оптический центр: flex ставит в середину строку целиком, а у Actay
   над прописными запас больше, чем под строкой, — надпись казалась
   выше середины на ~2 px. Отступ сверху .26em (снизу 0) опускает ее на
   .13em: середина между линией прописных и базовой линией встает ровно
   в центр кнопки. То же у «Билеты» в афише (.ev-go). */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.26em 28px 0;
  border-radius:999px;border:1px solid transparent;font-family:var(--f-text);font-size:15px;line-height:1.2;
  color:#fff;text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:box-shadow .25s ease-in-out,border-color .25s ease-in-out,transform .12s ease-out}
.btn:active{transform:scale(.97)}
/* оранжевая кнопка в покое без ореола, свечение плавно появляется только
   на наведение и фокус — тени той же формы, поэтому переход ровный */
/* Текст черный: белый на персиковом крае градиента давал 1,9:1, черный —
   от 5,8:1 (темный край #F0561B) до 12:1. Решение 16.10.2026, пока только
   на /home-v2/ — на живом сайте и в мерче кнопки еще с белым текстом. */
/* Ореол без сдвига, ровно со всех сторон — как синий у контурных кнопок
   (8 + 20 px); раньше второй слой стоял на 10 px ниже и свет уходил вниз. */
.btn-cta{background:var(--grad-cta);border:0;color:#000;box-shadow:0 0 0 rgba(253,136,80,0),0 0 0 rgba(253,119,49,0)}
.btn-cta:hover,.btn-cta:focus-visible{box-shadow:0 0 8px rgba(253,136,80,.55),0 0 20px rgba(253,119,49,.4)}
.btn-line{background:transparent;border-color:var(--line-strong)}
.btn-line:hover{border-color:#fff;box-shadow:0 0 8px rgba(var(--glow),.5),0 0 20px rgba(var(--glow),.28)}
.btn-dark{background:#000;border-color:rgba(255,255,255,.25)}
.btn-dark:hover{box-shadow:0 0 8px rgba(var(--glow),.5),0 0 20px rgba(var(--glow),.28)}
.btn-sm{min-height:40px;padding:.26em 18px 0;font-size:14px}
/* Надписи кнопок — Actay Wide Bold: у Actay в фирменном наборе есть
   только обычное начертание, а тонкая строка на оранжевом и на контуре
   читалась плохо. Ширина кнопок от этого растет на 0–9 %. */
.btn,.ev-go{font-family:var(--f-wide);font-weight:700}

/* Подсказка «адрес скопирован» (js/home-v2.js) — внизу по центру, над
   меню и шапкой; появляется на 4 секунды после клика по почтовой ссылке. */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:300;
  width:max-content;max-width:calc(calc(100 * var(--vw)) - 32px);padding:14px 22px;border:1px solid var(--line);border-radius:16px;
  background:#18191b;color:#fff;font-size:14px;line-height:1.4;text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.6);pointer-events:none;
  opacity:0;transform:translate(-50%,12px);transition:opacity .25s ease,transform .35s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast b{font-weight:400;color:var(--peach)}
.toast span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .2s linear;transform:translate(-50%,0)}}

/* «или напишите на …» — общая подпись под кнопками */
.mailnote{margin-top:14px;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
.mailnote a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.mailnote a:hover{border-bottom-color:#fff}

/* Уголки-рамка: тот же svg, что по всему сайту (17×17, скругленный угол).
   Файл задан в ориентации левого верхнего угла, остальные доворачиваем. */
.corners{position:relative}
.corners>i{position:absolute;width:17px;height:17px;pointer-events:none;
  background:url(../images/tild3462-3634-4232-b931-303739313530__photo.svg) no-repeat center/100% 100%}
.corners>i:nth-child(1){top:0;left:0}
.corners>i:nth-child(2){top:0;right:0;transform:rotate(90deg)}
.corners>i:nth-child(3){bottom:0;left:0;transform:rotate(-90deg)}
.corners>i:nth-child(4){bottom:0;right:0;transform:rotate(180deg)}

/* ============================================================
   ШАПКА
   ============================================================ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);will-change:background-color;
  display:flex;align-items:center;gap:16px;padding:0 clamp(16px,calc(2.6 * var(--vw)),32px);
  transition:background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease;border-bottom:1px solid transparent}
.hdr.is-solid{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:rgba(255,255,255,.08)}
.hdr-mark{display:block;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  transition:box-shadow .25s ease-in-out}
.hdr-mark:hover{box-shadow:0 0 8px rgba(var(--glow),.8),0 0 18px rgba(var(--glow),.42)}
.hdr-mark svg{width:100%;height:100%}
.hdr-nav{display:none;margin-left:auto;gap:clamp(20px,calc(2.4 * var(--vw)),36px)}
.hdr-nav a{font-size:15px;text-decoration:none;color:var(--soft);padding:8px 0;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.hdr-nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.hdr-cta{margin-left:auto}
/* Бургер — SVG живой шапки (#ebBurgerTop): кольцо и линии в самом
   рисунке. В открытом меню линии гаснут, а крестик проявляется — только
   opacity, без трансформаций (на маке поворот путей внутри SVG ломался). */
.hdr-burger{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.hdr-burger svg{display:block;width:36px;height:36px;transition:filter .2s ease,transform .2s ease}
.hdr-burger:hover svg,.hdr-burger:focus-visible svg{filter:drop-shadow(0 0 4px rgba(var(--glow),.65)) drop-shadow(0 0 12px rgba(var(--glow),.45)) drop-shadow(0 0 26px rgba(var(--glow),.25))}
.hdr-burger:active svg{transform:scale(.94)}
.hdr-burger .bl,.hdr-burger .bx{transition:opacity .18s linear}
.hdr-burger .bx{opacity:0}
.menu-open .hdr-burger .bl{opacity:0}
.menu-open .hdr-burger .bx{opacity:1}
/* Телефон и планшет — размеры шапки живой главной (css/eb-header.css):
   до 640 полоса 72, знак 40 в 24 px от края, круг 44 в 22 px от края; 641–959 —
   полоса 68, поля 32, знак 34, круг 36. Кнопка заявки — высотой с круг. */
@media (max-width:959px){
  :root{--hdr:68px}
  .hdr{gap:12px;padding:0 32px}
  .hdr-mark{width:34px;height:34px}
  .hdr-burger{min-width:44px;min-height:44px;margin:-4px -4px -4px auto}
  .hdr-cta.btn-sm{min-height:36px;padding-left:18px;padding-right:18px;font-size:14px}
}
@media (max-width:640px){
  :root{--hdr:72px}
  .hdr{gap:10px;padding:0 22px 0 24px}
  .hdr-mark{width:40px;height:40px}
  .hdr-burger svg{width:44px;height:44px}
  .hdr-burger{min-width:52px;min-height:52px;margin:-4px -4px -4px auto}
  .hdr-cta.btn-sm{min-height:44px;padding-left:18px;padding-right:18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.hdr-burger svg{transition:none}.hdr-burger:active svg{transform:none}}
/* Компьютер — пропорции шапки живой главной (Tilda rec2001050241): она
   масштабируется с окном в единицах сетки 1200. Полоса 56, знак 32,
   иконки 34, поля 32 единицы — на 1440 это 66 / 38 / 40 / 38 px. Кнопка
   заявки высотой с иконку, ссылки 13 единиц (15.6 px на 1440).
   Как и на живом, масштаб только от 1200: уже 1200 живой сайт ставит
   шапку с постоянными размерами (полоса 68, знак 34, иконки 36). */
@media (min-width:960px) and (max-width:1199px){
  :root{--hdr:68px}
  .hdr{padding:0 32px}
  .hdr-mark{width:34px;height:34px}
  .hdr-cta.btn-sm{min-height:36px}
}
@media (min-width:1200px){
  :root{--hu:calc(calc(100 * var(--vw)) / 1200);--hdr:calc(56 * var(--hu))}
  .hdr{padding:0 calc(32 * var(--hu));gap:calc(16 * var(--hu))}
  .hdr-mark{width:calc(32 * var(--hu));height:calc(32 * var(--hu))}
  .hdr-nav{gap:calc(30 * var(--hu))}
  .hdr-nav a{font-size:calc(13 * var(--hu))}
  .hdr-cta.btn-sm{min-height:calc(34 * var(--hu));padding-left:calc(18 * var(--hu));padding-right:calc(18 * var(--hu));font-size:calc(12.5 * var(--hu))}
}
@media (min-width:960px){
  .hdr-nav{display:flex}
  .hdr-cta{margin-left:clamp(12px,calc(2 * var(--vw)),28px)}
  .hdr-burger{display:none}
}
/* фон сплошной: сквозь полупрозрачный просвечивал первый экран */
.menu{position:fixed;inset:0;z-index:40;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:var(--hdr) 20px 40px}
/* Появление плавное: фон проявляется, пункты поднимаются по очереди.
   visibility с задержкой убирает закрытое меню из табуляции. */
.menu{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.menu>a,.menu .mailnote{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .4s var(--ease)}
.menu.is-open>a,.menu.is-open .mailnote{opacity:1;transform:none}
.menu.is-open>:nth-child(2){transition-delay:40ms}.menu.is-open>:nth-child(3){transition-delay:80ms}
.menu.is-open>:nth-child(4){transition-delay:120ms}.menu.is-open>:nth-child(5){transition-delay:160ms}.menu.is-open>:nth-child(6){transition-delay:200ms}.menu.is-open>:nth-child(7){transition-delay:240ms}
@media (min-width:960px){.menu{display:none}}
@media (prefers-reduced-motion:reduce){.menu,.menu>a,.menu .mailnote{transition:none}}
/* только пункты меню, не ссылка с почтой внутри подписи: раньше правило
   «.menu a» раздувало адрес до ONDER 24 px и он вылезал за экран.
   размер и отступы пунктов — как в меню живой главной (#ebMenu a) */
.menu>a{font-family:var(--f-display);font-size:clamp(17px,calc(5.4 * var(--vw)),22px);line-height:normal;text-align:center;word-spacing:.2em;text-decoration:none;
  padding:12px;transition:color .2s ease}
.menu>a:hover,.menu>a:focus-visible{color:var(--peach)}
.menu .mailnote{margin-top:28px;font-size:14px;text-align:center}
/* Безопасная центровка: если пункты не помещаются по высоте (320×568 —
   семь пунктов и перенос «Магазин мерча»), меню прокручивается, а не
   залезает под шапку. auto-поля центрируют, пока место есть. */
.menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}
.menu>:first-child{margin-top:auto}
.menu>:last-child{margin-bottom:auto}
@media (max-height:620px){.menu>a{padding:7px 12px}.menu .mailnote{margin-top:18px}}

/* ============================================================
   ГЕРОЙ — композиция живого сайта: фото толпы, словомарка в два слоя
   (стекло + пульсирующий свет), подпись по краям, лид в уголках, кнопки.
   Правка 16.10: кнопки и подпись «или напишите…» стоят одной группой по
   центру и подняты от нижнего края — раньше подпись висела под левой
   кнопкой и почти касалась края экрана.
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,calc(2.4 * var(--vw)),32px);padding:calc(var(--hdr) + clamp(12px,4vh,48px)) 20px clamp(56px,10vh,120px);
  overflow:hidden;text-align:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;background:#000 url(../img/home-v2/hero.webp?v=2) center 62%/cover no-repeat}
@media (max-width:840px){.hero-bg{background-image:url(../img/home-v2/hero-840.webp?v=2)}}
/* синее сценическое свечение сверху и уход в черный снизу, как на десктопе */
.hero-bg::before{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 12%,rgba(46,124,246,.55) 0%,rgba(38,97,180,.28) 45%,rgba(0,0,0,0) 75%)}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 75%,#000 100%)}
.wm{position:relative;width:min(calc(92 * var(--vw)),860px)}
.wm-glass{width:100%;filter:drop-shadow(0 0 clamp(5px,calc(1 * var(--vw)),12px) rgba(255,255,255,.45))
  drop-shadow(0 0 clamp(14px,calc(2.8 * var(--vw)),34px) rgba(255,255,255,.3)) drop-shadow(0 0 clamp(32px,calc(6.5 * var(--vw)),78px) rgba(255,255,255,.16))}
.wm-light{position:absolute;inset:0;width:100%;pointer-events:none;
  filter:drop-shadow(0 0 clamp(8px,calc(1.5 * var(--vw)),18px) rgba(255,255,255,.85)) drop-shadow(0 0 clamp(20px,calc(4 * var(--vw)),48px) rgba(255,255,255,.6))
  drop-shadow(0 0 clamp(46px,calc(9.2 * var(--vw)),110px) rgba(255,255,255,.35));
  animation:glow 5.5s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wm-light{animation:none;opacity:.7}}

/* «агентство всего остального» — внутри h1, под словомаркой, как в макете
   айдентики: строка стоит посередине между низом букв (82,9 % высоты знака)
   и низом хвоста «y» (100 %), «агентство» начинается под «a» (9,5 % ширины), «всего
   остального» заканчивается под «r» (90,5 %), между ними — хвост «y»
   (35,5–41,5 %). Кегль — 1,32 % ширины знака, тогда прописные ONDER
   выходят 5,3 % его высоты, как на макете. Знак задает .wm, поэтому
   размеры в единицах контейнера (cqw) и растут вместе со знаком.
   Уже ~760 px кегль упал бы ниже 9 px — там подпись стоит одной строкой
   под знаком (правило ниже). */
.hero-sub{display:flex;justify-content:space-between;gap:24px;width:100%;margin-top:calc(-1*clamp(4px,calc(1 * var(--vw)),14px));
  font-family:var(--f-display);font-weight:400;font-size:clamp(11px,calc(1.15 * var(--vw)),16px);line-height:1.5;letter-spacing:.14em;word-spacing:.2em;white-space:nowrap}
/* Уже 760 px — одной строкой сразу под знаком: «агентство» у левого края,
   «всего остального» у правого, как на десктопе, только ниже хвоста «y».
   Вплотную к хвосту, как на десктопе, кегль вышел бы ~4,5 px. Обе части —
   44,7 em ONDER при разрядке .05em, поэтому 2,12 % ширины знака (7,3 px
   на 375), но не крупнее 13 px. */
.wm{container-type:inline-size}
@media (max-width:759px){
  .hero-sub{flex-direction:row;justify-content:space-between;gap:0;margin-top:4px;font-size:min(2.12cqw,13px);letter-spacing:.05em}
}
@media (min-width:760px){
  .hero-sub{position:absolute;left:0;right:0;top:89.6%;display:block;margin:0;height:0;
    font-size:1.32cqw;line-height:1;letter-spacing:.1em}
  .hero-sub>span{position:absolute;top:0}
  .hero-sub>span:first-child{left:9.5%}
  .hero-sub>span:last-child{right:9.5%}
}
.hero-lead{padding:clamp(16px,calc(1.8 * var(--vw)),24px) clamp(22px,calc(2.6 * var(--vw)),34px);max-width:min(calc(88 * var(--vw)),460px)}
.hero-lead p{font-size:clamp(14px,calc(1.3 * var(--vw)),17px);line-height:1.55}
.hero-lead .nw{white-space:nowrap}   /* перенос только после «музыку,» */
/* «мы — ваш мерч, концерты и фестивали» — 283 px при 14 px: уже 375 в рамку
   не встает, там вторая строка переносится (третья строка лучше вылета за
   уголки). Перенос после «музыку,» — <br>, «мы — ваш мерч» склеены &nbsp;. */
@media (max-width:374px){.hero-lead .nw{white-space:normal}}
.hero-cta{display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px}
.hero-btns{display:flex;flex-direction:column;gap:12px;width:100%}
@media (min-width:560px){
  .hero-cta{max-width:none;width:auto}
  .hero-btns{flex-direction:row;justify-content:center;gap:clamp(12px,calc(1.4 * var(--vw)),20px)}
  .hero-btns .btn{min-width:240px}
}
/* Указатель прокрутки (20.10, просьба пользователя). Не прыгающая стрелка,
   а свет: по тонкой линии стекает огонек — тот же белый свет, что пульсирует
   в словомарке. Наконечник — скругленный уголок, как у рамки лида.
   Линия и наконечник — один svg: повернутая css-рамка в 1 px на дробных
   координатах рисовалась неровно. Огонек гаснет, не доходя до наконечника,
   иначе его свечение будто раздувает уголок. Ведет к афише. */
.hero-scroll{position:absolute;left:0;right:0;margin:0 auto;bottom:clamp(12px,3vh,36px);width:44px;height:60px;
  opacity:.8;transition:opacity .2s ease}
.hero-scroll:hover{opacity:1}
.hero-scroll:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px;opacity:1}
.hero-scroll svg{position:absolute;left:50%;bottom:4px;margin-left:-6.5px;display:block;overflow:visible}
.hero-scroll path{fill:none;stroke-width:1}
.hero-scroll-dot{position:absolute;left:50%;top:4px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.85),0 0 16px 3px rgba(255,255,255,.35);opacity:0;
  animation:heroDrip 2.6s cubic-bezier(.55,0,.45,1) infinite}
@keyframes heroDrip{0%{transform:translateY(-8px);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-scroll-dot{animation:none}}
/* До 960 первый экран по высоте содержимого и афиша видна сразу (правило ниже) —
   указатель там лишний и жмется к рамке лида. */
@media (max-width:959px){.hero-scroll{display:none}}

/* От 1200 первый экран растет вместе с окном, как на живой главной
   (rec2032245491 в сетке 1200): словомарка 862 единицы, подпись 14,
   блок в уголках 378 единиц с текстом 14/18, уголки 17, кнопки 220×41
   с текстом 13. Раньше здесь стояли потолки в пикселях, и на широком
   экране все выглядело мельче, чем на рабочем сайте. */
@media (min-width:1200px){
  .hero{gap:calc(26 * var(--hu))}
  .wm{width:calc(862 * var(--hu))}
  .hero-lead{max-width:calc(378 * var(--hu));padding:calc(16 * var(--hu)) calc(37 * var(--hu))}
  .hero-lead p{font-size:calc(14 * var(--hu));line-height:calc(18 * var(--hu))}
  .hero-lead>i{width:calc(17 * var(--hu));height:calc(17 * var(--hu))}
  .hero-btns{gap:calc(16 * var(--hu))}
  .hero-btns .btn{min-width:calc(220 * var(--hu));min-height:calc(41 * var(--hu));font-size:calc(13 * var(--hu));
    padding-left:calc(24 * var(--hu));padding-right:calc(24 * var(--hu))}
  .hero-cta .mailnote{margin-top:calc(12 * var(--hu));font-size:calc(11 * var(--hu))}
}

/* ============================================================
   АФИША — сразу под героем. Прошедшие даты убирает js/home-v2.js,
   свернутый вид — три ближайших и кнопка «Показать все».
   ============================================================ */
.afisha{padding-top:clamp(56px,calc(7 * var(--vw)),104px)}
/* Телефон и планшет: первый экран по высоте содержимого, а не на весь
   экран. На высоких телефонах (430×932) 100svh с центровкой давал пустоту
   сверху и снизу, а афиша уходила за край; теперь ее заголовок виден сразу
   под кнопками и зовет листать дальше. */
@media (max-width:959px){
  .hero{min-height:0;padding-top:calc(var(--hdr) + 72px);padding-bottom:64px}
  .afisha{padding-top:40px}
}
/* низкие экраны (320×568, 375×667): верх поменьше, чтобы кнопки и подпись
   с почтой стояли в первом экране целиком */
@media (max-width:959px) and (max-height:700px){.hero{padding-top:calc(var(--hdr) + 36px)}}
/* Кнопка «Билеты» — общая для строк афиши и плиток фестивалей */
.ev-go{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.26em 20px 0;font-size:14px;color:#fff;
  border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap;transition:border-color .2s ease,box-shadow .2s ease}
/* Афиша, третья версия (Миша 22.10: карточки «слишком сложно, не
   универсально, может быть 20 артистов»). Слева список строк одного вида:
   дата, артист, место, кнопка. Так же читается и при трех строках, и при
   двадцати. Тур — та же строка с диапазоном дат и числом городов, города
   раскрываются под ней. Справа фестивали в своем фирменном стиле. */
.evgs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,calc(3 * var(--vw)),44px);align-items:stretch}
/* Низ списка концертов и низ плиток фестивалей — на одной линии (Миша 22.10)
   при любом числе строк. Плитки фестивалей выше списка — лишнюю высоту
   поровну делят строки. Список выше плиток (много артистов) — js/home-v2.js
   дает колонке фестивалей min-height свернутого списка, и плитки тянутся,
   как афиши: имя сверху, дата и кнопка внизу. Раскрытый тур или «Ещё
   концерты» высоту плиток не меняют — они держат свернутую. */
.evsec--conc{display:flex;flex-direction:column}
.evsec--fest{align-self:start;display:flex;flex-direction:column}
.evsec--fest .fests{flex:1;grid-auto-rows:1fr}
.fest a{height:100%;grid-template-rows:1fr auto}
.fest-n{align-self:start}
.evl{flex:1;display:flex;flex-direction:column}
.evr{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.evr>.evr-row{flex:1}
.evsec-h{margin:0 0 12px;font-family:var(--f-text);font-weight:400;font-size:clamp(14px,calc(1.2 * var(--vw)),17px);line-height:1.3;color:var(--soft)}
.evl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.evr{border-bottom:1px solid var(--line)}
.evr.is-more{display:none}
.evl.is-all .evr.is-more{display:flex}
.evr-row{--dw:9.8em;display:grid;grid-template-columns:var(--dw) minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;
  column-gap:clamp(14px,calc(1.6 * var(--vw)),24px);padding:clamp(14px,calc(1.4 * var(--vw)),18px) 6px;
  color:inherit;text-decoration:none;cursor:pointer;transition:background-color .2s ease}
summary.evr-row{list-style:none}
summary.evr-row::-webkit-details-marker{display:none}
.evr-row:hover{background:rgba(255,255,255,.04)}
.evr-row:hover .ev-go,.evr-dates a:hover .ev-go{border-color:#fff;box-shadow:0 0 8px rgba(var(--glow),.5)}
.evr-row:focus-visible,.evr-dates a:focus-visible,.fest a:focus-visible,.evl-more:focus-visible{outline:2px solid #fff;outline-offset:2px}
.evr-d{font-size:clamp(15px,calc(1.3 * var(--vw)),18px);line-height:1.3;color:var(--peach);white-space:nowrap}
.evr-y{display:block;font-size:.8em;color:var(--muted)}
.evr-n{min-width:0;font-family:var(--f-display);font-size:clamp(15px,calc(1.4 * var(--vw)),19px);line-height:1.5;word-spacing:.2em}
.evr-p{min-width:0;font-size:clamp(14px,calc(1.15 * var(--vw)),16px);line-height:1.4;color:var(--muted)}
.ev-go-o{display:none}
details[open] .ev-go-c{display:none}
details[open] .ev-go-o{display:inline}
details[open]>.evr-row{background:rgba(255,255,255,.03)}
/* Раскрытие тура — как было у раскрытия всей афиши (20.10): высота плавно
   растет за .5 с, даты проявляются сверху вниз с шагом 45 мс. Высоту ведет
   js/home-v2.js (класс .is-open и инлайн-height у details); без скрипта
   details раскрывается сам, сразу. */
.evl.js-anim details{overflow:hidden;transition:height .5s var(--ease)}
.evl.js-anim .evr-dates .ev{opacity:0;transform:translateY(-14px);transition:opacity .3s ease,transform .4s var(--ease)}
.evl.js-anim details.is-open .evr-dates .ev{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms + 80ms)}
@media (prefers-reduced-motion:reduce){
  .evl.js-anim details,.evl.js-anim .evr-dates .ev{transition:none}
}
/* кнопка одной ширины во всех строках, иначе короткое «Даты» сдвигает колонку места */
.evr-row>.ev-go{min-width:8.6em}
/* даты тура — под строкой, двумя колонками от начала колонки артиста */
.evr-dates{list-style:none;margin:0;padding:4px 6px 14px calc(9.8em + clamp(20px,calc(2.2 * var(--vw)),30px));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,calc(1.6 * var(--vw)),24px);background:rgba(255,255,255,.03)}
.evr-dates .ev{border-top:1px solid var(--line)}
.evr-dates a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d go" "g go";align-items:center;gap:0 12px;padding:9px 0;color:inherit;text-decoration:none}
.evr-dates .ev-d{grid-area:d}
.evr-dates .ev-g{grid-area:g}
.evr-dates .ev-go{grid-area:go}
.evr-dates .ev-d{font-size:15px;line-height:1.3;color:var(--peach);white-space:nowrap}
.evr-dates .ev-g{min-width:0;font-size:14px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evr-dates .ev-g b{font-weight:400;color:#fff}
.evr-dates .ev-go{min-height:32px;padding-left:14px;padding-right:14px;font-size:13px}
.evl-more{margin-top:16px;min-height:40px;padding:.26em 20px 0;font:700 14px/1 var(--f-wide);color:#fff;background:none;
  border:1px solid var(--line-strong);border-radius:999px;cursor:pointer}
.evl-more:hover{border-color:#fff}
/* Фестивали: имя — шрифтом и цветом самого феста. Сны — Unbounded капсом,
   «сновидений» облачным градиентом, как в заголовке dream-fest-2026; Диво —
   логотип-надпись с сайта феста, розовый #FF377B. Подложка — едва заметный
   цвет феста в углу, плитка остается темной, как вся страница. */
/* файл — в /fonts/: внутри /dream-fest-2026/ сервер на любой путь отдает HTML
   страницы феста, шрифт оттуда не грузится. Подмножество: латиница и кириллица. */
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-700-subset.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.fests{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fest a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n n" "m go";gap:14px 16px;align-items:end;
  padding:clamp(16px,calc(1.6 * var(--vw)),22px);border:1px solid var(--line);border-radius:16px;
  color:#fff;text-decoration:none;transition:border-color .2s ease}
.fest a:hover{border-color:var(--line-strong)}
.fest a:hover .ev-go{border-color:#fff;box-shadow:0 0 8px rgba(var(--glow),.5)}
.fest-n{grid-area:n;min-height:2.2em;display:flex;align-items:flex-start}
.fest-m{grid-area:m;display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.4;color:var(--muted)}
.fest-d{color:#fff}
.fest .ev-go{grid-area:go}
.fest-st{position:absolute;top:clamp(16px,calc(1.6 * var(--vw)),22px);right:clamp(16px,calc(1.6 * var(--vw)),22px);padding:1px 9px 0;
  border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:1.6;color:var(--soft)}
.fest--dream a{background:radial-gradient(90% 120% at 100% 0%,rgba(59,20,104,.55),rgba(22,5,48,0) 70%)}
.fest--dream .fest-n{display:block;padding-right:5.5em;font-family:'Unbounded',var(--f-wide);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,calc(1.55 * var(--vw)),21px);line-height:1.1;letter-spacing:-.01em}
.fest--dream .fest-n span{background:linear-gradient(135deg,#FFC5E8 0%,#F09AD8 40%,#C9A0F0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fest--divo a{background:radial-gradient(90% 120% at 100% 0%,rgba(0,116,214,.3),rgba(0,116,214,0) 70%)}
.fest--divo .fest-n{align-items:center}
.fest-logo{display:block;width:auto;height:clamp(20px,calc(1.9 * var(--vw)),26px);fill:#FF377B}
@media (max-width:959px){
  .evgs{grid-template-columns:minmax(0,1fr);gap:28px}
  .evsec--fest{align-self:auto;min-height:0!important}
  .evsec--fest .fests{grid-auto-rows:auto}
  .fests{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Телефон: строка в три этажа (дата, артист, место), кнопка справа */
@media (max-width:719px){
  .afisha .sec-head{margin-bottom:12px}
  .evgs{gap:20px}
  .evsec-h{margin-bottom:6px;font-size:13px}
  .evr-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d go" "n go" "p go";row-gap:1px;column-gap:12px;padding:10px 2px}
  .evr-d{grid-area:d;font-size:14px}
  .evr-y{display:inline;font-size:1em}
  .evr-n{grid-area:n;font-size:15px;line-height:1.45}
  .evr-p{grid-area:p;font-size:13px}
  .evr-row>.ev-go{grid-area:go;min-width:7.2em;min-height:34px;padding-left:14px;padding-right:14px;font-size:13px}
  .evr-dates{grid-template-columns:minmax(0,1fr);padding:0 2px 10px}
  .evr-dates a{padding:6px 0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"d g go";gap:10px}
  .evr-dates .ev-d{font-size:14px}
  .evr-dates .ev-g{font-size:13px;white-space:normal}
  .fests{grid-template-columns:minmax(0,1fr);gap:8px}
  .fest a{gap:8px 12px;padding:12px 14px;border-radius:14px}
  .fest-n{min-height:0}
  .fest-st{top:12px;right:14px}
  .fest-m{font-size:13px}
  .fest a{grid-template-areas:"n n" "m m" "go go";justify-items:start}
  .fest .ev-go{min-height:34px;padding-left:14px;padding-right:14px;font-size:13px}
}
.ev-empty{padding:24px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(15px,calc(1.3 * var(--vw)),17px);color:var(--soft)}
.ev-empty a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.ev-empty a:hover{border-bottom-color:#fff}

/* ============================================================
   МЕРЧ — главный блок
   ============================================================ */

/* Витрина: товар каждого магазина на его родной плашке — те же фото,
   что на /merch/. Двенадцатая плитка — «Все магазины», она замыкает сетку
   4×3 и 3×4 без пустой ячейки. */
/* под заголовком мерча сразу магазины (Миша 22.10: «слишком много места») */
#merch .sec-head{margin-bottom:clamp(14px,calc(1.6 * var(--vw)),22px)}
.shops{margin-top:0}
.shops-h{font-family:var(--f-wide);font-weight:700;font-size:clamp(17px,calc(1.6 * var(--vw)),21px);margin-bottom:20px}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,calc(1.2 * var(--vw)),16px)}
@media (max-width:959px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shop{display:flex;flex-direction:column;text-decoration:none;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:border-color .2s ease,box-shadow .25s ease}
.shop:hover{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.6)}
.shop-ph{aspect-ratio:1/1;background:var(--bg-plate,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-ph img{width:86%;height:86%;object-fit:contain;transition:transform .35s var(--ease)}
/* фото артистов: кадр прижат к верху, а увеличение на наведении идет от
   нижнего края — иначе 4 % зума срезали макушки (у ALISHA и KEER голова
   и так у самой кромки кадра) */
.shop-ph--cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 100%}
.shop:hover .shop-ph img{transform:scale(1.04)}
.shop-n{padding:14px 16px 16px;font-family:var(--f-wide);font-weight:700;font-size:clamp(13px,calc(1.2 * var(--vw)),15px);line-height:1.3}
/* «Все магазины»: знак птички в кольце, свет под стеклом — как словомарка
   в герое. На наведение рамка становится сплошной и светится тем же
   голубым, что кнопки, а знак разгорается. */
.shop--all{align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px;background:transparent;border-style:dashed;border-color:var(--line-strong);
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.shop--all:hover,.shop--all:focus-visible{border-style:solid;border-color:rgba(255,255,255,.85);background:rgba(169,218,247,.04);
  box-shadow:0 0 8px rgba(var(--glow),.5),0 0 22px rgba(var(--glow),.3),inset 0 0 14px rgba(var(--glow),.18)}
.shop-mk{position:relative;display:block;width:42%;max-width:120px;margin-bottom:8px;transition:transform .4s var(--ease)}
.shop-mk img{display:block;width:100%;height:auto}
.shop-mk-l{position:absolute;inset:0;opacity:.45;filter:drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(255,255,255,.35));transition:opacity .4s ease,filter .4s ease}
.shop--all:hover .shop-mk,.shop--all:focus-visible .shop-mk{transform:scale(1.04)}
.shop--all:hover .shop-mk-l,.shop--all:focus-visible .shop-mk-l{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.85)) drop-shadow(0 0 22px rgba(var(--glow),.6))}
@media (prefers-reduced-motion:reduce){.shop--all:hover .shop-mk{transform:none}}
.shop--all .shop-n{padding:0;font-size:clamp(15px,calc(1.5 * var(--vw)),19px)}
.shop--all .shop-sub{font-size:14px;color:var(--muted)}
/* Телефон (Миша 22.10: «8 магазинов на айфоне должно быть видно»): три
   колонки квадратных плиток, как на планшете, — в экран iPhone с панелями
   Safari (390×664) под шапкой входят три ряда, девять магазинов. Фото
   остаются квадратными: горизонтальная обрезка 16:9 срезала лица (KEENDY
   по очки) — пользователь отклонил. Двенадцать плиток — ровно 4 ряда. */
@media (max-width:599px){
  .shops-h{font-size:15px;margin-bottom:10px}
  .shop-grid{gap:8px}
  .shop{border-radius:10px}
  .shop-n{padding:6px 8px 7px;font-size:11px;line-height:1.25;overflow-wrap:anywhere}
  .shop--all{gap:2px;padding:6px}
  .shop-mk{width:38%;margin-bottom:4px}
  .shop--all .shop-n{font-size:11.5px}
  .shop--all .shop-sub{display:none}
}
.merch-cta{margin-top:clamp(40px,calc(5 * var(--vw)),64px);display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:559px){.merch-cta,.final-card .btn,.fest--next .btn{align-self:stretch}.merch-cta .btn{width:100%}}

/* ============================================================
   АРТИСТЫ
   ============================================================ */
.sec-head--c{text-align:center}
.sec-head--c .h2,.sec-head--c .lead{margin-left:auto;margin-right:auto}
/* Список «наведи», как на живой главной (#rec2033539771): имена ONDER по
   центру с номером, на наведение имя теплеет, остальные приглушаются, а
   рядом всплывает фото — нечетные справа, четные слева. На тач-экранах и
   уже 960 фото не показываем (как и раньше) — и не грузим: display:none
   вместе с loading=lazy картинку не запрашивает. */
/* фото у длинных имен выходит за край окна (на 960 — до 1011 px) и давало
   горизонтальную прокрутку; clip режет только по горизонтали и не делает
   секцию прокручиваемой */
#artists{overflow-x:clip}
.alist{list-style:none;margin:0;padding:0;text-align:center}
.alist li{font-family:var(--f-display);font-size:clamp(14px,calc(2.25 * var(--vw)),32px);line-height:1.7;word-spacing:.2em}
.an{position:relative;display:inline-block;transition:color .3s ease}
.an sup{margin-left:.4em;font-family:var(--f-text);font-size:max(10px,.36em);letter-spacing:0;vertical-align:super;color:var(--muted)}
/* фото у имени крупнее (Миша 21.10: «побольше фото, именно размер») */
.an-ph{position:absolute;top:50%;z-index:2;width:clamp(170px,calc(17 * var(--vw)),260px);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);pointer-events:none;opacity:0;
  transform:translateY(-50%) scale(.9) rotate(var(--r));transition:opacity .3s ease,transform .45s var(--ease)}
.an-ph--r{left:calc(100% + 28px);--r:-4deg}
.an-ph--l{right:calc(100% + 28px);--r:4deg}
@media (hover:hover) and (min-width:960px){
  /* приглушаем остальных, только когда курсор именно на имени, а не
     где-то в строке списка: у строки ширина во всю колонку */
  .alist:has(.an:hover) .an{color:rgba(255,255,255,.38)}
  .alist:has(.an:hover) .an:hover{color:var(--peach)}
  .an:hover .an-ph{opacity:1;transform:translateY(-50%) scale(1) rotate(var(--r))}
}
@media (hover:none),(max-width:959px){.an-ph{display:none}}

/* Коллаж артиста (Миша 21.10): на наведение имени вокруг него раскладываются
   3–4 фотокарточки этого артиста — отпечатки с белым полем под разными углами.
   Карточки вылетают из центра имени (--fx/--fy) на свои места (--tx/--ty),
   координаты и углы ставит js/home-v2.js. */
.aboard{position:relative}
.apop{display:none}
.amore{margin-top:clamp(18px,calc(2 * var(--vw)),30px);text-align:center;font-size:clamp(14px,calc(1.3 * var(--vw)),17px);color:var(--muted)}
@media (hover:hover) and (min-width:960px){
  .apop{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
  .apc{position:absolute;left:0;top:0;width:clamp(150px,calc(13 * var(--vw)),230px);margin:0;
    padding:clamp(5px,calc(.5 * var(--vw)),8px) clamp(5px,calc(.5 * var(--vw)),8px) clamp(16px,calc(1.6 * var(--vw)),26px);
    background:#ece9e2;border-radius:2px;box-shadow:0 16px 44px rgba(0,0,0,.7);
    opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(0) scale(.55);
    transition:opacity .2s ease,transform .45s var(--ease);transition-delay:0s}
  .apc img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#cfcac0}
  .apc.is-on{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(1);transition-delay:var(--d,0s)}
  .alist{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){.apc,.apc.is-on{transition:opacity .2s ease;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0))}}
/* мобильный вид блока — как в первой версии */
.artists-m{display:none}
.face-more .face-ph span{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border:1px solid var(--line);border-radius:4px;font-family:var(--f-display);font-size:clamp(15px,5vw,22px);color:var(--soft)}
.face-more .face-n{color:var(--soft);font-family:var(--f-text);font-weight:400}
@media (hover:none),(max-width:959px){
  .alist,.aboard{display:none}
  .artists-m{display:block;max-width:640px;margin:0 auto}
}
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 8px}
.face-ph{position:relative;padding:6px}
.face-ph>i{width:12px;height:12px}
.face-ph img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;filter:grayscale(.15)}
.face-n{margin-top:8px;padding:0 4px;font-family:var(--f-wide);font-weight:700;font-size:12.5px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.names{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);columns:2;column-gap:16px}
.names li{break-inside:avoid;padding:7px 0;font-size:15px;line-height:1.35;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.an-ph{transition:opacity .2s ease;transform:translateY(-50%) rotate(var(--r))}}

/* ============================================================
   БРЕНДЫ — вид как на живой главной (#ebPartners, css/eb-partners.css):
   белые силуэты знаков на черном, 10 знаков по четыре в ряд (состав живой
   главной без The Girl, плюс Hobby Games), на наведение — подъем. «Рифмы и Музыка» —
   надпись Unbounded, как на фестивальном сайте.
   ============================================================ */
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-600-subset.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* --u — единица как у #ebPartners: растет с окном (окно/1200), не меньше 0.62 px */
.brands{--gap:clamp(10px,calc(1.4 * var(--vw)),18px);--u:max(0.62px, calc(100 * var(--vw)) / 1200);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
/* min-width:0 — иначе надпись «Рифмы и Музыка» распирала ячейку и ряд
   из четырех ломался на 3 + 1 */
.brands>li{flex:0 0 calc((100% - 3*var(--gap))/4);min-width:0}
@media (max-width:959px){.brands>li{flex-basis:calc((100% - 2*var(--gap))/3)}}
@media (max-width:519px){.brands>li{flex-basis:calc((100% - var(--gap))/2)}}
/* на узких экранах 100vw/1200 давал 0.62 px — знаки по 18–20 px, их было
   плохо видно; теперь не мельче, чем на десктопе 1200 */
@media (max-width:959px){.brands{--u:max(.9px, calc(100 * var(--vw)) / 1200)}}
@media (max-width:519px){.brands{--u:1px}}
.brand{height:calc(96 * var(--u));min-height:64px;display:flex;align-items:center;justify-content:center;padding:0 clamp(10px,calc(1.4 * var(--vw)),18px);
  text-decoration:none;color:#fff;transition:transform .2s ease,opacity .2s ease}
a.brand:hover,a.brand:focus-visible{transform:translateY(-3px)}
/* высота знака задана, а не ограничена: object-fit держит пропорции и
   выравнивает стену по оптической высоте */
.brand img{display:block;width:100%;height:calc(var(--h,38) * var(--u));object-fit:contain;
  filter:brightness(0) invert(1);transition:filter .25s ease,opacity .25s ease}
/* Все знаки белые, без цвета на наведении (решение 17.10). Цветные файлы
   красятся в белый через filter; у Петербурга2, Детского радио,
   Яндекс Музыки, Task Media и Hobby Games — готовые белые версии
   (.brand--ready): у первых двух цветной файл — плашка, filter залил бы
   ее сплошным белым прямоугольником. */
.brand--ready img{filter:none}
/* потолок 18 px (надпись — 13,2 кегля, ячейка 251 px): на широком экране кегль рос вместе с окном быстрее ячейки,
   и надпись в одну строку вылезала на соседний знак; если не влезает —
   переносится ровно в две строки, а не за край */
.brand-text{font-family:'Unbounded',var(--f-wide);font-weight:600;font-size:clamp(11px,calc(16.2 * var(--u)),18px);line-height:1.3;letter-spacing:.04em;text-align:center;
  max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.brand,.brand img{transition:none}a.brand:hover{transform:none}}
/* Телефон: вместо «стены» — ровные плитки с тонкой рамкой, все знаки
   белыми (наведения на телефоне нет), высота каждого подобрана по
   площади (--hm), чтобы длинные и узкие знаки весили одинаково.
   12 знаков (30.10 добавлены Studio 21 и Диво Остров), «Рифмы и Музыка»
   последней: до 519 px — ровно 2×6 (надпись в две строки), 520–719 — 3×4.
   На нажатие плитка
   чуть сжимается — отклик пальцу вместо десктопного подъема. */
@media (max-width:719px){
  .brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .brands>li{flex:none;min-width:0}
  .brand{height:96px;min-height:0;padding:0 14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;
    background:rgba(255,255,255,.03);-webkit-tap-highlight-color:transparent;transition:transform .15s ease-out,border-color .2s ease,background-color .2s ease}
  .brand img{height:calc(var(--hm,30) * 1px);max-height:60%}
  a.brand:hover,a.brand:focus-visible{transform:none;border-color:rgba(255,255,255,.28)}
  a.brand:active{transform:scale(.97);background:rgba(255,255,255,.06)}
  /* в плитке надпись встает в две строки — в одну не влезает */
  .brand-text{font-size:13px;letter-spacing:.04em}
}
@media (max-width:519px){
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-text{font-size:14px;letter-spacing:.06em}
}

/* ============================================================
   ФИНАЛЬНЫЙ ПРИЗЫВ — две карточки рядом
   ============================================================ */
/* Свечение стоит выше низа секции и гаснет до ее края: с центром у самого
   низа (at 15% 100%) оно обрывалось прямой линией о черный подвал. */
.final{padding-bottom:calc(var(--sec) * .8);
  background:radial-gradient(60% 62% at 16% 56%,rgba(240,86,27,.22) 0%,rgba(240,86,27,.08) 42%,rgba(0,0,0,0) 70%)}
.final-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,calc(1.4 * var(--vw)),18px)}
@media (max-width:719px){.final-grid{grid-template-columns:minmax(0,1fr)}}
.final-card{padding:clamp(22px,calc(3.4 * var(--vw)),48px);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;background:rgba(6,7,9,.7)}
/* «СПОНСОРСТВО?» — 21,6 em: на 375 под текст 291 px, отсюда 3,5vw */
.final-card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(12px,calc(3.5 * var(--vw)),28px);line-height:1.7;word-spacing:.2em}
@media (min-width:720px){.final-card h3{font-size:clamp(14px,calc(1.6 * var(--vw)),24px)}}
.final-card p{color:var(--soft);max-width:28em}
.final-card .btn{margin-top:auto}
/* Один блок связи (20.10): во всю ширину, на компьютере заголовок слева,
   текст и кнопка справа — иначе одинокая карточка в сетке на две колонки. */
.final-grid--one{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
  .final-grid--one .final-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(24px,calc(4 * var(--vw)),64px);row-gap:18px;align-items:start}
  .final-grid--one .final-card h3{grid-row:1/3;align-self:center}
  .final-grid--one .final-card .btn{margin-top:0;justify-self:start}
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
/* Подвал (Миша 22.10, вторая версия). Одна сетка из четырех равных колонок
   на всю ширину: меню, связь, организация концертов, мерч. У каждой колонки
   одна и та же иерархия: серая подпись, первой строкой крупный текст (ссылки
   или название компании), под ним мелкое (реквизиты и документы). Под чертой
   одна строка: копирайт слева, сноска про Meta справа. Пустых зон нет,
   колонки стоят по сетке шапки (32 единицы от края).
   Единица --u как на живой главной: до 1200 от ширины экрана, дальше 1/1200
   окна, как вся шапка. Подписи 8 единиц (не меньше 9 px) #686b6d. */
.ftr{--u:min(1.146px, calc((calc(100 * var(--vw)) - 40px) / 349));padding:calc(48 * var(--u)) 0 calc(24 * var(--u));background:#000}
.ftr-in{max-width:1200px;margin:0 auto;padding:0 20px}
.ftr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(30 * var(--u)) calc(16 * var(--u))}
.ftr-c{min-width:0}
.ftr-t{margin-bottom:calc(10 * var(--u));font-size:max(9px, calc(8 * var(--u)));line-height:calc(10 * var(--u));color:#686b6d}
.ftr-c a{display:block;width:fit-content;font-size:max(12px, calc(12 * var(--u)));line-height:2.1;letter-spacing:-.0167em;color:#fff;text-decoration:none;
  transition:opacity .2s ease}
.ftr-c a:hover{opacity:.6}
/* компания — первой строкой, кеглем ссылок, но не белым: это не ссылка */
.ftr-org{margin:0;font-size:max(12px, calc(12 * var(--u)));line-height:1.35;letter-spacing:-.0167em;color:#b9bcbe}
.ftr-req{margin:calc(5 * var(--u)) 0 0;font-size:max(9px, calc(8 * var(--u)));line-height:calc(11 * var(--u));color:#686b6d}
/* Документы (20.10, юрист) — у каждой компании под ее реквизитами, серым
   светлее подписей (#8b8e91 на черном ≈ 6:1): ссылки обязаны читаться.
   На телефоне зона касания добрана отступами, а не высотой строки. */
.ftr-docs{margin-top:calc(10 * var(--u))}
.ftr-c .ftr-docs a{font-size:max(9px, calc(8 * var(--u)));line-height:calc(11 * var(--u));padding:calc(4 * var(--u)) 0;letter-spacing:0;color:#8b8e91;transition:color .2s ease}
.ftr-c .ftr-docs a:hover{opacity:1;color:#fff}
.ftr-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(4 * var(--u)) calc(24 * var(--u));
  margin-top:calc(32 * var(--u));padding-top:calc(14 * var(--u));border-top:1px solid rgba(255,255,255,.12);
  font-size:max(9px, calc(8 * var(--u)));line-height:calc(11 * var(--u));color:#686b6d}
.ftr-bar p{margin:0}
@media (min-width:760px){
  .ftr-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ftr-c a{line-height:calc(15 * var(--u))}
}
@media (min-width:1200px){
  .ftr{--u:var(--hu);padding:calc(36 * var(--u)) 0 calc(24 * var(--u))}
  .ftr-in{max-width:none;padding:0 calc(32 * var(--u))}
  .ftr-cols{column-gap:calc(32 * var(--u))}
  .ftr-docs{margin-top:calc(12 * var(--u))}
  .ftr-c .ftr-docs a{line-height:max(11px, calc(10 * var(--u)));padding:0;letter-spacing:-.025em}
  .ftr-c .ftr-docs a+a{margin-top:calc(3 * var(--u))}
  .ftr-req,.ftr-bar{line-height:max(11px, calc(10 * var(--u)));letter-spacing:-.025em}
}

/* ============================================================
   ФИРМЕННОЕ СВЕЧЕНИЕ — световые проблески на черном фоне.
   Как в макетах айдентики: мягкие пятна света у краев страницы,
   часть пятна уходит за край. Концепция брендбука «рассвет»: вверху
   синий свет, ниже по странице все больше оранжевого и красного
   (цвета — из двух фирменных радиалов, css/eb-mobile.css).

   Как устроено:
   - пятно — ::before секции, radial-gradient(closest-side) уходит в
     полную прозрачность ДО края своего слоя, поэтому на стыках секций
     нет резких полос;
   - z-index:-1 в общем контексте main (isolation) — свет всегда под
     текстом и карточками, а не поверх соседней секции;
   - main{overflow-x:clip} обрезает уходящие за край пятна по ширине
     страницы, горизонтальной прокрутки нет; по вертикали пятна
     свободно перетекают в соседние секции.
   ============================================================ */
main{position:relative;isolation:isolate;overflow-x:clip}
#afisha,#about,#merch,#artists,#brands,#fests,.final{position:relative}
#afisha::before,#about::before,#merch::before,#artists::before,#brands::before,#fests::before,.final::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:var(--fw);height:var(--fh);top:var(--ft);left:var(--fl,auto);right:var(--fr,auto);
  /* спад плавный, без «полки»: свет растворяется, а не читается фигурой */
  background:radial-gradient(closest-side,rgba(var(--fc),var(--fa,.34)) 0%,rgba(var(--fc),calc(var(--fa,.34) * .7)) 18%,
    rgba(var(--fc),calc(var(--fa,.34) * .4)) 38%,rgba(var(--fc),calc(var(--fa,.34) * .17)) 58%,rgba(var(--fc),calc(var(--fa,.34) * .05)) 78%,rgba(var(--fc),0) 100%);
  transform:rotate(var(--rot,0deg))}
/* Первый экран и подвал — со своим черным фоном и лежат поверх слоя
   света, поэтому пятна у границы с ними стоят с запасом: иначе фон
   срезает свет прямой линией (так было у афиши под героем). */
/* синий: афиша — слева, цифры — справа, мерч — слева, чуть фиолетовее */
#afisha{--fc:38,97,180;--fa:.5;--fw:clamp(440px,calc(64 * var(--vw)),1060px);--fh:clamp(240px,calc(26 * var(--vw)),430px);--ft:16%;--fl:calc(-20 * var(--vw));--rot:-10deg}
#about{--fc:48,153,223;--fa:.42;--fw:clamp(400px,calc(56 * var(--vw)),920px);--fh:clamp(260px,calc(30 * var(--vw)),500px);--ft:0%;--fr:calc(-18 * var(--vw));--rot:18deg}
#merch{--fc:86,92,214;--fa:.36;--fw:clamp(400px,calc(56 * var(--vw)),920px);--fh:clamp(280px,calc(34 * var(--vw)),560px);--ft:32%;--fl:calc(-20 * var(--vw));--rot:-12deg}
/* переход: артисты — теплый янтарь справа */
#artists{--fc:241,136,74;--fa:.4;--fw:clamp(420px,calc(62 * var(--vw)),1000px);--fh:clamp(280px,calc(34 * var(--vw)),560px);--ft:22%;--fr:calc(-20 * var(--vw));--rot:-22deg}
/* оранжевый и красный ниже: партнеры — слева, фестивали — справа, финал — блик справа, целиком над подвалом */
#brands{--fc:240,117,52;--fa:.44;--fw:clamp(420px,calc(64 * var(--vw)),1020px);--fh:clamp(280px,calc(32 * var(--vw)),520px);--ft:6%;--fl:calc(-22 * var(--vw));--rot:14deg}
#fests{--fc:239,88,32;--fa:.48;--fw:clamp(440px,calc(66 * var(--vw)),1080px);--fh:clamp(280px,calc(34 * var(--vw)),560px);--ft:26%;--fr:calc(-20 * var(--vw));--rot:-20deg}
.final{--fc:237,33,1;--fa:.38;--fw:clamp(440px,calc(66 * var(--vw)),1080px);--fh:clamp(220px,calc(20 * var(--vw)),340px);--ft:0%;--fr:calc(-18 * var(--vw));--rot:-16deg}
/* телефон: пятна меньше и чуть тише — на узком экране они ближе к тексту */
@media (max-width:719px){
  #afisha,#about,#merch,#artists,#brands,#fests,.final{--fa:.34}
  #afisha::before,#about::before,#merch::before,#artists::before,#brands::before,#fests::before,.final::before{
    width:clamp(300px,calc(110 * var(--vw)),520px);height:clamp(200px,calc(70 * var(--vw)),340px)}
}

/* ============================================================
   МАСШТАБ — от 1200 страница крупнеет вместе с окном, но на 35 % его
   прироста: zoom = 1 + (окно/1200 − 1) × 0.35 (--z ставит скрипт в <head>):
   на 1440 — ×1.07, на маке 1512 — ×1.09, 1728 — ×1.15, на 1920 — ×1.21,
   на 2560 — ×1.4. Полный зум (×1.44 на 1728) и половина (×1.22) вышли
   слишком крупными.
   Оставшуюся ширину добирает сетка: .wrap внутри зума во всю ширину, поля
   --zpad = 32 единицы сетки шапки / zoom, поэтому края контента всегда
   под знаком и кнопкой шапки. --vw внутри зума = 1vw его собственной
   ширины (--zvw), иначе clamp(…vw…) в секциях рос бы и от окна, и от зума.
   ============================================================ */
@media (min-width:1200px){
  main>section:not(.hero){zoom:var(--z,1);--vw:var(--zvw,12px)}
  main>section:not(.hero) .wrap{max-width:none;padding:0 var(--zpad,32px)}
  /* Партнеры: ячейки стали шире прежних 287 px (блок под края шапки), а знаки
     росли только с окном — между ними появились большие пустоты. Здесь
     единица знаков — ширина блока / 900, то есть знаки растут вместе с
     ячейками и плотность как на прежней версии. «Рифмы и Музыка» — 13,2
     кегля, поэтому кегль не больше 7 % ширины ячейки (cqi), иначе вылезет. */
  main>section:not(.hero) .brands{--u:calc((100 * var(--vw) - 2 * var(--zpad,32px)) / 900)}
  main>section:not(.hero) .brands>li{container-type:inline-size}
  main>section:not(.hero) .brand-text{font-size:clamp(11px,min(calc(16.2 * var(--u)),calc(7cqi - 3px)),26px)}
}