/* salmo23significado.com — arquétipo field-guide-annotated
   Paleta: pasture-green-and-bone. Ornamento: anotações marginais.
   Abertura: image-first — a prancha de abertura é desenhada só com CSS
   nesta versão; o ativo nomeado (pastagem-verde-ovelhas.avif) pertence a um
   passe posterior de imagens e o layout precisa sustentar-se sem ele.
   Folha escrita exclusivamente para este site.

   FONTES. A matriz atribui Fraunces (títulos) e Piazzolla (texto),
   auto-hospedadas e subsetadas. Nenhum arquivo de fonte acompanha esta
   versão — as licenças dos artefatos exatos ainda não foram verificadas
   (item pré-implantação). As pilhas de sistema abaixo aproximam o timbre.
   Nenhum CDN de fontes, nunca. */

:root {
  --pasto: #3f6b4f;
  --pasto-escuro: #2c4c38;
  --osso: #f1ecdf;
  --osso-claro: #faf7ef;
  --grafite: #24312a;
  --nota-cinza: #5c6b60;
  --medida: 33rem;
  --titulos: "Fraunces", "Georgia", "Times New Roman", serif;
  --corpo: "Piazzolla", "Palatino", "Palatino Linotype", "Georgia", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--osso-claro);
  color: var(--grafite);
  font-family: var(--corpo);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);
  line-height: 1.65;
}

.trilha-nav {
  background: var(--pasto-escuro);
  color: var(--osso);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  padding: 0.8rem 1.4rem;
  font-size: 0.88rem;
}
.trilha-nav a { color: var(--osso); text-decoration: none; padding-bottom: 2px; }
.trilha-nav a:hover, .trilha-nav a:focus { border-bottom: 2px solid var(--osso); }
.trilha-nav [aria-current="page"] { border-bottom: 2px solid #b7d1b0; font-weight: 700; }

/* prancha de abertura: gradiente de pastagem, sem nenhum arquivo de imagem */
.prancha {
  min-height: 34vh;
  background: linear-gradient(178deg, #cfe0c4 0%, #8fb98a 34%, var(--pasto) 78%, var(--pasto-escuro) 100%);
  display: flex;
  align-items: flex-end;
}
.prancha figcaption {
  width: 100%;
  background: rgba(36, 49, 42, 0.72);
  color: var(--osso);
  font-size: 0.82rem;
  padding: 0.5rem 1.4rem;
}

.cabecalho-guia {
  max-width: 44rem;
  padding: 1.8rem 1.4rem 0.4rem;
  margin: 0 auto;
}
.cabecalho-guia h1 {
  font-family: var(--titulos);
  font-weight: 650;
  font-size: clamp(2rem, 5.5vw, 3.3rem);
  line-height: 1.08;
  margin: 0 0 0.8rem;
  color: var(--pasto-escuro);
}
.cabecalho-guia .lide { font-size: 1.12rem; margin: 0; }

.campo {
  display: grid;
  grid-template-columns: minmax(0, var(--medida)) 15rem;
  gap: 0 2.2rem;
  justify-content: center;
  padding: 1.6rem 1.4rem 3rem;
}
.campo > * { grid-column: 1; }
.campo h2 {
  font-family: var(--titulos);
  font-weight: 650;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  color: var(--pasto-escuro);
  margin: 2.2rem 0 0.7rem;
}
.campo p { margin: 0 0 1.05rem; }

.anotacao {
  grid-column: 2;
  align-self: start;
  border-left: 3px solid var(--pasto);
  padding: 0.15rem 0 0.15rem 0.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--nota-cinza);
  margin: 0 0 1.2rem;
}
.anotacao .num-nota {
  font-family: var(--titulos);
  font-weight: 700;
  color: var(--pasto);
  margin-right: 0.3rem;
}
@media (max-width: 54rem) {
  .campo { grid-template-columns: minmax(0, 1fr); }
  .anotacao { grid-column: 1; background: var(--osso); border-left-color: var(--pasto-escuro); }
}

.chamada { color: var(--pasto); font-weight: 700; text-decoration: none; }

.amostra-texto {
  background: var(--osso);
  border: 1px solid #d8d0bc;
  border-radius: 2px;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0 1.4rem;
}
.amostra-texto .etiqueta {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pasto);
  margin-bottom: 0.35rem;
}

.campo q, .anotacao q { quotes: "\00AB" "\00BB" "\201C" "\201D"; }
.campo q::before, .campo q::after { color: var(--pasto); }

.especies { list-style: none; margin: 0; padding: 0; }
.especies > li { margin: 0 0 1.9rem; }
.especies h3 {
  font-family: var(--titulos);
  font-size: 1.12rem;
  margin: 0 0 0.45rem;
  color: var(--pasto-escuro);
}

.rodape-guia {
  background: var(--pasto-escuro);
  color: #cfdccb;
  font-size: 0.85rem;
  padding: 1.6rem 1.4rem 2.2rem;
}
.rodape-guia p { max-width: 46rem; margin: 0 auto; }