/* Сайт Tikhonov Agency (модуль tikhonov-site, ADR-369): головна й сторінки турів. Перенесено з затвердженого
   прототипу `mocks/tikhonov-site/` репозиторію tixyshop (Ігор 2026-10-31: «Загалом, затверджено»). Одна мова на
   весь сайт: тонка лінія слайдера тримає і розклад концертів, і лайнап, і питання, усі на одній сітці; Druk лише
   на іменах (ADR-370; веб-ліцензія без обмежень, ADR-168); дата — плитка календаря, як на сторінках tix.; жовтий —
   дія, підкреслення місця й імена лайнапу. Своїх класів, що збігаються з класами фрагментів шапки й підвалу
   (.site, .plist, .foot, .paymarks), тут немає. */

@font-face { font-family: "Druk Text Wide"; font-weight: 800; font-display: block; src: url("/_site/fonts/druk-text-wide-heavy.woff2?v=4017f92444") format("woff2"); }
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Regular.woff2?v=ba054bd643") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Medium.woff2?v=a456475905") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Bold.woff2?v=2830aa2d67") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Текст сторінок трьома накресленнями: латиниця з діакритикою й кирилиця, по 40 КБ замість 0,5 МБ; ті самі файли
   й діапазон, що в магазині (public.css, там і рецепт). Кожен стоїть після повного файла своєї ваги, тож знаки
   свого діапазону бере на себе, а повний файл браузер вантажить лише за знаком поза ним. */
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Regular-text.woff2?v=869373ae3d") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0148, U+014A-017E, U+02BC, U+0400-045F, U+0490-0491, U+2009, U+2010-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+20B4, U+2116, U+2122, U+2190-2193, U+2197, U+2212;
}
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Medium-text.woff2?v=28abc79df4") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0148, U+014A-017E, U+02BC, U+0400-045F, U+0490-0491, U+2009, U+2010-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+20B4, U+2116, U+2122, U+2190-2193, U+2197, U+2212;
}
@font-face {
  font-family: "Google Sans";
  src: url("/_site/fonts/GoogleSans-Bold-text.woff2?v=875672d8b4") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0148, U+014A-017E, U+02BC, U+0400-045F, U+0490-0491, U+2009, U+2010-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+20B4, U+2116, U+2122, U+2190-2193, U+2197, U+2212;
}
:root {
  --yellow: #fab30b;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #6a6a73;
  --canvas: #f3f3f5;
  --surface: #ffffff;
  --line: rgba(24, 24, 27, 0.13);
  --on-dark: rgba(255, 255, 255, 0.86);
  --on-dark-2: rgba(255, 255, 255, 0.66);
  --graphite: #1c1c1f;
  --font: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Druk Text Wide", "Google Sans", sans-serif;
  --pad: 60px;
  --hdr: 74px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 7000ms;
  --band: 112px;
  --pause-room: 68px;
  --wrap-max: calc(1320px + 2 * var(--pad));
  --date-red: #e22e2c;
  --tile: 104px;
  color-scheme: light;
}
@media (max-width: 900px) { :root { --pad: 20px; --hdr: 64px; --band: 84px; --tile: 72px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16.5px/26px var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Сторінка туру закінчується білим рядом турів: тло під підвалом теж біле, без сірої смуги між ними */
body[data-page="tour"] { background: var(--surface); }
main a { color: inherit; }
main button { font: inherit; color: inherit; }
main img { display: block; }
main :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h2 { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; }
  .h3 { font-size: 18px; line-height: 24px; }
}

/* ══ Перший екран: варіант «Сцена», затверджений 26.10 (код — slider.html, варіант В) ══ */
.name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 96px; line-height: 0.94; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: normal; }
.say { margin: 0; font-size: 20px; line-height: 28px; color: var(--on-dark); text-wrap: pretty; }
.say > span { display: block; }
.say > span + span { margin-top: 10px; }
.act { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--yellow); text-decoration: none; white-space: nowrap; }
.act svg { width: 22px; height: 22px; flex: none; transition: transform 0.3s var(--ease); }
.act:hover svg { transform: translateX(4px); }

.hero { position: relative; height: clamp(560px, calc(100svh - var(--hdr) - 120px), 780px); color: #fff; background: #0c0c0e; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 8, 10, 0.78) 0%, rgba(8, 8, 10, 0.5) 32%, rgba(8, 8, 10, 0) 60%), linear-gradient(0deg, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0) 30%); }
.media { position: absolute; inset: 0; overflow: hidden; background: #0c0c0e; }
.media .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media img.haze { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(42px) saturate(1.2) brightness(0.55); }
/* Афіша без ролика й фото стоїть на сітці сторінки, а не на краю вікна: правий край — там, де закінчується
   лінія таймера (край сітки мінус місце паузи), по висоті — посередині смуги над лінією, де й текст.
   До 2026-10-28 стояла на 9 % від краю вікна й на 1920 виступала за лінію на ~195 px, на 2560 на ~460 */
.media img.poster { position: absolute; right: calc((100% - min(100%, var(--wrap-max))) / 2 + var(--pad) + var(--pause-room)); top: calc((100% - var(--band)) / 2); height: calc((100% - var(--band)) * 0.84 * var(--k, 1)); width: auto; translate: 0 -50%; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.45); }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.layer.is-on { opacity: 1; }
.layer .photo { transform: scale(1.035); transition: transform 1.6s var(--ease); }
.layer.is-on .photo { transform: none; }
.hero > .wrap { position: relative; z-index: 2; height: 100%; }
.c-copy-area { position: absolute; left: var(--pad); right: var(--pad); top: 0; bottom: var(--band); }
.copy { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: min(640px, 50%); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.copy.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.2s; }
.copy .act { margin-top: 6px; }
.copy .rise { display: block; max-width: 100%; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.copy .rise > * { transform: translateY(105%); transition: transform 0.75s var(--ease); }
.copy.is-on .rise > * { transform: none; transition-delay: calc(0.18s + var(--i, 0) * 70ms); }
/* Ім'я Druk у своїй смузі: хвости (у, р, g, Ç) сягають 0,26 кегля нижче рядка 0,94, наголоси (Ñ, Й, Å) 0,16 вище.
   Запас смуги — у кеглі імені (його ставить `fit` і на смугу), а не тексту сторінки: 0,24 від 16,5 px обрізало хвости.
   Ім'я стартує нижче на свій запас, щоб до виїзду його не було видно */
.copy .rise--name { padding: 0.2em 0 0.32em; margin: -0.2em 0 -0.32em; }
.copy .rise--name > * { transform: translateY(calc(100% + 0.6em)); }
.c-switch { position: absolute; left: var(--pad); right: calc(var(--pad) + var(--pause-room)); bottom: 0; height: var(--band); display: flex; align-items: stretch; gap: 36px; }
.c-switch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, 0.24); }
.c-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; }
.c-item:hover { opacity: 0.85; }
.c-item.is-on { opacity: 1; }
.c-item img { width: 40px; height: 56px; flex: none; object-fit: cover; border-radius: 4px; }
.c-item span { font-size: 16px; line-height: 21px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.c-item.is-on .prog { animation: prog var(--dur) linear forwards; }
.paused .prog, .hold .prog { animation-play-state: paused !important; }
.no-auto .prog { display: none; }
.is-video .prog { animation: none !important; transform: scaleX(var(--vp, 0)); }
@keyframes prog { to { transform: scaleX(1); } }
.pause { position: absolute; z-index: 3; right: var(--pad); bottom: 34px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(12, 12, 14, 0.42); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pause svg { width: 16px; height: 16px; }
.pause .i-play { display: none; }
.paused .pause .i-play { display: block; }
.paused .pause .i-pause { display: none; }
@media (max-width: 900px) {
  .name { font-size: 44px; }
  .say { font-size: 16px; line-height: 23px; }
  .act { font-size: 17px; line-height: 24px; }
  .hero { height: calc(100svh - var(--hdr) - 96px); min-height: 520px; max-height: 720px; }
  .scene::after { background: linear-gradient(0deg, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.66) 44%, rgba(8, 8, 10, 0) 72%); }
  .media img.poster { right: 50%; top: 32%; height: calc(52% * var(--k, 1)); translate: 50% -50%; }
  .copy { top: auto; bottom: 18px; translate: none; width: auto; right: 0; gap: 12px; }
  .c-switch { left: 0; right: 0; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad); }
  .c-switch::-webkit-scrollbar { display: none; }
  .c-switch::before { left: var(--pad); right: auto; width: calc(var(--n) * 196px + (var(--n) - 1) * 22px); }
  .c-item { flex: none; width: 196px; gap: 10px; }
  .c-item img { width: 32px; height: 45px; }
  .c-item span { font-size: 14px; line-height: 18px; }
  .pause { top: 16px; bottom: auto; width: 40px; height: 40px; }
}

/* ══ Сітка сторінки: колонка дати й три рівні колонки ══
   На ній стоять і розклад, і агенція, і питання: місто, артист і відповідь починаються з однієї вертикалі. */
.grid { display: grid; grid-template-columns: var(--tile) repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@media (min-width: 901px) and (max-width: 1180px) { .grid { gap: 0 24px; } }

/* ══ Розклад концертів рядами, як на звороті гастрольної афіші (головна й сторінка туру) ══
   Дата — плитка календаря, та сама, що на сторінках артиста й концерту на tix. (червоний місяць, число,
   день тижня й час); плитка біла, тож розклад стоїть на сірому полотні, як там. Ім'я артиста — Druk лише
   на комп'ютері, назва шоу під ним сірим; місто й ціна одним головним стилем, решта одним сірим.
   Увесь рядок — посилання; стрілка в кінці стає жовтою під вказівником, біля вказівника — афіша концерту. */
.sched { background: var(--canvas); padding: 104px 0; }
.sched__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 40px; }
.where { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.where__name { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.15em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; transition: text-decoration-thickness 0.2s; }
.where__end { white-space: nowrap; }
.where svg { display: inline-block; width: 0.56em; height: 0.56em; margin-left: 0.14em; vertical-align: middle; }
.where:hover .where__name { text-decoration-thickness: 0.26em; }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.more svg { width: 18px; height: 18px; flex: none; transition: translate 0.35s var(--ease); }
.more:hover svg { translate: 3px 0; }
.sched__more { margin-top: 32px; }

.gigs { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.gigs > li { border-bottom: 1px solid var(--line); }
.gigs > .gigs__err { padding: 20px 0; color: var(--ink-2); font-size: 17px; line-height: 26px; }
.gigs > .gigs__gap { padding: 44px 0 12px; border-bottom: 1.5px solid var(--ink); font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.gig { align-items: center; padding: 16px 0; color: var(--ink); text-decoration: none; }
.tile { width: var(--tile); display: flex; flex-direction: column; align-items: center; padding: 6px 0 8px; border-radius: 8px; background: var(--surface); text-align: center; transition: background-color 0.15s ease; }
.tile__m { font-size: 14px; line-height: 19.6px; font-weight: 500; color: var(--date-red); transition: color 0.15s ease; }
.tile__d { font-size: 36px; line-height: 37.4px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile__wd { font-size: 13px; line-height: 18px; color: var(--ink-3); white-space: nowrap; transition: color 0.15s ease; }
.gig__cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gig__main { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
/* Ім'я Druk: кегль сталий, бо ім'я в колонці може стати у два рядки, слово не рветься (заміри 1180–1920);
   рядок 1.16 тримає хвости (у, р) і наголоси (Ñ) без обрізання */
.gig__artist { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.16; letter-spacing: -0.005em; overflow-wrap: normal; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; text-decoration-skip-ink: none; transition: text-decoration-color 0.15s ease; }
.gig__note { font-size: 15px; line-height: 21px; color: var(--ink-2); }
.gig__buy { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.gig__buy .gig__cell { align-items: flex-end; text-align: right; }
.gig__go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); transition: background-color 0.2s; }
.gig__go svg { width: 20px; height: 20px; transition: translate 0.35s var(--ease); }
.gig__m, .gig__chev { display: none; }
/* Рядок під вказівником видно там, куди дивиться око: плитка дати жовта, ім'я артиста підкреслене жовтим,
   стрілка в кінці — жовте коло. Той самий жовтий, що в дії слайдера й підкресленні місця */
@media (hover: hover) {
  .gig:hover .tile { background: var(--yellow); }
  .gig:hover :is(.tile__m, .tile__wd) { color: var(--ink); }
  .gig:hover .gig__artist { text-decoration-color: var(--yellow); }
  .gig:hover .gig__go { background: var(--yellow); }
  .gig:hover .gig__go svg { translate: 2px 0; }
}
.gig:focus-visible { outline-offset: 6px; }
@media (max-width: 900px) {
  .sched { padding: 64px 0; }
  .sched__head { padding-bottom: 24px; }
  .sched__head .more { display: none; }
  .sched__more { margin-top: 24px; }
  /* Телефон: плитка дати ліворуч, праворуч місто, артист Google Sans і один сірий рядок «майданчик · ціна» */
  .gig { grid-template-columns: var(--tile) minmax(0, 1fr) 16px; align-items: start; gap: 0 14px; padding: 14px 0 16px; }
  .tile { padding: 5px 0 6px; }
  .tile__m { font-size: 12px; line-height: 16px; }
  .tile__d { font-size: 26px; line-height: 28px; }
  .tile__wd { font-size: 11.5px; line-height: 15px; }
  .gig > .gig__cell, .gig__buy { display: none; }
  .gig__m { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
  .gig__main { font-size: 17px; line-height: 22px; }
  .gig__note { font-size: 14px; line-height: 20px; }
  .gig__m .gig__note:first-of-type { margin-top: 2px; }
  .gig__km { margin-left: 6px; font-weight: 400; letter-spacing: 0; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
  .gig__chev { display: block; align-self: center; width: 16px; height: 16px; color: var(--ink-3); }
}

/* ══ Афіша концерту біля вказівника (лише миша, комп'ютер; приклад Ігоря — «Новые проекты» krisanfalova.ru) ══
   Картка стоїть під рядком, на який вказують (біля низу вікна над ним), і з легкою затримкою йде за вказівником
   праворуч від нього (біля правого краю ліворуч): рядок із ціною лишається відкритим. На сусідньому рядку афіша
   міняється в тій самій картці проявленням, без руху всередині: картка й так їде за вказівником, і другий рух
   у ній Ігор прочитав як збій (28.10). Поза списком картка зникає. Тач і вузьке вікно картки не мають.
   Висота картки не більша за половину вікна без шапки й рядка: місце знайдеться під рядком чи над ним. */
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: min(clamp(200px, 16vw, 260px), calc((100vh - var(--hdr) - 200px) * 0.354)); aspect-ratio: 600 / 848; pointer-events: none; will-change: transform; }
.peek__in { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: var(--graphite); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 24px 56px rgba(0, 0, 0, 0.26); opacity: 0; transition: opacity 0.2s ease; }
.peek.is-on .peek__in { opacity: 1; }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; transition: opacity 0s linear 0.22s; }
.peek img.is-on { z-index: 1; opacity: 1; transition: opacity 0.22s ease; }
@media (hover: none), (pointer: coarse), (max-width: 900px) { .peek { display: none; } }

/* ══ Тури: афіша кожного туру, під нею назва й «скільки міст, коли»; веде на сторінку туру ══
   Біле тло: зміна змісту з розкладу на тури. На телефоні ряд гортається пальцем. */
.tours { background: var(--surface); padding: 104px 0; }
.trow { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 48px 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.tcard { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.tcard img { width: 100%; aspect-ratio: 848 / 1200; object-fit: cover; margin-bottom: 14px; border-radius: 6px; background: var(--graphite); transition: translate 0.35s var(--ease); }
.tcard__name { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.tcard__name span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.15em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s; }
.tcard__note { font-size: 15px; line-height: 21px; color: var(--ink-2); }
@media (hover: hover) {
  .tcard:hover img { translate: 0 -4px; }
  .tcard:hover .tcard__name span { text-decoration-color: var(--yellow); }
}
@media (max-width: 900px) {
  .tours { padding: 64px 0; }
  .trow { display: flex; gap: 14px; margin: 24px calc(-1 * var(--pad)) 0; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .trow::-webkit-scrollbar { display: none; }
  .trow > li { flex: none; width: 58vw; max-width: 260px; scroll-snap-align: start; }
  .tcard img { margin-bottom: 10px; }
  .tcard__name { font-size: 17px; line-height: 22px; }
  .tcard__note { font-size: 14px; line-height: 20px; }
}

/* ══ Сторінка туру, четверте коло (30.10): будова сторінки артиста tix. (ADR-161, ADR-170), дзеркально ══
   Ігор: «що заважало взяти готову сутність сторінки артиста і адаптувати її під тур?», тоді «опис і мапу
   ставити справа, дати і міста стають зліва від мапи. В мобільному вона може йти окремим блоком». Одна сітка
   8 : 4 на смугу й зміст: смуга (розмита афіша) — перший рядок, концерти — другий, права колонка тягнеться
   через обидва (рядки auto · 1fr: висота колонки йде в гнучкий рядок, смугу вона не розтягує), тож афіша
   стоїть від верху смуги й заходить нижче, як картка опису на сторінці артиста. Значення списку концертів —
   стилі сторінки артиста (public.css), заокруглення — тема Тихонова («пігулка», картки 20). Під вказівником
   рядок мовою головної Тихонова: плитка дати жовта, місто підкреслене жовтим, тло не фарбується. */
.tl-sec { --side-gap: 56px; --r-card: 20px; --elev: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08); background: var(--canvas); overflow-x: clip; }
.tl { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto 1fr; column-gap: var(--side-gap); padding-bottom: 112px; }
/* Тло смуги — афіша туру, розмита й затемнена (слово Ігоря 30.10), на всю ширину вікна; під текстом темніше */
.tl__bg { grid-row: 1; grid-column: 1 / -1; position: relative; z-index: 0; margin-inline: calc(50% - 50vw); overflow: hidden; background: #0c0c0e; }
.tl__bg img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(56px) saturate(1.1) brightness(0.5); }
.tl__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0.2)); }

.tb { grid-row: 1; grid-column: 1; position: relative; z-index: 1; align-self: center; padding: 48px 0 56px; color: #fff; }
.tb__back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 21px; color: var(--on-dark-2); text-decoration: none; transition: color 0.15s; }
.tb__back svg { width: 16px; height: 16px; flex: none; transition: translate 0.35s var(--ease); }
.tnear, .tnear[hidden] { display: none; }
.tb__back:hover { color: #fff; }
.tb__back:hover svg { translate: -3px 0; }
/* Назва Druk: кегль ролі імені артиста на Druk (88, ADR-370) і не менший за 44; довга назва — до трьох рядків */
.tb__name { margin: 20px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5.8vw, 88px); line-height: 1; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: normal; }
.tb__show { margin: 20px 0 0; max-width: 640px; font-size: 20px; line-height: 28px; color: var(--on-dark); text-wrap: pretty; }
.tb__meta { margin: 6px 0 0; font-size: 20px; line-height: 28px; color: #fff; }
.tb__meta b { font-weight: 700; }
/* Концерт поруч із людиною — жовта дія смуги: веде просто на концерт */
.tb__near { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 28px; padding: 10px 20px 10px 16px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 500; text-decoration: none; transition: background-color 0.15s; }
.tb__near svg { flex: none; width: 20px; height: 20px; }
.tb__near > svg:last-child { width: 18px; height: 18px; transition: translate 0.35s var(--ease); }
.tb__near:hover { background: #fbc546; }
.tb__near:hover > svg:last-child { translate: 3px 0; }
.tb__km { font-weight: 400; }

/* Права колонка: афіша від верху смуги, під нею опис і мапа */
.tside { grid-row: 1 / 3; grid-column: 2; position: relative; z-index: 1; padding-top: 48px; }
/* Афіша у вертикальній рамці 848 × 1200 на ній самій, розмитій: вертикальна афіша займає рамку цілком,
   ширша стоїть посередині, і колонка однакова на всіх турах */
.tart { position: relative; overflow: hidden; aspect-ratio: 848 / 1200; border-radius: var(--r-card); background: #0c0c0e; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.24); }
/* Safari малює розмиту копію й афішу окремими шарами, і заокруглення рамки (overflow: hidden) до них не доходить: кути
   на кілька секунд «стрибають», тоді лишаються прямими. Тож кожен шар обрізано власною формою рамки (копія більша за
   рамку на 12% з кожного боку: 12 / 124 її розміру) */
.tart__haze { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(40px) brightness(0.55); clip-path: inset(calc(100% * 12 / 124) round var(--r-card)); }
.tart__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.tside__h { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
/* Опис: картка опису артиста — без заголовка, сім рядків і «Читати далі», перший абзац крупніше */
.tabout { margin-top: 24px; padding: 28px 28px 24px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev); }
.tabout .tside__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabout__text p { margin: 0; font-size: 16.5px; line-height: 26px; color: var(--ink-2); text-wrap: pretty; }
.tabout__text p:first-child { font-size: 20px; line-height: 30px; letter-spacing: -0.01em; color: var(--ink); }
.tabout__text p + p { margin-top: 14px; }
.tabout__text blockquote { margin: 20px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--yellow); }
.tabout__text blockquote p, .tabout__text blockquote p:first-child { font-size: 18px; line-height: 27px; color: var(--ink); }
.tabout__text cite { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; font-style: normal; color: var(--ink-2); }
.tabout:not(.is-open) .tabout__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.tabout__more { margin-top: 8px; padding: 0; border: 0; background: none; font: 500 15px/21px var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tabout__more[hidden] { display: none; }

/* Мапа маршруту: картка під описом; білий суходіл на сірому морі, як мапа головної Вечорниць */
/* Мапа липне під шапкою, поки гортається довгий список: рядок і його місто видно разом */
.tmap { position: sticky; top: calc(var(--hdr) + 24px); margin-top: 24px; padding: 22px 22px 18px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev); }
.tmap[hidden] { display: none; }
.map__view { position: relative; aspect-ratio: 1 / 1; margin-top: 14px; }
.map__sea { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--canvas); }
.map__sea svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__land { fill: #fff; stroke: #d9d9de; stroke-width: 0.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map__line--past { stroke: #b4b4bc; stroke-width: 1.5; }
.map__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.map__key[hidden] { display: none; }
.map__key li { display: flex; align-items: center; gap: 8px; }
.key { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.key--past { background: #a1a1aa; }
.key--near { width: 12px; height: 12px; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; color: var(--ink); text-decoration: none; }
.pin::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; transition: scale 0.15s ease, background-color 0.15s ease; }
.pin--past { z-index: 0; }
.pin--past::before { width: 7px; height: 7px; background: #a1a1aa; }
.pin--near { z-index: 2; }
.pin--near::before { width: 13px; height: 13px; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.pin__tip { position: absolute; left: 50%; bottom: calc(100% - 2px); translate: -50% 0; padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.14); font-size: 13.5px; line-height: 19px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.pin__tip b { font-weight: 500; }
.pin--l .pin__tip { left: 2px; translate: 0 0; }
.pin--r .pin__tip { left: auto; right: 2px; translate: 0 0; }
.pin--near .pin__tip { opacity: 1; }
.pin:hover, .pin:focus-visible, .pin.is-hot { z-index: 3; }
.pin:hover .pin__tip, .pin:focus-visible .pin__tip, .pin.is-hot .pin__tip { opacity: 1; }
a.pin:hover::before, .pin.is-hot::before { scale: 1.35; }
a.pin.is-hot:not(.pin--near)::before { background: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--yellow); }
/* Поки світиться інше місто, постійний підпис концерту поруч ховається, щоб не лягати поверх */
.map__view:has(.pin:not(.pin--near):is(:hover, .is-hot)) .pin--near .pin__tip { opacity: 0; }

/* Концерти: перелік сторінки артиста (ArtistConcerts) — вкладки місяців, пошук міста, біла панель рядків */
.tc { grid-row: 2; grid-column: 1; padding-top: 48px; min-width: 0; }
.tc__h { margin: 0; padding-bottom: 24px; font-size: 36px; line-height: 37.4px; font-weight: 500; letter-spacing: -0.03em; }
.arT { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; }
.arT[hidden] { display: none; }
.arSeg { display: flex; flex-wrap: wrap; gap: 6px; }
.arSeg__b { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px/15px var(--font); cursor: pointer; transition: background-color 0.15s; }
.arSeg__b:hover { background: #e9e9ec; }
.arSeg__n { color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.arSeg__b.is-on { background: var(--ink); color: #fff; }
.arSeg__b.is-on .arSeg__n { color: inherit; opacity: 0.8; }
.arFind { order: 2; display: flex; align-items: center; gap: 10px; width: 240px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--ink-3); }
.arFind svg { width: 16px; height: 16px; flex: none; }
.arFind:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.arFind input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 15px/20px var(--font); color: var(--ink); }
.arFind input::placeholder { color: var(--ink-3); }
.arFind input::-webkit-search-cancel-button { display: none; }
.arL { margin: 0; padding: 8px; list-style: none; background: var(--surface); border-radius: var(--r-card); }
.arL li { position: relative; }
.arL li[hidden] { display: none; }
.arL li + li::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; background: var(--line); }
.arRow { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.arRow .tile { --tile: 104px; flex: none; }
.arRow__where { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arRow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.arRow__city { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease; }
.arRow__near { padding: 1px 10px; border-radius: 999px; background: var(--yellow); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.arRow__venue { font-size: 15px; line-height: 21px; color: var(--ink-3); }
.arRow__pm { display: none; }
.arRow__price { flex: none; font-size: 17px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.arRow .gig__chev { display: block; flex: none; width: 16px; height: 16px; color: var(--ink-3); transition: translate 0.35s var(--ease); }
@media (hover: hover) {
  .arRow:hover .tile, .arRow.is-hot .tile { background: var(--yellow); }
  .arRow:hover :is(.tile__m, .tile__wd), .arRow.is-hot :is(.tile__m, .tile__wd) { color: var(--ink); }
  .arRow:hover .arRow__city, .arRow.is-hot .arRow__city { text-decoration-color: var(--yellow); }
  .arRow:hover .gig__chev { translate: 3px 0; color: var(--ink); }
}
.arRow .tile { background: var(--canvas); }
.arL__none { margin: 0; padding: 20px 24px; border-radius: var(--r-card); background: var(--surface); font-size: 15px; line-height: 21px; color: var(--ink-2); }
.arL__none[hidden] { display: none; }
.played { margin-top: 12px; }
.played__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; border: 0; background: none; color: var(--ink-2); font: 500 17px/24px var(--font); cursor: pointer; }
.played__btn:hover { color: var(--ink); }
.played__btn svg { width: 16px; height: 16px; transition: rotate 0.2s ease; }
.played.is-open .played__btn svg { rotate: 180deg; }
.played__list { display: none; margin: 8px 0 0; padding: 0; list-style: none; columns: 4; column-gap: 32px; }
.played.is-open .played__list { display: block; }
.played__list li { display: flex; gap: 14px; padding: 5px 0; break-inside: avoid; font-size: 16px; line-height: 22px; color: var(--ink-2); }
.played__d { flex: none; width: 46px; font-variant-numeric: tabular-nums; color: var(--ink-3); }

@media (min-width: 901px) and (max-width: 1180px) {
  .tl-sec { --side-gap: 40px; }
  .arRow { gap: 16px; padding: 12px; }
  .arRow .tile { --tile: 88px; }
  .arRow__city { font-size: 18px; line-height: 22px; }
  .arFind { width: 200px; }
  .played__list { columns: 3; }
  .tabout { padding: 22px 22px 20px; }
  .tabout__text p:first-child { font-size: 18px; line-height: 27px; }
}
@media (max-width: 900px) {
  /* Телефон — конвенція сторінок події й артиста tix.: зображення займає перший екран від краю до краю,
     низ тоне в темному, назва лежить на цьому переході, картка концерту поруч заходить на край, як картка
     дати сторінки події, — один цільний предмет (Ігор 30.10). Колонка розпадається (display: contents):
     афіша, назва, картка поруч, концерти, тоді «Про шоу» й «Маршрут» окремими блоками. Рамка — у пропорціях
     самої афіші (--ar-phone ставить скрипт), вертикальна обрізається знизу до 4 : 5, щоб назва лишалась на
     першому екрані й на 360 × 640. Наїзд назви й затухання рахуються від висоти рамки (20 %, не більше
     120 px): назва лягає лише туди, де від афіші лишився слід, а не на її текст */
  .tl { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 64px; }
  .tside { display: contents; }
  .tl__bg { grid-row: 1 / 3; }
  .tl__bg::after { background: linear-gradient(180deg, rgba(10, 10, 12, 0.15), rgba(10, 10, 12, 0.6)); }
  .tart { grid-row: 1; grid-column: 1; z-index: 0; margin-inline: calc(-1 * var(--pad)); aspect-ratio: var(--ar-phone, 0.8); border-radius: 0; background: none; box-shadow: none; }
  .tart__haze { display: none; }
  .tl { --lap: min(120px, 100vw / var(--ar-phone, 0.8) * 0.2); }
  .tart__img { object-fit: cover; object-position: 50% 0; --fade: linear-gradient(to bottom, #000 calc(100% - min(120px, 20%) - min(160px, 32%)), rgba(0, 0, 0, 0.12) calc(100% - min(120px, 20%)), transparent); -webkit-mask-image: var(--fade); mask-image: var(--fade); }
  .tb { grid-row: 2; position: static; margin-top: calc(-1 * var(--lap)); padding: 0 0 32px; }
  .tb > * { position: relative; z-index: 1; }
  .tl.has-near .tb { padding-bottom: 56px; }
  /* «Усі тури» — кругла кнопка в куті афіші, як знаки в куті сторінок події й артиста */
  .tb > .tb__back { position: absolute; z-index: 3; top: 16px; left: var(--pad); justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 12, 14, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
  .tb__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tb__back svg { width: 20px; height: 20px; }
  .tb__name { margin-top: 0; font-size: clamp(32px, 10.5vw, 44px); line-height: 1.04; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); }
  .tb__show { margin-top: 12px; font-size: 17px; line-height: 24px; }
  .tb__meta { margin-top: 4px; font-size: 17px; line-height: 24px; }
  .tb__geo, #tour-near { display: none; }
  .tnear:not([hidden]) { display: block; grid-row: 3; position: relative; z-index: 2; margin-top: -32px; box-shadow: var(--elev); }
  .tc { grid-row: 4; padding-top: 8px; }
  /* Заголовок «Концерти» — лише диктору, як на сторінці артиста: під ним одразу пошук і вкладки */
  .tc__h { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .arT { position: sticky; top: var(--hdr); z-index: 5; flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 10px; margin-inline: calc(-1 * var(--pad)); padding: 12px var(--pad); background: var(--canvas); }
  .arFind { order: 0; width: auto; height: 44px; }
  .arSeg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .arSeg::-webkit-scrollbar { display: none; }
  .arSeg__b { flex: none; }
  .arT[hidden] + .arL { margin-top: 16px; }
  .arL { padding: 4px; }
  .arRow { gap: 14px; padding: 12px; }
  .arL li + li::before { left: 12px; right: 12px; }
  .arRow .tile { --tile: 84px; }
  .arRow__city { font-size: 17px; line-height: 22px; }
  .arRow__top { gap: 4px 8px; }
  .arRow__near { font-size: 12px; line-height: 18px; padding: 1px 8px; }
  .arRow__t, .arRow__price { display: none; }
  .arRow__pm { display: block; font-size: 15px; line-height: 21px; color: var(--ink-2); }
  .played__list { columns: 2; column-gap: 20px; }
  .played__list li { font-size: 15px; }
  .tabout { grid-row: 5; margin-top: 32px; padding: 22px 20px 20px; }
  .tabout .tside__h { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-bottom: 12px; }
  .tabout__text p:first-child { font-size: 18px; line-height: 27px; }
  .tmap { grid-row: 6; position: static; margin-top: 16px; padding: 22px 16px 16px; }
  .tmap .tside__h { padding-inline: 4px; }
  .map__key { padding-inline: 4px; }
}

/* ══ Агенція: графітове тло на всю ширину — зміна змісту з афіш на «хто це» ══
   Жовтого тла секції на цьому сайті немає: жовта липка шапка зливається з ним під час прокрутки.
   Жовтий тут — імена лайнапу Druk, як на нічній афіші; праворуч від речення — пошта агенції. */
.agency { background: var(--graphite); color: #fff; padding: 104px 0 112px; }
.agency__top { align-items: start; }
.agency__lead { grid-column: 1 / 4; margin: 0; max-width: 980px; font-size: 44px; line-height: 52px; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.agency__mail { grid-column: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.agency__mail p { margin: 0; font-size: 15px; line-height: 21px; color: var(--on-dark-2); }
.agency__mail a { font-size: 19px; line-height: 25px; font-weight: 500; letter-spacing: -0.01em; color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.copybtn { margin-top: 4px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background-color 0.15s; }
.copybtn:hover { background: rgba(255, 255, 255, 0.2); }
.crew { margin-top: 96px; padding-top: 18px; border-top: 1.5px solid rgba(255, 255, 255, 0.86); }
.lineup { margin: 36px 0 0; padding: 0; list-style: none; color: var(--yellow); font-family: var(--display); font-weight: 800; font-size: 96px; line-height: 1.06; letter-spacing: -0.005em; }
.lineup li { white-space: nowrap; }
.lineup a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 94% / 0 0.055em no-repeat; transition: background-size 0.4s var(--ease); }
.lineup a:hover { background-size: 100% 0.055em; }
@media (min-width: 901px) and (max-width: 1180px) {
  .agency__lead { grid-column: 1 / -1; }
  .agency__mail { grid-column: 1 / -1; margin-top: 32px; padding-top: 0; }
}
@media (max-width: 900px) {
  .agency { padding: 64px 0 72px; }
  .agency__top { display: block; }
  .agency__lead { font-size: 25px; line-height: 31px; letter-spacing: -0.02em; }
  .agency__mail { margin-top: 28px; padding-top: 0; }
  .agency__mail a { font-size: 17px; line-height: 23px; }
  .crew { margin-top: 56px; padding-top: 14px; }
  .lineup { margin-top: 24px; font-size: 36px; }
}

/* ══ Питання: світле полотно, все відкрите одразу, без «гармошки» ══
   Питання ліворуч, відповідь праворуч на тих самих вертикалях, що місто й артист у розкладі. */
.help { padding: 104px 0 96px; }
.help__list { margin-top: 40px; border-top: 1.5px solid var(--ink); }
.qa { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.qa .h3 { grid-column: 1 / 3; max-width: 520px; }
.qa__a { grid-column: 3 / 5; max-width: 640px; }
.qa p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 26px; }
.qa p + p { margin-top: 10px; }
.qa p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .help { padding: 64px 0 56px; }
  .help__list { margin-top: 28px; }
  .qa { display: block; padding: 16px 0 22px; }
  .qa__a { margin-top: 8px; }
  .qa p { font-size: 15.5px; line-height: 24px; }
}

/* Порожній пункт підвалу (кнопка згоди на рекламу схована) не тримає проміжку в рядку документів */
.foot__links li:has(> [hidden]) { display: none; }

/* Підказка після дії (пошту скопійовано) */
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); padding: 12px 18px; transform: translateX(-50%); border-radius: 12px; background: var(--ink); color: #fff; font: 400 15px/21px var(--font); }

/* ══ 404: заголовок і посилання на головну на сірому полотні розкладу ══ */
.nf { background: var(--canvas); padding: 120px 0 136px; }
.nf p { max-width: 560px; margin: 16px 0 32px; color: var(--ink-2); font-size: 18px; line-height: 28px; }
@media (max-width: 900px) { .nf { padding: 72px 0 88px; } .nf p { font-size: 16px; line-height: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .layer, .layer .photo, .copy, .copy .rise > *, .gig__go, .gig__go svg, .lineup a, .peek__in, .peek img, .tcard img, .tile, .tile__m, .tile__wd, .tile__d, .gig__artist, .tb__back svg, .tb__near svg, .arRow__city, .arRow .gig__chev, .played__btn svg, .pin::before, .pin__tip { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .layer .photo { transform: none !important; }
}