body > div.error {
    background-color: #fdd;
    border: 0.1em solid #f88;
    padding: 0.3em;
}
body {
    font-family: Georgia, 'Times New Roman', serif;
    max-width: 42em;
    padding: 0 0.5em;
    background-color: #fffdf8;
    --text-color: #1a0e00;
    --brand-color: #c07020;
    color: var(--text-color);
}
a {
    color: #7a3d00;
}
nav {
    font-family: sans-serif;
    padding: 0.5em 0;
    border-bottom: 1px solid #e8ddc8;
    margin-bottom: 1em;
    display: flow-root;
}

.rss-badge {
    float: right;
    background-color: var(--brand-color);
    color: #fff;
    padding: 0.05em 0.45em;
    border-radius: 0.25em;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

.rss-badge:visited {
    color: #fff;
}
body > hr {
    display: none;
}
main h1 {
    margin-bottom: 0;
}
main .subtitle {
    font-style: italic;
}
textarea {
    width: 100%;
}
button {
    display: block;
    margin: 0.7em 0 0 auto;
    padding: 0.2em 1em;
}
p > * {
    max-width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    text-align: left;
    background-color: #f5ede0;
}
th, td {
    border: 1px solid #ddd0b8;
    padding: 0.5em;
}
dt {
    font-weight: bold;
    margin-top: 1em;
}

pre > code {
    padding: 1em;
    display: block;
    background-color: #f5ede0;
    border-radius: 0.5em;
    border: 1px solid #ddd0b8;
}

#toc {
    padding: 1em;
    border-radius: 0.5em;
    background-color: #fdf4e8;
    border: 1px solid #e8ddc8;
}

#toc > li {
    margin-left: 1.5em;
}

blockquote {
    padding: 0.8rem 1.2rem;
    margin: 0.5rem 0;
    --accent-color: #3a1e00;
    border-left: 0.2em solid color-mix(in srgb, var(--accent-color) 60%, transparent);
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.warning { --accent-color: red; }
.info    { --accent-color: #ffba00; }
.rule    { --accent-color: green; }
.def     { --accent-color: blue; }

code.language-bad,
code.language-good {
    background-color: color-mix(in srgb, var(--accent-color) 8%, #f5ede0);
    color: color-mix(in srgb, var(--accent-color) 60%, var(--text-color));
}

code.language-bad  { --accent-color: red; }
code.language-good { --accent-color: green; }

#preview {
    display: none;
    float: right;
    margin-right: -105%;
    width: 100%;
}

.pikchr-svg {
    margin: auto;
}

.article-list {
    display: grid;
    grid-template-columns: min-content 1fr;
    row-gap: 0.2em;
}

main > time {
    display: block;
}

main > img {
    max-width: 100%;
    margin: 0 auto 0.5em;
}

time {
    font-style: italic;
    opacity: 50%;
}

.article-list time {
    text-wrap-mode: nowrap;
    padding-right: 0.5em;
    text-align: right;
}

figure > img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

figure > figcaption {
    text-align: center;
    opacity: 50%;
    margin: 1em 0;
}

/* The default textarea is 80 columns. Let's assume 1ch is about 0.5em.
   So 80 cols is about 40em. We need space for two of them, plus gap.
   So about 81em. Let's use that as a breakpoint.
*/
@media (min-width: 105em) {
    #preview {
        display: block;
    }
}

#TableOfContents {
    font-size: 1em;
    padding: 1px;
    margin-top: 1em;
    border-radius: 0.5em;
}

.alignright {
    float: right;
    margin: 0 0 0 1em;
}

/* Comments */
#comments input, #comments textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid #ddd0b8;
    outline-color: var(--brand-color);
}

#comments input:focus,
#comments textarea:focus {
    background-color: #fffdf8c0;
}

#comments textarea {
    resize: vertical;
    font-family: inherit;
    min-height: 8em;
}

#comments input[type="submit"] {
    padding: 0.5em 1em;
    width: auto;
    float: right;
    margin: 0.5em 0;
    font-weight: 900;
    cursor: pointer;
}

#comments input[type="submit"]:hover {
    background-color: var(--brand-color);
    color: white;
}

.comment-error {
    border: 1px solid #754a4a;
    background-color: #ffbbbb;
    padding: 0.4em;
}

.comment {
    border-bottom: 1px solid #ddd0b8;
    margin: 1em 0;
    padding-bottom: 0.3em;
}

.comment .author { font-weight: bold; }
.comment .time { font-size: 0.6em; opacity: 60%; }
.comment .content {
    font-size: 0.9em;
    white-space: pre-wrap;  /* don't conflate newlines */
}

#comment-form {
    margin-top: 1em;
    overflow: auto;  /* clearfix hack because button floats */
}

#comment-form .fielderror {
    float: right;
    color: #754a4a;
    font-size: 0.8em;
}
#comment-form .error input,
#comment-form .error textarea {
    background-color: #ffeeee;
}

#comment-form img {
    display: inline;
    margin: 0;
    max-width: 100%;
}

.sidenote { display: none; }