:root {
    color-scheme: light;
    --fill-bg: #f5efce;
    --fill-text: #381b24;
    --fill-accent: #831d3d;
    --fill-soft: #e7dfb4;
    --fill-highlight: #e4f249;
    --font-body: 'Literata', Georgia, serif;
    --font-title: 'UnifrakturCook', serif;
    --font-narrow: 'Space Mono', monospace;
    --font-mono: 'Space Mono', monospace;
    --line-height-body: 1.8;
}
body { font-weight: 400; }
main { max-width: 780px; }
h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}
.title { font-size: clamp(2.8rem, 7vw, 4.2rem); }
p { margin: 20pt 0; }
.tag, .tag-light {
    font-family: var(--font-narrow);
    font-size: inherit;
    line-height: 1.65;
    opacity: 1;
    color: var(--fill-accent);
}
.tag cite { font-style: italic; }
a {
    background-image: linear-gradient(var(--fill-highlight), var(--fill-highlight));
}
a:hover, a:active, a:focus {
    color: var(--fill-text);
}
.pill a, .pill span {
    background-color: var(--fill-soft);
    border-radius: 0;
}
.menu { display: flex; flex-wrap: wrap; gap: 12px; text-align: left; }
.pill { white-space: normal; }
.pill a { display: inline-block; }
article { border-top: 2px solid var(--fill-accent); }
::selection { background: var(--fill-highlight); color: var(--fill-text); }
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --fill-bg: #23171e;
        --fill-text: #f5efce;
        --fill-accent: #e8a6af;
        --fill-soft: #43303a;
        --fill-highlight: #e4f249;
    }
    a:hover, a:active, a:focus { color: #23171e; }
    ::selection { color: #23171e; }
}
@media print {
    :root { --fill-bg: white; --fill-text: black; --fill-accent: #555; }
    main { max-width: none; }
}