/* Written by tools/www/build-home.mjs from site.css: the sections the function pages use. Edit site.css. */
/* laila-nightlife.com - the public site.
   Self-contained: the one font is served from /fonts (Heebo, OFL, Hebrew and
   Latin subsets of the variable face), nothing third-party, so the CSP stays
   at default-src 'self'. Logical properties throughout so the Hebrew page
   (dir=rtl) is the same stylesheet, mirrored. Colours are the brand's
   (docs/BRAND.md, tools/marketing/assets/README.md): deep navy, magenta,
   violet, cyan.

   Accessibility (IS 5568 / WCAG 2.0 AA): every text colour below clears 4.5:1
   on the surface it sits on; focus is always visible; nothing moves for people
   who asked it not to (prefers-reduced-motion and the menu's "stop
   animations" both kill every animation and transition, and the decorative
   layers that only make sense moving); and the a11y-* classes are what the
   accessibility menu (site.js) toggles on <html>. */

@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #07091a;
  --bg-2: #0c0f24;
  --card: #12163a;
  --card-2: #1a1f4a;
  --line: #262c5c;
  --line-soft: rgba(139, 124, 255, .16);
  --ink: #f6f6fd;
  --muted: #b9bcd4;      /* 9.9:1 on --bg */
  --link: #cfc7ff;       /* 11:1 on --bg */
  --magenta: #ff4fa3;
  --violet: #8b7cff;
  --cyan: #35e0ff;
  --focus: #35e0ff;
  --grad: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan));
  --glass: rgba(18, 22, 58, .62);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --font: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans", sans-serif;
}

/* ---- accessibility menu states (toggled on <html>) ---------------------- */
html.a11y-contrast {
  --bg: #000; --bg-2: #000; --card: #0a0a0a; --card-2: #111; --line: #fff; --line-soft: #fff; --glass: #000;
  --ink: #fff; --muted: #f2f2f2; --link: #ffe14d; --magenta: #ffe14d; --violet: #ffe14d; --cyan: #ffe14d;
  --grad: linear-gradient(90deg, #ffe14d, #ffe14d);
}
html.a11y-contrast img, html.a11y-contrast .hero::before { filter: contrast(1.15); }
html.a11y-contrast .btn-primary { background: #ffe14d; color: #000; box-shadow: none; }
html.a11y-contrast .hero::after { background: rgba(0,0,0,.82); }
html.a11y-contrast .orb, html.a11y-contrast body::before, html.a11y-contrast .spot,
html.a11y-contrast .venues picture::before { display: none; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: .15em; }
html.a11y-font { --font: Arial, Helvetica, "Noto Sans Hebrew", sans-serif; }
html.a11y-font body { letter-spacing: .01em; word-spacing: .06em; line-height: 1.75; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-still .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
html.a11y-still .ticker ul { animation: none; flex-wrap: wrap; justify-content: center; }
html.a11y-still .ticker ul[aria-hidden] { display: none; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M6 4 L6 32 L13 25 L19 37 L24 35 L18 23 L28 23 Z' fill='%23fff' stroke='%23000' stroke-width='2'/></svg>") 6 4, auto !important; }

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; font: 1.0625rem/1.65 var(--font); min-height: 100vh; display: flex; flex-direction: column; position: relative; background: var(--bg); color: var(--ink); }
/* the slow colour wash behind every section: two brand glows, fixed, so the
   page feels lit from behind rather than painted flat */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 40rem at 85% -10%, rgba(139,124,255,.16), transparent 60%),
              radial-gradient(50rem 34rem at 5% 105%, rgba(255,79,163,.11), transparent 60%); }
/* a whisper of grain on top of everything: the one thing that stops a dark
   page from reading as a flat colour fill. Off for high contrast and print. */
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html.a11y-contrast body::after { display: none; }
img { max-width: 100%; height: auto; display: block; }
main { overflow-x: clip; } /* the decorative glows bleed past their boxes; none of them may widen the page */
a { color: var(--link); text-decoration-thickness: from-font; text-underline-offset: .12em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--magenta); color: #07091a; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.95rem, 4vw, 3.1rem); font-weight: 900; letter-spacing: -.025em; }
h3 { font-size: 1.22rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section[data-n]::before { content: attr(data-n); position: absolute; top: 1rem; inset-inline-end: var(--gutter); font-size: clamp(6rem, 18vw, 16rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(139,124,255,.3); pointer-events: none; user-select: none; }
html.a11y-contrast .section[data-n]::before { display: none; }
.section-alt { background: radial-gradient(60rem 30rem at 85% 0%, rgba(139,124,255,.16), transparent 60%), radial-gradient(40rem 26rem at 10% 100%, rgba(255,79,163,.12), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid rgba(255,255,255,.045); }
.section:not(.section-alt) { background: radial-gradient(50rem 30rem at 10% 10%, rgba(53,224,255,.08), transparent 60%); }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: .9rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--grad); }
.center .eyebrow::after { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--grad); }
.lede { font-size: clamp(1.12rem, 2vw, 1.32rem); color: var(--muted); max-width: 46rem; line-height: 1.6; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- skip link ----------------------------------------------------------- */
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--cyan); color: #07091a; font-weight: 700; border-radius: 10px; transition: top .15s; }
.skip:focus { top: 1rem; outline-color: #fff; }

/* ---- header -------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 9, 26, .6); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(7, 9, 26, .86); border-bottom-color: rgba(255,255,255,.07); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
html.a11y-contrast .site-header { background: #000; border-bottom-color: #fff; }
.site-header .wrap { display: flex; align-items: center; gap: .9rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); font-weight: 900; letter-spacing: .14em; font-size: 1.3rem; }
.brand img { width: 2.1rem; height: 2.1rem; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(139,124,255,.35); }
.brand .word { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.a11y-contrast .brand .word { background: none; color: #ffe14d; }
.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: .3rem; }
@media (min-width: 62rem) { .site-nav .drawer-pages li:last-child { display: none; } .public .site-nav .drawer-home { display: none; } }
.site-nav ul { list-style: none; margin: 0; padding: .3rem; display: flex; gap: .1rem; flex-wrap: wrap; justify-content: flex-end; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(255,255,255,.03); }
.site-nav a { display: inline-block; padding: .5rem .85rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .2s, color .2s; }
.site-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.site-nav a[aria-current="true"] { background: rgba(139,124,255,.22); }
.lang-switch { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem; white-space: nowrap; transition: border-color .2s; }
.lang-switch:hover { border-color: var(--cyan); text-decoration: none; }
.lang-switch svg { width: 1.1em; height: 1.1em; }
.site-header .nav-cta { display: none; }
.nav-toggle { display: none; order: -1; width: 2.75rem; height: 2.75rem; padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 62rem) { .site-header .nav-cta { display: inline-flex; } }
@media (min-width: 62rem) { .site-nav ul { flex-wrap: nowrap; } .site-nav a { white-space: nowrap; } }
@media (min-width: 62rem) and (max-width: 92rem) { .site-nav a { padding: .5rem .55rem; font-size: .86rem; } .lang-switch { padding-inline: .6rem; } .site-header .wrap { gap: .6rem; } }
/* on a phone the navigation is a drawer from the side: the pages first,
   the sections of the home page beneath, a scrim behind it */
.drawer-head, .drawer-label { display: none; }
@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .site-header .lang-switch { margin-inline-start: auto; }
  /* closed = display none (an off-screen drawer would widen the page in a
     right-to-left layout); opening slides it in from its own side */
  .site-nav { display: none; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(20rem, 86vw); margin: 0; padding: 1rem 1.1rem 2rem; background: rgba(12,15,36,.98); border-inline-end: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 60px rgba(0,0,0,.5); overflow-y: auto; z-index: 120; }
  .site-nav.open { display: block; animation: drawer-in .3s var(--ease) both; }
  /* from the side it starts on: the left in English, the right in Hebrew */
  @keyframes drawer-in { from { transform: translateX(var(--drawer-from, -100%)); opacity: .4; } to { transform: none; opacity: 1; } }
  [dir="rtl"] .site-nav { --drawer-from: 100%; }
  body.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(7,9,26,.6); z-index: 110; }
  /* the header's backdrop-filter would make it the drawer's containing
     block (a fixed drawer then lives inside the header); drop it while open */
  /* the header is the drawer's stacking context (sticky, z-index 50): lift it above the scrim, or the drawer is dimmed with the page */
  body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; background: rgba(7,9,26,.96); z-index: 130; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
  .drawer-head .word { font-weight: 900; letter-spacing: .14em; font-size: 1.2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .drawer-close { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .drawer-label { display: block; margin: 1.1rem 0 .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
  .site-nav ul { flex-direction: column; gap: .15rem; border: 0; background: none; padding: 0; border-radius: 0; }
  .site-nav a { display: block; padding: .8rem .8rem; font-size: 1.05rem; border-radius: 12px; }
  .site-nav .drawer-pages a { font-size: 1.15rem; font-weight: 800; background: linear-gradient(160deg, rgba(255,79,163,.16), rgba(139,124,255,.14)); border: 1px solid rgba(139,124,255,.35); margin-bottom: .35rem; }
  .lang-switch { padding-inline: .7rem; }
}
html.a11y-contrast .site-nav { background: #000; border-color: #fff; }
.hero-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 .5rem; animation: rise .9s .9s var(--ease) both; }
.hero-pages .btn svg { width: 1.1em; height: 1.1em; }
/* a breadcrumb's arrow is a mirrored glyph: the browser flips it in a right-to-left page by itself */

/* ---- buttons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: .7rem 1.5rem; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, filter .2s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(90deg, var(--magenta), var(--violet) 55%, var(--cyan)); background-size: 200% 100%; color: #07091a; box-shadow: 0 10px 30px rgba(255,79,163,.28), 0 2px 0 rgba(255,255,255,.18) inset; }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 16px 44px rgba(139,124,255,.45), 0 0 0 1px rgba(255,255,255,.25) inset, 0 2px 0 rgba(255,255,255,.18) inset; }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-ghost { border-color: rgba(255,255,255,.14); color: var(--ink); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--cyan); background: rgba(53,224,255,.08); }
.btn-sm { min-height: 2.5rem; padding: .4rem 1.05rem; font-size: .93rem; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

.stores { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.9rem 0 1rem; }
.store { display: inline-flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem 1.2rem .5rem 1rem; border-radius: 16px; background: #f6f6fd; color: #07091a; text-decoration: none; border: 1px solid #f6f6fd; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s var(--ease), box-shadow .2s; }
.store:hover { text-decoration: none; background: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.store svg { width: 1.75rem; height: 1.75rem; flex: none; }
.store .l { display: flex; flex-direction: column; line-height: 1.1; }
.store .l small { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.store .l strong { font-size: 1.12rem; font-weight: 800; }

/* ---- footer -------------------------------------------------------------- */
.site-footer { margin-top: auto; position: relative; border-top: 1px solid rgba(255,255,255,.07); padding: 3rem 0 6.5rem; /* the bottom clears the fixed accessibility button, which sits over the last line otherwise */ color: var(--muted); font-size: .93rem; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.site-footer::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--magenta), var(--violet), var(--cyan), transparent); }
.site-footer .cols { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .8rem; font-weight: 800; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer .fcities { margin-top: 2rem; }
.site-footer .fcities ul { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; }
.site-footer .fcities a { color: var(--muted); }
.site-footer .fcities a:hover { color: var(--ink); }
.site-footer a { color: var(--link); }
.site-footer .legal-line { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ---- accessibility menu -------------------------------------------------- */
.a11y-btn { position: fixed; inset-inline-start: 1rem; bottom: calc(1rem + var(--consent-h, 0px)); z-index: 90; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid #fff; background: #1d3fbf; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.a11y-btn svg { width: 2rem; height: 2rem; }
.a11y-btn:hover { background: #2a52e0; }
.a11y-panel { position: fixed; inset-inline-start: 1rem; bottom: 5.1rem; z-index: 91; width: min(20rem, calc(100vw - 2rem)); background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.05rem; margin: 0 0 .75rem; display: flex; justify-content: space-between; align-items: center; }
.a11y-panel .close { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.1rem; }
.a11y-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.a11y-panel button.opt { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; font: inherit; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .85rem; cursor: pointer; text-align: start; min-height: 2.75rem; }
.a11y-panel button.opt[aria-pressed="true"] { border-color: var(--cyan); background: rgba(53,224,255,.12); }
.a11y-panel button.opt[aria-pressed="true"]::after { content: "✓"; color: var(--cyan); font-weight: 800; }
.a11y-panel .links { margin-top: .75rem; font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.a11y-panel .reset { margin-top: .5rem; }

/* ---- the public events and venues pages (served by the publicSite function) --
   Same tokens, header and footer as the home page; these rules cover what the
   home page has no equivalent for: list heads, the filter bar, cards, the
   event and venue pages' two-column layout, hours, the download band. */
body.public .pmain { padding-top: 0; }
.phead { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; background: radial-gradient(60rem 30rem at 85% 0%, rgba(139,124,255,.16), transparent 60%), radial-gradient(40rem 26rem at 10% 100%, rgba(255,79,163,.1), transparent 60%); border-bottom: 1px solid rgba(255,255,255,.06); }
.phead h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .4em; }
.phead .lede { margin-bottom: 1.4rem; }
.crumbs ol { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .88rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: .35rem; opacity: .6; }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pfilters { display: grid; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(53,224,255,.05)); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.pf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .7rem; }
.pf { display: grid; gap: .3rem; font-size: .78rem; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; min-width: 9rem; }
.pf-city { flex: 1 1 15rem; }
.pf select, .pf input[type="search"], .cb input { font: inherit; color: var(--ink); background: rgba(7,9,26,.75); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; min-height: 2.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pf select:focus, .pf input:focus, .cb input:focus { border-color: var(--cyan); outline: 3px solid var(--focus); outline-offset: 1px; }
.pf-row .btn { min-height: 2.9rem; }
.cb { position: relative; display: grid; }
.cb-clear[hidden], .cb-list[hidden], .pf-row [hidden] { display: none; }
.cb input { width: 100%; padding-inline-start: 2.6rem; padding-inline-end: 2.4rem; }
.cb input::placeholder { color: var(--muted); font-weight: 500; }
.cb-ico { position: absolute; inset-inline-start: .85rem; top: 50%; translate: 0 -50%; color: var(--muted); display: grid; pointer-events: none; }
.cb-clear { position: absolute; inset-inline-end: .4rem; top: 50%; translate: 0 -50%; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cb-clear:hover, .cb-clear:focus-visible { color: var(--ink); background: rgba(255,255,255,.08); }
.cb-list { position: absolute; z-index: 40; top: calc(100% + .4rem); inset-inline: 0; max-height: 17rem; overflow: auto; list-style: none; margin: 0; padding: .35rem; background: #0b0e2a; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.cb-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 8px; cursor: pointer; }
.cb-list li[aria-selected="true"], .cb-list li:hover { background: rgba(124,92,255,.25); }
.cb-list small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.cb-empty { color: var(--muted); cursor: default; font-weight: 500; }
.pf-check { display: inline-flex; flex-direction: row; align-items: center; gap: .45rem; min-width: 0; min-height: 2.6rem; color: var(--ink); }
.pf-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--violet); }
.pnear[aria-pressed="true"] { border-color: var(--cyan); background: rgba(53,224,255,.12); }
.pclear { font-size: .88rem; color: var(--link); align-self: center; }
.pnear-msg { margin: 0; font-size: .85rem; color: var(--muted); }
.pnear-msg[hidden] { display: none; }
.pf-note { margin: 0; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .9rem; color: var(--muted); line-height: 1.5; }
.pf-note a { color: var(--link); font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.pf-note a:hover { color: var(--cyan); }
@media (max-width: 40rem) { .pf-city { flex: 1 1 11rem; min-width: 0; } .pf-date { flex: 1 1 8rem; min-width: 0; } .pf-row .pnear { flex: none; } }
.pf input[type="date"] { font: inherit; color: var(--ink); background: rgba(7,9,26,.75); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; min-height: 2.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color-scheme: dark; min-width: 0; width: 100%; }
.pf input[type="date"]:focus { border-color: var(--cyan); outline: 3px solid var(--focus); outline-offset: 1px; }
.pf-date { min-width: 9.5rem; }
/* the filter bar sticks under the header while the list scrolls */
/* The bar keeps one height whether stuck or not: a bar that shrinks as it
   sticks moves the list under the finger. */
.psticky { position: sticky; top: 4.5rem; z-index: 40; padding: .6rem 0; background: var(--bg); }
.psticky.stuck { box-shadow: 0 12px 30px rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.06); }
.psticky.stuck .pfilters { backdrop-filter: none; background: #0d1030; }
/* on a phone the heading block is a title and a breadcrumb; the note and
   the field labels go, so the bar and the list share the screen */
@media (max-width: 48rem) {
  .phead { padding: .7rem 0 .6rem; }
  .phead .eyebrow, .phead .lede, .pf-note, .pf > span { display: none; }
  .pf-date > span, .pdlg-form .pf > span { display: block; font-size: .72rem; }
  .phead h1 { font-size: 1.4rem; margin-bottom: .1em; line-height: 1.2; }
  .crumbs ol { margin-bottom: .4rem; font-size: .8rem; }
  .ptypes { margin: .4rem 0 0; }
  .psticky { padding: .45rem 0; }
  .pfilters { padding: .6rem .7rem; gap: .5rem; }
  .pf-row { gap: .45rem; }
  .pf select, .cb input, .pf input[type="date"], .pf-row .btn { min-height: 2.6rem; }
  .pcount { margin: .6rem 0 .3rem; }
}
body.nav-open .psticky { z-index: 0; }
/* the claim popup */
.pdlg { border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: #0d1030; color: var(--ink); padding: 0; width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.pdlg::backdrop { background: rgba(3,4,14,.7); backdrop-filter: blur(4px); }
.pdlg-form { display: grid; gap: .8rem; padding: 1.5rem 1.4rem 1.4rem; position: relative; }
.pdlg-form h2 { margin: 0; font-size: 1.35rem; padding-inline-end: 2.5rem; }
.pdlg-form .muted { margin: 0; }
.pdlg-form .pf input { font: inherit; color: var(--ink); background: rgba(7,9,26,.75); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; min-height: 2.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; width: 100%; }
.pdlg-form .pf input:focus { border-color: var(--cyan); outline: 3px solid var(--focus); outline-offset: 1px; }
.pdlg-form .pf input[readonly] { color: var(--muted); background: rgba(255,255,255,.03); }
.pdlg-close { position: absolute; top: .8rem; inset-inline-end: .8rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pdlg .hp { position: absolute; inset-inline-start: -200vw; width: 1px; height: 1px; opacity: 0; }
.pdlg-err { margin: 0; color: #ff9cc4; font-weight: 700; font-size: .9rem; }
.pdlg-err[hidden], .pdlg-done[hidden], .pdlg [hidden] { display: none; }
.pdlg-actions { margin: .2rem 0 0; }
.pdlg-actions .btn { width: 100%; }
.pdlg-done { text-align: center; padding: .5rem 0; }
.pdlg-done-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 .3rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* brand marks on the navigation buttons */
.bmark { width: 1.35em; height: 1.35em; flex: none; }
.pcount { color: var(--muted); font-size: .9rem; margin: 1.2rem 0 .4rem; }
.pgroup { margin: 1.8rem 0 0; }
.pgroup h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .8rem; }
.pgroup h2 small { font-size: .85rem; color: var(--muted); font-weight: 600; margin-inline-start: .5rem; letter-spacing: 0; }
.pgrid { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
/* venues: a short row per venue, the logo on the start side, so a screen holds many */
.pgrid-v { gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pgrid-v { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80rem) { .pgrid-v { grid-template-columns: repeat(3, 1fr); } }
.pvn .pcard-link { display: flex; align-items: stretch; gap: .8rem; padding: .55rem; }
.pvn-media { flex: none; width: 4.6rem; min-height: 4.6rem; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(139,124,255,.5), rgba(255,79,163,.45)); display: grid; place-items: center; }
.pvn-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvn-initial { font-size: 2rem; font-weight: 900; color: #fff; opacity: .9; }
.pvn-body { display: grid; gap: .1rem; align-content: center; min-width: 0; }
.pvn-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvn-body .pcard-venue { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pvn-body .pcard-venue svg { vertical-align: -.15em; margin-inline-end: .2rem; }
.pvn-kicker { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.pvn-kicker .pv-open { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
.pvn .pcard-tag.inline { margin: 0; font-size: .64rem; padding: .18rem .5rem; }
.pvn .pcard-tonight { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvn .pv-open { font-size: .82rem; }
.pvn:hover { transform: none; }
.pcard { border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--card); border: 1px solid rgba(255,255,255,.08); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.pcard:hover { transform: translateY(-4px); border-color: rgba(139,124,255,.5); box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.pcard-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.pcard-link:hover { text-decoration: none; }
.pcard-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(139,124,255,.5), rgba(255,79,163,.45)); overflow: hidden; }
.pcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-tag { position: absolute; top: .7rem; inset-inline-start: .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: rgba(7,9,26,.75); color: var(--ink); backdrop-filter: blur(6px); }
.pcard-tag.inline { position: static; display: inline-block; margin: 0 0 .6rem; background: rgba(139,124,255,.22); }
.pcard-body { padding: 1rem 1.1rem 1.15rem; display: grid; gap: .3rem; }
.pcard-body time { font-size: .82rem; font-weight: 700; color: var(--cyan); }
.pcard-body h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.pcard-venue, .pcard-sub { margin: 0; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.pcard-venue svg { width: 1em; height: 1em; flex: none; color: var(--magenta); }
.pcard-tags, .pchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; }
.pcard-tags span, .pcard-tags a, .pchips a { font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--ink); text-decoration: none; }
.pchips a { font-size: .9rem; padding: .45rem .9rem; }
.pchips a:hover { border-color: var(--cyan); text-decoration: none; }
.pchips a[aria-current="true"] { background: rgba(139,124,255,.25); border-color: rgba(139,124,255,.6); }
.pchips a small { color: var(--muted); margin-inline-start: .3rem; }
.ptypes { margin-bottom: 1rem; }
.pcard-dist { font-size: .8rem; font-weight: 700; color: var(--cyan); }
.pcard-dist[hidden] { display: none; }
.pcard-tonight { margin: .2rem 0 0; font-size: .85rem; font-weight: 700; color: var(--magenta); }
.pv-open { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); }
.pv-open.on { color: #7df0c0; }
.pv-open svg { width: 1em; height: 1em; }
.pv-verified { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--cyan); color: #07091a; vertical-align: middle; }
.pv-verified svg { width: .75em; height: .75em; }
.pv-initial { width: 100%; height: 100%; display: grid; place-items: center; }
.pv-initial span { font-size: 4rem; font-weight: 900; color: rgba(255,255,255,.8); }
.pv-initial img { width: 5rem; height: 5rem; border-radius: 18px; object-fit: cover; }
.t-bar { background: linear-gradient(135deg, #5b4bd6, #8b7cff); }
.t-dance_bar { background: linear-gradient(135deg, #8b7cff, #ff4fa3); }
.t-club { background: linear-gradient(135deg, #ff4fa3, #7a1f6b); }
.t-pub { background: linear-gradient(135deg, #b45309, #7a3a1a); }
.t-rooftop { background: linear-gradient(135deg, #35e0ff, #5b4bd6); }
.t-live_music { background: linear-gradient(135deg, #ff8a3d, #ff4fa3); }
.c-dj { background: linear-gradient(135deg, #8b7cff, #35e0ff); }
.c-live { background: linear-gradient(135deg, #ff8a3d, #ff4fa3); }
.c-party { background: linear-gradient(135deg, #ff4fa3, #8b7cff); }
.c-themed { background: linear-gradient(135deg, #35e0ff, #7df0c0); }
.c-guest { background: linear-gradient(135deg, #ffd166, #ff8a3d); }
.c-happy_hour { background: linear-gradient(135deg, #7df0c0, #35e0ff); }
.c-holiday { background: linear-gradient(135deg, #ffd166, #ff4fa3); }
.c-other { background: linear-gradient(135deg, #5b4bd6, #8b7cff); }
.pempty { margin: 2.5rem 0; padding: 2rem; border-radius: var(--radius); border: 1px dashed rgba(255,255,255,.18); text-align: center; }
.pempty p { margin: 0 0 .4rem; font-size: 1.1rem; }
.pcross { padding: 2.5rem 0 1rem; }
.pcross h2 { font-size: 1.2rem; }
.pband { margin-top: 3rem; padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; background: radial-gradient(50rem 30rem at 50% 100%, rgba(255,79,163,.16), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2)); border-top: 1px solid rgba(255,255,255,.06); }
.pband .lede { margin-inline: auto; }
.pband .stores { justify-content: center; }
/* one event, one venue */
.phero { position: relative; aspect-ratio: 21 / 9; max-height: 26rem; overflow: hidden; background: linear-gradient(135deg, #12163a, #0c0f24); }
.phero.empty { aspect-ratio: auto; height: clamp(7rem, 18vw, 11rem); }
.phero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,26,0) 40%, var(--bg) 100%); }
.phero-logo { position: absolute; bottom: 1rem; inset-inline-start: var(--gutter); width: 5rem; height: 5rem; border-radius: 18px; object-fit: cover; border: 2px solid rgba(255,255,255,.3); z-index: 1; }
.pcols { display: grid; gap: 2rem; padding-block: 1.5rem 2rem; }
@media (min-width: 60rem) { .pcols { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.pmaincol h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: .3em; }
.palt { display: block; font-size: .5em; color: var(--muted); font-weight: 600; margin-top: .3em; }
.pwhen { font-size: 1.1rem; font-weight: 700; color: var(--cyan); margin: 0 0 .4rem; }
.pvenue-line { display: flex; align-items: center; gap: .35rem; color: var(--muted); margin: 0 0 1rem; }
.pvenue-line svg { width: 1.1em; height: 1.1em; color: var(--magenta); flex: none; }
.pvenue-line a { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.pstate { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--muted); margin: 0 0 .8rem; }
.pstate.on { color: #7df0c0; }
.pstate svg { width: 1.1em; height: 1.1em; }
.pbody { font-size: 1.1rem; white-space: pre-line; }
/* Editorial text compiled from content/**.md (region pages, later guides): real paragraphs, not pre-line. */
.ptext { white-space: normal; max-width: 44rem; margin: 1.2rem 0 0; text-align: start; }
.ptext p { margin: 0 0 1rem; line-height: 1.65; }
.ptext h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 1.6rem 0 .6rem; }
.ptext h3 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.ptext ul { padding-inline-start: 1.2rem; margin: 0 0 1rem; } .ptext li { margin: 0 0 .4rem; line-height: 1.55; }
.pbyline { max-width: 44rem; margin: 0; }
/* /go: one tall tappable row per link. */
.pgo { list-style: none; padding: 0; margin: 1rem auto 2rem; max-width: 28rem; display: grid; gap: .7rem; }
.pgo a { display: block; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(18,22,58,.75); border: 1px solid rgba(255,255,255,.14); color: var(--ink); text-decoration: none; text-align: center; }
.pgo a:hover, .pgo a:focus-visible { border-color: var(--cyan); text-decoration: none; }
.pgo strong { display: block; font-size: 1.1rem; } .pgo small { color: var(--muted); }
/* The author block on /about (and the author pages later). */
.pauthor { display: flex; gap: 1rem; align-items: flex-start; max-width: 44rem; margin: .4rem 0 1rem; }
.pauthor img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.pauthor p { margin: .2rem 0 0; color: var(--muted); line-height: 1.5; }
.ptext ol { padding-inline-start: 1.2rem; margin: 0 0 1rem; } .ptext ol li { margin: 0 0 .5rem; line-height: 1.55; }
/* /cities: the city links grouped by region. */
.pcities { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1.2rem; }
.pcities li { line-height: 1.5; } .pcities small { color: var(--muted); } .pcities small a { color: var(--muted); }
.pgroup h2 .plink { font-size: .85rem; font-weight: 600; margin-inline-start: .6rem; color: var(--link); text-decoration: none; letter-spacing: 0; }
.pfacts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1.2rem; }
.pfacts dt { font-weight: 700; } .pfacts dd { margin: 0; color: var(--muted); }
.pactions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.pactions .btn { min-height: 2.7rem; padding: .5rem 1.1rem; font-size: .95rem; }
.papp { margin: 1.5rem 0; padding: 1.2rem; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,79,163,.14), rgba(139,124,255,.12)); border: 1px solid rgba(255,79,163,.35); }
.papp p { margin: .6rem 0 0; font-size: .92rem; }
.pnotice { padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.4); margin: 0 0 1rem; }
.pside { display: grid; gap: 1.2rem; align-content: start; }
.pvcard { display: grid; gap: .8rem; padding: 1rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255,255,255,.1); color: inherit; text-decoration: none; }
.pvcard:hover { text-decoration: none; border-color: rgba(139,124,255,.5); }
.pvcard-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.pvcard .pv-initial { aspect-ratio: 16 / 9; border-radius: 12px; }
.pvcard div { display: grid; gap: .2rem; }
.pvcard span { color: var(--muted); font-size: .9rem; }
.pvcard .plink { color: var(--link); font-weight: 700; margin-top: .3rem; }
.pbox { padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255,255,255,.1); }
.pbox h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.pbox p { margin: 0 0 .6rem; }
.pbox .pchips .btn { min-height: 2.4rem; padding: .3rem .9rem; font-size: .88rem; }
.psection { margin-top: 2rem; }
.psection h2 { font-size: 1.4rem; }
.phours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.phours th { text-align: start; font-weight: 600; padding: .3rem 0; color: var(--muted); }
.phours td { text-align: end; padding: .3rem 0; font-variant-numeric: tabular-nums; }
.phours tr.today th, .phours tr.today td { color: var(--ink); font-weight: 800; }
.muted.small { font-size: .82rem; }
.pclaim { border-color: rgba(53,224,255,.35); }
html.a11y-contrast .pcard, html.a11y-contrast .pbox, html.a11y-contrast .pvcard, html.a11y-contrast .papp, html.a11y-contrast .pfilters, html.a11y-contrast .pband { background: #000; border-color: #fff; }
html.a11y-contrast .pcard-media, html.a11y-contrast .pv-initial, html.a11y-contrast .pcard-tag.inline { background: #000; }
html.a11y-contrast .pv-open.on, html.a11y-contrast .pstate.on, html.a11y-contrast .pcard-tonight { color: #ffe14d; }

/* ---- motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .throw { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ticker ul { flex-wrap: wrap; justify-content: center; }
  .ticker ul[aria-hidden] { display: none; }
  .orb { display: none; }
}
@media print {
  .site-header, .a11y-btn, .a11y-panel, .hero::before, .hero::after, .cities::before, .cities::after, .orb, .ticker, body::before, .progress, .spot, .demo-phone::after, body::after { display: none !important; }
  html { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---- the analytics consent bar ------------------------------------------
   Hidden until site.js shows it (no answer stored yet); fixed to the bottom
   edge. While it shows, site.js sets --consent-h to its height so the
   accessibility button rides above it instead of covering a button. */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; padding: .85rem 1rem; padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink); font-size: .92rem; box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); }
.consent p { margin: 0; max-width: 46rem; }
.consent a { color: var(--link); }
.consent-actions { display: flex; gap: .5rem; }
.consent[hidden] { display: none; }