/* band_page — the public catalog at /:slug. Neutral "quiet tool" skin;
   bands recolor via CSS variables (--bp-accent from Visuals), never layout.
   Native nesting: everything inside .band-page{} compiles to ".band-page X". */

body.band-page{
  --bp-ink:#1d1d1b; --bp-muted:#66686d; --bp-faint:#9b9da3;
  --bp-page:#faf9f7; --bp-card:#fff; --bp-line:#e4e2dc;
  --bp-accent:#b06f14; --bp-accent-ink:#fff; --bp-accent-soft:#f6efe1;
  --bp-ok:#16a34a; --bp-hot:#ea580c; --bp-r:12px;
  --bp-topbar:rgba(255,255,255,.86);
  --bp-veil-a:rgba(255,255,255,.15); --bp-veil-b:rgba(255,255,255,.7);
  --bp-font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bp-font-head:var(--bp-font-body);
  --bp-head-transform:none; --bp-head-spacing:-.02em;
  background:var(--bp-page); color:var(--bp-ink); min-height:100vh; line-height:1.55;
  font-family:var(--bp-font-body);
}

/* Dark mode — "more metal". Same layout, flipped palette; the Visuals theme
   panel switches this via the theme-dark body class. */
body.band-page.theme-dark{
  --bp-ink:#e9e7e2; --bp-muted:#a3a19c; --bp-faint:#71706b;
  --bp-page:#131315; --bp-card:#1c1c1f; --bp-line:#2c2c31;
  --bp-accent-soft:#2a2317;
  --bp-topbar:rgba(19,19,21,.86);
  --bp-veil-a:rgba(19,19,21,.15); --bp-veil-b:rgba(19,19,21,.82);
}
body.band-page.cards-glass .card{backdrop-filter:blur(10px)}

/* Cover photo: full-bleed hero strip under the topbar. */
.band-page .hero{max-height:360px; overflow:hidden; border-bottom:1px solid var(--bp-line)}
.band-page .hero img{width:100%; height:360px; object-fit:cover; display:block}
@media (max-width:700px){ .band-page .hero, .band-page .hero img{height:200px} }

body.band-page::after{content:none}
body.band-page h1, body.band-page h2, body.band-page h3{
  font-family:var(--bp-font-head); text-transform:var(--bp-head-transform);
  text-shadow:none; letter-spacing:var(--bp-head-spacing)}
body.band-page a{color:var(--bp-accent)}
body.band-page a:hover{text-underline-offset:3px}
body.band-page :focus-visible{outline:2px solid var(--bp-accent); outline-offset:2px; border-radius:4px}

@keyframes bp-pulse{0%{box-shadow:0 0 0 0 rgba(234,88,12,.35)} 100%{box-shadow:0 0 0 8px rgba(234,88,12,0)}}

.band-page{
  .topbar{position:sticky; top:0; z-index:10;
    background:var(--bp-topbar); backdrop-filter:blur(8px); border-bottom:1px solid var(--bp-line);

    .in{max-width:1080px; margin:0 auto; padding:var(--s3) var(--s5);
      display:flex; align-items:center; gap:var(--s5)}
    nav{display:flex; gap:var(--s4); margin-left:auto; flex-wrap:wrap}
    nav a{color:var(--bp-muted); font-size:.875rem; font-weight:500; padding:6px 2px}
    nav a:hover{color:var(--bp-ink); text-decoration:none}
    .cta{background:var(--bp-accent); color:var(--bp-accent-ink);
      font-size:.875rem; font-weight:600; padding:8px 14px; border-radius:8px}
    .cta:hover{filter:brightness(1.08); text-decoration:none}
    .cta.is-following{background:var(--bp-accent-soft); color:var(--bp-accent)}
  }
  .brand{font-weight:700; font-size:.9375rem; letter-spacing:-.01em; color:var(--bp-ink)}
  /* identity slot: logo at a fixed height, or the name in the page's type */
  .brand-mark{display:block; height:26px; width:auto; max-width:180px; object-fit:contain}
  .brand-name{font-family:var(--bp-font-head, inherit); text-transform:var(--bp-head-transform, none);
    letter-spacing:var(--bp-head-spacing, -.01em); font-size:1.0625rem}

  .wrap{max-width:1080px; margin:0 auto; padding:var(--s6) var(--s5) var(--s7)}
  .grid{display:grid; grid-template-columns:320px 1fr; gap:var(--s5); align-items:start}
  .rail{position:sticky; top:72px}

  .card{background:var(--bp-card); border:1px solid var(--bp-line); border-radius:var(--bp-r);
    box-shadow:0 1px 2px rgba(17,18,20,.05); margin-bottom:var(--s4); overflow:hidden; padding:0}
  .card .pad{padding:var(--s5)}
  .label{font-family:var(--bp-font-head); font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    color:var(--bp-faint); margin-bottom:var(--s3)}

  .photo{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bp-line)}
  /* infobox photo (2026-07-29): square, full rail width, focal-point crop */
  .photo.sq{aspect-ratio:1/1}
  .ib-photo{position:relative}
  /* optional logo overlay on the lower third; scrim tone opposes the logo
     tone so black-or-white marks stay legible on any photo */
  .ib-logo{position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none;
    display:flex; align-items:flex-end; justify-content:center; padding:0 8% 6%}
  .ib-logo img{max-height:70%; max-width:72%; object-fit:contain} /* 70% of 40% ≈ the 28% cap */
  .ib-logo.tone-light{background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55))}
  .ib-logo.tone-dark{background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.6))}
  .prev-wrap summary{cursor:pointer; list-style:none}
  .prev-wrap summary::-webkit-details-marker{display:none}
  .prev-wrap summary::after{content:"▸"; margin-left:6px; font-size:.7em}
  .prev-wrap[open] summary::after{content:"▾"}
  .booking-line{margin-top:var(--s3)}
  h1{font-size:1.75rem; font-weight:700; line-height:1.2}
  .meta-line{color:var(--bp-muted); font-size:.9375rem; margin-top:var(--s1)}
  .status{display:flex; flex-direction:column; gap:6px; margin-top:var(--s3)}
  .badge{display:inline-flex; align-items:center; gap:6px;
    font-size:.8125rem; font-weight:600; color:var(--bp-ok)}
  .badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bp-ok)}
  .badge.hot{color:var(--bp-hot)}
  .badge.hot::before{background:var(--bp-hot); animation:bp-pulse 1.6s ease-out infinite}

  .follow-row{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4)}
  .follow-row input{font:inherit; font-size:.9375rem; color:var(--bp-ink);
    border:1px solid var(--bp-line); border-radius:8px; padding:11px 12px; width:100%; background:var(--bp-page)}
  .follow-row input::placeholder{color:var(--bp-faint)}
  .btn{font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; text-align:center;
    background:var(--bp-accent); color:var(--bp-accent-ink); border:none; border-radius:8px;
    padding:12px; min-height:44px; width:100%; display:block; text-decoration:none}
  .btn:hover{filter:brightness(1.08); text-decoration:none}
  .fineprint{font-size:.75rem; color:var(--bp-faint); margin-top:var(--s2)}
  .links{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4); font-size:.9375rem}
  dl.facts{font-size:.875rem; display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4)}
  dl.facts dt{color:var(--bp-muted); font-weight:500; white-space:nowrap}
  dl.facts dd{margin:0}

  .mrow{display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0}
  .mrow:first-of-type{padding-top:0}
  .mrow .nm{font-weight:600; font-size:.9375rem; line-height:1.3}
  .mrow .rl{color:var(--bp-muted); font-size:.8125rem}
  /* previous members: same row, dimmed — opacity keeps every theme legal */
  .mrow.former{opacity:.55}
  .former-label{margin-top:var(--s3)}
  .ava{width:28px; height:28px; border-radius:50%; background:var(--bp-accent-soft);
    color:var(--bp-accent); display:inline-flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; flex:none}
  .ava.big{width:44px; height:44px; font-size:1rem; border:1px solid var(--bp-line)}

  .player{padding:var(--s5); border-bottom:1px solid var(--bp-line)}
  .now{display:flex; gap:var(--s4); align-items:center}
  .art{width:72px; height:72px; border-radius:8px; object-fit:cover; flex:none;
    background:linear-gradient(135deg,var(--bp-accent-soft),var(--bp-accent))}
  .now .t{font-weight:700; font-size:1.125rem}
  .now .a{color:var(--bp-muted); font-size:.875rem}
  .transport{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4)}
  .tbtn{width:40px; height:40px; border-radius:50%; cursor:pointer;
    background:transparent; border:1px solid var(--bp-line); color:var(--bp-ink); font-size:.875rem}
  .tbtn:hover{border-color:var(--bp-ink)}
  .tbtn.play{width:52px; height:52px; background:var(--bp-ink); color:var(--bp-page); border:none; font-size:1.05rem}
  .tbtn.play:hover{background:var(--bp-accent)}
  .seek{flex:1; height:6px; border-radius:3px; background:var(--bp-line); position:relative; cursor:pointer}
  .seek i{position:absolute; top:0; bottom:0; left:0; width:0; background:var(--bp-accent); border-radius:3px}
  .seek b{position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%;
    background:var(--bp-card); border:2px solid var(--bp-accent); transform:translate(-50%,-50%)}
  .clock{font-size:.8125rem; color:var(--bp-muted); font-variant-numeric:tabular-nums; white-space:nowrap}

  table.tracks{width:100%; border-collapse:collapse}
  table.tracks th{font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--bp-faint); text-align:left; padding:var(--s2) var(--s4);
    background:var(--bp-page); border-bottom:1px solid var(--bp-line)}
  table.tracks td{padding:var(--s3) var(--s4); border-bottom:1px solid var(--bp-line);
    font-size:.9375rem; vertical-align:baseline}
  table.tracks tr:last-child td{border-bottom:0}
  table.tracks tbody tr{cursor:pointer}
  table.tracks tbody tr:hover{background:var(--bp-page)}
  table.tracks tr.on{background:var(--bp-accent-soft)}
  table.tracks tr.on .name{font-weight:600; color:var(--bp-accent)}
  table.tracks .alb{color:var(--bp-muted); font-size:.875rem; white-space:nowrap}
  table.tracks .len{color:var(--bp-muted); font-size:.875rem; font-variant-numeric:tabular-nums; text-align:right}
  table.tracks th.r, table.tracks td.r{text-align:right}
  .chip{font-size:.8125rem; font-weight:600; color:var(--bp-accent);
    border:1px solid var(--bp-line); border-radius:999px; padding:4px 12px}
  .chip:hover{background:var(--bp-accent); color:#fff; border-color:var(--bp-accent); text-decoration:none}
  .buyline{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
    padding:var(--s4) var(--s5); background:var(--bp-page); flex-wrap:wrap}
  .buyline .note{font-size:.8125rem; color:var(--bp-muted)}
  .btn-lg{font:inherit; font-weight:600; font-size:.9375rem; cursor:pointer;
    background:var(--bp-accent); color:#fff; border:none; border-radius:8px; padding:11px 18px;
    border-radius:8px 0 8px 8px; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)}
  .btn-lg:hover{filter:brightness(1.08)}

  .show{display:flex; align-items:baseline; gap:var(--s4);
    padding:var(--s3) var(--s5); border-bottom:1px solid var(--bp-line); font-size:.9375rem}
  .show:last-child{border-bottom:0}
  .show .d{font-weight:600; width:7rem; white-space:nowrap; font-variant-numeric:tabular-nums}
  .show .v{flex:1}
  .show .c{color:var(--bp-muted); font-size:.875rem; white-space:nowrap}

  .sync{margin-left:var(--s2); font-size:.6875rem; font-weight:600; letter-spacing:.03em;
    color:var(--bp-muted); background:var(--bp-page); border:1px solid var(--bp-line);
    border-radius:999px; padding:3px 10px; vertical-align:1px}
  .vgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); padding:var(--s4) var(--s5) var(--s5)}
  .vid.main{grid-column:1/-1}
  .thumb{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
    background:#2a2b31 center/cover no-repeat; display:block}
  .thumb::after{content:"▶"; position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; color:#fff; font-size:1.5rem; background:rgba(17,18,20,.25);
    text-shadow:0 1px 4px rgba(0,0,0,.4); transition:background .15s}
  .thumb:hover::after{background:rgba(17,18,20,.45)}
  .vid .vt{font-weight:600; font-size:.9375rem; margin-top:var(--s2); line-height:1.35; color:var(--bp-ink)}
  .vid.main .vt{font-size:1.0625rem}
  .vid .vm{color:var(--bp-muted); font-size:.8125rem; margin-top:2px}
  .vid:hover{text-decoration:none}

  .prose p{max-width:64ch; margin-bottom:var(--s3); color:#2c2d30}
  .prose p:last-child{margin-bottom:0}
  .empty{color:var(--bp-muted); font-style:italic}

  /* photos section */
  .bp-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:var(--s4)}
  .bp-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block}

  /* floating channel dock */
  .dock{position:fixed; right:20px; bottom:20px; z-index:30;
    width:340px; max-width:calc(100vw - 32px);
    background:var(--bp-card); border:1px solid var(--bp-line); border-radius:14px;
    box-shadow:0 12px 40px rgba(17,18,20,.18); display:flex; flex-direction:column; overflow:hidden}
  .dock>header{display:flex; align-items:center; gap:var(--s2);
    padding:var(--s3) var(--s4); border-bottom:1px solid var(--bp-line)}
  .dock>header b{font-size:.875rem}
  .dock>header .hotdot{width:8px; height:8px; border-radius:50%; background:var(--bp-hot);
    animation:bp-pulse 1.6s ease-out infinite; flex:none}
  .dock>header time{font-size:.75rem; color:var(--bp-faint)}
  .dock>header .min{margin-left:auto; border:none; background:none; color:var(--bp-faint);
    font-size:1.1rem; cursor:pointer; line-height:1; padding:2px 6px}
  .dock>header .min:hover{color:var(--bp-ink)}
  .dock.minimized .dockbody, .dock.minimized .dockcta{display:none}
  .dock.minimized>header{border-bottom:0}
  .dockbody{max-height:44vh; overflow:auto; padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
  .msg{display:flex; gap:var(--s2); align-items:flex-start}
  .msg .ava{width:24px; height:24px; font-size:.6875rem}
  .msg .bubble{background:var(--bp-page); border:1px solid var(--bp-line); border-radius:10px;
    padding:var(--s2) var(--s3); font-size:.875rem; min-width:0}
  .msg .who2{font-size:.75rem; color:var(--bp-muted); margin-bottom:2px}
  .msg .who2 b{color:var(--bp-ink)}
  .lockzone{position:relative; display:flex; flex-direction:column; gap:var(--s3)}
  .lockzone .msg{filter:blur(5px); pointer-events:none; user-select:none}
  .veil{position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, var(--bp-veil-a), var(--bp-veil-b));
    font-size:.8125rem; font-weight:600; color:var(--bp-ink); text-align:center; padding:var(--s3)}
  .clip{display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s3);
    border:1px solid var(--bp-line); border-radius:8px; padding:var(--s2) var(--s3);
    font-size:.875rem; background:var(--bp-card); flex-wrap:wrap}
  .clip audio{height:30px; max-width:200px}
  .clip .nodl{font-style:normal; font-size:.6875rem; color:var(--bp-faint);
    border-left:1px solid var(--bp-line); padding-left:var(--s2); margin-left:var(--s1)}
  .dockcta{padding:var(--s3) var(--s4); border-top:1px solid var(--bp-line)}
  .dockcta .btn{padding:10px; min-height:40px; font-size:.875rem}
  .dockcta small{display:block; text-align:center; color:var(--bp-faint); font-size:.6875rem; margin-top:var(--s1)}

  footer{border-top:1px solid var(--bp-line); margin-top:var(--s6); background:none; padding:0}
  footer .in{max-width:1080px; margin:0 auto; padding:var(--s5);
    display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
    font-size:.8125rem; color:var(--bp-muted)}

  .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
    background:var(--bp-ink); color:#fff; font-size:.875rem; padding:10px 18px; border-radius:999px;
    box-shadow:0 8px 30px rgba(0,0,0,.3)}
}

/* the cycle band — the release's temporary shout, above everything.
   Dark treatment over the art works on both themes; vars only for accents. */
.band-page .cycle-band{position:relative; overflow:hidden; background:#141416; color:#f4f1ea}
.band-page .cycle-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6}
.band-page .cycle-bg.blurred{filter:blur(28px) brightness(.7); transform:scale(1.15)}
.band-page .cycle-band::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,12,.82), rgba(10,10,12,.45) 55%, rgba(10,10,12,.7))}
.band-page .cycle-in{position:relative; max-width:1200px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:18px}
.band-page .cycle-art{width:72px; height:72px; border-radius:8px; object-fit:cover; flex:none;
  box-shadow:0 6px 20px rgba(0,0,0,.5)}
.band-page .cycle-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.band-page .cycle-when{font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bp-accent, #e2705a)}
.band-page .cycle-band.live .cycle-when{color:#7fd18a}
.band-page .cycle-headline{font-size:1.25rem; font-weight:800; letter-spacing:-.01em; line-height:1.15;
  font-family:var(--bp-font-head, inherit)}
.band-page .cycle-tagline{font-size:.875rem; opacity:.85}
.band-page .cycle-edition{font-size:.75rem; opacity:.65}
.band-page .cycle-cta{margin-left:auto; display:flex; gap:10px; flex:none}
.band-page .cycle-cta .btn{display:inline-block; font-weight:700; font-size:.875rem; padding:10px 18px;
  border-radius:8px; text-decoration:none}
.band-page .cycle-go{background:var(--bp-accent, #e2705a); color:#fff}
.band-page .cycle-play{background:rgba(255,255,255,.14); color:#f4f1ea; border:1px solid rgba(255,255,255,.25)}
@media (max-width:700px){
  .band-page .cycle-in{flex-wrap:wrap; gap:12px}
  .band-page .cycle-cta{margin-left:0; width:100%}
  .band-page .cycle-cta .btn{flex:1; text-align:center}
}

/* mobile — canonical breakpoints 560/700/860 */
@media (max-width:860px){
  .band-page .grid{grid-template-columns:1fr}
  .band-page .rail{position:static}
  /* infobox collapses above the spine: photo stays square + full width,
     the fact list reads as a two-column table */
  .band-page dl.facts{grid-template-columns:auto 1fr; column-gap:var(--s5)}
}
@media (max-width:560px){
  .band-page .vgrid{grid-template-columns:1fr}
}

/* cover-palette recoloring: the player wears the sleeve of the playing song.
   Kept AFTER the nested block — same-specificity ties resolve by order. */
.band-page .player{transition:background .5s}
.band-page .player .tbtn.play{
  background:var(--pl-accent, #111214); color:var(--pl-contrast, #fff);
  border-color:var(--pl-accent, #111214); transition:background .5s, color .5s;
}
.band-page .player .seek i{background:var(--pl-accent, var(--bp-accent, #111214)); transition:background .5s}
.band-page .player .seek b{border-color:var(--pl-accent, var(--bp-accent, #111214))}
.band-page #tracklist tr.on{box-shadow:inset 4px 0 0 var(--pl-accent, var(--bp-accent, #111214))}