/* ================================================================
   Academic Authority Theme — main.css
   Design: Deep Forest + Gold, Авторський академічний, 2026
   Fonts: Playfair Display (serif) + Instrument Sans (sans)
   Palette: Forest #1c3528 · Gold #c8a96e · Paper #f8f6f1
   ================================================================ */

/* ----------------------------------------------------------------
   1. CSS ЗМІННІ (Design Tokens)
   ---------------------------------------------------------------- */
:root {
  /* Ink scale */
  --clr-ink: #0e0e0c;
  --clr-ink-mid: #2e3d2e;
  --clr-ink-soft: #5a6b5a;
  --clr-ink-muted: #8a9a8a;

  /* Paper & surfaces */
  --clr-paper: #f8f6f1;
  --clr-surface: #eef0eb;
  --clr-warm: #f0ece3;

  /* Forest palette (hero right, footer, quote block) */
  --clr-forest: #1c3528;
  --clr-forest-deep: #152a1e;
  --clr-forest-mid: #253d32;
  --clr-forest-soft: #2d4a3e;

  /* Gold accent */
  --clr-gold: #c8a96e;
  --clr-gold-deep: #8a6d3a;
  --clr-gold-light: #e0c898;

  /* Borders */
  --clr-border: rgba(14, 14, 12, 0.1);
  --clr-border-med: rgba(14, 14, 12, 0.18);
  --clr-border-forest: rgba(255, 255, 255, 0.08);
  --clr-border-gold: rgba(200, 169, 110, 0.25);

  /* Typography */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:
    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Font sizes */
  --fs-2xs: 0.5625rem; /* 9px  */
  --fs-xs: 0.625rem; /* 10px */
  --fs-sm: 0.75rem; /* 12px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.375rem; /* 22px */
  --fs-2xl: 1.875rem; /* 30px */
  --fs-3xl: 2.5rem; /* 40px */
  --fs-hero: clamp(2.5rem, 5.5vw, 4rem);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-normal: 1.65;
  --lh-loose: 1.82;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --max-w: 1120px;
  --max-w-narrow: 680px;
  --header-h: 64px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--clr-ink);
  background-color: var(--clr-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* text-wrap: pretty — забороняє "orphan" слова в кінці рядка (CSS 2024) */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: pretty;
}

/* ----------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}
.container--narrow {
  max-width: var(--max-w-narrow);
}
.page-wrap {
  padding-block: var(--sp-16) var(--sp-20);
}

/* ----------------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--clr-paper);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-8);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.site-logo {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--clr-ink);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.site-logo:hover {
  color: var(--clr-forest);
}

.site-logo img {
  display: block;
  height: 200px;
  width: 200px;
  object-fit: contain;
  transition: opacity 0.2s;
}
.site-logo:hover img {
  opacity: 0.75;
}

.site-logo .logo-dark {
  display: none;
}
body.dark-mode .site-logo .logo-light {
  display: none;
}
body.dark-mode .site-logo .logo-dark {
  display: block;
}

.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
}

.nav-list a {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  transition: color 0.2s;
  padding-block: var(--sp-2);
  position: relative;
}
.nav-list a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clr-gold);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.nav-list a:hover {
  color: var(--clr-ink);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav-list a[aria-current="page"] {
  color: var(--clr-ink);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

/* Lang switcher — UA активна (forest фон), EN — border only */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(14, 14, 12, 0.04);
  border: 0.5px solid var(--clr-border-med);
  border-radius: 3px;
  padding: 2px;
}

.lang-btn {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 2px;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  text-decoration: none;
}
.lang-btn:hover {
  color: var(--clr-forest);
  background: var(--clr-surface);
}

/* Активна мова — forest фон */
.lang-btn--active {
  background: var(--clr-forest);
  color: rgba(255, 255, 255, 0.82);
  cursor: default;
}
.lang-btn--active:hover {
  background: var(--clr-forest);
  color: rgba(255, 255, 255, 0.82);
}

/* Індикаторна крапка активної мови */
.lang-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-gold);
  flex-shrink: 0;
  animation: lang-pulse 2.5s ease-in-out infinite;
}
@keyframes lang-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Mobile toggle — 44x44 touch target, SVG icons (hamburger ↔ close) */
.nav-toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  margin: 0;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
  position: relative;
}
.nav-toggle:hover,
.nav-toggle:active {
  background: rgba(14, 14, 12, 0.05);
}

/* Обидві іконки позиціонуємо в центрі; перемикаємо opacity+rotate */
.nav-toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke: var(--clr-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  transform-origin: center;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.32s var(--ease-out);
}
.nav-toggle-icon--open {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.nav-toggle-icon--close {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.8);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  stroke: var(--clr-ink);
}

/* Коли меню відкрите — крестик темного кольору на світлому хедері
   (хедер залишається світлим, меню випадає з-під нього) */
body.mobile-menu-open .nav-toggle {
  background: transparent;
}

/* ================================================================
   MOBILE MENU — "Clean Editorial" v3
   -----------------------------------------------------------------
   Прості правила:
   • Меню висотою 80vh, під ним backdrop до низу (тап закриває)
   • Пункти вирівняні ЗЛІВА (не по центру) — надійно на будь-якій висоті
   • Цифра "/ 01" перед пунктом, невеликий sans-шрифт, золото
   • Простий layout без рейлів та крапок
   • Hover: тонка золота підкреслююча лінія + номер яскравіший
   ================================================================ */

/* Backdrop — темна подложка під меню до низу екрану */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 26, 22, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.mobile-menu-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Меню — випадає з-під хедера, ~80% висоти */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: calc(80vh - var(--header-h));
  max-height: calc(80vh - var(--header-h));
  background: var(--clr-forest-deep);
  z-index: 99;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.35s var(--ease-out);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.mobile-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* При відкритті меню тапом JS ставить focus на сам контейнер —
   щоб focus не йшов на перший пункт ("Головна") і не малював
   :focus-visible лінію під ним. Але видимий outline навколо
   контейнера нам тут не потрібен — виключаємо його. Tab з
   контейнера природно перейде на перше посилання і тоді вже
   :focus-visible спрацює нормально (бо користувач таби використовує). */
.mobile-menu:focus {
  outline: none;
}

/* Дуже легка сітчаста текстура */
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 40px
    );
  pointer-events: none;
  z-index: 0;
}

/* Золота волосяна лінія зверху */
.mobile-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--clr-gold) 0%,
    rgba(200, 169, 110, 0.5) 40%,
    transparent 80%
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 0.35s var(--ease-out) 0.05s,
    transform 0.55s var(--ease-out) 0.05s;
  z-index: 2;
}
.mobile-menu.is-open::after {
  opacity: 1;
  transform: scaleX(1);
}

/* .is-closing-instant — вимикає всі transitions під час закриття
   при навігації (клік на посилання). Без цього View Transitions
   API робить снапшот з меню в процесі закриття (напівпрозоре,
   з активним focus) що виглядає як "дві лінії навколо пункта".
   Клас ставиться в JS синхронно перед навігацією, знімається
   через 50мс після того як браузер зробив снапшот.

   !important потрібен щоб перекрити всі вкладені transitions
   у li, a, ::before, ::after, mobile-menu-header, mobile-menu-divider
   без перелічування їх по селектору. */
.mobile-menu.is-closing-instant,
.mobile-menu.is-closing-instant * {
  transition: none !important;
  animation: none !important;
}

/* Також явно приховуємо focus-лінію і active-стан пункту меню
   на момент снапшота — щоб у "знімку" не було ані нижньої
   золотої риски (::after від :focus-visible), ані яскравого
   кольору активного пункту. Без цього при переході з однієї
   сторінки на іншу видно "дві лінії навколо Головної". */
.mobile-menu.is-closing-instant nav > ul a::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

/* ── Шапка: автор + титул ─────────────────────────────────────── */
.mobile-menu-header {
  padding: var(--sp-7) var(--sp-7) var(--sp-4);
  position: relative;
  z-index: 1;

  /* Flex layout — identity зліва, мовний перемикач справа.
     gap: var(--sp-4) — розрив між блоками. align-items: flex-start
     щоб перемикач "стояв" по верху, навіть якщо ім'я займає 2 рядки. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);

  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.4s var(--ease-out) 0.15s,
    transform 0.45s var(--ease-out) 0.15s;
}
.mobile-menu.is-open .mobile-menu-header {
  opacity: 1;
  transform: translateY(0);
}

/* Identity-блок — обгортка для імені + титулу. Дозволяє flex-layout
   у .mobile-menu-header не "розтягувати" текст ім'я і не порушувати
   line-height. */
.mobile-menu-identity {
  flex: 1;
  min-width: 0; /* щоб довге ім'я могло переноситись, не виштовхуючи перемикач */
}

.mobile-menu-author-name {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.mobile-menu-author-title {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.55);
  margin: 6px 0 0;
}

/* ── МОВНИЙ ПЕРЕМИКАЧ У ШАПЦІ МОБІЛЬНОГО МЕНЮ ────────────────────
   Винесений з низу меню (де був як .mobile-lang-list) у шапку біля
   імені автора — щоб юзер бачив його одразу, без скролу.

   Дизайн: дві маленькі pill-кнопки UA / EN. Активна — золотий фон
   з темним текстом (контрастно і помітно). Неактивна — прозорий фон
   з тонкою золотою рамкою, hover/focus заповнюється легкою заливкою.

   Висота 36px — менша за глобальний 44pt touch target з причини
   щільної шапки, але кожна кнопка має >40px ширини плюс достатньо
   вертикального простору довкола (padding шапки sp-7 = 32px зверху).
   Реальна tappable зона з відступами ~44+x44+. */
.mobile-lang-switcher {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(200, 169, 110, 0.22);
  border-radius: 4px;
  flex-shrink: 0; /* не стискаємо при довгому імені автора */
  align-self: center; /* вертикально по центру з identity */
}

.mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-radius: 2px;
  border: none;
  background: transparent;
  transition:
    color 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
  cursor: pointer;
  user-select: none;
}

.mobile-lang-btn:hover,
.mobile-lang-btn:focus-visible {
  color: var(--clr-gold-light);
  background: rgba(200, 169, 110, 0.08);
  outline: none;
}

/* Активна мова — золотий фон + темний текст для високого контрасту
   на темному фоні шапки. Курсор default бо це span (не клікабельне). */
.mobile-lang-btn--active {
  background: var(--clr-gold);
  color: var(--clr-forest-deep);
  cursor: default;
}
.mobile-lang-btn--active:hover {
  background: var(--clr-gold); /* без змін на hover для активного */
  color: var(--clr-forest-deep);
}

/* Старий .mobile-lang-list блок видалений з header.php, але CSS
   правила для нього (рядки ~640+) лишаються в файлі. Якщо хтось
   додасть .mobile-lang-list знову через кастомізацію — він буде
   виглядати як раніше. Це безпечно як backwards compatibility. */

/* Розділювач */
.mobile-menu-divider {
  height: 0.5px;
  background: linear-gradient(
    to right,
    rgba(200, 169, 110, 0.5) 0%,
    rgba(200, 169, 110, 0.2) 50%,
    transparent 100%
  );
  margin: 0 var(--sp-7);
  position: relative;
  z-index: 1;

  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 0.4s var(--ease-out) 0.2s,
    transform 0.5s var(--ease-out) 0.2s;
}
.mobile-menu.is-open .mobile-menu-divider {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Навігаційний список ──────────────────────────────────────── */
.mobile-menu nav {
  padding: var(--sp-5) 0;
  position: relative;
  z-index: 1;
}
.mobile-menu nav > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-menu li {
  position: relative;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.5s var(--ease-out);
}

/* Stagger — 50мс крок */
.mobile-menu.is-open li:nth-child(1) {
  transition-delay: 0.25s;
}
.mobile-menu.is-open li:nth-child(2) {
  transition-delay: 0.3s;
}
.mobile-menu.is-open li:nth-child(3) {
  transition-delay: 0.35s;
}
.mobile-menu.is-open li:nth-child(4) {
  transition-delay: 0.4s;
}
.mobile-menu.is-open li:nth-child(5) {
  transition-delay: 0.45s;
}
.mobile-menu.is-open li:nth-child(6) {
  transition-delay: 0.5s;
}
.mobile-menu.is-open li:nth-child(7) {
  transition-delay: 0.55s;
}

.mobile-menu.is-open li {
  opacity: 1;
  transform: translateX(0);
}

/* Пункт меню — лівостороннє вирівнювання, цифра перед текстом */
.mobile-menu nav > ul a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-7);
  font-family: var(--font-serif);
  font-size: 1.75rem; /* 28px */
  font-weight: 400;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    color 0.25s var(--ease-out),
    background 0.25s var(--ease-out);
  position: relative;
}

/* Цифра "/ 01" — маленький sans, золото, постійна ширина через tabular */
.mobile-menu nav > ul a::before {
  content: "/ " attr(data-num);
  font-family: var(--font-sans);
  font-size: 0.6875rem; /* 11px */
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.65);
  line-height: 1;
  transition: color 0.25s var(--ease-out);
  /* Баселайн-вирівнювання з текстом: легкий translateY щоб "/ 01"
     стояло на рівні низу букв, а не по верху */
  align-self: baseline;
  flex-shrink: 0;
  min-width: 28px; /* постійне місце щоб текст не стрибав */
}

/* Тонка підкреслююча лінія, що з'являється ПІД пунктом при hover */
.mobile-menu nav > ul a::after {
  content: "";
  position: absolute;
  left: var(--sp-7);
  right: var(--sp-7);
  bottom: calc(var(--sp-4) - 6px);
  height: 0.5px;
  background: var(--clr-gold);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition:
    transform 0.35s var(--ease-out),
    opacity 0.25s var(--ease-out);
}

/* Hover / Focus / Active */
.mobile-menu nav > ul a:hover,
.mobile-menu nav > ul a:focus-visible {
  color: #fff;
  outline: none;
  background: rgba(255, 255, 255, 0.025);
}
.mobile-menu nav > ul a:hover::before,
.mobile-menu nav > ul a:focus-visible::before {
  color: var(--clr-gold);
}
.mobile-menu nav > ul a:hover::after,
.mobile-menu nav > ul a:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.8;
}

.mobile-menu nav > ul a[aria-current="page"] {
  color: #fff;
}
.mobile-menu nav > ul a[aria-current="page"]::before {
  color: var(--clr-gold);
}
/* Активна сторінка показується тільки кольором — без постійної підкреслюючої
   лінії (інакше WP-класи current-menu-ancestor дають фальшиві "активні" пункти
   типу "Головна", яка помічається активною на багатьох сторінках) */

/* Label обгортка — для сумісності з walker'ом */
.mobile-item-label {
  display: inline-block;
}

/* ── Language block ───────────────────────────────────────────── */
.mobile-menu .mobile-lang-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-7) var(--sp-7);
  margin: 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
  list-style: none;

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease-out) 0.65s,
    transform 0.45s var(--ease-out) 0.65s;
}
.mobile-menu.is-open .mobile-lang-list {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu .mobile-lang-list::before {
  content: "Language";
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.55);
  display: block;
  width: 100%;
  margin-bottom: var(--sp-3);
  white-space: nowrap;
}

.mobile-menu li.mobile-lang {
  border: none;
  margin: 0;
  list-style: none;
  opacity: 1;
  transform: none;
}

.mobile-menu li.mobile-lang a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(200, 169, 110, 0.1);
  border: 0.5px solid rgba(200, 169, 110, 0.4);
  border-radius: 3px;
  padding: 9px 16px;
  line-height: 1;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.mobile-menu li.mobile-lang a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-gold);
  opacity: 1;
  flex-shrink: 0;
  font-size: 0;
  min-width: 0; /* перекриваємо 28px від nav a::before */
  color: transparent;
  letter-spacing: 0;
  position: static;
  transform: none;
}
.mobile-menu li.mobile-lang a::after {
  display: none;
}
.mobile-menu li.mobile-lang a:hover {
  background: rgba(200, 169, 110, 0.22);
  border-color: rgba(200, 169, 110, 0.65);
  color: #fff;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu *,
  .mobile-menu::before,
  .mobile-menu::after,
  .mobile-menu *::before,
  .mobile-menu *::after,
  .mobile-menu-backdrop {
    transition-duration: 0.15s !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
  .mobile-menu li,
  .mobile-menu .mobile-menu-header,
  .mobile-menu .mobile-menu-divider,
  .mobile-menu .mobile-lang-list {
    opacity: 1;
  }
}

/* ── 480px: трохи менший шрифт ───────────────────────────────── */
/* ── Tablet-specific (481-900px): ширший контент + крупніша типографіка ──
   На планшеті меню розтягувалося на всю ширину, що робило пункти
   "загубленими" зліва. Обмежуємо внутрішній контейнер. */
@media (min-width: 481px) {
  .mobile-menu-header,
  .mobile-menu-divider,
  .mobile-menu nav > ul,
  .mobile-menu .mobile-lang-list {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .mobile-menu nav > ul a {
    font-size: 2rem; /* 32px на планшеті */
    padding: var(--sp-4) var(--sp-8);
  }
  .mobile-menu nav > ul a::after {
    left: var(--sp-8);
    right: var(--sp-8);
  }
  .mobile-menu nav > ul a::before {
    min-width: 32px;
  }
  /* Більший відступ зверху/знизу меню */
  .mobile-menu-header {
    padding: var(--sp-8) var(--sp-8) var(--sp-5);
  }
  .mobile-menu nav {
    padding: var(--sp-6) 0;
  }
  .mobile-menu .mobile-lang-list {
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    height: calc(82vh - var(--header-h));
    max-height: calc(82vh - var(--header-h));
  }
  .mobile-menu-header {
    padding: var(--sp-6) var(--sp-6) var(--sp-3);
  }
  /* На вузьких екранах (<480px) — компактніший перемикач щоб
     гарантовано влізав поряд з іменем автора. Висота і розмір
     тапа лишаються комфортними. */
  .mobile-lang-btn {
    min-width: 34px;
    height: 28px;
    padding: 0 var(--sp-2);
  }
  .mobile-menu-divider {
    margin: 0 var(--sp-6);
  }
  .mobile-menu nav {
    padding: var(--sp-4) 0;
  }
  .mobile-menu nav > ul a {
    font-size: 1.5rem; /* 24px */
    padding: var(--sp-3) var(--sp-6);
    gap: var(--sp-3);
  }
  .mobile-menu nav > ul a::before {
    min-width: 24px;
  }
  .mobile-menu nav > ul a::after {
    left: var(--sp-6);
    right: var(--sp-6);
  }
  .mobile-menu .mobile-lang-list {
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
  }
}

/* Legacy footer (fallback) */
.mobile-menu-footer {
  position: relative;
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 0.5px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.mobile-lang a {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-2xs) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  height: auto !important;
  padding: 4px 10px !important;
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 2px;
}
.mobile-lang a:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ----------------------------------------------------------------
   5. PAGE HEADER
   ---------------------------------------------------------------- */
.page-header {
  padding-block: var(--sp-12) var(--sp-10);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--sp-12);
}

.page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.page-subtitle {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------
   6. BREADCRUMBS
   ---------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  letter-spacing: 0.06em;
  padding-bottom: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--clr-ink-soft);
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: var(--clr-forest);
}
.breadcrumb-sep {
  color: var(--clr-ink-muted);
  margin-inline: var(--sp-2);
}

/* ----------------------------------------------------------------
   7. HOMEPAGE — HERO
   ---------------------------------------------------------------- */
.page-hero {
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  min-height: 560px;
}

/* Left column */
.hero-content {
  padding: var(--sp-14) var(--sp-12) var(--sp-14) var(--sp-8);
  border-right: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}

.hero-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero-label::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0;
}

.hero-heading {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--clr-ink);
  font-optical-sizing: auto;
  text-wrap: pretty;
}
.hero-heading em {
  font-style: italic;
  color: var(--clr-forest-soft);
}

.hero-bio {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-ink-soft);
  max-width: 44ch;
  margin-top: var(--sp-2);
  font-weight: 300;
}

/* СТАЄ — окрема смуга між hero і картками */
.hero-stats-bar {
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-warm);
}

.hero-stats-bar .container {
  display: flex;
  align-items: stretch;
}

.hero-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}

.hero-stat + .hero-stat {
  border-left: 0.5px solid var(--clr-border);
  padding-left: var(--sp-4);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--clr-ink);
}

.stat-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
}

/* Dark mode */
body.dark-mode .hero-stats-bar {
  background: var(--clr-warm);
}

/* Responsive */
@media (max-width: 480px) {
  .hero-stats-bar .container {
    flex-wrap: wrap;
  }
  .hero-stat {
    flex: 1 1 50%;
    padding: var(--sp-4);
  }
  .hero-stat + .hero-stat {
    border-left: none;
  }
  .hero-stat:nth-child(odd) {
    border-right: 0.5px solid var(--clr-border);
  }
  .stat-number {
    font-size: var(--fs-2xl);
  }
}

/* Right column — Forest panel */
.hero-photo-wrap {
  background: var(--clr-forest);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.hero-photo-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 40px
    );
  pointer-events: none;
}

.hero-photo-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  min-height: 320px; /* Резервує місце до завантаження фото — усуває CLS */
  overflow: hidden;
}

.hero-photo-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(20%) contrast(1.05);
}

.hero-photo-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo-initials {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.18);
}

.hero-identity {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  border-top: 0.5px solid rgba(200, 169, 110, 0.18);
  background: rgba(15, 26, 20, 0.75);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  position: relative;
  z-index: 1;
}
body.dark-mode .hero-identity {
  background: rgba(8, 16, 10, 0.82);
}
.hero-author-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
}

.hero-author-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  line-height: 1.8;
}

.hero-profiles {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-profile-link {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.hero-profile-link::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0;
  transition: width 0.3s var(--ease-out);
}
.hero-profile-link:hover {
  color: rgba(255, 255, 255, 0.95);
}
.hero-profile-link:hover::before {
  width: 20px;
}

/* ----------------------------------------------------------------
   8. HOMEPAGE — CARDS STRIP
   ---------------------------------------------------------------- */
.home-cards {
  border-bottom: 1px solid var(--clr-border);
}

.cards-grid.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.home-card {
  padding: var(--sp-8) var(--sp-6);
  border-right: 0.5px solid var(--clr-border);
  transition: background 0.25s;
  position: relative;
  overflow: hidden;
}
.home-card:last-child {
  border-right: none;
}

.home-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--clr-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}
.home-card:hover {
  background: var(--clr-warm);
}
.home-card:hover::before {
  transform: scaleY(1);
}

.card-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Slim-icon before card label — lucide-style (file-text / calendar / book-open).
   Дає візуальну "опору" замість безтекстурного прямокутника.
   Колір — золотий deep з пониженою opacity, щоб не конкурувати з заголовком. */
.card-label-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--clr-gold-deep);
  opacity: 0.6;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
  color: var(--clr-ink);
}
.card-title a {
  transition: color 0.2s;
}
.card-title a:hover {
  color: var(--clr-forest);
}

.card-meta {
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
  font-style: italic;
}

/* Pill-bordered CTA — замість підкреслення.
   Дає картці чіткий клік-мішень замість "ще одного посилання".
   Hover — заливка в золотий з темним текстом.
   Використовуємо inline-flex щоб стрілка "→" жила в окремому span і анімувалася. */
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gold-deep);
  border: 0.5px solid var(--clr-gold);
  padding: 5px 12px;
  border-radius: 2px;
  background: transparent;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    gap 0.2s var(--ease-out);
}
.home-card:hover .card-tag {
  gap: 10px;
  background: var(--clr-gold);
  color: var(--clr-forest-deep);
  border-color: var(--clr-gold);
}

/* ----------------------------------------------------------------
   9. HOMEPAGE — PUBLICATIONS STRIP
   ---------------------------------------------------------------- */
.home-publications {
  padding-block: var(--sp-10);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--sp-2);
}

.section-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  font-weight: 400;
}

.section-count {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-style: italic;
  color: var(--clr-ink-muted);
}

/* Pub-list — списки на головній.
   Міняємо плоску стрічку на академічну ієрархію:
   • рік — якірна крапка зліва, як в Cambridge University Press / NYT Review of Books
   • прибираємо сірі лінії між рядками (замість них — повітря + золота крапка-буллет)
   • заголовок — основний вес, журнал — italic muted нижче. */
.pub-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pub-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 2px solid transparent;
  transition: border-color 0.25s var(--ease-out);
  position: relative;
}
.pub-row::after {
  display: none;
}

/* Золота крапка-буллет зліва від року — academic "anchor" */
.pub-row::before {
  content: "";
  position: absolute;
  left: -3px;
  top: calc(var(--sp-5) + 10px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-gold);
  opacity: 0.55;
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}

.pub-row:hover {
  border-left-color: var(--clr-gold);
}
.pub-row:hover::before {
  opacity: 1;
  transform: scale(1.2);
}
.pub-row:hover .pub-title {
  transform: translateX(4px);
  color: var(--clr-forest);
}

.pub-title {
  font-size: var(--fs-base);
  font-weight: 500; /* підсилений контраст vs italic-журналу нижче */
  color: var(--clr-ink);
  line-height: var(--lh-snug);
  transition:
    color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
  display: block;
  will-change: transform;
}

/* Рік — тепер помітний якір, не плоский підпис.
   fs-xl italic, font-variant-numeric для вирівнювання цифр. */
.pub-year {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--clr-gold-deep);
  line-height: 1;
  font-variant-numeric: oldstyle-nums tabular-nums;
  align-self: start;
  padding-top: 4px;
}

.pub-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pub-journal {
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted); /* muted, щоб не конкурувати з .pub-title */
  font-style: italic;
}

.pub-doi {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0.5px solid var(--clr-border-med);
  padding: 3px 10px;
  color: var(--clr-ink-soft);
  white-space: nowrap;
  transition: all 0.2s;
  align-self: center;
}
.pub-row:hover .pub-doi {
  border-color: var(--clr-gold);
  color: var(--clr-gold-deep);
}

.section-footer {
  padding-top: var(--sp-6);
}

.text-link {
  font-size: var(--fs-xs);
  color: var(--clr-ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--clr-border-med);
  padding-bottom: 1px;
  transition: all 0.2s;
}
.text-link:hover {
  color: var(--clr-forest);
  border-color: var(--clr-forest);
}

/* ----------------------------------------------------------------
   9b. HOMEPAGE — "НАУКОВА ТРАДИЦІЯ" TIMELINE
   Замінює дублюючий список публікацій на візуально інший блок —
   timeline ключових робіт по роках. Підтримує заявлений у hero
   меседж "Наукова традиція" та дає ритм замість плоскої стрічки.
   ---------------------------------------------------------------- */
.home-tradition {
  padding-block: var(--sp-10) var(--sp-12);
}

.tradition-intro {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--clr-ink-soft);
  max-width: 52ch;
  line-height: var(--lh-snug);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.tradition-timeline {
  list-style: none;
  position: relative;
  padding-left: var(--sp-10);
  margin: 0;
}

/* Вертикальна лінія — золота, щільність збалансована
   для видимості на paper-фоні (0.5px зливається на деяких екранах) */
.tradition-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--clr-gold) 8%,
    var(--clr-gold) 92%,
    transparent 100%
  );
  opacity: 0.45;
}

.tradition-item {
  position: relative;
  padding-block: var(--sp-5);
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-6);
  align-items: baseline;
}
.tradition-item + .tradition-item {
  border-top: 0.5px dashed var(--clr-border);
}

/* Крапка на лінії — центр крапки точно на центрі лінії (7.5px).
   item стоїть на 40px (sp-10) від краю .tradition-timeline, крапка
   width=9px → для центру на 7.5px потрібно left: 7.5 - 4.5 - 40 = -37px */
.tradition-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: calc(var(--sp-5) + 6px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clr-paper);
  border: 1.5px solid var(--clr-gold);
  transition:
    background 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}
.tradition-item:hover::before {
  background: var(--clr-gold);
  transform: scale(1.15);
}

.tradition-year {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-style: italic;
  font-weight: 400;
  color: var(--clr-gold-deep);
  line-height: 1;
  font-variant-numeric: oldstyle-nums tabular-nums;
}

.tradition-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tradition-kind {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
}

.tradition-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--clr-ink);
}
.tradition-title a {
  transition: color 0.2s var(--ease-out);
  border-bottom: 0.5px solid transparent;
}
.tradition-title a:hover {
  color: var(--clr-forest);
  border-color: var(--clr-border-gold);
}

.tradition-meta {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  font-style: italic;
  margin-top: var(--sp-1);
}

/* ----------------------------------------------------------------
   10. QUOTE BLOCK (homepage only)
   ---------------------------------------------------------------- */
.home-quote {
  background: var(--clr-forest);
  padding-block: var(--sp-16);
}

.home-quote-inner {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.home-quote-bar {
  background: var(--clr-gold);
  align-self: stretch;
  min-height: 80px;
}

.home-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.5vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.home-quote-attr {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.home-quote-attr::before {
  content: "";
  width: 20px;
  height: 0.5px;
  background: var(--clr-gold);
}

/* ----------------------------------------------------------------
   11. PUBLICATIONS PAGE
   ---------------------------------------------------------------- */
.year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
}

.year-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 2px;
  transition: all 0.2s;
}
.year-nav-item:hover {
  color: var(--clr-forest);
  border-color: var(--clr-forest);
  background: var(--clr-surface);
}
.year-nav-item.active {
  background: var(--clr-forest);
  color: rgba(255, 255, 255, 0.85);
  border-color: var(--clr-forest);
}

.year-count {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--clr-ink-muted);
}
.year-nav-item.active .year-count {
  color: rgba(255, 255, 255, 0.45);
}

.pub-year-group {
  margin-bottom: var(--sp-12);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.pub-year-heading {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 400;
  font-style: italic;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
}

.pub-full-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Prose flow replaced by якірні крапки зліва + чіткі ієрархії.
   Прибираємо border-bottom (замість — повітря + тонкий dashed divider). */
.pub-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 2px solid transparent;
  transition: border-color 0.25s var(--ease-out);
  position: relative;
}
.pub-entry + .pub-entry {
  border-top: 0.5px dashed var(--clr-border);
}

/* Gold bullet — academic anchor */
.pub-entry::before {
  content: "";
  position: absolute;
  left: -3px;
  top: calc(var(--sp-6) + 14px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-gold);
  opacity: 0.5;
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}

.pub-entry:hover {
  border-left-color: var(--clr-gold);
}
.pub-entry:hover::before {
  opacity: 1;
  transform: scale(1.25);
}
.pub-entry:hover .pub-entry-title a {
  transform: translateX(4px);
  color: var(--clr-forest);
}

.pub-entry-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500; /* підсилюємо контраст vs .pub-entry-meta */
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  color: var(--clr-ink);
}
.pub-entry-title a {
  transition:
    color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
  display: block;
  will-change: transform;
}

.pub-entry-meta {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
  align-items: baseline;
}
.pub-journal-name {
  font-style: italic;
  color: var(--clr-ink); /* журнал — помітніше, це академічний якір */
  font-weight: 500;
}
.pub-volume,
.pub-pages {
  color: var(--clr-ink-muted);
  font-variant-numeric: tabular-nums;
}
.pub-coauthors {
  color: var(--clr-ink-muted);
  font-style: italic;
}
.pub-type-badge {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0.5px solid var(--clr-border-gold);
  background: rgba(200, 169, 110, 0.06);
  padding: 1px var(--sp-2);
  border-radius: 2px;
  color: var(--clr-gold-deep);
}

.pub-entry-abstract {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
  margin-top: var(--sp-2);
}

.doi-link {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 2px;
  align-self: start;
  transition: all 0.2s;
  white-space: nowrap;
}
.doi-link:hover {
  color: var(--clr-gold-deep);
  border-color: var(--clr-gold);
}

.read-more-link {
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  border-bottom: 0.5px solid var(--clr-border-med);
  margin-left: var(--sp-2);
  transition: color 0.2s;
}
.read-more-link:hover {
  color: var(--clr-forest);
}

/* ----------------------------------------------------------------
   12. SINGLE PUBLICATION
   ---------------------------------------------------------------- */
.pub-detail-meta {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.5rem 2rem;
  font-size: var(--fs-sm);
  margin-top: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 0.5px solid var(--clr-border);
  border-bottom: 0.5px solid var(--clr-border);
}
.pub-detail-meta dt {
  color: var(--clr-ink-muted);
}
.pub-detail-meta dd {
  color: var(--clr-ink-soft);
}
.pub-detail-meta a {
  border-bottom: 0.5px solid var(--clr-border-gold);
  color: var(--clr-gold-deep);
}
.pub-abstract {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 0.5px solid var(--clr-border);
}
.pub-abstract .prose > p:first-of-type::first-letter,
.pub-abstract-en .prose > p:first-of-type::first-letter {
  all: unset;
}

.prose > p:first-of-type::first-letter {
  min-height: 3.2em;
  shape-outside: inset(0);
}
.pub-cta {
  margin-top: var(--sp-6);
}

/* ----------------------------------------------------------------
   13. ABOUT PAGE
   ---------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.about-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.about-photo {
  width: 100%;
  border-radius: 2px;
  filter: grayscale(15%) contrast(1.05);
  margin-bottom: var(--sp-6);
}
.about-photo-wrap {
  position: relative;
  overflow: hidden;
}
.about-photo-wrap::after {
  display: none;
}

.sidebar-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sidebar-label::before {
  content: "";
  width: 12px;
  height: 0.5px;
  background: var(--clr-gold);
}

.profile-list li,
.media-links-list li {
  margin-bottom: var(--sp-2);
}
.profile-list a,
.media-links-list a {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  transition: color 0.2s;
  border-bottom: 0.5px solid transparent;
}
.profile-list a:hover,
.media-links-list a:hover {
  color: var(--clr-forest);
  border-color: var(--clr-border-med);
}

.about-section {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-10);
  border-bottom: 0.5px solid var(--clr-border);
  scroll-margin-top: calc(
    var(--header-h) + var(--sp-6)
  ); /* Anchor nav — sticky header не перекриває */
}
.about-section:last-child {
  border-bottom: none;
}

.about-section-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-6);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.about-section-title::before {
  content: "";
  width: 16px;
  height: 0.5px;
  background: var(--clr-gold);
}

.education-list dt {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-5);
}
.education-list dt:first-child {
  margin-top: 0;
}
.education-list dd {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--clr-gold);
  opacity: 0.8;
}

.about-section p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-ink-soft);
  margin-bottom: var(--sp-4);
}

.membership-list li {
  font-size: var(--fs-base);
  color: var(--clr-ink);
  padding-block: var(--sp-3);
  border-bottom: 0.5px solid var(--clr-border);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  line-height: var(--lh-normal);
}
.membership-list li::before {
  content: "";
  width: 18px;
  height: 0.5px;
  background: var(--clr-gold);
  flex-shrink: 0;
  opacity: 0.7;
  position: relative;
  top: -4px; /* вирівнюємо з baseline тексту */
}
.membership-list li:last-child {
  border-bottom: none;
}

/* Awards — окрема структура від membership: рік-бейдж зліва, текст справа.
   Дає академічний "вертикальний рейл" з років, який легко сканувати очима. */
.awards-grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.awards-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 0.5px solid var(--clr-border);
  font-size: var(--fs-base);
}
.awards-item:last-child {
  border-bottom: none;
}

.awards-year {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--clr-gold-deep);
  font-variant-numeric: oldstyle-nums tabular-nums;
  text-align: right;
  padding-right: var(--sp-3);
  border-right: 0.5px solid var(--clr-border-gold);
  line-height: 1.2;
}
.awards-year--empty {
  opacity: 0.3;
}

.awards-text {
  color: var(--clr-ink);
  line-height: var(--lh-normal);
}

/* Старі awards-list dt/dd залишаємо для зворотньої сумісності, але вже не використовуються */
.awards-list dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--clr-gold-deep);
  float: left;
  margin-right: var(--sp-4);
  min-width: 44px;
  padding-block: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.awards-list dd {
  font-size: var(--fs-base);
  color: var(--clr-ink-soft);
  padding-block: var(--sp-3);
  border-bottom: 0.5px solid var(--clr-border);
  overflow: hidden;
}
.awards-list dd:last-child {
  border-bottom: none;
}

.section-note {
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-6);
  font-style: italic;
}

.media-full-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 0.5px solid var(--clr-border);
  font-size: var(--fs-sm);
}
.media-full-list li:last-child {
  border-bottom: none;
}
.media-year {
  font-size: var(--fs-xs);
  color: var(--clr-gold-deep);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.media-outlet {
  color: var(--clr-ink-soft);
  font-style: italic;
}
.media-full-list a {
  color: var(--clr-ink-soft);
  transition: color 0.2s;
}
.media-full-list a:hover {
  color: var(--clr-forest);
}

/* ----------------------------------------------------------------
   PROFESSIONAL ACTIVITY  (/about-me → Професійна діяльність)
   ----------------------------------------------------------------
   Структура: <dl> з рядками-парами «категорія → текст».
   Візуально — ліва колонка з uppercase-міткою (як у sidebar-label),
   права — основний текст. На мобілці стак вертикально.
   ---------------------------------------------------------------- */
.activity-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.activity-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 0.5px solid var(--clr-border);
}
.activity-row:last-child {
  border-bottom: none;
}

.activity-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  font-weight: 400;
  line-height: var(--lh-normal);
  margin: 0;
  position: relative;
  padding-left: var(--sp-5);
}
.activity-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 0.5px;
  background: var(--clr-gold);
}

.activity-text {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--clr-ink);
  line-height: var(--lh-normal);
}

/* ----------------------------------------------------------------
   QUALIFICATIONS LIST  (/about-me → Підвищення кваліфікації)
   ----------------------------------------------------------------
   Використовує timeline-ідіому як awards-grid, але без вертикальної
   лінії — бо рядків небагато і вони коротші. Рік у серіф-шрифті
   зліва, основний текст + деталі з посиланням справа.
   ---------------------------------------------------------------- */
.qual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.qual-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-bottom: 0.5px solid var(--clr-border);
}
.qual-item:last-child {
  border-bottom: none;
}

.qual-year {
  text-align: right;
  padding-right: var(--sp-3);
  border-right: 0.5px solid var(--clr-border-gold);
  line-height: 1.2;
}
.qual-year time {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--clr-gold-deep);
  font-variant-numeric: oldstyle-nums tabular-nums;
  white-space: nowrap;
}
.qual-year--empty {
  opacity: 0.3;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--clr-gold-deep);
}

.qual-body {
  padding-top: 2px;
}

.qual-title {
  margin: 0 0 var(--sp-1) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--clr-ink);
  line-height: var(--lh-snug);
}

.qual-detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
}

.qual-link {
  color: var(--clr-forest);
  border-bottom: 0.5px solid var(--clr-border-med);
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
.qual-link:hover {
  color: var(--clr-gold-deep);
  border-color: var(--clr-gold);
}

/* ----------------------------------------------------------------
   14. BOOKS PAGE
   ---------------------------------------------------------------- */
.book-entry {
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--clr-border);
}
.book-entry:last-child {
  border-bottom: none;
}

.book-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-8);
}

.book-cover-wrap {
  position: relative;
  /* align-self:start — не дозволяє обкладинці розтягуватися на всю
     висоту grid-рядка (висоту визначає сусідня колонка з описом). */
  align-self: start;
}

.book-cover-wrap img {
  width: 100%;
  border-radius: 2px;
  position: relative;
  z-index: 1;
  /* Polaroid-style багатошарова тінь:
     1) Близька різка — контур і "вага" обкладинки на папері
     2) Середня розмита — глибина, ефект "лежить на столі"
     3) Далека з золотавим підтоном — теплий амбієнт-glow у тон палітри */
  box-shadow:
    0 1px 2px rgba(14, 14, 12, 0.15),
    0 8px 24px rgba(14, 14, 12, 0.18),
    0 24px 48px -12px rgba(92, 72, 38, 0.22);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
  /* Skeleton loader — резервує місце і показує shimmer до завантаження */
  background: linear-gradient(
    90deg,
    var(--clr-surface) 25%,
    var(--clr-warm) 50%,
    var(--clr-surface) 75%
  );
  background-size: 200% 100%;
  animation: book-skeleton 1.6s ease-in-out infinite;
  aspect-ratio: 2 / 3; /* Резервує місце до завантаження — усуває layout shift */
}
.book-cover-wrap img[src] {
  animation: none;
  background: none;
}
/* Ненав'язливий hover — тінь трохи глибше, обкладинка злегка підіймається */
.book-cover-wrap img:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(14, 14, 12, 0.18),
    0 12px 32px rgba(14, 14, 12, 0.22),
    0 32px 56px -12px rgba(92, 72, 38, 0.28);
}
@keyframes book-skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.book-cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--clr-surface);
  border: 0.5px solid var(--clr-border-med);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-ink-muted);
  font-size: var(--fs-xs);
  border-radius: 2px;
}

/* ── single-book.php — grid для сторінки окремої книги ────────── */
.book-single-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-10);
  align-items: start;
  margin-bottom: var(--sp-10);
}

/* Обмежуємо розмір заголовка всередині grid книги */
.book-single-grid .single-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 768px) {
  .book-single-grid .single-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }
}

@media (max-width: 480px) {
  .book-single-grid .single-title {
    font-size: 1.4rem;
  }
}

/* Анотація книги — повна ширина контейнера, без обмеження 65ch від .prose */
.book-annotation-full {
  max-width: 68ch;
  padding-top: var(--sp-8);
  border-top: 0.5px solid var(--clr-border);
}

/* Прибираємо drop cap для анотації книги */
.book-annotation-full > p:first-of-type::first-letter {
  all: unset;
}

/* Обкладинка в single-book: фіксована ширина, не розтягується */
.book-single-grid .book-cover-wrap {
  width: 220px;
  flex-shrink: 0;
}

/* Placeholder в single-book теж обмежений шириною батька */
.book-single-grid .book-cover-placeholder {
  width: 220px;
  max-width: 220px;
}

@media (max-width: 640px) {
  .book-single-grid {
    grid-template-columns: 1fr;
  }
  .book-single-grid .book-cover-wrap,
  .book-single-grid .book-cover-placeholder {
    width: 140px;
    max-width: 140px;
  }
}

.book-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-5);
}

/* Тип книги у списку /books — маленький бейдж над заголовком */
.book-type-badge {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-gold-deep);
  background: rgba(200, 169, 110, 0.08);
  border: 0.5px solid var(--clr-border-gold);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}
.book-title a {
  transition: color 0.2s;
}
.book-title a:hover {
  color: var(--clr-forest);
}

/* Meta — журнальний inline-формат замість таблиці.
   Кожен рядок: "Label · Value", тонкі розділювачі, tabular-nums для цифр. */
.book-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) 0;
  border-top: 0.5px solid var(--clr-border);
  border-bottom: 0.5px solid var(--clr-border);
}
.book-meta dt,
.book-meta dd {
  display: inline;
  line-height: var(--lh-normal);
}
.book-meta dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-right: var(--sp-3);
}
.book-meta dt::before {
  content: "— ";
  color: var(--clr-gold-deep);
  opacity: 0.5;
  font-weight: 400;
}
.book-meta dd {
  color: var(--clr-ink);
  font-variant-numeric: oldstyle-nums tabular-nums;
}
.book-meta dd::after {
  content: "";
  display: block; /* break після кожного dd → новий рядок */
  margin-bottom: var(--sp-2);
}
.book-meta dd:last-of-type::after {
  display: none;
}

.book-annotation {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-ink-soft);
  margin-bottom: var(--sp-6);
}

.book-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--clr-forest);
  padding: var(--sp-3) var(--sp-6);
  color: var(--clr-forest);
  transition: all 0.25s;
}
.book-buy-link:hover {
  background: var(--clr-forest);
  color: var(--clr-paper);
}

/* ISBN — clickable WorldCat link для бібліотечного пошуку */
.isbn-link {
  font-size: var(--fs-sm);
  color: var(--clr-gold-deep);
  border-bottom: 0.5px solid var(--clr-border-gold);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.isbn-link:hover {
  color: var(--clr-forest);
  border-color: var(--clr-forest);
}

.book-extras {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-10);
}

/* ── Уривок — окремий блок з форест-фоном ─────────────────────── */
.book-excerpt {
  background: var(--clr-forest);
  padding: var(--sp-10) var(--sp-12);
  position: relative;
  overflow: hidden;
}

/* Тонка сітчаста текстура — як у hero */
.book-excerpt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 40px
    );
  pointer-events: none;
}

/* Золота вертикальна смуга зліва */
.book-excerpt::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--clr-gold) 15%,
    var(--clr-gold) 85%,
    transparent
  );
}

.book-excerpt .extras-title {
  color: rgba(255, 255, 255, 0.3);
}
.book-excerpt .extras-title::before {
  background: var(--clr-gold);
}

.book-excerpt blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  padding: 0;
  border: none;
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 62ch;
  letter-spacing: -0.01em;
}

/* ── Зміст — чистий список ────────────────────────────────────── */
.book-toc {
  padding: var(--sp-10) 0 var(--sp-4);
  border-top: 0.5px solid var(--clr-border);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: toc-counter;
}

.toc-list li {
  counter-increment: toc-counter;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 0.5px solid var(--clr-border);
  font-size: var(--fs-base);
  color: var(--clr-ink-soft);
  line-height: var(--lh-snug);
  transition: color 0.2s;
}
.toc-list li:last-child {
  border-bottom: none;
}

.toc-list li::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--clr-gold-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Заголовки частин (Частина I, II, III) — виділяємо */
.toc-list li:has(strong),
.toc-list li.toc-part {
  font-weight: 500;
  color: var(--clr-ink);
}

/* ── Загальний заголовок секції ──────────────────────────────── */
.extras-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  font-weight: 400;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.extras-title::before {
  content: "";
  width: 16px;
  height: 0.5px;
  background: var(--clr-gold);
  flex-shrink: 0;
}

/* Dark mode */
body.dark-mode .book-excerpt {
  background: var(--clr-forest-deep);
}
body.dark-mode .toc-list li {
  border-bottom-color: var(--clr-border);
}
body.dark-mode .toc-list li::before {
  color: var(--clr-gold-light);
}

/* ----------------------------------------------------------------
   15. CONTACT PAGE
   ---------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-16);
  align-items: start;
}

/* ── Forest header над формою ─────────────────────────────────── */
.contact-form-header {
  background: var(--clr-forest);
  padding: var(--sp-6) var(--sp-8);
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Тонка gold лінія знизу header */
.contact-form-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--clr-gold), transparent 70%);
  opacity: 0.5;
}

/* Texture overlay — так само як у hero */
.contact-form-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 40px
  );
  pointer-events: none;
}

.contact-form-label {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* ── Ілюстрація пера: контейнер задає розмір ─────────────────── */
.quill-illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  opacity: 0.92;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
}
.quill-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible; /* щоб анімовані ink-лінії не обрізались */
}
/* На темному forest-фоні робимо чорнильні лінії світлішими */
.contact-form-header .quill-illustration .ink {
  stroke: #e8c880;
}
/* Планшетний розмір */
@media (max-width: 1024px) {
  .quill-illustration {
    width: 48px;
    height: 48px;
  }
}

.contact-form-sub {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.contact-form-sub::before {
  content: "";
  width: 12px;
  height: 0.5px;
  background: var(--clr-gold);
  opacity: 0.6;
}

/* ── Форма всередині обгортки ─────────────────────────────────── */
.contact-form-body {
  border: 0.5px solid var(--clr-border-med);
  border-top: none;
  padding: var(--sp-8);
}

.form-row {
  margin-bottom: var(--sp-5);
}
.form-row label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  margin-bottom: var(--sp-2);
}
.form-row label span {
  color: var(--clr-ink-muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--clr-ink);
  background: transparent;
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

/* Gold focus ring — більш витончено ніж forest */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}
.form-row textarea {
  resize: vertical;
  min-height: 160px;
}

.form-honeypot {
  display: none;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.submit-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--clr-forest);
  color: var(--clr-forest);
  padding: var(--sp-3) var(--sp-8);
  transition: all 0.25s;
}
.submit-btn:hover {
  background: var(--clr-forest);
  color: var(--clr-paper);
}
.submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.form-status {
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-4);
}
.form-status.success {
  color: var(--clr-forest);
  border-left: 2px solid var(--clr-gold);
}
.form-status.error {
  color: #a32d2d;
  border-left: 2px solid #a32d2d;
}

.contact-info {
  padding-top: var(--sp-12);
}
.info-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-2);
}
.contact-email {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  word-break: break-all;
  transition: color 0.2s;
  color: var(--clr-ink);
}
.contact-email:hover {
  color: var(--clr-forest);
}
.contact-note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
  border-top: 0.5px solid var(--clr-border);
  padding-top: var(--sp-5);
}

/* ----------------------------------------------------------------
   16. BLOG
   ---------------------------------------------------------------- */
.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-entry {
  padding-block: var(--sp-8);
  border-bottom: 0.5px solid var(--clr-border);
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  transition: border-color 0.25s var(--ease-out);
}
.blog-entry:first-child {
  padding-top: 0;
}
.blog-entry:hover {
  border-left-color: var(--clr-gold);
}

.blog-entry-title a {
  transition:
    color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
  display: block;
}
.blog-entry:hover .blog-entry-title a {
  transform: translateX(4px);
  color: var(--clr-forest);
}

.blog-entry-meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.blog-cat {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-gold-deep);
}

.blog-entry-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.blog-entry-excerpt {
  font-size: var(--fs-base);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-4);
}

.blog-read-link {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-gold-deep);
  border-bottom: 0.5px solid var(--clr-gold);
  padding-bottom: 1px;
  transition: all 0.2s;
}
.blog-read-link:hover {
  color: var(--clr-forest);
  border-color: var(--clr-forest);
}

.pagination {
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-2);
}
.pagination .page-numbers {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-2) var(--sp-4);
  transition: all 0.2s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--clr-forest);
  color: var(--clr-paper);
  border-color: var(--clr-forest);
}

/* ----------------------------------------------------------------
   17. SINGLE POST / PUBLICATION
   ---------------------------------------------------------------- */
.single-header {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--sp-8);
}

.single-meta-top {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-5);
  align-items: center;
}
.single-category {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-gold-deep);
  background: rgba(200, 169, 110, 0.08);
  border: 0.5px solid var(--clr-border-gold);
  padding: 2px 8px;
  border-radius: 2px;
}

.single-title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-2xl), 4vw, 3.5rem);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
  color: var(--clr-ink);
  font-optical-sizing: auto;
  text-wrap: pretty;
}

.single-excerpt {
  font-size: var(--fs-lg);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
}

.prose {
  font-size: 1.125rem; /* 18px — оптимально для довгих академічних текстів */
  line-height: var(--lh-loose);
  color: var(--clr-ink-soft);
  max-width: 65ch; /* Класичний академічний рядок — не більше 65 символів */
}
.prose p {
  margin-bottom: var(--sp-5);
}

/* Drop cap — перша літера першого абзацу, академічна традиція */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 4.2em;
  font-weight: 700;
  line-height: 0.75;
  float: left;
  margin-right: 0.08em;
  margin-top: 0.06em;
  color: var(--clr-forest);
}

.prose h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  margin: var(--sp-10) 0 var(--sp-4);
  color: var(--clr-ink);
  text-wrap: pretty;
}
.prose h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--clr-ink);
  text-wrap: pretty;
}
.prose a {
  color: var(--clr-forest);
  border-bottom: 0.5px solid var(--clr-gold);
  transition: border-color 0.2s;
}
.prose a:hover {
  border-color: var(--clr-forest);
}
.prose blockquote {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--clr-gold);
  font-style: italic;
  color: var(--clr-ink-soft);
  margin-block: var(--sp-6);
  hanging-punctuation: first; /* Класичний академічний друк — лапки виступають за ліву межу */
}

/* Виноски — академічний стиль */
.prose sup {
  font-family: var(--font-sans);
  font-size: 0.65em;
  color: var(--clr-gold-deep);
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
.prose .footnotes {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 0.5px solid var(--clr-border);
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
}
.prose .footnotes ol {
  list-style: decimal;
  padding-left: var(--sp-5);
  line-height: var(--lh-normal);
}
.prose .footnotes li {
  margin-bottom: var(--sp-2);
}
.prose .footnotes li::marker {
  color: var(--clr-gold-deep);
  font-weight: 500;
}

.single-footer {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 0.5px solid var(--clr-border);
}
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  margin-top: var(--sp-5);
}
.post-navigation a:hover {
  color: var(--clr-forest);
}
.back-link-wrap {
  margin-top: var(--sp-8);
}

/* ----------------------------------------------------------------
   18. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--clr-border);
  margin-top: var(--sp-16);
}

.footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

.footer-top {
  background: var(--clr-forest);
  margin-inline: calc(-50vw + 50%);
  padding-inline: calc(50vw - 50% + var(--sp-8));
  padding-block: var(--sp-10) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-10);
  margin-bottom: 0;
  position: relative;
}

/* Золота вертикальна лінія між колонками footer */
.footer-nav {
  position: relative;
  padding-left: var(--sp-10);
  border-left: 0.5px solid rgba(200, 169, 110, 0.35);
}
.footer-nav::before {
  display: none;
}

.footer-academic-links {
  position: relative;
  padding-left: var(--sp-10);
  border-left: 0.5px solid rgba(200, 169, 110, 0.35);
}
.footer-academic-links::before {
  display: none;
}

.footer-identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 200px;
  flex-shrink: 0;
}

.footer-logo-wrap {
  display: block;
  width: 200px;
  text-decoration: none;
}

.footer-logo {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  transition: opacity 0.2s;
  margin-top: -70px;
}
.footer-logo-wrap:hover .footer-logo {
  opacity: 0.85;
}

.footer-logo-text {
  margin-top: -60px;
  width: 200px;
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.footer-institution {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.footer-nav ul,
.footer-academic-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-nav a,
.footer-academic-links a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.2s;
  text-decoration: none;
}
.footer-nav a:hover,
.footer-academic-links a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer-links-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
}
.footer-links-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  min-width: 10px;
  flex-shrink: 0;
  height: 1px;
  background: var(--clr-gold);
  margin-right: var(--sp-2);
}

.footer-bottom {
  background: var(--clr-forest-deep);
  margin-inline: calc(-50vw + 50%);
  padding-inline: calc(50vw - 50% + var(--sp-8));
  padding-block: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Developer credit — appears only when set in Customizer */
.footer-credit {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-credit-name {
  color: rgba(255, 255, 255, 0.35);
}
.footer-credit a {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 1px;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.footer-credit a:hover {
  color: rgba(255, 255, 255, 0.65);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.footer-copy {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
}
.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.footer-sep {
  color: rgba(255, 255, 255, 0.15);
}
.sitemap-link {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.2s;
}
.sitemap-link:hover {
  color: rgba(255, 255, 255, 0.45);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.22);
  font-size: var(--fs-xs);
  transition: color 0.2s;
}
.footer-bottom a:hover {
  color: rgba(255, 255, 255, 0.55);
}

/* ----------------------------------------------------------------
   19. FADE-IN ANIMATION (IntersectionObserver via JS)
   ---------------------------------------------------------------- */
.fade-in-ready {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}
.fade-in-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   20. EMPTY STATE
   ---------------------------------------------------------------- */
.empty-state {
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
  font-style: italic;
  padding: var(--sp-10);
  text-align: center;
  border: 0.5px dashed var(--clr-border-med);
}

/* ----------------------------------------------------------------
   21. RESPONSIVE
   ---------------------------------------------------------------- */
/* ================================================================
   RESPONSIVE — 3 брейкпоінти
   1024px  — широкий планшет / невеликий ноутбук
    768px  — планшет portrait
    480px  — мобільний
   ================================================================ */

/* ── 1024px ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 220px;
  }
  .nav-list {
    gap: var(--sp-5);
  }
  .nav-list a {
    font-size: var(--fs-sm);
    letter-spacing: 0.14em;
  }
  .pub-entry-title {
    font-size: var(--fs-lg);
  }
  .book-grid {
    grid-template-columns: 150px 1fr;
    gap: var(--sp-8);
  }
  .footer-top {
    gap: var(--sp-8);
  }
}

/* ── 768px: планшет ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Base font sizes — bumped for mobile (iOS needs 16px on inputs) */
  :root {
    --fs-2xs: 0.6875rem; /* 11px */
    --fs-xs: 0.75rem; /* 12px */
    --fs-sm: 0.875rem; /* 14px */
    --fs-base: 1rem; /* 16px — critical for iOS inputs */
    --fs-md: 1.0625rem; /* 17px */
    --fs-lg: 1.1875rem; /* 19px */
  }
  body {
    line-height: 1.7;
  }

  /* Header */
  .primary-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* .mobile-menu display контролюється класом .is-open (див. блок MOBILE MENU) */
  .mobile-menu-backdrop {
    display: block;
  }
  .site-logo {
    font-size: var(--fs-md);
    margin-right: auto; /* штовхає .header-right праворуч */
  }
  .lang-switcher {
    display: none;
  }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-content {
    padding: var(--sp-12) var(--sp-8);
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
  }
  .hero-heading {
    font-size: clamp(2rem, 6vw, 3rem);
  }
  .hero-stats {
    gap: var(--sp-6);
  }

  /* Hero photo — горизонтальний банер замість вертикальної колонки */
  .hero-photo-wrap {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
  }
  .hero-photo-texture {
    display: none;
  }
  .hero-photo-zone {
    aspect-ratio: 3 / 4;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .hero-identity {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    border-top: none;
    border-left: 0.5px solid var(--clr-border-forest);
    padding: var(--sp-6) var(--sp-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Home cards */
  .cards-grid.three-col {
    grid-template-columns: 1fr 1fr;
  }
  .home-card:nth-child(2) {
    border-right: none;
  }
  .home-card:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--clr-border);
  }

  /* Publications */
  .pub-year-heading {
    font-size: var(--fs-2xl);
  }
  .pub-entry {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .pub-entry-links {
    margin-top: var(--sp-2);
  }
  .pub-row {
    grid-template-columns: 56px 1fr;
  }
  .pub-doi {
    display: none;
  }
  .pub-year {
    font-size: var(--fs-lg);
  }
  .year-nav {
    gap: var(--sp-1);
  }
  .pub-type-filter {
    gap: var(--sp-1);
  }

  /* Tradition timeline — на планшеті звужуємо колонку року */
  .tradition-timeline {
    padding-left: var(--sp-8);
  }
  .tradition-item {
    grid-template-columns: 56px 1fr;
    gap: var(--sp-4);
  }
  .tradition-item::before {
    left: -28px;
  }
  .tradition-year {
    font-size: var(--fs-xl);
  }
  .tradition-title {
    font-size: var(--fs-lg);
  }

  /* Awards — звужуємо колонку року */
  .awards-item {
    grid-template-columns: 52px 1fr;
    gap: var(--sp-4);
  }
  .awards-year {
    font-size: var(--fs-base);
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .about-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-8);
    align-items: start;
  }

  /* Activity list — звужуємо колонку лейбла */
  .activity-row {
    grid-template-columns: 140px 1fr;
    gap: var(--sp-5);
  }

  /* Qualifications — звужуємо колонку року */
  .qual-item {
    grid-template-columns: 52px 1fr;
    gap: var(--sp-4);
  }
  .qual-year time,
  .qual-year--empty {
    font-size: var(--fs-base);
  }
  .qual-title {
    font-size: var(--fs-base);
  }

  /* Books */
  .book-grid {
    grid-template-columns: 140px 1fr;
    gap: var(--sp-6);
  }
  .book-extras {
    grid-template-columns: 1fr;
  }
  .book-title {
    font-size: var(--fs-xl);
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .contact-info {
    position: static;
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--clr-surface);
    border: 0.5px solid var(--clr-border-med);
  }
  .contact-note {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  /* Blog */
  .blog-entry-title {
    font-size: var(--fs-xl);
  }

  /* Single */
  .single-title {
    font-size: var(--fs-2xl);
  }
  .post-navigation {
    flex-direction: column;
    gap: var(--sp-3);
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8) var(--sp-10);
  }
  .footer-identity {
    grid-column: 1 / -1;
    width: auto;
  }
  .footer-academic-links {
    display: none;
  }
  .footer-nav {
    padding-left: 0;
    border-left: none;
  }
  .footer-nav::before {
    display: none;
  }

  /* Misc */
  .home-quote {
    padding-block: var(--sp-12);
  }
  .page-header {
    padding-block: var(--sp-8);
  }
  .page-title {
    font-size: var(--fs-2xl);
  }
}

/* ── 480px: мобільний ─────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --header-h: 56px;
  }

  /* Container */
  .container {
    padding-inline: var(--sp-4);
  }
  .page-wrap {
    padding-block: var(--sp-10) var(--sp-16);
  }

  /* Header */
  .header-inner {
    padding-inline: var(--sp-4);
    gap: var(--sp-4);
  }
  .site-logo {
    font-size: var(--fs-base);
  }
  .dark-toggle {
    width: 28px;
    height: 28px;
  }

  /* Hero */
  .hero-content {
    padding: var(--sp-8) var(--sp-4);
  }
  .hero-heading {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  .hero-bio {
    font-size: var(--fs-sm);
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
  }
  .hero-stat + .hero-stat {
    border-left: none;
    padding-left: 0;
  }
  .stat-number {
    font-size: var(--fs-2xl);
  }

  /* Hero photo — на мобільному фото зверху як банер, identity знизу */
  .hero-photo-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .hero-photo-zone {
    display: flex;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    /*     aspect-ratio: 16 / 10; */
    min-height: 0;
    /*     max-height: 320px; */
  }
  .hero-photo-zone img {
    object-position: center 25%;
  }
  .hero-photo-texture {
    display: block;
  }
  .hero-author-name {
    font-size: var(--fs-lg);
  }
  .hero-author-title {
    font-size: var(--fs-xs);
    margin-top: 4px;
  }
  .hero-profiles {
    display: flex;
    margin-top: var(--sp-3);
  }
  .hero-identity {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    border-left: none;
    border-top: 0.5px solid var(--clr-border-forest);
  }

  /* Home cards */
  .cards-grid.three-col {
    grid-template-columns: 1fr;
  }
  .home-card {
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
  }
  .home-card:nth-child(3) {
    grid-column: auto;
    border-top: none;
  }
  .card-title {
    font-size: var(--fs-lg);
  }

  /* Publications page */
  .pub-year-heading {
    font-size: var(--fs-xl);
  }
  .pub-entry-title {
    font-size: var(--fs-base);
  }
  .pub-entry-meta {
    flex-direction: column;
    gap: var(--sp-1);
  }
  .pub-entry-links {
    display: none;
  }
  .year-nav-item {
    font-size: 0.5625rem;
    padding: var(--sp-1) var(--sp-2);
  }
  .pub-filter-btn {
    font-size: 0.5625rem;
    padding: var(--sp-1) var(--sp-3);
  }
  .filter-count {
    display: none;
  }

  /* Home pub strip — на мобільному bullet ховаємо, рядки компактніші */
  .pub-row {
    grid-template-columns: 48px 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }
  .pub-row::before {
    display: none;
  }
  .pub-title {
    font-size: var(--fs-sm);
  }
  .pub-year {
    font-size: var(--fs-md);
  }

  /* Tradition timeline — на мобільному лінія тонша, крапка менша */
  .home-tradition {
    padding-block: var(--sp-8);
  }
  .tradition-intro {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-6);
  }
  .tradition-timeline {
    padding-left: var(--sp-6);
  }
  .tradition-timeline::before {
    left: 5px;
  }
  .tradition-item {
    grid-template-columns: 48px 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
  }
  .tradition-item::before {
    left: -23px;
    top: calc(var(--sp-4) + 4px);
    width: 7px;
    height: 7px;
  }
  .tradition-year {
    font-size: var(--fs-lg);
  }
  .tradition-title {
    font-size: var(--fs-md);
  }

  /* Awards — 2-рядковий layout для дуже вузького екрану */
  .awards-item {
    grid-template-columns: 44px 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }
  .awards-year {
    font-size: var(--fs-sm);
    padding-right: var(--sp-2);
  }
  .awards-text {
    font-size: var(--fs-sm);
  }

  /* Card-tag pill на мобільному — менший padding */
  .card-tag {
    padding: 4px 10px;
  }

  /* About */
  .about-sidebar {
    grid-template-columns: 1fr;
  }
  /* На дуже вузьких екранах зменшуємо рік до дрібного розміру, але
     колонка лишається достатньо широкою для "2002–2006" без wrap. */
  .edu-timeline::before {
    left: 78px;
  }
  .edu-timeline-item {
    grid-template-columns: 76px 1fr;
    gap: var(--sp-3);
  }
  .edu-timeline-item::before {
    left: 75px;
  }
  .edu-timeline-year {
    padding-right: var(--sp-2);
  }
  .edu-timeline-year time {
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
  }
  .edu-degree {
    font-size: var(--fs-base);
  }
  .edu-institution {
    font-size: var(--fs-xs);
  }

  /* Activity — на мобільному стак вертикально: лейбл над текстом.
     Зберігаємо акцентну золоту риску, прибираємо дворядкову сітку. */
  .activity-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
  }
  .activity-label {
    font-size: var(--fs-2xs);
  }
  .activity-text {
    font-size: var(--fs-base);
  }

  /* Qualifications — ще тісніше на мобільному */
  .qual-item {
    grid-template-columns: 44px 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
  }
  .qual-year time,
  .qual-year--empty {
    font-size: var(--fs-sm);
  }
  .qual-title {
    font-size: var(--fs-base);
  }
  .qual-detail {
    font-size: var(--fs-sm);
  }

  /* Books */
  .book-grid {
    grid-template-columns: 1fr;
  }
  .book-cover-wrap {
    max-width: 140px;
    margin-bottom: var(--sp-6);
  }
  .book-title {
    font-size: var(--fs-xl);
  }

  /* Contact */
  .contact-form-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5);
  }
  .contact-form-label {
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
  }
  .contact-form-label .quill-illustration {
    width: 56px;
    height: 56px;
  }
  .contact-form-sub {
    justify-content: center;
  }
  .contact-form-body {
    padding: var(--sp-5);
  }
  .contact-info {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .contact-email {
    font-size: var(--fs-lg);
    word-break: break-word;
  }

  /* Blog */
  .blog-entry {
    padding-block: var(--sp-6);
  }
  .blog-entry-title {
    font-size: var(--fs-lg);
  }
  .blog-entry-meta {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .blog-entry-cover {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    max-height: 320px;
  }
  .blog-reading-time {
    display: none;
  }

  /* Single */
  .single-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .single-excerpt {
    font-size: var(--fs-base);
  }
  .pub-detail-meta {
    grid-template-columns: 90px 1fr;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
  }
  .prose {
    font-size: var(--fs-base);
  }
  .prose > p:first-of-type::first-letter {
    font-size: 1em;
    font-weight: 400;
    float: none;
    margin: 0;
    color: inherit;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .footer-nav {
    display: block;
    grid-column: 1 / -1;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
    border-left: none;
  }
  .footer-nav::before {
    display: none;
  }
  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  /* Оставляем только 3 ключевые ссылки: Про мене, Публікації, Контакт */
  .footer-nav li:nth-child(3),
  .footer-nav li:nth-child(4) {
    display: none;
  }
  .footer-nav a {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s;
    padding: 4px 0;
  }
  .footer-nav a:hover {
    color: var(--clr-gold);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
    padding-block: var(--sp-5);
  }
  .footer-bottom-right {
    justify-content: center;
  }

  /* Quote */
  .home-quote {
    padding-block: var(--sp-10);
  }
  .home-quote-inner {
    grid-template-columns: 2px 1fr;
    gap: var(--sp-5);
  }
  .home-quote-text {
    font-size: 1.1rem;
  }

  /* Page header */
  .page-header {
    padding-block: var(--sp-6);
    margin-bottom: var(--sp-8);
  }
  .page-title {
    font-size: clamp(1.5rem, 6vw, var(--fs-2xl));
  }
  .page-subtitle {
    font-size: var(--fs-xs);
  }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: 0.5625rem;
  }

  /* Pagination */
  .pagination {
    flex-wrap: wrap;
  }
  .pagination .page-numbers {
    padding: var(--sp-2) var(--sp-3);
  }

  /* Section header */
  .section-header {
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
  }
  .section-count {
    font-size: var(--fs-xl);
  }
}

/* ── Обкладинка поста (архів і single) ─────────────────────────── */
.blog-entry-cover-link {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: var(--sp-5);
}

.blog-entry-cover {
  aspect-ratio: 16 / 6;
  overflow: hidden;
  border-radius: 2px;
  max-height: 280px;
}

.blog-entry-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}

.blog-entry:hover .blog-entry-cover img {
  transform: scale(1.03);
}
.single-cover {
  aspect-ratio: unset;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.single-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;

  will-change: transform; /* GPU layer — плавний object-fit на LCP елементі */
}

/* ── Час читання ────────────────────────────────────────────────── */
.single-reading-time,
.blog-reading-time {
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.single-reading-time::before,
.blog-reading-time::before {
  content: "·";
  color: var(--clr-border-med);
}

/* ── Джерело (передрук) ─────────────────────────────────────────── */
.single-source {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-surface);
  border-left: 2px solid var(--clr-gold);
}
.single-source-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
}
.single-source-link {
  color: var(--clr-gold-deep);
  transition: color 0.2s;
}
.single-source-link:hover {
  color: var(--clr-forest);
}
.single-source-date {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
}

/* ── Джерело в архіві ───────────────────────────────────────────── */
.blog-source {
  font-size: var(--fs-xs);
  color: var(--clr-gold-deep);
  letter-spacing: 0.06em;
  font-style: italic;
}
.blog-source::before {
  content: "·";
  color: var(--clr-border-med);
  margin-right: var(--sp-2);
}

/* ── Blog entry body (коли є cover) ────────────────────────────── */
.blog-entry-body {
  flex: 1;
}

.site-main {
  min-height: calc(100vh - var(--header-h) - 380px);
}

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .mobile-menu {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  .container {
    max-width: 100%;
    padding: 0;
  }
  a {
    color: #000;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  .page-hero {
    padding-block: 1cm 0.5cm;
    border: none;
  }
  .home-quote {
    background: none;
    color: #000;
    border: 1px solid #ccc;
  }
  .footer-top,
  .footer-bottom {
    background: none;
  }
}

/* ── Contact Form 7 інтеграція — gold focus ring ── */

/* Всі CF7 інпути в межах .contact-form-body */
.contact-form-body .wpcf7-form input:not([type="submit"]),
.contact-form-body .wpcf7-form textarea,
.contact-form-body .wpcf7-form select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--clr-ink);
  background: transparent;
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  margin-bottom: var(--sp-4);
  display: block;
}

/* Gold focus ring — витончений, не forest */
.contact-form-body .wpcf7-form input:not([type="submit"]):focus,
.contact-form-body .wpcf7-form textarea:focus,
.contact-form-body .wpcf7-form select:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}

.contact-form-body .wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Fallback — загальні CF7 стилі (поза .contact-form-body) */
.wpcf7-form .form-row input,
.wpcf7-form .form-row textarea,
.wpcf7-form .form-row select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--clr-ink);
  background: transparent;
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.wpcf7-form .form-row input:focus,
.wpcf7-form .form-row textarea:focus,
.wpcf7-form .form-row select:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}

.wpcf7-form input[type="submit"],
.contact-form-body .wpcf7-form input[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--clr-forest);
  color: var(--clr-forest);
  background: transparent;
  padding: var(--sp-3) var(--sp-8);
  cursor: pointer;
  transition: all 0.25s;
  margin-top: var(--sp-2);
}
.wpcf7-form input[type="submit"]:hover,
.contact-form-body .wpcf7-form input[type="submit"]:hover {
  background: var(--clr-forest);
  color: var(--clr-paper);
}
.wpcf7-not-valid-tip {
  font-size: var(--fs-xs);
  color: #a32d2d;
  margin-top: 4px;
  display: block;
}
.wpcf7-response-output {
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  border-left: 2px solid var(--clr-gold);
  color: var(--clr-forest);
}
.wpcf7-response-output.wpcf7-validation-errors {
  border-color: #a32d2d;
  color: #a32d2d;
}

/* CF7 label стиль всередині contact-form-body */
.contact-form-body .wpcf7-form label,
.contact-form-body label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-5);
}
.contact-form-body .wpcf7-form label:first-child {
  margin-top: 0;
}

/* Responsive: contact-form-body на мобільному */
@media (max-width: 640px) {
  .contact-form-header {
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-5);
  }
  .contact-form-body {
    padding: var(--sp-5);
  }

  /* Поля форми — помітні межі, зручні для тапу */
  .contact-form-body .wpcf7-form input:not([type="submit"]),
  .contact-form-body .wpcf7-form textarea,
  .contact-form-body .wpcf7-form select,
  .wpcf7-form .form-row input,
  .wpcf7-form .form-row textarea,
  .wpcf7-form .form-row select {
    border: 1px solid rgba(14, 14, 12, 0.28);
    padding: 14px 16px;
    font-size: 16px; /* критично для iOS — інакше зумить */
    background: #fff;
    border-radius: 2px;
    min-height: 48px;
  }
  .contact-form-body .wpcf7-form textarea,
  .wpcf7-form .form-row textarea {
    min-height: 140px;
  }
  .contact-form-body .wpcf7-form label,
  .contact-form-body label {
    font-size: 0.75rem;
    margin-top: var(--sp-4);
    margin-bottom: 8px;
  }
  .wpcf7-form input[type="submit"],
  .contact-form-body .wpcf7-form input[type="submit"] {
    width: 100%;
    padding: 14px var(--sp-6);
    font-size: 0.8125rem;
    margin-top: var(--sp-4);
    background: var(--clr-forest);
    color: var(--clr-paper);
    border: 1px solid var(--clr-forest);
    min-height: 48px;
  }
  .wpcf7-form input[type="submit"]:active,
  .contact-form-body .wpcf7-form input[type="submit"]:active {
    background: var(--clr-forest-deep);
  }
  body.dark-mode .contact-form-body .wpcf7-form input:not([type="submit"]),
  body.dark-mode .contact-form-body .wpcf7-form textarea,
  body.dark-mode .contact-form-body .wpcf7-form select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
  }
}

/* ----------------------------------------------------------------
   PUBLICATION TYPE FILTER
   ---------------------------------------------------------------- */
.pub-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 0.5px solid var(--clr-border);
}

.pub-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  background: transparent;
  border: 0.5px solid var(--clr-border-med);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 2px;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.pub-filter-btn:hover {
  color: var(--clr-forest);
  border-color: var(--clr-forest);
  background: var(--clr-surface);
}
.pub-filter-btn.is-active {
  background: var(--clr-forest);
  color: rgba(255, 255, 255, 0.88);
  border-color: var(--clr-forest);
}

.filter-count {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--clr-ink-muted);
  line-height: 1;
}
.pub-filter-btn.is-active .filter-count {
  color: rgba(255, 255, 255, 0.42);
}

/* ── Анімація при фільтрації ───────────────────────── */
.pub-entry[hidden] {
  display: none;
}

.pub-entry {
  animation: pub-entry-in 0.3s var(--ease-out) both;
}
@keyframes pub-entry-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Порожня секція після фільтрації ──────────────── */
.pub-year-group[style*="display: none"] + .pub-year-group .pub-year-heading,
.pub-year-group:first-child .pub-year-heading {
  /* Без додаткових стилів — секції ховаються через JS */
}

/* ----------------------------------------------------------------
   EDUCATION TIMELINE  (/about-me)
   ---------------------------------------------------------------- */
.edu-timeline {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}

/* Вертикальна лінія — відсунута від колонки років для комфортного повітря
   між цифрою "2002–2006" та золотою крапкою */
.edu-timeline::before {
  content: "";
  position: absolute;
  left: 118px; /* раніше 84 — тепер вміщає період "2002–2006" */
  top: 8px;
  bottom: 8px;
  width: 0.5px;
  background: var(--clr-border-med);
}

.edu-timeline-item {
  display: grid;
  grid-template-columns: 114px 1fr; /* раніше 80 — тепер повний період з em-dash */
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  position: relative;
}
.edu-timeline-item:last-child {
  padding-bottom: 0;
}

/* Золота крапка на лінії — центр крапки на центрі лінії (118px) */
.edu-timeline-item::before {
  content: "";
  position: absolute;
  left: 115px; /* 118 - 3 (половина 7px крапки) */
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-gold);
  border: 1.5px solid var(--clr-paper);
  box-shadow: 0 0 0 1px var(--clr-gold);
  z-index: 1;
}

.edu-timeline-year {
  padding-top: 2px;
  text-align: right;
  padding-right: var(--sp-5);
}
.edu-timeline-year time {
  font-family: var(--font-serif);
  font-size: var(--fs-lg); /* раніше fs-xl — менший, бо період з 9 символів */
  font-style: italic;
  color: var(--clr-gold-deep);
  font-variant-numeric: oldstyle-nums tabular-nums;
  white-space: nowrap;
  line-height: 1.15;
}

.edu-timeline-body {
  padding-top: 2px;
}

.edu-degree {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--clr-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}

.edu-institution {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-1);
}

.edu-thesis {
  font-size: var(--fs-sm);
  color: var(--clr-ink-muted);
  font-style: italic;
  line-height: var(--lh-normal);
  padding-left: var(--sp-3);
  border-left: 1.5px solid var(--clr-border-gold);
  margin-top: var(--sp-2);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  .pub-type-filter {
    gap: var(--sp-1);
  }
  .pub-filter-btn {
    padding: var(--sp-2) var(--sp-3);
  }

  /* Колонка року ширша + збільшений gap, щоб цифра не "наїжджала" на
     золоту крапку таймлайну. Лінію пересуваємо правіше, точку — по центру лінії.
     "2002–2006" — 9 символів, має вміститись без wrap. */
  .edu-timeline-item {
    grid-template-columns: 86px 1fr;
    gap: var(--sp-4);
  }
  .edu-timeline-year {
    padding-right: var(--sp-2);
  }
  .edu-timeline-year time {
    font-size: var(--fs-sm);
  } /* трохи менший рік на мобіле, щоб період вмістився */
  .edu-timeline::before {
    left: 92px;
  } /* лінія далі від років */
  .edu-timeline-item::before {
    left: 89px;
  } /* крапка на лінії (92 - 3) */
  .edu-degree {
    font-size: var(--fs-lg);
  }
}
/* ================================================================
   DARK MODE — керується JS toggle, вибір зберігається в localStorage.
   Клас .dark-mode додається на <body> через main.js.
   За замовчуванням сайт ЗАВЖДИ світлий.

   ── ФІКС БІЛОГО СПАЛАХУ ПРИ VIEW TRANSITIONS (2026) ──────────────
   Проблема: при переході між сторінками браузер робить "знімок" нової
   сторінки ДО того як виконається inline-скрипт у <head>. Якщо фон
   задано тільки на body.dark-mode, знімок фіксує білий default-фон
   <html>. Вирішення — фон на <html> + .dark-mode-pre на <html>.

   Послідовність тепер така:
     1. CSS завантажується → <html> одразу має base фон (світлий
        або темний, відповідно до .dark-mode-pre який вже стоїть)
     2. Inline-скрипт (header.php) синхронно додає .dark-mode-pre
        на <html> ДО парсингу <body>
     3. Знімок для View Transition робиться з уже правильним фоном
   ================================================================ */

/* Базовий фон — на <html>, не на body. Це гарантує що браузер малює
   правильний фон одразу, не чекаючи на body.dark-mode клас.
   body ще прозорий, тож фон html видно крізь нього.

   color-scheme каже браузеру про темний режим на рівні рендеру —
   впливає на дефолтні форми, скролбари, scrollbar-gutter і навіть
   колір фону в момент коли <body> ще не розпарсено. */
html {
  background-color: var(--clr-paper);
  color-scheme: light;
}

/* Плавний перехід між темами — без "миготіння" при зміні */
html,
body {
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

/* .dark-mode-pre — ставиться інлайн-скриптом у <head> ДО DOMContentLoaded
   (див. header.php). Дає темний фон ще до того як parser дійде до <body>.
   .dark-mode-loading — альтернативна назва того ж класу, ставиться
   в main.js (історичний дубль, залишаємо підтримку обох).
   .dark-mode — ставиться на <body> після DOMContentLoaded (JS toggle).
   Усі три селектори дають ті самі змінні кольору. */
html.dark-mode-pre,
html.dark-mode-loading,
html:has(body.dark-mode) {
  background-color: #141613;
  color-scheme: dark;
}

html.dark-mode-pre body,
html.dark-mode-loading body,
body.dark-mode {
  /* Ink scale — інвертуємо: темний текст → світлий */
  --clr-ink: #e8e5dc;
  --clr-ink-mid: #c8cec8;
  --clr-ink-soft: #9aaa9a;
  --clr-ink-muted: #6a7a6a;

  /* Paper & surfaces → антрацит + темно-зелений відтінок */
  --clr-paper: #141613;
  --clr-surface: #1e211d;
  --clr-warm: #1a1d18;

  /* Forest палітра — глибша у темному режимі */
  --clr-forest: #122318;
  --clr-forest-deep: #0c1a10;
  --clr-forest-mid: #1a2e22;
  --clr-forest-soft: #203828;

  /* Gold — трохи яскравіший для контрасту на темному */
  --clr-gold: #d4b87a;
  --clr-gold-deep: #a07840;
  --clr-gold-light: #e8d4a8;

  /* Borders — збільшуємо opacity для видимості */
  --clr-border: rgba(232, 229, 220, 0.08);
  --clr-border-med: rgba(232, 229, 220, 0.16);
  --clr-border-forest: rgba(255, 255, 255, 0.06);
  --clr-border-gold: rgba(212, 184, 122, 0.22);

  background-color: var(--clr-paper);
  color: var(--clr-ink);
}

/* Header у темному */
body.dark-mode .site-header {
  background: rgba(20, 22, 19, 0.94);
  border-bottom-color: var(--clr-border-med);
}

/* Hero фото — менший grayscale у темному */
body.dark-mode .hero-photo-zone img {
  filter: grayscale(10%) contrast(0.95) brightness(0.88);
}

/* Блог-обкладинки — зменшуємо яскравість */
body.dark-mode .blog-entry-cover img,
body.dark-mode .single-cover img {
  filter: brightness(0.85) contrast(1.02);
}

/* Обкладинки книг — тонше shadow */
body.dark-mode .book-cover-wrap img {
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
}

/* Home card hover */
body.dark-mode .home-card:hover {
  background: var(--clr-warm);
}

/* Hover на рядках */
body.dark-mode .pub-row:hover,
body.dark-mode .pub-entry:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Single source block */
body.dark-mode .single-source {
  background: var(--clr-surface);
}

/* Quote block */
body.dark-mode .home-quote {
  background: var(--clr-forest-deep);
}

/* Contact form */
body.dark-mode .contact-form-header {
  background: var(--clr-forest-deep);
}
body.dark-mode .contact-form-body {
  border-color: var(--clr-border-med);
  background: var(--clr-surface);
}

/* Footer */
body.dark-mode .footer-top {
  background: var(--clr-forest-deep);
}
body.dark-mode .footer-bottom {
  background: rgba(8, 12, 9, 0.95);
}

/* Drop cap — gold замість forest у темному */
body.dark-mode .prose > p:first-of-type::first-letter {
  color: var(--clr-gold);
}

/* Lang switcher активна */
body.dark-mode .lang-btn--active {
  background: var(--clr-forest-mid);
}

/* Scrollbar — темна тема (Chromium) */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  background: var(--clr-paper);
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--clr-border-med);
  border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--clr-gold-deep);
}

/* ── Dark mode: нові елементи (card pill, bullets, tradition timeline, awards) ── */

/* Card-label icon — яскравіший gold для контрасту на темному */
body.dark-mode .card-label-icon {
  color: var(--clr-gold);
  opacity: 0.75;
}

/* Card-tag pill — hover: золотий fill з темно-зеленим текстом */
body.dark-mode .card-tag {
  color: var(--clr-gold-light);
  border-color: var(--clr-gold);
}
body.dark-mode .home-card:hover .card-tag {
  background: var(--clr-gold);
  color: var(--clr-forest-deep);
  border-color: var(--clr-gold);
}

/* Bullet-крапки — на темному треба більша opacity */
body.dark-mode .pub-row::before,
body.dark-mode .pub-entry::before {
  opacity: 0.75;
}
body.dark-mode .pub-row:hover::before,
body.dark-mode .pub-entry:hover::before {
  opacity: 1;
  background: var(--clr-gold-light);
}

/* Hover-колір заголовків — у темному форест зливається, використовуємо gold-light */
body.dark-mode .pub-row:hover .pub-title,
body.dark-mode .pub-entry:hover .pub-entry-title a {
  color: var(--clr-gold-light);
}

/* Pub meta — підсилюємо читабельність */
body.dark-mode .pub-journal {
  color: var(--clr-ink-soft);
}
body.dark-mode .pub-journal-name {
  color: var(--clr-ink);
}

/* Tradition timeline — крапка на темному фоні */
body.dark-mode .tradition-item::before {
  background: var(--clr-paper);
  border-color: var(--clr-gold);
}
body.dark-mode .tradition-item:hover::before {
  background: var(--clr-gold);
}
body.dark-mode .tradition-title a:hover {
  color: var(--clr-gold-light);
  border-color: var(--clr-gold);
}
body.dark-mode .tradition-intro {
  color: var(--clr-ink-soft);
}
body.dark-mode .tradition-year {
  color: var(--clr-gold-light);
}

/* Awards grid */
body.dark-mode .awards-year {
  color: var(--clr-gold-light);
  border-right-color: var(--clr-border-gold);
}

/* Membership list dash */
body.dark-mode .membership-list li::before {
  background: var(--clr-gold);
  opacity: 0.85;
}

/* Book-meta inline "—" маркер */
body.dark-mode .book-meta dt::before {
  color: var(--clr-gold);
  opacity: 0.6;
}

/* Edu-timeline — крапка має мати темний бордер (щоб "сидіти" на лінії) */
body.dark-mode .edu-timeline-item::before {
  border-color: var(--clr-paper);
  box-shadow: 0 0 0 1px var(--clr-gold);
}
body.dark-mode .edu-timeline-year time {
  color: var(--clr-gold-light);
}

/* Activity list — dark-mode: лейбл світліший, риска золота */
body.dark-mode .activity-label::before {
  background: var(--clr-gold);
  opacity: 0.85;
}

/* Qualifications — dark-mode: рік світло-золотий, посилання читабельне */
body.dark-mode .qual-year time,
body.dark-mode .qual-year--empty {
  color: var(--clr-gold-light);
}
body.dark-mode .qual-year {
  border-right-color: var(--clr-border-gold);
}
body.dark-mode .qual-link {
  color: var(--clr-gold-light);
  border-bottom-color: rgba(212, 184, 122, 0.35);
}
body.dark-mode .qual-link:hover {
  color: var(--clr-gold);
  border-bottom-color: var(--clr-gold);
}

/* Dashed dividers — у темному трохи підсилюємо */
body.dark-mode .pub-entry + .pub-entry,
body.dark-mode .tradition-item + .tradition-item {
  border-top-color: rgba(212, 184, 122, 0.12);
}

/* ── Dark mode toggle кнопка ──────────────────────────────────── */
.dark-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  border: 0.5px solid var(--clr-border-med);
  background: transparent;
  color: var(--clr-ink-soft);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.dark-toggle:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold-deep);
  background: rgba(200, 169, 110, 0.06);
}

/* Іконки: місяць і сонце */
.dark-toggle .icon-moon,
.dark-toggle .icon-sun {
  position: absolute;
  width: 14px;
  height: 14px;
  transition:
    opacity 0.25s,
    transform 0.3s var(--ease-out);
}
/* Submit button — dark mode
   Перевизначаємо CF7-правила з вищою специфічністю (body.dark-mode + .wpcf7-form).
   Покриваємо: (1) базовий стан на десктопі, (2) :hover, (3) mobile-варіант у media-query. */

body.dark-mode .wpcf7-form input[type="submit"],
body.dark-mode .contact-form-body .wpcf7-form input[type="submit"],
body.dark-mode .submit-btn {
  color: var(--clr-gold-light);
  background: transparent;
  border-color: var(--clr-gold);
}

body.dark-mode .wpcf7-form input[type="submit"]:hover,
body.dark-mode .contact-form-body .wpcf7-form input[type="submit"]:hover,
body.dark-mode .submit-btn:hover {
  background: var(--clr-gold);
  color: var(--clr-forest-deep);
  border-color: var(--clr-gold);
}

body.dark-mode .wpcf7-form input[type="submit"]:active,
body.dark-mode .contact-form-body .wpcf7-form input[type="submit"]:active {
  background: var(--clr-gold-deep);
  color: var(--clr-forest-deep);
}

body.dark-mode .wpcf7-form input[type="submit"]:disabled,
body.dark-mode .submit-btn:disabled {
  color: var(--clr-ink-muted);
  border-color: var(--clr-border-med);
  background: transparent;
}

/* Мобільний варіант (≤640px) — перекриваємо заливний стиль */
@media (max-width: 640px) {
  body.dark-mode .wpcf7-form input[type="submit"],
  body.dark-mode .contact-form-body .wpcf7-form input[type="submit"] {
    background: transparent;
    color: var(--clr-gold-light);
    border-color: var(--clr-gold);
  }
  body.dark-mode .wpcf7-form input[type="submit"]:active,
  body.dark-mode .contact-form-body .wpcf7-form input[type="submit"]:active {
    background: var(--clr-gold-deep);
    color: var(--clr-forest-deep);
  }
}

/* Світла тема: показуємо місяць (пропозиція перейти в темну) */
.dark-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.dark-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

/* Темна тема: показуємо сонце (пропозиція повернутись у світлу) */
body.dark-mode .dark-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
body.dark-mode .dark-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Підсвічування кнопки у темному режимі */
body.dark-mode .dark-toggle {
  border-color: rgba(212, 184, 122, 0.25);
  color: rgba(212, 184, 122, 0.6);
}
body.dark-mode .dark-toggle:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
  background: rgba(212, 184, 122, 0.08);
}

/* Приховуємо кнопку у print */
@media print {
  .dark-toggle {
    display: none;
  }
  body.dark-mode {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ================================================================
   VIDEO SECTION — адаптивна залежно від кількості відео
   ================================================================ */
.home-videos {
  padding-block: var(--sp-16);
  border-top: 1px solid var(--clr-border);
}

/* Загальний embed контейнер — 16:9 */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--clr-forest);
  border-radius: 2px;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── 1 відео — повна ширина ─────────────────────────────────── */
.video-single {
  max-width: 780px;
  margin-inline: auto;
}
.video-main-title,
.video-grid-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--clr-ink);
  margin-top: var(--sp-4);
  line-height: var(--lh-snug);
}

/* ── 2 відео ────────────────────────────────────────────────── */
.video-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* ── 3 відео — перше велике, два менших ────────────────────── */
.video-grid--3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-6);
}
.video-grid--3 .is-featured {
  grid-column: 1 / -1;
}

/* ── 4+ відео — головне + список мініатюр ──────────────────── */
.video-slider-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-8);
  align-items: start;
}

.video-counter {
  font-size: var(--fs-xs);
  color: var(--clr-ink-muted);
  letter-spacing: 0.1em;
  margin-top: var(--sp-2);
}

/* Список мініатюр */
.video-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 500px;
  overflow-y: auto;
  padding-right: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border-med) transparent;
}
.video-thumbs::-webkit-scrollbar {
  width: 4px;
}
.video-thumbs::-webkit-scrollbar-thumb {
  background: var(--clr-border-med);
  border-radius: 2px;
}

/* Мініатюра */
.video-thumb {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-3);
  align-items: center;
  text-align: left;
  padding: var(--sp-2);
  border: 0.5px solid var(--clr-border);
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  border-radius: 2px;
  width: 100%;
}
.video-thumb:hover {
  border-left-color: var(--clr-gold);
  background: var(--clr-warm);
}
.video-thumb.is-active {
  border-left-color: var(--clr-gold);
  background: var(--clr-surface);
}

.video-thumb-img-wrap {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.video-thumb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}
.video-thumb:hover .video-play-icon,
.video-thumb.is-active .video-play-icon {
  opacity: 1;
}

.video-thumb-title {
  font-size: var(--fs-sm);
  color: var(--clr-ink-soft);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Dark mode ──────────────────────────────────────────────── */
body.dark-mode .video-embed {
  background: var(--clr-forest-deep);
}
body.dark-mode .video-thumb:hover {
  background: var(--clr-forest-mid);
}
body.dark-mode .video-thumb.is-active {
  background: var(--clr-forest);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .video-slider-wrap {
    grid-template-columns: 1fr;
  }
  .video-grid--2,
  .video-grid--3 {
    grid-template-columns: 1fr;
  }
  .video-grid--3 .is-featured {
    grid-column: auto;
  }

  .video-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--sp-2);
    padding-right: 0;
  }
  .video-thumb {
    grid-template-columns: 1fr;
    min-width: 160px;
    max-width: 160px;
    align-items: start;
  }
  .video-thumb-img-wrap {
    aspect-ratio: 16/9;
  }
  .video-play-icon {
    opacity: 0.7;
  }
}

@media (max-width: 480px) {
  .video-thumb {
    min-width: 130px;
    max-width: 130px;
  }
}
/* ================================================================
   VIDEO SLIDER — vid-* redesigned 2026
   ================================================================ */
.home-videos {
  padding-block: var(--sp-16);
  border-top: 1px solid var(--clr-border);
}

/* Контейнер */
.vid-slider {
  position: relative;
  outline: none;
}
.vid-slider:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Доріжка: задає 16:9 висоту ────────────────────────────────── */
.vid-slider__track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: var(--clr-forest-deep);
  /* Пом'якшена тінь + тонка золота рамка */
  box-shadow:
    0 0 0 0.5px rgba(200, 169, 110, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ── Слайди ──────────────────────────────────────────────────────── */
.vid-slide {
  display: none;
  position: absolute;
  inset: 0;
}
.vid-slide.is-active {
  display: block;
  animation: vid-in 0.4s var(--ease-out) both;
}
@keyframes vid-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Facade: thumbnail + overlay ────────────────────────────────── */
.vid-facade {
  position: absolute;
  inset: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--clr-forest-deep);
}

/* Thumbnail */
.vid-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.vid-facade:hover img {
  transform: scale(1.04);
}

/* Темний градієнт знизу для читабельності — пом'якшений */
.vid-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(12, 26, 16, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Кнопка Play ────────────────────────────────────────────────── */
.vid-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

/* Кільце навколо play */
.vid-play-btn::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(21, 42, 30, 0.75);
  border: 1px solid rgba(200, 169, 110, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.3s var(--ease-out),
    background 0.3s;
}
.vid-play-btn svg {
  position: relative;
  z-index: 1;
  color: #fff;
  margin-left: 5px; /* оптичний центр трикутника */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s var(--ease-out);
}
.vid-facade:hover .vid-play-btn::before {
  transform: scale(1.12);
  background: rgba(28, 53, 40, 0.9);
  border-color: var(--clr-gold);
}
.vid-facade:hover .vid-play-btn svg {
  transform: scale(1.08);
}

/* "Дихаючий" пульс для кнопки — привертає увагу */
@keyframes vid-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(200, 169, 110, 0);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(200, 169, 110, 0.15);
  }
}
.vid-slide.is-active .vid-play-btn::before {
  animation: vid-pulse 2.8s ease-in-out infinite;
}

/* ── Iframe після кліку ──────────────────────────────────────────── */
.vid-embed-wrap {
  position: absolute;
  inset: 0;
}
.vid-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Навігаційна панель ──────────────────────────────────────────── */
.vid-slider__nav {
  display: grid;
  grid-template-columns: 44px 1fr auto 44px;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

/* ── Стрілки ────────────────────────────────────────────────────── */
.vid-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0.5px solid var(--clr-border-med);
  border-radius: 2px;
  background: transparent;
  color: var(--clr-ink-soft);
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s,
    transform 0.2s;
  flex-shrink: 0;
}
.vid-arrow:hover:not(:disabled) {
  border-color: var(--clr-gold);
  color: var(--clr-gold-deep);
  background: rgba(200, 169, 110, 0.07);
  transform: scale(1.05);
}
.vid-arrow:active:not(:disabled) {
  transform: scale(0.97);
}
.vid-arrow:disabled {
  opacity: 0.22;
  cursor: default;
}

/* ── Мета: заголовок + прогрес-бар ──────────────────────────────── */
.vid-slider__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.vid-current-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--clr-ink);
  line-height: var(--lh-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}

/* Прогрес-бари замість крапок */
.vid-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.vid-dot {
  height: 2px;
  padding: 0;
  border: none;
  border-radius: 1px;
  background: var(--clr-border-med);
  cursor: pointer;
  transition:
    width 0.35s var(--ease-out),
    background 0.35s;
  /* Рівномірна ширина — active ширший */
  flex: 1;
  max-width: 40px;
  min-width: 16px;
}
.vid-dot.is-active {
  background: var(--clr-gold);
  flex: 2;
}
.vid-dot:hover:not(.is-active) {
  background: var(--clr-ink-muted);
}

/* ── Лічильник ───────────────────────────────────────────────────── */
.vid-counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--clr-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.vid-counter__cur {
  font-size: var(--fs-xl);
  color: var(--clr-ink-soft);
  line-height: 1;
  transition: opacity 0.2s;
}
.vid-counter__sep,
.vid-counter__tot {
  font-size: var(--fs-sm);
}

/* Один слайд — просто заголовок */
.vid-single-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--clr-ink-soft);
  margin-top: var(--sp-4);
}

/* ── Dark mode ───────────────────────────────────────────────────── */
body.dark-mode .vid-slider__track {
  background: var(--clr-forest-deep);
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .vid-facade {
  background: var(--clr-forest-deep);
}
body.dark-mode .vid-play-btn::before {
  background: rgba(10, 20, 13, 0.85);
  border-color: rgba(212, 184, 122, 0.5);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .vid-slider__nav {
    grid-template-columns: 40px 1fr auto 40px;
    gap: var(--sp-3);
  }
  .vid-current-title {
    font-size: var(--fs-base);
  }
  .vid-arrow {
    width: 40px;
    height: 40px;
  }
  .vid-play-btn::before {
    width: 60px;
    height: 60px;
  }
  .vid-play-btn svg {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 480px) {
  .vid-slider__nav {
    grid-template-columns: 36px 1fr 36px;
    gap: var(--sp-4);
  }
  .vid-counter {
    display: none;
  }
  .vid-counter + .vid-arrow {
    grid-column: 3;
  }
  .vid-current-title {
    font-size: var(--fs-sm);
  }
  .vid-arrow {
    width: 36px;
    height: 36px;
  }
  .vid-play-btn::before {
    width: 52px;
    height: 52px;
  }
  .vid-play-btn svg {
    width: 32px;
    height: 32px;
  }
  .vid-slider__track {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  .vid-facade::after {
    background: linear-gradient(
      to bottom,
      transparent 70%,
      rgba(12, 26, 16, 0.25) 100%
    );
  }
}

/* ================================================================
   ═══════════════  2026 HIGH-PRIORITY FIXES  ═══════════════════
   ================================================================
   Блок із критичними для мобільного UX фіксами:
     1. @media (hover: none) — вимикає "залиплі" hover-ефекти на
        тачскрінах (iOS/Android tap → hover активується і не знімається)
     2. dvh для мобільного меню — стабільна висота на iOS Safari
        при появі/зникненні URL bar
     3. Планшетний breakpoint (768–1024px) — окрема адаптація hero
        та інших ключових секцій для iPad
     4. Touch targets — гарантуємо 44x44pt мінімум для всіх
        інтерактивних елементів на мобільному (WCAG 2.5.5 / Apple HIG)
   ================================================================ */

/* ----------------------------------------------------------------
   1. HOVER НА ТАЧСКРІНАХ — вимикаємо "залипання"
   ----------------------------------------------------------------
   Проблема: на мобільних браузерах після тапу по посиланню :hover
   активується і лишається "залипнути" поки юзер не тапне деінде.
   Це виглядає як кнопка що "підсвічена", хоч юзер вже ніде не тримає.

   Рішення: вимикаємо візуальні зміни від :hover на пристроях без
   справжньої наведення мишкою. :active (тап) продовжує працювати
   і дає миттєвий feedback на дотик. Focus-visible від клавіатури
   теж не страждає — він не залежить від hover.

   Чому НЕ правимо всі 75 правил з :hover вище: ризик великий, а
   ефект той самий. Цей один @media блок перекриває всіх.
   ---------------------------------------------------------------- */

@media (hover: none) {
  /* Знімаємо ВІЗУАЛЬНІ hover-ефекти на тачскрінах.
     Не використовуємо *:hover бо це зламає корисні ефекти які
     ставляться через JS (напр. video slider). Перелічуємо лише
     реальні артефакти "залиплого" стану після тапу. */

  /* Трансформації на hover — найчастіший видимий артефакт.
     Перелічуємо селектори які реально мають transform у :hover
     (знайдені в main.css вище). */
  .vid-arrow:hover,
  .vid-facade:hover img,
  .home-card:hover,
  .book-entry:hover,
  .blog-entry:hover,
  .pub-row:hover,
  .pub-entry:hover,
  .dark-toggle:hover {
    transform: none !important;
  }

  /* Фонові зміни на hover — частий артефакт "залиплого" стану.
     Залишаємо :active (тап) який дасть миттєвий feedback. */
  .site-logo:hover,
  .nav-list a:hover,
  .lang-btn:hover,
  .nav-toggle:hover,
  .home-card:hover,
  .pub-row:hover,
  .pub-entry:hover,
  .book-entry:hover,
  .blog-entry:hover,
  .year-nav-item:hover,
  .vid-arrow:hover,
  .vid-dot:hover {
    background: inherit;
    color: inherit;
  }

  /* Псевдоелементи з hover підкресленням (::after scaleX) —
     лишаємо їх невидимими на тач-девайсах. Фактичний індикатор
     активного пункту (aria-current) все одно працює. */
  .nav-list a:hover::after,
  .mobile-menu nav > ul a:hover::after {
    transform: scaleX(0) !important;
    opacity: 0 !important;
  }

  /* Тінь і "підйом" картки при hover — артефакт на мобільному */
  .home-card:hover,
  .book-entry:hover,
  .blog-entry:hover {
    box-shadow: none;
  }
}

/* ----------------------------------------------------------------
   2. DYNAMIC VIEWPORT UNITS (dvh) — мобільне меню
   ----------------------------------------------------------------
   Проблема: iOS Safari і Chrome показують/ховають адресний рядок
   при скролі. vh (viewport height) не враховує ці зміни — тож
   100vh = "найбільший можливий viewport". Фіксована секція в 80vh
   "стрибає" коли URL bar ховається.

   dvh (dynamic viewport height) = "поточний реальний" viewport.
   При зміні UI браузера dvh теж змінюється → немає стрибків.

   Підтримка: Chrome/Edge 108+, Safari 15.4+, Firefox 101+. Всі
   сучасні. @supports фолбек на vh для старіших.

   Додатково: svh (smallest) і lvh (largest) для граничних випадків.
   ---------------------------------------------------------------- */

@supports (height: 80dvh) {
  .mobile-menu {
    height: calc(80dvh - var(--header-h));
    max-height: calc(80dvh - var(--header-h));
  }

  @media (max-width: 480px) {
    .mobile-menu {
      height: calc(82dvh - var(--header-h));
      max-height: calc(82dvh - var(--header-h));
    }
  }
}

/* ----------------------------------------------------------------
   3. TABLET BREAKPOINT (768–1024px) — iPad portrait
   ----------------------------------------------------------------
   Ваш попередній range від 768 до 1024 "падає" в desktop стилі.
   Але на iPad portrait (768x1024) це виглядає як занадто розтягнутий
   desktop — фотозона 280px замала для такого широкого екрану,
   типографіка не оптимальна, padding'и не співмірні.

   Додаємо специфічну адаптацію для цього діапазону.
   ---------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero — фотозона трохи ширша, менший padding для контенту.
     Починаємо з 769px (а не 768) бо на 768 спрацьовує мобільний
     layout (single-column hero з горизонтальним банером фото). */
  .hero-grid {
    grid-template-columns: 1fr 320px;
    min-height: 520px;
  }
  .hero-content {
    padding: var(--sp-12) var(--sp-10) var(--sp-12) var(--sp-8);
  }

  /* Загальні контейнери — зручніші відступи для планшетів */
  .container {
    padding-inline: var(--sp-10);
  }

  /* Page-wrap — менший відступ зверху/знизу для планшета */
  .page-wrap {
    padding-block: var(--sp-12) var(--sp-16);
  }

  /* .cards-grid.three-col на 769-1024 — виглядає тісно як 3 колонки
     (мінімальна ширина картки близько 240px + paddings). Переходимо
     на 2 колонки щоб дати контенту дихати. */
  .cards-grid.three-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  /* При 2 колонках прибираємо border-right на другій картці
     (в існуючому CSS border-right використовується як роздільник
     між 3 колонками). */
  .cards-grid.three-col .home-card:nth-child(2n) {
    border-right: none;
  }

  /* Публікації — більше повітря між рядками */
  .pub-row,
  .pub-entry {
    padding-block: var(--sp-5);
  }
}

/* ----------------------------------------------------------------
   4. TOUCH TARGETS — мінімум 44x44pt на мобільному
   ----------------------------------------------------------------
   WCAG 2.5.5 (Target Size) AAA і Apple HIG вимагають мінімум
   44x44 CSS px для інтерактивних елементів на дотикових пристроях.

   На desktop cursor дозволяє точно тапнути в маленьку ціль — там
   правила менш жорсткі. Але на мобільному маленькі tap targets =
   юзер не може тапнути з першого разу = фрустрація.

   Прийом: використовуємо pointer: coarse (груба вказівка = палець),
   а не max-width (бо iPad з stylus теж хоче точні цілі, а мобільний
   з зовнішньою мишкою — ні).
   ---------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Lang switcher кнопки — основна проблема:
     зараз padding sp-1 sp-3 = ~4px × ~12px. На мобільному
     реально тапнути складно. */
  .lang-btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    /* Flex robotically центрує текст без додаткових правил */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Year nav items на сторінці публікацій */
  .year-nav-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Пагінація (стандартні WP селектори) */
  .page-numbers,
  .pagination a,
  .pagination span,
  .nav-links a,
  .nav-links span {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Академічні посилання у футері (ORCID, Scholar, ResearchGate і т.д.) —
     реально існуючий селектор у footer.php. */
  .footer-academic-links a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Slider кнопки (vid-arrow вже 44x44 на desktop — на мобільному
     у вас 40px, піднімаємо до 44). */
  .vid-arrow {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* Форми — inputs і textarea не менше 44 заввишки */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    min-height: 44px;
  }

  /* Submit кнопки */
  button[type="submit"],
  input[type="submit"],
  .wpcf7-submit {
    min-height: 48px;
    padding-inline: var(--sp-6);
  }
}

/* ================================================================
   ═══════════════  2026 MODERN ENHANCEMENTS  ═══════════════════
   ================================================================
   Нижче — код, який замінює JavaScript-анімації на нативні CSS
   фічі, доступні в усіх сучасних браузерах станом на 2026.

   Включає:
     1. View Transitions API — плавні переходи між сторінками
     2. Scroll-driven animations — fade-in і reading progress без JS
     3. text-wrap: balance для заголовків
     4. content-visibility для довгих сторінок

   Усе обгорнуто в @supports, тож у старих браузерах працює старий
   JS-фолбек (він лишається в main.js, але перевіряє чи CSS вже
   обробляє елемент і пропускає його якщо так).
   ================================================================ */

/* ----------------------------------------------------------------
   1. VIEW TRANSITIONS API — переходи між сторінками
   ----------------------------------------------------------------
   Браузер робить crossfade між старою і новою сторінкою при
   навігації в межах origin. Всього 3 рядки — плюс іменовані
   переходи для елементів, які мають "морфити" (логотип, хедер).

   Підтримка: Chrome/Edge 126+ (червень 2024), Safari 18.2 (грудень
   2024). Firefox станом на 2026 — в процесі. В непідтриманих
   браузерах просто відбувається звичайна навігація без анімації.
   ---------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

/* Іменовані переходи для елементів, які присутні на всіх сторінках.
   Вони будуть "морфити" (переноситись) між сторінками замість
   звичайного crossfade. */
.site-logo {
  view-transition-name: site-logo;
}
.site-header {
  view-transition-name: site-header;
}

/* Налаштування самої анімації переходу.
   Стандартно браузер робить 250ms crossfade — ми робимо його
   трохи швидшим і з нашим ease-out, щоб відчуття співпадало з
   рештою сайту. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-out);
}

/* Заборона переходів при prefers-reduced-motion.
   navigation: auto + duration 0 = миттєва зміна без анімації. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}

/* ----------------------------------------------------------------
   2. SCROLL-DRIVEN ANIMATIONS — fade-in при скролі
   ----------------------------------------------------------------
   Замінює IntersectionObserver у main.js. Елемент сам
   "слідкує" за своєю позицією у viewport і змінює прозорість
   відповідно. Анімація прив'язана до скролу, а не до часу.

   Підтримка: Chrome/Edge 115+ (липень 2023), Safari 26 (2025),
   Firefox 137+ (2025). В непідтриманих браузерах @supports
   перемикає логіку на JS-фолбек.
   ---------------------------------------------------------------- */

/* Вмикаємо тільки якщо браузер підтримує animation-timeline:view() */
@supports (animation-timeline: view()) {
  .pub-row,
  .pub-entry,
  .blog-entry,
  .book-entry,
  .home-card {
    /* animation-timeline: view() — анімація керується позицією
       елемента у viewport, а не часом */
    animation: aa-fade-rise linear both;
    animation-timeline: view();
    /* animation-range визначає, на якому діапазоні скролу
       відбувається анімація:
         cover 0%   — елемент тільки-но починає з'являтись знизу
         cover 30%  — елемент на 30% увійшов у viewport
       Анімація грає між цими двома точками. */
    animation-range: entry 0% cover 30%;
  }

  /* Повага до prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .pub-row,
    .pub-entry,
    .blog-entry,
    .book-entry,
    .home-card {
      animation: none;
    }
  }
}

@keyframes aa-fade-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------------
   3. SCROLL-DRIVEN ANIMATIONS — reading progress bar
   ----------------------------------------------------------------
   Замінює JS-код у main.js який слухав scroll event і рахував
   width у відсотках. Тепер це робить браузер на композиторі —
   значно плавніше, без головного потоку.

   Бар показується тільки на сторінках з .single-content
   (окремий пост або публікація). На інших сторінках його
   контейнер прихований через :not() селектор.
   ---------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
  /* Псевдоелемент на site-header — це і є бар.
     Тільки на сторінках single post / single publication. */
  body:is(.single-post, .single-publication) .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--clr-gold);
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
    z-index: 101;

    /* Анімація прив'язана до скролу всього документа */
    animation: aa-progress-bar linear;
    animation-timeline: scroll(root);
    /* За замовчуванням animation-range = 0% to 100% скролу — саме те що треба */
  }

  @keyframes aa-progress-bar {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* Якщо user просить reduced-motion — просто ховаємо бар,
     він не несе функціональної цінності. */
  @media (prefers-reduced-motion: reduce) {
    body:is(.single-post, .single-publication) .site-header::after {
      display: none;
    }
  }
}

/* ----------------------------------------------------------------
   4. text-wrap: balance — для головних заголовків
   ----------------------------------------------------------------
   У main.css рядок 114 вже є `text-wrap: pretty` для всіх h1–h6.
   Для хіро-заголовків і great-big-headings хочемо `balance` —
   він рівномірно розподіляє слова по рядках, щоб останній рядок
   не був набагато коротшим за інші (дає "візуальний центр").

   Підтримка: Chrome 114+, Safari 17.5+, Firefox 121+.
   ---------------------------------------------------------------- */

.hero-heading,
.pub-title,
.book-title,
.blog-entry h2,
.pub-entry h2 {
  text-wrap: balance;
}

/* ============================================================
   SCROLL-FOCUS — підсвічування при скролі на touch-пристроях.
   Плавніша активація (0.45s) та синхронізація з :hover-стилями.
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  /* --- Повільніші переходи на touch --- */
  .pub-entry {
    transition: border-color 0.45s var(--ease-out);
  }
  .pub-entry::before {
    transition:
      opacity 0.45s var(--ease-out),
      transform 0.45s var(--ease-out);
  }
  .pub-entry-title a {
    transition:
      color 0.45s var(--ease-out),
      transform 0.45s var(--ease-out);
  }
  .tradition-item::before {
    transition:
      background 0.45s var(--ease-out),
      transform 0.45s var(--ease-out);
  }
  .home-card {
    transition: background 0.45s var(--ease-out);
  }
  .home-card::before {
    transition: transform 0.55s var(--ease-out);
  }

  /* --- Активний стан: TRADITION TIMELINE --- */
  .tradition-item.is-in-focus::before {
    background: var(--clr-gold);
    transform: scale(1.15);
  }

  /* --- Активний стан: PUBLICATIONS --- */
  .pub-entry.is-in-focus {
    border-left-color: var(--clr-gold);
  }
  .pub-entry.is-in-focus::before {
    opacity: 1;
    transform: scale(1.25);
  }
  .pub-entry.is-in-focus .pub-entry-title a {
    transform: translateX(4px);
    color: var(--clr-forest);
  }

  /* --- Активний стан: HOME CARDS --- */
  .home-card.is-in-focus {
    background: var(--clr-warm);
  }
  .home-card.is-in-focus::before {
    transform: scaleY(1);
  }

  /* --- BLOG ENTRIES --- */
  .blog-entry {
    transition: border-color 0.45s var(--ease-out);
  }
  .blog-entry-title a {
    transition:
      color 0.45s var(--ease-out),
      transform 0.45s var(--ease-out);
  }

  /* Активний стан: BLOG ENTRIES */
  .blog-entry.is-in-focus {
    border-left-color: var(--clr-gold);
  }
  .blog-entry.is-in-focus .blog-entry-title a {
    transform: translateX(4px);
    color: var(--clr-forest);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tradition-item.is-in-focus::before,
  .pub-entry.is-in-focus,
  .pub-entry.is-in-focus::before,
  .pub-entry.is-in-focus .pub-entry-title a,
  .home-card.is-in-focus,
  .home-card.is-in-focus::before,
  .blog-entry.is-in-focus,
  .blog-entry.is-in-focus .blog-entry-title a {
    transition: none;
    transform: none;
  }
}

body.dark-mode .pub-entry.is-in-focus::before {
  opacity: 1;
  background: var(--clr-gold-light);
}

body.dark-mode .pub-entry.is-in-focus .pub-entry-title a {
  color: var(--clr-gold-light);
}

body.dark-mode .tradition-item.is-in-focus::before {
  background: var(--clr-gold);
}

body.dark-mode .home-card.is-in-focus {
  background: var(--clr-warm);
}

/* Blog entries у dark mode — заголовок має бути золотим, а не темно-зеленим.
   Це виправляє як scroll-focus на мобільному, так і :hover мишею на десктопі. */
body.dark-mode .blog-entry:hover .blog-entry-title a,
body.dark-mode .blog-entry.is-in-focus .blog-entry-title a {
  color: var(--clr-gold-light);
}

/* ============================================================
   DARK MODE — HOVER FIX
   ============================================================ */

/* Текстові посилання — світло-золотий */
body.dark-mode .site-logo:hover,
body.dark-mode .breadcrumbs a:hover,
body.dark-mode .card-title a:hover,
body.dark-mode .read-more-link:hover,
body.dark-mode .media-full-list a:hover,
body.dark-mode .book-title a:hover,
body.dark-mode .contact-email:hover,
body.dark-mode .post-navigation a:hover {
  color: var(--clr-gold-light);
}

/* Посилання-"таби" та читальні ланки з бордером — обидві властивості */
body.dark-mode .text-link:hover,
body.dark-mode .blog-read-link:hover,
body.dark-mode .isbn-link:hover {
  color: var(--clr-gold-light);
  border-color: var(--clr-gold);
}

/* Прозоре посилання в прозі — тільки border */
body.dark-mode .prose a {
  color: var(--clr-gold-light);
  border-bottom-color: rgba(212, 184, 122, 0.4);
}

body.dark-mode .prose a:hover {
  color: #fff;
  border-bottom-color: var(--clr-gold);
}

/* Outline-кнопка "Придбати" на сторінці книги */
body.dark-mode .book-buy-link {
  color: var(--clr-gold-light);
  border-color: var(--clr-gold);
}
body.dark-mode .book-buy-link:hover {
  background: var(--clr-gold);
  color: var(--clr-forest-deep);
  border-color: var(--clr-gold);
}

/* Lang switcher — текстова кнопка з легкою заливкою */
body.dark-mode .lang-btn:hover {
  color: var(--clr-gold-light);
  background: var(--clr-forest-soft);
}

/* Year nav pill — outline-кнопка фільтрації по роках */
body.dark-mode .year-nav-item:hover {
  color: var(--clr-gold-light);
  border-color: var(--clr-gold);
  background: var(--clr-forest-soft);
}

/* ── Збільшений шрифт для about-сторінки на десктопі ── */
@media (min-width: 769px) {
  .membership-list li {
    font-size: var(--fs-md);
  }

  .awards-text {
    font-size: var(--fs-md);
  }

  .awards-year {
    font-size: var(--fs-xl);
  }

  .media-full-list li {
    font-size: var(--fs-md);
  }

  .about-section p {
    font-size: var(--fs-md);
  }

  .edu-degree {
    font-size: var(--fs-2xl);
  }

  .edu-institution {
    font-size: var(--fs-base);
  }

  .edu-thesis {
    font-size: var(--fs-base);
  }

  /* Activity + Qualifications — синхронно з іншими about-секціями */
  .activity-text {
    font-size: var(--fs-md);
  }
  .qual-title {
    font-size: var(--fs-xl);
  }
  .qual-detail {
    font-size: var(--fs-base);
  }
  .qual-year time,
  .qual-year--empty {
    font-size: var(--fs-xl);
  }
}