/* Self-hosted, first-party. These were three weights pulled from
   fonts.googleapis.com behind a render-blocking cross-origin stylesheet — and
   the LCP element on every template here is *text*, so first paint waited on
   that round trip and then on a second origin for the file itself. Lighthouse
   attributed 838-853ms of blocking on mobile and mobile LCP was Poor on all
   three templates.

   All three families are OFL. Each is a variable font, so one file covers
   both weights the page asks for. Served from /fonts with the year-long
   immutable cache firebase.json already grants woff2. */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 500;
  font-display:swap; src:url(/fonts/inter.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}
/* Tilt Neon (OFL, latin subset, one 400 weight) for display type and signs.
   Big Shoulders and Spline Sans Mono left the pages in the 2026-09-25 neon
   restyle; their files stay in /fonts for build_og_cards.py. */
@font-face{font-family:'Tilt Neon'; font-style:normal; font-weight:400;
  font-display:swap; src:url(/fonts/tilt-neon.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}

/* ── Masthead ──────────────────────────────────────────────────────────────
   One block, shared verbatim by the homepage, the privacy page and both
   generators. It used to be written twice with different numbers — 24px mark
   against 11px, 15px nav against 14.5px, different padding and wrap widths —
   so the bar visibly shifted as you moved between pages.

   Sticky is safe here: the only overflow on an ancestor is `overflow-x:clip`
   on html/body, and `clip` creates no scroll container. `hidden` would have
   pinned this to a box that never scrolls. */
.masthead{position:sticky; top:0; z-index:60; background:rgba(12,10,20,.88);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline); padding:14px 0}
.masthead .wrap{display:flex; align-items:center; gap:20px}
/* Offset on the anchor targets themselves, not `scroll-padding-top` on html.
   The global version also applied when the browser scrolled the focused
   toggle checkbox into view, which nudged the page every time the menu was
   opened. These are the only things anchors actually point at. */
section[id], [id^="h-"]{scroll-margin-top:88px}

.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text);
  text-decoration:none; font-family:var(--display); font-size:21px;
  color:#ffe3f1; text-shadow:var(--neon-p); margin-right:auto}
.brand-mic{height:30px; width:auto; flex:none; display:block;
  filter:drop-shadow(0 0 6px rgba(224,85,155,.45))}

.masthead nav{display:flex; gap:26px; align-items:center}
.masthead nav a{color:var(--muted); text-decoration:none; font-size:15px;
  white-space:nowrap}
.masthead nav a:hover{color:var(--text)}
.masthead nav a[aria-current="page"]{color:var(--text);
  box-shadow:0 2px 0 var(--accent); padding-bottom:3px}

/* Both badges, untouched: true ratio, nothing drawn over either.
   There was a pulsing glow behind this one, on a layer of our own — allowed,
   where altering the badge would not be. It went when Android shipped: drawn
   on the anchor it sat around Google's built-in clear space rather than its
   button, and lighting one of two stores reads as preferring it. */
/* ---- The two store badges ------------------------------------------------
   Both are artwork under binding guidelines: unmodified, unrecoloured, never
   boxed, and neither smaller than the other. Google's is supplied with its
   clear space inside the file — 41px of a 250px canvas, a quarter of the
   button's own height — so its box must be 1.488x Apple's full-bleed one for
   the two buttons to read the same size.

   One custom property carries the size so the two never drift apart, and the
   pair is a flex row so a badge can never land on top of its neighbour: the
   `.bill` grid slot held exactly one child until today, and the second badge
   covered the first on all fifty city pages. */
.stores{display:inline-flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; --badge:46px}
.stores .store{display:inline-block; line-height:0; padding:0}
.stores .store img{height:var(--badge); width:auto;
  margin:0; border:0; border-radius:0; box-shadow:none}
.stores .store.play img{height:calc(var(--badge) * 1.488)}

/* The bar runs smaller than the page's calls to action, and shrinks again
   before the nav would push the Play badge off the right edge — measured
   at 820px, where it used to be cut through the word. */
.nav-stores{gap:10px; flex:none; --badge:40px}
/* 761-900px is the band where the bar is still the desktop one: the collapse
   is at 760. Two badges plus four links plus the wordmark did not fit, and the
   Play badge was cut through at 820. Smaller badges and a tighter gap fit it;
   `flex-wrap` is the net, so the worst case is a second row rather than a
   clipped trademark. */
@media (max-width:900px){
  .masthead nav{flex-wrap:wrap; justify-content:flex-end; gap:16px}
  .nav-stores{--badge:30px; gap:8px}
}
.nav-store{display:inline-block; line-height:0}

/* The collapse. A checkbox and a label, because these pages carry no
   JavaScript beyond the analytics tag and the day filter proved the idiom. */
/* Fixed, not absolute. The label moves focus to this checkbox, and the
   browser scrolls a focused element into view — sitting at the top of the
   document, that yanked the page to the top every time the menu was toggled.
   Fixed at the viewport's own top corner, it is always in view, so focusing
   it scrolls nothing. */
.navtoggle{position:fixed; top:0; left:0; width:1px; height:1px;
  opacity:0; pointer-events:none}
.navburger{display:none; width:44px; height:44px; cursor:pointer;
  align-items:center; justify-content:center; flex:none}
.navburger span, .navburger span::before, .navburger span::after{
  content:""; display:block; width:20px; height:2px; border-radius:2px;
  background:var(--text); transition:transform .18s ease, opacity .18s ease}
.navburger span::before{position:relative; top:-6px}
.navburger span::after{position:relative; top:4px}
.navtoggle:checked ~ .masthead .navburger span{background:transparent}
.navtoggle:checked ~ .masthead .navburger span::before{transform:translateY(6px) rotate(45deg)}
.navtoggle:checked ~ .masthead .navburger span::after{transform:translateY(-6px) rotate(-45deg)}
.navtoggle:focus-visible ~ .masthead .navburger{outline:2px solid var(--accent); outline-offset:2px}

@media (max-width:760px){
  .navburger{display:flex}
  /* The panel overlays the page instead of growing the bar and shoving
     everything down. Absolute against .masthead, which `backdrop-filter`
     already makes a containing block. */
  .masthead nav{position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--hairline);
    padding:0 max(18px,calc((100vw - var(--page))/2 + 18px));
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .22s ease, visibility 0s linear .22s}
  .navtoggle:checked ~ .masthead nav{max-height:360px; visibility:visible;
    transition:max-height .24s ease, visibility 0s}
  .masthead nav a{padding:14px 2px; border-top:1px solid var(--hairline);
    font-size:16px}
  .masthead nav a[aria-current="page"]{padding:14px 2px 14px 12px;
    box-shadow:inset 3px 0 0 var(--accent)}
  .masthead nav .nav-stores{justify-content:center; width:100%; gap:14px;
    padding:18px 0 22px; border-top:1px solid var(--hairline)}
  /* `.masthead nav a` rules every link in the panel, badges included, so each
     one drew its own short divider above itself. The rule belongs to the row. */
  .masthead nav .nav-stores a{border-top:0; padding:0}
  /* Below the bar, above the page: menu links stay clickable, anything else
     dismisses. */
  .navscrim{position:fixed; inset:0; z-index:55; display:none}
  .navtoggle:checked ~ .navscrim{display:block}
}
@media (prefers-reduced-motion: reduce){
  .masthead nav{transition:none}
  .navburger span, .navburger span::before, .navburger span::after{transition:none}}

:root{
  /* Neon on a dark stage (2026-09-25). Every text colour measures >= 7:1 on
     --bg and --surface; --ghost is no longer dimmer than --faint. */
  --night:#07050d; --bg:#0c0a14; --surface:#141022;
  --text:#f3eefe; --muted:#b3abcc; --faint:#a49dbb; --ghost:#a49dbb;
  --accent:#9184d9; --accent-400:#b5abfc; --accent-600:#796cbf; --accent-800:#423a6a;
  --gel-a:#e0559b; --gel-b:#e8a24a; --tube-p:#ff9ccc; --tube-a:#ffd49a;
  --divider:#3a3152; --hairline:#2e2644;
  /* Neon text: a near-white fill lit by a gel. Light, never chrome. */
  --neon-p:0 0 3px #fff, 0 0 10px #e0559b, 0 0 24px #e0559b, 0 0 50px rgba(224,85,155,.45);
  --neon-a:0 0 3px #fff, 0 0 10px #e8a24a, 0 0 24px #e8a24a, 0 0 50px rgba(232,162,74,.45);
  --neon-b:0 0 3px #fff, 0 0 10px #9184d9, 0 0 24px #9184d9, 0 0 50px rgba(145,132,217,.45);
  /* A still bulb row, as a tile: blurple, amber, pink. */
  --bulb-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='12'%3E%3Cg opacity='.3'%3E%3Ccircle cx='11' cy='6' r='5.5' fill='%239184d9'/%3E%3Ccircle cx='33' cy='6' r='5.5' fill='%23e8a24a'/%3E%3Ccircle cx='55' cy='6' r='5.5' fill='%23e0559b'/%3E%3C/g%3E%3Ccircle cx='11' cy='6' r='3' fill='%23b5abfc'/%3E%3Ccircle cx='33' cy='6' r='3' fill='%23ffd49a'/%3E%3Ccircle cx='55' cy='6' r='3' fill='%23ff9ccc'/%3E%3C/svg%3E");
  --bulb-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='66'%3E%3Cg opacity='.3'%3E%3Ccircle cy='11' cx='6' r='5.5' fill='%23e0559b'/%3E%3Ccircle cy='33' cx='6' r='5.5' fill='%239184d9'/%3E%3Ccircle cy='55' cx='6' r='5.5' fill='%23e8a24a'/%3E%3C/g%3E%3Ccircle cy='11' cx='6' r='3' fill='%23ff9ccc'/%3E%3Ccircle cy='33' cx='6' r='3' fill='%23b5abfc'/%3E%3Ccircle cy='55' cx='6' r='3' fill='%23ffd49a'/%3E%3C/svg%3E");
  --r-md:8px; --r-lg:14px; --r-pill:999px;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Tilt Neon","Inter",-apple-system,system-ui,sans-serif;
  --mono:var(--body);
  --page:1020px; --prose:680px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; letter-spacing:0}
p{margin:0}
b{font-weight:500; color:var(--text)}
a{color:var(--accent-400)}
:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px; border-radius:2px}
.wrap{width:min(100% - 44px, var(--page)); margin-inline:auto}
.prose{width:min(100%, var(--prose))}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--surface); padding:10px 14px;
  border-radius:var(--r-md); z-index:70}  /* above the sticky masthead (60) */

/* ---- masthead ------------------------------------------------------- */
/* Sticky masthead. Safe here because the only overflow on an ancestor is
   `overflow-x:clip` on html/body — `clip` does not create a scroll container,
   where `hidden` would have and would have pinned this to a box that never
   scrolls. */

/* So an in-page anchor doesn't land underneath the bar. */


/* The nav badge is Apple's artwork and stays untouched — 40px, its true
   ratio, nothing drawn on top of it. The pull is a glow *behind* it, on a
   layer of our own, which their guidelines allow where altering the badge
   would not. */




/* Motion is specified, not decorative: the static composition is the fallback. */
@media (prefers-reduced-motion: reduce){
  }






@media (max-width:480px){
.masthead nav a.hi{color:var(--accent)}}

/* ---- marquee hero ---------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--night);
  border-bottom:1px solid var(--hairline)}
.hero .wrap{position:relative; z-index:2; padding:34px 0 64px}
.beams{position:absolute; inset:0; z-index:0; pointer-events:none}
/* Still light only: a warm spotlight cone from the top over a pink pool and
   an amber one. One hero in motion per page, and here it is the bulb row. */
.beam{position:absolute; border-radius:50%}
.beam.b1{left:-8%; top:10%; width:62%; height:80%;
  background:radial-gradient(closest-side, rgba(224,85,155,.16), transparent)}
.beam.b2{right:-6%; top:34%; width:52%; height:66%;
  background:radial-gradient(closest-side, rgba(232,162,74,.08), transparent)}
.beam.b3{left:50%; top:-10%; width:min(1100px,150vw); height:120%; border-radius:0;
  transform:translateX(-50%); filter:blur(6px);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom, rgba(255,236,210,0), rgba(255,236,210,.13) 30%, rgba(255,236,210,.03) 70%, transparent)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to bottom,transparent,var(--bg)); z-index:1; pointer-events:none}

.crumb{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--ghost); margin:0 0 44px}
.crumb a{color:var(--muted); text-decoration:none; padding:12px 0; display:inline-block}
.crumb a:hover{color:var(--text)}

.bulbs{display:flex; gap:clamp(10px,2.4vw,22px); margin:0 0 30px; padding:0}
.bulbs span{width:8px; height:8px; border-radius:50%; flex:none}
.bulbs span:nth-child(3n+1){background:var(--accent-400); box-shadow:0 0 9px var(--accent)}
.bulbs span:nth-child(3n+2){background:var(--tube-a); box-shadow:0 0 9px var(--gel-b)}
.bulbs span:nth-child(3n)  {background:var(--tube-p); box-shadow:0 0 9px var(--gel-a)}
.hero .bulbs span{animation:chase 1.6s infinite; animation-delay:calc(var(--i)*.11s)}
@keyframes chase{0%,100%{opacity:.2} 20%{opacity:1}}
/* Every other row glows but stays still. */
.bulbs span:nth-child(even){opacity:.55}
.hero .bulbs span:nth-child(even){opacity:1}

.hero h1{line-height:1}
.hero h1 .kicker{display:block; font-family:var(--mono); text-transform:uppercase;
  font-weight:500; font-size:clamp(13px,1.8vw,15px); letter-spacing:.28em;
  color:var(--accent-400); text-shadow:0 0 8px rgba(145,132,217,.6); margin:0 0 16px}
.hero h1 .city{display:block; font-size:clamp(50px,12vw,150px); color:#ffe3f1;
  text-shadow:0 0 4px #fff, 0 0 14px var(--gel-a), 0 0 36px var(--gel-a), 0 0 80px rgba(224,85,155,.45);
  overflow-wrap:anywhere}
.dek{color:#e9e5ff; font-size:clamp(17px,2.3vw,20.5px); line-height:1.6;
  max-width:58ch; margin:30px 0 0}
.districts{display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 0; padding:0; list-style:none}
.districts a{display:inline-flex; align-items:center; gap:10px; min-height:46px;
  padding:8px 20px 8px 16px; border:1.5px solid var(--accent-400); border-radius:var(--r-pill);
  color:var(--text); text-decoration:none; font-size:14.5px; background:rgba(12,10,20,.55);
  box-shadow:0 0 10px rgba(145,132,217,.3), inset 0 0 10px rgba(145,132,217,.08)}
.districts a:hover{box-shadow:0 0 16px rgba(145,132,217,.6), inset 0 0 12px rgba(145,132,217,.15)}
.districts .dot{width:13px; height:13px; border-radius:50%; flex:none}
.districts .n{color:var(--ghost)}
.g-a .dot{background:var(--tube-p); box-shadow:0 0 8px var(--gel-a), 0 0 18px var(--gel-a)}
.g-b .dot{background:var(--tube-a); box-shadow:0 0 8px var(--gel-b), 0 0 18px var(--gel-b)}

/* ---- the bill: what this guide names vs what we track ----------------- */
.bill{margin:38px 0 0; padding-top:26px; border-top:1px solid var(--divider);
  display:grid; grid-template-areas:"tally store" "line store";
  grid-template-columns:minmax(0,1fr) auto; column-gap:44px; row-gap:10px;
  align-items:center}
.tally{grid-area:tally; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:8px 18px}
.tally .t{display:inline-flex; align-items:baseline; gap:12px}
.tally b{font-family:var(--display); font-weight:400; line-height:1;
  font-size:clamp(42px,5vw,60px); color:#fff1dc; text-shadow:var(--neon-a)}
.tally .tail .t b{color:#ffe3f1; text-shadow:var(--neon-p)}
.tally i{font-style:normal; font-family:var(--mono); font-size:12px;
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); line-height:1.5; max-width:20ch}
.tally .sep{font-family:var(--display); line-height:1;
  font-size:clamp(28px,3.6vw,42px); color:var(--accent-800)}
/* The slash rides with the number after it, and disappears when that number
   wraps. It used to be a flex item of its own, so at tablet width it was left
   alone at the end of the first row. `.tail` (slash + second number) hangs the
   slash and its gap off its own left edge, and the row's column gap is widened
   by the same amount: on one row nothing moves; at the start of a row the
   slash sits left of the tally's box, where `overflow-x:clip` hides it. The
   18px of padding is room for the first number's glow.
   Phones stack the numbers and hide the slash outright (below). */
.tally .tail{display:inline-flex; align-items:baseline; gap:18px}
@media (min-width:721px){
  .tally{--sepw:calc(clamp(28px,3.6vw,42px) * .49);
    column-gap:calc(36px + var(--sepw)); overflow-x:clip;
    margin-left:-18px; padding-left:18px}
  .tally .tail{margin-left:calc(-18px - var(--sepw))}
  .tally .sep{width:var(--sepw); text-align:center}
}
.bill-line{grid-area:line; color:var(--muted); font-size:15.5px; max-width:54ch}
.bill .stores{grid-area:store; justify-self:end}
/* On a phone the badge leads the bill so it clears the fold; the tally reads
   directly beneath it. The hero preamble tightens for the same reason. */
@media (max-width:720px){
  .hero .wrap{padding-top:22px}
  .crumb{margin-bottom:26px}
  .hero .bulbs{margin-bottom:22px}
  .dek{margin-top:22px}
  .bill{margin-top:28px; padding-top:20px; row-gap:14px;
    grid-template-areas:"store" "tally" "line";
    grid-template-columns:minmax(0,1fr)}
  .bill .stores{justify-self:start}
  .tally .sep{display:none}  /* stacked numbers need no slash */
}

/* ---- intro ----------------------------------------------------------- */
.intro{padding:56px 0 8px}
.intro .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:34px}
.intro p{color:var(--muted); padding-left:18px; border-left:2px solid var(--divider)}
.intro p:nth-child(odd) {border-left-color:rgba(224,85,155,.55)}
.intro p:nth-child(even){border-left-color:rgba(232,162,74,.55)}

/* ---- district sections: the playbill ledger -------------------------- */
.district{padding:64px 0 8px}
.eyebrow{font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; display:flex; align-items:center;
  gap:14px; margin:0 0 16px}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--hairline)}
.g-a .eyebrow{color:#ffe3f1; text-shadow:0 0 8px var(--gel-a)}
.g-b .eyebrow{color:#fff1dc; text-shadow:0 0 8px var(--gel-b)}
.district h2{font-size:clamp(34px,5vw,50px); line-height:1.08}
.g-a h2{color:#ffe3f1; text-shadow:var(--neon-p)}
.g-b h2{color:#fff1dc; text-shadow:var(--neon-a)}
.district .lede{color:var(--muted); max-width:60ch; margin:16px 0 40px}
.picks{list-style:none; margin:0; padding:0}
.pick{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto;
  gap:10px 36px; align-items:start; padding:26px 0 28px;
  border-top:1px solid var(--hairline)}
.pick:last-child{border-bottom:1px solid var(--hairline)}
.pick h3{font-size:clamp(24px,3vw,29px); line-height:1.1}
.where{display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--ghost); margin-top:10px}
.pick .line{color:var(--muted); font-size:16.5px}
.nights{display:flex; gap:4px; font-size:13px; font-weight:500; letter-spacing:.04em; padding-top:5px}
/* The week as quiet letters, Sunday first: a lit night is bright text with a
   soft glow in its district's gel, the rest are dim. No circles, borders or
   tiles: it is a status line, not a row of buttons (owner, 2026-10-19: "it
   shouldn't be a pill shape if it's not a button"). Static. */
.nights .d{min-width:18px; text-align:center; color:var(--faint)}
.nights .on{color:#fff}
.g-a .nights .on{text-shadow:0 0 6px var(--gel-a), 0 0 12px rgba(224,85,155,.55)}
.g-b .nights .on{text-shadow:0 0 6px var(--gel-b), 0 0 12px rgba(232,162,74,.55)}

/* ---- intermission / essays -------------------------------------------- */
.inter{padding:86px 0 6px; text-align:center}
.inter .bulbs{justify-content:center; margin:0 0 34px}
.inter h2{font-size:clamp(32px,5vw,48px); line-height:1.1; text-shadow:var(--neon-b)}
.inter p{color:var(--muted); font-size:16.5px; max-width:54ch; margin:14px auto 0}
.inter .stores{margin-top:26px}
.essay{padding:58px 0 8px}
.essay h2{font-size:clamp(28px,4vw,40px); line-height:1.1; text-shadow:var(--neon-b)}
.essay .body{display:grid; grid-template-columns:minmax(0,1fr); gap:17px; margin-top:22px;
  max-width:var(--prose)}
.essay .body p{color:var(--muted)}
.essay.has-pull .cols{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:48px; align-items:center; margin-top:22px}
.essay.has-pull .body{margin-top:0}
.pull{font-family:var(--display); font-size:clamp(30px,4vw,40px); line-height:1.15;
  color:#ffe3f1; text-shadow:var(--neon-p); border-left:2px solid var(--tube-p);
  padding-left:26px; margin:0}
@media (max-width:800px){
  .essay.has-pull .cols{grid-template-columns:minmax(0,1fr); gap:26px}
  .pull{order:-1}
}

/* ---- faq -------------------------------------------------------------- */
.faq{padding:64px 0 8px}
.faq h2{font-size:clamp(28px,4vw,40px); margin-bottom:14px; text-shadow:var(--neon-b)}
.faq details{border-bottom:1px solid var(--hairline); max-width:var(--prose)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{cursor:pointer; font-size:17px; font-weight:500; color:var(--text);
  list-style:none; padding:19px 46px 19px 0; position:relative; min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:50%; margin-top:-15px;
  width:30px; height:30px; box-sizing:border-box; display:grid; place-items:center;
  border:1.5px solid var(--accent-400); border-radius:50%; color:#f3efff; font-size:18px;
  line-height:1; box-shadow:0 0 8px rgba(145,132,217,.45)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 22px; color:var(--muted); font-size:16.5px; max-width:62ch}

/* ---- cta / footer ------------------------------------------------------ */
/* The closing card is a marquee sign: a still bulb frame drawn in CSS. */
.cta{margin:74px 0 10px; padding:60px 34px 54px; text-align:center; position:relative;
  overflow:hidden; border:2px solid var(--accent-800); border-radius:22px;
  background:radial-gradient(circle at 50% 30%, rgba(224,85,155,.12), #0e0a18 70%);
  box-shadow:0 0 36px rgba(224,85,155,.16), inset 0 0 30px rgba(0,0,0,.6)}
.cta::before, .cta::after{content:""; position:absolute; pointer-events:none}
.cta::before{inset:5px 16px; background:var(--bulb-h) top/66px 12px round no-repeat,
  var(--bulb-h) bottom/66px 12px round no-repeat}
.cta::after{inset:22px 5px; background:var(--bulb-v) left/12px 66px no-repeat round,
  var(--bulb-v) right/12px 66px no-repeat round}
.cta h2{font-size:clamp(30px,4.6vw,44px); line-height:1.1; margin-bottom:14px;
  color:#ffe3f1; text-shadow:var(--neon-p)}
.cta p{color:var(--muted); max-width:52ch; margin-inline:auto; font-size:16.5px}
/* Apple's badge, used as delivered: never restyled, ≥40px tall, and the
   padding is its required clear space (10% of height, all round). */

.cta .stores{margin-top:30px}
footer{border-top:1px solid var(--hairline); margin-top:56px; padding:30px 0 46px;
  color:var(--ghost); font-size:14px}
footer a{color:var(--muted); text-decoration:none; margin-right:6px;
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px 0 0}
footer a:hover{color:var(--text)}
.src{margin-top:10px; font-size:13.5px; color:var(--ghost); max-width:66ch}
.marks{margin-top:10px; font-size:12px; color:var(--ghost); max-width:62ch}

/* ---- responsive + motion ---------------------------------------------- */
@media (max-width:860px){
  .pick{grid-template-columns:minmax(0,1fr)}
  .pick .line{margin-top:2px}
  .sched{grid-column:1 / -1; margin-top:6px}
  .nights{padding-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .beam,.bulbs span{animation:none}
}

/* The state, set small against the showbill city name. The heading used to be
   two adjacent spans with nothing between them, so its textContent read
   "Karaoke inAustin" — correct to look at, one malformed token to anything
   reading the DOM. The separator matters more than the styling. */
.hero h1 .st{font-size:.3em; letter-spacing:.01em; color:var(--faint);
  text-shadow:none}

/* The byline. Small, under the dek, and a link rather than a name on its own —
   "who says so" is only a trust signal if the answer goes somewhere. */
.hero .byline{margin:10px 0 0; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.04em; color:var(--ghost)}
.hero .byline a{color:var(--accent-400); text-decoration:none;
  border-bottom:1px solid rgba(169,159,228,.35)}
.hero .byline a:hover{border-bottom-color:var(--accent-400)}

/* The night sentence. It belongs with the strip it restates, not orphaned in
   the next grid row under the address — so it spans the prose and strip
   columns and sits directly beneath them. */
.sched{grid-column:2 / -1; margin:2px 0 0; font-size:13.5px; line-height:1.5;
  color:var(--ghost)}
.sched b{font-weight:500; color:var(--muted)}
@media (max-width:860px){.sched{grid-column:1 / -1; margin-top:6px}}

/* "In short" — the standalone summary, all of it derived from verified rows. */
.short{margin:28px 0 6px; padding:20px 22px; background:var(--surface);
  border:1px solid var(--hairline); border-left:3px solid var(--accent-400);
  border-radius:var(--r-lg); box-shadow:-4px 0 14px -6px var(--accent)}
.short h2{margin:0 0 7px; font-family:var(--body); text-transform:uppercase;
  letter-spacing:.13em; font-size:12px; font-weight:500; color:var(--accent-400)}
.short p{margin:0; font-size:16.5px; line-height:1.62; color:var(--muted)}

/* Nearby cities. Fifty guides used to sit as fifty leaves with no edge
   between them; distance is the ordering a reader would actually want. */
.near{padding:44px 0 8px}
.near h2{margin:0 0 15px; font-size:26px; text-shadow:var(--neon-b)}
.near ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.near a{display:block; background:var(--surface); border:1px solid var(--divider);
  border-radius:var(--r-lg); padding:14px 17px; text-decoration:none;
  color:var(--text); transition:border-color .15s}
.near a:hover{border-color:var(--accent-600)}
.near b{display:block; font-size:16.5px; font-weight:500}
.near span{display:block; margin-top:3px; font-size:14px; color:var(--ghost);
  line-height:1.45}
.near .all{margin:16px 0 0; font-size:15px}
.near .all a{background:none; border:0; padding:0; color:var(--accent-400)}

/* A pick's name is a link to its venue page (2026-09-23). Chrome, not light:
   the accent underline, never a gel. */
.pick h3 a{color:inherit; text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; text-decoration-color:var(--accent-800)}
.pick h3 a:hover{color:var(--accent-400); text-decoration-color:var(--accent)}

/* The week across a city hero and a day page: each night with a day page of
   its own is a link. Interactive, so blurple chrome — the gels stay light. */
.daylinks{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:26px 0 0}
.daylinks .lbl{flex-basis:100%; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 4px}
.daylinks .d{display:inline-grid; place-items:center; min-width:44px; min-height:44px;
  padding:0 6px; border-radius:var(--r-pill); font-size:12.5px;
  font-weight:500; letter-spacing:.04em; text-decoration:none;
  color:var(--accent-400); border:1.5px solid var(--accent-800);
  background:color-mix(in srgb, var(--night) 55%, transparent)}
.daylinks a.d:hover{color:var(--text); border-color:var(--accent)}
/* A night with no karaoke at all: plain text, no pill, so it never looks
   like a button (site-dead-night-pills.md). */
.daylinks .none{display:inline-flex; align-items:center; gap:4px; min-width:0;
  padding:0 6px; border:0; background:none; color:var(--ghost); font-weight:400}
.daylinks .none small{font-size:11px; letter-spacing:.02em; color:var(--faint)}
/* The page you are on: not a link, so not a pill. Bright text, a glow
   and an accent underline mark it. */
.daylinks .cur{color:#fff; border-color:transparent; background:none; border-radius:0;
  text-shadow:0 0 6px var(--accent); text-decoration:underline; text-decoration-color:var(--accent-400);
  text-decoration-thickness:2px; text-underline-offset:6px}
@media (max-width:420px){.daylinks .d{min-width:44px; padding:0 4px}}

/* ---- neon restyle, 2026-09-25 ---------------------------------------------
   Plain page heads (about, the karaoke and what-to-sing indexes): a still bulb
   row, then the title as a blurple sign. */
.head{padding:44px 0 34px}
.head::before{content:""; display:block; height:12px; width:min(100%,264px);
  margin:0 0 22px; background:var(--bulb-h) left/66px 12px repeat-x}
.head h1{font-size:clamp(46px,9vw,84px); line-height:1.02; color:#f3efff;
  text-shadow:0 0 4px #fff, 0 0 14px var(--accent), 0 0 34px var(--accent), 0 0 70px rgba(145,132,217,.45)}
.head .dek{margin-top:18px; max-width:60ch}
.head .dek a, .prose a{color:#c9bff5}
section > h2, .prose h2{text-shadow:var(--neon-b)}
.cities a:hover, .near a:hover{border-color:var(--accent-400);
  box-shadow:0 0 12px rgba(145,132,217,.35)}
/* Reduced motion: the row stands fully lit and still. */
@media (prefers-reduced-motion:reduce){.hero .bulbs span{animation:none; opacity:1}}

/* ---- tap areas ---------------------------------------------------------
   Every link a thumb aims at gets at least 44px of height, drawn by an empty
   layer so nothing on the page moves or grows. A venue name can wrap, so its
   layer hangs off the heading, shrunk to the width of its text, and covers
   the words however they break. No layer reaches another link. (The skip
   link's z-index is part of the same fix: focused, it sat under the sticky
   masthead, where nobody could see or tap it.) */
.brand{position:relative}
.brand::after{content:""; position:absolute; inset:-6px 0}
.pick h3{position:relative; width:fit-content}
.near .all{position:relative}  /* its link is a full-width block already */
.hero .byline a{position:relative}  /* a name; the line around it carries dates */
.near .all a::after, .hero .byline a::after, .pick h3 a::after{content:"";
  position:absolute; left:0; right:0}
.near .all a::after{top:-10px; bottom:-10px}
.hero .byline a::after{top:-15px; bottom:-15px}
.pick h3 a::after{top:-9px; bottom:-9px}

/* ---- song-guide links (2026-10-07) ---------------------------------------
   City, day and venue pages end with three song guides (site_guides.py).
   Cards are chrome, so blurple; the bulb on each is light, so it takes the
   gels in turn. */
.guides{padding:56px 0 8px}
.guides h2{font-size:clamp(28px,4vw,40px); line-height:1.1; text-shadow:var(--neon-b)}
.guides .lede{color:var(--muted); max-width:58ch; margin:12px 0 24px; font-size:16.5px}
.guides ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.guides ul a{display:flex; gap:14px; align-items:flex-start; height:100%; min-height:44px;
  padding:18px 18px 18px 16px; background:var(--surface); border:1px solid var(--divider);
  border-radius:var(--r-lg); color:var(--text); text-decoration:none;
  transition:border-color .15s, box-shadow .15s}
.guides ul a:hover{border-color:var(--accent-400); box-shadow:0 0 12px rgba(145,132,217,.35)}
.guides .bulb{flex:none; width:12px; height:12px; margin-top:7px; border-radius:50%;
  background:var(--accent-400); box-shadow:0 0 8px var(--accent), 0 0 18px var(--accent)}
.guides li:nth-child(3n+2) .bulb{background:var(--tube-a); box-shadow:0 0 8px var(--gel-b), 0 0 18px var(--gel-b)}
.guides li:nth-child(3n) .bulb{background:var(--tube-p); box-shadow:0 0 8px var(--gel-a), 0 0 18px var(--gel-a)}
.guides b{display:block; font-size:17.5px; font-weight:500; line-height:1.3}
.guides .hook{display:block; margin-top:5px; font-size:14.5px; line-height:1.45; color:var(--muted)}
.guides .all{margin:18px 0 0; font-size:15px; position:relative}
.guides .all a{color:var(--accent-400); text-decoration:none; position:relative}
.guides .all a::after{content:""; position:absolute; left:0; right:0; top:-12px; bottom:-12px}
@media (prefers-reduced-motion:reduce){.guides ul a{transition:none}}

/* ---- install bar (2026-10-07) --------------------------------------------
   Pinned to the foot of the song guides and day pages for visitors who don't
   get Safari's Smart App Banner (site_js.py decides). One pink tube: the
   page's go-moment. The page is padded by the bar's height, so it never
   covers content. */
.installbar{position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(12,10,20,.94); background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--hairline); box-shadow:0 -12px 30px rgba(0,0,0,.45);
  transform:translateY(100%); transition:transform .28s ease}
.installbar.on{transform:none}
.installbar[hidden]{display:none}
.installbar img{flex:none; width:40px; height:40px; border-radius:10px}
.ib-copy{flex:1; min-width:0; font-size:13.5px; line-height:1.35; color:var(--muted)}
.ib-copy b{display:block; font-size:15px; font-weight:500; color:var(--text)}
.ib-go{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1.5px solid var(--tube-p); border-radius:var(--r-pill); color:#ffe3f1;
  text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;
  text-shadow:0 0 6px rgba(224,85,155,.7);
  box-shadow:0 0 12px rgba(224,85,155,.45), inset 0 0 10px rgba(224,85,155,.14)}
.ib-go:hover{box-shadow:0 0 18px rgba(224,85,155,.65), inset 0 0 12px rgba(224,85,155,.2)}
.ib-go:active{border-color:var(--gel-a)}
.ib-x{flex:none; width:44px; height:44px; margin-right:-10px; display:grid; place-items:center;
  background:none; border:0; border-radius:50%; color:var(--faint); cursor:pointer}
.ib-x:hover{color:var(--text)}
.ib-x svg{width:18px; height:18px}
@media (prefers-reduced-motion:reduce){.installbar{transition:none}}


/* ---- one download button for this phone (site_install.py) ------------- */
.ptube{margin:26px 0 0; display:grid; gap:10px; justify-items:start}
.ptube .pt-phone{display:grid; gap:6px; justify-items:start; width:min(100%,340px)}
.pt-go, .mt-go{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; width:100%; border-radius:999px; background:none;
  text-decoration:none; font-size:17px; font-weight:500; transition:box-shadow .15s}
.pt-pink .pt-go{border:2px solid var(--tube-p); color:#ffe3f1; text-shadow:0 0 6px rgba(224,85,155,.7);
  box-shadow:0 0 14px rgba(224,85,155,.5), 0 0 34px rgba(224,85,155,.18), inset 0 0 12px rgba(224,85,155,.16)}
.pt-pink .pt-go:hover{box-shadow:0 0 20px rgba(224,85,155,.7), 0 0 40px rgba(224,85,155,.25), inset 0 0 14px rgba(224,85,155,.22)}
.pt-pink .pt-go:active{border-color:var(--tube-p)}
.pt-blurple .pt-go, .mt-go{border:2px solid var(--accent-400); color:#f3efff; text-shadow:0 0 6px rgba(145,132,217,.7);
  box-shadow:0 0 12px rgba(145,132,217,.5), 0 0 30px rgba(145,132,217,.16), inset 0 0 12px rgba(145,132,217,.14)}
.pt-blurple .pt-go:hover, .mt-go:hover{box-shadow:0 0 18px rgba(145,132,217,.7), 0 0 36px rgba(145,132,217,.24), inset 0 0 14px rgba(145,132,217,.2)}
.pt-blurple .pt-go:active, .mt-go:active{border-color:var(--accent)}
.pt-go:focus-visible, .mt-go:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.ptube .pt-desk{display:none; gap:16px; align-items:center; justify-items:start}
.pt-scan{display:flex; align-items:center; gap:16px; max-width:420px}
.pt-scan[hidden]{display:none}
.pt-scan p{margin:0; font-size:15px; line-height:1.5; color:var(--muted)}
.pt-qr{flex:none; width:112px; height:112px; padding:6px; border-radius:12px; background:#F3EEFE;
  border:1.5px solid var(--accent-400); box-shadow:0 0 14px rgba(145,132,217,.45)}
.pt-qr svg{display:block; width:100%; height:100%}
@media (min-width:761px){
  .ptube .pt-phone{display:none}
  .ptube .pt-desk{display:grid}
}
/* Once the script knows the device, the device wins over the width. */
.kl-ios .ptube .pt-phone, .kl-android .ptube .pt-phone{display:grid}
.kl-ios .ptube .pt-desk, .kl-android .ptube .pt-desk{display:none}
.kl-desk .ptube .pt-phone{display:none}
.kl-desk .ptube .pt-desk{display:grid}
.maptube{margin:14px 0 0}
.maptube .mt-go{width:auto; min-height:48px; padding:0 24px; font-size:15.5px}
@media (prefers-reduced-motion:reduce){.pt-go, .mt-go{transition:none}}

/* The city guide's bill: the platform tube takes the badges' slot. */
.bill .ptube{grid-area:store; justify-self:end; margin:0; justify-items:end}
.bill .ptube .pt-desk{justify-items:end}
.bill .pt-scan p{max-width:24ch}
@media (max-width:720px){.bill .ptube{justify-self:stretch; justify-items:start}}