/* ==========================================================================
   Reader mode — a quiet, book-like alternative to the BOOTSTRA.386 look.
   Light and dark are exact tonal negatives: slate-blue ink on cream paper,
   cream ink on slate-blue paper. Type: Satoshi (variable).
   All rules are scoped under html.reader so the retro theme is untouched.
   ========================================================================== */

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
         url('fonts/Satoshi-Variable.woff') format('woff');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('fonts/Satoshi-VariableItalic.woff') format('woff');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* ---- palettes ---- */
html.reader {
    --paper:   #F6F1E5;
    --surface: #EFE8D8;
    --ink:     #232B3A;
    --muted:   #66707F;
    --accent:  #3E5C8A;
    --accent-strong: #2C4368;
    --rule:    #DFD6C2;
    --code-bg: #ECE4D2;
}
html.reader.reader-dark {
    --paper:   #232B3A;
    --surface: #2A3448;
    --ink:     #EDE7D8;
    --muted:   #9AA3B5;
    --accent:  #93B0DE;
    --accent-strong: #B8CDEE;
    --rule:    #3A455C;
    --code-bg: #1C2331;
}
@media (prefers-color-scheme: dark) {
    html.reader:not(.reader-light) {
        --paper:   #232B3A;
        --surface: #2A3448;
        --ink:     #EDE7D8;
        --muted:   #9AA3B5;
        --accent:  #93B0DE;
        --accent-strong: #B8CDEE;
        --rule:    #3A455C;
        --code-bg: #1C2331;
    }
}

/* ---- base ---- */
html.reader body {
    font-family: 'Satoshi', system-ui, sans-serif !important;
    font-size: 17px;
    line-height: 1.75;
    background: var(--paper) !important;
    color: var(--ink) !important;
    text-shadow: none !important;
    transition: background 0.25s ease, color 0.25s ease;
}
html.reader ::selection { background: var(--accent); color: var(--paper); }

html.reader p, html.reader li, html.reader td, html.reader th,
html.reader h1, html.reader h2, html.reader h3, html.reader h4,
html.reader h5, html.reader h6, html.reader span, html.reader div,
html.reader a, html.reader label, html.reader small {
    font-family: 'Satoshi', system-ui, sans-serif;
    text-shadow: none !important;
}

/* ---- reading column ---- */
html.reader #content.container {
    width: auto !important;
    max-width: 54rem;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}
html.reader .row-fluid { width: auto; }

/* ---- headings ---- */
html.reader h1, html.reader h2, html.reader h3, html.reader h4 {
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ink) !important;
    background: none !important;
    text-transform: none;
    text-align: left;
    white-space: normal;
}
html.reader h2 { margin-bottom: 0.6em; }
/* the 386 theme decorates headings with ">>>"/"<<<" content — not in reader mode */
html.reader h1:before, html.reader h1:after,
html.reader h2:before, html.reader h2:after,
html.reader h3:before, html.reader h3:after,
html.reader h4:before, html.reader h4:after { content: none !important; }
html.reader h1 { font-size: 1.9rem; }
html.reader h2 { font-size: 1.45rem; margin-top: 2.2em; }
html.reader h3 { font-size: 1.2rem; }
html.reader h4 { font-size: 1.05rem; }
html.reader .page-header {
    border-bottom: 1px solid var(--rule);
    background: none !important;
    padding: 0 0 0.6em;
    margin: 2.2em 0 1.4em;
}
html.reader .page-header h1 { color: var(--ink) !important; }
html.reader .page-header h1 b { font-weight: 850; }
html.reader .page-header h1 span { color: var(--muted) !important; opacity: 1 !important; font-weight: 450; }

/* ---- links ---- */
html.reader a { color: var(--accent) !important; text-decoration: none; background: none !important; }
html.reader a:hover { color: var(--accent-strong) !important; text-decoration: underline; text-underline-offset: 3px; }
html.reader #content a { font-weight: 530; }

/* ---- navbar: quiet fixed top bar ---- */
html.reader .navbar-fixed-top { position: fixed; }
html.reader .navbar .navbar-inner {
    background: var(--paper) !important;
    border: none;
    border-bottom: 1px solid var(--rule);
    box-shadow: none !important;
    filter: none;
    transition: background 0.25s ease;
}
html.reader .navbar .brand {
    color: var(--ink) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: none !important;
}
/* align menu links on the same text baseline as the site title */
@media (min-width: 980px) {
    html.reader .navbar .navbar-inner > .container { display: flex; align-items: baseline; }
    html.reader .navbar .brand { float: none; margin-left: 0; }
    html.reader .navbar .nav-collapse { flex: 1; }
    html.reader .navbar .nav { float: none; display: flex; align-items: baseline; margin: 0; }
    html.reader .navbar .nav > li { float: none; }
}
html.reader .navbar .nav, html.reader .navbar .nav > li {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
html.reader .navbar .nav > li > a {
    color: var(--muted) !important;
    font-weight: 550;
    text-shadow: none !important;
    background: none !important;
    transition: color 0.15s ease;
}
html.reader .navbar .nav > li > a:hover,
html.reader .navbar .nav > li.dropdown.open > a { color: var(--ink) !important; }
html.reader .navbar .btn-navbar { background: var(--surface) !important; border: 1px solid var(--rule); box-shadow: none; }
html.reader .navbar .btn-navbar .icon-bar { background: var(--muted); box-shadow: none; }
html.reader .nav-collapse.collapse { background: var(--paper); }

/* dropdown menus */
html.reader .dropdown-menu {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(20, 26, 40, 0.18) !important;
    padding: 6px;
}
html.reader .dropdown-menu > li > a {
    color: var(--ink) !important;
    font-family: 'Satoshi', system-ui, sans-serif !important;
    border-radius: 6px;
    padding: 6px 12px;
    text-shadow: none !important;
}
html.reader .dropdown-menu > li > a:hover {
    background: var(--surface) !important;
    color: var(--accent-strong) !important;
    text-decoration: none;
}
html.reader .dropdown-menu .divider { background: var(--rule); border: none; }
html.reader .caret {
    border-top-color: var(--muted) !important;
    border-bottom-color: var(--muted) !important;
}

/* ---- code ---- */
html.reader pre, html.reader code {
    font-family: "Cascadia Code", Consolas, ui-monospace, Menlo, monospace !important;
    text-shadow: none !important;
}
/* code blocks are always dark, regardless of theme: the syntax-highlight
   colors embedded in the posts are designed for dark backgrounds */
html.reader pre {
    background: #1C2331 !important;
    color: #EDE7D8 !important;
    border: 1px solid #3A455C !important;
    border-radius: 10px;
    padding: 1em 1.2em;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-x: auto;
}
html.reader code {
    background: var(--code-bg);
    color: var(--ink) !important;
    border: none;
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.85em;
}
html.reader pre code { background: none; color: inherit !important; padding: 0; font-size: inherit; }

/* ---- content furniture ---- */
html.reader img { max-width: 100%; height: auto; border-radius: 8px; image-rendering: auto !important; }
html.reader hr, html.reader hr.soften {
    border: none;
    border-top: 1px solid var(--rule);
    background: none;
    height: 0;
}
html.reader blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.2em 0 0.2em 1em;
    margin-left: 0;
    color: var(--muted);
}
html.reader table { border-collapse: collapse; }
html.reader table th, html.reader table td { border: 1px solid var(--rule); padding: 6px 10px; }
html.reader ul[name="moreposts"] li, html.reader #content ul li { margin-bottom: 0.3em; }

/* post-link lists (home page and archive pages): real bullets, comfortable
   rhythm. The homesingle wrapper ul (full posts on the home page) is excluded
   by the :first-of-type / [name] / direct-child scoping. */
html.reader #content .row-fluid > ul:first-of-type,
html.reader #content .row-fluid > ul[name="moreposts"],
html.reader #content > ul {
    list-style: disc outside;
    padding-left: 1.5em;
    margin: 0.8em 0 1.8em;
}
html.reader #content .row-fluid > ul:first-of-type > li,
html.reader #content .row-fluid > ul[name="moreposts"] > li,
html.reader #content > ul > li {
    list-style: disc outside;
    padding-left: 0.25em;
    margin-bottom: 0.55em;
}
html.reader #content .row-fluid > ul:first-of-type > li::marker,
html.reader #content .row-fluid > ul[name="moreposts"] > li::marker,
html.reader #content > ul > li::marker {
    color: var(--muted);
}

/* real bullets with hanging indents for lists inside post content
   (retro's "- " pseudo-markers are neutralized here) */
html.reader #content .navmargin ul,
html.reader #content .navmargin ol {
    padding-left: 1.4em;
    margin: 0 0 1.3em;
}
html.reader #content .navmargin ul > li { list-style: disc outside; }
html.reader #content .navmargin ol > li { list-style: decimal outside; }
html.reader #content .navmargin li {
    padding-left: 0.2em;
    text-indent: 0;
    margin-bottom: 0.5em;
}
html.reader #content .navmargin li:before { content: none !important; }
html.reader #content .navmargin li ul,
html.reader #content .navmargin li ol { margin: 0.4em 0 0; }

/* ---- footer ---- */
html.reader footer.container {
    width: auto !important;
    max-width: 54rem;
    margin: 0 auto;
    padding: 0 1.25rem 5rem;
    color: var(--muted) !important;
}
html.reader footer p { color: var(--muted) !important; }

/* ==========================================================================
   The mode switch (present in both themes; styled per theme)
   ========================================================================== */
#reader-controls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    display: flex;
    gap: 8px;
}
#reader-controls button {
    cursor: pointer;
    border: none;
    font-size: 12px;
    padding: 7px 12px;
}
/* retro look: a DOS chip */
#reader-toggle, #reader-theme {
    background: #000084;
    color: #ffffff;
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
}
#reader-toggle:hover, #reader-theme:hover { background: #0000c0; }
#reader-theme { display: none; }
/* reader look: quiet pills */
html.reader #reader-toggle, html.reader #reader-theme {
    background: var(--surface);
    color: var(--muted);
    font-family: 'Satoshi', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: color 0.15s ease, background 0.25s ease;
}
html.reader #reader-toggle:hover, html.reader #reader-theme:hover { color: var(--ink); }
html.reader #reader-theme { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    html.reader body, html.reader .navbar .navbar-inner,
    html.reader #reader-toggle, html.reader #reader-theme { transition: none; }
}