/* ============================================================
   UVD CLUB — sistema visual
   Creme + vinho/bordô · serifa clássica · study-is-sexy
   ============================================================ */

:root {
  /* — paleta — */
  --cream:        #FAF5EC;   /* fundo principal */
  --cream-2:      #F3E8D6;   /* papel/seção alternada */
  --cream-3:      #EDE0CB;   /* bordas suaves / cards */
  --wine:         #7C1D2B;   /* bordô da marca */
  --wine-deep:    #5E141F;   /* bordô escuro */
  --clay:         #B26B5E;   /* rosa-terracota (frases) */
  --ink:          #2B231E;   /* texto principal (preto quente) */
  --muted:        #8E8173;   /* texto secundário */
  --line:         #D9CBB4;   /* linhas/hairlines */

  /* accent ativo (tweakável) */
  --accent:       var(--wine);

  /* — tipografia — */
  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-body:    "EB Garamond", Georgia, serif;
  --sans-ui:       "Jost", system-ui, sans-serif;
  --mono:          ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-scale: 1; /* tweakável */

  /* — métricas — */
  --maxw: 1280px;
  --radius: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: calc(17px * var(--fs-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* — micro labels / kicker — */
.kicker {
  font-family: var(--sans-ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.ui-label {
  font-family: var(--sans-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* — botões — */
.btn {
  font-family: var(--sans-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 15px 28px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--cream);
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn:hover { background: var(--wine-deep); border-color: var(--wine-deep); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: var(--cream); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* — placeholder de imagem — */
.ph {
  position: relative;
  background-color: var(--cream-2);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 11px,
      rgba(124,29,43,0.05) 11px,
      rgba(124,29,43,0.05) 12px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--wine);
}
.ph__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(124,29,43,0.62);
  text-align: center;
  padding: 8px 14px;
  border: 1px dashed rgba(124,29,43,0.3);
  background: rgba(250,245,236,0.55);
  max-width: 80%;
  line-height: 1.5;
}

/* hairline divider */
.rule { height: 1px; background: var(--line); border: 0; }

/* container */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  html, body { font-size: calc(16px * var(--fs-scale)); }
}

/* selection */
::selection { background: var(--wine); color: var(--cream); }

/* scrollbar (subtle) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: 99px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* marquee (club) */
@keyframes uvd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes uvd-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* fade-in helper */
.ig-tile img { transition: transform .5s ease, filter .3s ease; }
.ig-tile:hover img { transform: scale(1.05); filter: brightness(0.95); }
@keyframes uvd-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: uvd-fade .7s cubic-bezier(.2,.7,.2,1) both; }