/*
 * Дизайн-система перенесена з макета БЕЗ ЗМІН.
 *
 * Джерело: docs/design-brief-v6/variants/v8-5-team.tpl.html
 * Оновлюється командою: scripts\sync-design.ps1
 *
 * Не редагувати руками: у макеті пораховані контрасти під WCAG, і будь-яка
 * правка тут буде затерта наступною синхронізацією. Зміна робиться в макеті.
 */

/* ============================================================
   V7-1 · «ТЕРЕН СВІТЛИЙ» — перевернутий баланс v6-1.
   Та сама родина (терен + янтар, Montserrat 800 + Manrope,
   ті самі тексти, той самий каркас), але тепер переважає світле.
   Сторінка світла; темних площин рівно ТРИ, і жодні дві не суміжні:
     2 · стат-стрічка  — цифри на темному
     5 · місія         — єдине темне твердження в тілі, найтемніша точка
    10 · футер         — друга дужка сторінки
   База тепер СВІТЛА, тож модифікатор чесно зветься .sec-dark
   і скрізь має вагу не меншу за базове правило.
   ============================================================ */

/* ---------- база ---------- */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;text-wrap:balance;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
a{color:inherit}
input,button,select{font-family:inherit}
input,select,textarea{font-size:16px}
:target{scroll-margin-top:96px}
#top,#work,#shots,#how,#about,#team,#give,#form,#contact,#geo{scroll-margin-top:96px}

/* ---------- токени ---------- */
:root{
  --pad-x:clamp(16px,4vw,48px);
  --content:1200px;

  /* шкала відступів: 8 / 16 / 24 / 32 / 48 / 64 / 96 — нічого проміжного */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --sec:clamp(64px,8vw,96px);       /* ЄДИНИЙ вертикальний ритм УСІХ секцій,
                                       світлих і темних однаково */
  --gap:24px;
  --gap-l:48px;

  /* рівно три радіуси */
  --r-s:10px;
  --r-m:16px;
  --r-l:28px;

  /* СВІТЛЕ — основа сторінки */
  --bg:#FBF9F5;                     /* тло сторінки */
  --surface:#FFFFFF;                /* піднята світла поверхня: картки, панель
                                       внеску, панель карти */
  --tint:#FCEEDA;                   /* янтарний тінт: hover-стани керування */
  --ink:#201F22;                    /* чорнило — основний текст */
  --ink-muted:#5C5A60;              /* другорядний текст на світлому */

  /* ТЕМНЕ — рівно три площини */
  --dark:#17171A;                   /* терен: стат-стрічка і футер */
  --dark-deep:#101014;              /* найтемніша точка — місія */
  --paper:#FBF9F5;                  /* текст, лого і рамки НА темному */
  --dim:rgba(251,249,245,.72);      /* другорядний текст на темному */
  --dim-2:rgba(251,249,245,.54);

  --amber:#F0A020;
  --amber-d:#D88C11;

  /* ЛІНІЇ. Головна пастка інверсії: альфа, підібрана під ТЕМНЕ тло,
     на світлому дає інший результат — ті самі числа втрачають 25–30%.
     Тому лінії розділені за РОЛЛЮ, і кожна роль має власний поріг:
       --line      роздільник секцій / волосок          1,50:1  (декор)
       --line-2    видимий край піднятої поверхні       1,80:1  (декор + тінь)
       --line-ctl  ЄДИНА межа контрола — WCAG 1.4.11    3,37:1 на --bg
                                                        3,42:1 на --surface  */
  --line:rgba(32,31,34,.20);        /* лінія на світлому */
  --line-2:rgba(32,31,34,.28);
  --line-ctl:rgba(32,31,34,.52);    /* межа елемента керування на світлому */
  --line-d:rgba(251,249,245,.16);   /* лінія на темній площині */
  --line-d-2:rgba(251,249,245,.32);

  --ph:#EDE7DC;                     /* заглушка фото на світлому */
  --ph-d:#26262D;                   /* заглушка фото на темному */

  --sans:Manrope,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:Montserrat,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  letter-spacing:0;
}

/* ---------- типографіка: трекінг падає разом із кеглем ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800}
h1{font-size:clamp(2.3rem,1.68rem + 2.62vw,4rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,1.45rem + 1.7vw,2.9rem);line-height:1.06;letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.06rem + .38vw,1.4rem);line-height:1.22;letter-spacing:-.02em}

.kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:600;font-size:.78rem;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
  margin:0 0 var(--s3);
}
.kicker::before{content:"";flex:none;width:24px;height:2px;background:var(--amber)}

.lead{margin-top:var(--s3);max-width:64ch;color:var(--ink-muted);
  font-size:clamp(1.02rem,.98rem + .2vw,1.16rem);line-height:1.6}
.head{max-width:920px;margin-bottom:var(--s5)}
.fine{font-size:.92rem;line-height:1.5;color:var(--ink-muted)}

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

/* ---------- каркас ---------- */
.wrap{width:min(100% - var(--pad-x) * 2,var(--content));margin-inline:auto}
.sec{padding-block:var(--sec)}
/* межа між двома СВІТЛИМИ секціями: тепер їх поспіль кілька,
   і волосяна лінія — єдине, що їх розділяє */
.sec-rule{border-top:1px solid var(--line)}

/* ============================================================
   ТЕМНА ПЛОЩИНА — рівно три на сторінці (стат-стрічка, місія, футер).
   База світла, тому темне вводиться модифікатором .sec-dark,
   а всі спільні компоненти всередині перефарбовуються правилами
   .sec-dark X (0,2,0), що завжди б'ють базові X (0,1,0).
   Правил-сиріт тут немає: кожне з них справді щось стилізує —
   .kicker і .lead живуть у місії, .shot — кадр місії,
   .quote — теж місія, фокус — кнопки й посилання місії.
   ============================================================ */
.sec-dark{background:var(--dark);color:var(--paper)}
/* (0,2,0) — місія мусить бути темнішою за стат-стрічку, і це не
   має залежати від порядку правил */
.sec-dark.mission{background:var(--dark-deep)}
.sec-dark .kicker{color:var(--dim)}
.sec-dark .lead{color:var(--dim)}
.sec-dark .shot{background:var(--ph-d);border-color:var(--line-d)}
.sec-dark .quote span{color:var(--dim)}
.sec-dark a:focus-visible,.sec-dark button:focus-visible{outline-color:var(--amber)}
/* (0,3,0) — .btn:focus-visible і .lnk:focus-visible теж (0,2,0) і стоять
   НИЖЧЕ, тож без цієї ваги чорнильний обвід зник би на темній площині */
.sec-dark .btn:focus-visible{outline-color:var(--paper)}
.sec-dark .lnk:focus-visible{outline-color:var(--paper)}

/* ---------- фото: один фільтр, одна рамка, один радіус ---------- */
.shot{position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--ph);border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.shot-hero{aspect-ratio:4/5}
.shot-card{aspect-ratio:4/3}
.shot-mission{aspect-ratio:3/2}
.shot-portrait{aspect-ratio:4/5}
/* скрим ТІЛЬКИ знизу кадру і ТІЛЬКИ під марку фонду: сторінка світла,
   тож затемнення живе всередині фото, а не зшиває кадр із тлом */
.shot-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,rgba(16,16,20,0),rgba(16,16,20,.62));pointer-events:none}
/* специфічність (0,2,1) — інакше .shot img (0,1,1) розтягує марку на весь кадр.
   Марка лежить на фото під скримом, тому вона світла */
.shot img.shot-mark{position:absolute;left:var(--s3);bottom:var(--s3);z-index:1;
  width:auto;height:26px;max-width:50%;object-fit:contain;object-position:left center;
  filter:none;opacity:.92}

/* ---------- кнопки, посилання, фокус ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border:1px solid var(--amber);border-radius:var(--r-s);
  background:var(--amber);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.25;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
/* янтар ЗАВЖДИ з чорнильним текстом: 7,6:1. Білий на янтарі дав би 2,03:1 */
.btn:hover{background:var(--amber-d);border-color:var(--amber-d)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* привид — тільки на світлому: темних кнопок-привидів на сторінці немає,
   тому й правила .sec-dark .btn-ghost немає */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-ctl)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink)}

/* чорнильна кнопка — вторинна дія на світлому (контакти):
   темна пляма замість другого янтарю поруч із «Підтримати» */
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--dark-deep);border-color:var(--dark-deep)}

.arw{display:inline-block;transition:transform .16s ease}
.btn:hover .arw,.lnk:hover .arw{transform:translateX(3px)}

.lnk{display:inline-flex;align-items:center;gap:var(--s1);min-height:48px;
  font-weight:600;text-decoration:none;color:inherit}
.lnk-t{position:relative;padding-bottom:4px}
.lnk-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transition:height .16s ease,background-color .16s ease}
/* янтар як підкреслення, не як текст: сам текст лишається чорнильним */
.lnk:hover .lnk-t::after{height:2px;background:var(--amber)}
/* обвід чорнилом, не янтарем: янтар на світлому дає 2,15:1 і як індикатор
   фокуса не читається. На темній площині його підміняє .sec-dark .lnk (0,3,0) */
.lnk:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--r-s)}

a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-s)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.after-grid{margin-top:var(--s5)}

/* ---------- шапка: світла, зливається з героєм ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:clamp(14px,2vw,28px);min-height:80px}
.topbar .brand{display:inline-flex;align-items:center;flex:none;min-height:48px;text-decoration:none}
.topbar .brand img{height:clamp(44px,4.4vw,56px);width:auto;max-width:min(50vw,300px);
  object-fit:contain;object-position:left center;transition:opacity .16s ease}
.topbar .brand:hover img{opacity:.7}
.topbar .nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px);margin-inline-start:auto;min-width:0}
.topbar .nav a{display:inline-flex;align-items:center;min-height:48px;white-space:nowrap;
  text-decoration:none;font-weight:500;font-size:.975rem;color:var(--ink-muted);
  box-shadow:inset 0 0 0 rgba(32,31,34,0);
  transition:color .16s ease,box-shadow .16s ease}
.topbar .nav a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--line-ctl)}
/* янтарна риска під активним пунктом; сам текст — чорнило */
.topbar .nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
/* .lang — самостійний компонент (шапка + мобільне меню).
   Медіа-правило .topbar .lang{display:none} (0,2,0) перебиває .lang (0,1,0) */
.lang{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:.86rem;color:var(--ink-muted)}
.lang b{display:inline-flex;align-items:center;min-height:48px;padding-inline:4px;color:var(--ink)}
/* роздільник UA|EN: на .35 він давав 1,70:1 і «UA EN» читалось як два слова */
.lang i{font-style:normal;opacity:.55}
.lang a{display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;text-decoration:none;transition:color .16s ease}
.lang a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.topbar .btn{padding:11px 22px}
.topbar .burger{display:none;margin-inline-start:auto;color:var(--ink)}

/* іконка лишається чорнильною і на hover: янтар на світлому дав би 2,15:1
   для 2-піксельних рисок. Але сама тінтова підкладка на --bg — 1,09:1,
   тобто ніякого стану не показує: носієм стану є рамка (3,59:1 до --bg) */
.burger{width:48px;height:48px;flex:none;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-s);cursor:pointer;padding:0;
  transition:background-color .16s ease,box-shadow .16s ease}
.burger:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.burger i{display:block;position:relative;width:22px;height:2px;background:currentColor}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.burger i::before{top:-7px}
.burger i::after{top:7px}

/* ---------- мобільне меню: світле, як і шапка ---------- */
.sheet{position:fixed;inset:0;z-index:70;padding:var(--s3) var(--pad-x) var(--s5);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink)}
.sheet[hidden]{display:none}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:48px;margin-bottom:var(--s4)}
.sheet-top img{height:48px;width:auto;max-width:min(60vw,200px);
  object-fit:contain;object-position:left center}
.sheet-close{width:48px;height:48px;background:transparent;border:0;border-radius:var(--r-s);
  cursor:pointer;font-size:28px;line-height:1;color:inherit;
  transition:background-color .16s ease,box-shadow .16s ease}
/* та сама історія, що й у бургера: тінт сам по собі 1,09:1 */
.sheet-close:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.sheet nav{display:flex;flex-direction:column}
/* меню — Manrope 700: Montserrat лишається виключно заголовкам */
.sheet nav a{display:flex;align-items:center;min-height:48px;padding:18px 0;
  font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:1.35rem;
  text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .16s ease,box-shadow .16s ease}
/* hover фарбує лінію, а не текст: янтарний текст 21,6px/700 дав би 2,15:1.
   Але й сам янтар на світлому — 2,05:1, тож стан несе ще й товщина 1→3px */
.sheet nav a:hover{border-bottom-color:var(--amber);box-shadow:inset 0 -3px 0 var(--amber)}
.sheet-lang{margin-top:var(--s3);align-self:flex-start}
.sheet .btn{width:100%;margin-top:var(--s4)}

/* ============================================================
   ЛІЧИЛЬНИК МІСЦЬ — живе тільки в панелі внеску (блок 8).
   250 грн = одне місце. Стан один, вузли шукаються за
   data-атрибутами — кількість копій ролі не грає.
   ДЕГРАДАЦІЯ: кнопки «−»/«+» є в розмітці завжди, але сховані CSS;
   показує їх лише скрипт, додавши клас .js на <html>.
   .counter-ctl (0,1,0) < .js .counter-ctl (0,2,0)
   ============================================================ */
.counter-box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);min-width:0}
.counter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-width:0}
.counter-ctl{
  display:none;                      /* без JS кнопок немає — форма лишається робочою */
  align-items:center;justify-content:center;
  min-width:48px;min-height:48px;padding:0;
  /* межа — ЄДИНЕ тіло контрола: --bg на білій панелі давав 1,05:1,
     тобто фальшиве «заглиблення», якого не видно. Тепер заливка збігається
     з панеллю, а контрол окреслює рамка 3,42:1 */
  border:1px solid var(--line-ctl);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:1.5rem;line-height:1;
  cursor:pointer;transition:background-color .16s ease,border-color .16s ease,opacity .16s ease;
}
.js .counter-ctl{display:inline-flex}
.counter-ctl:hover:not(:disabled){background:var(--tint);border-color:var(--ink)}
.counter-ctl:disabled{opacity:.32;cursor:default}
.counter-ctl:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.counter-val{display:inline-block;
  font-family:var(--display);font-weight:800;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);
  font-size:clamp(2rem,1.66rem + 1.36vw,2.85rem)}
.counter-sum{display:flex;align-items:center;gap:var(--s2);min-width:0}
/* янтар як підкреслення, не як текст: колір суми лишається контрастним */
.counter-sum .counter-val{box-shadow:inset 0 -.14em 0 var(--amber)}
.counter-word{font-family:var(--sans);font-weight:600;line-height:1.25;
  font-size:clamp(.95rem,.91rem + .18vw,1.06rem);color:var(--ink-muted)}
/* знак «=» — гліф до 28,8px, а не волосок: токен рамки в color був
   післяінверсійною плутаниною (1,80:1). Тепер 6,80:1 на білій панелі */
.eq{flex:none;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(1.2rem,.98rem + .9vw,1.8rem);color:var(--ink-muted)}

/* великий стан — блок внеску (0,2,0) перебиває базовий (0,1,0) */
.counter-lg .counter-val{font-size:clamp(2.9rem,2.05rem + 3.4vw,4.6rem)}
.counter-lg .counter-ctl{min-width:56px;min-height:56px;font-size:1.75rem}
.counter-lg .counter-word{font-size:clamp(1rem,.94rem + .26vw,1.16rem)}

@keyframes bump{0%{transform:translateY(4px)}100%{transform:none}}
.counter-val.bump{animation:bump .18s ease-out}

/* ---------- 1 · герой: СВІТЛИЙ, на всю ширину, фото праворуч ----------
   Ліва межа тексту збігається з .wrap: max(--pad-x,(100% - --content)/2).
   Праворуч падінгу немає — кадр виходить у край сторінки.
   Жодного 100vw і жодних від'ємних маргінів. */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--gap-l);align-items:stretch;
  /* нижнє поле героя — той самий --sec, що й у решти секцій */
  padding-block:var(--s5) var(--sec);
  padding-inline-start:max(var(--pad-x),(100% - var(--content)) / 2);
  padding-inline-end:0;
}
.hero-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero .lead{max-width:52ch}
.hero h1{color:var(--ink)}
.hero .actions{margin-top:var(--s5)}
/* (0,2,0) перебиває .shot-hero (0,1,0): кадр тягнеться на висоту рядка */
.hero .shot-hero{aspect-ratio:auto;min-height:clamp(420px,42vw,600px);
  border-radius:var(--r-m) 0 0 var(--r-m);border-inline-end:0}

/* ---------- 2 · стат-стрічка: ПЕРША ТЕМНА ПЛОЩИНА ----------
   Найсильніше місце сторінки: цифри світяться на темному.
   Тло і колір тексту дає .sec-dark, тут лишається тільки ритм. */
.stats{padding-block:var(--sec)}
.stats-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s5)}
.stats-top img{height:30px;width:auto;max-width:min(60vw,220px);object-fit:contain;object-position:left center}
.stats-top .kicker{margin:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
/* Лінія над числом тримає чотири колонки як одну стрічку */
.stat{display:flex;flex-direction:column;border-top:1px solid var(--line-d-2);padding-top:var(--s2)}
.stat b{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-variant-numeric:tabular-nums;font-size:clamp(2.1rem,1.66rem + 1.86vw,3.3rem);color:var(--paper)}
.stat b em{font-style:normal;color:var(--amber)}
.stat span{margin-top:var(--s1);font-weight:500;font-size:.95rem;line-height:1.4;color:var(--dim)}

/* ---------- сітки ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}

/* ---------- 3 · ГЕОГРАФІЯ: текст + справжня карта областей ----------
   Карта лежить на БІЛІЙ поверхні. Після інверсії прозорий янтарний тінт
   «є групи» зійшовся з сірим «без груп» в одну яскравість (1,21:1) —
   різниця трималась ЛИШЕ на відтінку і зникала в ч/б та при ахроматопсії.
   Тому «є групи» тепер СУЦІЛЬНИЙ глибокий янтар (той самий відтінок 38°,
   але L=0,20): 3,34:1 до «без груп» і 4,19:1 до білої панелі.
   Контур областей більше не білий — на білій панелі силует України взагалі
   не проступав. Білою обвідкою лишились тільки активні області: там вона
   читається як проміжок на темній заливці (4,19:1). */
.geo{
  --map-off:#EAE5DC;                 /* область без груп — теплий сірий */
  --map-on:#A9700C;                  /* є групи — глибокий янтар */
  --map-on-h:#8B5C09;                /* наведення */
  --map-line:#807B72;                /* контур областей: 4,21:1 до білої панелі */
}
.geo-grid{display:grid;gap:var(--s5);align-items:center}
.geo-copy .lnk{margin-top:var(--s2)}
.geo-note{margin-top:var(--s3);color:var(--ink-muted);font-size:.92rem;max-width:46ch}
/* підказка про hover правдива лише там, де hover існує; на тачі її
   підміняє .geo-note-tap (див. @media (hover:none) в адаптиві) */
.geo-note-tap{display:none}

/* біла панель на майже білій сторінці (1,05:1): край дає межа ПЛЮС тінь —
   на темній базі край тримався тим, що поверхня була світліша за тло */
.geo-map{
  min-width:0;
  padding:clamp(12px,1.8vw,24px);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-l);
  box-shadow:0 1px 2px rgba(32,31,34,.06),0 10px 28px rgba(32,31,34,.04);
}
.uamap{display:block;width:100%;height:auto}
/* non-scaling-stroke: viewBox 1200 стискається до ~319px на 375 —
   без цього волосок контуру став би 0,26px і зник би у згладжуванні */
.ua-obl path{
  fill:var(--map-off);
  stroke:var(--map-line);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  transition:fill .18s ease;
}
.ua-obl path.off{fill:var(--map-off)}
/* активні області: біла обвідка тримає сусідні заливки окремо */
.ua-obl path.on{fill:var(--map-on);stroke:var(--surface);stroke-width:1.5;cursor:help}
.ua-obl path.on:hover{fill:var(--map-on-h)}
/* пін — ЧОРНИЛО зі світлою обвідкою: 3,91:1 на заливці «є групи»
   і 15,6:1 на самій обвідці. Янтарний пін на янтарній заливці давав 1,41:1.
   Стан наведення несе не лише колір, а й товщина обвідки */
.ua-pins circle{fill:var(--ink);stroke:var(--paper);stroke-width:2;cursor:help;
  transition:fill .18s ease,stroke-width .18s ease}
.ua-pins circle:hover{fill:var(--dark-deep);stroke-width:3.5}

.map-legend{list-style:none;margin:var(--s4) 0 var(--s3);padding:0;display:grid;gap:var(--s2)}
.map-legend li{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--ink)}
.map-legend i{flex:none;width:15px;height:15px;border-radius:4px;border:1px solid var(--line-ctl)}
.map-legend .i-on{background:var(--map-on)}
.map-legend .i-off{background:var(--map-off)}
/* після .map-legend i (та сама вага 0,2,0) — інакше рамка й квадрат лишились би.
   Кружечок повторює колір піна на карті: янтарний давав 2,05:1 на --bg */
.map-legend .i-pin{width:14px;height:14px;border-radius:50%;border:0;background:var(--ink)}

/* текстовий двійник карти: ті самі дані без hover — для тачу, клавіатури
   і скрінрідерів (діти <svg role="img"> вилучені з дерева доступності,
   тож 25 <title> областей і 10 <title> пінів для AT не існують) */
.geo-list{list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3)}
.geo-list li{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s2);min-width:0;font-size:.95rem;line-height:1.45;color:var(--ink-muted)}
.geo-list b{min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.geo-list span{flex:none;font-variant-numeric:tabular-nums}

/* ---------- 4 · напрями: слайдер до 1024px, сітка 2×2 від 1024px ---------- */
.slider{
  /* НЕ minmax(0,…): нуль у мінімумі дозволяє розкладці втиснути всі треки
     в контейнер — слайдер перестає прокручуватись. Жорсткий трек = --slide. */
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--slide,86%);
  gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  padding-block:4px;                 /* повітря під підйом .card:hover */
  scrollbar-width:thin;              /* без JS смуга прокрутки — єдина підказка */
}
/* смугу ховаємо ТІЛЬКИ коли є скрипт: тоді керування дають крапки і стрілки */
.js .slider{scrollbar-width:none;-ms-overflow-style:none}
.js .slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
.slider:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--r-m)}

/* без JS керування слайдером не працює — тому воно й не показується */
.work .slider-nav{display:none;align-items:center;justify-content:space-between;
  gap:var(--s2);margin-top:calc(var(--s3) - 4px)}
.js .work .slider-nav{display:flex}
.dots{display:flex;align-items:center}
.dot{display:inline-flex;flex:none;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;background:transparent;border:0;cursor:pointer}
/* крапки — індикатор стану, тобто поріг 3:1 (WCAG 1.4.11). Токен рамки
   давав 1,80:1, янтар --amber-d — 2,60:1: обидві крапки були невидимі
   на тлі, а не лише нерозрізненні між собою */
.dot i{display:block;width:20px;height:4px;border-radius:2px;background:rgba(32,31,34,.55);
  transition:background-color .16s ease,width .16s ease}
/* стан несе і ширина (20→32px), і колір (3,69:1 → 15,6:1), і aria-current */
.dot[aria-current="true"] i{width:32px;background:var(--ink)}
.arrows{display:flex;gap:var(--s1)}
.sbtn{display:inline-flex;align-items:center;justify-content:center;
  /* --surface на --bg — 1,05:1, тіла стрілки не видно: контрол окреслює межа */
  width:48px;height:48px;padding:0;border:1px solid var(--line-ctl);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,opacity .16s ease}
.sbtn:hover:not(:disabled){border-color:var(--ink);background:var(--tint)}
.sbtn:disabled{opacity:.32;cursor:default}

/* картка: тіло --surface на сторінці --bg — 1,05:1, тобто тіла немає.
   Край дають межа (1,80:1) і тінь; на темній базі край тримався тим,
   що піднята поверхня була світлішою за тло — після інверсії ця опора зникла */
.card{display:flex;flex-direction:column;height:100%;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 1px 2px rgba(32,31,34,.06);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-2px);border-color:var(--line-ctl);
  box-shadow:0 8px 22px rgba(32,31,34,.10)}
.card .shot{border:0;border-radius:0}
.card-body{display:flex;flex-direction:column;flex:1;padding:var(--s4)}
.card-body p{margin-top:var(--s2);max-width:62ch;color:var(--ink-muted);font-size:1rem;line-height:1.6}

/* порядковий номер — окремий типографічний елемент.
   Живе тільки на світлому (картки напрямів і кроки), тому темної
   версії немає: зайве правило .sec-dark .idx нічого б не стилізувало */
.idx{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
/* Номер без рамки: сама рамка давала чотири лінії на кожен номер,
   а їх на сторінці буває сім. Тепер номер тримає янтар і кегль. */
.idx b{display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--amber)}
.idx i{flex:1;height:1px;background:var(--line)}
/* У картці .step лінія вже є зверху — друга, біля номера, робила блок
   смугастим. Лишаємо риску тільки картках напрямів (.card). */
.step .idx i{display:none}

/* ---------- 5 · місія: ДРУГА ТЕМНА ПЛОЩИНА, найтемніша точка ---------- */
.mission .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gap-l);align-items:stretch}
/* (0,2,0) перебиває .shot-mission (0,1,0): фото тягнеться на висоту текстової колонки */
.mission .shot-mission{aspect-ratio:auto;min-height:clamp(320px,32vw,480px)}
.mission .head{margin-bottom:0}
.quote{margin:var(--s4) 0 0;border-left:3px solid var(--amber);padding-left:var(--s3)}
.quote p{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.12rem,1.01rem + .46vw,1.42rem);line-height:1.32;max-width:34ch}
.quote span{display:block;margin-top:var(--s2);font-family:var(--sans);font-weight:500;
  letter-spacing:0;font-size:.92rem}
.mission .quote + .lead{margin-top:var(--s4)}

/* ---------- 6 · як працює фонд: чорнильні риски на світлому ---------- */
/* Лінія зверху лишається: вона задає початок картки в сітці.
   Без неї три колонки втрачають опору і читаються як суцільний текст. */
.step{display:flex;flex-direction:column;height:100%;
  border-top:2px solid var(--ink);padding-top:var(--s3)}
.step .idx{margin-bottom:var(--s2)}
.step h3{margin-top:var(--s1)}
.step p{margin-top:var(--s2);max-width:60ch;color:var(--ink-muted)}

/* ---------- 7 · команда ---------- */
.person{display:flex;flex-direction:column;height:100%}
.person h3{margin-top:var(--s2);font-size:1.075rem}
.person span{display:block;margin-top:auto;padding-top:var(--s1);color:var(--ink-muted);font-size:.94rem}
/* правило .note прибране разом із єдиним своїм елементом (прев'ю-репліка
   про заглушки, що витекла в живу сторінку) — щоб не лишати сироту в CSS */

/* ---------- 8 · внесок: кікер, H2, одна біла панель, один рядок ---------- */
.give .head{margin-bottom:var(--s4)}
.give-bar{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:0 1px 2px rgba(32,31,34,.06),0 10px 28px rgba(32,31,34,.04);
  padding:clamp(20px,2.6vw,36px)}
.give-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.give-foot .btn{margin-inline-start:auto}
.give .fine{margin-top:var(--s3);max-width:72ch}
.give .fine a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* hover потовщує янтарне підкреслення, а текст лишається чорнильним:
   янтарний текст на світлому — 2,15:1 */
.give .fine a:hover{text-decoration-color:var(--amber);text-decoration-thickness:3px}

.seg{display:flex;flex:none;border:1px solid var(--line-ctl);border-radius:var(--r-s);overflow:hidden}
.seg-b{min-height:48px;padding:12px 20px;border:0;background:transparent;color:var(--ink-muted);
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;
  transition:background-color .16s ease,color .16s ease}
.seg-b + .seg-b{border-left:1px solid var(--line-ctl)}
.seg-b:hover{color:var(--ink)}
/* натиснутий стан — чорнило, а не тло сторінки: після інверсії --bg світлий
   і старе правило зробило б активну кнопку невидимою */
.seg-b[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg-b:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:0}
/* (0,3,0) — на чорнильному натиснутому стані чорна обвідка була б невидима */
.seg-b[aria-pressed="true"]:focus-visible{outline-color:var(--amber)}

/* ---------- 9 · контакти ---------- */
.contact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3) var(--s5)}
.clist{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.clist a{display:inline-flex;align-self:flex-start;align-items:center;min-height:48px;
  text-decoration:none;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.15rem,1.02rem + .56vw,1.5rem);overflow-wrap:anywhere;
  /* пошта й телефон без text-decoration і тим самим кольором, що заголовки:
     підкреслення — єдине, що робить їх посиланнями, тож воно мусить бути видиме */
  box-shadow:inset 0 -1px 0 var(--line-ctl);transition:box-shadow .16s ease}
/* на світлому янтарний текст читався б як 2,15:1 — тому янтар іде в лінію */
.clist a:hover{box-shadow:inset 0 -3px 0 var(--amber)}

/* ---------- 10 · футер: ТРЕТЯ ТЕМНА ПЛОЩИНА, друга дужка сторінки ----------
   Тло і колір тексту дає .sec-dark; тут — янтарна лінія 3px і ритм. */
.footer{border-top:3px solid var(--amber);padding-block:var(--sec) var(--s4)}
.fcols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr);gap:var(--gap-l)}
.fbrand img{height:38px;width:auto;max-width:min(70vw,260px);object-fit:contain;object-position:left center}
.fbrand p{margin-top:var(--s3);color:var(--dim);font-size:.98rem;max-width:56ch}
.fbrand .legal{margin-top:var(--s2);font-size:.9rem;color:var(--dim-2)}
.fhead{display:block;font-weight:600;font-size:.76rem;line-height:1.2;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:var(--s1)}
.fcol nav,.fcol .flist{display:flex;flex-direction:column}
.fcol a{display:inline-flex;align-self:flex-start;align-items:center;min-height:48px;
  text-decoration:none;font-weight:500;color:var(--dim);overflow-wrap:anywhere;
  transition:color .16s ease,box-shadow .16s ease}
/* тут янтар на тексті дозволений: на темному він дає 8,3:1 */
.fcol a:hover{color:var(--amber);box-shadow:inset 0 -1px 0 var(--amber)}
/* соцмережі футера: реальні акаунти фонду — Instagram, YouTube, Facebook */
.fhead-2{margin-top:var(--s3)}
/* gap по ОБОХ осях: при переносі 48-піксельні тач-цілі не злипаються */
.fsocial{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.fcol .fsocial a{gap:10px}
.fsocial svg{flex:none}
.fbottom{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between;
  font-size:.9rem;color:var(--dim-2)}

/* ============================================================
   АДАПТИВ — селектори тієї ж специфічності, що й базові
   ============================================================ */
@media (max-width:1200px){
  .topbar .nav,.topbar .lang,.topbar .btn{display:none}
  .topbar .burger{display:inline-flex}
}
@media (max-width:1000px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
  .fbrand{grid-column:1/-1}
}
@media (max-width:900px){
  /* герой стає звичайною секцією у полях сторінки */
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s4);
    padding-inline-start:var(--pad-x);padding-inline-end:var(--pad-x)}
  .hero .shot-hero{aspect-ratio:16/9;min-height:0;
    border-radius:var(--r-m);border-inline-end:1px solid var(--line)}
  .hero .lead{max-width:64ch}
  .mission .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  /* одна колонка: висоту рядка задає сам елемент — повертаємо власну пропорцію */
  .mission .shot-mission{aspect-ratio:3/2;min-height:0}
  /* .grid-3 тут НЕ згортаємо: 3 кроки в 2 колонки давали сироту на 768/810/834 */
}
@media (max-width:760px){
  /* лічильник: у рядок він перестає вміщатися вже на ~700px (сума стає
     чотиризначною), тому знак «=» ховаємо і рвемо блоки саме тут, а не на 560 */
  .counter-box .eq{display:none}
  .counter-box .counter,.counter-box .counter-sum{flex:1 1 100%}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  /* команда: 2 колонки лишаються аж до 320px — інакше портрет 4/5
     розтягується на всю ширину і чотири заглушки займають три екрани */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-body{padding:var(--s3)}
  .contact-row{align-items:stretch}
  .contact-row .btn{width:100%}
}
@media (max-width:560px){
  .stats-grid,.fcols{grid-template-columns:minmax(0,1fr)}
  .actions{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .actions .btn{width:100%}
  .actions .lnk{align-self:center;justify-content:center}
  .give-bar{padding:var(--s3)}
  .counter-lg .counter-ctl{min-width:48px;min-height:48px;font-size:1.5rem}
  .seg{flex:1 1 100%}
  .seg-b{flex:1 1 0;min-width:0}
  .give-foot .btn{width:100%;margin-inline-start:0}
  .fbottom{flex-direction:column;gap:var(--s1)}
  /* «Хмельницька» + «13 груп» у два стовпці по ~135px ламали б слово навпіл */
  .geo-list{grid-template-columns:minmax(0,1fr)}
}
/* Тач без hover: нативні тултипи карти недосяжні, тому підказка про
   наведення тут просто неправдива, а cursor:help обіцяє неіснуючу дію.
   Карта лишається ілюстрацією, дані читаються зі списку під нею. */
@media (hover:none){
  .geo-note-hover{display:none}
  .geo-note-tap{display:block}
  .uamap{pointer-events:none}
}
/* скільки картки видно у слайдері на різних ширинах.
   НЕ опускати --slide нижче 52%: при 46% крок (slide + gap) більший за
   залишок прокрутки — третій слайд недосяжний, а третя крапка мертва.
   56% тримається аж до порога сітки 1024px. */
@media (min-width:640px){.slider{--slide:56%}}
/* від 1024px слайдер стає сіткою 2×2. Той самий поріг
   зашитий у скрипті (wide): числа мусять рухатися разом. */
@media (min-width:1024px){
  /* географія: текст ліворуч, карта праворуч — нижче лишається одна колонка */
  
  .slider{display:grid;grid-auto-flow:row;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
    padding-block:0;overflow:visible;scroll-snap-type:none}
  .js .work .slider-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .slider{scroll-behavior:auto}
}


/* ============================================================
   V8 · ДОДАНЕ ДО МАКЕТА
   Випадайкове меню, три способи підтримки, рядки форми внеску.
   Усе на наявних токенах — жодного нового кольору чи розміру.
   ============================================================ */


/* ---------- три способи підтримати ---------- */
.ways{align-items:stretch}
.way{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);
}
.way h3{margin-bottom:var(--s1)}
.way p{color:var(--ink-muted);font-size:.98rem;line-height:1.6}
/* Приписка тримається низу картки, щоб кнопки в ряду стояли на одній лінії */
.way-note{margin-top:auto;color:var(--ink);font-weight:600}
.way .btn{margin-top:var(--s2);align-self:flex-start}

/* ---------- форма внеску: рядок «підпис — вибір» ---------- */
.give-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-width:0}
.give-label{
  flex:none;min-width:132px;
  font-weight:600;font-size:.92rem;color:var(--ink-muted);
}
.amounts{flex-wrap:wrap}

@media (max-width:640px){
  .give-label{min-width:0;width:100%}
}


/* ---------- внесок: щільна подача ----------
   Блок навмисно короткий: він стоїть наприкінці сторінки, де читач уже
   все знає, і має лишатися дією, а не ще одним лонгрідом. Тому картки
   вужчі за звичайні, тексти йдуть дрібнішим кеглем, а замість трьох
   янтарних кнопок поспіль — текстові посилання. */
.ways{gap:var(--s3)}
.way{padding:var(--s3);gap:6px}
.way h3{font-size:clamp(1.05rem,1rem + .22vw,1.18rem);margin-bottom:2px}
.way p{font-size:.92rem;line-height:1.5}
.way .lnk{margin-top:auto;min-height:40px;font-size:.95rem}
.way-note{margin-top:var(--s1);font-size:.9rem}

/* Форма одним рядком: періодичність, сума і дія читаються як одне речення */
.give-bar--row{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  padding:var(--s3);
}
.give-bar--row .seg{flex:0 0 auto}
.give-bar--row .amounts{flex-wrap:wrap}
.give-bar--row .btn{margin-inline-start:auto}
@media (max-width:860px){
  .give-bar--row .btn{margin-inline-start:0;width:100%}
}



/* ============================================================
   V8-2 · СТОРІНКА «ПРО ФОНД»
   Текстова сторінка: довгі абзаци, цитати, нумерований список.
   Усе на наявних токенах.
   ============================================================ */

/* Заголовок текстової сторінки: без кадру, з повітрям зверху */
.page-hero{padding-block:var(--s6) var(--sec)}
.page-hero h1{max-width:16ch;margin-block:var(--s2) var(--s3)}
.page-hero .lead{max-width:64ch;margin-top:0}

/* Колонка суцільного тексту: 68 символів — межа, за якою око
   починає губити початок наступного рядка */
.prose-col{max-width:68ch;display:flex;flex-direction:column;gap:var(--s3)}
.prose-col p{color:var(--ink-muted);font-size:1.02rem;line-height:1.7}
.lead-big{font-size:clamp(1.1rem,1.03rem + .32vw,1.28rem);line-height:1.6;color:var(--ink)}

/* Сітка 2×2 для довших тез */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-l)}

/* Ланцюг «діти → молодь → …»: єдиний рядок, який має читатися
   як формула, тому виділений і не переноситься посеред стрілки */
.chain{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.4;
  color:var(--ink);text-wrap:balance;
}

/* Цитати на темному: три поспіль, тому розділені лінією, а не рамкою */
.verses{display:grid;gap:var(--s5)}
.verses .quote{
  margin:0;padding:0 0 var(--s5) 0;border:0;
  border-bottom:1px solid var(--line-d);
}
.verses .quote:last-child{border-bottom:0;padding-bottom:0}
.verses .quote p{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,1.05rem + .85vw,1.85rem);
  line-height:1.3;letter-spacing:-.02em;color:var(--paper);
}
.verses .quote span{
  display:block;margin-top:var(--s2);
  font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--amber);
}

/* Нумерований список напрямів */
.numlist{
  max-width:72ch;margin:0;padding:0;list-style:none;
  counter-reset:n;display:grid;gap:var(--s3);
}
.numlist li{
  position:relative;padding-left:52px;counter-increment:n;
  font-size:1.02rem;line-height:1.6;color:var(--ink-muted);
}
.numlist li::before{
  content:counter(n);position:absolute;left:0;top:-2px;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink);
}

/* Плани: три показники замість чотирьох */
.stats-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plans-lead{max-width:70ch;margin-bottom:var(--s5);color:var(--dim)}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;gap:var(--s5)}
  .stats-grid--3{grid-template-columns:1fr;gap:var(--s4)}
}


  /* Групи в меню. Випадайок немає навмисно: кожна сторінка лишається за один
     клік, а належність показують тісніший проміжок усередині групи і тонка
     риска між групами. */

  /* Підписи груп у мобільному аркуші: там є вертикальне місце, тож групу
     можна назвати словом замість риски. */
  .sheet-cap{margin:var(--s3) 0 2px;font-family:var(--sans);font-weight:700;
    font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);opacity:.75}
  .sheet nav > .sheet-cap:first-child{margin-top:var(--s2)}

  /* ---------- випадайки-полиці ---------- */
  /* Кнопка групи виглядає як звичайний пункт меню — різниця лише в шевроні. */
  .topbar .nav-trig{display:inline-flex;align-items:center;gap:7px;min-height:48px;
    background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:500;
    font-size:.975rem;color:var(--ink-muted);white-space:nowrap;
    box-shadow:inset 0 -2px 0 transparent;transition:color .16s ease,box-shadow .16s ease}
  .topbar .nav-trig:hover{color:var(--ink)}
  /* Бурштин означає «ви тут»: він лишається за поточною сторінкою і за групою,
     всередині якої ця сторінка. Відкрите меню — інший стан, тож йому
     чорнильна риска, інакше два різні значення виглядають однаково. */
  .topbar .nav-trig[data-in="1"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
  .topbar .nav-trig[aria-expanded="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
  .topbar .nav-trig[data-in="1"][aria-expanded="true"]{box-shadow:inset 0 -2px 0 var(--amber)}
  .topbar .nav-trig:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
  /* Штрих шеврона той самий, що й у волосяних ліній; обертається на місці. */
  .topbar .nav-trig .cev{flex:none;width:8px;height:8px;margin-top:-3px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg);transform-origin:50% 50%;transition:transform .18s ease}
  .topbar .nav-trig[aria-expanded="true"] .cev{transform:rotate(-135deg)}

  /* Картка звисає рівно з-під своєї кнопки: --np-x ставить скрипт.
     Верхньої рамки немає навмисно — її роль виконує нижня лінія шапки,
     тож лінія лишається неперервною, а картка читається як вкладка. */
  .nav-panel{position:absolute;top:100%;left:var(--np-x,0px);z-index:59;
    width:440px;max-width:calc(100vw - var(--pad-x) * 2);
    background:var(--bg);border:1px solid var(--line-ctl);border-top:0;
    border-radius:0;box-shadow:none}
  .nav-panel[hidden]{display:none}
  .nav-panel .wrap{display:block;width:100%;max-width:none;margin:0;padding:0}
  .topbar .np-item{display:block;white-space:normal;min-height:0;font-weight:400;
    text-decoration:none;padding:16px 22px;position:relative;
    box-shadow:inset 2px 0 0 transparent;transition:box-shadow .16s ease,background .16s ease}
  .topbar .np-item:hover{background:var(--tint);box-shadow:inset 2px 0 0 var(--amber)}
  .topbar .np-item:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
  /* роздільник симетричний до полів картки, а не впритул до рамки */
  .topbar .np-item + .np-item::before{content:"";position:absolute;top:0;
    left:22px;right:22px;height:1px;background:var(--line)}
  .np-t{display:block;font-family:var(--sans);font-weight:800;letter-spacing:-.015em;
    font-size:1.04rem;line-height:1.25;color:var(--ink)}
  .np-d{display:block;margin-top:5px;font-size:.88rem;line-height:1.4;color:var(--ink-muted)}
  .topbar .np-item[aria-current="page"]{box-shadow:inset 2px 0 0 var(--amber)}

  /* Пара «заголовок + кадр». Потрібна там, де в секції зʼявилося фото:
     без неї .head, кадр і текст лягають трьома окремими смугами, і нижній
     текст візуально ні до чого не кріпиться. */
  .intro-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--gap-l);align-items:center;margin-bottom:var(--s5)}
  .intro-row .head{margin-bottom:0;max-width:none}
  .intro-row .shot-mission{aspect-ratio:3/2;min-height:0}
  @media (max-width:860px){
    .intro-row{grid-template-columns:1fr;gap:var(--s4)}
  }

  /* ---------- інтерактивна карта ---------- */
  /* Карті віддано більше місця: у цій секції головне — саме вона, а не текст. */
  .geo-canvas{position:relative}
  .pin{position:absolute;left:calc(var(--x) / 1200 * 100%);top:calc(var(--y) / 801 * 100%);
    transform:translate(-50%,-50%) scale(calc(1 / var(--k,1)));
    width:calc(var(--r) / 1200 * 200%);aspect-ratio:1;
    min-width:5px;height:auto;padding:0;border:0;background:none;cursor:pointer;z-index:2}
  /* Сама крапка лишається дрібною, а зона натискання — пальцевого розміру. */
  .pin::after{content:"";position:absolute;inset:50%;width:30px;height:30px;
    transform:translate(-50%,-50%)}
  .pin span{display:block;width:100%;height:100%;border-radius:50%;
    background:var(--ink);box-shadow:0 0 0 2px var(--surface);
    transition:background .16s ease,transform .16s ease}
  .pin:hover span,.pin:focus-visible span,.pin[aria-pressed="true"] span{
    background:var(--amber);transform:scale(1.45)}
  .pin:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:50%}
  .geo-tip{position:absolute;z-index:3;pointer-events:none;opacity:0;
    transform:translate(-50%,-100%);transition:opacity .14s ease;
    background:var(--ink);color:var(--paper);border-radius:var(--r-s);
    padding:8px 12px;white-space:nowrap;font-size:.86rem;line-height:1.35}
  .geo-tip b{display:block;font-family:var(--sans);font-weight:800;font-size:.94rem}
  .geo-tip[data-on="1"]{opacity:1}
  .uamap .on{pointer-events:auto;cursor:pointer;transition:fill .16s ease}
  .uamap .on.hot{fill:var(--amber)}

  /* Легенда в один рядок: три короткі підписи замість трьох рядків тексту. */
  .map-legend{list-style:none;margin:var(--s3) 0;padding:0;
    display:flex;flex-wrap:wrap;gap:8px var(--s3)}
  .map-legend li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-muted)}
  .geo-note{margin-top:var(--s2);color:var(--ink-muted);font-size:.88rem;max-width:40ch}

  /* Список під картою — розкривний. Показуємо область і число, назви
     населених пунктів відкриваються дотиком: інакше блок тягнувся на пів
     екрана і на телефоні його доводилося довго гортати. */
  .geo-net{list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
    border-top:1px solid var(--line);display:block}
  .geo-net .geo-row{box-shadow:inset 0 -1px 0 var(--line)}
  .geo-net .geo-head{display:flex;width:100%;align-items:baseline;justify-content:space-between;
    gap:var(--s3);min-height:48px;padding:10px 2px;background:none;border:0;cursor:pointer;
    font:inherit;text-align:start;color:var(--ink);transition:background .16s ease}
  .geo-net .geo-head b{font-weight:600}
  .geo-net .geo-head .geo-n{flex:none;color:var(--ink-muted);font-variant-numeric:tabular-nums}
  .geo-net .geo-head:hover{background:var(--tint)}
  .geo-net .geo-head:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  .geo-net .geo-places{margin:0;padding:0 2px 14px;color:var(--ink-muted);
    font-size:.9rem;line-height:1.5;display:none}
  .geo-net .geo-head[aria-expanded="true"] + .geo-places{display:block}
  .geo-net .geo-head[aria-expanded="true"]{color:var(--ink)}
  .geo-net .geo-row[hidden]{display:none}
  .geo-net .geo-row.sel{box-shadow:inset 0 -1px 0 var(--line),inset 3px 0 0 var(--amber)}
  .geo-reset{margin-top:var(--s3)}
  .geo-reset[hidden]{display:none}

  @media (max-width:1023px){
    /* На телефоні карта на всю ширину і без зайвих полів. */
    .geo-map{padding:clamp(8px,2vw,14px)}
  }

  /* Обгортка, яку наближаємо: у ній і карта, і точки — одна система
     координат, тож вони масштабуються разом. */
  .geo-zoom{transform-origin:0 0;transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .geo-canvas{overflow:hidden;border-radius:var(--r-m)}
  .geo-canvas[data-zoom="1"] .pin span{box-shadow:0 0 0 2px var(--surface)}
  @media (prefers-reduced-motion:reduce){ .geo-zoom{transition:none} }


  /* Назви в списку — кнопки: на телефоні саме вони, а не дрібні точки,
     дають надійний спосіб відкрити конкретний населений пункт. */
  .geo-place{display:inline-flex;align-items:center;min-height:36px;
    padding:5px 10px;margin:0 4px 6px 0;border:1px solid var(--line);
    border-radius:999px;background:none;cursor:pointer;font:inherit;
    font-size:.88rem;color:var(--ink-muted);
    transition:background .16s ease,border-color .16s ease,color .16s ease}
  .geo-place:hover{background:var(--tint);color:var(--ink)}
  .geo-place:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .geo-place[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .geo-net .geo-places{padding-bottom:10px}

  /* Карта на всю ширину: заголовок згори, карта під ним, список знизу. */
  .geo-grid{display:block}
  .geo-copy{display:grid;gap:var(--s3) var(--gap-l);margin-bottom:var(--s4)}
  .geo-headline h2{max-width:24ch;font-size:clamp(1.6rem,3vw,2.4rem)}
  .geo-aside .lnk{margin-top:var(--s2)}
  .geo-map{padding:clamp(10px,1.4vw,18px)}
  /* Список під картою — у колонки: так десять областей перестають бути
     довгою стрічкою і вміщуються в один погляд. */
  .geo-net{column-gap:var(--gap-l)}
  .geo-net .geo-row{break-inside:avoid}
  @media (min-width:900px){
    .geo-copy{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}
    .geo-net{columns:2}
  }
  @media (min-width:1280px){
    .geo-net{columns:3}
  }
  /* Відкрита область іде на всю ширину списку, щоб її назви не рвалися
     між колонками. */
  .geo-net .geo-row.sel{column-span:all;break-inside:avoid}

  /* Карта на всю доступну ширину; висоту більше не економимо, бо список
     переїхав усередину неї. */
  .geo-map{position:relative;width:min(100%, 1560px, calc(92vh * 1.4981));
    margin-inline:auto;box-sizing:border-box}

  @media (min-width:1180px){
    .geo .wrap{width:100%;max-width:none;padding-inline:var(--pad-x)}
    .geo-copy{max-width:var(--content);margin-inline:auto}
    /* Список лягає в порожній південний схід карти — там немає ані областей
       із групами, ані точок, тож він нічого не затуляє. */
    .geo-net{position:absolute;right:2.5%;bottom:3%;width:min(46%,560px);
      margin:0;padding:var(--s3) var(--s3) var(--s2);
      background:color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter:blur(2px);
      border:1px solid var(--line);border-radius:var(--r-m);
      columns:2;column-gap:var(--s3);z-index:4}
    .geo-net .geo-head{min-height:38px;padding:6px 2px;font-size:.94rem}
    .geo-net .geo-places{font-size:.84rem}
    .geo-net .geo-row.sel{column-span:all}
    .geo-reset{position:absolute;right:2.5%;bottom:calc(3% - 44px);z-index:4}
  }
  @media (min-width:1180px) and (max-width:1400px){
    .geo-net{width:min(52%,520px);font-size:.92rem}
  }

  /* ---- шліфування ---- */
  /* Кнопка скидання лишалася сирою браузерною: сіра плашка й чужий кегль.
     Скидаємо так само, як уже зроблено для .geo-head і .geo-place. */
  button.lnk{background:none;border:0;padding:0;cursor:pointer;font-size:inherit;color:inherit}
  /* Клас .lnk уже задає min-height:48px, тож магічне «-44px» більше не потрібне:
     кнопка живе в потоці панелі, а не звисає з картки. */
  .geo-reset{position:static;margin-top:var(--s2);align-self:start}
  .geo-net .geo-row:last-child{box-shadow:none}
  /* Обрана область має бути видно на самій карті, а не лише у списку. */
  .uamap .on.hot{fill:var(--amber)}
  .uamap .on{cursor:pointer}
  .ua-obl path.on{cursor:pointer}
  /* Межа чіпів була 1,5:1 — нижче за власний стандарт системи. */
  .geo-place{border-color:var(--line-ctl)}
  @media (max-width:1179px){
    /* на дотику ціль має бути такою ж, як решта: 44 px, а не 36 */
    .geo-place{min-height:44px;padding:8px 14px}
  }
  /* Підпис не повинен вилазити за край полотна на вузькому екрані. */
  @media (max-width:560px){
    .geo-tip{white-space:normal;max-width:min(240px,calc(100vw - 64px))}
  }
  /* На 900–1179 px шапка ще в один стовпчик, інакше легенда рветься надвоє. */
  @media (min-width:900px) and (max-width:1179px){
    .geo-copy{grid-template-columns:1fr}
  }

  /* Другий рядок підказки пояснює, чому на карті менше областей, ніж у
     стрічці чисел. Він службовий, тому тихіший за перший. */
  .geo-note-2{margin-top:6px;color:var(--ink-muted);opacity:.75;font-size:.86rem}

  /* ---- на що йдуть кошти ---- */
  /* Один ритм на всі шість пунктів.
     Раніше під заголовком стояли три різні розкладки поспіль: два рядки
     «підпис ліворуч / текст праворуч» із порожнечею під короткими
     підписами, а далі чотири пункти в сітці на три колонки, четвертий з
     яких падав у другий ряд. Око читало це як три зшиті блоки.
     Тепер шість однакових рядків, розділених волосяними лініями; назва
     й пояснення йдуть одним рядком, тож короткі пункти лишаються
     короткими і порожнеч не утворюють. Ієрархію тримає порядок і те,
     що пояснення є лише в перших двох. */
  .spend{margin-top:var(--s5)}
  .spend h3{border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s2)}
  .spend-list{list-style:none;margin:0;padding:0;max-width:82ch}
  .spend-list li{border-top:1px solid var(--line);padding:13px 0;
    color:var(--ink-muted);line-height:1.55}
  .spend-list li:first-child{border-top:0}
  .spend-list li:last-child{border-bottom:1px solid var(--line)}
  .spend-list b{font-weight:600;color:var(--ink)}
  .spend-tail{margin-top:var(--s3);color:var(--ink-muted);max-width:62ch}
  .sec-dark .spend h3{border-top-color:rgba(255,255,255,.5)}
  .sec-dark .spend-list li{color:inherit;opacity:.86;border-top-color:rgba(255,255,255,.22)}
  @media (max-width:640px){
    .spend{margin-top:var(--s4)}
    .spend-list li{padding:11px 0}
  }

  /* ---- формати підтримки на головній ---- */
  /* Стисліший варіант картки .way: на головній це вже друга згадка про
     підтримку, тож вона не має важити стільки ж, як на своїй сторінці. */
  .ways-tight{margin-top:var(--s4)}
  .ways-tight .way{padding:var(--s3)}
  .ways-tight .way h3{font-size:1.05rem}
  .ways-tight .way p{font-size:.94rem}
  .ways-tight .lnk{margin-top:auto;padding-top:var(--s2)}

  /* ---- слайдер фотографій на першому екрані ---- */
  /* Рамка лишається тією самою .shot-hero: змінюється тільки її вміст.
     Трек — та сама механіка scroll-snap, що й у слайдері напрямів. */
  .shot-slider .shot-track{
    display:grid;grid-auto-flow:column;grid-auto-columns:100%;
    height:100%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  }
  .shot-slider .shot-track::-webkit-scrollbar{display:none}
  .shot-slider .shot-track>img{scroll-snap-align:start;scroll-snap-stop:always;
    width:100%;height:100%;object-fit:cover}
  .shot-slider .shot-track:focus-visible{outline:3px solid #fff;outline-offset:-6px}

  /* Керування лежить на скримі, який у .shot-hero уже є знизу кадру,
     тому воно світле й читається без власної плашки. */
  .shot-nav{position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;
    display:none;align-items:center;gap:8px}
  .js .shot-nav{display:flex}
  .shot-dots{display:flex;align-items:center;margin-right:4px}
  .shot-dots .dot i{background:rgba(255,255,255,.55)}
  .shot-dots .dot[aria-current="true"] i{background:#fff}
  .sbtn-ghost{background:rgba(16,16,20,.34);border-color:rgba(255,255,255,.55);color:#fff;
    backdrop-filter:blur(3px)}
  .sbtn-ghost:hover:not(:disabled){background:rgba(16,16,20,.5)}
  .sbtn-ghost:disabled{opacity:.4}
  /* Без скрипта слайдер лишається читабельним: видно перший кадр,
     решта доступна горизонтальною прокруткою самого треку. */
  /* На телефоні кадр і керування разом не вміщаються. Виміряно: на 390px
     кадр 358x201, а .shot-nav — 304px завширшки, тобто 85% ширини кадру і
     чверть його висоти; крапки при цьому налазять на марку фонду.
     Два кроки. Перший: кадр стає 4:3 замість 16:9 — на 390px це 358x268
     замість смуги в 201px. 16:9 писалося під одну колонку планшета, а не
     під телефон. Другий: стрілки ховаємо — трек гортається пальцем і без
     них, а ті 96px, які вони займали, і були причиною накладання. */
  @media (max-width:560px){
    .hero .shot-hero{aspect-ratio:4/3}
    .shot-nav{right:var(--s2);bottom:var(--s2);gap:6px}
    .shot-nav .sbtn{display:none}
    /* 40x48 замість 48x48: чотири крапки разом із маркою мають лишати
       зазор навіть на 320px. Поріг дотику 24px (WCAG 2.5.8) не порушено. */
    .shot-dots .dot{width:40px}
  }
  /* На 320px марка й крапки все одно сходяться впритул (виміряно: зазор
     -5px). Зменшуємо марку й підсуваємо її до краю — ховати логотип фонду
     з єдиного кадру першого екрана заради пʼяти пікселів не варто. */
  @media (max-width:360px){
    .shot img.shot-mark{height:20px;left:var(--s2)}
  }

  /* ---- фото на головній ---- */
  /* Тизер галереї: шість кадрів і посилання на сторінку з рештою.
     Сітка своя, а не .gal-grid нижче: та розкладає «пазл» правилом
     nth-child(10n+6) і розрахована на два з половиною десятки кадрів —
     на шести велика плитка припала б навмання, лишивши смугу з діркою.
     Тут навпаки: рівний ритм, бо це тизер, а не сама галерея. */
  .shots-grid{display:grid;gap:var(--s2);text-decoration:none;
    grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Пропорцію тримає плитка, а не саме зображення. Перевірено: <img> зі
     своїм width:100% віддає в розрахунок висоти рядка НАТУРАЛЬНУ висоту
     кадру (480 px), рядок виростає під неї, а stretch розтягує знімок —
     4:3 перетворюється на портрет. Той самий прийом, що в .gal-open. */
  .shots-tile{display:block;aspect-ratio:4/3;overflow:hidden;
    border:1px solid var(--line);border-radius:var(--r-m);background:var(--ph);
    transition:border-color .16s ease}
  /* підсвічуємо кадр під курсором, а не всі шість: посилання одне на сітку,
     і спільний ефект читався б як «клац по всьому» */
  .shots-tile:hover{border-color:var(--line-ctl)}
  /* «один фільтр, одна рамка, один радіус» — правило вгорі блоку фото:
     той самий saturate, що в .shot img і .gal-open img */
  .shots-grid img{display:block;width:100%;height:100%;object-fit:cover;
    filter:saturate(.92)}
  @media (max-width:860px){
    .shots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:520px){
    .shots-grid{gap:var(--s1)}
  }

  /* ---- сторінка «Наша робота у фото» ---- */
  /* Сітка з фіксованим співвідношенням: кадри в архіві і горизонтальні,
     і вертикальні, а рвана сітка з різними висотами читається як хаос. */
  /* Пазл із плиток двох розмірів.
     Спершу спробував CSS-колонки — вийшло гірше: колонка заповнюється
     згори вниз, тож перемішаний порядок кадрів ламався, а плитки схожої
     висоти збиралися поруч і сітка знову читалася рядами.
     Grid тримає порядок читання. Смуга у дві висоти — 8 клітинок:
     одна велика (4) плюс чотири маленькі (4), тож велика плитка кожні
     п'ять кадрів заповнює смугу рівно, без дірок.
     Підписів під кадрами немає: ритм тримає саме розмір плитки. */
  .gal-grid{margin-top:var(--s4);display:grid;gap:var(--s3);
    grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense}
  .gal-item{margin:0;display:block}
  .gal-open{display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--ph);
    border-radius:var(--r-m);overflow:hidden;cursor:zoom-in;position:relative;
    aspect-ratio:1;transition:border-color .18s ease}
  /* Велика плитка широка, 2 колонки на один рядок, а не квадрат 2x2.
     Причина не в смаку: кадри тут 4:3, і в квадраті вони обрізаються з
     боків, тобто вся порожня трава внизу лишається в кадрі. Широка плитка
     ріже саме верх і низ — на панорамних групових знімках лишаються люди. */
  .t-big{grid-column:span 2}
  .t-big .gal-open{aspect-ratio:2.08}
  /* Сторона чергується: кожна друга широка плитка йде праворуч. Без цього
     всі великі шикуються по лівому краю і пазл знову стає стовпчиком. */
  .gal-item:nth-child(10n+6){grid-column:3 / span 2}
  .gal-open img{width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.92);transition:transform .3s ease}
  .gal-open:hover{border-color:var(--line-ctl)}
  .gal-open:hover img{transform:scale(1.03)}
  .gal-open:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  /* Без скрипта кнопка нічого не робить — тоді курсор не має обіцяти збільшення. */
  html:not(.js) .gal-open{cursor:default}

  /* Переглядач. <dialog> сам дає модальність, Esc і фокус-пастку. */
  .gal-view{border:0;padding:0;max-width:min(96vw,1100px);max-height:94vh;
    background:var(--terne);color:#fff;border-radius:var(--r-m);overflow:hidden}
  .gal-view::backdrop{background:rgba(12,12,14,.86)}
  .gal-view img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;background:#000}
  .gal-cap{margin:0;padding:14px 18px;font-size:.95rem;opacity:.9}
  .gal-x{position:absolute;top:8px;right:10px;z-index:2;width:40px;height:40px;
    display:grid;place-items:center;font-size:26px;line-height:1;
    background:rgba(16,16,20,.5);color:#fff;border:1px solid rgba(255,255,255,.4);
    border-radius:999px;cursor:pointer;backdrop-filter:blur(3px)}
  .gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:44px;height:44px;display:grid;place-items:center;
    background:rgba(16,16,20,.45);color:#fff;border:1px solid rgba(255,255,255,.4);
    border-radius:999px;cursor:pointer;backdrop-filter:blur(3px)}
  .gal-prev{left:10px}
  .gal-next{right:10px}
  .gal-x:hover,.gal-arrow:hover{background:rgba(16,16,20,.72)}
  .gal-x:focus-visible,.gal-arrow:focus-visible{outline:3px solid #fff;outline-offset:2px}
  @media (max-width:1023px){
    /* На трьох колонках велика плитка більше не заповнює смугу рівно,
       тому чергування сторін вимикаємо — dense розкладе сам. */
    .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .gal-item:nth-child(10n+6){grid-column:auto / span 2}
  }
  @media (max-width:720px){
    .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
    /* На двох колонках велика плитка займала б увесь екран — лишаємо рівні.
       Пропорцію теж скидаємо: широка плитка в одноколонковому слоті нижча
       за сусідній квадрат, і ряд лишався з дірою під нею. */
    .t-big{grid-column:span 1;grid-row:span 1}
    .t-big .gal-open{aspect-ratio:1}
    .gal-item:nth-child(10n+6){grid-column:auto}
    .gal-arrow{width:40px;height:40px}
  }

  /* ---- перегляд по періодах ---- */
  /* Місячні альбоми фонду. Сітка, а не стовпчик: періодів вісім, і в один
     стовпчик вони розтягують секцію на екран без потреби. */
  .period-list{list-style:none;margin:var(--s4) 0 0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
  .period-list li{border-top:1px solid var(--line)}
  .period-list li:last-child{border-bottom:1px solid var(--line)}
  /* друга колонка теж має нижню межу, інакше рядки закінчуються по-різному */
  .period-list li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .period-list a{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s2);padding:16px 2px;min-height:56px;
    color:inherit;text-decoration:none}
  .period-t{font-weight:600}
  .period-list a .arw{color:var(--ink-muted);transition:transform .18s ease}
  .period-list a:hover{color:var(--amber-ink,inherit)}
  .period-list a:hover .arw{transform:translateX(4px)}
  .period-list a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
  /* Відеоплейлист — не фотоальбом, тож відділяємо його від решти. */
  .period-video .period-t::after{content:"YouTube";margin-left:10px;
    font-weight:400;font-size:.82rem;color:var(--ink-muted)}
  @media (max-width:720px){
    .period-list{grid-template-columns:1fr}
    .period-list li:nth-last-child(2){border-bottom:0}
    .period-list li:last-child{border-bottom:1px solid var(--line)}
  }

  /* ---- форма підтримки ---- */
  /* Тимчасова: платіжки ще немає, тож збираємо контакти. Вигляд той самий,
     що в решти сайту — рамка в один піксель, без тіней і заокруглень
     більших за --r-s, інакше форма читається як чужий віджет. */
  .give-form{margin-top:var(--s4);max-width:72ch}
  .give-intro{color:var(--ink-muted);max-width:56ch}
  .give-sum{margin-top:var(--s3);padding:12px 0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);color:var(--ink-muted)}
  .give-sum b{color:var(--ink);font-weight:600}
  .give-err{margin-top:var(--s3);padding:12px 14px;border-left:3px solid var(--amber);
    background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--ink)}
  .give-fields{margin-top:var(--s3);display:grid;gap:var(--s3);
    grid-template-columns:repeat(2,minmax(0,1fr))}
  /* коментар на всю ширину: у ньому пишуть речення, а не слово */
  .give-fields .ff:last-child{grid-column:1 / -1}
  .ff{display:flex;flex-direction:column;gap:6px}
  .ff label{font-size:.92rem;font-weight:600}
  .ff-flag{font-weight:400;color:var(--ink-muted);font-size:.86rem}
  .ff-hint{color:var(--ink-muted);font-size:.84rem}
  .ff input,.ff textarea{font:inherit;color:var(--ink);background:var(--bg);
    border:1px solid var(--line-ctl);border-radius:var(--r-s);
    padding:11px 13px;min-height:46px;width:100%}
  .ff textarea{min-height:92px;resize:vertical}
  /* без opacity: .7 давала контраст 3,26:1 — нижче порогу 4,5:1,
     а плейсхолдер тут несе формат номера, не декорацію */
  .ff input::placeholder,.ff textarea::placeholder{color:var(--ink-muted)}
  .ff input:focus-visible,.ff textarea:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
  .give-form .btn{margin-top:var(--s3)}
  .give-form .btn:disabled{opacity:.6;cursor:default}
  /* Перемикач періодичності живе тільки в скрипті: без нього він
     клікався б і нічого не змінював, а заявка йшла б із «щомісяця».
     Той самий підхід, що в кнопок лічильника. */
  .give .seg{display:none}
  .js .give .seg{display:inline-flex}
  .give-privacy{margin-top:var(--s2);max-width:56ch}
  /* пастка для ботів: прибрана з очей, але лишається в потоці для них */
  .ff-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* стан після відправлення */
  .give-done{margin-top:var(--s4);max-width:60ch;padding:var(--s3) var(--s4);
    border:1px solid var(--line-ctl);border-left:3px solid var(--amber);border-radius:var(--r-s)}
  .give-done h3{margin-bottom:8px}
  .give-done .fine{margin-top:var(--s2)}

  /* ---- попап ----
     Секція лишається короткою — лічильник і кнопка, — а форма
     відкривається поверх. <dialog> дає модальність, Esc і повернення
     фокуса: той самий механізм, що в перегляді фотографій. */
  .give-modal{width:min(92vw,720px);max-height:90vh;overflow:hidden;padding:0;
    border:1px solid var(--line-2);border-radius:var(--r-l);
    background:var(--surface);color:var(--ink)}
  .give-modal::backdrop{background:rgba(12,12,14,.6)}
  /* position діалогу НЕ оголошуємо: модальному <dialog> браузер сам дає
     position:fixed, і саме проти нього стоїть absolute-хрестик — так само,
     як .gal-x проти .gal-view вище. Оголошене тут position:relative
     зламало б і центрування, бо margin:auto рахується від вставок UA. */
  /* Прокручується форма, а не діалог: інакше хрестик їде за верхній край
     екрана, щойно клавіатура на телефоні стисне вікно. Мінус 2px — на
     рамку, бо box-sizing:border-box. */
  .give-modal .give-form{margin:0;max-width:none;padding:clamp(20px,2.6vw,36px);
    max-height:calc(90vh - 2px);overflow:auto}
  .give-modal .give-intro{padding-inline-end:44px}
  .give-x{position:absolute;top:10px;right:12px;z-index:2;width:44px;height:44px;
    display:grid;place-items:center;font-size:26px;line-height:1;cursor:pointer;
    background:var(--surface);color:var(--ink-muted);
    border:1px solid var(--line-ctl);border-radius:999px}
  .give-x:hover{color:var(--ink);border-color:var(--ink)}
  .give-x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

  /* Запасний вихід. display оголошується ТІЛЬКИ в цих трьох випадках:
     авторське display перебиває вбудоване dialog:not([open]){display:none},
     і оголошене без умови воно назавжди лишило б попап розкритим посеред
     сторінки.
       · немає JS             — форма стоїть у потоці, як стояла досі;
       · браузер без showModal — те саме;
       · скрипт є, але помер   — :target ловить перехід за посиланням.
     Третій випадок не теоретичний: клас js ставиться в <head>, а site.js
     вантажиться в підвалі, тож помилка вище лишила б кнопку без дії. */
  html:not(.js) .give-modal,html.nodialog .give-modal,.give-modal:target:not([open]){
    display:block;position:static;width:auto;max-height:none;
    border:0;background:none;overflow:visible}
  html:not(.js) .give-modal .give-form,html.nodialog .give-modal .give-form,
  .give-modal:target:not([open]) .give-form{margin-top:var(--s4);max-width:72ch;
    padding:0;max-height:none;overflow:visible}
  html:not(.js) .give-x,html.nodialog .give-x,
  .give-modal:target:not([open]) .give-x{display:none}
  /* хрестика немає — відступ під нього обривав би абзац раніше за сусідів */
  html:not(.js) .give-modal .give-intro,html.nodialog .give-modal .give-intro,
  .give-modal:target:not([open]) .give-intro{padding-inline-end:0}
  /* кнопка зайва, коли форма й так у потоці */
  html:not(.js) .give-open,html.nodialog .give-open{display:none}

  @media (max-width:640px){
    .give-fields{grid-template-columns:1fr}
    .give-form{margin-top:var(--s3)}
    .give-modal{width:min(96vw,720px)}
  }