/* Base compartilhada pelos HTML do estudio. Le so os tokens; nenhuma cor literal aqui. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:wght@400;600&display=swap");
@import url("tokens.css");

* { box-sizing: border-box; }
html { font-family: var(--font-family-body); font-size: var(--font-size-body); color: var(--color-papel-tinta); }
body { margin: 0; background: var(--color-papel-bg); }
h1, h2, h3, .display { font-family: var(--font-family-display); font-weight: var(--font-weight-display); margin: 0; }
h1 { font-size: var(--font-size-display); line-height: 1.05; }
h2 { font-size: var(--font-size-title); line-height: 1.15; }
h3 { font-size: var(--font-size-lead); }
p { margin: 0 0 var(--space-md); line-height: 1.45; }
small, .micro { font-size: var(--font-size-micro); color: var(--color-papel-apagado); }
hr.filete { border: 0; border-top: var(--border-filete) solid var(--color-papel-filete); margin: var(--space-lg) 0; }
.laranja { color: var(--color-laranja-tinta); }
.carimbo {
  display: inline-block; padding: var(--space-xs) var(--space-sm);
  border: var(--border-carimbo) solid var(--color-laranja-tinta); color: var(--color-laranja-tinta);
  border-radius: var(--radius-card); font-weight: var(--font-weight-title);
  letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg);
}
/* logo: sempre o SVG de logo/, escolhido pelo fundo (README de logo/); a altura e a do bloco inteiro */
.logo { display: block; height: 52px; width: auto; align-self: flex-start; flex: none; }
.logo.grande { height: 84px; }

/* impressao A4 */
.folha {
  width: 210mm; min-height: 297mm; margin: var(--space-xl) auto; padding: 22mm 20mm 18mm;
  background: var(--color-papel-bg); position: relative;
  box-shadow: var(--shadow-folha);
}
.folha .rodape {
  position: absolute; left: 20mm; right: 20mm; bottom: 12mm;
  border-top: var(--border-filete) solid var(--color-papel-filete); padding-top: var(--space-sm);
  font-size: var(--font-size-micro); color: var(--color-papel-apagado);
  display: flex; justify-content: space-between;
}

/* impressao A4: fica por ultimo porque .folha acima tambem define min-height e a regra posterior vence */
@page { size: A4; margin: 0; }
@media print {
  body { background: white; }
  /* altura fixa um fio abaixo de 297 mm: min-height igual a pagina faz o Chrome
     transbordar por subpixel e imprimir uma segunda folha em branco */
  .folha { box-shadow: none; margin: 0; min-height: 0; height: 296mm; overflow: hidden; }
  .folha + .folha { page-break-before: always; }
  .nao-imprime { display: none; }
}