/* Setlist Lizard ... With — show page styles. Generated pages link this. */
.crumb { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
  .crumb a { color:var(--muted); }
  .glance { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem; max-width:820px; margin:0 auto 2rem; }
  .stat { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; text-align:center; }
  /* Inter, not Fraunces: the serif was both hard to read at a glance and wide
     enough that a long single word ("Tweezerfest") ran out of its tile. */
  .stat .n { font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1.45rem;
             font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--accent-soft);
             font-variant-numeric:tabular-nums; overflow-wrap:break-word; }
  .stat .l { font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
  .board { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.8rem; max-width:820px; margin:0 auto; }
  .setblock { margin-top:1.4rem; }
  .setblock:first-child { margin-top:0; }
  .setname { font-family:"Fraunces",Georgia,serif; color:var(--accent-soft); font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:.4rem; margin-bottom:.6rem; display:flex; justify-content:space-between; }
  .setname .sl { color:var(--muted); letter-spacing:.08em; }
  .board ol { list-style:none; margin:0; padding:0; }
  .srow { padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .srow:last-child { border-bottom:none; }
  .sline { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; }
  .sline .tr { color:var(--muted); }
  .sline .fn { color:var(--accent-soft); font-size:.8em; }
  .sline .len { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.88rem; white-space:nowrap; }
  .lenbar { height:3px; background:var(--accent); opacity:.5; border-radius:2px; margin-top:.3rem; transition:opacity .15s ease; }
  .srow:hover .lenbar { opacity:1; }
  .srow.big .lenbar { opacity:.85; }
  .fnlist { margin-top:1.4rem; color:var(--muted); font-size:.85rem; line-height:1.7; }
  .fnlist p { margin:.25rem 0; }
  .shownote { margin-top:1.4rem; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:.85rem 1.05rem; color:var(--muted); font-size:.9rem; line-height:1.6; }
  .tube { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.6rem; }
  .tube .lab { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem; display:inline-block; margin-bottom:.9rem; }
  .tube ul { list-style:none; margin:0; padding:0; }
  .tube li { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.92rem; }
  .tube li:last-child { border-bottom:none; }
  .tube .x { color:var(--accent-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tube .cav { margin-top:1rem; font-size:.76rem; color:var(--muted); line-height:1.6; }
  .srcs { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem; max-width:820px; margin:0 auto; }
  .srcs a { display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem; color:var(--text); font-size:.88rem; transition:border-color .15s ease, transform .15s ease; }
  .srcs a:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
  .srcs .w { display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }
  /* Show-to-show navigation. These were plain text links tucked under the
     setlist; as buttons they read as the primary way to walk the run. */
  .pager { display:flex; justify-content:space-between; gap:1rem; max-width:820px; margin:2.4rem auto 0; font-size:.85rem; }
  .pager a { display:flex; align-items:center; gap:.5rem; min-width:0; flex:1;
             background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
             padding:.75rem 1.05rem; color:var(--text); line-height:1.35;
             transition:border-color .15s ease, transform .15s ease, color .15s ease; }
  .pager a:last-child { justify-content:flex-end; text-align:right; }
  .pager a:only-child { flex:0 1 auto; }
  .pager a:hover { border-color:var(--accent); color:var(--accent-soft); transform:translateY(-2px); text-decoration:none; }
  .pager a .pg-l { display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .pager a .pg-v { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pager > span:empty { flex:1; }
  @media (max-width:560px) { .pager a .pg-v { white-space:normal; } }
  .srcline { text-align:center; color:var(--muted); font-size:.78rem; margin-top:2.4rem; line-height:1.7; letter-spacing:.05em; }
  .srcline a { color:var(--muted); }

/* ---- v2: song links, energy curve, song pages ---- */
a.song-t { color: var(--text); }
a.song-t:hover { color: var(--accent-soft); text-decoration: none; }

.curvewrap { max-width:820px; margin:1.2rem auto 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem 0.6rem; }
.curvehead { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  font-family:"Fraunces",Georgia,serif; color:var(--accent-soft); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:.4rem; margin-bottom:.7rem; }
.curvehead .ch-sub { font-family:Inter,sans-serif; font-size:.7rem; letter-spacing:.04em; text-transform:none; color:var(--muted); }
svg.ec { display:block; width:100%; overflow:visible; }
.ec-line { fill:none; stroke:var(--accent); stroke-width:1.6; stroke-opacity:.75; stroke-linejoin:round; }
.ec-dot { fill:var(--accent); fill-opacity:.85; cursor:pointer; transition:r .12s ease, fill-opacity .12s ease; }
.ec-dot:hover { r:6; fill-opacity:1; }
.ec-dot.big { fill:var(--accent-soft); }
.ec-div { stroke:var(--border); stroke-width:1; }
.ec-set { font-size:9px; fill:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.ec-y { font-size:9px; fill:var(--muted); text-anchor:end; font-variant-numeric:tabular-nums; }

.plc { display:flex; align-items:center; gap:.7rem; padding:.3rem 0; font-size:.9rem; }
.plc .pl { width:5.5rem; color:var(--muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.plc .pbar { flex:1; height:8px; background:rgba(255,255,255,.05); border-radius:4px; overflow:hidden; }
.plc .pbar i { display:block; height:100%; background:var(--accent); opacity:.8; }
.plc .pn { width:2rem; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; }

.vlist { display:flex; flex-direction:column; gap:.3rem; }
a.vrow { display:block; padding:.5rem .2rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text); }
a.vrow:last-child { border-bottom:none; }
a.vrow:hover { text-decoration:none; background:rgba(255,255,255,.02); }
.vtop { display:flex; align-items:baseline; gap:.7rem; }
.vtop .vd { font-weight:600; width:3.6rem; }
.vtop .vv { flex:1; color:var(--muted); font-size:.88rem; }
.vtop .vs { color:var(--muted); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.vtop .vl { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.88rem; width:3.2rem; text-align:right; }
.vbar { height:3px; background:var(--accent); opacity:.45; border-radius:2px; margin-top:.3rem; }
a.vrow.big .vbar { opacity:.85; background:var(--accent-soft); }
a.vrow:hover .vbar { opacity:1; }
.vfn { color:var(--muted); font-size:.8rem; margin-top:.25rem; }
.board .cav { margin-top:1.2rem; font-size:.78rem; color:var(--muted); line-height:1.6; }

/* ---- v4: credits page, top pager ---- */
/* The pager repeats above the setlist because the bottom one was easy to miss
   on a long night. Same markup, tighter margins, quieter until hovered. */
.pager.top { margin:0 auto 1.4rem; font-size:.8rem; }
.pager.top a { padding:.5rem .9rem; }

.credit { max-width:820px; margin:0 auto 1.1rem; background:var(--card); border:1px solid var(--border);
          border-left:3px solid var(--accent); border-radius:var(--radius); padding:1.2rem 1.5rem; }
.credit-k { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
a.credit-n { display:inline-block; font-family:"Fraunces",Georgia,serif; font-size:1.5rem;
             color:var(--accent-soft); margin:.15rem 0 .5rem; }
a.credit-n:hover { text-decoration:underline; }
.credit p { color:var(--muted); font-size:.92rem; line-height:1.7; margin:.55rem 0 0; }
.credit p:first-of-type { margin-top:0; }

.faq { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--border);
       border-radius:var(--radius); padding:.6rem 1.5rem 1.4rem; }
.qa { padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.qa:last-child { border-bottom:none; }
.qa h3 { font-family:"Fraunces",Georgia,serif; font-size:1.02rem; font-weight:600; color:var(--text); margin:0 0 .45rem; }
.qa p { color:var(--muted); font-size:.92rem; line-height:1.7; margin:0; }
.mus { color:var(--accent-soft); }

/* ---- v5: facelift, mobile pass, inline player, Lab pies ---- */

/* A whisper of warmth at the top of every card — same accent, stretched. */
.board, .tube, .lp {
  background-image:linear-gradient(180deg, rgba(240,118,92,.05), rgba(240,118,92,0) 130px);
}
.stat { transition:border-color .15s ease, transform .15s ease; }
.stat:hover { border-color:var(--accent); transform:translateY(-2px); }

/* Mobile: the board should read like a setlist in your pocket, not a
   shrunken desktop page. */
@media (max-width:640px) {
  /* The site nav's off-canvas <ul> widens the document by ~60px on phones
     (pre-existing, from the global stylesheet); clip it so the setlist
     never side-scrolls. */
  html, body { overflow-x:hidden; }
  .glance { grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .stat { padding:.6rem .55rem; }
  .stat .n { font-size:1.2rem; }
  .board { padding:1.05rem .95rem; }
  .tube { padding:1.05rem .95rem; }
  .pager { gap:.5rem; }
  .pager a { padding:.55rem .7rem; }
  .pager a .pg-v { white-space:normal; font-size:.8rem; }
  .sline { flex-wrap:wrap; row-gap:.15rem; }
  .sline .len { margin-left:auto; }
  .curvewrap { padding:.8rem .8rem .4rem; }
  .lz-play { width:28px; height:28px; }
}

/* Play buttons, injected by lizard.js beside every ♫. */
.lz-play {
  width:22px; height:22px; padding:0; margin-left:.5rem; vertical-align:middle;
  border:1px solid var(--accent); border-radius:50%; background:transparent;
  color:var(--accent-soft); font-size:.6rem; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.lz-play:hover { background:var(--accent); color:#fff; transform:scale(1.08); }
.lz-play.on { background:var(--accent); color:#fff; }

/* The player bar. Fixed to the bottom, attribution built in. */
#lizard-player {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem max(.95rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(13,17,23,.96); border-top:1px solid var(--accent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
body.lz-open { padding-bottom:74px; }
.lz-main {
  flex:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--accent); background:var(--card); color:var(--accent-soft);
  font-size:.95rem; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.lz-main:hover { background:var(--accent); color:#fff; }
.lz-meta { min-width:0; flex:0 1 15rem; }
.lz-title { font-weight:600; font-size:.87rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lz-sub { font-size:.66rem; letter-spacing:.05em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lz-sub a { color:var(--accent-soft); }
.lz-seek { flex:1 1 auto; min-width:70px; accent-color:var(--accent); height:4px; cursor:pointer; }
.lz-time { flex:none; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lz-x { flex:none; background:none; border:none; color:var(--muted); font-size:1.25rem; line-height:1; cursor:pointer; padding:.2rem .4rem; }
.lz-x:hover { color:var(--text); }
@media (max-width:560px) {
  .lz-time { display:none; }
  .lz-meta { flex:1 1 auto; }
  .lz-seek { flex:1 1 100%; order:5; }
  #lizard-player { flex-wrap:wrap; row-gap:.35rem; }
  body.lz-open { padding-bottom:96px; }
}

/* Lab pies. */
.labpies {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(236px, 1fr));
  gap:1rem; max-width:820px; margin:1rem auto 0;
}
.lp { background-color:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.lp h4 {
  font-family:"Fraunces",Georgia,serif; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-soft); margin:0 0 .2rem;
}
.lp .lps { font-size:.69rem; color:var(--muted); line-height:1.5; margin:0 0 .75rem; }
.lp .lpc { display:flex; align-items:center; gap:.9rem; }
.lp svg { width:104px; flex:none; display:block; overflow:visible; }
.lp ul { list-style:none; margin:0; padding:0; flex:1; min-width:0; font-size:.75rem; }
.lp li { display:flex; align-items:baseline; gap:.45rem; padding:.13rem 0; color:var(--muted); }
.lp li i { width:8px; height:8px; border-radius:2px; flex:none; transform:translateY(1px); }
.lp li b { color:var(--text); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp li .n { margin-left:auto; font-variant-numeric:tabular-nums; }
.lp .lpe { font-size:.73rem; color:var(--muted); line-height:1.6; margin:0; }
@media (max-width:520px) { .labpies { grid-template-columns:1fr; } }