/* «Билетный корешок» — бумага, типографская краска и линия отрыва.
   Правило против китча: перфорация и штампы только на ключевых объектах
   (билет события, край подвала, формат вечера, метка «дешевле»).
   Длинные списки и таблицы остаются спокойной печатной ведомостью. */

:root {
  /* бумага */
  --page:    #e3d9c3;   /* стол кассы — фон страницы */
  --paper:   #f6f1e6;   /* сам билет */
  --paper-2: #ece4d2;   /* корешок, зебра, подложки */
  --paper-3: #ded2b8;

  /* краска */
  --ink:     #17130f;
  --ink-2:   #574e42;
  --ink-3:   #8b8071;
  --rule:    #c9bca2;
  --red:     #b03a29;
  --red-dk:  #8d2d1f;

  --wrap:    1180px;

  --font:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', 'Consolas', ui-monospace, monospace;
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15.5px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dk); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: .005em;
}
h1 { font-size: clamp(30px, 4.6vw, 46px); }
h2 { font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: .045em; }
h3 { font-size: 19px; }
p  { margin: 0 0 1em; }

/* служебная строка «как на билете»: моноширинная, капсом, с разрядкой */
.mono, .ticket-no, .head-strap, .stub-mon, .stub-wd, .badge, .stamp,
.person-meta, .offer-op, .sched th, .foot-bottom, .search-count {
  font-family: var(--mono);
}

/* ---------- шапка: чёрная типографская плашка ---------- */

.site-head {
  background: var(--ink);
  color: var(--paper);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 3px solid var(--red);
}
.head-inner { display: flex; align-items: center; gap: 28px; min-height: 58px; }

.logo { display: flex; align-items: center; gap: 10px; color: var(--paper); }
.logo:hover { color: var(--paper); }
.logo-mark { color: var(--red); display: flex; }
.logo-text {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  text-transform: uppercase; letter-spacing: .07em;
}

.head-nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.head-nav a {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: #cdc2ad; padding: 2px 0; border-bottom: 1px solid transparent;
}
.head-nav a:hover { color: var(--paper); border-bottom-color: var(--red); }

/* ---------- герой: верхняя часть билета ---------- */

.hero {
  background: var(--paper);
  border-bottom: 2px dashed var(--rule);
  padding: 34px 0 30px;
  /* защитная сетка, как на бланках строгой отчётности — еле заметная */
  background-image: repeating-linear-gradient(45deg,
    rgba(23,19,15,.035) 0 1px, transparent 1px 8px);
}
.hero h1 { margin-bottom: .34em; }
.hero-sub { color: var(--ink-2); max-width: 66ch; margin-bottom: 20px; }

/* строка-надзаголовок над H1 */
.head-strap {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--red); margin: 0 0 12px;
}

.hero-note {
  display: block; padding: 11px 14px; margin: 0 0 6px; max-width: 66ch;
  background: var(--paper-2); border: 1px dashed var(--ink-3);
  color: var(--ink-2); font-size: 14.5px;
}
.hero-note b { color: var(--red); font-weight: 600; }

/* показатели — как итоговые строки на корешке */
.stat-row { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 22px; }
.stat b {
  display: block; font-family: var(--mono); font-size: 26px; font-weight: 600;
  line-height: 1.1; color: var(--ink);
}
.stat span {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3);
}

/* ---------- ярлыки-чипсы: прямоугольные, как надпечатка ---------- */

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }

/* Две группы чипсов подряд («город» и «формат») читались одной стеной кнопок:
   человек не понимал, где кончается одно и начинается другое. Разделяем так же,
   как разделены поля на билете, — пунктиром и подписью поля. */
.chip-group { margin-top: 18px; padding-top: 14px; border-top: 1px dotted var(--rule); }
.chip-group > .chips { margin: 0; }
/* фильтр формата над расписанием: линия сверху не нужна, он и так под заголовком секции */
.filter-bar { margin: -6px 0 18px; padding-top: 0; border-top: 0; }
.filter-bar .chips + .chip-label { margin-top: 14px; }
/* дни: на широком экране переносятся на вторую строку (обрезанный чипс «ср 23 ·»
   выглядел поломкой), на телефоне — одной строкой с прокруткой, иначе стена на пол-экрана */
@media (max-width: 760px) {
  .chips-days { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
}
.sec-head .more + .more { margin-left: 0; }
.sec-lead { margin: -6px 0 16px; color: var(--ink-2); font-size: 14.5px; max-width: 80ch; }
.sched .c-when { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.sched .dates ul { list-style: none; padding-left: 0; margin: 6px 0 0; }
.sched .dates .d-time { margin-left: 8px; font-weight: 600; }
/* цена у каждой даты своя — ставим её в тот же ряд, приглушённой */
.dates .d-price { margin-left: 10px; color: var(--ink-3); white-space: nowrap; }
/* хлебные крошки — тонкой строкой над шапкой страницы */
.crumbs { background: var(--paper); border-bottom: 1px dotted var(--rule); padding: 9px 0;
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--red); }
.crumbs-sep { margin: 0 8px; color: var(--ink-3); }
.sched .c-title small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.chip-label {
  display: block; margin-bottom: 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.chip {
  display: inline-block; padding: 6px 12px;
  border: 1px solid var(--ink-3); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.chip.is-on:hover { background: var(--red); color: #fff; }

/* ---------- секции ---------- */

section { padding: 34px 0; }
section + section { border-top: 1px solid var(--rule); }
.sec-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.sec-head h2 { margin: 0; }
.sec-head .more {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- билет: главный объект сайта ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 18px; }

.ticket {
  position: relative; display: flex; align-items: stretch; min-width: 0;
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(23,19,15,.14);
}
.ticket:hover { box-shadow: 3px 3px 0 var(--red); }

/* левый корешок с датой */
.ticket-stub {
  position: relative; flex: 0 0 84px; padding: 12px 8px;
  background: var(--paper-2); border-right: 2px dashed var(--ink-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1px;
}
/* Пробойки на концах линии отрыва. Кружок цвета страницы садится ВЕРХОМ на край
   билета и разрывает его рамку — получается настоящая высечка, а не пузырь сверху.
   Обводки у кружка нет намеренно: с ней он читается как отдельный объект. */
.ticket-stub::before, .ticket-stub::after {
  content: ''; position: absolute; right: -8px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--page);
}
.ticket-stub::before { top: -8px; }
.ticket-stub::after  { bottom: -8px; }

.stub-day { font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1; }
.stub-mon { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.stub-wd  { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.stub-time {
  margin-top: 6px; padding-top: 5px; width: 100%;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.stub-more {
  font-family: var(--mono); font-size: 10px; color: var(--red); letter-spacing: .03em;
  /* это кнопка: сбрасываем всё, что браузер рисует по умолчанию */
  background: none; border: 0; padding: 0; cursor: pointer; text-align: center;
  border-bottom: 1px dotted var(--red); line-height: 1.3;
}
.stub-more:hover { color: var(--ink); border-bottom-color: var(--ink); }

.ticket-body { flex: 1; min-width: 0; padding: 11px 14px 12px; display: flex; flex-direction: column; gap: 7px; }

.ticket-top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.ticket-no {
  margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); white-space: nowrap;
}

.ticket-main { display: flex; gap: 12px; min-width: 0; }
.ticket-photo {
  flex: 0 0 78px; height: 96px; overflow: hidden;
  border: 1px solid var(--ink); background: var(--paper-2);
}
/* чужие постеры собраны с четырёх сервисов и очень разные — одна краска сводит их к одному виду */
.ticket-photo img, .person-img img, .comic-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(1.06) contrast(1.05) sepia(.16);
  mix-blend-mode: multiply;
}
.ticket:hover .ticket-photo img { filter: grayscale(.55) brightness(1.04) contrast(1.05) sepia(.08); }

/* Названия концертов бывают из одного длинного слова («Суперпроверка»), а колонка
   текста на телефоне узкая — без переноса такое слово вылезает за край билета. */
.ticket-text { min-width: 0; flex: 1; overflow-wrap: break-word; }
.ticket-title { font-size: 19px; margin: 0 0 5px; line-height: 1.15; }
.ticket-title a { color: var(--ink); }
.ticket-title a:hover { color: var(--red); }
.ticket-meta { color: var(--ink-2); font-size: 13.5px; }
.ticket-cast { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.ticket-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 9px; }
.ticket-price { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.ticket-sold { color: var(--red); text-transform: uppercase; letter-spacing: .04em; }
.ticket-sold { color: var(--red, #b3261e); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-block; padding: 9px 15px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(23,19,15,.2);
}
.btn:hover {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 3px 3px 0 rgba(23,19,15,.28);
}
.btn-sm { padding: 7px 12px; font-size: 11.5px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- штампы ---------- */

.stamp, .fmt {
  display: inline-block; padding: 2px 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--red); border: 1.5px solid var(--red);
  transform: rotate(-1.5deg);
}
/* «проверка материала» — черновые шутки за полцены, единственный формат с заливкой */
.fmt--proverka-materiala { background: var(--red); color: #fff; }

.badge {
  display: inline-block; padding: 1px 6px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); border: 1px dotted var(--ink-3);
}

/* ---------- цены: кассовый чек ---------- */

.offers { margin-top: 4px; }
.offers-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); margin-bottom: 5px;
}
/* Точка-разделитель: капсом моноширинным «цены у 2 сервисов» и «цена одинаковая»
   склеивались в одну фразу. */
.offers-save, .offers-same { position: relative; padding-left: 10px; }
.offers-save::before, .offers-same::before {
  content: '·'; position: absolute; left: 0; color: var(--ink-3);
}
.offers-save { color: var(--red); font-weight: 600; }
.offers-same { color: var(--ink-3); }

.offers-row { display: flex; flex-direction: column; gap: 0; }

/* строка чека: название сервиса ....... цена */
.offer {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; color: var(--ink); border-bottom: 1px dotted var(--rule);
}
.offer:hover { color: var(--red); }
.offer:hover .offer-price { color: var(--red); }
.offer-op { order: 1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.offer::after {
  content: ''; order: 2; flex: 1; height: 0;
  border-bottom: 1px dotted var(--rule); transform: translateY(-3px);
}
.offer-price { order: 3; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.offer.is-best .offer-price { color: var(--red); }
.offer-tag {
  order: 4; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--red); padding: 1px 5px;
}
.offers-note {
  margin-top: 4px; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--red);
}
/* В таблице расписания колонка узкая: без nowrap «Яндекс Афиша» и «цена уточняется»
   ломались на две строки каждая и строка ведомости распухала вдвое. */
.offers-compact .offer { padding: 3px 0; }
.offers-compact .offer-op,
.offers-compact .offer-price { white-space: nowrap; }
.offers-compact .offer-price { font-size: 13px; }
.sched .c-buy { min-width: 200px; }
/* колонка с «напомнить» в расписании комика — узкая и не растягивает таблицу */
.sched .c-remind { text-align: right; white-space: nowrap; width: 1%; padding-left: 6px; }

/* ---------- люди: фото как на пропуске ---------- */

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; }
.person { text-align: left; min-width: 0; color: var(--ink); }
.person-img {
  aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--ink); margin-bottom: 8px;
}
.person:hover .person-img { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.person-img .initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 40px; color: var(--ink-3); background: var(--paper-2);
}
.person-name {
  display: block; font-family: var(--display); font-size: 16px; font-weight: 500;
  line-height: 1.15; color: var(--ink);
}
.person:hover .person-name { color: var(--red); }
.person-meta {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin-top: 2px;
}

/* ---------- расписание: ведомость ---------- */

.sched-wrap { overflow-x: auto; }
.sched { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--paper); }
.sched th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; padding: 8px 14px; border-bottom: 2px solid var(--ink);
}
.sched td { padding: 12px 14px; border-bottom: 1px dotted var(--rule); vertical-align: middle; }
.sched tr:nth-child(even) td { background: var(--paper-2); }
.sched tr:hover td { background: var(--paper-3); }
.sched .c-date { white-space: nowrap; font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.sched .c-date small {
  display: block; font-weight: 400; font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.sched .c-title a { color: var(--ink); font-family: var(--display); font-size: 17px; }
.sched .c-title a:hover { color: var(--red); }
.sched .c-venue { color: var(--ink-2); font-size: 13.5px; }
.sched .c-price { white-space: nowrap; font-family: var(--mono); font-weight: 600; }
.sched .c-buy { text-align: right; }

/* ---------- города и площадки: строки ведомости ---------- */

.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 26px; }
.city-tile {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; color: var(--ink); border-bottom: 1px solid transparent;
}
.city-tile b { order: 1; font-weight: 500; font-size: 15px; }
.city-tile::after {
  content: ''; order: 2; flex: 1; height: 0;
  border-bottom: 1px dotted var(--rule); transform: translateY(-4px);
}
.city-tile span { order: 3; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
a.city-tile:hover { color: var(--red); }
a.city-tile:hover span { color: var(--red); }

/* ---------- страница комика ---------- */

.comic-head { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.comic-photo {
  width: 156px; height: 200px; overflow: hidden; flex: none;
  border: 1px solid var(--ink); background: var(--paper-2);
  box-shadow: 5px 5px 0 rgba(23,19,15,.15);
}
.comic-photo .initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 62px; color: var(--ink-3);
}
.comic-info { flex: 1; min-width: 260px; }
.comic-info h1 { margin-bottom: .22em; }
.comic-tagline { color: var(--ink-2); margin-bottom: 14px; }

.facts { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 4px; }
.fact b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 600; }
.fact span {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3);
}

.prose { max-width: 72ch; color: var(--ink); }
.prose h3 { margin-top: 1.3em; }
.prose a { color: var(--red); }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

.empty {
  color: var(--ink-2); padding: 22px; text-align: center;
  border: 1px dashed var(--ink-3); background: var(--paper);
}

/* ---------- поиск: строка бланка ---------- */

.search-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 260px; max-width: 520px; }
.search-icon { position: absolute; left: 12px; color: var(--ink-3); display: flex; pointer-events: none; }
.search-field input {
  width: 100%; padding: 11px 38px 11px 38px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--mono); font-size: 14px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field input:focus { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.search-field input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 20px; line-height: 1; padding: 0 0 3px;
}
.search-clear:hover { color: var(--red); }
.search-count {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); white-space: nowrap;
}

.is-hidden { display: none !important; }

/* ---------- подвал: оторванный край ---------- */

.site-foot {
  position: relative; margin-top: 44px; padding: 34px 0 18px;
  background: var(--ink); color: #cdc2ad;
}
/* полукруглые вырезы цветом страницы — линия отрыва во всю ширину */
.site-foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  background: radial-gradient(circle at 11px 0, var(--page) 10px, transparent 11px) repeat-x;
  background-size: 22px 11px;
}
.foot-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 26px; }
.foot-col a { display: block; color: #cdc2ad; font-size: 14px; padding: 3px 0; }
.foot-col a:hover { color: var(--paper); }
.foot-logo {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--paper); margin-bottom: 8px;
}
.foot-title {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--paper); margin-bottom: 8px;
}
.foot-note { color: #a2957f; font-size: 13.5px; max-width: 46ch; }
.foot-bottom {
  border-top: 1px solid #332b23; margin-top: 22px; padding-top: 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #857a68;
}
/* сноска под текстом на светлом фоне (страница комика) */
section .foot-note { color: var(--ink-3); }

/* ---------- личный кабинет и подписки ---------- */

/* Состояние кнопки-переключателя держит aria-pressed: одна разметка, две подписи,
   и скринридер читает состояние сам, без служебных span'ов. */
.gs-toggle .gs-on  { display: none; }
.gs-toggle[aria-pressed="true"] .gs-off { display: none; }
.gs-toggle[aria-pressed="true"] .gs-on  { display: inline; }

.gs-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.gs-actions .btn { cursor: pointer; font-family: var(--mono); }
.gs-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.gs-nudge { font-size: 13.5px; color: var(--ink-2); max-width: 44ch; }

/* Остальные даты того же шоу — раскрывающийся список на <details> */
.dates { margin: 6px 0 0; }
.dates > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--red);
  border-bottom: 1px dotted var(--red);
}
.dates > summary::-webkit-details-marker { display: none; }
.dates > summary::after { content: ' ↓'; }
.dates[open] > summary::after { content: ' ↑'; }
.dates > ul {
  margin: 8px 0 0; padding: 8px 10px; list-style: none;
  background: var(--paper-2); border: 1px dotted var(--rule);
  max-height: 210px; overflow-y: auto;
}
.dates li {
  display: flex; gap: 10px; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  padding: 3px 0; border-bottom: 1px dotted var(--rule);
}
.dates li:last-child { border-bottom: 0; }
.dates .d-time { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* В таблице список раскрывается прямо в ячейке, а не всплывает над ней:
   ведомость лежит в горизонтально прокручиваемой рамке, и всплывающий блок
   она бы обрезала по краю. */
.sched .dates > ul { min-width: 190px; }

/* Окно «подключите бота» — поднимается после первой подписки, если бот не привязан */
.gs-modal {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(23, 19, 15, .55);
}
/* Обязательно: display:flex выше перебивает браузерное [hidden]{display:none},
   и окно висит поверх сайта всегда — не появляется после подписки, а просто не гаснет. */
.gs-modal[hidden] { display: none; }
.gs-modal-box {
  width: min(440px, 100%); background: var(--paper);
  border: 1px solid var(--ink); box-shadow: 6px 6px 0 rgba(23, 19, 15, .25);
  padding: 24px 24px 18px;
}
.gs-modal-box h3 {
  margin: 0 0 10px; font-family: var(--display); font-size: 22px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.gs-modal-box p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; }
.gs-modal-act { display: flex; gap: 10px; flex-wrap: wrap; }
.gs-modal-note {
  margin: 14px 0 0 !important; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3) !important;
}

/* «ждём подключения…» рядом с кнопкой бота: человек ушёл в телеграм, вернулся —
   и видит, что страница за ним следит, а не замерла до перезагрузки */
.gs-wait {
  margin-left: 10px; font-family: var(--mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}

/* «напомнить» на билете — служебная надпечатка, а не вторая кнопка покупки:
   она не должна спорить с «Билеты» за внимание */
.gs-bell {
  padding: 7px 10px; background: transparent; cursor: pointer;
  border: 1px dashed var(--ink-3); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.gs-bell:hover { border-color: var(--red); color: var(--red); border-style: solid; }
.gs-bell[aria-pressed="true"] { border-style: solid; border-color: var(--red); color: var(--red); }

/* Всплывающая отметка «сохранено».
   ⚠️ width: max-content обязателен. Без него блок с left:50% ужимается по
   доступному месту — то есть в половину экрана (на 320 px это 160 px),
   и короткая фраза разваливается на четыре строки. */
.gs-flash {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
  width: max-content; max-width: min(92vw, 520px); text-align: center;
  padding: 9px 16px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 3px 3px 0 var(--red);
}

.gs-select {
  padding: 6px 8px; border: 1px solid var(--ink-3); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px;
}
.gs-select:focus { outline: none; border-color: var(--red); }

.gs-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.gs-check input { width: 16px; height: 16px; accent-color: var(--red); }
.gs-check small { color: var(--ink-3); font-family: var(--mono); }

.gs-add { font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.gs-x {
  width: 28px; height: 28px; padding: 0; cursor: pointer; line-height: 1;
  background: transparent; border: 1px solid transparent; color: var(--ink-3); font-size: 18px;
}
.gs-x:hover { color: var(--red); border-color: var(--red); }

.gs-link {
  width: 100%; max-width: 620px; padding: 9px 11px;
  border: 1px dashed var(--ink-3); background: var(--paper-2); color: var(--ink-2);
  font-family: var(--mono); font-size: 12.5px;
}

/* ---------- узкий экран ---------- */

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .foot-inner { grid-template-columns: 1fr; gap: 18px; }
  .comic-photo { width: 116px; height: 150px; }
  .comic-photo .initials { font-size: 44px; }
  section { padding: 28px 0; }
  .ticket-stub { flex-basis: 70px; }
  .stub-day { font-size: 27px; }
  .ticket-photo { flex-basis: 62px; height: 78px; }
  .people { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 13px; }
  .stat-row { gap: 22px; }

  /* Меню раньше просто пряталось, и на телефоне навигации не оставалось вовсе —
     только ссылки в подвале. Теперь логотип сверху, меню под ним отдельной
     строкой с горизонтальной прокруткой: помещается сколько угодно пунктов. */
  .head-inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .logo { height: 52px; }
  .head-nav {
    margin-left: 0; gap: 16px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .head-nav::-webkit-scrollbar { display: none; }
  /* без этого пункт «Открытые микрофоны» ломается пополам и меню занимает две строки */
  .head-nav a { white-space: nowrap; font-size: 12.5px; padding: 7px 0; }

  /* Пальцем по строке 26–28 px не попасть: на телефоне поднимаем высоту всего,
     что является ссылкой — ярлыков, строк чека, ведомости городов и подвала. */
  .chip { padding: 9px 13px; }
  .btn-sm { padding: 10px 12px; }
  .gs-bell { padding: 10px 12px; }
  .gs-select { padding: 9px 10px; }
  .offer { padding: 8px 0; }
  .city-tile { padding: 10px 0; }
  .foot-col a { padding: 7px 0; }
}

/* ---------- совсем узкие экраны (320–420) ---------- */

/* На 320 px у билета оставалось ~107 px под заголовок: корешок, фото и отступы
   съедали всё. Плюс подпись кнопки «Билеты за 550 ₽ — Яндекс Афиша» шла одной
   строкой и растягивала страницу до 363 px — появлялась горизонтальная прокрутка. */
@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .ticket-stub { flex-basis: 60px; padding: 10px 5px; }
  .stub-day { font-size: 24px; }
  .stub-mon { font-size: 11px; letter-spacing: .08em; }
  .stub-time { font-size: 12px; }
  .stub-more { font-size: 9.5px; }
  .ticket-body { padding: 10px 11px 11px; }
  .ticket-main { gap: 10px; }
  .ticket-photo { flex-basis: 52px; height: 66px; }
  .ticket-title { font-size: 17px; }

  /* На 320 px «напомнить» и «Билеты» в одну строку не помещаются и растягивают
     страницу. Пускаем подвал билета в две строки: цена с «напомнить» сверху,
     кнопка покупки — во всю ширину под ними. */
  .ticket-foot { flex-wrap: wrap; gap: 8px; }
  .ticket-foot .btn { flex: 1 1 100%; text-align: center; white-space: normal; line-height: 1.35; }
  .people { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}