/* ── РЕЖИМ ДЛЯ СЛАБКОГО ЗОРУ ───────────────────────────────────────
   Кнопка «Aa» в шапці; стан памʼятається між візитами.

   ЧОМУ ТАК, А НЕ ТОЧКОВІ ПРАВКИ. Дві попередні редакції намагалися
   підкрутити наявну палітру: підсилити приглушені відтінки, перелічити
   темні секції. Обидві дали нечитабельні поєднання, бо перелік завжди
   виявлявся неповним — досить одного блоку, про який я забув.

   Тому тут інший принцип: режим повністю замінює оформлення на
   високий контраст. Усі фони стають білими, увесь текст — майже
   чорним, декоративні градієнти й підкладки прибираються. Так
   неможливо отримати світле на світлому: варіант лишається один.
   Це відповідає тому, як в Україні звично роблять «версію для
   слабозорих» — чорним по білому, без прикрас. */

/* Кнопки-утиліти в шапці (діють завжди, не лише в режимі) */
.a11yb,.lang{font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.06em;
  padding:7px 13px;border-radius:100px;border:1.5px solid var(--line);background:transparent;
  color:inherit;cursor:pointer;line-height:1;text-decoration:none;display:inline-flex;
  align-items:center;transition:background .2s,border-color .2s,color .2s}
.a11yb:hover,.lang:hover{border-color:var(--teal,#5CB4A8);background:rgba(92,180,168,.12)}
.a11yb[aria-pressed="true"]{background:#000;border-color:#000;color:#fff}
.lang{font-weight:700}

/* ═══ 1. ОДНА ПАЛІТРА НА ВСЕ ═══ */
html.a11y,html.a11y body{background:#fff!important;color:#111!important}
html.a11y *,html.a11y *::before,html.a11y *::after{
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important}
/* усі контейнери — на білому */
html.a11y div,html.a11y section,html.a11y article,html.a11y aside,html.a11y header,
html.a11y footer,html.a11y nav,html.a11y main,html.a11y form,html.a11y ul,html.a11y ol,
html.a11y li,html.a11y table,html.a11y tr,html.a11y td,html.a11y th,html.a11y blockquote,
html.a11y figure,html.a11y span,html.a11y label,html.a11y dl,html.a11y dt,html.a11y dd{
  background-color:transparent!important}
/* увесь текст — один колір */
html.a11y p,html.a11y li,html.a11y td,html.a11y th,html.a11y dd,html.a11y dt,
html.a11y span,html.a11y label,html.a11y div,html.a11y blockquote,html.a11y cite,
html.a11y h1,html.a11y h2,html.a11y h3,html.a11y h4,html.a11y h5,html.a11y h6,
html.a11y b,html.a11y strong,html.a11y em,html.a11y small,html.a11y figcaption{
  color:#111!important}
/* градієнтні заголовки повертаємо в звичайний колір */
html.a11y .nb,html.a11y .grad,html.a11y .wordmark,html.a11y h1,html.a11y h2{
  -webkit-text-fill-color:#111!important;background:none!important}

/* ═══ 2. ПОСИЛАННЯ Й КНОПКИ ═══ */
html.a11y a{color:#0b3d91!important;text-decoration:underline!important;
  text-underline-offset:3px;text-decoration-thickness:2px}
html.a11y a:not(.btn):not(.a11yb):not(.lang):hover{color:#000!important}
/* Форма вступу лежить на темному градієнті й має власне правило
   color:#fff. У режимі доступності фон стає білим, тож білий текст
   зник би. Перебиваємо специфічністю. */
html.a11y .join a,html.a11y .joinform a,
html.a11y .joinform .consent a,html.a11y .join .consent a{color:#0b3d91!important}
html.a11y .btn,html.a11y button,html.a11y .a11yb,html.a11y .lang{
  background:#fff!important;color:#111!important;border:2px solid #111!important;
  text-decoration:none!important;border-radius:100px}
html.a11y .btn-pri,html.a11y .a11yb[aria-pressed="true"]{
  background:#111!important;color:#fff!important;border-color:#111!important}
html.a11y .btn-pri:hover{background:#0b3d91!important;border-color:#0b3d91!important}

/* ═══ 3. РОЗМІРИ (сайт у пікселях, тож явно) ═══ */
html.a11y body{line-height:1.85;letter-spacing:.01em}
html.a11y p,html.a11y li,html.a11y dd,html.a11y td,html.a11y th,
html.a11y .cat-empty,html.a11y .alertbox{font-size:19px;line-height:1.8}
html.a11y .lead{font-size:22px;line-height:1.65}
html.a11y .muted,html.a11y .who,html.a11y small,html.a11y .consent-note,
html.a11y .item .meta,html.a11y .eyebrow,html.a11y .upd,html.a11y .doc-toc a{font-size:16px}
html.a11y h1{font-size:clamp(38px,6.4vw,62px)}
html.a11y h2{font-size:clamp(28px,4vw,40px)}
html.a11y h3{font-size:24px}
html.a11y .btn,html.a11y button,html.a11y input,html.a11y select,html.a11y textarea,
html.a11y .links a,html.a11y footer a{font-size:18px}
html.a11y .a11yb,html.a11y .lang{font-size:16px}

/* ═══ 4. МЕЖІ Й ПОЛЯ ═══ */
html.a11y .card,html.a11y .item,html.a11y .box,html.a11y .alertbox,html.a11y .cat-empty,
html.a11y .bk-card,html.a11y .fact,html.a11y .toc,html.a11y nav,html.a11y footer{
  border-color:#111!important}
html.a11y .card,html.a11y .item,html.a11y .box,html.a11y .alertbox,
html.a11y .cat-empty,html.a11y .fact{border:2px solid #111!important;border-radius:12px}
html.a11y input,html.a11y select,html.a11y textarea{
  background:#fff!important;color:#111!important;border:2px solid #111!important}
html.a11y input::placeholder,html.a11y textarea::placeholder{color:#555!important}
html.a11y footer{border-top:3px solid #111!important}
html.a11y nav#nav,html.a11y header{border-bottom:2px solid #111!important}

/* ═══ 5. ФОКУС І ВИДІЛЕННЯ ═══ */
html.a11y :focus-visible{outline:4px solid #b0473e!important;outline-offset:3px}
html.a11y ::selection{background:#111;color:#fff}
/* Skip-link має власний темний фон, тож загальне правило для посилань
   робило б синій текст на темно-синьому. Перевертаємо його явно. */
html.a11y .skip{background:#fff!important;color:#111!important;
  border:3px solid #111!important;text-decoration:underline!important}
html.a11y .key{background:none!important;border-bottom:3px solid #111}
html.a11y .pull{border-left:4px solid #111!important;font-size:21px}
html.a11y .doc-toc a.on{border-left-color:#111!important;font-weight:700}

/* ═══ 6. БЕЗ РУХУ Й ДЕКОРУ ═══ */
html.a11y *,html.a11y *::before,html.a11y *::after{
  animation:none!important;transition:none!important}
html.a11y .rev,html.a11y .fx{opacity:1!important;transform:none!important}
html.a11y canvas,html.a11y svg.bleed,html.a11y .bg-field,html.a11y #grain,
html.a11y .readbar,html.a11y .art,html.a11y .o2,html.a11y .anode{display:none!important}

/* ── ПАНЕЛЬ НАЛАШТУВАНЬ ЧИТАННЯ ───────────────────────────────────
   Кнопка «Aa» відкриває панель із чотирма незалежними налаштуваннями.
   Кожне вмикається окремо й памʼятається між візитами. */
.a11y-panel{position:absolute;top:calc(100% + 10px);right:16px;z-index:200;width:min(340px,calc(100vw - 24px));
  background:#fff;border:2px solid #16395B;border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 20px 48px rgba(16,30,45,.22);display:none;text-align:left}
.a11y-panel.open{display:block}
.a11y-panel h2{font-family:'Archivo',sans-serif;font-size:15px;margin:0 0 4px;color:#16395B}
.a11y-panel .hint{font-size:12.5px;line-height:1.45;color:#4a5560;margin:0 0 14px}
.a11y-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid #e4e0d6}
.a11y-row .lbl{font-family:'Archivo',sans-serif;font-size:14px;color:#16395B;line-height:1.3}
.a11y-row .sub{display:block;font-family:'Onest',system-ui,sans-serif;font-size:12px;
  color:#4a5560;margin-top:3px;line-height:1.4;max-width:30ch}
.a11y-sizes{display:flex;gap:6px}
.a11y-sizes button{font-family:'Archivo',sans-serif;border:1.5px solid #16395B;background:#fff;color:#16395B;
  border-radius:8px;padding:5px 10px;cursor:pointer;line-height:1}
.a11y-sizes button[aria-pressed="true"]{background:#16395B;color:#fff}
.a11y-sw{flex:0 0 auto;width:46px;height:26px;border-radius:100px;border:2px solid #16395B;
  background:#fff;position:relative;cursor:pointer;padding:0}
.a11y-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#16395B;transition:transform .18s}
.a11y-sw[aria-pressed="true"]{background:#16395B}
.a11y-sw[aria-pressed="true"]::after{background:#fff;transform:translateX(20px)}
.a11y-reset{margin-top:12px;width:100%;font-family:'Archivo',sans-serif;font-size:13px;
  border:1.5px solid #16395B;background:#fff;color:#16395B;border-radius:10px;padding:8px;cursor:pointer}

/* ── 1. РОЗМІР ТЕКСТУ ── */
html[class*="a11y-size"]{--as:1}
html.a11y-size-1{--as:1.18}
html.a11y-size-2{--as:1.42}
html[class*="a11y-size"] p,html[class*="a11y-size"] li,html[class*="a11y-size"] td,
html[class*="a11y-size"] th,html[class*="a11y-size"] dd,html[class*="a11y-size"] .cat-empty,
html[class*="a11y-size"] .alertbox,html[class*="a11y-size"] .bk-card{font-size:calc(16px * var(--as))}
html[class*="a11y-size"] .lead{font-size:calc(18px * var(--as))}
html[class*="a11y-size"] .muted,html[class*="a11y-size"] .who,html[class*="a11y-size"] small,
html[class*="a11y-size"] .consent-note,html[class*="a11y-size"] .item .meta,
html[class*="a11y-size"] .eyebrow,html[class*="a11y-size"] .upd,
html[class*="a11y-size"] .doc-toc a{font-size:calc(13.5px * var(--as))}
html[class*="a11y-size"] h1{font-size:calc(34px * var(--as))}
html[class*="a11y-size"] h2{font-size:calc(25px * var(--as))}
html[class*="a11y-size"] h3{font-size:calc(19px * var(--as))}
html[class*="a11y-size"] .btn,html[class*="a11y-size"] button,html[class*="a11y-size"] input,
html[class*="a11y-size"] select,html[class*="a11y-size"] textarea,
html[class*="a11y-size"] .links a,html[class*="a11y-size"] footer a{font-size:calc(15px * var(--as))}

/* ── 2. ПРОМІЖКИ (метрики WCAG 1.4.12) ── */
html.a11y-space p,html.a11y-space li,html.a11y-space dd,html.a11y-space td,
html.a11y-space .lead,html.a11y-space blockquote{
  line-height:1.6!important;letter-spacing:.12em!important;word-spacing:.16em!important}
html.a11y-space p{margin-bottom:2em!important}
html.a11y-space h1,html.a11y-space h2,html.a11y-space h3{
  line-height:1.35!important;letter-spacing:.02em!important}

/* ── 3. ВИДІЛЕННЯ ПОЧАТКУ СЛІВ ── */
.bio{font-weight:800}
html.a11y .bio{color:#000}