:root {
  --ri-ink: #201a17;
  --ri-paper: #faf6f0;
  --ri-accent: #b23a48;
  --ri-muted: #7a6f68;
}

body {
  background: var(--ri-paper);
  color: var(--ri-ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

h1, h2, h3, .site-brand-title {
  font-family: 'Playfair Display', Georgia, serif;
}

.site-header {
  border-bottom: 3px solid var(--ri-ink);
}

.site-brand-title {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ri-ink);
}

.site-footer {
  border-top: 1px solid #ddd3c7;
  color: var(--ri-muted);
  font-size: 0.9rem;
}

.footer-site-link {
  color: inherit;
  text-decoration: none;
}

.footer-site-link:hover,
.footer-site-link:focus-visible {
  color: var(--ri-accent);
  text-decoration: underline;
}

.revista-card {
  background: #fff;
  border: 1px solid #ece3d7;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 100%;
}

.revista-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(32, 26, 23, 0.12);
}

.revista-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #eee;
}

.revista-card .card-body {
  padding: 1rem 1.1rem 1.25rem;
}

.revista-card .fecha {
  color: var(--ri-muted);
  font-size: 0.85rem;
}

.portada-detalle img {
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(32, 26, 23, 0.18);
}

.prologo {
  font-size: 1.08rem;
  line-height: 1.75;
  white-space: pre-line;
}

.ilustrador-box {
  background: #fff;
  border: 1px solid #ece3d7;
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.ilustrador-instagram-link {
  display: inline-flex;
  color: var(--ri-muted);
}

.ilustrador-instagram-link:hover,
.ilustrador-instagram-link:focus-visible {
  color: var(--ri-accent);
}

/* Contorno muy sutil (gris casi blanco, a juego con los demás bordes del
   sitio) para delimitar el espacio de cada escritor/a sin que se vea
   pesado. */
.escritor-item {
  text-align: center;
  border: 1px solid #ece3d7;
  border-radius: 0.85rem;
  padding: 1.25rem 1rem 1.5rem;
}

.escritor-foto {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(32, 26, 23, 0.15);
}

/* Envuelve la foto + nombre de cada escritor/a. Cuando esa persona tiene
   biografía en WordPress, este es un <button> real (para poder abrir el
   modal); si no, es un <div> normal, sin clic. Las reglas de aquí abajo
   solo afectan al aspecto del botón, para que ninguno de los dos casos se
   vea distinto del otro salvo por el cursor. */
.escritor-perfil {
  display: block;
  width: 100%;
  text-align: inherit;
}

button.escritor-perfil {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Firefox le pone a los <button> un recuadro punteado propio, aparte del
   "outline" normal — sin esto, se ve como un recuadro extra alrededor del
   contenido aunque no esté enfocado con teclado. */
button.escritor-perfil::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button.escritor-perfil:focus {
  outline: none;
}

button.escritor-perfil:focus-visible {
  outline: 2px solid var(--ri-accent);
  outline-offset: 6px;
  border-radius: 10px;
}

button.escritor-perfil:hover .escritor-nombre,
button.escritor-perfil:focus-visible .escritor-nombre {
  color: var(--ri-accent);
}

/* El nombre siempre ocupa la misma altura (hasta dos líneas), sin importar
   si es corto o largo, para que lo que viene después —el título y el
   botón de publicaciones— quede exactamente a la misma altura en todas
   las tarjetas. Un nombre excepcionalmente largo se recorta a dos líneas
   en vez de estirar la tarjeta. */
.escritor-nombre {
  font-weight: 600;
  margin-top: 0.6rem;
  height: 2.6rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

/* Envuelve "Publica:" + el título del texto. Se imprime siempre, tenga o
   no título capturado, con una altura FIJA (no mínima), para que el botón
   de publicaciones quede exactamente a la misma altura en todas las
   tarjetas, sin importar el largo del título ni la fila en la que caiga
   la tarjeta. Se deja espacio para hasta 5 líneas de título, porque en la
   práctica varios títulos son largos y con solo 2 se cortaban a media
   palabra. */
.escritor-info {
  height: 7.3rem;
  overflow: hidden;
  margin-top: 0.3rem;
}

.escritor-publica-etiqueta {
  display: block;
  font-style: italic;
  color: var(--ri-muted);
  font-size: 0.8rem;
}

.escritor-titulo-texto {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  line-height: 1.25;
  overflow: hidden;
  color: var(--ri-accent);
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.05rem;
}

/* Espacio reservado para el botón de publicaciones, exista o no, para que
   la cuadrícula se vea pareja y el botón —cuando aparece— siempre esté a
   la misma altura. */
.escritor-conteo-wrap {
  margin-top: 0.6rem;
  min-height: 2.1rem;
}

.escritor-conteo-btn {
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}

.btn-descarga {
  background: var(--ri-accent);
  border-color: var(--ri-accent);
}

.btn-descarga:hover {
  background: #96222f;
  border-color: #96222f;
}

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ri-muted);
}