* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--papel);
  color: var(--tinta);
}

/* Alinhado à esquerda, não centralizado: cartaz tem margem, e o texto
   corrido do subtítulo fica mais fácil de ler ancorado numa borda. */
.app-header {
  padding: var(--e6) var(--e5) var(--e4);
  border-bottom: 1px solid var(--linha);
}

/* Classe, não `.app-header h1`: a home tem um <h1> dentro de .app-header
   (o wordmark, com sua própria regra) — um seletor de elemento aqui
   bateria de volta contra ele com a mesma especificidade que o defende.
   O festival não usa mais .app-header: seu <h1> mora em .faixa-festival,
   fora do alcance deste seletor. Só quem pede a classe ganha esta
   regra — é o caso do <h1> de 404.html. */
.titulo-pagina {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-secao);
  font-weight: 800;
  color: var(--tinta);
}

.subtitulo {
  margin: var(--e2) 0 0;
  color: var(--tinta-suave);
  font-size: var(--t-corpo-menor);
  max-width: 64ch;
}

.voltar {
  display: inline-block;
  margin-bottom: var(--e2);
  color: var(--tinta-suave);
  font-size: var(--t-rotulo-menor);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

.voltar:hover {
  color: var(--tinta);
  text-decoration: underline;
}

.carregando,
.erro {
  text-align: center;
  color: var(--tinta-suave);
  margin-top: var(--e7);
  font-size: var(--t-corpo);
}

.erro {
  color: var(--conflito-tinta);
}

/* Sem sombra: a definição vem da borda de 1px. */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  padding: var(--e2) var(--e4);
  z-index: 4;
}

.app-footer p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--tinta-tenue);
  font-size: var(--t-nota);
  line-height: 1.35;
  text-align: center;
}

/* Esconde da vista sem tirar da árvore de acessibilidade. display:none e
   visibility:hidden removeriam o conteúdo do leitor de tela junto com a
   imagem — e no modal é justamente ele que substitui a lista visível,
   sem a qual o modal ficaria mudo para quem não enxerga. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}