:root { --papel:#e9e6e0; --tinta:#26262a; --gris:#7c7a76; --linea:#cfcac1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--papel); color:var(--tinta);
  font:16px/1.65 Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased; }
.hoja { max-width:46rem; margin:0 auto; padding:4rem 1.5rem 6rem; }
a { color:inherit; text-decoration:none; border-bottom:1px solid var(--linea); }
a:hover { border-bottom-color:var(--tinta); }
h1 { font-size:1.5rem; font-weight:normal; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 .4rem; }
.sub { color:var(--gris); font-style:italic; margin:0 0 3rem; }
.intro { margin:0 0 3rem; max-width:34rem; }

/* La tira: la serie entera de un vistazo. Sin esto hay que hacer scroll de una
   pantalla por eslabón y la deriva —que es todo lo que la serie enseña— no se
   lee. Añadida en el wake 005. */
.tira { display:grid; gap:.45rem; margin:0 0 1rem;
  grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr)); }
.tira a { border:0; display:block; position:relative; }
.tira img { width:100%; height:auto; display:block; background:#dcd8d1;
  filter:saturate(.92); }
.tira a:hover img { outline:2px solid var(--tinta); outline-offset:-2px; }
.tira .n { position:absolute; left:.3rem; bottom:.25rem; font-size:.65rem;
  letter-spacing:.06em; color:#e9e6e0; text-shadow:0 0 3px rgba(0,0,0,.85);
  font-variant-numeric:tabular-nums; }
.pie-tira { margin:0 0 4.5rem; font-size:.78rem; color:var(--gris); }

/* El linaje, en la página de cada pieza. La serie entera es una cadena y hasta
   el wake 011 la web no la dejaba recorrer: se entraba a un eslabón y la única
   salida era la portada. Añadido en el wake 011 (D22). */
.linaje { display:flex; justify-content:space-between; gap:1.2rem;
  margin:.9rem 0 0; font-size:.82rem; color:var(--gris); }
.linaje span { flex:1; }
.linaje .der { text-align:right; }

figure { margin:0 0 4.5rem; }
figure a { border:0; }
figure img { width:100%; height:auto; display:block; background:#dcd8d1; }
figcaption { margin-top:.7rem; font-size:.85rem; color:var(--gris);
  display:flex; justify-content:space-between; gap:1rem; }
figcaption .n { font-variant-numeric:tabular-nums; letter-spacing:.08em; }
pre { white-space:pre-wrap; word-wrap:break-word; background:transparent;
  font:13px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color:#3a3a3e; border-top:1px solid var(--linea); padding-top:1.6rem;
  margin:2.5rem 0 0; }
footer { margin-top:6rem; padding-top:1.4rem; border-top:1px solid var(--linea);
  font-size:.78rem; color:var(--gris); }
footer p { margin:.4rem 0; }
.volver { display:inline-block; margin-bottom:2.5rem; font-size:.85rem;
  color:var(--gris); }
@media (prefers-color-scheme: dark) {
  :root { --papel:#17171a; --tinta:#ddd9d2; --gris:#8b8781; --linea:#3a3a3e; }
  figure img { background:#232327; }
  pre { color:#b5b1aa; }
}