/* ==========================================================
   pedronovo.com · NOTAS DE CAMPO
   Lista de notas e página de leitura. Valores em tokens.css.
   ========================================================== */

/* ---------- Lista ---------- */
.notas { display: grid; }
.notas__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  gap: var(--e-3);
  align-items: start;
  padding-block: var(--e-3);
}
.notas__ligacao { display: grid; gap: 0.35rem; max-width: var(--coluna); }
.notas__data {
  font-family: var(--maquina);
  font-size: var(--t-meta);
  color: var(--granito);
  font-variant-numeric: tabular-nums;
}
.notas__titulo {
  font-family: var(--serifa);
  font-size: var(--t-bio);
  line-height: 1.2;
}
.notas__desc { font-size: var(--t-texto); line-height: 1.5; color: var(--granito); }
.notas__ligacao:hover .notas__titulo { color: var(--ferrugem); }
.notas__imagem {
  width: 9rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--vazio);
}
.nota__filtro {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-bio);
  margin-bottom: var(--e-2);
}
.nota__filtro .maquina { margin-right: 0.4em; }
.nota__rss { margin-top: var(--e-4); }

/* ---------- Página da nota ---------- */
.nota { padding-block: var(--e-4) 0; }
.nota__voltar { margin-bottom: var(--e-4); }
.nota__topo { max-width: var(--coluna); margin-bottom: var(--e-4); }
.nota__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--e-3);
  font-family: var(--maquina);
  font-size: var(--t-meta);
  color: var(--granito);
  margin-bottom: var(--e-2);
}
.nota__meta a:hover { color: var(--ferrugem); }
.nota__titulo {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-secao);
  line-height: 1.12;
  text-wrap: balance;
}
.nota__autor {
  margin-top: var(--e-2);
  font-family: var(--maquina);
  font-size: var(--t-meta);
  color: var(--granito);
}

.nota__capa { max-width: calc(var(--coluna) + 8rem); margin: 0 0 var(--e-4); }
.nota__capa img { width: 100%; height: auto; background: var(--vazio); }
.nota__capa figcaption,
.nota__figura figcaption {
  margin-top: 0.5rem;
  font-family: var(--maquina);
  font-size: var(--t-mini);
  color: var(--granito);
}

/* Texto corrido: coluna estreita, parágrafos curtos bem separados */
.nota__corpo {
  max-width: var(--coluna);
  font-family: var(--serifa);
  font-size: var(--t-leitura);
  line-height: 1.65;
}
.nota__corpo > * + * { margin-top: 1.05em; }
.nota__corpo h2,
.nota__corpo h3 {
  font-family: var(--maquina);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--espaco-letras);
  text-transform: uppercase;
  color: var(--granito);
  margin-top: 2.2em;
}
.nota__corpo a { color: var(--ferrugem); }
.nota__corpo a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nota__corpo blockquote {
  padding-left: var(--e-3);
  color: var(--granito);
  font-style: italic;
}
.nota__corpo ul,
.nota__corpo ol { padding-left: 1.2em; }
.nota__corpo ul { list-style: "– "; }
.nota__corpo ol { list-style: decimal; }
.nota__corpo li + li { margin-top: 0.35em; }
.nota__corpo hr { border: 0; height: 0; margin-block: 2em; }
.nota__figura img { width: 100%; height: auto; }

/* Separador de cenas: o asterisco sozinho numa linha */
.nota__cena {
  text-align: center;
  font-family: var(--maquina);
  font-size: var(--t-meta);
  color: var(--granito-claro);
  margin-block: 2em !important;
  letter-spacing: 0;
}

/* Linha que liga a nota ao livro em curso */
.nota__obra {
  max-width: var(--coluna);
  margin-top: var(--e-4);
  font-family: var(--serifa);
  font-style: italic;
  font-size: var(--t-texto);
  color: var(--granito);
}
.nota__obra a { color: var(--ferrugem); }
.nota__obra a em { font-style: normal; }

/* Fontes: tipografia mais pequena */
.nota__fontes {
  max-width: var(--coluna);
  margin-top: var(--e-5);
  font-size: var(--t-fontes);
  line-height: 1.55;
  color: var(--tinta);
}
.nota__fontes h2,
.nota__serie h2 {
  font-family: var(--maquina);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--espaco-letras);
  text-transform: uppercase;
  color: var(--granito);
  margin-bottom: var(--e-2);
}
.nota__fontes ul { display: grid; gap: 0.6em; }
.nota__fontes li { padding-left: 1.1em; text-indent: -1.1em; }
.nota__fontes li::before { content: "– "; color: var(--granito); }
.nota__fontes a { color: var(--ferrugem); word-break: break-word; }
.nota__fontes p + p { margin-top: 0.6em; }

.nota__palavras {
  max-width: var(--coluna);
  margin-top: var(--e-4);
  font-family: var(--maquina);
  font-size: var(--t-meta);
  line-height: 1.8;
}
.nota__palavras a:hover { color: var(--ferrugem); }

.nota__serie { max-width: var(--coluna); margin-top: var(--e-4); }
.nota__serie ul { display: grid; gap: 0.4rem; font-size: var(--t-texto); }
.nota__serie .granito { font-family: var(--maquina); font-size: var(--t-meta); margin-right: 0.5em; }
.nota__serie a:hover { color: var(--ferrugem); }

.nota__vizinhas {
  max-width: var(--coluna);
  margin-top: var(--e-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  font-family: var(--serifa);
  font-size: var(--t-texto);
}
.nota__vizinhas a { display: grid; gap: 0.2rem; }
.nota__vizinhas a[rel="next"] { text-align: right; grid-column: 2; }
.nota__vizinhas span {
  font-family: var(--maquina);
  font-size: var(--t-meta);
  color: var(--granito);
}
.nota__vizinhas a:hover { color: var(--ferrugem); }

/* ---------- Ecrãs estreitos ---------- */
@media (max-width: 640px) {
  .notas__item { grid-template-columns: minmax(0, 1fr); }
  .notas__imagem { grid-row: 1; width: 100%; max-width: 20rem; }
  .nota__vizinhas { grid-template-columns: minmax(0, 1fr); }
  .nota__vizinhas a[rel="next"] { grid-column: 1; text-align: left; }
}