/* goatee.net blog theme
   Layout: fixed banner image, then a two-column flex #container
   (#leftcontent nav + #rightcontent entries) that stacks below 800px. */

/* --- Page shell ------------------------------------------------- */

body {
    font: 13pt/18pt georgia, palatino, serif;
    margin: 0 0 10px 15px;
    padding: 0;
    background: #cc9;
}

#banner {
    height: 175px;
    width: 100%;
    margin: 0;
    padding: 0;
    border-left: 1px dotted #000;
    /* Sits directly above #container, so kill the inline descender gap. */
    vertical-align: bottom;
    object-fit: cover;
    object-position: center;
}

#container {
    display: flex;
    flex-direction: row; /* overridden to column below 800px */
}

/* --- Left column: titles and nav -------------------------------- */

#leftcontent {
    padding: 1em;
    margin-top: 0;
    background: #cc9;
    font-family: arial, helvetica, sans-serif;
}

/* Also lowercases the <strong> section headings ("stuff", "zines") and,
   by inheritance, the nav links inside these paragraphs. */
#leftcontent p {
    margin: 0 0 4px;
    text-transform: lowercase;
}

#links {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* \0000ab and \0000bb are << and >> (guillemets), written as CSS escapes
   so this file stays pure ASCII and renders correctly however the
   server labels its charset. */
#links a::before { content: "\0000ab"; color: #660; }
#links a::after  { content: "\0000bb"; color: #660; }

/* Ties with `#leftcontent p` on specificity, so it must stay after it. */
#links p { margin-right: 10px; }

@media screen and (max-width: 800px) {
    #container {
        flex-direction: column;
    }
    #links {
        flex-direction: row;
        justify-content: flex-start;
        gap: 2em;
    }
    /* Below 800px, #leftcontent stretches full-width (see #container
       above), so there's room for goatee/highlanders side by side instead
       of stacked. flex-wrap is a safety net for very narrow phones -- if
       they still don't fit, it falls back to stacked rather than
       overflowing. Font sizes are untouched, same as the wide/stacked
       layout below 800px. */
    #titles {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4em;
        margin-bottom: 0.75em;
    }
    #titles h1,
    #titles #site-subtitle {
        margin: 0;
        padding: 0;
    }
}

/* --- Right column: entries -------------------------------------- */

#rightcontent {
    flex: 1; /* right container can grow to the right */
    padding: 0 15px 15px 25px;
    margin-top: -1px;
    background: #fefbd2;
    border-top: 1px solid #fefbd2;
    border-left: 1px dotted #000;
}

/* --- Headings --------------------------------------------------- */

h1, h2 {
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-weight: normal;
    color: #660;
    clear: both;
    padding: 15px 5px 5px 5px;
}

#site-title {
    font-size: 260%;
    color: #330;
    padding: 0;
}

#site-title > a { color: #330; }

#site-subtitle {
    margin-top: -0.5em;
    color: #330;
    padding: 0;
}

h2.article-title {
    text-transform: lowercase;
    background: inherit;
}

/* --- Body copy -------------------------------------------------- */

p, th, td, ul, ol, dl, dd, li {
    margin: 0.2em 1em 0.5em 0.1em;
}

p.metadata {
    clear: both;
    font-family: arial, sans-serif;
    text-align: right;
    margin-top: 5em;
}

/* Archive listing lines: "2026.08.13.thu | title" */
p.index {
    font-family: "Andale Mono", "Courier New", Courier, monospace;
    font-size: 90%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-transform: lowercase;
}

/* --- Images and video ------------------------------------------- */

img {
    /* border-box so the max-width caps below include the padding and
       border instead of having them added on outside the cap. */
    box-sizing: border-box;
    border: solid thin #cc9;
    padding: 5px;
    margin: 7px;
}

/* Entry images are capped by default, so markdown needs no attributes: this
   replaces the old `.view` class, which was on 75 images through 2026-08 and
   has since been stripped from the entries. #rightcontent covers both the
   article page and the index/tag/category listings; .thumb keeps its own,
   smaller cap below. */
#rightcontent img:not(.thumb) { max-width: 100%; max-height: 600px; }

/* Anchor-wrapped images default to inline, which leaves a phantom gap
   below the image (line-box space reserved for the link's own inline
   box); the gap turns visibly green on hover via the a:hover background.
   display: block on the linked image removes that inline box entirely. */
#rightcontent a > img:not(.thumb) { display: block; }

img.thumb {
    border: solid thin #dbe8b9;
    max-width: 260px;
    max-height: 300px;
}

/* Floated entry images; .right is unused today but kept as a counterpart. */
img.left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

img.right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

video {
    margin: 0;
    max-width: 98%;
    max-height: 600px;
}

/* --- Links ------------------------------------------------------ */

/* Keep L-V-H-A order: :hover/:active tie on specificity, so whichever is
   declared last wins. With :hover last, :active never showed on a click. */
a:link,
a:visited   { color: #03c; text-decoration: none; }
a:hover     { color: navy; background-color: #dbe8b9; text-decoration: none; }
a:active    { color: #06c; background-color: #ffffcc; text-decoration: none; }

/* Tints the 5px padding ring around a linked entry image on hover. */
#rightcontent a > img:hover { background-color: #dbe8b9; }

/* The degree-sign permalink marker beside each entry title. */
a.hint { color: #99f; }

/* --- Pagination ------------------------------------------------- */

.pagination { clear: both; }
.pagination span.active { background-color: #e0e0e0; }

/* --- Block quotes and verse ------------------------------------- */

blockquote {
    margin: 1.5em 3em;
    padding: 0.75em 1.5em;
    border-left: 3px inset #660;
    background: #f5f0d8;
    overflow: hidden;
}

/* For poetry/verse blocks */
.line-block {
    margin: 1.5em 2em;
    padding: 1em 2em;
    font-family: georgia, palatino, serif;
    line-height: 1.6;
    border-top: 1px dotted #660;
    border-bottom: 1px dotted #660;
    background: #e8f0d8;
    width: fit-content;
    overflow: hidden;
}

.line-block p {
    white-space: pre-wrap;
    margin: 0.3em 0;
}