/**
 * Текстовая статья (Фаза 3+, дизайн v2). Портировано из _ncr_awesomic/article.html.
 * Хром (шапка/футер/кнопки/нижний бар) даёт home.css — здесь только статейное.
 */

.ncl-article .ncl-header__in{position:relative}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.kick{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid transparent;
  font-size:13.5px;font-weight:700;padding:13px 20px;white-space:nowrap;
}
/* специфичность 0-2-0 — над скоуп-резетом `.ncl-home a` (грабля «пустых кнопок») */
.ncl-article .btn--dark{background:#09090b;color:#fff;box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.5),inset 0 9px 14px -5px rgba(117,123,133,.4),0 0 0 1.5px rgb(44,46,52),0 4px 6px 0 rgba(0,0,0,.14)}
.ncl-article .btn--dark:hover{background:#18181b}
.ncl-article .btn--ghost{background:#fff;color:var(--iron);box-shadow:inset 0 1px 0 0 rgb(228,228,231),0 0 0 1px #ececee}
.ncl-article .btn--ghost:hover{background:var(--paper);color:#09090b}
.ncl-article .btn--light{background:#fff;color:var(--obsidian)}
.ncl-article .btn--light:hover{background:var(--cloud)}

/* ── шапка статьи ── */
.ahero{padding:44px 0 26px}
.ahero .crumbs{font-size:12.5px;font-weight:600;color:var(--fog);display:flex;gap:8px;flex-wrap:wrap}
.ahero .crumbs a:hover{color:var(--obsidian)}
.ahero .crumbs .here{color:var(--obsidian)}
.ahero h1{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin-top:14px;max-width:820px}
.ahero .lead{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--steel);max-width:640px}
.byline{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.byline .ava{width:38px;height:38px;border-radius:50%;background:var(--snow);border:1px solid var(--cloud);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--steel)}
.byline .who b{display:block;font-size:13.5px;font-weight:700}
.byline .who span{font-size:12px;color:var(--fog)}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--mist)}
.byline .m{font-size:12.5px;font-weight:600;color:var(--fog)}

/* ── раскладка: статья + рейка ── */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:start;padding-bottom:10px}
.rail{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px}
.toc{background:var(--snow);border:1px solid var(--cloud);border-radius:24px;padding:20px 8px 14px 22px}
.toc .kick{display:block;margin-bottom:10px}
.toc a{display:block;font-size:13px;font-weight:600;color:var(--steel);line-height:1.4;
  padding:6px 14px 6px 12px;border-left:2px solid transparent;margin-left:-14px;border-radius:0 10px 10px 0}
.toc a:hover{color:var(--obsidian)}
.toc a.on{color:var(--obsidian);border-left-color:var(--obsidian);background:var(--paper)}
.railcta{background:var(--snow);border:1px solid var(--cloud);border-radius:24px;padding:20px 22px}
.railcta p{font-size:13px;line-height:1.6;color:var(--steel);margin-top:8px}
.railcta .btn{margin-top:14px;width:100%}
.toc-inline{display:none;background:var(--snow);border:1px solid var(--cloud);border-radius:20px;margin-bottom:22px}
.toc-inline summary{list-style:none;cursor:pointer;padding:16px 20px;font-size:13px;font-weight:700}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary::after{content:"↓";float:right;color:var(--fog)}
.toc-inline[open] summary::after{content:"↑"}
.toc-inline nav{padding:0 20px 16px;display:grid;gap:2px}
.toc-inline nav a{font-size:13.5px;font-weight:600;color:var(--steel);padding:7px 0;border-bottom:1px solid var(--paper)}
.toc-inline nav a:last-child{border-bottom:0}

/* ── тело статьи (произвольный post_content) ── */
.art{background:var(--snow);border:1px solid var(--cloud);border-radius:36px;padding:clamp(26px,4.5vw,58px)}
.art > * + *{margin-top:16px}
.art p{font-size:16px;line-height:1.75;color:var(--iron);max-width:68ch}
.art p a, .art li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mist)}
.art p a:hover, .art li a:hover{text-decoration-color:var(--obsidian)}
.art h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-top:44px;scroll-margin-top:110px}
.art h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:32px;scroll-margin-top:110px}
.art ul,.art ol{max-width:68ch;display:grid;gap:10px;padding-left:0;list-style:none}
.art li{font-size:15.5px;line-height:1.65;color:var(--iron);padding-left:24px;position:relative}
.art ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--mist)}
.art ol{counter-reset:artol}
.art ol li{counter-increment:artol}
.art ol li::before{content:counter(artol);position:absolute;left:0;top:2px;font-size:12px;font-weight:700;color:var(--steel)}
.art blockquote{max-width:62ch;margin-top:22px;padding:4px 0 4px 24px;border-left:3px solid var(--obsidian);
  font-size:17px;line-height:1.6;font-weight:600;color:var(--obsidian)}
.art blockquote p{font-size:inherit;line-height:inherit;color:inherit}
.art blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--fog)}
.art figure{margin-top:28px}
.art img{border-radius:24px;height:auto}
.art figcaption{margin-top:10px;font-size:12.5px;color:var(--fog)}
.art iframe{max-width:100%;border-radius:24px}
.art table{border-collapse:collapse;font-size:14.5px;line-height:1.55;color:var(--iron)}
.art table td,.art table th{border:1px solid var(--cloud);padding:10px 14px;text-align:left}

/* ── нейтрализация легаси-разметки Gutenberg в старом контенте ──
   (фидбек 16.07: «большие буквы», «всё съезжает») */
/* буквицы → обычный текст */
.art .has-drop-cap:not(:focus)::first-letter{
  float:none;font-size:inherit;font-weight:inherit;font-family:inherit;
  line-height:inherit;margin:0;padding:0;text-transform:none;
}
/* колонки 33/66 → ровный вертикальный поток */
.art .wp-block-columns{display:block}
.art .wp-block-column{width:auto!important;max-width:100%}
.art .wp-block-column + .wp-block-column{margin-top:16px}
/* «последние посты» → сетка карточек в стиле сайта */
.art .wp-block-latest-posts.is-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;max-width:none}
.art .wp-block-latest-posts li{background:var(--paper);border-radius:18px;padding:16px;margin:0!important;width:auto!important;font-size:14px;line-height:1.45}
.art .wp-block-latest-posts li::before{content:none}
.art .wp-block-latest-posts li a{font-weight:700;text-decoration:none}
.art .wp-block-latest-posts li a:hover{text-decoration:underline;text-underline-offset:3px}
.art .wp-block-latest-posts__featured-image{margin-bottom:10px}
.art .wp-block-latest-posts__featured-image img{width:100%;height:110px;object-fit:cover;border-radius:12px}
.art .wp-block-latest-posts__post-date{display:block;margin-top:6px;font-size:12px;color:var(--fog)}
@media (max-width:640px){.art .wp-block-latest-posts.is-grid{grid-template-columns:1fr}}
/* разделители и выравнивания */
.art hr,.art .wp-block-separator{border:0;height:1px;background:var(--cloud)!important;opacity:1;max-width:68ch;margin-top:28px}
.art .aligncenter{margin-left:auto;margin-right:auto}
.art .alignwide,.art .alignfull{max-width:100%;margin-left:0;margin-right:0}
.art .alignleft{float:left;margin:6px 20px 12px 0;max-width:44%}
.art .alignright{float:right;margin:6px 0 12px 20px;max-width:44%}
.art::after{content:"";display:table;clear:both}
@media (max-width:640px){
  .art .alignleft,.art .alignright{float:none;margin:16px 0;max-width:100%}
}

/* ── тёмный банд сервиса ── */
.band{margin:44px 0 0;background:var(--graphite);border-radius:36px;color:#fff;
  padding:38px 42px;display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center}
.band .kick{color:rgba(255,255,255,.6)}
.band h2{font-size:24px;font-weight:700;margin-top:10px;letter-spacing:-.01em}
.band p{margin-top:10px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.78);max-width:480px}
.band__act{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.band__act .hint{font-size:12px;color:rgba(255,255,255,.55);text-align:center}

/* ── ещё по теме ── */
.more{padding:40px 0 8px}
.more .kick{display:block;margin-bottom:16px}
.more .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mcard{background:var(--snow);border:1px solid var(--cloud);border-radius:24px;padding:20px 22px 18px;
  display:flex;flex-direction:column;gap:6px;transition:border-color .2s, transform .2s}
.mcard:hover{border-color:var(--obsidian);transform:translateY(-2px)}
.mcard small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.mcard b{font-size:15.5px;font-weight:700;line-height:1.3}
.mcard p{font-size:12.5px;line-height:1.55;color:var(--fog);flex:1;margin:0}
.mcard span{font-size:12.5px;font-weight:700;color:var(--steel)}
.mcard:hover span{text-decoration:underline}

/* ── финальный CTA ── */
.acta{padding:46px 0 72px;text-align:center}
.acta h2{font-size:22px;font-weight:700;margin-top:10px}
.acta p{margin:10px auto 0;font-size:14px;line-height:1.7;color:var(--steel);max-width:520px}
.acta .btn{margin-top:20px}

/* прогресс чтения */
#rdbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--obsidian);transition:width .1s linear}

@media (max-width:1020px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .toc-inline{display:block}
  .more .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .band{grid-template-columns:1fr;padding:30px 26px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .more .grid{grid-template-columns:1fr}
  .art{border-radius:28px}
  .ahero .crumbs a{display:inline-block;padding:9px 0;margin:-9px 0}
  .toc-inline nav a{padding:11px 0}
}

/* ---------- ncr-white: чисто белый фон (Антон, 17.07.2026) ---------- */
/* body красит home.css (грузится первым); тут — карточки статьи на белом. */
.art,.toc,.railcta,.toc-inline,.mcard{border-color:#e4e4e7;box-shadow:0 1px 2px rgba(9,9,11,.03),0 16px 40px -28px rgba(9,9,11,.14)}
.art .wp-block-latest-posts li{background:#fff;border:1px solid var(--cloud)}
.art h2 .n{background:#fff}