/* ==========================================================
   diario de un esclavo

   tercera edición

   edición tipográfica 2.0

   el lector no está navegando.

   está leyendo.
   ========================================================== */


/* ==========================================================
   variables
   ========================================================== */

:root{

  --bg:#11151b;
  --text:#e8e3d8;
  --muted:#9ea7b3;
  --link:#d6c39a;
  --link-hover:#efe0bc;
  --border:#2b3440;

  --max-width:760px;

}


/* ==========================================================
   base
   ========================================================== */

*{
  box-sizing:border-box;
}

html{
  font-size:19px;
}

body{

  margin:0;

  background:var(--bg);

  color:var(--text);

  font-family:Georgia,"Times New Roman",serif;

  line-height:1.9;

}

.container{

  width:min(92%,var(--max-width));

  margin:0 auto;

}


/* ==========================================================
   enlaces
   ========================================================== */

a{

  color:var(--link);

  text-decoration:none;

}

a:hover{

  color:var(--link-hover);

}


/* ==========================================================
   cabecera
   ========================================================== */

.site-header{

  padding:4.5rem 0 3rem;

}

.site-title{

  margin:0;

  font-size:3rem;

  font-weight:400;

  letter-spacing:-0.02em;

}

.site-title a{

  color:var(--text);

}

.site-description{
/* ==========================
   Archivo
========================== */

.archivo-panels {
  margin-top: 2rem;
}

.archivo-panel {
  display: none;
}

.archivo-panel.active {
  display: block;
}

.archivo-panel h2 {
  margin-top: 0;
}

.archivo-placeholder {
  color: #777;
}
  margin-top:1rem;

  color:var(--muted);

  font-size:1.05rem;

}


/* ==========================================================
   navegación principal
   ========================================================== */

.main-nav{

  margin-top:3rem;

  padding-top:1.5rem;

  border-top:1px solid var(--border);

}

.main-nav ul{

  list-style:none;

  margin:0;

  padding:0;

  display:flex;

  flex-wrap:wrap;

  gap:1.4rem 2.2rem;

}

.main-nav a{

  color:var(--muted);

}

.main-nav a:hover{

  color:var(--link);

}


/* ==========================================================
   contenido
   ========================================================== */

.content{

  padding:1rem 0 4rem;

}

section{

  margin-bottom:5rem;

}


/* ==========================================================
   títulos
   ========================================================== */

h1{

  margin:0 0 1rem;

  font-size:2.3rem;

  font-weight:400;

  line-height:1.2;

}

h2{

  margin:0 0 2rem;

  font-size:1.35rem;

  font-weight:400;

  color:var(--muted);

}

h3{

  margin:0 0 .6rem;

  font-size:1.45rem;

  font-weight:400;

}


/* ==========================================================
   portada
   ========================================================== */

.intro{

  font-size:1.35rem;

  line-height:2;

  margin:0 0 2rem;

}

.start-link{

  margin:0;

}


/* ==========================================================
   listas de entradas
   ========================================================== */

.post-list{

  list-style:none;

  margin:0;

  padding:0;

}

.post-list li{

  margin-bottom:3rem;

}

.post-date{

  margin:.4rem 0 1rem;

  color:var(--muted);

  font-size:.9rem;

}


/* ==========================================================
   artículo
   ========================================================== */

.post-single h1{

  margin-bottom:.6rem;

}

.post-meta{

  margin-bottom:1.6rem;

  color:var(--muted);

  font-size:.95rem;

}

.post-content{

  font-size:1.05rem;

}

.post-content p{

  margin:1.4rem 0;

}


/* ==========================================================
   imágenes
   ========================================================== */

.post-content img{

  display:block;

  max-width:100%;

  height:auto;

  margin:2rem auto;

}


/* ==========================================================
   citas
   ========================================================== */

blockquote{

  margin:2rem 0;

  padding-left:1.5rem;

  border-left:3px solid var(--border);

  color:var(--muted);

  font-style:italic;

}


/* ==========================================================
   listas
   ========================================================== */

.post-content ul,
.post-content ol{

  margin:1.5rem 0;

  padding-left:1.5rem;

}

.post-content li{

  margin:.4rem 0;

}

/* ==========================================================
   final del capítulo
   ========================================================== */

.post-tags{

  margin:2rem 0 1.5rem;

  color:var(--muted);

  font-size:.95rem;

  line-height:1.8;

}

.post-tags a{

  color:var(--muted);

}

.post-tags a:hover{

  color:var(--link);

}


/* ==========================================================
   separación
   ========================================================== */

.post-single hr{

  margin:1.2rem 0 1.4rem;

  border:0;

  border-top:1px solid var(--border);

}


/* ==========================================================
   navegación entre capítulos
   ========================================================== */

.chapter-nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:2rem;

  margin:0 0 1.2rem;

  font-size:.95rem;

}

.chapter-prev{

  flex:1;

  text-align:left;

}

.chapter-archive{

  flex:0;

  white-space:nowrap;

  text-align:center;

}

.chapter-next{

  flex:1;

  text-align:right;

}

.chapter-nav a{

  color:var(--muted);

}

.chapter-nav a:hover{

  color:var(--link);

}

/* ==========================================================
   índice temático
   ========================================================== */

.topic-map{

  margin-top:1.8rem;

  font-size:1.05rem;

  line-height:1.85;

}

.topic-map a{

  color:var(--text);

  text-decoration:none;

}

.topic-map a:hover{

  color:var(--link);

}

.topic-map a span{

  color:var(--muted);

}

.topic-separator{

  color:var(--muted);

  margin:0 .45rem;

}

.archivo-years {
  margin-top: 2rem;
  line-height: 2.2;
  font-size: 1.05rem;
}

.archivo-years a {
  text-decoration: none;
}

.archivo-years a:hover {
  text-decoration: underline;
}

/* ==========================
   Archivo
========================== */

.archivo-years {
  margin: 2rem 0 0;
  line-height: 2.2;
}

.archivo-years a {
  color: inherit;
  text-decoration: none;
}

.archivo-years a:hover {
  text-decoration: underline;
}


/* ==========================
   Archivo
========================== */

.archivo-panels {
  margin-top: 2rem;
}

.archivo-panel {
  display: none;
}

.archivo-panel.active {
  display: block;
}

.archivo-panel h2 {
  margin-top: 0;
}

.archivo-placeholder {
  color: #777;
}