/* ==========================================================================
   Maple Barrel - направление А «Газета». Единая система для всех экранов.
   1. Токены: цвет, типографическая шкала, ВЕРТИКАЛЬНАЯ ШКАЛА ОТСТУПОВ.
   2. Ритм задаётся утилитой .flow (> * + * margin-top), а не точечно.
   ========================================================================== */
:root{
  /* цвет */
  --bg:#f2efe7; --paper:#fbfaf6; --paper-2:#f7f5ee;
  --ink:#17201d; --ink-2:#39423e; --muted:#66706b; --muted-2:#8a908a;
  --line:#cfcfc6; --line-soft:#e2e1d9; --line-strong:#17201d;
  --red:#e53e3e; --red-dark:#c53030; --green:#173930; --green-2:#234b40;
  --mint:#dfe8e0; --sand:#eadcae; --sand-2:#f2e9cf;
  --mint-soft:#eef2ec; --line-green:#b7c7bb; /* витрина гайдов: мята, разбавленная бумагой, и зеленоватая рамка */

  /* шрифты */
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* типографическая шкала */
  --fs-display:clamp(34px,4.4vw,54px);
  --fs-h1:clamp(28px,3.4vw,42px);
  --fs-h2:clamp(23px,2.5vw,32px);
  --fs-h3:clamp(19px,1.9vw,24px);
  --fs-h4:18px; --fs-h5:16px;
  --fs-body:18px; --fs-sm:14px; --fs-xs:12px; --fs-micro:10px;
  --lh-tight:1.08; --lh-head:1.18; --lh-text:1.62;

  /* ВЕРТИКАЛЬНАЯ ШКАЛА - единственный источник отступов */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ритм по умолчанию внутри .flow */
  --flow:var(--sp-4);

  --max:1320px; --measure:44rem; --gap:var(--sp-6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:var(--fs-sm);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-.012em;overflow-wrap:anywhere}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3);line-height:var(--lh-head)}
h4{font-size:var(--fs-h4);line-height:var(--lh-head)}
p{margin:0}
ul{margin:0;padding-left:var(--sp-5)}
button,input,select{font:inherit;color:inherit}

/* --- ритм ---------------------------------------------------------------- */
.flow > * + *{margin-top:var(--flow)}
.flow-tight{--flow:var(--sp-3)}
.flow-mid{--flow:var(--sp-5)}
.flow-loose{--flow:var(--sp-6)}
.wrap{width:min(calc(100% - var(--sp-6)),var(--max));margin:0 auto;min-width:0}
/* узкие экраны: ни один потомок сетки или флекса не шире своей колонки */
.grid-2>*,.grid-3>*,.grid-4>*,.front>*,.pinned>*,.child-grid>*,.layout>*,
.guide-layout>*,.newsletter>*,.footer-grid>*,.now-list>*,.previous-list>*,.task-grid>*,.cat-list>*,
.tag-cloud>*,.month-grid>*,.contact-grid>*,.numbers>*,.figures>*,.day-stats>*,.top-col>*,.rows a>*,.now-item>*,
.previous-item>*,.tl-item>*,.story-hero,.article-head,.page-head,.section-head>*,.issue-line>*{min-width:0}
p,li,td,th,dd,dt,small,.dek,.lede{overflow-wrap:anywhere}
table{max-width:100%}
.table-wrap{overflow-x:auto;max-width:100%}
.section{margin-top:var(--sp-8)}
.block{margin-top:var(--sp-7)}

/* --- микротипографика ---------------------------------------------------- */
.kicker{display:block;font-size:var(--fs-micro);font-weight:800;letter-spacing:.13em;
        text-transform:uppercase;color:var(--red)}
.kicker.neutral{color:var(--muted)}
.caps{font-size:var(--fs-micro);font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);color:var(--muted);
      font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.chip{display:inline-block;background:var(--mint);color:var(--green);padding:5px 9px;
      font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.chip.plain{background:var(--sand-2);color:#6f5f33}
.dek{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink-2)}

/* --- утилити-строка ------------------------------------------------------ */
.utility{background:var(--green);color:#f4f2ea}
.utility-row{height:38px;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.utility-row::-webkit-scrollbar{display:none}
.ucell{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);
       border-right:1px solid rgba(255,255,255,.12);white-space:nowrap}
.ucell:first-child{padding-left:0}
.uname{color:#a8bab4;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.uval{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.uup{color:#8fd1a3;font-size:9px}.udn{color:#ef9b95;font-size:9px}
.uspace{flex:1 0 var(--sp-5)}

/* --- шапка --------------------------------------------------------------- */
.header{background:var(--paper);border-bottom:1px solid var(--line)}
.header-main{min-height:104px;display:grid;grid-template-columns:1fr auto 1fr;
             gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0}
.date{font-size:var(--fs-micro);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.date strong{display:block;color:var(--ink);font-size:12px}
.brand{display:flex;align-items:center;justify-content:center}
.brand-name{font-weight:900;font-size:clamp(26px,3vw,38px);letter-spacing:-.055em;line-height:1}
.brand-name span{color:var(--red)}
.support{justify-self:end;border:1px solid var(--ink);padding:11px 15px;font-size:9px;
         font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.nav{border-top:1px solid var(--line-soft)}
.nav-row{height:48px;display:flex;align-items:center;justify-content:center;gap:var(--sp-6);
         overflow-x:auto;scrollbar-width:none}
.nav-row::-webkit-scrollbar{display:none}
.nav-row a{flex:0 0 auto;color:var(--muted);font-size:var(--fs-micro);font-weight:800;
           letter-spacing:.1em;text-transform:uppercase}
.nav-row a.on{color:var(--ink)}
.nav-row a.on::after{content:"";display:block;width:16px;height:2px;background:var(--red);margin:7px auto -9px}
.nav-row a.hot{color:var(--red)}
.nav-row a.search svg{width:14px;height:14px;vertical-align:-3px;margin-right:6px}
@media(max-width:760px){.nav-row a:not(.m){display:none}
  .nav-row{justify-content:space-between;gap:5px}.nav-row a{font-size:8px;letter-spacing:.03em;white-space:nowrap}
  .nav-row a.search span{display:none}.nav-row a.search svg{width:16px;height:16px;margin:0}}

/* --- заголовки страниц и секций ----------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;padding:var(--sp-4) 0 0;
        color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Ритм шапки сжат на ступень шкалы (итерация по замечаниям редактора 2026-09-18):
   сверху sp-5 вместо sp-6, лид до линии - sp-5, метастрока - sp-4. */
.page-head{padding-top:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:3px double var(--line-strong)}
.page-head h1{margin-top:var(--sp-3);font-size:var(--fs-display)}
.page-head .lede{margin-top:var(--sp-4);max-width:52ch;font-family:var(--serif);font-size:17px;
                 line-height:1.55;color:var(--ink-2)}
.page-head .meta{margin-top:var(--sp-4)}
/* Две строки сетки: заголовок и боковая подпись в одной (подпись выровнена
   по низу заголовка), лид с метастрокой - во всю ширину под ними. */
.page-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
                 gap:0 var(--sp-7);align-items:end}
.page-head.split > *{min-width:0}
.page-head.split .head-rest{grid-column:1/-1}
.page-head.split .side{justify-self:end;text-align:right;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.section-head.bare{display:block}
.section-head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--sp-7);
              align-items:end;padding-bottom:var(--sp-4);border-bottom:2px solid var(--line-strong)}
.section-head h2{margin-top:var(--sp-3)}
.section-head .note{justify-self:end;max-width:56ch;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.section-body{margin-top:var(--sp-6)}

/* --- панели и карточки --------------------------------------------------- */
.panel{background:var(--paper);border:1px solid var(--line)}
.panel-pad{padding:var(--sp-6)}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2) var(--sp-4);
            padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.panel-head h3{font-size:var(--fs-h4)}
.panel-head .side{color:var(--muted);font-size:var(--fs-micro);font-weight:700;
                  letter-spacing:.08em;text-transform:uppercase}

/* оформление публикаций без фотографии */
.visual{background:var(--green);color:#cfe0d7;display:flex;flex-direction:column;justify-content:flex-end;
        padding:var(--sp-5);position:relative;overflow:hidden;aspect-ratio:16/9;max-height:min(40vh,420px);width:100%}
.visual::before{content:"";position:absolute;inset:0;
        background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px)}
.visual b{position:relative;font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:700;
          color:#e8efe9;letter-spacing:-.02em;line-height:1.05}
.visual i{position:relative;margin-top:var(--sp-3);font-style:normal;font-size:9px;font-weight:800;
          letter-spacing:.12em;text-transform:uppercase;color:#96b0a6}
.visual.sand{background:var(--sand);color:#6f5f33}
.visual.sand b{color:#42381c}.visual.sand i{color:#8a7748}
.visual.flat{aspect-ratio:auto;min-height:130px}
.visual-note{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.5}

/* строчный список публикаций */
.rows{border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:64px minmax(0,1fr) 170px;gap:var(--sp-4);
        align-items:baseline;padding:var(--sp-4) var(--sp-1);border-bottom:1px solid var(--line-soft)}
.rows a:hover{background:var(--paper-2)}
.rows time{color:var(--red);font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}
.rows h3{font-family:var(--serif);font-size:var(--fs-h5);font-weight:600;line-height:1.3}
.rows .row-side{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;
                color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.rows .row-side .type{color:var(--red)}
.rows .row-dek{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-xs);line-height:1.5}

/* карточки-сетки */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.card .card-body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.card .card-body > * + *{margin-top:var(--sp-3)}
.card .meta{margin-top:auto;padding-top:var(--sp-5)}
.card h3 a{display:block}

/* пагинация, кнопки */
.pager{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-7);flex-wrap:wrap}
.pager a,.pager span{border:1px solid var(--line);padding:11px 16px;font-size:var(--fs-micro);
        font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pager .on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.filter{border:1px solid var(--line);background:transparent;padding:9px 14px;font-family:var(--sans);
        font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
        color:var(--muted);cursor:pointer}
.filter.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* теги-пилюли */
.pills{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pill{border:1px solid var(--line);padding:8px 13px;font-size:var(--fs-micro);font-weight:800;
      letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pill b{margin-left:var(--sp-2);color:var(--ink);font-variant-numeric:tabular-nums}
.pill.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* пустые состояния */
.empty{background:var(--paper);border:1px dashed var(--line);padding:var(--sp-7) var(--sp-6);text-align:center}
.empty h3{margin-top:var(--sp-3)}
.empty p{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-sm);line-height:1.6;
         max-width:56ch;margin-left:auto;margin-right:auto}

/* рассылка */
.newsletter{margin-top:var(--sp-9);background:var(--paper);border:1px solid var(--line-strong);
            padding:var(--sp-7);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
            gap:var(--sp-7);align-items:center}
.newsletter h2{margin-top:var(--sp-3)}
.newsletter p{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.subscribe{display:flex;gap:var(--sp-2)}
.subscribe{flex-wrap:wrap}
.subscribe input{flex:1 1 180px;min-width:0;border:1px solid var(--line);border-radius:0;background:#fff;padding:14px}
.subscribe button{border:0;background:var(--red);color:#fff;padding:14px 22px;font-size:var(--fs-micro);
                  font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}

/* подвал */
.footer{margin-top:var(--sp-9);background:var(--green);color:#dbe5df;padding:var(--sp-8) 0 var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-7)}
.footer-brand{color:#f0f4f1;font-family:var(--serif);font-size:24px;font-weight:800;letter-spacing:-.04em}
.footer-brand span{color:#ff6058}
.footer-copy{margin-top:var(--sp-3);max-width:44ch;color:#95a8a1;font-size:var(--fs-xs);line-height:1.7}
.footer-label{margin-bottom:var(--sp-3);color:#77918a;font-size:8px;font-weight:800;
              letter-spacing:.11em;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-xs)}
.footer-bottom{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);
               display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
               color:#8ba39b;font-size:var(--fs-micro)}

/* --- адаптив ------------------------------------------------------------- */
@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--fs-body:17px}
  .section{margin-top:var(--sp-7)}
  .header-main{min-height:auto;grid-template-columns:auto 1fr;gap:var(--sp-3)}
  .date,.support{display:none}
  .brand{justify-content:flex-start}
  .nav-row{justify-content:flex-start;gap:var(--sp-5)}
  .page-head.split,.section-head{grid-template-columns:1fr;gap:var(--sp-4)}
  .page-head.split .side,.section-head .note{justify-self:start;text-align:left}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .rows a{grid-template-columns:56px minmax(0,1fr);row-gap:var(--sp-2)}
  .rows .row-side{grid-column:2;justify-content:flex-start}
  .newsletter{padding:var(--sp-5)}
  /* подвал на мобильном складывается компактно; десктоп не меняется */
  .footer{padding:var(--sp-6) 0 var(--sp-5)}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .footer-copy{display:none}
  .footer-label{margin-bottom:var(--sp-2)}
  .footer-links{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
  .footer-bottom{margin-top:var(--sp-5);padding-top:var(--sp-3)}
}
a.card.guide{color:#e6ede9}
a.card.guide:hover{border-color:var(--red)}
/* --- акцент и интеракция (правило прода: всё кликабельное - акцент или акцент на hover) ---
   Иерархия красного: читательские ссылки в тексте - тёмный акцент с подчёркиванием (важнее всего);
   интерактивные строки, карточки, пилюли, меню - акцент на hover; кикеры - декоративный акцент,
   без подчёркивания; неинтерактивные метки и чипы красного не носят. */
.body a,.guide-body a,.text-page a,.source-box a,.dek a,.faq a,.lede a{color:var(--red-dark);
  border-bottom:1px solid currentColor;text-decoration:none}
.body a:hover,.guide-body a:hover,.text-page a:hover,.source-box a:hover,.dek a:hover,.faq a:hover,.lede a:hover{color:var(--red)}
.go{color:var(--red-dark);border-bottom-color:currentColor}
.go:hover{color:var(--red)}
.rows a:hover h3,.rows a:hover .row-dek,.now-item:hover h3,.previous-item:hover h3,.top-item:hover h3,.tl-item:hover h4,
.card:hover h3,.tile:hover h3,.child:hover h3,.month:hover h3,.task:hover h3,.cat:hover h3,
.contact:hover h3,.story-entry:hover h2,.timeline-compact a:hover h3,.lead h2 a:hover,.day-cell:hover b,
.guide-link:hover h3,.related:hover h3{color:var(--red)}
.card:hover,.tile:hover,.child:hover,.month:hover,.task:hover,.cat:hover,.contact:hover,.related:hover{border-color:var(--red)}
.nav-row a:hover,.crumbs a:hover,.footer a:hover,.tag-col a:hover,.pill:hover,.filter:hover,.pager a:hover,
.month-nav a:hover,.day-nav a:hover,.cat-strip a:hover,.toc a:hover,.toc-rail a:hover,.support:hover,.brand:hover .brand-name{color:var(--red)}
.pill:hover,.filter:hover,.pager a:hover,.month-nav a:hover,.day-nav a:hover,.cat-strip a:hover,.support:hover{border-color:var(--red)}
.nav-row a.on:hover{color:var(--red)}
.pill.on:hover,.filter.on:hover,.pager .on:hover,.month-nav a.on:hover,.cat-strip a.on:hover{color:var(--paper);border-color:var(--ink)}
.search-form button:hover,.subscribe button:hover{background:var(--red-dark)}
.subscribe button{background:var(--red-dark)}
.footer a:hover{color:#ff7a73}
.kicker.muted{color:var(--muted)}

.svc-data{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-micro);font-weight:700;
          letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.svc-data b{color:var(--ink);font-weight:800}
/* --- одна панель данных, три тона ---------------------------------------- */
.svc-panel{margin-top:var(--sp-5);max-width:74ch;background:var(--paper);border:1px solid var(--line);
           border-left:4px solid var(--muted-2);padding:var(--sp-4) var(--sp-5)}
.svc-panel .svc-panel-label{display:block;font-size:var(--fs-micro);font-weight:800;letter-spacing:.13em;
           text-transform:uppercase;color:var(--muted)}
.svc-panel p{margin-top:var(--sp-2);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.svc-panel.is-fresh{background:var(--mint);border-color:#b8ccc0;border-left-color:var(--green)}
.svc-panel.is-fresh .svc-panel-label{color:var(--green)}
.svc-panel.is-fresh p{color:var(--green-2)}
.svc-panel.is-stale{background:var(--sand-2);border-color:#ddcd9a;border-left-color:#a98b3c}
.svc-panel.is-stale .svc-panel-label{color:#6f5f33}
.svc-panel.is-stale p{color:#584a25}
.svc-panel.is-expired{border-color:#e0b6b3;border-left-color:var(--red)}
.svc-panel.is-expired .svc-panel-label{color:var(--red-dark)}

/* --- ряд шеринга: подпись, серые кнопки, глифы ---------------------------- */
/* Ряд строит и lib.share_row, и JS тренажёров (render/services.py) по тем же
   классам, поэтому иконки навешаны через ::before по классу кнопки: у рядов,
   собранных скриптом, они появляются сами. Красный - только на hover. */
.share-block{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.share-label{color:var(--muted);font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
             letter-spacing:.13em;text-transform:uppercase}
.share-block .quiz-share{margin-top:var(--sp-3);padding-top:0;border-top:0}
.quiz-share{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5);
            padding-top:var(--sp-5);border-top:1px solid var(--line)}
.share-btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line);
           padding:10px 14px;font-size:var(--fs-xs);font-weight:700;letter-spacing:0;
           text-transform:none;color:var(--muted);background:transparent;
           cursor:pointer;font-family:var(--sans)}
.share-btn:hover{border-color:var(--red);color:var(--red)}
/* внутри текста публикации и гайда ссылка красная с подчёркиванием - кнопка шеринга нет */
.body a.share-btn,.guide-body a.share-btn,.text-page a.share-btn{color:var(--muted);
           border:1px solid var(--line)}
.body a.share-btn:hover,.guide-body a.share-btn:hover,.text-page a.share-btn:hover{
           color:var(--red);border-color:var(--red)}
.share-fb::before,.share-wa::before,.share-im::before,.share-tg::before,.share-cp::before{
           content:"";flex:0 0 auto;width:13px;height:13px;
           background-repeat:no-repeat;background-position:center;background-size:contain}
.share-fb::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366706b'%3E%3Cpath d='M13.5 21v-7.5h2.5l.4-2.9h-2.9V8.7c0-.8.2-1.4 1.4-1.4h1.6V4.7c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2h-2.5v2.9h2.5V21h3.2z'/%3E%3C/svg%3E")}
.share-wa::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366706b'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}
.share-im::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366706b'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E")}
.share-tg::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366706b'%3E%3Cpath d='M2 21l20-9L2 3v7l14 2-14 2v7z'/%3E%3C/svg%3E")}
.share-cp::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366706b'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E")}
.share-fb:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M13.5 21v-7.5h2.5l.4-2.9h-2.9V8.7c0-.8.2-1.4 1.4-1.4h1.6V4.7c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2h-2.5v2.9h2.5V21h3.2z'/%3E%3C/svg%3E")}
.share-wa:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}
.share-im:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E")}
.share-tg:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M2 21l20-9L2 3v7l14 2-14 2v7z'/%3E%3C/svg%3E")}
.share-cp:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E")}
.quiz-again{margin-top:var(--sp-4)}

/* --- небольшая кнопка-действие (карточка доната, сервисы) ----------------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line);
     background:transparent;padding:11px 16px;font-family:var(--sans);font-size:var(--fs-micro);
     font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.btn:hover{border-color:var(--red);color:var(--red)}
.body a.btn,.guide-body a.btn,.text-page a.btn{color:var(--muted);border:1px solid var(--line)}
.body a.btn:hover,.guide-body a.btn:hover,.text-page a.btn:hover{color:var(--red);border-color:var(--red)}

/* ==========================================================================
   Оболочка прода поверх дизайн-системы: рассылка, баннер согласия, шеринг,
   примитивы сервисов. Всё на токенах, углы прямые, теней нет.
   ========================================================================== */

/* --- форма рассылки: крючки прод-JS (#mb-sub, #mb-sub-m) ----------------- */
.subscribe input[name="website"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fsub-m{margin-top:var(--sp-3);min-height:18px;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.fsub-m.ok{color:var(--green)}
.fsub-m.err{color:var(--red-dark)}
.subscribe button[disabled]{opacity:.55;cursor:default}

/* --- баннер согласия на статистику (разметка и логика прода) ------------- */
.cb{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);z-index:500;
    max-width:560px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);
    padding:var(--sp-4) var(--sp-5);color:var(--ink);font-size:var(--fs-sm);line-height:1.55}
.cb-t{font-family:var(--serif);font-size:var(--fs-h5);font-weight:700}
.cb-x{margin:var(--sp-2) 0 var(--sp-4);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.6}
.cb-x a{color:var(--red-dark);border-bottom:1px solid currentColor}
.cb-x a:hover{color:var(--red)}
.cb-b{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.cb-b button{border:1px solid var(--line);background:transparent;padding:11px 18px;
             font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
             letter-spacing:.09em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.cb-y{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cb-y:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--paper)}
.cb-n:hover{border-color:var(--red);color:var(--red)}
@media(max-width:760px){.cb-b button{flex:1 1 auto}}

/* --- уведомление о копировании ссылки (прод-JS share-cp) ----------------- */
.share-toast{position:fixed;left:50%;bottom:var(--sp-6);z-index:600;
             transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--paper);
             padding:11px 18px;font-size:var(--fs-xs);font-weight:700;
             opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.share-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- поиск в шапке: крючок прод-страницы /search/ ------------------------ */
.nav-row a.search{display:inline-flex;align-items:center}


/* ── кликабельные шапки разделов ────────────────────── */
/* Классы общие (lib.section_head), но render/css.py модулю не принадлежит,
   поэтому правила живут здесь: модуль home склеивается в тот же файл. */
.section-aside{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3)}
.section-more{align-self:flex-end;white-space:nowrap;color:var(--muted);font-size:var(--fs-micro);
              font-weight:800;letter-spacing:.09em;text-transform:uppercase;
              border-bottom:1px solid var(--line-strong);padding-bottom:3px}
.section-more:hover{color:var(--red);border-bottom-color:var(--red)}
.section-head h2 a:hover,.lead h1 a:hover{color:var(--red)}

/* ── главная: поток последних публикаций ────────────── */
/* Первая грамматика главной: лид слева, список «Что важно» справа. Колонки
   одной высоты (stretch), карточка лида - флекс-колонка с метастрокой,
   прижатой к низу: дек занимает место, дыры под текстом не остаётся. */
.front{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:var(--gap);
       align-items:stretch;margin-top:var(--sp-6)}
.lead{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.lead .visual{aspect-ratio:auto;min-height:clamp(220px,32vh,360px);max-height:none;width:100%;flex:1 1 auto;overflow:hidden}
.lead .lead-photo{min-height:clamp(220px,32vh,360px);flex:1 1 auto;overflow:hidden}
.lead .lead-photo img,.lead .visual img{width:100%;height:100%;object-fit:cover;display:block}
.lead .lead-copy{padding:var(--sp-6);flex:0 0 auto;display:flex;flex-direction:column}
.lead h1{margin-top:var(--sp-3);font-size:clamp(26px,3vw,38px);line-height:1.07}
.lead .dek{margin-top:var(--sp-4);font-size:18px}
.lead .meta{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line-soft)}
.top-col{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.top-item{padding:var(--sp-5);border-bottom:1px solid var(--line-soft);flex:1}
.top-item:last-child{border-bottom:0}
.top-item h3{font-size:var(--fs-h4);line-height:1.25}
.top-item .meta{margin-top:var(--sp-4)}

/* Плитки «Последние обновления» - часть первого ряда: мятный поднос с
   плашкой «Сейчас» слева и шестью карточками-плитками по три в ряд, с
   зазорами. В макете home.html блок .now был строками в две колонки с
   общими линиями; редактор 2026-09-19 попросил блоки, поэтому плитка -
   карточка того же каркаса, что .card: бумага, рамка, красное время сверху,
   заголовок, «издание · тег» у нижнего края. Ховер заголовка - общий css.py
   (.now-item:hover h3), рамка краснеет как у .card. */
.now{margin-top:var(--gap);display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-4);
     padding:var(--sp-4);border:1px solid var(--line);background:var(--mint)}
.now-label{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-2)}
.now-label h2{margin-top:var(--sp-3);font-size:22px}
.now-label p{margin-top:var(--sp-4);color:var(--green-2);font-size:var(--fs-xs);line-height:1.6}
.now-label h2 a:hover{color:var(--red)}
.now-label .section-more{display:inline-block;margin-top:var(--sp-4)}
.now-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.now-item{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);
          background:var(--paper);border:1px solid var(--line)}
.now-item:hover{border-color:var(--red)}
.now-item time{color:var(--red);font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}
.now-item h3{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.3}
.now-item small{display:block;margin-top:auto;padding-top:var(--sp-2);color:var(--muted);font-size:9px;
                font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ── вторая грамматика: витрина одинаковых карточек ── */
/* Сетка у всех витрин одна (.grid-3: две колонки на 1000, одна на 760),
   карточка одна (lib.showcase_card). Своих раскладок у отдельных витрин
   нет - это и есть консистентность, о которой договорились. */
.showcase-card .card-photo{aspect-ratio:16/9;max-height:none}
.showcase-card h3{font-size:var(--fs-h4);line-height:1.25}
/* Витрина гайдов: тот же каркас и сетка, но с зелёным подтоном, чтобы
   справочник читался отдельно от новостных витрин (просьба редактора
   2026-09-19). Аккуратно: мятный фон, разбавленный бумагой, зеленоватая
   рамка, кикер и мета в тёмно-зелёном; ховер общий (.card:hover). */
.showcase-card.is-guide{background:var(--mint-soft);border-color:var(--line-green)}
.showcase-card.is-guide .kicker,.showcase-card.is-guide .meta{color:var(--green-2)}

/* фотографии постов в витринах: то, чего в макетах не было */
.card-photo{overflow:hidden;background:var(--line-soft);aspect-ratio:16/9;max-height:min(40vh,420px)}
.lead-photo{overflow:hidden;background:var(--line-soft);width:100%}
.card-photo img,.lead-photo img{width:100%;height:100%;object-fit:cover}

/* ── лента последних публикаций на главной ──────────── */
/* Разделитель дня - тонкая строка с датой: лента идёт сплошным потоком,
   границу списка даёт сам разделитель, поэтому у .rows верхней линии нет. */
.feed .rows{border-top:0}
.feed-day{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
          gap:var(--sp-2) var(--sp-4);padding:var(--sp-5) var(--sp-1) var(--sp-3);
          border-bottom:1px solid var(--line-strong);color:var(--muted);font-size:var(--fs-micro);
          font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.feed-day:first-child{padding-top:0}
.feed-day a:hover{color:var(--red)}
.feed-all{display:block;padding:var(--sp-4) var(--sp-1);border-bottom:1px solid var(--line-soft);
          color:var(--red);font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;
          text-transform:uppercase}
.feed-all:hover{background:var(--paper-2)}

/* ── страница дня ───────────────────────────────────── */
.day-nav{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7)}
.day-nav a{border:1px solid var(--line);padding:12px 16px;font-size:var(--fs-micro);font-weight:800;
           letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── раздел «Материалы» ─────────────────────────────── */
.mat-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mat-hero .card-photo{aspect-ratio:auto;max-height:none;min-height:300px;height:100%}
.mat-hero .card-body{padding:var(--sp-6) var(--sp-7)}

/* ── шапки справочников: тег, статистика, архив ─────── */
/* Ритм тот же, что у .page-head после сжатия шапок 2026-09-18: сверху sp-5. */
.ref-head{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--sp-7);align-items:start;
          padding-top:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:3px double var(--line-strong)}
.ref-head > *{min-width:0}
.ref-head h1{margin-top:var(--sp-3);font-size:var(--fs-display)}
.ref-head .lede{margin-top:var(--sp-4);max-width:56ch;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-2)}
.ref-card{background:var(--paper);border:1px solid var(--line);padding:var(--sp-5)}
.ref-card dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:var(--sp-3) var(--sp-4);font-size:var(--fs-xs)}
.ref-card dt{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:var(--fs-micro)}
.ref-card dd{margin:0;font-family:var(--serif);font-size:16px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* примечание в шапке справочной страницы: им пользуется страница источника */
.ref-head .src-note{margin-top:var(--sp-4);max-width:56ch;font-family:var(--sans);font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}

/* ── каталог тегов ──────────────────────────────────── */
.tag-cloud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.tag-col h3{padding-bottom:var(--sp-3);border-bottom:2px solid var(--line-strong)}
.tag-col a{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
           border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.tag-col a b{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700}

/* ── архив: месяцы и календарь дней ─────────────────── */
.month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.month{border:1px solid var(--line);background:var(--paper);padding:var(--sp-5)}
.month.on{background:var(--mint);border-color:var(--green)}
.month h3{font-size:var(--fs-h5)}
/* пометку «сейчас» отдаёт разметка, а не content: в CSS - стилевой файл
   отдаётся без своего charset, кириллице в нём делать нечего */
.month h3 i{margin-left:var(--sp-2);color:var(--green);font-family:var(--sans);font-style:normal;
            font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.month b{display:block;margin-top:var(--sp-3);font-family:var(--serif);font-size:26px}
.month span{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-micro);
            font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-2)}
.day-cell{border:1px solid var(--line);background:var(--paper);padding:var(--sp-3);min-height:82px;
          display:flex;flex-direction:column;justify-content:space-between}
.day-cell b{font-family:var(--serif);font-size:17px}
.day-cell span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.day-cell.today{background:var(--mint);border-color:var(--green)}
.day-cell.future{background:transparent;border-style:dashed;color:var(--muted-2);opacity:.5}

/* ── поиск: форма и выдача прод-JS (крючки .srch-*) ─── */
.search-form{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6)}
.search-form input{flex:1 1 180px;min-width:0;border:1px solid var(--line);border-radius:0;background:#fff;
                   padding:16px;font-size:16px}
.search-form input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.srch-hint{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.srch-res{list-style:none;margin:var(--sp-6) 0 0;padding:0;border-top:1px solid var(--line)}
.srch-res:empty{margin:0;border-top:0}
.srch-res li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);
             padding:var(--sp-4) var(--sp-1);border-bottom:1px solid var(--line-soft)}
.srch-res a{font-family:var(--serif);font-size:var(--fs-h5);font-weight:600;line-height:1.3}
.srch-res a:hover{color:var(--red)}
.srch-badge{flex:0 0 auto;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.srch-badge.guide{color:var(--red)}
.srch-d{flex:1 0 100%;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.srch-empty{display:block;padding:var(--sp-6) var(--sp-1);color:var(--muted);font-size:var(--fs-sm);border-bottom:0}
mark{background:var(--sand-2);color:inherit;padding:0 2px}

/* ── адаптив: брейкпоинты только 1000 и 760 ─────────── */
@media(max-width:1000px){
  .front{grid-template-columns:1fr}
  .now-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mat-hero{grid-template-columns:1fr}
  .mat-hero .card-photo{aspect-ratio:16/9;height:auto;min-height:0;max-height:min(40vh,420px)}
  .ref-head{grid-template-columns:1fr}
  .tag-cloud{grid-template-columns:1fr 1fr}
  .month-grid{grid-template-columns:1fr 1fr}
  .day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .section-aside{align-items:flex-start}
  .section-more{align-self:flex-start}
  .lead .lead-photo,.lead .visual{height:auto;aspect-ratio:16/9;max-height:min(40vh,420px)}
  .now{grid-template-columns:1fr}
  .now-list{grid-template-columns:1fr}
  .tag-cloud{grid-template-columns:1fr}
  .month-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .month{padding:var(--sp-4)}
  .month b{font-size:22px}
  .day-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── ПУБЛИКАЦИИ (перенос CSS_POST из design-preview/_pages_a.py) ───────── */
/* Шапка публикации - газетная, на всю ширину полосы; читаемость держит не ширина
   колонки, а кегль: заголовок длиннее 90 знаков автоматически понижается на ступень,
   длиннее 130 - на две. Решение James, итерация 8. */
.article-head{max-width:none;padding-top:var(--sp-6);padding-bottom:var(--sp-5);
              border-bottom:3px double var(--line-strong)}
.article-head h1{margin-top:var(--sp-3);font-size:var(--fs-display);max-width:26ch;
                 text-wrap:balance;overflow-wrap:anywhere}
.article-head h1.long{font-size:clamp(28px,3.3vw,40px);max-width:34ch}
.article-head h1.xlong{font-size:clamp(25px,2.6vw,32px);max-width:42ch}
.article-head .dek{margin-top:var(--sp-4);font-size:19px;max-width:var(--measure)}
.article-head .metabar{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
                       display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;color:var(--muted);
                       font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.src-badge{background:var(--ink);color:var(--paper);padding:5px 9px;font-size:9px;font-weight:800;
           letter-spacing:.09em;text-transform:uppercase}
.hero{margin-top:var(--sp-6)}
.hero img{display:block;width:100%;aspect-ratio:21/9;max-height:min(40vh,420px);
          object-fit:cover;background:var(--paper-2)}
.layout{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(240px,1fr);gap:var(--sp-8);
        margin-top:var(--sp-7);align-items:start}
/* Публикация без сюжета, гайда и соседей: рейки нет, полоса не разъезжается. */
.layout.solo{grid-template-columns:minmax(0,var(--measure))}
.body{font-family:var(--serif);font-size:var(--fs-body);line-height:var(--lh-text);color:#1f2725}
.body > * + *{margin-top:var(--sp-5)}
.body h2{font-size:var(--fs-h3);margin-top:var(--sp-7)}
.body ul{padding-left:var(--sp-5)}
.body ul li + li{margin-top:var(--sp-2)}
.body .key{padding:var(--sp-5);background:var(--mint);border-left:4px solid var(--green)}
.body .key h2{margin-top:0;font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
              letter-spacing:.11em;text-transform:uppercase;color:var(--green)}
.body .key p{margin-top:var(--sp-4);font-size:16px;line-height:1.6}
.body .key ul{margin-top:var(--sp-4);font-size:16px;line-height:1.6}
.body .key li + li{margin-top:var(--sp-2)}
.body .pull{padding-left:var(--sp-5);border-left:4px solid var(--red);font-size:23px;line-height:1.35;font-weight:700}
.source-box{padding:var(--sp-5);background:var(--paper);border:1px solid var(--line);font-family:var(--sans);
            font-size:var(--fs-xs);line-height:1.7;color:var(--muted)}
.source-box a{border-bottom:1px solid currentColor}
.rail{position:sticky;top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-6)}
.rail .card-body > * + *{margin-top:var(--sp-3)}
.timeline{border-top:1px solid var(--line-soft);margin-top:var(--sp-4)}
.tl-item{display:grid;grid-template-columns:56px 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;
         border-bottom:1px solid var(--line-soft)}
.tl-item time{color:var(--muted);font-size:var(--fs-micro);font-weight:800;font-variant-numeric:tabular-nums}
.tl-item h4{font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.3}
.rail .guide{background:var(--green);border-color:var(--green);color:#e6ede9}
.rail .guide h3{color:#fff}.rail .guide .dek{color:#b1c6bd}
.rail .guide .kicker{color:#8fb3a6}
.rail .guide .go{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.go{display:inline-block;font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;border-bottom:1px solid var(--red);padding-bottom:2px}
.updates{border-left:3px solid var(--red);padding-left:var(--sp-5)}
/* Такт хронологии - ссылка целиком, но красным в ней светится только время
   и заголовок под курсором: сплошной красный абзац читать невозможно. */
.updates .u{display:block;padding-bottom:var(--sp-5);color:#1f2725}
.updates a.u{color:#1f2725}
.updates a.u h3{color:var(--ink)}
.updates .u + .u{border-top:1px solid var(--line-soft);padding-top:var(--sp-5)}
.updates time{display:block;color:var(--red);font-family:var(--sans);font-size:var(--fs-micro);
              font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.updates h3{margin-top:var(--sp-2);font-size:var(--fs-h4)}
.updates p{margin-top:var(--sp-3)}
.updates a.u:hover h3{color:var(--red)}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);
         background:var(--paper);margin-top:var(--sp-6)}
.figures.n1{grid-template-columns:minmax(0,1fr)}
.figures.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.figures.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.figures div{padding:var(--sp-5);border-right:1px solid var(--line-soft)}
.figures div:last-child{border-right:0}
.figures b{display:block;font-family:var(--serif);font-size:26px;font-weight:700;
           overflow-wrap:anywhere}
/* Значение факта - живой текст редактора («45% против 31%»), а не всегда число:
   длинному даём ступень мельче, иначе плитка распадается на три строки. */
.figures b.long{font-size:20px;line-height:1.25}
.figures span{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-xs);line-height:1.45}
.data-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--fs-sm)}
.data-table th,.data-table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);text-align:left}
.data-table th{font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.data-table td b{font-variant-numeric:tabular-nums}
/* .toc и .toc ol - в render/guide.py, одна редакция на файл */
@media(max-width:1000px){.layout{grid-template-columns:1fr;gap:var(--sp-6)}.rail{position:static}
  .figures{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .hero{margin-top:var(--sp-5)}
  .hero img{aspect-ratio:16/9;max-height:200px}
  .article-head{padding-top:var(--sp-5)}
  .article-head .dek{font-size:17px}
  .layout{margin-top:var(--sp-6)}
  .rail{gap:var(--sp-4)}
  .rail .card-body{padding:var(--sp-4)}
  .rail .guide .dek,.rail .card .timeline .tl-item:nth-child(n+3){display:none}
  .rail h3{font-size:var(--fs-h4)}
  .figures b{font-size:22px}.figures div{padding:var(--sp-4)}
  .body .pull{font-size:20px}
  .updates{padding-left:var(--sp-4);border-left-width:2px}
  .updates .u{padding-bottom:var(--sp-4)}
  .updates .u + .u{padding-top:var(--sp-4)}
  .updates h3{font-size:var(--fs-h5)}
  .body .key{padding:var(--sp-4)}
  .body .key ul,.body .key p{font-size:15px}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── СЮЖЕТЫ: каталог ─────────────────────────────────────────────────── */
.st-grid{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.st-grid>*{min-width:0}
/* В секции «Архив» отступ уже задан .section-body, второй не нужен. */
.section-body>.st-grid{margin-top:0}
.st-card{border-top:4px solid var(--story,var(--line-strong))}
.st-lines{border-top:1px solid var(--line-soft);padding:var(--sp-4) var(--sp-5);
          display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-3)}
.st-lines b{color:var(--muted);font-size:var(--fs-micro);font-weight:800;
            letter-spacing:.09em;text-transform:uppercase}
.st-lines a{font-size:var(--fs-xs);font-weight:700;border-bottom:1px solid var(--line)}
.st-lines a:hover{color:var(--red);border-color:var(--red)}
.st-lines .sep{color:var(--muted-2);font-size:var(--fs-xs)}

/* ── СЮЖЕТ: шапка ────────────────────────────────────────────────────── */
/* Отступы шапки задаёт общий .page-head: свои здесь не дублируем, у модуля
   остаётся только цветная линия сюжета сверху. */
.st-page .page-head{border-top:6px solid var(--story,var(--line-strong))}
.st-page .page-head .lede{max-width:64ch}
.st-parent{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs)}
.st-parent a{border-bottom:1px solid var(--line)}
.st-parent a:hover{color:var(--red);border-color:var(--red)}

/* ── СЮЖЕТ: гайд под шапкой ──────────────────────────────────────────── */
/* Карточка занимает первую колонку и не растягивается на всю ширину:
   строка лида в 1300px нечитаема. */
.pinned{margin-top:var(--gap);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap)}
.st-guide{background:var(--green);border-color:var(--green)}
.st-guide .kicker{color:#8fb3a6}
.st-guide h3{color:#fbfaf6}
.st-guide .dek{color:#b1c6bd}
.st-guide .card-body .go{margin-top:auto;padding-top:var(--sp-5);color:#fbfaf6;
                         font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.st-guide:hover{border-color:var(--green)}
.st-guide:hover h3{color:#fbfaf6}
.st-guide:hover .go{color:var(--sand)}

/* ── СЮЖЕТ: редакторская шапка (summary реестра) ─────────────────────── */
.st-sum{--flow:var(--sp-4);max-width:var(--measure);font-family:var(--serif);
        font-size:17px;line-height:1.7;color:var(--ink-2)}
.st-sum h3{margin-top:var(--sp-6);font-family:var(--sans);font-size:var(--fs-h5);color:var(--ink)}
.st-sum a{border-bottom:1px solid currentColor}
.st-sum a:hover{color:var(--red)}

/* ── СЮЖЕТ: хронология ───────────────────────────────────────────────── */
.chrono{border-left:3px solid var(--story,var(--line-strong));padding-left:var(--sp-6);margin-top:var(--sp-6)}
.node{position:relative;display:block;padding-bottom:var(--sp-6)}
.node+.node{border-top:1px solid var(--line-soft);padding-top:var(--sp-6)}
.node::before{content:"";position:absolute;left:calc(-1 * var(--sp-6) - 9px);top:6px;width:11px;height:11px;
              background:var(--story,var(--line-strong));border:2px solid var(--bg);border-radius:50%}
.node time{display:block;color:var(--red);font-size:var(--fs-micro);font-weight:800;
           letter-spacing:.09em;text-transform:uppercase}
.node h3{margin-top:var(--sp-2);font-size:var(--fs-h3)}
.node:hover h3{color:var(--red)}
/* Лид узла держим в ширине текста: в макете подводки редакторские и короткие,
   здесь идёт настоящий excerpt поста, на 1300px он был бы нечитаем. */
.node p{margin-top:var(--sp-3);max-width:var(--measure);font-family:var(--serif);
        font-size:16px;line-height:1.6;color:var(--ink-2)}
.node .sources{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.node .sources span{border:1px solid var(--line);padding:5px 9px;font-size:9px;font-weight:800;
                    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Отступ живёт на порции, а не на контейнере: пока все порции спрятаны,
   между хронологией и кнопкой не должно оставаться пустого поля. */
.st-batch{margin-top:var(--sp-7)}
.st-batch[hidden]{display:none}
.st-more{margin-top:var(--sp-6)}
.st-more[hidden]{display:none}
.timeline-compact{border-top:1px solid var(--line)}
.timeline-compact a{display:grid;grid-template-columns:106px minmax(0,1fr);gap:var(--sp-4);
                    padding:var(--sp-4) 0;border-bottom:1px solid var(--line-soft)}
.timeline-compact a>*{min-width:0}
.timeline-compact a:hover{background:var(--paper-2)}
.timeline-compact time{color:var(--muted);font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}
.timeline-compact h3{font-family:var(--serif);font-size:var(--fs-h5);font-weight:600;line-height:1.3}

/* ── СЮЖЕТ: связанные сюжеты и связки ────────────────────────────────── */
.child-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.child{display:block;background:var(--paper);border:1px solid var(--line);
       border-top:4px solid var(--story,var(--line-strong));padding:var(--sp-5)}
.child h3{margin-top:var(--sp-3);font-size:var(--fs-h4)}
.child p{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.month-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.month-nav a{border:1px solid var(--line);padding:9px 13px;font-size:var(--fs-micro);font-weight:800;
             letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

@media(max-width:1000px){
  .st-grid,.child-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pinned{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .st-grid,.child-grid{grid-template-columns:minmax(0,1fr)}
  .chrono{padding-left:var(--sp-5)}
  .node::before{left:calc(-1 * var(--sp-5) - 8px)}
  .timeline-compact a{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-2)}
}

/* --- страница гайда ------------------------------------------------------ */
.guide-layout{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(240px,1fr);
              gap:var(--sp-8);margin-top:var(--sp-7);align-items:start}
.guide-layout .rail{position:sticky;top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.guide-body{font-family:var(--serif);font-size:var(--fs-body);line-height:var(--lh-text);color:var(--ink)}
.guide-body > * + *{margin-top:var(--sp-5)}
.guide-body h2{font-family:var(--serif);font-size:var(--fs-h3);margin-top:var(--sp-8);
               padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.guide-body h3{font-size:var(--fs-h4);margin-top:var(--sp-6)}
.guide-body h4{font-size:var(--fs-h5);margin-top:var(--sp-5)}
.guide-body h2,.guide-body h3{scroll-margin-top:var(--sp-5)}
.guide-body ul,.guide-body ol{font-size:16px;line-height:1.65}
.guide-body li + li{margin-top:var(--sp-2)}
.guide-body table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--fs-sm)}
.guide-body th,.guide-body td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);text-align:left}
.guide-body th{font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;
               text-transform:uppercase;color:var(--muted)}
.guide-body blockquote{margin:0;padding:var(--sp-4) var(--sp-5);background:var(--mint);
                       border-left:4px solid var(--green);font-size:16px}
.guide-body hr{border:0;border-top:1px solid var(--line-soft);margin:var(--sp-6) 0}
.guide-body strong{font-weight:700}
.guide-body img{margin-top:var(--sp-5)}
.guide-md{margin-top:var(--sp-6);color:var(--muted);font-family:var(--sans);font-size:var(--fs-xs)}
.guide-state{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-5);
             padding:var(--sp-4) var(--sp-5);background:var(--mint);color:var(--green);font-size:var(--fs-xs)}
.guide-tags{margin-top:var(--sp-5)}
/* ссылка на категорию внутри кикера: акцент положен кликабельному */
.page-head .kicker a{color:inherit;border-bottom:1px solid currentColor}
.page-head .kicker a:hover{color:var(--red)}
/* .toc - одна редакция на файл: оглавление гайда и оглавление лонгрида */
.toc{background:var(--paper);border:1px solid var(--line);padding:var(--sp-5)}
.toc ol{margin:var(--sp-4) 0 0;padding-left:var(--sp-5);font-family:var(--sans);
        font-size:var(--fs-sm);line-height:1.9}
.toc a{color:var(--red-dark)}
.toc-rail{background:var(--paper);border:1px solid var(--line);padding:var(--sp-5);
          max-height:calc(100vh - var(--sp-8));overflow:auto}
.toc-rail ol{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);font-family:var(--sans);
             font-size:var(--fs-xs);line-height:1.5}
.toc-rail li + li{margin-top:var(--sp-2)}
.toc-rail a{color:var(--ink-2)}
.toc-rail li.on > a{color:var(--red);font-weight:700}
.faq{margin-top:var(--sp-6)}
.faq details{background:var(--paper);border:1px solid var(--line);padding:var(--sp-4) var(--sp-5)}
.faq details + details{margin-top:var(--sp-3)}
.faq summary{font-family:var(--serif);font-size:var(--fs-h5);font-weight:700;cursor:pointer;line-height:1.35}
.faq p{margin-top:var(--sp-3);font-family:var(--serif);font-size:16px;line-height:1.65;color:var(--ink-2)}

/* --- хаб и категория ----------------------------------------------------- */
.hub-block{margin-top:var(--sp-8)}
/* ряд чипов под шапкой: липкий на десктопе (шапка сайта не липкая, top:0),
   на мобильном - горизонтальная прокрутка */
.ghub-nav{position:sticky;top:0;z-index:20;margin-top:var(--sp-6);
          padding:var(--sp-2) 0;background:var(--bg);border-top:1px solid var(--line);
          border-bottom:1px solid var(--line)}
.ghub-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);min-width:0}
.ghub-chips a{border:1px solid var(--line);background:var(--paper);padding:6px 10px;
              font-size:var(--fs-micro);font-weight:800;letter-spacing:.07em;
              text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ghub-chips a:hover{border-color:var(--red);color:var(--red)}
.ghub-chips a b{margin-left:var(--sp-2);color:var(--ink);font-variant-numeric:tabular-nums}
.ghub-chips a:hover b{color:var(--red)}
/* сетка категорий - главный вход хаба */
.ghub-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.ghub-cat{background:var(--paper);border:1px solid var(--line);padding:var(--sp-5);min-width:0}
.ghub-cat:hover{border-color:var(--red)}
.ghub-cat h3{font-size:var(--fs-h4);line-height:1.25}
.ghub-cat h3 a{color:var(--ink)}
.ghub-cat:hover h3 a{color:var(--red)}
.ghub-count{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-micro);
            font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ghub-cat p{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.ghub-cat ul{margin:var(--sp-4) 0 0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.ghub-cat li{padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft)}
.ghub-cat li a{color:var(--ink-2);font-family:var(--serif);font-size:var(--fs-h5);
               line-height:1.3;overflow-wrap:anywhere}
.ghub-cat li a:hover{color:var(--red)}
/* гайд дня: крупная карточка и три строки рядом */
.ghub-day{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-6);
          align-items:start}
.ghub-day > *{min-width:0}
.ghub-day-more .rows a{grid-template-columns:96px minmax(0,1fr)}
.ghub-day-more .rows .row-side{grid-column:2;justify-content:flex-start}
.ghub-top{display:block;margin-top:var(--sp-2);color:var(--red-dark);font-size:var(--fs-xs)}
.ghub-top:hover{color:var(--red)}
.path{background:var(--green);color:#e6ede9;padding:var(--sp-7);display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp-7);align-items:center}
.path > *{min-width:0}
.path h2{color:#fff}
.path p{margin-top:var(--sp-4);color:#b8cbc3;font-size:var(--fs-sm);line-height:1.7}
.path ol{margin:0;padding-left:var(--sp-5);color:#dbe5df;font-size:var(--fs-sm);line-height:2.1}
.path ol a{color:#f0f4f1;border-bottom:1px solid rgba(255,255,255,.45)}
.path ol a:hover{color:#fff}
.search-box{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.search-box input{flex:1 1 180px;min-width:0;border:1px solid var(--line);border-radius:0;
                  background:#fff;padding:14px}
.search-box button{border:0;background:var(--ink);color:var(--paper);padding:14px 22px;
                   font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;
                   text-transform:uppercase;cursor:pointer}
.search-box button:hover{background:var(--red-dark)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.tiles > *{min-width:0}
.tile{background:var(--paper);border:1px solid var(--line);padding:var(--sp-5);
      display:flex;flex-direction:column;gap:var(--sp-3)}
.tile h3{font-size:var(--fs-h5);line-height:1.3}
.tile p{color:var(--muted);font-size:var(--fs-xs);line-height:1.5;display:-webkit-box;
        -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile small{margin-top:auto;color:var(--muted-2);font-size:9px;font-weight:800;
            letter-spacing:.08em;text-transform:uppercase}
.cat-strip{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cat-strip a{border:1px solid var(--line);background:var(--paper);padding:9px 13px;
             font-size:var(--fs-micro);font-weight:800;letter-spacing:.07em;
             text-transform:uppercase;color:var(--muted)}
.cat-strip a b{margin-left:var(--sp-2);color:var(--ink);font-variant-numeric:tabular-nums}
.cat-strip a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* полный каталог хаба: все гайды по категориям, только названия и ссылки.
   scroll-margin-top держит заголовок категории ниже липкого ряда чипов:
   ряд в две строки занимает около 80px, запас берём до 120px */
.gall-cat{scroll-margin-top:calc(var(--sp-9) + var(--sp-5))}
.gall-cat + .gall-cat{margin-top:var(--sp-8)}
.gall-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);min-width:0;
        font-size:var(--fs-h3);padding-bottom:var(--sp-3);border-bottom:2px solid var(--line-strong)}
.gall-h a{color:var(--ink)}
.gall-h a:hover{color:var(--red)}
.gall-h span{color:var(--muted);font-family:var(--sans);font-size:var(--fs-micro);
             font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gall-list{margin-top:var(--sp-4);columns:2;column-gap:var(--sp-7)}
.gall-list a{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;
             padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft);
             color:var(--ink-2);font-family:var(--serif);font-size:var(--fs-h5);
             line-height:1.35;overflow-wrap:anywhere}
.gall-list a:hover{color:var(--red)}

/* --- страница персоны ---------------------------------------------------- */
/* .ref-head / .ref-card живут в render/home.py - одна редакция на весь
   стилевой файл (справочные страницы: тег, персона, источник, архив). */
.head-btn{display:inline-block;margin-top:var(--sp-4);border:1px solid var(--ink);padding:11px 15px;
          font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;
          text-transform:uppercase;color:var(--ink)}
.head-btn:hover{border-color:var(--red);color:var(--red)}
.block-tight{margin-top:var(--sp-5)}
.block-tight .section-body{margin-top:var(--sp-4)}
.person-side{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.person-photo{width:100%;aspect-ratio:1;object-fit:cover;background:var(--mint)}

/* --- адаптив ------------------------------------------------------------- */
@media(max-width:1000px){
  .guide-layout{grid-template-columns:1fr;gap:var(--sp-6)}
  .guide-layout .rail{position:static}
  /* рейка ушла под тело: её оглавление дублировало бы то, что уже стоит
     в начале статьи. Плашки рейки остаются. Вернуть - max-height:none. */
  .toc-rail{display:none}
  .ghub-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ghub-day{grid-template-columns:1fr;gap:var(--sp-5)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path{grid-template-columns:1fr}
  .person-side{flex-direction:row;align-items:flex-start}
  .person-photo{width:200px;flex:0 0 200px}
  .person-side .ref-card{flex:1 1 auto}
}
@media(max-width:760px){
  .ghub-cats,.tiles{grid-template-columns:1fr}
  .gall-list{columns:1}
  /* на мобильном ряд чипов не липкий: он занял бы треть экрана - вместо
     этого прокручивается вбок */
  .ghub-nav{position:static}
  .ghub-chips{flex-wrap:nowrap;overflow-x:auto}
  .ghub-chips a{flex:0 0 auto}
  .gall-cat{scroll-margin-top:var(--sp-4)}
  .path{padding:var(--sp-5)}
  .guide-state{font-size:var(--fs-micro)}
  .person-side{flex-direction:column}
  .person-photo{width:160px;flex:0 0 auto}
}

/* ── раздел «Сервисы» ─────────────────────────────────────────────────── */
.service-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(300px,4fr);gap:var(--sp-7);align-items:end;
              padding-top:var(--sp-6);padding-bottom:var(--sp-5);border-bottom:3px double var(--line-strong)}
.service-head h1{margin-top:var(--sp-3);font-size:var(--fs-display)}
.service-head .lede{margin-top:var(--sp-4);max-width:52ch;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-2)}
.big-value{background:var(--paper);border:1px solid var(--line);padding:var(--sp-6);text-align:right;
           min-height:196px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.big-value b{display:block;font-family:var(--serif);font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em}
.big-value b.word{font-size:44px}
.big-value span{display:block;margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-micro);
                font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.big-value .delta{margin-top:var(--sp-3);font-size:var(--fs-sm);font-weight:700}
.big-value .bv-sub{margin-top:var(--sp-3);max-width:32ch;color:var(--muted);font-size:var(--fs-xs);
                   line-height:1.55;text-align:right}
.big-value.wide{align-items:flex-start;text-align:left;min-height:0}
.big-value.wide .bv-sub{text-align:left;max-width:56ch}
/* Страницы с действием: на узком экране боковое значение не должно отодвигать
   кнопку или форму за первый экран - оно сжимается в одну строку. */
.big-value.is-compact{min-height:150px}
.delta.up{color:#2f7a4d}.delta.down{color:var(--red)}
.svc-wrap{display:block}
.svc-copy{margin-top:var(--sp-5);max-width:62ch;font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.svc-copy + .svc-copy{margin-top:var(--sp-4)}
.svc-list{margin-top:var(--sp-4);padding-left:var(--sp-5);max-width:62ch}
.svc-list li{margin-top:var(--sp-3);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
.svc-caption{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.svc-foot,.svc-footer{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);
          max-width:70ch;color:var(--muted);font-size:var(--fs-xs);line-height:1.7}
.svc-note{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.svc-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.svc-pills a{border:1px solid var(--line);padding:9px 13px;font-size:var(--fs-micro);font-weight:800;
             letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svc-pills a:hover{border-color:var(--red);color:var(--red)}
.svc-tiles,.quiz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
.svc-tile,.quiz-stat{border:1px solid var(--line);background:var(--paper);padding:var(--sp-4);min-width:0}
.svc-tile strong,.quiz-stat strong{display:block;font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.05;
                                   font-variant-numeric:tabular-nums}
.svc-tile span,.quiz-stat span{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-micro);
                               font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.quiz-lines{margin:var(--sp-5) 0 0;max-width:74ch}
.quiz-lines div{padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.quiz-lines dt{display:inline;font-weight:800;font-size:var(--fs-sm)}
.quiz-lines dd{display:inline;margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.svc-source{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--muted)}
.svc-source a,.svc-foot a,.svc-footer a,.svc-caption a,.svc-note a,.svc-copy a,.svc-list a,.lede a{
             color:var(--red-dark);border-bottom:1px solid currentColor}
.svc-source a:hover,.svc-foot a:hover,.svc-footer a:hover,.svc-caption a:hover,.svc-note a:hover,
.svc-copy a:hover,.svc-list a:hover{color:var(--red)}

/* ── таблицы ──────────────────────────────────────────────────────────── */
.svc-table-wrap{margin-top:var(--sp-5);overflow-x:auto;max-width:100%;
                border:1px solid var(--line);background:var(--paper)}
.svc-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.svc-table.wide{min-width:620px}
.svc-table .svc-date{white-space:nowrap}
.svc-table th{background:var(--paper-2);color:var(--muted);font-size:var(--fs-micro);font-weight:800;
              letter-spacing:.08em;text-transform:uppercase;text-align:left}
.svc-table th,.svc-table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);
                            vertical-align:top;line-height:1.45}
.svc-table tbody tr:last-child td{border-bottom:0}
.svc-table .svc-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.svc-table tr.svc-total td{font-weight:800;background:var(--paper-2)}
.svc-table td a{color:var(--red-dark);border-bottom:1px solid currentColor}
.svc-table td a:hover{color:var(--red)}
.svc-table td b{font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums}
.svc-table tr.on td{background:var(--mint)}

/* ── точечный график раундов ──────────────────────────────────────────── */
.svc-chart-wrap{margin-top:var(--sp-5);overflow-x:auto;max-width:100%;background:var(--paper);
                border:1px solid var(--line);padding:var(--sp-5)}
.svc-chart{display:block;width:100%;min-width:620px;height:auto}
.svc-gridline{stroke:var(--line-soft);stroke-width:1}
.svc-axis-label{fill:#66706b;font-family:var(--sans);font-size:11px;font-weight:700}
.svc-chart-line{fill:none;stroke:var(--line);stroke-width:1.2}
.k-general{fill:#2f4f7a;background:#2f4f7a}
.k-pnp{fill:#a2483d;background:#a2483d}
.k-program{fill:#5d5380;background:#5d5380}
.k-category{fill:#2f6b4f;background:#2f6b4f}
.svc-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-4);
            color:var(--muted);font-size:var(--fs-xs)}
.svc-legend span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.svc-swatch{width:9px;height:9px;display:inline-block}

/* ── столбиковый график живых данных ──────────────────────────────────── */
.chart{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;text-align:right;
         color:var(--muted);font-size:var(--fs-micro);font-weight:700;font-variant-numeric:tabular-nums}
.chart-plot{position:relative;height:160px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.chart-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0 var(--sp-2)}
.chart-bars i{flex:1;min-width:1px;background:var(--mint);border-top:2px solid var(--green);min-height:2px}
.chart-bars i.last{background:var(--green)}
.chart-avg{position:absolute;left:0;right:0;border-top:1px dashed var(--muted-2)}
.chart-avg span{position:absolute;left:var(--sp-2);top:-16px;color:var(--muted);font-size:9px;font-weight:800;
                letter-spacing:.06em;text-transform:uppercase;background:var(--bg);padding:0 4px}
.chart-last{position:absolute;right:var(--sp-2);transform:translateY(-100%);margin-top:-6px;background:var(--ink);
            color:var(--paper);padding:4px 7px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
            white-space:nowrap}
.chart-x{grid-column:2;display:flex;justify-content:space-between;color:var(--muted);font-size:var(--fs-micro);
         font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chart-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-3);
              color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.chart-legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.chart-legend .up{color:#2f7a4d;font-weight:700}.chart-legend .down{color:var(--red);font-weight:700}

/* ── конвертер валют ──────────────────────────────────────────────────── */
.converter{background:var(--paper);border:1px solid var(--line);padding:var(--sp-6);
           display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:var(--sp-4);align-items:stretch}
.converter .field{display:flex;flex-direction:column;min-width:0}
.converter label{display:block;color:var(--muted);font-size:var(--fs-micro);font-weight:800;
                 letter-spacing:.08em;text-transform:uppercase}
.converter input,.converter select{width:100%;margin-top:var(--sp-2);border:1px solid var(--line);border-radius:0;
                                   background:#fff;padding:13px;font-size:16px;color:var(--ink);min-width:0}
.converter select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317201d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.converter select:focus,.converter input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.converter .swap{width:42px;height:42px;align-self:center;justify-self:center;border:1px solid var(--line);
                 background:var(--paper);border-radius:0;font-size:18px;line-height:1;cursor:pointer;color:var(--muted)}
.converter .swap:hover{border-color:var(--red);color:var(--red)}
.converter .conv-rate{grid-column:1/-1;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-xs)}

/* ── хаб ──────────────────────────────────────────────────────────────── */
.svc-card .card-body > h3{font-size:var(--fs-h4)}
.svc-card-note{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.svc-card .meta{font-variant-numeric:tabular-nums}
.svc-card:hover{border-color:var(--red)}
.svc-card-wide .card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;
                          gap:var(--sp-4) var(--sp-7);align-items:center}
.svc-card-wide .card-body > * + *{margin-top:0}
.svc-card-wide h3{grid-column:1}
.svc-card-wide .svc-card-note{grid-column:1}
.svc-card-wide .meta{grid-column:2;grid-row:1/3;margin-top:0;padding-top:0;justify-self:end}

/* ── тренажёр: статическая разметка и DOM, который строит QUIZ_JS ─────── */
.quiz-launch{margin-top:var(--sp-6);background:var(--paper);border:1px solid var(--line);padding:var(--sp-6)}
.quiz-launch small{display:block;margin-top:var(--sp-4);max-width:62ch;color:var(--muted);
                   font-size:var(--fs-xs);line-height:1.6}
/* Одна строка условий под кнопкой: сколько вопросов, сколько времени, порог. */
.quiz-launch small.quiz-terms{margin-top:var(--sp-3);color:var(--ink-2);font-weight:700}
.quiz-launch .weekly-meta{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
/* Панель свежести под действием: при тоне «свежо» - одной строкой. */
.svc-panel-slim .svc-panel{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4);
                           padding:var(--sp-3) var(--sp-4)}
.svc-panel-slim .svc-panel p{margin-top:0}
.btn-action,.quiz-button.quiz-primary{display:inline-block;border:0;background:var(--ink);color:var(--paper);
            padding:16px 26px;font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
            letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.btn-action:hover,.quiz-button.quiz-primary:hover{background:var(--red-dark);color:var(--paper)}
.quiz-button{font-family:var(--sans);cursor:pointer}
.quiz-button:disabled{cursor:default;color:var(--muted);background:var(--line-soft)}
.quiz-button.quiz-secondary,
.quiz-button.quiz-share-tertiary{display:inline-block;border:1px solid var(--line);background:transparent;
            padding:11px 15px;font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;
            text-transform:uppercase;color:var(--muted)}
.quiz-button.quiz-secondary:hover,
.quiz-button.quiz-share-tertiary:hover{border-color:var(--red);color:var(--red)}
.quiz-note{margin-top:var(--sp-5);max-width:66ch;padding-left:var(--sp-4);border-left:3px solid var(--line-strong);
           color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
.quiz-intro{margin-top:var(--sp-4);max-width:62ch;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7}
.quiz-run{margin-top:var(--sp-5)}
.quiz-timer{display:block;margin-bottom:var(--sp-4);color:var(--muted);font-size:var(--fs-micro);font-weight:800;
            letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.quiz-item{margin-top:var(--sp-4);background:var(--paper);border:1px solid var(--line);padding:var(--sp-5)}
.quiz-item-question{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--sp-3);align-items:start}
.quiz-number{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
             background:var(--ink);color:var(--paper);font-size:11px;font-weight:800}
.quiz-item-question-text{font-family:var(--serif);font-size:17px;line-height:1.4;font-weight:700}
.quiz-choices{margin-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.quiz-choice{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;
             padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft);cursor:pointer;
             font-size:var(--fs-sm);line-height:1.45}
.quiz-choice:hover .quiz-choice-text{color:var(--red)}
.quiz-choice input{margin:2px 0 0;accent-color:var(--green)}
.quiz-choice.is-correct .quiz-choice-text{font-weight:800;color:#2f6b4f}
.quiz-choice.is-selected-wrong .quiz-choice-text{color:var(--red-dark);text-decoration:line-through}
.quiz-choice-mark{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.09em;
                  text-transform:uppercase;white-space:nowrap}
.quiz-choice.is-correct .quiz-choice-mark{color:#2f6b4f}
.quiz-choice.is-selected-wrong .quiz-choice-mark{color:var(--red-dark)}
.quiz-answer{margin-top:var(--sp-4);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.65}
.quiz-counter{margin-top:var(--sp-5);margin-bottom:var(--sp-4);color:var(--muted);font-size:var(--fs-micro);
              font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quiz-result{margin-top:var(--sp-5);background:var(--paper);border:1px solid var(--line-strong);
             border-left:4px solid var(--muted-2);padding:var(--sp-6)}
.quiz-result.is-pass{border-left-color:#2f6b4f}
.quiz-result.is-fail{border-left-color:var(--red-dark)}
.quiz-score{font-family:var(--serif);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em}
.quiz-result h3{margin-top:var(--sp-4);font-size:var(--fs-h3)}
.quiz-verdict{margin-top:var(--sp-4);max-width:62ch;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.quiz-breakdown{margin-top:var(--sp-4);color:var(--ink);font-size:var(--fs-sm);line-height:1.6}
.quiz-first-wrong{color:var(--red-dark);border-bottom:1px solid currentColor;font-size:var(--fs-xs);
                  font-weight:700}
.quiz-first-wrong:hover{color:var(--red)}
.quiz-first-wrong-row{margin-top:var(--sp-4)}
.quiz-noscript{display:block;margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-xs)}
.quiz-ch{margin-top:var(--sp-2);background:var(--paper);border:1px solid var(--line)}
.quiz-ch summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);
                 padding:var(--sp-4) var(--sp-5);cursor:pointer;font-family:var(--serif);
                 font-size:var(--fs-h5);font-weight:700}
.quiz-ch summary:hover{color:var(--red)}
.quiz-ch summary .side{font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
                       letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quiz-ch > ol{margin:0;padding:0 var(--sp-5) var(--sp-4) var(--sp-7)}
.quiz-q{padding:var(--sp-4) 0;border-top:1px solid var(--line-soft)}
.quiz-question{display:block;font-family:var(--serif);font-size:16px;line-height:1.45;font-weight:700}
.quiz-opts{margin-top:var(--sp-3);padding-left:var(--sp-5)}
.quiz-opts li{padding:2px 0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.quiz-opts li.is-correct{color:var(--ink);font-weight:800}
.quiz-explain{margin-top:var(--sp-3);max-width:62ch;color:var(--muted);font-size:var(--fs-xs);line-height:1.65}
.quiz-badge{display:inline-block;margin-left:var(--sp-2);border:1px solid var(--line);padding:2px 7px;
            font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.weekly-meta{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.weekly-study{margin-top:var(--sp-5);background:var(--paper);border:1px solid var(--line);
              padding:var(--sp-4) var(--sp-5)}
.weekly-study > ol{margin:0;padding-left:var(--sp-5)}
.weekly-source{display:inline-block;margin-bottom:var(--sp-2);border:1px solid var(--line);padding:3px 8px;
               color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quiz-reveal{margin-top:var(--sp-3);border:1px solid var(--line);background:var(--paper-2)}
.quiz-reveal summary{padding:var(--sp-3) var(--sp-4);cursor:pointer;font-size:var(--fs-micro);
                     font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quiz-reveal summary:hover{color:var(--red)}
.quiz-reveal > div{padding:0 var(--sp-4) var(--sp-4)}
.quiz-reveal strong{font-size:var(--fs-sm)}

/* ── калькулятор ──────────────────────────────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);margin-top:var(--sp-5)}
.calc-card{background:var(--paper);border:1px solid var(--line);padding:var(--sp-6);min-width:0}
.calc-card h3{font-size:var(--fs-h4)}
.calc-field{display:block;margin:var(--sp-5) 0 0;padding:0;border:0}
.calc-field > label,.calc-field > .calc-legend{display:block;color:var(--muted);font-size:var(--fs-micro);
            font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.calc-field > input,.calc-field > select{width:100%;margin-top:var(--sp-2);border:1px solid var(--line);
            border-radius:0;background:#fff;padding:13px;font-size:16px;color:var(--ink)}
.calc-field > select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;
            cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317201d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.calc-field > input:focus,.calc-field > select:focus{outline:2px solid var(--ink);outline-offset:-1px}
.calc-hint{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.calc-radios{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.calc-radio{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line);
            padding:11px 14px;font-size:var(--fs-xs);cursor:pointer}
.calc-radio input{margin:0;accent-color:var(--green)}
.calc-radio:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.calc-radio:hover{border-color:var(--red)}
.calc-submit{margin-top:var(--sp-5)}
.calc-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);align-items:baseline;
                 padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.calc-result-row:last-child{border-bottom:0}
.calc-result-row span{color:var(--muted);font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;
                      text-transform:uppercase}
.calc-result-row strong{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);text-align:right}
.calc-result-row.is-main{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.calc-result-row.is-main strong{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1}
.calc-result h3{margin-bottom:var(--sp-3)}
.calc-facts{margin-top:var(--sp-5)}
.calc-fact{margin-top:var(--sp-3);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.65}
.calc-fact a{color:var(--red-dark);border-bottom:1px solid currentColor}
.calc-fact a:hover{color:var(--red)}
.calc-limits{margin-top:var(--sp-3);border-collapse:collapse;font-size:var(--fs-xs)}
.calc-limits td{padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;border-bottom:1px solid var(--line-soft);
                font-variant-numeric:tabular-nums}
.calc-disclaimer{margin-top:var(--sp-5);max-width:62ch;color:var(--muted);font-size:var(--fs-xs);line-height:1.65}

/* ── навигатор: статическая разметка и DOM, который строит COMPASS_JS ─── */
.compass-form{margin-top:var(--sp-5)}
.compass-topic + .compass-topic{margin-top:var(--sp-6)}
.compass-topic h3{padding-bottom:var(--sp-3);border-bottom:2px solid var(--line-strong)}
.compass-statement{margin-top:var(--sp-4);background:var(--paper);border:1px solid var(--line);padding:var(--sp-5)}
.compass-text{font-family:var(--serif);font-size:17px;line-height:1.4;font-weight:700}
.compass-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-4)}
.compass-choice{display:flex;gap:var(--sp-2);align-items:flex-start;border:1px solid var(--line);
                padding:var(--sp-3);font-size:var(--fs-xs);line-height:1.35;cursor:pointer;min-width:0}
.compass-choice:hover{border-color:var(--red);color:var(--red)}
.compass-choice input{margin:1px 0 0;accent-color:var(--green)}
.compass-choice:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.compass-weight{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
                color:var(--muted);font-size:var(--fs-xs);cursor:pointer}
.compass-weight input{margin:0;accent-color:var(--green)}
.compass-weight:hover{color:var(--red)}
.compass-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.compass-progress{color:var(--muted);font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;
                  text-transform:uppercase}
.compass-hint{color:var(--red-dark);font-size:var(--fs-xs);font-weight:700}
.compass-result{margin-top:var(--sp-5);background:var(--paper);border:1px solid var(--line-strong);padding:var(--sp-6)}
.compass-result h2{font-size:var(--fs-h3)}
.compass-result > p{margin-top:var(--sp-3);max-width:62ch;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
.compass-bars{list-style:none;margin:var(--sp-5) 0 0;padding:0}
.compass-bar{display:grid;grid-template-columns:170px minmax(0,1fr) 52px;gap:var(--sp-4);
             align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.compass-bar:last-child{border-bottom:0}
.compass-bar-name{font-size:var(--fs-sm);min-width:0}
.compass-bar-track{display:block;height:10px;background:var(--line-soft);min-width:0}
.compass-bar-fill{display:block;height:10px;background:var(--green-2)}
.compass-bar:first-child .compass-bar-fill{background:var(--green)}
.compass-bar:first-child .compass-bar-name{font-weight:800}
.compass-bar-pct{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:700}
.compass-party-note{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.compass-breakdown-toggle{margin-top:var(--sp-5)}
.compass-result-table{margin-top:var(--sp-4)}
.cmp-user-answer{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-micro);font-weight:800;
                 letter-spacing:.08em;text-transform:uppercase}
.compass-matrix-section{margin-top:var(--sp-5)}
.cmp-topic{margin-top:var(--sp-2);background:var(--paper);border:1px solid var(--line)}
.cmp-topic summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);
                   padding:var(--sp-4) var(--sp-5);cursor:pointer;font-family:var(--serif);
                   font-size:var(--fs-h5);font-weight:700}
.cmp-topic summary:hover{color:var(--red)}
.cmp-topic summary .side{font-family:var(--sans);font-size:var(--fs-micro);font-weight:800;
                         letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp-statement-card{padding:var(--sp-5);border-top:1px solid var(--line)}
.cmp-statement-text{font-family:var(--serif);font-size:16px;line-height:1.45;font-weight:700}
.cmp-party-list{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.cmp-party-row{display:grid;grid-template-columns:170px 120px minmax(0,1fr);gap:var(--sp-2) var(--sp-4);
               padding:var(--sp-3) 0;border-top:1px solid var(--line-soft);align-items:baseline}
.cmp-party-row > a{grid-column:3;color:var(--red-dark);border-bottom:1px solid currentColor;
                   justify-self:start;font-size:var(--fs-xs)}
.cmp-party-row > a:hover{color:var(--red)}
.cmp-party-name{font-size:var(--fs-sm);font-weight:700;min-width:0}
.cmp-stance{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.compass-position-summary{color:var(--ink-2);font-size:var(--fs-xs);line-height:1.6;min-width:0}
.compass-method p{margin-top:var(--sp-4);max-width:66ch;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7}
.compass-method a{color:var(--red-dark);border-bottom:1px solid currentColor}
.compass-method a:hover{color:var(--red)}
.compass-checked{margin-top:var(--sp-5);color:var(--muted);font-size:var(--fs-micro);font-weight:800;
                 letter-spacing:.08em;text-transform:uppercase}

/* ── словарь ──────────────────────────────────────────────────────────── */
.gl-count{margin-top:var(--sp-5);color:var(--muted);font-size:var(--fs-micro);font-weight:800;
          letter-spacing:.08em;text-transform:uppercase}
.gl-filter{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.gl-filter label{flex:0 0 100%;color:var(--muted);font-size:var(--fs-micro);font-weight:800;
                 letter-spacing:.08em;text-transform:uppercase}
.gl-filter input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:0;background:#fff;
                 padding:16px;font-size:16px}
.gl-filter input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.gl-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5);
        padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.gl-nav a{flex:0 0 auto;border:1px solid var(--line);padding:7px 11px;color:var(--muted);
          font-size:var(--fs-micro);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
          white-space:nowrap}
.gl-nav a:hover{border-color:var(--red);color:var(--red)}
.gl-section{margin-top:var(--sp-7);scroll-margin-top:64px}
.gl-section h2{padding-bottom:var(--sp-3);border-bottom:2px solid var(--line-strong)}
.gl-list{margin:0}
.gl-term{margin-top:var(--sp-2);background:var(--paper);border:1px solid var(--line);padding:var(--sp-4) var(--sp-5)}
.gl-term dt{line-height:1.35}
.gl-term dt b{font-size:var(--fs-h5);font-weight:800}
.gl-en{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-xs);font-weight:400}
.gl-term dd{margin:var(--sp-3) 0 0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
.gl-guide{display:inline-block;margin-top:var(--sp-2);color:var(--red-dark);
          border-bottom:1px solid currentColor;font-size:var(--fs-xs);font-weight:700}
.gl-guide:hover{color:var(--red)}
.gl-empty{margin-top:var(--sp-5);background:var(--paper);border:1px dashed var(--line);
          padding:var(--sp-7) var(--sp-6);text-align:center;color:var(--muted);font-size:var(--fs-sm)}

/* ── адаптив ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .svc-tiles,.quiz-stats{grid-template-columns:1fr 1fr}
  .calc-grid{grid-template-columns:1fr}
  .cmp-party-row{grid-template-columns:150px 110px minmax(0,1fr)}
}
@media(max-width:760px){
  .service-head{grid-template-columns:1fr}
  .big-value .bv-sub{text-align:right}
  .big-value.is-compact{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;
                        justify-content:flex-start;gap:var(--sp-2) var(--sp-3);
                        padding:var(--sp-4) var(--sp-5);text-align:left}
  .big-value.is-compact b{font-size:26px}
  .big-value.is-compact b.word{font-size:22px}
  .big-value.is-compact span{margin-top:0}
  .big-value.is-compact .bv-sub{display:none}
  .svc-card-wide .card-body{grid-template-columns:1fr}
  .svc-card-wide .meta{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--sp-3)}
  .converter{grid-template-columns:1fr}
  .converter .swap{transform:rotate(90deg)}
  .chart-plot{height:130px}
  .compass-scale{grid-template-columns:1fr}
  .compass-bar{grid-template-columns:minmax(0,1fr) 52px}
  .compass-bar-track{grid-column:1/-1;order:3}
  .cmp-party-row{grid-template-columns:1fr;gap:var(--sp-2)}
  .cmp-party-row > a{grid-column:1}
  .quiz-ch > ol{padding-left:var(--sp-6);padding-right:var(--sp-4)}
  .gl-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .gl-nav::-webkit-scrollbar{display:none}
  .quiz-choice{grid-template-columns:18px minmax(0,1fr)}
  .quiz-choice-mark{grid-column:2}
}

/* --- страницы-тексты: «Об издании», «Конфиденциальность» ----------------- */
.text-page{max-width:var(--measure);font-family:var(--serif);font-size:var(--fs-body);
           line-height:var(--lh-text);color:var(--ink-2)}
.text-page > * + *{margin-top:var(--sp-5)}
.text-page h2{font-size:var(--fs-h3);color:var(--ink);margin-top:var(--sp-8);
              padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.text-page > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.text-page b{color:var(--ink)}
.about-support{max-width:var(--measure);margin-top:var(--sp-7);background:var(--paper);
               border:1px solid var(--line-strong);padding:var(--sp-6);scroll-margin-top:var(--sp-6)}
.about-support h2{margin-top:var(--sp-3)}
/* карточка стоит внутри .text-page: линию и отбивку заголовка текста снимаем */
.text-page .about-support h2{margin-top:var(--sp-3);padding-top:0;border-top:0}
.about-support p{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.about-support .addr-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
                         margin-top:var(--sp-4)}
.about-support .addr{display:inline-block;font-family:var(--serif);font-size:var(--fs-h4);
                     font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-strong)}
.about-support .addr:hover{color:var(--red);border-bottom-color:currentColor}
.about-support .how{margin-top:var(--sp-4);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.about-support .note{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-micro);
                     font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* --- контакты ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.contact{display:block;background:var(--paper);border:1px solid var(--line);padding:var(--sp-6)}
.contact h3{margin-top:var(--sp-3)}
.contact p{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-sm);line-height:1.65}
.contact .go{display:inline-block;margin-top:var(--sp-4)}

/* --- рассылка: форма оболочки в теле страницы ---------------------------- */
.nl-form .newsletter{margin-top:0}
/* ссылка в примечании шапки секции: кликабельное носит акцент */
.section-head .note a{color:var(--red-dark);border-bottom:1px solid currentColor}
.section-head .note a:hover{color:var(--red)}

/* --- 404 ----------------------------------------------------------------- */
.err{text-align:center;padding:var(--sp-9) 0}
.err .code{font-family:var(--serif);font-size:clamp(80px,14vw,160px);font-weight:700;
           line-height:1;color:var(--red)}
.err h1{margin-top:var(--sp-4)}
.err p{margin-top:var(--sp-4);margin-left:auto;margin-right:auto;max-width:54ch;
       color:var(--muted);font-size:var(--fs-sm);line-height:1.7}
.err .actions{margin-top:var(--sp-6);display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.err .actions a{border:1px solid var(--ink);padding:13px 20px;font-size:var(--fs-micro);
                font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.err .actions a:hover{border-color:var(--red);color:var(--red)}

/* --- страница источника -------------------------------------------------- */
/* Шапка и карточка данных - те же .ref-head / .ref-card, что у тега, персоны
   и архива: одна редакция правил на весь стилевой файл (render/home.py). */

@media(max-width:1000px){
  .contact-grid{grid-template-columns:1fr}
}