/* ============================================================
   Artesão — o que e proprio desta pagina
   Retrato, percurso e peças do trabalho: a fonte e a marca reais.
   Pauta, navegação e fecho pertencem ao sistema compartilhado.
   ============================================================ */

/* ---------- capa ---------- */
.capa-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,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(--synapsis);font-style:normal;font-weight:var(--type-counter-weight);
  font-size:clamp(26px,2.4vw,40px);line-height:1.2;color:var(--accent); letter-spacing:var(--type-counter-tracking);
}

/* ---------- 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:var(--color-surface);
  border:1px solid var(--color-control-border);
  box-shadow:0 22px 56px var(--color-shadow);
}
.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:var(--type-label-weight);font-size:.75rem;letter-spacing:.1em;color:var(--reading-ink)}
/* 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;
  -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(min(100%,300px),1fr));
  gap:clamp(32px,6vw,96px);align-items:start;
}
.percurso-tese{
  font-family:var(--synapsis);font-weight:var(--type-counter-weight);
  font-size:clamp(28px,2.7vw,42px);line-height:1.22;letter-spacing:var(--type-counter-tracking);
  text-wrap:pretty;color:var(--fg);
}
.percurso-coluna{
  display:grid;gap:1.1em;
  max-width:46ch;
  font-size:var(--type-reading-size);line-height:var(--type-reading-leading);font-weight:400;
  text-wrap:pretty;color:var(--reading-ink);
}
/* A marca é demonstrada no Ofício; o percurso reserva este espaço à leitura. */
.percurso-glifo{
  display:none;
}
.percurso-glifo svg{display:block;width:100%;height:auto}

/* ---------- peças do trabalho ---------- */
.oficio-h2{
  font-weight:900;font-size:clamp(38px,6.3vw,94px);line-height:.98;
  text-transform:uppercase;letter-spacing:-.018em;
  margin-bottom:clamp(40px,6vw,80px);text-wrap:balance;
}
.oficio-estudo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,84px);align-items:center;
  padding:clamp(32px,5vw,72px) 0;border-top:1px solid var(--line);
}
.oficio-estudo:last-child{border-bottom:1px solid var(--line)}
.oficio-texto{display:grid;gap:22px;max-width:46ch}
.oficio-numero{font-size:.75rem;font-weight:600;letter-spacing:.03em;color:var(--color-muted)}
.oficio-texto h3{font-size:clamp(32px,4vw,60px);font-weight:900;line-height:1.02;letter-spacing:-.014em;text-transform:uppercase}
.oficio-texto p{font-size:var(--type-reading-size);font-weight:400;line-height:var(--type-reading-leading);color:var(--reading-ink);text-wrap:pretty}
.oficio-tipo,.oficio-desenho{min-width:0;margin:0}
.oficio-amostra{
  position:relative;display:grid;align-content:center;align-items:baseline;justify-items:center;
  min-height:clamp(224px,26vw,360px);
  font-size:clamp(170px,23vw,310px);font-weight:300;line-height:1.1;
  text-transform:none;letter-spacing:-.055em;color:var(--color-text);
}
.oficio-amostra > span,.oficio-amostra > i{grid-area:1/1}
.oficio-amostra i{position:relative;width:100%;height:0;border-top:1px solid var(--color-rule);pointer-events:none}
.oficio-amostra i::before,.oficio-amostra i::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--color-rule)}
.oficio-amostra i::before{top:calc(-1 * var(--amostra-altura,1cap))}
.oficio-amostra i::after{top:var(--amostra-descendente,.2em)}
.oficio-tipo[data-peso="400"] .oficio-amostra{font-weight:400}
.oficio-tipo[data-peso="900"] .oficio-amostra{font-weight:900}
.oficio-legenda{margin:18px 0 12px;font-size:.75rem;font-weight:500;color:var(--reading-ink);text-transform:none}
.oficio-controles{display:flex;flex-wrap:wrap;gap:8px}
.oficio-controles[hidden]{display:none}
.oficio-controles button{
  min-height:44px;display:flex;gap:12px;align-items:center;padding:10px 12px;
  font:500 .875rem/1.2 var(--synapsis);text-transform:none;cursor:pointer;
  color:var(--reading-ink);background:transparent;border:0;border-bottom:2px solid var(--line);
  transition:color .18s,background-color .18s,border-color .18s;
}
.oficio-controles button span{font-size:.75rem}
.oficio-controles button:hover{border-color:var(--color-link)}
.oficio-controles button[aria-pressed="true"]{background:var(--amber-light);color:var(--navy);border-color:var(--amber-soft)}
.oficio-controles button:focus-visible,.oficio-decisoes a:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}
.oficio-prancheta{position:relative;width:min(100%,360px);margin:auto}
.oficio-marca{display:block;width:100%;height:auto;color:var(--logo-ink)}
.oficio-guias{
  position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:var(--color-display);stroke-width:.6;opacity:0;
  transition:opacity .3s;pointer-events:none;
}
.is-guided .oficio-guias{opacity:1}
.oficio-decisoes{list-style:none}
.oficio-decisoes li{
  display:grid;grid-template-columns:36px minmax(150px,.75fr) minmax(0,1.5fr);
  gap:24px;padding:32px 0;border-top:1px solid var(--line);align-items:baseline;
}
.oficio-decisoes li:last-child{border-bottom:1px solid var(--line)}
.oficio-decisoes h3{font-size:clamp(28px,3vw,44px);font-weight:300;line-height:1.1}
.oficio-decisoes p{font-size:var(--type-reading-size);line-height:var(--type-reading-leading);font-weight:400;color:var(--reading-ink);max-width:48ch;text-wrap:pretty}
.oficio-decisoes a{grid-column:3;justify-self:start;min-height:44px;display:flex;align-items:center;gap:24px;color:var(--color-link);font-size:.875rem;font-weight:600;text-decoration:none}
.oficio-decisoes a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){
  .oficio-estudo{grid-template-columns:minmax(0,1fr);gap:28px}
  .oficio-texto{max-width:none}
  .oficio-h2{font-size:clamp(34px,8.5vw,60px)}
  .oficio-decisoes li{grid-template-columns:28px minmax(0,1fr);gap:14px}
  .oficio-decisoes p,.oficio-decisoes a{grid-column:2}
  .oficio-prancheta{width:min(100%,280px)}
}
@media(prefers-reduced-motion:reduce){
  .oficio-guias,.oficio-controles button{transition:none}
}



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

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

.retrato-trama::before{
  content:"";position:absolute;inset:0;background:var(--color-display);
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><g fill='%23000' 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>");
  mask-size:128px 128px;mask-repeat:repeat;
}