/* A pick here has no schedule strip — just a title, an artist, a reason, and
   an optional line for who sings what on a duet or group page. Two columns
   instead of the city guide's three. */
.picks .pick{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:860px){.picks .pick{grid-template-columns:minmax(0,1fr)}}
.pick .with{display:block; margin-top:6px; font-size:14px; color:var(--ghost);
  font-style:italic}
/* The kicker sits above the h1 as its own line (2026-10-07), so the h1 is
   only the guide's name. Same look as the city guides' in-h1 kicker. */
.hero p.kicker{font-family:var(--mono); text-transform:uppercase; font-weight:500;
  font-size:clamp(13px,1.8vw,15px); letter-spacing:.28em; line-height:1;
  color:var(--accent-400); text-shadow:0 0 8px rgba(145,132,217,.6); margin:0 0 16px}
/* A question-length title, not a city name: sign-lit, but sized to wrap well. */
.hero h1 .city{font-size:clamp(40px,7vw,84px); line-height:1.08}

.sl{display:flex; flex-wrap:wrap; gap:0 8px; margin:4px 0 0; padding:0}
.sl a{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px 0 10px; color:var(--secondary,#b3abcc);
  font:500 12.5px/1 var(--body,Inter,system-ui,sans-serif); letter-spacing:.02em; text-decoration:none; position:relative}
.sl a::before{content:""; position:absolute; left:0; right:0; top:8px; bottom:8px; border-radius:999px;
  border:1px solid rgba(var(--sl,145,132,217),.38); background:rgba(var(--sl,145,132,217),.06); transition:border-color .15s, background-color .15s}
.sl a:hover::before, .sl a:focus-visible::before{border-color:rgba(var(--sl,145,132,217),.75); background:rgba(var(--sl,145,132,217),.12)}
.sl a:active::before{background:rgba(var(--sl,145,132,217),.2)}
.sl a:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:2px; border-radius:999px}
.sl a span{position:relative}
.sl .yt{position:relative; width:auto; height:17px; aspect-ratio:396/277.4; margin:0 1px; flex:none}
.sl .ly{position:relative; width:15px; height:15px; color:var(--slc,var(--accent-400,#b5abfc)); flex:none}

/* "+ Keep": the same quiet pill, the app's own verb. Kept, it lights blurple. */
.sl .kp{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px 0 10px; position:relative;
  background:none; border:0; cursor:pointer; color:var(--text,#f3eefe); font:500 12.5px/1 var(--body,Inter,system-ui,sans-serif); letter-spacing:.02em}
.sl .kp[hidden]{display:none}
.sl .kp::before{content:""; position:absolute; left:0; right:0; top:8px; bottom:8px; border-radius:999px;
  border:1px solid rgba(145,132,217,.55); background:rgba(145,132,217,.06); transition:border-color .15s, box-shadow .15s}
.sl .kp:hover::before{border-color:rgba(145,132,217,.85)}
.sl .kp[aria-pressed="true"]::before{border-color:var(--accent-400,#b5abfc); box-shadow:0 0 10px rgba(145,132,217,.5), inset 0 0 8px rgba(145,132,217,.18)}
.sl .kp:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:2px; border-radius:999px}
.sl .kp-i, .sl .kp-l{position:relative}
.sl .kp-i{width:15px; height:15px; fill:none; stroke:var(--accent-400,#b5abfc); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.sl .kp .kp-on, .sl .kp[aria-pressed="true"] .kp-add{display:none}
.sl .kp[aria-pressed="true"] .kp-on{display:block}
/* The keep bar: the install bar's place, once something is kept. Amber: the
   singer's own songs. */
.keepbar{position:fixed; left:0; right:0; bottom:0; z-index:51; 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,.95); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--hairline,#2e2644); box-shadow:0 -12px 30px rgba(0,0,0,.45)}
.keepbar[hidden], .kl-keeping .installbar{display:none !important}
.kb-copy{flex:1; min-width:0; margin:0; font-size:13.5px; line-height:1.35; color:var(--muted,#b3abcc)}
.kb-copy b{display:block; font-size:15px; font-weight:500; color:var(--text,#f3eefe)}
.kb-list{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-go{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
  border:1.5px solid var(--tube-a,#ffd49a); color:#fff1dc; text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;
  text-shadow:0 0 6px rgba(232,162,74,.7); box-shadow:0 0 12px rgba(232,162,74,.45), inset 0 0 10px rgba(232,162,74,.14)}
.kb-go:hover{box-shadow:0 0 18px rgba(232,162,74,.65), inset 0 0 12px rgba(232,162,74,.2)}
.kb-go:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sl .kp::before{transition:none}}

.occart svg, .sw .mo svg{display:block; width:100%; height:100%; overflow:visible; fill:var(--body-fill,#1b1530); stroke:var(--tl);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(var(--t),.9)) drop-shadow(0 0 8px rgba(var(--t),.45))}
.occart svg *, .sw .mo svg *{transform-box:fill-box}
.occart svg g[transform], .sw .mo svg g[transform]{transform-box:view-box}
.occart svg .eye, .sw .mo svg .eye{fill:var(--tl); stroke:none}
.occart svg .no, .sw .mo svg .no{fill:none}
.occart svg .wash, .sw .mo svg .wash{fill:rgba(var(--t),.28)}
.occart svg .bare, .sw .mo svg .bare{stroke:none}
.occart svg .hub, .sw .mo svg .hub{stroke:none; fill:var(--body-fill,#1b1530)}
.occart svg .fac, .sw .mo svg .fac{stroke-width:1.2; opacity:.75}
.occart svg .glint, .sw .mo svg .glint{fill:#fff}
.occart svg .tip, .sw .mo svg .tip{fill:var(--tube-a)}
.occart svg .thick, .sw .mo svg .thick{stroke-width:3}
.occart svg .s0, .sw .mo svg .s0{stroke:var(--tube-b)} .occart svg .s1, .sw .mo svg .s1{stroke:var(--tube-a)}
.occart svg .s2, .sw .mo svg .s2{stroke:var(--tube-p)}
.occart.flk svg{stroke:#f3eefe} .occart.flk svg .eye{fill:#f3eefe}

.occ{--body-fill:#1b1530}
.occ .hero .occart{display:block; width:84px; height:84px; margin:-4px 0 18px}
.occ .hero .occart svg{stroke-width:1.9; filter:drop-shadow(0 0 3px rgba(var(--t),.9)) drop-shadow(0 0 12px rgba(var(--t),.5))}
@media (min-width:861px){.occ .hero .occart{width:96px; height:96px}}
.occ .hero p.kicker{color:var(--tl); text-shadow:0 0 8px rgba(var(--t),.6)}
.occ .hero h1 .city{color:color-mix(in srgb,var(--tl) 40%,#fff);
  text-shadow:0 0 4px #fff,0 0 14px rgb(var(--t)),0 0 36px rgb(var(--t)),0 0 80px rgba(var(--t),.45)}
.occ .beam.b1{background:radial-gradient(closest-side,rgba(var(--t),.16),transparent)}
.occ .beam.b2{background:radial-gradient(closest-side,rgba(var(--t2),.1),transparent)}
.occ .districts a{border-color:var(--tl); box-shadow:0 0 10px rgba(var(--t),.45),inset 0 0 8px rgba(var(--t),.1)}
.occ .districts a:hover{box-shadow:0 0 16px rgba(var(--t),.6),inset 0 0 12px rgba(var(--t),.15)}
.occ .districts .dot{background:var(--tl); box-shadow:0 0 8px rgb(var(--t)),0 0 18px rgb(var(--t))}
.occ .district .eyebrow{color:var(--tl); text-shadow:0 0 8px rgba(var(--t),.7)}
.occ .eyebrow::after{background:rgba(var(--t),.35)}
.occ .district h2{color:color-mix(in srgb,var(--tl) 40%,#fff); text-shadow:0 0 3px #fff,0 0 12px rgb(var(--t)),0 0 30px rgba(var(--t),.5)}
.occ .essay h2, .occ .faq h2, .occ .near h2{text-shadow:0 0 10px rgba(var(--t),.75),0 0 26px rgba(var(--t),.35)}
.occ .intro p:nth-child(n){border-left-color:rgba(var(--t),.55)}
.occ .pick{border-top-color:rgba(var(--t),.22)} .occ .pick:last-child{border-bottom-color:rgba(var(--t),.22)}
.occ .faq details, .occ .faq details:first-of-type{border-color:rgba(var(--t),.22)}
.occ .sl{--sl:var(--t); --slc:var(--tl)}