/* ---------- blog: shared post card (home page uses it too) ---------- */
.post{position:relative;min-width:0}
.post__link{display:flex;flex-direction:column;text-decoration:none;height:100%}
.post__img{position:relative;aspect-ratio:29/16;overflow:hidden;background:var(--clay);border-radius:var(--r)}
.post__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post__link:hover .post__img img{transform:scale(1.03)}
.section--clay .post__img{background:rgba(22,18,17,.06)}
.post__meta,.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;line-height:1.3;color:var(--ink-2);margin:0}
.post__meta i,.blog-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.post__meta{margin:18px 0 8px}
.post .post__title{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:0;font-variation-settings:normal;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.post__link:hover .post__title{color:var(--earth)}

/* ---------- blog index ---------- */
.blog-head{padding-bottom:clamp(24px,3vw,40px)}
.blog-index{padding-top:clamp(8px,2vw,24px)}
.blog-filters{display:flex;flex-wrap:wrap;gap:4px 32px;margin:0 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.blog-filter{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 0 14px;font-size:17px;line-height:1.2;color:var(--ink-3);cursor:pointer;transition:color .2s,border-color .2s}
.blog-filter:hover{color:var(--ink)}
.blog-filter[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--oak)}
.blog-filter:focus-visible{outline-offset:2px}

.blog-feat{margin-bottom:clamp(56px,7vw,96px)}
.blog-feat__link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;text-decoration:none}
.blog-feat__img{position:relative;aspect-ratio:29/16;overflow:hidden;background:var(--clay);border-radius:var(--r)}
.blog-feat__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.blog-feat__link:hover .blog-feat__img img{transform:scale(1.02)}
.blog-feat__body{display:flex;flex-direction:column;align-items:flex-start}
.blog-feat__title{font-size:clamp(30px,3vw,44px);line-height:1.1;margin:18px 0 0}
:lang(uk) h2.blog-feat__title{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.blog-feat__excerpt{margin:20px 0 0;color:var(--ink-2);max-width:32em;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.blog-feat__body .more{margin-top:28px}
.blog-feat__link:hover .more .ic{transform:translateX(3px)}

/* ---------- article ---------- */
.art-head{padding-top:clamp(40px,6vw,80px)}
.art-head>*{max-width:900px}
.art-head .crumbs li{min-width:0}
.art-head .crumbs li[aria-current]{max-width:24em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-title{font-size:clamp(38px,4.6vw,68px);line-height:1.04;margin:16px 0 0}
:lang(uk) h1.art-title{font-size:clamp(28px,3.4vw,46px);line-height:1.12}
.art-lede{margin:24px 0 0;color:var(--ink-2)}
.art-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.art-by{display:flex;align-items:center;gap:14px;min-width:0}
.art-by__pic{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--clay);flex:none}
.art-by__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.art-by__name{font-weight:500;font-size:17px;text-decoration:none}
a.art-by__name:hover{color:var(--earth)}
.art-by__role{font-size:15px;color:var(--ink-3)}
.art-share{flex:none}

.art-cover{margin-top:clamp(32px,4vw,56px)}
.art-cover__in{position:relative;aspect-ratio:29/16;overflow:hidden;background:var(--clay);border-radius:var(--r)}
.art-cover__in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.art-body{margin-top:clamp(48px,6vw,80px)}
.art-body>:first-child{margin-top:0}
.art-body blockquote{margin:1.8em 0;padding:2px 0 2px 26px;border-left:2px solid var(--earth);font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,27px);line-height:1.38;font-variation-settings:"opsz" 36;color:var(--ink)}
.art-body blockquote p{margin:0}
/* Fraunces has no Cyrillic: Ukrainian quotes stay in Gill Sans. */
:lang(uk) .art-body blockquote{font-family:var(--sans);font-style:normal;font-weight:500;font-size:21px;line-height:1.45;font-variation-settings:normal}

.art-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;max-width:760px;margin:clamp(48px,6vw,72px) 0 clamp(64px,8vw,112px);padding-top:24px;border-top:1px solid var(--line)}
.art-back{display:inline-flex;align-items:center;gap:8px;font-size:17px}

@media (max-width:900px){
  .blog-feat__link{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .blog-filters{gap:0 22px}
  .blog-filter{font-size:16px}
  .art-body blockquote{padding-left:18px}
  .art-head .crumbs li[aria-current]{max-width:14em}
}