/* =====================================================================
   JB.HUB — folha única. A página da bio.

   NADA AQUI É INVENTADO: a paleta, o módulo de 8 px, a escala de seis
   passos e a lei da trama vêm fechadas de `JB.STUDIO/_material`
   (`cor-dos-regimes.json`, `marca-v2.json`, `site/site.css`) e entram
   como RESTRIÇÃO. O que é novo é só o que esta peça tem e as outras não:
   uma superfície só, seis alvos, e o polegar como instrumento.

   A TRAMA, EM NÚMERO ENTREGUE E NÃO EM NOME.
   O tile de g6 é 2400 px com passo nativo 80; com `background-size: S` o
   passo ENTREGUE é S/30. Com S = 240 px o passo é 8 px, e o lombo mede
   76 px de largura: n = 9,5 voltas da mão no menor lado.

   POR QUE 12 E NÃO 6. A primeira rodada usou o n mínimo da casa e o lombo
   saiu LISTRADO — seis traços separados, que o olho lê como padrão de
   listra e não como matéria, e que competiam com o nome pela atenção. O
   piso de 5 é PISO e não alvo: ele diz onde a trama deixa de existir, não
   onde ela fica boa. Dobrado o n, o lombo volta a ser campo. A g4 (passo
   nativo 40) com o MESMO S entrega 4 px —
   exatamente metade, que é a única razão entre degraus vizinhos que não
   produz moiré, porque as linhas da g4 caem em cima e no meio das da g6.

   E É POR ISSO QUE O HOVER NÃO ACENDE NADA. Ele revela a g4 por cima da
   g6: mesmo lugar, DOBRO de matéria depositada. Esmaecer ou clarear a
   trama seria pintar profundidade, que é o nome do que a casa proíbe.

   REGIME ESCURO, e a consequência prática: sobre a chapa o lima mede
   16,22:1 e pode tudo — tipo, filete, massa. (No papel mediria 1,08:1 e
   só poderia ser massa com grafite encostado; esta peça não é o papel.)

   390 px É A LARGURA DE PROJETO, não a de exceção: quem chega aqui vem da
   bio do Instagram, com o polegar. Todo alvo mede folgadamente mais que os
   44 px que a casa pratica; as bandas medem 120.
   ===================================================================== */

:root{
  --chapa:#0C0C0C; --c1:#141414; --c2:#2E2E2E; --c3:#4A4A4A;
  --c5:#9A9A9A; --c6:#D0D0D0; --tinta:#FFFFFF;
  --lima:#B6FF50; --grafite:#0C0C0C;

  --M:8px; --M2:16px; --M3:24px; --M4:32px; --M6:48px; --M8:64px;

  /* escala de seis passos, razão 1,25, base 16 — `cap-tipo` §02 */
  --t1:10px; --t2:13px; --t3:16px; --t4:20px; --t5:25px; --t6:31px;

  --S:240px;                 /* o background-size da trama; ver cabeçalho */
  --borda:1px solid var(--c2);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:var(--chapa); color:var(--c6);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:var(--t3); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px}

.mono{font-family:'JetBrains Mono',monospace;font-size:var(--t2);
  letter-spacing:.16em;color:var(--c5);font-weight:500;text-transform:uppercase}
.mini{font-family:'JetBrains Mono',monospace;font-size:var(--t1);
  letter-spacing:.18em;color:var(--c5);font-weight:500;text-transform:uppercase}

/* aviso de leitor de tela para toda saída de aba nova — invisível na
   chapa, lido por quem usa leitor. `mailto:` nunca carrega este span. */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* a moldura: 3M no celular, 8M a partir de 760 — `cap-grade` */
.faixa{padding-left:var(--M3);padding-right:var(--M3);
  width:100%;max-width:720px;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- topo */
.topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--M2);padding-top:var(--M4)}
.rotulo{width:132px;height:29px;opacity:.92}
.bicho{width:96px;height:96px;margin-top:-14px;
  transform-origin:50% 100%; animation:respira 4.6s ease-in-out infinite}
@keyframes respira{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.012) translateY(-1.5px)}
}

/* --------------------------------------------------------------- nome */
main{flex:1 0 auto;padding-bottom:var(--M4)}
.nome{font-size:clamp(31px,9vw,44px);line-height:1.02;letter-spacing:-.02em;
  font-weight:900;color:var(--tinta);margin-top:var(--M2)}
.posicao{margin-top:var(--M2);color:var(--lima);letter-spacing:.12em;line-height:1.7}

/* ------------------------------------------------------------- bandas */
.bandas{margin-top:var(--M4);border-top:var(--borda)}
.banda{position:relative;display:flex;align-items:stretch;gap:0;
  min-height:112px;border-bottom:var(--borda);
  transition:background-color .18s ease}

.lombo{position:relative;flex:0 0 76px;align-self:stretch;overflow:hidden}
.lombo i{position:absolute;inset:0;background-repeat:repeat;
  background-position:center center;background-size:var(--S) var(--S)}
.lombo .g6{background-image:url(/assets/hach-g6-tinta.png)}
.lombo .g4{background-image:url(/assets/hach-g4-tinta.png);
  opacity:0;transition:opacity .22s ease}
/* a opacidade acima GOVERNA A CAMADA EXTRA, nunca a base: a g6 embaixo é
   sempre inteira. O que aparece no hover é mais goiva no mesmo lugar, não
   a mesma goiva mais forte. */

.corpo{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:var(--M2) var(--M2) var(--M2) var(--M3);min-width:0}
.nu{font-size:var(--t1);color:var(--c5)}
.tit{font-size:var(--t5);font-weight:800;color:var(--tinta);letter-spacing:-.01em;
  line-height:1.15}
.sub{font-size:var(--t2);color:var(--c6);line-height:1.45;
  font-family:'Archivo',system-ui,sans-serif;letter-spacing:0;text-transform:none}
.seta{flex:0 0 auto;align-self:center;padding-right:var(--M2);
  font-size:var(--t4);color:var(--c5);
  transition:transform .22s ease,color .22s ease}

.banda:hover,.banda:focus-visible{background:var(--c1)}
.banda:hover .g4,.banda:focus-visible .g4{opacity:1}
.banda:hover .seta,.banda:focus-visible .seta{color:var(--lima);
  transform:translate(4px,-4px)}
.banda:active{background:#101010}

/* ----------------------------------------------------- projetos abertos
   Seção de peso menor que as bandas: sem lombo de trama (a trama é dos três
   lugares de conteúdo), só filete, nome, uma linha e o destino. Sem lima —
   a única ação da página segue sendo o Instagram. */
#projetos{scroll-margin-top:var(--M3)}
.projs{list-style:none;border-top:var(--borda)}
.proj{display:flex;align-items:center;gap:var(--M2);min-height:88px;
  padding:var(--M2) 0;border-bottom:var(--borda);
  transition:background-color .18s ease}
.proj-c{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.proj-t{font-size:var(--t4);font-weight:800;color:var(--tinta);
  letter-spacing:-.01em;line-height:1.2}
.proj-s{flex:0 0 auto;white-space:nowrap;transition:color .22s ease}
.proj:hover .proj-s,.proj:focus-visible .proj-s{color:var(--lima)}

/* ----------------------------------------------------------- contatos */
.rotulo-secao{margin-top:var(--M4);margin-bottom:var(--M2)}
.contatos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--M)}
.cx{min-height:56px;display:flex;align-items:center;justify-content:center;
  padding:var(--M2) var(--M);border:var(--borda);text-align:center;
  transition:border-color .18s ease,background-color .18s ease}
.cx-t{font-size:var(--t2);font-weight:700;color:var(--tinta);line-height:1.1;
  letter-spacing:-.005em}
.cx-s{color:var(--c5)}
.cx:hover,.cx:focus-visible{border-color:var(--c3);background:var(--c1)}

/* a única AÇÃO da página. Sobre a chapa o lima mede 16,22:1 e carrega
   tipo — o grafite por cima dele mede 17,41:1. */
.cx.acao{background:var(--lima);border-color:var(--lima)}
.cx.acao .cx-t{color:var(--grafite)}
.cx.acao .cx-s{color:#2C4A11}
.cx.acao:hover,.cx.acao:focus-visible{background:#C9FF74;border-color:#C9FF74}

/* ------------------------------------------------------------------ pé
   três canais somaram ao e-mail aqui (github, behance — `CONJUNTO-DE-
   LINKS.md` §3): pé de página é peso administrativo, não ação, por isso
   github/behance entram do lado do e-mail e não na fileira `.contatos`
   — que fica com os dois canais de rede, como a lei manda. Empilha no
   celular porque cinco textos em mono não cabem numa linha de 342 px;
   vira fileira só a partir de 760, onde a moldura já dá mais ar. */
.pe{display:flex;flex-direction:column;gap:var(--M2);
  padding-top:var(--M3);padding-bottom:var(--M4);border-top:var(--borda);
  margin-top:auto}
.pe a{min-height:44px;display:inline-flex;align-items:center}
.pe a:hover{color:var(--c6)}
.pe-links{display:flex;flex-wrap:wrap;column-gap:var(--M3);row-gap:0}

/* --------------------------------------------------------- 760 e acima */
@media (min-width:760px){
  .faixa{padding-left:var(--M8);padding-right:var(--M8)}
  .topo{padding-top:var(--M8)}
  .bicho{width:120px;height:120px}
  .banda{min-height:124px}
  .contatos{gap:var(--M2)}
  .cx{min-height:72px}
  .cx-t{font-size:var(--t4)}
  .pe{flex-direction:row;align-items:center;justify-content:space-between}
  /* a linha das aulas: própria, abaixo do par studio/contatos */
  .pe{flex-wrap:wrap}
  .pe-aulas{flex-basis:100%}
}

/* a entrada é escalonada em `hub.js`; quem pediu menos movimento não a
   recebe, e o bicho também para de respirar. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}