/* =========================================================================
   Ногтистика — дизайн-система (CSS-переменные, mobile-first, под тему WordPress)
   Шрифты: Playfair Display (заголовки/бренд) + Inter (текст)
   Стиль: editorial, акцент rose-gold, точечно
   ========================================================================= */

/* ----------------------------- 1. ТОКЕНЫ -------------------------------- */
:root{
  /* — цвет — */
  --bg:#FFFFFF;
  --bg-soft:#FCFAF8;
  --text:#221C1F;          /* основной текст */
  --text-2:#4A4145;        /* вторичный */
  --muted:#8A7F79;         /* подписи, мета */
  --line:#ECE6E1;          /* hairline */
  --line-2:#E0D7D0;
  --tint:#F7EFE7;          /* тёплые фон-блоки */
  --tint-2:#F3E9E1;

  --accent:#C8995F;        /* rose-gold — декор, заливки, маркеры */
  --accent-soft:#E7C9A5;   /* светлый отлив */
  --accent-deep:#9A5F30;   /* ссылки/текст-акцент (AA на белом 5.1:1) */
  --accent-hover:#7F4D26;  /* hover */
  --mauve:#9B6A7D;         /* вторичный акцент (метки рубрик) */

  --tip-bg:#EFF4EF;   --tip-bd:#CFE3CF;   --tip-ink:#3B6B45;   /* callout «Совет» */
  --warn-bg:#FBF0E8;  --warn-bd:#F0D6BE;  --warn-ink:#9A5A22;  /* callout «Важно» */

  --focus:#9A5F30;

  /* — типографика — */
  --font-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-12:.75rem;  --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem;
  --fs-16:1rem;    --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem;
  --fs-30:1.875rem;--fs-38:2.375rem; --fs-48:3rem;    --fs-60:3.75rem;

  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.7;

  /* — отступы (4/8) — */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;

  /* — радиусы / тени — */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(34,28,31,.04), 0 8px 24px -16px rgba(110,69,85,.28);
  --shadow-2:0 18px 50px -28px rgba(110,69,85,.40);

  /* — раскладка — */
  --container:1320px;
  --measure:760px;        /* комфортная ширина чтения */
  --header-h:72px;
}

/* ----------------------------- 2. RESET --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-16); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent-deep); text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; line-height:var(--lh-snug); margin:0; color:var(--text)}
p{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}

/* --------------------------- 3. УТИЛИТЫ --------------------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s4)}
.eyebrow{font-size:var(--fs-12); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep)}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:8px; top:-50px; background:var(--text); color:#fff; padding:10px 16px; border-radius:var(--r-sm); z-index:200; transition:top .15s}
.skip-link:focus{top:8px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); font-weight:600; font-size:var(--fs-15);
  line-height:1.2; padding:.75em 1.4em; border-radius:var(--r-pill); white-space:nowrap; text-align:center;
  transition:background .18s, color .18s, transform .18s; min-height:46px}
.btn--primary{background:var(--accent-deep); color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:var(--tint); color:var(--text)}
.btn--ghost:hover{background:var(--tint-2)}
.tag{display:inline-block; font-size:var(--fs-12); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--tint); padding:.34em .7em; border-radius:var(--r-pill)}
.tag--mauve{color:#6E4555; background:#F3E9ED}

/* --------------------------- 4. ШАПКА ----------------------------------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:var(--shadow-1)}
.site-header__inner{display:flex; align-items:center; gap:var(--s4); height:var(--header-h)}
.brand{display:flex; align-items:center; margin-right:auto}
.brand img{height:42px; width:auto}
.nav{display:none}
.nav ul{display:flex; align-items:center; gap:var(--s5); list-style:none}
.nav__link{color:var(--text); font-weight:500; font-size:var(--fs-15); padding:.4em 0; position:relative}
.nav__link::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--accent); transition:right .22s}
.nav__link:hover{color:var(--accent-deep)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.header-actions{display:flex; align-items:center; gap:var(--s1)}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-pill); color:var(--text)}
.icon-btn:hover{background:var(--tint)}
.menu-toggle{display:inline-flex}

/* мобильное меню (drawer) */
.mobile-nav{position:fixed; inset:0; z-index:150; visibility:hidden; pointer-events:none}
.mobile-nav__scrim{position:absolute; inset:0; background:rgba(34,28,31,.5); opacity:0; transition:opacity .25s}
.mobile-nav__panel{position:absolute; right:0; top:0; height:100%; width:min(82vw,340px); background:var(--bg);
  box-shadow:var(--shadow-2); padding:var(--s5); transform:translateX(100%); transition:transform .28s ease; overflow-y:auto}
.mobile-nav.is-open{visibility:visible; pointer-events:auto}
.mobile-nav.is-open .mobile-nav__scrim{opacity:1}
.mobile-nav.is-open .mobile-nav__panel{transform:translateX(0)}
.mobile-nav__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s5)}
.mobile-nav ul{list-style:none}
.mobile-nav li+li{border-top:1px solid var(--line)}
.mobile-nav a{display:block; padding:var(--s4) var(--s1); color:var(--text); font-size:var(--fs-18); font-weight:500}

@media (min-width:920px){
  .nav{display:block}
  .menu-toggle{display:none}
}

/* --------------------------- 5. FOOTER ---------------------------------- */
.site-footer{background:var(--bg-soft); border-top:1px solid var(--line); margin-top:var(--s9); padding-block:var(--s8) var(--s6)}
.footer__grid{display:grid; gap:var(--s6); grid-template-columns:1fr}
.footer__brand img{height:32px}
.footer__brand p{color:var(--muted); font-size:var(--fs-14); margin-top:var(--s3); max-width:34ch}
.footer__col h4{font-family:var(--font-body); font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3)}
.footer__col ul{list-style:none; display:grid; gap:var(--s2)}
.footer__col a{color:var(--text-2); font-size:var(--fs-15)}
.footer__col a:hover{color:var(--accent-deep)}
.footer__social{display:flex; gap:var(--s2); margin-top:var(--s3)}
.footer__social a{width:40px; height:40px; border-radius:var(--r-pill); background:var(--tint); display:inline-flex; align-items:center; justify-content:center; color:var(--text)}
.footer__social a:hover{background:var(--accent); color:#fff}
.footer__bottom{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); color:var(--muted); font-size:var(--fs-13); display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between}
@media (min-width:720px){ .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }

/* --------------------------- 6. HERO ------------------------------------ */
.hero{padding-top:var(--s7)}
/* Вариант A — крупный одиночный */
.hero--single .hero__card{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2)}
.hero--single .hero__media{aspect-ratio:16/8; width:100%; object-fit:cover}
.hero--single .hero__body{position:absolute; inset:auto 0 0 0; padding:var(--s6) var(--s5);
  background:linear-gradient(to top, rgba(34,28,31,.72), rgba(34,28,31,.12) 70%, transparent); color:#fff}
.hero--single .hero__title{font-size:clamp(1.75rem,5vw,var(--fs-48)); color:#fff; max-width:18ch}
.hero--single .hero__excerpt{color:rgba(255,255,255,.9); margin-top:var(--s3); max-width:52ch; font-size:var(--fs-16)}
.hero--single .tag{background:rgba(255,255,255,.18); color:#fff}

/* Вариант B — сплит на 2 статьи */
.hero--split .hero__grid{display:grid; gap:var(--s4); grid-template-columns:1fr}
.hero__feature{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1); display:block}
.hero__feature img{aspect-ratio:16/10; object-fit:cover; width:100%; transition:transform .4s}
.hero__feature:hover img{transform:scale(1.03)}
.hero__feature .hero__body{position:absolute; inset:auto 0 0 0; padding:var(--s5);
  background:linear-gradient(to top, rgba(34,28,31,.74), transparent); color:#fff}
.hero__feature .hero__title{color:#fff; font-size:var(--fs-24)}
.hero__feature.is-lead .hero__title{font-size:clamp(1.6rem,4vw,var(--fs-38))}
.hero__feature .tag{background:rgba(255,255,255,.18); color:#fff}
@media (min-width:860px){
  .hero--split .hero__grid{grid-template-columns:1.6fr 1fr; grid-auto-rows:1fr}
  .hero--split .is-lead{grid-row:span 2}
}

/* --------------------------- 7. СЕКЦИИ / КАРТОЧКИ ----------------------- */
.section{margin-top:var(--s8)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5)}
.section__title{font-size:var(--fs-30)}
.section__link{font-weight:600; font-size:var(--fs-15); white-space:nowrap}
.section__link:hover{color:var(--accent-hover)}

.card-grid{display:grid; gap:var(--s5); grid-template-columns:1fr}
.card{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, transform .2s, border-color .2s}
.card:hover{box-shadow:var(--shadow-1); transform:translateY(-3px); border-color:var(--line-2)}
.card__media{aspect-ratio:4/3; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--s4) var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card__title{font-size:var(--fs-20); line-height:var(--lh-snug)}
.card__title a{color:var(--text)}
.card__title a:hover{color:var(--accent-deep)}
.card__excerpt{color:var(--text-2); font-size:var(--fs-15); line-height:1.55}
.card__meta{margin-top:auto; display:flex; gap:var(--s3); color:var(--muted); font-size:var(--fs-13); padding-top:var(--s2)}
@media (min-width:560px){ .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:920px){ .card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* рубрики-плитки */
.rubric-grid{display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr))}
.rubric{display:flex; align-items:center; gap:var(--s3); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r); background:var(--bg); transition:background .2s,border-color .2s}
.rubric:hover{background:var(--tint); border-color:var(--accent-soft)}
.rubric__ic{width:42px; height:42px; flex:none; border-radius:var(--r-pill); background:var(--tint); display:grid; place-items:center; color:var(--accent-deep)}
.rubric b{display:block; color:var(--text); font-size:var(--fs-15)}
.rubric span{color:var(--muted); font-size:var(--fs-13)}
@media (min-width:720px){ .rubric-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* --------------------------- 8. БЛОК ОБ АВТОРЕ (главная) ---------------- */
.author-band{margin-top:var(--s8); background:var(--tint); border-radius:var(--r-lg); padding:var(--s6)}
.author-band__inner{display:grid; gap:var(--s5); align-items:center; grid-template-columns:1fr}
.author-band__photo{width:120px; height:120px; border-radius:var(--r-pill); object-fit:cover; box-shadow:var(--shadow-1)}
.author-band__title{font-size:var(--fs-30); margin:var(--s2) 0 var(--s3)}
.author-band p{color:var(--text-2)}
.author-band__sign{margin-top:var(--s4); font-family:var(--font-head); font-style:italic; font-size:var(--fs-20); color:var(--accent-deep)}
@media (min-width:720px){ .author-band__inner{grid-template-columns:auto 1fr} }

/* --------------------------- 9. ХЛЕБНЫЕ КРОШКИ -------------------------- */
.breadcrumbs,.rank-math-breadcrumb{font-size:var(--fs-13); color:var(--muted); padding-top:var(--s5)}
.breadcrumbs ol,.rank-math-breadcrumb p{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin:0}
.breadcrumbs a,.rank-math-breadcrumb a{color:var(--muted)}
.breadcrumbs a:hover,.rank-math-breadcrumb a:hover{color:var(--accent-deep)}
.breadcrumbs li+li::before{content:"›"; margin-right:var(--s2); color:var(--line-2)}
.rank-math-breadcrumb .separator{color:var(--line-2)}
.breadcrumbs [aria-current],.rank-math-breadcrumb .last{color:var(--text-2)}

/* --------------------------- 10. ШАПКА СТАТЬИ --------------------------- */
.article__header{padding-top:var(--s4)}
.article__title{font-size:clamp(1.85rem,4.2vw,var(--fs-48)); line-height:var(--lh-tight); margin:0}
.article__cover{margin:var(--s5) 0 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2)}
.article__cover img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article__cover figcaption{font-size:var(--fs-13); color:var(--muted); text-align:center; padding:var(--s3) var(--s4) 0}

/* мета-строка под обложкой (с иконками) */
.article__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5); margin-top:var(--s5);
  padding-bottom:var(--s5); border-bottom:1px solid var(--line); color:var(--muted); font-size:var(--fs-14)}
.meta-author{display:inline-flex; align-items:center; gap:var(--s2); color:var(--text)}
.meta-author img{width:40px; height:40px; border-radius:var(--r-pill); object-fit:cover}
.meta-author b{font-weight:600; font-size:var(--fs-15)}
.meta-author a{color:var(--text)}
.meta-author a:hover{color:var(--accent-deep)}
.meta-item{display:inline-flex; align-items:center; gap:var(--s2)}
.meta-item svg{width:17px; height:17px; color:var(--accent-deep); flex:none}

/* --------------------------- 11. РАСКЛАДКА ПОСТА: КОНТЕНТ | САЙДБАР ----- */
.post-layout{display:grid; gap:var(--s6); margin-top:var(--s5)}
.post-layout__main{min-width:0}
.post-layout__main > *{max-width:var(--post-main, 100%)}
/* тело статьи — во всю ширину колонки (без лимита --measure), чтобы не было дыры до сайдбара */
.post-layout__main .prose{max-width:none}
.post-layout__sidebar{display:grid; gap:var(--s5); align-content:start}
@media (min-width:1000px){
  .post-layout{grid-template-columns:minmax(0,1fr) 340px; gap:var(--s8); align-items:start}
  .post-layout__sidebar{position:sticky; top:calc(var(--header-h) + var(--s4)); align-self:start}
}

/* TOC — в теле статьи, сворачиваемый (<details>) */
.toc{background:var(--tint); border-radius:var(--r); padding:var(--s4) var(--s5); border:1px solid var(--line-2)}
.toc__title{font-family:var(--font-body); font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:var(--s2); cursor:pointer; list-style:none; user-select:none}
.toc__title::-webkit-details-marker{display:none}
.toc__chev{margin-left:auto; color:var(--accent-deep); transition:transform .2s}
.toc[open] .toc__chev{transform:rotate(180deg)}
.toc[open] .toc__title{margin-bottom:var(--s3)}
.toc:not([open]) > [data-toc]{display:none}
.toc ol{list-style:none; display:grid; gap:2px; counter-reset:toc; grid-template-columns:1fr; margin:0; padding:0}
.toc li{margin:0}
.toc a{display:block; color:var(--text-2); font-size:var(--fs-15); padding:.45em .6em; border-radius:var(--r-sm); border-left:2px solid transparent; text-decoration:none}
.toc a:hover{background:#fff; color:var(--text)}
.toc a.is-active{color:var(--accent-deep); border-left-color:var(--accent); background:#fff; font-weight:600}
.toc .toc--h3 a{padding-left:var(--s5); font-size:var(--fs-14); color:var(--muted)}
.toc .toc--h3 a:hover,.toc .toc--h3 a.is-active{color:var(--accent-deep)}

/* виджеты сайдбара */
.widget{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); background:var(--bg)}
.widget__title{font-family:var(--font-body); font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s4)}
.pop-list{list-style:none; counter-reset:pop; display:grid; gap:var(--s4)}
.pop-list li{counter-increment:pop; display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start}
.pop-list li::before{content:counter(pop); font-family:var(--font-head); font-weight:700; font-size:var(--fs-20); color:var(--accent-soft); line-height:1; width:1.1em}
.pop-list a{color:var(--text); font-size:var(--fs-15); line-height:1.4; font-weight:500}
.pop-list a:hover{color:var(--accent-deep)}
.pop-list span{display:block; color:var(--muted); font-size:var(--fs-13); margin-top:2px; font-weight:400}
.widget--subscribe{background:linear-gradient(160deg,var(--tint),var(--tint-2)); border-color:var(--accent-soft)}
.widget--subscribe .widget__title{color:var(--accent-deep)}
.widget--subscribe p{font-size:var(--fs-14); color:var(--text-2); margin-bottom:var(--s4)}
.subscribe-form{display:grid; gap:var(--s2)}
.subscribe-form input{width:100%; font:inherit; font-size:var(--fs-15); padding:.7em .9em; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; min-height:46px}
.subscribe-form input:focus{outline:3px solid var(--focus); outline-offset:1px; border-color:var(--accent)}
.subscribe-form .btn{width:100%}
.subscribe-note{font-size:var(--fs-12); color:var(--muted); text-align:center}

/* --------------------------- 12. ТЕЛО СТАТЬИ (PROSE) ------------------- */
.prose{max-width:var(--measure); font-size:var(--fs-18); color:var(--text)}
.prose > * + *{margin-top:var(--s5)}
.prose h2{font-size:var(--fs-30); margin-top:var(--s8); scroll-margin-top:calc(var(--header-h) + var(--s4))}
.prose h3{font-size:var(--fs-24); margin-top:var(--s6); scroll-margin-top:calc(var(--header-h) + var(--s4))}
.prose p{line-height:var(--lh-body)}
.prose a{color:var(--accent-deep); text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:3px; text-decoration-thickness:1.5px; transition:color .15s}
.prose a:hover{color:var(--accent-hover); text-decoration-color:currentColor}
.prose strong{font-weight:700}
/* ссылки внутри компонентов не наследуют подчёркивание/цвет контентных ссылок */
.prose a.btn{text-decoration:none}
.prose a.btn--primary{color:#fff}
.prose a.btn--primary:hover{color:#fff}
.prose a.btn--ghost{color:var(--text)}
.prose .toc a{text-decoration:none; color:var(--text-2)}
.prose .toc a:hover{color:var(--text)}
.prose .toc a.is-active{color:var(--accent-deep)}

/* нумерованный список — акцентные цифры */
.prose ol.list-num{list-style:none; counter-reset:ln; display:grid; gap:var(--s4)}
.prose ol.list-num > li{counter-increment:ln; display:grid; grid-template-columns:1.9rem 1fr; gap:var(--s4); align-items:start}
.prose ol.list-num > li::before{content:counter(ln); grid-column:1;
  width:1.9rem; height:1.9rem; align-self:start;
  display:flex; align-items:center; justify-content:center; line-height:1; text-align:center;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-15); color:var(--accent-deep);
  background:var(--tint); border-radius:50%}

/* маркированный список — кастомные маркеры */
.prose ul.list-bullet{list-style:none; display:grid; gap:var(--s3)}
.prose ul.list-bullet > li{position:relative; padding-left:var(--s5)}
.prose ul.list-bullet > li::before{content:""; position:absolute; left:.2em; top:.62em; width:.5em; height:.5em;
  background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px var(--tint)}

/* цитата = «вывод автора»: аватар автора статьи (через --author-ava на .prose) + акцент.
   --author-ava ставит single.php из аватара автора; фолбэк — брендовый avatar.svg. */
.prose blockquote{position:relative; margin-inline:0; padding:var(--s5);
  padding-left:calc(56px + var(--s5) + var(--s4)); min-height:calc(56px + var(--s5) * 2);
  background:var(--tint); border:1px solid var(--line-2); border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;
  font-family:var(--font-head); font-size:var(--fs-20); font-style:italic; color:var(--text)}
.prose blockquote::before{content:""; position:absolute; left:var(--s5); top:var(--s5); width:56px; height:56px;
  border-radius:50%; background:var(--author-ava, url('../img/avatar.svg')) center/cover no-repeat, var(--tint-2)}
/* лейбл «Вывод автора» (эйрбоу над текстом) */
.prose blockquote p:first-of-type::before{content:"Вывод автора"; display:block; margin-bottom:var(--s2);
  font-family:var(--font-body); font-style:normal; font-size:var(--fs-12); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep)}
/* имя автора снизу (из --author-name, ставит single.php). Если автор задал свой <cite> — не дублируем */
.prose blockquote::after{content:var(--author-name, none); display:block; margin-top:var(--s3);
  font-family:var(--font-body); font-style:normal; font-size:var(--fs-14); color:var(--muted)}
.prose blockquote:has(cite)::after{content:none}
.prose blockquote p+p{margin-top:var(--s3)}
.prose blockquote cite{display:block; margin-top:var(--s3); font-family:var(--font-body); font-style:normal; font-size:var(--fs-14); color:var(--muted)}
@media (max-width:560px){
  .prose blockquote{padding-left:var(--s5); min-height:0}
  .prose blockquote::before{position:static; display:block; margin-bottom:var(--s3)}
}

/* figure + подпись */
.prose figure{margin:var(--s6) 0}
.prose figure img{border-radius:var(--r); width:100%}
.prose figcaption{font-size:var(--fs-13); color:var(--muted); text-align:center; margin-top:var(--s3)}

/* --------------------------- 13. CALLOUT -------------------------------- */
.callout{display:flex; gap:var(--s3); padding:var(--s4) var(--s5); border-radius:var(--r); border:1px solid; font-size:var(--fs-16); line-height:1.6}
.callout__ic{flex:none; width:26px; height:26px}
.callout b{display:block; margin-bottom:var(--s1); font-family:var(--font-body)}
.callout--tip{background:var(--tip-bg); border-color:var(--tip-bd)}
.callout--tip b,.callout--tip .callout__ic{color:var(--tip-ink)}
.callout--warn{background:var(--warn-bg); border-color:var(--warn-bd)}
.callout--warn b,.callout--warn .callout__ic{color:var(--warn-ink)}

/* --------------------------- 14. ПОШАГОВО (how-to) --------------------- */
.steps{display:grid; gap:var(--s5); counter-reset:step}
.step{counter-increment:step; display:grid; gap:var(--s3); grid-template-columns:auto 1fr; align-items:start}
.step__num{width:2.4em; height:2.4em; border-radius:var(--r-pill); background:var(--accent-deep); color:#fff;
  font-family:var(--font-head); font-weight:700; display:grid; place-items:center; font-size:var(--fs-18)}
.step__num::before{content:counter(step)}
.step__title{font-size:var(--fs-20); margin-bottom:var(--s2)}
.step__media{margin-top:var(--s3); border-radius:var(--r); overflow:hidden; background:var(--tint); aspect-ratio:16/9; display:grid; place-items:center; color:var(--muted); font-size:var(--fs-13)}
.step__media img{width:100%; height:100%; object-fit:cover}

/* --------------------------- 15. FAQ-аккордеон ------------------------- */
.faq{display:grid; gap:var(--s3)}
.faq__item{border:1px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden}
.faq__q{width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s5); font-family:var(--font-head); font-weight:700; font-size:var(--fs-18); color:var(--text)}
.faq__q:hover{color:var(--accent-deep)}
.faq__q .chev{flex:none; transition:transform .25s; color:var(--accent-deep)}
.faq__item.is-open .chev{transform:rotate(180deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq__a-inner{padding:0 var(--s5) var(--s5); color:var(--text-2); line-height:1.65}

/* --------------------------- 16. СРАВНИТЕЛЬНАЯ ТАБЛИЦА ----------------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r)}
.compare{width:100%; border-collapse:collapse; font-size:var(--fs-15); min-width:480px}
.compare th,.compare td{padding:var(--s3) var(--s4); text-align:left; border-bottom:1px solid var(--line)}
.compare thead th{background:var(--tint); font-family:var(--font-body); font-weight:700; color:var(--text); font-size:var(--fs-14)}
.compare tbody tr:last-child td{border-bottom:0}
.compare tbody th{font-weight:600; color:var(--text)}
.compare td:not(:first-child){color:var(--text-2)}
/* адаптивная таблица-стек на мобайле */
@media (max-width:560px){
  .compare--stack, .compare--stack thead, .compare--stack tbody, .compare--stack tr, .compare--stack th, .compare--stack td{display:block}
  .compare--stack{min-width:0}
  .compare--stack thead{display:none}
  .compare--stack tbody tr{border-bottom:1px solid var(--line); padding:var(--s3) 0}
  .compare--stack tbody tr:last-child{border-bottom:0}
  .compare--stack td,.compare--stack tbody th{border:0; padding:var(--s2) var(--s4); display:flex; justify-content:space-between; gap:var(--s4)}
  .compare--stack td::before{content:attr(data-label); font-weight:600; color:var(--muted)}
  .compare--stack tbody th{font-size:var(--fs-18); font-family:var(--font-head); padding-top:var(--s3)}
}

/* --------------------------- 17. НАТИВНЫЙ CTA / партнёрский ------------ */
.native-box{display:grid; gap:var(--s2); padding:var(--s5); border:1px dashed var(--accent-soft); border-radius:var(--r); background:var(--bg-soft)}
.native-box .eyebrow{color:var(--muted)}
.native-box__title{font-size:var(--fs-20)}
.native-box p{color:var(--text-2); font-size:var(--fs-15)}
.native-box .btn{justify-self:start; margin-top:var(--s2)}

/* --------------------------- 18. КАРТОЧКА АВТОРА ---------------------- */
.author-card{display:grid; gap:var(--s4); grid-template-columns:auto 1fr; align-items:center;
  padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-soft)}
.author-card img{width:84px; height:84px; border-radius:var(--r-pill); object-fit:cover}
.author-card__name{font-size:var(--fs-20); margin-bottom:var(--s1)}
.author-card__role{color:var(--accent-deep); font-size:var(--fs-13); font-weight:600; margin-bottom:var(--s2)}
.author-card p{color:var(--text-2); font-size:var(--fs-15)}
.author-card__links{display:flex; gap:var(--s2); margin-top:var(--s3)}
.author-card__links a{font-size:var(--fs-14); font-weight:600}

/* --------------------------- 19. ПОДЕЛИТЬСЯ / ЧИТАЙТЕ ТАКЖЕ ----------- */
.share{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; padding-block:var(--s6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--s7)}
.share b{font-size:var(--fs-15)}
.share a{width:42px; height:42px; border-radius:var(--r-pill); background:var(--tint); display:grid; place-items:center; color:var(--text)}
.share a:hover{background:var(--accent); color:#fff}

/* --------------------------- 20. КОММЕНТАРИИ -------------------------- */
.comments{margin-top:var(--s7)}
.comments__title{font-size:var(--fs-24); margin-bottom:var(--s5)}
.comment{display:grid; grid-template-columns:auto 1fr; gap:var(--s3); padding:var(--s4) 0; border-top:1px solid var(--line)}
.comment__avatar{width:44px; height:44px; border-radius:var(--r-pill); object-fit:cover; background:var(--tint)}
.comment__head{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.comment__name{font-weight:600; color:var(--text)}
.comment__date{font-size:var(--fs-13); color:var(--muted)}
.comment__body{margin-top:var(--s2); color:var(--text-2); line-height:1.6}
.comment__reply{margin-top:var(--s2); font-size:var(--fs-14); font-weight:600; color:var(--accent-deep)}
.comment--reply{margin-left:var(--s7); border-top:1px dashed var(--line)}
.comment-form{margin-top:var(--s6); display:grid; gap:var(--s4); background:var(--tint); padding:var(--s5); border-radius:var(--r-lg)}
.comment-form h3{font-size:var(--fs-20)}
.field{display:grid; gap:var(--s2)}
.field label{font-size:var(--fs-14); font-weight:600}
.field input,.field textarea{width:100%; font:inherit; font-size:var(--fs-16); padding:.7em .9em; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--text); min-height:48px}
.field textarea{min-height:120px; resize:vertical; line-height:1.5}
.field input:focus,.field textarea:focus{outline:3px solid var(--focus); outline-offset:1px; border-color:var(--accent)}
.form-row{display:grid; gap:var(--s4)}
@media (min-width:560px){ .form-row{grid-template-columns:1fr 1fr} }

/* --------------------------- 21. РУБРИКА (архив) ---------------------- */
.archive-head{text-align:center; max-width:var(--measure); margin:var(--s6) auto 0}
.archive-head h1{font-size:clamp(1.85rem,5vw,var(--fs-48))}
.archive-head p{color:var(--text-2); margin-top:var(--s4)}
.archive-seo{margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--line)}
.archive-seo .prose{margin-inline:auto}
.pagination{display:flex; justify-content:center; align-items:center; gap:var(--s2); margin-top:var(--s8)}
.pagination a,.pagination span{min-width:44px; height:44px; padding:0 .6em; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:var(--fs-15)}
.pagination a:hover{border-color:var(--accent); color:var(--accent-deep)}
.pagination [aria-current]{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep)}
.pagination .is-disabled{opacity:.4; pointer-events:none}

/* --------------------------- 22. СТАТИЧНАЯ СТРАНИЦА ------------------- */
.page-narrow{max-width:var(--measure); margin-inline:auto; padding-top:var(--s5)}
.page-narrow h1{font-size:clamp(1.85rem,5vw,var(--fs-48)); margin-bottom:var(--s5)}

/* --------------------------- 24. ГЛАВНАЯ: ДОП. БЛОКИ ----------------- */
/* полоса доверия (статистика) */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); margin-top:var(--s6);
  padding:var(--s6) var(--s5); background:var(--tint); border-radius:var(--r-lg)}
.stat{text-align:center}
.stat b{display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(1.8rem,4vw,var(--fs-38)); color:var(--accent-deep); line-height:1}
.stat span{display:block; margin-top:var(--s2); color:var(--text-2); font-size:var(--fs-14)}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5)} .stat+.stat{border-left:1px solid var(--line-2)} }

/* «С чего начать» — путь новичка */
.path-grid{display:grid; gap:var(--s5); grid-template-columns:1fr; counter-reset:path}
.path-card{counter-increment:path; position:relative; display:block; padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg); transition:box-shadow .2s, transform .2s, border-color .2s}
.path-card:hover{box-shadow:var(--shadow-1); transform:translateY(-3px); border-color:var(--accent-soft)}
.path-card::before{content:counter(path); position:absolute; top:-18px; left:var(--s5);
  width:46px; height:46px; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:var(--fs-20);
  color:#fff; background:var(--accent-deep); border-radius:var(--r-pill); box-shadow:var(--shadow-1)}
.path-card h3{font-size:var(--fs-20); margin:var(--s3) 0 var(--s2)}
.path-card p{color:var(--text-2); font-size:var(--fs-15); line-height:1.55}
.path-card .path-link{display:inline-block; margin-top:var(--s3); font-weight:600; font-size:var(--fs-14); color:var(--accent-deep)}
@media (min-width:760px){ .path-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* галерея дизайнов (горизонтальный скролл) */
.gallery{display:flex; gap:var(--s4); width:100%; min-width:0; overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:var(--s3); -webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:var(--r-pill)}
.gallery a{position:relative; flex:0 0 60%; max-width:240px; scroll-snap-align:start;
  border-radius:var(--r); overflow:hidden; display:block; aspect-ratio:3/4}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.gallery a:hover img{transform:scale(1.05)}
.gallery a span{position:absolute; left:0; right:0; bottom:0; padding:var(--s4) var(--s3) var(--s3);
  background:linear-gradient(to top, rgba(34,28,31,.7), transparent); color:#fff; font-weight:600; font-size:var(--fs-14)}
@media (min-width:560px){ .gallery a{flex-basis:34%} }
@media (min-width:760px){ .gallery a{flex-basis:240px} }

/* баннер подписки (главная) */
.subscribe-band{margin-top:var(--s8); border-radius:var(--r-lg); padding:var(--s8) var(--s6);
  background:linear-gradient(150deg,#2A2024,#43313A); color:#fff; text-align:center}
.subscribe-band .eyebrow{color:var(--accent-soft)}
.subscribe-band h2{color:#fff; font-size:clamp(1.5rem,4vw,var(--fs-38)); margin:var(--s2) 0 var(--s3)}
.subscribe-band p{color:rgba(255,255,255,.82); max-width:48ch; margin:0 auto var(--s5)}
.subscribe-band form{display:flex; gap:var(--s2); max-width:460px; margin:0 auto; flex-wrap:wrap}
.subscribe-band input{flex:1 1 220px; font:inherit; font-size:var(--fs-16); padding:.85em 1em; border:0; border-radius:var(--r-pill); min-height:50px}
.subscribe-band input:focus{outline:3px solid var(--accent-soft); outline-offset:2px}
.subscribe-band .btn--primary{background:var(--accent); color:#2A2024}
.subscribe-band .btn--primary:hover{background:var(--accent-soft)}
.subscribe-band small{display:block; margin-top:var(--s3); color:rgba(255,255,255,.6); font-size:var(--fs-13)}

/* облако тегов */
.tags-cloud{display:flex; flex-wrap:wrap; gap:var(--s2)}
.tags-cloud a{font-size:var(--fs-15); color:var(--text-2); padding:.5em 1em; border:1px solid var(--line); border-radius:var(--r-pill); transition:.18s}
.tags-cloud a:hover{border-color:var(--accent); color:var(--accent-deep); background:var(--tint)}

/* --------------------------- 25. SEO-ТЕКСТ (рубрика) ----------------- */
.seo-text{margin-top:var(--s8); padding-top:var(--s7); border-top:1px solid var(--line); max-width:var(--measure)}
.seo-text h2{font-size:var(--fs-24); margin-bottom:var(--s4)}
.seo-text h3{font-size:var(--fs-20); margin:var(--s5) 0 var(--s2)}
.seo-text p{color:var(--text-2); margin-bottom:var(--s3); line-height:1.7}
.seo-text a{color:var(--accent-deep); text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:3px}

/* --------------------------- 23. MOTION / A11Y ----------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* =====================================================================
   WP-GLUE — мост между разметкой WordPress/редактора и дизайном.
   Добавлено при сборке темы (статьи из редактора отдают обычные
   ul/ol/table/img без классов .list-bullet/.compare — стилизуем их).
   ===================================================================== */

/* --- a11y / служебные классы WP --- */
.screen-reader-text{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.screen-reader-text:focus{position:static; width:auto; height:auto; clip:auto; margin:0; padding:8px 16px; background:var(--text); color:#fff; border-radius:var(--r-sm); z-index:200}

/* --- кастом-логотип из Настройщика --- */
.custom-logo-link{display:inline-flex; align-items:center; flex:0 0 auto}
.custom-logo{height:42px; width:auto; display:block}

/* --- отступ липкой шапки под админ-баром --- */
@media screen{ body.admin-bar .site-header{top:32px} }
@media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} }

/* --- форма поиска --- */
.search-form{display:flex; gap:var(--s2); max-width:520px; flex-wrap:wrap; margin-inline:auto}
.search-form__input{flex:1 1 240px; font:inherit; font-size:var(--fs-15); padding:.7em .9em; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; min-height:46px; color:var(--text)}
.search-form__input:focus{outline:3px solid var(--focus); outline-offset:1px; border-color:var(--accent)}

/* --- ответы в комментариях (нативная ссылка WP) + форма ответа --- */
.comment-reply-link{display:inline-block; margin-top:var(--s2); font-size:var(--fs-14); font-weight:600; color:var(--accent-deep); text-decoration:none}
.comment-reply-link:hover{color:var(--accent-hover)}
.comment-list,.comment-list .children{list-style:none; margin:0; padding:0}
.comment-list .children{margin-top:var(--s4)}
#respond{margin-top:var(--s6)}
.comment-reply-title{font-family:var(--font-head); font-size:var(--fs-20); margin-bottom:var(--s4)}
.comment-reply-title small{font-weight:400; font-size:var(--fs-14); margin-left:var(--s2)}
.form-submit{margin:0}
.comments__closed{color:var(--muted); margin-top:var(--s4)}

/* --- пагинация по страницам одной записи (<!--nextpage-->) --- */
.page-links{margin-top:var(--s5); display:flex; gap:var(--s2); align-items:center; font-weight:600}
.page-links a,.page-links>span{min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm)}
.page-links a:hover{border-color:var(--accent); color:var(--accent-deep)}

/* =====================================================================
   КОНТЕНТ ИЗ РЕДАКТОРА внутри .prose (без классов дизайна)
   ===================================================================== */

/* картинки и подписи */
.prose img{max-width:100%; height:auto; border-radius:var(--r)}
.prose figure{margin-top:var(--s5)}
.prose figure img{display:block}
.prose figcaption,.wp-caption-text{margin-top:var(--s2); font-size:var(--fs-14); color:var(--muted); text-align:center}
.prose .wp-block-image{margin-top:var(--s5)}
.wp-caption{max-width:100%}

/* выравнивания блочного редактора */
.alignleft{float:left; margin:.3em var(--s5) var(--s4) 0; max-width:50%}
.alignright{float:right; margin:.3em 0 var(--s4) var(--s5); max-width:50%}
.aligncenter{display:block; margin-inline:auto}
.prose .alignwide{max-width:min(100%, 980px)}
.prose .alignfull{max-width:100%}
@media (max-width:600px){ .alignleft,.alignright{float:none; max-width:100%; margin-inline:0} }

/* обычные списки из редактора (НЕ трогаем фирменные .list-bullet/.list-num) */
.prose ul:not(.list-bullet),.prose ol:not(.list-num){padding-left:1.45em}
.prose ul:not(.list-bullet){list-style:disc}
.prose ol:not(.list-num){list-style:decimal}
.prose ul:not(.list-bullet) li,.prose ol:not(.list-num) li{line-height:var(--lh-body)}
.prose li+li{margin-top:var(--s2)}
.prose ul:not(.list-bullet)>li::marker,.prose ol:not(.list-num)>li::marker{color:var(--accent-deep)}
.prose :is(ul,ol) :is(ul,ol){margin-top:var(--s2)}

/* Оглавление лежит внутри .prose — гасим унаследованные от прозы маркеры/отступы списка */
.prose .toc ol{list-style:none; padding-left:0}
.prose .toc li{margin-top:0}

/* обычные таблицы из редактора (НЕ трогаем фирменную .compare) */
.prose .wp-block-table{overflow-x:auto; margin-top:var(--s5)}
.prose table:not(.compare){width:100%; border-collapse:collapse; font-size:var(--fs-15); margin-top:var(--s5)}
.prose table:not(.compare) th,.prose table:not(.compare) td{padding:var(--s3) var(--s4); text-align:left; border-bottom:1px solid var(--line)}
.prose table:not(.compare) thead th{background:var(--tint); font-weight:700; font-size:var(--fs-14)}
.prose .table-wrap{margin-top:var(--s5)}
.prose .table-wrap table{margin-top:0}

/* маркеры WP для записей (на будущее, безвредно) */
.sticky{}
.bypostauthor{}