/* ==========================================================
   GHORT — página de projeto
   Fundo claro, igual à galeria: o trabalho manda na página e
   respira melhor sobre branco. A home segue preta.
   O peso da fonte continua sendo a interação.
   ========================================================== */
:root{
  --fundo:#FFFFFF;
  --tinta:#0A0A0A;
  --suave:#6B6570;
  --linha:rgba(0,0,0,.13);
  --ui:"Outfit","Century Gothic",system-ui,-apple-system,sans-serif;
  --w-fina:100;
  --w-cheia:700;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font-family:var(--ui);font-weight:var(--w-fina);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tinta);outline-offset:4px;border-radius:4px}
::selection{background:var(--tinta);color:var(--fundo)}

.wrap{max-width:1520px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- texto que engrossa no hover ---------- */
.lk{display:inline-grid;justify-items:start}
.lk::before{
  content:attr(data-t);grid-area:1/1;
  font-weight:var(--w-cheia);visibility:hidden;pointer-events:none;
}
.lk>span{
  grid-area:1/1;font-weight:var(--w-fina);
  transition:font-weight .44s var(--ease);
}
.lk:hover>span,.lk:focus-visible>span,
a:hover .lk>span,a:focus-visible .lk>span{font-weight:var(--w-cheia)}

/* ---------- topo ---------- */
.top{
  display:flex;align-items:center;justify-content:flex-end;
  padding-block:clamp(20px,3.5vh,34px);
}
.voltar{font-size:clamp(.85rem,1.1vw,.95rem);color:var(--suave)}
.voltar .lk>span{color:var(--suave);transition:font-weight .44s var(--ease),color .3s ease}
.voltar:hover .lk>span{color:var(--tinta)}

/* ---------- título do projeto ---------- */
.titulo-proj{padding-block:clamp(26px,5vh,56px) clamp(22px,4vh,44px)}
.titulo-proj h1{
  margin:0;font-weight:var(--w-fina);
  font-size:clamp(1.1rem,3.5vw,2.5rem);line-height:1.1;letter-spacing:-.02em;text-align:center;
}

/* ---------- as peças ----------
   largura maior que o texto: o trabalho manda na página */
.pecas{
  max-width:1280px;margin-inline:auto;
  padding-inline:clamp(0px,3vw,32px);

  display:flex;flex-direction:column;
  gap:0;
}
.pecas img,.pecas video.loop{
  width:100%;height:auto;display:block;
  background:#F2F0F3;
}

/* ---------- voltar, repetido no fim ----------
   quem termina de ver o projeto não precisa subir a página toda */
.voltar-fim{
  display:flex;justify-content:center;
  padding-block:clamp(30px,6vh,64px) clamp(44px,9vh,96px);
}

/* ---------- filme do projeto ----------
   o arquivo é quadrado (2160x2160): a proporção reservada evita
   que a página pule ao carregar, e a largura limitada impede que
   um quadrado de tela cheia fique alto demais para ler */
.filme{
  width:100%;max-width:820px;margin-inline:auto;
  margin-top:clamp(18px,3vh,40px);
  aspect-ratio:1/1;
  border-radius:clamp(0px,.6vw,10px);overflow:hidden;
  background:#0A0A0A;
}
/* o filme do Açolab é 16:9 e ocupa a largura das peças */
.filme--largo{max-width:none;aspect-ratio:16/9;margin-top:0;border-radius:0}
.filme video{width:100%;height:100%;display:block;object-fit:contain;background:#0A0A0A}

/* ---------- duas colunas coladas ----------
   para peças em pé (posts 4:5, fotos verticais): empilhadas na largura
   cheia, cada uma viraria uma parede de rolagem */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dupla>img,.dupla>video{width:100%;height:auto;display:block;background:#F2F0F3}
@media (max-width:600px){.dupla{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}