/**
 * TicketBox Design Tokens
 * Source of truth: ticketbox-design-tokens.md (2026-07-03)
 * Do NOT edit values without updating spec.
 */

:root {
  /* === FONT — single family === */
  --tb-font: 'Montserrat', sans-serif;

  /* === TYPE SCALE — restrained, max 4rem except hero === */
  --tb-text-xs:   0.75rem;    /* 12px */
  --tb-text-sm:   0.875rem;   /* 14px */
  --tb-text-base: 1rem;       /* 16px */
  --tb-text-md:   1.125rem;   /* 18px */
  --tb-text-lg:   1.375rem;   /* 22px */
  --tb-text-xl:   1.625rem;   /* 26px */
  --tb-text-2xl:  2.25rem;    /* 36px */
  --tb-text-3xl:  2.5rem;     /* 40px */
  --tb-text-hero: 4rem;       /* 64px — homepage hero only */

  /* Mobile variants */
  --tb-text-2xl-mobile:  1.5rem;    /* 24px */
  --tb-text-3xl-mobile:  1.875rem;  /* 30px */
  --tb-text-hero-mobile: 2.25rem;   /* 36px */

  /* Line heights */
  --tb-leading-tight:   1.2;
  --tb-leading-snug:    1.3;
  --tb-leading-normal:  1.5;
  --tb-leading-relaxed: 1.7;

  /* === COLORS — teal palette === */
  --tb-cream-50:  #FFFFFF;
  --tb-cream-100: #F5F9F9;
  --tb-cream-200: #E8F0F0;
  --tb-cream-300: #C5D8D8;

  --tb-card-bg:      #FFFFFF;
  --tb-card-bg-tint: #FFFFFF;
  --tb-card-bg-dark: #1A1818;

  /* Primary teal — matches ticketbox.bg exactly (extracted via computed styles) */
  --tb-red-50:  #EBF3F5;
  --tb-red-100: #C7DEE3;
  --tb-red-500: #00677F;
  --tb-red-600: #004355;
  --tb-red-700: #004355;

  /* Hero gradient */
  --tb-hero-from:       #0D4A4A;
  --tb-hero-mid:        #1A7A7A;
  --tb-newsletter-bg:   #F5F9F9;

  --tb-black:       #1A1818;
  --tb-text:        #1A1818;
  --tb-text-muted:  #666666;
  --tb-text-subtle: #999999;
  --tb-text-on-dark:#FFFFFF;

  --tb-success: #2D8B4D;
  --tb-warning: #B8761E;
  --tb-error:   #C8342A;

  /* === SPACING === */
  --tb-space-1:  0.25rem;  /* 4px  */
  --tb-space-2:  0.5rem;   /* 8px  */
  --tb-space-3:  0.75rem;  /* 12px */
  --tb-space-4:  1rem;     /* 16px */
  --tb-space-5:  1.5rem;   /* 24px */
  --tb-space-6:  2rem;     /* 32px */
  --tb-space-7:  3rem;     /* 48px */
  --tb-space-8:  4rem;     /* 64px */
  --tb-space-9:  5rem;     /* 80px */
  --tb-space-10: 6.5rem;   /* 104px */

  /* === RADIUS === */
  --tb-radius-sm:   4px;
  --tb-radius:      6px;
  --tb-radius-md:   8px;
  --tb-radius-lg:   12px;
  --tb-radius-full: 9999px;

  /* === SHADOWS === */
  --tb-shadow-xs: 0 1px 2px rgba(26, 24, 24, 0.04);
  --tb-shadow-sm: 0 2px 4px rgba(26, 24, 24, 0.05),
                  0 1px 2px rgba(26, 24, 24, 0.04);
  --tb-shadow-md: 0 4px 8px rgba(26, 24, 24, 0.06),
                  0 2px 4px rgba(26, 24, 24, 0.04);
  --tb-shadow-lg: 0 12px 24px rgba(26, 24, 24, 0.08),
                  0 4px 8px rgba(26, 24, 24, 0.05);

  /* === TRANSITIONS === */
  --tb-transition-fast: 150ms ease-out;
  --tb-transition:      250ms ease-out;
  --tb-transition-slow: 400ms ease-out;

  /* === LAYOUT === */
  --tb-container-max:     1280px;
  --tb-container-narrow:  760px;
  --tb-container-padding: var(--tb-space-5);

  /* === LEGACY ALIASES — existing CSS uses these; keep for backward compat === */
  /* All resolve to Montserrat via --tb-font */
  --font-display: var(--tb-font);
  --font-serif:   var(--tb-font);
  --font-body:    var(--tb-font);
  --font-mono:    var(--tb-font);

  /* Spacing aliases (old CSS uses --sp-*) */
  --sp-1:  var(--tb-space-1);
  --sp-2:  var(--tb-space-2);
  --sp-3:  var(--tb-space-3);
  --sp-4:  var(--tb-space-4);
  --sp-5:  var(--tb-space-5);
  --sp-6:  var(--tb-space-6);
  --sp-7:  var(--tb-space-7);
  --sp-8:  var(--tb-space-8);
  --sp-9:  var(--tb-space-9);
  --sp-10: var(--tb-space-10);

  /* Radius aliases */
  --radius-sm:   var(--tb-radius-sm);
  --radius:      var(--tb-radius);
  --radius-md:   var(--tb-radius-md);
  --radius-lg:   var(--tb-radius-lg);
  --radius-full: var(--tb-radius-full);

  /* Shadow aliases */
  --shadow-sm: var(--tb-shadow-sm);
  --shadow-md: var(--tb-shadow-md);
  --shadow-lg: var(--tb-shadow-lg);

  /* Transition aliases */
  --t-fast: var(--tb-transition-fast);
  --t:      var(--tb-transition);
  --t-slow: var(--tb-transition-slow);
}

@media (min-width: 768px) {
  :root {
    --tb-container-padding: var(--tb-space-6);
  }
}

/**
 * TicketBox Typography
 * Per VISUAL-SPEC.md sections 1.1–1.6
 * Single font: Montserrat (geometric sans-serif, Cyrillic supported).
 * Scale capped at --tb-text-3xl (2.5rem / 40px).
 * Exception: .tb-hero__title uses --tb-text-hero (3.25rem / 52px).
 */

/* Visually hidden but available to screen readers (standard WP utility class) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

html {
  font-family: var(--tb-font);
  font-size: 16px;
  line-height: var(--tb-leading-normal);
  color: var(--tb-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

body {
  font-family: var(--tb-font);
  font-weight: 400;
  background: var(--tb-cream-50);
  color: var(--tb-text);
  letter-spacing: 0.01em;
  line-height: 1.75;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Headings — Montserrat, geometric sans */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tb-font);
  font-weight: 600;
  line-height: var(--tb-leading-tight);
  letter-spacing: 0.02em;
  margin: 0 0 var(--tb-space-4) 0;
  color: var(--tb-black);
}

h1 { font-size: var(--tb-text-3xl); }
h2 { font-size: var(--tb-text-2xl); }
h3 { font-size: var(--tb-text-xl); }
h4 { font-size: var(--tb-text-lg); }
h5 { font-size: var(--tb-text-base); font-weight: 700; }
h6 { font-size: var(--tb-text-sm);   font-weight: 700; }

/* Body */
p {
  margin: 0 0 var(--tb-space-4) 0;
  line-height: var(--tb-leading-relaxed);
}

p.tb-lead { font-size: var(--tb-text-md); }

/* Eyebrow labels */
.tb-eyebrow {
  font-family: var(--tb-font);
  font-size: var(--tb-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tb-red-500);
  font-style: normal;
}

/* Meta / caption text */
.tb-meta {
  font-size: var(--tb-text-sm);
  color: var(--tb-text-muted);
  line-height: 1.5;
}

/* Numbers */
.tb-number,
.tb-price,
time,
.tb-date {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Form elements */
input, textarea, select, button {
  font-family: var(--tb-font);
}

/* Mobile sizes */
@media (max-width: 768px) {
  h1 { font-size: var(--tb-text-3xl-mobile); }
  h2 { font-size: var(--tb-text-2xl-mobile); }
  h3 { font-size: var(--tb-text-xl); }
}

/* WP block editor compatibility */
.wp-block-heading {
  font-family: var(--tb-font);
  font-weight: 600;
}

.wp-block-paragraph,
.wp-block-list,
.wp-block-quote {
  font-family: inherit;
}

/* Override ALL WP preset font-family utility classes → Montserrat */
.has-display-font-family,
.has-body-font-family,
.has-mono-font-family,
.has-serif-font-family {
  font-family: var(--tb-font) !important;
}

/*
Theme Name: TicketBox
Theme URI: https://ticketbox.bg
Author: TicketBox / Vili Velichkov
Description: Официалната тема на TicketBox — платформа за билети и управление на събития.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: ticketbox
*/

/* ══════════════════════════════════════════════════
   DESIGN TOKENS — Light theme as default
   Dark theme optionally via [data-theme="dark"]
   ══════════════════════════════════════════════════ */

:root {
  /* ── Font vars: aliases live in _tokens.css → all resolve to Montserrat ── */
  --nav-h: 72px;

  /* ── Backgrounds (light default) ── */
  --bg-primary:    #FFFFFF;
  --bg-surface:    #ffffff;
  --bg-elevated:   #F5F9F9;
  --bg-hover:      rgba(0,103,127,0.06);

  /* ── Text ── */
  --text-primary:   #1a1818;
  --text-secondary: #444444;
  --text-muted:     #666666;
  --text-inverse:   #ffffff;

  /* ── Borders ── */
  --border-subtle:  rgba(0,103,127,0.10);
  --border-default: rgba(0,103,127,0.20);
  --border-strong:  rgba(0,103,127,0.35);

  /* ── Brand ── */
  --brand-red:       #00677F;
  --brand-red-hover: #004355;
  --brand-gold:      #b88b5a;
  --brand-gold-hover:#9a6f42;

  /* ── Semantic ── */
  --success: #2D8B4D;
  --warning: #e65100;
  --danger:  #C8342A;

  /* ── Overlays ── */
  --overlay-dark: rgba(26,26,26,0.6);
  --scrim:        rgba(255,255,255,0.95);

  color-scheme: light;

  /* ── Legacy aliases (existing CSS uses these names) ── */
  --red:        #00677F;
  --red-dark:   #004355;
  --black:      var(--bg-primary);
  --black2:     var(--bg-surface);
  --black3:     var(--bg-elevated);
  --white:      var(--text-primary);
  --white-dim:  rgba(26,26,26,.70);
  --white-faint:rgba(26,26,26,.06);
  --gold:       var(--brand-gold);

  /* ── Nav vars ── */
  --nav-bg-rest:     rgba(0,103,127,0);
  --nav-bg-scrolled: rgba(0,103,127,.96);
  --mobile-overlay:  rgba(26,26,26,.60);
  --panel-border:    rgba(0,103,127,.20);
  --bar-bg:          rgba(255,255,255,.97);
}

/* ══════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Opt-in via data-theme="dark" (unused elsewhere) or the
   .tb-dark-theme body class (site-brand.php, per-site tb_site_brand
   dark_theme flag — e.g. DryVia's charcoal/gold redesign).
   ══════════════════════════════════════════════════ */

[data-theme="dark"],
.tb-dark-theme {
  --bg-primary:    #0C0C0E;
  --bg-surface:    #151311;
  --bg-elevated:   #1f1c1a;
  --bg-hover:      rgba(255,255,255,0.04);

  --text-primary:   #f5f1ea;
  --text-secondary: #c4bdb3;
  --text-muted:     #8a8379;
  --text-inverse:   #1a1a1a;

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.15);
  --border-strong:  rgba(255,255,255,0.30);

  --brand-red:       #20AAAA;
  --brand-red-hover: #1A8A8A;
  --brand-gold:      #d4a574;
  --brand-gold-hover:#b88b5a;

  --success: #4caf50;
  --warning: #ff9800;
  --danger:  #e53935;

  --overlay-dark: rgba(0,0,0,0.7);
  --scrim:        rgba(11,10,9,0.95);

  color-scheme: dark;

  --red:        #20AAAA;
  --red-dark:   #1A8A8A;
  --black:      var(--bg-primary);
  --black2:     var(--bg-surface);
  --black3:     var(--bg-elevated);
  --white:      var(--text-primary);
  --white-dim:  rgba(255,255,255,.55);
  --white-faint:rgba(255,255,255,.06);
  --gold:       var(--brand-gold);

  --nav-bg-rest:     rgba(11,10,9,0);
  --nav-bg-scrolled: rgba(11,10,9,.96);
  --mobile-overlay:  rgba(11,10,9,.72);
  --panel-border:    rgba(0,103,127,.25);
  --bar-bg:          rgba(11,10,9,.97);
}

/* ── Smooth theme transition ── */
body,
.tb-nav,
.tb-mobile-panel,
.tb-ep-bar,
.tb-about,
.tb-services,
.tb-contact,
.tb-footer {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ══════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Form elements must inherit theme fonts, not browser/WP defaults */
input, textarea, select, button { font-family: var(--font-body); }

/* Headings always use display font — overrides WP block editor defaults */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* WP block editor utility class overrides — point to our fonts, not old presets */
.has-display-font-family { font-family: var(--font-display) !important; }
.has-body-font-family    { font-family: var(--font-body) !important; }
.has-mono-font-family    { font-family: var(--font-mono) !important; }
/* Legacy WP preset slug "serif" now maps to Fraunces */
.has-serif-font-family   { font-family: var(--font-display) !important; }

/* ── Icon system ── */
.tb-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.tb-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

/* ── Custom cursor ── */
.tb-cursor {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
.tb-cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(0,103,127,.35);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}
.tb-cursor-ring.hovered { width: 52px; height: 52px; border-color: var(--red); }

/* ══════════════════════════════════════════════════
   BUTTONS — unified system
   Base: btn-red (filled teal) | btn-ghost (underline)
   Sizes: --sm (nav) | default | --lg (hero CTAs)
   ══════════════════════════════════════════════════ */

.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: #FFFFFF; background: var(--tb-red-500);
  padding: 14px 32px; border: none; cursor: none;
  transition: background .2s; text-decoration: none;
  white-space: nowrap; border-radius: var(--tb-radius-full);
}
.btn-red:hover { background: var(--tb-red-600); color: #FFFFFF; }

/* Size variants */
.btn-red--sm { padding: 9px 20px; font-size: 10px; }
.btn-red--lg { padding: 16px 40px; font-size: 12px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: var(--tb-text-muted);
  padding: 14px 0;
  border-bottom: 1px solid var(--tb-cream-300);
  background: none; cursor: none;
  transition: color .2s, border-color .2s; text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--tb-black); border-color: var(--tb-black); }

/* Dark-context ghost (hero overlay) */
.btn-ghost--light {
  color: rgba(255,255,255,.80);
  border-color: rgba(255,255,255,.40);
}
.btn-ghost--light:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ══════════════════════════════════════════════════
   SECTION LABELS + TITLES
   ══════════════════════════════════════════════════ */

.section-label {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: .38em; text-transform: uppercase; font-weight: 600;
  color: var(--red); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; display: block;
  width: 22px; height: 1px; background: var(--red);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--tb-text-3xl);
  line-height: 1.05; letter-spacing: -.01em; font-weight: 600;
  color: var(--text-primary);
}

/* Archive header — standard section opener for archive pages */
.tb-archive-header {
  padding: calc(var(--nav-h) + 48px) 48px 40px;
}
.tb-archive-header .section-title {
  font-size: var(--tb-text-2xl);
  margin-bottom: 12px;
}
.tb-archive-header p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 520px;
  margin-top: 12px;
}

/* ══════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ══════════════════════════════════════════════════ */

.tb-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.tb-reveal.visible { opacity: 1; transform: translateY(0); }
.tb-reveal.d1 { transition-delay: .15s; }
.tb-reveal.d2 { transition-delay: .30s; }
.tb-reveal.d3 { transition-delay: .45s; }

/* ══════════════════════════════════════════════════
   FAB — floating action button
   ══════════════════════════════════════════════════ */

.tb-fab {
  position: fixed; bottom: 32px; right: 32px; z-index: 150;
  background: var(--red); color: #FFFFFF;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  padding: 13px 24px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(0,103,127,.30);
  transition: background .2s, box-shadow .2s, transform .2s, opacity .2s;
  cursor: none;
}
/* Hidden once the footer scrolls into view — otherwise the fixed FAB
   sits on top of footer content, especially on short pages. */
.tb-fab--hidden { opacity: 0; pointer-events: none; }
.tb-fab:hover {
  background: var(--red-dark);
  box-shadow: 0 8px 32px rgba(0,103,127,.45);
  transform: translateY(-2px);
  color: #FFFFFF;
}
.tb-fab__dot {
  width: 5px; height: 5px;
  background: #FFFFFF; border-radius: 50%;
  animation: tb-pulse 2s infinite;
}

/* ══════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════ */

@keyframes tb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tb-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes tb-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-scroll-line {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%       { transform: scaleY(.6); opacity: .4; }
}
@keyframes tb-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}
@keyframes tb-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 960px
   ══════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .tb-archive-header { padding: calc(var(--nav-h) + 32px) 24px 28px; }
  .tb-fab { padding: 11px 18px; font-size: 9px; bottom: 20px; right: 20px; }
}

/* ════════════════════════════════
   NAV
   ════════════════════════════════ */
.tb-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200; height: var(--nav-h);
  padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--nav-bg-rest);
  transition: background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.tb-nav.scrolled {
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(20px);
  border-color: var(--panel-border);
}
.tb-nav__logo {
  color: var(--text-primary); text-decoration: none;
  display: flex; align-items: center; flex-shrink: 0;
  transition: color .2s;
}
/* ── Text-only wordmark — no logo image, by design ──
   Color comes from .tb-nav__logo (inherited) so it still follows the
   existing .scrolled/.is-overlay state overrides below.
   TicketBox: Montserrat 700, letter-spacing 1px.
   DryVia (.tb-dark-theme/.tb-dark-chrome): Bebas Neue via --tb-heading-font,
   letter-spacing 4px. ── */
.tb-nav__logo-text {
  font-family: var(--tb-font);
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
}
.tb-dark-theme .tb-nav__logo-text,
.tb-dark-chrome .tb-nav__logo-text {
  font-family: var(--tb-heading-font, var(--tb-font));
  letter-spacing: 4px;
}


.tb-nav__links {
  display: flex; gap: 32px; list-style: none;
  align-items: center; flex: 1; justify-content: center;
}
.tb-nav__links a {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: color .2s; white-space: nowrap; position: relative;
}
.tb-nav__links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.tb-nav__links a:hover { color: var(--text-primary); }
.tb-nav__links a:hover::after { transform: scaleX(1); }
.tb-nav__links li.current-menu-item > a { color: var(--text-primary); }
.tb-nav__links li.current-menu-item > a::after { transform: scaleX(1); }

.tb-nav__cta {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--text-primary); text-decoration: none;
  border: 1px solid var(--border-default); padding: 9px 20px;
  white-space: nowrap; transition: background .2s, border-color .2s, color .2s; flex-shrink: 0;
}
.tb-nav__cta:hover { background: var(--red); border-color: var(--red); color: #FFFFFF; }

/* ── Overlay state: nav sitting over a dark hero image ─────
   JS adds .is-overlay when body.has-hero-image + not scrolled.
   Removed when user scrolls past threshold (scroll ≥ 60px).  ── */
.tb-nav.is-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: none;
  border-color: transparent;
}
.tb-nav.is-overlay .tb-nav__logo         { color: rgba(255,255,255,.92); }
.tb-nav.is-overlay .tb-nav__links a       { color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); }
.tb-nav.is-overlay .tb-nav__links a:hover,
.tb-nav.is-overlay .tb-nav__links li.current-menu-item > a { color: #FFFFFF; }
.tb-nav.is-overlay .tb-nav__cta           { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.35); }
.tb-nav.is-overlay .tb-nav__cta:hover     { background: var(--red); border-color: var(--red); color: #FFFFFF; }

/* ── Scrolled: always teal bg, always white text (wins over overlay) ── */
.tb-nav.scrolled .tb-nav__logo            { color: #FFFFFF; }
.tb-nav.scrolled .tb-nav__links a         { color: rgba(255,255,255,.85); text-shadow: none; }
.tb-nav.scrolled .tb-nav__links a:hover,
.tb-nav.scrolled .tb-nav__links li.current-menu-item > a { color: #FFFFFF; }
.tb-nav.scrolled .tb-nav__cta             { color: #FFFFFF; border-color: rgba(255,255,255,.5); }


/* ════════════════════════════════
   HERO
   ════════════════════════════════ */
.tb-hero {
  min-height: 70vh; max-height: 720px; position: relative;
  display: flex; align-items: flex-end;
  padding: 0 var(--tb-space-7) var(--tb-space-9); overflow: hidden;
  background: var(--tb-black);
}
.tb-hero__bg {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  filter: brightness(.32) saturate(.8);
  will-change: transform;
}
.tb-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,.92) 0%, transparent 55%, rgba(8,8,8,.20) 100%);
}
.tb-hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.tb-hero__vline {
  position: absolute; left: 48px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--red) 30%, var(--red) 70%, transparent);
  opacity: .3;
}
.tb-hero__content { position: relative; z-index: 2; max-width: 720px; }
.tb-hero__eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--red);
  margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
  opacity: 0; animation: tb-fade-up .8s .3s forwards;
  font-family: var(--font-body); font-weight: 500;
}
.tb-hero__eyebrow::before { content: ''; display: block; width: 36px; height: 1px; background: var(--red); }
.tb-hero__title {
  font-family: var(--tb-font);
  font-size: var(--tb-text-hero); line-height: var(--tb-leading-tight); letter-spacing: -.01em; font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--tb-space-5); opacity: 0; animation: tb-fade-up .8s .5s forwards;
}
.tb-hero__title span { color: var(--tb-red-500); display: block; font-style: italic; }
.tb-hero__sub {
  font-family: var(--font-body); font-size: var(--tb-text-md); font-weight: 400;
  color: rgba(255,255,255,.72); margin-bottom: var(--tb-space-6);
  opacity: 0; animation: tb-fade-up .8s .7s forwards;
  max-width: 520px; line-height: var(--tb-leading-relaxed);
}
.tb-hero__actions {
  display: flex; gap: 20px; align-items: center;
  opacity: 0; animation: tb-fade-up .8s .9s forwards;
}
.tb-hero__scroll {
  position: absolute; bottom: 40px; right: 48px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: tb-fade-in 1s 1.2s forwards;
}
.tb-hero__scroll span {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.55); writing-mode: vertical-rl;
}
.tb-hero__scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: tb-scroll-line 2s infinite;
}


/* ════════════════════════════════
   TICKER
   ════════════════════════════════ */
.tb-ticker { background: var(--red); overflow: hidden; padding: 10px 0; }
.tb-ticker__track {
  display: flex; width: max-content;
  animation: tb-ticker 28s linear infinite;
}
.tb-ticker__item {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 0 32px; color: #FFFFFF;
  display: flex; align-items: center; gap: 32px; white-space: nowrap;
}
.tb-ticker__item::after { content: '◆'; font-size: 6px; opacity: .5; }


/* Events section styles live in assets/css/events.css (Micro 6 kinematograf cards) */


/* ════════════════════════════════
   MOBILE BURGER + SLIDE-IN PANEL
   ════════════════════════════════ */

.tb-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: none; padding: 8px; flex-shrink: 0;
}
.tb-nav__burger span {
  display: block; height: 1px;
  background: var(--text-primary);
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}
/* Over dark hero — keep burger lines white */
.tb-nav.is-overlay .tb-nav__burger span { background: rgba(255,255,255,.85); }
.tb-nav.scrolled   .tb-nav__burger span { background: #FFFFFF; }

.tb-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tb-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tb-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.tb-mobile-overlay {
  position: fixed; inset: 0;
  background: var(--mobile-overlay);
  backdrop-filter: blur(4px);
  z-index: 299;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.tb-mobile-overlay.active { opacity: 1; pointer-events: auto; visibility: visible; }

.tb-mobile-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--bg-surface);
  border-left: 1px solid var(--panel-border);
  z-index: 300;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.23,1,.32,1), visibility .4s;
  display: flex; flex-direction: column;
}
.tb-mobile-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.tb-mobile-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: var(--nav-h);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.tb-mobile-panel__close {
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: none; padding: 8px;
  transition: color .2s;
}
.tb-mobile-panel__close:hover { color: var(--red); }

.tb-mobile-panel__nav {
  display: flex; flex-direction: column;
  padding: 24px 28px 40px;
  flex: 1; overflow-y: auto;
}
.tb-mobile-panel__nav ul { list-style: none; display: contents; }
.tb-mobile-panel__nav li { display: contents; }
.tb-mobile-panel__nav a {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color .2s, padding-left .2s;
  display: block;
}
.tb-mobile-panel__nav a:hover { color: var(--text-primary); padding-left: 6px; }
.tb-mobile-panel__cta {
  margin-top: 28px;
  text-align: center !important;
  display: block !important;
  padding: 14px 24px !important;
  border-bottom: none !important;
}
.tb-mobile-panel__cta:hover { padding-left: 0 !important; }

/* Footer nav */
.tb-footer__nav ul { list-style: none; display: contents; }
.tb-footer__nav li { display: contents; }

@media (max-width: 960px) {
  .tb-nav { padding: 0 24px; }
  .tb-nav__links { display: none; }
  .tb-nav__cta   { display: none; }
  .tb-nav__burger { display: flex; }
  .tb-nav__logo-text { font-size: 15px; }

  .tb-hero { padding: 0 var(--tb-space-5) var(--tb-space-8); max-height: none; }
  .tb-hero__vline { left: var(--tb-space-5); }
  .tb-hero__title { font-size: var(--tb-text-hero-mobile); line-height: var(--tb-leading-tight); }
  .tb-hero__sub { font-size: var(--tb-text-base); }
  .tb-hero__actions { flex-wrap: wrap; }
  .tb-hero__scroll  { right: var(--tb-space-5); }
}

@media (max-width: 480px) {
  .tb-hero { padding: 0 var(--tb-space-4) var(--tb-space-7); }
  .tb-hero__title { font-size: var(--tb-text-hero-mobile); word-break: break-word; }
  .tb-hero__eyebrow { font-size: var(--tb-text-xs); }
}

/**
 * Event Card — kinematograf-style pattern
 * Per VISUAL-SPEC section 6.2
 * Also covers: homepage events section, event archive grid
 */

/* ─── Card shell ──────────────────────────────────────────── */
.tb-event-card {
  position: relative;
  display: block;
  background: var(--tb-card-bg);
  border-radius: var(--tb-radius-lg);
  overflow: hidden;
  transition: transform var(--tb-transition), box-shadow var(--tb-transition);
  box-shadow: var(--tb-shadow-sm);
}
.tb-event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tb-shadow-lg);
}
.tb-event-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ─── Dark band ───────────────────────────────────────────── */
.tb-event-card__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tb-space-3) var(--tb-space-4);
  background: var(--tb-card-bg-dark);
  color: var(--tb-text-on-dark);
  min-height: 56px;
}
.tb-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.tb-event-card__day {
  font-family: var(--tb-font);
  font-size: var(--tb-text-2xl);
  font-weight: 700;
  color: var(--tb-red-500);
  font-feature-settings: "lnum" 1;
  line-height: 1;
}
.tb-event-card__month {
  font-size: var(--tb-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tb-text-on-dark);
  margin-top: 4px;
  line-height: 1;
}
.tb-event-card__brand {
  display: flex;
  align-items: center;
  gap: var(--tb-space-2);
  font-size: var(--tb-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tb-red-500);
}
.tb-event-card__brand .tb-icon {
  color: var(--tb-red-500);
  flex-shrink: 0;
}

/* ─── Poster image ────────────────────────────────────────── */
.tb-event-card__image {
  position: relative;
  overflow: hidden;
  background: var(--tb-cream-100);
  /* No aspect-ratio — poster preserves natural proportions */
}
.tb-event-card__img,
.tb-event-card__image img {
  width: 100%;
  height: auto;          /* Natural aspect ratio — no cropping */
  display: block;
  transition: transform var(--tb-transition-slow);
}
.tb-event-card:hover .tb-event-card__img,
.tb-event-card:hover .tb-event-card__image img {
  transform: scale(1.03);
}
.tb-event-card__img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--tb-cream-200);
  color: var(--tb-text-subtle);
}
.tb-event-card__venue-label {
  position: absolute;
  bottom: var(--tb-space-3);
  right: var(--tb-space-3);
  padding: var(--tb-space-1) var(--tb-space-3);
  background: var(--tb-red-500);
  color: #ffffff;
  font-size: var(--tb-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--tb-radius-sm);
}

/* ─── Card body ───────────────────────────────────────────── */
.tb-event-card__body {
  padding: var(--tb-space-5);
  background: var(--tb-card-bg);
}
.tb-event-card__eyebrow {
  display: inline-block;
  margin-bottom: var(--tb-space-2);
}
.tb-event-card__title {
  font-size: var(--tb-text-lg);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--tb-space-3);
  color: var(--tb-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tb-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-4);
  margin-top: var(--tb-space-3);
}
.tb-event-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-space-2);
  font-size: var(--tb-text-sm);
  color: var(--tb-text-muted);
}
.tb-event-card__meta-item .tb-icon {
  color: var(--tb-text-muted);
  flex-shrink: 0;
}
.tb-event-card__meta-item .tb-price {
  font-weight: 600;
  color: var(--tb-black);
}

/* ─── Events grid (homepage + archive) ───────────────────── */
/* CSS columns masonry — cards vary in height per poster ratio */
.tb-events-grid {
  column-count: 3;
  column-gap: var(--tb-space-5);
}
.tb-event-card {
  break-inside: avoid;
  margin-bottom: var(--tb-space-5);
}
@media (max-width: 1024px) {
  .tb-events-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .tb-events-grid { column-count: 1; }
}

/* ─── Homepage events section ─────────────────────────────── */
.tb-events-section {
  padding: var(--tb-space-9) 0;
}
.tb-events-section .tb-container {
  width: 100%;
  max-width: var(--tb-container-max);
  margin: 0 auto;
  padding-left: var(--tb-container-padding);
  padding-right: var(--tb-container-padding);
}
.tb-events-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--tb-space-7);
  gap: var(--tb-space-5);
}
.tb-events-section__header-left { display: flex; flex-direction: column; gap: var(--tb-space-2); }
.tb-events-section__title {
  font-size: var(--tb-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--tb-black);
  margin: 0;
}
.tb-events-section__link {
  font-size: var(--tb-text-sm);
  font-weight: 500;
  color: var(--tb-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tb-transition);
  flex-shrink: 0;
}
.tb-events-section__link:hover { color: var(--tb-red-500); }
.tb-events-section__empty {
  column-span: all;
  break-inside: avoid;
  text-align: center;
  padding: 40px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  text-decoration: none;
  color: #666666;
}

/* ─── Archive page ────────────────────────────────────────── */
.tb-events-archive {
  padding-top: var(--tb-space-7);
  padding-bottom: var(--tb-space-9);
}
.tb-events-archive .tb-container {
  width: 100%;
  max-width: var(--tb-container-max);
  margin: 0 auto;
  padding-left: var(--tb-container-padding);
  padding-right: var(--tb-container-padding);
}
.tb-archive-filters {
  display: flex;
  gap: var(--tb-space-3);
  margin-bottom: var(--tb-space-7);
  border-bottom: 1px solid var(--tb-cream-200);
  padding-bottom: var(--tb-space-4);
  flex-wrap: wrap;
}
.tb-archive-filters__item {
  font-size: var(--tb-text-sm);
  font-weight: 500;
  color: var(--tb-text-muted);
  text-decoration: none;
  padding: var(--tb-space-2) var(--tb-space-4);
  border-radius: var(--tb-radius-full);
  border: 1px solid transparent;
  transition: all var(--tb-transition);
}
.tb-archive-filters__item:hover {
  color: var(--tb-black);
  border-color: var(--tb-cream-300);
}
.tb-archive-filters__item--active {
  color: var(--tb-black);
  background: var(--tb-cream-100);
  border-color: var(--tb-cream-300);
}
.tb-archive-pagination {
  margin-top: var(--tb-space-7);
  display: flex;
  justify-content: center;
  gap: var(--tb-space-3);
}
.tb-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  font-size: var(--tb-text-sm);
  font-weight: 500;
  color: var(--tb-text-muted);
  text-decoration: none;
  border: 1px solid var(--tb-cream-200);
  border-radius: var(--tb-radius);
  transition: all var(--tb-transition);
}
.tb-archive-pagination .page-numbers:hover,
.tb-archive-pagination .page-numbers.current {
  background: var(--tb-black);
  color: var(--tb-text-on-dark);
  border-color: var(--tb-black);
}

/* ─── Featured badge ──────────────────────────────────────── */
.tb-badge--featured {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 3px 9px;
  background: var(--tb-red-500, #00677F);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
}

/* Sold-out badge — same position/shape as featured, dark background */
.tb-badge--sold-out {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  padding: 3px 9px;
  background: var(--tb-black, #1a0a0a);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
}

/* Featured section — same layout, subtle top separator */
.tb-featured-events {
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  margin-bottom: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .tb-events-section { padding: var(--tb-space-7) 0; }
  .tb-events-section__header { flex-direction: column; align-items: flex-start; }
  .tb-events-archive { padding-top: var(--tb-space-5); }
}
@media (max-width: 480px) {
  .tb-event-card__day { font-size: var(--tb-text-xl); }
}

/* ════════════════════════════════
   EVENT PAGE — split layout
   ════════════════════════════════ */
/* Prevent content from spilling outside viewport on any element in this page */
.tb-ep-body, .tb-ep-info, .tb-ep-ticket,
.tb-ep-ticket__hd, .tb-ep-ticket__form,
.tb-ep-ticket__buy-wrap, .tb-ep-ticket__promo {
  box-sizing: border-box;
  max-width: 100%;
}
/* Spacer — reserves space for BOTH fixed nav AND fixed event bar */
.tb-ep-nav-spacer {
  height: calc(var(--nav-h, 72px) + 64px);  /* fallback 72px if JS hasn't run yet */
  display: block;
  width: 100%;
}

.tb-ep-bar {
  position: fixed;
  top: var(--nav-h, 72px);  /* fallback 72px for FOUC / JS-disabled */
  left: 0; right: 0;
  z-index: 150;              /* below tb-nav (200), above all content */
  height: 64px; background: var(--bar-bg);
  border-bottom: 1px solid rgba(0,103,127,.15);
  backdrop-filter: blur(16px);
  display: flex; align-items: center;
  padding: 0 40px; gap: 20px;
}
.tb-ep-bar__back {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--white-dim); text-decoration: none;
  transition: color .2s; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
.tb-ep-bar__back:hover { color: var(--white); }
.tb-ep-bar__sep { width: 1px; height: 28px; background: var(--border-default); flex-shrink: 0; }
.tb-ep-bar__title {
  font-family: var(--font-display); font-size: 17px; letter-spacing: .06em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-ep-bar__meta {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--white-dim); flex-shrink: 0; white-space: nowrap;
}
.tb-ep-bar__price {
  font-family: var(--font-display); font-size: 20px; color: var(--gold);
  flex-shrink: 0; letter-spacing: .04em;
}

/* Split body — below both fixed bars */
.tb-ep-body {
  display: grid; grid-template-columns: 1fr 440px;
  min-height: calc(100vh - var(--nav-h, 72px) - 64px);
}

/* Left — info */
.tb-ep-info {
  padding: 48px 52px 80px;
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
}
/* Hero grid: portrait image | event meta side by side */
.tb-ep-hero {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 40px;
}
.tb-ep-hero__info { display: flex; flex-direction: column; }

/* Portrait image pane */
.tb-ep-poster {
  width: 100%; aspect-ratio: 4/5;
  background-color: #1a0a0a;
  background-size: cover; background-position: center center;
  background-repeat: no-repeat;
  filter: none;
}
.tb-ep-datetime {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.tb-ep-title {
  font-family: var(--font-display); font-size: clamp(28px,4vw,52px);
  letter-spacing: .03em; line-height: 1; margin-bottom: 20px;
}
.tb-ep-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.tb-ep-tag {
  font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--red); border: 1px solid rgba(0,103,127,.35); padding: 4px 10px;
}
.tb-ep-tag--gold { color: var(--gold); border-color: rgba(201,169,110,.35); }
.tb-ep-pills { display: flex; gap: 2px; margin-bottom: 32px; }
.tb-ep-pill {
  padding: 12px 16px; background: var(--black2); flex: 1; text-align: center;
}
.tb-ep-pill__label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); display: block; margin-bottom: 5px;
}
.tb-ep-pill__value { font-family: var(--font-display); font-size: 18px; letter-spacing: .03em; font-weight: 500; }
.tb-ep-desc {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.85;
  color: var(--text-secondary); margin-bottom: 36px;
}
.tb-ep-desc p + p { margin-top: 16px; }

/* Gallery */
.tb-ep-gallery__label {
  font-size: 9px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--red); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.tb-ep-gallery__label::before { content: ''; display: block; width: 16px; height: 1px; background: var(--red); }
.tb-ep-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.tb-ep-gallery__item {
  aspect-ratio: 4/3; background-size: cover; background-position: center;
  filter: brightness(.75); transition: filter .3s;
}
.tb-ep-gallery__item:hover { filter: brightness(1); }

/* Right — ticket */
.tb-ep-ticket {
  background: var(--black2);
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(0,103,127,.08);
  position: sticky; top: calc(var(--nav-h, 72px) + 64px);
  height: calc(100vh - var(--nav-h, 72px) - 64px);
  overflow-y: auto;
}
.tb-ep-ticket__hd {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.tb-ep-ticket__label {
  font-size: 9px; letter-spacing: .35em; text-transform: uppercase; color: var(--red);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.tb-ep-ticket__label::before { content: ''; display: block; width: 16px; height: 1px; background: var(--tb-accent, var(--red)); }
.tb-ep-ticket__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.tb-ep-ticket__name { font-family: var(--font-display); font-size: 19px; letter-spacing: .04em; }
.tb-ep-ticket__price { font-family: var(--font-mono); font-size: 21px; color: var(--gold); }

/* Qty */
.tb-ep-ticket__qty-wrap {
  padding: 20px 32px; border-bottom: 1px solid var(--border-subtle);
}
.tb-ep-ticket__qty-label {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--white-dim); margin-bottom: 12px;
}
.tb-ep-ticket__qty-row { display: flex; align-items: center; margin-bottom: 16px; }
.tb-ep-ticket__qty-btn {
  width: 44px; height: 44px; background: var(--black3);
  border: 1px solid var(--border-default); color: var(--white);
  font-size: 20px; cursor: none; transition: background .2s, border-color .2s; line-height: 1;
}
.tb-ep-ticket__qty-btn:hover { background: var(--red); border-color: var(--red); }
.tb-ep-ticket__qty-num {
  width: 60px; height: 44px; background: var(--black);
  border: 1px solid var(--border-default); border-left: none; border-right: none;
  color: var(--white); font-family: var(--font-display); font-size: 24px;
  text-align: center; outline: none;
}
.tb-ep-ticket__total-row { display: flex; justify-content: space-between; align-items: baseline; }
.tb-ep-ticket__total-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--white-dim); }
.tb-ep-ticket__total-val { font-family: var(--font-mono); font-size: 32px; }

/* Quantity input (number spinner in ticket form) */
.tb-ep-ticket__qty {
  width: 72px; padding: 10px 8px;
  background: var(--black); border: 1px solid var(--border-default);
  color: var(--white); font-family: var(--font-display); font-size: 18px;
  text-align: center; outline: none; transition: border-color .2s;
}
.tb-ep-ticket__qty:focus { border-color: var(--red); }

/* Form */
.tb-ep-ticket__form { padding: 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.tb-ep-ticket__field { display: flex; flex-direction: column; gap: 6px; }
.tb-ep-ticket__field-label {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--white-dim);
}
.tb-ep-ticket__field-optional { font-size: 9px; opacity: .4; text-transform: none; letter-spacing: 0; }
.tb-ep-ticket__input {
  background: var(--black); border: 1px solid var(--border-default);
  color: var(--white); padding: 13px 14px;
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color .2s; width: 100%;
}
.tb-ep-ticket__input:focus { border-color: var(--red); }
.tb-ep-ticket__input::placeholder { color: var(--text-muted); }
.tb-ep-ticket__input.error { border-color: #f87171; }
.tb-ep-ticket__field-error { font-size: 11px; color: #f87171; }
.tb-ep-ticket__email {
  background: var(--black); border: 1px solid var(--border-default);
  color: var(--white); padding: 13px 14px;
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color .2s; width: 100%;
}
.tb-ep-ticket__email::placeholder { color: var(--text-muted); }
.tb-ep-ticket__email:focus { border-color: var(--red); }
.tb-ep-ticket__email:invalid:not(:placeholder-shown) { border-color: #f87171; }

/* Promo */
.tb-ep-ticket__promo-row { display: flex; }
.tb-ep-ticket__promo-input {
  flex: 1; background: var(--black);
  border: 1px solid var(--border-default); border-right: none;
  color: var(--white); padding: 12px 14px;
  font-family: var(--font-body); font-size: 13px; outline: none;
  transition: border-color .2s; text-transform: uppercase; letter-spacing: .1em;
}
.tb-ep-ticket__promo-input:focus { border-color: var(--red); }
.tb-ep-ticket__promo-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.tb-ep-ticket__promo-btn {
  background: var(--black3); border: 1px solid var(--border-default);
  color: var(--white); padding: 12px 18px;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  cursor: none; white-space: nowrap; transition: background .2s;
}
.tb-ep-ticket__promo-btn:hover { background: var(--red); border-color: var(--red); }
.tb-ep-ticket__promo-msg { font-size: 11px; min-height: 16px; padding: 2px 0; }
.tb-ep-ticket__promo-msg--ok  { color: #4ade80; }
.tb-ep-ticket__promo-msg--err { color: #f87171; }

/* Discount */
.tb-ep-ticket__discount {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 4px 0; color: var(--white-dim);
}
.tb-ep-ticket__discount-val { color: #4ade80; font-family: var(--font-mono); font-size: 15px; }

/* Buy */
.tb-ep-ticket__buy-wrap { padding: 0 32px 28px; }
.tb-ep-ticket__buy {
  /* ⚠️ var(--tb-accent, var(--red)), NOT var(--red). --red is the SITE primary; the event's
     accent is per-event. Reading the site token meant the accent could never reach this button
     however correctly it was scoped — two names for one concept, consumer reading the wrong
     one. A surface that sets --tb-accent gets the event's identity, one that sets nothing gets
     the site brand. */
  width: 100%; background: var(--tb-accent, var(--red)); color: var(--white); border: none;
  padding: 17px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .25em; text-transform: uppercase; cursor: none;
  transition: background .2s; margin-bottom: 10px;
}
.tb-ep-ticket__buy:hover { background: var(--red-dark); }
.tb-ep-ticket__buy:disabled { background: var(--black3); color: var(--text-muted); cursor: not-allowed; }
.tb-ep-ticket__buy--external { display: block; text-decoration: none; text-align: center; cursor: pointer; }
.tb-ep-ticket__buy--external:hover { background: var(--red-dark); color: var(--white); }
.tb-ep-ticket__note {
  font-size: 10px; color: var(--text-muted); text-align: center;
  line-height: 1.7; letter-spacing: .06em;
}

/* Seat note */
.tb-ep-ticket__seat-note {
  margin: 0 32px 20px; padding: 16px;
  background: var(--black3); border-left: 2px solid var(--red);
}
.tb-ep-ticket__seat-note p {
  font-family: var(--font-serif); font-size: 15px; color: var(--white-dim); line-height: 1.6;
}

/* Seat map overlay */
.tb-seat-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--black); display: flex; flex-direction: column;
}
.tb-seat-overlay[hidden] { display: none; }
.tb-seat-overlay__bar {
  flex-shrink: 0; height: 56px;
  background: rgba(8,8,8,.97); border-bottom: 1px solid rgba(0,103,127,.15);
  display: flex; align-items: center; padding: 0 32px; gap: 20px;
}
.tb-seat-overlay__close {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--white-dim); background: none; border: none; cursor: none;
  transition: color .2s;
}
.tb-seat-overlay__close:hover { color: var(--red); }
.tb-seat-overlay__title {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .06em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-seat-overlay__iframe { flex: 1; width: 100%; border: none; }

/* Success */
.tb-ep-success {
  position: fixed; inset: 0; z-index: 500;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 40px;
}
.tb-ep-success[hidden] { display: none; }
.tb-ep-success__icon {
  width: 72px; height: 72px; border: 2px solid var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  animation: tb-fade-in .5s .2s both;
}
.tb-ep-success__title {
  font-family: var(--tb-font); font-size: var(--tb-text-2xl); letter-spacing: 0;
  animation: tb-fade-up .7s .3s both;
}
.tb-ep-success__msg {
  font-family: var(--font-serif); font-size: 20px; font-style: italic;
  color: var(--white-dim); max-width: 420px; line-height: 1.7;
  animation: tb-fade-up .7s .45s both;
}


/* ════════════════════════════════
   ABOUT / SERVICES / GALLERY / CONTACT
   ════════════════════════════════ */
.tb-about {
  padding: var(--tb-space-10) var(--tb-space-7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--tb-space-9); align-items: center;
  position: relative; overflow: hidden;
}
.tb-about::before {
  content: 'ЗА НАС'; font-family: var(--tb-font); font-size: 8rem; opacity: .04;
  color: var(--white-faint); position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%); pointer-events: none; line-height: 1;
}
.tb-about__body { margin-top: 28px; }
.tb-about__body p {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.85;
  color: var(--text-secondary);
}
.tb-about__body p + p { margin-top: 16px; }
.tb-about__images { position: relative; height: 480px; }
.tb-about__img { position: absolute; background-size: cover; background-position: center; }
.tb-about__img--main {
  top: 0; left: 0; width: 75%; height: 83%;
  background-color: var(--black2);
}
.tb-about__img--secondary {
  bottom: 0; right: 0; width: 53%; height: 52%;
  background-color: var(--black3);
  border: 4px solid var(--black);
}
.tb-about__accent {
  position: absolute; top: 18px; right: 18px;
  width: 72px; height: 72px; background: var(--red); z-index: 3;
  display: flex; align-items: center; justify-content: center;
}

/* Services */
.tb-services {
  padding: var(--tb-space-10) var(--tb-space-7); background: var(--black2);
  position: relative; overflow: hidden;
}
.tb-services__bg-text {
  position: absolute; bottom: -30px; right: -10px;
  font-family: var(--tb-font); font-size: 12rem;
  color: var(--white-faint); pointer-events: none; line-height: 1; white-space: nowrap;
}
.tb-services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: rgba(0,103,127,.07); margin-top: var(--tb-space-7);
}
.tb-service {
  background: var(--black2); padding: var(--tb-space-8) var(--tb-space-7);
  position: relative; overflow: hidden; transition: background .3s; cursor: none;
}
.tb-service::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.tb-service:hover::after { transform: scaleX(1); }
.tb-service:hover { background: var(--black3); }
.tb-service__num {
  font-family: var(--tb-font); font-size: var(--tb-text-3xl);
  color: var(--white-faint); position: absolute; top: var(--tb-space-5); right: var(--tb-space-5); line-height: 1;
}
.tb-service__title { font-family: var(--font-display); font-size: var(--tb-text-xl); letter-spacing: .04em; margin-bottom: var(--tb-space-4); }
.tb-service__desc {
  font-family: var(--font-serif); font-size: var(--tb-text-base); line-height: var(--tb-leading-relaxed); color: var(--text-secondary);
}
.tb-service__link {
  display: inline-block; margin-top: var(--tb-space-5); font-size: var(--tb-text-xs); letter-spacing: .22em;
  text-transform: uppercase; color: var(--red); text-decoration: none;
  border-bottom: 1px solid rgba(0,103,127,.3); padding-bottom: 3px;
}

/* Gallery */
.tb-gallery { padding: var(--tb-space-10) 0; overflow: hidden; }
.tb-gallery__header { padding: 0 var(--tb-space-7); margin-bottom: var(--tb-space-7); }
.tb-gallery__track {
  display: flex; gap: 2px; width: max-content;
  animation: tb-gallery-scroll 22s linear infinite;
}
.tb-gallery__track:hover { animation-play-state: paused; }
.tb-gallery__item {
  width: 360px; height: 264px; flex-shrink: 0;
  background-size: cover; background-position: center;
  filter: grayscale(35%) brightness(.65); transition: filter .4s;
}
.tb-gallery__item:hover { filter: grayscale(0%) brightness(1); }

/* Contact */
.tb-contact {
  padding: var(--tb-space-10) var(--tb-space-7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--tb-space-9);
  background: var(--black2);
}
.tb-contact__detail { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.tb-contact__icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--tb-red-500); flex-shrink: 0; margin-top: 3px; }
.tb-contact__detail-label {
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--red); margin-bottom: 5px;
}
.tb-contact__detail-text {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: var(--text-secondary);
}
.tb-contact__brand-info { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.tb-contact__brand-info a {
  font-family: var(--font-serif); font-size: 17px; color: var(--text-secondary);
  text-decoration: none; transition: color .2s;
}
.tb-contact__brand-info a:hover { color: var(--tb-red-500); }
.tb-contact-form { display: flex; flex-direction: column; gap: 14px; }
.tb-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-contact-form__field { display: flex; flex-direction: column; gap: 7px; }
.tb-contact-form__field label {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--white-dim);
}
.tb-contact-form__field input,
.tb-contact-form__field select,
.tb-contact-form__field textarea {
  background: var(--black); border: 1px solid var(--border-default);
  color: var(--white); padding: 13px 14px;
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color .2s; width: 100%;
}
.tb-contact-form__field input:focus,
.tb-contact-form__field select:focus,
.tb-contact-form__field textarea:focus { border-color: var(--red); }
.tb-contact-form__field textarea { resize: vertical; min-height: 110px; }
.tb-contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8102E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tb-contact-form__field select option { background: var(--black2); }
.tb-contact-form__feedback {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 4px;
    margin-top: 12px;
}
.tb-contact-form__feedback--ok {
    color: #e8f5e9;
    background: rgba(46, 125, 50, 0.25);
    border-left: 4px solid #4ade80;
}
.tb-contact-form__feedback--err {
    color: #fde8e8;
    background: rgba(185, 28, 28, 0.2);
    border-left: 4px solid #f87171;
}

/* ════════════════════════════════
   FAQ
   ════════════════════════════════ */
.tb-faq {
  padding: var(--tb-space-10) var(--tb-space-7);
  background: var(--bg-primary);
}
.tb-faq__container {
  max-width: 760px;
  margin: 0 auto;
}
.tb-faq__header {
  text-align: center;
  margin-bottom: var(--tb-space-8);
}
.tb-faq__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-faq__item {
  background: var(--black2);
  border: 1px solid var(--border-default);
}
.tb-faq__item + .tb-faq__item { border-top: none; }
.tb-faq__question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}
.tb-faq__question::-webkit-details-marker { display: none; }
.tb-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.tb-faq__toggle::before,
.tb-faq__toggle::after {
  content: '';
  position: absolute;
  background: var(--tb-red-500);
  transition: transform .2s;
}
.tb-faq__toggle::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.tb-faq__toggle::after  { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.tb-faq__item[open] .tb-faq__toggle::after { transform: rotate(90deg); opacity: 0; }
.tb-faq__answer {
  margin: 0;
  padding: 0 24px 22px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */
.tb-footer {
  background: var(--tb-red-700);
  color: rgba(255,255,255,.85);
  padding: var(--tb-space-9) var(--tb-space-7) var(--tb-space-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--tb-space-5);
}
.tb-footer__logo {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--tb-space-3);
}
.tb-footer__logo-text {
  font-family: var(--tb-heading-font, var(--tb-font)); font-weight: 700;
  font-size: 22px; letter-spacing: .1em;
  color: #FFFFFF;
}
.tb-footer__tagline { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(255,255,255,.65); }
.tb-footer__nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tb-space-6); align-items: center; justify-content: center; }
.tb-footer__nav a {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s;
}
.tb-footer__nav a:hover { color: #FFFFFF; }
.tb-footer__social { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tb-space-5); align-items: center; justify-content: center; }
.tb-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s;
}
.tb-footer__social a:hover { color: #FFFFFF; }
.tb-footer__social .tb-icon { display: block; }
.tb-footer__right { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tb-footer__copy { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .08em; text-align: center; line-height: 1.7; }
.tb-footer__copy a { color: rgba(255,255,255,.75); text-decoration: none; }
.tb-footer__copy a:hover { color: #FFFFFF; }
.tb-footer__powered-link { color: rgba(255,255,255,.45) !important; }
.tb-footer__powered-link:hover { color: rgba(255,255,255,.75) !important; }
.tb-footer__powered { font-size: 11px; color: rgba(255,255,255,.55); }
.tb-footer__powered a { color: rgba(255,255,255,.75); text-decoration: none; }


/* ════════════════════════════════
   RESPONSIVE — 960px
   Event page + homepage sections
   ════════════════════════════════ */
@media (max-width: 960px) {

  /* ── Event topbar (fixed) ────────────────────── */
  .tb-ep-bar {
    height: 56px; padding: 0 16px; gap: 8px;
  }
  .tb-ep-nav-spacer { height: calc(var(--nav-h, 72px) + 56px); }
  .tb-ep-bar__title { font-size: 14px; }
  .tb-ep-bar__meta  { display: none; }          /* date shown in content below */
  .tb-ep-bar__sep   { display: none; }
  .tb-ep-bar__price { font-size: 16px; }
  .tb-ep-bar__back  { font-size: 0; }           /* hide label, keep arrow icon */
  .tb-ep-bar__back::before { content: '←'; font-size: 16px; }

  /* ── Event body — stack columns ─────────────── */
  .tb-ep-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .tb-ep-info {
    padding: 28px 20px 48px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow-y: visible;
  }
  .tb-ep-hero { grid-template-columns: 1fr; gap: 20px; }
  .tb-ep-poster { max-width: 320px; margin: 0 auto; }
  .tb-ep-gallery__grid { grid-template-columns: 1fr 1fr; }

  .tb-ep-ticket {
    position: static;
    height: auto;
    overflow-y: visible;
    border-left: none;
    border-top: 1px solid rgba(0,103,127,.08);
  }
  .tb-ep-ticket__qty-num { font-size: 20px; }

  /* ── Input font-size ≥ 16px (prevent iOS auto-zoom) ── */
  .tb-ep-ticket__input,
  .tb-ep-ticket__promo-input,
  .tb-ep-ticket__qty-num { font-size: 16px; }

  /* ── Seat overlay ───────────────────────────── */
  .tb-seat-overlay__bar { padding: 0 16px; gap: 12px; }

  /* ── About — stack ──────────────────────────── */
  .tb-about {
    grid-template-columns: 1fr;
    gap: var(--tb-space-7);
    padding: var(--tb-space-8) var(--tb-space-5);
  }
  .tb-about::before { font-size: 5rem; }
  .tb-about__images { height: 280px; }
  .tb-about__img--main  { width: 82%; height: 80%; }
  .tb-about__img--secondary { width: 55%; height: 50%; }

  /* ── Services — stack ───────────────────────── */
  .tb-services { padding: var(--tb-space-8) var(--tb-space-5); }
  .tb-services__grid { grid-template-columns: 1fr; }
  .tb-service { padding: var(--tb-space-6) var(--tb-space-5); }

  /* ── Gallery strip — tighten ────────────────── */
  .tb-gallery { padding: var(--tb-space-8) 0; }
  .tb-gallery__header { padding: 0 var(--tb-space-5); }
  .tb-gallery__item { width: 260px; height: 192px; }

  /* ── Contact — stack ────────────────────────── */
  .tb-contact {
    grid-template-columns: 1fr;
    gap: var(--tb-space-7);
    padding: var(--tb-space-8) var(--tb-space-5);
  }
  .tb-contact-form__row { grid-template-columns: 1fr; }

  /* ── Events section (homepage) ──────────────── */
  .tb-events { padding: 72px 24px; }
  .tb-events__grid {
    grid-template-columns: 1fr;
  }
  .tb-events__strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .tb-events__strip { grid-template-columns: 1fr; }

  /* Contact form single column already at 960px */
}

/* ── iOS zoom prevention — all form inputs site-wide ── */
/* Status messages */
.tb-ep-ticket__status { min-height: 20px; padding: 0 32px 4px; font-size: 13px; line-height: 1.4; }
.tb-ep-ticket__status--ok    { color: #4ade80; }
.tb-ep-ticket__status--error {
  color: #f87171;
  padding: 8px 32px;
  background: rgba(248, 113, 113, 0.08);
  border-left: 2px solid rgba(248, 113, 113, 0.5);
}

/* Manual availability refresh */
.tb-ep-ticket__refresh {
  display: block; width: calc(100% - 64px); margin: 0 32px 20px;
  padding: 8px 12px; background: transparent;
  border: 1px solid var(--border-default); color: var(--text-muted);
  font-size: 11px; letter-spacing: .1em; text-align: center;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.tb-ep-ticket__refresh:hover { border-color: var(--red); color: var(--white); }
.tb-ep-ticket__refresh.is-loading { opacity: .55; pointer-events: none; }

@media (max-width: 540px) {
  /* Pills: 2×2 grid so labels don't truncate on narrow viewports */
  .tb-ep-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .tb-ep-pill  { text-align: left; }
  /* Time value (e.g. "08:00 ч.") — keep on one line */
  .tb-ep-pill__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Hero: stack image above meta at very small sizes */
  .tb-ep-hero { grid-template-columns: 1fr; }
  .tb-ep-poster { max-width: 260px; }
  /* Info + ticket: reduce padding to give content more room */
  .tb-ep-info    { padding-left: 16px; padding-right: 16px; }
  .tb-ep-ticket__hd,
  .tb-ep-ticket__form,
  .tb-ep-ticket__buy-wrap { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════
   SECTIONS — responsive overrides + events empty state
   Desktop styles live in event-page.css (not touched)
   ════════════════════════════════ */

/* ── Events empty state ─────────────────────── */
.tb-events-empty {
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.tb-events-empty__icon {
  font-size: var(--tb-text-3xl);
  color: var(--red);
  opacity: .4;
  line-height: 1;
}
.tb-events-empty__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: .04em;
  line-height: 1;
}
.tb-events-empty__text {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--white-dim);
  max-width: 440px;
  line-height: 1.7;
}


/* ── Checkout result (page-thank-you.php) ───────── */
.tb-checkout-result {
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  gap: 20px;
}
.tb-checkout-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: .4;
}
.tb-checkout-result__icon--ok  { color: var(--success); opacity: 1; }
.tb-checkout-result__icon--err { color: var(--red);     opacity: .85; }
.tb-checkout-result__title { margin-top: 8px; }
.tb-checkout-result__text {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--white-dim);
  line-height: 1.7;
  max-width: 480px;
}
.tb-checkout-result__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

/* ── Order summary box (page-thank-you.php) ───────── */
.tb-order-summary {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--tb-radius-lg, 12px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  box-shadow: var(--tb-shadow-sm);
}
.tb-order-summary--processing {
  align-items: center;
  padding: 16px 24px;
}
.tb-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tb-order-summary__row--status {
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.tb-order-summary--processing .tb-order-summary__row--status {
  border-top: none;
  justify-content: center;
}
.tb-order-summary__label {
  font-size: var(--tb-text-sm, 0.875rem);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tb-order-summary__value {
  font-size: var(--tb-text-sm, 0.875rem);
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}
.tb-order-summary__value--amount {
  font-size: var(--tb-text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
}
.tb-order-summary__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tb-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--tb-radius-full, 9999px);
  padding: 3px 10px;
}
.tb-order-summary__badge--paid {
  background: rgba(46, 125, 50, 0.12);
  color: var(--success);
}
.tb-order-summary__badge--pending {
  background: rgba(184, 118, 30, 0.12);
  color: var(--warning, #b8761e);
}
.tb-order-summary__spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tb-spin 0.8s linear infinite;
}
@keyframes tb-spin {
  to { transform: rotate(360deg); }
}


/* ════════════════════════════════
   RESPONSIVE — 960px breakpoint
   ════════════════════════════════ */
@media (max-width: 960px) {

  /* Nav padding correction */
  .tb-hero  { padding: 0 24px 60px; }
  .tb-hero__vline { display: none; }
  .tb-hero__scroll { right: 24px; }

  /* Ticker — already overflow hidden, no change needed */

  /* Events section */
  .tb-events { padding: 72px 24px; }
  .tb-events__grid { grid-template-columns: 1fr; }
  .tb-events__strip { grid-template-columns: 1fr 1fr; }
  .tb-events-empty { padding: 60px 24px; }

  /* About */
  .tb-about {
    grid-template-columns: 1fr;
    padding: var(--tb-space-8) var(--tb-space-5);
    gap: var(--tb-space-7);
  }
  .tb-about::before { font-size: 5rem; opacity: .03; }
  .tb-about__images { height: 320px; }

  /* Services */
  .tb-services { padding: var(--tb-space-8) var(--tb-space-5); }
  .tb-services__grid { grid-template-columns: 1fr; }
  .tb-services__bg-text { font-size: 6rem; }
  .tb-service { padding: var(--tb-space-6) var(--tb-space-5); }

  /* Gallery */
  .tb-gallery { padding: var(--tb-space-8) 0; }
  .tb-gallery__header { padding: 0 var(--tb-space-5); }
  .tb-gallery__item { width: 260px; height: 190px; }

  /* Contact */
  .tb-contact {
    grid-template-columns: 1fr;
    padding: var(--tb-space-8) var(--tb-space-5);
    gap: var(--tb-space-7);
  }
  .tb-contact-form__row { grid-template-columns: 1fr; }

  /* Event page */
  .tb-ep-bar { padding: 0 16px; gap: 12px; }
  .tb-ep-bar__meta { display: none; }
  .tb-ep-body { grid-template-columns: 1fr; }
  .tb-ep-info { padding: 32px 20px 48px; border-right: none; }
  .tb-ep-ticket {
    position: static;
    height: auto;
    border-left: none;
    border-top: 1px solid rgba(0,103,127,.08);
  }
  .tb-ep-gallery__grid { grid-template-columns: 1fr; }

  /* Strip — single column on very small */
  @media (max-width: 520px) {
    .tb-events__strip { grid-template-columns: 1fr; }
  }
}

/* ── PARTNER / SUPPORT LOGOS ────────────────────────────────────────────────────────────────
   Rendered by tb_partner_logos() on BOTH the homepage and the event landing page, so the rules
   live here, in the global bundle — not in landing.css.

   ⚠️ THAT PLACEMENT IS THE POINT. landing.css is enqueued only for the landing template, and a
   component styled there is unstyled everywhere else it renders. That is exactly how the aside
   came out unstyled on the contact page. Same reasoning as thank-you.css being bundled.

   ── WHY THE PLATE, AND NOT A LIGHT BAND ──
   Both surfaces are dark: the landing page is #0C0C0E with sections alternating to #15151A, and
   the homepage sponsors band is dark too. The supplied logos both need a LIGHT surface — one is
   a white-background raster, the other transparent with dark ink — so on the page's own
   background one would show a white box and the other would disappear.

   A per-logo light plate gives each of them that surface with NO image processing, which was the
   whole objective, while leaving the page's rhythm intact. To make the entire section light
   instead, set --tb-partner-surface on .tb-partner and give .tb-partner__plate a transparent
   background — one place, both changes. */
.tb-partner {
  --tb-partner-surface: transparent;
  background: var(--tb-partner-surface);
  padding: 44px 20px 52px;
  text-align: center;
}
.tb-partner__heading {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-muted, #8a8a93);
}
.tb-partner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.tb-partner__item { margin: 0; }

/* The light surface each logo needs. Generous padding because a logo with its own internal
   margins still wants breathing room, and a plate that hugs the artwork reads as a sticker. */
/* ⚠️ PURE WHITE, MEASURED NOT CHOSEN. The РНДЦ medal is a JPEG whose own background is #FFFFFF
   with no alpha, so on the warm #F4F1EC used elsewhere it renders as a visible white rectangle
   inside the plate. Matching the plate to the asset makes the edge disappear. */
.tb-partner__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 20px;
  min-height: 104px;
  box-sizing: border-box;
}
/* ⚠️ TALL ENOUGH FOR A PORTRAIT LOCKUP. The Столична община mark is 492x800 — mark above,
   wordmark below — so a 74px-tall box scaled it to about 45px wide and made it unreadable. The
   height leads and the width is the backstop, which is the right way round for a logo that is
   taller than it is wide; a landscape logo is still capped by max-width. */
.tb-partner__logo {
  display: block;
  max-width: 200px;
  max-height: 104px;
  width: auto;
  height: auto;
  object-fit: contain;   /* never crop a logo, and never stretch one */
}
.tb-partner__link { display: block; text-decoration: none; }
/* A logo link carries no underline to lose, so the focus ring is the only affordance. */
.tb-partner__link:focus-visible { outline: 3px solid var(--tb-accent, #1FBF5B); outline-offset: 4px; }
.tb-partner__link:hover .tb-partner__plate { filter: brightness(1.04); }

@media (max-width: 560px) {
  .tb-partner { padding: 32px 16px 38px; }
  .tb-partner__logo { max-width: 44vw; max-height: 88px; }
}

/* ════════════════════════════════
   FOOTER — responsive overrides
   Desktop styles live in event-page.css (not touched)
   ════════════════════════════════ */

@media (max-width: 960px) {
  .tb-footer {
    padding: 48px 24px 28px;
    gap: 28px;
  }

  .tb-fab {
    padding: 12px 20px;
    font-size: 9px;
    bottom: 20px;
    right: 20px;
    gap: 7px;
  }
}

/* ── Legal links ──
   Footer renders on the dark teal brand background (--tb-red-700).
   Light text values for WCAG AA compliance on that dark background. */
.tb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-2);
  align-items: center;
  justify-content: center;
  font-size: var(--tb-text-xs, 11px);
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--tb-space-2);
  padding-top: var(--tb-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
  max-width: 640px;
}

.tb-footer__legal a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}

.tb-footer__legal a:hover { color: #FFFFFF; }

.tb-footer__legal-sep { color: rgba(255, 255, 255, 0.35); }

/* ── Policy notice on payment forms ── */
.tb-form-policy-notice {
  font-size: var(--tb-text-xs, 11px);
  color: var(--tb-text-muted, rgba(0,0,0,0.5));
  text-align: center;
  margin: var(--tb-space-3) 0 0;
  line-height: 1.6;
}

.tb-form-policy-notice a {
  color: var(--tb-text, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════════════════════════
   ARCHIVE — Events, Filter bar
   All values use --tb-* design tokens
   ════════════════════════════════ */


/* ── Archive header ─────────────────────────── */
.tb-archive-header {
  padding: calc(var(--nav-h) + var(--tb-space-8)) var(--tb-space-6) var(--tb-space-6);
}
.tb-archive-header .section-label { margin-bottom: var(--tb-space-3); }
.tb-archive-header .section-title { line-height: 1; }
.tb-archive-count {
  margin-top: var(--tb-space-3);
  font-size: var(--tb-text-xs);
  letter-spacing: 0.08em;
  color: var(--tb-text-muted);
}


/* ── Filter bar ─────────────────────────────── */
.tb-filter-bar {
  padding: var(--tb-space-4) var(--tb-space-6);
  border-bottom: 1px solid var(--tb-cream-200);
  background: rgba(245, 249, 249, 0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
}
.tb-filter-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--tb-space-4);
}
.tb-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-1);
  min-width: 150px;
}
.tb-filter-group--sort {
  margin-left: auto;
  min-width: 140px;
}
.tb-filter-label {
  font-size: var(--tb-text-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--tb-text-muted);
  font-weight: 600;
}
.tb-filter-select {
  background: var(--tb-card-bg);
  border: 1px solid var(--tb-cream-300);
  color: var(--tb-black);
  padding: var(--tb-space-2) var(--tb-space-8) var(--tb-space-2) var(--tb-space-3);
  font-size: var(--tb-text-sm);
  font-family: var(--tb-font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6460' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: var(--tb-radius-full);
  transition: border-color var(--tb-transition);
}
.tb-filter-select:hover { border-color: var(--tb-black); }
.tb-filter-select:focus { outline: none; border-color: var(--tb-black); box-shadow: 0 0 0 3px var(--tb-cream-200); }
.tb-filter-select option { background: #fff; color: var(--tb-black); }

.tb-filter-clear {
  align-self: flex-end;
  font-size: var(--tb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-text-muted);
  text-decoration: none;
  padding: var(--tb-space-2) 0;
  transition: color var(--tb-transition);
  white-space: nowrap;
}
.tb-filter-clear:hover { color: var(--tb-red-500); }

/* Active filter badges */
.tb-filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-2);
  margin-top: var(--tb-space-3);
}
.tb-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-space-2);
  font-size: var(--tb-text-xs);
  letter-spacing: 0.08em;
  background: var(--tb-red-50);
  border: 1px solid var(--tb-red-100);
  color: var(--tb-red-500);
  padding: var(--tb-space-1) var(--tb-space-3);
  border-radius: var(--tb-radius-sm);
}
.tb-filter-badge__remove {
  color: var(--tb-red-500);
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--tb-transition-fast);
  opacity: 0.6;
}
.tb-filter-badge__remove:hover { opacity: 1; }

/* Empty state */
.tb-archive-empty {
  column-span: all;
  break-inside: avoid;
  padding: 40px 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: normal;
  text-decoration: none;
  font-size: 16px;
  color: #666666;
}
.tb-archive-empty .tb-filter-reset-link {
  display: inline-block;
  margin-top: var(--tb-space-4);
  font-size: var(--tb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-red-500);
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
}


/* ── Pagination ─────────────────────────────── */
.tb-archive-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tb-space-2);
  padding: 0 var(--tb-space-6) var(--tb-space-9);
}
.tb-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--tb-space-3);
  font-size: var(--tb-text-xs);
  letter-spacing: 0.08em;
  color: var(--tb-text-muted);
  border: 1px solid var(--tb-cream-200);
  text-decoration: none;
  transition: background var(--tb-transition), border-color var(--tb-transition), color var(--tb-transition);
  border-radius: var(--tb-radius-sm);
}
.tb-archive-pagination .page-numbers:hover {
  border-color: var(--tb-cream-300);
  color: var(--tb-black);
}
.tb-archive-pagination .page-numbers.current {
  background: var(--tb-red-500);
  border-color: var(--tb-red-500);
  color: var(--tb-text-on-dark);
}
.tb-archive-pagination .page-numbers.dots {
  border: none;
  background: none;
  pointer-events: none;
}


/* ── Generic page ───────────────────────────── */
.tb-page {
  padding: calc(var(--nav-h) + var(--tb-space-8)) var(--tb-space-6) var(--tb-space-10);
  max-width: 760px;
  margin: 0 auto;
}
.tb-page__header { margin-bottom: var(--tb-space-7); }
.tb-page__content {
  font-size: var(--tb-text-md);
  line-height: 1.85;
  color: var(--tb-text);
}
.tb-page__content p + p { margin-top: var(--tb-space-4); }
.tb-page__content h2 {
  font-size: var(--tb-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--tb-space-7) 0 var(--tb-space-4);
  color: var(--tb-black);
}
.tb-page__content a { color: var(--tb-red-500); border-bottom: 1px solid rgba(0,103,127, 0.25); }
.tb-page__content a:hover { border-color: var(--tb-red-500); }


/* ── 404 ────────────────────────────────────── */
.tb-404 {
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: var(--tb-space-5);
  padding-right: var(--tb-space-5);
  gap: var(--tb-space-4);
}
.tb-404__num {
  font-family: var(--tb-font);
  font-size: var(--tb-text-3xl);
  line-height: 1;
  color: var(--tb-cream-200);
  letter-spacing: 0.04em;
  font-weight: 700;
  user-select: none;
}
.tb-404__title {
  font-size: var(--tb-text-2xl);
  margin-top: calc(-1 * var(--tb-space-4));
  font-weight: 600;
  color: var(--tb-black);
}
.tb-404__text {
  font-size: var(--tb-text-base);
  font-style: italic;
  color: var(--tb-text-muted);
  max-width: 380px;
  line-height: 1.65;
}
.tb-404__actions {
  display: flex;
  gap: var(--tb-space-5);
  align-items: center;
  margin-top: var(--tb-space-3);
  flex-wrap: wrap;
  justify-content: center;
}


/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media (max-width: 960px) {
  .tb-archive-header { padding: calc(var(--nav-h) + var(--tb-space-7)) var(--tb-space-5) var(--tb-space-5); }
  .tb-filter-bar { padding: var(--tb-space-3) var(--tb-space-5); position: static; }
  .tb-filter-form { gap: var(--tb-space-3); }
  .tb-filter-group { min-width: 130px; }

  .tb-archive-pagination { padding: 0 var(--tb-space-5) var(--tb-space-7); flex-wrap: wrap; }


  .tb-page { padding: calc(var(--nav-h) + var(--tb-space-7)) var(--tb-space-5) var(--tb-space-8); }
  .tb-404__num { font-size: var(--tb-text-3xl-mobile); }
}


@media (max-width: 768px) {
  .tb-filter-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tb-space-3);
  }
  .tb-filter-group,
  .tb-filter-group--sort {
    min-width: 0;
    margin-left: 0; /* reset the desktop "push to right" on sort */
    width: 100%;
  }
  .tb-filter-select { width: 100%; }
  .tb-filter-label { font-size: var(--tb-text-xs); }
  .tb-filter-clear { display: none; } /* collapsed on narrow; active badges still show */
}

@media (max-width: 480px) {
  .tb-filter-form { grid-template-columns: 1fr; gap: var(--tb-space-2); }
}

/* ════════════════════════════════
   HOMEPAGE — extra sections
   ════════════════════════════════ */

/* ── Your Event section ─────────────────────────── */
.tb-your-event {
  padding: var(--tb-space-9) var(--tb-space-7);
  border-top: 1px solid var(--border-subtle);
}
.tb-your-event__inner { max-width: 720px; }
.tb-your-event__body {
  margin-top: var(--tb-space-5);
  font-family: var(--font-serif);
  font-size: var(--tb-text-md);
  line-height: var(--tb-leading-relaxed);
  color: var(--text-secondary);
  font-style: italic;
}
.tb-your-event__body p + p { margin-top: var(--tb-space-4); }

/* ── Service icons ──────────────────────────────── */
.tb-service__icon {
  display: block;
  color: var(--tb-red-500);
  margin-bottom: var(--tb-space-3);
}
.tb-service__svg { width: 24px; height: 24px; }

/* ── Ticker stays brand red ── */
.tb-ticker { background: var(--tb-red-500); }

/* ── Section titles on light bg ── */
.section-title { color: var(--text-primary); }

/* ── About / Services / Your Event backgrounds ── */
.tb-about,
.tb-services,
.tb-your-event { background: var(--bg-primary); }

/* ── Hero text stays readable on dark photo overlay ── */
.tb-hero__title,
.tb-hero__eyebrow,
.tb-hero__sub { color: #FFFFFF; }
.tb-hero__actions .btn-ghost {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.30);
}
.tb-hero__actions .btn-ghost:hover { color: #FFFFFF; border-color: #FFFFFF; }
.tb-hero__scroll span { color: rgba(255,255,255,.6); }

/* ── Contact form light styling ── */
.tb-contact-form input,
.tb-contact-form textarea,
.tb-contact-form select {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ── Page content ── */
.tb-page__content { color: var(--text-secondary); }
.tb-page__content h2 { color: var(--text-primary); }

/* ── 404 ── */
.tb-404__num { color: var(--border-subtle); }

/* ── FAB always brand teal ── */
.tb-fab,
.tb-fab:hover { color: #FFFFFF; }

/* ── About CTA + Contact heading spacing ── */
.tb-about__cta { margin-top: var(--tb-space-7); }
.tb-contact__heading { margin-bottom: var(--tb-space-7); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 960px) {
  .tb-your-event { padding: var(--tb-space-8) var(--tb-space-5); }
}

/* ════════════════════════════════
   ABOUT / GALLERY / SPONSORS / PILOTS / DONATION
   DryVia-style homepage sections — shown per-site via
   tb_homepage_content.sections_enabled
   ════════════════════════════════ */

/* ── About ──────────────────────────────────────── */
.tb-about-section {
  padding: var(--tb-space-10) var(--tb-space-7);
  background: var(--black2);
}
.tb-about-section__container { max-width: 780px; margin: 0 auto; text-align: center; }
.tb-about-section__title { font-size: var(--tb-text-3xl); margin: var(--tb-space-3) 0 var(--tb-space-5); }
.tb-about-section__body {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.85;
  color: var(--text-secondary);
}
.tb-about-section__body p + p { margin-top: 16px; }

/* ── Featured org (e.g. DryVia's "СК Алма Ритмик Старс") ── */
.tb-featured-org {
  padding: var(--tb-space-10) var(--tb-space-7);
}
.tb-featured-org__container { max-width: 900px; margin: 0 auto; text-align: center; }
.tb-featured-org__text {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.85;
  color: var(--text-secondary);
  margin: var(--tb-space-4) 0 var(--tb-space-7);
}
.tb-featured-org__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--tb-space-3);
}
.tb-featured-org__item {
  display: block;
  aspect-ratio: 1/1;
  background-size: cover; background-position: center;
  filter: grayscale(15%) brightness(.95); transition: filter .3s;
  cursor: pointer;
}
.tb-featured-org__item:hover { filter: grayscale(0%) brightness(1); }

/* ── Gallery ────────────────────────────────────── */
.tb-gallery-grid-section { padding: var(--tb-space-10) var(--tb-space-7); }
.tb-gallery-grid-section__header { text-align: center; margin-bottom: var(--tb-space-7); }
.tb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--tb-space-3);
}
.tb-gallery-grid__item {
  display: block;
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  filter: grayscale(15%) brightness(.95); transition: filter .3s;
  cursor: pointer;
}
.tb-gallery-grid__item:hover { filter: grayscale(0%) brightness(1); }

/* ── Sponsors ───────────────────────────────────── */
.tb-sponsors { padding: var(--tb-space-10) var(--tb-space-7); background: var(--black2); }
.tb-sponsors__header { text-align: center; margin-bottom: var(--tb-space-7); }
.tb-sponsors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--tb-space-6);
  align-items: center;
}
.tb-sponsors__item { display: flex; align-items: center; justify-content: center; }
.tb-sponsors__item img {
  max-width: 100%; max-height: 64px; width: auto; object-fit: contain;
  filter: grayscale(100%); opacity: .6; transition: filter .3s, opacity .3s;
}
.tb-sponsors__item a:hover img,
.tb-sponsors__item img:hover { filter: grayscale(0%); opacity: 1; }

/* ── Pilots ─────────────────────────────────────── */
.tb-pilots { padding: var(--tb-space-10) var(--tb-space-7); }
.tb-pilots__header { text-align: center; margin-bottom: var(--tb-space-7); }
.tb-pilots__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tb-space-6);
}
.tb-pilots__card { text-align: center; }
.tb-pilots__photo {
  aspect-ratio: 1; border-radius: 50%;
  background-color: var(--black3); background-size: cover; background-position: center;
  margin: 0 auto var(--tb-space-4);
  max-width: 160px;
}
.tb-pilots__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.tb-pilots__team { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.tb-pilots__social {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-red-500); text-decoration: none;
}
.tb-pilots__social:hover { color: var(--tb-red-600); }

/* ── Donation ───────────────────────────────────── */
.tb-donation { padding: var(--tb-space-10) var(--tb-space-7); background: var(--black2); }
.tb-donation__container { max-width: 640px; margin: 0 auto; text-align: center; }
.tb-donation__text {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.8;
  color: var(--text-secondary); margin: var(--tb-space-4) 0 var(--tb-space-7);
}
.tb-donation__bank {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--black3); padding: var(--tb-space-6); text-align: left;
}
.tb-donation__row { display: flex; justify-content: space-between; gap: var(--tb-space-4); flex-wrap: wrap; }
.tb-donation__label {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
}
.tb-donation__value { font-family: var(--font-mono); font-size: 14px; }

/* ── Shared overlay — gallery lightbox + pilot bio modal (main.js) ── */
.tb-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--tb-space-6);
}
.tb-overlay[hidden] { display: none; }
.tb-overlay__close {
  position: absolute; top: var(--tb-space-5); right: var(--tb-space-5);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tb-overlay__close:hover { background: rgba(255,255,255,.2); }
.tb-overlay__body {
  max-width: 90vw; max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
}
.tb-overlay__body img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
}
.tb-overlay__bio {
  background: var(--black2); color: var(--white);
  padding: var(--tb-space-7); max-width: 480px;
  text-align: left;
}
.tb-overlay__bio-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.tb-overlay__bio-team {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-red-500); margin-bottom: var(--tb-space-4);
}
.tb-overlay__bio-text {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.75;
  color: var(--text-secondary); white-space: pre-line;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 960px) {
  .tb-pilots__grid { grid-template-columns: repeat(2, 1fr); }
  .tb-sponsors__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .tb-donation__row { flex-direction: column; gap: 2px; }
}

/* ════════════════════════════════
   DARK THEME — structural + component overrides
   Scoped under .tb-dark-theme (site-brand.php adds this body class
   when tb_site_brand.dark_theme is true). The base palette swap
   (--bg-primary/--text-primary/etc) lives in style.css; this file
   covers what that token swap alone doesn't reach: the hero's photo
   fallback gradient, heading font, and the DryVia-style redesigns of
   pilots/gallery/sponsors/donation/footer.

   .tb-dark-chrome (tb_site_brand.dark_chrome) is the lighter-weight
   sibling flag: light content sections, but the nav/footer/pilots/
   donation "chrome" stays dark — e.g. DryVia's white-background site
   with a charcoal header/footer. Rules that only make sense on a
   fully dark background (hero fallback gradient, sponsor white cards,
   tight gallery grid) stay .tb-dark-theme-only; rules for elements
   that render on their OWN dark background regardless of the page's
   base palette (nav bar, footer, pilot photo caption overlay, donation
   card) apply under both.
   ════════════════════════════════ */

.tb-dark-theme .tb-hero {
  background: linear-gradient(135deg, #0C0C0E 0%, #1A1A2E 50%, #0C0C0E 100%);
}
.tb-dark-theme .tb-nav,
.tb-dark-chrome .tb-nav {
  background: rgba(12,12,14,0.95);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

/* .tb-dark-theme's nav text already goes light via the --text-primary/
   --text-muted root swap in style.css. .tb-dark-chrome keeps the light
   palette for those tokens (content stays white), so the nav's resting
   state (not .scrolled, not .is-overlay) needs its own explicit light
   text here or it renders dark-on-charcoal on any page without a hero. */
.tb-dark-chrome .tb-nav__logo { color: #FFFFFF; }
.tb-dark-chrome .tb-nav__links a { color: rgba(255,255,255,.7); }
.tb-dark-chrome .tb-nav__links a:hover,
.tb-dark-chrome .tb-nav__links li.current-menu-item > a { color: #FFFFFF; }
.tb-dark-chrome .tb-nav__cta { color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.tb-dark-chrome .tb-nav__burger span { background: rgba(255,255,255,.85); }

/* ── Headings use the site's heading_font (falls back to the base font) ── */
.tb-dark-theme h1,
.tb-dark-theme h2,
.tb-dark-theme .section-title,
.tb-dark-theme .tb-events-section__title,
.tb-dark-chrome h1,
.tb-dark-chrome h2,
.tb-dark-chrome .section-title,
.tb-dark-chrome .tb-events-section__title {
  font-family: var(--tb-heading-font, var(--tb-font));
  letter-spacing: 2px;
}

/* ── Pilots — vertical photo cards, gradient caption, greyscale->color hover ── */
.tb-dark-theme .tb-pilots__grid,
.tb-dark-chrome .tb-pilots__grid { grid-template-columns: repeat(4, 1fr); }
.tb-dark-theme .tb-pilots__card,
.tb-dark-chrome .tb-pilots__card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  text-align: left;
}
.tb-dark-theme .tb-pilots__photo,
.tb-dark-chrome .tb-pilots__photo {
  position: absolute; inset: 0;
  border-radius: 0; margin: 0; max-width: none;
  filter: grayscale(100%);
  transition: filter .3s;
}
.tb-dark-theme .tb-pilots__card:hover .tb-pilots__photo,
.tb-dark-chrome .tb-pilots__card:hover .tb-pilots__photo { filter: grayscale(0%); }
.tb-dark-theme .tb-pilots__card::after,
.tb-dark-chrome .tb-pilots__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
  pointer-events: none;
}
.tb-dark-theme .tb-pilots__name,
.tb-dark-theme .tb-pilots__team,
.tb-dark-theme .tb-pilots__social,
.tb-dark-chrome .tb-pilots__name,
.tb-dark-chrome .tb-pilots__team,
.tb-dark-chrome .tb-pilots__social {
  position: relative; z-index: 1;
}
.tb-dark-theme .tb-pilots__card,
.tb-dark-chrome .tb-pilots__card {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--tb-space-4);
}
.tb-dark-theme .tb-pilots__name,
.tb-dark-chrome .tb-pilots__name {
  font-family: var(--tb-heading-font, var(--tb-font));
  letter-spacing: 1px;
  color: #FFFFFF;
}
.tb-dark-theme .tb-pilots__team,
.tb-dark-chrome .tb-pilots__team { color: var(--tb-red-500); }
.tb-dark-theme .tb-pilots__social,
.tb-dark-chrome .tb-pilots__social { color: rgba(255,255,255,.7); font-size: 10px; }

@media (max-width: 960px) {
  .tb-dark-theme .tb-pilots__grid,
  .tb-dark-chrome .tb-pilots__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Gallery — tight grid, minimal radius ── */
.tb-dark-theme .tb-gallery-grid {
  gap: 4px;
}
.tb-dark-theme .tb-gallery-grid__item {
  aspect-ratio: 16/10;
  border-radius: 4px;
}

/* ── Sponsors — white cards so dark-colored logos stay visible on charcoal ── */
.tb-dark-theme .tb-sponsors__grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--tb-space-4);
  justify-items: center;
}
.tb-dark-theme .tb-sponsors__item {
  width: 120px; height: 80px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color .2s, transform .2s;
}
.tb-dark-theme .tb-sponsors__item:hover {
  border-color: var(--tb-red-500);
  transform: translateY(-2px);
}
.tb-dark-theme .tb-sponsors__item img {
  max-height: 56px; max-width: 100px;
  padding: 8px;
  filter: none; opacity: 1; /* logos are already legible on the white card */
}

/* ── Donation — gold-tinted card, monospace bank values ── */
.tb-dark-theme .tb-donation__container h2,
.tb-dark-chrome .tb-donation__container h2 {
  font-family: var(--tb-heading-font, var(--tb-font));
  letter-spacing: 2px;
}
.tb-dark-theme .tb-donation__bank,
.tb-dark-chrome .tb-donation__bank {
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.2);
}
.tb-dark-theme .tb-donation__label,
.tb-dark-chrome .tb-donation__label {
  font-size: 10px;
  color: var(--text-muted);
}
.tb-dark-theme .tb-donation__value,
.tb-dark-chrome .tb-donation__value {
  font-family: var(--font-mono);
}

/* ── Footer — near-black, circular bordered social icons ── */
.tb-dark-theme .tb-footer,
.tb-dark-chrome .tb-footer {
  background: #08080A;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tb-dark-theme .tb-footer__social,
.tb-dark-chrome .tb-footer__social {
  gap: var(--tb-space-4);
}
.tb-dark-theme .tb-footer__social a,
.tb-dark-chrome .tb-footer__social a {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,.75);
}
.tb-dark-theme .tb-footer__social a:hover,
.tb-dark-chrome .tb-footer__social a:hover {
  border-color: var(--tb-red-500);
  color: var(--tb-red-500);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   THANK-YOU / PAYMENT RETURN
   ══════════════════════════════════════════════════════════════════════════════════════════

   ⚠️ IT USED TO BORROW .tb-ep-body FROM THE EVENT PAGE, AND INHERITED TWO DEFECTS BY DOING SO.

   .tb-ep-body is the event page's two-column split, and it is positioned by the .tb-ep-bar and
   .tb-ep-nav-spacer that single-tb_event.php renders above it. This template renders neither,
   so it got the grid without the offset: the h1 sat at y=48 under a nav whose bottom is y=72 —
   measured, not guessed — and the content was squeezed into the left third with an empty column
   beside it.

   Measured across every template on 2026-09-02: this was the ONLY one clipped. front-page 208,
   archive 232, single event 85, search 184, door 432, 404 363, all clear of the 72px nav.

   So this page gets its own block. One short message deserves one centred column, and a page
   that borrows another page's layout inherits that page's assumptions about what surrounds it.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

.tb-ty {
  /* Every top-of-page template pays this; see landing.css and archive.css for the same line.
     The 72px fallback matters because --nav-h is set by JS and this page is a payment return —
     a buyer arriving before scripts run must still read it. */
  padding: calc(var(--nav-h, 72px) + var(--tb-space-8, 48px)) var(--tb-space-6, 24px)
           var(--tb-space-10, 80px);
  min-height: calc(100vh - var(--nav-h, 72px));
  display: flex;
  justify-content: center;
}

.tb-ty__inner {
  width: 100%;
  max-width: 34rem;          /* a comfortable measure, not the full column */
  margin: 0 auto;
  text-align: center;
}

.tb-ty__inner h1 {
  margin: 0 0 var(--tb-space-5, 20px);
  line-height: 1.15;
}

.tb-ty__event {
  font-size: 1.0625rem;
  margin: 0 0 var(--tb-space-6, 24px);
}

.tb-ty__lede  { margin: 0 0 var(--tb-space-5, 20px); }
.tb-ty__note  { font-size: .875rem; opacity: .72; margin: var(--tb-space-4, 16px) 0 0; }

/* The entry code, on the one branch that still shows it — see the template for when and why. */
.tb-ty__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .06em;
  margin: var(--tb-space-4, 16px) 0;
  padding: var(--tb-space-4, 16px) var(--tb-space-3, 12px);
  border: 1px solid currentColor;
  border-radius: 4px;
  overflow-wrap: anywhere;   /* 24 characters must not force a sideways scroll on a phone */
}

.tb-ty__order { font-size: .9375rem; margin: var(--tb-space-4, 16px) 0 0; }

.tb-ty__actions { margin: var(--tb-space-7, 32px) 0 0; }

@media (max-width: 560px) {
  .tb-ty { padding: calc(var(--nav-h, 72px) + var(--tb-space-6, 24px)) var(--tb-space-5, 20px)
                    var(--tb-space-8, 48px); }
}

/* ── The one action on the failed state ─────────────────────────────────────────────────────
   ⚠️ IT USED TO REUSE .tb-btn--ghost, AND RENDERED AS PLAIN TEXT: 0px border, 0px padding,
   display:inline. Measured, after the screenshot merely looked wrong.

   Two independent reasons, either of which alone would have done it:
     1. `.tb-btn` lives in landing.css, which is enqueued ONLY for page-event-landing.php and
        the front page — so on this template the class matched nothing at all.
     2. Even loaded, `--ghost` is #F4F1EC text on transparent, designed for the DARK landing
        page. On this page's light ground it would have been near-invisible.

   A declined card is the worst moment to hand someone an invisible way back, so this page owns
   its button. `currentColor` rather than a palette token, so it stays legible whatever ground
   it is placed on — the same choice as .tb-ty__code above. */
.tb-ty__btn {
  display: inline-block;
  padding: 13px 34px;
  border: 2px solid currentColor;
  border-radius: 2px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.tb-ty__btn:hover,
.tb-ty__btn:focus-visible { background: currentColor; }
.tb-ty__btn:hover > span,
.tb-ty__btn:focus-visible > span { filter: invert(1); }

/* SHARED COMPONENTS — rendered by more than one surface, so loaded on all of them.
 *
 * ── WHY THIS FILE EXISTS ───────────────────────────────────────────────────────────────────
 *
 * These rules lived in landing.css, which is named for a PAGE and contained three COMPONENTS.
 * Measured at the split: 8 018 of landing.css's 20 703 bytes — 40% — were component CSS, and
 * the consequence showed up the day the event page called tb_render_route(): the schematic and
 * its accessible list arrived unstyled, because the function is portable and its styles were
 * not. The first fix was to enqueue landing.css on event pages too, which is the coupling made
 * invisible rather than removed — a page stylesheet loaded on a surface that is not that page.
 *
 * So the question was never "which pages need landing.css". It was "why is component CSS living
 * in a page file". This file is the answer, and it is in tb_css_bundle_sources(), which is the
 * theme's existing mechanism for exactly this. Cost, measured: the bundle grows 129 621 →
 * ~138 000 bytes, +6.6% before gzip, on a file that is already concatenated and mtime-keyed.
 *
 * ── WHY NOT A SELF-ENQUEUING PARTIAL ───────────────────────────────────────────────────────
 *
 * The obvious alternative is for each partial to wp_enqueue_style() itself. Rejected for a
 * reason that is easy to miss: THE ROUTE IS RENDERED BY A FUNCTION, not only a partial. A
 * shortcode calling tb_render_route() inside the_content enqueues AFTER wp_head, so the CSS
 * lands in the footer and the map paints unstyled first — a visible flash on a component this
 * size. It would also add a second mechanism beside the bundle, which is the same invisible
 * coupling relocated.
 *
 * ── THE COLOUR CONTRACT: --tb-accent, FALLING BACK TO --red ────────────────────────────────
 *
 * ⚠️ Every colour here resolves through var(--tb-accent, var(--red)). A surface that sets
 * --tb-accent gets the event's identity; a surface that sets nothing gets the site brand,
 * automatically. That is what makes these components droppable anywhere: a third surface has to
 * know neither which stylesheet to load nor which token the component secretly reads.
 *
 * It replaces a real bug. `.tb-ep-ticket__buy` read var(--red) — the SITE primary — while the
 * event accent was defined as --lp-accent, so the accent could never reach the button however
 * correctly it was scoped. Two names for one concept, with the consumer reading the one that is
 * not the truth. See the trap catalogue: it is the same fault as _ticket_price vs
 * _event_price_min and _ticket_capacity vs _event_capacity, one layer further out.
 */

/* Surface-neutral defaults. A page that sets none of these still gets a coherent component:
   these are what "no opinion" looks like, not what the landing page looks like. */
:root {
  --tb-accent-ink:  #1A1818;
  --tb-comp-bg:     transparent;
  --tb-comp-bg-2:   rgba(0,0,0,.03);
  --tb-comp-text:   var(--tb-text, #1A1818);
  --tb-comp-dim:    var(--tb-text-muted, #6E6A65);
  --tb-comp-line:   rgba(26,24,24,.12);
}

/* ── Map ── */
.tb-map__shell {
  background: var(--tb-comp-bg-2); border: 1px solid var(--tb-comp-line);
  padding: 34px 30px 26px;
}
.tb-route__leg-label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .19em;
  color: var(--tb-comp-dim); margin: 0 0 14px; font-weight: 600;
}
.tb-route__svg { display: none; width: 100%; height: auto; }
.tb-route__svg-end {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 23px; letter-spacing: 1.5px; fill: #F4F1EC;
}
.tb-route__svg-stop { font-family: var(--tb-font); font-size: 13px; fill: #9A958F; }
.tb-route__svg-time { font-family: var(--tb-font); font-size: 12px; fill: #7E7A75; }
.tb-route__svg-flag { font-family: var(--tb-font); font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; }
.tb-route__svg-sea  {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 15px; letter-spacing: 2px; fill: #4A6B78;
}

.tb-map__legend {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--tb-comp-line); font-size: 14px; color: var(--tb-comp-dim);
}
.tb-map__lg { display: flex; align-items: center; gap: 9px; }
.tb-map__lg b { color: var(--tb-comp-text); font-weight: 600; }
.tb-map__lg-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.tb-map__lg--note { margin-left: auto; }

/* The <ol> is the accessible truth and the only thing that survives at 320px; the map is
   aria-hidden decoration from 720px up. Both come from one array — see inc/route-map.php. */
.tb-route__list { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--tb-accent, var(--red)); }
.tb-route__item { position: relative; padding: 10px 0 10px 24px; }
.tb-route__item::before {
  content: ""; position: absolute; left: -11px; top: 18px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--tb-comp-bg-2); border: 4px solid var(--tb-accent, var(--red));
}
.tb-route__item.is-start::before,
.tb-route__item.is-finish::before {
  background: var(--tb-accent, var(--red)); width: 18px; height: 18px; left: -13px;
}
.tb-route__name { font-weight: 600; }
.tb-route__item.is-start .tb-route__name,
.tb-route__item.is-finish .tb-route__name {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 400;
}
.tb-route__time { color: var(--tb-accent, var(--red)); font-weight: 600; margin-left: 10px; }
.tb-route__note { display: block; color: var(--tb-comp-dim); font-size: 14px; }

@media (min-width: 720px) {
  .tb-route__svg  { display: block; }
  .tb-route__list { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Homepage band — the rides.
 *
 * Lives in this file because it is landing-adjacent, but it is enqueued on the
 * HOMEPAGE too (see inc/enqueue.php): the band is the entry point to the landing
 * pages and shares their accent tokens.
 * ───────────────────────────────────────────────────────────────────────────── */
.tb-rides { background: var(--tb-black); padding: clamp(40px, 6vw, 64px) 0; }
.tb-rides__inner { width: min(100% - 32px, 1160px); margin: 0 auto; }
.tb-rides__heading {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  text-transform: uppercase; letter-spacing: .03em;
  color: #fff; margin: 0 0 28px; text-align: center;
}
.tb-rides__grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .tb-rides__grid[data-count="2"] { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .tb-rides__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } }

.tb-ride {
  display: block; text-decoration: none; position: relative; overflow: hidden;
  border-radius: 12px; min-height: 200px;
  background: var(--ride-accent); color: var(--ride-ink);
}
/* With a poster the card becomes the image, and the scrim carries the text. The accent
   survives as the border so the two rides stay distinguishable at a glance. */
.tb-ride--poster {
  background-image: var(--ride-poster);
  background-size: cover; background-position: center;
  border: 3px solid var(--ride-accent);
  color: #fff;
}
.tb-ride__body { display: block; padding: 26px 24px; position: relative; z-index: 1; }
/* ⚠️ The scrim is not decoration. Neither accent is safe as text on an unknown photograph —
   #FF652B is 2.94:1 on white and #FAEB0A is 1.24:1 — so text over a poster is plain white
   over a dark gradient, and the accent appears only as the border and the CTA underline. */
.tb-ride--poster::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 100%);
}
.tb-ride__kick {
  display: block; font-size: var(--tb-text-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin: 0 0 8px;
}
.tb-ride__title {
  display: block;
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 10px;
}
.tb-ride__route {
  display: block; font-size: var(--tb-text-sm); font-weight: 600;
  letter-spacing: .04em; margin: 0 0 18px; opacity: .9;
}
.tb-ride__cta {
  display: inline-block; font-weight: 700; font-size: var(--tb-text-sm);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 3px solid currentColor; padding-bottom: 2px;
}
.tb-ride--poster .tb-ride__cta { border-bottom-color: var(--ride-accent); }
.tb-ride:hover .tb-ride__title { text-decoration: underline; text-underline-offset: 4px; }
.tb-ride:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }




/* ─────────────────────────────────────────────────────────────────────────────
 * THE REGISTRATION PANEL — a designed component, not a form dropped into a column.
 *
 * ⚠️ SCOPED TO .tb-ep-ticket, NOT TO A PAGE. These rules were .tb-lp-scoped, so the panel was
 * styled on the landing page only; on the event page the SAME partial fell back to theme
 * defaults. Measured there: inputs 153px inside a 375px column (41%), labels wrapping to two
 * lines, a five-line consent block 136px tall, a submit button 2.4x wider than the fields above
 * it, and the price note at 10px #666. It read as broken because it was unstyled.
 *
 * ⚠️ AND IT SURVIVED THE FIRST EXTRACTION. That split was done BY LINE RANGE: the map (183-240)
 * and the rides band (379+) moved, and these rules at 209-267 fell inside "the rest". Split
 * component CSS by CONTENT, never by position.
 *
 * Every colour goes through the --tb-* contract, so the panel takes the accent of whatever
 * surface renders it and needs no page stylesheet to look right.
 * ───────────────────────────────────────────────────────────────────────────── */

/* The event page's sticky right rail is NOT this component. Reset it wherever the panel renders
   outside that context — the rail's viewport height put the submit button below an inner fold
   and nobody could register from a laptop. */
.tb-lp .tb-ep-ticket,
.tb-door .tb-ep-ticket {
  position: static; height: auto; overflow: visible; border-left: 0;
  background: var(--tb-comp-bg-2); border: 1px solid var(--tb-comp-line); padding: 34px;
}

/* ── Fields: FULL WIDTH, always ──
   A 153px input under its own label is the single thing that made this read as broken. */
.tb-ep-ticket .tb-input,
.tb-ep-ticket input[type="text"],
.tb-ep-ticket input[type="email"],
.tb-ep-ticket input[type="tel"],
.tb-ep-ticket input[type="number"],
.tb-ep-ticket select,
.tb-ep-ticket textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--tb-comp-bg);
  color: var(--tb-comp-text);
  border: 1px solid var(--tb-comp-line);
  border-radius: 0;
  font: inherit;
  font-size: 16px;            /* >=16px or iOS zooms the page on focus */
  padding: 12px 14px;
  transition: border-color .15s;
}
.tb-ep-ticket .tb-input:focus,
.tb-ep-ticket input:focus,
.tb-ep-ticket select:focus,
.tb-ep-ticket textarea:focus {
  outline: 0;
  border-color: var(--tb-accent, var(--red));
}
.tb-ep-ticket ::placeholder { color: var(--tb-comp-dim); opacity: 1; }

/* ── Labels: they name a field, they are not content ──
   ⚠️ .tb-field__label, NOT a bare `label`. The markup used to wrap the input inside its label,
   so a bare rule styled the FIELD too — the fields inherited 12px uppercase and could not be
   sized on their own. The partial now emits label/for pairs. */
.tb-ep-ticket .tb-field__label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-comp-dim);
  font-weight: 600;
  margin: 0 0 7px;
  line-height: 1.35;
}
.tb-ep-ticket .tb-field { margin: 0 0 18px; }
.tb-ep-ticket .row { display: grid; gap: 16px; }
.tb-ep-ticket .row .tb-field { margin: 0; }
@media (min-width: 520px) { .tb-ep-ticket .row { grid-template-columns: 1fr 1fr; } }

/* ── Consent ──
   ⚠️ It ran FIVE LINES at 16px and dominated the panel. It is a legal necessity, not the subject
   of the page: smaller, tighter, in a bounded box, with the checkbox in its own grid column so
   the text cannot wrap underneath it. Still 14px at 1.55 on a high-contrast ground — shrinking
   consent past readability would be a different kind of wrong. */
.tb-ep-ticket .tb-consent__label {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--tb-comp-text);
  margin: 0;
}
.tb-ep-ticket .tb-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  margin: 4px 0 0;
  background: var(--tb-comp-bg);
  border: 1px solid var(--tb-comp-line);
}
.tb-ep-ticket input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--tb-accent, var(--red));
}

/* ── Submit: the width of the fields it follows, because it belongs to them ── */
.tb-ep-ticket .tb-ep-ticket__buy {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 20px 0 0;
  background: var(--tb-accent, var(--red));
  color: var(--tb-accent-ink);
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0; border-radius: 0;
  padding: 16px 20px;
  cursor: pointer;
  min-height: 56px;
}
.tb-ep-ticket .tb-ep-ticket__buy:hover { filter: brightness(1.08); }
.tb-ep-ticket .tb-ep-ticket__buy:focus-visible {
  outline: 3px solid var(--tb-accent, var(--red)); outline-offset: 3px;
}

/* ── The price ──
   ⚠️ NOT FINE PRINT. It rendered at 10px #666 UNDER the button: a visitor must not learn what
   something costs by squinting after the control that commits them to it. The amount is display
   type at the head of the panel; the payment sentence stays a SEPARATE, quieter sentence,
   because it is a statement about us rather than a property of the ride. */
.tb-ep-ticket__label {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 30px;
  letter-spacing: .02em;
  color: var(--tb-comp-text);
  margin: 0 0 18px;
  text-transform: none;
}
.tb-ep-ticket__hd { padding: 0; border: 0; }
.tb-ep-ticket [data-testid="tb-pay-note"],
.tb-ep-ticket .tb-ep-ticket__note {
  display: block;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--tb-accent, var(--red));
  background: var(--tb-comp-bg);
  color: var(--tb-comp-text);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.tb-ep-ticket__status { color: var(--tb-comp-text); font-size: 15px; }

/* ── The global floating CTA ──
   ⚠️ Missed in the --tb-accent migration: it stayed site gold (rgb(212,175,55)) on an event
   whose accent is #FF652B. Global element, so it takes an accent only where one is set. */
.tb-fab {
  background: var(--tb-accent, var(--red));
  color: var(--tb-accent-ink, #fff);
}


/* ── Components on a phone ──
   ⚠️ These two lived inside landing.css's own @media block, so the map lost its mobile padding
   on every surface that does not load that file. Found by auditing the page stylesheet BY
   CONTENT — the first extraction was done by line range and could not see them. */
@media (max-width: 560px) {
  .tb-map__shell { padding: 22px 18px 18px; }
  .tb-map__lg--note { margin-left: 0; }
  .tb-lp .tb-ep-ticket, .tb-door .tb-ep-ticket { padding: 24px 20px; }
}

/* A cancelled event on a card: stated plainly, not alarming. Same weight as the sold-out
   badge it replaces — the reader needs the fact, not a warning. */
.tb-badge--cancelled{background:#1A1818;color:#fff;}

/* ── HONEYPOT ───────────────────────────────────────────────────────────────────────────────
 *
 * ⚠️ NOT `left:-9999px`, WHICH IS WHAT BROKE REGISTRATION FOR A REAL PERSON.
 *
 * Both forms hid this field by pushing it off-screen with an inline style. Off-screen is not
 * hidden as far as a browser's AUTOFILL is concerned: Chrome and Safari happily fill fields
 * they consider off-canvas, and the label read "Имейл" — precisely the thing an email autofill
 * is looking for. So a visitor with autofill on had the trap filled FOR them, the handler saw a
 * filled honeypot, and the submission was refused. From the visitor's side: a plain reload.
 *
 * `display:none` is respected by autofill in a way that off-screen positioning is not. The
 * field stays in the DOM, which is all a bot needs to find and fill it.
 */
.tb-hp {
  display: none !important;
}

/* ⚠️ THE TERMS LINK IN A CONSENT LABEL — and it lives HERE, not in landing.css, because the
   consent control renders on THREE surfaces and only one of them loads the landing stylesheet.

   Measured on the landing page: link colour rgb(244,241,236), label colour rgb(244,241,236),
   text-decoration none, same weight — a link nobody can see, and Viva's source-approval
   checklist asks for terms REACHABLE from the purchase flow. Unreachable in practice is absent.

   ⚠️ THE FIRST FIX PUT THIS RULE IN landing.css, which the CONTACT page never enqueues — so the
   invisible link would have come straight back on the surface that collects the most personal
   data. That is the .tb-btn--ghost failure a third time: a rule authored for the surface in
   front of me rather than for the component. components.css is in the global bundle, and
   .tb-consent already lives here, so the component carries its own styling wherever it renders. */
.tb-consent__label a {
  color: var(--tb-accent, var(--lp-accent, currentColor));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tb-consent__label a:hover,
.tb-consent__label a:focus-visible { text-decoration-thickness: 2px; }

/* The availability line. Discreet by design — present so a buyer can see the room filling, quiet
   enough that it does not compete with the price or the button. In components.css because the
   partials that render it are shared by the event page and the landing page. */
.tb-ep-ticket__capacity {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .7;
  letter-spacing: .01em;
}