@import "tailwindcss";

/* ============================================================
   BEELET DESIGN SYSTEM — COLORS & TYPE
   Palette/layout z Beelet_Final, typografia Inter wszędzie (Beelet_Merged)
   ============================================================ */

/* ---- FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

@theme {
  --color-honey-50:   #FFF9E3;
  --color-honey-100:  #FFF0B8;
  --color-honey-200:  #FFE680;
  --color-honey-300:  #FFD94D;
  --color-honey-400:  #FACF2E;
  --color-honey-500:  #F5C518;
  --color-honey-600:  #D9A60A;
  --color-honey-700:  #AD7F04;
  --color-honey-800:  #7D5A00;

  --color-orange-50:  #FFF3E3;
  --color-orange-100: #FFE1B8;
  --color-orange-200: #FFC87D;
  --color-orange-300: #FFB24F;
  --color-orange-400: #FFA037;
  --color-orange-500: #F78C22;
  --color-orange-600: #DB6D0E;
  --color-orange-700: #A95004;
  --color-orange-800: #703500;

  --color-navy-50:  #EEF2F6;
  --color-navy-100: #D6DEE7;
  --color-navy-200: #A6B5C5;
  --color-navy-300: #6F8298;
  --color-navy-400: #456178;
  --color-navy-500: #2A4660;
  --color-navy-600: #193C5A;
  --color-navy-700: #112B43;
  --color-navy-800: #0B1E31;
  --color-navy-900: #061221;

  --color-sky-50:   #F2FAFB;
  --color-sky-100:  #E2F3F6;
  --color-sky-200:  #CDEEF2;
  --color-sky-300:  #A8DFE8;
  --color-sky-400:  #78C9D7;
  --color-sky-500:  #46ADC0;

  --color-cream-50:  #FFFBF2;
  --color-cream-100: #FDF5E3;
  --color-cream-200: #F8ECCB;
}

:root {
  --honey-50:  #FFF9E3; --honey-100: #FFF0B8; --honey-200: #FFE680;
  --honey-300: #FFD94D; --honey-400: #FACF2E; --honey-500: #F5C518;
  --honey-600: #D9A60A; --honey-700: #AD7F04; --honey-800: #7D5A00;

  --orange-50:  #FFF3E3; --orange-100: #FFE1B8; --orange-200: #FFC87D;
  --orange-300: #FFB24F; --orange-400: #FFA037; --orange-500: #F78C22;
  --orange-600: #DB6D0E; --orange-700: #A95004; --orange-800: #703500;

  --navy-50:  #EEF2F6; --navy-100: #D6DEE7; --navy-200: #A6B5C5;
  --navy-300: #6F8298; --navy-400: #456178; --navy-500: #2A4660;
  --navy-600: #193C5A; --navy-700: #112B43; --navy-800: #0B1E31; --navy-900: #061221;

  --sky-200: #CDEEF2; --sky-500: #46ADC0;

  --cream-50: #FFFBF2; --cream-100: #FDF5E3; --cream-200: #F8ECCB;

  --neutral-0: #FFFFFF; --neutral-50: #FAFAF7; --neutral-100: #F2F1EC;
  --neutral-200: #E4E3DB; --neutral-300: #CCCABE; --neutral-400: #97958A;
  --neutral-500: #6E6C62; --neutral-600: #4A4944; --neutral-700: #2E2D2A; --neutral-900: #121210;

  --success-500: #2FA663; --success-100: #D8F1E1;
  --warning-500: #E8A313; --warning-100: #FFEFC2;
  --danger-500:  #D93A3A; --danger-100:  #FBD9D9;
  --info-500:    #46ADC0; --info-100:    #E2F3F6;

  --bg:            var(--cream-50);
  --bg-subtle:     var(--cream-100);
  --bg-card:       var(--neutral-0);
  --bg-inverse:    var(--navy-700);
  --bg-brand:      var(--honey-500);
  --bg-brand-soft: var(--honey-50);

  --fg:            var(--navy-700);
  --fg-muted:      var(--navy-400);
  --fg-subtle:     var(--navy-300);
  --fg-inverse:    var(--cream-50);
  --fg-on-brand:   var(--navy-700);
  --fg-on-orange:  var(--neutral-0);

  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-600);
  --accent-press:  var(--orange-700);
  --link:          var(--orange-600);
  --link-hover:    var(--orange-700);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--honey-500);

  --focus-ring:    var(--honey-400);
  --selection-bg:  var(--honey-200);

  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgba(25, 60, 90, 0.06);
  --shadow-sm: 0 2px 6px rgba(25, 60, 90, 0.08), 0 1px 2px rgba(25, 60, 90, 0.05);
  --shadow-md: 0 8px 20px rgba(25, 60, 90, 0.10), 0 2px 6px rgba(25, 60, 90, 0.06);
  --shadow-lg: 0 20px 40px rgba(25, 60, 90, 0.14), 0 6px 12px rgba(25, 60, 90, 0.08);
  --shadow-xl: 0 30px 60px rgba(25, 60, 90, 0.18);
  --shadow-brand: 0 12px 28px rgba(245, 197, 24, 0.35);
  --shadow-cta:   0 10px 22px rgba(247, 140, 34, 0.38);
  --shadow-inner: inset 0 2px 4px rgba(25, 60, 90, 0.08);

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px;
  --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 76px;

  --leading-tight:  1.15; --leading-snug:   1.3;
  --leading-normal: 1.5;  --leading-loose:  1.7;

  --tracking-tight:  -0.02em; --tracking-normal: 0;
  --tracking-wide:   0.04em;  --tracking-caps:   0.08em;

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

/* ============================================================
   BASE & PAGE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px 80px;
}

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
.rule.strong { border-top-color: var(--navy-700); }
.rule.thick { border-top: 3px solid var(--navy-700); }
.rule.triple {
  border: 0;
  border-top: 3px solid var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
  height: 9px;
}

/* ============ UTILITY BAR ============ */
.utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  padding: 4px 0 8px;
}
.utility .weather { display: flex; gap: 16px; align-items: center; }
.utility .weather .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-subtle); }
.utility .signin { display: flex; gap: 14px; align-items: center; }
.utility .signin a { color: var(--fg); font-weight: 700; }
.utility .signin a:hover { color: var(--accent); text-decoration: none; }

/* ============ MASTHEAD ============ */
.masthead {
  padding: 24px 0 14px;
  text-align: center;
  position: relative;
}
.masthead .latin {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
}

/* Nameplate: Inter 900 italic */
.nameplate {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(64px, 11vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
  display: inline-block;
  position: relative;
}
.nameplate .bee { color: var(--honey-500); }
.nameplate .let { color: var(--navy-700); }

.bee-wrap {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: 96px;
  pointer-events: none;
}
.bee-wrap img { width: 100%; display: block; }

.tagline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  margin: 10px 0 0;
}

/* ============ MAST META ============ */
.mast-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  padding: 8px 0;
}
.mast-meta .left { text-align: left; }
.mast-meta .center { white-space: nowrap; color: var(--fg); }
.mast-meta .right { text-align: right; }
.mast-meta b { color: var(--fg); }
.mast-meta .fee {
  display: inline-block;
  background: var(--honey-500);
  color: var(--navy-700);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  letter-spacing: 0.06em;
  font-weight: 900;
}

/* ============ SECTION NAV ============ */
nav.sections {
  display: flex; gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 0;
}
nav.sections a {
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fg);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
nav.sections a:hover { background: var(--honey-100); text-decoration: none; }
nav.sections a.active { background: var(--navy-700); color: var(--fg-inverse); }

/* ============ HERO ============ */
.hero { padding: 32px 0 0; }

.hero .top-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 14px;
}
.hero .top-rule .line { height: 3px; background: var(--navy-700); }

.hero .top-rule .desk {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-700);
  white-space: nowrap;
}

.hero .kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hero .kicker .badge {
  background: var(--navy-700);
  color: var(--fg-inverse);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero .kicker .cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero .kicker .quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

/* H1 hero */
.hero h1.hed {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 20px;
}
.hero h1.hed .plain { font-style: normal; font-weight: 900; }
.hero h1.hed .mark {
  background-image: linear-gradient(var(--honey-300), var(--honey-300));
  background-position: 0 90%;
  background-repeat: no-repeat;
  background-size: 100% 28%;
  padding: 0 4px;
}

/* Lead: Inter 16px, 2 kolumny, dropcap */
.hero .lead {
  column-count: 2;
  column-gap: 28px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg);
  margin: 0 0 18px;
  text-align: justify;
  hyphens: auto;
}
.hero .lead .dropcap {
  float: left;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--navy-700);
}

/* Byline */
.hero .byline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.hero .byline b { color: var(--fg); font-weight: 800; }

/* ============ TICKET BOX ============ */
.ticket-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.ticket-box .dateblock {
  background: var(--honey-500);
  color: var(--navy-700);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1;
  min-width: 72px;
}
.ticket-box .dateblock .mo { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ticket-box .dateblock .day { font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.ticket-box .dateblock .time { font-size: 11px; font-weight: 700; margin-top: 4px; display: block; }
.ticket-box .venue { font-weight: 800; font-size: var(--text-md); line-height: 1.3; }
.ticket-box .venue .addr { display: block; font-weight: 500; font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }
.ticket-box .price { text-align: right; }
.ticket-box .price .from { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.ticket-box .price .amt { font-weight: 900; font-size: var(--text-2xl); letter-spacing: -0.02em; color: var(--fg); }

/* ============ CTA ============ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--fg-on-orange);
  background: var(--orange-500);
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  font-family: var(--font-sans);
}
.cta:hover { background: var(--orange-600); transform: translateY(-1px); }
.cta:active { transform: scale(0.97); }

.cta.ghost {
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--border-strong);
  box-shadow: none;
  padding: 10px 20px;
}
.cta.ghost:hover { background: var(--honey-100); border-color: var(--honey-400); }

.cta.honey {
  background: var(--honey-500);
  color: var(--fg-on-brand);
  box-shadow: var(--shadow-brand);
}
.cta.honey:hover { background: var(--honey-600); }

.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.hero-actions .fee-note {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-muted);
}
.hero-actions .fee-note b { color: var(--fg); font-weight: 800; }

/* ============ TICKET PREVIEW ============ */
.hero-figure { position: relative; padding-top: 8px; }

.hero-figure .caption {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.45;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.hero-figure .caption b { font-weight: 800; color: var(--fg); }
.hero-figure .caption .warn { color: var(--danger-500); font-weight: 800; }

.ticket-preview {
  position: relative;
  transform: rotate(2deg);
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  display: flex;
  overflow: visible;
  max-width: 420px;
  margin: 20px auto 0;
}
.ticket-preview::before,
.ticket-preview::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  background: var(--bg);
  border-radius: 50%;
  left: 128px;
  border: 1px solid var(--border);
}
.ticket-preview::before { top: -12px; border-bottom: none; }
.ticket-preview::after { bottom: -12px; border-top: none; }
.ticket-preview .stub {
  width: 128px;
  background: var(--honey-500);
  color: var(--navy-700);
  padding: 18px 14px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  display: flex; flex-direction: column; justify-content: space-between;
}
.ticket-preview .stub .brand { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.ticket-preview .stub .big { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.ticket-preview .stub .fee { font-size: 10px; font-weight: 600; opacity: 0.75; margin-top: 3px; }
.ticket-preview .body {
  flex: 1;
  padding: 16px 18px 16px 22px;
  border-left: 2px dashed rgba(25, 60, 90, 0.22);
}
.ticket-preview .body .cat {
  display: inline-block;
  background: var(--navy-700); color: var(--fg-inverse);
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: var(--radius-pill);
  margin-bottom: 8px;
}
.ticket-preview .body .who { font-weight: 900; font-size: var(--text-md); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 3px; }
.ticket-preview .body .when { font-size: var(--text-xs); color: var(--fg-muted); font-weight: 600; margin-bottom: 12px; }
.ticket-preview .body .seat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.ticket-preview .body .seat .lbl { font-size: 8px; font-weight: 800; letter-spacing: 0.1em; color: var(--fg-muted); text-transform: uppercase; }
.ticket-preview .body .seat .val { font-size: 14px; font-weight: 900; }

.live-pill {
  position: absolute;
  top: -8px; right: 8%;
  background: var(--orange-500); color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 900; letter-spacing: 0.06em;
  box-shadow: var(--shadow-cta);
  display: flex; align-items: center; gap: 7px;
  transform: rotate(-5deg);
  z-index: 2;
}
.live-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.3); }
}

.hero .bot-rule { margin-top: 32px; }

/* ============ BULLETIN ============ */
.bulletin {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--navy-700);
  color: var(--fg-inverse);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  margin: 28px 0 0;
}
.bulletin .tag {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-500);
  padding-right: 20px;
  border-right: 1px solid rgba(255,251,242,0.2);
}
.bulletin .msg { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--cream-50); }
.bulletin .msg b { font-weight: 800; color: #fff; }
.bulletin .msg em {
  font-family: var(--font-sans);
  font-style: italic;
  color: var(--honey-300);
  font-weight: 500;
}
.bulletin .more {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--honey-500);
  white-space: nowrap;
}
.bulletin .more:hover { color: #fff; text-decoration: none; }

/* ============ SECTION HED ============ */
.section-hed {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  margin: 64px 0 28px;
}
.section-hed .line { height: 1px; background: var(--navy-700); position: relative; }
.section-hed .line::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -4px; height: 1px; background: var(--navy-700);
}
.section-hed .wrap { text-align: center; }
.section-hed h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.section-hed .sub {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* ============ GRID ============ */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  cursor: pointer;
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--honey-400);
}
.card .thumb { aspect-ratio: 5 / 3; position: relative; overflow: hidden; }
.card .thumb.t1 { background: linear-gradient(135deg, #F78C22 0%, #F5C518 100%); }
.card .thumb.t2 { background: linear-gradient(135deg, #193C5A 0%, #2A4660 100%); }
.card .thumb.t3 { background: linear-gradient(135deg, #F5C518 0%, #FFE680 100%); }
.card .thumb.t4 { background: linear-gradient(135deg, #CDEEF2 0%, #46ADC0 100%); }
.card .thumb.t5 { background: linear-gradient(135deg, #A95004 0%, #F78C22 100%); }
.card .thumb.t6 { background: linear-gradient(135deg, #112B43 0%, #456178 100%); }

.card .cat {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--navy-700); color: var(--fg-inverse);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.card .low {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--warning-500); color: var(--navy-700);
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card .kicker-sm {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.card h3.title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--fg);
}
.card .meta { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: 14px; }
.card .foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.card .price { font-weight: 800; font-size: var(--text-lg); color: var(--fg); }
.card .price small { font-weight: 600; font-size: var(--text-xs); color: var(--fg-muted); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.card .buy {
  background: var(--orange-500); color: #fff; border: 0;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-weight: 800; font-size: var(--text-sm);
  cursor: pointer; font-family: inherit;
}
.card .buy:hover { background: var(--orange-600); }

/* ============ ORG CTA ============ */
.org-cta {
  margin-top: 72px;
  background: var(--navy-700);
  color: var(--fg-inverse);
  border-radius: var(--radius-2xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.org-cta::before {
  content: ""; position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  background: var(--honey-500);
  border-radius: 50%;
  opacity: 0.15;
}
.org-cta .kicker {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-500);
  margin-bottom: 10px;
}
.org-cta h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-inverse);
  margin: 0 0 12px;
}
.org-cta h2 em {
  color: var(--honey-500);
  font-style: italic;
  font-family: var(--font-sans);
  font-weight: 900;
}
.org-cta p {
  color: var(--cream-200);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin: 0 0 20px;
  max-width: 48ch;
}
.org-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.org-cta .cta.ghost { color: var(--fg-inverse); border-color: var(--cream-200); }
.org-cta .cta.ghost:hover { background: rgba(255,251,242,0.08); border-color: var(--honey-400); }
.org-cta .stats { display: grid; grid-template-columns: 1fr; gap: 12px; position: relative; z-index: 1; }
.org-cta .stat {
  background: rgba(255,251,242,0.06);
  border: 1px solid rgba(255,251,242,0.12);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.org-cta .stat .n {
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--honey-500);
  letter-spacing: -0.025em;
  line-height: 1;
}
.org-cta .stat .l {
  font-size: var(--text-sm);
  color: var(--cream-200);
  margin-top: 4px;
  font-weight: 500;
}

/* ============ FOOTER ============ */
footer.colophon {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 32px;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
footer .brand {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}
footer .brand .bee { color: var(--honey-500); }
footer .brand .let { color: var(--navy-700); }
footer .fine {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 4px;
}
footer ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
}
footer ul a { color: var(--fg); font-weight: 500; }
footer ul a:hover { color: var(--accent); text-decoration: none; }
footer .right {
  text-align: right;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}

/* ============ MOBILE ============ */
@media (max-width: 960px) {
  .page { padding: 16px 20px 60px; }
  .hero .top-rule { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .hero .top-rule .line { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-figure { order: -1; }
  .hero .lead { column-count: 1; }
  .ticket-preview { transform: rotate(1deg); }
  .grid { grid-template-columns: 1fr; }
  .mast-meta { grid-template-columns: 1fr; text-align: center; gap: 4px; }
  .mast-meta .left, .mast-meta .right { text-align: center; }
  .org-cta { grid-template-columns: 1fr; padding: 32px 24px; }
  footer.colophon { grid-template-columns: 1fr; text-align: left; }
  footer .right { text-align: left; }
  .utility { flex-wrap: wrap; gap: 8px; }
  .utility .weather { flex-wrap: wrap; gap: 10px; }
  .section-hed { grid-template-columns: 1fr; gap: 10px; }
  .section-hed .line { display: none; }
  .bulletin { grid-template-columns: 1fr; gap: 10px; padding: 16px 20px; }
  .bulletin .tag { border-right: 0; padding-right: 0; padding-bottom: 10px; border-bottom: 1px solid rgba(255,251,242,0.2); }
  .bee-wrap { width: 56px; right: 2%; }
}