/* Статьи и список статей glava.family.
   Шапка, подвал, кнопки и токены приходят из /css/site.css (их сборка вырезает из стилей главной).
   Здесь только содержимое статьи. Новые типы блоков добавлять сюда же, с описанием в blog/README.md. */

.post,.blog-page{
  --plum:#5B2B39; --marker:#6B3345; --gold:#D3A158; --gold-hover:#E6C48E; --on-gold:#34161F;
  --plum-fg:#F7EFE8; --plum-muted:#CDB5BB; --bad:#8F3A34; --good:#3F6B4A;
  --col:680px; --gutter:clamp(16px,4vw,40px);
  --shadow-page:0 18px 36px -24px rgba(0,0,0,.5);
  --shadow-photo:0 22px 40px -22px rgba(0,0,0,.55);
  display:block;padding-inline:var(--gutter);padding-block:clamp(32px,6vw,64px) clamp(56px,9vw,112px);
  font-size:17px;line-height:1.65
}
.post .col,.blog-page .col{max-width:var(--col);margin-inline:auto}
.post .wide,.blog-page .wide{max-width:920px;margin-inline:auto}

.crumbs{font-size:13px;color:var(--faint);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--text)}
.post .eyebrow,.blog-page .eyebrow{margin-top:28px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.post h1,.blog-page h1{margin:14px 0 0;font-weight:300;font-size:clamp(34px,6.2vw,56px);line-height:1.08;letter-spacing:-.015em;text-transform:lowercase;text-wrap:balance}
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.22em;overflow:visible}
.post .lead,.blog-page .lead{margin:22px 0 0;font-size:clamp(18px,2.2vw,20px);line-height:1.6;color:var(--muted)}
.post-meta{margin-top:22px;font-size:14px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 18px}

:where(.post) figure{margin:0}
.post picture{display:contents}
.photo{margin-block:clamp(36px,6vw,56px);display:flex;flex-direction:column;align-items:center;gap:16px}
.photo .print{background:var(--card);padding:10px;border-radius:4px;box-shadow:var(--shadow-photo);max-width:100%}
.photo .print img{display:block;border-radius:2px;height:auto}
.photo.tilt-l .print{transform:rotate(-1.5deg)}
.photo.tilt-r .print{transform:rotate(1.5deg)}
.post .page{border-radius:4px;box-shadow:var(--shadow-page);display:block;height:auto}
.post figcaption{font-size:14px;font-weight:600;color:var(--muted);text-align:center;max-width:52ch}

.toc{margin-top:clamp(32px,5vw,48px);background:var(--band);border-radius:16px;padding:24px clamp(20px,4vw,32px)}
.post .toc h2{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:8px}
.toc li{counter-increment:s;display:flex;gap:12px;font-size:16px;line-height:1.4}
.toc li::before{content:counter(s);flex:none;width:1.4em;color:var(--faint);font-variant-numeric:tabular-nums}
.toc a{text-decoration:none;border-bottom:1px solid var(--line)}
.toc a:hover{border-color:var(--text)}

.post section[id],.post h2[id],.post h3[id]{scroll-margin-top:90px}
.step{margin-top:clamp(48px,8vw,80px)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.post h2{margin:8px 0 0;font-weight:300;font-size:clamp(26px,4.2vw,36px);line-height:1.12;letter-spacing:-.015em;text-transform:lowercase;text-wrap:balance}
.post h3{margin:28px 0 0;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:0}
.post p{margin:16px 0 0}
.post .col ul{margin:16px 0 0;padding-left:1.2em;display:grid;gap:8px}
.post .col li::marker{color:var(--plum)}
.post strong{font-weight:600}
.post a:not(.btn){text-underline-offset:3px;text-decoration-color:var(--plum-muted)}

.vs{margin-top:24px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.vs > div{min-width:0;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card)}
.vs .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vs .no .tag{color:var(--bad)}.vs .yes .tag{color:var(--good)}
.post .vs p{margin-top:10px;font-size:16.5px;line-height:1.5}
.vs .note{color:var(--muted);font-size:14.5px}

.facts{margin-top:24px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));border-block:1px solid var(--line);padding-block:22px}
.facts div{min-width:0}
.facts b{display:block;font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--muted)}

.check{margin-top:24px;background:var(--band);border-radius:16px;padding:22px clamp(18px,4vw,28px)}
.post .check h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.post .check ul{list-style:none;padding:0;margin-top:14px}
.check li{position:relative;padding-left:28px;font-size:16px;line-height:1.5}
.check li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border:1.5px solid var(--plum);border-radius:4px}

.tbl{margin-top:24px;overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:480px;font-size:16px;line-height:1.5}
.tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 16px 10px 0;border-bottom:1px solid var(--text)}
.tbl th.no{color:var(--bad)}.tbl th.yes{color:var(--good)}
.tbl td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);width:50%}
.tbl td:first-child{color:var(--muted)}

.main-note{margin-top:24px;border-left:2px solid var(--plum);padding:4px 0 4px 20px;font-size:19px;line-height:1.5}

/* заготовка для автора; в опубликованной статье сборка её не пропустит */
.slot{margin-top:28px;border:1.5px dashed var(--marker);border-radius:16px;padding:20px;color:var(--marker);font-size:15.5px;line-height:1.5}
.slot b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}

.plan{margin-top:24px;display:grid;gap:0;border-top:1px solid var(--line)}
.plan div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.plan b{font-weight:600}
.plan span{color:var(--muted)}
@media (max-width:520px){.plan div{grid-template-columns:1fr;gap:4px}}

.post .book{margin-top:clamp(48px,8vw,80px);background:var(--band);border-radius:24px;padding:clamp(24px,5vw,48px);display:grid;gap:clamp(24px,5vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:center}
.post .book > div{min-width:0}
.post .book .pg{display:flex;flex-direction:column;align-items:center;gap:14px}
.post .book .pg img{width:min(100%,300px)}
.post .book p{color:var(--muted)}

/* призыв к гайду внутри текста */
.cta-inline{margin-top:clamp(40px,6vw,56px);background:var(--plum);color:var(--plum-fg);border-radius:20px;padding:22px clamp(20px,4vw,28px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.cta-inline .kicker{color:var(--gold)}
.post .cta-inline p{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--plum-muted);max-width:34em}
.cta-inline b{color:var(--plum-fg);font-weight:600}

/* два продукта в конце статьи */
.cta{margin-top:clamp(40px,6vw,64px);display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cta > section{min-width:0;border-radius:24px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cta .guide{background:var(--plum);color:var(--plum-fg)}
.cta .guide .kicker{color:var(--gold)}
.cta .guide p{color:var(--plum-muted)}
.cta .turnkey{background:var(--card);border:1px solid var(--line)}
.cta .turnkey p{color:var(--muted)}
.post .cta h2{margin:0;font-size:clamp(26px,3.6vw,34px);line-height:1.1}
.post .cta p{margin:0;font-size:16px;line-height:1.55}
.cta .row{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:6px}
.cta .price{font-weight:300;font-size:38px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.post .btn.on-plum{background:var(--gold);color:var(--on-gold)}
.post .btn.on-plum:hover{background:var(--gold-hover)}

.post .faq{margin-top:clamp(48px,8vw,80px)}
.post details{border-bottom:1px solid var(--line)}
.post details:first-of-type{border-top:1px solid var(--line);margin-top:24px}
.post summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-size:19px;line-height:1.35;position:relative}
.post summary::-webkit-details-marker{display:none}
.post summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;font-weight:300;color:var(--plum)}
.post details[open] summary::after{content:"−"}
.post details p{margin:0 0 20px;color:var(--muted)}

.author{margin-top:clamp(40px,6vw,56px);display:flex;align-items:center;gap:16px;padding-block:20px;border-block:1px solid var(--line)}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.author b{display:block;font-weight:600}
.author span{display:block;font-size:14px;color:var(--muted)}

.more{margin-top:clamp(40px,6vw,64px)}
.more ul{list-style:none;padding:0 !important;margin-top:16px;display:grid;gap:0 !important;border-top:1px solid var(--line)}
.more li{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.more li span{color:var(--faint);font-size:13px;margin-left:8px;white-space:nowrap}

/* /blog/ — список статей */
.cards{margin-top:clamp(32px,5vw,48px);display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.blog-more{margin-top:clamp(32px,5vw,48px);font-size:17px;color:var(--muted)}
.blog-more a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;background:var(--band)}
.card h2{margin:4px 0 0;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:-.01em;text-transform:none}
.card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.card time{font-size:13px;color:var(--faint)}
.card:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--plum-muted)}

/* 404 */
.nf{text-align:center;padding-block:clamp(64px,12vw,140px)}
.nf p{color:var(--muted);margin:18px auto 32px;max-width:30em}

/* посадочные из pages/ (/diy/ и др.): шапка-герой, карточки комплекта, развороты, шаги, время */
.landing h1{font-size:clamp(36px,6.6vw,64px)}
.ld-buy-row{margin-top:30px}
.ld-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.ld-buy .price{font-weight:300;font-size:44px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.landing .btn.plum{background:var(--plum);color:var(--plum-fg)}
.landing .btn.plum:hover{background:var(--marker)}
.post .ld-small{margin-top:14px;font-size:14px;color:var(--faint)}
.ld-books{position:relative;margin-top:clamp(36px,6vw,56px);aspect-ratio:2.05/1}
.ld-books img{position:absolute;display:block;height:auto;border-radius:4px;box-shadow:var(--shadow-page)}
.ld-books .ld-spread{right:2%;top:2%;width:72%;transform:rotate(1.2deg)}
.ld-books .ld-cover{left:4%;bottom:6%;width:29%;transform:rotate(-3deg);box-shadow:var(--shadow-photo)}
.ld-books figcaption{position:absolute;right:2%;bottom:0;font-size:13px;font-weight:600;color:var(--faint);text-align:right}
@media (max-width:560px){.ld-books{aspect-ratio:1.35/1}.ld-books .ld-spread{width:86%;right:0}.ld-books .ld-cover{left:0;width:38%;bottom:10%}}

.ld-sec{margin-top:clamp(56px,9vw,96px)}
.ld-cards{margin-top:26px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ld-card{min-width:0;border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card)}
.ld-card b{display:block;font-weight:600;font-size:18px;line-height:1.3}
.post .ld-card p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ld-card.main{background:var(--plum);border-color:var(--plum);color:var(--plum-fg);grid-column:1/-1}
.post .ld-card.main p{color:var(--plum-muted)}
.post .ld-note{margin-top:18px;font-size:15px;line-height:1.55;color:var(--muted)}

.ld-spreads{margin-top:clamp(48px,8vw,80px);display:grid;gap:clamp(20px,4vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.ld-spreads .photo{margin:0}
.ld-spreads .print{width:100%}
.ld-spreads .print img{width:100%}
.ld-spreads .ld-note{grid-column:1/-1;text-align:center;max-width:46em;margin:0 auto}

.post .ld-steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:st;display:grid;gap:0;border-top:1px solid var(--line)}
.ld-steps li{counter-increment:st;display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.ld-steps li::before{content:counter(st);grid-row:1/3;font-weight:300;font-size:30px;line-height:1;color:var(--plum);font-variant-numeric:tabular-nums}
.ld-steps b{font-weight:600;font-size:18px}
.ld-steps span{color:var(--muted);font-size:16px;line-height:1.5}

.ld-time{margin-top:24px;display:grid;border-top:1px solid var(--line)}
.ld-time div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.ld-time b{font-weight:600}
.ld-time span{color:var(--muted);font-size:16px;line-height:1.5}
.ld-time i{font-style:normal;font-weight:600;color:var(--plum);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){.ld-time div{grid-template-columns:minmax(0,1fr) auto}.ld-time span{grid-column:1/-1;grid-row:2}}
.ld-buy-row h2 ~ .ld-buy{margin-top:22px}

/* Посадочная сертификата: сертификат и список фактов рядом (pages/sertifikat) */
.ld-gift{margin-top:26px;display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:clamp(24px,5vw,48px);align-items:center}
.ld-gift .gift-object{width:100%;transform:rotate(-3deg)}
.ld-gift .gift-object .gcert{box-shadow:0 30px 50px -20px rgba(0,0,0,.45),0 8px 16px -8px rgba(0,0,0,.25)}
.gift-facts-col{flex-direction:column;align-items:flex-start;gap:12px;margin:0;font-size:16px}
.gift-facts-col li{align-items:flex-start}
.gift-facts-col li::before{flex:none;margin-top:.62em}
@media (max-width:560px){.ld-gift{grid-template-columns:1fr}.ld-gift .gift-object{width:min(70%,220px);justify-self:center}}