/* ============================================================
   PORTFOLIO — base
   As medidas estruturais vem dos SVGs do Figma (frame 3456x1862, @2x).
   O TAMANHO DO TIPO vem do Readymag, nao do Figma — ver --tipo.
   ============================================================ */

@font-face {
  font-family: "Everett";
  src: url("../fonts/Everett-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  /* a fonte E o layout: uma fonte de sistema piscando quebraria a grade */
  font-display: block;
}

:root {
  --base:   3456;      /* largura do frame no Figma */
  --banda:  168;       /* altura de header, linha da lista e subheader */
  --fio:    3;         /* espessura de toda regua */
  /* Quantas linhas da lista aparecem antes de rolar. O vao acima da lista
     nao e mais uma altura do desenho (o Figma tinha 686, medido num frame de
     1862 de altura): e o que sobra da janela depois de reservar estas linhas
     no rodape. Por isso depende da ALTURA da janela, e nao da largura. */
  --visiveis: 2.5;

  --tipo:   95;        /* o tipo do chrome: header, lista, subheader */
  /* Tamanho do texto de conteudo (About, textos de projeto). Isto e so o
     PADRAO. Como e variavel CSS, da para sobrepor em qualquer nivel, e o
     mais especifico ganha:
       pagina inteira -> <div class="folha" style="--tipo-corpo: 60">
       um bloco       -> <div class="bloco" style="--tipo-corpo: 70">
       uma coluna     -> <div class="coluna ..." style="--tipo-corpo: 38">
     No editor isso vira um campo opcional em cada nivel: vazio = herda. */
  --tipo-corpo: 49;

  /* ---- O TAMANHO GERAL --------------------------------------------
     As proporcoes do Figma estao certas; o desenho inteiro e que era
     grande demais. --reducao encolhe TUDO por igual (tipo, bandas,
     colunas, reguas, hero) sem mexer em nenhuma coordenada.

     Os dois extremos medidos:
       1.000 = o tamanho literal do Figma (texto a 2.749% da largura da tela)
       0.682 = o tamanho do Readymag  (texto a 1.875% da largura da tela)
     O Figma ficou grande demais e o Readymag pequeno demais; 0.841 e o meio
     termo entre os dois, escolhido pelo autor.

     ESTE E O UNICO NUMERO A MEXER para o site ficar maior ou menor.
     Mexe so nos TAMANHOS; as colunas continuam ancoradas na largura da
     janela, e a proporcao interna do Figma (tipo 95 em banda 168) nao muda
     em nenhum valor. ------------------------------------------------- */
  --reducao: 0.971;

  /* ---- AS TRES COLUNAS --------------------------------------------
     Valem ao mesmo tempo para o header, a lista e o subheader do projeto
     — e e exatamente por isso que os tres ficam alinhados. Mexer aqui
     move os tres juntos; mexer em so um lugar quebraria o alinhamento.

     O numero esta na base do Figma, onde 3456 = a largura da janela.
     Entao: 0 e a borda esquerda, 1728 e o centro, 3456 a borda direita.
     Menor = mais para a esquerda. ------------------------------------ */
  --col-1:    65;      /* nome / cliente   =  1.9% da largura */
  --col-2:  1628;      /* funcao / titulo  = 47.1% da largura */
  --col-3:  3344.91;   /* o olho           = 96.8% da largura */

  --tinta:  #151A19;
  --papel:  #FFFFF1;

  /* a cor que fura a lente do olho semicerrado: o fundo da banda em que ele
     esta. O subcabecalho, que e invertido, redefine para a tinta. */
  --vazado: var(--papel);

  --piscada: 260ms;
  --curva: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--papel); }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- A ESCALA ---------------------------------------------------------
   DUAS unidades, e a diferenca importa:

     --u  POSICAO horizontal. Mapeia a largura da janela ao frame do Figma.
          NAO leva --reducao: se levasse, o desenho encolheria para o canto
          e a pagina deixaria de ocupar a janela.
     --t  TAMANHO. A mesma unidade, reduzida. Vale para tipo, altura de
          banda, espessura de regua, hero e o olho.

   A proporcao interna do Figma (tipo 95 dentro de banda 168) fica intacta,
   porque tipo e banda usam os dois a mesma --t.

   Sem transform (que borraria o texto) e sem JS de resize. cqw em vez de vw
   porque cqw ignora a barra de rolagem.
   Lembrar: --u e --t so existem DENTRO de .folha.
----------------------------------------------------------------------- */
.palco { container-type: inline-size; width: 100%; }

.folha {
  --u: calc(100cqw / var(--base));
  --t: calc(var(--u) * var(--reducao));
  font-family: "Everett", system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--tipo) * var(--t));
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- A BANDA ----------------------------------------------------------
   Header, cada linha da lista e o subheader do projeto sao a MESMA banda.
   O texto e centralizado verticalmente, e isso poe o baseline exatamente
   nos 113.735 que o Figma marca — conferido contra as metricas da Everett
   (asc 885, desc -259, upem 1000):  84 + 95 x 0.626/2 = 113.735.
   Centralizar e a regra; nao crave o numero. Ele continua certo sozinho
   em qualquer --reducao, e continuaria certo se o tipo mudasse.
----------------------------------------------------------------------- */
.banda {
  position: relative;
  height: calc(var(--banda) * var(--t));
}

.item {
  position: absolute;
  top: 50%;          /* topo da caixa no centro da banda */
  line-height: 0;    /* caixa de altura zero => baseline no lugar certo */
  white-space: nowrap;
}

/* ---- REGUAS -----------------------------------------------------------
   Header: regua por dentro, encostada na base (165 -> 168 no SVG).
   Lista:  fio de 3 centrado na fronteira entre linhas (852.5 -> 855.5).
   background e nao border: o Chrome arredonda border-width para pixel
   inteiro do dispositivo, e 1.25px virava 1px.
----------------------------------------------------------------------- */
.regua-dentro::after,
.fio::before,
.fio-fim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--fio) * var(--t));
  background: currentColor;
}
.regua-dentro::after { bottom: 0; }
.fio::before     { top:    calc(var(--fio) * var(--t) / -2); }
.fio-fim::after  { bottom: calc(var(--fio) * var(--t) / -2); }

/* ---- O OLHO -----------------------------------------------------------
   Aberto: elipse vazada (rx 43.085, ry 27.5545), traco de 6, pupila cheia.
   Conferido contra os pontos de controle do path do Figma — batem com a
   elipse com 0.4% de erro.
   Fechado: a mesma elipse achatada (ry 5.345) e PREENCHIDA, sem pupila.
   Animar rx/ry/fill em CSS mantem a espessura do traco constante; escalar
   o grupo afinaria o traco em cima e embaixo.
----------------------------------------------------------------------- */
.olho {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width:  calc(100 * var(--t));
  height: calc(64  * var(--t));
  display: block;
  color: inherit;
}
.olho > svg { display: block; width: 100%; height: 100%; overflow: visible; }

.lente {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  rx: 43.085; ry: 27.5545;
  transition: rx var(--piscada) var(--curva),
              ry var(--piscada) var(--curva),
              fill var(--piscada) var(--curva);
}
.pupila {
  fill: currentColor;
  stroke: none;
  rx: 11.9561; ry: 11.9561;
  transition: opacity var(--piscada) var(--curva);
}

/* o estado fechado, usado no hover e no subheader do projeto */
.fechado .lente  { rx: 46.0872; ry: 5.345; fill: currentColor; }
.fechado .pupila { opacity: 0; }

/* ESPIANDO: olho semicerrado. A pupila SEGUE O PONTEIRO (assets/js/olho.js);
   nao ha animacao propria. Parado, ela fica centrada.

   A lente e cheia e ACHATADA MAIS que o raio da pupila, e a pupila mantem o
   tamanho do olho aberto (r 11.9561). O resultado e que ela vaza para fora da
   elipse em cima e embaixo: como e da cor do FUNDO DA BANDA, o que se ve e uma
   mordida circular na lente, e nao um circulo desenhado por cima.

   --vazado e a cor que fura a lente: e o fundo da banda, nao uma cor fixa.
   Creme no header, tinta no subheader invertido. */
.espiando .lente  { rx: 46.0872; ry: 9; fill: currentColor; }
.espiando .pupila {
  rx: 11.9561; ry: 11.9561;
  fill: var(--vazado);
}

/* Qualquer link dentro de uma banda herda a cor da banda. Sem isto o
   <a> do nome sai azul e sublinhado — foi o que aconteceu no About. Mesma
   familia do bug do olho azul: <a> precisa de cor explicita, sempre. */
.banda a { color: inherit; text-decoration: none; }

/* ---- HEADER -----------------------------------------------------------
   Fixo no topo: a lista passa por baixo dele.
   nome x=65 | DESIGNER x=1956.91 | olho cx=3344.91 (link para o About)
----------------------------------------------------------------------- */
.cabecalho {
  position: sticky;   /* sticky e nao fixed: .palco tem container-type, o que
                         o tornaria bloco de contencao de qualquer fixed */
  top: 0;
  z-index: 10;
  background: var(--papel);
}
.cabecalho .nome   { left: calc(var(--col-1) * var(--u)); }
.cabecalho .funcao { left: calc(var(--col-2) * var(--u)); }
.cabecalho .olho   { left: calc(var(--col-3) * var(--u)); }

/* o olho do header e o link para o About, e fecha quando voce mira nele */
a.olho { cursor: pointer; }
a.olho:hover  .lente,  a.olho:focus-visible .lente  { rx: 46.0872; ry: 5.345; fill: currentColor; }
a.olho:hover  .pupila, a.olho:focus-visible .pupila { opacity: 0; }
a.olho:focus-visible { outline: calc(var(--fio) * var(--t)) solid currentColor; outline-offset: calc(6 * var(--t)); }

/* ---- HERO -------------------------------------------------------------
   Vazio. A altura e o que sobra: janela - header - as linhas reservadas.
   svh e nao vh para que a conta feche mesmo com a barra do navegador
   aparecendo no celular. O max() e um piso: em janela muito baixa o vao
   nunca fica menor que uma banda.
----------------------------------------------------------------------- */
.hero {
  --banda-px: calc(var(--banda) * var(--t));
  --lista-visivel: calc(var(--visiveis) * var(--banda-px));
  height: max(
    calc(100svh - var(--banda-px) - var(--lista-visivel)),
    var(--banda-px)
  );
}

/* ---- LISTA ------------------------------------------------------------
   Alinhada com o header, uma coluna so: cliente sob o nome, titulo sob a
   funcao, olho sob o olho. (No Figma estavam em 260 / 1289.28 / 3149.91,
   uma segunda grade que competia com a do header.)
----------------------------------------------------------------------- */
.lista { list-style: none; margin: 0; padding: 0; }

.linha { position: relative; }

.linha > a {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  background: transparent;
  transition: background var(--piscada) var(--curva),
              color      var(--piscada) var(--curva);
}
/* O TITULO vem primeiro, o cliente depois. Os nomes das classes continuam
   dizendo o que a coisa E; sao as colunas que trocaram de lado. */
.linha .titulo  { left: calc(var(--col-1) * var(--u)); }
.linha .cliente { left: calc(var(--col-2) * var(--u)); }
.linha .olho    { left: calc(var(--col-3) * var(--u)); pointer-events: none; }

/* a inversao completa da banda */
.linha > a:hover,
.linha > a:focus-visible {
  background: var(--tinta);
  color: var(--papel);
  outline: none;
}
.linha > a:hover  .lente,  .linha > a:focus-visible .lente  { rx: 46.0872; ry: 5.345; fill: currentColor; }
.linha > a:hover  .pupila, .linha > a:focus-visible .pupila { opacity: 0; }

/* ---- PAGINA DE PROJETO ------------------------------------------------
   SVG 3. A MESMA banda, invertida, encostada logo abaixo do header
   (168 -> 336). O olho ja nasce fechado: o projeto esta sendo visto.
----------------------------------------------------------------------- */
.subcabecalho {
  --vazado: var(--tinta);       /* banda invertida: a pupila e o nosso preto */
  /* NAO e sticky, de proposito: o subheader sobe junto com o conteudo e some
     por tras do header principal, que esse sim fica preso no topo. So a
     .banda de baixo (position: relative) e necessaria, para os .item
     absolutos dentro dela. */
  background: var(--tinta);
  color: var(--papel);
}
.subcabecalho .titulo  { left: calc(var(--col-1) * var(--u)); }
.subcabecalho .cliente { left: calc(var(--col-2) * var(--u)); }
.subcabecalho .olho    { left: calc(var(--col-3) * var(--u)); pointer-events: none; }

/* A midia de abertura do projeto nao e mais um caso especial: e um bloco de
   altura "tela". --bandas-acima diz quantas bandas descontar da janela — 1 no
   About (so o header), 2 na pagina de projeto (header + subheader). */

@media (prefers-reduced-motion: reduce) {
  .lente, .pupila, .linha > a { transition-duration: 1ms; }
  .espiando .pupila { cx: 0; }
}

/* "GUTs NEW SPIRIT": o s e minusculo, e no Figma esta como texto separado
   (x=436.507). Em HTML e um span, nao um text-transform. */
.min { text-transform: lowercase; }


/* ---- O CURSOR ---------------------------------------------------------
   No Readymag e um PNG de 25x25 com um circulo de 11px de diametro no
   centro, trocado por CSS quando o ponteiro entra num link — sem JS e sem
   perseguicao. Medido: circulo ocupa os pixels 7..17 nos dois eixos, e o
   hotspot fica em (12,12), o centro.

   Aqui e um SVG embutido em vez de PNG: nao faz requisicao, nao pixela em
   tela retina, e usa a nossa tinta (#151A19) no lugar do #191919 do site
   velho. O vermelho e puro (#FF0000), como no original.

   O segundo valor depois da url() e o fallback caso o SVG nao carregue.
----------------------------------------------------------------------- */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2725%27%20height%3D%2725%27%3E%3Ccircle%20cx%3D%2712.5%27%20cy%3D%2712.5%27%20r%3D%275.5%27%20fill%3D%27%23151A19%27%2F%3E%3C%2Fsvg%3E") 12 12, auto;
}
a[href], a[href] *, button, [role="button"], summary {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2725%27%20height%3D%2725%27%3E%3Ccircle%20cx%3D%2712.5%27%20cy%3D%2712.5%27%20r%3D%275.5%27%20fill%3D%27%23FF0000%27%2F%3E%3C%2Fsvg%3E") 12 12, pointer;
}

/* ---- BLOCOS -----------------------------------------------------------
   O modelo de conteudo, para About, Fotografia e paginas de projeto.

   Uma pagina e uma PILHA DE BLOCOS. Cada bloco tem uma ou mais COLUNAS.
   Cada coluna leva texto ou imagem e tem uma largura propria, em % da
   pagina. Um bloco de uma coluna so e a imagem ocupando a largura inteira.

   Altura do bloco: automatica (o conteudo manda) ou fixa. Quando fixa, o
   numero esta em unidades do desenho e usa --u, nao --t: assim a proporcao
   do bloco em relacao a largura da janela nao muda, e a imagem nao muda de
   recorte quando voce mexe na --reducao.
----------------------------------------------------------------------- */
.blocos {
  display: flex;
  flex-direction: column;
  /* espaco entre o header e o primeiro bloco */
  padding-top: calc(var(--respiro-topo, 0) * var(--u));
}

.bloco {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--goteira, 0) * var(--u));
}
.bloco + .bloco { margin-top: calc(var(--respiro, 0) * var(--u)); }

.bloco[data-altura="fixa"] {
  height: calc(var(--altura) * var(--u));
  align-items: stretch;
}

.coluna {
  width: calc(var(--largura, 100) * 1%);
  min-width: 0;          /* deixa o texto quebrar em vez de estourar */
  position: relative;
}

.coluna picture { display: contents; }
.coluna img,
.coluna video { display: block; width: 100%; height: auto; }

.bloco[data-alinhar="centro"] .coluna--texto { justify-content: center; }
.bloco[data-alinhar="base"]   .coluna--texto { justify-content: flex-end; }

.bloco[data-altura="tela"] {
  min-height: calc(100svh - var(--bandas-acima, 1) * var(--banda) * var(--t));
  align-items: stretch;
}

/* com altura definida a imagem preenche e recorta; com altura automatica ela
   manda na altura e mantem a propria proporcao */
.bloco[data-altura="fixa"] .coluna img,
.bloco[data-altura="fixa"] .coluna video,
.bloco[data-altura="tela"] .coluna img,
.bloco[data-altura="tela"] .coluna video { height: 100%; object-fit: cover; }

.bloco[data-altura="fixa"] .lugar-da-imagem,
.bloco[data-altura="tela"] .lugar-da-imagem { aspect-ratio: auto; height: 100%; }

/* Texto de conteudo. O site tem UM tamanho de tipo no chrome (header e
   lista); o corpo e outro — no Readymag, 20px a 1440, ou seja ~49 unidades
   do desenho, mais ou menos metade do chrome. E caixa normal, nao alta. */
/* A coluna de texto e uma coluna flex para que o conteudo possa ser alinhado
   na altura do bloco. Com justify-content no padrao (flex-start) o desenho
   fica identico ao de antes; so os blocos de altura fixa ou de tela cheia
   ganham a opcao de centralizar ou empurrar para baixo. */
.coluna--texto {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--recuo-v, 0) * var(--u)) calc(var(--recuo-h, 0) * var(--u));
  font-size: calc(var(--tipo-corpo) * var(--t));
  line-height: 1.15;
  text-transform: none;
}
.coluna--texto p { margin: 0 0 1.15em 0; }
.coluna--texto p:last-child { margin-bottom: 0; }
.coluna--texto a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.coluna--texto .miudo { font-size: 0.62em; }

/* Espaco reservado de imagem, enquanto os arquivos nao chegam. Some sozinho
   quando a <img> de verdade entrar no lugar. --proporcao = largura/altura. */
.lugar-da-imagem {
  aspect-ratio: var(--proporcao, 1);
  box-shadow: inset 0 0 0 calc(var(--fio) * var(--t) / 2) var(--tinta);
}

/* ---- MURAL -------------------------------------------------------------
   O outro tipo de bloco: sem coluna e sem fluxo. Cada item tem x, y e largura
   proprios em unidades do desenho, entao o conjunto escala junto com a janela
   e a composicao nunca muda de forma.
   A altura do bloco e obrigatoria: item absoluto nao empurra nada.
------------------------------------------------------------------------- */
.bloco[data-tipo="mural"] {
  display: block;
  position: relative;
  height: calc(var(--altura) * var(--u));
}
.mural-item {
  position: absolute;
  left:  calc(var(--x) * var(--u));
  top:   calc(var(--y) * var(--u));
  width: calc(var(--largura) * var(--u));
}
.mural-item img { display: block; width: 100%; height: auto; }
.mural-item .lugar-da-imagem { aspect-ratio: 3 / 2; }

/* No celular o mural desempilha em coluna, de cima para baixo — a ordem vem
   do --ordem que o render calculou pela posicao, e nao da ordem do array. */
@media (max-width: 700px) {
  .bloco[data-tipo="mural"] {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--goteira, 60) * var(--u));
  }
  .mural-item { position: static; width: 100%; order: var(--ordem); }
}

/* ---- NAVEGACAO ENTRE PROJETOS -------------------------------------------
   Dois discos presos no rodape: projeto anterior e proximo. No primeiro
   projeto so existe o da direita; no ultimo, so o da esquerda.

   'sticky' e nao 'fixed': .palco tem container-type, o que faz dele o bloco de
   contencao de qualquer position:fixed — o disco iria parar no fim do
   documento em vez de ficar preso na janela. O margin-top negativo tira a
   navegacao do fluxo, para ela nao acrescentar altura a pagina.
------------------------------------------------------------------------- */
/* --disco e metade da banda: o disco continua amarrado ao sistema (168 / 2),
   e nao um numero solto. */
.navegacao {
  --disco: calc(var(--banda) / 2);
  position: sticky;
  bottom: calc(70 * var(--t));
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: calc(28 * var(--t));
  height: calc(var(--disco) * var(--t));
  margin-top: calc(var(--disco) * var(--t) * -1);
  pointer-events: none;          /* so os discos clicam */
}

.disco {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width:  calc(var(--disco) * var(--t));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: inset 0 0 0 calc(var(--fio) * var(--t)) var(--tinta);
  transition: background var(--piscada) var(--curva),
              color      var(--piscada) var(--curva);
}
.disco:hover, .disco:focus-visible {
  background: var(--tinta);
  color: var(--papel);
  outline: none;
}
.disco svg { width: 55%; height: 55%; overflow: visible; }
.seta {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- VIDEO --------------------------------------------------------------
   O quadro guarda a proporcao para a pagina nao pular enquanto carrega. Vale
   para os dois casos: arquivo proprio (<video>) e incorporado (<iframe>).
------------------------------------------------------------------------- */
/* A coluna de video estica ate a altura do bloco, e o quadro preenche ela.
   'height: 100%' com pai de altura automatica resolve para automatico, e ai a
   proporcao e que manda — entao um mesmo par de regras cobre os dois casos:
   bloco com altura definida, o video preenche; bloco automatico, o video
   assume a proporcao. Sem interruptor. */
.coluna--video { align-self: stretch; }

.quadro-video {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--proporcao, 1.778);
  background: var(--tinta);
  overflow: hidden;
}
.quadro-video > iframe,
.quadro-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
/* A camada de clique, transparente, cobrindo o quadro. Existe porque com os
   controles do player escondidos o clique nao pode depender dele. */
.toque-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: inherit;      /* o ponteiro do site, nao a mãozinha de botao */
  -webkit-appearance: none;
  appearance: none;
}
.toque-video:focus-visible {
  outline: calc(var(--fio) * var(--t)) solid var(--papel);
  outline-offset: calc(-6 * var(--t));
}

.quadro-video > .lugar-da-imagem {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  background: var(--papel);
}
/* num bloco de altura definida o video preenche em vez de mandar na altura */
.bloco[data-altura="fixa"] .quadro-video,
.bloco[data-altura="tela"] .quadro-video { aspect-ratio: auto; height: 100%; }