@charset "UTF-8";
/* ------------------------------------------------------------------
   VOLYTH - text-mode theme, ember palette
   Colours are derived from the logo: amber #AA5500, coral #FF5555,
   dark red #AA0000. Neutrals are warm greys so they sit with the
   amber instead of fighting it.
   Font is IBM VGA 8x16, so font sizes stay at 16px (or exact
   halves/multiples) to keep the pixel grid crisp. Line heights are
   integer pixels for the same reason.
   ------------------------------------------------------------------ */

/* IBM VGA 8x16 from The Ultimate Oldschool PC Font Pack by VileR
   https://int10h.org/oldschool-pc-fonts/  -  CC BY-SA 4.0 */
@font-face {
    font-family: "IBMVGA8";
    src: url("../fonts/ibm_vga8.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* logo colours */
    --amber:   #aa5500;
    --coral:   #ff5555;
    --red:     #aa0000;

    /* derived accents */
    --gold:    #ffaa33;   /* amber lifted for readable link text */
    --rust:    #c2823a;   /* amber softened for captions and secondary text */
    --ember:   #5a2a10;   /* deep amber for shadows and dark rules */

    /* warm neutrals */
    --black:   #000000;
    --panel:   #1a1512;
    --card:    #2a221b;
    --shadow:  #2e2218;
    --dim:     #665a4f;
    --mid:     #8c7f72;
    --text:    #b8ada0;
    --light:   #dcd2c4;
    --white:   #f5ede2;

    --font:    "IBMVGA8", "Px437 IBM VGA8", "Perfect DOS VGA 437", monospace;
    --maxw:    896px;   /* 112 columns at 8px */
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
    margin: 0;
    padding: 0 16px 48px;
    font-family: var(--font);
    font-size: 16px;
    line-height: 20px;
    color: var(--text);
    background: var(--black);
    -webkit-text-size-adjust: 100%;
}

/* ---------- logo ------------------------------------------------- */

.header {
    text-align: center;
    padding: 32px 0 20px;
    overflow: hidden;
}

.logo { display: inline-block; text-decoration: none; }

.logo pre {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 16px;
    color: var(--text);
    white-space: pre;
    text-align: left;
    background: none;
    border: 0;
    overflow: visible;
    /* hard shadow on the whole composited shape */
    filter: drop-shadow(6px 6px 0 var(--shadow));
}

.logo .c  { color: var(--coral); }
.logo .a  { color: var(--amber); }
.logo .r  { color: var(--red); }
.logo .ba { background: var(--amber); }

/* ---------- nav:  ======= [HOME] [POSTS] ======= ------------------- */

.nav {
    display: flex;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto 24px;
}

.nav .rule {
    flex: 1 1 0;
    min-width: 16px;
    height: 6px;
    border-top: 1px solid var(--amber);
    border-bottom: 1px solid var(--amber);
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-list li { margin: 0; padding: 0; }

/* ---------- bracketed buttons: [HOME] ------------------------------ */

.btn,
.btn:link,
.btn:visited {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--white);
    background: var(--black);
    padding: 0 11px;
    margin: 0 7px;
    line-height: 32px;
    border-top: 1px solid var(--amber);
    border-bottom: 1px solid var(--amber);
    border-left: 2px solid var(--amber);
    border-right: 2px solid var(--amber);
}

.btn span::before { content: "["; color: var(--amber); }
.btn span::after  { content: "]"; color: var(--amber); }

.btn.thispage { border-color: var(--ember); color: var(--mid); }
.btn.thispage span::before, .btn.thispage span::after { color: var(--ember); }

.btn:hover,
.btn:focus,
.btn:active {
    color: var(--white);
    background: var(--red);
    border-color: var(--coral);
    outline: 0;
}
.btn:hover span::before, .btn:hover span::after,
.btn:focus span::before, .btn:focus span::after { color: var(--coral); }

/* ---------- content panel ---------------------------------------- */

.panel {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px 24px 28px;
    background: var(--panel);
    text-align: left;
}

.tagline { margin-top: 0; color: var(--light); }

main > :last-child { margin-bottom: 0; }

p, ul, ol, blockquote { margin: 0 0 20px; }

a:link, a:visited { color: var(--gold); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--white); background: var(--red); }

strong, b { color: var(--white); font-weight: 400; }
em { color: var(--light); font-style: normal; }

blockquote {
    border-left: 2px solid var(--amber);
    padding-left: 14px;
    color: var(--mid);
}

hr {
    border: 0;
    border-top: 1px solid var(--ember);
    margin: 24px 0;
}

/* ---------- headings ---------------------------------------------- */

h1, h2, h3, h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

h1 {
    color: var(--white);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--ember);
    margin: 0 0 4px;
}

h1::before { content: "█ "; color: var(--amber); text-shadow: none; }

h2 {
    display: inline-block;
    color: var(--white);
    background: var(--red);
    text-transform: uppercase;
    padding: 6px 8px;
    margin: 28px 0 16px;
    box-shadow: 8px 8px 0 var(--shadow);
}

h3 {
    color: var(--gold);
    text-transform: uppercase;
    border-bottom: 1px solid var(--amber);
    padding: 0 0 7px;
    margin: 28px 0 16px;
}

h4 { color: var(--rust); margin: 24px 0 8px; }

.post-meta {
    color: var(--mid);
    margin: 0 0 24px;
    padding-left: 2ch;   /* sit under the title text, not under the block marker */
}

/* ---------- post list ------------------------------------------- */

.post-list { list-style: none; padding: 0; }

.post-list li { margin: 0 0 4px; }

.post-list li::before { content: "» "; color: var(--amber); }

.post-date {
    display: inline-block;
    width: 12ch;
    color: var(--mid);
}

/* ---------- prev / next ----------------------------------------- */

.post-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 32px;
}

.post-nav .btn { background: var(--panel); margin: 0; }
.post-nav .btn[rel="next"] { margin-left: auto; }
.post-nav .btn:hover { background: var(--red); }

/* ---------- figures & images ------------------------------------ */

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

figure {
    position: relative;
    z-index: 0;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: 28px auto 36px;
    padding: 16px;
    background: var(--card);
}

/* block-shade drop shadow, like a text-mode window */
figure::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    left: 16px;
    width: 100%;
    height: 100%;
    background:
        repeating-conic-gradient(var(--ember) 0 25%, var(--black) 0 50%)
        0 0 / 4px 4px;
}

figure img { display: block; margin: 0 auto; }

figcaption {
    color: var(--rust);
    margin-top: 12px;
    text-align: left;
}

figcaption p, figcaption h4 { margin: 0; }

/* ---------- code -------------------------------------------------- */

pre, code, kbd, samp { font-family: var(--font); font-size: 16px; }

code {
    color: var(--light);
    background: var(--black);
    padding: 0 4px;
}

pre {
    margin: 20px 0;
    padding: 12px 16px;
    line-height: 16px;
    color: var(--text);
    background: var(--black);
    border: 3px double var(--amber);
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

pre code { padding: 0; color: inherit; background: none; }

.highlight { margin: 20px 0; }
.highlight pre { margin: 0; }

/* Chroma tokens, ember palette */
.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs,
.chroma .ch, .chroma .cp, .chroma .cpf, .chroma .sd  { color: var(--dim); }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .ow                  { color: var(--gold); }
.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nb     { color: var(--light); }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc,
.chroma .s1, .chroma .s2, .chroma .se, .chroma .sh,
.chroma .si, .chroma .sr, .chroma .ss, .chroma .sx     { color: var(--coral); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .mo, .chroma .il                  { color: var(--rust); }
.chroma .nf, .chroma .fm, .chroma .na, .chroma .nd     { color: var(--white); }
.chroma .o, .chroma .p                                 { color: var(--mid); }
.chroma .err                                           { color: var(--white); background: var(--red); }

/* ---------- tables ------------------------------------------------ */

table { border-collapse: collapse; margin: 20px 0; }
th, td { padding: 4px 12px; border: 1px solid var(--ember); text-align: left; }
th { color: var(--white); background: var(--card); }

/* ---------- footer ------------------------------------------------ */

.footer {
    max-width: var(--maxw);
    margin: 32px auto 0;
    text-align: center;
    color: var(--dim);
}

.footer p { margin: 0 0 4px; }
.footer a:link, .footer a:visited { color: var(--rust); }
.footer a:hover { color: var(--white); background: var(--red); }

/* ---------- responsive ------------------------------------------ */

@media (max-width: 640px) {
    .panel { padding: 16px; }
    .btn, .btn:link, .btn:visited { margin: 0 4px; padding: 0 8px; }
}

@media (max-width: 420px) {
    .header { padding-top: 24px; }
    /* half-size VGA glyphs: 4x8 grid, still crisp */
    .logo pre {
        font-size: 8px;
        line-height: 8px;
        filter: drop-shadow(3px 3px 0 var(--shadow));
    }
    figure { padding: 8px; max-width: calc(100% - 8px); }
    figure::before { top: 8px; left: 8px; }
    .nav .rule { min-width: 8px; }
    .btn, .btn:link, .btn:visited { margin: 2px; padding: 0 6px; }
}