/* ShoDe — підтримка старих браузерів.

   Файл підключається ОСТАННІМ, після style-media.css. Наявні стилі він не
   чіпає: усе лежить усередині @supports not (...), тож сучасний браузер
   пропускає цей файл цілком, навіть не розбираючи правила всередині.

   Що лагодимо і з якої версії воно вже не потрібне:

     inset, margin-inline,    Safari 14.1 (iOS 14.5), Chrome 87, Firefox 66
     padding-block,           Без них клік по картці мертвий, у .container
     gap у флексі             зникають бічні поля, а блоки злипаються.

     aspect-ratio             Safari 15, Chrome 88, Firefox 89
                              Без нього фото схлопуються у нульову висоту.

     clamp() / min() / max()  Safari 13.1, Chrome 79, Firefox 75
                              Без них летить уся плинна типографіка й сітки.

     :focus-visible           Safari 15.4, Chrome 86, Firefox 85
                              Без нього не видно фокус із клавіатури.

   Нижня межа підтримки — Safari 12 / iOS 12, Chrome 49, Firefox 31: усе,
   що вміє CSS-змінні. IE11 і Opera Mini змінних не вміють, там тема
   лишиться без кольорів і сітки. Це свідомо: підтримка IE11 означала б
   відмову від дизайн-системи на змінних.

   Блоки йдуть від новіших браузерів до старіших. Старий браузер потрапляє
   в кілька блоків одразу, тому нижні перекривають верхні — порядок блоків
   міняти не можна.

   Секції з позначкою [генеровано] зібрані скриптом із самих стилів
   (перелік флекс-контейнерів і всі clamp()), щоб не розійтись із версткою.
*/


/* ═══════════════════════════════════════════════════════════
   1. Фокус з клавіатури
   ═══════════════════════════════════════════════════════════
   У reset.css фокус описаний через :focus-visible. Старий Safari такого
   селектора не знає і викидає все правило — обведення не видно взагалі.
   Тому даємо звичайний :focus, а в сучасних браузерах гасимо його для
   кліків мишею. Браузер без :focus-visible другого правила не зрозуміє
   і лишить обведення завжди — це краще, ніж не мати його зовсім. */

:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }


/* ═══════════════════════════════════════════════════════════
   2. Немає inset / логічних властивостей / gap у флексі
   ═══════════════════════════════════════════════════════════
   Safari < 14.1, Chrome < 87, Firefox < 66 */

@supports not (inset: 0) {

  /* ── розтягнуте посилання ─────────────────────────────────
     Псевдоелемент ловить клік по всій картці. Без offsets він
     схлопується в нуль — і картка перестає клікатись зовсім. */
  .venue-card__name::after,
  .story__link::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .event-row__title::after {
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
  }

  /* ── накладки на всю площу предка ─────────────────────────── */
  .photo-tint::after,
  .hero__photo,
  .hero__scrim,
  .calendar__popwrap,
  .modal,
  .modal__backdrop {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* ── ореол ховера ─────────────────────────────────────────── */
  .event-card::before,
  .place-tile::before,
  .venue-tile::before,
  .person-tile::before,
  .near-card::before,
  .place-card::before,
  .venue-card::before,
  .pick::before,
  .story::before,
  .guest::before {
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
  }

  .event-row::before {
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
  }

  /* ── логічні властивості ──────────────────────────────────── */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .section {
    padding-top: clamp(56px, 8vw, 104px);
    padding-bottom: clamp(56px, 8vw, 104px);
  }

  .section--tight {
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 64px);
  }

  .rules,
  .stories {
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(56px, 7vw, 96px);
  }

  .rail {
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  /* ── gap у флексі [генеровано] ────────────────────────────
     Chrome 84–86 gap у флексі вже вміє, але inset ще ні, тож
     потрапляє сюди теж — обнуляємо gap, щоб не подвоївся. */

  .section-head,
  .section-head > div,
  .btn,
  .chips,
  .field,
  .searchbox,
  .event-card,
  .event-card__date,
  .event-card__body,
  .event-card__tags,
  .sticky-panel,
  .facts,
  .fact,
  .empty,
  .site-header__row,
  .site-nav,
  .city__toggle,
  .modal__head,
  .modal__body,
  .modal__actions,
  .site-footer__brand,
  .site-footer__col,
  .hero__inner,
  .hero__week,
  .front,
  .section-foot,
  .rail,
  .door,
  .picks,
  .places,
  .venues,
  .guests,
  .cities,
  .pick,
  .pick__date,
  .pick__body,
  .agenda,
  .daystrip,
  .day,
  .agenda__list,
  .day-group,
  .event-row,
  .event-row__body,
  .event-row__tags,
  .agenda__empty,
  .agenda__empty-actions,
  .agenda__more,
  .place-card,
  .venue-card,
  .venue-card__body,
  .venue-card__actions,
  .stories__inner,
  .story,
  .guests__head,
  .guest,
  .pitch__copy,
  .pitch__fields,
  .pitch__actions,
  .pitch__sent,
  .catalog,
  .catalog__head,
  .crumbs__list,
  .filters,
  .filters__row,
  .sort,
  .sort__toggle,
  .filters__active,
  .filters__tags,
  .filter-tag,
  .catalog__list,
  .empty-state,
  .empty-state__actions,
  .group,
  .group__head,
  .place-tile,
  .place-tile__body,
  .venues__list,
  .venue-tile,
  .venue-tile__body,
  .person-tile,
  .person-tile__body,
  .promo-bar__copy,
  .promo-bar__actions,
  .empty-slim,
  .cta-pair__box,
  .ics,
  .calendar__bar,
  .daycell,
  .daycell__top,
  .daycell__list,
  .daycell__item,
  .daypop__head,
  .daypop__title,
  .daypop__meta,
  .daypop__event,
  .daypop__line,
  .daypop__actions,
  .detail__lead-col,
  .detail__aside,
  .panel,
  .panel__actions,
  .share,
  .detail__body,
  .detail__prose,
  .detail__section,
  .schedule__row,
  .infobox,
  .infobox__body,
  .infobox__actions,
  .detail__similar,
  .notes__row,
  .bigdate,
  .bigdate__body,
  .place,
  .place__intro,
  .place__headline,
  .place__text,
  .place__panel,
  .place__next,
  .kv__row,
  .place__panel-actions,
  .place__events,
  .place__nearby,
  .place__map-text,
  .place__map-actions,
  .near-card,
  .near-card__body,
  .person__id,
  .route__row,
  .route__body,
  .venue__id,
  .venue__tags,
  .venue__main,
  .venue__intro,
  .venue__block,
  .venue__block-head,
  .menu__row,
  .venue-event,
  .venue-event__date,
  .venue-event__body,
  .stackfact,
  .about,
  .about__intro,
  .number,
  .about__why-text,
  .rules__inner,
  .rule,
  .about-author__text,
  .about-author__links,
  .faqs,
  .faq__q,
  .about__cta,
  .guests__rail,
  .catalog--wide,
  .filters--inline,
  .calendar,
  .panel--share,
  .timeline .notes__row,
  .venue__panel,
  .group--venues,
  .modal__sent,
  .searchbox--lg { gap: 0; }

  /* Перенос рядка фолбек не відтворює: у row-контейнерах відступ
     буде лише між сусідами всередині рядка. */
  .section-head > * + * { margin-left: 24px; }
  .section-head > div > * + * { margin-top: 12px; }
  .btn > * + * { margin-left: 10px; }
  .chips > * + * { margin-left: 10px; }
  .field > * + * { margin-top: 8px; }
  .searchbox > * + * { margin-left: 10px; }
  .event-card > * + * { margin-top: 16px; }
  .event-card__date > * + * { margin-left: 6px; }
  .event-card__body > * + * { margin-top: 10px; }
  .event-card__tags > * + * { margin-left: 10px; }
  .sticky-panel > * + * { margin-top: 18px; }
  .facts > * + * { margin-top: 14px; }
  .fact > * + * { margin-top: 4px; }
  .empty > * + * { margin-top: 16px; }
  .site-header__row > * + * { margin-left: clamp(12px, 2vw, 26px); }
  .site-nav > * + * { margin-left: clamp(12px, 1.6vw, 24px); }
  .city__toggle > * + * { margin-left: 8px; }
  .modal__head > * + * { margin-left: 18px; }
  .modal__body > * + * { margin-top: 20px; }
  .modal__actions > * + * { margin-left: 12px; }
  .site-footer__brand > * + * { margin-top: 14px; }
  .site-footer__col > * + * { margin-top: 12px; }
  .hero__inner > * + * { margin-top: 26px; }
  .hero__week > * + * { margin-left: 18px; }
  .front > * + * { margin-top: clamp(72px, 9vw, 112px); }
  .section-foot > * + * { margin-left: 18px; }
  .rail > * + * { margin-left: 26px; }
  .door > * + * { margin-top: 14px; }
  .picks > * + * { margin-top: 30px; }
  .places > * + * { margin-top: 30px; }
  .venues > * + * { margin-top: 30px; }
  .guests > * + * { margin-top: 30px; }
  .cities > * + * { margin-top: 30px; }
  .pick > * + * { margin-top: 20px; }
  .pick__date > * + * { margin-left: 10px; }
  .pick__body > * + * { margin-top: 12px; }
  .agenda > * + * { margin-top: 34px; }
  .daystrip > * + * { margin-left: 10px; }
  .day > * + * { margin-top: 6px; }
  .agenda__list > * + * { margin-top: 64px; }
  .day-group > * + * { margin-top: 4px; }
  .event-row > * + * { margin-left: clamp(16px, 3vw, 40px); }
  .event-row__body > * + * { margin-top: 10px; }
  .event-row__tags > * + * { margin-left: 10px; }
  .agenda__empty > * + * { margin-top: 28px; }
  .agenda__empty-actions > * + * { margin-left: 14px; }
  .agenda__more > * + * { margin-left: 18px; }
  .place-card > * + * { margin-top: 16px; }
  .venue-card > * + * { margin-top: 18px; }
  .venue-card__body > * + * { margin-top: 12px; }
  .venue-card__actions > * + * { margin-left: 12px; }
  .stories__inner > * + * { margin-top: 50px; }
  .story > * + * { margin-top: 20px; }
  .guests__head > * + * { margin-top: 12px; }
  .guest > * + * { margin-top: 14px; }
  .pitch__copy > * + * { margin-top: 20px; }
  .pitch__fields > * + * { margin-top: 18px; }
  .pitch__actions > * + * { margin-left: 16px; }
  .pitch__sent > * + * { margin-top: 14px; }
  .catalog > * + * { margin-top: clamp(40px, 5vw, 56px); }
  .catalog__head > * + * { margin-top: 16px; }
  .crumbs__list > * + * { margin-left: 10px; }
  .filters > * + * { margin-top: 20px; }
  .filters__row > * + * { margin-left: 10px; }
  .sort > * + * { margin-left: 12px; }
  .sort__toggle > * + * { margin-left: 16px; }
  .filters__active > * + * { margin-left: 10px; }
  .filters__tags > * + * { margin-left: 10px; }
  .filter-tag > * + * { margin-left: 9px; }
  .catalog__list > * + * { margin-top: 40px; }
  .empty-state > * + * { margin-top: 28px; }
  .empty-state__actions > * + * { margin-left: 14px; }
  .group > * + * { margin-top: 26px; }
  .group__head > * + * { margin-left: 20px; }
  .place-tile > * + * { margin-top: 16px; }
  .place-tile__body > * + * { margin-top: 9px; }
  .venues__list > * + * { margin-top: 40px; }
  .venue-tile > * + * { margin-top: 16px; }
  .venue-tile__body > * + * { margin-top: 9px; }
  .person-tile > * + * { margin-top: 16px; }
  .person-tile__body > * + * { margin-top: 9px; }
  .promo-bar__copy > * + * { margin-top: 14px; }
  .promo-bar__actions > * + * { margin-left: 14px; }
  .empty-slim > * + * { margin-top: 26px; }
  .cta-pair__box > * + * { margin-top: 20px; }
  .ics > * + * { margin-left: 18px; }
  .calendar__bar > * + * { margin-left: 14px; }
  .daycell > * + * { margin-top: 8px; }
  .daycell__top > * + * { margin-left: 6px; }
  .daycell__list > * + * { margin-top: 5px; }
  .daycell__item > * + * { margin-top: 1px; }
  .daypop__head > * + * { margin-left: 14px; }
  .daypop__title > * + * { margin-left: 14px; }
  .daypop__meta > * + * { margin-top: 4px; }
  .daypop__event > * + * { margin-top: 4px; }
  .daypop__line > * + * { margin-left: 12px; }
  .daypop__actions > * + * { margin-left: 10px; }
  .detail__lead-col > * + * { margin-top: 26px; }
  .detail__aside > * + * { margin-top: 2px; }
  .panel > * + * { margin-top: 20px; }
  .panel__actions > * + * { margin-top: 10px; }
  .share > * + * { margin-left: 10px; }
  .detail__body > * + * { margin-top: clamp(44px, 6vw, 72px); }
  .detail__prose > * + * { margin-top: 22px; }
  .detail__section > * + * { margin-top: 26px; }
  .schedule__row > * + * { margin-left: clamp(16px, 3vw, 36px); }
  .infobox > * + * { margin-top: 18px; }
  .infobox__body > * + * { margin-top: 10px; }
  .infobox__actions > * + * { margin-left: 12px; }
  .detail__similar > * + * { margin-top: 30px; }
  .notes__row > * + * { margin-left: clamp(16px, 3vw, 36px); }
  .bigdate > * + * { margin-left: clamp(16px, 3vw, 40px); }
  .bigdate__body > * + * { margin-top: 8px; }
  .place > * + * { margin-top: clamp(56px, 8vw, 128px); }
  .place__intro > * + * { margin-top: 28px; }
  .place__headline > * + * { margin-left: 28px; }
  .place__text > * + * { margin-top: 28px; }
  .place__panel > * + * { margin-top: 22px; }
  .place__next > * + * { margin-top: 8px; }
  .kv__row > * + * { margin-left: 16px; }
  .place__panel-actions > * + * { margin-top: 12px; }
  .place__events > * + * { margin-top: 32px; }
  .place__nearby > * + * { margin-top: 32px; }
  .place__map-text > * + * { margin-top: 22px; }
  .place__map-actions > * + * { margin-left: 14px; }
  .near-card > * + * { margin-top: 16px; }
  .near-card__body > * + * { margin-top: 8px; }
  .person__id > * + * { margin-top: 18px; }
  .route__row > * + * { margin-left: clamp(18px, 3vw, 40px); }
  .route__body > * + * { margin-top: 7px; }
  .venue__id > * + * { margin-top: 16px; }
  .venue__tags > * + * { margin-left: 12px; }
  .venue__main > * + * { margin-top: clamp(40px, 5vw, 64px); }
  .venue__intro > * + * { margin-top: 20px; }
  .venue__block > * + * { margin-top: 22px; }
  .venue__block-head > * + * { margin-left: 20px; }
  .menu__row > * + * { margin-left: 16px; }
  .venue-event > * + * { margin-left: clamp(16px, 3vw, 32px); }
  .venue-event__date > * + * { margin-left: 8px; }
  .venue-event__body > * + * { margin-top: 8px; }
  .stackfact > * + * { margin-top: 5px; }
  .about > * + * { margin-top: clamp(72px, 9vw, 112px); }
  .about__intro > * + * { margin-top: 26px; }
  .number > * + * { margin-top: 12px; }
  .about__why-text > * + * { margin-top: 22px; }
  .rules__inner > * + * { margin-top: 34px; }
  .rule > * + * { margin-top: 14px; }
  .about-author__text > * + * { margin-top: 20px; }
  .about-author__links > * + * { margin-left: 12px; }
  .faqs > * + * { margin-top: 30px; }
  .faq__q > * + * { margin-left: 24px; }
  .about__cta > * + * { margin-top: 24px; }
  .guests__rail > * + * { margin-left: 20px; }
  .catalog--wide > * + * { margin-top: clamp(44px, 6vw, 72px); }
  .filters--inline > * + * { margin-left: 14px; }
  .calendar > * + * { margin-top: clamp(32px, 4vw, 44px); }
  .panel--share > * + * { margin-top: 12px; }
  .timeline .notes__row > * + * { margin-left: 18px; }
  .venue__panel > * + * { margin-top: 18px; }
  .group--venues > * + * { margin-top: 24px; }
  .modal__sent > * + * { margin-top: 20px; }
  .searchbox--lg > * + * { margin-left: 12px; }
}


/* ═══════════════════════════════════════════════════════════
   3. Немає aspect-ratio
   ═══════════════════════════════════════════════════════════
   Safari < 15, Chrome < 88, Firefox < 89.
   Пропорцію тримає padding-top у відсотках від ширини контейнера,
   а картинка кладеться поверх через absolute. Усі ці блоки вже мають
   position: relative й overflow: hidden, тож додавати нічого. */

@supports not (aspect-ratio: 1 / 1) {

  .ratio-3x4,
  .ratio-4x3,
  .ratio-16x9,
  .ratio-4x5,
  .event-card__media,
  .pick__media,
  .story__media,
  .guest__media,
  .mapbox,
  .place__hero {
    position: relative;
    height: 0;
  }

  .ratio-4x3,
  .event-card__media,
  .pick__media { padding-top: 75%; }

  .ratio-3x4 { padding-top: 133.334%; }

  .ratio-16x9,
  .mapbox { padding-top: 56.25%; }

  .ratio-4x5,
  .story__media { padding-top: 125%; }

  .guest__media { padding-top: 100%; }

  .place__hero { padding-top: 43.75%; }

  /* Тут ширина власна, а не на весь контейнер: відсоток рахувався б
     від ширини рядка й дав би зовсім іншу висоту. Тому фіксуємо. */
  .event-row__media {
    width: 120px;
    height: 90px;
  }

  /* Утиліти пропорцій вішаються на різні блоки (.place-card__media,
     .venue-tile__media, .person__portrait…), тому чіпляємось до самої
     утиліти. Усередині кожної з них рівно один <img>. */
  .ratio-3x4 > img,
  .ratio-4x3 > img,
  .ratio-16x9 > img,
  .ratio-4x5 > img,
  .card__media > img,
  .event-card__media > img,
  .pick__media > img,
  .story__media > img,
  .guest__media > img,
  .event-row__media > img,
  .mapbox > img,
  .place__hero > img {
    position: absolute;
    top: 0;
    left: 0;
  }
}


/* ═══════════════════════════════════════════════════════════
   4. Немає clamp() / min() / max()
   ═══════════════════════════════════════════════════════════
   Safari < 13.1, Chrome < 79, Firefox < 75.

   Такий браузер не розуміє жодного плинного розміру: без цього блоку
   заголовки зменшились би до розміру звичайного тексту, а сітки лягли
   б в одну колонку. Беремо нижню межу clamp() як базову і вертаємо
   верхню від 1100px. Проміжних станів немає — плинність тут замінена
   двома щаблями, і це найбільше, що можна дати без вимірювання ширини.

   Тут же [генеровано] маргіни замість gap для контейнерів із плинним
   відступом: у блоці 2 вони записані через clamp(), якого цей браузер
   так само не зрозуміє.

   Порядок усередині блоку саме такий: спершу плинні розміри, потім
   маргіни, потім десктопний щабель — інакше вони перекриють одне одного. */

@supports not (font-size: clamp(1px, 1vw, 2px)) {

  :root { --text-display-xl: 40px; }
  :root { --text-display-l: 38px; }
  :root { --text-display-m: 28px; }
  :root { --text-display-s: 24px; }
  :root { --text-date-hero: 56px; }
  :root { --text-date-cell: 17px; }
  :root { --block-gap: 72px; }
  :root { --gutter: 16px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section--tight { padding-top: 40px; padding-bottom: 40px; }
  .section-title { font-size: 32px; }
  .display-l { font-size: 40px; }
  .grid { gap: 16px; }
  .grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .sticky-panel { padding: 20px; }
  .empty { padding: 36px 20px; }
  .empty__title { font-size: 24px; }
  .modal { padding: 0px 0px; }
  .modal__dialog { width: 640px; max-width: 100%; }
  .modal__head { padding: 22px 22px 0; }
  .modal__title { font-size: 26px; }
  .modal__body { padding: 20px 22px 22px; }
  .modal__pair { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .modal__pair--end { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .modal__sent { padding-top: 24px; }
  .modal__stamp { font-size: 48px; }
  .site-footer { margin-top: 72px; }
  .site-footer__row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .hero { min-height: 420px; }
  .hero__inner { padding-top: 80px; }
  .hero__inner { padding-bottom: 36px; }
  .hero__title { font-size: 56px; }
  .hero--hub .hero__title { font-size: 44px; }
  .hero__count { font-size: 34px; }
  .front { padding-top: 56px; }
  .doors { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .door { padding: 30px; }
  .door__title { font-size: 28px; }
  .picks__rail > li { width: 84vw; max-width: 520px; }
  .pick__date-d { font-size: 56px; }
  .pick__name { font-size: 22px; }
  .event-row__time { min-width: 56px; }
  .event-row__time { font-size: 18px; }
  .event-row__title { font-size: 21px; }
  .event-row__media { width: 120px; }
  .agenda__empty { padding: 48px 28px; }
  .agenda__empty-stamp { font-size: 72px; }
  .agenda__empty-line { font-size: 22px; }
  .places__grid, .venues__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .cities__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .stories { padding-top: 56px; padding-bottom: 56px; }
  .stories__rail > li { width: 84vw; max-width: 400px; }
  .story__name { font-size: 28px; }
  .guests__rail > li { width: 70vw; max-width: 260px; }
  .pitch__form { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .pitch__form { gap: 32px; }
  .pitch__form { padding: 36px; }
  .pitch__title { font-size: 28px; }
  .catalog { padding-top: 40px; }
  .catalog__title { font-size: 38px; }
  .filters { padding: 22px; }
  .catalog__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .empty-state { padding: 48px 28px; }
  .empty-state__stamp { font-size: 72px; }
  .empty-state__line { font-size: 22px; }
  .catalog--wide { padding-top: 32px; }
  .filters--inline { padding: 20px; }
  .places-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .venues-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .venues__empty { padding: 48px 28px; }
  .venues__empty .empty-state__stamp { font-size: 64px; }
  .venues__empty .empty-state__line { font-size: 21px; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
  .promo-bar { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .promo-bar { gap: 24px; }
  .promo-bar { padding: 28px; }
  .promo-bar__title { font-size: 26px; }
  .empty-slim__stamp { font-size: 40px; }
  .empty-slim__line { font-size: 20px; }
  .cta-pair { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .cta-pair__box { padding: 32px; }
  .cta-pair__title { font-size: 26px; }
  .calendar { padding-top: 32px; }
  .calendar__bar { padding: 18px; }
  .daycell { min-height: 96px; }
  .daycell { padding: 8px; }
  .daycell__num { font-size: 17px; }
  .calendar__empty { padding: 40px 28px; }
  .calendar__empty .empty-state__stamp { font-size: 64px; }
  .calendar__empty .empty-state__line { font-size: 21px; }
  .detail__crumbs { padding-top: 22px; }
  .detail__top { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .detail__top { gap: 28px; }
  .detail__top { padding-top: 18px; }
  .detail__hero { height: 320px; }
  .detail__title { margin-top: -116px; }
  .detail__title { padding: 0 20px 0 14px; }
  .detail__title { font-size: 30px; }
  .panel { padding: 22px; }
  .panel--share { padding: 18px; }
  .detail__body { padding-top: 40px; }
  .detail__pair { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .detail__pair { gap: 24px; }
  .infobox { padding: 20px; }
  .detail__similar { margin-top: 64px; }
  .bigdate__num { font-size: 38px; }
  .bigdate__title { font-size: 20px; }
  .place { padding-top: 32px; }
  .place__title { font-size: 40px; }
  .place__cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .place__cols { gap: 28px; }
  .place__h2 { font-size: 30px; }
  .place__h2--sm { font-size: 28px; }
  .place__panel { padding: 24px; }
  .place__map { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .place__map { gap: 28px; }
  .person__hero { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .person__hero { gap: 28px; }
  .person__name { font-size: 44px; }
  .person__years { font-size: 20px; }
  .route__n { font-size: 34px; }
  .route__name { font-size: 19px; }
  .venue__cols { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
  .venue__cols { gap: 32px; }
  .venue__lead { font-size: 19px; }
  .venue__h2 { font-size: 26px; }
  .venue__h2--lg { font-size: 28px; }
  .venue-event__title { font-size: 19px; }
  .venue__gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .venue__panel { padding: 22px; }
  .about { padding-top: 48px; }
  .about__title { font-size: 40px; }
  .about__lead { font-size: 19px; }
  .about__h2 { font-size: 30px; }
  .numbers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .number { padding: 26px; }
  .number__num { font-size: 38px; }
  .about__why { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .about__why { gap: 32px; }
  .rules { padding-top: 56px; padding-bottom: 56px; }
  .rules__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .about-author { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .about-author { gap: 32px; }
  .faq__q { font-size: 19px; }
  .about__cta { padding: 36px; }
  .about__cta-title { font-size: 28px; }

  /* маргіни замість плинного gap [генеровано] */
  .site-header__row > * + * { margin-left: 12px; }
  .site-nav > * + * { margin-left: 12px; }
  .front > * + * { margin-top: 72px; }
  .event-row > * + * { margin-left: 16px; }
  .catalog > * + * { margin-top: 40px; }
  .detail__body > * + * { margin-top: 44px; }
  .schedule__row > * + * { margin-left: 16px; }
  .notes__row > * + * { margin-left: 16px; }
  .bigdate > * + * { margin-left: 16px; }
  .place > * + * { margin-top: 56px; }
  .route__row > * + * { margin-left: 18px; }
  .venue__main > * + * { margin-top: 40px; }
  .venue-event > * + * { margin-left: 16px; }
  .about > * + * { margin-top: 72px; }
  .catalog--wide > * + * { margin-top: 44px; }
  .calendar > * + * { margin-top: 32px; }

  @media (min-width: 1100px) {
    :root { --text-display-xl: 80px; }
    :root { --text-display-l: 72px; }
    :root { --text-display-m: 48px; }
    :root { --text-display-s: 32px; }
    :root { --text-date-hero: 96px; }
    :root { --text-date-cell: 30px; }
    :root { --block-gap: 112px; }
    :root { --gutter: 24px; }
    .section { padding-top: 104px; padding-bottom: 104px; }
    .section--tight { padding-top: 64px; padding-bottom: 64px; }
    .section-title { font-size: 64px; }
    .display-l { font-size: 80px; }
    .grid { gap: 28px; }
    .grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .sticky-panel { padding: 28px; }
    .empty { padding: 72px 48px; }
    .empty__title { font-size: 36px; }
    .modal { padding: 56px 24px; }
    .modal__dialog { width: 640px; max-width: 100%; }
    .modal__head { padding: 32px 32px 0; }
    .modal__title { font-size: 38px; }
    .modal__body { padding: 28px 32px 32px; }
    .modal__pair { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .modal__pair--end { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .modal__sent { padding-top: 34px; }
    .modal__stamp { font-size: 88px; }
    .site-footer { margin-top: 128px; }
    .site-footer__row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .hero { min-height: 640px; }
    .hero__inner { padding-top: 140px; }
    .hero__inner { padding-bottom: 56px; }
    .hero__title { font-size: 116px; }
    .hero--hub .hero__title { font-size: 128px; }
    .hero__count { font-size: 60px; }
    .front { padding-top: 96px; }
    .doors { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .door { padding: 48px; }
    .door__title { font-size: 42px; }
    .picks__rail > li { width: 520px; }
    .pick__date-d { font-size: 76px; }
    .pick__name { font-size: 28px; }
    .event-row__time { min-width: 68px; }
    .event-row__time { font-size: 20px; }
    .event-row__title { font-size: 28px; }
    .event-row__media { width: 120px; }
    .agenda__empty { padding: 96px 72px; }
    .agenda__empty-stamp { font-size: 180px; }
    .agenda__empty-line { font-size: 34px; }
    .places__grid, .venues__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .cities__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .stories { padding-top: 96px; padding-bottom: 96px; }
    .stories__rail > li { width: 400px; }
    .story__name { font-size: 40px; }
    .guests__rail > li { width: 260px; }
    .pitch__form { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .pitch__form { gap: 72px; }
    .pitch__form { padding: 72px; }
    .pitch__title { font-size: 48px; }
    .catalog { padding-top: 72px; }
    .catalog__title { font-size: 84px; }
    .filters { padding: 32px; }
    .catalog__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .empty-state { padding: 96px 72px; }
    .empty-state__stamp { font-size: 180px; }
    .empty-state__line { font-size: 34px; }
    .catalog--wide { padding-top: 56px; }
    .filters--inline { padding: 28px; }
    .places-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .venues-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
    .venues__empty { padding: 96px 72px; }
    .venues__empty .empty-state__stamp { font-size: 148px; }
    .venues__empty .empty-state__line { font-size: 32px; }
    .people-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
    .promo-bar { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .promo-bar { gap: 48px; }
    .promo-bar { padding: 48px; }
    .promo-bar__title { font-size: 40px; }
    .empty-slim__stamp { font-size: 88px; }
    .empty-slim__line { font-size: 28px; }
    .cta-pair { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .cta-pair__box { padding: 56px; }
    .cta-pair__title { font-size: 40px; }
    .calendar { padding-top: 56px; }
    .calendar__bar { padding: 24px; }
    .daycell { min-height: 148px; }
    .daycell { padding: 13px; }
    .daycell__num { font-size: 26px; }
    .calendar__empty { padding: 72px 72px; }
    .calendar__empty .empty-state__stamp { font-size: 148px; }
    .calendar__empty .empty-state__line { font-size: 32px; }
    .detail__crumbs { padding-top: 34px; }
    .detail__top { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
    .detail__top { gap: 64px; }
    .detail__top { padding-top: 26px; }
    .detail__hero { height: 520px; }
    .detail__title { margin-top: -64px; }
    .detail__title { padding: 0 32px 0 26px; }
    .detail__title { font-size: 58px; }
    .panel { padding: 30px; }
    .panel--share { padding: 24px; }
    .detail__body { padding-top: 64px; }
    .detail__pair { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .detail__pair { gap: 40px; }
    .infobox { padding: 28px; }
    .detail__similar { margin-top: 104px; }
    .bigdate__num { font-size: 56px; }
    .bigdate__title { font-size: 26px; }
    .place { padding-top: 56px; }
    .place__title { font-size: 96px; }
    .place__cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .place__cols { gap: 80px; }
    .place__h2 { font-size: 52px; }
    .place__h2--sm { font-size: 46px; }
    .place__panel { padding: 32px; }
    .place__map { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .place__map { gap: 48px; }
    .person__hero { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .person__hero { gap: 64px; }
    .person__name { font-size: 112px; }
    .person__years { font-size: 30px; }
    .route__n { font-size: 52px; }
    .route__name { font-size: 25px; }
    .venue__cols { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
    .venue__cols { gap: 72px; }
    .venue__lead { font-size: 23px; }
    .venue__h2 { font-size: 40px; }
    .venue__h2--lg { font-size: 48px; }
    .venue-event__title { font-size: 24px; }
    .venue__gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .venue__panel { padding: 30px; }
    .about { padding-top: 96px; }
    .about__title { font-size: 104px; }
    .about__lead { font-size: 24px; }
    .about__h2 { font-size: 54px; }
    .numbers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .number { padding: 40px; }
    .number__num { font-size: 62px; }
    .about__why { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .about__why { gap: 72px; }
    .rules { padding-top: 96px; padding-bottom: 96px; }
    .rules__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .about-author { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .about-author { gap: 64px; }
    .faq__q { font-size: 24px; }
    .about__cta { padding: 64px; }
    .about__cta-title { font-size: 52px; }
    .site-header__row > * + * { margin-left: 26px; }
    .site-nav > * + * { margin-left: 24px; }
    .front > * + * { margin-top: 112px; }
    .event-row > * + * { margin-left: 40px; }
    .catalog > * + * { margin-top: 56px; }
    .detail__body > * + * { margin-top: 72px; }
    .schedule__row > * + * { margin-left: 36px; }
    .notes__row > * + * { margin-left: 36px; }
    .bigdate > * + * { margin-left: 40px; }
    .place > * + * { margin-top: 128px; }
    .route__row > * + * { margin-left: 40px; }
    .venue__main > * + * { margin-top: 64px; }
    .venue-event > * + * { margin-left: 32px; }
    .about > * + * { margin-top: 112px; }
    .catalog--wide > * + * { margin-top: 72px; }
    .calendar > * + * { margin-top: 44px; }
  }
}