:root {
    --bg:       #fdfcf7;
    --text:     #222;
    --dim:      #888;
    --rule:     #ddd;
    --bar:      #333;
    --bar-text: #fff;
    --input:    #fff;
    --accent:   #7a5c2e;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:       #17171a;
        --text:     #ddd;
        --dim:      #8a8a90;
        --rule:     #333;
        --bar:      #0c0c0e;
        --bar-text: #eee;
        --input:    #222226;
        --accent:   #d4b483;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bar);
    color: var(--bar-text);
    font-family: system-ui, sans-serif;
    font-size: 14px;
    padding: 10px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.bar {
    max-width: 60em;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.bar a.home { font-weight: 700; margin-right: 8px; white-space: nowrap; }
.bar input {
    flex: 1 1 9em;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: var(--input);
    color: var(--text);
    font: inherit;
}
.bar input[name=page] { flex: 0 1 7em; }
#res_count { margin-left: auto; white-space: nowrap; opacity: .8; }

main { max-width: 45em; margin: auto; padding: 0 16px 4em; }

.result {
    display: block;
    padding: 1em 0;
    border-bottom: 1px solid var(--rule);
}
.result:hover .r-title { color: var(--accent); }
.meta {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    font-family: system-ui, sans-serif;
    font-size: 13px;
    color: var(--dim);
}
.meta b { color: var(--text); }
.r-title {
    font-family: system-ui, sans-serif;
    font-weight: 600;
    margin: .3em 0;
}
.result p { margin: 0; }
.status { text-align: center; color: var(--dim); font-family: system-ui, sans-serif; padding: 2em 0; }

article h1 { font-size: 1.6em; margin: .8em 0 .2em; }
article .meta { margin-top: 1.5em; }
article .meta a, .pager a { color: var(--accent); }
article h1 + .byline { font-family: system-ui, sans-serif; margin-bottom: 1.5em; }
article .byline a { color: var(--accent); font-weight: 600; }
.page-post { border-bottom: 1px solid var(--rule); padding-bottom: 1em; }
.page-post h2 { font-size: 1.2em; margin: 1.2em 0 .1em; }
.pager {
    display: flex;
    justify-content: space-between;
    font-family: system-ui, sans-serif;
    margin: 1.5em 0;
}

#search { display: contents; }
.est { cursor: help; border-bottom: 1px dotted var(--dim); }
.error-page { text-align: center; padding: 4em 0; }