/* ============================================================
   Блог Life Craft
   Підключається тільки на сторінках блогу, автора і 404.
   Користується токенами зі style.css, своїх кольорів не вводить.
   ============================================================ */

/* Сторінки журналу живуть на ширшій сітці, ніж решта сайту: тут
   головне — текст, і йому потрібне місце. Файл підключається тільки
   в блозі, на сторінці автора і 404, тож решти сайту це не чіпає. */
:root{--maxw:1380px}

/* ── хлібні крихти ───────────────────────────────────────── */
.crumbs{margin:0 0 clamp(18px,2.4vw,30px)}
.crumbs ol{display:flex;flex-wrap:nowrap;gap:6px;list-style:none;margin:0;padding:0;
  font-size:12.5px;color:var(--ink-3);min-width:0}
/* Назва поточної статті в кінці шляху буває довша за сам шлях —
   обрізаємо її, а не переносимо на другий рядок. */
.crumbs li{white-space:nowrap;min-width:0}
.crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}

/* ── шапка розділу ───────────────────────────────────────── */
.bhead{max-width:60ch}
/* Заголовок розділу навмисно менший за .h1 на решті сайту: з фірмовим
   шрифтом 84px розганяють його на пʼять рядків і головна стаття йде
   за межі першого екрана. 24ch тримають його у двох рядках. */
.bhead .h1{font-size:clamp(29px,3.7vw,48px);line-height:1.08;
  letter-spacing:-.03em;max-width:24ch}
.bhead .lead{margin-top:clamp(16px,2vw,24px)}
/* шапка і головна стаття мають поміститися в один екран */
.bhead-sec{padding-bottom:clamp(16px,2vw,26px)}
.feat-sec{padding:0}
/* Рядок над заголовком головного матеріалу — один редакційний рядок.
   Пігулку теми тут гасимо: вона тягнула увагу на себе і робила блок
   схожим на продуктову картку. */
.feat-sec .feat__top{gap:9px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.feat-sec .feat__top::before{content:"Головний матеріал"}
.feat-sec .feat__top>span{font:inherit;letter-spacing:inherit;color:inherit;
  background:none;border:0;padding:0;border-radius:0}
.feat-sec .feat__top>span::before{content:"·";margin-right:9px;color:var(--line-2)}
.tintro{margin-top:clamp(18px,2.4vw,28px);max-width:68ch;
  font-size:17px;line-height:1.65;color:var(--ink-2)}
.tintro p{margin:0 0 14px}
.tintro p:last-child{margin-bottom:0}

/* ── головна стаття ──────────────────────────────────────── */
.feat{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,52px);align-items:center;
  padding:clamp(22px,2.6vw,34px) 0 clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:opacity .3s var(--ease)}
.feat:hover{opacity:.92}
.feat__img{overflow:hidden;border-radius:var(--r-md);aspect-ratio:16/10;background:var(--bg-2)}
.feat__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.feat:hover .feat__img img{transform:scale(1.03)}
.feat__body{padding:0}
.feat__top{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.feat__title{margin:14px 0 0;font-size:clamp(25px,3vw,42px);line-height:1.1;
  letter-spacing:-.028em;font-weight:800;color:var(--ink)}
.feat__desc{margin:14px 0 24px;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:46ch}

/* ── рядки тем ───────────────────────────────────────────── */
.trows{border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:48px minmax(140px,1.1fr) minmax(0,2fr) 110px 24px;
  align-items:baseline;gap:16px;padding:clamp(18px,2vw,26px) 4px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .3s var(--ease),padding-left .3s var(--ease)}
.trow:hover{background:rgba(18,19,15,.03);padding-left:14px}
.trow__n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3)}
.trow__name{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.trow__desc{font-size:15px;line-height:1.5;color:var(--ink-2)}
.trow__cnt{font-size:13.5px;color:var(--ink-3);text-align:right}
.trow__arr{color:var(--ink-3);transition:transform .3s var(--ease)}
.trow:hover .trow__arr{transform:translateX(4px);color:var(--ink)}

/* ── фільтри ─────────────────────────────────────────────── */
.filters{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3vw,36px)}
.filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filters__lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-right:6px}
a.chip,button.chip{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  padding:9px 16px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;
  text-decoration:none;transition:all .25s var(--ease)}
a.chip:hover,button.chip:hover{border-color:var(--line-2);color:var(--ink)}
a.chip.is-on,button.chip.is-on{background:var(--ink);border-color:var(--ink);color:#F4F2EC}

/* ── сітка статей ────────────────────────────────────────── */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.agrid [hidden]{display:none}
.agrid__empty{margin:28px 0 0;color:var(--ink-2)}

.acard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .3s var(--ease),transform .4s var(--ease)}
.acard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.acard__img{display:block;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden}
.acard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.acard:hover .acard__img img{transform:scale(1.04)}
.acard__body{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.6vw,22px)}
.acard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--ink-3)}
.acard__top .tag{text-decoration:none}
.acard__title{margin:12px 0 0;font-size:18.5px;line-height:1.26;letter-spacing:-.02em;
  font-weight:700}
.acard__title a{color:var(--ink);text-decoration:none}
.acard__title a:hover{text-decoration:underline;text-underline-offset:3px}
.acard__desc{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px}
.acard__date{font-size:12.5px;color:var(--ink-3)}
/* Явна дія на картці: сама картка клікабельна цілком, але без видимого
   «Читати» людина цього не зчитує — Стас не одразу зрозумів, що треба
   натискати фото. */
.acard__go{font-size:13.5px;font-weight:650;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.acard__go .arr{transition:transform .25s var(--ease)}
.acard__go:hover{text-decoration:underline;text-underline-offset:3px}
.acard:hover .acard__go .arr{transform:translateX(4px)}

/* Продуктова картка в стрічці: та сама будова, що в сусідніх картках
   статей — знімок зверху в тій самій пропорції, текст під ним. Без
   фото вона читалася як дірка в сітці. Темна підкладка лишається: це
   єдине, що відрізняє пропозицію від статті, і цього досить. */
.acard--promo{background:var(--ink);color:#F4F2EC;padding:0}
.acard--promo .acard__body{padding:clamp(20px,2vw,26px);justify-content:center}
.acard--promo .acard__img{background:#1A1C17}
.acard--promo .acard__img img{opacity:.92;transition:opacity .4s var(--ease),transform .9s var(--ease)}
.acard--promo:hover .acard__img img{opacity:1}
.acard--promo .pcta__kick{color:rgba(244,242,236,.55)}
.acard--promo .acard__title{color:#F4F2EC;font-size:21px;margin-top:10px}
.acard--promo .acard__desc{color:rgba(244,242,236,.72);-webkit-line-clamp:4;margin-bottom:20px}
.acard--promo .btn--dark{background:#F4F2EC;color:var(--ink)}
.acard__all{display:inline-block;margin-top:14px;font-size:13.5px;
  color:rgba(244,242,236,.6)}

/* ── блок автора ─────────────────────────────────────────── */
.abox{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,38px);margin-top:clamp(40px,5vw,72px)}
.abox__ph{width:120px;height:120px;border-radius:var(--r-md);object-fit:cover;display:block}
.abox__kick{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.abox__name{margin:8px 0 0;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.025em;font-weight:800}
.abox__role{margin:4px 0 0;font-size:14.5px;color:var(--ink-3)}
.abox__bio{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.abox__facts{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.abox__facts li{font-size:14.5px;line-height:1.5;color:var(--ink-2);padding-left:18px;position:relative}
.abox__facts li::before{content:"→";position:absolute;left:0;color:var(--ink-3)}
.abox__facts b{color:var(--ink);font-weight:600}
.abox__links{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:18px;font-size:14.5px}
.abox__links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.abox__links a:hover{border-color:var(--ink)}

/* ── продуктовий заклик ──────────────────────────────────── */
.pcta{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;background:var(--ink);color:#F4F2EC;
  border-radius:var(--r-lg);padding:clamp(24px,3vw,44px)}
.pcta__kick{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,236,.5)}
.pcta__head{margin:12px 0 0;font-size:clamp(20px,2.4vw,30px);line-height:1.16;
  letter-spacing:-.025em;font-weight:800;color:#F4F2EC}
.pcta__line{margin:12px 0 0;font-size:16px;line-height:1.55;color:rgba(244,242,236,.74);
  max-width:52ch}
.pcta__act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pcta__meta{font-size:13px;color:rgba(244,242,236,.5)}
.pcta .btn--light{background:#F4F2EC;color:var(--ink)}

.pcta--mini{grid-template-columns:1fr;gap:14px;padding:18px;
  border-radius:var(--r-md);margin-top:22px;min-width:0}
.pcta--mini>*{min-width:0}
.pcta--mini .pcta__head{font-size:17px;line-height:1.2}
.pcta--mini .pcta__line{font-size:13.5px;max-width:none;overflow-wrap:anywhere}
.pcta--mini .pcta__act{width:100%;gap:10px}
.pcta--mini .btn{width:100%;justify-content:center;padding-left:14px;padding-right:14px;
  font-size:14px;text-align:center}

/* ── банер продукту з фотографією ─────────────────────────
   Широкий банер: знімок підкладкою під текстом, поверх — темна
   заливка. Вона не для настрою, а для контрасту: без неї світлий
   заголовок лягає на небо і зникає.
   Вузький у бічній колонці: знімок смугою зверху, текст під ним —
   так само, як у картках статей поруч. */
.pcta--photo{position:relative;isolation:isolate;overflow:hidden}
.pcta--photo > div{position:relative;z-index:2}
.pcta__ph{display:block}

/* широкий.
   Банер низький і дуже широкий, тож від знімка 16:9 лишається вузька
   смуга посередині — і голова опиняється за кадром. Два кроки: трохи
   вища мінімальна висота і зсув видимої смуги вгору. */
.pcta--photo:not(.pcta--mini){min-height:290px;align-content:center}
.pcta--photo:not(.pcta--mini) .pcta__ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 34%;z-index:0}
.pcta--photo:not(.pcta--mini)::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(12,13,10,.88) 0%,rgba(12,13,10,.74) 45%,rgba(12,13,10,.34) 100%)}

/* вузький */
.pcta--mini.pcta--photo{padding:0;gap:0}
.pcta--mini.pcta--photo .pcta__ph{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1A1C17}
.pcta--mini.pcta--photo > div{padding:0 18px}
.pcta--mini.pcta--photo > div:first-of-type{padding-top:16px}
.pcta--mini.pcta--photo > div:last-of-type{padding-bottom:18px;margin-top:14px}

@media (max-width:860px){
  .pcta--photo:not(.pcta--mini)::after{
    background:linear-gradient(180deg,rgba(12,13,10,.62) 0%,rgba(12,13,10,.88) 55%)}
}

/* ── стаття ──────────────────────────────────────────────── */
/* Перший екран статті: заголовок ліворуч, обкладинка праворуч.
   На всю ширину фото забирало цілий екран і тягнуло на себе більше
   уваги, ніж заслуговує стокова картинка, — а праворуч від заголовка
   при цьому зяяла порожнеча. Підпис автора й дати йдуть смугою під
   обома колонками. */
.ahead{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,64px);align-items:end}
.ahead__main{min-width:0;max-width:56ch}
.ahead__by{grid-column:1/-1}
.ahead__h1{margin:0;font-size:clamp(30px,4.2vw,54px)}
.ahead__lead{margin-top:18px;max-width:52ch}
.ahead__by{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.ahead__by img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ahead__by b{display:block;color:var(--ink);font-weight:600}
.ahead__by span{display:block;font-size:13px;color:var(--ink-3)}
.ahead__dates{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto;
  font-size:13px;color:var(--ink-3)}
.ahead__dates span{display:block}

.acover{margin:0;min-width:0}
.acover img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-md);background:var(--bg-2)}
.acover figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-3);
  max-width:38ch}

/* «Коротко» — не плашка, а редакційна врізка: підпис ліворуч,
   пронумеровані тези праворуч, розділені волосяними лініями. Та сама
   будова, що в масткеді журналу й на сторінці теми, тож блок читається
   як частина системи, а не як вставлена картка. */
/* Колонки ті самі, що в сітці статті нижче, — підпис стоїть рівно над
   змістом, а номери тез над текстом статті. */
.short{display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr);
  gap:clamp(24px,3.2vw,56px);align-items:start;
  margin:clamp(30px,3.6vw,48px) 0 0;padding:clamp(22px,2.4vw,30px) 0 0;
  border-top:2px solid var(--ink)}
.short__kick{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:700}
.short__kick span{display:block;margin-top:5px;font-weight:400;letter-spacing:.14em;
  color:var(--ink-3)}
.short__l{list-style:none;margin:0;padding:0;counter-reset:short;min-width:0;max-width:62ch}
.short__l li{counter-increment:short;position:relative;
  padding:0 0 16px 42px;margin-bottom:16px;border-bottom:1px solid var(--line);
  font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.short__l li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.short__l li::before{content:counter(short,decimal-leading-zero);
  position:absolute;left:0;top:3px;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}

.alayout{display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr) minmax(0,235px);
  gap:clamp(24px,3.2vw,56px);align-items:start;margin-top:clamp(34px,4vw,60px)}
.aprose{min-width:0}
/* Кегль більший, а довжина рядка та сама: так ширше місце працює на
   читабельність, а не проти неї. Рядок довший за 75 знаків читати
   важче, скільки б екрана не лишалося по боках. */
.aprose .prose{max-width:70ch;font-size:19px}
.aprose .prose h2{scroll-margin-top:100px}

.aleft{position:sticky;top:76px;min-width:0;display:flex;flex-direction:column;
  gap:20px;max-height:calc(100vh - 104px)}
.toc{min-width:0;font-size:14px;flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  padding-right:6px}
.toc::-webkit-scrollbar{width:4px}
.toc::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
.toc::-webkit-scrollbar-track{background:transparent}
.toc__m summary{list-style:none;cursor:pointer;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:12px}
.toc__m summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;
  border-left:1px solid var(--line);display:flex;flex-direction:column}
.toc li{counter-increment:toc}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;
  border-left:1px solid transparent;color:var(--ink-3);text-decoration:none;
  line-height:1.4;transition:color .25s var(--ease),border-color .25s var(--ease)}
.toc a:hover{color:var(--ink-2)}
.toc a.is-on{color:var(--ink);border-left-color:var(--ink);font-weight:600}
.toc__left{margin:18px 0 0;font-size:13px;color:var(--ink-3)}
.toc__left b{color:var(--ink)}

.arail{position:sticky;top:76px;min-width:0}
.arail__kick{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
/* Лишилася одна кнопка: скопіювати посилання. Кнопки Telegram і
   Facebook прибрані — на пошук вони не впливають ніяк, а місце і
   увагу забирали. Посилання людина однаково кидає звідки хоче. */
.shcopy{display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:var(--r-xs);background:transparent;
  color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;text-align:left;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.shcopy:hover{border-color:var(--line-2);color:var(--ink)}
.shcopy svg{flex:none}
.shcopy .ic--ok{display:none}
.shcopy.is-done{border-color:var(--pine);color:var(--pine)}
.shcopy.is-done .ic--link{display:none}
.shcopy.is-done .ic--ok{display:block}

.faq{margin:clamp(40px,5vw,64px) 0 0;max-width:68ch}
.faq h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;
  font-weight:800;margin:0 0 18px;scroll-margin-top:100px}
.faq__i{border-top:1px solid var(--line)}
.faq__i:last-child{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;position:relative;
  font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.4}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";position:absolute;right:2px;top:14px;
  font-size:20px;font-weight:400;color:var(--ink-3)}
.faq__i[open] summary::after{content:"–"}
.faq__a{padding:0 0 18px}
.faq__a p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}

.atags{margin:clamp(30px,3.4vw,44px) 0 0;font-size:14.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:18px;border-top:1px solid var(--line)}
.atags__t{color:var(--ink-3)}
/* Світліша заливка на широкому банері: з попередньою фото ледве
   проглядалося. Контраст тексту лишається в нормі — перевірено. */
.atags a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.afinal{margin-top:clamp(40px,5vw,72px)}

/* панель продукту знизу на вузькому екрані */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px
  calc(10px + env(safe-area-inset-bottom));background:rgba(18,19,15,.96);
  backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .4s var(--ease)}
.pbar.is-on{transform:none}
.pbar__in{display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto}
.pbar__name{flex:1;min-width:0;font-size:14px;color:#F4F2EC;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar .btn--dark{background:#F4F2EC;color:var(--ink);flex:none}
.pbar__x{flex:none;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(244,242,236,.12);color:#F4F2EC;font-size:17px;line-height:1}

/* підписка */
.sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,44px)}
.sub p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:52ch}

/* ── адаптив ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .alayout{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .arail{grid-column:1/-1;position:static}
  .arail__in{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
    gap:24px;align-items:start}
  .pcta--mini{margin-top:0}
  .agrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat__body{padding:0 clamp(6px,2vw,14px) clamp(10px,2vw,18px)}
  .trow{grid-template-columns:40px minmax(0,1fr) 24px;row-gap:6px}
  .trow__desc{grid-column:2;font-size:14px}
  .trow__cnt{grid-column:2;text-align:left;font-size:12.5px}
  .trow__arr{grid-row:1;grid-column:3}
  .alayout{grid-template-columns:1fr}
  .toc{position:static}
  .toc__m{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
  .toc__m summary{padding-bottom:0}
  .toc__m[open] summary{padding-bottom:12px}
  .toc__left{display:none}
  .abox{grid-template-columns:1fr}
  .abox__ph{width:88px;height:88px}
  .ahead__dates{margin-left:0;width:100%}
  .pcta{grid-template-columns:1fr}
  .arail__in{grid-template-columns:1fr}
  .readpill{display:none}
}
@media (max-width:620px){
  .agrid{grid-template-columns:1fr}
}

/* фокус видно з клавіатури — вимога доступності */
.crumbs a:focus-visible,.trow:focus-visible,.acard__title a:focus-visible,
.feat:focus-visible,.chip:focus-visible,.shcopy:focus-visible,
.toc a:focus-visible,.faq__i summary:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .feat,.acard,.trow,.pbar,.acard__img img,.feat__img img{transition:none}
  .feat:hover,.acard:hover{transform:none}
}

/* на сторінці статті лічильник живе у змісті, плаваючої пігулки немає */
.alayout ~ .readpill{display:none}


/* ══ ЖУРНАЛ — власна шапка розділу ═══════════════════════════════════
   Усередині блогу загальносайтової шапки немає: з нею блог читається як
   ще одна сторінка сайту. Повернення винесене в тонку темну смугу
   зверху — вона ж і є моментом перетину кордону. Нижче нейм-плейт і
   липкий рядок розділів. Кольори й шрифт ті самі, бренд не ламається. */

.jtop{background:var(--ink);color:rgba(244,242,236,.70);font-size:12.5px}
.jtop__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px}
.jtop a{color:inherit;text-decoration:none;letter-spacing:.015em}
.jtop a:hover{color:#F4F2EC}
.jtop__back{display:inline-flex;align-items:center;gap:8px;font-weight:650}
.jtop__arr{display:inline-block;transition:transform .25s var(--ease)}
.jtop__back:hover .jtop__arr{transform:translateX(-3px)}
.jtop__nav{display:flex;gap:clamp(14px,2vw,26px)}

.jmast{background:var(--bg);border-bottom:1px solid var(--line)}
.jmast__in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;
  gap:clamp(20px,5vw,64px);padding:clamp(26px,3.4vw,44px) 0 clamp(20px,2.6vw,32px)}
.jname{display:block;margin:0;text-decoration:none;color:var(--ink)}
.jname__brand{display:block;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3)}
.jname__word{display:block;margin-top:7px;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(40px,5.4vw,74px);line-height:.86}
a.jname:hover .jname__word{color:var(--pine)}
.jmast__stand{margin:0 0 7px;max-width:42ch;justify-self:end;
  font-size:15px;line-height:1.55;color:var(--ink-2)}
.jmast--sm .jmast__in{padding:clamp(14px,1.6vw,20px) 0}
.jmast--sm .jname__word{font-size:clamp(24px,2.2vw,32px);margin-top:4px}
.jmast--sm .jname__brand{font-size:10px;letter-spacing:.2em}

.jsec{position:sticky;top:0;z-index:60;background:rgba(241,240,236,.90);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px)}
.jsec__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:48px}
.jsec__nav{display:flex;align-items:center;gap:clamp(13px,1.7vw,24px);
  min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.jsec__nav::-webkit-scrollbar{display:none}
.jsec a{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:3px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.jsec a:hover{color:var(--ink)}
.jsec a.is-on{color:var(--ink);font-weight:650;border-bottom-color:var(--ink)}
.jsec__me{flex:none;color:var(--ink-3)}

@media (max-width:860px){
  .jmast__in{grid-template-columns:1fr;align-items:start;gap:14px}
  .jmast__stand{justify-self:start;margin:0;max-width:54ch;font-size:14.5px}
}
@media (max-width:620px){
  .jtop__in{height:36px}
  .jtop{font-size:12px}
  .jsec__me{display:none}          /* лишається в підвалі */
  .jname__word{font-size:clamp(34px,11vw,46px)}
}

/* Рядок розділів на вузькому екрані прокручується — підказуємо це
   згасанням праворуч, інакше здається, що список обрізано. */
@media (max-width:860px){
  .jsec__in{position:relative}
  .jsec__nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);padding-right:18px}
}

/* Сторінка теми: заголовок ліворуч, вступ праворуч. Під повношириною
   шапкою журналу вступ у вузькій лівій колонці лишав порожньою праву
   половину екрана — те саме, що не подобалося на головній блогу. */
.thead .h1{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.04em}
.thead .tintro{margin-top:clamp(16px,2vw,24px)}
@media (min-width:900px){
  .thead{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(30px,5vw,76px);align-items:start}
  .thead .tintro{margin-top:7px}
}

/* Лічильник «N хв лишилось» у липкому рядку журналу: видно завжди,
   незалежно від того, наскільки довгий зміст статті. На його місці
   на мить зʼявляється слово відмітки — «Половина позаду», «Дочитано». */
.jsec__left{position:relative;flex:none;margin:0;font-size:13px;color:var(--ink-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.jsec__left b{color:var(--ink);font-weight:650}
.jsec__left>span{transition:opacity .45s var(--ease)}
.jsec__left>i{position:absolute;right:0;top:0;font-style:normal;font-weight:650;
  color:var(--pine);opacity:0;transition:opacity .45s var(--ease)}
.jsec__left.is-mark>span{opacity:0}
.jsec__left.is-mark>i{opacity:1}


/* ══ АУДІОВЕРСІЯ ═══════════════════════════════════════════════════
   Один рядок над змістом: кругла кнопка, назва, тривалість праворуч.
   Смужка перемотування зʼявляється тільки під час програвання, тож у
   спокої це одна тонка лінійка. */

.apanel{display:flex;flex-direction:column;gap:2px;flex:none;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.apanel__note{margin:4px 0 0 40px;font-size:12px;color:var(--ink-3)}

.arow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;
  gap:10px;margin:0;padding:7px 0;font-size:13.5px;color:var(--ink-2)}
.arow__b{display:grid;place-items:center;width:30px;height:30px;flex:none;padding:0;
  border:1px solid var(--line-2);border-radius:50%;background:transparent;
  color:var(--ink);cursor:pointer;transition:background .25s var(--ease),
  border-color .25s var(--ease),color .25s var(--ease)}
.arow__b:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.arow__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow__v{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.arow .ic--pause{display:none}
.arow.is-on .ic--play{display:none}
.arow.is-on .ic--pause{display:block}
.arow.is-on{color:var(--ink)}
.arow.is-on .arow__b{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* смужка програвача — лише коли аудіо грає */
.arow__line{grid-column:1/-1;display:none;margin:4px 0 2px}
.arow.is-on .arow__line{display:block}
.arow__line{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.arow__line i{display:block;height:100%;width:0;background:var(--pine);
  transition:width .2s linear}

/* озвучки ще немає — рядок лишається, але приглушений і без дії */
.arow--off{color:var(--ink-3)}
.arow--off .arow__b{border-style:dashed;border-color:var(--line);color:var(--ink-3)}
.arow--off .arow__b:hover{background:transparent;border-color:var(--line);color:var(--ink-3)}

.arow__b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* позначка «Аудіо» на картці статті — тільки там, де аудіо справді є */
.acard__top .au{font-weight:650;color:var(--pine)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

@media (max-width:860px){
  .aleft{position:static;max-height:none;gap:16px}
  .toc{max-height:none;overflow:visible;padding-right:0}
  .apanel{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
  .apanel{padding-bottom:14px}
  .shcopy{margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .arow__line i{transition:none}
}


@media (max-width:900px){
  .ahead{grid-template-columns:1fr;align-items:start;gap:clamp(20px,3vw,28px)}
  .ahead__main{max-width:none}
  .acover img{aspect-ratio:16/10}
  .short{grid-template-columns:1fr;gap:16px;padding-top:18px}
  .short__kick span{display:inline;margin:0 0 0 8px}
}


/* ══ ВИНОСКИ: зазирнути, не втрачаючи місця ══════════════════════════
   Посилання вперед у тексті підкреслене пунктиром. Наведення — і
   збоку зʼявляється картка з тим, про що йтиметься. Читач лишається
   на своєму абзаці. Клік усе одно працює як звичайний перехід. */

.prose a.has-peek{color:var(--ink);text-decoration:none;
  border-bottom:1px dashed var(--line-2);padding-bottom:1px;
  transition:border-color .2s var(--ease)}
.prose a.has-peek:hover{border-bottom-color:var(--ink)}
.prose [data-note].has-peek{cursor:help;border-bottom:1px dashed var(--line-2)}

.peek{position:absolute;z-index:200;max-width:340px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  padding:16px 18px;box-shadow:0 18px 40px -18px rgba(18,19,15,.35);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.peek.is-on{opacity:1;transform:none;pointer-events:auto}
.peek::after{content:"";position:absolute;left:var(--arrow,50%);bottom:-6px;
  width:11px;height:11px;margin-left:-6px;background:var(--surface);
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  transform:rotate(45deg)}
.peek--below::after{bottom:auto;top:-6px;
  border:0;border-left:1px solid var(--line-2);border-top:1px solid var(--line-2)}
.peek__k{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.peek__h{margin:8px 0 0;font-size:15.5px;line-height:1.3;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)}
.peek__b{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.peek__go{display:inline-block;margin-top:12px;font-size:13px;font-weight:650;color:var(--pine)}

@media (max-width:620px){
  .peek{max-width:none;left:12px!important;right:12px;width:auto!important}
  .peek::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .peek{transition:none}
}