@font-face{ font-family:'Archivo'; src:url('../fonts/archivo.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; }




:root{
  --graphite:#202025; --brand-amber:#C05518; --brand-amber-text:#A25408;
  --bg:#F2EFE7; --fg:var(--brand-amber); --amber:var(--graphite); --amber-text:var(--graphite); --accent:var(--graphite);
  --logo-ink:var(--graphite); --logo-sun:var(--brand-amber);   /* a logo não entra na troca de paleta */
  --grot:'Archivo',system-ui,sans-serif;     /* palavras em CAIXA ALTA — estilo "criado" */
  --clash:var(--synapsis);                    /* frases */
  --serif:var(--ivypresto);
  --synapsis:"Synapsis",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ivypresto:"ivypresto-display",Georgia,"Times New Roman",serif;
}
html[data-da-palette="graphite-amber"] body:not([data-screen-label^="Atelier"]){
  --fg:var(--graphite);
  --amber:var(--brand-amber);
  --amber-text:var(--brand-amber-text);
  --accent:var(--brand-amber);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  text-transform:lowercase;   /* caixa-baixa integral — a maiuscula e um segundo alfabeto
     redundante; a hierarquia fica por peso, corpo e posicao na grade. */ background:var(--bg); color:var(--fg); font-family:var(--clash);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
/* nome proprio nao e palavra: e identidade. a caixa-baixa integral
   pararia em "Patric Teixeira" e "Digital Artisan" — a excecao se pede
   por nome, e nunca dentro de um display, que e forma, nao grafia. */
.proprio{text-transform:none}
::selection{background:var(--amber);color:#FCFBF8}
::-moz-selection{background:var(--amber);color:#FCFBF8}
.skip{position:fixed;left:-9999px;top:0;z-index:1000;background:var(--fg);color:var(--bg);padding:8px 16px}
.skip:focus{left:8px;top:8px}

#stage{position:fixed; inset:0; overflow:hidden; z-index:1}
.layer{position:absolute; inset:0}
/* fundo unico: a textura de papel saiu; a grade fica como estrutura sutil */
#grain{display:none}
#grid{z-index:1; pointer-events:none; opacity:.26;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='66'><path d='M33 28v10M28 33h10' stroke='%2315140F' stroke-width='1' stroke-opacity='0.4' fill='none'/></svg>");
  background-size:66px 66px}

/* a interrogação monumental — Unbounded (referência) */
/* a interrogacao nao entra na troca de paleta: ambar sempre, como o
   sol da logo — ela nao esfria em grafite no fim do percurso. */
#qmark{position:absolute; left:0; top:0; z-index:6; line-height:1; color:var(--brand-amber); pointer-events:none;
  transform-origin:0 0; will-change:transform,opacity; user-select:none}
#qmark svg{height:1em; width:auto; display:block; overflow:visible}   /* 1em = baseFs; o motor escala via transform */
#qmark .q-fill{fill:currentColor}

/* o cue mora no campo da primeira pergunta, centrado: o fio de queda cai
   exatamente no eixo da tela, o mesmo do lead que abre a pergunta la em
   cima — a pergunta passa a pender entre duas ancoras no mesmo eixo.
   o -36px e a metade da caixa: quem centraliza e o fio, nao a caixa.
   antes ele ficava colado na interrogacao e morria em p=.04, antes do
   pouso da abertura automatica: ninguem chegava a ve-lo. */
#scrollCue{
  position:absolute; left:calc(50% - 36px); bottom:clamp(16px,4.8vh,48px); z-index:7;
  width:72px; height:120px; color:var(--fg); pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .28s ease; will-change:opacity,transform;
  filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--fg) 10%,transparent));
}
#scrollCue::before{
  content:''; position:absolute; left:50%; top:0; width:2px; height:72px;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--fg) 58%,transparent) 18%, color-mix(in srgb,var(--fg) 32%,transparent) 100%);
  transform:translateX(-50%);
}
#scrollCue::after{
  content:''; position:absolute; left:50%; bottom:0; width:48px; height:32px;
  border:1px solid color-mix(in srgb,var(--fg) 30%,transparent); border-top:0;
  border-radius:0 0 24px 24px; transform:translateX(-50%);
}
#scrollCue .sc-pulse{
  position:absolute; left:50%; top:8px; width:4px; height:32px; border-radius:4px;
  background:color-mix(in srgb,var(--fg) 78%,transparent);
  transform:translateX(-50%); animation:scrollCueDrop 1.55s cubic-bezier(.2,.7,.2,1) infinite;
}
#scrollCue .sc-arrow{
  position:absolute; left:50%; width:16px; height:16px;
  border-right:2px solid color-mix(in srgb,var(--fg) 62%,transparent);
  border-bottom:2px solid color-mix(in srgb,var(--fg) 62%,transparent);
  transform:translateX(-50%) rotate(45deg);
  animation:scrollCueArrow 1.55s cubic-bezier(.2,.7,.2,1) infinite;
}
#scrollCue .sc-arrow-a{bottom:24px}
#scrollCue .sc-arrow-b{bottom:8px; animation-delay:.16s}
#scrollCue .sc-label{
  position:absolute;left:calc(100% + 16px);top:48px;
  font-family:var(--clash);font-weight:600;font-size:12px;letter-spacing:0.037em;text-transform:lowercase;
  color:var(--fg);white-space:nowrap;
}
@keyframes scrollCueArrow{
  0%,100%{opacity:.28; transform:translate(-50%,-4px) rotate(45deg)}
  45%{opacity:.88; transform:translate(-50%,4px) rotate(45deg)}
}
@keyframes scrollCueDrop{
  0%{opacity:0; transform:translate(-50%,0)}
  18%{opacity:.92}
  72%{opacity:.92}
  100%{opacity:0; transform:translate(-50%,48px)}
}

/* lead/frases de apoio — a voz editorial em IvyPresto. o apoio pergunta,
   a palavra monumental responde: serifa contra grotesca e o que separa as
   duas vozes sem precisar de tamanho nem de cor. */
#lead{position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  font-family:var(--serif); font-weight:400;
  /* tinta cheia: a serifa tem haste mais fina que a grotesca e, no mesmo
     tom rebaixado, lia mais clara do que o apoio anterior. */
  color:var(--fg); white-space:nowrap; opacity:0; z-index:5; will-change:opacity}

/* glifos das comparações (posição absoluta) */
#compLayer{position:absolute; inset:0; z-index:4; pointer-events:none}
.g{position:absolute; left:0; top:0; line-height:1; white-space:pre; opacity:0;
  will-change:transform,opacity; transform-origin:0 0}
.g.caps{font-family:var(--grot); font-variation-settings:'wght' 870,'wdth' var(--cw,116); color:var(--fg); text-transform:lowercase}
.g.caps.raw{text-transform:lowercase}   /* exceção: "Digital Artisan" com a caixa exata */
.g.por{font-family:var(--clash); font-weight:600; font-weight:580;
  color:color-mix(in srgb,var(--fg) 50%,transparent)}
.g.dot{border-radius:50%; background:currentColor; color:var(--amber)}   /* ponto âmbar (Digital Artisan.) */
.g.grifo{border-radius:999px; background:currentColor; color:var(--amber); z-index:-1}   /* grifo âmbar ATRÁS das letras (Ç por cima) */
/* camada de construção — a mesma linguagem das cotas do opening (guias, slashes, ticks) */
.g.rig-guide{height:1px; background:currentColor; color:var(--fg); transform-origin:0 50%}
.g.rig-slash{width:1.5px; background:currentColor; color:var(--fg); transform-origin:50% 50%}
.g.rig-tick{width:1.5px; background:currentColor; color:var(--fg)}
.g.rig-uline{background:var(--amber); border-radius:999px}   /* o vão no razão: a matéria partiu */
.g.rig-mnum{font-family:var(--synapsis); color:var(--amber-text); letter-spacing:0.027em}

#portal{
  position:fixed; inset:72px 0 0; z-index:9; overflow-y:auto; overflow-x:hidden;
  --portal-v:0; --portal-line:0; --portal-grid:.06; --portal-field:.72;
  display:grid; background:var(--bg); color:var(--fg);
  content-visibility:hidden; contain-intrinsic-size:auto calc(100vh - 60px);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(22px);
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility .42s;
}
#portal.is-live{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
#portal::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:var(--portal-grid);
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--fg) 10%,transparent) 1px,transparent 1px),
    linear-gradient(0deg,color-mix(in srgb,var(--fg) 8%,transparent) 1px,transparent 1px);
  background-size:12.5vw 100%,100% 18.5vh;
  transform:scaleY(var(--portal-field)); transform-origin:top;
}
#portal::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:color-mix(in srgb,var(--fg) 20%,transparent);
  transform:scaleX(var(--portal-line)); transform-origin:left;
}
.portal-shell{
  position:relative; z-index:1; min-height:calc(100vh - 60px);
  display:grid; grid-template-columns:minmax(190px,.28fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px); padding:clamp(32px,5.4vh,72px) clamp(16px,4.8vw,72px);
  will-change:opacity,transform;
}
.portal-aside{display:flex; flex-direction:column; justify-content:flex-start; gap:clamp(24px,4vh,44px)}
.portal-kicker{
  font-family:var(--clash); font-weight:600; font-size:12px; letter-spacing:0.027em; text-transform:lowercase;
  color:var(--fg); max-width:18ch; line-height:1.5;
}
/* estudo de construcao — a peca de margem de qualquer prancha: mostra de
   ONDE as formas vieram. um quadrado, o circulo inscrito nele, a diagonal
   que da o triangulo e a barra que o atravessa: as quatro do repertorio
   derivadas de um modulo so, com as cotas nos cantos.
   nao e enfeite solto: e a demonstracao da regra que rege o campo ao lado. */
.portal-estudo{
  display:block;width:min(100%,232px);height:auto;overflow:visible;
  color:var(--fg);
}
.portal-estudo .es-fina{fill:none;stroke:currentColor;stroke-width:1;opacity:.42}
.portal-estudo .es-massa{fill:currentColor;opacity:.12}
.portal-estudo .es-barra{fill:var(--accent);opacity:.9}
.portal-estudo .es-cota{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7}

/* a legenda da prancha: toda planta tem uma. e a chave das formas — diz
   qual peca pertence a qual destino antes de o ponteiro revelar, e ocupa a
   coluna da esquerda, que nascia vazia.
   as formas aqui sao as mesmas do campo, em miniatura: mesma familia, so
   que em escala de leitura. */
.portal-legenda{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
  font-family:var(--clash);font-weight:600;font-size:12px;letter-spacing:0.027em;
  text-transform:lowercase;color:var(--fg);
}
.portal-legenda li{display:flex;align-items:center;gap:10px}
.lg-forma{display:block;width:15px;height:15px;background:var(--fg);flex:0 0 auto}
/* o quadrado e a forma nua da legenda: base sem modificador, cantos retos */
.lg-forma--qua{border-radius:0}
.lg-forma--ret{height:9px}
.lg-forma--cir{border-radius:50%}
.lg-forma--tri{clip-path:polygon(50% 0,100% 100%,0 100%)}
.lg-forma--bar{height:9px;border-radius:999px;width:19px}

.portal-meta{
  display:grid; gap:8px; font-family:var(--clash); font-weight:500; font-size:12px; letter-spacing:0.027em;
  text-transform:lowercase; color:var(--fg);
}
.portal-main{display:grid; align-content:start; min-width:0}
/* ── o portal e uma PLANTA, nao uma lista ──────────────────────────────
   cada destino ocupa uma posicao real na prancha e a coordenada ao lado
   reporta essa posicao — o par x,y do rotulo E o left/top da peca, entao
   o numero nunca mente. nada esta alinhado com nada: planta nao e tabela.
   o carro (a mira em cruz) desloca-se ate a baia sob o ponteiro, que e o
   mesmo gesto do cursor tecnico que o site ja usa. */
.portal-planta{
  position:relative;min-height:clamp(560px,72vh,800px);
  border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);
  --carro-x:50%;--carro-y:50%;--carro-op:0;
  /* a prancha ganhou regua nas duas arestas: uma fita de 7px com o passo
     do modulo. e o que faz o campo LER como prancheta antes de ler como
     grade — a coordenada de cada baia passa a ter contra o que medir. */
  background-image:
    repeating-linear-gradient(to right,color-mix(in srgb,var(--fg) 22%,transparent) 0 1px,transparent 1px 66px),
    repeating-linear-gradient(to bottom,color-mix(in srgb,var(--fg) 22%,transparent) 0 1px,transparent 1px 66px);
  background-size:100% 7px,7px 100%;
  background-repeat:no-repeat;
  background-position:0 0,0 0;
}
/* a massa: o disco cheio e os arcos concentricos ancorados no canto.
   sem eles o campo e so uma grade vazia com texto por cima — a massa e
   o contrapeso que faz as quatro baias comporem em vez de flutuarem. */
.pl-massa{position:absolute;inset:0;pointer-events:none;z-index:0}
/* o disco pousa no unico vao livre da prancha — entre o circulo do artesao
   (que acaba em ~32%) e a pilula do manifesto (que comeca em 76% de altura).
   massa nao pode cair em cima de destino: ali ela deixa de ser contrapeso e
   vira borrao sobre a palavra. */
.pl-massa::before{
  content:'';position:absolute;left:46%;top:57%;
  width:clamp(56px,6.4vw,96px);height:clamp(56px,6.4vw,96px);
  border-radius:50%;background:var(--fg);
}
.pl-massa::after{
  content:'';position:absolute;right:0;bottom:0;
  width:min(36%,300px);height:min(42%,280px);
  background:radial-gradient(circle at 100% 100%,
    transparent 0 55px,color-mix(in srgb,var(--fg) 20%,transparent) 55px 56px,
    transparent 56px 111px,color-mix(in srgb,var(--fg) 20%,transparent) 111px 112px,
    transparent 112px 167px,color-mix(in srgb,var(--fg) 20%,transparent) 167px 168px,
    transparent 168px);
}
/* norte: toda planta declara a orientacao. */
.pl-norte{position:absolute;right:16px;top:14px;z-index:0;display:grid;justify-items:center;gap:5px;pointer-events:none}
.pl-norte i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid var(--amber)}
.pl-norte b{font-family:var(--synapsis);font-weight:900;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
/* o eixo da prancha na aresta esquerda: a escala vertical que faltava.
   nao e enfeite — e a regua contra a qual as coordenadas fazem sentido, e
   os tracos sao gerados a partir da posicao real de cada baia, entao nunca
   divergem dela. o vao a esquerda estava vazio porque a planta nascia sem
   o proprio eixo. */
.pl-eixo{position:absolute;left:0;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--fg) 24%,transparent);pointer-events:none}
.pl-eixo i{position:absolute;left:0;width:13px;height:1px;
  background:color-mix(in srgb,var(--fg) 42%,transparent)}
.pl-eixo i::after{
  content:attr(data-y);position:absolute;left:19px;top:50%;transform:translateY(-50%);
  font-family:var(--clash);font-weight:700;font-size:10px;letter-spacing:.06em;
  color:var(--fg);white-space:nowrap;
}
.pl-eixo i.aceso{background:var(--amber);height:2px}
.pl-eixo i.aceso::after{color:var(--amber)}

/* o carro: duas guias que se cruzam na coordenada da baia apontada */
.pl-carro{position:absolute;inset:0;pointer-events:none;opacity:var(--carro-op);
  transition:opacity .3s var(--ease-portal,cubic-bezier(.16,1,.3,1))}
.pl-carro::before,.pl-carro::after{
  content:'';position:absolute;background:var(--amber);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.pl-carro::before{left:0;right:0;height:1px;top:0;transform:translateY(var(--carro-y))}
.pl-carro::after{top:0;bottom:0;width:1px;left:0;transform:translateX(var(--carro-x))}

/* a baia deixou de ser um rotulo solto com uma massa crescendo atras: agora
   e um OBJETO LIMITADO, com a forma do proprio destino desenhada em traco
   permanente. o retangulo e a placa da obra, o triangulo tracejado e o
   experimento ainda em construcao, o circulo e quem constroi, a pilula e a
   posicao. em repouso a forma ja identifica o destino; no apontamento ela
   inverte inteira — papel vira grafite. */
.pl-baia{
  position:absolute;left:var(--x);top:var(--y);z-index:2;
  color:var(--fg);text-decoration:none;background:var(--bg);
  border:1px solid color-mix(in srgb,var(--fg) 34%,transparent);
  font:inherit;text-align:left;cursor:pointer;appearance:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pl-baia:hover,.pl-baia:focus-visible{
  background:var(--graphite);color:var(--bg);border-color:var(--graphite);
}

/* quadrado — servicos. "o quadrado e a base": a pagina comercial e a
   base que sustenta o resto da prancha, e entra com a forma nua do
   repertorio. opaco como as demais placas — pode pousar sobre a grade,
   nunca sobre outra baia. */
.pl-baia--servicos{
  width:min(20%,200px);aspect-ratio:1;
  display:grid;place-content:center;justify-items:center;text-align:center;
  gap:8px;padding:clamp(14px,1.6vw,24px);
}
.pl-baia--servicos .pl-placa{justify-items:center}
.pl-baia--servicos .portal-title{font-size:clamp(16px,1.7vw,25px);line-height:.96}
.pl-baia--servicos .portal-copy{max-width:17ch;font-size:clamp(11px,.8vw,14px);line-height:1.42}

/* retangulo — portfolio */
/* a caixa acompanha o conteudo. com min-height de 270 e space-between
   sobrava um vao morto entre o nome e a descricao — buraco no meio de uma
   placa nao e respiro, e falta de conteudo aparente. */
.pl-baia--portfolio{
  width:min(40%,400px);
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(12px,1.8vh,20px);padding:clamp(18px,2vw,30px);
}
/* triangulo tracejado — atelier.
   AQUI NAO ENTRA clip-path. trocas.js escreve clipPath inline em cada link
   do portal para a varredura de entrada e o zera ao terminar ("o recorte
   SAI", diz o proprio comentario de la) — inline vence a folha, e o
   triangulo era apagado no fim da animacao. Entao quem desenha a forma e o
   poligono do svg: contorno tracejado em repouso, massa cheia no
   apontamento. A caixa do <a> nao pinta nada. */
.pl-baia--atelier{
  width:min(21%,210px);aspect-ratio:1 / .9;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;gap:5px;
  /* padding em px, nao em %: a baia e absoluta, e porcentagem de padding
     resolve contra o bloco container — a PRANCHA. com 9% a caixa de
     199px recebia 85px de folga por lado e sobravam 29px para um titulo
     de 116px, que vazava o triangulo por nowrap. */
  padding:0 clamp(8px,1vw,14px) clamp(10px,1.2vw,18px);
  border:0;background:transparent;
}
.pl-baia--atelier:hover,.pl-baia--atelier:focus-visible{background:transparent}
.pl-tracejado{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pl-tracejado polygon{transition:fill .18s ease,opacity .18s ease;opacity:.55}
.pl-baia--atelier:hover .pl-tracejado polygon,
.pl-baia--atelier:focus-visible .pl-tracejado polygon{fill:var(--graphite);opacity:1}
/* circulo — artesao */
.pl-baia--artesao{
  width:min(30%,290px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;text-align:center;
  gap:9px;padding:clamp(20px,2.4vw,34px);
}
/* pilula — manifesto */
/* a pilula e a peca mais larga e a mais baixa da prancha: e ela que
   define se a composicao cabe. a 76% da altura com 168px de corpo
   sobravam 2px de folga — qualquer arredondamento vazava o campo, e o
   smoke acusava de forma intermitente. sobe para 73% e emagrece: a
   folga passa a ser de dezenas de pixels em qualquer janela. */
.pl-baia--manifesto{
  width:min(54%,540px);min-height:clamp(108px,14svh,148px);border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2vw,32px);padding:clamp(16px,1.8vw,26px) clamp(30px,4vw,64px);
}
/* a placa: o retangulo que o ambar preenche. so a coordenada e o nome
   moram dentro dela — a descricao fica fora, senao a massa cobriria um
   bloco de texto que nem esta visivel em repouso.
   a frente entra a 45 graus, o angulo unico do sistema, e o skew mantem a
   diagonal exata em qualquer altura (escalar em X a deformaria). a peca e
   mais larga que a placa para nao sobrar cunha no fim do curso. */
.pl-placa{position:relative;display:grid;gap:7px;justify-items:start}
.pl-baia--atelier .pl-placa,.pl-baia--artesao .pl-placa{justify-items:center}
.pl-placa>*{position:relative;z-index:2}
/* cada destino tem a SUA forma do repertorio, e ela identifica: o retangulo
   e a placa da obra, o circulo e o experimento que gira, o quadrado e a
   base, o triangulo e a posicao que aponta, a barra de pontas redondas e a
   linha aberta da conversa.
   a forma cresce a partir da coordenada — a marca de registro e a origem da
   escala, entao a peca nasce no ponto que o rotulo anuncia.
   largura, altura e origem vem do js, medidas da propria placa: circulo e
   quadrado precisam de lado igual, e lado igual nao sai de porcentagem
   sobre uma caixa que nao e quadrada. tentei com aspect-ratio e a peca
   absoluta vazia herdou a altura da placa — virou retangulo. */
/* a massa que crescia atras do rotulo saiu de cena: a forma agora e a
   propria silhueta da baia, permanente, e a inversao no apontamento faz o
   trabalho que ela fazia. home-ui.js continua medindo e escrevendo
   --fw/--fh aqui — ninguem le, e nada quebra por isso. */
.pl-forma{display:none}

/* posicoes na prancha — o par de cada baia E a coordenada que ela mostra.
   servicos assume o quadrante superior direito e o triangulo do atelier
   desce para o vao central — os aneis do canto desenham so a ~12% da
   aresta, entao o tracejado pousa em campo limpo. */
.pl-baia--servicos{--x:62%;--y:10%}
.pl-baia--portfolio{--x:12%;--y:8%}
.pl-baia--atelier{--x:63%;--y:42%}
.pl-baia--artesao{--x:12%;--y:48%}
.pl-baia--manifesto{--x:43%;--y:74%}

/* a marca de registro no ponto exato da coordenada: a baia esta pregada ali */
.pl-mira{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;z-index:3}
.pl-mira::before,.pl-mira::after{content:'';position:absolute;background:color-mix(in srgb,var(--fg) 42%,transparent);transition:background .22s}
.pl-mira::before{left:0;right:0;top:50%;height:1px}
.pl-mira::after{top:0;bottom:0;left:50%;width:1px}
.pl-baia:hover .pl-mira::before,.pl-baia:hover .pl-mira::after,
.pl-baia:focus-visible .pl-mira::before,.pl-baia:focus-visible .pl-mira::after{background:var(--amber)}

.pl-coord{
  font-family:var(--synapsis);font-weight:300;font-size:10px;letter-spacing:.14em;
  color:inherit;opacity:.72;
}
.pl-baia:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 70%,transparent);outline-offset:4px}

/* o nome do destino e DISPLAY: caixa-alta em Synapsis 900. e a unica
   excecao a caixa-baixa do site, e ela se pede aqui por nome — no display
   a maiuscula nao repete o alfabeto, ela desenha o bloco. */
.portal-title{
  font-family:var(--synapsis);font-weight:900;font-size:clamp(24px,2.9vw,46px);
  line-height:.94;letter-spacing:-.006em;text-transform:uppercase;white-space:nowrap;
}
.pl-baia--portfolio .portal-title{font-size:clamp(26px,3vw,48px)}
.pl-baia--atelier .portal-title{font-size:clamp(18px,2vw,30px);line-height:.96}
.pl-baia--artesao .portal-title{font-size:clamp(22px,2.4vw,36px);line-height:.96}
/* a descricao deixou de depender do apontamento. escondida em repouso ela
   obrigava a varrer a planta com o ponteiro para saber o que cada destino
   era — a planta anunciava posicao e escondia sentido. */
.portal-copy{
  font-family:var(--synapsis);font-weight:400;font-size:clamp(13px,.94vw,17px);
  line-height:1.5;color:inherit;max-width:32ch;text-wrap:pretty;
}
.pl-baia--artesao .portal-copy{max-width:22ch;font-size:clamp(12px,.86vw,15px);line-height:1.44}
.pl-baia--atelier .portal-copy{display:none}
.pl-baia--manifesto .portal-copy{display:none}
/* a pilula e larga e o nome ocupa so a esquerda: a seta fecha a peca na
   outra ponta, em vez de deixar meia forma vazia. */
.pl-baia--manifesto::after{
  content:'→';font-family:var(--synapsis);font-weight:400;
  font-size:clamp(18px,1.8vw,28px);color:inherit;flex:0 0 auto;
}

@media (prefers-reduced-motion:reduce){
  .pl-carro::before,.pl-carro::after,.portal-title,.portal-copy{transition:none}
}
/* na estreita a planta nao existe: sem largura, posicao absoluta vira
   colisao de nomes monumentais. vira pilha, a coordenada continua ao lado
   de cada destino (ela e verdade sobre a prancha, nao sobre a tela) e a
   descricao fica sempre visivel, ja que nao ha ponteiro para revelar. */
@media (max-width:900px){
  .portal-planta{min-height:0;display:grid;gap:clamp(20px,5vw,32px);padding:clamp(20px,5vw,32px) 0}
  .pl-carro,.pl-eixo,.pl-massa{display:none}
  /* no estreito a planta vira lista: a FORMA se dissolve por inteiro —
     largura, proporcao, borda, fundo e alinhamento voltam ao fluxo. sem
     isso cada baia continuava um objeto de 20-40% da tela com titulo de
     9vw dentro, e a prancha empilhava miniaturas vazando texto. */
  .pl-baia{
    position:static;margin:0;padding:0;
    width:auto;min-height:0;aspect-ratio:auto;border:0;border-radius:0;
    background:transparent;display:grid;gap:8px;place-content:start;justify-items:start;text-align:left;
  }
  .pl-baia:hover,.pl-baia:focus-visible{background:transparent;color:var(--fg)}
  .pl-baia .pl-placa{padding:0;overflow:visible;justify-items:start}
  .pl-forma{display:none}
  .pl-mira{display:none}
  .pl-tracejado{display:none}
  .pl-baia--manifesto::after{content:none}
  .pl-baia .portal-title{font-size:clamp(32px,9vw,52px);white-space:normal}
  .pl-baia .portal-copy{display:block;opacity:1;transform:none;max-width:34ch}
  .pl-coord{color:var(--fg)}
}
/* o contato deixou de ser um destino da planta e virou rodape permanente:
   os tres canais ficam a vista, sem clique para revelar. um canal escondido
   atras de um toggle e um canal a menos. */
.portal-contact{
  border-bottom:1px solid color-mix(in srgb,var(--fg) 18%,transparent);
  padding:clamp(24px,4vh,48px) clamp(4px,1.2vw,16px);
}
.portal-contact-inner{display:block}
.portal-contact-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.portal-contact-link{
  display:flex;align-items:center;min-height:126px;padding:16px 16px;border-right:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  color:inherit;text-decoration:none;transition:background .22s,color .22s;
}
.portal-contact-link:last-child{border-right:0}
.portal-contact-link:hover,.portal-contact-link:focus-visible{background:var(--fg);color:var(--bg);outline:0}
.portal-contact-name{font-family:var(--clash);font-weight:600;font-size:clamp(16px,1.5vw,28px);letter-spacing:.01em;color:currentColor}
.portal-colophon{
  position:relative;overflow:hidden;margin-top:clamp(192px,26vh,288px);
  min-height:clamp(250px,31vh,330px);padding:clamp(32px,4.4vh,48px) 0 clamp(24px,3.4vh,32px);
  border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent);
}
.portal-colophon-kicker{
  display:block;font-family:var(--clash);font-weight:600;
  font-size:12px;letter-spacing:0.027em;text-transform:lowercase;color:color-mix(in srgb,var(--fg) 58%,transparent);
  margin-bottom:clamp(24px,3.5vh,32px);
}
.portal-colophon-author{
  position:absolute;left:min(52vw,640px);right:0;top:clamp(32px,4.4vh,48px);
  max-width:52ch;font-family:var(--clash);font-weight:700;
  font-size:clamp(12px,.95vw,16px);line-height:1.22;letter-spacing:.04em;text-transform:lowercase;
  color:color-mix(in srgb,var(--fg) 78%,transparent);
}
.portal-colophon-mark{display:block;width:48px;height:48px;margin:clamp(32px,4.8vh,48px) 0 clamp(24px,3.2vh,32px)}   /* rodapé: ~20% maior */
.portal-colophon-mark svg{display:block;width:100%;height:100%}
.portal-colophon-statement{
  position:relative;z-index:1;max-width:min(640px,48vw);
  font-family:var(--serif);font-size:clamp(16px,1.28vw,21px);font-style:italic;line-height:1.2;
  color:color-mix(in srgb,var(--fg) 80%,transparent);
}
.portal-colophon-infinity{
  position:absolute;right:clamp(192px,24vw,480px);top:clamp(96px,13vh,144px);
  font-family:var(--grot);font-variation-settings:'wght' 760,'wdth' 98;
  font-size:clamp(90px,13vw,160px);line-height:.7;color:color-mix(in srgb,var(--accent) 20%,transparent);
  pointer-events:none;user-select:none;
}
.portal-footer{
  position:relative;top:-18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,4vw,48px);
  font-family:var(--clash);font-weight:700;font-size:12px;letter-spacing:0.023em;text-transform:lowercase;color:color-mix(in srgb,var(--fg) 74%,transparent);
}

.advance-jump{
  position:fixed;right:32px;bottom:32px;z-index:8;display:inline-flex;align-items:center;gap:16px;
  min-height:46px;padding:0 16px;border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);
  background:color-mix(in srgb,var(--bg) 90%,transparent);color:color-mix(in srgb,var(--fg) 74%,transparent);
  font-family:var(--clash);font-weight:700;font-weight:680;font-size:12px;letter-spacing:0.04em;text-transform:lowercase;
  cursor:pointer;transition:color .22s,background .22s,border-color .22s,transform .22s,opacity .22s;
}
.advance-jump::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--amber) 16%,transparent);
}
.advance-jump::after{content:'↓';font-size:16px;line-height:1;color:currentColor}
.advance-jump:hover,.advance-jump:focus-visible{
  color:var(--bg);background:var(--fg);border-color:var(--fg);transform:translateY(-2px);outline:0;
}
body.portal-live .advance-jump,body.reduced .advance-jump,.no-js .advance-jump{opacity:0;visibility:hidden;pointer-events:none}

#progress{position:fixed; right:16px; top:50%; transform:translateY(-50%); width:2px; height:34vh;
  background:color-mix(in srgb, var(--fg) 16%, transparent); z-index:8; border-radius:2px; transition:opacity .28s}
#progress i{position:absolute; left:0; top:0; width:100%; background:var(--amber); border-radius:2px; height:0%}
body.portal-live #progress{opacity:.18}
@media (pointer:fine){body.js, body.js a, body.js button, body.js #stage{cursor:none}}
.cursor{position:fixed; z-index:260; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0;
  color:var(--fg); transition:opacity .28s ease; mix-blend-mode:multiply}
.cursor.show{opacity:.92}
.cursor-axis,.cursor-ring,.cursor-dot,.cursor-label{position:absolute; left:0; top:0; display:block; pointer-events:none}
.cursor-axis{background:color-mix(in srgb,currentColor 34%,transparent); transform-origin:center; transition:width .2s ease,height .2s ease,background .18s}
.cursor-axis-x{width:72px; height:1px; transform:translate(-50%,-50%)}
.cursor-axis-y{width:1px; height:72px; transform:translate(-50%,-50%)}
.cursor-ring{width:24px; height:24px; border:1px solid color-mix(in srgb,currentColor 58%,transparent);
  transform:translate(-50%,-50%) rotate(45deg); transition:width .2s ease,height .2s ease,border-color .18s,transform .2s ease,background .18s}
.cursor-ring::before,.cursor-ring::after{content:''; position:absolute; background:currentColor; opacity:.55}
.cursor-ring::before{left:50%; top:-7px; width:1px; height:4px; transform:translateX(-50%)}
.cursor-ring::after{right:-7px; top:50%; width:4px; height:1px; transform:translateY(-50%)}
.cursor-dot{width:4px; height:4px; background:currentColor; transform:translate(-50%,-50%); transition:transform .16s ease,background .18s}
.cursor-label{font-family:var(--clash); font-weight:500; font-size:9px; letter-spacing:0.027em; text-transform:lowercase;
  color:var(--fg); transform:translate(16px,13px); white-space:nowrap;
  transition:opacity .18s ease,transform .2s ease; opacity:.88}
.cursor.on-link{color:var(--amber)}
.cursor.on-link .cursor-axis-x{width:96px;background:color-mix(in srgb,currentColor 52%,transparent)}
.cursor.on-link .cursor-axis-y{height:96px;background:color-mix(in srgb,currentColor 52%,transparent)}
.cursor.on-link .cursor-ring{width:48px;height:48px;border-color:currentColor;background:color-mix(in srgb,currentColor 5%,transparent);transform:translate(-50%,-50%) rotate(0deg)}
.cursor.on-link .cursor-dot{transform:translate(-50%,-50%) scale(.55)}
.cursor.on-link .cursor-label{opacity:1;transform:translate(22px,18px)}
.cursor.is-press .cursor-ring{transform:translate(-50%,-50%) rotate(0deg) scale(.82)}
.cursor.is-press .cursor-dot{transform:translate(-50%,-50%) scale(1.8)}
@media (max-width:760px){.cursor{display:none}}

/* ---- topnav ---- */
#topnav{
  position:fixed; top:0; left:0; right:0; z-index:220; isolation:isolate;
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(8px,1.2vw,16px);height:72px; padding:0 32px;
  pointer-events:none;
}
#topnav::after{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--bg);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  z-index:-1; pointer-events:none;
}
.tn-brand,.tn-links,.tn-menu{position:relative; z-index:1; pointer-events:auto}
.tn-brand{
  display:inline-flex; align-items:center; gap:16px; min-width:0;
  font-family:var(--clash); font-weight:600; font-weight:650; font-size:12px;
  letter-spacing:0.047em; text-transform:lowercase; white-space:nowrap;
  color:var(--fg); text-decoration:none;
}
.tn-mark{
  display:block; flex:none; width:48px; height:48px;   /* nav: ~10% maior */
  opacity:.98; filter:contrast(1.12);
}
.tn-mark svg{display:block; width:100%; height:100%}
.tn-wordmark{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; transition:opacity .22s}
.tn-brand:hover .tn-wordmark,.tn-brand:focus-visible .tn-wordmark{opacity:.92}
.tn-brand:focus-visible,.tn-links a:focus-visible,.tn-menu:focus-visible{
  outline:2px solid color-mix(in srgb,var(--fg) 70%,transparent); outline-offset:4px;
}
.da-palette-switch{
  position:relative;z-index:1;pointer-events:auto;flex:none;display:inline-flex;align-items:center;height:32px;
  border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);
  background:color-mix(in srgb,var(--bg) 90%,white 10%);
}
.da-palette-switch:hover{border-color:color-mix(in srgb,var(--fg) 42%,transparent)}
.da-palette-toggle{
  appearance:none;border:0;background:transparent;cursor:pointer;height:100%;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.da-palette-toggle:hover{transform:rotate(180deg)}   /* as bolinhas trocam de lado: prévia da troca */
.da-palette-toggle:focus-visible{outline:2px solid var(--amber-text);outline-offset:3px}
.da-dot{display:block;border-radius:50%;transition:background .22s cubic-bezier(.16,1,.3,1)}
.da-dot--lg{width:16px;height:16px;background:var(--graphite)}   /* predominante do destino */
.da-dot--sm{width:8px;height:8px;background:var(--brand-amber)}        /* detalhe do destino */
html[data-da-palette="graphite-amber"] .da-dot--lg{background:var(--brand-amber)}
html[data-da-palette="graphite-amber"] .da-dot--sm{background:var(--graphite)}
.tn-links{display:flex; gap:clamp(16px,2.2vw,32px); list-style:none; padding:0; margin:0 0 0 auto}
.tn-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--clash); font-weight:700; font-size:clamp(12px,.765vw,16px);
  letter-spacing:0.03em; text-transform:lowercase; white-space:nowrap;
  /* o nav nasce em tinta cheia: rebaixar por padrao deixava a fila inteira
     mais clara que o resto da pagina. o estado atual continua marcado, por
     cor, nao por contraste com os vizinhos. */
  color:var(--fg); text-decoration:none; transition:color .22s;
}
.tn-links a:hover,.tn-links a:focus-visible{color:var(--amber-text)}
.tn-links a[aria-current]{color:var(--amber-text)}
.tn-menu{
  display:none; align-items:center; justify-content:center; gap:8px;
  min-width:96px; height:48px; border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  background:color-mix(in srgb,var(--bg) 90%,transparent); color:var(--fg);
  font-family:var(--clash); font-weight:600; font-weight:650; font-size:12px;
  letter-spacing:0.047em; text-transform:lowercase; cursor:pointer;
}
.tn-menu-bars{position:relative; width:16px; height:8px; display:block}
.tn-menu-bars i{position:absolute; left:0; width:16px; height:1.5px; background:currentColor; transition:transform .22s ease,top .22s ease}
.tn-menu-bars i:first-child{top:1px}
.tn-menu-bars i:last-child{top:8px}
#topnav.is-open .tn-menu-bars i:first-child{top:4px; transform:rotate(34deg)}
#topnav.is-open .tn-menu-bars i:last-child{top:4px; transform:rotate(-34deg)}
/* no-js / reduced: barra estática com borda inferior */
body.reduced #topnav,.no-js #topnav{
  position:sticky; top:0; height:auto; padding:16px 32px;
  background:var(--bg); pointer-events:auto;
  border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
}
body.reduced #topnav::after,.no-js #topnav::after{display:none}
@media (max-width:760px){
  #topnav{padding:0 16px 0 16px; gap:16px; pointer-events:auto}
  .tn-brand{flex:1 1 auto; max-width:calc(100% - 192px); min-height:44px; font-size:12px; letter-spacing:0.033em}
  .tn-mark{width:48px; height:48px}   /* nav: ~10% maior */
  .tn-wordmark{max-width:min(48vw,192px)}
  .da-palette-switch{flex:none;height:32px}
  .da-palette-toggle:hover{transform:none}   /* toque: sem hover-swap; a troca acontece no clique */
  .tn-menu{display:inline-flex; flex:none}
  .tn-links{
    position:fixed; left:16px; right:16px; top:72px; z-index:12;
    display:grid; gap:0; max-width:none; overflow:hidden; scrollbar-width:none;
    background:color-mix(in srgb,var(--bg) 96%,white 4%);
    border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);
    box-shadow:0 18px 42px color-mix(in srgb,var(--fg) 12%,transparent);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  #topnav.is-open .tn-links{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
  .tn-links li{display:block}
  .tn-links a{
    min-height:54px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
    font-size:16px; letter-spacing:0.04em; opacity:.84;
  }
  .tn-links li:last-child a{border-bottom:0}
  .tn-links a::after{content:'+'; font-family:var(--clash); font-size:12px; opacity:.42}
  .tn-links a[aria-current]{opacity:1}
  body.reduced .tn-menu,.no-js .tn-menu{display:none}
  body.reduced .tn-links,.no-js .tn-links{
    position:static; display:flex; gap:16px; max-width:52vw; opacity:1; visibility:visible;
    pointer-events:auto; transform:none; border:0; box-shadow:none; background:transparent;
    overflow-x:auto;
  }
  body.reduced .tn-links a,.no-js .tn-links a{min-height:44px; padding:0; border:0; font-size:12px}
  body.reduced .tn-links a::after,.no-js .tn-links a::after{display:none}
}
@media (max-width:760px){
  .portal-shell{
    display:block; min-height:auto;
    padding:16px 16px 16px;
  }
  .portal-aside{display:block;margin-bottom:16px}
  .portal-main{display:block}
  .portal-kicker{max-width:none; font-size:9px; letter-spacing:0.047em}
  .portal-meta{display:none}
  /* a anatomia do portal antigo (num/arrow em grade de tres colunas)
     morreu com o desenho que a pedia — a baia da planta se desfaz em
     lista no bloco de 900px, e nada aqui deve rearranjá-la. */
  .portal-contact-inner,.portal-footer{grid-template-columns:1fr}
  .portal-colophon{margin-top:120px;min-height:360px;padding:32px 0 32px}
  .portal-colophon-author{position:static;max-width:30ch;font-size:12px;margin-top:32px}
  .portal-colophon-mark{width:48px;height:48px;margin:24px 0}   /* rodapé: ~20% maior */
  .portal-colophon-statement{max-width:100%;font-size:clamp(16px,5.5vw,28px);line-height:1.18}
  .portal-colophon-infinity{right:4px;top:120px;font-size:120px}
  .portal-footer{top:-10px;font-size:12px}
  .portal-contact-actions{grid-template-columns:1fr}
  .portal-contact-link{min-height:96px}
  .portal-contact-name{font-size:12px}
  .advance-jump{right:16px;bottom:16px;min-height:42px;padding:0 16px;font-size:12px}
  /* o rotulo fica ao lado do fio tambem no estreito. embaixo ele encostava
     na pilha do "avancar" e espremia na borda; ao lado sobra folga ate a
     interrogacao e o conjunto continua lendo a partir do eixo. */
  #scrollCue .sc-label{left:calc(100% + 8px);right:auto;top:48px;font-size:9px;text-align:left}
}

.sr-narrative{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* reduced motion / no-js → documento legível */
.trade{font-family:var(--grot)}
body.reduced #stage,.no-js #stage{position:relative;height:auto;overflow:visible;display:block;min-height:0}
body.reduced #grain,body.reduced #grid,body.reduced #progress,body.reduced #scrollCue,body.reduced .cursor,
.no-js #grain,.no-js #grid,.no-js #scroll-track,.no-js #progress,.no-js #scrollCue,.no-js .cursor{display:none}
@media (prefers-reduced-motion:reduce){#scrollCue .sc-pulse,#scrollCue .sc-arrow{animation:none;opacity:.78}}
body.reduced #qmark,.no-js #qmark{position:static;display:block;opacity:1;transform:none;text-align:center;font-size:clamp(4rem,16vw,10rem);margin-bottom:1vh}
body.reduced #compLayer,.no-js #compLayer{position:static;padding:6vh 6vw}
body.reduced #lead,.no-js #lead{position:static;transform:none;opacity:1;white-space:normal;text-align:center;margin:0 auto 4vh;font-size:clamp(1.1rem,3.4vw,1.7rem)}
body.reduced .trade,.no-js .trade{position:static;transform:none;opacity:1;white-space:normal;text-align:center;margin:0 auto 3.4vh;
  font-weight:900;font-size:clamp(1.4rem,6vw,3.4rem);line-height:1.06}
body.reduced .trade .por,.no-js .trade .por{font-family:var(--serif);font-weight:400;font-size:.5em;color:var(--fg)}
body.reduced #portal,.no-js #portal{position:relative;inset:auto;min-height:100vh;opacity:1;visibility:visible;pointer-events:auto;transform:none}
body.reduced #portal,.no-js #portal{content-visibility:visible}
body.reduced .portal-shell,.no-js .portal-shell{min-height:100vh}
#scroll-track{height:26000px;pointer-events:none}

/* Home — infraestrutura visual do opening e do motor cinético.
   Regras estáticas vivem aqui para manter a experiência compatível com CSP estrita. */

#grid{height:134%}
#lead{font-size:clamp(16px,2.1vw,38px)}
.da-palette-reserve{display:block;flex:none;width:48px;height:32px}
.da-palette-switch + .da-palette-reserve{display:none}
@media (max-width:760px){.da-palette-reserve{height:32px}.advance-jump{width:144px}}

.trade-block{margin-top:4vh}
.trade-sup{font-family:var(--serif);font-weight:400;font-size:.4em;color:var(--fg)}

.kin-layer{position:absolute;inset:0}
.kin-sup{
  position:absolute;left:0;top:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.6vw,28px);color:var(--fg);
  white-space:nowrap;opacity:0;line-height:1.2
}
/* enfase na cadeia: italico, nao peso — a Ivy contrasta por desenho */
.kin-sup-strong{color:var(--fg);font-style:italic;font-weight:400}
.kin-guide{
  position:absolute;left:0;top:0;width:96px;height:1px;
  background:color-mix(in srgb,var(--fg) 40%,transparent);transform-origin:0 50%;opacity:0
}
.kin-measure-num{
  position:absolute;left:0;top:0;font-family:var(--synapsis);
  font-size:9px;letter-spacing:0.027em;color:var(--amber-text);opacity:0
}
.kin-echo{
  position:absolute;left:0;top:0;line-height:1;font-family:var(--grot);
  font-variation-settings:'wght' 870,'wdth' 116;color:var(--fg);opacity:0;
  filter:blur(16px);white-space:pre;transform-origin:0 0
}
.kin-sign-logo{
  position:absolute;left:50%;top:26.5vh;transform:translate(-50%,-50%);
  width:clamp(96px,10vw,144px);height:clamp(96px,10vw,144px);opacity:0
}
.kin-sign-logo svg{display:block;width:100%;height:100%}
.kin-ls{fill:none;stroke:#202025;stroke-width:2.25;stroke-linecap:square}
.kin-lf{fill:#202025}
.kin-sign-logo .kin-lf{opacity:0}
.kin-sign-sun{fill:#c05518;transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)}
.kin-sign-dot{position:absolute;left:0;top:0;border-radius:50%;background:var(--amber);opacity:0}
.kin-sign-text{
  position:absolute;left:50%;top:59vh;transform:translate(-50%,0);
  font-family:var(--clash);font-weight:600;font-weight:640;
  font-size:clamp(12px,1.05vw,21px);letter-spacing:0.113em;text-transform:lowercase;
  color:color-mix(in srgb,var(--fg) 78%,transparent);white-space:nowrap;opacity:0
}
.kin-rule{position:absolute;top:65.5vh;width:18vw;height:1px;background:color-mix(in srgb,var(--fg) 30%,transparent);transform:scaleX(0)}
.kin-rule-left{left:calc(50% - 21vw);transform-origin:right}
.kin-rule-right{left:calc(50% + 3vw);transform-origin:left}
.kin-measure{
  position:absolute;left:-9999px;top:-9999px;visibility:hidden;white-space:pre;
  font-size:90px;line-height:1;display:flex;flex-direction:column;align-items:flex-start
}
.kin-measure-row{display:inline-block;flex:none;white-space:pre}
.kin-measure-char{display:inline-block}
.kin-word{position:absolute;inset:0;font-family:'Archivo',system-ui,sans-serif;color:var(--fg);letter-spacing:.01em}
.kin-glyph{position:absolute;left:0;top:0;line-height:1;white-space:pre;opacity:0;transform-origin:50% 60%}
/* o "por" e apoio, entao segue a mesma voz. a familia daqui precisa bater
   com a que o motor usa para MEDIR (measureRow, fam 'serif') — medida e
   desenho em fontes diferentes desalinham a palavra que vem depois. */
.kin-por{position:absolute;left:0;top:0;line-height:1;white-space:pre;opacity:0;font-family:var(--serif);font-weight:400;color:var(--fg)}
.kin-ledger-line{position:absolute;display:flex;gap:8px;align-items:baseline;opacity:0;white-space:pre}
.kin-ledger-num{font-family:var(--synapsis);font-size:9px;letter-spacing:0.027em;color:var(--amber-text)}
.kin-ledger-text{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wght' 640,'wdth' 82;font-size:9px;letter-spacing:0.04em;color:color-mix(in srgb,var(--fg) 55%,transparent)}

/* abertura: a pergunta e desenhada --------------------------------------
   o carregamento e a propria interrogacao da home sendo construida, no
   lugar exato onde ela fica. sem plano escuro (o #111719 era o unico tom
   fora da paleta) e sem voo de entrega: o veu e papel, o traco e ambar, e
   o que foi desenhado permanece — nao ha troca de objeto na virada. */
@keyframes abTraco{to{stroke-dashoffset:0}}
@keyframes abCota{to{opacity:.32}}
@keyframes abSai{to{opacity:0}}
@keyframes abMassa{to{opacity:1}}
#da-opening{position:fixed;inset:0;z-index:420;pointer-events:none;overflow:hidden}
.ab-veu{position:absolute;inset:0;z-index:1;background:var(--bg);opacity:1;transition:opacity 620ms ease}
.ab-veu.is-out{opacity:0}
.ab-marca{position:absolute;z-index:2;color:var(--fg);will-change:opacity}
.ab-marca svg{display:block;width:100%;height:100%;overflow:visible}
/* cota: centro e raio dos dois circulos, a construcao antes da forma */
.ab-cota{fill:none;stroke:currentColor;stroke-width:3;opacity:0;
  animation:abCota 300ms ease forwards,abSai 340ms ease forwards}
/* traco: o contorno corre; some quando a massa assenta */
.ab-traco{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:abTraco 700ms cubic-bezier(.4,0,.2,1) forwards,abSai 300ms ease forwards}
.ab-massa{opacity:0;animation:abMassa 420ms ease forwards}
}

/* controles de formulario nao herdam text-transform: o agente de usuario
   declara none no proprio elemento, e isso vence o valor herdado. */
button,input,select,textarea,[role="button"]{text-transform:inherit}