/* Dramasco - pele comum a todas as páginas */
:root{
  --noir:#0D080F;
  --wine:#1A0E1E;
  --wine-2:#291533;
  --champagne:#E8D5A9;
  --champagne-dim:#9B8B63;
  --rose:#D9647C;
  --paper:#F3EAE6;
  --mute:#A08FA6;
  --mute-2:#6C5C73;
  --line:rgba(232,213,169,.16);
  --line-soft:rgba(232,213,169,.09);
  --rail:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--noir);color:var(--paper);font-family:"Manrope",system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 44% at 82% 0%, rgba(41,21,51,.9), transparent 62%),
             radial-gradient(48% 36% at 2% 30%, rgba(217,100,124,.08), transparent 60%)}
header,main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
::selection{background:var(--rose);color:var(--noir)}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.mono{font-family:"DM Mono",ui-monospace,monospace}
.kick{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-dim)}

/* trilho vertical fixo �?" a estrutura que dá identidade ao site */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:45;border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;background:rgba(13,8,15,.7);backdrop-filter:blur(10px)}
.rail .mark{font-family:"Instrument Serif",serif;font-size:26px;color:var(--champagne);line-height:1}
.rail .vert{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute-2)}
.rail .tgmini{width:34px;height:34px;border-radius:999px;background:var(--rose);display:grid;place-items:center;color:var(--noir)}
.rail .tgmini svg{width:15px;height:15px}
@media(max-width:860px){.rail{display:none}}
.shell{margin-left:var(--rail)}
@media(max-width:860px){.shell{margin-left:0}}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

/* cabeçalho */
.hd{position:sticky;top:0;z-index:40;background:rgba(13,8,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
.hd.on{border-color:var(--line-soft)}
.hd-in{display:flex;align-items:center;gap:22px;height:70px}
.logo{font-family:"Instrument Serif",serif;font-size:26px;letter-spacing:-.01em;line-height:1}
.logo i{font-style:italic;color:var(--rose)}
.nav{display:flex;gap:24px;font-size:14px;color:var(--mute)}
.nav a:hover{color:var(--paper)}
.hact{margin-left:auto;display:flex;align-items:center;gap:10px}
.rnd{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);transition:.2s}
.rnd:hover{color:var(--champagne);border-color:var(--champagne)}
.rnd svg{width:17px;height:17px}
.tgb{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 17px;border-radius:999px;background:var(--rose);color:var(--noir);font-weight:700;font-size:13.5px;transition:.2s}
.tgb:hover{background:var(--champagne)}
.tgb svg{width:15px;height:15px}
.back{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.back:hover{color:var(--champagne)}
.bg{display:none}
@media(max-width:900px){.nav{display:none}.bg{display:grid}}

/* pôster */
.poster{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--wine);border:1px solid var(--line-soft)}
.poster .art{position:absolute;inset:0}
.capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .capa{transform:scale(1.05)}
.poster .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,8,15,.28) 0 18%,transparent 42%,rgba(13,8,15,.92))}
.poster .gen{position:absolute;top:10px;left:10px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.poster .aud{position:absolute;top:10px;right:10px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--noir);background:var(--champagne);padding:2px 7px;border-radius:999px}
.poster .t{position:absolute;left:12px;right:12px;bottom:12px;font-family:"Instrument Serif",serif;font-size:17px;line-height:1.1}
.poster .t small{display:block;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.14em;color:var(--champagne-dim);margin-top:6px;text-transform:uppercase}
.card{display:block}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15px;transition:.2s var(--ease)}
.btn-p{background:var(--champagne);color:var(--noir)}
.btn-p:hover{background:var(--rose);transform:translateY(-2px)}
.btn-s{border:1px solid var(--line);color:var(--paper)}
.btn-s:hover{border-color:var(--rose);color:var(--rose)}
.btn svg{width:17px;height:17px}

footer{border-top:1px solid var(--line-soft);margin-top:52px;padding:34px 0 28px;color:var(--mute-2)}
.foot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

.back{white-space:nowrap}
@media(max-width:420px){.back{display:none}}


/* campos que o acervo nem sempre tem: some em vez de deixar buraco */
p:empty,small:empty,.aud:empty,.rate:empty,.kick:empty,.tc:empty,.mv:empty{display:none}
.ficha span:empty,.ficha div:empty,.priceline div:empty,.pills span:empty,.selos span:empty,.mchips span:empty,.chips span:empty,.hashes a:empty{display:none}
.selos span.solid:empty,.pills .dur:empty,.tiras div:empty{display:none}
.capa{background:transparent}