/* ============================================================
   Artesão — o que e proprio desta pagina
   Mesma anatomia do manifesto (cinco capitulos, pauta, escada,
   fecho): as duas paginas de leitura longa sao irmas e precisam
   ler como o mesmo objeto. O que muda aqui e o retrato — a unica
   fotografia do site — e o campo de perguntas.
   ============================================================ */

/* ---------- capa ---------- */
.capa-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(32px,4vw,84px);align-items:center;
}
.capa-titulo{min-width:0}
.artesao-h1{
  display:grid;gap:.03em;
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(46px,7.6vw,118px);line-height:.86;letter-spacing:-.012em;
  text-transform:uppercase;color:var(--fg);
}
/* so a primeira linha ganha barra: a segunda fecha o bloco sozinha.
   duas barras aqui fariam o titulo virar tabela. */
.artesao-h1 .com-barra{
  display:grid;grid-template-columns:max-content minmax(20px,1fr);
  align-items:stretch;gap:.1em;
}
.artesao-h1 i{display:block;margin:.06em 0 .08em;background:var(--fg)}
.capa-nota{
  margin-top:clamp(24px,3.4vh,40px);max-width:26ch;
  font-family:var(--ivypresto);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.4vw,38px);line-height:1.14;color:var(--accent);
}

/* ---------- retrato ----------
   a fotografia e 4:5 e a moldura tambem: nada de fora do quadro.
   a placa de registro em L fica como marca de prova — a regra do
   chanfro vale no desenho da pagina, nao sobre o rosto. */
.retrato{
  position:relative;min-width:0;justify-self:end;
  width:min(100%,384px);margin:0;display:flex;flex-direction:column;
}
.retrato-quadro{
  position:relative;flex:0 0 auto;aspect-ratio:4/5;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 6%,var(--bg));
  border:1px solid color-mix(in srgb,var(--fg) 46%,transparent);
  box-shadow:0 22px 56px color-mix(in srgb,var(--fg) 13%,transparent);
}
.retrato-img{
  position:absolute;inset:0;
  background-image:image-set(url(../assets/quem/patric.webp) type("image/webp"),url(../assets/quem/patric.png) type("image/png"));
  background-size:cover;background-position:center 22%;
}
.retrato-veu{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 0 58%,color-mix(in srgb,var(--bg) 30%,transparent) 100%);
  mix-blend-mode:soft-light;
}
.q-corner{position:absolute;width:16px;height:16px;z-index:2}
.q-corner::before,.q-corner::after{content:"";position:absolute;background:color-mix(in srgb,var(--bg) 84%,transparent)}
.q-corner::before{width:16px;height:1px}
.q-corner::after{height:16px;width:1px}
.q-corner.tl{top:8px;left:8px}
.q-corner.tr{top:8px;right:8px}.q-corner.tr::before{right:0}.q-corner.tr::after{right:0}
.q-corner.bl{bottom:8px;left:8px}.q-corner.bl::before{bottom:0}.q-corner.bl::after{bottom:0}
.q-corner.br{bottom:8px;right:8px}.q-corner.br::before{right:0;bottom:0}.q-corner.br::after{right:0;bottom:0}
.retrato-ponto{position:absolute;right:16px;top:16px;z-index:3;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.retrato-cap{display:flex;flex-direction:column;gap:3px;margin-top:16px}
.retrato-nome{
  font-family:var(--synapsis);font-size:clamp(20px,1.9vw,26px);font-weight:900;
  letter-spacing:.01em;text-transform:uppercase;color:var(--fg);
}
.retrato-cred{font-weight:300;font-size:11px;letter-spacing:.16em;color:color-mix(in srgb,var(--fg) 66%,transparent)}
/* amostra de trama — a oficina textil da Bauhaus (Anni Albers, Gunta
   Stolzl), onde artesanato, geometria e industria se encontram: a tese
   desta pagina. o desenho e um rascunho de sarja 2/2, a notacao que a
   tecela usa para planejar a trama. pregada sob a prancha, como o
   artesao prega a amostra do material. */
.retrato-trama{
  position:absolute;left:0;right:0;top:calc(100% + 16px);height:132px;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><g fill='%23C05518' fill-opacity='0.3'><rect x='0' y='0' width='16' height='16'/><rect x='16' y='0' width='16' height='16'/><rect x='64' y='0' width='16' height='16'/><rect x='80' y='0' width='16' height='16'/><rect x='16' y='16' width='16' height='16'/><rect x='32' y='16' width='16' height='16'/><rect x='80' y='16' width='16' height='16'/><rect x='96' y='16' width='16' height='16'/><rect x='32' y='32' width='16' height='16'/><rect x='48' y='32' width='16' height='16'/><rect x='96' y='32' width='16' height='16'/><rect x='112' y='32' width='16' height='16'/><rect x='0' y='48' width='16' height='16'/><rect x='48' y='48' width='16' height='16'/><rect x='64' y='48' width='16' height='16'/><rect x='112' y='48' width='16' height='16'/><rect x='0' y='64' width='16' height='16'/><rect x='16' y='64' width='16' height='16'/><rect x='64' y='64' width='16' height='16'/><rect x='80' y='64' width='16' height='16'/><rect x='16' y='80' width='16' height='16'/><rect x='32' y='80' width='16' height='16'/><rect x='80' y='80' width='16' height='16'/><rect x='96' y='80' width='16' height='16'/><rect x='32' y='96' width='16' height='16'/><rect x='48' y='96' width='16' height='16'/><rect x='96' y='96' width='16' height='16'/><rect x='112' y='96' width='16' height='16'/><rect x='0' y='112' width='16' height='16'/><rect x='48' y='112' width='16' height='16'/><rect x='64' y='112' width='16' height='16'/><rect x='112' y='112' width='16' height='16'/></g></svg>");
  background-size:128px 128px;background-repeat:repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%);
}

/* ---------- percurso ---------- */
.percurso{overflow:hidden}
.percurso-texto{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,4.4vw,84px);align-items:start;
}
.percurso-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);
}
.percurso-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);
}
/* o segundo campo do emblema sangra pelo canto inferior esquerdo:
   a secao nao acaba na borda, ela continua fora do papel. */
.percurso-glifo{
  position:absolute;left:-30px;bottom:-40px;width:clamp(120px,14vw,196px);
  color:color-mix(in srgb,var(--fg) 16%,transparent);pointer-events:none;
}
.percurso-glifo svg{display:block;width:100%;height:auto}

/* ---------- perguntas ---------- */
.perguntas-intro{
  max-width:70ch;margin-bottom:clamp(40px,6vh,80px);
  font-weight:400;font-size:clamp(16px,1.14vw,21px);line-height:1.58;
  text-wrap:pretty;color:color-mix(in srgb,var(--fg) 84%,transparent);
}
.perguntas{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  margin-bottom:clamp(48px,8vh,110px);
}
.perguntas>li{gap:14px;padding:clamp(22px,2.6vw,36px);min-height:198px}
.perguntas p{
  font-family:var(--ivypresto);font-size:clamp(18px,1.44vw,25px);
  line-height:1.26;color:var(--fg);
}

.perguntas-fecho{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,4vw,66px);align-items:end;
}
.perguntas-rotulo{
  display:block;margin-bottom:clamp(16px,2.4vh,28px);
  font-weight:300;font-size:11px;letter-spacing:.2em;
  color:color-mix(in srgb,var(--fg) 66%,transparent);
}
.perguntas-h2{
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(36px,5.4vw,86px);line-height:.96;letter-spacing:-.004em;
  text-transform:uppercase;text-wrap:balance;color:var(--fg);
}
.perguntas-glifo{justify-self:end;width:clamp(120px,15vw,220px);color:var(--accent)}
.perguntas-glifo svg{display:block;width:100%;height:auto}

/* ---------- resposta ---------- */
.resposta-h3{
  max-width:20ch;margin-bottom:clamp(40px,6vh,80px);
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(29px,4.2vw,66px);line-height:1.02;letter-spacing:-.004em;
  text-transform:uppercase;text-wrap:balance;color:var(--fg);
}
/* a frase aqui e longa: nao e o aforismo do manifesto, e argumento.
   corpo menor e entrelinha maior — a escada e a mesma, o passo e outro. */
.escada--resposta .escada-frase{
  font-size:clamp(16px,1.32vw,23px);line-height:1.4;text-wrap:pretty;
}

@media (max-width:900px){
  .retrato{justify-self:start}
}

@media (max-width:760px){
  .retrato{width:min(100%,480px)}
  .retrato-trama{display:none}
  .perguntas-glifo{justify-self:start}
}