: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 4.5rem; max-width:34rem; }
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; }
}