@font-face { font-family: 'Faculty Glyphic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/faculty-glyphic.woff2) format('woff2'); }   /* self-hosted: no third-party request on the critical path */
/* =====================================================================
   TYPE SYSTEM — єдине джерело істини для шрифтів проекту.
   Правило: в styles.css / badge.css НЕ пишемо px/em для font-size і line-height,
   лише токени: var(--fs-xs|s|m|l) та var(--lh-xs|s|m|l).
   Щоб змінити розмір/інтерліньяж скрізь — міняємо число ТУТ (або в тюнері, вкладка Type).

   Ролі:
     xs  підписи, метадані, опис кейса, список, бейдж-тексти
     s   бренд, дата, лічильник
     m   навігація, назви кейсів (gallery + list)
     l   великі заголовки (ім'я на бейджі)
     xl  display-розмір: лише ім'я у hero на сторінці About

   Класи екранів (порядок): Mobile → Tablet → Desktop → Large desktop.
   JS (main.js, cssParams) за шириною вікна вибирає клас, ставить data-screen на <html>
   і записує --d-*, --d-lh-*, --uref цього класу (значення — у тюнері, вкладка Type).
   Значення в :root нижче — це Desktop, вони працюють і без JS.

   Масштаб: на еталонному екрані класу (Desktop: 1920×1080) розмір = дизайн-розмір (10/16/20/32).
   Далі він росте/зменшується лише ЧАСТКОВО (--type-k), щоб на великих екранах
   шрифт трохи збільшувався, а на 1440×900 (MacBook Air) не ставав занадто дрібним:
        розмір = дизайн × ( (1 − k) + k × u / uref ),   u = ширина вʼюпорта / 1920 (Mobile: / 760)
   k = 1 → шрифт рівно пропорційний макету, k = 0 → шрифт не змінюється зовсім.
   Потім розмір ОКРУГЛЮЄТЬСЯ до цілого px, кожен токен має підлогу (min) і стелю (cap),
   а інтерліньяж = round(розмір × коеф.) → завжди ціле число px.
   ===================================================================== */
:root {
  /* дизайн-розміри на артборді 1920×1080 (px, без одиниць) */
  --d-xs: 11;  --d-s: 16;  --d-m: 20;  --d-l: 32;  --d-xl: 128;
  /* дизайн-інтерліньяж (px, цілі) */
  --d-lh-xs: 14;  --d-lh-s: 20;  --d-lh-m: 24;  --d-lh-l: 36;  --d-lh-xl: 116;
  /* підлога: менше цього шрифт не стає (px) */
  --min-xs: 10;  --min-s: 14;  --min-m: 17;  --min-l: 24;  --min-xl: 44;
  /* скільки росте/зменшується разом з екраном: 0…1 */
  --type-k: .5;
  /* стеля: у скільки разів максимум більше дизайн-розміру */
  --type-cap: 2;
  /* 'u' екрана, на якому розміри точні (JS ставить її для кожного класу екрана) */
  --uref: 1;
}

/* derived tokens: also evaluated inside .about (about.css lowers the floors there) */
:root, .about {
  --fs-xs: clamp(calc(var(--min-xs) * 1px), round(calc(var(--d-xs) * (1 - var(--type-k)) * 1px + var(--d-xs) * var(--type-k) * var(--u) / var(--uref)), 1px), calc(var(--d-xs) * var(--type-cap) * 1px));
  --fs-s:  clamp(calc(var(--min-s)  * 1px), round(calc(var(--d-s)  * (1 - var(--type-k)) * 1px + var(--d-s)  * var(--type-k) * var(--u) / var(--uref)), 1px), calc(var(--d-s)  * var(--type-cap) * 1px));
  --fs-m:  clamp(calc(var(--min-m)  * 1px), round(calc(var(--d-m)  * (1 - var(--type-k)) * 1px + var(--d-m)  * var(--type-k) * var(--u) / var(--uref)), 1px), calc(var(--d-m)  * var(--type-cap) * 1px));
  --fs-l:  clamp(calc(var(--min-l)  * 1px), round(calc(var(--d-l)  * (1 - var(--type-k)) * 1px + var(--d-l)  * var(--type-k) * var(--u) / var(--uref)), 1px), calc(var(--d-l)  * var(--type-cap) * 1px));

  --fs-xl: clamp(calc(var(--min-xl) * 1px), round(calc(var(--d-xl) * var(--u) / var(--uref)), 1px), calc(var(--d-xl) * var(--type-cap) * 1px));   /* xl ignores --type-k: it scales 1:1 with the layout */

  --lh-xs: round(calc(var(--fs-xs) * var(--d-lh-xs) / var(--d-xs)), 1px);
  --lh-s:  round(calc(var(--fs-s)  * var(--d-lh-s)  / var(--d-s)),  1px);
  --lh-m:  round(calc(var(--fs-m)  * var(--d-lh-m)  / var(--d-m)),  1px);
  --lh-l:  round(calc(var(--fs-l)  * var(--d-lh-l)  / var(--d-l)),  1px);
  --lh-xl: round(calc(var(--fs-xl) * var(--d-lh-xl) / var(--d-xl)), 1px);
}

/* готові класи для нових елементів */
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.t-s  { font-size: var(--fs-s);  line-height: var(--lh-s); }
.t-m  { font-size: var(--fs-m);  line-height: var(--lh-m); }
.t-l  { font-size: var(--fs-l);  line-height: var(--lh-l); }
.t-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); }