/* Култура в София
 *
 * Quiet paper-and-ink base; colour comes from the events themselves.
 * Every event element carries a class (.p-<image> from /palette/*.css,
 * or a .t-* fallback below) that defines --p-bg, --p-fg, --p-muted,
 * --p-accent and --p-ph. Those are contrast-checked per palette.
 */

/* ---------- tokens ---------- */
:root {
  --paper: #f3f4f7;
  --surface: #ffffff;
  --ink: #181a2f;
  --ink-2: #4a4d68;
  --rule: #d8dae4;
  --indigo: #3b3fc4;
  --on-indigo: #ffffff;
  --marker: #ffd447;
  --marker-ink: #181a2f;
  --danger: #b42318;

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 16px;
  --max: 1180px;
  --r-card: 16px;
  --r-thumb: 10px;
  --r-btn: 10px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #11121c;
  --surface: #1b1c2b;
  --ink: #ececf4;
  --ink-2: #a9abc3;
  --rule: #2c2e43;
  --indigo: #a3a6ff;
  --on-indigo: #11121c;
  --danger: #ff8a80;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11121c;
    --surface: #1b1c2b;
    --ink: #ececf4;
    --ink-2: #a9abc3;
    --rule: #2c2e43;
    --indigo: #a3a6ff;
    --on-indigo: #11121c;
    --danger: #ff8a80;
    color-scheme: dark;
  }
}

/* Fallback tints for events without a picture: the venue's brand hue,
 * reduced to a calm, contrast-safe scheme. */
.t-0 { --h: 0; }   .t-1 { --h: 40; }  .t-2 { --h: 85; }  .t-3 { --h: 140; }
.t-4 { --h: 185; } .t-5 { --h: 220; } .t-6 { --h: 265; } .t-7 { --h: 320; }
.t-g { --h: 230; --sat: 0.15; }
:is(.t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
  --p-bg: hsl(var(--h) calc(45% * var(--sat, 1)) 91%);
  --p-fg: hsl(var(--h) calc(40% * var(--sat, 1)) 13%);
  --p-muted: hsl(var(--h) calc(22% * var(--sat, 1)) 32%);
  --p-accent: hsl(var(--h) calc(65% * var(--sat, 1)) 32%);
  --p-ph: hsl(var(--h) calc(35% * var(--sat, 1)) 84%);
}
:root[data-theme="dark"] :is(.t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
  --p-bg: hsl(var(--h) calc(30% * var(--sat, 1)) 16%);
  --p-fg: hsl(var(--h) calc(25% * var(--sat, 1)) 93%);
  --p-muted: hsl(var(--h) calc(15% * var(--sat, 1)) 72%);
  --p-accent: hsl(var(--h) calc(75% * var(--sat, 1)) 76%);
  --p-ph: hsl(var(--h) calc(25% * var(--sat, 1)) 24%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
    --p-bg: hsl(var(--h) calc(30% * var(--sat, 1)) 16%);
    --p-fg: hsl(var(--h) calc(25% * var(--sat, 1)) 93%);
    --p-muted: hsl(var(--h) calc(15% * var(--sat, 1)) 72%);
    --p-accent: hsl(var(--h) calc(75% * var(--sat, 1)) 76%);
    --p-ph: hsl(var(--h) calc(25% * var(--sat, 1)) 24%);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0 0 0.8em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js .js-hide { display: none; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--marker); color: var(--marker-ink); padding: 10px 16px; border-radius: var(--r-btn);
  font-weight: 700;
}
.skip:focus { left: 12px; }

/* ---------- buttons, chips, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--rule); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: 16px; line-height: 1.1; text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.btn-primary:hover { border-color: var(--indigo); filter: brightness(1.08); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-wide { width: 100%; }
.linklike {
  background: none; border: 0; padding: 0; color: var(--indigo); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; font-size: inherit;
}

.chips { display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-weight: 650; font-size: 15px; text-decoration: none;
}
.chip:hover { border-color: var(--ink-2); text-decoration: none; }
.chip[aria-current] { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 750; line-height: 1.6; white-space: nowrap;
}
.tag-prem { background: var(--marker); color: var(--marker-ink); }
.tag-sold { background: var(--ink); color: var(--paper); }
.tag-cancel { background: var(--danger); color: var(--paper); }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-in {
  max-width: var(--max); margin-inline: auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-mark .col-dome, .brand-mark .col-base { fill: var(--ink); }
.brand-mark .col-body { fill: var(--marker); }
.brand-mark .col-bills { fill: var(--ink); opacity: 0.85; }
.brand-name { font: 800 27px/1 var(--display); letter-spacing: 0.005em; }
.nav {
  order: 3; flex: 1 0 100%; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 8px 10px; border-radius: 8px; white-space: nowrap;
  color: var(--ink-2); font-weight: 650; text-decoration: none;
}
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--marker); border-radius: 0; }
.theme-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 650; cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.theme-toggle .half { fill: currentColor; stroke: none; }

@media (min-width: 900px) {
  :root { --gutter: 24px; }
  .masthead-in { flex-wrap: nowrap; padding-block: 14px; }
  /* Centred with auto margins, not justify-content: those shrink to 0 when
     the links don't fit, so the first link can never be pushed off-screen. */
  .nav { order: 0; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; overflow: hidden; }
  .nav > :first-child { margin-left: auto; }
  .nav > :last-child { margin-right: auto; }
  .theme-toggle { margin-left: 0; }
}
/* Not enough room for the whole menu (measured by navfit.js): categories
   move to a centred second row under the logo — scales with any number of
   categories, nothing is ever cut off. */
@media (min-width: 900px) {
  .masthead.nav-wrap .masthead-in { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .masthead.nav-wrap .nav { order: 3; flex: 1 0 100%; }
  .masthead.nav-wrap .sub-cta { margin-left: auto; }
}
/* Ten menu items (with "Спорт"): free space progressively on
   narrower desktops so the menu never overflows. */
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-city, .theme-label { display: none; }
}
@media (min-width: 900px) {
  .masthead-in { gap: 8px 12px; }
  .nav { gap: 0; }
  .nav a { padding-inline: 6px; font-size: 15px; }
  .nav-sep { margin-inline: 4px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .nav a { padding-inline: 5px; font-size: 14px; }
  /* Icon-only subscribe button; the label stays for screen readers. */
  .sub-cta { padding-inline: 10px; }
  .sub-cta span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- tonight shelf (home hero) ---------- */
.tonight { padding: 28px 0 8px; }

/* ---------- page heads ---------- */
.page-head { padding: 30px 0 4px; }
.page-head h1, .notfound h1 { font: 900 clamp(52px, 8vw, 88px)/0.86 var(--display); letter-spacing: -0.01em; }
.lead { max-width: 62ch; margin-top: 14px; font-size: 18px; color: var(--ink-2); }

.venue { background: var(--p-bg); color: var(--p-fg); padding: 30px 0 26px; }
.venue-kind { margin: 0 0 6px; font-weight: 700; color: var(--p-muted); }
.venue-name { font: 900 clamp(46px, 9vw, 96px)/0.88 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.venue-addr { font-size: 18px; margin-bottom: 4px; }
.venue-meta { color: var(--p-muted); }
.venue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.venue .btn { background: transparent; color: var(--p-fg); border-color: color-mix(in srgb, var(--p-fg) 30%, transparent); }
/* The venue's photo: on top on phones, beside the name on wide screens. */
.venue-photo { margin: 0 0 18px; }
.venue-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: color-mix(in srgb, var(--p-fg) 8%, transparent); }
.venue-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--p-muted); }
.venue-photo figcaption a { color: inherit; }
@media (min-width: 900px) {
  .venue-has-photo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; align-items: center; }
  .venue-has-photo .venue-photo { order: 2; margin: 0; }
  .venue-has-photo .venue-name { font-size: clamp(46px, 6vw, 84px); }
}

/* ---------- filters ---------- */
.agenda { padding-bottom: 48px; }
.filters { display: grid; gap: 10px; margin: 22px 0 6px; }
.f-search { display: flex; gap: 8px; }
.f-search input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface);
  font-size: 17px;
}
.f-search input:focus-visible { outline-offset: 0; border-color: var(--indigo); }
.f-search .btn { min-height: 48px; }
.f-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-row .chips { flex: 1 1 auto; min-width: 0; }
.f-date input {
  height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); font-size: 16px; font-weight: 600; color-scheme: inherit;
}
.summary { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }

/* ---------- day groups ---------- */
.day { border-top: 1px solid var(--rule); margin-top: 12px; }
.day-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0 8px; background: var(--paper);
}
.day-rel { font: 850 32px/1 var(--display); }
.day .day-rel {
  --hl: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  background: var(--hl); padding: 0 2px;
}
/* On dark paper light text over yellow loses contrast: the marker
 * becomes a thick underline below the glyphs instead. */
:root[data-theme="dark"] .day .day-rel { --hl: linear-gradient(transparent 88%, var(--marker) 88%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .day .day-rel { --hl: linear-gradient(transparent 88%, var(--marker) 88%); }
}
.day-date { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.day-count { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.day-list { list-style: none; margin: 0; padding: 0; }

@media (min-width: 900px) {
  .day { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding-top: 6px; }
  .day-head {
    top: 12px; align-self: start; flex-direction: column; align-items: flex-start; gap: 2px;
    background: none; padding-top: 14px;
  }
  .day-rel { font-size: 44px; }
  .day-count { margin: 6px 0 0; }
}

/* ---------- event rows ---------- */
.ev-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; margin-inline: -8px; border-radius: 12px;
  color: inherit; text-decoration: none;
}
.ev + .ev .ev-link { box-shadow: 0 -1px 0 var(--rule); border-top-left-radius: 0; border-top-right-radius: 0; }
.ev-link:hover { background: color-mix(in srgb, var(--p-bg) 60%, transparent); text-decoration: none; }
.ev-link:hover .ev-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.ev-time {
  flex: none; width: 66px; height: 62px; display: grid; place-items: center;
  border-radius: var(--r-thumb); background: var(--p-bg); color: var(--p-fg);
  font: 850 25px/1 var(--display); font-variant-numeric: tabular-nums;
}
.ev-thumb { flex: none; width: 62px; height: 62px; border-radius: var(--r-thumb); overflow: hidden; background: var(--p-ph, var(--p-bg)); }
.ev-thumb:empty { display: none; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-title { font: 750 22px/1.08 var(--display); overflow-wrap: anywhere; }
.ev-place { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.ev-hall { color: var(--ink-2); }
.ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.ev-info { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.is-past .ev-link { opacity: 0.5; }
.is-cancelled .ev-title { text-decoration: line-through; text-decoration-thickness: 2px; }
@media (min-width: 640px) {
  .ev-time { width: 76px; height: 70px; font-size: 28px; }
  .ev-thumb { width: 70px; height: 70px; }
  .ev-title { font-size: 25px; }
}

.nomatch, .empty { margin: 28px 0; padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); }
.empty p:first-child { font-size: 19px; font-weight: 650; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.more { margin: 26px 0 0; }

.subscribe {
  margin-top: 44px; padding: 22px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--rule);
}
.subscribe-h { font: 850 30px/1 var(--display); margin-bottom: 8px; }
.subscribe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* ---------- event page ---------- */
.event { --hero-pad: 28px; }
.hero { background: var(--p-bg); color: var(--p-fg); padding: var(--hero-pad) 0 36px; }
.hero a { color: var(--p-fg); }
.hero-wide { padding-top: 0; }
.hero-banner { position: relative; margin: 0 0 4px; max-height: min(52vh, 520px); overflow: hidden; background: var(--p-ph); }
.hero-banner img { width: 100%; height: 100%; max-height: min(52vh, 520px); object-fit: cover; }
.hero-banner::after {
  content: ""; position: absolute; inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, var(--p-bg));
}
.hero-in { display: grid; gap: 24px; }
.hero-poster { margin: 0; width: min(70vw, 300px); }
.hero-poster img {
  width: 100%; border-radius: 14px; background: var(--p-ph);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--p-fg) 70%, transparent);
}
.crumb { font-size: 15px; font-weight: 650; color: var(--p-muted); margin-bottom: 10px; }
.crumb a { color: var(--p-muted); }
.hero-title {
  font: 900 clamp(46px, 9vw, 100px)/0.9 var(--display); letter-spacing: -0.008em;
  text-wrap: balance; overflow-wrap: anywhere; margin-bottom: 14px;
}
.is-cancelled .hero-title { text-decoration: line-through; text-decoration-thickness: 4px; }
.hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.facts { display: grid; gap: 12px 28px; margin: 18px 0 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 14px; font-weight: 750; color: var(--p-muted); }
.facts dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.fact-when dd { font: 800 26px/1.15 var(--display); }
.fact-sub { display: block; font: 500 15px/1.4 var(--text); color: var(--p-muted); margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.btn-accent { background: var(--p-accent); color: var(--p-bg); border-color: var(--p-accent); font-size: 17px; }
.btn-accent:hover { border-color: var(--p-accent); filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--p-fg); border-color: color-mix(in srgb, var(--p-fg) 32%, transparent); }
.btn-ghost:hover { border-color: var(--p-fg); }
@media (min-width: 900px) {
  .event { --hero-pad: 44px; }
  .hero-in { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
  .hero-wide .hero-in, .hero-in:not(:has(.hero-poster)) { grid-template-columns: 1fr; }
  .hero-wide .hero-in { margin-top: -90px; position: relative; }
  /* The text block overlaps the banner's lower part: let clicks there
     reach the picture (zoom) except on the block's own links/buttons. */
  .hero-wide .hero-in { pointer-events: none; }
  .hero-wide .hero-in :is(a, button, summary, input, select, label, details, [tabindex]) { pointer-events: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-when { grid-column: 1 / -1; }
}

.event-body { display: grid; gap: 36px; padding-top: 34px; padding-bottom: 56px; }
@media (min-width: 900px) { .event-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } }
/* Comfortable reading length however wide the page is. */
.event-body > :first-child { max-width: 72ch; }
.prose p { max-width: 64ch; font-size: 18px; line-height: 1.62; }
.prose p:first-child { font-size: 20px; line-height: 1.55; }
.prose-empty { color: var(--ink-2); }
.credits { margin-top: 30px; }
.credits h2, .others h2, .feeds-h { font: 850 30px/1 var(--display); margin-bottom: 12px; }
.credits dl { margin: 0; display: grid; gap: 10px; max-width: 64ch; }
.credits dt { font-size: 14px; font-weight: 750; color: var(--ink-2); }
.credits dd { margin: 0; }
.others ol { list-style: none; margin: 0 0 28px; padding: 0; }
.others a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.others a:hover .o-day { text-decoration: underline; }
.o-day { font-weight: 650; }
.o-time { font: 850 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.o-hall { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.others .is-cancelled time { text-decoration: line-through; }
.place { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); margin-bottom: 16px; }
.place h2 { font: 850 26px/1.05 var(--display); margin-bottom: 8px; }
.place-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-weight: 650; }
.source-note { font-size: 14px; color: var(--ink-2); }

/* ---------- feeds ---------- */
.feeds-page { padding-bottom: 56px; }
.feeds-page section { margin-top: 36px; }
.howto { display: grid; gap: 14px; }
.howto > div { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); }
.howto h2 { font: 850 24px/1.05 var(--display); margin-bottom: 6px; }
.howto p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 640px) { .howto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .howto { grid-template-columns: repeat(4, 1fr); } }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px;
}
.feed-sub { padding-left: 22px; }
.feed-sub .feed-name strong { font-size: 19px; }
.feed:target { background: color-mix(in srgb, var(--marker) 30%, transparent); }
.feed-name strong { display: block; font: 800 23px/1.1 var(--display); }
.feed-name span { font-size: 14px; color: var(--ink-2); }
.feed-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.data-note p { max-width: 70ch; }

/* ---------- status ---------- */
.table-scroll { overflow-x: auto; margin-top: 24px; }
.status { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.status th, .status td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.status thead th { font-size: 13.5px; color: var(--ink-2); }
.status .num { font-variant-numeric: tabular-nums; }
.st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 750; }
.st-ok { background: #dcf3e3; color: #14532d; }
.st-err { background: #fde2df; color: #8a1c12; }
.st-stale { background: #fff1c2; color: #6b4a00; }
.st-msg { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- 404, footer, consent ---------- */
.notfound { padding: 48px var(--gutter) 80px; }
.notfound p { font-size: 19px; color: var(--ink-2); max-width: 50ch; margin-top: 16px; }

.foot { border-top: 1px solid var(--rule); background: var(--surface); }
.foot-in { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 40px; font-size: 15px; color: var(--ink-2); }

.consent {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; max-width: 560px;
  padding: 16px 18px; border-radius: 14px; background: var(--ink); color: var(--paper);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}
.consent p { font-size: 15px; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent .btn:not(.btn-primary) { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.consent .btn-primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .masthead, .filters, .subscribe, .foot, .actions, .consent { display: none; }
  .hero { background: none; color: #000; }
}

/* ---------- subscriptions (first-class) ---------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-plus { stroke-width: 2.2; }
.sub-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--indigo); color: var(--on-indigo); font-weight: 750; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.sub-cta:hover { text-decoration: none; filter: brightness(1.08); }
.sub-cta[aria-current] { box-shadow: 0 0 0 3px var(--marker); }
.theme-toggle { margin-left: 0; }

.subbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 22px; padding: 14px 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--indigo) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, transparent);
}
.subbar-text { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 320px; }
.subbar-text .icon { width: 26px; height: 26px; color: var(--indigo); margin-top: 1px; }
.subbar-text p { margin: 0; line-height: 1.35; }
.subbar-text strong { font: 800 22px/1.1 var(--display); }
.subbar-text span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.subbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.subbar-actions .btn { min-height: 40px; font-size: 15px; padding: 0 13px; }
.filters { margin-top: 18px; }

.actions .icon { width: 18px; height: 18px; }
.hero-sub { margin: 14px 0 0; font-size: 15px; font-weight: 650; }
.hero-sub a { color: var(--p-muted); }

/* Status badges on dark paper (dark is the default theme). */
:root[data-theme="dark"] .st-ok { background: #123a24; color: #b6f0c8; }
:root[data-theme="dark"] .st-err { background: #4a1712; color: #ffc9c2; }
:root[data-theme="dark"] .st-stale { background: #3d3108; color: #ffe8a3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-ok { background: #123a24; color: #b6f0c8; }
  :root:not([data-theme="light"]) .st-err { background: #4a1712; color: #ffc9c2; }
  :root:not([data-theme="light"]) .st-stale { background: #3d3108; color: #ffe8a3; }
}

/* ---------- filter panel: inline on desktop and without JS ---------- */
.f-panel {
  display: grid; gap: 10px; position: static; inset: auto; margin: 0; padding: 0;
  width: auto; max-width: none; max-height: none; border: 0; background: none; color: inherit; overflow: visible;
}
.f-panel .sheet-head, .f-panel .sheet-foot { display: none; }
.f-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-group > .chips { flex: 1 1 auto; }
.f-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-date-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.f-row { flex: 1 1 auto; }
.f-venue {
  flex: 1 1 260px; min-width: 0; max-width: 420px; height: 40px; padding: 0 28px 0 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600;
}
.f-date input { font-size: 16px; height: 40px; }
.f-toggle { display: none; }
.f-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--marker); color: var(--marker-ink); font-size: 13px; font-weight: 800;
}

/* Inline chip rows scroll sideways with snap and a fade at the edge. */
.chips {
  scroll-snap-type: x proximity; padding-right: 32px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.chips li { scroll-snap-align: start; flex: none; }

/* ---------- bottom sheets (<dialog>, mobile) ---------- */
dialog.sheet[open] {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
  max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
  display: block; border: 0; border-radius: 22px 22px 0 0;
  background: var(--surface); color: var(--ink);
  padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  animation: sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
dialog.sheet::backdrop { background: rgba(5, 6, 14, 0.62); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }
.sheet[open] .sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px; background: var(--surface);
}
.sheet-head h2 { font: 850 30px/1 var(--display); }
.sheet-close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
}
.sheet[open] .f-group { display: block; padding: 10px 0 14px; border-bottom: 1px solid var(--rule); }
.sheet[open] .f-label {
  position: static; width: auto; height: auto; clip: auto; overflow: visible;
  margin: 0 0 10px; font: 800 20px/1 var(--display); color: var(--ink-2);
}
.sheet[open] .chips { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.sheet[open] .f-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sheet[open] .f-date { display: flex; align-items: center; gap: 10px; }
.sheet[open] .f-date-label { position: static; width: auto; height: auto; clip: auto; font-weight: 700; }
.sheet[open] .f-date input { flex: 1; }
.sheet[open] .f-venue { max-width: none; width: 100%; height: 48px; flex: none; }
.sheet[open] .sheet-foot {
  position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); display: flex; gap: 8px;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); margin-bottom: calc(-16px - env(safe-area-inset-bottom));
  background: var(--surface);
}
.sheet-foot .btn-primary { flex: 1; min-height: 50px; }
.sheet-foot .btn { min-height: 50px; }

/* Kinds and venues: footer section, and the "Категории" sheet. */
.browse { margin-bottom: 28px; }
.browse-h { font: 850 26px/1 var(--display); color: var(--ink); margin-bottom: 14px; }
.browse-list { display: grid; gap: 18px; }
@media (min-width: 640px) { .browse-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .browse-list { grid-template-columns: repeat(4, 1fr); } }
.browse-kind-link { display: inline-block; font: 850 23px/1.1 var(--display); color: var(--ink); text-decoration: none; padding: 6px 0; }
.browse-kind ul { list-style: none; margin: 0; padding: 0; }
.browse-kind li a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 15.5px; text-decoration: none; }
.browse-kind li a:hover { color: var(--ink); text-decoration: underline; }
.sheet .browse-list { padding-top: 4px; }
.sheet .browse-kind li a { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ink); }

/* ---------- tab bar and action bar (mobile) ---------- */
.tabbar, .actionbar { display: none; }

.ev-title, .ev-place {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

@media (max-width: 899px) {
  :root { --tabbar-h: 64px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .nav, .sub-cta { display: none; }
  .masthead-in {
    flex-wrap: nowrap; padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .theme-toggle { margin-left: auto; min-height: 44px; padding: 0 14px; }

  .tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; border-radius: 14px; color: var(--ink-2); text-decoration: none;
    font-size: 12.5px; font-weight: 750; line-height: 1.1; text-align: center;
  }
  .tabbar .icon { width: 24px; height: 24px; }
  .tabbar a[aria-current] { color: var(--ink); }
  .tabbar a[aria-current] .icon { color: var(--marker); }
  .tabbar .tab-sub { background: var(--indigo); color: var(--on-indigo); margin: 2px 0; }
  .tabbar .tab-sub[aria-current] { box-shadow: inset 0 0 0 2px var(--marker); }
  .tabbar .tab-sub .icon, .tabbar .tab-sub[aria-current] .icon { color: var(--on-indigo); }

  /* Filters: one compact sticky row; the rest lives in a bottom sheet. */
  .js .filters {
    position: sticky; top: 0; z-index: 5; margin: 14px calc(var(--gutter) * -1) 0;
    padding: 8px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .js .f-panel:not([open]) { display: none; }
  .f-submit { display: none; }
  .f-toggle { display: inline-flex; min-height: 48px; gap: 6px; padding: 0 14px; }
  .js .day-head { top: 65px; }
  .chip { height: 44px; padding: 0 16px; font-size: 15.5px; }
  .f-date input, .f-venue { height: 44px; }
  .btn-small { min-height: 44px; }
  .consent { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }

  /* Event page: primary actions in a thumb-reachable bar. */
  .event { padding-bottom: 76px; }
  .actions .act-main { display: none; }
  .actions:not(:has(> :not(.act-main):not([hidden]))) { display: none; }
  .actionbar {
    position: fixed; z-index: 39; left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    display: flex; gap: 8px;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--p-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in srgb, var(--p-fg) 16%, transparent);
    color: var(--p-fg);
  }
  .actionbar > .btn { flex: 1 1 0; min-height: 50px; padding: 0 12px; }
  .cal-menu { flex: 1 1 0; position: relative; }
  .cal-menu summary { width: 100%; min-height: 50px; list-style: none; cursor: pointer; }
  .cal-menu summary::-webkit-details-marker { display: none; }
  .cal-menu-list {
    position: absolute; right: 0; bottom: calc(100% + 10px); width: max(100%, 260px);
    display: grid; padding: 6px; border-radius: 16px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  }
  .cal-menu-list a {
    display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 10px;
    color: var(--ink); font-weight: 700; text-decoration: none;
  }
  .cal-menu-list a + a { border-top: 1px solid var(--rule); }
}
/* Wide screens: the filter panel is inline; other sheets never open. */
@media (min-width: 900px) { .sheet:not(.f-panel) { display: none; } }

/* Grid/flex items must be allowed to shrink below an input's intrinsic width. */
.filters { grid-template-columns: minmax(0, 1fr); }
.f-search { min-width: 0; }
.f-search input { width: 0; }
.tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 899px) {
  .brand { min-height: 44px; }
  .subbar-actions .btn { min-height: 44px; }
  .browse-kind-link { padding: 10px 0; }
  .browse-kind li a { padding: 11px 0; }
}

/* ---------- multiplexes: grouped by film ---------- */
.nav-sep { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 6px; background: var(--rule); }
.mx-cards { display: grid; gap: 8px; margin-top: 6px; }
.mx-card {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.mx-card:hover { border-color: var(--ink-2); text-decoration: none; }
.mx-text strong { font: 850 24px/1 var(--display); margin-right: 6px; }
.mx-text span { color: var(--ink-2); font-size: 15.5px; }
.mx-go { margin-left: auto; width: 22px; height: 22px; color: var(--ink-2); }

.film-list { list-style: none; margin: 0; padding: 0; }
.film {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px;
  padding: 14px 0; align-items: start;
}
.film + .film { border-top: 1px solid var(--rule); }
.film-poster {
  display: block; aspect-ratio: 2 / 3; border-radius: var(--r-thumb); overflow: hidden;
  background: var(--p-ph, var(--p-bg));
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; }
.film-title { font: 800 25px/1.04 var(--display); overflow-wrap: anywhere; }
.film-title a { color: var(--ink); text-decoration: none; }
.film-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.film-meta { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.branch { margin-top: 10px; min-width: 0; }
.branch-name { display: inline-block; font-weight: 750; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 4px; }
.branch-name:hover { text-decoration: underline; }
.shows { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.show {
  display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 40px; padding: 2px 12px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
  background: var(--p-bg); color: var(--p-fg); text-decoration: none; font-size: 13.5px; line-height: 1.2;
}
.show:hover { border-color: var(--p-fg); text-decoration: none; }
.show time { font: 850 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.show-x { color: var(--p-muted); }
.show-x::before { content: "·"; margin: 0 6px; }
.show.is-past { opacity: 0.45; }
.show.is-cancelled time { text-decoration: line-through; }
.show.is-sold { border-style: dashed; }
.screenings .branch { margin: 0 0 14px; }
.feeds-note { max-width: 70ch; color: var(--ink-2); }
.browse-mx { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.browse-note { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.browse-mx ul { columns: 2 220px; }
@media (min-width: 640px) {
  .film { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .film-title { font-size: 28px; }
}
@media (max-width: 899px) {
  .show { min-height: 44px; }
  .branch-name { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .film-title a { display: inline-block; padding: 4px 0; }
}

/* Narrow screens: screenings as compact tiles, two or three per row. */
@media (max-width: 639px) {
  .shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
  .show { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 10px; min-height: 58px; }
  .show time { font-size: 22px; }
  .show-x { font-size: 12.5px; line-height: 1.25; }
  .show-x::before { content: none; }
}
/* The event sidebar is narrow at every width: use tiles there too. */
.screenings .shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.screenings .show { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 10px; min-height: 58px; }
.screenings .show-x { font-size: 12.5px; line-height: 1.25; }
.screenings .show-x::before { content: none; }

/* ---------- brand: Тази вечер ---------- */
.brand-mark .moon { fill: var(--marker); }
.brand-mark .star { fill: var(--ink); opacity: 0.85; }
.brand-name { font: 900 28px/1 var(--display); letter-spacing: 0.002em; white-space: nowrap; }
.brand-city { font-weight: 600; color: var(--ink-2); }

/* One line where it fits; on phones "в София" wraps as a lighter subline.
   The parts never break internally, so "София" can't drop alone. */
.tonight-h { margin-bottom: 8px; font: 900 clamp(52px, 6.4vw, 88px)/0.9 var(--display); letter-spacing: -0.012em; }
.tonight-h .tn-1, .tonight-h .tn-2 { white-space: nowrap; }
.tonight-h .tn-2 { font-weight: 500; color: var(--ink-2); }
/* Same lockup on every "… в София" heading: the place in the lighter cut. */
.city-h .h-city { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tonight-lead { max-width: 46ch; margin: 12px 0 18px; font-size: 19px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 899px) {
  .brand-name { font-size: 25px; }
  .tonight-lead { font-size: 17px; }
}
@media (max-width: 379px) { .brand-city { display: none; } }


/* ---------- poster zoom ---------- */
.zoom { position: relative; display: block; cursor: zoom-in; color: inherit; }
.zoom:focus-visible { outline: 3px solid var(--p-accent, currentColor); outline-offset: 3px; }
.zoom-hint {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0.85; transition: opacity 0.15s;
}
.zoom-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; }
.hero-banner .zoom-hint { right: max(16px, calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: 16px; }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: zoom-out; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(5 5 10 / 0.92); }
.lightbox img {
  max-width: calc(100vw - 2 * env(safe-area-inset-left, 0px) - 16px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  width: auto; height: auto; object-fit: contain;
  background: var(--p-ph, transparent); box-shadow: 0 20px 80px rgb(0 0 0 / 0.6);
}
.lightbox-close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(0 0 0 / 0.5); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lightbox-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] img { animation: zoom-in 0.18s ease-out; }
  @keyframes zoom-in { from { opacity: 0; transform: scale(0.97); } }
}

/* ---------- price & availability ---------- */
.tag-few { background: var(--marker); color: var(--marker-ink); }
.tag-nosale { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ev-price { font-weight: 750; color: var(--ink); white-space: nowrap; }
.show.is-sold { opacity: 0.6; }
.show.is-sold time { text-decoration: line-through; text-decoration-thickness: 2px; }
.show-sold { font-weight: 700; }
.show.is-few { box-shadow: inset 0 0 0 2px var(--marker); }
.show-few { font-weight: 700; color: var(--ink); }
.chip-toggle[aria-current]::before { content: "✓ "; }
.f-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.unknown { margin: 22px 0 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.unknown > summary {
  cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 44px;
  font: 800 20px/1.2 var(--display); color: var(--ink-2); list-style: none;
}
.unknown > summary::-webkit-details-marker { display: none; }
.unknown > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.unknown[open] > summary::before { transform: rotate(90deg); }
.unknown-count { font-weight: 600; }
.unknown-note { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }
.unknown-more { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.unknown-more a { font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }

/* ---------- poster grid (default agenda view) ---------- */
/* One site width per screen: every page, view, header and footer share
   the same edges; a little wider on large screens, at most 5 tiles a row. */
@media (min-width: 1400px) {
  :root { --max: 1320px; }
}

.summary-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.summary-row .summary { flex: 1 1 auto; min-width: 0; margin: 0; }
.viewswitch {
  flex: none; display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
}
.vs {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border-radius: 999px; color: var(--ink-2); font-weight: 650; font-size: 14.5px; text-decoration: none;
}
.vs:hover { color: var(--ink); text-decoration: none; }
.vs[aria-current] { background: var(--ink); color: var(--paper); }
.vs .icon { width: 18px; height: 18px; }

.is-grid .day { display: block; border-top: 0; margin-top: 16px; padding-top: 0; }
.is-grid .day-head { flex-direction: row; align-items: baseline; padding: 12px 0 10px; background: var(--paper); z-index: 4; }
@media (min-width: 900px) {
  .is-grid .day-head { top: 0; }
  .is-grid .day-rel { font-size: 42px; }
  .is-grid .day-count { margin: 0 0 0 auto; }
}

.grid {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;
}
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


.tile { min-width: 0; display: flex; flex-direction: column; }
.tile-link { display: flex; flex-direction: column; gap: 9px; color: var(--ink); text-decoration: none; border-radius: var(--r-card); }
.tile-link:hover { text-decoration: none; }
.tile-link:focus-visible { outline-offset: 3px; }
.tile-img {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  border-radius: var(--r-card); background: var(--p-ph, var(--p-bg));
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.7);
}
.tile-pic {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile-link:hover .tile-pic { transform: scale(1.035); }
/* Wide pictures: shown whole at the top, over the venue-coloured bill. */
.is-wide .tile-img { display: flex; flex-direction: column; background: var(--p-bg); }
.is-wide .tile-pic { position: relative; inset: auto; flex: none; height: auto; max-height: 62%; }
.tile-link:hover .is-wide .tile-pic, .is-wide .tile-link:hover .tile-pic { transform: none; }
.is-wide .bill { position: relative; inset: auto; flex: 1; min-height: 0; padding: 6cqi 10cqi 10cqi; background-image: none; }
.is-wide .bill-kind { display: none; }
.is-wide .bill-title { font-size: 12.5cqi; -webkit-line-clamp: 4; padding: 2cqi 0; }
.is-wide .bill-title.tt-m { font-size: 11cqi; }
.is-wide .bill-title.tt-l { font-size: 9.5cqi; -webkit-line-clamp: 5; }
.is-wide .bill-title.tt-xl { font-size: 8.5cqi; -webkit-line-clamp: 5; }
.is-wide:has(.tile-badges) .bill { padding-bottom: calc(8cqi + 34px); }

.tile-time {
  position: absolute; z-index: 3; left: 8px; top: 8px; padding: 5px 9px 4px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg);
  font: 850 21px/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.tile-status { position: absolute; z-index: 3; right: 8px; top: 8px; max-width: calc(100% - 78px); text-align: right; }
/* Dated tiles (single venue grid): the long date chip needs the full top row. */
.tile-status.is-below { top: 46px; left: 8px; right: auto; max-width: calc(100% - 16px); text-align: left; }
.tile-badges { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.tile .tag { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.tag-age { background: rgba(10, 10, 16, 0.78); color: #fff; }
.tag-price { background: var(--p-bg); color: var(--p-fg); font-variant-numeric: tabular-nums; }
.tile .tag-nosale { background: rgba(10, 10, 16, 0.78); color: #fff; box-shadow: none; }

.tile-text { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; min-width: 0; }
.tile-title {
  font: 800 21px/1.04 var(--display); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-title.tt-m { font-size: 19px; }
.tile-title.tt-l { font-size: 17.5px; }
.tile-title.tt-xl { font-size: 16.5px; }
.tile-link:hover .tile-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.tile-place {
  font-size: 13.5px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 600px) {
  .tile-title { font-size: 23px; }
  .tile-title.tt-m { font-size: 20.5px; }
  .tile-title.tt-l { font-size: 18.5px; }
  .tile-title.tt-xl { font-size: 17.5px; }
  .tile-place { font-size: 14px; }
}
.tile.is-past .tile-link { opacity: 0.5; }
.tile.is-past .tile-pic { filter: grayscale(0.5); }
.tile.is-cancelled .tile-title, .tile.is-cancelled .bill-title { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Several performances of one production: a time chip each. */
.tile-shows { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0 2px; }
.tshow {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
  font: 850 19px/1 var(--display); font-variant-numeric: tabular-nums;
}
.tshow:hover { border-color: var(--p-fg); text-decoration: none; }
.tshow.is-past { opacity: 0.45; }
.tshow.is-cancelled time { text-decoration: line-through; }
.tshow.is-sold { border-style: dashed; opacity: 0.7; }
.tshow.is-few { box-shadow: inset 0 -3px 0 var(--marker); }

/* No picture: a typographic bill in the venue's colours. */
.bill {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 48px 12cqi 12cqi; background: var(--p-bg); color: var(--p-fg);
  background-image: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--p-accent) 22%, transparent), transparent 70%);
}
.bill-kind {
  font: 750 max(11px, 5.4cqi)/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--p-muted); padding-bottom: 3cqi; border-bottom: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent);
}
.bill-title {
  margin: auto 0; padding: 4cqi 0;
  font: 900 16cqi/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em;
  overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.bill-title.tt-m { font-size: 13cqi; }
.bill-title.tt-l { font-size: 11cqi; -webkit-line-clamp: 7; }
.bill-title.tt-xl { font-size: 9.5cqi; -webkit-line-clamp: 8; }
.bill-venue {
  font: 700 max(12px, 5.8cqi)/1.2 var(--text); color: var(--p-muted);
  padding-top: 3cqi; border-top: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Badges and status sit where they do on picture tiles; the bill's own
   text makes room for them instead of being overlapped. */
.is-bill:has(.tile-badges) .bill { padding-bottom: calc(12cqi + 34px); }
.is-bill:has(.tile-status) .bill { padding-top: 48px; }
.is-bill:has(.tile-status.is-below) .bill { padding-top: 84px; }

.tile-date { font-size: 18px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-flat { margin-top: 14px; }


/* Multiplexes in the grid view: the poster leads. On phones it sits
   beside the title only; showtimes use the full width below. */
.is-posters .film { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
@media (max-width: 639px) {
  .is-posters .film { gap: 0 16px; }
  .is-posters .film-body { display: contents; }
  .is-posters .film-poster { grid-row: 1 / span 3; }
  .is-posters .film-title, .is-posters .film-meta { grid-column: 2; }
  .is-posters .film-title { align-self: end; }
  .is-posters .film-meta { align-self: start; }
  .is-posters .branch { grid-column: 1 / -1; }
  .is-posters .branch:first-of-type { margin-top: 14px; }
}
.is-posters .film-poster { border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.7); }
@media (min-width: 640px) {
  .is-posters .film { grid-template-columns: 176px minmax(0, 1fr); gap: 26px; }
  .is-posters .film-poster { border-radius: var(--r-card); }
  .is-posters .film-title { font-size: 32px; }
}

@media (max-width: 899px) {
  .vs { min-height: 44px; padding: 0 12px; }
  .tshow { min-height: 44px; padding: 0 12px; }
}
@media (max-width: 380px) {
  .vs span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- filter panel, wide screens: labelled rows in two columns ---------- */
.f-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); max-width: none; }
@media (min-width: 900px) {
  .filters { gap: 12px; }
  .f-panel {
    display: grid; gap: 0; padding: 4px 20px;
    border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface);
  }
  .f-group {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 11px 0;
  }
  .f-group + .f-group { border-top: 1px solid var(--rule); }
  .f-label {
    position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap;
    margin: 0; font: 800 20px/1 var(--display); color: var(--ink-2);
  }
  .f-label label { cursor: pointer; }
  .f-group .chips { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
  .f-row .chips { flex: 0 1 auto; }
  .f-date { display: inline-flex; align-items: center; gap: 8px; }
  .f-date-label {
    position: static; width: auto; height: auto; clip: auto; overflow: visible;
    font-size: 14.5px; font-weight: 650; color: var(--ink-2);
  }
  .f-venue { flex: 0 1 380px; max-width: 380px; }
  .f-note { margin: 0; }
}

/* ---------- footer ---------- */
.foot-h { font: 850 24px/1 var(--display); color: var(--ink); margin: 0 0 12px; }
.foot-h a { color: inherit; text-decoration: none; }
.dir { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }

/* Wide screens: one flowing directory, columns end at about the same height. */
.dir-cols { display: none; }
.dir-kind { font: 850 21px/1.15 var(--display); margin: 0; padding: 6px 0 4px; break-after: avoid; }
.dir-kind a { color: var(--ink); text-decoration: none; }
.dir-kind a:hover { text-decoration: underline; }
.dir-group { break-inside: auto; margin-bottom: 14px; }
.dir-group ul, .dir-acc ul, .foot-list { list-style: none; margin: 0; padding: 0; }
.dir-group li { break-inside: avoid; }
.dir-group li a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 15px; line-height: 1.35; text-decoration: none; }
.dir-group li a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 560px) {
  .dir-cols { display: block; columns: 2; column-gap: 32px; }
  .dir-acc { display: none; }
}
@media (min-width: 800px) { .dir-cols { columns: 3; } }
@media (min-width: 1100px) { .dir-cols { columns: 4; } }

/* Phones: each kind is a closed <details>. */
.dir-acc-group { border-top: 1px solid var(--rule); }
.dir-acc-group:last-child { border-bottom: 1px solid var(--rule); }
.dir-acc-group > summary {
  display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none;
  font: 850 21px/1 var(--display); color: var(--ink);
}
.dir-acc-group > summary::-webkit-details-marker { display: none; }
.dir-acc-group > summary::after { content: "+"; margin-left: auto; font: 700 22px/1 var(--text); color: var(--ink-2); }
.dir-acc-group[open] > summary::after { content: "−"; }
.dir-count { font: 600 15px/1 var(--text); color: var(--ink-2); }
.dir-acc li a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 16px; text-decoration: none; }
.dir-acc ul { padding-bottom: 8px; }

/* Lower band: three equal columns on wide screens, stacked on phones. */
.foot-band { display: grid; gap: 24px; padding-top: 24px; }
.foot-band p { margin: 0 0 10px; max-width: 60ch; }
.foot-list li a { display: inline-flex; align-items: center; min-height: 34px; font-weight: 650; }
.foot-cookie { font-weight: 650; font-size: inherit; }
.foot-copy { font-size: 13.5px; }
@media (min-width: 800px) { .foot-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 899px) {
  .foot-list li a, .foot-cookie { min-height: 44px; }
}

.foot-meta { font-size: 13.5px; color: var(--ink-2); margin-top: 16px; }
.no-more { color: var(--ink-2); font-size: 15px; text-align: center; }

/* ---------- exhibitions & "за деца" ---------- */
.tag-kids { background: #0f766e; color: #fff; }
.tag-stated { background: #3f3f46; color: #fff; }
.tag-last { background: #c2410c; color: #fff; }
.exhibits { margin-top: 18px; }
.ex-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 12px; font: 850 28px/1.1 var(--display);
}
.ex-head .day-count { font: 600 14px/1.2 var(--text); color: var(--ink-2); }
.ex-events { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ex-empty { color: var(--ink-2); margin: 6px 0 18px; }

/* ---------- event types (types.go): label + icon + colour ----------
   Colours meet WCAG AA as text on the page in both themes; the same
   colour draws a thin strip along the bottom of the tile's picture. */
:root { --ty-theatre: #9a4a00; --ty-film: #1f5fb3; --ty-concert: #a8326a; --ty-classical: #6b3fb0; --ty-opera: #b2352a; --ty-ballet: #0f7563; --ty-musical: #7d5f00; --ty-performance: #9b3b5a; --ty-standup: #4a7412; --ty-exhibition: #0f6a85; --ty-dance: #8a3aa8; --ty-magic: #6d28d9; --ty-literature: #9d174d; --ty-talk: #0e7490; --ty-workshop: #a16207; --ty-games: #be185d; --ty-fair: #b45309; --ty-sport: #0b7a3b; --ty-other: #555b6e; --ty-event: #555b6e; }
:root[data-theme="dark"] { --ty-theatre: #f6a85f; --ty-film: #7cb6ff; --ty-concert: #f78fb8; --ty-classical: #c6a6ff; --ty-opera: #ff8f80; --ty-ballet: #7fe0cf; --ty-musical: #ffd166; --ty-performance: #ff9ec0; --ty-standup: #a8de6f; --ty-exhibition: #6fd0ef; --ty-dance: #e9a6ff; --ty-magic: #b9a3ff; --ty-literature: #fda4af; --ty-talk: #67e8f9; --ty-workshop: #fcd34d; --ty-games: #f9a8d4; --ty-fair: #fdba74; --ty-sport: #6fe39a; --ty-other: #a9aec4; --ty-event: #a9aec4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ty-theatre: #f6a85f; --ty-film: #7cb6ff; --ty-concert: #f78fb8; --ty-classical: #c6a6ff; --ty-opera: #ff8f80; --ty-ballet: #7fe0cf; --ty-musical: #ffd166; --ty-performance: #ff9ec0; --ty-standup: #a8de6f; --ty-exhibition: #6fd0ef; --ty-dance: #e9a6ff; --ty-magic: #b9a3ff; --ty-literature: #fda4af; --ty-talk: #67e8f9; --ty-workshop: #fcd34d; --ty-games: #f9a8d4; --ty-fair: #fdba74; --ty-sport: #6fe39a; --ty-other: #a9aec4; --ty-event: #a9aec4; } }
.ty-theatre { --ty: var(--ty-theatre); }
.ty-film { --ty: var(--ty-film); }
.ty-concert { --ty: var(--ty-concert); }
.ty-classical { --ty: var(--ty-classical); }
.ty-opera { --ty: var(--ty-opera); }
.ty-ballet { --ty: var(--ty-ballet); }
.ty-musical { --ty: var(--ty-musical); }
.ty-performance { --ty: var(--ty-performance); }
.ty-standup { --ty: var(--ty-standup); }
.ty-exhibition { --ty: var(--ty-exhibition); }
.ty-dance { --ty: var(--ty-dance); }
.ty-magic { --ty: var(--ty-magic); }
.ty-literature { --ty: var(--ty-literature); }
.ty-talk { --ty: var(--ty-talk); }
.ty-workshop { --ty: var(--ty-workshop); }
.ty-games { --ty: var(--ty-games); }
.ty-fair { --ty: var(--ty-fair); }
.ty-sport, .ty-football, .ty-volleyball, .ty-basketball, .ty-running, .ty-cycling, .ty-combat { --ty: var(--ty-sport); }
.ty-other { --ty: var(--ty-other); }
.ty-event { --ty: var(--ty-event); }
.chip-back { border-style: dashed; }
.tl { display: inline-flex; align-items: center; gap: 4px; color: var(--ty); font-weight: 700; white-space: nowrap; }
.ticon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile .tile-img::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ty); pointer-events: none; }
.chip-ty { display: inline-flex; align-items: center; gap: 6px; }
.chip-ty .ticon { color: var(--ty); }
.chip-ty[aria-current] .ticon { color: currentColor; }

/* Event type on its own line, between the poster and the title. */
.tile-type, .ev-type { display: block; font-size: 13.5px; line-height: 1; margin: 6px 0 0; }
.tile-type .tl, .ev-type .tl { line-height: 1; }
/* The font's line box has extra room above the letters, so a centred
   icon looks low; lift it to the letters' optical middle. */
.tile-type .tl svg, .ev-type .tl svg { width: 15px; height: 15px; position: relative; top: -0.09em; }
.tile-type + .tile-title, .ev-type + .ev-title { margin-top: 1px; }

/* ---------- phones: the program first ----------
   The subscribe box moves below the events (the bottom bar has its own
   button), the price note lives in the filter sheet, the cards to the
   multiplexes and exhibitions sit side by side, and the lead is shorter. */
.f-note-sheet { display: none; }
/* The subscribe box follows the events on every screen: the program first. */
.agenda { display: flex; flex-direction: column; }
.agenda > .subbar { order: 10; margin-top: 28px; }
@media (max-width: 899px) {
  .agenda > .f-note { display: none; }
  .f-note-sheet { display: block; margin: 12px 0 0; }
  .mx-cards { grid-template-columns: 1fr 1fr; }
  .mx-card { min-height: 0; padding: 9px 12px; gap: 6px; }
  .mx-text strong { display: block; font-size: 18px; margin: 0 0 2px; }
  .mx-text span { font-size: 13px; }
  .mx-go { display: none; }
}
@media (max-width: 640px) {
  .tonight { padding-top: 16px; }
  .tonight-lead { font-size: 15px; margin: 6px 0 12px; }
}

/* Wide screens: the filters stay open but take less height, so the first
   events show sooner: "Кога" and "Вид" span the panel, the shorter rows
   (Цена, Публика, Още, Сцена) pair up in two columns. */
@media (min-width: 900px) {
  .f-panel > .f-group { padding: 7px 0; }
  .tonight { padding-top: 20px; }
  .tonight-lead { margin: 8px 0 12px; }
  .page-head { padding-top: 22px; }
}
@media (min-width: 1360px) {
  .f-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .f-panel > .f-wide { grid-column: 1 / -1; }
  .f-panel > * { order: 1; }
  .f-panel > .f-g-tag { order: 2; }
  .f-panel > .f-g-venue { order: 3; }
  .f-panel > .f-g-kind { order: 4; }
  .f-panel > .f-note-sheet, .f-panel > .sheet-foot { order: 5; }
  .f-panel > .f-group { padding: 7px 0; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .f-panel > .f-group + .f-group { border-top: 1px solid var(--rule); }
  .f-panel > .sheet-foot, .f-panel > .f-note-sheet, .f-panel > .sheet-head { grid-column: 1 / -1; }
}

/* Nine sections: the theme switch is its icon alone below 1600px (its
   label stays for screen readers), so the menu keeps one row from 1400px. */
@media (min-width: 900px) and (max-width: 1599px) {
  .theme-toggle { padding: 0 10px; }
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Today's events that began a while ago, folded under the evening. */
.day-started { margin-top: 14px; }
.day-started > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px dashed var(--rule); border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 650; color: var(--ink-2); list-style: none;
}
.day-started > summary::-webkit-details-marker { display: none; }
.day-started > summary::before { content: "▸"; }
.day-started[open] > summary::before { content: "▾"; }
.day-started[open] > summary { margin-bottom: 12px; }

/* The first screen: lower headings so the events start sooner. */
@media (min-width: 900px) {
  .tonight-h { font-size: clamp(44px, 4.6vw, 64px); }
  .page-head h1 { font-size: clamp(44px, 4.6vw, 64px); }
  .venue-name { font-size: clamp(40px, 4.4vw, 64px); }
  .tonight-lead { font-size: 16px; max-width: 70ch; }
}
/* Phones: the cookie question is one slim bar at the top, so it never
   covers the events or the event page's "Купи билет" bar at the bottom. */
@media (max-width: 899px) {
  .consent {
    top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  }
  .consent p { flex: 1 1 auto; font-size: 12.5px; line-height: 1.3; margin: 0; }
  .consent-actions { flex: none; flex-wrap: nowrap; gap: 6px; }
  .consent .btn { min-height: 38px; padding: 0 10px; font-size: 13.5px; }
}
/* Phones: denser event rows (about 7 a screen) and no lead line. */
@media (max-width: 639px) {
  .tonight-lead { display: none; }
  .ev-link { gap: 10px; padding: 7px 8px; }
  .ev-time { width: 56px; height: 52px; font-size: 21px; }
  .ev-thumb { width: 52px; height: 52px; }
  .ev-title { font-size: 19px; }
  .ev-place { font-size: 14px; }
  .ev-info { display: none; }
  .ev-tags { margin-top: 1px; }
}

/* An old event link: the stage's next events. */
.notfound h2 { margin-top: 32px; font: 850 26px/1.1 var(--display); }
.past-next { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; }
.past-next .muted { color: var(--ink-2); font-size: 15px; }