/* ============================================================
   МРЄ · компоненти
   Дрібні багаторазові цеглини. Кожна працює в будь-якій секції
   і в будь-якій темі, бо бере кольори тільки з семантичних
   токенів. Прив’язок до конкретної сторінки тут немає.
   ============================================================ */

/* ---------- КНОПКИ ------------------------------------------
   Висота 44 з Figma. Три ваги: головна дія, вторинна, тиха.
   Донат окремим модифікатором — він бордовий у будь-якій темі. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--btn-h);
  padding:0 var(--s-5);
  font-family:var(--f-head);font-size:var(--t-sm);font-weight:var(--w-medium);
  letter-spacing:.01em;line-height:1;
  border:1.5px solid transparent;border-radius:var(--r-md);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring)}

.btn--primary{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong)}
.btn--primary:hover{background:color-mix(in srgb,var(--accent-strong) 85%,#000)}

.btn--ghost{background:transparent;color:var(--accent-strong);border-color:var(--accent-strong)}
.btn--ghost:hover{background:var(--accent-tint)}

.btn--quiet{background:transparent;color:var(--fg-soft);border-color:var(--line);text-decoration:none}
.btn--quiet:hover{border-color:var(--fg-mute);background:var(--bg-alt)}

.btn--donate{background:var(--donate);color:#fff;border-color:var(--donate)}
.btn--donate:hover{background:var(--donate-hover)}

.btn--lg{min-height:52px;padding:0 var(--s-6);font-size:var(--t-body)}
.btn--block{width:100%}

/* Стрілка їде вправо при наведенні. Один із двох рухів на сайті. */
.btn .arrow{transition:transform var(--dur-2) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* Текстове посилання-дія. */
.link-go{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-head);font-size:var(--t-sm);font-weight:var(--w-medium);
  color:var(--accent-strong);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:2px;
  transition:gap var(--dur-2) var(--ease);
}
.link-go:hover{gap:var(--s-3)}

/* ---------- ПІГУЛКИ І МІТКИ --------------------------------- */
.eyebrow{
  display:block;
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--accent-strong);margin:0 0 var(--s-3);
}

.pill{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--accent-on-tint);background:var(--accent-tint);
  border:1px solid var(--accent-line);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);
}

.tag{
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);
}

/* Статус. Форма плюс колір: крапка лишається помітною
   й тим, хто не розрізняє червоне і зелене.                    */
.status{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);
  border:1px solid currentColor;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status--active{color:var(--c-ok);background:var(--c-ok-bg)}
.status--wait{color:var(--c-wait);background:var(--c-wait-bg)}
.status--done{color:var(--c-done);background:var(--c-done-bg)}

/* ---------- КАРТКА ------------------------------------------
   Контейнерний запит замість медіа-запиту: картка сама вирішує,
   як їй лягати, залежно від відведеного місця, а не від екрана. */
.card{
  container-type:inline-size;
  position:relative;
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  transition:border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
}
.card--tint{background:var(--accent-wash);border-color:var(--accent-line)}
.card--flat{border-radius:0}

/* Верхня лінія 3px — нехроматичний маркер розділу. */
.card--marked{border-top:3px solid var(--accent-line)}

/* Картка-посилання: підіймається й підсвічується згори.
   Це заміна ефекту Spotlight, який без JS не працює.           */
.card--link{cursor:pointer}
.card--link::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,var(--accent-tint),transparent 70%);
  opacity:0;transition:opacity var(--dur-3) var(--ease);
}
.card--link:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card--link:hover::before{opacity:1}
.card--link:focus-within{border-color:var(--accent-strong);box-shadow:var(--ring)}
.card>*{position:relative}

.card__title{font-family:var(--f-head);font-size:var(--t-h4);font-weight:var(--w-medium);margin:0}
.card__text{font-size:var(--t-sm);color:var(--fg-soft);margin:0}
.card__foot{margin-top:auto;padding-top:var(--s-3)}

/* Розтягуємо клікабельну зону на всю картку, лишаючи семантику. */
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}

@container (min-width:420px){
  .card--wide-row{flex-direction:row;align-items:flex-start;gap:var(--s-5)}
}

/* ---------- ЧИСЛО-ДОКАЗ -------------------------------------
   Правило: значення, одиниця, період, джерело. Число без
   періоду на сторінку не потрапляє.                            */
.stat{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4) 0}
.stat__n{
  font-family:var(--f-head);font-size:var(--t-h2);font-weight:var(--w-light);
  line-height:1;letter-spacing:var(--ls-display);color:var(--accent-strong);
}
.stat__l{font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--fg)}
.stat__src{font-size:var(--t-xs);color:var(--fg-mute);line-height:1.4}

/* Смуга чисел з роздільниками. */
.stat-band{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  border-top:1px solid var(--line);
}
.stat-band>*{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-right:1px solid var(--line)}
.stat-band>*:last-child{border-right:0}
@media (max-width:640px){
  .stat-band>*{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .stat-band>*:last-child{border-bottom:0}
}

/* ---------- ПАРА «ключ — значення» --------------------------- */
.facts{margin:0;font-size:var(--t-sm)}
.facts>div{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft);
}
.facts>div:last-child{border-bottom:0}
.facts dt{flex:0 0 clamp(120px,38%,220px);color:var(--fg-mute);margin:0}
.facts dd{margin:0;font-weight:var(--w-medium);color:var(--fg)}

/* ---------- ТАБЛИЦЯ -----------------------------------------
   Єдиний безпечний респонсивний патерн — обгортка з прокруткою.
   Ніяких перетворень рядків на картки: вони ламають семантику.  */
.table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
.table caption{
  text-align:left;font-size:var(--t-xs);color:var(--fg-mute);
  padding-bottom:var(--s-3);
}
.table th,.table td{
  text-align:left;vertical-align:top;
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
}
.table thead th{
  background:var(--accent-tint);color:var(--accent-on-tint);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--bg-alt)}
.table-wrap{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.table-wrap .scroll-x{max-height:none}

/* ---------- ХЛІБНІ КРИХТИ ------------------------------------ */
.crumbs{font-size:var(--t-sm);color:var(--fg-mute)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:var(--s-2)}
.crumbs li+li::before{content:"›";color:var(--line);font-size:1.1em}
.crumbs a{color:var(--fg-mute);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--accent-strong);border-color:var(--accent-line)}
.crumbs [aria-current]{color:var(--fg)}

/* ---------- ЗМІСТ СТОРІНКИ ----------------------------------- */
.toc{position:sticky;top:var(--s-8);align-self:start}
.toc__t{
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-mute);
  margin:0 0 var(--s-4);
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:2px solid var(--line)}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:var(--s-3);align-items:baseline;
  /* var(--s-3) замість var(--s-2): з меншим падингом пункт мав 38px
     заввишки проти власного правила системи про ціль у 44px.      */
  padding:var(--s-3) var(--s-4);margin-left:-2px;
  border-left:2px solid transparent;
  font-size:var(--t-sm);color:var(--fg-soft);text-decoration:none;
  transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  /* --accent-line - лінійний токен: як текст він дає 4,46:1, тобто
     нижче за поріг AA. Номер пункту - текст, тому колір текстовий. */
  font-family:var(--f-head);font-size:var(--t-xs);color:var(--accent-strong);
  font-variant-numeric:tabular-nums;
}
.toc a:hover,.toc a[aria-current="true"]{color:var(--accent-strong);border-left-color:var(--accent-line)}

/* ---------- ПЕРЕЛІК ПІД БЛОКОМ ВІДПОВІДІ ---------------------
   Чотири переходи на сторінки піднапрямів. Ті самі назви й
   пояснення, що у випадайці меню: читач, який бачив обидва
   місця, має бачити однакові слова.

   Сітка жорстко дві колонки, а не auto-fit: чотири рівнозначні
   пункти мають лягати 2+2, інакше виходить ряд 3+1 і четвертий
   читається як другорядний.

   Нумерації немає навмисно: цифри означали б послідовність,
   якої тут не існує. Маркер - верхня лінія акцентом, та сама,
   що на картках розділу нижче.                                 */
.answer-list{
  display:grid;gap:var(--s-3);
  grid-template-columns:1fr;
  margin:var(--s-6) 0 0;padding:0;list-style:none;
}
@media (min-width:560px){
  .answer-list{grid-template-columns:1fr 1fr}
}
.answer-list a{
  display:block;height:100%;
  border-top:2px solid var(--accent-line);
  padding:var(--s-3) var(--s-3) var(--s-4);
  text-decoration:none;color:var(--fg);
  transition:background var(--dur-2) var(--ease),
             border-top-color var(--dur-2) var(--ease);
}
.answer-list a:hover{background:var(--accent-wash);border-top-color:var(--accent-strong)}
.answer-list b{
  display:flex;align-items:baseline;gap:var(--s-2);justify-content:space-between;
  font-family:var(--f-head);font-size:var(--t-body);font-weight:var(--w-medium);
  line-height:1.25;margin-bottom:var(--s-1);
}
.answer-list .arrow{color:var(--accent);flex:none;transition:transform var(--dur-2) var(--ease)}
.answer-list a:hover .arrow{transform:translateX(3px)}
.answer-list span{display:block;font-size:var(--t-sm);color:var(--fg-mute);line-height:1.4}

/* ---------- ВРІЗКА І ЦИТАТА ---------------------------------- */
.callout{
  background:var(--accent-wash);
  border-left:3px solid var(--accent-strong);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s-5) var(--s-6);
}
.callout__t{
  font-family:var(--f-head);font-size:var(--t-h5);font-weight:var(--w-medium);
  margin:0 0 var(--s-3);color:var(--accent-on-tint);
}

.quote{margin:0;padding:0}
.quote blockquote{
  margin:0;font-family:var(--f-head);font-weight:var(--w-light);
  font-size:var(--t-h3);line-height:1.32;letter-spacing:var(--ls-head);
  color:var(--fg);text-wrap:pretty;
}
.quote blockquote::before{content:"«"}
.quote blockquote::after{content:"»"}
.quote figcaption{
  margin-top:var(--s-4);font-size:var(--t-sm);color:var(--fg-mute);
  padding-top:var(--s-3);border-top:1px solid var(--line);
}

/* ---------- КРОКИ -------------------------------------------
   Нумерація тут не декор: порядок кроків несе інформацію.      */
.steps{
  display:grid;gap:0;counter-reset:step;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.steps>li{
  counter-increment:step;list-style:none;
  padding:var(--s-5) var(--s-5) var(--s-5) 0;
  border-top:2px solid var(--line);
}
.steps>li:first-child{border-top-color:var(--accent-strong)}
.steps>li::before{
  content:counter(step,decimal-leading-zero);
  display:block;margin-bottom:var(--s-3);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:.1em;color:var(--accent-line);font-variant-numeric:tabular-nums;
}
.steps h4{margin:0 0 var(--s-2);font-size:var(--t-body)}
.steps p{margin:0;font-size:var(--t-sm);color:var(--fg-mute)}

/* ---------- ПАРТНЕР ------------------------------------------ */
.partner__role{
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:var(--w-medium);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s-2);
}
.partner__cert{
  display:block;margin-top:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-mute);
}

/* ---------- ЛЮДИНА ------------------------------------------- */
.person{display:flex;gap:var(--s-4);align-items:center}
.person__av{
  flex:none;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-on-tint);
  border:1px solid var(--accent-line);
  font-family:var(--f-head);font-weight:var(--w-medium);font-size:var(--t-body);
}
.person__n{font-family:var(--f-head);font-size:var(--t-h5);font-weight:var(--w-medium);margin:0}
.person__r{font-size:var(--t-sm);color:var(--fg-mute);margin:0}

/* ---------- FAQ на <details> --------------------------------
   Розкриття без жодного рядка скрипту. name= робить акордеон
   з одним відкритим пунктом; де не підтримується — просто
   відкриваються кілька, і це нормально.                        */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--s-4);justify-content:space-between;
  padding:var(--s-5) 0;cursor:pointer;list-style:none;
  font-family:var(--f-head);font-size:var(--t-h5);font-weight:var(--w-medium);
  color:var(--fg);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;font-size:1.4em;line-height:1;color:var(--accent);
  transition:transform var(--dur-2) var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-strong)}
.faq__a{padding:0 0 var(--s-5);color:var(--fg-soft)}
.faq__a p{font-size:var(--t-sm)}

/* ---------- ДОКУМЕНТИ ---------------------------------------- */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:0}
.docs li{border-bottom:1px solid var(--line)}
.docs a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) 0;text-decoration:none;color:var(--fg);
}
.docs a:hover{color:var(--accent-strong)}
.docs .meta{font-size:var(--t-xs);color:var(--fg-mute);white-space:nowrap;font-family:var(--f-mono)}

/* ---------- ДЕКОР -------------------------------------------- */

/* Прозорі слеші. Побудовані з «Ліній Єдності», а не зі скла:
   скло вимагає темного фону й розмиття, на світлому теплому
   тлі воно читається як брудна пляма.                          */
.slashes{position:relative;overflow:hidden;isolation:isolate}
.slashes::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(
    112deg,
    color-mix(in srgb,var(--c-brown) 5%,transparent) 0 2px,
    transparent 2px 13px,
    color-mix(in srgb,var(--c-bordo) 6%,transparent) 13px 14px,
    transparent 14px 46px
  );
  -webkit-mask-image:linear-gradient(97deg,transparent 30%,#000 100%);
  mask-image:linear-gradient(97deg,transparent 30%,#000 100%);
}
/* Одна широка світла смуга праворуч — акцент розділу. */
.slashes::after{
  content:"";position:absolute;top:-25%;right:-6%;width:48%;height:160%;z-index:-1;
  pointer-events:none;opacity:.6;
  background:linear-gradient(112deg,
    transparent 46%,var(--accent-tint) 46.4%,var(--accent-tint) 62%,transparent 62.4%);
}

/* Крапкова сітка. Заміна Dot Pattern з Aceternity, чистим CSS. */
.dots{
  background-image:radial-gradient(color-mix(in srgb,var(--c-brown) 18%,transparent) 1px,transparent 1px);
  background-size:22px 22px;
}

/* Стрічка, що їде. CSS-аналог Marquee з Magic UI.
   Дубль вмісту потрібен для безшовної петлі.                   */
.marquee{
  display:flex;gap:var(--s-8);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;gap:var(--s-8);flex:none;align-items:center;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--s-8)))}}

/* Світлова рамка. CSS-аналог Border Beam з Magic UI.
   @property потрібен, щоб кут анімувався плавно.               */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}
.beam{position:relative}
.beam::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--beam),
    transparent 0 72%,var(--accent-line) 84%,var(--accent-strong) 90%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beam-spin 7s linear infinite;pointer-events:none;
}
@keyframes beam-spin{to{--beam:360deg}}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .beam::after{animation:none;background:var(--accent-line)}
}

/* ---------- ПЛАШКА НОВИНИ -----------------------------------
   Схема взята з архівної сітки Червоного Хреста: зображення
   згори, дата й рубрика, заголовок, лід на два рядки, перехід.
   Реалізація наша: .card плюс медіа на всю ширину картки.

   Дата обов’язкова. Новина без дати не публікується: саме дата
   відрізняє живий розділ від набору текстів без часу.

   Клікабельна вся площа картки через .stretch на заголовку,
   але посиланням лишається сам заголовок - так читач екрана
   озвучує ціль, а не «посилання, зображення».                  */
.news-card{padding:0;gap:0;overflow:hidden}
.news-card__media{display:block;margin:0;aspect-ratio:16/10;background:var(--bg-alt)}
.news-card__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Порожньої підкладки тут немає. Новина без власного фото отримує
   згенеровану заставку в тій самій зеленій сім’ї, що креативи для
   соцмереж: `tools/make_news_cover.py`. Стокових знімків у системі
   немає, згенерованих фотографій - теж.                          */

.news-card__body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);flex:1}
.news-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  font-size:var(--t-xs);color:var(--fg-mute);
}
.news-card__meta time{font-variant-numeric:tabular-nums}
.news-card__meta>*+*::before{content:"·";margin-right:var(--s-2);color:var(--line)}
.news-card__title{
  font-family:var(--f-head);font-size:var(--t-h4);font-weight:var(--w-medium);
  line-height:var(--lh-head);letter-spacing:var(--ls-head);margin:0;
}
.news-card__title a{color:inherit;text-decoration:none}
.news-card__title a:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.news-card__lead{font-size:var(--t-sm);color:var(--fg-soft);margin:0}
.news-card__foot{margin-top:auto;padding-top:var(--s-4)}

/* Ширша картка в один рядок - для першої новини в стрічці. */
@container (min-width:520px){
  .news-card--row{flex-direction:row}
  .news-card--row .news-card__media{flex:0 0 44%;aspect-ratio:auto}
}

/* ---------- СТОРІНКА НОВИНИ ---------------------------------
   Рішення від 17.08.2026: новина оформлюється так само, як стаття
   блогу - «Атікл» у мові Георгія, - тільки в зеленій темі розділу.
   Набір блоків: герой із зображенням, рядок авторства, лід, блок
   «Коротко», зміст, нумеровані секції, вихід у розділ. Попереднє
   правило «новина - не стаття» скасоване.

   Чого в новині немає проти статті блогу: FAQ, переліку джерел,
   блока відкритих зборів і форми донату. Перші два на новині в
   кілька абзаців натягнуті, другі два належать напряму «Допомога
   ЗСУ» і в «Відновлення» не заходять - це розділення напрямів.  */
.news-head{border-bottom:1px solid var(--line);padding-bottom:var(--s-6)}
.news-head h1{font-size:var(--t-h2);margin:var(--s-4) 0 var(--s-5);max-width:34ch}
.news-head__lead{font-size:var(--t-lead);color:var(--fg-soft);max-width:var(--measure);margin:0}
.news-body>p{max-width:var(--measure)}
.news-body>p:first-child{font-size:var(--t-lead)}

/* Рядок авторства: автор, посада, дата, час читання - той самий
   набір, що в статті блогу. Стоїть у герої поверх фото, світлі
   кольори там задає .hero-photo--news у glass.css.              */
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  font-size:var(--t-sm);color:var(--fg-soft);margin:var(--s-4) 0;
}
/* Роздільник чіпляється до попереднього пункту, а не до наступного:
   з ::before він при переносі рядка з'їжджав на початок нового і
   висів там сиротою перед датою.                                  */
.byline>*:not(:last-child)::after{content:"·";margin-left:var(--s-3);color:var(--line)}
.byline b{font-weight:var(--w-medium);color:var(--fg)}

/* Зміст новини стоїть у потоці над текстом, а не липким збоку:
   колонка тут одна, і залиплий блок накрив би собою текст.      */
.toc--flow{position:static}

/* Секції тіла. Нумерація й лінія згори взяті зі статті блогу: на
   довгому матеріалі вони розбивають суцільний текст на кроки, які
   видно скануванням. Лічильник рахує тільки H2 з id, тому
   службовий заголовок без якоря нумерацію не збиває.

   Ритм тіла тримає gap стека (.stack--5), тому власного margin у
   заголовка майже немає: у flex-колонці маргіни не схлопуються і
   додавалися до gap, даючи над лінією майже сто пікселів.        */
.news-body{counter-reset:sec}
.news-body h2[id]{
  counter-increment:sec;
  font-size:var(--t-h3);
  margin:var(--s-3) 0 0;
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
}
.news-body h2[id]::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:var(--w-bold);
  letter-spacing:var(--ls-label);color:var(--accent);
  margin-bottom:var(--s-2);
}
.news-body h2[id]:first-child{margin-top:0;padding-top:0;border-top:0}

/* Сітка фото новини.

   Спільного aspect-ratio тут немає навмисно. У репортажі з заходу
   поруч лежать кадри фотографа (3/2) і знімки зі смартфона (3/4).
   Загальна пропорція з object-fit:cover ріже портрет по центру -
   людям на повний зріст відрізає голови й ноги. Тому кадр показуємо
   у власних пропорціях, а місце під нього браузер резервує з
   width/height у розмітці, тому сторінка не стрибає.

   Правило для розмітки: у ряд ставимо два фото однієї орієнтації.
   Широкий кадр на всю ширину - класом .is-wide, а не позицією,
   бо позиція змінюється щоразу, коли додають фото.              */
.news-gallery{
  display:grid;gap:var(--s-3);align-items:start;
  grid-template-columns:repeat(2,1fr);margin:var(--s-7) 0;
}
.news-gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--bg-alt)}
.news-gallery img{width:100%;height:auto;display:block}
.news-gallery figure.is-wide{grid-column:1/-1}
.news-gallery figcaption{padding:var(--s-2) var(--s-3);font-size:var(--t-xs);color:var(--fg-mute)}
@media (max-width:560px){.news-gallery{grid-template-columns:1fr}}

/* Перелік установ-учасників. Був одним абзацом на 300 знаків:
   десять назв підряд читаються як стіна, хоча саме вони показують
   вагу заходу. Сітка розбиває їх на рядки, які видно скануванням.
   Нумерації немає - порядок тут нічого не означає.               */
.orgs{
  display:grid;gap:0 var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  margin:0;padding:0;list-style:none;
}
.orgs li{
  padding:var(--s-3) 0;
  border-top:1px solid var(--line-soft);
  font-size:var(--t-sm);color:var(--fg-soft);
}

/* ---------- ПАГІНАЦІЯ АРХІВУ --------------------------------
   Потрібна, коли новин стане більше за одну сторінку. Ціль
   44x44 - мінімум для пальця, той самий розмір, що в кнопок.    */
.pager{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-top:var(--s-8)}
.pager a,.pager span{
  display:grid;place-items:center;min-width:var(--btn-h);height:var(--btn-h);
  padding:0 var(--s-3);font-size:var(--t-sm);text-decoration:none;color:var(--fg-soft);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.pager a:hover{border-color:var(--accent-line);color:var(--accent-strong)}
.pager [aria-current]{
  background:var(--accent-tint);border-color:var(--accent-line);
  color:var(--accent-on-tint);font-weight:var(--w-medium);
}