/* FONTS:START - згенеровано tools/fonts.py, руками не правити */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Literata-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FONTS:END */

/* Медіа.Нотатник - таблиця стилів архіву.
   Іконки: lucide (ISC), вбудовані як inline SVG у tools/build.py. */

/* ---------------------------------------------------------------- 1. Токени */

:root {
  color-scheme: light dark;

  --paper:        #ffffff;
  --paper-sunk:   #fafafa;
  --paper-raise:  #ffffff;

  --ink:          #101014;
  --ink-2:        #26262c;
  --ink-3:        #6b6b74;

  --rule:         #e4e4e7;
  --rule-2:       #d4d4d8;
  --rule-ink:     #101014;

  --slot:         #f4f4f5;
  --slot-ink:     #a1a1aa;
  --slot-text:    #6b6b74;

  --accent:       #4b2e83;
  --accent-soft:  rgba(75, 46, 131, .12);
  --on-accent:    #ffffff;

  /* Наведення - сіре, як у Bloomberg. Фіолетовий лишається тільки
     функційним: кільце фокуса, каретка, виділення тексту, головна кнопка. */
  --hover:        #6b6b74;

  /* Шапка і підвал стоять на власному ґрунті, а не на папері сторінки. */
  --chrome:       #101014;
  --chrome-2:     #2a2a31;
  --chrome-ink:   #f4f4f5;
  --chrome-ink-2: #a1a1aa;

  /* Холодні кольори кажуть про справу. Їх чотири, і кожен щось означає:
     зелений - доведено, синій - справа в русі, сірий - без підтвердження,
     червоний - не підтвердилося. Янтарний прибрано 02.09.2026: він означав
     те саме, що синій, і заодно забирав помаранчевий у значка стрічки. */
  --st-green:     #15803d;
  --st-gray:      #52525b;
  --st-blue:      #1d4ed8;
  --st-red:       #b3181c;

  /* Теплі кольори означають дію читача, а не стан справи. Їх рівно два,
     і в стрічці матеріалів вони не з'являються ніколи. */
  --diya:         #9a3412;   /* підтримати архів */
  --on-diya:      #ffffff;

  /* Значки чужих майданчиків носять свої впізнавані кольори. Обидва живуть
     тільки в шапці й підвалі, де міток статусів не буває, тому синій
     Telegram не сперечається з синім «справа в русі». */
  --rss:          #d2601a;
  --tg:           #2aabee;

  --serif: "Literata", "Charter", "Georgia", "Times New Roman", serif;
  --sans:  "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.125rem, .5rem + 2.4vw, 2.75rem);
  --colpad: clamp(.875rem, 1.2vw, 1.25rem);
  --max: 1360px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0b0b0d;
    --paper-sunk:   #0f0f12;
    --paper-raise:  #131317;

    --ink:          #f2f2f4;
    --ink-2:        #cdcdd5;
    --ink-3:        #86868f;

    --rule:         #26262b;
    --rule-2:       #34343b;
    --rule-ink:     #f2f2f4;

    --slot:         #1c1c22;
    --slot-ink:     #4e4e57;
    --slot-text:    #8e8e98;

    --accent:       #a996f0;
    --accent-soft:  rgba(169, 150, 240, .16);
    --on-accent:    #0b0b0d;
    /* Наведення в темній темі гасне, а не світлішає. До 05.09.2026 тут
       стояв #ffffff при тексті #f2f2f4 - різниця в чотири одиниці, оком
       не видно зовсім, і посилання на наведення не відповідали. У світлій
       темі приём той самий: текст #101014, наведення #6b6b74, тобто крок
       від кольору тексту вбік сірого. Тут крок у той самий бік. */
    --hover:        #a3a3ad;
    --chrome:       #16161b;
    --chrome-2:     #33333b;
    --chrome-ink:   #f2f2f4;
    --chrome-ink-2: #9a9aa4;

    --st-green:     #4ade80;
    --st-gray:      #a1a1aa;
    --st-blue:      #7aa5ff;
    --st-red:       #fb7185;

    --diya:         #e2725b;
    --on-diya:      #16161b;
    --rss:          #f79256;
    --tg:           #2aabee;
  }
}

/* ------------------------------------------------------------ 2. Основа */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ----------------------------------------- 3. Поверхні самого браузера */

::selection { background: var(--accent-soft); color: var(--ink); }

/* Шапка і підвал стоять на темному ґрунті в обох темах, тому виділення
   тексту там задається окремо. Загальне правило фарбує виділений текст у
   `--ink`, а це майже чорний: на чорнильному ґрунті слова зникали зовсім.
   Помічено автором 03.09.2026 - і це не місцева особливість перегляду, а
   звичайний css, на опублікованому сайті було б так само. Значення тут
   задані числом, а не токеном, з тієї ж причини, що й колір кнопки в
   підвалі: обидві поверхні темні незалежно від теми сторінки. */
.masthead ::selection,
.masthead::selection,
.foot ::selection,
.foot::selection {
  background: rgba(169, 150, 240, .32);
  color: #f4f4f5;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

* { scrollbar-color: var(--rule-2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border: 3px solid var(--paper);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--accent); }

/* --------------------------------------------------------- 4. Каркас */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--chrome-ink);
  color: var(--chrome);
  padding: .625rem 1rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------- 5. Шапка */

.masthead {
  background: var(--chrome);
  color: var(--chrome-ink);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1rem .875rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  letter-spacing: -.022em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark span { color: var(--chrome-ink-2); font-weight: 400; }

.masthead__tools { display: flex; align-items: center; gap: .75rem 1.125rem; }

/* Пошук у шапці. Це справжня форма з методом get: працює і без скриптів,
   просто веде на сторінку пошуку з готовим запитом. */
.search { display: flex; align-items: stretch; }
.search input {
  width: clamp(9.5rem, 17vw, 16rem);
  background: transparent;
  color: var(--chrome-ink);
  border: 1px solid var(--chrome-2);
  border-right: 0;
  padding: .5625rem .8125rem;
  font-size: .875rem;
  /* impeccable-disable-next-line layout-transition -- поле розширюється при фокусі з 15rem до 18rem, записано в DESIGN.md; scaleX спотворив би текст усередині input */
  transition: border-color .18s var(--ease), width .28s var(--ease);
}
.search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.search input::placeholder { color: var(--chrome-ink-2); }
.search input:hover { border-color: var(--chrome-ink-2); }
.search input:focus {
  outline: none;
  border-color: var(--chrome-ink);
  width: clamp(11.5rem, 21vw, 19rem);
}
.search button {
  display: grid;
  place-items: center;
  width: 2.375rem;
  background: transparent;
  border: 1px solid var(--chrome-2);
  border-left: 0;
  cursor: pointer;
  color: var(--chrome-ink-2);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.search button svg { width: 16px; height: 16px; stroke-width: 2; }
.search input:focus + button { border-color: var(--chrome-ink); }
.search button:hover { color: var(--chrome-ink); }

.tglink {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chrome-ink-2);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.tglink svg { width: 15px; height: 15px; stroke-width: 1.75; }
.tglink:hover { color: var(--chrome-ink); }
/* Значок стрічки фарбується сам, слово RSS лишається звичайним. Це не колір
   бренду, а стандарт вебфідів: у стрічці матеріалів цей помаранчевий не
   з'являється ніде, тому з мітками статусів він не зустрічається. */
.tglink--rss svg { stroke: var(--rss); }

/* Знак каналу має два вигляди, і розведені вони за роллю, а не за
   пристроєм: у рядах інструментів монохромний силует, у запрошеннях
   підписатися - залитий синій кружок. На телефоні й на компьютері в
   однаковому місці знак виглядає однаково - вимога автора 03.09.2026
   після того, як у закріпленій смузі опинився один малюнок, а в шапці ПК
   інший. Пошта поруч лишається нейтральною: у неї немає фірмового
   кольору, і в рядах інструментів пара тепер урівноважена сама собою. */
.tgznak { flex: none; display: block; }
/* Загальне правило значків тримає 15 px, знак каналу більший навмисно:
   у шапці 18, у підвалі 22. Кружок має ловити око першим. */
.tglink .tgznak { width: 18px; height: 18px; }
.tglink--velykyj .tgznak { width: 22px; height: 22px; }

/* Підпис поруч зі знаком каналу більший за сусідні: розвиток каналу -
   перший напрямок проекту, і в підвалі це має бути видно без пояснень. */
.tglink--velykyj { font-size: .875rem; letter-spacing: .04em; }
.foot .tglink--velykyj { color: var(--chrome-ink); }

/* Інструменти шапки збільшені 03.09.2026 на вимогу автора: ряд не ловився
   оком. Збільшено все - підпис, значки, поле пошуку. Колір лишається
   приглушеним: підняли його того ж дня і того ж дня повернули назад -
   автору білі підписи в шапці не підійшли. Роздільника між пошуком і
   звеньями теж немає, і теж за рішенням автора. */
.masthead__tools .tglink { font-size: .8125rem; }
/* Слово і знак голубіють разом: силует залитий currentColor. */
.masthead__tools .tglink--tg:hover { color: var(--tg); }
.masthead__tools .tglink svg { width: 17px; height: 17px; }
.masthead__tools .tglink .tgznak { width: 21px; height: 21px; }

.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--chrome-2);
  padding-block: .6875rem;
}

/* Чотири розділи - головний спосіб рухатися сайтом, і вони мають важити
   більше за рядок стану поруч. Тому повний колір, а не приглушений, і
   кегль на два кроки вищий. Поточний розділ відрізняє підкреслення. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.625rem;
}
.nav a {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chrome-ink);
  padding-block: .1875rem;
  transition: color .18s var(--ease), box-shadow .18s var(--ease);
}
.nav a:hover { color: var(--chrome-ink-2); }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--chrome-ink); }

.masthead__state {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--chrome-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Підпис тільки для читалок з екрана */
.vpz {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- 6. Дрібні підписи */

.eyebrow,
.rail__title,
.filters dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rule-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-top: 2px solid var(--rule-ink);
  padding-top: .625rem;
  margin-bottom: 1.25rem;
}
.rule-head h2 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rule-head .count {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- 7. Мітки статусу */

.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem 1.125rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--ink-2);
}
.mark::before {
  content: "";
  align-self: stretch;
  width: 2px;
  min-height: 1.05em;
  background: var(--mark-color, var(--st-gray));
}
.mark--green { --mark-color: var(--st-green); }
.mark--gray  { --mark-color: var(--st-gray); }
.mark--blue  { --mark-color: var(--st-blue); }
.mark--red   { --mark-color: var(--st-red); }

.mark--check {
  color: var(--ink-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mark--check::before { display: none; }

.marks--lg .mark { font-size: .8125rem; }

/* --------------------------------- 8. Слот 16:9 під обкладинку */

.slot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--slot);
  border: 1px solid var(--rule);
}

.slot__fill {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--slot);
  transform: scale(1);
  transform-origin: center;
  transition: transform .55s var(--ease);
  will-change: transform;
}

.slot__icon {
  width: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  height: auto;
  color: var(--slot-ink);
  stroke-width: 1.5;
}

.slot__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slot-text);
  text-align: center;
  padding-inline: .5rem;
}

/* Справжня обкладинка живе в тому самому шарі, що й заглушка,
   тому й росте при наведенні так само - строго в межах рамки. */
.slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slot--sm .slot__label { display: none; }

a:hover .slot__fill,
a:focus-visible .slot__fill { transform: scale(1.03); }

.caption {
  margin-top: .5rem;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* --------------------------------------------------- 9. Головний матеріал */

.home__top {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}

/* На вузькому екрані порядок читання інший, ніж на широкому. Зверху має
   бути обкладинка і одразу заголовок з мітками статусу, а «що з цього
   випливає» і джерело - після ліда. Тому на телефоні обгортка колонки
   розчиняється (display: contents), і всі частини стають в один стовпчик
   у потрібному порядку. */
.home__lead { display: flex; flex-direction: column; }
.home__lead > .lead__media { display: contents; }
.home__lead .lead__media > a { order: 1; }
.home__lead .lead__media > .caption { order: 2; }
.home__lead > .home__lead-text { order: 3; }
.home__lead .lead__sut { order: 4; }
.home__lead .lead__dzherelo { order: 5; }

@media (min-width: 64rem) {
  .home__top {
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    align-items: start;
  }
  /* Обкладинка ліворуч, текст праворуч: 16:9 на всю ширину колонки
     з'їдає перший екран, і заголовок іде під згин. */
  .home__lead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: start;
  }
  .home__lead > .lead__media { display: block; }
  .home__lead h1 { margin-top: 0; }
  .rejka {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1.5rem, 2.2vw, 2.5rem);
  }
}

.home__lead h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.05rem + 1.55vw, 2.375rem);
  line-height: 1.09;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin-block: 1.125rem 1rem;
  transition: color .18s var(--ease);
}
.home__lead a:hover h1, .home__lead a:focus-visible h1 { color: var(--hover); }

.home__lead .marks { margin-bottom: 1.125rem; }

.lead__lede {
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
  transition: color .18s var(--ease);
}
.home__lead .dateline { margin-top: 1.25rem; }

/* Під обкладинкою 16:9 колонка йшла порожньою на 409 px - виміряно при
   ширині 1440. Геометрією це не лікується: слот росте як ширина/1.78,
   а текстова колонка від звуження тільки видовжується. Тому місце віддано
   змісту - тому самому, що на сторінці справи стоїть блоком «Що з цього
   випливає», плюс рядок джерела. */

.lead__sut {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.lead__sut .eyebrow { display: block; margin-bottom: .625rem; }
.lead__sut p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.58;
  color: var(--ink);
  margin-bottom: .75rem;
}
.lead__sut p:last-child { margin-bottom: 0; }

.lead__dzherelo {
  margin-top: 1.25rem;
  padding-top: .875rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .375rem 1rem;
}
.lead__dzherelo dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .125rem;
}
.lead__dzherelo dd {
  font-size: .8125rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Два звернення до читача в кінці головної. Не плашки й не картки:
   дві газетні колонки під спільною жирною лінійкою. */

.uchast { margin-top: clamp(2rem, 1.25rem + 2.4vw, 3.5rem); }
.uchast__grid {
  border-top: 2px solid var(--rule-ink);
  padding-top: 1.5rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .uchast__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem; }
  .uchast__col + .uchast__col {
    border-left: 1px solid var(--rule);
    padding-left: 2.75rem;
  }
}
.uchast h2 {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin-bottom: .625rem;
}
.uchast p {
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 1.125rem;
}
.uchast__link {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
/* Обидва звернення до читача - теплі при наведенні: тим самим кольором,
   що й кнопка підтримки. Тепле на цьому сайті означає «те, що робить
   читач», і працює однаково скрізь, де таке звернення стоїть. */
.uchast__link { border-bottom-color: var(--diya); }
.uchast__link:hover, .uchast__link:focus-visible {
  color: var(--diya);
  border-color: var(--diya);
}
.uchast__strilka { flex: none; }

.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.dateline span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-left: .75rem;
  vertical-align: .28em;
  background: var(--rule-2);
}

/* ------------------------------------------------------- 9а. Бічна рейка */

.rejka { display: grid; gap: 2rem; align-content: start; }

.rejka .rule-head { margin-bottom: .875rem; }

.rejka__vse {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.rejka__vse:hover { color: var(--hover); border-color: var(--hover); }

.rejka__spysok li + li { border-top: 1px solid var(--rule); }
.rejka__spysok a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .25rem .875rem;
  padding-block: .8125rem;
}
.rejka__koly {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding-top: .1875rem;
}
.rejka__zag {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.32;
  letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.rejka__spysok a:hover .rejka__zag,
.rejka__spysok a:focus-visible .rejka__zag { color: var(--hover); }
.rejka__spysok .mark { grid-column: 2; margin-top: .375rem; }

.rejka__nota {
  margin-top: .875rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ------------------------------------------------------ 10. Щільна сітка */

.grid {
  display: grid;
  gap: 0;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

@media (min-width: 46rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 76rem) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.item {
  border-top: 1px solid var(--rule);
  padding: 1.125rem 0 1.375rem;
}
.grid > .item { padding-inline: 0; }

/* Дві колонки: волосяна лінійка між ними, крайні поля - врівень з полем сторінки. */
@media (min-width: 46rem) and (max-width: 75.999rem) {
  .grid > .item {
    padding-inline: var(--colpad);
    border-left: 1px solid var(--rule);
  }
  .grid > .item:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .grid > .item:nth-child(2n)     { padding-right: 0; }
}

/* Три колонки. Правила переоголошені повністю: інакше двоколонкові
   винятки протікають сюди і колонки виходять різної ширини. */
@media (min-width: 76rem) {
  .grid > .item {
    padding-inline: var(--colpad);
    border-left: 1px solid var(--rule);
  }
  .grid > .item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .grid > .item:nth-child(3n)     { padding-right: 0; }
}

.item a { display: block; }

.item__row { display: grid; gap: .75rem; }

.item--karta .item__row  { grid-template-columns: minmax(0, 1fr); }
.item--tekst .item__row  { grid-template-columns: minmax(0, 1fr); }
.item--ryadok .item__row { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .875rem; }
.item--ryadok .item__row > div:only-child { grid-column: 1 / -1; }

/* Обкладинка в стрічці. Розмітка та сама, що й у рядка, - міняється
   тільки те, як лягає прев'ю: смуга 84 px збоку стає обкладинкою на всю
   ширину картки. Причина заміряна 05.09.2026: у смузі 84x47 знімок не
   читався зовсім, а сторінка рішення перетворювалася на сірий шум.

   Клас стояв на одній стрічці головної і звався grid--hlybyna. З
   05.09.2026 він стоїть на всіх стрічках сайта - /arhiv/, /novyny/,
   добірки за темою і областю, «Схожі справи», - тому й назва тепер
   говорить про вигляд, а не про місце. Зауваження автора: обкладинки в
   розділах мають виглядати так само, як на головній, а не дрібніше.

   Пропорція лишається 16:9 - та сама, що в слоті на всій решті сайта і в
   якій генеруються обкладинки. Заголовок іде під знімком, а не поверх
   нього: мітки статусу - головний елемент цієї верстки й єдиний колір на
   сторінці, і на темному знімку вони гаснуть. Перевірено пробою.

   Стрічка, яка лишилася на смузі, одна - видача пошуку: вона малюється
   в браузері зі свого покажчика, а адрес обкладинок у тому покажчику
   немає, тільки заглушка. */
.grid--obkladynky .item--ryadok .item__row {
  grid-template-columns: minmax(0, 1fr);
  gap: .875rem;
}
/* Картка без обкладинки лишається на смузі: порожня рамка 16:9 на всю
   ширину читається як поломка. Заміряно 05.09.2026 на /novyny/. */
.grid--obkladynky .item--zaglushka .item__row {
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: .875rem;
}

.grid--obkladynky > .item { padding-block: 1.25rem 1.5rem; }
.grid--obkladynky .item__h { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.grid--obkladynky .slot--sm .slot__label { display: block; }
/* Стоїть після рядка вище навмисно: у смузі 84 px підпис не вміщується
   і вилазить за рамку. Заміряно 05.09.2026. */
.grid--obkladynky .item--zaglushka .slot--sm .slot__label { display: none; }

.grid--riadky > .item { padding-block: .875rem 1rem; }
.grid--riadky .item__h { font-size: 1rem; line-height: 1.28; }
.grid--riadky .item .marks { margin-top: .5rem; }
.grid--riadky .mark--check { flex: 1 0 100%; }

.item__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  line-height: 1.24;
  letter-spacing: -.014em;
  text-wrap: pretty;
  transition: color .18s var(--ease);
}
.item a:hover .item__h, .item a:focus-visible .item__h { color: var(--hover); }

.item .marks { margin-top: .625rem; }
.item .dateline { margin-top: .5rem; font-size: .6875rem; }


/* ------------------------------------------ 10б. Сторінки і реклама */

/* Кнопка «Показати ще». Замінила розбиття на сторінки 05.09.2026:
   стрічка лишається однією, читач не втрачає місця. Кнопка лежить у
   розмітці з hidden і з'являється тільки коли скрипт справді сховав
   зайве - без JavaScript видно весь розділ і кнопки немає. */
.shche {
  border-top: 2px solid var(--rule-ink);
  padding-block: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
}

.shche__knopka {
  font: 600 .75rem/1 var(--grotesk);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule-2);
  border-radius: 0;
  padding: .875rem 2.5rem;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.shche__knopka:hover { color: var(--hover); border-color: var(--hover); }
.shche__knopka[hidden] { display: none; }

.shche__lik {
  margin: 0;
  font: .6875rem/1.2 var(--grotesk);
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* Реклама. Єдиний блок на сайті із заливкою - і це навмисно: у картки архіву
   заливки немає ніколи, тому межу видно без зусиль. Реклама не має займати
   довіру, зароблену матеріалами. */
.reklama {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: 1rem 1.125rem 1.125rem;
}
.reklama--strichka { grid-column: 1 / -1; }
.reklama__mitka {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .625rem;
}
.reklama__pidpys {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .375rem;
  transition: color .18s var(--ease);
}
.reklama__tekst { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.reklama a:hover .reklama__pidpys { color: var(--hover); }

/* ----------------------------------------------------- 11. Фільтри */

/* Одна вісь відкрита, географія - в глибину. Раніше тут стояло три ряди
   і двадцять сім посилань одним блоком; тепер на екрані вісім, а шістнадцять
   областей чекають за одним кліком і не змагаються з ними за увагу. */

.filters { border-top: 2px solid var(--rule-ink); }

.filters__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .375rem 1rem;
  align-items: baseline;
  padding-block: 1.125rem 1.25rem;
}
@media (max-width: 46rem) {
  .filters__row { grid-template-columns: 1fr; }
}

.filters__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.filters__list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

.filters a {
  display: inline-flex;
  align-items: baseline;
  gap: .375rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.filters a:hover, .filters a:focus-visible { color: var(--hover); border-color: var(--hover); }
.filters .n {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 600;
}

.filters__geo { border-top: 1px solid var(--rule); }
.filters__geo > summary {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-block: .9375rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink-3);
  transition: color .18s var(--ease);
}
.filters__geo > summary::-webkit-details-marker { display: none; }
.filters__geo > summary:hover { color: var(--ink); }
.filters__geo > summary:hover .filters__label { color: inherit; }
.filters__hint {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Підпис називає дію, а не стан: закрито - «показати всі», відкрито - «сховати». */
.filters__geo .filters__hint--vidkryto { display: none; }
.filters__geo[open] .filters__hint--zakryto { display: none; }
.filters__geo[open] .filters__hint--vidkryto { display: inline; }

.filters__chevron {
  margin-left: auto;
  flex: none;
  stroke-width: 2;
  color: var(--ink-3);
  transition: transform .28s var(--ease);
}
.filters__geo[open] .filters__chevron { transform: rotate(180deg); }

.filters__cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .625rem 1.5rem;
  padding-bottom: 1.375rem;
}
.filters__cols a { border-bottom-color: transparent; }
.filters__cols a:hover, .filters__cols a:focus-visible { border-bottom-color: var(--hover); }

@media (prefers-reduced-motion: reduce) {
  .filters__chevron { transition: none; }
}

/* -------------------------------------------------- 12. Сторінка справи */

.case { padding-block: clamp(1.75rem, 1rem + 2.4vw, 3rem) 0; }

.case__head, .admin .case__head { max-width: 54rem; }

.case h1,
.admin h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.1rem + 2.3vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin-block: 0 .875rem;
}

.case__marks { padding-block: 1.125rem; border-block: 1px solid var(--rule); margin: 1.25rem 0 1.5rem; }

.case__media { max-width: 44rem; margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }

.case__grid { display: grid; gap: clamp(1.75rem, 1rem + 2.4vw, 3.5rem); }
@media (min-width: 64rem) {
  .case__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .case__rail { position: sticky; top: 1.5rem; }
}

.prose { max-width: 68ch; }
.prose p {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink-2);
  margin-bottom: 1.125rem;
}
.prose p strong { color: var(--ink); font-weight: 700; }
.prose > .lede-p {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.prose h2 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: .625rem;
  margin-top: 2.25rem;
  margin-bottom: .875rem;
}

/* Перелік у тексті. Крапок немає: розділяють лінійки, як і всюди тут. */
.prose .spysok { display: grid; margin-bottom: 1.75rem; }
.prose .spysok li {
  border-top: 1px solid var(--rule);
  padding-block: .8125rem;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--ink-2);
}
.prose .spysok li:last-child { border-bottom: 1px solid var(--rule); }
.prose .spysok strong { color: var(--ink); font-weight: 700; }

.prose a,
.poshta {
  color: inherit;
  border-bottom: 1px solid var(--rule-2);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.prose a:hover, .poshta:hover { color: var(--hover); border-color: var(--hover); }

/* Розвилка на сторінці підтримки: гроші першими, безкоштовне другим.
   Та сама розвилка спливає віконцем по кнопці «Підтримати архів» - див. .rozvylka. */
.vybir {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
@media (min-width: 44rem) {
  .vybir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vybir__kart + .vybir__kart { border-left: 1px solid var(--rule); }
}
.vybir__kart {
  display: block;
  padding: 1.375rem clamp(1rem, 2vw, 2rem) 1.5rem;
  transition: background .18s var(--ease);
}
.vybir__kart + .vybir__kart { border-top: 1px solid var(--rule); }
@media (min-width: 44rem) {
  .vybir__kart + .vybir__kart { border-top: 0; }
}
.vybir__kart:hover { background: var(--paper-sunk); }
.vybir__kart h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.vybir__kart p {
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 42ch;
  margin-bottom: 1rem;
}
.vybir__diya {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.vybir__kart:hover .vybir__diya { color: var(--diya); border-color: var(--diya); }
.vybir__strilka { flex: none; }

/* Віконце вибору по кнопці «Підтримати архів» - рішення автора 02.09.2026.
   Показує ту саму розвилку, що й сторінка, тільки до переходу. Без скриптів
   кнопка лишається звичайним посиланням, тому віконце нічого не ламає.
   Тіней і скруглень тут немає, як і всюди: аркуш тримають лінійка і тло. */
.rozvylka {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--rule-2);
  border-top: 2px solid var(--rule-ink);
  /* Не --paper, а --paper-raise: у темній темі аркуш на затемненому тлі
     майже зливається з ним, і віконце перестає читатися як окремий шар. */
  background: var(--paper-raise);
  color: var(--ink);
  overflow: auto;
}
.rozvylka::backdrop { background: rgba(10, 10, 12, .62); }
/* Саме віконце фокус приймає, але кільця не носить: воно контейнер, а не
   орган керування. Кільце лишається на тому, куди читач переходить з Tab. */
.rozvylka:focus, .rozvylka:focus-visible { outline: none; }

.rozvylka__shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
}
.rozvylka__h {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.rozvylka__zakryty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: -.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .18s var(--ease);
}
.rozvylka__zakryty:hover { color: var(--ink); }

.rozvylka__kart {
  display: block;
  padding: 1.125rem clamp(1rem, 3vw, 1.5rem) 1.25rem;
  transition: background .18s var(--ease);
}
.rozvylka__kart + .rozvylka__kart { border-top: 1px solid var(--rule); }
.rozvylka__kart:hover { background: var(--paper-sunk); }
.rozvylka__nazva {
  display: block;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: .375rem;
}
.rozvylka__opys {
  display: block;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: .875rem;
}
.rozvylka__kart:hover .vybir__diya { color: var(--diya); border-color: var(--diya); }

.rozvylka__nyz {
  border-top: 1px solid var(--rule);
  padding: .875rem clamp(1rem, 3vw, 1.5rem);
  font-size: .8125rem;
  color: var(--ink-3);
}
.rozvylka__nyz a {
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.rozvylka__nyz a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Один рух на все віконце: коротке проявлення. Загальне правило
   «менше руху» гасить його разом з рештою переходів на сайті. */
.rozvylka[open] { animation: rozvylka-vhid .2s var(--ease); }
.rozvylka[open]::backdrop { animation: rozvylka-tlo .2s var(--ease); }
@keyframes rozvylka-vhid {
  from { opacity: 0; transform: translateY(.5rem); }
}
@keyframes rozvylka-tlo {
  from { opacity: 0; }
}

/* На телефоні віконце стає аркушем біля нижнього краю: великий палець
   дістає обидва варіанти, і жоден з них не тікає під шапку браузера. */
@media (max-width: 34rem) {
  .rozvylka {
    width: 100%;
    max-width: none;
    /* margin: auto від браузера тут зайвий: разом з inset він зсуває аркуш
       нижче краю екрана, і останній рядок ховається під ним. */
    margin: 0;
    position: fixed;
    inset: auto 0 0 0;
    max-height: calc(100dvh - 3.5rem);
    padding-bottom: env(safe-area-inset-bottom);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .rozvylka[open] { animation-name: rozvylka-vhid-znyzu; }
  @keyframes rozvylka-vhid-znyzu {
    from { opacity: 0; transform: translateY(1.25rem); }
  }
}

/* Гаманці. Кожен несе позначку, видно переказ у блокчейні чи ні - це
   властивість мережі, а не попередження, тому вона набрана як підпис,
   а не як тривога, і кольором статусів не фарбується. */
.hamanci { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.hamanec { border-top: 1px solid var(--rule); padding-top: .875rem; }
.hamanec__shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem .75rem;
  margin-bottom: .625rem;
}
.hamanec__nazva {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hamanec__merezha,
.hamanec__vydno { font-size: .75rem; color: var(--ink-3); }
.hamanec__vydno { margin-left: auto; }

/* QR завжди чорний по білому - незалежно від теми сторінки. Сканеру
   потрібен контраст, а не узгодженість із дизайн-токенами. */
.hamanec__qr {
  display: inline-flex;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--rule);
  margin-bottom: .75rem;
}
.hamanec__qr svg { display: block; width: 6.5rem; height: 6.5rem; }

.hamanec__adresa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}
.hamanec__adresa .rekvizyty { flex: 1 1 16rem; margin: 0; }

.hamanec__kopiyuvaty {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: .375rem;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  padding: .5rem .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.hamanec__kopiyuvaty:hover,
.hamanec__kopiyuvaty[data-kopiyovano] { color: var(--diya); border-color: var(--diya); }

.rekvizyty {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: .875rem 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.takeaway {
  border-left: 2px solid var(--st-green);
  padding: .125rem 0 .125rem 1.125rem;
  margin-block: 1.75rem;
}
.takeaway .eyebrow { display: block; margin-bottom: .5rem; }
.takeaway p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.58;
  color: var(--ink);
  margin-bottom: .625rem;
}
.takeaway p:last-child { margin-bottom: 0; }

/* Розкривні блоки */

details.fold { border-top: 1px solid var(--rule); }
details.fold + details.fold { border-top: 1px solid var(--rule); }
details.fold:last-of-type { border-bottom: 1px solid var(--rule); }

.fold > summary {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-block: .875rem;
  cursor: pointer;
  list-style: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .18s var(--ease);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--ink); }
.fold > summary svg {
  width: 14px; height: 14px;
  stroke-width: 2;
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .28s var(--ease);
}
.fold[open] > summary svg { transform: rotate(180deg); }
.fold__body { padding-bottom: 1.5rem; }

/* Рух справи */

.timeline { display: grid; gap: 0; }
.tl {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .875rem;
  padding: .625rem 0 .625rem 1.125rem;
  border-left: 1px solid var(--rule-2);
  position: relative;
}
@media (max-width: 40rem) { .tl { grid-template-columns: 1fr; gap: .125rem; } }
.case__rail .tl { grid-template-columns: 1fr; gap: .1875rem; }
.tl::before {
  content: "";
  position: absolute;
  left: -3px; top: 1.05rem;
  width: 5px; height: 5px;
  background: var(--rule-2);
  border-radius: 99px;
}
.tl__when {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tl__what { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.tl--now { border-left-color: var(--ink); }
.tl--now::before { background: var(--ink); width: 7px; height: 7px; left: -4px; }
.tl--now .tl__when { color: var(--ink); }
.tl--now .tl__what { color: var(--ink); font-weight: 600; }
.tl--next { border-left-style: dashed; }
.tl--next .tl__what { color: var(--ink-3); font-style: italic; }
.tl--next::before { background: transparent; border: 1px solid var(--rule-2); }

/* Шкала стадій */

.stage { display: grid; gap: .625rem; }
.stage__bar { display: flex; gap: 3px; }
.stage__seg { height: 4px; flex: 1; background: var(--rule); }
/* Закрашені сегменти чорнильні, а не сині. Смуга каже «скільки пройдено»,
   а не «який статус», і синій потрібен мітці поруч, де він щось означає. */
.stage__seg--on { background: var(--ink); }
.stage__legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Бічна колонка справи */

.rail { display: grid; gap: 1.75rem; }
.rail__block { border-top: 2px solid var(--rule-ink); padding-top: .75rem; }
.rail__title { display: block; margin-bottom: .75rem; }
.rail dl { display: grid; gap: .625rem; margin: 0; }
.rail dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail dd { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.rail dd a { border-bottom: 1px solid var(--rule-2); transition: color .18s var(--ease), border-color .18s var(--ease); }
.rail__kudy { display: grid; gap: .5rem; }
.rail__kudy a { font-size: .9375rem; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.rail__kudy a:hover { color: var(--hover); border-color: var(--hover); }
.rail dd a:hover { color: var(--hover); border-color: var(--hover); }

.srclink {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.srclink svg { width: 13px; height: 13px; stroke-width: 2; }
.srclink:hover { color: var(--hover); border-color: var(--hover); }

.tagrow { display: flex; flex-wrap: wrap; gap: .375rem .75rem; }
.tagrow a {
  font-size: .8125rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tagrow a:hover { color: var(--hover); border-color: var(--hover); }

/* ------------------------------------------------- 13. Порожній стан */

.empty {
  border: 1px dashed var(--rule-2);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-3);
  font-size: .9375rem;
}

/* --------------------------------------------------- 14. Адмінка */

.admin { padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 0; }
.admin__note {
  border: 1px solid var(--rule-2);
  background: var(--paper-sunk);
  padding: .8125rem 1rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
}
.admin__note strong { color: var(--ink); }

.admin__grid { display: grid; gap: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
@media (min-width: 64rem) { .admin__grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }

.field { display: grid; gap: .4375rem; margin-bottom: 1.25rem; }
.field > label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field .hint { font-size: .75rem; color: var(--ink-3); line-height: 1.45; }

.field input[type="text"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 0;
  padding: .625rem .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 11rem; resize: vertical; font-family: var(--sans); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.field-pair { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .field-pair { grid-template-columns: 1fr 1fr; } }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: .6875rem 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

.admin__preview { border-top: 2px solid var(--rule-ink); padding-top: .75rem; }

/* ------------------------------------------------------ 15. Підвал */

/* Підвал стоїть на власному темному ґрунті незалежно від теми сторінки,
   тому теплі кольори тут світлі: теракота #9a3412 на чорнильному дає
   контраст 2.1 і кнопка тоне. Гілка палітри перевизначається один раз
   на весь підвал, а не в кожному правилі окремо. */
/* Теплі кольори живуть там, де ґрунт темний незалежно від теми сторінки:
   у підвалі, у висувному меню телефона і в ряду під шапкою. Теракота
   #9a3412 на чорнильному дає контраст 2.1 і кнопка тоне, тому гілка
   перевизначається один раз на всі три поверхні, а не в кожному правилі. */
.foot,
.menu__panel,
.mobryad {
  --diya:    #e2725b;
  --on-diya: #16161b;
  --rss:     #f79256;
}

.foot {
  background: var(--chrome);
  color: var(--chrome-ink);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-block: 2.25rem 2.75rem;
}

.foot__top {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--chrome-2);
}
/* Порог развернут с 52rem до 62rem 03.09.2026. Причина - подпись слева,
   значение справа: этой паре нужно 28rem, а при 52rem колонка выходила
   303px, и адрес почты вылезал за край - у него нет ни одного пробела,
   переносить его не по чему. Ниже порога подвал складывается в один
   столбец, и блоку достаётся вся ширина. */
@media (min-width: 62rem) {
  .foot__top { grid-template-columns: minmax(0, 1fr) max-content; align-items: start; }
}
.foot__about {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--chrome-ink-2);
  max-width: 58ch;
}
/* Блок дій переставлений 03.09.2026 на вимогу автора. Стовпчик сидів по
   своєму вмісту, і праворуч від нього лишалася порожнеча на півколонки -
   саме вона автору й заважала, а не відсутність рамок. Заповнити її новим
   текстом нічим, тому заповнюємо перестановкою: підпис ліворуч, значення
   праворуч. Ширина колонки зайнята повністю, а зв'язка «що це - куди йти»
   стає очевидною. Кнопка стає в стовпчик значень, під адресу. */
.foot__subscribe { display: grid; gap: 1.375rem; justify-items: start; align-content: start; }
.foot__subscribe .rail__title {
  display: block;
  margin-bottom: .75rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--chrome-ink);
}

/* Два стовпці вмикаються тільки там, де вони вміщаються. При 34rem підпис
   капслоком і два звенья поруч уже стикаються, тому нижче блок складається
   назад у стовпчик - той самий вигляд, що був до правки. */
@media (min-width: 34rem) {
  .foot__subscribe {
    /* Коли підвал складений в один стовпець, блок не розтягується на всю
       сторінку: підпис і значення розліталися б по краях і пара перестала
       б читатися парою. У два стовпці ця межа не спрацьовує - там колонка
       і так вужча. */
    max-width: 34rem;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 1.125rem 1.75rem;
    align-items: baseline;
    justify-items: stretch;
  }
  /* Обгортка блоку зникає з сітки, щоб підпис і значення стали сусідніми
     клітинками одного рядка, а не двома рядками всередині свого острівця. */
  .foot__subscribe .foot__block { display: contents; }
  .foot__subscribe .rail__title { margin-bottom: 0; }
  .foot__subscribe .foot__mail { margin: 0; }
  /* Кнопка стоїть окремим рядком на всю ширину блоку і притиснута до
     правого краю - там же, де закінчуються значення. У стовпці значень
     вона виглядала приклеєною до адреси: пара «підпис - значення» читалася
     як рядок, а кнопка підпису не має і в рядок не складається. Зауваження
     автора 03.09.2026. */
  .foot__subscribe .btn--pidtrymka { grid-column: 1 / -1; justify-self: end; margin-top: 1rem; }
}
.foot .tglink { color: var(--chrome-ink); }
.foot .tglink:hover { color: var(--chrome-ink-2); }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.foot__mail { font-size: .9375rem; color: var(--chrome-ink); }
.foot .poshta { border-bottom-color: var(--chrome-2); }
.foot .poshta:hover { color: var(--chrome-ink-2); border-bottom-color: var(--chrome-ink-2); }

/* Єдина залита кольором кнопка на сайті. Колір теплий і власний: холодні
   зайняті статусами справ, а фіолетовий читається як синій на темному ґрунті
   підвалу - на це вже спіткнулися 02.09.2026. Тепле тут означає «те, що
   робить читач», і більше ніде в стрічці не з'являється. */
.btn--pidtrymka {
  background: var(--diya);
  color: var(--on-diya);
  border-color: var(--diya);
}
.btn--pidtrymka:hover {
  background: var(--on-diya);
  border-color: var(--on-diya);
  color: var(--diya);
}

.foot__grid {
  display: grid;
  gap: 1.75rem;
  padding-block: 1.75rem;
}
@media (min-width: 52rem) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
}

.foot__h {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--chrome-ink-2);
  margin-bottom: .875rem;
}

.foot__grid ul { display: grid; gap: .5rem; align-content: start; }
.foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; }
@media (min-width: 30rem) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.foot__grid li a {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--chrome-ink);
  transition: color .18s var(--ease);
}
.foot__grid li a:hover { color: var(--chrome-ink-2); }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.5rem;
  border-top: 1px solid var(--chrome-2);
  padding-top: 1.125rem;
  font-size: .75rem;
  color: var(--chrome-ink-2);
  font-variant-numeric: tabular-nums;
}
.foot__bottom a { transition: color .18s var(--ease); }
.foot__bottom a:hover { color: var(--chrome-ink); }

/* -------------------------------------------------- 15а. Сторінка пошуку */

.subtitle {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 52ch;
  margin-top: .5rem;
}

.poshuk__pole { max-width: 44rem; margin: 1.5rem 0 2.25rem; }
.poshuk__pole input {
  width: 100%;
  background: var(--paper);
  border: 0;
  border-bottom: 2px solid var(--rule-ink);
  border-radius: 0;
  padding: .625rem 0;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
  transition: border-color .18s var(--ease);
}
.poshuk__pole input::placeholder { color: var(--ink-3); font-family: var(--sans); font-size: 1rem; }
.poshuk__pole input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}
.poshuk__pole input:focus { outline: none; border-bottom-color: var(--accent); }

/* ---------------------------------------------- 16. Менше руху */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .slot__fill { transition: none; }
  a:hover .slot__fill, a:focus-visible .slot__fill { transform: none; }
}

/* -------------------------------------------------------- 17. Друк */

@media print {
  .nav, .filters, .foot, .slot, .uchast, .reklama, .shche { display: none; }
  body { color: #000; background: #fff; }
}


/* --------------------------------------- 17b. Телефонна навігація

   Три речі, яких на широкому екрані немає зовсім: лупа, висувне меню і ряд
   під шапкою. Тут вони сховані; вмикає їх запит на 46rem нижче.

   Меню зроблене на <details>, а не на скрипті. Причина проста: воно має
   працювати без JS, а браузер сам тримає стан, сам закриває панель при
   переході за посиланням і сам віддає кнопці правильну роль. */

.mob-lupa,
.mob-tg,
.menu,
.mobryad { display: none; }

/* ------------------------------------------------- 18. Телефон */

@media (max-width: 46rem) {
  .masthead__state { display: none; }

  /* Поле пошуку живе тепер тільки у висувному меню. Без min-width: 0 воно
     міряється за власним вмістом і не дає себе стиснути. */
  .search { flex: 1; min-width: 0; }
  .search input, .search input:focus { width: auto; flex: 1; min-width: 0; }

  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.375rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }


  /* --- Закріплена смуга, висувне меню і ряд під ним --- */

  /* Закріплюється тільки смуга з назвою: 52 px. Нинішні 157 закріплювати
     не можна - це п'ята частина екрана телефона. Ряди з інструментами і
     навігацією тут не ховаються, а переїжджають: пошук у лупу, розділи в
     меню, стан і кнопка - у ряд під шапкою. */
  .masthead {
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .masthead__bar {
    flex-wrap: nowrap;
    row-gap: 0;
    gap: .75rem;
    min-height: 3.25rem;
    padding-block: 0;
  }
  .masthead__tools,
  .masthead__row { display: none; }
  .wordmark { margin-right: auto; }

  /* Знак каналу в закріпленій смузі - монохромний силует, той самий, що в
     шапці ПК. Кружок лишається там, де він запрошення: підвал і блок
     зв'язку в меню. */
  .mob-lupa,
  .mob-tg {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--chrome-ink-2);
    transition: color .18s var(--ease);
  }
  .mob-lupa:hover { color: var(--chrome-ink); }
  /* Наведення забарвлює знак фірмовим блакитним. На телефоні наведення не
     буває, тому там знак завжди монохромний: це стан, а не другий вигляд. */
  .mob-tg:hover { color: var(--tg); }

  /* При відкритій шухляді лупа і літачок ідуть зі смуги: обидва вже стоять
     усередині - поле пошуку зверху, Telegram у блоці зв'язку. Два пошуки
     поруч читаються як помилка. Хрестик від цього не рухається: назва
     розсуває ряд через margin-right: auto, і крайній праворуч лишається
     на місці. Помічено автором 03.09.2026. */
  .masthead__bar:has(.menu[open]) .mob-lupa,
  .masthead__bar:has(.menu[open]) .mob-tg { display: none; }

  .menu { display: block; flex: none; }
  .menu__knopka {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: -.5rem;
    color: var(--chrome-ink);
    cursor: pointer;
    list-style: none;
  }
  .menu__knopka::-webkit-details-marker { display: none; }

  /* Три риски й хрестик - одна фігура. Середня риска гасне, крайні
     сходяться в центр і повертаються. Так кнопка каже, що закриє те саме,
     що відкрила, а не веде кудись іще. */
  .menu__rysky {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: background-color .18s var(--ease);
  }
  .menu__rysky::before,
  .menu__rysky::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform .22s var(--ease), top .22s var(--ease);
  }
  .menu__rysky::before { top: -6px; }
  .menu__rysky::after { top: 6px; }
  .menu[open] .menu__rysky { background: transparent; }
  .menu[open] .menu__rysky::before { top: 0; transform: rotate(45deg); }
  .menu[open] .menu__rysky::after { top: 0; transform: rotate(-45deg); }

  .menu__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 3.25rem;
    bottom: 0;
    z-index: 59;
    background: var(--chrome);
    color: var(--chrome-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Сторінка під відкритою шухлядою не їде: інакше палець, який хотів
     прокрутити список областей, тягне за собою стрічку архіву. */
  body:has(.menu[open]) { overflow: hidden; }

  .menu__vmist {
    display: grid;
    gap: 1.5rem;
    justify-items: start;
    padding: 1.25rem var(--gut) 2.5rem;
  }
  .menu__vmist .search { width: 100%; }
  .menu__vmist .search input,
  .menu__vmist .search input:focus { width: auto; flex: 1; min-width: 0; }

  .menu__grupa { width: 100%; }
  .menu__zag {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--chrome-ink-2);
    margin-bottom: .75rem;
  }
  .menu__spysok { display: grid; gap: .625rem; }
  .menu__spysok a { color: var(--chrome-ink); font-size: .9375rem; }
  .menu__spysok a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
  /* Розділи - головний спосіб рухатися сайтом, і в меню вони важать більше
     за теми й області, як і в шапці на широкому екрані. */
  .menu__spysok--rozdily a { font-size: 1.0625rem; font-weight: 700; }
  .menu__spysok--dvi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1rem; }

  .menu__zvyazok { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
  .menu__zvyazok .tglink { color: var(--chrome-ink); }
  .menu__zvyazok .tglink:hover { color: var(--chrome-ink-2); }

  /* Ряд під шапкою стоїть на тому ж чорнильному ґрунті, що й смуга, і
     їде вгору разом зі сторінкою. Кнопку сюди винесено навмисно: у
     закріпленій смузі єдиний залитий елемент сайту висів би над кожним
     екраном архіву про порушення прав, і сайт почав би читатися як збір
     коштів. Тут вона видно на початку і зникає при прокрутці. */
  .mobryad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem var(--gut) 1rem;
    background: var(--chrome);
    border-top: 1px solid var(--chrome-2);
  }
  .mobryad__stan {
    font-size: .75rem;
    color: var(--chrome-ink-2);
    font-variant-numeric: tabular-nums;
  }
  /* Кнопка зменшена на вимогу автора: у ряду вона переважала все інше.
     Лишається єдиною залитою, але вже не кричить. */
  .mobryad__knopka {
    flex: none;
    padding: .5rem .875rem;
    font-size: .6875rem;
    letter-spacing: .08em;
  }

  /* --- Головна: черга блоків --- */

  /* Рейка стояла стіною перед стрічкою: 595 px до першої іншої справи.
     Збоку її поставити нема куди, тому на телефоні вона їде під стрічку і
     працює як «а ось іще». Обгортка розчиняється (display: contents), щоб
     рейка і провідний матеріал стали сусідами в одній колонці й піддалися
     перестановці; відступи, які обгортка тримала, повертаються дітям. */
  main:has(.home__top) { display: flex; flex-direction: column; }
  .home__top { display: contents; }
  .home__lead,
  .rejka { padding-inline: var(--gut); }
  .rejka { order: 1; }
  .uchast { order: 2; }

  /* «Що з цього випливає» і «Джерело» - тільки широкий екран. Там вони
     закривають порожній папір під обкладинкою, і це записано в коді як
     причина. На телефоні колонка одна, порожнечі немає, а обидва блоки є
     на сторінці справи, куди веде заголовок. 387 px на порожньому місці. */
  .lead__sut,
  .lead__dzherelo { display: none; }

  .nav,
  .filters__list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
  }

  /* Без min-width: 0 елементи сітки міряються за вмістом, і ряд фільтрів
     розтягує всю сторінку вбік замість того, щоб прокручуватися сам. */
  .filters__row,
  .filters__row > .filters__list { min-width: 0; }

  .filters__row { gap: .375rem; }
  .filters__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.125rem;
    padding-bottom: .375rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filters__list::-webkit-scrollbar { display: none; }
  .filters__list li { white-space: nowrap; }

  /* Області розкриваються в одну колонку і вже не прокручуються вбік:
     у details їх видно списком, а не стрічкою. */
  .filters__cols { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }

  /* Смуги 84 px на телефоні більше немає. До 05.09.2026 картка головної
     тут згорталася в ту саму смугу, від якої відмовилися на ПК, - знімок
     у ній не читається однаково на обох пристроях. Обкладинка лишається
     на всю ширину картки, а довжину сторінки тримає пагінація. */
  .item--karta .slot__label { display: none; }
}