/* ------------------------------------------------------------------ *
 * Errors Are Imminent — hoja de estilo del blog
 *
 * Dirección "editorial de autor": moderniza la legibilidad y el aire
 * manteniendo las señas de identidad del blog original de Creative
 * Codeworks (2007):
 *   - el banner errors_are_inminent.png
 *   - el título en barra negra
 *   - los enlaces con subrayado punteado
 *   - el característico cursor "crosshair" rojo al pasar por encima
 *
 * Novedades: cuerpo en serif de lectura con columna estrecha, capitular
 * al inicio de cada entrada, metadatos en versalitas monoespaciadas,
 * vista de lectura enfocada y modo oscuro automático.
 * ------------------------------------------------------------------ */

:root {
    /* Tipografía y paleta UNIFICADAS con el resto del sitio (static/site.css) y
       con el libro impreso: Palatino para leer, Helvetica Neue para los rótulos.
       El blog es una sección de creativecodeworks.com, no un sitio aparte.
       Se conservan sus señas propias: la barra negra del título, el banner y el
       subrayado punteado con cursor crosshair. */
    --serif: Palatino, "Palatino Linotype", Georgia, serif;
    --mono: "DejaVu Sans Mono", "SF Mono", Menlo, Consolas, monospace;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --bg:        #F4F1E9;   /* papel, como el resto del sitio */
    --ink:       #0B0D11;   /* oscuro */
    --muted:     #555555;   /* metadatos */
    --card:      #EAE4D6;   /* caja de historia: crema */
    --card-line: #ddd6c7;
    --bar:       #0B0D11;   /* barra de título: se queda, con el oscuro del sitio */
    --bar-ink:   #EAE4D6;
    --accent:    #B8501F;   /* terracota de la colección, en vez del rojo */
    --rule:      #ddd6c7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #0B0D11;   /* el oscuro del sitio */
        --ink:       #EAE4D6;
        --muted:     #9a958a;
        --card:      #15181e;
        --card-line: #262b33;
        --bar:       #000000;
        --bar-ink:   #EAE4D6;
        --accent:    #D9713F;   /* terracota aclarado para que contraste en oscuro */
        --rule:      #262b33;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--serif);
    background: var(--bg);
    color: var(--ink);
    font-size: 19px;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Enlaces: subrayado punteado; hover rojo + crosshair (identidad) --- */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .12s ease;
}
a:hover { color: var(--accent); cursor: crosshair; }

img { border: 0; max-width: 100%; height: auto; }

/* --- Contenedor general --- */
#pagina {
    width: 1040px;
    max-width: 92%;
    margin: 0 auto;
    padding-bottom: 40px;
}

/* --- Cabecera con logo + banner --- */
#logo {
    text-align: center;
    padding: 1.6em .5em 1.2em;
}
#logo a { text-decoration: none; }
#logo .banner { margin-top: 14px; }
#logo .banner img { max-height: 130px; }
@media (prefers-color-scheme: dark) {
    /* el logo gif tiene fondo claro: dale un respaldo sutil */
    #logo img { background: transparent; }
}

/* --- Disposición de dos columnas (portada, categorías, archivo) --- */
#cuerpo { display: flow-root; }

#content {
    float: left;
    width: 700px;
    max-width: 100%;
    padding: 1em 2em 1em 0;
}

/* --- Vista de lectura enfocada (una entrada): sin sidebar, centrada --- */
#content.single {
    float: none;
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}
#cuerpo.single #sidebar { display: none; }

#sidebar {
    float: right;
    width: 240px;
    padding: 1.2em;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: transparent;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
}
#sidebar h2 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 4px;
    margin: 1.4em 0 .6em;
}
#sidebar h2:first-of-type { margin-top: 0; }
#sidebar ul { margin: 0; padding-left: 1.1em; }
#sidebar li { margin-bottom: 3px; }
#sidebar a { text-decoration: none; }
#sidebar a:hover { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; }
#sidebar .hotlist a { display: inline; }
.sidebar-foto { text-align: center; margin-bottom: 1em; }
.sidebar-foto img { border-radius: 4px; }

@media (max-width: 860px) {
    #content, #sidebar { float: none; width: 100%; padding-right: 0; }
    #sidebar { margin-top: 2em; }
}

/* --- Cabecera de una entrada: fecha + categoría en versalitas mono --- */
.blog_story_date {
    margin: 30px 0 8px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.blog_story_date a { text-decoration: none; color: var(--muted); }
.blog_story_date a:hover { color: var(--accent); }

.blog_story {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 5px;
    padding: 26px 30px;
    margin-bottom: 14px;
}
#content.single .blog_story { padding: 30px 34px; }

/* --- Título en barra negra (seña de identidad) --- */
.blog_story_title {
    display: block;
    margin: 0 0 14px;
    padding: 8px 12px;
    color: var(--bar-ink);
    background: var(--bar);
    border-radius: 3px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.3;
    text-decoration: none;
}
a.blog_story_title { text-decoration: none; }
a.blog_story_title:hover { color: var(--bar-ink); background: #2a2a2a; cursor: pointer; }

.blog_story_subtitle {
    margin: -4px 0 16px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--muted);
}
.blog_story_subtitle a { text-decoration: none; }
.blog_story_subtitle a:hover { color: var(--accent); }

/* --- Cuerpo de lectura (serif, medida ~68 caracteres) --- */
.blog_story_body {
    font-family: var(--serif);
    font-size: 1.0em;
    line-height: 1.72;
}
#content.single .blog_story_body { max-width: 40em; }
.blog_story_body p { margin: 0 0 1.1em; }

/* Capitular al inicio de cada entrada en la vista de lectura */
#content.single .blog_story_body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 3.4em;
    line-height: .78;
    padding: .02em .1em 0 0;
    color: var(--ink);
}

.blog_story_body h2,
.blog_story_body h3 { font-family: var(--serif); color: var(--ink); line-height: 1.3; }
.blog_story_body h2 { font-size: 1.35em; margin: 1.6em 0 .5em; }
.blog_story_body h3 { font-size: 1.15em; margin: 1.4em 0 .4em; }
.blog_story_body ul,
.blog_story_body ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.blog_story_body li { margin-bottom: .3em; }
.blog_story_body img { display: block; margin: 1.2em auto; border-radius: 3px; }
.blog_story_body blockquote {
    margin: 1.3em 0;
    padding: .3em 1.2em;
    border-left: 3px solid var(--accent);
    color: var(--muted);
    font-style: italic;
}
.blog_story_body iframe,
.blog_story_body object,
.blog_story_body embed { max-width: 100%; margin: 1.2em 0; }

.seguir-leyendo {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
}
.seguir-leyendo a { text-decoration: none; }
.seguir-leyendo a::after { content: " →"; }
.seguir-leyendo a:hover { color: var(--accent); }

/* --- Código --- */
pre {
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
}
code { font-family: var(--mono); font-size: .9em; }
:not(pre) > code {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 3px;
    padding: .08em .35em;
}

/* --- Cabecera de sección (categoría / archivo) --- */
.pageheader {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
    margin: 0 0 18px;
}

/* --- Paginación de listados (portada, categorías, archivo) --- */
.pagination {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 28px 0 6px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
}
.pagination a { text-decoration: none; }
.pagination a:hover { color: var(--accent); }
.pagination .newer { margin-right: auto; }
.pagination .older { margin-left: auto; }
.pagination .pageinfo { color: var(--muted); margin: 0 auto; }

/* --- Navegación entre entradas (vista de lectura) --- */
.postnav {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin: 28px 0 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.postnav a { text-decoration: none; max-width: 46%; }
.postnav a:hover { color: var(--accent); }
.postnav .next { margin-left: auto; text-align: right; }
.volver { text-align: center; margin: 18px 0 0; font-family: var(--mono); font-size: 12px; }
.volver a { text-decoration: none; }

/* --- Pie (flujo normal, no fijo) --- */
#footer {
    margin-top: 50px;
    padding: 18px 0 30px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5em 1.5em;
}
#footer a { text-decoration: none; color: var(--muted); }
#footer a:hover { color: var(--accent); cursor: crosshair; }
#footer .info { margin-left: auto; }

/* El banner de «Errors Are Imminent» y el logotipo son PNG con fondo BLANCO
   opaco. Sobre el blanco de antes se fundían; sobre el papel crema del sitio
   recortaban un rectángulo, y son lo primero que se ve al entrar. 'multiply'
   funde ese blanco con el fondo sin tener que retocar los ficheros, que son los
   originales de 2007. Solo en modo claro: en oscuro haría desaparecer el dibujo. */
@media (prefers-color-scheme: light) {
    #logo img, header img { mix-blend-mode: multiply; }
}