/* ============================================================
music.nw — music information portal (mockup)
A NeuraWeb Global Inc. platform · information, not audio
============================================================ */
:root{
--paper:#F7F5F0; --paper-2:#EFEBE2; --card:#FFFFFF;
--ink:#1A1714; --ink-2:#5B534B; --ink-3:#8B8177;
--line:#DED8CC; --line-2:#E9E4D9;
--sage:#E7E4D3; --sage-ink:#4A4B36;
--shadow: 0 1px 2px rgba(26,23,20,.06), 0 6px 22px rgba(26,23,20,.06);
--shadow-lg: 0 16px 48px rgba(26,23,20,.15);
--r-sm:7px; --r:10px; --r-lg:12px; /* card radius vocabulary */
/* accent comes from data-palette */
}
html[data-theme="dark"]{
--paper:#141110; --paper-2:#1C1815; --card:#201B18;
--ink:#EDE7DF; --ink-2:#B4A99C; --ink-3:#8A7E71;
--line:#332C27; --line-2:#2A2420;
--sage:#22201A; --sage-ink:#C9C4A6;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.5);
--shadow-lg: 0 20px 58px rgba(0,0,0,.6);
}
/* ---- user-selectable palettes (persist via data-palette on ) ---- */
html[data-palette="azure"] { --accent:#2f74c0; --accent-2:#24588f; --hero-a:#1e4f7d; --hero-b:#0a1826; --sw:#2f74c0; }
html[data-palette="crimson"]{ --accent:#b23443; --accent-2:#8a2530; --hero-a:#7a1f2b; --hero-b:#220a0d; --sw:#b23443; }
html[data-palette="verdant"]{ --accent:#3f8a54; --accent-2:#2f6b41; --hero-a:#234f33; --hero-b:#0b1a11; --sw:#3f8a54; }
html[data-theme="dark"][data-palette="azure"] { --accent:#5b9bd8; --accent-2:#3f7bbd; }
html[data-theme="dark"][data-palette="crimson"]{ --accent:#d8697a; --accent-2:#bf4a5b; }
html[data-theme="dark"][data-palette="verdant"]{ --accent:#6bbd7f; --accent-2:#4f9d63; }
html[data-scale="1"]{ font-size:14px; }
html[data-scale="2"]{ font-size:15.5px; }
html[data-scale="3"]{ font-size:17px; }
html[data-scale="4"]{ font-size:18.5px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.serif{ font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; }
.mono{ font-family: ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
::-webkit-scrollbar{ height:9px; width:9px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }
/* ============================================================ HEADER */
.ticker{ background:var(--ink); color:var(--paper); height:28px; display:flex; align-items:center; overflow:hidden; }
html[data-theme="dark"] .ticker{ background:#0d0b0a; }
.ticker-track{ display:flex; white-space:nowrap; animation:tick 48s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-item{ padding:0 20px; font-size:.7rem; letter-spacing:.02em; opacity:.9; display:inline-flex; align-items:center; gap:9px; }
.ticker-item b{ color:color-mix(in srgb,var(--accent) 45%, #ffffff); font-weight:600; }
.ticker-item .dot{ width:4px;height:4px;border-radius:50%;background:var(--accent); }
header.site{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter:saturate(1.2) blur(14px); border-bottom:1px solid var(--line); }
.hdr-row{ position:relative; display:flex; align-items:center; gap:18px; padding:18px clamp(14px,2.6vw,34px) 10px; }
.brand{ display:flex; flex-direction:row; align-items:center; gap:11px; line-height:1; cursor:pointer; user-select:none; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; }
.brand-mark{ width:2.9rem; height:2.9rem; color:var(--accent); flex:0 0 auto; }
.brand .name{ font-size:1.4rem; font-weight:600; letter-spacing:-.02em; }
.brand .name .nw{ color:var(--accent); }
.brand .sub{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
nav.main{ position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:2px; flex-wrap:nowrap; }
nav.main button{ background:none; border:none; color:var(--ink-2); font-size:.84rem; padding:7px 11px; border-radius:8px; position:relative; transition:color .15s, background .15s; }
nav.main button:hover{ color:var(--ink); background:var(--paper-2); }
nav.main button.active{ color:var(--ink); font-weight:600; }
nav.main button.active::after{ content:""; position:absolute; left:11px; right:11px; bottom:1px; height:2px; background:var(--accent); border-radius:2px; }
.hdr-tools{ margin-left:auto; display:flex; align-items:center; gap:5px; }
.tool{ background:none; border:1px solid transparent; color:var(--ink-2); width:32px; height:32px; border-radius:9px; display:grid; place-items:center; transition:.15s; }
.tool:hover{ background:var(--paper-2); color:var(--ink); }
.tool svg{ width:17px; height:17px; }
.palette-group{ display:flex; align-items:center; gap:5px; padding:0 6px; border-right:1px solid var(--line); margin-right:2px; }
.sw{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); padding:0; transition:.15s; position:relative; }
.sw:hover{ transform:scale(1.12); }
.sw.on{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.size-group{ display:flex; align-items:center; gap:1px; padding:0 4px; }
.size-group button{ background:none; border:none; color:var(--ink-3); line-height:1; padding:4px 3px; font-weight:600; transition:.12s; }
.size-group button:hover{ color:var(--ink); }
.size-group button.on{ color:var(--accent); }
.s1{font-size:.7rem}.s2{font-size:.82rem}.s3{font-size:.96rem}.s4{font-size:1.12rem}
.lang{ display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:9px; border:1px solid var(--line); color:var(--ink-2); font-size:.78rem; background:none; }
.lang:hover{ background:var(--paper-2); }
.signin{ padding:7px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.82rem; font-weight:600; box-shadow:var(--shadow); transition:.15s; }
.signin:hover{ border-color:var(--accent); color:var(--accent); }
.avatar{ width:32px;height:32px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700; font-size:.8rem; border:2px solid var(--card); }
.ctx-row{ position:relative; display:flex; align-items:center; gap:14px; padding:6px clamp(14px,2.6vw,34px) 16px; flex-wrap:wrap; }
.ctx-loc{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; }
.ctx-loc svg{ width:15px;height:15px; color:var(--accent); }
.ctx-pill{ font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); padding:3px 9px; border-radius:20px; }
.searchwrap{ position:absolute; left:50%; transform:translateX(-50%); width:min(52vw,640px); min-width:280px; z-index:5; }
.searchwrap input{ width:100%; }
.searchwrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px;height:16px; color:var(--ink-3); }
.searchwrap input{ width:100%; padding:9px 13px 9px 38px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.88rem; box-shadow:var(--shadow); }
.searchwrap input::placeholder{ color:var(--ink-3); }
.searchwrap input:focus{ outline:none; border-color:var(--accent); }
.ctx-meta{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--ink-3); }
.ctx-meta .live{ width:7px;height:7px;border-radius:50%;background:#2ec26b; box-shadow:0 0 0 3px rgba(46,194,107,.18); }
/* ============================================================ LAYOUT */
main{ min-height:60vh; }
.wrap{ padding: clamp(18px,2.2vw,28px) clamp(14px,2.6vw,34px) 0; }
.section{ padding: clamp(14px,2.2vw,26px) 0; }
.section:first-child{ padding-top:0; }
.eyebrow{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--accent); display:inline-block; }
h1,h2,h3{ margin:0; }
.h-xl{ font-size:clamp(1.75rem,3.6vw,2.9rem); line-height:1.02; letter-spacing:-.02em; }
.h-lg{ font-size:clamp(1.45rem,2.7vw,2.2rem); line-height:1.05; letter-spacing:-.015em; }
.h-md{ font-size:clamp(1.1rem,1.9vw,1.4rem); letter-spacing:-.01em; }
.muted{ color:var(--ink-2); } .dim{ color:var(--ink-3); }
/* one shared hero — palette-driven, used by home + detail alike */
.hero{ position:relative; overflow:hidden; border-radius:16px; margin-top:12px;
background: radial-gradient(120% 150% at 85% 15%, color-mix(in srgb,var(--hero-a) 92%, transparent), transparent 60%), linear-gradient(120deg, var(--hero-a), var(--hero-b) 74%);
color:#f4efe8; box-shadow:var(--shadow-lg); }
.hero .grain{ position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay; background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px); background-size:4px 4px; }
.hero--feature{ min-height:min(32vh,268px); display:flex; align-items:center; gap:clamp(16px,2.5vw,36px); }
.hero-inner{ position:relative; padding:clamp(18px,3vw,32px); flex:1; min-width:0; }
.hero .kicker{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--accent) 45%, #ffffff); font-weight:700; }
.hero h1{ margin:8px 0 8px; }
.hero p{ font-size:.95rem; color:#e6ddd2; line-height:1.55; }
.hero .cta{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.btn{ padding:10px 18px; border-radius:10px; font-weight:600; font-size:.88rem; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:.15s; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); }
.hero-figure{ position:relative; flex:0 0 auto; align-self:center; width:min(30%,232px); margin:clamp(18px,3vw,32px) 0 clamp(18px,3vw,32px) clamp(18px,3vw,32px); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.34); }
.hero-figure svg{ width:100%; height:auto; display:block; border-radius:0; }
@media(max-width:820px){ .hero-figure{ display:none; } }
.row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.row-head .link{ font-size:.8rem; color:var(--accent); font-weight:600; cursor:pointer; }
.row-head .link:hover{ text-decoration:underline; }
.shelf{ display:flex; gap:16px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x mandatory; }
.shelf::-webkit-scrollbar{ height:7px; }
.card-album{ scroll-snap-align:start; flex:0 0 auto; width:172px; cursor:pointer; }
.cover{ width:172px; height:172px; border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--shadow); border:1px solid var(--line-2); transition:transform .18s, box-shadow .18s; }
.card-album:hover .cover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.cover svg{ display:block; width:100%; height:100%; }
.cover img{ display:block; width:100%; height:100%; object-fit:contain; background:var(--paper-2); }
.card-album .title{ font-weight:600; font-size:.88rem; margin-top:9px; line-height:1.25; }
.card-album .meta{ font-size:.75rem; color:var(--ink-3); margin-top:2px; }
.artist-strip{ display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; }
.artist-chip{ flex:0 0 auto; width:132px; text-align:center; cursor:pointer; }
.portrait{ width:132px; height:132px; border-radius:50%; overflow:hidden; margin:0 auto; border:2px solid var(--line-2); box-shadow:var(--shadow); transition:.18s; }
.artist-chip:hover .portrait{ transform:scale(1.03); border-color:var(--accent); }
.portrait svg{ width:100%; height:100%; display:block; }
.artist-chip .n{ font-weight:600; margin-top:10px; font-size:.9rem; }
.artist-chip .r{ font-size:.72rem; color:var(--ink-3); margin-top:1px; }
.feature-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.tile{ padding:18px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.tile .lbl{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.tile .big{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; margin-top:6px; }
.tile .sm{ color:var(--ink-2); font-size:.84rem; margin-top:5px; }
/* ============================================================ DETAIL */
.hero-detail{ padding:clamp(24px,3vw,36px); }
.dh-inner{ position:relative; display:flex; gap:clamp(16px,2.4vw,28px); align-items:center; flex-wrap:wrap; }
.dh-portrait{ width:auto; max-width:400px; height:clamp(200px,22vw,300px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:3px solid rgba(255,255,255,.14); flex:0 0 auto; }
.dh-portrait img{ width:auto; height:100%; object-fit:contain; display:block; }
.dh-portrait.round{ border-radius:50%; }
.dh-portrait svg{ width:100%; height:100%; display:block; }
.dh-txt{ flex:1; min-width:240px; }
.dh-type{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--accent) 50%, #ffffff); font-weight:700; }
.dh-name{ font-size:clamp(1.6rem,3.4vw,2.55rem); line-height:1.02; letter-spacing:-.02em; margin:6px 0 8px; }
.dh-facts{ display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; }
.dh-fact .k{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.dh-fact .v{ font-size:.92rem; font-weight:600; margin-top:2px; }
.dh-actions{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.rate{ display:inline-flex; align-items:center; gap:3px; }
.rate .star{ width:19px;height:19px; cursor:pointer; color:rgba(255,255,255,.35); transition:.1s; }
.rate .star.lit{ color:#fff; }
.score{ font-weight:700; font-size:1rem; margin-left:8px; color:#fff; }
.score .of{ color:rgba(255,255,255,.6); font-weight:400; font-size:.78rem; }
.detail-body{ display:grid; grid-template-columns: 1fr 288px; gap:clamp(20px,2.4vw,34px); padding:clamp(16px,2.2vw,26px) 0; }
@media(max-width:900px){ .detail-body{ grid-template-columns:1fr; } }
.bio p{ font-size:1.02rem; line-height:1.62; color:var(--ink); }
.bio p + p{ margin-top:.9em; }
.side .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); margin-bottom:16px; }
.panel h4{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:700; }
.member{ display:flex; align-items:center; gap:11px; padding:7px 0; cursor:pointer; border-radius:9px; }
.member:hover{ background:var(--paper-2); padding-left:7px; }
.member .mp{ width:40px;height:40px;border-radius:50%; overflow:hidden; flex:0 0 auto; border:1px solid var(--line-2); }
.member .mp svg{ width:100%;height:100%; }
.member .mp img{ width:100%;height:100%; object-fit:cover; display:block; }
.member .mn{ font-weight:600; font-size:.88rem; }
.member .mr{ font-size:.74rem; color:var(--ink-3); }
.stat-line{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:.86rem; }
.stat-line:last-child{ border-bottom:none; }
.stat-line .v{ font-weight:600; }
.tag{ display:inline-block; font-size:.72rem; padding:4px 10px; border-radius:20px; background:var(--paper-2); color:var(--ink-2); margin:0 5px 5px 0; border:1px solid var(--line-2); cursor:pointer; }
.tag:hover{ border-color:var(--accent); color:var(--accent); }
.disco{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.disco .card-album{ width:auto; }
.disco .cover{ width:100%; height:auto; aspect-ratio:1; }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
/* tracklist — informational rows (no playback) */
.track{ display:grid; grid-template-columns:30px 1fr auto auto; gap:12px; align-items:center; padding:9px 10px; border-radius:9px; }
.track:hover{ background:var(--paper-2); }
.track .num{ color:var(--ink-3); font-size:.82rem; text-align:center; }
.track .tt{ font-weight:600; font-size:.9rem; }
.track .tw{ font-size:.74rem; color:var(--ink-3); }
.track .dur{ color:var(--ink-3); font-size:.82rem; }
.livetag{ font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); padding:2px 7px; border-radius:20px; cursor:pointer; }
.livetag:hover{ background:color-mix(in srgb,var(--accent) 12%, transparent); }
/* ============================================================ CONNECTIONS */
.constellation{ position:relative; background:radial-gradient(90% 90% at 50% 40%, var(--paper-2), var(--paper)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
html[data-theme="dark"] .constellation{ background:radial-gradient(90% 90% at 50% 35%, #1a1512, #0f0c0b); }
.constellation svg{ display:block; width:100%; height:auto; }
.cy-node circle{ transition:.2s; cursor:pointer; }
.cy-node text{ pointer-events:none; user-select:none; }
.cy-edge{ transition:.2s; }
.legend{ display:flex; gap:18px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-2); }
.legend span{ display:inline-flex; align-items:center; gap:8px; }
.legend i{ width:22px; height:0; display:inline-block; }
/* ============================================================ CHARTS */
.chart-row{ padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:.15s; }
.chart-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.chart-row .rank{ font-size:1.4rem; font-weight:700; color:var(--ink-3); text-align:center; }
.chart-row .rank.top{ color:var(--accent); }
.chart-row .mini{ width:54px;height:54px;border-radius:8px; overflow:hidden; flex:0 0 auto; }
.chart-row .mini img{ width:100%;height:100%; object-fit:cover; display:block; }
.chart-row .mini svg{ width:100%;height:100%; display:block; }
.chart-row .mini svg{ width:100%;height:100%; }
.chart-row .cs .n{ font-weight:700; color:var(--accent); }
.chart-row .cs .l{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
/* ============================================================ LIVE */
.gig{ display:flex; gap:18px; padding:18px; margin-bottom:14px; flex-wrap:wrap; }
.gig .date{ text-align:center; flex:0 0 auto; }
.gig .date .d{ font-size:1.9rem; font-weight:700; line-height:1; }
.gig .date .m{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.gig .date .y{ font-size:.78rem; color:var(--ink-3); }
.gig .gi{ flex:1; min-width:220px; }
.gig .gi h3{ font-size:1.1rem; }
.setlist{ margin-top:11px; display:flex; flex-wrap:wrap; gap:6px; }
.setlist .sl{ font-size:.76rem; padding:4px 10px; border-radius:8px; background:var(--paper-2); border:1px solid var(--line-2); }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-3); }
.empty svg{ width:50px;height:50px; opacity:.5; margin-bottom:12px; }
/* ============================================================ ACCOUNT */
.acct-head{ display:flex; align-items:center; gap:16px; padding-top:4px; flex-wrap:wrap; }
.acct-av{ width:60px;height:60px;border-radius:50%; overflow:hidden; border:2px solid var(--line-2); box-shadow:var(--shadow); flex:0 0 auto; }
.acct-av svg{ width:100%;height:100%; display:block; }
.acct-id .n{ font-size:1.35rem; font-weight:700; letter-spacing:-.01em; }
.acct-id .meta{ font-size:.8rem; color:var(--ink-3); margin-top:4px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.vbadge{ display:inline-flex; align-items:center; gap:5px; font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding:3px 9px; border-radius:20px; }
.vbadge svg{ width:11px;height:11px; }
.vbadge.sbadge{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:none; }
.acct-head .spacer{ margin-left:auto; }
.btn-out{ padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:.8rem; font-weight:600; }
.btn-out:hover{ border-color:var(--accent); color:var(--accent); }
.btn-line{ background:var(--card); border:1px solid var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--accent); color:var(--accent); }
.acct-tabs{ display:flex; gap:2px; margin:16px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; }
.acct-tabs button{ background:none; border:none; color:var(--ink-2); font-size:.84rem; font-weight:600; padding:9px 13px; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; }
.acct-tabs button:hover{ color:var(--ink); }
.acct-tabs button.on{ color:var(--accent); border-bottom-color:var(--accent); }
.acct-body{ padding:22px 0 6px; }
.stat-cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); }
/* .stat-card v1 removed — duplicate; canonical definition below */
.stat-card .num{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.stat-card .lab{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:3px; }
.info-banner{ display:flex; gap:12px; align-items:flex-start; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:12px; padding:14px 16px; margin-bottom:20px; max-width:820px; }
.info-banner svg{ width:19px;height:19px;color:var(--accent);flex:0 0 auto;margin-top:1px; }
.info-banner .t{ font-weight:600; font-size:.9rem; }
.info-banner .d{ font-size:.83rem; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.kv{ display:grid; grid-template-columns:140px 1fr; gap:0 18px; max-width:600px; }
.kv .k{ font-size:.82rem; color:var(--ink-3); padding:11px 0; border-bottom:1px solid var(--line-2); }
.kv .v{ font-weight:600; font-size:.9rem; padding:11px 0; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-2); }
.lock{ width:13px;height:13px;color:var(--ink-3); flex:0 0 auto; }
.pref{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-2); max-width:600px; }
.pref .pt{ font-weight:600; font-size:.88rem; } .pref .pd{ font-size:.77rem; color:var(--ink-3); margin-top:1px; }
.switch{ width:42px;height:24px;border-radius:20px; background:var(--line); position:relative; flex:0 0 auto; transition:.15s; border:none; cursor:pointer; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px;height:20px;border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch.on{ background:var(--accent); } .switch.on::after{ left:20px; }
.pref-group{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:24px 0 4px; }
.plans{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); max-width:720px; margin-top:16px; }
.plan{ padding:22px; position:relative; }
.plan.best{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.plan .tag2{ position:absolute; top:-10px; right:16px; background:var(--accent); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.plan .amt{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; } .plan .amt span{ font-size:.85rem; color:var(--ink-3); font-weight:500; }
.plan .desc{ font-size:.83rem; color:var(--ink-2); margin:8px 0 16px; min-height:2.4em; }
.plan .btn{ width:100%; justify-content:center; }
.pay-note{ display:flex; align-items:flex-start; gap:8px; font-size:.8rem; color:var(--ink-3); margin-top:18px; max-width:640px; }
.pay-note svg{ width:15px;height:15px; flex:0 0 auto; margin-top:1px; }
.supporter-card{ background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,transparent), color-mix(in srgb,var(--accent-2) 12%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--r); padding:22px; max-width:560px; }
/* ============================================================ FOOTER */
footer.site{ background:var(--sage); color:var(--sage-ink); border-top:1px solid var(--line); padding:clamp(28px,4vw,52px) clamp(14px,2.6vw,34px); position:relative; }
footer.site::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--sage-ink)); opacity:.45; }
.foot-tag{ font-size:clamp(1rem,1.5vw,1.25rem); max-width:64ch; }
.foot-tag b{ font-weight:600; }
.foot-covenant{ margin-top:14px; font-size:.88rem; opacity:.85; }
.foot-links{ margin-top:22px; display:flex; gap:24px; flex-wrap:wrap; font-size:.9rem; }
.foot-links a{ opacity:.85; cursor:pointer; } .foot-links a:hover{ opacity:1; color:var(--accent); }
/* ============================================================ MODAL / TOAST */
.modal-bg{ position:fixed; inset:0; background:rgba(10,8,7,.55); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-bg.open{ display:flex; }
.modal{ border-radius:var(--r-lg); padding:30px; width:min(410px,100%); box-shadow:var(--shadow-lg); }
.modal h3{ font-size:1.4rem; letter-spacing:-.01em; }
.modal .id-badge{ display:flex; align-items:center; gap:12px; margin:18px 0; padding:14px; border-radius:12px; background:color-mix(in srgb,var(--accent) 10%, transparent); border:1px solid var(--line); }
.modal .id-badge .k{ width:42px;height:42px;border-radius:11px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid;place-items:center; color:#fff; flex:0 0 auto; }
.modal .id-badge .k svg{ width:21px;height:21px; }
.modal input{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:.92rem; margin-bottom:11px; }
.modal .btn-primary{ width:100%; justify-content:center; }
.modal .fine{ font-size:.74rem; color:var(--ink-3); text-align:center; margin-top:14px; }
.modal .x{ float:right; background:none; border:none; color:var(--ink-3); font-size:1.3rem; line-height:1; }
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:11px; font-size:.86rem; z-index:120; box-shadow:var(--shadow-lg); transition:.3s; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.fade{ animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
/* ============================================================
HEADER LIVE-SEARCH DROPDOWN (typeahead)
============================================================ */
.suggest{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:calc(100vw - 2*clamp(14px,2.6vw,34px)); z-index:60;
background:var(--card); border:1px solid var(--line); border-radius:12px;
box-shadow:0 14px 38px rgba(0,0,0,.18); overflow:hidden auto; max-height:min(70vh,460px); }
.sg-h{ font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3);
padding:11px 14px 5px; font-weight:700; }
.sg-row{ display:flex; align-items:center; gap:11px; padding:8px 14px; text-decoration:none; color:var(--ink); }
.sg-row:hover, .sg-row.on{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.sg-ini{ width:34px; height:34px; border-radius:8px; flex:none; display:flex; align-items:center;
justify-content:center; color:#fff; font-weight:700; font-size:.78rem;
font-family:'Iowan Old Style',Georgia,serif; }
.sg-tx{ display:flex; flex-direction:column; min-width:0; }
.sg-nm{ font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-sub{ font-size:.75rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-none{ padding:14px; color:var(--ink-3); font-size:.85rem; }
.sg-all{ display:block; padding:11px 14px; font-size:.8rem; font-weight:600; color:var(--accent);
text-decoration:none; border-top:1px solid var(--line); }
.sg-all:hover, .sg-all.on{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
/* ============================================================
SLIDE-OVER DRAWER (ported from THMS, tokens remapped to music.nw)
Read-only mode: dismiss via X / Escape / backdrop.
Form mode (.slideover--form): dismiss via X only, tracks dirty state.
============================================================ */
.slideover{ position:fixed; inset:0; z-index:1000; display:none; pointer-events:none; }
.slideover--open{ display:block; pointer-events:auto; }
.slideover__backdrop{ position:absolute; inset:0; background:rgba(26,23,20,.38); opacity:0;
transition:opacity .28s cubic-bezier(.4,0,.2,1); }
.slideover--open .slideover__backdrop{ opacity:1; }
.slideover__panel{ position:absolute; top:0; right:0; bottom:0; width:520px; max-width:100vw;
background:var(--paper); border-left:3px solid var(--accent); box-shadow:var(--shadow-lg);
transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
display:flex; flex-direction:column; overflow:hidden; }
.slideover--open .slideover__panel{ transform:translateX(0); }
.slideover--wide .slideover__panel{ width:720px; }
.slideover__header{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:16px 20px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.slideover__header-actions{ display:flex; align-items:center; gap:8px; }
.slideover__title{ font-family:'Iowan Old Style',Georgia,serif; font-size:1.2rem; color:var(--ink);
letter-spacing:-.01em; line-height:1.2; margin:0; }
.slideover__eyebrow{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.68rem;
letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.slideover__unsaved{ display:none; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.68rem;
color:#B8791F; letter-spacing:.06em; text-transform:uppercase; }
.slideover--form.slideover--dirty .slideover__unsaved{ display:inline-block; }
.slideover__close{ width:40px; height:40px; display:grid; place-items:center; background:transparent;
border:1px solid var(--line); border-radius:9px; color:var(--ink-2); cursor:pointer;
font-size:1.15rem; line-height:1; transition:all .15s cubic-bezier(.4,0,.2,1); }
.slideover__close:hover{ color:var(--ink); border-color:var(--ink); }
.slideover__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.slideover__body{ flex:1 1 auto; overflow-y:auto; padding:20px; font-size:.9rem; line-height:1.5; color:var(--ink); }
.slideover__body--loading{ display:grid; place-items:center; color:var(--ink-3);
font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.slideover__footer{ display:none; padding:16px 20px; border-top:1px solid var(--line);
background:var(--paper-2); gap:12px; justify-content:flex-end; }
.slideover--form .slideover__footer{ display:flex; }
@media(max-width:1100px){ .slideover__panel, .slideover--wide .slideover__panel{ width:90vw; } }
@media(max-width:720px){ .slideover__panel, .slideover--wide .slideover__panel{ width:100vw; border-left:none; border-top:3px solid var(--accent); } }
@media(prefers-reduced-motion:reduce){ .slideover__backdrop, .slideover__panel{ transition:none; } }
/* ============================================================
ACCOUNT DROPDOWN (avatar chip menu) + ACCOUNT PANEL (drawer form)
============================================================ */
.acctmenu{ position:relative; }
button.avatar{ font:inherit; cursor:pointer; }
.acctmenu__pop{ position:absolute; top:calc(100% + 8px); right:0; min-width:230px; z-index:120;
background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
padding:6px; display:none; }
.acctmenu__pop.open{ display:block; }
.acctmenu__hd{ padding:9px 11px 7px; font-weight:600; font-size:.9rem; color:var(--ink);
display:flex; flex-direction:column; line-height:1.25; }
.acctmenu__hd span{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.72rem; color:var(--ink-3); font-weight:400; margin-top:2px; }
.acctmenu__grp{ padding:8px 11px 3px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.acctmenu__pop a{ display:block; padding:8px 11px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:.88rem; }
.acctmenu__pop a:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.acctmenu__sep{ height:1px; background:var(--line); margin:6px 4px; }
.acctmenu__out{ color:var(--accent) !important; font-weight:600; }
.acctp__id{ margin-bottom:16px; }
.acctp__une{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:1rem; color:var(--ink); font-weight:600; }
.acctp__verified{ font-family:inherit; font-size:.72rem; color:var(--sage-ink); background:var(--sage);
padding:2px 8px; border-radius:20px; margin-left:6px; vertical-align:middle; }
.acctp__note{ font-size:.82rem; color:var(--ink-3); margin:6px 0 0; }
.acctp__form label{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-3); font-weight:700; margin:14px 0 0; }
.acctp__form input, .acctp__form textarea{ display:block; width:100%; margin-top:6px; padding:9px 12px;
border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
font-size:.9rem; font-family:inherit; box-sizing:border-box; }
.acctp__form input:focus, .acctp__form textarea:focus{ outline:none; border-color:var(--accent); }
.acctp__form textarea{ resize:vertical; }
.acctp__row{ display:flex; gap:12px; }
.acctp__row label{ flex:1; }
.acctp__msg{ font-size:.82rem; margin:12px 0 0; min-height:1em; }
.acctp__msg.is-err{ color:#B8791F; }
.acctp__more{ font-size:.82rem; color:var(--ink-3); margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.acctp__more a{ color:var(--accent); text-decoration:none; font-weight:600; }
/* live action buttons + interactive rating */
.btn.is-active{ background:var(--sage); color:var(--sage-ink); border-color:var(--sage-ink); }
.btn[data-nw-action]{ cursor:pointer; }
.rate--live .star{ cursor:pointer; }
.myrating{ opacity:.9; }
/* display-only rating stars are a gauge, not a control */
.rate:not(.rate--live) .star{ cursor:default; pointer-events:none; }
/* ===== ACCOUNT CONSOLE ===== */
.acct-av{ width:56px;height:56px;border-radius:50%; display:grid;place-items:center; background:var(--accent); color:#fff; font-weight:700; font-size:1.15rem; flex:0 0 auto; letter-spacing:.02em; }
.acct-tabs{ display:flex; gap:2px; margin:18px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.acct-tabs::-webkit-scrollbar{ display:none; }
.acct-tab{ padding:10px 14px; white-space:nowrap; text-decoration:none; color:var(--ink-2); font-size:.88rem; font-weight:600; border-bottom:2px solid transparent; cursor:pointer; }
.acct-tab:hover{ color:var(--ink); }
.acct-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.acct-tab--danger{ color:#b23443; }
.acct-tab--danger:hover{ color:#8e2833; }
.stat-card{ display:block; text-decoration:none; padding:16px 18px; transition:border-color .15s, transform .15s; }
.stat-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat-card .num{ font-size:1.9rem; color:var(--ink); line-height:1; }
.stat-card .lab{ font-size:.8rem; color:var(--ink-3); margin-top:7px; }
/* fix cramped ratings/chart cards on account + list pages */
.chart-row{ display:flex; align-items:center; gap:14px; }
.chart-row .ci{ flex:1 1 auto; min-width:0; }
.chart-row .ci .t{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-row .ci .s{ color:var(--ink-3); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-row .cs{ flex:0 0 auto; text-align:right; }
/* preferences toggles in the drawer */
.acctp__toggle{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); font-size:.9rem; cursor:pointer; }
.acctp__toggle input{ width:auto; margin-top:3px; flex:0 0 auto; }
.acctp__toggle small{ display:block; color:var(--ink-3); font-size:.78rem; margin-top:2px; }
/* bordered button for light panels (support page etc.) */
.btn-line{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-line:hover{ border-color:var(--accent); color:var(--accent); }
/* panels on the main column need their own padding (only .side .panel had it) */
.panel{ padding:18px 20px; }
/* ===== ALBUM ARTWORK GALLERY ===== */
.album-gallery .gal-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.gal-thumb:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.gal-thumb{ position:relative; width:84px; height:84px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; padding:0; cursor:pointer; background:var(--paper-2); transition:border-color .15s, transform .15s; }
.gal-thumb:hover{ border-color:var(--accent); transform:translateY(-1px); }
.gal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-cap{ position:absolute; left:0; right:0; bottom:0; font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.72)); padding:10px 5px 3px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gal-lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,18,.92); display:flex; align-items:center; justify-content:center; gap:12px; padding:24px; }
.gal-lightbox[hidden]{ display:none; }
.gal-figure{ margin:0; max-width:min(90vw,900px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px; }
.gal-full{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#111; }
.gal-figcap{ color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.gal-nav, .gal-x{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:.15s; }
.gal-nav{ width:48px; height:48px; font-size:1.8rem; flex:0 0 auto; }
.gal-nav:hover, .gal-x:hover{ background:rgba(255,255,255,.22); }
.gal-x{ position:absolute; top:20px; right:24px; width:40px; height:40px; font-size:1.5rem; }
@media(max-width:720px){ .gal-nav{ width:40px; height:40px; } .gal-thumb{ width:68px; height:68px; } }
/* real artist-photo images fill the same box the generated monogram SVGs use */
.portrait-img{ display:block; width:100%; height:100%; object-fit:cover; }
.portrait .portrait-img, .dh-portrait .portrait-img, .mp .portrait-img,
.acct-av .portrait-img{ border-radius:inherit; }
.artist-credit{ font-size:.72rem; color:var(--ink-3); margin-top:8px; }
.artist-credit a{ color:var(--ink-3); text-decoration:underline; }
/* ===== MEDIA GALLERY (full-width, below discography/tracklist) ===== */
.media-gallery{ margin:8px 0 34px; }
.media-gallery .eyebrow{ margin-bottom:14px; }
.mgal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
.mgal-cell:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.mgal-cell{ position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; padding:0; cursor:pointer; background:var(--paper-2); transition:border-color .15s, transform .15s; }
.mgal-cell:hover{ border-color:var(--accent); transform:translateY(-2px); }
.mgal-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.mgal-cap{ position:absolute; left:0; right:0; bottom:0; font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.74)); padding:14px 6px 5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:720px){ .mgal-grid{ grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); } }
/* multi-disc tracklists render as side-by-side columns */
.disc-cols--multi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:clamp(18px,2.2vw,34px); align-items:start; }
.disc-col{ min-width:0; }
/* ===== CONNECTIONS LANDING ===== */
.conn-landing{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
.conn-explain p{ margin:10px 0 0; font-size:.94rem; line-height:1.55; }
.conn-hint{ margin-top:14px!; padding:12px 14px; background:var(--paper-2); border-left:3px solid var(--accent); border-radius:8px; font-size:.88rem; }
.conn-try{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.conn-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.conn-chip{ padding:7px 13px; border:1px solid var(--line); border-radius:20px; background:transparent; color:var(--ink); font-size:.84rem; font-weight:600; cursor:pointer; transition:.15s; }
.conn-chip:hover{ border-color:var(--accent); color:var(--accent); }
.conn-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.conn-stage{ padding:18px 20px; }
.conn-stage-cap{ font-size:.9rem; color:var(--ink-2); margin-bottom:6px; }
.conn-stage.loading{ opacity:.55; transition:opacity .2s; }
@media(max-width:900px){ .conn-landing{ grid-template-columns:1fr; } }
/* ===== CONNECTIONS ROSTER + FOCUS MODE ===== */
.conn-roster h4{ margin-bottom:12px; }
.cn-list{ display:flex; flex-direction:column; max-height:430px; overflow-y:auto; }
.cn-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--ink); transition:background .12s; }
.cn-row:hover, .cn-row.cn-row-hot{ background:var(--paper-2); }
.cn-row.cn-row-hot{ box-shadow:inset 3px 0 0 var(--accent); }
.cn-row-name{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cn-row-role{ font-size:.72rem; color:var(--ink-3); white-space:nowrap; flex:0 0 auto; }
/* focus mode: hovering a name/node highlights its thread, dims the rest */
.cn-node{ transition:opacity .15s; cursor:pointer; }
.cn-focusing .cn-node.cn-dim{ opacity:.22; }
.cn-node.cn-hot .cn-ring{ stroke:var(--accent); stroke-width:4; }
.cn-edge{ transition:opacity .15s, stroke-opacity .15s; }
.cn-focusing .cn-edge-off{ opacity:.12; }
.cn-focusing .cn-edge-on{ stroke-opacity:1; }
/* ===== LIST CONTROLS (view toggle + sort) ===== */
.listctl{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; }
.listctl-views{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lc-view{ display:grid; place-items:center; width:38px; height:34px; background:transparent; border:none; border-right:1px solid var(--line); color:var(--ink-3); cursor:pointer; transition:.12s; }
.lc-view:last-child{ border-right:none; }
.lc-view:hover{ color:var(--ink); background:var(--paper-2); }
.lc-view.active{ color:var(--accent); background:var(--paper-2); }
.lc-view svg{ fill:currentColor; }
.listctl-sort{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lc-sort-lbl{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-right:2px; }
.lc-sort{ padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink-2); font-size:.82rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:.12s; }
.lc-sort:hover{ border-color:var(--accent); color:var(--ink); }
.lc-sort.active{ border-color:var(--accent); color:var(--accent); background:var(--paper-2); }
.lc-arrow{ width:0; height:0; }
.lc-sort.dir-asc .lc-arrow{ border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:5px solid currentColor; }
.lc-sort.dir-desc .lc-arrow{ border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; }
/* ---- GRID view (default; matches existing .disco/.grid) ---- */
.listcontainer.view-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.listcontainer.view-grid .lc-listcell, .listcontainer.view-grid .lc-tablecell{ display:none; }
/* ---- LIST view (dense horizontal rows) ---- */
.listcontainer.view-list{ display:flex; flex-direction:column; gap:2px; }
.listcontainer.view-list [data-sortrow]{ display:flex!important; align-items:center; gap:14px; width:auto!important; padding:8px 10px; border-radius:9px; text-align:left!important; }
.listcontainer.view-list [data-sortrow]:hover{ background:var(--paper-2); }
.listcontainer.view-list .lc-thumb{ width:46px; height:46px; flex:0 0 auto; border-radius:7px; overflow:hidden; }
.listcontainer.view-list .lc-thumb svg, .listcontainer.view-list .lc-thumb img{ width:100%; height:100%; object-fit:cover; }
.listcontainer.view-list .title, .listcontainer.view-list .lc-listcell{ margin:0!important; }
.listcontainer.view-list .lc-gridonly{ display:none; }
.listcontainer.view-list .lc-listcell{ display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; }
.listcontainer.view-list .lc-lc-main{ flex:1 1 auto; min-width:0; }
.listcontainer.view-list .lc-lc-main .t{ font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listcontainer.view-list .lc-lc-main .s{ font-size:.78rem; color:var(--ink-3); }
.listcontainer.view-list .lc-lc-meta{ flex:0 0 auto; font-size:.82rem; color:var(--ink-3); display:flex; gap:16px; }
/* ---- TABLE view (columns, read down) ---- */
.listcontainer.view-table{ display:block; }
.listcontainer.view-table [data-sortrow]{ display:grid!important; grid-template-columns:44px 1fr 1fr 70px 70px; gap:14px; align-items:center; width:auto!important; padding:9px 10px; border-bottom:1px solid var(--line); text-align:left!important; }
.listcontainer.view-table [data-sortrow]:hover{ background:var(--paper-2); }
.listcontainer.view-table .lc-thumb{ width:40px; height:40px; border-radius:6px; overflow:hidden; }
.listcontainer.view-table .lc-thumb svg, .listcontainer.view-table .lc-thumb img{ width:100%; height:100%; object-fit:cover; }
.listcontainer.view-table .lc-gridonly, .listcontainer.view-table .title, .listcontainer.view-table .meta{ display:none!important; }
.listcontainer.view-table .lc-tablecell{ display:block; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listcontainer.view-table .lc-tc-title{ font-weight:600; }
.listcontainer.view-table .lc-tc-num{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
@media(max-width:640px){ .listcontainer.view-table [data-sortrow]{ grid-template-columns:40px 1fr 56px; } .listcontainer.view-table .lc-tc-hide-sm{ display:none!important; } }
/* ===== FIXES: grid gap, hero real-cover, per-row stepper ===== */
/* 1) cards in a listcontainer must fill grid cells (kill the old flex/fixed-width) */
.listcontainer.view-grid .card-album{ flex:none; width:auto; }
.listcontainer.view-grid .cover, .listcontainer.view-grid .lc-thumb{ width:100%; height:auto; aspect-ratio:1; }
.listcontainer.view-grid[data-cols="4"]{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.listcontainer.view-grid[data-cols="8"]{ grid-template-columns:repeat(8, minmax(0,1fr)); }
.listcontainer.view-grid[data-cols="12"]{ grid-template-columns:repeat(12, minmax(0,1fr)); }
@media(max-width:900px){ .listcontainer.view-grid[data-cols]{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } }
@media(max-width:560px){ .listcontainer.view-grid[data-cols]{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); } }
/* 2) hero feature: real ![]()
covers must be contained like the SVG was */
.hero-figure img, .hero-figure .cover-img{ width:100%; height:auto; display:block; border-radius:0; object-fit:cover; }
.hero-figure{ overflow:hidden; }
/* 3) per-row stepper in the controls bar */
.listctl-cols{ display:inline-flex; align-items:center; gap:6px; }
.listctl-cols .lc-cols-lbl{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.lc-cols{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.lc-cols button{ width:32px; height:30px; background:transparent; border:none; border-right:1px solid var(--line); color:var(--ink-3); font-size:.8rem; font-weight:600; cursor:pointer; transition:.12s; }
.lc-cols button:last-child{ border-right:none; }
.lc-cols button:hover{ color:var(--ink); background:var(--paper-2); }
.lc-cols button.active{ color:var(--accent); background:var(--paper-2); }
/* stepper only relevant in grid view */
.listctl:not(.lc-gridactive) .listctl-cols{ display:none; }
.listctl-left{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* ===== LIST FILTERS (distribution chart + filter chips) ===== */
.listfilters{ margin:0 0 20px; }
.lf-chart{ width:100%; height:120px; margin-bottom:14px; }
.lf-chips{ display:flex; flex-direction:column; gap:10px; }
.lf-chipgroup{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lf-chip-lbl{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:700; width:56px; flex:0 0 auto; }
.lf-chip{ padding:5px 12px; border:1px solid var(--line); border-radius:16px; background:transparent; color:var(--ink-2); font-size:.8rem; font-weight:600; cursor:pointer; transition:.12s; }
.lf-chip:hover{ border-color:var(--accent); color:var(--ink); }
.lf-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* filtered-out rows hidden in every view */
.listcontainer [data-sortrow].lf-hidden{ display:none!important; }
@media(max-width:640px){ .lf-chip-lbl{ width:auto; } .lf-chart{ height:100px; } }
/* ===== PAGER (server-side pagination) ===== */
.pager{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin:18px 0; }
.pager-per{ display:inline-flex; align-items:center; gap:5px; }
.pager-per-lbl, .lc-sort-lbl{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.pager-perbtn{ min-width:30px; text-align:center; padding:4px 8px; border:1px solid var(--line); border-radius:7px; font-size:.8rem; font-weight:600; color:var(--ink-2); text-decoration:none; transition:.12s; }
.pager-perbtn:hover{ border-color:var(--accent); color:var(--ink); }
.pager-perbtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pager-nav{ display:inline-flex; align-items:center; gap:4px; }
.pager-num, .pager-btn{ min-width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink-2); font-size:.86rem; font-weight:600; transition:.12s; }
.pager-num:hover, .pager-btn:hover{ border-color:var(--accent); color:var(--ink); }
.pager-num.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pager-btn.disabled{ opacity:.35; pointer-events:none; }
.pager-gap{ color:var(--ink-3); padding:0 2px; }
.pager-count{ font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* sort row (server links) */
.listctl-sortonly{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 16px; }
.listctl-sortonly .lc-sort{ padding:6px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink-2); font-size:.82rem; font-weight:600; transition:.12s; }
.listctl-sortonly .lc-sort:hover{ border-color:var(--accent); color:var(--ink); }
.listctl-sortonly .lc-sort.active{ border-color:var(--accent); color:var(--accent); background:var(--paper-2); }
/* filter chips as links */
.lf-chip{ text-decoration:none; }
.lf-chip .lf-n{ font-size:.7rem; color:var(--ink-3); font-weight:500; margin-left:2px; }
.lf-chip.active .lf-n{ color:rgba(255,255,255,.8); }
/* ===== BROWSE TOOLBAR (server-side albums) ===== */
.browse-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 14px; }
.lf-chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.lf-chart-lbl{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.lf-chart-all{ font-size:.78rem; font-weight:600; color:var(--ink-3); text-decoration:none; padding:3px 10px; border:1px solid var(--line); border-radius:14px; transition:.12s; }
.lf-chart-all:hover{ border-color:var(--accent); color:var(--ink); }
.lf-chart-all.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.listctl-cols .lc-cols{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.listctl-cols .lc-col{ min-width:34px; height:30px; display:grid; place-items:center; border-right:1px solid var(--line); color:var(--ink-3); font-size:.8rem; font-weight:600; text-decoration:none; transition:.12s; }
.listctl-cols .lc-col:last-child{ border-right:none; }
.listctl-cols .lc-col:hover{ color:var(--ink); background:var(--paper-2); }
.listctl-cols .lc-col.active{ color:var(--accent); background:var(--paper-2); }
.listctl-cols{ display:inline-flex; align-items:center; gap:6px; }
.listctl-cols .lc-cols-lbl{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
/* ===== DECADE LINK ROW (reliable click targets under the chart) ===== */
.decade-row{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.decade-link{ display:inline-flex; align-items:baseline; gap:4px; padding:4px 9px; border:1px solid var(--line); border-radius:14px; font-size:.76rem; font-weight:600; color:var(--ink-2); text-decoration:none; transition:.12s; }
.decade-link:hover{ border-color:var(--accent); color:var(--ink); }
.decade-link.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.decade-n{ font-size:.66rem; color:var(--ink-3); font-weight:500; }
.decade-link.active .decade-n{ color:rgba(255,255,255,.8); }
.suggest .sg-nm,.suggest .sg-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* --- browse chips (labels directory + filter controls) --- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:.8rem; text-decoration:none; transition:border-color .15s, color .15s, background .15s; }
.chip:hover{ border-color:var(--accent); color:var(--ink); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.on .dim{ color:rgba(255,255,255,.8); }
.browse-controls .dim{ color:var(--ink-3); }
/* --- 4-column search dropdown (Artist | Album | Song | Label) --- */
.sg-cols{ display:grid; grid-template-columns:repeat(4,1fr); }
.sg-col{ border-right:1px solid var(--line); min-width:0; padding-bottom:6px; }
.sg-col:last-child{ border-right:none; }
.sg-empty{ padding:8px 14px; color:var(--ink-3); font-size:.78rem; font-style:italic; }
@media(max-width:820px){ .sg-cols{ grid-template-columns:repeat(2,1fr); } .sg-col:nth-child(2){ border-right:none; } }
/* --- artist biography + language picker --- */
.bio-prose{ }
.bio-prose p{ margin:0 0 12px; line-height:1.62; }
.bio-lang{ font-size:.82rem; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-2); cursor:pointer; }
.bio-lang:hover{ border-color:var(--accent); }
.bio-attr{ font-style:italic; }
/* --- artist page: sections as defined cards --- */
.detail-body .main-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.section-card{ padding:clamp(18px,2.2vw,28px); }
.section-card .bio-prose{ }
.section-card .bio-prose p{ margin:0 0 12px; line-height:1.62; }
.section-card .bio-prose p:last-child{ margin-bottom:0; }
.media-gallery.section-card, section.media-gallery{ background:var(--card); border:1px solid var(--line); border-radius:var(--r,14px); padding:clamp(18px,2.2vw,28px); box-shadow:var(--shadow); }
/* --- biography read-more clamp (max-height, reliable for multi-paragraph) --- */
.bio-prose.bio-clamp{ max-height:11.5em; overflow:hidden; position:relative; }
.bio-prose.bio-clamp::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3.5em;
background:linear-gradient(to bottom, transparent, var(--card)); pointer-events:none; }
.bio-more{ margin-top:10px; padding:0; border:none; background:none; color:var(--accent); font-weight:600; font-size:.85rem; cursor:pointer; }
.bio-more:hover{ text-decoration:underline; }
/* ============ The Groove ============ */
.groove{ text-decoration:none; display:inline-flex; align-items:baseline; gap:8px; }
.groove-mark{ font-weight:800; letter-spacing:-.02em; }
/* flagship — the hero/section headline number */
.groove--flagship{ flex-direction:column; align-items:flex-start; gap:2px; }
.groove--flagship .groove-label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.groove--flagship .groove-val{ font-size:2.4rem; line-height:1; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.groove--flagship .groove-cue{ font-size:.72rem; color:var(--ink-3); border-bottom:1px dashed var(--ink-3); align-self:flex-start; }
.groove--flagship:hover .groove-cue{ color:var(--accent); border-color:var(--accent); }
/* inline — small, next to a title */
.groove--inline{ align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
.groove--inline .groove-mark{ color:var(--accent); font-size:.78rem; }
.groove--inline .groove-val{ font-weight:700; font-size:.82rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.groove--inline:hover{ border-color:var(--accent); }
/* hero placement (c): Groove flagship on top, stars small + secondary beneath */
.hero-metrics{ display:flex; flex-direction:column; gap:10px; }
.hero-metrics .groove--flagship .groove-val{ color:#fff; }
.hero-metrics .groove--flagship .groove-label{ color:rgba(255,255,255,.9); }
.hero-metrics .groove--flagship .groove-cue{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.5); }
.rate-secondary{ display:flex; align-items:center; gap:10px; opacity:.9; }
.rate-secondary .score-secondary{ font-size:.82rem; color:rgba(255,255,255,.85); }
.rate-secondary .score-secondary .of{ color:rgba(255,255,255,.6); }
/* groove section card on the page body */
.groove-card .groove-card-body{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; margin:6px 0 14px; }
.groove-card-score{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.groove-card .groove--flagship .groove-val{ color:var(--ink); font-size:3rem; }
.groove-output{ display:flex; flex-direction:column; }
.groove-output .go-k{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.groove-output .go-v{ font-size:1.4rem; font-weight:700; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.groove-output .go-of{ font-size:.72rem; color:var(--ink-3); }
.groove-decades{ flex:1; min-width:280px; }
.groove-decades-head{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
/* explanation */
.groove-explain{ border-top:1px solid var(--line); padding-top:14px; }
.groove-explain p{ margin:0 0 8px; font-size:.9rem; line-height:1.55; color:var(--ink-2); }
.groove-explain .groove-foot{ color:var(--ink-3); font-size:.84rem; }
.groove-components{ display:flex; gap:22px; }
.groove-components .gc{ display:flex; flex-direction:column; }
.groove-components .gc-k{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.groove-components .gc-v{ font-size:1.3rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.groove-components .gc-of{ font-size:.8rem; color:var(--ink-3); font-weight:400; }
/* --- fix: stars in the hero secondary line must be SMALL (quiet, not billboard) --- */
.hero-metrics .rate-secondary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-metrics .rate-secondary .rate,
.hero-metrics .rate-secondary [class*="star"]{ display:inline-flex; align-items:center; gap:2px; }
.hero-metrics .rate-secondary .score-secondary{ font-size:.8rem; color:rgba(255,255,255,.85); white-space:nowrap; }
/* --- groove rank context line --- */
.groove-ranks{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; }
.groove-rank{ text-decoration:none; font-size:.82rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:3px; }
.groove-rank .gr-n{ font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.groove-rank--top .gr-n{ color:#c99a2e; } /* top-3 gets a gold cast */
.groove-rank:hover{ color:var(--accent); }
.groove-ranks .gr-sep{ color:var(--ink-3); opacity:.5; }
/* ===== ARTIST HERO — GROOVE PANEL (right zone of .dh-inner) =====
Hero surface is ALWAYS dark in both themes -> fixed white alphas, never theme ink.
The score/rank components are shared; these rules only re-dress them for the panel. */
.dh-groove{
flex:0 1 340px; min-width:250px; margin-left:auto; align-self:stretch;
display:flex; flex-direction:column; justify-content:center;
padding:18px 20px; border-radius:var(--r-lg);
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20);
}
.dh-groove-eyebrow{
font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
font-weight:700; color:rgba(255,255,255,.72); margin-bottom:4px;
}
/* the component ships its own "The Groove" label; the panel eyebrow names the entity */
.dh-groove .groove-label{ display:none; }
.dh-groove .groove-val{ color:#fff; }
.dh-groove .groove-cue{ color:rgba(255,255,255,.72); }
/* ranks stack one per line in the narrow panel; no inline separators */
.dh-groove .groove-ranks{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:10px; }
.dh-groove .gr-sep{ display:none; }
.dh-groove .groove-rank{ font-size:.82rem; line-height:1.25; color:rgba(255,255,255,.92); font-weight:500; }
.dh-groove .groove-rank .gr-n{ color:var(--gold, #f2c14e); font-weight:700; }
.dh-groove .groove-rank:hover{ color:#fff; text-decoration:underline; }
.dh-groove-cta{ margin-top:14px; align-self:flex-start; }
@media (max-width:900px){ .dh-groove{ flex:1 1 100%; margin-left:0; } }
/* hero stars: the original .hero-metrics svg caps (16px/18px) predate the .rate wrapper.
Stars now use the site-standard .rate component -> restore its 19px box. */
.hero-metrics .rate-secondary svg{ width:19px; height:19px; flex:0 0 auto; aspect-ratio:1/1; }
/* ===== THE GROOVE — hub + boards ===== */
.gb-title{ font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; margin:6px 0 10px; }
.gb-sub{ color:var(--ink-2); max-width:760px; margin:0 0 20px; font-size:.95rem; }
.gb-axes{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.gb-div{ width:1px; height:20px; background:var(--ink-3); opacity:.35; margin:0 4px; }
.chip--on{ background:var(--accent); color:#fff; border-color:transparent; }
.gb-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.gb-chart{ width:100%; height:360px; margin:6px 0 24px; }
.gb-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:40px; }
.gb-row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px;
padding:12px 16px; text-decoration:none; color:var(--ink); transition:.12s; }
.gb-row:hover{ border-color:var(--accent); }
.gb-row--top{ background:color-mix(in srgb, var(--accent) 7%, var(--card)); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.gb-n{ font-size:1.05rem; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.gb-row--top .gb-n{ color:var(--accent); }
.gb-name{ font-weight:600; }
.gb-meta{ color:var(--ink-3); font-weight:400; font-size:.85rem; margin-left:10px; }
.gb-score{ font-weight:700; font-variant-numeric:tabular-nums; }
.gh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-bottom:38px; }
.gh-card{ display:block; padding:18px 20px; text-decoration:none; color:var(--ink); transition:.12s; }
.gh-card:hover{ border-color:var(--accent); }
.gh-card-h{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
color:var(--ink-3); margin-bottom:12px; }
.gh-line{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:baseline;
padding:5px 0; font-size:.9rem; }
.gh-line--1{ font-weight:700; font-size:1rem; }
.gh-n{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.gh-line--1 .gh-n{ color:var(--accent); }
.gh-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gh-s{ color:var(--ink-2); font-variant-numeric:tabular-nums; font-size:.85rem; }
.gh-more{ margin-top:12px; font-size:.82rem; color:var(--accent); font-weight:600; }
.gh-eyebrow{ margin-top:14px; }
.gh-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
/* Label logo: contained, never cropped (logos are transparent + non-square). */
.logo-img{ width:100%; height:100%; object-fit:contain; background:var(--paper-2); display:block; }
/* Search suggest: real art, monogram fallback. Same 34px box either way. */
.sg-img{ width:34px; height:34px; border-radius:8px; flex:none; object-fit:cover; display:block; background:var(--paper-2); }
/* Search suggest thumbnail — same 34px box as the monogram it replaces. */
.sg-img{ width:34px; height:34px; border-radius:8px; flex:none; object-fit:cover; display:block; background:var(--paper-2); }
/* ============================================================================
THE SURFACE PRIMITIVE — one recipe, every card on the site.
Components keep their own class for layout/padding; the surface comes from here.
Change this block and every card moves together. That's the point.
============================================================================ */
.surface,
.tile, .panel, .plan, .stat-card, .chart-row, .gig, .section-card, .modal,
.gh-card, .gb-row {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
}
/* ===== THE WHY PAGE — entity Groove + the components it's built from ===== */
.gx-card{ margin:24px 0; }
.gx-h{ margin:4px 0 14px; }
.gx-score{ margin-bottom:10px; }
.gx-k{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.gx-v{ font-size:2.6rem; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
.gx-built{ border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.gx-built-h{ margin:0 0 4px; }
.gx-built-sub{ font-size:.88rem; margin:0 0 14px; }
.gx-list{ display:flex; flex-direction:column; gap:4px; }
.gx-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--ink); transition:background .12s; }
.gx-row:hover{ background:var(--paper-2); }
.gx-nm{ font-weight:600; }
.gx-yr{ color:var(--ink-3); font-weight:400; font-size:.82rem; margin-left:9px; }
.gx-g{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); }
.gx-honest{ border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }
.gx-honest p{ font-size:.88rem; line-height:1.6; }
.gx-cta{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
/* every Groove score is clickable -> its own Why */
.gb-why{ color:inherit; text-decoration:none; border-bottom:1px dashed var(--ink-3); }
.gb-why:hover{ color:var(--accent); border-bottom-color:var(--accent); }
/* ===== GROOVE: media on rows ===== */
.gb-art{ width:54px; height:54px; border-radius:8px; overflow:hidden; background:var(--paper-2); flex:none; }
.gb-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.gb-name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gb-t{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gb-s{ font-size:.8rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gx-row{ display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }
.gx-art{ width:46px; height:46px; border-radius:6px; overflow:hidden; background:var(--paper-2); }
.gx-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.gx-nm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gx-t{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gx-s{ font-size:.78rem; color:var(--ink-3); }
/* Why page head: the entity's own image beside its number */
.gx-head{ display:flex; gap:clamp(16px,2.4vw,28px); align-items:center; margin-bottom:6px; }
.gx-hero-media{ width:clamp(120px,14vw,180px); height:clamp(120px,14vw,180px); border-radius:var(--r-lg); overflow:hidden; flex:0 0 auto; box-shadow:var(--shadow); }
.gx-hero-media img, .gx-hero-media svg{ width:100%; height:100%; object-fit:cover; display:block; }
.gx-head-txt{ min-width:0; }
/* board rows: 3 columns by default, 4 when there's cover art */
/* board rows: art column only when there is art (album boards) */
.gb-row--art{ grid-template-columns:52px 54px 1fr auto; }
/* the row is a div (nested is invalid HTML and breaks the grid).
The name links to the entity; the score links to its Why. */
.gb-row{ cursor:default; }
.gb-name .gb-t{ color:var(--ink); text-decoration:none; }
.gb-name .gb-t:hover{ color:var(--accent); text-decoration:underline; }
/* ============================================================================
THE GROOVE MOMENT REVEAL — /music.nw/moment
The chart does not exist until the second it appears.
============================================================================ */
.gm-head{ margin:26px 0 22px; }
.gm-title{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; margin:6px 0 12px; }
.gm-sub{ color:var(--ink-2); max-width:760px; font-size:1rem; line-height:1.6; }
/* countdown */
.gm-countdown{ text-align:center; padding:clamp(40px,8vw,90px) 20px; }
.gm-cd-lbl{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.gm-cd-clock{ font-size:clamp(2.4rem,7vw,5rem); font-weight:800; line-height:1.05; margin:10px 0 8px;
color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.gm-cd-note{ font-size:.9rem; color:var(--ink-3); }
/* the live stage */
.gm-live{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; margin-bottom:60px; }
.gm-live-tag{ grid-column:1 / -1; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
font-weight:800; color:var(--accent); }
@media(max-width:900px){ .gm-live{ grid-template-columns:1fr; } }
/* the cards — newest on top */
.gm-cards{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.gm-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:clamp(20px,3vw,34px); }
.gm-card--in{ animation:gmIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes gmIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
.gm-card-lbl{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
color:var(--ink-3); margin-bottom:14px; }
.gm-cr{ display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:baseline;
padding:7px 0; border-bottom:1px solid var(--line-2); }
.gm-cr:last-child{ border-bottom:none; }
.gm-cr-n{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.gm-cr-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-cr-v{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.gm-cr--1{ padding:10px 0 12px; }
.gm-cr--1 .gm-cr-name{ font-size:1.5rem; font-weight:800; letter-spacing:-.01em; }
.gm-cr--1 .gm-cr-v{ font-size:1.5rem; color:var(--accent); }
.gm-cr--1 .gm-cr-n{ color:var(--accent); }
/* THE CROWN */
.gm-card--crown{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
box-shadow:0 20px 60px color-mix(in srgb, var(--accent) 18%, transparent); }
.gm-card--crown .gm-card-lbl{ color:var(--accent); }
.gm-card--crown .gm-cr--1 .gm-cr-name{ font-size:clamp(1.8rem,4vw,2.8rem); }
.gm-card--crown .gm-cr--1 .gm-cr-v{ font-size:clamp(1.8rem,4vw,2.8rem); }
/* the running order rail */
.gm-rail{ position:sticky; top:20px; }
.gm-beats{ display:flex; flex-direction:column; gap:2px; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:12px; box-shadow:var(--shadow); }
.gm-beat{ display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center;
padding:7px 8px; border-radius:7px; font-size:.85rem; }
.gm-b-n{ color:var(--ink-3); font-size:.75rem; font-variant-numeric:tabular-nums; }
.gm-b-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-b-s{ font-size:.72rem; font-variant-numeric:tabular-nums; }
.gm-beat--pending{ opacity:.4; }
.gm-beat--pending .gm-b-wait{ color:var(--ink-3); }
.gm-beat--running{ background:color-mix(in srgb, var(--accent) 10%, transparent); font-weight:700; }
.gm-beat--running .gm-b-run{ color:var(--accent); font-weight:700; }
.gm-beat--complete .gm-b-done{ color:var(--ink-3); }
.gm-loading{ padding:60px 0; text-align:center; color:var(--ink-3); }
.gm-cd-last{ margin-top:22px; }
/* GMR: cards flow in a grid, not a column. The Crown takes the full width. */
.gm-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; align-items:start; }
.gm-card{ padding:clamp(16px,1.8vw,22px); }
.gm-cr--1 .gm-cr-name{ font-size:1.15rem; }
.gm-cr--1 .gm-cr-v{ font-size:1.15rem; }
.gm-card--crown{ grid-column:1 / -1; padding:clamp(24px,3.5vw,42px); }
.gm-card--crown .gm-cr--1 .gm-cr-name{ font-size:clamp(1.8rem,4vw,3rem); }
.gm-card--crown .gm-cr--1 .gm-cr-v{ font-size:clamp(1.8rem,4vw,3rem); }
@media(max-width:900px){ .gm-cards{ grid-template-columns:1fr; } }
/* ============================================================================
MOBILE HEADER — the row has 9 groups; on a phone it collapses into a drawer.
Nothing is REMOVED, it's relocated. Supersedes the earlier display:none rules.
============================================================================ */
.hdr-burger{ display:none; width:40px; height:40px; place-items:center; background:none;
border:1px solid var(--line); border-radius:10px; color:var(--ink-2); cursor:pointer; flex:0 0 auto; }
.hdr-burger svg{ width:20px; height:20px; }
@media(max-width:900px){
.hdr-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; padding:10px 14px; }
.hdr-burger{ display:grid; order:1; }
.brand{ order:2; flex:1 1 auto; min-width:0; }
.brand .sub{ display:none; }
#authSlot{ order:3; flex:0 0 auto; }
/* nav + tools become the drawer, stacked under the row */
nav.main,
.hdr-tools{ display:none; }
.site.nav-open nav.main,
.site.nav-open .hdr-tools{ display:flex; }
.site.nav-open nav.main{
order:5; flex-direction:column; align-items:stretch; width:100%;
gap:2px; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line);
}
.site.nav-open nav.main button{
width:100%; text-align:left; padding:11px 12px; font-size:.95rem; border-radius:9px;
}
.site.nav-open .hdr-tools{
order:6; width:100%; flex-wrap:wrap; gap:10px; justify-content:flex-start;
margin-top:10px; padding-top:12px; border-top:1px solid var(--line);
}
/* the tools STAY -- they were being hidden before. They belong in the drawer. */
.site.nav-open .palette-group,
.site.nav-open .size-group,
.site.nav-open .lang{ display:flex; }
.site.nav-open #authSlot{ display:none; } /* already in the top row */
/* search gets the full width, on its own line */
.ctx-row{ flex-direction:column; align-items:stretch; gap:8px; padding:0 14px 10px; }
.searchwrap{ max-width:none; width:100%; }
.ctx-meta{ font-size:.72rem; }
}
@media(max-width:600px){
.brand .name{ font-size:1.1rem; }
.brand-mark{ width:26px; height:26px; }
.ctx-meta{ display:none; }
}
/* GMR on a phone: one card, full width, the rail moves under the cards */
@media(max-width:900px){
.gm-live{ grid-template-columns:1fr; }
.gm-rail{ position:static; order:2; }
.gm-cards{ order:1; grid-template-columns:1fr; }
.gm-cd-clock{ font-size:clamp(1.8rem,9vw,3rem); }
}
/* the base nav is position:absolute (centred over the header). In the drawer it must
FLOW, not float -- otherwise it stacks on top of the page. This is the whole bug. */
@media(max-width:900px){
.site.nav-open nav.main{
position:static; left:auto; transform:none;
}
}
/* the drawer must FLOW. The row wraps; the nav is static and full-width. */
@media(max-width:900px){
.site.nav-open .hdr-row{ flex-wrap:wrap; }
.site.nav-open nav.main{
position:static !important; left:auto !important; transform:none !important;
flex:1 0 100%; order:5;
}
.site.nav-open .hdr-tools{ flex:1 0 100%; order:6; }
}
/* GMR: what's on the line, before the show */
.gm-stakes{ margin:50px 0 60px; }
.gm-stakes-h{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }
.gm-stakes-p{ color:var(--ink-2); max-width:680px; margin:8px 0 22px; font-size:.95rem; line-height:1.6; }
.gm-holds{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.gm-hold{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:18px 20px; }
.gm-hold-k{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.gm-hold-n{ font-size:1.15rem; font-weight:700; margin:6px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-hold-v{ font-size:1.05rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.gm-countdown{ padding:30px 20px 20px; }
/* GMR: the compute panel. The bar is REAL -- pct and rows from Postgres.
Never a countdown: Postgres knows how much is DONE, never how long is LEFT. */
.gm-compute{ grid-column:1 / -1; background:var(--card); border:1px solid var(--line);
border-radius:var(--r); box-shadow:var(--shadow); padding:22px 26px; margin-bottom:18px; }
.gm-cp-k{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }
.gm-cp-l{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.01em; margin:4px 0 14px; }
.gm-cp-bar{ height:10px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.gm-cp-bar span{ display:block; height:100%; border-radius:99px; background:var(--accent);
transition:width .9s linear; }
.gm-cp-m{ display:flex; justify-content:space-between; margin-top:9px; font-size:.85rem; color:var(--ink-3); }
.gm-cp-m .mono{ font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
/* LIVE means live */
.gm-live-tag{ display:inline-flex; align-items:center; gap:7px; }
.gm-live-tag::before{ content:''; width:9px; height:9px; border-radius:50%; background:#d33;
box-shadow:0 0 0 0 rgba(221,51,51,.6); animation:gmPulse 1.6s infinite; }
@keyframes gmPulse{ 70%{ box-shadow:0 0 0 9px rgba(221,51,51,0); } 100%{ box-shadow:0 0 0 0 rgba(221,51,51,0); } }
.gm-cd-standby{ font-size:clamp(1.6rem,4vw,2.6rem); font-weight:800; margin:12px 0 10px;
color:var(--ink); letter-spacing:-.01em; }
.gm-cd-standby::after{ content:''; display:inline-block; width:8px; height:8px; margin-left:10px;
border-radius:50%; background:var(--accent); animation:gmPulse 1.6s infinite; vertical-align:middle; }
/* THE GMR STRIP — the appointment, everywhere */
.gmr-strip{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:12px 18px; margin:0 0 20px; border-radius:var(--r);
background:color-mix(in srgb, var(--accent) 8%, var(--card));
border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
text-decoration:none; color:var(--ink); transition:.15s; }
.gmr-strip:hover{ border-color:var(--accent); }
.gmr-k{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }
.gmr-t{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); font-size:1.05rem; }
.gmr-go{ margin-left:auto; font-size:.84rem; font-weight:600; color:var(--accent); }
.gmr-strip--live{ background:color-mix(in srgb, #d33 8%, var(--card));
border-color:color-mix(in srgb, #d33 40%, var(--line)); }
.gmr-strip--live .gmr-go{ color:#d33; }
.gmr-dot{ width:9px; height:9px; border-radius:50%; background:#d33; animation:gmPulse 1.6s infinite; }
@media(max-width:600px){ .gmr-go{ margin-left:0; width:100%; } }
/* the Crown is not one of the cards. It IS the card. */
.gm-holds .gm-hold:first-child{ grid-column:span 2; border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
box-shadow:0 14px 40px color-mix(in srgb, var(--accent) 14%, transparent); }
.gm-holds .gm-hold:first-child .gm-hold-n{ font-size:1.7rem; }
.gm-holds .gm-hold:first-child .gm-hold-v{ font-size:1.4rem; }
@media(max-width:700px){ .gm-holds .gm-hold:first-child{ grid-column:span 1; } }
/* the movement. Green climbs, red falls. Nothing when nothing moved. */
.gm-d{ margin-left:10px; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; }
.gm-d--up{ color:#2e8b57; }
.gm-d--dn{ color:#c0392b; }
.gm-sub{ margin-left:10px; font-size:.72rem; font-weight:600; color:var(--ink-3); }
.gm-new{ margin-left:10px; font-size:.62rem; font-weight:800; letter-spacing:.1em;
background:var(--accent); color:#fff; padding:2px 7px; border-radius:20px; }
.gm-cr--1 .gm-d{ font-size:.95rem; }
.gm-b-done{ color:var(--ink-3); font-size:.7rem; white-space:nowrap; }
.gm-beat--complete{ opacity:.75; }
.gm-beat{ grid-template-columns:22px 1fr auto; }
/* THE GAP — the distance between #1 and #2. A crown falls in public, over weeks. */
.gm-gap{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.gm-gap-k{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }
.gm-gap-v{ font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); }
.gm-gap-s{ font-size:.84rem; color:var(--ink-3); font-weight:600; }
.gm-gap--closing .gm-gap-v, .gm-gap--closing .gm-gap-s{ color:#c0392b; }
.gm-gap--widening .gm-gap-v, .gm-gap--widening .gm-gap-s{ color:#2e8b57; }
/* after the show: the next appointment, still ticking */
.gm-next{ grid-column:1 / -1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
margin:-6px 0 16px; }
.gm-next-k{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }
.gm-next-t{ font-size:1.2rem; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.gm-next-s{ font-size:.82rem; color:var(--ink-3); }
/* the phase is a fact from pg_stat_activity -- give it the weight of one */
.gm-cp-ph{ font-size:.85rem; color:var(--ink-2); font-weight:600; }
/* the phase is read live from pg_stat_activity -- give it the weight of a fact */
.gm-cp-ph{ font-size:.85rem; color:var(--ink-2); font-weight:600; }
/* the strip needs air under the header */
.gmr-strip{ margin-top:20px; }
/* a historical polity the cadastre has not mapped yet. It is not a rank -- it is a fact. */
.groove-rank--unmapped{ color:var(--ink-3); font-style:italic; cursor:default; }
.dh-groove .groove-rank--unmapped{ color:rgba(255,255,255,.6); }
/* genre chips were running together: post-punknew wave */
.panel .tag{ margin:0 6px 6px 0; }
/* ============================================================================
THE GROOVE BOARD — a place, not a spreadsheet.
The crown opens it. Every row has a face, a place and an era.
============================================================================ */
.gb-head{ margin:6px 0 18px; }
.gb-count{ font-size:.9rem; color:var(--ink-3); margin-top:-8px; }
.gb-count strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
/* the crown -- page 1 only. No.1 is a statement, not row 1 of 24. */
.gb-crown{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,36px);
align-items:center; background:var(--card); border:1px solid var(--line);
border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(20px,3vw,34px);
margin:0 0 26px; }
.gb-crown-media{ width:clamp(120px,15vw,190px); height:clamp(120px,15vw,190px);
border-radius:var(--r-lg); overflow:hidden; flex:0 0 auto; box-shadow:var(--shadow-lg); }
.gb-crown-media img, .gb-crown-media svg{ width:100%; height:100%; object-fit:cover; display:block; }
.gb-crown-txt{ min-width:0; }
.gb-crown-k{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--accent); }
.gb-crown-n{ font-size:clamp(1.8rem,4.2vw,3rem); line-height:1.05; margin:6px 0 6px; }
.gb-crown-n a{ color:var(--ink); text-decoration:none; }
.gb-crown-n a:hover{ color:var(--accent); }
.gb-crown-c{ font-size:.95rem; color:var(--ink-3); margin-bottom:12px; }
.gb-crown-v{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800; color:var(--accent);
font-variant-numeric:tabular-nums; line-height:1; }
.gb-crown-why{ display:inline-block; margin-top:10px; font-size:.84rem; font-weight:600;
color:var(--ink-3); text-decoration:none; border-bottom:1px dashed var(--ink-3); }
.gb-crown-why:hover{ color:var(--accent); border-color:var(--accent); }
@media(max-width:700px){ .gb-crown{ grid-template-columns:1fr; text-align:left; } }
/* rows: every entity gets an image slot. No image -> the box just sits empty and quiet. */
.gb-row{ grid-template-columns:52px 54px 1fr auto; }
.gb-row--art{ grid-template-columns:52px 54px 1fr auto; }
.gb-name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gb-s{ font-size:.8rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* the honest sample. A thin board is not an embarrassment -- it is an invitation. */
.gb-thin{ background:color-mix(in srgb, var(--accent) 6%, var(--card));
border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
border-radius:var(--r); padding:14px 18px; margin:0 0 22px;
font-size:.9rem; color:var(--ink-2); line-height:1.55; }
.gb-thin a{ color:var(--accent); font-weight:600; }
.gb-empty{ padding:50px 0; text-align:center; }
/* an active filter says so, and can be cleared */
.chip--clear .chip-x{ opacity:.7; margin-left:2px; }
.chip--clear:hover .chip-x{ opacity:1; }
/* the shape of the board: the crown and the chart are ONE statement, side by side.
Stacked, they were two things shouting at each other. */
.gb-shape{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-auto-rows:360px; /* ONE height. Both cards obey it. ECharts needs real pixels. */
gap:18px; margin:0 0 26px; }
.gb-shape .gb-crown{ margin:0; height:100%; box-sizing:border-box; align-content:center; }
.gb-shape .gb-chart{ background:var(--card); border:1px solid var(--line);
border-radius:var(--r); box-shadow:var(--shadow); padding:14px;
height:100%; margin:0; box-sizing:border-box; }
@media(max-width:960px){ .gb-shape{ grid-template-columns:1fr; grid-auto-rows:auto; }
.gb-shape .gb-chart{ height:340px; } }
/* the list is a THING, not loose rows floating in the page */
.gb-listwrap{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:clamp(14px,2vw,22px); }
.gb-listhead{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
font-weight:800; color:var(--ink-3); padding:2px 4px 12px; }
.gb-listwrap .gb-list{ display:flex; flex-direction:column; gap:2px; }
/* inside a container the rows shed their own card -- one surface, not fifty */
.gb-listwrap .gb-row{ background:transparent; border:none; box-shadow:none;
border-radius:8px; border-bottom:1px solid var(--line-2); }
.gb-listwrap .gb-row:last-child{ border-bottom:none; }
.gb-listwrap .gb-row:hover{ background:var(--paper-2); }
.gb-listwrap .gb-row--top{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.gb-listwrap .pager{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
/* a label logo is not a portrait -- transparent, non-square, must not be cropped */
.gb-crown-media .logo-img,
.gb-art .logo-img{ object-fit:contain; background:var(--paper-2); padding:8px; }
/* the chart card holds its pills. The chart is a LENS, not a page you leave. */
.gb-chartcard{ display:flex; flex-direction:column; gap:10px; height:100%;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:14px; box-sizing:border-box; }
.gb-shape .gb-chart{ background:none; border:none; box-shadow:none; padding:0;
flex:1 1 auto; min-height:0; }
.gb-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.gb-pill{ padding:5px 12px; border:1px solid var(--line); border-radius:999px;
background:transparent; color:var(--ink-2); font-size:.78rem; font-weight:600;
cursor:pointer; transition:.12s; }
.gb-pill:hover{ border-color:var(--accent); color:var(--ink); }
.gb-pill--on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.gb-chart.is-loading{ opacity:.45; transition:opacity .15s; }
/* no crown (page 2+) -> the chart takes the whole row */
.gb-shape:not(:has(.gb-crown)){ grid-template-columns:1fr; }
/* the scatter key -- the four quadrants, named */
.gb-scatterkey{ font-size:.84rem; color:var(--ink-3); margin:-14px 0 24px; line-height:1.7; }
.gb-scatterkey em{ display:block; margin-top:2px; color:var(--ink-2); font-style:italic; }
.sk{ display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 4px 0 12px; }
.sk--giants{ background:#2f74c0; margin-left:0; }
.sk--loved{ background:#c99a2e; }
.sk--heard{ background:#8a8a8a; }
.gb-more{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
/* THE GENRE ROOTS. 74, flat, equal. The empty shelves stay -- they are doors. */
.gr-cluster{ margin:0 0 26px; }
.gr-cluster-h{ margin-bottom:10px; }
.gr-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.gr-chip{ display:inline-flex; align-items:baseline; gap:7px; padding:7px 13px;
border:1px solid var(--line); border-radius:999px; background:var(--card);
color:var(--ink); font-size:.86rem; font-weight:600; text-decoration:none; transition:.12s; }
.gr-chip:hover{ border-color:var(--accent); color:var(--accent); }
.gr-n{ font-size:.72rem; color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }
/* an empty shelf. Present, named, honest. Not hidden. */
.gr-chip--empty{ background:transparent; border-style:dashed; color:var(--ink-3);
cursor:default; opacity:.75; }
.gr-chip--empty:hover{ border-color:var(--line); color:var(--ink-3); }
.gr-foot{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line);
color:var(--ink-2); font-size:.92rem; font-style:italic; }
/* THE LENS — the transient filter. It sits with search because it is the same verb. */
.lens-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
padding:0 clamp(14px,2.6vw,34px) 12px; }
.lens-k{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
font-weight:700; color:var(--ink-3); margin-right:2px; }
.lens{ padding:6px 10px; border:1px solid var(--line); border-radius:8px;
background:var(--card); color:var(--ink-2); font-size:.84rem; font-family:inherit;
cursor:pointer; max-width:190px; }
.lens:hover{ border-color:var(--accent); }
.lens:disabled{ opacity:.45; cursor:default; }
.lens-go{ padding:6px 14px; border:1px solid var(--accent); border-radius:8px;
background:var(--accent); color:#fff; font-size:.82rem; font-weight:700;
cursor:pointer; font-family:inherit; }
.lens-go:hover{ filter:brightness(1.08); }
@media(max-width:820px){ .lens-row{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; } }
/* the lens sits under the search bar -- centred on it, not floating left */
.lens-row{ justify-content:center; }
/* THE FLAG. Every nation, from the same S3 the memorial uses. */
.nw-flag{ display:inline-block; height:1em; width:auto; vertical-align:-.12em;
margin-right:.45em; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.nw-flag--title{ height:.78em; vertical-align:.02em; margin-right:.38em;
border-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.16); }
.gb-crown-c .nw-flag{ height:.95em; }
/* ============================================================================
THE BOARD HEADER — one block, every page.
The flag TAKES the height of the title + lede. It never sets it.
The lede flows the container. No arbitrary 760px leash.
============================================================================ */
.bh{ margin:6px 0 20px; }
.bh--flag{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.2vw,28px);
align-items:stretch; }
.bh-flag{ display:flex; align-items:stretch; }
.bh-flag-img{ height:100%; width:auto; max-height:none; display:block;
border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.16);
object-fit:cover; align-self:stretch; }
.bh-txt{ min-width:0; }
.bh-title{ font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; margin:6px 0 10px; }
.bh-lede{ color:var(--ink-2); font-size:.95rem; line-height:1.6; margin:0; max-width:none; }
.bh-lede strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
@media(max-width:700px){
.bh--flag{ grid-template-columns:1fr; }
.bh-flag{ align-items:flex-start; }
.bh-flag-img{ height:auto; width:clamp(64px,18vw,92px); }
}
/* the flag on a row -- small, but it is the world's colour, not ours */
.nw-flag--row{ height:.85em; margin-right:.35em; vertical-align:-.08em;
border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
/* the crown's flag is bigger -- it is the crown */
.gb-crown-c .nw-flag--row{ height:1.05em; margin-right:.45em; }
/* the mobile nav is the REAL .slideover now. My second drawer is dead. */
@media(max-width:900px){
.site.nav-open nav.main,
.site.nav-open .hdr-tools{ display:none !important; }
}
.navp{ display:flex; flex-direction:column; }
.navp-g{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
color:var(--ink-3); padding:16px 4px 6px; }
.navp-g:first-child{ padding-top:0; }
.navp-a{ display:block; padding:12px 12px; border-radius:9px; text-decoration:none;
color:var(--ink); font-size:1rem; font-weight:600; }
.navp-a:hover{ background:var(--paper-2); color:var(--accent); }
.navp-sep{ height:1px; background:var(--line); margin:14px 0; }
.navp-cta{ margin-top:6px; justify-content:center; }
/* the lightbox locks the page. A class, not an inline style. */
body.nw-noscroll{ overflow:hidden; }
/* THE TRAJECTORY — a career, drawn. Genre x decade x Groove, stacked. */
.tj-h{ margin:4px 0 6px; }
.tj-p{ color:var(--ink-2); font-size:.92rem; line-height:1.6; margin:0 0 16px; max-width:none; }
.tj-chart{ width:100%; height:380px; margin:0; }
/* THE TRAJECTORY — a career, drawn. Genre x decade x Groove, stacked. */
.tj-h{ margin:4px 0 6px; }
.tj-p{ color:var(--ink-2); font-size:.92rem; line-height:1.6; margin:0 0 16px; max-width:none; }
.tj-chart{ width:100%; height:380px; margin:0; }
/* DECLARED PREFERENCE. Every other service infers. We ask. */
.pref-cluster{ margin:0 0 22px; }
.pref-h{ margin-bottom:9px; }
.pref-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pref-chip{ display:inline-flex; align-items:baseline; gap:7px; padding:8px 14px;
border:1px solid var(--line); border-radius:999px; background:var(--card);
color:var(--ink); font-size:.88rem; font-weight:600; cursor:pointer; transition:.12s;
user-select:none; }
.pref-chip:hover{ border-color:var(--accent); }
.pref-chip input{ position:absolute; opacity:0; width:0; height:0; }
.pref-chip:has(input:checked){ background:var(--accent); border-color:var(--accent); color:#fff; }
.pref-chip:has(input:checked) .pref-n{ color:rgba(255,255,255,.75); }
.pref-n{ font-size:.72rem; color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }
/* an empty shelf can still be chosen. Declaring it is how a door gets used. */
.pref-chip--empty{ border-style:dashed; }
.pref-empty-note{ margin:22px 0; padding:14px 18px; border-radius:var(--r);
background:color-mix(in srgb, var(--accent) 6%, var(--card));
border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
font-size:.9rem; line-height:1.6; color:var(--ink-2); }
.pref-actions{ display:flex; align-items:center; gap:14px; padding-top:16px;
border-top:1px solid var(--line); }
.pref-saved{ padding:12px 18px; border-radius:var(--r); margin:0 0 20px;
background:var(--sage); color:var(--sage-ink); font-weight:600; font-size:.9rem; }
/* THE HUB — the front door. */
.gh-lede{ color:var(--ink-2); font-size:.94rem; line-height:1.65; margin:0 0 14px; max-width:none; }
.gh-lede em{ color:var(--ink); font-style:italic; }
.gh-top{ display:grid; grid-template-columns:44px 1fr; gap:11px; align-items:center;
padding:10px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.gh-top-art{ width:44px; height:44px; border-radius:7px; overflow:hidden; background:var(--paper-2); }
.gh-top-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.gh-top-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gh-top-n{ font-weight:700; font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gh-top-v{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; font-size:.95rem; }
.gh-chips--flags .chip{ padding-left:9px; }
.chip .dim{ font-size:.7rem; color:var(--ink-3); margin-left:5px; font-variant-numeric:tabular-nums; }
.chip--on .dim{ color:rgba(255,255,255,.75); }
.chip--more{ font-weight:700; }
/* ============================================================================
THE SPACING SCALE. 101 inline style= attributes were almost all margins --
the same handful of values, written out by hand, over and over. This is the
scale they were all reaching for.
============================================================================ */
.mt-0{ margin-top:0; }
.mt-1{ margin-top:6px; }
.mt-2{ margin-top:10px; }
.mt-3{ margin-top:16px; }
.mt-4{ margin-top:22px; }
.mb-0{ margin-bottom:0; }
.mb-1{ margin-bottom:6px; }
.mb-2{ margin-bottom:12px; }
.mb-3{ margin-bottom:18px; }
.mb-4{ margin-bottom:26px; }
.pull-1{ margin-top:-4px; }
.pull-2{ margin-top:-8px; }
.fs-1{ font-size:1rem; }
.fs-s{ font-size:.82rem; }
.fs-m{ font-size:.92rem; }
.tc{ text-align:center; }
.w-auto{ width:auto; }
/* a square media box that fills its column -- the grid cards all wanted this */
.sq{ width:100%; height:auto; aspect-ratio:1; border-radius:14px; }
/* the patterns the remaining inline styles were reaching for */
.row-c{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.row-c--tight{ gap:8px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.row-center{ display:flex; align-items:center; justify-content:center; gap:8px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0 26px; }
.round{ border-radius:50%; }
.r-sm{ border-radius:7px; }
.mt-5{ margin-top:24px; }
.mb-5{ margin-bottom:30px; }
.fs-l{ font-size:1.02rem; }
.fs-xs{ font-size:.8rem; }
.hero-label{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
color:rgba(255,255,255,.7); font-weight:700; }
/* a list has a gap under it only when there IS a list. That was logic in a style attribute. */
.disco, .grid, .chart-list{ margin-bottom:18px; }
.disco:empty, .grid:empty{ margin-bottom:6px; }
/* the constellation's edges */
.cn-edge--member{ stroke:var(--ink-3); stroke-width:1.6; }
.cn-edge--dashed{ stroke:var(--accent); stroke-width:1.8; stroke-dasharray:4 3; }
.ai-start{ align-items:flex-start; }
.b6{ font-weight:600; }
/* the last of them -- named components, not utilities */
/* the constellation's two edge kinds. These were inline SVG strokes. */
.cn-legend-solid{ border-top:1.6px solid var(--ink-3); }
.cn-legend-dashed{ border-top:1.8px dashed var(--accent); }
/* the support page: one prose column, one card grid */
.sup-col{ max-width:840px; }
.sup-lede{ font-size:1.02rem; margin:0 0 22px; max-width:70ch; }
.sup-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px; margin-bottom:16px; max-width:760px; }
.sup-note{ border-left:3px solid var(--accent); max-width:760px; }
.sup-p{ margin-bottom:16px; max-width:760px; }
.sup-tight{ margin:6px 0 6px; }
.sup-gap{ margin:8px 0 14px; }
.sup-foot{ margin-top:18px; font-size:.84rem; }
.sup-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
/* the account console */
.acct-col{ max-width:680px; }
.acct-name{ font-size:1.6rem; line-height:1.1; margin:0; }
.acct-une{ color:var(--ink-3); font-size:.85rem; margin-top:3px; }
.acct-ok{ color:var(--sage-ink); }
.acct-fine{ margin-top:16px; font-size:.86rem; }
/* the home hero -- it sits on a dark gradient, so its ink is fixed, not themed */
.hero-cta{ background:linear-gradient(135deg,var(--accent),var(--hero-b));
color:#f4efe8; border:none; }
.hero-ink{ color:#e6ddd2; }
.hero-accent{ color:color-mix(in srgb,var(--accent) 40%,#fff); }
/* small inline meta */
.meta-xs{ font-size:.8rem; margin-left:10px; }
.meta-reg{ font-weight:400; font-size:.8rem; }
.meta-note{ font-size:.82rem; margin-top:20px; }
/* In Print row metadata - artist, producer, Groove. Each its own colour so the
eye learns the shape of a row without reading labels. */
.ip-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.ipm{ padding:1px 7px; border-radius:20px; font-size:.68rem; font-weight:600; letter-spacing:.01em; }
.ipm-artist{ background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--accent); }
.ipm-prod{ background:color-mix(in srgb,#8b5cf6 14%, transparent); color:#7c3aed; }
.ipm-groove{ background:color-mix(in srgb,#2ec26b 14%, transparent); color:#18894a; }