/* ==========================================================================
   STHEFANY — página do post
   post.css · v0.9.0
   --------------------------------------------------------------------------
   Primeira tela do projeto com texto corrido longo. Duas coisas mudam em
   relação ao resto do site:

   1. A medida da linha cai para 68 caracteres. O resto do site usa blocos
      curtos, onde a largura importa pouco; em leitura contínua ela é o que
      separa ler de desistir.

   2. O corpo sobe para 1,1875 rem com entrelinha 1,75. Corpo de interface e
      corpo de artigo têm trabalhos diferentes.

   O texto fica sobre o papel branco, alinhado à esquerda, sem coluna
   centralizada: a sangria à esquerda mantém a página coerente com as outras.
   ========================================================================== */

/* O topo com fotografia saiu daqui para `topo.css` na 0.71.0: ele deixou de
   ser do post e passou a ser o topo de toda tela interna. */

/* --- corpo do artigo --------------------------------------------------------- */

.sp-artigo { padding-block: var(--sp-secao-meia); }

.sp-artigo__interno {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--sp-e-8);
  align-items: start;
}

.sp-artigo__texto {
  max-width: 68ch;
  font-size: 1.1875rem;
  line-height: 1.75;
}

.sp-artigo__texto > * + * { margin-block-start: var(--sp-e-5); }

/* Citação e figura pedem mais ar que parágrafo: eles interrompem a leitura. */
.sp-artigo__texto > blockquote,
.sp-artigo__texto > figure { margin-block-start: var(--sp-e-7); }

/* A primeira frase é a promessa do texto. Ela entra maior e em tinta cheia;
   o resto do corpo fica no secundário. */
.sp-artigo__texto > p:first-child {
  font-size: 1.375rem;
  line-height: 1.55;
}

.sp-artigo__texto p { color: var(--sp-tinta-2); }
.sp-artigo__texto > p:first-child { color: var(--sp-tinta); }

.sp-artigo__texto h2 {
  margin-block-start: var(--sp-e-7);
  font-size: 1.625rem;
  line-height: 1.2;
  color: var(--sp-tinta);
}

/* `margin: 0` aqui apagaria também a margem de topo que a regra de fluxo
   `> * + *` aplica, e a lista colaria no título. Zerar só o que precisa. */
.sp-artigo__texto ul {
  margin-block-end: 0;
  margin-inline: 0;
  padding-inline-start: var(--sp-e-5);
  color: var(--sp-tinta-2);
}
.sp-artigo__texto li + li { margin-block-start: var(--sp-e-2); }
.sp-artigo__texto li::marker { color: var(--sp-acento-texto); }

.sp-artigo__texto blockquote {
  margin-block-end: 0;
  margin-inline: 0;
  padding-inline-start: var(--sp-e-5);
  border-inline-start: 2px solid var(--sp-acento);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sp-tinta);
}

.sp-artigo__texto figure { margin-block-end: 0; margin-inline: 0; }
.sp-artigo__texto figure img,
.sp-artigo__texto figure .sp-imagem { border-radius: var(--sp-raio-bloco); }

.sp-artigo__texto figcaption {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
}

/* --- lateral ----------------------------------------------------------------- */

.sp-artigo__lado {
  position: sticky;
  top: calc(var(--sp-cabecalho-min) + var(--sp-e-6));
  display: grid;
  gap: var(--sp-e-6);
}

.sp-partilha__rotulo {
  margin-block-end: var(--sp-e-3);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-partilha__botoes { display: flex; flex-wrap: wrap; gap: var(--sp-e-2); }

.sp-partilha__botao {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-botao);
  background: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--sp-transicao), color var(--sp-transicao);
}
.sp-partilha__botao:hover { border-color: currentColor; color: var(--sp-acento-texto); }

@media (max-width: 64rem) {
  .sp-artigo__interno { grid-template-columns: minmax(0, 1fr); }
  .sp-artigo__lado { position: static; }
}

@media (max-width: 48rem) {
  .sp-artigo__texto { font-size: 1.0625rem; line-height: 1.7; }
  .sp-artigo__texto > p:first-child { font-size: 1.1875rem; }
}