/* Hallmark · base do kit. A grade é o gesto estrutural: 6 colunas de 1px,
 * sempre dentro das margens, como em identidade/src/gen.py:grade(). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--papel); }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--corpo);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--altura-display);
  color: var(--tinta);
  margin: 0; font-style: normal;
  overflow-wrap: anywhere; min-width: 0;
}

a { color: inherit; text-decoration-color: var(--linha); text-underline-offset: 0.22em;
  text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--acento-legivel); }

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

/* o que o navegador desenha também é do sistema: seleção, cursor, barra de
   rolagem e algarismos. Sair no default é o jeito mais barato de o site
   parecer montado em vez de feito. */
::selection { background: var(--acento); color: var(--acento-sobre); }
html { scrollbar-color: var(--linha-forte) var(--papel); scrollbar-width: thin;
  caret-color: var(--acento-legivel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb { background: var(--linha-forte);
  border: 3px solid var(--papel); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }

:focus-visible { outline: 2px solid var(--acento-legivel); outline-offset: 3px; }
/* o router move o foco para #conteudo a cada rota, o que é certo para teclado.
   O contorno em volta da página inteira não informa nada. */
#conteudo:focus, #conteudo:focus-visible { outline: none; }

/* microtipografia: tracking do kit, .16em */
.mono { font-family: var(--fonte-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }

/* a régua: barra esmeralda do kit (regua(), 180x7). Marca abertura de seção. */
.regua { display: block; width: clamp(96px, 12vw, 168px); height: 8px;
  background: var(--acento); }
.regua--curta { width: clamp(56px, 7vw, 96px); height: 7px; }
.regua--quente { background: var(--quente); }

/* ---- a grade ---- */
/* 6 colunas de linha fina dentro das margens. Fica atrás de tudo, não recebe
   ponteiro, e some no papel do rascunho (a bancada tem grade própria). */
.grade { position: relative; }
.grade::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(1320px - var(--margem-pagina) * 2),
             calc(100% - var(--margem-pagina) * 2));
  background-image: repeating-linear-gradient(to right,
    var(--grade-linha) 0 1px, transparent 1px calc(100% / var(--colunas)));
  border-right: 1px solid var(--grade-linha);
}
.grade > * { position: relative; z-index: 1; }

/* o monograma gigante ao fundo, sangrando pela direita, a 5% — o gesto das
   peças do perfil (gen.py: monograma(W-320, 150, 1010, op=.05)) */
/* o P sangra pela direita e pelo topo, como nas peças do perfil: só um pedaço
   aparece, e a 5% ele é textura, não desenho */
.marca-fundo {
  position: absolute; z-index: 0; pointer-events: none;
  right: -14%; top: 50%; translate: 0 -50%;
  width: clamp(420px, 62vw, 900px); height: auto;
  opacity: 0.042; color: var(--tinta);
}

.envoltorio { max-width: 1320px; margin-inline: auto;
  padding-inline: var(--margem-pagina); }

#conteudo { display: block; }
#conteudo > * { width: 100%; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: var(--margem-pagina); top: var(--passo); z-index: 100;
  background: var(--papel); color: var(--tinta); padding: var(--passo); }

[data-revelar] {
  clip-path: inset(0 0 110% 0);
  transition: clip-path calc(var(--duracao) * 2) var(--saida);
}
[data-revelar].revelado { clip-path: inset(0 0 -20% 0); }
:root[data-movimento="nenhum"] [data-revelar] { clip-path: none; }

.subir { opacity: 0; transform: translateY(14px);
  transition: opacity var(--duracao) var(--saida), transform var(--duracao) var(--saida); }
.subir.dentro { opacity: 1; transform: none; }
:root[data-movimento="nenhum"] .subir { opacity: 1; transform: none; }

#cortina {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--saida);
}
#cortina.entrando { transform: scaleX(1); transform-origin: left; }
#cortina.saindo { transform: scaleX(0); transform-origin: right; }
:root[data-movimento="nenhum"] #cortina { display: none; }