/*
Theme Name: Beatbake
Theme URI: https://beatbake.com.au
Author: Beatbake
Description: The crawlable, useful, shiny web front door to "what live music is on near me" — Australia-wide, Perth-deep. Editorial "live zine": Cormorant Garamond + amber on warm-black, spotlit/neon.
Version: 0.17.18
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: All rights reserved
Text Domain: beatbake
*/

/* ---- Self-hosted brand display face (Cormorant Garamond, SIL OFL) ----
   Self-hosted (not Google Fonts) to remove the fonts.googleapis.com +
   fonts.gstatic.com third-party origins entirely: no cross-origin DNS/TCP/TLS
   on the critical path, and no visitor IP sent to Google (privacy/GDPR). woff2
   from Google Fonts v21, latin + latin-ext subsets. 500 & 600 share one source
   file per style (declared for both weights). display:swap keeps text visible
   while the face loads. Files in assets/fonts/ (paths relative to this stylesheet). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-normal-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}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-normal-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}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-normal-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-normal-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-italic-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}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-italic-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}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-italic-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-italic-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Inter (body) — self-hosted variable woff2, latin + latin-ext subsets. Brand pair to Cormorant
   (LOCKED: "Cormorant Garamond + Inter", match the app). font-weight is a 100-900 variable range
   so the one file serves every UI weight (the CSS uses 400/500/600). font-display:swap = the
   system fallback paints instantly, Inter swaps in — the answer is never blocked on a webfont. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-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}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Brand tokens (LOCKED) ---- */
:root{
  --bb-black:#120e0b;      /* warm-black */
  --bb-black-2:#1b1511;
  --bb-amber:#e0a04d;      /* amber accent */
  --bb-amber-soft:#f0c489;
  --bb-cream:#f5ece0;
  --bb-muted:#a08a73;
  --bb-line:rgba(224,160,77,.18);
  --bb-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --bb-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bb-black);
  color:var(--bb-cream);
  font-family:var(--bb-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--bb-amber);text-decoration:none}
a:hover{color:var(--bb-amber-soft)}
img{max-width:100%;height:auto;display:block}

.bb-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---- Skip link (WCAG 2.4.1 "bypass blocks") — first focusable element; sits
   off-screen until keyboard focus, then drops in over the spotlit header so a
   keyboard / screen-reader user can jump straight to #main past the nav. ---- */
.bb-skip{
  position:absolute;left:8px;top:-56px;z-index:1000;
  background:var(--bb-amber);color:var(--bb-black);
  font-family:var(--bb-body);font-weight:600;font-size:15px;
  padding:10px 18px;border-radius:0 0 8px 8px;
  transition:top .15s ease;
}
.bb-skip:focus{top:0;color:var(--bb-black);outline:2px solid var(--bb-black);outline-offset:2px}

/* ---- Visible keyboard focus (WCAG 2.4.7) — the browser-default outline is
   effectively invisible on the warm-black theme, so interactive elements get a
   clear amber ring. :focus-visible (not :focus) → mouse users see no change,
   only keyboard navigation. The outline-offset leaves a warm-black gap so the
   ring stays visible even on top of the amber buttons. (The search input keeps
   its own amber box-shadow focus ring — higher specificity, left as-is.) ---- */
a:focus-visible,
button:focus-visible,
.bb-btn:focus-visible,
.bb-chip:focus-visible,
.bb-area:focus-visible,
.bb-gig:focus-visible,
.bb-nav a:focus-visible,
.bb-list__cta:focus-visible{
  outline:2px solid var(--bb-amber);
  outline-offset:3px;
  border-radius:3px;
}

/* ---- Site header ---- */
.bb-topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;max-width:1080px;margin:0 auto}
.bb-brand{font-family:var(--bb-display);font-weight:600;font-size:26px;letter-spacing:.04em;color:var(--bb-cream)}
.bb-brand b{color:var(--bb-amber)}
/* nav links are inline-block with padding so the tap/click target is ≥24px tall
   (WCAG 2.5.8 Target Size, AA) — bare 14px links were ~14px; margin trimmed to
   12px to keep the visual gap ~unchanged once padding is added. */
.bb-nav a{display:inline-block;padding:8px 6px;color:var(--bb-muted);font-size:14px;margin-left:12px;letter-spacing:.03em}
.bb-nav a:hover{color:var(--bb-cream)}
/* Sign out nav action stays hidden by default (cached HTML = signed-out); the
   auth-nav JS reveals it when bb_in=1. Author .bb-nav a display would otherwise
   beat the UA [hidden] rule, so hide it explicitly. */
.bb-nav a[hidden]{display:none}
/* Narrow phones: wrap the nav as a tidy centered row instead of orphaning
   the last link onto a ragged second line (fix-sweep item 10). */
@media (max-width: 480px){
  .bb-topbar{flex-wrap:wrap;row-gap:2px}
  .bb-nav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:0}
  .bb-nav a{margin-left:0;padding:6px 4px;font-size:13px}
}
/* ---- Signed-in account chip + dropdown (sitewide, client-side gated on bb_in) ----
   Cacheable HTML ships the signed-out "Sign in" link; the auth-nav JS hides it
   and reveals this chip when bb_in=1. Author display rules beat the UA [hidden]
   rule, so every toggle target gets an explicit [hidden] override (mirrors the
   .bb-nav a[hidden] note above). Brand: amber chip on warm-black, serif initial. */
.bb-acct{position:relative;display:inline-block;margin-left:12px;vertical-align:middle}
.bb-acct[hidden]{display:none}
.bb-acct__btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;border-radius:999px;line-height:0}
.bb-acct__btn:focus-visible{outline:2px solid var(--bb-amber);outline-offset:3px}
.bb-acct__avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:rgba(224,160,77,.12);border:1px solid rgba(224,160,77,.55);color:var(--bb-amber);font-family:var(--bb-display);font-weight:600;font-size:17px;line-height:1;transition:background .15s,border-color .15s,color .15s}
.bb-acct__btn:hover .bb-acct__avatar,
.bb-acct__btn[aria-expanded="true"] .bb-acct__avatar{background:var(--bb-amber);border-color:var(--bb-amber);color:var(--bb-black)}
.bb-acct__glyph{width:20px;height:20px;display:block}
.bb-acct__initial{display:block}
.bb-acct__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;padding:6px;background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:12px;box-shadow:0 14px 38px -16px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);z-index:20}
.bb-acct__menu[hidden]{display:none}
.bb-acct__greet{margin:0 0 4px;padding:8px 12px 8px;font-family:var(--bb-display);font-size:17px;color:var(--bb-cream);border-bottom:1px solid var(--bb-line)}
.bb-acct__greet[hidden]{display:none}
.bb-acct__item{display:block;width:100%;text-align:left;box-sizing:border-box;margin:0;padding:9px 12px;border:0;background:none;border-radius:8px;color:var(--bb-muted);font-family:var(--bb-body);font-size:14px;letter-spacing:.02em;cursor:pointer}
.bb-acct__item:hover{background:rgba(224,160,77,.12);color:var(--bb-cream)}
.bb-acct__item:focus-visible{outline:2px solid var(--bb-amber);outline-offset:-2px;color:var(--bb-cream)}
.bb-acct__item--signout{color:var(--bb-amber)}
/* Header on small screens: the desktop row (brand + 5 nav links ≈ 540px) overflows
   a phone viewport. Stack the brand over a centred, wrapping nav so EVERY link stays
   visible — no hidden hamburger, no horizontal scroll. No JS; each link is still a
   real crawlable <a> (keeps the internal-link equity the SEO engine relies on). */
@media (max-width:600px){
  .bb-topbar{flex-direction:column;gap:10px;padding:16px 18px}
  .bb-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
  .bb-nav a{margin-left:0}
}

/* ---- Hero (live scrolling tonight-feed in the spotlit/neon look) ---- */
.bb-hero{position:relative;overflow:hidden;text-align:center;padding:64px 0 70px;min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.bb-hero>*{position:relative;z-index:2}
.bb-hero__head{margin-bottom:30px}
.bb-hero__eyebrow{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--bb-amber);margin:0 0 14px}
.bb-hero h1{
  font-family:var(--bb-display);
  font-weight:600;
  font-size:clamp(40px,8vw,86px);
  line-height:1.02;
  margin:0 auto 16px;
  max-width:14ch;
  color:var(--bb-cream);
  text-shadow:0 0 28px rgba(224,160,77,.28);
}
.bb-hero h1 em{font-style:italic;color:var(--bb-amber)}
.bb-hero__sub{font-size:clamp(17px,2.4vw,21px);color:var(--bb-cream);max-width:42ch;margin:0 auto}
.bb-hero__sub strong{color:var(--bb-amber)}
.bb-hero__reassure{font-size:13px;letter-spacing:.08em;color:var(--bb-muted);opacity:.85;margin-top:26px}
/* Hero per-city chips — only cities with real gigs tonight render (honest by
   construction; a dormant market or quiet town simply doesn't appear). Same
   chip DNA as .bb-chip, sized down and centred under the hero sub. */
.bb-hero__cities{justify-content:center;margin-top:18px}
.bb-hero__cities .bb-chip{font-size:14px;padding:7px 14px}
.bb-hero__cities .bb-chip__n{color:var(--bb-muted)}

/* neon photo = the PAINT of the page */
.bb-hero--neon::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* JPEG fallback first (every browser); the WebP image-set() override wins where
     supported. If image-set() is unsupported the declaration is dropped and the
     JPEG line above still applies — graceful, never a blank hero. */
  background-image:var(--bb-neon);
  background-image:var(--bb-neon-set,var(--bb-neon));
  background-size:cover;background-position:center;
  opacity:.20;filter:saturate(1.1);
  mix-blend-mode:screen;
}
/* spotlight cone — brightest down the centre where the feed sits */
.bb-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(224,160,77,.20), rgba(224,160,77,.06) 45%, transparent 72%),
    radial-gradient(140% 60% at 50% -8%, rgba(224,160,77,.14), transparent 60%),
    linear-gradient(180deg, rgba(18,14,11,.55) 0%, rgba(18,14,11,.15) 30%, rgba(18,14,11,.15) 70%, var(--bb-black) 100%);
}

/* ---- The live feed (vertical marquee, centre rows brightest) ---- */
.bb-feed{
  position:relative;height:46vh;max-height:420px;min-height:260px;overflow:hidden;
  max-width:560px;margin:0 auto;
  /* fade top + bottom so the centre is brightest */
  /* softened (home wave 1): 26/74 made the top row read as disabled */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.bb-feed__track{list-style:none;margin:0;padding:0;animation:bb-scroll 38s linear infinite;will-change:transform}
.bb-feed:hover .bb-feed__track,.bb-feed:focus-within .bb-feed__track,.bb-feed.is-paused .bb-feed__track{animation-play-state:paused}
/* feed pause/play control — sibling of .bb-feed so the feed's top/bottom mask
   never fades it out; sits over the brightest (centre-top) of the masked feed */
.bb-feed-wrap{position:relative}
.bb-feed__toggle{
  position:absolute;top:6px;right:6px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;font:600 12px/1 var(--bb-body);
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  color:var(--bb-amber);background:rgba(18,14,11,.78);backdrop-filter:blur(3px);
  border:1px solid rgba(224,160,77,.45);border-radius:999px;
  transition:border-color .15s,background .15s,color .15s;
}
.bb-feed__toggle:hover{border-color:rgba(224,160,77,.8);background:rgba(18,14,11,.92);color:var(--bb-amber-soft)}
.bb-feed__toggle-glyph{font-size:10px;line-height:1}
.bb-feed__row{padding:5px 0}
.bb-gig{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:11px 16px;border:1px solid var(--bb-line);border-radius:12px;
  background:rgba(27,21,17,.55);backdrop-filter:blur(2px);
  color:var(--bb-cream);transition:border-color .15s,background .15s,transform .15s;
}
a.bb-gig:hover{border-color:rgba(224,160,77,.5);background:rgba(27,21,17,.8);transform:translateY(-1px)}
.bb-gig__thumb{flex:0 0 46px;width:46px;height:46px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--bb-black-2)}
.bb-gig__thumb--blank{background:linear-gradient(135deg,rgba(224,160,77,.22),rgba(224,160,77,.05));display:flex;align-items:center;justify-content:center;font-family:var(--bb-display);font-weight:600;font-size:22px;line-height:1;color:rgba(232,146,74,.8)}
.bb-gig__text{display:flex;flex-direction:column;min-width:0}
.bb-gig__act{font-family:var(--bb-display);font-size:21px;font-weight:600;line-height:1.15;color:var(--bb-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-gig__meta{font-size:13px;color:var(--bb-muted);display:flex;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-gig__time{color:var(--bb-amber)}
.bb-gig__venue{overflow:hidden;text-overflow:ellipsis}

.bb-feed--empty{height:auto;max-height:none;min-height:0;-webkit-mask-image:none;mask-image:none;color:var(--bb-muted);padding:18px 0}
.bb-feed--empty p{margin:6px 0}
.bb-feed__empty-sub{font-size:14px;opacity:.85}

@keyframes bb-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ---- ~1.5s "lights come up" entrance (non-blocking, interruptible) ---- */
.bb-hero__head,.bb-feed{animation:bb-lightsup 1.5s ease-out both}
.bb-hero::before{animation:bb-spotup 1.5s ease-out both}
@keyframes bb-lightsup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bb-spotup{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .bb-feed__track{animation:none}
  .bb-hero__head,.bb-feed,.bb-hero::before{animation:none}
  /* With the scroll off, the masked overflow:hidden feed would clip every gig
     past the first few — hiding real (esp. regional) gigs from exactly the
     users who asked for no motion, with no scroll to reach them. Make it a
     plain, COMPLETE static list instead: full height, no clip, no fade; drop
     the duplicate loop pass so nothing shows twice; and hide the pause control
     (there's no animation left to pause). */
  .bb-feed{height:auto;max-height:none;min-height:0;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .bb-feed__row--dup{display:none}
  .bb-feed__toggle{display:none}
}

/* ---- Sections (the scroll-down page) ---- */
.bb-sec{padding:64px 0;border-top:1px solid var(--bb-line)}
.bb-sec--alt{background:var(--bb-black-2)}
.bb-sec__title{font-family:var(--bb-display);font-weight:600;font-size:clamp(30px,4.5vw,46px);line-height:1.05;margin:0 0 10px;color:var(--bb-cream)}
.bb-sec__lede{font-size:18px;color:var(--bb-muted);max-width:52ch;margin:0 0 26px}
.bb-sec__more{margin:22px 0 0;font-family:var(--bb-display);font-size:20px}
.bb-sec__more a{color:var(--bb-amber)}
.bb-note{font-size:14px;color:var(--bb-muted);opacity:.9;margin:14px 0 0}
.bb-empty{color:var(--bb-muted)}

/* tonight map (the locked list/MAP answer — self-hosted Leaflet, CARTO dark tiles, amber pins) */
.bb-map{height:360px;margin:0 0 28px;border-radius:14px;overflow:hidden;border:1px solid var(--bb-line);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 44px -22px rgba(0,0,0,.85)}
.bb-map--venue{height:300px}/* single pin — doesn't need the full discovery-map height */
.bb-map .leaflet-container{background:var(--bb-black);font-family:var(--bb-body)}
.bb-map .leaflet-popup-content-wrapper,.bb-map .leaflet-popup-tip{background:var(--bb-black-2);color:var(--bb-cream);box-shadow:0 10px 34px rgba(0,0,0,.6)}
.bb-map .leaflet-popup-content{font-size:14px;line-height:1.55;margin:11px 14px}
.bb-map .leaflet-popup-content strong{display:block;font-family:var(--bb-display);font-weight:600;font-size:19px;color:var(--bb-cream);margin-bottom:3px}
.bb-map .leaflet-popup-content a{color:var(--bb-amber);text-decoration:none}
.bb-map .leaflet-popup-content a:hover{text-decoration:underline}
.bb-map a.leaflet-popup-close-button{color:var(--bb-muted)}
.bb-map .leaflet-bar a{background:var(--bb-black-2);color:var(--bb-amber);border-bottom-color:var(--bb-line)}
.bb-map .leaflet-bar a:hover{background:var(--bb-black)}
.bb-map .leaflet-control-attribution{background:rgba(18,14,11,.82);color:var(--bb-muted)}
.bb-map .leaflet-control-attribution a{color:var(--bb-amber-soft)}

/* tonight list (the un-gated answer) */
/* Tonight list: cap the desktop measure — full-wrap rows stranded the Tickets
   CTA ~500px from the act name at 1440 (wave-2 list-column critique). */
#tonight [data-bb-list]{max-width:880px}
.bb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--bb-line)}
.bb-list__item{display:flex;align-items:baseline;gap:18px;padding:16px 4px;border-bottom:1px solid var(--bb-line)}
.bb-list__time{flex:0 0 76px;color:var(--bb-amber);font-variant-numeric:tabular-nums}
.bb-list__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.bb-list__act{font-family:var(--bb-display);font-size:24px;font-weight:600;line-height:1.12;color:var(--bb-cream)}
.bb-list__act a{color:inherit;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.bb-list__act a:hover{color:var(--bb-amber);border-bottom-color:rgba(224,160,77,.5)}
.bb-list__venue{font-size:14px;color:var(--bb-muted)}
.bb-list__place{color:var(--bb-amber-soft)}
.bb-list__region{font-family:var(--bb-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bb-amber);margin:28px 0 0}
.bb-list__cta{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;font-size:14px;white-space:nowrap}
/* real non-scheduled status on a list row (cancelled/sold-out/postponed) — small
   inline pill so a gig that's off is obvious while scanning, not just on its own
   page. Sized down from the Cormorant act so it reads as a label, not a name. */
.bb-badge{
  display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 9px;
  font-family:var(--bb-body);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;border-radius:999px;line-height:1.5;
  color:var(--bb-amber);background:rgba(224,160,77,.12);border:1px solid rgba(224,160,77,.4);
}
.bb-badge--cancelled{color:#e8765f;background:rgba(214,96,77,.14);border-color:rgba(214,96,77,.5)}

/* pick-your-night chips */
.bb-chips{display:flex;flex-wrap:wrap;gap:12px}
.bb-chip{display:inline-block;padding:11px 22px;border:1px solid var(--bb-line);border-radius:999px;color:var(--bb-cream);font-size:15px;letter-spacing:.02em}
.bb-chip:hover{border-color:rgba(224,160,77,.6);color:var(--bb-amber)}
.bb-chip--on{background:var(--bb-amber);border-color:var(--bb-amber);color:var(--bb-black)}
.bb-chip--on:hover{color:var(--bb-black)}

/* browse by area */
.bb-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.bb-area{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--bb-line);border-radius:14px;background:rgba(27,21,17,.4);transition:border-color .15s,transform .15s,background .15s}
.bb-area:hover{border-color:rgba(224,160,77,.5);background:rgba(27,21,17,.7);transform:translateY(-2px)}
.bb-area__name{font-family:var(--bb-display);font-size:28px;font-weight:600;color:var(--bb-cream)}
.bb-area__sub{font-size:14px;color:var(--bb-amber)}

/* later-this-week cards */
.bb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.bb-card{display:flex;flex-direction:column;border:1px solid var(--bb-line);border-radius:14px;overflow:hidden;background:rgba(27,21,17,.4);color:var(--bb-cream);transition:border-color .15s,transform .15s}
a.bb-card:hover{border-color:rgba(224,160,77,.5);transform:translateY(-2px)}
.bb-card__img{display:block;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--bb-black-2)}
.bb-card__body{display:flex;flex-direction:column;gap:3px;padding:16px}
.bb-card__when{font-size:13px;color:var(--bb-amber);letter-spacing:.02em}
.bb-card__act{font-family:var(--bb-display);font-size:22px;font-weight:600;line-height:1.12}
.bb-card__venue{font-size:14px;color:var(--bb-muted)}

/* CTA bands + buttons */
.bb-split{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bb-split>div:first-child{flex:1 1 320px}
.bb-split__cta{flex:0 0 auto}
.bb-cta-band{background:radial-gradient(120% 140% at 50% 0,rgba(224,160,77,.12),transparent 60%),var(--bb-black-2)}
.bb-btn{display:inline-block;padding:14px 28px;border:1px solid var(--bb-amber);border-radius:999px;color:var(--bb-amber);font-size:16px;letter-spacing:.02em;transition:background .15s,color .15s}
.bb-btn:hover{background:rgba(224,160,77,.12);color:var(--bb-amber-soft)}
.bb-btn--primary{background:var(--bb-amber);color:var(--bb-black);border-color:var(--bb-amber)}
.bb-btn--primary:hover{background:var(--bb-amber-soft);color:var(--bb-black)}
.bb-cookup{text-align:center}
.bb-cookup .bb-sec__lede{margin-left:auto;margin-right:auto}
.bb-geo{margin:0 0 22px}
.bb-geo__btn{cursor:pointer;font:inherit;font-size:15px;padding:11px 22px}
.bb-geo__btn[disabled]{opacity:.6;cursor:default}
.bb-geo__status{margin:12px 0 0;font-size:14px;color:var(--bb-muted)}
.bb-geo__status a{color:var(--bb-amber)}

@media (max-width:560px){
  .bb-list__item{flex-wrap:wrap;gap:6px 14px}
  .bb-list__cta{flex-basis:100%}
}

/* ---- City landing page (SEO) ---- */
.bb-citypage{padding:54px 0 24px}
.bb-citypage__h1{font-family:var(--bb-display);font-weight:600;font-size:clamp(36px,6vw,68px);line-height:1.03;margin:8px 0 14px;color:var(--bb-cream);text-shadow:0 0 24px rgba(224,160,77,.2)}
.bb-citypage__h1 em{font-style:italic;color:var(--bb-amber)}
.bb-citypage__links{margin-top:46px;display:grid;gap:28px}
.bb-citypage__group{}
.bb-citypage__grouph{font-family:var(--bb-display);font-weight:600;font-size:22px;margin:0 0 12px;color:var(--bb-muted)}
.bb-citypage__dayh{color:var(--bb-cream);font-size:26px;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bb-line)}
.bb-citypage__dayh:first-of-type{margin-top:8px}
.bb-citypage__home{margin-top:34px}
.bb-submitdoor{margin:26px 0 0;color:var(--muted);font-size:14.5px;font-style:italic;text-align:center}
.bb-submitdoor a{color:var(--amber-dim);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.bb-submitdoor a:hover{color:var(--amber);border-color:var(--amber)}

/* ---- Band / artist page (SEO + share-landing) ---- */
.bb-band__head{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bb-band__photo{flex:0 0 120px;width:120px;height:120px;border-radius:14px;background-size:cover;background-position:center;background-color:var(--bb-black-2);border:1px solid var(--bb-line);object-fit:cover;display:block}
.bb-band__id{flex:1 1 260px;min-width:0}
.bb-band__genres{margin-top:14px}
.bb-band__links{margin:22px 0 4px}
.bb-band__bio{margin-top:22px;color:var(--bb-cream);opacity:.92}
.bb-band__upcoming{margin-top:40px}
.bb-band__cta{margin-top:30px}

/* ---- Gig page (share-landing / action surface) ---- */
.bb-gig-page__img,.bb-venue__hero,.bb-citypage__hero{display:block;width:100%;height:320px;object-fit:cover;object-position:center;background-size:cover;background-position:center;border-radius:14px;border:1px solid var(--bb-line);margin:0 0 26px;box-shadow:0 0 60px rgba(224,160,77,.10)}
.bb-gig-page__facts{list-style:none;margin:22px 0 6px;padding:0}
.bb-gig-page__fact{padding:12px 0;border-bottom:1px solid var(--bb-line);font-size:18px}
.bb-gig-page__k{display:inline-block;min-width:74px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bb-amber)}
.bb-gig-page__v{color:var(--bb-cream)}
.bb-gig-page__actions{margin:28px 0 8px;align-items:center;gap:12px}
.bb-gig-page__actions .bb-btn--primary{margin-right:4px}
/* provenance line — the no-fake-data promise made concrete (real sources +
   last-verified date). Left amber rule + verified badge = a quiet trust cue. */
.bb-gig-page__prov{
  margin-top:22px;padding:11px 0 11px 14px;border-left:2px solid var(--bb-amber);
  color:var(--bb-cream);opacity:1;line-height:1.5;
}
.bb-gig-page__prov strong{color:var(--bb-amber)}
.bb-gig-page__prov-badge{
  display:inline-block;margin-right:8px;padding:2px 9px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bb-black);background:var(--bb-amber);border-radius:999px;vertical-align:1px;
}
/* real non-scheduled status (cancelled/postponed/sold out) — the honest, visible
   counterpart to the JSON-LD eventStatus. Loud enough that a share-landing
   visitor can't miss that a gig is off before they chase tickets. */
.bb-gig-page__status{
  margin:14px 0 4px;padding:11px 16px;border-radius:10px;line-height:1.5;
  font-size:15px;color:var(--bb-cream);
  border:1px solid rgba(224,160,77,.4);background:rgba(224,160,77,.10);
}
.bb-gig-page__status strong{
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--bb-amber);
}
.bb-gig-page__status--cancelled{
  border-color:rgba(214,96,77,.55);background:rgba(214,96,77,.12);
}
.bb-gig-page__status--cancelled strong{color:#e8765f}

/* ---- Venue page ---- */
.bb-venue__addr{color:var(--bb-muted);margin-top:-6px}
.bb-venue__links{margin:18px 0 4px}

/* ---- Footer (SEO link cluster) ---- */
.bb-footer{border-top:1px solid var(--bb-line);margin-top:56px;padding:44px 0 64px;color:var(--bb-muted);font-size:14px}
.bb-footer a{color:var(--bb-muted)}
.bb-footer a:hover{color:var(--bb-amber)}
.bb-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 36px}
.bb-footer__h{font-family:var(--bb-display);font-weight:600;font-size:18px;color:var(--bb-cream);margin:0 0 12px;letter-spacing:.02em}
.bb-footer__col a{display:block;padding:5px 0;line-height:1.4}
.bb-footer__legal{margin:38px 0 0;padding-top:22px;border-top:1px solid var(--bb-line);opacity:.85}

/* ---- About page ---- */
.bb-about__p{font-size:18px;color:var(--bb-cream);opacity:.94;margin:14px 0 6px;max-width:62ch}
.bb-about__p strong{color:var(--bb-amber)}
.bb-about__steps{list-style:none;margin:16px 0 6px;padding:0;max-width:62ch}
.bb-about__steps li{position:relative;padding:14px 0 14px 52px;border-bottom:1px solid var(--bb-line);font-size:18px;color:var(--bb-cream)}
.bb-about__step-n{position:absolute;left:0;top:12px;width:34px;height:34px;border:1px solid var(--bb-amber);border-radius:50%;color:var(--bb-amber);font-family:var(--bb-display);font-size:19px;display:flex;align-items:center;justify-content:center}
.bb-about__cta{margin:26px 0 8px;gap:12px;align-items:center}
.bb-footer__links a{margin-right:16px}

/* ---- Pick-your-night date strip ---- */
.bb-pick__lede{margin:22px 0 10px;font-size:15px;color:var(--bb-muted)}
.bb-pick__dates{gap:8px}
.bb-chip--date{font-size:14px;padding:7px 12px;font-variant-numeric:tabular-nums}
.bb-pick__more{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}
.bb-pick__datelabel{font-size:15px;color:var(--bb-muted)}
.bb-pick__dateinput{font:inherit;font-size:15px;color:var(--bb-cream);background:var(--bb-black-2);
  border:1px solid var(--bb-amber);border-radius:8px;padding:7px 12px;color-scheme:dark;accent-color:var(--bb-amber)}
.bb-pick__dateinput:focus{outline:2px solid var(--bb-amber-soft);outline-offset:2px}

/* ---- Search ---- */
.bb-search__form{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 26px;max-width:560px}
.bb-search__form--home{margin:6px 0 24px}
.bb-search__input{flex:1 1 240px;min-width:0;background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;padding:13px 16px;color:var(--bb-cream);font-family:var(--bb-body);font-size:16px}
.bb-search__input::placeholder{color:var(--bb-muted)}
.bb-search__input:focus{outline:none;border-color:var(--bb-amber);box-shadow:0 0 0 3px rgba(224,160,77,.15)}

/* ---- The Cookup signup form (real Buttondown embed, brand-matched) ---- */
.bb-cookup-form{margin:20px 0 0;max-width:520px}
.bb-cookup-form__label{display:block;font-size:14px;color:var(--bb-muted);margin:0 0 8px}
.bb-cookup-form__row{display:flex;flex-wrap:wrap;gap:10px}
.bb-cookup-form__input{flex:1 1 240px;min-width:0;background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;padding:13px 16px;color:var(--bb-cream);font-family:var(--bb-body);font-size:16px}
.bb-cookup-form__input::placeholder{color:var(--bb-muted)}
.bb-cookup-form__input:focus{outline:none;border-color:var(--bb-amber);box-shadow:0 0 0 3px rgba(224,160,77,.15)}
.bb-cookup-form .bb-btn--primary{flex:0 0 auto}
.bb-search__btn{flex:0 0 auto}
.bb-search__hit strong,.bb-search__miss strong{color:var(--bb-amber)}
.bb-search__cta{margin:18px 0 6px;gap:12px;align-items:center}
.bb-search__more{margin-top:30px;color:var(--bb-muted);font-size:15px}
.bb-search__areas{margin-top:8px}
.bb-search__covform{display:flex;flex-direction:column;gap:8px;max-width:440px;margin:18px 0 6px}
.bb-search__covlabel{font-size:14px;color:var(--bb-muted);margin-top:6px}
.bb-search__covopt{color:var(--bb-muted);opacity:.8;font-weight:400}
.bb-search__covform .bb-btn{align-self:flex-start;margin-top:12px}
/* Explicit control sizing — without it these inherited a stretched height
   (~240px tall inputs, walker finding 08-04). */
.bb-search__covform input[type="text"],.bb-search__covform input[type="email"]{min-height:44px;height:44px;padding:10px 12px;box-sizing:border-box}
.bb-search__formnote{color:var(--bb-amber);font-size:15px;margin:6px 0 0}
/* City-hub intro — unique factual copy per city (SEO differentiation + context). */
.bb-cityhub__intro{max-width:60ch;margin:6px 0 18px;color:var(--bb-muted);font-size:16px;line-height:1.55}
/* Visible breadcrumb trail on entity/city pages — matches the BreadcrumbList JSON-LD.
   Real crawlable links (SEO depth) + easy up-navigation. */
.bb-crumbs{max-width:1080px;margin:0 auto;padding:16px 22px 0}
.bb-crumbs__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font-size:13px;color:var(--bb-muted)}
.bb-crumbs__item{display:flex;align-items:center;gap:8px;min-width:0}
.bb-crumbs__item + .bb-crumbs__item::before{content:"\203A";color:var(--bb-muted);opacity:.55}
.bb-crumbs a{color:var(--bb-amber);text-decoration:none}
.bb-crumbs a:hover{text-decoration:underline}
.bb-crumbs [aria-current="page"]{color:var(--bb-cream);max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Inline next-gig on a venue/band search hit — the real answer, not just a link. */
.bb-search__next{margin:2px 0 6px;font-size:15px;color:var(--bb-cream)}
.bb-search__next-label{display:inline-block;color:var(--bb-muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px;margin-right:6px}
.bb-search__next a{color:var(--bb-amber);text-decoration:none;border-bottom:1px solid rgba(224,160,77,.35);padding-bottom:1px}
.bb-search__next a:hover{border-bottom-color:var(--bb-amber)}
.bb-search__townlist{list-style:none;margin:.5rem 0 1rem;padding:0;display:flex;flex-direction:column;gap:7px}
.bb-search__townlist a{color:var(--bb-amber);text-decoration:none;border-bottom:1px solid rgba(224,160,77,.35);padding-bottom:1px}
.bb-search__townlist a:hover{border-bottom-color:var(--bb-amber)}

/* ---- "More live music this week" related-gigs block on gig pages ---- */
.bb-gig-page__more-h{margin-top:34px}

/* ---- Prev/next day-stepper on specific-date city pages (planner + SEO) ---- */
.bb-citypage__daynav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 20px}
.bb-citypage__daynav-next{margin-left:auto}
.bb-citypage__daynav-spacer{flex:0 0 1px}

/* ---- Unclaimed-band claim hook on fan-side band pages (supply flywheel) ---- */
.bb-band__claim{margin:26px 0 6px;padding:18px 20px;border:1px solid var(--bb-line);border-radius:12px;
  background:radial-gradient(120% 140% at 50% 0,rgba(224,160,77,.10),transparent 62%),var(--bb-black-2)}
.bb-band__claim-count{margin:0 0 6px;color:var(--bb-cream);font-size:15px}
.bb-band__claim-count strong{color:var(--bb-amber)}
.bb-band__claim-cta{margin:0;font-family:var(--bb-display);font-size:22px;color:var(--bb-cream);line-height:1.2}
.bb-band__claim-cta a{color:var(--bb-amber);text-decoration:none;border-bottom:1px solid rgba(224,160,77,.4)}
.bb-band__claim-cta a:hover{border-bottom-color:var(--bb-amber)}
.bb-band__claim-note{margin:8px 0 0;color:var(--bb-muted);font-size:13px;max-width:54ch}

/* ---- "Find your band" results (bands on-ramp front half) ---- */
.bb-bands-find__list{list-style:none;margin:18px 0 4px;padding:0;display:grid;gap:10px;max-width:620px}
.bb-bands-find__item{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px;
  background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;padding:14px 16px}
.bb-bands-find__link{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;text-decoration:none;min-width:0}
.bb-bands-find__name{font-family:var(--bb-display);font-size:21px;color:var(--bb-cream);line-height:1.1}
.bb-bands-find__link:hover .bb-bands-find__name{color:var(--bb-amber)}
.bb-bands-find__genre{font-size:13px;color:var(--bb-muted);text-transform:uppercase;letter-spacing:.05em}
.bb-bands-find__status{font-size:12px;letter-spacing:.04em;white-space:nowrap}
.bb-bands-find__status--open{color:var(--bb-amber)}
.bb-bands-find__status--claimed{color:var(--bb-muted)}
.bb-bands-find__claimbtn{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:8px 14px}
.bb-bands-claim__chosen{margin-top:18px}
.bb-bands-claim__done{margin-top:18px}
/* JS-toggled state panels/messages (claim/join/account flows) ship [hidden]
   until relevant. Author display rules can beat the UA [hidden] rule, so hide
   explicitly (mirrors the .bb-nav a[hidden] note above). */
.bb-bands-claim__done[hidden],.bb-bands-claim__chosen[hidden],
.bb-account__ok[hidden],.bb-account__err[hidden]{display:none}

/* ---- Bands dashboard (/bands/dashboard/ — screen 3, the read view) ---- */
.bb-bands-dash__status{margin:6px 0 0;color:var(--bb-muted);font-size:14px;max-width:60ch}
.bb-bands-dash__status a{color:var(--bb-amber);text-decoration:none}
.bb-bands-dash__status a:hover{text-decoration:underline}
.bb-bands-badge{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--bb-line);color:var(--bb-muted)}
.bb-bands-badge--ok{color:var(--bb-amber);border-color:rgba(224,160,77,.5)}
.bb-bands-reach{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 8px}
.bb-bands-reach__stat{flex:1 1 160px;background:var(--bb-black-2);border:1px solid var(--bb-line);
  border-radius:12px;padding:18px 20px}
.bb-bands-reach__num{display:block;font-family:var(--bb-display);font-size:34px;color:var(--bb-cream);line-height:1}
.bb-bands-reach__label{display:block;margin-top:6px;font-size:13px;color:var(--bb-muted)}
.bb-bands-giglist{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:10px;max-width:640px}
.bb-bands-gig{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;padding:14px 16px}
.bb-bands-gig__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0}
.bb-bands-gig__main strong{font-family:var(--bb-display);font-size:19px;color:var(--bb-cream);font-weight:400}
.bb-bands-gig__when{font-size:13px;color:var(--bb-muted)}
.bb-bands-gig__act{flex:0 0 auto;white-space:nowrap;color:var(--bb-amber);text-decoration:none;font-size:14px}
.bb-bands-gig__act:hover{text-decoration:underline}
/* ---- Bands profile form (dashboard, screen 5) ---- */
.bb-bands-form{display:grid;gap:14px;max-width:560px;margin:14px 0 4px}
.bb-bands-field{display:grid;gap:6px}
.bb-bands-field__label{font-size:13px;color:var(--bb-muted);letter-spacing:.02em}
.bb-bands-field__label em{color:var(--bb-muted);font-style:normal;opacity:.8}
.bb-bands-input,.bb-bands-textarea{width:100%;box-sizing:border-box;background:var(--bb-black-2);
  border:1px solid var(--bb-line);border-radius:9px;padding:11px 13px;color:var(--bb-cream);
  font:inherit;font-size:15px}
.bb-bands-input:focus,.bb-bands-textarea:focus{outline:2px solid var(--bb-amber);outline-offset:1px;border-color:transparent}
.bb-bands-textarea{resize:vertical;min-height:72px}
.bb-bands-msg{margin:4px 0 0;font-size:14px}
.bb-bands-msg--ok{color:var(--bb-amber)}
.bb-bands-msg--err{color:#e88}

/* -------------------------------------------------------------------------
 * Account / Sign in with Apple (/account/, framework #9 — the personal layer)
 * ---------------------------------------------------------------------- */
.bb-account__signin{margin:22px 0 10px}
.bb-apple-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:13px 22px;border-radius:10px;border:1px solid rgba(245,236,224,.18);
  background:#000;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:17px;
  font-weight:600;letter-spacing:.01em;cursor:pointer;transition:border-color .15s ease,transform .05s ease}
.bb-apple-btn:hover{border-color:rgba(224,160,77,.55)}
.bb-apple-btn:active{transform:translateY(1px)}
.bb-apple-btn:disabled{opacity:.55;cursor:default}
.bb-apple-btn__logo{width:17px;height:20px;display:block;margin-top:-2px}
.bb-account__err{margin:12px 0 0;color:#f0a0a0;font-size:15px}
.bb-account__fineprint{margin:14px 0 0;color:var(--bb-muted);font-size:14px;max-width:46ch}
/* Email magic-link sign-in (passwordless, mirrors the Apple/Google block). */
.bb-account__signin--email{margin-top:20px;max-width:340px}
.bb-account__or{display:block;margin:2px 0 8px;color:var(--bb-muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.bb-email-form{display:grid;gap:10px}
.bb-email-form__label{font-size:13px;color:var(--bb-muted);letter-spacing:.02em}
.bb-email-form__input{width:100%;box-sizing:border-box;background:var(--bb-black-2);
  border:1px solid var(--bb-line);border-radius:9px;padding:12px 13px;color:var(--bb-cream);
  font:inherit;font-size:15px}
.bb-email-form__input:focus{outline:2px solid var(--bb-amber);outline-offset:1px;border-color:transparent}
.bb-email-form__btn{cursor:pointer;justify-self:start}
.bb-account__ok{margin:12px 0 0;color:var(--bb-amber);font-size:15px;max-width:46ch}
.bb-account .bb-btn#bb-signout{cursor:pointer;font:inherit}

/* Danger zone -- delete account. Deliberately quiet + set apart from the
   primary actions; the destructive buttons read in a danger (red) style. */
.bb-account__danger{margin:40px 0 8px;padding:18px 18px 20px;border:1px solid rgba(220,80,80,.32);
  border-radius:12px;background:rgba(220,80,80,.05)}
.bb-account__danger-h{font-family:var(--bb-display);font-weight:600;font-size:17px;
  margin:0 0 8px;color:#e69a9a}
.bb-account__danger-p{margin:0 0 14px;color:var(--bb-muted);font-size:14px;max-width:52ch;line-height:1.5}
.bb-account__danger-p strong{color:var(--bb-cream)}
.bb-account .bb-btn.bb-account__danger-btn{cursor:pointer;font:inherit;
  color:#e69a9a;border-color:rgba(220,80,80,.45);background:transparent}
.bb-account .bb-btn.bb-account__danger-btn:hover{color:#fff;border-color:#d05050;background:rgba(220,80,80,.18)}
.bb-account .bb-btn.bb-account__danger-btn[disabled]{opacity:.45;cursor:not-allowed}
.bb-account__danger-confirm{margin:16px 0 4px;display:grid;gap:10px;max-width:340px}
.bb-account__danger-actions{margin-top:2px}

/* Account hub — the signed-in personal layer (following + upcoming + band). */
.bb-account__band{margin:6px 0 28px;padding:16px 18px;border:1px solid var(--bb-line);
  border-radius:12px;background:rgba(224,160,77,.05)}
.bb-account__band-lede{margin:0 0 12px;color:var(--bb-cream);font-size:16px}
.bb-account__count{margin:0 0 14px;color:var(--bb-muted);font-size:14px;letter-spacing:.02em}
.bb-account__subh{font-family:var(--bb-display);font-weight:600;font-size:18px;
  margin:18px 0 6px;color:var(--bb-amber-soft)}
.bb-flist{list-style:none;margin:0 0 20px;padding:0}
.bb-flist__item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 4px;border-bottom:1px solid var(--bb-line)}
.bb-flist__name{font-family:var(--bb-display);font-size:21px;font-weight:600;line-height:1.12;
  color:var(--bb-cream);border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.bb-flist__name:hover{color:var(--bb-amber);border-bottom-color:rgba(224,160,77,.5)}
.bb-flist__next{font-size:13px;color:var(--bb-muted);white-space:nowrap}
.bb-flist__next a{color:var(--bb-amber-soft);border-bottom:1px solid transparent;transition:border-color .15s}
.bb-flist__next a:hover{border-bottom-color:rgba(240,196,137,.5)}
.bb-flist__next--none{color:var(--bb-muted);opacity:.7}
@media (max-width:480px){.bb-flist__item{flex-wrap:wrap;gap:2px 12px}}

/* Empty-state "next active night" CTA on quiet city/date pages (useful-first). */
.bb-citypage__next{margin:14px 0 4px}

/* ---- Live search type-ahead dropdown (towns/bands/venues) ---- */
.bb-ac-wrap{position:relative;flex:1 1 240px;min-width:0;display:flex}
.bb-ac-wrap .bb-search__input{flex:1 1 auto;width:100%}
.bb-ac{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:60;
  background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 44px -22px rgba(0,0,0,.85);
  max-height:62vh;overflow-y:auto;padding:4px 0}
.bb-ac__group{font-family:var(--bb-body);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bb-amber);padding:10px 14px 4px}
.bb-ac__opt{display:flex;align-items:baseline;gap:10px;padding:9px 14px;cursor:pointer;min-height:24px}
.bb-ac__opt.is-active,.bb-ac__opt:hover{background:rgba(224,160,77,.14)}
.bb-ac__label{color:var(--bb-cream);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-ac__sub{color:var(--bb-muted);font-size:13px;margin-left:auto;white-space:nowrap;flex:0 0 auto}

/* =========================================================================
   BANDS SITE (bands.beatbake.com.au) — "the view from the stage".
   Same DNA as the fan site (warm-black, amber, Cormorant) but darker + a
   single spotlight pool, rawer and more utilitarian. Scoped to .bb-bands so it
   never touches the fan site.
   ====================================================================== */
.bb-bands{background:#0c0908;}
.bb-bands .bb-topbar--bands{border-bottom:1px solid var(--bb-line);}
.bb-brand__tag{font-family:var(--bb-body);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-amber);vertical-align:middle;margin-left:6px;}

/* Spotlight hero — the light pools on the band, the room falls away to black. */
.bb-stage-hero{position:relative;overflow:hidden;padding:clamp(56px,11vw,128px) 0 clamp(40px,7vw,80px);
  background:radial-gradient(120% 90% at 50% -10%,rgba(224,160,77,.20) 0%,rgba(224,160,77,.06) 26%,rgba(12,9,8,0) 60%),#0c0908;}
.bb-stage-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);}
.bb-stage-hero .bb-wrap{position:relative;z-index:1;text-align:center;max-width:760px;}
.bb-stage-hero__h1{font-family:var(--bb-display);font-weight:600;font-size:clamp(40px,7.5vw,76px);line-height:1.02;
  margin:.2em 0 .35em;color:var(--bb-cream);text-wrap:balance;}
.bb-stage-hero__h1 em{font-style:italic;color:var(--bb-amber);}
.bb-stage-hero__lede{font-size:clamp(17px,2.3vw,21px);line-height:1.5;color:var(--bb-cream);opacity:.92;max-width:620px;margin:0 auto 1.6em;}
.bb-stage-hero__lede strong{color:var(--bb-amber-soft);}
.bb-stage-hero__cta{display:flex;flex-direction:column;align-items:center;gap:12px;}
.bb-stage-hero__soon{font-size:14px;color:var(--bb-muted);margin:0;}
.bb-stage-hero__soon a{color:var(--bb-amber);}

/* Apple button — present, but a STUB tonight (claiming not wired yet). */
.bb-apple-btn--stub{opacity:.55;cursor:not-allowed;filter:saturate(.6);}
.bb-apple-btn--stub:hover{transform:none;}

/* Why / How sections on the dark stage. */
.bb-bands .bb-sec{background:#0c0908;}
.bb-stage__h2{font-family:var(--bb-display);font-weight:600;font-size:clamp(26px,4vw,40px);line-height:1.05;
  color:var(--bb-cream);text-align:center;margin:0 0 .8em;}
.bb-bands-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.bb-bands-why__item{border:1px solid var(--bb-line);border-radius:14px;padding:22px 20px;background:rgba(224,160,77,.03);}
.bb-bands-why__item h3{font-family:var(--bb-display);font-weight:600;font-size:23px;color:var(--bb-amber);margin:0 0 .4em;}
.bb-bands-why__item p{font-size:15.5px;line-height:1.55;color:var(--bb-cream);opacity:.88;margin:0;}
.bb-stage-how .bb-wrap{max-width:680px;}
.bb-bands-steps{list-style:none;counter-reset:bb-step;padding:0;margin:0 0 1.4em;}
.bb-bands-steps li{counter-increment:bb-step;position:relative;padding:14px 0 14px 52px;border-bottom:1px solid var(--bb-line);
  font-size:16.5px;line-height:1.5;color:var(--bb-cream);}
.bb-bands-steps li:last-child{border-bottom:0;}
.bb-bands-steps li::before{content:counter(bb-step);position:absolute;left:0;top:12px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--bb-amber);
  font-family:var(--bb-display);font-size:18px;color:var(--bb-amber);}
.bb-bands-steps li strong{color:var(--bb-cream);}

/* Bands — public "add a gig" submission form (supply-side capture, no-JS). */
.bb-bands-add .bb-sec__lede{max-width:42rem}
.bb-gigform{max-width:34rem;margin:1.4rem 0 0}
.bb-gigform__row{margin:0 0 .95rem}
.bb-gigform__label{display:block;font-family:var(--bb-body);font-size:.82rem;letter-spacing:.02em;color:var(--bb-amber-soft);margin:0 0 .34rem}
.bb-gigform__req{color:var(--bb-amber)}
.bb-gigform__opt{color:var(--bb-muted);font-size:.78rem}
.bb-gigform__input,.bb-gigform__ta{width:100%;background:var(--bb-black-2);border:1px solid var(--bb-line);border-radius:10px;padding:13px 16px;color:var(--bb-cream);font-family:var(--bb-body);font-size:16px}
.bb-gigform__input::placeholder,.bb-gigform__ta::placeholder{color:var(--bb-muted)}
.bb-gigform__input:focus,.bb-gigform__ta:focus{outline:none;border-color:var(--bb-amber);box-shadow:0 0 0 3px rgba(224,160,77,.15)}
.bb-gigform__ta{min-height:4.8rem;resize:vertical}
.bb-gigform__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.bb-gigform .bb-btn{margin-top:.2rem}
.bb-formnote{border-radius:10px;padding:.8rem .95rem;margin:0 0 1.1rem;font-family:var(--bb-body);font-size:.96rem;line-height:1.45}
.bb-formnote--ok{background:rgba(224,160,77,.12);border:1px solid rgba(224,160,77,.42);color:var(--bb-cream)}
.bb-formnote--err{background:rgba(200,70,50,.12);border:1px solid rgba(200,70,50,.5);color:#f3d9d2}

/* Venue directory (/venues/) — the demand-side index. Reuses bb-chip + bb-citypage. */
.bb-venuesdir__city { margin: 2.2rem 0 0; }
.bb-venuesdir__cityname { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; }
.bb-venuesdir__cityname a { color: var(--bb-amber); text-decoration: none; }
.bb-venuesdir__cityname a:hover { text-decoration: underline; }
.bb-venuesdir__count { font-family: var(--bb-body); font-size: .8rem; font-weight: 400; color: rgba(255,255,255,.55); }
.bb-venuesdir__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.bb-venuesdir__item { margin: 0; }
.bb-venuesdir__link { text-decoration: none; }

/* About FAQ accordion (/about/ #faq) — brand tokens, no new colours */
.bb-faq{margin:14px 0 6px;border-top:1px solid var(--bb-line);max-width:62ch}
.bb-faq__item{border-bottom:1px solid var(--bb-line)}
.bb-faq__q{cursor:pointer;list-style:none;position:relative;padding:16px 32px 16px 0;font-family:var(--bb-display);font-weight:600;font-size:20px;color:var(--bb-amber)}
.bb-faq__q::-webkit-details-marker{display:none}
.bb-faq__q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--bb-amber);transition:transform .2s ease}
.bb-faq__item[open] .bb-faq__q::after{content:"\2212"}
.bb-faq__q:hover,.bb-faq__q:focus-visible{color:var(--bb-amber-soft)}
.bb-faq__a{padding:0 0 14px}
.bb-faq__a .bb-about__p{margin:0}
.bb-faq__a a{color:var(--bb-amber)}

/* ---- City switcher (home-screen wave) ---- live markets = selectable amber
   chips; dormant capitals greyed "not yet mapped" (a tap = a demand signal,
   never a lie). Same chip DNA as .bb-chip; the tag is an eyebrow. */
.bb-markets{margin:0 0 18px}
.bb-markets__label{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--bb-amber);margin:0 0 10px}
.bb-markets__chips{display:flex;flex-wrap:wrap;gap:10px}
.bb-mkt{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border:1px solid var(--bb-line);border-radius:999px;background:transparent;color:var(--bb-cream);font-family:var(--bb-body);font-size:15px;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,color .15s,background .15s,opacity .15s}
.bb-mkt__tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-amber)}
.bb-mkt--live:hover{border-color:rgba(224,160,77,.6)}
.bb-mkt--live.is-active{background:var(--bb-amber);border-color:var(--bb-amber);color:var(--bb-black)}
.bb-mkt--live.is-active .bb-mkt__tag{color:var(--bb-black)}
.bb-mkt--soon{opacity:.55}
.bb-mkt--soon .bb-mkt__tag{color:var(--bb-cream);opacity:.8}
.bb-mkt--soon:hover{opacity:.8;border-color:rgba(224,160,77,.35)}
.bb-mkt--soon.is-wanted{opacity:.75;border-style:dashed;border-color:rgba(224,160,77,.5)}
.bb-mkt--soon.is-wanted .bb-mkt__tag{color:var(--bb-amber)}
.bb-mkt--detect{border-style:dashed;color:var(--bb-amber)}
.bb-mkt--detect:hover{border-color:rgba(224,160,77,.6)}
.bb-markets__status{font-size:14px;color:var(--bb-cream);opacity:.85;margin:10px 0 0;min-height:1em}


/* ---- home wave 1 (2026-07-23): hero city pill + micro-interactions ----
   The menu used to be position:absolute + translateX(-50%) inside .bb-hero__head,
   and every hero child shares z-index:2 (.bb-hero > *). The gig feed is a later
   sibling, so its rows — translucent fill plus backdrop-filter — painted over
   the menu on iOS Safari and the lower cities sat on top of the gig titles.
   The head is lifted above those siblings. The menu is centred without a
   transform (a translated layer was compositing the page through the plate)
   and uses a solid warm-black fill, not a translucent rgba. */
.bb-home .bb-hero__head{z-index:4}
.bb-home .bb-hero__head:has(.bb-hero__citypill[aria-expanded="true"]){animation:none;opacity:1;transform:none}
.bb-home .bb-hero:has(.bb-hero__citypill[aria-expanded="true"]){overflow:visible}
.bb-home .bb-hero__citywrap{position:relative;display:block;margin:0 0 14px}
.bb-home .bb-hero__citypill{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(232,146,74,.35);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .25s,background .25s}
.bb-home .bb-hero__citypill:hover{border-color:var(--bb-amber);background:rgba(232,146,74,.07)}
.bb-home .bb-hero__eyebrow--pill{margin:0}
.bb-home .bb-hero__citycaret{width:7px;height:7px;border-right:1.5px solid var(--bb-amber);border-bottom:1.5px solid var(--bb-amber);transform:rotate(45deg) translateY(-1px);transition:transform .25s}
.bb-home .bb-hero__citypill[aria-expanded="true"] .bb-hero__citycaret{transform:rotate(225deg) translateY(-1px)}
.bb-home .bb-hero__citymenu{
  position:absolute;top:calc(100% + 10px);left:0;right:0;width:max-content;min-width:190px;
  max-width:min(280px,calc(100vw - 32px));margin-inline:auto;
  max-height:320px;max-height:min(52dvh,380px);overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background-color:#1b1511;background-color:var(--bb-black-2);
  border:1px solid var(--bb-line);border-radius:14px;padding:6px;z-index:5;
  box-shadow:0 18px 44px -12px #000,0 0 0 1px rgba(0,0,0,.45);
  isolation:isolate;
}
.bb-home .bb-hero__citymenu[hidden]{display:none}
.bb-home .bb-hero__cityitem{display:block;padding:12px 16px;border-radius:9px;text-decoration:none;font-family:var(--bb-display);font-weight:600;font-size:19px;line-height:1.2;color:var(--bb-cream);transition:background .2s,color .2s}
.bb-home .bb-hero__cityitem:hover{background:rgba(232,146,74,.1);color:var(--bb-amber)}
.bb-home .bb-hero__cityitem.is-current,
.bb-home .bb-hero__cityitem[aria-current="true"]{background:var(--bb-amber);color:var(--bb-black)}
.bb-home .bb-hero__cityitem.is-current:hover,
.bb-home .bb-hero__cityitem[aria-current="true"]:hover{background:var(--bb-amber-soft);color:var(--bb-black)}
@media (max-width:600px){
  .bb-home .bb-hero__citymenu{max-height:280px;max-height:min(46dvh,320px)}
  .bb-home .bb-hero__cityitem{font-size:18px;padding:12px 16px}
}
.bb-home .bb-gig{transition:background .3s}
.bb-home .bb-gig:hover{background:rgba(232,146,74,.05)}
.bb-home a.bb-gig:hover .bb-gig__venue{color:var(--bb-amber)}
.bb-home .bb-gig__venue{transition:color .3s}
.bb-home .bb-card{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.bb-home .bb-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(0,0,0,.85)}
@media(prefers-reduced-motion:reduce){
 .bb-home .bb-hero__citypill,.bb-home .bb-hero__citycaret,.bb-home .bb-gig,.bb-home .bb-gig__venue,.bb-home .bb-card{transition:none}
 .bb-home .bb-card:hover{transform:none}
}

/* Genre tags (0064): quiet, non-interactive — deliberately NOT .bb-chip */
.bb-gig-page__genres{margin:10px 0 2px;display:flex;gap:6px;flex-wrap:wrap}
.bb-genretag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bb-mut,#8A8478);border:1px solid var(--bb-line,#E7E1D4);border-radius:3px;padding:2px 7px}

/* Voice C receipts lines (band page) — warm arrangement of real facts */
.bb-receipts{margin:10px 0 14px;font-size:16px;line-height:1.5}
.bb-receipts span{color:var(--bb-mut,#8A8478);font-size:14px}