/* ============================================================
   CHAVE BÍBLICA · AT — identidade "aparato de estudo"
   papel · tinta · rubrica (tradição dos manuscritos rubricados)
   ============================================================ */

:root {
  --papel: #FBFAF6;
  --carta: #FFFFFF;
  --tinta: #241F1A;
  --tinta-suave: #4A443B;
  --rubrica: #8E1F2F;      /* vermelho de rubrica */
  --rubrica-claro: #F6E9EB;
  --azul: #2A4A72;         /* azul-tinta dos links */
  --linha: #E6E1D4;
  --neutro: #6E675A;
  --verde-ok: #3D6B4F;
  --sombra: 0 1px 2px rgba(36, 31, 26, .05), 0 4px 14px rgba(36, 31, 26, .05);
  --raio: 12px;
  --fonte-display: "EB Garamond", Georgia, serif;
  --fonte-corpo: "Source Serif 4", Georgia, serif;
  --fonte-ui: "IBM Plex Sans", -apple-system, sans-serif;
  --fonte-hebraico: "Noto Serif Hebrew", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rubrica); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ---------- cabeçalho fixo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 250, 246, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linha);
}
.topo-inner {
  max-width: 42rem; margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--fonte-ui); font-size: .8125rem;
}
.marca {
  font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem;
  color: var(--tinta); text-decoration: none; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .45rem;
}
.marca .heb { font-family: var(--fonte-hebraico); color: var(--rubrica); font-size: 1rem; }
.migalhas { color: var(--neutro); display: flex; gap: .4rem; align-items: center; flex: 1; min-width: 0; }
.migalhas a { color: var(--neutro); text-decoration: none; }
.migalhas a:hover { color: var(--rubrica); }
.migalhas .sep { color: var(--linha); }
.migalhas .atual { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- estrutura geral ---------- */
main { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

.abertura { padding: 1.25rem 0 .5rem; }
.eyebrow {
  font-family: var(--fonte-ui); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rubrica);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem;
}
.eyebrow::before { content: "§"; font-family: var(--fonte-display); font-size: .9rem; }
h1 {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; margin: 0 0 .35rem;
}
.subtitulo { color: var(--tinta-suave); font-size: 1.05rem; margin: 0; }
.heb-grande {
  font-family: var(--fonte-hebraico); font-size: 1.6rem; color: var(--rubrica);
  line-height: 1; display: inline-block; margin-inline-start: .5rem;
}

/* ---------- seções em "aparato" ---------- */
.secao { margin-top: 1.75rem; }
.secao-rotulo {
  font-family: var(--fonte-ui); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rubrica);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
}
.secao-rotulo::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.secao p { margin: .4rem 0; }
.nota-fonte { font-family: var(--fonte-ui); font-size: .8125rem; color: var(--neutro); }

.carta {
  background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem;
}

/* verso-chave */
.verso-chave {
  border-inline-start: 3px solid var(--rubrica);
  background: var(--carta); border-radius: 0 var(--raio) var(--raio) 0;
  padding: .8rem 1rem; margin-top: .75rem;
  font-family: var(--fonte-display); font-size: 1.2rem; line-height: 1.45;
}
.verso-chave .ref { display: block; font-family: var(--fonte-ui); font-size: .75rem; color: var(--neutro); margin-top: .35rem; letter-spacing: .06em; }

/* listas estruturais (estrutura, ações) */
.lista-aparato { list-style: none; margin: 0; padding: 0; }
.lista-aparato li {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px dashed var(--linha);
}
.lista-aparato li:last-child { border-bottom: 0; }
.lista-aparato .ref {
  font-family: var(--fonte-ui); font-size: .78rem; font-weight: 600;
  color: var(--rubrica); padding-top: .2rem; letter-spacing: .02em;
}

/* palavras no original */
.palavras { display: grid; gap: .6rem; }
.palavra { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; align-items: baseline; }
.palavra .heb { font-family: var(--fonte-hebraico); font-size: 1.5rem; color: var(--tinta); grid-row: span 2; min-width: 4.2rem; text-align: center; }
.palavra .translit { font-style: italic; font-weight: 600; }
.palavra .translit .gloss { font-style: normal; font-weight: 400; color: var(--tinta-suave); }
.palavra .nota { font-size: .95rem; color: var(--tinta-suave); }

/* chips (personagens, temas) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--fonte-ui); font-size: .84rem; font-weight: 500;
  border: 1px solid var(--linha); background: var(--carta);
  border-radius: 999px; padding: .34rem .8rem; text-decoration: none; color: var(--tinta);
}
a.chip:hover { border-color: var(--rubrica); color: var(--rubrica); }
.chip.mudo { color: var(--neutro); background: transparent; }
.chip.tema { background: var(--rubrica-claro); border-color: transparent; color: var(--rubrica); }

/* intertextualidade */
.intertexto { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.intertexto li { background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio); padding: .65rem .85rem; }
.intertexto .linha1 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.intertexto .refs { font-family: var(--fonte-ui); font-weight: 600; font-size: .9rem; }
.intertexto .tipo {
  font-family: var(--fonte-ui); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rubrica); background: var(--rubrica-claro);
  border-radius: 4px; padding: .12rem .45rem;
}
.intertexto .nota { font-size: .93rem; color: var(--tinta-suave); margin-top: .15rem; }

/* perguntas */
.perguntas { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.perguntas li { counter-increment: q; display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; padding: .5rem 0; }
.perguntas li::before {
  content: counter(q); font-family: var(--fonte-display); font-size: 1.3rem;
  color: var(--rubrica); text-align: center; line-height: 1.2;
}
.perguntas .rotulo-q { font-family: var(--fonte-ui); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--neutro); display: block; }

/* ---------- árvore genealógica (assinatura visual) ---------- */
.arvore { margin-top: .4rem; }
.geracao { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.conector { display: flex; justify-content: center; }
.conector span { width: 1px; height: 1.1rem; background: var(--neutro); opacity: .5; }
.pessoa-no {
  font-family: var(--fonte-ui); text-decoration: none; text-align: center;
  background: var(--carta); border: 1px solid var(--linha); border-radius: 10px;
  padding: .45rem .8rem; min-width: 5.2rem; color: var(--tinta); box-shadow: var(--sombra);
}
.pessoa-no .nome { font-weight: 600; font-size: .92rem; display: block; }
.pessoa-no .papel { font-size: .68rem; color: var(--neutro); letter-spacing: .05em; text-transform: uppercase; }
a.pessoa-no:hover { border-color: var(--rubrica); }
.pessoa-no.central { border-color: var(--rubrica); border-width: 2px; }
.pessoa-no.central .nome { color: var(--rubrica); }
.pessoa-no.desconhecido { border-style: dashed; color: var(--neutro); background: transparent; box-shadow: none; }
.casal { display: flex; align-items: center; gap: .35rem; }
.casal .elo { font-family: var(--fonte-display); color: var(--rubrica); font-size: 1.1rem; }
.linhagem { margin-top: .9rem; font-family: var(--fonte-ui); font-size: .82rem; color: var(--neutro); line-height: 1.9; }
.linhagem a { color: var(--azul); text-decoration: none; }
.linhagem .seta { color: var(--linha); margin: 0 .15rem; }
.linhagem .fim { color: var(--rubrica); font-weight: 600; }

/* ---------- grades (livros / capítulos) ---------- */
.grade-livros { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .55rem; margin-top: .8rem; }
.livro-item {
  font-family: var(--fonte-ui); font-size: .9rem; text-decoration: none;
  background: var(--carta); border: 1px solid var(--linha); border-radius: 10px;
  padding: .6rem .75rem; color: var(--tinta); display: flex; justify-content: space-between; align-items: baseline;
}
.livro-item .qtd { font-size: .72rem; color: var(--neutro); }
a.livro-item:hover { border-color: var(--rubrica); }
.livro-item.breve { color: var(--neutro); background: transparent; border-style: dashed; }
.grade-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .5rem; margin-top: .8rem; }
.cap-item {
  font-family: var(--fonte-ui); font-weight: 600; text-decoration: none; text-align: center;
  background: var(--carta); border: 1px solid var(--linha); border-radius: 10px;
  padding: .55rem 0; color: var(--azul);
}
a.cap-item:hover { border-color: var(--rubrica); color: var(--rubrica); }
.cap-item.breve { color: var(--neutro); background: transparent; border-style: dashed; font-weight: 400; }

/* navegação entre capítulos */
.nav-caps { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2.2rem; font-family: var(--fonte-ui); font-size: .875rem; }
.nav-caps a, .nav-caps span { border: 1px solid var(--linha); border-radius: 10px; padding: .55rem .9rem; text-decoration: none; background: var(--carta); }
.nav-caps span { color: var(--neutro); border-style: dashed; background: transparent; }

/* selo de construção */
.selo-construcao {
  font-family: var(--fonte-ui); font-size: .78rem; color: var(--neutro);
  border: 1px dashed var(--linha); border-radius: 8px; padding: .5rem .75rem; margin-top: .75rem;
}

.rodape {
  max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-ui); font-size: .78rem; color: var(--neutro);
}

@media (max-width: 420px) {
  .lista-aparato li { grid-template-columns: 4.2rem 1fr; gap: .5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .secao { animation: surgir .35s ease both; }
  @keyframes surgir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* respostas das perguntas */
.resposta { margin-top: .4rem; }
.resposta summary { font-family: var(--fonte-ui); font-size: .8rem; font-weight: 600; color: var(--azul); cursor: pointer; list-style-position: inside; }
.resposta[open] summary { color: var(--rubrica); }
.resposta p { font-size: .95rem; color: var(--tinta-suave); margin: .35rem 0 0; border-inline-start: 2px solid var(--linha); padding-inline-start: .7rem; }

/* citações de EGW e resumo das fontes */
.egw-cit { margin: 0 0 .9rem; }
.egw-cit:last-child { margin-bottom: 0; }
.egw-texto { font-family: var(--fonte-texto); font-size: 1rem; font-style: italic; color: var(--tinta); margin: 0 0 .3rem; border-inline-start: 3px solid var(--rubrica); padding-inline-start: .8rem; }
.egw-ref { font-family: var(--fonte-ui); font-size: .8rem; color: var(--tinta-suave); margin: 0; padding-inline-start: .9rem; }
.fonte-resumo { font-size: .92rem; color: var(--tinta-suave); margin: .3rem 0 0; }

/* ensaio do "Para aprofundar" */
.ensaio p { font-size: 1rem; line-height: 1.75; margin: 0 0 .9rem; }
.ensaio p:first-child::first-letter { font-family: var(--fonte-titulo); font-size: 2.1em; line-height: 1; padding-inline-end: .08em; color: var(--rubrica); float: left; }
.bib-rotulo { font-family: var(--fonte-ui); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin: 1.1rem 0 .5rem; }

/* continuidade da promessa */
.continuidade .cont-rotulo { display: none; }
.cont-cadeia { line-height: 2.1; margin: 0; font-family: var(--fonte-ui); font-size: .92rem; }
.cont-cadeia a { color: var(--azul); text-decoration: none; border-bottom: 1px dotted var(--azul); }
.cont-atual { color: var(--rubrica); font-weight: 700; border-bottom: 2px solid var(--rubrica); }
.cont-salto { color: var(--tinta-suave); }
.cont-cadeia .seta { color: var(--tinta-suave); padding: 0 .3rem; }

/* estudo temático */
/* fio temático: referências longas empilham sobre a nota */
.fio li { grid-template-columns: 1fr; gap: .15rem; }
.fio .ref { padding-top: 0; }