/* ==========================================================================
   RED VINILL — музыкальное пространство
   Афишная тумба. Плоскости, гиганты в обрез, ноль карточек.
   ========================================================================== */

@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
/* потолок кегля гиганта: короткое слово («DJ») на полный обрез вырастает
   выше экрана. Регистрируем как длину — тогда 34vw доедет до скрипта в px */
@property --cap{syntax:'<length>';inherits:false;initial-value:99999px}

/* --- 1. ТОКЕНЫ ----------------------------------------------------------- */
:root{
  /* Палитра прайс-листа: белый лист, чёрный блок, красный блок.
     --red взят пипеткой из логотипов (img/lg-*.webp), чтобы растр и вёрстка
     не расходились по оттенку. */
  --paper:    #FFFFFF;
  --paper-2:  #EFEDEA;
  --ink:      #101010;
  --pencil:   #8E8C89;

  --red:      #D31F32;
  --orange:   #DD6413;
  --green:    #1E5B3F;
  --black:    #0E0E0E;

  --paper-lt: #FFFFFF;
  --ochre:    #8A6A12;
  --peak:     #FF4438;
  --grey:     #6D6E70;

  --plane: var(--paper);

  --u: 8px;
  /* высота липкой полосы, бегущей строки и элементов управления в полосе.
     Полоса стала выше — адрес прибит в неё второй строкой на телефоне. */
  --bar-h:  calc(var(--u)*8);
  --tick-h: calc(var(--u)*4);
  --ctl-h:  calc(var(--u)*5.5);
  --bleed: min(100vw, 1900px);

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --text:    'Golos Text', system-ui, -apple-system, sans-serif;
  --label:   'Golos Text', system-ui, -apple-system, sans-serif;
  --logo:    'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --script:  'Yellowtail', cursive;

  --t-h2:    clamp(1.75rem, 5.6vw, 4.5rem);
  --t-h3:    clamp(1.25rem, 2.2vw, 1.75rem);
  --t-data:  clamp(2.5rem, 7.5vw, 6.5rem);
  --t-price: clamp(1.75rem, 3.4vw, 3rem);
  /* заказчик собрал отзывы: «не понятно, что написано, читать не хочется».
     Один базовый размер на весь сайт — 18px текст, 14—16px подписи;
     ниже 14px ничего не набирается. */
  --t-body:  clamp(1.125rem, 1.3vw, 1.375rem);
  --t-cap:   clamp(.875rem, 1vw, 1rem);
  --t-micro: .875rem;

  --ink-2: color-mix(in oklab, var(--ink) 66%, var(--plane));
  --ink-3: color-mix(in oklab, var(--ink) 42%, var(--plane));
}

/* --- 2. БАЗА ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}

a{
  color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.28em;
  text-decoration-skip-ink:auto;
  transition:text-decoration-thickness 120ms linear;
}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[id]{scroll-margin-top:calc(var(--bar-h) + var(--u)*3)}

/* плёночное зерно — один слой на весь документ */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 3. ТИПОГРАФИКА (две гарнитуры: Oswald и Golos Text) --- ------------------------------------------------------ */
.tnum{font-family:var(--label);font-variant-numeric:tabular-nums slashed-zero}
.cap{
  font-family:var(--label);font-size:var(--t-cap);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums slashed-zero;
}
.micro{
  font-family:var(--label);font-size:var(--t-micro);font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;
  font-variant-numeric:tabular-nums slashed-zero;
}
.prose{
  font-family:var(--text);font-size:var(--t-body);line-height:1.5;
  max-inline-size:62ch;text-wrap:pretty;hyphens:auto;
}
.rub{font-size:.86em;margin-left:.1em}
.vert{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.2em}
.dim{color:var(--ink-2)}
.dim-3{color:var(--ink-3)}

/* гигант, подогнанный к обрезу */
.giant{
  display:block;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:min(calc(var(--bleed) / var(--chars, 4)), var(--cap));
  line-height:.82;letter-spacing:-.042em;margin-left:-.05em;
  white-space:nowrap;font-feature-settings:"case" 1;
  /* строчный бокс при lh .82 короче глифов: без этого запаса Ё, Й и выносные
     срезает overflow секции и mask-image раскрытия */
  padding-block:.2em .06em;
}
a.giant{text-decoration:none}
/* ручной кернинг кириллицы */
.k-kr{letter-spacing:-.075em}
.k-yj{letter-spacing:.01em}
.k-zhe{letter-spacing:-.06em}
.k-vy{letter-spacing:-.07em}
.k-ze{letter-spacing:-.07em}
.k-ljo{letter-spacing:-.055em}
.k-chjo{letter-spacing:-.08em}
.k-rn{letter-spacing:-.05em}
.k-ur{letter-spacing:-.03em}

/* обязательная моно-строка данных под каждым гигантом */
.datum{
  font-family:var(--label);font-size:var(--t-cap);font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;
  margin-top:var(--u);color:var(--ink-2);
  font-variant-numeric:tabular-nums slashed-zero;
}

/* --- 4. СЕТКА ------------------------------------------------------------ */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--u);
  padding-inline:
    max(calc(var(--u)*3), calc((100vw - 1900px)/2 + var(--u)*3))
    max(calc(var(--u)*2), calc((100vw - 1900px)/2 + var(--u)*2));
}
.full{grid-column:1/-1}
.rule{height:1px;background:currentColor;grid-column:1/-1}

/* --- 5. ПЛОСКОСТИ -------------------------------------------------------- */
/* --ink-2/--ink-3 подставляются там, где объявлены: на :root они считались от
   бумаги и на тёмных плоскостях давали #585858 — 2.6:1. Пересчитываем на самой
   плоскости, где --ink и --plane уже её собственные. */
.plane{
  background:var(--plane);color:var(--ink);position:relative;isolation:isolate;
  --ink-2:color-mix(in oklab, var(--ink) 66%, var(--plane));
  --ink-3:color-mix(in oklab, var(--ink) 42%, var(--plane));
}
.plane--paper2{--plane:var(--paper-2);--accent:var(--red)}
.plane--white {--plane:var(--paper-lt);--accent:var(--red)}
.plane--red   {--plane:var(--red);   --ink:#FFFFFF;--accent:#FFFFFF}
.plane--black {--plane:var(--black); --ink:#FFFFFF;--accent:var(--red)}
/* оранжевый и зелёный — плоскости в цвет зала, как красный и чёрный.
   На оранжевом чернила остаются тёмными: белым по #DD6413 — 3.6:1, тёмным — 5.3:1 */
.plane--orange{--plane:var(--orange);--ink:#101010;--accent:#101010}
.plane--green {--plane:var(--green); --ink:#FFFFFF;--accent:#FFFFFF}
.plane--red .cap,.plane--red .micro,
.plane--green .cap,.plane--green .micro{color:#FFFFFF}
.plane--red .datum{color:#FFFFFF}
.plane--orange .datum,.plane--green .datum,.plane--black .datum{color:var(--ink)}

/* неровность краски */
.plane--red::before,.plane--black::before,
.plane--orange::before,.plane--green::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.09;mix-blend-mode:multiply;background-size:520px 520px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* --- 6. ЛИПКАЯ ПОЛОСА С НАВИГАЦИЕЙ -------------------------------------- */
.bar{
  position:sticky;top:0;z-index:60;
  height:var(--bar-h);
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;gap:calc(var(--u)*2);
  padding-inline:var(--u);
}
.bar .reg{flex:0 0 12px}
.bar__logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.bar__logo img{width:88px;height:38px;display:block}

.bar__nav{
  display:flex;align-items:baseline;gap:.6em;margin-right:auto;
  font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.bar__nav a{text-decoration-thickness:1px}
.bar__nav a[aria-current="page"]{text-decoration-thickness:2px}
.nav__sep{color:color-mix(in oklab, var(--paper) 40%, var(--ink))}

.bar__tel{
  font-family:var(--label);font-weight:500;font-size:13px;
  font-variant-numeric:tabular-nums slashed-zero;
  text-decoration:none;white-space:nowrap;flex:0 0 auto;
}
.bar__tel:hover{text-decoration:underline;text-underline-offset:.28em}
.bar__cta{
  flex:0 0 auto;width:calc(var(--u)*17);height:calc(var(--u)*5);
  background:var(--red);color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:.5em;
  transition:background-color 120ms linear, transform 120ms linear;
}
.bar__cta b{color:var(--peak);font-size:.8em;line-height:1}
.bar__cta:hover{background:#000;transform:translate3d(6px,0,0)}

/* --- 6.1 БЕГУЩАЯ СТРОКА — своя полоса, уезжает со скроллом --------------- */
.ticker{
  background:var(--ink);color:var(--paper);
  height:var(--tick-h);display:flex;align-items:center;overflow:hidden;
}
.ticker__run{
  display:flex;width:max-content;flex:0 0 auto;white-space:nowrap;
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.09em;
  animation:run 46s linear infinite;
}
@keyframes run{to{transform:translate3d(-50%,0,0)}}
body:not(.hero-in) .ticker__run{animation:none}

/* --- 6.2 КНОПКА МЕНЮ И ПАНЕЛЬ -------------------------------------------- */
/* fixed, а не absolute: при клике по label фокус уходит на чекбокс и браузер
   подкручивает страницу к нему — прибитый к вьюпорту скроллить некуда */
.menu__box{position:fixed;top:0;left:0;width:0;height:0;opacity:0;pointer-events:none}
.menu__btn{
  display:none;align-items:center;justify-content:center;flex:0 0 auto;
  height:calc(var(--u)*5);padding-inline:calc(var(--u)*1.5);
  border:1px solid currentColor;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background-color 120ms linear, color 120ms linear;
}
.menu__btn:hover{background:var(--paper);color:var(--ink)}
.menu__box:focus-visible ~ .menu__btn{outline:2px solid currentColor;outline-offset:2px}
.menu__word--close{display:none}
.menu__box:checked ~ .menu__btn .menu__word--open{display:none}
.menu__box:checked ~ .menu__btn .menu__word--close{display:inline}
.menu__box:checked ~ .menu__btn{background:var(--paper);color:var(--ink)}

.menu{
  display:none;position:fixed;inset:var(--bar-h) 0 0 0;z-index:55;
  --plane:var(--black);--ink:#FFFFFF;
  background:var(--black);color:#FFFFFF;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform 320ms cubic-bezier(.4,0,.2,1), visibility 0s linear 320ms;
}
body:has(.menu__box:checked) .menu{
  transform:none;visibility:visible;
  transition:transform 320ms cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* блокируем прокрутку на КОРНЕ, а не на body: overflow:hidden на body
   делает его скролл-контейнером, и position:sticky у полосы уезжает вверх */
html:has(.menu__box:checked){overflow:hidden}
.menu__in{
  min-height:100%;display:flex;flex-direction:column;justify-content:space-between;
  gap:calc(var(--u)*6);
  padding:calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*6);
}
.menu__list li{border-top:1px solid currentColor}
.menu__list li:last-child{border-bottom:1px solid currentColor}
.menu__list a{
  display:flex;align-items:baseline;gap:calc(var(--u)*2);
  padding-block:calc(var(--u)*2);text-decoration:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,11vw,3.25rem);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;
}
.menu__list a[aria-current="page"]{color:var(--red)}
.menu__no{font-family:var(--label);font-weight:400;font-size:12px;letter-spacing:.1em;flex:0 0 auto}
.menu__tel{
  font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,7vw,2.25rem);
  font-variant-numeric:tabular-nums slashed-zero;
  text-decoration:none;display:block;margin-bottom:calc(var(--u)*1.5);
}
.menu__foot .micro{color:var(--ink-2);display:block;margin-top:calc(var(--u)*.5)}
.menu__foot .micro a{color:inherit}
.menu__cta{margin-top:calc(var(--u)*3)}

/* ниже 900px навигация уезжает в панель */
@media (max-width:900px){
  .bar .reg{display:none}
  .bar__nav{display:none}
  .bar__logo{margin-right:auto}
  .menu__btn{display:flex}
  .menu{display:block}
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:70;
  background:var(--ink);color:var(--paper);padding:var(--u) calc(var(--u)*2);
  font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:calc(var(--u)*3)}

.reg{display:block}

/* --- 7. МАРГИНАЛИЯ ------------------------------------------------------- */
.rail{
  position:absolute;left:var(--u);top:calc(var(--u)*12);margin:0;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:calc(var(--u)*2);
}
.rail::after{content:"";width:1px;height:22svh;background:currentColor}
.rail__no{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.1em}

/* --- 8. ПРИЁМЫ ----------------------------------------------------------- */
/* выносной пунктир */
.leader{
  flex:1 1 auto;align-self:baseline;font-size:1rem;line-height:1;height:1em;min-width:calc(var(--u)*4);
  background-image:radial-gradient(circle at center,currentColor 1px,transparent 1.2px);
  background-size:6px 3px;background-position:0 .62em;background-repeat:repeat-x;
}

/* штамп «НОЧЬ» — ровно один на сайт */
.stamp{
  font-family:var(--display);font-weight:700;font-size:13px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);border:1.5px solid var(--red);
  padding:calc(var(--u)*.5) var(--u);
  transform:rotate(-7deg);mix-blend-mode:multiply;
  display:inline-block;position:relative;
  margin-inline-start:calc(var(--u)*-2);
}

/* матричная строка вместо копирайта */
.matrix{
  font-family:var(--label);font-size:11px;letter-spacing:.3em;
  color:color-mix(in oklab, var(--ink) 45%, var(--plane));
  margin-top:calc(var(--u)*4);
}

/* инверсия полярности */
.row{transition:background-color 80ms steps(2), color 80ms steps(2)}
.row:hover,.row:focus-visible{background:var(--ink);color:var(--plane)}

/* заливка строки трек-листа */
.track{position:relative;isolation:isolate;text-decoration:none;display:block}
.track::before{
  content:"";position:absolute;inset:0 -100vw;z-index:-1;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1);
}
.track:hover::before,.track:focus-visible::before{transform:scaleX(1)}
.track:hover,.track:focus-visible{color:var(--plane)}
.track:hover .dim,.track:focus-visible .dim,
.track:hover .datum,.track:focus-visible .datum{color:var(--plane)}
.track--music::before{background:var(--red)}

/* плейсхолдер под фото */
.plate{display:block}
.plate img{width:100%;aspect-ratio:var(--ar, 4/5);object-fit:cover;display:block}
.plate__box{
  aspect-ratio:var(--ar, 4/5);
  background-color:color-mix(in oklab, var(--plane) 88%, var(--ink));
  background-image:repeating-linear-gradient(45deg,transparent 0 11px,
    color-mix(in oklab, var(--ink) 14%, transparent) 11px 12px);
}
.plate figcaption{margin-top:var(--u);color:var(--ink-2)}
.plane--red .plate figcaption{color:var(--paper-lt)}
.plane--orange .plate figcaption,.plane--green .plate figcaption,
.plane--black .plate figcaption,.plane--orange .room__figplan figcaption,
.plane--green .room__figplan figcaption,.plane--black .room__figplan figcaption{color:var(--ink)}
.halftone{
  background-image:radial-gradient(currentColor 1px,transparent 1.1px);
  background-size:5px 5px;color:var(--ink-3);
}

/* плашка-кнопка */
.slab{
  display:flex;align-items:center;justify-content:space-between;gap:var(--u);
  height:calc(var(--u)*9);padding-inline:calc(var(--u)*3);
  background:var(--ink);color:var(--plane);text-decoration:none;
  transition:background-color 120ms linear, transform 120ms linear;
}
.slab__t{
  font-family:var(--display);font-weight:600;font-size:21px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.slab__t b{color:var(--peak);font-size:.75em;line-height:1}
.slab:hover{transform:translate3d(6px,0,0)}
/* .slab уже инвертирует сама: на цветной плоскости --ink это бумага,
   поэтому плашка выходит бумажной с текстом цвета зала */
.h2{font-family:var(--display);font-weight:700;font-size:var(--t-h2);line-height:.92;
  letter-spacing:-.025em;text-transform:uppercase}

/* счётчики */
.list{counter-reset:i}
.list>li{position:relative}
.num::before{
  counter-increment:i;content:counter(i,decimal-leading-zero);
  font-family:var(--label);font-weight:400;font-size:var(--t-micro);
  letter-spacing:.1em;
}

/* маска-раскрытие */
.wipe{--p:100%}
html.js .wipe{
  --p:0%;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--p),transparent var(--p));
  mask-image:linear-gradient(90deg,#000 0 var(--p),transparent var(--p));
  -webkit-mask-size:100% 400%;mask-size:100% 400%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:--p 700ms cubic-bezier(.2,.7,.2,1);
}
html.js .wipe.is-in{--p:100%}

/* --- 9. СЕКЦИИ: РИТМ ----------------------------------------------------- */
.s-hero  {padding-block:calc(var(--u)*2)  calc(var(--u)*5)}
.s-track {padding-block:calc(var(--u)*29) calc(var(--u)*6)}
/* под цифрами прайса зиял отступ в 34u — «наши залы оборудованы…» уезжало
   на экран ниже. Оставляем обычный ритм */
.s-price {padding-block:calc(var(--u)*8)  calc(var(--u)*10)}
.s-rider {padding-block:calc(var(--u)*7)  calc(var(--u)*10)}
.s-teach {padding-block:calc(var(--u)*11) calc(var(--u)*13)}
.s-form  {padding-block:calc(var(--u)*11) calc(var(--u)*7)}
.s-foot  {padding-block:calc(var(--u)*17) calc(var(--u)*4)}
.s-cat   {padding-block:calc(var(--u)*13) calc(var(--u)*9)}
.s-exhib {padding-block:calc(var(--u)*7)  calc(var(--u)*23)}

/* --- 10. ГЕРОЙ ----------------------------------------------------------- */
.hero{
  min-height:100svh;position:relative;overflow:clip;
  display:grid;grid-template-rows:auto 1fr;
  align-content:start;
}
.hero__arcs{
  position:absolute;inset:0;pointer-events:none;color:var(--ink-3);
  width:100%;height:100%;
}
.hero__vert{
  position:absolute;left:var(--u);top:calc(var(--u)*15);
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.hero__body{
  grid-column:1/-1;position:relative;
  display:grid;grid-template-columns:subgrid;
  align-content:center;row-gap:calc(var(--u)*3);
  padding-block:calc(var(--u)*6) calc(var(--u)*3);
}
/* minmax(0,1fr): без него авто-колонка растёт под nowrap-гигант, тот вылезает
   за секцию и утаскивает за собой вёрстку героя */
.hero__mark{grid-column:1/-1;grid-row:1;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr);padding-left:calc(var(--u)*3)}
.hero__body>.datum{grid-column:1/-1;grid-row:2}
/* при line-height .82 выносные («У» в «ОБУЧЕНИЕ») вылезают за бокс строки
   и ложатся на строку данных под заголовком — отводим им место */
.hero__giant{grid-area:1/1;position:relative;z-index:1;padding-bottom:.16em}
.hero__red{
  grid-area:1/1;z-index:2;align-self:start;justify-self:start;
  background:var(--red);height:calc(var(--u)*13);
  min-width:calc(var(--u)*22);
  display:flex;align-items:flex-end;
  padding:calc(var(--u)*2);
  margin-top:calc(var(--u)*-1);
}
.hero__red span{
  font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3.5rem);
  line-height:.9;letter-spacing:-.03em;color:var(--paper);text-transform:uppercase;
}
.hero__side{grid-column:8/-1;grid-row:3;display:flex;flex-direction:column;gap:calc(var(--u)*2);justify-content:flex-end}
/* рядом с гигантом основной кегль читался мелко — в герое даём крупнее */
.hero__side .prose{font-size:clamp(1.0625rem,1.35vw,1.375rem);line-height:1.45}
.hero__tel{
  font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums slashed-zero;text-decoration:none;
  word-break:break-word;
}
.hero__tel:hover{text-decoration:underline;text-underline-offset:.2em}
.hero__slab{grid-column:1/7;grid-row:3;align-self:end}

/* --- 11. ТРЕК-ЛИСТ ------------------------------------------------------- */
.tl__head{grid-column:1/-1;color:var(--ink-2);margin-bottom:calc(var(--u)*3)}
.tl{grid-column:1/-1}
.tl>li{border-top:1px solid currentColor}
.tl>li:last-of-type{border-bottom:1px solid currentColor}
.tl .track{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);
  min-height:calc(var(--u)*22);align-items:center;padding-block:calc(var(--u)*2);
}
.tl__no{grid-column:1/2;align-self:start;padding-top:calc(var(--u)*2);
  font-family:var(--label);font-size:12px;letter-spacing:.1em}
.tl__name{
  grid-column:2/10;display:flex;align-items:baseline;gap:var(--u);
  font-family:var(--display);font-weight:700;
  font-size:clamp(3rem,9vw,8.5rem);line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;
}
.tl__side{grid-column:10/-1;align-self:center}
.tl__desc{font-size:15px;line-height:1.35}
.tl__soon{
  grid-column:1/-1;background:var(--ink);color:var(--plane);
  height:calc(var(--u)*2);display:flex;align-items:center;padding-inline:var(--u);
  margin-top:calc(var(--u)*4);
}
.tl__soon span{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tl__rest{grid-column:1/-1;margin-top:calc(var(--u)*3);color:var(--ink-3);cursor:default}

/* --- 12. ЗАЛЫ ------------------------------------------------------------ */
/* Блок зала по эскизу заказчика: название, под ним подпись; ниже слева
   текст и «записаться», справа кадр зала; внизу два кадра одного формата.
   Схемы залов и вертикальные подписи «№ 01 / Аренда / RV-02» убраны —
   их не читали. Кадр больше не заезжает под название: снимок в обрез
   выглядел эффектно, но на нём терялся текст. */
.room{
  padding-block:calc(var(--u)*7) calc(var(--u)*8);
  row-gap:calc(var(--u)*5);position:relative;overflow:clip;
  align-items:start;
}
.room__head{grid-column:1/-1;position:relative;z-index:1}
/* подпись под названием — крупнее строки данных, это второй заголовок */
.room__sub{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.15;letter-spacing:.03em;
  text-transform:uppercase;margin-top:calc(var(--u)*1.5);
  text-wrap:balance;
}
.room__text{
  grid-column:1/7;display:grid;gap:calc(var(--u)*3);
  align-content:start;justify-items:start;
}
.room__plate{grid-column:7/-1;margin:0}
.room__spec{display:grid;gap:0;justify-self:stretch}
.room__spec li{
  font-family:var(--text);font-size:clamp(1.125rem,1.45vw,1.5rem);line-height:1.35;
  padding-block:calc(var(--u)*1.5);border-top:1px solid currentColor;
}
.room__spec li:last-child{border-bottom:1px solid currentColor}
/* подпись «записаться к нам ● красный» длинная — плашке отдаём всю ширину
   текстовой колонки, а не два столбца сетки */
.room__cta{width:100%;max-width:calc(var(--u)*60)}
.room__note{color:var(--ink-2)}
.plane--red .room__note,.plane--green .room__note,.plane--black .room__note{color:var(--ink)}
/* кадры внизу — два в ряд, тот же формат, что и кадр справа */
.room .shots{
  grid-column:1/-1;margin-top:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.room .shots img{aspect-ratio:4/3}
/* у Оранжевого и Зелёного пока по одному кадру — до присылки вторых
   одиночный кадр идёт панорамой во всю ширину, а не оставляет пустую половину */
.room .shots:has(figure:only-child){grid-template-columns:1fr}
.room .shots:has(figure:only-child) img{aspect-ratio:2/1}

/* --- 13. ПРАЙС ----------------------------------------------------------- */
/* таблица стояла на колонку правее гиганта и строки данных — подпись
   «почасовая аренда» висела левее вертикальной чёрной полосы. Ставим
   таблицу, примечания и цифры в один левый край с заголовком. */
.ptable{grid-column:1/-1;margin-top:calc(var(--u)*4)}
.ptable__head,.prow{
  display:grid;
  grid-template-columns:var(--u) minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  column-gap:calc(var(--u)*2);align-items:center;
}
.ptable__head{
  padding-block:var(--u);border-bottom:1px solid currentColor;
  color:var(--ink-3);
}
.prow{border-bottom:1px solid currentColor;padding-block:var(--u)}
.prow--01{min-height:calc(var(--u)*11)}
.prow--02{min-height:calc(var(--u)*10)}
.prow--03{min-height:calc(var(--u)*9)}
.prow--04{min-height:calc(var(--u)*12)}
.swatch{width:var(--u);align-self:stretch}
.sw-01{background:var(--red)} .sw-02{background:var(--grey)}
.sw-03{background:var(--pencil)} .sw-04{background:var(--black)}
.prow__name{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;display:flex;align-items:baseline;gap:var(--u);
}
.prow__spec{font-family:var(--label);font-size:var(--t-cap);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:baseline;gap:var(--u)}
.prow__price{
  font-family:var(--display);font-weight:600;font-size:var(--t-price);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums slashed-zero;text-align:right;
  display:flex;align-items:baseline;justify-content:flex-end;
}
.notes{grid-column:1/9;margin-top:calc(var(--u)*3);color:var(--ink-2);display:grid;gap:calc(var(--u)*.5)}
.figures{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:calc(var(--u)*6);margin-top:calc(var(--u)*8)}
.fig__n{font-family:var(--display);font-weight:600;font-size:var(--t-data);line-height:.9;
  font-variant-numeric:tabular-nums slashed-zero}
.fig--small .fig__n{font-size:calc(var(--t-data) / 2)}
.fig__c{color:var(--ink-2);margin-top:var(--u)}

/* --- 14. РАЙДЕР ---------------------------------------------------------- */
.rider{
  grid-column:2/-1;column-count:4;column-gap:calc(var(--u)*3);
  column-rule:1px solid currentColor;
  font-family:var(--label);font-weight:400;font-size:12px;line-height:16px;
  letter-spacing:.06em;text-align:left;margin-top:calc(var(--u)*6);
}
.rider h3{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:calc(var(--u)*2);
  break-after:avoid;color:var(--ink-2);
}
.rider li{break-inside:avoid;text-transform:uppercase}
/* break-after на самом h3 не держит: колонка рвётся между <li> */
.rider li:has(h3){break-after:avoid}

/* --- 15. ПЕДАГОГИ -------------------------------------------------------- */
/* отдельной «карточки героя» больше нет: педагоги идут одной сеткой подряд */
.teach__prose{grid-column:1/8;margin-top:calc(var(--u)*5);align-self:start}
.s-teach .staff{margin-top:calc(var(--u)*6)}

/* --- 16. ФОРМА ----------------------------------------------------------- */
.form{grid-column:1/9;margin-top:calc(var(--u)*6)}
.field{display:grid;gap:calc(var(--u)*.5);margin-bottom:calc(var(--u)*4)}
.field label{color:var(--ink-2)}
.field input,.field textarea{
  height:calc(var(--u)*6);padding:0;background:none;border:0;
  border-bottom:1px solid var(--ink);
  font-family:var(--text);font-size:17px;
  transition:border-color 120ms linear, border-width 120ms linear;
}
.field textarea{height:calc(var(--u)*10);resize:vertical;padding-top:var(--u);line-height:1.4}
.field input:focus-visible,.field textarea:focus-visible{
  outline:none;border-bottom:3px solid var(--red);
}
.picks{margin-bottom:calc(var(--u)*4);border:0;padding:0;margin-inline:0;min-width:0}
.picks legend{color:var(--ink-2);margin-bottom:var(--u);padding:0}
.pick{position:relative;border-top:1px solid currentColor}
.pick:last-child{border-bottom:1px solid currentColor}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  min-height:calc(var(--u)*6);cursor:pointer;position:relative;isolation:isolate;
}
.pick label::before{
  /* в левый обрез, но не дальше правого края колонки формы:
     иначе плашка заезжает под правую колонку */
  content:"";position:absolute;inset:0 0 0 -100vw;z-index:-1;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1);
}
.pick input:checked + label::before{transform:scaleX(1)}
.pick input:checked + label{color:var(--paper)}
.pick input:focus-visible + label{outline:2px solid currentColor;outline-offset:2px}
.pick__n{font-family:var(--label);font-size:12px;letter-spacing:.1em;flex:0 0 auto}
.pick__t{font-family:var(--display);font-weight:500;font-size:22px;
  letter-spacing:.01em;text-transform:uppercase}
.form__submit{width:100%;border:0;cursor:pointer;justify-content:flex-start;gap:calc(var(--u)*2)}
.form__submit[disabled]{opacity:.55;cursor:progress}
/* приманка для ботов: убираем с экрана, но оставляем в потоке — display:none
   и hidden часть роботов распознаёт и поле пропускает */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ответ сервера под кнопкой; пустой абзац место не занимает */
.form__msg{
  font-family:var(--label);font-size:13.5px;line-height:1.45;
  margin-top:calc(var(--u)*2);color:var(--ink);
}
.form__msg:empty{display:none}
.form__msg.is-bad{color:var(--red)}
.form__aside{grid-column:9/-1;margin-top:calc(var(--u)*6);display:grid;gap:calc(var(--u)*2);
  align-content:start}

/* страница «спасибо» из send.php — её видят те, у кого выключен скрипт */
.s-thanks{min-height:100svh;align-content:center;padding-block:calc(var(--u)*10)}
.thanks{grid-column:2/9;display:grid;gap:calc(var(--u)*3);justify-items:start}
@media (max-width:767px){.thanks{grid-column:1/-1}}

/* --- 17. ФУТЕР ----------------------------------------------------------- */
.foot__cta{grid-column:1/-1;color:inherit;display:block;position:relative;isolation:isolate}
.foot__cta::before{
  content:"";position:absolute;inset:0 -100vw;z-index:-1;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1);
}
.foot__cta:hover::before,.foot__cta:focus-visible::before{transform:scaleX(1)}
.foot__line{grid-column:1/-1;margin-top:calc(var(--u)*5);
  font-family:var(--label);font-size:12px;letter-spacing:.06em;
  display:flex;flex-wrap:wrap;gap:.6em}
.foot__line span{color:var(--ink-3)}
.foot__bottom{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--u);align-items:end;margin-top:calc(var(--u)*8)}
.colophon__logo{width:120px;height:auto;margin-bottom:calc(var(--u)*1.5)}
.colophon{grid-column:1/9;font-family:var(--label);font-size:11px;letter-spacing:.09em;
  line-height:1.7;color:var(--ink-2)}
.printbar{grid-column:11/-1;justify-self:end;display:grid;gap:var(--u);justify-items:end}
.printbar__row{display:flex}
.printbar__row i{width:24px;height:24px;display:block}
.printbar__row i:last-child{outline:1px solid var(--ink);outline-offset:-1px}
.foot__reg{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:calc(var(--u)*2)}

/* --- СТРАНИЦА НАПРАВЛЕНИЯ (dir-*.html) ----------------------------------- */
.s-dir     {padding-block:calc(var(--u)*11) calc(var(--u)*11)}
.s-dirteach{padding-block:calc(var(--u)*11) calc(var(--u)*13)}

/* герой задаёт строки жёстко (mark=1, datum=2, side/slab=3) — на страницах
   направления добавляется нулевая строка под возврат в каталог */
.hero__body:has(.dir__back){grid-template-rows:auto auto auto auto}
.hero__body:has(.dir__back) .hero__mark{grid-row:2}
.hero__body:has(.dir__back)>.datum{grid-row:3}
.hero__body:has(.dir__back) .hero__side,
.hero__body:has(.dir__back) .hero__slab{grid-row:4}
.dir__back{grid-column:1/-1;grid-row:1;margin-bottom:calc(var(--u)*2)}
.dir__back a{color:inherit;text-decoration:none}
.dir__back a:hover{text-decoration:underline;text-underline-offset:.28em}

.dir__plate{margin:0}
.dir__plate img{width:100%;height:auto;display:block}

.dir__text{grid-column:2/10;display:grid;align-content:start}
.dir__lead{font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.4}

.dir__points{display:grid;gap:0;margin-top:calc(var(--u)*5)}
.dir__points li{
  display:flex;gap:calc(var(--u)*2);align-items:baseline;
  padding-block:calc(var(--u)*2);border-top:1px solid currentColor;
  font-family:var(--text);font-size:var(--t-body);line-height:1.5;
}
.dir__points li:last-child{border-bottom:1px solid currentColor}
.dir__points .num{flex:0 0 auto;color:var(--ink-2)}

/* auto-fit растягивает единственную карточку на всю полосу — здесь педагогов
   бывает один, поэтому трек фиксируем через auto-fill */
.s-dirteach .staff{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.dir__close{margin-top:calc(var(--u)*5);display:grid;gap:calc(var(--u)*2)}
.dir__close a{color:inherit}

/* --- 19. КАТАЛОГ (music) ------------------------------------------------- */
.cat{grid-column:2/-1}
.cat li{border-top:1px solid currentColor}
.cat li:last-child{border-bottom:1px solid currentColor}
.cat__row{
  display:flex;align-items:baseline;gap:calc(var(--u)*2);
  padding-block:calc(var(--u)*2);text-decoration:none;
}
.cat__no{flex:0 0 auto;font-family:var(--label);font-size:12px;letter-spacing:.1em;
  margin-left:calc(var(--u)*-4)}
.cat__t{font-family:var(--display);font-weight:700;
  font-size:clamp(1.75rem,4.5vw,3.5rem);line-height:1;letter-spacing:-.025em;
  text-transform:uppercase}
.cat__meta{flex:0 0 auto;color:var(--ink-2)}
/* строка каталога ведёт на страницу направления */
a.cat__row{color:inherit}
a.cat__row:hover .cat__t,a.cat__row:focus-visible .cat__t{color:var(--red)}
a.cat__row:hover .cat__meta,a.cat__row:focus-visible .cat__meta{color:var(--ink)}

/* --- 20. СХЕМА ЦЕПИ (studio) -------------------------------------------- */

/* --- 21. МОБИЛЬНАЯ ВЁРСТКА ---------------------------------------------- */
@media (max-width:767px){
  .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding-inline:calc(var(--u)*2) calc(var(--u)*1.5);
  }
  body::after{opacity:.09}

  .s-track{padding-block:calc(var(--u)*15) calc(var(--u)*4)}
  .s-price{padding-block:calc(var(--u)*6)  calc(var(--u)*7)}
  .s-teach{padding-block:calc(var(--u)*11) calc(var(--u)*7)}
  .s-foot {padding-block:calc(var(--u)*9)  calc(var(--u)*3)}
  .s-cat  {padding-block:calc(var(--u)*7)  calc(var(--u)*5)}
  .s-rider{padding-block:calc(var(--u)*3)  calc(var(--u)*7)}
  .s-exhib{padding-block:calc(var(--u)*5)  calc(var(--u)*12)}

  .bar{gap:var(--u);padding-inline:calc(var(--u)*1.5)}
  .bar__logo img{width:70px;height:30px}
  .menu__btn{padding-inline:var(--u)}

  /* вертикальная строка не помещается в 16px поле — уводим её */
  .hero__vert{display:none}
  .hero__body{padding-block:calc(var(--u)*5) calc(var(--u)*3);row-gap:calc(var(--u)*3)}
  .hero__mark{padding-left:0}
  /* подпись плашки выросла до «записаться к нам» — на телефоне ужимаем,
     иначе строка с часами вылезает за поле */
  .slab{padding-inline:calc(var(--u)*2)}
  .slab__t{font-size:17px}
  .hero__side{grid-column:1/-1;grid-row:auto}
  .hero__slab{grid-column:1/-1;grid-row:auto}
  .hero__body>.datum{grid-row:auto}
  /* на страницах направления строки заданы через :has() — специфичность выше
     правил выше, и «сторона» с плашкой ложились в одну строку: снимок наезжал
     на телефон и адрес. Возвращаем естественный порядок. */
  .hero__body:has(.dir__back){grid-template-rows:auto}
  .hero__body:has(.dir__back) .hero__mark,
  .hero__body:has(.dir__back)>.datum,
  .hero__body:has(.dir__back) .hero__side,
  .hero__body:has(.dir__back) .hero__slab{grid-row:auto}
  .hero__tel{font-size:32px}

  .hero__red{height:calc(var(--u)*9);min-width:0}
  .hero__red span{font-size:34px}

  .tl .track{grid-template-columns:repeat(4,minmax(0,1fr));min-height:calc(var(--u)*15)}
  .tl__no{grid-column:1/-1;align-self:auto;padding-top:0}
  .tl__name{grid-column:1/-1;font-size:clamp(2.25rem,12vw,3.5rem)}
  .tl__side{grid-column:1/-1;margin-top:var(--u)}
  .tl__desc{font-size:14px}
  .track::before{transition:none}
  .track:hover::before{transform:scaleX(0)}
  .track:active::before{transform:scaleX(1)}
  .track:hover{color:inherit}
  .track:active{color:var(--plane)}

  .rail{display:none}
  /* зал в одну колонку: название, кадр, текст с плашкой, кадры */
  .room{padding-block:calc(var(--u)*5) calc(var(--u)*6);row-gap:calc(var(--u)*3)}
  .room__head,.room__text,.room__plate,.room .shots{grid-column:1/-1}
  .room__plate{order:1}
  .room__text{order:2;margin-top:var(--u)}
  .room .shots{order:3;grid-template-columns:1fr}
  .room__cta{max-width:none}

  .ptable{grid-column:1/-1}
  .ptable__head{display:none}
  .prow{
    grid-template-columns:1fr auto;grid-template-areas:"sw sw" "name price" "spec spec";
    row-gap:var(--u);padding-block:calc(var(--u)*2);
  }
  .swatch{grid-area:sw;width:100%;height:4px}
  .prow__name{grid-area:name;font-size:32px}
  .prow__price{grid-area:price;font-size:40px}
  .prow__spec{grid-area:spec}
  .prow--01{min-height:96px} .prow--02{min-height:88px}
  .prow--03{min-height:80px} .prow--04{min-height:104px}
  .notes{grid-column:1/-1}
  .figures{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*4)}

  /* в одну колонку отступ в 6u отрывал перечисление от слова «Парк» */
  .rider{grid-column:1/-1;column-count:1;margin-top:var(--u)}
  .rider li:first-child h3{margin-top:0}

  .teach__prose{grid-column:1/-1;margin-top:calc(var(--u)*3)}
  .s-teach .staff{margin-top:calc(var(--u)*4)}
  .dir__text{grid-column:1/-1}

  .form,.form__aside{grid-column:1/-1}
  .field input,.field textarea{font-size:16px;height:calc(var(--u)*6)}
  .pick label{min-height:48px}

  .foot__bottom{grid-template-columns:repeat(4,minmax(0,1fr))}
  .colophon{grid-column:1/-1}
  .printbar{grid-column:1/-1;justify-self:start;margin-top:calc(var(--u)*4)}
  .printbar__row i{width:20px;height:20px}

  .cat__no{margin-left:0}
  .cat__row{flex-wrap:wrap}
}

@media (max-width:900px) and (min-width:768px){
  .rider{column-count:2}
}
@media (max-width:519px){
  .leader{display:none}
}

/* --- 22. ПЕРЕХОДЫ СТРАНИЦ ------------------------------------------------ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 260ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in 320ms cubic-bezier(.4,0,.2,1) both}
@keyframes vt-out{to{transform:translateX(-18vw)}}
@keyframes vt-in{from{transform:translateX(100vw)}}

/* --- 23. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js .wipe{--p:100%;-webkit-mask-image:none;mask-image:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==========================================================================
   24. ФОТОГРАФИИ И НОВЫЕ БЛОКИ
   ========================================================================== */
.s-place   {padding-block:calc(var(--u)*9)  calc(var(--u)*15)}
.s-concert {padding-block:calc(var(--u)*15) calc(var(--u)*11)}
.s-years   {padding-block:calc(var(--u)*7)  calc(var(--u)*19)}
.s-serv    {padding-block:calc(var(--u)*23) calc(var(--u)*13)}
.s-shots   {padding-block:calc(var(--u)*5)  calc(var(--u)*25)}

/* слоган */
.slogan{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.75rem,4.4vw,3.75rem);line-height:.94;letter-spacing:-.03em;
  margin:calc(var(--u)*3) 0 calc(var(--u)*6);
}

/* галерея кадров в зале */
.shots{
  grid-column:2/-1;display:grid;gap:var(--u);
  /* фиксированные три колонки: при auto-fit одиночный кадр раздувался на всю ширину */
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:calc(var(--u)*3);
}
.shots figure{margin:0}
.shots img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}

/* место и удобства */
.place{grid-column:2/8}
/* набранный основным кеглем абзац рядом с гигантским адресом читался мелко
   и обрывался высоко над списком удобств — даём кегль крупнее и всю колонку */
.place .prose{
  margin-top:calc(var(--u)*10);
  font-size:clamp(1.125rem,2.05vw,1.75rem);line-height:1.4;max-inline-size:none;
}
.place__list{
  grid-column:8/-1;display:grid;gap:0;align-content:start;
  margin-top:calc(var(--u)*2);
}
.place__list li{
  font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding-block:calc(var(--u)*1.25);border-top:1px solid currentColor;
}
.place__list li:last-child{border-bottom:1px solid currentColor}

/* миниатюра направления в каталоге */
.cat__ph{flex:0 0 auto;display:block;width:140px}
.cat__ph img{width:140px;height:94px;object-fit:cover;display:block}

/* сетка педагогов */
.staff{
  grid-column:1/-1;display:grid;gap:calc(var(--u)*3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:calc(var(--u)*6);
}
.staff figure{margin:0}
.staff img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.staff figcaption{margin-top:var(--u)}
.staff b{
  font-family:var(--display);font-weight:600;font-size:21px;
  text-transform:uppercase;letter-spacing:.01em;display:block;
}
.staff .micro{color:var(--ink-2);display:block;margin-top:calc(var(--u)*.5)}

/* артисты студии */
.years__text{grid-column:1/6;margin-top:calc(var(--u)*5)}
.names{grid-column:7/-1;margin-top:calc(var(--u)*5)}
.names .micro{color:var(--ink-2)}
.names__list{margin-block:calc(var(--u)*2)}
.names__list li{border-top:1px solid currentColor;padding-block:calc(var(--u)*1.5)}
.names__list li:last-child{border-bottom:1px solid currentColor}
.names__list b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.75rem);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
}

/* услуги студии */
.serv{grid-column:1/9;margin-top:calc(var(--u)*5)}
.serv li{
  border-top:1px solid currentColor;padding-block:calc(var(--u)*2.5);
  display:grid;grid-template-columns:calc(var(--u)*6) 1fr;column-gap:var(--u);
}
.serv li:last-child{border-bottom:1px solid currentColor}
.serv .num::before{color:var(--ink-2)}
.serv b{
  grid-column:2;font-family:var(--display);font-weight:600;font-size:23px;
  text-transform:uppercase;letter-spacing:.01em;
}
.serv span:not(.num){grid-column:2;color:var(--ink-2);font-size:15.5px;margin-top:calc(var(--u)*.5)}
/* курсы стояли отдельной строкой в правом верхнем углу и «плыли» — висели
   в пустоте, перенос рвал последнее слово. Теперь идут под перечнем услуг
   той же колонкой, каждый курс своей строкой */
.serv__courses{grid-column:1/9;margin-top:calc(var(--u)*6);align-self:start}
.serv__courses .micro{color:var(--ink-2)}
.serv__big{margin-top:calc(var(--u)*1.5)}
.serv__big li{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;
  padding-block:calc(var(--u)*1.5);border-top:1px solid currentColor;
}
.serv__big li:last-child{border-bottom:1px solid currentColor}

/* концерты */
.concert__text{grid-column:1/6;margin-top:calc(var(--u)*4)}
.concert__ph{grid-column:6/-1;margin-top:calc(var(--u)*4)}

/* галерея студии: три в ряд, все кадры одного формата — разнобой из
   вертикальных, квадратных и горизонтальных снимков заказчику не понравился */
.gal{
  grid-column:2/-1;display:grid;gap:var(--u);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

@media (max-width:767px){
  .s-place   {padding-block:calc(var(--u)*5)  calc(var(--u)*8)}
  .s-concert {padding-block:calc(var(--u)*8)  calc(var(--u)*6)}
  .s-years   {padding-block:calc(var(--u)*4)  calc(var(--u)*10)}
  .s-serv    {padding-block:calc(var(--u)*12) calc(var(--u)*7)}
  .s-shots   {padding-block:calc(var(--u)*3)  calc(var(--u)*13)}

  .shots,.gal{grid-column:1/-1;grid-template-columns:1fr}
  .place,.place__list,.years__text,.names,.serv,.serv__courses,
  .concert__text,.concert__ph{grid-column:1/-1}
  .place__list,.names,.serv__courses{margin-top:calc(var(--u)*4)}
  .cat__ph,.cat__ph img{width:100%}
  .cat__ph img{height:auto;aspect-ratio:3/2}
  .staff{grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*2)}
  .slogan{margin:calc(var(--u)*2) 0 calc(var(--u)*4)}
}

/* ==========================================================================
   25. ШАПКА: МЕНЮ СЛЕВА, ЗАПИСЬ И КОНТАКТЫ СПРАВА
   ========================================================================== */
/* Кнопка «Меню» теперь основной вход в навигацию на всех ширинах: разделов
   девять, в строку они не помещаются. */
.bar__nav{display:none}
.bar .menu__btn{display:flex;order:-1}
.bar__logo{margin-right:auto}
.bar{gap:calc(var(--u)*1.5)}
/* панель была видна только до 900px, пока в полосе жила строчная навигация.
   Теперь «Меню» — единственный вход в разделы, панель нужна на всех ширинах. */
.menu{display:block}

/* соцсети — знаки в рамке, как было */
.soc{display:flex;align-items:center;gap:var(--u);flex:0 0 auto}
.soc a{
  width:calc(var(--u)*4);height:calc(var(--u)*4);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;
  border:1px solid color-mix(in oklab, currentColor 38%, transparent);
  transition:background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.soc a:hover,.soc a:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.soc svg{width:15px;height:15px;display:block;fill:currentColor}
/* те же знаки, но мельче: строка подвала и таблица контактов */
.soc--sm{gap:calc(var(--u)*.75)}
.soc--sm a{width:calc(var(--u)*3);height:calc(var(--u)*3)}
.soc--sm svg{width:13px;height:13px}

.bar__cta{width:auto;padding-inline:calc(var(--u)*2)}

/* на телефоне в полосу не влезают и номер, и знаки соцсетей, и кнопка.
   Номер остаётся в меню, героях и подвале — в шапке уступает место соцсетям. */
@media (max-width:640px){
  .bar__tel{display:none}
  .bar__cta{padding-inline:calc(var(--u)*1.25)}
}

/* панель меню: девять разделов + контакты */
.menu__list a{font-size:clamp(1.5rem,7vw,2.5rem)}
.menu__list li a[data-soon]{color:var(--ink-3)}
.menu__soon{
  font-family:var(--label);font-size:10px;letter-spacing:.16em;
  margin-left:auto;align-self:center;color:var(--red);
}
/* по названиям разделов не видно, что за ними стоит — под каждым короткое
   пояснение обычным текстом, чтобы не спорило с крупной строкой */
.menu__t{display:grid;gap:calc(var(--u)*.5)}
.menu__d{
  font-family:var(--text);font-weight:400;font-style:normal;
  font-size:14px;line-height:1.3;letter-spacing:0;text-transform:none;
  color:var(--ink-2);
}
.menu__list a[aria-current="page"] .menu__d{color:var(--ink-2)}
.menu__soc{display:flex;gap:var(--u);margin-top:calc(var(--u)*2)}

/* ==========================================================================
   26. ЗНАК РАЗДЕЛА — синтетический локап под растровые логотипы
   ========================================================================== */
/* Растровые логотипы (img/lg-*.webp) есть только у Group, Rent, Sound и Studio.
   Остальным разделам знак собирается шрифтами: Anton под наклоном — основа,
   Yellowtail с белой обводкой — рукописное слово. Пропорции и угол выставлены
   по растрам, поэтому в плитке оба вида читаются как один набор. */
.mk{
  position:relative;display:block;width:100%;aspect-ratio:960/390;
  container-type:inline-size;
  --fs:30cqi;
  --sx:1.32;--ss:.76;--sl:11%;
}
/* без контейнерных запросов знак не масштабируется — держим читаемый кегль */
@supports not (container-type:inline-size){
  .mk{--fs:82px}
}
.mk i{
  position:absolute;left:0;bottom:34%;display:block;font-style:normal;
  font-family:var(--logo);font-weight:400;font-size:var(--fs);line-height:.8;
  color:var(--grey);letter-spacing:-.05em;white-space:nowrap;
  transform:skewX(-12deg) rotate(-3.2deg);transform-origin:left bottom;
  filter:drop-shadow(.028em .028em 0 rgba(0,0,0,.18));
}
.mk s{
  position:absolute;left:var(--sl);bottom:11%;
  font-family:var(--script);font-size:calc(var(--fs) * var(--ss));line-height:.8;
  color:var(--red);text-decoration:none;white-space:nowrap;
  -webkit-text-stroke:.105em #fff;paint-order:stroke fill;
  transform:rotate(-3.2deg) scaleX(var(--sx));transform-origin:left bottom;
  filter:drop-shadow(.03em .03em 0 rgba(0,0,0,.14));
}
/* длина рукописного слова разная — подгоняем кегль и растяжку под основу */
.mk--short {--ss:.80;--sx:1.18;--sl:13%}
.mk--long  {--ss:.62;--sx:1.24;--sl:10%}
.mk--xlong {--ss:.48;--sx:1.20;--sl:9%}

/* ==========================================================================
   27. ГЛАВНАЯ: ОБЛОЖКА И ПЛИТКА РАЗДЕЛОВ
   ========================================================================== */
.s-cover{padding-block:calc(var(--u)*10) calc(var(--u)*8)}
.s-divs {padding-block:calc(var(--u)*2)  calc(var(--u)*14)}
.s-info {padding-block:calc(var(--u)*13) calc(var(--u)*11)}

.cover{
  min-height:calc(100svh - var(--bar-h) - var(--tick-h));
  align-content:center;row-gap:calc(var(--u)*4);position:relative;overflow:clip;
}
.cover__arcs{
  position:absolute;inset:0;pointer-events:none;
  color:color-mix(in oklab, var(--ink) 24%, var(--plane));
  width:100%;height:100%;
}
.cover__logo{
  grid-column:3/11;justify-self:center;width:100%;max-width:760px;position:relative;
}
.cover__logo img{width:100%;height:auto;display:block}
.cover__claim{
  grid-column:2/12;text-align:center;position:relative;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.25rem,3.1vw,2.75rem);line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;
}
.cover__claim em{font-style:normal;color:var(--red)}
.cover__meta{
  grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--u) calc(var(--u)*3);color:var(--ink-2);position:relative;
}
.cover__scroll{
  grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:var(--u);
  color:var(--ink-3);margin-top:calc(var(--u)*2);position:relative;
}
.cover__scroll svg{width:11px;height:16px;fill:currentColor;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.divs__head{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--u);color:var(--ink-2);border-bottom:1px solid currentColor;
  padding-bottom:var(--u);margin-bottom:calc(var(--u)*4)}

.divs{
  grid-column:1/-1;display:grid;gap:calc(var(--u)*2);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.div{
  --mkw:100%;
  display:flex;flex-direction:column;
  background:var(--paper-lt);color:var(--ink);text-decoration:none;
  border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  position:relative;isolation:isolate;
  transition:border-color 140ms linear, transform 140ms cubic-bezier(.2,.7,.2,1);
}
.div::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 260ms cubic-bezier(.2,.7,.2,1);
}
a.div:hover,a.div:focus-visible{border-color:var(--ink);transform:translateY(-3px)}
a.div:hover::before,a.div:focus-visible::before{transform:scaleX(1)}

.div__logo{
  display:grid;place-items:center;position:relative;isolation:isolate;
  padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*1.5);
  background:var(--paper-lt);
}
/* полупрозрачный кадр со студии под знаком раздела: адрес снимка приходит
   из разметки в --shot, карточка без него остаётся просто бумажной */
.div__logo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--shot, none);background-size:cover;background-position:center;
  opacity:.22;filter:grayscale(1) contrast(1.05);
  transition:opacity 200ms linear, filter 200ms linear;
}
a.div:hover .div__logo::after,a.div:focus-visible .div__logo::after{
  opacity:.34;filter:grayscale(0) contrast(1);
}
.div__logo>*{width:100%;aspect-ratio:960/390;position:relative}
.div__logo img{height:100%;object-fit:contain;display:block}
.div__body{
  display:flex;flex-direction:column;gap:calc(var(--u)*.75);
  padding:0 calc(var(--u)*3) calc(var(--u)*3);flex:1 1 auto;
}
.div__t{
  font-family:var(--display);font-weight:600;font-size:19px;line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;
}
.div__d{font-size:15px;line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.div__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--u);
  margin-top:auto;padding:calc(var(--u)*1.5) calc(var(--u)*3);
  border-top:1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  color:var(--ink-2);
}
a.div .div__foot{color:var(--red)}
.div__no{font-variant-numeric:tabular-nums slashed-zero}
.div--soon{border-color:color-mix(in oklab, var(--ink) 10%, transparent)}
.div--soon .div__logo{opacity:.6;filter:saturate(.05)}
.div--soon .div__t{color:var(--ink-2)}

/* информационный подвал главной */
.info__lead{grid-column:1/7;display:grid;gap:calc(var(--u)*2);align-content:start}
.info__h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.025em}
.info__contacts{grid-column:8/-1;display:grid;gap:0;align-content:start}
.info__contacts div{
  display:flex;justify-content:space-between;gap:calc(var(--u)*2);
  padding-block:calc(var(--u)*1.5);border-top:1px solid currentColor;
  font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.info__contacts div:last-of-type{border-bottom:1px solid currentColor}

.info__contacts dt{color:var(--ink-2)}
.info__contacts a{text-decoration-thickness:1px}
.info__cta{grid-column:8/-1;margin-top:calc(var(--u)*3)}
.info__note{color:var(--ink-2);margin-top:calc(var(--u)*2)}

/* ==========================================================================
   28. ПРАЙС ЗАНЯТИЙ (по прайс-листу студии)
   ========================================================================== */
.s-tariff{padding-block:calc(var(--u)*11) calc(var(--u)*13)}
.tariff{grid-column:1/-1;margin-top:calc(var(--u)*5)}
.tariff__head,.trow{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,3fr);
  column-gap:calc(var(--u)*2);align-items:stretch;
}
.tariff__head{
  padding-block:var(--u);border-bottom:1px solid currentColor;color:var(--ink-3);
}
.trow{margin-top:var(--u)}
.trow>*{display:flex;align-items:center;padding:calc(var(--u)*1.75) calc(var(--u)*2)}
.trow__n{
  background:var(--red);color:#fff;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.4vw,2.75rem);
  line-height:1;font-variant-numeric:tabular-nums;
}
.trow__t{
  background:var(--ink);color:var(--paper-lt);
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.5rem);
  letter-spacing:.02em;text-transform:uppercase;
}
.trow__p{
  background:var(--red);color:#fff;justify-content:flex-end;
  font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.25rem);
  line-height:1;font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap;
}
/* строки без абонемента: подпись занимает первые две колонки */
.trow--wide .trow__t{grid-column:1/3;background:var(--red);color:#fff}

.tariff__scope{
  grid-column:1/-1;margin-top:calc(var(--u)*4);
  border:1px solid color-mix(in oklab, var(--ink) 22%, transparent);
}
.tariff__scope h3{
  background:var(--red);color:#fff;margin:0;
  padding:calc(var(--u)*1.5) calc(var(--u)*2);
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.7vw,1.25rem);
  letter-spacing:.02em;text-transform:uppercase;
}
.tariff__scope p{
  padding:calc(var(--u)*2);color:var(--ink-2);
  font-family:var(--label);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.7;
}
.tariff__note{grid-column:1/-1;margin-top:calc(var(--u)*3);color:var(--ink-2);display:grid;gap:calc(var(--u)*.5)}

/* ==========================================================================
   29. СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ
   ========================================================================== */
.consent{
  display:grid;grid-template-columns:auto 1fr;gap:var(--u) calc(var(--u)*1.5);
  align-items:start;margin-bottom:calc(var(--u)*3);
}
.consent input{
  appearance:none;width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;
  border:1.5px solid currentColor;background:none;cursor:pointer;
  display:grid;place-content:center;
}
.consent input::after{
  content:"";width:11px;height:11px;background:var(--red);transform:scale(0);
  transition:transform 120ms cubic-bezier(.2,.7,.2,1);
}
.consent input:checked::after{transform:scale(1)}
.consent input:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.consent label{font-size:13.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.consent label a{color:var(--ink)}

/* ==========================================================================
   30. ЮРИДИЧЕСКАЯ СТРАНИЦА
   ========================================================================== */
.s-doc{padding-block:calc(var(--u)*9) calc(var(--u)*15)}
.doc{grid-column:2/10;display:grid;gap:calc(var(--u)*2);margin-top:calc(var(--u)*5)}
.doc h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:.01em;text-transform:uppercase;margin-top:calc(var(--u)*3);
}
.doc p,.doc li{font-size:15.5px;line-height:1.6;max-inline-size:70ch}
.doc ul{display:grid;gap:calc(var(--u)*.75);padding-left:calc(var(--u)*2.5)}
.doc li{list-style:disc}

/* ==========================================================================
   31. МОБИЛЬНАЯ ВЁРСТКА НОВЫХ БЛОКОВ
   ========================================================================== */
@media (max-width:1000px){
  .divs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .s-cover {padding-block:calc(var(--u)*5) calc(var(--u)*5)}
  .s-divs  {padding-block:calc(var(--u)*1) calc(var(--u)*8)}
  .s-info  {padding-block:calc(var(--u)*8) calc(var(--u)*7)}
  .s-tariff{padding-block:calc(var(--u)*7) calc(var(--u)*8)}
  .s-doc   {padding-block:calc(var(--u)*5) calc(var(--u)*9)}

  .cover{row-gap:calc(var(--u)*3)}
  .cover__logo{grid-column:1/-1;max-width:none}
  .cover__claim{grid-column:1/-1;font-size:clamp(1.15rem,5.6vw,1.75rem);text-align:left}
  .cover__meta{justify-content:flex-start;gap:calc(var(--u)*.5) calc(var(--u)*2)}
  .cover__scroll{justify-content:flex-start}

  .divs{grid-template-columns:1fr;gap:calc(var(--u)*1.5)}
  .div__logo{padding:calc(var(--u)*2.5) calc(var(--u)*2.5) var(--u)}
  .div__body{padding:0 calc(var(--u)*2.5) calc(var(--u)*2.5)}
  .div__foot{padding-inline:calc(var(--u)*2.5)}
  .div__t{font-size:17px}
  .div__d{font-size:14.5px}
  a.div:hover{transform:none}

  .info__lead,.info__contacts,.info__cta{grid-column:1/-1}
  .info__contacts{margin-top:calc(var(--u)*4)}

  /* прайс: абонемент и цена в строку, подпись под ними */
  .tariff__head{display:none}
  .trow{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"t t" "n p";
    gap:2px;margin-top:calc(var(--u)*1.5);
  }
  .trow__t{grid-area:t;font-size:16px;padding:calc(var(--u)*1.5)}
  .trow__n{grid-area:n;font-size:26px;justify-content:flex-start;padding:calc(var(--u)*1.25) calc(var(--u)*1.5)}
  .trow__p{grid-area:p;font-size:26px;padding:calc(var(--u)*1.25) calc(var(--u)*1.5)}
  /* строки без абонемента: подпись сверху, цена во всю ширину под ней */
  .trow--wide .trow__t{grid-column:auto}
  .trow--wide .trow__p{grid-column:1/-1;grid-row:2}
  .tariff__scope p{font-size:11.5px;line-height:1.8;padding:calc(var(--u)*1.5)}

  .doc{grid-column:1/-1}
}

/* ==========================================================================
   32. КАРТОЧКИ ПЕДАГОГОВ — фото, направления, короткий опыт
   ========================================================================== */
.staff{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:calc(var(--u)*3) calc(var(--u)*2)}
.staff figcaption{display:grid;gap:calc(var(--u)*.5)}
.tcard__dir{
  font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);
}
.plane--black .tcard__dir{color:#FF6A5E}
.tcard__exp{
  font-size:13.5px;line-height:1.45;color:color-mix(in oklab, var(--ink) 78%, var(--plane));
  text-transform:none;letter-spacing:0;text-wrap:pretty;
}
.staff .micro{text-transform:uppercase}

/* ==========================================================================
   33. ПРИМЕРЫ РАБОТ И ОТЗЫВЫ
   Разметка блоков лежит в studio.html и music.html закомментированной —
   стили готовы, остаётся вставить реальные треки и отзывы.
   ========================================================================== */
.s-works {padding-block:calc(var(--u)*11) calc(var(--u)*13)}
.s-revs  {padding-block:calc(var(--u)*11) calc(var(--u)*13)}

.works{
  grid-column:1/-1;display:grid;gap:calc(var(--u)*2);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:calc(var(--u)*5);
}
.work{
  border:1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  padding:calc(var(--u)*2);display:grid;gap:var(--u);
}
.work__t{
  font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:.02em;text-transform:uppercase;
}
.work__meta{color:var(--ink-2)}
.work__player{width:100%;border:0;display:block;background:var(--paper-2);min-height:88px}

.revs{
  grid-column:1/-1;display:grid;gap:calc(var(--u)*2);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:calc(var(--u)*5);
}
.rev{
  border-top:3px solid var(--red);padding-top:calc(var(--u)*2);
  display:grid;gap:var(--u);align-content:start;
}
.rev blockquote{margin:0;font-size:16px;line-height:1.5;text-wrap:pretty}
.rev figcaption{display:grid;gap:calc(var(--u)*.25)}
.rev b{font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:.02em;text-transform:uppercase}
.rev .micro{color:var(--ink-2)}

@media (max-width:767px){
  .s-works,.s-revs{padding-block:calc(var(--u)*7) calc(var(--u)*8)}
  .works,.revs{grid-template-columns:1fr}
}

/* --- 34. ДОВОДКА МОБИЛЬНОЙ ВЁРСТКИ ------------------------------------- */
@media (max-width:767px){
  /* каталог направлений занимал только 3 колонки из 4 — четверть экрана впустую */
  .cat{grid-column:1/-1}
  .cat__t{font-size:clamp(1.5rem,7vw,2rem)}

  /* педагоги: две колонки, иначе пять портретов дают бесконечную прокрутку */
  .staff{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*3) calc(var(--u)*1.5)}
  .staff b{font-size:17px}
  .tcard__dir{font-size:10px;letter-spacing:.1em}
  .tcard__exp{font-size:12.5px;line-height:1.4}

  /* строка контактов в шапке уже спрятана — оставляем воздух кнопке */
  .bar{gap:calc(var(--u)*1.25)}
  .bar__cta{letter-spacing:.06em}

  /* галерея кадров и планы залов — во всю ширину */
  .rider{grid-column:1/-1}
}

/* очень узкие экраны: знак в шапке уступает место кнопке */
@media (max-width:400px){
  .bar__logo img{width:56px;height:24px}
  .menu__btn{padding-inline:calc(var(--u)*.75)}
  .bar{gap:var(--u)}
  .bar__cta{padding-inline:var(--u);letter-spacing:.04em}
}

/* ниже 360px «к нам» уже не помещается — кнопка сокращается */
@media (max-width:359px){
  .bar__cta__tail{display:none}
}

/* ==========================================================================
   35. ПУЛЬС КОЛЕЦ — волна расходится от центра, как удар в бочку
   ========================================================================== */
/* Кольца пронумерованы в разметке (--i:0…6). Задержка растёт с номером,
   поэтому вспышка идёт наружу, а не мигает всеми кольцами разом.
   Анимируются только transform и opacity — композитор, без перерасчёта макета. */
.cover__arcs circle,
.hero__arcs circle{
  --beat:2.1s;
  --rings:6;
  transform-box:fill-box;transform-origin:center;
  opacity:.62;
  animation:arc-pulse var(--beat) cubic-bezier(.22,.9,.3,1) infinite;
  /* задержка отрицательная и убывает к краю: внутреннее кольцо ушло вперёд,
     поэтому волна расходится наружу, и при загрузке всё уже в движении */
  animation-delay:calc((var(--rings) - var(--i, 0)) * var(--beat) / -26);
}
@keyframes arc-pulse{
  0%   {transform:scale(1);     opacity:.55}
  6%   {transform:scale(1.03);  opacity:1}     /* удар */
  26%  {transform:scale(1);     opacity:.58}
  34%  {transform:scale(1.016); opacity:.84}   /* отскок, слабее */
  54%  {transform:scale(1);     opacity:.55}
  100% {transform:scale(1);     opacity:.55}
}
/* за экраном пульс не нужен — тот же флаг, что глушит бегущую строку */
html.js body:not(.hero-in) .cover__arcs circle,
html.js body:not(.hero-in) .hero__arcs circle{animation-play-state:paused}

/* ==========================================================================
   36. ШАПКА ПОШИРЕ, АДРЕС В ПОЛОСЕ, КРУПНЕЕ ТЕКСТ
   Правки заказчика: полоса выше, знаки соцсетей вровень с кнопкой «записаться
   к нам», адрес прибит в полосу и ведёт на Яндекс Карты, кегль по всему
   телефону крупнее — на нескольких аппаратах текст читался мелко.
   ========================================================================== */

/* --- 36.1 Полоса: кнопка, «Меню» и знаки соцсетей одной высоты ----------- */
.bar__logo{margin-right:0}
.menu__btn,.bar__cta{height:var(--ctl-h)}
.bar .soc{gap:calc(var(--u)*.5)}
.bar .soc a{width:var(--ctl-h);height:var(--ctl-h)}
.bar .soc svg{width:18px;height:18px}
.bar__cta,.menu__btn,.bar__tel{font-size:14px}
.ticker__run{font-size:12px}

/* адрес живёт в полосе и открывает Яндекс Карты */
.bar__addr{
  display:flex;align-items:center;gap:calc(var(--u)*.75);
  flex:0 1 auto;min-width:0;margin-right:auto;
  font-family:var(--label);font-weight:500;font-size:14px;
  text-decoration:none;white-space:nowrap;
}
.bar__addr svg{width:16px;height:16px;flex:0 0 auto;fill:var(--red)}
.bar__addr span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar__addr:hover span,.bar__addr:focus-visible span{
  text-decoration:underline;text-underline-offset:.28em;
}

/* адрес-ссылка в остальных местах — подчёркивание как у телефона */
.maplink{text-underline-offset:.28em}

/* --- 36.2 Полоса на телефоне: две строки --------------------------------- */
/* «Меню», знак, три соцсети и кнопка помещаются в одну строку только мелкими —
   а их просили увеличить. Разводим на две строки: управление сверху, адрес и
   соцсети снизу. Разрыв строки даёт ::before с базисом во всю ширину. */
@media (max-width:940px){
  :root{--bar-h:calc(var(--u)*12);--ctl-h:calc(var(--u)*4.75)}
  .bar{
    flex-wrap:wrap;align-content:center;
    row-gap:calc(var(--u)*.25);column-gap:calc(var(--u)*1.25);
    padding-inline:calc(var(--u)*1.5);
  }
  .bar::before{content:"";order:4;flex:0 0 100%;height:0}
  .bar .menu__btn{order:1}
  .bar__logo{order:2;margin-right:auto}
  .bar__cta{order:3}
  .bar__addr{order:5;margin-right:auto;font-size:13px}
  .bar__addr svg{width:15px;height:15px}
  .bar .soc{order:6}
  /* номер остаётся в меню, героях и подвале — в полосе его место занял адрес */
  .bar__tel{display:none}
  .bar__cta,.menu__btn{font-size:13px}
}
@media (max-width:400px){
  :root{--bar-h:calc(var(--u)*11.5);--ctl-h:calc(var(--u)*4.5)}
  .bar{column-gap:var(--u)}
  .bar .soc{gap:calc(var(--u)*.375)}
  .bar__addr{font-size:12px;gap:calc(var(--u)*.5)}
  .bar .soc svg{width:16px;height:16px}
}

/* --- 36.3 Крупнее текст по всему телефону -------------------------------- */
/* Тестировали на нескольких аппаратах: мелкий кегль читался плохо. Поднимаем
   общие токены и точечно те места, где размер зашит в пикселях. */
@media (max-width:767px){
  :root{
    --t-body:  1.125rem;    /* 18   */
    --t-cap:   .9375rem;    /* 15   */
    --t-micro: .90625rem;   /* 14.5 */
  }
  /* разрядка мелких прописных на телефоне только мешает читать */
  .micro{letter-spacing:.07em}
  .cap{letter-spacing:.11em}
  .prose{line-height:1.55}

  /* соцсети — палец, а не пиксель: знаки крупнее везде, не только в полосе */
  .soc a{width:calc(var(--u)*5);height:calc(var(--u)*5)}
  .soc svg{width:18px;height:18px}
  .soc--sm a{width:calc(var(--u)*4.25);height:calc(var(--u)*4.25)}
  .soc--sm svg{width:16px;height:16px}

  .cover__claim{font-size:clamp(1.25rem,6vw,1.75rem)}

  /* обложка теперь держит весь первый экран — подсказку «разделы ниже»
     уводим к нижнему краю, иначе стрелка висит посреди пустого поля */
  .cover__scroll{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*1.5);margin-top:0}

  .menu__no{font-size:13px}
  .menu__d{font-size:15.5px}
  .menu__soon{font-size:11px}

  .div__t{font-size:19px}
  .div__d{font-size:16px}

  .tl__desc{font-size:15.5px}
  .tl__soon span{font-size:12px}

  .room__spec li,.prow__spec,.place__list li,.cat__no,.pick__n{font-size:13px}
  /* подпись направления не сжималась и на узком экране вылезала за поле */
  .cat__meta{flex:1 1 100%;min-width:0}
  .info__contacts div,.foot__line{font-size:13px}
  .colophon{font-size:12px;line-height:1.75}
  .prow__name{font-size:34px}
  .prow__price{font-size:42px}

  .pick__t{font-size:23px}
  .field input,.field textarea{font-size:17px}
  .form__msg,.consent label{font-size:14.5px}

  .staff b{font-size:19px}
  .tcard__dir{font-size:11.5px}
  .tcard__exp{font-size:14px}

  .serv b{font-size:21px}
  .serv span:not(.num){font-size:16.5px}

  .rev blockquote{font-size:17px}
  .rev b{font-size:18px}

  .tariff__scope p{font-size:13px;letter-spacing:.05em;line-height:1.65}
  .doc p,.doc li{font-size:16.5px}
  .slab__t{font-size:18px}
}

/* ниже 360px «Мытищи» в полосу уже не влезают — город уходит, улица остаётся */
@media (max-width:359px){
  .bar__addr__city{display:none}
  /* подпись плашки на 320px не помещалась в поле — возвращаем прежний кегль */
  .slab__t{font-size:16.5px}
}
.bar__addr__city{font-style:normal}

/* ==========================================================================
   37. ПЛАВАЮЩИЙ ВИДЖЕТ КОНТАКТОВ (.cw)
   Чёрная тумба у нижнего угла: кнопка «Написать нам» и знаки связи.
   На телефоне сворачивается в красный корешок у левого края.
   ========================================================================== */
.cw{
  position:fixed;right:calc(var(--u)*2.5);bottom:calc(var(--u)*2.5);z-index:50;
  transition:opacity 160ms linear, transform 160ms linear;
}
/* пока открыта панель меню, тумбе на экране делать нечего */
body:has(.menu__box:checked) .cw{
  opacity:0;transform:translateY(calc(var(--u)*1.5));pointer-events:none;
}

.cw__panel{
  padding:calc(var(--u)*1.5);
  max-inline-size:calc(var(--u)*50);
  /* волосяная рамка: на чёрных плоскостях (подвал, «о нас») тумба иначе
     сливается с фоном и от неё остаётся только красный сдвиг */
  border:1px solid color-mix(in oklab, #FFFFFF 32%, transparent);
  /* плоская красная подложка вместо тени: печатный сдвиг, а не размытие */
  box-shadow:calc(var(--u)*.75) calc(var(--u)*.75) 0 0 var(--red);
  animation:cw-in 320ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes cw-in{from{opacity:0;transform:translateY(calc(var(--u)*2))}to{opacity:1;transform:none}}

.cw__row{display:flex;align-items:center;gap:var(--u)}

.cw__write{
  flex:1 1 auto;height:calc(var(--u)*6);padding-inline:calc(var(--u)*2.5);
  display:flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--red);color:var(--paper);text-decoration:none;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background-color 120ms linear, color 120ms linear;
}
.cw__write b{color:var(--peak);font-size:.8em;line-height:1}
.cw__write:hover,.cw__write:focus-visible{background:var(--paper);color:var(--black)}
.cw__write:hover b,.cw__write:focus-visible b{color:var(--red)}

/* знаки связи — та же рамка, что у соцсетей в полосе */
.cw__ic{
  flex:0 0 auto;width:calc(var(--u)*6);height:calc(var(--u)*6);
  display:flex;align-items:center;justify-content:center;
  color:inherit;text-decoration:none;
  border:1px solid color-mix(in oklab, currentColor 38%, transparent);
  transition:background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.cw__ic:hover,.cw__ic:focus-visible{background:var(--red);border-color:var(--red);color:#FFFFFF}
.cw__ic svg{width:17px;height:17px;display:block;fill:currentColor}

.cw__note{margin-top:calc(var(--u)*1.5);text-align:center;color:var(--ink-2)}

/* кнопка «Контакты» и крестик — только на телефоне */
.cw__tab{
  display:none;align-items:center;justify-content:center;gap:.5em;
  border:0;cursor:pointer;
  height:calc(var(--u)*6);padding-inline:calc(var(--u)*2.5);
  background:var(--red);color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  /* та же печатная подложка, что у тумбы, только чёрная по красному */
  box-shadow:calc(var(--u)*.75) calc(var(--u)*.75) 0 0 var(--black);
  transition:background-color 120ms linear, opacity 200ms linear, transform 320ms cubic-bezier(.4,0,.2,1);
}
.cw__tab b{color:var(--peak);font-size:.8em;line-height:1}
.cw__tab:hover{background:var(--black)}
.cw__close{
  display:none;position:absolute;top:calc(var(--u)*.5);right:calc(var(--u)*.5);
  width:calc(var(--u)*4);height:calc(var(--u)*4);
  align-items:center;justify-content:center;
  border:0;background:none;color:inherit;cursor:pointer;
  font-size:24px;line-height:1;
  transition:color 120ms linear;
}
.cw__close:hover{color:var(--red)}

@media (max-width:767px){
  /* на телефоне тумба, как и на широком экране, живёт в правом нижнем углу:
     красная кнопка «Контакты», по нажатию над ней раскрывается панель.
     Корешок у левого края посреди экрана заказчику мешал. */
  .cw{right:calc(var(--u)*2);bottom:calc(var(--u)*2)}
  .cw__tab{display:flex}
  .cw--open .cw__tab{opacity:0;pointer-events:none;transform:translateY(calc(var(--u)*1.5))}
  .cw__close{display:flex}
  .cw__panel{
    position:absolute;right:0;bottom:0;z-index:52;
    width:min(calc(var(--u)*44),calc(100vw - var(--u)*4));max-inline-size:none;
    padding:calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*2);
    transform:translateY(calc(var(--u)*2));opacity:0;pointer-events:none;
    animation:none;
    transition:transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms linear;
  }
  .cw--open .cw__panel{transform:none;opacity:1;pointer-events:auto}
  .cw__row{flex-wrap:wrap;justify-content:center}
  .cw__write{flex:1 1 100%;order:1;height:calc(var(--u)*5.5)}
}

/* ==========================================================================
   38. ЕДИНЫЙ КЕГЛЬ ПО ВСЕМУ САЙТУ
   Заказчик собрал отзывы: четверо сказали «не понятно, что написано, читать
   не хочется». Токены --t-body/--t-cap/--t-micro подняты в :root, здесь —
   те места, где размер был зашит в пикселях. Правило: ничего мельче 14px.
   ========================================================================== */
.ticker__run{font-size:13px}
.bar__cta,.menu__btn,.bar__tel{font-size:15px}
.bar__addr{font-size:15px}
.menu__no{font-size:14px}
.menu__d{font-size:16px}
.menu__soon{font-size:12px}
.rail{font-size:13px}
/* маргиналия «Оборудование» живёт в одной колонке сетки — крупнее не влезает */
.rail__no{font-size:13px;letter-spacing:.05em}
.hero__vert{font-size:13px}
.hero__side .prose{font-size:clamp(1.25rem,1.5vw,1.5rem)}
.stamp{font-size:14px}
.matrix{font-size:12px}

.tl__no{font-size:14px}
.tl__desc{font-size:17px;line-height:1.4}
.tl__soon span{font-size:13px}

.rider{font-size:14px;line-height:20px}
.rider h3{font-size:13px}

.field input,.field textarea{font-size:18px}
.pick__n{font-size:14px}
.pick__t{font-size:24px}
.form__msg,.consent label{font-size:15px}

.foot__line{font-size:14px}
.colophon{font-size:13px}

.cat__no{font-size:14px}
.place__list li{font-size:15px}
.staff b{font-size:22px}
.tcard__dir{font-size:13px}
.tcard__exp{font-size:15.5px}
.serv b{font-size:25px}
.serv span:not(.num){font-size:17.5px}
.div__t{font-size:21px}
.div__d{font-size:17px}
.info__contacts div{font-size:15px}
.tariff__scope p{font-size:15px;letter-spacing:.06em}
.doc p,.doc li{font-size:17.5px}
.rev blockquote{font-size:18px}
.rev b{font-size:18px}
.work__t{font-size:21px}
.dir__lead{font-size:clamp(1.25rem,1.7vw,1.625rem)}
.cw__write{font-size:16px}

/* список залов в герое аренды — тот же кегль подписей, что и везде */
.hero__rooms{display:grid;gap:0}
.hero__rooms li{
  font-family:var(--label);font-size:var(--t-cap);letter-spacing:.06em;
  text-transform:uppercase;
}

/* обложка: адрес, часы и «разделы ниже» — некоторые не листают и не
   понимают, куда попали. Строка теперь размером с подпись, а не с примечание */
.cover__meta{font-size:clamp(1rem,1.4vw,1.25rem);letter-spacing:.08em}
.cover__scroll{font-size:var(--t-cap)}

@media (max-width:767px){
  .menu__d{font-size:16.5px}
  .tl__desc{font-size:17px}
  .prow__spec,.place__list li,.cat__no,.pick__n{font-size:15px}
  .info__contacts div,.foot__line{font-size:14.5px}
  .colophon{font-size:13.5px}
  .prow__name{font-size:36px}
  .prow__price{font-size:44px}
  .tcard__dir{font-size:13px}
  .tcard__exp{font-size:15px}
  .serv b{font-size:23px}
  .serv span:not(.num){font-size:17px}
  .tariff__scope p{font-size:14.5px}
  .doc p,.doc li{font-size:17px}
  .field input,.field textarea{font-size:18px}
  .cover__meta{font-size:16px;letter-spacing:.06em}
  .room__sub{font-size:clamp(1.25rem,5.5vw,1.75rem)}
  .room__spec li{font-size:18px}
}

/* ==========================================================================
   39. ШАПКА В ДВА ЯРУСА, ЗНАКИ СОЦСЕТЕЙ БЕЗ РАМОК
   Правки заказчика: «шапка немного хаотичная, как бы нам красиво всё
   расположить?» и «может рамки убрать у соцсетей, оставить просто значки?».
   На телефоне полоса разъезжалась на три строки — управление, адрес и знаки
   шли друг под другом вразнобой. Снимаем рамки (знаки перестают спорить с
   кнопкой и «Меню» и занимают втрое меньше места), а полосу собираем в два
   ровных яруса с волосяным разделителем.
   ========================================================================== */

/* --- 39.1 Соцсети — только значки, без рамок ----------------------------- */
.soc{gap:calc(var(--u)*.25)}
.soc a{
  border:0;background:none;
  color:color-mix(in oklab, currentColor 72%, transparent);
  transition:color 120ms linear;
}
.soc a:hover,.soc a:focus-visible{background:none;border-color:transparent;color:var(--red)}
/* без рамки знак читается только за счёт самого рисунка — поднимаем кегль */
.soc svg{width:18px;height:18px}
.soc--sm{gap:calc(var(--u)*.25)}
.soc--sm svg{width:16px;height:16px}
/* в строке подвала знаки стоят среди текста — коробка по размеру рисунка,
   иначе строка распирается пустотой на месте бывших рамок */
.foot__line .soc--sm a{width:calc(var(--u)*2.75);height:calc(var(--u)*2.75)}

/* в панели меню знаки стоят под текстом — подрезаем поле слева, иначе
   без рамок значок висит с отступом от общего края набора */
.menu__soc{gap:0;margin-left:calc(var(--u)*-1.375)}

/* --- 39.2 Полоса: два яруса вместо трёх ---------------------------------- */
/* Верх — «Меню», знак и кнопка записи. Низ — адрес и соцсети по краям.
   Волосяная линия между ними показывает, что это два яруса, а не свалка. */
@media (max-width:940px){
  :root{--bar-h:calc(var(--u)*11)}
  .bar{row-gap:0;column-gap:calc(var(--u)*1.25)}
  .bar::before{
    height:0;margin-block:calc(var(--u)*.875);
    border-top:1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  }
  /* узкая, но высокая зона нажатия: по ширине — вровень со значком,
     по высоте — на весь ярус, чтобы попадать пальцем */
  .bar .soc{gap:0;margin-right:calc(var(--u)*-.75)}
  .bar .soc a{width:calc(var(--u)*3.75);height:calc(var(--u)*3.25)}
  .bar .soc svg{width:19px;height:19px}
  /* адрес забирает остаток яруса, но базис нулевой: иначе при переносе
     строк знаки соцсетей уезжали на третий ярус и вываливались из полосы */
  .bar__addr{order:5;flex:1 1 0;min-width:0;margin-right:0}
}
/* на узких аппаратах (360, 375) город в ярус уже не помещается — улица
   с домом остаются, ссылка всё равно открывает карту с меткой */
@media (max-width:384px){
  .bar__addr__city{display:none}
}
@media (max-width:400px){
  .bar .soc a{width:calc(var(--u)*3.25);height:calc(var(--u)*3.25)}
  .bar .soc svg{width:18px;height:18px}
}

/* --- 39.3 Таблица контактов — «тут бы тоже чуть причесать» --------------- */
/* Широкий экран: значение прижато к правому краю — многострочный адрес
   выравнивается по колонке, а не висит рваным столбиком посреди строки. */
@media (min-width:768px){
  .info__contacts dd{text-align:right}
  .info__contacts dd.soc{justify-content:flex-end;margin-right:calc(var(--u)*-.75)}
}
/* Телефон: в две колонки «ориентир» и адрес ломались посреди слова и
   наезжали на подпись. Разводим подпись и значение по строкам. */
@media (max-width:767px){
  .info__contacts div{
    display:grid;justify-items:start;
    gap:calc(var(--u)*.75);padding-block:calc(var(--u)*1.5);
  }
  .info__contacts dt{font-size:.85em;letter-spacing:.12em}
  .info__contacts dd{max-width:100%}
  /* значок без рамки выставляем по левому краю колонки, как текст выше */
  .info__contacts dd.soc{margin-left:calc(var(--u)*-1.125)}
  .info__contacts dd.soc a{width:calc(var(--u)*4.25);height:calc(var(--u)*3)}
  .info__contacts dd.soc svg{width:18px;height:18px}
}