/* sidebar werc theme -- hachem.wtf */

/* Maple Mono (OFL), self-hosted. four files cover every weight/style the css asks for. */
@font-face {
    font-family: "maple";
    src: url("/_werc/pub/maple-mono-regular.woff2?h=1bbc21ff") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/_werc/pub/maple-mono-bold.woff2?h=590b05fe") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/_werc/pub/maple-mono-italic.woff2?h=cc012e4f") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/_werc/pub/maple-mono-bolditalic.woff2?h=5202592c") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* fallback: a JuliaMono subset covering the math glyphs Maple Mono lacks
   (∮ ∇ ⟂ ⟺ ∝, some sub/superscripts). per-glyph fallback picks it up. */
@font-face {
    font-family: "ucmono";
    src: url("/_werc/pub/ucmono.woff2?h=f1a7d2ec") format("woff2");
    font-display: swap;
}

body {
    margin: 0;
    color: #1a1a1a;
    background: #ffffff;
    font-family: "maple", "ucmono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 16px;
    line-height: 1.6;
}

#wrap {
    max-width: 58em;
    margin: 0 auto;
    padding: 2.4em 1.6em;
    display: flex;
    align-items: stretch;       /* equal-height columns so the divider spans full height */
    gap: 0;
}

#sidebar {
    flex: 0 0 11em;
    padding-right: 1.9em;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
}

#brand {
    color: #1a1a1a;
    font-weight: bold;
    font-size: 1.15em;
    text-decoration: none;
}

#nav {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding-bottom: 0.9em;
    border-bottom: 1px dashed #cccccc;
}

#nav a {
    color: #555;
    font-size: 0.95em;
    text-decoration: none;
}

#nav a:hover { color: #1a1a1a; text-decoration: underline; }

#subnav {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    margin: 0.2em 0 0.1em 1em;
}

#subnav a {
    color: #8a8a8a;
    font-size: 0.85em;
    text-decoration: none;
}

#subnav a:hover { color: #1a1a1a; text-decoration: underline; }
#subnav a.here { color: #1a1a1a; }

#sig {
    margin-top: 0.3em;
    color: #999;
    font-family: inherit;   /* Maple Mono, like everything else */
    font-size: 0.8em;
    text-decoration: none;
}

#sig:hover { color: #555; }

#content {
    flex: 1 1 auto;
    min-width: 0;            /* let wide <pre> scroll instead of stretching the layout */
    max-width: 42em;
    padding-left: 1.9em;
    border-left: 1px dashed #cccccc;
}

#main-copy h1 { margin: 0 0 0.6em; padding-bottom: 0.25em; font-size: 1.7em; line-height: 1.2; border-bottom: 1px dashed #cccccc; }
#main-copy h2 { margin: 1.7em 0 0.5em; font-size: 1.3em; scroll-margin-top: 1.2em; }
#main-copy h3 { margin: 1.4em 0 0.4em; font-size: 1.12em; }
#main-copy p { margin: 0 0 1em; }
#main-copy ul, #main-copy ol { margin: 0 0 1em; padding-left: 1.3em; }
#main-copy li { margin: 0.25em 0; }

/* ascii dash markers instead of round bullets */
#main-copy ul { list-style: none; }
#main-copy ul > li { position: relative; }
#main-copy ul > li::before { content: "\2013"; position: absolute; left: -1.2em; color: #999999; }

#main-copy a {
    color: #1a1a1a;
    text-decoration: underline dashed;
    text-underline-offset: 2px;
}

#main-copy a:hover { color: #000; }

pre, code, tt {
    font-family: inherit;   /* everything is already Maple Mono */
}

#main-copy code {
    padding: 0.05em 0.3em;
    background: #f2f2f2;
    font-size: 0.86em;
}

#main-copy pre {
    padding: 0.8em 1em;
    overflow-x: auto;
    background: #f2f2f2;
    border: 1px dashed #d2d2d2;
    font-size: 0.82em;
    line-height: 1.5;
}

#main-copy pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* KaTeX output (see headers.tpl) */
#main-copy .katex { font-size: 1.08em; }
#main-copy .katex .math-punct { font-family: "maple", "ucmono", monospace; font-size: 0.926em; }
#main-copy .katex-display { margin: 0.6em 0 1em; overflow-x: auto; overflow-y: hidden; }

#main-copy blockquote {
    margin: 0 0 1em;
    padding-left: 1em;
    border-left: 3px dashed #cccccc;
    color: #555;
}

::selection { background: #ededed; }

@media (max-width: 40em) {
    #wrap { flex-direction: column; gap: 1.5em; padding: 1.6em 1.3em; }
    #sidebar {
        flex-basis: auto;
        padding-right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4em 1.1em;
    }
    #nav { flex-direction: row; flex-wrap: wrap; gap: 0.4em 1.1em; }
    #sig { margin: 0; }
    #content { max-width: none; padding-left: 0; border-left: none; }
}