/* =============================================================
   Deck Sandbox — a folha do SITE

   Camada 2 do site, e a única: o vocabulário é o `tokens.css` do jogo,
   carregado INTEIRO e sem um valor próprio (ADR-0239 D1).

   NENHUMA COR É DECLARADA AQUI. Nem um `#`, nem um `rgb()`. Se uma página
   precisar de um valor que não existe no vocabulário, o valor entra no
   `tokens.css` — nunca nesta folha. Não é limitação a contornar: é a
   decisão inteira, e é o que impede o site de virar um segundo produto
   visualmente.

   E a LETRA vem de `--font-ui`, que só passou a existir por causa desta
   folha: até 2026-09-13 a tipografia morava na regra do `body` do
   `table.css`, que é o esqueleto da MESA e que o site não carrega. Herdar
   só as cores daria paleta certa e letra errada.
   ============================================================= */

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

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg);
  font: var(--font-size-body)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* O contrário do `body { overflow: hidden }` da mesa, e é a razão de o
   site ser DOCUMENTO SEPARADO e não uma tela do app (ADR-0238 D2): uma
   home no mesmo documento ou rola por cima daquela regra, ou não rola. */

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { color: var(--fg); }

/* O PULO PARA O CONTEÚDO só aparece quando o teclado o alcança. Ele é o
   primeiro alvo tabulável da página, e sem ele quem navega por teclado
   atravessa o cabeçalho inteiro em toda página. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
}
.skip:focus { left: var(--sp-4); z-index: 2; }

/* ---------- topo ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--font-size-title);
  color: var(--fg);
  text-decoration: none;
}

/* O LOGO inteiro, com o nome desenhado. A altura manda e a largura segue, e é
   por isso que o `<img>` declara as duas medidas nativas (1040×458): sem elas
   o navegador não reserva espaço antes de baixar o arquivo e o cabeçalho
   empurra o conteúdo quando o logo chega.

   3.3em ≈ 59px de altura, e o número sai de conta, não de gosto. As cinco
   cartas de contorno fino se fundem abaixo de ~42px de altura de MARCA
   (medido em 26 / 34 / 42 / 52), e dentro do logo inteiro a marca ocupa
   0,715 da altura — as cartas vão de y=65,23 a 393,02 num viewBox de 458,27.
   Logo: 42 ÷ 0,715 = 58,7px, que é o piso. Estreou em 2.9em (52px, marca de
   37px) e as cartas voltaram a embaralhar — a conta é esta, não aquela.

   Se o cabeçalho tiver de encolher, o que muda é a ARTE, não este número. */
.topbar__logo {
  display: block;
  width: auto;
  height: 3.3em;
}

.topbar__nav { display: flex; gap: var(--sp-4); }
.topbar__nav a { text-decoration: none; }

/* ---------- miolo ---------- */
main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
}

.hero { padding: var(--sp-5) 0; }

.hero__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--font-size-hero);
  line-height: 1.15;
  max-width: var(--measure);
}

.hero__lead {
  margin: 0 0 var(--sp-5);
  max-width: var(--measure);
  color: var(--fg-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
}

.hero__note {
  margin: 0;
  color: var(--fg-dim);
  font-size: var(--font-ui-size);
}

/* ---------- o botão ----------
   Ele não é o `.btn` da mesa: aquele mora no `table.css`, que o site não
   carrega, e copiá-lo para cá seria a segunda cópia do componente. O nome
   se repete porque o papel é o mesmo; o desenho sai dos mesmos tokens. */
.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-surface-2);
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
.btn:hover { background: var(--bg-surface-3); color: var(--fg); }

.btn--primary {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--fg);
}
.btn--primary:hover { border-color: var(--accent); }

/* O ALVO MORTO: enquanto o destino da doação não existir, o botão não
   pode PARECER que funciona. Ele fica opaco, sem cursor de link e sem
   reação ao passar o mouse — e a frase ao lado diz o porquê. */
.btn--dead {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}

/* ---------- as capturas ---------- */
.shot {
  margin: var(--sp-5) 0;
  padding: 0;
}

.shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* O CLIPE. Mesma caixa da imagem — ele é uma captura da tela, e não um
   componente novo. */
.clip {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* O PÔSTER PARADO, que só entra quando a pessoa pediu menos movimento.
   Fora desse caso ele não existe na tela — e o navegador reusa o mesmo
   arquivo que o `poster=` do vídeo já referencia, então não é um segundo
   download.

   O SELETOR PRECISA DE `.shot`, e não é enfeite: `.shot img` logo acima
   declara `display: block` e vale (0,1,1); um `.clip__still` sozinho vale
   (0,1,0) e PERDE, em qualquer ordem. A primeira versão escreveu o
   seletor curto, e o resultado foi o pôster aparecendo como uma segunda
   imagem embaixo de cada vídeo, para todo mundo — quem pediu menos
   movimento e quem não pediu.

   **Nenhum portão via isso**: o site não está na bateria de DOM, e a
   pergunta "este nó está escondido?" é de layout. Quem achou foi a
   conferência de olho na captura da home. */
.shot .clip__still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .shot .clip { display: none; }
  .shot .clip__still { display: block; }
}

.shot figcaption {
  margin-top: var(--sp-2);
  color: var(--fg-dim);
  font-size: var(--font-ui-size);
}

/* ---------- a grade de seções ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.feature h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--font-size-title);
}

.feature p {
  margin: 0;
  color: var(--fg-muted);
}

.closing {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}

/* ---------- páginas de texto ---------- */
.page { margin: 0 0 var(--sp-5); max-width: var(--measure); }
.page h1 { font-size: var(--font-size-hero); line-height: 1.15; margin: 0 0 var(--sp-3); }
.page h2 { font-size: var(--font-size-title); margin: 0 0 var(--sp-2); }
.page__lead { color: var(--fg-muted); }

.plain { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.plain li { margin-bottom: var(--sp-2); }

.note { color: var(--fg-dim); font-size: var(--font-ui-size); }

.page--action { padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ---------- rodapé ---------- */
.foot {
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
  padding-block: var(--sp-5);
  color: var(--fg-dim);
  font-size: var(--font-ui-size);
}

/* O RECUO LATERAL É DOS FILHOS, e não do rodapé, para a coluna dele ser a
   MESMA do miolo: o `main` centra uma caixa de `--page-max` COM o recuo
   dentro, então um rodapé que centrasse o conteúdo já recuado começaria
   16px à esquerda do texto de cima. Foi o que a primeira conferência de
   olho pegou.

   E o recuo lateral vem por `padding-inline`, nunca pelo `padding` curto:
   o curto zera o `margin-inline: auto` das regras abaixo, e o filho volta
   a ocupar a largura inteira — que é a outra metade do mesmo defeito. */
.foot > * {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.foot__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  margin-bottom: var(--sp-4);
}

.foot__langs a[aria-current="true"] {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}

.foot__credit { margin-block: 0 var(--sp-2); }

/* O aviso da Fan Content Policy. Ele fica em inglês no meio de uma página
   traduzida, e é esquisito de propósito: é texto fornecido pela política
   e a obrigação é reproduzi-lo como está (ADR-0243 D3). */
.foot__legal { margin-block: 0; }