/* Start:/local/templates/dd2026/assets/css/main.css?179414393780877*/
:root{
  --bg:#070707; --fg:#ece6da; --dim:rgba(236,230,218,.68); --faint:rgba(236,230,218,.13);
  --acc:#fc4c01; --ease:cubic-bezier(.7,0,.2,1); --out:cubic-bezier(.2,.8,.2,1);
  --disp:"Rubik",system-ui,sans-serif; --dirt:"Rubik Dirt","Rubik",system-ui,sans-serif; --body:"Rubik",system-ui,sans-serif;
  --mono:"Rubik",system-ui,sans-serif;   /* подписи и метки — Rubik, не моноширинный (Вадим 25.10: без «технических» капс-подписей и мелкого текста) */
  --top:calc(78px + env(safe-area-inset-top)); --bot:calc(58px + env(safe-area-inset-bottom));
  /* общие токены (Р1): --top/--bot не трогаем — на них липкие якоря, HUD и .cab-nav */
  --gut:max(18px,env(safe-area-inset-left),env(safe-area-inset-right));   /* поле: в горизонтальной ориентации — не под «чёлку» */
  --c-top:calc(var(--top) + 10px);   /* верх первого элемента контента: 88 px телефон / 106 px ≥900 */
  --c-bot:calc(var(--bot) + 8px);    /* низ безопасной зоны поэкранных страниц: 66 / 74 px (+ safe-area) */
  --r-s:12px; --r-m:16px; --r-l:24px;   /* радиусы: поля и миниатюры / карточки и панели / крупные медиа; плашки и кнопки — 999px */
}
@media (min-width:900px){ :root{ --gut:max(44px,env(safe-area-inset-left),env(safe-area-inset-right)); --top:96px; --bot:66px } }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:pan-y}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
small{font-size:max(14px,.85em)}   /* мелкого текста нет нигде (Вадим 25.10): не меньше 14 px */
::selection{background:var(--acc);color:#000}
.d-none{display:none!important}   /* служебный класс: скрыть блок (блоки Strava в кабинете) */

/* layers */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.82) 100%)}
.grain-wrap{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:60}
#grain{position:absolute;inset:-50%;width:200%;height:200%;opacity:.07;animation:grain .6s steps(6) infinite;mix-blend-mode:screen}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}
#scan{position:fixed;left:0;right:0;top:0;height:2px;z-index:55;pointer-events:none;background:var(--acc);box-shadow:0 0 24px 4px rgba(252,76,1,.7);opacity:0}

.mono{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
/* крупные заголовки экранов и страниц — «пыльный» Rubik Dirt (одно начертание: жирность не синтезируем) */
.ddl-title,.motto,.statement,.h-xl,.h-l,.page-title,.long-type,.ny-title,.g-title,.hbd-title,.vol-title,.f-big{font-family:var(--dirt)!important;font-synthesis:none}
.muted{color:var(--dim)} .acc{color:var(--acc)}
.label{display:inline-flex;align-items:center;gap:10px;color:var(--dim)}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.label b{color:var(--fg);font-weight:400}
.outline{color:transparent;-webkit-text-stroke:1.2px var(--fg)}
.w{display:inline-block;white-space:nowrap;vertical-align:top;padding:.14em 0 .06em;margin:-.14em 0 -.06em;-webkit-clip-path:inset(0 -.5em);clip-path:inset(0 -.5em)} /* буквы при появлении выезжают снизу — обрезка только сверху и снизу (сверху запас под Й, Ё); по бокам не режем: на iPhone при отрицательной разрядке срезался правый край последней «D» */
.c{display:inline-block;will-change:transform}

/* screens */
.scr{position:fixed;inset:0;z-index:5;visibility:hidden;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  display:flex;flex-direction:column;padding:var(--c-top) var(--gut) var(--c-bot)}
.scr::-webkit-scrollbar{display:none}
.scr.on{visibility:visible}
/* экран начинается от шапки (а не по центру: на высоких айфонах верх пустовал); не влез — растёт вниз и листается (Р2) */
.scr>.in{margin:0 0 auto;width:100%}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(14px,3vh,30px)}
.h-xl{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;font-size:clamp(26px,9.3vw,200px)}
.h-l{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,7vw,92px)}
@media (min-width:900px){ .h-xl{font-size:min(8.6vw,17vh)} .h-l{font-size:min(5.2vw,8.5vh)} }
@media (min-width:900px){ #s-events .h-xl{font-size:min(8vw,12vh)} .evc .pic{height:min(29vh,380px)} .evc{width:min(24vw,300px)} #s-contacts .in{display:grid;grid-template-columns:1.2fr 1fr;column-gap:64px;align-items:start} #s-contacts .sec-head{grid-column:1/-1} #s-contacts h2,#s-contacts .big-link{grid-column:1} #s-contacts .ct-grid{grid-column:2;grid-row:2/5;margin-top:0} #s-contacts .ct-foot{grid-column:1/-1} .vac a{padding:1.5vh 0;font-size:min(2.4vw,3.6vh)} .vac{margin:2.2vh 0} #s-people .lead{font-size:min(1.4vw,2.2vh)} .ct{padding:1.3vh 0} .ct-grid{margin-top:3vh} .ct-foot{margin-top:2.4vh} }
.lead{font-size:clamp(15px,1.6vw,20px);line-height:1.45;max-width:640px}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;isolation:isolate;
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  min-height:56px;padding:0 28px;border-radius:999px;border:1px solid rgba(236,230,218,.35);transition:color .4s,border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{color:#0a0a0a;border-color:var(--acc)} .btn:hover::before{transform:none}
.btn.solid{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}
.btn.dark{background:#0a0a0a;color:var(--fg);border-color:#0a0a0a} .btn.dark::before{background:var(--fg)} .btn.dark:hover{color:#0a0a0a}
.btn[aria-disabled=true]{cursor:default}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 1.4s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(252,76,1,.7)}100%{box-shadow:0 0 0 12px rgba(252,76,1,0)}}
.circ{width:48px;height:48px;border-radius:50%;border:1px solid rgba(236,230,218,.3);display:grid;place-items:center;font-size:18px;transition:background .3s,color .3s,border-color .3s;flex:none}
.circ:hover{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}

/* preloader */
#loader{position:fixed;inset:0;z-index:80;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--gut) + env(safe-area-inset-top)) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom))}
#loader .row{display:flex;justify-content:space-between;align-items:flex-end}
#ldPct{font-family:var(--disp);font-weight:900;font-size:clamp(56px,14vw,140px);line-height:.85;letter-spacing:-.05em}
#ldPct small{font-size:.3em;color:var(--acc);vertical-align:top}
#ldBar{position:fixed;left:0;top:0;height:2px;width:0;background:var(--acc);box-shadow:0 0 16px var(--acc);z-index:81}

/* header */
#hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) var(--gut) 14px;mix-blend-mode:difference;transition:opacity .6s,transform .8s var(--ease)}
#hdr.pre{opacity:0;transform:translateY(-30px)}
#hdr.hide{transform:translateY(-110%)}
.logo{font-family:var(--disp);font-weight:900;font-size:14px;line-height:1;display:flex;gap:8px;align-items:center}
/* знак клуба — официальная монограмма DD (вариант «DD» курсивом — img/logo-dd.png, aspect-ratio 239/120) (маска: цвет как у текста шапки; на оранжевом экране «Волонтёрам» — тёмный) */
.logo i{display:block;flex:none;height:30px;aspect-ratio:88/150;background:var(--fg);-webkit-mask:url(/local/templates/dd2026/assets/css/../img/logo-dd-mono.png) center/contain no-repeat;mask:url(/local/templates/dd2026/assets/css/../img/logo-dd-mono.png) center/contain no-repeat}
.logo i b{display:none}
.nav{display:none;gap:28px}
.nav a{position:relative} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.hright{display:flex;align-items:center;gap:18px}
#burger{width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,230,218,.4);position:relative}
#burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--fg);transition:transform .5s var(--ease),top .5s var(--ease)}
#burger span:nth-child(1){top:18px} #burger span:nth-child(2){top:24px}
body.menu-open #burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open #burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (min-width:900px){ .nav{display:flex} }

/* menu */
#menu{position:fixed;inset:0;z-index:45;background:rgba(7,7,7,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  clip-path:circle(0% at calc(100% - 40px) 36px);transition:clip-path .9s var(--ease);display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(96px + env(safe-area-inset-top)) var(--gut) calc(26px + env(safe-area-inset-bottom));overflow-y:auto}
body.menu-open #menu{clip-path:circle(150% at calc(100% - 40px) 36px)}
#menu ol{list-style:none;display:flex;flex-direction:column;gap:2px}
#menu li{overflow:hidden}
#menu li a{display:flex;align-items:baseline;gap:14px;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(26px,8.6vw,84px);line-height:1.06;letter-spacing:-.04em;transform:translateY(105%);transition:transform .8s var(--out),color .3s}
#menu li a small{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--acc)}
#menu li a:hover,#menu li a.on{color:var(--acc)}
body.menu-open #menu li a{transform:none}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin-top:24px;opacity:0;transition:opacity .6s .3s}   /* телефон и почта — строкой, соцсети и «Документы» — второй: 6 пунктов влезают на SE */
body.menu-open .menu-foot{opacity:1}
.menu-foot .soc{display:flex;gap:0 18px}
.menu-foot a{padding:12px 0}   /* зоны нажатия ≥ 44 px */
/* короткие («VK») — зона не уже 44 px: расширение по центру, без сдвига строки */
.menu-foot a{position:relative} .menu-foot a::after{content:"";position:absolute;top:-1px;bottom:-1px;left:50%;width:max(100%,44px);transform:translateX(-50%)}

/* curtain */
#curtain{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center;background:var(--acc);color:#0a0a0a;transform:translateY(100%)}
#curtain .t{font-family:var(--disp);font-weight:900;font-size:clamp(30px,8vw,110px);text-transform:uppercase;letter-spacing:-.04em;overflow:hidden;text-align:center;padding:0 var(--gut)}
#curtain .t span{display:inline-block}

/* HUD */
#hud{position:fixed;z-index:40;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .6s}
#hudNum{color:var(--acc)} #hudLine{width:44px;height:1px;background:rgba(236,230,218,.25);position:relative;overflow:hidden}
#hudLine i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
#hudR{position:fixed;z-index:40;right:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom));mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .6s;display:flex;gap:16px}
.hud-on #hud,.hud-on #hudR{opacity:1}
#dots{position:fixed;z-index:40;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:4px;mix-blend-mode:difference}
.hud-on #dots{display:flex}
#dots button{display:flex;align-items:center;justify-content:flex-end;gap:12px;height:22px;padding:0 6px}
#dots button span{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s var(--out)}
#dots button i{width:6px;height:6px;border-radius:50%;border:1px solid var(--fg);transition:transform .4s var(--out),background .3s}
/* подпись точки — только по наведению и фокусу с клавиатуры, на всех ширинах: у активной она ложилась на «Разработано VBI», время, вкладки и поля */
#dots button:hover span,#dots button:focus-visible span{opacity:1;transform:none}
#dots button.on i{background:var(--fg);transform:scale(1.4)}
@media (max-width:899px){ #dots{display:none!important} }
/* текстовые экраны не заходят под точки справа; на экранах-лентах (карточки, фото) точки прячем */
@media (min-width:900px){ .scr:not(#s-gallery):not(#s-photos):not(#s-events):not(#s-hbd)>.in{padding-right:48px} }
#dots{transition:opacity .4s} body[data-scr=events] #dots,body[data-scr=gallery] #dots,body[data-scr=photos] #dots{opacity:0;pointer-events:none}
#arrowDown{position:fixed;z-index:40;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .5s;pointer-events:none}
.hud-on #arrowDown.show{opacity:1}
#arrowDown i{width:1px;height:34px;background:linear-gradient(var(--fg),transparent);animation:cue 1.8s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:899px){ #arrowDown span{display:none} #arrowDown{bottom:calc(10px + env(safe-area-inset-bottom))} }
/* «↓ ещё»: экран длиннее окна (Р3) — класс body.more-below ставят home.js и ddlong.js. Таблетка — в строке HUD, по центру (над контентом
   она закрывала последнюю строку): там сплошная часть нижней тени (body::after), контент уходит в тень над ней. На телефоне на это время
   прячем название экрана в HUD (оно же в метке сверху), иначе таблетка на него ложится; на ≥900 центр свободен (там «Scroll», он гаснет) */
#moreHint{position:fixed;z-index:41;left:50%;bottom:calc(11px + env(safe-area-inset-bottom));transform:translateX(-50%);height:30px;padding:0 12px;border-radius:999px;background:rgba(7,7,7,.85);border:1px solid var(--faint);
  display:flex;align-items:center;font-size:14px;letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
body.more-below #moreHint{opacity:1} body.more-below #arrowDown.show{opacity:0} body.menu-open #moreHint{opacity:0}
body.dd-inner #moreHint{display:none}
#hudName{transition:opacity .3s}
@media (max-width:899px){ body.more-below:not(.menu-open) #hudName{opacity:0} }

/* 01 hero */
.hero-top{position:absolute;top:calc(var(--top) + 4px);left:var(--gut);right:var(--gut);display:flex;justify-content:space-between}
/* первый экран: дата и заголовок — сразу под шапкой, отсчёт и кнопка — у низа; между ними — пыльное DUSTY (home.js, spot).
   Прижимать весь блок к низу нельзя: на низком экране лишнее уходило под шапку, на высоком верх пустовал */
#s-start{justify-content:flex-start}
#s-start .hero-top{position:relative;top:auto;left:auto;right:auto;gap:16px;margin-bottom:clamp(10px,2.5svh,24px)}
@media (max-width:420px){ #s-start .hero-top{letter-spacing:.04em;font-size:14px} }   /* телефон: «Est. Moscow» помещается в строку */
@media (max-width:359px){ #s-start .hero-top span:last-child{display:none} }
/* два состояния первого экрана в одной ячейке: sub 0 — визитка клуба, sub 1 — ближайший старт поверх фото; невидимое — .off (+ inert) */
#s-start>.in{margin:0;flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr}
#s-start .hero-layer{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
#s-start .hero-layer.off{visibility:hidden;pointer-events:none}
#s-start .hero-row{margin-top:auto;padding-top:clamp(16px,3svh,32px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* девиз: «Бежим» + сменяемая погода (акцент); места — на две строки («в любую / погоду»), кегль подгоняет home.js (MOTTO.fit) */
.motto{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:min(13.4vw,7.6svh);text-wrap:initial}
.motto-l1{display:block}
.motto-wx{display:block;position:relative;color:var(--acc);min-height:2.04em}
.motto-w{display:block;position:relative;z-index:1}
.motto-w .mw{display:inline-block;white-space:nowrap}
.motto-w .mc{display:inline-block;will-change:transform,opacity}
.motto-dust{position:absolute;z-index:2;left:calc(-1*var(--gut));top:-.5em;width:calc(100% + 2*var(--gut));height:calc(100% + 1.6em);pointer-events:none}
/* низ визитки: девиз словами клуба, неделя с днями встреч */
.card-foot{margin-top:auto;padding-top:clamp(12px,2.4svh,28px);display:grid;gap:clamp(10px,1.9svh,16px)}
.card-lead{font:600 clamp(15px,2.3svh,17px)/1.45 var(--body);color:rgba(236,230,218,.84);max-width:27em;text-wrap:pretty}
.card-week{display:grid;gap:10px}
.week{display:flex;gap:6px;letter-spacing:.04em}
.week span{flex:1;min-width:0;height:clamp(30px,5.2svh,38px);display:grid;place-items:center;border:1px solid var(--faint);border-radius:999px;font-size:14px;color:var(--dim);background:rgba(7,7,7,.55)}
.week span.on{position:relative;background:var(--acc);border-color:var(--acc);color:#0a0a0a;font-weight:700}
.week span.on2{background:rgba(252,76,1,.22);border-color:rgba(252,76,1,.45);color:var(--fg)}   /* среда и воскресенье (DD Long) — тоже встречи, тусклее (Вадим, 22.10) */
/* дни встреч «дышат»: тонкое кольцо расходится от плашки (ВТ, через полтакта — ПТ) */
.week span.on::after{content:"";position:absolute;inset:-1px;border:1px solid var(--acc);border-radius:inherit;opacity:0;animation:wk 2.8s cubic-bezier(.2,.8,.2,1) infinite}
.week span.on+span+span+span.on::after{animation-delay:1.4s}
@keyframes wk{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.28,1.5)}}
.card-free{font-size:14px;letter-spacing:.04em;color:var(--fg)}
.card-free::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:1px}
@media (min-width:900px){
  .motto{font-size:min(6.8vw,11.8vh)}
  .card-foot{justify-items:start}   /* низ визитки — в левой колонке: правая половина целиком под DUSTY (spot) */
  .card-lead{font-size:min(1.45vw,2.5vh)}
  .card-week{gap:12px}
  .week{gap:8px} .week span{width:50px;flex:none;height:40px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){ .week span.on::after{animation:none} }
/* вариант «Манифест» (include/hero_manifest.php, свойство раздела HERO=manifest): визитка (.mf, sub 0) и анонс (.ann, sub 1) — слои в одной клетке;
   пыльное DUSTY — в просвете .mf-dust (home.js, spot), девиз — блок строк во всю ширину, каждая строка своим кеглем (mfFit), последнее слово — акцентом */
#s-start .mf,#s-start .ann{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
#s-start .mf.off,#s-start .ann.off{pointer-events:none}
.mf-dust{flex:1 1 auto;min-height:0}
.mf-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mf-gap,clamp(3px,.7svh,7px));font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.94;text-wrap:nowrap}
.mf-l{display:block;width:max-content;max-width:none;white-space:nowrap;font-size:var(--fs,28px)}
.mf-run{color:var(--acc)}
.mf-run .w{padding-inline:.2em;margin-inline:-.2em}   /* наклон букв в «рывке» не обрезается краем слова */
.mf-foot{display:flex;align-items:center;gap:8px 16px;margin-top:clamp(14px,2.6svh,26px);padding-top:6px;border-top:1px solid var(--faint)}
.mf-next{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-left:8px;color:var(--fg);white-space:nowrap;font-size:14px;letter-spacing:.04em}
.mf-next i{font-style:normal;color:var(--acc);display:inline-block;animation:mfBob 1.8s var(--ease) infinite}
@keyframes mfBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){ .mf-next i{animation:none} }
@media (min-width:900px){
  #s-start .mf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:clamp(32px,4vw,64px)}
  .mf-text{grid-column:1;grid-row:1;align-self:center}
  .mf-dust{grid-column:2;grid-row:1}
  .mf-foot{grid-column:1/-1;grid-row:2;padding-top:10px}
  .mf-next{font-size:14px}
}
.hero-date{display:flex;gap:8px 10px;flex-wrap:wrap;margin-bottom:18px}
/* плашка S (Р5): одна строка, высота 30 */
.hero-date .tag{display:inline-block;height:30px;line-height:28px;padding:0 12px;border:1px solid var(--faint);border-radius:999px;font:400 14px/28px var(--mono);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:rgba(7,7,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#heroTitle{margin-bottom:clamp(18px,3.5vh,34px)}
.hero-row{display:grid;gap:clamp(16px,3vh,24px)}
.countdown{display:flex;gap:18px;font-family:var(--disp);font-weight:700;font-size:clamp(26px,6vw,46px);letter-spacing:-.03em;line-height:1}
.countdown div{display:flex;flex-direction:column;gap:6px}
.countdown span{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--dim)}
@media (min-width:900px){ .hero-row{grid-template-columns:auto auto 1fr;align-items:end;gap:56px} }
#s-start .shade{position:absolute;inset:0;pointer-events:none;opacity:0;   /* фото из пыли: под текстом ≥ .75 (Р9), --sh-t/--sh-b — низ заголовка и верх отсчёта (home.js, shadeFit) */
  background:linear-gradient(180deg,rgba(7,7,7,.82) 0,rgba(7,7,7,.75) var(--sh-t,42%),rgba(7,7,7,.3) calc(var(--sh-t,42%) + 8%),rgba(7,7,7,.3) calc(var(--sh-b,66%) - 8%),rgba(7,7,7,.75) var(--sh-b,66%),rgba(7,7,7,.9))}

/* 02 about */
.statement{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.98;font-size:clamp(34px,10.4vw,200px);margin-bottom:clamp(22px,5vh,56px)}
@media (min-width:900px){ .statement{font-size:min(9vw,17vh)} }
@media (min-width:900px) and (max-height:820px){ .statement{font-size:min(9vw,15vh)} }   /* ноутбук: «О нас» влезает без прокрутки */
.statement .fw{opacity:.12;display:inline-block;margin-right:.18em;transition:opacity .5s,color .5s,text-shadow .9s}
.statement .fw.lit{opacity:1}
.statement .fw.hot{color:var(--acc)}
.statement .fw.flash{text-shadow:0 0 .35em rgba(255,214,184,.85),0 0 1em rgba(252,76,1,.55);transition:opacity .15s,color .5s,text-shadow .12s}   /* слово загорается — короткая вспышка; в покое заголовок чёткий, без свечения */
/* «О нас» (Вадим, 22.10: «симпатичнее, с эффектами и элементами»): тёплый свет проходит по словам девиза и по пыли (home.js, ABOUT), под «вызов!» —
   оранжевый мазок; монограмма клуба прорисовывается линией и заливается градиентом, вокруг — дорожка-орбита с огоньком; неделя — стеклянные карточки
   со значками (секундомер, профиль горок, отсчёт 100′). Фон — слой во весь экран (.about-fx: за краем обрезано, прокрутки не добавляет); петли — только пока экран открыт (.fx-on) */
#s-about .in{position:relative;z-index:1}
.about-fx{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.about-fx>*,.ab-deep>*,.ab-stage>*{position:absolute}
.ab-sweep{left:0;top:-25%;width:52vw;height:150%;opacity:0;background:linear-gradient(90deg,transparent,rgba(252,76,1,.07) 30%,rgba(255,232,212,.08) 50%,rgba(252,76,1,.07) 70%,transparent)}
.ab-glow{--g:min(130vw,980px);left:84%;top:30%;width:var(--g);height:var(--g);margin:calc(var(--g)/-2) 0 0 calc(var(--g)/-2)}
.ab-glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(252,76,1,.23),rgba(252,76,1,.1) 36%,rgba(252,76,1,.035) 64%,transparent);
  animation:abBreath 7s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes abBreath{from{transform:scale(.92);opacity:.8}to{transform:scale(1.06);opacity:1}}
/* пятно света, бегущее по словам девиза (home.js: ABOUT) */
.ab-spot{--p:min(64vw,420px);left:0;top:0;width:var(--p);height:var(--p);margin:calc(var(--p)/-2) 0 0 calc(var(--p)/-2);border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,170,120,.34),rgba(252,76,1,.18) 40%,rgba(252,76,1,.05) 70%,transparent)}
/* монограмма и дорожка — вокруг одной точки (телефон — справа, за карточками недели); на телефоне под абзацем «кто мы» они приглушены маской
   (--lt/--lb — верх и низ абзаца, --ot — верх блока «уровень»; ставит home.js): линии не режут текст */
.ab-deep{inset:0}
@media (max-width:899px){
  .ab-deep{-webkit-mask:linear-gradient(180deg,#000 calc(var(--lt,9999px) - 36px),rgba(0,0,0,.14) calc(var(--lt,9999px) - 4px),rgba(0,0,0,.14) calc(var(--lb,9999px) + 4px),#000 calc(var(--lb,9999px) + 36px),#000 calc(var(--ot,9999px) - 36px),rgba(0,0,0,.14) calc(var(--ot,9999px) - 4px));
    mask:linear-gradient(180deg,#000 calc(var(--lt,9999px) - 36px),rgba(0,0,0,.14) calc(var(--lt,9999px) - 4px),rgba(0,0,0,.14) calc(var(--lb,9999px) + 4px),#000 calc(var(--lb,9999px) + 36px),#000 calc(var(--ot,9999px) - 36px),rgba(0,0,0,.14) calc(var(--ot,9999px) - 4px))}
}
.ab-stage{left:84%;top:66%;width:0;height:0}
.ab-mono{--h:80svh;left:0;top:0;height:var(--h);width:calc(var(--h)*88/150);margin:calc(var(--h)/-2) 0 0 calc(var(--h)*-44/150)}
.ab-rot{position:absolute;inset:0;animation:abSway 16s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes abSway{from{transform:rotate(-3deg) translateY(1.2%)}to{transform:rotate(2.5deg) translateY(-1.2%)}}
.ab-fill{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(165deg,rgba(252,76,1,.34) 0%,rgba(252,76,1,.14) 34%,rgba(236,230,218,.06) 72%,rgba(236,230,218,.025));
  -webkit-mask:url(/local/templates/dd2026/assets/css/../img/dd-mono.svg) center/100% 100% no-repeat;mask:url(/local/templates/dd2026/assets/css/../img/dd-mono.svg) center/100% 100% no-repeat}
.ab-fill i{position:absolute;left:-70%;top:-25%;width:55%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,226,200,.18),transparent);
  transform:translateX(0) rotate(16deg);animation:abSheen 8s ease-in-out 2.2s infinite;animation-play-state:paused}
@keyframes abSheen{0%{transform:translateX(0) rotate(16deg)}30%,100%{transform:translateX(420%) rotate(16deg)}}
.ab-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-line path{fill:none;stroke:url(#abLn);stroke-width:.34;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.45}
.ab-track{--w:150vw;left:0;top:0;width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2)}
.ab-track svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-track ellipse{fill:none;stroke:rgba(236,230,218,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.ab-track ellipse:first-child{stroke:rgba(252,76,1,.28)}
.ab-tilt{position:absolute;inset:0;transform:rotate(-14deg) scaleY(.32)}
.ab-comet{position:absolute;inset:.5%;border-radius:50%;animation:abOrbit 10s linear infinite;animation-play-state:paused;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(252,76,1,.5) 90%,#ffd9bf 99.4%,transparent 99.6%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px),#000 calc(100% - .5px),transparent 100%);
  mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px),#000 calc(100% - .5px),transparent 100%)}
@keyframes abOrbit{to{transform:rotate(360deg)}}
.ab-bk{left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:var(--o);
  background:radial-gradient(circle,rgba(252,76,1,.95),rgba(252,76,1,.3) 42%,transparent 70%);animation:abFloat var(--d) ease-in-out infinite alternate;animation-play-state:paused}
.ab-bk.c{background:radial-gradient(circle,rgba(255,240,226,.95),rgba(236,230,218,.25) 42%,transparent 70%)}
@keyframes abFloat{to{transform:translate3d(var(--tx),var(--ty),0)}}
/* метка экрана: размеченная «прямая» между «О нас» и номером, по ней раз в несколько секунд проносится огонёк (только сдвиг) */
.ab-lap{position:relative;flex:1;align-self:center;height:9px;margin:0 16px;overflow:hidden;
  background:linear-gradient(var(--faint),var(--faint)) 0 50%/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(236,230,218,.22) 0 1px,transparent 1px 25%) 0 0/100% 100%}
.ab-lap i{position:absolute;left:0;top:4px;width:100%;height:1px;background:linear-gradient(90deg,transparent 55%,rgba(252,76,1,.7) 92%,#fff4ea);transform:translateX(-100%);
  animation:abLapRun 4.2s cubic-bezier(.55,0,.25,1) .6s infinite;animation-play-state:paused}
.ab-lap i::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff4ea;box-shadow:0 0 8px 2px rgba(252,76,1,.8)}
@keyframes abLapRun{0%{transform:translateX(-100%)}55%,100%{transform:translateX(0)}}
/* мазок кистью под «вызов!» (svg вставляет home.js, прорисовывается при входе) */
.statement .fw-u{position:relative}
.ab-u{position:absolute;left:-3%;bottom:-.12em;width:104%;height:.2em;fill:var(--acc);overflow:visible;pointer-events:none}
#s-about.fx-on .ab-glow i,#s-about.fx-on .ab-rot,#s-about.fx-on .ab-fill i,#s-about.fx-on .ab-comet,#s-about.fx-on .ab-bk,#s-about.fx-on .ab-seal>svg,#s-about.fx-on .wk::after,
#s-about.fx-on .ab-lap i,#s-about.fx-on .wk-sw .hand,#s-about.fx-on .wk-hill .run{animation-play-state:running}
/* текст */
.about-grid{display:grid;gap:clamp(14px,2.4svh,24px);max-width:1100px}
#s-about .statement{font-size:clamp(30px,9vw,200px);margin-bottom:clamp(14px,2.6svh,40px)}   /* «О нас» — заголовок чуть меньше: под ним кто мы и неделя клуба */
.about-lead{font:600 clamp(16px,2.5svh,19px)/1.45 var(--body);color:var(--fg);text-wrap:pretty;text-shadow:0 1px 14px rgba(7,7,7,.7)}
.about-lead b{font-weight:800;color:var(--acc)}
/* неделя клуба — стеклянные карточки: Вт · Пт во всю ширину (оранжевая кромка), под ней Ср и Вс (кромка приглушённая) */
.about-week{min-width:0}
.wk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wk{--wk-bg:rgba(17,13,11,.56);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:7px;min-width:0;padding:11px 11px 12px 12px;border-radius:var(--r-m);
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 55%),var(--wk-bg);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(236,230,218,.14),0 18px 36px -24px rgba(0,0,0,.95)}
.wk.on{background:radial-gradient(130% 95% at 0 0,rgba(252,76,1,.13),transparent 62%),linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 55%),var(--wk-bg);box-shadow:inset 0 0 0 1px rgba(252,76,1,.35),0 18px 36px -24px rgba(0,0,0,.95)}
.wk.on2{background:radial-gradient(130% 95% at 0 0,rgba(252,76,1,.1),transparent 62%),linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 55%),var(--wk-bg);box-shadow:inset 0 0 0 1px rgba(252,76,1,.22),0 18px 36px -24px rgba(0,0,0,.95)}
/* телефон: размытие стекла поверх живой пыли (WebGL) пересчитывалось бы каждый кадр — вместо него плотная полупрозрачная заливка */
@media (hover:none){ .wk{--wk-bg:rgba(20,18,16,.72);-webkit-backdrop-filter:none;backdrop-filter:none} }
/* кромка — градиентная рамка 1 px (маской), свет падает сверху слева; без mask-composite остаётся простая рамка (inset-тень выше) */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .wk,.wk.on,.wk.on2{box-shadow:0 18px 36px -24px rgba(0,0,0,.95)}
  .wk::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg,rgba(236,230,218,.24),rgba(236,230,218,.06) 45%,rgba(236,230,218,.1));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .wk.on::before{background:linear-gradient(135deg,#fc4c01,rgba(252,76,1,.4) 32%,rgba(236,230,218,.07) 62%,rgba(252,76,1,.3))}
  .wk.on2::before{background:linear-gradient(135deg,rgba(252,76,1,.6),rgba(252,76,1,.14) 40%,rgba(236,230,218,.06) 70%,rgba(252,76,1,.14))}
}
/* мышь: карточка наклоняется к курсору, по стеклу — пятно света (--mx/--my, home.js; элемент есть только при мыши) */
.wk>i.wk-lt{position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,214,190,.13),transparent 70%)}
.wk:hover>i.wk-lt{opacity:1}
/* блик пробегает по стеклу */
.wk::after{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,236,220,.1),transparent);transform:translateX(-130%) skewX(-18deg);
  animation:wkSheen 7s ease-in-out infinite;animation-delay:calc(1.6s + var(--i)*.22s);animation-play-state:paused}
.wk-int::after{animation-name:wkSheenW}   /* широкая карточка: блик проходит до конца */
@keyframes wkSheen{0%{transform:translateX(-130%) skewX(-18deg)}28%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes wkSheenW{0%{transform:translateX(-130%) skewX(-18deg)}28%,100%{transform:translateX(560%) skewX(-18deg)}}
.wk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.wk-d{font:800 clamp(22px,6.6vw,28px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
.wk.on .wk-d{color:var(--acc)}
.wk-t{font:700 14px/1.25 var(--body);color:var(--fg);text-wrap:balance}
.wk-s{font:500 14px/1.3 var(--body);color:rgba(236,230,218,.8);margin-top:-3px;text-wrap:balance}
.wk-num{font:800 clamp(17px,4.8vw,20px)/1 var(--disp);letter-spacing:-.02em;color:rgba(252,76,1,.9);margin-top:3px;font-variant-numeric:tabular-nums}
.ab-draw{stroke-dasharray:1 1;stroke-dashoffset:0}   /* линия прорисовывается при входе (home.js; pathLength = 1) */
/* Вт · Пт: секундомер (стрелка делает круг рывком — как отрезок интервала) и погода — двумя строками со значками */
.wk-int{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.wk-sw{grid-column:2;grid-row:1/4;width:50px;height:50px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wk-sw .ln{stroke:rgba(236,230,218,.62);stroke-width:1.8}
.wk-sw .tk{stroke:rgba(236,230,218,.42);stroke-width:1.5}
.wk-sw .arc{stroke:var(--acc);stroke-width:2.8}
.wk-sw .hand{stroke:var(--fg);stroke-width:2.2;transform-box:view-box;transform-origin:24px 27px;animation:abSw 3.2s cubic-bezier(.7,0,.2,1) 1.4s infinite;animation-play-state:paused}
.wk-sw .hub{fill:var(--acc);stroke:none}
@keyframes abSw{0%{transform:rotate(0)}45%,100%{transform:rotate(360deg)}}
.wk-w{grid-column:1/-1;display:grid;gap:4px;margin-top:2px;font:500 14px/1.3 var(--body);color:rgba(236,230,218,.82)}
.wk-w>span{display:flex;align-items:center;gap:8px;min-width:0}
.wk-w svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk-w .sun{color:var(--acc)} .wk-w .snow{color:rgba(236,230,218,.9)}
/* Ср: профиль горок, по нему взбегает оранжевый штрих */
.wk-hill{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:44%;overflow:visible}
.wk-hill .ar{fill:url(#abHillG)}
.wk-hill .ln{fill:none;stroke:rgba(236,230,218,.62);stroke-width:1.4}
.wk-hill .run{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:12 188;stroke-dashoffset:-50;animation:abHill 3.6s cubic-bezier(.45,0,.55,1) 2s infinite;animation-play-state:paused}
@keyframes abHill{from{stroke-dashoffset:12}to{stroke-dashoffset:-100}}
/* уровень и акцент */
.about-outro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 18px;align-items:center}
.ab-lvl{grid-column:1/-1;display:grid;gap:12px}
.about-lvl{font:500 15px/1.45 var(--body);color:var(--dim)}
.lvl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;font:400 14px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.lvl>span:last-child{color:var(--acc)}
.lvl i{position:relative;height:2px;border-radius:2px;background:rgba(236,230,218,.14)}
.lvl s{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(236,230,218,.55),#fc4c01);transform-origin:0 50%}
.lvl b{position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fc4c01;box-shadow:0 0 0 4px rgba(252,76,1,.18),0 0 16px rgba(252,76,1,.85)}
.about-acc{position:relative;padding-left:15px;font:700 16px/1.42 var(--body);color:var(--fg);text-wrap:balance}   /* ровные строки: склейка «и не стесняемся» не оставляет «условиях» одно в строке */
.about-acc::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:3px;border-radius:2px;background:var(--acc);transform:scaleY(var(--bar,1));transform-origin:50% 0}
.about-acc em{font-style:normal;color:var(--acc)}
.about-acc .gray{color:rgba(236,230,218,.62)}
/* печать «0 ₽ · FREE» крутится */
.ab-seal{position:relative;width:96px;height:96px;flex:none;overflow:hidden;border-radius:50%}   /* повёрнутая рамка svg не добавляет ширины экрану */
.ab-seal>svg{display:none}   /* кольцо надписи (9 px) убрано: мелкого текста нет нигде (Вадим 25.10) — печать без текста */
.ab-seal text{font:500 9.4px var(--mono);fill:rgba(236,230,218,.85)}
.ab-seal b{position:absolute;inset:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;background:var(--acc);box-shadow:0 0 24px rgba(252,76,1,.45)}
.ab-seal b i{width:15px;aspect-ratio:88/150;background:#0a0a0a;-webkit-mask:url(/local/templates/dd2026/assets/css/../img/logo-dd-mono.png) center/contain no-repeat;mask:url(/local/templates/dd2026/assets/css/../img/logo-dd-mono.png) center/contain no-repeat}   /* в центре печати — монограмма клуба (знак «0 ₽» мелко читался как «OP») */
@media (max-width:359px){ .about-outro{grid-template-columns:minmax(0,1fr)} .ab-seal{justify-self:end;margin-top:-6px} }   /* 320: акцент — во всю ширину, печать под ним */
@media (min-width:900px){
  #s-about .statement{font-size:min(6.6vw,11vh)}
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"lead week" "outro week";gap:clamp(14px,2.6vh,26px) clamp(40px,5vw,80px);align-items:start}
  .about-lead{grid-area:lead;font-size:min(1.6vw,2.8vh)} .about-week{grid-area:week} .about-outro{grid-area:outro}
  .wk-grid{gap:12px}
  .wk{padding:16px 18px 18px;gap:10px;min-height:min(14vh,140px)}
  .wk-d{font-size:min(2.5vw,4.4vh)}
  .wk-sw{width:56px;height:56px}
  .wk-t{font-size:16px} .wk-s,.wk-w{font-size:14px} .about-lvl{font-size:16px} .about-acc{font-size:17px}
  .wk-num{font-size:min(1.8vw,3.2vh)}
  .ab-glow{left:76%;top:44%}
  .ab-stage{left:78%;top:62%}
  .ab-mono{--h:min(96vh,880px)}
  .ab-track{--w:min(80vw,1240px)}
}
@media (min-width:900px) and (max-height:760px){ .wk{padding:12px 16px 13px;gap:7px} .wk-int{row-gap:4px} .wk-w{gap:2px} .wk-grid{gap:10px} }   /* ноутбук 720 и 1024×700: неделя без прокрутки */
@media (prefers-reduced-motion:reduce){ .ab-glow i,.ab-rot,.ab-fill i,.ab-comet,.ab-bk,.ab-seal>svg,.wk::after,.ab-lap i,.wk-sw .hand,.wk-hill .run{animation:none!important} .ab-lap i{transform:none} }

/* 03 hbd */
#s-hbd{padding-left:0;padding-right:0}
.marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;pointer-events:none;opacity:.9}
.mrow{white-space:nowrap;font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(46px,13vh,170px);line-height:1.02;will-change:transform}
.mrow span{display:inline-block;padding-right:.4em}
.mrow:nth-child(odd){color:transparent;-webkit-text-stroke:1.2px rgba(236,230,218,.4)}
.mrow:nth-child(3){-webkit-text-stroke-color:rgba(252,76,1,.7)}
.mrow:nth-child(2){color:rgba(236,230,218,.08)}
.mrow:nth-child(4){color:rgba(252,76,1,.14)}
.mrow em{font-style:normal;display:inline-block;width:.42em;height:.42em;vertical-align:.14em;margin:0 .25em;border-radius:50%;background:currentColor;-webkit-text-stroke:0}
#s-hbd .in{position:relative;padding:0 var(--gut);display:grid;justify-items:center;text-align:center;gap:22px}
#s-hbd .sec-head{justify-self:stretch;margin-bottom:0}   /* метка со счётчиком «( 03 )», как у всех экранов (Р14) */
@media (min-width:900px){ #s-hbd .sec-head{padding-right:48px} }   /* счётчик не под точками (у этого экрана поля симметричны — центровка) */
.hbd-title{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;font-size:clamp(30px,8vw,110px)}
.bday-list{display:grid;gap:12px;width:100%;max-width:880px}
.bday{display:flex;align-items:center;gap:18px;padding:14px 20px 14px 14px;border:1px solid var(--faint);border-radius:999px;background:rgba(10,10,10,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left}
.bday .ph{position:relative;width:76px;height:76px;flex:none}
.bday .ph img{position:absolute;inset:10px;width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
/* вокруг аватарки — радужная обводка: крутится и пульсирует (Вадим 25.10: вместо кривой надписи по кругу) */
.bday .ph i{position:absolute;inset:3px;border-radius:50%;background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
  animation:spin 5s linear infinite,bdPulse 2.2s ease-in-out infinite}
@keyframes bdPulse{0%,100%{scale:1;opacity:.8}50%{scale:1.07;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.bday h3{font-family:var(--disp);font-weight:900;font-size:clamp(15px,2.4vw,24px);text-transform:uppercase;letter-spacing:-.02em;line-height:1.1}
.bday p{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--acc);margin-top:6px}
@media (min-width:900px){ .bday-list{grid-template-columns:1fr 1fr} }

/* 04 DD Long */
#s-ddlong .in{position:relative}
.long-type{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.82;font-size:clamp(70px,26vw,520px)}
@media (min-width:900px){ .long-type{font-size:min(23vw,32vh)} }
.long-type .l2{display:block;color:transparent;-webkit-text-stroke:2px var(--acc)}
.tape{position:absolute;left:-10%;right:-10%;top:47%;transform:rotate(-6deg);background:var(--acc);color:#0a0a0a;padding:10px 0;overflow:hidden;white-space:nowrap;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(14px,2.2vw,26px);letter-spacing:-.01em;box-shadow:0 10px 40px rgba(252,76,1,.35)}
.tape div{display:inline-block;animation:tape 18s linear infinite}
.tape span{padding:0 18px}
@keyframes tape{to{transform:translateX(-50%)}}
.long-meta{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;margin-top:clamp(26px,6vh,60px)}
.live{display:flex;align-items:center;gap:10px}
.live .when{white-space:nowrap}   /* «08:00 · м. Фрунзенская» переносится целиком */
/* ≥900: левый конец наклонной ленты опускается на ~5vw — подпись «Каждое воскресенье…» ниже него; ноутбук: подпись и кнопка не уходят под ленту и нижнюю полосу */
@media (min-width:900px){ .long-meta{margin-top:max(clamp(26px,6vh,60px),5vw)} }
@media (min-width:900px) and (max-height:920px){ .long-type{font-size:min(21vw,28vh)} }   /* 1440×900: кнопка с новым отступом не уходит за низ */
@media (min-width:900px) and (max-height:820px){ .long-type{font-size:min(20vw,24vh)} .tape-w{margin-top:clamp(6px,1.5vh,16px)} .long-meta{margin-top:max(clamp(14px,3vh,28px),5vw)} }
/* записанному: «Вы в деле · группа →» — длинная подпись группы переносится внутри кнопки ровно */
#s-ddlong .btn.is-in{text-wrap:balance;text-align:center;line-height:1.3;padding-block:8px}
/* первый экран, билет уже оплачен: «Вы зарегистрированы · №003 →» — на узком экране ровно в две строки */
#heroCta .btn.is-mine{text-wrap:balance;text-align:center;line-height:1.3;padding-block:8px}

/* 05 events */
#s-events{padding-left:0;padding-right:0}
#s-events .head{padding:0 var(--gut)}
.ev-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(18px,3.5vh,34px)}
.ev-ctl{display:flex;gap:10px}
.ev-wrap{overflow:hidden;cursor:grab;touch-action:pan-y}
.ev-wrap.drag{cursor:grabbing}
.ev-track{display:flex;gap:16px;padding:0 var(--gut);will-change:transform}
.evc{flex:none;width:min(74vw,330px);display:flex;flex-direction:column;gap:12px;user-select:none;-webkit-user-select:none}
.evc .pic{position:relative;height:min(50svh,440px);border-radius:var(--r-s);overflow:hidden;background:#111;border:1px solid var(--faint);transition:transform .6s var(--out),border-color .4s}
.evc .pic .bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(22px) brightness(.55) saturate(1.3);transform:scale(1.1)}
.evc .pic img{position:relative;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:transform .8s var(--out)}
.evc:hover .pic{border-color:rgba(252,76,1,.6)} .evc:hover .pic img{transform:scale(1.04)}
.evc .st{position:absolute;top:12px;left:12px;max-width:calc(100% - 64px);height:30px;padding:0 12px;border-radius:999px;font:400 14px/30px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(7,7,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}   /* плашка S (Р5) */
.evc .st:empty{display:none} .evc .st.reg{background:var(--acc);color:#0a0a0a} .evc .st.soon{color:var(--acc);border:1px solid var(--acc);line-height:28px}
.evc .idx{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:14px;color:rgba(236,230,218,.8)}
.evc h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;font-size:clamp(15px,1.6vw,20px)}
.evc .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.evc .photos{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.ev-bar{margin:22px var(--gut) 0;height:1px;background:var(--faint);position:relative}
/* низкий телефон: афиша ниже — название и место карточки видны над HUD; стрелки на телефоне не нужны (лента листается пальцем) и уезжали за край */
@media (max-width:899px){ .ev-ctl{display:none} }
@media (max-width:899px) and (max-height:820px){ .evc .pic{height:min(40svh,380px)} }
@media (min-width:900px){ .evc .pic{height:min(31vh,380px)} }   /* ноутбук: правило выше (29vh) перебивалось базовым 50svh — подписи карточек уходили под HUD */
.ev-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--acc);width:10%;transition:width .5s var(--out)}
/* партнёры — бегущая строка в цвете под мероприятиями (window.PARTNERS из инфоблока dd_partners, home.js); края растворяются */
.ev-partners{margin:clamp(26px,4.5vh,48px) 0 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ev-partners .run{display:flex;width:max-content;animation:evp var(--dur,40s) linear infinite}
.ev-partners:hover .run{animation-play-state:paused}
.ev-partners .grp{display:flex;align-items:center;flex:none}
.ev-partners a,.ev-partners span{display:flex;align-items:center;flex:none;padding:4px clamp(30px,4.5vw,64px);opacity:.92;transition:opacity .3s}
.ev-partners a:hover{opacity:1}
.ev-partners img{display:block;height:clamp(40px,6vh,60px);width:auto;max-width:280px;object-fit:contain}
@keyframes evp{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ev-partners .run{animation:none}}
@media (max-width:899px){ .ev-partners a,.ev-partners span{padding:4px 30px} .ev-partners img{height:40px} }
/* строка занимает всё место под каруселью до низа окна, логотипы — по центру этой пустоты (Вадим 08.11) */
#s-events.has-partners>.in{flex:1 0 auto;display:flex;flex-direction:column}
#s-events.has-partners .ev-partners{flex:1 0 auto;display:flex;align-items:center;margin:clamp(14px,2.4vh,36px) 0 calc(-1 * var(--c-bot))}
/* строка партнёров видна (home.js ставит #s-events.has-partners) — картинка карточки ниже на высоту строки: экран не длиннее окна (иначе «↓ ещё») */
#s-events.has-partners .evc .pic{height:min(calc(50svh - 66px),440px)}
@media (max-width:899px) and (max-height:820px){ #s-events.has-partners .evc .pic{height:min(calc(40svh - 62px),320px)} }
@media (min-width:900px){ #s-events.has-partners .evc .pic{height:min(calc(31vh - 96px),290px)} }

/* 06 gallery */
#s-gallery{padding:0}
#gImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
/* под меткой «Галерея» (на 88/106 px) затемнение ≥ .6 (Р9): на светлом небе метка не читалась */
#s-gallery .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.6) calc(var(--c-top) + 24px),transparent 34%,transparent 55%,rgba(0,0,0,.8))}
.g-ui{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--c-bot);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
@media (max-width:899px){ .g-ui{flex-direction:column;align-items:stretch} .g-ctl{justify-content:space-between} .g-ctl .g-num{margin-right:auto} }
.g-title{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(30px,9vw,150px)}   /* 10vw: «Воскресный» заходил за поле */
@media (min-width:900px){ .g-title{font-size:min(9vw,15vh)} }
.g-cap{margin-top:12px}
.g-ctl{display:flex;align-items:center;gap:10px}
.g-num{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3vw,34px);letter-spacing:-.03em;margin-right:8px;white-space:nowrap}
.g-num small{font-family:var(--mono);font-size:14px;color:var(--dim);font-weight:400;letter-spacing:.04em}
.g-prog{position:absolute;left:0;right:0;top:0;height:2px;display:flex;gap:4px;padding:calc(var(--top) - 18px) var(--gut) 0}
.g-prog i{flex:1;height:2px;background:rgba(236,230,218,.2);position:relative;overflow:hidden}
.g-prog i b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.g-head{position:absolute;top:var(--c-top);left:var(--gut);right:var(--gut);display:flex;justify-content:space-between}   /* метка — на 88/106, как у всех экранов */

/* 07 subscribe */
.tg-list{display:grid;gap:12px;margin-top:clamp(22px,5vh,50px)}
.tg{display:flex;justify-content:space-between;align-items:center;padding:clamp(18px,3vh,26px) 26px;border-radius:999px;border:1px solid rgba(236,230,218,.25);
  font-family:var(--disp);font-weight:900;font-size:clamp(17px,3vw,32px);letter-spacing:-.02em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s;background:rgba(10,10,10,.4)}
.tg::before{content:"";position:absolute;inset:0;background:var(--acc);z-index:-1;clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path .7s var(--ease)}
.tg:hover{color:#0a0a0a;border-color:var(--acc)} .tg:hover::before{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
.tg small{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.04em}
@media (min-width:900px){ .tg-list{grid-template-columns:repeat(3,1fr)} .tg{flex-direction:column;align-items:flex-start;gap:min(7vh,70px);border-radius:var(--r-m);padding:26px 30px} }
/* ноутбук (≤920 по высоте): заголовки «Подписки» и «Контактов» на строку короче — карточки Telegram и часы работы влезают без прокрутки
   (колонка уже на 48 px из-за точек, склейки типографа «с нами», «на нас» делают строки длиннее) */
@media (min-width:900px) and (max-height:920px){ #s-subscribe .h-l{font-size:min(4.6vw,7.6vh)} #s-contacts .h-l{font-size:min(4.2vw,7.4vh)} .tg{gap:min(4.5vh,44px)} }

/* 08 love */
#s-love .in{display:grid;gap:clamp(16px,3.5vh,34px);max-width:1200px}
.love-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.love-head .h-l .acc{color:var(--acc)}
.quote{position:relative;min-height:clamp(200px,38vh,420px);display:flex;flex-direction:column;justify-content:center}
.quote .qm{font-family:var(--disp);font-weight:900;color:var(--acc);font-size:clamp(60px,10vw,120px);line-height:.6;height:.42em}
#qText{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.22;font-size:var(--qs,28px)}
#qText .qw{display:inline-block;margin-right:.26em}
.q-more{align-self:flex-start;margin-top:14px;font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--acc);padding-bottom:3px}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:14px}
.who img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.who b{display:block;font-family:var(--disp);font-size:15px;text-transform:uppercase}
.who span{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
.q-ctl{display:flex;align-items:center;gap:10px}
.q-ctl .cnt{font-family:var(--mono);font-size:14px;letter-spacing:.04em;margin-right:8px}
.q-bar{height:1px;background:var(--faint);position:relative}
.q-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--acc);width:0}

/* 09 people */
.vac{border-top:1px solid var(--faint);margin:clamp(16px,3.5vh,34px) 0}
.vac a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(12px,2.2vh,22px) 0;border-bottom:1px solid var(--faint);
  font-family:var(--disp);font-weight:700;font-size:clamp(16px,2.6vw,34px);text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;transition:padding .5s var(--out),color .3s}
.vac a small{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.vac a:hover{color:var(--acc);padding-left:14px}
.join{display:grid;gap:14px;align-items:center}
.join p{color:rgba(236,230,218,.8);max-width:720px}
.join a.mail{color:var(--acc);font-family:var(--mono);border-bottom:1px solid var(--acc)}
@media (min-width:900px){ .join{grid-template-columns:1fr auto;gap:40px} }
@media (min-width:900px) and (max-height:920px){ .vac a{padding:min(1.6vh,14px) 0;font-size:min(2.3vw,3.9vh)} .vac{margin:1.8vh 0} }   /* ноутбук: «Написать нам» — над нижней полосой (строки чуть плотнее) */

/* 10 volunteer */
#s-volunteer{background:var(--acc);color:#0a0a0a}
#s-volunteer .label{color:rgba(0,0,0,.6)} #s-volunteer .label::before{background:#0a0a0a} #s-volunteer .label b{color:#0a0a0a}
.vol-title{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.88;font-size:clamp(30px,9.6vw,260px);margin:clamp(10px,2vh,20px) 0 clamp(18px,4vh,40px)}
@media (min-width:900px){ .vol-title{font-size:min(10.4vw,24vh)} }
.vol-grid{display:grid;gap:18px}
.vol-grid p{font-size:clamp(15px,1.7vw,21px);line-height:1.45;max-width:640px}
.vol-grid b{font-family:var(--disp);text-transform:uppercase;font-size:clamp(14px,1.6vw,20px);line-height:1.3;letter-spacing:-.01em}
@media (min-width:900px){ .vol-grid{grid-template-columns:1.2fr 1fr auto;align-items:end;gap:50px} }

/* 11 contacts */
.big-link{display:block;font-family:var(--disp);font-weight:900;letter-spacing:-.04em;line-height:1;font-size:clamp(22px,6.9vw,110px);white-space:nowrap;position:relative;width:max-content;max-width:100%}
@media (min-width:900px){ .big-link{font-size:min(6vw,9vh)} }
.big-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.big-link:hover::after{transform:scaleX(1);transform-origin:left}
.big-link.sm{font-size:clamp(20px,5.4vw,64px);margin-top:12px;color:var(--acc)}
.ct-grid{display:grid;margin-top:clamp(20px,4.5vh,50px);border-top:1px solid var(--faint)}
.ct{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;padding:clamp(10px,1.9vh,18px) 0;border-bottom:1px solid var(--faint);flex-wrap:wrap}
.ct .k{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.ct .v{font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.8vw,20px);text-transform:uppercase}
.ct .v a{color:var(--acc)}
.ct-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;margin-top:clamp(16px,3.5vh,34px)}
.ct-foot .hours{display:grid;gap:6px}
.union{color:var(--dim);max-width:420px} .union a{color:var(--fg);border-bottom:1px solid var(--acc)}

/* 12 footer */
.f-big{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.85;font-size:clamp(36px,11.2vw,250px);margin-bottom:clamp(24px,5vh,56px)}
@media (min-width:900px){ .f-big{font-size:min(11vw,22vh)} }
.f-grid{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.f-grid h4{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--dim);font-weight:400;margin-bottom:10px}
.f-grid a{display:block;margin-bottom:6px} .f-grid a:hover{color:var(--acc)}
.soc-icons{display:flex;gap:10px}
.soc-icons a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,230,218,.3);display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:700;transition:background .3s,color .3s,border-color .3s;margin:0}
.soc-icons a:hover{background:var(--acc);border-color:var(--acc);color:#0a0a0a}
.f-legal{margin-top:clamp(20px,4vh,44px);display:grid;gap:14px;color:var(--dim);font-size:14px}
.f-legal .links{display:flex;flex-wrap:wrap;gap:8px 22px}
.f-legal .links a{color:var(--fg);border-bottom:1px solid var(--faint)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--faint)}
@media (min-width:900px){ .f-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:900px){ .f-nav{display:grid;grid-template-columns:auto auto;column-gap:28px;align-content:start;justify-content:start} .f-nav h4{grid-column:1/-1} }   /* семь ссылок — в две колонки */
/* подвал главной на телефоне: навигация во всю ширину и в две колонки, как у DD Long (в одну колонку экран был на 4 строки длиннее);
   телефон не переносится — его колонка берёт остаток, почта — по ширине (на 320 px не шире окна) */
@media (max-width:899px){ #s-footer .f-grid{grid-template-columns:minmax(0,1fr) auto} #s-footer .f-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:24px} #s-footer .f-nav h4{grid-column:1/-1} }
/* юридические ссылки подвала главной: зона нажатия 44 px без сдвига строки (Р12); строки ссылок (телефон) — через 24 px, зоны не перекрываются;
   на ≥900 три ссылки — в одну строку (ширину 80ch держит только абзац) */
#s-footer .f-legal .links a{position:relative} #s-footer .f-legal .links a::after{content:"";position:absolute;inset:-12px -6px}
#s-footer .f-legal .links{row-gap:24px} #s-footer .f-legal{max-width:none} #s-footer .f-legal p{max-width:80ch}

/* modal */
#modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
#modal .ov{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
#modal .box{position:relative;width:100%;max-width:720px;max-height:86svh;overflow:auto;background:#111;border:1px solid var(--faint);border-radius:var(--r-m) var(--r-m) 0 0;
  padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .7s var(--ease);overscroll-behavior:contain}
#modal.on{pointer-events:auto} #modal.on .ov{opacity:1} #modal.on .box{transform:none}
#modal .x{position:sticky;top:0;float:right;width:44px;height:44px;border-radius:50%;border:1px solid var(--faint);background:#111;font-size:18px}
#mBody .who{margin-bottom:20px} #mBody p{font-size:17px;line-height:1.6}
#mBody .cred a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--faint);font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:15px}
#mBody .cred a span{font-family:var(--mono);font-size:14px;color:var(--acc);letter-spacing:.04em;font-weight:400}
@media (min-width:900px){ #modal{align-items:center} #modal .box{border-radius:var(--r-m);padding:40px;transform:translateY(40px) scale(.96);opacity:0;transition:transform .6s var(--out),opacity .4s} #modal.on .box{opacity:1;transform:none} }

/* cursor */
#cur,#curDot{position:fixed;left:0;top:0;z-index:95;pointer-events:none;border-radius:50%;display:none}
#cur{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(236,230,218,.6);transition:width .4s var(--out),height .4s var(--out),margin .4s var(--out),background .3s,border-color .3s;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:#0a0a0a;text-transform:uppercase}
#curDot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--acc)}
#cur.big{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--fg);border-color:var(--fg)}
@media (hover:hover) and (pointer:fine){ #cur{display:flex} #curDot{display:block} }
@media (max-width: 899px) { .hdr-nm { display: none; } }
@media (min-width:900px) and (max-width:1099px){ .nav{gap:18px;letter-spacing:.04em} .hdr-nm{display:none} }   /* пять пунктов шапки (Р15) и «Кабинет» не слипаются на 900–1100 */

/* ===== читаемость на iPhone (поэкранные страницы: главная, DD Long) ===== */
/* шапка/HUD без difference: на фото и оранжевом экране цвет «плыл» и не читался */
body:not(.dd-inner) #hdr, body:not(.dd-inner) #hud, body:not(.dd-inner) #hudR { mix-blend-mode: normal; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
body[data-scr="volunteer"]:not(.menu-open) #hdr, body[data-scr="volunteer"] #hud, body[data-scr="volunteer"] #hudR { color: #0a0a0a; text-shadow: none; }
body[data-scr="volunteer"]:not(.menu-open) .logo i,
body[data-scr="volunteer"]:not(.menu-open) #burger span, body[data-scr="volunteer"] #hudLine i { background: #0a0a0a; }
body[data-scr="volunteer"]:not(.menu-open) #burger { border-color: rgba(10,10,10,.45); }
body[data-scr="volunteer"] #hudNum { color: #0a0a0a; } body[data-scr="volunteer"] #hudLine { background: rgba(10,10,10,.25); }
/* длинный экран листается внутри — контент растворяется у шапки и у HUD, а не наезжает на них */
/* длинный экран листается внутри: вместо mask-image (в Safari ломала отрисовку анимаций внутри экрана) — градиенты у шапки и у HUD */
body:not(.dd-inner) #hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #070707 62%, rgba(7,7,7,0)); opacity: 0; transition: opacity .4s; }
body:not(.dd-inner):has(.scr.on.scrolls:not(#s-volunteer)) #hdr::before { opacity: 1; }
body:not(.dd-inner)::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bot) + 26px); z-index: 30; pointer-events: none;
  background: linear-gradient(0deg, #070707 55%, rgba(7,7,7,0)); opacity: 0; transition: opacity .4s; }
body:not(.dd-inner):has(.scr.on.scrolls:not(#s-volunteer))::after { opacity: 1; }
@media (max-width: 899px) {
  .btn { letter-spacing:.04em; min-height: 52px; padding: 0 22px; }   /* Р12: высота 52, текст в две строки тоже влезает */
}

/* ===== мгновенный отклик на касание (телефон) ===== */
@media (hover: none) {
  a, button, .btn, .chip, [role=button], label.check, .radios label { transition: transform .12s ease-out, opacity .12s ease-out, background-color .2s, color .2s, border-color .2s; }
  .btn:active, .chip:active, button:active, .cab-nav a:active, .evx:active, .evc:active, .ev-ddlong:active, .card a:active, a.card:active,
  #menu li a:active, .nav a:active, .hright > a:active, .ptabs button:active, .pt-empty .btn:active, .authors a:active, .ticket .acts > *:active {
    transform: scale(.96); opacity: .78;
  }
  #menu li a:active { color: var(--acc); }
}
/* кнопка ждёт ответа сервера: текст приглушён, крутится индикатор */
.is-busy { position: relative; pointer-events: none; }
.is-busy > * , .is-busy { color: transparent !important; }
.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(236,230,218,.9) rgba(236,230,218,.9) rgba(236,230,218,.9) transparent; animation: dd-spin .7s linear infinite; z-index: 2; }
.btn.solid.is-busy::after, .chip.on.is-busy::after { border-color: #0a0a0a #0a0a0a #0a0a0a transparent; }
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* карточка мероприятия без постера: пыльный градиент + буквы */
.evc .pic.noimg{background:radial-gradient(circle at 30% 22%,rgba(252,76,1,.42),transparent 62%),radial-gradient(circle at 80% 90%,rgba(236,230,218,.08),transparent 50%),#0d0d0d}
.evc .pic .ph-t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:900;font-size:clamp(90px,30vw,180px);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(236,230,218,.4);text-transform:uppercase}
/* админ-панель Битрикса на телефоне занимает треть экрана — править удобнее с компьютера */
@media (max-width:899px){ #bx-panel-wrap{display:none} }

/* ===== Safari (iPhone): лента DD Long ===== */
/* поворот — отдельным свойством rotate: анимация появления (transform) его больше не сбрасывает */
/* широкая бегущая строка: отдельный слой, иначе Safari рисует только кусок («.ONG») */
.tape div, .ny-tape div { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
@keyframes tape { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* шторка перехода: вне экрана — невидима (Safari красил панели в оранжевый, «подсматривая» её у края) */
#curtain { visibility: hidden; }
html.dd-leaving #curtain, html.dd-arrive #curtain, html.dd-arrived #curtain { visibility: visible; }

/* ===== крупнее: время, названия разделов, темп (по просьбе — было мелко) ===== */
.mono { font-size:14px; }
.sec-head, .sec-head .label, .label { font-size:14px; }
#hud, #hudR { font-size:14px; }
.pace-row .lbl { font-size:14px; }
.ptabs button { font-size:14px; padding: 10px 15px; }
.pc-sub { font-size:14px; }
.pacer-list .bday .pace small { font-size:14px; }
.pacer-list .bday .pace em { font-size:14px; }
.pt span { font-size:14px; }

.sec-head { gap: 12px; } .sec-head > .muted { white-space: nowrap; flex: none; }
@media (max-width: 899px) { .sec-head, .sec-head .label { font-size:14px; } }

/* лента DD Long: позицию и появление берёт обёртка .tape-w, поворот — у самой ленты (анимация его не трогает) */
/* лента — под надписью DD LONG (раньше перечёркивала LONG и сливалась с ним) */
.tape-w { position: relative; margin: clamp(14px, 3vh, 26px) -10% 0; z-index: 2; }
.tape-w .tape { position: relative; left: 0; right: 0; top: 0; transform: rotate(-6deg); }

/* ===== читаемость: контурные надписи → сплошные ===== */
.outline { color: var(--acc); -webkit-text-stroke: 0; }
.long-type .l2 { color: var(--acc); -webkit-text-stroke: 0; }
.card.acc .outline, .ny-ticket .outline { color: #fff3e6; }

/* ленты двигает скрипт — CSS-анимацию выключаем */
.tape div, .ny-tape div { animation: none !important; }

/* ===== по аудиту (iPhone) ===== */
@media (max-width: 899px) {
  /* нижняя строка: название экрана не налезает на счётчик — часы прячем, название обрезаем */
  #hudR > span:last-child { display: none; }
  #hud { max-width: calc(100% - 2 * var(--gut) - 92px); }
  #hudName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  #arrowDown { display: none; }                                  /* черта «листайте» попадала в стык строки */
}
/* зоны нажатия ≥ 44 px без сдвига вёрстки */
.hright > a { padding: 12px 8px; margin: -12px -8px; }
.logo { padding-block: 9px; margin-block: -9px; }
.f-bottom a, .hero-top .back { position: relative; } .f-bottom a::after, .hero-top .back::after { content: ""; position: absolute; inset: -12px -8px; }
/* «Читать полностью»: абзацы отзыва сохраняются */
#mBody p { white-space: pre-line; }

/* ===== по проверке 20.10 (webapp-testing + frontend-design) ===== */
/* закрытое меню: не ловит Tab и не читается диктором (скрывается после анимации закрытия) */
#menu{visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s linear .9s}
body.menu-open #menu{visibility:visible;transition:clip-path .9s var(--ease),visibility 0s}
/* «МЕРОПРИЯТИЯ» в меню не срезается на 390 */
#menu li a{font-size:clamp(26px,8vw,84px)}
/* видимый фокус клавиатуры; на оранжевом и светлом — тёмный */
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
#s-volunteer :focus-visible,.btn.solid:focus-visible,.chip.on:focus-visible{outline-color:#0a0a0a}
/* «Волонтёрам» (оранжевый экран): точки навигации тёмные, как шапка (difference на оранжевом давал синие) */
body[data-scr="volunteer"] #dots{mix-blend-mode:normal;color:#0a0a0a}
#dots button i{border-color:currentColor} #dots button.on i{background:currentColor}
/* огромный заголовок галереи не выталкивает стрелки за правый край */
.g-ui>:first-child{min-width:0}
/* ссылки подвала: зона нажатия выше (было ~23 px) */
.f-grid a{padding:11px 0;margin-bottom:0}   /* зона нажатия 44 px */
.f-legal{max-width:80ch}
/* меньше движения: зерно, пульс и кольца стоят */
@media (prefers-reduced-motion:reduce){ #grain,.dot,.bday .ph i{animation:none!important} }
/* крупные заголовки читаемее (Вадим 20.10: «глаза лопаются» на компьютере): Unbounded вариативный — 800 вместо 900, разрядка ближе к нулю,
   межстрочный — чтобы хвост «Д» не налезал на кратку «Й» следующей строки. Логотип, меню, «DD LONG» — графика, не трогаем */
.h-xl,.statement,.hbd-title,.g-title,.vol-title{font-weight:800;letter-spacing:-.02em;line-height:1.04}
.h-l{font-weight:800;letter-spacing:-.015em;line-height:1.1}

/* ===== по ревью 21.10 (два юзабилити-тестировщика + арт-директор) ===== */
/* переносы (Р7): заголовки — ровными строками, абзацы — без одинокого слова в конце; неразрывные пробелы ставит типограф */
h1,h2,h3,h4,.h-xl,.h-l,.page-title,.ev-title,.sec-title,.card h3,.ach h4,.lead,.crumbs{text-wrap:balance}
p,li,dd,.prose{text-wrap:pretty}
/* курсор-кольцо — только после первого движения мыши (Р13): при работе с клавиатуры не висит посреди экрана */
#cur{opacity:0;transition:width .4s var(--out),height .4s var(--out),margin .4s var(--out),background .3s,border-color .3s,opacity .3s}
#curDot{opacity:0;transition:opacity .3s}
html.cur-on #cur,html.cur-on #curDot{opacity:1}
/* «К содержимому» — первая ссылка для клавиатуры, видна только в фокусе */
.skip{position:absolute;left:var(--gut);top:calc(10px + env(safe-area-inset-top));z-index:3;padding:12px 16px;border-radius:999px;background:var(--fg);color:#0a0a0a;transform:translateY(-220%);transition:transform .3s}
.skip:focus{transform:none}
/* меню: шесть пунктов (Р15) влезают и на iPhone SE, и на ноутбуке 720; зона нажатия ≥ 44 px */
#menu li a{padding-block:6px;font-size:clamp(26px,min(8vw,7.2svh),84px)}
/* @-ники в «Контактах», «Читать полностью», «Фото · N авторов»: зона нажатия 44 px без сдвига строки (Р12) */
.ct .v a,.q-more,.evc .photos{position:relative} .ct .v a::after,.q-more::after,.evc .photos::after{content:"";position:absolute;inset:-12px -6px}
@media (max-width:899px){
  /* отзывы: связный текст — Manrope обычным регистром (капс Unbounded 13 px читался тяжело) */
  #qText{font-family:var(--body);font-weight:600;letter-spacing:0;line-height:1.45;font-size:clamp(17px,4.6vw,20px)}
  .quote{min-height:clamp(170px,30svh,300px);justify-content:flex-start}
}
@media (max-width:899px) and (max-height:640px){ .love-head p{display:none} }   /* SE и mini: автор и стрелки отзыва — над нижней полосой */

/* Вадим 05.11: «убери везде как на DD Long» — без нейросетевых клише: счётчиков экранов и слайдов («02 / 08», «( 02 )», «01 / 20»),
   часов MSK, «Scroll», моноширинных капс-меток с точкой; метка раздела — обычной строкой */
#hud,#hudR,#arrowDown,.g-num,#qCnt{display:none!important}
.label::before{display:none}
.sec-head.mono,.g-head.mono{font-family:var(--body);text-transform:none;letter-spacing:0}
.sec-head .label,.g-head .label{font-size:16px} .sec-head .label b,.g-head .label b{font-weight:600}

/* End */


/* Start:/local/templates/dd2026/assets/css/ddlong.css?179398303428057*/
/* ================= DD LONG PAGE ================= */
#glass{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:opacity 1s}
#glass.off{opacity:0}
.vignette{z-index:2}
.back{display:inline-flex;align-items:center;gap:10px}
.back i{font-style:normal;display:inline-block;transition:transform .4s var(--out)} .back:hover i{transform:translateX(-4px)}

/* hero: «← Все мероприятия», плашки и DD LONG — сверху под шапкой, слоган и кнопка — у нижней безопасной зоны;
   не влезает — экран растёт вниз и листается (не уходит под шапку) */
#s-hero{justify-content:flex-start}
#s-hero .hero-top{position:relative;top:auto;left:auto;right:auto;z-index:2;gap:16px;margin-bottom:clamp(10px,2.5svh,24px)}
#s-hero>.in{margin:0;flex:1 0 auto;display:flex;flex-direction:column;position:relative;z-index:1}   /* текст всегда над .shade */
#s-hero .hero-row2{margin-top:auto;padding-top:clamp(16px,4svh,40px)}
#s-hero .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,7,.82) 0,rgba(7,7,7,.4) 34%,transparent 50%,transparent 62%,rgba(7,7,7,.9))}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
/* плашка S: одна строка — дата · время, метро */
.hero-meta .tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font:400 14px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(236,230,218,.25);background:rgba(7,7,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-meta .tag.acc{border-color:var(--acc);color:var(--acc)}
.ddl-title{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.84;font-size:clamp(70px,24vw,420px);margin-bottom:clamp(16px,3vh,30px)}
@media (max-width:899px){ .ddl-title{font-size:min(24vw,15svh)} }
@media (min-width:900px){ .ddl-title{font-size:min(19vw,34vh)} }
@media (min-width:900px) and (max-height:820px){ .ddl-title{font-size:min(19vw,26vh)} }
.ddl-title .o{color:var(--acc);-webkit-text-stroke:0}
.hero-row2{display:grid;gap:20px;align-items:end}
.hero-row2 p{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.7vw,22px);line-height:1.3;max-width:620px}
@media (max-width:899px) and (max-height:600px){ #s-hero .hero-row2 p{display:none} }   /* iPhone SE: без слогана — дата, DD LONG и кнопка на одном экране */
@media (max-width:420px){ #s-hero .hero-top span:last-child{display:none} }        /* «Каждое воскресенье» слипалась с «← Все мероприятия» */
.wipe-hint{display:none}
@media (min-width:900px){ .hero-row2{grid-template-columns:1fr auto auto;gap:44px} .wipe-hint{display:block;text-align:right} }

/* program */
.prog-grid{display:grid;gap:clamp(20px,4vh,44px)}
.prog-date{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;font-size:clamp(30px,7.6vw,110px)}
@media (min-width:900px){ .prog-date{font-size:min(6.6vw,12vh)} .prog-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:70px} }   /* колонки не распирает длинное слово — его ужимает fit (ddlong.js) */
.place{display:grid;gap:6px;margin-top:clamp(14px,3vh,26px)}
.place b{font-family:var(--disp);text-transform:uppercase;font-size:clamp(14px,1.6vw,20px);letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.place .addr{font:500 15px/1.4 var(--body);letter-spacing:0;text-transform:none;color:rgba(236,230,218,.8)}   /* адрес — строкой Manrope, не моно-капсом */
.place a{margin-top:12px;align-self:start;justify-self:start}
.timeline{position:relative;display:grid;gap:clamp(14px,3vh,30px);padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--faint)}
.timeline .run{position:absolute;left:3px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-30px;top:14px;width:13px;height:13px;border-radius:50%;border:1px solid var(--fg);background:var(--bg)}
.tl-time{font-family:var(--disp);font-weight:900;letter-spacing:-.04em;line-height:1;font-size:clamp(40px,9vw,120px)}
@media (min-width:900px){ .tl-time{font-size:min(7vw,12vh)} }
.tl-item.hot .tl-time{color:var(--acc)}
.tl-item p{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.6vw,20px);margin-top:6px}

/* groups */
.groups{display:grid;gap:clamp(18px,3.5vh,36px)}
@media (min-width:900px){ .groups{grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} .g-lead{display:none} }
.g-cards{display:grid;gap:12px}
.g-lead{font:500 15px/1.45 var(--body);color:rgba(236,230,218,.86)}
/* телефон: лид → полосы темпа → «Здоровье» (карточка «N групп» не нужна — её смысл в лиде) */
@media (max-width:899px){ .groups{display:flex;flex-direction:column} .g-cards{display:contents} .g-card.g-count{display:none} .g-lead{order:0} .g-pace{order:1} .g-card.acc{order:2} }
.g-card{padding:clamp(18px,3vh,28px);border-radius:16px;border:1px solid var(--faint);background:rgba(12,12,12,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;gap:10px}
.g-card b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.4vw,56px);letter-spacing:-.04em;line-height:1}
.g-card p{color:rgba(236,230,218,.82);font-size:clamp(14px,1.3vw,17px)}
.g-card.acc{background:var(--acc);border-color:var(--acc);color:#0a0a0a} .g-card.acc p{color:rgba(0,0,0,.75)}
.pace{display:grid;gap:clamp(6px,1.2vh,10px)}
.pace-row{display:grid;grid-template-columns:1fr;gap:6px}
.pace-row .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.pace-row .bar{height:clamp(8px,1.4vh,12px);border-radius:99px;background:rgba(236,230,218,.08);overflow:hidden}
.pace-row .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--acc),#ffb38f);transform-origin:left;transform:scaleX(0)}
.pace-row.walk .bar i{background:repeating-linear-gradient(90deg,var(--fg) 0 10px,transparent 10px 18px)}

/* about */
.ddl-statement{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.98;font-size:clamp(28px,7.4vw,130px);margin-bottom:clamp(18px,4vh,44px)}
@media (min-width:900px){ .ddl-statement{font-size:min(5.4vw,9vh)} }   /* экран «О нас» на ноутбуке целиком, без прокрутки */
.ddl-statement .num{color:var(--acc)}
.ddl-about{display:grid;gap:16px}
.ddl-about p{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.6vw,20px);line-height:1.35}
@media (max-width:899px){ .ddl-about p:not(.acc){font:600 16px/1.5 var(--body);text-transform:none;letter-spacing:0} }   /* длинный текст на телефоне — Manrope, не капс */
@media (min-width:900px){ .ddl-about{grid-template-columns:1fr 1fr;gap:60px} }
.counter{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.counter b{font-family:var(--disp);font-weight:900;letter-spacing:-.06em;line-height:.8;font-size:clamp(70px,18vw,260px);color:var(--acc);-webkit-text-stroke:0}
@media (min-width:900px){ .counter b{font-size:min(13vw,20vh)} .ddl-about p{font-size:min(1.6vw,2.3vh)} }
@media (min-width:900px) and (max-height:820px){ .counter b{font-size:min(12vw,17vh)} .ddl-statement{margin-bottom:2.2vh} .ddl-about p{font-size:min(1.5vw,2.15vh)} }

/* pacers */
@media (max-width:420px){ #s-pacers .sec-head .label{letter-spacing:.04em} }   /* «Кто бежит в это воскресенье» — одной строкой на SE */
.pc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 30px;flex-wrap:wrap;margin-bottom:clamp(16px,3vh,30px)}
/* вкладки групп — лента (Р8): на телефоне во всю ширину экрана, у краёв затухание, если шире окна (.is-scroll ставит ddlong.js) */
.ptabs{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px;scroll-padding-inline:var(--gut)}
@media (max-width:899px){ .ptabs{flex:0 0 calc(100% + 2*var(--gut));max-width:none;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)} }
.ptabs.is-scroll{--fl:var(--gut);--fr:36px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.ptabs.is-scroll.at-start{--fl:0px} .ptabs.is-scroll.at-end{--fr:0px}   /* у упора ленты край не гасим (на компьютере лента без полей — гасла первая вкладка) */
.ptabs::-webkit-scrollbar{display:none}
/* плашка M */
.ptabs button{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:400 14px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;border:1px solid rgba(236,230,218,.22);transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.ptabs button.on{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}
.ptabs button i{font-style:normal;color:var(--acc);margin-left:6px}
.ptabs button.on i{color:var(--acc)}
.pc-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-bottom:12px}.pc-sub span{white-space:nowrap}
.pacer-list{max-width:none;margin-bottom:clamp(16px,3vh,28px)}
.pacer-list .bday .ph text{fill:var(--acc)}
.pacer-list .bday p{color:var(--dim)}
.pacer-list .bday{border-radius:28px;align-items:center}
.pacer-list .bday .pace{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:10px}
.pacer-list .bday .pace small{width:100%;font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pacer-list .bday .pace b{font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;color:var(--acc);line-height:1.15}
.pacer-list .bday .pace em{font-style:normal;font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
.pacer-list .bday p{font-family:var(--body);font-size:14px;letter-spacing:0;margin-top:4px}
.pt-title{margin-bottom:10px}
.pt-list{display:flex;flex-wrap:wrap;gap:8px}
.pt{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--faint);background:rgba(12,12,12,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pt img{width:32px;height:32px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.pt b{font-family:var(--disp);font-size:14px;text-transform:uppercase;letter-spacing:-.01em;display:block;line-height:1.1}
.pt span{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
.pt-empty{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;border:1px dashed rgba(236,230,218,.25);border-radius:16px;width:100%}
.pt-empty p{font:500 15px/1.45 var(--body);flex:1;min-width:220px}   /* пустое состояние — Manrope, не капс */
.pt-empty.pc-none{padding:14px 16px;border-style:solid;border-color:var(--faint);background:rgba(12,12,12,.6)}   /* «Пейсеров объявим…» — спокойнее, чем приглашение записаться */
.pt-empty.pc-none p{min-width:0;color:rgba(236,230,218,.8)}
.pt-empty .ghost{display:flex}
.pt-empty .ghost i{width:34px;height:34px;border-radius:50%;border:1px dashed rgba(236,230,218,.35);margin-left:-10px;background:rgba(12,12,12,.8)}
.pt-empty .ghost i:first-child{margin-left:0;border-color:var(--acc)}

/* photos */
#s-photos{padding:0}
/* метка «● Фото с DDLONG ( 06 )» стоит на --c-top: под ней затемнение ≥ .6 (Р9) — на светлом небе иначе не читалась */
#s-photos .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.6) calc(var(--c-top) + 24px),transparent 34%,transparent 55%,rgba(0,0,0,.8))}
@media (max-width:899px){ #s-photos .g-ui{flex-direction:column;align-items:stretch} #s-photos .g-ctl{justify-content:space-between} #s-photos .g-num{margin-right:auto} }

/* register */
#s-register .in{max-width:1100px}
/* iPhone SE: строка «DDLONG №… · дата · сбор/старт» дублирует плашку первого экрана — без неё главная кнопка выше нижней зоны и «↓ ещё» */
@media (max-width:899px) and (max-height:600px){ #s-register .reg-grid > div:first-child .lead{display:none} }
.reg-grid{display:grid;gap:clamp(18px,3.5vh,34px)}
@media (min-width:900px){ .reg-grid{grid-template-columns:.9fr 1.2fr;gap:60px;align-items:start} }
form.reg{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.fld{position:relative;grid-column:span 2;min-width:0}   /* min-width:0 — поле даты в iOS не распирает половинную колонку */
.fld.half{grid-column:span 1}
.fld input,.fld select{width:100%;font:500 15px var(--body);color:var(--fg);background:rgba(12,12,12,.72);border:1px solid rgba(236,230,218,.18);border-radius:12px;padding:20px 14px 8px;outline:none;transition:border-color .3s,background .3s;-webkit-appearance:none;appearance:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fld select{padding-right:34px;cursor:pointer}
.fld.sel::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--dim)}
.fld label{position:absolute;left:15px;top:15px;font-size:14px;color:var(--dim);pointer-events:none;transition:transform .3s var(--out),font-size .3s,color .3s}
.fld input:focus,.fld select:focus{border-color:var(--acc);background:rgba(20,20,20,.85)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld.sel label,.fld.date label{transform:translateY(-9px);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.fld input[type=date]{color-scheme:dark;min-height:52px}
.fld.err input,.fld.err select{border-color:#ff3b3b}
.sex{grid-column:span 2;display:flex;gap:8px}
.sex label{flex:1;position:relative;cursor:pointer}
.sex input{position:absolute;opacity:0}
.sex span{display:block;text-align:center;padding:14px;border-radius:12px;border:1px solid rgba(236,230,218,.18);font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;background:rgba(12,12,12,.72);transition:background .3s,color .3s,border-color .3s}
.sex input:checked+span{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}
.sex.err span{border-color:#ff3b3b}
form.reg .btn{grid-column:span 2;margin-top:6px}
/* гость: вместо анкеты — вход (анкета заполнится из профиля) */
.reg-guest{display:grid;gap:clamp(16px,2.6vh,24px);padding:clamp(18px,3vh,28px);border-radius:16px;border:1px solid var(--faint);background:rgba(12,12,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.reg-steps{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.reg-steps li{display:grid;grid-template-columns:clamp(40px,3.6vw,52px) 1fr;gap:12px;align-items:baseline}
.reg-steps b{font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;line-height:1;color:var(--acc)}
.reg-steps span{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.3vw,16px);line-height:1.35}
/* iPhone SE и mini: шаги гостя — строкой Manrope (пояснение, Р6): обе кнопки входа выше нижней зоны, «↓ ещё» их не закрывает */
@media (max-width:899px) and (max-height:640px){ .reg-steps{gap:10px} .reg-steps span{font:600 15px/1.4 var(--body);text-transform:none;letter-spacing:0} }
.reg-guest-btns{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.reg-more{display:contents} .reg-more[hidden]{display:none}
.reg-me{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:var(--dim)} .reg-me b{color:var(--fg);font-weight:600}
.reg-me-btn{flex:none;font:inherit;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--faint);padding:2px 0;cursor:pointer} .reg-me-btn[aria-expanded=true]{color:var(--dim)}
.reg-note{grid-column:span 2;font-size:14px;color:var(--dim)} .reg-note a{color:var(--fg);border-bottom:1px solid var(--faint)}
#toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translate(-50%,30px);z-index:75;background:var(--fg);color:#0a0a0a;padding:14px 20px;border-radius:16px;font-size:14px;max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--out)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* contacts */
.ddl-ct{display:grid;gap:clamp(16px,3vh,30px)}
.ddl-ct .tel{white-space:nowrap}
@media (max-width:899px){ .ddl-ct .f-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:24px} .ddl-ct .f-nav h4{grid-column:1/-1} }   /* 7 ссылок — в две колонки, экран короче */
/* телефон не переносится (nowrap) — его колонка по ширине номера, почта берёт остаток: на 320 px не шире окна */
@media (max-width:899px){ .ddl-ct .f-grid{grid-template-columns:minmax(0,1fr) auto} }
/* ≥900: сетка 2×2 (почта · телефон / навигация · соцсети) по ширине содержимого — 4 колонки с навигацией в две не влезали в правую колонку экрана и уходили под точки и за край */
@media (min-width:900px){ .ddl-ct .f-grid{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:clamp(28px,3vw,56px)} }
@media (min-width:900px) and (max-width:1099px){ .ddl-ct .f-nav{grid-template-columns:auto} }   /* навигация в две колонки помещается с ~1070 px */
@media (max-width:899px){ .g-card{padding:14px 16px;gap:6px} .g-card b{font-size:24px} .g-card p{font-size:14px;line-height:1.45} .pace{gap:6px} .pace-row{gap:4px} form.reg{gap:8px} .fld input,.fld select{padding:18px 14px 6px} }

/* ===== по проверке 20.10 ===== */
/* десктоп: таймлайн не уходит под точки навигации и за правый край */
@media (min-width:900px){ .tl-time{font-size:min(6vw,11vh)} }   /* справа от точек навигации отступает .in (main.css) */
/* число в активной вкладке группы: контраст на светлом */
.ptabs button.on i{color:#b83500}

/* групп больше 8 (их добавляют в админке) — на широком экране в две колонки, на телефоне плотнее: экран не вылезает за край */
@media (min-width:900px){ .pace.many{grid-template-columns:1fr 1fr;column-gap:28px} #s-groups .pace{margin-right:clamp(56px,7vw,112px)} }   /* справа — точки экранов с подписью */
@media (max-width:899px){ .pace.many{gap:4px} .pace.many .pace-row{gap:3px} .pace.many .bar{height:7px} }

/* «Вы в деле»: своя запись на воскресенье, смена группы, отказ */
#s-register [hidden]{display:none!important}
.reg-in{display:grid;gap:clamp(14px,2.2vh,20px);padding:clamp(18px,3vh,28px);border-radius:16px;border:1px solid var(--acc);background:rgba(12,12,12,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 60px rgba(252,76,1,.12)}
.ri-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.ri-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--acc);color:#0a0a0a;font-weight:700;white-space:nowrap}
.ri-badge i{width:8px;height:8px;border-radius:50%;background:#0a0a0a;animation:riPulse 1.6s ease-in-out infinite}
@keyframes riPulse{50%{opacity:.2}}
.ri-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ri-group small{width:100%;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.ri-group b{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.2vw,48px);letter-spacing:-.02em;line-height:1.04;color:var(--acc)}
.ri-group em{font-style:normal;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.6vw,20px);line-height:1.2}
.ri-role{align-self:center;display:inline-flex;align-items:center;height:30px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:0 12px;border:1px solid var(--acc);border-radius:999px;color:var(--acc)}
.ri-note{font-size:14.5px;line-height:1.5;color:var(--dim)}
@media (max-width:599px){ .ri-note{font-size:14px;line-height:1.45} .ri-street,.ri-bye{display:none} }   /* телефон: «Сбор в 07:45 — Кафе … · м. Фрунзенская», полный адрес — на «Программе» */
.ri-change{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.ri-change .fld{grid-column:auto}
.ri-change .sex{grid-column:1 / -1;order:-1}
.ri-change .btn{padding-left:22px;padding-right:22px}
.ri-change .btn:disabled{opacity:.4;cursor:default}
.ri-change .btn:disabled:hover{color:inherit;border-color:inherit} .ri-change .btn:disabled:hover::before{transform:translateY(101%)}
.ri-actions{display:flex;flex-wrap:wrap;gap:10px}
.ri-actions .ri-cancel{border-color:rgba(236,230,218,.28);color:var(--dim)}
.ri-actions .ri-cancel:hover{color:#0a0a0a}
.ri-confirm{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px dashed rgba(236,230,218,.35);background:rgba(7,7,7,.6)}
.ri-confirm p{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.3vw,15px);line-height:1.4}
.ri-confirm div{display:flex;flex-wrap:wrap;gap:10px}
.ri-lock{font-size:14px;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
@media (max-width:599px){ .ri-change{grid-template-columns:1fr} .ri-actions .btn,.ri-confirm .btn{flex:1 1 auto} }
/* телефон: «Остаюсь · Да, отказаться» — одной строкой (с 360 px), блок ниже — не уходит под нижнюю зону */
@media (max-width:599px){ .ri-confirm .btn{padding:0 14px;letter-spacing:.04em} }
@media (prefers-reduced-motion:reduce){ .ri-badge i{animation:none} }

/* я в списке своей группы: обводка и подпись «Вы», фото в цвете; вкладка своей группы — с точкой */
.me-tag{display:inline-block;margin-left:8px;padding:3px 7px 2px;border-radius:999px;background:var(--acc);color:#0a0a0a;font:700 14px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.pt.me{border-color:var(--acc);background:rgba(252,76,1,.14);box-shadow:0 0 0 1px var(--acc) inset}
.pt.me img{filter:none}
.pacer-list .bday.me{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset,0 0 40px rgba(252,76,1,.16)}
.pacer-list .bday.me .ph img{filter:none}
.ptabs button.mine::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}

/* iPhone не увеличивает страницу при касании поля (шрифт полей от 16 px) */
@media (max-width:899px){ .fld input,.fld select{font-size:16px} }

/* Вадим 05.11: «убери все ИИшные клише» — на DD Long без счётчиков экранов («02 / 08», «( 02 )», «01 / 20»), часов MSK, «Scroll»
   и моноширинных капс-меток с точкой: метка раздела — обычной строкой, как подпись в клубном чате */
#hud,#hudR,#arrowDown{display:none!important}
.sec-head.mono,.g-head.mono{font-family:var(--body);text-transform:none;letter-spacing:0}
.sec-head .label,.g-head .label{font-size:16px} .sec-head .label::before,.g-head .label::before{display:none}
.sec-head .label b,.g-head .label b{font-weight:600}
.reg-why{margin:0;font-size:17px;line-height:1.45;color:var(--fg)}
.g-cap.mono{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:15px}
/* Вадим 05.11: «мелкие шрифты налазят один на другой» — подпись над полем (не внутри поверх значения), текст крупнее и светлее,
   без моноширинного капса; поля 17 px (iOS не увеличивает страницу при вводе) */
#s-register .lead{color:var(--fg);opacity:.85;font-size:clamp(17px,1.7vw,20px)}
#s-register .fld{display:flex;flex-direction:column-reverse;gap:6px}
#s-register .fld label{position:static;transform:none!important;font:500 16px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
#s-register .fld input:focus+label,#s-register .fld select:focus+label{color:var(--fg)}
#s-register .fld.err label{color:#ff6b6b}
#s-register .fld input,#s-register .fld select{font-size:17px;padding:14px 16px;min-height:52px}
#s-register .fld.sel::after{top:auto;bottom:19px;transform:none}
#s-register .sex span{font:500 17px/1.2 var(--body);letter-spacing:0;text-transform:none;padding:15px 12px}
#s-register .reg-me,#s-register .reg-me-btn{font-size:17px} #s-register .reg-me{color:var(--fg)}
#s-register .reg-note{font-size:15px;line-height:1.5}
#s-register .mono{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:16px}
#s-register .ri-head,#s-register .ri-group small,#s-register .ri-lock{font-size:16px;letter-spacing:0;text-transform:none}
#s-register .ri-role{font-size:15px;letter-spacing:0;text-transform:none}
#s-register .ri-note{font-size:16px;line-height:1.5}
#s-register .ri-confirm p{font-family:var(--body);font-weight:600;text-transform:none;font-size:17px}
/* пейсер: аватар в плотной оранжевой обводке + шарик с темпом на нитке (клубные фото: пейсеры бегут с оранжевыми шариками) */
.pacer-list .bday .ph{width:108px;height:96px}
.pacer-list .bday .ph img{inset:auto;left:2px;bottom:2px;width:64px;height:64px;filter:none;box-shadow:0 0 0 3px #0a0a0a,0 0 0 6px var(--acc);z-index:1}
.pacer-list .bday .ph svg{display:none}
.pacer-list .bday .ph .pc-ball{display:block;position:absolute;right:0;top:-4px;width:50px;height:70px;overflow:visible;transform-origin:27px 68px;animation:pcSway 3.4s ease-in-out infinite}
.pc-ball ellipse{fill:var(--acc)} .pc-ball .hl{fill:#fff;opacity:.32} .pc-ball .knot{fill:var(--acc)}
.pc-ball .str{fill:none;stroke:rgba(236,230,218,.55);stroke-width:1.1}
.pacer-list .bday .ph .pc-ball text{fill:#0a0a0a;font-family:var(--disp);font-weight:900;text-anchor:middle;letter-spacing:-.02em}
@keyframes pcSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){ .pacer-list .bday .ph .pc-ball{animation:none} }
.pacer-list .bday .pace small,.pc-sub{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:15px}

/* End */
/* /local/templates/dd2026/assets/css/main.css?179414393780877 */
/* /local/templates/dd2026/assets/css/ddlong.css?179398303428057 */