:root{
  --ink:#0A0A0A;
  --ink-2:#16171A;
  --ink-3:#1E1F22;
  --paper:#F2F0EB;
  --muted:#8E8F92;
  --faint:#6B6C6F;
  --rule:#2A2B2E;
  --rule-2:#3A3B3E;
  --rule-3:#4A4B4E;
  --gold:#C9A24D;
  --gold-deep:#3A2E12;
  --silver:#C6C7C9;
  --fa:"Vazirmatn",system-ui,sans-serif;
  --en:"Poppins",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink);
  min-height:100%;
}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--fa);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
main{flex:1 0 auto}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px);width:100%}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.94);
  backdrop-filter:blur(12px);border-bottom:.5px solid var(--rule)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px);
  min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:9px;flex:none;order:2}
.logo img{height:26px;width:auto}
.logo-txt{font-size:13.5px;font-weight:500;color:var(--paper);letter-spacing:-.01em}
@media(max-width:400px){.logo-txt{display:none}}
.nav nav{display:flex;gap:0;order:1;flex-wrap:wrap}
.nav nav a{font-size:12.5px;font-weight:400;color:#9A9B9E;padding:6px 10px;
  transition:color .15s}
.nav nav a:hover{color:var(--paper)}
.nav nav a.on{color:var(--paper);font-weight:500}
.nav nav a:focus-visible{outline:1px solid var(--gold);outline-offset:1px;border-radius:2px}
.burger{display:none;appearance:none;background:none;border:none;cursor:pointer;
  padding:8px;flex-direction:column;gap:4px;order:1}
.burger span{display:block;width:18px;height:1.4px;background:var(--paper);
  transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
@media(max-width:820px){
  .burger{display:flex}
  .nav nav{position:absolute;top:100%;inset-inline:0;background:var(--ink-2);
    border-bottom:.5px solid var(--rule);flex-direction:column;gap:0;
    padding:6px clamp(16px,4vw,32px) 12px;display:none}
  .nav nav.open{display:flex}
  .nav nav a{padding:11px 2px;border-bottom:.5px solid var(--rule);font-size:14px}
  .nav nav a:last-child{border-bottom:none}
}

/* ---------- hero ---------- */
.hero{border-bottom:.5px solid var(--rule)}
.hero-img{width:100%;aspect-ratio:4/3;max-height:min(58vh,520px);background:var(--ink-3);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img.empty{display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:12px;font-weight:300;aspect-ratio:16/7}
.hero-txt{padding:clamp(24px,5vw,40px) clamp(16px,4vw,32px);text-align:center;
  max-width:760px;margin:0 auto}
.hero .eyebrow{font-size:11px;color:var(--gold);letter-spacing:.18em;font-weight:500}
.hero h1{font-size:clamp(26px,5.4vw,42px);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;margin-top:11px;color:var(--paper)}
.hero .meta{font-size:13px;color:var(--muted);margin-top:11px;font-weight:300}
.hero .txt{font-size:14.5px;color:#B6B7B9;font-weight:300;margin-top:16px;
  line-height:1.95;max-width:58ch;margin-inline:auto}

.btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.btn{display:inline-block;font-family:var(--fa);font-size:13px;font-weight:500;
  padding:10px 22px;border-radius:2px;border:.5px solid var(--gold);
  color:var(--gold);background:transparent;transition:background .15s,color .15s;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--gold-deep)}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.btn.ghost{border-color:var(--rule-3);color:var(--silver)}
.btn.ghost:hover{background:rgba(255,255,255,.07);color:var(--paper)}
.btn.solid{background:var(--gold);color:var(--gold-deep);border-color:var(--gold)}
.btn.solid:hover{background:#D9B463}

/* ---------- sections ---------- */
section.band{padding:clamp(26px,4.5vw,44px) 0;border-bottom:.5px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sec-head h2{font-size:14px;font-weight:500;color:var(--paper)}
.sec-head .more{font-size:12.5px;color:var(--gold)}
.sec-head .more:hover{text-decoration:underline}

.eyebrow{font-size:11px;color:var(--gold);letter-spacing:.14em;font-weight:500;
  font-family:var(--en);text-transform:uppercase}
h1.big{font-size:clamp(24px,4.6vw,38px);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;margin-top:10px;color:var(--paper)}
.lede{font-size:14.5px;color:var(--muted);font-weight:300;
  max-width:60ch;margin-top:12px;line-height:1.95}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(10px,1.8vw,16px)}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}

.card{display:flex;flex-direction:column;min-width:0}
.card .im{aspect-ratio:1;background:var(--ink-3);overflow:hidden}
.card.wide .im{aspect-ratio:4/3}
.card .im img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.card:hover .im img{opacity:.82}
.card .im.empty{display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:11.5px;font-weight:300}
.card .bd{padding-top:9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.card .ttl{font-size:12.5px;color:var(--paper);font-weight:400;line-height:1.5;
  overflow-wrap:anywhere}
.card .sub{font-size:11.5px;color:var(--muted)}
.card .meta{font-size:11px;color:var(--faint);font-weight:300;overflow-wrap:anywhere}
.card .price{font-size:11.5px;color:var(--silver);font-family:var(--en);
  direction:ltr;text-align:right;margin-top:3px}
.card .price.sold{color:var(--faint)}

.tag{display:inline-block;font-size:10.5px;font-weight:500;padding:3px 9px;
  border-radius:2px;align-self:flex-start;margin-bottom:6px}
.tag.live{background:#14312A;color:#7FD1B2}
.tag.soon{background:var(--gold-deep);color:#E3C176}
.tag.past{background:#232427;color:var(--muted)}

/* ---------- action cards ---------- */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:12px}
.act{background:var(--ink-2);border-radius:8px;padding:16px 17px;min-width:0}
.act h3{font-size:13.5px;font-weight:500;color:var(--paper);margin-bottom:6px}
.act p{font-size:11.5px;line-height:1.8;color:var(--muted);margin-bottom:13px;font-weight:300}
.act .row{display:flex;gap:7px;flex-wrap:wrap}
.act input{flex:1 1 130px;min-width:0;height:34px;background:transparent;
  border:.5px solid var(--rule-2);border-radius:3px;padding:0 10px;
  font-family:var(--fa);font-size:13px;color:var(--paper)}
.act input::placeholder{color:var(--faint)}
.act input:focus{outline:none;border-color:var(--gold)}
.act button{appearance:none;font-family:var(--fa);font-size:12px;font-weight:500;
  padding:0 16px;height:34px;border-radius:3px;border:none;cursor:pointer;
  background:var(--gold);color:var(--gold-deep);transition:opacity .15s;flex:none}
.act button:hover{opacity:.88}
.act button:disabled{opacity:.5;cursor:not-allowed}
.act .full{display:block;width:100%;text-align:center;border:.5px solid var(--rule-3);
  color:var(--silver);font-size:12px;padding:9px 0;border-radius:3px;
  background:transparent;font-family:var(--fa);cursor:pointer;transition:background .15s}
.act .full:hover{background:rgba(255,255,255,.06);color:var(--paper)}
.act .msg{font-size:11.5px;margin-top:9px;min-height:16px;color:var(--muted)}
.act .msg.ok{color:#7FD1B2}
.act .msg.err{color:#E39B8F}

/* ---------- artists ---------- */
.arow{display:flex;gap:16px;padding:18px 0;border-bottom:.5px solid var(--rule);
  align-items:flex-start;flex-wrap:wrap}
.arow:last-child{border-bottom:none}
.arow .an{flex:0 0 auto;width:clamp(110px,20vw,180px);min-width:0}
.arow .an .n{font-size:14.5px;color:var(--paper);font-weight:500;overflow-wrap:anywhere}
.arow .an .y{font-size:12px;color:var(--faint);margin-top:1px}
.arow .ab{flex:1 1 220px;min-width:0;font-size:13.5px;color:var(--muted);
  font-weight:300;line-height:1.95}
.arow .ac{font-size:12px;color:var(--gold);margin-top:6px}

/* ---------- prose / info ---------- */
.prose{max-width:64ch;font-size:14.5px;font-weight:300;line-height:2;color:#C6C7C9}
.prose p{margin-bottom:15px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:12px;margin-top:26px}
.info .i{background:var(--ink-2);border-radius:8px;padding:15px 16px;min-width:0}
.info .i .l{font-size:11.5px;color:var(--gold);margin-bottom:5px}
.info .i .v{font-size:13.5px;line-height:1.85;color:var(--paper);overflow-wrap:anywhere}
.info .i .v a{color:var(--silver);border-bottom:.5px solid var(--rule-2)}
.info .i .v a:hover{color:var(--gold);border-color:var(--gold)}

.empty-state{text-align:center;padding:44px 16px;color:var(--faint);
  font-weight:300;font-size:13.5px}

/* ---------- filters ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.filters button{appearance:none;font-family:var(--fa);cursor:pointer;
  font-size:12.5px;font-weight:400;padding:6px 14px;border-radius:2px;
  border:.5px solid var(--rule-2);background:transparent;color:var(--muted);
  transition:border-color .15s,color .15s}
.filters button:hover{border-color:var(--rule-3);color:var(--paper)}
.filters button.on{border-color:var(--gold);color:var(--gold)}
.filters button:focus-visible{outline:1px solid var(--gold);outline-offset:1px}

/* ---------- footer ---------- */
.foot{flex-shrink:0;background:var(--ink);border-top:.5px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-in{max-width:1180px;margin:0 auto;padding:18px clamp(16px,4vw,32px);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:var(--faint)}
.foot-in .fb-sub{margin-top:3px}
.foot-links{display:flex;gap:14px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--gold)}

.loading{padding:70px 20px;text-align:center;color:var(--faint);font-weight:300}