(+ JSON-LD FAQPage в ) ---------- */
.art__faq{padding-top:var(--s-art);max-width:800px}
.faq__i{border-bottom:1px solid var(--line-l)}
.faq__i:first-of-type{border-top:1px solid var(--line-l)}
.faq__i summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;gap:20px;align-items:center;padding:20px 0;font-weight:500;font-size:19px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);transition:color .25s}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--brick)}
.faq__x{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--edge-l);position:relative;transition:transform .35s var(--ease-soft),background .25s}
.faq__x::before,.faq__x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq__x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__i[open] .faq__x{transform:rotate(45deg);background:var(--ink);color:var(--milk);box-shadow:none}
.faq__a{padding:0 54px 24px 0}
.faq__a p{font-size:18px;line-height:1.6;color:#2E2420}
.faq__a p+p{margin-top:.7em}
/* ---------- 7. После статьи (та же молочная глава, пара с линией): доверие → работы → CTA ---------- */
.art__after{margin-top:calc(var(--s-pair) / 2 + var(--s-art) / 2);padding-top:calc(var(--s-pair) / 2);border-top:1px solid var(--line-l);display:grid;gap:var(--s-art)}
.art__trust{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.art__trust p{font-size:clamp(24px,2.5vw,38px);line-height:1.18;letter-spacing:-.025em;font-weight:300;max-width:42ch;text-wrap:balance}
.art__trust .link{font-size:16px;white-space:nowrap}
.art__works-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px)}
.art__works-h h2{font-size:clamp(26px,2.4vw,36px);line-height:1.05;letter-spacing:-.03em}
.art__works-h .link{font-size:16px}
.art__works .works__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.art__works .work .h4{font-size:18px}
.art__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;background:var(--night);color:var(--milk);border-radius:var(--r-card);padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px)}
.art__cta :focus-visible{outline-color:var(--milk);box-shadow:0 0 0 2px var(--night)}
.art__cta-h{font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em}
.art__cta-s{font-size:15.5px;line-height:1.45;color:var(--mute-d);margin-top:8px}
/* ---------- 8. «Другие статьи» — тёмная глава перед формой: превью, рубрика, дата, время чтения ---------- */
.art-rel__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.art-rel__h h2{font-size:clamp(28px,3vw,44px);line-height:1.04;letter-spacing:-.03em}
.art-rel__h .link{font-size:16px}
.art-rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.art-rel__grid:has(>.relc:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.relc{position:relative;display:grid;gap:14px;align-content:start}
.relc__m{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--night-2)}
.art-rel__grid:has(>.relc:nth-child(2):last-child) .relc__m{aspect-ratio:16/8.5}
.relc__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-soft)}
.relc:hover .relc__m img{transform:scale(1.04)}
.relc__m .tag{position:absolute;left:14px;top:14px;background:rgba(26,20,18,.55);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:14px;padding:8px 13px}
.relc h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.015em;max-width:26ch}
.relc h3 a::after{content:"";position:absolute;inset:0}
.relc h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.relc__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--small);color:var(--mute-d)}
/* слова с дефисом (15-летним, 3D-модель, ИИ-ролик) не рвём по дефису — article.js оборачивает их в .nw */
.art .nw,.phead--art2 .nw{white-space:nowrap}
/* ---------- 9. Адаптив ---------- */
@media (max-width:1280px){
.art__grid{grid-template-columns:minmax(0,760px) minmax(220px,260px);gap:48px}
}
@media (max-width:1100px){
.art__grid{grid-template-columns:minmax(0,800px)}
.art__side{display:none}
.art__tocm{display:block;margin-top:clamp(24px,3vw,32px);max-width:800px;border-radius:var(--r-ui);box-shadow:inset 0 0 0 1px var(--line-l);background:rgba(26,20,18,.025)}
.art__tocm[hidden]{display:none}
.art--v2 .prose p,.art__p,.art__ul li,.art__ol li{font-size:18px}
.art__works .works__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
.phead--art2 .phead__grid{grid-template-columns:1fr;gap:22px}
.phead--art2 h1.hl{max-width:none}
.art__byline{gap:14px;padding-bottom:0}
.art__ava{width:48px;height:48px}
.art__answer{font-size:19px;line-height:1.5}
.art__h2{font-size:clamp(25px,6.6vw,30px);line-height:1.1}
.art__h2::before{font-size:14px;margin-bottom:10px}
.art--v2 .steps li{grid-template-columns:40px 1fr;padding:16px 0 18px}
.art--v2 .steps b{font-size:18px}
.art--v2 .steps p{font-size:17px}
.art--v2 .roles{grid-template-columns:1fr}
.art--v2 .callout{padding:18px 18px 20px}
.art--v2 .callout p{font-size:17px}
.art__note{padding:18px 18px 20px 20px}
.art__note p{font-size:17px}
.art__table table{min-width:560px;font-size:15px}
.art__table th,.art__table td{padding:12px 13px}
.mform{grid-template-columns:1fr;gap:16px;padding:22px 16px 20px;border-radius:var(--r-ui)}
.mform__h{font-size:24px}
.mform__need legend{margin-bottom:8px}
.mform__need .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mform__need .opt span{width:100%;justify-content:center;text-align:center;font-size:14.5px;padding:9px 10px;min-height:48px}
.mform .btn{width:100%}
.faq__i summary{font-size:17.5px;gap:14px;padding:16px 0}
.faq__a{padding-right:0}
.faq__a p{font-size:17px}
.art__trust{grid-template-columns:1fr}
.art__trust p{font-size:24px}
.art__cta{grid-template-columns:1fr;padding:22px 18px;border-radius:var(--r-ui)}
.art__cta .btn{width:100%;justify-content:center}
.art-rel__grid,.art-rel__grid:has(>.relc:nth-child(2):last-child){grid-template-columns:1fr;gap:24px}
.art-rel__grid,.art-rel__grid:has(>.relc:nth-child(2):last-child){gap:12px}
/* компактная карточка: кадр слева, текст справа (статьи ≤ 9,5 экрана — design_system_rules В1) */
.relc{grid-template-columns:112px minmax(0,1fr);gap:4px 14px;align-items:start;padding:10px;border-radius:var(--r-card);background:rgba(244,238,230,.05);box-shadow:inset 0 0 0 1px var(--line-d)}
.relc__m,.art-rel__grid:has(>.relc:nth-child(2):last-child) .relc__m{grid-row:1 / span 2;aspect-ratio:1/1;border-radius:calc(var(--r-card) - 8px)}
.relc__m .tag{display:none}
.relc h3{font-size:17px;line-height:1.25;align-self:end}
.relc__meta{gap:4px 10px;font-size:12.5px}
.relc__meta::before{content:attr(data-cat);display:block;width:100%;color:var(--milk);opacity:.7}
}
@media (max-width:600px){
.art--v2 .prose p,.art__p,.art__ul li,.art__ol li{font-size:18px;line-height:1.6}
.art--v2 .prose p.lead{font-size:20px}
.art--v2 .art__lead{font-size:17.5px}
.art--v2 .co__line{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.art__tocm-b i,.faq__x,.relc__m img{transition:none}}
/* ---------- 10. Компоненты волны 2 (08.10): кадры с естественными пропорциями, ряды кадров, календарный план,
схема команды, вопросы-ответы, карточка брифа, версии под площадки. Разметка — в комментарии каждого блока ниже. ---------- */
/* Кадр-полоса (триптих, 4 варианта генерации, пара «эскиз → кадр»): ![]()
![]()
*/ .br-m{display:none} @media (max-width:900px){.br-m{display:inline}} /* H1, у которого на узком экране строка шире колонки на несколько пикселей (без одиноких слов иначе не собрать): чуть меньший кегль только ≤900 */ @media (max-width:900px){main>.phead.phead--art2 h1.hl.hl--fit{font-size:min(var(--h1-s),9.1vw)}} /* 1007l обложки «Свет» (site/_tools/blog_covers): в «Других статьях» — на ≤900 квадрат _sq.webp под миниатюру 112 px.
display:contents — img остаётся прямым ребёнком .relc__m, прежние правила работают без изменений. */
.relc__m picture{display:contents}
/* ===== 07.10 (Алексей): шире колонка текста, оглавление ближе; обложка статьи — баннером в начале статьи ===== */
@media (min-width:1101px){.art__grid{grid-template-columns:minmax(0,1fr) minmax(240px,300px);justify-content:stretch;gap:clamp(40px,4.4vw,72px)}}
.art--v2 .prose,.art--v2 .prose p,.art__p,.art--v2 .art__lead,.art__ul,.art__ol,.art--v2 .co__line,.art__answer{max-width:880px}
.art--v2 .steps,.art--v2 .roles,.art--v2 .callout,.art__note,.art__table{max-width:none}
.art__cover{margin:0 0 clamp(36px,4.4vw,64px);border-radius:var(--r-frame,28px);overflow:hidden;background:var(--night);aspect-ratio:16/7}
.art__cover img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.art__cover{aspect-ratio:16/7;border-radius:var(--r-card,20px);margin-bottom:28px}}
/* 07.10 (Алексей: «подсветка активного пункта грубовата»): оглавление — мягкая плашка со скруглением,
без обрезки слева (раньше отрицательный отступ уходил под overflow контейнера и срезал скругление и полосу) */
.art__toc{padding:18px 6px 6px 0;margin-left:-6px;padding-left:6px}
.art__toc ol{gap:4px}
.art__toc li a,.art__toc-faq a{grid-template-columns:28px 1fr;gap:8px;margin-left:0;padding:9px 12px 10px;border-radius:14px;box-shadow:none;text-wrap:pretty;transition:color .25s,background .25s}
.art__toc li a i,.art__toc-faq a i{transition:color .25s}
.art__toc li a:hover,.art__toc-faq a:hover{background:rgba(26,20,18,.035)}
.art__toc li a.is-active,.art__toc-faq a.is-active{color:var(--ink);background:rgba(var(--brick-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--brick-rgb),.14);font-weight:400}
.art__toc li a.is-active i{font-weight:500}
.art__toc-faq{margin-top:12px;padding-top:12px}
.art__toc ol{list-style:none;margin:0;padding:0}
.art__toc ol>li::marker{content:none}
.relc__m:has(img[src*="/blog/covers/"]){aspect-ratio:16/10}
/* 07.10 (Алексей: «шире текст, шрифт как есть»): все блоки статьи — на ширину колонки текста, единый правый край.
07.10 одобрено Алексеем: класс .art--full стоит во всех статьях и в шаблоне */
.art--full .art__body .prose,.art--full .art__body .prose p,.art--full .art__body .art__p,.art--full .art__body .art__lead,.art--full .art__body .art__ul,.art--full .art__body .art__ol,.art--full .art__body .co__line,.art--full .art__body .art__answer,
.art--full .art__body .steps,.art--full .art__body .roles,.art--full .art__body .callout,.art--full .art__body .art__note,.art--full .art__body .art__table,.art--full .art__body .mform,.art--full .art__body .art__figs,.art--full .art__body .art__fig,.art--full .art__body .faqb,.art--full .art__body details,
.art--full .art__body .art__qa,.art--full .art__body .art__gc,.art--full .art__body .art__org{max-width:none} /* 07.10 (Алексей): вопросы-ответы, календарный план и оргсхема — на ту же ширину, что и текст */
/* 07.10 (Алексей): .art--full (все статьи) — крупнее текст под широкую колонку (строка ~95 знаков) и H2 в одну строку (ручные переносы br-d сняты) */
@media (min-width:1101px){
.art--full .art__body .prose p,.art--full .art__body .art__p,.art--full .art__body .art__ul li,.art--full .art__body .art__ol li{font-size:21px;line-height:1.6}
.art--full .art__body .art__lead{font-size:22px}
.art--full .art__body .art__answer{font-size:clamp(23px,1.75vw,25px)}
.art--full .art__body .steps p,.art--full .art__body .callout p,.art--full .art__body .art__note p{font-size:19.5px}
.art--full .art__body .art__table td,.art--full .art__body .art__table th{font-size:18px}
.art--full .art__body .art__qa dt{font-size:22px;line-height:1.35}
.art--full .art__body .art__qa dd{font-size:21px;line-height:1.6}
.art--full .art__h2 br.br-d{display:none}
.art--full .art__h2{text-wrap:balance}
}
/* 07.10 (Алексей): .art--full (все статьи) — «Частые вопросы» в две колонки на всю ширину колонки статьи; аккуратный фокус у вопросов */
@media (min-width:1101px){
.art--full .art__faq{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,3.4vw,56px);align-items:start}
.art--full .art__faq>:not(.faq__i){grid-column:1 / -1}
}
.art__faq .faq__i summary:focus{outline:none}
.art__faq .faq__i summary:focus-visible{outline:2px solid var(--brick);outline-offset:4px;border-radius:12px}
/* 08.10 волна 3: подпись под рядом кадров (
*/ .br-m{display:none} @media (max-width:900px){.br-m{display:inline}} /* H1, у которого на узком экране строка шире колонки на несколько пикселей (без одиноких слов иначе не собрать): чуть меньший кегль только ≤900 */ @media (max-width:900px){main>.phead.phead--art2 h1.hl.hl--fit{font-size:min(var(--h1-s),9.1vw)}} /* 1007l обложки «Свет» (site/_tools/blog_covers): в «Других статьях»
…), подпись под кадром-полосой (.art__fig--nat > figcaption),
ряд из шести кадров .art__figs--6 (3×2, на ≤700 — 2×3), абзацы внутри ответа в .art__qa */
.art__figs>figcaption{grid-column:1 / -1;font-size:14px;line-height:1.45;color:var(--mute-l);margin-top:4px;padding-left:12px;box-shadow:inset 2px 0 0 var(--brick)}
.art__fig--nat{overflow:visible;border-radius:0}
.art__fig--nat>img{border-radius:var(--r-card)}
/* 08.10 волна 4: схемы «Свет» (site/_tools/blog_schemes) — ![]()