/* deuseonossorefugio.com — full-bleed-image-essay · image-first
   Palette: river-jade-and-storm. Ornament: full-bleed-plates.
   Folha escrita exclusivamente para este domínio.

   SOBRE AS PLACAS. O arquétipo pede pranchas fotográficas em AVIF, mas esta
   build não envia nenhum arquivo de imagem: as licenças de qualquer artefato
   visual (como as das fontes) são item de verificação pré-implantação, e a
   regra de contenção proíbe dependências remotas. As placas desta versão são
   campos tipográficos de cor profunda — gradientes de jade e tempestade —
   que reservam o lugar das pranchas e mantêm o gesto de abertura visual.

   SOBRE AS FONTES. A matriz atribui Abril Fatface (display) e Vollkorn
   (texto), auto-hospedadas. Sem licenças verificadas, nenhum @font-face é
   declarado; as pilhas abaixo aproximam o desenho com serifas de sistema. */

:root {
  --tempestade: #1c242b;
  --tempestade-funda: #12181d;
  --jade: #2c7765;
  --jade-claro: #8fc8b9;
  --nevoa: #e9eeec;
  --areia: #cfd8d4;
  --coluna: 39rem;
  --titulo: "Abril Fatface", "Bodoni 72", "Didot", "Playfair Display", Georgia, serif;
  --prosa: "Vollkorn", "Iowan Old Style", "Palatino", "Book Antiqua", serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nevoa);
  color: var(--tempestade);
  font-family: var(--prosa);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
}

.correr {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.8rem;
  padding: 0.85rem 1rem;
  background: var(--tempestade-funda);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.correr a { color: var(--areia); text-decoration: none; }
.correr a:hover, .correr a:focus { color: var(--jade-claro); text-decoration: underline; }
.correr a[aria-current="page"] { color: var(--jade-claro); border-bottom: 1px solid var(--jade-claro); }

/* placa: o campo de cor em sangria total, com o versículo ao centro */
.placa {
  margin: 0;
  min-height: min(72vh, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1.25rem, 8vw, 8rem);
  background: linear-gradient(160deg, var(--tempestade) 0%, var(--tempestade-funda) 55%, #0d2a24 100%);
  color: var(--nevoa);
}
.placa.placa-jade { background: linear-gradient(150deg, #0d2a24 0%, var(--jade) 70%, #3f8f7b 100%); }
.placa.placa-curta { min-height: min(46vh, 22rem); }
.placa [data-scripture-slot] {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.25;
  max-width: 46rem;
}
.placa-legenda {
  margin-top: 1.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--jade-claro);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jade-claro);
  max-width: 46rem;
}
.placa-legenda a { color: var(--nevoa); text-decoration-color: var(--jade-claro); text-underline-offset: 0.2em; }

/* o leito: a prosa entre as placas */
.leito { max-width: var(--coluna); margin: 0 auto; padding: clamp(1.8rem, 5vw, 3.5rem) 1.25rem; }
.leito h1 {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.leito h2 {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.15;
  margin: 2.2rem 0 0.7rem;
  color: #205a4c;
}
.leito p { margin: 0 0 1.1rem; }
.leito q { font-style: italic; }
.leito q::before, .leito q::after { color: var(--jade); font-style: normal; }

.marco {
  border: 0;
  border-top: 3px double var(--jade);
  width: 7rem;
  margin: 2.4rem auto;
}

.aparte {
  border-left: 3px solid var(--jade);
  padding-left: 1.1rem;
  color: #37424a;
  font-size: 0.98rem;
}

.adiante a { color: #205a4c; font-weight: 600; }

.fecho {
  background: var(--tempestade-funda);
  color: var(--areia);
  padding: 2rem 1.25rem 2.6rem;
  font-size: 0.85rem;
  line-height: 1.6;
}
.fecho p { max-width: var(--coluna); margin: 0 auto 0.6rem; }