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

@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}

/* --- 1. ТОКЕНЫ ----------------------------------------------------------- */
:root{
  --paper:    #EDE7DB;
  --paper-2:  #E2DBCC;
  --ink:      #0B0A09;
  --pencil:   #8C877D;

  --red:      #C3231E;
  --orange:   #DD6413;
  --green:    #1E5B3F;
  --black:    #151312;

  --paper-lt: #F7F3EC;
  --ochre:    #7E5A10;
  --peak:     #FF3B2E;

  --plane: var(--paper);

  --u: 8px;
  --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;

  --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);
  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-cap:   clamp(.6875rem, .78vw, .8125rem);
  --t-micro: .6875rem;

  --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(--u)*12)}

/* плёночное зерно — один слой на весь документ */
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:calc(var(--bleed) / var(--chars, 4));
  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. ПЛОСКОСТИ -------------------------------------------------------- */
.plane{background:var(--plane);color:var(--ink);position:relative;isolation:isolate}
.plane--paper2{--plane:var(--paper-2)}
.plane--red   {--plane:var(--red);   --ink:#EDE7DB}
.plane--orange{--plane:var(--orange);--ink:#0B0A09}
.plane--green {--plane:var(--green); --ink:#EDE7DB}
.plane--black {--plane:var(--black); --ink:#EDE7DB}
.plane--red .cap,.plane--red .micro{color:var(--paper-lt)}
.plane--red .datum{color:var(--paper-lt)}
.plane--orange .datum,.plane--green .datum,.plane--black .datum{color:var(--ink)}

/* неровность краски */
.plane--red::before,.plane--orange::before,
.plane--green::before,.plane--black::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:calc(var(--u)*7);
  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:93px;height:35px;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:calc(var(--u)*3.5);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:calc(var(--u)*7) 0 0 0;z-index:55;
  --plane:var(--black);--ink:#EDE7DB;
  background:var(--black);color:#EDE7DB;
  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,.bar__tel{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;
}

/* фейдер цены */
.fader{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.fader__track{display:flex;gap:var(--u);align-items:stretch}
.fader__scale{
  display:flex;flex-direction:column;justify-content:space-between;
  height:var(--slot,40svh);color:var(--ink-2);
}
.fader__slot{width:3px;height:var(--slot,40svh);background:currentColor;position:relative;flex:0 0 3px}
.fader__mark{
  position:absolute;left:-10px;width:23px;height:3px;background:currentColor;
  bottom:calc(var(--pos) - 3px);
  transition:bottom 480ms cubic-bezier(.2,.8,.2,1);
}
html.js .fader:not(.is-in) .fader__mark{bottom:0}
.fader__val{
  font-family:var(--display);font-weight:600;font-size:var(--t-data);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap;
}
.fader__cap{margin-top:calc(var(--u)*.5);color:var(--ink-2)}

/* штамп «НОЧЬ» — ровно один на сайт */
.stamp{
  font-family:var(--display);font-weight:700;font-size:13px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--ochre);border:1.5px solid var(--ochre);
  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)}
.s-price {padding-block:calc(var(--u)*8)  calc(var(--u)*34)}
.s-rider {padding-block:calc(var(--u)*3)  calc(var(--u)*13)}
.s-teach {padding-block:calc(var(--u)*21) 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-spec  {padding-block:calc(var(--u)*13) calc(var(--u)*17)}
.s-chain {padding-block:calc(var(--u)*13) calc(var(--u)*21)}
.s-cat   {padding-block:calc(var(--u)*11) 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);
}
.hero__mark{grid-column:1/-1;grid-row:1;position:relative;display:grid;padding-left:calc(var(--u)*3)}
.hero__body>.datum{grid-column:1/-1;grid-row:2}
.hero__giant{grid-area:1/1;position:relative;z-index:1}
.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:9/-1;grid-row:3;display:flex;flex-direction:column;gap:calc(var(--u)*2);justify-content:flex-end}
.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. ЗАЛЫ ------------------------------------------------------------ */
.room{
  min-height:100svh;padding-block:calc(var(--u)*5);
  align-content:space-between;row-gap:calc(var(--u)*5);position:relative;
  overflow:clip;
}
.room__stage,.room__foot{
  grid-column:1/-1;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);
  position:relative;
}
.room__stage{grid-row:1}
.room__foot{grid-row:2;align-items:end;row-gap:calc(var(--u)*4)}
.room__name{grid-column:1/-1;grid-row:1;position:relative;z-index:3}
.room__plate{position:relative;z-index:1}
.room__plan{position:relative;z-index:1;width:100%;height:auto}
.room__spec{grid-column:2/7;display:grid;gap:calc(var(--u)*.5)}
.room__spec li{font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.room__num{grid-column:8/11}
.room__figplan svg{width:100%;max-width:300px;height:auto;display:block}
.room__figplan figcaption{margin-top:var(--u);color:var(--ink-2)}
.room__cta{grid-column:11/-1}
.room__note{grid-column:2/9}

.room--01 .room__plate{grid-column:9/-1;grid-row:1;align-self:end;margin-top:calc(var(--u)*9)}

.room--02 .room__stage{margin-block-start:calc(var(--u)*7)}
.room--02 .room__name{grid-column:1/12}
.room--02 .room__plate{grid-column:1/5;grid-row:2;margin-top:calc(var(--u)*3)}

.room--03 .room__stage{grid-row:2}
.room--03 .room__foot{grid-row:1}
.room--03 .room__plate{grid-column:7/12;grid-row:1;margin-top:calc(var(--u)*-9)}
.room--03 .room__name{grid-row:2;margin-top:calc(var(--u)*4)}
.room--03 .room__num{grid-column:2/6;grid-row:1}
.room--03 .room__spec{grid-row:2}
.room--03 .room__note{grid-row:3}

.room--04 .room__plan{grid-column:1/5;grid-row:1;align-self:end;max-width:340px;margin-top:calc(var(--u)*14)}
.room--04 .room__plate{grid-column:1/5;grid-row:1;align-self:end;margin-top:calc(var(--u)*12)}
/* фото занимает левую часть — уводим строку данных вправо, чтобы не легла на кадр */
.room--04 .room__name .datum{text-align:right}
.room--04 .room__name{grid-column:3/-1;grid-row:1}

/* --- 13. ПРАЙС ----------------------------------------------------------- */
.faders{
  grid-column:2/12;display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(var(--u)*3);margin-block:calc(var(--u)*7);
  --slot:22svh;
}
.faders .fader__val{font-size:clamp(1.5rem,2.6vw,2.5rem)}
.ptable{grid-column:2/12;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(--orange)}
.sw-03{background:var(--green)} .sw-04{background:var(--black)}
.prow__name{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.5rem);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:12px;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:2/8;margin-top:calc(var(--u)*3);color:var(--ink-2);display:grid;gap:calc(var(--u)*.5)}
.figures{grid-column:2/12;display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:calc(var(--u)*6);margin-top:calc(var(--u)*12)}
.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. РАЙДЕР ---------------------------------------------------------- */
.spec-filter{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:1px;margin-bottom:calc(var(--u)*5)}
.spec-filter input{position:absolute;opacity:0;pointer-events:none}
.spec-filter label{
  cursor:pointer;padding:calc(var(--u)*1.5) calc(var(--u)*2);
  border:1px solid currentColor;
  transition:background-color 120ms linear, color 120ms linear;
}
#f-all:checked ~ label[for="f-all"]{background:var(--ink);color:var(--plane)}
#f-01:checked ~ label[for="f-01"]{background:var(--red);color:var(--paper)}
#f-02:checked ~ label[for="f-02"]{background:var(--orange);color:var(--ink)}
#f-03:checked ~ label[for="f-03"]{background:var(--green);color:var(--paper)}
#f-04:checked ~ label[for="f-04"]{background:var(--black);color:var(--paper)}
.spec-wrap:has(#f-01:checked) .rider li[data-ch]:not([data-ch~="01"]){display:none}
.spec-wrap:has(#f-02:checked) .rider li[data-ch]:not([data-ch~="02"]){display:none}
.spec-wrap:has(#f-03:checked) .rider li[data-ch]:not([data-ch~="03"]){display:none}
.spec-wrap:has(#f-04:checked) .rider li[data-ch]:not([data-ch~="04"]){display:none}

.exhibits{grid-column:1/-1;display:flex;flex-wrap:wrap;
  gap:calc(var(--u)*2) calc(var(--u)*4);margin-bottom:calc(var(--u)*-3);position:relative;z-index:1}
.exhibit{display:flex;align-items:baseline;gap:var(--u)}
.exhibit b{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,3rem);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
}
.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}

/* --- 15. ПЕДАГОГ --------------------------------------------------------- */
.teach__names{grid-column:1/8;grid-row:1;position:relative;display:grid}
.teach__stack{grid-area:1/1;font-family:var(--display);font-weight:700;
  line-height:.84;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink-2)}
.teach__stack span{display:block}
.tn-1{font-size:clamp(2.5rem,7.5vw,7rem)}
.tn-2{font-size:clamp(1.8rem,5.4vw,5.04rem)}
.tn-3{font-size:clamp(1.45rem,4.35vw,4.06rem)}
.teach__alias{
  grid-area:1/1;align-self:end;justify-self:start;color:var(--paper);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.25rem,6.4vw,5.75rem);line-height:.82;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  margin-left:20%;margin-bottom:calc(var(--u)*-2);position:relative;z-index:1;
}
.teach__table{grid-column:8/-1;grid-row:1;display:grid;align-content:start;gap:0;align-self:end}
.teach__table div{
  display:flex;justify-content:space-between;gap:calc(var(--u)*2);
  padding-block:calc(var(--u)*1.5);border-bottom:1px solid currentColor;
  font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.teach__table dt{color:var(--ink-2)}
.teach__portrait{grid-column:8/-1;grid-row:4;max-width:340px;justify-self:end;
  margin-top:calc(var(--u)*-4);margin-left:calc(var(--u)*-4)}
.teach__prose{grid-column:1/7;grid-row:4;margin-top:calc(var(--u)*5);align-self:start}
.teach__cred{grid-column:1/7;grid-row:5;margin-top:calc(var(--u)*3);display:grid;gap:calc(var(--u)*.5);
  color:var(--ink-2)}

/* --- 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__aside{grid-column:9/-1;margin-top:calc(var(--u)*6);display:grid;gap:calc(var(--u)*2);
  align-content:start}

/* --- 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{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)}

/* --- 18. СПЕКТР (music) -------------------------------------------------- */
.spectrum{grid-column:1/-1;margin-top:calc(var(--u)*4);
  border:1.5px solid currentColor;padding:calc(var(--u)*3) calc(var(--u)*2) var(--u)}
.spectrum__bars{display:grid;gap:calc(var(--u)*1.5);position:relative}
.sbar{position:relative;height:calc(var(--u)*5);display:block}
.sbar__fill{
  position:absolute;top:0;bottom:0;
  left:var(--x1);width:calc(var(--x2) - var(--x1));
  display:flex;align-items:center;gap:var(--u);padding-inline:var(--u);
  transition:background-color 80ms steps(2), color 80ms steps(2);
  overflow:hidden;
}
.sbar__fill span{margin-left:auto;white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.sbar__fill b{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.f-red{background:var(--red);color:var(--paper)}
.f-orange{background:var(--orange);color:var(--ink)}
.f-ink{background:var(--ink);color:var(--plane)}
.f-green{background:var(--green);color:var(--paper)}
.f-line{border:1.5px solid currentColor}
.sbar:hover .sbar__fill{background:var(--ink);color:var(--plane)}
.axis{position:relative;height:calc(var(--u)*4);margin-top:calc(var(--u)*2);
  border-top:1px solid currentColor}
.axis i{position:absolute;top:0;left:var(--x);width:1px;height:6px;background:currentColor}
.axis b{position:absolute;top:9px;left:var(--x);transform:translateX(-50%);
  font-family:var(--label);font-size:10px;letter-spacing:.06em;font-weight:400;
  font-variant-numeric:tabular-nums}
.spectrum__corner{display:flex;justify-content:space-between;color:var(--ink-2);
  margin-bottom:calc(var(--u)*2)}

/* --- 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)}

/* --- 20. СХЕМА ЦЕПИ (studio) -------------------------------------------- */
.chain{grid-column:1/6}
.chain__box{border:1.5px solid currentColor;padding:calc(var(--u)*2);
  font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.chain__link{display:block;margin-inline:auto}
.chain__text{grid-column:6/-1;display:grid;gap:calc(var(--u)*3);align-content:start}

/* --- 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)*17)}
  .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-spec {padding-block:calc(var(--u)*7)  calc(var(--u)*17)}
  .s-cat  {padding-block:calc(var(--u)*10) calc(var(--u)*5)}
  .s-rider{padding-block:calc(var(--u)*3)  calc(var(--u)*7)}
  .s-chain{padding-block:calc(var(--u)*7)  calc(var(--u)*11)}
  .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:74px;height:28px}
  .bar__cta{width:calc(var(--u)*13);font-size:11px}
  .menu__btn{font-size:11px;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}
  .hero__side{grid-column:1/-1;grid-row:auto}
  .hero__slab{grid-column:1/-1;grid-row:auto}
  .hero__body>.datum{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)*4);row-gap:calc(var(--u)*4)}
  .room__stage,.room__foot{grid-template-columns:repeat(4,minmax(0,1fr))}
  .room__stage>*,.room__foot>*{grid-column:1/-1 !important;grid-row:auto !important}
  .room--02 .room__stage,.room--03 .room__stage{margin-block-start:0}
  .room--03 .room__plate{margin-top:calc(var(--u)*3)}

  /* фейдер ложится горизонтально */
  .fader{flex-direction:column;align-items:stretch;gap:calc(var(--u)*1.5);width:100%}
  .fader__scale{flex-direction:row-reverse;justify-content:space-between;height:auto;width:100%}
  .fader__slot{width:100%;height:3px;flex:0 0 3px}
  .fader__mark{
    left:calc(var(--pos) - 12px);bottom:-10px;width:3px;height:23px;
    transition:left 480ms cubic-bezier(.2,.8,.2,1);
  }
  html.js .fader:not(.is-in) .fader__mark{bottom:-10px;left:0}
  .fader__val{font-size:40px}
  .fader__body{display:flex;align-items:baseline;justify-content:space-between;gap:var(--u)}

  .faders{grid-column:1/-1;grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .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)}

  .spec-filter{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--u)}
  .spec-filter label{white-space:nowrap}
  .exhibits{flex-direction:column;gap:calc(var(--u)*1.5)}
  .exhibit b{font-size:22px}
  .rider{grid-column:1/-1;column-count:1}

  .teach__names{grid-column:1/-1}
  .teach__table{grid-column:1/-1;margin-top:calc(var(--u)*4)}
  .teach__portrait{grid-column:2/-1;margin:calc(var(--u)*4) 0 0}
  .teach__prose,.teach__cred{grid-column:1/-1}
  .teach__alias{margin-left:8%}

  .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}

  .chain,.chain__text{grid-column:1/-1}
  .chain__text{margin-top:calc(var(--u)*4)}
  .sbar{height:auto}
  .sbar__fill{position:relative;left:0;width:100%;height:auto;min-height:calc(var(--u)*6);
    flex-direction:column;align-items:flex-start;gap:0;padding-block:calc(var(--u)*.75)}
  .sbar__fill span{margin-left:0;white-space:normal}
  .axis{display:none}
  .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}
  html.js .fader:not(.is-in) .fader__mark{bottom:calc(var(--pos) - 3px)}
  ::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)*2)}
.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:9/-1;margin-top:calc(var(--u)*5);align-self:start}
.serv__courses .micro{color:var(--ink-2)}
.serv__big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.05;letter-spacing:-.01em;
  text-transform:uppercase;margin-top:calc(var(--u)*2);
}

/* концерты */
.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(auto-fit,minmax(240px,1fr));align-items:start;
}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:var(--ar,3/2);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)}
}