/* SYNERJOY — стили блоков по сайту synerjoy.cy + элементы брендбука (линия, иконки, направления, градиент). Все значения через токены (tokens.css). Префикс sj-. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:17px;line-height:1.7;font-weight:500;-webkit-font-smoothing:antialiased}
.sj img{max-width:100%;display:block}
.sj a:not([class]){color:var(--color-primary);text-underline-offset:3px}
.sj a:not([class]):hover{color:var(--color-primary-dark)}
.sj h1,.sj h2,.sj h3{font-family:var(--font-heading);font-weight:600;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1.06;text-wrap:balance;color:var(--color-text)}
.sj p,.sj ul,.sj ol,.sj dl{margin:0}
/* <em> в заголовке — слово-акцент красным, не курсив (курсивного начертания у шрифтов нет) */
.sj h1 em,.sj h2 em,.sj h3 em{font-style:normal;color:var(--color-primary)}
.sj :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.sj-wrap{max-width:var(--layout-wrap);margin:0 auto;padding-inline:var(--space-6)}

.sj-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}

/* ===== Темы. Светлая — по умолчанию; тёмная — по настройке устройства (prefers-color-scheme) или принудительно: <html data-theme="dark">. data-theme="light" отключает тёмную. ===== */
:root{--sj-header-bg:#fdfcfaeb;--sj-price-card:#fcf5f5;--sj-red-surface:var(--color-primary);--sj-marquee-bg:var(--color-accent);--sj-marquee-ink:var(--color-red-ink);--sj-plain-btn:var(--color-text);--sj-photo-dim:1;color-scheme:light}
:root[data-theme="dark"]{--sj-header-bg:#151413eb;--sj-price-card:var(--color-surface);--sj-red-surface:var(--color-cta);--sj-marquee-bg:var(--color-accent-light);--sj-marquee-ink:var(--color-accent);--sj-plain-btn:var(--color-cta);--sj-photo-dim:.92;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sj-header-bg:#151413eb;--sj-price-card:var(--color-surface);--sj-red-surface:var(--color-cta);--sj-marquee-bg:var(--color-accent-light);--sj-marquee-ink:var(--color-accent);--sj-plain-btn:var(--color-cta);--sj-photo-dim:.92;color-scheme:dark}}
.sj img:not(.sj-hero__bg){filter:brightness(var(--sj-photo-dim))}
/* .sj .x — чтобы перебить .sj img{display:block} */
.sj-theme-dark-only,.sj .sj-theme-dark-only{display:none}
:root[data-theme="dark"] .sj-theme-light-only{display:none}:root[data-theme="dark"] .sj-theme-dark-only{display:revert}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sj-theme-light-only{display:none}:root:not([data-theme="light"]) .sj-theme-dark-only{display:revert}}

/* Button */
.sj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--font-body);padding:15px 26px;border-radius:var(--radius-full);border:2px solid transparent;text-decoration:none;cursor:pointer;background:var(--color-cta);color:var(--color-white);transition:transform .15s ease,background .15s ease}
.sj a.sj-btn{color:var(--color-white)}
.sj-btn:hover{transform:translateY(-2px);background:var(--color-red-ink)}
.sj-btn--sm{padding:10px 18px;font-size:14px}
.sj-btn--dark{background:#0c090859;border-color:#ffffff38;padding:20px 34px}
.sj-btn--dark:hover{background:#0c09089e}
.sj-btn--light,.sj a.sj-btn--light{background:var(--color-white);color:var(--color-red-ink)}
.sj-btn--light:hover{background:#ffffffd9}
.sj-btn--ghost-light{background:transparent;border-color:#ffffffb3}
.sj-btn--ghost-light:hover{background:#ffffff1a}
.sj-btn--outline,.sj a.sj-btn--outline{background:transparent;border-color:currentColor;color:var(--color-text)}
.sj-btn--outline:hover{background:transparent;color:var(--color-primary)}
.sj-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

/* Header */
.sj-header{position:sticky;top:0;z-index:40;height:var(--layout-header);background:var(--sj-header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.sj-header--over{background:transparent;border-color:transparent;backdrop-filter:none}
.sj-header__row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%}
.sj-header__logo img{height:30px;width:auto}
.sj-header__nav{display:flex;gap:24px;font-size:14px;font-weight:600}
.sj .sj-header__nav a{color:var(--color-text-muted);text-decoration:none}
.sj .sj-header--over .sj-header__nav a{color:#ffffffe6}
.sj-header--overlay{margin-bottom:calc(-1 * var(--layout-header))}
.sj-header--over,.sj .sj-header--over .sj-header__lang{color:var(--color-white)}
.sj-header--over .sj-header__logo .sj-theme-light-only{display:none!important}.sj-header--over .sj-header__logo .sj-theme-dark-only{display:revert!important}
@media (max-width:1120px){.sj-header__nav{display:none}}

/* Hero */
.sj-hero{position:relative;overflow:hidden}
.sj-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* кадр фото (frame): браузер сначала обрезает фото по кадру, потом растягивает на блок; без поддержки остаётся object-position по центру кадра */
@supports (object-view-box:inset(0)){.sj-hero__bg[style*="--sj-view"],.sj-card__img[style*="--sj-view"]{object-view-box:var(--sj-view);object-position:center!important}}
.sj-hero--photo{background:#141110;color:var(--color-white)}
.sj-hero--photo::before{content:"";position:absolute;inset:0;background:var(--color-scrim);z-index:1}
.sj-hero--plain{background:var(--color-accent-light)}
.sj-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-block:150px}
.sj-hero--plain .sj-hero__in{padding-block:72px 130px}
.sj-hero__crumbs{font-size:13px;display:flex;gap:6px;flex-wrap:wrap;color:var(--color-text-muted)}
.sj-hero--photo .sj-hero__crumbs,.sj-hero--photo .sj-hero__meta{color:#ffffffbf}
.sj-hero__pill{display:inline-flex;background:var(--color-cta);color:var(--color-white);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 18px;border-radius:var(--radius-full)}
.sj .sj-hero h1{font-size:clamp(48px,4.6vw + 16px,80px);line-height:1}
.sj .sj-hero--photo h1{color:var(--color-white)}
.sj-hero__sub{font-size:clamp(18px,.6vw + 16px,22px);max-width:52ch;line-height:1.5}
/* Hero с brand (главная, как на synerjoy.cy): название Manrope ExtraLight крупно, под ним подпись в разрядку красным, слоган, текст */
.sj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;text-transform:none}
.sj .sj-hero h1.sj-hero__brand{display:flex;flex-direction:column;gap:8px;font-size:inherit;line-height:1}
.sj-hero__mark{font-family:var(--font-wordmark);font-weight:200;font-size:clamp(40px,9vw,104px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;color:#ffffffd9}
.sj-hero__lockup{font-family:var(--font-heading);font-weight:500;font-size:16px;line-height:1.5;letter-spacing:.28em;text-transform:uppercase;color:var(--color-cta)}
.sj-hero__tagline{font-family:var(--font-heading);font-weight:500;font-size:30px;line-height:1.25;max-width:26ch;color:var(--color-white);text-wrap:balance;margin-top:4px}
.sj-hero--brand .sj-hero__sub{font-size:18px;line-height:1.625;max-width:42rem;color:#ffffffbf}
.sj-hero--plain .sj-hero__mark{color:var(--color-accent-ink)}
.sj-hero__proof,.sj a.sj-hero__proof{display:inline-flex;align-items:center;min-height:var(--layout-tap);font-size:15px;font-weight:600;color:#ffffffe6;text-decoration:none}
.sj a.sj-hero__proof:hover{color:var(--color-white);text-decoration:underline}
.sj-hero--plain .sj-hero__proof{color:var(--color-accent-ink)}
.sj-hero--photo .sj-hero__sub{color:#ffffffe0}
.sj-hero--plain .sj-hero__sub{color:var(--color-accent-ink)}
.sj-hero--plain .sj-btn--dark{background:var(--sj-plain-btn);border-color:var(--sj-plain-btn)}
.sj-hero__person{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sj-hero__portrait{width:180px;height:180px;border-radius:var(--radius-full);object-fit:cover;box-shadow:var(--shadow-float)}
.sj-brush{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:var(--layout-brush-mobile);background-color:var(--color-bg);-webkit-mask-size:300% 200%;mask-size:300% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sj-brush--alt{background-color:var(--color-bg-alt)}
@media (min-width:640px){.sj-brush{height:var(--layout-brush-tablet)}}
@media (min-width:1024px){.sj-brush{height:var(--layout-brush-desktop)}}

/* Section */
.sj-section{padding-block:var(--space-18);background:var(--color-bg)}
.sj-section--alt{background:var(--color-bg-alt)}
/* Тёмная секция (главная: «SYNERJOY Music, Arts & Creativity» — текст о центре, цифры, лента фото). С image — фото под затемнением color-scrim. */
.sj-section--dark{background:var(--color-sidebar-bg);color:var(--color-white);position:relative;overflow:hidden}
.sj-section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sj-section--image::before{content:"";position:absolute;inset:0;background:var(--color-scrim);z-index:1}
.sj-section--image>.sj-wrap{position:relative;z-index:2}
.sj .sj-section--dark h2,.sj .sj-section--dark h3{color:var(--color-white)}
.sj-section--dark .sj-text p{color:#ffffffd9}
.sj-section--dark .sj-lead{color:#ffffffe0}
.sj-section--dark .sj-eyebrow{color:var(--color-accent)}
.sj-section--dark .sj-tags li{color:var(--color-white);background:#ffffff1f;border-color:#ffffff40}
.sj-section--dark a:not([class]){color:var(--color-accent)}
.sj-section--alt .sj-muted{color:var(--color-text-muted-alt)}
.sj-section--red{background:var(--color-cta);color:var(--color-white);overflow:hidden;position:relative}
.sj .sj-section--red h2{color:var(--color-white)}
.sj-section--red .sj-section__line{position:absolute;left:0;right:0;top:55%;transform:translateY(-50%);z-index:0}
.sj-section--red .sj-wrap{position:relative;z-index:1}
@media (max-width:600px){.sj-section{padding-block:var(--space-13)}}
.sj-text{display:flex;flex-direction:column;gap:18px;min-width:0}
.sj-read{max-width:var(--layout-read)}
.sj .sj-text h2{font-size:clamp(27px,1.2vw + 19px,34px)}
.sj .sj-text h2.sj-display{font-size:clamp(34px,3vw + 16px,56px);line-height:1.02}
.sj .sj-text h3{font-size:22px}
.sj-text ul{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.sj-text li::marker{color:var(--color-primary)}
.sj-muted{color:var(--color-text-muted)}

/* Split */
.sj-split{display:grid;gap:var(--space-11);grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.sj-split{grid-template-columns:1fr 1fr}.sj-split--left>:first-child{order:2}}
.sj-split__img{width:100%;border-radius:var(--radius-3xl);object-fit:cover}
@media (min-width:880px){.sj-split--sticky .sj-split__img{position:sticky;top:96px}}

/* Accent */
.sj .sj-accent{font-family:var(--font-heading);font-weight:600;text-transform:uppercase;font-size:clamp(24px,1.4vw + 18px,32px);line-height:1.15;text-wrap:balance}
.sj-accent em{font-style:normal;color:var(--color-primary)}
.sj-pull{font-size:20px;line-height:1.6;border-left:3px solid var(--color-primary);padding-left:22px;margin:0;max-width:640px}
.sj-lead{font-size:clamp(19px,.6vw + 17px,22px);line-height:1.6}

/* Lines */
.sj-lines{list-style:none;margin:0;padding:0}
.sj .sj-lines li{font-family:var(--font-heading);font-weight:600;text-transform:uppercase;font-size:24px;line-height:1.2;padding:10px 0;border-bottom:1px solid var(--color-border)}

/* Question */
.sj-question{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3xl);padding:var(--space-8);display:flex;flex-direction:column;gap:14px;max-width:760px}
.sj .sj-question h3{font-size:clamp(24px,1vw + 20px,32px);color:var(--color-primary)}

/* Author */
.sj-author{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
@media (min-width:700px){.sj-author{grid-template-columns:140px 1fr}}
.sj-author__photo{width:140px;height:140px;border-radius:var(--radius-full);object-fit:cover}
.sj-author--tall{grid-template-columns:1fr}
@media (min-width:880px){.sj-author--tall{grid-template-columns:1fr 1fr;gap:var(--space-11)}}
.sj-author--tall .sj-author__photo{width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--radius-3xl);object-position:center 20%}

/* Points */
.sj-points{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:820px){.sj-points{grid-template-columns:1fr 1fr}}
.sj-points__item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px}
.sj-points__n{font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--color-primary)}

/* Tags */
.sj-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.sj-tags li{padding:6px 14px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);font-size:15px;line-height:1.5}

/* Timeline */
.sj-timeline{list-style:none;margin:0;padding:0;position:relative}
.sj-timeline::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--color-border)}
.sj-timeline li{position:relative;padding:0 0 22px 32px;display:grid;grid-template-columns:110px 1fr;gap:4px 18px}
.sj-timeline li:last-child{padding-bottom:0}
.sj-timeline li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-primary)}
.sj-timeline b{font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:560px){.sj-timeline li{grid-template-columns:1fr}}

/* Columns */
.sj-columns{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sj-columns>div{border-top:2px solid var(--color-primary);padding-top:12px}
.sj-columns b{display:block;font-weight:700}
.sj-columns span{color:var(--color-text-muted);font-size:15px}

/* Sessions */
.sj-sessions{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border)}
.sj-sessions li{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--color-border)}
.sj-sessions b{font-family:var(--font-heading);font-weight:600;font-size:29px;color:var(--color-primary);font-variant-numeric:tabular-nums;min-width:90px}
.sj-sessions span{font-size:18px}

/* Prices — как «Стоимость абонементов» на сайте: белые карточки на красной секции, строки-плашки, цена красным */
.sj-prices{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));position:relative}
.sj-prices__card{color:var(--color-text);background:var(--sj-price-card);border-radius:var(--radius-2xl);padding:26px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-float)}
.sj .sj-prices__card h3{font-size:20px;text-transform:none;margin-bottom:8px}
.sj-prices__row{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;background:var(--color-bg);border-radius:var(--radius-lg);font-variant-numeric:tabular-nums;font-size:15px}
.sj-prices__row b{font-weight:600;white-space:nowrap;color:var(--color-primary)}
.sj-prices__card .sj-btn{margin-top:12px;align-self:flex-start}

/* Ticket */
.sj-ticket{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3xl);overflow:hidden;box-shadow:var(--shadow-float);max-width:380px}
.sj-ticket__top{padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px}
.sj-ticket dl,.sj-aside dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.sj-ticket dt,.sj-aside dt{font-size:13px;font-weight:600;color:var(--color-text-muted);padding-top:2px}
.sj-ticket dd,.sj-aside dd{margin:0;font-weight:600}
.sj-ticket__bottom{background:var(--sj-red-surface);color:var(--color-white);padding:22px 26px;border-top:2px dashed #ffffff8c;display:flex;flex-direction:column;gap:12px}
.sj-ticket__price{font-family:var(--font-heading);font-weight:600;font-size:45px;line-height:1;text-transform:uppercase}
.sj-ticket__bottom .sj-btn{width:100%}

/* Aside */
.sj-aside{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3xl);padding:var(--space-6);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-float);max-width:380px}
.sj-aside .sj-btn{width:100%}

/* Card */
.sj-cards{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sj-card,.sj a.sj-card{display:flex;flex-direction:column;color:var(--color-text);text-decoration:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;min-width:0}
.sj-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);color:var(--color-text)}
.sj-card__img{width:100%;height:180px;object-fit:cover}
.sj-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.sj-card__meta{font-size:13px;font-weight:600;color:var(--color-primary)}
.sj .sj-card h3{font-size:22px}
.sj-card p{font-size:15px;color:var(--color-text-muted);line-height:1.5}

/* People */
.sj-people{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sj-person,.sj a.sj-person{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none;color:var(--color-text)}
.sj-person img{width:112px;height:112px;border-radius:var(--radius-full);object-fit:cover;background:var(--color-accent-light)}
.sj-person b{font-weight:600}
.sj-person span{font-size:15px;color:var(--color-text-muted);line-height:1.45}
.sj-person:hover b{color:var(--color-primary)}

/* Gallery */
.sj-gallery{display:grid;gap:var(--space-4);grid-template-columns:repeat(4,1fr)}
.sj-gallery figure{margin:0;display:flex;flex-direction:column;gap:10px}
.sj-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-2xl)}
.sj-gallery figcaption{font-size:13px;color:var(--color-text-muted)}
.sj-gallery--first figure:first-child{grid-column:span 2;grid-row:span 2}
.sj-gallery--first figure:first-child img{aspect-ratio:auto;height:100%;min-height:260px}
.sj-gallery:not(:first-child){margin-top:var(--space-11)}
.sj-gallery:not(:last-child){margin-bottom:var(--space-11)}
@media (max-width:760px){.sj-gallery{grid-template-columns:1fr 1fr}.sj-gallery--first figure:first-child{grid-row:auto}}
/* Gallery: ссылка-обёртка фото (a.sj-zoom) — открывает просмотр (enhance) */
.sj-zoom{display:block;width:100%;height:100%;cursor:zoom-in;border-radius:inherit}
.sj-zoom:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Просмотр фото */
/* ровно в экран (100vw шире окна на полосу прокрутки страницы — отсюда был лишний скролл), без своей прокрутки */
.sj-lb{position:fixed;inset:0;max-width:none;max-height:none;width:auto;height:auto;margin:0;padding:0;border:0;overflow:hidden;overscroll-behavior:contain;background:#0c0908f2;color:var(--color-white)}
/* пока фото открыто, страница под ним не прокручивается (html и body — прокручивать может любой из них) */
html:has(dialog.sj-lb[open]),html:has(dialog.sj-lb[open]) body{overflow:hidden}
/* свайп листает фото, а не страницу: браузер не берёт горизонтальный жест себе (иначе свайп вправо — «назад» в истории) */
html:has(dialog.sj-lb[open]),html:has(dialog.sj-lb[open]) body{overscroll-behavior:none}
.sj-lb{touch-action:pinch-zoom}
.sj-lb::backdrop{background:transparent}
.sj-lb[open]{display:flex;align-items:center;justify-content:center}
.sj-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,1400px)}
.sj-lb__img{max-width:100%;max-height:82dvh;object-fit:contain;border-radius:var(--radius-lg)}
.sj-lb__cap{font-size:14px;color:#ffffffb3;text-align:center}
.sj-lb__btn{position:absolute;width:var(--layout-tap);height:var(--layout-tap);border-radius:var(--radius-full);border:1px solid #ffffff38;background:#ffffff14;color:var(--color-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sj-lb__btn:hover{background:#ffffff2e}
.sj-lb__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sj-lb__close{top:16px;right:16px}
.sj-lb__prev{left:16px;top:50%;transform:translateY(-50%)}
.sj-lb__next{right:16px;top:50%;transform:translateY(-50%)}
.sj-lb--single .sj-lb__prev,.sj-lb--single .sj-lb__next{display:none}
/* точки — только на телефоне: там вместо стрелок листают свайпом */
.sj-lb__dots{display:none}
.sj-lb__dot{width:8px;height:8px;border-radius:var(--radius-full);background:#ffffff59;transition:transform .2s ease,background-color .2s ease}
.sj-lb__dot.is-on{background:var(--color-white)}
.sj-lb__dot--sm{transform:scale(.6)}
@media (max-width:640px){.sj-lb__prev,.sj-lb__next{display:none}.sj-lb__dots{display:flex;gap:8px;position:absolute;left:50%;bottom:28px;transform:translateX(-50%)}.sj-lb--single .sj-lb__dots{display:none}.sj-lb__img{max-height:72dvh}}
@media (prefers-reduced-motion:reduce){.sj-lb__dot{transition:none}}

/* Toggles — фильтры-таблетки над списком: группы кнопок, выбранная — красная (aria-pressed) */
.sj-toggles{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-bottom:var(--space-7)}
.sj-toggles>div{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sj .sj-toggles .sj-btn--outline{color:var(--color-text);border-color:var(--color-border);border-width:1px}
.sj .sj-toggles .sj-btn--outline:hover{color:var(--color-primary);border-color:currentColor;transform:none}

/* People: «Показать ещё» */
.sj-people__more{margin-top:var(--space-8)}

/* Reviews — отзывы: строка рейтинга + карточки; текст сворачивается до 8 строк */
.sj-reviews__sum{margin:-22px 0 var(--space-4);font-weight:600}
.sj .sj-reviews__sum a{display:inline-flex;align-items:center;min-height:var(--layout-tap);color:var(--color-text);text-decoration:none}
.sj .sj-reviews__sum a:hover{color:var(--color-primary)}
.sj-review:hover{transform:none;box-shadow:none}
.sj-review .sj-card__meta{color:#F5A623;letter-spacing:.1em}
.sj .sj-review h3{font-size:20px}
.sj-review__text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.sj-review.is-open .sj-review__text{display:block}
.sj-review__more{align-self:flex-start;margin-top:4px;min-height:var(--layout-tap);padding:0;border:0;background:none;font:600 14px/1 var(--font-body);color:var(--color-primary);cursor:pointer}
.sj-review__more:hover{color:var(--color-primary-dark)}

/* Contacts: соцсети и карта */
.sj-socials{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.sj .sj-socials a{display:inline-flex;align-items:center;justify-content:center;width:var(--layout-tap);height:var(--layout-tap);border-radius:var(--radius-full);background:var(--color-cta);color:var(--color-white)}
.sj .sj-socials a:hover{background:var(--color-primary-dark);color:var(--color-white)}
.sj-map{display:block;width:100%;height:360px;margin-top:var(--space-6);border:0;border-radius:var(--radius-2xl)}

/* FloatingCta — плавающая кнопка записи. Прячется над первым экраном, полосой записи и подвалом (enhance) */
.sj-float,.sj a.sj-float{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:14px 22px;border-radius:var(--radius-full);background:var(--color-cta);color:var(--color-white);font:600 16px/1 var(--font-body);text-decoration:none;box-shadow:0 10px 24px -8px #0000004d;transition:opacity .2s ease,transform .2s ease}
.sj a.sj-float:hover{background:var(--color-primary-dark);color:var(--color-white)}
.sj-float.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}

/* Gallery layout:"strip" — лента-мозаика с прокруткой вбок (главная, «Как это было»). 3 ряда по 160px, на телефоне 2 по 120px; плитки 2×2 / 2×1 / 1×2. Стрелки — как у Directions. */
.sj-strip-wrap{position:relative}
.sj-strip-wrap:not(:first-child){margin-top:var(--space-11)}
.sj-strip{--strip-cell:160px;--strip-rows:3;display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(var(--strip-rows),var(--strip-cell));grid-auto-columns:var(--strip-cell);gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
/* на компьютере лента — в пределах колонки: обрезается по её краю, с тем же отступом от края экрана, что и остальное содержимое */
.sj-strip::-webkit-scrollbar{display:none}
.sj-strip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sj-strip__item{margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--color-bg-alt);scroll-snap-align:start}
.sj-strip__item--big{grid-row:span 2;grid-column:span 2}
.sj-strip__item--wide{grid-column:span 2}
.sj-strip__item--tall{grid-row:span 2}
.sj-strip__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;filter:brightness(var(--sj-photo-dim))}
.sj-strip__item:hover img{transform:scale(1.04)}
.sj-strip-wrap--dark .sj-dirs__arrow{background:#ffffff14;border-color:#ffffff38;color:var(--color-white)}
.sj-strip-wrap--dark .sj-dirs__arrow:hover{border-color:var(--color-white);color:var(--color-white)}
.sj-strip-wrap--dark .sj-strip__item{background:#ffffff14}
/* на телефоне лента уходит до края экрана: слева начинается по колонке, справа плитка обрезается краем экрана */
@media (max-width:640px){.sj-strip{--strip-cell:120px;--strip-rows:2;margin-inline:calc(-1 * var(--space-6));padding-inline:var(--space-6);scroll-padding-inline:var(--space-6)}.sj-strip-wrap:not(:first-child){margin-top:var(--space-8)}}
/* Телефон: афиша и отзывы — лента с прокруткой вбок, как факультеты; плавающая кнопка не закрывает подвал */
@media (max-width:640px){
  .sj-cards--strip{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-6);margin-inline:calc(-1 * var(--space-6));padding:4px var(--space-6) 12px;scrollbar-width:none}
  .sj-cards--strip::-webkit-scrollbar{display:none}
  .sj-cards--strip>.sj-card{flex:0 0 82%;scroll-snap-align:start}
  .sj-map{height:280px}
  .sj-float,.sj a.sj-float{right:16px;bottom:16px}
  .sj-footer:has(~ .sj-float),body:has(.sj-float) .sj-footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.sj-float{transition:none}}
@media (prefers-reduced-motion:reduce){.sj-strip__item img{transition:none}.sj-strip__item:hover img{transform:none}}

/* Marquee */
.sj-marquee{background:var(--sj-marquee-bg);color:var(--sj-marquee-ink);overflow:hidden;white-space:nowrap;padding-block:14px;font-family:var(--font-heading);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.sj-marquee--dark{background:var(--color-sidebar-bg);color:var(--color-white);font-size:19px}
.sj-marquee span{display:inline-block;animation:sj-mq 45s linear infinite}
@keyframes sj-mq{to{transform:translateX(-50%)}}

/* JoinBand */
.sj-join{background:var(--sj-red-surface);color:var(--color-white)}
.sj-join .sj-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:var(--space-13)}
.sj .sj-join h2{font-size:clamp(30px,1.6vw + 19px,42px);color:var(--color-white);max-width:20ch}
.sj-join p{color:#ffffffe0;margin-top:10px;max-width:52ch}
/* JoinBand с записью внутри (главная): заголовок по центру, под ним — виджет записи на светлой панели или форма заявки прямо на красном */
.sj-join--panel .sj-wrap{flex-direction:column;align-items:center;text-align:center}
.sj-join--panel p{margin-inline:auto}
.sj .sj-join--panel .sj-wrap>div:first-child h2{margin-inline:auto}
/* на светлой панели — обычный тёмный текст, а не белый текст полосы */
.sj .sj-join__panel h2,.sj .sj-join__panel h3{color:var(--color-text);max-width:none}
.sj .sj-join__panel p{color:inherit;max-width:none;margin-inline:0}
.sj-join__panel{width:100%;max-width:640px;text-align:left;background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-card)}
.sj-join__panel--widget{max-width:860px;padding:0;overflow:hidden}
.sj-join__form{width:100%;max-width:480px;text-align:left}

/* Footer */
.sj-footer{background:var(--color-sidebar-bg);color:var(--color-white);padding-block:40px 28px;font-size:15px}
.sj-footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.sj-footer__logo{height:56px;width:auto}
.sj-footer__nav{display:flex;flex-wrap:wrap;gap:0 22px}
.sj .sj-footer__nav a,.sj .sj-footer__fine a{display:inline-flex;align-items:center;min-height:var(--layout-tap)}
.sj .sj-footer__nav a{color:var(--color-sidebar-text);text-decoration:none}
.sj .sj-footer__nav a:hover{color:var(--color-white)}
.sj-footer__fine{margin-top:24px;font-size:13px;color:var(--color-sidebar-text-muted)}

/* Брендбук: акценты */
.sj-script{font-family:var(--font-script);font-weight:400;color:var(--color-primary);font-size:clamp(36px,2.4vw + 22px,56px);line-height:1.1;text-transform:none}
.sj-accent--gradient{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.sj-script-accent{display:flex;flex-direction:column;gap:2px}

/* Icon — фирменные иконки брендбука */
.sj-icon{display:inline-block;flex:none;vertical-align:middle}
.sj-icon--round{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-accent-light);color:var(--color-primary)}

/* Line — фирменная линия брендбука, всегда «на вылет», не обрезается по высоте */
.sj-line{position:relative;overflow:hidden;pointer-events:none;line-height:0}
.sj-line img{display:block;height:auto;max-width:none;width:112%;margin-left:-6%}
.sj-line--left img{width:var(--line-w,80%);margin-left:-8%}
.sj-line--right img{width:var(--line-w,80%);margin-left:calc(100% - var(--line-w,80%) + 8%)}

/* Directions — карточки направлений как в фигме сайта: градиент цвета направления, белая волнистая линия через всю карточку, соединённая с белой иконкой, белый заголовок и белая кнопка «Перейти» */
.sj-dirs-wrap{position:relative}
.sj-dirs__nav{display:flex;justify-content:flex-end;gap:8px;margin:-8px 0 14px}
.sj-dirs__arrow{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.sj-dirs__arrow:hover{border-color:var(--color-primary);color:var(--color-primary)}
.sj-dirs{display:flex;gap:var(--space-5);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-6);padding:4px var(--space-6) 12px;margin-inline:calc(-1 * var(--space-6));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sj-dirs::-webkit-scrollbar{display:none}
.sj-dirs>.sj-dir{flex:0 0 clamp(250px,24vw,300px);scroll-snap-align:start}
.sj-dir,.sj a.sj-dir{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:18px;min-height:300px;padding:24px 26px 22px;border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--color-white);background:linear-gradient(180deg,var(--dir-500) 0%,var(--dir-700) 100%);transition:transform .2s ease,box-shadow .2s ease}
.sj-dir:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);color:var(--color-white)}
.sj-dir__art{position:absolute;left:0;top:14px;width:100%;height:auto;overflow:visible;color:var(--color-white);pointer-events:none}
.sj .sj-dir h3{position:relative;font-size:30px;line-height:1.1;color:var(--color-white);text-transform:none;letter-spacing:0}
.sj-dir__text{position:relative;display:flex;flex-direction:column;gap:6px}
/* meta — возраст или формат под названием («от 2 лет») */
.sj-dir__meta{font-size:14px;font-weight:600;line-height:1.3;color:#ffffffe6}
.sj-dir__icon{display:none}
.sj-dir__go{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;background:var(--color-white);color:var(--dir-700);border-radius:var(--radius-full);font-size:16px;font-weight:500}
.sj-dir:hover .sj-dir__go{background:#ffffffd9}
.sj-dir--vocal{--dir-500:var(--vocal-500);--dir-700:var(--vocal-700)}
.sj-dir--art{--dir-500:var(--art-500);--dir-700:var(--art-700)}
.sj-dir--kids{--dir-500:var(--kids-500);--dir-700:var(--kids-700)}
.sj-dir--theatre{--dir-500:var(--theatre-500);--dir-700:var(--theatre-700)}
.sj-dir--music{--dir-500:var(--music-500);--dir-700:var(--music-700)}
.sj-dir--production{--dir-500:var(--production-500);--dir-700:var(--production-700)}
.sj-dir--dance{--dir-500:var(--dance-500);--dir-700:var(--dance-700)}

/* Stats — цифры центра с подчёркиванием в цвете направления, как на главной */
.sj-stats{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sj-stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.sj-stat b{font-family:var(--font-heading);font-weight:600;font-size:40px;line-height:1}
.sj-stat i{display:block;height:3px;width:100%;border-radius:2px;background:var(--stat-c,var(--color-primary))}
.sj-stat span{font-size:14px;line-height:1.4;color:var(--color-text-muted)}
.sj-stats--dark .sj-stat{background:#ffffff14;border-color:#ffffff1f;color:var(--color-white)}
.sj-stats--dark .sj-stat span{color:#ffffffcc}

/* Faq — как на сайте: белые строки, «плюс» в голубом круге */
.sj-faq{display:flex;flex-direction:column;gap:var(--space-3);max-width:820px;margin-inline:auto}
.sj-faq details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.sj-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-size:16px}
.sj-faq summary::-webkit-details-marker{display:none}
.sj-faq summary .sj-icon--round{width:22px;height:22px;transition:transform .2s ease}
.sj-faq details[open] summary .sj-icon--round{transform:rotate(45deg)}
.sj-faq details>div{padding:0 20px 18px;color:var(--color-text-muted);font-size:15px}

/* Contacts — карточки контактов с фирменными иконками */
.sj-contacts{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sj-contact{display:flex;gap:14px;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;font-size:15px;line-height:1.45}
.sj-contact .sj-icon{color:var(--color-primary)}
.sj-contact small{display:block;font-size:13px;color:var(--color-text-muted)}
.sj .sj-contact a{display:inline-flex;align-items:center;min-height:var(--layout-tap);margin-block:-10px}


/* ===== Телефон (до 640px) — главный экран сайта. Сверено с мобильной версией synerjoy.cy (390px). ===== */
.sj-header__menu{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:none;color:inherit;cursor:pointer;padding:0}
.sj-header__menu span,.sj-header__menu span::before,.sj-header__menu span::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative}
.sj-header__menu span::before,.sj-header__menu span::after{content:"";position:absolute;left:0}
.sj-header__menu span::before{top:-7px}.sj-header__menu span::after{top:7px}
.sj-header__lang{font-size:14px;font-weight:600;color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding-inline:6px}
.sj-header__logo{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1120px){.sj-header__menu{display:inline-flex}.sj-header__row>.sj-btn{display:none}}
@media (max-width:640px){
  .sj{font-size:16px;line-height:1.5}
  .sj-section{padding-block:var(--space-13)}
  .sj .sj-hero h1{font-size:36px;line-height:1.05}
  .sj-hero__in{padding-block:120px 110px;gap:14px}
  .sj-hero__sub{font-size:16px;line-height:1.5}
  .sj .sj-hero h1.sj-hero__brand{font-size:inherit}
  .sj-hero__lockup{font-size:12px;line-height:1.35}
  .sj-hero__tagline{font-size:20px}
  .sj-hero--brand .sj-hero__sub{font-size:15px;line-height:1.6}
  .sj-hero__in>.sj-btn,.sj-hero__in .sj-ctas{width:100%}
  .sj-hero__portrait{width:140px;height:140px}
  .sj .sj-text h2,.sj .sj-section__head h2{font-size:30px;line-height:1.15}
  .sj .sj-text h2.sj-display{font-size:32px;line-height:1.08}
  .sj .sj-accent{font-size:24px}
  .sj-pull{font-size:18px;padding-left:16px}
  .sj .sj-lines li{font-size:22px}
  .sj-btn{min-height:48px;padding:14px 24px;font-size:15px}
  .sj-btn--sm{min-height:44px;padding:12px 20px;font-size:14px}
  .sj-ctas{flex-direction:column;align-items:stretch}
  .sj-ctas .sj-btn{width:100%}
  .sj-split{gap:var(--space-6)}
  .sj-split__img{border-radius:var(--radius-2xl)}
  .sj-stats{grid-template-columns:1fr 1fr;gap:12px}
  .sj-stat{padding:16px}
  .sj-stat b{font-size:34px}
  .sj-stat span{font-size:13px}
  /* телефон — как на synerjoy.cy: столбик полос во всю ширину; цвет направления темнее слева, название слева, белая иконка справа, без волны и кнопки */
  .sj-dirs{flex-direction:column;gap:8px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .sj-dirs>.sj-dir{flex:none}
  .sj-dirs__nav{display:none}
  .sj-dir,.sj a.sj-dir{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:16px 12px 16px 20px;border-radius:var(--radius-2xl);background:linear-gradient(90deg,var(--dir-700) 0%,var(--dir-500) 100%)}
  .sj-dir:hover{transform:none}
  .sj-dir__art,.sj-dir__go{display:none}
  .sj-dir__text{flex:1;min-width:0;gap:2px}
  .sj .sj-dir h3{font-size:16px;line-height:1.25;font-weight:600}
  .sj-dir__meta{font-size:13px}
  .sj-dir__icon{display:block;flex:none;width:48px;height:48px;color:var(--color-white)}
  .sj-cards{grid-template-columns:1fr}
  .sj-people{grid-template-columns:1fr 1fr;gap:20px 12px}
  .sj-person img{width:96px;height:96px}
  .sj-person span{font-size:13px}
  .sj-prices__card{padding:20px}
  .sj-prices__row{padding:10px 12px;font-size:15px}
  .sj-prices__card .sj-btn{align-self:stretch}
  .sj-faq summary{font-size:17px;padding:16px 18px;min-height:56px}
  .sj-faq summary .sj-icon--round{width:32px;height:32px;flex:none}
  .sj-contacts{grid-template-columns:1fr}
  .sj-ticket,.sj-aside{max-width:none}
  .sj-question{padding:var(--space-6)}
  .sj-join .sj-wrap{flex-direction:column;align-items:stretch;text-align:center}
  .sj .sj-join h2{font-size:30px;max-width:none}
  .sj-join p{margin-inline:auto}
  .sj-footer__row{flex-direction:column;align-items:flex-start}
  .sj-gallery{gap:12px}
  .sj-gallery:not(:first-child){margin-top:var(--space-8)}
  .sj-gallery:not(:last-child){margin-bottom:var(--space-8)}
  .sj-line img{width:150%;margin-left:-25%}
  .sj-marquee{font-size:13px;padding-block:10px}
}

@media (prefers-reduced-motion:reduce){.sj-btn,.sj-card,.sj-dir{transition:none}.sj-btn:hover,.sj-card:hover,.sj-dir:hover{transform:none}.sj-marquee span{animation:none}}
.sj-card__art{height:180px;background:var(--gradient-brand)}

/* ThemeToggle */
.sj-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sj-theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-full);background:transparent;color:inherit;font:600 14px/1 var(--font-body);cursor:pointer;transition:background-color .2s,border-color .2s}
.sj-theme-toggle>span{align-items:center;gap:8px}
.sj-theme-toggle>.sj-theme-light-only{display:inline-flex}
.sj-theme-toggle svg{display:block;flex:none}
.sj-theme-toggle:hover{background:var(--color-bg-alt)}
.sj-theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sj-theme-toggle--label{width:auto;padding:0 18px}
.sj-header--over .sj-theme-toggle{border-color:#ffffff59}
.sj-header--over .sj-theme-toggle:hover{background:#ffffff1f}
.sj-footer .sj-theme-toggle{border-color:#ffffff33;color:var(--color-white)}
.sj-footer .sj-theme-toggle:hover{background:#ffffff14}
:root[data-theme="dark"] .sj-theme-toggle>.sj-theme-dark-only{display:inline-flex}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sj-theme-toggle>.sj-theme-dark-only{display:inline-flex}}
.sj-header__row{justify-content:flex-start;gap:8px}
.sj-header__logo{margin-right:auto}
@media (min-width:1121px){.sj-header__row{gap:12px}.sj-header__logo{margin-right:40px;flex:none}.sj-header__nav{margin-right:auto}}