/* ══════════════════════════════════════════════════════════════════════════
   KENZAI ACADEMY — a folha de estilo da página pública. É esta e mais nenhuma.

   Sem build, sem framework, sem CDN. Tudo o que a página carrega mora nesta
   pasta, e a CSP de `_headers` diz `style-src 'self'`: não há bloco <style> na
   página, não há atributo style="" em elemento nenhum, e não pode haver.

   ─── POR QUE A PÁGINA É ESCURA, E POR QUE ISSO NÃO É UM DEFEITO DO APLICATIVO
   O tema aqui é fixo e escuro por IDENTIDADE DE MARCA: o briefing pede cores
   escuras, e a apresentação aplica a marca sobre fundo escuro como versão
   principal (p16). Esta página é peça de marca, e tem um estado só.

   O APLICATIVO ABRE NO CLARO, por decisão do Charles de 31/08/2026, registrada
   em `src/styles/tokens.css`. Isso é de propósito e NÃO é para ser "consertado"
   para casar com esta página. Quem toca ENTRAR muda de sala, e a sala do
   produto é clara porque alguém decidiu que fosse.

   ─── OS SEIS EMPREGOS DO OURO, E NENHUM A MAIS
   O ouro é a única luz da página. Ele aparece em seis papéis:
     1. os fios de 40x1px entre as seções, e o fio vertical à esquerda da
        citação;
     2. as sobrancelhas de seção e a assinatura FORJADOS NO AGORA;
     3. o preenchimento do botão ENTRAR, com texto #191919;
     4. o link do rodapé;
     5. a borda fina de 1px dos dois botões "Em breve" (App Store / Google
        Play) da seção 4, enquanto não existir `href` de verdade — ver
        `.loja-botao`. Emprego aberto em 08/09/2026 a pedido do
        Charles: os botões passam a aparecer, honestos, em vez de ficarem
        escondidos atrás de `hidden`.
     6. o contorno de `:focus-visible` em todo alvo focável pelo teclado.
        Numa página escura com poucos alvos, foco invisível é a falha de
        acessibilidade mais provável — o ouro é a única luz da página, e é
        essa luz que precisa marcar onde o teclado está. Papel
        reconhecido em 08/09/2026: já existia no CSS desde sempre, mas a
        prosa nunca o tinha contado — foi a régua que achou o descompasso.
   O símbolo do ambigrama e os kanji 健在 empregavam o ouro até 08/09/2026,
   quando a seção do nome e do símbolo saiu inteira (pedido do Charles).
   Fora dos seis papéis acima, ouro nenhum. Em especial: O OURO NÃO É COR DE
   CORPO DE TEXTO. Ele passa em AA (7,40 sobre o fundo), e é justamente por
   passar que a tentação existe.

   OURO-SELETORES: :focus-visible, .fio, .fio-curto, .sobrancelha, .assinatura, .botao, .citacao, .loja-botao, footer a

   A linha acima é a lista, literal e medível, dos seletores autorizados a
   empregar o ouro — é o que `scripts/lib/site-regua.mjs` lê para comparar
   CONJUNTO contra CONJUNTO (não número contra número: a prosa acima fala em
   PAPÉIS, e um papel agrupa mais de um seletor). A régua reprova nas duas
   direções: seletor usando ouro fora desta lista é emprego não declarado;
   seletor desta lista que não usa mais ouro é prosa que envelheceu. Editar
   esta linha é editar a régua — mantenha a vírgula entre itens e nenhuma
   quebra de linha no meio.

   RÉGUA MEDÍVEL, e ela existe porque uma invariante afirmada sem régua vira
   mentira sem ninguém notar: o valor hexadecimal do konjiki aparece em UMA
   linha deste arquivo, a declaração do token logo abaixo. Todo o resto usa
   `var(--marca-konjiki)` ou um token derivado dele. Uma segunda linha com o
   hexadecimal cru é regressão, não melhoria — o `grep -c` do valor nesta
   folha tem que devolver 1, e é assim que um emprego não declarado
   seria pego.

   ─── CONTRASTE, MEDIDO E NÃO LEMBRADO (tudo sobre #191919)
   branco #FFFFFF 17,58 · #D6D2CD 11,69 · #A8A29B 6,95 · konjiki 7,40 ·
   o botão (texto #191919 sobre o konjiki) 7,40 · o botão em hover (texto
   #191919 sobre #B98D6B) 5,93 · o link do rodapé em hover #D9B694 9,27 · o
   filete do rodapé #656565 3,02. Nada de texto abaixo de 4,5, nada de
   elemento de interface abaixo de 3.

   ESTA TABELA É PROSA MEDIDA À MÃO, e prosa não é régua: ela já esteve
   incompleta, sem os dois valores de hover, e nada avisou. Recalculada em
   08/09/2026 (fórmula da WCAG 2.1). Enquanto não existir um script que leia
   os tokens daqui e falhe abaixo do limiar, quem trocar uma cor recalcula na
   mão e corrige esta linha. Ver a nota no fim de site/LEIA-ME.md.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --bg-page:        #191919;  /* o fundo de tudo, do topo ao rodapé */
  /* Só o filete de 1px do rodapé. Era #2A2A2A, que dá 1,22 sobre o fundo e
     some em tela de celular sob sol, em painel de contraste baixo e para quem
     tem sensibilidade reduzida. Ele é a única fronteira entre o corpo e o
     rodapé: está fazendo trabalho de estrutura, e estrutura pede 3. */
  --bg-muted:       #656565;  /* 3,02 sobre #191919 */

  --text-primary:   #FFFFFF;
  --text-body:      #D6D2CD;
  --text-secondary: #A8A29B;

  --marca-konjiki:  #CAA07E;  /* a única luz da página */

  --acao-primaria:       var(--marca-konjiki);
  --acao-primaria-hover: #B98D6B;
  --acao-primaria-texto: var(--bg-page);

  /* Estes dois NASCEM aqui. Eles são usados em `src/styles/globals.css` e não
     existem em `tokens.css` nem em lugar nenhum do repositório — lá os links
     caem na cor herdada. Esta página não herda o buraco. */
  --text-link:       var(--marca-konjiki);
  --text-link-hover: #D9B694;

  --coluna: 34rem;
  --respiro-lateral: 24px;
}

/* ─── Fonte ─────────────────────────────────────────────────────────────────
 *
 * Urbanist e mais nada: um arquivo de 27,7 KB, eixo `wght` de 300 a 700,
 * servido daqui mesmo. Nada de fonte vinda de servidor do Google — nem a
 * folha, nem os arquivos. O motivo já está escrito em `src/styles/globals.css`:
 * carregar fonte de terceiro manda o IP e o User-Agent de cada visitante para
 * fora sem base declarada. A CSP fecha isso com `font-src 'self'`.
 *
 * A OFL exige que o texto da licença acompanhe a fonte servida. Ele está em
 * `fontes/OFL-Urbanist.txt`, ao lado do arquivo. Isso é condição, não zelo.
 *
 * Majime, a display primária da marca, NÃO está no disco e a licença para web
 * ainda não foi conferida (tokens.css, linhas 104-109). Então display e corpo
 * caem os dois em Urbanist, como já acontece no aplicativo, e a hierarquia
 * inteira vem de escala, peso e entreletra. Peso 700 não aparece nesta página;
 * o 600 é o topo.
 */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  /* 'woff2', não 'woff2-variations': o hint mais novo é ignorado — e a fonte
     inteira some, em silêncio — por navegador que não o reconhece. */
  src: url('fontes/urbanist-variable.woff2') format('woff2');
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

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

/* O `hidden` do HTML tem que GANHAR de qualquer `display` declarado aqui.
   Sem esta linha, a folha do autor vence a do navegador sempre — e o
   `.selos-de-loja { display: flex }` deixava o `hidden` do contêiner dos
   selos sem efeito nenhum. Medido antes do conserto: com o atributo posto,
   `getComputedStyle(el).display` devolvia "flex". O contêiner está vazio
   hoje, então o custo era invisível; o dia de pagar seria o dia em que
   alguém colasse a arte da Apple e do Google achando que o `hidden` a
   segurava, e publicasse selo de loja sem ficha em loja nenhuma.
   `!important` aqui é a forma certa: conserta a classe inteira do erro em
   vez de pedir um `:not([hidden])` em cada bloco novo. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Pintados os dois, explicitamente. A página tem um estado só, e nada aqui
     conta com a cor que o navegador traria por conta própria. */
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Os TRÊS termos em rem, teto incluído. Com `18px` no teto, quem configura
     o navegador para 24px ou 32px de corpo continuava recebendo 18: o termo
     do meio crescia e o `max` cortava. Aumentar a fonte padrão sem mexer no
     zoom é a via que quem enxerga pouco mais usa no celular, e o teto
     absoluto a anulava. Todo tamanho de fonte desta folha é rem pelo mesmo
     motivo; px sobrou só onde a medida não é texto (fios, respiro). */
  font-size: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
}

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

/* A coluna: alinhada à esquerda, o bloco centrado na janela. Centrado vira
   cartaz; a direção pede sala. */
.coluna {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ─── Foco de teclado ───────────────────────────────────────────────────────
 *
 * Numa página escura com poucos alvos, foco invisível é a falha de
 * acessibilidade mais provável. Este contorno vale para todo alvo focável.
 */
:focus-visible {
  outline: 2px solid var(--marca-konjiki);
  outline-offset: 2px;
}

/* ─── Os fios ───────────────────────────────────────────────────────────────
 *
 * 40px de comprimento, 1px de espessura, dentro da coluna e nunca de borda a
 * borda da janela. Raio 0 em tudo o que não seja o botão: canto arredondado é
 * linguagem de aplicativo, e aqui é uma porta.
 */
.fio {
  width: 40px;
  height: 1px;
  border: 0;
  margin: clamp(48px, 8vh, 88px) auto;
  background-color: var(--marca-konjiki);
}

.fio-curto {
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background-color: var(--marca-konjiki);
}

/* ─── Tipografia de papel ───────────────────────────────────────────────── */

.sobrancelha {
  margin: 0 0 20px;
  /* 0.8125rem e não 0.75rem: isto é um <h2>, cabeçalho de seção, e 12px era
     o menor corpo da página inteira, em versal e com 0.18em de entreletra. */
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-konjiki);
}

.assinatura {
  margin: 28px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--marca-konjiki);
}

h1 {
  margin: 24px 0 16px;
  font-size: clamp(1.3125rem, 1.05rem + 1.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.abertura-apoio {
  margin: 0;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-body);
}

/* ─── Seção 1, a abertura ───────────────────────────────────────────────────
 *
 * `100svh`, e não `100vh`: no iPhone o `vh` mede a janela SEM a barra do
 * Safari, e o botão ficaria embaixo dela. O `min-height` deixa a seção crescer
 * quando o texto não couber — em 320px de largura, ela cresce.
 *
 * O RETICULADO DE FUNDO É DESENHADO, NÃO É FOTO. Não existe, neste projeto,
 * foto autorizada do espaço atual desta academia: o que há em `public/historia`
 * é esquema técnico e material histórico, e as fotos do acervo da família foram
 * autorizadas para a linha do tempo DENTRO do aplicativo, não para peça pública
 * de marketing. Então o tatame é sugerido em gradiente: pinta no primeiro
 * quadro, não custa requisição, não pede nada de `img-src` e não afirma ser
 * lugar nenhum.
 *
 * NO DIA EM QUE A FOTO EXISTIR: ela entra como `background-image` DESTA seção,
 * por cima do reticulado, com o scrim
 *   linear-gradient(180deg, rgba(25,25,25,.62), rgba(25,25,25,.94))
 * e a foto rebaixada a cerca de 28% de luminância, para o texto branco
 * continuar acima de 7:1 por cima dela. Uma declaração muda e o resto fica
 * igual. A foto tem que ser DESTE dojo e AUTORIZADA para uso público — não
 * serve foto do acervo histórico.
 */
.abertura {
  position: relative;
  display: flex;
  align-items: center;
  /* As duas linhas, nesta ordem. Onde `svh` não existe (Safari < 15.4,
     Chrome < 108) a declaração inteira é descartada, e sem a primeira a
     abertura encolheria para a altura do conteúdo, perdendo a tela cheia. */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(48px, 10vh, 96px);
  overflow: hidden;
}

.abertura::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(202, 160, 126, 0.035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(to bottom, rgba(202, 160, 126, 0.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.35) 42%, transparent 78%);
  mask-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.35) 42%, transparent 78%);
  pointer-events: none;
}

.abertura .coluna { position: relative; }

.lockup {
  display: block;
  width: min(200px, 52vw);
  height: auto;
}

.linha-de-acao { margin: 40px 0 0; }

/* ─── O botão, que é um link de verdade ─────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 2px;
  background-color: var(--acao-primaria);
  color: var(--acao-primaria-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
}

.botao:hover { background-color: var(--acao-primaria-hover); }

/* ─── Seções do corpo ───────────────────────────────────────────────────── */

.secao { padding-block: clamp(64px, 12vh, 120px); }

/* Os fios já trazem o próprio ar; onde há fio antes ou depois, a seção não
   soma o dela por cima. */
.fio + .secao { padding-top: 0; }
.secao:has(+ .fio) { padding-bottom: 0; }

/* ─── Seção 2 — Mestre Júlio ─────────────────────────────────────────────
 *
 * Uma linha, sem estilo próprio: herda a tipografia comum de `.secao` e `p`.
 * A seção da linhagem e a seção do símbolo, que tinham regras aqui, saíram
 * inteiras em 08/09/2026 (pedido do Charles) — junto com `.nome`, `.raiz`,
 * `.secao-simbolo`, `.kanji`, `.simbolo` e a animação do giro.
 */

/* ─── Seção 3 — a citação ───────────────────────────────────────────────── */

.secao-citacao { padding-block: clamp(64px, 12vh, 120px); }

/* O filete dourado e o recuo moram no <figure>, não no <blockquote>: a
   atribuição saiu de dentro da citação (leitor de tela anunciava "Mestre Li"
   como parte da fala), e é o figure que precisa abraçar as duas partes para
   a pintura ficar a mesma de antes. */
.citacao {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--marca-konjiki);
}

blockquote { margin: 0; }

blockquote p {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 1.4vw, 1.625rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-primary);
}

/* Sem aspas desenhadas em volta: as aspas curvas já fazem parte da citação.
   `figcaption` e não `cite`: <cite> representa TÍTULO de obra, e a
   especificação do HTML diz que nome de pessoa não é uso dele. */
.citacao figcaption {
  display: block;
  margin-top: 20px;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ─── Seção 4 — os dois botões "Em breve", e o lugar do selo quando existir ─
 *
 * Hoje `.loja-botao` é um <span> sem destino: quadro fino, nome da loja e
 * "Em breve" embaixo, nada que lembre o selo oficial (ver comentário do
 * HTML). `flex: 1 1 0` divide a largura da coluna meio a meio — App Store à
 * esquerda, Google Play à direita, MESMA altura, sem que um empurre o outro
 * para a linha de baixo a 320px (conferido: ver LEIA-ME.md).
 */
.selos-de-loja {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.loja-botao {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--marca-konjiki);
  border-radius: 2px;
  text-align: center;
  /* Nunca o cursor de link: não há `href`, e o quadro não finge ser um. */
  cursor: default;
}

.loja-nome {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

/* --text-secondary dá 6,95 sobre #191919 — acima do piso de 4,5 que o resto
   do corpo de texto da página usa. */
.loja-status {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-secondary);
}

/* O dia da virada: cada <span class="loja-botao"> vira <a>, o miolo de texto
   sai e entra a <img> do selo oficial. 48px de altura e 12px de respiro em
   volta — a margem livre de um quarto da altura que as duas empresas
   exigem. Já escrito, para esse dia. */
.selos-de-loja img {
  height: 48px;
  width: auto;
  padding: 12px;
}

.nota-lojas {
  margin: 24px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Seção 5 — rodapé ─────────────────────────────────────────────────── */

footer {
  margin-top: clamp(64px, 12vh, 120px);
  padding-block: 40px 48px;
  /* Cinza, e não dourado: a única luz da página não se gasta com o rodapé. */
  border-top: 1px solid var(--bg-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

footer p { margin: 0 0 20px; }
footer p:last-child { margin-bottom: 0; }

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer a:hover { color: var(--text-link-hover); }

/* ─── Movimento ─────────────────────────────────────────────────────────────
 *
 * Quem pediu menos movimento recebe a página inteira parada. Não há nada
 * nesta folha que anime hoje; a regra fica como rede geral.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
}