:root {
  --cor-fundo: #ffffff;
  --cor-papel: #fffdf8;
  --cor-texto: #2b241d;
  --cor-texto-suave: #6b5f52;
  --cor-terracota: #b5482f;
  --cor-ocre: #d3941f;
  --cor-azulejo: #2c6472;
  --cor-borda: #e6dcc9;

  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-corpo: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--cor-fundo);
}

body {
  margin: 0;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.hero {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: var(--cor-texto);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cor-texto-suave);
}

/* Cabeçalho */

.topo {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}

.topo__marca {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.topo__marca:hover {
  color: var(--cor-texto);
}

.topo__legenda {
  margin: 0.5rem 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  font-style: italic;
}

/* Ornamento inspirado em bandeirinha / cordel */

.ornamento {
  height: 14px;
  max-width: 42rem;
  margin: 0 auto 3rem;
  background-image: repeating-linear-gradient(
    135deg,
    var(--cor-terracota) 0 9px,
    var(--cor-ocre) 9px 18px,
    var(--cor-azulejo) 18px 27px,
    transparent 27px 36px
  );
  background-position: center;
  opacity: 0.85;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.ornamento--rodape {
  margin: 3rem auto 2rem;
}

/* Conteúdo geral */

.conteudo {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* Página inicial */

.inicio__intro {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}

.lista-textos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.cartao {
  border-bottom: 1px solid var(--cor-borda);
}

.cartao:last-child {
  border-bottom: none;
}

.cartao__link {
  display: block;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
}

.cartao__relacao {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.cartao__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.4rem;
}

.cartao__resumo {
  margin: 0 0 0.5rem;
  color: var(--cor-texto-suave);
}

.cartao__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* Página de texto individual */

.texto__cabecalho {
  text-align: center;
  margin-bottom: 2.5rem;
}

.texto__relacao {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.texto__titulo {
  margin: 0 0 0.6rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
}

.texto__meta {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.texto__corpo p {
  margin: 0 0 1.3rem;
}

.texto__corpo h2 {
  font-family: var(--fonte-titulo);
  margin-top: 2.2rem;
}

.texto__voltar {
  margin-top: 3rem;
  text-align: center;
}

/* Rodapé */

.rodape {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .topo {
    padding-top: 2.5rem;
  }

  .texto__titulo {
    font-size: 1.7rem;
  }
}