/* ============================================================
   Inspir3 Radio Player — styles.css
   Black / grey / white base, five switchable accents, no gradients.
   Copyright 2026 www.inspir3radio.com. All Right Reserved.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#000000;
  --bg-1:#0a0a0a;
  --bg-2:#121212;
  --bg-3:#181818;
  --bg-4:#232323;
  --bg-5:#2e2e2e;
  --line:#2a2a2a;
  --line-2:#3a3a3a;

  --text:#ffffff;
  --text-2:#c9c9c9;
  --muted:#9a9a9a;
  --muted-2:#6e6e6e;

  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.16);
  --accent-line:rgba(34,197,94,.42);
  --on-accent:#00140a;

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;

  --side-w:368px;
  --right-w:332px;
  --player-h:84px;
  --gap:8px;

  --shadow:0 8px 28px rgba(0,0,0,.6);
  --ease:cubic-bezier(.2,.7,.3,1);
}

html[data-accent="purple"]{ --accent:#a855f7; --accent-soft:rgba(168,85,247,.16); --accent-line:rgba(168,85,247,.42); --on-accent:#0a0010; }
html[data-accent="yellow"]{ --accent:#facc15; --accent-soft:rgba(250,204,21,.16); --accent-line:rgba(250,204,21,.42); --on-accent:#140f00; }
html[data-accent="green"] { --accent:#22c55e; --accent-soft:rgba(34,197,94,.16);  --accent-line:rgba(34,197,94,.42);  --on-accent:#00140a; }
html[data-accent="pink"]  { --accent:#ec4899; --accent-soft:rgba(236,72,153,.16); --accent-line:rgba(236,72,153,.42); --on-accent:#160009; }
html[data-accent="orange"]{ --accent:#fb923c; --accent-soft:rgba(251,146,60,.16); --accent-line:rgba(251,146,60,.42); --on-accent:#150800; }
html[data-accent="blue"]  { --accent:#3b82f6; --accent-soft:rgba(59,130,246,.16); --accent-line:rgba(59,130,246,.42); --on-accent:#00102b; }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* a display rule must never beat the hidden attribute */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 "Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
h1,h2,h3,h4,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* feather-style icons */
.ic{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.85;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic.flip{ transform:rotate(180deg); }
.ic.big{ width:44px; height:44px; }
.ic.tiny{ width:14px; height:14px; vertical-align:-2px; opacity:.6; }
.ic-dim{ color:var(--muted-2); width:19px; height:19px; }
body.locked{ overflow:hidden; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:999px; cursor:pointer;
  padding:10px 18px; font-weight:650; font-size:14px; white-space:nowrap;
  background:var(--bg-4); color:var(--text);
  transition:transform .12s var(--ease), background .15s var(--ease), opacity .15s;
}
.btn:hover{ background:var(--bg-5); transform:translateY(-1px); text-decoration:none; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn .ic{ width:20px; height:20px; }
.btn-accent{ background:var(--accent); color:var(--on-accent); }
.btn-accent:hover{ background:var(--accent); filter:brightness(1.1); }
.btn-grey{ background:var(--bg-4); }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:var(--bg-3); color:var(--text); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn-xl{ padding:15px 30px; font-size:16px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:color .15s, background .15s, transform .12s var(--ease);
}
.icon-btn:hover{ color:var(--text); background:var(--bg-4); }
.icon-btn:active{ transform:scale(.93); }
.linkish{ background:none; border:0; padding:0; color:var(--muted); cursor:pointer; text-decoration:underline; }
.linkish:hover{ color:var(--text); }

.live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); display:inline-block;
  animation:pulse 1.9s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.muted{ color:var(--muted); }

@keyframes fadeOut{ to{ opacity:0; visibility:hidden; } }

/* ============================================================
   AFFILIATE BUY BUTTONS
   ============================================================ */
.buy{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.buy-sm{ margin-top:7px; gap:6px; }
.buy-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:650;
  background:var(--bg-4); border:1px solid var(--line-2); color:var(--text-2);
  transition:all .15s var(--ease);
}
.buy-btn:hover{
  text-decoration:none; color:var(--on-accent);
  background:var(--accent); border-color:var(--accent);
}
.buy-btn .ic{ width:16px; height:16px; }
.buy-sm .buy-btn{ padding:5px 11px; font-size:11.5px; }
.buy-sm .buy-btn .ic{ width:13px; height:13px; }
.aff-note{ color:var(--muted-2); }

/* ============================================================
   GENRE CHIPS
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip{
  padding:8px 15px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:650;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--muted);
  transition:all .15s var(--ease);
}
.chip:hover{ color:var(--text); border-color:var(--muted-2); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ============================================================
   LIVE CHAT
   ============================================================ */
.chat-fab{
  position:fixed; right:18px; bottom:calc(var(--player-h) + 18px); z-index:70;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; box-shadow:var(--shadow);
  transition:transform .15s var(--ease), filter .15s;
}
.chat-fab:hover{ transform:scale(1.08); filter:brightness(1.1); }
.chat-fab.is-hidden{ display:none; }
.chat-fab .ic{ width:27px; height:27px; }

.chat{
  position:fixed; right:18px; bottom:calc(var(--player-h) + 16px); z-index:75;
  width:min(456px,calc(100vw - 36px));
  max-height:min(760px,calc(100vh - var(--player-h) - 36px));
  display:flex; flex-direction:column;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
  animation:slideUp .26s var(--ease) both;
}
.chat[hidden]{ display:none; }
.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 10px 14px 18px; border-bottom:1px solid var(--line);
  background:var(--bg-1); flex:none;
}
.chat-head h2{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:720; }
.chat-head h2 .ic{ color:var(--accent); width:21px; height:21px; }
.chat-count{ font-size:11.5px; font-weight:500; color:var(--muted-2); }
.chat-head-btns{ display:flex; gap:2px; }

.chat-join{ padding:18px; overflow-y:auto; }
.chat-join-lede{ font-size:13px; color:var(--text-2); line-height:1.65; margin-bottom:16px; }
.chat-join .field label{ font-size:12px; }
.chat-join .check{ margin:4px 0 16px; font-size:12.3px; }
.chat-join .check a{ color:var(--accent); text-decoration:underline; }
.chat-rules{
  margin-top:14px; font-size:11.5px; color:var(--muted-2); line-height:1.6;
  border-top:1px solid var(--line); padding-top:12px;
}

.chat-room{ display:flex; flex-direction:column; min-height:0; flex:1; }
.chat-log{
  flex:1; overflow-y:auto; padding:18px 18px 10px;
  display:flex; flex-direction:column; gap:15px; min-height:260px;
}
.chat-empty{ color:var(--muted-2); font-size:13px; text-align:center; padding:30px 10px; }
.chat-msg{ display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:start; }
.chat-av{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-4); color:var(--muted); font-size:13px; font-weight:750;
}
.chat-msg.is-mine .chat-av{ background:var(--accent); color:var(--on-accent); }
.chat-bubble{
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:4px 12px 12px 12px; padding:9px 13px; min-width:0;
}
.chat-msg.is-mine .chat-bubble{ border-color:var(--accent-line); background:var(--accent-soft); }
.chat-who{
  font-size:12px; font-weight:700; color:var(--accent);
  display:flex; align-items:baseline; gap:8px; margin-bottom:3px;
}
.chat-who time{ font-size:10.5px; font-weight:400; color:var(--muted-2); }
.chat-text{ font-size:13.6px; line-height:1.55; color:var(--text); word-break:break-word; }

.chat-form{
  display:flex; gap:9px; padding:12px 14px; border-top:1px solid var(--line);
  background:var(--bg-1); flex:none;
}
.chat-form input{
  flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:999px; padding:11px 16px; font-size:14px; outline:0;
  transition:border-color .15s;
}
.chat-form input:focus{ border-color:var(--accent); }
.chat-form .play-btn{ width:40px; height:40px; }
.chat-form .play-btn .ic{ width:18px; height:18px; }
.chat-foot{
  padding:0 16px 12px; font-size:11px; color:var(--muted-2); background:var(--bg-1); flex:none;
}
.chat-foot a{ color:var(--muted-2); text-decoration:underline; }

/* ============================================================
   ACCOUNTS
   ============================================================ */
.me-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 14px 5px 6px; border-radius:999px; font-size:13px; font-weight:650;
  background:var(--bg-4); border:1px solid var(--line-2); color:var(--text);
  transition:all .15s var(--ease); max-width:180px;
}
.me-btn:hover{ background:var(--bg-5); border-color:var(--muted-2); }
.me-btn .ic{ width:19px; height:19px; margin-left:7px; }
.me-av{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--bg-3); flex:none; }
.me-name{
  display:inline-flex; align-items:center; gap:5px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vbadge{ width:15px; height:15px; color:var(--accent); flex:none; }

.auth-tabs{ margin-bottom:20px; }
.auth-why{
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  border-radius:var(--r-sm); padding:11px 14px; font-size:13px; margin-bottom:18px;
}
.auth-lede{ color:var(--muted); font-size:13.2px; line-height:1.65; margin-bottom:16px; }
.auth-alt{ margin-top:16px; text-align:center; font-size:12.5px; }
.auth-done{
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  border-radius:var(--r-sm); padding:14px 16px; font-size:13.5px; line-height:1.6;
}
.hint{ margin-top:6px; font-size:11.5px; color:var(--muted-2); line-height:1.55; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-group{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.field-group span{ letter-spacing:0; text-transform:none; font-size:11.5px; color:var(--muted-2); }
.modal-card-sm{ width:min(460px,100%); }

/* photo picker */
.av-row{ display:flex; gap:18px; align-items:flex-start; margin-bottom:20px; }
.av-shot{
  width:104px; height:104px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--bg-3); border:2px solid var(--line-2);
}
.av-shot img{ width:100%; height:100%; object-fit:cover; }
.av-side{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; min-width:0; }
.av-side .btn{ cursor:pointer; }

/* chat sign-in gate */
.chat-gate{ text-align:center; padding:18px 6px 6px; }
.chat-gate .ic{ width:34px; height:34px; color:var(--accent); margin:0 auto 12px; }
.chat-gate h3{ font-size:16px; font-weight:720; margin-bottom:8px; }
.chat-gate p{ font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:18px; }
.chat-gate-btns{ display:flex; flex-direction:column; gap:9px; }
.chat-gate-btns .btn{ width:100%; justify-content:center; }
img.chat-av{ object-fit:cover; }

/* ============================================================
   ABOUT POP-UP
   ============================================================ */
.about-p{ font-size:14.2px; line-height:1.72; color:var(--text-2); margin-bottom:14px; }
.about-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie{
  position:fixed; z-index:95; left:12px; right:12px; bottom:12px;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow);
  animation:slideUp .35s var(--ease) both;
}
@keyframes slideUp{ from{ transform:translateY(18px); opacity:0 } }
.cookie[hidden]{ display:none; }
.cookie-ic{ color:var(--accent); padding-top:2px; }
.cookie-ic .ic{ width:26px; height:26px; }
.cookie h2{ font-size:15px; font-weight:700; margin-bottom:5px; }
.cookie p{ font-size:12.5px; color:var(--text-2); line-height:1.6; max-width:78ch; }
.cookie-links{ margin-top:7px; }
.cookie-links a{ color:var(--accent); text-decoration:underline; }
.cookie-btns{ display:flex; flex-direction:column; gap:8px; min-width:168px; }
.cookie-btns .btn{ justify-content:center; width:100%; }
abbr{ text-decoration:underline dotted; cursor:help; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{
  position:fixed; inset:0 0 var(--player-h) 0;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  gap:var(--gap); padding:var(--gap);
}
.panel{
  background:var(--bg-2); border-radius:var(--r-lg);
  border:1px solid var(--line); min-height:0;
}
.side{ display:flex; flex-direction:column; gap:var(--gap); background:none; border:0; min-height:0; }

/* left sidebar */
.panel-brand{ padding:16px 12px 12px; }
.brand{ display:block; padding:4px 10px 14px; }
.brand:hover{ text-decoration:none; opacity:.85; }
.brand-logo{ width:122px; }
.nav li a{
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:var(--r-sm);
  color:var(--muted); font-weight:650; font-size:14.5px;
  transition:color .15s, background .15s;
}
.nav li a:hover{ color:var(--text); background:var(--bg-3); text-decoration:none; }
.nav li a.is-on{ color:var(--text); background:var(--bg-3); }
.nav li a.is-on .ic{ color:var(--accent); }
.nav-sub li a{ font-size:14px; padding:9px 12px; }

.panel-lib{ flex:1; display:flex; flex-direction:column; min-height:0; padding:14px 12px 12px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:0 10px 10px; }
.panel-head h2{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.lib-scroll{ flex:1; overflow-y:auto; margin-top:8px; padding-right:2px; min-height:0; }
.lib-item{
  display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center;
  padding:7px 8px; border-radius:var(--r-sm); cursor:default;
}
.lib-item:hover{ background:var(--bg-3); }
.lib-item img{ width:40px; height:40px; border-radius:6px; object-fit:cover; background:var(--bg-4); }
.lib-item b{ display:block; font-size:13.5px; font-weight:600; }
.lib-item span{ display:block; font-size:12px; color:var(--muted); }
.lib-item b, .lib-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-cta{
  margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:999px; border:1px solid var(--line-2);
  font-size:13px; font-weight:650; color:var(--text-2);
}
.side-cta:hover{ background:var(--bg-3); color:var(--text); text-decoration:none; }

/* main column */
.main{ display:flex; flex-direction:column; overflow:hidden; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--line); flex:none;
}
.topbar-l{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
.topbar-r{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.searchbox{
  display:flex; align-items:center; gap:9px; margin-left:6px;
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:999px; padding:9px 16px; color:var(--muted);
  /* shrinks instead of pushing the buttons off the edge */
  flex:1 1 auto; min-width:0; max-width:340px;
}
.searchbox:focus-within{ border-color:var(--accent-line); color:var(--text); }
.searchbox input{ background:none; border:0; outline:0; width:100%; font-size:14px; }
.searchbox input::placeholder{ color:var(--muted-2); }

.topbar-brand{ display:none; flex:none; padding:2px 4px; }
.topbar-brand img{ width:96px; }
.topbar-brand:hover{ opacity:.8; text-decoration:none; }
.view-search{ display:none; width:100%; max-width:none; margin:0 0 20px; }

.accents{ display:flex; align-items:center; gap:6px; padding-right:6px; }
.sw{
  width:17px; height:17px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; padding:0;
  transition:transform .12s var(--ease), border-color .15s;
}
.sw:hover{ transform:scale(1.18); }
.sw[data-accent="purple"]{ background:#a855f7; }
.sw[data-accent="yellow"]{ background:#facc15; }
.sw[data-accent="green"] { background:#22c55e; }
.sw[data-accent="pink"]  { background:#ec4899; }
.sw[data-accent="orange"]{ background:#fb923c; }
.sw[data-accent="blue"]  { background:#3b82f6; }
.sw.is-on{ border-color:#fff; transform:scale(1.18); }

/* compact nav strip — lives inside the top bar, shown only where the
   left sidebar is hidden */
.mobnav{ display:none; min-width:0; }
.mobnav a{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:650;
  background:var(--bg-3); border:1px solid var(--line); color:var(--muted);
  white-space:nowrap;
}
.mobnav a:hover{ text-decoration:none; color:var(--text); }
.mobnav a.is-on{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.mobnav a .ic{ width:15px; height:15px; }
.mn-more{ display:none; }

/* ---- the More sheet ---- */
.sheet-nav{ display:grid; grid-template-columns:1fr; gap:4px; margin-bottom:18px; }
.sheet-nav a, .sheet-nav button{
  display:flex; align-items:center; gap:14px; width:100%; min-height:50px;
  padding:12px 14px; border-radius:var(--r-sm); border:0; background:transparent;
  color:var(--text); font-size:calc(15px * var(--tx)); font-weight:600;
  text-align:left; cursor:pointer; text-decoration:none;
}
.sheet-nav a:hover, .sheet-nav button:hover{ background:var(--bg-3); text-decoration:none; }
.sheet-nav .ic{ width:20px; height:20px; color:var(--muted); flex:none; }
.sheet-nav a.is-on{ background:var(--accent-soft); color:var(--accent); }
.sheet-nav a.is-on .ic{ color:var(--accent); }
.sheet-links{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  border-top:1px solid var(--line); padding-top:18px;
}
.sheet-link{
  display:flex; align-items:center; gap:10px; min-height:46px; padding:11px 13px;
  border-radius:var(--r-sm); background:var(--bg-3); border:1px solid var(--line);
  color:var(--text-2); font-size:13px; font-weight:600; text-decoration:none;
}
.sheet-link:hover{ color:var(--text); border-color:var(--line-2); text-decoration:none; }
.sheet-link .ic{ width:17px; height:17px; flex:none; color:var(--muted); }
@media (max-width:420px){ .sheet-links{ grid-template-columns:1fr; } }

/* the single scroll area — content plus footer move together */
.scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.view{ padding:24px 26px 10px; outline:none; }
.site-foot{
  margin-top:30px; padding:18px 26px 22px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted-2); line-height:1.7;
}
.foot-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-bottom:14px;
}
.foot-logo{ width:104px; opacity:.85; flex:none; }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px 20px; align-items:center; }
.foot-links a, .foot-links .linkish{
  font-size:12.5px; color:var(--muted); text-decoration:none; font-weight:600;
  padding:3px 0; border:0; background:none; cursor:pointer;
}
.foot-links a:hover, .foot-links .linkish:hover{ color:var(--text); text-decoration:none; }
.foot-legal{ padding-top:12px; border-top:1px solid var(--line); }
.site-foot a{ color:var(--muted); text-decoration:none; }
.site-foot a:hover{ color:var(--text); text-decoration:underline; }
.foot-legal a{ text-decoration:underline; }
.aff-note{ display:block; margin-top:6px; color:var(--muted-2); }

/* ============================================================
   CONTENT BLOCKS
   ============================================================ */
.hero{
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:end;
  padding:10px 0 30px; border-bottom:1px solid var(--line); margin-bottom:28px;
}
.hero-cover{
  width:min(clamp(140px,20vw,216px), 40vh); aspect-ratio:1; border-radius:var(--r-lg);
  overflow:hidden; background:var(--bg-3); border:1px solid var(--line);
  box-shadow:0 14px 42px rgba(0,0,0,.7); position:relative;
}
.hero-cover img{ width:100%; height:100%; object-fit:cover; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:7px; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.hero h1{ font-size:clamp(30px,5.2vw,64px); font-weight:850; letter-spacing:-.03em; line-height:1.03; }
.hero-sub{ color:var(--text-2); margin-top:12px; font-size:15px; }
.hero-sub b{ color:var(--text); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

.sec{ margin-bottom:38px; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; gap:12px; }
.sec-head h2{ font-size:21px; font-weight:750; letter-spacing:-.01em; }
.sec-head p{ font-size:12.5px; color:var(--muted); }
.sec-head a{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:650; }
/* a button in a section head is a button, not an uppercase link —
   `.sec-head a` above is more specific than `.btn` and would flatten it */
.sec-head a.btn{ text-transform:none; letter-spacing:0; color:var(--text-2); font-size:12.5px; }
.sec-head a.btn:hover{ color:var(--text); }
.sec-acts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:none; }
@media (max-width:620px){
  .sec-head{ flex-wrap:wrap; align-items:flex-start; }
  .sec-acts{ width:100%; }
}

.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr)); }
.card{
  background:var(--bg-3); border:1px solid transparent; border-radius:var(--r);
  padding:14px; transition:background .18s var(--ease), border-color .18s, transform .15s var(--ease);
}
.card:hover{ background:var(--bg-4); border-color:var(--line-2); transform:translateY(-2px); text-decoration:none; }
.card-art{
  width:100%; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  background:var(--bg-4); margin-bottom:12px; position:relative;
}
.card-art img{ width:100%; height:100%; object-fit:cover; }
.card-art.round{ border-radius:50%; }
.card-art.card-ic{ display:grid; place-items:center; background:var(--bg-4); color:var(--accent); }
.card-song{ display:flex; flex-direction:column; }
.card-open{
  background:none; border:0; padding:0; text-align:left; cursor:pointer;
  color:inherit; font:inherit; display:block; width:100%;
}
.card b{ display:block; font-size:14.5px; font-weight:650; margin-bottom:3px; }
.card span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.5; }
.card b.clamp1,.card span.clamp1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* list rows */
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:32px 48px 1fr auto; gap:14px; align-items:center;
  padding:9px 12px; border-radius:var(--r-sm);
}
.row:hover{ background:var(--bg-3); }
.row-n{ color:var(--muted-2); font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }
.row-n.accent{ color:var(--accent); font-weight:800; font-size:17px; }
.row img{ width:48px; height:48px; border-radius:6px; object-fit:cover; background:var(--bg-4); }
.row-meta{ min-width:0; }
.row-meta b{ display:block; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-meta span{ display:block; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-right{ display:flex; align-items:center; gap:4px; }
.row-time{ font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums; min-width:62px; text-align:right; }

.vote-btn,.vote-mini{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--bg-3); color:var(--muted);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600;
  transition:all .15s var(--ease);
}
.vote-btn:hover,.vote-mini:hover{ color:var(--text); border-color:var(--muted-2); }
.vote-btn.is-on,.vote-mini.is-on{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.vote-mini{ width:32px; height:32px; padding:0; justify-content:center; border-radius:50%; }
.vote-mini .ic{ width:16px; height:16px; }

.empty{
  text-align:center; padding:52px 20px; color:var(--muted);
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--bg-1);
}
.empty .ic{ width:30px; height:30px; margin:0 auto 12px; color:var(--muted-2); }
.empty h3{ color:var(--text); font-size:16px; margin-bottom:6px; }
.empty p{ font-size:13.5px; max-width:48ch; margin:0 auto; }

/* podcasts */
.pod-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); }
.pod{ background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pod-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 12px; }
.pod-top h3{ font-size:16px; font-weight:700; }
.pod-top p{ font-size:12px; color:var(--muted); margin-top:2px; }
.pod-embed{ padding:0 12px 12px; }
.pod-embed iframe{ width:100%; height:232px; border:0; border-radius:var(--r-sm); display:block; }
.embed-block{
  margin:0 12px 12px; padding:26px 20px; text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--bg-1);
}
.embed-block p{ font-size:13px; color:var(--muted); margin-bottom:12px; }

/* trivia */
.quiz{ background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r); padding:22px; max-width:720px; }
.quiz-q{ font-size:18px; font-weight:700; line-height:1.4; margin-bottom:16px; }
.quiz-cat{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.quiz-opts{ display:flex; flex-direction:column; gap:9px; }
.quiz-opt{
  display:flex; align-items:center; gap:12px;
  text-align:left; padding:13px 16px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg-4); border:1px solid var(--line-2); color:var(--text); font-size:14.5px;
  transition:all .15s var(--ease);
}
.quiz-key{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:750;
  background:var(--bg-2); color:var(--muted);
}
.quiz-opt.right .quiz-key{ background:var(--accent); color:var(--on-accent); }
.quiz-opt.wrong .quiz-key{ background:#7f1d1d; color:#fca5a5; }
.quiz-opt:hover:not(:disabled){ background:var(--bg-5); border-color:var(--muted-2); }
.quiz-opt.right{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:650; }
.quiz-opt.wrong{ border-color:#7f1d1d; background:rgba(127,29,29,.22); color:#fca5a5; }
.quiz-opt:disabled{ cursor:default; }
.quiz-foot{ margin-top:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.quiz-score{ font-size:13px; color:var(--muted); }

/* prose / privacy */
.prose{ max-width:78ch; }
.prose h1{ font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.prose .lede{ color:var(--muted); font-size:14px; margin-bottom:26px; }
.prose h2{ font-size:19px; font-weight:730; margin:30px 0 10px; }
.prose h3{ font-size:15px; font-weight:700; margin:20px 0 6px; }
.prose p,.prose li{ color:var(--text-2); font-size:14.2px; line-height:1.75; }
.prose p{ margin-bottom:12px; }
.prose ul{ list-style:disc; padding-left:20px; margin-bottom:14px; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--accent); text-decoration:underline; }
.prose table{ width:100%; border-collapse:collapse; margin:12px 0 20px; font-size:13.5px; }
.prose th,.prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2); }
.prose th{ color:var(--text); font-weight:650; background:var(--bg-3); }
.callout{
  border:1px solid var(--line-2); border-left:3px solid var(--accent);
  background:var(--bg-3); border-radius:var(--r-sm); padding:16px 18px; margin:18px 0;
}
.callout p:last-child{ margin-bottom:0; }

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
.side-right{
  display:flex; flex-direction:column; padding:14px 0 0; overflow:hidden;
  /* solid black, never see-through: .side sets background:none after .panel,
     which left the page behind showing through this window's own text */
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
}
.side-right .panel-head{ padding:0 16px 12px; }
.rb-scroll{ flex:1; overflow-y:auto; padding:0 16px 20px; }
.rb-cover{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg-3); aspect-ratio:1; }
.rb-cover img{ width:100%; height:100%; object-fit:cover; }
.cover-expand{
  position:absolute; right:10px; bottom:10px;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff;
  display:grid; place-items:center; opacity:0; transition:opacity .15s;
}
.rb-cover:hover .cover-expand{ opacity:1; }
.cover-expand .ic{ width:16px; height:16px; }
.rb-title{ font-size:19px; font-weight:750; margin-top:16px; letter-spacing:-.01em; }
.rb-artist{ color:var(--muted); font-size:14px; margin-top:3px; }
.rb-album{ color:var(--muted-2); font-size:12.5px; margin-top:3px; }
.rb-vote{ display:flex; gap:8px; margin:16px 0 18px; }
.rb-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r); padding:15px; margin-bottom:12px; }
.rb-card h4{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.rb-card h4 .ic{ width:15px; height:15px; color:var(--accent); }
.rb-body p{ font-size:13.3px; line-height:1.68; color:var(--text-2); margin-bottom:9px; }
.rb-body p:last-child{ margin-bottom:0; }
.rb-body ul{ list-style:none; }
.rb-body li{ font-size:13.2px; line-height:1.6; color:var(--text-2); padding-left:16px; position:relative; margin-bottom:8px; }
.rb-body li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.rb-body a{ color:var(--accent); text-decoration:underline; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag{ font-size:11px; padding:4px 10px; border-radius:999px; background:var(--bg-4); color:var(--text-2); border:1px solid var(--line-2); }
.rb-src{ font-size:11px; color:var(--muted-2); line-height:1.6; padding:4px 2px; }
.rb-src a{ color:var(--muted); text-decoration:underline; }
.skel{ height:11px; border-radius:4px; background:var(--bg-4); margin-bottom:9px; animation:sk 1.4s ease-in-out infinite; }
.skel.w70{ width:70%; } .skel.w45{ width:45%; }
@keyframes sk{ 0%,100%{opacity:.45} 50%{opacity:.9} }

/* ============================================================
   PLAYER
   ============================================================ */
.player{
  position:fixed; left:0; right:0; bottom:0; height:var(--player-h); z-index:60;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:16px; padding:0 16px;
  background:var(--bg-1); border-top:1px solid var(--line);
}
.pl-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.pl-art{ width:54px; height:54px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--bg-3); padding:0; cursor:pointer; flex:none; }
.pl-art img{ width:100%; height:100%; object-fit:cover; }
.pl-meta{ min-width:0; }
.pl-title{ font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-artist{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-votes{ display:flex; gap:5px; margin-left:6px; }

.pl-center{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.play-btn{
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center;
  transition:transform .12s var(--ease), filter .15s;
}
.play-btn:hover{ transform:scale(1.07); filter:brightness(1.1); }
.play-btn:active{ transform:scale(.96); }
.play-btn .ic{ width:21px; height:21px; }
.play-btn-lg{ width:62px; height:62px; }
.play-btn-lg .ic{ width:27px; height:27px; }
.play-btn.is-loading{ animation:pulse 1.1s infinite; }

.pl-bar{ display:flex; align-items:center; gap:10px; width:min(44vw,460px); }
.live-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:750;
  letter-spacing:.1em; color:var(--accent); flex:none;
}
.pl-track{ flex:1; height:4px; border-radius:99px; background:var(--bg-4); overflow:hidden; }
.pl-fill{ height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .25s linear; }
.pl-time{ font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums; flex:none; min-width:40px; }

.pl-right{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.vol{ -webkit-appearance:none; appearance:none; width:96px; height:4px; border-radius:99px; background:var(--bg-4); cursor:pointer; }
.vol::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--text); border:0; }
.vol::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--text); border:0; }
.vol:hover::-webkit-slider-thumb{ background:var(--accent); }
.vol:hover::-moz-range-thumb{ background:var(--accent); }

/* ============================================================
   FULL SCREEN ARTWORK
   ============================================================ */
.fullart{ position:fixed; inset:0; z-index:80; background:var(--bg); display:grid; place-items:center; padding:30px 20px; overflow:auto; }
.fullart[hidden]{ display:none; }
.fa-wash{ position:absolute; inset:-15%; width:130%; height:130%; object-fit:cover; filter:blur(80px) saturate(140%) brightness(.38); opacity:.55; }
.fa-close{ position:absolute; top:18px; right:18px; z-index:2; background:var(--bg-3); color:var(--text); }
.fa-inner{ position:relative; z-index:1; text-align:center; max-width:520px; }
.fa-cover{
  width:min(72vw,400px); aspect-ratio:1; margin:0 auto 26px;
  border-radius:var(--r-xl); overflow:hidden; background:var(--bg-3);
  border:1px solid var(--line); box-shadow:0 26px 70px rgba(0,0,0,.8);
}
.fa-cover img{ width:100%; height:100%; object-fit:cover; }
.fa-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.fa-inner h2{ font-size:clamp(24px,5vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.fa-artist{ color:var(--muted); margin-top:8px; font-size:16px; }
.fa-actions{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:14px; }
.fa-actions .icon-btn{ width:44px; height:44px; background:var(--bg-3); color:var(--text-2); }
.fa-actions .icon-btn.is-on{ color:var(--accent); background:var(--accent-soft); }

/* ============================================================
   MODALS
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.78);
  display:grid; place-items:center; padding:20px; overflow-y:auto;
}
.modal[hidden]{ display:none; }
.modal-card{
  width:min(620px,100%); background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  max-height:92vh; display:flex; flex-direction:column;
  animation:pop .22s var(--ease) both;
}
@keyframes pop{ from{ transform:translateY(12px) scale(.985); opacity:0 } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); flex:none; }
.modal-head h2{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:730; }
.modal-head h2 .ic{ color:var(--accent); }
.modal-body{ padding:20px; overflow-y:auto; }
.modal-foot{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--line); flex:none; }
.modal-foot-wrap{ flex-wrap:wrap; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:650; color:var(--text-2); margin-bottom:6px; }
.field select,
.field input,.field textarea{
  width:100%; background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:11px 13px; font-size:14.5px; outline:0;
  transition:border-color .15s;
}
.field select:focus,
.field input:focus,.field textarea:focus{ border-color:var(--accent); }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px;
  padding-right:36px; }
.field select option{ background:#121212; color:#fff; }
.field textarea{ resize:vertical; min-height:62px; }
.req{ color:var(--accent); }
.opt{ color:var(--muted-2); font-weight:400; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.notice{ background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:15px 16px; margin:18px 0 14px; }
.notice h3{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.notice h3 .ic{ width:15px; height:15px; }
.notice p{ font-size:12.2px; line-height:1.68; color:var(--muted); margin-bottom:8px; }
.notice p:last-child{ margin-bottom:0; }
.notice strong{ color:var(--text-2); }
.notice a{ color:var(--accent); text-decoration:underline; }

.check{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--text-2); line-height:1.6; cursor:pointer; }
.check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex:none; cursor:pointer; }
.form-error{ margin-top:12px; color:#fca5a5; font-size:13px; background:rgba(127,29,29,.2); border:1px solid #7f1d1d; border-radius:var(--r-sm); padding:10px 12px; }

.switch-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-3); margin-bottom:10px; cursor:pointer;
}
.switch-row.is-locked{ opacity:.72; cursor:default; }
.switch-row strong{ display:block; font-size:14px; margin-bottom:4px; }
.switch-row em{ display:block; font-style:normal; font-size:12.2px; color:var(--muted); line-height:1.6; }
.switch-row input{ width:19px; height:19px; accent-color:var(--accent); flex:none; margin-top:2px; cursor:pointer; }

/* toasts */
.toasts{ position:fixed; z-index:110; right:16px; bottom:calc(var(--player-h) + 16px); display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:12px;
  background:var(--bg-4); border:1px solid var(--line-2); border-left:3px solid var(--accent);
  border-radius:var(--r-sm); padding:12px 15px; font-size:13.5px; max-width:380px;
  box-shadow:var(--shadow); animation:slideUp .25s var(--ease) both;
}
.toast.out{ animation:fadeOut .3s var(--ease) forwards; }
.toast .ic{ width:17px; height:17px; color:var(--accent); }
.toast a,.toast button{
  margin-left:auto; flex:none; background:var(--accent); color:var(--on-accent);
  border:0; border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:650; cursor:pointer;
}
.toast a:hover{ text-decoration:none; filter:brightness(1.1); }

/* scrollbars */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--bg-5); border-radius:99px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* roomier chat on big desktop monitors */
@media (min-width:1700px){
  .chat{ width:min(520px,calc(100vw - 36px)); max-height:min(820px,calc(100vh - var(--player-h) - 36px)); }
  .chat-log{ min-height:340px; }
}

/* collapse the secondary top-bar buttons to icons before they can clip */
@media (max-width:1480px){
  .topbar-r .btn-grey{ font-size:0; padding:9px; gap:0; }
  .topbar-r .btn-grey .ic{ width:19px; height:19px; }
}
@media (max-width:1340px){
  .accents .sw{ width:15px; height:15px; }
  /* scoped to the top bar: it used to catch the in-view search box on phones
     and squeeze it to 150px */
  .topbar .searchbox{ width:clamp(150px,20vw,260px); }
}

/* Now Playing is its own window, opened by clicking the track in the player bar */
.side-right{ display:none; }
.app.show-right .side-right{
  display:flex; position:fixed; top:var(--gap); right:var(--gap);
  bottom:calc(var(--player-h) + var(--gap)); width:var(--right-w); z-index:55;
  box-shadow:var(--shadow); animation:slideIn .22s var(--ease) both;
}
@keyframes slideIn{ from{ transform:translateX(18px); opacity:0 } }
@media (max-width:620px){
  .app.show-right .side-right{ left:var(--gap); width:auto; }
}
@media (max-width:980px){
  .app{ grid-template-columns:minmax(0,1fr); }
  .side-left{ display:none; }
  .accents{ display:none; }
  /* icon-only buttons so the bar never overflows (text nodes collapse at font-size:0) */
  .topbar-r .btn{ font-size:0; padding:9px; gap:0; }
  .topbar-r .btn .ic{ width:18px; height:18px; }
  /* ONE row on mobile: the scrolling menu sits beside the chat, request
     and sign-in buttons instead of taking a line of its own */
  .topbar{ padding:8px 10px; gap:6px; }
  .topbar-l{ flex:1 1 auto; min-width:0; gap:6px; }
  .topbar-r{ gap:4px; }
  /* the Search tab already covers this, so give the space to the menu instead */
  .topbar .searchbox, .topbar-brand{ display:none; }
  .view-search{ display:flex; width:100%; max-width:none; padding:14px 18px; }
  .view-search input{ font-size:16px; padding:6px 0; }  /* 16px stops iOS zooming */
  .mobnav{
    display:flex; gap:6px; flex:1 1 auto; min-width:0;
    overflow-x:auto; padding:0; border:0;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  /* Icons carry the strip and only the section you are on shows its word.
     That fits the whole menu on screen instead of hiding half of it in a
     side-scroll nobody notices. */
  /* Every section is an icon, so the whole menu is on screen at once instead
     of half of it hiding in a side-scroll. The one you are on is filled with
     your accent colour. The words are still in the markup for screen
     readers — only their size is zeroed. */
  .mobnav{ gap:5px; }
  .mobnav a{
    padding:0; font-size:0; gap:0; flex:0 0 auto;
    width:44px; height:40px; justify-content:center;
  }
  .mobnav a .ic{ width:19px; height:19px; }
  .mn-more{ width:44px; height:40px; padding:0; justify-content:center; font-size:0; gap:0; }
  .mn-more > span{ display:none; }
  .mn-more .ic{ width:19px; height:19px; }
  .mobnav::-webkit-scrollbar{ display:none; }

  /* Five places on the strip and the rest behind More: the whole menu fits
     without scrolling on most phones, instead of ten pills in a drawer that
     has to be discovered. */
  .mobnav .mn-extra{ display:none; }
  .mn-more{
    display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
    padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:650;
    background:var(--bg-3); border:1px solid var(--line); color:var(--muted);
    white-space:nowrap; cursor:pointer;
  }
  .mn-more .ic{ width:15px; height:15px; }
  .mn-more:hover{ color:var(--text); }
  /* More stays pinned to the right edge while the pills scroll under it —
     the way into everything else should never scroll out of reach */
  .mn-more{ position:sticky; right:0; z-index:2; }
  /* when you are on one of the sections that lives in the sheet, the More
     pill is the thing that is "on" */
  .mobnav.has-hidden-on .mn-more{
    color:var(--on-accent); background:var(--accent); border-color:var(--accent);
  }
  /* the browser has its own back/forward, and every link is in the nav + footer */
  #navBack, #navFwd, .topbar-r a.btn{ display:none; }
  /* full screen art is off the top bar on a phone: the artwork in the player
     bar and the expand button inside Now Playing both still open it */
  #artUp{ display:none; }
  /* Chat, Settings and the rest move into the More sheet so the menu gets
     the width instead of four buttons crowding it. Scoped to .topbar-r so it
     beats the .topbar-r .btn rules above it. */
  .topbar-r .tb-phone-hide, .topbar-r button.tb-phone-hide{ display:none; }
  /* keep the footer out of the way of the content on small screens */
  /* the footer now scrolls with the content, so it can show in full without
     ever covering the artwork or the track info */
  .site-foot{ margin-top:26px; padding:16px 16px 22px; font-size:11px; line-height:1.65; }
  .foot-top{ flex-direction:column; align-items:flex-start; gap:12px; }
  .foot-logo{ width:92px; }
  .foot-links{ gap:2px 16px; }
  .foot-links a, .foot-links .linkish{ font-size:12px; }
}
@media (max-width:860px){
  :root{ --player-h:120px; }
  .player{ grid-template-columns:1fr; grid-template-rows:auto auto; gap:6px; padding:8px 12px 10px; align-content:center; }
  .pl-center{ flex-direction:row; width:100%; gap:12px; }
  .pl-bar{ width:auto; flex:1; }
  .pl-right{ display:none; }
  .cookie{ grid-template-columns:1fr; gap:12px; }
  .cookie-ic{ display:none; }
  .cookie-btns{ flex-direction:row; flex-wrap:wrap; }
  .cookie-btns .btn{ flex:1; min-width:120px; }
  .view{ padding:18px 16px 10px; }

  /* Spotify-style: big square artwork, centred, like the now-playing screen */
  .hero{
    grid-template-columns:1fr; gap:20px; text-align:center;
    padding:6px 0 26px;
  }
  /* sized off width AND height, so it always fits without pushing the
     track info or the footer over the artwork */
  .hero-cover{
    width:min(78vw, 400px, 42vh); margin:0 auto;
    border-radius:var(--r-xl);
    box-shadow:0 20px 56px rgba(0,0,0,.75);
  }
  .hero h1{ font-size:clamp(26px,8vw,38px); }
  .hero-kicker{ justify-content:center; }
  .hero-actions{ justify-content:center; }
  .hero .buy{ justify-content:center; }

  /* bigger artwork in the player bar and the now-playing panel */
  .pl-art{ width:62px; height:62px; }
  .fa-cover{ width:min(86vw,440px); }
  .card-art{ border-radius:var(--r); }

  /* chunkier list rows, closer to the mobile Spotify app */
  .row{ grid-template-columns:20px 68px 1fr auto; gap:12px; padding:9px 6px; }
  .row img{ width:68px; height:68px; border-radius:9px; }
  .row-n{ font-size:12px; }
  .row-time{ display:none; }
  .lib-item img{ width:48px; height:48px; }
  .lib-item{ grid-template-columns:48px 1fr; }
  .site-foot{ padding:14px 16px 18px; }
  .modal-foot{ flex-direction:column; }
  .modal-foot .btn{ width:100%; justify-content:center; }
  /* toasts sit just above the player and stop short of the chat button, so
     they clear the artwork, the track info and the footer */
  .toasts{ left:12px; right:76px; bottom:calc(var(--player-h) + 10px); top:auto; }
  .toast{ max-width:none; }
  .chat{
    right:8px; left:8px; width:auto;
    bottom:calc(var(--player-h) + 8px);
    max-height:calc(100vh - var(--player-h) - 24px);
  }
  .chat-fab{ right:14px; bottom:calc(var(--player-h) + 14px); width:54px; height:54px; }
  .buy-btn span{ display:inline; }
}
/* ---- short viewports: landscape phones, split-screen windows ---- */
@media (max-height:540px){
  :root{ --player-h:62px; }
  .player{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto; gap:12px; padding:0 12px;
  }
  .pl-center{ flex-direction:row; width:auto; gap:10px; }
  .pl-bar{ width:min(40vw,320px); flex:none; }
  .pl-art{ width:44px; height:44px; }
  .pl-votes{ display:none; }
  .topbar{ padding:7px 12px; }
  .mobnav a{ padding:6px 12px; font-size:12px; }
  /* artwork sized off the available height so it never pushes content away */
  .hero{ grid-template-columns:auto 1fr; text-align:left; gap:18px; padding:4px 0 18px; }
  .hero-cover{ width:min(42vh,190px); margin:0; }
  .hero-kicker,.hero-actions,.hero .buy{ justify-content:flex-start; }
  .hero h1{ font-size:clamp(22px,4.4vh,30px); }
  /* one tight line — the copyright and affiliate disclosure both stay */
  .site-foot{ padding:8px 12px 9px; font-size:10px; line-height:1.45; }
  .chat{ max-height:calc(100vh - var(--player-h) - 16px); bottom:calc(var(--player-h) + 8px); }
  .chat-log{ min-height:90px; }
  .chat-join{ padding:14px; }
  .chat-join-lede{ display:none; }
  .fa-cover{ width:min(40vh,200px); margin-bottom:14px; }
  .toasts{ left:12px; right:68px; bottom:calc(var(--player-h) + 8px); top:auto; }
  .chat-fab{ width:46px; height:46px; bottom:calc(var(--player-h) + 10px); }
  .chat-fab .ic{ width:22px; height:22px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* account UI on small screens */
@media (max-width:980px){
  .me-btn .me-name{ display:none; }
  .me-btn{ padding:5px; }
  .me-btn .ic{ margin:0 3px; }
}
@media (max-width:860px){
  .field-row{ grid-template-columns:1fr; gap:0; }
  .av-row{ flex-direction:column; align-items:center; text-align:center; }
  .av-side{ align-items:center; }
  .av-side .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   RICH TEXT EDITOR  (assets/js/editor.js)
   ============================================================ */
.ed{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-3); overflow:hidden; }
.ed-bar{
  display:flex; flex-wrap:wrap; gap:2px; padding:7px 8px;
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.ed-grp{ display:flex; gap:1px; align-items:center; padding-right:7px; margin-right:5px;
         border-right:1px solid var(--line); }
.ed-grp:last-child{ border-right:0; margin-right:0; padding-right:0; }
.ed-btn{
  width:32px; height:32px; border:0; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--muted); display:grid; place-items:center;
  transition:background .14s, color .14s;
}
.ed-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
             stroke-linecap:round; stroke-linejoin:round; }
.ed-btn:hover{ background:var(--bg-4); color:var(--text); }
.ed-btn.is-on{ background:var(--accent-soft); color:var(--accent); }
.ed-sel{
  background:var(--bg-4); border:1px solid var(--line-2); color:var(--text-2);
  border-radius:7px; padding:6px 9px; font-size:12.5px; cursor:pointer; margin-right:3px;
}
.ed-body{
  min-height:300px; max-height:56vh; overflow-y:auto; padding:18px 20px;
  font-size:15px; line-height:1.75; color:var(--text); outline:none;
}
.ed-body:focus{ box-shadow:inset 0 0 0 2px var(--accent-line); }
.ed-body p{ margin:0 0 14px; }
.ed-body h2{ font-size:22px; font-weight:760; margin:22px 0 10px; letter-spacing:-.01em; }
.ed-body h3{ font-size:18px; font-weight:720; margin:18px 0 8px; }
.ed-body h4{ font-size:15.5px; font-weight:700; margin:16px 0 6px; }
.ed-body ul,.ed-body ol{ margin:0 0 14px; padding-left:26px; }
.ed-body ul{ list-style:disc; } .ed-body ol{ list-style:decimal; }
.ed-body ul ul{ list-style:circle; } .ed-body ol ol{ list-style:lower-alpha; }
.ed-body li{ margin-bottom:6px; }
.ed-body blockquote{
  margin:0 0 14px; padding:10px 18px; border-left:3px solid var(--accent);
  background:var(--bg-4); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-2);
}
.ed-body pre{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
              padding:13px 15px; overflow-x:auto; font-size:13px;
              font-family:ui-monospace,Menlo,Consolas,monospace; margin:0 0 14px; }
.ed-body a{ color:var(--accent); text-decoration:underline; }
.ed-body img{ max-width:100%; height:auto; border-radius:var(--r-sm); }
.ed-body figure{ margin:0 0 16px; }
.ed-body figcaption{ font-size:12.5px; color:var(--muted); padding-top:7px; }
.ed-body hr{ border:0; border-top:1px solid var(--line-2); margin:20px 0; }
.ed-body table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px; }
.ed-body th,.ed-body td{ border:1px solid var(--line-2); padding:8px 11px; text-align:left; }
.ed-source{
  width:100%; min-height:340px; background:#08080a; color:#cfe3ff; border:0; outline:none;
  padding:18px 20px; font-size:13px; line-height:1.7; resize:vertical;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.ed-foot{
  display:flex; justify-content:space-between; gap:12px; padding:8px 14px;
  background:var(--bg-2); border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted-2);
}
.align-center{ text-align:center; } .align-right{ text-align:right; } .align-left{ text-align:left; }

/* ============================================================
   PUBLIC PROFILE POP-UP
   ============================================================ */
.pp-top{ display:flex; gap:18px; align-items:flex-start; margin-bottom:18px; }
.pp-av{
  width:92px; height:92px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--bg-3); border:2px solid var(--line-2);
}
.pp-av img{ width:100%; height:100%; object-fit:cover; }
.pp-id{ min-width:0; flex:1; }
.pp-name{ display:flex; align-items:center; gap:7px; font-size:21px; font-weight:780;
          letter-spacing:-.01em; flex-wrap:wrap; }
.pp-name .vbadge{ width:19px; height:19px; }
.pp-meta{ color:var(--muted); font-size:13px; margin-top:4px; line-height:1.6; }
.pp-counts{ display:flex; gap:18px; margin-top:12px; }
.pp-counts b{ font-size:16px; font-weight:750; display:block; }
.pp-counts span{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); }
.pp-bio{ font-size:14px; line-height:1.72; color:var(--text-2); margin-bottom:16px; }
.pp-socials{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.pp-soc{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--text-2);
  font-size:12.5px; font-weight:620;
}
.pp-soc:hover{ text-decoration:none; color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.pp-soc .ic{ width:16px; height:16px; }
.follow-btn.is-following{ background:var(--bg-4); color:var(--text); }
.pp-empty{ color:var(--muted-2); font-size:13.5px; }

/* ============================================================
   POSTS — editorial + featured artists
   ============================================================ */
.post-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); }
.post-card{
  background:var(--bg-3); border:1px solid transparent; border-radius:var(--r);
  overflow:hidden; text-align:left; cursor:pointer; padding:0; color:inherit; font:inherit;
  transition:background .18s var(--ease), border-color .18s, transform .15s var(--ease);
}
.post-card:hover{ background:var(--bg-4); border-color:var(--line-2); transform:translateY(-2px); }
.post-cover{ aspect-ratio:16/10; background:var(--bg-4); overflow:hidden; }
.post-cover img{ width:100%; height:100%; object-fit:cover; }
.post-cover.is-blank{ display:grid; place-items:center; color:var(--accent); }
.post-body{ padding:15px 16px 17px; }
.post-kind{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--accent); font-weight:750; margin-bottom:7px; }
.post-card h3{ font-size:16.5px; font-weight:730; line-height:1.3; margin-bottom:6px; }
.post-card p{ font-size:13px; color:var(--muted); line-height:1.6; }
.post-meta{ margin-top:10px; font-size:11.5px; color:var(--muted-2); }
.post-draft{ display:inline-block; margin-left:7px; padding:2px 8px; border-radius:999px;
             background:var(--bg-5); color:var(--muted); font-size:10px; letter-spacing:.06em;
             text-transform:uppercase; font-weight:700; }

/* full article */
.article{ max-width:74ch; }
.article-cover{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:24px; background:var(--bg-3); }
.article-cover img{ width:100%; display:block; }
.article h1{ font-size:clamp(26px,4.4vw,42px); font-weight:830; letter-spacing:-.025em;
             line-height:1.1; margin-bottom:12px; }
.article .dek{ font-size:16.5px; color:var(--text-2); line-height:1.6; margin-bottom:16px; }
.article .byline{ font-size:12.5px; color:var(--muted-2); padding-bottom:20px;
                  margin-bottom:24px; border-bottom:1px solid var(--line); }
.article-body{ font-size:16px; line-height:1.8; color:var(--text-2); }
.article-body p{ margin-bottom:18px; }
.article-body h2{ font-size:24px; font-weight:770; color:var(--text); margin:32px 0 12px; letter-spacing:-.015em; }
.article-body h3{ font-size:19px; font-weight:730; color:var(--text); margin:26px 0 10px; }
.article-body h4{ font-size:16px; font-weight:700; color:var(--text); margin:22px 0 8px; }
.article-body ul,.article-body ol{ margin:0 0 18px; padding-left:26px; }
.article-body ul{ list-style:disc; } .article-body ol{ list-style:decimal; }
.article-body ul ul{ list-style:circle; } .article-body ol ol{ list-style:lower-alpha; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{
  margin:0 0 18px; padding:14px 22px; border-left:3px solid var(--accent);
  background:var(--bg-3); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:17px; color:var(--text);
}
.article-body a{ color:var(--accent); text-decoration:underline; }
.article-body img{ max-width:100%; height:auto; border-radius:var(--r-sm); }
.article-body figure{ margin:0 0 20px; }
.article-body figcaption{ font-size:12.5px; color:var(--muted-2); padding-top:8px; }
.article-body pre{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
                   padding:14px 16px; overflow-x:auto; font-size:13.5px; margin:0 0 18px;
                   font-family:ui-monospace,Menlo,Consolas,monospace; }
.article-body code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; }
.article-body hr{ border:0; border-top:1px solid var(--line-2); margin:26px 0; }
.article-body table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; }
.article-body th,.article-body td{ border:1px solid var(--line-2); padding:9px 12px; text-align:left; }
.article-body th{ background:var(--bg-3); color:var(--text); }

/* ============================================================
   SETTINGS  (text size)
   ============================================================ */
.set-row{ padding:16px 0; border-bottom:1px solid var(--line); }
.set-row:last-child{ border-bottom:0; }
.set-row h3{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.set-row p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.size-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.size-opt{
  flex:1; min-width:70px; padding:12px 10px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--muted);
  font-weight:700; transition:all .15s var(--ease); text-align:center;
}
.size-opt:hover{ color:var(--text); border-color:var(--muted-2); }
.size-opt.is-on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.size-opt small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
                 text-transform:uppercase; opacity:.75; margin-top:3px; }

/* ============================================================
   TEXT SIZE  — set from Settings, applied to reading surfaces
   ============================================================ */
:root{ --tx:1; }
html[data-fs="s"]  { --tx:.90; }
html[data-fs="m"]  { --tx:1;   }
html[data-fs="l"]  { --tx:1.13; }
html[data-fs="xl"] { --tx:1.28; }

.article-body            { font-size:calc(16px   * var(--tx)); }
.article .dek            { font-size:calc(16.5px * var(--tx)); }
.article-body h2         { font-size:calc(24px   * var(--tx)); }
.article-body h3         { font-size:calc(19px   * var(--tx)); }
.article-body h4         { font-size:calc(16px   * var(--tx)); }
.article-body blockquote { font-size:calc(17px   * var(--tx)); }

.prose p, .prose li      { font-size:calc(14.2px * var(--tx)); }
.prose h2                { font-size:calc(19px   * var(--tx)); }
.prose h3                { font-size:calc(15px   * var(--tx)); }
.prose table             { font-size:calc(13.5px * var(--tx)); }

.hero-sub                { font-size:calc(15px   * var(--tx)); }
.sec-head h2             { font-size:calc(21px   * var(--tx)); }
.sec-head p              { font-size:calc(12.5px * var(--tx)); }

.card b                  { font-size:calc(14.5px * var(--tx)); }
.card span               { font-size:calc(12.5px * var(--tx)); }
.post-card h3            { font-size:calc(16.5px * var(--tx)); }
.post-card p             { font-size:calc(13px   * var(--tx)); }

.row-meta b              { font-size:calc(14.5px * var(--tx)); }
.row-meta span           { font-size:calc(12.5px * var(--tx)); }

.rb-body p, .rb-body li  { font-size:calc(13.3px * var(--tx)); }
.rb-title                { font-size:calc(19px   * var(--tx)); }
.rb-artist               { font-size:calc(14px   * var(--tx)); }

.chat-text               { font-size:calc(13.6px * var(--tx)); }
.pl-title                { font-size:calc(14px   * var(--tx)); }
.pl-artist               { font-size:calc(12.5px * var(--tx)); }
.pp-bio                  { font-size:calc(14px   * var(--tx)); }
.quiz-q                  { font-size:calc(18px   * var(--tx)); }
.quiz-opt                { font-size:calc(14.5px * var(--tx)); }

/* ============================================================
   BIGGER RECENTLY-PLAYED ARTWORK
   ============================================================ */
.row{ grid-template-columns:34px 72px 1fr auto; gap:16px; padding:10px 12px; }
.row img{ width:72px; height:72px; border-radius:9px; }

/* clickable profile targets */
[data-profile]{ cursor:pointer; }
.chat-who [data-profile]:hover{ text-decoration:underline; }
img.chat-av[data-profile]:hover, .chat-av[data-profile]:hover{ outline:2px solid var(--accent); }

/* accent swatches inside Settings stay visible on every screen size */
.accents-wide{ display:flex !important; gap:12px; padding:0; }
.accents-wide .sw{ width:30px !important; height:30px !important; }

/* podcast artwork in the show list */
.pod-top{ align-items:flex-start; }
.pod-art{
  width:68px; height:68px; border-radius:var(--r-sm); object-fit:cover;
  background:var(--bg-4); flex:none; cursor:pointer;
}
.pod-top h3[data-show]{ cursor:pointer; }
.pod-top h3[data-show]:hover{ color:var(--accent); }
.pod-more{ margin-top:7px; font-size:12px; color:var(--accent); display:inline-block; }
.card-art.round.card-ic{ border-radius:50%; }

/* ============================================================
   HOME — featured panel
   ============================================================ */
.feature{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:30px; align-items:center;
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:34px;
}
.feature.no-art{ grid-template-columns:minmax(0,1fr); }
.feature-art{ order:2; aspect-ratio:16/11; background:var(--bg-4); }
.feature-art img{ width:100%; height:100%; object-fit:cover; }
.feature-copy{ order:1; padding:30px 10px 30px 30px; min-width:0; }
.feature.no-art .feature-copy{ padding:28px 30px; }
.feature-copy h1{ font-size:clamp(25px,3.4vw,40px); font-weight:830; letter-spacing:-.025em; line-height:1.08; }
.feature-body{ margin-top:12px; color:var(--text-2); font-size:calc(14.6px * var(--tx)); line-height:1.7; }
.feature-body p{ margin-bottom:10px; }
.feature-body p:last-child{ margin-bottom:0; }
.feature-body ul,.feature-body ol{ padding-left:22px; margin-bottom:10px; }
.feature-body ul{ list-style:disc; } .feature-body ol{ list-style:decimal; }
.feature-body a{ color:var(--accent); text-decoration:underline; }
.feature .hero-actions{ margin-top:20px; }
.quick-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }

/* ---- large article cards ---- */
.big-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); }
.big-card{
  background:var(--bg-3); border:1px solid transparent; border-radius:var(--r-lg);
  overflow:hidden; text-align:left; cursor:pointer; padding:0; color:inherit; font:inherit;
  transition:background .18s var(--ease), border-color .18s, transform .15s var(--ease);
}
.big-card:hover{ background:var(--bg-4); border-color:var(--line-2); transform:translateY(-3px); }
.big-cover{ aspect-ratio:16/9; background:var(--bg-4); overflow:hidden; }
.big-cover img{ width:100%; height:100%; object-fit:cover; }
.big-cover.is-blank{ display:grid; place-items:center; color:var(--accent); }
.big-body{ padding:18px 20px 22px; }
.big-card h3{ font-size:calc(19px * var(--tx)); font-weight:740; line-height:1.28; margin:6px 0 8px; }
.big-card p{ font-size:calc(13.5px * var(--tx)); color:var(--muted); line-height:1.6; }

/* ---- five artist cards ---- */
.artist-row{ display:grid; gap:18px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.artist-card{
  background:var(--bg-3); border:1px solid transparent; border-radius:var(--r);
  padding:18px 14px 20px; text-align:center; cursor:pointer; color:inherit; font:inherit;
  transition:background .18s var(--ease), border-color .18s, transform .15s var(--ease);
}
.artist-card:hover{ background:var(--bg-4); border-color:var(--line-2); transform:translateY(-2px); }
.artist-shot{
  width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--bg-4); margin-bottom:14px;
}
.artist-shot img{ width:100%; height:100%; object-fit:cover; }
.artist-shot.is-blank{ display:grid; place-items:center; color:var(--muted-2); }
.artist-card b{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:calc(14.5px * var(--tx)); font-weight:680; margin-bottom:3px;
}
.artist-card span{ display:block; font-size:calc(12.5px * var(--tx)); color:var(--muted); }

/* the verified check is blue on purpose, whatever the accent */
.bluecheck{ width:16px; height:16px; flex:none; }
.bluecheck.lg{ width:24px; height:24px; }

/* ============================================================
   ARTIST PAGE
   ============================================================ */
.ap-head{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:26px; align-items:center;
  padding-bottom:24px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.ap-shot{
  width:clamp(110px,13vw,156px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--bg-3); border:1px solid var(--line); flex:none;
}

/* ---- banner header -------------------------------------------------
   A wide image with the artist's name sitting on it. The wash is a flat
   tint rather than a fade, so the name stays readable over a busy photo
   without any gradient. */
.ap-head.has-banner{ display:block; }
.ap-banner{
  position:relative; width:100%; aspect-ratio:3.4/1; min-height:170px;
  border-radius:var(--r); overflow:hidden; background:var(--bg-3);
  border:1px solid var(--line); margin-bottom:20px;
}
.ap-banner > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap-banner-wash{ position:absolute; inset:0; background:rgba(0,0,0,.44); pointer-events:none; }
.ap-banner-txt{
  position:absolute; left:0; right:0; bottom:0; padding:20px 24px;
  text-shadow:0 2px 16px rgba(0,0,0,.75);
}
.ap-banner-txt .hero-kicker{ margin-bottom:4px; }
.ap-banner-txt h1{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#fff;
  font-size:clamp(26px,4.4vw,52px); font-weight:830; letter-spacing:-.025em; line-height:1.06;
  overflow-wrap:anywhere;
}
.ap-under{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center;
}
.ap-shot img{ width:100%; height:100%; object-fit:cover; }
.ap-id{ min-width:0; }
.ap-id h1{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:clamp(26px,4vw,44px); font-weight:830; letter-spacing:-.025em; line-height:1.08;
}
.ap-dek{ color:var(--text-2); font-size:calc(15px * var(--tx)); margin-top:8px; line-height:1.55; }
.ap-meta{ color:var(--muted); font-size:calc(13px * var(--tx)); margin-top:5px; }
.ap-id .pp-socials{ margin-top:14px; }
.ap-id .hero-actions{ margin-top:14px; }
.ap-sec{ margin-bottom:38px; max-width:76ch; }
.ap-h{
  font-size:calc(19px * var(--tx)); font-weight:750; letter-spacing:-.01em;
  margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line);
}

/* merch */
.merch-row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); max-width:560px; }
.merch-card{
  display:block; background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:all .16s var(--ease);
}
.merch-card:hover{ text-decoration:none; border-color:var(--accent-line); transform:translateY(-2px); }
.merch-art{ aspect-ratio:1; background:var(--bg-4); }
.merch-art img{ width:100%; height:100%; object-fit:cover; }
.merch-art.is-blank{ display:grid; place-items:center; color:var(--accent); }
.merch-body{ padding:13px 15px 15px; }
.merch-body b{ display:block; font-size:calc(14px * var(--tx)); font-weight:680; }
.merch-body span{ display:block; font-size:12.5px; color:var(--accent); margin-top:3px; font-weight:650; }

/* gallery */
/* A mosaic, not a grid of squares: CSS columns let each picture keep its own
   shape and the next one slide up under it. `display:block` is load-bearing —
   `columns` does nothing on a grid or flex container. */
.gallery{ display:block; columns:3 190px; column-gap:12px; }
.gal-item{
  position:relative; display:block; width:100%; margin:0 0 12px; break-inside:avoid;
  border:0; padding:0; cursor:pointer; overflow:hidden;
  border-radius:var(--r-sm); background:var(--bg-4);
}
/* With no size reported at upload there is no ratio to fill, so the picture
   sets its own height. When the markup does carry one, it fills that box. */
.gal-item img{ width:100%; height:auto; display:block; object-fit:cover;
  transition:transform .25s var(--ease); }
.gal-item[style*="aspect-ratio"] img{ height:100%; }
.gal-item:hover img{ transform:scale(1.06); }
.gal-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 10px 8px;
  background:rgba(0,0,0,.72);
  font-size:11.5px; color:#fff; text-align:left; line-height:1.4;
}

/* concerts */
.gigs{ display:flex; flex-direction:column; gap:2px; }
.gig{
  display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:14px 14px; border-radius:var(--r-sm); border-bottom:1px solid var(--line);
}
.gig:hover{ background:var(--bg-3); }
.gig-when{ font-size:13px; font-weight:700; color:var(--accent); line-height:1.35; }
.gig-what b{ display:block; font-size:calc(14.5px * var(--tx)); font-weight:650; }
.gig-what span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.gig-note{ margin-top:18px; }

/* ---- station links in the Now Playing window ---- */
.rb-links{ display:flex; flex-direction:column; gap:3px; }
.rb-link{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm);
  color:var(--text-2); font-size:13.2px; font-weight:600;
}
.rb-link:hover{ background:var(--bg-4); color:var(--text); text-decoration:none; }
.rb-link .ic{ width:17px; height:17px; color:var(--accent); }
.show-embed{ max-width:780px; padding:0 0 24px; }
.show-embed iframe{ width:100%; height:232px; border:0; border-radius:var(--r-sm); display:block; }

/* ---- the mobile "More" disclosure ---- */
.more-toggle{ display:none; }

/* ============================================================
   BIGGER RECENTLY PLAYED ON DESKTOP
   ============================================================ */
@media (min-width:981px){
  .row{ grid-template-columns:38px 84px 1fr auto; gap:18px; padding:11px 14px; }
  .row img{ width:84px; height:84px; border-radius:10px; }
  .row-meta b{ font-size:calc(15.5px * var(--tx)); }
}

/* ============================================================
   RESPONSIVE — the new blocks
   ============================================================ */
@media (max-width:1100px){
  .artist-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artist-row .artist-card:nth-child(n+4){ display:none; }
}
@media (max-width:860px){
  .feature{ grid-template-columns:minmax(0,1fr); gap:0; }
  .feature-art{ order:1; aspect-ratio:16/9; }
  .feature-copy{ order:2; padding:22px 20px 24px; }
  .feature-copy h1{ font-size:clamp(23px,6.4vw,30px); }
  .big-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .artist-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .artist-row .artist-card:nth-child(n+3){ display:none; }
  .ap-head{ grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; }
  .ap-shot{ width:96px; }
  /* taller and tighter on a phone, so the name has somewhere to sit */
  .ap-banner{ aspect-ratio:2/1; min-height:0; margin-bottom:16px; }
  .ap-banner-txt{ padding:14px 16px; }
  .ap-under{ grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; }
  .ap-id h1{ font-size:clamp(21px,6vw,28px); }
  .ap-id .pp-socials{ gap:6px; }
  .ap-sec{ margin-bottom:30px; }
  .gig{ grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 6px; }
  .gig-when{ grid-column:1 / -1; font-size:12px; }
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .merch-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

  /* Recently played and the per-row buy links fold away behind "More" */
  .sec-more{ position:relative; }
  .sec-more .more-body{ display:none; }
  .sec-more.is-open .more-body{ display:flex; }
  .more-toggle{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    background:var(--bg-3); border:1px solid var(--line-2); color:var(--text-2);
    border-radius:999px; padding:9px 16px; font-size:13px; font-weight:650;
  }
  .more-toggle:hover{ color:var(--text); border-color:var(--muted-2); }
  .more-toggle .ic{ width:16px; height:16px; transition:transform .18s var(--ease); }
  .sec-more.is-open .more-toggle .ic{ transform:rotate(-90deg); }
  .row .buy{ display:none; }
  .sec-more.is-open .row .buy{ display:flex; }
}

/* tighter buy buttons inside list rows on phones */
@media (max-width:860px){
  .row .buy-sm{ gap:5px; }
  .row .buy-sm .buy-btn{ padding:5px 9px; font-size:11px; }
  .row-meta{ min-width:0; }
}

/* ============================================================
   TOUCH TARGETS
   Inline links inside running text stay inline; anything that acts as a
   control gets room for a fingertip.
   ============================================================ */
@media (max-width:980px){
  .check input[type="checkbox"],
  .switch-row input[type="checkbox"]{ width:24px; height:24px; }
  .check{ padding:6px 0; align-items:center; }

  /* footer navigation is navigation, not prose */
  .foot-links{ gap:2px 10px; }
  .foot-links a, .foot-links .linkish{ padding:9px 2px; font-size:12.5px; }

  /* the cookie banner's own links */
  .cookie-links a{ display:inline-block; padding:7px 0; }

  /* "Read more", "Change cookie choices" and friends */
  .linkish{ padding:7px 0; display:inline-block; }
  .pod-more{ padding:8px 0; }

  /* chat footer */
  .chat-foot a, .chat-foot .linkish{ padding:6px 2px; display:inline-block; }

  /* links inside the privacy policy are prose, but give them a little room */
  .prose p a, .prose li a{ padding:2px 0; }

  /* "See all" is navigation */
  .sec-head a{ padding:8px 0 8px 10px; }

  /* the legal line stays inline so the sentence reads normally, but the two
     links get a little vertical room for a fingertip */
  .foot-legal a{ padding:6px 0; }

  /* wide tables in the privacy policy scroll rather than push the page out */
  .prose table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .prose thead, .prose tbody, .prose tr{ width:100%; }
  .prose th, .prose td{ min-width:92px; }

  /* inputs at 16px so iOS does not zoom the page when they get focus */
  .field input, .field textarea, .field select, .chat-form input, .searchbox input{ font-size:16px; }

  /* ---------- CONTROLS: a full 44px, no exceptions ----------
     Anything that behaves like a button or a tab gets the full touch target. */
  .btn, .chip, .size-opt, .mobnav a, .foot-links a, .foot-links .linkish,
  .sec-head a, .linkish, .pod-more, .vote-btn, .buy-btn, .pp-soc, .rb-link,
  .quiz-opt, .pl-more, .me-btn, .auth-alt .linkish{
    min-height:44px;
  }
  .btn, .chip, .size-opt, .mobnav a, .foot-links a, .foot-links .linkish,
  .sec-head a, .linkish, .pod-more, .buy-btn, .pp-soc, .pl-more, .me-btn{
    display:inline-flex; align-items:center;
  }
  .icon-btn, .vote-mini{ width:44px; height:44px; min-width:44px; min-height:44px; }
  .icon-btn .ic{ width:21px; height:21px; }
  .topbar-r .btn{ min-width:44px; justify-content:center; }
  .cookie-btns .btn{ min-height:46px; justify-content:center; }
  .size-opt{ justify-content:center; flex-direction:column; min-height:60px; }
  .play-btn{ min-width:44px; min-height:44px; }
  .chat-form input, .field input, .field textarea{ min-height:44px; }
  .check input[type="checkbox"],
  .switch-row input[type="checkbox"]{ width:26px; height:26px; }
  .check, .switch-row{ min-height:44px; }

  /* ---------- INLINE LINKS INSIDE SENTENCES ----------
     Paragraphs that used to hold two links have been split so each holds one,
     which lets these reach the full 44px without two hit areas colliding. */
  .check span, .chat-rules, .chat-foot, .cookie-copy p, .foot-legal{ line-height:2.3; }
  .notice p{ line-height:1.85; }
  .notice p:has(a){ line-height:2.4; }
  .notice a, .check a, .chat-rules a, .chat-foot a, .cookie-copy a,
  .foot-legal a, .prose p a, .prose li a{
    display:inline-block; line-height:1.3;
    min-height:44px; min-width:44px; box-sizing:border-box;
    padding:13px 6px; margin:-12px 0;
    text-align:center;
  }
  /* room between paragraphs so a link on the last line of one cannot reach
     a link on the first line of the next */
  .notice p, .prose p, .prose li, .foot-legal{ margin-bottom:14px; }

  /* the external-link button on a show card must not be squeezed by flex */
  .pod-top .icon-btn{ flex:none; width:44px; height:44px; }

  /* the cookie banner's two links go on their own rows so their hit areas
     cannot touch each other */
  .cookie-links a{ display:block; width:fit-content; }

  /* keep form content clear of the buttons pinned at the bottom of a modal */
  .modal-body{ padding-bottom:26px; }

  /* The privacy policy genuinely has several links per paragraph, so a 44px
     box there would let one link's hit area sit on top of another's. These
     get the largest size that cannot collide with the line above or below —
     still well past the 24px the WCAG AA target-size rule asks for. */
  /* only the paragraphs that actually carry links need the extra leading;
     the rest of the policy stays comfortable to read */
  .prose p, .prose li{ line-height:1.95; }
  .prose p:has(a), .prose li:has(a){ line-height:2.7; }
  .prose p a, .prose li a{
    min-height:36px; min-width:0; padding:9px 4px; margin:-8px 0;
  }

  /* short words still need a 44px-wide target */
  .foot-links a, .foot-links .linkish, .mobnav a, .sec-head a,
  .linkish, .pod-more, .me-btn{ min-width:44px; justify-content:center; }
  .me-btn{ justify-content:flex-start; }

  /* icon buttons keep a square fingertip even on the narrowest phones */
  .icon-btn{ min-width:38px; min-height:38px; }
}

/* the very smallest phones */
@media (max-width:340px){
  .pod-top{ gap:8px; }
  .pod-art{ width:54px; height:54px; }
}

/* ============================================================
   ON AIR NOW — the playing track, on the home page
   ============================================================ */
.onair{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 20px; margin-bottom:22px; cursor:pointer;
  transition:background .16s var(--ease), border-color .16s;
}
.onair:hover{ background:var(--bg-4); border-color:var(--accent-line); }
.onair-art{
  width:84px; height:84px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--bg-4); flex:none;
}
.onair-art img{ width:100%; height:100%; object-fit:cover; }
.onair-copy{ min-width:0; }
.onair-title{
  font-size:calc(21px * var(--tx)); font-weight:780; letter-spacing:-.015em;
  line-height:1.2; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.onair-artist{
  color:var(--muted); font-size:calc(14px * var(--tx)); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.onair-go{ display:flex; align-items:center; gap:14px; flex:none; }
.onair-hint{
  display:inline-flex; align-items:center; gap:3px; color:var(--muted);
  font-size:12.5px; font-weight:650;
}
.onair-hint .ic{ width:15px; height:15px; }

/* the station's own artist, inside the song window */
.rb-kicker{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.rb-title{ margin-top:5px; }
.rb-ours{ border-color:var(--accent-line); background:var(--accent-soft); }
.ours-top{ display:flex; gap:12px; align-items:center; }
.ours-shot{ width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--bg-4); flex:none; }
.ours-shot img{ width:100%; height:100%; object-fit:cover; }
.ours-id{ min-width:0; }
.ours-id b{ display:flex; align-items:center; gap:5px; font-size:14.5px; font-weight:700; }
.ours-id span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.ours-bio{ font-size:13px; line-height:1.65; color:var(--text-2); margin-top:11px; }

/* the one button the phone player carries */
.pl-more{
  display:none; flex:none; cursor:pointer;
  padding:9px 18px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--bg-4); border:1px solid var(--line-2); color:var(--text);
}
.pl-more:active{ transform:scale(.97); }

@media (max-width:860px){
  .onair{ grid-template-columns:auto minmax(0,1fr); gap:14px; padding:14px; }
  .onair-art{ width:68px; height:68px; }
  .onair-title{ font-size:calc(17px * var(--tx)); }
  .onair-go{ grid-column:1 / -1; justify-content:space-between; }

  /* ---- the phone player: artwork, the track, play, and More ---- */
  .player{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-rows:auto; gap:12px; align-items:center;
    padding:0 12px; height:var(--player-h);
  }
  :root{ --player-h:76px; }
  .pl-left{ display:contents; }
  .pl-art{ width:50px; height:50px; }
  .pl-meta{ min-width:0; }
  /* nothing else competes for the space */
  .pl-votes, .pl-bar, .pl-right{ display:none; }
  .pl-center{ display:contents; }
  .pl-more{ display:inline-block; order:4; }
  .play-btn{ order:3; width:42px; height:42px; }
}

/* ============================================================
   GALLERIES THAT KEEP THEIR SHAPE
   ------------------------------------------------------------
   A gallery used to be a grid of squares, which meant every portrait photo
   got its top and bottom sliced off. These are CSS columns instead: each
   photo keeps its own height, and the column width puts them on screen at
   roughly 600-700px, which is where a press photo starts to look like one.

   Columns rather than grid because grid rows align to the tallest item,
   which leaves holes under the short ones. Columns pack tight.
   ============================================================ */
.gallery{
  /* display:block is load-bearing. The original rule above makes this a grid
     container, and a grid container ignores `columns` completely — so without
     this the masonry below does nothing and the old 150px grid still wins. */
  display:block;
  /* A column at least 200px wide, three at most: a real mosaic on a desktop
     instead of the single 660px stack this used to make. */
  columns:3 200px; column-gap:14px;
}
.gallery .gal-item{
  /* break-inside stops a photo being split down the middle of a column */
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; width:100%; margin:0 0 14px;
  aspect-ratio:auto;                 /* was 1 — squares are gone */
  height:auto;
}
.gallery .gal-item img{
  width:100%; height:auto; display:block;
  object-fit:contain;                /* nothing is cropped any more */
}
/* The zoom-on-hover needs a frame to zoom inside, or it spills over the edge */
.gallery .gal-item{ overflow:hidden; }

/* Two across on a phone, one when there is really no room */
@media (max-width:760px){
  .gallery{ columns:2 150px; column-gap:10px; }
  .gallery .gal-item{ margin-bottom:10px; }
}
@media (max-width:360px){
  .gallery{ columns:1; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
html.ik-locked, html.ik-locked body{ overflow:hidden; }

.ik-lb{
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.94);
  display:grid; place-items:center;
  padding:48px 16px 64px;
}
.ik-lb-fig{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%; max-height:100%;
}
.ik-lb-fig img{
  /* max on both axes, so a panorama and a portrait are both shown whole */
  max-width:min(1400px, 100%); max-height:calc(100vh - 150px);
  width:auto; height:auto; display:block;
  border-radius:var(--r-sm); background:var(--bg-2);
}
.ik-lb-fig figcaption{
  color:var(--text-2); font-size:13.5px; line-height:1.5; text-align:center;
  max-width:760px;
}
.ik-lb-count{
  position:absolute; left:0; right:0; bottom:20px; margin:0;
  text-align:center; color:var(--muted); font-size:12.5px; font-weight:600;
}
.ik-lb-x{
  position:absolute; top:14px; right:16px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--text);
  font-size:26px; line-height:1; cursor:pointer;
}
.ik-lb-x:hover{ background:var(--bg-4); }
.ik-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:72px; border-radius:var(--r);
  border:1px solid var(--line-2); background:rgba(18,18,18,.86); color:var(--text);
  font-size:30px; line-height:1; cursor:pointer;
}
.ik-lb-nav:hover{ background:var(--bg-4); }
.ik-lb-prev{ left:12px; }
.ik-lb-next{ right:12px; }

@media (max-width:620px){
  .ik-lb{ padding:56px 8px 56px; }
  .ik-lb-nav{ width:40px; height:56px; font-size:24px; }
  .ik-lb-fig img{ max-height:calc(100vh - 170px); }
}

/* ============================================================
   FOCUS PICKER
   ------------------------------------------------------------
   Shown after choosing a photo, so the person can say which part of it
   matters before a square thumbnail gets cut out of it.
   ============================================================ */
.ik-modal{
  position:fixed; inset:0; z-index:420;
  background:rgba(0,0,0,.82);
  display:grid; place-items:center; padding:18px;
}
.ik-sheet{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; width:min(760px, 100%); max-height:92vh; overflow:auto;
  box-shadow:var(--shadow);
}
.ik-sheet h3{ margin:0 0 6px; font-size:18px; font-weight:700; }
.ik-hint{ margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.55; }

.ik-stage{ display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:18px; align-items:start; }
.ik-shot{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg-4);
  cursor:crosshair; touch-action:none;        /* so dragging picks, not scrolls */
  line-height:0;
}
.ik-shot img{ width:100%; height:auto; display:block; max-height:58vh; object-fit:contain; }
.ik-dot{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:3px solid #fff; background:rgba(0,0,0,.22);
  box-shadow:0 0 0 2px rgba(0,0,0,.65); pointer-events:none;
}
.ik-dot::after{
  content:''; position:absolute; inset:11px; border-radius:50%; background:#fff;
}
.ik-side-label{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.ik-prev{
  width:168px; height:168px; border-radius:var(--r); overflow:hidden;
  background:var(--bg-4); border:1px solid var(--line);
}
.ik-prev img{ width:100%; height:100%; object-fit:cover; display:block; }
.ik-acts{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }

@media (max-width:640px){
  .ik-sheet{ padding:16px; }
  .ik-stage{ grid-template-columns:1fr; }
  .ik-prev{ width:124px; height:124px; }
  .ik-acts .btn{ flex:1 1 auto; justify-content:center; }
}

/* An upload row with a focus-point control next to it */
.ik-focus-note{
  display:block; margin-top:6px; font-size:11.5px; color:var(--muted);
}

/* ============================================================
   STORY THUMBNAILS ARE NOT RESTRICTED
   ------------------------------------------------------------
   A story cover used to be forced into a 16:10 box and cropped to fill it.
   Now the card takes the shape of the picture: the ratio is set inline from
   the upload, and contain means a tall cover is shown whole rather than
   having its top and bottom cut off.
   ============================================================ */
.post-cover.is-free{
  aspect-ratio:16/10;            /* only until the inline ratio overrides it */
  max-height:520px;              /* a very tall cover should not run off */
}
.post-cover.is-free img{ object-fit:contain; }

/* a way through to the blog, after the last story */
.posts-end{
  margin-top:34px; padding:26px 20px; text-align:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.posts-end p{ margin:0 0 15px; color:var(--muted); font-size:13.5px; }
.posts-end .btn{ display:inline-flex; }

/* ============================================================
   MEMBERS, MESSAGES, COMMENTS AND WALLS
   ============================================================ */

/* ---- the unread badge in the sidebar ---- */
.nav-badge{
  margin-left:auto; min-width:19px; height:19px; padding:0 5px;
  display:inline-grid; place-items:center;
  border-radius:10px; background:var(--accent); color:var(--on-accent);
  font-size:11px; font-weight:800; line-height:1;
}

/* ---- directory ---- */
.mb-bar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px;
}
.mb-search{ flex:1 1 260px; min-width:0; }
.mb-sorts{ display:flex; gap:7px; flex-wrap:wrap; }

.mb-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));
}
.mb-card{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:20px 14px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2); color:var(--text); cursor:pointer; text-align:center;
  transition:border-color .16s var(--ease), transform .16s var(--ease);
}
.mb-card:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.mb-card.is-skel{ pointer-events:none; }
.mb-av{
  width:82px; height:82px; border-radius:50%; overflow:hidden; margin-bottom:8px;
  background:var(--bg-4); flex:none; display:grid; place-items:center;
}
.mb-av img{ width:100%; height:100%; object-fit:cover; }
.mb-blank{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:30px; font-weight:800; color:var(--muted); background:var(--bg-4);
}
.mb-blank.big{ font-size:52px; }
.mb-name{
  display:flex; align-items:center; gap:5px; justify-content:center;
  font-size:calc(14.5px * var(--tx)); font-weight:680;
}
.mb-meta{
  font-size:12px; color:var(--muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mb-counts{ font-size:11.5px; color:var(--muted-2); }
.mb-role{
  margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  padding:2px 7px; border-radius:20px;
}

/* ---- one member's page ---- */
.mp-head{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px;
  align-items:end; margin-bottom:26px;
}
.mp-av{
  width:190px; height:190px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); display:grid; place-items:center;
}
.mp-av img{ width:100%; height:100%; object-fit:cover; }
.mp-kicker{
  margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.mp-head h1{
  margin:0; font-size:clamp(30px,5vw,56px); font-weight:800; letter-spacing:-.025em;
  line-height:1.03; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.mp-meta{ margin:10px 0 0; color:var(--text-2); font-size:calc(14px * var(--tx)); }
.mp-counts{ display:flex; gap:26px; margin:16px 0 0; }
.mp-counts b{ display:block; font-size:20px; font-weight:800; }
.mp-counts span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mp-acts{ display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; }
.mp-bio{
  margin:0 0 22px; max-width:68ch; color:var(--text-2);
  font-size:calc(14.6px * var(--tx)); line-height:1.65;
}
.mp-socials{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.mp-block{ color:var(--muted); }
.mp-block:hover{ color:#ff6b6b; border-color:#ff6b6b; }

@media (max-width:720px){
  .mp-head{ grid-template-columns:1fr; gap:16px; align-items:start; }
  .mp-av{ width:124px; height:124px; }
  .mp-acts .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---- favourite artists ---- */
.fav-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));
}
.fav-card{
  display:flex; flex-direction:column; gap:3px; padding:12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
  color:var(--text); cursor:pointer; text-align:left;
  transition:border-color .16s var(--ease), transform .16s var(--ease);
}
.fav-card:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.fav-art{
  display:block; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  background:var(--bg-4); margin-bottom:9px;
}
.fav-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.fav-art.is-blank{ display:grid; place-items:center; color:var(--accent); }
.fav-card b{
  display:flex; align-items:center; gap:5px;
  font-size:calc(14px * var(--tx)); font-weight:680;
}
.fav-card span{ font-size:12px; color:var(--muted); }

/* The heart on an artist page */
.fav-btn.is-on{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent);
}
.fav-btn.is-on .ic{ fill:currentColor; }

/* ---- messages ---- */
.dm-list{ display:flex; flex-direction:column; gap:2px; }
.dm-row{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:12px 13px; border-radius:var(--r-sm);
  border:0; background:none; color:var(--text); cursor:pointer; text-align:left;
  border-bottom:1px solid var(--line);
}
.dm-row:hover{ background:var(--bg-3); }
.dm-row.is-unread .dm-last{ color:var(--text); font-weight:620; }
.dm-av{
  width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); display:grid; place-items:center;
}
.dm-av img{ width:100%; height:100%; object-fit:cover; }
.dm-av .mb-blank{ font-size:20px; }
.dm-mid{ min-width:0; }
.dm-mid b{
  display:flex; align-items:center; gap:5px;
  font-size:calc(14.5px * var(--tx)); font-weight:650;
}
.dm-last{
  display:block; font-size:12.8px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px;
}
.dm-end{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.dm-at{ font-size:11.5px; color:var(--muted-2); white-space:nowrap; }
.dm-dot{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--accent); color:var(--on-accent);
  font-size:11px; font-weight:800; display:grid; place-items:center;
}

.dm-head{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.dm-head b{ font-size:calc(16px * var(--tx)); font-weight:700; cursor:pointer; }
.dm-head b:hover{ text-decoration:underline; }
.dm-head .btn:last-child{ margin-left:auto; }

.dm-msgs{
  display:flex; flex-direction:column; gap:9px;
  max-height:min(56vh, 520px); overflow-y:auto; padding:4px 2px 10px;
}
.dm-msg{
  max-width:min(74%, 540px); align-self:flex-start;
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 13px;
}
.dm-msg.is-mine{
  align-self:flex-end;
  background:var(--accent-soft); border-color:var(--accent-line);
}
.dm-msg p{
  margin:0; font-size:calc(13.8px * var(--tx)); line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.dm-msg span{ display:block; margin-top:5px; font-size:11px; color:var(--muted-2); }

.dm-form{ display:flex; gap:9px; margin-top:14px; }
.dm-form input{
  flex:1; min-width:0; background:var(--bg-3); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; font:inherit; font-size:14px;
}
.dm-form input:focus{ border-color:var(--accent); outline:none; }
.dm-err{ margin:9px 0 0; color:#ff6b6b; font-size:12.5px; }

/* ---- comments and walls ---- */
.cm{ margin-top:8px; }
.cm-n{ color:var(--muted); font-weight:600; }

.cm-form{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:15px; margin-bottom:22px;
}
.cm-input{
  width:100%; background:var(--bg-3); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:11px 13px; font:inherit; font-size:calc(14px * var(--tx));
  line-height:1.55; resize:vertical; min-height:76px;
}
.cm-input:focus{ border-color:var(--accent); outline:none; }

.cm-emoji{ display:flex; gap:4px; flex-wrap:wrap; margin:9px 0 2px; }
.cm-emo{
  width:34px; height:34px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg-3);
  font-size:17px; line-height:1; cursor:pointer;
}
.cm-emo:hover{ background:var(--bg-4); border-color:var(--line-2); }

.cm-rules{ margin:11px 0 0; font-size:11.8px; color:var(--muted-2); line-height:1.5; }

.cm-consent{
  display:flex; gap:10px; align-items:flex-start; margin:13px 0 0;
  font-size:12px; color:var(--muted); line-height:1.55; cursor:pointer;
}
.cm-consent input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.cm-link{ color:var(--accent); text-decoration:underline; }

.cm-foot{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.cm-count{ font-size:11.5px; color:var(--muted-2); }
.cm-count.is-full{ color:#ff6b6b; font-weight:700; }
.cm-foot .btn{ margin-left:auto; }
.cm-err{ margin:11px 0 0; color:#ff6b6b; font-size:12.5px; }

.cm-gate{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; text-align:center; margin-bottom:22px;
}
.cm-gate .ic{ width:30px; height:30px; color:var(--accent); margin:0 auto 10px; }
.cm-gate p{ margin:0 0 14px; color:var(--muted); font-size:13.5px; }

.cm-list{ display:flex; flex-direction:column; gap:2px; }
.cm-none, .cm-dead{ color:var(--muted); font-size:13.5px; padding:18px 0; margin:0; }

.cm-waiting{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--accent); font-size:12.5px; font-weight:600;
}
.cm-waiting .ic{ width:16px; height:16px; flex:none; }

.cm-row{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.cm-row.is-waiting{ opacity:.72; }
.cm-av{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); display:grid; place-items:center; cursor:pointer;
}
.cm-av img{ width:100%; height:100%; object-fit:cover; }
.cm-av-blank{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:17px; font-weight:800; color:var(--muted);
}
.cm-av[data-profile]:hover{ outline:2px solid var(--accent); }

.cm-head{
  display:flex; align-items:center; gap:7px; margin:0 0 5px; flex-wrap:wrap;
}
.cm-who{ font-size:13.5px; font-weight:700; cursor:pointer; }
.cm-who:hover{ text-decoration:underline; }
.cm-who-gone{ font-size:13.5px; font-weight:700; color:var(--muted); }
.cm-at{ font-size:11.5px; color:var(--muted-2); }
.cm-pill{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-line);
  background:var(--accent-soft); padding:2px 7px; border-radius:20px;
}
.cm-text{
  margin:0; font-size:calc(14px * var(--tx)); line-height:1.62; color:var(--text-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.cm-del{
  margin-top:7px; border:0; background:none; padding:0;
  color:var(--muted-2); font-size:11.5px; font-weight:600; cursor:pointer;
}
.cm-del:hover{ color:#ff6b6b; text-decoration:underline; }

.cm-pager{
  display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top:18px; flex-wrap:wrap;
}
.cm-pager .muted{ font-size:12.5px; }

/* A solid blue tick everywhere, not the accent colour.
   Verification is a statement about a person, not decoration — so it stays
   the same colour whichever accent the listener has chosen. */
.vbadge{ color:#3b82f6; fill:#3b82f6; }
.vbadge-lg{ width:22px; height:22px; }

/* The solid badge draws its burst in currentColor and its tick in white, so
   only the colour needs setting here. The stroke is cleared because .ic adds
   one by default and it would outline the filled shape.

   Both class names are covered: .vbadge on member and chat names, .bluecheck
   on artist pages. They are the same mark, so they are the same blue — and a
   fixed blue rather than the accent, because verification is a statement
   about a person and should not change colour with a theme. */
.vbadge, svg.vbadge,
.bluecheck, svg.bluecheck{ color:#3b82f6; fill:currentColor; stroke:none; }

/* ============================================================
   SHARE BAR
   ============================================================ */
.sh-row{
  margin:34px 0 10px; padding:20px; border-radius:var(--r-lg);
  background:var(--bg-2); border:1px solid var(--line);
}
.sh-h{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.sh-h .ic{ width:17px; height:17px; }
.sh-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.sh-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; min-height:40px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg-3); color:var(--text-2);
  font-size:12.8px; font-weight:620; text-decoration:none; cursor:pointer;
}
.sh-btn:hover{
  background:var(--bg-4); border-color:var(--accent-line);
  color:var(--text); text-decoration:none;
}
.sh-btn .ic{ width:16px; height:16px; }
/* The share-sheet button leads, because it is the only route to Instagram
   Stories, Facebook Stories and TikTok. */
.sh-sheet{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent);
}
.sh-sheet:hover{ background:var(--accent-soft); color:var(--accent); }

@media (max-width:620px){
  .sh-row{ padding:16px; }
  .sh-btn span{ display:none; }         /* icons only, so they fit one row */
  .sh-sheet span{ display:inline; }     /* except the one that matters most */
  .sh-btn{ padding:9px 11px; }
}

/* ============================================================
   ON TOUR
   ------------------------------------------------------------
   The weekday sits in a grey box with the date number under it, and the rest
   of the row is white text. Scanning the boxes down the left is quicker than
   reading dates in a sentence, which is why tour lists are built this way.
   ============================================================ */
.tour{ display:flex; flex-direction:column; gap:8px; }
.tour-row{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding:12px 14px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line);
}
.tour-row:hover{ border-color:var(--line-2); background:var(--bg-3); }

.tour-date{
  /* the grey box */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:62px; min-height:62px; padding:7px 4px;
  background:var(--bg-4); border:1px solid var(--line-2);
  border-radius:var(--r-sm); text-align:center;
}
.tour-dow{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); line-height:1.2;
}
.tour-day{
  font-size:23px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.05;
}
.tour-day-sm{ font-size:12px; font-weight:700; letter-spacing:0; }

.tour-what{ min-width:0; }
.tour-what b{
  display:flex; align-items:center; gap:7px;
  font-size:calc(15px * var(--tx)); font-weight:680; color:#fff;   /* white, as asked */
}
.tour-what b .ic{ width:15px; height:15px; color:var(--accent); }
.tour-when{
  display:block; margin-top:3px; font-size:12.8px; color:#fff; opacity:.86;
}
.tour-note{ display:block; margin-top:2px; font-size:12px; color:var(--muted); }
.tour-soon{ font-size:11.5px; color:var(--muted-2); font-weight:650; }
.tour-row.is-online .tour-date{ border-color:var(--accent-line); }

@media (max-width:620px){
  .tour-row{ grid-template-columns:54px minmax(0,1fr); gap:12px; }
  .tour-date{ width:54px; min-height:54px; }
  .tour-day{ font-size:20px; }
  .tour-go{ grid-column:2; justify-self:start; margin-top:4px; }
  .tour-soon{ display:none; }
}

/* ============================================================
   VIDEOS
   ------------------------------------------------------------
   Two columns on a desktop, one on a phone. A still with a play button over
   it; the player itself is only loaded when it is pressed.
   ============================================================ */
.vids{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
}
.vid-card{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:block;
  color:var(--text); text-decoration:none;
}
.vid-card:hover{ border-color:var(--accent-line); text-decoration:none; }

.vid-art{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border:0; padding:0; margin:0; cursor:pointer; overflow:hidden;
  background:var(--bg-4);
}
.vid-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-blank{ display:grid; place-items:center; width:100%; height:100%; color:var(--muted); }
.vid-play{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.62); border:2px solid #fff;
  transition:transform .16s var(--ease), background .16s var(--ease);
}
.vid-play .ic{ width:26px; height:26px; color:#fff; margin-left:2px; }
.vid-art:hover .vid-play{ transform:scale(1.08); background:var(--accent); }
.vid-art:hover .vid-play .ic{ color:var(--on-accent); }
.vid-badge{
  position:absolute; left:10px; top:10px;
  padding:3px 8px; border-radius:20px;
  background:rgba(0,0,0,.74); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.vid-frame{ width:100%; aspect-ratio:16/9; background:#000; }
.vid-frame iframe{ width:100%; height:100%; border:0; display:block; }
.vid-body{ padding:13px 15px 15px; }
.vid-body b{ display:block; font-size:calc(14.5px * var(--tx)); font-weight:680; }
.vid-body span{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); }

/* ============================================================
   TRIVIA, LABEL BLOCK AND THE VERIFIED NOTICE
   ============================================================ */
.facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.facts li{
  position:relative; padding:12px 14px 12px 38px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:calc(13.8px * var(--tx)); line-height:1.6; color:var(--text-2);
}
.facts li::before{
  content:''; position:absolute; left:15px; top:19px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.facts-src{
  display:block; margin-top:5px; font-size:11px; color:var(--muted-2);
  letter-spacing:.04em; text-transform:uppercase; font-weight:650;
}
.ap-h .ic{ width:19px; height:19px; color:var(--accent); vertical-align:-3px; margin-right:7px; }

.biz{ margin:0; display:grid; gap:1px; }
.biz > div{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px;
  padding:12px 14px; background:var(--bg-2); border:1px solid var(--line);
}
.biz > div:first-child{ border-radius:var(--r-sm) var(--r-sm) 0 0; }
.biz > div:last-child{ border-radius:0 0 var(--r-sm) var(--r-sm); }
.biz dt{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.biz dd{ margin:0; font-size:calc(14px * var(--tx)); color:var(--text); }
.biz dd a{ color:var(--accent); }
@media (max-width:620px){
  .biz > div{ grid-template-columns:1fr; gap:4px; }
}

/* The notice at the foot of a verified artist's page. Dark grey box, white
   text and a blue tick in front of it, as the station asked. */
.verif-note{
  margin:30px 0 0; padding:18px 20px;
  background:var(--bg-4); border:1px solid var(--line-2); border-radius:var(--r);
}
.verif-note p{
  margin:0; color:#fff; font-size:calc(13.4px * var(--tx)); line-height:1.65;
}
.verif-note .vbadge{
  width:18px; height:18px; vertical-align:-4px; margin-right:9px;
}

/* ============================================================
   THE ARTIST BLOCK IN THE NOW PLAYING WINDOW
   ============================================================ */
.ours-banner{
  /* The banner is 3:1 and the panel is narrow, so it is cropped to a strip
     rather than shrunk until it is unreadable. */
  margin:0 0 12px; border-radius:var(--r-sm); overflow:hidden;
  aspect-ratio:3/1; background:var(--bg-4);
}
.ours-banner img{ width:100%; height:100%; object-fit:cover; display:block; }

.ours-top{ display:flex; gap:12px; align-items:center; }
.ours-top.has-banner{ gap:0; }
.ours-shot{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); flex:none;
}
.ours-shot img{ width:100%; height:100%; object-fit:cover; }
.ours-id{ min-width:0; }
.ours-id b{
  display:flex; align-items:center; gap:5px;
  font-size:calc(14.6px * var(--tx)); font-weight:700;
}
.ours-id span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.ours-plays:empty{ display:none; }
.ours-plays{ color:var(--accent) !important; font-weight:650; }

.ours-bio{
  margin:12px 0 0; font-size:calc(13.2px * var(--tx)); line-height:1.62;
  color:var(--text-2);
}
/* The panel is for a glance; the full read is on their page. */
.ours-bio.rb-body{
  max-height:132px; overflow:hidden; position:relative;
  mask-image:linear-gradient(#000 70%, transparent);
  -webkit-mask-image:linear-gradient(#000 70%, transparent);
}
.ours-bio p:first-child{ margin-top:0; }

.ours-tour{ margin-top:14px; }
.ours-tour h5{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.ours-gig{
  display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line);
  font-size:12.3px;
}
.ours-gig:last-of-type{ border-bottom:0; }
.ours-gig-when{
  flex:none; min-width:76px; color:#fff; font-weight:650;
}
.ours-gig-what{
  color:var(--text-2); display:flex; align-items:center; gap:5px; min-width:0;
}
.ours-gig-what .ic{ width:13px; height:13px; color:var(--accent); flex:none; }
.ours-more{ margin:8px 0 0; font-size:11.5px; color:var(--muted-2); }

/* ============================================================
   LYRICS
   ============================================================ */


/* How often the station has played this artist — the equivalent of a
   monthly-listener line, but it is a real count of our own airplay. */
.ap-plays{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:14px 0 0; }
.ap-plays:empty{ display:none; }
.ap-plays b{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--accent); }
.ap-plays span{ font-size:12.5px; color:var(--muted); }
.ap-plays-songs{ flex-basis:100%; color:var(--muted-2) !important; font-size:12px !important; }

/* share-your-vote, beside the buy buttons */
.vote-share{ cursor:pointer; }
.vs-sheet{ width:min(520px,100%); }
.vs-quote{
  margin:0 0 16px; padding:13px 15px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.6; color:var(--text-2);
}
.vs-picks{ display:flex; gap:8px; flex-wrap:wrap; }
.vs-picks .sh-btn{ flex:1 1 140px; justify-content:center; }
/* A year in the date box, where there is no real date to show */
.tour-day-yr{ font-size:14px; font-weight:750; letter-spacing:0; }

/* who is on air, under the song in the player bar */
.pl-onair{
  margin:2px 0 0; font-size:11.5px; font-weight:650; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The player artwork may be a DJ portrait, so it crops rather than squashes. */
#plArt img, #rbArt{ object-fit:cover; }

/* ============================================================
   THE WEEKLY CHART ON HOME
   ============================================================ */
.chart{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.chart-row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto auto;
  gap:14px; align-items:center;
  padding:11px 13px; border-radius:var(--r-sm); border-bottom:1px solid var(--line);
}
.chart-row:hover{ background:var(--bg-3); }
.chart-n{
  font-size:19px; font-weight:800; color:var(--muted); text-align:center;
  font-variant-numeric:tabular-nums;
}
.chart-row:nth-child(1) .chart-n,
.chart-row:nth-child(2) .chart-n,
.chart-row:nth-child(3) .chart-n{ color:var(--accent); }
.chart-what{ min-width:0; }
.chart-what b{
  display:block; font-size:calc(14.6px * var(--tx)); font-weight:680;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chart-what span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.chart-plays{
  text-align:right; font-size:17px; font-weight:750; color:#fff;
  font-variant-numeric:tabular-nums;
}
.chart-plays small{
  display:block; font-size:10.5px; font-weight:600; color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase;
}
.chart-foot{ margin:16px 0 0; font-size:12px; color:var(--muted-2); }
@media (max-width:720px){
  .chart-row{ grid-template-columns:34px minmax(0,1fr) auto; }
  .chart-buy{ display:none; }        /* the buy links are on the song's own row */
  .chart-n{ font-size:16px; }
}

/* the second featured panel sits a little quieter than the first */
.feature-2{ margin-top:30px; }

/* ============================================================
   SEARCH HERO
   ============================================================ */
.search-hero{
  padding:30px 28px 26px; margin-bottom:26px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-xl);
}
.search-hero h1{
  margin:8px 0 8px; font-size:clamp(26px,4vw,42px); font-weight:800;
  letter-spacing:-.025em; line-height:1.06;
}
.search-hero .hero-kicker{ display:flex; align-items:center; gap:8px; margin:0; }
.search-hero .hero-kicker .ic{ width:15px; height:15px; }
.search-hero-sub{
  margin:0 0 20px; max-width:62ch; color:var(--text-2);
  font-size:calc(14.5px * var(--tx)); line-height:1.6;
}
.search-hero-box{ max-width:560px; margin-bottom:16px; }
/* The hero carries its own box, so the old narrow-screen one is not needed */
.search-hero .view-search{ display:flex; }
.search-kinds{ display:flex; gap:7px; flex-wrap:wrap; }
@media (max-width:620px){
  .search-hero{ padding:22px 18px 20px; }
}

/* ============================================================
   SHOWS: platform chips and the one player at a time
   ============================================================ */
.show-players{ margin:22px 0 26px; }
.show-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.pod-where{
  display:block; margin-top:4px; font-size:11px; font-weight:650;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
}

/* ============================================================
   THE TWO ACCOUNT KINDS ON SIGN-UP
   ============================================================ */
.role-pick{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.role-opt{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:13px 14px; text-align:left; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--text);
}
.role-opt:hover{ border-color:var(--line-2); background:var(--bg-4); }
.role-opt.is-on{ border-color:var(--accent); background:var(--accent-soft); }
.role-opt .ic{ width:20px; height:20px; color:var(--accent); margin-bottom:3px; }
.role-opt.is-on .ic{ color:var(--accent); }
.role-opt b{ font-size:13.5px; font-weight:700; }
.role-opt span{ font-size:11.8px; color:var(--muted); line-height:1.45; }
@media (max-width:480px){
  .role-pick{ grid-template-columns:1fr; }
}

/* ============================================================
   AN ARTIST'S OWN PANEL
   ============================================================ */
.ap-stats{
  display:grid; gap:12px; margin-bottom:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
}
.ap-stat{
  padding:18px 20px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r);
}
.ap-stat b{
  display:block; font-size:28px; font-weight:800; letter-spacing:-.02em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.ap-stat span{
  display:block; margin-top:4px; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.my-shot{
  width:148px; height:148px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); border:1px solid var(--line);
}
.my-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
#mpForm textarea{
  width:100%; background:var(--bg-3); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; font:inherit; font-size:14px; line-height:1.6; resize:vertical;
}
#mpForm textarea:focus{ border-color:var(--accent); outline:none; }

/* ============================================================
   THE PROFILE DASHBOARD
   Three flat tiles — messages, friends, chat — with a count on each.
   Flat colour only, to match everything else here.
   ============================================================ */
.dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 16px; }
.dash-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; padding:12px 12px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-3); color:var(--text); text-align:left; cursor:pointer;
  font:inherit; min-height:84px; }
.dash-tile:hover{ background:var(--bg-4); border-color:var(--line-2); }
.dash-tile .ic{ width:17px; height:17px; opacity:.75; margin-bottom:4px; }
.dash-tile b{ font-size:13.5px; font-weight:600; }
.dash-tile span{ font-size:11.5px; color:var(--muted); }
.dash-n{ position:absolute; top:9px; right:9px; min-width:19px; height:19px;
  display:inline-grid; place-items:center; padding:0 5px; border-radius:999px;
  background:#3b82f6; color:#fff; font-size:11px; font-weight:700; line-height:1; }
.dash-note{ margin:-8px 0 16px; font-size:12px; color:var(--muted); }
@media (max-width:420px){
  .dash{ grid-template-columns:1fr; }
  .dash-tile{ flex-direction:row; align-items:center; gap:10px; min-height:0; padding:10px 12px; }
  .dash-tile .ic{ margin:0; }
  .dash-tile span{ margin-left:auto; padding-right:34px; }
}

/* ============================================================
   THE ARTIST'S OWN GALLERY MANAGER
   Works the same on a phone, a tablet and a desktop: one column of
   cards on a narrow screen, more as there is room.
   ============================================================ */
.my-gal{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); }
.my-gal-item{ display:flex; flex-direction:column; gap:8px; }
.my-gal-shot{
  aspect-ratio:1; overflow:hidden; border-radius:var(--r-sm);
  background:var(--bg-4); border:1px solid var(--line);
}
.my-gal-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.my-gal-cap{ width:100%; }
.my-gal-item .btn{ align-self:flex-start; }
.dash-go{ width:100%; justify-content:center; margin:0 0 16px; }

/* ------------------------------------------------------------
   THE ARTIST'S OWN PAGE — BLUE

   The verified tick is blue whatever accent the listener picked, and this
   page borrows the same blue so an artist can see at a glance that they are
   on their own side of the player. It only overrides the accent inside
   .ap-blue, so the rest of the site keeps the chosen colour.
   ------------------------------------------------------------ */
.ap-blue{
  --accent:#3b82f6;
  --accent-soft:rgba(59,130,246,.16);
  --accent-line:rgba(59,130,246,.42);
  --on-accent:#00102b;
}

/* Where a vote was cast from, under the time it was cast. */
.fan-where{ display:block; font-size:11.5px; color:var(--muted); }

.fan-list{ display:flex; flex-wrap:wrap; gap:8px; }
.fan-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 6px; font-size:12.8px; font-weight:600;
}
.fan-chip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
.fan-chip .vbadge{ width:13px; height:13px; }

/* ------------------------------------------------------------
   GALLERY — EQUAL TILES

   The mosaic let every photo keep its own shape, which made a ragged wall of
   different-sized boxes. These are all the same square instead: one clean
   grid, rounded, with the caption appearing over the picture on hover rather
   than sitting on it all the time. Nothing is lost — the lightbox still shows
   the whole photo, uncropped.

   It is last in the file on purpose, so it wins over the masonry rules above
   without those having to be unpicked.
   ------------------------------------------------------------ */
.gallery{
  display:grid; columns:auto;
  grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));
  gap:12px;
}
.gallery .gal-item{
  margin:0; aspect-ratio:1; height:auto;
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--bg-4); border:1px solid var(--line);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.gallery .gal-item:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.gallery .gal-item img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* The caption stays out of the way until the picture is pointed at. On a
   touch screen there is no hover, so it is simply always there. */
.gallery .gal-cap{
  opacity:0; transition:opacity .2s var(--ease);
  padding:20px 10px 8px;
}
.gallery .gal-item:hover .gal-cap,
.gallery .gal-item:focus-visible .gal-cap{ opacity:1; }
@media (hover:none){ .gallery .gal-cap{ opacity:1; } }

@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr)); gap:10px; }
  .gallery .gal-item{ margin:0; }
}

/* ------------------------------------------------------------
   SHARE BAR — ICONS ONLY

   The labels are kept in the markup so a screen reader still reads "Share on
   WhatsApp", but they are off the screen at every width, which leaves one
   tidy row of icons instead of a block of buttons.
   ------------------------------------------------------------ */
.sh-btn span{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.sh-btn{ padding:9px; min-width:40px; justify-content:center; gap:0; }
.sh-btn .ic{ width:18px; height:18px; }
@media (max-width:620px){
  .sh-btn, .sh-sheet{ padding:9px; }
  .sh-sheet span{ position:absolute; clip-path:inset(50%); }
}

/* ------------------------------------------------------------
   DESKTOP ONLY — A BIGGER ON-AIR BLOCK

   It sits behind one min-width query, so a phone and a tablet get exactly
   what they got before. 1100px is above the point where the left menu
   collapses, so nothing here can fire on a narrow screen.

   The Now Playing window keeps its original 332px — widening it was tried
   and put back.
   ------------------------------------------------------------ */
@media (min-width:1100px){
  /* What is on air, at the top of the home page. */
  .onair{ gap:26px; padding:24px 28px; margin-bottom:28px; }
  .onair-art{ width:124px; height:124px; }
  .onair-title{ font-size:calc(28px * var(--tx)); }
  .onair-artist{ font-size:calc(16px * var(--tx)); margin-top:5px; }
  .onair-go{ gap:18px; }
  .onair-hint{ font-size:13.5px; }
  .onair-hint .ic{ width:17px; height:17px; }
}

/* A share site's own icon, when its file has been dropped into
   assets/img/share/. Same box as the sprite icons it sits beside. */
.sh-ic{ width:18px; height:18px; display:block; flex:none; }

/* ------------------------------------------------------------
   .cards — the grid the DJ list and the show shelves use

   It was never defined, so those containers were plain blocks: one card per
   row, each stretched to the full width, which made its square thumbnail
   enormous. The same auto-fill grid as .grid puts them back to one size.
   ------------------------------------------------------------ */
.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr));
}
/* A round DJ photo can never outgrow its column. */
.cards .card-art{ max-width:100%; }
@media (max-width:760px){
  .cards{ grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:12px; }
}

/* ------------------------------------------------------------
   PROFILE SECTIONS — saved artists, votes, photos, data
   ------------------------------------------------------------ */
.pf-sec{ margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.pf-h{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
}
.pf-h .ic{ width:18px; height:18px; color:var(--accent); }
.pf-sec .rows{ max-height:280px; overflow:auto; }
.pf-sec .row{ grid-template-columns:24px minmax(0,1fr) auto; gap:12px; padding:8px 4px; }
button.fan-chip{ cursor:pointer; color:inherit; font:inherit; }
button.fan-chip:hover{ border-color:var(--accent-line); }

/* The emoji row above the chat box, same buttons the comments use. */
.chat-emoji{ padding:0 14px 8px; }

/* The chart link in the song window, under the buy row. */
.rb-go{ display:flex; justify-content:center; margin:4px 0 14px; }

/* Full chart and Register, under the Top 10. Side by side where there is
   room, stacked and full width on a phone. */
.chart-go{ margin-top:18px; }
@media (max-width:560px){
  .chart-go{ flex-direction:column; align-items:stretch; }
  .chart-go .btn{ width:100%; justify-content:center; }
}

/* ------------------------------------------------------------
   THE CHART PAGE, AND THE PROFILE AS A PAGE
   ------------------------------------------------------------ */
.chart-hero{ padding:4px 0 18px; }
.chart-hero h1{ font-size:calc(30px * var(--tx)); margin:6px 0 8px; letter-spacing:-.02em; }
.chart-hero p{ color:var(--muted); font-size:14px; max-width:620px; }

.chart-one{
  display:flex; gap:20px; align-items:center;
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px;
}
.chart-one-n{
  font-size:64px; font-weight:800; line-height:1; color:var(--accent); flex:none;
}
.chart-one-what h2{ font-size:calc(24px * var(--tx)); margin:2px 0 4px; }
.chart-one-artist{ color:var(--muted); font-size:15px; }
.chart-one-plays{ color:var(--muted); font-size:13px; margin-top:6px; }
@media (max-width:560px){
  .chart-one{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px; }
  .chart-one-n{ font-size:48px; }
}

/* The profile card, once it is living in the page rather than a dialog. */
.pf-page{ padding-top:0; }
.pf-page .modal-card{
  max-width:none; width:100%; box-shadow:none; border:0;
  background:transparent; border-radius:0;
}
.pf-page .modal-head{ padding-left:0; padding-right:0; border:0; }
.pf-page .modal-body{ padding-left:0; padding-right:0; }
.pf-page .modal-foot{ padding-left:0; padding-right:0; }
.pf-page [data-close="profileModal"]{ display:none; }

/* Breathing room between the chart link and the buy row above it. */
.rb-go{ margin:16px 0 18px; }

/* Cover art in the chart, and the number one's cover. */
.chart-art{ flex:none; width:44px; height:44px; border-radius:6px; overflow:hidden;
            background:var(--bg-4); }
.chart-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.chart-one-art{ flex:none; width:104px; height:104px; border-radius:var(--r-sm);
                overflow:hidden; background:var(--bg-4); }
.chart-one-art img{ width:100%; height:100%; object-fit:cover; display:block; }

/* The chart panel, with or without a picture. */
.chart-hero.has-art{ display:flex; gap:22px; align-items:center; }
.chart-hero.has-art .feature-art{ flex:none; width:200px; border-radius:var(--r-sm); overflow:hidden; }
.chart-hero.has-art .feature-art img{ width:100%; height:auto; display:block; }
@media (max-width:620px){
  .chart-hero.has-art{ flex-direction:column; align-items:flex-start; gap:14px; }
  .chart-hero.has-art .feature-art{ width:100%; }
  .chart-art{ width:38px; height:38px; }
  .chart-one-art{ width:80px; height:80px; }
}

/* The panel above the sign-up form, written in the admin. */
.su-hero:not(:empty){
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:16px 18px; margin-bottom:18px;
}
.su-hero h3{ font-size:17px; margin:4px 0 6px; }
.su-hero-body{ color:var(--muted); font-size:13.5px; line-height:1.5; }
.su-hero-body p{ margin:0; }
.su-hero-art{ border-radius:var(--r-sm); overflow:hidden; margin-bottom:12px; }
.su-hero-art img{ width:100%; height:auto; display:block; }

/* Two-step sign-in, on the profile page. */
.tfa-key{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px; font-weight:700;
  letter-spacing:.08em; background:var(--bg-4); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; word-break:break-all;
}
.tfa-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tfa-row input{
  width:140px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em; text-align:center;
}
.tfa-codes{ margin-top:14px; border:1px solid var(--accent-line); border-radius:var(--r-sm);
            padding:14px 16px; background:var(--bg-3); }
.tfa-codes p{ font-size:12.8px; color:var(--muted); margin:0 0 10px; }
.tfa-codes ul{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
               gap:8px; list-style:none; margin:0; padding:0; }
.tfa-codes li{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px;
               font-weight:700; letter-spacing:.04em; }

/* Radio spins — dashboard and admin only, never a public page. */
.spins{ padding-top:0; }
.spins-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
              gap:12px; margin-bottom:14px; }
.spins-tile{ background:var(--bg-3); border:1px solid var(--line);
             border-radius:var(--r-sm); padding:16px 18px; }
.spins-tile b{ display:block; font-size:30px; line-height:1.05; letter-spacing:-.02em; }
.spins-tile span{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted); }
.spins-tile:first-child b{ color:var(--accent); }
.spins-rows{ max-height:320px; overflow:auto; }
.spins-rows .row{ grid-template-columns:minmax(0,1fr) auto; gap:14px; }