/*
Theme Name: bc.cxemu
Theme URI: https://t.me/bc_cxemu
Author: bc.cxemu
Description: Тема сайту bc.cxemu за Брендбуком 2.0: 4 кольори (+ службові), Fixel у чотирьох накресленнях, поля 72 px, Тікер і плашки рубрик — готові файли бренд-кіту.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: bc-cxemu
License: Proprietary (шрифти Fixel — SIL OFL 1.1, див. assets/fonts/OFL.txt)
*/

@font-face{font-family:"Fixel Display";font-weight:900;font-display:swap;src:url(assets/fonts/FixelDisplay-Black.woff2) format("woff2")}
@font-face{font-family:"Fixel Display";font-weight:700;font-display:swap;src:url(assets/fonts/FixelDisplay-Bold.woff2) format("woff2")}
@font-face{font-family:"Fixel Text";font-weight:400;font-display:swap;src:url(assets/fonts/FixelText-Regular.woff2) format("woff2")}
@font-face{font-family:"Fixel Text";font-weight:600;font-display:swap;src:url(assets/fonts/FixelText-SemiBold.woff2) format("woff2")}

:root{
  /* Основні кольори брендбуку */ --ink:#14161A; --paper:#F6F4EF; --signal:#FF4D1F; --white:#FFFFFF;
  /* Службові */ --card:#FBFAF7; --line:#DEDAD2; --muted:#5C6169; --grey:#8A8F96; --night:#A3A8AF; --sigtext:#C2340B; --ink2:#2A2D33;
  --bg:var(--paper); --surface:var(--white); --surface2:var(--card); --fg:var(--ink); --fg2:var(--muted); --fg3:var(--muted);
  --rule:var(--line); --link:var(--sigtext); --invert-bg:var(--ink); --invert-fg:var(--white); --bar:var(--line); --quote:var(--ink);
  --lt:inline-block; --dk:none; --shade:rgba(20,22,26,.22);
  --f-disp:"Fixel Display","Fixel Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-text:"Fixel Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-xl:clamp(34px,5.2vw,64px); --t-l:clamp(22px,2.2vw,28px); --t-m:18px; --t-s:13px;
  --m:clamp(16px,6.67vw,72px);
  --gap:24px;
  color-scheme:light;
}
/* Типово — світла тема; темна лише за вибором читача (кнопка «Тема», зберігається в браузері) */
:root[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--ink2); --surface2:#1B1D22; --fg:var(--white); --fg2:var(--night); --fg3:var(--night);
  --rule:var(--muted); --link:var(--signal); --invert-bg:#0E0F12; --bar:var(--ink); --quote:var(--ink2); --lt:none; --dk:inline-block; --shade:rgba(255,255,255,.2); color-scheme:dark}
/* Темна тема: на підкладках Ink 2 дрібний Signal не читається (4,2:1) — посилання там білі (White — «літери на темному»), підкреслення Signal */
:root[data-theme="dark"] :is(.feed,.entry .bc-doc,.entry .bc-tg,.entry .bc-scheme,.origin,.alarm.l-clear){--link:var(--fg)}
:root[data-theme="dark"] .entry :is(.bc-doc,.bc-tg,.bc-scheme) a{text-decoration-color:var(--signal)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(255,77,31,.2)}
/* Дотик: без затримки й подвійного збільшення на кнопках і посиланнях */
a,button,input,select,textarea,label,summary,[role=button]{touch-action:manipulation}
label img{pointer-events:none}
body{margin:0;padding-top:env(safe-area-inset-top,0px);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);font:400 var(--t-m)/1.55 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
.wrap{max-width:1296px;margin-inline:auto;padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
a{color:inherit;text-decoration:none}
/* Якорі (зміст статті, «До змісту») не ховаються під липкою панеллю рубрик */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-padding-bottom:16px}
html:has(body.admin-bar){scroll-padding-top:calc(env(safe-area-inset-top,0px) + 104px)}
@media (max-width:782px){html:has(body.admin-bar){scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-disp);margin:0;text-wrap:balance;letter-spacing:-.01em;overflow-wrap:break-word;overflow-wrap:anywhere}
.top5 .t,.fi h3,.meta{overflow-wrap:break-word;overflow-wrap:anywhere} /* довгі посилання й коди в назвах не розпирають сторінку */
h1{font-weight:900;font-size:var(--t-xl);line-height:1.05}
h2{font-weight:700;font-size:var(--t-l);line-height:1.15}
h3{font-weight:700;font-size:var(--t-m);line-height:1.3}
p{margin:0}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;font:600 15px var(--f-text)}
.skip:focus{left:16px}
.lbl{font:600 var(--t-s)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.meta{font:600 var(--t-s)/1.35 var(--f-text);color:var(--fg3)}
.lt{display:var(--lt)} .dk{display:var(--dk)}
.rub{display:inline-flex;height:28px;flex:none} .rub img{height:28px;width:auto}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;border:1.5px solid var(--rule);font:600 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.chip.dark{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;background:var(--fg);color:var(--bg);font:600 15px/1 var(--f-text);cursor:pointer;white-space:nowrap}
.btn.sig{background:var(--signal);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px}
@media (hover:hover){.btn:hover{filter:brightness(1.08)}} @media (hover:hover){.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}}
.row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* Рівень небезпеки й тривога. Помаранчевий — Signal; жовтий #FFD21F і червоний #D81B1B — виняток брендбуку лише для цієї смуги,
   зелений #1FA85A — лише для «Відбою» */
.alarm{background:var(--signal);color:var(--ink)}
.alarm .wrap{display:flex;align-items:center;gap:10px;min-height:40px;padding-block:8px}
.alarm p{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:600 15px/1.3 var(--f-text)}
.alarm p span{font-weight:400}
.alarm p em{font:600 12px/1 var(--f-text);font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;box-shadow:inset 0 0 0 1.5px currentColor}
.alarm p a{margin-left:auto;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.alarm i{flex:none;width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
/* крапка — на рівні першого рядка (позначки рівня), навіть коли текст переноситься */
.alarm .wrap{align-items:flex-start}
.alarm i{margin-top:6px}
.alarm.l-clear i{margin-top:5px}
@media (max-width:720px){
  .alarm p em{order:0}
  .alarm p a{order:1}
  .alarm p b{order:2;flex-basis:100%}
  .alarm p span{order:3}
}
.alarm.l-yellow{background:#FFD21F;color:var(--ink)}
.alarm.l-red{background:#D81B1B;color:var(--white)}
.alarm.l-red i{animation-duration:.8s}
.alarm.l-clear{background:var(--surface);color:var(--fg);border-bottom:1px solid var(--rule)}
.alarm.l-clear i{background:#1FA85A;animation:none}
@media (prefers-reduced-motion:reduce){.alarm i{animation:none}}

/* Службова смуга */
.util{background:var(--invert-bg);color:var(--white)}
.util .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;min-height:40px;font:600 var(--t-s)/1.3 var(--f-text)}
.util span{white-space:nowrap;color:var(--night)}
.util .wrap>span:not(.sp){line-height:40px}
.util a span{color:inherit} .util b{color:var(--white);font-weight:600}
.util .sp{flex:1}
.util a{white-space:nowrap;color:var(--white);display:inline-flex;align-items:center;min-height:40px} @media (hover:hover){.util a:hover{color:var(--signal)}}
.cnt{display:inline-grid;place-items:center;min-width:18px;min-height:18px;padding:0 4px;margin-left:4px;background:var(--signal);color:var(--ink);font-size:12px}
.util a .cnt{color:var(--ink)} /* лічильник черги — чорним на Сигналі, як у меню й редакції */

.util .tt{display:inline-flex;align-items:center;gap:6px;min-height:40px;border:0;background:none;padding:0;color:var(--white);font:600 var(--t-s)/1.3 var(--f-text);cursor:pointer;white-space:nowrap}
@media (hover:hover){.util .tt:hover{color:var(--signal)}}
.util .tt svg{width:14px;height:14px}
.util .tt span{color:inherit}
.util span.sp{min-width:0}
.util.ed .wl{display:none} /* редакторам — коротше, щоб рядок уміщав посилання редакції */
.readbar{position:fixed;top:0;left:0;z-index:60;height:3px;width:100%;background:var(--signal);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@media (prefers-reduced-motion:reduce){.readbar{display:none}}

/* Шапка */
.mast .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px 10px;align-items:center;padding-block:28px 24px}
.mast .brand{margin-right:22px}
.stog{display:none!important;width:44px;padding:0}
.brand{display:grid;gap:10px;min-width:0}
.brand .r{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.brand a.tk{display:block;line-height:0}
.brand a.tk img{height:48px;width:auto}
.brand .slog{font:900 var(--t-l)/1.1 var(--f-disp)}
.brand small{font:400 15px/1.4 var(--f-text);color:var(--fg2);max-width:60ch}
.act{display:flex;gap:10px;align-items:center}
form.search{display:flex;align-items:center;min-height:44px;border:1.5px solid var(--rule);background:var(--surface);min-width:0;margin:0}
form.search input{border:0;background:transparent;color:var(--fg);font:400 16px var(--f-text);padding:0 12px;width:300px;min-width:0;height:auto;align-self:stretch;-webkit-appearance:none;appearance:none}
form.search input:focus{outline:none} form.search:focus-within{border-color:var(--fg)}
form.search:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
form.search input::placeholder{color:var(--fg3);opacity:1}
form.search button{border:0;background:none;color:var(--fg);align-self:stretch;padding:0 12px;cursor:pointer;display:grid;place-items:center}
nav.rubs{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-block:1px solid var(--rule)}
.admin-bar nav.rubs{top:32px}
@media (max-width:782px){.admin-bar nav.rubs{top:0}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);pointer-events:none}
nav.rubs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.rubs .wrap::-webkit-scrollbar{display:none}
nav.rubs a{display:flex;align-items:center;min-height:52px;padding:0 12px;font:600 15px/1 var(--f-text);white-space:nowrap;color:var(--fg2);border-bottom:3px solid transparent}
@media (hover:hover){nav.rubs a:hover{color:var(--fg)}} nav.rubs a.on{color:var(--fg);border-bottom-color:var(--signal)}
nav.rubs .sep{flex:none;width:1px;background:var(--rule);margin:14px 8px}

main{padding-block:40px 72px;flex:1 0 auto;width:100%}
.sec+.sec,article+.sec{margin-top:72px}
.sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding-bottom:14px;border-bottom:2px solid var(--fg);margin-bottom:24px}
.sh a{font:600 15px/1 var(--f-text);color:var(--link);white-space:nowrap}
@media (hover:hover){.sh a:hover{text-decoration:underline}}

/* Обкладинки */
.cover{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:var(--surface2) center/cover no-repeat;overflow:hidden}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.cover.fit{background:var(--surface2)}
@supports not (aspect-ratio:16/9){.cover{height:0;padding-top:56.25%} .tip .cover{height:auto;padding-top:0} .nf .cover{padding-top:100%}}
.cover.fit img{object-fit:contain;object-position:50% 50%}
.cover.p-skhema{background-image:url(assets/patern/bc.cxemu-patern-skhema.svg)}
.cover.p-skhema-chorna{background-image:url(assets/patern/bc.cxemu-patern-skhema-chorna.svg)}
.cover.p-skhema-lehka{background-image:url(assets/patern/bc.cxemu-patern-skhema-lehka.svg)}

/* Головна: перший екран */
.top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.lead{display:grid;gap:22px;min-width:0}
/* планшет горизонтально, телефон горизонтально: заголовок головної теми видно на першому екрані */
@media (min-width:700px) and (max-width:1080px) and (orientation:landscape){
  .lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--gap);align-items:start}
  .lead>.cover{grid-column:1;grid-row:1/span 6}
  .lead>:not(.cover){grid-column:2}
  .lead h1{font-size:clamp(26px,3.6vw,40px)}
}
@media (hover:hover){.lead h1 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}
.dek{color:var(--fg2);max-width:62ch}
.bignum{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--rule)}
.bignum .v{font:700 clamp(40px,5vw,64px)/1 var(--f-disp);letter-spacing:-.02em;padding-bottom:12px;border-bottom:6px solid var(--signal);justify-self:start}
.intro{display:grid;gap:24px;align-content:start}
.intro .what{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:2px solid var(--fg)}
.intro .what div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.intro .what b{font:700 var(--t-m)/1.3 var(--f-disp)}
.intro .what span{color:var(--fg2);font-size:15px;line-height:1.45}

/* Стрічка */
.feed{display:grid;background:var(--surface);border:1px solid var(--rule);min-width:0}
.top .feed{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px)}
.aside.free,.top .feed.free{position:static}
/* Довга бічна колонка статті: зміст лишається видимим під час читання, стрічка й «Найчитаніше» — наприкінці статті */
@media (min-width:1081px){
  .aside.has-toc{position:static;align-self:stretch;display:flex;flex-direction:column}
  .aside.has-toc>.toc-w{flex:1 0 auto}
  .aside.has-toc>.toc-w>.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
}
.admin-bar .top .feed{top:104px}
.feed-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--rule)}
.feed-h h2{font-size:var(--t-m)}
.live{display:inline-flex;align-items:center;gap:8px;font:600 var(--t-s)/1 var(--f-text);color:var(--fg2)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.fi{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
@media (hover:hover){.fi:hover{background:var(--surface2)}} @media (hover:hover){.fi:hover h3{text-decoration:underline}}
.fi time{font:600 15px/1.4 var(--f-text)}
.fi h3{font:600 15px/1.4 var(--f-text);letter-spacing:0}
.fi .src{grid-column:2;font:600 12px/1.2 var(--f-text);color:var(--fg3)}
.fi.day{display:block;padding:10px 18px;background:var(--surface2);font:600 var(--t-s)/1 var(--f-text);color:var(--fg2);letter-spacing:.06em;text-transform:uppercase}
.feed-f{padding:14px 18px}
.empty{padding:28px 18px;color:var(--fg2);font-size:15px;display:grid;gap:8px}

/* Картки */
.grid3{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px var(--gap)}
.grid3>*{grid-column:span 2}
.grid3>:first-child:nth-last-child(3n+2),.grid3>:first-child:nth-last-child(3n+2)+*{grid-column:span 3}
.grid3>:first-child:nth-last-child(3n+4){grid-column:1/-1}
.card{display:grid;gap:14px;align-content:start;min-width:0;position:relative}
.card .cover{aspect-ratio:16/9}
.card h2 a::after{content:"";position:absolute;inset:0}
@media (hover:hover){.card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}
.card .n{font:700 var(--t-l)/1 var(--f-disp)}
.card .n::after{content:"";display:block;width:48px;height:4px;background:var(--signal);margin-top:10px}
.card p{color:var(--fg2);font-size:16px;line-height:1.5}
.tggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.tgc{display:grid;gap:10px;align-content:start;min-width:0}
.tgc .cover{aspect-ratio:16/9;border:1px solid var(--rule)}
@media (hover:hover){.tgc:hover h3{text-decoration:underline}}

/* Найчитаніше */
.top5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--gap);counter-reset:t}
/* 5 позицій без «сиріт»: на планшеті дві колонки по вертикалі (1–3 і 4–5), на телефоні — список */
@media (max-width:1080px){.top5 ol{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column}}
@media (max-width:520px){.top5 ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
.top5 li{counter-increment:t;border-bottom:1px solid var(--rule)}
.top5 a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:16px 0;align-items:start}
.top5 a::before{content:counter(t);grid-row:span 2;font:700 40px/1 var(--f-disp);color:var(--signal)}
.top5 .t{font:700 var(--t-m)/1.3 var(--f-disp)}
@media (hover:hover){.top5 a:hover .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}}
.aside .top5 ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
.aside .top5 .sh{margin-bottom:4px}

/* Маєте новину */
.tip{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--invert-bg);color:var(--white)}
.tip .t{padding:48px;display:grid;gap:18px;align-content:center}
.tip .t p{color:var(--night);max-width:46ch}
.tip .cover{aspect-ratio:auto;min-height:260px}
.tip .btn.ghost{color:var(--white);box-shadow:inset 0 0 0 1.5px var(--grey)}

/* Підвал */
.foot{background:var(--invert-bg);color:var(--white)}
.foot .wrap{padding-block:56px 40px;display:grid;gap:40px}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot h4,.foot .fh{margin:0 0 12px;font:600 var(--t-s)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot ul a{color:var(--white)} @media (hover:hover){.foot ul a:hover{color:var(--signal)}}
.foot .tik{height:36px;width:auto;display:block}
.foot .slog{font:900 var(--t-l)/1.1 var(--f-disp);margin-top:20px}
.foot .about{color:var(--night);font-size:15px;line-height:1.5;margin-top:12px;max-width:40ch}
.foot .wrap{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.foot .bot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font:400 var(--t-s)/1.5 var(--f-text);color:var(--grey);border-top:1px solid var(--ink2);padding-top:20px}
@media (hover:hover){.foot .bot a:hover{color:var(--white)}}

/* Стаття */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 var(--t-s)/1.3 var(--f-text);color:var(--fg3);margin-bottom:28px}
@media (hover:hover){.crumbs a:hover{color:var(--fg)}}
.art-head{display:grid;gap:22px;max-width:960px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-block:16px;border-block:1px solid var(--rule)}
.who{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--f-text)}
.who i{width:36px;height:36px;border-radius:50%;background:var(--fg);display:grid;place-items:center;color:var(--bg);font:700 14px var(--f-disp);font-style:normal;flex:none}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center}
.ico{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer;padding:0}
@media (hover:hover){.ico:hover{border-color:var(--fg)}}
.ico svg{width:18px;height:18px}
.upd{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;background:var(--fg);color:var(--bg);font:600 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase}
.hero-img{margin:32px 0 0;display:grid;gap:10px}
.hero-img img{width:100%;display:block}
.hero-img figcaption,.wp-caption-text,.wp-element-caption{font:400 var(--t-s)/1.5 var(--f-text);color:var(--fg2)}
.art{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:72px;margin-top:40px}
.aside{display:grid;gap:32px;align-content:start;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px)}
.admin-bar .aside{top:112px}
.toc{display:grid;border-top:2px solid var(--fg)}
.toc .lbl{padding:12px 0}
.toc a{padding:12px 0 12px 0;border-bottom:1px solid var(--rule);font:600 15px/1.35 var(--f-text);color:var(--fg2);box-shadow:inset 0 0 0 0 var(--signal);transition:box-shadow .15s,padding .15s,color .15s}
.toc a[aria-current]{color:var(--fg);padding-left:12px;box-shadow:inset 3px 0 0 0 var(--signal)}
@media (hover:hover){.toc a:hover{color:var(--fg)}}
.tik-sign{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--rule)}
.tik-sign img{height:28px;width:auto;max-width:none}
.tik-sign>span{flex:none}

/* Текст статті (і редактор) */
.entry{display:grid;gap:24px;align-content:start;font-size:var(--t-m);line-height:1.7;min-width:0} /* короткий текст поруч із високою бічною колонкою не «розтягується» проміжками */
.entry > *{margin:0;max-width:100%}
.entry p,.entry li,.entry figcaption,.entry blockquote,.entry cite,.res p,.card p{overflow-wrap:break-word;overflow-wrap:anywhere}
.entry h2{margin-top:24px}
.entry h3{margin-top:12px;font-size:20px}
.entry a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:22px;display:grid;gap:6px}
.entry img{display:block}
.entry figure{display:grid;gap:10px}
.entry .wp-block-image img,.entry .wp-block-gallery img{width:100%}
/* вертикальні фото не вищі за екран: показуємо цілком, по центру */
.entry .wp-block-image img{max-height:85vh;max-height:85dvh;object-fit:contain}
.hero-img img{max-height:85vh;max-height:85dvh;object-fit:contain}
.entry .wp-block-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.entry .wp-block-gallery figure{margin:0}
/* плитки галереї однакові, але кадр не обрізаємо: на фото буває текст */
.entry .wp-block-gallery:not(:has(> figure:only-child)) figure{aspect-ratio:4/3;background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.entry .wp-block-gallery:not(:has(> figure:only-child)) figure img{width:100%!important;height:100%!important;object-fit:contain!important}
.entry .wp-block-embed iframe,.entry iframe{max-width:100%}
.entry table{width:100%;border-collapse:collapse;font-size:16px}
.entry td,.entry th{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.entry .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry blockquote,.entry .wp-block-quote,.entry .wp-block-pullquote{background:var(--quote);color:var(--white);padding:32px;margin:0;border:0;display:grid;gap:14px}
.entry blockquote::before,.entry .wp-block-quote::before{content:"«";font:900 64px/0.6 var(--f-disp);color:var(--signal);height:28px}
.entry blockquote p{font:700 var(--t-l)/1.3 var(--f-disp)}
.entry blockquote .wp-element-caption{color:var(--night)}
.entry blockquote cite{font:600 var(--t-s)/1.4 var(--f-text);color:var(--night);font-style:normal}
.entry .bc-num{display:grid;gap:8px}
.entry .bc-num .v,.entry p.bc-num-v{font:700 clamp(40px,5vw,64px)/1 var(--f-disp);letter-spacing:-.02em;padding-bottom:12px;border-bottom:6px solid var(--signal);justify-self:start;display:inline-block}
.entry p.bc-num-n,.entry .bc-num .n{font:600 var(--t-s)/1.4 var(--f-text);color:var(--fg3)}
.entry .bc-doc{background:var(--surface);border:1px solid var(--rule);padding:28px;display:grid;gap:14px}
.entry .bc-doc p{font-size:16px;line-height:1.55}
.entry .bc-doc .bc-doc-h,.entry p.bc-doc-h{font:600 var(--t-s)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.entry .bc-hl,.entry p.bc-hl,.entry mark{background:var(--signal);color:var(--ink);font:600 16px/1.45 var(--f-text);padding:14px 16px}
.entry mark{padding:1px 4px}
/* посилання на помаранчевій підкладці (Ключовий рядок, виділення) — графітом, як текст; у цитаті — Signal на Ink, у дрібному підписі — колір підпису */
.entry :is(.bc-hl,mark) a{color:inherit;text-decoration-color:currentColor}
/* редактор кладе посилання поверх виділення (<a><mark>…</mark></a>): підкреслення графітом, без подвійного відступу між шматками */
.entry a:has(> mark){color:var(--ink);text-decoration-color:var(--ink)}
.entry a > mark{padding-inline:0}
/* …і в блоках «Документ»/Telegram у темній темі (там підкреслення посилань — Signal, на помаранчевому його не видно) */
:root[data-theme="dark"] .entry :is(.bc-doc,.bc-tg,.bc-scheme) :is(.bc-hl,mark) a,:root[data-theme="dark"] .entry :is(.bc-doc,.bc-tg,.bc-scheme) a:has(> mark){text-decoration-color:var(--ink)}
.entry :is(blockquote,.wp-block-quote,.wp-block-pullquote) a{color:var(--signal)}
.entry :is(blockquote,.wp-block-quote,.wp-block-pullquote) :is(cite,.wp-element-caption) a{color:inherit;text-decoration-color:var(--signal)}
.entry .bc-reply{border:2px solid var(--fg);padding:24px;display:grid;gap:10px}
.entry .bc-reply .bc-reply-h,.entry p.bc-reply-h{font:600 var(--t-s)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.entry .bc-sources{font-size:16px}
.entry .bc-tg{background:var(--surface);border:1px solid var(--rule);padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:15px}
.entry .bc-embed iframe,.entry .wp-block-embed iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.entry .bc-embed a{color:var(--link);text-decoration:underline;overflow-wrap:anywhere}
.entry .bc-tgembed{min-height:120px}
.entry hr{border:0;border-top:1px solid var(--rule);margin:8px 0;width:100%}
.entry .bc-scheme{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);padding:24px}
.sources{display:grid;gap:10px}
.entry img.lt{display:var(--lt)} .entry img.dk{display:var(--dk)}
.entry .wp-block-table table{border:0}
.entry .wp-block-table td,.entry .wp-block-table th{border:0;border-bottom:1px solid var(--rule)}
.entry .wp-block-table thead{border:0}
.sources ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px}
.sources a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* Новина з Telegram */
.tgpost{max-width:760px;display:grid;gap:22px}
.tgpost h1{font-size:clamp(28px,3.6vw,44px)}
.tgpost .entry{gap:12px;line-height:1.6}
.tgpost .tpl{display:block;width:100%;border:1px solid var(--rule);max-height:85vh;max-height:85dvh;object-fit:contain;background:var(--surface2)}
.tgpost iframe{min-width:0!important;max-width:100%} /* віджет Telegram має min-width 320 px — на вузьких екранах виходив за край */
.tgpost + .sec{margin-top:56px}
.origin{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--rule);padding:16px 18px}

/* Архіви */
.arch-h{display:grid;gap:10px;padding-bottom:20px;border-bottom:2px solid var(--fg);margin-bottom:28px}
.arch-h p{color:var(--fg2);max-width:60ch}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.pager .page-numbers{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:1.5px solid var(--rule);font:600 15px var(--f-text)}
.pager .page-numbers.current{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (hover:hover){.pager a.page-numbers:hover{border-color:var(--fg)}}
.res{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--rule);position:relative}
.res .cover{aspect-ratio:16/9}
.res h2 a::after{content:"";position:absolute;inset:0}
@media (hover:hover){.res:hover h2{text-decoration:underline}}
.res p{color:var(--fg2);font-size:16px}
.page-body{max-width:720px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}
.cols>.aside .top5{margin:0}
.pnav a.on{color:var(--fg);box-shadow:inset 3px 0 var(--signal);padding-left:14px}
.page-body .entry{gap:20px}

/* 404 */
.nf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.nf .cover{aspect-ratio:1/1}

/* Рядки, що гортаються вбік: край плавно згасає, поки є ще вміст (класи .fl / .fr ставить assets/fade.js) */
.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}

/* Мобільне меню (до 1080 px): розділи, графік, тема, соцмережі, вхід — те, що на широкому екрані в службовому рядку */
.mtog{display:none!important;width:44px;padding:0}
.mtog .x,.mast.mo .mtog .o{display:none}
.mast.mo .mtog .x{display:block}
.mast.mo .mtog{background:var(--fg);color:var(--bg);box-shadow:none}
.mmenu{background:var(--invert-bg);color:var(--white)}
.mmenu .wrap{display:grid;padding-block:4px 20px}
.mmenu ul{list-style:none;margin:0;padding:0}
.mmenu a,.mmenu .tt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0;border:0;background:none;color:var(--white);font:600 16px/1.3 var(--f-text);text-align:left;cursor:pointer}
.mmenu .tt svg{width:16px;height:16px;flex:none}
.mm-rubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding-bottom:8px;border-bottom:1px solid var(--ink2)}
.mm-rubs a.on{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:6px}
.mm-list li+li,.mm-acc li{border-top:1px solid var(--ink2)}
.mm-acc{margin-top:12px}
.mm-h{margin:16px 0 0;font:600 var(--t-s)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.mm-soc{display:flex;flex-wrap:wrap;column-gap:24px}
.mm-soc a{width:auto}
@media (min-width:1081px){.mmenu{display:none!important}}

/* Адаптивність */
@media (max-width:1240px){
  .mast .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .mast .brand{grid-column:1;grid-row:1;margin-right:0}
  .mast .act{grid-column:2;grid-row:1}
  .stog{display:inline-flex!important}
  .mast form.search{grid-column:1/-1;grid-row:2;display:none}
  .mast.so form.search{display:flex}
  .mast.so .stog{background:var(--fg);color:var(--bg);box-shadow:none}
  form.search input{width:100%}
}
@media (max-width:820px){.act .btn.sig .t{display:none}}
@media (max-width:1366px){.util .wl{display:none} .util.ed .wd{display:none}}
@media (max-width:1440px){.util.ed .soc{display:none}} /* коротший рядок: «+8°» замість «Біла Церква +8°, хмарно», «⚡ Графік» */
@media (max-width:1080px){
  .cols{grid-template-columns:1fr;gap:56px}
  .aside .toc,.aside .toc-w,.aside.has-toc{display:none!important}
  .util .ua{display:none}
  .mtog{display:inline-flex!important}
  .top{grid-template-columns:1fr}
  .top .feed{position:static}
  .tggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tggrid>:first-child:nth-last-child(odd){grid-column:1/-1}
  .art{grid-template-columns:1fr;gap:40px} .aside{position:static}
}
@media (max-width:820px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3>*,.grid3>:first-child:nth-last-child(3n+2),.grid3>:first-child:nth-last-child(3n+2)+*,.grid3>:first-child:nth-last-child(3n+4){grid-column:auto}
  .grid3>:first-child:nth-last-child(odd){grid-column:1/-1}
  .tip{grid-template-columns:1fr} .tip .t{padding:32px 24px} .tip .cover{min-height:160px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .nf{grid-template-columns:1fr}
  .res{grid-template-columns:120px minmax(0,1fr);gap:16px}
  .intro .what{grid-template-columns:1fr}
}
@media (max-width:520px),(max-width:1080px) and (max-height:500px){
  .brand a.tk img{height:36px} .brand .slog{font-size:20px} .brand small{display:none}
  .mast .wrap{padding-block:16px 14px;gap:12px 8px;align-items:start}
  /* слоган на всю ширину під логотипом (кнопки праворуч на рівні логотипа) — не переноситься на вузькому телефоні */
  .mast .brand{grid-column:1/-1;grid-row:1}
  .mast .act{grid-column:2;grid-row:1;position:relative;z-index:1}
  .act .btn.sig .t{display:none}
  /* слоган не заходить під кнопки: на вузьких — окремим рядком, на ширших (телефон горизонтально) — місце під кнопки */
  .brand .slog{flex-basis:100%}
}
@media (min-width:700px) and (max-width:1080px) and (max-height:500px){
  .brand .slog{flex-basis:auto}
  .brand .r{padding-right:170px}
}
@media (max-width:520px){
  main{padding-top:24px}
  .crumbs{margin-bottom:16px}
  .art-head{gap:16px}
  .grid3{grid-template-columns:1fr}
  .tggrid{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr}
  .share{margin-left:0}
  .util .wd{display:none}
  .util .wrap{column-gap:12px}
  .res{grid-template-columns:1fr} .res .cover{display:none}
}
@media (max-width:400px){.util .eur{display:none}}
@media (max-width:360px){
  .brand a.tk img{height:32px}
  .mast .act{gap:6px} .mast .act .btn{width:40px;height:40px;padding:0}
}
/* Сенсорні екрани: зони натискання щонайменше ~44 px */
@media (pointer:coarse){
  .btn.sm{min-height:44px}
  .ico{width:44px;height:44px}
  .sh a,.crumbs a,.byline a,.tik-sign a{padding-block:12px}
  .foot ul{gap:0} .foot ul a{display:block;padding-block:11px}
  .foot .bot a{display:inline-block;padding-block:12px;margin-block:-12px}
  .util a,.util .tt{min-height:44px;min-width:44px;justify-content:center}
  .brand a.tk{padding-block:4px}
  .sh a{padding-block:14px}
  .row>a:has(>.rub){padding-block:4px}
  .alarm p a{padding-block:12px;margin-block:-12px}
}
@media print{.util,nav.rubs,.act,.aside,.art-more,.sec.more,.foot,.share,.tip,.alarm,.mmenu,.readbar,.who i,.pager,.origin .row{display:none!important} body{display:block} a{text-decoration:underline}}
/* Режим примусових кольорів (Windows «Висока контрастність»): кнопки не втрачають меж, смуга небезпеки відокремлена */
@media (forced-colors:active){
  .btn,.btn.ghost{border:1.5px solid ButtonText}
  .alarm{border-bottom:2px solid CanvasText}
  .alarm p em{border:1px solid CanvasText}
  .readbar{forced-color-adjust:none;background:Highlight}
}
/* Прихований текст із Telegram (спойлер): видно після натискання */
.entry .spoiler{background:var(--fg);color:transparent;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .2s,color .2s}
.entry .spoiler:not(.on) a{color:transparent;text-decoration-color:transparent}
.entry .spoiler.on{background:transparent;color:inherit;cursor:auto}
@media print{.entry .spoiler{background:none;color:inherit}.entry .spoiler:not(.on) a{color:inherit;text-decoration-color:currentColor}}
@media (forced-colors:active){.entry .spoiler:not(.on){forced-color-adjust:none;background:CanvasText;color:CanvasText}}

/* Галерея без «сиріт»: 5 фото → велике + 4 (3 колонки: перше на дві колонки, коли кількість дає неповний ряд) */
.entry .wp-block-gallery>figure{grid-column:span 2}
.entry .wp-block-gallery>figure:only-child{grid-column:1/-1}
.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+2),.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+2)+figure{grid-column:span 3}
.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+4){grid-column:1/-1}
@media (max-width:520px){
  .entry .wp-block-gallery>figure,.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+2),.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+2)+figure,.entry .wp-block-gallery>figure:first-child:nth-last-child(3n+4){grid-column:span 3}
  .entry .wp-block-gallery>figure:first-child:nth-last-child(2n+3),.entry .wp-block-gallery>figure:only-child{grid-column:1/-1}
}
/* Таблиці в тексті: слова не рвуться посередині (таблиця, ширша за екран, гортається) */
.entry td,.entry th,.entry td p,.entry th p{overflow-wrap:normal;word-break:normal}
/* Код із Telegram — шрифтом Fixel, на тлі */
.entry code{font:inherit;background:var(--surface2);padding:0 .25em}
/* Смуга «Відбій тривоги»: коротка — в один рядок */
@media (max-width:720px){.alarm.l-clear p b{flex-basis:auto}}

/* Стаття зі змістом: у колонці лише зміст (липне до кінця тексту), стрічка й «Найчитаніше» — під статтею */
.art-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px var(--gap);margin-top:72px;align-items:start}
@media (max-width:820px){.art-more{grid-template-columns:1fr;margin-top:40px}}
.art-more .top5 ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}

/* Одна картка (чи перша на всю ширину) — горизонтально: обкладинка ліворуч, текст праворуч, без порожнечі й без величезної обкладинки */
@media (min-width:521px){
  .grid3>.card:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);row-gap:12px;align-content:start}
  .grid3>.card:only-child>.cover{grid-column:1;grid-row:1/span 6}
  .grid3>.card:only-child>:not(.cover){grid-column:2}
}
@media (min-width:821px){
  .grid3>.card:first-child:nth-last-child(3n+4){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);row-gap:12px;align-content:start}
  .grid3>.card:first-child:nth-last-child(3n+4)>.cover{grid-column:1;grid-row:1/span 6}
  .grid3>.card:first-child:nth-last-child(3n+4)>:not(.cover){grid-column:2}
}
@media (min-width:521px) and (max-width:820px){
  .grid3>.card:first-child:nth-last-child(odd):not(:only-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);row-gap:12px;align-content:start}
  .grid3>.card:first-child:nth-last-child(odd):not(:only-child)>.cover{grid-column:1;grid-row:1/span 6}
  .grid3>.card:first-child:nth-last-child(odd):not(:only-child)>:not(.cover){grid-column:2}
}
/* «Місто в кадрі»: колонок стільки, скільки фото (2 або 3), щоб не лишалося дір */
@media (min-width:1081px){
  .tggrid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .tggrid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* планшет: три фото — в один ряд (а не перше на всю ширину — величезне, з порожніми смугами) */
@media (min-width:700px) and (max-width:1080px){
  .tggrid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .tggrid:has(>:nth-child(3):last-child)>:first-child{grid-column:auto}
}
.art-more>:only-child{grid-column:1/-1}