:root {
    --page: #1e3a5f;
    --paper: #f6f4ee;
    --band: #c9dcef;
    --ink: #1b1b1b;
    --muted: #5a6270;
    --link: #1d4f91;
    --error: #b3261e;
    --ok-ink: #1f5e24;
    --ok-paper: #dcefdc;
    --gap: 8px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 24px 12px 32px;
    background: var(--page) var(--tile) repeat;
    color: var(--ink);
    font: 16px/1.5 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
    body {
        background-image: var(--tile-still);
    }
}

.page {
    max-width: 44em;
    margin: 0 auto;
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
}

.site-header, main, .site-footer {
    padding: calc(var(--gap) * 2);
}

.site-header {
    background: var(--band) var(--tile-header) repeat;
    border-bottom: 2px solid var(--ink);
}

.site-footer {
    background: var(--band) var(--tile-footer) repeat;
    border-top: 2px solid var(--ink);
}

main {
    background: var(--paper);
}

.logo, .site-header nav a, .site-footer a {
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 2px var(--gap);
}

.site-header nav a:hover, .site-footer a:hover, .logo:hover {
    background: var(--link);
    color: var(--paper);
}

a {
    color: var(--link);
}

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    color: var(--ink);
    font-weight: bold;
    text-decoration: none;
}

.logo img, .pixel {
    image-rendering: pixelated;
}

.site-header nav, .site-footer p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.site-header nav {
    margin-top: calc(var(--gap) * 1.5);
}

.site-footer p {
    margin: 0;
}

h1, h2 {
    margin: 0 0 var(--gap);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.15em;
    margin-top: calc(var(--gap) * 3);
}

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

.post {
    margin: calc(var(--gap) * 4) 0;
}

.post h2 {
    margin-top: 0;
}

.post img {
    display: block;
}

.meta, .hint, .empty {
    color: var(--muted);
    font-size: .875em;
}

.meta {
    margin: 0 0 var(--gap);
}

.description {
    margin: var(--gap) 0;
    overflow-wrap: anywhere;
}

.about {
    overflow-wrap: anywhere;
}

.flash {
    margin: 0 0 calc(var(--gap) * 2);
    padding: var(--gap) calc(var(--gap) * 2);
    background: var(--ok-paper);
    color: var(--ok-ink);
}

.flash.error {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
}

.errors {
    color: var(--error);
    padding-left: 1.5em;
}

form {
    max-width: 28em;
}

label {
    display: block;
    margin-top: calc(var(--gap) * 2);
}

input[type=text], input[type=email], input[type=password], input[type=file], textarea, select {
    display: block;
    width: 100%;
    font: inherit;
}

textarea {
    min-height: 8em;
}

button {
    margin-top: calc(var(--gap) * 2);
    font: inherit;
}

fieldset {
    margin: calc(var(--gap) * 2) 0 0;
    padding: var(--gap) calc(var(--gap) * 2) calc(var(--gap) * 2);
    border: 1px solid var(--muted);
}

.choice .hint {
    display: block;
    padding-left: 1.75em;
}

form.inline {
    display: inline;
}

form.inline button, form.inline select {
    display: inline;
    width: auto;
    margin-top: 0;
}

.comments {
    margin: 0 0 calc(var(--gap) * 2);
    padding: 0;
    list-style: none;
}

.comments li {
    padding: var(--gap) 0;
    border-bottom: 1px solid var(--band);
    overflow-wrap: anywhere;
}

.owner, .pager {
    display: flex;
    gap: calc(var(--gap) * 2);
    margin-top: calc(var(--gap) * 3);
}

.table {
    overflow-x: auto;
}

summary {
    cursor: pointer;
    color: var(--link);
}

details {
    margin-top: var(--gap);
}

details form {
    margin-bottom: var(--gap);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: var(--gap);
    border-bottom: 1px solid var(--band);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}