/* ═══════════════════════════════════════════════════════════════════════════
   inicio.css — a HOME nova: a página do autor (2026-08-27)
   ═══════════════════════════════════════════════════════════════════════════

   ★ NADA DE PALETA NOVA. Todas as cores saem de `tokens.css`, que por sua vez
   foi copiado da skin "Cinzas" do app AUTOR. Se faltar um tom, copia-se de lá —
   não se inventa aqui. As estruturas (`.wrap`, `.w-sec`, `.w-titulo-rubro`)
   são as mesmas da landing, para as duas páginas parecerem a mesma casa.

   ⚠ FOTO E CARTÕES TÊM `width`/`height` no HTML (o `img()` põe sozinho) — é o
   que impede a página de pular enquanto as imagens chegam. Aqui o CSS só manda
   na LARGURA; a altura vem da proporção, com `height:auto`. Sem isso a imagem
   estica, e foi assim que uma capa saiu achatada neste site. */

/* ── A ENTRADA: o brasao do Valetius ───────────────────────────────────────
   Refeita em 2026-08-28 a partir do print da pagina antiga do autor. A planta
   e a de la: emblema + botao + Instagram na ESQUERDA, risco vermelho no meio,
   fala + personagem + floco na DIREITA.
   ⚠ O VERMELHO E O DA CASA (--rubro, medido no Wix dele), escurecido no fundo
   para nao brigar com o preto do resto do site. Nada de paleta nova. */
.in-portal {
  position: relative; overflow: hidden;
  /* ⚠ era min(84vh,660px) e sobrava um palmo de preto embaixo do conteudo:
     a entrada e curta (coroa, botao, icone) e nao tem com que preencher uma
     tela inteira. Vao vazio no alto de um site nao le como respiro, le como
     pagina que nao carregou. */
  min-height: min(72vh, 560px); display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 3.5rem) 0;
  background:
    radial-gradient(115% 95% at 76% 42%, rgba(150, 22, 22, .40), transparent 62%),
    radial-gradient(85% 75% at 10% 26%, rgba(96, 12, 12, .34), transparent 72%),
    linear-gradient(180deg, #1b0606 0%, #0c0303 68%, var(--bg0) 100%);
}
/* ⚠⚠ DUAS COLUNAS TAMBÉM NO CELULAR (2026-08-29), e isto é o pedido, não uma
   escolha de desenho. O autor mandou o print da entrada dele e disse, com todas
   as letras: *"a home no celular é literalmente desse jeito que to te
   mostrando"* — nome, botão e Instagram à ESQUERDA, o risco vermelho no meio, a
   fala e o personagem à DIREITA. Lado a lado, na tela do celular.

   Até aqui a regra era a receita padrão de site responsivo: uma coluna abaixo
   de 820px, duas acima. O padrão empilhava a entrada dele numa fila vertical e
   desmanchava justamente o desenho que ele queria — o par nome/personagem
   frente a frente, separado pelo risco.

   ⚠ O QUE MUDA COM A LARGURA agora é só o TAMANHO das peças, nunca o arranjo:
   a coluna da esquerda fica um pouco mais estreita que a da direita (o
   personagem é alto e pede mais espaço), e o `gap` encolhe. */
.in-portal-in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(.5rem, 3vw, 3rem);
  align-items: center; width: 100%;
}
/* ⚠⚠ AQUI HAVIA UM TETO DE 990px, E ELE FOI DESFEITO — o registro fica para
   ninguem refazer. Em 30/08 ele pediu *"junta um pouquinho + o Valetius e o
   Krigashi (no modo desktop)"*; medi (163px de vazio de cada lado do risco),
   apertei o bloco para 990px (95px de cada lado) e mostrei o print. Ele olhou:
   *"o Valetius e o Krigashi tao muito proximos, talvez seja melhor restaurar o
   tamanho padrao que estava antes de eu pedir para alterar"*.
   A licao nao e sobre o numero: e que "junta um pouquinho" so vira medida
   DEPOIS de ele ver na tela. O espacamento voltou a ser o do grid puro. */


/* ══ A NUVEM DE PALAVRAS AO REDOR DO VALETIUS ═════════════════════════════
   ★★ SEGUNDA VERSAO. A primeira espalhava as palavras pela coluna e elas
   passavam por cima da coroa e do nome. Ele: *"Esta todo bugado... Nao pode ir
   para tras ou tocar no valetius... tem que ter a cor vermelho bem fraquinho,
   esmaecido... estilo pulse, aparece, se mostra, depois some ENQUANTO SE MOVE"*.

   Tres consertos, e cada um tem uma linha aqui:
   1. **A MARCA E ZONA PROIBIDA.** A nuvem deixou de morar dentro da coluna da
      esquerda (onde a coroa ocupa quase tudo) e passou a medir a METADE
      ESQUERDA DA SECAO. Sobra moldura em cima, embaixo e na frente da coroa —
      e e so nessa moldura que as palavras nascem. O `right: 50%` para a nuvem
      um pouco ANTES do risco vermelho em qualquer largura (medido: 7 a 9px de
      folga), entao ela tambem nunca invade o lado do Krigashi.
   2. **VERMELHO ESMAECIDO**, e sai do `--rubro` — o mesmo token do nome e da
      coroa. Nao ha vermelho novo na casa; o que muda e so a opacidade.
   3. **ELA SE MOVE ENQUANTO SOME.** Cada palavra tem uma deriva propria
      (`--dx`/`--dy`) e caminha durante todo o pulso. ⚠ A DERIVA APONTA SEMPRE
      PARA LONGE DA COROA: e essa invariante que garante que nenhuma palavra
      ande para dentro do Valetius no fim do movimento.

   ⚠ NADA DISSO SE CONFERE NO OLHO. `node _mede-nuvem.mjs` mede o retangulo de
   cada palavra em 6 fases da animacao, em 6 larguras, e cobra: nao encostar na
   coroa, nao encostar no botao do Instagram, nao vazar a caixa.

   ⚠ ELA E FUNDO, E TEM DE CONTINUAR SENDO:
   · `pointer-events: none` — senao uma palavra por cima do botao do Instagram
     rouba o clique dele, e so no instante em que ela esta no ar (o pior tipo de
     bug: intermitente por desenho);
   · quem fica por cima e o `.wrap` inteiro (`z-index: 1`), nao cada peca — uma
     fonte so para a ordem das camadas;
   · a nuvem NAO e filha do `.wrap`: o `movimento.css` esconde todo filho direto
     de `section > .wrap` esperando o `movimento.js` acender. La dentro ela
     nasceria invisivel.

   ⚠ SO DE 1000px PARA CIMA. Abaixo disso a coroa toma quase toda a metade
   esquerda e a moldura em volta dela deixa de existir — nao ha onde por palavra
   sem encostar. Foi medido, nao arbitrado. */
/* ⚠ O CAMPO (autor, 2026-08-30: *"pode aproximar o campo de surgimento um pouco
   mais"* e, no print marcado de amarelo, *"nesta area nao aparece nada"* —
   a faixa entre a coroa e o risco vermelho).
   · com as colunas de novo largas (o teto de 990px foi desfeito a pedido dele),
     a coroa volta ao MEIO da metade esquerda e sobra faixa dos DOIS lados —
     por isso o campo comeca na borda da secao outra vez.
   · o `right: 50%` continua parando o campo ANTES do risco vermelho em qualquer
     largura (medido: 3 a 13px de folga), entao ele nunca invade o Krigashi.
   · os 26px de cima e de baixo aproximam o campo na vertical pela mesma razao. */
.in-nuvem {
  /* ⚠⚠ ESTAS DUAS LINHAS SAO O QUE FAZ AS PALAVRAS DO LADO FICAREM SEMPRE
     A MESMA DISTANCIA DA COROA (autor: *"pode aproximar o campo de surgimento
     um pouco mais"*). `--coroa` repete, de proposito, o mesmo `clamp` do corpo
     do <h1> da coroa, e `--meia` e a METADE da largura do louro (ele tem 9,2em).
     Com isso, `47% ± var(--meia)` da a BORDA do louro em qualquer tela — e a
     palavra se pendura nela, em vez de se pendurar na borda da pagina.
     ⚠ Os 47% sao medidos: o centro da coluna da esquerda cai em 46,6% a 47,4%
     do campo, de 1000 a 1920px. ⚠ Mexeu no `font-size` do `.in-brasao`? Mexe
     aqui tambem — sao a mesma medida escrita em dois lugares, e o
     `_mede-nuvem.mjs` e quem acusa se elas se desencontrarem. */
  --coroa: clamp(18px, 3.1vw, 38px);
  --meia: calc(4.6 * var(--coroa));

  position: absolute;
  overflow: hidden; pointer-events: none; z-index: 0;
}
/* ⚠ SAO DUAS NUVENS, e nao a mesma em dois tamanhos: no computador o campo e a
   METADE ESQUERDA (a moldura fica EM VOLTA da coroa); no celular as duas
   colunas dividem os 375px, nao sobra faixa lateral nenhuma, e o campo passa a
   ser a LARGURA INTEIRA com as faixas so em cima e embaixo (110px cada,
   medidas com a imagem do Krigashi JA CARREGADA — ver a nota nos dados). */
/* ⚠⚠ O CAMPO DA TELA DEIXOU DE PARAR NA METADE (autor, 2026-08-30, 3a rodada:
   *"Faca aparecer tambem perto do louro, POR TRAS E AOS LADOS DO KRIGASHI,
   voce esta fazendo aparecer so no superior e inferior, e nao como parte dos
   elementos"*). Ele agora quer a palavra convivendo com o desenho, nao so
   emoldurando-o — entao o campo e a SECAO INTEIRA e o gato deixou de ser zona
   proibida: a palavra passa POR TRAS dele (o `.wrap` inteiro tem z-index 1).
   ⚠ O QUE CONTINUA PROIBIDO: a marca (louro + nome), o botao do Instagram e a
   FALA. Texto por cima de texto nao le, e a fala e dele. */
.in-nuvem.e-tela { left: 0; right: 0; top: 26px; bottom: 26px; }
.in-nuvem.e-cel  { left: 0; right: 0;   top: 14px; bottom: 14px; display: none; }
/* As duas faixas laterais: `--afast` e o quanto a palavra se afasta da borda do
   louro (meia largura dela + a folga). Nao e % — se fosse, ela se afastaria
   junto com a tela, que e exatamente o defeito que ele apontou. */
/* ⚠ O 23,7% E O CENTRO DO LOURO na caixa nova. Ele era 47% quando o campo ia
   so ate a metade da secao; com o campo ocupando a largura inteira, a mesma
   coluna passou a ficar na metade dessa conta. MEDIDO: o meio da marca cai em
   23,65% (a 1000px) e 23,8% (a 1920) da caixa. Trocar o campo sem trocar este
   numero joga as palavras laterais para dentro do louro. */
.in-nuvem-p.e-esq { left: calc(23.7% - var(--meia) - var(--afast)); }
.in-nuvem-p.e-dir { left: calc(23.7% + var(--meia) + var(--afast)); }
.in-nuvem-p {
  --pico: .22;   /* o "bem fraquinho": vermelho da casa a 22% sobre o papel */
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--display); font-size: var(--t);
  letter-spacing: .04em; white-space: nowrap; line-height: 1;
  color: var(--rubro);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: in-nuvem-pulso 8s var(--d) infinite cubic-bezier(.16, .84, .44, 1);
  will-change: opacity, transform;
}
/* ⚠ O PULSO E O PASSEIO SAO A MESMA ANIMACAO: a palavra ja esta andando quando
   aparece e continua andando enquanto some — que foi o pedido ("some enquanto
   se move"). Se a opacidade e o passeio fossem duas animacoes, a palavra
   pararia no ar no instante em que sumisse. */
/* ⚠⚠ O 34% NAO E ESTETICA, E CAPACIDADE. Cada palavra fica no ar 34% do ciclo
   (2,7s dos 8s). E isso que permite DUAS palavras dividirem o mesmo ponto da
   tela com meio ciclo (4s) de diferenca sem nunca aparecerem juntas — foi assim
   que a lista foi de 14 para 21 nomes sem apertar o desenho. Aumentar este
   numero faz as duas inquilinas de cada ponto se sobreporem. */
@keyframes in-nuvem-pulso {
  0%   { opacity: 0;
         transform: translate(-50%, -50%) translate(0, 0) scale(.94); }
  10%  { opacity: var(--pico);
         transform: translate(-50%, -50%) translate(calc(var(--dx) * .22), calc(var(--dy) * .22)) scale(1); }
  22%  { opacity: var(--pico);
         transform: translate(-50%, -50%) translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) scale(1.04); }
  34%, 100% { opacity: 0;
         transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.08); }
}
/* ⚠⚠ A TROCA DE NUVEM. Eu tinha DESLIGADO a nuvem no celular, medindo o campo
   como se ele fosse a metade esquerda tambem la — e nela a coroa ocupava de
   3,2% a 91,5%, sem sobra. Ele respondeu *"Pode fazer no celular tambem cara...
   vai dar certo, voce consegue"*, e estava certo: o campo do celular e OUTRO,
   e a largura inteira, com o Krigashi e a fala virando zona proibida junto.
   ⚠ A licao: eu media a caixa errada e concluia que nao cabia. */
/* ⚠⚠ A FAIXA DE 700 A 999px NAO TEM NUVEM, e isso e MEDIDO. Ali as duas
   colunas ja se esticaram (a coroa nao ocupa mais a largura toda, entao o campo
   do celular perde as faixas: a 768px o conteudo vai de 10,5% a 89,5% da altura
   e sobram 63px em cima e 63 embaixo) mas ainda nao ha folga lateral para o
   campo do computador (a 768 a faixa esquerda tem 71px e a palavra vaza).
   E a janela onde nenhum dos dois desenhos cabe — tablet e janela de navegador
   apertada. Antes de "consertar" isso, rode o `_mede-nuvem.mjs` a 768: as duas
   tentativas anteriores morreram ali. */
@media (max-width: 999px) {
  .in-nuvem.e-tela { display: none; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .in-nuvem.e-cel { display: none; }
}
@media (max-width: 699px) {
  .in-nuvem.e-cel { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .in-nuvem-p { animation: none; opacity: var(--pico); transform: translate(-50%, -50%); }
}
html.sem-movimento .in-nuvem-p {
  animation: none !important; opacity: var(--pico) !important;
  transform: translate(-50%, -50%) !important;
}
/* O conteudo da entrada inteiro fica ACIMA da nuvem. */
.in-portal-in { position: relative; z-index: 1; }


/* ── esquerda: coroa, nome, botao, Instagram ───────────────────────────────*/
.in-portal-esq { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 3vw, 2rem); }
/* ══ O NOME DENTRO DA COROA (2026-08-29) ══════════════════════════════════
   ★ A montagem é a MESMA do legadogrego (`.hm-coroa` no site.css de lá), que
   já resolveu este problema e já foi corrigida duas vezes pelo autor. Aqui ela
   é copiada, não reinventada:
     · o <h1> é o PALCO — `position: relative` e folga igual em cima e embaixo;
     · a coroa entra ABSOLUTA e centrada, atrás (z-index 0);
     · o nome fica NO FLUXO, por cima (z-index 1).

   ⚠⚠ E ISTO NÃO É O ARRANJO DE 28/08, que quebrou. Lá o <h1> tinha a altura do
   SVG, `line-height: 0`, e o nome flutuava ABSOLUTO dentro dele — no dia em que
   a coroa saiu, sobrou uma caixa de altura ZERO com o texto solto por cima.
   Aqui quem dá altura ao bloco é o NOME mais a folga; a coroa não sustenta
   nada. Tirar a coroa de novo não desmancha o desenho.

   ⚠ TUDO EM `em`, e o `em` é o do próprio <h1>. Um único `font-size` governa o
   nome E o tamanho da coroa, então os dois nunca saem de proporção — que é como
   o nome espremido dentro de uma moldura pequena aconteceu da primeira vez.

   ⚠⚠ E OS NÚMEROS ABAIXO SÃO MEDIDOS NO DESENHO, não escolhidos no olho. O SVG
   foi rasterizado a 800px e varrido pixel a pixel:
     · o VÃO livre é 80,5% da largura da coroa (ela é aberta nas laterais), e o
       nome ocupa ~6,2em dentro dele;
     · a TINTA preenche o viewBox inteiro (0..721 de 722), então o meio do
       desenho é 50% da altura — nem mais nem menos.

   ⚠ EU ERREI ISTO UMA VEZ, e vale registrar por quê. Primeiro centrei o nome no
   meio do VÃO (40,4% da altura), que é onde a coroa é mais larga. É uma medida
   verdadeira, mas responde a outra pergunta: "onde cabe mais texto", e não
   "onde é o meio". O autor olhou e disse: *"Abaixa mais o nome VALETIUS dentro
   da coroa. Ele tem que ficar bem no meio dela"*. O meio de uma moldura é o
   meio dela, e o olho de quem vê não sabe onde ficava o vão mais largo.

   A conta, com H = altura da coroa e n = 1em de linha do nome:
     largura da coroa .. 9,2em · H = 9,2 x .9029 = 8,31em
     folga igual dos dois lados = (H − n) / 2 = 3,65em

   ⚠⚠ E AÍ ENTRA UMA CORREÇÃO ÓPTICA DE .167em, que é MEDIDA e não estimada.
   Centrar a CAIXA DA LINHA não centra a LETRA: com `line-height: 1` a caixa
   reserva espaço para os descendentes (o "g", o "p"), e VALETIUS é caixa alta —
   não usa nenhum. Medição na tela, desenhando o próprio texto num canvas e
   procurando o primeiro e o último pixel de tinta: com folga igual dos dois
   lados, o centro da LETRA cai 3,00px ACIMA do centro da coroa num corpo de
   18px. 3/18 = .167em, e como está em `em` vale em qualquer tamanho.
     padding-top    = 3,65 + .167 = 3,82em
     padding-bottom = 3,65 − .167 = 3,48em
   A soma continua fechando a altura da coroa (3,82 + 1 + 3,48 = 8,30em), então
   ela nunca estoura para fora do <h1> — e a trava da seção 35 confere essa soma
   justamente para ninguém mexer num dos três números sozinho. */
.in-brasao {
  position: relative; margin: 0; width: 100%; line-height: 1;
  /* ★ MENOR, a pedido do autor (*"o instagram e o 'VALETIUS' menor"*).
     Era clamp(20px, 6.4vw, 62px); o teto caiu de 62 para 38.
     ⚠ O PISO SUBIU DE 15 PARA 18px depois que ele viu no celular (*"aumenta um
     pouco o Valetius"*). O piso é quem manda até ~580px de tela, porque 3,1vw
     só passa de 18 a partir daí — mexer no teto não muda nada no celular. */
  font-size: clamp(18px, 3.1vw, 38px);
  padding-top: 3.82em; padding-bottom: 3.48em;
}
/* A COROA — o desenho do acervo do autor (ver `src/louro.mjs`). */
.in-louros {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9.2em; z-index: 0; pointer-events: none; line-height: 0;
}
.in-louros svg { display: block; width: 100%; height: auto; }
/* ⚠ A TINTA VEM DAQUI, não do arquivo. Os paths trazem o laranja do Wix
   (#FFB030) como ATRIBUTO, e atributo de apresentação perde para regra CSS.
   É o mesmo caminho do legadogrego, e é o que deixa o desenho ser copiado sem
   tocar numa vírgula dele. */
.in-louros svg path { fill: currentColor; }
.in-brasao-nome {
  position: relative; z-index: 1;
  display: block; text-align: center;
  font-family: var(--letreiro), var(--display); line-height: 1;
  font-size: 1em; letter-spacing: .06em;
  color: #FDF3EE; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 40, 40, .55), 0 2px 0 rgba(0, 0, 0, .5);
}
/* ⚠⚠ O BOTÃO "IMPORTANTE!" SAIU DA PÁGINA em 2026-08-29 (*"o botao pode sumir
   'IMPORTANTE'"*) e as regras dele saíram junto. Ele era um link de SEO para
   /estreladocaos; quem faz esse papel agora é o primeiro cartão de "Os
   trabalhos", e a trava da seção 4 continua verde por causa dele. */
.in-insta {
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  color: #E86A6A; text-decoration: none; min-width: 44px; min-height: 44px;
  justify-content: center; transition: color .2s ease, transform .2s ease;
}
/* ★ MENOR também (mesmo pedido). Era 34px fixo; agora acompanha a largura e
   para em 26. ⚠ O ALVO DE DEDO NÃO ENCOLHEU: o `min-width`/`min-height` de
   44px acima é do LINK, não do ícone — diminuir o desenho não diminui a área
   de toque, e é por isso que os 44px moram lá e não aqui. */
.in-insta svg { width: clamp(20px, 4.4vw, 26px); height: auto; display: block; }
/* ⚠ O RÓTULO PAROU EM 10px, e não desce mais. "Menor" foi pedido para o ÍCONE
   e para o nome; o rótulo já era 11px. A primeira versão deste ajuste o levava
   a 9px no celular — MEDIDO, não estimado — e 9px em caixa alta com tracking é
   abaixo do que se lê. Quem encolheu de verdade foi o desenho: 34px → 20px. */
/* ⚠ AS REGRAS DO ROTULO `.in-insta-rot` SAIRAM em 2026-08-30 junto com o
   texto (*"remova o @valetius do botao do instagram"*). A medida que elas
   guardavam continua valendo se algum dia voltar um rotulo ali: 10px foi o
   PISO — a versao anterior deste ajuste desceu para 9px no celular e 9px em
   caixa alta com entreletra fica abaixo do que se le. */
.in-insta:hover, .in-insta:focus-visible { color: var(--ouro-claro); transform: translateY(-2px); }

/* ★ NO CELULAR O BRASÃO DESCE UM POUCO (autor, 2026-08-29: *"No celular só
   coloca um pouquinho mais para baixo e aumenta um pouco o Valetius"*).

   ⚠ A FOLGA VAI NA COLUNA, e não num `position: relative; top:`. A coluna é
   centrada pelo grid (`align-items: center`), então folga no topo dela desce o
   conteúdo pela METADE do valor — 52px de padding = 26px de descida, medidos.
   A vantagem sobre o deslocamento visual é que aqui nada sai do lugar por cima
   de nada: o layout continua sabendo onde as peças estão.

   ⚠ E ISSO NÃO ESTICA A SEÇÃO. A altura da linha é a da coluna DIREITA (339px
   a 375, contra 213 da esquerda); a esquerda vai a 265 com a folga e continua
   sendo a menor das duas. Se um dia ela passar a direita, a entrada cresce —
   é o único jeito de isto quebrar, e é visível na hora. */
@media (max-width: 759px) {
  .in-portal-esq { padding-top: 52px; }
}

/* ── direita: o risco, a fala, o Krigashi, o floco ─────────────────────────*/
.in-portal-dir {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(.8rem, 2.5vw, 1.6rem);
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(.5rem, 3vw, 2rem);
  min-height: clamp(240px, 42vw, 400px);
}
/* ★ O RISCO VERMELHO DO PRINT — EM PÉ, SEMPRE.
   ⚠ Ele deitava no celular (virava uma linha horizontal em cima) porque ali as
   colunas empilhavam e um risco vertical no meio de uma pilha não separa nada.
   Com as duas colunas lado a lado em qualquer largura, ele volta a ser o que é
   no print do autor: a divisa entre o nome e o personagem. */
.in-portal-dir::before {
  content: ""; position: absolute; background: #C21212;
  box-shadow: 0 0 16px rgba(255, 40, 40, .5);
  left: 0; top: 0; width: 3px; height: 100%;
}
.in-fala {
  margin: 0; max-width: 30ch; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14px, 2.4vw, 18px); line-height: 1.5; color: #F07B7B;
}
/* ⚠ MASCARA, nao <img>: o desenho e preto e chapado no arquivo; pintado pela
   mascara ele toma a cor da pele, do mesmo jeito que o botao "voltar ao topo"
   ja faz com este mesmo arquivo. Trocar por <img> devolveria um borrao preto
   em cima do fundo escuro. */
/* ⚠⚠ ERA UMA MASCARA ATE 29/08/2026 — `background: currentColor` com o PNG em
   `mask`, ou seja, a silhueta pintada de UMA cor. Com o desenho em traco fino
   aquilo era o efeito; com o KRIGASHIBIG (colorido: roupao preto, taca de vinho,
   pantufas rosa) seria jogar a arte fora e deixar uma mancha chapada.
   Agora e `<img>`, e o `img()` do template ja escreve width/height. */
.in-krigashi {
  /* ⚠ RELATIVO A COLUNA, nao a tela: com as duas colunas lado a lado no
     celular, um `52vw` mede mais que a coluna inteira e o gato vaza por baixo
     do risco vermelho. */
  width: min(100%, 300px);
  height: auto;
  display: block;
  margin-inline: auto;
  /* A sombra segue o RECORTE da figura (drop-shadow, nao box-shadow): o gato
     tem fundo transparente, e box-shadow desenharia a sombra de um retangulo. */
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .22));
}
/* ⚠ AS REGRAS DO FLOCO SAIRAM EM 2026-08-29 junto com o desenho (*"O floco de
   neve pode sair ta"*). Elas guardavam uma medida cara: o floco batia no
   TRILHO DE ABAS, e o recuo certo nao era o do ponto de 44px, era o do ROTULO
   que abre ao lado dele (~130px da borda). Se algum dia entrar outro enfeite
   naquele canto, e essa a conta que ele tem de respeitar. */

/* ── a foto e o nome desceram para o bloco da biografia ────────────────────*/
.in-foto { margin: 0 0 1.4rem; float: right; width: min(38vw, 190px); margin-left: 1.4rem; }
.in-foto img {
  width: 100%; height: auto; display: block;
  border-radius: 999px; border: 1px solid var(--border2);
  box-shadow: 0 0 40px rgba(230, 185, 74, .10);
  aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%;
}
.in-foto-leg {
  margin: .6rem 0 0; text-align: center; font-family: var(--sans);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
}
.in-foto-leg a { color: var(--t3); }
.in-foto-leg a:hover { color: var(--accent); }
@media (max-width: 560px) { .in-foto { float: none; margin: 0 auto 1.4rem; width: min(56vw, 190px); } }

/* ── O TEXTO DELE ──────────────────────────────────────────────────────────*/
.in-sobre p {
  font-family: var(--serif); color: var(--t2);
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.75; margin: 0 0 1rem;
}
.in-sobre a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.in-sobre a:hover { color: var(--ouro-claro); }

/* ── OS TRABALHOS ──────────────────────────────────────────────────────────*/
.in-trabalhos { padding-bottom: clamp(2.5rem, 7vw, 5rem); }
.in-grade {
  display: grid; gap: clamp(.9rem, 2.4vw, 1.4rem);
  grid-template-columns: 1fr; margin-top: clamp(1.4rem, 4vw, 2.4rem);
}
/* ⚠ `auto-fit` no lugar de `1fr 1fr` (28/08, quando os cartões passaram de 3
   para 4): com duas colunas fixas, os TRÊS cartões de capa davam 2 + 1, e o
   terceiro ficava sozinho numa linha, esticado, com um buraco do lado. Com
   `auto-fit` a linha decide quantos cabem — três a partir de ~800px de
   conteúdo, dois abaixo disso — e nunca sobra vão. */
/* ★★ 2026-09-09 — VOLTOU A SER DUAS COLUNAS, e o motivo é o oposto do de cima.
   O `auto-fit` foi posto quando havia TRÊS cartões de largura normal (app,
   acervo, registros): ele deixava a linha decidir quantos cabiam. Com o app
   promovido a faixa da linha inteira, sobraram DOIS — e aí o `auto-fit` fez o
   estrago que ele existia para evitar: a 1440px ele abre QUATRO trilhos de
   228px, os dois cartões ocupam os dois primeiros e o resto da linha fica
   vazio. Medido no print (`_prints/marca-desk/02-trabalhos.png`): dois cartões
   de 265px e 700px de buraco à direita.
   ⚠ Trilho vazio de `auto-fit` só some quando NADA o ocupa; ele não estica quem
   ficou. Com duas colunas fixas, os dois dividem a linha inteira. */
@media (min-width: 760px) {
  .in-grade { grid-template-columns: 1fr 1fr; }
}

/* ★ A MOLDURA DOURADA (autor, 2026-08-30): *"quero uma moldura dourada ao redor
   dos cards, e «Livro, acervo, aplicativo» na mesma cor também, desse dourado"*.
   Antes a borda era `--border` — ouro a 10% de opacidade, que é o mesmo que
   borda nenhuma: nos três cartões de capa não se via linha alguma, e a única
   que aparecia no print era a VERMELHA do `:hover`, no cartão sob o mouse.

   ⚠⚠ E O OURO NÃO PODE SER `var(--ouro-fundo)` DENTRO DA PELE CLARA. Lá o ouro
   é reescrito para o ouro DE PAPEL (#8A6412), que é o certo sobre a folha e
   **some sobre o preto do cartão** — 2,6:1, ilegível. É a mesma armadilha que
   já apagou o `--gelo` e o `--ciano` daqui (a nota está no bloco da pele
   clara, mais abaixo). Por isso o ouro do cartão mora em variável PRÓPRIA,
   resolvida uma vez por pele: quem mexer troca um valor, e não sai caçando
   hexadecimal solto pelo arquivo.

   Medido sobre o preto do cartão (#17130C): o selo em #D4A321 dá **7,98:1** —
   bem acima do piso de 4,5:1, e ele é maiúscula de 11px com entreletra, que é
   o tamanho onde folga de contraste deixa de ser luxo. */
/* ★★ 2026-08-30, segunda passada — o autor olhou o print e disse: *"aumente
   consideravelmente a borda DOURADA ao redor dos cards e faça elas FICAREM,
   não só com o mouse por cima. Tá invisível praticamente."*

   O que estava errado tinha DUAS causas somadas, e é por isso que a moldura
   «só aparecia no hover»:
   1. **1px** — na tela do autor (1920×1080, e o print sai reduzido) um fio de
      um pixel a 62% de opacidade some. Agora são **2px**, e a espessura é o
      que se vê primeiro: dobra a linha e ela existe parada.
   2. **A opacidade diluía o ouro contra o preto do cartão.** `rgba(...,.52)`
      sobre #17130C não é «ouro fraco», é ouro puxado para marrom. O fio agora
      é o ouro CHEIO; quem varia entre parado e aceso é o BRILHO, não a cor.
   ⚠ E o halo dourado passou a existir PARADO (`box-shadow` no estado normal),
   porque era ele — só no `:hover` — que dava a impressão de que a moldura era
   um efeito do mouse. Passar o mouse agora só aumenta o que já está lá. */
.in-card {
  --card-ouro: var(--ouro-fundo);
  --card-fio: #E6B94A;
  --card-fio-vivo: #FFD86A;

  display: flex; gap: 1.1rem; align-items: center; text-decoration: none;
  padding: 1.1rem 1.2rem; border: 4px solid var(--card-fio);
  border-radius: 4px; background: var(--bg4);
  box-shadow: 0 0 0 1px rgba(230, 185, 74, .18), 0 0 18px rgba(230, 185, 74, .10);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.in-card:hover {
  border-color: var(--card-fio-vivo); transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 216, 106, .35), 0 0 32px rgba(230, 185, 74, .28);
}
/* ★ O PRIMEIRO CARTÃO OCUPA A LINHA INTEIRA: é o livro, é o que vende, e é o
   link interno que sustenta a mudança de endereço da landing no Google. */
@media (min-width: 760px) { .in-card.e-arte { grid-column: 1 / -1; } }
.in-card-arte { margin: 0; flex: 0 0 auto; width: clamp(78px, 22vw, 132px); }
/* ── O CARTÃO DE MARCA (autor, 09/09: *"um card menor acerca do theautor.com,
   e em primeiro lugar"*) ────────────────────────────────────────────────────
   Mesmo esqueleto do cartão do livro — figura à esquerda, texto à direita,
   linha inteira —, mas com a figura pequena: é o feitio mais BAIXO da seção, e
   é essa altura que deixa ele passar na frente dos livros sem empurrá-los para
   fora da primeira tela.
   ⚠ 96 px NÃO É CHUTE: é o tamanho em que o símbolo (uma figura só, ouro sobre
   preto) ainda se lê, e é ~1/3 da capa do livro logo abaixo — a diferença de
   escala é o que diz, sem escrever, que ali é a marca e aqui é o produto.
   ⚠ O ARQUIVO TEM 384 px, quatro vezes o alvo: telas densas não o borram. */
@media (min-width: 760px) { .in-card.e-marca { grid-column: 1 / -1; } }
.in-card-marca { margin: 0; flex: 0 0 auto; width: clamp(64px, 18vw, 96px); }
.in-card-marca img {
  width: 100%; height: auto; display: block; border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
.in-card-arte img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
/* ── O CARTÃO DE CAPA (autor, 28/08: *"a home tá extremamente pobre!"*) ────
   Antes só o livro tinha arte e os outros três eram caixas de texto em fila.
   Aqui a imagem é deitada, em cima, e o texto embaixo — vitrine.
   ⚠ O PADDING SAI DO CARTÃO e vai para o texto: com padding no cartão, a capa
   ficava flutuando numa moldura em vez de encostar na borda, e o cartão
   parecia uma foto colada dentro de uma caixa.
   ⚠ `aspect-ratio` + `object-fit:cover` — NUNCA `height` solta. As três capas
   têm proporções diferentes (o app é 16:9, a ânfora é quase quadrada, a
   ilustração é em pé); sem recorte elas fariam três cartões de alturas
   diferentes lado a lado. E foi `max-height` com `width:auto` numa <img>
   dentro de <picture> que já colapsou uma foto para 2x2px neste site. */
.in-card.e-capa {
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden;
}
.in-card-capa { margin: 0; display: block; }
.in-card-capa picture { display: block; }
.in-card-capa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%;
  border-bottom: 1px solid var(--border);
  transition: transform .45s ease;
}
.in-card.e-capa .in-card-txt { padding: 1rem 1.15rem 1.15rem; }
/* o zoom leve na capa é o único movimento do cartão — o resto (subir 2px,
   brilho na borda) já vem do `.in-card:hover` comum. */
.in-card.e-capa:hover .in-card-capa img,
.in-card.e-capa:focus-visible .in-card-capa img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .in-card-capa img { transition: none; } }

.in-card-txt { flex: 1 1 auto; }
/* ⚠ O SELO LÊ `--card-ouro`, que quem define é o `.in-card` acima — em cada
   pele. Não repetir a cor aqui: duas fontes para o mesmo ouro é como as duas
   listas da rádio do site irmão desandaram. */
.in-card-selo {
  margin: 0 0 .25rem; font-family: var(--sans); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--card-ouro);
}
.in-card-titulo {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 3.4vw, 26px); color: var(--ouro-claro); line-height: 1.15;
}
.in-card-corpo {
  margin: .45rem 0 0; font-family: var(--serif); color: var(--t2);
  font-size: clamp(14px, 2vw, 16px); line-height: 1.6;
}
.in-card-acao {
  margin: .7rem 0 0; font-family: var(--sans); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gelo);
}
.in-card:hover .in-card-acao { color: var(--ciano); }

/* ⚠ ALVO DE DEDO: o cartão inteiro é o link, então a caixa é o alvo — e ela
   passa dos 44px em qualquer largura. Não há link pequeno solto nesta página. */

/* ═══════════════════════════════════════════════════════════════════════════
   A ENTRADA SOBRE PAPEL — `body.pele-clara` (2026-08-29)
   ═══════════════════════════════════════════════════════════════════════════

   ★ O portal tem FUNDO PRÓPRIO (o degradê vermelho-escuro do print do autor),
   e fundo próprio não obedece ao `--bg0` do papel: virar a pele do site deixava
   a home branca da metade para baixo e vermelho-escura em cima, com uma emenda
   dura no meio. Aqui ele é vestido de papel — mantendo o vermelho, que é a cor
   da casa, como LUZ e não como massa.

   ⚠ E A TINTA VIRA JUNTO. O nome era `#FDF3EE` (quase branco) com brilho
   vermelho: escolhido para brilhar sobre vermelho-escuro. Sobre papel ele
   sumiria — não "ficaria fraco": sumiria, contraste 1.1:1. Toda cor fixa desta
   entrada é reescrita aqui, uma a uma.
   ⚠ O floco NÃO está nesta lista de propósito: ele usa `var(--gelo)`, que a
   pele clara já escurece sozinha. Cor que sai de token acerta sem ajuda. */

/* ⚠⚠ O FUNDO DA ENTRADA É TRANSLÚCIDO — e isso é o pedido, não sutileza de
   desenho. O autor (2026-08-29): *"o fundo da primeira sessão, onde ta essas
   coisas, também tem que ter constelações"*.

   O céu JÁ ESTAVA LÁ e JÁ ERA VERMELHO: `#sky` é um canvas `position:fixed`
   que cobre a janela inteira, atrás do `main`, e na pele clara ele lê
   `--ceu-rgb: 255 0 0`. Quem o escondia era esta regra: o `linear-gradient`
   daqui era de cores CHEIAS, e fundo opaco em cima de canvas é canvas apagado.
   Medido antes de mexer: o canvas existia, media 1425x900 e tinha pixel aceso —
   ninguém via um só, porque o portal pintava por cima.

   ⚠ POR QUE UM VÉU, E NÃO FUNDO NENHUM: sem véu o céu vermelho encosta direto
   nas letras, e a fala em itálico e a legenda do Instagram perdem contraste
   justo onde passa uma constelação. O véu de papel a ~.62 deixa o desenho
   aparecer e mantém a leitura firme. */
body.pele-clara .in-portal {
  background:
    radial-gradient(115% 95% at 76% 42%, rgba(194, 18, 18, .10), transparent 62%),
    radial-gradient(85% 75% at 10% 26%, rgba(194, 18, 18, .07), transparent 72%),
    linear-gradient(180deg, rgba(247, 239, 233, .62) 0%, rgba(251, 247, 242, .58) 62%,
                            rgba(251, 249, 245, .74) 100%);
}

/* ★★ VERMELHO — E É O `--rubro`, O MESMO DE "OS TRABALHOS".
   Ele pediu assim, apontando o título da seção de baixo: *"Eu queria que o
   Valetius e o louro tivessem a mesma cor de vermelho que esse aqui"*. Medido
   antes de trocar: `.w-titulo-rubro` é `var(--rubro)` = #FF0000 cheio.

   ⚠ EU HAVIA ESCOLHIDO #C21212 (5,9:1 sobre o papel, contra 3,8:1 do #FF0000)
   e ele viu as duas na tela e ficou com a dele. É a decisão certa: VALETIUS
   dentro de uma coroa é a MARCA, e marca não responde ao piso de contraste de
   texto corrido — responde a ser reconhecível. E a marca é dele.

   ⚠ POR ISSO SAI DO TOKEN, e não do literal: se um dia o rubro da casa mudar,
   o nome, o louro e "Os trabalhos" mudam juntos. Era exatamente isso que ele
   estava pedindo — que as três coisas sejam a MESMA cor, não três cores
   parecidas que alguém tem de lembrar de sincronizar. */
body.pele-clara .in-brasao-nome {
  color: var(--rubro);
  /* ⚠ SEM BRILHO. `text-shadow` de luz vermelha sobre papel não brilha: borra.
     O que dá peso ao nome aqui é o tamanho e a cor cheia, não o halo. */
  text-shadow: none;
}

/* A COROA — a MESMA tinta do nome, mais rala.
   ⚠ A OPACIDADE É LIÇÃO DO LEGADOGREGO, não gosto meu: lá a coroa entrou cheia
   e o autor mandou baixar (*"diminuir a opacidade dela"*), porque o desenho
   pesava mais que o título que ele deveria emoldurar.
   ⚠ E .7 fica MUITO acima do piso de 0,15 em que a trava do motor de movimento
   considera um elemento apagado — enfeite ralo continua no ar. */
body.pele-clara .in-louros { color: var(--rubro); opacity: .7; }

/* ══ OS CARTÕES EM PRETO (autor, 2026-08-29) ══════════════════════════════
   ★ O pedido: *"esses cards, use seus instintos de designer para alterar as
   cores deles de todos, eu penso que talvez preto pode ficar bom... nao sei"*.
   Ele deu a direção e a decisão; a conta é minha.

   ★ POR QUE PRETO FUNCIONA AQUI, e não é só gosto: a página tem UMA cor de
   fundo (papel) e UM acento (o rubro). Os cartões eram bege sobre bege —
   `--bg4` sobre `--bg0`, seis pontos de diferença — e por isso liam como
   manchas na folha, não como objetos. Em preto eles viram PEÇAS pousadas no
   papel: a vitrine ganha relevo sem inventar uma terceira cor, e as capas, que
   já são escuras, encostam no fundo do cartão em vez de brigar com ele.
   E é a mesma dupla do desenho antigo dele — preto e vermelho sobre claro.

   ⚠ A TINTA É `--t1`, o preto quente do papel (#17130C), NÃO #000. Preto puro
   ao lado de papel morno lê como buraco recortado; o `--t1` é o mesmo tom em
   que a página já escreve. Nada de paleta nova — regra da casa.

   ⚠ E TUDO ISTO MORA DENTRO DE `body.pele-clara`. O `.in-card` padrão (escuro)
   fica intocado. É a lição de 29/08, quando o vermelho do céu foi para o
   `:root` e amanheceu na página do livro: mudança de identidade nasce PRESA à
   página pedida.

   Contrastes sobre o #17130C, medidos: título 17,6:1 · corpo 10,9:1 ·
   selo 5,9:1 · a ação em rubro 4,6:1 (passa o piso de texto normal). */
body.pele-clara .in-card {
  background: var(--t1);
  /* ⚠⚠ AQUI VALE O OURO DO CÉU, NÃO O OURO DO PAPEL. Esta pele reescreve
     `--ouro-fundo` para #8A6412 porque o cartão dela normalmente seria claro —
     mas ESTE cartão é preto, e sobre ele o ouro de papel dá 2,6:1. É a mesma
     razão pela qual a ação aqui deixou de ser `--gelo`/`--ciano` (nota logo
     abaixo): a pele clara escurece a tinta, e o cartão preto é uma ilha dentro
     dela onde a tinta escura não serve. */
  --card-ouro: #D4A321;
  /* ⚠ OURO CHEIO, sem `rgba` (2ª passada de 30/08): sobre o preto do cartão a
     opacidade não «suavizava» o fio, escurecia ele para marrom — foi por isso
     que ele leu como invisível no print. A gradação parado→aceso é o brilho. */
  --card-fio: #D4A321;
  --card-fio-vivo: #F9C950;
  border-color: var(--card-fio);
  /* o anel dourado fica PARADO: era o halo só-no-hover que fazia a moldura
     parecer efeito do mouse. Sobre papel o halo é anel fino, não borrão. */
  box-shadow: 0 0 0 1px rgba(212, 163, 33, .30), 0 10px 30px rgba(23, 19, 12, .10);
}
/* ⚠ O HOVER ERA `--rubro`, e saiu: com a moldura dourada em pé, passar o mouse
   trocava a cor da moldura em vez de acender a que já está lá — o cartão
   parecia mudar de identidade a cada passada. O vermelho da página continua
   onde ele sempre foi o acento: na linha de ação, logo abaixo. */
body.pele-clara .in-card:hover {
  border-color: var(--card-fio-vivo);
  box-shadow: 0 0 0 2px rgba(249, 201, 80, .45), 0 14px 40px rgba(23, 19, 12, .20);
}
/* ⚠ O SELO NÃO TEM REGRA DE COR AQUI, e isso é decisão: ele lê `--card-ouro`,
   que esta pele acabou de redefinir três linhas acima. Uma fonte por ouro. */
body.pele-clara .in-card-titulo { color: var(--bg0); }
body.pele-clara .in-card-corpo { color: rgba(251, 249, 245, .78); }
/* ⚠ A AÇÃO ERA `--gelo`/`--ciano` — azuis ESCURECIDOS para o papel (#0E5C7A e
   #0B6E96). Sobre o cartão preto eles voltam a ser o que eram no fundo escuro:
   quase invisíveis. Aqui a ação é o rubro, que é o acento da página. */
body.pele-clara .in-card-acao { color: var(--rubro); }
body.pele-clara .in-card:hover .in-card-acao { color: #FF7A6E; }
/* a linha que separa a capa do texto, agora clara */
body.pele-clara .in-card-capa img { border-bottom-color: rgba(251, 249, 245, .14); }

/* ★ O CARTÃO SEM TÍTULO — o dos Registros. O selo vira o nome dele.
   ⚠ Sem isto o cartão nasceria com uma linha de 11px onde os vizinhos têm 26,
   e leria como um cartão inacabado ao lado de dois prontos. */
/* ⚠ E ELE NÃO ENTRA NO OURO DOS SELOS. Este «selo» é o NOME do cartão, e o
   ouro é a marca do rótulo pequeno — dourar o título dos Registros o deixaria
   de uma cor que «Estrela do Caos», «AUTOR» e «Legado Grego» não têm. Aqui a
   cor é a dos outros títulos: `--ouro-claro` no escuro, papel na pele clara
   (a regra dela está logo abaixo). */
.in-card.e-sem-titulo .in-card-selo {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 3.4vw, 26px); line-height: 1.15;
  letter-spacing: .01em; text-transform: none; margin: 0;
  color: var(--ouro-claro);
}
body.pele-clara .in-card.e-sem-titulo .in-card-selo { color: var(--bg0); }

body.pele-clara .in-insta { color: #B01010; }
body.pele-clara .in-insta:hover,
body.pele-clara .in-insta:focus-visible { color: #7A0808; }

/* A fala dele: vermelho fechado o bastante para ler em itálico — itálico fino
   em cor clara é a combinação que mais some sobre papel. */
body.pele-clara .in-fala { color: #8E2A2A; }

/* O risco continua vermelho vivo (é a divisa do print), mas o halo de luz sai:
   sobre papel ele vira uma mancha rosa em volta da linha.
   ★ E ELE FICOU MAIS RALO (autor, 2026-08-29: *"quero que diminuia a opacidade
   da listra que separa o krigashi do valetius"*). Sobre o preto do desenho
   original a linha cheia era a divisa; sobre papel, cheia, ela vira a peça mais
   forte da entrada — mais forte que o próprio nome.
   ⚠ .45 e não menos: a trava do motor de movimento (seção 21.7) considera
   apagado o que fica abaixo de 0,15, e uma divisa que não se vê não divide
   nada. Baixar mais é decisão dele, não deriva minha. */
body.pele-clara .in-portal-dir::before { box-shadow: none; opacity: .45; }