/* Культроверт — страница «Собрать вечер» (vecher.html). Логика — vecher.js */
:root{--bone:#fffef7;--ink:#000;--navy:#101731;--navy-line:#2e3654;--mist:#b4b8c6;--graphite:#666;--charcoal:#4d4c4a;--ash:#aaa;--line:rgba(0,0,0,.12);--gut:32px;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:'Onest',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:'Cormorant',serif;font-weight:400}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (max-width:767px){:root{--gut:16px}}

/* шапка */
.vt{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--gut);background:var(--bone);border-bottom:1px solid rgba(0,0,0,.08);transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.vt img{display:block;height:22px}
.vt .bone{display:none}
.v-dark .vt{background:var(--navy);color:var(--bone);border-color:rgba(255,254,247,.12)}
.v-dark .vt .ink{display:none}
.v-dark .vt .bone{display:block}
.vt-r{display:flex;align-items:center;gap:16px;font-size:14px}
.pill{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid currentColor;border-radius:1440px;font-size:15px;cursor:pointer;white-space:nowrap;text-decoration:none}
.pill-ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
@media (max-width:767px){.vt{height:56px}.vt img{height:18px}}

/* ───── вопросы */
.q{min-height:calc(100svh - 64px);display:flex;flex-direction:column;padding:48px var(--gut) 40px;max-width:1040px;margin:0 auto}
.q-k{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.q-back{all:unset;cursor:pointer;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.q-back[hidden]{visibility:hidden}
.q-h{margin:40px 0 40px;font-size:calc(clamp(40px,5vw,64px) * 1.15);line-height:.92;letter-spacing:-0.025em;text-wrap:balance}
.q-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.q-opt{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .2s,padding .3s var(--ease)}
.q-opt .n{font-size:12px;color:var(--graphite)}
.q-opt .t{font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-0.01em}
.q-opt .s{grid-column:2;font-size:14px;color:var(--graphite);margin-top:-10px}
.q-opt .ar{font-size:20px;opacity:.35;transition:opacity .2s,translate .3s var(--ease)}
.q-opt[aria-pressed="true"] .t{font-style:italic;font-family:'Cormorant',serif;font-size:clamp(26px,2.6vw,32px)}
@media (hover:hover){.q-opt:hover{background:rgba(16,23,49,.04);padding-left:12px}.q-opt:hover .ar{opacity:1;translate:4px 0}}
.q-dots{display:flex;gap:6px;margin-top:auto;padding-top:40px}
.q-dots i{flex:1;height:2px;background:var(--line)}
.q-dots i.on{background:var(--ink)}
.q-in{animation:v-in .45s var(--ease) both}
@keyframes v-in{from{opacity:0;translate:0 12px}}
@media (prefers-reduced-motion:reduce){.q-in,.r-in{animation:none}}
@media (max-width:767px){.q{padding-top:28px}.q-h{margin:28px 0 28px;font-size:44px}.q-opt{grid-template-columns:28px minmax(0,1fr) auto;padding:18px 0}}

/* ───── сборка: золотой веер из брендбука раскрывается по мере работы */
.v-dark{background:#000;color:var(--bone)}
.v-dark .vt{background:#000;border-color:rgba(255,254,247,.1)}

/* ───── сборка: как второй блок главной — знак во всю высоту у левого края, в нём кадр события; текст по центру */
.b{position:relative;overflow:hidden;min-height:calc(100svh - 64px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(56px,12vh,140px) var(--gut) 64px;text-align:center}
.b-stage{position:absolute;inset:0;pointer-events:none}
.b-mask{position:absolute;inset:0;-webkit-mask:url(assets/mark-mask.svg) no-repeat;mask:url(assets/mark-mask.svg) no-repeat}
.b-photo,.b-full{position:absolute;inset:0;background:#000 center 30%/cover no-repeat}
.b-photo{inset:auto;background-position:center}
.b-full{opacity:0}
.b-in{position:relative;z-index:2;width:100%;max-width:880px;margin:0 auto;transition:opacity .45s}
.b-done .b-in{opacity:0}
.b-k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,254,247,.7)}
.b-now{margin:24px auto 0;height:1.86em;display:flex;align-items:center;justify-content:center;font-size:calc(clamp(40px,5vw,72px) * 1.15);line-height:.92;letter-spacing:-0.025em;text-wrap:balance}
.b-now .w{display:inline-block;animation:b-word .8s cubic-bezier(.2,0,0,1) both}
@keyframes b-word{from{opacity:0;translate:0 .2em;filter:blur(8px)}}
.b-stages{list-style:none;margin:48px auto 0;padding:0;max-width:560px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:left}
.b-stages li{display:flex;flex-direction:column;gap:10px;color:rgba(255,254,247,.4);transition:color .5s}
.b-stages .n{display:none}
.b-stages .t{font-size:13px;line-height:1.3}
.b-stages i{display:block;order:-1;height:2px;background:rgba(255,254,247,.16);position:relative;overflow:hidden}
.b-stages i::after{content:"";position:absolute;inset:0;width:0;background:var(--bone);transition:width .8s cubic-bezier(.2,0,0,1)}
.b-stages li.on{color:var(--bone)}
.b-stages li.on i::after{animation:b-fill 22s cubic-bezier(.1,.6,.3,1) forwards}
.b-stages li.done{color:rgba(255,254,247,.7)}
.b-stages li.done i::after{width:100%}
@keyframes b-fill{from{width:4%}to{width:90%}}
.b-foot{margin-top:20px;font-size:13px;color:rgba(255,254,247,.55)}
.b-err{margin:0 auto 32px;font-size:calc(clamp(30px,3.6vw,44px) * 1.15);line-height:.95;letter-spacing:-0.02em;max-width:22ch}
.b-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.b-acts .pill{border-color:rgba(255,254,247,.4)}
.b-acts .pill-bone{background:var(--bone);color:var(--ink);border-color:var(--bone)}
@media (prefers-reduced-motion:reduce){.b-now .w,.b-stages li.on i::after{animation:none}}
@media (max-width:767px){
  .b{padding:40px var(--gut) 40px}
  .b-now{font-size:42px;height:2.8em}
  @media (max-width:360px){.b-now{font-size:36px}}
  .b-stages{margin-top:36px}
  .b-stages .t{font-size:12px}
}

/* ───── вечер */
.r{padding:56px var(--gut) 120px;max-width:1240px;margin:0 auto}
.r-in{animation:v-in .6s var(--ease) both}
.r-k{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.r-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
.r-hero-t{min-width:0;padding-bottom:8px}
.r-pic{margin:0;aspect-ratio:4/5;overflow:hidden;background:#111}
.r-pic img{display:block;width:100%;height:100%;object-fit:cover}
.r-h{margin:24px 0 0;font-size:calc(clamp(44px,5vw,88px) * 1.15);line-height:.88;letter-spacing:-0.03em;text-wrap:balance}
.r-lead{margin:28px 0 0;font-size:clamp(20px,2vw,26px);line-height:1.3;font-weight:300;max-width:34ch;color:var(--charcoal);text-wrap:pretty}
.r-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--ink)}
.r-fact{padding:16px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.r-fact + .r-fact{padding-left:24px;border-left:1px solid var(--line)}
.r-fact span{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.r-fact b{font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.15}
.r-why{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;margin-top:80px}
.r-why .r-k{grid-column:1/4}
.r-why p{grid-column:4/11;margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:300;text-wrap:pretty}

/* программа */
.r-sec{margin-top:96px}
.r-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.r-sec-h h2{margin:0;font-size:calc(clamp(32px,3.6vw,48px) * 1.15);line-height:.9;letter-spacing:-0.025em}
.r-prog{list-style:none;margin:0;padding:0}
.r-prog a{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) 24px;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.r-prog .tm{font-size:22px}
.r-prog .tt{font-size:22px;line-height:1.2}
.r-prog .pl{font-size:15px;color:var(--graphite)}
.r-prog .ar{opacity:.35}
@media (hover:hover){.r-prog a:hover .ar{opacity:1}.r-prog a:hover .tt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}

/* шаг */
.st{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.st-side{grid-column:1/4;display:flex;flex-direction:column;gap:8px;position:sticky;top:96px;align-self:start}
.st-time{font-size:calc(clamp(40px,4.4vw,64px) * 1.15);line-height:.86;letter-spacing:-0.02em}
.st-kind{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.st-main{grid-column:4/12;min-width:0}
.st-t{margin:0;font-size:calc(clamp(32px,3.4vw,46px) * 1.15);line-height:.92;letter-spacing:-0.025em;text-wrap:balance}
.st-where{margin-top:12px;font-size:16px;color:var(--graphite)}
.st-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.st-tags > *{flex:0 1 auto;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:1440px;font-size:14px;text-decoration:none}
.st-tags a{border-color:var(--ink)}
.st-about{margin:24px 0 0;font-size:18px;line-height:1.45;max-width:62ch;text-wrap:pretty}
.st-intro{margin-top:32px;padding:28px 32px;background:var(--navy);color:var(--bone)}
.st-intro .lab{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mist)}
.st-intro p{margin:12px 0 0;font-family:'Cormorant',serif;font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-0.01em;text-wrap:pretty}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px}
.st-blk h3{margin:0 0 12px;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.st-blk ol,.st-blk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.st-blk li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.st-blk ol{counter-reset:n}
.st-blk li{counter-increment:n}
.st-blk li::before{content:counter(n);font-size:12px;color:var(--graphite);padding-top:3px}
.st-blk.no li::before{content:"—";font-size:16px;padding-top:0}
.st-blk.avoid li::before{content:"×";font-size:18px;line-height:1.1;padding-top:0}
.st-wide{grid-column:1/-1}
.st-order{margin-top:24px;padding:20px 24px;border:1px solid var(--ink);font-size:17px;line-height:1.45}
.st-order b{display:block;font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite);margin-bottom:6px}
.st-next{margin-top:32px;display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--charcoal)}
.st-next::before{content:"→";color:var(--ink)}

/* после вечера */
.r-talk{list-style:none;margin:0;padding:0}
.r-talk li{padding:28px 0;border-bottom:1px solid var(--line);font-family:'Cormorant',serif;font-style:italic;font-size:calc(clamp(26px,2.8vw,38px) * 1.1);line-height:1.05;letter-spacing:-0.015em;text-wrap:balance}
.r-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.r-two .st-blk li{font-size:17px}
.r-budget{width:100%;border-collapse:collapse}
.r-budget td{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.r-budget td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.r-budget tr.tot td{border-bottom:1px solid var(--ink);font-size:20px}

/* действия */
.r-acts{position:sticky;bottom:0;z-index:15;margin:96px calc(-1 * var(--gut)) 0;padding:16px var(--gut);background:rgba(255,254,247,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.r-acts .pill-ink{min-height:52px;padding:0 28px;font-size:16px}
.r-acts .note{margin-left:auto;font-size:13px;color:var(--graphite);max-width:44ch}
.r-fine{margin-top:24px;font-size:13px;line-height:1.4;color:var(--graphite);max-width:70ch}
.r-again-m{display:none !important}
.toast{position:fixed;left:50%;bottom:96px;translate:-50% 12px;opacity:0;background:var(--ink);color:var(--bone);padding:12px 20px;border-radius:1440px;font-size:14px;transition:opacity .3s,translate .3s var(--ease);pointer-events:none;z-index:30}
.toast.on{opacity:1;translate:-50% 0}

@media (max-width:1023px){
  .r-hero{column-gap:32px}
  .r-why,.st{grid-template-columns:minmax(0,1fr)}
  .r-why .r-k,.r-why p,.st-side,.st-main{grid-column:1/-1}
  .r-why p{margin-top:16px}
  .st-side{position:static;flex-direction:row;align-items:baseline;gap:16px;margin-bottom:20px}
  .r-two{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:767px){
  .r{padding-top:32px}
  .r-h{font-size:48px}
  .r-hero{grid-template-columns:minmax(0,1fr)}
  .r-pic{order:-1;margin:-32px calc(-1 * var(--gut)) 28px;aspect-ratio:4/3}
  .r-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-fact:nth-child(3){padding-left:0;border-left:0}
  .r-fact:nth-child(n+3){padding-top:20px}
  .r-sec{margin-top:64px}
  .r-prog a{grid-template-columns:64px minmax(0,1fr) 16px;gap:12px}
  .r-prog .pl{grid-column:2;margin-top:-8px}
  .r-prog .ar{grid-row:1;grid-column:3}
  .st{padding:40px 0}
  .st-intro{padding:22px 20px;margin-inline:calc(-1 * var(--gut))}
  .st-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .r-acts{gap:8px;flex-wrap:nowrap;padding-block:12px}
  .r-acts .pill-ink{flex:1 1 auto;min-height:48px}
  .r-acts .pill{flex:0 0 auto}
  .r-acts .note,.r-acts .r-again{display:none}
  .r-again-m{display:inline-flex !important;margin-top:28px;width:100%}
}