/* Folha de estilo dos artigos da Biblioteca.
   O index.html tem o seu próprio CSS embutido; as páginas legais usam paginas.css. */
:root{
  --verde:#75835D;--verde-escuro:#4F5B3A;--bege:#F3ECDF;--bege-2:#EDE4D3;
  --branco:#FDFBF7;--dourado:#B08D57;--dourado-claro:#D8C39F;
  --tinta:#4A443C;--tinta-suave:#7D7466;--rose:#C48B8B;--rose-pó:#F4E9E4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;font-weight:300;line-height:1.85;
  color:var(--tinta);background:var(--bege);
}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500}
a{color:var(--verde-escuro)}

.topo{
  background:var(--branco);border-bottom:1px solid rgba(176,141,87,.25);
  padding:1.1rem 1.5rem;display:flex;align-items:center;gap:.9rem;
  position:sticky;top:0;z-index:10;
}
.topo img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.topo a{
  font-family:'Cormorant Garamond',serif;font-size:1.25rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--tinta);
}

.cabecalho{
  background:var(--branco);padding:4.5rem 1.5rem 3.5rem;text-align:center;
  border-bottom:1px solid rgba(176,141,87,.2);
}
.cabecalho .miolo{max-width:760px;margin:0 auto}
.rotulo{
  font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--dourado);margin-bottom:.9rem;
}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.22;letter-spacing:.01em}
.assinado{
  margin-top:1.4rem;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-suave);
}
.divisor{width:76px;height:1px;background:var(--dourado);margin:2.2rem auto 0;position:relative}
.divisor::after{
  content:'❧';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  color:var(--dourado);font-size:1rem;background:var(--branco);padding:0 .5rem;
}

article{max-width:700px;margin:0 auto;padding:3.5rem 1.5rem 1rem;font-size:1.03rem}
article p{color:var(--tinta-suave);margin-bottom:1.25rem}
article p strong{color:var(--tinta);font-weight:500}
article .abertura{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.3rem;line-height:1.65;color:var(--verde-escuro);
  text-align:center;margin-bottom:2.6rem;
}
article h2{
  font-size:1.65rem;color:var(--tinta);margin:3rem 0 1rem;
  padding-top:2rem;border-top:1px solid rgba(176,141,87,.25);
}
/* frases soltas, uma por linha, como a Michelle escreve */
article .versos{
  font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-style:italic;
  color:var(--verde-escuro);line-height:1.9;margin:0 0 1.5rem;padding-left:1.1rem;
  border-left:2px solid var(--dourado-claro);
}
article .versos span{display:block}
article .destaque{
  font-family:'Cormorant Garamond',serif;font-size:1.3rem;line-height:1.6;
  color:var(--tinta);text-align:center;margin:2.2rem auto;max-width:34ch;
}
article .pergunta{
  background:var(--rose-pó);border-radius:16px;padding:1.3rem 1.6rem;
  font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-style:italic;
  color:var(--tinta);text-align:center;margin:2rem 0;
}

.fecho{
  max-width:700px;margin:1rem auto 0;padding:0 1.5rem 4rem;text-align:center;
}
.fecho .selo{
  display:inline-block;padding:2rem 2.4rem;background:var(--branco);
  border-radius:20px;border:1px solid rgba(176,141,87,.25);
}
.fecho .marca{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.08em;
  color:var(--verde-escuro);
}
.fecho .lema{font-size:.9rem;color:var(--tinta-suave);margin-top:.3rem}
.fecho .autora{
  margin-top:1rem;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);
}
.fecho .accao{margin-top:2.4rem}
.fecho .accao a{
  display:inline-block;padding:.85rem 2rem;border-radius:30px;
  background:var(--verde-escuro);color:#F4F1E8;text-decoration:none;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .25s;
}
.fecho .accao a:hover{background:var(--verde)}

footer{
  background:var(--verde-escuro);color:#F4F1E8;text-align:center;
  padding:2.6rem 1.5rem;font-size:.85rem;
}
footer a{color:#DCCFA8}
footer .assinatura{margin-top:1.3rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
footer .assinatura a{color:rgba(244,241,232,.55);text-decoration:none}
footer .assinatura a strong{font-weight:600;color:rgba(244,241,232,.75)}
footer .assinatura a:hover strong{color:#DCCFA8}
.voltar{display:block;text-align:center;margin:2.5rem 0 0;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}