/* ---- blues-doctors-home-warm-v23-header-cta [style #0] ---- */
/* Typography v12: RU display = Podkova ExtraBold (Cyrillic slab companion to Bowlby One SC); EN display = Bowlby One SC; UI = Oswald; body = Manrope; script accents = Oleo Script. Google Fonts are loaded with display=block to avoid a persistent fallback look. */
:root{
  --bg:#050607; --panel:#0b0d0f; --panel2:#101317; --line:rgba(255,255,255,.09);
  --text:#f2f4f5; --muted:#aeb5bb; --soft:#7b8389; --accent:#c9864a; --accent2:#e1b06a;
  --radius:28px; --container:1440px; --display-font:'Podkova','Roboto Slab',Georgia,serif; --display-weight:800;
}
*{box-sizing:border-box}
html[lang="en"]{--display-font:'Bowlby One SC','Podkova',serif;--display-weight:400}
/* Фикс-шапка перекрывает цель внутристраничной ссылки: без этого
   заголовок секции уезжает под неё (замер: 41-53 px на 1280, до 174 px
   на 768). Значения на 20 px больше высоты шапки на тех же брейкпоинтах —
   чтобы заголовок не прилипал к её нижней кромке. */
html{scroll-behavior:smooth;scroll-padding-top:105px}
@media(max-width:900px){html{scroll-padding-top:226px}}
@media(max-width:760px){html{scroll-padding-top:202px}}

/* ===== ПЕРВЫЙ ЭКРАН НА УЗКИХ ТЕЛЕФОНАХ =====

   Шапка position:fixed, и до 600px её высота 214px: семь пунктов меню не
   помещаются в строку и переносятся на вторую. Верхний отступ у героев при
   этом 116-124px, то есть кикер и заголовок оказывались ПОД шапкой: на 375px
   пряталось 65px, на 320px до 94px. Прокрутить к ним нельзя, шапка едет
   вместе со страницей.

   Тот же дефект есть и в исходных макетах (проверено Playwright: на 375px
   под шапкой 52px), но повторять его незачем: заголовок первого экрана это
   первое, что человек должен прочитать.

   Селекторы с body повышают специфичность намеренно. Правила вида
   .mu-hero{padding:...} лежат в css отдельных разделов, а те подключаются
   ПОСЛЕ base.css: без body они бы перебивали это правило.

   Значение 234px = высота шапки 214 плюс воздух. Если в меню добавится
   восьмой пункт и шапка вырастет, значение надо пересчитать: проверить
   можно тем же прогоном, что и правило выше про scroll-padding-top. */
@media(max-width:599px){
  body .hero,
  body .bp-hero,
  body .artist-hero,
  body .af-hero,
  body .ai-hero,
  body .mu-hero,
  body .ph-hero,
  body .ev-hero,
  body .vh,
  body .ct-hero{padding-top:234px}
}

body{margin:0;background:radial-gradient(circle at top,#0b0f12 0%,#050607 32%),#050607;color:var(--text);font-family:Manrope,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(calc(100% - 40px),var(--container));margin:0 auto}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px;font:600 13px/1 'Oswald',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:34px;height:1px;background:var(--accent)}
.section-title{margin:0;font-family:var(--display-font);font-size:clamp(38px,4.7vw,76px);font-weight:var(--display-weight);line-height:.98;text-transform:uppercase;letter-spacing:-.04em;color:#fff}
.section-text{margin:18px 0 0;max-width:640px;color:var(--muted);font-size:16px;line-height:1.8}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:16px;border:1px solid var(--line);font:600 14px/1 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:.25s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:transparent;color:#031014;box-shadow:0 10px 30px rgba(201,134,74,.25)}
.btn-secondary{background:transparent;color:#fff}

.header{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(5,6,7,.68);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
/* height:auto обязателен: у <img> внутри стоят width/height, и без этого
   правила высота берётся из атрибута — логотип 360x165 сплющивался. */
.header__logo{width:150px;flex:0 0 auto}
.header__logo img{width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center}
.nav a{font:600 12px/1 'Oswald',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d9e0e4}
.header__cta{height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(201,134,74,.45);font-size:12px}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 80px}
.hero__bg{position:absolute;inset:0;background:url('../images/hero-bg.jpg') center/cover no-repeat;filter:grayscale(1) contrast(1.08) brightness(.55)}
.hero__bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.94) 0%,rgba(5,6,7,.82) 34%,rgba(5,6,7,.48) 62%,rgba(5,6,7,.68) 100%),linear-gradient(180deg,rgba(5,6,7,.26) 0%,rgba(5,6,7,.05) 28%,rgba(5,6,7,.78) 100%)}
.hero__bg::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(180deg,transparent, #050607)}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,610px) 1fr;gap:20px;align-items:end;min-height:680px}
.hero__content{padding-bottom:24px}
.hero__title{margin:0;font-family:var(--display-font);font-size:clamp(38px,4.4vw,68px);font-weight:var(--display-weight);line-height:1.02;text-transform:none;letter-spacing:-.03em;max-width:520px}
.hero__text{max-width:470px;margin:20px 0 0;color:#c9d0d5;font-size:17px;line-height:1.75}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero__meta{display:flex;align-items:center;gap:14px;margin-top:20px;color:#dbe5e9;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.hero__meta .pin{color:var(--accent)}
.hero__ghostlogo{justify-self:end;align-self:start;opacity:.12;font-family:var(--display-font);font-size:clamp(82px,10vw,180px);font-weight:var(--display-weight);line-height:.9;text-transform:uppercase;letter-spacing:-.06em;filter:grayscale(1)}
.hero__ghostlogo span{display:block;font-family:'Oleo Script',cursive;text-transform:none;font-size:.7em;letter-spacing:0}

.about{padding:92px 0 44px}
.about__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:22px;align-items:stretch}
.about__card{background:linear-gradient(180deg,#0b0d0f,#0a0c0e);border:1px solid var(--line);border-radius:var(--radius);padding:38px 36px;overflow:hidden;position:relative}
.about__stat{display:flex;align-items:flex-end;gap:14px;margin-top:30px}
.about__stat strong{font:800 72px/.9 'Oswald',sans-serif;color:var(--accent)}
.about__stat span{font:700 13px/1.2 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dde7eb}
.about__photo{border-radius:var(--radius);overflow:hidden;min-height:520px;border:1px solid var(--line);background:url('../images/about-photo.jpg') center/cover no-repeat;filter:grayscale(1) contrast(1.06) brightness(.78)}

.formats{padding:24px 0 30px}
.formats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.format{background:linear-gradient(180deg,#0d1013,#0a0c0f);border:1px solid var(--line);border-radius:22px;padding:26px 22px;min-height:195px;display:flex;flex-direction:column}
.format__icon{width:50px;height:50px;border-radius:16px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--accent);background:rgba(201,134,74,.07)}
.format__icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.format h3{margin:18px 0 0;font:600 24px/1.05 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.format p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.7}

.band{padding:42px 0 44px}
.band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.member{position:relative;min-height:420px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#0b0d0f;display:flex;align-items:flex-end}
/* Содержимое карточки обёрнуто в ссылку (main.tpl). Без этого правила
   <a> сжимается по контенту внутри flex-карточки, и подпись занимает не всю
   ширину: правый отступ текста выходит вдвое больше левого. */
.member>a{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:2}
.member img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.78)}
.member::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,6,7,.05) 0%,rgba(5,6,7,.20) 42%,rgba(5,6,7,.92) 100%)}
.member__info{position:relative;z-index:2;padding:20px 20px 18px;width:100%}
.member__info h3{margin:0;font:600 25px/1.02 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.member__info p{margin:8px 0 0;color:#b8c2c7;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.member__line{width:46px;height:2px;background:var(--accent);border-radius:999px;margin-top:10px}

.video{padding:44px 0}
.video__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:16px;margin-top:30px;align-items:stretch}
.video__main{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#0b0d0f;min-height:500px}

.video__main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,.08),rgba(5,6,7,.68) 72%,rgba(5,6,7,.95))}
/* Правила .video__play / .video__caption / .video__bottom убраны: это
   остатки старой разметки блока «Видео» на главной — одна карточка с
   постером. Сейчас там плеер с плейлистом (.video__main, .video-item). */
.video__list{display:grid;grid-template-rows:repeat(4,1fr);gap:12px;min-height:500px}
.video-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#0d1013,#090b0e)}
.video-item__play{width:38px;height:38px;border-radius:50%;background:#fff;color:#050607;display:grid;place-items:center;font-size:12px}
.video-item strong{display:block;font:700 22px/1 'Oswald',sans-serif;text-transform:uppercase}
.video-item small{display:block;margin-top:6px;color:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.video-item span{font:600 12px/1 'Oswald',sans-serif;color:var(--accent)}

.gallery{padding:44px 0}
.gallery__grid{display:grid;grid-template-columns:1.15fr .62fr .93fr;grid-template-rows:220px 220px;gap:14px;margin-top:30px}
.gallery__item{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#0a0c0f}
.gallery__item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.94) contrast(1.03) brightness(.83)}
.gallery__item:nth-child(1){grid-row:1 / span 2}
.gallery__item:nth-child(2){grid-column:2;grid-row:1}
.gallery__item:nth-child(3){grid-column:2;grid-row:2}
.gallery__item:nth-child(4){grid-column:3;grid-row:1 / span 2}
.gallery__btn{margin-top:26px;text-align:center}

.booking{padding:44px 0 80px}
.booking__box{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:24px;border-radius:30px;background:linear-gradient(180deg,#0c0f12,#090b0d);border:1px solid var(--line);padding:28px}
.booking__lead{color:var(--muted);line-height:1.8;margin-top:18px;max-width:310px}
.form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.field input,.field select,.field textarea{width:100%;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#080a0c;color:#fff;padding:0 15px;font:500 14px Manrope,sans-serif;outline:none}
.field textarea{height:92px;padding:15px;resize:vertical}
.field--wide{grid-column:span 2}
.submit-col{display:flex;flex-direction:column;gap:14px}
.submit-col .btn{height:52px}
.consent{color:var(--soft);font-size:12px;line-height:1.5}

.footer{padding:32px 0 26px;border-top:1px solid rgba(255,255,255,.08);background:#040506}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:24px;align-items:start}
.footer__logo{width:150px;height:auto}
.footer__slogan{margin-top:10px;color:var(--accent2);font-size:20px;font-family:'Oleo Script',cursive}
.footer__title{margin:0 0 12px;font:600 13px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.footer a{display:block;margin:8px 0;color:#c9d0d5;font-size:14px}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;margin:0;background:#0c0f12;font:600 12px/1 'Oswald',sans-serif}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
/* Раскладка .footer__partners/.footer__partner из старого подвала убрана:
   логотипы партнёров стоят своими классами. */
.footer__cmb{width:68px;height:auto}.footer__logiqo{width:92px;height:auto}

@media (max-width: 1180px){
  .hero__grid,.about__grid,.video__grid,.booking__box,.footer__grid{grid-template-columns:1fr}
  .hero__ghostlogo{display:none}
  .formats__grid,.band__grid{grid-template-columns:repeat(2,1fr)}
  .gallery__grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 220px 220px}
  .gallery__item:nth-child(1){grid-row:1;grid-column:1 / span 2}
  .gallery__item:nth-child(2){grid-column:1;grid-row:2}
  .gallery__item:nth-child(3){grid-column:2;grid-row:2}
  .gallery__item:nth-child(4){grid-column:1 / span 2;grid-row:3}
  .form{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:1 / -1}
}
@media (max-width: 760px){
  .wrap{width:min(calc(100% - 24px),var(--container))}
  /* раскладка шапки переключается раньше, в блоке max-width:900px */
  .nav{gap:16px}
  .hero{min-height:840px;padding-top:130px}
  .hero__grid{min-height:auto}
  .hero__title{font-size:clamp(42px,14vw,74px)}
  .formats__grid,.band__grid,.form{grid-template-columns:1fr}
  .video__list{grid-template-rows:none;min-height:0}
  .video__main{min-height:340px}
  .video-item{padding:16px}
  .gallery__grid{grid-template-columns:1fr;grid-template-rows:none}
  .gallery__item,.gallery__item:nth-child(1),.gallery__item:nth-child(2),.gallery__item:nth-child(3),.gallery__item:nth-child(4){grid-column:auto;grid-row:auto;height:240px}
  .booking__box{padding:20px}
}

/* ===== BW V3 — hero / booking / footer refinements ===== */
.hero{min-height:960px;padding:132px 0 78px;align-items:flex-end}
.hero__bg{z-index:0;transition:opacity .9s ease,filter .9s ease}
.hero__video{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity 1.25s ease;background:#050607;pointer-events:none}
.hero__video::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.84) 31%,rgba(5,6,7,.48) 56%,rgba(5,6,7,.20) 76%,rgba(5,6,7,.38) 100%),linear-gradient(180deg,rgba(5,6,7,.34) 0%,rgba(5,6,7,.06) 35%,rgba(5,6,7,.70) 100%)}
.hero__video iframe{position:absolute;top:50%;left:60%;width:130vw;height:73.125vw;min-width:190vh;min-height:106.875vh;transform:translate(-50%,-50%);border:0;filter:grayscale(1) saturate(.25) contrast(1.08) brightness(.72)}
.hero__audio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero__sound{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(6,8,10,.62);color:#edf3f6;font:600 12px/1 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(10px);cursor:pointer;transition:.2s ease}
.hero__sound:hover{border-color:rgba(201,134,74,.45);transform:translateY(-1px)}
.hero__sound-icon{font-size:14px;line-height:1}
.hero.audio-muted .hero__sound{border-color:rgba(255,255,255,.11);color:#c8d1d6}
.hero__eq{display:flex;align-items:flex-end;gap:4px;height:24px;padding:0 2px}
.hero__eq span{display:block;width:4px;height:30%;background:var(--accent);border-radius:999px;animation:heroEq 1.05s ease-in-out infinite;transform-origin:center bottom;opacity:.9}
.hero__eq span:nth-child(2){animation-delay:.15s;height:55%}
.hero__eq span:nth-child(3){animation-delay:.3s;height:85%}
.hero__eq span:nth-child(4){animation-delay:.45s;height:48%}
.hero__eq span:nth-child(5){animation-delay:.6s;height:72%}
.hero.audio-muted .hero__eq span{animation-play-state:paused;opacity:.35}
@keyframes heroEq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}
.hero.video-ready .hero__video{opacity:1}
.hero.video-ready .hero__bg{opacity:.32;filter:grayscale(1) contrast(1.05) brightness(.48)}
.hero__grid{z-index:3;grid-template-columns:minmax(0,640px) 1fr;min-height:710px}
.hero__content{padding-bottom:32px}
.hero__title{max-width:640px;font-size:clamp(46px,5.1vw,76px);line-height:.92;letter-spacing:-.035em}
.hero__text{max-width:510px;font-size:16px;line-height:1.72}
.hero__ghostlogo{opacity:.08;font-size:clamp(80px,9.5vw,165px)}

.booking{padding:54px 0 86px}
.booking__box{grid-template-columns:minmax(280px,.48fr) minmax(0,1.52fr);gap:58px;padding:40px 42px;align-items:start}
.booking__copy{padding:4px 0 0}
.booking__title{font-size:clamp(38px,4vw,62px);line-height:.94;max-width:360px}
.booking__lead{max-width:350px;margin-top:20px;font-size:14px;line-height:1.75}
.booking__form{width:100%;max-width:860px;justify-self:end;display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;align-content:start}
.booking__form .field{min-width:0}
.booking__form .field input,.booking__form .field select,.booking__form .field textarea{height:56px;border-radius:15px;padding:0 17px;background:#07090b;border-color:rgba(255,255,255,.12);transition:.2s}
.booking__form .field input:focus,.booking__form .field select:focus,.booking__form .field textarea:focus{border-color:rgba(201,134,74,.65);box-shadow:0 0 0 4px rgba(201,134,74,.07)}
.booking__form .field textarea{height:118px;padding:17px;line-height:1.55}
.booking__form .field--wide{grid-column:1 / -1}
.booking__form .submit-col{grid-column:1 / -1;display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:18px;align-items:center;margin-top:4px}
.booking__form .submit-col .btn{height:56px;width:100%}
.booking__form .consent{max-width:370px;font-size:11px;line-height:1.55;color:#747d82}

.footer{padding:38px 0 24px}
.footer__grid{grid-template-columns:1.15fr .72fr .72fr 1.15fr;gap:32px;align-items:start}
.footer__brand{padding-right:18px}
.footer__right{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;justify-content:end}
.footer__social-area{min-width:180px}
.footer__cmb-link{display:flex!important;align-items:flex-start;justify-content:flex-end;margin:0!important;padding-top:0}
.footer__cmb{width:78px;height:auto;image-rendering:auto}
.footer__bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:28px;padding-top:20px}
.footer__bottom>div:nth-child(2){text-align:center}
.footer__dev{justify-self:end;display:inline-flex!important;align-items:center;gap:10px;margin:0!important;color:#8c9498!important}
.footer__dev span{font-size:11px;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.footer__logiqo{width:86px;height:auto}

@media(max-width:1180px){
  .hero{min-height:860px}
  .hero__video iframe{left:65%;width:150vw;height:84.375vw;min-width:180vh;min-height:101.25vh}
  .booking__box{grid-template-columns:1fr;gap:30px}
  .booking__copy{max-width:580px}
  .booking__title{max-width:none}
  .booking__form{justify-self:stretch;max-width:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__right{justify-content:start;grid-template-columns:auto auto}
  .footer__bottom{grid-template-columns:1fr;gap:12px;justify-items:start}
  .footer__bottom>div:nth-child(2){text-align:left}
  .footer__dev{justify-self:start}
}
@media(max-width:760px){
  .hero{min-height:760px;padding-top:120px;padding-bottom:58px}
  .hero__grid{min-height:600px}
  .hero__title{font-size:clamp(38px,11.5vw,54px);line-height:.94}
  .hero__text{font-size:14px;max-width:100%}
  .hero__video iframe{left:73%;width:210vw;height:118.125vw;min-width:0;min-height:0}
  .booking__box{padding:24px 20px;border-radius:24px}
  .booking__title{font-size:42px}
  .booking__form{grid-template-columns:1fr}
  .booking__form .field--wide,.booking__form .submit-col{grid-column:1}
  .booking__form .submit-col{grid-template-columns:1fr;gap:10px}
  .footer__grid{grid-template-columns:1fr}
  .footer__right{grid-template-columns:1fr auto;width:100%;align-items:start}
}


/* HERO H1 — two lines, stronger scale */
.hero__title{max-width:none!important;font-size:clamp(58px,5.5vw,84px)!important;line-height:.90!important;letter-spacing:-.035em!important;text-transform:uppercase!important;}
.hero__title span{display:block;white-space:nowrap;}
@media(max-width:760px){
  .hero__title{font-size:clamp(38px,10.6vw,54px)!important;max-width:100%!important;line-height:.92!important;}
  .hero__title span{white-space:nowrap;}
}
@media(max-width:420px){
  .hero__title{font-size:clamp(34px,9.7vw,44px)!important;}
}


/* ===== BW V8 — embedded Kinescope video hub ===== */
.video__grid{grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:16px;align-items:stretch}
.video__main{position:relative;min-height:560px;height:560px;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#050607}
.video__main::before,.video__main::after{display:none!important}

.video__poster{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,rgba(5,6,7,.08),rgba(5,6,7,.34)),url('../images/video-poster.jpg') center/cover no-repeat;filter:grayscale(1);transition:opacity .35s ease,visibility .35s ease}
.video__poster::after{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;background:rgba(5,6,7,.55);color:#fff;font-size:28px;line-height:1;padding-left:5px;backdrop-filter:blur(6px)}
.video__main.is-playing .video__poster{opacity:0;visibility:hidden;pointer-events:none}

.video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050607}
.video__list{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:10px;height:560px;min-height:560px}
.video-item{appearance:none;-webkit-appearance:none;width:100%;min-height:0;height:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 15px;border-radius:19px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,#0d1013,#090b0e);color:#fff;text-align:left;font:inherit;cursor:pointer;transition:.22s ease}
.video-item:first-child{border-top:1px solid rgba(255,255,255,.10)!important}
.video-item:hover{transform:translateY(-1px);border-color:rgba(201,134,74,.34);background:#0f1417}
.video-item.active{border-color:rgba(201,134,74,.62);background:linear-gradient(90deg,rgba(201,134,74,.15),#0b0e11 48%);box-shadow:inset 3px 0 0 var(--accent)}
.video-item__play{width:34px;height:34px;border-radius:50%;background:#fff;color:#050607;display:grid;place-items:center;font-size:10px;transition:.2s}
.video-item.active .video-item__play{background:var(--accent);color:#031014}
.video-item strong{display:block;font:700 18px/1 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-item small{display:block;margin-top:5px;color:var(--soft);font-size:10px;text-transform:uppercase;letter-spacing:.10em}
.video-item>span:last-child{font:700 10px/1 'Oswald',sans-serif;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.video__hint{margin-top:12px;color:#747e84;font-size:11px;line-height:1.55}
@media(max-width:1180px){
  .video__grid{grid-template-columns:1fr}
  .video__main{height:auto;min-height:0;aspect-ratio:16/9}
  .video__list{height:auto;min-height:0;grid-template-rows:none;grid-template-columns:repeat(2,1fr)}
  .video-item{min-height:74px;height:auto}
}
@media(max-width:760px){
  .video__main{aspect-ratio:16/10}
  .video__list{grid-template-columns:1fr}
  .video-item{min-height:72px}
}


/* ===== WARM COPPER / BILINGUAL / TICKETS ===== */
:root{
  --accent:#c9864a;
  --accent2:#e1b06a;
}
body{background:radial-gradient(circle at top,#100c09 0%,#050607 34%),#050607}
.btn-primary{box-shadow:0 10px 30px rgba(201,134,74,.22)}
.header__tools{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lang-switch{display:flex;align-items:center;gap:6px;padding:0 2px;color:#73797d;font:600 12px/1 'Oswald',sans-serif;letter-spacing:.12em}
.lang-switch__btn{appearance:none;border:0;background:none;color:#73797d;padding:8px 3px;cursor:pointer;font:600 12px/1 'Oswald',sans-serif;letter-spacing:.12em;transition:.2s}
.lang-switch__btn:hover,.lang-switch__btn.is-active{color:#f4f0e9}
/* .header__ticket — вторая кнопка шапки («Купить билет») из макетов band и
   member. В теме шапка одна на все страницы и несёт одну CTA — «Пригласить
   группу», как в свежем макете главной: ссылка на билеты живёт в карточке
   конкретного концерта, где она осмысленна. */
.hero__sound:hover{border-color:rgba(201,134,74,.45)}
.booking__form .field input:focus,.booking__form .field select:focus,.booking__form .field textarea:focus{
 border-color:rgba(201,134,74,.65);box-shadow:0 0 0 4px rgba(201,134,74,.07)
}
@media(max-width:1100px){
 .nav{gap:20px}
 .header__tools{gap:10px}
 .header__cta{padding:0 16px}
}
@media(max-width:760px){
 .header__in{gap:12px}
 .header__tools{width:100%;justify-content:space-between}
 .lang-switch{order:2}
}


/* Typography v12 — option C adapted for real Cyrillic rendering. */
.hero__title,.section-title,.hero__ghostlogo{
  font-family:var(--display-font);
  font-weight:var(--display-weight);
  letter-spacing:-.025em;
  font-synthesis:none;
}
.hero__title{line-height:.94;max-width:650px}
.section-title{line-height:.96}
.kicker,.nav a,.btn,.format h3,.member__info h3,.footer__title,.socials a{
  font-family:'Oswald',sans-serif;
}
.footer__slogan,.hero__ghostlogo span{
  font-family:'Oleo Script',cursive;
  font-weight:400;
}
@media(max-width:760px){
  .hero__title{font-size:clamp(36px,10vw,54px);line-height:.98}
  .section-title{font-size:clamp(34px,9vw,52px);line-height:1}
}

/* Header + Hero refinements v13 */
.header__tools{gap:10px}
.header__invite{background:transparent;border-color:rgba(255,255,255,.24);color:#fff;box-shadow:none}
.header__invite:hover{border-color:var(--accent);color:var(--accent)}
.hero__content>.kicker{color:var(--accent)}
.hero__content>.kicker::before{background:var(--accent)}
.hero__title{color:#fff!important}

.hero__subtitle{
  display:inline-block;
  margin-top:16px;
  color:var(--accent);
  font-family:'Oleo Script',cursive;
  font-size:clamp(44px,3.9vw,64px);
  font-weight:400;
  line-height:.95;
  letter-spacing:.01em;
  white-space:nowrap;
  transform-origin:left center;
}
.hero__subtitle::before,
.hero__subtitle::after{
  content:none;
}
@media(max-width:760px){
  .hero__subtitle{
    font-size:clamp(34px,9vw,48px);
    margin-top:14px;
  }
}

@media(max-width:1180px){
  .nav{gap:20px}
  .header__cta{padding:0 16px}
}
@media(max-width:900px){
  /* .header__tools занимает всю ширину — значит шапка уже не строка, и
     раскладку надо менять здесь же. Раньше tools растягивались с 900px, а
     .header__in становился колонкой только с 760px: в зазоре 761–900 (то есть
     ровно на планшете 768) .nav сжимался до 67px, складывал шесть пунктов в
     вертикальную колонку высотой 172px внутри шапки высотой 85px — два пункта
     уезжали выше вьюпорта, один висел поверх героя. */
  .header__in{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}
  .header__tools{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .nav{justify-content:flex-start}
}

/* ---- blues-doctors-contacts [style #1] ---- */
/* ===== HOME AFISHA v18 ===== */
.home-afisha{
  padding:96px 0 104px;
  background:linear-gradient(180deg,#080a0c 0%,#050607 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.home-afisha__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:32px;
}
.home-afisha__head .section-text{
  max-width:570px;
  margin:0;
}
.home-afisha__featured{
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:30px;
  align-items:center;
  padding:30px;
  border:1px solid rgba(201,134,74,.38);
  border-radius:28px;
  background:
    radial-gradient(circle at 84% 8%,rgba(201,134,74,.14),transparent 35%),
    #0b0d0f;
}
.home-afisha__date{
  padding-right:28px;
  border-right:1px solid var(--line);
}
.home-afisha__date strong{
  display:block;
  color:var(--accent);
  font-family:var(--display-font);
  font-weight:var(--display-weight);
  font-size:86px;
  line-height:.78;
}
.home-afisha__date span{
  display:block;
  margin-top:10px;
  font:600 18px/1 'Oswald',sans-serif;
  text-transform:uppercase;
}
.home-afisha__date small{
  display:block;
  margin-top:10px;
  color:#899297;
  font:600 10px/1 'Oswald',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.home-afisha__city{
  color:var(--accent);
  font:600 11px/1 'Oswald',sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.home-afisha__main h3,
.home-afisha__row-main h3{
  margin:10px 0 0;
  font-family:var(--display-font);
  font-weight:var(--display-weight);
  font-size:clamp(25px,2.3vw,36px);
  line-height:1;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.home-afisha__main p,
.home-afisha__row-main p{
  margin:10px 0 0;
  color:#aeb6bb;
  font-size:14px;
}
.home-afisha__actions,
.home-afisha__row-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.home-afisha__soon{
  height:50px;
  display:inline-flex;
  align-items:center;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:15px;
  color:#7e888d;
  font:600 11px/1 'Oswald',sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.home-afisha__list{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:25px;
  overflow:hidden;
}
.home-afisha__row{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:26px;
  align-items:center;
  min-height:162px;
  padding:22px 26px;
  background:#090b0d;
}
.home-afisha__row + .home-afisha__row{
  border-top:1px solid var(--line);
}
.home-afisha__row-date{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:end;
}
.home-afisha__row-date strong{
  grid-row:1/3;
  color:#fff;
  font-family:var(--display-font);
  font-weight:var(--display-weight);
  font-size:54px;
  line-height:.8;
}
.home-afisha__row-date span{
  color:var(--accent);
  font:600 14px/1 'Oswald',sans-serif;
  text-transform:uppercase;
}
.home-afisha__row-date small{
  color:#778086;
  font:600 10px/1 'Oswald',sans-serif;
}
.home-afisha__more{
  color:#b7bfc3;
  font:600 11px/1 'Oswald',sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.home-afisha__footer{
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
}
@media(max-width:1120px){
  .home-afisha__featured{
    grid-template-columns:180px 1fr;
  }
  .home-afisha__actions{
    grid-column:2;
  }
  .home-afisha__row{
    grid-template-columns:130px 1fr;
  }
  .home-afisha__row-actions{
    grid-column:2;
  }
}
@media(max-width:760px){
  .home-afisha{
    padding:68px 0 74px;
  }
  .home-afisha__head{
    display:block;
  }
  .home-afisha__head .section-text{
    margin-top:18px;
  }
  .home-afisha__featured,
  .home-afisha__row{
    grid-template-columns:1fr;
  }
  .home-afisha__featured{
    padding:24px 22px;
  }
  .home-afisha__date{
    padding:0 0 22px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .home-afisha__actions,
  .home-afisha__row-actions{
    grid-column:auto;
  }
  .home-afisha__row{
    padding:22px;
  }
  .home-afisha__row-actions{
    justify-content:space-between;
  }
  .home-afisha__row-main h3{
    font-size:25px;
  }
  .home-afisha__footer{
    justify-content:flex-start;
  }
}

/* ---- blues-doctors-home-warm-v23-header-cta [style #2] ---- */
/* ===== HOME v22: section order + booking popup ===== */
.booking-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.booking-modal.is-open{display:flex}
.booking-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(12px);
}
.booking-modal__dialog{
  position:relative;
  z-index:1;
  width:min(1100px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  padding:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:
    radial-gradient(circle at 88% 8%,rgba(201,134,74,.12),transparent 30%),
    #090b0d;
  box-shadow:0 30px 100px rgba(0,0,0,.65);
}
.booking-modal__close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:#0d1013;
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.booking-modal__close:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.booking-modal__head{
  max-width:620px;
  margin-bottom:28px;
  padding-right:52px;
}
.booking-modal__title{
  margin-top:0;
  font-size:clamp(38px,4.5vw,64px);
}
.booking-modal__lead{
  max-width:580px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.booking-modal .booking__form{
  margin-top:0;
}
.booking-modal__formats{
  margin:0 0 28px;
  padding:0;
}
.booking-modal__formats .formats__grid{
  margin-top:18px;
}
.booking-modal__formats .format{
  padding:18px 16px;
}
.booking-modal__formats .format h3{
  font-size:18px;
  line-height:1.2;
}
.booking-modal__formats .format p{
  font-size:13px;
  line-height:1.55;
}
/* Блокировка прокрутки под открытым окном.

   overflow:hidden на body сам по себе НЕ работает: прокручивается корневой
   элемент (document.scrollingElement === html), и страница под модалкой
   продолжала ехать. Замер до правки: при открытой модалке scrollBy(0,500)
   увозил фон на 428px. На телефоне это заметнее всего, палец по снимку
   в лайтбоксе уводил фон.

   :has() даёт правило без правки трёх скриптов сразу; там, где он не
   поддерживается (Safari до 15.4), поведение остаётся прежним. */
body.booking-modal-open{
  overflow:hidden;
}
html:has(body.booking-modal-open){
  overflow:hidden;
}
@media(max-width:760px){
  .booking-modal{
    padding:12px;
    align-items:flex-end;
  }
  .booking-modal__dialog{
    max-height:calc(100vh - 24px);
    padding:28px 20px 22px;
    border-radius:24px 24px 18px 18px;
  }
  .booking-modal__head{
    padding-right:36px;
    margin-bottom:22px;
  }
  .booking-modal__title{
    font-size:clamp(34px,10vw,48px);
  }
  .booking-modal__formats{
    margin-bottom:22px;
  }
  .booking-modal__formats .formats__grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
}

/* ===== ВНУТРЕННИЕ СТРАНИЦЫ (.ai-*) =====
   Общий каркас внутренних страниц: герой с фото, крошки, чипы-фильтры,
   секции и блок «вернуться». В вёрстке этот блок был скопирован байт-в-байт
   в afisha-upcoming/past/venues — здесь он один и подключается всем
   страницам через base.css. */
.ai-main{overflow:hidden;background:#050607}
.ai-hero{position:relative;min-height:650px;display:flex;align-items:flex-end;padding:138px 0 70px;overflow:hidden}
.ai-hero__media{position:absolute;inset:0}
.ai-hero__media img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 34%;filter:grayscale(1) contrast(1.06) brightness(.50)}
.ai-hero__media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.97) 0%,rgba(5,6,7,.80) 42%,rgba(5,6,7,.34) 75%,rgba(5,6,7,.62)),linear-gradient(180deg,rgba(5,6,7,.08),rgba(5,6,7,.14) 54%,#050607 100%)}
.ai-hero__in{position:relative;z-index:2}
.ai-hero__title{margin:0;font-family:var(--display-font);font-weight:var(--display-weight);font-size:clamp(56px,7vw,110px);line-height:.88;letter-spacing:-.055em;text-transform:uppercase;color:#fff;max-width:980px}
.ai-hero__text{max-width:690px;margin:22px 0 0;color:#c5ccd0;font-size:16px;line-height:1.78}
/* Крошки. Разметку даёт design/bd/html/breadcrumbs.tpl — один партиал на все
   страницы, поэтому и класс один: в вёрстке под те же правила были заведены
   .ev-breadcrumbs (альбом) и .artist-breadcrumbs (участник). */
.ai-breadcrumbs{display:flex;gap:9px;align-items:center;margin-bottom:24px;color:#8e979c;font:600 10px/1 'Oswald',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ai-breadcrumbs a{color:var(--accent)}
.ai-tools{padding:22px 0 0}
.ai-tools__in{display:flex;gap:10px;flex-wrap:wrap}
.ai-chip{height:42px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#090b0d;color:#b8c0c4;font:600 11px/1 'Oswald',sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.ai-chip.active,.ai-chip:hover{border-color:rgba(201,134,74,.48);color:#fff;background:rgba(201,134,74,.09)}
.ai-section{padding:88px 0 100px}
.ai-section--line{border-top:1px solid var(--line)}
.ai-section-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:30px}
.ai-section-head .section-text{max-width:580px;margin:0}
.ai-back{padding:0 0 96px}
.ai-back__box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:32px;border:1px solid var(--line);border-radius:24px;background:#090b0d}
.ai-back__box h3{margin:0;font-family:var(--display-font);font-weight:var(--display-weight);font-size:28px;line-height:1;text-transform:uppercase}
@media(max-width:760px){
  .ai-hero{min-height:570px;padding:116px 0 52px}
  .ai-hero__title{font-size:clamp(48px,13vw,68px)}
  .ai-section{padding:66px 0 74px}
  .ai-section-head{display:block}
  .ai-section-head .section-text{margin-top:17px}
  .ai-back__box{display:block}
  .ai-back__box .btn{margin-top:20px}
}

/* ===== ТЕКСТ ИЗ АДМИНКИ (.bd-prose) =====
   Тело страницы/записи приходит HTML'ом из TinyMCE: заголовки, абзацы, списки,
   ссылки и таблицы там появляются в любом порядке. Стили макета описывали
   только свою вёрстку, поэтому базовая типографика для редакторского текста
   задана здесь — иначе абзацы из админки рисуются браузерными умолчаниями. */
.bd-prose{max-width:820px;color:var(--muted);font-size:16px;line-height:1.8}
.bd-prose > :first-child{margin-top:0}
.bd-prose p,.bd-prose ul,.bd-prose ol,.bd-prose table{margin:0 0 18px}
/* :not(.section-title) обязателен. Правила .bd-prose рассчитаны на заголовки,
   которые менеджер набирает внутри текста, но в блок биографии участника
   попадает и структурный <h2 class="section-title"> из шаблона. Без исключения
   он получал 31px вместо 60px, то есть был вдвое мельче всех остальных
   заголовков разделов на той же странице. */
.bd-prose h2:not(.section-title),.bd-prose h3,.bd-prose h4{margin:34px 0 14px;color:#fff;font-family:var(--display-font);font-weight:var(--display-weight);line-height:1.1;text-transform:uppercase}
.bd-prose h2:not(.section-title){font-size:clamp(24px,2.4vw,34px)}
.bd-prose h3{font-size:20px}
.bd-prose h4{font-size:17px}
.bd-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.bd-prose ul,.bd-prose ol{padding-left:22px}
.bd-prose li{margin:0 0 8px}
.bd-prose img{max-width:100%;height:auto;border-radius:18px}
.bd-prose blockquote{margin:26px 0;padding:0 0 0 20px;border-left:2px solid var(--accent);color:#d6dcdf;font-size:17px;font-style:italic}
.bd-prose table{width:100%;border-collapse:collapse;font-size:14px}
.bd-prose th,.bd-prose td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.bd-prose th{color:#fff;font:600 11px/1.2 'Oswald',sans-serif;letter-spacing:.09em;text-transform:uppercase}

/* ===== ГАЛЕРЕЯ В ТЕКСТЕ (.bd-gallery) =====
   Вставляется вместо плейсхолдера {gallery_N} (см. design/bd/html/gallery.tpl).
   Сетка та же, что у мозаики раздела «Фото», но лайтбокс общий, поэтому
   классы свои — стили фотораздела на редакторский текст не распространяются. */
.bd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.bd-gallery__shot{padding:0;border:1px solid var(--line);border-radius:16px;background:#090b0d;overflow:hidden;cursor:zoom-in}
.bd-gallery__shot img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.86);transition:filter .25s,transform .35s}
.bd-gallery__shot:hover img{filter:none;transform:scale(1.03)}
@media(max-width:760px){.bd-gallery{grid-template-columns:repeat(2,1fr)}}

/* Активный пункт навигации. Класс ставит header.tpl по $nav_active, то есть
   нужен на каждой странице. В вёрстке под это правило в каждом макете
   заводился свой класс (.af-active, .music-active, .photo-active,
   .vid-active, .contacts-active) с одинаковым телом — здесь он один. */
.af-active{color:var(--accent)!important}

/* Ответ сервера на отправку заявки. В вёрстке форма была заглушкой с alert(),
   поэтому места под сообщение не было — блок появляется только после отправки
   (design/bd/js/booking-form.js снимает hidden). */
.booking-result{padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.5}
.booking-result.is-ok{border-color:rgba(120,190,140,.42);background:rgba(120,190,140,.10);color:#cfe8d6}
.booking-result.is-error{border-color:rgba(214,110,90,.45);background:rgba(214,110,90,.10);color:#f0d2cb}

/* ===== Плитка прошедшего концерта =====
   Сетка из четырёх карточек описана в макете хаба афиши, но такой же список
   «другие концерты» стоит на карточке концерта (design/bd/html/event.tpl),
   у которой свой файл стилей. Правила общие — держим их здесь. */
.af-past__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.af-past-card{min-height:270px;padding:25px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0c0f12,#080a0c);display:flex;flex-direction:column;transition:.25s}
.af-past-card:hover{transform:translateY(-4px);border-color:rgba(201,134,74,.42)}
.af-past-card__date{color:var(--accent);font:600 11px/1 'Oswald',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.af-past-card h3{margin:20px 0 0;font-family:var(--display-font);font-weight:var(--display-weight);font-size:26px;line-height:1;text-transform:uppercase}
.af-past-card p{margin:12px 0 0;color:#8f989d;font-size:13px;line-height:1.6}
.af-past-card span{margin-top:auto;color:#c4cbcf;font:600 11px/1 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:1100px){.af-past__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.af-past__grid{grid-template-columns:1fr}}

/* «Билеты скоро» — заглушка вместо кнопки покупки. В вёрстке под неё было два
   класса с одинаковым телом: .af-ticket-soon в хабе афиши и .up-soon
   в «ближайших концертах». */
.af-ticket-soon,.up-soon{height:50px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--line);border-radius:15px;color:#7e888d;font:600 11px/1 'Oswald',sans-serif;letter-spacing:.11em;text-transform:uppercase}

/* ===== Медная кнопка «Пригласить группу» в шапке =====
   Класс header__invite--copper ставит header.tpl безусловно, то есть на всех
   страницах. В вёрстке эти правила лежали в стилях главной, и на остальных
   страницах кнопка падала на базовый прозрачный вариант. */
.header__invite.header__invite--copper{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border-color:rgba(225,176,106,.72);
  color:#090b0d;
  box-shadow:
    0 8px 24px rgba(201,134,74,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(0) scale(1);
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .22s ease,
    border-color .22s ease;
  will-change:transform;
}
.header__invite.header__invite--copper::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-55%;
  width:34%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:rotate(18deg);
  transition:left .48s ease;
  pointer-events:none;
}
.header__invite.header__invite--copper:hover{
  color:#090b0d;
  border-color:var(--accent2);
  filter:brightness(1.07);
  transform:translateY(-2px);
  box-shadow:
    0 12px 32px rgba(201,134,74,.30),
    0 0 0 1px rgba(225,176,106,.12),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.header__invite.header__invite--copper:hover::before{
  left:125%;
}
.header__invite.header__invite--copper:active{
  transform:translateY(1px) scale(.975);
  filter:brightness(.96);
  box-shadow:
    0 4px 12px rgba(201,134,74,.20),
    inset 0 2px 4px rgba(0,0,0,.18);
}
.header__invite.header__invite--copper:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:4px;
}
@media(max-width:760px){
  .header__invite.header__invite--copper{
    min-width:190px;
    justify-content:center;
  }
}

/* ===== ЛИСТАЛКА ВИТРИНЫ =====
   В макетах её нет: архив концертов был нарисован одной страницей. На реальном
   архиве группы это мегабайты разметки, поэтому вывод постраничный, а номера
   страниц собраны на тех же чипах, что фильтр по годам (.ai-chip). */
.bd-pager{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.bd-pager__pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-pager__gap{color:#6d767b;font:600 11px/1 'Oswald',sans-serif;letter-spacing:.1em}
.bd-pager__nav{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#090b0d;color:#c4cbcf;font:600 11px/1 'Oswald',sans-serif;letter-spacing:.09em;text-transform:uppercase;transition:.2s}
.bd-pager__nav:hover{border-color:rgba(201,134,74,.48);color:#fff;background:rgba(201,134,74,.09)}
.bd-pager__nav.is-disabled{opacity:.4;pointer-events:none}
@media(max-width:760px){
  .bd-pager{gap:10px}
  .bd-pager__nav{height:38px;padding:0 14px}
}

/* ---- правила под классы, которые вёрстка использует, а стилей не имела ---- */

/* Приглушённая строка: «Всего в архиве: N» под фильтром годов. */
.u-muted{color:#7f878c}

/* Подпись у тумблера звука в герое главной. Иконка рядом описана, подпись
   осталась без правил — размер и цвет наследовались от кнопки. */
/* .hero__sound-label СВОЕГО правила не имеет: в макете подпись наследует
   кнопку .hero__sound (12px/.12em). Заведённое здесь 11px/.14em делало её
   на пиксель мельче и разреженнее, чем задумано. */

/* ---------------- Доступность ----------------
   Единое кольцо фокуса. В теме :focus-visible был описан ровно один раз, у
   медной CTA: у пунктов меню, переключателя языка, плиток видео и фото,
   кнопок лайтбокса и чипов оставалось браузерное кольцо по умолчанию —
   на почти чёрном фоне его не видно. У полей ввода вместо кольца стоит
   outline:none, и единственным признаком фокуса был чуть более светлый
   контур: с клавиатуры по такой форме не пройти. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* Подпись поля, скрытая визуально, но доступная скринридеру. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Ошибка конкретного поля формы: текст ставит design/bd/js/booking-form.js
   по ответу сервера. */
.field-error{
  display:block;
  margin-top:6px;
  color:#e2a08a;
  font-size:11px;
  line-height:1.4;
}
[aria-invalid="true"]{
  border-color:rgba(226,160,138,.6)!important;
}

/* ===== ТЕЛЕФОН: ЦЕЛИ НАЖАТИЯ И ЗУМ =====

   1. Якоря. Значения scroll-padding-top заданы для 900 и 760, а ниже 600
      шапка выше (213.8px против 202px в правиле), и заголовок секции после
      перехода прижимался к её кромке. Продлеваем тот же инвариант «высота
      шапки плюс 20px».

   2. Цели нажатия. .nav a набран 12px без внутренних отступов, то есть
      полоса высотой ровно 12px: промахнуться на телефоне легко, а шапка это
      единственная навигация. Переключатель языка был 21x28. Норма 44x44,
      добираем отступами, не трогая рисунок текста.

   3. Зум в iOS. Safari масштабирует страницу при фокусе в поле со шрифтом
      мельче 16px. Поднимаем шрифт полей ровно до 16px только на телефоне:
      на десктопе рисунок формы остаётся прежним. */
@media(max-width:599px){
  html{scroll-padding-top:234px}
}

@media(max-width:900px){
  /* Область нажатия растим ПСЕВДОЭЛЕМЕНТОМ, а не отступами.
     Отступы по 16px давали честные 44px высоты, но шапка при этом
     вырастала с 214 до 278px, то есть занимала треть экрана телефона.
     Невидимая накладка расширяет цель до 32px, ничего не сдвигая:
     ряды меню стоят на расстоянии 32px, поэтому +-10px смыкают их
     без наложения. Это компромисс: не 44px по рекомендации, но втрое
     больше исходных 12px и без потери экрана. */
  .nav a{position:relative}
  .nav a::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px}

  /* Переключателю языка тоже растим цель накладкой, а не размером.
     min-height:44px здесь казался безопасным (рядом кнопка 48px), но на
     320px ряд переносится, и шапка вырастала с 214 до 248px, снова заводя
     заголовок первого экрана под неё. */
  .lang-switch__btn{position:relative}
  .lang-switch__btn::after{content:"";position:absolute;left:-3px;right:-3px;top:-8px;bottom:-8px}

  /* iOS масштабирует страницу при фокусе в поле со шрифтом мельче 16px.
     Селекторы повторяют .field ... из contacts.css: он подключается после
     base.css, и без такой же специфичности правило не выигрывает. */
  body .field input,body .field select,body .field textarea,
  body .booking__form .field input,body .booking__form .field select,body .booking__form .field textarea,
  body .venue-search__field input,
  body input[type="text"],body input[type="email"],body input[type="tel"],
  body input[type="search"],body input[type="password"],body select,body textarea{font-size:16px}
}