/* Roberti — capítulo Manifesto.
   Só texto sobre a tinta da marca. Sem foto para carregar a seção, quem carrega
   é a tipografia, e o padrão do monograma entra a 5% -- limite medido com este
   mesmo texto por cima, acima disso as linhas competem com a leitura.
   Cor e fonte vêm de marca.css; esta folha não declara nenhuma. */
@import url("marca.css");

.manifesto {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.manifesto-interno {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;   /* o texto fica acima do padrão */
}

.manifesto-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--claro);
  margin: 0 0 clamp(22px, 3vw, 36px);
}

/* a frase de abertura é a tese do capítulo: peso Light, grande, medida curta */
.manifesto-tese {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(25px, 3.5vw, 46px);
  line-height: 1.14;
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 clamp(28px, 3.6vw, 50px);
  max-width: 30ch;
}
.manifesto-tese b { font-weight: 400; }

/* corpo: duas colunas só onde há largura para uma medida legível em cada */
.manifesto-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(18px, 2.6vw, 44px);
  max-width: 940px;
}
.manifesto-corpo p {
  margin: 0 0 1.1em;
  font-size: var(--t-corpo);
  line-height: 1.62;
  color: var(--papel-70);
}
.manifesto-corpo p:last-child { margin-bottom: 0; }

/* o fecho é a conclusão do manifesto: recebe o pilar em degradê, o mesmo
   elemento que marca a obra ativa na galeria -- um vocabulário, não dois */
.manifesto-fecho {
  margin: clamp(34px, 4.4vw, 60px) 0 0;
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 3px solid transparent;
  border-image: var(--degrade) 1;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--papel);
  max-width: 34ch;
}
.manifesto-fecho b { font-weight: 400; }

/* assinatura da marca fecha o capítulo */
.manifesto-assinatura {
  margin: clamp(34px, 4.4vw, 58px) 0 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--papel-12);
}
.manifesto-assinatura img { width: clamp(128px, 13vw, 172px); height: auto; display: block; }
.manifesto-slogan {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: clamp(11.5px, 1.15vw, 14px);
  line-height: 1.5;
  color: var(--papel-70);
  margin: 0;
}
.manifesto-slogan b { font-weight: 400; color: var(--papel); }
.manifesto-slogan span {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  color: var(--claro);
  margin-top: 5px;
}

@media (max-width: 700px) {
  .manifesto-corpo { grid-template-columns: 1fr; }
}

/* leva ao /sobre. Fica no manifesto porque é o capítulo da marca — a linha do tempo
   morava no rodapé da home e caía entre as obras e o contato, interrompendo quem já
   estava a caminho de falar. */
.manifesto-mais { margin: clamp(20px, 2.6vw, 32px) 0 0; }
.manifesto-mais a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-titulo);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--papel);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--papel-55);
  transition: border-color .2s, gap .2s;
}
.manifesto-mais a:hover, .manifesto-mais a:focus-visible {
  border-color: var(--claro); gap: 15px;
}
@media (prefers-reduced-motion: reduce) { .manifesto-mais a { transition: none; } }