:root{
  --kraft:#E3D3B4;        /* papel do envelope interno */
  --kraft-claro:#EFE2C8;  /* cartões */
  --kraft-fundo:#D9C69F;  /* faixas */
  --tinta:#241C12;        /* texto */
  --tinta-suave:#5C4F3C;
  --selo:#23538F;         /* azul de selo de gravadora */
  --etiqueta:#F2C230;     /* amarelo de etiqueta de preço */
  --vinil:#17130E;        /* preto do disco */
  --venda:#1E6B3C;
  --borda:rgba(36,28,18,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--tinta);
  font-family:Archivo,system-ui,sans-serif; font-size:16px; line-height:1.5;
  background-color:var(--kraft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .07 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
}
a{color:var(--selo)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--selo);outline-offset:2px;border-radius:3px}

/* ---------- topo ---------- */
.topo{background:var(--vinil);color:var(--kraft);padding:22px 20px 18px;position:relative;overflow:hidden}
.topo::after{ /* meia bolacha girando ao fundo */
  content:"";position:absolute;right:-130px;top:-130px;width:340px;height:340px;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 17%, var(--selo) 17% 31%, transparent 31% 33%, rgba(227,211,180,.06) 33% 34%, transparent 34%),
    repeating-radial-gradient(circle, rgba(227,211,180,.10) 0 1px, transparent 1px 5px),
    #100D09;
  box-shadow:0 0 60px rgba(0,0,0,.5);
}
.topo-in{max-width:1060px;margin:0 auto;position:relative;z-index:1}
.marca{display:flex;align-items:center;gap:14px}
.selo-lp{flex:none;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--kraft);
  background:
    radial-gradient(circle, var(--selo) 0 35%, transparent 35% 37%, rgba(227,211,180,.15) 37% 38%, transparent 38%),
    repeating-radial-gradient(circle, rgba(227,211,180,.12) 0 1px, transparent 1px 4px),
    #100D09;
  border:2px solid rgba(227,211,180,.45)}
.topo .lema{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-weight:700;font-size:clamp(20px,4.4vw,30px);line-height:1.2;margin:0;color:var(--kraft)}
.topo .dados{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#A6996F}

/* ---------- painel de controles ---------- */
.painel{position:sticky;top:0;z-index:40;background:var(--kraft-fundo);border-bottom:2px solid var(--tinta);box-shadow:0 3px 0 rgba(36,28,18,.12)}
.painel-in{max-width:1060px;margin:0 auto;padding:12px 20px;display:none;flex-wrap:wrap;gap:8px;align-items:center}
.painel-mini{display:flex;width:100%;max-width:1060px;margin:0 auto;border:0;background:transparent;padding:11px 20px;font:inherit;font-size:14px;font-weight:700;color:var(--tinta);align-items:center;gap:10px;text-align:left}
.painel-mini .mini-cont{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;color:var(--tinta-suave)}
.painel-mini .mini-badge{width:9px;height:9px;border-radius:50%;background:var(--selo);flex:none}
.painel.aberto .painel-in{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--kraft-fundo);border-bottom:2px solid var(--tinta);box-shadow:0 12px 26px rgba(20,15,8,.28);max-height:72vh;overflow:auto}
.busca{flex:1 1 260px;display:flex;align-items:center;background:var(--kraft-claro);border:2px solid var(--tinta);border-radius:8px;padding:0 10px}
.busca svg{flex:none;opacity:.6}
.busca input{flex:1;border:0;background:transparent;padding:9px 8px;font:inherit;color:var(--tinta);min-width:0}
.busca input:focus{outline:none}
select{appearance:none;background:var(--kraft-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23241C12'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:2px solid var(--tinta);border-radius:8px;padding:8px 26px 8px 10px;font:inherit;font-size:14px;color:var(--tinta);max-width:170px}
.multi-filter{position:relative;flex:0 1 auto}
.multi-filter summary{list-style:none;min-width:150px;max-width:220px;background:var(--kraft-claro);border:2px solid var(--tinta);border-radius:8px;padding:8px 30px 8px 10px;font-size:14px;color:var(--tinta);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.multi-filter summary::-webkit-details-marker{display:none}
.multi-filter summary::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23241C12'/%3E%3C/svg%3E") center/contain no-repeat}
.multi-filter[open] summary{background:var(--tinta);color:var(--kraft)}
.multi-filter[open] summary::after{filter:invert(1);transform:translateY(-50%) rotate(180deg)}
.multi-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:70;width:min(330px,88vw);max-height:360px;overflow:auto;background:var(--kraft-claro);border:2px solid var(--tinta);border-radius:10px;padding:8px;box-shadow:5px 7px 0 rgba(36,28,18,.22)}
.multi-menu label{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border-radius:6px;font-size:13.5px;cursor:pointer}
.multi-menu label:hover{background:var(--kraft)}
.multi-menu input{width:17px;height:17px;accent-color:var(--selo)}
.multi-menu small{font-family:'IBM Plex Mono',monospace;color:var(--tinta-suave);font-size:10.5px}
.filtros-ativos{width:100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.filtro-ativo{border:1px solid var(--selo);background:#e7edf5;color:var(--selo);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.filtro-ativo:hover{background:var(--selo);color:#fff}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bt{border:2px solid var(--tinta);background:var(--kraft-claro);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex;gap:6px;align-items:center;color:var(--tinta)}
.bt:hover{background:var(--tinta);color:var(--kraft)}
.bt.primo{background:var(--tinta);color:var(--kraft)}
.bt.primo:hover{background:var(--selo);border-color:var(--selo)}
.alterna{display:flex;border:2px solid var(--tinta);border-radius:8px;overflow:hidden}
.alterna button{border:0;background:var(--kraft-claro);padding:8px 12px;font-size:14px;font-weight:600;color:var(--tinta)}
.alterna button[aria-pressed="true"]{background:var(--tinta);color:var(--kraft)}
.contagem{width:100%;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--tinta-suave);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.limpar{border:0;background:none;color:var(--selo);font-weight:600;text-decoration:underline;padding:0;display:none}

/* ---------- lista ---------- */
main{max-width:1060px;margin:0 auto;padding:22px 20px 40px}
ol.catalogo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.divisor{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--tinta);
  border-bottom:3px solid var(--tinta);padding:16px 2px 2px;display:flex;align-items:baseline;gap:10px}
.divisor small{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;color:var(--tinta-suave);letter-spacing:.15em}
.item{background:var(--kraft-claro);border:2px solid var(--tinta);border-radius:12px;padding:14px;display:flex;gap:16px;align-items:center;
  box-shadow:4px 4px 0 rgba(36,28,18,.18);animation:chega .35s ease both}
@keyframes chega{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.item.destaque{outline:4px solid var(--etiqueta);outline-offset:2px}

/* capa com o vinil escapando */
.capa-wrap{flex:none;width:132px;position:relative}
.disco{position:absolute;top:7%;right:-8%;width:86%;aspect-ratio:1/1;border-radius:50%;z-index:0;
  background:
    radial-gradient(circle, var(--selo) 0 16%, #10254a 16% 17%, transparent 17% 19%, rgba(227,211,180,.05) 19% 20%, transparent 20%),
    repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    var(--vinil);
  box-shadow:2px 2px 6px rgba(0,0,0,.35);transition:transform .35s ease}
.disco::after{content:"";position:absolute;inset:47.5% auto auto 47.5%;width:5%;height:5%;border-radius:50%;background:var(--kraft)}
.item:hover .disco,.cartao:hover .disco{transform:translateX(16%) rotate(18deg)}
.capa{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--tinta);border-radius:6px;background:#0d0b08;box-shadow:3px 3px 8px rgba(0,0,0,.25)}
.sem-foto{display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;background:repeating-linear-gradient(45deg,#2a241c 0 10px,#17130e 10px 20px);color:var(--kraft);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
button.capa-bt{border:0;padding:0;background:none;width:100%;display:block;position:relative;z-index:1}
.seta{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;width:26px;height:26px;border-radius:50%;
  background:rgba(23,19,14,.85);color:var(--kraft);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.seta:hover{background:var(--selo)}
.seta.esq{left:-9px}.seta.dir{right:-9px}
.foto-tag{position:absolute;left:6px;bottom:6px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  background:rgba(23,19,14,.85);color:var(--kraft);padding:2px 6px;border-radius:4px}

.info{flex:1;min-width:0}
.artista{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;line-height:1.1;margin:0}
.album{font-size:16.5px;margin:2px 0 8px;color:var(--tinta)}
.album em{font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:var(--kraft);border:1px solid var(--borda);border-radius:5px;padding:3px 7px;color:var(--tinta-suave)}
.chip b{color:var(--tinta);font-weight:600}
.obs{margin:8px 0 0;font-size:13px;color:var(--tinta-suave);font-style:italic}
.curio{margin:9px 0 0;font-size:13.5px;line-height:1.45;color:var(--tinta);background:var(--kraft);border-left:3px solid var(--etiqueta);padding:7px 10px;border-radius:0 6px 6px 0;max-width:640px}
.curio b{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);display:block;margin-bottom:2px;font-weight:600}
.linkzin{border:0;background:none;padding:0;margin-left:8px;color:var(--selo);font-size:13px;font-weight:600;text-decoration:underline}

.lado{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tag-venda{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;background:var(--etiqueta);border:2px solid var(--tinta);
  border-radius:6px;padding:5px 9px;box-shadow:2px 2px 0 rgba(36,28,18,.3);transform:rotate(-2deg)}
.tag-acervo{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--tinta-suave);border:1px dashed var(--borda);border-radius:6px;padding:4px 8px}
.bt-zap{background:var(--venda);color:#fff;border:2px solid var(--tinta);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:700;
  display:inline-flex;gap:7px;align-items:center;text-decoration:none;box-shadow:2px 2px 0 rgba(36,28,18,.3)}
.bt-zap:hover{filter:brightness(1.12)}
.bt-playlist{background:var(--selo);color:#fff;border:2px solid var(--tinta);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:700;
  display:inline-flex;gap:7px;align-items:center;box-shadow:2px 2px 0 rgba(36,28,18,.3)}
.bt-playlist:hover{filter:brightness(1.14)}
.bt-playlist:disabled{opacity:.48;cursor:not-allowed;filter:none}

/* ---------- grade ---------- */
ol.catalogo.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.grade .divisor{grid-column:1/-1}
.cartao{background:var(--kraft-claro);border:2px solid var(--tinta);border-radius:12px;padding:12px;box-shadow:4px 4px 0 rgba(36,28,18,.18);animation:chega .35s ease both}
.cartao .capa-wrap{width:100%;margin-bottom:10px}
.cartao .artista{font-size:17px}
.cartao .album{font-size:14px;margin-bottom:6px}
.cartao .lado{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px;width:100%}

/* ---------- paginação ---------- */
.paginacao{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:24px;font-family:'IBM Plex Mono',monospace;font-size:13px}
.vazio{text-align:center;padding:60px 20px;color:var(--tinta-suave)}
.vazio b{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:var(--tinta);display:block;margin-bottom:6px}

/* ---------- lightbox ---------- */
.luz{position:fixed;inset:0;background:rgba(10,8,6,.93);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.luz.aberta{display:flex}
.luz img{max-width:min(92vw,900px);max-height:76vh;border:3px solid var(--kraft);border-radius:6px;box-shadow:0 10px 60px rgba(0,0,0,.6)}
.luz .legenda{color:var(--kraft);font-family:'IBM Plex Mono',monospace;font-size:13px;margin-top:14px;text-align:center}
.luz .luz-curio{color:#CDBE9F;font-size:13px;font-style:italic;margin-top:8px;max-width:640px;text-align:center}
.luz .fecha{position:absolute;top:16px;right:16px;background:none;border:2px solid var(--kraft);color:var(--kraft);border-radius:8px;padding:6px 12px;font-weight:700}
.luz .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(227,211,180,.12);border:2px solid var(--kraft);color:var(--kraft);
  width:46px;height:46px;border-radius:50%;font-size:22px}
.luz .nav:hover{background:var(--selo)}
.luz .nav.esq{left:14px}.luz .nav.dir{right:14px}

/* ---------- playlist ---------- */
.playlist-dialog{width:min(94vw,820px);max-height:88vh;padding:0;border:2px solid var(--tinta);border-radius:14px;background:var(--kraft-claro);color:var(--tinta);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.playlist-dialog::backdrop{background:rgba(10,8,6,.78)}
.playlist-top{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;background:var(--kraft-claro);border-bottom:2px solid var(--tinta)}
.playlist-kicker{margin:0 0 3px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.13em;color:var(--selo)}
.playlist-top h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(22px,4vw,31px);line-height:1.12}
.playlist-subtitle{margin:4px 0 0;color:var(--tinta-suave);font-size:14px}
.playlist-close{flex:none;border:2px solid var(--tinta);border-radius:8px;background:transparent;color:var(--tinta);padding:6px 10px;font-weight:700}
.playlist-body{padding:20px 22px 24px}
.playlist-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.youtube-link,.discogs-link{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--tinta);border-radius:8px;padding:8px 12px;font-weight:700;text-decoration:none;box-shadow:2px 2px 0 rgba(36,28,18,.2)}
.youtube-link{background:#c4302b;color:#fff}.discogs-link{background:var(--vinil);color:var(--kraft)}
.track-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.track-side{min-width:0;border:1px solid var(--borda);border-radius:10px;background:var(--kraft);overflow:hidden}
.track-side h3{margin:0;padding:9px 12px;background:var(--vinil);color:var(--kraft);font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.track-list{list-style:none;margin:0;padding:0}
.track-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:start;padding:9px 10px;border-top:1px solid rgba(36,28,18,.12);font-size:13.5px}
.track-list li:first-child{border-top:0}.track-position{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--selo)}
.track-title{font-weight:700}.track-artist{display:block;margin-top:1px;color:var(--tinta-suave);font-size:12px;font-weight:400}
.track-duration{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-suave)}
.playlist-empty{padding:24px;text-align:center;color:var(--tinta-suave)}
.playlist-loading{padding:32px;text-align:center;color:var(--tinta-suave);font-family:'IBM Plex Mono',monospace}
.privacy-dialog{width:min(92vw,560px);border:2px solid var(--tinta);border-radius:14px;background:var(--kraft-claro);color:var(--tinta);padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.privacy-dialog::backdrop{background:rgba(10,8,6,.78)}
.privacy-dialog h2{font-family:'Bricolage Grotesque',sans-serif;margin:0 0 8px}
.privacy-dialog p{margin:8px 0;color:var(--tinta-suave)}
.privacy-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.footer-button{border:0;background:none;color:var(--etiqueta);text-decoration:underline;padding:0}

/* ---------- rodapé ---------- */
footer{background:var(--vinil);color:#CDBE9F;padding:26px 20px;margin-top:20px}
.rodape-in{max-width:1060px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px}
footer a{color:var(--etiqueta)}

/* ---------- responsivo ---------- */
@media (max-width:640px){
  .topo{padding:16px 20px 13px}
  .item{flex-wrap:wrap}
  .capa-wrap{width:104px}
  .info{flex:1 1 55%}
  .lado{flex-direction:row;width:100%;justify-content:space-between;align-items:center;flex-wrap:wrap}
  select,.multi-filter{max-width:none;flex:1 1 40%}
  .multi-filter summary{max-width:none;width:100%}
  .multi-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:55vh}
  .track-sides{grid-template-columns:1fr}
  .playlist-top,.playlist-body{padding-left:15px;padding-right:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* ---------- impressão ---------- */
@media print{
  .painel,.topo::after,.selo-lp,.seta,.linkzin,.bt-zap,.bt-playlist,.paginacao,footer .no-print,.playlist-dialog{display:none!important}
  body{background:#fff;color:#000}
  .topo{background:#fff;color:#000;padding:0 0 10px}
  .topo .lema{color:#000}
  .topo .dados{color:#333}
  .item,.cartao{box-shadow:none;border:1px solid #999;break-inside:avoid;background:#fff}
  .disco{display:none}
  .chip{background:#fff;border-color:#bbb;color:#333}
  footer{background:#fff;color:#333}
}