/* Статья /blog/matrica-sudby-i-kvadrat-pifagora (выкат 01.11.2026, ТЗ plans/tz_svedenie_publikaciya_2026_11_01.md) — стили
   демо окна SEO knowledge/design/_work/demo/_src_svedenie/sv.css без правок. Каркас статьи и объекты квадрата — pifagor_article.css.
   Сетка strong-layout: текст в колонке 643, виджет / таблицы / схема — вылет по листу (содержимое 754).
   Токены hv, радиус 6, без теней и градиентов, кегли не меньше 14 (кроме подписей клеток 13). Цвета цифр — палитра клеток квадрата (--cc). */

/* ── случаи сведения: семантические токены сайта ── */
.sv-soglasie{--sv:var(--hv-plus);--sv-bg:var(--hv-plus-soft)}
.sv-rost,.sv-rost_slabo{--sv:var(--hv-gold);--sv-bg:var(--hv-golds)}
.sv-fon{--sv:var(--hv-lilac);--sv-bg:var(--hv-lilacs)}
.sv-zadacha,.sv-zadacha_est{--sv:var(--hv-minus);--sv-bg:var(--hv-minus-soft)}
.sv-tiho{--sv:var(--hv-ink3);--sv-bg:var(--hv-cream2)}

/* ── hero статьи: светлая плашка, текст слева, рисунок справа ── */
.svh{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:center;padding:48px 24px 40px 20mm;background:var(--hv-plum-100)}
.svh h1{margin:0;font:700 clamp(28px,3vw,34px)/1.12 var(--hv-serif);color:var(--hv-plum);text-wrap:balance}
.svh-lead{margin:16px 0 0;font:400 20px/1.45 var(--hv-sans);color:var(--hv-ink2);text-wrap:balance}
.svh-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:16px 0 0;font:400 14px var(--hv-sans);color:var(--hv-ink2)}
.svh-meta a{color:var(--hv-plum2)}
.svh img{display:block;width:100%;height:auto}

/* ── фото автора: целиком внутри листа, у правого края плашки, низ по низу плашки, голова выходит над плашкой (как на посадочных);
   за край листа картинки не выходят — полвылета через край читалось как ошибка (Роман 31.10) ── */
.hvl .hv-sec.hm{overflow:visible}
#avtor .ml3-who-right{padding-right:300px;min-height:420px}
#avtor .ml3-who-right .hm-who{right:24px;width:250px;z-index:1}

/* ── вылет: блок на всю ширину листа, содержимое 754 ── */
.sv-wide{margin-left:calc(-20mm + 20px);margin-right:calc(-20mm + 20px)}

/* ── виджет ── */
.kb-calc-sec.sv-sec{padding:0}
.sv{padding:48px 20px 40px;background:var(--hv-cream2)}
.sv-in{max-width:754px;margin:0 auto}
/* шапка виджета (заголовок, лид, форма, примеры) — в колонке статьи 643 по центру листа: те же края, что у текста выше;
   панели и таблица качеств ниже — на всю ширину плашки 754 */
.sv-hd,.sv-f,.sv-ex{max-width:643px;margin-left:auto;margin-right:auto}
.sv h2{margin:0;padding:0;text-align:left;font:700 30px/1.15 var(--hv-serif);color:var(--hv-plum);text-wrap:balance}
.sv-lead{margin:8px 0 0;font:400 17px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.sv-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:24px;margin-bottom:8px}
.sv-f input{height:52px;border:1px solid var(--hv-line);border-radius:6px;padding:0 16px;font:600 20px var(--hv-sans);letter-spacing:.04em;color:var(--hv-ink);background:var(--hv-field)}
.sv-f input::placeholder{font-weight:400;color:var(--hv-ink3)}
.sv-f input:focus{outline:2px solid var(--hv-plum2);outline-offset:1px}
.sv-f button{height:52px;padding:0 24px;border:0;border-radius:6px;background:var(--hv-plum2);color:var(--hv-field);font:600 17px var(--hv-sans);cursor:pointer}
.sv-f button:hover{background:var(--hv-plum3)}
.sv-err{grid-column:1/-1;font:400 14px var(--hv-sans);color:var(--hv-oct-red)}
.sv-ex{margin-top:0;margin-bottom:0;font:400 14px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.sv-ex a{color:var(--hv-plum2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.sv-res{margin-top:32px}
.sv-tag{margin:0 0 12px;font:600 14px var(--hv-sans);color:var(--hv-gold)}
.sv-r-wrap.fresh .sv-pass{animation:sv-in .3s ease-out}
@keyframes sv-in{0%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sv-r-wrap.fresh .sv-pass{animation:none}}

/* паспорт даты: квадрат и матрица рядом, равные панели */
.sv-pass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.sv-panel{padding:16px;border-radius:6px;background:var(--hv-field)}
.sv-panel h3{margin:0 0 12px;font:700 20px/1.2 var(--hv-serif);color:var(--hv-plum)}
.sv-panel h3 small{display:block;margin-top:2px;font:400 14px var(--hv-sans);color:var(--hv-ink2)}
.sv-sq{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sv-c{display:flex;flex-direction:column;justify-content:space-between;min-height:84px;padding:8px 10px;border-radius:6px;background:var(--sv-bg,var(--hv-paper));border:1px solid var(--hv-line);cursor:pointer}
.sv-c b{font:700 22px/1.05 var(--hv-serif);color:var(--cc);letter-spacing:.02em;word-break:break-all}
.sv-c.e b{color:var(--hv-ink3);font-weight:400}
.sv-c i{font:400 13px/1.2 var(--hv-sans);font-style:normal;color:var(--hv-ink2)}
.sv-c.hl,.sv-c:hover{border-color:var(--sv,var(--hv-ink3))}
.sv-mx{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sv-p{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:6px 8px 6px 6px;border-radius:6px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.sv-p img{width:36px;height:60px;border-radius:4px;object-fit:cover}
.sv-p-n{display:block;font:400 14px/1.2 var(--hv-sans);color:var(--hv-ink2)}
.sv-p b{display:block;font:700 17px/1.25 var(--hv-serif);color:var(--hv-plum)}
.sv-p em{display:block;margin-top:2px;font:600 14px/1.3 var(--hv-sans);font-style:normal;color:var(--hv-plus)}
.sv-p em.sv-mute{font-weight:400;color:var(--hv-ink3)}
.sv-p.off{opacity:.6}

/* итог одной строкой */
.sv-sum{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:12px 0;border-top:1px solid var(--hv-line);border-bottom:1px solid var(--hv-line)}
.sv-ch{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--hv-sans);color:var(--hv-ink);white-space:nowrap}
.sv-ch::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sv)}
.sv-ch b{font:700 20px/1 var(--hv-serif);color:var(--sv)}

/* таблица качеств: группы по случаям, ровные колонки */
.sv-g{margin-top:24px}
.sv-g-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px}
.sv-g-h b{font:700 20px/1.2 var(--hv-serif);color:var(--sv)}
.sv-g-h span{font:400 15px/1.4 var(--hv-sans);color:var(--hv-ink2)}
.sv-row{border-radius:6px;background:var(--hv-field);margin-top:6px}
.sv-row>summary{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr) 20px;gap:12px;align-items:center;padding:8px 12px 8px 8px;cursor:pointer;list-style:none}
.sv-row>summary::-webkit-details-marker{display:none}
.sv-row>summary img{width:44px;height:44px;object-fit:contain}
.sv-row-n b{display:block;font:700 17px/1.2 var(--hv-serif);color:var(--hv-plum)}
.sv-row-n small{display:block;font:400 14px/1.3 var(--hv-sans);color:var(--hv-ink2)}
.sv-row-v{font:600 15px/1.3 var(--hv-sans);color:var(--hv-ink)}
.sv-row-v small{display:block;font:400 13px/1.2 var(--hv-sans);color:var(--hv-ink3)}
.sv-row-v.sq{font:700 20px/1.1 var(--hv-serif);color:var(--cc);letter-spacing:.02em}
.sv-row-v.sq.e{font:400 15px var(--hv-sans);color:var(--hv-ink3)}
.sv-row>summary::after{content:"+";font:400 22px/1 var(--hv-sans);color:var(--hv-ink3);text-align:center}
.sv-row[open]>summary::after{content:"−"}
.sv-row.hl{outline:2px solid var(--sv);outline-offset:-2px}
.sv-row-b{padding:0 16px 16px 64px}
.sv-row-t{margin:0;max-width:36em;font:400 16px/1.6 var(--hv-sans);color:var(--hv-ink2)}
.sv-vote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font:400 14px var(--hv-sans);color:var(--hv-ink2)}
.sv-vote button{font:600 14px var(--hv-sans);color:var(--hv-plum2);background:var(--hv-paper);border:1px solid var(--hv-line);border-radius:6px;padding:6px 12px;cursor:pointer}
.sv-vote button:hover{border-color:var(--hv-plum2)}
.sv-vote button.on{background:var(--hv-plum2);border-color:var(--hv-plum2);color:var(--hv-field)}
.sv-thx{flex-basis:100%;font-style:normal;color:var(--hv-ink3)}
.sv-calm{max-width:643px;margin:24px auto 0;font:400 15px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.sv-calm b{font-weight:600;color:var(--hv-ink)}
.sv-l-ln{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;background:var(--hv-plum-100);font:600 13px/1.1 var(--hv-sans);color:var(--hv-plum2);text-align:center}

/* текстовые строки и кнопки — по колонке статьи 643, как шапка виджета; панели, группы и строки качеств — на всю плашку */
.sv-go{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:643px;margin:32px auto 0}
.sv-go span{flex-basis:100%;font:400 15px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.sv-go a{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:6px;font:600 16px var(--hv-sans);text-decoration:none}
.sv-go .sv-go-kv{background:var(--hv-plum2);color:var(--hv-field)}
.sv-go .sv-go-mx{border:1px solid var(--hv-plum2);color:var(--hv-plum2);background:var(--hv-field)}

/* ── схема «одна дата, две арифметики» ── */
.sv-fig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:8px calc(-20mm + 20px) 32px;padding:24px 20px;background:var(--hv-cream2)}
.sv-fig-d{grid-column:1/-1;padding-left:calc(20mm - 40px);font:700 28px/1 var(--hv-serif);letter-spacing:.04em;color:var(--hv-plum)}
.sv-fig-d small{display:block;margin-top:6px;font:400 15px var(--hv-sans);letter-spacing:0;color:var(--hv-ink2)}
.sv-fig-b{padding:16px;border-radius:6px;background:var(--hv-field)}
.sv-fig-b h4{margin:0 0 12px;font:700 17px/1.3 var(--hv-serif);color:var(--hv-plum)}
.sv-fig-b p{margin:12px 0 0;font:400 15px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.sv-fig-sq{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;max-width:228px;margin:0 auto}
.sv-fig-sq span{display:grid;place-items:center;aspect-ratio:1;border-radius:4px;border:1px solid var(--hv-line);font:700 18px/1 var(--hv-serif);color:var(--cc)}
.sv-fig-sq span.e{color:var(--hv-ink3);font-weight:400}
.sv-fig-sq span.on{background:var(--hv-golds);border-color:var(--hv-gold)}
.sv-fig-b{display:flex;flex-direction:column}
.sv-fig-b p{margin-top:auto!important;padding-top:12px}
.sv-fig-mx{display:grid;grid-template-columns:128px minmax(0,1fr);gap:20px;align-items:center;min-height:228px;width:100%;max-width:300px;margin:0 auto}
.sv-fig-mx img{width:128px;height:222px;border-radius:6px;object-fit:cover;box-shadow:0 6px 18px rgba(76,33,104,.18)}
.sv-fig-mx small{display:block;font:600 12px var(--hv-sans);color:var(--hv-gold)}
.sv-fig-mx b{display:block;font:800 56px/1 var(--hv-serif);color:var(--hv-gold);margin:4px 0}
.sv-fig-mx span{display:block;font:700 19px/1.2 var(--hv-serif);color:var(--hv-plum)}
.sv-fig-mx code{display:block;margin-top:8px;font:600 13px var(--hv-sans);color:var(--hv-ink3)}

/* ── полосы долей ── */
.sv-bars{display:grid;gap:8px;margin:8px 0 24px}
.sv-bar{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;font:600 14px var(--hv-sans);color:var(--hv-ink)}
.sv-bar-t{display:grid;gap:2px}
.sv-bar-r{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:8px;align-items:center}
.sv-bar-r span{font:400 14px var(--hv-sans);color:var(--hv-ink2);white-space:nowrap}
.sv-bar-r b{display:block;height:12px;border-radius:6px;background:var(--cc)}
.sv-bar-r.f b{opacity:.45}
.sv-bars-k{margin:4px 0 0;font:400 14px/1.5 var(--hv-sans);color:var(--hv-ink2)}

/* ── таблицы статьи: вылет по листу, тонкие линии, первая колонка — заголовок строки ── */
.kb-tbl.sv-t{clear:both;margin:24px calc(-20mm + 20px);overflow-x:auto}
.kb-tbl.sv-t table{width:100%;border-collapse:collapse;background:transparent;border-radius:0;font:400 15px/1.5 var(--hv-sans)}
.kb-tbl.sv-t th{padding:12px 16px;text-align:left;font:600 14px/1.3 var(--hv-sans);color:var(--hv-ink2);background:transparent;border-bottom:2px solid var(--hv-plum2)}
.kb-tbl.sv-t td{padding:12px 16px;vertical-align:top;color:var(--hv-ink2);border-top:0;border-bottom:1px solid var(--hv-line)}
.kb-tbl.sv-t td:first-child{font-weight:600;color:var(--hv-ink)}
.kb-tbl.sv-t tbody tr:hover td{background:var(--hv-paper)}
.sv-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--sv);white-space:nowrap}
.sv-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sv)}
.sv-tq{display:inline-flex;align-items:center;gap:10px}
.sv-tq img{width:36px;height:36px;object-fit:contain;flex:none}
.sv-tq img.card{width:28px;height:46px;border-radius:3px;object-fit:cover}

/* ── иллюстрации в тексте: справа от абзаца ── */
.sv-ill{float:right;width:240px;margin:4px calc(-20mm + 20px) 16px 24px}
.sv-ill img{display:block;width:100%;height:auto}
.sv-ill figcaption{margin-top:6px;font:400 14px/1.4 var(--hv-sans);color:var(--hv-ink2)}
.hv-sec::after{content:"";display:block;clear:both}

/* ── схема весов позиций на октограмме ── */
.sv-wt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:24px;margin-bottom:32px;padding:32px 20px;background:var(--hv-cream2)}
.sv-wt-svg svg{display:block;width:100%;height:auto}
.sv-wt .wt-n{font:800 32px/1 var(--hv-serif);fill:var(--hv-field)}
.sv-wt .wt-l{font:600 22px var(--hv-sans);fill:var(--hv-ink)}
.sv-wt .wt-s{font:600 20px var(--hv-sans);fill:var(--hv-gold)}
.sv-wt .wt-l.red{fill:var(--hv-ink)}.sv-wt .wt-s.red{fill:var(--hv-oct-red)}
.sv-wt-r{align-self:center}
.sv-wt .sv-wt-h{margin:0 0 8px;line-height:1.4;font:600 14px var(--hv-sans);color:var(--hv-gold)}
.sv-wt ul{display:grid;margin:0;padding:0;list-style:none}
.sv-wt li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:12px;padding:10px 0;margin:0;border-bottom:1px solid var(--hv-line)}
.sv-wt li::before,.sv-wt li::marker{content:none;display:none}
.sv-wt li>i{grid-row:1/3;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--hv-plum2)}
.sv-wt li.wt-c>i{background:var(--hv-goldb);box-shadow:0 0 0 2px var(--hv-gold-deco) inset}
.sv-wt li.wt-d>i,.sv-wt li.wt-f>i{background:var(--hv-paper);box-shadow:0 0 0 3px var(--hv-oct-red) inset}
.sv-wt .wt-h{display:flex;align-items:baseline;gap:8px}
.sv-wt .wt-h b{font:700 17px/1.3 var(--hv-serif);color:var(--hv-plum)}
.sv-wt-w{font:600 14px var(--hv-sans);color:var(--hv-gold)}
.sv-wt-w.z{color:var(--hv-oct-red)}
.sv-wt .wt-b{font:400 15px/1.45 var(--hv-sans);color:var(--hv-ink2)}
.sv-wt-a{font-weight:600;color:var(--hv-ink)}
.sv-wt .sv-wt-k{margin:16px 0 0;font:400 15px/1.45 var(--hv-sans);color:var(--hv-ink2)}
.sv-wt-k b{color:var(--hv-ink)}

/* ── подвал статьи: вопросы, автор, «дальше по той же дате» (стили посадочной hm-* из hv.css) ── */
.sv-foot h2{margin:0;padding:0;text-align:left;font:700 30px/1.15 var(--hv-serif);color:var(--hv-plum)}
#faq.sv-foot{border-top:1px solid var(--hv-gold-deco)}
.sv-foot .hm-faq-q{font:600 17px/1.4 var(--hv-sans);color:var(--hv-ink)}
.sv-foot .hm-faq-a{font:400 16px/1.6 var(--hv-sans)}
.sv-avtor-t{margin:0;font:700 24px/1.2 var(--hv-serif)}
.sv-avtor-t a{color:var(--hv-ink);text-decoration:none}
#avtor .hm-plate p.ml3-mt{font:400 16px/1.6 var(--hv-sans);color:var(--hv-ink2)}
#avtor .hm-plate p.hm-kick{margin:0 0 8px;font:600 14px var(--hv-sans);color:var(--hv-gold)}
#avtor .hm-plate p.sv-avtor-t{font:700 26px/1.2 var(--hv-serif)}
.sv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px calc(-20mm + 20px) 0}
.sv-cards a{display:block;border-radius:6px;background:var(--hv-field);border:1px solid var(--hv-line);overflow:hidden;text-decoration:none;color:var(--hv-ink)}
.sv-cards a:hover{border-color:var(--hv-plum2)}
.sv-cards img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 12%;background:var(--hv-cream2)}
.sv-cards b{display:block;padding:12px 16px 0;font:700 17px/1.3 var(--hv-serif);color:var(--hv-plum)}
.sv-cards span{display:block;padding:4px 16px 16px;font:400 14px/1.45 var(--hv-sans);color:var(--hv-ink2)}
.sv-links-h{margin:32px 0 8px;font:600 14px var(--hv-sans);color:var(--hv-gold)}
.sv-links{columns:2;column-gap:32px;margin:0;padding:0;list-style:none}
.sv-links li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--hv-line)}
.sv-links li::before{content:none}
.sv-links a{font:400 16px/1.4 var(--hv-sans);color:var(--hv-plum2);text-decoration:none}
.sv-links a:hover{text-decoration:underline}

@media (max-width:820px){
  .svh img{width:100%}
  #avtor .ml3-who-right{padding-right:20px}
  #avtor .ml3-who-right .hm-who{right:-8px;width:170px}
  .svh{grid-template-columns:minmax(0,1fr) 140px;padding:32px 20px 28px;gap:12px}
  .svh img{width:100%;margin:0}
  .sv-wide,.kb-tbl.sv-t,.sv-fig{margin-left:0;margin-right:0}
  .svh{padding:32px 20px 28px}
  .sv-ill{margin-right:0}
}
@media (max-width:600px){
  .svh{grid-template-columns:minmax(0,1fr)}
  .svh img{width:100%;max-width:340px;margin:0 auto}
  .svh-lead{font-size:17px}
  .sv{padding:32px 16px}
  .sv h2{font-size:26px}
  .sv-f{grid-template-columns:1fr}
  .sv-pass{grid-template-columns:1fr}
  .sv-row>summary{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:4px}
  .sv-row>summary img{width:40px;height:40px;grid-row:1/3}
  .sv-row-n{grid-column:2}
  .sv-row-v{grid-column:2;font-size:14px}
  .sv-row-v.sq{display:none}
  .sv-row>summary::after{grid-column:3;grid-row:1/3}
  .sv-row-b{padding:0 12px 14px 12px}
  .sv-fig{grid-template-columns:1fr;padding:20px 16px}
  .sv-fig-d{padding-left:0}
  .sv-wt{grid-template-columns:1fr;gap:16px;padding:20px 16px}
  .sv-cards{margin-left:0;margin-right:0;grid-template-columns:1fr 1fr}
  .sv-wt-svg{max-width:360px;width:100%;margin:0 auto}
  .sv-bar{grid-template-columns:96px 1fr}
  .sv-bar-r{grid-template-columns:minmax(0,1fr) 126px}
  .sv-ill{float:none;width:auto;max-width:300px;margin:8px auto 16px}
  .sv-cards{grid-template-columns:1fr}
  .sv-links{columns:1}
  .sv-foot h2{font-size:26px}
  .kb-tbl.sv-t{overflow:visible}.kb-tbl.sv-t table,.kb-tbl.sv-t tbody,.kb-tbl.sv-t tr,.kb-tbl.sv-t td{display:block;width:auto}
  .kb-tbl.sv-t thead{display:none}
  .kb-tbl.sv-t tr{margin:0 0 8px;padding:12px;border-radius:6px;background:var(--hv-field)}
  .kb-tbl.sv-t td{border:0;padding:4px 0}
  .kb-tbl.sv-t td::before{content:attr(data-label);display:block;font:400 13px/1.3 var(--hv-sans);color:var(--hv-ink3)}
}

/* ── вариант hero A: полоса во всю ширину окна, содержимое по оси листа, рисунок выходит вниз на лист ── */
.svA{padding-top:0}
.svb{position:relative;z-index:0;background:var(--hv-plum-100);padding:24px 0 72px;margin-bottom:-40px}
.svb-in{width:210mm;max-width:100%;margin:0 auto;padding:0 20px}
.svb-crumbs{margin-bottom:24px;text-align:left}
.svb-crumbs .ds-breadcrumbs{justify-content:flex-start}
.svb-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:end}
.svb h1{margin:0;font:700 clamp(30px,3.4vw,40px)/1.1 var(--hv-serif);color:var(--hv-plum);text-wrap:balance}
.svb-grid>img{display:block;width:480px;max-width:none;height:auto;margin:0 -200px -72px 0;position:relative;z-index:2}
.svA>.hv-pg{position:relative;z-index:1}
/* ── вариант hero B: журнальная обложка на всю ширину листа ── */
.svc{background:var(--hv-cream)}
.svc-fig{background:var(--hv-plum-100);padding:32px 20mm 24px}
.svc-fig img{display:block;width:100%;max-width:640px;height:auto;margin:-8px auto -4px}
.svc-t{padding:32px 20mm 32px}
.svc-kick{margin:0 0 12px;font:600 14px var(--hv-sans);color:var(--hv-gold)}
.svc h1{margin:0;font:700 clamp(30px,3.4vw,40px)/1.1 var(--hv-serif);color:var(--hv-plum);text-wrap:balance}
@media (max-width:820px){
  .svb-in{padding:0 20px}
  .svb-grid{grid-template-columns:minmax(0,1fr) 180px;gap:16px}
  .svb-grid>img{width:220px;margin:0 -16px -72px -24px}
  .svc-fig{padding:24px 20px 16px}.svc-t{padding:24px 20px}
}
@media (max-width:600px){
  .svb{padding-bottom:56px}
  .svb-grid{grid-template-columns:1fr}
  .svb-grid>img{width:100%;max-width:340px;margin:8px auto -56px}
}

/* С-3 «два примера» (31.10): рисунок на ширину листа, подписи под каждой сценой */
.sv-pr{margin:20px 0 24px}
.sv-pr img{display:block;width:100%;height:auto}
.sv-pr figcaption{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;font-size:14px;line-height:1.45;color:var(--hv-ink2);text-align:center}
.sv-pr figcaption b{color:var(--hv-plum)}
@media (max-width:820px){.sv-pr figcaption{grid-template-columns:1fr;text-align:left}}