/* ============================================================
   Manifesto — o que e proprio desta pagina
   O sistema (tokens, chrome, pauta, secao, escada, fecho) vem de
   shared/pages-light.css. Aqui mora a composicao: a capa partida,
   o campo de principios, o emblema que se monta e os quatro
   pilares como territorios de cor.
   ============================================================ */

/* ---------- capa ----------
   duas colunas de peso desigual: o titulo carrega a massa, e a
   direita responde com a voz e o quarto campo do emblema sangrando
   pela margem. */
.capa-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(32px,4vw,66px);align-items:center;
}
.capa-titulo{min-width:0}

/* o h1 nao e uma palavra quebrada em duas linhas: e um bloco de duas
   barras. cada linha e a silaba mais uma barra que ocupa o vao ate a
   margem — a primeira na cor do texto, a segunda na do acento. o
   titulo termina no limite da coluna, sempre, seja qual for o corpo. */
.manifesto-h1{
  display:grid;gap:.03em;
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(60px,11.2vw,170px);line-height:.82;letter-spacing:-.012em;
  text-transform:uppercase;color:var(--fg);
}
.manifesto-h1 span{
  display:grid;grid-template-columns:max-content minmax(24px,1fr);
  align-items:stretch;gap:.1em;
}
.manifesto-h1 i{display:block;margin:.05em 0 .07em}
.manifesto-h1 .barra-fg{background:var(--fg)}
.manifesto-h1 .barra-accent{background:var(--accent)}

.capa-voz{position:relative;min-width:0;display:grid;gap:clamp(24px,3.4vh,44px);justify-items:end}
.capa-claim{
  max-width:13ch;margin:0;text-align:right;
  font-family:var(--ivypresto);font-weight:400;
  font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:-.005em;
  text-wrap:balance;color:var(--fg);
}
.capa-claim em{font-style:italic;color:var(--accent)}
/* o quarto campo do emblema sangra pela direita: a composicao nao
   termina na margem, ela sai do papel. */
.capa-quarto{
  width:clamp(150px,20vw,264px);color:var(--accent);
  margin-right:clamp(-96px,-4vw,0px);
}
.capa-quarto svg{display:block;width:100%;height:auto}

/* ---------- posicao ---------- */
.principios{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-bottom:clamp(48px,7vh,99px);
}
.principios>li{min-height:132px}
.principios p{
  font-family:var(--ivypresto);font-size:clamp(19px,1.55vw,27px);
  line-height:1.14;letter-spacing:.01em;color:var(--fg);
}
.principios em{font-style:italic}

.posicao-texto{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,4.4vw,84px);align-items:start;
}
.posicao-tese{
  font-family:var(--synapsis);font-weight:400;
  font-size:clamp(21px,1.92vw,32px);line-height:1.34;letter-spacing:-.005em;
  text-wrap:pretty;color:var(--fg);
}
.posicao-coluna{
  display:grid;gap:1.1em;
  padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line);
  font-size:clamp(16px,1.06vw,20px);line-height:1.58;font-weight:400;
  text-wrap:pretty;color:var(--fg);
}

/* ---------- pilares ---------- */
.pilares-cabeca{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,4vw,66px);align-items:end;margin-bottom:clamp(40px,6vh,80px);
}
.pilares-h2{
  display:grid;font-family:var(--synapsis);font-weight:900;
  font-size:clamp(42px,6.9vw,106px);line-height:.94;letter-spacing:-.004em;
  text-transform:uppercase;color:var(--fg);
}
.pilares-emblema{justify-self:end;display:grid;gap:14px;justify-items:end}
.pilares-emblema-arte{width:clamp(132px,15vw,204px);color:var(--logo-ink)}
.pilares-emblema-arte svg{display:block;width:100%;height:auto}
/* o emblema se monta campo a campo, conforme cada pilar entra em cena:
   quatro campos, quatro pilares, a mesma coisa dita duas vezes. sem
   movimento permitido os quatro ja estao la. */
html.rv-on [data-assy]{opacity:0;transition:opacity .6s var(--ease)}
html.rv-on [data-assy].is-on{opacity:1}

/* os quatro territorios em 2x2, e SEPARADOS: a malha de 3+1 encavalava
   um bloco sozinho na segunda fila e a leitura perdia o par. quatro
   campos em quadrado leem como os quatro campos do emblema — que e a
   tese da secao.
   o vao entre eles nao e enfeite: cada pilar e superficie inteira de
   cor, e superficies coladas viram faixa. separadas, cada uma volta a
   ser territorio com ar em volta. */
.pilar-campo{
  list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,28px);
}
.pilar{
  position:relative;overflow:hidden;min-height:clamp(300px,40svh,404px);
  outline:1px solid var(--line);outline-offset:-1px;
}
@media (max-width:720px){
  .pilar-campo{grid-template-columns:minmax(0,1fr)}
}
.pilar-int{
  position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:space-between;gap:24px;padding:clamp(24px,2.9vw,42px);
}
.pilar-glifo{
  position:absolute;right:-26px;width:clamp(112px,13vw,170px);pointer-events:none;
}
.pilar-glifo svg{display:block;width:100%;height:auto}
.pilar-glifo--alto{top:-26px}
.pilar-glifo--baixo{bottom:-26px}
.pilar-num{
  position:relative;font-weight:900;font-size:clamp(28px,3.1vw,46px);
  line-height:1;letter-spacing:-.02em;
}
.pilar-texto{position:relative;display:grid;gap:12px}
.pilar-nome{
  font-family:var(--ivypresto);font-style:italic;font-weight:400;
  font-size:clamp(30px,3.5vw,52px);line-height:1;letter-spacing:-.01em;
}
.pilar-papel{font-weight:600;font-size:clamp(14px,1.02vw,18px);letter-spacing:.05em;line-height:1.3}
.pilar-desc{
  max-width:34ch;font-weight:400;font-size:clamp(15px,1.02vw,19px);
  line-height:1.5;text-wrap:pretty;
}

/* forma — papel */
.pilar--forma{background:var(--bg)}
.pilar--forma .pilar-num{color:var(--accent)}
.pilar--forma .pilar-glifo{color:color-mix(in srgb,var(--fg) 26%,transparent)}
.pilar--forma .pilar-nome,.pilar--forma .pilar-papel{color:var(--fg)}
.pilar--forma .pilar-desc{color:color-mix(in srgb,var(--fg) 82%,transparent)}

/* estrutura — grafite. o unico lugar do miolo onde o ambar clareado
   trabalha: sobre o grafite o ambar da marca fecharia contraste. */
.pilar--estrutura{background:var(--graphite)}
.pilar--estrutura .pilar-num{color:var(--ambar-claro)}
.pilar--estrutura .pilar-glifo{color:rgba(242,239,231,.3)}
.pilar--estrutura .pilar-nome,.pilar--estrutura .pilar-papel{color:var(--papel)}
.pilar--estrutura .pilar-desc{color:rgba(242,239,231,.8)}

/* velocidade — ambar cheio */
.pilar--velocidade{background:var(--brand-amber)}
.pilar--velocidade .pilar-num{color:var(--graphite)}
.pilar--velocidade .pilar-glifo{color:rgba(242,239,231,.42)}
.pilar--velocidade .pilar-nome,.pilar--velocidade .pilar-papel{color:var(--papel)}
.pilar--velocidade .pilar-desc{color:rgba(242,239,231,.88)}

/* defesa — papel */
.pilar--defesa{background:var(--bg)}
.pilar--defesa .pilar-num{color:var(--accent)}
.pilar--defesa .pilar-glifo{color:color-mix(in srgb,var(--fg) 24%,transparent)}
.pilar--defesa .pilar-nome,.pilar--defesa .pilar-papel{color:var(--fg)}
.pilar--defesa .pilar-desc{color:color-mix(in srgb,var(--fg) 82%,transparent)}

/* ---------- permanencias ---------- */
.permanencias-cabeca{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,48px);align-items:start;margin-bottom:clamp(32px,5vh,66px);
}
.permanencias-glifo{
  justify-self:end;width:clamp(96px,11vw,160px);
  color:color-mix(in srgb,var(--fg) 30%,transparent);
}
.permanencias-glifo svg{display:block;width:100%;height:auto}

@media (max-width:760px){
  .capa-voz{justify-items:start}
  .capa-claim{text-align:left;max-width:16ch}
  .capa-quarto{margin-right:0}
  .pilares-emblema{justify-self:start;justify-items:start}
  .permanencias-glifo{justify-self:start}
}