/* NASH — a assinatura: as peças com que a casa assina o que faz.
   Nasceu em 2026-09-29 de uma referência do Figma (NASH Foundations,
   frame 914:173, "ref"): um cartaz preto com grão de filme, uma luz
   borrada crescendo pela direita, um wordmark no topo com um ícone no
   canto oposto, uma manchete grande em duas linhas, etiquetas entre
   colchetes em mono e uma ficha de rótulo + valor em duas colunas. A ref
   é uma imagem raster; o que está aqui é o mesmo desenho em código, com
   os átomos que o kit já tinha — Archivo, a escada de branco, os degraus
   de tipo, o tempo e as duas curvas — e nada novo em cor ou medida.

   Sete peças, cada uma com variantes e com a resposta à pergunta que
   decide se um movimento existe: o que ele diz a quem vê?

   - .nash-signature     o lockup: a marca (as quatro lajes) + o nome
   - .nash-tag       a etiqueta entre colchetes, [ASSIM]
   - .nash-spec-list          rótulo + valor, em colunas
   - .nash-headline       a manchete, revelada linha a linha
   - .nash-grain-field     o chão: preto, grão de filme e uma luz que deriva
   - .nash-signature-footer  a linha do pé: endereço à esquerda, marca à direita
   - .nash-poster         a composição inteira, no 4:5 da ref

   A revelação é uma só, .nash-signature-reveal: o bloco entra hidden com html.js e
   ganha .is-visivel quando cruza a tela (nash-signature.js). Cada peça
   coreografa as próprias partes a partir daí; sem JS tudo já está lá.
   Lê nash-tokens.css; a marca segue as regras de assets/brand/README.md —
   sem fundo, em currentColor, nunca no accent. */

:root {
  /* A luz do campo deriva como tempo, não como laço: quatro respiros do
     ambiente por travessia. Abaixo disso o olho lê "animação"; acima, o
     movimento some. */
  --nash-motion-loop-drift: calc(var(--nash-motion-loop-ambient) * 4);
  /* Quanto os colchetes viajam ao abrir. Um traço, não um gesto. */
  --nash-signature-bracket-travel: 6px;
}

/* ====================================================================
   A revelação
   ==================================================================== */

/* Estado inicial só com JS (html.js): sem ele, a peça já nasce inteira.
   Quem coloca .is-visivel é nashAssinatura.ligar(); irmãos em fila
   recebem --nash-runtime-order do pai (data-nash-fila) pela posição, como o
   revela do kit. Cada peça declara o próprio estado escondido abaixo,
   sempre atrás de html.js — a regra é uma, os seletores são por peça. */

/* ====================================================================
   .nash-signature — o lockup
   ==================================================================== */

/* A marca ao lado do nome, na linha de base. As lajes são paths inline
   (não <use>): o CSS não atravessa a sombra do <use>, e a coreografia
   precisa tocar cada laje. nashAssinatura.marca() devolve o SVG pronto. */
.nash-signature {
  display: inline-flex;
  align-items: center;
  gap: var(--nash-space-2);
  color: var(--text-forte);
  font-weight: 900;
  font-size: var(--nash-type-size-5);
  letter-spacing: -0.06em; /* o wordmark: −6%, a mesma medida de /design-system */
  line-height: 0.85;
  text-decoration: none;
  white-space: nowrap;
}

/* A marca solta, em qualquer lugar: a altura da linha, em currentColor.
   Dentro do lockup ela ganha a medida do degrau. */
.nash-logo {
  display: inline-block;
  width: auto;
  height: 1em;
  aspect-ratio: 360 / 478;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
  overflow: visible;
  vertical-align: -0.1em;
}

.nash-signature .nash-logo {
  display: block;
  flex: none;
  height: 24px;
  vertical-align: baseline;
}

.nash-signature-name {
  display: block;
  transform: translateY(0.04em); /* ótico: o N tem haste, o nome não */
}

/* O slogan embaixo do nome, só na empilhada. Archivo 500, caixa alta,
   +18% — a regra da marca. */
.nash-signature-tagline {
  display: block;
  font-size: var(--nash-type-size-1);
  font-weight: 500;
  letter-spacing: var(--nash-type-tracking-wide);
  text-transform: uppercase;
  line-height: var(--nash-type-leading-title);
  color: var(--text-mid);
  margin-top: var(--nash-space-1);
}

/* ---------- variantes de arranjo ---------- */
.nash-signature[data-layout='stacked'] {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nash-space-2);
  white-space: normal;
}

.nash-signature[data-content='logo'] .nash-signature-name,
.nash-signature[data-content='logo'] .nash-signature-tagline {
  display: none;
}

/* ---------- variantes de tamanho ----------
   Três degraus, sempre nos degraus de tipo. A marca cresce junto. */
.nash-signature[data-size='small'] {
  font-size: var(--nash-type-size-4);
}
.nash-signature[data-size='small'] .nash-logo {
  height: 18px;
}

.nash-signature[data-size='large'] {
  font-size: var(--nash-type-size-7);
  gap: var(--nash-space-3);
}
.nash-signature[data-size='large'] .nash-logo {
  height: 48px;
}

.nash-signature[data-size='xlarge'] {
  font-size: var(--nash-type-size-9);
  gap: var(--nash-space-4);
}
.nash-signature[data-size='xlarge'] .nash-logo {
  height: 96px;
}
.nash-signature[data-size='xlarge'] .nash-signature-tagline {
  font-size: var(--nash-type-size-3);
}

/* ---------- a chegada: as lajes assentam ----------
   O que diz: a marca é montada, não carimbada. Cada laje desce meio passo
   e assenta na ordem em que se lê o N — 1, 3, 2, 4 —, um degrau entre elas.
   Uma vez, sem laço. */
.nash-signature .laje {
  transition:
    opacity var(--nash-motion-duration-arrive) var(--nash-motion-ease-out),
    transform var(--nash-motion-duration-arrive) var(--nash-motion-ease-spatial);
  transition-delay: calc(var(--nash-runtime-slab, 0) * var(--nash-motion-stagger-step) + var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
  transform-origin: center;
}

.nash-signature .laje-1 { --nash-runtime-slab: 0; }
.nash-signature .laje-3 { --nash-runtime-slab: 1; }
.nash-signature .laje-2 { --nash-runtime-slab: 2; }
.nash-signature .laje-4 { --nash-runtime-slab: 3; }

.nash-signature-name,
.nash-signature-tagline {
  transition:
    opacity var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial),
    transform var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial);
  transition-delay: calc(3 * var(--nash-motion-stagger-step) + var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

.nash-signature-tagline {
  transition-delay: calc(5 * var(--nash-motion-stagger-step) + var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

.nash-signature-reveal:not(.is-visivel) .nash-signature .laje,
html.js .nash-signature.nash-signature-reveal:not(.is-visivel) .laje {
  opacity: 0;
  transform: translateY(-8%);
}

.nash-signature-reveal:not(.is-visivel) .nash-signature-name,
.nash-signature-reveal:not(.is-visivel) .nash-signature-tagline,
html.js .nash-signature.nash-signature-reveal:not(.is-visivel) .nash-signature-name,
html.js .nash-signature.nash-signature-reveal:not(.is-visivel) .nash-signature-tagline {
  opacity: 0;
  transform: translateY(0.35em);
}

/* ---------- o ponteiro: a marca se acomoda ----------
   O que diz: a peça responde. As duas lajes diagonais deslizam um fio
   no sentido da própria diagonal e param — império não se agita, se
   acomoda. Uma vez, 240 ms, a curva de saída. Nada muda de cor. */
.nash-signature:is([href], [tabindex], button):hover .laje-1 {
  transform: translate(1.5%, 1.5%);
  transition: transform var(--nash-motion-duration-glow) var(--nash-motion-ease-out);
}

.nash-signature:is([href], [tabindex], button):hover .laje-4 {
  transform: translate(-1.5%, -1.5%);
  transition: transform var(--nash-motion-duration-glow) var(--nash-motion-ease-out);
}

/* ---------- viva: a marca respira ----------
   O que diz: há alguém em casa. Um halo curto acende e apaga no período
   do ambiente — o mesmo respiro da aura do kit. É o único laço da peça, e
   só existe neste estado; em repouso a marca não emite luz. */
.nash-signature[data-estado='vivo'] .nash-logo {
  animation: nash-signature-reveal-respira var(--nash-motion-loop-ambient) ease-in-out infinite;
}

@keyframes nash-signature-reveal-respira {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 10px var(--accent-glow));
  }
}

/* ====================================================================
   .nash-tag — [ASSIM]
   ==================================================================== */

/* Mono, caixa alta, +18%: o rótulo do kit entre dois colchetes que são
   pseudo-elementos — o texto do HTML é só o texto. */
.nash-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--nash-space-1);
  font-family: var(--font-mono);
  font-size: var(--nash-type-size-1);
  font-weight: 500;
  letter-spacing: var(--nash-type-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-mid);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nash-tag::before,
.nash-tag::after {
  display: inline-block;
  color: var(--text-weak);
  transition:
    opacity var(--nash-motion-duration-state) var(--nash-motion-ease-out),
    transform var(--nash-motion-duration-glow) var(--nash-motion-ease-out),
    color var(--nash-motion-duration-micro) var(--nash-motion-ease-out);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

.nash-tag::before {
  content: '[';
}

.nash-tag::after {
  content: ']';
}

/* O miolo (o texto) é o que esmaece; os colchetes viajam. Um <span>
   dentro é opcional: sem ele, o texto vem direto e só os colchetes
   animam. */
.nash-tag > span {
  transition: opacity var(--nash-motion-duration-state) var(--nash-motion-ease-out);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step) + var(--nash-motion-duration-micro));
}

/* ---------- a chegada: os colchetes abrem ----------
   O que diz: isto é um campo demarcado, e acaba de ser demarcado. Os
   colchetes partem do centro e assentam nas pontas; o texto chega entre
   eles um fio depois. Uma vez. */
.nash-signature-reveal:not(.is-visivel) .nash-tag::before,
html.js .nash-tag.nash-signature-reveal:not(.is-visivel)::before {
  opacity: 0;
  transform: translateX(var(--nash-signature-bracket-travel));
}

.nash-signature-reveal:not(.is-visivel) .nash-tag::after,
html.js .nash-tag.nash-signature-reveal:not(.is-visivel)::after {
  opacity: 0;
  transform: translateX(calc(-1 * var(--nash-signature-bracket-travel)));
}

.nash-signature-reveal:not(.is-visivel) .nash-tag > span,
html.js .nash-tag.nash-signature-reveal:not(.is-visivel) > span {
  opacity: 0;
}

/* ---------- o ponteiro: os colchetes se afastam ----------
   O que diz: a etiqueta é tocável. Dois pixels pra fora e de volta, na
   curva de saída; os colchetes clareiam. Só onde a etiqueta é link ou
   botão — uma etiqueta parada não convida. */
.nash-tag:is([href], button, [tabindex]) {
  cursor: pointer;
}

.nash-tag:is([href], button, [tabindex]):hover::before {
  transform: translateX(-2px);
  color: var(--text-forte);
}

.nash-tag:is([href], button, [tabindex]):hover::after {
  transform: translateX(2px);
  color: var(--text-forte);
}

/* ---------- variantes de tom ---------- */
.nash-tag[data-emphasis='strong'] {
  color: var(--text-forte);
}

.nash-tag[data-emphasis='accent'] {
  color: var(--accent);
}

.nash-tag[data-emphasis='accent']::before,
.nash-tag[data-emphasis='accent']::after {
  color: var(--accent-2);
}

/* Na placa: a etiqueta vira chip de vidro. NÃO compõe com .nash-surface —
   os dois usam ::before e ::after (lá os strokes, aqui os colchetes), e o
   vidro engoliria os colchetes. A placa aqui é a mesma receita, feita com
   fill + blur + um stroke por box-shadow, que não gasta pseudo-elemento. */
.nash-tag[data-material='glass'] {
  height: var(--nash-target-dense);
  padding: 0 var(--nash-space-2);
  border-radius: var(--nash-radius-pill);
  background-color: var(--nash-surface-fill);
  -webkit-backdrop-filter: blur(var(--nash-surface-blur)) saturate(var(--nash-surface-saturation));
  backdrop-filter: blur(var(--nash-surface-blur)) saturate(var(--nash-surface-saturation));
  box-shadow: inset 0 0 0 1px var(--nash-palette-white-12);
  transition:
    background-color var(--nash-motion-duration-state) var(--nash-motion-ease-out),
    box-shadow var(--nash-motion-duration-state) var(--nash-motion-ease-out);
}

.nash-tag[data-material='glass']:is([href], button, [tabindex]):hover {
  background-color: var(--nash-surface-fill-hover);
  box-shadow: inset 0 0 0 1px var(--nash-palette-white-18);
}

/* ---------- viva: o ponto acende ----------
   O que diz: agora. A etiqueta ganha o ponto do kit antes do texto, e o
   ponto pulsa no período do ambiente — o laço tem nome (ao vivo) e some
   com o estado. */
.nash-tag[data-live='true'] .nash-dot {
  background-color: var(--accent);
  box-shadow: var(--nash-shadow-glow-short);
  animation: nash-signature-reveal-pulsa var(--nash-motion-loop-ambient) ease-in-out infinite;
}

@keyframes nash-signature-reveal-pulsa {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.8);
  }
}

/* ====================================================================
   .nash-spec-list — rótulo + valor
   ==================================================================== */

/* Um <dl>: cada linha é um <div> com <dt> (o rótulo, entre colchetes) e
   <dd> (o valor). Mono nos dois; o rótulo apagado, o valor no texto. */
.nash-spec-list {
  display: grid;
  gap: var(--nash-space-1);
  font-family: var(--font-mono);
  font-size: var(--nash-type-size-2);
  line-height: var(--nash-type-leading-title);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.nash-spec-list > div {
  position: relative;
  display: grid;
  grid-template-columns: var(--nash-signature-card-label, 160px) minmax(0, 1fr);
  gap: var(--nash-space-3);
  align-items: baseline;
  padding-block: var(--nash-space-0);
  transition:
    opacity var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial),
    transform var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

.nash-spec-list dt {
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: var(--nash-type-tracking-wide);
  font-size: var(--nash-type-size-1);
  white-space: nowrap;
}

.nash-spec-list dt::before {
  content: '[';
  color: var(--text-weak);
}

.nash-spec-list dt::after {
  content: ']';
  color: var(--text-weak);
}

.nash-spec-list dd {
  margin: 0;
  color: var(--text-forte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* A linha de baixo de cada par: um fio que se desenha no ponteiro. */
.nash-spec-list > div::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-weak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nash-motion-duration-glow) var(--nash-motion-ease-out);
}

/* ---------- a chegada: as linhas sobem em fila ----------
   O que diz: uma ficha se preenche linha a linha. Cada par sobe meio
   passo e assenta, um degrau depois do anterior. */
.nash-signature-reveal:not(.is-visivel) .nash-spec-list > div,
html.js .nash-spec-list.nash-signature-reveal:not(.is-visivel) > div {
  opacity: 0;
  transform: translateY(var(--nash-space-1));
}

/* ---------- o ponteiro: o fio se desenha ----------
   O que diz: esta linha é uma unidade. O fio corre da esquerda à direita
   sob o par e some ao sair. Uma vez. */
.nash-spec-list > div:hover::after {
  transform: scaleX(1);
}

/* ---------- variantes ---------- */

/* Em linha: rótulo e valor lado a lado, com o espaço do kit entre pares.
   Pra rodapé e barra, onde não há altura pra colunas. */
.nash-spec-list[data-layout='inline'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nash-space-2) var(--nash-space-5);
}

.nash-spec-list[data-layout='inline'] > div {
  display: inline-flex;
  gap: var(--nash-space-2);
  padding-block: 0;
}

/* Compacta: os degraus de baixo, pra dentro de um cartão. */
.nash-spec-list[data-density='compact'] {
  gap: 0;
  --nash-signature-card-label: 120px;
}

/* Justa: o rótulo mede o que precisa, sem coluna fixa. */
.nash-spec-list[data-density='tight'] {
  --nash-signature-card-label: max-content;
}

/* Digita: o valor é escrito por nashMotion.digita() quando a ficha chega
   (nash-signature.js). Sem o kit de movimento, o valor só aparece. */
.nash-spec-list[data-typing='true'] dd {
  min-height: 1em;
}

/* ====================================================================
   .nash-headline — a manchete, linha a linha
   ==================================================================== */

/* Display do kit: 800, −4,5%, entrelinha 0,96. Cada linha é um <span>
   dentro de uma janela que recorta — a linha sobe de dentro da própria
   entrelinha, como tipo que emerge do papel. */
.nash-headline {
  font-weight: 800;
  letter-spacing: var(--nash-type-tracking-display);
  line-height: var(--nash-type-leading-display);
  color: var(--text-forte);
  font-size: var(--nash-type-size-7);
  text-wrap: balance;
}

.nash-headline > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* os descendentes do 'g' e do 'p' não podem ser recortados */
  margin-bottom: -0.06em;
}

.nash-headline > span > span {
  display: block;
  transition:
    opacity var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial),
    transform var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

/* ---------- a chegada: a linha emerge ----------
   O que diz: isto está sendo dito agora. A linha sobe da entrelinha de
   baixo e para; a segunda vem um degrau depois. Uma vez. */
.nash-signature-reveal:not(.is-visivel) .nash-headline > span > span,
html.js .nash-headline.nash-signature-reveal:not(.is-visivel) > span > span {
  opacity: 0;
  transform: translateY(110%);
}

/* ---------- variantes de tamanho ---------- */
.nash-headline[data-size='medium'] {
  font-size: var(--nash-type-size-6);
}

.nash-headline[data-size='large'] {
  font-size: var(--nash-type-size-8);
}

.nash-headline[data-size='xlarge'] {
  font-size: var(--nash-type-size-9);
}

/* ---------- variantes de tom ---------- */

/* A segunda linha em meio-tom: a ref pesa a primeira. */
.nash-headline[data-align='center'] > span:not(:first-child) {
  color: var(--text-mid);
}

/* Em 500, sem aperto: pra frase, não pra grito. */
.nash-headline[data-weight='light'] {
  font-weight: 500;
  letter-spacing: var(--nash-type-tracking-tight);
  line-height: var(--nash-type-leading-title);
}

/* ====================================================================
   .nash-grain-field — o chão
   ==================================================================== */

/* Preto absoluto (o chão do site), um grão de filme por cima e, atrás
   do grão, uma luz larga e borrada que deriva como tempo. O conteúdo
   vai por cima; o campo é só o chão. */
.nash-grain-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nash-color-bg-page);
  color: var(--text);
  /* Onde a luz nasce e quanto ela pesa. As variantes só trocam estes. */
  --nash-runtime-light-x: 92%;
  --nash-runtime-light-y: 38%;
  --nash-signature-light-radius: 62%;
  --nash-signature-light-strength: var(--nash-palette-white-18);
  --nash-signature-grain-strength: 0.16;
}

/* A luz: um radial na escada de branco, sem filtro — filter: blur num
   pseudo desse tamanho custa um quadro a cada repintura; um gradiente de
   queda longa faz o mesmo borrado de graça. Deriva por transform, que é
   a única propriedade que o compositor anima sem repintar. */
.nash-grain-field::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(
      ellipse var(--nash-signature-light-radius) var(--nash-signature-light-radius) at var(--nash-runtime-light-x) var(--nash-runtime-light-y),
      var(--nash-signature-light-strength) 0%,
      var(--nash-palette-white-08) 32%,
      transparent 68%
    );
  animation: nash-signature-reveal-deriva var(--nash-motion-loop-drift) ease-in-out infinite alternate;
  will-change: transform;
}

/* O grão: um ruído de fractal em SVG, embutido, repetido em 220 px, com
   mistura de sobreposição pra clarear e escurecer sem mudar a cor. Fica
   parado — grão que anda é chuva. */
.nash-grain-field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--nash-signature-grain-strength);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- a deriva: a luz anda ----------
   O que diz: o chão está vivo, mas não pede atenção. Três por cento de
   viagem e oito de escala, indo e voltando em 28 s — o olho não flagra
   o movimento, só nota que a luz não é a mesma de antes. É o único laço
   sem estado da família, e por isso o mais lento de todos. */
@keyframes nash-signature-reveal-deriva {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-3%, 2%) scale(1.08);
  }
}

/* ---------- variantes de luz ---------- */
.nash-grain-field[data-light='left'] {
  --nash-runtime-light-x: 8%;
  --nash-runtime-light-y: 40%;
}

.nash-grain-field[data-light='top'] {
  --nash-runtime-light-x: 50%;
  --nash-runtime-light-y: 0%;
  --nash-signature-light-radius: 80%;
}

.nash-grain-field[data-light='bottom'] {
  --nash-runtime-light-x: 50%;
  --nash-runtime-light-y: 100%;
  --nash-signature-light-radius: 80%;
}

/* ---------- variantes de força ---------- */
.nash-grain-field[data-grain='soft'] {
  --nash-signature-light-strength: var(--nash-palette-white-08);
  --nash-signature-grain-strength: 0.1;
}

.nash-grain-field[data-grain='strong'] {
  --nash-signature-light-strength: var(--nash-palette-white-30);
  --nash-signature-grain-strength: 0.22;
}

.nash-grain-field[data-grain='none'] {
  --nash-signature-grain-strength: 0;
}

.nash-grain-field[data-grain='still']::before {
  animation: none;
}

/* ====================================================================
   .nash-signature-footer — a linha do pé
   ==================================================================== */

/* Endereço à esquerda em mono, a marca à direita, e um fio por cima que
   se desenha da esquerda quando o bloco chega. */
.nash-signature-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nash-space-4);
  padding-top: var(--nash-space-3);
  font-family: var(--font-mono);
  font-size: var(--nash-type-size-2);
  letter-spacing: 0.04em;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

.nash-signature-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--border);
  transform-origin: left;
  transition: transform var(--nash-motion-duration-anchor) var(--nash-motion-ease-spatial);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step));
}

.nash-signature-footer > * {
  transition: opacity var(--nash-motion-duration-reveal) var(--nash-motion-ease-spatial);
  transition-delay: calc(var(--nash-runtime-order, 0) * var(--nash-motion-stagger-step) + var(--nash-motion-duration-state));
}

.nash-signature-footer a {
  color: inherit;
  transition: color var(--nash-motion-duration-micro) var(--nash-motion-ease-out);
}

.nash-signature-footer a:hover {
  color: var(--text-forte);
}

/* ---------- a chegada: o fio se desenha ----------
   O que diz: aqui termina. A linha corre da esquerda à direita e o
   conteúdo aparece sobre ela. Uma vez. */
.nash-signature-reveal:not(.is-visivel) .nash-signature-footer::before,
html.js .nash-signature-footer.nash-signature-reveal:not(.is-visivel)::before {
  transform: scaleX(0);
}

.nash-signature-reveal:not(.is-visivel) .nash-signature-footer > *,
html.js .nash-signature-footer.nash-signature-reveal:not(.is-visivel) > * {
  opacity: 0;
}

/* ---------- variantes ---------- */
.nash-signature-footer[data-rule='none'] {
  padding-top: 0;
}

.nash-signature-footer[data-rule='none']::before {
  display: none;
}

.nash-signature-footer[data-align='center'] {
  justify-content: center;
}

/* ====================================================================
   .nash-poster — a composição
   ==================================================================== */

/* A ref inteira: 4:5, margens de e5, o cabeçalho no topo, a manchete a
   um terço, a ficha abaixo dela e o pé no chão. Compor com
   .nash-grain-field pra ter o chão. */
.nash-poster {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    'cabeca'
    'manchete'
    'ficha'
    'pe';
  gap: var(--nash-space-6);
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 640px;
  padding: var(--nash-space-5);
  border-radius: var(--nash-radius-3);
  color: var(--text);
}

.nash-poster-header {
  grid-area: cabeca;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nash-space-4);
}

.nash-poster-headline {
  grid-area: manchete;
  display: grid;
  align-content: center;
  gap: var(--nash-space-3);
}

/* A etiqueta no canto da manchete, como o [HIRING] da ref. */
.nash-poster-headline .nash-tag {
  justify-self: end;
  align-self: start;
}

.nash-poster-specs {
  grid-area: ficha;
}

.nash-poster-footer {
  grid-area: pe;
}

/* ---------- variantes de proporção ---------- */
.nash-poster[data-aspect='square'] {
  aspect-ratio: 1;
}

.nash-poster[data-aspect='story'] {
  aspect-ratio: 9 / 16;
  max-width: 420px;
}

.nash-poster[data-aspect='landscape'] {
  aspect-ratio: 16 / 9;
  max-width: 960px;
  gap: var(--nash-space-4);
}

.nash-poster[data-aspect='landscape'] .nash-poster-headline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

@media (max-width: 640px) {
  .nash-poster {
    padding: var(--nash-space-4);
    gap: var(--nash-space-5);
  }
}

/* ====================================================================
   Movimento reduzido
   ==================================================================== */

/* A preferência do sistema ou .nash-reduzido num ancestral, como no
   kit. Toda travessia vira troca de estado em 100 ms; os três laços
   (respira, pulsa, deriva) param no estado aceso; a chegada continua
   acontecendo — sem viagem — porque a peça precisa aparecer. */
@media (prefers-reduced-motion: reduce) {
  .nash-signature .laje,
  .nash-signature-name,
  .nash-signature-tagline,
  .nash-tag::before,
  .nash-tag::after,
  .nash-tag > span,
  .nash-spec-list > div,
  .nash-spec-list > div::after,
  .nash-headline > span > span,
  .nash-signature-footer::before,
  .nash-signature-footer > * {
    transition-duration: 100ms;
    transition-delay: 0s;
    transition-timing-function: var(--nash-motion-ease-out);
  }

  .nash-signature-reveal:not(.is-visivel) .nash-signature .laje,
  .nash-signature-reveal:not(.is-visivel) .nash-signature-name,
  .nash-signature-reveal:not(.is-visivel) .nash-signature-tagline,
  .nash-signature-reveal:not(.is-visivel) .nash-tag::before,
  .nash-signature-reveal:not(.is-visivel) .nash-tag::after,
  .nash-signature-reveal:not(.is-visivel) .nash-spec-list > div,
  .nash-signature-reveal:not(.is-visivel) .nash-headline > span > span,
  html.js .nash-signature-reveal:not(.is-visivel) .laje,
  html.js .nash-signature.nash-signature-reveal:not(.is-visivel) .nash-signature-name,
  html.js .nash-tag.nash-signature-reveal:not(.is-visivel)::before,
  html.js .nash-tag.nash-signature-reveal:not(.is-visivel)::after,
  html.js .nash-spec-list.nash-signature-reveal:not(.is-visivel) > div,
  html.js .nash-headline.nash-signature-reveal:not(.is-visivel) > span > span {
    transform: none;
  }

  .nash-signature:is([href], [tabindex], button):hover .laje-1,
  .nash-signature:is([href], [tabindex], button):hover .laje-4,
  .nash-tag:is([href], button, [tabindex]):hover::before,
  .nash-tag:is([href], button, [tabindex]):hover::after {
    transform: none;
  }

  .nash-signature[data-estado='vivo'] .nash-logo,
  .nash-tag[data-live='true'] .nash-dot,
  .nash-grain-field::before {
    animation: none;
  }

  .nash-signature[data-estado='vivo'] .nash-logo {
    filter: drop-shadow(0 0 10px var(--accent-glow));
  }
}

/* A classe .nash-reduzido faz o mesmo que a preferência, pra página que
   oferece o desligar na mão (o /assinatura tem o toggle). Duplicado, não
   fatorado: CSS não tem como unir uma media query e um seletor num só
   bloco sem pré-processador, e o site não tem um. */
.nash-reduzido .nash-signature .laje,
.nash-reduzido .nash-signature-name,
.nash-reduzido .nash-signature-tagline,
.nash-reduzido .nash-tag::before,
.nash-reduzido .nash-tag::after,
.nash-reduzido .nash-tag > span,
.nash-reduzido .nash-spec-list > div,
.nash-reduzido .nash-spec-list > div::after,
.nash-reduzido .nash-headline > span > span,
.nash-reduzido .nash-signature-footer::before,
.nash-reduzido .nash-signature-footer > * {
  transition-duration: 100ms;
  transition-delay: 0s;
  transition-timing-function: var(--nash-motion-ease-out);
}

.nash-reduzido .nash-signature-reveal:not(.is-visivel) .laje,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-signature-name,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-signature-tagline,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-tag::before,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-tag::after,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-spec-list > div,
.nash-reduzido .nash-signature-reveal:not(.is-visivel) .nash-headline > span > span,
.nash-reduzido .nash-tag.nash-signature-reveal:not(.is-visivel)::before,
.nash-reduzido .nash-tag.nash-signature-reveal:not(.is-visivel)::after,
.nash-reduzido .nash-spec-list.nash-signature-reveal:not(.is-visivel) > div,
.nash-reduzido .nash-headline.nash-signature-reveal:not(.is-visivel) > span > span,
.nash-reduzido .nash-signature:hover .laje-1,
.nash-reduzido .nash-signature:hover .laje-4,
.nash-reduzido .nash-tag:hover::before,
.nash-reduzido .nash-tag:hover::after {
  transform: none;
}

.nash-reduzido .nash-signature[data-estado='vivo'] .nash-logo,
.nash-reduzido .nash-tag[data-live='true'] .nash-dot,
.nash-reduzido .nash-grain-field::before {
  animation: none;
}

.nash-reduzido .nash-signature[data-estado='vivo'] .nash-logo {
  filter: drop-shadow(0 0 10px var(--accent-glow));
}