:root {
    /* DARK-ONLY while design v2 settles (Todd 2026-08-06); themes return with redesign */
    color-scheme: dark;
    --bg: #131211;
    --surface: #1c1a19;
    --text: #ece8e2;
    --muted: #9a938a;
    --line: #2b2825;
    --accent-a: #ff7a45;
    --accent-b: #e0559a;
    --accent-c: #9b7ff0;
    --spectrum: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
    --chip: #262321;
    --row-hover: #201d1c;
  }
  * { box-sizing: border-box; margin: 0; }
  body { background: var(--bg); color: var(--text);
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: start; }
  .side { position: sticky; top: 66px; }
  .side h2 { margin-top: 40px; }
  .new-day { margin-top: 12px; }
  .new-day .nd-head { font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 2px; }
  .new-item { display: flex; gap: 9px; align-items: center; padding: 6px 0;
              border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
  .ni-art { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; }
  span.ni-art { font-size: 14px; }
  .ni-txt { min-width: 0; }
  .new-item:hover .ni-t { color: var(--accent-b); }
  .ni-t { font-size: 13.5px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; overflow: hidden; }
  .ni-m { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .side { position: static; } }

  /* sticky header with nav + date picker */
  .top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
         backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .top-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: flex;
            align-items: center; gap: 18px; flex-wrap: wrap; }
  .logo-wrap { display: flex; flex-direction: column; gap: 1px; }
  .tagline { font-size: 11px; color: var(--muted); letter-spacing: .03em; padding-left: 1px; }
  .logo { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: inherit; }
  .eq { display: flex; align-items: flex-end; gap: 2.5px; height: 19px; }
  .eq span { width: 4.5px; border-radius: 2px; background: var(--spectrum); background-size: 200% 100%; }
  .eq span:nth-child(1){height:35%; background-position:0% 0}
  .eq span:nth-child(2){height:70%; background-position:20% 0}
  .eq span:nth-child(3){height:100%;background-position:45% 0}
  .eq span:nth-child(4){height:55%; background-position:70% 0}
  .eq span:nth-child(5){height:80%; background-position:100% 0}
  .logo b { font-size: 21px; letter-spacing: -0.4px; font-weight: 800; }
  .logo b em { font-style: normal; font-weight: 400; color: var(--muted); }
  nav { display: flex; gap: 4px; align-items: center; }
  nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 600;
          padding: 6px 10px; border-radius: 8px; }
  nav a:hover { color: var(--text); background: var(--chip); }
  nav a.active { color: var(--text); position: relative; }
  nav a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
                        height: 2.5px; border-radius: 2px; background: var(--spectrum); }
  /* header search */
  .q-wrap { position: relative; margin-left: auto; flex: 0 1 300px; }
  #q { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--line);
       border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 13.5px; }
  #q:focus { outline: none; border-color: var(--accent-b); }
  #q::placeholder { color: var(--muted); }
  .q-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; min-width: 320px;
               background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
               z-index: 30; max-height: 62vh; overflow: auto;
               box-shadow: 0 12px 34px rgba(0,0,0,.55); }
  .q-item { display: block; padding: 8px 12px; text-decoration: none; color: inherit;
            border-bottom: 1px solid var(--line); }
  .q-item:last-child { border-bottom: 0; }
  .q-item:hover, .q-item.sel { background: var(--row-hover); }
  .q-t { font-size: 13.5px; font-weight: 600; }
  .q-m { font-size: 12px; color: var(--muted); }

  .pick { position: relative; display: flex; align-items: center; }
  .cal-btn { display: flex; align-items: center; justify-content: center;
             background: var(--surface); color: var(--muted); border: 1px solid var(--line);
             border-radius: 9px; width: 34px; height: 33px; cursor: pointer; }
  .cal-btn:hover { border-color: var(--accent-b); color: var(--accent-b); }
  .pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                pointer-events: none; border: 0; accent-color: var(--accent-b); }
  .pick input.pick-fallback { position: static; opacity: 1; pointer-events: auto;
                              background: var(--surface); color: var(--text);
                              border: 1px solid var(--line); border-radius: 9px;
                              padding: 6px 10px; font: inherit; font-size: 13.5px;
                              width: auto; height: auto; }

  h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
       margin: 40px 0 4px; font-weight: 650; }
  h2::after { content: ""; display: block; width: 60px; height: 3px; border-radius: 2px;
              background: var(--spectrum); margin-top: 6px; }

  /* hero: today — art cards */
  .hero-cards { margin-top: 10px; display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
          overflow: hidden; text-decoration: none; color: inherit; display: flex;
          flex-direction: column; transition: border-color .15s; }
  .card:hover { border-color: var(--accent-b); }
  .c-art { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
  .c-art-blank { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent-a) 22%, var(--surface)),
      color-mix(in oklab, var(--accent-c) 22%, var(--surface))); }
  .c-art-blank span { font-size: 34px; font-weight: 800; opacity: .5; }
  .c-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
  .c-title { font-weight: 650; font-size: 14px; line-height: 1.3; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .c-meta { color: var(--muted); font-size: 12.5px; }
  .c-foot { margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 12.5px;
            font-variant-numeric: tabular-nums; }
  .hero-rest { margin-top: 10px; }

  /* dense chronological listing */
  .dgroup { margin-top: 18px; }
  .dhead-link { color: inherit; text-decoration: none; }
  .dhead-link:hover { color: var(--accent-b); }
  /* per-day featured strip: the day's biggest shows, between card and row */
  .mini-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
                margin: 10px 0 6px; }
  .mini { display: flex; gap: 10px; align-items: center; background: var(--surface);
          border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px;
          text-decoration: none; color: inherit; min-width: 0;
          transition: border-color .15s; }
  .mini:hover { border-color: var(--accent-b); }
  .mini img, .mini-blank { width: 56px; height: 56px; border-radius: 8px;
                           object-fit: cover; flex: none; }
  .mini-blank { display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; opacity: .85;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent-a) 22%, var(--surface)),
      color-mix(in oklab, var(--accent-c) 22%, var(--surface))); }
  .mini-txt { min-width: 0; }
  .mini-t { font-size: 13.5px; font-weight: 650; line-height: 1.25;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; }
  .mini-m { font-size: 12px; color: var(--muted); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dhead { display: flex; align-items: baseline; gap: 10px; padding: 5px 0 3px;
           border-bottom: 2px solid var(--line); position: relative; }
  .dhead b { font-size: 14.5px; }
  .dhead span { color: var(--muted); font-size: 12.5px; }
  .dhead.is-today b { background: var(--spectrum); -webkit-background-clip: text;
                      background-clip: text; color: transparent; }
  .row { display: grid; grid-template-columns: 44px 62px 1fr 150px 120px 64px;
         gap: 12px; align-items: center; padding: 6.5px 4px; border-bottom: 1px solid var(--line);
         font-variant-numeric: tabular-nums; }
  .row:hover { background: var(--row-hover); }
  .r-art img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }
  .r-art-blank { display: inline-flex; width: 44px; height: 44px; border-radius: 8px;
                 align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
                 color: var(--accent-b);
                 background: color-mix(in oklab, var(--accent-b) 14%, transparent); }
  .r-time { color: var(--muted); font-size: 13px; }
  .r-title { font-weight: 600; font-size: 14.5px; min-width: 0; }
  .r-venue { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
  .r-price { color: var(--muted); font-size: 13px; text-align: right; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
  .r-tix a { font-size: 12.5px; font-weight: 650; color: var(--accent-b); text-decoration: none; }
  .r-tix a:hover { text-decoration: underline; }
  .empty { color: var(--muted); padding: 16px 0; }

  /* calendar */
  .cal-head { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; }
  .cal-head b { font-size: 15px; min-width: 140px; }
  .cal-nav { background: var(--chip); color: var(--text); border: none; border-radius: 8px;
             width: 30px; height: 30px; font-size: 15px; cursor: pointer; }
  .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal .dow { text-align: center; font-size: 10.5px; color: var(--muted); text-transform: uppercase;
              letter-spacing: .08em; padding: 3px 0; }
  .cal .day { aspect-ratio: 1.2; border-radius: 9px; background: var(--surface);
              border: 1px solid var(--line); padding: 5px 7px; font-size: 12.5px; color: var(--muted);
              position: relative; }
  .cal .day.has { cursor: pointer; color: var(--text); }
  .cal .day.has:hover { border-color: var(--accent-b); }
  .cal .day.today .num { color: var(--accent-a); font-weight: 800; }
  .cal .day .num { font-weight: 600; }
  .cal .bars { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 2px;
               align-items: flex-end; height: 12px; }
  .cal .bars i { flex: 1; max-width: 5px; border-radius: 1.5px; background: var(--spectrum);
                 background-size: 300% 100%; }

  /* venue widgets */
  .venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px;
            margin-top: 16px; }
  .venue { background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
           padding: 15px 17px; }
  .venue h3 { font-size: 15.5px; margin-bottom: 1px; }
  .venue .vcity { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
  .venue .vshow { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line);
                  font-size: 13.5px; align-items: baseline; font-variant-numeric: tabular-nums; }
  .venue .vd { color: var(--muted); flex: 0 0 54px; font-size: 12px; }
  .venue .vt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
               -webkit-box-orient: vertical; overflow: hidden; }
  .venue a.vt { color: inherit; text-decoration: none; }
  .venue a.vt:hover { color: var(--accent-b); }

  /* single-day page: previous / next */
  .day-nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
             margin-top: 34px; }
  .day-btn { border: 1px solid var(--line); border-radius: 10px; padding: 8px 15px;
             color: var(--text); text-decoration: none; font-weight: 650;
             font-size: 13.5px; }
  .day-btn:hover { border-color: var(--accent-b); color: var(--accent-b); }
  .day-btn-home { color: var(--muted); }

  footer { margin-top: 60px; color: var(--muted); font-size: 12.5px;
           border-top: 1px solid var(--line); padding-top: 16px; }

  body[data-filter="today"] .hide-when-today { display: none; }

  @media (max-width: 640px) {
    .row { grid-template-columns: 44px 1fr 60px; grid-template-rows: auto auto; gap: 2px 10px;
           padding: 8px 2px; }
    .r-art { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .r-art img, .r-art-blank { width: 44px; height: 44px; }
    .r-title { grid-column: 2; grid-row: 1; }
    .r-tix { grid-column: 3; grid-row: 1; text-align: right; }
    .r-time, .r-venue, .r-price { grid-row: 2; font-size: 12.5px; }
    .r-time { grid-column: 2; min-width: 0; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
    .r-time::after { content: " · " attr(data-venue); }
    .r-venue { display: none; }
    .r-price { grid-column: 3; }
    .venues { grid-template-columns: 1fr; }
    /* search + date button share one row under the nav */
    .q-wrap { margin-left: 0; flex: 1 1 auto; }
    .q-results { left: 0; right: auto; width: calc(100vw - 24px); min-width: 0; }
    .pick { flex: 0 0 auto; }
    /* today cards become a swipeable strip */
    .hero-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
                  overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
                  margin-inline: -14px; padding-inline: 14px; scrollbar-width: none; }
    .hero-cards::-webkit-scrollbar { display: none; }
    .card { scroll-snap-align: start; }
    .c-art { aspect-ratio: 16/9; }
  }
  a.venue-link { text-decoration: none; color: inherit; display: block; }
  a.venue-link:hover { border-color: var(--accent-b); }
  .r-title-link { color: inherit; text-decoration: none; }
  .r-title-link:hover { color: var(--accent-b); }
  /* whole-row click target: title link stretches over the row; tickets stays above it */
  .row { position: relative; cursor: pointer; }
  .r-title-link { color: inherit; text-decoration: none; }
  .r-title-link::after { content: ""; position: absolute; inset: 0; }
  .r-tix { position: relative; z-index: 1; }
  .soldout { color: #ff5a4e; font-size: 11px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .05em; margin-left: 6px; }
  .r-price s { opacity: .55; }

  /* per-performer service icons (event page) */
  .plinks { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .listen-btn { background: none; border: 1px solid var(--line); color: var(--accent-b);
                border-radius: 8px; padding: 2px 10px; font: inherit; font-size: 12px;
                font-weight: 650; cursor: pointer; }
  .listen-btn:hover { border-color: var(--accent-b); }
  .listen-embed { margin: 8px 0 4px; max-width: 460px; }
  .plinks a { color: var(--muted); display: inline-flex; padding: 2px; }
  .plinks a:hover { color: var(--accent-b); }

  /* event detail: text column + promo art (stacks on mobile, art first) */
  .edetail { display: flex; gap: 26px; align-items: flex-start; }
  .ed-main { flex: 1; min-width: 0; }
  .ed-art { flex: 0 0 400px; }
  .ed-art img { width: 100%; border-radius: 10px; display: block; }
  @media (max-width: 700px) {
    .edetail { flex-direction: column-reverse; }
    .ed-art { flex-basis: auto; width: 100%; }
    /* posters are often square/tall: cap them so the show's facts stay above
       the fold, and letterbox (never crop) since flyers carry text */
    .ed-art img { max-height: 40vh; max-height: 40svh; object-fit: contain;
                  object-position: center top; }
  }
  /* performer rows: avatar + name/links */
  .perf { display: flex; gap: 12px; margin-top: 12px; align-items: flex-start; }
  .pava { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }
  .pava-blank { display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--accent-b) 18%, transparent);
    color: var(--accent-b); font-weight: 700; font-size: 18px; text-transform: uppercase; }

  /* event detail facts grid (was inline; classed for responsive control) */
  .dgrid { margin-top: 18px; display: grid; grid-template-columns: 110px 1fr;
           gap: 8px 16px; font-size: 14.5px; }

  /* ------- compact band: half-screen windows (641-980px) -------
     Between the 900px sidebar-stack and the 640px row-collapse the layout kept
     desktop-scale margins and column widths in a single narrow column
     (Todd, 2026-08-25: Firefox at half screen). Densify everything.
     Lower-bounded: written open-ended it also fired on phones and its 6-column
     row grid clobbered the 640px stacked layout (found 2026-08-28). */
  @media (min-width: 641px) and (max-width: 980px) {
    .wrap { padding: 0 14px 56px; }
    h2 { margin: 26px 0 3px; }
    .side h2 { margin-top: 26px; }
    .cols { gap: 22px; }
    .dgroup { margin-top: 13px; }
    .row { grid-template-columns: 40px 54px minmax(0,1fr) 118px 72px 50px;
           gap: 8px; padding: 5px 2px; }
    .r-art img, .r-art-blank { width: 40px; height: 40px; }
    .r-title { font-size: 14px; }
    .r-time, .r-venue, .r-price { font-size: 12.5px; }
    .venues { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
    footer { margin-top: 40px; }
    /* event page */
    .ed-art { flex: 0 0 230px; }
    .edetail { gap: 18px; }
    .dgrid { grid-template-columns: 84px 1fr; gap: 6px 12px; font-size: 13.5px; margin-top: 14px; }
    .perf { gap: 10px; margin-top: 10px; }
    .pava { width: 38px; height: 38px; }
    .pava-blank { font-size: 15px; }
    .plinks { gap: 8px; }
  }
  @media (max-width: 640px) {
    .dgroup { margin-top: 11px; }
    .new-item { padding: 4px 0; }
    .top-in { padding: 7px 12px 8px; gap: 6px 10px; }
    .logo b { font-size: 18px; }
    .pick label { display: none; }
    .pick input { padding: 5px 8px; }
    /* densifications the 641-980 band no longer supplies down here */
    .wrap { padding: 0 14px 56px; }
    h2 { margin: 26px 0 3px; }
    .side h2 { margin-top: 26px; }
    .cols { gap: 22px; }
    footer { margin-top: 40px; }
    .dgrid { grid-template-columns: 84px 1fr; gap: 6px 12px; font-size: 13.5px; margin-top: 14px; }
  }

/* venue page: local OSM map composite */
.vhead { display:flex; gap:26px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap }
.vmap { position:relative; display:block; border-radius:12px; overflow:hidden;
        border:1px solid var(--line); line-height:0; flex:0 1 480px; min-width:260px }
.vmap img { width:100%; height:auto; display:block }
.vmap-credit { position:absolute; right:6px; bottom:5px; font-size:10px; line-height:1;
               color:#333; background:rgba(255,255,255,.75); padding:2px 5px; border-radius:5px }
@media (max-width: 640px) { .vhead { gap:10px } .vmap { flex-basis:100% } }

/* venues index: hero cards */
.venue.venue-link { text-decoration: none; color: inherit; display: block; transition: border-color .15s }
.venue.venue-link:hover { border-color: var(--accent-b) }
.venue.has-hero { padding: 0; overflow: hidden }
.venue .vhero { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block }
.venue.has-hero .vmeta { padding: 11px 17px 13px }
.venue .vmeta .vcity { margin-bottom: 0 }

/* venues index: city jump chips + section heads */
.city-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.city-chips a { display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
                border:1px solid var(--line); border-radius:999px; text-decoration:none;
                color:inherit; font-size:13px; background:var(--surface) }
.city-chips a:hover { border-color: var(--accent-b); color: var(--accent-b) }
.city-chips .chip-n { color: var(--muted); font-size: 11.5px }
.city-head { margin-top:26px; padding-top:10px; font-size:17px; scroll-margin-top:70px }

/* event-type badge: festivals, showcases, jams read differently from concerts */
.etype { display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 9px;
         border:1px solid var(--accent-b); color:var(--accent-b); border-radius:999px;
         font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
         line-height:1.5; white-space:nowrap }
.etype-lg { font-size:12px; padding:3px 12px; position:relative; top:-3px }

/* nav More dropdown: pure CSS (hover + focus-within), works on the static site */
.nav-more { position:relative; display:inline-block }
.nav-more > button { background:none; border:0; color:inherit; font:inherit; cursor:pointer;
                     padding:0; opacity:.85 }
.nav-more > button:hover { opacity:1 }
.nav-more::after { content:""; position:absolute; left:0; right:0; top:100%; height:8px }
.nav-more-menu { display:none; position:absolute; top:calc(100% + 6px); left:-10px; z-index:60;
                 min-width:140px; padding:8px 0; background:var(--surface);
                 border:1px solid var(--line); border-radius:11px;
                 box-shadow:0 8px 24px rgba(0,0,0,.35) }
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu { display:block }
.nav-more-menu a { display:block; padding:7px 16px; white-space:nowrap }
.nav-more-menu a:hover { color:var(--accent-b) }

/* festival grouping: card on /festivals, sibling-day strip on event pages */
.fest-card { border:1px solid var(--line); border-radius:13px; padding:15px 17px;
             margin-top:16px; background:var(--surface) }
.fest-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.fest-head h3 { font-size:16.5px }
.fest-dates { color:var(--muted); font-size:13px }
.fest-site { color:var(--accent-b); text-decoration:none; font-size:13px; font-weight:650 }
.fest-desc { color:var(--muted); font-size:13px; margin:6px 0 4px; line-height:1.55 }
.fest-strip { margin-top:10px; padding:9px 14px; border:1px solid var(--line);
              border-radius:10px; font-size:13.5px; background:var(--surface) }
.fest-strip a { color:var(--accent-b); text-decoration:none }
.fest-days { display:block; margin-top:4px; color:var(--muted) }

/* festivals: big 2-up cards, chronological, with a year divider */
.festgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:16px }
@media (max-width: 720px) { .festgrid { grid-template-columns:1fr } }
.festbig { border:1px solid var(--line); border-radius:14px; overflow:hidden;
           background:var(--surface); display:flex; flex-direction:column }
.festbig .fb-art { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.fb-body { padding:14px 17px 16px }
.fb-body h3 { font-size:18px }
.fb-meta { color:var(--muted); font-size:13px; margin-top:3px }
.fb-meta a { color:var(--accent-b); text-decoration:none; font-weight:650 }
.fb-desc { color:var(--muted); font-size:13px; margin-top:7px; line-height:1.55 }
.fb-days { margin-top:10px; border-top:1px solid var(--line) }
.fb-day { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line);
          text-decoration:none; color:inherit; font-size:13.5px; align-items:baseline }
.fb-day:last-child { border-bottom:0 }
.fb-day:hover .fb-day-bill { color:var(--accent-b) }
.fb-day-date { flex:0 0 76px; color:var(--muted); font-size:12.5px; white-space:nowrap }
.fb-day-bill { min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
               -webkit-line-clamp:2; -webkit-box-orient:vertical }
.year-break { display:flex; align-items:center; gap:14px; margin:26px 0 4px }
.year-break::before, .year-break::after { content:""; flex:1; border-top:1px solid var(--line) }
.year-break span { color:var(--muted); font-weight:700; letter-spacing:.08em; font-size:14px }

/* fest card art: never crop a poster - contain it over a blurred fill.
   Exact-16:9 art fills the frame edge to edge like before. */
.fb-art-wrap { position:relative; display:block; aspect-ratio:16/9; overflow:hidden }
.fb-art-wrap .fb-art-bg { position:absolute; inset:0; width:100%; height:100%;
                          object-fit:cover; filter:blur(22px) brightness(.55) saturate(1.1);
                          transform:scale(1.15) }
.fb-art-wrap .fb-art { position:relative; width:100%; height:100%; object-fit:contain;
                       aspect-ratio:auto }

/* per-festival crop override: fill the frame with the top (or center) of the
   poster instead of containing it (Hip-Hop Summit flyer, 2026-08-31) */
.fb-art-wrap.fb-crop-top .fb-art { object-fit:cover; object-position:top center }
.fb-art-wrap.fb-crop-center .fb-art { object-fit:cover; object-position:center }

/* More button matches its nav siblings exactly (Todd, 2026-08-31) */
.nav-more > button { color: var(--muted); font-size: 13.5px; font-weight: 600;
                     padding: 6px 10px; border-radius: 8px; opacity: 1; line-height: inherit }
.nav-more > button:hover { color: var(--text); background: var(--chip) }

/* link groups on the event page: Listen / Follow / more */
.plinks .lgroup { color:var(--muted); font-size:10.5px; text-transform:uppercase;
                  letter-spacing:.06em; font-weight:700; margin:0 2px 0 8px }
.plinks .lgroup:first-child { margin-left:0 }
.lmore { display:inline-block }
.lmore summary { color:var(--muted); font-size:11.5px; cursor:pointer; list-style:none;
                 display:inline; margin-left:8px }
.lmore summary::after { content:" \25B8"; font-size:9px }
.lmore[open] summary::after { content:" \25BE" }
.lmore span { margin-left:4px }

/* facade player: LOOKS ready, loads nothing from Spotify until pressed */
.sp-facade { display:flex; align-items:center; gap:12px; margin-top:9px; padding:10px 14px;
             max-width:420px; background:#181818; border:1px solid var(--line);
             border-radius:12px; cursor:pointer }
.sp-facade:hover { border-color:#1db954 }
.sp-facade img, .sp-facade .pava-blank { width:56px; height:56px; border-radius:8px;
                                         object-fit:cover; flex:none }
.spf-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px }
.spf-meta b { font-size:14.5px }
.spf-meta span { color:var(--muted); font-size:12px }
.spf-play { width:42px; height:42px; flex:none; border-radius:50%; background:#1db954;
            color:#000; display:flex; align-items:center; justify-content:center;
            font-size:15px; padding-left:3px }
.sp-facade:hover .spf-play { transform:scale(1.06) }

/* topwide: poster at ~84% width, top-centered - shows ~20% more of the art
   than a full-width crop, blur filling the sides (Triple Play, 2026-09-01) */
.fb-art-wrap.fb-crop-topwide .fb-art { width:74%; height:100%; margin:0 auto;
                                       object-fit:cover; object-position:top center;
                                       display:block }

/* Listen/Follow labels pop from the grey icon line (Todd, 2026-09-01) */
.plinks .lgroup { color: var(--accent-b); opacity: .95; background: var(--chip);
                  padding: 2px 8px; border-radius: 6px; font-size: 10px }
.plinks a { opacity: .8 }
.plinks a:hover { opacity: 1 }

/* festival program page */
.fp-stop { border-left:2px solid var(--line); padding:7px 0 7px 14px; margin-top:10px }
.fp-head a { color:var(--accent-b); text-decoration:none; font-weight:650; font-size:15px }
.fp-time { color:var(--muted); font-size:12.5px; margin-left:8px }
.fp-bill { color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.6 }

/* fest program: dense card grid, works inside event pages too */
.fp-day { margin-top:16px; font-size:15px }
.fp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
           gap:10px; margin-top:10px }
.fp-stop { display:block; border:1px solid var(--line); border-left:3px solid var(--line);
           border-radius:10px; padding:10px 13px; text-decoration:none; color:inherit;
           background:var(--surface) }
.fp-stop:hover { border-color:var(--accent-b) }
.fp-stop.fp-here { border-left-color:var(--accent-b) }
.fp-head { display:block }
.fp-head b { color:var(--accent-b); font-size:14.5px }
.fp-time { color:var(--muted); font-size:12px; margin-left:7px }
.fp-you { float:right; color:var(--accent-b); font-size:10px; text-transform:uppercase;
          letter-spacing:.05em; font-weight:700 }
.fp-bill { display:block; color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.55 }


/* free + age filter chips (#36, #40): live on the section header line, right of the eyebrow */
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.sec-head h2 { margin-bottom:0; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 2px; }
.fchip { font:inherit; font-size:11.5px; letter-spacing:.02em; text-transform:uppercase; padding:3px 9px; border-radius:4px;
  border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; line-height:1.4; }
.fchip:hover { color:var(--text, inherit); border-color:var(--line); }
.fchip.on { color:var(--text, inherit); border-color:var(--accent-b); box-shadow: inset 0 -2px 0 var(--accent-b); }
.fchip:focus-visible { outline:2px solid var(--accent-b); outline-offset:2px; }
.fsep { width:1px; height:14px; background:var(--line); margin:0 3px; }
.fnote { flex-basis:100%; font-size:11.5px; color:var(--muted); margin:2px 0 0; }
.dgroup.f-none .mini-cards { display:none; }
.dgroup.f-none .dhead { opacity:.5; }
@media (max-width: 640px) { .sec-head { align-items:flex-start; } .filters { width:100%; } }

/* the hidden attribute must beat .row/.card display rules (filters toggle el.hidden) */
[hidden] { display: none !important; }