/* ═══════════════════════════════════════════════════════════════
   «Знаряддя Доброго Пастуха» — стилі лендінгу. Mobile-first.
   Палітра й пропорції — з афіші 1080×1350 (.ai).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --cream: #FDF0D8;      /* фон афіші */
  --cream-2: #F6E5C6;    /* альтернативні секції */
  --navy: #182F47;       /* плашки, основний текст */
  --blue: #385670;       /* заголовок */
  --sage: #B3C7BC;       /* плашка «ДОБРОГО» */
  --tbd: #F3D27A;        /* підсвітка плейсхолдерів */
  --display: "bebas-neue-pro", "Display Fallback DIN", "Display Fallback Roboto", "Display Fallback Narrow", "Display Fallback Impact", "Display Fallback", sans-serif;
  --text: "Inter", "Inter Fallback", Arial, sans-serif;
  --gutter: 16px;
  --nav-h: 46px;         /* висота закріпленого меню */
  --rule: max(2px, calc(100vw / 216));
  /* одиниця афіші: 1 px макета 1080 → ширина екрана */
  --m: calc(100vw / 1080);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* переходи за якорями — з урахуванням закріпленого меню */
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 400 1rem/1.6 var(--text);
  overflow-wrap: break-word;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote { margin: 0; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy); color: var(--cream); padding: 8px 14px; }
.skip:focus { left: 8px; }
mark.tbd { background: var(--tbd); color: var(--navy); padding: 0 .2em; border-radius: 2px; }

/* ── Кнопки ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7em 1.6em;
  background: var(--navy); color: var(--cream);
  font: 600 1rem/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--navy);
  transition: background-color .2s, color .2s;
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn--light:hover { background: var(--sage); border-color: var(--sage); }
.btn[aria-disabled="true"] { opacity: .75; cursor: not-allowed; background: transparent; color: var(--cream); border-style: dashed; }

/* ═══ HERO (мобільна — артборд «копія 2», 1080 px = 100vw) ═══ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;            /* обрізає фото й паралакс — без горизонтальної прокрутки */
  background: var(--cream);
  padding-bottom: 0;
}
.hero__bg {
  position: absolute; inset: -40% 0 0; z-index: 0;
  /* растр афіші: темні й світлі точки зі зсувом */
  background:
    radial-gradient(circle, rgba(24, 47, 71, .16) 0 30%, transparent 34%) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 26%, transparent 30%) 3.5px 3.5px / 7px 7px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
}
.hero__photo {
  position: absolute; z-index: 2;
  /* як на афіші: фото повернуте на ~11° навколо руки */
  left: calc(452 * var(--m));
  top: calc(110 * var(--m));
  width: calc(812 * var(--m));
  rotate: 11deg;
  transform-origin: 30.6% 78.5%;
  pointer-events: none;
}
.hero__photo img {
  width: 100%; height: auto;
  /* нижній край повернутого фото ховається під плашку адреси */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 97%);
}

.hero__top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: calc(223 * var(--m));
  padding: calc(40 * var(--m)) var(--gutter) calc(40 * var(--m)) max(var(--gutter), calc(53 * var(--m)));
}
.hero__kicker {
  font-size: max(12px, calc(39 * var(--m)));
  line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
}
.hero__logos { display: flex; align-items: center; gap: calc(36 * var(--m)); flex: none; }
.hero__logos .hero__logo--vsc { width: calc(119 * var(--m)); min-width: 44px; height: auto; }
.hero__logos .hero__logo--ibs { width: calc(205 * var(--m)); min-width: 76px; height: auto; }

.bar {
  position: relative; z-index: 1;
  background: var(--navy); color: var(--cream);
}
.bar__in { display: flex; align-items: center; }
.bar--date .bar__in {
  min-height: calc(94 * var(--m));
  padding: 0 var(--gutter) 0 max(var(--gutter), calc(53 * var(--m)));
  font-size: max(18px, calc(55 * var(--m)));
  line-height: 1.1; text-transform: uppercase;
}

.hero__title {
  position: relative;        /* без z-index: плашка лежить під фото, рядки — над ним */
  margin-top: calc(100 * var(--m));
  padding-left: max(var(--gutter), calc(53 * var(--m)));
  font: 400 max(56px, calc(174 * var(--m)))/1.05 var(--display);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0;
}
.hero__line { display: block; position: relative; z-index: 3; }
.hero__wrap { display: block; }
/* плашка під «ДОБРОГО»: від лівого краю до 62% ширини (як на афіші) */
.hero__band {
  position: absolute; z-index: 1; left: 0;
  top: 1.095em; height: .985em;
  width: calc(673 * var(--m));
  background: var(--sage);
}

.hero__sub {
  position: relative; z-index: 3;
  margin-top: calc(67 * var(--m));
  width: max(56%, calc(546 * var(--m)));
  border-top: var(--rule) solid var(--navy);
  border-bottom: var(--rule) solid var(--navy);
  padding: calc(14 * var(--m)) var(--gutter) calc(14 * var(--m)) max(var(--gutter), calc(53 * var(--m)));
}
.hero__sub p {
  font-size: max(14px, calc(36 * var(--m)));
  line-height: 1.2; text-transform: uppercase;
}
.hero__cta {
  position: relative; z-index: 3;
  padding-inline: 1.2em;
  margin: calc(46 * var(--m)) 0 calc(54 * var(--m)) max(var(--gutter), calc(53 * var(--m)));
}
.bar--addr { z-index: 4; }
.bar--addr .bar__in {
  gap: calc(28 * var(--m));
  min-height: calc(124 * var(--m));
  padding: 10px var(--gutter) 10px max(var(--gutter), calc(50 * var(--m)));
  font-size: max(15px, calc(30 * var(--m)));
  line-height: 1.15;
}
.bar--addr .nowrap { display: block; }
.pin { flex: none; width: max(22px, calc(64 * var(--m))); height: auto; }

/* ── Навігація: перший елемент сторінки (над hero), закріплена під час прокрутки ── */
.nav { position: sticky; top: 0; z-index: 50; min-height: var(--nav-h); background: var(--navy); }
.nav ul {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1200px;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; padding: 14px 10px; white-space: nowrap;
  color: var(--cream); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
.nav a:hover { text-decoration: underline; }

/* Мобільне меню: бургер «Меню» у правому куті смуги + розкривний список під нею.
   Без JS (noscript у index.html) — горизонтальний рядок, як на десктопі. */
.nav__toggle {
  display: flex; align-items: center; gap: 12px;
  width: fit-content; margin-left: auto; min-height: var(--nav-h); padding: 0 var(--gutter);
  border: 0; background: none; color: var(--cream); cursor: pointer;
  font: 600 .875rem/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
}
.nav__toggle:focus-visible { outline-color: var(--sage); outline-offset: -3px; }
.nav__icon, .nav__icon::before, .nav__icon::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.nav__icon { position: relative; }
.nav__icon::before, .nav__icon::after { content: ""; position: absolute; left: 0; }
.nav__icon::before { top: -6px; }
.nav__icon::after { top: 6px; }
.nav.is-open .nav__icon { background: transparent; }
.nav.is-open .nav__icon::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 759.98px) {
  .nav ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 4px 0 12px;
    background: var(--navy); border-top: 1px solid rgba(253, 240, 216, .2);
    box-shadow: 0 12px 24px rgba(24, 47, 71, .25);
  }
  .nav.is-open ul { display: flex; }
  .nav ul a { padding: 12px var(--gutter); font-size: 1rem; }
}

/* ═══ Секції ═══ */
.section { position: relative; isolation: isolate; overflow: clip; padding: 56px 0; }
/* декоративний шар у стилі афіші: тонка лінія-розділювач угорі секції */
.section:not(.section--navy)::after {
  content: ""; position: absolute; z-index: -1; left: 0; top: 22px;
  width: min(46%, 560px); height: var(--rule); background: var(--navy);
}
/* растр — плямою праворуч в альтернативних секціях */
.section--alt::before {
  content: ""; position: absolute; z-index: -1;
  right: 0; top: -10%; width: min(70%, 760px); height: 120%;
  background:
    radial-gradient(circle, rgba(24, 47, 71, .14) 0 30%, transparent 34%) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(255, 255, 255, .5) 0 26%, transparent 30%) 3.5px 3.5px / 7px 7px;
  -webkit-mask-image: radial-gradient(closest-side at 70% 45%, #000, transparent);
          mask-image: radial-gradient(closest-side at 70% 45%, #000, transparent);
}
.section--alt { background: var(--cream-2); }
.section--navy { background: var(--navy); color: var(--cream); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* Заголовок секції — фірмова плашка, що виходить з лівого краю */
.h2 {
  position: relative; isolation: isolate;
  display: inline-block; margin-bottom: 28px;
  font: 400 clamp(2.75rem, 11vw, 4.5rem)/1.05 var(--display);
  color: var(--blue); text-transform: uppercase;
}
.h2 span { position: relative; padding-right: .3em; }
.h2 span::before {
  content: ""; position: absolute; z-index: -1;
  top: .045em; bottom: .02em; right: 0; left: -100vw;
  background: var(--sage);
}
.footer { overflow-x: clip; }
.h2--light { color: var(--navy); }
.h3 { margin: 32px 0 8px; font: 600 1.125rem/1.3 var(--text); text-transform: uppercase; letter-spacing: .04em; }
.lead { font-size: 1.1875rem; line-height: 1.5; margin-bottom: 16px; }
.note { margin: -12px 0 20px; font-size: .9375rem; opacity: .8; }
.about p + p { margin-top: 12px; }
.theme {
  border-top: var(--rule) solid var(--navy); border-bottom: var(--rule) solid var(--navy);
  padding: 10px 0; margin-bottom: 12px;
  font-size: 1.125rem; line-height: 1.3; text-transform: uppercase;
}
.about__photo { position: relative; margin: 36px auto 0; max-width: 420px; }
/* мобільний кадр (пастух) має порожній верх — обрізаємо лише його */
.about__photo img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 936 / 1290; object-fit: cover; object-position: 50% 100%; }
/* плашка-акцент за фото */
.about__photo::before {
  content: ""; position: absolute; z-index: 0;
  left: 8%; right: -8%; top: 38%; bottom: 10%;
  background: var(--sage); opacity: .55;
}

/* ── Спікери ── */
/* За промо-карткою дизайнерів: темно-синє поле з растром (.section--navy .section--raster),
   круглі фото серії на піску, ім'я в заокругленій плашці зі світлою обвідкою, підпис дрібно
   по центру. Заголовок — sage-плашка, як «ДОБРОГО ПАСТУХА» на афіші. */
.section--raster::after {                              /* растр-крапки по всьому синьому полю */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, rgba(253, 240, 216, .09) 0 28%, transparent 32%) 0 0 / 6px 6px,
    radial-gradient(circle, rgba(0, 0, 0, .18) 0 26%, transparent 30%) 3px 3px / 6px 6px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, rgba(0, 0, 0, .45));
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, rgba(0, 0, 0, .45));
}
/* flex, а не grid: неповний останній ряд стає по центру за будь-якої кількості спікерів.
   --cols — карток у ряд (2 / 3 від 760 px / 6 від 1180 px; групі можна задати своє — cols у content.js), --g — проміжок між ними */
/* групи (speakers[] у content.js; зараз одна) — окремі сітки одна під одною; data-align="start" — неповний ряд ліворуч.
   Підзаголовок (title групи в content.js) — по центру між двома тонкими лініями. */
.speakers[data-align="start"] { justify-content: flex-start; }
.speakers__group + .speakers__group { margin-top: 56px; }
.speakers__head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
  font: 400 1.75rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--sage);
}
.speakers__head::before, .speakers__head::after { content: ""; flex: 1; height: 1.5px; background: rgba(179, 199, 188, .35); }
.speakers { --cols: 2; --g: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 36px var(--g); list-style: none; padding: 0; }
.speaker { width: calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); display: flex; flex-direction: column; align-items: center; text-align: center; }
/* коло з піском і растром афіші; обрізає плашку, що відсувається, і наближення фото під час появи */
.speaker__photo {
  display: block; position: relative; overflow: clip;
  width: min(78%, 196px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(24, 47, 71, .16) 0 30%, transparent 34%) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 26%, transparent 30%) 3.5px 3.5px / 7px 7px,
    var(--cream);
}
.speaker__photo picture { display: block; }
/* фото з tools/speakers.py — вирізана фігура з прозорістю, квадрат із запасом над головою */
.speaker img, .speaker__ph { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; }
/* кадр серії (голова ≈ 2/3 висоти) у колі задалекий від макета: фото зменшене від низу,
   плечі лишаються на нижньому краї кола, над маківкою — пісок (маківка ≈ 15 % діаметра від верху) */
.speaker__photo > * { scale: .91; transform-origin: 50% 100%; }
/* без фото (Олена, заглушки) — коло-контур на синьому */
.speaker__photo:has(.speaker__ph) {
  background: rgba(253, 240, 216, .05);
  box-shadow: inset 0 0 0 1.5px rgba(253, 240, 216, .4);
}
.speaker__name {
  width: min(100%, 212px); margin-top: 14px; padding: 7px 10px 8px;
  border: 1.5px solid rgba(253, 240, 216, .8); border-radius: 14px;
  font: 600 .9375rem/1.2 var(--text); letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
/* ім'я і прізвище — окремими рядками (див. speakerName в app.js) */
.speaker__first, .speaker__last { display: block; }
.speaker__role {
  max-width: min(100%, 240px); margin-top: 10px;
  font-size: .8125rem; line-height: 1.35; color: var(--cream); opacity: .85; text-wrap: pretty;
}
.speaker__topic { max-width: min(100%, 240px); font-size: .875rem; line-height: 1.4; margin-top: 4px; font-style: italic; }

/* ── Розклад ── */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 20px; position: sticky; top: var(--nav-h); z-index: 5; background: var(--cream); padding: 6px 0; }
.tabs button {
  min-height: 48px; padding: 8px 4px;
  border: 2px solid var(--navy); background: transparent; color: var(--navy);
  font: 600 .875rem/1.15 var(--text); text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--navy); color: var(--cream); }
/* 320 px: «ЛИСТОПАДА» не влазить у третину ширини — менший кегль замість обрізаної вкладки */
@media (max-width: 359.98px) { .tabs button { font-size: .75rem; letter-spacing: 0; } }
.day__title { font: 400 2rem/1.05 var(--display); text-transform: uppercase; color: var(--blue); }
.day__host { margin: 4px 0 12px; font-size: .9375rem; }
.slots { list-style: none; padding: 0; border-top: var(--rule) solid var(--navy); }
.slot { display: grid; grid-template-columns: 5.6em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(24,47,71,.25); }
.slot__time { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 2px; }
.slot__kind { display: inline-block; margin-bottom: 4px; padding: 1px 8px; background: var(--sage); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.slot__title { font-weight: 600; line-height: 1.35; }
.slot__text { margin-top: 4px; font-size: .9375rem; line-height: 1.5; }
.slot__who { margin-top: 4px; font-size: .875rem; color: var(--blue); }
.slot--break .slot__title { font-weight: 400; }
.slot--break { color: rgba(24,47,71,.85); }
.slot--seminar { background: rgba(179,199,188,.35); padding-inline: 8px; margin-inline: -8px; }

.sem { margin-top: 10px; }
.sem summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px;
  border: 2px solid var(--navy); cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.sem summary::-webkit-details-marker { display: none; }
.sem summary::after { content: "+"; font-size: 1.25rem; line-height: 1; }
.sem[open] summary::after { content: "−"; }
.sem__grid { display: grid; gap: 16px; margin-top: 14px; }
.sem__group { background: var(--cream); padding: 14px; border-top: 4px solid var(--navy); }
.sem__head { margin-bottom: 8px; font: 400 1.5rem/1 var(--display); text-transform: uppercase; color: var(--blue); }
.sem__list { padding-left: 1.2em; }
.sem__list li + li { margin-top: 10px; }
.sem__list b { display: block; line-height: 1.35; }
.sem__list span { display: block; font-size: .875rem; line-height: 1.45; margin-top: 2px; }
.sem__list .sem__who { color: var(--blue); }
.sem__list .sem__where { font-weight: 600; }

/* в слоті розкладу: вибір людини й посилання на запис (signup.enabled) */
.sem__mine { margin-top: 8px; padding: 6px 10px; background: var(--cream); border-left: 4px solid var(--navy); font-size: .875rem; line-height: 1.4; }
.sem__go { display: inline-block; margin: 10px 14px 0 0; font-size: .875rem; font-weight: 600; }
.sem__go::after { content: " →"; }

/* ── Запис на семінари: модальне вікно <dialog id="signup"> ── */
/* Синє поле, як «Реєстрація»; форма й дні — кремові картки (палітра афіші).
   < 760 px — на весь екран; ширше — вікно по центру, прокручується всередині.
   Поки вікно відкрите, сторінка під ним не прокручується (клас is-modal на <html> — js/app.js). */
html.is-modal { overflow: hidden; }
.su-dlg {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--navy); color: var(--cream); overscroll-behavior: contain;
}
.su-dlg::backdrop { background: rgba(14, 28, 43, .72); }
.su-dlg:focus, .su-dlg__in:focus { outline: none; }          /* фокус іде на поле чи кнопку всередині */
.su [hidden] { display: none; }                               /* .su-me, .su-dlg__foot мають власний display */
.su-dlg__in { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.su-dlg__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 8px 10px var(--gutter); background: var(--navy); border-bottom: 4px solid var(--sage);
}
.su-dlg__title { font: 400 2.25rem/1 var(--display); text-transform: uppercase; color: var(--cream); padding-top: .08em; }
.su-dlg__close {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 2px solid transparent; background: none; color: var(--cream); cursor: pointer;
  font: 400 2.25rem/1 var(--text);
}
.su-dlg__close:hover { border-color: rgba(253, 240, 216, .5); }
.su-dlg__close:focus-visible { outline: 3px solid var(--sage); outline-offset: -3px; }
.su-dlg__body { padding: 18px var(--gutter) 28px; }
.su-dlg__foot { margin-top: 20px; display: flex; justify-content: flex-end; }
.su-dlg .su-card { margin-top: 20px; max-width: none; }
.su__lead { max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; }
.su__note { margin-top: 10px; font-size: .9375rem; }
.su-card, .su-slot { background: var(--cream); color: var(--navy); border-top: 4px solid var(--sage); }
.su-card { max-width: 620px; margin-top: 28px; padding: 20px var(--gutter) 22px; }
.su-card__title { font: 400 1.75rem/1 var(--display); text-transform: uppercase; color: var(--blue); }
.su-card__hint { margin: 6px 0 16px; font-size: .9375rem; line-height: 1.45; opacity: .85; }
.su-field { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.su-field > label, .su-field legend { display: block; margin-bottom: 4px; padding: 0; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.su-field input[type=tel], .su-field input[type=text] {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 2px solid var(--navy); border-radius: 0; background: #fff; color: var(--navy);
  font: 400 1.0625rem/1.3 var(--text);      /* ≥ 16px — без автозуму на iOS */
}
.su-field input[readonly] { background: transparent; border-style: dashed; }
.su-field input:focus-visible, .su-opt input:focus-visible, .su-gender input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.su-gender { display: grid; gap: 6px; }
.su-gender label, .su-opt { cursor: pointer; }
.su-gender label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 2px solid rgba(24,47,71,.3); }
.su-gender label:has(input:checked) { border-color: var(--navy); background: rgba(179,199,188,.45); }
.su-gender input, .su-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.su-msg { font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.su-msg:not(:empty) { margin-bottom: 14px; padding: 8px 12px; background: var(--tbd); }
.su-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.su-card .btn--light { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.su-card .btn--light:hover { background: var(--blue); border-color: var(--blue); }
.su-card .btn:disabled { opacity: .7; cursor: progress; }
.su-link {
  min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 .9375rem/1.2 var(--text); text-decoration: underline; text-underline-offset: .18em;
}
.su-link:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
.su-card .su-link:focus-visible { outline-color: var(--blue); }
.su-me { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.su-me__who { font-size: 1.0625rem; }
.su-me__who:focus { outline: none; }
.su-me__acts { display: flex; gap: 20px; }
.su-slots { display: grid; gap: 16px; margin-top: 16px; }
.su-slot { margin: 0; padding: 16px var(--gutter) 14px; min-width: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.su-slot__head { float: left; width: 100%; padding: 0; }   /* float: legend поводиться як звичайний блок */
.su-slot__head + * { clear: left; }
.su-slot__when { display: block; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.su-slot__name { display: block; font: 400 1.75rem/1.05 var(--display); text-transform: uppercase; color: var(--blue); }
.su-slot__dl { margin: 4px 0 12px; font-size: .875rem; line-height: 1.4; }
.su-slot.is-closed .su-slot__dl { font-weight: 600; }
.su-opts { display: grid; gap: 8px; }
.su-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid rgba(24,47,71,.25); background: #fff; }
.su-opt input { margin-top: 2px; }
.su-opt:has(input:checked), .su-opt.is-mine { border-color: var(--navy); background: rgba(179,199,188,.45); }
.su-opt.is-full { cursor: not-allowed; opacity: .6; background: transparent; border-style: dashed; }
.su-opt--none { padding-block: 8px; background: transparent; }
.su-opt__body { display: grid; gap: 2px; min-width: 0; }
.su-opt__title { line-height: 1.35; }
.su-opt__who { font-size: .875rem; line-height: 1.4; color: var(--blue); }
.su-opt__where { font-size: .875rem; line-height: 1.4; font-weight: 600; }
.su-opt__meta { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.su-slot__none { font-size: .9375rem; }
.su-slot__msg { min-height: 1.4em; margin-top: 8px; font-size: .875rem; font-weight: 600; }
.su-slot__msg.is-err { padding: 6px 10px; background: var(--tbd); }
.su-slot__msg.is-ok { color: #2F5E46; }

/* ── Місце ── */
.vbar {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; padding: 18px 0; color: var(--cream);
}
.vbar::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vw; background: var(--navy); }
.vbar .pin--big { color: var(--cream); }
.venue__card { display: grid; gap: 16px; justify-items: start; }
.venue address { font-style: normal; font-size: 1.125rem; line-height: 1.5; }
.pin--big { width: 40px; color: var(--navy); }
.venue__how { display: grid; gap: 12px; width: 100%; max-width: 760px; }
.venue__how .h3 { margin: 16px 0 0; }
.venue__routes { display: grid; gap: 10px; padding-left: 1.4em; }
.venue__routes li::marker { font-weight: 700; }
.venue__map { margin: 8px 0 4px; }
.venue__map { position: relative; }
.venue__map > img { display: block; width: 100%; height: auto; border: 2px solid var(--navy); border-radius: 4px; }
/* мініатюра фото церкви — лівий верхній кут схеми (там лише вулиці; tools/venue_map.py тримає кут вільним) */
.venue__photo {
  position: absolute; left: 1.6%; top: 2.2%; width: 26%;
  display: grid; gap: 2px; padding: 3px; border: 2px solid var(--navy); border-radius: 4px;
  background: var(--cream); color: var(--navy); text-decoration: none;
  box-shadow: 0 2px 6px rgb(24 47 71 / .28);
}
.venue__photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.venue__photo span { font-size: .5625rem; line-height: 1.15; text-align: center; }
.venue__photo:hover, .venue__photo:focus-visible { box-shadow: 0 3px 10px rgb(24 47 71 / .4); }
@media (min-width: 600px) { .venue__photo span { font-size: .6875rem; } }

/* ── Лайтбокс фото: <dialog class="lb"> (js/lightbox.js) ── */
/* Тло й хрестик — як у вікні запису (.su-dlg); фото по центру в межах екрана, підпис під ним. */
.lb {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 56px 12px 16px; border: 0;
  background: transparent; color: var(--cream); overscroll-behavior: contain;
  display: none; place-items: center;
}
.lb[open] { display: grid; }
.lb::backdrop { background: rgba(14, 28, 43, .9); }
.lb:focus { outline: none; }
.lb__close { position: fixed; top: 4px; right: 4px; }
.lb__fig { display: grid; gap: 8px; justify-items: center; margin: 0; max-width: 100%; }
.lb__img {
  display: block; width: auto; height: auto; max-width: min(100%, 1600px); max-height: calc(100vh - 110px);
  border: 3px solid var(--cream); border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  background: rgba(253, 240, 216, .08);
}
@supports (height: 100dvh) { .lb__img { max-height: calc(100dvh - 110px); } }
.lb__cap { font-size: .8125rem; opacity: .85; text-align: center; }
.lb__cap[hidden] { display: none; }
@media (min-width: 760px) {
  .lb { padding: 64px 32px 24px; }
  .lb__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb[open] .lb__fig { animation: lb-in .2s ease-out; }
  .lb[open]::backdrop { animation: lb-fade .2s ease-out; }
}
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
@keyframes lb-fade { from { opacity: 0; } }

/* ── Реєстрація ── */
.reg__list { display: grid; gap: 14px; margin-bottom: 28px; }
.reg__list dt, .contacts dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.reg__list dd, .contacts dd { font-size: 1.0625rem; }
/* довгі email / @нік без пробілів: дозволяємо колонці стиснутися й рвемо рядок, інакше на 320 px текст обрізає overflow: clip секції */
.reg__list > div, .contacts > div { min-width: 0; }
.reg__list dd, .contacts dd { overflow-wrap: anywhere; }
.section--navy .h2 span::before { background: var(--sage); }

/* ── Організатори ── */
.orgs { display: grid; gap: 28px; list-style: none; padding: 0; }
.orgs li, .orgs__link { display: flex; align-items: center; gap: 18px; }
.orgs__link { color: inherit; text-decoration: none; }
.orgs__link:hover p { text-decoration: underline; text-underline-offset: 3px; }
.orgs p span { display: block; }   /* рядки підпису — завжди окремо */
.orgs img { width: 84px; height: auto; flex: none; }
.orgs .orgs__wide { width: 160px; }
.orgs li { min-height: 84px; }   /* однакова висота рядка з підписом і без */
.orgs p { font-size: .9375rem; line-height: 1.45; }

/* ── Контакти ── */
.contacts { display: grid; gap: 14px; }

.footer { background: var(--navy); color: var(--cream); padding: 24px 0; font-size: .875rem; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* ═══ ПЛАНШЕТ / ДЕСКТОП — артборд «Монтажна область 6» (1920×1080) ═══ */
@media (min-width: 760px) {
  :root {
    --gutter: 32px;
    --nav-h: 50px;
    --u: calc(min(100vw, 1680px) / 1920);
    --rule: 3px;
  }
  /* Одиниця афіші в hero — менша з двох: за шириною (1920 → екран, не ширше 1680 px) і за
     висотою: уся композиція (≈ 1090 од. + ~60 px сталих: кнопка, мінімальні шрифти) разом із
     меню вміщується в перший екран. Нижня межа 0.42px — щоб текст лишався читабельним
     на дуже низьких вікнах (тоді hero трохи вищий за екран). Коли масштаб задає висота,
     композиція центрується (--x0), як на широких екранах. */
  .hero {
    --uh: calc((100vh - var(--nav-h) - 60px) / 1090);
    --u: min(calc(min(100vw, 1680px) / 1920), max(0.42px, var(--uh)));
    --x0: max(0px, (100% - 1920 * var(--u)) / 2);
    --pad: max(var(--gutter), calc(var(--x0) + 88 * var(--u)));
  }
  @supports (height: 100svh) { .hero { --uh: calc((100svh - var(--nav-h) - 60px) / 1090); } }
  .hero__photo {
    left: calc(var(--x0) + 955 * var(--u));
    rotate: none;
  }
  .hero__photo img { -webkit-mask-image: none; mask-image: none; }
  .bar--addr { z-index: 1; }
  .hero__photo {
    top: calc(-350 * var(--u));
    width: calc(1095 * var(--u));
  }
  .hero__top {
    justify-content: flex-start; gap: calc(64 * var(--u));
    min-height: calc(234 * var(--u));
    padding: calc(30 * var(--u)) var(--gutter) calc(30 * var(--u)) var(--pad);
  }
  .hero__kicker { font-size: max(13px, calc(36 * var(--u))); }
  .hero__logos { gap: calc(44 * var(--u)); }
  .hero__logos .hero__logo--vsc { width: calc(144 * var(--u)); }
  .hero__logos .hero__logo--ibs { width: calc(240 * var(--u)); }
  .bar--date .bar__in { min-height: calc(94 * var(--u)); padding-left: var(--pad); font-size: max(18px, calc(55 * var(--u))); }
  .hero__title {
    margin-top: calc(56 * var(--u));
    padding-left: var(--pad);
    font-size: calc(170 * var(--u));
    line-height: 1.1;
  }
  .hero__wrap { display: inline; }
  .hero__line { white-space: nowrap; }
  /* на десктопі плашка — на всю ширину рядка «ДОБРОГО ПАСТУХА» (фото лежить поверх) */
  .hero__band { width: 100%; top: 1.16em; height: 1em; }
  .hero__sub { width: auto; margin-top: calc(40 * var(--u)); border: 0; padding: 0 var(--gutter) 0 var(--pad); }
  .hero__sub p { max-width: calc(760 * var(--u)); min-width: 300px; font-size: max(15px, calc(32 * var(--u))); }
  .hero__cta { margin: calc(40 * var(--u)) 0 calc(48 * var(--u)) var(--pad); }
  .bar--addr .bar__in { min-height: calc(124 * var(--u)); padding-left: var(--pad); gap: calc(26 * var(--u)); font-size: max(15px, calc(34 * var(--u))); }
  .bar--addr .nowrap { display: inline; }
  .pin { width: max(22px, calc(62 * var(--u))); }

  .section { padding: 88px 0; }
  .h2 { font-size: clamp(3.5rem, 6vw, 5.5rem); margin-bottom: 36px; }
  /* текстова колонка ~680 px на ширині 1200: абзаци 16px — до ~80 знаків у рядку */
  .about__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) 1fr; gap: 56px; align-items: start; }
  /* Рука з посохом — нагорі колонки, на рівні заголовка, як на афіші; sticky тримає її
     в полі зору, поки гортається текст секції (межа — сама секція: колонка = висота сітки).
     Ширину обмежено висотою екрана (кадр 768×1376), щоб фото цілком влазило під меню
     навіть на 1280×720. */
  .about__photo {
    margin: 0; justify-self: center;
    max-width: min(460px, calc((100vh - var(--nav-h) - 48px) * 768 / 1376));
    position: sticky; top: calc(var(--nav-h) + 24px);
  }
  /* десктопний кадр (рука з посохом) — показуємо цілком, разом із гаком */
  .about__photo img { aspect-ratio: auto; object-fit: fill; }
  .about__photo::before { left: 18%; right: -6%; top: 30%; bottom: 14%; }
  .speakers { --cols: 3; --g: 24px; row-gap: 48px; }
  .speaker__name { font-size: 1.0625rem; border-radius: 16px; padding: 8px 12px 9px; }
  .speaker__role { font-size: .875rem; }
  .sem__grid { grid-template-columns: repeat(2, 1fr); }
  .sem__group:last-child { grid-column: 1 / -1; }
  .reg__list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .su-card { padding: 24px 28px 26px; }
  .su-gender { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-slots { gap: 20px; }
  .su-dlg {
    width: min(820px, calc(100% - 48px)); height: fit-content; max-height: calc(100% - 48px); margin: auto;
    border-top: 6px solid var(--sage); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  }
  .su-dlg__in { height: auto; max-height: calc(100vh - 54px); }
  @supports (height: 100dvh) { .su-dlg__in { max-height: calc(100dvh - 54px); } }
  .su-dlg__head { padding: 14px 16px 12px 28px; border-bottom-width: 0; }
  .su-dlg__title { font-size: 2.75rem; }
  .su-dlg__body { padding: 8px 28px 28px; }
  .su-dlg .su-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-dlg .su-opt--none { grid-column: 1 / -1; }
  .su-slot { padding: 18px 20px 16px; }
  .orgs { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: repeat(3, 1fr); }
  .nav__toggle { display: none; }
  .nav ul { justify-content: center; }
  .nav a { padding-block: 15px; line-height: 20px; }   /* 15 + 20 + 15 = --nav-h */
}

/* Широкий екран: усі три дні поруч, перемикач не потрібен */
@media (min-width: 1180px) {
  .tabs { display: none; }
  .days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .day[hidden] { display: block; }
  .slot { grid-template-columns: 1fr; gap: 2px; }
  .sem__grid { grid-template-columns: 1fr; }
  .speakers { --cols: 6; }
  /* speakers[].cols у content.js → data-cols (inline style заборонено CSP). Картка лишається
     ширини 6-колонкової сітки (кола й плашки однакові в усіх групах), а N у ряд дає ширина
     списку: N карток + (N − 1) ширших проміжків, по центру. */
  .speakers__group { container-type: inline-size; }
  .speakers[data-cols] { --w: calc((100cqw - 5 * var(--g)) / 6); --cg: calc(var(--g) * 2.5);
    column-gap: var(--cg); margin-inline: auto; max-width: calc(var(--n) * var(--w) + (var(--n) - 1) * var(--cg)); }
  .speakers[data-cols] .speaker { width: var(--w); }
  .speakers[data-cols="3"] { --n: 3; }
  .speakers[data-cols="4"] { --n: 4; }
  .speakers[data-cols="5"] { --n: 5; }
  .speakers[data-cols="6"] { --n: 6; }
}

/* ═══ АНІМАЦІЇ ПРИ ПРОКРУТЦІ — лише scroll-driven animations, лише transform/opacity ═══
   Усе всередині @supports + no-preference: без підтримки або з reduced-motion сторінка
   статична, увесь контент видимий одразу (початкові opacity: 0 — тільки тут).
   Поява завершується на «entry 100%» (елемент повністю в екрані) — тому досяжна
   навіть для останніх секцій унизу сторінки. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ── HERO: шари афіші ── */
    .hero { view-timeline: --hero block; }
    .hero__bg, .hero__photo, .hero__top, .hero__line, .hero__sub, .hero__cta {
      animation: linear both;
      animation-timeline: --hero;
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    /* фон-растр — найповільніший, фото — трохи повільніше за текст */
    .hero__bg    { animation-name: px-bg;    will-change: transform; }
    .hero__photo { animation-name: px-photo; will-change: transform; }
    .hero__top, .hero__line, .hero__sub, .hero__cta { animation-name: px-text; }
    @keyframes px-bg    { to { transform: translate3d(0, 38%, 0); } }
    @keyframes px-photo { to { transform: translate3d(0, 14%, 0); } }
    @keyframes px-text  { to { opacity: .35; } }

    /* плашки з датою й адресою */
    .bar { view-timeline: --bar block; }
    .bar__in {
      animation: slide-in linear both;
      animation-timeline: --bar;
      animation-range: entry 0% entry 100%;
    }

    /* ── Спільні ключові кадри ── */
    @keyframes slide-in { from { opacity: 0; transform: translate3d(-24px, 0, 0); } }
    @keyframes rise     { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
    @keyframes fade     { from { opacity: 0; } }
    @keyframes sweep    { from { transform: translate3d(-101%, 0, 0); } }   /* плашка виїжджає зліва */
    @keyframes unroll   { from { transform: scaleX(0); } }                  /* лінія розгортається */
    @keyframes pop      { from { opacity: 0; transform: scale(.94); } }
    @keyframes drift    { from { transform: translate3d(0, 12%, 0); } to { transform: translate3d(0, -12%, 0); } }
    @keyframes drift-sm { from { transform: translate3d(0, 24px, 0); } to { transform: translate3d(0, -24px, 0); } }
    @keyframes drift-lg { from { transform: translate3d(0, 64px, 0); } to { transform: translate3d(0, -64px, 0); } }

    /* ── Секції: декоративний шар з іншою швидкістю (глибина) ── */
    .section { view-timeline: --sec block; }
    .section--alt::before {           /* растр пливе повільніше за контент */
      animation: drift linear both;
      animation-timeline: --sec;
      animation-range: cover 0% cover 100%;
    }
    .section:not(.section--navy)::after {   /* лінія-розділювач розгортається */
      transform-origin: 0 50%;
      animation: unroll linear both;
      animation-timeline: --sec;
      animation-range: entry 0% entry 45%;
    }

    /* ── Заголовки секцій: плашка виїжджає, текст проявляється слідом ── */
    .h2 { view-timeline: --h2 block; }
    .h2 span::before {
      animation: sweep linear both;
      animation-timeline: --h2;
      animation-range: entry 0% entry 100%;
    }
    .h2 span {
      animation: slide-in linear both;
      animation-timeline: --h2;
      animation-range: entry 40% entry 100%;
    }
    /* у span анімуємо і opacity, і псевдоелемент: плашка всередині span — текст і
       плашка проявляються разом із виїздом плашки */

    /* ── Темно-сині плашки на всю ширину ── */
    .vbar { view-timeline: --vbar block; }
    .vbar::before {
      animation: sweep linear both;
      animation-timeline: --vbar;
      animation-range: entry 0% entry 100%;
    }
    .vbar > * {
      animation: slide-in linear both;
      animation-timeline: --vbar;
      animation-range: entry 50% entry 100%;
    }
    /* секція «Реєстрація»: синє поле розгортається по ширині */
    .section--navy { background: var(--cream); }
    .section--navy::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: var(--navy);
      transform-origin: 0 50%;
      animation: unroll linear both;
      animation-timeline: --sec;
      animation-range: entry 0% entry 55%;
    }
    .section--navy .wrap {
      animation: fade linear both;
      animation-timeline: --sec;
      animation-range: entry 35% entry 75%;
    }

    /* ── Картки: зсув + затримка між сусідами ── */
    .sem__group, .orgs li, .reg__list > div, .contacts > div {
      --d: 0%;
      view-timeline: --card block;
      animation: rise linear both;
      animation-timeline: --card;
      animation-range: entry var(--d) entry calc(70% + var(--d));
    }
    :is(.sem__group, .orgs li, .reg__list > div, .contacts > div):nth-child(3n+2) { --d: 12%; }
    :is(.sem__group, .orgs li, .reg__list > div, .contacts > div):nth-child(3n)   { --d: 24%; }

    /* ── Спікери: темно-синя плашка відсувається вправо й відкриває фото (воно
       ще трохи «наїжджає» з наближення), слідом виїжджає ім'я, потім підпис.
       Сусідні картки рядка — із затримкою --d. Картка (li) сама не рухається,
       тож її таймлайн стабільний. Плашка існує лише тут: без підтримки або з
       reduced-motion фото видно одразу. ── */
    .speaker { --d: 0%; view-timeline: --spk block; }
    .speaker:nth-child(2n) { --d: 14%; }                       /* мобільний: 2 в ряд */
    .speaker__photo::after {
      content: ""; position: absolute; inset: 0; z-index: 1;
      background: var(--navy);
      animation: uncover linear both;
      animation-timeline: --spk;
      animation-range: entry calc(10% + var(--d)) entry calc(60% + var(--d));
    }
    .speaker__photo > * {
      animation: zoom-out linear both;
      animation-timeline: --spk;
      animation-range: entry calc(10% + var(--d)) entry calc(75% + var(--d));
    }
    .speaker__name {
      animation: slide-in linear both;
      animation-timeline: --spk;
      animation-range: entry calc(30% + var(--d)) entry calc(70% + var(--d));
    }
    .speaker__role, .speaker__topic {
      animation: fade linear both;
      animation-timeline: --spk;
      animation-range: entry calc(45% + var(--d)) entry calc(85% + var(--d));
    }
    @media (min-width: 760px) {                                  /* 3 в ряд */
      .speaker:nth-child(3n+1) { --d: 0%; }
      .speaker:nth-child(3n+2) { --d: 8%; }
      .speaker:nth-child(3n)   { --d: 16%; }
    }
    @media (min-width: 1180px) {                                 /* 6 в ряд */
      .speaker:nth-child(6n+1) { --d: 0%; }
      .speaker:nth-child(6n+2) { --d: 3%; }
      .speaker:nth-child(6n+3) { --d: 6%; }
      .speaker:nth-child(6n+4) { --d: 9%; }
      .speaker:nth-child(6n+5) { --d: 12%; }
      .speaker:nth-child(6n)   { --d: 15%; }
      .speakers[data-cols="4"] .speaker:nth-child(4n+1) { --d: 0%; }   /* група з cols: 4 */
      .speakers[data-cols="4"] .speaker:nth-child(4n+2) { --d: 5%; }
      .speakers[data-cols="4"] .speaker:nth-child(4n+3) { --d: 10%; }
      .speakers[data-cols="4"] .speaker:nth-child(4n)   { --d: 15%; }
      .speakers[data-cols="5"] .speaker:nth-child(5n+1) { --d: 0%; }   /* група з cols: 5 */
      .speakers[data-cols="5"] .speaker:nth-child(5n+2) { --d: 4%; }
      .speakers[data-cols="5"] .speaker:nth-child(5n+3) { --d: 8%; }
      .speakers[data-cols="5"] .speaker:nth-child(5n+4) { --d: 12%; }
      .speakers[data-cols="5"] .speaker:nth-child(5n)   { --d: 16%; }
    }
    @keyframes uncover  { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(101%, 0, 0); } }
    @keyframes zoom-out { from { transform: scale(1.14); } }
    /* сам елемент — і суб'єкт таймлайну, і анімований: зсув translateY малий (28px),
       тож таймлайн не «тікає» помітно */

    /* ── Фото й лого поза hero ── */
    .about__photo img {
      animation: drift-sm linear both;
      animation-timeline: --sec;
      animation-range: cover 0% cover 100%;
    }
    .about__photo::before {           /* плашка-акцент рухається швидше за фото */
      animation: drift-lg linear both;
      animation-timeline: --sec;
      animation-range: cover 0% cover 100%;
    }
    /* Десктоп: посох «виростає» знизу — лише вертикальний зсув і проявлення на старті,
       без повороту/нахилу. Таймлайн — на нерухомій обгортці <picture>. Кінець появи —
       cover 35%: верх фото (гак) уже в екрані з запасом навіть на 1280×720.
       Поки фото нижче, його обрізає край секції (overflow: clip) — «виходить з-за краю».
       Зі sticky уживається: поява закінчується ще до прилипання (на 1280×720 і 1440×900),
       а під час прилипання прогрес таймлайну стоїть — фото лишається в кінцевому стані. */
    @media (min-width: 760px) {
      .about__photo { view-timeline: --staff block; }
      .about__photo img {
        animation: grow-up both cubic-bezier(.45, 0, .2, 1);
        animation-timeline: --staff;
        animation-range: cover 0% cover 35%;
      }
      @keyframes grow-up {
        0%   { opacity: 0; transform: translate3d(0, 38%, 0); }
        18%  { opacity: 1; }
        100% { opacity: 1; transform: translate3d(0, 0, 0); }
      }
    }
    .orgs img {
      animation: pop linear both;
      animation-timeline: --card;
      animation-range: entry 10% entry 80%;
    }

    /* Основний текст «Про конференцію» навмисно без появи: він одразу під hero
       і має читатися з першого кадру (і не давати напівпрозорого тексту на краю екрана). */

    /* ── Розклад: лише мʼяка поява рядків, без зсувів.
       Вкладки миттєві: показана панель одразу в кінцевому стані для рядків у екрані. ── */
    .day__title, .day__host, .slot {
      view-timeline: --slot block;
      animation: fade linear both;
      animation-timeline: --slot;
      animation-range: entry 0% entry 80%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}