/* ═══════════════════════════════════════════════
   BLOG — /blog/ and /blog/<slug>
   Rendered by blog/_lib.php. Long-form reading first: a 66ch column,
   17px text, and a visual beat (fact, image, quote, list) every few
   paragraphs so a phone reader always has a reason to keep scrolling.
   ═══════════════════════════════════════════════ */

body.blog-page{background:var(--cream)}

.blog-preview{
  position:fixed; left:0; right:0; top:0; z-index:70; margin:0; height:38px; box-sizing:border-box;
  padding:10px 20px; text-align:center;
  background:var(--wine); color:#fdf3f0; font:600 12.5px/1.4 var(--sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blog-preview ~ .nav{top:38px}
.blog-preview ~ .bprogress{top:38px}

/* ── index ── */
.blog{max-width:1120px; margin:0 auto; padding:clamp(110px,15vh,150px) 24px clamp(40px,6vw,72px)}
.blog__intro{max-width:640px; margin:0 auto clamp(36px,5vw,56px); text-align:center}
.blog__eyebrow, .post__cat, .bcard__cat{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.blog__title{
  margin:0 0 14px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,5vw,52px); line-height:1.12; color:var(--wine);
}
.blog__sub{margin:0 auto; max-width:52ch; font:400 15px/1.7 var(--sans); color:var(--ink-soft)}
.blog__empty, .blog__next{
  margin:clamp(28px,4vw,44px) auto 0; text-align:center;
  font:400 14.5px/1.6 var(--sans); color:var(--ink-soft);
}
.blog__next strong{color:var(--wine); font-weight:600}

/* cards */
.bcard__link{display:block; color:inherit; text-decoration:none; border-radius:20px}
.bcard__img{display:block; overflow:hidden; border-radius:18px; background:#efe4d6}
.bcard__img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.bcard__link:hover .bcard__img img{transform:scale(1.035)}
.bcard__body{display:block; padding:18px 4px 0}
.bcard__title{
  display:block; margin:0 0 8px; font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2.2vw,26px); line-height:1.2; color:var(--ink);
  transition:color .25s;
}
.bcard__link:hover .bcard__title{color:var(--wine)}
.bcard__dek{display:block; font:400 14.5px/1.6 var(--sans); color:var(--ink-soft)}
.bcard__meta{display:block; margin-top:12px; font:500 12px/1 var(--sans); letter-spacing:.04em; color:var(--ink-soft)}
.bcard__img img{aspect-ratio:3 / 2 !important}

/* the newest one, large */
.bcard--big .bcard__link{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,4vw,48px); align-items:center}
.bcard--big .bcard__img img{aspect-ratio:4 / 3 !important}
.bcard--big .bcard__title{font-style:italic; font-size:clamp(28px,3.4vw,42px); color:var(--wine)}
.bcard--big .bcard__dek{font-size:15.5px}
@media (max-width:760px){
  .bcard--big .bcard__link{grid-template-columns:1fr; gap:0}
}

.blog__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(28px,4vw,44px) clamp(20px,3vw,32px);
  margin-top:clamp(44px,6vw,72px);
}
.blog__more{max-width:1120px; margin:0 auto; padding:0 24px clamp(56px,8vw,96px)}
.blog__more .blog__grid{margin-top:24px}
.blog__more-title{
  margin:0; padding-top:clamp(40px,6vw,64px); border-top:1px solid rgba(136,1,42,.12);
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(24px,3vw,32px); color:var(--wine);
}

/* ── reading progress ── */
.bprogress{position:fixed; left:0; right:0; top:0; z-index:65; height:3px; pointer-events:none}
.bprogress i{display:block; height:100%; width:0; background:var(--wine); transition:width .1s linear}

/* ── article ── */
.post{padding:clamp(104px,14vh,140px) 0 0}
.post__head, .post__body, .post__share{max-width:700px; margin:0 auto; padding:0 24px}
.post__back{
  display:inline-block; margin-bottom:28px; position:relative;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--wine); text-decoration:none; border-bottom:1px solid rgba(136,1,42,.3); padding-bottom:3px;
}
.post__back::after{content:''; position:absolute; inset:-9px -6px}
.post__title{
  margin:0 0 16px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(34px,6vw,58px); line-height:1.08; color:var(--wine); text-wrap:balance;
}
.post__dek{margin:0 0 18px; font:400 clamp(16px,1.8vw,19px)/1.6 var(--sans); color:var(--ink-soft)}
.post__meta{margin:0; font:500 12.5px/1 var(--sans); letter-spacing:.04em; color:var(--ink-soft)}

.post__cover{max-width:1100px; margin:clamp(32px,5vw,52px) auto clamp(36px,5vw,56px); padding:0 24px}
.post__cover img{display:block; width:100%; height:auto; border-radius:22px; background:#efe4d6}

.post__body{font:400 17px/1.78 var(--sans); color:var(--ink)}
.post__body > *{margin:0 0 1.15em}
.post__body h2{
  margin:2.1em 0 .6em; font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,3.2vw,32px); line-height:1.2; color:var(--wine);
}
.post__body a{color:var(--wine); text-underline-offset:3px}
.post__body sup{line-height:0; font-size:.68em; margin-left:1px}
.post__body sup a{text-decoration:none; font-weight:600}
.post__body ul, .post__body ol{padding-left:1.3em}
.post__body li{margin:.35em 0}
.post__body li::marker{color:var(--wine)}
.post__body .lead{font-size:clamp(18px,2vw,20.5px); line-height:1.65; color:var(--ink)}
.post__body .lead::first-letter{
  float:left; margin:.06em .1em 0 0;
  font-family:var(--serif); font-style:italic; font-size:3.4em; line-height:.82; color:var(--wine);
}

/* „Накратко“ */
.tldr{
  padding:22px 24px 16px; border-radius:18px;
  background:linear-gradient(165deg, rgba(255,255,255,.85), rgba(226,178,170,.22)), var(--cream);
  border:1px solid rgba(136,1,42,.12);
}
.tldr__title{margin:0 0 8px; font:600 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--wine)}
.tldr ul{margin:0; font-size:15.5px; line-height:1.65}

/* the big number */
.fact{
  display:grid; gap:6px; margin:2em 0 !important; padding:28px 0;
  border-top:1px solid rgba(136,1,42,.18); border-bottom:1px solid rgba(136,1,42,.18);
  text-align:center;
}
.fact__num{font-family:var(--serif); font-style:italic; font-size:clamp(52px,9vw,84px); line-height:1; color:var(--wine)}
.fact__text{font:400 17px/1.55 var(--sans); color:var(--ink); max-width:34ch; margin:0 auto}
.fact__src{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

/* images break out of the column to hold the eye */
.bf{margin:2.2em -24px !important}
@media (min-width:780px){ .bf{margin-left:-80px !important; margin-right:-80px !important} }
.bf img{display:block; width:100%; height:auto; border-radius:18px; background:#efe4d6}
.bf--tall{max-width:520px; margin-left:auto !important; margin-right:auto !important}
.bf figcaption, .post__cover figcaption{
  margin-top:10px; padding:0 24px; font:400 13.5px/1.5 var(--sans); color:var(--ink-soft);
}
.bf__credit{display:block; margin-top:2px; font-size:11.5px; letter-spacing:.02em}
.bf__credit a{color:inherit}
.post__cover figcaption{padding:0}

.pull{
  margin:2em 0 !important; padding:0 0 0 22px; border-left:3px solid var(--wine);
}
.pull p{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(23px,3vw,29px); line-height:1.3; color:var(--wine)}

.checklist{list-style:none; padding:0 !important; counter-reset:c}
.checklist li{position:relative; padding:12px 0 12px 46px; border-bottom:1px solid rgba(136,1,42,.1); margin:0 !important; counter-increment:c}
.checklist li::before{
  content:counter(c); position:absolute; left:0; top:10px;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(136,1,42,.08); color:var(--wine); font:600 13px/1 var(--sans);
}

.note{
  padding:16px 20px; border-radius:14px; background:rgba(136,1,42,.05);
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
}

.sources{margin-top:2.6em !important; padding-top:1.4em; border-top:1px solid rgba(136,1,42,.12)}
.sources h2{margin-top:0 !important; font-size:22px !important}
.sources ol{font-size:14px; line-height:1.6; color:var(--ink-soft)}
.sources li:target{background:rgba(136,1,42,.07); border-radius:6px}

.post__share{padding-top:8px; padding-bottom:clamp(48px,7vw,80px)}
.post__copy{
  appearance:none; cursor:pointer; min-height:44px; padding:0 22px;
  background:transparent; color:var(--wine);
  border:1.5px solid rgba(136,1,42,.4); border-radius:99px;
  font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.post__copy:hover{background:rgba(136,1,42,.06); border-color:var(--wine)}

@media (prefers-reduced-motion:reduce){
  .bcard__img img, .bprogress i{transition:none}
  .bcard__link:hover .bcard__img img{transform:none}
}