/* Stave Records: catalog page (index.html). Shared styles live in base.css. */
#q{flex:1;min-width:220px;max-width:400px;font:500 16px var(--body);padding:10px 16px;border:2px solid var(--hi);border-radius:4px;background:#f4ecd6;color:#21170f}
.hero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:18px 0 48px}
h1{font:800 clamp(38px,5.5vw,64px)/1 var(--serif);letter-spacing:-.02em;margin:0 0 14px}
.lede{color:#d6c6a4;max-width:46ch;margin:0 0 24px}
.stats{display:flex;gap:30px;flex-wrap:wrap}
.stats b{font:800 32px var(--serif);display:block;line-height:1;color:var(--hi)}
.stats span{color:#d6c6a4;font-size:14px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:3px solid var(--ink);margin:34px 0 20px;padding-left:6px}
.tabs button{font:700 15px var(--body);padding:9px 22px 8px;border:2px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;background:var(--line);color:var(--ink);cursor:pointer;margin-bottom:-3px}
.tabs button[aria-selected="true"]{background:var(--hi);padding-top:13px;position:relative;z-index:1;color:#21170f}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chips button{font:600 14px var(--body);padding:5px 14px;border:2px solid var(--ink);border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer;transform:rotate(-1deg)}
.chips button:nth-child(even){transform:rotate(1deg)}
.chips button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.req{font:13px var(--mono);color:var(--muted);margin-bottom:22px;overflow-wrap:anywhere}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px 30px;padding-bottom:64px}
.card{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.sleeve{position:relative;aspect-ratio:1}
.sleeve svg{position:relative;z-index:1;width:100%;height:100%;display:block;border-radius:3px;box-shadow:3px 3px 0 rgba(0,0,0,.28)}
.vn{position:absolute;top:4%;left:6%;width:92%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#15100c 0 2px,#261e18 2px 3px);transition:transform .3s ease}
.vn::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--lc,#e3a72f)}
.card:hover .vn,.card:focus-visible .vn{transform:translateX(15%)}
.card h3{font:600 18px/1.25 var(--serif);margin:12px 0 0}
.card p{margin:0;color:var(--muted);font-size:15px}
.card p.cat,.cat{font:500 12px var(--mono);letter-spacing:.04em;color:var(--red);margin:10px 0 0}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.av{position:relative;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#15100c 0 2px,#261e18 2px 3px);display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.av b{width:40%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:800 30px var(--serif);color:#fff}
.card:hover .av{transform:rotate(25deg);transition:transform .4s}
.gt{aspect-ratio:1.4;border-radius:4px 4px 12px 12px;border:2px solid var(--ink);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;margin-top:12px;box-shadow:3px 3px 0 rgba(0,0,0,.28)}
.gt::before{content:"";position:absolute;top:-14px;left:16px;width:56px;height:14px;background:inherit;border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}
.gt b{font:800 26px var(--serif)}.gt span{font-size:14px;opacity:.92}
.list{grid-column:1/-1}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700;font-size:14px;border-bottom:2px solid var(--ink)}
td button{all:unset;cursor:pointer;color:var(--accent);font-weight:700;text-decoration:underline}
.tw{overflow-x:auto}.tw table{min-width:560px}
.empty{grid-column:1/-1;color:var(--muted);padding:30px 0}
dialog{border:3px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);padding:0;width:min(660px,calc(100% - 32px));max-height:88vh;box-shadow:8px 8px 0 var(--hi)}
dialog::backdrop{background:rgba(18,12,8,.65)}
.d{padding:24px}
.dh{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px}
.dh .sleeve,.dh .av{width:140px;flex:none;margin-right:36px}
.dh .vn{transform:translateX(26%)}
.dh .av{margin-right:0}
.dh h2{font:800 30px/1.1 var(--serif);margin:0 0 6px;letter-spacing:-.01em}
.meta{color:var(--muted);margin:0 0 6px}
.x{float:right;font:700 14px var(--body);border:2px solid var(--ink);background:none;color:var(--ink);border-radius:4px;padding:4px 12px;cursor:pointer}
.link{all:unset;cursor:pointer;color:var(--accent);font-weight:700;text-decoration:underline}
h3.side{font:800 18px var(--serif);margin:18px 0 6px}
ol.tr{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
ol.tr li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
ol.tr small{color:var(--muted);font-family:var(--mono);font-size:13px}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}
.mini svg{width:100%;height:auto;display:block;border-radius:3px;box-shadow:3px 3px 0 rgba(0,0,0,.28)}
footer{border-top:3px double var(--ink);padding:26px 0 44px;color:var(--muted);font-size:15px}
@media(max-width:700px){.hero{grid-template-columns:1fr}.disc{width:170px}.dh{flex-direction:column}}

.sk{aspect-ratio:1;border-radius:3px;background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%}
@media(prefers-reduced-motion:no-preference){.sk{animation:sh 1.2s linear infinite}@keyframes sh{to{background-position:-200% 0}}}
.msg{grid-column:1/-1;border:2px dashed var(--ink);border-radius:6px;padding:22px;background:var(--surface)}
.msg b{font:800 20px var(--serif);display:block;margin-bottom:4px}
.more{grid-column:1/-1;justify-self:center;float:none;padding:8px 22px}
.sleeve img,.sleeve .ph{position:relative;z-index:1;width:100%;height:100%;display:block;border-radius:3px;box-shadow:3px 3px 0 rgba(0,0,0,.28);object-fit:cover}
.ph{display:grid;place-items:center;font:800 56px var(--serif);color:#fff}
.sleeve .ph{display:grid;place-items:center}
.av img{width:40%;aspect-ratio:1;border-radius:50%;object-fit:cover}
/* Genre folders: lift, tilt and open the tab on hover or keyboard focus */
.card:hover .gt,.card:focus-visible .gt{transform:translateY(-8px) rotate(-1.5deg);box-shadow:6px 10px 0 rgba(0,0,0,.28)}
.card:hover .gt::before,.card:focus-visible .gt::before{width:84px;height:20px;top:-20px}
@media(prefers-reduced-motion:no-preference){
.gt,.gt::before{transition:transform .25s ease,box-shadow .25s ease,width .25s ease,height .25s ease,top .25s ease}
}

/* Account link in the header */
#account{display:flex;gap:12px;align-items:center;font-weight:700;color:#f3e6c9}
#account a{color:#f3e6c9}
#account button{all:unset;cursor:pointer;text-decoration:underline}
#account button:focus-visible{outline:3px solid var(--hi);outline-offset:3px}