/* ============================================================
   BIBLIOTECA · Profundidade (artigos), leitor e marcação de lidos
   ============================================================ */

/* ---------- Profundidade (seção de artigos) ---------- */
/* BUG: era var(--folga), token que nunca existiu — o padding inteiro
   virava inválido e a seção ficava com espaçamento vertical ZERO. */
.profundidade { padding: var(--sec) 0; border-top: 1px solid var(--carvao); }
.profundidade__sub { max-width: 60ch; color: var(--cinza); margin-top: 1.2rem; }
.profundidade__grade {
  margin-top: 2.4rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.artigo-card {
  display: flex; flex-direction: column; gap: .8rem; text-align: left;
  padding: 1.5rem 1.4rem; border: 1px solid var(--carvao);
  background: var(--fuligem); transition: border-color .3s, transform .3s var(--ease);
}
.artigo-card:hover, .artigo-card:focus-visible {
  border-color: color-mix(in srgb, var(--brasa) 70%, var(--carvao));
  transform: translateY(-6px);
}
.artigo-card h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.artigo-card p { color: var(--cinza); font-size: .92rem; flex: 1; }
.artigo-card__pe { display: flex; align-items: center; gap: .5rem; color: var(--brasa); }
.artigo-card__pe i { font-style: normal; transition: translate .3s var(--ease); }
.artigo-card:hover .artigo-card__pe i { translate: 4px 0; }

/* ---------- Leitor de artigo (variação do dossiê) ---------- */
.dossie--artigo .dossie__painel { width: min(760px, 100%); }
.dossie__uma--artigo { color: var(--cinza); }
.artigo__corpo h4 {
  font-family: var(--display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.15rem, 3vw, 1.5rem); margin: 2rem 0 .7rem;
}
.artigo__corpo p { color: var(--cinza); margin-top: .8rem; }
.artigo__corpo p strong { color: var(--osso); }
.artigo__versos { display: grid; gap: 1rem; margin-top: 1.6rem; }
.artigo__versos .dossie__verso { margin-top: 0; }
.artigo__fontes { list-style: none; display: grid; gap: .6rem; counter-reset: ref; }
.ref {
  position: relative; padding: .8rem 1rem .8rem 2.6rem;
  border: 1px solid var(--carvao); background: rgba(255,74,0,.02);
  display: grid; gap: .15rem;
}
.ref::before {
  counter-increment: ref; content: counter(ref);
  position: absolute; left: .9rem; top: .85rem;
  font-family: var(--mono); font-size: .72rem; color: var(--brasa);
}
.ref__tipo {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brasa);
}
.ref__obra { color: var(--osso); font-size: .92rem; font-weight: 500; }
.ref__autor { color: var(--cinza); font-size: .85rem; }
.ref__nota { color: var(--cinza); font-size: .8rem; font-style: italic; margin-top: .15rem; }

/* ---------- Artigos: marcação de lidos ---------- */
.artigo-card__topo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.artigo-card__lido { color: var(--brasa); opacity: 0; transition: opacity .3s; }
.artigo-card.lido .artigo-card__lido { opacity: 1; }
.artigo-card.lido { border-color: color-mix(in srgb, var(--brasa) 30%, var(--carvao)); }

/* ============================================================
   CURIOSIDADES — mito vs. Bíblia
   ============================================================ */
.curiosidades { padding: var(--sec) 0; border-top: 1px solid var(--carvao); }
.curiosidades__sub { max-width: 62ch; color: var(--cinza); margin-top: 1.2rem; }
.curiosidades__filtros { margin-top: 2rem; justify-content: flex-start; }
.curiosidades__grade {
  margin-top: 2.4rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* card que vira em 3D */
.curi-card {
  position: relative; min-height: 260px;
  perspective: 1400px;
}
.curi-card__face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: .9rem; padding: 1.5rem 1.4rem;
  border: 1px solid var(--carvao); background: var(--fuligem);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .6s var(--ease), border-color .3s;
  overflow-y: auto;
}
.curi-card__face--frente { transform: rotateY(0deg); }
.curi-card__face--verso {
  transform: rotateY(180deg);
  border-color: color-mix(in srgb, var(--brasa) 45%, var(--carvao));
  background: linear-gradient(155deg, rgba(255,74,0,.07), var(--fuligem) 60%);
}
.curi-card.virado .curi-card__face--frente { transform: rotateY(-180deg); }
.curi-card.virado .curi-card__face--verso { transform: rotateY(0deg); }
.curi-card__face:hover { border-color: var(--brasa); }

.curi-card__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; width: 100%; flex: none; flex-wrap: wrap;
}
.curi-card__selo {
  font-family: var(--display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.05rem; line-height: 1; color: var(--cinza);
  flex: none;
}
.curi-card__selo--real { color: var(--brasa); font-size: .9rem; }
.curi-card__tag { text-align: right; line-height: 1.25; flex-shrink: 1; min-width: 0; }
.curi-card__mito {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem); color: var(--osso); flex: 1;
}
.curi-card__real { color: var(--cinza); font-size: .95rem; flex: 1; line-height: 1.65; }
.curi-card__real, .curi-card__mito { margin: 0; }
.curi-card__toque { margin-top: auto; color: var(--brasa); }
.curi-card__fonte {
  margin-top: auto; color: var(--brasa);
  padding-top: .6rem; border-top: 1px solid var(--carvao); width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .curi-card__face { transition: opacity .3s; }
  .curi-card__face--verso { transform: none; opacity: 0; pointer-events: none; }
  .curi-card__face--frente { transform: none; }
  .curi-card.virado .curi-card__face--frente { opacity: 0; pointer-events: none; }
  .curi-card.virado .curi-card__face--verso { opacity: 1; pointer-events: auto; transform: none; }
}

/* A "quebra de simetria" (nth-child(even) descendo 2rem) saiu: empurrar
   metade dos cards pra baixo não é composição editorial, é desalinhar a
   grade e torcer pra parecer intencional. Custava a linha de base e não
   devolvia hierarquia nenhuma. A hierarquia agora vem do conteúdo. */
.profundidade__grade { align-items: start; }

/* hover com a mola: sobe com um quique curto — vivo, não robótico.
   Sem a rotação: card torto não comunica nada. */
.artigo-card { transition: border-color .3s, transform .45s var(--ease-mola); }
.artigo-card:hover, .artigo-card:focus-visible { transform: translateY(-6px); }