/* proverbios356.org — commonplace-book · story-first
   Palette: foxed-paper-and-sepia. Ornament: scrapbook-cutouts.
   Um caderno de lugares-comuns: recortes colados, notas de margem, papel
   manchado pelo tempo. Nada desta folha é compartilhado com outro domínio.

   TIPOGRAFIA. A matriz pede IM Fell English (display) e Crimson Pro (texto),
   auto-hospedadas. Como a licença de cada arquivo baixado ainda não passou
   pela verificação pré-implantação (redistribuição, atribuição, subsetting),
   nenhuma fonte é embarcada e nenhum @font-face é declarado: as pilhas de
   sistema abaixo fazem as vezes das faces até a liberação. Sem CDN de fontes. */

:root {
  --papel: #f4ead5;
  --papel-manchado: #ead9bb;
  --sepia: #4c3a24;
  --sepia-clara: #7a6547;
  --tinta-ferro: #33291a;
  --lacre: #8c3b2e;
  --largura-caderno: 42rem;
  --pena: "IM Fell English", "Hoefler Text", "Baskerville", "Times New Roman", serif;
  --letra: "Crimson Pro", "Charter", "Georgia", "Times New Roman", serif;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(140, 59, 46, 0.06), transparent 42%),
    radial-gradient(ellipse at 88% 90%, rgba(76, 58, 36, 0.10), transparent 50%),
    var(--papel);
  color: var(--tinta-ferro);
  font-family: var(--letra);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.68;
}

.indice-caderno {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  justify-content: center;
  padding: 1rem;
  border-bottom: 2px dotted var(--sepia-clara);
  font-family: var(--pena);
  font-size: 0.95rem;
  font-style: italic;
}
.indice-caderno a { color: var(--sepia); text-decoration: none; }
.indice-caderno a:hover, .indice-caderno a:focus { color: var(--lacre); text-decoration: underline; }
.indice-caderno a[aria-current="page"] {
  color: var(--lacre);
  font-style: normal;
  border-bottom: 2px solid var(--lacre);
}

.folha { max-width: var(--largura-caderno); margin: 0 auto; padding: clamp(1.6rem, 5vw, 3.2rem) 1.25rem 2.5rem; }

.folha h1 {
  font-family: var(--pena);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 0.4rem;
  color: var(--sepia);
}
.data-do-caderno {
  font-family: var(--pena);
  font-style: italic;
  color: var(--sepia-clara);
  font-size: 0.95rem;
  margin: 0 0 1.6rem;
}
.folha h2 {
  font-family: var(--pena);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  margin: 2.3rem 0 0.7rem;
  color: var(--sepia);
}
.folha h3 { font-family: var(--pena); font-weight: 400; font-size: 1.15rem; margin: 1.8rem 0 0.4rem; color: var(--sepia); }
.folha p { margin: 0 0 1.05rem; }
.folha q { quotes: "«" "»" "“" "”"; }
.folha q::before, .folha q::after { color: var(--lacre); }

/* recorte: um extrato colado no caderno, levemente torto */
.recorte {
  background: #fbf4e4;
  border: 1px solid var(--papel-manchado);
  box-shadow: 2px 3px 0 rgba(76, 58, 36, 0.18);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0.4rem;
  transform: rotate(-0.6deg);
}
.recorte:nth-of-type(even) { transform: rotate(0.5deg); }
.recorte .procedencia {
  display: block;
  font-family: var(--pena);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--sepia-clara);
  margin-top: 0.5rem;
}

/* margem: nota do anotador ao lado do recorte */
.margem {
  font-style: italic;
  color: var(--sepia-clara);
  font-size: 0.98rem;
  border-left: 2px dotted var(--sepia-clara);
  padding-left: 1rem;
  margin: 1rem 0 1.4rem;
}

/* cartão do aplicativo: colado no fluxo, como os demais recortes */
.cartao-colado {
  background: #fbf4e4;
  border: 1.5px dashed var(--lacre);
  padding: 1rem 1.2rem;
  margin: 2rem 0.6rem;
  transform: rotate(0.8deg);
  text-align: center;
}
.cartao-colado p { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--sepia-clara); }
.cartao-colado a {
  font-family: var(--pena);
  font-size: 1.2rem;
  color: var(--lacre);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

.proxima-folha { font-family: var(--pena); font-style: italic; }
.proxima-folha a { color: var(--lacre); }

.guarda-final {
  border-top: 2px dotted var(--sepia-clara);
  margin-top: 1rem;
  padding: 1.6rem 1.25rem 2.4rem;
  font-size: 0.85rem;
  color: var(--sepia-clara);
}
.guarda-final p { max-width: var(--largura-caderno); margin: 0 auto 0.55rem; }