/* EventBrella marketing design system — scoped from mockup. Do not use outside .eventbrella-site */

.eventbrella-site {
  /* The only three colors in this palette — everything else below is a
     color-mix() of these three, never an independently chosen hex. */
  --ivory: #F3EFE5;
  --ink: #0B2929;
  --gold-2: #D2BD8C;

  --ivory-deep: color-mix(in srgb, var(--ivory) 85%, var(--gold-2) 15%);
  /* Secondary/muted text — deliberately a muted CREAM (not muted ink):
     the page background is now deep teal, so "quieter than the headline"
     has to mean quieter light text, not dark text (which would be
     dark-on-dark and unreadable). Every existing var(--ink-soft) usage
     already means exactly this role wherever it appears. */
  --ink-soft: color-mix(in srgb, var(--ivory) 72%, var(--ink) 28%);
  /* The inverse role, for the handful of light "card" surfaces (ledger
     cards, tickets-include) that intentionally stay cream/white even
     though the page around them is now teal — their own secondary text
     needs to stay dark-on-light, not light-on-light. */
  --surface-muted: color-mix(in srgb, var(--ink) 65%, var(--ivory) 35%);
  --gold-1: color-mix(in srgb, var(--gold-2) 70%, var(--ivory) 30%);
  --gold-3: color-mix(in srgb, var(--gold-2) 65%, var(--ink) 35%);
  --gold-line: color-mix(in srgb, var(--gold-2) 40%, transparent);
  --white: var(--ivory);
  --receipt-line: color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-gold: 0 20px 60px -20px color-mix(in srgb, var(--ink) 35%, transparent);

  /* Deep teal is now the site's dominant background, cream the text on
     top of it, per the moodboard — champagne (--gold-2) stays the accent
     for buttons/eyebrows/dividers/borders. */
  background: var(--ink);
  color: var(--ivory);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.eventbrella-site::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(210,189,140,0.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 105% 10%, rgba(210,189,140,0.08), transparent 60%);
}

.eventbrella-site > * {
  position: relative;
  z-index: 1;
}

.eventbrella-site .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

.eventbrella-site h1,
.eventbrella-site h2,
.eventbrella-site h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.eventbrella-site .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eventbrella-site .eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gold-2);
}

.eventbrella-site .foil {
  background: linear-gradient(115deg, var(--gold-3) 0%, var(--gold-1) 28%, var(--gold-2) 50%, var(--gold-1) 68%, var(--gold-3) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: eventbrellaFoilShift 9s ease-in-out infinite;
}

@keyframes eventbrellaFoilShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.eventbrella-site a {
  color: inherit;
  text-decoration: none;
}

/* ===== NAV =====
   Deep teal is the bold, dominant background here (not just a text
   color) — cream/champagne sit on top of it, matching the moodboard's
   ticket-stub look. Scoped to nav.eb-nav specifically so .brand-name,
   .seal, .nav-links etc. keep their light-on-cream styling everywhere
   else they're reused (e.g. the footer's .seal). */
.eventbrella-site nav.eb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,41,41,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-line);
}

.eventbrella-site nav.eb-nav .brand-name {
  color: var(--ivory);
}

.eventbrella-site nav.eb-nav .brand-name em {
  color: var(--gold-2);
}

.eventbrella-site nav.eb-nav .seal span {
  color: var(--gold-2);
}

.eventbrella-site nav.eb-nav .nav-links a {
  color: rgba(243,239,229,0.72);
}

.eventbrella-site nav.eb-nav .nav-links a:hover,
.eventbrella-site nav.eb-nav .nav-links a.active {
  color: var(--ivory);
}

.eventbrella-site nav.eb-nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.eventbrella-site .brandmark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eventbrella-site .seal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.4px solid var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.eventbrella-site .seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
}

.eventbrella-site .seal span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--gold-3);
}

.eventbrella-site .brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.eventbrella-site .brand-name em {
  font-style: normal;
  color: var(--gold-3);
}

.eventbrella-site .nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.eventbrella-site .nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}

.eventbrella-site .nav-links a:hover,
.eventbrella-site .nav-links a.active {
  color: var(--ink);
}

.eventbrella-site .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.eventbrella-site .btn-gold {
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1) 100%);
  color: #1A1508;
  box-shadow: var(--shadow-gold);
}

.eventbrella-site .btn-gold:hover {
  transform: translateY(-2px);
}

.eventbrella-site .btn-ghost {
  border: 1px solid var(--ivory);
  color: var(--ivory);
  background: transparent;
}

.eventbrella-site .btn-ghost:hover {
  background: var(--ivory);
  color: var(--ink);
}

/* /events search (see eventSearchForm in lib/html.js) — plain GET form,
   no JS required: typing and submitting just reloads /events?q=... with
   server-filtered results. */
.eventbrella-site .event-search {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 8px;
  padding: 0 20px;
}

.eventbrella-site .event-search input {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
}

.eventbrella-site .event-search input:focus {
  outline: 1px solid var(--gold-2);
}

.eventbrella-site .event-search-meta {
  text-align: center;
  padding: 0 20px;
}

/* ===== HERO ===== */
.eventbrella-site header.hero {
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}

.eventbrella-site .spotlight {
  position: absolute;
  top: -260px;
  width: 520px;
  height: 700px;
  background: conic-gradient(from 200deg at 50% 0%, transparent, rgba(210,189,140,0.16), transparent 35%);
  z-index: 0;
  pointer-events: none;
}

.eventbrella-site .spotlight.left {
  left: -140px;
  transform: rotate(-8deg);
}

.eventbrella-site .spotlight.right {
  right: -140px;
  transform: rotate(8deg) scaleX(-1);
}

.eventbrella-site .hero-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: stretch;
}

.eventbrella-site .hero-media {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eventbrella-site .hero-slideshow {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ivory-deep);
  border: 1px solid var(--receipt-line);
  box-shadow: 0 30px 80px -40px rgba(11,41,41, 0.35);
}

.eventbrella-site .hero-slideshow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* fill, not cover: same no-cropping rule as .event-card-face-front img
     and .tour-hero-media img — the full flyer stays visible, stretched
     to fit the hero box rather than cropped to fill it. */
  object-fit: fill;
  object-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.eventbrella-site .hero-slideshow-img.is-active {
  opacity: 1;
}

.eventbrella-site .hero-slideshow-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,41,41, 0.28);
  backdrop-filter: blur(4px);
}

.eventbrella-site .hero-slideshow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(243,239,229, 0.45);
  cursor: pointer;
}

.eventbrella-site .hero-slideshow-dot.is-active {
  background: var(--gold-1);
}

.eventbrella-site .hero-copy {
  text-align: left;
  max-width: 520px;
  height: fit-content;
  align-self: start;
  padding-top: 0;
}

.eventbrella-site .hero h1 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  margin: 0 0 18px;
}

.eventbrella-site .hero h1 .line2 {
  display: block;
  white-space: nowrap;
}

.eventbrella-site .hero-copy > p.sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 0 24px;
}

.eventbrella-site .hero-lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eventbrella-site .hero-lead-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ivory);
}

.eventbrella-site .hero-lead-field em {
  color: var(--gold-2);
  font-style: normal;
}

.eventbrella-site .hero-lead-spark {
  position: relative;
  display: block;
  padding: 1.5px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--gold-line);
  isolation: isolate;
}

.eventbrella-site .hero-lead-spark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    var(--gold-3) 322deg,
    var(--gold-2) 336deg,
    var(--gold-1) 344deg,
    #fff8e0 348deg,
    var(--gold-1) 352deg,
    var(--gold-3) 360deg
  );
  transform: translate(-50%, -50%);
  animation: heroLeadSparkSpin 2.8s linear infinite;
}

.eventbrella-site .hero-lead-spark:focus-within::before {
  animation-duration: 1.6s;
}

.eventbrella-site .hero-lead-field input,
.eventbrella-site .hero-lead-field textarea,
.eventbrella-site .hero-lead-field select {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 12px 14px;
  border: none;
  border-radius: 1px;
  background: var(--white);
  color: var(--ink);
}

.eventbrella-site .hero-lead-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.eventbrella-site .hero-lead-field input:focus,
.eventbrella-site .hero-lead-field textarea:focus,
.eventbrella-site .hero-lead-field select:focus {
  outline: none;
}

/* Create-event form's multi-tier ticket calculator (see createEventFormPage
   in lib/promoter-html.js) — sits inside the same light .ledger-card as the
   rest of that form, so secondary text uses --surface-muted, the dark-on-
   light counterpart to --ink-soft (see its definition at the top of this
   file for why the two aren't interchangeable). */
.eventbrella-site .ticket-tiers-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.eventbrella-site .ticket-tiers-section > em {
  color: var(--gold-3);
  font-style: normal;
}

.eventbrella-site .ticket-tiers-section > small {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}

.eventbrella-site .ticket-tier-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--receipt-line);
}

.eventbrella-site .ticket-tier-row[hidden] {
  display: none;
}

.eventbrella-site .ticket-tier-net {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.eventbrella-site .ticket-tier-net-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surface-muted);
}

.eventbrella-site .ticket-tier-net-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-3);
}

.eventbrella-site .ticket-tier-net-fees {
  font-size: 11px;
  font-weight: 400;
  color: var(--surface-muted);
}

.eventbrella-site .ticket-tier-remove {
  align-self: center;
}

/* Same .btn-ghost-is-ivory-on-teal problem as the .zoey-feedback override
   above — these buttons live in the same light .ledger-card and need the
   same flip to ink, or they're invisible (ivory border/text on ivory). */
.eventbrella-site .ledger-card .ticket-tier-remove,
.eventbrella-site .ledger-card [data-add-tier] {
  border-color: var(--ink);
  color: var(--ink);
}

.eventbrella-site .ledger-card .ticket-tier-remove:hover,
.eventbrella-site .ledger-card [data-add-tier]:hover {
  background: var(--ink);
  color: var(--ivory);
}

@media (max-width: 640px) {
  .eventbrella-site .ticket-tier-row {
    grid-template-columns: 1fr;
  }
}

@keyframes heroLeadSparkSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.eventbrella-site .hero-lead-error {
  margin: 0;
  color: #8b2e2e;
  font-size: 13px;
}

.eventbrella-site .hero-form-success {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold-2);
}

.eventbrella-site .hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}

.eventbrella-site .hero-ctas .btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* ===== HOME TOPBAR (homepage only) =====
   Replaces the standard nav.eb-nav via layout()'s navOverride (see
   homeTopbar() in lib/html.js) — a slim hotel-brochure bar: time-of-day
   + sun/moon on the left, "Concier" truly centered (absolute + transform,
   so it stays centered regardless of the other two elements' widths),
   hamburger on the right.

   The homepage's body now starts with .home-hero (no marquee sections
   above it any more), so this bar overlays directly on the hero photo
   instead of sitting as its own solid strip above it: taken out of flow
   (absolute, positioned against .eventbrella-site's own `position:
   relative`) so .home-hero — the very next element in the DOM — starts
   at the true top of the page, with this bar floating on top of it on a
   transparent top-to-clear fade rather than nav.eb-nav's normal solid
   background/blur/border. */
.eventbrella-site nav.eb-nav.home-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(11,41,41,0.55) 0%, transparent 100%);
  backdrop-filter: none;
  border-bottom: none;
}

.eventbrella-site .home-topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.eventbrella-site .home-topbar-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--gold-2);
}

.eventbrella-site .home-topbar-icon {
  display: inline-flex;
  color: var(--gold-2);
}

.eventbrella-site .home-topbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory);
}

.eventbrella-site .home-topbar-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  padding: 4px;
  cursor: pointer;
}

.eventbrella-site .home-topbar-menu span {
  display: block;
  height: 1.5px;
  background: var(--ivory);
  transition: background 0.2s ease;
}

.eventbrella-site .home-topbar-menu:hover span {
  background: var(--gold-2);
}

/* Full-screen nav reveal, CSS-only (:target — same technique as
   .subscribe-modal elsewhere in this file; this app has no client-side
   JS anywhere). */
.eventbrella-site .home-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
}

.eventbrella-site .home-menu-overlay:target {
  display: block;
}

body:has(.home-menu-overlay:target) {
  overflow: hidden;
}

.eventbrella-site .home-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,41,41,0.94);
  backdrop-filter: blur(6px);
}

.eventbrella-site .home-menu-panel {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.eventbrella-site .home-menu-panel a {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ivory);
  letter-spacing: 0.02em;
}

.eventbrella-site .home-menu-panel a:hover {
  color: var(--gold-2);
}

.eventbrella-site .home-menu-panel .btn {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  margin-top: 10px;
}

.eventbrella-site .home-menu-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 32px;
  color: var(--ivory);
  line-height: 1;
}

.eventbrella-site .home-menu-close:hover {
  color: var(--gold-2);
}

/* ===== HOME HERO (homepage only) =====
   Full-bleed background photo (public/conciergoodlife.jpg) with a dark
   teal gradient over it for text contrast, and a single large centered
   headline — no CTAs here by design (browsing/signup live in the
   marquee sections above and the final CTA below, plus the topbar's
   hamburger menu). */
.eventbrella-site .home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  background:
    linear-gradient(180deg, rgba(11,41,41,0.72) 0%, rgba(11,41,41,0.48) 38%, rgba(11,41,41,0.52) 62%, rgba(11,41,41,0.85) 100%),
    url("/conciergoodlife.jpg") center 30% / cover no-repeat;
}

.eventbrella-site .home-hero-content h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--ivory);
  text-shadow: 0 4px 30px rgba(11,41,41,0.5);
  margin: 0;
}

/* ===== ZERO ===== */
.eventbrella-site .zero-section {
  background: var(--ink);
  color: var(--ivory);
  padding: 90px 0;
  position: relative;
}

.eventbrella-site .zero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.eventbrella-site .zero-number {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-1);
  position: relative;
}

.eventbrella-site .zero-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-1);
  opacity: 0.75;
  margin-top: 6px;
  display: block;
}

.eventbrella-site .zero-copy h2 {
  color: var(--ivory);
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.25;
  margin-bottom: 20px;
}

.eventbrella-site .zero-copy p {
  color: rgba(243,239,229,0.72);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.eventbrella-site .zero-copy .kicker,
.eventbrella-site .kicker {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--gold-1);
  font-size: 19px;
}

/* ===== LEDGER ===== */
.eventbrella-site .ledger-section {
  padding: 110px 0;
}

.eventbrella-site .section-head {
  max-width: 640px;
  margin-bottom: 56px;
  text-align: left;
}

/* eventSection()'s marquee sections and the /event-types intro put
   .section-head directly under .pillars-section (no .wrap ancestor) so
   the heading text sits flush against the real viewport edge instead of
   .wrap's centered max-width column — this scoping (direct-child only)
   leaves every other page's .wrap-nested .section-head untouched. */
.eventbrella-site .pillars-section > .section-head {
  padding: 0 32px;
}

.eventbrella-site .section-head .eyebrow {
  margin-bottom: 18px;
}

.eventbrella-site .section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
}

.eventbrella-site .section-head h3 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
}

.eventbrella-site .section-head .sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 14px 0 0;
}

.eventbrella-site .tickets-include {
  max-width: 640px;
  margin: 0 0 40px;
  padding: 30px 34px;
  background: var(--ivory-deep);
  color: var(--ink);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: var(--shadow-gold);
}

.eventbrella-site .tickets-include-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin: 0 0 16px;
}

.eventbrella-site .tickets-include ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin: 0;
  padding: 0;
}

.eventbrella-site .tickets-include li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--surface-muted);
}

.eventbrella-site .tickets-include .chk {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gold-3);
}

@media (max-width: 640px) {
  .eventbrella-site .tickets-include ul {
    grid-template-columns: 1fr;
  }
}

.eventbrella-site .ledger-card {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--receipt-line);
  box-shadow: 0 30px 80px -40px rgba(11,41,41,0.25);
  padding: 0;
}

/* checkoutPage() nests a .hero-lead-form directly inside .ledger-card
   (see lib/html.js) — .hero-lead-field's base rule below is cream, for
   the same component used directly on the teal page (signup/login), so
   it needs to flip back to dark here or the label text disappears
   against this card's light background. */
.eventbrella-site .ledger-card .hero-lead-field {
  color: var(--ink);
}

.eventbrella-site .ledger-card .hero-lead-field em {
  color: var(--gold-3);
}

.eventbrella-site .ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 40px;
  border-bottom: 1px solid var(--receipt-line);
}

.eventbrella-site .ledger-head .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eventbrella-site .ledger-head .tag.a {
  color: var(--surface-muted);
}

.eventbrella-site .ledger-head .tag.b {
  color: var(--gold-3);
  font-weight: 700;
}

.eventbrella-site .ledger-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  padding: 22px 40px;
  border-bottom: 1px dashed var(--receipt-line);
  align-items: center;
}

.eventbrella-site .ledger-row:last-child {
  border-bottom: none;
}

.eventbrella-site .ledger-row .label {
  font-size: 15.5px;
  font-weight: 500;
}

.eventbrella-site .ledger-row .label small {
  display: block;
  font-size: 12.5px;
  color: var(--surface-muted);
  font-weight: 400;
  margin-top: 3px;
}

.eventbrella-site .ledger-row .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  text-align: right;
}

.eventbrella-site .val.eb-old {
  color: #8b5a52;
  text-decoration: line-through;
  opacity: 0.7;
}

.eventbrella-site .val.eb-new {
  color: var(--gold-3);
  font-weight: 700;
  font-size: 16px;
}

.eventbrella-site .ledger-foot {
  padding: 22px 40px;
  background: var(--ivory-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--surface-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.eventbrella-site .ledger-foot strong {
  color: var(--ink);
  font-weight: 700;
}

.eventbrella-site .ledger-cta {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ===== PILLARS ===== */
.eventbrella-site .pillars-section {
  padding: 40px 0 110px;
}

/* ===== EVENT CARDS (events listing + affiliate section) =====
   Auto-scrolling marquee of flip cards. At rest a card is nothing but its
   flyer image — no badge, no overlay, no text underneath. On hover the
   hovered card scales up above its neighbors, the rest of the row blurs
   out, and the card flips over (like a dealer turning a card face up) to
   reveal its name, date, venue and primary link on the back. Used on the
   home page, /events, and (grouped by category) the /event-types index;
   /event-types/:slug keeps its own plain .event-cards-grid below instead
   of the marquee. */

/* Compact variant — home page only. Trims section/heading spacing above
   "Concier premier partners" and "Affiliate events" so the large poster
   cards (see .event-card below) aren't crowded by the same generous
   heading spacing the /events listing page uses; doesn't change card
   size — cards are the same size everywhere the component is used. */
.eventbrella-site .pillars-section--compact {
  padding: 14px 0 16px;
}

.eventbrella-site .pillars-section--compact .section-head {
  margin-bottom: 10px;
}

.eventbrella-site .pillars-section--compact .section-head h2 {
  font-size: clamp(20px, 2.4vw, 26px);
}

.eventbrella-site .pillars-section--compact .section-head .sub {
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 8px;
}

.eventbrella-site .pillars-section--compact .event-cards-row {
  padding: 8px 0 10px;
}

/* Full-bleed: a sibling of .wrap rather than nested inside it (see
   eventSection in lib/html.js), so it isn't bound by .wrap's max-width or
   centering and runs edge-to-edge across the whole viewport, cards
   included — no side padding/margin, by design. Vertical padding only,
   to give a hovered card room to scale up without being clipped by this
   row's own overflow: hidden (which otherwise exists to clip the
   marquee's looping content and its duplicate copy). */
.eventbrella-site .event-cards-row {
  overflow: hidden;
  padding: 28px 0 34px;
}

/* Track: the thing that actually scrolls. Holds two back-to-back copies
   of the card list (see eventSection in lib/html.js) and animates from
   translateX(0) to translateX(-50%) — exactly the width of one copy — so
   the loop point is invisible. */
.eventbrella-site .event-cards-row-track {
  display: flex;
  width: max-content;
  animation-name: event-cards-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  /* marquee.js takes over the transform itself and drives drag via
     pointer events; pan-y leaves vertical page-scroll gestures alone so
     only a horizontal drag gets captured. cursor/-webkit-user-select give
     the same grab affordance and prevent text-selection drag artifacts
     on desktop; harmless once marquee.js disables the CSS animation. */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.eventbrella-site .event-cards-row-track.is-dragging {
  cursor: grabbing;
}

/* Set by marquee.js while the pointer is in an edge zone and the cards are
   scrolling under it: cards ignore the pointer so each one passing by
   doesn't flip and blur the row. Back in the middle the cards stop and
   hover works as usual; dragging still works (the track gets the press). */
.eventbrella-site .event-cards-row-track.is-hover-scrolling .event-card {
  pointer-events: none;
}

/* Paused as soon as the cursor is anywhere over the row — not just once a
   specific card registers :hover. Gating the pause behind an individual
   card's :hover (the previous approach) meant the card had to first
   become, and stay, the thing directly under a still-moving cursor before
   anything would stop; a card only had a good chance of that near the
   middle of the visible strip, where it spends the most time and space
   under the pointer, so cards nearer the edges were much harder to
   actually catch and read as "not flipping." Pausing on the row instead
   freezes the whole strip the moment the pointer arrives, before any
   single card's hover needs to resolve — after that every card is a
   stationary target, front, middle, or edge alike. */
.eventbrella-site .event-cards-row:hover .event-cards-row-track,
.eventbrella-site .event-cards-row:focus-within .event-cards-row-track {
  animation-play-state: paused;
}

@keyframes event-cards-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Each group holds one or more repeats of the card list (see eventSection
   in lib/html.js — enough repeats that a group's width always exceeds a
   realistic viewport, so the marquee never runs out of content and shows
   blank space, however few events there are). Only the very first card
   per event, in the very first group, is a real/focusable link; every
   other repeat is marked decorative (tabindex="-1", hidden from
   assistive tech — see eventCard) but is deliberately left fully mouse-
   interactive: it must stay hoverable/flippable like any other card,
   since a viewer has no way to tell a repeat apart from the original. */
.eventbrella-site .event-cards-row-group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}

/* Static grid — category-filtered /event-types/:slug listings only. Not
   part of the marquee; kept as a plain grid on purpose. Still uses the
   same flip .event-card component below. */
.eventbrella-site .event-cards-grid {
  display: grid;
  /* --event-cols is set inline per grid, capped at the actual card count
     (see eventCardsGridStyle in lib/html.js) so a row with fewer than 3
     cards doesn't leave empty trailing grid tracks; falls back to 3 for
     markup that doesn't set it. */
  grid-template-columns: repeat(var(--event-cols, 3), 1fr);
  gap: 22px;
}

/* Poster-style shape, sized by width (vw-based, so it scales down
   proportionally on smaller viewports rather than breaking at a fixed
   pixel size), with height derived from the 2:3 aspect-ratio on
   .event-card-flip below. ~110-180px wide once the viewport is wide
   enough to hit the clamp's ceiling; scales down continuously below
   that, down to the 110px floor on phones — raised from 85px, which on a
   narrow screen packed enough tiny cards into view at once (fixed 20px
   gap between them) to read as one bunched, cluttered strip rather than
   a row of distinct cards. */
.eventbrella-site .event-card {
  flex: 0 0 clamp(110px, 11.8vw, 180px);
  position: relative;
  z-index: 1;
  perspective: 1200px;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Coverflow-style depth: the hovered/focused card pulls forward (scales up,
   rises above its neighbors) while every other card in the row recedes
   (scales down, blurs, dims, drops behind), so the hovered one visibly
   comes to the front rather than just standing out in place.
   The scale lives on .event-card-flip (below), never on .event-card
   itself: .event-card is the box :hover is actually measured against, and
   if IT shrinks or grows, its hoverable area shrinks or grows right along
   with it, opening gaps between cards that belong to no card's hitbox —
   land the cursor in one and you'd get a plain arrow instead of a hand,
   and the card wouldn't flip, on some cards but not others depending on
   exactly where the gap fell. Keeping .event-card's own box fixed means
   every pixel of the row's rendered card area maps to exactly one card,
   always, so the hand cursor and the flip are consistent everywhere with
   no dead zones — .event-card-flip is free to scale purely for show. */
.eventbrella-site .event-card:hover,
.eventbrella-site .event-card:focus-within {
  z-index: 5;
}

.eventbrella-site .event-cards-row-track:has(.event-card:hover) .event-card:not(:hover),
.eventbrella-site .event-cards-row-track:has(.event-card:focus-within) .event-card:not(:focus-within) {
  filter: blur(4px) brightness(0.75);
  opacity: 0.75;
  z-index: 0;
}

/* The flip itself: a plain <a> so the whole card is one tap/click target
   on any device (the flip is hover-only and has no touch equivalent).
   transform-style: preserve-3d plus the parent's perspective above is
   what gives the rotateY an actual 3D turn instead of a flat squash.
   width: 100% + a 2:3 aspect-ratio (portrait/movie-poster) derives the
   card's height from its width, set on .event-card above. Also carries
   the coverflow scale (see the rules just below) — kept off .event-card
   itself so :hover's hitbox never changes size; see the comment on
   .event-card above for why. will-change hints the browser to give this
   its own compositing layer, isolated from the row track's own
   constantly-running transform animation, and the row now pauses on its
   own :hover rather than a specific card's (see .event-cards-row-track
   above) — between the two, every card flips reliably on its own hover
   regardless of the marquee's motion or its position in the row. */
.eventbrella-site .event-card-flip {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.15, 1);
  will-change: transform;
}

.eventbrella-site .event-card:hover .event-card-flip,
.eventbrella-site .event-card:focus-within .event-card-flip {
  transform: scale(1.15) rotateY(180deg);
}

.eventbrella-site .event-cards-row-track:has(.event-card:hover) .event-card:not(:hover) .event-card-flip,
.eventbrella-site .event-cards-row-track:has(.event-card:focus-within) .event-card:not(:focus-within) .event-card-flip {
  transform: scale(0.9);
}

/* Thin metallic-gold border: a gradient "halo" the same width as the ring
   it forms, sitting behind the two faces below (natural DOM/paint order —
   no z-index needed, and none would help inside a preserve-3d context).
   Each face fills exactly .event-card-flip's box, so only this outer sliver
   ever shows through. */
.eventbrella-site .event-card-flip::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 9.5px;
  background: linear-gradient(115deg, var(--gold-3) 0%, var(--gold-1) 28%, var(--gold-2) 50%, var(--gold-1) 68%, var(--gold-3) 100%);
}

.eventbrella-site .event-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ivory-deep);
}

.eventbrella-site .event-card-face-front img {
  width: 100%;
  height: 100%;
  /* Standing rule (carried over from the card's previous .pillar-media
     img): stretches to fill this box edge-to-edge, no letterbox bars and
     no cropping — object-fit: fill scales width/height independently to
     match the portrait 2:3 box exactly, whatever the source image's own
     aspect ratio. Trades a slightly stretched/squeezed look on non-2:3
     source images for a fully filled card every time; if that tradeoff
     ever needs revisiting for a specific image, crop/export that source
     at 2:3 rather than changing this rule. */
  object-fit: fill;
  object-position: center;
  display: block;
}

.eventbrella-site .event-card-face-back {
  transform: rotateY(180deg);
  background: var(--ink);
  color: var(--white);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.eventbrella-site .event-card-back-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 3px;
}

.eventbrella-site .event-card-back-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eventbrella-site .event-card-back-when,
.eventbrella-site .event-card-back-venue {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(243,239,229, 0.8);
  margin: 0;
}

.eventbrella-site .event-card-back-cta {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-1);
}

/* ===== REVENUE ===== */
.eventbrella-site .revenue-section {
  background: var(--ivory-deep);
  padding: 110px 0;
}

.eventbrella-site .revenue-flex {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.eventbrella-site .receipt {
  background: var(--white);
  border: 1px solid var(--receipt-line);
  padding: 36px 34px;
  box-shadow: 0 24px 70px -35px rgba(11,41,41,0.28);
  font-family: 'JetBrains Mono', monospace;
}

.eventbrella-site .receipt-title {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-style: italic;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--receipt-line);
  color: var(--ink);
}

.eventbrella-site .receipt-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--receipt-line);
}

.eventbrella-site .receipt-item .n {
  color: var(--ink-soft);
}

.eventbrella-site .receipt-item .p {
  color: var(--gold-3);
  font-weight: 700;
}

.eventbrella-site .receipt-total {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.eventbrella-site .receipt-total .p {
  color: var(--gold-3);
}

.eventbrella-site .revenue-copy h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 22px;
  line-height: 1.2;
}

.eventbrella-site .revenue-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.eventbrella-site .revenue-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.eventbrella-site .revenue-list .item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--receipt-line);
}

.eventbrella-site .revenue-list .item .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--gold-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 110px;
  flex-shrink: 0;
  padding-top: 2px;
}

.eventbrella-site .revenue-list .item p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

.eventbrella-site .revenue-list .item strong {
  color: var(--ink);
  font-weight: 600;
}

/* ===== ONE THING / WHAT YOU GET ===== */
.eventbrella-site .one-thing {
  background: var(--ink);
  color: var(--ivory);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.eventbrella-site .one-thing .spotlight {
  opacity: 0.7;
}

.eventbrella-site .one-thing-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 70px;
}

.eventbrella-site .one-thing-inner .eyebrow {
  color: var(--gold-1);
  justify-content: center;
}

.eventbrella-site .one-thing-inner .eyebrow::before {
  background: var(--gold-1);
}

.eventbrella-site .one-thing h2 {
  color: var(--ivory);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  margin-top: 20px;
}

.eventbrella-site .stack-list {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.eventbrella-site .stack-row {
  display: grid;
  grid-template-columns: 160px 1.2fr 1fr 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(243,239,229,0.14);
  align-items: baseline;
}

.eventbrella-site .stack-row:first-child {
  border-top: 1px solid rgba(243,239,229,0.14);
}

.eventbrella-site .stack-row .k {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--gold-1);
}

.eventbrella-site .stack-row .v {
  font-size: 14px;
  color: rgba(243,239,229,0.75);
  line-height: 1.6;
}

.eventbrella-site .stack-row .v strong {
  color: var(--ivory);
  font-weight: 600;
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-style: normal;
}

.eventbrella-site .stack-row-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,239,229,0.45);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(243,239,229,0.14);
  margin-bottom: 0;
}

.eventbrella-site .stack-row-total {
  border-top: 1px solid rgba(228,211,168, 0.45);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 24px;
}

.eventbrella-site .stack-row-total .k {
  color: var(--gold-1);
  font-style: normal;
  font-weight: 600;
}

.eventbrella-site .stack-row-total .v {
  color: var(--ivory);
  font-weight: 600;
}

.eventbrella-site .one-thing-tag {
  text-align: center;
  margin-top: 56px;
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.eventbrella-site .one-thing-tag p.kicker {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--gold-1);
  line-height: 1.5;
}

.eventbrella-site .one-thing .ledger-foot {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  background: rgba(243,239,229,0.08);
  color: rgba(243,239,229,0.75);
  border: 1px solid rgba(243,239,229,0.14);
}

.eventbrella-site .one-thing .ledger-foot strong {
  color: var(--gold-1);
}

/* ===== FINAL CTA ===== */
.eventbrella-site .final-cta {
  padding: 130px 0 110px;
  text-align: center;
  position: relative;
}

.eventbrella-site .final-cta h2 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.1;
  margin-bottom: 10px;
}

.eventbrella-site .final-cta .sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 22px auto 40px;
  line-height: 1.65;
}

.eventbrella-site .final-cta .eyebrow {
  justify-content: center;
}

/* ===== FOOTER ===== */
.eventbrella-site footer.eb-footer {
  /* --receipt-line stays dark for light-surface cards elsewhere (ledger,
     tickets-include, etc.); the footer sits directly on the teal page
     background now, so its divider needs to be light instead. */
  border-top: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
  padding: 44px 0;
}

.eventbrella-site .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.eventbrella-site .footer-inner .fbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Cookie notice bar — see cookieNotice() in lib/html.js and
   public/cookie-notice.js for the show/dismiss logic. */
.eventbrella-site .cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
  border-radius: 4px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.65);
}

.eventbrella-site .cookie-notice-text {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 320px;
}

.eventbrella-site .cookie-notice-accept {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 13px;
}

.eventbrella-site .footer-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ===== FAQ (mockup tokens) ===== */
.eventbrella-site .eb-faq {
  padding: 90px 0 110px;
}

.eventbrella-site .eb-faq .section-head {
  margin-bottom: 40px;
}

.eventbrella-site .eb-faq-section {
  margin-top: 40px;
}

.eventbrella-site .eb-faq-section h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.eventbrella-site .eb-faq-item {
  border: 1px solid var(--receipt-line);
  background: var(--white);
  margin-bottom: 10px;
}

.eventbrella-site .eb-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}

.eventbrella-site .eb-faq-item summary::-webkit-details-marker {
  display: none;
}

.eventbrella-site .eb-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--gold-3);
  font-size: 1.25rem;
}

.eventbrella-site .eb-faq-item[open] summary {
  color: var(--gold-3);
  border-bottom: 1px solid var(--receipt-line);
}

.eventbrella-site .eb-faq-item[open] summary::after {
  content: '−';
}

.eventbrella-site .eb-faq-answer {
  padding: 16px 22px 20px;
}

.eventbrella-site .eb-faq-answer p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.eventbrella-site .eb-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ===== CALCULATOR RESKIN ===== */
.eventbrella-site.eventbrella-calculator {
  min-height: auto;
}

.eventbrella-site.eventbrella-calculator .watch-vs-order-page,
.eventbrella-site.eventbrella-calculator .watch-vs-order-page--hero {
  background: var(--ivory) !important;
  color: var(--ink) !important;
}

.eventbrella-site.eventbrella-calculator .calculator-hero-layout__card.calculator-glass-card,
.eventbrella-site.eventbrella-calculator .leak-gate.calculator-glass-card {
  background: var(--white) !important;
  border: 1px solid var(--receipt-line) !important;
  border-radius: 2px !important;
  box-shadow: 0 30px 80px -40px rgba(11,41,41,0.25) !important;
  color: var(--ink) !important;
  backdrop-filter: none !important;
}

.eventbrella-site.eventbrella-calculator .calculator-glass-card .watch-vs-order-title,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .watch-vs-order-hero-eyebrow,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .watch-vs-order-field-label,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .calculator-intro-screen__headline,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .leak-gate__headline,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .leak-results__hero-card-headline {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-family: 'Fraunces', serif !important;
}

.eventbrella-site.eventbrella-calculator .calculator-glass-card .watch-vs-order-hero-sub,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .calculator-intro-screen__subhead,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .leak-gate__body,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .calculator-range-field__helper {
  color: var(--ink-soft) !important;
  -webkit-text-fill-color: var(--ink-soft) !important;
}

.eventbrella-site.eventbrella-calculator .calculator-glass-card button,
.eventbrella-site.eventbrella-calculator .calculator-glass-card .btn,
.eventbrella-site.eventbrella-calculator .calculator-step-flow__next,
.eventbrella-site.eventbrella-calculator .calculator-glass-card [class*="submit"],
.eventbrella-site.eventbrella-calculator .calculator-glass-card [class*="cta"] {
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1) 100%) !important;
  color: #1A1508 !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: var(--shadow-gold) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.eventbrella-site.eventbrella-calculator .calculator-glass-card input,
.eventbrella-site.eventbrella-calculator .calculator-glass-card select,
.eventbrella-site.eventbrella-calculator .calculator-glass-card textarea {
  border: 1px solid var(--receipt-line) !important;
  background: var(--ivory) !important;
  color: var(--ink) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
}

/* ===== TALK TO US POPUP ===== */
.eventbrella-site .eb-talk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11,41,41, 0.55);
  backdrop-filter: blur(4px);
}

.eventbrella-site .eb-talk-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--receipt-line);
  border-radius: 2px;
  box-shadow: 0 30px 80px -40px rgba(11,41,41, 0.45);
  padding: 36px 32px 32px;
}

.eventbrella-site .eb-talk-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.eventbrella-site .eb-talk-modal h2 {
  margin: 14px 0 10px;
  font-size: 28px;
}

.eventbrella-site .eb-talk-sub {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.eventbrella-site .eb-talk-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eventbrella-site .eb-talk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.eventbrella-site .eb-talk-field em {
  color: var(--gold-3);
  font-style: normal;
}

.eventbrella-site .eb-talk-field input {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 12px 14px;
  border: 1px solid var(--receipt-line);
  border-radius: 2px;
  background: var(--ivory);
  color: var(--ink);
}

.eventbrella-site .eb-talk-field input:focus {
  outline: 1px solid var(--gold-2);
  border-color: var(--gold-2);
}

.eventbrella-site .eb-talk-error {
  margin: 0;
  color: #8b2e2e;
  font-size: 13px;
}

.eventbrella-site .eb-talk-form .btn {
  margin-top: 4px;
  justify-content: center;
}

.eventbrella-site .eb-talk-form .btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* ===== FEES PAGE ===== */
.eventbrella-site .fees-block + .fees-block {
  margin-top: 96px;
}

.eventbrella-site .fees-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.eventbrella-site .fees-ledger {
  min-width: 540px;
}

.eventbrella-site .fees-ledger .fees-ledger-head,
.eventbrella-site .fees-ledger .ledger-row {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1.4fr;
  gap: 16px;
  align-items: center;
}

.eventbrella-site .fees-ledger .fees-ledger-head {
  justify-content: initial;
}

.eventbrella-site .fees-ledger .fees-ledger-head .tag {
  text-align: right;
}

.eventbrella-site .fees-ledger .fees-ledger-head .tag:first-child,
.eventbrella-site .fees-ledger .ledger-row .label {
  text-align: left;
}

.eventbrella-site .fees-caption {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.eventbrella-site .fees-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 26px 40px;
}

.eventbrella-site .fees-calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 40px 26px;
}

.eventbrella-site .fees-calc-stat {
  background: var(--ivory-deep);
  padding: 18px 20px;
}

.eventbrella-site .fees-calc-stat span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: 8px;
}

.eventbrella-site .fees-calc-stat strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 860px) {
  .eventbrella-site header.hero {
    padding: 36px 0 56px;
  }

  .eventbrella-site .hero-split {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .eventbrella-site .hero-media {
    height: auto;
  }

  .eventbrella-site .hero-slideshow {
    flex: none;
    height: auto;
    aspect-ratio: 16 / 11;
    max-height: 360px;
  }

  .eventbrella-site .hero-copy {
    max-width: none;
  }

  .eventbrella-site .zero-grid,
  .eventbrella-site .revenue-flex {
    grid-template-columns: 1fr;
  }

  .eventbrella-site .event-cards-grid {
    grid-template-columns: 1fr;
  }

  .eventbrella-site .nav-links {
    display: none;
  }

  .eventbrella-site .stack-row,
  .eventbrella-site .stack-row-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .eventbrella-site .ledger-row {
    grid-template-columns: 1.2fr 0.7fr 0.7fr;
    padding: 18px 22px;
  }

  .eventbrella-site .ledger-head,
  .eventbrella-site .ledger-foot {
    padding: 20px 22px;
  }

  .eventbrella-site .wrap {
    padding: 0 20px;
  }

  .eventbrella-site .pillars-section > .section-head {
    padding: 0 20px;
  }

  .eventbrella-site .fees-block + .fees-block {
    margin-top: 72px;
  }

  .eventbrella-site .fees-calc-grid,
  .eventbrella-site .fees-calc-results {
    grid-template-columns: 1fr;
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ===== TOUR LAYOUT =====
   Structure/spacing referenced from Strike After Dark's homepage
   (public/styles/main.css .hero/.hero-overlay/.eyebrow, src/styles.css
   .experience-card / .site-nav-btn) — layout patterns only. Every color
   here is a Concier CSS custom property, so it never introduces black or
   metallic grey; on the one page that uses this (a multi-date "tour"
   event with ticket_dates set — currently only Kompa vs Raboday) those
   properties are already re-themed pink by that event's own theme_accent
   (see eventThemeStyleTag in lib/html.js). Scoped to .tour-page (only
   ever applied to that one page's <body>), so no other page is affected. */

.eventbrella-site.tour-page nav.eb-nav .btn-gold {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  border-radius: 0;
  box-shadow: inset 0 0 0 1.5px var(--gold-2);
  background: var(--white);
  color: var(--gold-3);
}

.eventbrella-site.tour-page nav.eb-nav .btn-gold:hover {
  background: var(--gold-2);
  color: var(--white);
  transform: none;
}

.eventbrella-site .tour-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 6vw 60px;
  overflow: hidden;
}

.eventbrella-site .tour-hero-media {
  position: absolute;
  inset: 0;
}

.eventbrella-site .tour-hero-media img {
  width: 100%;
  height: 100%;
  /* fill (not cover, not contain): stretches the full flyer to exactly
     match the hero box, width and height independently, so every edge
     and corner of the image is visible with nothing cropped out — same
     stretch-to-fill rule as .event-card-face-front img, applied here too. */
  object-fit: fill;
  object-position: center;
}

.eventbrella-site .tour-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold-2) 55%, white 45%) 0%,
    color-mix(in srgb, var(--gold-2) 18%, white 82%) 55%,
    color-mix(in srgb, var(--gold-2) 40%, white 60%) 100%
  );
  opacity: 0.82;
}

.eventbrella-site .tour-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eventbrella-site .tour-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-3);
  font-weight: 700;
  margin-bottom: 18px;
}

.eventbrella-site .tour-hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.05;
  color: var(--ink);
}

.eventbrella-site .tour-hero-sub {
  margin-top: 18px;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.eventbrella-site .tour-chooser-section,
.eventbrella-site .tour-about-section {
  width: 100%;
  padding: 100px 6vw;
}

.eventbrella-site .tour-chooser-section {
  padding-bottom: 40px;
}

.eventbrella-site .tour-chooser-section .wrap,
.eventbrella-site .tour-about-section .wrap {
  max-width: 1180px;
}

.eventbrella-site .tour-chooser-section .section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.eventbrella-site .tour-date-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eventbrella-site .tour-date-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 28px;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--gold-line);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: var(--shadow-gold);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.eventbrella-site .tour-date-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-2);
}

.eventbrella-site .tour-date-card-label {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--ink);
}

.eventbrella-site .tour-date-card-when {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.eventbrella-site .tour-date-card-location {
  font-size: 12.5px;
  color: var(--gold-3);
  text-decoration: underline;
}

.eventbrella-site .tour-date-card-location--tbd {
  color: var(--ink-soft);
  text-decoration: none;
  font-style: italic;
}

.eventbrella-site .tour-date-card-cta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-3);
  text-decoration: none;
}

.eventbrella-site .tour-about-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 48px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: var(--shadow-gold);
}

.eventbrella-site .tour-about-card .eyebrow {
  margin-bottom: 16px;
}

.eventbrella-site .tour-about-card h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 14px;
}

.eventbrella-site .tour-about-card .tickets-include {
  margin: 24px 0 0;
  padding: 24px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--gold-line);
  box-shadow: none;
  border-radius: 0;
}

.eventbrella-site .tour-about-organizer {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .eventbrella-site .tour-date-grid {
    grid-template-columns: 1fr;
  }

  .eventbrella-site .tour-about-card {
    padding: 32px 26px;
  }
}

.eventbrella-site .tour-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== SUBSCRIBE MODAL (tour page only) =====
   CSS-only modal — the app has no client-side JS. The nav's Subscribe
   link targets #subscribe-modal; :target shows it. Close (X) and the
   backdrop both link to "#" to clear the fragment and hide it again.
   .is-open is a second, non-fragment-dependent way to show it, used when
   the server re-renders this page after a failed form submission. */
.eventbrella-site .subscribe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.eventbrella-site .subscribe-modal:target,
.eventbrella-site .subscribe-modal.is-open {
  display: flex;
}

body:has(.subscribe-modal:target),
body:has(.subscribe-modal.is-open) {
  overflow: hidden;
}

.eventbrella-site .subscribe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 15, 0.5);
  cursor: default;
}

.eventbrella-site .subscribe-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 44px 40px;
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: var(--shadow-gold);
}

.eventbrella-site .subscribe-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold-3);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.eventbrella-site .subscribe-modal-close:hover {
  background: var(--gold-2);
  color: var(--white);
}

.eventbrella-site .subscribe-modal-panel h2 {
  font-size: clamp(26px, 4vw, 34px);
  margin: 8px 0 12px;
}

.eventbrella-site .subscribe-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
}

.eventbrella-site .subscribe-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.eventbrella-site .subscribe-benefits .chk {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gold-3);
}

.eventbrella-site .subscribe-modal-panel .hero-lead-form {
  margin-top: 8px;
}

.eventbrella-site .subscribe-modal-panel .hero-lead-field input {
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: var(--ivory-deep);
}

.eventbrella-site .subscribe-modal-panel .hero-lead-field input:focus {
  outline: 1px solid var(--gold-2);
}

@media (max-width: 560px) {
  .eventbrella-site .subscribe-modal-panel {
    padding: 34px 24px;
  }
}

/* ===== ZOEY (lib/zoey-html.js) =====
   Radio/checkbox lists: .hero-lead-field's input rule is sized for text
   inputs (full width, padded), which stretches a radio across the row, so
   choice lists get their own plain bordered box instead of the animated
   spark border. Existing tokens only. */
.eventbrella-site .hero-lead-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background: var(--white);
}

.eventbrella-site .hero-lead-choices label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.eventbrella-site .hero-lead-field .hero-lead-choices input {
  width: auto;
  padding: 0;
  display: inline-block;
  accent-color: var(--gold-3);
}

/* .btn-ghost is ivory-on-teal; inside the light .ledger-card it would be
   invisible, so flip it to ink there (same idea as the
   .ledger-card .hero-lead-field override above). */
.eventbrella-site .ledger-card .zoey-feedback .btn-ghost,
.eventbrella-site .ledger-card.zoey-form .btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}

.eventbrella-site .ledger-card .zoey-feedback .btn-ghost:hover,
.eventbrella-site .ledger-card.zoey-form .btn-ghost:hover {
  background: var(--ink);
  color: var(--ivory);
}

.eventbrella-site .zoey-feedback {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.eventbrella-site .zoey-feedback .btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* ===== ZOEY HOME CHAT BOX (homeZoeyChat in lib/html.js, behind
   ZOEY_HOME_CHAT) =====
   Open by default: the box pops up shortly after the page loads. The
   visually hidden .zoey-chat-toggle checkbox is its state — checked means
   closed. The × and the launcher are labels for it, so closing shows the
   launcher and the launcher reopens the box, with no JS. Keyboard users
   reach the checkbox itself (Space toggles); its focus ring is drawn on
   whichever label is showing. */
.eventbrella-site .zoey-chat-toggle {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eventbrella-site .zoey-chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: none;
  max-width: 300px;
  padding: 16px 20px;
  border-radius: 14px 14px 2px 14px;
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1) 100%);
  color: #1A1508;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: transform .25s ease;
}

.eventbrella-site .zoey-chat-launcher:hover {
  transform: translateY(-2px);
}

.eventbrella-site .zoey-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 120px));
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: var(--ink);
  color: var(--ivory);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: zoeyChatPopIn .45s ease 1.2s both;
}

@keyframes zoeyChatPopIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eventbrella-site .zoey-chat { animation: none; }
}

/* Closed: hide the box, show the launcher. */
.eventbrella-site .zoey-chat-toggle:checked ~ .zoey-chat {
  display: none;
}

.eventbrella-site .zoey-chat-toggle:checked ~ .zoey-chat-launcher {
  display: block;
}

.eventbrella-site .zoey-chat-toggle:focus-visible ~ .zoey-chat-launcher,
.eventbrella-site .zoey-chat-toggle:focus-visible ~ .zoey-chat .zoey-chat-close {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

.eventbrella-site .zoey-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--gold-line);
}

.eventbrella-site .zoey-chat-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  margin-right: auto;
}

.eventbrella-site .zoey-chat-full {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.eventbrella-site .zoey-chat-full:hover,
.eventbrella-site .zoey-chat-full:focus-visible {
  text-decoration: underline;
}

.eventbrella-site .zoey-chat-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ivory);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.eventbrella-site .zoey-chat-close:hover {
  background: color-mix(in srgb, var(--ivory) 12%, transparent);
}

.eventbrella-site .zoey-chat-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--ink);
}

/* Phones: a bottom sheet that leaves the top of the page in view. */
@media (max-width: 640px) {
  .eventbrella-site .zoey-chat-launcher {
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
    font-size: 17px;
  }

  .eventbrella-site .zoey-chat {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75dvh;
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
  }
}

/* ===== COOKIE NOTICE (cookieNotice in lib/http.js) =====
   Shown on every full page until accepted (POST /cookie-consent sets a
   cookie). Sits above the Zoey box. */
.eventbrella-site .cookie-notice {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  padding: 16px 18px;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ivory) 7%, var(--ink));
  color: var(--ivory);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
}

.eventbrella-site .cookie-notice p {
  margin: 0;
}

.eventbrella-site .cookie-notice .btn {
  flex: none;
  padding: 10px 18px;
}

/* Narrower screens: the notice spans the bottom, so the Zoey CTA moves
   up above it until the notice is accepted. */
@media (max-width: 900px) {
  .eventbrella-site .cookie-notice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .eventbrella-site:has(.cookie-notice) .zoey-chat-launcher {
    bottom: 150px;
  }
}

/* ===== ZOEY EMBEDDED PAGES (zoeyEmbedShell in lib/zoey-html.js) =====
   The same flow inside the chat box's iframe: no nav or footer, each
   question shown as a Zoey message above its form. */
.eventbrella-site.zoey-embed {
  min-height: 100vh;
}

.eventbrella-site .zoey-embed-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px 32px;
}

.eventbrella-site .zoey-embed-message {
  align-self: flex-start;
  max-width: 92%;
  padding: 14px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 14px 14px 14px 2px;
  background: color-mix(in srgb, var(--ivory) 7%, var(--ink));
}

.eventbrella-site .zoey-embed-message .eyebrow {
  margin-bottom: 8px;
}

.eventbrella-site .zoey-embed-message h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.eventbrella-site .zoey-embed-message .sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Zoey's opening screen: "Welcome back? Sign in" under the start button. */
.eventbrella-site .zoey-signin {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.eventbrella-site .zoey-signin a {
  color: inherit;
  text-decoration: underline;
}

.eventbrella-site .zoey-embed-reply .ledger-card {
  border-radius: 10px;
  box-shadow: none;
}

.eventbrella-site .zoey-embed-reply .hero-ctas {
  gap: 10px;
}

.eventbrella-site .zoey-embed-reply .btn {
  padding: 10px 16px;
}

/* ===== ZOEY PREFERENCE CARDS (zoeyCardsPage in lib/zoey-html.js) =====
   The site's own .event-card flip cards (unchanged) in a grid. Each sits
   in a .zoey-pick wrapper with a pick control outside the flip: a hidden
   checkbox (just before the wrapper, directly in the grid), a gold
   "Picked" badge and a Pick/Picked pill, all driven by :checked, so
   flipping a card never touches its pick. Events and Hot Spots are
   separate screens, three picks each: once a grid has three ticked, the
   rest grey out and can't be picked. No script. */
.eventbrella-site .zoey-pick-section {
  margin-bottom: 24px;
  counter-reset: zoey-picked;
}


.eventbrella-site .zoey-pick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 22px;
  margin-bottom: 20px;
}

.eventbrella-site .zoey-pick {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

/* In the flow the flip face is a focusable <div> (see eventCard's inFlow
   in lib/html.js): a tap or Tab gives it :focus-within, which flips it.
   cursor: pointer also makes phones treat a tap as hover. */
.eventbrella-site .event-card-flip--in-flow {
  cursor: pointer;
  outline: none;
}

.eventbrella-site .event-card-flip--in-flow:focus-visible::before {
  inset: -4px;
  border-radius: 12px;
}

/* The event card screen's cards don't flip (eventCard's `still`): they
   stay on the front face whatever the hover or focus. */
.eventbrella-site .event-card:hover .event-card-flip.event-card-flip--still,
.eventbrella-site .event-card:focus-within .event-card-flip.event-card-flip--still {
  transform: none;
}

.eventbrella-site .event-card-flip--still {
  cursor: default;
}

.eventbrella-site .zoey-pick-check,
.eventbrella-site .zoey-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The pick checkbox is fixed to the viewport, so tapping a card's Pick
   (which focuses the checkbox) never scrolls the page up to it. */
.eventbrella-site .zoey-pick-check {
  position: fixed;
  top: 50%;
  left: 0;
}

.eventbrella-site .zoey-pick-badge {
  display: none;
  position: absolute;
  top: -10px;
  left: -8px;
  z-index: 7;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(115deg, var(--gold-3) 0%, var(--gold-1) 40%, var(--gold-2) 100%);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.eventbrella-site .zoey-pick-badge::before {
  content: "\2713  ";
}

.eventbrella-site .zoey-pick-check:checked + .zoey-pick .zoey-pick-badge {
  display: inline-block;
}

/* Picked: a second gold ring around the card's resting box, outside the
   flip, so it shows whichever face is up. */
.eventbrella-site .zoey-pick-check:checked + .zoey-pick .event-card {
  border-radius: 9.5px;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold-1);
}

.eventbrella-site .zoey-pick-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eventbrella-site .zoey-pick-toggle {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--gold-1);
  border-radius: 999px;
  color: var(--gold-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.eventbrella-site .zoey-pick-on {
  display: none;
}


.eventbrella-site .zoey-pick-check:checked + .zoey-pick .zoey-pick-bar .zoey-pick-toggle {
  border-color: transparent;
  background: linear-gradient(115deg, var(--gold-3) 0%, var(--gold-1) 40%, var(--gold-2) 100%);
  color: var(--ink);
}

.eventbrella-site .zoey-pick-check:checked + .zoey-pick .zoey-pick-bar .zoey-pick-off {
  display: none;
}

.eventbrella-site .zoey-pick-check:checked + .zoey-pick .zoey-pick-bar .zoey-pick-on {
  display: inline;
}

.eventbrella-site .zoey-pick-check:focus-visible + .zoey-pick .zoey-pick-bar .zoey-pick-toggle {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}

/* Three picked in this grid: the unpicked cards' pills grey out and stop
   taking clicks, and their checkboxes drop out of the tab order. */
.eventbrella-site .zoey-pick-check:checked {
  counter-increment: zoey-picked;
}

.eventbrella-site .zoey-pick-grid:has(> .zoey-pick-check:checked ~ .zoey-pick-check:checked ~ .zoey-pick-check:checked) > .zoey-pick-check:not(:checked) {
  visibility: hidden;
}

.eventbrella-site .zoey-pick-grid:has(> .zoey-pick-check:checked ~ .zoey-pick-check:checked ~ .zoey-pick-check:checked) > .zoey-pick-check:not(:checked) + .zoey-pick .zoey-pick-toggle {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

.eventbrella-site .zoey-pick-grid:has(> .zoey-pick-check:checked ~ .zoey-pick-check:checked ~ .zoey-pick-check:checked) > .zoey-pick-check:not(:checked) + .zoey-pick .event-card {
  opacity: 0.5;
}

.eventbrella-site .zoey-pick-count {
  margin: -6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-1);
}

.eventbrella-site .zoey-pick-count::before {
  content: counter(zoey-picked) " of 3 picked";
}

.eventbrella-site .zoey-pick-full {
  display: none;
  margin-left: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter', sans-serif;
  color: rgba(243, 239, 229, 0.75);
}

.eventbrella-site .zoey-pick-section:has(.zoey-pick-grid > .zoey-pick-check:checked ~ .zoey-pick-check:checked ~ .zoey-pick-check:checked) .zoey-pick-full {
  display: inline;
}

.eventbrella-site .zoey-pick-details {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(243, 239, 229, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eventbrella-site .zoey-pick-note {
  margin: 0 0 22px;
  font-size: 13px;
  color: rgba(243, 239, 229, 0.7);
}

.eventbrella-site .zoey-cards-empty {
  margin-bottom: 20px;
  color: var(--ink-soft);
}

.eventbrella-site .zoey-cards-new {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .eventbrella-site .zoey-pick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .eventbrella-site .zoey-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
  }
}

/* ===== ZOEY PLAN CHOICE (zoeyPlanChoicePage in lib/zoey-html.js) =====
   Two options side by side; the one that doesn't work yet is dimmed,
   badged "Coming soon" and isn't a link. */
.eventbrella-site .zoey-plan-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.eventbrella-site .zoey-plan-option {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--gold-1);
  border-radius: 12px;
  color: var(--ivory);
  text-decoration: none;
}

/* "Surprise me" is a button in its own form (it asks for the plan
   straight away), drawn exactly like the link option beside it. */
.eventbrella-site .zoey-plan-option-form {
  display: grid;
  margin: 0;
}

.eventbrella-site button.zoey-plan-option {
  width: 100%;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.eventbrella-site a.zoey-plan-option:hover,
.eventbrella-site a.zoey-plan-option:focus-visible,
.eventbrella-site button.zoey-plan-option:hover,
.eventbrella-site button.zoey-plan-option:focus-visible {
  background: color-mix(in srgb, var(--gold-2) 12%, transparent);
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-1);
}

.eventbrella-site .zoey-plan-option-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.2;
}

.eventbrella-site .zoey-plan-option-sub {
  font-size: 14px;
  color: rgba(243, 239, 229, 0.75);
}

/* The plan choice's call to action, under each option's line. */
.eventbrella-site .zoey-plan-option-cta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-2);
}

.eventbrella-site .zoey-plan-option--soon {
  border-style: dashed;
  border-color: rgba(243, 239, 229, 0.35);
  color: rgba(243, 239, 229, 0.6);
}

.eventbrella-site .zoey-plan-option-badge {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .eventbrella-site .zoey-plan-choice {
    grid-template-columns: 1fr;
  }
}