/* /karaoke (tools/build_karaoke_index.py): the country with its lights on.
   The one hero in motion is the map's lights coming on, east to west, once. */
:root{--card:#120f1e; --soft:#d7d1ea; --kicker:#a49dbb; --chip-line:#332c47; --r-card:12px;
  --dek-ink:#e9e5ff; --pink-fill:#ffe3f1; --amber-fill:#fff1dc; --blurple-fill:#f3efff;
  --core-b:#d9d3ff; --core-a:#ffe1b3; --core-p:#ffc2de}
html{scroll-behavior:smooth}
body{overflow-x:clip}
.ico{width:1em; height:1em; display:inline-block; vertical-align:-.12em; fill:currentColor; flex:none}
.needs-js{display:none}
.js .needs-js{display:block}
.js .nojs-only{display:none}
section[id], [id^="s-"]{scroll-margin-top:88px}

/* ---- hero ---- */
.lights{position:relative; overflow:hidden; background:var(--night); border-bottom:1px solid var(--hairline)}
.lights .beam.b1{left:-14%; top:-10%; width:70%; height:80%; background:radial-gradient(closest-side, rgba(145,132,217,.14), transparent)}
.lights .beam.b2{right:-12%; top:30%; width:64%; height:80%; background:radial-gradient(closest-side, rgba(232,162,74,.07), transparent)}
.lights .beam.b3{left:30%; bottom:-30%; top:auto; width:60%; height:70%; transform:none; filter:none; clip-path:none;
  border-radius:50%; background:radial-gradient(closest-side, rgba(224,85,155,.10), transparent)}
.lights > .wrap{position:relative; z-index:2; padding:16px 0 34px}
.lights .crumb{margin:0 0 18px}
.lights h1{line-height:1.02}
.lights h1 .k{display:block; font-family:var(--body); text-transform:uppercase; font-weight:500;
  font-size:12.5px; letter-spacing:.22em; color:var(--accent-400); text-shadow:0 0 8px rgba(145,132,217,.6); margin:0 0 12px}
.lights h1 .big{display:block; font-size:clamp(46px,11.5vw,88px); color:var(--pink-fill);
  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)}
.lights .dek{color:var(--dek-ink); font-size:clamp(16.5px,2vw,19px); line-height:1.6; max-width:52ch; margin:18px 0 0}
.hero-grid{display:grid; gap:22px 48px; align-items:center; grid-template-areas:"copy" "map" "find"}
.hero-copy{grid-area:copy} .hero-map{grid-area:map} .hero-find{grid-area:find}
@media (min-width:900px){
  .lights > .wrap{padding:22px 0 44px}
  .hero-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr); grid-template-areas:"copy map" "find map"; row-gap:0}
  .hero-map{align-self:center}
  .lights h1 .big{font-size:clamp(56px,6.4vw,84px)}
}

/* The map: a bulb per guide on a dark floor. Light only: the SVG is
   aria-hidden and its links are duplicates of the list for a mouse. */
.map{position:relative; aspect-ratio:600/352; width:100%; max-width:640px; margin:12px auto 0}
.map svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.map .inset{fill:none; stroke:var(--hairline); stroke-width:1; stroke-dasharray:3 4}
/* the country, faint and still: a floor a shade off the night, a hairline coast */
.map .us path{fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.map .us .land{fill:var(--bg); fill-rule:evenodd; stroke:var(--accent-600); stroke-opacity:.5; stroke-width:1px}
.map .us .lines{stroke:var(--accent-800); stroke-opacity:.6; stroke-width:.75px}
.map .h{opacity:.32}
.map .h.b{fill:var(--accent)} .map .h.a{fill:var(--gel-b)} .map .h.p{fill:var(--gel-a)}
.map .c.b{fill:var(--core-b)} .map .c.a{fill:var(--core-a)} .map .c.p{fill:var(--core-p)}
.map .hits a circle{fill:transparent; cursor:pointer}
.map .hits{display:none}
@media (hover:hover) and (min-width:900px){ .map .hits{display:block} }
.map .lbl{position:absolute; font-size:11.5px; line-height:1; color:var(--kicker); letter-spacing:.02em;
  white-space:nowrap; pointer-events:none; transform:translate(10px,-50%);
  text-shadow:0 0 3px var(--night), 0 0 3px var(--night), 0 0 5px var(--night), 0 0 5px var(--night)}
@media (max-width:899px){ .map svg{left:3%; width:94%} .map .c{r:4.8px} .map .h{r:12px} }
.map .lbl.l{transform:translate(calc(-100% - 10px),-50%)}
.map .lbl.b{transform:translate(-50%,9px)}
.map .lbl.a{transform:translate(-50%,calc(-100% - 9px))}
.map .lbl.d{display:none}
.map .inset-lbl{transform:none; font-size:10.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
.map .inset-lbl.above{transform:translateY(-100%)}
@media (min-width:900px){ .map .lbl{font-size:12.5px} .map .lbl.d{display:block} }
@media (max-width:420px){ .map .lbl{font-size:10.5px} }
.map .tip{position:absolute; transform:translate(-50%,calc(-100% - 14px)); background:var(--card);
  border:1px solid var(--divider); color:var(--text); font-size:13px; line-height:1; padding:8px 10px;
  border-radius:var(--r-md); white-space:nowrap; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.map .h, .map .c{opacity:0; animation:lamp .55s ease-out forwards; animation-delay:calc(var(--i) * 11ms)}
.map .c{animation-name:lampcore}
@keyframes lamp{from{opacity:0} 60%{opacity:.5} to{opacity:.32}}
@keyframes lampcore{from{opacity:0} 60%{opacity:1} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .map .h, .map .c{animation:none}
  .map .h{opacity:.32} .map .c{opacity:1}
  html{scroll-behavior:auto}
}
.map-cap{color:var(--muted); font-size:14.5px; max-width:44ch; margin:10px auto 0; text-align:center}
.map-more{margin:4px auto 0; text-align:center; font-size:14.5px}
.map-more a{display:inline-flex; align-items:center; min-height:44px; color:var(--accent-400); text-decoration:none}
.map-more a:hover{text-decoration:underline}
@media (min-width:900px){ .map-cap, .map-more{text-align:left; margin-left:0} }

/* The sign-up line: a KJ's clipboard, as a field. Neutral chrome, blurple focus. */
.signup{margin:4px 0 0}
@media (min-width:900px){ .signup{margin-top:28px} }
.signup label{display:block; font-size:15.5px; color:var(--soft); margin:0 0 10px}
.field{position:relative}
.field .ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--kicker); pointer-events:none}
.field input{width:100%; height:54px; padding:0 16px 0 50px; font:inherit; font-size:17px; color:var(--text);
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--r-card); outline:0;
  -webkit-appearance:none; appearance:none}
.field input::placeholder{color:var(--faint)}
.field input:focus{border-color:var(--accent-400); box-shadow:0 0 0 1px var(--accent-400), 0 0 14px rgba(145,132,217,.4)}
.field input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.nomatch{margin:12px 0 0; color:var(--muted); font-size:15px; max-width:48ch}
/* [hidden] has to beat .row's display:flex, or a filtered-out row stays put */
.row[hidden], .state[hidden], .region[hidden]{display:none}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* the results, right under the box you're typing in */
.results{list-style:none; margin:10px 0 0; padding:0; border:1px solid var(--divider); border-radius:var(--r-card);
  background:var(--card); overflow:hidden}
.results li{display:flex; align-items:center; gap:10px; padding:0 12px 0 0; border-top:1px solid var(--hairline)}
.results li:first-child{border-top:0}
.results .hit{flex:1; min-width:0; display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 0 8px 14px;
  color:var(--text); text-decoration:none; font-size:17px; font-weight:500}
.results .hit span{color:var(--muted); font-weight:400; font-size:15px}
.results .hit:hover, .results .hit:focus-visible{color:#fff}
.results .bulb{width:9px; height:9px; border-radius:50%; flex:none}
.results .bulb.b{background:var(--accent-400); box-shadow:0 0 9px var(--accent)}
.results .bulb.a{background:var(--tube-a); box-shadow:0 0 9px var(--gel-b)}
.results .bulb.p{background:var(--tube-p); box-shadow:0 0 9px var(--gel-a)}
.results .tn{width:48px; min-height:44px}
.more-below{margin:8px 0 0; font-size:14.5px}
.more-below a{display:inline-flex; align-items:center; min-height:44px; color:var(--accent-400); text-decoration:none}
/* while there's a query the map lights only what matches */
.map.filtering .h, .map.filtering .c{opacity:.08; animation:none; transition:opacity .2s}
.map.filtering .h.on{opacity:.55} .map.filtering .c.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .map.filtering .h, .map.filtering .c{transition:none} }
.jump{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.jump a{display:inline-flex; align-items:center; min-height:44px; padding:0 15px; border:1px solid var(--chip-line);
  border-radius:var(--r-pill); color:var(--muted); text-decoration:none; font-size:14px; line-height:1}
.jump a:hover{color:var(--text); border-color:var(--divider)}

/* ---- tonight: one sentence, the weekday in lights ---- */
.tonight-line{border-bottom:1px solid var(--hairline)}
.tonight-line .wrap{display:flex; align-items:center; gap:14px; padding:18px 0}
.tonight-line .ico{font-size:28px; color:var(--accent-400); filter:drop-shadow(0 0 8px rgba(145,132,217,.6))}
.tonight-line p{margin:0; font-size:15.5px; color:var(--muted); line-height:1.45}
.tonight-line .day{font-family:var(--display); font-size:19px; color:var(--blurple-fill); text-shadow:var(--neon-b)}

/* ---- regions ---- */
.region{padding:40px 0 10px}
.region + .region{border-top:1px solid var(--hairline)}
.rhead h2{font-size:clamp(30px,4.6vw,38px); color:var(--blurple-fill); text-shadow:var(--neon-b); line-height:1.1}
.rhead p{color:var(--muted); font-size:15.5px; max-width:60ch; margin:8px 0 0}
.states{margin:18px 0 0}
.state{margin:0 0 14px; break-inside:avoid}
.state h3{font-family:var(--body); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kicker); padding:14px 0 4px}
.state ul{list-style:none; margin:0; padding:0}
.row{display:flex; align-items:center; gap:12px; border-top:1px solid var(--hairline)}
.row:last-child{border-bottom:1px solid var(--hairline)}
.row .city{flex:1; min-width:0; display:flex; align-items:center; gap:14px; min-height:64px; padding:11px 0;
  color:var(--text); text-decoration:none}
.row .city b{display:block; font-size:18px; font-weight:500; letter-spacing:-.005em; line-height:1.25}
.row .city .hook{display:block; color:var(--muted); font-size:15.5px; line-height:1.4; margin-top:3px}
.row .city:hover b{color:#fff}
.row .bulb{width:9px; height:9px; border-radius:50%; flex:none; align-self:flex-start; margin-top:9px}
.row .bulb.b{background:var(--accent-400); box-shadow:0 0 9px var(--accent)}
.row .bulb.a{background:var(--tube-a); box-shadow:0 0 9px var(--gel-b)}
.row .bulb.p{background:var(--tube-p); box-shadow:0 0 9px var(--gel-a)}
/* A state page's row: a ring, not a lit bulb (it has no light on the map). */
.row .bulb.s, .results .bulb.s{background:none; border:1.5px solid var(--accent-400); box-shadow:0 0 6px rgba(145,132,217,.45)}
/* The tonight sign: big icon over a small label, blurple = a working action. */
.tn{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:52px; min-height:50px; padding:5px 0; border:1.5px solid rgba(181,171,252,.62); border-radius:var(--r-card);
  color:var(--dek-ink); text-decoration:none; box-shadow:0 0 10px rgba(145,132,217,.22), inset 0 0 8px rgba(145,132,217,.08)}
.tn .ico{font-size:22px}
.tn span{font-size:11px; line-height:1; letter-spacing:.04em; color:var(--muted)}
.tn:hover, .tn:focus-visible{border-color:var(--accent-400); color:var(--blurple-fill);
  box-shadow:0 0 16px rgba(145,132,217,.6), inset 0 0 12px rgba(145,132,217,.18)}
@media (min-width:900px){
  .region{padding:48px 0 18px}
  .rhead{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:6px 44px; align-items:end}
  .rhead p{margin:0 0 6px}
  .states{columns:2; column-gap:44px; margin-top:22px}
  /* A region that is one state (California) splits its rows instead of its states. */
  .region.solo .states{columns:auto}
  .region.solo .state ul{columns:2; column-gap:44px}
  .region.solo .row{break-inside:avoid}
  .region.solo .state ul li:first-child{border-top:0}
  .region.solo .state h3{border-bottom:1px solid var(--hairline)}
}

/* ---- the handoff to the app ---- */
.handoff{margin:48px 0 0; background:var(--night); border-top:1px solid var(--hairline); position:relative; overflow:hidden}
.handoff .beam.b1{left:-14%; top:-10%; width:70%; height:80%; background:radial-gradient(closest-side, rgba(145,132,217,.14), transparent)}
.handoff .beam.b3{left:30%; bottom:-30%; top:auto; width:60%; height:70%; transform:none; filter:none; clip-path:none;
  border-radius:50%; background:radial-gradient(closest-side, rgba(224,85,155,.10), transparent)}
.handoff .wrap{position:relative; z-index:1; padding:44px 0 52px}
.handoff .lamps{display:flex; gap:14px; margin:0 0 22px; padding:0; list-style:none}
.handoff .lamps li{width:8px; height:8px; border-radius:50%}
.handoff .lamps li:nth-child(3n+1){background:var(--accent-400); box-shadow:0 0 9px var(--accent)}
.handoff .lamps li:nth-child(3n+2){background:var(--tube-a); box-shadow:0 0 9px var(--gel-b)}
.handoff .lamps li:nth-child(3n){background:var(--tube-p); box-shadow:0 0 9px var(--gel-a)}
.handoff .lamps li:nth-child(even){opacity:.55}
.handoff h2{font-size:clamp(30px,5vw,40px); line-height:1.1; color:var(--amber-fill); text-shadow:var(--neon-a)}
.handoff h2 span{display:block; color:var(--pink-fill); text-shadow:var(--neon-p)}
.handoff p{color:var(--soft); font-size:17px; max-width:50ch; margin:16px 0 0}
.handoff .stores{margin:24px 0 0; justify-content:flex-start}
.handoff .fine{color:var(--faint); font-size:14px; margin-top:12px}