/* ==========================================================================
   FECHAMENTO — assinatura sobre foto sangrada
   Prefixo: end-
   Tokens usados: --dark-rgb --fg --sans

   Três tokens e nenhuma linha de JS. É o componente mais barato da
   biblioteca: uma foto, um gradiente, uma frase e um botão. Tudo que ele
   faz de interessante está no gradiente — que é o que costura a seção nas
   duas vizinhas sem deixar emenda.
   ========================================================================== */

.end-sec{position:relative;overflow:hidden}

/* ---- mídia ----
   A foto é atmosfera, não assunto. Entra rebaixada e meio dessaturada:
   quem olhar de perto reconhece o lugar, quem passar lê só textura. Se a
   foto ainda for legível como cena, ela está clara demais. */
.end-media{position:absolute;inset:0;z-index:0}
/* --end-veu e' o unico numero que se mexe ao trocar a foto. O valor certo
   depende do brilho dela: .3 serve para foto clara; com fotografia escura
   (que e' a regra em site de fundo preto) some tudo, e ai' sobe para .5.
   A ficha traz como medir. */
.end-img{width:100%;height:100%;object-fit:cover;
  opacity:var(--end-veu,.5);filter:grayscale(.5)}

/* Gradiente de três paradas, não véu chapado (contrato §6). As duas pontas
   fecham em --dark SÓLIDO e só o meio abre até .62:

     topo sólido  = emenda invisível com a seção anterior
     meio aberto  = a única faixa onde a foto existe
     base sólida  = emenda invisível com o rodapé

   O componente não tem borda nem corte: ele dissolve nos dois vizinhos.
   Trocar por um overlay de opacidade única devolve as duas linhas retas
   que este gradiente existe para apagar. */
.end-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgb(var(--dark-rgb)) 0%,
    rgba(var(--dark-rgb),.62) 42%,
    rgb(var(--dark-rgb)) 100%);
}

/* ---- corpo ----
   Segunda classe no .wrap: o componente empilha e centraliza, mas não
   encosta em padding-inline nem em max-width — a coluna continua sendo
   assunto do core (contrato §4). O z-index sobe acima do .grain, que é 1. */
.end-body{position:relative;z-index:2;text-align:center}

/* A assinatura usa a fonte de TEXTO em itálico, como a citação do
   manifesto: ela é fala, não rótulo. Display bold aqui viraria mais um
   título de seção, e a página já teve todos os que precisava.

   20ch é o teto de verdade, não um chute: acima disso a frase vira
   parágrafo centralizado e perde o peso de assinatura. */
.end-sign{
  font-family:var(--sans);font-style:italic;font-weight:300;
  font-size:clamp(26px,4vw,46px);line-height:1.34;
  max-width:20ch;margin-inline:auto;color:var(--fg);
}

/* Flex, não bloco: assim cabe um segundo botão (um fantasma ao lado do
   primário) sem refazer nada, e a quebra no mobile já vem resolvida. */
.end-cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-top:36px;
}

/* ---- mobile ----
   Uma coluna centrada quase não tem o que reorganizar, e o clamp já
   resolve o corpo do texto. Sobram duas medidas que foram calibradas no
   tamanho grande e ficam frouxas no piso de 26px. */
@media(max-width:640px){
  .end-sign{line-height:1.28}
  .end-cta{margin-top:28px}
}