/* salmo121.org — stacked-slab-sections · structure-first
   Palette: alpine-white-and-basalt. Ornament: slab-dividers.
   Every rule below was written for this site only.

   TIPOGRAFIA. A matriz de variação atribui Bricolage Grotesque (display) e
   Work Sans (texto), auto-hospedadas e subconjuntadas. Nenhum arquivo de
   fonte é enviado nesta build: a licença de cada artefato baixado
   (redistribuição, atribuição, subsetting) ainda não foi verificada — item
   de pré-implantação. Até lá, as pilhas abaixo aproximam a voz pretendida
   com faces já presentes no aparelho do leitor. Nunca um CDN de fontes. */

:root {
  --alpino: #f5f6f4;
  --neve: #ffffff;
  --basalto: #26292b;
  --basalto-claro: #494e51;
  --veio: #b8bdb9;
  --sinal: #2f6f4f;
  --medida: 41rem;
  --mostrador: "Bricolage Grotesque", "Archivo Narrow", "Arial Narrow", "Helvetica Neue", sans-serif;
  --corrente: "Work Sans", "Avenir Next", "Segoe UI", Verdana, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--alpino);
  color: var(--basalto);
  font-family: var(--corrente);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.65;
}

/* trilho de navegação */
.trilho {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 0.5rem solid var(--basalto);
  background: var(--neve);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.trilho a { color: var(--basalto-claro); text-decoration: none; padding-bottom: 0.15rem; }
.trilho a:hover, .trilho a:focus { color: var(--basalto); text-decoration: underline; }
.trilho a[aria-current="page"] {
  color: var(--basalto);
  font-weight: 600;
  border-bottom: 3px solid var(--sinal);
}

/* cume: a abertura estrutural */
.cume { padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 1.5rem; max-width: 56rem; }
.cume h1 {
  font-family: var(--mostrador);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 0.9rem;
  letter-spacing: -0.015em;
}
.cume .mapa {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  max-width: 38rem;
  margin: 0;
  color: var(--basalto-claro);
}

/* lajes empilhadas, separadas por divisores de laje */
.laje {
  max-width: var(--medida);
  padding: 0 clamp(1rem, 4vw, 3rem) 2.25rem;
}
.laje + .laje { border-top: 0.75rem solid var(--basalto); margin-top: 0.5rem; padding-top: 1.75rem; }
.laje > h2 {
  font-family: var(--mostrador);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 0.8rem;
}
.laje .rotulo-movimento {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sinal);
  margin-bottom: 0.4rem;
}
.laje p { margin: 0 0 1.05rem; }
.laje q { quotes: "“" "”" "‘" "’"; }
.laje q::before, .laje q::after { color: var(--sinal); }

/* fenda: onde o texto bíblico chega do worker */
.fenda {
  background: var(--neve);
  border-left: 0.45rem solid var(--basalto);
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
}
.fenda .fenda-ref {
  display: block;
  font-family: var(--mostrador);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--basalto-claro);
  margin-bottom: 0.3rem;
}

/* comparativo de traduções */
.comparativo { display: grid; gap: 0.9rem; margin: 1.2rem 0; }
.comparativo .fenda { margin: 0; border-left-color: var(--sinal); }

/* perguntas */
.pergunta { padding: 0 0 0.4rem; }
.pergunta h3 {
  font-family: var(--mostrador);
  font-size: 1.08rem;
  margin: 1.5rem 0 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--veio);
}
.pergunta p { margin: 0 0 0.9rem; }

/* laje do aplicativo: penúltima laje de cada página */
.laje-aplicativo {
  background: var(--basalto);
  color: var(--alpino);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);
  margin-top: 2rem;
}
.laje-aplicativo p { max-width: var(--medida); margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--veio); }
.laje-aplicativo a {
  font-family: var(--mostrador);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  color: var(--neve);
  text-decoration-color: var(--sinal);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.16em;
}

/* rodapé de base */
.rodape-base {
  background: var(--neve);
  border-top: 1px solid var(--veio);
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.25rem;
  font-size: 0.85rem;
  color: var(--basalto-claro);
}
.rodape-base p { max-width: var(--medida); margin: 0 0 0.5rem; }

.seguinte { font-weight: 600; }
.seguinte a { color: var(--sinal); }