/* ШРИФТ — ТУТ, А НЕ В `index.html`.

   `@font-face` жив ТІЛЬКИ на головній сторінці, а решта (`about`, `privacy`,
   `404`, `tree`) лише лінкували цей файл. Отже `GeistMono` на них не
   існувало взагалі, і кожна тихо падала в запасний шрифт.

   Найгірше вийшло на `404.html`: у ній немає навіть `font-family`, тобто
   запасним ставав типовий шрифт браузера — СЕРИФНИЙ. Власник це й побачив:
   «там текст невірно форматований, якийсь роман санс замість нашого геіста».
   А це сторінка, на яку потрапляють за побитим посиланням на чуже дерево,
   тобто перше, що людина бачить про продукт.

   Це рівно та пастка, від якої застерігає коментар нижче — «одне значення
   збирається в одному місці». Тут воно збиралося в одному, але не в тому.

   ШЛЯХИ АБСОЛЮТНІ. Відносні (`assets/...`) з CSS рахуються від самого CSS, а
   не від сторінки: доки він лежить у корені, це те саме, але варто його
   пересунути — і шрифт зникне мовчки. Перевірено, що файли віддають обидва
   домени: `ripen.day` і `my.ripen.day`, по 147 КБ кожен.

   `swap`: доки шрифт їде, текст стоїть системним. Порожній екран заради
   накреслення — обмін не на нашу користь. */
@font-face {
  font-family: 'GeistMono';
  src: url('assets/assets/fonts/GeistMono-Thin.ttf') format('truetype');
  font-weight: 100; font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('assets/assets/fonts/GeistMono-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('assets/assets/fonts/GeistMono-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-display: swap;
}

/* І САМ ШРИФТ ТЕЖ ТУТ. Сторінка, яка лінкує цей файл, мусить діставати
   накреслення разом із ним, а не оголошувати його вдруге в себе. */
body {
  font-family: 'GeistMono', ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;
}

/* ШАПКА САЙТУ — ОДНА НА ВСІ ТРИ СТОРІНКИ.

   Її не було: кожна сторінка везла свою копію правил і свій набір посилань, і
   вони, звісно, розійшлися. На головній марка була 23 пікселі, посилання троє
   й залита кнопка; на `about` — 19 пікселів і одне посилання `privacy`; на
   `privacy` — 19 і одне `about`. Тобто з підсторінок не було як ані
   повернутися до другої підсторінки, ані завантажити застосунок.

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

   Змінні (`--paper`, `--ink`, `--hair`) лишаються в самих сторінках: вони там
   і так однакові до символу, а тягнути сюди ще й тему означало б забрати в
   `index.html` можливість жити без цього файла. */

/* ТЛО ЛИПКОЇ ШАПКИ — НА ТЕКСТОВИХ СТОРІНКАХ, І ЦЕ НЕ СКАСУВАННЯ РІШЕННЯ.

   Власник 2026 прибрав із шапки розмиття з маскою: «лишити просто прозору»
   (пояснення нижче). Те рішення ухвалювалося для ЛЕНДІНГУ, де під шапкою
   жива сцена й прозорість і є вся думка.

   На текстових сторінках під нею текст, і прозорість там не стиль, а вада:
   щойно сторінку прокрутили, рядки проходять під маркою літера в літеру.
   Заміряно браузером 3 листопада: на `/de/privacy` при 1280 перший пункт
   списку перекреслений словами навігації, на `/66-days` при 390 рядок
   «That last line is the one everybody» перекритий логотипом і бургером.

   Тому тло ставиться типово, а лендінг лишається прозорим — рівно там, де
   прозорість і обирали. Розмиття не вертаємо: воно було прибране окремо. */
#top {
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  padding-top: max(18px, env(safe-area-inset-top));
}

/* ВІД'ЄМНИЙ ВІДСТУП ТІЛЬКИ НА ГОЛОВНІЙ. Він віднімає власну висоту шапки з
   потоку — без цього герой поїхав би вниз на її висоту й перестав бути на весь
   екран. На текстових сторінках героя немає, і такий відступ підсунув би
   заголовок під марку. */
#land #top {
  margin-bottom: -72px;
  /* Лендінг: під шапкою сцена, і закривати її папером нема за чим. */
  background: transparent;
}

#top a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

#top .logo {
  font-weight: 800;
  /* Більший за 19: марка мусить важити стільки ж, скільки залита кнопка на
     тому самому рядку, інакше вона читається як підпис до неї. Раніше 23 було
     лише на головній, а на текстових сторінках 19 — тобто та сама марка мала
     дві ваги. */
  font-size: 23px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

#top .nav {
  display: flex;
  align-items: center;
  gap: 18px;
  /* ПУНКТІВ СТАЛО ЧОТИРИ, і на 320 пікселях вони в рядок не лізуть.
     Доти їх було три й питання не стояло. Перенос замість зменшення
     шрифту: шапка на телефоні стає дворядковою, а не нечитною. */
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

#top a.link {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hair);
}

/* АДРЕСИ БЕЗ `.html`, І ЦЕ НЕ СМАК.

   Cloudflare Workers Assets віддає на `/about.html` перенаправлення 307 на
   `/about` — тобто кожен клік по навігації коштував зайвий похід у мережу, і
   так на всіх трьох сторінках. Перевірено на живому сервері вже після
   розгортання: `/about.html` → HTTP 307, `/about` → 200.

   Канонічна адреса тут та, яку віддає сервер, а не та, як зветься файл. */

/* ПОСИЛАННЯ НА СЕБЕ САМЕ не підкреслюємо: воно нікуди не веде, і волосінь під
   ним обіцяла б дію. Ставиться атрибутом `aria-current` — тим самим, який
   читач з екрана й так оголошує. */
#top a.link[aria-current='page'] {
  border-bottom-color: transparent;
  color: var(--soft);
}

/* КНОПКА — ЦЕ КЛАС, А НЕ МІСЦЕ.

   Вигляд кнопки жив у двох правилах, прив'язаних до місця: `#top a.get` і
   `.cta .get`. Доки кнопки стояли лише там, це нікому не заважало. Щойно
   з'явилися заклики в тексті й липка смуга на `/play`, той самий клас дав
   звичайне посилання — і в смузі воно ще й пофіолетовіло як відвідане.
   Власник надіслав знімок.

   Тут базовий вигляд на будь-яке місце. Обидва старі правила лишаються: у
   них своя вага (`#top a.get` і `.cta .get` обидва сильніші), тож у шапці й
   у заклику внизу нічого не змінюється. */
.get {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
}

#top a.get {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 9px 16px;
  font-size: 13px;
}

/* ШАПКА ПРОЗОРА, БЕЗ РОЗМИТТЯ.

   Тут стояв `backdrop-filter: blur(7px)` із маскою й переливом паперу —
   те саме, що `TopBlur` у застосунку. Рішення власника: прибрати, лишити
   просто прозору.

   Цікаво, що запасний шлях це вже й описував: нижче був `@supports not
   (mask-image: ...)` з коментарем «там краще лишити шапку просто прозорою».
   Тепер це не запасний шлях, а єдиний, тож і сам `@supports` пішов —
   ховати більше нічого. */


/* ── ПОСИЛАННЯ В ТЕКСТІ — ЧОРНИЛОМ, А НЕ СИНІМ БРАУЗЕРНИМ ─────────────────

   Правило було, але лише `p a` — у `page.css` і в копіях усередині `about`,
   `privacy`, `index`. Порахував на живих файлах: посилань у `<p>` тридцять,
   а в `<li>` — ТРИСТА ТРИНАДЦЯТЬ. Тобто синім браузерним стояло майже все:
   увесь покажчик `/answers`, усі переліки «інші відповіді» внизу сторінок,
   списки правил на перекладених `about`, і два посилання на лендінгу. На
   темному папері це ще й нечитно — власник саме це й побачив.

   Правило береться НЕ за контекстом (`p a`, `li a`, `td a` — наступний
   контекст знову забудуть), а за ознакою «посилання без класу». Усі наші
   оформлені посилання клас мають: `.link`, `.get`, `.logo`, `.btn`,
   `.foot-mark`. Отже нове місце з текстовим посиланням дістає колір само.

   Тут, а не в `page.css`: `index`, `about`, `privacy` і `404` писані руками
   й `page.css` не лінкують. Те саме вже коштувало одного заходу з CTA. */
a:not([class]) { color: var(--ink); }
/* Підвал має свій, приглушений колір, і його лишаємо. */
footer a:not([class]) { color: inherit; }

/* ── ШАПКА НА ТЕЛЕФОНІ: БУРГЕР І МЕНЮ НА ВЕСЬ ЕКРАН ───────────────────────

   Рішення власника. Доти пунктів стало чотири, в рядок на 390 вони не лізли,
   і я розводив їх у два рядки — а лендінг мусив лишатися винятком, бо під
   його шапкою стоїть від'ємний відступ під ОДИН рядок. Бургер знімає і те, і
   те: шапка всюди однакова й завжди одного рядка, виняток для лендінга
   більше не потрібен.

   БЕЗ JAVASCRIPT. Перемикач — прихована галочка плюс `label`, а відкрите меню
   це `.mtoggle:checked ~ .nav`. Причина не в красі: скрипт довелося б везти в
   36 сторінок, з яких чотири написані руками, і перша ж, куди його забули б
   дописати, мовчки лишилася б без меню. Те саме вже сталося зі шрифтом на
   `404`.

   Галочка НЕ `hidden`: так вона лишається в порядку обходу з клавіатури, і
   меню відкривається пробілом. Видимий слід фокуса стоїть нижче. */

#top .mtoggle,
#top .burger { display: none; }

@media (max-width: 520px) {
  #top {
    padding-left: 16px;
    padding-right: 16px;
  }
  #top .logo { font-size: 20px; }

  /* Галочка чутна клавіатурі, але не видна оку. `display: none` відібрав би
     її й у клавіатури. */
  #top .mtoggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
  }

  /* БУРГЕР — ДВІ ВОЛОСЯНІ РИСКИ, не три. Товщина 1 піксель, як уся графіка
     цього сайту; третя риска зробила б його важчим за марку поруч. */
  #top .burger {
    display: block;
    position: relative;
    z-index: 9;
    width: 22px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* ДОТОРК 44×44, ОКО 22×15. Намальований бургер лишається тонким — росте
     лише зона натискання, псевдоелементом поверх нього. Заміряно 3 листопада
     2026: сама мітка давала 22×15 при мінімумі 44×44 (WCAG 2.5.8, і те саме
     число в настановах Apple). Розмір коробки не чіпаємо: вона стоїть у
     флексі шапки, і 44 зсунули б марку. */
  #top .burger::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  #top .burger span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transition: top .22s ease, transform .22s ease;
  }
  #top .burger span:first-child { top: 4px; }
  #top .burger span:last-child { top: 10px; }

  /* У хрестик: обидві риски сходяться в середину й розходяться кутами. */
  #top .mtoggle:checked ~ .burger span { top: 7px; }
  #top .mtoggle:checked ~ .burger span:first-child { transform: rotate(45deg); }
  #top .mtoggle:checked ~ .burger span:last-child { transform: rotate(-45deg); }

  #top .mtoggle:focus-visible ~ .burger {
    outline: 1px solid var(--ink);
    outline-offset: 6px;
  }

  /* Меню закрите — пунктів немає зовсім, а не «зсунуті за екран»: зсунуті
     читач з екрана однаково зачитує. */
  #top .nav { display: none; }

  #top .mtoggle:checked ~ .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 8;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    /* Непрозорий папір: під меню лежить жива сцена, і крізь неї не читається
       нічого. */
    background: var(--paper);
  }
  #top .mtoggle:checked ~ .nav a.link {
    font-size: 20px;
    padding-bottom: 5px;
  }
  #top .mtoggle:checked ~ .nav a.get {
    margin-top: 10px;
    padding: 13px 26px;
    font-size: 15px;
  }

  /* Марка й бургер лишаються над відкритим меню — інакше закрити його нічим. */
  #top .logo { position: relative; z-index: 9; }
}

@media (prefers-reduced-motion: reduce) {
  #top .burger span { transition: none; }
}

/* ЗЕРНО ПАПЕРУ — НА ВЕСЬ САЙТ, І ТЕ САМЕ, ЩО В ЗАСТОСУНКУ.

   Плитка `grain.png` зроблена тими самими числами, що `grainTile` у
   `grain.dart`: 160 пікселів, сіре, з тим самим зерном (`Random(7)`). Різниць
   дві, і обидві навмисні.

   ПЕРША: альфа винесена в CSS. У Flutter вона запечена в пікселі (11 із 255,
   канали премножені), і тайл важив 39.8 КБ. Тут альфа стала, тож її можна
   тримати властивістю, а картинку лишити сірою на чотирьох бітах — 13.0 КБ
   замість 39.8. Шістнадцять рівнів сірого при 4.3% непрозорості око не
   відрізняє від 256, а вага в цьому проєкті вже була приводом для догани
   (favicon на 391 КБ).

   ДРУГА: зерно тут НЕРУХОМЕ. У застосунку матриця зсувається 12 разів на
   секунду — це плівка, і воно того варте на живій сцені. Сайт же читають, а не
   дивляться; рухоме зерно під текстом заважає, і його довелося б вимикати за
   `prefers-reduced-motion`. Нерухоме не потребує ні того, ні JS.

   ПІД ГЕРОЄМ ЗЕРНО МАЛЮЄ САМЕ ЦЕЙ ШАР, а не Flutter: `ViewApp` свій вимикає
   (`GrainOverlay(grain: false)`), інакше папір під деревом був би вдвічі
   зернистіший за папір під текстом поруч. */
#grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: url('grain.png');
  background-repeat: repeat;
  /* 4.3% — та сама альфа 11/255, що в застосунку. */
  opacity: 0.043;
}

/* ПОВНИЙ ЗАСТОСУНОК У БРАУЗЕРІ малює своє зерно сам, і в нього є перемикач у
   налаштуваннях. Якби ми клали своє поверх, той перемикач перестав би щось
   означати: людина його гасить, а зерно лишається. */
body.running #grain {
  display: none;
}

/* У темній темі зерно мусить бути СВІТЛІШИМ за тло, а не темнішим. Те саме
   робить застосунок, малюючи зерно поверх перевернутої палітри.

   СИГНАЛ БУВ НЕ ТОЙ, І ЦЕ РОЗХОДИЛОСЯ ПІВ ДОБИ. Стояло
   `@media (prefers-color-scheme: dark)` — налаштування системи. А тема
   сторінки йде за ГОДИНОЮ: клас `night` ставить скрипт у кожній сторінці
   (світло з 7 до 20). Два різні сигнали, і збігаються вони випадково: вночі
   при світлій системі папір темний, а зерно лишалося темним теж.

   Заміряно на самій плитці (160×160, 4 біти, повний розмах 0…255):

     ніч, система світла (розходження) — канал гуляє 21.05…32.02, розмах 10.96
     ніч, система темна   (як задумано) — 20.79…34.81, розмах 14.02

   Тобто на 22% слабше. Заразом це виправляє й сам коментар: тут було
   написано «чорні крапки на майже чорному папері не видно взагалі» — неправда.
   Плитка не чорні крапки, вона повнорозмахова сіра й працює в обидва боки. */
html.night #grain {
  filter: invert(1);
  opacity: 0.055;
}

/* ── ЗАКЛИК ДО ДІЇ — ТУТ, А НЕ В `page.css` ────────────────────────────────
   Спершу я поклав ці правила в `page.css`, і блок вийшов би без стилів на
   `about` і `privacy`: ті дві сторінки написані руками й `page.css` не
   лінкують. Власна перевірка це й зловила — а на живому сайті воно читалося
   б як поламана верстка на двох найважливіших сторінках.

   `site.css` лінкують УСІ, зокрема `404`. Змінні теми тут не оголошуються
   (вони живуть у сторінках і в `page.css`) — і не треба: `var()`
   розвʼязується в місці вжитку, а тло під блоком у кожної сторінки своє.
*/
/* ЗАКЛИК ДО ДІЇ наприкінці сторінки.

   Сторінок-відповідей це стосується так само, як перекладених `about`: людина
   дочитала, погодилася — і далі не було нічого, крім кнопки в шапці, яку вона
   прокрутила вісім екранів тому.

   Рамка волосінню, а не залите тло: на цьому сайті все тримається на
   волосіні, і заливка тут читалася б як чужий блок, вставлений рекламою.
   Залита лишається сама кнопка — одна на сторінку, і саме вона має важити
   найбільше. */
.cta {
  margin: 48px 0 0;
  padding: 26px 22px 24px;
  border: 1px solid var(--hair);
  text-align: center;
}
/* Гасло — тією самою тонкою вагою, що заголовки: це не крик, а підпис. */
.cta .shout {
  color: var(--ink);
  font-weight: 100;
  font-size: clamp(19px, 4vw, 23px);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.cta .sub {
  margin: 8px 0 18px;
}
/* Кнопка та сама, що в шапці (`site.css`), але не липка й не в рядку з
   посиланнями, тож відступи їй потрібні свої. */
.cta .get {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 11px 22px;
  font-size: 13px;
  text-decoration: none;
}

/* ПЕРЕМИКАЧ МОВ У ПІДВАЛІ.

   Сім мов існували з вересня, і до жодної не вело посилання: дістатися можна
   було лише з пошуку (перевірено 3 листопада 2026). У підвалі, а не в шапці:
   шапка на вузькому екрані вже тримає чотири пункти й бургер, а мову шукають
   раз і свідомо.

   Поточна мова — `span`, не посилання: натискати на те, де ти вже є, нема
   сенсу, і це єдиний спосіб показати, де ти, не фарбуючи нічого. */
.langs {
  display: block;
  /* ПО ЦЕНТРУ, як і решта підвала. Рядок мов стоїть ПОЗА блоком `.foot`, який
     центрує себе сам через flex, — і до 9 листопада 2026 через це лежав
     ліворуч під центрованими маркою, навігацією й бейджами. Знахідка
     власника. Центруємо тут, а не переносячи його всередину `.foot`:
     у генератора він підставляється окремим шматком (`{langrow}`), і
     переїзд усередину зачепив би обидва шляхи складання. */
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--soft);
}
.langs a { color: var(--soft); }
.langs a:hover { color: var(--ink); }
.langs span { color: var(--ink); }

/* ЗНАЧОК ЗАСТОСУНКУ НАД ЗАГОЛОВКОМ РОЗДІЛУ.

   Рішення власника 4 листопада 2026 («значки на заголовки розділів») після
   питання, де їх ставити. У застосунку значок стоїть на СТАТТЮ словника —
   аркуш «how it works» має 16 статей і 14 значків. На заголовок він стає
   тому, що словник на сторінці лишається списком: 176×110 між пунктами
   списку з відступом 1.1em і кеглем 14 не вміщається.

   ЦЕ ТОЙ САМИЙ МАЛЮНОК, А НЕ СХОЖИЙ. Знято з того ж `_ArtPainter`
   (`tool/icons.dart`), тож розійтися вони не можуть — на цьому сайт уже
   вчився, коли чотири копії шапки розійшлися всі чотири. `erase` і `pro`
   узагалі стоять на двох сторінках ОДНИМ файлом: `/icons/art/erase.png`
   крутиться і в картці лендінгу, і над розділом «privacy».

   АНІМОВАНІ, А НЕ КАДРОМ. Тут стояло «кадром, а не петлею, і це замір:
   десять петель важили 1 857 234 Б проти 112 191» — і замір був хибний
   двічі. Рахувався розмір 512×320 замість 232×145, яким лендінг малює
   свої чотири; і два з пʼяти потрібних значків уже лежали на домені
   анімованими, тобто були безкоштовні. Справжнє число: нових 386 556 Б,
   удвічі менше, ніж лендінг платить за свої чотири (703 465).

   Два з пʼяти — одноразові (`-plays 1`), бо петлею не беруться в
   принципі: у `trunk` порив вітру навмисно неперіодичний, у `leaf` цикл
   росту й нахил листка дають спільний період ≈ 898 секунд. Подробиці
   числами — у `tool/icons.dart`, біля `_want`.

   СТИЛЬ ТУТ, А НЕ В `page.css`: `about`, `privacy`, `index` і `404` писані
   руками й `page.css` не лінкують. Покладене туди тихо зникло б саме на
   `about` — тобто там, де цей значок і потрібен.

   Чорним на прозорому, один файл на обидві теми: у темній перевертаємо
   фільтром, як це вже зроблено для карток лендінгу. */
.art {
  display: block;
  width: 176px;
  height: 110px;
  margin: 34px auto 2px;
  opacity: .85;
}
@media (prefers-color-scheme: dark) { .art { filter: invert(1); } }
html.night .art { filter: invert(1); }
html.day .art { filter: none; }

/* ПІДВАЛ — СПІЛЬНИЙ ДЛЯ ВСІХ СТОРІНОК, і тому він тут, а не в `index.html`.

   До 9 листопада 2026 ці правила жили ВСЕРЕДИНІ `index.html`, і наслідок був
   рівно той, про який попереджає `CLAUDE.md`: бейджі фізично не могли
   показатися ніде, крім головної, бо решта сторінок цих класів не знала.
   Власник побачив це як «чому різний футер на різних сторінках» — і це був не
   недогляд розмітки, а відсутність стилів.

   `page.css` для цього не годиться: `about`, `privacy`, `index` і `404`
   писані руками й НЕ лінкують його. `site.css` лінкують усі. */
.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0;
}
.foot-mark {
  font-weight: 800;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
/* Посилання рядком, а не стовпчиком: вони короткі, і стовпчик під маркою
   читався б як меню, а не як підпис. Перенос дозволений. */
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.foot-nav a { text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
/* ДЕ ПРО НАС ПИШУТЬ. Картинки лежать У НАС: до 8 листопада 2026 сайт не робив
   жодного зовнішнього запиту, і бейдж із чужого сервера віддавав би IP кожного
   відвідувача третій стороні ще до першого дотику.

   РІВНЯЄМО ПО ВИСОТІ, А НЕ ПО ШИРИНІ: пропорції різні (171×58, 176×44, 103×44,
   662×180, 250×54 і 590×150), спільна ширина зробила б найвужчий удвічі вищим. Правило діє й
   на `img` усередині `picture` — селектор дивиться на картинку, не на обгортку.

   Прозорість 0.75: бейджі кольорові, сторінка монохромна. */
.foot-seen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
/* ВИСОТА 34, А НЕ 42 (9 листопада 2026, на слово власника «давай зменшим»).
   Пʼять значків при 42 давали 811 пікселів ряду — на екрані 393 це три рядки,
   і підвал на телефоні ставав вищим за те, заради чого існує.

   `max-width: 100%` — ЗАПОБІЖНИК, а не оформлення. Найширший знак у нас
   662×180 (Peerlist), і якщо правило висоти з будь-якої причини не доїде до
   браузера — застаріла таблиця стилів, помилка в майбутній правці, — він
   намалюється в натуральну величину й рознесе сторінку вшир. Саме це власник
   і побачив на телефоні. Тепер гірший можливий випадок — завелика картинка
   по ширині екрана, а не горизонтальна прокрутка всього сайту. */
.foot-seen img { display: block; height: 34px; width: auto; max-width: 100%; opacity: 0.75; }
@media (max-width: 480px) { .foot-seen img { height: 26px; } }
.foot-seen a:hover img { opacity: 1; }
.foot-seen a { text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.foot-seen a.badge { border-bottom: 0; padding-bottom: 0; }
.foot-copy { margin: 20px 0 0; }