/* ARTiS — identidade visual aplicada sobre a estrutura de índice do ebenezablanche */

@font-face{
  font-family:'La Fabrique';
  src:url('../fonts/lafabrique-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Uchen';
  src:url('../fonts/uchen-regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --preto:#2A2F2B;
  --offwhite:#F9F8F6;
  --amarelo:#FFFAB4;

  --preto-rgb:42,47,43;

  /* Uchen = títulos · La Fabrique = corpo (padrão da marca ARTiS) */
  --display:'Uchen', 'Iowan Old Style', Georgia, serif;
  --texto:'La Fabrique', 'Didot', 'Bodoni 72', 'Times New Roman', serif;

  --pad:clamp(18px, 3.2vw, 44px);
  --fade:300ms;
}

*{box-sizing:border-box;}
html,body{min-height:100%;}
body{
  margin:0;
  background:var(--preto);
  color:var(--offwhite);
  font-family:var(--texto);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

.display{font-family:var(--display); text-transform:uppercase;}

/* ---------- camada de fundo ---------- */
.scene-layer{position:fixed; inset:0; z-index:1; background:var(--preto);}
.scene{position:absolute; inset:0; overflow:hidden;}
.scene img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:1;
  transition:opacity var(--fade) 0ms ease-in-out;
  animation:ken-burns 30s ease-out infinite alternate;
  animation-play-state:paused;
  will-change:opacity, transform;
}
.scene.active img{opacity:1; z-index:10; animation-play-state:running;}
@keyframes ken-burns{
  from{transform:scale(1.001);}
  to{transform:scale(1.12);}
}

.bg-video{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  background:var(--preto);
}
.bg-poster{
  position:fixed; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  transition:opacity 600ms ease-in-out;
}
.bg-poster.hidden{opacity:0;}

.overlay{
  position:fixed; inset:0; z-index:11; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--preto-rgb),.62) 0%, rgba(var(--preto-rgb),0) 26%,
                            rgba(var(--preto-rgb),0) 52%, rgba(var(--preto-rgb),.8) 100%),
    radial-gradient(120% 85% at 50% 45%, transparent 46%, rgba(var(--preto-rgb),.55) 100%);
}
.grain{
  position:fixed; inset:-40px; z-index:12; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);} 50%{transform:translate(-2%,1%);} 100%{transform:translate(1%,-1%);}
}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--pad);
}
.site-logo img{
  display:block;
  height:clamp(18px, 1.9vw, 26px);
  width:auto;
}
.top-nav{display:flex; gap:clamp(16px, 2.4vw, 36px); align-items:baseline;}
.top-nav a, .back-link{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(14px, 1.25vw, 18px);
  letter-spacing:.12em; line-height:1;
  border-bottom:solid 2px rgba(249,248,246,0);
  padding-bottom:3px;
  transition:border-color 240ms ease-in-out, color 240ms ease-in-out;
}
.top-nav a:hover, .back-link:hover{border-bottom-color:var(--amarelo); color:var(--amarelo);}

/* ---------- legenda central ---------- */
.stage{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad);
  pointer-events:none;
}
.caption{text-align:center; max-width:min(1100px, 92vw);}
.caption-title{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(44px, 8.6vw, 132px);
  line-height:.94; margin:0; letter-spacing:.02em;
  font-weight:400;
}
.caption-title .word{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em;}
.caption-title .word > span{
  display:inline-block;
  transform:translateY(108%);
  transition:transform 620ms cubic-bezier(.22,1,.36,1);
}
.caption.enter .word > span{transform:translateY(0);}
.caption-meta{
  margin:20px 0 0;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(249,248,246,.68);
  opacity:0; transition:opacity 400ms ease-in-out 160ms;
}
.caption.enter .caption-meta{opacity:1;}

/* ---------- menu de projetos (rodapé) ---------- */
.index-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  padding:0 var(--pad) clamp(20px, 3vw, 38px);
}
.index-nav a{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(16px, 1.7vw, 23px);
  letter-spacing:.07em; line-height:1.1;
  margin:0 clamp(10px, 1.6vw, 26px);
  padding:6px 0;
}
.index-nav a span{
  display:inline-block;
  border-bottom:solid 6px rgba(249,248,246,0);
  padding-bottom:2px;
  transition:border-color 240ms ease-in-out;
}
.index-nav a:hover span,
.index-nav a:focus-visible span,
.index-nav a.active span{border-bottom-color:var(--amarelo);}

.counter, .credit{
  position:fixed; bottom:clamp(22px, 3vw, 40px); z-index:30;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(249,248,246,.6);
}
.counter{right:var(--pad);}
.credit{left:var(--pad);}

/* ---------- página de projeto ---------- */
.project-info{
  position:fixed; left:var(--pad); bottom:clamp(20px, 3vw, 38px); z-index:30;
  max-width:min(420px, 62vw);
}
.project-title{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(34px, 5.6vw, 82px);
  line-height:.96; margin:0 0 14px; letter-spacing:.02em; font-weight:400;
}
.project-meta{
  margin:0; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(249,248,246,.68); line-height:2;
}
.project-meta b{color:var(--amarelo); font-weight:400;}

.sound-toggle{
  position:fixed; right:var(--pad); bottom:clamp(20px, 3vw, 38px); z-index:30;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(13px, 1.2vw, 16px); letter-spacing:.14em;
  border-bottom:solid 2px rgba(249,248,246,0); padding-bottom:3px;
  transition:border-color 240ms ease-in-out, color 240ms ease-in-out;
}
.sound-toggle:hover{border-bottom-color:var(--amarelo); color:var(--amarelo);}

/* ---------- página de projeto com rolagem ---------- */
/* o índice trava a rolagem (body{overflow:hidden}); a página de projeto libera.
   `visible` propaga para a viewport e faz o documento rolar normalmente. */
body.page-project{height:auto; overflow:visible; overflow-x:hidden;}
.page-project main{position:relative; z-index:20;}
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
}
.hero .project-info, .hero .sound-toggle{position:absolute;}
.hero .project-info{left:var(--pad); bottom:clamp(20px, 3vw, 38px);}
.hero .sound-toggle{right:var(--pad); bottom:clamp(20px, 3vw, 38px);}

/* ---------- stills: abertura de diafragma ----------
   Cada painel é sticky, então o seguinte sobe e cobre o anterior.
   --p (0→1) é a abertura, escrita pelo JS conforme o painel entra na tela:
   a imagem começa como uma fresta widescreen no centro, ampliada, e se
   abre até sangrar a tela inteira. --shift é o parallax interno. */
.still{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  z-index:20;
  background:var(--preto);
  --p:1;
  --shift:0%;
}
.still-frame{
  position:absolute; inset:0;
  overflow:hidden;
  clip-path:inset(
    calc((1 - var(--p)) * 32%)
    calc((1 - var(--p)) * 15%)
  );
}
/* fio de luz correndo na borda da fresta enquanto ela abre */
.still-frame::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,250,180, calc((1 - var(--p)) * .55));
}
.still-media{
  position:absolute; inset:-9% 0;
  transform:translate3d(0, var(--shift), 0) scale(calc(1 + (1 - var(--p)) * .18));
  will-change:transform;
}
.still-media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* legenda que entra no fim da abertura */
.still-tag{
  position:absolute; z-index:6;
  left:var(--pad); bottom:clamp(26px, 4vw, 56px);
  display:flex; align-items:baseline; gap:16px;
  pointer-events:none;
  opacity:clamp(0, calc((var(--p) - .6) * 2.6), 1);
  transform:translateY(calc((1 - var(--p)) * 20px));
}
.still-tag .n{
  font-family:var(--texto);
  font-size:11px; letter-spacing:.28em; color:var(--amarelo);
}
.still-tag .r{
  display:block; height:1px; width:clamp(28px, 5vw, 68px);
  background:rgba(249,248,246,.5);
  transform:scaleX(clamp(0, calc((var(--p) - .6) * 2.6), 1));
  transform-origin:left center;
}
.still-tag .t{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(16px, 1.9vw, 24px); letter-spacing:.07em;
  color:var(--offwhite);
}

/* indicação de rolagem no hero */
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(22px, 3vw, 40px);
  transform:translateX(-50%);
  z-index:25;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--texto); text-transform:uppercase;
  font-size:11px; letter-spacing:.28em; color:rgba(249,248,246,.65);
  transition:opacity 400ms ease-in-out;
}
.scroll-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(to bottom, var(--amarelo), rgba(255,250,180,0));
  transform-origin:top center;
  animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0); opacity:0;}
  25%{opacity:1;}
  70%{transform:scaleY(1); opacity:1;}
  100%{transform:scaleY(1); opacity:0;}
}
.scroll-cue.gone{opacity:0; pointer-events:none;}

@media (max-width:820px){
  .counter, .credit{display:none;}
  .top-nav{gap:14px;}
  .index-nav{padding-bottom:18px;}
  .index-nav a{margin:0 10px;}
  .index-nav a span{border-bottom-width:4px;}
  .project-info{max-width:76vw;}
}

@media (prefers-reduced-motion: reduce){
  .scene img, .caption-title .word > span, .grain,
  .scroll-cue i{animation:none !important;}
  .caption-title .word > span{transform:none;}
  /* o JS já fixa --p em 1 e --shift em 0, então a moldura abre direto */
  .still-tag{opacity:1; transform:none;}
  .still-tag .r{transform:scaleX(1);}
}

/* ---------- painéis de vídeo na sequência do projeto ---------- */
.still-media video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* ---------- galeria: a paleta ARTiS como layout ----------
   Cada vídeo ocupa uma tela inteira e o campo de cor muda entre os três
   tons da marca. O logo troca de versão para manter contraste. */
body.page-galeria{
  height:auto; overflow:visible; overflow-x:hidden;
  background:var(--preto); color:var(--offwhite);
  transition:background-color 700ms ease, color 700ms ease;
}
body.page-galeria.tom-preto   {background:var(--preto);    color:var(--offwhite);}
body.page-galeria.tom-amarelo {background:var(--amarelo);  color:var(--preto);}
body.page-galeria.tom-claro   {background:var(--offwhite); color:var(--preto);}

.page-galeria .site-header{mix-blend-mode:normal;}
.page-galeria .site-logo img{transition:opacity 300ms ease;}
/* duas versões sobrepostas do logo: some uma, aparece a outra */
.logo-troca{position:relative; display:block;}
.logo-troca img{display:block; height:clamp(18px, 1.9vw, 26px); width:auto;}
.logo-troca img + img{position:absolute; inset:0; opacity:0;}
.tom-amarelo .logo-troca img,
.tom-claro   .logo-troca img{opacity:0;}
.tom-amarelo .logo-troca img + img,
.tom-claro   .logo-troca img + img{opacity:1;}

.galeria-intro{
  min-height:70vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(40px, 7vw, 90px);
}
.galeria-intro h1{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(48px, 12vw, 190px); line-height:.86; margin:0;
  letter-spacing:.01em;
}
.galeria-intro p{
  margin:22px 0 0; max-width:46ch;
  font-size:14px; letter-spacing:.06em; line-height:1.9;
}

.reel{
  position:relative;
  height:100vh; height:100svh;
  overflow:hidden;
}
/* o vídeo sangra a tela; o campo de cor aparece como moldura fina,
   mantendo a paleta presente sem esvaziar a apresentação */
.reel-inner{
  position:absolute; inset:clamp(10px, 1.6vw, 26px);
  overflow:hidden;
}
.reel-media{
  position:absolute; inset:0;
  background:rgba(0,0,0,.25);
}
.reel-media video, .reel-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.reel-media video{opacity:0; transition:opacity 600ms ease;}
.reel-media.tocando video{opacity:1;}

/* texto por cima, com véu só na base para garantir leitura */
.reel-texto{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(22px, 3.4vw, 54px);
  color:var(--offwhite);
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,0) 100%);
}
.reel-num{
  font-family:var(--texto);
  font-size:12px; letter-spacing:.3em;
  opacity:.75; display:block; margin-bottom:14px;
}
.reel-titulo{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(32px, 5.6vw, 88px); line-height:.96; margin:0 0 14px;
  letter-spacing:.03em;
}
.reel-meta{
  margin:0 0 20px; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; line-height:1.9; opacity:.8;
}
.reel-link{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(14px, 1.3vw, 18px); letter-spacing:.12em;
  border-bottom:solid 2px currentColor; padding-bottom:3px;
  transition:opacity 240ms ease;
}
.reel-link:hover{opacity:.55;}

/* ---------- arquivo: galeria em movimentos ----------
   Alterna faixas horizontais (a página fica presa e a trilha corre para o
   lado) com blocos verticais de tela cheia. Mesma paleta e tipografia. */
body.page-arquivo{
  height:auto; overflow:visible; overflow-x:hidden;
  background:var(--preto); color:var(--offwhite);
  transition:background-color 700ms ease, color 700ms ease;
}
body.page-arquivo.tom-preto  {background:var(--preto);    color:var(--offwhite);}
body.page-arquivo.tom-amarelo{background:var(--amarelo);  color:var(--preto);}
body.page-arquivo.tom-claro  {background:var(--offwhite); color:var(--preto);}

.arq-abertura{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); padding-bottom:clamp(50px, 8vw, 110px);
}
.arq-abertura h1{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(56px, 15vw, 240px); line-height:.84; margin:0;
}
.arq-abertura p{
  margin:26px 0 0; max-width:44ch;
  font-size:14px; letter-spacing:.06em; line-height:1.9;
}

/* rótulo de cada movimento */
.mov-rotulo{
  position:absolute; top:calc(var(--pad) + 46px); left:var(--pad); z-index:6;
  font-family:var(--texto); text-transform:uppercase;
  font-size:11px; letter-spacing:.3em; opacity:.62;
}

/* --- faixa horizontal --- */
.faixa{position:relative;}
.faixa-sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  display:flex; align-items:center;
}
.faixa-track{
  display:flex; align-items:stretch;
  gap:0; padding:0;
  height:100vh; height:100svh;
  will-change:transform;
}
/* itens encaixados: altura cheia, sem vão, variando só a largura —
   a tira corre como um fundo contínuo, não como cartões soltos */
.faixa-item{
  position:relative; flex:0 0 auto;
  height:100%;
  overflow:hidden;
  background:var(--preto);
}
.faixa-item img, .faixa-item video{
  display:block; width:100%; height:100%; object-fit:cover;
}
.faixa-item video{position:absolute; inset:0; opacity:0; transition:opacity 500ms ease;}
.faixa-item.tocando video{opacity:1;}

.faixa-item.alta  {width:clamp(300px, 34vw, 620px);}
.faixa-item.larga {width:clamp(420px, 62vw, 1180px);}
.faixa-item.media {width:clamp(340px, 46vw, 860px);}
.faixa-item.baixa {width:clamp(280px, 28vw, 520px);}

/* legenda por cima da imagem, já que não há mais espaço fora dela */
.faixa-cap{
  position:absolute; left:18px; bottom:16px; z-index:3;
  font-family:var(--texto); text-transform:uppercase;
  font-size:10px; letter-spacing:.24em;
  color:var(--offwhite);
  text-shadow:0 1px 12px rgba(0,0,0,.9);
  opacity:.85;
}

/* --- bloco vertical de tela cheia --- */
.arq-vertical{position:relative; z-index:20;}
.arq-painel{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--preto);
}
.arq-painel img, .arq-painel video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.arq-painel video{opacity:0; transition:opacity 600ms ease;}
.arq-painel.tocando video{opacity:1;}
.arq-painel .still-tag{opacity:1; transform:none;}

.arq-fecho{
  min-height:60vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:var(--pad); text-align:center;
}
.arq-fecho h2{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(28px, 5vw, 68px); margin:0; letter-spacing:.04em;
}

@media (max-width:820px){
  .faixa-item.alta {width:62vw;}
  .faixa-item.larga{width:92vw;}
  .faixa-item.media{width:74vw;}
  .faixa-item.baixa{width:54vw;}
}

@media (prefers-reduced-motion: reduce){
  .faixa-track{transform:none !important;}
  .faixa-sticky{overflow-x:auto;}
}

/* ---------- índice: estado de boas-vindas ----------
   Abre na capa em vídeo. Nenhum projeto vem marcado; eles só aparecem
   quando o mouse passa pelo menu. */
.site-logo--duplo{position:relative; display:block;}
.site-logo--duplo img{
  display:block; width:auto;
  transition:opacity 520ms ease;
}
.site-logo--duplo .marca-padrao{height:clamp(18px, 1.9vw, 26px);}
.site-logo--duplo .marca-abertura{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  height:clamp(34px, 3.6vw, 52px);
  opacity:0;
}
/* na abertura vale a versão amarela com a elipse; ao destacar um projeto
   ela dá lugar à marca padrão */
.em-boas-vindas .marca-padrao{opacity:0;}
.em-boas-vindas .marca-abertura{opacity:1;}

/* Capa: cada mídia no seu formato original, inteira, sobre preto.
   O recorte de duração do vídeo não altera o enquadramento. */
.cena-main{background:#000;}
/* '.scene.cena-main' e não '.cena-main': a regra genérica '.scene video'
   das prévias tem a mesma especificidade e vem depois no arquivo, então
   venceria e imporia 'cover', cortando as bordas do frame. */
.scene.cena-main img,
.scene.cena-main video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
/* o ken-burns de '.scene img' faria a foto crescer por baixo do vídeo:
   como os dois estão em 'contain', a foto ampliada aparecia transbordando
   pelas bordas. Na capa a animação é desligada e o poster sai de cena
   assim que o vídeo assume (se ele falhar, a foto permanece). */
.scene.cena-main img{animation:none; transform:none;}
.scene.cena-main.com-video img{opacity:0;}
.scene.cena-main video{
  z-index:11;
  opacity:0; transition:opacity 700ms ease-in-out;
}
/* exige '.active': sem isso a capa continuava com o vídeo visível em
   z-index 11 depois de sair da abertura, cobrindo os projetos que são só
   imagem (o vídeo dos outros projetos escondia o problema por vir depois
   no DOM, no mesmo nível). */
.scene.cena-main.active.com-video video{opacity:1;}

/* prévia em movimento no índice: o vídeo entra por cima do poster */
.scene video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:11;
  transition:opacity 480ms ease-in-out;
}
.scene.active.com-video video{opacity:1;}

/* ---------- about ----------
   Seções de tela cheia com fundo em imagem, alternando com campos da
   paleta. Cada fundo fica fixo enquanto o texto passa por cima. */
body.page-about{
  height:auto; overflow:visible; overflow-x:hidden;
  background:var(--preto); color:var(--offwhite);
}

.ab-bloco{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(46px, 7vw, 100px);
  overflow:hidden;
}
.ab-fundo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.ab-fundo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
}
/* no retrato de abertura o rosto fica no terço superior: ancora o corte ali
   para que ele não seja cortado em telas altas */
.ab-capa .ab-fundo img{object-position:center 32%;}
.ab-fundo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);
}
.ab-conteudo{position:relative; z-index:2; max-width:56ch;}

.ab-capa{align-items:center; text-align:left;}
.ab-capa .ab-conteudo{max-width:none;}
.ab-nome{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(52px, 13vw, 210px); line-height:.84; margin:0;
  letter-spacing:.01em;
}
.ab-papel{
  margin:26px 0 0;
  font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--amarelo);
}

.ab-titulo{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(28px, 4.6vw, 64px); line-height:1; margin:0 0 22px;
  letter-spacing:.03em;
}
.ab-texto{
  margin:0 0 18px;
  font-size:clamp(14px, 1.15vw, 17px); line-height:1.95; letter-spacing:.02em;
}

/* campos de cor entre as imagens, como na galeria */
.ab-campo{
  min-height:auto;
  padding:clamp(70px, 11vw, 170px) var(--pad);
  display:flex; align-items:center;
}
.ab-campo.claro{background:var(--offwhite); color:var(--preto);}
.ab-campo.amarelo{background:var(--amarelo); color:var(--preto);}

.ab-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(20px, 3vw, 48px);
  width:100%;
}
.ab-lista h3{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(18px, 1.9vw, 26px); margin:0 0 10px; letter-spacing:.05em;
}
.ab-lista p{margin:0; font-size:14px; line-height:1.85; opacity:.8;}

.ab-contato{
  display:flex; flex-wrap:wrap; gap:clamp(16px, 3vw, 40px);
  margin-top:30px;
}
.ab-contato a{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(15px, 1.5vw, 20px); letter-spacing:.1em;
  border-bottom:solid 2px currentColor; padding-bottom:3px;
  transition:opacity 240ms ease;
}
.ab-contato a:hover{opacity:.55;}

/* ---------- variações de apresentação dos painéis ----------
   Todas partem do mesmo --p (0→1) escrito pelo JS, então o ritmo do scroll
   é o mesmo; o que muda é o caminho pelo qual a imagem toma a tela. */

/* 1. diafragma — abre dos quatro lados (padrão, já definido em .still-frame) */

/* 2. cortina — varre da esquerda para a direita */
.still.p-cortina .still-frame{
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
}
.still.p-cortina .still-media{
  transform:translate3d(0, var(--shift), 0) scale(calc(1 + (1 - var(--p)) * .08));
}

/* 3. faixa — nasce como uma tira central e abre para cima e para baixo */
.still.p-faixa .still-frame{
  clip-path:inset(calc((1 - var(--p)) * 50%) 0);
}
.still.p-faixa .still-media{
  transform:translate3d(0, var(--shift), 0) scale(calc(1 + (1 - var(--p)) * .12));
}

/* 4. aproximação — sem recorte, a imagem recua de um close até o quadro */
.still.p-zoom .still-frame{clip-path:none;}
.still.p-zoom .still-media{
  transform:translate3d(0, var(--shift), 0) scale(calc(1 + (1 - var(--p)) * .38));
}
.still.p-zoom .still-frame::after{box-shadow:none;}

/* 5. persiana — entra por duas metades que se encontram no meio */
.still.p-persiana .still-frame{
  clip-path:inset(0 calc((1 - var(--p)) * 50%));
}
.still.p-persiana .still-media{
  transform:translate3d(0, var(--shift), 0) scale(calc(1 + (1 - var(--p)) * .1));
}

/* ---------- scroll em steps ----------
   Cada painel encaixa na tela inteira e a rolagem para nele, em vez de
   deixar a imagem vazar pela borda. 'stop: always' impede pular dois de
   uma vez num gesto mais forte, então passa um por vez.
   Só as páginas de projeto (html.snap) — a galeria tem faixas laterais
   cuja rolagem seria atrapalhada por um encaixe obrigatório. */
html.snap{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}
html.snap .hero,
html.snap .still{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

@media (prefers-reduced-motion: reduce){
  html.snap{scroll-behavior:auto;}
}

/* ---------- custo de composição na galeria ----------
   O grain é uma camada fixa em 'mix-blend-mode' cobrindo a tela: enquanto
   a faixa desliza por baixo, o navegador precisa refazer a mistura de todo
   o viewport a cada quadro. Na galeria ele fica estático e sem blend —
   a textura continua, o custo por quadro some. */
.page-arquivo .grain{
  animation:none;
  mix-blend-mode:normal;
  opacity:.035;
}

/* isola cada item: o repinte de um não invalida a faixa inteira */
.faixa-item{
  contain:paint;
  backface-visibility:hidden;
}
/* a trilha vira camada própria na GPU, então o deslize não repinta o resto */
.faixa-track{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
/* imagem grande escalada: evita reamostragem cara durante o movimento */
.faixa-item img{
  image-rendering:auto;
  transform:translateZ(0);
}

/* a troca de cor acompanha o ritmo do deslize, para os dois efeitos
   parecerem parte do mesmo movimento */
body.page-arquivo{
  transition:background-color 900ms cubic-bezier(.22,1,.36,1),
             color 900ms cubic-bezier(.22,1,.36,1);
}

/* ---------- about: bloco de manifesto ----------
   O texto de apresentação é o centro da página. Em vez de um campo branco
   liso, a própria elipse da marca entra em escala enorme, sangrando pela
   borda esquerda, como marca-d'água — a identidade servindo de textura
   para o próprio texto que a define. */
.ab-manifesto{
  display:block;
  position:relative;
  overflow:hidden;
  padding:clamp(90px, 15vw, 230px) var(--pad);
}
.ab-manifesto .ab-conteudo{
  position:relative; z-index:2;
  max-width:min(62ch, 100%);
  margin-left:auto;
  margin-right:clamp(0px, 4vw, 90px);
}
.ab-selo{
  position:absolute; z-index:0; pointer-events:none;
  left:-18%; top:50%;
  width:min(96vw, 1500px);
  transform:translateY(-50%) rotate(-8deg);
  opacity:.14;
}
.ab-selo img{display:block; width:100%; height:auto;}

/* filete amarelo abrindo o texto */
.ab-filete{
  display:block; height:2px; width:clamp(56px, 9vw, 130px);
  background:var(--amarelo);
  margin-bottom:clamp(24px, 3vw, 44px);
}
.ab-lead{
  font-family:var(--texto);
  font-size:clamp(19px, 2.15vw, 34px);
  line-height:1.62; letter-spacing:.005em;
  margin:0;
}
.ab-lead + .ab-lead{margin-top:1.5em;}

.ab-marca{
  display:block;
  font-family:var(--display); text-transform:uppercase;
  font-size:11px; letter-spacing:.34em;
  margin-bottom:clamp(26px, 3.4vw, 52px);
  opacity:.55;
}

/* segundo trecho, sobre imagem: mantém corpo generoso mas com véu maior */
.ab-bloco.ab-narrativa{align-items:flex-end;}
.ab-narrativa .ab-conteudo{max-width:min(58ch, 100%);}
.ab-narrativa .ab-lead{font-size:clamp(17px, 1.75vw, 27px);}

/* ---------- toque ----------
   Sem hover a prévia precisa de um alvo maior e o item ativo tem de ficar
   evidente, já que não há cursor para indicar onde a pessoa está. */
@media (hover: none), (pointer: coarse){
  .index-nav a{padding:10px 0;}
  .index-nav a.active span{border-bottom-color:var(--amarelo);}
  .scroll-cue{display:none;}
}

/* ---------- vídeo sem recorte ----------
   Regra geral dos vídeos do site, fora da galeria: cada peça aparece no
   formato em que foi finalizada. 'cover' preencheria a tela empurrando as
   bordas para fora — perdendo a moldura de janela do 4:3, cortando a
   legenda queimada das peças que a têm, e nos painéis o deslocamento do
   parallax ainda tiraria 9% da altura. Com 'contain' o quadro aparece
   inteiro sobre preto, e o parallax é desligado, já que deslocar uma
   imagem contida deixaria falha na borda. */
.bg-video.inteiro,
.bg-poster.inteiro{object-fit:contain; background:#000;}

.still.inteiro .still-media{
  inset:0;
  transform:none !important;
}
.still.inteiro .still-media video,
.still.inteiro .still-media img{
  object-fit:contain;
  background:#000;
}

/* o mesmo tratamento na prévia do índice (sempre) e nos painéis da
   galeria marcados caso a caso */
.scene.inteiro img,
.scene.inteiro video,
.arq-painel.inteiro img,
.arq-painel.inteiro video{
  object-fit:contain;
  background:#000;
}
.scene.inteiro img{animation:none; transform:none;}