/* estilo.css — Risca & Mexe
   Linguagem de relatório impresso: papel laranja e papel quadriculado, título preto muito grosso,
   colagem com fita, cartões tipo polaroide e anotações a lápis. Uma aparência só (papel), de propósito. */
:root {
  --laranja: #EF8E3B;
  --laranja-fundo: #E9842F;
  --tinta: #1A1916;
  --papel: #ECE8DE;
  --cinza: #C9C5B9;
  --linha: #B4AFA3;
  --lapis: #57524B;
  --marca: rgba(239, 142, 59, .55);
  --branco: #FBFAF6;
  --f-titulo: "Archivo", "Arial Black", Arial, sans-serif;
  --f-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-maquina: "Courier Prime", "Courier New", monospace;
  --f-mao: "Caveat", "Bradley Hand", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.5; font-variation-settings: "wdth" 100; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
/* em inglês ou espanhol, a página espera os textos trocarem (textos.js) para não piscar o português */
html.traduzindo body { visibility: hidden; }

/* texturas */
.grao { position: absolute; inset: 0; background: url(img/grao.png); opacity: .55; mix-blend-mode: multiply; pointer-events: none; }
.quadriculado {
  background-color: var(--cinza);
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pontilhado { background-color: var(--tinta); background-image: radial-gradient(circle, #6d6a63 1.1px, transparent 1.6px); background-size: 9px 9px; }
.papel-fundo {
  background-color: var(--papel);
  background-image: linear-gradient(rgba(180,175,163,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(180,175,163,.35) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* tipografia */
.titulo { font-family: var(--f-titulo); font-weight: 900; font-variation-settings: "wdth" 100; letter-spacing: -0.045em; line-height: .84; margin: 0; }
.maquina { font-family: var(--f-maquina); }
.mao { font-family: var(--f-mao); color: var(--lapis); font-size: 26px; line-height: 1.05; }
/* anotação sobre o papel laranja: em preto, para dar leitura */
.capa .mao, .mesa .mao, .pagina.laranja .mao { color: var(--tinta); }
.rotulo { font-family: var(--f-texto); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
mark { background: linear-gradient(transparent 12%, var(--marca) 12%, var(--marca) 88%, transparent 88%); color: inherit; padding: 0 .1em; }

/* topo */
.topo { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 28px; font-family: var(--f-maquina); font-size: 15px; }
.topo nav { display: flex; gap: 22px; flex-wrap: wrap; }
.topo a { text-decoration: none; }
.topo a:hover, .topo a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.linguas { display: flex; gap: 8px; }
.linguas a { padding: 2px 6px; }
.linguas a[aria-current="true"] { background: var(--tinta); color: var(--branco); }

/* colagem */
.polaroide { position: absolute; background: var(--branco); padding: 10px 10px 34px; box-shadow: 0 10px 26px rgba(26,25,22,.28); }
.polaroide video, .polaroide img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #222; }
.polaroide .legenda { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--f-maquina); font-size: 14px; }
.polaroide .num { position: absolute; left: 12px; bottom: 7px; font-family: var(--f-mao); font-size: 20px; color: var(--lapis); }
.fita { position: absolute; width: 96px; height: 26px; background: rgba(236,228,206,.82); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.retalho { position: absolute; box-shadow: 0 6px 18px rgba(26,25,22,.22); }
.etiqueta { position: absolute; background: var(--branco); padding: 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 16px rgba(26,25,22,.25); font-family: var(--f-maquina); font-size: 14px; }

/* linhas de construção (as guias finas que atravessam o título) */
.guia-h, .guia-v { position: absolute; background: var(--tinta); opacity: .55; }
.guia-h { height: 1px; left: 0; right: 0; }
.guia-v { width: 1px; top: 0; bottom: 0; }

/* botões e escolhas */
.botao { font-family: var(--f-maquina); font-weight: 700; font-size: 15px; border: 2px solid var(--tinta); background: var(--branco); color: var(--tinta); padding: 10px 18px; cursor: pointer; box-shadow: 4px 4px 0 var(--tinta); text-decoration: none; display: inline-block; }
.botao:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.botao:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

/* rodapé */
.rodape { border-top: 2px solid var(--tinta); padding: 22px 28px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--f-maquina); font-size: 14px; }
.rodape .credito { flex-basis: 100%; color: var(--lapis); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }