/**
 * @benlowrey/events-directory-css — shared design system for Events Engine consumers.
 *
 * Extracted from Real Awake's scripts/build-directory.js (2026-08-05), which is the
 * reference implementation — its card layout, timeline grid, glass-blur cards, hover
 * states, and native view-transitions went through real iteration and bug fixes this
 * session (row-packing day-bucketing, sticky headers, height-cap removal, scroll-snap).
 * Real Awake now imports THIS file rather than keeping its own independent copy, so a
 * fix here reaches every consumer instead of needing to be hand-ported N times.
 *
 * Every colour is a CSS custom property with an --evd- prefix and a sensible fallback —
 * a consumer applies its own brand by overriding these on :root (or any wrapping scope),
 * typically sourced from branding-engine-api's cssVariables() emitter. Nothing in this
 * file hardcodes a brand colour; Real Awake's pink and Phantom Finance's cyan are both
 * just override sets on top of the same rules.
 *
 * Class names are unchanged from Real Awake's existing markup on purpose — both the
 * static-HTML site and any React consumer emit the SAME class names against this SAME
 * stylesheet, which is what makes this a genuine shared design system rather than a
 * theming convention two different rule-sets happen to follow.
 */

/* No universal *{...} reset here on purpose — a shared package must not leak a global
   reset into a consumer's OTHER, unrelated pages (Phantom Finance's existing pages
   already get box-sizing/margin/padding reset from Tailwind's own preflight). Each
   consumer keeps its own baseline reset locally; this file only ever targets its own
   specific classes below. */

:root {
  --evd-primary: #d94780;
  --evd-primary-hover: #c23b70;
  --evd-bg-dark: #06060c;
  --evd-bg-card: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  --evd-bg-card-sub: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  --evd-border: rgba(255, 255, 255, 0.15);
  --evd-text-muted: rgba(255, 255, 255, 0.6);
  /* Light backing behind card/hero <img> tags — a no-op for opaque photos (object-fit:cover
     hides it entirely) but stops a transparent-PNG logo with a dark mark from vanishing
     into a dark theme. Override to a brand's own neutral if it isn't dark-themed. */
  --evd-img-backing: #f0eef2;
  --evd-font-display: 'Outfit', sans-serif;
  --evd-font-body: 'Inter', sans-serif;
}

/* Native cross-document view transitions — a smooth cross-fade between page loads on a
   static multi-page site, no JS/framework needed. Browsers without support just do a
   normal instant navigation — pure progressive enhancement. A React/SPA consumer won't
   use this (client-side routing has its own transition story), but it's harmless to
   include and free for any consumer that IS a plain multi-page site. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:7.5rem 1.5rem 4rem}
.grid{max-width:1200px;margin:0 auto;padding:3rem 1.5rem 4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.5rem}

.region{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:1.6rem}
.crumb{font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:1rem;font-family:var(--evd-font-display)}
.crumb a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.crumb a:hover{color:#fff}

.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.cats a{padding:.3rem .85rem;border:1px solid color-mix(in srgb, var(--evd-primary) 35%, transparent);border-radius:999px;color:rgba(255,255,255,.9);text-decoration:none;font-size:.8rem;background:color-mix(in srgb, var(--evd-primary) 6%, transparent);transition:border-color .2s,background-color .2s,color .2s;font-family:var(--evd-font-display)}
.cats a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 12%, transparent)}

/* Profile page layout grid */
.profile-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2rem}
@media(min-width:860px){ .profile-grid{grid-template-columns:1.8fr 1fr;gap:3.5rem} }
.profile-main{display:flex;flex-direction:column;gap:2rem}
.profile-sidebar{position:relative}
@media(min-width:860px){ .profile-sidebar{position:sticky;top:6rem;height:fit-content} }

/* Hero cover image */
.cover{width:100%;max-height:450px;object-fit:cover;object-position:center;background:var(--evd-img-backing);border-radius:16px;border:1px solid rgba(255,255,255,.08);margin:0;box-shadow:0 12px 36px rgba(0,0,0,.4);transition:transform 0.4s ease}
.mono{width:100%;height:320px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:4.5rem;letter-spacing:.06em;color:rgba(255,255,255,.92);background:linear-gradient(135deg,#2e0f21 0%,#1b1326 55%,#06060c 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 36px rgba(0,0,0,.4)}

p.evd-body{color:rgba(255,255,255,.85);margin-bottom:1.4rem;font-size:1.05rem;line-height:1.8;letter-spacing:0.01em}
h2.evd-heading{font-family:var(--evd-font-display);font-size:1.5rem;font-weight:600;color:#fff;margin:2rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.06);padding-top:2rem}

/* Sidebar (organiser profile page) */
.sidebar-card{background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:24px;padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.8rem;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);transition:border-color .3s, transform .3s, box-shadow .3s}
.sidebar-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateY(-2px);box-shadow:0 12px 40px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.sidebar-logo-container{display:flex;justify-content:center;margin-bottom:-0.2rem}
.sidebar-logo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--evd-primary);padding:3px;background:var(--evd-img-backing);box-shadow:0 0 20px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.sidebar-info{display:flex;flex-direction:column;gap:.9rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:1.5rem}
.info-item{display:flex;align-items:center;gap:.8rem;font-size:.95rem;color:rgba(255,255,255,.85)}
.info-icon{font-size:1.15rem}
.info-link{color:#fff;text-decoration:none;border-bottom:1px dashed var(--evd-primary);transition:color .2s}
.info-link:hover{color:var(--evd-primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;border-radius:99px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:.95rem}
.btn.primary{background:linear-gradient(135deg,var(--evd-primary),color-mix(in srgb, var(--evd-primary) 60%, white));color:#fff;box-shadow:0 4px 15px color-mix(in srgb, var(--evd-primary) 30%, transparent);border:none}
.btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px color-mix(in srgb, var(--evd-primary) 50%, transparent)}
.btn.secondary{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.btn.secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

.sidebar-socials h3, .sidebar-cta h3{font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:.8rem;color:#fff;font-weight:600;letter-spacing:0.02em}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.social-grid a{display:block;text-align:center;padding:.5rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:.82rem;color:rgba(255,255,255,.8);text-decoration:none;transition:background .2s,border-color .2s,color .2s;background:rgba(255,255,255,.01)}
.social-grid a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 5%, transparent)}

.sidebar-cta{background:linear-gradient(135deg,color-mix(in srgb, var(--evd-primary) 8%, transparent) 0%,rgba(36,26,51,.2) 100%);border:1px solid color-mix(in srgb, var(--evd-primary) 18%, transparent);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.sidebar-cta p{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:.4rem;line-height:1.6}
.cta-btn{display:block;text-align:center;background:var(--evd-primary);color:#fff;padding:.75rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 12px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.cta-btn:hover{background:var(--evd-primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent)}

.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.links a{display:inline-block;padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;transition:border-color .2s,color .2s,background-color .2s;background:var(--evd-bg-card-sub);backdrop-filter:blur(10px)}
.links a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 8%, transparent)}

/* Event list item (organiser profile page's "Upcoming Events") */
.ev{border:1px solid var(--evd-border);border-radius:14px;padding:1.4rem;margin-bottom:1rem;background:var(--evd-bg-card-sub);transition:border-color .3s, transform .2s, background .3s;backdrop-filter:blur(10px);scroll-margin-top:90px}
.ev:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateX(4px);background:rgba(255,255,255,.04)}
.ev:target{border-color:var(--evd-primary);background:color-mix(in srgb, var(--evd-primary) 12%, transparent);animation:evd-target-flash 2s ease-out}
@keyframes evd-target-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb, var(--evd-primary) 50%, transparent)}100%{box-shadow:0 0 0 3px transparent}}
.ev-name{font-weight:600;color:#fff;font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:0.2rem}
.ev-meta{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:.15rem;display:flex;align-items:center;gap:0.4rem}

/* Organiser cards (directory grid) */
.org-card{display:flex;flex-direction:column;background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:20px;overflow:hidden;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s;box-shadow:0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(180%)}
.org-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 40%, transparent);transform:translateY(-6px);box-shadow:0 12px 36px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.org-card-img-wrapper{position:relative}
.org-card img,.org-ph{width:100%;height:180px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.05)}
.org-card img{background:var(--evd-img-backing)}
.org-ph{display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:2.5rem;color:rgba(255,255,255,.9);letter-spacing:.05em;background:linear-gradient(135deg,#240a1b,#130a21 60%,#06060c)}
.org-card-badges{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.org-card-badge{background:rgba(6,6,12,0.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:0.7rem;font-family:var(--evd-font-display);padding:0.25rem 0.65rem;border-radius:99px;letter-spacing:0.02em}
.org-b{padding:1.2rem 1.4rem}
.org-t{font-family:var(--evd-font-display);font-weight:600;color:#fff;font-size:1.15rem;letter-spacing:0.01em}
.org-r{color:rgba(255,255,255,.45);font-size:.85rem;margin-top:.25rem;display:flex;align-items:center;gap:0.3rem}
.org-d{color:rgba(255,255,255,.65);font-size:.88rem;margin-top:.65rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55}

/* Page intro/header block */
.intro{max-width:1200px;margin:0 auto;padding:2.2rem 1.5rem 0;text-align:center}
.intro h1{margin-bottom:.6rem}
.intro p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.7)}
.intro .crumb{text-align:center;margin-bottom:.8rem}

.areas{max-width:1200px;margin:1.8rem auto 0;padding:0 1.5rem;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center}
.areas span{color:rgba(255,255,255,.45);font-size:.85rem;font-family:var(--evd-font-display);margin-right:.2rem}
.areas a{padding:.4rem .9rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(255,255,255,.8);text-decoration:none;font-size:.85rem;transition:border-color .2s,color .2s,background-color .2s;background:rgba(255,255,255,.01)}
.areas a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 5%, transparent)}

.foot{text-align:center;padding:2.5rem;color:rgba(255,255,255,.3);font-size:.78rem;border-top:1px solid rgba(255,255,255,.05);margin-top:4rem}
.foot a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--evd-primary)}

/* ---------------------------------------------------------------------------------
   Timeline (day-grid calendar) — pairs with @benlowrey/events-timeline-logic's
   packTimelineRows()/clampToWindow() for the row-packing math. This is styling only.
   ----------------------------------------------------------------------------------- */
.tl-scroll{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.timeline{position:relative;display:grid;grid-auto-rows:var(--evd-row-h,44px)}
.tl-day{grid-row:1;border-right:1px solid rgba(255,255,255,.05);padding:.4rem .3rem;position:sticky;top:0;background:var(--evd-bg-dark);z-index:2;display:flex;flex-direction:column;align-items:center;font-family:var(--evd-font-display)}
.tl-day.tl-weekend{background:rgba(255,255,255,.02)}
.tl-day.tl-today .tl-daynum{color:var(--evd-primary);font-weight:700}
.tl-month-row{grid-row:1;display:flex;pointer-events:none;height:0;overflow:visible}
.tl-month-cell{flex-shrink:0;position:relative}
.tl-month-label{position:sticky;left:0;top:0;z-index:3;display:inline-block;background:var(--evd-bg-dark);border-right:1px solid rgba(255,255,255,.08);padding:.4rem .5rem .4rem .6rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--evd-primary);white-space:nowrap;font-family:var(--evd-font-display)}
.tl-weekday-letter{font-size:.58rem;color:rgba(255,255,255,.35);text-transform:uppercase;line-height:1.3}
.tl-daynum{font-size:.72rem;color:rgba(255,255,255,.55)}
.tl-today-line{border-left:2px solid var(--evd-primary);pointer-events:none;z-index:1;opacity:.5}

.tl-bar{position:relative;margin:3px 2px;border-radius:8px;background:linear-gradient(90deg,var(--evd-primary) 0%,color-mix(in srgb, var(--evd-primary) 85%, white) var(--dur,100%),color-mix(in srgb, var(--evd-primary) 40%, transparent) calc(var(--dur,100%) + 6%),color-mix(in srgb, var(--evd-primary) 25%, transparent) 100%);display:flex;align-items:center;gap:.5rem;padding:0 .5rem;text-decoration:none;overflow:hidden;box-shadow:0 2px 8px color-mix(in srgb, var(--evd-primary) 25%, transparent);transition:transform .15s,box-shadow .15s;min-width:0;min-height:28px}
.tl-bar .tl-name,.tl-bar .tl-meta,.tl-bar .tl-meta-short{white-space:nowrap}
.tl-bar:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent);z-index:3}
.tl-thumb{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;display:none;background:var(--evd-img-backing)}
span.tl-thumb.tl-mono{background:#1a1a1a}
.tl-mono{align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:.6rem;color:#fff}
.tl-text{min-width:0;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.tl-name{font-size:.72rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis}
.tl-meta,.tl-meta-short{font-size:.62rem;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;display:none}

.timeline[data-density="compact"] .tl-name{font-size:.62rem}
.timeline[data-density="cosy"] .tl-thumb{display:flex}
.timeline[data-density="cosy"] .tl-meta-short{display:block}
.timeline[data-density="roomy"] .tl-thumb{width:34px;height:34px;display:flex}
.timeline[data-density="roomy"] .tl-meta{display:block}

.tl-controls{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.3rem auto .6rem;max-width:1200px;padding:0 1.5rem}
.tl-nav-btn{background:var(--evd-bg-card-sub);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem 1rem;border-radius:999px;font-family:var(--evd-font-display);font-weight:600;font-size:.85rem;cursor:pointer;transition:background .2s}
.tl-nav-btn:hover{background:color-mix(in srgb, var(--evd-primary) 15%, transparent);border-color:var(--evd-primary)}
.tl-wrap{width:100%;max-width:100%;margin:0 auto 4rem;padding:0 .5rem}
@media (min-width:768px){.tl-controls{max-width:100%}.tl-wrap{padding:0 1rem}}
.tl-empty{padding:3rem 1.5rem;text-align:center;color:rgba(255,255,255,.5)}
@media (max-width:640px){ .tl-controls{gap:.4rem} .tl-nav-btn{padding:.4rem .8rem;font-size:.78rem} }

/* ---------------------------------------------------------------------------------
   Universal Navigation — Shared sticky header & always-centered brand identity
   ----------------------------------------------------------------------------------- */
.events-nav, .sticky-nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  padding: .65rem 1.25rem;
  background: rgba(8, 8, 14, 0.82) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  view-transition-name: site-nav;
}
::view-transition-group(site-nav) { animation: none; }

.events-nav-content, .nav-content {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  position: relative;
  box-sizing: border-box;
}

/* Left zone: Brand logo emblem */
.events-nav-left {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  justify-content: flex-start;
  z-index: 2;
}

.events-nav-brand, .nav-logo {
  flex-shrink: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.events-nav-brand img, .nav-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.events-nav-brand:hover img, .nav-logo:hover img {
  transform: scale(1.05);
}
.events-nav-mark-text {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--evd-primary) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--evd-primary) 40%, transparent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--evd-font-display);
  font-weight: 800;
  font-size: 1rem;
}

/* Center zone: ALWAYS mathematically centered brand name */
.events-nav-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  pointer-events: auto;
  max-width: calc(100% - 10rem);
}

.events-nav-brand-link, .events-nav-title, .nav-directory-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  text-align: center;
  transition: opacity .2s, transform .2s;
}
.events-nav-brand-link:hover, .events-nav-title:hover, .nav-directory-label:hover {
  opacity: .95;
}

.events-nav-brand-title {
  font-family: var(--evd-font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.events-nav-subtitle {
  font-family: var(--evd-font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--evd-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--evd-primary) 35%, transparent);
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
}

/* Right zone: View switcher pills */
.events-nav-right {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  justify-content: flex-end;
  z-index: 2;
}

.events-nav-links, .nav-links {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

.events-nav-btn, .nav-link-btn {
  background: var(--evd-bg-card-sub);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--evd-border);
  color: rgba(255, 255, 255, .85);
  padding: .35rem .85rem;
  border-radius: 999px;
  font-family: var(--evd-font-display);
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  user-select: none;
}
.events-nav-btn:hover, .nav-link-btn:hover {
  background: color-mix(in srgb, var(--evd-primary) 15%, transparent);
  border-color: var(--evd-primary);
  color: #fff;
  transform: translateY(-1px);
}
.events-nav-btn.active, .nav-link-btn.active {
  background: var(--evd-primary);
  border-color: var(--evd-primary);
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--evd-primary) 50%, transparent);
}

/* Dedicated mobile view switcher row (hidden on desktop) */
.events-nav-mobile-views {
  display: none;
}

/* Two-tier nav (title row + a row of view pills) from 1100px down. The brand title is centred on the
   page, so the pill group must never reach it. Measured: five pills (~365px) beside a title with a long
   subtitle (~280px wide, centred) only clear each other above ~1050px; the switch sits at 1100px so no
   brand, whatever its link count or subtitle, can overlap. Below it the pills take their own row and the
   title keeps its subtitle; the cosmetic tightening (smaller logo/title, no subtitle) starts at 640px. */
@media (max-width: 1100px) {
  .events-nav, .sticky-nav {
    padding: .45rem .75rem .4rem;
    gap: .4rem;
  }
  .events-nav-content, .nav-content {
    min-height: 32px;
  }
  .events-nav-left {
    flex: 0 0 auto;
  }
  .events-nav-center {
    max-width: calc(100% - 4.5rem);
  }
  .events-nav-right {
    display: none;
  }
  .events-nav-mobile-views {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.1rem 0;
  }
  .events-nav-mobile-views::-webkit-scrollbar {
    display: none;
  }
  .events-nav-mobile-views .events-nav-btn,
  .events-nav-btn, .nav-link-btn {
    padding: .25rem .65rem;
    font-size: .74rem;
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .events-nav-brand img, .nav-logo img {
    height: 28px;
  }
  .events-nav-brand-title {
    font-size: 1rem;
    letter-spacing: .06em;
  }
  .events-nav-subtitle {
    display: none;
  }
}


/* ---------------------------------------------------------------------------------
   Simple List View — High-density, alphabetical (A-Z) quick-glance index
   ----------------------------------------------------------------------------------- */
.org-list-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Alphabetical jump bar */
.org-list-jump-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: .6rem 1rem;
  background: var(--evd-bg-card-sub);
  border: 1px solid var(--evd-border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: calc(4.25rem + var(--evd-nav-extra, 0rem));
  z-index: 20;
}
.org-list-jump-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--evd-font-display);
  font-weight: 700;
  font-size: .75rem;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: all .2s;
}
.org-list-jump-letter:hover {
  background: color-mix(in srgb, var(--evd-primary) 20%, transparent);
  color: #fff;
  border: 1px solid var(--evd-primary);
}
.org-list-jump-letter.disabled {
  opacity: .25;
  pointer-events: none;
}

/* Letter Section */
.org-list-section {
  margin-bottom: 2.25rem;
  scroll-margin-top: 7.5rem;
}
.org-list-letter-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .75rem;
  font-family: var(--evd-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--evd-primary);
  letter-spacing: .02em;
}
.org-list-letter-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--evd-primary) 35%, transparent), transparent);
}

/* List group & rows */
.org-list-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.org-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .65rem 1rem;
  background: var(--evd-bg-card-sub);
  border: 1px solid var(--evd-border);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: all .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.org-list-row:hover {
  background: color-mix(in srgb, var(--evd-primary) 8%, rgba(255, 255, 255, .04));
  border-color: color-mix(in srgb, var(--evd-primary) 40%, transparent);
  transform: translateX(4px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--evd-primary) 12%, transparent);
}

.org-list-left {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  flex: 1;
}

.org-list-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--evd-img-backing);
  border: 1px solid rgba(255, 255, 255, .15);
}
.org-list-mono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--evd-font-display);
  font-weight: 700;
  font-size: .8rem;
  color: rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, color-mix(in srgb, var(--evd-primary) 40%, #1a1a1a), #0d0d12);
  border: 1px solid rgba(255, 255, 255, .15);
}

.org-list-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.org-list-name {
  font-family: var(--evd-font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-list-tags {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.org-list-meta {
  font-size: .78rem;
  color: var(--evd-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-list-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.org-list-badge {
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-family: var(--evd-font-display);
  font-weight: 600;
  background: color-mix(in srgb, var(--evd-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--evd-primary) 30%, transparent);
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
}

.org-list-arrow {
  color: rgba(255, 255, 255, .4);
  transition: transform .2s, color .2s;
  display: flex;
  align-items: center;
}
.org-list-row:hover .org-list-arrow {
  color: var(--evd-primary);
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .org-list-wrap {
    padding: 1.25rem .75rem 3rem;
  }
  .org-list-jump-bar {
    top: calc(5.6rem + var(--evd-nav-extra, 0rem));
    padding: .4rem .6rem;
    gap: .2rem;
  }
  .org-list-jump-letter {
    width: 22px;
    height: 22px;
    font-size: .65rem;
  }
  .org-list-row {
    padding: .5rem .75rem;
    gap: .6rem;
  }
  .org-list-thumb, .org-list-mono {
    width: 30px;
    height: 30px;
    font-size: .7rem;
  }
  .org-list-name {
    font-size: .85rem;
  }
  .org-list-badge {
    font-size: .68rem;
    padding: .2rem .45rem;
  }
}

/* ==========================================================================
   Universal Multichoice Category Filter System
   ========================================================================== */

.cat-filter-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 1.25rem auto 1.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(14, 14, 18, 0.75);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
}

.cat-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 0.2rem;
}

.cat-filter-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.cat-filter-count-num {
  font-weight: 700;
  color: var(--evd-primary);
}

.cat-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cat-filter-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cat-filter-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--evd-primary);
  color: #fff;
}

.cat-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.1rem 0.1rem 0.25rem;
}

.cat-filter-pills::-webkit-scrollbar {
  display: none;
}

.cat-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cat-filter-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cat-filter-pill.active {
  background: color-mix(in srgb, var(--evd-primary) 18%, rgba(0, 0, 0, 0.4));
  border-color: color-mix(in srgb, var(--evd-primary) 65%, transparent);
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--evd-primary) 22%, transparent);
}

.cat-filter-checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  transition: all 0.15s ease;
  background: rgba(0, 0, 0, 0.2);
}

.cat-filter-pill.active .cat-filter-checkbox {
  background: var(--evd-primary);
  border-color: var(--evd-primary);
  color: #000;
  font-weight: 800;
}

.cat-filter-pill:not(.active) .cat-filter-checkbox svg {
  display: none;
}

.cat-filter-pill-label {
  letter-spacing: 0.01em;
}

.cat-filter-pill-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

.cat-filter-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  margin: 1.5rem 0;
  display: none;
}

.cat-filter-empty.visible {
  display: block;
}

.cat-filter-empty-title {
  font-size: 1.15rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

.cat-filter-empty-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
}

/* Smooth filtering transitions on cards & list rows */
.org-card,
.org-list-row {
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s,
              box-shadow 0.25s !important;
  will-change: opacity, transform;
}

.cat-filtered-out {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

.cat-filtered-hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .cat-filter-wrap {
    margin: 0.75rem 0 1.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
  }
  .cat-filter-pill {
    padding: 0.3rem 0.65rem;
    font-size: 0.74rem;
  }
  .cat-filter-status {
    font-size: 0.72rem;
  }
}


/* Phones: cards use the full width with a small even gutter. One rule, no !important. */
@media (max-width: 640px) {
  .wrap, .grid, .org-list-wrap {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .grid {
    gap: 1rem;
  }
  .org-card {
    border-radius: 14px;
  }
  .org-b {
    padding: 1rem 0.8rem;
  }
  .ev {
    padding: 1rem 0.8rem;
  }
}

/* ---------------------------------------------------------------------------------
   Network strip — icons for the sibling sites, shown by brands that opt in.
   A row of its own ABOVE the nav content, so it cannot collide with the brand title at any width.
   The nav grows by --evd-nav-extra, which the sticky A-Z bar reads so it still sits flush below it.
   ----------------------------------------------------------------------------------- */
body.has-network-nav { --evd-nav-extra: 2.1rem; }
.events-nav-network {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  width: 100%;
  padding: 0 0 .35rem;
  margin: 0 0 .3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.events-nav-network-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  opacity: .62;
  text-decoration: none;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.events-nav-network-link img { width: 22px; height: 22px; object-fit: contain; display: block; }
.events-nav-network-link:hover { opacity: 1; transform: translateY(-1px); }
.events-nav-network-link.is-current {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--evd-primary), 0 0 12px color-mix(in srgb, var(--evd-primary) 35%, transparent);
}
@media (max-width: 640px) {
  .events-nav-network { gap: .7rem; padding-bottom: .25rem; margin-bottom: .2rem; }
  .events-nav-network-link { width: 26px; height: 26px; }
  .events-nav-network-link img { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------------------------
   Filter rows — Country / Region / Category share one bar and one look on every site.
   Each row is a fixed label plus a horizontally scrolling set of pills (the compact single-line
   bar the category filter already used); the right-edge fade says "there is more" without a scrollbar.
   ----------------------------------------------------------------------------------- */
.cat-filter-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.cat-filter-row[hidden] { display: none; }
.cat-filter-row-label {
  flex: 0 0 3.7rem;
  font-family: var(--evd-font-display, inherit);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.cat-filter-row > .cat-filter-pills {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.cat-filter-pill.is-single .cat-filter-checkbox { display: none; }
@media (max-width: 640px) {
  .cat-filter-row { gap: .4rem; }
  .cat-filter-row-label { flex-basis: 3.1rem; font-size: .6rem; }
}

/* ---------------------------------------------------------------------------------
   Page heading block: less wasted height, above all on phones.
   ----------------------------------------------------------------------------------- */
.intro h1 { line-height: 1.15; }
@media (max-width: 640px) {
  .intro { padding-top: 1.4rem; }
  .intro p { font-size: 1rem; line-height: 1.6; }
  /* The four view buttons duplicate the nav pills, so on a phone they become a compact 2x2 grid instead
     of four stacked full-width buttons. The markup keeps its inline flex layout (Real Awake's output is
     pinned byte-for-byte), so these overrides need !important; that is their only use. */
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem !important;
    margin-top: 1.1rem !important;
    padding: 0 .75rem;
  }
  .hero-actions .btn { padding: .6rem .5rem; font-size: .8rem; justify-content: center; white-space: nowrap; }
  .hero-actions .btn svg { display: none; }
}