/* unviejoprogramador.com — "listado impreso, fósforo de noche"
   claro = man page en papel · oscuro = CRT ámbar · prosa=serif, chrome=mono */
:root {
  --papel: #f5f2e9; --tinta: #26221a; --tenue: #6f6753; --linea: #d9d2bf;
  --ambar: #935a08; --ambar-vivo: #b06a10; --bloque: #edeadf;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #16120b; --tinta: #e3d6b8; --tenue: #9a8a68; --linea: #3a3222;
          --ambar: #e8a03e; --ambar-vivo: #f0b054; --bloque: #201a10; }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0 auto; max-width: 44rem; padding: 2.5rem 1.25rem 4rem;
       background: var(--papel); color: var(--tinta);
       font-family: var(--serif); font-size: 1.06rem; line-height: 1.72; }
a { color: var(--ambar); text-underline-offset: 3px; }
a:hover { color: var(--ambar-vivo); }
a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* chrome de shell */
.shell { font-family: var(--mono); font-size: .86rem; color: var(--tenue); margin: 0 0 .4rem; }
.shell b { color: var(--tinta); font-weight: 600; }
.prompt::before { content: "unviejoprogramador ~ $ "; color: var(--ambar); }
.cursor::after { content: "▮"; color: var(--ambar); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }

header.top { border-bottom: 1px solid var(--linea); padding-bottom: 1.1rem; margin-bottom: 2rem; }
h1.marca { font-family: var(--mono); font-weight: 600; font-size: 1.35rem; margin: .6rem 0 .15rem; letter-spacing: -.02em; }
h1.marca a { color: var(--tinta); text-decoration: none; }
.lema { font-family: var(--mono); font-size: .84rem; color: var(--tenue); margin: 0; }
.lema::before { content: "// "; color: var(--ambar); }
nav.idiomas { float: right; font-family: var(--mono); font-size: .82rem; padding-top: .2rem; }

/* índice ls -la */
.ls { font-family: var(--mono); font-size: .88rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.ls li { display: grid; grid-template-columns: 7.5rem 3rem 6.5rem 4.5rem 1fr; gap: .8rem;
         padding: .5rem .4rem; border-bottom: 1px dashed var(--linea); align-items: baseline; }
.ls .perm, .ls .fecha, .ls .peso { color: var(--tenue); }
.ls .lang { color: var(--ambar); }
.ls li a { text-decoration: none; }
.ls li a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .ls li { grid-template-columns: 3rem 4.5rem 1fr; }
  .ls .perm, .ls .fecha { display: none; } }

/* artículo */
article h1 { font-family: var(--mono); font-size: 1.6rem; line-height: 1.3; letter-spacing: -.02em; margin: .3rem 0 .4rem; }
.meta { font-family: var(--mono); font-size: .8rem; color: var(--tenue); margin-bottom: 2.2rem; }
article h2 { font-family: var(--mono); font-size: 1.05rem; margin: 2.4rem 0 .6rem; }
article h2::before { content: "## "; color: var(--ambar); }
article p { margin: 0 0 1.1rem; }
article em { font-style: italic; }
code { font-family: var(--mono); font-size: .88em; background: var(--bloque);
       padding: .1em .35em; border-radius: 3px; }
pre { font-family: var(--mono); font-size: .85rem; line-height: 1.55; background: var(--bloque);
      border-left: 3px solid var(--ambar); padding: .9rem 1.1rem; overflow-x: auto; margin: 1.4rem 0; }
pre code { background: none; padding: 0; }
blockquote { margin: 1.4rem 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--linea);
             color: var(--tenue); font-style: italic; }
hr { border: none; border-top: 1px solid var(--linea); margin: 2.2rem 0; }
.firma { font-family: var(--mono); font-size: .9rem; color: var(--tenue); }

footer.pie { border-top: 1px solid var(--linea); margin-top: 3rem; padding-top: 1rem;
             font-family: var(--mono); font-size: .78rem; color: var(--tenue); }
footer.pie .prompt::before { content: "~ $ "; }